こんにちは。Fightly!です。

今回はFigmaで書き出したい画像の名前を一括で変更する方法を備忘録としてまとめておきます。

名前を一括変更させるときっていつ？

たとえば、使用する複数の画像のファイル名を「img01.jpg」「img02.jpg」…といったように規則性を持たせて変える必要があるときに使います。

アイテム名に規則性を持たせることで、デザインファイル全体を見やすく整理できます。

やりかた

アイテムの名前を「img_about01」「img_about02」…にしたい場合、以下の方法で変更することができます。

①複数の対象を選択

名前を変えたいアイテムをドラッグしながら範囲選択します。

②Ctrl（⌘）+Rを押す

キーボードのCtrl（⌘）とRを同時に押すことで名前変更ウィンドウが表示されます。

③【変更後の名前】に任意の名前を記載

今回の場合、【変更後の名前】に「img_about」と入力します。

④【番号↑】または【番号↓】をクリック

「img_about01」「img_about02」…など連番にしたい場合は【番号↑】または【番号↓】をクリックします。

番号↑：$nnと記載され、レイヤーの上から順番に数字が振られる

番号↓：$NNと記載され、レイヤーの下から順番に数字が振られる

補足

「img_about07」から数字つけたい！と、01じゃない数字から番号を振りたい際には【番号】をクリックしたのち、【昇順開始位置】または【降順終了位置】を指定することで変更できます。

また、「img_about01」「img_about02」となっているものを「txt_about01」「txt_about02」のように変更したい場合は、一致するテキスト(省略可)欄に【img】と入力し、変更後の名前欄に【txt】と記載します。

このようにすると選択した部分を任意の文字に変更することができます。

他に【現在の名前】をクリックすると、現在使用している名前を引き継ぎながら、編集することができます。

ややこしい箇所もありますが、左にプレビューも表示されるため、そちらを見ながら変更してみてください。

まとめ

名前を変更したいものを選択し、Ctrl（⌘）+Rをして一括変更！

みなさまのサイト制作の助けになれば幸いです。