云端设计系统实践：零基础设计师如何用腾讯云COS+CDN实现设计资产自动化交付

{
  "color": {
    "primary": "#0052D9",
    "success": "#00A870",
    "warning": "#ED7B2F",
    "neutral": {
      "100": "#F3F3F3",
      "900": "#1A1A1A"
    }
  },
  "font": {
    "family": "PingFang SC, Microsoft YaHei, sans-serif",
    "size": {
      "sm": "12px",
      "base": "14px",
      "lg": "16px"
    }
  },
  "spacing": {
    "xs": "4px",
    "sm": "8px",
    "md": "16px",
    "lg": "24px"
  }
}

const axios = require('axios');
const fs = require('fs');
const COS = require('cos-nodejs-sdk-v5');

// Figma配置
const FIGMA_TOKEN = '你的Personal Access Token';
const FILE_KEY = '你的文件Key';

// 腾讯云COS配置
const cos = new COS({
  SecretId: '你的SecretId',
  SecretKey: '你的SecretKey',
});

// 1. 获取Figma变量
async function fetchVariables() {
  const url = `https://api.figma.com/v1/files/${FILE_KEY}/variables/local`;
  const response = await axios.get(url, {
    headers: { 'X-Figma-Token': FIGMA_TOKEN },
  });
  return response.data;
}

// 2. 解析为设计Token JSON格式
function parseVariables(variableData) {
  // 简化逻辑：将Figma变量映射到我们的tokens结构
  const tokens = { color: {}, font: {}, spacing: {} };
  const { variables } = variableData;
  for (const [id, variable] of Object.entries(variables)) {
    const name = variable.name; // 如 "Colors/Primary"
    const value = variable.valuesByMode[Object.keys(variable.valuesByMode)[0]]; // 取第一个Mode
    // 根据name前缀分类
    if (name.startsWith('Colors/')) {
      const key = name.replace('Colors/', '').toLowerCase();
      tokens.color[key] = value;
    } else if (name.startsWith('Typography/')) {
      // 类似处理
    } else if (name.startsWith('Spacing/')) {
      const key = name.replace('Spacing/', '').toLowerCase();
      tokens.spacing[key] = value + 'px';
    }
  }
  return tokens;
}

// 3. 上传至腾讯云COS
async function uploadToCOS(content, key) {
  const bucket = 'your-bucket-1234567890';
  const region = 'ap-shanghai';
  return new Promise((resolve, reject) => {
    cos.putObject({
      Bucket: bucket,
      Region: region,
      Key: `tokens/${key}`,
      Body: JSON.stringify(content, null, 2),
      ContentType: 'application/json',
    }, (err, data) => {
      if (err) reject(err);
      else resolve(data);
    });
  });
}

// 主流程
(async () => {
  const raw = await fetchVariables();
  const tokens = parseVariables(raw);
  await uploadToCOS(tokens, 'latest/tokens.json');
  // 同时保存版本号（如使用package.json的version）
  console.log('Token导出并上传成功！');
})();

npm install axios cos-nodejs-sdk-v5
node export-tokens.js

https://assets.your-domain.com/tokens/latest/tokens.json

npm install -D style-dictionary

const StyleDictionary = require('style-dictionary');
const axios = require('axios');
const fs = require('fs');
const path = require('path');

const TOKEN_URL = 'https://assets.your-domain.com/tokens/latest/tokens.json';

async function build() {
  // 1. 下载Token
  const response = await axios.get(TOKEN_URL);
  const tokens = response.data;
  const tempFile = path.join(__dirname, 'temp-tokens.json');
  fs.writeFileSync(tempFile, JSON.stringify(tokens, null, 2));

  // 2. 配置Style Dictionary
  const sd = StyleDictionary.extend({
    source: [tempFile],
    platforms: {
      css: {
        transformGroup: 'css',
        buildPath: 'dist/css/',
        files: [{ destination: 'variables.css', format: 'css/variables' }],
      },
      scss: {
        transformGroup: 'scss',
        buildPath: 'dist/scss/',
        files: [{ destination: '_variables.scss', format: 'scss/variables' }],
      },
      js: {
        transformGroup: 'js',
        buildPath: 'dist/js/',
        files: [{ destination: 'tokens.js', format: 'javascript/es6' }],
      },
    },
  });

  // 3. 构建
  sd.buildAllPlatforms();
  console.log('样式文件生成完成');
}

build();

npx storybook@latest init

npm run build-storybook

npm install -g @cloudbase/cli
cloudbase login
cloudbase hosting deploy storybook-static -e 你的环境ID

// index.js - 云函数入口
exports.main_handler = async (event, context) => {
  // 1. 从event中判断是否为Figma回调（若使用Webhook）
  // 2. 执行导出Token → 构建样式 → 上传COS → 部署Storybook
  // 3. 记录日志并返回
  console.log('触发设计系统更新流程');
  // ... 调用之前封装的模块
  return { statusCode: 200, body: 'OK' };
};

design-system-automation/
├── export-tokens.js       # Figma导出并上传COS
├── build-styles.js        # 下载Token → Style Dictionary构建
├── upload-storybook.js    # 部署Storybook至静态托管
├── scf-handler.js         # 云函数入口（整合上述流程）
├── package.json
└── .env                   # 存放密钥（不提交Git）

FIGMA_TOKEN=xxx
FILE_KEY=xxx
COS_SECRET_ID=xxx
COS_SECRET_KEY=xxx
COS_BUCKET=xxx
COS_REGION=xxx
CDN_BASE_URL=https://assets.your-domain.com