【Figma】Dev Mode MCP サーバーを触ってみた

はじめに

みなさんは、MCP（Model Context Protocol）を知っていますか？
2025年6月15日時点で、Figmaでもベータ版ではありますが、公式のMCPサーバーが使えるようになりました。

FigmaのDev Mode MCPサーバーは、デスクトップアプリで、ローカルサーバーを作ってくれるので、
デザイナーでも細かい設定なしでMCPサーバーがつかえます。

そのため、この記事では、Dev Mode MCPサーバーの使い方、使った感想をまとめてみました。

MCP/MCPサーバーとは？

MCPとは？
AIエージェントがいろんな仕事をできるように外部サービスを連携する仕組みをMCP（Model Context Protocol）という。

MCPサーバーとは？

MCPにサービスを繋げられるように用意されたサーバーのことをMCPサーバーという。

Dev Mode MCPサーバー

Dev Mode MCPサーバーとは？

Dev Mode MCPサーバーは、Figmaデザインファイルからコードを生成するAIエージェントに重要なデザイン情報とコンテキストを提供することができるMCPサーバー

• できること
  • 選択したフレームからコードを生成する
    • Figmaのフレームを選択してコードに変換します。(選択している状態orフレームのURL)
    • 新しいフローを作成したり、アプリの機能を改良したりするプロダクトチームに最適です。
  • デザインの背景を抽出する
    • 変数、コンポーネント、レイアウトデータをIDE（Cursorなど）に直接取り込みます。
    • デザインシステムやコンポーネントベースのワークフローで特に役立ちます。
  • Code Connectを使ってよりスマートにコードを書く
    • 実際のコンポーネントを再利用して出力品質を向上させます。
    • Code Connectは、生成されたコードとコードベースの整合性を維持します。

Code Connectとは？
Dev Mode利用時のコードスニペットにコードで実際に使われているコードを表示させることができる機能
https://qiita.com/degudegu2510/items/9bd37117b55788f373c8
https://help.figma.com/hc/ja/articles/23920389749655-Code-Connect

Dev Mode MCPサーバーの使い方

こちらをご覧ください。

Dev Mode MCP サーバー を使ってみた

① Figmaにデータを用意する

以下のようなデザインをFigmaで用意しました。

② AIエージェントにプロンプトを投げる

以下のようなプロンプトで、AIエージェントにマークアップとスタイリングをお願いしました。

@https://www.figma.com/...................................

このFigmaのデザインに合わせて、indexPageを作ってください。
Figmaのコンポーネントごとにファイルを作って、作成してください

③ 生成されたもの

生成されたコード

長いので、折りたたんでいます。
気になる方はご覧ください

Index.tsx

Index.tsx

import React from "react";
import { ArticleList } from "../Atoms/ArticleList.tsx";

export const IndexPage = () => {
	return <ArticleList />;
};

ArticleList.tsx

ArticleList.tsx

import React from "react";
import { ArticleItem } from "./ArticleItem.tsx";
import "./ArticleList.css";

export const ArticleList = () => {
  return (
    <div className="article-list">
      {/* ここでArticleItemを複数表示 */}
      <ArticleItem />
      <ArticleItem />
      <ArticleItem />
      <ArticleItem />
      <ArticleItem />
      <ArticleItem />
      <ArticleItem />
      <ArticleItem />
      <ArticleItem />
    </div>
  );
}; 

ArticleItem.tsx

ArticleItem.tsx

import React from "react";
import { ArticleFooter } from "./ArticleFooter.tsx";
import { TagList } from "./TagList.tsx";

export const ArticleItem = () => {
  return (
    <div className="article-item">
      <div className="article-thumbnail" />
      <div className="article-title">記事タイトル</div>
      <ArticleFooter />
      <TagList />
    </div>
  );
}; 

ArticleFooter.tsx

ArticleFooter.tsx

import React from "react";

