推荐开源项目：Auto Theme - 灵活的Figma设计主题转换插件

推荐开源项目：Auto Theme - 灵活的Figma设计主题转换插件

Auto Theme 是一款专为Figma设计团队打造的插件，它能帮助你快速地将设计稿从一种颜色映射自动转化为另一种，大大提升了设计工作流的效率。

项目技术分析

• React + Webpack：基于React进行UI开发，搭配Webpack实现构建与优化。
• TypeScript：采用TypeScript确保代码质量和类型安全。
• TSLint：通过TSLint保证编码规范和一致性。
• Prettier precommit hook：集成Prettier，使得每次提交前都会自动格式化代码，保持代码风格统一。

项目运行与本地开发

1. 安装依赖：yarn
2. 开启Webpack监视模式：yarn build:watch

要调整插件界面，修改src/app/components/App.tsx；若要操作Figma API，编辑src/plugin/controller.ts。

团队协作与使用

• 按照上述步骤完成本地设置
• 自定义你的主题配置（参考Theme Object部分）
• 在Figma中创建新插件，选择该Auto Theme插件manifest文件
• 上传资产目录中的插件图像，然后内部发布

工作原理

Auto Theme在选中一个或多个帧时，遍历每个图层，并按其类型（如文本、矢量、矩形等）进行处理。对于填充有颜色的图层，它获取节点的Style ID，然后从主库中导入对应样式。如果找到匹配的主题对象，就会更新节点颜色。

主题对象配置

主题对象是一个键值对，用于映射颜色。例如：

'4b93d40f61be15e255e87948a715521c3ae957e6': {
  name: "Dark / Header / Primary (White)",
  mapsToName: "Light / Header / Primary (900)",
  mapsToKey: '3eddc15e90bbd7064aea7cc13dc13e23a712f0b0',
}

通过style.key替换为mapsToKey，从而实现颜色之间的切换。如果你需要知道风格键，可以使用配套的Inspector Plugin。

此外，该插件还支持组件实例的切换，只需在主题对象中指定组件的键即可。

多主题支持

你可以创建多个主题并导入，然后在UI上添加按钮，调用控制器来切换主题。

应用场景

Auto Theme适用于需要频繁更换设计主题的场景，尤其是当你有多种配色方案（如深色、浅色模式）的设计项目时，它能帮你轻松地在不同主题间切换，提高工作效率。

项目特点

1. 自动化颜色转换：一键转换所有相关颜色，节省大量手动修改时间。
2. 组件实例支持：可切换组件实例，适应不同的设计需求。
3. 多主题管理：支持创建和切换多个主题，灵活应对设计变化。
4. 强大的工具链：利用TypeScript、TSLint和Prettier，确保代码质量与格式。

无论是个人设计还是团队协作，Auto Theme都是你实现高效设计流程的得力助手。现在就尝试一下这个开源项目，让设计变得更简单！