> ## Documentation Index
> Fetch the complete documentation index at: https://docs.superun.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Smart Fill

Smart Fill allows you to **quickly add new content** into your design by **automatically creating an empty section inside the selected frame**.\
You simply choose a frame → enter a prompt → and Smart Fill inserts a styled content block that matches your existing design.

***

## 1. Select the **Smart Fill** tab

Open the **prompt.to.design** plugin and click **Smart Fill**.\
This mode lets AI add a new content block inside your selected frame.

<img src="https://mintcdn.com/uxarts/RSHYLU0ts6AvUQJp/images/smart-fill/1.png?fit=max&auto=format&n=RSHYLU0ts6AvUQJp&q=85&s=8469cc622eb7cdebcd775db384e0936f" alt="Open the plugin and select the Smart Fill tab" width={700} data-path="images/smart-fill/1.png" />

***

## 2. Select the frame where you want to add new content

Click on a **frame** in your Figma canvas.\
Smart Fill will automatically insert an **empty section** inside this frame — this is where the new content will be generated.

<img src="https://mintcdn.com/uxarts/I3JOnALDZ5tIGfai/images/smart-fill/2_emptyframe.png?fit=max&auto=format&n=I3JOnALDZ5tIGfai&q=85&s=980ec6a22586cb9dd959dd39516568f5" alt="Select a frame; Smart Fill automatically adds an empty section inside it" width={600} data-path="images/smart-fill/2_emptyframe.png" />

***

## 3. Enter a prompt describing the new content you want

Describe the content you want Smart Fill to generate inside the automatically added empty section.

### Example: “Hotel Highlights”

> “Fill the empty section with a ‘Hotel Highlights’ block including:
>
> * Free WiFi
> * Harbor View
> * 24/7 Support
>
> Match the style, spacing, and typography of the existing page.”

<img src="https://mintcdn.com/uxarts/RSHYLU0ts6AvUQJp/images/smart-fill/4.png?fit=max&auto=format&n=RSHYLU0ts6AvUQJp&q=85&s=be44439f9de8ace017309b3232331d1c" alt="Enter prompt describing the Hotel Highlights section" width={350} data-path="images/smart-fill/4.png" />

***

## 4. Generate and review the preview

Click **Generate** to let the AI create your new content block.\
The preview will show a styled “Hotel Highlights” section that fits seamlessly with your frame’s existing design.

<img src="https://mintcdn.com/uxarts/I3JOnALDZ5tIGfai/images/smart-fill/5.png?fit=max&auto=format&n=I3JOnALDZ5tIGfai&q=85&s=c68bec967cbdf677f231fa17985e0ab6" alt="Preview of generated Hotel Highlights section" width={700} data-path="images/smart-fill/5.png" />

***

## 5. Insert the content into Figma

Click **Insert to Figma** to place the generated section inside your selected frame.\
Smart Fill will replace the empty section it created earlier with your newly generated content.

Only this new section is added — the rest of the frame remains unchanged.

<img src="https://mintcdn.com/uxarts/I3JOnALDZ5tIGfai/images/smart-fill/6.png?fit=max&auto=format&n=I3JOnALDZ5tIGfai&q=85&s=2d5b348d3b7fa946191d5e5322bab084" alt="Insert the Hotel Highlights section into the frame" width={900} data-path="images/smart-fill/6.png" />

***

## Summary

Smart Fill helps you:

* Add new content blocks without manually creating layouts
* Let the plugin automatically create an empty section for you
* Keep styling, spacing, and typography consistent with the page
* Instantly generate sections like:
  * Highlights
  * Features
  * Amenities
  * Info blocks
  * Key points
* Work entirely with native Figma layers

Smart Fill is ideal for quickly extending your page with meaningful, styled content.

<div
  style={{
marginTop: '2rem',
display: 'flex',
justifyContent: 'center',
}}
>
  <a
    href="https://www.figma.com/community/plugin/1528325292196938261/prompt-to-design-by-superun-ai-10x-faster-with-ai-design-like-a-pro-prototype-instantly"
    style={{
  backgroundColor: '#0F172A',
  color: 'white',
  padding: '12px 28px',
  borderRadius: '8px',
  fontSize: '16px',
  fontWeight: '600',
  textDecoration: 'none',
  boxShadow: '0 4px 12px rgba(0,0,0,0.08)',
  transition: 'all 0.2s ease',
}}
    onMouseOver="this.style.backgroundColor='#1E293B'"
    onMouseOut="this.style.backgroundColor='#0F172A'"
  >
    Start Designing with Prompt.to.design
  </a>
</div>