エンジニアにはDevモードのココを見てほしい、Figmaのコンポーネント

Figma の Deveperモードの追加でエンジニアが実装に活用できるさまざまな機能が追加されました。
今回はデザイナーがFigmaでコンポーネントのデザインで作るプロパティとバリエーションのしくみをDeveperモードで確認できる機能について紹介したいと思います。

先日弊社のsemiguraが UIT Meetupのセッションに登壇しました。

こちらのセッションの発表した、Figmaのコンポーネントのプロパティ定義のコミュニケーションで使っていた機能についてのデザイナー側からのFigmaの解説を今回は試みています。
発表にもあったようにこのコミュニケーションが揃うと実装とデザインの一気通貫の認識あわせにも役立てられるので、ぜひ活用したい機能です。

コンポーネントのプロパティとDeveloperモード

Devloperモードでは、インスペクトタブのパネルよりも強化された情報表示ができるようになりました。コンポーネントに関しても機能が増えたりコンポーネントのまわりの情報が見やすくなっています。

コンポーネントの情報といえばプロパティです。
Figmaのコンポーネントのプロパティでは下記のタイプが設定できます。タイプについても簡単にまとめました。

• ブーリアン（Boolean）
  表示のオン・オフを切り替えるオブジェクト（レイヤー）を指定する。
• インスタンススワップ（Instance Swap）
  コンポーネント内で使用する入れ替えられるインスタンスを指定する。
• テキスト（Text）
  テキスト内容（文字列）を変更できるテキストレイヤー指定する。
• バリアント（Variant/s）
  属性を指定して属性のパターンを定義する。バリアント属性とそのバリエーションのセットで定義される。

デザインでは、これらのプロパティタイプを組み合わせてコンポーネントのパターンと変更可能な項目を設定しています。またそれぞれのプロパティはコンポーネントに設定される際に任意の名前を持ちます。

Devloperモードでもコンポーネントに設定されたこれらタイプはプロパティとして確認できます。
デザインで作ったコンポーネントのプロパティは、Developerモードのインスペクトパネルの「コンポーネント」の「Prop」セクションに表示されます。

デザインではバリアントでコンポーネントのパターンをつくることが多いので、バリアントを使ったプロパティを例に見てほしいポイントを紹介します。

ボタンコンポーネントのプロパティを Developerモード で見る

図のようなボタンのコンポーネントを作成し、バリエーションパターンとして、プロパティを style（ボタンのスタイル） と state（ボタンの状態） を持つものとします。

バリエーションパターンを確認する際に使うものとして、コンポーネントの style と state 確認するには Developerモードのどこを見ればよいかを説明します。

コンポーネントに設定されたプロパティは「コンポーネント」のセクションのプロパティとして表示されます。
（マスター）コンポーネントを選択すると、プロパティはバリエーションを含むプロパティのタイプやVariantとして概要を表示します。

style と　state が、バリアントが複数のバリエーションを持って設定されていることがわかります。

インスタンスを選択した場合は、そのインスタンスの各プロパティが表示されます。

選択したインスタンスが、どのようなプロパティ style と　state で設定されているのかがわかります。

コンポーネント Playground

またコンポーネントセクションには、「Playground」への導線があります。コンポーネント/インスタンスのプロパティにある「Open in playground」クリックすると Playgroundのモーダルが開きます。

Playground では、コンポーネントのプロパティを手元で変更してバリエーション変化の結果を確認できます。たとえば、状態や切り替えたり、テキストを変えてみたりできます。

デザイナーがコンポーネントのプロパティに設定していることをDeveloperモードでも触れるようになったことで、コンポーネントのパターンをより細かく検証できるようになりました。
Playground のプロパティのお試しは、Storybook での Props の検証の操作にも近いので、コンポーネントのプロパティについての意識合わせにも役立つはずです。

最後に

Developerモードの機能充実により、コンポーネントについての認識をデザイナーとエンジニアで合わせやすくなったように思います。
Developerモードはデザイン自体のコード出力も役に立ちますが、コンポーネントのまわりの機能充実でデザインと実装のギャップを埋めることに恩恵があります。

これまでデザインでは、コンポーネントのバリエーションについてインスタンスで再利用性よく使うために細かくプロパティ設定してきた資産がありましたが、その点を実装のエンジニアとうまくつなぎきれていないところもありました。
コンポーネントを活用するための資産であるプロパティについての認識をエンジニアとあわせることで、コンポーネントについての理解を深めて効率よく進められるはずです。
お互いの認識あわせに役立つハンズオフ機能であるので、見るポイント・見てほしいポイントを押さえて、コラボレーションに役立てるのがいいのではないかと思います。