How to Export from Relume Figma Kit to Webflow: Need Help!

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.

37 comments

Matt J.
·
·
Duberney Q. 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
Duberney Q.
·
·
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.
Matt J.
·
·
Duberney Q. you bet - here's a quick loom on it! https://www.loom.com/share/02cd98d7ed0447879d7bf40fe954b28f?sid=bb8acdf9-7103-4943-9fb6-da471835497f
Duberney Q.
·
·
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
Matt J.
·
·
Duberney Q. 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
Duberney Q.
·
·
Thanks alot for that. I am running into another issue... I imported my HOME page, and Started working on the style guide. But now it seems that once I finished working on the Home page, I then proceed to import the About Page, But I am getting a "Import Failed
Duberney Q.
·
·
and I am not sure why I can not import the next pages as I go?
Matt J.
·
·
Duberney Q. do you have a paid webflow workspace?
Duberney Q.
·
·
there is a section that says "Note: You can only import a Style guide once per Webflow Project
Duberney Q.
·
·
no I do not
Matt J.
·
·
okay, you'll want to make sure that you are on the correct webflow workspace free plan. When you choose this specific plan, you are allowed 2 staging sites with unlimited pages.
Matt J.
·
·
Duberney Q.
·
·
am I suppose to have a paid version in order to import the next pages? I have a total of 12 pages left.
Matt J.
·
·
you are likely on the teams free plan, which only allows 2 staging site with 2 pages
Duberney Q.
·
·
what do you mean by staging sites?
Matt J.
·
·
in webflow, this is considered a website that does not have a custom domain
Matt J.
·
·
so in most cases its something like duberneys-interesting-site.webflow.io
Duberney Q.
·
·
so a site that is not live yet
Matt J.
·
·
correct yeah
Duberney Q.
·
·
gotcha
Duberney Q.
·
·
so if I pay, then I will have this removed?
Matt J.
·
·
if have a freelancer workspace, you can have the free plan with 2 staging sites with unlimited pages
Matt J.
·
·
thats another way to go about it sure, is to pay for a webflow workspace plan yeah
Matt J.
·
·
https://webflow.com/pricing
Duberney Q.
·
·
but I am only on my first page for the free version, If i have 2 pages available, why wouldnt it allow me to import a secod page?
Matt J.
·
·
my guess without seeing your project is that webflow is counting our style guide page which is in draft mode
Duberney Q.
·
·
oh wow.
Matt J.
·
·
Duberney Q.
·
·
yes i see
Matt J.
·
·
yeah, an unfortunate change that Webflow made in the last 6 weeks - has generated 80% of the support tickets I have daily. 🫠
Duberney Q.
·
·
wow ok, I am going to have to add that t my clients cost, doesnt seem like there is a go around.
Matt J.
·
·
no, no workaround really other than having the right webflow workspace free plan (freelancer/agency)
Duberney Q.
·
·
what are CMS Collections and CMS items, if you don't mind me asking?
Matt J.
·
·
collections are a collection of items - say you have a Blog (collection), services (collection), and a careers (collection). A blog post would be an item of the blog collection. Roofing could be an item of the services collection. Sales Rep could be an item of the careers collection. Webflow's CMS is one of the most pleasant features of Webflow - powerful, yet easy to create really complex relationships and databases with the right tools, and doing it visually.
Duberney Q.
·
·
ok, thanks for that. In my case, it seems that the school I am making the website for is not really doing blogging for content yet, they are using something else for their news letter, so they are just providing me with a link for their content to be displayed on their website. I guess my next question is, they have buttons like "Submit" for a contact form, or also a "Apply" button that at the moment is going no where... to make those buttons active, or in other words how do I make them work? and would I need a CMS Collection in order to send them somewhere?
Matt J.
·
·
Duberney Q. yeah you'll need to built a webflow form to make those work. Doesn't have much to do with the CMS.
Duberney Q.
·
·
awesome. thank you for your help. I contacted the client, and they are not in town at the moment, but they told me they will pay for it when they get back so I can continue webflowing. 😎👍