Figma 素材 导出

命令

# 一般就只用这个 导出 文件到项目
npx figma-export-kit export --glob <string...>

# 列出 匹配的 文件
npx figma-export-kit ls --glob <string...>
# 生成 默认配置文件
npx figma-export-kit init

npx figma-export-kit login
npx figma-export-kit logout

配置

{
  // oauth 配置 非必填
  "oauth": {
    "client_id": "31SUr6MkeWEWb0F4SIQAl0",
    "client_secret": "Q19FVnu7TxQtHSQs0YeLjQtRW8lQKs"
  },
  // figma personalAccessToken 非必填
  "personalAccessToken": "string",
  // 获取图片的文件来源 非必填
  // https://figma.com/file/IHeUVASuB1iUuDmGoIisgw 👈
  "fileKey": "IHeUVASuB1iUuDmGoIisgw",
  // 全局 默认导出路径 非必填
  "outDir": "./apps/app-root-config/public/external_asset",
  "handlers": [
    {
      // glob 匹配表达式 只支持 * 不支持 [] ** ? 🐶
      "glob": "external_asset/e-commerce/*",
      // "jpg" | "png" | "svg" | "pdf"
      "format": "svg",
      /**
       * 从 glob 第一个 统配符 开始匹配
       * eg:
       * figma: "external_asset/e-commerce/ali.svg"
       * glob: "external_asset/e-commerce/*"
       * outDir: "e-commerce-icon/"
       * 实际导出路径为 "e-commerce-icon/ali.svg"
       */
      "outDir": "string",
      // ui 设置了 导出 figma 会加个前缀，导出时会自动去除
      "prefix": "icon=",

      // svg 专属配置 👇

      // svg 属性替换（就是简单的字符串替换）
      "attrs": {
        "fill='black'": "fill='currentColor'"
      },
      // svgo 配置 https://www.npmjs.com/package/svgo
      "svgo": {
        "plugins": [{ "name": "removeXMLProcInst" }]
      }
    }
  ]
}