はじめに

この機能を使用できるユーザー

すべての有料プランで利用できます

フルデザインシートまたは開発モードシートが必要です

Figmaの開発モードには、開発者がデザインファイルを移動し、デザインをコードへ変換するために必要なものがすべて揃っています。開発モードでは、デザイナーと開発者が同じ考えを共有できるため、ハンドオフのプロセスで重要な内容が失われることはありません。

開発モードの開発者向け機能:

• 高度なインスペクション機能とより多くのコード生成言語
• フレームバージョンの比較が容易なため、確実に最新スペックでの構築が可能
• ステータスとアノテーションにより、開発に着手できるデザインをすばやく確認
• Jira、Storybook、GitHubなど開発者に特化した統合機能によるワークフローの合理化
• ファイルを編集せずにコンポーネントセットにおけるすべてのバリアントを調査
• デザインをチケット、ドキュメント、コードコンポーネントにリンク
• VS Code連携拡張機能を使用してデザインをインスペクトし、コードを並べて記述

開発モードに入る

開発モードは、デザインのインスペクトや移動に適した開発者に特化したインターフェースです。開発モードには、Figmaデザインファイルからアクセスできます。デザインモードと開発モードを切り替えるには、次の手順を実行します。

1. Figmaデザインファイルを開きます。
2. ページの上部にある開発モードのトグルをクリックするか、キーボードショートカットShift Dを使用します。

移動

開発モードでは、左サイドバーから開発準備完了になっているデザイン間を簡単に移動できます。

• A

  どのアセットが開発準備完了かを表示

  開発モードアイコンは、開発準備完了とマークされているフレーム、コンポーネント、インスタンス、セクションを含むページを示します。準備完了としてマークされたキャンバス上のオブジェクトは、開発モードレイヤーパネルの[開発準備完了]に表示されます。

  アセットを開発準備完了としてマークするには、次の手順を実行します。

  1. 開発モードで、[フレーム]、[コンポーネント]、[インスタンス]、[セクション]を選択します。
  2. ツールバーの[開発準備完了にする]をクリックします。
• B

  フレームが最後に編集された日時の把握

  ナビゲーションパネルでは、フレームの名前の下にそのフレームが最後に編集された日時が表示されます。

• C

  フレームとレイヤーを移動

  デザインモードでは、すべてのユーザーが関連コンテンツをセクションにグループ化し、セクションを開発準備完了にすることができます。開発モードでは、セクション内のコンテンツが優先順位付けされます。セクションの外部にあるすべてのコンテンツは左サイドバーに表示されますが、デフォルトでは折りたたまれています。

  左サイトバーでフレームをクリックして、キャンバスの中心に配置します。キャンバス上のフレームを選択して、その中にネストされているレイヤーを表示します。フレームを選択すると、ナビゲーションパネルがレイヤーパネルに変更され、現在選択されている最上位フレームのレイヤーのみが表示されます。

  開発モードでフレームおよびレイヤーを移動 ->

インスペクト

インスペクトパネルにはデザイン仕様と、デザインを理解し、コードに変換するために必要な関連するコンポーネント情報が表示されます。

• A

  デザインの変更内容を比較

  最後にファイルを表示してから変更が行われた場合は、インスペクトパネルのレイヤー情報の横に[変更内容を比較]が表示されます。リンクをクリックするとフレーム履歴モーダルが開き、現在のバージョンと以前のバージョンのデザインを比較できます。

  また、切り離されたコンポーネントを以前のバージョンと比較したり、かつてリンクされていたメインコンポーネントと比較したりすることもできます。 切り離し履歴をクリアして、元のメインコンポーネントに関する情報が表示されないようにすることができます。

  開発モードでの変更を比較 ->
• B

  開発者用の外部リンクとリソースを追加

  デザイナーと開発者の両者は、外部リソースへのリンクを追加し、コンポーネントを実装することができます。これには、GitHub、Jira、Storybookのリンク、およびVS Code拡張子用のFigmaで使用できるVS Codeのリンクが含まれています。コンポーネントに追加された開発者のリソースはそのコンポーネントのすべてのインスタンスに反映されます。

  開発モードでリソースのリンクをレイヤーに追加→

