mcpField
F
figma

figma

github.com/acedatacloudデザイン・UI17167 回インストール今日更新
リポジトリ

figma について

curlとjqでFigma APIからFigmaファイルを読み取るスキルです。デザインレビューやデザインからコードへの作業に向けて、ファイル構造、指定ノード、画像、コメント、プロジェクトを確認できます。

主な機能

  1. 01ファイルツリーとトップレベルのフレームを確認
  2. 02指定ノードの詳細を取得
  3. 03ノードを一時画像としてレンダリング
  4. 04ファイルのコメントを取得
  5. 05チームのプロジェクトを一覧表示

活用シーン

  1. 01デザインファイルのフレームとノード構造を確認
  2. 02デザインからコードへの作業用にフレームを描画
  3. 03レイアウト、色、余白、文字スタイルを抽出
  4. 04コメントやチームのプロジェクトファイルを確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/acedatacloud/skills --skill figma

インストール後、Claude Code で/figmaを入力して読み込まれたか確認します。

詳細

curl + jq を使ってFigmaを読み取ります。ユーザーの OAuth ベアラートークンは $FIGMA_TOKEN にあり、すべての呼び出しで Authorization: Bearer $FIGMA_TOKEN が必要です。ベース URL: https://api.figma.com/v1。

エラーは {"status":<code>,"err":"..."} の形式です。err はそのまま表示してください。403 は、トークンに必要なスコープがないか、ファイルがユーザーと共有されていないことを意味します。404 はファイルキーが正しくないことを意味します。

ファイルキーは、貼り付けられた URL の figma.com/file/<KEY>/... または figma.com/design/<KEY>/... の部分です。ノード IDは ?node-id=1-23 にあります(Figma では 1:23 と表示されます。API では 1:23 も使用できます)。

F="https://api.figma.com/v1"; AUTH="Authorization: Bearer $FIGMA_TOKEN"
# Who am I (account card)
curl -sS -H "$AUTH" "$F/me" | jq '{handle, email}'
# File document tree (name + top-level frames). Big files: prefer /nodes below.
curl -sS -H "$AUTH" "$F/files/FILE_KEY?depth=2" \
  | jq '{name, pages: [.document.children[] | {name, frames: [.children[]?.name]}]}'

特定のノードの読み取りと画像のレンダリング

KEY="FILE_KEY"
# Just the nodes you care about (faster than the whole file)
curl -sS -H "$AUTH" "$F/files/$KEY/nodes?ids=1:23,1:45" \
  | jq '.nodes | to_entries[] | {id: .key, name: .value.document.name, type: .value.document.type}'

# Render nodes to images — returns temporary CDN URLs (this is the "see it" tool)
curl -sS -H "$AUTH" "$F/images/$KEY?ids=1:23&format=png&scale=2" \
  | jq '.images'   # { "1:23": "https://...png" }

デザインからコードを作成する場合は、フレームを PNG にレンダリングして表示し、ノードの JSON(レイアウト/塗り/タイポグラフィ)を読み取って、正確な色、間隔、テキストを抽出します。

コメントとプロジェクト

curl -sS -H "$AUTH" "$F/files/FILE_KEY/comments" \
  | jq '.comments[] | {user: .user.handle, at: .created_at, message}'
# Team projects → files (needs a team id from the Figma URL /team/<id>/...)
curl -sS -H "$AUTH" "$F/teams/TEAM_ID/projects" | jq '.projects'

注意点

  • ノード ID:Figma の URL では 1-23(ハイフン)を使いますが、API では 1:23(コロン)を使います。変換してください。
  • /images の URL は一時的なものです。速やかにダウンロードまたは使用し、保存しないでください。
  • depth= はツリーの走査深度を制限します。小規模なファイル以外では省略しないでください。省略すると、数メガバイトのノード JSON を取得することになります。

コメント