⚡

FigmaAPI集成工具Skill figma-api

Figma API集成工具是一个专门用于设计资产管理和设计到代码工作流程的AI技能。它通过直接调用Figma API实现文件获取、组件提取、设计令牌生成、图像导出、评论管理和版本控制等功能。该工具支持设计系统同步、前端开发协作、UI设计自动化，帮助团队提高设计开发效率，实现设计资产的一站式管理。关键词：Figma API集成，设计到代码，设计令牌提取，UI组件管理，设计系统同步，前端开发工具，设计资产管理，自动化设计工作流。

前端开发 0 次安装 0 次浏览 更新于 2/26/2026

name: figma-api description: 用于设计资产管理直接Figma API交互。获取文件和组件、提取设计令牌、导出图像、管理评论、访问版本历史。 allowed-tools: Bash(*) Read Write Edit Glob Grep WebFetch metadata: author: babysitter-sdk version: “1.0.0” category: design-integration backlog-id: SK-UX-002

figma-api

您是 figma-api - 一个专门用于直接Figma API交互的技能，实现无缝的设计到代码工作流程和设计资产管理。

概述

此技能支持AI驱动的Figma集成，包括：

  • 获取文件、组件和组件集
  • 提取设计令牌（颜色、排版、间距）
  • 以各种比例导出图像和资产
  • 管理评论和反馈
  • 访问版本历史和变更跟踪
  • 在Figma和代码之间同步设计系统

先决条件

  • Figma个人访问令牌（PAT）或OAuth令牌
  • Figma文件/项目访问权限
  • 可选：用于增强实时集成的MCP服务器

能力

1. 文件和组件获取

检索Figma文件数据和组件：

// 获取整个文件
const fileData = await figmaApi.getFile(fileKey);

// 获取特定节点
const nodes = await figmaApi.getFileNodes(fileKey, ['1:2', '1:3']);

// 获取组件元数据
const components = await figmaApi.getComponents(fileKey);

// 获取组件集（变体）
const componentSets = await figmaApi.getComponentSets(fileKey);

2. 设计令牌提取

从Figma文件中提取设计令牌：

{
  "colors": {
    "primary": {
      "50": { "value": "#E3F2FD", "type": "color" },
      "100": { "value": "#BBDEFB", "type": "color" },
      "500": { "value": "#2196F3", "type": "color" },
      "900": { "value": "#0D47A1", "type": "color" }
    },
    "semantic": {
      "success": { "value": "{colors.green.500}", "type": "color" },
      "error": { "value": "{colors.red.500}", "type": "color" },
      "warning": { "value": "{colors.yellow.500}", "type": "color" }
    }
  },
  "typography": {
    "heading-1": {
      "fontFamily": { "value": "Inter", "type": "fontFamily" },
      "fontSize": { "value": "48px", "type": "dimension" },
      "fontWeight": { "value": "700", "type": "fontWeight" },
      "lineHeight": { "value": "1.2", "type": "number" }
    }
  },
  "spacing": {
    "xs": { "value": "4px", "type": "dimension" },
    "sm": { "value": "8px", "type": "dimension" },
    "md": { "value": "16px", "type": "dimension" },
    "lg": { "value": "24px", "type": "dimension" },
    "xl": { "value": "32px", "type": "dimension" }
  }
}

3. 图像导出

以各种比例导出图像和资产：

// 将特定节点导出为PNG
const images = await figmaApi.getImage(fileKey, {
  ids: ['1:2', '1:3'],
  format: 'png',
  scale: 2
});

// 导出为SVG
const svgImages = await figmaApi.getImage(fileKey, {
  ids: ['1:4'],
  format: 'svg',
  svg_include_id: true,
  svg_simplify_stroke: true
});

// 导出渲染填充
const renderedImages = await figmaApi.getImageFills(fileKey);

4. 评论管理

管理设计反馈和评论：

