Turn a Figma design into a real screen

What you need first

You need the file and a read-only token from your own Figma account.

• A Figma file you can open.
• A personal read token from your Figma account settings.
• Frames placed directly on the page, not buried inside other frames.

01 · Tidy the file first

Only frames sitting directly on the page are read, up to 24 of them. Anything nested inside another frame is drawn as part of its parent. Pulling the screens you want out to the top level takes a minute and saves a lot of confusion.

02 · Get a read token

Make a personal access token in your Figma settings with read access. It is used to fetch the file and is not kept afterwards. Do not reuse a token that has write access to things you care about.

03 · Import

Paste the file link and the token on the Figma screen. Files up to 25MB are read, with up to 2MB of image data. Bigger files usually mean unused pages worth deleting first.

04 · Check what came over

Six things are carried across, and the positions are written out as exact pixels rather than rounded to the nearest step.

• Position and size
• Auto layout
• Text
• Solid colours and gradients
• Images
• Shadows

05 · Make it responsive yourself

The import gives you the width you drew. How it folds on a phone is a decision, not something that can be read out of a design file — so ask for it: “make this stack on mobile”.

If you get stuck

Half my screens are missing. They are probably nested inside another frame, or beyond the 24 read from the page. Move the ones you need to the top level and import again.

My components came through as flat shapes. Component instances and vector shapes are not yet recognised as such. They arrive looking right but not reusable.

It looks wrong on a phone. Expected. Nothing in a fixed-width design says what should happen at 390 pixels. Ask for the mobile behaviour once the desktop layout is right.