Brauchst du noch Figma-Designs vor der Entwicklung?

Die Designphase war unstrittig: Man konnte keine Website bauen, ohne vorher festzulegen, wie sie aussieht, und die Entscheidung auf der Leinwand war günstiger als die Entscheidung im Code. Beide Hälften stehen inzwischen unter Druck — Werkzeuge erzeugen funktionierende Oberflächen direkt, und Figma selbst löst die Grenze zwischen Designdatei und Code auf. Hier ist, wo das Mockup sein Geld noch verdient, und wo es eine Budgetposition ist, die du ehrlich streichen kannst.

Wozu die Designdatei tatsächlich dient

Eine Figma-Datei ist kein Bild der Website. Sie ist ein Entscheidungsdokument — der Ort, an dem Layout, Hierarchie, Abstände, Zustände, responsives Verhalten und Randfälle geklärt werden, solange Umdenken noch fast kostenlos ist. Das visuelle Ergebnis ist ein Nebeneffekt dieses Prozesses, weshalb „wir sehen es, wenn es gebaut ist“ meist mehr kostet als es spart.

Die Rechnung ist einfach und hält der Praxis stand: Einen Abschnitt auf der Leinwand zu verschieben, dauert Minuten; im gebauten Code dauert es Stunden und kann Tests invalidieren. Die Designphase existiert, um die teuren Änderungen im günstigen Teil des Projekts zu bündeln.

Was sich 2026 wirklich geändert hat

Auf der Config 2026 im Juni brachte Figma Motion mit Animationsexport im Dev Mode, erweiterte den Design-Agenten auf der Leinwand um MCP-Konnektoren und zeigte Code-Layer direkt in der Designdatei. Zusammen mit dem Dev-Mode-MCP-Server, der Designkontext direkt in die KI-Werkzeuge der Entwickler gibt statt eines Screenshots, ist der Handoff messbar verlustärmer als vor zwei Jahren.

Praktisch heißt das: Die Datei hört auf, ein einseitiges Lieferergebnis zu sein, und wird eine gemeinsame Referenz, die aktuell bleibt. Animations-Spezifikationen gehen nicht mehr in einem Slack-Thread verloren; eine Token-Änderung im Designsystem braucht kein Übersetzungsmeeting. Das macht die Designphase günstiger — nicht überflüssig.

Wann du die Mockups wirklich überspringen kannst

Kleiner, gut verstandener Umfang mit etabliertem Muster: eine einzelne Landingpage nach einem Layout, das sich bereits bewährt hat; eine Seite aus einem vorhandenen Designsystem; ein Template-Bau, bei dem die Designentscheidungen mit der Template-Wahl gefallen sind. In all diesen Fällen dupliziert Design zuerst Arbeit, die schon jemand geleistet hat.

Ebenso: interne Werkzeuge, Prototypen und alles, was du wegwerfen willst. Ist das Publikum drei Kollegen und die Lebensdauer ein Quartal, bau es und iterier. Für ein poliertes Design eines Wegwerfprodukts zu zahlen, ist die eigentliche Verschwendung.

Wann Überspringen mehr kostet als es spart

Mehrere Seiten, die sich wie eine Website anfühlen müssen. Alles mit Abstimmungskette — zwei Entscheider mit unterschiedlichen Meinungen finden diese irgendwann, und sie auf der Leinwand zu finden ist deutlich günstiger als im Staging. Individuelle Oberflächen ohne offensichtlichen Präzedenzfall: Konfiguratoren, Dashboards, mehrstufige Strecken, alles, wo Interaktionszustände die Screens übersteigen.

Und jedes Projekt, in dem die Website der kommerzielle Hauptkanal ist. Bestimmt das Layout den Umsatz, verdient es eine Runde bewusstes Nachdenken, bevor es ein Bau wird — dafür gibt es eine kostenlose UX-Analyse oder ein umrissenes Landingpage-Design.

Der Mittelweg, den wir meist empfehlen

