Die Kraft von Figma als Designtool

Figma ist ein Cloud-basiertes Designtool, das Sketch in Funktionalität und Features ähnelt, aber große Unterschiede aufweist, die Figma besser für die Teamzusammenarbeit machen. Für diejenigen, die solchen Behauptungen skeptisch gegenüberstehen, werden wir erklären, wie Figma den Designprozess vereinfacht und Designern und Teams effektiver als andere Programme dabei hilft, effizient zusammenzuarbeiten.

Lasst uns genauer hinschauen.

Figma funktioniert auf jeder Plattform

Figma funktioniert auf jedem Betriebssystem, auf dem ein Webbrowser ausgeführt wird. Macs, Windows-PCs, Linux-Rechner und sogar Chromebooks können mit Figma verwendet werden. Es ist das einzige Design-Tool seiner Art, das dies tut, und in Geschäften, die Hardware mit unterschiedlichen Betriebssystemen verwenden, kann jeder weiterhin Figma-Dateien teilen, öffnen und bearbeiten.

In vielen Organisationen verwenden Designer Macs und Entwickler Windows-PCs. Figma hilft, diese Gruppen zusammenzubringen. Die universelle Natur von Figma verhindert auch die Belästigung durch PNG-Pong (bei dem aktualisierte Bilder zwischen den Disziplinen des Designteams hin und her geschickt werden). In Figma ist kein vermittelnder Mechanismus erforderlich, um Designarbeit für alle verfügbar zu machen.

Die Zusammenarbeit in Figma ist einfach und vertraut

Da Figma browserbasiert ist, können Teams wie in Google Docs zusammenarbeiten. Personen, die eine Datei anzeigen und bearbeiten, werden oben in der App als kreisförmige Avatare angezeigt. Jede Person hat auch einen benannten Cursor, sodass es einfach ist, zu verfolgen, wer was tut. Durch Klicken auf den Avatar einer anderen Person wird auf das gezoomt, was sie gerade sieht.

Die Dateizusammenarbeit in Echtzeit trägt dazu bei, „Design Drifting“ zu mindern – definiert als Fehlinterpretation oder Abweichung von einem vereinbarten Design. Design-Drifting tritt normalerweise auf, wenn eine Idee konzipiert und schnell umgesetzt wird, während ein Projekt im Gange ist. Leider führt dies oft zu Abweichungen vom etablierten Design, was zu Reibung und Nacharbeit führt.

Mit Figma kann ein Designleiter einchecken, um zu sehen, was das Team in Echtzeit entwirft, indem er einfach eine freigegebene Datei öffnet. Wenn ein Designer das Briefing oder die User Story irgendwie falsch interpretiert, ermöglicht diese Funktion dem Designleiter, einzugreifen, den Kurs zu korrigieren und unzählige Stunden zu sparen, die sonst verschwendet worden wären. (Im Vergleich dazu haben Teams, die Sketch verwenden, keine unmittelbare Möglichkeit zu erkennen, ob Designer auf Abwege geraten.)

Nebenbemerkung: Einige Designer mögen es nicht, bei der Arbeit „ausspioniert“ zu werden, also ist es Sache des Designleiters, die Vorteile zu erklären. Im Allgemeinen erkennen die meisten Designer schnell den Wert einer solchen Funktion und passen sich leicht an die Arbeit in einer gemeinsam genutzten Umgebung an.

Figma verwendet Slack für die Teamkommunikation

Figma nutzt Slack als Kommunikationskanal. Wenn ein Figma-Kanal in Slack erstellt wird, werden alle Kommentare oder Designänderungen, die in Figma vorgenommen werden, an das Team „geslackt“. Diese Funktionalität ist beim Live-Design von entscheidender Bedeutung, da Änderungen an einer Figma-Datei jede andere Instanz aktualisieren, in der die Datei eingebettet ist (ein potenzielles Problem für Entwickler). Änderungen an einem Mockup, ob gerechtfertigt oder nicht, werden sofort überprüft und der Feedback-Kanal ist aktiv.

Figma Sharing ist unkompliziert und flexibel

Figma ermöglicht auch die berechtigungsbasierte gemeinsame Nutzung von Dateien, Seiten oder Frames (in anderen Designtools als Zeichenfläche bezeichnet). Wenn ein Freigabelink zu einem Frame auf einer Seite erstellt wird, öffnet die Person, die auf diesen Link klickt, eine Browserversion von Figma, und eine vergrößerte Ansicht des Frames wird geladen.

Diese Form der selektiven Freigabe, von der Datei bis zum Frame, ermöglicht es Designern, Produktbesitzern und Entwicklern, genau das zu teilen, was in Bug-Tracking-Tools und Community-Software wie Confluence oder SharePoint benötigt wird.

Eingebettete Figma-Dateien bieten Aktualisierungen in Echtzeit

