Figmaを使ったデザイン運用とTIPS コンポーネント編（Gaji-Labo 暫定版）

こんにちは、Gaji-Labo UIデザイナーの今西です。

Figma を使ったデザインで実践しているコンポーネントの管理について書きます。プロジェクト・ファイル編の続編です。

プロジェクトやファイルと同様に、実践しながらも管理や使い方は日々試行錯誤しています。現状のベストプラクティスはこんな感じですというご紹介です。
また、Gaji-Labo は Figma のProfessional チームで契約しているので、Professional チームでの使用を前提とした使用の説明です。

コンポーネントをどう使っているか

Figmaのコンポーネントは、再利用できるオブジェクトやフレームです。 ボタンやでヘッダー、ナビゲーションなどのUI要素をコンポーネントとして作成しておきます。コンポーネントのスタイルは共通するので、マスターコンポーネントを編集すると再利用要素にも同じスタイルが継承されます。

再利用・再配置されるコンポーネントはインスタンスと呼ばれ、色やテキスト、サイズを変更することができます。 コンポーネントはライブラリを活用することで、他のプロジェクトやファイルでも使用することができます。

コンポーネントの管理

コンポーネントは、検討段階では Draft ページで作成・調整を進めて、ある程度デザインが固まったら 「Component」のページに移動し、マスターとします。
使用しているコンポーネントのインスタンスは、マスターコンポーネントが同じファイル内のページ間で移動してもリンクが外れることはありません。
（ファイル間移動ではリンクが切れるのでインスタンスの貼り直しの必要があります。）

検討 → 確定版のコンポーネントを各バージョンを残しながら、本流のライブラリをを作っていくことができるので、現状はこの方法で進めています。

コンポーネントはフレーム以下に格納する

コンポーネントは、 名称に / を含めることで階層化することができます。
分類整理に便利ですが、パターンや状態が細かくなってくるとオブジェクト自体の名前が長くなったり、管理が辛い部分もでてきます。

そこで、コンポーネントの大枠カテゴリの分類についてはフレームを活用します。 コンポーネントはフレームに格納されている、グループに含まれていると、フレームやグループの名称で階層化されます。

例えばボタンコンポーネントの場合、 UI/Buttons/ というフレームを用意します。
そのフレーム以下に Contained Outlined の名前でボタンオブジェクトを置くと、ライブラリでのコンポーネントは UI/Buttons/Contained UI/Buttons/Outlined という階層で管理されます。

フレーム以下にコンポーネントを配置してカテゴリごとに分類するようにすると、カテゴリごとのコンポーネントがまとめられて「Component」ページ上で見やすくできます。
フレームに白背景にしてコンポーネントのカテゴリタイトルや説明テキストを置き、コンポーネントのスタイルやパターンを置くと、簡易ドキュメントのようにもできます。実装との連携にも良さそうです。

コンポーネント諸機能の活用

Variants

コンポーネントの新機能として Variants がリリースされ、コンポーネントをより細かく管理できるようになりました。
コンポーネントにプロパティと値（Value）を設定して、状態やスタイルの切り替えをすることができます。

Variant を実際使ってみた感触ですが、コンポーネントで作成するパターンが増えました。
作ってみると、状態やスタイルのパターンが無限にできてしまう…。より具体的にコンポーネントにする要素のパターンを洗い出して設計しないと、運用で破綻しそうで危ないなと思いました。ライブラリにして活用するとしても、Variants はメンテナンス運用を含めて保守のしやすさを考えて設計はしておくべきだと思います。

今の使い方ですが、コンポーネントのパターンを一つにしてしまうのも危険かなと感じたので、Variant ありのコンポーネントでも親の名前に / をつけて階層を切っています。ただし、親コンポーネントの名前で階層が深くならないように注意します（深くても2階層ぐらいまでがよさそうと思います）。

デザインで Variant プロパティを使ったコンポーネントが使えるようになったので、今後これがプロトタイプで状態変化で使えるようになるといいなあと期待しています。XDでいうプロトタイプ機能の State のような感じで。

Description は入力したほうがいい

コンポーネントの詳細パネルには Description と Documentation Link があります。 Description と Documentation Link に入力されたデータは Inspect パネルにも表示されます。
Description や Documentation Linkの使いどころは、 Inspect パネルに表示されることを活かしてフロントエンドとの連携できるところだと思います。

UIライブラリを使ったデザインでは、UIライブラリから使用する該当コンポーネントを Description 書きUIライブラリコンポーネントのドキュメントURLを Documentation Link に書いておくと、UIライブラリとデザインのコンポーネントをつなげることができます。

他のライブラリのコンポーネントを共通するものを使う場合においても、Figma 上の親のコンポーネントにリンクを貼ることもできます。複数のライブラリを使う場合でもコンポーネントを直接つなぎこむことができます。

古いバージョンのコンポーネントを完全に消さずに残す

コンポーネントのいち機能というより、マスターコンポーネントを残さずに古いバージョンを残すTIPSです。
コンポーネントを新しいバージョンにしたいが、以前のデザインのインスタンスを変えずに残しておきたい場合に便利です。

1. もとにするバージョンのコンポーネントを複製し、名前はそのままにコンポーネントを解除して通常のフレーム化
2. もとにするバージョンのコンポーネントの名前の頭に OLD/ をつける
3. OLD/... の名前のコンポーネントを削除
4. 複製されたコンポーネント（フレーム状態）をコンポーネント化する
5. 新しいコンポーネントを編集

もとのコンポーネントをは OLD/... に格納された状態になりますが、Assetパネルなどのコンポーネントのリストには表示されません。

デザインに配置されたインスタンスも、もとのデザインのままで残ります。 OLD/... のインスタンスを選択して「Restore Component」ボタンから、OLD/... のマスターコンポーネントを復活させることも可能です。

まだまだ暫定、機能の追加にあわせて進化させる

Variants 機能が追加になったため、保守性を考えた管理の精度は必要になりますが、便利になったことが確かです。少々複雑になってきたような気もしているので、運用ルールはちゃんと設計しながら使っていきたいと思います。ルールと言っても厳しくなく、それなりの自由に対応できるような運用が理想です。

また、デザインで作ったコンポーネントをフロントエンドのコンポーネントにスムーズに繋げられるような連携も考えていきたいです。