Mini-Tutorial – Nutzung der Funktionen von Figma für den gesamten Designprozess

Die Welt der aufstrebenden Design-Tools ist unglaublich spannend. Vielversprechende neue Programme werden in rascher Folge auf den Markt gebracht, aber eines davon hat sich langsam zur besten Wahl für größere und meist verteilte Designteams entwickelt.

Figma hat das Potenzial, den gesamten Designprozess End-to-End zu unterstützen. Erste Skizzen, das Sammeln von Feedback, Zusammenarbeit, testfertige Prototypen und die Übergabe an Entwickler sind innerhalb seiner Möglichkeiten. Figma vereinfacht auch die Arbeit von Produktmanagern und Designleitern sowie allen anderen Beteiligten.

Was unterscheidet Figma also von der Konkurrenz? Es gibt mehrere Schlüsselaspekte, aber alle lassen sich darauf zurückführen, dass Figma webbasiert ist. Dies hat bei der ersten Veröffentlichung des Tools viele Augenbrauen hochgezogen, aber letztendlich ebnete es den Weg für die Flexibilität und einzigartigen Funktionalitäten von Figma.

Was ist grundlegend für einen reibungslosen Produktentwicklungsprozess?

Es stimmt zwar, dass jedes Team und Projekt einen anderen Arbeitsablauf haben kann, aber es gibt Funktionen und Phasen, die wesentliche Bestandteile des Produktdesigns und -managements sind. Figma deckt jeden ab.

1. Erreichbarkeit und Zusammenarbeit . Unabhängig davon, welche Tools ein Team verwendet, muss es eine Möglichkeit geben, zusammenzuarbeiten, Projekte zu präsentieren, Feedback zu sammeln und die Beteiligten auf dem Laufenden zu halten. Alle diese Funktionen sind in Figma verfügbar.
2. Flexibilität zur Iteration und Erstellung von Liefergegenständen . Figma ist flexibel und kann als kollaboratives Whiteboard verwendet werden, um erste Ideen zu skizzieren und alles von Wireframes bis hin zu High-Fidelity-Mockups zu iterieren.
3. Fähigkeit, Prototypen zu bauen und zu testen . Entwerfen Sie eine mobile App? Erstellen und veröffentlichen Sie interaktive Prototypen und testen Sie sie direkt auf Smartphones – alles von Figma.
4. Aufbau einer Single Source of Truth . Figma ist eine hervorragende Möglichkeit, Produktdesignsysteme zu definieren, die vollständig online laufen. Es ist standardmäßig eine einzige Quelle der Wahrheit. Keine Frage mehr: „Ist das die neueste Version?“
5. Reibungslose Übergabe . Teilen Sie einfach einen Link mit den Entwicklern, und sie haben Zugriff auf alle Informationen, die zur Implementierung des Designs erforderlich sind – Redlines, Maße und grafische Elemente, die zum Export bereit sind.
6. Anpassungsfähige und verbesserungsfähige Vielseitigkeit . Die Plugin-API von Figma ermöglicht es Teams, ihre eigenen Plugins zu schreiben oder die breitere Benutzergemeinschaft zu nutzen und das Tool mit neuen Funktionalitäten zu erweitern.

1. Zugänglichkeit und Zusammenarbeit

Holen Sie das Team an Bord

Werfen wir einen genaueren Blick darauf, wie Figma zu den sechs oben genannten Schlüsselbereichen beiträgt. Neue Benutzer möchten vielleicht ein kostenloses Figma-Konto erstellen, ein Team gründen und zuschauen, wie Sie mit Figma loslegen. Sobald ein Team erstellt ist, laden Sie Teammitglieder und relevante Stakeholder ein, sich anzuschließen.

Es stehen drei Zugriffsebenen zur Verfügung. Es ist ziemlich selbsterklärend, aber normalerweise erhält das Designteam Bearbeitungsrechte und allen anderen Ansichtsrechte. Dazu gehören Entwickler und andere Beteiligte, die in der Lage sein müssen, den Designprozess zu verfolgen und Feedback zu geben.

