Exporting from Relume Figma Library Kit to Webflow

@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.

@Duberney Quintana you bet - here's a quick loom on it!
https://www.loom.com/share/02cd98d7ed0447879d7bf40fe954b28f?sid=bb8acdf9-7103-4943-9fb6-da471835497f

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

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

and I am not sure why I can not import the next pages as I go?

@Duberney Quintana do you have a paid webflow workspace?

there is a section that says "Note: You can only import a Style guide once per Webflow Project

no I do not

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.

am I suppose to have a paid version in order to import the next pages? I have a total of 12 pages left.

you are likely on the teams free plan, which only allows 2 staging site with 2 pages

what do you mean by staging sites?

in webflow, this is considered a website that does not have a custom domain

so in most cases its something like duberneys-interesting-site.webflow.io

so a site that is not live yet

correct yeah

gotcha

so if I pay, then I will have this removed?

if have a freelancer workspace, you can have the free plan with 2 staging sites with unlimited pages

thats another way to go about it sure, is to pay for a webflow workspace plan yeah

https://webflow.com/pricing

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?

my guess without seeing your project is that webflow is counting our style guide page which is in draft mode

oh wow.

yes i see

yeah, an unfortunate change that Webflow made in the last 6 weeks - has generated 80% of the support tickets I have daily. 🫠

wow ok, I am going to have to add that t my clients cost, doesnt seem like there is a go around.

no, no workaround really other than having the right webflow workspace free plan (freelancer/agency)

what are CMS Collections and CMS items, if you don't mind me asking?

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.

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?

@Duberney Quintana yeah you'll need to built a webflow form to make those work. Doesn't have much to do with the CMS.

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. 😎👍