Figma - unser Design-Tool

In diesem Artikel erklären wir, warum wir uns für Figma als unser zentrales Design-Tool entschieden haben, wie wir es verwenden und wie es unsere Produktivität steigert. Wir stellen die Stärken von Figma vor, erläutern, wie wir Figma in unseren Workflow integrieren und unsere Zusammenarbeit gestalten, um herausragende Design-Entwürfe, Benutzeroberflächen, Grafiken und andere Assets für unsere Projekte zu erstellen.

Was ist Figma?

Figma ist eine Software für die gemeinsame Arbeit an Projekten mit Schwerpunkt auf der Gestaltung von Benutzeroberflächen. Der Fokus liegt auf der Zusammenarbeit in Echtzeit. Die Software ist cloud-basiert, was es den Nutzern ermöglicht, gemeinsam an Projekten zu arbeiten, unabhängig von ihrem Standort.

Figma hebt sich von anderen Programmen zur Grafikbearbeitung ab, weil es einerseits eine vollständig cloud-basierte Software ist, also die Kollaboration in Echtzeit ermöglicht, andererseits aber die Funktionalität einer nativen App bietet.

Warum nutzen wir Figma?

Zusammenarbeit in Echtzeit

In Figma können Sie gleichzeitig von verschiedenen Standorten an einem Projekt arbeiten. Änderungen, Kommentare oder Diskussionen werden in Echtzeit übermittelt und erlauben es einem Team, Änderungen sofort zu erfassen, zu kommentieren oder nächste Arbeitsschritte untereinander aufzuteilen.

Sie können den Mauszeiger Ihrer Kollegen sehen, auf Ihren Mauszeiger aufmerksam machen oder dem eines anderen folgen. Dadurch ist es kinderleicht, zu überprüfen und zu verstehen, was die anderen gerade tun und woran sie arbeiten.

Figma verfügt über ein Freigabesystem. Dieses ist besonders nützlich bei Übergabeprozessen, wenn bestimmte Rahmen, Seiten oder Elemente anstelle der gesamten Dateien mit Kunden oder Managern geteilt werden sollen.

Übersichtliche Threads

In Figma können Sie auf anschauliche Weise Kommentare oder Dialog-Threads erstellen und diese genau dort platzieren, wo sie in der Design-Datei sinnvoll sind. So lenken Sie die Aufmerksamkeit genau an die richtige Stelle.

Jeder kann in diesen Threads Stellung nehmen, andere Nutzer direkt ansprechen oder die Threads auflösen, wenn Diskussionspunkte gelöst sind.

Rollen und Berechtigungen

Mit seiner Struktur, die auf Berechtigungen basiert, bietet das System verschiedene Zugriffsebenen auf gemeinsame Entwürfe.

• Als Designer, mit Editoren-Berechtigung,  können Sie die Entwürfe bearbeiten und am Entwurfsprozess teilnehmen.
• Entwickler hingegen haben Ansichts-Berechtigungen, die ihnen Zugang zu technischen Erkenntnissen verschaffen, die bei der Implementierung der eigentlichen Lösung hilfreich sein können.
• Produktverantwortliche oder Manager verfügen über Ansichts-Berechtigungen, die es ihnen ermöglichen, alle Fortschritte, Kommentare und Diskussionen anderer einzusehen.

Darüber hinaus ist der neu eingeführte "Entwicklermodus" erwähnenswert, der sich noch im Beta-Modus befindet. Entwickler können diesen Modus nutzen, um Entwürfe mit einer auf Inspektion ausgerichteten Benutzeroberfläche zu prüfen und umzusetzen. Des Weiteren enthält er einen Abschnitt namens "ready for development", der anzeigt, welche Elemente bereitstehen, um implementiert zu werden.

Versionshistorie

Die Versionshistorie von Figma speichert, während Sie eine Datei nutzen, automatisch alle Versionen Ihrer Entwurfsdateien und ermöglicht es Ihnen, sich die früheren Versionen anzeigen zu lassen und auch wiederherzustellen (je nach vertraglichem Plan).

