# 设计资源

### 介绍

这里提供了 Vant 现有的设计资源，更多资源还在整理中。

### 组件设计稿（Sketch）

包含 Sketch 格式的组件设计规范、色彩规范。

<img src="https://img.yzcdn.cn/vant/design-components-0321.png" style="width: 80%; box-shadow: 0 1px 2px rgba(0,0,0,.2)">

<a class="design-download" href="https://github.com/youzan/vant/blob/dev/docs/assets/design.sketch?raw=true">下载</a>

> 提示：目前 Sketch 中部分组件仍为旧版样式，我们正在梳理新版设计规范，尽请期待！

### 图标设计稿（Sketch）

包含 Sketch 格式的图标库资源。

<img src="https://img.yzcdn.cn/vant/design-icons-0321.png" style="width: 80%; box-shadow: 0 1px 2px rgba(0,0,0,.2)">

<a class="design-download" href="https://github.com/youzan/vant-icons/blob/master/assets/icons.sketch?raw=true">下载</a>

### Axure 元件库

Axure 元件库，由社区的 [@axure-tczy](https://github.com/axure-tczy) 同学贡献。

<img src="https://img.yzcdn.cn/vant/vant-axure-0905.png" style="width: 80%; box-shadow: 0 1px 2px rgba(0,0,0,.2)">

<a class="design-download" href="https://b.yzcdn.cn/vant/vant-axure-20200905.zip">下载</a>

<style>
a.design-download {
  display: inline-block;
  width: 100px;
  color: #fff;
  line-height: 40px;
  text-align: center;
  background-color: #38f;
  border-radius: 3px;
}

a.design-download:hover {
  color: #fff;
  opacity: .9;
}

a.design-download:active {
  opacity: .7;
}
</style>