Quick summary
The Figma to Webflow plugin lets designers import Figma frames, components, and design tokens directly into a Webflow project without manual rebuilding. Once installed and authorized, the plugin syncs selected Figma elements to Webflow in just a few clicks, making design-to-development handoff significantly faster.
Steps
- Search for the Figma to Webflow plugin page — accessible via the Webflow Apps menu or the plugin showcase — then click Install plugin.
- Click Open in Figma to be redirected to the plugin's Figma community page.
- Log in to your Figma account to continue.
- Inside Figma, locate the installed plugin under the Resources tab and click Run.
- Click Next to move through the plugin's introductory onboarding guides.
- When prompted, click Connect account to link your Figma and Webflow accounts.
- Select the Workspaces or Projects you want to grant access to, then click Authorize App.
- After authorization, return to your Figma page to continue setup.
- Click Start to complete the account linking process.
- In the new selection window, click the dropdown menu to choose a Webflow Project to import into.
- Select your Project from the dropdown list.
- Click on pre-made items in the plugin panel to add them directly to your Figma canvas.
- Use the settings icon to copy design properties such as colors and styles to your clipboard.
- Copied settings are now saved to your clipboard for reuse.
- Switch to the Design System Sync tab to sync your Figma designs into Webflow.
- If the plugin window is not open in Webflow, enable the connection by opening the Apps section from the left sidebar menu.
- Locate the Figma to Webflow app in the Apps panel and click to open it.
- Click Launch App to activate the plugin inside Webflow.
- Confirm the plugin window is open — it is now ready to sync.
- Back in Figma, verify the selected Project is highlighted in green, indicating it is connected and ready.
- Make your selections inside Figma — choose frames or individual elements to export.
- Select additional elements as needed for the import.
- Click Continue once all desired elements are selected.
- Review your selection summary, then click Sync to Webflow to push the elements.
- Back in Webflow, the plugin panel will display the incoming Figma elements — click to expand and review them.
- Verify the element list and click Import to bring them into your Webflow project.
- A confirmation pop-up will appear indicating your imports were successful.
- Browse the newly imported elements through the Components menu inside Webflow to start using them.
