The Figma to Webflow module, worked by Webflow Labs, allows you to transform your static plans into clean, creation prepared Webflow HTML and CSS. Add Webflow Connections, wire up satisfied utilizing our strong CMS, and a single tick distribute onto the quickest facilitating framework.

This is the secret:

Introduce + interface. Approve admittance to the Webflow destinations or work areas you’ll use to move plans from Figma to Webflow.
Plan + Sync or Duplicate + Glue. Make with auto format in Figma, then pick: consistently sync your whole plan framework or specifically duplicate components into Webflow for responsive flexbox designs — change HTML labels inside Figma to accelerate going live.
Clean + distribute. Rejuvenate your static plans with IX2, wire up satisfied utilizing Webflow’s strong CMS, and a single tick distribute onto the quickest facilitating foundation.

Two techniques to plan in Figma and send off in Webflow:

Pick what best accommodates your work process for a consistent plan to-web process.

Plan Framework Sync: Joins your parts and factors for reliable plan across projects. Ideal for enormous scope or group projects.
Duplicate + Glue: Physically move explicit plan components for fast updates or more modest undertakings, offering adaptability and speed.

Extra elements:

Plan Framework Sync, parts and factors
20+ prebuilt designs and responsive designs to flawlessly switch over completely to Webflow — and are responsive across gadgets.
Your styling, formats, tones, text, and pictures will move consistently when you glue into Webflow
Programmed style guide creation — make a style guide page in Webflow based off the text and variety styles you’ve made in Figma
Support for north of 50 CSS announcements
Support for trading vector hubs as SVGs

What is upheld:

Part synchronizing (material determination)
Factors synchronizing (tones and number qualities)
Outright position
Auto format
Foundation pictures and straight inclinations
Line styles
Pictures
Obscurity
Shadow styles
Typography styles
Vector and shape change to SVGs

Work process tips

Work process ways to adjust:

Prior to synchronizing, ensure you’ve chosen the proper from inside the Module
Open both the Module in Figma, and the Application in Webflow
To open the Application in Webflow, see the Applications board
Twofold check your part is set to Figma auto-format

Work process tips for duplicate and sticking:

On glue, Webflow class names will be gotten from layer names. Webflow will naturally apply existing classes when similar styles are distinguished on an imported component.
Add a prefix to all imported classes from the settings menu in the event that you might want to separate designs imported from Figma.
Pre-assembled design and construction formats are worked with auto format and are completely responsive when glued into Webflow. It won’t switch them over completely to local Webflow line/sections or framework.
Every gathered layer and Vector layers will send out as SVGs. This can be convenient for complex multi-facet designs.
Prepend your text layers with [H1]- – to apply HTML labels all the more rapidly. This applies to headings [H1-H6], sections [P] and joins [A].

Admonitions and future upgrades

The module right now just backings replicating or synchronizing of Figma auto format outlines. We’re investigating supporting non-auto format outlines
While Figma has modes and various assortments for factors, Webflow doesn’t uphold modes and has one assortment: default
Adjusting presently works at the site level, and we are researching synchronizing to work areas
The module doesn’t decipher prototyping collaborations from Figma. Clients can apply Webflow Communications subsequent to sticking plans over
The module doesn’t move or adjust custom textual styles. Assuming you’re involving custom textual styles in Figma, you’ll have to transfer them to your Webflow website before duplicating
Suggested limit of 100 parts for each sync
For reorder highlight, occurrences are not upheld. Isolate examples prior to replicating. Ace tip: tapping on the ⚠ symbol will choose all cases layers to make it simple to disengage at the same time
Webflow factors won’t be naturally made while duplicating over variety styles from Figma. You’ll need to physically make the factors after in Webflow or utilize the Plan Framework Sync component to import Figma factors
All Webflow classes are interpreted 1:1 with Figma casings’ names. Because of the ongoing duplicate/glue impediment on the Webflow Originator, the module can’t recognize whether a class is now utilized in Webflow, which might prompt class duplication. The best workaround for this is to utilize the exceptional glue order that permits you to keep away from class duplication. Learn more in the “Dividing styles among Figma and Webflow” here.

Peruse our Documentation to assist you with beginning and leap to our Gathering to get support from the local area and staff.

About Webflow Labs

The Figma to Webflow module is worked by Webflow Labs, an inside advancement and brooding group zeroed in on enhancing Webflow’s center item across no-code and web improvement networks. Items fabricated and sent off by Webflow Labs have restricted help through our standard help channels and are dependent on future developments or evacuation whenever. You can learn more here.