Figma 不再是设计师专用的工具。随着开发模式的引入，前端工程师现在可以通过一种简化的方法来有效地提取设计信息。本文介绍了平滑从 Figma 到代码的桥梁的实用技术。
通过开发模式获取准确的设计信息
Figma 的开发模式是针对开发人员优化的视图。使用文件视图右上角的开关将其打开，或点击 Shift+D。
在开发模式下你可以做什么
- 检查属性：单击任何元素即可查看属性面板中显示的宽度、高度、填充、字体大小、颜色等。
- 自动生成的 CSS：CSS 属性自动显示在面板中，以便您可以将它们直接复制到代码中。
- 导出资源：单击图像图标将其导出为 SVG 或 PNG。
请记住，开发模式中显示的 CSS 仅供参考。您应该调整它以适应您的实际组件架构。
共享设计令牌以保持一致性
同步 Figma 和代码库之间的设计标记（例如颜色、字体大小和间距）可以防止设计偏差。
Figma 代币插件
Tokens Studio for Figma（以前称为 Figma Tokens）是一个插件，可让您以 JSON 形式集中管理设计令牌。
- 安装插件并定义颜色、排版和间距的标记。
- 导出为 JSON。
- 将 JSON 转换为样式词典或 Tailwind CSS 配置文件。
{
"color": {
"brand": {
"primary": { "value": "#3b82f6" },
"secondary": { "value": "#10b981" }
}
},
"spacing": {
"md": { "value": "16px" }
}
}
将此 JSON 输入样式字典，您可以生成 CSS 自定义属性、SCSS 变量、Tailwind 配置等。
设计师到开发人员的平滑交接
即使使用最好的工具，有效的交接也需要设计人员和开发人员之间的协调。
标准化组件命名
将 Figma 图层名称与代码中的组件名称相匹配可以减少搜索时间。如果 Figma 中的图层名为 Button/Primary，则在代码中将其命名为 ButtonPrimary 或 Button.Primary。
使用自动布局
Figma 的自动布局功能反映了 CSS Flexbox 行为。要求设计人员使用自动布局，以便将间距和对齐意图直接转化为代码。
在 Figma 中发表评论
在开发过程中，会出现诸如“这个填充值是多少？”之类的问题。最好留下相关 Figma 元素的注释。这比发送 Slack 消息可靠得多。
值得安装的插件
| 插件 | 目的 |
|---|---|
| Figma 代币 | 设计代币管理和导出 |
| 阿尼玛 | 将 Figma 设计转换为 React / Vue 代码 |
| 齐柏林 | 与 Figma 集成的传统切换工具 |
| Figma 的 Tailwind CSS | 在设计上显示 Tailwind 类名称 |
摘要
从 Figma 迁移到代码的最实用的工作流程是通过 Dev 模式提取准确的设计信息并使用 Figma 代币共享设计代币。设计人员和开发人员之间拥有共享语言（无论是令牌、命名约定还是两者兼而有之）是高效切换过程的关键。从这些技术中的一两个开始，然后从那里开始逐步发展。