Figmagic 4.5.14版本发布：CSS变量作用域优化与SCSS支持

项目简介

Figmagic是一个设计系统工具，它能够将Figma设计文件自动转换为可用的代码资源，包括设计Token、React组件、样式变量等。作为设计系统与前端开发之间的桥梁，Figmagic极大地提升了设计到代码的转换效率，确保设计与实现的一致性。

版本亮点

CSS变量命名空间优化

在之前的版本中，当设计文件中存在多个Frame（画框）时，生成的CSS变量可能会出现命名冲突问题。4.5.14版本通过为CSS变量添加Frame名称前缀，有效解决了这一问题。

例如，原本可能生成的变量：

--color-primary: #ff0000;

现在会根据Frame名称生成更具语义化的变量名：

--button-color-primary: #ff0000;
--header-color-primary: #ff0000;

这一改进使得：

1. 变量命名更加清晰，易于理解其来源和用途
2. 避免了不同Frame中相同语义变量名的冲突
3. 提高了代码的可维护性和可读性

新增SCSS变量输出支持

4.5.14版本新增了对SCSS变量的支持，为使用Sass预处理器的项目提供了更好的集成体验。SCSS变量输出功能包括：

1. 完整的变量类型支持（颜色、间距、字体等）
2. 与CSS变量类似的命名空间处理
3. 符合Sass语法规范的输出格式

生成的SCSS变量示例：

$button-color-primary: #ff0000;
$header-font-size-lg: 1.5rem;

这一特性特别适合：

• 已有Sass技术栈的项目
• 需要利用Sass功能（如混入、函数等）增强样式系统的团队
• 偏好Sass语法和工具链的开发者

技术实现优化

测试与Mock服务更新

版本更新了测试相关的Mock服务处理，确保测试用例能够正确模拟API响应。具体包括：

1. 更新了MSW(Mock Service Worker)的配置，适配最新版本API
2. 修复了因依赖更新而失效的测试用例
3. 增强了测试的稳定性和可靠性

CI工作流改进

持续集成流程得到了优化，包括：

1. 更新了工作流配置以适应新的测试环境
2. 优化了构建和测试的执行效率
3. 确保在不同Node.js环境下的兼容性

升级建议

对于现有用户，建议在升级前：

1. 检查项目中是否有依赖CSS变量命名方式的代码
2. 评估SCSS变量是否能带来开发效率的提升
3. 在开发环境先行测试，确保兼容性

新用户可以借此版本开始尝试Figmagic，特别是：

• 正在构建设计系统的团队
• 需要保持设计与代码同步的项目
• 寻求自动化设计到代码流程的开发者

总结

Figmagic 4.5.14版本通过CSS变量作用域优化和SCSS支持两大特性，进一步强化了其作为设计系统工具的核心价值。这些改进不仅解决了实际使用中的痛点，还为不同技术栈的团队提供了更多选择。随着测试和CI流程的持续优化，Figmagic的稳定性和可靠性也得到了提升，值得设计系统和前端工程团队关注和采用。