FigmaのFrame名を一括で変更するJavaScript
Figmaのデータを一括で変更したい
Figmaファイルの中のデータに対して、何かしらの操作を一括でおこないたいことがあります。
名前のリネームや色やテキストの置き換えなど、多くはFigmaのプラグインで解決できます。
しかし、微妙に既存のプラグインではやりたいことを実現できないことも多々あります。
その場合、FigmaのDevToolsのconsoleからJavaScriptを実行すれば、ある程度のことはプラグインに頼らなくてもいけます。
そのあたりの具体的な方法はFigmaのカンファレンスで発表した内容があるので、興味がある方は観てみてください。
今回は表題の『FigmaのFrame名を一括で変更する』というのをやってみた、という記事です。
FigmaのFrame名を一括で変更する
Twitterで、Frameの名前を一括で置き換えたいというようなツイートを見かけ、具体的にやりたいことによるものの、たぶんJavaScriptを書けばいけるだろうと試してみました。
最終的なコードはこんな感じです。
// 選択したFrame
const frames = figma.currentPage.selection;
// 変更先の名前の配列
const names = ["Gray","Blue","Yellow","Green","Purple","Sunset","Amber","Mint","Teal","Indigo","Pink","Red","Orange"];
// 選択したFrameの名前をひとつずつ変更する
frames.forEach((frame,index) => {
frame.name = names[index]
})
実際に動かした様子はこちら。
コードの解説
// 選択したFrame
const frames = figma.currentPage.selection;
名前を変更する対象を選択中のFrameにしています。この結果は配列で返ってきます。
// 変更先の名前の配列
const names = ["Gray","Blue","Yellow","Green","Purple","Sunset","Amber","Mint","Teal","Indigo","Pink","Red","Orange"];
変更先の一覧を任意の順番で配列として用意します。これはただ配列として [] と , 区切りで手で書いただけです。
// 選択したFrameの名前をひとつずつ変更する
frames.forEach((frame,index) => {
frame.name = names[index]
})
frames には選択中のFrameが配列で入るので、それを forEach でループで処理します。
あとはその処理で一つ一つのFrameの名前、 frame.name に名前をいれていきます。 frames も変更後の名前を格納した names も配列なので、ループの度に同じ順番で names から変更したい名前を取り出して変更しています。
今回はそれらしい形で実行できるものをサンプルとして書きましたが、やりたいことによってはもう少しコードを書き換える必要があります。
- 変更前と変更後の名前の組み合わせにルールがあり、それにあわせて変更する
- ある条件にマッチしたときだけ名前を変更をする
- 変更前のFrame名をある条件で並び替えてから変更する
いずれもJavaScriptとして書き換えれば実現できます。
ルーティンとして定期的に繰り返すような作業だとプラグイン化するほうがいいですが、単発で実行するような作業であればこのようにJavaScriptを書くだけで済むかもしれません。
プラグインをつくるよりは知識としても工程としてもconsoleで実行できるものを書くほうが楽なのでおすすめです。
おすすめのJavaScript実行のためのFigmaプラグイン
ScipterはFigma上でのJavaScript実行やそのコードの保存ができるプラグインです。
保存したコードは以後ワンクリックで実行できるので、頻度は多くないけどたまに必要になるようなことがあれば、Scripterで管理するのをおすすめします。
Discussion