export const ArticleFooter = () => {
  return (
    <div className="article-footer">
      <div className="user-info">
        <div className="user-icon" />
        <div className="user-name">User Name</div>
      </div>
      <div className="like-icon">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
          <path d="M12 22.35L10.55 21.05C8.86667 19.5333 7.475 18.225 6.375 17.125C5.275 16.025 4.4 15.0375 3.75 14.1625C3.1 13.2875 2.64583 12.4833 2.3875 11.75C2.12917 11.0167 2 10.2667 2 9.5C2 7.93333 2.525 6.625 3.575 5.575C4.625 4.525 5.93333 4 7.5 4C8.36667 4 9.19167 4.18333 9.975 4.55C10.7583 4.91667 11.4333 5.43333 12 6.1C12.5667 5.43333 13.2417 4.91667 14.025 4.55C14.8083 4.18333 15.6333 4 16.5 4C18.0667 4 19.375 4.525 20.425 5.575C21.475 6.625 22 7.93333 22 9.5C22 10.2667 21.8708 11.0167 21.6125 11.75C21.3542 12.4833 20.9 13.2875 20.25 14.1625C19.6 15.0375 18.725 16.025 17.625 17.125C16.525 18.225 15.1333 19.5333 13.45 21.05L12 22.35ZM12 19.65C13.6 18.2167 14.9167 16.9875 15.95 15.9625C16.9833 14.9375 17.8 14.0458 18.4 13.2875C19 12.5292 19.4167 11.8542 19.65 11.2625C19.8833 10.6708 20 10.0833 20 9.5C20 8.5 19.6667 7.66667 19 7C18.3333 6.33333 17.5 6 16.5 6C15.7167 6 14.9917 6.22083 14.325 6.6625C13.6583 7.10417 13.2 7.66667 12.95 8.35H11.05C10.8 7.66667 10.3417 7.10417 9.675 6.6625C9.00833 6.22083 8.28333 6 7.5 6C6.5 6 5.66667 6.33333 5 7C4.33333 7.66667 4 8.5 4 9.5C4 10.0833 4.11667 10.6708 4.35 11.2625C4.58333 11.8542 5 12.5292 5.6 13.2875C6.2 14.0458 7.01667 14.9375 8.05 15.9625C9.08333 16.9875 10.4 18.2167 12 19.65Z" fill="#1C1B1F" />
        </svg>
      </div>
    </div>
  );
}; 

TagList.tsx

TagList.tsx

import React from "react";

export const TagList = () => {
  return (
    <div className="tag-list">
      <div className="tag">HTML</div>
      <div className="tag">CSS</div>
      <div className="tag">Design</div>
    </div>
  );
}; 

ArticleList.css

ArticleList.css

.article-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.article-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 320px;
}

.article-thumbnail {
  width: 100%;
  aspect-ratio: 16/9;
  background: #edeeee;
  border-radius: 12px;
}

.article-title {
  font-weight: bold;
  font-size: 20px;
  color: #000;
  max-height: 55px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.article-footer {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-icon {
  width: 24px;
  height: 24px;
  background: #edeeee;
  border-radius: 50%;
}

.user-name {
  font-size: 16px;
  color: #000;
}

.like-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tag-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tag {
  background: #edeeee;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 12px;
  color: #000;
} 

見た目

こんな感じになりました。

まとめ・感想

Dev Mode MCP サーバーを使わずに、マークアップ・スタイリングをお願いした時より、生成されたものの精度は上がっていると感じました。

ただ、生成されたプレーンのCSSだったり、使われているタグ周りがごちゃごちゃだったりして、まだまだ全部頼むには、ルールを設定しり、もう少し細かい仕様書も一緒に読み込んでもらう必要を感じました。

また、ファイル構成とは、人間がやって、ファイル内に限定して、生成すると、手戻しが少なかったり、人間のレビューが簡単になったりすると思います。

Dev Mode MCPはまだ、ベータ版ですが、Figmaのデスクトップアプリがあれば使えるので、
どんどん使って開発していきたいですね！！！

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。