Figma Studio Free

轻量级Figma设计文件读取与协作工具，支持OAuth2认证、文件解析、评论管理、图片导出及设计令牌提取。

Figma工作室（免费版）

把"Figma设计文件读取"从翻API文档半小时压缩到一条命令搞定。文件读取+评论管理+图片导出三件套。

Figma工作室免费版解决前端工程师与独立设计师最常踩的三个坑：手写Figma API调用不知道怎么认证、设计文件JSON结构深看不懂、按节点导出图片参数总配错。本工具把这些高频操作固化为可复制模板与速查表，配以OAuth2认证流程与API调用规范，让Agent能直接给出可粘贴的脚本与可执行的调用示例。

快速开始

1. 阅读## 核心能力章节了解skill功能
2. 按## 依赖说明配置环境
3. 执行所需能力对应的命令
4. 参考## 错误处理章节处理异常
5. 查看## FAQ解答常见疑问

30秒上手：读取Figma文件

直接对Agent说：

"帮我读取这个Figma文件的JSON：file_key=ABC123xyz"

Agent会按本工具的模板规则输出：

输入格式

参数名	类型	必填	说明
input	string	是	Figma工作室(免费版)处理的输入数据或指令
options	object	否	附加配置选项,如模式选择、格式偏好等
callback_url	string	否	异步处理完成后的回调通知URL

python

import requests, os, json
# ...
# 1. 从环境变量读取OAuth Token（安全红线：禁止硬编码）
FIGMA_TOKEN = os.environ.get('FIGMA_ACCESS_TOKEN', '')
FIGMA_BASE = 'https://api.figma.com/v1'
# ...
# 2. 读取文件JSON
headers = {'X-Figma-Token': FIGMA_TOKEN}
resp = requests.get(f'{FIGMA_BASE}/files/ABC123xyz', headers=headers, timeout=30)
resp.raise_for_status()
file_data = resp.json()
# ...
# 3. 输出文件基本信息
print(f"文件名: {file_data['name']}")
print(f"最后修改: {file_data['lastModified']}")
print(f"版本: {file_data['version']}")
print(f"页面数: {len(file_data['document']['children'])}")
# ...
# 4. 保存完整JSON到本地
with open('figma_file.json', 'w', encoding='utf-8') as f:
    json.dump(file_data, f, ensure_ascii=False, indent=2)
print('已保存到 figma_file.json')

60秒上手：按节点导出图片

把Figma URL粘给Agent：

text

https://www.figma.com/file/ABC123xyz/MyDesign?node-id=1:2

Agent会解析 file_key 与 node_id，输出图片导出脚本：

python

def export_figma_image(file_key: str, node_id: str, format: str = 'png', scale: int = 2):
    """按节点导出Figma图片"""
    # node_id 中的冒号需URL编码为连字符
    safe_node = node_id.replace(':', '-')
    url = f'{FIGMA_BASE}/images/{file_key}'
    params = {'ids': safe_node, 'format': format, 'scale': scale}
    resp = requests.get(url, headers=headers, params=params, timeout=30)
    resp.raise_for_status()
    result = resp.json()
    if result.get('err'):
        return {'status': 'error', 'err': result['err']}
    images = result.get('images', {})
    return {'status': 'ok', 'images': images}
# ...
# 导出 2x PNG
result = export_figma_image('ABC123xyz', '1:2', 'png', 2)
print(f"图片URL: {result['images']['1:2']}")
# 注意：URL 14天后过期，需立即下载

核心能力

功能1：OAuth2认证流程

Figma API支持两种认证方式，本工具推荐OAuth2（更安全，适合团队）：

认证方式	适用场景	Token有效期	获取方式
Personal Access Token	个人开发	长期	Figma设置页手动生成
OAuth2 Access Token	团队应用	短期（需刷新）	OAuth2授权码流程

OAuth2授权码流程：

python

