はじめに

こんにちは、デザイン事業部の八木田です。
Figma社より開催されたFigma Dev Mode & MCP 勉強会に参加して学んだ、Figma Dev Modeの機能についてまとめました。
この記事では、デザイナーとエンジニアのハンドオフを効率化できるFigma Dev Modeの機能をご紹介します。

Figma Dev Modeとは？

Figma Dev Modeとは、エンジニア向けに構築されたモードであり、デザインファイルを編集せずにデザインをコードに変換することができます（Figma Learn「Dev Modeのガイド」）。
Figmaの有料版のフルシートまたはDevシートに含まれる機能です。

デザイナー向けのFigma Dev Mode主要機能

開発準備完了ツール（Ready for dev）とは？

「デザインが確定してエンジニアに実装依頼をしたが、エンジニアの方はFigmaファイル内のどのデザインを実装すれば良いのか分からない…」
そんなときは、確定したデザインのフレームに「Ready for dev」マークをつけると、Dev ModeでReady for devされたデザインを一覧で簡単に閲覧することができます（Figma Learn「Dev ModeのReady for devビュー」）。

デザインモードでデザインが確定したフレームを選択し、</>部分をクリックすることでReady for devとしてマークできます。


Ready for devマークをつけてからデザイン修正が発生した場合は、変更内容の比較（後でこの機能について紹介しています）からマーク後に入った修正を確認することができます。

Figma上でデザインのバージョン管理を行えて、デザイナーにとってもエンジニアにとっても非常に便利な機能になります。

アノテーションで情報共有を効率化

Figmaには、コメントと似た機能としてアノテーションというものがあります。
この機能を使用することで、目的別にカテゴリーを分けてコメントを残すことができます。

また、アノテーションにはコンテンツの高さや幅、色などのプロパティ情報を載せることができます。
アノテーションはデザインデータと連動しており、アノテーションを作成した後にプロパティの値が修正されても自動で反映されます。

ツールバーのコメント機能アイコン横のタブから選択することができます。


このプロパティ情報を活用したアノテーションを作成することで、仕様書として使うことができます。
また、Figma MCP使用時にはアノテーションの情報も読ませることができます。

測定ツールでコンテンツ間の余白を正確に把握

測定ツールもコメント機能と似ており、コンテンツ間の余白をメモのように視覚的に分かりやすく表示させることができます。
デザインを見てすぐに余白が分かるので、マークアップの際にも便利です。

ツールバーのコメント機能アイコン横のタブから選択することができます。

エンジニア向けのFigma Dev Mode主要機能

フォーカス・ビュー：開発対象のデザインに集中

キャンバス上の全てのフレームの中から、Ready for devマークがついたフレームを選択して表示させる機能になります。

Dev Modeの右サイドバーにある「Ready for dev」リストの中で表示させたいフレームをクリックするとフォーカスされます。

変更内容の比較ツールでデザインの差分を確認

開発準備完了ツール（Ready for dev）でも触れた変更内容の比較ツールでは、Ready for devマークをつけてから発生したデザイン修正を差分で確認することができます。

Dev ModeでReady for devとしてマークされたフレームを選択し、右サイドバーの「以前のバージョンと比較」から確認できます。

コンポーネントプレイグランド

コンポーネントプレイグラウンドは、コンポーネントのバリアント全パターンを確認できる機能です。

Dev Modeで任意のコンポーネントを選択し、右サイドバーの「コンポーネントの動作を参照」から確認することができます。

Figma MCP

Figma MCPを用いてFigmaデザインファイルやアノテーションをもとにコードを生成することができます（Figma Learn「Figma MCPサーバーのガイド」）。

Code ConnectでFigma MCPのコード生成精度を向上

Code Connectを使うことで、Figma MCPの精度を上げることができます（Figma Learn「Code Connect」）。

例えば、おつかいを頼むときに
「牛乳を買ってきて」
とだけ頼むか
「〇〇スーパーで、メーカー〇〇の成分無調整牛乳を買ってきて」
と詳しく頼むのかでおつかいで買ってきてもらえるものが変わります。
Code ConnectはFigma MCPに後者のような頼み方をするようなイメージです。

Code Connectには以下の2種類があります。
Code Connect (CLI) : ローカルのコード定義をFigmaのサーバーへアップロードするためのコマンドラインツールです。Figma MCPで生成されたコードをFigma Dev Modeのコードに自動反映することができます。
Code Connect (UI): GitリポジトリなどをFigmaデザインシステムのコンポーネントに連携させることで、デフォルトで表示されるDev Modeによる自動生成コードの代わりに、デザインシステムによって定義された実際のコードを表示させることができます。

まとめ

Figma Dev Modeを活用することで、デザイナーとエンジニアのハンドオフが飛躍的に効率化されることを実感しました。
特に「Ready for dev」や「アノテーション」といった機能は、これまで口頭やテキストで行っていた細かな確認作業を減らし、双方が本来の開発・デザイン業務に集中するための強力な武器になります。

また、Figma MCPやCode Connectの登場により、デザインデータが単なる「絵」ではなく、より「コードに近い仕様書」としての役割を強めていると感じます。
今回学んだ機能を日々の業務に取り入れ、エンジニアにとって実装しやすく、手戻りのない「親切なFigmaデータ作り」を実践していきたいと思います。