Community forum for knowledge and support

Updated last year

Importing Figma Designs into Webflow

At a glance

A community member asks about the workflow between Relume, Figma, and Webflow, specifically about importing Figma pages and style guides into Webflow. They have created wireframes in Relume Builder, set up a project with Relume Figma Style Guide, and made customizations in Figma.

In response, another community member explains that there is currently no automatic way to transfer designs from Figma to Webflow. While Webflow Labs is developing a Figma plugin, it's still in early stages and doesn't follow Client-First guidelines. Users need to manually translate their designs from Figma to Webflow, with the difficulty depending on the extent of customizations made. Simple changes like colors and shadows are manageable, but there is a learning curve for those new to Webflow.

The original poster, who has experience with Angular development, acknowledges starting their first Webflow website using Relume but notes that the integration of the Figma style guide remains a missing piece in the workflow.

Hi everyone, I just started with Relume, Figma, Webflow to build a consist website. Now Im wondering how the development process works. Because, I started creating nice wireframes in Relume Builder. Second, I bootstrapped a new Project X based on the Relume Figma Style Guide within Figma. Thirth, I imported the wireframe pages into the Project X within Figma to match the Relume Style Guide with the wireframes. Fourth, I updated the Relume Style Guide in Figma to my wishes. And now comes the problem. How to import all my Figma pages into Webflow? I would assume I first need to import the Figma Style Guide into Webflow? Because otherwise the Figma pages do not have the correct styling within Webflow? I do see some video's that explain to update first the style guide within Webflow, but I already did this within Figma.

D
M
M
6 comments

Hey ! Matt from our team has created a full walkthrough here

ok, thank you, I will watch it!

So, I watched the video. What I not completely get is why Matt also creates a style guide within figma? He does that also within Webflow right?

as of right now, there is no automatic builder of your designs from figma into webflow. Webflow Labs has a Figma plugin that they are exploring this idea but its still in its early stages. That plugin also doesn't abide by any sort of organization or guidelines like Client-First - which is what we use to build our components and websites. So yeah, at some level, you'll have to learn how to translate your designs from Figma into Webflow. Relume is still there to help get a lot of that going - so it really just depends on how much you've changed in Figma. If you are mostly changing colors, removing borders, adding shadows, that kind of thing - it won't be a complete nightmare. But if you've never used Webflow to build a website or have never built a website before - there will be some learning curve for sure.

I have personally helped quite a few Lumers here in this community build out their first website - and this is no exception to you Martijn - if you have questions, pop them in here. We're all here to learn and all here to help. YOU GOT THIS!

Thanks for your answer Matt! I already started with my first Webflow website πŸŽ‰ using Relume to kickstart the project, I like it a lot. However, I believe the integration of the Figma style guide is an important missing piece of the puzzle. For years I have experience in building complex web applicaties in Angular, so I know my way in web development. Building websites with no-code tooling like Webflow was never my focus, somehow when I saw the Relume youtube movies and how it works in collaboration with Figma and Webflow gave me motivation to learn this space.

Add a reply
Sign up and join the conversation on Slack