Create a Brand-New Design
Goal: Generate a full page layout that matches your style and needs. How to Use:- Open the plugin and select “Generate → A Brand-New Design.” You’ll enter the mode for creating a new page from scratch.
-
Choose a style reference (3 options):
- Choose Style Reference: Click any Frame or Group in Figma to use its style as a reference.
- Upload Image: Upload an image — UIdraft Make will use its visual style for generation.
- Skip: Skip this step to use the default style.
-
Select the target platform:
- Generate on Web Page
- Generate on Mobile Page
- Describe the page or feature Use plain English to describe what you want to create. For example: “A SaaS product landing page with a hero section, sign-up form, and customer logos.”
-
Generate and import
- Click Generate to create your design.
- If you’re not happy with the result, edit your description and try again.
- Once you’re satisfied, click Import to Figma to add the generated layout directly to your Figma file.
Extend or Edit an Existing Page
Goal: Add new content or modify existing sections while keeping the original page’s style and structure. Open the plugin and choose “Extend or Edit → An Existing Page.”Extend — Add New Content
Use this mode when you want to expand a page with new sections or modules. Steps:- Click Target Page In Figma, select a Frame or Group to set it as your target page.
-
Add a Frame (the generation area)
- Create a new Frame within your page.
- This Frame defines where the generated content will appear and how big it will be.
-
Select the target platform:
- Add on Web Page
- Add on Mobile Page
- Describe what you want to add Example: “Add a testimonial section with user quotes and photos at the bottom of the page.”
-
Generate and import
- Click Generate to see the new design.
- You can refine your input and re-generate if needed.
- When you’re happy, click Import to Figma — the new content will appear exactly where your Frame is located.
Edit — Modify Existing Elements
Use this mode when you want to replace or improve a section of your page while maintaining the overall design style. Steps:- Set the target page Select a Frame or Group in Figma to define which page you’re editing.
- Click a section to edit Use “Click on a node to edit in #Frame” to select the specific element or section you want to modify.
-
Select the target platform:
- Edit on Web Page
- Edit on Mobile Page
- Describe the changes you want Example: “Change the hero section to feature three product cards with pricing and CTA buttons.”
-
Generate and import
- Click Generate to preview your updated section.
- If the result isn’t perfect, adjust your description and try again.
- Once it looks right, click Import to Figma — your edited section will automatically replace the original element.
Tips for Better Results
- Be specific in your prompts The more detail you include (structure, style, and content), the better your generated design will match your expectations. Example: “A clean, minimalist SaaS login page with left-side logo, right-side form, and a light blue color palette.”
- Use a style reference whenever possible Choosing a Frame as your style reference helps maintain visual consistency across your project.
- Iterate freely Not satisfied? Just rewrite your prompt and regenerate — the AI will adapt instantly.
Summary
With UIdraft Make, you can:- Generate full layouts from text prompts
- Extend existing pages with new sections
- Edit page elements directly inside Figma

