Leichte Sprache
Gebärdensprache
KERN Figma
KERN openCodeKomponentenaufbau in Figma
Die folgenden Punkten haben keinen Anspruch auf Vollständigkeit und adressieren erst einmal die grundlegendsten Aspekte, auf die geachtet werden sollten, wenn es um den Aufbau von Komponenten in Figma geht.
Gibt es schon was ... ?
Berücksichtige was schon vorhanden ist. Durch Kombination der bestehenden Komponetnen lassen sich schnell neue Komponenten erzeugen (Atomic-Design-Prinzip). Netzwerke oder frage im KERN Team oder der KERN Community, ob es bereits eine Antwort auf deinen Use Cases gibt.
Zur Unterstützung bieten wir folgende Kanäle:
Im Bereich Design-System-Benchmark findest du eine Auflistung der Design Systeme die für uns eine Benchmark darstellen und an denen wir uns bei der Entwicklung der KERN Komponenten orientieren. Es lassen sich auch Komponenten aus anderen Design Systemen auf KERN stylen. Unter Interaktion findest du eine kurze Erläuterung, wie bspw. unsre Interaktions Variablen angewendet werden.
Generelles
Der Aufbau in Figma sollte möglichst nah am Code-Aufbau sein. Orientiere dich an bestehenden Komponenten und sei konsistent bei der Benennung von Layern, Properties und Ebenenstruktur – nur so sind Komponenten als Assets untereinander austauschbar.
Bitte nutze beim Aufbau von Komponenten (und auch Screenlayouts) Auto-Layout mit den von KERN zur Verfügung gestellten Größenvariablen.Die Nutzung von Autolayout erleichtert es Entwicklern zusätzlich den von Figma zur Verfügung gestellten Code zu nutzen.
Varianten vs. Properties
Figma ermöglicht es, viele Varianten einer Komponente über Properties (z. B. Varianten, Booleans, Text) in einer einzigen Komponente abzubilden. Zu viele Properties können jedoch zu Fehlern und Unübersichtlichkeit führen. Umgekehrt bläht eine eigene Komponente für jede Variante die Bibliothek auf. Finde daher einen Mittelweg: Steuere Zustände (z. B. Hover, Disabled, Icon) über Properties, aber lege für grundlegend verschiedene Typen (z. B. Primary, Secondary) separate Komponenten an.
Dieser Punkt gilt für Menschen. Im Zuge von KI kann dieser Punkt anders bewertet werden.
Verschachtelung
Auch hier gilt es eine gesunde Balance zu finden. Bei KERN versuchen wir die Verschachtelungstiefe auf ein Minimum zu halten. Im Regelfall genügt der „Einfache Aufbau" und eine Anpassung mehrere Elemente über das „Multi-Edit" Feature von Figma.
Es gibt wiederum auch Fälle in denen es hilfreich ist erst eine „Elternkomponente" von der diverse Varianten abgeleitet werden. Ein gutes Beispiel dafür wäre unsere Input Komponente. Die Anatomie aller Input Komponenten werden über die „base-form" gesteuert. Wenn wir jetzt bspw. Änderungen an der Position oder den Aufbau der Fehlermeldung vornehmen möchten, können wir das jetzt an einer Stelle tun und alle „Kind-Komponenten" passen sich auf einen Schlag an.
Eine „Kind Komponente" ist dann eine konkrete Komponenten für einen bestimmten Use-Cases: Input-Text, Input-E-Mail, Input-Checkboxes, etc. Die Kind-Komopenten sind Kombinatoriken aus der Eltern-Komponente. Nicht alle Properties sollten durchgereicht werden, um die Bedienung einfach zu halten und Komplexität zu reduzieren.
Namenskonventionen
Properties und Komponenten werden auf Englisch und kleingeschrieben benannt, um den Übergang von Design zu Entwicklung zu erleichtern. Design und Entwicklung sollen möglichst dieselbe Sprache nutzen. Ansonsten gilt detsch als Hauptsprache. Beispiele:
- state: Zustand einer Komponente (z. B. hover)
- focus: Boolean-Property
- hint: Hinweistext in Formularen
- ✏️ label: Text-Property. Hinweis hierzu: Die Werte der Text-Properties sind auf Deutsch.
- content-slot: Platzhalter-Property
- Swap-Property: Gibt austauschbare Elemente an (z. B. component, label-type, icon-type)
- ↳: Zeigt Abhängigkeit zu einer übergeordneten Property
Der vorausgefüllten Texte einer Text-Property (z.B.: Label, Hinweis, Titel, Überschrift, Legende, Fehlermeldung, Beschreibung) sollten kurz, generisch und funktional sein, in Ausnahmefällen beispielhaft.
Barrierefreiheit
Die KERN Komponenten erfüllen mindestens das AA-Level nach BITV 2.0. Mehr Infos unter Barrierefreiheit oder: