故障排除

与研发相关的常见故障以及解决办法

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

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

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

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

元素分组不合理

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

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

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

转出结果宽高固定

  • 大致的现象:工具转出的代码,默认会添加一个固定的宽高(图层的原始宽高),如下所示
  • 问题的原因:主要原因是,大部分情况下由于设计稿没有配置 Auto Layout,转出的结果也是不支持响应式的,因此最外层固定原始宽高,可以保证 UI 还原保持符合预期。
  • 解决的办法:可以手动配置 width: auto 来关闭横向的固定宽度

如何快速选中 Figma 图层

点击操作:在画布中或者左侧图层面板中点击可以选中图层
选中子图层:当多个图层重叠时,figma 默认会选中最外层父级图层。需要选中子图层时,可以按住 ⌘ 键
选中多个图层:按住 ⌘ 键后,选中图层,可以选择多个图层
切换选中图层:当选择一个图层后,可以通过以下快捷键切换到父/子/兄弟/图层
  • 切换到子级图层:Enter
  • 切换到父级图层:Shift + Enter
  • 切换到下一个兄弟图层:Tab
  • 切换到上一个兄弟图层:Shift + Tab

© 2021 - 2023 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED

  • 开始
    • 介绍
    • 快速开始
    • 选型对比
    • 相关术语
    • 常见问题
    • 更新日志
  • 研发使用手册
    • 代码转译
    • 标记图层
    • 标记表格
    • 标记组件库
    • 标记图标库
    • 设计稿检查
    • 转码插件
    • 故障排除
    • 基础转换原理
    • 支持组件列表
    • 全局设置
  • 设计使用手册
    • 使用 Semi Variants
    • 自定义 Variants
    • 设计稿规范
    • 使用 Table 组件
    • 使用 Form 组件
    • 迁移旧设计稿
  • 更多
    • 联系我们
    • 路线图
    • JSON Schema
    • 已知问题