Zum Inhalt springen

Ein Designsystem für wiederkehrende Kundenprojekte. Figma-Variablen, Komponenten und ein Demo-Theme schaffen eine gemeinsame Grundlage für Design und Page-Builder.

Auftrag
Agenturpartner
Bereich
CMS · Page-Builder · Designsysteme
Beitrag
Designsystem-Konzeption · Design Tokens · Komponentenbibliothek · Theme & Assets · TokenLab-Integration
Jahr
2025/26
Industrieroboter und Geräte als Hero-Motiv des ICMS Demo-Themes
  • Color Primary
  • Text Muted
  • Text Primary
  • Viewport
  • H1

Für einen Agenturpartner entwickelten wir ein Designsystem, das neue Kundenprojekte auf einer gemeinsamen Basis starten lässt. Ein vollständig in Figma gestaltetes Demo-Theme verbindet Variablen und wiederverwendbare Komponenten mit den Anforderungen des bestehenden Page-Builders.

Scope

Projektverlauf
Woche 1Woche 12
Genesys Wortmarke des ICMS Demo-Themes
ICMS Demo-Theme mit dunkler Startseite auf einem Laptop

Bei neuen Kundenprojekten sollte die Gestaltung nicht jedes Mal bei null beginnen. Gesucht war ein Figma-Boilerplate, das wiederkehrende Grundlagen bereits mitbringt und mit dem eigenen Page-Builder der Agentur zusammenarbeitet. Die Herausforderung lag darin, Gestaltung und technische Struktur aufeinander abzustimmen.

Das Demo-Theme zeigt diese Grundlage als moderne, minimalistische Website. Die gezeigte Genesys-Themenwelt macht die Gestaltung konkret: von der Farbpalette über Produktdarstellungen bis zu Inhaltsmodulen. Tokens, Assets und Komponenten bilden gemeinsam das Figma-Designsystem.

Primäre Farbskala des ICMS Demo-Themes von hellen bis dunklen Blautönen
Download-Modul mit Broschürenmotiv und Dokumentlinks im Demo-Theme

Figma-Variablen definieren die gemeinsamen Gestaltungswerte. Die Token-Namen folgen der Tailwind-Systematik und sind damit auf den Export ausgerichtet. Darauf baut eine Komponentenbibliothek auf, die Grundelemente und zusammengesetzte Bausteine konsistent abbildet.

Light- und Dark-Mode sind im Demo-Theme bereits umgesetzt. Die Variablenstruktur lässt sich um weitere Modes ergänzen, etwa für breite oder schmale Layouts mit Wide und Narrow oder für eine High-Contrast-Darstellung. Diese Varianten können auf derselben Systembasis aufbauen, ohne ein separates Designsystem anzulegen.

Der bestehende ICMS-Komponentenumfang bildete die Grundlage für die Bibliothek. Das Framework des Agenturpartners nutzt die Figma-Variablen und Komponentendetails, um die Gestaltung standardisiert in Code zu übertragen. Unser Beitrag war die Figma-Seite dieser Verbindung: ein Theme und ein System, deren Struktur zum Page-Builder passt.

TokenLab-Support und -Integration ergänzen diese Grundlage für die Token-Exporte. Mit TokenLab lassen sich Export-Pipelines, Transformationen und Zielformate auf die Anforderungen der Entwicklung abstimmen. So können die Tokens in der Form bereitgestellt werden, die das jeweilige Framework und der weitere Workflow benötigen.

Figma-Bibliothek mit Abständen, atomaren und zusammengesetzten Komponenten sowie Textstilen
Inhaltsmodule des ICMS Demo-Themes auf Tablet-Ansichten

Die Bausteine werden im Demo-Theme zu konkreten Seitenbereichen. Produktkarten, Navigation, Brancheninhalte und Teamprofile zeigen, wie sich das System auf unterschiedliche Inhalte anwenden lässt. Wiederkehrende Gestaltungsmuster halten die Ansichten zusammen und lassen Raum für kundenspezifische Ausprägungen.

Produktkarten des ICMS Demo-Themes in einer perspektivischen Detailansicht
Produktnavigation mit vier Produktkarten im ICMS Demo-Theme
Branchenkarten mit Fotografie und Navigation im ICMS Demo-Theme
Teamprofile als wiederverwendbare Inhaltskomponenten des Demo-Themes
Mobile Navigation des ICMS Demo-Themes
Dunkle Linkkarte für Investoreninhalte als Komponentenbeispiel

Das Ergebnis ist ein wiederverwendbares Figma-Boilerplate, mit dem weitere Kundenprojekte auf einer ausgearbeiteten Designbasis aufbauen können.

Brauchst du ein Designsystem, das Figma und Code auf eine gemeinsame Basis bringt?

Anrufen
Marco Schär von minddraft

Marco oder jemand aus dem Team meldet sich bei dir. An Werktagen innerhalb von 24 Stunden.