
Variantsをやってみたい!#Figma
今回はFigmaのVariants(バリアンツ)を使ってみたいと思います!
手順📝
1, 好きな文字を書く。
2, shift + Aでフレームにする。

3, fillで好きな色に染める。フレームの角をとる。(今回は16)
4, Auto layout で文字をセンターに揃える。
5, フレームの名前を変える。(今回はbotton)
6, コンポーネントにする。(ctrl + Alt + K : Windoesのショートカット)

左側のアセットパネルを開くと、コンポーネントが確認できます。

7, 右側のVariantsの+ボタンをクリック

8, variantsのダッシュフレームを横に伸ばす。
9,マスターコンポーネント(初めに作った方)を左側に配置。

10, 右側のコンポーネントを編集。fillなし、文字の色変更、Strokeを2に。

11, 右側の+ボタンを押してvariantを複製。

12, 3つ目のvariantに影をつけ、名前を変える。

13, 小さいvariantsも作成。名前を整える。

完成です🥳Assetsにいくとvariantsがあるのでドラックしてみてください。右側のパネルで作ったvariantsが簡単に選べます😉

今回のfileはこちらです👇
参照
今回はここまでです!また次の記事でお会いしましょう~😉
Follow me here😊
Figma │ Instagram | Twitter │ Dribbble │ Linkedin | Website
いいなと思ったら応援しよう!
