Figmagic 项目使用教程

Figmagic 项目使用教程

figmagicFigmagic is the missing piece between DevOps and design: Generate design tokens, export graphics, and extract design token-driven React components from your Figma documents.项目地址:https://gitcode.com/gh_mirrors/fi/figmagic

1. 项目的目录结构及介绍

Figmagic 项目的目录结构如下：

figmagic/
├── bin/
├── docs/
├── examples/
├── src/
│   ├── commands/
│   ├── config/
│   ├── core/
│   ├── elements/
│   ├── templates/
│   └── utils/
├── .env.example
├── .gitignore
├── .npmrc
├── .nvmrc
├── .prettierrc
├── .releaserc.json
├── .yarnrc
├── CHANGELOG.md
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── SECURITY.md
├── package.json
└── tsconfig.json

目录介绍

• bin/: 包含可执行文件。
• docs/: 包含项目文档。
• examples/: 包含示例项目。
• src/: 包含项目源代码。
  • commands/: 包含命令行相关的代码。
  • config/: 包含配置相关的代码。
  • core/: 包含核心功能的代码。
  • elements/: 包含元素相关的代码。
  • templates/: 包含模板文件。
  • utils/: 包含工具函数。
• .env.example: 环境变量示例文件。
• .gitignore: Git 忽略文件配置。
• .npmrc: npm 配置文件。
• .nvmrc: nvm 配置文件。
• .prettierrc: Prettier 代码格式化配置。
• .releaserc.json: 发布配置文件。
• .yarnrc: Yarn 配置文件。
• CHANGELOG.md: 变更日志。
• CODE_OF_CONDUCT.md: 行为准则。
• CONTRIBUTING.md: 贡献指南。
• LICENSE: 许可证。
• README.md: 项目说明文档。
• SECURITY.md: 安全政策。
• package.json: 项目依赖和脚本配置。
• tsconfig.json: TypeScript 配置文件。

2. 项目的启动文件介绍

Figmagic 的启动文件位于 bin/ 目录下。主要的启动文件是 figmagic，它是一个可执行脚本，用于启动 Figmagic 工具。

启动文件介绍

• bin/figmagic: 这是一个 Node.js 脚本，用于执行 Figmagic 工具的命令。

3. 项目的配置文件介绍

Figmagic 的配置文件主要包括 .env 文件和 package.json 文件中的配置。

配置文件介绍

• .env: 环境变量文件，用于存储敏感信息和配置选项。示例文件为 .env.example。
• package.json: 项目依赖和脚本配置文件。包含项目的依赖包、脚本命令和其他元数据。

配置选项

• FIGMA_URL: Figma 文档的 URL。
• TOKENS_RELATIVE_IMPORT_PREFIX: 相对导入路径前缀，用于 CSS 文件导入设计令牌。
• UNITLESS_PRECISION: 无单位值的精度，定义小数位数。

通过这些配置文件和选项，可以灵活地配置和使用 Figmagic 工具。

figmagicFigmagic is the missing piece between DevOps and design: Generate design tokens, export graphics, and extract design token-driven React components from your Figma documents.项目地址:https://gitcode.com/gh_mirrors/fi/figmagic