By Mehdi HassanHow should you prepare a Figma file before building it in Framer or Webflow?
Prepare a Figma file by making it behave like a website before anyone builds it: auto layout instead of free positioning, components instead of copies, variables instead of one-off values, and every template shown at more than one width with real content. A file prepared this way imports cleanly and builds faster on any platform.
Most build delays we see come from the file, not the platform. Frames drawn without auto layout, detached components and placeholder text all force the builder to guess, and every guess is a question, a delay or a bug. For how the file feeds each platform, see our Figma to website comparison.
This checklist is for designers handing off to a Framer or Webflow build, including handing off to yourself. The same file also works for a coded build, as covered in Figma to Next.js.
How do you prepare Figma for development, step by step?
Work through the file in six passes: structure, layout, components, tokens, breakpoints and content, then handoff notes. Each pass builds on the one before, so don't skip ahead to annotations on a file that still has free-floating layers.
Organize the file
Separate pages for foundations, components, page designs and archived explorations, so the builder knows what's final.
Apply auto layout
Rebuild every frame and section with auto layout, nested sensibly, with no absolute positioning except where it's intended.
Componentize
Turn every repeated element into a component with variants and properties.
Define variables
Create variables for colors, type sizes, spacing and radii, and apply them everywhere.
Design breakpoints and content
Show each template at desktop and mobile, with real copy, long titles and empty states.
Write handoff notes
Annotate interactions, links, CMS fields and anything the design can't show on its own.
For a longer, item-by-item version for developer handoffs, see our Figma handoff checklist.
How should you structure a Figma file for developers?
Structure the file so the builder can find the final version of everything in seconds. A figma file structure for developers separates what's approved from what's exploration, and names things the way the website will.
- One page per purpose. Cover, foundations (colors, type, spacing), components, page designs and an archive page for old explorations.
- One frame per template. Name frames after the page or template they represent: Home, Pricing, Blog post.
- Clear status. Mark frames as ready for build, in review or exploration, and move rejected options to the archive.
- Meaningful layer names. Rename layers like Frame 427 to hero, feature-grid, card-title. Webflow's plugin turns layer names into class names, so this saves cleanup.
- No hidden leftovers. Delete hidden layers and unused variants that would otherwise import.
Our guide to Figma file organization goes deeper on pages, naming and structure for larger teams.
What are the auto layout best practices for Framer and Webflow?
Use auto layout on every frame, with sizing set to hug, fill or fixed on purpose, and nest frames the way you'd nest HTML. Both platforms convert auto layout into their own responsive layout: stacks in Framer and flexbox in Webflow.
- Every section is an auto layout frame with padding, not a rectangle with layers positioned on top.
- Content containers use fill width with a max width, rather than a fixed width.
- Gaps come from the auto layout gap setting, not from spacer rectangles.
- Text layers are set to fill or hug, never to a fixed height that clips longer copy.
- Absolute positioning is used only for genuine overlaps, such as a badge on a card.
- Grids of cards use wrapping auto layout or a grid, so they can reflow at smaller widths.
How should you set up components, variables and styles?
Set up every repeated element as a component with variants, and every color, type size and spacing value as a variable. The builder will recreate these as components and styles in Framer or Webflow, so a clean system in Figma becomes a clean system on the site.
In Figma | Becomes in Framer | Becomes in Webflow |
|---|---|---|
Component with variants | Component with variants | Component, often with combo classes for variants |
Color variables | Color styles | Variables, synced by the plugin |
Text styles and type variables | Text styles, with breakpoint sizes | Tag styles, classes and variables |
Spacing variables | Stack gaps and padding values | Spacing variables used in classes |
Light and dark modes | Color style modes or variants | Variable modes |
Keep component properties close to what the site needs: a button with size, style and icon options; a card with image, no-image and featured variants. Our guide to component library design in Figma covers variants and properties in depth.
How should you design breakpoints, content and states?
Design every template at desktop and mobile, add tablet where the layout changes, and fill it with real content in its awkward forms. The builder can't guess how a layout should respond or how a three-line title should wrap.
- Desktop and mobile per template. Tablet only where the layout genuinely changes, such as a three-column grid becoming two.
- Real copy. Use the actual headline, the longest product name and a realistic blog title.
- CMS extremes. Show a card with a very long title, one with no image and an empty list state.
- Interactive states. Hover, focus, active and disabled for buttons, links and form fields, plus error and success states for forms.
- Localized text. If the site will be translated, test layouts with longer languages; see Webflow vs Framer localization.
What should handoff notes include?
Handoff notes should cover what the static design can't show: interactions, links, CMS fields, SEO details and assets. Put them next to the frames they describe, not in a separate document nobody opens.
- Interactions. What animates, when, and roughly how: on scroll, on hover, on load. Link a prototype or a reference.
- CMS mapping. Which elements come from which collection field, and which are fixed design.
- Links. Where every button and nav item goes, including external links.
- Assets. Export settings for images and icons, with SVG for icons and logos.
- SEO and accessibility. Heading levels for each page and alt text for meaningful images.
How brand & design sprint files become build-ready
Our brand & design sprint produces a brand refresh or redesign plus 10 website or product explorations in Figma. Explorations are deliberately varied, so they aren't all meant to be build-ready.
Once a direction is chosen, the winning exploration should go through this checklist before any build: auto layout on every section, components for repeated elements, variables for the brand colors and type, mobile versions of each template and real copy. The other explorations move to an archive page. The result is a file any Framer or Webflow builder can pick up.
Once the file is ready, the platform guides take over: Figma to Framer, Figma to Webflow, or a side-by-side of Figma to Framer vs Figma to Webflow.
