Optimal Workflow: Figma Versus Webflow

At a glance

A community member questions the optimal workflow between Relume, Figma, and Webflow, wondering if designing in Figma before building in Webflow is redundant when they could potentially just style wireframes directly in Webflow.

The discussion reveals several perspectives on the workflow. Some community members suggest that while it might seem like double work, Figma offers more flexibility for design iterations and layout adjustments. The recommended workflow involves generating in Relume Sitebuilder, setting up style guides in both Figma and Webflow, and maintaining the same structure throughout.

Regarding the Figma to Webflow plugin, community members note that it's not yet optimal as it can cause loss of pre-built responsiveness from Relume components. There's acknowledgment that the current process requires manual syncing between platforms, with some suggesting this might be automated in future updates.

The consensus seems to be that while you can go straight to Webflow, using Figma first provides better design flexibility, despite the extra step. The choice ultimately depends on personal preference and specific project needs.

BBlair

I've used Figma for a long time.
I have just started using Relume and understand the concept (copy and paste components that work in Figma and Webflow).

What I have seen in various YT vids is:

Create sitemap
Create wireframes
Import into Figma
Apply styles and images etc
Then export wireframes from Relume to Webflow

I understand this process. My question is: is this the intended or optimal workflow? I feel like I'm designing the site in Figma and then building it in Webflow, which is essentially the same process.

I also see there is a Figma to Webflow plugin and Webflow app.

Again, when it comes to optimal workflow, is there a benefit to using Figma when I can just style a wireframe and add images to Webflow?

Any advice appreciated 😊 thanks team.

7 comments

DDan

Hey Blair! That looks like a good workflow. What are you building for exactly?

What I highly recommend is:

Generate in Relume Sitebuilder
Set up style guide in Figma
Export to Figma (Add design and keep the same structure)
Set up style guide in Webflow
Use the same structure and go from Relume > Webflow. That way you have the base of your website already built and all you need to do is style it according to Figma!

Also, we've actually created this full walkthrough to show you the power of Relume and how it integrates into other platforms. Hope you find this helpful!

BBlair

Building a website for a sports coaching business (is that what you mean?)

So you style in Figma and then style in Webflow? Like style twice?
Not saying that is a bad idea, I just want to do the minimum amount of work possible to get the same result (a Webflow site).

BBlair

What about Figma to Webflow plugin? Is that not a reliable way to bring all the Relume components into Webflow?
I saw that one approach is to import Relume to Figma and then detach and create components in Figma.
Then use plugin to sync to Webflow. And keep components and variables (styles) in sync. So Figma is your source of truth.

Would Relume components still function correctly, e.g. the animated scrolling galleries etc?

Is this approach recommended?

SStefan C

not to disrupt the convo, but I saw the same opportunity for streamlining and asked about this as well. It does feel like a duplication of work and you have to update both to manually to keep them in sync.

I wouldn't be surprised if this becomes a feature in the future.

LLucas Malou

Hey, I'm a bit new to relume, how does it work with deploying it eventually, does it have to be deployed on Webflow? And my second question do I need to pay also for webflow or Figma some additional money to be able to customize it, buy domain and deploy?

DDonio

In my experience, Webflow is powerful for development, but Figma gives you more flexibility when designing. That's why I find it works well to design everything first in Figma, then move it to Webflow for building the final website.

LLeon Vermij

it's basically your own descission. you could go straight to webflow and make it high fidelity there. but adjusting layouts and tryout different options in figma is just easier. so most designers would go to figma first and the use those final designs to go and start building the web components in webflow.

figma to webflow plugin isn't as good yet. you would loose a lot of the prebuild responsiveness that you would get from importing components from relume to webflow. but maybe to in the future that might be te workflow to go

Add a reply

Community forum for knowledge and support

Optimal Workflow: Figma Versus Webflow