Die besten Tipps: So organisieren Designer ihre Figma-Projekte
Figma: Aus dem Nähkästchen geplaudert.
Ich denke, die Daphne von vor 3 Jahren hätte gerne die Tipps und Tricks für das Figma Design System gewusst, die ich heute kenne.
Aber hey, wie sagt man so schön: Learning by doing! Damit du nicht so viele "doings" auf deinem Firgma Weg hast, gibt es hier ein paar Tricks aus meinem Figma Nähkästchen, die ich gerne mit dir teilen möchte.
Tipp Nr. 1: Kapitel
Arbeitest du auch an verschiedenen Produkten und diversen User Journeys? Egal, ob du für Kunden arbeitest oder deine eigenen Projekte vorantreibst. Sobald du mehr als 20 Screens auf deiner Page hast, dauert es nicht mehr lange, bis das Chaos da ist. Wie in jedem guten Buch gibt es Kapitel, die dich darauf hinweisen, wo du dich befindest. Das gleiche kannst du auch in Figma für deine Projekte machen.
Kapitel-Elemente helfen dir und deinem Team zu verstehen, welche Screens sich unter diesem Kapitel befinden. Das Kapitel-Element kann verschiedene Ausprägungen vorweisen. Hier sind die, die ich häufig anwende.
- Farbcode = Jede Farbe steht für ein Projekt.
- Logo= So wissen andere Teams, von wem die Figma Files kommen.
- Label= Name des Projektes
- Titel= Für die richtigen Namen
- Text= Für mehr Informationen
- Tags=Optional, wenn du mehr Infos zum Status der Screens vermitteln möchtest.
Tipp Nr. 2: Archiv
Es kann sein, dass genau in der heissen Phase eines Projekts dein Figma-File-Speicher voll ist. Figma weist dich dann darauf hin, dass du zu viele Daten in deinem File hast und bald nichts mehr geht. Was tun wir jetzt? Alle Screens löschen, die ich nicht brauche? Auf gar keinen Fall!
Ich habe das auf die harte Tour gelernt und möchte euch dieses Erlebnis ersparen. Löscht nie eure Screens im Figma! Wie heisst es so schön? “One man’s trash, is another man’s treasure“. Erstelle daher im Figma ein separates File, das du Archiv nennst. Benenne das Archiv-Filenach deinem Inhalt. So weisst du immer, was du im Archiv finden wirst.
Hier ein Beispiel:
Erneuerst du diverse UI-Komponenten im Design System? Dann bennene dein Archiv-File so: "Archive Design System 1.0". Ein Datum sollte auch nicht fehlen. Es kann sein, dass du im nächsten Jahr ein Design System 2.0 brauchst.
Im Figma File selbst, überlasse ich dir die Struktur. Hier gibt es kein Richtig oder Falsch: die Struktur kann so individuell sein wie deine Projekte. Wenn du ein Archiv-Nerd bist, (so wie ich) kannst du mehrere Archiv Files erstellen. Das macht besonders Sinn, wenn du im Archiv zwischen Design-Systemen und Produkt-Releases unterscheiden möchtest.
Tipp Nr. 3: Cover
Sei kreativ, wenn es um die Figma-Cover geht. Denn es macht zu einem gewissen Punkt sehr viel Sinn, die Covers nach Themen, Farben oder bestimmten Strukturen zu gestalten.
Hier ein Beispiel, wie wir bei viu unsere Figma-Covers farblich strukturieren:
- Projekte für viu sind rot
- Kundenprojekte sind blau
- FigJam sind hellgrau
- Archive sind dunkelgrau
Covers können auch inhaltliche Informationen liefern. So weiss jeder, was sich in deinem Figma File befindet. Hier eine Auflistung an möglicher Infos:
- Label: Perfekt für Kundennamen
- Titel: Hier sollte dein Projektname stehen, z.b (Website Refresh oder New App Feature)
- Logo: Stell dir vor, externe Teams greifen auf deine Figma-Files zu. In dieser SItuation ist es immer gut, wissen zu lassen, wer dieses File erstellt hat. Deine Arbeitgebr oder deine eigene Firma.
- Datum: Perfekt für Archiv-Covers. Um hier noch mehr Ordnung reinzubringen.
- Tags: Ist dann effektiv, wenn du andere wissen lassen willst, was das File kann. Was dieses FigJam File ein Workshop oder ein internes Learning? Weis das Design System Micro Animationen auf? Ist es responsiv? All das kannst du mit Tags auslösen.
Möchtest du noch mehr Tipps und Tricks von mir lesen? Keine Sorge! Ich habe noch ein paar in meinem Figma Nähkästchen, die ich bald mit dir teilen werde.