Only top-level frames count as screens
Frames nested deeper are rendered as part of their parent, not listed separately. Counting every nested frame would make the list unusable.
Figma import
Bring the frame across exactly as drawn
Positions, sizes, colours, and type are read straight out of the file and rebuilt at exact pixels. You get a preview and React with Tailwind.
Import0px drift
- position drift, 7 screens
- screens read per file
- property families carried
- tokens stored
- React and Tailwind
- preview has no outbound path
Measured across seven screens in a real browser, not estimated from the file.
What this is
The handoff where spacing usually dies.
A design gets handed over and then redrawn by eye. Padding shifts by a few pixels, a colour lands one shade off, and the result is close but never the file. Here the frame is read and its numbers are used directly, so the geometry does not get reinterpreted on the way across.
How to use it
Point, pick, take the code.
The token is used for one fetch and is not kept afterwards.
- Point at the file
Paste the Figma file URL and a personal access token. The token is used once, to fetch.
- Pick a screen
Top-level frames on each page are listed as screens. Choose the one you want.
- Take the code
Switch between pixel preview, React with Tailwind, and a summary. Copy the code into your project.
What was measured
How close it actually lands.
Fidelity was checked in a headless browser rather than argued about in a spec.
- 0px drift
Seven screens rendered with no positional difference from the source frame, measured 2026-07-18.
- 24 screens per file
That is how many top-level frames one import reads at a time.
- Six property families
Geometry, auto layout, text, solid and gradient fills, image fills, and shadows.
- React and Tailwind out
Exact pixels are emitted as arbitrary values, so nothing is rounded to the nearest utility step.
- Token not stored
The access token is used for the fetch and is never written down anywhere.
- Sealed preview
The rendered preview is loaded with no outbound network path of its own.
What it will not do
Where the fidelity ends.
Pixel accuracy is not the same as a finished component library.
Component instances and vectors are pending
Recognising a library component as a component, and carrying pen-drawn vector shapes, are the next layer.
Nothing is made responsive
You get the width it was drawn at. Deciding how it reflows on a phone is still your call.
No Figma account connection
You supply a personal token per import. A persistent account link is not built yet.
Next
Where to go from here
An imported screen becomes an ordinary project, so the gallery and MCP pages apply from there on.