Figma teilt auch Live-Einbettungscode-Snippets, um einen iFrame in Tools von Drittanbietern einzufügen. Wenn beispielsweise Confluence verwendet wird, um eingebettete Mockup-Dateien anzuzeigen, werden diese Dateien nicht durch Speichern einer Figma-Datei „aktualisiert“ – diese eingebetteten Dateien SIND die Figma-Datei.

Wenn jemand in Figma eine Änderung am Modell vornimmt, kann diese Änderung live im eingebetteten Confluence-Modell angezeigt werden. (Sie können hier mehr über die Figma- und Confluence-Integration lesen.)

Die Auswirkung dieser Funktion auf den UX-Prozess wird im folgenden Diagramm veranschaulicht:

Vor Figma wurden mehrere andere Tools verwendet, um den Austausch von Designmodellen und -aktualisierungen zu erleichtern. Der Iterationszyklus bestand aus einer Reihe von Dateiaktualisierungen hin und her, damit die Teams das aktuelle Design überprüfen und implementieren konnten.

Nach Figma sind Tools von Drittanbietern nicht mehr erforderlich (könnten aber auf Wunsch verwendet werden). Da Figma die Funktionalität der zuvor beschriebenen Tools von Drittanbietern übernimmt, gibt es nur einen Schritt im Prozess: Wechseln Sie von Skizzen zu Figma, und alle Gruppen verfügen über die neuesten Mockups. Es gibt keine „Übergabe“ im eigentlichen Sinne des Wortes.

Figma eignet sich hervorragend für Feedback zur Designprüfung

Figma unterstützt In-App-Kommentare sowohl im Design- als auch im Prototyping-Modus, und der Kommentar-Thread wird in Slack und/oder E-Mail verfolgt. Es ist nicht erforderlich, PNG-Dateien zu veröffentlichen oder ständige Aktualisierungen durchzuführen, um Feedback von einem Team zu erhalten, das ein Drittanbieter-Tool wie InVision oder Marvel verwendet.

Während Designüberprüfungen können Teamdesigner ihre Arbeit auf einem großen Bildschirm diskutieren, Kommentare aufzeichnen und Probleme beheben – alles in Figma. Diese Form des Live-Feedbacks ist mit Sketch nicht möglich, das das Hochladen auf einen Cloud-Dienst erfordert, um Team-Input zu erhalten.

Die Entwicklerübergabe wird mit Figma erleichtert

Figma zeigt Codeausschnitte auf jedem ausgewählten Rahmen oder Objekt in CSS-, iOS- oder Android-Formaten an, die Entwickler beim Überprüfen einer Designdatei verwenden können. Die Designkomponenten können von jedem Entwickler in jeder Datei, die er anzeigen kann, überprüft werden. Es ist nicht erforderlich, ein Drittanbieter-Tool zu verwenden, um die Informationen zu erhalten. Trotzdem verfügt Figma über eine vollständige Integration mit Zeplin, wenn Teams mehr als nur einfache Messungen und CSS-Anzeigen durchführen möchten.

Figma-Projektdateien befinden sich an einem Ort – online

Da Figma eine Online-App ist, übernimmt sie die Dateiorganisation, indem sie Projekte und ihre Dateien in einer dedizierten Ansicht anzeigt. Figma unterstützt auch mehrere Seiten pro Datei, wie Sketch, sodass Agile-Teams ihre Projekte logisch organisieren können:

• Erstellen Sie ein Projekt für das Funktionsthema .
• Erstellen Sie eine Datei für ein episches oder großes Feature.
• Erstellen Sie Seiten in dieser Datei für jede User Story .

Dies ist nur eine Methode zum Organisieren von Dateien, die je nach den Anforderungen des Prozesses mehr oder weniger granular gemacht werden kann.

Figma-APIs bieten die Integration von Tools von Drittanbietern

Figma verfügt jetzt über Entwickler-APIs, um eine echte Integration mit jeder browserbasierten App zu ermöglichen. Unternehmen nutzen dies, um Echtzeit-Anzeigen von Designdateien in ihre Apps zu integrieren. Beispielsweise hat Uber in seinem Unternehmen große Bildschirme, auf denen Designdateien „live on air“ angezeigt werden. Designs werden geteilt und Feedback von allen im Unternehmen ist willkommen.

Die JIRA-Software von Atlassian hat ein Figma-Add-on implementiert, sodass Produktbesitzer, Entwickler und Qualitätsingenieure immer die neueste Version jedes Modells von den Designern sehen.

Darüber hinaus verspricht die API von Figma, Kundenanfragen nach Plugins von Drittanbietern und Funktionserweiterungen zu erfüllen, die Sketch bereits bietet.

Die Dateiversionierung erfolgt automatisch oder nach Bedarf

Jegliche Ungewissheit in Bezug auf die Aktualisierung von Live-Dateien wird durch das integrierte Versionierungssystem von Figma weiter gemildert. Ein Designer kann jederzeit eine benannte Version und Beschreibung einer Figma-Datei erstellen; dies kann sofort erfolgen, nachdem vereinbarte Änderungen an einem Design vorgenommen wurden.

