![見出し画像](https://assets.st-note.com/production/uploads/images/76795664/rectangle_large_type_2_14cda4edd3d84eda43439aebae6bcf05.jpeg?width=800)
Variantsをやってみたい!#Figma
今回はFigmaのVariants(バリアンツ)を使ってみたいと思います!
手順📝
1, 好きな文字を書く。
2, shift + Aでフレームにする。
![](https://assets.st-note.com/img/1650308009719-q286IqqJ9j.jpg)
3, fillで好きな色に染める。フレームの角をとる。(今回は16)
4, Auto layout で文字をセンターに揃える。
5, フレームの名前を変える。(今回はbotton)
6, コンポーネントにする。(ctrl + Alt + K : Windoesのショートカット)
![](https://assets.st-note.com/img/1650331698761-Jhydg3hGvZ.jpg?width=800)
左側のアセットパネルを開くと、コンポーネントが確認できます。
![](https://assets.st-note.com/img/1650331877031-ANMkoCjYVl.jpg)
7, 右側のVariantsの+ボタンをクリック
![](https://assets.st-note.com/img/1650332050474-3qxHBnFQaz.jpg?width=800)
8, variantsのダッシュフレームを横に伸ばす。
9,マスターコンポーネント(初めに作った方)を左側に配置。
![](https://assets.st-note.com/img/1650332310815-JK96FKdZvi.jpg?width=800)
10, 右側のコンポーネントを編集。fillなし、文字の色変更、Strokeを2に。
![](https://assets.st-note.com/img/1650378139919-z4W1LNEwof.jpg?width=800)
11, 右側の+ボタンを押してvariantを複製。
![](https://assets.st-note.com/img/1650378365769-JNj43IHeUh.jpg?width=800)
12, 3つ目のvariantに影をつけ、名前を変える。
![](https://assets.st-note.com/img/1650378615829-3YFg4ZJLB2.jpg?width=800)
13, 小さいvariantsも作成。名前を整える。
![](https://assets.st-note.com/img/1650378996902-eFOIdgDFHs.jpg?width=800)
完成です🥳Assetsにいくとvariantsがあるのでドラックしてみてください。右側のパネルで作ったvariantsが簡単に選べます😉
![](https://assets.st-note.com/img/1650379347122-iAhdbXJVOx.jpg?width=800)
今回のfileはこちらです👇
参照
今回はここまでです!また次の記事でお会いしましょう~😉
Follow me here😊
Figma │ Instagram | Twitter │ Dribbble │ Linkedin | Website
よろしければサポートお願いいたします。いただいたサポートはクリエイターとしての活動費に使わせていただきます。