Figma to Webflow Handoff: Layers, Breakpoints and Assets

A Figma to Webflow handoff syncs cleanly when the file gives the developer six things:

• Auto layout. Every section is a frame with auto layout applied, not a free-positioned group.
• Layer names and tags. Layer names are written as the class names you want, in one casing convention, with an HTML tag named for every text layer.
• Usable variable types. A variable collection whose types Webflow can receive, covering colour, spacing and type scale.
• Stated stacking behaviour. A named breakpoint for every horizontal row that has to stack.
• Exports inside Webflow's limits. Images under 4MB each, with filenames of 100 characters or fewer.
• Fonts already in Webflow. Custom fonts uploaded to the Webflow site before the first sync runs.

Webflow is blunt about the first item in its own plugin documentation: "Layers must have 'auto layout' applied in order to sync" (Webflow Help Center, Figma to Webflow plugin and app). In the agency builds I take over, a file that arrives without auto layout costs more rebuild hours than any other single problem, and it is the cheapest one to fix before the handoff rather than after.

What does a Webflow developer actually need from a Figma file?

A Webflow developer needs three structural properties from a Figma file: auto layout on every section frame, layer names written as the CSS class names the build should use, and design tokens held as colour and number variables. Everything else in the file is a picture of the result rather than a description of it. Webflow's Figma to Webflow plugin converts every Figma layer name into a Webflow class, so a layer still called "Frame 427" arrives in Webflow as a class called "Frame 427". The same plugin assigns HTML tags from layer names automatically: a layer named "button" becomes an anchor tag, layers named "description", "text" or "paragraph" become a paragraph tag, and a layer named "heading" becomes an H1 (Webflow Help Center). Tags can also be set manually in the plugin modal, and the supported set is H1 to H6, Div and P for text elements, plus H1 to H6, Div, Section and Link for auto layout elements. On the projects I lead, naming is the first pass I run on an incoming file, because a rename in Figma costs seconds and the same rename in Webflow costs a class cleanup across every breakpoint. A file that arrives with tagged, named, auto-layout frames can be synced section by section; a file of flattened frames is a visual reference that happens to be in Figma. Three further parts of a handoff never travel through the plugin at all and have to be handed over as written notes instead: interaction and hover state behaviour, motion timing and easing, and the final copy that replaces placeholder text.

Do Figma layers need auto layout to sync to Webflow?

Figma layers must have auto layout applied before Webflow will sync them, and the copy and paste route carries the same requirement. Webflow's plugin documentation states that layers must have auto layout applied in order to sync, adding that auto layout "guarantees the best translation possible when copying from Figma to Webflow" (Webflow Help Center). Webflow points designers at Figma's suggest auto layout feature to add it in bulk (Figma Learn, Toggle on auto layout in designs). There is a second limit almost nobody mentions in the handoff conversation: Webflow documents that you cannot set responsiveness on a layer whose width is under 250px or that is already stacked vertically, which means small horizontal clusters like icon plus label pairs need their stacking decided by hand. When I audit a Figma file for an agency before quoting, I count frames without auto layout first, because that count predicts the rebuild estimate better than page count does.

Which Figma variable types have a Webflow equivalent?

Figma's colour and number variables have direct Webflow equivalents, Figma's string variables have one only in the font family case, and Figma's boolean, timing and easing variables have none. Figma documents six variable types, stating plainly "There are six types of variables": Color, Number, String, Boolean, Timing and Easing (Figma Learn, Overview of variables, collections, and modes). Webflow's Variables documentation names Color, Size, Percentage, Number and Font (Webflow Help Center, Variables). The table below maps the two published lists to each other. Webflow does not document what the plugin does at runtime with a type that has no Webflow home, so the practical rule I use is to leave those four types deselected at import and treat their values as written specs, which also avoids the static-value substitution described below. The plugin syncs only "one collection and mode at a time", so a multi-mode theme needs one pass per mode.

Figma variable types mapped to Webflow variable types. Sources: Figma Learn, Overview of variables, collections, and modes and Webflow Help Center, Variables.

