Figmagic 教程：从设计到开发的自动化工具

1. 项目介绍

Figmagic 是一个轻量级的自动化工具，它填补了 DevOps 和设计之间的空白。该项目旨在帮助开发者和设计师通过 Figma 文档自动化生成设计令牌、导出图形以及提取基于设计令牌的 React 组件。它是开放源码（MIT 许可证）且易于扩展，支持多种输出格式，适用于各种不同的项目设置。

2. 项目快速启动

安装

首先确保你已经安装了 Node.js。然后克隆项目并安装依赖：

git clone https://gitplatform.com/mikaelvesavuori/figmagic.git
cd figmagic
npm install

运行

运行 Figmagic 需要你的 Figma 文档的 URL 或文件。以下是一个基本示例，用于从本地环境文件中获取 ID 并生成令牌：

./bin/figmagic --url $(cat .env_FILE_ID)

这里，.env_FILE_ID 应替换为你实际的环境文件名，其中包含 Figma 文档的 ID。

配置

自定义配置可以通过创建 figmagic.json 文件来实现，例如：

{
  "outputFolderTokens": "./src/tokens",
  "tokensRelativeImportPrefix": "/",
  "url": "<your_figma_url>",
  "unitlessPrecision": 2,
  "fontPostscriptNames": true
}

然后通过命令行传递配置文件路径：

./bin/figmagic --config ./figmagic.json

3. 应用案例和最佳实践

一个典型的使用场景是创建一个React+Styled Components的示例项目。你可以将Figma组件输出到React代码，然后在Storybook中展示它们。参考官方示例项目，这展示了如何快速地把设计元素转化为代码并展示。

最佳实践包括保持Figma文档整洁并遵循设计令牌的命名规范，以便于自动化工具正确解析和使用。

4. 典型生态项目

• Figma API - Figmagic 利用 Figma 的 API 来读取设计数据。
• React Components - 自动生成的React组件绑定到设计令牌值，提供一致性和可维护性。
• Styled Components - 结合使用可以方便地将设计样式转换为代码。
• Storybook - 可以集成Storybook来展示和测试生成的组件。

通过这些组件和工具，Figmagic 提供了一个流畅的设计到开发的工作流程，减少了手动转化设计的工作量，提升了效率。