Startseite
Leistungen
Technology
Full-Stack-Entwicklung
Systemintegration
Open Source, Headless CMS
Künstliche Intelligenz
Martech
CRM & Customer Data Platform
Marketing-Automation
SEO, AEO & GEO
Paid Media & Advertising
Creative
UX-Design
UI-Design
Konzept & Visual
Design-System
E-Commerce
E-Commerce-Beratung
Shopify Headless
Magento / Adobe Commerce
Alle Leistungen →
Lösungen
Referenzen
Unternehmen
Über uns
Partner
Zertifizierungen
Karriere
Kontakt
IT
Kontakt
Design System
Design System: eine gemeinsame Sprache für Design und Entwicklung
01
Farben, Typografie, Abstände und Radien als gemeinsame Variablen in Figma und Code: Ein Wert ändert sich, und alles aktualisiert sich.
Design Tokens
Beratung anfragen
02
Buttons, Formulare, Cards, Tabellen, Modals und Navigation mit dokumentierten Varianten und Zuständen, bereit für jeden neuen Screen.
Komponenten
Beratung anfragen
03
Klare Richtlinien, wann und wie jedes Element eingesetzt wird, mit Beispielen und Code, damit Designer, Entwickler und Dienstleister gleich arbeiten.
Dokumentation
Beratung anfragen
So arbeiten wir
Wie wir ein Design System aufbauen, in 4 Phasen
01
Audit des Bestands
Bevor wir Neues schaffen, schaffen wir Ordnung.
Wir sammeln alle bestehenden Oberflächen, Websites, Apps, Business-Software, und erfassen Farben, Schriften, Buttons und Komponenten. Oft zeigen sich Dutzende Varianten desselben Elements.
Aus dieser Bestandsaufnahme sehen wir, was bleibt, was vereinheitlicht wird und wo das Design System am meisten spart.
02
Grundlagen und Tokens
Das Fundament für alles Weitere.
Wir definieren die Grundlagen: Farbpalette, Typografie-Skala, Abstände, Raster, Schatten und Icons. Daraus werden Design Tokens, die Variablen, die Figma mit dem Code verbinden.
Unterschiedliche Themes planen wir von Anfang an ein, etwa Hell und Dunkel oder mehrere Marken einer Gruppe.
03
Komponenten
Wiederverwendbare Bausteine, bereit für die Entwicklung.
Wir gestalten die Komponenten in Figma mit Varianten, Zuständen und Verhaltensregeln, beginnend mit den meistgenutzten. Jede Komponente erfüllt die Kriterien der Barrierefreiheit.
Enthalten
Figma-Bibliothek mit Varianten
Zustände Hover, Focus und Disabled
Patterns für Formulare und Tabellen
Barrierefreiheit nach WCAG 2.2
04
Dokumentation und Einführung
Ein Design System zählt nur, wenn das Team es nutzt.
Wir schreiben die Dokumentation, schulen Designer und Entwickler und begleiten das Team in den ersten Projekten. Danach entwickeln wir das System mit dem Produkt weiter.
Enthalten
Online-Dokumentation
Schulung des Teams
Abgleich von Figma und Code
Pflege und Versionierung
Ein Design System, das auch an die Entwicklung denkt
Efesti vereint Design und Entwicklung in einem Team: Die Komponenten, die wir in Figma gestalten, sind dieselben, die wir im Code bauen, so laufen Design System und Produkt nie auseinander.
Sprechen wir darüber
Sprechen wir darüber
Full-Stack-Entwicklung
CRM & Customer Data Platform
UX-Design
Systemintegration
Erzählen Sie uns von Ihrem nächsten Projekt
Schildern Sie uns Ihre Herausforderung: Sie erhalten eine konkrete Einschätzung, kein Standardangebot.
Vor- und Nachname *
Geschäftliche E-Mail *
Unternehmen
Telefon
Erzählen Sie uns von Ihrem Projekt
Ich habe die Datenschutzerklärung gelesen und stimme der Verarbeitung meiner Daten zu *
Vielen Dank! Wir haben Ihre Anfrage erhalten und melden uns in Kürze bei Ihnen.
Beim Senden ist ein Fehler aufgetreten. Bitte versuchen Sie es in einigen Augenblicken erneut.