A Figma design system already holds most of the decisions your marketing site needs. The work is moving those decisions into Webflow without redrawing them.
A SaaS marketing site usually starts in Figma, where the colors, type scale, button styles, and spacing are already settled. The hard part is getting those decisions into a live site without rebuilding them by hand and letting the two versions drift apart.
You can skip that. Webflow's official Figma to Webflow plugin syncs your Figma variables, components, and styles into a Webflow project. Hence, the design system you already maintain becomes the foundation of the live site instead of a reference screenshot.
This guide explores preparing the Figma file, syncing tokens and components, assembling the pages, wiring up a CMS-driven blog, and launching. The goal is a site that stays on brand because the brand lives in variables, not in one-off styling.
If you want the wider context first, Webflow has a good primer on turning your static Figma designsinto an interactive Webflow site.
What do you need to build a SaaS marketing site from a Figma design system?
You need a Figma file organized as a design system, a Webflow project on a plan that lets you publish, and the Figma to Webflow plugin connecting the two. Both tools have free tiers you can start on, and you only need a paid Webflow site plan when it is time to publish to a custom domain.
Before you install anything, it helps to know exactly what each side of the connection expects, because the sync only reproduces what your Figma file is already structured to hand over.
Figma file needs
Your Figma file has to be a system, not a set of screens. In practice, that means four things:
- Every layer you intend to sync uses auto layout, because the plugin only copies auto layout frames and converts them into Webflow's flexbox structure.
- Your colors, type, and spacing live in variables organized into collections, so they map cleanly to Webflow variables.
- Your components use slash-separated names like
Button/Primary/Large, which keeps the resulting Webflow components readable. - Finally, your text and effect styles are defined at the file or team level so they can sync as Webflow classes.
If you are still deciding how to structure any of this, our guide to what a design system is and how to create one is the right starting point.
Webflow workspace needs
On the Webflow side, you need a project where you can use variables, components, and custom fonts, plus a plan that lets you publish when you are ready. Variables and components are core Designer features so that you can build with them on any plan, including a free Starter workspace.
Publishing to a custom domain requires a paid site plan, and sharing one design system across several sites requires a paid Workspace plan through Shared Libraries.
You must upload custom fonts to your Webflow site before you sync, because the plugin doesn't carry fonts over, and any typeface it cannot find falls back to a system font. Upload your brand fonts first, and the type scale lands intact.
6 steps to build a SaaS marketing site from your Figma design system
The workflow moves in one direction: get the Figma file sync-ready, connect the plugin, sync tokens first and components second, assemble the pages from those components, add a CMS for the parts that change often, then launch.
Syncing tokens before components matters, because when the components arrive, they can reference variables that already exist instead of hardcoded values.
I run these in order on every project. Skipping ahead to page building before the variables are in place is the most common reason a site ends up with one-off colors scattered throughout. Let's go through the steps.
1. Prepare your Figma design system for sync
Start in Figma, not Webflow. Select every frame you plan to bring over and confirm it uses auto layout, since anything without it will not sync. Group your variables into collections that match how you think about the brand: one for color, one for typography, one for spacing.
Rename components to the slash convention, so Button/Primary and Button/Secondary sit together, and make sure your text and effect styles are real styles rather than detached local overrides.
This preparation is the part people rush, and it also determines how clean the Webflow result is. A tidy file syncs in minutes; a file of loose screens becomes hours of cleanup on the other side.
Expected outcome: A Figma file where every syncable layer has auto layout and every design decision is a variable or a style.
2. Install the Figma to Webflow plugin and connect your site
Install the Figma to Webflow plugin from the Figma Community, and add the companion Webflow app to your workspace. Open the plugin inside your Figma file, click Run, then Connect, and authorize the Webflow site you want to sync into.
Because the plugin is not currently supported in Safari, run it in Chrome or the Figma Desktop App, or the connection step will stall.
Once connected, choose the target Webflow site carefully: sending assets to the wrong project is a common and annoying mistake, since it scatters images across a site you didn't mean to touch.
In my experience, it's also worth setting a class name prefix in the plugin settings at this stage to keep incoming classes from colliding with anything you've already built.
Expected outcome: The plugin shows your target Webflow site connected, with the Layers, Variables, and Styles tabs ready.
3. Sync your design tokens through the Variables tab
Open the Variables tab and sync your tokens before anything else. Webflow supports five variable types that your Figma variables map onto: Color, Size, Font Family, Number, and Percentage.
Select the collections you want to bring over, and for size variables, choose the unit you want Webflow to write them in, whether that is px, em, or rem. The plugin matches on variable names and updates existing variables in place, so re-syncing refreshes their values instead of creating duplicates.
If your system uses light and dark modes, the plugin can bring over multiple collections and modes in a single sync, and you can still add or adjust modes by hand in Webflow's Variables panel afterward.
This step is worth doing thoughtfully because everything downstream references these tokens. Webflow's write-up on theming with design tokens and variables is a useful companion here.
Expected outcome: Your Figma color, type, and spacing tokens appear as native variables in Webflow's Variables panel with matching values.
4. Sync components and styles, then assemble your pages
With tokens in place, move to the Layers and Styles tabs. The Layers tab converts your auto layout frames and components into Webflow flexbox elements, turning layer names into CSS class names and assigning HTML tags from those names. Hence,o a layer called heading becomes a heading element and one called button becomes a link.
Sync a few components or sections at a time rather than the whole page at once, because pushing an entire site in one pass tends to time out.
The Styles tab brings your text and effect styles across as Webflow classes. Once your components and images have landed in the Assets panel, you assemble marketing pages the way you would build any Webflow site, except now you are dragging in components that already carry your brand.
This is where a SaaS landing page that converts comes together fast, and browsing SaaS website design examples can help you decide which sections to lead with.
Expected outcome: A set of pages built from your synced components, styled by your synced variables, with no one-off values.
5. Add a CMS-driven blog and resources section
Marketing sites are not static, and the parts that change most- the blog, customer stories, changelog, and job listings- belong in the CMS rather than in hand-built pages. Create a CMS Collection for each, define the fields once, and design a single template that every entry flows into.
This is what lets a non-technical teammate publish a new post without opening the Designer or touching your layout. Because the template uses the same components and variables you synced, every new post is automatically on brand.
When you are ready to automate publishing or pull content in from another system, the Webflow CMS API gives you a programmatic way in.
Expected outcome: A blog and any recurring content types running on CMS Collections, each new entry rendering through one branded template.
6. Check responsiveness, tune SEO, and launch
Before you publish, walk the site down through Webflow's breakpoints. The defaults cascade from your desktop base to Tablet at 991px and below, Mobile landscape at 767px and below, and Mobile portrait at 479px and below, with larger breakpoints at 1280px, 1440px, and 1920px available if your design targets wide screens.
Because Auto Layout converts to Flexbox, most of your responsive behavior carries over, but hero sections and multi-column feature grids usually need a pass. Then set your page titles, meta descriptions, and Open Graph images, and let Webflow's AI-powered SEO and AEO audit flag missing alt text or metadata across the site.
Webflow's guide to responsive website examples and design tips is a good sanity check at this stage. When it looks right on every breakpoint, publish.
Expected outcome: A site that holds up from 320px to widescreen, passes a basic SEO audit, and is live on your domain.
What breaks a Figma to Webflow sync, and how to fix it
Most failed syncs trace back to a handful of predictable causes: a layer without auto layout, a font that was never uploaded, a Figma variant that splits into separate components, a frame too narrow to accept responsive settings, or the plugin running in a browser it does not support. Each one fails quietly, so the symptom rarely names the cause.
Each one has a tell, and once you know it, the fix is quick; here is how to recognize them.
Layers do not sync at all
The layer, or a frame inside it, is missing auto layout. The plugin only copies auto layout frames, so a hand-positioned group or an absolutely placed element simply does not come across, and it does so without an error message.
Go back into Figma, select the frame, and apply auto layout, then confirm every nested frame you care about has it too. This is why the preparation step matters: a fully auto-laid-out file syncs completely, while a file with a few loose frames looks like it half-worked.
Fix the Figma structure and re-sync, and the missing layers appear where you expect them.
Fonts fall back to system defaults
Your brand typeface was not uploaded to Webflow before the sync, so Webflow had nothing to match and substituted a system font. The plugin does not transfer font files, only the styles that reference them.
Upload your custom fonts to the Webflow site first, under the site's font settings, then run the sync again. Once the font exists in Webflow, the text styles that point to it resolve correctly, and your type scale renders as designed rather than in a fallback face.
In my experience, this is the most common surprise on a first sync, partly because the fallback is often close enough that you don't notice until you compare it side by side with the Figma file. It is a two-minute fix once you know to upload fonts up front, so make font upload the first thing you do in a fresh Webflow project.
A component's variants become separate elements
Figma variants are not converted automatically. Each variant frame in Figma creates a separate component or element in Webflow, so a button with five states arrives as five disconnected pieces rather than one component with options.
The fix is to rebuild the relationship in Webflow: create one base component, then use Webflow's style variants and component properties to express the states and content differences. Webflow's approach to composable design systemswith component slots is the pattern to follow here.
It is manual work, but you only do it once per component, and the result is usually cleaner than the Figma original because Webflow's component model handles states and content slots more directly than stacked variant frames do.
You cannot set responsiveness on an element
If the layer is under 250px wide, or already stacked vertically, the plugin will not let you set responsive behavior on it in either case. The responsiveness control stays greyed out with no message explaining why, which leads people to look for a bug that isn't there.
Widen the frame in Figma to at least 250px before syncing, or plan to set that element's responsive behavior directly in Webflow after the sync using the Style panel at each breakpoint.
This mostly affects small UI pieces like badges, tags, and icon buttons, so it rarely blocks a whole layout. It is worth knowing in advance, though, because the greyed-out setting looks like something broke when it is actually the plugin refusing an element too narrow to stack meaningfully.
The plugin will not load or connect
You are running it in Safari, which is not supported. Switch to Chrome or the Figma Desktop App and the plugin loads normally, so this is the first thing to check when the panel comes up blank or will not finish loading.
If it loads but the Webflow connection fails partway through, your authorization token has most likely expired, which happens after a stretch of inactivity. Reconnect your Webflow account in the plugin settings, reauthorize the target site, and the sync will resume.
These two causes account for nearly every "the plugin is broken" report I see, and neither has anything to do with your design or your Figma structure. Ruling them out first saves you from tearing apart a file that was fine all along.
Ship your marketing site with fresh design
When you are ready to go deeper on any part of this, from responsive nuances to search performance, our guide to SEO for SaaS is a strong next read, and the Figma to Webflow integration page covers setup specifics.
For anything beyond what the plugin handles natively, such as programmatic token pipelines, Webflow's developer documentation has the API references.
Frequently asked questions
Do I need to know how to code to use the Figma to Webflow plugin?
No. The plugin path is fully no-code: it syncs variables, components, and styles directly between the two tools. You only need code for advanced token pipelines, such as exporting to CSS custom properties with Style Dictionary, which most marketing sites never require.
Will my Figma components come across as editable Webflow components?
Auto layout frames and components sync as Webflow flexbox elements and components, and layer names become class names. Figma variants are the exception: they arrive as separate elements, so you rebuild multi-state components once in Webflow using style variants and component properties.
Why did my fonts change after syncing?
The plugin does not transfer font files, so any typeface not already uploaded to your Webflow site falls back to a system font. Upload your brand fonts to Webflow before syncing, and the styles that reference them will render correctly on the next run.
Which Webflow plan do I need to build a marketing site this way?
You can design with variables and components on any plan, including a free Starter workspace. You need a paid site plan to publish to a custom domain, and a paid Workspace plan to share one design system across multiple sites through Shared Libraries.
Can I keep Figma and Webflow in sync automatically after launch?
Not through the plugin alone, which syncs on demand. Continuous sync requires custom automation using the Figma REST API and Webflow's APIs, often triggered by a Figma library publish event. Set it up only if you manage several sites from one system.
Does reading Figma variables through the API require a paid seat?
This only matters if you plan to automate token sync programmatically. Reading variables through the Figma REST API requires a Full seat in an Enterprise organization. Your access to the file determines what you can do: view access lets you read variables, and edit access lets you write or update them. You only need a Full seat to write or update variables through the API, not to read them.
