用途:Figma 是协作式云端界面设计工具,用于设计界面、设计系统、线框图和用户流程,并支持将 UI 设计转化为开发实现。
主要能力:具备矢量网络、设计令牌、组件变体库和 Dev Mode 检查工具。可通过 Figma REST API 导出颜色、排版、间距和变量等设计令牌为 JSON 或 Tailwind;Dev Mode 可直接检查 CSS、iOS SwiftUI 和 Android Compose 属性。还可开发自定义插件,实现资产导出、图层检查与代码仓库同步等自动化。
使用方式:查询 REST API 可用如下命令:
curl -H "X-Figma-Token: $FIGMA_ACCESS_TOKEN"
"https://api.figma.com/v1/files/{file_key}/styles" | jq '.meta.styles[] | {name, style_type}'
打开 Dev Mode 使用 Shift + D,可检查组件令牌如 background: var(--color-primary-500),并导出 CSS 变量到 theme.css 或 Tailwind @theme。
适用场景:协作式 UI/UX 设计与原型、通过 REST API 提取设计令牌、Dev Mode 代码检查、自定义插件开发。
限制与建议:不要分离组件实例,应使用组件变体与属性;不要硬编码十六进制色值,应绑定设计令牌;不要将个人访问令牌提交到公开仓库。常见问题:403 无效令牌需在账户安全设置中重新生成;调整父级大小时自动布局断裂,需将子元素宽度改为 Fill container;导出 SVG 缺失字体或图标,需先将文本转为轮廓(Cmd+Shift+O)或嵌入字体。部分使用细节暂未提供。