Figma to Framer Guide 2026: How to Import Designs and Ship a Real Website

You have an approved Figma file. Stakeholders have signed off. Now you need a live website, fast, without starting from scratch in a new tool. The Figma-to-Framer workflow exists precisely for this situation - and in 2026, with Framer 3.0 shipping AI Agents and Branching on June 16, the platform has matured significantly from where it was even a year ago.

The honest version of this guide: importing from Figma to Framer is not a copy-paste operation that produces a production-ready site. It is a structured workflow that, done correctly, gets you to a live, responsive, SEO-ready website faster than a ground-up build. Done poorly - or with the wrong Figma file - it creates more cleanup work than starting native.

This guide covers the complete workflow, what actually transfers versus what breaks, how to prepare your Figma file before touching the plugin, and - critically - when Framer is the right choice versus when Webflow or a native Framer build is the better path for a B2B SaaS marketing site.

Why Teams Move from Figma to Framer (and When It Makes Sense)

Figma and Framer are complementary tools, not competitors. Figma is where design thinking happens: components, systems, collaboration, and approval workflows. Framer is where design ships: it publishes a live website with motion, CMS, SEO controls, and now AI Agents that can edit the live canvas.

The hybrid workflow makes most sense in three scenarios.

Motion-heavy marketing sites. Framer's animation engine is genuinely first-class. Scroll-linked effects, physics-based interactions, and component-level motion design rival custom development. For AI product launches, creative agency sites, and SaaS landing pages where animation is part of the brand, Framer produces results that are hard to match without a developer.

Speed-to-live from an approved design. When a Figma file is client-approved and the brief is "ship it," the Figma-to-Framer workflow removes the traditional design-to-development translation step. A designer who knows Framer can go from a clean Figma file to a published site in days rather than weeks.

Small teams without dedicated developers. Framer's post-import canvas is editable by non-developers. Once a site is live, a marketing manager can update CMS content, copy, and basic layouts without touching the design system.

Where it adds friction: complex CMS architecture with relational content, sites that need deep SEO control and programmatic page generation, teams managing multiple interconnected sites, or clients in regulated industries where vendor security certifications matter. These scenarios push toward Webflow or custom development. The decision framework at the end of this guide covers the full comparison.

What Actually Transfers from Figma to Framer in 2026

This is the section most guides get wrong. The import is not magic, and preparation quality determines the majority of your post-import cleanup work.

What Imports Cleanly

‍

‍

What Requires Manual Work or Recreation

‍

‍

Known Limitations and Edge Cases

SVGs with embedded images. This is the most common hard error you will hit. Framer's official documentation describes the specific error: "SVGs with large images inside are not supported." If you have icons or illustrations that were exported from Figma as SVGs with rasterized content inside, they will fail to import. The fix is to export those assets from Figma as PNG instead, then import the PNG version into Framer.

Figma components with variants. A button component with hover, active, and disabled states in Figma will not convert to a Framer component with equivalent states. Each instance imports as a static layer. You rebuild the component natively in Framer - which is actually more capable for interactivity, but it is manual work.

The "whole page at once" failure. Attempting to copy an entire Figma page and paste it into Framer in one action almost always produces errors, misaligned layers, or broken hierarchy. The plugin is designed for section-by-section import.

Fixed widths everywhere. If a Figma file was built without Auto Layout - using absolute positioning and fixed frame sizes - every imported element arrives in Framer with fixed pixel widths. Making that responsive requires selecting each element individually and changing width from fixed to fill. On a complex page, this takes hours.

Prepare Your Figma File for a Clean Import

Preparation quality determines 70% or more of post-import cleanup work. A well-prepared Figma file produces an import that needs responsive adjustments and motion additions. A poorly prepared file produces an import that needs to be rebuilt.

Structure and Naming

Name every layer descriptively before importing. Generic layer names (Frame 47, Group 12, Rectangle) make the Framer canvas confusing to navigate and audit. Names like Hero Section, Nav Bar, CTA Button, and Feature Card create a working canvas you can actually manage.

Organize the file into clearly named top-level frames for each section: Hero, Features, Pricing, Testimonials, Footer. These become your import units. One section per paste, in sequence, is the correct approach.

Auto Layout Discipline

