Community forum for knowledge and support

Updated 11 hours ago

Navigating Design Changes in Your Relume/Figma/Webflow Workflow

I've looked for this in the knowledge base and slack but can't seem to find a straight answer: how do you deal with regular changes to the design in your Relume/Figma/Webflow workflow? I get it when we start from scratch, but what about additions (new pages) and changes to the style guide? I would love to leverage relume for that but it becomes a mess when you don't know where's the source of truth (Figma, Webflow, or Relume?). We make small tweaks directly in Webflow like everybody I believe.

A
M
V
3 comments

@Veronica AI told me this. I hope it's help you.

The key workflow limitations to understand are:
There is no two-way sync between Relume, Figma, and Webflow
Once you import Relume components into Figma or Webflow, they lose their connection to Relume
The Figma to Webflow plugin is not fully compatible with Relume's system
For managing ongoing design changes,

here is the recommended workflow:
Generate initial wireframes in Relume Sitebuilder
Set up and customize your style guide in Figma
Export wireframes to Figma for detailed design work
Once design is approved, move to Webflow for building
Make minor tweaks directly in Webflow

For handling new pages or sections after initial setup, you have these options:

Import just a single new page from Relume to Webflow
Import specific new components/sections from Relume to Webflow (these will inherit your existing style guide settings)
Keep in mind that any design changes made to previously imported sections won't sync - you'll need to manually implement those changes.

The most efficient approach is to use Webflow as your final source of truth for the live site, while maintaining your design system in Figma for future reference and consistency.

I consider my process a one way street, no matter what. I've been where you are, and its just simply not worth it at this time to be jumping back and forth between all the tools. I try to be as up front with my clients as possible - painting a really clear VISUAL picture of the process, and I make it very clear that we'll get approval from them before moving to the next steps. Doesn't mean changes can't happen - I like to say at certain points that we're working with sand, not concrete. But at some point, the concrete will harden and changes will be harder to make the further down the pipeline we go. Having this open, informal conversation is important.

When the rubber hits the road and you actually have to set your foot down...that's where things likely start to not feel fun but you have to remind yourself that you have a process for a reason. It should not be walked all over. YOU have to trust the process, and so do your clients.

That said, tactically, if a new page comes up, I just make that change right in Webflow. If I need to create a design first, I'll go into Figma, design it, get approval, then go to webflow. Rarely do I go back into Relume to add the page to the sitemap, generate a wireframe, etc. I guess this is where AI will likely never replace designers. And if you are super reliant on AI to do this kind of work, I would strongly encourage you to dive into some Figma/Webflow resources to help with this pain point.

If you wanted to have posterity across all of those tools, I suppose you could add the new page to the sitemap and generate a wireframe, make your edits and what not but syncing those changes into Figma or Webflow likely won't be a great idea. I typically just copy/paste those individual pages into Figma/Webflow.

But 99% of the time, I'm just using what I've already built within Webflow and creating that page directly in Webflow. Can grab components directly from the chrome extension so I never have to leave Webflow.

Thanks for sharing. Sounds like the TL;DR is that there is no proven workflow besides the first creation

Add a reply
Sign up and join the conversation on Slack