Relume
Log in

Community forum for knowledge and support

Updated last month

Importing a figma styled relume sitemap into webflow

At a glance

The community members are discussing the best way to import a Figma-styled Relume sitemap into Webflow. The recommended workflow is to import the Relume wireframes directly into Webflow using the Relume Webflow app, and then style the imported wireframe structure in Webflow to match the Figma design. However, there is currently no automatic way to directly import the styled Figma designs into Webflow when using Relume components.

An alternative workflow suggested by the community members is to generate the wireframes in Relume Sitebuilder, set up and customize the style guide in Figma, export the wireframes to Figma for design work, set up the style guide in Webflow, and then import the wireframes from Relume directly into Webflow and style them according to the Figma design. This approach gives about 90% of the structure already built when importing the Relume wireframes, and the user just needs to apply the styling to match the Figma designs.

WWayne Choga
·

Hello Everyone. Newbie here! 🙂

  1. What are the most common ways to import a Figma styled Relume sitemap into Webflow?
  2. Is the Figma design just a reference as seen in youtube videos or is there a workflow where you import the Figma components into Webflow?
  3. Will the Webflow Relume Clonable Style Guide still link to the imported Figma styled Relume sitemap?

Thanks in advance for any responses!

W
O
2 comments
WWayne Choga

AI response:

The recommended workflow for getting your Figma-styled Relume designs into Webflow is:

  1. Import your Relume wireframes directly into Webflow using the Relume Webflow app
  2. Use your Figma design as a visual reference
  3. Style the imported wireframe structure in Webflow to match your Figma design
Important note: There is currently no automatic way to directly import your styled Figma designs into Webflow when using Relume components. The Figma to Webflow plugin is not fully compatible with Relume's system.
Sources

The most efficient workflow is:
  1. Generate wireframes in Relume Sitebuilder
  2. Set up and customize your style guide in Figma
  3. Export wireframes to Figma for design work
  4. Set up style guide in Webflow
  5. Import wireframes from Relume directly to Webflow
  6. Style in Webflow according to your Figma design
This approach gives you about 90% of the structure already built when you import the Relume wireframes, and you just need to apply the styling to match your Figma designs.

If anyone would be kind enough to fact check this Relume AI Response i would appreciate. 🙂

OOlivier 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

Add a reply
Sign up and join the conversation on Slack