This is the single highest-leverage preparation step. Every frame that uses Auto Layout in Figma converts to a Framer Stack, which is Framer's responsive layout primitive. Every frame that does not use Auto Layout arrives with fixed absolute positioning that breaks on any viewport other than the one it was designed for.

Audit every frame before importing. If it can use Auto Layout, add it. Pay particular attention to:

• Cards and repeating content blocks
• Navigation bars
• Button groups
• Form sections
• Any container that holds multiple child elements

Components, Styles, and Assets

Pre-export any images that are used as fills in Figma frames - particularly hero backgrounds and section backgrounds. Figma image fills sometimes import incorrectly. Export them as PNG or JPG and have them ready to replace if needed.

For any SVG assets, check whether they contain embedded raster images. If so, export them as PNG instead to avoid the SVG large-images error.

Do not expect your Figma component library to transfer. Plan which components will need to be rebuilt natively in Framer - primarily interactive elements like nav menus, accordions, modals, tabs, and any component with meaningful state changes.

Section-by-Section Strategy

The correct import sequence for a typical marketing page:

1. Navigation (import first, set to sticky/fixed position in Framer)
2. Hero section
3. Subsequent sections in order down the page
4. Footer

Import, paste, inspect, and fix each section before moving to the next. Catching layout issues early - before you have 12 sections stacked - makes cleanup dramatically faster.

Step-by-Step: Importing with the Official Plugin

The official tool for this workflow is the Figma to HTML with Framer plugin, available in the Figma Community. Framer Academy also maintains an official importing guide, though the Academy lesson notes it was released before the Framer 3.0 Agents, Branching, and CMS update on June 16, 2026 - core import concepts remain valid, but some UI has changed.

Install the Plugin

In Figma, open the Plugins menu, search for "Figma to HTML with Framer," and install it. It appears in your plugins panel from that point forward.

Select, Copy, and Paste

Select the first section you want to import - ideally a top-level frame. Run the plugin from the Plugins menu. The plugin converts the selection and places it on your clipboard. Switch to your Framer project, open a blank canvas or the page where you are building, and paste (Cmd/Ctrl + V).

Framer converts the pasted layers into Framer elements, preserving Auto Layout as Stacks and basic styles as documented above.

Repeat this process section by section until the full page is assembled.

Immediate Post-Paste Checks

After pasting each section, check three things before moving to the next:

1. Layer hierarchy. Open the Layers panel in Framer and verify the structure matches your Figma file. Unexpected nesting creates layout problems that are easier to fix immediately.
2. Fixed widths. Select the top-level pasted frame and set its width to fill the container. Then work inward, changing any fixed-width child elements to fill where appropriate.
3. Missing fonts. If a font does not appear correctly, it needs to be uploaded to Framer or replaced. Framer's custom fonts guide covers both options.

Post-Import Cleanup and Common Fixes

This is where most of the real work happens. The import gives you a structural starting point - not a finished site.

Fonts and Typography

Custom fonts from Figma do not automatically transfer as font files. Framer recognizes the font name and attempts to match it from Google Fonts. If your design uses a licensed or custom font not in Google Fonts, you will see fallback fonts rendering instead.

Fix: upload your custom font files through Framer's font settings (Project Settings > Fonts). Once uploaded, Framer applies them across all instances where that font is referenced.

Google Font substitutions are also common even for Google Fonts, if the exact variant weight was not available. Review all text layers after import and confirm the weight, size, and line height match the Figma original.

Layout, Widths, and Spacing

Fixed widths are the most common and most time-consuming post-import issue. Elements imported from fixed-width Figma frames arrive with pixel-locked widths. On any screen other than the original design breakpoint, they overflow or leave gaps.

The systematic fix: select each top-level section frame and set width to fill. Then select child containers and repeat. For text blocks specifically, change width from fixed to fill (or a percentage) and verify that line wrapping behaves correctly. Spacing values from Figma usually transfer accurately when Auto Layout was used - spot-check padding and gaps on key sections.

Images, SVGs, and Assets

Image fills from Figma sometimes arrive as placeholders in Framer. If an image is not rendering after import, re-export it from Figma (PNG for photos, SVG for clean vector icons) and upload directly into Framer.

For the SVG large-images error specifically: the fix is consistent. Identify the offending SVG, re-export it from Figma as PNG at 2x resolution, delete the broken SVG layer in Framer, and replace it with the PNG. This affects a small subset of SVG assets but is worth auditing before starting the import.

