![見出し画像](https://assets.st-note.com/production/uploads/images/128300298/rectangle_large_type_2_9e1217d0f245505026e1de7684e54f20.png?width=1200)
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)
公式動画の説明で実際作ってみて、バリアントは攻略できると思います。
どなたかの参考になると幸いです。
よろしければサポートお願いします! いただいたサポートはクリエイターとしての活動費に使わせていただきます!