見出し画像

FigmaのコンポーネントをVariantsで状態管理する

こんにちは、ふじけん(@kenshir0f)です。
Figma に新機能 Variants がリリースされました。一通り触ってみたので、チュートリアル読むよりもサクッと知りたい方向けに、何が変わったのか紹介したいと思います。

Variantsとは?

複数のコンポーネントの状態をひとつにまとめて管理する機能です。
例えば、Buttonの[Default, Hover, Focus, Disabled]といった状態をそれぞれコンポーネントで作っていましたが、Variantsを使うことでひとつのコンポーネントで整理できるようになりました。

スクリーンショット 2020-10-29 1.40.17

チュートリアル

公式がチュートリアルを用意しているので、実際に触って試したい方はこちらをどうぞ。

Variantsの使い方(準備)

Variants は複数のコンポーネントに対して使うことができます。状態の違うコンポーネントまとめてくれるので、複数のコンポーネントを選択し、画面右の Combine as Variants をクリックします。

画像2

(右にVariantsが出ていない場合はコンポーネントになっていないので、オブジェクトを選択して ⌘(Ctrl) + alt(Option) + K でコンポーネント化してみてください。)

次にボタンの状態を設定します。Variants でまとめたコンポーネントをクリックし、画面右のプロパティを設定します。下のサンプルでは、プロパティ名に Type を、下の値に Default, Hover と入力して、コンポーネントを囲っている要素を Button に名前を変えます。

画像3

このとき、Variants を設定する前のコンポーネントの名前を [コンポーネント名] / [状態] にしておくと登録する作業がスムーズになります。
Button / Default, Button / Hover と名前をつけておくと、Combine as Variants するとプロパティの値などが最初から入力されています。

画像4

Variants にまとめたコンポーネント右下のプラスボタンは、クリックしてコンポーネントの状態を増やすことができます。下のサンプルでは追加した要素に Disabled のプロパティ名をつけて、要素の色を変えました。

画像5

これが基本的な Varants の設定になります。

設定したVariantsを使う

使うときは画面左の Assets パネルを開き(ショートカットキーはAlt + 2)、登録したコンポーネント名を入力してドラッグ&ドロップで配置します。次に配置した要素をクリックし、画面右で登録した状態を選択します。

画像11

ポチポチ押すだけで状態を変えられるのは便利ですね。

複雑な状態を一括管理する

例えば以下のようなボタンの状態を用意すると、8種類のコンポーネントを用意する必要があります。 

Type: Primary / Secondary
State: Default / Hover
Icon: あり / なし

これらのコンポーネントの名前を Button / [Type] / [State] / [Icon] と名前を降っておくと、Variants 化するとき楽に設定することができます。

スクリーンショット 2020-10-29 3.43.14

Combine as Variants すると、最初からプロパティ名が入力されているので、プロパティのタイトルを設定するだけになります。

画像11

使うときは画面右のプロパティをポチポチするだけで、ボタンの状態を変えることができます。

画像11

例えば、アイコンもコンポーネントにしておくことで、様々なボタンを簡単につくることもできます。

画像11

[Tips] Property の値を true / false にすると、使うときにトグルボタンで状態を選ぶことができます

画像11

おわりに

Variants でコンポーネント管理がだいぶ楽になりそうですね。コンポーネントは作った後のメンテナンスがとてもとても大変なので、Figma側でまとめてくれるのはかなりありがたい...

朝起きたら新機能 Variants についてサクッと知れたらいいなと思い、新機能を紹介させていただきました。

ではでは👋




この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
note.user.nickname || note.user.urlname

よろしければ応援お願いいたします! いただいたサポートは勉強資金にあてて、情報発信のモチベーションにさせていただきます!😁

🙇‍♂️応援ありがとうございます!!!
209
デザイナー兼エンジニア。主にUIデザインとフロントエンド。https://kenshir0f.com 個人で日報サービス作ってます→http://stella-app.jp