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

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

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

開発モードに入る

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

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

移動

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

• A

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

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

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

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

  さらに、ビジネスプランまたはエンタープライズプランのフル、開発、閲覧者のいずれかのシートがあれば、開発準備完了になっているデザインのビューが表示されます。開発準備完了ビューは、ファイルのデザインの1つ以上が開発ステータスである場合にのみ表示されます。

• B

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

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

• C

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

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

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

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

インスペクト

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

• A

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

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

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

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

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

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

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

C

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

• D

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

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

• ```E```

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

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

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

• ```F```

  適用したスタイルを表示

  選択したレイヤーに適用されたスタイルとバリアブルを表示します。さらに、バリアブルの詳細を表示し、推奨されるバリアブルを取得できます。

• G

  アセットをダウンロード

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

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

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

• H

  エクスポート

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

アノテーション

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

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

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

開発者ハンドオフの管理

開発準備完了となったセクション、フレーム、コンポーネントがある場合、開発モードの開発準備完了ビューとフォーカスビューを活用して、開発者ハンドオフプロセスを管理することができます。

• Ready for Devビューでは、ファイル内の開発準備完了となっているすべてのデザインを簡単に閲覧できます。ステータスが開発準備完了となっているデザインのみに絞り込んで表示することができます。Ready for Devビューとハンドオフプロセスの詳細についてはこちら→
  

• フォーカスビューでは、開発準備完了のデザインが一度に1つだけ表示されます。Dev Modeの通常のツールをすべて使用でき、デザインのレイヤーを閲覧して、アノテーション付きのバージョン履歴などの重要な情報を見つけることがができます。フォーカスビューの詳細はこちら→
  

Dev Modeのステータスと通知

Dev Modeのステータスと通知は、開発者ハンドオフを管理するのに役立ちます。ステータスはセクション、フレーム、またはコンポーネントの開発準備が整ったタイミングを追跡するために使用されます。通知はステータスの変更に基づいて行われるため、開発者はデザインの状態に対応できます。

ステータス

Dev Modeを提供するすべてのプランには[開発準備完了]ステータスが含まれます。コンポーネント、フレーム、セクションに[開発準備完了]ステータスを設定することで、デザインの開発準備が整っていることを示すことができます。ビジネスプランまたはエンタープライズプランをご利用の場合は、さらに[完了]というステータスが追加されます。

ステータスの使用方法などの詳細については、Dev Modeのステータスと通知をご覧ください。

通知

開発モードでファイルを表示したことがある場合、フルシートまたは開発シートのいずれかを持っていれば、そのファイルのデザインが開発準備完了になるたびに通知を受け取ります。これには、デザインが初めて開発準備完了になった場合と、開発準備完了ステータスがいったん解除された後で再設定された場合が含まれます。

Dev Modeの通知のオン/オフを切り替える方法などの詳細については、Dev Modeのステータスと通知をご覧ください。

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

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

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

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

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

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

VS Code連携

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

• リアルタイムでコメントおよびアクティビティーを確認して対応
• デザインに基づくコードの候補を取得
• デザインコンポーネントへのコードファイルのリンク

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