The official Figma to Webflow app has 323,799 recorded installs, 22.4% of every install across the 429 apps in Webflow's marketplace. We read the marketplace's page data on 25 October 2026. No other app comes close: Relume's Site Builder Import is second with 113,722, and the two together hold 30.3% of all installs.
So the tool most teams use is free and made by Webflow. The real question is what it does with a Figma file, what it drops on the way, and whether the other routes (Relume, Figma Sites, Figma to code converters and AI agents over MCP) do better. This page answers that from each vendor's own documentation, read in October 2026, plus our marketplace count, which is saved with this post's research.
The five routes from Figma to a live Webflow site
There are five ways to get a Figma design into Webflow in 2026, and they solve different problems. Two keep the design in Figma and push it across, one replaces Figma's handover with a component library, one replaces Webflow altogether, and one hands the job to an AI agent.
| Route | What moves | Output | Price to start | Main limit |
|---|---|---|---|---|
| Figma to Webflow plugin and app | Auto layout frames, components, variables, text and effect styles | Native Webflow elements, components, variables and classes | Free plugin; a paid Site plan to publish on a custom domain | No variants; layer names become classes |
| Relume (Figma kit plus Site Builder) | Sitemap, wireframes and library components | Webflow, Figma or React components | Free plan with 30 Webflow components; Starter from $18 a month | Only as clean as the library; your design must fit it |
| Figma Sites | The design itself, published by Figma | A site hosted by Figma | Paid Figma plan and a Full seat to publish | Open beta; not a Webflow site |
| Figma to code converters (Anima, Builder.io Visual Copilot) | Frames | HTML, React and other framework code | Anima Free: 5 code generations | Code, not Webflow elements |
| AI agent with the Figma and Webflow MCP servers | Design context read from Figma, written into Webflow by the agent | Whatever the agent builds | Figma Starter: 20 MCP tool calls a month; Webflow MCP on all Site plans | Quality depends on prompts, rules and review |
Sources: Webflow Help Center; Relume pricing; Figma Help Center; Anima pricing; Builder.io, all read 2026-10-25
The table hides the most useful distinction. Only the first two routes produce native Webflow structure that a marketing team can edit in the Designer. Figma Sites skips Webflow, the converters produce code, and the agent route produces whatever the agent decides, inside Webflow, which is both its promise and its risk.
The official Figma to Webflow plugin: what it syncs
Webflow publishes the plugin in the Figma Community, and the Webflow app on the other side receives what it sends. The plugin has three tabs. Layers sends frames or components to Webflow as components or elements. Variables sends Figma variable collections to Webflow variables. Styles sends text and effect styles to Webflow classes. In the app, you pick a recent sync, review each change and import the items you accept.
The workflow has improved steadily. In October 2024 Webflow removed the need to keep the plugin and the app open at the same time, so one person can sync from Figma and another can import later. In February 2025 Webflow relaunched the plugin around the three tabs and said some designs now process up to 30 times faster. Its September 2026 help article is the current reference, and it is the one we quote below.
What converts well. Auto layout frames become flexbox structure. Images and vector icons are uploaded to the Assets panel. Variables can be written in px, em or rem with a base font size you set. On a paste, you choose whether a clashing class becomes a new class, reuses the existing one, or overwrites it with the Figma values.
What needs preparing first. Custom fonts must be uploaded to the Webflow site before you sync, or they are lost. Webflow's own January 2026 guide adds that a missing typeface falls back to a system font. The plugin does not run in Safari. For large pages, Webflow recommends syncing a few components or sections at a time rather than a whole page.
Where the plugin breaks
The limits are documented, and they decide whether the plugin saves a week or creates one.
| Limit, as Webflow documents it | What happens in the build |
|---|---|
| Layers must use auto layout to sync or paste | Absolutely positioned or loose frames do not come across; Webflow's guide says they fail without an error message |
| Responsive, state and style variants are not supported | Each variant arrives as a separate component or element; hover, focus and size variants are rebuilt by hand |
| Every layer name is converted to a class | "Frame 427" and "Group 12" become classes unless the Figma file is named to your class system |
| Tags come from layer names: "heading" becomes H1, "button" becomes a link | A page can arrive with several H1s; heading levels are set by hand |
| Responsiveness is one choice: which breakpoint a layer stacks at | Grids, hero layouts and anything under 250px wide need manual work at each breakpoint |
| Variables sync one collection and mode at a time | Light and dark modes take more than one sync |
| Conflicts resolve as accept, new component, or revert in Figma | Choosing "new component" ends syncing for that component |
Source: Webflow Help Center, Figma to Webflow plugin and app, updated 2026-09-08; Webflow Blog, January 2026
The class point matters most to an agency. A Webflow build that a client or a second developer can maintain depends on a naming system. Finsweet's Client-First, the most widely documented one, separates custom classes with an underscore, such as footer_column, from utility classes without one, such as text-color-primary, and organises variables into base, theme, typography, layout and sizes groups. The plugin can carry that system across only if the Figma layers already use those names. Most Figma files we would receive from a client's designer are named for designing, not for building.
Relume: a library instead of a converter
Relume solves the handover from the other end. Instead of converting an arbitrary Figma file, it gives the designer and the developer the same component library on both sides. Its Site Builder turns a brief into a sitemap, wireframes and a style guide, and exports to Figma, Webflow or React. Its pricing page lists over 1,000 Figma components on every plan, including Free, and over 1,000 Webflow components on the paid plans: Starter from $18 a month, Pro from $40 a month and Team from $36 a month with a minimum of three users. The Free plan includes 30 Webflow components. Relume says its library works with Client-First.
That makes Relume the better choice when the design has not been drawn yet. A designer working from Relume's Figma kit produces frames that already have a Webflow twin with a sensible class system. It is a weaker fit when a client arrives with a finished bespoke design, because the library cannot convert it; someone still has to rebuild the parts that do not match.
The marketplace data shows both habits. Relume's import app has 113,722 installs and an uninstall count equal to 2.2% of them; Figma to Webflow's equals 1.3%, against 6.2% across the whole marketplace. Teams that install either one tend to keep it.
Figma Sites and the code converters: different destinations
Figma Sites. Figma launched Sites in open beta at Config 2025, and its Help Center still describes it as an open beta in October 2026. It designs, prototypes and publishes a site from Figma, with breakpoints, interactions and a CMS of collections, list blocks and template pages. Editing and publishing need a Full seat, and publishing to a live domain needs a paid plan. Published sites are hosted on AWS in the United States, with Cloudflare serving the domain. For a designer's portfolio or a campaign page, it removes the handover entirely. For a B2B marketing site that has to sit next to a CRM, a consent tool and an SEO process, it is a different platform to evaluate, not a route into Webflow.
Figma to code converters. Anima and Builder.io's Visual Copilot turn frames into code. Builder.io lists React, Angular, Vue, Svelte and HTML among its outputs; Anima offers HTML and React, with 5 code generations on its free plan. Neither produces native Webflow elements, so for a Webflow site the output is at best a reference. They are the right tools when the destination is a codebase. We build applications in Next.js, and that is where we would consider them.
AI agents over MCP: the newest route
The route that has changed most in 2026 joins two Model Context Protocol servers. Figma's MCP server gives an agent structured design context: frames, components, layout and variables. Webflow's MCP server lets an agent create pages, styles, components, variables and CMS content in a Webflow site. An agent with both can read a Figma frame and build it in Webflow with your class names, if you tell it what they are.
| Server | Who can use it | Limits | What the vendor says about output |
|---|---|---|---|
| Figma MCP server | Starter, Professional, Education, Organization, Government and Enterprise plans | Starter or View and Collab seats: 20 tool calls a month; Full or Dev seats: 200 a day on Professional and Organization, 600 a day on Enterprise | "Isn't a one-click way" to finished code; returns React and Tailwind style context for the agent to translate |
| Webflow MCP server | All Site plans, including the free Starter plan; any site role except Reviewer | Respects existing role permissions; page branches and an activity log on Enterprise | Builds pages, styles, components, variables, CMS items and interactions from prompts |
Sources: Figma Help Center, Guide to the Figma MCP server and Figma MCP server FAQs; Webflow Help Center, Webflow MCP server overview; all read 2026-10-25
Figma's FAQ is unusually frank: the server passes design context to the agent, and the result depends on that context, the model and how clear the prompt is. Webflow lets a site store reusable instructions, skills and rules, that connected agents can read, which is where a class system and naming rules belong. On Webflow Enterprise, page branches let an agent build in isolation before changes are merged.
This is the route we would watch most closely, because it is the first one that can follow an agency's own conventions rather than the plugin's defaults. It still needs a developer to review every page, and it moves the work from building to specifying and checking.
Why a hand rebuild is still often faster
Each route above saves time on one part of the build and leaves another untouched. We have built over 20 Webflow sites in twelve months, at two to three weeks per site, including white-label work for Web Tonic. Three reasons would keep a hand rebuild as our default.
The structure is the slow part, not the drawing. On a marketing site, the time goes into the class system, responsive behaviour at each breakpoint, interactions, CMS templates and the heading outline. The plugin converts the drawing and leaves most of those to be redone: variants, breakpoints beyond a single stack setting, and tags assigned from layer names.
Cleaning a sync can take longer than building clean. Renaming dozens of auto-generated classes, merging near duplicates and fixing heading levels is slower than placing elements into an existing class system. Webflow's own guide says a file of loose screens "becomes hours of cleanup".
Handover needs a system a stranger can read. Our largest Webflow CMS holds over 1,200 items. At that size, every Collection template has to be built for editors first, and that comes from the class and CMS design, not from Figma.
What we would sync rather than rebuild: variables, text styles, icons and images. Those transfer cleanly through the plugin, and syncing them first means the hand-built components reference real tokens from day one.
What this means for your Figma to Webflow workflow
Our bias first: we build marketing sites in Webflow and sell the build, so a manual rebuild suits us commercially. With that said, here is how we would choose.
| Situation | Route we would use | Why |
|---|---|---|
| Design system in Figma, built with auto layout and variables | Plugin for variables and styles; build components by hand | Tokens transfer cleanly; components need your class system |
| No design yet, fast timeline | Relume Figma kit and Webflow library | Designer and developer share one library |
| One-off campaign page by a designer, no CMS | Figma Sites or the plugin | Publishing speed matters more than maintainability |
| Destination is a React or Next.js codebase | Figma MCP server or a code converter | Webflow is not the target |
| Large site, strict naming, experienced developer | Figma and Webflow MCP with written rules, plus review | The agent can follow your conventions if they are written down |
Source: our recommendation, from the tool documentation above
The plugin is the right first install for almost every team, because variables and styles are the cheapest part to transfer and the easiest to get wrong by hand. Beyond that, decide by who will maintain the site after launch. If a marketing team will edit it for years, the class system and CMS deserve a deliberate build. Our marketing websites service page explains how we scope a Webflow build from a client's Figma file.