Die Live-Datei in der gemeinsam genutzten Umgebung wird nicht beeinflusst, bis Änderungen bewusst in die Originalversion übernommen werden. Es ist auch möglich, automatisch gespeicherte Versionen wiederherzustellen, um ein Duplikat zu erstellen oder das Original zu überschreiben.

Das Prototyping in Figma ist unkompliziert und intuitiv

Während Sketch kürzlich die Zeichenfläche zum Zeichenflächen-Prototyping hinzugefügt hat, ist Figma noch einen Schritt weiter gegangen, indem es Übergänge zwischen Frames bereitstellt. Die einfache Prototyping-Funktion von Figma eliminiert die Notwendigkeit für ein weiteres Tool, das Prototyping im Diashow-Stil durchführt, wie InVision oder Marvel. Wenn alles, was benötigt wird, eine einfache Präsentation mit Übergängen ist, müssen Sie sie nicht in Review-Tools exportieren.

Figma-Prototypen können genau wie Figma-Designdateien verteilt werden; Jeder mit Link-Berechtigung kann einen Prototyp anzeigen und kommentieren, und auch dieses Feedback wird im Kommentarbereich des Tools erfasst und in Slack aufgezeichnet. Entwickler können den Design-Workflow sehen, direkte @Nachrichten für Designer hinterlassen und Messungen und CSS-Attribute aus dem Prototyp abrufen.

Die Teambibliotheken von Figma sind ideal für Designsysteme

Designsysteme sind für viele Unternehmen zu einer Notwendigkeit geworden, und es besteht ein Bedarf an Komponenten (Symbole in Sketch und Illustrator), die wiederverwendbar, skalierbar und „tokenisiert“ sind, um sie in den Musterbibliotheken zu verwenden, die UX-Designern und Frontend-Entwicklern zur Verfügung stehen.

Der oft verwendete Ausdruck „Single Source of Truth“ passt hierher – sobald eine Figma-Teambibliothek erstellt ist, kann jeder mit Zugriff auf ein Projekt Instanzen der Komponenten in seinen Entwürfen verwenden und sicher sein, dass er mit den neuesten Versionen arbeitet.

Figmas Ansatz für Komponentenbibliotheken ist einfach und leicht zu verwalten. Designer können Dateien voller Komponenten erstellen oder Komponenten auf der Seite verwenden, um eine Musterbibliothek zu organisieren. Jeder Rahmen auf einer Figma-Seite wird zum organisatorischen Abschnitt in der Teambibliothek (es besteht keine Notwendigkeit, Hierarchien\wie\diese zu erstellen).

Eine Möglichkeit, Bibliotheken zu organisieren, besteht darin, ein Projekt zu haben, das ausschließlich Komponenten gewidmet ist. Dateien in diesem Projekt können nach Bedarf organisiert werden, und die Seiten in diesen Dateien können entsprechend angeordnet werden.

Figma wurde entwickelt, um die Design-Teamarbeit zu verbessern

Die Verwendung von Figma über einen längeren Zeitraum wird die Vorteile dieses Live-Collaboration-Tools demonstrieren. Es hält die Teams bei der Arbeit und fördert die vollständige Offenlegung, die beim Aufbau eines Designsystems für eine Vielzahl von Disziplinen unerlässlich ist. Figma ist für jeden auf jeder Plattform einfach zu verwenden und ermöglicht es Teams, ihre Arbeit und Bibliotheken schnell zu teilen.

Designexperten, die Figma verwenden, nachdem sie von Sketch gewechselt haben (Sketch-Dateien können mit Parität in Figma importiert werden), werden nicht enttäuscht:

… es verändert die Art und Weise, wie Sie mit Ihren Kollegen und Kunden zusammenarbeiten können, vollständig – Optimieren Sie kollaboratives Design mit Figma

Figma hat in den letzten Jahren das Beste aus der Welt der UI-Design-Tools vereint – Warum Ihr Designteam einen Wechsel zu Figma in Erwägung ziehen sollte

Seit einem Jahr verwende ich Figma für meinen UI/UX-Designprozess und es hat mir Stunden an Arbeit gespart. Es hat meinen Design-Workflow wirklich verändert – So rationalisieren Sie Ihren UI/UX-Workflow mit Figma

Meine Zeit, die ich bei Figma verbringe, ist normalerweise der angenehmste und produktivste Teil meines Tages – Figma verändert meinen gesamten Arbeitsablauf, und es ist großartig!

• • •

Weiterlesen:

• Meistern Sie Ihr Handwerk mit diesen Top-UX-Tools
• Optimieren Sie kollaboratives Design mit Figma
• Verwenden Sie Craft by InVision, um die Zusammenarbeit im Team zu optimieren
• Tod dem Wireframe. Direkt zu High-Fidelity!
• Werden Sie ein Weltklasse-Designer, indem Sie den Globus zu Ihrem Büro machen