Webflow & Figma: New Updates for Effective Web Design

Av:
Ali Haider
23/6/2025
Figma till Webflow plugin - synkronisera, variabler och stilar för smidigare webbutveckling

Webflow has recently released a major update for its Figma plugin, making it easier than ever to synchronize components, sections, variables, and styles directly from Figma to Webflow. These new features provide web developers and designers with improved workflows, more possibilities, and enhanced performance. Let's walk through the most important improvements in this update and how you can use them to create faster and more effective web projects.

Webflow Update: The Latest Features You Need to Know in 2025

Together, Webflow's Figma plugin and its accompanying Webflow app allow you to transform static design files into production-ready websites. Webflow is now launching a comprehensive update to its Figma integration, which improves workflows, adds new features, and enhances performance and accuracy.

With this update, you can now synchronize components, sections, variables, and styles directly from Figma to Webflow. This gives teams and designers even greater flexibility to build sophisticated websites faster than before.

The updated Figma plugin is organized into three central workflows: Layers, Variables, and Styles.

Layers

At the core of the new Figma to Webflow experience is the Layers tab, which allows you to synchronize or copy Figma layers directly to Webflow components and elements. Now you can synchronize multiple layers, mix frames and components, or copy a single layer and paste it directly onto the Webflow canvas.

When you synchronize updates to an existing component, the app makes it easy to quickly accept these changes or review each adjustment in detail. Webflow has also improved the heuristics for assetmanagement, meaning all images and icons now synchronize more smoothly and accurately. Furthermore, performance has significantly improved and certain designs are now processed up to 30 times foster than before.

Variables

With this update, variables have received their own section in the plugin, meaning you can now synchronize Figma variables directly to Webflow. The function allows you to select collections from the Figma library and local variables, while also giving you control over which groups to synchronize.

You can also choose units for each variable, such as px, em, or rem and set a standard size for fonts in the plugin settings. Webflow has confirmed that they will soon introduce full support for the recently launched variable collections and modes, which will further improve the workflow for designers and developers.

Styles

The new Styles function allows you to synchronize text and effects from Figma to Webflow classes, making it easy for you to manage typography, shadows and filters without extra manual work. Class prefixes can be adjusted directly in the plugin settings, where 'Text" and 'Effect" are used as standard.

When you synchronize updates of a Style, the app shows exactly which properties have Changed, making it easy to review and accept changes with a single click.

What Does This Mean for Webflow Users?

The latest update to Webflow's Figma plugin brings enormous improvements to the design and development process. For designers, this means a smoother workflow, less manual work, and more intuitive synchronization between Figma and Webflow.

• Improved workflow and faster design transfer

• Seamless management of components, variables and styles

• Significantly better performance and up to 30x faster processing of certain designs