FigmaのVariant
既存のComponentをVairnt化する
手順
それぞれを独立したComponentにする
Componentの名前をhoge/piyoのような形式に変更する
2024/4/15なんか命名規則が変わってたmrsekut.icon
全てのComponentを選択した状態で「バリアントとして結合」
https://gyazo.com/ec167357bb7d8e6bb5784236f83c8cc5
具体例
checkboxを作る
命名をcheckbox/onとかcheckbox/offみたいにのもポイントっぽいmrsekut.icon
/で区切って階層を入れる
ただ似てて、ただ切り替えたい、という考えでVariantを作ってはいけない
仮に、Variantの個をA, B, Cとすると、
これらA,B,Cは独立したComponentになるので、Aの変更はBに影響しない
A,B,Cを共通したデザインにするなら、
これらはVariantにするのではなく、
AのComponentとしてB,Cを作るべき
Variantはあくまでもpropertyの変更、のような概念である
今後の修正などを想定して、本当にVariantにしてよいのか？を立ち止まって考えないといけないmrsekut.icon
https://youtu.be/xIuDIygGPVs?t=1214