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

こんにちは、セキです。このブログでFigmaの記事を書くと自分の理解度が上がって一石二鳥ですね。Figmaも結構使いこなせるようになりました。今回はFigmaの機能、variantsの作り方とできることをご紹介しようと思います。

variantsとは？variantsのメリット

variants(バリアント)はFigmaが2020年の11月に発表した機能です。variantsは発表された当初から非常に注目されていました。variantsとはコンポーネントを整理する新しい方法です。1つのコンポーネントに対して複数のバリエーションがある時に役に立つFigmaの機能です。

variantsの作り方

ステップ１：ボタン作り

まず、1つボタンを作りコンポーネント化していきます。そしてこの作業を繰り返し、コンポーネント化されたボタンをいくつか作ります。

ステップ２：ボタンをvariants化する

作成したボタンを全て選択して「バリアントとして結合」をクリックします。そうするともともと1つ1つだったコンポーネントがvariant化されて、「コンポーネントセット」というものになります。

ステップ3: variantに名前をつける

次にvariantのプロパティに名前をつけます。もともとデフォルトでプロパティに名前をつけてくれますが、分かりにくいのでプロパティ名を変えておくと良いでしょう。今回のボタンは「色」のバリエーションを作るので名前を「青」「緑」にしておきます。

これでvariantの完成です！

まとめ

いかがでしたでしょうか。今回はFigmaのvariantsでできること、そしてvariantsの作り方をご紹介しました。みなさんは上手くvariantsを作成できましたか？関のブログは今回で最終回となります。次回からはもう一人の社員さんにバトンを渡します。引き続きよろしくお願いいたします。ではバイバイ！