• C

  カスタマイズ可能なコードスニペットを使用した迅速な構築

  開発モード中にキャンバス上のオブジェクトをクリックすると、インスペクトパネルの[コード]セクションに入力されます。選択内容に応じて、タイポグラフィックプレビューまたはボックスモデルが表示され、次にオブジェクトに対して自動生成されたコードスニペットが表示されます。

  キャンバスおよび生成されたコードで表示する言語と単位を選択したり、コードスニペットの機能を拡張したりできます。言語と単位の選択を変更するには、次の手順を実行します。

  1. [コード]セクションの右上にあるドロップダウンで言語を選択します。
  2. [インスペクトの設定]をクリックし、ドロップダウンで単位を選択します。

  開発モードでコードスニペットを使用する方法→

• D

  レイヤー名とタイプを表示

  インスペクトパネルの上部に選択したレイヤー名とそのレイヤータイプ(コンポーネント、インスタンス、フレーム、テキストなど)が表示されます。レイヤーが最後に更新された日時も表示できます。

• E

  コンポーネントのプレイグラウンドでコンポーネントのバリエーションを試す

  コンポーネントまたはインスタンスを選択すると、コンポーネントのプレビュー、メインコンポーネントへのリンク、ならびに関連ドキュメントおよび開発リソースへのリンクが表示されます。

  コンポーネントのインスタンスが選択されると、コンポーネントのプレイグラウンドファイルがインスペクトパネルに表示されます。プレイグラウンドファイルを使用して、実際のデザインを変更せずにコンポーネントの異なるプロパティを試します。

• F

  適用したスタイルを表示

  選択したレイヤーに適用されているスタイルおよびバリアブルを表示します。

• G

  アセットをダウンロード

  開発モードではアイコンを自動的に検出し、開発者がダウンロードできるアセットとして提示できます。アイコンに含まれている個々のベクターレイヤーをインスペクトする場合は、次のようにして自動アイコン検出をオフにすることができます。

  1. ツールバーの メインメニューをクリックします
  2. ドロップダウンの [表示] にカーソルを合わせます
  3. [アイコンを自動検出]を選択解除します

  [アセット]では、GIF画像およびMP4動画ノードをダウンロードすることもできます。

• E

  エクスポート

  形式を定義するレイヤーへのエクスポート設定、およびその他のエクスポート設定を適用できます。Figmaは、次のエクスポート形式をサポートしています: PNG、JPG、SVG、およびPDF。 Figmaでのエクスポートの詳細はこちら→

アノテーションを付ける

開発者は、アノテーションを使用することで、追加のコンテキスト、スペック、サイズによりデザインをマークアップできます。これにより、開発者はハンドオフ時に重要なコールアウトを見落としにくくなります。開発モードでは、アノテーションとサイズを以下の目的で使用します。

• 開発者が見落とさないように重要なプロパティを示す
• 開発者が間隔やサイズなどを視覚化しやすくする
• デザインに直接結びついたテキストノートで追加のコンテキストを補足

開発モードで測定値を追加し、デザインに注釈を付ける方法→

開発モードのプラグインを使用

開発モードのプラグインにより、タスクを自動化し、ドキュメントおよびコミュニケーションに関する他のツールを接続できます。例:

• Figma、FigJam、開発モードとの同期により、開発タスクを円滑に進める
• FigmaデザインシステムとコードのデザインシステムをStorybookで接続
• GithubをFigmaと連携させてデザインをコードにつなげば、常に同期させることができます。
• コード出力(TailwindまたはReact用)または独自のコードコンポーネント用のカスタマイズ

開発モードの[プラグイン]タブに、最近使用したプラグインとFigmaコミュニティの推奨プラグインが表示されます。

ファイルでのプラグインの使用方法はこちら→

開発モードのプラグインのハンズオンに関する詳細については、開発モードプレイグラウンドファイルのプラグインをご確認ください。

VS Code連携

VS Code連携を使用すると、デザインファイルの移動およびインスペクト、デザイナーとのコラボレーション、デザイン変更の追跡、デザイン実装のスピードアップのすべてを、テキストエディターから離れることなく行うことができます。デザインからコードへの変換に必要とされる、コンテキストの切り替えとわずらわしい作業を不要にすることで、開発者の生産性を向上させます。

• リアルタイムでコメントおよびアクティビティーを確認して対応
• デザインをもとにコード案を表示
• コードファイルをデザインコンポーネントにリンク

VS Code連携拡張機能の詳細はこちら→