Using the Relume Site Builder Import Webflow App

In this doc you’ll learn how to:

1. Clone Relume Webflow Style Guide
2. Install and open the app
3. Importing Style Guides
4. Import sitemaps as Webflow pages
5. Import individual wireframes
6. Importing global sections

Clone Relume Webflow Style Guide

{{note-webflow-clone="/resources/assets/rtc"}}

The new Relume Webflow App only supports the latest style guide cloneable (v3.0). This is due to the new classes and variables that were necessary to support Style Guide Builder export to Webflow.

How to move forward with older style guide versions

You you can still bring in new components into an existing or older style guide using 3 other options:

1. In the Relume Site Builder, you can navigate to a section or page and copy and paste them into Webflow directly.
2. You can use our chrome extension to copy a component and paste it directly into Webflow.
3. You can navigate to our Webflow Library to copy a component and paste it directly into Webflow.

Install and open the app

Open up the App Marketplace within the Webflow Designer. Search for “Relume” and launch the app. Or you can install the app from the Webflow App Marketplace.

Click the login button on the app and you’ll be redirected to relume.io to log into your Relume account.

Importing a Style Guide

Once you have chosen a project, you’ll have the option to import using an existing style guide or one of your Style Guide Builder concepts. You can only import a style guide once per webflow project.

Import sitemaps as pages

The Webflow app will create all of the pages, sections and copywriting as well as import any global sections you had identified in your sitemap and bring them in as Webflow components.

Import individual wireframes

If you are just wanting to bring in a single page, you can also do that. Just hover over any of the pages and click on “Add to page”. This will import just this page along with the global sections of that page.

If you already have existing pages with the same name, you’ll have the option to replace existing pages or create new pages.

Global sections

Any section in your sitemap that you have marked as a global section will import via the Relume Site Builder Import Webflow app as a Webflow component. When importing, if there is an existing global Webflow component with the same name (eg “Navbar”) it will not override or create a new global component, it will use the existing component in Webflow. If you would like to add an additional nav, simply give it a different name and it will import as a new global Webflow component.