Sync Figma Variables to Webflow Try It Now!

We’re excited to announce that the Figma to Webflow design system sync for variables is now in open beta! And, components sync will enter open beta Jan 30th.

What’s included

  • Sync Figma variables to your Webflow site with incredible precision.
  • Save valuable time with one-click syncs and real-time updates.
  • Review and approve changes within Webflow before changes go live.
  • Access to Components Sync (Open beta coming soon!)

How to get started:

  • For new users: Install the Figma to Webflow Plugin directly from the Figma Community site.
  • For existing users: Simply re-authenticate or log in anew to the Figma Plugin in Figma and your Webflow project.

Beta participation:

  1. Join the beta: Start using the Figma to Webflow Plugin’s new “Design system sync” tab and see how it transforms your workflow.
  2. Provide Webflow with your feedback: Share your thoughts and experiences in this group to help us improve.
  3. Leave Webflow a review: If you love the new feature, consider dropping us a review on the Figma Community page. Your support means the world to us.

Your site designs deserve a workflow that’s both dynamic and straightforward. By trying out this beta, you’ll not only get a feel for our latest in design-to-web technology but also help shape its future. Additionally, you’ll be among the first to know about the component syncing functionality, coming soon!

Join us in bringing Figma designs to life and straight to the web! Simply install or update your plugin and start transforming your designs with ease.

3 Likes

Looks great!

One thing though:
It seems like variable modes cannot be synced because Webflow only supports one mode/column. Is that correct?
If so, I would appreciate you to make the community aware of those limitations. Because on the first glance it seems like its possible to sync Figma variables 1 to 1 to Webflow, which – if I see it correctly – is not the case.

Other than that, I really appreciate your effort for the community. I think many people can benefit of your plugin.

Cheers,
Martin

hey there im newbie what is sync figma variables to webflow

1 Like

Will you guys be doing any syncing from Sketch to Webflow anytime soon? It would be nice to see some more integrations with other prototyping tools besides Figma.

It would be cool if the plugin creates the variables in Webflow in the same order that they are in Figma.

In Figma I have:

  • 900
  • 800
  • 700

Then in Webflow:

  • 900
  • 50
  • 800

Additionally, it would be great if we could reorder variables in Webflow by simply dragging them with the mouse. The current process of changing names is quite annoying and time-consuming.

2 Likes

I can’t seem to login to the link provided for feedback on the figma widget. So… I see an error when trying to bring over values with 0.
Screenshot 2024-01-22 at 2.07.45 PM

Hey @Schuschi_Eyes ,

Thanks for the shout-out and the heads-up! :blush:

You’ve got a sharp eye – currently, our Plugin does sync with one column from Figma to Webflow. We’re all about keeping things crystal clear, so we’ll make sure to highlight on the relevant resources.

By the way, we’re keeping track of limitations at Figma Community and Webflow University. I’ll make sure we include your suggestion.

We’re always on the lookout for ways to up the Plugin, so your feedback is super helpful. Keep the insights coming, especially when components syncing is made available.

Thanks for being an awesome part of our community!

Hey @espinosa

Love your suggestion! :star2: Matching variable order between Figma and Webflow, and a drag-and-drop feature for Webflow variables? Definitely on our radar.

Good news: a few small but mighty updates to variable management are on the horizon. Keep an eye out – we’re excited to make your workflow smoother!

Thanks for the great ideas. Stay tuned for more!

Hey @_paul

Sorry to hear that! I’ll forward this feedback to the technical team to see what they think. Are you able to provide some more details / specifics about how you arrived at this error? Which login link for feedback are you referring to?

Hey @GanzzGilly We appreciate the curiosity! If you’re a fan of designing in Figma, there’s now a way to sync with Webflow. Learn more here at Figma Community and here at Webflow University.

Anytime I try to pull in a figma variable with a value of zero, it seems to think 0 = null or something, it doesn’t seem to recognize it’s just “0”

2 Likes

Hey @_paul that’s an interesting one. I’ll forward to the product team, I appreciate the feedback.

1 Like