Figma 设计 Token 转 Tailwind：颜色、字体与间距

快速回答： Figma 中的颜色/文字/间距数值，会通过与 Tailwind 自身的工具类取值体系做匹配来转换——找最接近的间距档位、最接近的颜色、匹配的字号。当某个数值不落在这套取值范围内时，输出会回退到类似 bg-[#f4f4f5] 这样的任意值类，而不是凭空发明一个你配置文件里并不存在的主题颜色。

Figma 文件里的"设计 Token"，具体指什么

在讲映射关系之前，有必要先明确在 Figma 里什么算 Token，什么只是一次性数值：

• 颜色样式——一个保存下来、有名字的填充色（比如 "Gray/100"），在文件中被一致地应用，而不是随手选一次、之后再没复用过的十六进制值。
• 文字样式——字体、字号、字重和行高的一个保存组合，在标题或正文中被一致地应用。
• 间距数值——通常不会像样式那样被"保存"下来，但在多个 frame 中反复使用的一致 Auto Layout gap/padding 数字也算在内。

只有当 Figma 文件确实一致地使用这些 Token 时，转换到 Tailwind 才会效果最好。如果每个按钮都用同一个保存的 "Primary" 颜色样式，就能干净地转换成一个到处复用的 Tailwind 类。如果五个按钮各自用了略有差异的一次性蓝色，就会转换成五个略有差异的 Tailwind 值——因为设计稿里本来就是这样，这不是转换环节的缺陷。

数值如何解析到 Tailwind 的取值体系

Tailwind 的价值主张，是为间距、颜色和字体提供一套受限、预定义的取值体系——而不是一个开放的调色板。转换到这套体系里，意味着"匹配"而不是"发明"：

这是一个刻意的取舍：MarkupGen 的 Tailwind 输出是对照 Tailwind 真实的默认取值体系来解析的，而不是生成一份自定义的 tailwind.config 主题去强行让每个数值都"对得上"。这样能让输出如实反映设计的真实数值——一个超出取值范围的颜色，会以任意值类的形式明显地体现出来，这是一个值得和设计师确认的信号，看看它是否应该被调整进共享调色板，而不是一个悄无声息的四舍五入误差。

这对审查导出结果意味着什么

• 任意值类是一个信号，不是一个 bug。 输出里出现一堆 bg-[#...] 这样的类，通常说明设计稿本身存在应该合并进共享样式的、近乎重复的一次性颜色——这值得反馈给设计团队，而不是只在代码层面"修掉"。
• 检查重复组件之间的间距一致性，因为 Tailwind 的取值体系是逐个数值独立四舍五入的——如果设计稿在两个不同 frame 里用了相同的数字，那视觉上相同的间距就应该解析成同一个类。
• 如果项目已经有一份 tailwind.config 主题，把生成的任意值和它做交叉比对——一个相对于 Tailwind 默认调色板看起来超出范围的颜色，可能在你自己的配置里已经是一个有名字的颜色，值得手动替换回去。

关于完整的工作流程——插件导出、AI 生成、编辑、选择输出格式——可参考 Figma to Tailwind CSS: A Practical Conversion Guide。

在你自己的设计稿上试试看

想知道自己文件里的颜色和间距转换起来有多一致，最快的办法就是拿一个真实的 frame 实际跑一遍。免费试用 MarkupGen，或查看 Figma to Tailwind converter 页面，了解具体包含哪些内容。