水無瀬のプログラミング日記

Figma MCP試してみる

概要

Figma MCPを試してみたいので試してみる。

リンク

試してみる

自分はよくClaude Codeを利用しているので、インストールガイドを元に進める。
Figmaのdesktop appを使っているのでDesktop MCPサーバを使う。

step1 desktop MCP Serverを有効にする

  1. Figmaのdesktop appを最新版にする
  2. デザインファイルを作る or 開く
  3. DevModeにする
  4. MCP Serverのセクションから有効にする

ss05c7d85f-018c-4b84-a2df-c2c61b887c14-5.png

添付画像の様になっていればOK。

ss05c7d85f-018c-4b84-a2df-c2c61b887c14-6.png

step2 MCPサーバ設定

ClaudeCodeの場合についての記載もドキュメントにあるので順番にやる。

# mcp serverとclaude codeを接続
% claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

Added HTTP MCP server figma-desktop with URL: http://127.0.0.1:3845/mcp to local config
File modified: /Users/xxx/.claude.json [project: /Users/xx/CURRENT_DIRECTORY]

# 接続されていることを確認
-> % claude mcp list
Checking MCP server health...

figma-desktop: http://127.0.0.1:3845/mcp (HTTP) - ✓ Connected

# 詳細確認
-> % claude mcp get figma-desktop
figma-desktop:
  Scope: Local config (private to you in this project)
  Status: ✓ Connected
  Type: http
  URL: http://127.0.0.1:3845/mcp

To remove this server, run: claude mcp remove "figma-desktop" -s local

step3 MCPクライアントにプロンプトを表示する

AIクライアントにFigmaのデザインを提供する方法は2つある。

  1. Sectionベース
    1. desktop appでlayer or frameを選択する
    2. MCP Serverセクションにprompt例が出てくるのでそれを使う
  2. Linkベース
    1. cmd+Lなどでlayer or frameのリンクをコピー
    2. linkをagentに渡せばOK

📝以下の様に聞かれることもあるので回答してあげるとその通り作ってくれる。

←  ☒ コンポーネント名  ☒ 用途  ✔ Submit  →

Review your answers

 ● どのようなコンポーネント名で作成しますか？
   → ConsoleWindow
 ● このコンポーネントの主な用途は何ですか？
   → 汎用ウィンドウ

Ready to submit your answers?

❯ 1. Submit answers
  2. Cancel

作成したcomponentの見た目と実際のコードは以下の通り。

<template>
  <div class="terminal-window" data-node-id="4:19">
    <div class="terminal-header" data-node-id="3:10">
      <div class="terminal-buttons">
        <button
          class="terminal-button close"
          data-node-id="3:13"
          aria-label="Close"
          @click="handleClose"
        />
        <button
          class="terminal-button minimize"
          data-node-id="3:16"
          aria-label="Minimize"
          @click="handleMinimize"
        />
        <button
          class="terminal-button maximize"
          data-node-id="3:17"
          aria-label="Maximize"
          @click="handleMaximize"
        />
      </div>
      <div v-if="title" class="terminal-title">
        {{ title }}
      </div>
    </div>
    <div class="terminal-display" data-node-id="3:8">
      <slot>
        <pre class="terminal-content">{{ defaultContent }}</pre>
      </slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'

interface Props {
  title?: string
  defaultContent?: string
}

const props = withDefaults(defineProps<Props>(), {
  title: 'DemoTitle',
  defaultContent: '$ Welcome to Terminal\n$ Type your commands here...'
})

const emit = defineEmits<{
  close: []
  minimize: []
  maximize: []
}>()

const handleClose = () => {
  emit('close')
}

const handleMinimize = () => {
  emit('minimize')
}

const handleMaximize = () => {
  emit('maximize')
}
</script>

<style scoped>
.terminal-window {
  display: inline-block;
  width: 356px;
  min-width: 356px;
  height: 200px;
  min-height: 200px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  box-sizing: border-box;
  background: #000000;
}

.terminal-header {
  background: #1c1e20;
  height: 30px;
  min-height: 30px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  position: relative;
  box-sizing: border-box;
}

.terminal-buttons {
  display: flex;
  gap: 8px;
  z-index: 1;
}

.terminal-button {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.2s;
}

.terminal-button:hover {
  opacity: 0.8;
}

.terminal-button.close {
  background: #ff5f56;
}

.terminal-button.minimize {
  background: #ffbd2e;
}

.terminal-button.maximize {
  background: #27c93f;
}

.terminal-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: #8b8b8b;
  font-size: 12px;
  font-weight: 500;
  user-select: none;
}

.terminal-display {
  background: #000000;
  height: 170px;
  min-height: 170px;
  padding: 12px;
  overflow-y: auto;
  color: #00ff00;
  font-size: 12px;
  line-height: 1.5;
  box-sizing: border-box;
}

