インスペクトガイド
Figmaのリデザイン版であるUI3を使用している場合、この記事の一部が製品に表示される内容と一致しない可能性があります。アップデートを行うまで、今しばらくお待ちいただきますようお願いいたします。Figmaの新デザインの詳細はこちら→
デザインをインスペクトすることで、開発者や他のステークホルダーがデザインの構造とプロパティを理解しやすくなり、より簡単にコードに変換できるようになります。
デザインファイルをインスペクトする方法はプランタイプ、シートタイプ、およびファイル権限によって異なります。以下のツールを使用して、あなたがインスペクトしたいファイルへの個人アクセスに基づいて、一般的なインスペクションタスク（エクスポート、測定、コード生成、アノテーションの表示、開発用プラグインの使用）を行う方法を確認してください。
ファイルアクセス権に関係なく、インスペクトエクスペリエンスを利用できます。
まず、ファイル上でDev Modeに切り替えるか、キーボードショートカットShift Dを使用して、インスペクト中のファイルでDev Modeにアクセスできるか確認してください。Dev Modeにアクセスできない場合は、デザインモードでインスペクトを行うことになります。インスペクト方法を確認するために、編集可アクセス権または閲覧のみアクセス権を選択できます。
私はDev Modeを持っておらず、閲覧のみアクセス権があります
Dev Modeへのアクセス権が必要ですか?スタータープランをご利用の場合は、有料プランにアップグレードするか、有料チームにファイルを移動する必要があります。有料プランをご利用の場合は、フルシートまたはDevシートが必要です。
距離の測定
オブジェクトが、フレーム、グループ、またはコンポーネントの内側でネストされていても、その間の距離を測定できます。
- キャンバスの第1のオブジェクトを選択します。
- 修飾キーを押したままにします。
- Mac: ⌥ Option
- Windows: Alt
- 第2のオブジェクトにカーソルを合わせます。
2つのオブジェクトの間に赤い線が、また水平方向と垂直方向の測定値が表示されます。
ヒント: 測定に問題がありますか？オブジェクト間の距離を測定するためのガイドをご確認ください。
コードを生成
CSS、iOS、またはAndroid用の自動生成コードスニペットをコピーできます。
- キャンバスでオブジェクトを選択します。
- オブジェクトを右クリックし、[コピー/貼り付けとして] > [コードとしてコピー]を選択します。
- ニーズに合ったコードオプションを選択してください。
プロパティを表示
[プロパティ]タブは、キャンバス上のオブジェクトのプロパティのリストを提供します。これには、レイアウト、色、タイポグラフィー、テキスト文字列、コンポーネントプロパティ、スタイル、バリアブルなどのプロパティが含まれます。オブジェクトのプロパティを閲覧する方法:
- キャンバスでオブジェクトを選択します。
- 右サイドバーの[プロパティ]タブをクリックします。
エクスポート
- エクスポートするレイヤーを選択します。現在のページのキャンバス全体をエクスポートする場合は、キャンバス上のすべての選択を解除します。
- [エクスポート]タブで、プラスアイコンをクリックしてエクスポート設定を追加します。必要な数のエクスポート設定を選択に追加できます。
- エクスポート設定項目を設定します。Figmaのエクスポート形式および設定の詳細→
- 必要に応じて、[プレビュー]をクリックしてアセットの見え方を確認してください。複数のオブジェクトを選択している場合は、[プレビュー]設定は表示されません。
- [エクスポート]をクリックします。
ヒント: エクスポートについて詳しく知りたいですか？Figmaでのエクスポートに関するガイドをご覧ください。
コメントを閲覧または追加する
コメントは、デザインの特定部分に注意を引くことで、デザイナーと開発者の協力を促進します。デザインの一部がどのように機能すべきかについて、より多くの文脈を共有するためにコメントを残すことができます。
- コメントモードに切り替えるには、ツールバーのをクリックするか、Cを押します。カーソルがに変わります。
- 次のように、コメントする場所を選択します。
- キャンバス上のコメントをピン留めしたい場所をクリックします。
- または、クリックしたままカーソルをドラッグして、コメントを付ける領域を選択します。
- フィールドにメッセージを入力してください。同僚やコラボレーターをメンションするには、@を入力してください。
- メッセージを送信するには、をクリックします。
プラグインの使用
ファイル内のプラグインを使用するには編集可アクセス権が必要です。
Dev Modeはありませんが、編集可アクセス権があります
Dev Modeへのアクセス権が必要ですか?スタータープランをご利用の場合は、有料プランにアップグレードするか、有料チームにファイルを移動する必要があります。有料プランをご利用の場合は、フルシートまたはDevシートが必要です。
編集可アクセス権がある場合、デザインモード内でインスペクションツールを直接使用できます。
距離の測定
オブジェクトが、フレーム、グループ、またはコンポーネントの内側でネストされていても、その間の距離を測定できます。
- キャンバスで第1のオブジェクトを選択します。
- 修飾キーを押したままにします。
- Mac: ⌥ Option
- Windows: Alt
- 第2のオブジェクトにカーソルを合わせます。
2つのオブジェクトの間に赤い線が、また水平方向と垂直方向の測定値が表示されます。
ヒント: 測定に問題がありますか？オブジェクト間の距離を測定するためのガイドをご確認ください。
コードを生成
CSS、iOS、またはAndroid用の自動生成コードスニペットをコピーできます。
- キャンバスでオブジェクトを選択します。
- オブジェクトを右クリックし、[コピー/貼り付けとして] > [コードとしてコピー]を選択します。
- ニーズに合ったコードオプションを選択してください。
プロパティを表示
[デザイン]タブには、キャンバス上のオブジェクトのプロパティのリストが表示されます。これには、レイアウト、色、タイポグラフィ、テキスト文字列、コンポーネントプロパティ、スタイル、バリアブルなどのプロパティが含まれます。オブジェクトのプロパティを閲覧する方法:
- キャンバスでオブジェクトを選択します。
- 右サイドバーの[デザイン]タブで、確認したいプロパティのセクションまでスクロールしてください。
エクスポート
- エクスポートするレイヤーを選択します。現在のページのキャンバス全体をエクスポートする場合は、キャンバス上のすべての選択を解除します。
- [デザイン]タブで、 [エクスポート]セクションのプラスアイコンをクリックして、エクスポート設定を追加します。必要な数のエクスポート設定を選択に追加できます。
- エクスポート設定項目を設定します。Figmaのエクスポート形式および設定の詳細→
- 必要に応じて、[プレビュー]をクリックしてアセットの見え方を確認してください。複数のオブジェクトを選択している場合は、[プレビュー]設定は表示されません。
- [エクスポート]をクリックします。
ヒント: エクスポートについて詳しく知りたいですか？Figmaでのエクスポートに関するガイドをご覧ください。
コメントを閲覧または追加する
コメントは、デザインの特定部分に注意を引くことで、デザイナーと開発者の協力を促進します。デザインの一部がどのように機能すべきかについて、より多くの文脈を共有するためにコメントを残すことができます。
- コメントモードに切り替えるには、ツールバーのをクリックするか、Cを押します。カーソルがに変わります。
- 次のように、コメントする場所を選択します。
- キャンバス上のコメントをピン留めしたい場所をクリックします。
- または、クリックしたままカーソルをドラッグして、コメントを付ける領域を選択します。
- フィールドにメッセージを入力してください。同僚やコラボレーターをメンションするには、@を入力してください。
- メッセージを送信するには、をクリックします。
プラグインの使用
プラグインはコミュニティから、またはFigmaまたはFigJamのファイルから直接実行できます。
- ツールバーで[リソース]をクリックします。
- [プラグイン]タブから、最近使用したプラグインや保存したプラグインを選択するか、コミュニティからプラグインを検索します。
- プラグインをクリックして、詳細を閲覧します。
- [実行]をクリックして、現在のファイルでプラグインを実行します。
Dev Modeを持っています
デザインをインスペクトするには、Dev Modeトグルを選択するか、キーボードショートカットShift Dを使用してDev Modeに入ります。そこから、次のインスペクションツールを使用できます。
距離の測定
オブジェクトが、フレーム、グループ、またはコンポーネントの内側でネストされていても、その間の距離を測定できます。Dev Mode中に、キャンバス上の任意の親レイヤーまたは子レイヤーを選択します。周囲のレイヤーにカーソルを合わせると、Figmaは2つのオブジェクト間のパディング値や距離を表示します。特定のオブジェクト間の距離を測定することも可能です。
- キャンバスで第1のオブジェクトを選択します。
- 修飾キーを押したままにします。
- Mac: ⌥ Option
- Windows: Alt
- 第2のオブジェクトにカーソルを合わせます。
2つのオブジェクトの間に赤い線が、また水平方向と垂直方向の測定値が表示されます。
コードを生成
Dev Mode中にキャンバス上のオブジェクトをクリックすると、インスペクトパネルの[コード]セクションに入力されます。選択内容に応じて、タイポグラフィックレビューまたはボックスモデルが表示され、次にオブジェクトに対して自動生成されたコードスニペットが表示されます。
言語と単位の選択を変更するか、コード生成プラグインを使用する方法:
- [コード]セクションの右上にあるドロップダウンで言語またはプラグインを選択します。
- 必要に応じて [インスペクトの設定]をクリックし、ドロップダウンで単位を選択します。
注: ファイルのコピーと共有が無効になっている場合、コードセクションなどの一部のDev Mode機能はインスペクトパネルに表示されません。
プロパティを表示
Dev Modeでは、[インスペクト]タブでキャンバス上のオブジェクトのプロパティのリストが表示されます。これには、レイアウト、色、タイポグラフィー、テキスト文字列、コンポーネントプロパティ、スタイル、バリアブルなどのプロパティが含まれます。オブジェクトのプロパティを閲覧する方法:
- Dev Modeで、キャンバス上のオブジェクトを選択します。
- 右サイドバーの[インスペクト]タブで、インスペクトしたいプロパティのセクションまでスクロールします。
ヒント: コンポーネントまたはインスタンスをインスペクトすると、コンポーネントのプレビュー、メインコンポーネントへのリンク、ならびに関連ドキュメントおよび開発リソースへのリンクが表示されます。コンポーネントのインスタンスを選択すると、インスペクトパネルにコンポーネントプレイグラウンドが表示されます。プレイグラウンドを使用して、実際のデザインを変更することなく、コンポーネントの異なるプロパティを試してみてください。
バリアブルを調べる
Dev Modeには、デザインのインスペクト時にバリアブルを操作するいくつかの方法が含まれています。
- 値やモードを含むバリアブルの詳細を閲覧します。モードを切り替えることができ、値がエイリアスを使用している場合は、バリアブルの元のままの値までエイリアスのチェーン全体をたどります。
- デザイン内の元のままの値が既存のバリアブルの1つ以上と一致する場合、バリアブル候補を取得します。
- 現在のファイルで作成されたバリアブルコレクションにアクセスし、すべてのバリアブルとモードをテーブルで閲覧します。
詳細については、Dev Modeのバリアブルをご覧ください。
アセットのエクスポートまたはダウンロード
Dev Modeでは、アイコンを自動的に検出し、開発者がダウンロードできるアセットとして提示できます。これらのアセットは、エクスポート設定の上にある [インスペクト] タブに表示されます。任意の項目にカーソルを合わせ、ファイルタイプを選択し、ダウンロードアイコンをクリックします。
カスタムエクスポートをセットアップする方法:
- Dev Modeに入り、エクスポートするレイヤーを選択します。
- [インスペクト]タブで、[エクスポート]セクションのプラスアイコンをクリックして、エクスポート設定を追加します。必要な数のエクスポート設定を選択に追加できます。
- エクスポート設定項目を設定します。Figmaのエクスポート形式および設定の詳細→
- 必要に応じて、[プレビュー]をクリックしてアセットの見え方を確認してください。複数のオブジェクトを選択している場合、[プレビュー]設定は表示されません。
- [エクスポート]をクリックします。
アノテーションの閲覧または追加
アノテーションを使用することで、デザイナーはデザインに関する重要な詳細情報を開発者に直接伝えることができます。これには、重要なプロパティの強調表示、測定による間隔とサイズの視覚化、テキストノートを用いたコンテキストの共有などが含まれます。
Dev Modeでは、アノテーションはキャンバス上に緑色のドットとして表示されます。アノテーションをクリックすると、その内容が表示されます。
注: ファイルにアノテーションを追加するには、フルシートと編集可アクセス権が必要です。
デザインへのアノテーションの追加は次のように行います。
- ツールバーの右上にあるDev Modeのトグルをクリックするか、キーボードショートカットShift Dを使用します。
- ツールバーの[アノテーション]をクリックするか、キーボードショートカットShift Tを使用します。
- アノテーションを付けるレイヤーを選択します。
- テキストフィールドにメモを記入するか、[+ プロパティ]をクリックしてリストからプロパティを選択します。アノテーションには、書式なしテキストとプロパティの両方を含めることができます。
デザインへの測定値の追加は次のように行います。
- ツールバーの[測定]をクリックするか、キーボードショートカットShift Mを使用します。
- レイヤーにカーソルを合わせると、測定を開始する場所の選択肢が表示されます
- クリックして、開始点から測定の終点のレイヤーまでドラッグします。
- デザインに重ならないように測定値をクリックしてドラッグします。
プラグインの使用
開発モードの[プラグイン]タブに、最近使用したプラグインとFigmaコミュニティの推奨プラグインが表示されます。
変更内容を確認
前回閲覧してからフレームまたはコンポーネントが更新された場合、そのバージョン履歴を比較できます。これにより、最新のアップデートを追跡し、プロダクションコードを正確に保つことができます。
また、切り離されたコンポーネントや、デザインオーバーライドを持つインスタンスを、ベースコンポーネントと比較することもできます。
- 最上位フレームまたはコンポーネントを選択します。
- 右サイドバーの[インスペクト]タブで、[変更内容を比較]をクリックします。
ヒント: Shiftキーを押しながらキャンバス上の2つのコンポーネントをクリックして選択すると、その2つを比較できます。