Figma to Framer: How to Ship a Marketing Page

Quick answer

Use Figma to lock the page’s content, type, and brand. Use Framer to publish it. A paste or import, when your Framer project offers one, is a head start for sections. It is not the responsive site, the CMS, or the interactions. Rebuild breakpoints and components in Framer, then keep Figma as the brand source. If you have not decided Framer is the right host, read Figma vs Framer for marketing sites first. The wider set of paths is on Ship.

Who this is for

• Designers shipping one landing page or a small marketing site, not a product UI.
• Marketers who can edit copy in a CMS and do not want to wait on an engineering sprint for every headline.
• Teams that already keep brand rules in Figma and need a published URL.

This is not the path for a dense app. Product screens stay in Figma and go through Dev Mode handoff.

What to finish in Figma first

Do this before you open Framer. A messy frame becomes a messy site.

1. One desktop frame and one mobile frame for the page you will actually publish. Extra artboards for “options” stay in Figma.
2. Real copy, not lorem. Headlines, button labels, and form fields should be the words that will ship.
3. Named text styles and color styles or variables. Framer should inherit names you can recognize, not “Frame 184.”
4. Images exported at the size the page uses, from stable frames. Soft exports are a Figma problem, not a Framer one. See fix blurry exports.
5. A note on anything Inspect cannot see: form success state, which sections repeat, and what is a CMS collection versus a one-off block.

Leave product components, icon zoos, and unused variants out of the frames you transfer.

What transfers, and what you rebuild

In Figma	In Framer
Section order, copy, type, color	The same content, rebound to Framer styles
A paste or import of frames, if the project offers it	A layout draft, not a finished breakpoint system
Static mock of hover and scroll	Real hover, scroll, and links on the published page
A repeating logo row drawn by hand	A CMS collection, if the row will change
Prototype connections	Actual URLs, forms, and analytics

Plan time for the right column. The left column is the spec.

A practical sequence

1. Create the Framer project for this page only. Do not import the whole Figma file.
2. If Framer offers a Figma paste or import, bring over the desktop frame. Then delete anything that is a duplicate, a hidden layer, or a component instance you will not use.
3. Rebuild the page as Framer sections. Stack, spacing, and breakpoints are Framer’s job. Do not try to preserve every Figma auto-layout quirk.
4. Map type and color to a short set of styles. Two text sizes you will not use are noise.
5. Put repeating blocks in the CMS: posts, logos, FAQs, team rows. A section that changes monthly should not be a frozen frame.
6. Set the page title, description, and social image. Write the form’s success and error states.
7. Click through on a phone-width preview and with a keyboard. Check contrast on text over images.
8. Publish to a preview URL before you point a real domain at it. Compare the live page to the Figma frame for logo clear space, type, and color. They will not match pixel for pixel. They should match the brand.

What stays in Figma

Figma still owns the brand language, ads, decks, and product UI. When the live page changes a headline, decide whether that change is a campaign edit (Framer) or a brand change (Figma, then Framer). Write that rule down so the two files do not diverge in silence.

If the page needs engineering, custom data, or a design system that already lives in code, Framer is the wrong host. Use the Figma to code comparison instead.

Common mistakes

• Treating paste as publish. The imported frame is a draft.
• Moving the product design system into Framer. Marketing needs fewer components. Bring tokens, not every app variant.
• Skipping the CMS for content that will change. You will be editing a layout to change a logo.
• Shipping motion that hides text or traps keyboard focus.
• No rollback. Know how you would rebuild the URL if you leave Framer.

FAQ

Do I still need the Figma vs Framer article?

Yes, if you are choosing the tool. This guide assumes Framer is the host. The comparison is Figma vs Framer for marketing sites.

Will Figma components become Framer components?

Do not count on it. Recreate the pieces you will reuse: button, nav, section, footer. Name them for the site, not for the Figma library.

What if the team uses Webflow instead?

Same idea, different builder. Start with Figma to Webflow.

Bottom line

Prepare a tight Figma frame, transfer it as a draft, and rebuild the page in Framer so it can be published, edited, and checked on a phone. Keep Figma for the brand. If Framer is not the decision yet, make that call in the comparison first.