Figma のVariants 機能でコンポーネントの管理を最適化する

こんにちは！　UIデザイナーのmarinです。
2020年10月末にFigma に搭載されたVariants 機能、便利ですね〜！　Figma はこんなことができたらいいのになぁと思うことをどんどん実現してくれるので大好きです。
早速スペースマーケットでもVariants 機能を活用しているので、そもそもVariants 機能とは何か・何が便利なのかという簡単なおさらいと、実際の適用に至るまでを紹介します。

Variants 機能とは？

複数のコンポーネントをひとつにまとめる機能です。といっても文章を見てもあんまりピンとこないので、ボタンのコンポーネントの例を出します。
今までは、ボタンのコンポーネントひとつに、状態ごと（hoverとかdisabledとか）の複数のコンポーネントが必要でした。こんなイメージですね。

ボタンの例ですが、DefalutとDisabledの2パターンでもサイズ別に作ると8個もコンポーネントがあります。ボタンに限りませんが、こういった様々な状態をもつコンポーネントが増えると肥大化していき、管理するのが大変になります。
上の例だと色なんてささっと変えられるからDisabled はなくてもいいじゃん？ と思いがちですが、よく使うものはコンポーネント化したほうが圧倒的に楽なので（Disabledのグレーってこのグレーだっけ？　となるのが目に見えるので時間の無駄）、コンポーネントが増えていくのはしょうがないところがありました。

そんな悩みを解決してくれるのがVariants 機能です。
様々な状態をもったコンポーネントたちをVariants 化することでひとつにまとめることが出来るので、運用も管理も楽になります。Variants 化した後はコンポーネントの切り替えも簡単です。

既存コンポーネントをVariants 化する

まずは命名を見直す

早速スペースマーケットで使っていたボタンをVariants 化していきます。
まずはFigma の公式ドキュメントを読みます。先に命名規則をしっかりやっておくとVariants 化した時に楽が出来るということです、が……もともとSketch 時代の命名を引き継いでいたのもあり、コンポート名を丁寧に切り分けていたせいで命名がとても長くなっていました。

お察しのとおりですが、命名が長いと運用もいまいちです。
正確な日付が曖昧で申し訳ないのですが、おそらく2020年9月前後のどこかのアプデでFigma のインスタンス変更がすごくよくなったのですが、この命名がインスタンスの手軽さを殺していました……。

面倒だから全部Assetsから持ってくるかAtomsを開いてそこからコピペしてくるかでやっていたんですが、命名を簡略化していればもうちょっとやりやすいだろうなーとは思ってはいました。面倒だからとサボってましたが（微々たることではあるものの）この機会に統一しようと決めました。

ドキュメントどおり、Name / Type / Size / State / Icon と命名します。Nameの部分は通常ならButton なのですが、上述のキャプチャどおりインスタンスはコンポーネントを内包しているFrameの名前を読むためButtonにしてしまうとButton>Buttonとなってしまい見た目が悪いので、Standardとしておきました（なんでもいいのですが）。ButtonというFrameの中にこれ以外の他の見た目の違うボタンがあるのでこうしたのですが、そうでもなければそこまで気を使わなくてもいいかもしれませんが。

コンポーネントのパターン（状態）を洗い出す

ボタンのパターンを上述の命名規則と照らし合わせ、どんな状態があるか確認します。Figma では状態の親の名をプロパティ、子をバリューと呼びます。

Property: Value
Name：Standard（Variants の命名）
Type：Primary（背景色だけ）/ Secondary（ボーダー）
Size：Small / Medium / Large / Huge
State：Default / Disabled
Icon：True / False
（Frame名はButton）

こんな感じになります。Iconの命名だけありなしの判定をTrue/ Falseにしておくとスイッチで判定できるので、そこだけ気をつけていればあとは何でもわかりやすいようにしておけばOKです。

命名は後からいくらでも変えられる（実際これを書いてる時にスペルミスをしたので下記を参考ください）ため、後の作業でも問題ないですが、どうせやるので先にやっておいた方が無難です。

上記のキャプチャで選択している一番小さなボタンはStandard/Primary/Small/Default/False といった感じで、ぽちぽちと命名を変更します。

命名変更が終わったら全コンポーネントを選択し、右のパネルのVariants にあるCombine as Variants をクリックし、Variants 化します。

Variants 化をしたらプロパティ名をつける

このようにVariants 化されますが、プロパティ名は自分で変更します。今回はわかりやすいのでFigma のお手本通りに命名していますが、この通りの状態にならないことも当然あるので、分かりやすい名前にしてあげればそれで大丈夫です。

キャプチャのとおり適当にやりすぎてスペルミスをしまくってるバリュー名も変更可能なので、このように命名をミスっても大丈夫です！　バリューをクリックし、正しい命名に変更します。
プロパティ名（修正があればバリュー名も）を入力し終えたら、Variants 化は完成です。

Variants 化したコンポーネントの使い方

実際にコンポーネントを呼び出してみると、右のパネルで簡単にボタンの状態を変更することが可能です。簡単ですね〜！

終わりに

このボタンのように、他のコンポーネントもすべてVariants 化できるものは適用しました。これで状態ごとに複数用意していた膨大なコンポーネントもひとつにまとまり、運用も管理も楽になりました！

コンポーネントは便利ですが、状態変化の分だけ存在すると無数に増えていき、管理が負担になります。便利にするために作っているのに、コンポーネントの状態が多いところに修正が入ると手に負えなくなって（ひとつひとつ直していくのが本当に面倒でげっそり）負債になってしまいます。
とはいえ利便性を考えると作らないわけにも……というジレンマを抱えていたのを、Figma が管理のための機能を作ってくれたのはかなりありがたいです。難しそうに見えますが、作ってみるととても簡単なので、まだ実践されていない方は是非試してみてください。
この記事がVariants 化にあたって少しでも参考になれば幸いです。

余談

この記事の半ばぐらいにインスタンスの変更がすごくよくなったと書いたのですが、一番恩恵受けたのはアイコンを一覧で見られるようになったことだと個人的には思っています。
Sketch は最初から出来ていた機能でしたが、長らくFigma はこれが出来ずにいたので、アプデされた時はとても嬉しかったです。

アイコンの数が少なければ名前で判断出来るのですが、100個とかあると辿るのもしんどかった。一覧の出し方もいまいちでしたしね……。これが実装されたことで、アイコンのデータを開かなくてもよくなりました（笑）。アイコン名がわからなすぎて、元データ見ながらじゃないと探せなかったのが、インスタンスの変更だけでよくなったので地味に楽です。
あとはアイコンを変更した際にカラーをデフォルトカラーに戻すのだけちょっとめんどくさいので、そこもどうにかなればな〜と思ってます。
こういう地味なんだけどあると便利な機能をFigmaは整備してくれるので、きっといつの日か出来るようになるはず、と期待しています。

以上になります。最後まで読んでくださりありがとうございました！