Projektaufbau in Figma

Die Library Dateien

Die Library Dateien bilden das Fundament des jeweiligen Entwicklungs-Projektes. Jede Datei erfüllt dabei eine spezifische Aufgabe. Die KERN Foundations nimmt dabei die wichtigste Rolle ein. Sie steuert über Variablen das generelle Aussehen der Komponenten. Durch die Trennung von „Foundations” und „Design-Kit” lässt sich die KERN Design-Kit Datei zukünftig beliebig austauschen (sofern keine Ergänzungen in der Foundations erforderlich werden).

KERN Foundations

Beinhaltet alle Variablen, Themes und produktspezifische Variablen Ergänzungen. Dazu gehören:

• Typographie
• Abstände
• Größen
• Farben (Generisch / Semantisch / Kontextuell)

Sie definiert das Aussehen von KERN. Schnelle und leichte Ergänzung der eigenen Landesmarke als Theme für Light- und Dark-Mode. Auch Akzentfarben können als eigener Mode hinzugefügt werden. Dadurch wissen Komponenten automatisch, wie sie sich dem Kontext entsprechend anpassen müssen. Die Variablen können flexibel in verschiedenen Dateien verwendet werden – vom Design-Kit über das Produkt-Kit bis hin zu Produkt-Feature-Dateien oder eigenen Kit-Dateien. All das wird visuell über die KERN Foundations gesteuert. Hier können Variablen ergänzt und über Modes auch angepasst werden.

KERN Design-Kit

Beinhaltet alle offiziellen KERN Komponenten. Dazu gehören:

• Buttons
• Inputs
• Cards
• Schriftstile
• ...

Die KERN Design-Kit-Datei sollte nicht manuell geändert werden. Nur so lassen sich offizielle Updates ohne Aufwand übernehmen. Bei Community-Kopien in Figma müssen eigene Anpassungen bei jedem Update erneut übertragen werden. Deshalb: KERN Design-Kit unverändert lassen und individuelle Anpassungen in einer separaten Library umsetzen.

Product Design-Kit

Genau hierfür wäre diese Datei gedacht: Das Product Design-Kit ist für produktsepzifische Komponenten & Ergänzungen gedacht. Dazu gehören:

• Ergänzung Logos / Landesmarken
• Ergänzung eigener Schmuckelemente (Markenspezifische Formen, Bildsprache, ...)
• Eigene Komponentenergänzungen
• Icon-Ergänzungen
• KERN Design-Kit Überschreibungen
• Moleküle aus KERN Komponenten
• ...

Sie füllt produktspezifische Lücken. Jedes Produkt bringt individuelle Anforderungen und Herausforderungen mit sich, die nicht immer vollständig durch den Standard-Komponenten-Katalog abgedeckt werden. Diese Datei ergänzt gezielt die fehlenden Elemente, die für das jeweilige Produkt notwendig sind. Durch die konsequente Nutzung der KERN Foundations und des KERN Design-Kits bleibt dabei ein einheitliches und wiedererkennbares Look & Feel über alle Anwendungen hinweg gewährleistet. Die neuen Komponenten sind entweder komplette Neuentwicklungen, Rekombinierungen oder Overrides der KERN Design-Kit Datei. Bei letzterem ist Vorsicht geboten wenn verschiedene Varianten, Properties oder Verschachtelungen im Spiel sind. In diesem Fall empfiehlt es sich die gewünschte Komponente ins Product Design-Kit zu kopieren, umzubenamen und dort anzupassen.

Ordneraufbau in Figma

Für das eigene Projekt empfiehlt sich in den meisten Fällen folgender Projektaufbau in einem Figma Team: Alle Library Datei in einem Figma Projekt(ordner) und alle Produkt Features in einem oder mehreren separaten Projektordnern.

In größeren Projekten, wenn viele verschiedene Stakeholder involviert sind (PO’s / Entwickler / mehrere Designer:innen / ...) ist dieser Aufbau von Zander Whitehurst eine interessante Anregung: