見出し画像

Figma の Variants をベースコンポーネントでメンテナンスしやすくする

seya

Variants は大変便利な機能ですが、コンポーネントの状態が増えてくると組合せ爆発が起こり、ものすごい数になっていきます。

Shopify Polaris の Button

そうやって頑張って作ったコンポーネントの Variants に変更が入った時に一つ一つ変更を加えていくのは中々の苦行ですし、変更漏れが起こる可能性もあります。

そんな時に便利なのが「ベースコンポーネント」です。
発想は至極シンプルで Variants で定義されるコンポーネントのデフォルト状態ものをコンポーネントとして作り、Variants の一つ一つはそのコンポーネントのインスタンスとして作成します。

こうすることによって、このベースコンポーネントを変更するだけで Variants 全てに変更が伝わる訳ですね。

良さそうに聞こえますがデメリットもあります。
それは

  • 扱いが複雑になる

  • それに伴い存在すべきでないコンポーネントが作れてしまう

という点です。
例として次のように先頭にアイコンを持ったり後ろにアイコンを持ったりするボタンのデザインを考えてみようと思います。

これを一つのベースコンポーネントで作ろうとすると次のようなものを用意することになります。

この作り方の問題はレイヤーをポチポチするのが煩雑 & 複雑なところ、状態が増えてくると見た目とレイヤーの構造がかなり違うものになるので扱うデザイナーやエンジニア目線からも一目では扱いづらいものになることです。

そこから可能性として出てきてしまうのが"存在すべきでないコンポーネント"が出てきてしまうことです。

先ほどのボタンの例で言うと下のように左右にアイコンを持ったコンポーネントも作れてしまいます。Figma では「左にアイコンを表示していたら右にアイコンは表示しない」などの細かい条件分岐を作ることはできません。

上記のようなボタンであればさすがにおかしいと気づきそうなものですが、どのレイヤーがどんな条件の時に切り替えていいのか、というのが明示できない以上、存在すべきでないコンポーネントが出現してしまう余地は生まれてしまいます。

また複雑になってくると全てのプロパティに対応しつつ、変更した時に全てのプロパティでおかしくならないようにベースコンポーネントを設計することに注意を払う必要があり、余計にメンテナビリティがかかって本末転倒になる可能性もあります。

ベースコンポーネントはプロパティ毎に作る

そこで大事な発想がベースコンポーネントは1個だけ作るのではなく、プロパティごとに作るということです。

つまりベースコンポーネントは次のように作り

それぞれをベースにインスタンスを作って、それで Variants を作ります。

こうすることによって見た目とレイヤーの構造は一致させつつも元のコンポーネントを変更すれば他の Variant もアップデートできるようになります。
実はメンテナンスをする量は増えているのですが(上記の例だと Button をアップデートする時一つだけ変更するわけではなく、何もないもの・アイコンが左にあるもの・右にあるものの３つを変更する必要がある)、使う側の混乱を失くすためには必要なコストかなと思います。

軸となるプロパティは"構造が変わらないもの"で選ぶ

ここで疑問に思うかもしれないのが「どうやって軸となるプロパティを選ぶんだろう？」ということです。

先ほどはアイコンの位置毎にベースコンポーネントを作りボタンのタイプ、Primary/Default などの色が変わるプロパティを変えるようにしました。つまりプロパティの中にベースコンポーネントを作るものとそうでないものがあります。

これをどう選ぶかという話ですが、"レイヤー構造が変わるかどうか" で考えるのがいいかなと思っています。例えばアイコンが表示されるような Variant はレイヤーが一つ増えるので構造が変わります。これは最初に説明したように一つのベースコンポーネントで実現してしまうと複雑性を生むため、分けた方がいいです。

他方色などが変わるだけのものは普通のコンポーネントみたいに色を上書きするだけなので問題ありません。

なので"レイヤー構造が変わるかどうか"でベースコンポーネントを分けて作るのがいいのかなと思います。

そんなにプロパティが多くなければそもそもベースコンポーネントを作らない

また、ざっくり基準ですが Variant の数が一桁くらいならそこまでメンテナンスも大変でもないため、ベースコンポーネントも作らなくてもいいのかなと思います。

ボタンみたいにプロパティがたくさんあり、組み合わせによって爆発的に増えていくようなものがある時の一アイデアとして覚えておく、くらいの考え方で多分よいでしょう。

おわりに & 将来への期待: レイアウトコンポーネントが作れたら変わるかも

以上ベースコンポーネントの解説でした。たくさんの Variants を作る時にお役立てください！

あと今回構造が変わるかどうかでベースコンポーネントを分けるようにしましたが、これは Figma がコンポーネントのインスタンスでレイアウトを変えるような機能がないからで(slot という裏技はありますが)、これがもし将来的に実装されたらまた考え方も変わるのかなと思います。

それでは、よい Figma ライフを👋

参考文献


この記事が気に入ったらサポートをしてみませんか？