UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【Figma】Variantsとは?

FigmaのVariants機能が便利そうなので試してみる

https://help.figma.com/hc/en-us/articles/360056440594

この機能はどのチームまたはプランでもサポートされているが、ライブラリへの公開は無料アカウントではできない

簡単に言うと、コンポーネントにプロパティと値(Value)を設定して、状態やスタイルの切り替えをすることができるようにする機能

これを利用すると、例えばボタンに対して以下のようなプロパティを設けることができる

f:id:uggds:20210711140255p:plain:w300

作り方は下の動画が参考になった

youtu.be

ということで、次のようなボタンを作ってみた

f:id:uggds:20210711142843p:plain:w300

f:id:uggds:20210711143430g:plain

苦労したのはコピペするたびにコンポーネントのmasterとinstanseが混在してしまい、解除し忘れなどに気づかぬまま進めてよくわからなくなってしまった

動画を見るにそれぞれをコンポーネントのmasterにする必要があるみたい

そうなると、これが何十パターンと作った場合に、修正する手間がかかりそうなのが懸念

参考

https://help.figma.com/hc/en-us/articles/360055471353-Prepare-for-variants