Contents
Connect

Bringing a Figma design across

A frame you drew comes across with its positions, sizes, colours and text.

Import runs with your own read-only Figma token. The proper Figma connect flow is not switched on yet.

What it is for

If a designer already drew the screen, describing it again in words loses the drawing. Spacing and size are the first things to disappear.

The frame comes across as a brief and as editable code, so the builder starts from your layout.

What you need

The file address or file key, and a personal Figma token with read access.

Nothing is written back to Figma, so a read-only token is enough. Make it in Figma settings and delete it when you are done.

The order to do it in

Tidy the frame in Figma first — name the layers, use auto layout where you can.

Bring one screen at a time. Handing over a whole file blurs what you are asking for.

Then import, then ask for the behaviour in words. The drawing gives shape; the sentence gives function.

How to check it worked

Compare the imported screen with the frame side by side at the same width, then look at it again at phone width.

Text, spacing, corner radius, colours, gradients and shadows are carried over as measured values.

What it will not do

  • A file is read up to 25MB, and images up to 2MB in total.
  • Component instances, vector shapes and constraints are not fully covered yet.
  • A drawing has no behaviour. Buttons do nothing until you say what they do.
  • Font files do not travel. If you used an unusual typeface, say so.

Read next