.terminal-content {
  margin: 0;
  font-family: inherit;
  color: inherit;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* カスタムスクロールバー */
.terminal-display::-webkit-scrollbar {
  width: 8px;
}

.terminal-display::-webkit-scrollbar-track {
  background: #1a1a1a;
}

.terminal-display::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 4px;
}

.terminal-display::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .terminal-window {
    width: 100%;
    max-width: 356px;
    height: auto;
    min-height: 200px;
  }

  .terminal-display {
    height: auto;
    min-height: 150px;
  }
}
</style>

step4 設定を調整する

desktop appでのMCPサーバーは設定できる項目がいくつかある。
設定項目は以下の通り。

  • Image Setting
    • Local server: ローカル画像を使用し返されるマークアップにローカルホストリンクを追加する。これによりファイルがレンダリングされる場所に関係なく、実際の画像アセットを使用できるようになる。
    • Download assets: MCPサーバーがFigmaから画像アセット(例：アイコン、画像)をダウンロードし、ユーザーのプロジェクトに書き込むことを許可する
    • (DEPRECATED)Placeholder: 画像抽出をスキップし、代わりに汎用プレースホルダーを追加する。コード内で手動で置き換えることを好む場合に便利。
  • Enable Code Connect
    • レスポンスにコード接続マッピングを含めるため、生成されたコードは可能な限り接続済みコードベースのコンポーネントを再利用できる

ちなみにFigma > Preferences dropdown > Desktop MCP server settings で設定がある様だが、自分の手元では出てこなかった 😢  (ので実際どうなるかわからない)

もっと試してみる

Figmaのデータを元にデザインを作れるのはわかった。
素のcss以外にprojectに合わせて作れるのか試してみる。

Angular+tailwindcss のプロジェクトがあったのでそこで試す。
Figmaと実装で枠のデザインが違うのでそこを直してもらうことにする。

Figmaのイメージは以下で、

ss05c7d85f-018c-4b84-a2df-c2c61b887c14-2.png

実装は以下の通りだった。

ss05c7d85f-018c-4b84-a2df-c2c61b887c14-1.png

agentに出した指示としては以下の通り。

`apps/frontend/src/app/pages/score/components/score-update-modal`のデザインデータは以下の通りです。
```
Implement this design from Figma.
@https://www.figma.com/design/VKUoI9pQJqJ4aYYiRRhG9v/NoraTools?node-id=522-213&m=dev
```

以下の修正を行なってください。
* リングのデザインが違うと思うのでFigmaに合わせて下さい(配置やテキストは現在のままにして下さい。)
* リーダー得点がa11y観点のコンストラクト比を満たしていないと思うので修正して下さい
  * スタイリングはtailwindcssに乗っ取って下さい

最初の回答は以下の通り。

⏺ Figmaデザインと現在の実装を比較しました。以下の問題を修正します:

  1. リングの太さ: 現在はborder-4（4px）ですが、Figmaでは細いリングなのでborder-[3px]に変更します
  2. リーダー得点のコントラスト: 現在#f5f5f5（薄いグレー）ですが、視認性を改善するため#666666に変更します

tailwindcssを使っているので、px指定をして欲しくないのとそもそもサイズが違うので追加で以下の通りお願いした。

色については問題ありません。
リングの太さについて2点確認して下さい。
1. pxを直接指定するのはやめて下さい
2. 色のついている部分はFigmaだと10pxだと思うのですが確認して下さい。tailwindcssで一番近い値を指定するで問題ありません。

再度Figmaを確認し以下の通り提案してくれた。

 Figmaのデザインを確認しました。リングのサイズは100px×100pxで、色のついている部分（リング）は確かに10%のinset、つまり約10pxです。

  Tailwindの標準クラスで10pxに最も近いのは：
  - border-8 (8px) ← 最も近い標準クラス
  - border-[0.625rem] (10px相当) ← rem指定

  pxの直接指定を避け、Tailwindの標準値を使う場合はborder-8が適切です。

  現在の実装ではborder-4 (4px)を使っているので、これをborder-8に変更すればFigmaのデザインに近づきます。

  この理解で正しいでしょうか？border-8に変更して良いですか？

これで問題ないので作業してもらった。
ついでにリングの色も変更してもらった結果が以下の通り。

ss05c7d85f-018c-4b84-a2df-c2c61b887c14-3.png

まとめ

今回はFigmaのMCPを試してみた。
安くない課金が必要だけど、ゼロから作るよりも楽できそうなので積極的に使っていきたいと思った。

Xに投稿する
Githubリンク
©2025 tminasenThis site uses Google Analytics.