為什麼Sketch的固定邊距不起作用？可能你觸發了另一個神奇功能
最近一位小夥伴遇到個Sketch問題，作為UI設計師的你肯定也會遇到，而且牽扯到Sketch一個神奇功能。
這個問題來自於四月份推出的Sketch課程，自己也從中總結了很多經驗。
自從《Sketch加薪進階-組件管理與團隊協作》課程上線以來，吸引了很多設計師夥伴的加入。課程可以從UI黑客公眾號熱門課程獲得。
除了視頻課程之外，學員每天在會員群中提出的設計問題也都及時地獲得了比較好的答案，包括技術的、工作的、求職的。同時也給自己積累了不少典型案例。
問題描述
具體問題是這樣的，下面是一個常見的日期選擇控制項，我們都會把它整體作為一個symbol組件，以便統一調用。
日期symbol內部的結構主要分為左邊的文字和右邊的圖標。
為了讓日期組件在不同的頁面環境下適應不同的寬度需求，我們一般會使用Sketch的智能縮放功能來對內部元素進行整理：讓文字左側固定，圖標右側固定。
左側文字定位設置
右側圖標定位設置
這樣設置好後，不管我們怎麼拉伸，永遠是兩邊固定，實現彈性組件的需求。
但是這位同學遇到了一個怪現象，拉伸後，圖標沒有固定在右側，而是緊緊跟著文字。
這是什麼原因呢？明明左右元素都已經固定好了，難道Sketch的智能縮放失效了嗎？
其實什麼問題都沒有，而是我們無意間觸發了Sketch的一個神奇功能，沒有官方叫法，我把這個稱作：文本右側內容自動跟隨。
Sketch的特殊機制
Sketch的這個特殊機制，簡單描述就是：在symbol組件內部，文本的右側元素始終和文字保持固定間距。
利用這個特點，我們能做出很多省時省力的效果。除了剛才的右側固定跟隨圖標之外，還可以多個文字跟隨，適用於導航標籤的製作。
以上兩個例子中，文字都是左對齊，如果是居中對齊，還可以做文字+圖標整體居中的效果，具體操作可以看這篇文章：《你不知道的Sketch黑科技-圖文浮動居中》
解決問題
我們回到剛開始的問題，為什麼日期symbol中右側圖標沒有固定？
原因就是右側圖標觸發了Sketch 文本右側內容自動跟隨機制，而且這個機制的優先順序是大於智能縮放的。
另外在上述機制中，只有文字和右側內容間距≤20才可以觸發，大於20就不起作用了。
如上圖所示，文字和圖標間距為18，這樣便會觸發機制自動跟隨文字，而且優先順序要大於已經設置好的智能縮放。
所以我們只需要把日期symbol中的文字和圖標間距變大就可以解決問題，在頁面中調用，需要多大的寬度再進行設置即可。
總結
利用這個機制，我們可以不藉助第三方插件做很多彈性化的組件，解決很多棘手問題，大大提升設計效率，真正為設計賦能。
所以說，設計師面對的任何問題都需要從實際工作中來，解決之後再成為推動項目向前迭代的動力。
PS
很多設計師把Sketch僅僅作為一個畫圖工具，完全沒有發揮它的潛力。如果你在樣式整理、組件化設計、團隊協作等方面遇到瓶頸的話，就來加入《Sketch加薪進階-組件管理與團隊協作》課程吧，專屬的會員群也會每天為你及時提供設計問題解答。
END
推薦閱讀：
