Figma to Webflow App

In this lesson, you’ll learn:

1. How to launch the Figma to Webflow App
2. How to sync and import variables and components
3. How to sync previously-imported components
4. How to review updates to components with conflicts
5. How to sync previously-imported variables

How to launch the Figma to Webflow App

First, open your Webflow site, and launch the App from the Appspanel. Then:

1. Go to the Figma plugin
2. Go to the Design System Sync tab
3. Make sure the correct site is selected in the dropdown (i.e., the site with which you’re syncing the Figma plugin) 

Once the plugin shows that it’s connected, you can sync variables and/or components.

How to sync and import variables and components

Set global units for number variables

If you want to globally change the units used for number variables, you can do so in the Figma plugin modal. Then, all variables will use the specified unit when syncing to Webflow.

1. Go to the Figma to Webflow plugin modal window
2. Go to the Design System Sync tab
3. Click the icon in the upper right corner, next to Design system sync‍
4. Click Plugin settings‍
5. Use the Number variables unit dropdown to set the global units (i.e., px, em, or rem) for number variables
6. Go back to the Design System Sync tab
7. Click Sync to Webflow

Then, you can go back to Webflow and sync your new number variables unit in the App modal window by clicking Import and update variables. Any variables currently in use on the canvas will be adjusted to the new number variables unit.

Note: Figma only displays variables in pixels, so your imported designs may look differently in Webflow than they do in Figma.

Syncing and importing variables

To choose which variables to sync and import:

1. Go to the Design System Sync tab
2. Click the “variables mode” icon in the top right corner
3. Select the variables you want to sync
4. Click Sync to Webflow

Then, you can go back to Webflow to import your variables in the App modal window. You can check or uncheck boxes to choose which variables to import. Then, click Import variables. Once you’ve imported variables, they’ll appear in the Variables tab.

Syncing and importing components

To choose which components to sync:

1. Go to the Design System Sync tab
2. Click the “select mode” icon in the top right corner
3. Select one or multiple components on the Figma canvas by using Shift + click
4. Click Sync to Webflow

Once the plugin syncs your components you can go to your Webflow site and review updates in the Figma to Webflow App. 

1. Click Import new components to review the newly synced components
2. Select which components you want to import to your Webflow site
3. Click Import component(s)

Once you import a component from Figma, Webflow has a connection to that component. Later, you can re-import the same component from Figma and review its design updates directly in Webflow. Note that only element positions and styles are updated. If you have properties or bindings they’ll remain in Webflow.

Note: Component variants are imported to your Webflow site as duplicate components unless you deselect them when syncing.

How to sync previously-imported components

To sync component(s) you previously imported to your Webflow site, first go to Figma and open the plugin window. Then:

1. Make sure the correct site is selected in the dropdown (i.e., the site with which you want to sync your components) 
2. Click the “select mode” icon in the top right corner
3. Select the component(s) on your Figma canvas
4. Click Continue in the plugin modal window
5. Click Sync to Webflow
6. Open the Figma to Webflow App in your Webflow site
7. Click Component updates in the app modal window

Then, you can click each component to view:

• Styles that have changed (e.g., color, font, etc.)
• Variables added to or updated with the component
• New elements added to the component

You can click Update Component Styles and Variables to update a single component from its preview, or click Update all components from the Review component updates page. All instances of the component(s) will update across your Webflow site.

How to review updates to components with conflicts

Conflicts in previously-imported components occur when you’ve removed one or multiple elements from your components in Figma and those elements are still present in Webflow. To review updates to components with conflicts, click Component updates with conflicts in the app modal window. Then, you can click each component to view its missing element(s). 

From there, you have three options:

• Delete missing elements — update all instances of the component in Webflow as usual (this will remove the element(s) in the component)
• Import as un-synced component — import the component as is to Webflow. The component can’t be synced from Figma to Webflow in the future.
• Revert changes in Figma — you can go back to Figma and add the removed element(s) back to the component, which will remove the conflict

How to sync previously-imported variables

To update variable(s) you previously imported to your Webflow site, first go to Figma and open the plugin window. Then:

1. Click the “variables mode” icon in the top-right corner
2. Click Continue
3. Select the variables you want to sync
4. Click Sync variable(s) to Webflow

Any variables that have been updated in Figma and synced to Webflow will appear in the App modal window. The window will display the variable’s initial value and the new value. You can choose which variables to import, then click Update variable(s).