Skip to main content
UIdraft Make helps you design pages in Figma with natural language. Whether you want to create a brand-new layout, extend an existing page, or edit specific sections — you can do it all directly inside Figma with just a few clicks.

Create a Brand-New Design

Goal: Generate a full page layout that matches your style and needs. How to Use:
  1. Open the plugin and select “Generate → A Brand-New Design.” You’ll enter the mode for creating a new page from scratch.
  2. 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.
  3. Select the target platform:
    • Generate on Web Page
    • Generate on Mobile Page
  4. 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.”
  5. 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:
  1. Click Target Page In Figma, select a Frame or Group to set it as your target page.
  2. 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.
  3. Select the target platform:
    • Add on Web Page
    • Add on Mobile Page
  4. Describe what you want to add Example: “Add a testimonial section with user quotes and photos at the bottom of the page.”
  5. 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:
  1. Set the target page Select a Frame or Group in Figma to define which page you’re editing.
  2. 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.
  3. Select the target platform:
    • Edit on Web Page
    • Edit on Mobile Page
  4. Describe the changes you want Example: “Change the hero section to feature three product cards with pricing and CTA buttons.”
  5. 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
Whether you’re building prototypes, product pages, or experimenting with new UI ideas, UIdraft Make helps you move from concept to design faster than ever. Just describe what you want — and let AI design it for you.