How to Import Relume Styles and Pages into Webflow

Watch: How to Import Relume Styles and Pages into Webflow

Approve the page structure and style direction before importing a Relume design into Webflow.

Step 1: Your Sitemap is the Blueprint for Your Website

Before jumping into design, you need a clear plan—and that starts with a sitemap. A sitemap gives you a bird’s-eye view of the pages and sections your site needs. Without it, you risk missing key elements, overcomplicating the structure, or underestimating the project scope.

• For your own projects, it helps you understand how everything connects and keeps the design process organized.
• For client work, it’s a crucial tool for defining scope, setting expectations, and pricing accurately.

Skipping this step often leads to scope creep, misaligned expectations, and time-consuming revisions. A well-planned sitemap ensures that wireframing, design, and development happen efficiently and predictably.

How to Build Your Sitemap in Relume

Relume simplifies sitemap creation with two key features:

1. AI-Powered Sitemap Generation – Describe the business and content needs, and Relume generates a structured sitemap.
2. Import an Existing Sitemap – Input a URL, and Relume retrieves the current structure for modification.

Once generated, you can refine it to match project needs:

• Modify the Sitemap – Add, remove, or adjust sections.
• Refine Content Descriptions – Clarify section descriptions to align with project goals.
• Get Client Approval – Confirm the structure before moving forward.

A well-defined sitemap helps you accurately price projects, prevent scope creep, and streamline approvals—ensuring a smooth design process from start to finish. With your sitemap in place, the next step is wireframing, where we start shaping layouts and organizing content. Let’s dive in.

Step 2: How To Turn Your Sitemap Into Wireframes

With your sitemap in place, the next step is wireframing—translating the structure into a visual layout. At this stage, the focus is on content flow, page structure, and user experience (UX) rather than colors or design elements. A well-planned wireframe ensures that every page has a clear purpose before moving into full design. Wireframing also plays a critical role in client projects. Before they give feedback on branding or visuals, they should first approve the layout and structure. Getting this right early prevents unnecessary revisions later and keeps the project moving efficiently.

How to Create Your Wireframes in Relume

Relume makes wireframing simple and structured:

1. Generate Wireframes – Click the Wireframe button, and Relume will create a wireframe for every page in your sitemap.
2. Customize the Layout – Swap components, adjust sections, and refine placeholder copy to better fit project needs.
3. Finalize the Structure – Ensure each page has a logical flow before moving into the design phase.

Wireframing is also an important client approval milestone. By signing off on the structure now, they focus on content and layout, reducing revisions and keeping the project on track. Now that we’ve mapped out the structure, the next step is bringing in design inspiration—applying branding and styling using Relume’s Style Guide feature. Let’s dive in.

Step 3: Adding Design Elements to Your Wireframes

Now that we’ve built the wireframes, the next step is bringing in branding, typography, and colors to shape the visual direction of the site. This is where the site starts to feel like a real design rather than just a structural layout. Everyone has their own process for gathering inspiration, but I typically:

• Find Websites That Inspire Me – Take full-page screenshots and import them into Figma.
• Analyze Design Elements – Use tools like CSS Pepper to inspect fonts, colors, and UI elements.
• Collect Branding Ideas – Pull together references to define an initial design direction.

Previously, applying branding was a manual process—exporting wireframes to Figma, experimenting with styles, and then recreating everything in Webflow. Now, Relume’s Style Guide Builder allows you to do all of this directly inside Relume.

How to Apply Branding in Relume

Relume makes it easy to apply design elements to your wireframes:

1. Upload a Logo – Replace placeholder content with the actual site logo.
2. Apply Fonts – Choose from Google Fonts or upload your own.
3. Set a Color Palette – Select up to five colors, which will automatically update across the homepage preview.
4. Upload Custom Photos – Start integrating the brand’s visual identity.
5. Customize UI Elements – Adjust buttons, typography styles, and layout elements to match your vision.

This won’t be the final design, but it gives you an initial design direction to review, giving you a polished preview before even touching Webflow.

Using This Step for Client Pitches

This is also the perfect time to involve clients—especially if you’re pitching new projects. Instead of just talking about a redesign, you can show them one. A powerful cold outreach strategy:

1. Find businesses with outdated or underwhelming websites.
2. Build a sitemap and wireframe in Relume.
3. Use the Style Guide Builder to generate a few design concepts.
4. Send a personalized pitch, showing them how their site could be improved.

Most cold outreach emails are generic, but demonstrating a real design concept makes your pitch stand out. Treat response improvements as a hypothesis to measure. Now that we’ve defined the look and feel of the site, the final step is importing everything into Webflow, where Relume will generate your entire design system for easy refinement and scaling. Let’s dive in.

Step 4: Importing Your Designs into Webflow

Relume provides a Site Builder Import app for transferring supported project content into Webflow. Previously, the biggest gap in the process was efficiently transferring your structured designs into Webflow without rebuilding elements from scratch. Now, with this new tool, that step is fully automated.

How to Import Your Designs into Webflow

1. Start with the Relume Starter Project – This pre-built design system includes all the class names needed for importing components.

2. Install the Relume Webflow App – This launches the Site Build Importer, the tool that pulls your designs into Webflow.

3. Launch the Importer and Select Your Site – Choose which Relume project you want to import.

4. Pick Your Finalized Design Concept – If you created multiple variations in the Style Guide Builder, select the final version.

   • If working with a client, this is a final approval checkpoint before proceeding.

5. Select Which Pages to Import – Start with just the homepage or import all pages at once.

6. Click Import and Let Relume Handle the Rest – Wait for the import to complete, then inspect the resulting page. Timing depends on the project and corrections.

Measure your own import and review time before making a time-saving claim.

What Happens After Importing?

Once imported into Webflow:

• Your homepage has imported styles to review – Everything from the Relume Style Guide is applied.
• Your design system is in place – This includes colors, typography, and UI elements.
• You can quickly modify sections with "combo classes" – Instead of manually adjusting styles, you can apply pre-set themes to tweak designs efficiently.

For additional pages, styles can be applied manually using combo classes, but you're already far ahead compared to building from scratch.

Check one imported page before expanding the import

Relume's current Webflow app guide describes the import workflow. Start from the supported Relume style-guide project. Check the required Relume plan and Webflow access before importing. For an existing project, test compatibility in a copy instead of assuming its classes match the starter.

Use one approved homepage with a header, service section, and contact action. After import, compare its page name, section order, headings, fonts, colors, and buttons with the approved concept. Check mobile layout, keyboard focus, readable contrast, image alternatives, and form destinations. This is a review example, not a measured import result from this article.

Inspect duplicate classes and combo classes before importing another page. Use the Class Sync guide to understand how incoming classes match existing styles. Measure setup, import waiting, corrections, and accessibility review separately when judging time saved.