Prototyping mit Figma und Adobe XD

14. Mai 2019

Ich habe zwischen der Verwendung von Adobe XD und Figma.com für meine UX-Layout-Modelle hin und her gewechselt. Der Prozess muss schnell sein, die Ergebnisse müssen einfach zu teilen sein und die Kosten für zukünftige Änderungen müssen billig sein. Es war ein enges Rennen zwischen den beiden führenden Optionen.

Es lebe Adobe

Ich bin seit sehr langer Zeit Kunde von Adobe. Rückblickend erinnere ich mich, wie ich es Mitte der neunziger Jahre auf einem frühen Macintosh von einem mit Gummibändern gebundenen Stapel beiger Disketten installiert habe. Im Laufe der Jahre hat sich die Anwendung nur langsam verbessert. Ich habe einen Screenshot von Version 4.0 ausgegraben. Es ist erstaunlich, wie gut diese ursprünglichen Entwickler das Layout und die Funktionalität der Anwendung von Anfang an umgesetzt haben.

Von Photoshop aus verzweigte ich mich bald in Illustrator, Premiere, After Effects und eine Vielzahl anderer Design-Apps. Ich bin mit diesen Tools aufgewachsen und sie haben meine Sichtweise auf Design geprägt. Während frühere Generationen ihre rudimentären Kompasse und Lineale hatten, um ihre Entwürfe zu unterstützen, wuchs meine Generation mit dem Bezier-Kurven-Werkzeug unter der Leitung des intelligenten Führers auf.

XD ist ein brandneues Tool aus dem Adobe Creative Suite-Paket für die nächste Generation von Software-Designern, das sich deutlich von seinem Photoshop / Illustrator-Erbe unterscheidet. Die App ist leichter und schneller als alles andere, was das Unternehmen bisher herausgebracht hat. Sie bietet einen Spielplatz für die Meta-Design-Phase der Softwareentwicklung - diese kurze frühe Planungsphase, in der die Architektur und Organisation von Frontend-Komponenten noch flexibel ist. Die Entscheidungen, die zu diesem Zeitpunkt im Spiel getroffen werden, sind während des gesamten Erstellungsprozesses uneinheitlich. Daher ist es wichtig, über ein Tool-Set zu verfügen, mit dem künstlerische Leidenschaft in unglaubliche Prototypen umgesetzt werden kann.

Was XD so schnell macht, ist, dass es an den richtigen Stellen eine prädiktive Mustererkennung anzuwenden scheint. Befindet sich eine Kante in der Nähe einer anderen logischen Kante, werden die vorgeschlagenen Ausrichtungsoptionen sofort auf dem Bildschirm angezeigt, wobei die Pixelzahl genau dort liegt, wo Sie sie benötigen, um eine pixelgenaue Layoutkontinuität zu erzielen. Es macht Wiederholungen deutlich, Ihnen die Werkzeuge zu geben, die Sie möglicherweise benötigen, bevor Sie danach fragen müssen.

Die verschachtelten Elementgruppierungen scheinen besser zu funktionieren als alle vorherigen Implementierungen von Ebenen auf der ganzen Leinwand - Sie wählen einige Elemente aus, tippen auf die Gruppenschaltfläche und sehen einen glänzenden neuen modularen Komponentenblock. Es ist eine wirklich coole Art zu arbeiten.

Wenn Sie ein inneres Element innerhalb der Komponente auswählen möchten, reichen anscheinend ein paar Klicks aus, um der Anwendung genau mitzuteilen, welches Element hervorgerufen werden soll. Es ist intelligent ausgewählt und ausgereift.

Wenn Sie sich bereits für die Creative Suite entschieden haben, erhalten Sie XD ohne zusätzliche Kosten. Für bestehende Abonnenten ist dies fast wie kostenlose Software.

Warum also etwas anderes verwenden?

