.png)
.png)
.png)
功能简述
设计图转代码，是面向设计师、前端研发工程师的协作提效工具。
- 基于设计图，自动生成界面代码，减少前端研发工程师 30% 的工作量
- 页面还原度可达 98.1%，极大缩短设计师反复校对开发界面与设计稿的时间
- 支持 Html、Vue、React、小程序、Uni-app等多种代码语言
- 无需设计师进行切图标记，自动识别切图，并随整页代码打包下载
上传设计图
「设计图转代码」暂不能将 png、jpg 等格式的位图稿件转换为源代码，只支持基于设计软件输出的矢量设计稿；
目前主流的 UI 设计软件有 Sketch、MasterGo、Photoshop、XD 和 Figma，目前已完美支持 Sketch、MasterGo、Photoshop 和 Figma 的设计图转代码。
生成代码
上传设计图之后，请确保你被授予了
设计协作席位，才能进入到标注页；点击“代码” Tab栏，跳转「设计图转代码」页面。Tips如果你无法进入标注页，请联系团队超级管理员/管理员授予你设计协作席位。
配置代码
当你进入「设计图转代码」页面后，可以看到设计图和代码运行效果的对比，直观感受设计图转代码的魅力。
不同企业对代码语言的要求有所不同，你可以根据需求，选择 Html、Vue、Uni-app 等代码框架，样式代码对应可选 Css、Less、Scss。
如果你想要实现自适应效果，可以在样式代码中选择 Rem 或者 Response 。
如果你想在线上修改生成的代码，蓝湖已经支持修改 Class 命名、调整 Rem 大小，其它修改功能正在开发中。
复制代码
当配置好代码后，你可以直接「复制代码」到开发者工具，不要忘记复制公共样式哦。
如果你想复制部分代码，可以先点击设计图元素，对应的代码内容将会高亮展示，再点击「复制代码」即可。
下载代码
如果你觉得复制代码比较麻烦，想一键导出代码，可以选择「下载代码」，配置代码框架、渲染样式后，导出代码即可；
导出的代码包，包含有代码框架、样式代码（包含 Css、Rem、Response、Common ）、切图包。
