资源
Figma-to-code 资源
将 Figma 设计转化为真实代码的实用指南和开放基准测试——面向任何评估 Figma-to-code 工作流的人，而不仅仅是 MarkupGen 用户。
Figma → HTML
将 Figma frame 转化为干净、语义化的 HTML 和 CSS。
Figma → CSS
将 Figma 数值映射为不依赖框架的纯 CSS 样式表。
Figma 响应式转换
处理断点、流式布局和多设备 frame。
语义化 HTML
使用地标元素、正确的标题层级和真正的交互元素，而不是 div 堆砌。
无障碍访问
让 Figma 转出的代码可通过键盘、屏幕阅读器和真实的颜色对比度使用。
设计令牌
将 Figma 的颜色、字体和间距令牌带入生产环境 CSS。
Figma-to-code 质量评估
在上线前如何评判 AI 生成的 HTML。
Figma-to-code 基准测试
一套开放、可复现的方法论，用于衡量不同工具的 Figma-to-code 转换质量。
结果尚未公布——基准测试数据集正在准备中。上方页面记录了完整的方法论。
Figma → Code 框架
MarkupGen 支持的所有输出格式，除了纯 CSS 之外——React、Vue 以及其余的 CSS 框架。
MarkupGen 与其他工具对比
MarkupGen 与其他 Figma-to-code 及设计交付工具相比有何不同。
本中心只链接到网站上真正有用的页面——并非完整的站点索引。完整文章列表请见博客。