Es ist ganz einfach, auf frühere Versionen zuzugreifen, indem Sie auf die Schaltfläche "Version History" in der Symbolleiste klicken. Auf diese Weise können Sie die Versionen direkt miteinander vergleichen und schnell erfassen, was sich geändert hat.

Außerdem können Sie Notizen zu bestimmten Versionen Ihrer Entwürfe hinterlassen, was die Zusammenarbeit im Team erleichtert. Dies ist sehr hilfreich, um eine endgültige Version "ready for development" oder eine vorläufige Version "zur ersten Überprüfung" mit einem Teil des Teams zu teilen und dann die Arbeit fortzusetzen.

Features des Designsystems

Wir sind der Ansicht, dass Designsysteme wichtig sind, um robuste und konsistente Benutzeroberflächen in unseren Projekten zu erreichen. Figma ermöglicht es dem Designteam, die Grundlage für diese Designsysteme mit verschiedenen Funktionen zu schaffen.

In Figma wird ein Set von Design-Token und Komponenten als "Library" bezeichnet. Jede Library besteht hauptsächlich aus zwei Arten von Elementen.

Sie können in Figma verschiedene Designelemente gruppieren und dann jede dieser Gruppen als Komponente (Asset) für Ihr Projekt definieren.

Das Erstellen von Komponenten ist ganz einfach. Sie zeichnen eine Box und fügen dieser dann Eigenschaften und Verknüpfungen hinzu. Auf diese Weise erstellen Sie ein wiederverwendbares Objekt in Ihrer Design-Library.

Die Nutzung von erstellten Komponenten funktioniert per Drag & Drop. Sie ziehen dazu einfach die gewünschte Komponente aus ihren Assets an die gewünschte Stelle.

Darüber hinaus können Sie in Figma Stileigenschaften für Farben, Typografien, Rasterabstände u.ä. definieren und diese dann in jedem Element für Hintergründe, Rahmen oder Schriftarten wiederverwenden.

Um eine definierte Funktion (Property) zu verwenden, klicken Sie einfach das Element an, das Sie gestalten möchten, und wählen anschließend in der seitlichen Design-Leiste die spezifische Eigenschaft aus, die Sie brauchen:

Die neue "Variablen"-Funktion, die vor kurzem als Beta-Version veröffentlicht wurde und die wir bereits in unseren Workflows einsetzen, ermöglicht es Ihnen, Farb-, Zahlen-, String- und Boolesche Variablen (bolean variables) zu definieren. Diese können als Design-Token verwendet werden, was die Handhabung, Aktualisierung und Wartung der Designsystem-Implementierungen erheblich erleichtert.

Cloud Native App, plattformübergreifende Lösung

Figma ist eine cloud-native App, die dank der Verwendung von Webtechnologien und WASM (Web Assembly) in ihrer Rendering-Engine komplexe Designs vollständig im Browser ausführt und rendert.

Dies führt zu einer leistungsstarken, plattformübergreifenden Lösung, die performant und robust ist und von jedem Gerät mit Internetverbindung und einem Browser genutzt werden kann.

Dadurch wird es auch einfacher, native Anwendungen für verschiedene Betriebssysteme bereitzustellen, ihre Wiederverwendbarkeit zu fördern und die endgültige Lösung zwischen verschiedenen Anwendungen und dem Browser zu vereinheitlichen.

Auf die Community kommt es an

Die Figma-Community ist groß und aktiv. Tausende von Designern und Entwicklern tauschen sich über Ressourcen, Tipps und Anleitungen für die Verwendung des Tools aus. Sie können mit anderen Designern in Kontakt treten, Arbeiten miteinander teilen, Feedback zu Ihren Entwürfen einholen oder prüfen, wie andere Figma verwenden, um einheitliche Ergebnisse zu erzielen. 

Die häufigsten Wünsche aus der Community nach neuen Funktionen werden von Figma unterstützt und umgesetzt. Sie können also Funktionen beantragen, die zukünftig vielleicht in Ihr Designtool integriert werden.

Außerdem fördert die Community die Popularität, Erweiterbarkeit und Verbesserung des Tools. Es gibt eine große Bibliothek von Plug-ins, die den Workflow optimieren und neue Funktionen hinzufügen, um das Tool noch leistungsfähiger zu machen.