Figma variable type	What Figma stores in it	Nearest Webflow variable type	What that means for the build
Color	Solid fill values such as #FFCD29	Color	Direct match. Fills, strokes, gradient stops and shadow colours all carry over.
Number, used for spacing and dimensions	Padding, gap, corner radius, width and height	Size or Percentage	Carries over, but you pick the unit. Plugin settings offer px, em or rem plus a base font size.
Number, used for weight, opacity or z-index	Font weight, layer opacity, counts	Number	Carries over. Webflow restricts font weight to positive integers between 1 and 1000.
String, holding a font family name	Font family, font style and weight names	Font	Only the font family case has a home. Upload the font to Webflow first or it is lost on sync.
String, holding UI copy or localised text	Text content, localisation strings	None in Webflow's published list	No Webflow variable type stores text content. Plan to manage copy in the CMS instead.
Boolean	True and false values for layer visibility	None in Webflow's published list	No Webflow equivalent. Visibility becomes a display style set per breakpoint.
Timing	Animation duration in milliseconds, Figma Motion	None in Webflow's published list	No Webflow equivalent. Motion timings travel as written specs, not as tokens.
Easing	Easing curves and spring animations, Figma Motion	None in Webflow's published list	No Webflow equivalent. Curves need restating inside Webflow interactions.

Two scale numbers are worth knowing before anyone proposes moving a whole design system across in one afternoon. Figma allows up to 5,000 variables per collection (Figma Learn), while the Webflow plugin imports one collection and one mode per sync (Webflow Help Center). Webflow also documents that deselecting a variable at import replaces it with a static value, which is how a "synced" design system quietly turns into hardcoded hex codes.

How do Figma frames map to Webflow breakpoints?

Figma frames map onto seven fixed Webflow breakpoint views, not onto whatever artboard widths the file happens to use: 1920px and above, 1440px and above, 1280px and above, Desktop as the base that "applies to all devices unless overridden at other breakpoints", Tablet at 991px and below, Mobile landscape at 767px and below, and Mobile portrait at 479px and below (Webflow Help Center, Breakpoints overview). Styles cascade in both directions from the desktop base: down through tablet and the two mobile views, and up through 1280px, 1440px and 1920px. One decision is irreversible and worth raising in the handoff meeting rather than mid-build: Webflow states that once a larger breakpoint is added, "it can't be removed from your site".

Webflow's seven breakpoint views, as stated in two different Webflow documents. Sources: Webflow Help Center, Breakpoints overview and Webflow Help Center, Figma to Webflow plugin and app.

Webflow breakpoint	Range in the Breakpoints doc	Range in the Figma plugin doc	What the Figma file should specify
1920px	1920px and above	Not offered as a stacking option	Only if the site enables it, since it cannot be removed later.
1440px	1440px and above	Not offered as a stacking option	Max-width behaviour for the container, not a separate layout.
1280px	1280px and above	Not offered as a stacking option	Whether the grid gains columns or only gains gutter.
Desktop (base)	All devices unless overridden	The default state of a synced layer	The canonical frame every other view is a deviation from.
Tablet	991px and below	991px to 767px	Which horizontal rows stack, and in what order.
Mobile landscape	767px and below	767px to 478px	Whether anything stacks here that did not stack at tablet.
Mobile portrait	479px and below	478px to 0px	Type scale and tap target sizes, not a new layout.

Notice the mismatch in the last two rows. Webflow's Breakpoints overview says mobile portrait "applies to screens 479px wide and below", while the Figma to Webflow plugin page describes the same breakpoint as "478px to 0px". Both are Webflow's own documentation and they disagree by one pixel. It changes nothing at 375px or 430px, which is where real phones sit, but I flag it in handoff notes because a designer who builds a 479px artboard expecting it to be the mobile portrait boundary is reading one doc while the developer reads the other. The rule I apply on client projects is to design mobile at 375px and let the breakpoint boundary stay an implementation detail.

How should images and icons be exported from Figma for Webflow?

Images and icons should leave Figma under 4MB each, because Webflow caps Assets panel uploads at 4MB for images, 10MB for documents and audio files, and 25MB for ZIP files, and rejects an oversized file rather than compressing it for you (Webflow Help Center, Assets panel). Supported image types are PNG, JPEG and JPG, GIF, SVG, WebP and AVIF. Webflow also asks for filenames of "100 characters or less, including the file extension", which quietly rules out the default export names some Figma files produce. When the plugin runs, image layers and vector icons upload to the Assets panel automatically, and Webflow warns to confirm the correct site is chosen in the plugin's site dropdown or the images will not appear. What I see agencies get wrong here is treating export as the designer's last five minutes rather than a spec item.

