Komponenten

Komponenten in Figma sind eure Bausteine für konsistente Designs.

Grundprinzipien

Wiederverwendbar: Einmal erstellen, überall nutzen Konfigurierbar: Varianten für verschiedene Zustände Dokumentiert: Klare Namen und Beschreibungen

Komponenten-Typen

1. Primitive (Atoms)

• Button
• Input
• Label
• Icon

2. Composite (Molecules)

• InputGroup (Label + Input + Error)
• Card (Header + Content + Footer)
• FormField (Label + Input + Hilfetext)

3. Page-Level

• Navigation
• HeroSection
• Footer

Varianten erstellen

Beispiel Button:

• Variant: primary, secondary, tertiary
• Size: sm, md, lg
• State: default, hover, active, disabled, loading

In Figma:

1. Komponente erstellen
2. “Create component property” → Variant
3. Eigenschaften definieren

States immer designen

Jede Komponente braucht:

• Default
• Hover
• Active/Pressed
• Disabled
• Loading (falls relevant)
• Error (falls relevant)

Naming

Konvention: {Komponente}/{Eigenschaft}-{Wert}

Beispiele:

• Button/variant-primary
• Button/size-lg
• Button/state-hover

Praktische Tipps

1. Atomic Design – Von klein zu gross denken
2. Varianten nutzen – Keine Duplikate
3. Auto Layout – Für flexible Komponenten
4. Constraints – Für responsives Verhalten
5. Dokumentation – Beschreibung in Figma

Checkliste

• Alle States designed
• Varianten erstellt
• Auto Layout angewendet
• Responsive Verhalten definiert
• Benannt nach Konvention

---

Gute Komponenten sparen Zeit und sorgen für Konsistenz.