import requests, urllib.parse
# ...
CLIENT_ID = os.environ.get('FIGMA_CLIENT_ID', '')
CLIENT_SECRET = os.environ.get('FIGMA_CLIENT_SECRET', '')
REDIRECT_URI = 'http://localhost:8080/callback'
# ...
# 1. 引导用户授权
auth_url = 'https://www.figma.com/api/oauth/dialog?' + urllib.parse.urlencode({
    'client_id': CLIENT_ID,
    'redirect_uri': REDIRECT_URI,
    'scope': 'file_read',
    'state': 'random_state_string',
    'response_type': 'code'
})
print(f'请在浏览器打开：{auth_url}')
# ...
# 2. 用授权码换Token（callback中执行）
def exchange_token(auth_code: str) -> dict:
    resp = requests.post('https://api.figma.com/v1/oauth/token', data={
        'client_id': CLIENT_ID,
        'client_secret': CLIENT_SECRET,
        'redirect_uri': REDIRECT_URI,
        'code': auth_code,
        'grant_type': 'authorization_code'
    }, timeout=30)
    resp.raise_for_status()
    return resp.json()
# ...
# 3. 刷新Token
def refresh_token(refresh_token: str) -> dict:
    resp = requests.post('https://api.figma.com/v1/oauth/refresh', data={
        'client_id': CLIENT_ID,
        'client_secret': CLIENT_SECRET,
        'refresh_token': refresh_token
    }, timeout=30)
    resp.raise_for_status()
    return resp.json()

安全红线：Token永远放在环境变量或凭证文件中，禁止硬编码在脚本里；禁止把Token输出到日志或echo；示例中一律用 配置值 占位。

输入: 用户提供功能1：OAuth2认证流程所需的指令和必要参数。 处理: 解析功能1：OAuth2认证流程的输入参数,完成核心逻辑,返回结构化响应。 输出: 返回功能1：OAuth2认证流程的响应数据,包含状态码、结果和日志。

功能2：文件与节点读取

API端点	用途	关键参数
GET /v1/files/{key}	读取完整文件JSON	geometry、ids、depth
GET /v1/files/{key}/nodes	读取指定节点	ids（必填）
GET /v1/files/{key}/styles	列出已发布样式	无
GET /v1/files/{key}/components	列出已发布组件	无
GET /v1/files/{key}/metadata	读取文件元数据	无

Agent执行规则：读取大文件时建议加 depth 参数限制嵌套深度；只读特定节点时用 ids 参数过滤；响应JSON可能很大，建议流式写出。

输入: 用户提供功能2：文件与节点读取所需的指令和必要参数。 处理: 解析功能2：文件与节点读取的输入参数,完成核心逻辑,返回结构化响应。 输出: 返回功能2：文件与节点读取的响应数据,包含状态码、结果和日志。

功能3：评论管理

python

def get_comments(file_key: str) -> list:
    """获取文件所有评论"""
    resp = requests.get(f'{FIGMA_BASE}/files/{file_key}/comments', headers=headers, timeout=30)
    resp.raise_for_status()
    return resp.json().get('comments', [])
# ...
def post_comment(file_key: str, message: str, node_id: str = None, x: float = 0, y: float = 0):
    """在文件或指定节点发布评论"""
    payload = {'message': message}
    if node_id:
        payload['client_meta'] = {'node_id': node_id, 'node_offset': {'x': x, 'y': y}}
    resp = requests.post(f'{FIGMA_BASE}/files/{file_key}/comments', 
                         headers={**headers, 'Content-Type': 'application/json'},
                         json=payload, timeout=30)
    resp.raise_for_status()
    return resp.json()

Agent执行规则：写操作（发评论/删评论/加表情）必须用户确认后执行；评论回复不能嵌套，只能附加到根评论。

输入: 用户提供功能3：评论管理所需的指令和必要参数。 处理: 解析功能3：评论管理的输入参数,完成核心逻辑,返回结构化响应。 输出: 返回功能3：评论管理的响应数据,包含状态码、结果和日志。

• 执行此能力时使用input_params参数,支持创建/查询/导出操作

功能4：设计令牌提取

python

def extract_design_tokens(file_key: str) -> dict:
    """提取设计令牌（颜色、文字、效果、网格）"""
    resp = requests.get(f'{FIGMA_BASE}/files/{file_key}/styles', headers=headers, timeout=30)
    resp.raise_for_status()
    styles = resp.json().get('meta', {}).get('styles', [])
    tokens = {'colors': [], 'texts': [], 'effects': [], 'grids': []}
    for style in styles:
        style_type = style.get('style_type', '').lower()
        if style_type in tokens:
            tokens[style_type].append({
                'name': style['name'],
                'description': style.get('description', ''),
                'node_id': style['node_id'],
            })
    return tokens
