Community forum for knowledge and support

Updated 8 months ago

Efficient Transition from Figma to Webflow with Personalized Style Guide

At a glance
The community member is new to Relume and Webflow, and has designed a website using the Relume library in Figma, including a personalized style guide. They are asking for the best and most efficient way to get their website from Figma to Webflow, along with the personalized style guide. They have tried using the Webflow to Figma plugin, but encountered issues with detaching instances and design system sync. The community member is considering rebuilding everything in Webflow, as copy-pasting with the Figma to Webflow plugin did not yield good results. In the comments, another community member explains that the Figma to Webflow plugin does not work well due to its nature and lack of consideration for Webflow's Client-First strategies and naming conventions. The community member suggests using Relume's own Webflow plugin, which allows importing site builder wireframes into Webflow and quickly changing design elements like colors, typography, and button styles using the Webflow Style Guide. However, additional design details and elements would need to be applied in Webflow while referencing the Figma design.

Hei from Norway!

New to Relume and Webflow. I’ve designed a website with the Relume library in Figma. I used the Relume style guide, which I personalised.

My questions: What is the best, most efficient way to get my website from Figma to Webflow along with the personalised style guide?

I see I can use the Webflow to Figma plugin, but I have to detach all instances first before being able to copy? And how does the design system sync work? So far it’s not connecting - I have the plugin/app open in Figma and Webflow.

So far it looks like I’ll have to rebuild everything in Webflow. Copy and pasting with the Figma to Webflow plugin does not return good results. I kinda wish I skipped Figma now 🫠

M
1 comment

yeah unfortunately the end result of using the Figma to Webflow plugin is not create because of the nature of the plugin. The plugin was built by Webflow. The plugin does not take into account the Client-First strategies and naming conventions, which is what all of our components are built on, thus the end result being less than ideal.

We have our own Webflow plugin that lets you import all of your site builder wireframes into webflow, and if you start by using our Webflow Style Guide, you can quickly change colors, typography, button styles, etc across all of those components and wireframes. From there, you would have to apply any additional design details, styles and elements to your site in Webflow, by referencing your design in Figma.

We open to solve for this pain point soon, so stay tuned!

If you run into any positioning or styling issues while trying to get your designs into Webflow, please feel free to ping me here, I'd be more than happy to help with any kind of issue - Relume related or not.

Add a reply
Sign up and join the conversation on Slack