figma

Figma 集成

从 Figma 提取设计数据并生成代码。

前置条件

Figma API 令牌：

export FIGMA_ACCESS_TOKEN=figd_xxxxx

从以下位置获取令牌：Figma > Settings > Account > Personal Access Tokens

可选：安装 figma-export CLI，用于导出组件/样式：

bun add -g @figma-export/cli

CLI 参考（figma-export）

导出组件和样式时，请使用 CLI：

导出组件

# Export components to SVG
figma-export components FILE_KEY -o ./output

# With config file
figma-export use-config .figmaexportrc.js

导出样式

# Export styles as CSS
figma-export styles FILE_KEY -o ./styles

配置文件示例

创建 .figmaexportrc.js：

module.exports = {
  commands: [
    ['components', {
      fileId: 'YOUR_FILE_KEY',
      onlyFromPages: ['Icons'],
      outputters: [
        require('@figma-export/output-components-as-svg')({
          output: './icons'
        })
      ]
    }]
  ]
};

然后运行：

figma-export use-config

API 参考（curl）

获取文件

FILE_KEY="your-file-key"  # From Figma URL
curl -H "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
  "https://api.figma.com/v1/files/$FILE_KEY" | jq

获取特定节点

NODE_ID="1:2"  # Node ID from Figma
curl -H "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
  "https://api.figma.com/v1/files/$FILE_KEY/nodes?ids=$NODE_ID" | jq

获取图片

curl -H "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
  "https://api.figma.com/v1/images/$FILE_KEY?ids=$NODE_ID&format=png&scale=2" | jq

获取评论

curl -H "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
  "https://api.figma.com/v1/files/$FILE_KEY/comments" | jq

获取文件版本

curl -H "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
  "https://api.figma.com/v1/files/$FILE_KEY/versions" | jq

提取设计令牌

获取样式

curl -H "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
  "https://api.figma.com/v1/files/$FILE_KEY/styles" | jq

提取颜色

#!/bin/bash
FILE_KEY=$1

# Get file with styles
STYLES=$(curl -sH "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
  "https://api.figma.com/v1/files/$FILE_KEY" | jq '.styles')

# Get style nodes
STYLE_IDS=$(echo $STYLES | jq -r 'keys | join(",")')

curl -sH "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
  "https://api.figma.com/v1/files/$FILE_KEY/nodes?ids=$STYLE_IDS" | \
  jq '.nodes | to_entries | map(select(.value.document.type == "RECTANGLE")) |
      map({
        name: .value.document.name,
        color: .value.document.fills[0].color
      })'

提取排版

curl -sH "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
  "https://api.figma.com/v1/files/$FILE_KEY" | \
  jq '[.. | objects | select(.type == "TEXT") |
      {
        name: .name,
        fontFamily: .style.fontFamily,
        fontSize: .style.fontSize,
        fontWeight: .style.fontWeight,
        lineHeight: .style.lineHeightPx
      }] | unique'

组件检查

列出组件

curl -H "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
  "https://api.figma.com/v1/files/$FILE_KEY/components" | jq

获取组件详情

COMPONENT_ID="1:234"
curl -H "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
  "https://api.figma.com/v1/files/$FILE_KEY/nodes?ids=$COMPONENT_ID" | jq

将组件导出为 SVG

curl -H "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
  "https://api.figma.com/v1/images/$FILE_KEY?ids=$COMPONENT_ID&format=svg" | jq -r '.images | to_entries[0].value'

生成代码

使用 AI 将设计转换为代码

# Get component node
NODE=$(curl -sH "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
  "https://api.figma.com/v1/files/$FILE_KEY/nodes?ids=$NODE_ID" | jq '.nodes | to_entries[0].value')

# Generate code
gemini -m pro -o text -e "" "Generate React component code from this Figma data:

$NODE

Requirements:
- Use Tailwind CSS
- TypeScript with proper types
- Match dimensions and spacing
- Include all text content
- Handle responsive behavior"

提取间距值

curl -sH "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
  "https://api.figma.com/v1/files/$FILE_KEY/nodes?ids=$NODE_ID" | \
  jq '[.. | objects | select(.type == "FRAME") |
      {
        name: .name,
        padding: {
          top: .paddingTop,
          right: .paddingRight,
          bottom: .paddingBottom,
          left: .paddingLeft
        },
        itemSpacing: .itemSpacing
      }]'

工作流模式

同步设计令牌

#!/bin/bash
# figma-sync-tokens.sh

FILE_KEY=$1
OUTPUT=${2:-"tokens.json"}

# Fetch and extract
curl -sH "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
  "https://api.figma.com/v1/files/$FILE_KEY" | \
  jq '{
    colors: [.. | objects | select(.type == "RECTANGLE" and .name | startswith("color/")) |
      {name: .name, value: .fills[0].color}],
    typography: [.. | objects | select(.type == "TEXT" and .name | startswith("text/")) |
      {name: .name, font: .style}]
  }' > $OUTPUT

echo "Tokens saved to $OUTPUT"

导出图标

#!/bin/bash
# export-icons.sh

FILE_KEY=$1
OUTPUT_DIR=${2:-"./icons"}

mkdir -p $OUTPUT_DIR

# Get all icon components
ICONS=$(curl -sH "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
  "https://api.figma.com/v1/files/$FILE_KEY/components" | \
  jq -r '.meta.components[] | select(.name | startswith("icon/")) | .node_id')

for icon_id in $ICONS; do
  # Get SVG URL
  SVG_URL=$(curl -sH "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
    "https://api.figma.com/v1/images/$FILE_KEY?ids=$icon_id&format=svg" | \
    jq -r '.images | to_entries[0].value')

  # Download
  NAME=$(echo $icon_id | tr ':' '-')
  curl -s "$SVG_URL" > "$OUTPUT_DIR/$NAME.svg"
  echo "Exported: $NAME.svg"
done

最佳实践

1. 使用 URL 中的文件键 - figma.com/file/FILEKEY/...
2. 缓存响应 - API 有速率限制
3. 使用节点 ID - 比完整文件更高效
4. 在构建时提取 - 不要在运行时提取
5. 对令牌进行版本控制 - 跟踪设计变更
6. 验证提取结果 - Figma 结构各不相同