Ähnliche Freigabeoptionen sind auf Teamebene (siehe oben), Projektebene und Dateiebene verfügbar. Wenn keine Zugriffsebenen angegeben sind, werden sie von Team zu Projekt und von Projekt zu Dateien weitergegeben.

Da Figma im Browser verfügbar ist, spielt es keine Rolle, wie jemand eingeladen wird oder auf welchem ​​System er sich befindet. Solange das Gerät und der Browser, die sie verwenden, die Mindestanforderungen erfüllen, können sie direkt mit einem Link einsteigen, und die Benutzeroberfläche ändert sich, je nachdem, ob sie Bearbeitungs- oder Anzeigerechte haben.

Einbetten einer Projektdatei

Figma-Projektdateien können in Software von Drittanbietern eingebettet werden. Beispielsweise kann ein freigegebenes Dropbox Paper-Dokument verwendet werden, um den aktuellen Stand eines Projekts darzustellen.

Um Projektdateien einzubetten, stellen Sie die Dateisichtbarkeit auf Jeder mit dem Link – kann anzeigen ein, kopieren Sie den Einbettungscode und betten Sie die Projektdatei in jede Drittanbietersoftware ein, die embed.ly unterstützt.

Feedback und Überarbeitungen

Eine weitere Schlüsselfunktion für den Produktdesignprozess ist die Möglichkeit, Designs zu verteilen, Feedback zu sammeln und Überarbeitungen zu verwalten. Jeder mit einem Figma-Link kann die neueste Version sehen und direkt den Punkt kommentieren, zu dem er Feedback geben möchte.

Um Teammitglieder zu markieren, verwenden Sie das @-Zeichen, und das System zeigt eine Liste mit Namen zur Auswahl an. Dadurch werden die Teammitglieder benachrichtigt, und sobald das Feedback verarbeitet wurde, können Diskussionen geschlossen werden, indem Sie auf Lösen klicken.

Um Teams aufeinander abzustimmen, gibt es eine nette Integration, die Diskussionen aus Figma-Dateien in einem bestimmten Slack-Kanal veröffentlichen kann.

Echte Zusammenarbeit in Echtzeit

Eine der faszinierenderen Funktionen von Figma ist das, was sie Multiplayer nennen. Es ermöglicht mehreren Teammitgliedern, gleichzeitig eine Designdatei zu öffnen und daran zu arbeiten. Alle, die an der Datei arbeiten, sind oben rechts auf der Seite sichtbar, und ihre Avatare sind benannt und anklickbar.

Es kann einige Zeit dauern, um zu verstehen, was dies in praktischer Hinsicht bedeutet. Es ist zwar unwahrscheinlich, dass Designer Multiplayer verwenden, um gleichzeitig an demselben Teil einer Datei zu arbeiten, aber es ist unglaublich beruhigend, sich keine Gedanken über Dateiversionskonflikte machen zu müssen, insbesondere für größere verteilte Teams.

Multiplayer ist praktisch, wenn Sie aus der Ferne präsentieren, da es jedem, der mit der Datei verbunden ist, ermöglicht, dem Ansichtsfenster des Präsentators zu folgen. Es ermöglicht Teams auch, zusätzliche Programme zu umgehen und Figma als Online-Whiteboard zu verwenden (obwohl bestimmte Lösungen wie Miro letztendlich für den Job besser geeignet sein können).

Zu diesem Zweck ist es ratsam, benutzerdefinierte Komponenten zu erstellen, um bestimmte Assets als virtuelle Haftnotizen oder Diagrammelemente zu replizieren.

2. Die Flexibilität, Ergebnisse zu wiederholen und zu produzieren

Sobald Teammitglieder eingeladen wurden und erste Skizzen im Gange sind, kann Figma zur Iteration verwendet werden. Der Hauptgrund für die Entwicklung von Figma ist das Design der Benutzeroberfläche – wenn das Whiteboard fertig ist, können Teams zu Flow Maps und Wireframes übergehen. Auch hier ist es sinnvoll, Komponentenbibliotheken zu erstellen, die für diese Aufgaben wiederverwendet werden können. Die offizielle Vorlagensammlung bietet Inspiration und Designarrangements für den Anfang.

