Material UI for Figma
增强 Material UI 和 Figma 之间设计师与开发者之间的协作。
开始使用
Material UI for Figma 包含 Figma 中库的 React 组件的表示，以便设计师和开发者可以更有效地沟通和迭代。此设计工具包包括
- 与 Material UI 具有相同设计的组件
- Material Design 未涵盖的其他组件和功能
- 来自 React 库的共享术语，用于 props、变量、设计 tokens 和其他值
社区版与完整版
Material UI 设计工具包在社区（免费）版本和完整（付费）版本中提供。
| 社区版 | 完整版 | |
|---|---|---|
| 没有自定义的组件 | 全部 | 全部 |
| 具有自定义的组件 | 4 | 全部 |
| Figma 变量 | - | ✅ |
安装完整版
首先解压包含 .fig 文件的 .zip 压缩包。然后，您可以按照Figma 的导入指南或将其添加到您的团队库。
更新日志
访问 GitHub 上的 Releases 选项卡以跟踪新的设计工具包版本。
主题
本地变量
设计工具包使用 Figma 的本地变量来创建类似于 Material UI 代码主题结构的样式集合。按照以下视频中的步骤查看所有可用的变量
自定义颜色
使用变量面板自定义颜色，如下面的视频所示
自定义排版
排版自定义使用本地样式而不是本地变量。体验与修改颜色类似，如下面的视频所示
在浅色和深色模式之间切换
设计工具包使用 Figma 的本地变量，让您在浅色和深色之间切换变量模式，如下面的视频所示
组件
编辑主组件
您可以使用 Similayer 插件一次选择多个共享某些属性的组件。
表格组件
添加新列
下面的视频演示了如何通过从其行组件中分离单元格来添加新列，从而允许您自由移动内容。
在主组件中添加新列
表格和 Data Grid 组件默认带有有限数量的列。下面的视频演示了如何通过直接在主组件上复制单元格来添加新列
代码同步（beta）
您可以使用Figma 的同步插件将主题 tokens 和组件自定义导出到代码。设计工具包的构建尽可能接近 React 组件，使其与代码流畅集成。
通过访问主题和默认主题查看器页面，了解有关 Material UI 主题结构的更多信息。
使用新的设计工具包版本
我们通常不会在更新中发布重大更改——我们添加新内容。如果您需要替换已更新的单个组件，则有几个选项
- 将新版本的设计工具包添加为库，并使用新的 Figma 库交换功能。组件在两个库中必须具有相同的名称。
- 观察新组件并将更改重新应用于现有项目。当您需要更新多个项目时，这是推荐的方法。
- 将新组件复制并粘贴到您的现有项目中，为其指定不同的临时名称，然后将 tokens 重新链接到新组件。当使用选择类似插件时，这不应超过五分钟。然后，您可以删除旧组件并更新新组件名称。
反馈和错误报告
如果您有任何反馈，我们很乐意听取您的意见。
集成
Anima
使用 Anima，您可以毫不费力地将您的 Figma 设计转换为 Material UI 代码。Anima 智能地将您在 Figma 中的设计组件与最相关的代码 API 匹配，确保生成的代码干净、可重用且可用于生产。Anima 支持 Figma 和 VS Code，因此您可以选择最适合您的工作流程。
- 使用 Anima Figma 插件直接在 Figma 中转换您的设计。
- 使用 Anima VS Code 扩展程序 (Frontier) 在您的开发环境中无缝生成和编辑 Material UI 代码。
访问 Anima 了解更多详情。
Quest
Quest 提供了与此设计工具包的本地集成。
当您使用此工具包设计组件时，您可以使用 Quest 插件将您的 Figma 设计转换为 Material UI 代码。生成的代码应该是干净且可用于生产的。
访问 Quest 文档 了解更多详情。