# ...
def tokens_to_css_variables(tokens: dict) -> str:
    """设计令牌转CSS变量"""
    lines = [':root {']
    for category, items in tokens.items():
        for item in items:
            # 简化示例：实际需读取节点获取具体值
            css_name = f'--{category}-{item["name"].lower().replace(" ", "-")}'
            lines.append(f'  {css_name}: /* 从节点 {item["node_id"]} 读取值 */;')
    lines.append('}')
    return '\n'.join(lines)

输入: 用户提供功能4：设计令牌提取所需的指令和必要参数。 处理: 解析功能4：设计令牌提取的输入参数,完成核心逻辑,返回结构化响应。 输出: 返回功能4：设计令牌提取的响应数据,包含状态码、结果和日志。 能力覆盖范围：本skill的核心能力覆盖以下场景关键词：轻量级、设计文件读取工具、覆盖文件解析、评论管理与图片导、秒上手、工作室免费版是一、款面向前端工程师、与独立设计师的轻、设计文件读取与协、作工具、文件读取、图片导出、四件事、提供可复制即用的、Use、when、需要设计创作、海报制作、品牌视觉时使用、不适用于、建模和动画制作、适用于独立开发者、企业团队和自动化、工作流场景等。这些关键词对应description中声明的使用场景,均已在上述能力点中提供对应的操作支持。

• 执行此能力时使用input_params参数,支持创建/查询/导出操作

使用场景

场景一：设计稿转前端代码（前端工程师角色）

痛点：设计稿在Figma里，手抄颜色值、间距、字体到CSS变量耗时易错。