Common Issues and Fixes

‍

‍

Components and Reusability

Any component that needs interactive states - navigation dropdowns, accordions, modals, tabs, form elements, video players - must be rebuilt in Framer's native component system. This is not a limitation to work around; it is the correct approach. Framer's component system is more capable than Figma's for interactivity, and native Framer components perform better than imported static layers converted to interactive elements.

Plan for this work upfront. A typical B2B SaaS marketing site has 5 to 10 components that need native rebuilding. Estimate 30 to 90 minutes per component depending on complexity.

Making the Site Responsive

Figma is a single-viewport design tool by default. Almost no Figma file is responsive in the browser sense - designs are static compositions at a specific width, usually 1440px or 1280px. Framer requires deliberate, manual responsive configuration after import.

Breakpoints and Stacks

Framer's responsive model uses breakpoints (Desktop, Tablet, Mobile) and Stacks (the Auto Layout equivalent in Framer). Each breakpoint can have its own layout configuration.

After completing the import and initial cleanup at Desktop width, switch to Tablet breakpoint and review every section. Common adjustments: multi-column layouts collapsing to single column, navigation switching to mobile menu, font sizes scaling down, image proportions adjusting.

Switch to Mobile and repeat. Mobile typically requires the most adjustment - card grids, pricing tables, and feature sections often need a complete layout reconfiguration at narrow widths.

Mobile and Tablet Adjustments

The most reliable approach is systematic: go section by section at each breakpoint, the same way you imported. Start with navigation (which almost always needs a hamburger menu component at mobile), then hero, then each section in sequence.

Framer's Stack direction property is your primary tool here. A row Stack on desktop becomes a column Stack on mobile. Set this explicitly at each breakpoint rather than assuming it will inherit correctly.

Testing Early and Often

Do not wait until the full import is complete to test responsiveness. After completing each major section, use Framer's preview to check the layout at all three breakpoints. Catching a responsive issue on section 2 is significantly faster than finding it after section 10 is complete.

Adding Interactions, Animations, CMS, and SEO

These are the layers that transform an imported layout into a production-quality site. None of them transfer from Figma - they are added natively in Framer after import.

Motion and Effects

Framer's animation capabilities are the primary reason to choose it over Webflow or Figma Sites for motion-heavy marketing pages. Scroll-linked animations, entrance effects, hover states, and component-level physics interactions are all configurable without code in Framer's Effects panel.

With Framer 3.0 (June 16, 2026), Agents can also generate and apply animations - you describe what you want and the Agent configures the effect on the selected layer. This significantly reduces the time to configure complex scroll sequences. All Agent changes land in a Branch for review before publishing, so the workflow is safe for production sites.

CMS Architecture Decisions

If your site includes a blog, resource library, case studies, or any repeating content, connect it to Framer's CMS rather than building it as static pages. The Framer 3.0 CMS update shipped inline editing and bulk actions, and Agents can manage CMS content directly.

Important constraint: Framer CMS on the Basic plan is limited to one collection. The Pro plan allows more. For a site with blog posts, case studies, and team members as separate collections, Pro ($30/month) is the minimum viable plan.

Framer's CMS caps are also worth knowing before committing: CMS item limits vary by plan (verify current limits at framer.com/pricing before building). For B2B SaaS sites with large content programs, Webflow's CMS is more scalable.

SEO, Meta, and Technical Setup

Framer has solid built-in SEO controls: per-page meta titles and descriptions, Open Graph settings, canonical tags, XML sitemaps, and redirects. These are configured per page in the Page Settings panel.

After import, set meta titles and descriptions for every page. Add Open Graph images. Configure redirects if the site is replacing an existing URL structure. Verify the sitemap is being generated correctly before publishing.

One limitation for B2B SaaS specifically: Framer does not support A/B testing on plans below Scale ($100/month). If conversion rate optimization through variant testing is part of your growth stack, this is a meaningful constraint.

Analytics and Performance

Add Google Analytics or other tracking through Framer's Integrations panel (Project Settings > General > Custom Code or the Apps integrations panel in Framer 3.0). Set this up before the site goes live - retroactive analytics configuration loses historical data from launch day.

Performance after import is generally strong for well-prepared files. Framer generates clean code and serves assets through its CDN. The most common performance issue is large unoptimized images - compress hero images and background assets before uploading, and prefer WebP format where the content type allows.

