Sketch外掛推薦! 一鍵快速預覽網頁設計稿

工欲善其事必先利其器。

UI設計師在設計時常遇到需要透過裝置來檢視設計稿。

轉自Sketch 官方網站

想用移動裝置來看IOS設計稿,可以在手機下載Sketch Mirror App ,(記得手機與桌機要連接相同wifi),Sketch 右上角會出現橘色提示 “Connect”你的手機名稱”,點擊後,電腦畫面會同步在手機裝置上,不但提高工作效率,也節省溝通時間。

網頁設計師吶喊:那設計網頁的我們呢?

 

這篇文章將解決的問題

·用Sketch外掛,輕鬆在瀏覽器上預覽網頁設計稿

 

我們先假設情境

當設計師完成尺寸1440px設計稿,導出圖片後,丟進瀏覽器放大100%查看設計稿。
每次來回修改設計稿就必須重複上述步驟,設計師的時間很寶貴呀!
Preview in browser 出現就是為了簡化這些步驟。

 

點我下載 Preview in browser

sketch-plugin-Preview in broswer

Preview in broswer demo GIF

設計過程中,只要按快捷鍵shift+cmd+.

Preview in browser外掛會在預設瀏覽器上開啟你的設計稿。

結論

使用請注意,這外掛只能用圖片的方式在Html開啟,
當你的設計稿超出螢幕的尺寸範圍,打開來會發現設計稿超出或小於瀏覽器畫面範圍
舉例來說,寬度1920px 設計稿,在1440px螢幕開啟設計稿位置就會偏移。

設計稿請符合預覽螢幕尺寸去做,這樣打開瀏覽器才會100%符合網頁真實畫面唷!