figmaのvariantsの作り方とできること

はじめに

この記事は新しい技術にチャレンジし続けるpalanのアドベントカレンダーDay4といつもお世話になっているデザイン女子部さんのデザイン女子部Advent Calendar 2020の４日目の記事です！

昨日は「【Figma】Auto Layout がアップデートされました！」についての記事でした。

【Figma】Auto Layout がアップデートされました！

本記事ではFigmaが2020年の11月に新しく発表した Variantsについての使用メリットや使い方をご紹介します！

Variantsは発表された当初から非常に注目されていた機能ですが、今回の記事ではFigmaのVariantsを使うメリットそしてVariantsの作り方や既存のコンポーネントをVariant化する方法を合わせてご説明します。

variantsとは？variantsのメリット

Variantsとはコンポーネントを作成、整理、使用する新しい方法です。1つのコンポーネントに対して複数のバリエーションを作るときに非常に役にたつFigmaの新しい機能です。

「Figma Variants Playground」より

Variantsを使うと、上記の画像のように別々のコンポーネントを複数のバリエーションがある1つのコンポーネントセットにすることができます。

こうすることで
Assetsパネルからコンポーネントを探しやすくなるコンポーネントの使用が簡単になるコンポーネントのバリエーションの切り替えが簡単になるデザインがさらにコードに近い形で作成することができる
など様々なメリットがあります。

1つのボタンをとってもhover, focus, disable, ボタンの大きさの違い、色の違い、デザインのちょっとしたバリエーションなど様々なパターンを作るとすぐにコンポーネントの数が膨大になるため、このように様々なバリエーションを１つのコンポーネントで管理できるのはとても便利ですね！

variantsの作り方

次にVariantsをゼロから作る方法をご紹介します。

今回はシンプルに色違いのボタンを作っていきます。

ステップ1: ベースのコンポーネント作り

まずは1つのボタンを作りコンポーネント化していきます。
コンポーネント化のショートカットはcommand + option + Kです

ステップ2: ベースのコンポーネントをvariant化

次に作成したコンポーネントを選択した状態で右のサイドバーのVariantsの「+」ボタンを押して行きます。

そうするともともと1つだったコンポーネントがVariant化されて、「コンポーネントセット」というものになります。
このときに、コンポーネントがもう１つ、元のコンポーネントの下に作成されます。
コンポーネントセットの右下にある「+」ボタンからもVariantを増やすことができます。

ステップ3: Variantを作成していく

コンポーネントセットの中のコンポーネントのバリエーションを作成していきます。
今回に関しては色違いのボタンを３つ作成しました。

ステップ4: Variantのプロパティに名前をつける

コンポーネントがVariant化できたら次にコンポーネントセットのプロパティに名前をつけます。
プロパティとはどの軸でコンポーネントのバリエーションをつけるかの定義です。

もともとFigmaはデフォルトでプロパティに名前をつけてくれますがわかりやすいようにデフォルトのプロパティ名を変えておくと良いでしょう。

コンポーネントセットを選択し右のサイドバーの「Property」というとこの名前を変更します。

今回のボタンは「色」を軸にバリエーションを作成していくのでプロパティの名前を「Color」にしておきます。

ステップ5: Variantの値に名前をつける

今度はバリエーションの値に名前をつけていきます。
一つ一つのバリエーションをクリックした状態で値を入力することで、どのバリエーションに対する値を今設定しているかが分かりやすいです。

今回に関してはそれぞれ「blue」「white」「red」と値を入れていきます。

これでVariantの完成です！

このように1つのコンポーネントで3つのボタンの種類を作成することができました。

既存のコンポーネントをvariant化する方法

0からコンポーネントをVariant化する方法はわかったけれど、既に使用しているデザインシステムのコンポーネントをVariant化したいと言う方は多いのではないでしょうか？

次に既存のコンポーネントをVariant化する方法をご説明していきます。

こちらは0からコンポーネントをVariant化するよりもシンプルにできます。

ステップ1: コンポーネント名を変更する

まずは既存のコンポーネント名を変更していきます。

今回の場合コンポーネント名がbutton_blue, button_white, button_redとなっていますが、下記ルールに則って変更していきます。

{{ベースのコンポーネント名}} / {{バリエーションの値}}

button/blue, button/red, button/white

この時複数のバリエーション軸がある場合は順番を必ず守ることがポイントです。

button/blue/large, button/blue/small, button/red/large, button/red/small

例えば、上記命名になっていた場合、

{{ベースのコンポーネント名}} / {{色}} / {{サイズ}}

という順番になっています。
この順番をきちんと守ることがとても大事です。

変更後はこのようになりました。

ステップ2: コンポーネントをVariant化

コンポーネントが正しく命名できたら、すべてのバリエーションを選択し、「Combine as variants」というボタンをクリックします。

ステップ3: プロパティの名前をつける

ステップ2だけでも既存のコンポーネントをVariant化できているのですが、複数のバリエーション軸がある場合これだけだと少しわかりにくいので、最後にプロパティの名前をつけましょう！

こちらで完成です！

まとめ

以上、今回の記事ではFigmaのVariantsでできること、そしてVariantsの作り方をご紹介しました。

既存のコンポーネントから作る場合は、命名規則がとても大事になってきますので最初に入念にチェックしておくと、あとがとても楽になります！

また、figmaの公式「Figma Variants playground」サンプルはこちらからダウンロードすることができます。

外ご紹介した例とはまた違うものが載っているのでご興味がある方はぜひ試してみてください。

また、Figmaの新しい機能が出てきたら紹介していく予定です。