生成UI图-码前使用教程||一站式智能设计平台

产品价格教程 APP定制开发

登录注册

DevBefore帮助中心

应用管理

· 选择模板创建应用

· 选择空白模板创建应用

· 修改应用名称

· 删除应用

· 查看应用信息

· 移交应用

· 查看应用移交记录

· 保存为模板

· 查看协作应用

· 视图切换

需求梳理

· 功能概览

· 添加、修改应用模块

· 删除模块

· 添加需求页面

· 删除需求页面

· 编辑需求页面

· 添加页面功能点

· 删除页面功能点

· 编辑页面功能点

· 添加功能描述

· 删除功能描述

· 编辑功能描述

· 需求页面关联原型页面

· 快速排查未关联原型页面的需求页面

· 将需求页面保存到我的需求库

· 版本管理

· 导出

· 导入

· 一键生成应用原型

原型设计

· 功能概览

快速上手

· 添加页面

· 设置页面外观

· 添加组件

· 使用图标

· 添加交互链接

· 删除页面交互链接

· 演示分享

· 原型版本管理

· 原型页面保存到我的原型库

· 原型库素材引用

页面

· 调整页面分组

· 调整页面顺序

· 展开、折叠页面

· 删除页面找回

· 修改页面名称

· 设置页面横屏

· 设置页面高度（长页面）

· 克隆（复制+粘贴）页面

· 标记页面颜色

组件

· 单行/多行文字

· 矩形

· 图片

· 线条

· 按钮

· 单行/多行输入框

· 链接区域

· 其他组件

· 添加、管理自定义组件

UI设计

· 功能概览

· 生成UI图

· 导入UI图

· UE&UI比对

· 下载切图

· 添加、隐藏、查看/删除标注

· 分享

· 版本管理

我的需求库

· 创建需求分类

· 修改分类名称

· 删除需求分类

· 添加需求页面

· 添加页面组

· 需求页面关联原型页面

· 需求页面复制到其他分类

我的原型库

· 创建原型分类

· 修改分类名称

· 删除原型分类

· 添加原型页面

我的模板库

· 添加模板

· 查看模板信息

· 修改模板名称

· 删除模板

团队协作

· 成员权限介绍

· 绑定邮箱

· 邀请成员

· 移除成员

· 修改成员权限

· 应用添加协作成员

欢迎使用DevBefore

生成UI图

搜全站

搜本篇

生成UI图

将应用原型图，导入到Sketch设计工具中，方便UI基于应用原型图进行UI设计。
提示：请使用70及以上版本的Sketch

1、在「原型工具」右上方，点击“生成UI图”，在弹窗内点击下载Sketch插件

预览

2、成功下载后在本地文件中点击打开，即可安装成功

预览

3、打开SKetch，在顶部工具栏->「插件」->「DevBefore」选择「生成SKetch」

预览

4、登录【码前】账号并选择应用名称后点击“确定”，即可将应用原型页面导入到SKetch

预览