FigmaのVariants機能ってなに？便利なんですか？

こんにちは！
アソビュー株式会社でプロダクトデザイナーをやっている山中です。
よろしくおねがいします。

今回はデザインツールの Figma のお話です。
2020年の10月末に、アップデートされた機能の Variants機能 を触ってみたので、使い方や所感、今後の話を少し記載していければと思います。

Variants機能って？

Figma公式のドキュメントにもありますが、かんたんに書くと、同じような複数のコンポーネントをまとめる機能です。ボタンの例がわかりやすいと思うので、そちらで紹介していきます。

Buttonの種類

上の画像のように、

• 色
• 大きさ
• アクション
• アイコンのあり、なし

などをまとめて、1つのコンポーネントにしてくれるのが、Variants機能です。いままでは、1ボタン1コンポーネントでたくさんのコンポーネントを管理をしていて、どれだっけ？これだっけ？とかセレクトするのが非常に面倒だったのですが、Variants機能ができて1つのコンポーネントの中に全種類のボタンが管理できるようになり、管理が楽になりました。

Variants機能を使用したButtonのコンポーネント

このコンポーネントを利用すると、右のパネルでどのパターンのボタンを使うのか選択が可能になります。

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画像にする方法

.mov を gif に変換【Mac】 — Qiita

最後に

アソビュー！では一緒に事業をつくる仲間を絶賛募集中です。
活気ある企業でバリバリ活躍したい方！お待ちしております！

アソビュー株式会社の採用/求人一覧 - Wantedly