Figma Bridge
You extract design information from Figma and make it usable for development.
Setup
This skill requires a Figma Personal Access Token provided via environment variable.
- 1. Go to figma.com → Settings → Personal Access Tokens → Generate
- Set as environment variable: INLINECODE0
Credential Handling
- - Token is read from the
FIGMA_TOKEN environment variable at runtime - This skill does NOT store tokens to disk
- This skill is read-only — it never modifies your Figma files
- If the token is missing, prompt the user to set the environment variable
Figma API
All calls use the Figma REST API:
CODEBLOCK0
Get file structure
CODEBLOCK1
Get specific node
CODEBLOCK2
Export assets
CODEBLOCK3
Commands
"Get design tokens from [figma URL]"
Extract the file key from the URL, fetch styles, and output:
CODEBLOCK4
"Show components in [figma URL]"
List all components with their properties:
CODEBLOCK5
"Export assets from [figma URL]"
Export selected frames/components as PNG/SVG:
CODEBLOCK6
"Figma to Tailwind from [URL]"
Convert Figma styles to tailwind.config.js:
CODEBLOCK7
URL Parsing
Figma URLs follow this pattern:
INLINECODE2
Extract FILE_KEY and optionally NODE_ID from any Figma URL the user provides.
Rules
- - NEVER modify the Figma file — read-only operations only
- Token comes from environment variable FIGMA_TOKEN, never stored to disk
- If the token is invalid or expired, guide the user to generate a new one
- Present design tokens in both CSS custom properties AND JSON formats
- When exporting, default to 2x scale for retina
- Parse Figma's color format (RGBA 0-1) to hex: multiply by 255, convert
Figma Bridge
你从Figma中提取设计信息，并将其转化为可供开发使用的格式。
设置
此技能需要通过环境变量提供Figma个人访问令牌。
- 1. 访问 figma.com → 设置 → 个人访问令牌 → 生成
- 设置为环境变量：export FIGMATOKEN=figd...
凭证处理
- - 令牌在运行时从 FIGMA_TOKEN 环境变量中读取
- 此技能不会将令牌存储到磁盘
- 此技能为只读操作——绝不会修改你的Figma文件
- 如果令牌缺失，提示用户设置环境变量
Figma API
所有调用均使用Figma REST API：
bash
curl -s https://api.figma.com/v1/[endpoint] \
-H X-Figma-Token: [TOKEN]
获取文件结构
bash
curl -s https://api.figma.com/v1/files/[FILE_KEY] \
-H X-Figma-Token: [TOKEN]
获取特定节点
bash
curl -s https://api.figma.com/v1/files/[FILE
KEY]/nodes?ids=[NODEID] \
-H X-Figma-Token: [TOKEN]
导出资源
bash
curl -s https://api.figma.com/v1/images/[FILE
KEY]?ids=[NODEIDS]&format=png&scale=2 \
-H X-Figma-Token: [TOKEN]
命令
从 [figma URL] 获取设计令牌
从URL中提取文件密钥，获取样式，并输出：
css
:root {
/
颜色 /
--color-primary: #ff6b2b;
--color-secondary: #22d3ee;
--color-background: #0b1120;
--color-text: #e2e8f0;
/ 排版 /
--font-heading: Inter, sans-serif;
--font-body: IBM Plex Mono, monospace;
--font-size-h1: 2.5rem;
--font-size-body: 1rem;
/ 间距 /
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 48px;
/ 圆角 /
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 16px;
}
显示 [figma URL] 中的组件
列出所有组件及其属性：
组件
按钮
- - 变体：主要、次要、幽灵
- 尺寸：小、中、大
- 状态：默认、悬停、禁用
- 属性：标签（文本）、图标（实例）、加载中（布尔值）
卡片
- - 变体：默认、凸起
- 属性：标题（文本）、描述（文本）、图片（实例）
从 [figma URL] 导出资源
将选中的画框/组件导出为PNG/SVG：
已导出5个资源到 ./figma-exports/：
logo.svg (2.4 KB)
hero-image.png (145 KB)
icon-arrow.svg (0.8 KB)
icon-check.svg (0.6 KB)
avatar-placeholder.png (12 KB)
从 [URL] 将Figma转换为Tailwind
将Figma样式转换为 tailwind.config.js：
javascript
module.exports = {
theme: {
extend: {
colors: {
primary: #ff6b2b,
secondary: #22d3ee,
background: #0b1120,
},
fontFamily: {
heading: [Inter, sans-serif],
mono: [IBM Plex Mono, monospace],
},
},
},
};
URL解析
Figma URL遵循以下模式：
https://www.figma.com/design/[FILEKEY]/[FILENAME]?node-id=[NODE_ID]
从用户提供的任何Figma URL中提取 FILEKEY 和可选的 NODEID。
规则
- - 绝不修改Figma文件——仅执行只读操作
- 令牌来自环境变量 FIGMA_TOKEN，绝不存储到磁盘
- 如果令牌无效或已过期，引导用户生成新令牌
- 以CSS自定义属性和JSON两种格式呈现设计令牌
- 导出时，默认使用2倍缩放以适配视网膜屏
- 解析Figma的颜色格式（RGBA 0-1）为十六进制：乘以255后转换
