如何讓一套設計自適應不同屏幕？相信每個UI都有這樣的需求。你還在自己一個一個屏幕尺寸去慢慢調整像素值嗎？太慢啦~ 其實用sketch自帶的symbol/reszing，再加上一個超好用的插件：Auto-Layout，就能很高效的解決這個問題。下次甲方說：我想看看這個設計在 ipad/網頁/iphone7 plus 上是什么效果？ 你就可以瞬間生成設計圖啦！
先看一下最終的效果：
不論如何改變當前sketch中artboard的大小，其中的UI都會按照我設置的要求自適應的變化，并且不會出現圖片被拉伸或者位置沒有居中之類的錯誤。
如果你不覺得這很神奇，請在自己的sketch artboard上拖拽一下試試：
下面具體介紹下我是如何實現的，整個過程分為三步：
Step1. 整理UI將其中重要組件設置為symbol
可以下載我的sketch-demo文件 ，demo頁面結構如下：
所有symbol如下：
其中cover由user，icon和bg這三個更小的symbol構成。我很喜歡這種symbol中套symbol的結構，可以無限復用重組~
2. 給Symbol中的元素選擇合適的resizing選項
好像很多人都沒用過sketch中的resizing，甚至沒注意到它的存在。resizing的位置如下圖（選中symbol時會出現）：
resizing這個選項的意義就是，當symbol的大小變化的時候，其中的元素位置如何變化，比如我給底部導航欄中的每個圖標的resizing都設置為 float in place，那么當底部導航欄寬度變化的時候，圖標會保持自己的大小和百分比位置不變：
效果：
給每個元素都設置好，具體如下：
pin to corner就是元素大小不變，位置固定在相對距離最近的corner處。具體可以看看sketch官網解釋，基本上試用一下就會明白了。
3. 使用auto-layout插件讓整個UI自適應
最后一步就是用大名鼎鼎的auto layout插件啦，下載地址：Auto Layout for Sketch
這個插件使用非常簡單，插件安裝完成后，會在sketch上出現一個選項欄：
我們從cover開始，給其設置對應的autolayout參數。我們希望不論屏幕如何變化，cover都要100%的寬度，所以：
而底部的tab欄，我們希望它始終保持在距離屏幕底部為0的地方，左右距離也為0。如圖使用pin的功能即可。
關于更多autolayout的高級使用方法，可以看看官網的說明和視頻 guide
完成這三步，你的sketch設計稿已經變成完全的自適應UI了！