Gestalte die zwei oder drei schwierigsten Screens richtig, definier das System darunter — Typo-Skala, Abstände, Farbe, Komponentenzustände, Breakpoints — und bau den Rest direkt daraus. Du bekommst den Nutzen entschiedenen Designs, ohne jede Seite zeichnen zu lassen, und der Entwickler rät nie, wie ein Hover-Zustand oder eine Fehlermeldung aussehen soll.

Genau das lässt KI-gestütztes Bauen auch funktionieren. Mit echten Tokens und zwei Referenz-Screens ist generierter Output kohärent; mit einem Prompt und ohne System entstehen plausible Screens, die nicht zur selben Website gehören. Das Designsystem ist die Beschränkung, die Geschwindigkeit sicher macht.

Was du deine Agentur fragen solltest

Frag, was nach dem Launch mit der Designdatei passiert — wird sie aufgegeben, hast du ein Lieferergebnis statt eines Systems bezahlt. Frag, ob das Design Zustände und Breakpoints definiert oder nur Desktop-Screens, denn alles Fehlende wird zur Vermutung eines Entwicklers. Und frag, was du streichen kannst: Ein kompetentes Team sollte dir sagen können, welche Teile der Designphase dein Projekt nicht braucht.

Das Design muss die Übersetzung überstehen

Wenn die Website jemals in mehr als einer Sprache erscheint, ist das Mockup, das du freigibst, nicht das Design — es ist die kürzeste von drei Fassungen. Die Empfehlung des W3C, die IBM-Zahlen zitiert, lautet: Eine Zeichenkette von höchstens zehn Zeichen kann sich in der Übersetzung um 200–300 % ausdehnen, einer von elf bis zwanzig Zeichen um 180–200 %. Nur lange Passagen bleiben moderat und landen bei rund 130 %. Deutsch ist dabei meist der Übeltäter: Aus „views“ wird „-mal angesehen“, gut das 2,8-Fache.

Das ist eine Designvorgabe und kein Übersetzungsproblem, und sie trifft genau dort am härtesten, wo Layouts am engsten sind — Navigationspunkte, Button-Beschriftungen, Tabs, Kartenüberschriften, Tabellenspalten. Ein Label, das im englischen Artboard auf den Pixel passt, bricht in einer anderen Sprache um, wird abgeschnitten oder schiebt seinen Nachbarn aus der Flucht — und zwar erst, wenn die Templates schon gebaut sind. Die günstige Variante: die engsten Komponenten mit der längsten Sprache im Kasten anlegen oder wenigstens die drei längsten Strings vor der Freigabe einsetzen. Die teure Variante: Es am Launch-Tag des zweiten Marktes zu merken.

Quellen

Die oben genannten Werkzeugänderungen und die Zahlen zur Textausdehnung bei Übersetzungen, geprüft im August 2026.

• Figma — Config 2026 recap ↗

  Launch im Juni 2026: Figma Motion mit Animationsexport im Dev Mode, erweiterter Design-Agent auf der Leinwand mit MCP-Konnektoren, und Code-Layer als Vorschau auf der Leinwand.

• Figma — Introducing our Dev Mode MCP server ↗

  Gibt strukturierten Designkontext — Variablen, Komponenten, Layout — direkt in KI-Coding-Werkzeuge, statt über Screenshots.

• Nielsen Norman Group — Design Systems 101 ↗

  Der Unterschied zwischen Komponentenbibliothek, Styleguide und Design System, und warum die geteilte, dokumentierte Single Source of Truth das ist, was Nacharbeit bei der Übergabe tatsächlich beseitigt.

• W3C WAI — Understanding Success Criterion 1.4.3: Contrast (Minimum) ↗

  Die Verhältnisse 4,5:1 und 3:1, die eine Designdatei erfüllen muss, bevor die Entwicklung startet — mit das Billigste, was sich in Figma prüfen lässt, und mit das Teuerste, was sich später im Code nachrüsten lässt.

• W3C Internationalization — Text size in translation ↗

  Zitierte IBM-Richtlinie: Quelltexte bis 10 Zeichen können sich bei der Übersetzung um 200–300 % ausdehnen, 11–20 Zeichen um 180–200 %, während Passagen über 70 Zeichen bei rund 130 % landen.