動画チュートリアル：レイヤーを自動で整理して名前を変更する
Tidyタブを使うと、雑然としたFigmaレイヤーのまとまりを、整ったキャンバスとレイヤーリストに整理できます。Tidyは、選択範囲の視覚的な流れを検出し、レイヤーを間隔グリッドに揃え、レイヤー順をキャンバス上の位置に合わせ、フレームに連番の名前を付け、プレゼンテーションのページ番号テキストを更新できます。
選択範囲を準備する
- Figma Designファイルで、整理したいレイヤーを選択します。
- 選択したレイヤーが、同じ親を持つ兄弟レイヤーであることを確認します。
- TinyImageを開き、Tidyタブを選択します。
選択状況には、準備ができているレイヤーの数と、それらを含む親が表示されます。TidyはAuto Layoutの親の中にあるレイヤーを移動したり並べ替えたりしません。キャンバス上か通常のフレーム内のレイヤーを選択してください。
Tidyのアクションを選ぶ
Actionsを開き、次のオプションを自由に組み合わせて有効にします。
グリッド整列（Grid alignment）
最も明確な行または列のレイアウトを検出し、Preferencesの水平・垂直の間隔を使って、選択したレイヤーを整列します。視覚的な端や中心が揃っていれば、多少のずれやサイズの異なるレイヤーも許容します。デフォルトで有効になっているのはこのアクションだけです。
名前の変更（Renaming）
各レイヤーのキャンバス上の位置に基づいて連番を付けます。デフォルトの開始番号000の場合、レイヤーは000、001、002のように名前が付きます。
レイヤー順（Layer order）
FigmaのLayersパネルで、選択したレイヤーをキャンバス上の視覚的な順序に合わせて並べ替えます。選択したレイヤーは、親のレイヤースタックの一番上にまとまったままです。
ページ番号（Presentation pager）
選択した各レイヤーの中から一致するテキストレイヤーを探し、そのテキストを1から始まるキャンバス順の番号（1、2、3など）に置き換えます。PreferencesでLeading zeroを有効にすると、01、02、03のようになります。
Tidyの設定を行う
Preferencesを開き、有効にしたアクションの動作を設定します。
| 設定 | 制御する内容 |
|---|---|
| Grid spacing | 整列したレイヤー間の水平・垂直の間隔。どちらもデフォルトは100pxです。 |
| Layout | Autoは視覚的な流れを検出します。上書きするにはRowsまたはColumnsを選びます。 |
| Wrap component instances | Grid alignmentの実行時に、選択したインスタンスを同じサイズのフレームの中に配置します。 |
| Pager variable | 更新するページ番号テキストレイヤーの正確な名前。デフォルトは{current}です。 |
| Pager number | ページ番号の値に先頭のゼロを付け、01、02、03のようにします。 |
| Starting frame number | 最初の{n}の値と、{n}と{total}で使う桁数。デフォルトは000です。 |
| Rename strategy | 既存の名前を置き換えるか、番号を各名前と結合するか、カスタムパターンを適用します。 |
レイアウトの自動検出
デフォルトのAutoレイアウトでは、選択範囲内の既存の水平方向と垂直方向の視覚的なまとまりを比較します。横長のリストや幅の広いグリッドは行に、縦長のリストや高さのあるグリッドは列に並べられます。Tidyは上端、中央、下端の揃ったレイヤーを認識するため、わずかなずれやサイズの異なるフレームが混在していても、自然にグループとしてまとまります。
検出された流れではなく特定の読み順を強制したい場合は、RowsまたはColumnsを選びます。
名前の変更方法
- Replaceは、連番をそのままレイヤー名全体として使います（例：
000）。 - Mergeは、番号と既存の名前を組み合わせます（例：
000_Home）。 - Custom patternは、独自のテキストと任意の命名変数を組み合わせます。番号や既存のレイヤー名を表示する位置を正確に制御したい場合に使います。
命名変数
Name patternに任意のテキストを入力し、値を表示したい場所に変数を追加します。変数は任意なので、選択したすべてのレイヤーに同じ固定の名前を付けることもできます。
| 変数 | 追加される内容 |
|---|---|
{n} | キャンバス順の連番。Starting frame numberの桁数に合わせてゼロで埋められます。 |
{total} | 選択したレイヤーの数。{n}と同じ桁数でゼロで埋められます。 |
{name} | レイヤーの既存の名前。 |
{parent} | 共通の親レイヤーの名前。トップレベルのレイヤーの場合はFigmaのページ名です。 |
{type} | Frame、Instance、Component Setなどのレイヤーの種類。 |
{page} | 現在のFigmaページの名前。 |
{row} | レイヤーの視覚的な行番号（1から開始）。 |
{column} | レイヤーの視覚的な列番号（1から開始）。 |
たとえば、Starting frame numberを001に設定した場合は次のようになります。
| Name pattern | 結果の例 |
|---|---|
{n} Client Name | 001 Client Name |
Client Name {n} | Client Name 001 |
{n} {name} | 001 Home |
{n} of {total} {name} | 24レイヤーを選択した場合は001 of 024 Home |
{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 |
Tidyを実行する
ActionsとPreferencesを確認したら、Tidy n Layersを選択します。TinyImageは有効なすべてのアクションを現在の選択範囲に適用し、整理したレイヤーの数を表示します。
以前の位置、名前、レイヤー順、ラッパー、ページ番号の値に戻したい場合は、Figmaの通常のUndoコマンドを使います。
Autoは、選択範囲にすでに視覚的な流れがある場合に最も効果的です。意図的に不規則にしたレイアウトが想定と異なる形で検出された場合は、PreferencesでRowsまたはColumnsを選んでください。
TinyImageが文字を更新できるように、一致するページ番号テキストレイヤーで使われているフォントがFigmaで利用できる必要があります。