Figma Code Connect 1.3.0 版本发布：增强设计系统与代码的桥梁

Figma Code Connect 是一个革命性的工具，它能够在设计工具 Figma 和代码库之间建立直接联系，让设计师和开发者能够更高效地协作。通过自动生成代码片段和文档，Code Connect 极大地简化了设计系统到代码的实现过程。

主要功能增强

JSX 连接文件支持

1.3.0 版本新增了对 JSX 格式 Figma 连接文件的支持。这意味着开发者现在可以使用更熟悉的 JSX 语法来定义 Figma 组件与代码组件之间的映射关系，降低了学习成本，提高了开发效率。

自动化访问令牌管理

新版本改进了 Figma 访问令牌的管理方式：

• 新增自动创建或追加访问令牌到项目 .env 文件的功能
• 简化了项目配置流程
• 提高了安全性，避免令牌被意外提交到版本控制

组件管理优化

针对包含大量 Figma 组件的情况，向导界面做了显著改进：

• 现在组件会按 Figma 文件中的页面分组显示
• 提高了大型设计系统的可管理性
• 减少了寻找特定组件的时间

变体限制增强

变体系统现在支持布尔类型的属性限制，这使得：

• 组件变体的定义更加灵活
• 可以创建更精确的组件行为约束
• 减少了不合理的变体组合可能性

平台兼容性扩展

1.3.0 版本增强了对多种代码托管平台的支持：

• 现在可以正确生成 Bitbucket、Gitlab 和 Azure DevOps 的源代码文件链接
• 统一了不同平台间的用户体验
• 使团队无论使用哪种代码托管方案都能获得一致的 Code Connect 体验

问题修复与改进

通用修复

• 修复了向导中文件匹配提示完成时显示错误图标的问题
• 为 SwiftUI 中的 @FigmaEnum 声明添加了默认值
• 提高了 CLI 工具的稳定性

React 相关改进

• 修复了嵌套对象和数组在代码片段中渲染不正确的问题
• 解决了将函数作为值传递给 figma.boolean 时的类型问题
• 向导现在支持每个文件多个导出，提高了灵活性

Storybook 集成增强

• 现在支持为不同示例设置不同的属性
• 新增对 links 和 imports 的支持
• 使 Storybook 文档更加丰富和实用

技术实现亮点

这次更新在底层实现上做了多项优化：

• 改进了类型系统处理，特别是对复杂数据结构的支持
• 增强了错误处理和用户反馈机制
• 优化了代码生成算法，提高了输出质量

升级建议

对于正在使用 Code Connect 的团队，建议尽快升级到 1.3.0 版本以享受这些改进。特别是：

• 使用大型设计系统的团队会受益于新的组件分组功能
• 需要更灵活变体控制的团队应该利用新的布尔属性限制
• 使用非 GitHub 代码托管平台的团队将获得更好的集成体验

Figma Code Connect 1.3.0 的这些改进进一步巩固了它作为设计系统与代码之间桥梁的地位，使设计到开发的流程更加顺畅高效。