Figma to Framer vs Building Native in Framer vs Webflow

This is the decision most guides skip. It is the most important one for anyone evaluating this workflow for a real B2B SaaS project.

Decision Framework

‍

‍

When to Choose Each Path

Choose Figma-to-Framer import when: You have a clean, Auto-Layout-heavy Figma file from a designer who knows Framer constraints, the site is primarily a marketing page or landing page without complex CMS requirements, motion is important to the brand, and speed-to-live is the primary constraint.

Choose native Framer build when: You are starting from scratch or a rough concept (not an approved Figma file), motion and interactions are the primary design intent, and a Framer-fluent designer or agency is doing the work.

Choose Webflow when: The site needs a complex CMS (multiple relational collections, deep filtering, programmatic page generation), long-term SEO is a primary business objective, the team will need developer-level customization over time, or enterprise security requirements (SOC 2, HIPAA) apply.

For most B2B SaaS marketing sites, the honest breakdown is this: Framer wins on speed and motion for launch sites and landing pages. Webflow wins on scalability, CMS depth, and SEO for sites that need to grow into content programs and drive significant organic traffic. Many SaaS teams start on Framer and migrate to Webflow as the content and SEO program scales - which is its own project.

Our pick for B2B SaaS marketing sites: Webflow for the long-term site; Framer for high-motion landing pages and campaign pages. The import workflow is most valuable when used deliberately for the right project type, not as a default path for every Figma file.

Production Checklist Before You Publish

Use this before every Framer site goes live.

Responsive

• Tested at Desktop (1440px), Tablet (768px), and Mobile (375px)
• No overflow or horizontal scroll at any breakpoint
• Navigation works correctly at all breakpoints (including mobile menu)
• All images scale correctly

Typography and assets

• All custom fonts uploaded and rendering correctly
• No placeholder text remaining
• All images and SVGs loading (no broken assets)
• Favicon set

SEO

• Meta title and description set on every page
• Open Graph image uploaded
• XML sitemap enabled and verified
• Redirects configured if replacing an existing site
• No duplicate canonical tags

Performance

• Images compressed and in WebP format where possible
• No large unoptimized hero images (aim for under 200KB per image)
• Google PageSpeed Insights test run on key pages

Analytics and tracking

• Analytics integration connected and firing
• Conversion tracking set up for key CTAs
• Cookie consent configured if required by jurisdiction

Content and links

• All internal links tested
• All external links tested and opening correctly
• CMS content reviewed and published
• Forms connected and submission notifications configured

Domain and publishing

• Custom domain configured
• SSL confirmed active
• Published to the correct plan (Basic/Pro/Scale based on requirements)

Realistic Timelines and Effort Expectations

The ranges below are based on real project patterns for clean, reasonably prepared Figma files. Files with poor Auto Layout discipline, complex component requirements, or large image libraries should be budgeted toward the high end.

‍

‍

One pattern worth knowing from agency work on client files: even files that look well-prepared in Figma often require 40-70% rebuild on complex components once the import reveals what does and does not transfer. Budget for this on the component side specifically, regardless of how clean the design file looks.

Work with Hedrick

Have an approved Figma file and need to decide whether Framer or Webflow is the right production path? That is exactly the kind of evaluation we do before starting any build. Hedrick is a Webflow-exclusive development and design agency. We can tell you whether your project fits the Figma-to-Framer workflow, when Webflow is the stronger long-term choice, and what a realistic production timeline looks like for your file.

Get in touch

A Note on Sources

Plugin behavior and transfer capabilities in this article are based on the official Figma to HTML with Framer plugin page, Framer Academy's importing lesson (note: released before the June 16, 2026 Framer 3.0 update - core workflow remains valid, some UI differs), Framer's official SVG error help article, and Framer's custom fonts documentation.

Framer 3.0 launch details (Agents, Branching, External Agents, AI credits pricing, editor seat reduction from $40 to $20) are from Framer's official press release via BusinessWire (June 16, 2026) and the Framer updates page at framer.com/updates. Framer pricing (Basic $10/month, Pro $30/month, Scale $100/month, editor seats $20/month, content editor seats $10/month) verified from multiple sources as of July 2026. Always verify current pricing and plan limits at framer.com/pricing before committing to a plan or quoting a client.

