Sketch 58 Beta版本探秘台汇,看看都有什么新功能

Sketch?58 Beta版本已于近期推出(其實最近一段時間已更新了好幾個測試版),官方終于推出Smart Layout智能布局啦撮,讓Symbol組件獲得響應功能,變得更加靈活和強大汪厨。

之前我們只能使用第三方插件來制作響應式組件赃春,比如之前介紹的Kitchen和Anima。不過畢竟不是官方親生的骄崩,難免會包含一些bug和不足聘鳞。

比如Kitchen插件在制作Symbol組件的時候薄辅,其自動排版功能會出錯。Anima插件對上傳到藍湖的標注會有顯示問題抠璃。關(guān)鍵是在團隊協(xié)作的時候站楚,其他使用源文件的同學也必須安裝對應的插件,否則沒有效果搏嗡。

那么這次Sketch 58 Beta版本新推出的Smart Layout智能布局功能窿春,能否解決長期困擾我們設計師的響應布局問題呢?一起來看下采盒。

Sketch最新Beta版本下載

如果想知道57版本的新功能旧乞,請看這篇文章《Sketch 57 Beta版本探秘,看看都有什么新功能》磅氨。

如果想體驗Sketch最新Beta版本尺栖,請進入Sketch測試版主頁下載 https://www.sketch.com/beta/。但是要記住烦租,一定不要用在自己的正式文件中延赌,防止修改后,低版本打不開叉橱。

Sketch 58要求Mac系統(tǒng)版本是macOS High Sierra 10.13.4及以上挫以,下面是Sketch各大版本對應的Mac系統(tǒng)版本,如果遇到新版的Sketch打不開就需要檢查下自己的系統(tǒng)版本窃祝。

Sketch52-58系列版本需要macOS High Sierra 10.13.4及以上

Sketch51系列版本需要macOS Sierra 10.12.2及以上

Sketch50系列版本需要OS X El Capitan 10.11.2及以上

Smart Layout智能布局介紹

本次Sketch 58 Beta最大的更新就是這個Smart Layout掐松。

在新建Symbol組件時,彈窗新增Layout選項粪小,總共有7個屬性大磺,分別對應不同的圖標,下面是每個屬性的簡單介紹探膊。

No Layout

正常布局量没,也就是和原先一樣,沒有特殊效果突想。

Left to Right Layout

賦予Symbol組件智能布局效果,組件尺寸會根據(jù)內(nèi)容變化究抓,方向是水平從左往右布局猾担。

Horizontally Center Layout

同上,方向是中間往左右兩端布局刺下。

Right to Left Layout

同上绑嘹,方向是從右往左布局。

Top to Bottom Layout

賦予Symbol組件智能布局效果橘茉,組件尺寸會根據(jù)內(nèi)容變化工腋,方向是垂直從上往下布局姨丈。

Vertically Center Layout

同上,方向是中間往上下兩端布局擅腰。

Bottom to Top Layout

同上蟋恬,方向是從下往上布局。

另外在選擇好Layout屬性后趁冈,Symbol頁面的畫板組件圖標會發(fā)生變化歼争,除了No Layout布局還是之前的畫板圖標之外,其余6個都有對應的新圖標渗勘,看下圖沐绒。

此外,選擇畫板后旺坠,右側(cè)的屬性面板中會新增布局選擇功能乔遮,包含上面講的7種屬性,可隨時對Layout布局進行更改取刃。

看上面的描述還是比較迷惑蹋肮,實際上智能布局簡單說就是賦予Symbol組件內(nèi)容邊距的功能,尺寸隨內(nèi)容變化而變化蝉衣,有點類似于前端CSS中的padding屬性括尸。下面用實際例子展示。

制作彈性按鈕

以前我們使用過Kitchen和Anima制作過彈性按鈕病毡。需求是濒翻,文字兩端的邊距(即CSS中的padding)保持固定,文字數(shù)量不固定啦膜,按鈕寬度隨文字內(nèi)容走有送。

那么在Sketch 58中,我們先制作一個按鈕僧家,文字兩端的邊距是20雀摘。

轉(zhuǎn)化為Symbol,出現(xiàn)彈窗八拱,在新增的Layout下拉中阵赠,選擇Left to Right Layout,這樣文字變化時肌稻,左邊是固定不動的清蚀,內(nèi)容往右邊延展。

這樣一個彈性按鈕就做好了爹谭,不管文字有多少枷邪,兩端邊距永遠保持固定20。和前端CSS中的padding-left和padding-right功能一樣诺凡。

如果這個時候我們再拉伸Symbol东揣,右側(cè)Overrides會出現(xiàn)一個新的圖標:縮小實例以適配內(nèi)容践惑。點擊后,被拉伸的組件會還原為文字內(nèi)容長度嘶卧。

