Optimizing Your Workflow: Figma vs. Webflow for Design and Development | Relume Community

Optimizing Your Workflow: Figma vs. Webflow for Design and Development

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:

1.
Create sitemap
2.
Create wireframes
3.
Import into Figma
4.
Apply styles and images etc
5.
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.

🔥2

7 comments

Dan
·
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!
Blair
·
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).
Blair
·
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?
❤️1
Stefan C.
·
Blair 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.
🙌1
Lucas M.
·
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?
Donio
·
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.
Leon V.
·
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