こんにちは！カミナシ プロダクトデザイナーの高橋です。なぜかエンジニアブログに書いてみます。
Figma が公式に MCP Server を提供しましたね！あくまでベータ提供ですが、使ってみて、できることや特性などを調べてみた簡単なまとめを書いてみました。
Figma Dev Mode MCP Server とは？
VS Code、Cursor、Windsurf、Claude Code から自分の Figma にアクセスできるようになるもので、AI に「ワイが作ったデザインを使って作って〜」が簡単にできるようになるとされるものです。
The Dev Mode MCP Server is now available in beta. Access Dev Mode data directly in your agentic coding workflow
— Figma (@figma) 2025年6月4日
→ VS Code with Copilot
→ Cursor
→ Windsurf
→ Claude Code pic.twitter.com/tPW5SpYYeQ
使用方法
① Figma ファイルで MCP サーバーを有効にします。
② VS Code、Cursor、Windsurf、Claude Code に、 MCP のサーバー設定を入れます。
③ (Claude Code の例) Figma を開いて何か選択しながらプロンプトします。
プロンプト
Figma で現在私が選択しているものは何かわかりますか？
実行ログ
⏺ figma-dev-mode-mcp-server:get_image (MCP)(clientName: "claude code", clientModel: "claude-sonnet-4-20250514",
clientLanguages: "unknown", clientFrameworks: "unknown")
⎿ [Image]
⏺ グレーのラベルコンポーネントを選択していますね。
この時に選択していたのは、以下 MUI (Material-UI) の Figma ライブラリに含まれる <Button> コンポーネントです。
「グレーのラベル」というように若干誤解していますが、自家製の Figma ファイルの情報を取得することができました。
実験
create-next-app して MUI ライブラリを使って適当に作ったアプリのコードのデザイン変更を指示してみます。
トライアル①
ボタンの見た目を自家製の Figma で指定したものに変更してみます。
元々の実装されているプライマリーボタンの見た目がこのような色なので、色を変える指定をしてみます。
プロンプト
ボタンを現在私が Figma で選択している <Button> のアピアランスに変更してください。
実行ログ
⏺ Update Todos
⎿ ☐ Figmaで選択中のButtonコンポーネントのコードを取得
☐ プロジェクト内のボタンコンポーネントを見つける
☐ ボタンのスタイルをFigmaデザインに合わせて更新
⏺ Update Todos
⎿ ☐ Figmaで選択中のButtonコンポーネントのコードを取得
☐ プロジェクト内のボタンコンポーネントを見つける
☐ ボタンのスタイルをFigmaデザインに合わせて更新
⏺ figma-dev-mode-mcp-server:get_code (MCP)(clientName: "claude code", clientModel: "claude-sonnet-4-20250514",
clientLanguages: "typescript,javascript", clientFrameworks:
"react,next")
⎿ export default function SizeLargeColorPrimaryStateEnabledVariantContained() {
return (
<div
className="bg-[#3b5bdb] relative rounded
shadow-[0px_1px_5px_0px_rgba(0,0,0,0.12),0px_2px_2px_0px_rgba(0,0,0,0.14),0px_3px_1px_-2px_rgba(0,0,0,0.2)]
size-full"
… +18 lines (ctrl+r to expand)
⎿ Convert the Tailwind to vanilla CSS if not already used in the codebase. Do not install any dependencies.
⎿ These variables are contained in the design: White: #ffffff, button/large: Font(family: "Noto Sans JP",
style: Bold, size: 15, weight: 700, lineHeight: 26), borderRadius: 4, Indigo/indigo-8: #3b5bdb.
⏺ Update Todos
⎿ ☒ Figmaで選択中のButtonコンポーネントのコードを取得
☐ プロジェクト内のボタンコンポーネントを見つける
☐ ボタンのスタイルをFigmaデザインに合わせて更新
⏺ Search(pattern: "**/*button*")
⎿ Found 100 files (ctrl+r to expand)
⏺ Search(pattern: "**/*Button*")
⎿ Found 100 files (ctrl+r to expand)
⏺ Search(pattern: "button|Button", include: "*.tsx,*.ts,*.jsx,*.js")
⎿ Found 1 file (ctrl+r to expand)
⏺ Read(attendance-tracker/src/app/page.tsx)
⎿ Read 148 lines (ctrl+r to expand)
⏺ Update Todos
⎿ ☒ Figmaで選択中のButtonコンポーネントのコードを取得
☒ プロジェクト内のボタンコンポーネントを見つける
☐ ボタンのスタイルをFigmaデザインに合わせて更新
⏺ Read(attendance-tracker/package.json)
⎿ Read 33 lines (ctrl+r to expand)
⏺ Update(attendance-tracker/src/app/page.tsx)
⎿ User rejected update to attendance-tracker/src/app/page.tsx
87 startIcon={<LoginIcon />}
88 onClick={handleCheckIn}
89 disabled={isCheckedIn}
90 sx={{ minWidth: 120 }}
90 sx={{
91 minWidth: 120,
92 backgroundColor: '#3b5bdb',
93 color: '#ffffff',
94 fontFamily: '"Noto Sans JP", sans-serif',
95 fontWeight: 700,
96 fontSize: '15px',
97 lineHeight: '26px',
98 letterSpacing: '0.46px',
99 textTransform: 'uppercase',
100 borderRadius: '4px',
101 boxShadow: '0px 1px 5px 0px rgba(0,0,0,0.12), 0px 2px 2px 0px rgba(0,0,0,0.14), 0
px 3px 1px -2px rgba(0,0,0,0.2)',
102 padding: '8px 22px',
103 '&:hover': {
104 backgroundColor: '#324ab2'
105 },
106 '&:disabled': {
107 backgroundColor: '#cccccc',
108 color: '#666666'
109 }
110 }}
111 >
112 出勤
113 </Button>
このように sx プロパティによるゴリ押し実装をしてしまいました。
見た目はこのようにちゃんと変わりましたが、コードが汚くなってしまいました。
トライアル②
テーマ側を変更するようなプロンプトに変えてみます。
プロンプト
theme.ts の primary.main の設定を 現在私が Figma で設定しているボタンのカラーにできますか？
実行ログ
⏺ Read(attendance-tracker/src/app/theme.ts)
⎿ Read 17 lines (ctrl+r to expand)
⏺ Update(attendance-tracker/src/app/theme.ts)
⎿ Updated attendance-tracker/src/app/theme.ts with 1 addition and 1 removal
3 const theme = createTheme({
4 palette: {
5 primary: {
6 main: '#1976d2',
6 main: '#3b5bdb',
7 },
8 secondary: {
9 main: '#dc004e',
⏺ Update Todos
⎿ ☒ Figmaで選択中のButtonコンポーネントのコードを取得
☒ プロジェクト内のボタンコンポーネントを見つける
☒ ボタンのスタイルをFigmaデザインに合わせて更新
⏺ theme.ts:6 でprimary.mainを#3b5bdbに更新しました。
比較的良い実装になったかと思います。（本当はプリミティブなカラーパレットを別に用意してそこをエイリアス指定したいですね！）
Before
After
まとめ
- デザインによるコンテキストをコードに渡すことができるアプローチの一つが増えた感じで、Figma Dev Mode MCP Server を活用すると夢が広がりますね
- ただし、雑なプロンプトを書いてしまうと余計なコードを生成してしまうので、元のコードをちゃんと読んだり、生成するコードの特性を理解して使う必要がありそうです
- この辺のスキルは割と特殊スキルな気もするので誰も彼も使えるという感じではなさそう
採用情報
デザインシステムの構築・運用経験や、デザインとエンジニアリングをうまく繋ぐ仕事に興味のあるプロダクトデザイナーな方、ぜひカジュアル面談しましょう！
