はじめに

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

すべてのチームまたはプランでサポートされます

閲覧のみアクセス権を持つユーザーは、開発モードでデザインを表示できます。

閲覧のみ アクセス権を持つユーザーは、開発者リソースのリンクをコンポーネントに追加できます。

編集可アクセス権を持つユーザーは、セクションを作成し開発準備完了にすることができます。

 

Figmaデザインの開発モードでは、デザインファイルを移動したり、デザインをコードに変換したりするために必要なあらゆる機能を開発者に提供します。開発モードにより、デザイナーと開発者は、ハンドオフプロセス時に重要な情報が失われないように同じ考えを共有します。

開発モードを使用すると、次のことを実行できます。

• デザインコンポーネントからのプロパティ、値、コードの表示およびコピー
• フレームバージョンの比較による最後のファイル表示以降の変更内容の確認
• 重要なレイヤー情報を表示する簡単なインタラクションによるデザインのインスペクトと移動
• セクションのステータスによる開発準備用のデザインの迅速な検索
• Jira、Storybook、GitHubなど開発者に特化した統合機能を使用したワークフローの合理化
• 関連するリンクと開発者リソースのコンポーネントへの追加

開発モードに入る

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

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

デザインの移動

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

• A

  開発準備のできたセクションを表示

  開発モードアイコンは、開発準備完了になっているセクションを含むページを示します。準備完了のセクションは、[開発モード]ナビゲーションパネルの[開発準備完了]に表示されます。

• B

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

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

• C

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

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

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

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

デザインのインスペクト

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

• A

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

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

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

  開発モードでフレーム変更内容を比較 →

• B

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

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

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

• C

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

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

  開発モードでのコードスニペット→

• D

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

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

• E

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

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

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

• F

  適用したスタイルを表示

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

• G

  アセットをダウンロード

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

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

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

• E

  エクスポート

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

開発モードの拡張子を使用

開発モードのプラグインを使用すると、タスクの自動化、新機能の追加、ドキュメンテーションと通信用のツールの統合により、開発ワークフローが改善されされます。

• Figma、FigJam、開発モードとの同期により、開発タスクを円滑に進める
•  StorybookによるコードでのFigmaデザインシステムとデザインシステムの接続
• GithubをFigmaに取り込むことで、コードとデザインをリンクして、常に同期されるようにします。

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

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

VS Code連携

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

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

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