Wie Figma bei uns zum Einsatz kommt

Wir vertrauen auf Figma für all unsere komplexen UI/UX-Designs und interaktiven Prototypen. Zudem setzen wir es für zahlreiche andere Aufgaben ein, z. B. für Sprint-Retrospektiven, Konzept-Wireframes, interne und externe Präsentationen, die Produktion digitaler und grafischer Assets, Fluss- und Softwarearchitekturdiagramme, für interne Brainstormings und vieles mehr.

Bei 1xINTERNET ist Figma das wichtigste Design-Tool. Es ist leistungsfähig, bietet eine klare Struktur, eine gute Organisation und Richtlinien, um das Beste herauszuholen.

Organisation von Dateien

Wir lieben es, strukturiert zu arbeiten, deshalb haben wir klare Strukturen und Richtlinien für unsere Designdateien und für das Ablegen in unserer Bibliothek (Library).

Eine klare Namensgebung sowie die Trennung von Kundenprojekten durch eine ID-Nummer und das Hinzufügen des Dateizwecks (“UI-Library” oder "Main Design File") sind uns wichtig. So behalten wir stets den Überblick.

Jede Datei enthält ein Miniaturbild mit grundlegenden Informationen wie Projektleiter, Jahreszahl, Titel, Kurzbeschreibung und Status.

Eine klare Struktur ist von großer Bedeutung. Unsere Design-Librarys basieren auf einem atomaren Design-Ansatz, der Komponenten in "Atome, Moleküle und Organismen" unterteilt und diese dann in Sektionen oder Templates (entsprechend Drupal-Sektionen) bereitstellt, sodass sie auf verschiedenen Seiten oder in einzelnen Bereichen wiederverwendet werden können.

Die wichtigsten Designentwürfe folgen einem "Client First"-Ansatz und konzentrieren sich auf die Validierung und den Status der Designs.

Wie oben beschrieben, teilen wir die Dateien auf, um das System übersichtlich zu gestalten und die Komponenten-Bibliothek von den client-fähigen Designs zu trennen. 

Foundations und Komponenten-Bibliotheken werden separat behandelt, um dem Entwickler einen besseren Überblick über die wiederverwendbaren UI-Elemente zu geben.

Auf der Grundlage dieser Library können wir mehrere Webseiten, Apps oder Produkte für ein und denselben Kunden entwerfen und dabei ein einheitliches Erscheinungsbild wahren.

Der Ablauf beginnt normalerweise mit der Erstellung der Entwürfe für die Webseite oder die App, während wir parallel dazu die Komponenten-Library anlegen und aktualisieren. Dieser Ansatz bedeutet, dass wir schon früh ein erstes Produkt haben, das wir dem Kunden zeigen können. Gleichzeitig können die Entwickler bereits damit beginnen, die Details der Implementierung zu konzipieren und zu überlegen, wie die Komponenten aussehen werden.

Bewährte Methodik und klare Struktur

Für den sinnvollen Umgang mit all den großartigen Funktionen, die Figma bietet, folgen wir einer Reihe von Best Practices.

Eine der wichtigsten ist die Versionskontrolle. Wir empfehlen die Verwendung aussagekräftiger Namen und Datumsangaben, sobald neue Änderungen hinzugefügt oder ein neuer Design-Zweig begonnen wird. Auf diese Weise kann jeder schnell erkennen, an welcher Version des Entwurfs er arbeitet und welche Änderungen seit der letzten Version vorgenommen wurden. Die Zusammenarbeit wird vereinfacht und es ist jederzeit möglich, den Status weiterzugeben, um klar zu kommunizieren woran im nächsten Schritt gearbeitet werden soll.

Die klare Struktur und das leicht verständliche System bilden den Kern der Zusammenarbeit. Dabei konzentrieren wir uns auf die Einhaltung der empfohlenen Struktur der Dateien und Konventionen, um sicherzustellen, dass unsere Strukturen zuverlässigen Übergabeabläufen und etablierten Designprinzipien folgen.