3. Die Fähigkeit, Prototypen zu bauen und zu testen

Mit Figma ist es ganz einfach, interaktive Prototypen zu erstellen. Wenn eine Figma-Datei mit Bearbeitungsrechten geöffnet ist, kann zwischen Design- und Prototyping-Modus gewechselt werden. Im Prototypenmodus ist es möglich, auf ein Element zu klicken, um es interaktiv zu machen, sei es auf der Bühne oder in der Seitenleiste der Ebenen.

Wenn ein Element im Prototyp-Modus ausgewählt ist, erscheint ein kleiner Kreis an der Seite. Beim Ziehen erscheinen blaue Linien und es kann auf dem Bildschirm oder Zustand abgelegt werden, um das Ergebnis der Interaktion anzuzeigen.

Gemeinsame Übergänge sind in Figma verfügbar, wodurch es viel einfacher wird, High-Fidelity-Prototypen zu erstellen. Tatsächlich hat das Figma-Team kürzlich eine intelligente Animations- und Drag-Trigger-Funktion veröffentlicht. Der Smart-Animate-Aspekt interpoliert die Bewegung ähnlicher Elemente, während Drag-Trigger eine neue Art der Interaktion ist. Beides verbessert die Qualität interaktiver Prototypen drastisch.

Benutzertests

Auch hier ist ein Link alles, was benötigt wird, um Figma-Prototypen zu verteilen, sogar für Benutzertests. Durch Klicken auf das kleine Play-Symbol oben rechts wird der Prototyp gestartet und eine neue URL generiert. Es ist möglich, die URL zu kopieren oder die blaue Schaltfläche „ Prototyp teilen “ zu verwenden. Sobald Benutzer den Link öffnen, wird ihnen ein interaktiver Prototyp präsentiert und sie können bei Bedarf Kommentare hinterlassen.

Testen auf dem Handy

Designs für mobile Geräte werden mit einem Mockup eines tatsächlichen Geräts präsentiert, das den Prototyp umgibt. Wenn zum Testen der Interaktion mehr Realismus benötigt wird, ist es am besten, die Figma Mirror-App für gerätespezifische Tests herunterzuladen.

4. Aufbau einer Single Source of Truth

Versionsgeschichte

Wäre es nicht toll, wenn Projektdateien immer aktuell wären und ständig gesichert würden? Diese Funktionalität ist standardmäßig in Figma enthalten. Jede Datei wird während der Bearbeitung automatisch gespeichert und Figma erstellt nach 30 Minuten Inaktivität einen neuen Eintrag in der Versionshistorie. Es wird ein Protokoll aller automatisch gespeicherten Versionen erstellt und jede Version kann bei Bedarf wiederhergestellt werden.

Natürlich ist die automatische Versionierung nicht die einzige Möglichkeit, Arbeit zu sparen. Es ist möglich, eine Version manuell zu speichern oder eine bestimmte Version in der Versionshistorie zu bearbeiten.

Designsysteme und Komponentenbibliotheken

Ein weiterer Aspekt, bei dem Figma glänzt, ist, wie Designer Komponentenbibliotheken erstellen, organisieren und verteilen können. Jede Datei kann als Bibliothek veröffentlicht werden, und jede Farbe, jeder Textstil, Effekt, jedes Raster oder jede Komponente kann in anderen Figma-Dateien verwendet werden.

Wenn Änderungen an einem Element in einer Bibliothek vorgenommen werden, können Änderungen veröffentlicht und an Dateien weitergegeben werden, die diese Elemente verwenden. Designer, die an diesen Dateien arbeiten, können dann entscheiden, ob sie Bearbeitungen akzeptieren oder nicht.

Die Möglichkeit zu entscheiden, wie Bibliotheken verteilt werden sollen, kombiniert mit der Option, die Sichtbarkeit oder Unsichtbarkeit von Bibliothekselementen umzuschalten, macht das gesamte Erlebnis reibungslos und leistungsstark.

