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

こんにちは。オザサです。

巷でFigmaが流行っているようなので自分で触ってみることにしました。

Variantsという機能があって面白そうだったので今回はその記事になります。

https://help.figma.com/hc/en-us/articles/360055471353-Prepare-for-Variants

できたもの

画質が荒くてすいません。

やっていることとしてはインスタンスのプロパティを変えると、矩形が変化したり色が変わったりするものを作った感じです。

下記の画像のように整理しておくと使い勝手がいいかと思います。

手順

まずはまっさらなFrameを作って作業場を確保しましょう。

次に矩形を設置します。

そのままの勢いでコンポーネントに設定しましょう。

最初はこんな感じでFrameの中にRectangle(コンポーネント)があって、その中にRectangle(図形)があるという構造になります。

では早速Variants機能を触っていきます。

画面右側にあるVariantsの「＋」ボタンを押します。

押下するとデフォルトでは下記のような形でプロパティと値が設定されます。

そして、ちょっと分かりにくいのですが、コンポーネントと実際の矩形の間にVariantsが設定されます。

名前のところを押してみると、プロパティが設定されていることが確認できます。

なので、ここを書き換えてプロパティ名と値を設定しましょう。

こんな感じになります。

今回第一プロパティは形を選択するものにしたいので、squareとcircleを設定します。

circle(Variants)の中に四角でなく丸を設置しましょう。完成すると下記のような画面になるはずです。

これで一つ設定ができました。

ほぼ同じ手順なので割愛しますが、Variantsの横にある三点リーダから「Add New Property」を設定して色について設定してあげます。

下記のような状態になります。あとはredに設定している矩形に赤色をつけてあげれば完成です。

改めてですが、他の人が使いやすいように整理しておきます。

これを作っておくことで、ステータスごとに見た目が変化するコンポーネントを必要とする際、わざわざ似たような別のコンポーネントを作らずとも値を変えるだけで表現が可能になりました。

また、実際にそのコンポーネントを実装する際にどのようなプロパティを持っておけばいいのかデザインの時点で設計することができるので、きちんと使えれば実装の効率も上がるのではないかと考えています。

終わりに

Figma楽しいですね！