Positions held in the frames we tested
Seven frames were imported in a headless browser and compared with the source. The difference in position was zero pixels.
Design
Make the layout something people can click
A mockup is a picture. Nothing happens when you press it, and handing it over is where the spacing goes wrong. Bring the frame in, get a real page out, and keep editing it in words.
Measured on import0px drift
- position drift in 7 frames
- designs to start from
- credits to start from one
- contrast floor we hold
- checks before publishing
- sideways scroll on phones
Seven frames were imported and compared against the original positions. The deeper Figma features are listed below as not done.
The situation
The handoff is where the design changes.
You spaced it carefully, and what ships is close but not the same. Then every correction is a conversation. The alternative most designers reach for is learning enough code to fix it themselves, which is a long detour for a 4px gap. Here the frame comes across with its positions intact, and the corrections you make afterwards are sentences.
How it goes
Bring it in, or start from a finished one.
Two routes in. Both end with a page you can send a link to.
- Import the frame
Geometry, auto layout, text, colours, gradients, images, and shadows come across as real positions rather than a flat picture.
- Or start from a portfolio
336 finished designs are already there. Every one has a running demo, and starting from one costs no credits.
- Correct it in words
"Tighten the gap under the heading." Text and style edits like that do not spend credits, so trying three versions is cheap.
Start from one of these
Three built for showing work.
Each one has a live demo. Starting from one costs no credits.
- Designer Portfolio
Case studies with room to explain the thinking, not just the final image.
- UX/UI Designer
Process-led. Problem, exploration, outcome — the shape a hiring manager reads.
- Photo Gallery
Images lead and the layout gets out of the way. Also the fastest one to fill.
All 336 have a running demo. Open one before you copy it.
Straight answers
What we measured, and what we did not.
The import is good at some things and not yet at others. Both are listed.
Contrast is held at 4.5:1
Every design in the gallery is checked against that floor before it ships, and the check runs again on what you build. Pale grey on white does not get through.
Component instances are not resolved yet
Instances, vector shapes, and constraints are the next layer of the importer. Complex frames using those will come across simplified.
We did not measure your file
Seven frames is what we tested. A dense production file with hundreds of layers is not something we have a number for.
Start
Bring one frame across.
Try it with a single screen first and see how close it lands.