Figmaのレイヤーを整理する小技
こんにちは。ビザスクの稲葉です。
毎日暑いので、この記事では消費カロリーを抑えるべく、地味に時間がかかるレイヤーのリネームと並べ替えを時短する方法について書いてみようと思います。
都度レイヤーを整理しながらデザインしていれば後で苦労することもないんですが、無心で作業していると、気づいたらデザイン比較用のアートボードが無限に増殖していたり、Frame 4とかRectangle 2でレイヤーが溢れていたりすることありますよね？
悔やみながら一つ一つ手作業でレイヤー名を変更するのは今日で終わりです。
基本的なレイヤーのリネーム
レイヤーのリネーム使いこなしてますか？
複数のレイヤー（オブジェクト）を選択して、⌘Rで表示されるあれですね。
検索して置き換える
上の「Match (optional)」に検索したい文字列を入力して、下の「Rename to」 にリネーム後の文字列を入力するのが基本的な使い方になります。
例えば「Rectangle」を「四角」に変える場合はこんな感じですね。
連番を付与する
現在のレイヤー名に連番をつけたい場合は、「①Number↑(昇順で連番を付与)」_「②Current name(現在のレイヤー名)」ですね。
結果は、左のPreviewに表示されている通りです。
番号を降順にしたい場合は、「Number↓」を選択してください。
開始番号を指定する
連番の開始番号を指定したい場合は、「Start ascending from」に任意の番号を入力してください。
上のサンプル画像では3を指定しているのでPreviewの数字も03から始まっています。
番号を入力したタイミングでは、Previewは変更されないので、確認したい場合は右下の「Rename」ボタンを長押しして、そっと手を離してください。
番号の桁数を変更する
デフォルトのボタンを使用して採番すると、2桁の数字が付与されます。
桁数を変更したい場合は$nnの「n」を追加・削除してください。
上のサンプル画像では3桁に変更しています。
レイヤーのリネーム応用編
リネームには正規表現が利用できます。例えば元のレイヤー名「四角 1」と「四角 2」を「01_四角」「02_四角」に変更したい場合は、「Match (optional)」で「四角 \d(半角数字)」を検索して、「Rename to」に「$nn(昇順2桁の連番)_四角」と入力すると実現できます。
正規表現をすべて覚えるのは大変なので、都度必要になったタイミングで、サンプルを確認してください。
正規表現サンプル集 - メガソフト
💡 ヒント：がんばって正規表現のトライ&エラーをしてると時間が溶けるので、一回で置き換えられない場合は、無理せず複数回に分けて置き換えましょう。
レイヤーの並び替え
レイヤー名を変更できたら次はレイヤーを並び替えましょう。
AutoLayoutを設定する
リネームする
（必要なら）プラグインを使って並び替える
1.AutoLayoutを設定する
例えば上の画像のようにバラバラに並んだレイヤーがあった場合、手作業で並び替えるのは大変ですよね？
まずはAutoLayoutを設定しましょう。
AutoLayoutを設定することで、右上から左下に順番にレイヤー（オブジェクト）を並べることができます。
並べた後に、レイアウトを縦並びや横並びに変更することもできます。
2.リネームする
次にAutoLayoutを解除するのですが、解除後はレイヤーの番号がバラバラの状態で並んでいます。
バラバラに並んだ番号を正規表現で検索し、正しい連番に置き換えます。
3.プラグインで並び替える
今は昇順でレイヤーが配置されていますが、これを降順に変更するにはプラグインを使用するのが一番簡単だと思います。
レイヤーを並び替えるプラグインはいくつかありますが、今回は「Sorter」というプラグインで、並び替えてみます。
使い方は、並び替えたいレイヤー（オブジェクト）を選択して、並び替える方法を選択するだけです。
今回は分かりやすく、並びを逆順に変更します。
結果は、上の画像のように、昇順（Layer_01→Layer_48）で並んでいたレイヤーが降順（Layer_48→Layer_01）に変更されました。
まとめ
今回は、すごく地味な時短を紹介しましたが、塵も積もればなので、省略できることは省略して、空いた時間で映画を見たりマンガを読んだり有意義に過ごしましょう。
この記事が気に入ったらサポートをしてみませんか？