Wir stützen unsere Arbeit auf erprobte Designsysteme. Der Fokus liegt darauf, dass alle Designelemente atomar, entkoppelt und wiederverwendbar sind, so wie es später unsere auf Web-Komponenten und Tailwind CSS basierende Implementierung ist. Um den Designern wiederverwendbare Elemente und Eigenschaften zur Verfügung zu stellen und das Entwicklungsverständnis für komplexe oder zusammengesetzte Designs zu verbessern, verwenden wir die Komponenten- und Bibliotheksfunktionen von Figma.

Zuletzt kommen unsere eigenen Hilfsmittel zum Einsatz, wie Überschriften der Frames, definierte Prozesse und Statuslabels mit aussagekräftigen Farben, die die Freigabe der Seiten veranschaulichen.

Der Austausch mit Projektleitern und Kunden

Der Austausch zwischen Designern und anderen Mitarbeitern ist ein wichtiger Punkt, der berücksichtigt werden muss. Wir legen Wert auf effiziente Übergabeprozesse, um einen reibungslosen Austausch zwischen Entwurfs- und Realisierungsphase zu gewährleisten.

Der Projektleiter oder der Kunde erhält immer ein fertiges Layout. Dank der Freigabeeinstellungen können wir genau das freigeben, was der Kunde sehen sollte, und über die Prototypansicht kann der Kunde in dem Entwurf interagieren.

Wir gliedern unseren Prozess in drei Schritte: Wireframing, Design und Handover, und fügen dann noch eine Ebene des Status hinzu:

Kontrolle für die Entwickler

Um den Entwicklern die Arbeit zu erleichtern, wenn sie die Entwürfe prüfen und ihre Komponenten aktualisieren wollen, folgen wir einem bewährten Verfahren.

Figma bietet intuitive Möglichkeiten zur Prüfung der aufgeführten Design-Token und -Elemente und weist stets darauf hin, wenn etwas wiederverwendet wird. Daher weiß der Entwickler während der Implementierung, was bereits existiert und kann repetitive Arbeiten oder unnötiges Neucodieren vermeiden.

Sollte ein Entwickler eine Rückfrage haben, kann er, wie bereits beschrieben, in Figma einen Thread eröffnen und mit dem Designer durch namentliche Ansprache direkt in Dialog treten. Dadurch kann er eine rasche Reaktion erwarten, während er seine Arbeit an anderer Stelle fortsetzt.

Bei 1xINTERNET gibt es eine starke Zusammenarbeit zwischen Entwicklern und Designern.

Neuerdings nutzen wir eine neue Funktion für Entwickler, den “Developer Mode”. Dieser Modus bringt eine bessere Übersichtlichkeit mit sich und vereinfacht die Kontrolle und damit den Entwicklungsprozess. In Kombination mit den anderen Funktionalitäten und unserem Tailwind Technologie Stack, erleichtert dieser die Aufgabe der Entwickler, indem Design-Token bereitgestellt werden, die während der Implementierung direkt referenziert und angewendet werden können.

Vorlagen und Iterationen

Iterationen und Verbesserungen führen zu besseren Produkten. Deshalb pflegen und verbessern wir unsere eigene Designvorlage fortlaufend mit dem Wissen aus unseren laufenden Projekten.

Alle Designvorlagen werden bei uns systematisch mit unserem Designsystem Quartz synchronisiert. Quartz ist eine Vorlage, die alle Komponenten und Grundlagen enthält, die eine einfache Webseite benötigt.

Dank der Funktionen wie Stile und Variablen sind wir in der Lage, unsere Figma-Vorlage und unser Designsystem zu synchronisieren.

Dieses Designsystem wird ebenfalls für unsere digitale Lösung DXP verwendet. Diese bietet die bestmögliche Drupal-Erfahrung mit einem vollständig integrierten Set von Webkomponenten. Und sie alle sind mit unserer Designvorlage synchronisiert.

Zusammenfassend lässt sich sagen, dass diese produktbasierte Arbeit, die vom Design ausgeht und mit Figma vereinfacht wird, zu einem iterativen und kontinuierlichen Verbesserungsprozess führt, der zu besseren Produkten und effizienteren Ergebnissen in unseren Projekten führt.