注意尔觉,這個和原先的重設覆蓋層圖標不同,不會清除覆蓋的文本內(nèi)容脸候,只會還原為適合內(nèi)容大小穷娱。

以上是從左往右的布局,水平兩端和從右往左也是一樣的道理运沦,只是方向不一樣泵额,下圖是從右往左的布局。

這就是智能布局的主要功能携添,賦予Symbol組件CSS代碼padding屬性嫁盲,具備響應特征。還需要注意的是烈掠,智能布局目前只針對Symbol組件羞秤,Kitchen插件是可以作用于普通組的。

制作彈性按鈕組

上面是單個組件的智能布局左敌,如果是嵌套組件呢瘾蛋?也是可以的,一起試下矫限。

我們把剛才做的按鈕橫向分布三個哺哼,再一起做成新的按鈕組Symbol組件,結(jié)構(gòu)看下圖叼风。

新的按鈕組內(nèi)取董,每個按鈕已經(jīng)是響應式的,那么做成組后就會保持組內(nèi)元素的間距固定无宿,更改下文字內(nèi)容看下圖茵汰。

非常棒,已經(jīng)滿足了我們剛開始的需求孽鸡。但是不建議嵌套過多蹂午,要保持組件化設計思維。當然了彬碱,間距問題画侣,Sketch 57已經(jīng)提供了多元素間距調(diào)整功能,只多了一步堡妒,但是不用把整體再次轉(zhuǎn)化Symbol,大家可以根據(jù)自己的需要靈活選擇溉卓。

制作信息卡片

以上講的是水平方向布局皮迟,同理垂直方向布局道理也一樣搬泥,我們以最常見的信息卡片為例子。一般情況下卡片圖片不變伏尼,標題和內(nèi)容文字的不固定會導致卡片整體高度也會發(fā)生變化忿檩。利用智能布局我們可以讓卡片變成響應式擴展。

確定好上下左右的間距爆阶,例子中用的16燥透,然后建立組件,Layout選擇從上往下布局辨图,這樣標題和內(nèi)容文字增多班套,上下的間距是保持不變的,內(nèi)容高度自動增加故河。

總結(jié)

以上就是Sketch 58 Beta版本新增的Smart Layout智能布局介紹吱韭。關(guān)于這個新功能,我們還可以做很多響應式的組件鱼的,提升設計效理盆。Sketch的更新速度也在加快,很多之前第三方插件才可以實現(xiàn)的效果也被官方一一收入囊中凑阶。希望Sketch的發(fā)展越來越好猿规,成為設計師真正的設計利器。

差點漏了一個點宙橱,58版本的歡迎界面也做了大更新姨俩,至于好不好看就因人而異了。最后來一睹芳容养匈。

THE END

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末哼勇,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子呕乎,更是在濱河造成了極大的恐慌积担,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件猬仁,死亡現(xiàn)場離奇詭異帝璧,居然都是意外死亡,警方通過查閱死者的電腦和手機湿刽,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進店門的烁,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人诈闺,你說我怎么就攤上這事渴庆。” “怎么了?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵襟雷,是天一觀的道長刃滓。 經(jīng)常有香客問我,道長耸弄,這世上最難降的妖魔是什么咧虎? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮计呈,結(jié)果婚禮上砰诵,老公的妹妹穿的比我還像新娘。我一直安慰自己捌显,他們只是感情好茁彭,可當我...
    茶點故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著苇瓣,像睡著了一般尉间。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上击罪,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天哲嘲,我揣著相機與錄音,去河邊找鬼媳禁。 笑死眠副,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的竣稽。 我是一名探鬼主播囱怕,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼抚岗,長吁一口氣:“原來是場噩夢啊……” “哼挂据!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起列敲,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤岛宦,失蹤者是張志新(化名)和其女友劉穎台丛,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體砾肺,經(jīng)...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡挽霉,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了变汪。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片侠坎。...
    茶點故事閱讀 40,872評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖裙盾,靈堂內(nèi)的尸體忽然破棺而出实胸,到底是詐尸還是另有隱情他嫡,我是刑警寧澤,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布庐完,位于F島的核電站涮瞻,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏假褪。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一近顷、第九天 我趴在偏房一處隱蔽的房頂上張望生音。 院中可真熱鬧,春花似錦窒升、人聲如沸缀遍。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽域醇。三九已至,卻和暖如春蓉媳,著一層夾襖步出監(jiān)牢的瞬間譬挚,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工酪呻, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留减宣,地道東北人。 一個月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓玩荠,卻偏偏與公主長得像漆腌,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子阶冈,可洞房花燭夜當晚...
    茶點故事閱讀 45,876評論 2 361

推薦閱讀更多精彩內(nèi)容