ご利用いただいているブランド
Dev Mode MCPサーバーについて
Figmaを直接開発ワークフローに組み込みましょう。Dev Mode MCPサーバーを使用すると、VS Code、Cursor、Windsurf、Claude Codeなどのツールが直接Figmaに情報を届けることができ、エージェントがデザインをより効果的にコードに変換できるようになります。
必要な情報を見つけてすばやく構築を始める
コードインスペクションを簡素化し、開発準備が整った部分を強調する機能により、ワークフローはこれまで以上にスムーズになります。
デザインの変更内容を比較
フレームやコンポーネントの最終編集日を確認するか、バージョン履歴を開いてデザインの変更を並べて比較します。
デザイン仕様を深く探る
カラーコードやトークン値などのコンポーネントプロパティをインスペクトし、間隔の確認や、コードのコピー&ペーストを行って開発プロセスをスピードアップします。
ビューを変更してより明確に表示
「開発準備完了」ビューをクリックすると、開発準備完了とマークされたデザインを確認できます。特定のコンポーネントをクリックして、フォーカスビューでそれらを個別に表示することもできます。
VS Code拡張機能で構築
VS Code拡張機能を使って、すでに慣れ親しんでいる環境で作業しましょう。画面の切り替えの手間が省け、コーディングに取り組むことができます。
FigmaのDev Modeは、開発者とデザイナーのコラボレーションを簡素化し、両者間の摩擦を軽減します。私たちはそれが気に入っています。
Sandra Schaus氏
Volkswagen Group Services、サービス部門ビジネス開発、リードUXエキスパート
デザインシステムとコードベースを接続して、開発の一貫性を実現
Dev Modeでは、一貫性のある再利用可能なデザインを構築し、Code Connectを使用してコードベースにシームレスにリンクすることができます。
Code Connectを使用してコードベースをリンクする
Code Connectを使用すると、Figmaの既存のデザインシステムとコードベースをリンクし、即座に使用可能なスニペットを生成できます。
Code Connectの特に気に入っている点は、以前は開発者がせざるを得なかったコンテキストの切り替えを大幅に減らせることです。
Gilson Hoffmeister氏
HP社、デザインシステムストラテジスト
デザインパートナーとのやり取りを効率化
ステータス更新、コメント、注釈などの機能により、開発中ずっとデザイナーと同じ認識を保つことができます。
より良いコミュニケーションで反復的な作業を削減
デザイン変更の通知をリアルタイムで受け取り、常に最新の情報に基づいて開発することができます。開発準備完了ビューは、開発の準備ができているもの、変更されたもの、完了したものの概要を明確に提供します。
デザインと開発のリソースをさらに深く見てみましょう
Dev Modeについて知っておくべきすべてのこと
アイデアからコードまで、製品開発をより効率的にするためにDev Modeを構築しました。当社の製品哲学と今後の展望についてご覧ください。
スムーズにハンドオフするためにデザイナーが知っておくべき5つのこと
ハンドオフはプロセスであり、一瞬の出来事ではありません。では、WIPデザイン、コミュニケーション、コラボレーションの絶え間ない流れの中でハンドオフをどのように合理化すればよいのでしょうか? デザイナーアドボケートのLauren Andresがそのヒントをご紹介します。
開発者向けのコミュニティプラグインを探索
Figmaコミュニティによって作成された何千ものプラグインを探索し、Figmaでの作業の幅を広げましょう。