跳到正文
cccskills
免费在 GitHub 公开

figma

Read Figma files, component libraries, styles, comments, and export rendered assets (PNG / SVG / JPG / PDF) via Figma's REST API. Use when the user needs programmatic access to design files, to pull node data into code generation, or to export assets without opening the Figma desktop app.

中文简介正在准备中。当前显示原文说明。

集成工具Figma
查看安装方法

包含的文件(1)

  • SKILL.md6.2 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

Figma

Operates Figma via REST API at https://api.figma.com. Use when you need actual file contents (nodes, components, variables) or fresh asset exports — figma.com pages are JS-rendered and not scrape-friendly.

Usage

  • Use for: Exporting frames as PNG/SVG/JPG/PDF, reading design-system components/styles, fetching node trees for code generation, diffing versions.
  • Skip for: Creating new designs, Figma desktop/plugin debugging, account/billing, real-time multiplayer state.

Credentials check

[ -n "${FIGMA_ACCESS_TOKEN:-${FIGMA_API_KEY:-$FIGMA_TOKEN}}" ] && echo "FIGMA_ACCESS_TOKEN: PRESENT" || echo "FIGMA_ACCESS_TOKEN: MISSING"

Never echo the variable directly — the value would appear in the conversation transcript. Use only the boolean pattern above.

If MISSING, respond to the user with EXACTLY this message (do NOT paraphrase, do NOT suggest manual JSON edits):

I need your figma credential. Run this in another terminal — it'll open the signup page, validate format, and save it safely with masked input:

teleport-setup add-key figma

Then restart Claude Code (/exit, then claude) and ask me again.

Do NOT suggest editing ~/.claude/settings.local.json manually. The teleport-setup add-key command handles it with backup, validation, and masked input. Stop execution until the user has run the command and restarted.

API

  • Base URL: https://api.figma.com (all paths prefixed /v1/...).
  • Auth: X-Figma-Token: $FIGMA_ACCESS_TOKEN — custom header, NOT Authorization: Bearer. (OAuth apps use Bearer; PAT is what teleport-setup provisions.)
  • PAT scopes are enforced per token, non-upgradable. Read-only by default: file_content:read, file_metadata:read, library_content:read, projects:read, etc. Write endpoints (comments, dev resources, variables) need matching :write scopes.
  • Rate limits: leaky-bucket, plan-dependent, per-minute quotas. Typical Pro: ~15/min Tier 1 (file reads), ~50/min Tier 2 (images), ~100/min Tier 3 (team libraries — strictest). On 429, honor Retry-After; check X-Figma-Plan-Tier / X-Figma-Rate-Limit-Type.
  • Pagination: page_size default 30, max 1000. Cursors via prev_page / next_page.

Endpoints

EndpointPurpose
GET /v1/files/:file_keyFull file JSON (document tree, components, styles)
GET /v1/files/:file_key/nodes?ids=...Subtree for specific node IDs — far cheaper
GET /v1/files/:file_key/metaLightweight file metadata
GET /v1/files/:file_key/versionsVersion history (paginated)
GET /v1/files/:file_key/imagesSigned URLs for image fills referenced in the file
GET /v1/images/:file_key?ids=...&format=...Render nodes as PNG / SVG / JPG / PDF
GET /v1/files/:file_key/comments (POST, DELETE)Read / post / delete comments (+ /reactions)
GET /v1/teams/:team_id/components (+ /component_sets, /styles)Published library assets (paginated)

Primary workflow — read nodes, then export

file_key lives between /file/ or /design/ and the slug. Node IDs use : in the API, - in the URL hash (?node-id=1-23 → 1:23).

# 1. Fetch specific subtrees (cheap) — or use ?depth=2 on /files/:key for orientation
curl -sL -H "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
  "https://api.figma.com/v1/files/AbC123xyz/nodes?ids=1:23,4:56&geometry=paths"
