Figma to Webflow handoff: what the design file should include

A designer finishes the Figma file, a developer opens it, and the questions start. Which grey is the real one? What happens to this three-column row on a phone? Every answer the file leaves out becomes a message or a guess, and guesses are where a build drifts from the design. Here is what we ask for first.

Which parts of the design should be components?

Anything that appears more than once: buttons, cards, navigation, footers, form fields and repeated sections. Webflow builds these as components too, with properties for the text, images and links that change per instance.

Variants need planning. A Figma component set can combine several variant properties, such as type, size and state, but a Webflow component has one variant property, and the official Figma to Webflow plugin doesn't bring variants across. Give each component one main variant axis, such as solid or outline, and use a boolean property for optional parts like an icon, which matches Webflow's switch properties.

Webflow styles interaction states on the class, so draw each one:

• Hover, remembering that most touch devices can't hover.
• Keyboard focus. Webflow's Focused (keyboard) state targets :focus-visible, and an outline shows it without shifting the layout.
• Disabled, for submit buttons while a form is sending.
• Placeholder and focus for form fields, and the current-page look for navigation links.

How should colours, type and spacing be defined?

Once, as named values, then reused everywhere. Webflow variables cover colour, size, percentage, number and font, and changing one updates every element linked to it, so set up the same values as named variables in Figma, not as one-off colours and sizes on the canvas.

• Colours as Figma colour variables. The plugin syncs variables into Webflow variables, while its Styles tab handles text and effect styles, not colour styles.
• Type as text styles, one per role: each heading level, body, small print and button labels. The plugin turns these into Webflow classes.
• Spacing as a short scale, such as 4, 8, 16, 24, 32 and 64 pixels, used for every auto layout padding and gap. Webflow size variables cover margin, padding and gaps.

If type or spacing shrinks on smaller screens, use variable modes in Figma. Webflow variable modes can apply automatically at the tablet and mobile breakpoints, so each style is linked once rather than restyled at every breakpoint.

Which screen sizes need a frame?

Desktop, tablet and mobile, at the widths Webflow uses. Webflow designs from a desktop base and adjusts at tablet (991px and below), mobile landscape (767px and below) and mobile portrait (479px and below). Larger breakpoints at 1280, 1440 and 1920px are optional, so say whether a wide frame should become one.

Two Webflow rules shape the mobile frame. Element order is shared by every breakpoint, so a different mobile order needs flexbox or grid ordering, and an element hidden at one breakpoint is still in the page's HTML. Mark any mobile frame that reorders or swaps content.

When a frame is missing, agree the rules in writing: which rows stack, what the navigation becomes and how images crop. Otherwise the developer decides.

What content should the design show?

Real content at real lengths, not lorem ipsum. The longest service name, a three-line heading and a card with no image all break layouts that look tidy with placeholder text, and are cheaper to fix in Figma.

Mark which pages are static and which are CMS templates. A Webflow Collection page is one template for every item in a Collection, so design it with the shortest and longest real entries, plus one long-form sample with headings, lists, a block quote and a captioned image, which is what a Rich text element holds.

How should interactions be documented?

With a short note per interaction, next to its frame. Webflow interactions start from a trigger, such as a click, hover, page load or scroll, and run actions with a duration and easing, so the note should cover each:

Element: FAQ item
Trigger: click on the question row
Action: answer opens, chevron turns
Timing: 250 ms, ease-out
Reduced motion: answer opens instantly

Webflow's guidance is to respect a visitor's reduced-motion setting by playing no animation or skipping to the end state, never to flash more than three times per second, and to let visitors pause moving content that starts on its own and runs over five seconds. Decide the fallback in the design.

What should the handoff checklist include?

Check these before sharing the file:

• Auto layout on every frame. It mirrors how the page is built, and the plugin only syncs layers that use it.
• Clear layer names. The plugin turns each layer name into a class, so see Client-First naming for names worth keeping.
• Icons and logos as SVG. Figma outlines SVG text by default, which keeps a wordmark intact.
• Photos large enough for high-density screens. Webflow creates smaller versions of inline JPG, PNG and WebP images, but not of background images or images in rich text, so export those at display size.
• Fonts as WOFF2 files with a web licence, uploaded to Webflow before any plugin sync.
• Finished frames marked Ready for dev, if your team uses Dev Mode, so later changes are flagged.

Where to start

Build one page in your head from the file: a button with its hover and focus, the same page on a phone, the longest real headline. Every guess is a question for the designer now, not the developer later. Our Webflow websites service reviews your Figma file first and flags anything that needs a decision, so send us the file when it's ready.