こんにちは！
アソビュー株式会社でプロダクトデザイナーをやっている山中です。
よろしくおねがいします。
今回はデザインツールの Figma のお話です。
2020年の10月末に、アップデートされた機能の Variants機能 を触ってみたので、使い方や所感、今後の話を少し記載していければと思います。
Variants機能って？
Figma公式のドキュメントにもありますが、かんたんに書くと、同じような複数のコンポーネントをまとめる機能です。ボタンの例がわかりやすいと思うので、そちらで紹介していきます。
上の画像のように、
- 色
- 大きさ
- アクション
- アイコンのあり、なし
などをまとめて、1つのコンポーネントにしてくれるのが、Variants機能です。いままでは、1ボタン1コンポーネントでたくさんのコンポーネントを管理をしていて、どれだっけ？これだっけ？とかセレクトするのが非常に面倒だったのですが、Variants機能ができて1つのコンポーネントの中に全種類のボタンが管理できるようになり、管理が楽になりました。
このコンポーネントを利用すると、右のパネルでどのパターンのボタンを使うのか選択が可能になります。
Variants機能の使う手順
1. 命名規則をしっかりと行う
先に各コンポーネントの命名規則をしっかりと行っておくと、Variants化したとき非常に楽です。Figmaのドキュメントにも記載されていますが、
Name / Type / Size / State / Icon
と、命名していくと良いみたいです。
紹介しているボタンの命名規則は、下記のようになっています。
- Name: Button ← ボタンのVariants名
- Type: Primary, Secondary, Positive, Critical, Text
- Size: Tiny, Small, Medium, Large
- State: Default, Hover, Active
- Icon: True, False（または、ON, OFF）
2. 各状態のコンポーネントをつくる
どのような状態があるか確認しながら、つくっていきます。
命名規則をまもり、各種のコンポーネントを命名していきます。
3. 全種のコンポーネントを選択し、Combine as Variantsをする
4. プロパティの名前をつけていく
プロパティの名前は、自分でつけていくことになります。
命名規則通り行っておけば、かんたんです。
Variants機能を利用した、ボタンの完成！！！
うん、非常にかんたんで管理が楽になる、
とてもよい機能だと思います。
が、自分が携わっているデザインのフェーズによっては、利用しない方がガシガシ前へ進むと思います。（例: 高速に作って検証して捨てて、作って、を繰り返すフェーズであれば、使わないほうが良い。と個人的感想）
どの機能もそうですが、利用するタイミングはご自分で判断した方がよいです。
余談
macで自分の操作をキャプチャして、gif画像にする方法
最後に
アソビュー！では一緒に事業をつくる仲間を絶賛募集中です。
活気ある企業でバリバリ活躍したい方！お待ちしております！
