Material UI Sync：导出主题代码的 Figma 插件

在过去的几年中，我们看到设计师越来越多地寻求更直接地参与并更有效地协作开发过程的方法。《Material UI Figma 设计套件》是我们满足这些需求的首次尝试，它为设计师提供了 Material UI 组件的一对一模型，用于实现自定义设计系统。 但是，它本身并不足以弥合设计和代码之间的差距——开发人员仍然需要从头开始编写设计师的自定义样式。

这让我们思考：如果设计师可以直接从他们的设计软件生成可用于生产的代码，并将其交给使用 Material UI 代码库的开发人员，会怎么样？

这就是我们创建 Sync 的原因，Sync 是一款 Figma 插件，用于生成可以直接复制粘贴到您的 Material UI 应用程序主题中的样式。 我们很高兴分享 Beta 版本现已在 Figma 上提供。 🚀

让我们来看看它的一些主要功能

主题定制

Figma 的本地变量显着地成熟了设计令牌的使用，使其可以更紧密地镜像 Material UI。 Sync 依赖于这些本地变量来生成与每个元素和状态相对应的代码。（因此，它需要 v5.16.0 或更高版本的 Material UI 设计套件；早期版本不支持本地变量。）

访问文档以了解如何将生成的代码插入到您的主题文件中。

组件定制

您可以在设计套件中完全自定义组件在多种状态下的外观，然后生成相应的主题代码。 这是最令人兴奋的功能之一，因为它使设计师可以使用他们已经熟悉的视觉设计工具来更改代码本身。

快速 Storybook 预览

Material UI Sync 插件还内置了一个嵌入式 Storybook 预览面板，以便您可以方便地试用您的更改，并查看它们如何与组件 API 中提供的其他 props 和状态交互。

立即试用 Sync

立即获取 Material UI Sync 的 Beta 版本，可在 Figma Community 中免费试用！

还有很多工作要做，我们期待收到多年前要求开发此插件的所有用户的反馈。

• 查看 Sync 插件 和 Material UI 设计套件 的文档。
• 如果您有任何反馈，我们很乐意听取您的意见。

设计愉快！ 👨‍🎨