FigmaのComponentのパターンを作る

既存のComponentをVairnt化する

それぞれが独立したFigmaのComponentになっていないと無理っぽい

手順

それぞれを独立したComponentにする

Componentの名前を hoge/piyo のような形式に変更する

2024/4/15なんか命名規則が変わってた

全てのComponentを選択した状態で「バリアントとして結合」

具体例

checkboxを作る

命名を checkbox/on とか checkbox/off みたいにのもポイントっぽい

/ で区切って階層を入れる

ただ似てて、ただ切り替えたい、という考えでVariantを作ってはいけない

仮に、Variantの個をA, B, Cとすると、

これらA,B,Cは独立したComponentになるので、Aの変更はBに影響しない

A,B,Cを共通したデザインにするなら、

これらはVariantにするのではなく、

AのComponentとしてB,Cを作るべき

Variantはあくまでもpropertyの変更、のような概念である

今後の修正などを想定して、本当にVariantにしてよいのか？を立ち止まって考えないといけない