Step 1: Accessing the Wireframe Builder
To get started, create a Website Brief and navigate to Step 3. (Learn how to create a website brief here).
Once in Step 3, you'll see the Wireframe Builder interface.
Key Features of the Wireframe Builder
1. Regenerate the Page
Use the prompt field to input or refine the description of your website.
Click Regenerate Page to generate a new wireframe layout based on your updated description.
2. Edit a Section
Select any section of your wireframe.
Use the Edit Variants option to explore and apply different layout designs for the selected section.
3. Replace a Component
Click on a section and select Replace Component.
Choose a new component, which will replace the original section in real-time.
4. Edit Text
Click on any text box in the wireframe to modify its content.
Input your desired text directly in the editable field.
5. Delete a Section
Select the section you want to remove.
Press the DELETE key on your keyboard to remove it instantly.
Saving and Accessing Your Wireframe
Once satisfied with your design, click Save Brief.
Go to the Project Detail page, where:
Your wireframe will be saved as a card in the Reference Files Section.
Click on the card to re-enter the Wireframe Builder and continue editing or creating.
Additional Features
1. Generate Empty Pages
Select an empty page in your wireframe.
Instead of adding a specific prompt, click Combine with Site Prompt and then Generate Empty Pages.
This will automatically generate pages based on the same prompt as the home page, ensuring a cohesive design.
2. Create a New Page
Scroll to the last page of your wireframe.
Click the plus icon on the right-hand side.
Input a prompt for the new page and click Regenerate to generate its design.
Figma Integration
1. Figma Plugin
To install the Mavity Figma Plugin:
Open the Figma Desktop App.
Navigate to Plugins → Manage Plugins → Search for 'Mavity Figma Plugin'.
Click Run to install.
The plugin will now be available in your Figma app for easy integration.
2. Copying Wireframes to Figma
In the Wireframe Builder or the Project Brief:
Select a page, then press Cmd + C on your keyboard.
Open the Mavity Figma Plugin in Figma.
Click Paste to transfer the wireframe seamlessly into Figma.
With Mavity's Wireframe Builder, you can easily design, customize, and refine your website wireframes, making it an indispensable tool for creating professional-quality websites. Whether you're generating new pages, editing components, or integrating with Figma, the process is simple and efficient.