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

Dev Modeの開発者向け機能:

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

Dev Modeに入る

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

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

移動

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

• A

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

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

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

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

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

• B

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

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

• C

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

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

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

  Dev Modeでフレームおよびレイヤーを移動 ->

インスペクト

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

• A

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

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

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

  Dev Modeでの変更を比較 ->
• B

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

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

  Dev Modeでリソースのリンクをレイヤーに追加→

C

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

• D

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

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

• ```E```

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

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

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

• ```F```

  適用したスタイルを表示

  選択したレイヤーに適用されたスタイルとバリアブルを表示します。

• G

  アセットをダウンロード

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

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

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

• H

  エクスポート

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

アノテーション

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

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

Dev Modeで測定値を追加し、デザインに注釈を付ける方法→

開発者ハンドオフの管理

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

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

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

Dev Modeのステータスと通知

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

ステータス

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

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

通知

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

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

Dev Modeのプラグインを使用

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

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

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

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

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

VS Code連携

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

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

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