• Export the social share image as JPG or PNG. Webflow can convert JPG and PNG assets to AVIF or WebP in the Assets panel, but states that "AVIF and WebP images aren't supported for Open Graph images" (Webflow Help Center, Assets panel), so the Open Graph export has to stay JPG or PNG and must not be compressed afterwards.
• Export background images at full breakpoint width. Webflow does not create responsive image variants for background images, so a background export has to ship at the resolution the largest enabled breakpoint requires rather than at 1x.
• Export blog and rich text images pre-sized. Images that will sit inside a Webflow rich text element need their dimensions set at export rather than left to the platform, for the reason set out in my Webflow QA checklist.
• Export icons as SVG. SVG is a supported Assets panel type, so icons should leave Figma as SVG rather than as 2x PNGs, which keeps them off the 4MB budget entirely.

What actually goes wrong in a Figma to Webflow handoff?

Six things break a Figma to Webflow handoff: unnamed layers, missing auto layout, component variants used for states, working in Safari, fonts uploaded after the sync, and the wrong paste shortcut. Each is cheap to fix in Figma and expensive to work around in Webflow, and each is a yes or no check a designer can run in under a minute, which makes them more useful than any general advice about "clean files". The platform behaviour behind each item comes from Webflow's own Figma to Webflow plugin and app documentation; the cost attached to it is mine.

• Unnamed layers. Every Figma layer name becomes a Webflow class, so "Frame 427" and "Group 12" become permanent class names that someone has to find and rename across every breakpoint.
• Missing auto layout. Layers without auto layout do not sync at all, so the section is rebuilt by hand and the design system link is broken from day one.
• Component variants used for states. Webflow's plugin FAQ answers the variant question directly: "No. Variants are not currently supported. Separate Figma frames will create separate components or elements in Webflow" (Webflow Help Center). A hover state modelled as a variant arrives as a second unrelated component.
• Working in Safari. Webflow states the plugin "is not currently supported in Safari" and recommends Chrome or the Figma Desktop App (Webflow Help Center), which turns a mysterious failed sync into a five second fix once you know it.
• Fonts uploaded after the sync. Custom fonts not present in Webflow before the transfer are lost during sync, in Webflow's own words "they'll be lost during sync" (Webflow Help Center), so the typography has to be reapplied class by class.
• The wrong paste shortcut. Webflow documents three (Webflow Help Center): Command plus V creates a new class, Command plus Shift plus V reuses existing classes, and Command plus Option plus V updates existing classes. The third one restyles the live class everywhere it is used, which is the fastest way to change a button colour across an entire site by accident.

When should you rebuild a Figma design in Webflow instead of syncing it?

Rebuild a Figma design in Webflow by hand, rather than syncing it, once three or more of the six readiness checks fail. The reasoning is that the plugin's value is structural, not cosmetic: it carries auto layout frames, layer names as classes, and colour and number variables. A file that fails auto layout and naming has already lost both of those, so the sync produces a set of unnamed elements that a developer then restructures by hand, which is slower than building the section fresh. The judgement I use on client projects is to run the six checks before quoting, and to quote a Figma sync only when auto layout and naming both pass, because those two are the ones that cannot be repaired on the Webflow side.

• 0 or 1 failed check. Quote a Figma sync. Expect class cleanup, not rebuilding.
• 2 failed checks, neither of them auto layout or naming. Quote a sync and add time for the specific gap, usually asset re-export or breakpoint decisions.
• 2 failed checks including auto layout or naming. Send the file back with the failing frames listed. A designer fixes this faster than a developer works around it.
• 3 or more failed checks. Quote a build from a visual reference. Say so in the proposal so the client is not expecting a design system to arrive in Webflow intact.

The pricing side of that decision, including what an agency should count as margin on a build like this, sits in my white label Webflow workflow. The developer-to-client side of the handoff problem, meaning what leaves the build at the end rather than what enters it, is covered in the Webflow handoff package, and the wider set of material a client should have ready before a project starts is in the website project checklist.

Who should review a Figma file before the Webflow build starts?

The Webflow developer who will build the file should review it before the quote is written, not after the project starts, because the readiness score changes the price. In practice a file passes through three reviewers, and each is checking something different. The designer who built it checks naming and auto layout, because only the designer can fix those cheaply. The developer who will build it checks variable types, breakpoint behaviour and asset exports, because those decide whether the sync or the rebuild path is quoted. The account or project lead checks that interaction states, motion and final copy exist somewhere in writing, since none of those travel through the plugin. An agency with no developer on the team can run the first and third of those alone, using the six checks above, and only needs outside help for the middle one.

Book a 15 minute Figma file review and I will take the middle role with you: open the file, score it against the six checks, and tell you which sections will sync and which will be rebuilt by hand. You leave with a written list of the frames that need auto layout, the layers that need renaming, and a rebuild estimate in hours you can put into a client quote before you commit to a price.