🤯

もし「バカ」がコンポーネントライブラリを作っても大きな損失のでにくい設計ルール

2 min read

variantにまとめる? 同じカテゴリの兄弟にする?

例えばボタンで以下のようなプロパティが存在するとしよう

  1. Style
  2. Size
  3. Leader icon on/off
  4. Tail icon on/off
  5. Status
    これらを全てひとつのVariantにまとめるかどうか、アナタならどうするだろうか。

私はかつて、これらをひとつにまとめたvariantを作成した事がある。

Figma上での開発体験としてはbuttonをとにかくAssetから呼び出しさえすれば、上記すべての内容を設定できるのが非常に便利だったが、しかしいくつかの問題が発生した。

1. 自分以外が適切にbuttonを利用できるのかの懸念

例えばスタイルの違うボタンを配置したくなった時、Variantにまとめてしまうと探すことはできない。希望の見た目が存在するかどうかは実際にカンバス上にボタンを設置するまで分からないのだ。なのであらかじめ別のドキュメントを参照しなければならない。

「ある見た目のものを配置したい」というケースではvariantにまとめすぎるのは良くないのだ。

2. 壊れないように作るのが大変

わたしのFigmaの理解度や設計力が足らないだけかもしれないが、そのような「バカ」でも設計時に損失が少なく、またやり直しやすくしておく事はとても重要である。

  • シンプルだが、設計のステップが複雑でメンテナンスコストが高い
  • 数が多くなり把握が大変だが設計のステップがシンプル

正解不正解はないので自分のチームがどのような構造で役割を分担しているかによって決めると良いだろう。
デザインシステムのメンテナーが専任だったりして、十分にメンテナンス可能なのであり、リリースサイクルに影響が出ないのであれば設計が複雑でも大丈夫だろう。

hotfixやfeature実装、はてはマーケティング側の制作も兼務しているようなオールラウンダーが多いチームで、複数の人間がコンポーネントライブラリを作るのであれば設計の方をシンプルにした方が良い。

variantにまとめる適切な条件とは

プロパティをどこまでひとつのVariantにまとめるかどうかは判断の分かれるところである。複数の人間でコンポーネントライブラリを作っていく場合はその条件も定義する必要があるだろう。

重要なのは下記の二つと考える。

  1. コンポーネントの継承系列
  2. コンポーネントの役割と責任

コンポーネントの継承系列

二つのコンポーネントを見比べて、親子として認識できるかどうかは非常に重要である

下記のような例を見てみるとどうだろうか、ベースとなるボタンに対して下に並ぶボタンはどのような継承関係があるのか考えてみよう。

この時、サイズを親子とするか、アイコンの有無にするか、いずれも全てひとつのvariantにするかどうか。わたしはこのようにした。

理由はアイコンの有無は目で見なくても想像できるが、サイズに関しては「いくつバリエーションがあるのか」「それぞれの違いはどのくらいあるのか」を想像しづらい点にある。

ボタンを利用してFigma上で検索したときに、variantに含まれたバリエーションは見つけることができないので、視覚的に差があるものはVariantに含めないようにしている。

Variantにまとめる条件は「見た目の変化が少ない」「違いはひとつだけ」

上記の経緯をもとに今回は悩みがちなVariantにまとめるかどうかの条件を上記のように定義した。
基本的にvariantにまとめるものはState以外ではサイズ or アイコンとする。
またStyleのような見た目の異なるものはVariant化せず下記のように「兄弟」として分けることにした。

button/primary (fill)
button/secondary (hollow)

※カッコ名は役割ではなく見た目で命名した場合の例

設計時に考えるべきこと

暫定的ではあるがシステムやライブラリにて判断に迷うケースでは下記のようなことをチェックするようにしている。これらの影響範囲が小さければとりあえずやってみれば良いので簡単である。

  • リリースサイクルにおけるボトルネックにならないか
  • 構造を変更するのにどのくらいの影響範囲やコストがかかるか
  • 対面のやりとりなしにルールが理解、予測できるか

問題はこれらについて多大な影響があるかどうかなので、そもそもとして「バカでも分かる」「壊れにくい」「原因究明がラク」といのは非常に重要なことなのだ

もし、これらの内容を見て参考になると感じたらぜひ「いいね」をしてもらえると嬉しいです。では!

Discussion

ログインするとコメントできます