Ein Design System aufbauen: Zwischen Figma und Code.
Über dieses Angebot
Ein Design System ist keine Bibliothek von Buttons. Es ist eine gemeinsame Sprache zwischen Design und Entwicklung. Ohne diese Sprache entstehen Inkonsistenzen, die niemand wirklich gewollt hat.
In diesem Coaching erarbeiten wir, wie ein Design System strukturiert wird – von den Tokens in Figma bis zur CSS-Implementierung im Code. Wir schauen uns an, wo Übersetzungsfehler entstehen und wie man sie von Anfang an vermeidet.
Für wen das Coaching gedacht ist
Für Frontend-Entwickler, die eng mit Designern zusammenarbeiten, und für Designer, die ihren Output entwicklungsfreundlicher machen wollen. Auch für kleine Teams, die ihr erstes Design System aufbauen.
Wir hatten vorher kein gemeinsames Vokabular. Nach dem Coaching haben wir unser erstes Token-System aufgebaut und es hat tatsächlich funktioniert. – Gregor AltenhöferWir arbeiten nicht mit einem vordefinierten System wie Material Design oder Ant Design. Der Fokus liegt auf dem Prozess: Wie trifft man Entscheidungen, wie dokumentiert man sie, und wie sorgt man dafür, dass das System lebt statt verstaubt.
Brauche ich Figma-Kenntnisse?
Grundkenntnisse in Figma sind hilfreich. Wer nur aus der Entwicklungsperspektive kommt, kann trotzdem teilnehmen – wir schauen uns Figma-Dateien gemeinsam an, ohne dass du selbst designen musst.
Programm & ABLAUF
Programmübersicht
-
Sitzung 1 – Grundlagen und Audit
Was macht ein Design System aus? Wir schauen uns dein bestehendes Projekt oder Interface an und identifizieren, was bereits ein System ist und was noch nicht.
-
Sitzung 2 – Design Tokens definieren
Farben, Abstände, Typografie, Radien – wir legen fest, welche Werte ein Token werden und welche nicht. Und wie man sie benennt, damit beide Seiten sie verstehen.
-
Sitzung 3 – Komponenten mit Varianten
Wie man Komponenten so strukturiert, dass sie in Figma und im Code die gleiche Logik haben. Wir bauen gemeinsam eine Button-Komponente mit Zuständen und Varianten.
-
Sitzung 4 – Dokumentation und Übergabe
Wie man ein System dokumentiert, das andere tatsächlich benutzen. Storybook als Option, aber auch einfachere Wege für kleinere Teams.
-
Sitzung 5 – Review und nächste Schritte
Wir schauen, was ihr bisher aufgebaut habt, und klären offene Fragen. Du bekommst eine schriftliche Roadmap für die Weiterentwicklung.
- Teilnehmerzahl
- Einzelperson oder kleines Team (bis 3 Personen)
- Vorbereitung
- Zugang zu einem bestehenden Projekt oder Interface ist hilfreich