Figma ist XD sehr ähnlich, wird jedoch als Web-App bereitgestellt (Sie können jedoch einen Desktop-Wrapper herunterladen). Das hat mich anfangs abgelehnt, aber in der Praxis nicht sonderlich gestört. Im Vorfeld muss keine Software heruntergeladen werden, sodass das Teilen bearbeitbarer Designs ein Kinderspiel ist.

Wenn Sie den Quellcode in den Figma-Renderer einfügen, sieht es so aus, als würde der Bildschirm mit einem Canvas-Element gezeichnet, das in erster Linie durch absolute Positionierung funktioniert. Ich bin gespannt, wie sich die Dinge entwickelt hätten, wenn wir mit den tatsächlichen 1: 1 CSS-gesteuerten DOM-Elementen gearbeitet hätten.

Insgesamt scheint Figma für die gemeinsame Bearbeitung besser aufgestellt zu sein - machen wir uns aber nichts vor ... Wie oft brauchen wir tatsächlich mehrere Editoren auf dem Bildschirm, die unsere Layouts auf einmal bearbeiten und zufällige Kommentare direkt zu unseren Designs hinzufügen? Abgesehen von der Zusammenarbeit mit Dokumenten auf Git-Ebene und der Bildschirmfreigabe ist es selten, dass ich nach einer Möglichkeit zum gleichzeitigen Bearbeiten von Dokumenten mit mehreren Cursorn Ausschau halte. Wann waren Sie das letzte Mal in Photoshop und dachten, "das wäre sicher produktiver, wenn jemand anderes auf meinem Bildschirm zeichnen könnte, während ich gerade arbeite"?

Da Figma webbasiert ist, ist das Tweeten eines Layouts an die Massen kein Problem. Über einen Freigabe-Link sind Sie nie mehr als eine Registerkarte von der Veröffentlichung eines Designs entfernt. Und das hat schamlos dazu beigetragen, die Marktakzeptanz zu verbessern. Ich kann zwar schnell eine Verknüpfung zu einem in der Cloud gehosteten XD-Dokument herstellen, aber wenn jemand Änderungen vornehmen möchte, muss er sich im Wesentlichen für ein Adobe-Konto anmelden, ein Formular ausfüllen und den Giganten Adobe Creative Suite installieren Hat niemand Zeit dafür?

Sowohl XD als auch Figma haben einen schnellen Update-Sprint-Zyklus, sodass die Benutzererfahrung beim Arbeiten in der App ständig verbessert wird. Erst letzten Monat hat das Figma-Team den Mechanismus für die vertikale Ausrichtung verbessert: https://www.figma.com/blog/line-height-changes/ Ein paar Wochen später haben sie die Art und Weise verbessert, wie Elemente Lücken füllen in einer Rasterauflistung. Dann, letzte Woche, fügten sie neue Vektorwinkel-Fangpunkte hinzu. Die Update-Liste von XD ist ebenso beeindruckend.

Wie XD scheint die Anwendung häufig eine ausgeprägte Intuition in Bezug auf die Beziehungen zwischen Objekten auf dem Bildschirm zu haben, sodass sie genaue Vorschläge machen kann, um neue Ergänzungen und Änderungen zu beschleunigen. UX-Framing eignet sich besonders gut für diesen Workflow, da die atomare Designeinheit nur eine einfache Box ist - Sie arbeiten im Allgemeinen mit 4 Seiten, die sich entlang 2 Achsen strecken und zusammenziehen, mit Lücken innerhalb und außerhalb der Boxen.

Wir hoffen, dass Figma öfter als bisher das Richtige tut und Sie als Designer schneller Entscheidungen treffen können (und diese Entscheidungen als Ingenieur besser verstehen).

Ein großartiger Ort, um zu beginnen, aber weit weg vom Ziel

Wenn Sie jedoch erst einmal versuchen, die Reaktionsfähigkeit der Benutzeroberfläche und die reaktive Datenpopulation einzubeziehen, scheint keines dieser Tools der Aufgabe gerecht zu werden. Angesichts dessen, dass dies zu den wichtigsten Aspekten des Prototyping gehört, ist es ein großes Versehen, dass diese Funktionalität nicht im Vordergrund steht und so funktioniert, wie sie sollte.

In den bereitgestellten Beispiellayouts sehen Sie häufig ein Desktop-Layout neben einem Tablet-Layout - als ob wir die exakten quantisierten Größen der beiden Geräte kennen, die unseren Inhalt rendern, und wir möchten für jedes eine separate Skizze. Der Textrahmen wird in beiden Anwendungen rückwärts angewendet, wobei die untergeordneten Elemente ihren Eltern zuhören, während die Interaktion zwischen den Geschwistern vollständig ignoriert wird.

Obwohl wir in der Lage sind, die grundlegenden Umrisse unserer Layouts innerhalb dieser Einschränkungen schnell zu skizzieren, können wir die adaptiven Eigenschaften ihrer Komponenten nicht vollständig untersuchen. Daher ist die Genauigkeit, Flexibilität und Komplexität unseres UI-Prototyping mit diesen Tools derzeit begrenzt.

Vielleicht würden wir in einer idealen Welt unsere Implementierung mit so etwas wie einem hochdynamischen Gerüst beginnen, bei dem die modulare Anpassungsfähigkeit und handhabbare Entropie im Vordergrund stehen. Wir würden dann das Design „Für Web / Native speichern“ und unsere funktionale geräteunabhängige Logik direkt über dieses Gerüst legen. Dann würden wir unsere Apps mit einer schönen Benutzeroberfläche und austauschbaren themenbezogenen Außenseiten versehen.

Im Moment funktioniert es nicht ganz so.

Derzeit beginnt der Prozess mit einer Skizze in Figma oder XD. Wir rendern einen groben Winkel des Projekts, blinzeln darauf und versuchen uns vorzustellen, was es sein könnte. Wir starten dann einen neuen Prototyp von Grund auf mit Code und bekommen ein Gefühl dafür, wie er tatsächlich aufgebaut sein könnte, wenn wir uns ernsthaft dem Build und der Bereitstellung für die Produktion nähern würden. Und schließlich schmieden wir ein neues Gerüst und arbeiten uns mit zwei Schritten vorwärts und einem Schritt zurück wieder heraus. Es ist ein chaotischer Prozess, aber es ist der aktuelle Stand des Prototyping, wie ich es kenne.

Sie können mit XD oder Figma nichts falsch machen - dies sind die besten verfügbaren Tools. Ich verwende Figma derzeit aus keinem anderen Grund als der Einfachheit der Freigabe und der aktuellen Beliebtheit. Ich habe jedoch kaum Zweifel, dass XD mit einigen zusätzlichen Export- / Responsive-Design-Funktionen die Marktführerschaft übernehmen könnte. Stellen Sie sich vor, XD spielt gut mit Google Flutter und plötzlich sind wir wieder in Dreamweaver und haben keinen VS-Code mehr.

Hier ist eine Kopie des Figma-Layout-Prototyps, der für diese aktuelle Version des Blogs verwendet wird. Bearbeiten und remixen Sie nach Belieben: https://www.figma.com/file/KIEcpXvvYDBpZsrEKkZ9ziPj/iRyanBell.com?node-id=0%3A1

Download-Link: https://iryanbell.com/downloads/iRyanBell.com.fig

Es besteht ein interessantes Gleichgewicht zwischen besseren Tools und höheren Ambitionen. Sie erleben dies jedes Jahr mit veralteten Geräten und verrotteter Softwareleistung, da Feature-Updates für neuere kompatible Hardware-Iterationen die vorhandenen Funktionen des vorherigen Geräts beeinträchtigen. Vielleicht haben wir als Menschen für immer diese Reichweite von der Schulter der Riesen, die in die Zukunft hineinreichen, und für immer nähere Annäherungen an die Welt, die wir bewohnen möchten, in sich, aber auf Kosten des Rosts, der in unserem Kielwasser zurückbleibt.

Ursprünglich veröffentlicht unter https://iryanbell.com.