Are you a designer looking to streamline your workflow? Relume, an AI-powered website builder, has launched a Style Guide feature that promises to make website design faster and more efficient. This post will walk you through the Style Guide feature, from creating a client-based website to exporting your design to Figma and Webflow.
https://www.youtube.com/watch?v=3AXx2cO4gio
What is Relume and Why Use It?
Relume is a website builder that uses artificial intelligence to accelerate the design process. It offers features like sitemap generation, wireframing, and the new Style Guide. Using Relume can lead to faster design times, consistent branding across your projects, and easier collaboration with clients. For a more in-depth look, check out this dedicated video about Relume.
Getting Started with Relume’s Style Guide Feature
First, start a new project in Relume by clicking the “new project” button. You’ll then need to add a prompt to guide the AI. For example, you could enter: “website with easy navigation including homepage, services, pricing, review, and contact pages.” Relume also offers multiple language options.
Once your prompt is ready, you can generate a sidebar for your website. If the sidebar doesn’t generate immediately, click the “gen” section to trigger the generation.
From Sitemap to Wireframe: Laying the Foundation
After setting up your project, generate a wireframe by clicking on the “wireframe” option. Relume will automatically create the wireframe for your website’s pages.
You can change the layout and regenerate the copy of the wireframe by clicking on the provided options. You can also change the heading or text directly within the wireframe interface.
Diving Deep into the Style Guide Feature
The Style Guide feature is located in the beta section of Relume. It allows you to create a comprehensive style guide for your website in just seconds.
A key aspect of this feature is that the color palette is generated based on your wireframe and the initial prompt you provided. For instance, if you’re designing an electrician website, Relume will select colors that are relevant to that industry.
If you’re not satisfied with the initial style guide, you can click the “Surprise Me” button to change the entire look, including colors, fonts, and images.
To explore different design directions, click “new concept” to generate a completely new style guide concept. You can also duplicate concepts to create variations and experiment with different elements while keeping a base design intact.
Customizing Your Style Guide: Colors, Typography, and UI Styling
The Style Guide feature is organized into different elements: color, typography, UI styling, and arts. You can also toggle between dark and white mode options to see how your design looks in different contexts. The “peach content” option generates a shareable link for easy client collaboration.
Working with Colors
The shuffle button allows you to change the color palette with a single click. If you have specific colors you want to keep, you can lock them and shuffle the rest of the palette. You can also add more colors using the plus icon. To fine-tune individual colors, you can change their shades directly within the interface.
Working with Typography
Similar to colors, the shuffle button lets you experiment with different typography options. You can pick specific fonts for headings and body text. Relume also offers a font recommendations feature with Google Fonts integration, making it easy to find the perfect typography for your project.
Working with UI Styling
The shuffle button is also available for UI styling, allowing you to change the button styles. You can modify the button color, placeholder text, and corner radius to match your desired aesthetic.
Personalizing Your Style Guide: Images and Logos
You can personalize your style guide by changing the hero images with a single click. Additionally, you can upload custom images from your computer, making your designs more tailored to your clients’ needs. Personalized images are a great way to make a strong impression during client presentations.
Sharing with Clients: The Pitch Concept Feature
Relume’s “Pitch Concept” feature allows you to easily share the style guide with clients. By clicking the “Pitch Concept” button, you can generate a link to share with your clients.
Clients can then view a full preview of the design, including mobile and desktop options, wireframe and sitemap access, and a feedback option. This streamlines the review process and ensures everyone is on the same page.
Exporting Your Design to Figma
Relume allows you to export your style guide, wireframe, and sitemap to Figma, and it saves time. To export to Figma, follow these steps:
- Install the Relume Figma plugin.
- Log in to the plugin.
- Select the project and elements to import.
- Choose the specific concept to import.
Once imported, the design is automatically updated in Figma with the Relume styles. You can then make further adjustments in Figma, such as fixing menu issues, changing fonts, and swapping elements. Accessing and modifying color variables in Figma is also straightforward.
Exporting Your Design to Webflow
Relume also supports exporting your style guide to Webflow:
- Clone the Relume style guide in Webflow.
- Install the Relume Webflow app.
- Log in to the app.
- Select the project and elements to import.
- Choose the specific concept to import.
The design is automatically imported into Webflow, saving you hours of manual work. You can then publish the website directly from Webflow.
Conclusion
Relume’s Style Guide feature simplifies the website design process, allowing you to create professional and visually appealing websites faster. By automating many of the initial design decisions, Relume empowers designers to focus on the finer details and create exceptional user experiences. Give Relume a try and see how it can transform your workflow. Create an account via this link. If you have any questions about Relume, leave a comment below.