Intelligentes Design bedeutet strukturiertes Design: Wenn alle Beteiligten die gleichen Bezeichnungen verwenden, arbeitet das Team reibungslos und die Projekte verlaufen ohne Probleme. In Figma bedeutet das, eine klare Nomenklatur für Ebenen, Komponenten, Stile, Variablen und Zustände zu verwenden, sodass jeder auf einen Blick versteht, worum es sich jeweils handelt. Die Festlegung einheitlicher Benennungsregeln erhöht die Geschwindigkeit, vermeidet Verwirrung und gewährleistet visuelle Konsistenz. in jedem Projekt, vom einfachen UI-Kit bis zum ausgereiften Designsystem.
In diesem Leitfaden erfahren Sie, wie Sie eine vollständige Taxonomie erstellen, die alles von Elementtypen und deren Eigenschaften bis hin zu Namenskonventionen, Struktur und Reihenfolge abdeckt. Außerdem lernen Sie, wie Sie Figma AI nutzen, um Ebenen in großen Mengen umzubenennen und Variablen als wiederverwendbare Token für fortgeschrittenes Design und Prototyping zu implementieren. Die Idee ist, dass man am Ende eine gemeinsame, funktionierende Sprache erhält, die sich nahtlos skalieren lässt..
Die Grundlagen: Warum die Nomenklatur in einem Designsystem wichtig ist
Bevor wir ins Detail gehen, ist es sinnvoll, den Rahmen festzulegen: Ein Designsystem in Figma vereint Komponenten, Stile und Regeln, die die Benutzeroberfläche gestalten. Eine einheitliche Namensgebung im gesamten System ist unerlässlich für Konsistenz und Effizienz.Auf diese Weise wird Ihre Bibliothek nicht zu einem unübersichtlichen Durcheinander von Schaltflächen, die fast identisch sind, aber tausend verschiedene Namen tragen.
Innerhalb dieses Systems sind Eigenschaften und ihre Werte von zentraler Bedeutung: Farbe, Typografie, Abstände, Größen, Zustände, Modi… Je einheitlicher Sie die einzelnen Eigenschaften und Werte benennen, desto einfacher wird es, das Gesamtbild anzuwenden und beizubehalten. in allen Teilen des Produkts.
Praktische Organisation von Komponenten und Stilen
Bei der Arbeit mit Komponenten spart die Verwendung beschreibender und vorhersehbarer Namen Zeit beim Suchen und Verstehen von Instanzen. Bei Schaltflächen beispielsweise sollte man zwischen Typ und Zweck unterscheiden (primär, sekundär).; und fügen Sie gegebenenfalls den Zustand hinzu (z. B. normal oder schwebend).
Bei Symbolen sollte man möglichst generische Symbole wie „Symbol 123“ vermeiden. Wählen Sie bekannte Namen wie „Mail“, „Warenkorb“ oder „Netzwerke“. Sie sollten erklären, worum es geht, ohne die Ebene zu öffnen. Diese Klarheit ist beim Filtern in der Bibliothek und bei der Untersuchung im Entwicklermodus von Vorteil.
Bei interaktiven Komponentenzuständen sollten diese so benannt werden, dass sie eindeutig unterscheidbar sind: Beispielsweise sollte ein Hauptbutton im Ruhezustand und seine Hover-Version klar unterschieden werden. Die Verwendung eines Suffixes oder eines Zustandsmodifikators löst das Problem (z. B. primary/primary-hover)..
Wenn Sie mehrere Designsysteme parallel verwalten, kennzeichnen Sie deren Hierarchie. Die Unterscheidung zwischen einem „Hauptset“ und einem „Sekundärset“ verhindert das Vermischen von Teilen, die nicht zusammengehören.insbesondere in Organisationen mit mehreren Marken oder Geschäftsbereichen.
Vorteile der Namensabstimmung zwischen Design und Entwicklung
Wenn das gesamte Team die gleiche Sprache verwendet, werden Reibungsverluste reduziert: Wenn ein Entwickler den Layernamen liest und dieser mit dem Token oder der Klasse im Code übereinstimmt, ist die Implementierung unkomplizierter. Die Nomenklatur ist das Bindeglied, das die Zusammenarbeit zwischen den Disziplinen zusammenhält. und verkürzt die Überprüfungszyklen.
Wenn es dann an der Zeit ist, das System zu prüfen oder zu skalieren, ist die Identifizierung und Gruppierung von Elementen unkompliziert, sofern die Namensregeln konsequent angewendet wurden. Nominelle Konsistenz führt zu Wartungsfreundlichkeit und Kosteneinsparungen. im Laufe der Zeit.
Schritte zum Erstellen Ihrer Designsystemdatei in Figma
Der Aufbau eines soliden Systems ist keine Frage der Zeit, aber es gibt einen klaren Weg, dem Sie folgen können, damit Sie sich unterwegs nicht verirren. Beginnen Sie mit dem Wesentlichen und dokumentieren Sie jede Entscheidung, damit sie teilbar ist..
- Inventar der wichtigsten Elemente: Definieren Sie, was Sie standardisieren möchten (Farbpalette, Schriftarten, Abstände, wichtige Komponenten wie Schaltflächen, Eingabefelder, Karten usw.). Ein klarer Projektumfang verhindert spätere Nacharbeiten..
- Datei, die dem System gewidmet ist: Erstellt eine spezielle Datei, die als maßgebliche Datenquelle dient. Durch die Trennung der Bibliothek von den Projekten wird sichergestellt, dass Änderungen besser kontrolliert und versioniert werden..
- Komponentenbildung mit Kriterien: strukturiert die Komponenten und ihre Varianten gemäß der gewählten Konvention. Der Name sollte Art, Zweck und Status widerspiegeln, wenn er mit etwas in Berührung kommt..
- Stile definierenTextstile, Farben und Effekte mit einheitlichen Namen, damit sie leicht zu finden sind. Es wendet die gleichen Grammatik- und Wortverbindungsmuster an..
- Dokumentieren Sie die Verwendung: Hinweise zur Verwendung der einzelnen Teile, zu den jeweiligen Grenzen und zu Beispielen hinzufügen. Ein klarer Leitfaden erleichtert es der gesamten Organisation, „auf demselben Niveau“ zu planen..
Taxonomie: Komponenten, Objekte, Eigenschaften und Werte
Damit ein Glossar funktioniert, muss man zunächst wissen, von welchen Teilen man spricht und wie diese zueinander in Beziehung stehen. Diese Taxonomie dient als Leitfaden, um sicherzustellen, dass keine Details unerledigt bleiben..
Bestandteile: Basis und Verbindungen
In Figma-Begriffen ist eine Komponente ein Block mit eigener visueller Identität innerhalb des UI-Kits (wie eine Karte). Ein Basisbauteil ist ein Bauteil, das so konstruiert ist, dass es in andere Bauteile eingebettet werden kann. (Zum Beispiel die numerische Schaltfläche, die nur innerhalb eines Datumsauswahlfelds existiert). Manche Bibliotheken bezeichnen sie als Assets, Snippets, Teile, Elemente oder Unterkomponenten: Das Prinzip ist dasselbe.
Objekte: Container und Elemente
Ein Objekt ist ein Bestandteil einer Komponente. Es gibt zwei Hauptgruppen: Container (Boxen, Abschnitte) und Elemente (Inhalte).Zu den Elementen gehören Text (Beschriftung, Titel, Untertitel, Bildunterschrift), andere Komponenten (Symbole, Illustrationen, Schaltflächen, Tabellen), Vektoren (Kreis, Rechteck, Polygon) und Medien (Bild, GIF, Video).
Eigenschaften und Werte
Die Eigenschaften sind die variablen Teile (Größe, Zustand, Farbe, Dichte usw.). Jede Eigenschaft bietet eine Reihe möglicher WerteDie "state"-Eigenschaft eines Buttons kann beispielsweise normal, hover, gedrückt, deaktiviert usw. sein.
Es gibt zwei Arten von Werten: Varianten und Boolesche Werte. Eine Variante unterstützt mehr als zwei Optionen (xs/s/m/l oder info/warn/error).Ein boolescher Wert hingegen repräsentiert ein typisches Ja/Nein (Wahr/Falsch, Ein/Aus, Symbol anzeigen/Symbol ausblenden).
Namensstruktur: Modifikatoren und ihre Position
Sobald Sie sich darüber im Klaren sind, was Sie benennen (Komponente, Objekt, Eigenschaft oder Wert), müssen Sie entscheiden, wie Sie deren Unterschiede kennzeichnen. Modifikatoren helfen dabei, Varianten, Zustände und Kontexte zu unterscheiden..
Arten von Modifikatoren
Es gibt verschiedene Möglichkeiten, einen Namen visuell zu verändern. Sie können Icons, Symbole oder Schlüsselwörter verwenden. um Ihr Leseverständnis zu festigen:
- Symbol: zum Beispiel ein Symbol davor, um Nutzen oder Status anzuzeigen (nur wenn Ihr Computer dies unterstützt und versteht).
- Satzzeichen: Präfixe oder Trennzeichen wie ._Base oder Unterebenenmarkierungen.
- Wörter, Akronyme und Abkürzungen: Suffixe wie Item-List, Cell-Header, ShowIcon, BC_…
Wichtig ist, dass die Konvention explizit und dokumentiert ist. Wenn Sie Modifikatortypen kombinieren, definieren Sie Prioritäten und Anwendungsfälle. um chaotisches Vermischen zu vermeiden.
Modifikatorposition
Die Reihenfolge muss im gesamten System einheitlich sein. Sie können den Modifikator vor (Item-List) oder nach (List-Item) platzieren.Entscheidend ist, nicht ohne klare Strategie zwischen den beiden Mustern hin und her zu wechseln.
Grammatik der Substantive: Art, Numerus, Initialen und Verbindungen
Die Standardisierung der Grammatik macht Namen lesbar und vorhersehbar. Einmal entscheiden und immer so handelnAndernfalls werden sich Ausnahmen häufen, die man sich nur schwer merken kann.
Begriffsart
Wähle aus, ob der Name ein Verb, ein Adjektiv oder ein Substantiv sein soll und in welcher Form er konjugiert wird. Gültige Optionen: Partizip (Collapsed), Präsens (Collapse), Adjektiv (Collapsable), Substantiv (Collapsible) oder Kombinationen wie „ist ausklappbar“, „Ausklappbar anzeigen“, „Symbol davor“.
Singular oder Plural
Legen Sie fest, ob Sie im Singular oder Plural benennen, und behalten Sie das Muster bei. Die konsequente Verwendung von Button/Buttons oder Size/Sizes erleichtert das Suchen und Lesen.Sie können auch eine generische Kategorie („Aktionen“) festlegen, wenn dies mehrere Elemente besser gruppiert.
Initialen und visueller Stil
Legen Sie fest, wie Sie Groß- und Kleinschreibung verwenden: Großbuchstaben + Großbuchstaben (Symbol davor), Kleinbuchstaben + Kleinbuchstaben (Symbol davor), Großbuchstaben + Kleinbuchstaben (Symbol davor) oder Kleinbuchstaben + Großbuchstaben (Symbol davor). Großschreibung ist Teil des Systems, kein nebensächliches Detail..
Wortpaare
Die Art und Weise, wie Sie Begriffe kombinieren, bestimmt die Lesbarkeit und die Kompatibilität mit dem Code. Gängige Optionen: kein Leerzeichen (iconBefore), mit Leerzeichen (icon before), Punkt (icon.Before), Bindestrich (icon-before), Unterstrich (icon_before)Vermeiden Sie Kombinationen, die das Lesen beeinträchtigen, wenn sie keinen Mehrwert bieten.
Vordefinierte Stile (Case Styles), die Initialen und Vereinigungen kombinieren, befinden sich in der Entwicklung: camelCase (keine Leerzeichen und jedes Wort außer dem ersten großgeschrieben), PascalCase (alles großgeschrieben und keine Leerzeichen), kebab-case (Bindestrich und Kleinbuchstaben) und snake_case (Unterstrich und Kleinbuchstaben)Wählen Sie diejenige, die am besten zu Ihrem Stack passt, und bleiben Sie dabei.
Sortiermöglichkeiten: alphabetisch, sequenziell und hierarchisch
Neben dem Namen spielt auch die Art und Weise, wie lange Listen geordnet sind, eine Rolle für das schnelle Auffinden von Inhalten. Drei Ansätze funktionieren gut in Bibliotheken:
- Alphabetisch: a–zoz–a (z. B. unten, links, rechts, oben).
- Sequenziell: 0–10 oder 10–0 (z. B. Standard-/Hover-/Aktivgrößen oder -zustände).
- Hierarchisch: von der wichtigsten zur unwichtigsten oder umgekehrt (z. B. primäre, sekundäre oder Informations-/Warnungs-/Fehler-Schweregrade).
Die Anwendung derselben Sortierkriterien auf alle Kollektionen verhindert, dass jedes Team „auf seine eigene Weise“ sortiert. Definieren Sie Ihre Präferenzen und dokumentieren Sie Beispiele. für mehrdeutige Fälle.
Umsetzung: Prüfung und Erstellung des Glossars
Nachdem die Regeln festgelegt wurden, ist es nun an der Zeit, sie in die Praxis umzusetzen. Es gibt zwei Wege, die Sie sogar kombinieren können. um die Landung sicherzustellen:
Inhaltsprüfung
Überprüfen Sie, was bereits erstellt wurde: Inventarkomponenten, Objekte, Eigenschaften und Werte mit ihren aktuellen Namen. Ziel ist es, einen Konsens über ein einheitliches taxonomisches System mit Design und Entwicklung zu erzielen. und die Migration so zu planen, dass Prototypen oder Übergaben nicht beeinträchtigt werden.
Glossarerstellung
Egal, ob Sie ganz von vorne anfangen oder die Prüfung bereits durchgeführt haben, definieren Sie die Struktur, Grammatik und Reihenfolge für jeden Elementtyp (Komponente, Objekt, Eigenschaft und Wert). Das Glossar wird zu Ihrem „offiziellen Wörterbuch“ der Namen. und in einer Informationsquelle für neue Mitglieder.
Figma AI zum kontextbezogenen Umbenennen von Ebenen
Das manuelle Umbenennen hunderter Ebenen ist mühsam. Figma AI spart Ihnen hier Zeit, indem es anhand von Inhalt, Position und Ebenenbeziehungen kontextbezogene Namen vorschlägt. Das Tool analysiert Ihre Auswahl und wendet einheitliche Namen an, wo es das Standardmuster erkennt..
Es gibt bewusste Einschränkungen: Figma AI benennt nur Frames, Gruppen, Textebenen, Rechtecke (und abgerundete) mit Bildfüllung sowie bestimmte Instanzen um, die den Standardnamen der Hauptkomponente beibehalten (nur den Container, ohne Unterebenen zu verändern). Wenn eine Ebene bereits einen Namen hat, gesperrt oder ausgeblendet ist oder eine einzelne Vektorform (Ellipse, Polygon, Stern, Netz) ohne Bild ist, wird sie nicht umbenannt..
Sie können die Umbenennung auf verschiedene Arten starten: über das Kontextmenü mit einem Rechtsklick, über Aktionen in der Symbolleiste oder über Schnellaktionen durch Eingabe von „Ebenen umbenennen“. Wenn bereits alles korrekt benannt ist, wird die Meldung „Ebenen müssen nicht umbenannt werden“ angezeigt, mit der Option „Trotzdem umbenennen“, falls Sie dies erzwingen möchten..
Ein nützliches Detail: Wenn Sie identische, unbenannte Ebenen in mehreren Frames der obersten Ebene haben, benennt Figma AI die übereinstimmenden Ebenen um. Dies trägt dazu bei, intelligente Animationen und Scrollpositionen in Prototypen zu erhalten, indem die nominale Zuordnung beibehalten wird..
Variablen in Figma: Wiederverwendbare Token für Design und Prototyping
Variablen speichern Werte, die Sie in Designeigenschaften und Prototypaktionen wiederverwenden können, und sie existieren neben anderen Designwerkzeugen wie z. B. 3D-Designprogramme für Mac. Sie bilden die natürliche Brücke zur Implementierung von Design-Tokens und zum Aufbau interaktiver Logik ohne Duplizierung von Frameworks..
Einige praktische Anwendungsbeispiele: Erstellen und Anwenden von Platzhaltern (Farben, Schriftarten, Leerzeichen), Umschalten zwischen verschiedenen Gerätegrößen mit sofortiger Anpassung der Abstände an die jeweilige Skalierung, Vorschau von Texten in verschiedenen Sprachen mit Kontextwechsel oder Erstellen eines Warenkorbs, der die Bestellsummen berechnet. Und all dies ohne unnötige Variationen zu vervielfachen.
Es gibt drei Hauptbereiche, in denen sie herausragende Leistungen erbringen: Design und Designsysteme, fortgeschrittenes Prototyping und APIs. Die Beherrschung dieser drei Aspekte ermöglicht es Ihnen, Design, Interaktion und Automatisierung miteinander zu verbinden. in einem gleichmäßigen Fluss.
Variablen für Design und Systeme
Verwenden Sie Variablen und Modi, um Token und alternative Kontexte (hell/dunkel, Marken, Regionen) darzustellen. Farbe und Zahl bilden die Grundlage für Farbpaletten, Größen und Dichten.Und Sie können sie Sammlungen und Modi zuordnen, um auf einen Blick zwischen ihnen zu wechseln.
Typische Ressourcen in diesem Bereich sind Einführungstutorials, Anleitungen zu Sammlungen und Modi sowie Vergleiche zwischen Variablen und Stilen, die Ihnen bei der Entscheidung helfen, wann Sie welche verwenden sollten. Zusammenfassend: Stile dienen als visuelle Voreinstellungen; Variablen kapseln parametrisierbare Werte mit Modi.
Variablen für fortgeschrittene Prototypenerstellung
In Prototypen speichern Variablen Zustände und Eigenschaften, die sich durch Interaktion verändern. Sie können Aktionen verwenden, um deren Werte zu ändern und so Aussehen, Inhalt oder Sichtbarkeit anzupassen, ohne Frames zu duplizieren..
Die Kombination von Variablen mit Ausdrücken und Bedingungen eröffnet die Möglichkeit für dynamische Zeichenketten, mathematische Operationen und boolesche Auswertungen. Mit mehreren Aktionen und Wenn/Dann-Logik lassen sich komplexe Verhaltensweisen im selben Auslöser stapeln..
Variable Modi spielen auch bei Prototypen eine Rolle: Sie legen Werte kontextabhängig fest (z. B. nach Thema) und verwenden diese in Ausdrücken, um das Erscheinungsbild in Echtzeit zu ändern. Die Anzahl der für komplexe Szenarien benötigten Bildschirme wird drastisch reduziert..
Variablen und API (REST, Plugins und Widgets)
Die Variablen sind sowohl in der Plugin-API als auch in der REST-API verfügbar. Sie können Variablen anzeigen, erstellen, aktualisieren und löschen sowie sie mit Komponenten aus Plugins verknüpfen.Dies ermöglicht den Einsatz von Tools wie Import-/Exportprogrammen oder Stil-zu-Variablen-Konvertern.
Widgets greifen über die Plugin-API auf Variablen zu (Lesen und Erstellen), mit der Ausnahme, dass sie Widget-Eigenschaften nicht direkt mit Variablen verknüpfen können. Zur Synchronisierung mit dem Repository gibt es Beispiel-GitHub-Aktionen, die Figma-Variablen mit Ihrer Codebasis verbinden.Zusätzlich zu den Community-Sandbox-Dateien für risikofreies Üben.
Gute Namenskonventionen für Ebenen und Komponenten
Legen Sie ein Präfix für den Typ fest (z. B. Btn, Card, Input) und ein Suffix für den Zustand (hover, focus, disabled) oder die Größe (sm, md, lg). Die empfohlene Reihenfolge ist üblicherweise Typ/Zweck/Größe/Zustandund verwenden Sie einheitliche Trennwände (Kebab- oder PascalCase-Boxen, je nachdem, welche zu Ihrem Stapel passen).
Konsistenz zwischen Ebenen und Instanzen wahren: Der Instanzcontainer muss das Muster der Masterkomponente erben. Vermeiden Sie improvisierte lokale Variationen, da diese die Suche und den Ersatz behindern.Wenn es Zeit für Änderungen ist, führen Sie diese in der Master-Version durch und veröffentlichen Sie eine neue Version.
Benennen Sie bei booleschen Eigenschaften die Eigenschaft und nicht den Wert: "Icon" bei den Werten On/Off oder True/False; vermeiden Sie "withIcon/withoutIcon", wenn Ihr System boolesche Schalter verwendet. Dadurch wird die Sprache an die Logik des Prototyps und des Codes angepasst..
Wenn Ihr Projekt mehr als eine Domäne umfasst (z. B. Backoffice und Kunde), fügen Sie dem Sammlungs- oder Ordnernamen einen Bereich hinzu. Die Trennung nach Kontext reduziert semantische Kollisionen und fördert die angemessene Wiederverwendung..
Häufige Fehler und wie man sie vermeidet
Einer der häufigsten Fehler ist, dass die Konvention nicht dokumentiert wird und jeder die Dinge „auf seine eigene Weise“ benennen darf. Ohne Führung wird die Bibliothek fragmentiert und die Geschwindigkeit des Teams sinkt.Um Zweifel auszuräumen, sollten klare Beispiele und Grenzfälle genannt werden.
Ein weiterer Fehler: die Vermischung von Binde- und Großschreibungsstilen innerhalb derselben Komponentenfamilie (Kebab in einigen, Kamel in anderen). Dies erschwert Filter, Abfragen und das Lesen des Ebenen-Panels.Definiere einen Standardstil und wende begrenzte und begründete Ausnahmen an.
Vermeiden Sie sinnlose Namen („Frame 27 Copy 3“, „Rectangle 12“). Falls Figma AI nicht helfen kann, weil die Namen bereits vergeben sind, benennen Sie sie manuell oder auf Komponentenebene um. und nutzen Sie die Gelegenheit, die gewählte Konvention zu festigen.
Varianten, die bereits durch eine Variable oder einen booleschen Wert in der Komponente aufgelöst sind, dürfen nicht dupliziert werden. Die goldene Regel: Weniger Bildschirme, mehr ParametrisierungSie erhalten dadurch eine leichtere und besser handhabbare Bibliothek.
Einführungsleitfaden für Teams
Beginnen Sie klein mit einer Reihe wirkungsvoller Komponenten (Schaltflächen, Eingabefelder, Typografie, Farbpalette). Teilen Sie die Konvention, sammeln Sie Feedback und verbessern Sie sie, bevor Sie sie anderen vorstellen.Von dort aus erfolgt die Migration modul- und versionsbezogen.
Wenn Sie Ihre Beherrschung dieser Praktiken beschleunigen möchten, sollten Sie ein intensives, produktorientiertes Training in Betracht ziehen. Von aktiven Fachleuten geleitete Programme helfen dabei, die Theorie in realen Fallbeispielen in die Praxis umzusetzen. Figma ist bereits in die Entwicklungsprozesse integriert.
Der Schlüssel zu all dem liegt darin, die Nomenklatur als Teil des Designs zu behandeln und nicht als nachträglichen Gedanken. Mit einem übersichtlichen Glossar, klaren Grammatik- und Strukturregeln, Figma-KI-Unterstützung und klar definierten Variablen gewinnt Ihr System an Geschwindigkeit, Konsistenz und Skalierbarkeit.Und Ihr Team erhält wertvolle Zeit, sich auf die Probleme der Nutzer zu konzentrieren, anstatt sich über Namen zu streiten.
