# Figmaのレイヤー名を一括変更するプラグイン「Rename It」

URL: https://webrandum.net/figma-plugin-rename-it/
公開日: 2022-04-03
更新日: 2022-04-03
カテゴリー: デザイン
タグ: Figma, Figmaプラグイン
出典: Webrandum（著者: サイトウ マサカズ）

複数レイヤーの一括変更は、Figmaのデフォルト機能でも最低限できます。

連番を振ったり、元のレイヤー名の利用もできるのでデフォルト機能でも十分ですが、さらに高度なことをしたい場合はプラグインの出番です。

[![](https://www.google.com/s2/favicons?domain=webrandum.net)Webrandum![](//webrandum.net/mskz/wp-content/uploads/2022/04/eyecatch-1.png)Figmaでプラグインを使わずに複数のレイヤー名を一括変更する方法https://webrandum.net/figma-multiple-layer-renameデザインをしていると、レイヤーがだんだんごちゃごちゃしてきて気になってしまいます。名称などは人によっては気にしないかもしれませんが、キレイに整理しておいて損をするものではありません。レイヤー名を整理したいときにはプラグインを使わないのかと思いがちですが、実はFigmaではデフォルトの機能でレイヤーの一括変更ができます。レイヤー名の一括変更方法まずはレイヤーパネルで複数レイヤーを選択してから、右クリックで［Rename（command + R）］を選択します。すると「Rename ○ layers」のモーダルが表示されます。項目内...](https://webrandum.net/figma-multiple-layer-rename)

## Rename It

![Rename It](https://webrandum.net/mskz/wp-content/uploads/2022/04/image_1-2-scaled.jpg)

[![](https://www.google.com/s2/favicons?domain=www.figma.com)Figma![](https://s.wordpress.com/mshots/v1/https%3A%2F%2Fwww.figma.com%2Fcommunity%2Fplugin%2F731271836271143349%2FRename-It?w=160)Figmahttps://www.figma.com/community/plugin/731271836271143349/Rename-ItFigma Community plugin — Keep your Figma files organized, batch rename layers and frames.• Mutiple LayersRename Multiple layers at once.• SequenceSequentially rename layers in either ascending or descending order.→ Keyword %n - Ascending numbered sequence→ Keyword %N - Descending numbered sequence→ Keyword %A - ...](https://www.figma.com/community/plugin/731271836271143349/Rename-It)

インストールするとFigmaのメニューバーに［Plugins］→［Rename It］が追加されます。

## 基本的な使い方

名前を変更したいレイヤーを選択した状態で、メニューバーか右クリックメニューの［Plugins］→［Rename It］内のメニューを選択して使用します。

![［Plugins］→［Rename It］](https://webrandum.net/mskz/wp-content/uploads/2022/04/image_2-2.png)

- 1. Rename Selected Layers：選択レイヤー名の変更

- 2. Find Replace Selected Layers：選択レイヤー名の検索置換

- 3. Settings：設定メニュー

- 4. Donate：寄付メニュー

ちなみに、初回起動時は下記のGoogleアナリティクスを使った解析の許可モーダルが表示されます。

プラグインをより良いものにするために「Agree」で許可しておきましょう（「Disagree」で許可しなかったとしてもRename Itは使えます）。

![初回起動時のモーダル](https://webrandum.net/mskz/wp-content/uploads/2022/04/image_3-2.png)

### Rename Selected Layers：選択レイヤー名の変更

![Rename Selected Layers](https://webrandum.net/mskz/wp-content/uploads/2022/04/image_4-1.png)

「Name」に変更名を入力して、連番を使用する場合は「Start from」で開始値を入力します。

「%」を使ったキーワードが使えるのはデフォルトのリネーム機能と一緒ですが、用意されている数が違います。

| キーワード | 入力 | 内容 |
| --- | --- | --- |

| Layer Name | %* | 現在のレイヤーの名前 |
| --- | --- | --- |

| Layer Width | %w | レイヤーの横幅（数字のみ） |
| --- | --- | --- |

| Layer Height | %h | レイヤーの高さ（数字のみ） |
| --- | --- | --- |

| Num. Sequence ASC | %N | 昇順の連番（1 → 2 → 3） 「%NN」とすると「01」のように2桁になる |
| --- | --- | --- |

| Num. Sequence DESC | %n | 降順の連番（3 → 2 → 1） 「%nn」とすると「03」のように2桁になる |
| --- | --- | --- |

| Alphabet Sequence | %A | アルファベットが順に入力される 「%a」とすると小文字になる |
| --- | --- | --- |

| Parent Name | %o | 親要素の名前 |
| --- | --- | --- |

| Child Layer | %ch% | 子要素の名前（複数ある場合は1番上の要素） |
| --- | --- | --- |

| Page Name | %p | ページ名（「Page 1」など） |
| --- | --- | --- |

| Symbol Name | %s | コンポーネントの名前 |
| --- | --- | --- |

| Style Name | %ls% | 使っているスタイルの名前 |
| --- | --- | --- |

デフォルト機能にあるのは「Layer Name」「Num. Sequence ASC」「Num. Sequence DESC」の3つだけです。

Rename Itを使えば下記のようにレイヤー名を分かりやすくできます。

- インスタンスを全て「%s」でコンポーネント名に統一する

- 画像は「image_%w_%h」に統一して横幅と高さが分かるようにする

- テキストに「%ls%」でスタイル名を付けて、スタイルを使っていることを分かりやすくする

### Find Replace Selected Layers：選択レイヤー名の検索置換

![Find Replace Selected Layers](https://webrandum.net/mskz/wp-content/uploads/2022/04/image_5-1.png)

Rename Itの場合、検索置換は別になっています。

「Find」に検索したいキーワード、「Replace」に置換したいキーワードを入力するだけです。

「Case Sensitive」にチェックを入れると大文字小文字を区別します。