From a Figma frame to a live website.
Import a Figma frame, define each layer, then publish it at a shareable address or export the project as code.
Three steps
Import
Source: the Figma plugin, or a connected Figma account. Images in the frame come with it.
Define
Des2Dev proposes an element type per layer, you confirm. Figma prototype links carry over.
Publish or export
Publish to des2.dev/s/your-slug/, or download the project in your chosen framework.
What the builder does
Pre-flight checks
15 checks on the selection, including: overlapping frames, masked text, unservable fonts, rotated nodes, gradient strokes, disabled variable libraries, breakpoint mismatches, unnamed layers. Click a finding to select that layer in Figma.
Non-destructive sync
A second sync is a merge: what Figma changed is updated, what you built in the builder is kept.
Export targets
Three choices per project: framework, styling, component library.
Framework
Styling
Component library
Styling options are filtered per framework.
Who it is for
| Role | What they get |
|---|---|
| Designer | A landing page or portfolio, live at a real address. |
| Company | A blog or company site: many pages, one address, one publish. |
| Developer | The design as a runnable project, in the framework, styling and component library the repo already uses. |
| Design system owner | Colours, spacing and type as tokens the repo reads, plus a drift command for CI. |
| Team on a UI library | Pick shadcn, set colours and radius once, and get the set in Figma and in the repo. |
Design system
One theme, synced both ways between Figma and the repo.
Figma to tokens
Out of Figma: Collections, Modes, colours, radii, type. Into a token set with light and dark, plus a drift command for CI.
Library to Figma
Pick shadcn, set colours, radius, font. Written into Figma as Variables and Components, and into the repo, at once.