Avoid Double Work: Syncing Relume Style Guide from Figma to Webflow
Is there a way to avoid double work when I define the Relume style guide in Figma and I want the same thing in Webflow?
Ok just want to make sure, so the best way is copying everything by hand? :')
well you can use the webflow app to import the wireframes/components into webflow, but yeah any styles, colors, etc would all have to be re-applied in Webflow. That's why for me, its important that my process is very linear from starting with sitemap, wireframes in Relume, import into Figma for any remaining edits and approval, then design, and only after everything is approved do I move to Webflow. Once I've moved to the next step, I dont move backwards.
Yeah I've done similar. However I don't use the Relume wireframing toolkit, I like to do wf in Figma because of flexibility, keep it a bit more rough, more customized for the client. So I figure out what components I need to use in Webflow as-is and what do I need to modify or create from scratch.
Sometimes I fear using the toolkit too much. Could close me in a bubble and do less creative ideas visually. It's actually a really interesting process and still figuring out. Having this 1000+ great template but still trying to do original designs. That's why I like to disregard the templates a bit for a landing and check after what's matching with my conceptual sections. But subpages and less prominent pages can be more generic though
yeah totally makes sense. You can see that happening live when we were doing the Relume Design League - I think its a pretty common thing to do. For me, wireframes serve a completely different purpose than the design phase does. For me, its about capturing the content and setting the cadence/order of priority of said content. Getting approval of that first before moving into design can help a lot. But yeah, once you get into the design phase, maybe even using the components as a starting point and unlinking any instances and maybe even removing any auto layout so you have full control - or like you said, referencing the original component but freely designing the section out to remove any constraints makes complete sense. I would challenge you to see how you can incorporate wireframes (or the Relume Site Builder) into your process as I think it could help tremendously speed up your Figma to Webflow process. And not because I work at Relume, honestly - does not much matter to me personally whether you use all of our tools or not. I am truly just trying to help out!
I'll definitely try out on another project sometime. Currently I try to create reusable components in Webflow for almost everything. So exporting all as static from relume maybe not going to work. This way I can give a toolkit where clients can create pages and populate with contents. Unfortunately I still find limitations in Webflow for a great experience like that... Don't know I should try it out next time 馃槃