Figma で細かくレイヤーに名前をつけると便利だった

デザインのレイヤーには名前をつける、その理由 でデザインデータのレイヤーに名前を付ける理由を書きました。
今回はまた別の方向から、レイヤーに名前を付けると便利だった話を書きます。Figma でデザインを扱っている場合での活用も含めた内容です。

Figma の 検索機能の強化

Figma の検索機能に加えて、検索したレイヤーの複数選択ができるようになったのは、強化という意味でもインパクトの大きいことだと思います。
詳しくは、公式のヘルプも見てみると良いと思います。テキストの置換もできますし、かなり便利になりました。
https://help.figma.com/hc/en-us/articles/9141292269847-Find-and-replace-in-Figma

レイヤーを複数選択したい場合これまでの私のやり方だと Similayer で選択したいレイヤーの条件を細かく指定していたのですが、多くのデザインのを扱ったページ全体を検索する場合は、この方法は検索に時間がかかります。操作の重くなる感じが多少辛かったのですが、たくさんのレイヤーに対して細かい条件の検索だし仕方ないかなと思っていました。

Figma の検索機能はプラグインの Find and Replace がもとになっていますが、Figma のネイティブ機能化されたことに加えて、動作も軽くスムーズに動くようになりました。
CardList という名前のオートレイアウトのフレームを選びたい場合は、検索のテキストフィールドに　CardList　と入力して検索のオプションでフレームを選択すれば、検索結果に求めるレイヤーのリストが表示されます。簡単に操作ができますし、結果までの時間も速いです。CardList レイヤーのオートレイアウトの設定に変更を入れたい場合は、この検索結果のレイヤーを複数選択して変更をかければいいので、簡単に多くのレイヤーを編集しやすくなりました。

検索機能を使って一括編集を効率化する

それで、ここからそのレイヤー複数選択を含めた検索の活用です。
UIデザインで、たくさんの画面デザインにある特定の要素に変更を加えたい場合。レイヤーは画面のレイアウト要素で、コンポーネント化はされていない想定です。

早く効率的にレイヤーを選んで、変更をかけたい。とすると、Similayer を動かして選択するよりは、Figma 謹製の検索機能で複数検索する方が速いので、なるべく検索機能で済ませたい。
この方法を使おうとすると、そもそものレイヤーにちゃんと名前をつけておく必要があります。その名前デフォルトで付く Group Frame や汎用的な Layout Card List くらいの名前では検索結果が多すぎて、結果からレイヤーを選択していくのも手間になります。ここももう少し効率的に動きたい。
そのためには、もう少しその要素自体を表す具体的な名前にしておく必要がありそうです。特定の要素の意味と汎用的な意味の名前を組み合わせながら、名前をつけておくと良いのではないでしょうか。
商品のリストのカードのなかでレイアウトを持つレイヤーだと ProductList_Item_Layout のような感じです。

CSS のクラス名を設計しているような感じになってきましたが、Figma でのレイヤーにおいても名前を具体的にしておくと検索性を上げることができます。
大きなUIデザインのプロジェクトでデザインの画面を多く扱う場合の一括編集の需要を考えると、UIデザインに複雑度があり広い範囲や影響のある要素が多いのであれば、あらかじめのレイヤーの名前設計のようなことを考えても良いと思います。これをデザインを考えながら進めるのも中々の手間ではありますが、進めておく価値はあると思います。レイヤー名に使うワードのバリエーションやパターンを決めておくと、このあたりも多少進めやすくなるかもしれません。話は少し戻りますが、CSS クラスの命名規則を参考にするのも良いかもしれません。

やりすぎると効率マニアの世界ですが、やっておいても損はないと思います。
先々の楽のために、少し工夫しておく。前にも書いていますが、レイヤーの命名は習慣づけておくとそんなに苦にはなりません。今回は単に名前をつけるだけでなく、その要素の特異性でのグルーピングや具体性の意味を名前に反映させると、より便利な活用ができそうという話でした。

Gaji-Laboでのデザインツールの使いかたを紹介した記事をまとめました。UIデザインのプロジェクトでどんなふうにツールを活用しているのか、他のデザイナーのやりかたや実際に行っている作業内容などが知りたい方におすすめの内容です。