Optimizing Your Workflow: Figma, Relume, and Webflow Explained | Relume Community

Optimizing Your Workflow: Figma, Relume, and Webflow Explained

New to webflow, figma and relume and I have a question about workflow. What is the industry standard or what are the pros and cons of using Relume? Specifically, after I get my wireframes do I export to Figma and use time (bill clients) and then from figma to webflow? Or do I go from relume wireframes and export to webflow? As someone new to this process I see lots of resources like FIGMA TO WEBFLOW videos and relume has a relume>webflow but they also have relume >figma. So the way I see it that I need to learn is either relume>webflow or relume>figme>webflow. Thanks for your time.

8 comments

Matt J.
·
Daniel H. I did a full walkthrough of how I work with the site builder tool. and how it translates to figma and back to webflow - its an hour or so long...rough draft. It might give you some insights https://relume.notion.site/Using-the-Relume-Site-Builder-Full-Walk-Through-409e549d44594f0986c7b3453d93a5e4?pvs=4
Daniel H.
·
thanks so much --
Blair
·
Hey Daniel, this isn't very clear to most people TBH 😊 Relume
Sitemap
Wireframes
Get layout and content finalised
Figma
Clone Relume starter project
Install Relume plugin
Import site map and wireframes
Update style guide page in Figma with fonts, colours etc
Add logo and images to wireframes
Modify components by detaching and recreating to enable faster styling of wireframe.
Get design approved
Export assets (images)
Chrome
Install Relume extension
Relume
Clone Webflow starter project (style guide)
Webflow
Install Relume app
Site settings / Fonts
Import wireframes (or copy and paste components from Relume)
Make sure page structure is:
Body
Component
Navbar
Main
Sections (components)
Footer
Update style guide page (fonts, colours...)
Get approved
Webflow (to create account on behalf of your client)
In private tab, sign up for webflow with your email (name+client@domain.com)
Invite yourself to workspace as a guest (requires Freelancer workspace plan)
Accept invite via email
In your workspace transfer final site to client workspace you just set up
Accept transfer via email
Change workspace account email to client's email
Get client to add a paid site plan to the site you transferred (requires their credit card)
Update other site settings, e.g SEO
Publish site from client's workspace. Done ✅
Jack G.
·
Blair this is an excellent resource! Can you explain the reasoning behind the process with the private tab:
In private tab, sign up for webflow with your email (name+client@domain.com)
Invite yourself to workspace as a guest (requires Freelancer workspace plan)
This side of managing client projects is kinda hard to find content on!
Blair
·
Sure, the goal is to have a client who is new to Webflow set up with a new WF account (workspace) and for you to be a guest and for the site to be transferred to their workspace. I tried explaining all this to a client and we got there in the end, but it is easier if you just do it all for them and then change the WF account email to their email and it's all done. Plus you're a guest so can do whatever you need. They just need to add the site plan with their credit card.
👍1
Jack G.
·
Very nice... That's really useful 🙏
Blair
·
I got that tip from Matt J. 🙌
Jack G.
·
Matt knows a few tricks alright!