Design to Code: die Tools, die Kompromisse und eine Abkürzung

1. Konverter

Plugins, die eine Designdatei lesen und HTML, CSS oder Framework-Code exportieren. Anima macht aus Figma-Frames HTML, React oder Tailwind, und in der Figma Community gibt es mehrere Plugins für Figma zu HTML.

• Stärke: schnell, ein Klick.
• Grenze: Der Output folgt der Zeichnung, nicht deiner Codebase, und wird deshalb oft neu geschrieben.

2. KI-Codegeneratoren

Tools, die ein Design, einen Screenshot oder einen Prompt lesen und Komponenten schreiben. Figma Make generiert aus Frames HTML, CSS und JavaScript. Builder.io macht aus Designs Code, der deine eigenen Komponenten, Tokens und dein Designsystem nutzt.

• Stärke: Code, der zu deinem Stack passt.
• Grenze: Design und Code laufen nach der ersten Generierung trotzdem auseinander.

3. Canvases aus Code

Der neueste Ansatz streicht die Konvertierung. Der Canvas selbst ist HTML und CSS, es gibt also keine Lücke zu überbrücken. Paper und Kalka funktionieren so, und Penpot kommt nah heran, weil es für seine Layouts CSS Flex und Grid nutzt.

• Stärke: Was du designst, geht so live, nichts geht verloren.
• Grenze: Du designst nach den Regeln des Webs. Genau das ist der Sinn, aber es ist eine Umstellung.

So wählst du

• App mit einer Komponentenbibliothek in React oder Vue: ein KI-Generator, der deine Komponenten kennt.
• Schnelle statische Seite aus einer bestehenden Figma-Datei: ein Konverter.
• Websites, die du oft designst und auslieferst: ein Canvas aus Code, damit der Schritt von Design zu Code ganz wegfällt.

Kalka ist unsere Antwort auf die dritte Familie: Figmas Interface, echtes HTML darunter, Open Source und lokal. Es ist in Entwicklung.