Design-System-Import

Große Firmen legen genau fest, wie ihre Apps und Webseiten aussehen sollen. Welches Blau die Knöpfe haben, welche Schrift benutzt wird, wie viel Platz zwischen zwei Zeilen bleibt. Diese Sammlung von Regeln und fertigen Bausteinen nennt man Design-System. Ein Design-System-Import bedeutet, dass ein Programm diese Regeln einliest und ab sofort selbst befolgt. Danach muss niemand mehr per Hand nachschlagen, welcher Farbton der richtige ist. Der Begriff taucht vor allem dort auf, wo Software Oberflächen automatisch erzeugt – etwa in Werkzeugen, die aus einer Beschreibung in normaler Sprache eine fertige Seite bauen.

Warum Marken nicht auf Zuruf gestaltet werden

Ein einheitliches Erscheinungsbild ist für Unternehmen bares Geld wert. Kunden erkennen eine Marke an Farbe und Form, oft schneller als am Namen. Wenn eine App plötzlich in einem leicht anderen Blau erscheint, wirkt sie unseriös oder wie eine Fälschung. Deshalb gibt es in Konzernen ganze Abteilungen, die über solche Vorgaben wachen.

Ohne Import passiert Folgendes: Ein Programm erzeugt eine Seite, die technisch funktioniert, aber gestalterisch daneben liegt. Ein Mensch muss danach jede Farbe, jeden Abstand und jeden Knopf korrigieren. Diese Nacharbeit frisst genau die Zeit wieder auf, die die Automatisierung sparen sollte. Fachleute nennen das den letzten Meter, und er ist oft der teuerste.

Dazu kommt ein rechtlicher Punkt. Barrierefreiheit ist in der EU für viele Anbieter Pflicht, etwa ausreichender Kontrast zwischen Schrift und Hintergrund. Ein gepflegtes Design-System hat solche Anforderungen bereits eingebaut. Wer es importiert, erbt diese Prüfarbeit, statt sie jedes Mal neu zu leisten.

Von der Farbtabelle zum Baustein

Am Anfang stehen sogenannte Design-Token. Das sind schlicht benannte Werte, zum Beispiel der Eintrag „Primärfarbe“ mit dem Farbcode für ein bestimmtes Blau. Solche Token liegen meist als Textdatei vor, häufig im Format JSON, das Programme leicht lesen können. Der Import liest diese Liste ein und legt sie als verbindliche Vorgabe ab.

Die zweite Ebene sind Komponenten, also fertige Bausteine wie Knöpfe, Eingabefelder oder Warnhinweise. Sie werden nicht als Bild übernommen, sondern als Programmcode aus einer Bibliothek. Das Werkzeug erhält dabei auch die Information, wann welcher Baustein passt. Es soll also nicht nur wissen, wie ein Löschen-Knopf aussieht, sondern auch, dass er rot ist und eine Rückfrage auslöst.

Man kann sich das wie ein Kochbuch mit Vorratskammer vorstellen. Die Token sind die Zutaten mit fester Qualität, die Komponenten sind erprobte Grundrezepte. Ein häufiger Irrtum ist, der Import sei eine einmalige Sache. Tatsächlich ändern Firmen ihr Design-System regelmäßig, und veraltete Vorgaben führen wieder zu Abweichungen. Sinnvoll ist deshalb eine Anbindung, die Änderungen automatisch nachzieht.

Wo der Begriff in Produkten auftaucht

Am häufigsten liest man ihn bei Werkzeugen, die Oberflächen aus Textbeschreibungen erzeugen. Anbieter werben damit, dass man sein Design-System aus Figma oder einer Code-Bibliothek anschließen kann. Figma ist ein weit verbreitetes Programm, in dem Gestalterinnen und Gestalter Bildschirmseiten entwerfen. Der Import ist dort ein zentrales Verkaufsargument für Geschäftskunden.

Auch bei Baukästen für Webseiten und bei firmeninternen Entwicklungsumgebungen begegnet man dem Begriff. Für Anlegerinnen und Anleger ist er interessant, weil er erklärt, warum manche Anbieter deutlich höhere Preise verlangen können. Ein Werkzeug ohne Import erzeugt hübsche Entwürfe. Eines mit Import erzeugt Ergebnisse, die eine Konzern-Abteilung ohne Nacharbeit übernehmen darf.