故障排除

无法在 Figma 中找到打开插件的入口

为什么整个页面转出结果是一张图片

• 问题的原因：如果对 Figma 图层设置了 Export，会默认将该图层及子节点转换为图片。还有哪些情况会转换成图片可以查看：哪些情况会转成图片。
• 解决的办法：因此，当发现整个页面是一张图片时，请首先查看是否配置了 Export。可以通过点击 Export 右侧的 - 按钮取消 Export

元素分组不合理

• 大致的现象：设计稿转换成代码后，内容结构的划分不符合预期，
• 问题的原因：默认情况下，工具会根据 Figma 的图层结构来确定 DOM 结构的划分。实际情况是，设计师通常会将大量图层放在同一个层级，并不符合研发侧的预期。此时工具会自动对内容进行「行列分组」，能解决大部分问题，但存在依然不符合预期的情况。详细可以查看 # 如何自动分组。
• 解决的办法：此时可以通过手动为图层添加分组，来让生成的代码结构符合预期。（需要选中多个图层时可以按住 ⌘ 键）

设计稿中的图标/图形/图片被拆分成了多个 img 标签

• 大致的现象：整个图片被拆分成了多个图片
• 问题的原因：主要原因在于图层划分不合理，实际设计稿将图片分成了多个图层，并和大量其他图层放置在统一层级。具体哪些情况会转换成图片可以查看：哪些情况会转成图片
• 解决的办法：可以手动合并图层，并手动给图层设置 Export

转出结果宽高固定

• 大致的现象：工具转出的代码，默认会添加一个固定的宽高（图层的原始宽高），如下所示

• 问题的原因：主要原因是，大部分情况下由于设计稿没有配置 Auto Layout，转出的结果也是不支持响应式的，因此最外层固定原始宽高，可以保证 UI 还原保持符合预期。
• 解决的办法：可以手动配置 width: auto 来关闭横向的固定宽度

如何快速选中 Figma 图层

• 切换到子级图层：Enter
• 切换到父级图层：Shift + Enter
• 切换到下一个兄弟图层：Tab
• 切换到上一个兄弟图层：Shift + Tab