> ## 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.

# Partial Redesign

Partial Redesign lets you update **one specific area** of a frame without affecting the rest of your layout.\
This is useful when you want to refresh a card, redesign a section, or explore variations while keeping your page structure intact.

***

## 1. Select the **Partial Redesign** tab

Open the **prompt.to.design** plugin and click the **Partial Redesign** tab.\
This mode allows you to pick an existing area inside a frame and regenerate just that part.

<img src="https://mintcdn.com/uxarts/I6HFqaPtsdDRX4cS/images/region-redesign/1.png?fit=max&auto=format&n=I6HFqaPtsdDRX4cS&q=85&s=66fcc80bb0c1833dbb83fb77566a9d62" alt="Open the plugin and select the Region Redesign tab" width={700} data-path="images/region-redesign/1.png" />

***

## 2. Select a frame that contains the region you want to redesign

To begin, you must select an entire **frame** on your Figma canvas.\
The plugin needs to know which page you want to work inside before you can choose a specific region.

### Why this step matters:

* Region Redesign **only works when a frame is selected first**
* If no frame is selected, the plugin cannot enter region-selection mode
* Once a frame is selected, the plugin will show the message:\
  **"Select a region in the frame"**

<img src="https://mintcdn.com/uxarts/I6HFqaPtsdDRX4cS/images/region-redesign/2_A.png?fit=max&auto=format&n=I6HFqaPtsdDRX4cS&q=85&s=0913bd71b63db5d0bc93ced1787e43cc" alt="Click on a frame to enable region selection mode" width={600} data-path="images/region-redesign/2_A.png" />

<img src="https://mintcdn.com/uxarts/I3JOnALDZ5tIGfai/images/region-redesign/2_frame.png?fit=max&auto=format&n=I3JOnALDZ5tIGfai&q=85&s=ad0a317d672f8048633af51307b1a197" alt="Example of a selected frame that will be used for region redesign" width={500} data-path="images/region-redesign/2_frame.png" />

***

## 3. Select a region inside the frame

After selecting a frame, click on the specific area you want to redesign - for example, a card, a section, or a content block.

<img src="https://mintcdn.com/uxarts/I6HFqaPtsdDRX4cS/images/region-redesign/3_A.png?fit=max&auto=format&n=I6HFqaPtsdDRX4cS&q=85&s=32b45bbc7983442b898ab8f5bf3fd9cd" alt="Plugin shows the selected region after a frame area is chosen" width={600} data-path="images/region-redesign/3_A.png" />

### Recommended method (especially for beginners):

**Use the left-side Figma Layer Panel to select the exact region.**

This ensures you pick the correct component or container even when layers are nested.

<img src="https://mintcdn.com/uxarts/I3JOnALDZ5tIGfai/images/region-redesign/3_region.png?fit=max&auto=format&n=I3JOnALDZ5tIGfai&q=85&s=3382d4b4cafb2e291e3a20a3519439b4" alt="Use the Layer Panel or canvas to select a specific region inside the frame" width={675} data-path="images/region-redesign/3_region.png" />

***

## 4. Describe what you want to update in the selected region

Type a short prompt describing how you want the selected area to be redesigned.\
Only the chosen region will be updated - the rest of your page stays unchanged.

Example prompt:

> "Redesign this rating card into a premium, luxury hotel style.\
> Use warm tones, soft elevation, and refined typography. Keep all content, but make it feel elegant and high-end."

<img src="https://mintcdn.com/uxarts/I6HFqaPtsdDRX4cS/images/region-redesign/4.png?fit=max&auto=format&n=I6HFqaPtsdDRX4cS&q=85&s=5290d4d21611f9fdc7eb9fce70f7195c" alt="Enter a description of how to redesign the selected region" width={350} data-path="images/region-redesign/4.png" />

***

## 5. Generate and review redesigned previews

Click **Generate** to create new variations of the selected region.\
The preview will show new designs that match your frame's existing style system.

You can scroll or zoom to compare different versions.

<img src="https://mintcdn.com/uxarts/I3JOnALDZ5tIGfai/images/region-redesign/5.png?fit=max&auto=format&n=I3JOnALDZ5tIGfai&q=85&s=d77288322d4af791e8e46f8a7e6d38a7" alt="Review AI-generated variations for the selected region" width={700} data-path="images/region-redesign/5.png" />

***

## 6. Insert the redesigned region into Figma

Click **Insert to Figma** to apply the new version.\
Only the selected area will be replaced - the rest of the frame will remain exactly the same.

The updated region will appear as fully editable Figma layers.

<img src="https://mintcdn.com/uxarts/I3JOnALDZ5tIGfai/images/region-redesign/6_newframe.png?fit=max&auto=format&n=I3JOnALDZ5tIGfai&q=85&s=c8bd90462af5ed8d6e91ba365036fc34" alt="Insert the redesigned region into the existing frame" width={900} data-path="images/region-redesign/6_newframe.png" />

***

## Summary

With Partial Redesign, you can:

* Update only one part of a page without affecting the rest
* Explore multiple design variations quickly
* Keep your page structure and spacing unchanged
* Maintain stylistic consistency across your layout
* Edit all generated output as native Figma layers

Region Redesign is perfect for improving cards, sections, modules, or any part of a page that needs a fresh look.

<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>