Frequently Asked Questions

Can You Import Figma Designs into Framer?

Yes. The official method uses the Figma to HTML with Framer plugin, available in the Figma Community. Install the plugin, select the frames or sections you want to transfer, run the plugin to copy them to the clipboard, then paste directly into your Framer project. Import section by section rather than the full page at once for best results.

Does Auto Layout from Figma Transfer to Framer?

Yes, and it is the most important preparation step. Figma Auto Layout frames convert to Framer Stacks on import, preserving the responsive structure. Frames without Auto Layout arrive as fixed-position absolute layers that require manual conversion to Stacks afterward. If you do one thing to prepare your Figma file, make it adding Auto Layout to every container.

What Does Not Transfer from Figma to Framer?

Component variants and interactive states, Figma prototype connections, design tokens and variables, Figma styles library, corner smoothing, image strokes, video components, and custom fonts (which need re-uploading). Complex SVGs with embedded raster images will error and need to be re-exported as PNG. Plan for these to be added or rebuilt natively in Framer after import.

How Do I Fix Missing Fonts After Importing from Figma?

Framer recognizes the font name from Figma but requires the font files if they are not in Google Fonts. Go to Project Settings > Fonts in Framer and upload your custom font files (OTF or TTF format). Framer applies them across all instances where that font is referenced. For Google Fonts, Framer should match automatically - if it does not, verify the exact font weight used in Figma matches an available Google Fonts weight.

Why Do I Get the "SVGs with Large Images Inside Are Not Supported" Error?

This error occurs when an SVG file contains embedded raster images rather than pure vector paths. Framer does not support this format. The fix is to re-export the asset from Figma as PNG (at 2x resolution for retina displays), delete the broken SVG layer in Framer, and replace it with the PNG. This commonly affects icons or illustrations that were exported from Figma including photo content inside the SVG wrapper.

Should I Import Section-by-Section or the Whole Page?

Section by section, always. Attempting to copy and paste an entire Figma page at once frequently produces errors, misaligned elements, and broken hierarchy in Framer. Section-by-section import gives you control over each piece, makes it easier to catch issues early, and produces a cleaner result. Start with the navigation, work down the page in order, and inspect the Framer layers panel after each paste.

Is Figma to Framer Better Than Building Directly in Framer?

Depends on the starting point. If you have a client-approved, well-structured Figma file, import saves significant design time. If you are starting from scratch or a rough brief, building natively in Framer (or using Framer's AI Agents to generate an initial layout) is usually faster and produces a more integrated result. The import workflow is an acceleration tool for existing designs, not a universal replacement for native builds.

When Should I Choose Webflow Instead of Framer for a Figma Design?

Choose Webflow when the site needs a complex CMS (multiple relational collections, deep content filtering, more than 2,500 CMS items), programmatic page generation at scale, A/B testing without a $100/month plan, or enterprise security certifications (SOC 2, HIPAA). Framer is excellent for motion-heavy marketing sites and landing pages. Webflow is the stronger long-term platform for B2B SaaS sites where SEO, content marketing, and CMS scalability are primary business requirements. See our Webflow vs Framer comparison for a full breakdown.

How Long Does a Typical Figma to Framer Conversion Take for a Marketing Site?

A simple landing page (one page, 6-8 sections) typically takes 1-2 days including preparation, import, cleanup, and responsive work. A 5-7 page marketing site without CMS takes 2-4 days. A site with CMS and a blog takes 4-7 days. Complex SaaS marketing sites with 10+ pages and multiple interactive component types can take 1.5-3 weeks. These ranges assume a reasonably clean Figma file - poor Auto Layout discipline or complex components push toward the high end. Note that even clean-looking files often require 40-70% rebuild on interactive components once the import reveals what transfers and what does not.

Can I Maintain a Design System Across Figma and Framer?

Partially. Design tokens and component libraries do not transfer automatically - there is no sync between Figma Variables and Framer's variable system. The practical approach: maintain the source of truth in Figma, use the import as a starting point, and rebuild key components natively in Framer. When the Figma design updates significantly, you re-import affected sections and re-apply Framer components on top. It is a manual workflow, not a live sync. For teams that need true design system continuity with developer handoff, the Figma to Webflow workflow via Webflow's component and variable system handles this more robustly. See also our Figma design system guide for how to structure your Figma system before any production handoff.