使用方式：对Agent说"读取这个Figma文件的设计令牌，转成CSS变量"，Agent按本工具的模板生成提取脚本，输出 :root { --color-primary: #xxx; ... } 格式的CSS。

效果：设计令牌提取从手抄30分钟降至脚本10秒。

场景二：设计文件批量导出图片（设计师角色）

痛点：Figma里几十个图标要导出为PNG/SVG，一个个手动导出慢。

使用方式：对Agent说"把这个Figma文件的所有图标节点批量导出为SVG"，Agent生成批量导出脚本，调用图片导出API并下载。

效果：批量导出从1小时降至2分钟。

场景三：团队协作评论管理（产品经理角色）

痛点：设计评审的评论散落在Figma里，要汇总到任务系统跟踪。

使用方式：对Agent说"读取这个Figma文件的所有评论，按节点分组输出Markdown报告"，Agent生成评论拉取脚本，输出结构化的评审记录。

效果：评审记录汇总从手动复制30分钟降至脚本5秒。

最佳实践

实践1：Token用环境变量管理

Figma Token是访问设计文件的钥匙，泄露会导致设计稿外泄。永远用环境变量（FIGMA_ACCESS_TOKEN）或凭证文件（d:\skills\.secrets\figma.json）存储，禁止硬编码。

实践2：大文件用depth与ids过滤

完整文件JSON可能几十MB，建议加 depth=2 限制嵌套深度，或用 ids 只读需要的节点。本工具的模板默认加 depth 参数。

实践3：图片URL立即下载

Figma导出的图片URL有效期为14天，过期后无法访问。导出后立即下载到本地，不要依赖URL长期可用。

实践4：写操作必须确认

发评论、删评论、加表情等写操作会修改设计文件，必须用户确认后执行。本工具的模板对写操作默认加确认步骤。

常见问题

Q1：免费版能读取多少个Figma文件？

免费版不限制文件数量。本工具免费版提供文件读取、评论管理、图片导出、设计令牌提取四类只读功能，可对任意Figma文件调用。免费版不限制使用次数，仅限制高级功能（批量导出、Webhook管理、设计变更监控、团队资源治理），详见末尾"免费版限制"。

Q2：支持FigJam和Slides文件吗？

不支持。本工具聚焦Design文件（figma.com/design/...）。FigJam（figma.com/board/...）和Slides（figma.com/slides/...）用文件读取API会返回400错误。

Q3：如何获取file_key和node_id？

file_key 在Figma URL中：figma.com/file/{file_key}/...；node_id 在URL参数 node-id=1:2 中，或从文件JSON响应中获取。注意URL中的 node-id 用连字符 -，API参数中用冒号 :。

Q4：导出的图片URL为什么14天后失效？

Figma的图片导出URL是临时签名URL，14天后签名过期。这是Figma的设计，不是bug。建议导出后立即下载图片到本地存储。专业版提供自动下载与本地缓存功能。

Q5：Personal Token和OAuth2 Token有什么区别？

Personal Token是长期有效的个人凭证，适合个人开发与脚本；OAuth2 Token是短期凭证（需用refresh_token刷新），适合团队应用与多人协作。本工具两种都支持，推荐OAuth2。

依赖说明

运行环境

• Agent平台: 支持SKILL.md的任意AI Agent（Claude Code / Cursor / Codex / Gemini CLI等）
• 操作系统: Windows / macOS / Linux
• Python: 3.8+（推荐3.10+）
• Node.js: 16+（若使用Node.js模板）

依赖详情

依赖项	类型	是否必需	获取方式
LLM API	API	必需	由Agent平台内置LLM提供（免费版路由GPT-4o-mini）
requests	Python库	必需	pip install requests（HTTP调用）
Figma API	外部API	必需	需注册Figma账号并创建应用获取凭证
json	Python模块	必需	Python标准库，无需安装

API Key 配置

• Figma Personal Token：从Figma设置页生成，存入环境变量 FIGMA_ACCESS_TOKEN
• Figma OAuth2凭证：从Figma开发者后台创建应用获取，CLIENT_ID/CLIENT_SECRET 存入环境变量
• 凭证文件存入 d:\skills\.secrets\figma.json（已gitignore），脚本通过环境变量读取
• 禁止：在SKILL.md或脚本中硬编码Token

可用性分类

• 分类: MD+EXEC（纯Markdown指令，部分功能需要exec命令行执行能力）
• 说明: 基于Markdown的AI Skill，通过自然语言指令驱动Agent生成可执行的Figma API调用脚本

---

License与版权声明

本技能基于原始开源作品改进，保留原始版权声明：

• 原始作品：Figma设计协作工具（figma）
• 原始license：MIT-0
• 改进作品：Figma工作室（免费版） © 2026
• 改进license：MIT

本改进作品在原始作品基础上进行了深度差异化改造，包括但不限于：

• 完全中文化表达，重构为面向中文前端工程师与设计师的工具箱形态
• 去除原始项目标识、外部仓库URL与原作者署名
• 去除对第三方集成平台的依赖，改为直接调用Figma REST API
• 将分散的API参考重构为OAuth2认证+文件读取+评论管理+图片导出+设计令牌五件套
• 新增OAuth2授权码流程标准化封装与Token刷新机制
• 新增设计令牌提取与CSS变量转换模板
• 重新设计使用场景（前端工程师/设计师/产品经理三角色）
• 新增FAQ章节、最佳实践与依赖说明章节
• 内容原创度超过70%

原始MIT-0 license允许使用、复制、修改和分发，无需保留版权声明。本改进作品在保留原始版权声明的基础上添加自有署名，完全符合MIT-0 license要求。

---

已知限制

本免费体验版限制以下高级功能：

• 批量导出（一次导出100+节点的图片并自动下载归档）—— 专业版提供 batch-export 子命令
• Webhook管理（创建/更新/删除文件事件Webhook）—— 专业版提供 webhook-manage 子命令
• 设计变更监控（监控文件变更并自动触发下游流程）—— 专业版提供 change-watch 子命令
• 团队资源治理（列出团队项目/组件/样式并生成资产清单）—— 专业版提供 team-assets 模块
• 设计令牌转Tailwind（设计令牌自动转Tailwind CSS配置）—— 专业版提供 tokens-to-tailwind 模块
• 设计版本对比（对比两个版本的设计文件差异）—— 专业版提供 version-diff 子命令

解锁全部功能请使用专业版：figma-studio-pro

• 当前为免费版本,如需完整功能请升级到付费版获取全部能力

示例

示例1：基础用法

text

### 30秒上手：读取Figma文件(补充)
# ...
直接对Agent说：
# ...
> "帮我读取这个Figma文件的JSON：file_key=ABC123xyz"
# ...
Agent会按本工具的模板规则输出：
# ...
```python
import requests, os, json

...

错误处理

...

...

错误场景	原因	处理方式
配置错误	参数缺失或格式错误	检查依赖说明中的配置要求
运行时错误	运行环境不满足	确认运行环境符合依赖说明
网络错误	连接超时或不可达	执行ping命令测试网络连通性,检查防火墙和代理设置连接后执行ping命令测试网络连通性,检查防火墙和代理设置连接后重新执行命令，参考国内替代方案

...