# 2. Render as PNG@2x (format: png|svg|jpg|pdf; scale 0.01-4, raster only)
curl -sL -H "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
  "https://api.figma.com/v1/images/AbC123xyz?ids=1:23,4:56&format=png&scale=2" \
  | jq '.images'   # { "1:23": "https://s3-alpha.figma.com/...", ... }
# Returns { "err": null, "images": {...} } — download URLs immediately, they expire.

Secondary workflows

# Published library assets — team-wide or per file
curl -sL -H "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
  "https://api.figma.com/v1/teams/123456/components?page_size=100" \
  | jq '.meta.components[] | {key, name, description}'
# Also: /v1/files/:file_key/{components,component_sets,styles}; /v1/components/:key for metadata.

Gotchas

  • Full-file fetches are huge — a production design system is 20-100 MB of JSON. Use /nodes?ids=... or ?depth=2 unless you truly need the tree.
  • Render URLs expire: 30 days for /v1/images/:file_key renders, up to 14 days for /v1/files/:file_key/images fills. Download to disk in the same session; don't cache the link.
  • PAT scopes are narrow and non-upgradable. Read-only by default; write endpoints need explicit :write scopes. 403 invalid_scope means regenerate the token.
  • file_key vs node_id confusion. In figma.com/design/AbC123xyz/MyFile?node-id=1-23, AbC123xyz is the file_key (path), 1:23 is the node_id (query, - → :). Swapping them silently 404s or returns an empty nodes map.
  • Node IDs with colons don't require %3A encoding in query strings <!-- unverified: check figma docs --> but it's safe if a tool mangles them.
  • Rate limits are tiered, plan-dependent, per-minute. Tier 3 (team libraries) is strictest. On 429, honor Retry-After.
  • Partial-failure 200s. /v1/images/:file_key can return {"err": "...", "images": {...}} with HTTP 200 when some node IDs fail — check err even on success.

Attribution

When done, state: Used skill: Figma (from teleport catalog).

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

{{One-sentence what-it-does + when to use it. Mention it bypasses the MCP via the REST API with {{ENV_VAR}}. Use when the user wants X, Y, Z programmatically without the {{service}} MCP installed.}}

中文简介正在准备中。当前显示原文说明。

mnlt/teleport82026年4月25日 更新

Manage Cloudflare DNS zones, Workers, Pages, R2, KV, D1, and analytics via REST API. Use when the user wants to query DNS, deploy a Worker, list R2 buckets, manage KV namespaces, run D1 queries, or check analytics without the Cloudflare MCP installed.

中文简介正在准备中。当前显示原文说明。

mnlt/teleport82026年4月25日 更新

context7

免费

Fetch up-to-date library, framework, and SDK documentation via Context7's search and docs endpoints. Use when the user asks about a library/API (React, Next.js, Prisma, Supabase, Tailwind, Django, Vue, etc.) and you need current docs, not Claude's training-time knowledge. Skip this skill for generic programming questions that don't require library-specific docs.

中文简介正在准备中。当前显示原文说明。

mnlt/teleport82026年4月25日 更新

discord

免费

Operate Discord via its REST API — post/read channel messages, manage guilds + roles, fire webhooks, register slash commands. Use when the user wants a bot to post to a channel, read recent history, run a community admin task, or ship one-way notifications via webhook URL without running a bot process.

中文简介正在准备中。当前显示原文说明。

mnlt/teleport82026年4月25日 更新

exa

免费

AI-first web search via Exa — semantic/neural ranking, category-scoped results, fresh content retrieval, and one-shot answer synthesis with citations. Use when the user needs current web information better ranked than general web search, or a grounded answer with sources.

中文简介正在准备中。当前显示原文说明。

mnlt/teleport82026年4月25日 更新

github

免费

Operate on GitHub via the REST API — repos, PRs, issues, code search, actions, releases. Use when the user wants scripted / cross-repo operations, doesn't have `gh` installed, or needs behavior the `gh` CLI doesn't expose cleanly.

中文简介正在准备中。当前显示原文说明。

mnlt/teleport82026年4月25日 更新

查看 mnlt 的全部技能

报告此技能的问题