Developer hand-off
Code export & Dev Mode
Click any element and copy ready-to-use code in seven formats — CSS, React, Tailwind, SwiftUI, UIKit, Jetpack Compose and Android XML — straight from the design your team already edits.
- Seven code formats, one click away in Dev Mode
- Inspect exact spacing, colors and typography on any element
- Export PNG, JPEG, SVG and PDF — batch ZIP included
Every hand-off surface in one place
- CSS
- React
- Tailwind
- SwiftUI
- UIKit
- Jetpack Compose
- Android XML
- Spacing & typography inspect
- Variables with modes
- Ready-for-Dev annotations
- PNG / JPEG / SVG / PDF export
- Batch ZIP export
- 7
- code formats in Dev Mode: CSS, React, Tailwind, SwiftUI, UIKit, Compose, Android XML
- 4
- asset formats out of the editor: PNG, JPEG, SVG and PDF
- 0
- redlines or spec documents to write — the design itself is the spec
- $12
- per editor seat on Professional unlocks Dev Mode for the whole team
A hand-off week with Dev Mode
Monday — design lands
A designer marks finished frames Ready-for-Dev. No separate spec document gets written, because the file itself is about to become the spec.
Tuesday — engineers inspect
Developers open Dev Mode, click through elements and read exact spacing, type styles and variable values. Nobody measures a screenshot with a ruler.
Midweek — code flows
Each component is copied out in the team's format: Tailwind for the web app, SwiftUI and Compose for the mobile pair — all generated from the same design.
Friday — assets and automation
Icons and images export as SVG and PNG in one batch ZIP. The command-line tool covers scripted exports, and MCP lets AI agents generate code from the same file.
The design is the spec
Traditional hand-off is a lossy translation: a designer flattens intent into screenshots, a developer reverse-engineers the screenshots into numbers, and every step adds an error bar. Tuvi generates code from the design itself — the same paddings, colors, type styles and variables the designer set — so what engineering receives is data, not interpretation. Auto-layout frames come across as the flexbox they already behave like; variables with modes stay design tokens instead of collapsing into hardcoded values.
The honest framing: generated code is a faithful starting point, not a finished feature. It eliminates the transcription work — the measuring, the retyping, the 'is this 12 or 16' back-and-forth — and leaves engineers the actual engineering: wiring state, behavior and conventions. That division is exactly why teams trust it.
Hand-off that scales past the editor
Dev Mode is the interactive surface, but hand-off does not stop at a mouse click: a command-line tool exports renders for docs and CI, and the MCP integration lets an AI coding assistant request real code from the real design — so an agent implementing a screen works from the same source of truth your designers edit.
Around the code sits the workflow: Ready-for-Dev annotations mark stability, comments carry the context that numbers cannot, and version history answers 'what changed since I built this'. Hand-off stops being a weekly meeting and becomes a property of the file.
Frequently asked questions
Is the generated code production-ready?
It is faithful: real paddings, colors, type styles and variables, with auto-layout expressed as flexbox. You still integrate it into your components, naming and state management — Dev Mode removes the transcription work, not the engineering.
Which plans include Dev Mode?
Dev Mode and code generation ship with Professional and Organization. Asset export — PNG, JPEG, SVG, PDF and batch ZIP — is available from the editor on every plan.
Do developers need design-tool experience to use it?
No. A developer opens the shared file in the browser, clicks the element they are building and reads exact values or copies code in their format. No extra software, no Figma license — and viewing designs is free on every plan.
Can AI tools drive code generation?
Yes. Through MCP, an AI assistant can read the design's structure and element properties, generate code from any element and render a preview PNG to check its work — all from the same file your team edits.
How do designers signal what is ready to build?
With Ready-for-Dev annotations on frames, backed by in-context comments. Engineers see an explicit, per-frame contract instead of guessing which parts of a work-in-progress file are stable.