back
loading skill details...
从Figma设计稿提取设计上下文、截图、变量与资源，支持生成生产级React/Vue组件代码，适合个人日常使用。
---
slug: figma-toolkit-free
name: figma-toolkit-free
version: 1.0.0
displayName: Figma设计工具包（免费版）
summary: 从Figma设计稿获取设计上下文、截图、变量与资源，并转化为生产代码。
license: Proprietary
edition: free
description: 'Figma设计工具包 - （免费版）
核心能力: Figma, 设计转代码, 设计导出, 设计变量, design to code, figma to react, 组件生成
适用场景: 个人用户日常使用，核心功能覆盖基础需求
差异化: 精简版，适合个人用户快速上手，提供核心功能与基础用法
适用关键词: Figma, 设计转代码, 设计导出, 设计变量, design to code, figma to react, 组件生成'
tags:
- 设计转码
- Figma
- 设计资源
- 组件生成
tools:
- - read
- exec
homepage: https://skillhub.cn
pricing_tier: L2
pricing_model: per_use
suggested_price: 19.9
tools: ["read", "write", "exec"]
tags: "工具,效率,自动化"
---
# Figma设计工具包（免费版）
## 概述
Figma设计工具包是针对设计转码领域的专业化AI辅助工具。免费版面向个人用户，提供核心功能与基础用法，适合快速上手和日常使用。
本工具经过深度优化，增强元数据和适用关键词，完全适配SkillHub平台规范。
## 核心能力
设计上下文获取、节点截图、变量提取、资源导出、设计转代码、组件映射
### 核心能力(补充)
执行核心能力操作,使用`input_params`参数进行配置,支持创建/查询/导出等操作。
- 执行此能力时使用`input_params`参数,支持创建/查询/导出操作
### 基础功能完整覆盖
基础功能完整覆盖
**输入**: 用户提供基础功能完整覆盖所需的指令和必要参数。
**处理**: 解析基础功能完整覆盖的输入参数,完成核心逻辑,返回结构化响应。
**输出**: 返回基础功能完整覆盖的响应数据,包含状态码、结果和日志。
- 执行此能力时使用`input_params`参数,支持创建/查询/导出操作
### 简洁易用的操作接口
简洁易用的操作接口
**输入**: 用户提供简洁易用的操作接口所需的指令和必要参数。
**处理**: 解析简洁易用的操作接口的输入参数,完成核心逻辑,返回结构化响应。
**输出**: 返回简洁易用的操作接口的响应数据,包含状态码、结果和日志。
- 执行此能力时使用`input_params`参数,支持创建/查询/导出操作
### 标准格式输入输出
标准格式输入输出
**输入**: 用户提供标准格式输入输出所需的指令和必要参数。
**处理**: 解析标准格式输入输出的输入参数,完成核心逻辑,返回结构化响应。
**输出**: 返回标准格式输入输出的响应数据,包含状态码、结果和日志。
- 执行此能力时使用`input_params`参数,支持创建/查询/导出操作
### 快速上手
快速上手，零配置即可使用
**输入**: 用户提供快速上手所需的指令和必要参数。
**处理**: 解析快速上手的输入参数,完成核心逻辑,返回结构化响应。
**输出**: 返回快速上手的响应数据,包含状态码、结果和日志。
- 执行此能力时使用`input_params`参数,支持创建/查询/导出操作
### 适合个人日常使用场景
适合个人日常使用场景
**输入**: 用户提供适合个人日常使用场景所需的指令和必要参数。
**处理**: 解析适合个人日常使用场景的输入参数,完成核心逻辑,返回结构化响应。
**输出**: 返回适合个人日常使用场景的响应数据,包含状态码、结果和日志。
- 执行此能力时使用`input_params`参数,支持创建/查询/导出操作
**输入**: 用户提供核心能力所需的指令和必要参数。
**处理**: 解析核心能力的输入参数,完成核心逻辑,返回结构化响应。
**输出**: 返回核心能力的响应数据,包含状态码、结果和日志。
**技术实现要点**：核心能力基于`input_params`参数与`output_format`配置实现,支持创建/查询/修改/删除等操作模式,通过`config_options`进行运行时配置。
**能力覆盖范围**：本skill的核心能力覆盖以下场景关键词：Figma、设计稿获取设计上、变量与资源、并转化为生产代码、设计工具包、免费版等。这些关键词对应description中声明的使用场景,均已在上述能力点中提供对应的操作支持。
## 使用场景
### 场景1：设计稿转代码
从Figma URL和节点ID获取设计上下文，生成React/Vue组件代码。**示例指令**：`
`把这个Figma设计转为React组件
**操作流程**：
1. 识别用户需求类型
2. 加载对应处理模块
3. 执行操作并返回结果
### 场景2：设计资源导出
批量导出Figma中的图标、图片等设计资源。**示例指令**：`
`导出这个Figma文件的所有图标
### 场景3：设计变量提取
提取Figma中的颜色、字体、间距等设计变量。**示例指令**：`
`提取设计系统变量
## 快速开始
1. 阅读## 核心能力章节了解skill功能
2. 按## 依赖说明配置环境
3. 执行所需能力对应的命令
4. 参考## 错误处理章节处理异常
5. 查看## FAQ解答常见疑问
### 环境准备
## 输入格式
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| input | string | 是 | Figma设计工具包（免费版）处理的输入数据或指令 |
| options | object | 否 | 附加配置选项,如模式选择、格式偏好等 |
| callback_url | string | 否 | 异步处理完成后的回调通知URL |
```bash
# 确保Python环境可用
python3 --version
# ...
# 依赖说明
pip install requests
```
### 基础用法
```python
# Figma设计获取基础
import subprocess
# ...
# 获取节点截图
result = subprocess.run([
"npx", "figma-developer-mcp",
"--file-key", "abc123",
"--node-id", "1:2",
"--action", "screenshot"
], capture_output=True, text=True)
print(result.stdout)
# ...
# 获取设计变量
result = subprocess.run([
"npx", "figma-developer-mcp",
"--file-key", "abc123",
"--action", "variables"
], capture_output=True, text=True)
print(f"变量: {result.stdout}")
```
### 执行结果
完成上述代码后，将根据输入参数返回结构化响应。免费版支持单次任务，适合解析单个文件或任务。
## 示例
```yaml
figma:
access_token: "YOUR_FIGMA_TOKEN"
default_format: png
output_dir: "./assets"
```
### 配置说明
| 配置项 | 说明 | 默认值 |
|:-----|:-----|:-----|
| 基础路径 | 工作目录 | `./` |
| 输出格式 | 结果输出格式 | `json` |
## 最佳实践
### 基础使用建议
1. **明确需求**：在使用前明确需要处理的内容和期望结果
2. **检查输入**：确保输入文件格式正确、内容完整
3. **保存结果**：处理完成后及时保存输出结果
4. **定期清理**：定期清理临时文件
5. **错误处理**：遇到错误时检查输入参数
### 性能优化
```python
# 免费版：单文件优化
# 确保输入文件不超过建议大小
# 处理完成后释放资源
```
## 常见问题
### Q1: 处理速度较慢怎么办？
A: 免费版为单线程处理，对于大文件建议分批处理或升级到专业版获得并行处理能力。
### Q2: 支持的文件格式有哪些？
A: 支持标准格式输入输出，常见格式包括JSON、YAML、Markdown等。
### Q3: 如何获取API Key？
A: 需要Figma个人访问令牌（Personal Access Token）。如需外部服务API，请参考对应服务的注册流程。
### 已知限制
A: 免费版支持单次操作，适合个人日常使用。如需批量处理或高级功能，建议升级到专业版。
## 依赖说明
### 运行环境
- **Agent平台**: 支持SKILL.md的任意AI Agent（Claude Code / Cursor / Codex / Gemini CLI等）
- **操作系统**: Windows / macOS / Linux
- **Python版本**: 3.8+
### 第三方依赖
| 依赖项 | 类型 | 是否必需 | 获取方式 |
|---:|---:|---:|---:|
| LLM API | API | 必需 | 由Agent内置LLM提供 |
| figma-developer-mcp | npm包 | 必需 | npx figma-developer-mcp |
| Node.js | 运行时 | 必需 | v16+ |
### API Key 配置
- 需要Figma个人访问令牌（Personal Access Token）
### 可用性分类
- **分类**: MD+EXEC（纯Markdown指令，部分功能需要exec命令行执行能力）
- **说明**: 基于Markdown的AI Skill，通过自然语言指令驱动Agent完成操作
- **版本**: 免费版（v1.0.0 免费版，核心功能）
- API Key通过环境变量配置: export API_KEY=your_key
## 错误处理
| 错误场景 | 原因 | 处理方式 |
|:---:|:---:|:---:|
| 配置错误 | 参数缺失或格式错误 | 检查依赖说明中的配置要求 |
| 运行时错误 | 运行环境不满足 | 确认运行环境符合依赖说明 |
| 网络错误 | 连接超时或不可达 | 执行ping命令测试网络连通性,检查防火墙和代理设置连接后执行ping命令测试网络连通性,检查防火墙和代理设置连接后重新执行命令，参考国内替代方案 |
## 输出格式
```json
{
"success": true,
"data": {
"result": "Figma设计工具包（免费版）处理结果",
"execution_time": "0.5s",
"metadata": {
"version": "1.0",
"processor": "figmakit"
}
},
"execution_log": ["解析输入参数", "执行核心处理", "格式化输出结果"],
"error": null
}
```
don't have the plugin yet? install it then click "run inline in claude" again.