---
url: "/tinyimage/tidy.md"
description: "Align, reorder, rename, and number selected Figma layers using the TinyImage Tidy workspace."
---

# Organize Figma layers with Tidy

> Align, reorder, rename, and number selected Figma layers using the TinyImage Tidy workspace.

Use the **Tidy** tab to turn a rough group of Figma layers into an organized canvas and layer list. Tidy can align layers to a spacing grid, match the layer order to their canvas position, rename frames with sequential numbers, and update presentation pager text.

## Prepare your selection

1. In a Figma Design file, select the layers you want to organize.
2. Make sure the selected layers are siblings with the same parent.
3. Open TinyImage and select the **Tidy** tab.

The selection status shows how many layers are ready and which parent contains them. Tidy does not move or reorder layers inside an Auto Layout parent; select layers on the canvas or inside a regular frame instead.

## Choose the Tidy actions

Open **Actions** and enable any combination of these options:

### Grid alignment

Aligns the selected layers in rows or columns using the horizontal and vertical spacing from **Preferences**. This is the only action enabled by default.

### Renaming

Adds sequential numbers based on each layer's canvas position. With the default starting number of `000`, layers are named `000`, `001`, `002`, and so on.

### Layer order

Reorders the selected layers in the Figma Layers panel to match their visual order on the canvas. The selected layers remain together at the top of their parent layer stack.

### Presentation pager

Finds matching text layers inside each selected layer and replaces their text with a zero-based canvas-order number: `0`, `1`, `2`, and so on.

## Configure Tidy preferences

Open **Preferences** to configure how the enabled actions run.

| Preference | What it controls |
| --- | --- |
| **Grid spacing** | Horizontal and vertical spacing between aligned layers. The defaults are `100` px and `200` px. |
| **Layout** | Arranges layers in horizontal **Rows** or vertical **Columns**. |
| **Wrap component instances** | Places selected instances inside same-size frames when Grid alignment runs. |
| **Pager variable** | The exact name of the pager text layer to update. The default is `{current}`. |
| **Starting frame number** | The first value used by Renaming. The default is `000`. |
| **Rename strategy** | Replaces existing names, merges the number with each name, or applies a custom pattern. |

### Rename strategies

- **Replace** uses the sequential number as the complete layer name, such as `000`.
- **Merge** combines the number and existing name, such as `000_Home`.
- **Custom pattern** lets you build a name with `{n}`, `{name}`, `{row}`, and `{column}`.

### Custom pattern placeholders

| Placeholder | What it adds |
| --- | --- |
| `{n}` | The sequential canvas-order number, padded to match **Starting frame number**. |
| `{name}` | The layer's existing name. |
| `{row}` | The layer's one-based visual row number. |
| `{column}` | The layer's one-based visual column number. |

For example, this custom pattern:

```text
{n} — {name}
```

can produce:

```text
000 — Home
```

## Run Tidy

After reviewing the Actions and Preferences, select **Tidy n Layers**. TinyImage applies every enabled action to the current selection and reports how many layers were tidied.

Use Figma's normal **Undo** command if you want to restore the previous positions, names, layer order, wrappers, and pager values.

> **Tip:** For predictable numbering, place layers in clear visual rows or columns before running Tidy.

> **Note:** The font used by matching pager text layers must be available in Figma so TinyImage can update their characters.