---
order: 4
---

# Sketch 设计指引

阅读本章内容你将学到如何使用 Bruno 配套的 Sketch 文件快速设计页面，并通过定制化标注插件导出可识别组件的设计稿。

在开始之前需要先从 Bruno 主页下载 [UI 资源文件](https://bruno.ke.com/download/sketch)，得到 Sketch 文件和定制标注插件。

## 第一部分 安装插件&选取所需组件

<iframe src="//player.bilibili.com/player.html?aid=935436225&bvid=BV1PT4y1m7on&cid=478052177&page=1" width="700" height="500" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

## 第二部分 关于组件的解绑与使用

<iframe src="//player.bilibili.com/player.html?aid=765494860&bvid=BV1Gr4y1v7xV&cid=478102063&page=1" width="700" height="500" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

## 第三部分 配合 Sketch 插件导出设计稿

 <iframe src="//player.bilibili.com/player.html?aid=977959316&bvid=BV1H44y1j7v6&cid=478105607&page=1" width="700" height="500"  scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

## 第四部分 查看标注中引用的组件信息

<iframe src="//player.bilibili.com/player.html?aid=635458431&bvid=BV1vb4y1n7nn&cid=478110027&page=1" width="700" height="500" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>