> For the complete documentation index, see [llms.txt](https://docs.uichemy.com/llms.txt).
> Use it to discover all available pages before exploring further.
# How to Add Auto Layout to Your Design With UiChemy?
Use UiChemy's Convert to Auto Layout feature to prepare your Figma design for widget tagging.
**A well-structured design improves the tagging experience and reduces confusion during the tagging process.**
UiChemy's **Convert to Auto Layout** feature allows you to specify whether your design is already using Auto Layout or if you want UiChemy to automatically convert it in preparation for widget tagging. This step prepares your design for the next phase of tagging.
### What If Your Design Is Not in Auto Layout?
- If your design is not using Auto Layout, **widget tagging may become confusing or inaccurate**.
- Don't worry! UiChemy offers a **Convert to Auto Layout** option that automatically applies Auto Layout to your selection.
- A **duplicate** of your design will be created, so your original stays untouched.
- This saves time and helps make your design clean and easier to tag.
#### Auto Layout Detection in UiChemy
UiChemy automatically checks if your selected design elements are using Auto Layout:
**If your design is already in Auto Layout**, the plugin will display the message: *"Your design is already in Auto Layout."* In this case, you can proceed directly to widget tagging. If you wish to refine the structure or reapply Auto Layout, you can use the **Convert to Auto Layout** option again. When you do this, a duplicate of your selection will be created to preserve the original design.
**If your design is not using Auto Layout**, the plugin will display a message letting you know it isn't in Auto Layout yet. In this case, click the **Convert to Auto Layout** option to apply Auto Layout to your selection before you proceed to widget tagging. A duplicate of your selection will be created so your original design stays untouched.
In **Step 4: Optimize Your Design**, the **Manage Auto Layout** panel lets you convert your design from non-auto to auto by clicking the **Convert to Auto Layout** button. Once done, you will see a **Converted successfully** message. Below, you can see how it works.
Even if your design is not using Auto Layout, maintaining a good and organized structure in your layers and groups is important. This will help UiChemy give you the best result.
### Optimize Your Design: Auto and Manual
In the Classic Mode Step by Step Method, **Step 4 / 8: Optimize Your Design** opens the **Manage Auto Layout** panel: "Choose whether your design is already using Auto Layout or if you'd like us to convert it for widget tagging preparation." Switch between two tabs at the top:
- **Auto:** UiChemy checks your selection and converts it for you.
- **Manual:** you work through a guided checklist and fix each issue yourself.
### Auto Optimization
1. Open the **Auto** tab.
2. Under **Select your design source**, pick where your design came from, for example **Built from Scratch**.
3. UiChemy checks your selection and shows a message for any frame that isn't in Auto Layout.
4. Click **Convert to Auto Layout** (Beta) to apply it.
**Example:** You select a frame named **Frame 56** that isn't in Auto Layout. The Auto tab shows **"'Frame 56' needs auto-layout"**. Click **Convert to Auto Layout** to fix it.
### Manual Optimization
The **Manual** tab reads: "Fix and refine your design step by step. Follow guided suggestions to improve structure, reduce errors, and prepare your design for accurate export."
Checks are grouped into categories. Each category shows a progress bar, starting at **Not scanned yet**. Categories with a lock icon open once you finish the ones before them.
| Category | Checks |
|---|---|
| **Media & Vectors** | Stroked Vectors & Shapes, Flattenable Vector Groups, Unlocked Image & Icon Layers |
| **Layer Cleanup & Improvements** | Clipped Nodes Outside Bounds, Invisible or Hidden Layers, Incorrect Layer Constraints |
| **Shape Cleanup** | Opens after the categories above |
| **Frames & Groups Cleanup** | Opens after the categories above |
| **Text & Divider Cleanup** | Opens after the categories above |
| **Auto Layout** | Opens after the categories above |
Each check has a priority badge, **High**, **Medium**, or **Low**, so you know what to fix first.
#### How to Work Through a Check
1. Click a check card to open it. UiChemy scans your design for that issue.
2. If nothing needs fixing, you'll see **No issues found** and the card is marked **Finished**.
3. If layers need fixing, they're listed in the card. Use the buttons below to handle each one.
4. Click **Next** to move on to the next check.
**Example:** The **Frames Without Auto Layout** check lists **Frame 56**, **Frame 57**, and **Frame 58**, the frames in your design that still need Auto Layout.
| Button | What it does |
|---|---|
| **Reveal in Figma** (target icon) | Selects that layer in Figma, so you can see exactly which part of the design needs fixing |
| **Check** | Checks that one layer again after you've fixed it in Figma |
| **Ignore** | Skips that layer if you don't want to fix it |
| **Restore** | Brings back a layer you ignored |
| **Check All** | Checks every listed layer in one go |
| **Rescan** | Scans your design for that issue again |
| **Next** | Moves to the next check |
**Example:** The **Frames Without Auto Layout** check (Medium) lists **Frame 58**. Click the target icon to select it in Figma, then press **Ctrl + Alt + Shift + A** to apply Auto Layout and click **Check**. If you click **Check** before fixing it, you'll see **"'Frame 58' is not in auto-layout yet. Apply it in Figma first, then check again."**
#### Fixing Issues in Figma
UiChemy points out what needs fixing, but you make the fix in Figma itself. Select the layer (click the target icon), then use Figma's **Design panel** on the right, the same panel with **Frame**, **Position**, **Auto layout**, **Appearance**, and **Fill**.
| Check | Where to fix it in Figma |
|---|---|
| **Frames Without Auto Layout** | **Auto layout** section, or press **Ctrl + Alt + Shift + A** |
| **Invisible or Hidden Layers** | **Appearance** section: set **Opacity** above 0% or use the eye icon, or delete the layer if you don't need it |
| **Clipped Nodes Outside Bounds** | Move the layer back inside its frame, untick **Clip content** in the **Auto layout** section, or delete it |
| **Incorrect Layer Constraints** | **Constraints** and **Resizing** settings for the selected layer |
| **Stroked Vectors & Shapes** | Right-click the layer and choose **Outline stroke** |
| **Flattenable Vector Groups** | Right-click the group and choose **Flatten** |
After fixing, go back to the UiChemy plugin and click **Check** or **Rescan**.
#### When a Category Is Done
When every check in a category passes, its progress bar reaches **100%** and reads **No issues found**. That means this part of your design is optimized and ready for export.
#### Checks Reference
- **Stroked Vectors & Shapes** (Medium): Vector, rectangle, ellipse, star, or line with a visible stroke. Outlines the stroke to filled paths; shapes with both fill and stroke are flattened into one vector.
- **Flattenable Vector Groups** (Low): Group or frame containing only vector shapes. Flatten into a single vector to simplify the layer tree.
- **Unlocked Image & Icon Layers** (High): Unlocked asset layers can't be identified as a single export unit.
- **Clipped Nodes Outside Bounds:** Fully clipped nodes. Invisible in output, adds file bloat.
- **Invisible or Hidden Layers** (Medium): Hidden or zero-opacity layers with no visual contribution.
- **Incorrect Layer Constraints** (High): Constraints will break the layout when the frame is resized.
**Medium.** Without auto layout, spacing and sizing breaks after export.
Press **Ctrl + Alt + Shift + A** in Figma to apply auto layout.
### Frequently Asked Questions
No. Click **Ignore** on any layer you don't want to change, then click **Next** to move on. You can bring it back later with **Restore**.
Categories open in order. Finish the checks in the categories above, and the next one unlocks.
Make sure you applied the fix in Figma, then click **Check** on that layer or **Rescan** for the whole check.
### Related
See all 8 steps of the Classic Mode Step by Step Method.
Structure your design so it converts cleanly.