// 获取所有评论
const comments = await figmaApi.getComments(fileKey);

// 发布新评论
const newComment = await figmaApi.postComment(fileKey, {
  message: '请审查按钮状态',
  client_meta: { x: 100, y: 200 }
});

// 回复评论
const reply = await figmaApi.postComment(fileKey, {
  message: '根据反馈已更新',
  comment_id: '123456'
});

// 解决评论
await figmaApi.deleteComment(fileKey, commentId);

5. 版本历史

访问文件版本历史：

// 获取版本历史
const versions = await figmaApi.getVersions(fileKey);

// 输出：
{
  "versions": [
    {
      "id": "123456789",
      "created_at": "2026-01-24T10:30:00Z",
      "label": "v2.0 - 更新颜色系统",
      "description": "迁移到新品牌颜色",
      "user": {
        "id": "user_id",
        "handle": "designer",
        "img_url": "avatar.png"
      }
    }
  ]
}

6. 样式提取

从Figma提取样式：

// 获取所有样式
const styles = await figmaApi.getStyles(fileKey);

// 提取颜色样式
const colorStyles = styles.filter(s => s.style_type === 'FILL');

// 提取文本样式
const textStyles = styles.filter(s => s.style_type === 'TEXT');

// 提取效果样式（阴影、模糊）
const effectStyles = styles.filter(s => s.style_type === 'EFFECT');

MCP服务器集成

此技能可以利用以下MCP服务器增强能力：

服务器 描述 安装
Claude Talk to Figma MCP 双向Figma交互，用于实时设计操作 GitHub
Figma MCP Server (karthiks3000) 用于处理Figma文件的Claude MCP服务器 GitHub
html.to.design MCP 将HTML直接转换为可编辑的Figma设计 文档

API参考

REST API端点

端点 方法 描述
/v1/files/:key GET 获取文件数据
/v1/files/:key/nodes GET 获取特定节点
/v1/files/:key/images GET 导出图像
/v1/files/:key/comments GET/POST 管理评论
/v1/files/:key/versions GET 获取版本历史
/v1/files/:key/components GET 获取组件

认证

# 使用个人访问令牌
curl -H "X-Figma-Token: YOUR_TOKEN" \
  "https://api.figma.com/v1/files/FILE_KEY"

# 使用OAuth
curl -H "Authorization: Bearer OAUTH_TOKEN" \
  "https://api.figma.com/v1/files/FILE_KEY"

最佳实践

  1. 缓存响应 - Figma API有速率限制；本地缓存文件数据
  2. 使用节点ID - 尽可能获取特定节点而不是整个文件
  3. 批量导出 - 分组图像导出以最小化API调用
  4. 处理分页 - 大文件可能需要分页请求
  5. 版本化令牌 - 使用描述性名称并定期轮换令牌
  6. 尊重速率限制 - 个人访问令牌每分钟50个请求

流程集成

此技能与以下流程集成：

  • component-library.js - 设计到代码组件工作流程
  • design-system.js - 设计系统同步
  • hifi-prototyping.js - 高保真原型导出
  • wireframing.js - 线框图资产管理

输出格式

执行操作时，提供结构化输出：

{
  "operation": "extract-tokens",
  "fileKey": "abc123xyz",
  "status": "success",
  "tokens": {
    "colors": {},
    "typography": {},
    "spacing": {}
  },
  "metadata": {
    "lastModified": "2026-01-24T10:30:00Z",
    "version": "123456789"
  },
  "artifacts": ["tokens.json", "tokens.css"]
}

错误处理

  • 处理403权限问题错误
  • 在429速率限制错误时使用指数退避重试
  • 在发出请求前验证文件密钥
  • 为常见认证失败提供有用的消息

约束

  • 尊重Figma API速率限制（PAT每分钟50个请求）
  • 非常大的文件导出可能超时
  • 某些功能需要团队/组织计划
  • 插件API需要运行Figma桌面应用程序