- Figma to Webflow — what it means
- Figma to Webflow is the official plugin and app for copying and syncing Figma designs into Webflow. Frames built with auto layout convert into responsive flexbox structures, and layer names carry over as Webflow classes.
Here are the answers to that question. Copying designs from Figma into Webflow became possible in February 2023. The announcement that the Figma plugin had been released came from Webflow’s Twitter account. I shared it from my own Twitter account immediately and asked whether anyone wanted a write-up.
At last, the era of pasting designs straight from Figma into Webflow has arrived.
My own reaction was “the speed probably will not differ much from implementing it in Webflow”, but this is absolutely not that kind of feature.
Would anyone like an explanation in Japanese? 🤔
If there are enough likes, I will publish one— Haru | Webflow specialist blog (@METANA_flow), post of February 4, 2023
My Twitter account had only just started and gathered almost no response, but looking at Google search volume and the buzz on Twitter I judged that it was needed, so I decided to write the explanation.
I run a business on Webflow, and companies trust me with Webflow coaching, production and SEO work. From that position, I will explain how to copy designs from Figma into Webflow. Thank you for reading.
Note: this article was published in February 2023. In July 2026 it was heavily expanded with where the plugin stands now and my honest verdict after three years of using it in real client work.
The 2026 conclusion: I barely use this plugin anymore
I called it a “revolution” at launch and spread the word, but three years on, here is my honest conclusion first. I have almost stopped using this plugin in real client work. There are two reasons.
- The auto-layout requirement is heavy. To copy and paste, the Figma side has to be built entirely with auto layout. If you are going that far, the effort is barely different from assembling it in Webflow from the start
- Compatibility after pasting is poor. Plenty of breakage and adjustment turns up once it lands in Webflow. Build in Webflow from the start and those fixes never happen — you go straight through to a finished site
You end up choosing to build directly in Webflow. That is my conclusion, and most users have probably reached the same one. For all the excitement at launch, I almost never see it used on real projects.
Does that make Figma unnecessary? No. Figma’s strength is being able to see the whole design at once and agree on it before you publish. So my practical answer is this.
- On the Figma side: use AI image generation and simple mockups to reach agreement on the look
- For the build: assemble it directly in Webflow from scratch (no copy-paste with the plugin)
I have taken on several “Figma to Webflow” requests myself, and every time the approach settles into this same shape — create a clear picture of the site in Figma with AI, and do the build itself in Webflow.
Where Figma to Webflow stands in 2026 (it has evolved into design-system sync)
If you are asking whether the plugin is finished, the answer is that its direction changed. It has gone from a one-shot copy tool to a tool that syncs design systems between Figma and Webflow. Here is the official picture as of 2026.
- There are two forms. The plugin is a one-shot copy (Copy to Webflow), and the app is continuous sync of components and design systems
- Auto-layout frames convert into responsive flexbox structures (auto layout is still mandatory)
- Figma layer names become Webflow class names as they are. Images and vectors upload to assets automatically
- Supported CSS declarations have grown past 50, and pre-built layouts past 20
- Figma components sync to Webflow components, and Figma variables sync to Webflow variables (design tokens)
- Sync can now be started from the Figma side alone (no need to open the plugin and the app at the same time as before)
In other words, what this tool now suits is not the individual hoping to save effort with copy-paste, but a team that has a design system in Figma and is maintaining it twice over alongside Webflow. If that is not you, I think knowing the basic procedure below is enough.
How to copy a design from Figma into Webflow
The basic procedure has not changed since launch. The reference is the video below, which I will explain in my own words. At the end of this article there is also a video of me actually copying a design from Figma into Webflow, so please watch it if you have time.
Here are the steps we will follow.
- Get the Webflow plugin in Figma
- Start a project
- Build the layout
- Try copying it over
Let us get straight into it. The video this explanation follows is here ↓ (in English)
Step 1: Use the Webflow plugin in Figma
To copy a Figma design into Webflow, you need to use the dedicated plugin inside Figma. You can get the Figma plugin here.
→ Figma to Webflow, official (English)
Step 2: Start a project
Once the Webflow plugin is showing in Figma, press “Try it” and start a new Figma project. You can also search for it from the Figma community.
Step 3: Build your layout using the plugin
Once the plugin is installed, Webflow layout features appear alongside ordinary Figma. Drag designs in from there to build your design in Figma.
The first time you open it, a Webflow connection screen appears, so select the project you want to copy the design into and link it.
It is not that you can copy and paste an existing Figma design: using the auto-layout feature is mandatory. If you build a complex layout and copy it over, parts get force-pasted as images, drop shadows fail, and so on. When you use auto layout, each item gets a name shown against it, such as “Column”.
Those names carry over as classes when you paste into Webflow. So think about clear names right from the Figma design stage
Step 4: Copy the finished design into Webflow
Once the design is built, “Copy to Webflow” turns blue and you can click it to copy. If it does not turn blue, the link with your Webflow site is not set up, so choose the destination from “Choose Webflow site” just above the copy button.
After that, all you do is paste it into the Webflow project in question. That is the copy from Figma into Webflow finished. Note, by the way, that there is no reverse export from Webflow back into Figma.
Which is faster, building in Webflow or building in Figma?
“It depends which tool you are used to” felt like a non-answer, so I will talk on the assumption that you are comfortable with both.
For design alone, Figma
For designing the broad layout and placing images and assets, I find Figma faster. You can design by drag and drop, and you can create assets and export them as SVG. The problem is that you have to design to the Webflow plugin’s requirements — that is, build everything with auto layout. Which is exactly why I limit Figma to mockups made with AI.
For items with settings to change, such as contact forms, Webflow
For parts where you are not only designing but changing settings, such as building a contact form, I find it faster to build in Webflow.
When you are changing the design of a Webflow template, there is no way to move the design into Figma either, so you will be working in Webflow.
Our roundup of recommended templates is here
→ Six impressive Webflow templates, free to use
[2026] Before Figma to Webflow, start from choosing how you build
Finally, let me write honestly what I think as of 2026. With the progress of AI, even the position of Webflow as a tool is wavering. That is because the options for how to build a site are changing at the root.
- Large companies, and companies that put security and governance first → Webflow production and operation suit you. It remains strong on permission management and stable operation
- Individuals through to small and mid-sized businesses → building the site with AI is the smartest choice, I think. It is fast and cheap, and the quality is already good enough for real use
This blog’s own site was in fact fully rebuilt with AI (Claude Code) in seven days. You can read the production process in the article that documents every stage.
We offer both Webflow production and AI website production, so we can judge which suits your company and report back free of charge. If you are wavering over a move from Figma to Webflow, come to a free consultation and start from the question of how to build. What our AI website production covers is set out here.
I actually tried copying from Figma into Webflow.
With plenty of grumbling along the way, I actually copied a design from Figma into Webflow. It is close to my first recording, so listening at double speed is about right. There is a summary at the end as well, so watching only that will get you through it faster.
FAQ
Can I copy an existing Figma design straight into Webflow?
No. Rebuilding it with auto layout is mandatory. If you copy a complex layout as it is, parts get force-pasted as images and effects such as drop shadows are not reproduced.
What is the difference between the plugin and the app?
The plugin is a one-shot copy via Copy to Webflow; the app continuously syncs components and design tokens. As of 2026 you can start the sync from the Figma side alone.
What should I do when the copy button will not turn blue?
The link with your Webflow site is not set up. Choose the destination site from “Choose Webflow site” just above the copy button.
Can I export a design from Webflow back into Figma?
No. There is no reverse export, and when you change the design of a Webflow template there is no way to move it into Figma either, so you will be working in Webflow.
In the end, what is the realistic way to divide work between Figma and Webflow?
In the author’s client work it settles on using Figma up to the point of agreeing on the look, with AI image generation and simple mockups, and building in Webflow from scratch. It ends up faster with fewer fixes than building everything with auto layout for copy-paste.
