Figmaでつくる【Variants解説】サンプルファイル付き

Figmaの「Variants」という機能について解説します。

Variantsとは

Variantsを使うと、異なる状態のコンポーネント一つのコンポーネントとして管理することができます。管理したコンポーネントを自由に取り出して表示することができる機能です。

コンポーネント名を「/（スラッシュ）」で区切るとことで、状態を階層管理することができます。

階層管理とAutoLayout機能を組み合わせると、自由度の高いデザイン制作が実現できます。

チュートリアル

サンプルでつくるデザインの仕様は下記のとおりです。

1.ジャンルボタンとバリエーションボタンを表示させる。
2.ジャンル名が複数ある。
3.ジャンル名に紐づくバリエーションが複数ある。

例）
・name A - variation A
・name A - variation B
・name B - variation A
・name B - variation B

上記仕様を元に、下記のようなコンポーネントを作成します。

コンポーネン名を「/（スラッシュ）」区切りで命名することで、自動的に階層管理が可能になります。今回は下記のルールでコンポーネント名を作成しました。

ParentName/GenreName/VariationType

この階層管理機能はVariantsに限らず、コンポーネント化されたすべてのアイテムに使えます。別記事にて言及していますので、興味がある方はこちらからお読みください。

作成したコンポーネントを選び、プロパティパネルから「Combine as Variants」ボタンをクリックして、「Variants」を作成します。

作成ができたら、下記のような表示なります。　プロパティパネル内にある「Description」「Documentation Link」は任意項目なので、空欄のままでも問題ありません。

ツールバーの「Assets」をクリックします。「Local components」内に、Variantsで作成したコンポーネントが登録されています。

「Assets」から作成したコンポーネントを画面に配置します。プロパティパネルに注目してください。コンポーネント名を親として、「Property1」「Property2」という項目ができています。

「Property1」の属性値変更することができます。

「nameB」を選択すると、表示が切り替わります。

同様に、「Property2」の属性値を変更すると、こちらも表示が切り替わります。

まとめ

「Variants」は、階層管理したコンポーネントを自由に取り出して表示することができる機能です。百聞は一見に如かず。是非試してみてください。

サンプルファイル

Variants.fig

18961 Bytes

ファイルダウンロードについて

ダウンロード