Use the Tidy tab to turn a rough group of Figma layers into an organized canvas and layer list. Tidy can detect the selection's visual flow, 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
- In a Figma Design file, select the layers you want to organize.
- Make sure the selected layers are siblings with the same parent.
- 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
Detects the strongest row or column layout and aligns the selected layers using the horizontal and vertical spacing from Preferences. Tidy tolerates small offsets and layers with different sizes when they share a visual edge or centre. 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. Both default to 100 px. |
| Layout | Auto detects the visual flow. Choose Rows or Columns to override it. |
| 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 {n} value and the number width used by {n} and {total}. The default is 000. |
| Rename strategy | Replaces existing names, merges the number with each name, or applies a custom pattern. |
Automatic layout detection
The default Auto layout compares the existing horizontal and vertical visual bands in your selection. A horizontal list or wide grid is arranged in rows, while a vertical list or tall grid is arranged in columns. Tidy recognizes layers that share a top, centre, or bottom alignment, so slight offsets and mixed frame sizes remain grouped naturally.
Choose Rows or Columns when you want to force a particular reading order instead of using the detected flow.
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 mixes your own text with optional naming variables. Use it to control exactly where numbers and existing layer names appear.
Naming variables
Enter any text in Name pattern, then add variables wherever their values should appear. The variables are optional, so you can also apply the same static name to every selected layer.
| Variable | What it adds |
|---|---|
{n} | The sequential canvas-order number, padded to match Starting frame number. |
{total} | The number of selected layers, padded to the same width as {n}. |
{name} | The layer's existing name. |
{parent} | The shared parent layer's name. For top-level layers, this is the Figma page name. |
{type} | The layer type, such as Frame, Instance, or Component Set. |
{page} | The current Figma page name. |
{row} | The layer's one-based visual row number. |
{column} | The layer's one-based visual column number. |
For example, with Starting frame number set to 001:
| Name pattern | Example result |
|---|---|
{n} Client Name | 001 Client Name |
Client Name {n} | Client Name 001 |
{n} {name} | 001 Home |
{n} of {total} {name} | 001 of 024 Home for a 24-layer selection |
{parent} — {n} {name} | Client Screens — 001 Home |
{page} / {type} / {name} | Presentation / Frame / Home |
{n} Row {row}, Column {column} | 001 Row 1, Column 1 |
Client Name | Client Name for every selected layer |
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.
Auto works best when the selection already suggests a visual flow. If an intentionally irregular layout is detected differently than you expect, choose Rows or Columns in Preferences.
The font used by matching pager text layers must be available in Figma so TinyImage can update their characters.