Questions on Relume Workflow and Webflow Integration

SaraLi F. · 2024-04-10T20:07:13.599Z

Hi team, I'd like some help. I watched the full Relume Walkthrough and have questions. 1. now that the webflow app is out, does this change the workflow from relume to figma to webflow? 2. am I able to import my relume wireframe (15+ pages) to webflow all at once with the webflow app? 3. why would I use figma, when the loom video showed that I'd basically have to redo all my work in figma all over again once I get to webflow? 4. is there no way to create me hifi wireframe in figma and then directly export that to webflow? Thank you!

Questions on Relume Workflow and Webflow Integration | Relume Community

9 comments

· Sorted by Oldest

Blair
·
Still new to Relume and haven't used the new WF app yet (trying today). I believe you're right. App allows easier importing into WF similar to Figma app. Figma makes it easy to play with design options. Once client is happy you can then build in R without much experimenting as it is a bit more work to change things. Figma is just a better tool for experimenting, showing options to a client. Not an expert on why Figma to WF isn't recommended or possible, I guess the components from R are all working and going from R to F to WF might mean you "break" components in F and then the way to fix them in WF is going to be too fiddly. Someone else will know better than me, like Matt J. HTH
💪1
Matt J.
·
SaraLi F. love all of your questions in Slack today - so helpful for us to find gaps for new folks diving in! 1 & 2 it streamlines it for sure. You can now import all of your wireframes from site builder directly into Webflow - this also keeps global sections (global styles, navbar, footer, etc) intact. Probably shaves 30-60 minutes off the initial setup of a project. 3 so in a client situation - you are going to want to explore design ideas, get approval from clients, play around with fonts/colors etc. I spend the first 3-4 weeks in Figma on any project - getting approvals of various steps (sitemap, wireframes, design) - before webflow comes into the fold. 4 there is no way (currently) to go from figma hi-fi design to Webflow, using Relume. The Figma to Webflow plugin will work sure - but not with Relume - it breaks a number of things - the main thing is that you lose the client-first naming conventions and utility classes - which we believe makes for a stable & reliable end product.
🔥1
❤️2
SaraLi F.
·
Thanks very much to both for the in depth responses. As a founder learning as I go, (not for taking on clients) it's been very helpful to have prompt and actually helpful responses from the team and experienced peers. Following up to #4, just to clarify, if I take the relume wireframe, make it hifi in figma, then use the plugin to go directly to webflow, a) that will break a lot of the back-end code and hence stability of the website I'm trying to build? b) Does that mean sections of the website could potentially not work (some of the time)? and a follow up to your response to #3: since I'm not in a client situation, can I go straight to webflow and still have an okay time building my website? a final 5th question: the problem I'm experiencing is that I cannot build an advanced search page, listing page, user account profile page, vendor dashboard page, and checkout page with relume. (I'm building a P2P wellness marketplace.) Would these be easier to build in figma with templates they have, or webflow templates, or some other way? This is the current big issue so I'd appreciate guidance!
🙌1
Blair
·
4️⃣ I don't know why, but unless you paste or import from Relume then some/all components won't work properly. In other words, never import from Figma to WF. I had the same questions about workflow at the start. R ➡️ F then R ➡️ WF.
Blair
·
3️⃣ Yes you can import wireframe components to WF and style there. I am doing that for a competition landing page where the design is super simple and done for me. Always make sure you:
1.
Clone the Relume starter file
2.
Have the Relume Chrome extension installed
3.
Turn on class syncing in WF
4.
Add components to main wrapper except navbar (above main...) and footer (below)
Blair
·
5️⃣ I believe you can build those layouts. Go to Relume and select E-commerce (side menu) and find the components you need. Example of advanced search Also check Application UI and UI elements. You'll find what you need for 5️⃣ . You may not see *user profile) but you will find enough components that you can create the desired layout using Relume. Example: I added a table to another component by removing some of the unnecessary elements around the table in WF after importing it. Just deleted stuff from the outside in until I was left with two columns but no pagination etc.
SaraLi F.
·
helpful replies from Blair, still waiting from Matt J. for official answers (please and thanks!)
Matt J.
·
SaraLi F. yeah I think Blair has hit on all the points I would make. My only addition is that it sounds like you are more or less making an app - a web app - and generally speaking besides our Application components, our library is more largely focused on marketing websites. So yeah, you will most likely need to rely on some custom UI. One path forward, if designing application UI is not your core skill or even something you want to excel at, but just trying to get your MVP off the ground, would be something like Untitled UI Kit - you could combine the two libraries in Figma. Check out this thread where I mention how. It looks expensive, but once you realize how many design decisions it has already made for you, and you wrap your mind around variables/styles to swap to your style - it'll save you so much time and headache - worth every penny. We do have a limited Untitled UI Relume Library but its mostly the marketing components - so it still doesn't solve your immediate pain point which is having to get designs from Figma to Webflow. So then my advice would be to do as very little in Figma as possible, and go all in on learning Webflow. You will without a doubt get this MVP off the ground if you can just focus on Webflow and its learning curve. And I think our components can help you learn it as well. I think this Webflow University course will help a lot as well - Figma to Webflow. It's a long journey - just have to have patience, and be persistent. And you have this community - let's go!
Jack G.
·
What a great thread lads - well done!
💪1

