Figma Componentの使い所
皆さんFigmaのComponentは活用されていますでしょうか？
ここ半年ほどで自分の中でComponentの使い所のようなものが定まってきたのでご紹介します。
Componentの置き場所
デザインファイルと同じページには置かず、下記2パターンの状況で置き場所を決めます。
なぜデザインファイルと同じページに置いてはいけないかというと、master componentがどこにあるか分からなくなったり、気づかぬうちにmaster componentが複製されて、どれが本物のmaster componentなのか分からなくなるからです。
A：デザインファイル外にcomponentファイルを作成する
- 外部のパートナーにデザインガイドライン的なものを納品する必要がある場合
- 同じプロジェクトでデザインファイルが複数に分かれる場合
B：デザインファイル内にcomponentページを作成する
- 社内でのみデザインファイルを取り扱う場合
- 同じプロジェクトでデザインファイルが分かれない場合
ほとんどの場合はBで問題ないと思います。
Componentの作成後は、AssetsからLibraryを開いて、ComponentのPublishをお忘れなく！ComponentのPublishやUpdate後は、Componentを利用しているファイルでReviewからComponentをUpdateできます。
Componentの命名規則
Figmaでは、レイヤー名を” / ”で区切ることで階層構造を作ることができます。
そのため、Componentをそれぞれの単位で命名するのではなく、
- Button / Primary
- Button / Secondary
- Input / Text
- Input / Select
- Header / Navigation
- Header / Alert
など、同じ機能を持つモジュール同士をグループ化しましょう。
Componentの作成単位
Componentは最小の単位から作成していきます。最小単位のComponentを組み合わせて一つ大きなレベルのComponentを作成していきます。
おすすめは
- アイコン / ロゴなどそれ以上分解できないもの
- 1を組み合わせて作成できるボタンやフォームパーツ
- 1,2を組み合わせて作成できるヘッダーやスライダーなどのモジュール
などの順番です。
Component Propertiesの使い方
Variant（種類）
Component自体に種類が複数ある場合に使用します。
例えば
- Device: SP, PC
- Status: Normal, Success, Failure
- State: Default, Active, Disabled
Boolean（真偽）
真 / 偽の2種類のステータスがある場合に使用します。
- Checked: True / False
propertyのvalueでTrueとFalseの二つの状態を作ると勝手にBooleanになります。
LayerのBoolean（Show）
Component内で表示・非表示のパターンを作成したい場合に使用します。
ものすごく見つけづらい場所にあるのですが、表示・非表示を切り替えたいレイヤーを選択し、LayerプロパティからShowプロパティを設定することができます。
Componentは中身に非表示レイヤーが増えるとファイル処理が重くなる性質があります。Component自体のレイヤーの表示・非表示で種類を制御するのではなく、Show Booleanで制御しましょう。
Instance Swap（インスタンス入れ替え）
Component内のComponent（Instance）の入れ替えをする場合に使用します。
たとえば、ボタンパーツの中のアイコンを入れ替えたい場合などです。
ただ、私は後述のNested Instancesの機能を使う場合がほとんどで、使用していません。
Text（テキスト）
Components内のテキスト（ラベル）を定義します。
Textプロパティで定義したラベル名はVariantsの入れ替えをしても内容が維持されます。
同じ意味を持つプロパティやレイヤーについては、Componentが違っても同じプロパティをつけておいた方がよいでしょう。
違うComponent同士でも同じ名前のプロパティは、入れ替えても維持されます。
Nested Instance（入れ子インスタンス）
Component内のInstanceのプロパティを変更したい場合に利用します。
前述のInstance SwapはInstance自体の入れ替えは可能ですが、Instanceにプロパティがあってもプロパティを変更することができません。
アイコンなど最小単位のComponentをInstanceとして利用するならInstance Swapでも問題ないかもしれないのですが、複数のComponentを組み合わせて作るモジュールの場合、Nested Instanceの方が便利です。
Component内のレイヤー命名規則
先ほどTextプロパティでも述べたように、Component内のレイヤー名や、プロパティ名は他Componentと機能が密接に結びついています。
レイヤーが一体何に使われているのか、別のComponentでも同じ機能を持つのか、同じ機能を持つ場合、入れ替えても差し替えた内容が失われないように、命名規則を統一しましょう。
例えば
- 名前なら「✏️ Name」
- 画像なら「📷 Image」
デザイン自体をComponent化することについて
門倉さんと試行錯誤中に、デザイン自体をComponent化するということも試しています。
というのも、最近やっていたとある案件では、同一画面に複数のステータス（一般スタッフ・管理者など）があり、それぞれのシナリオでプロトタイプを作成する必要があったため、Component化しないと膨大な画面変化とプロトタイプに対応できなくなったからです。
結果的に、デザイン自体のComponent化はかなりアリ、しかしながらComponent化するタイミングはデザインの最終段階にしないとデザインの変更履歴がなくなるデメリットがあります。
最初のComponentはモジュールから作ることをお勧めしますが、初期段階でもデザイン自体をComponent化をしたい！ということであれば、デザイン変更があるたびに一度まるっとコピーしてDetach Instanceして履歴を残してあげると良いかと思います。
Componentを活用してみなさまよいFigma Lifeをお過ごしください。