无法在 Figma 中找到打开插件的入口
Figma 规定,仅在你拥有当前设计稿的编辑权限时才能启用插件。
如您没有设计稿编辑权限,无法打开插件,可以复制设计稿或在 Dev Mode 下使用插件转码。
复制设计稿

或在 Dev Mode 下使用

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

元素分组不合理
- 大致的现象:设计稿转换成代码后,内容结构的划分不符合预期,
- 问题的原因:默认情况下,工具会根据 Figma 的图层结构来确定 DOM 结构的划分。实际情况是,设计师通常会将大量图层放在同一个层级,并不符合研发侧的预期。此时工具会自动对内容进行「行列分组」,能解决大部分问题,但存在依然不符合预期的情况。详细可以查看 # 如何自动分组。
- 解决的办法:此时可以通过手动为图层添加分组,来让生成的代码结构符合预期。(需要选中多个图层时可以按住 ⌘ 键)
设计稿中的图标/图形/图片被拆分成了多个 img 标签
- 大致的现象:整个图片被拆分成了多个图片
- 问题的原因:主要原因在于图层划分不合理,实际设计稿将图片分成了多个图层,并和大量其他图层放置在统一层级。具体哪些情况会转换成图片可以查看:哪些情况会转成图片
- 解决的办法:可以手动合并图层,并手动给图层设置 Export
转出结果宽高固定
- 大致的现象:工具转出的代码,默认会添加一个固定的宽高(图层的原始宽高),如下所示
- 问题的原因:主要原因是,大部分情况下由于设计稿没有配置 Auto Layout,转出的结果也是不支持响应式的,因此最外层固定原始宽高,可以保证 UI 还原保持符合预期。
- 解决的办法:可以手动配置 width: auto 来关闭横向的固定宽度
如何快速选中 Figma 图层
点击操作:在画布中或者左侧图层面板中点击可以选中图层
选中子图层:当多个图层重叠时,figma 默认会选中最外层父级图层。需要选中子图层时,可以按住 ⌘ 键
选中多个图层:按住 ⌘ 键后,选中图层,可以选择多个图层
切换选中图层:当选择一个图层后,可以通过以下快捷键切换到父/子/兄弟/图层
选中子图层:当多个图层重叠时,figma 默认会选中最外层父级图层。需要选中子图层时,可以按住 ⌘ 键
选中多个图层:按住 ⌘ 键后,选中图层,可以选择多个图层
切换选中图层:当选择一个图层后,可以通过以下快捷键切换到父/子/兄弟/图层
- 切换到子级图层:Enter
- 切换到父级图层:Shift + Enter
- 切换到下一个兄弟图层:Tab
- 切换到上一个兄弟图层:Shift + Tab