Komponenten und Bibliotheken können verschachtelt werden, um anspruchsvolle Designsysteme zu erstellen, in denen alles versioniert und für alle Beteiligten auf dem neuesten Stand ist. Und alle Komponenten können mit Kommentaren versehen werden.

5. Reibungslose Übergabe

Entwicklerübergabe

Mit Figma benötigen Designer und Entwickler kein separates Tool wie Zeplin, um die Übergabe zu verwalten. Sie können Dateien einfach öffnen und in der rechten Seitenleiste in den Code -Modus wechseln, sogar mit Nur-Lese-Zugriff.

Wenn der Code- Modus aktiv ist, werden durch Auswählen eines Elements auf der Bühne alle relevanten Informationen angezeigt, die für die Implementierung benötigt werden, und alle anderen Informationen zur Komponentenposition in Bezug auf andere Elemente sind sichtbar. Wie bei ähnlichen Lösungen soll der generierte Code nicht vollständig kopiert werden, aber es ist hilfreich, einen so einfachen Zugriff zu haben.

6. Die Vielseitigkeit, die angepasst und verbessert werden kann

Figma-APIs und benutzerdefinierte Plugins

Das API- und Plugin-System von Figma macht es einer Vielzahl von Designteams und Disziplinen leicht, das Programm an ihre spezifischen Prozessanforderungen anzupassen. Die Flexibilität von Figma gibt Benutzern die Möglichkeit, programmgesteuert mit der Plattform zu interagieren. Ein paar Beispiele:

Verwendung echter Daten

Es ist immens wertvoll, echte Daten in Mockups und Prototypen verwenden zu können, und Figma macht es möglich, indem Inhalte aus externen Quellen importiert werden können. Durch die Nutzung echter Inhalte ist es möglich, Designkomponenten einem Stresstest zu unterziehen, Mockups auf dem neuesten Stand zu halten und Teams einzubeziehen, die nicht mit dem Design zu tun haben.

Ein Plugin namens Google Sheets Sync ist ein perfektes Beispiel dafür, was getan werden kann. Dieses Plugin macht es einfach, Google Sheets als Quelle zu integrieren, um den Inhalt von Komponenten in Figma-Dateien zu füllen und zu synchronisieren.

Erweiterte Arbeitsabläufe

Die Fähigkeit, ein Designsystem in einem UI-Designprogramm unterzubringen, ist nur dann wertvoll, wenn das System konsequent in kundenorientierten Bildschirmen implementiert wird. Zum Glück gibt es Figma-APIs, Plugins und Integrationen, die helfen können.

Das Storybook-Addon synchronisiert Figma-Dateien und zeigt Figma-Design-Komponenten in einem Panel neben implementierten Komponenten. Ein weiterer interessanter Anwendungsfall ist der Figma to React Converter, eine Workflow-Erweiterung, die Figma-Komponenten in Code umwandelt.

Die Funktionen von Figma sind ideal für den gesamten Designprozess

Es gibt kein einziges Designprogramm, das die Bedürfnisse jedes Designers oder Designproblems bewältigen kann, und das ist gut so. Der Wettbewerb zwischen Designwerkzeugen ist für Designer von Vorteil. Es stellt sicher, dass die Unternehmen, die unsere Tools herstellen, auf unsere Bedürfnisse hören und uns mit aktuellen Funktionen versorgen, die für unsere Aufgaben geeignet sind.

Abgesehen davon ist Figma ein fortschrittliches und dennoch intuitives Tool, das sich als mehr als fähig erwiesen hat, den gesamten digitalen Designprozess zu bewältigen. Einzelne Designer und Teams können gleichermaßen von seinen einzigartigen Kollaborations- und Iterationsfunktionen profitieren, und wo das Programm zu kurz kommt, füllt eine riesige Auswahl an Plugins die Lücke.

• • •

Weiterführende Literatur im Toptal Design Blog:

• Die Kraft von Figma als Designtool
• Figma vs. Sketch vs. Axure – Eine aufgabenbasierte Überprüfung
• Mini-Tutorial – Arbeiten mit Figma-Button-Komponenten
• Meistern Sie Ihr Handwerk mit diesen Top-UX-Tools
• Design mit Präzision – Ein Adobe XD Review