Relume Community Icon

Importing Figma Styled Relume Sitemaps into Webflow: Your Questions Answered

Hello Everyone. Newbie here! πŸ™‚

  1. 1.

    What are the most common ways to import a Figma styled Relume sitemap into Webflow?

  2. 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. 3.

    Will the Webflow Relume Clonable Style Guide still link to the imported Figma styled Relume sitemap?

Thanks in advance for any responses!

  • Avatar of Wayne C.

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

    1. 1.

      Import your Relume wireframes directly into Webflow using the Relume Webflow app

    2. 2.

      Use your Figma design as a visual reference

    3. 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. 1.

      Generate wireframes in Relume Sitebuilder

    2. 2.

      Set up and customize your style guide in Figma

    3. 3.

      Export wireframes to Figma for design work

    4. 4.

      Set up style guide in Webflow

    5. 5.

      Import wireframes from Relume directly to Webflow

    6. 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. πŸ™‚

  • Avatar of Olivier B.

    So the best way I found was to

    1. 1.

      Export to figma

    2. 2.

      Design in figma

    3. 3.

      Go on webflow with a blank relume project

    4. 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. 5.

      Go to your style guide and customize it

    6. 6.

      Make the modifications you did on figma once again on webflow

Importing Figma Styled Relume Sitemaps into Webflow: Your Questions Answered | Relume Community