Introduction

Hey there, I'm Yassine, and I'm here to take you on an exciting journey that will change the way you approach website design. Let me introduce you to Realum Site Builder – an AI-powered tool that's about to become your new design best friend. In this tutorial, we'll explore the world of AI-assisted design, where creativity meets technology.

Imagine having an AI buddy that effortlessly creates sitemaps for your design ideas. That's Realum's specialty – making the design process smoother and more magical. But there's more to it. Realum goes beyond sitemaps. It's your ticket to transforming these plans into wireframes that bring your vision to life like never before. And here's where the real magic happens: Figma integration. With a few clicks, your AI-crafted wireframes seamlessly transition to Figma, becoming stunning frames ready to edit.

Whether you're a design pro ready to level up or a curious explorer dipping your toes into AI-driven design, this tutorial is your guide. Get ready to unlock a new realm of design possibilities.

Introducing Relume

Hold onto your hats, because we're diving into the fascinating world of Relume! Focused initially on enhancing Figma and Webflow for website creation with pre-built sections, Relume now introduces its star feature – a site builder tool that swiftly creates sitemaps and wireframes. Brace yourself to meet this ingenious addition that's set to revolutionize your design approach. These creations seamlessly integrate with Figma, adding an extra layer of ease to your design endeavors. Let's dive into this journey together and uncover the magic that awaits!

Crafting the Sitemap Magic

Creating a Sitemap

Welcome to the start of your web design venture! Get ready as we embark on the exciting task of Generating a Sitemap using the power of Realum Site Builder.

Imagine this: You've just unlocked your new project in Realum Site Builder. And what's waiting? The "Generate Sitemap" modal! It's like entering a unique gateway that takes you straight into your creative process.

The AI-powered sitemap generation begins with a dance of data. First, add a touch of company description – a short snippet that captures your digital haven's essence. Now, include the approximate number of starting pages for your project. For our example, let's imagine our company as "Rebank: The digital bank offering financial liberation through our magical mobile app," and let's boldly start with five pages. Remember, the more details you provide, the more enchanting the outcome will be. So, infuse your description with all the specifics you can think of!

And now, the real excitement kicks in! Once you've cast this data spell, the AI springs into action, acting like a team of design wizards operating behind the scenes. In an instant, you're provided with suggestions for components and content, not only for the home page but for every page in your magical sitemap.

Editing the Sitemap

Now that we've harnessed the AI magic to create a sitemap featuring a total of 7 Pages, it's time to add your personal touch and make it shine like a shooting star. Get ready for the exciting journey of Editing the Sitemap!

The home page is now adorned with sections that the AI cleverly generated based on our cues. But as designers, we have our unique preferences, don't we? If the initial AI dance didn't quite match your vision, don't worry! Editing is as simple as giving your design a little makeover.

Rearrange with Ease

Think back to rearranging blocks as a child – editing the sitemap is just as straightforward. If a section doesn't quite fit, pick it up, adjust its position, and place it where it seamlessly aligns with your masterpiece puzzle. And if you're ready to make a change, a couple of clicks can bid farewell to a section. A simple left-click, press delete, and it's gone.

Page Magic at Work!

And now, you may observe that sections for some pages haven't been generated yet. No worries – our trusty AI friend is here to assist. Creating additional page sections is a breeze. Hover over a page card, tap 'Generate,' and observe as the AI performs its magic, conjuring new sections that perfectly suit the page. Editing is straightforward, like giving your design a minor makeover.

Evolving Wireframes: Transitioning from Blueprint to Virtual Reality

After comprehensively exploring sitemaps, our focus now shifts to elevating wireframes, breathing life into your design concepts, and translating them into virtual reality. Visualize the sitemap as a meticulous blueprint and the wireframes as the canvas on which your vision takes shape – prepare to inject a profound sense of creativity. With a deliberate click on the "Wireframe" button located atop the interface, you'll seamlessly transition to the captivating Wireframe Wonderland.

Changing Wireframe Sections

If a specific part of your wireframe doesn't match your creative vision, don't worry! With a few clicks, you can use different design elements to transform your wireframe into something that fits your style better. Just click on the section you want to change, and an option will appear on the right – the "Replace Section" feature. Click it, and you'll find various layout alternatives to choose from.

Exporting and Editing Sitemaps and Wireframes in Figma

Navigating the Relume Library File: Your Design Oasis

Think of this as your gateway to design flexibility: the power to adjust and refine your wireframe styles with ease. Let's head over to Figma and locate the Relume library file. Within this file lies a collection of components – not that we need all of them, considering our AI-generated wireframes are already equipped with the essentials. However, here's the crucial part: This file is your entry to the style guide. It's where your design skills can shine as you personalize the overall appearance and ambiance of your low-fidelity wireframe template, elevating it to a high-fidelity wireframe.

Utilizing the Relume Library Plugin

Begin by creating a new page within the Relume builder site file on Figma.
Access the plugins option in Figma.
Locate and select the Relume library plugin.
Log in using your Relume account credentials.
Find your project from the Relume builder site file.
Choose the project you created on the Relume site builder website.

By following these steps, you'll effectively make use of the functionalities offered by the Relume Library Plugin.

By performing a few quick clicks, you have the option to incorporate either your sitemap or wireframes into Figma. It's worth noting that exporting wireframes to Figma necessitates an upgraded account. Once completed, your AI-generated wireframes are seamlessly transferred to Figma.

Resume Style Guide

But there's an additional advantage. Recall the style guide within the Relume library file. Here's the genius part: Using the style guide within the Relume library file allows you to edit the wireframes you've exported seamlessly. By making changes to the styles in the style guide, you'll see those changes magically reflected across your wireframes. This streamlines your design process and ensures consistency throughout your project. You can effortlessly adjust fonts, experiment with colors, and inject your personal touch. Think of it as a tool to express your creative vision. With that, you've concluded the process of exporting your wireframes to Figma, an action that propels your creative insights into an entirely new dimension.

Conclusion

Our exploration of Relume Site Builder has come to an end. From crafting sitemaps to shaping wireframes and seamlessly transferring creations to Figma, we've unveiled a new chapter in design. Design is more than visuals and layouts – it's about creating narratives, shaping experiences, and using technology to achieve that.

Whether you're an adept design explorer embracing AI-driven design or a seasoned practitioner aiming to enhance skills, Relume offers new possibilities. With AI-generated sitemaps as a foundation, wireframes that bring concepts to life, and Figma as your platform, you have a toolkit for design innovation.

Remember, your creativity is your guiding light. Embrace AI-driven features, navigate wireframes with finesse, and let your creative vision flourish.

Thank you for joining this journey through design and innovation. The future holds even greater potential, and with tools like Relume Site Builder, you're at the forefront of that advancement.

Now, wield your imagination and shape your narrative, pixel by pixel. The canvas awaits, the tools are ready, and the possibilities are limitless. Happy designing!