Community forum for knowledge and support

Updated 6 days ago

Exporting from Relume Figma Library Kit to Webflow

Hi Everyone, I have my first client, and I have a 5 process system. 1. Gather information so I an implement in the ai in relume to help build sitemap, 2. Build their sitemap, 3. wireframe, 4. use relume figma kit so they can collaborate with me with finishing up the design portion of the website. 5. Export to webflow once everything is approved. at the moment, we are on Phase 4... Can anyone help me with showing me how to export from relume figma Library kit to Webflow? I watched the videos, but I was a little confused and am worried I may lose or mess something up. this is the url from figma that I am using: https://www.figma.com/design/7nCNtDgLeS6BjZVxnWsK2Q/Relume-Figma-Kit--v3.0---Community-?node-id=8204-20391 ... please and thank you for your help.

M
D
5 comments

@Duberney Quintana congrats on the first client! Very solid process so far too.

Unfortunately there is no way to export your Figma designs into Webflow and still use Relume.

You would need to clone the Relume webflow style guide first, install the Relume webflow app, open the Relume webflow app, and import your style guide/wireframes into Webflow and then apply all of your design decisions directly within Webflow.

I know you mentioned seeing the videos but wasn't sure which videos you were referring to so I'm just going to put this here just in case but this is a good starting spot. Happy to answer any specific questions you might have or even record a quick custom loom to help push you through.
https://www.relume.io/resources/series-videos/introduction-getting-started

If you are brand new to Webflow though, there's likely going to be quite the learning curve there and Webflow has quite a few great resources as well on university.webflow.com

Hey Matt, Yes i have tried all of those videos from the first link you sent me, and also University Webflow.. From my understanding, it seems like this person said was the best way: Olivier Bolduc


So the best way I found was to

  1. Export to figma
  2. Design in figma
  3. Go on webflow with a blank relume project
  4. Using the relume chrome extension, copy and paste components from the chrome extension one by one (you can find their name in the figma layers)
  5. Go to your style guide and customize it
  6. Make the modifications you did on figma once again on webflow.



at the moment, i fnished watching all the webflow university videos that were reccommended to watch on how to use webflow, I was trying to see if any of those videos gave me any clues as to how to transfer from figma to webflow, but it seems as if I have to redo everything all over again... You mentioned cloning the style guides and wireframes.... I tried cloning, but I am unsure as to what exactly it did when I cloned it over... Maybe I will take you up on that offer to create a video on loom... I am currently on a blank webflow sheet, and am a little lost. If you can help, I'd appreciate it very much. Thank you.

Hey Matt, Thank you for your help. Now I have another question.. Hopefully this video can sum up what Im going through and Just need help with one more thing. Thank you

https://www.loom.com/share/0df01c325a4e4950b98ffd425c66fb81?sid=a366c81c-099e-4a3d-9060-ec22ebf94b92

@Duberney Quintana yeah you'd be making the same edits in Webflow that you made in Figma. I don't like to call it starting over because our webflow app honestly does a TON of the heavy lifting - it just doesn't get you to 100% ready to publish.

As for the style guide - if you hit P on your keyboard you'll see a list of pages - you should see the style guide page.

Here's a doc on how to customize the style guide.
https://www.relume.io/resources/docs/customizing-the-relume-style-guide-for-webflow

Add a reply
Sign up and join the conversation on Slack