How To Import Figma To Webflow

‍

Webflow supports and builds a powerful plug-in called Figma to Webflow which allows you to bring your Figma designs directly into Webflow, here is how you can get started with it:

1. Search for and visit the Figma to Webflow plug-in page. You can do this both from the inside the editor using the Apps menu or by searching for the dedicated plug-in showcase page. Once ready, click on Install plugin.
2. This will take you to the Figma page, click on Open in Figma.
3. Log-in to your Figma account.
4. Once inside Figma, you can find the added plug-in inside the Resources tab. Click Run to continue.
5. You will be greeted with some introductory guides, click on Next to continue.
6. When done, you will be prompted to connect your account between Figma and Webflow. Click on Connect account.
7. Make your selection for which Workspaces or Projects you wish to add the plug-in to. When done, click on Authorize App.
8. Your Webflow account is now linked to Figma. Go back to your Figma page.
9. After the linking is done, click on Start.
10. Under the new selection window, you can select the Project to add items to. Click on the dropdown menu.
11. Select your Project.
12. You can now click on pre-made items to add them to your canvas.
13. You can also use the settings icon to copy certain settings such as colors and styles.
14. They will then be copied to your clipboard for use.
15. You can also sync your designs into Webflow using the Design System Sync tab.
16. If your plug-in window is not open in webflow, you will be prompted to enable connection by doing so.
17. To do so, open the Apps section from the left sidebar menu.
18. Locate the Figma to Webflow app and click to open.
19. Click on Launch App.
20. Once open, it is ready to sync.
21. Back inside Figma, you will notice that the Project is now green and ready.
22. You can now make selections inside Figma.
23. And/or elements.
24. Click on Continue once elements are selected.
25. You will be prompted with a review of your selection. Click on Sync to Webflow to continue.
26. Back inside Webflow, the plug-in window will now contain the Figma elements to be imported. Click to expand.
27. Verify and then click on Import.
28. A pop-up will confirm your imports were successful!
29. These components are now available to use inside Webflow, you can browse them through the Components menu.