How to set up a Figma file that builds fast in Framer

Set your Figma file up like this. Make the desktop frame 1200 wide. Put auto layout on every container, including the outer frame. Decide fill or fixed for each element while you are still in Figma. Do that and a landing page moves into Framer in an afternoon. Skip it and you rebuild half the page by hand, which is the difference between a one day build and a three day one.

Design at the widths Framer actually uses

Framer's canvas comes with three breakpoints, and its product pages show the tabs labelled Desktop 1200 and Tablet 810. The published code on framer.com matches. Responsive images are served with rules for min-width 1200px, for 810px up to 1199.98px, and for max-width 809.98px. So build a 1200 wide desktop frame. Add an 810 wide tablet frame if the layout really changes there. Add a phone frame around 390. Design at 1440 and hope for the best, and you end up with a hero that only looks right on your own monitor.

Auto layout on everything, including the outer frame

Framer's academy lesson says auto layout, hierarchy and fill properties carry across on import. That is the whole trick. A section built with auto layout lands in Framer as a stack that already knows how to resize. A section built by dragging boxes into position lands as loose layers you have to rebuild. Wrap every section in a vertical auto layout. Wrap every row in a horizontal one. Use gaps instead of nudging things apart with empty space. Any layer sitting outside an auto layout frame is a layer you will build twice.

Decide fill or fixed before you hand it over

In Figma, set the section wrapper to fill container. Give the inner content wrapper a fixed max width, like 1200 or 1140. Set cards inside a row to fill, so they share the width evenly. This maps straight onto Framer, where you set Width to 100% or 1fr and put Max Width on the content wrapper. Framer's troubleshooting article says a fixed width or an oversized Max Width is the most common reason a page will not fill the screen on the Phone breakpoint. Every stray fixed number you leave in Figma is a bug you are passing forward.

Name your text styles and reuse them

Name your type and reuse it: H1, H2, H3, body large, body, caption, eyebrow. In Framer you rebuild these once in the Assets panel under Styles, then apply them from the right panel under Text and Styles. Each Framer text style can carry its own breakpoint sizes for Desktop, Tablet and Mobile, covering font size, line height, letter spacing and paragraph spacing. If your Figma file has fourteen slightly different heading sizes, you will build fourteen text styles or live with type that reads wrong on mobile.

Check the font licence at moodboard stage

Framer includes Google Fonts and Fontshare, and lets you upload custom files through the Custom tab of the font picker. Framer also tells you to make sure you hold the right licence before uploading a font to a website. A desktop licence covers a Figma mockup. It does not cover a live page. Sort this out while you are picking the typeface, not the night before launch, because changing the font changes every line break on the page.

Export images at the size they render

Framer compresses images at the edge to WebP and AVIF and resizes them for each device, which its performance page documents. That handles delivery. It does not undo a screenshot pasted in at 4000 pixels wide, and it does not turn a PNG logo into an SVG. Export raster images at about twice their display size. Use SVG for logos and icons. Write the alt text while the content is still fresh in your head.

The Figma file handover checklist

Before you call the Figma file done, run seven checks. The desktop frame is 1200 wide. Every section sits inside an auto layout frame. Section wrappers fill, and content wrappers carry the max width. Type runs on named styles, with no orphan sizes. Fonts have a web licence and the files are ready to upload. Images are exported at sensible sizes, with SVG for anything vector. Layer names read the way you want them in the Framer layer list, because those names come across exactly as you left them.