Figma UI作りに欠かせない バリアントのスキルセット方法

FigmaでUIを作るに欠かせないバリアント（Variants）機能。
今回はそれについて、備忘録としてまとめました。

この記事を参考にする場合は、Figma初心者レベルはマスター済の方が向いていると思います。

Variantsとは

Variantsとは、google翻訳するとバリエーション。
その通りで、1つのコンポーネントから、見た目の表示を変えるバリエーションが作れます。

Variants この機能どこで使うか

今のところ、下記のようなパーツを作るときに使っています。メリットは公式の動画で解説されていますので詳細は割愛します。

• ボタンの状態変化
  （例えば primary、secondary、アイコン切替、hover disabled active等）

• 見出し、ラベル

• レスポンシブ対応（モバイルとPC）

なぜ使うのか？

この機能を使うと汎用性の高いパーツ（コンポーネント）が作れます。
汎用性の高いCSS設計と考え方は同じです。👈❓汎用性の低いCSS設計とは、画面のアップデートをするときに、あちらゃこちら html cssを修正しないといけない作り、そのまま運用していくとcssが競合したり破綻したりします。（運用を考慮せずhtmlとcssを組み、他の人が運用辛い設計）

覚える方法

Figmaの公式YouTube動画を見て覚える方法がおすすめです！
英語ですが自動翻訳使えばOK。短時間、簡潔、軽快、理解がしやすいです。

動画に使用されているファイルは提供されているようです。私は動画で理解し実践で手を動かしました。汎用性の高いコンポーネントが作れるようになります。

Figma公式動画

コンポーネントの作成（5:44）

Variants（バリアント）を覚える前に、Component（コンポーネント）を知らない方はこちらから動画を見ます。

【重要】バリアントの作成（10:20）

【重要】コンポーネントのプロパティ（6:28）

公式動画の説明で実際作ってみて、バリアントは攻略できると思います。
どなたかの参考になると幸いです。