這篇文章包含視訊檔案，可以PC瀏覽器和安卓裝置瀏覽器上正常播放。
如果你在設計互動，你可能會經常遇到一些重複性的元素，比如列表中的行，或者網格化元素。儘管Sketch提供了一些方法，通過使用Symbols將一些樣式應用到元素中，但如果你想讓佈局更有適應性或者動態變化，它恐怕就很難完成了。
在過去的幾次重佈局專案當中，當我需要快速迭代時（例如重新設計Facebook“關於”頁面時），我跳過使用Sketch進行佈局，直接使用html/css。雖然你可以這麼做，但頻繁的在程式碼和瀏覽器之間切換，類似這樣的事情，會限制了你的速度。
有一天，當我發現我正在設計表格佈局，記不清楚實第多少次調整每一個表格元素對齊方式時，我開始憧憬有沒有什麼我能夠讓Sketch的WYSIWYG（所見即所得）和html、css相結合。
遠在天邊近在眼前。Facebook React Native專案有個非常漂亮的CSS佈局庫，它基本上是使用javascript來實現的CSS FlexBox佈局。於是我花了幾個晚上做了一個sketch外掛的概念版：
一個名為 @stylesheet 的圖層，以及外掛的快捷鍵
這樣就能夠將原先比較麻煩的處理，例如設定內邊距，變得很快速了。接下來，我要解決文字框的問題。文字框的問題就不是很好解決了，我的方法也不是很高效，不過外掛執行起來倒算是馬馬虎虎，自適應大小、固定大小、多種行高、文字大小都實現了。
手動的重新佈局，設定大小都變得很繁瑣
這幾個例子都很基礎，而現實中的佈局是非常複雜的。下面我們來試一下把表格佈局混合一些圖片、名稱、二級文字以及一些附件。 這樣的工作流能夠使我們快速迭代，如果你要調整一些區域性的尺寸、內邊距等等，這個工具都能自動為你完成。
如果使用了Symbols，那麼還能體驗到其他的一些優勢：
你可以在圖層皮膚中調整順序來控制列表中的元素順序
調增多種螢幕大小的尺寸變得更加容易
不同於Symbols，你可以刪掉一些元素，佈局會自己調整。
佈局並沒有侷限在視覺上，一些組可以共享佈局，並且還可以看起來都有所區別
更進一步 — 原型
Symbols有一個優勢，他能視覺化的改變事物，而不是一遍遍的修改文字。最重要的是，維護不斷增長的樣式表將會成為一個痛點。
一種比較自然的辦法來解決這個問題的話，我的方案是在Sketch中將樣式表視覺化。於是乎，我是用了一些平常做標註的方法 — 使用矩形、線段來表示內邊距、外邊距、寬度、大小尺寸等等。
如果我要製作上一個例子的標註，可能就會是這個樣子。
製作成原型只需要簡單的命名圖層，增加一些很難視覺上表達的樣式（這些圖層可以隨後隱藏起來，以免分散注意力）。
我新增了一個 @size 屬性應用到寬度和高度
現在我們使用之前製作的表格來演示一下。在你所看到的現象背後，是原型的屬性被翻譯成單獨的樣式，並附加到樣式表中。
視訊 你可以注意到樣式圖層沒有重新對齊。這是個半成品外掛，我還在思考使用者是否希望這些元素跟隨其父元素
嗯，效果還不錯。現在我們可以視覺化的修改表格佈局了，不用在設計檢視和文字檢視之間來回切換了。現在這個樣式表只是用來渲染這個組，如果需要的話，我們也可以把它變成原型。通常情況下，我都會留著他，因為它作為原型是在太小了。下面這個例子完全使用原型進行構建。
在前面的元素原型之上，我們有一個表原型，他有著內邊距和寬度，以及一個Section header原型，這個原型的下邊距和其他的原型都不一樣。
這麼做並不是為了替換掉Symbols的使用，而是使用動態佈局引擎來做個補充，這樣能使得許多繁瑣的任務變得更加容易。Symbols本身是很好的，甚至可以為原型作補充，你可以在symbol當中建立一個@padding圖層，然後在原型之間共享它。
接下來需要做的
這個外掛正在製作當中，現在進度很慢，而且還有很多的bug。儘管如此，我還是希望大家能試用一下，給我一些反饋，如果能變得更好用，或者貢獻你們的力量，讓它儘快能夠釋出。
它已經為我節省了很多的工作時間，我也希望它能幫助到更多的人。如果你想嘗試一下，請到Github repo當中下載。
這是我在Facebook工作時的副業。如果你是一名設計師，同時你也喜歡各種工具，請聯絡我！我們最近啟動了一個專門的設計工具專案，並且持續招聘中。
感謝 Jon Lax, Charlie Deets, Eric Eriksson, 以及 George Kedenburg III.
原作者：