Entwickler-Übergabe
Code-Export & Dev Mode
Klicken Sie auf ein beliebiges Element und kopieren Sie fertigen Code in sieben Formaten — CSS, React, Tailwind, SwiftUI, UIKit, Jetpack Compose und Android XML — direkt aus dem Design, das Ihr Team ohnehin bearbeitet.
- Sieben Codeformate, einen Klick entfernt in Dev Mode
- Exakte Abstände, Farben und Typografie an jedem Element inspizieren
- PNG, JPEG, SVG und PDF exportieren — Batch-ZIP inklusive
Jede Übergabe-Oberfläche an einem Ort
- CSS
- React
- Tailwind
- SwiftUI
- UIKit
- Jetpack Compose
- Android XML
- Abstände & Typografie inspizieren
- Variablen mit Modi
- Ready-for-Dev-Anmerkungen
- PNG- / JPEG- / SVG- / PDF-Export
- Batch-ZIP-Export
- 7
- Codeformate in Dev Mode: CSS, React, Tailwind, SwiftUI, UIKit, Compose, Android XML
- 4
- Asset-Formate aus dem Editor: PNG, JPEG, SVG und PDF
- 0
- Redlines oder Spezifikationsdokumente zu schreiben — das Design selbst ist die Spezifikation
- $12
- pro Bearbeiter-Sitzplatz bei Professional schaltet Dev Mode für das ganze Team frei
Eine Übergabe-Woche mit Dev Mode
Montag — das Design kommt an
Eine Designerin markiert fertige Frames als Ready-for-Dev. Es wird kein separates Spezifikationsdokument geschrieben, denn die Datei selbst wird gleich zur Spezifikation.
Dienstag — die Entwickler inspizieren
Entwickler öffnen Dev Mode, klicken sich durch Elemente und lesen exakte Abstände, Textstile und Variablenwerte. Niemand misst einen Screenshot mit dem Lineal.
Wochenmitte — der Code fließt
Jede Komponente wird im Format des Teams herauskopiert: Tailwind für die Web-App, SwiftUI und Compose für das Mobile-Duo — alle aus demselben Design generiert.
Freitag — Assets und Automatisierung
Icons und Bilder exportieren als SVG und PNG in einem Batch-ZIP. Das Kommandozeilen-Tool deckt skriptgesteuerte Exporte ab, und MCP lässt KI-Agenten Code aus derselben Datei generieren.
Das Design ist die Spezifikation
Die klassische Übergabe ist eine verlustbehaftete Übersetzung: Eine Designerin drückt Absicht in Screenshots flach, ein Entwickler rekonstruiert aus den Screenshots Zahlen, und jeder Schritt fügt eine Fehlerspanne hinzu. Tuvi generiert Code aus dem Design selbst — dieselben Paddings, Farben, Textstile und Variablen, die die Designerin festgelegt hat — sodass das Engineering Daten erhält, keine Interpretation. Auto-Layout-Frames kommen als das Flexbox an, wie sie sich ohnehin verhalten; Variablen mit Modi bleiben Design-Tokens, statt in fest verdrahtete Werte zusammenzufallen.
Die ehrliche Einordnung: Generierter Code ist ein getreuer Ausgangspunkt, kein fertiges Feature. Er beseitigt die Übertragungsarbeit — das Messen, das Abtippen, das Hin und Her von „sind das 12 oder 16“ — und überlässt den Entwicklern das eigentliche Engineering: State, Verhalten und Konventionen zu verdrahten. Genau diese Aufteilung ist der Grund, warum Teams ihm vertrauen.
Eine Übergabe, die über den Editor hinaus skaliert
Dev Mode ist die interaktive Oberfläche, aber die Übergabe endet nicht beim Mausklick: Ein Kommandozeilen-Tool exportiert Renderings für Dokumentation und CI, und die MCP-Integration lässt einen KI-Coding-Assistenten echten Code aus dem echten Design anfordern — sodass ein Agent, der einen Screen umsetzt, aus derselben verlässlichen Quelle arbeitet, die Ihre Designer bearbeiten.
Um den Code herum liegt der Workflow: Ready-for-Dev-Anmerkungen markieren Stabilität, Kommentare tragen den Kontext, den Zahlen nicht können, und der Versionsverlauf beantwortet „Was hat sich geändert, seit ich das gebaut habe“. Die Übergabe hört auf, ein wöchentliches Meeting zu sein, und wird zu einer Eigenschaft der Datei.
Häufig gestellte Fragen
Ist der generierte Code produktionsreif?
Er ist getreu: echte Paddings, Farben, Textstile und Variablen, mit Auto-Layout als Flexbox ausgedrückt. Sie integrieren ihn dennoch in Ihre Komponenten, Ihre Benennung und Ihr State-Management — Dev Mode nimmt die Übertragungsarbeit ab, nicht das Engineering.
Welche Pläne enthalten Dev Mode?
Dev Mode und Codegenerierung sind bei Professional und Organization dabei. Der Asset-Export — PNG, JPEG, SVG, PDF und Batch-ZIP — ist aus dem Editor in jedem Plan verfügbar.
Brauchen Entwickler Erfahrung mit Design-Tools, um es zu nutzen?
Nein. Ein Entwickler öffnet die geteilte Datei im Browser, klickt auf das Element, das er baut, und liest exakte Werte oder kopiert Code in seinem Format. Keine zusätzliche Software, keine Figma-Lizenz — und das Ansehen von Designs ist in jedem Plan kostenlos.
Können KI-Tools die Codegenerierung steuern?
Ja. Über MCP kann ein KI-Assistent die Struktur des Designs und die Eigenschaften der Elemente lesen, Code aus jedem Element generieren und ein Vorschau-PNG rendern, um seine Arbeit zu prüfen — alles aus derselben Datei, die Ihr Team bearbeitet.
Wie signalisieren Designer, was baubereit ist?
Mit Ready-for-Dev-Anmerkungen an Frames, gestützt von Kommentaren im Kontext. Entwickler sehen einen ausdrücklichen Vertrag pro Frame, statt zu raten, welche Teile einer in Arbeit befindlichen Datei stabil sind.