Yet Another Figma MCP

是的另一个FigmaMCP

       

Figma 本地缓存文件MCP (Model Context Protocol) 作为服务器提供的轻量工具。

背景

Figma 在免费计划中API / MCP 呼叫次数限制为每月6次。本工具是Figma 文件节点JSON 中描述的场景，使用以下步骤创建明细表，以便在概念设计中分析体量的体积。

特徴

• 预缓存方式: Figma API 事先打招呼JSON 本地保存
• 搜索索引：快速搜索节点名称框架名称
• MCP 服务器: AI 可从代理浏览高速缓存数据
• API 最小化调用：仅在缓存生成和显式刷新期间API 使用

安装

pip install yet-another-figma-mcp

或uvx / pipx 但是可用：

uvx yet-another-figma-mcp --help
pipx install yet-another-figma-mcp

安装，安装

Figma API 标记设置

在动态输入提示中Figma API 设置标记：

export FIGMA_API_TOKEN="your-figma-api-token"

令牌是 Figma 设定画面 中所述修改相应参数的值。

用法

生成缓存

# 単一ファイルのキャッシュ生成
yet-another-figma-mcp cache --file-id 

# 複数ファイル
yet-another-figma-mcp cache --file-id  --file-id 

# ファイル ID リストから一括生成
yet-another-figma-mcp cache --file-id-list path/to/file_ids.txt

# 強制リフレッシュ（API を再度呼び出し）
yet-another-figma-mcp cache --file-id  --refresh

MCP 启动服务器

# MCP サーバー起動
yet-another-figma-mcp serve

# 動作確認
yet-another-figma-mcp status

Claude Desktop 中的设置

claude_desktop_config.json 添加：

{
  "mcpServers": {
    "figma-cache": {
      "command": "uvx",
      "args": ["yet-another-figma-mcp", "serve"]
    }
  }
}

MCP 工具列表

MCP 服务器提供以下工具：

get_cached_figma_file

获取指定文件的节点树和元数据。

引数:
  - file_id: string (必須)

返り値:
  - ルートノードと主要フレーム一覧
  - ファイル全体のメタデータ

get_cached_figma_node

获取单个节点的详细信息。

引数:
  - file_id: string (必須)
  - node_id: string (必須)

返り値:
  - ノードのプロパティ（type, name, layout, style, children など）

search_figma_nodes_by_name

使用节点名称搜索节点。

引数:
  - file_id: string (必須)
  - name: string (必須)
  - match_mode: "exact" | "partial" (オプション、デフォルト: exact)
  - limit: number (オプション)

返り値:
  - マッチしたノードのリスト

search_figma_frames_by_title

从框架名称中搜索框架节点。

引数:
  - file_id: string (必須)
  - title: string (必須)
  - match_mode: "exact" | "partial" (オプション)
  - limit: number (オプション)

返り値:
  - 対象フレームノードの一覧

list_figma_frames

获取文件正下方的主要帧列表。

引数:
  - file_id: string (必須)

返り値:
  - フレーム名・node_id・パスのリスト

缓存文件结构

~/.yet_another_figma_mcp/
  index.json                     # 全ファイル共通のメタ情報
  /
    file_raw.json                # Figma API /files の生 JSON
    nodes_index.json             # ノード検索用インデックス

用例示例

屏幕安装参考

ユーザー: 「サインアップ画面を実装してください」
→ AI: search_figma_frames_by_title で「Sign Up」を検索
→ AI: get_cached_figma_node でフレーム構造を取得
→ AI: 取得したデザイン情報をもとにコード生成

确定组件

ユーザー: 「Primary Button のスタイルを教えて」
→ AI: search_figma_nodes_by_name で検索
→ AI: get_cached_figma_node で詳細取得

制限事项

本工具是PoC（Proof of Concept）以下功能不在范围内：

• 截图检索
• Code Connect（节点与组件兼容）
• 获取变量设计标记
• FigJam 対応

开発

安装，安装

# 開発用依存関係をインストール
uv sync --group dev

Task 命令（推荐）

任务 安装时，可以使用以下命令：

# 利用可能なタスク一覧
task

# 依存関係インストール
task install

# リント
task lint

# リント（自動修正付き）
task lint:fix

# フォーマット
task format

# フォーマット確認（修正なし）
task format:check

# 型チェック
task typecheck

# テスト
task test

# テスト（詳細出力）
task test:verbose

# テスト（並列実行）
task test:parallel

# テスト（カバレッジ付き）
task test:cov

# 全チェック（lint + format:check + typecheck + test）
task check

# pre-commit フック実行
task pre-commit

# MCP サーバー起動
task serve

# MCP サーバー起動（詳細ログ付き）
task serve:verbose

# キャッシュ状態確認
task status

# Figma ファイルをキャッシュ
task cache -- -f 

# 生成ファイルのクリーンアップ
task clean

手动実行

# リント
uv run ruff check .

# フォーマット
uv run ruff format .

# 型チェック
uv run pyright

# テスト
uv run pytest

致谢

• Figma上下文MCP - AI 请允许我参考面向节点简化的方法

许可证

MIT License - 了解更多信息 许可证 来修改标记元素的显示属性。