Blair
·
Still new to Relume and haven't used the new WF app yet (trying today). I believe you're right. App allows easier importing into WF similar to Figma app. Figma makes it easy to play with design options. Once client is happy you can then build in R without much experimenting as it is a bit more work to change things. Figma is just a better tool for experimenting, showing options to a client. Not an expert on why Figma to WF isn't recommended or possible, I guess the components from R are all working and going from R to F to WF might mean you "break" components in F and then the way to fix them in WF is going to be too fiddly. Someone else will know better than me, like Matt J. HTH
💪1
Matt J.
·
SaraLi F. love all of your questions in Slack today - so helpful for us to find gaps for new folks diving in! 1 & 2 it streamlines it for sure. You can now import all of your wireframes from site builder directly into Webflow - this also keeps global sections (global styles, navbar, footer, etc) intact. Probably shaves 30-60 minutes off the initial setup of a project. 3 so in a client situation - you are going to want to explore design ideas, get approval from clients, play around with fonts/colors etc. I spend the first 3-4 weeks in Figma on any project - getting approvals of various steps (sitemap, wireframes, design) - before webflow comes into the fold. 4 there is no way (currently) to go from figma hi-fi design to Webflow, using Relume. The Figma to Webflow plugin will work sure - but not with Relume - it breaks a number of things - the main thing is that you lose the client-first naming conventions and utility classes - which we believe makes for a stable & reliable end product.
🔥1
❤️2
SaraLi F.
·
Thanks very much to both for the in depth responses. As a founder learning as I go, (not for taking on clients) it's been very helpful to have prompt and actually helpful responses from the team and experienced peers. Following up to #4, just to clarify, if I take the relume wireframe, make it hifi in figma, then use the plugin to go directly to webflow, a) that will break a lot of the back-end code and hence stability of the website I'm trying to build? b) Does that mean sections of the website could potentially not work (some of the time)? and a follow up to your response to #3: since I'm not in a client situation, can I go straight to webflow and still have an okay time building my website? a final 5th question: the problem I'm experiencing is that I cannot build an advanced search page, listing page, user account profile page, vendor dashboard page, and checkout page with relume. (I'm building a P2P wellness marketplace.) Would these be easier to build in figma with templates they have, or webflow templates, or some other way? This is the current big issue so I'd appreciate guidance!
🙌1
Blair
·
4️⃣ I don't know why, but unless you paste or import from Relume then some/all components won't work properly. In other words, never import from Figma to WF. I had the same questions about workflow at the start. R ➡️ F then R ➡️ WF.
Blair
·
3️⃣ Yes you can import wireframe components to WF and style there. I am doing that for a competition landing page where the design is super simple and done for me. Always make sure you:
1.
Clone the Relume starter file
2.
Have the Relume Chrome extension installed
3.
Turn on class syncing in WF
4.
Add components to main wrapper except navbar (above main...) and footer (below)
Blair
·
5️⃣ I believe you can build those layouts. Go to Relume and select E-commerce (side menu) and find the components you need. Example of advanced search Also check Application UI and UI elements. You'll find what you need for 5️⃣ . You may not see *user profile) but you will find enough components that you can create the desired layout using Relume. Example: I added a table to another component by removing some of the unnecessary elements around the table in WF after importing it. Just deleted stuff from the outside in until I was left with two columns but no pagination etc.
SaraLi F.
·
helpful replies from Blair, still waiting from Matt J. for official answers (please and thanks!)
Matt J.
·
SaraLi F. yeah I think Blair has hit on all the points I would make. My only addition is that it sounds like you are more or less making an app - a web app - and generally speaking besides our Application components, our library is more largely focused on marketing websites. So yeah, you will most likely need to rely on some custom UI. One path forward, if designing application UI is not your core skill or even something you want to excel at, but just trying to get your MVP off the ground, would be something like Untitled UI Kit - you could combine the two libraries in Figma. Check out this thread where I mention how. It looks expensive, but once you realize how many design decisions it has already made for you, and you wrap your mind around variables/styles to swap to your style - it'll save you so much time and headache - worth every penny. We do have a limited Untitled UI Relume Library but its mostly the marketing components - so it still doesn't solve your immediate pain point which is having to get designs from Figma to Webflow. So then my advice would be to do as very little in Figma as possible, and go all in on learning Webflow. You will without a doubt get this MVP off the ground if you can just focus on Webflow and its learning curve. And I think our components can help you learn it as well. I think this Webflow University course will help a lot as well - Figma to Webflow. It's a long journey - just have to have patience, and be persistent. And you have this community - let's go!
Jack G.
·
What a great thread lads - well done!
💪1