Designed to be used alongside our Figma to Webflow Plugin, this App allows you to easily import your design system components variables directly into Webflow. All you need to do is install the Plugin, then you can design in Figma and launch in Webflow.
Here’s how it works:
- Install the Plugin: First, find and install the Plugin from the Figma Community, which automatically installs the companion App from the Webflow Marketplace into your Webflow account.
- Establish the connection: In Figma, access the Plugin by navigating to Resources → Plugins via the top-level menu. Then select the variables and components you wish to sync, and then choose the Webflow site from the dropdown within the Plugin. In Webflow, find the Apps panel, locate the installed App, and establish the connection. Relevant Figma guides: [variables] [compontents]
- Sync to Webflow: From Figma click the “sync” button from within the the Design System Sync section of the Plugin and it will transfer your chosen Figma components and/or variables directly to Webflow, where they’ll be imported seamlessly.
- Update with ease: Now that you’ve made the connection, and your components and variables are in Webflow, you can easily make changes from Figma and sync them to the same elements in Webflow for review and approval.
- Review and approve: Within Webflow, inspect all transferred components and variables, review any CSS changes, and approve the updates you want to apply to your Webflow site.
Learn more from experts in the new Figma to Webflow Course from Webflow University, coming soon!
Once you’ve synced your Figma components and their variables to your Webflow site, you can easily preview and accept changes to these components right in Webflow, and those changes can be automatically updated across your site. Nothing will be imported without your explicit consent, you have full control.
