←  Alle Begriffe
F
Design Systems

Figma

Figma ist eine kollaborative Plattform für Interface-Design, Prototyping, Designsysteme und die Übergabe an Entwicklungsteams.

Figma ist eine kollaborative Plattform für Interface-Design, Prototyping, Designsysteme und die Übergabe an Entwicklungsteams. Der Nutzen entsteht durch verbindliche Tokens, zugängliche Komponenten, verständliche Dokumentation und konsequente Pflege. Eng verbunden ist der Begriff mit Design System und Design Token.

Weiterlesen

Design System

Design Token

Wireframe

FAQ

Figma

Wie unterstützt Figma barrierefreies Design?
Figma kann Barrierefreiheit früh absichern, ersetzt aber keinen Test im Browser. Im Entwurf lassen sich Kontraste planen, Fokuszustände gestalten und Textgrößen festlegen. Ob Screenreader, Tastaturbedienung und semantisches HTML funktionieren, zeigt sich erst in der Umsetzung. Der Entwurf sollte diese Anforderungen dokumentieren, damit sie nicht verloren gehen.
Welche typischen Fehler entstehen bei der Übergabe aus Figma?
Häufig fehlen Zustände wie Hover, Fokus, Fehler oder leere Listen, weil nur der Idealfall gestaltet wurde. Dazu kommen Abstände ohne System, unbenannte Ebenen und Komponenten, die im Code nicht existieren. Ein Entwurf ohne dokumentiertes Verhalten für kleine Bildschirme erzeugt Rückfragen. Vollständige Zustände und benannte Tokens verkürzen die Abstimmung.
Wann lohnt sich Figma für ein Designsystem?
Es lohnt sich, sobald mehrere Personen oder Teams dieselben Komponenten nutzen und Änderungen zentral verteilt werden sollen. Geteilte Bibliotheken, Variablen und Varianten halten Entwürfe konsistent. Bei einer kleinen Website mit einer Designerin oder einem Designer übersteigt der Pflegeaufwand einer Bibliothek oft den Nutzen. Entscheidend ist, wer die Bibliothek verantwortet.
Wo endet Figma und wo beginnt die Umsetzung im Code?
Die Grenze verläuft beim Entwurf: Figma liefert Spezifikation und Prototyp, aber keine produktive Website. Die Umsetzung in Webflow, React oder Next.js übersetzt Layouts, Tokens und Komponenten in Code oder Designer-Strukturen. Der Übergang gelingt am besten, wenn beide Seiten dieselben Namen, Abstände und Komponentenlogik verwenden, statt Screens nur visuell nachzubauen.