Sketch 自動布局插件介紹

簡評：iOS 的自動布局已經出來好一段時間了，如果你的原型圖還是只有一種屏幕尺寸的布局，那麼最終的成品很可能會和你的預期不一樣，瞧瞧別人是如何使用 sketch 來適配所有的 iPhone 屏幕尺寸的。

為什麼我們需要自動布局？

自動布局可以給每個 UI 元素添加位置約束，這樣我們只需要在一種屏幕尺寸上定義布局，然後在所有的屏幕尺寸的設備上 得到我們想要的效果，而不僅僅是 iPhone 7。

Auto-Layout for Sketch 是什麼？

是一個 Sketch 插件，可以無縫集成到 Sketch 中，可以定義和查看不同的 iPhone / iPad 尺寸，包括縱向/橫向（下圖 gif）。

以及一次性生成所有畫板的所有屏幕尺寸的預覽：

使用

1. 下載免費插件 https://animaapp.github.io/Auto-Layout/

2. 解壓，然後雙擊 "AutoLayoutPlugin.sketchplugin" 安裝該插件

3. 給圖層元素定義他們的約束條件（下圖 gif）

4. 最後創建預覽，確保你的設計圖在每種尺寸的屏幕都很酷炫（下圖 gif）

如果你想了解更多的內容，還可以觀看視頻教程。

原文：Introducing Auto-Layout for Sketch

相關閱讀

• 高能提升你的Sketch效率 ：基礎快捷鍵篇 - 知乎專欄

• 「冷知識」Sketch 還能這樣操作？！ - 知乎專欄

• 實戰篇：手把手教你用 Sketch 開始應用設計項目 - 知乎專欄

歡迎關註：知乎專欄「極光日報」，每天為 Makers 導讀三篇優質英文文章。

推薦閱讀：