Sketch Plugin 介紹 – Sketch Measure
2017-06-02
設計師在完稿之後,接下來的任務是與前端工程師合作,讓視覺可以如實呈現。這時有一份完整的規範就是一件很重要的事情,基本規範像是尺寸、字體、色碼、間距等等。這份施工圖標注得越清楚,工程師們就會越好做事。
古早時期曾經也試過手工標注,但不僅耗時,設計師也累死了。
好在目前線上有很多選擇,而本篇要介紹的是我比較常用的外掛 Sketch Measure,不僅操作簡單,支援中文!
而且還免費啊(誤)
如何使用呢?
點擊 Sketch 的工具列 > Plugins > Sketch Measure > 開啟工具欄(Toolbar)
發現也出了工具欄 2.0 Beta 版,可以做更多細節的標註。
也可以直接點選自己需要的功能。
標注規範示意圖:

操作方式很簡單,點選需要標註的物件後,再點選對應的功能即可。比較需要注意的是,寫備註功能時,需要先用 Sketch 的文字工具寫好內容,再點選「備註」功能。它會自動轉化成一個類似便利貼的示意(如圖內右上淺黃區塊)
而最讓我激賞的功能則是「匯出規範」了!(其實我也只用這個)根本設計師的福音來著。
點選需輸出的 Artboard 再選擇「匯出規範」,會自動生成出一個附有 html 的資料夾。
點開 html 檔後,點選任一物件,右側就會顯示詳細的資訊,省去超多手動標註的時間,根本 Amazing!
不需安裝任何軟體,只要你有瀏覽器!
這樣試了幾個專案,公司的工程師們回饋也還不錯唷!推薦給大家。
–
第一篇技術文,請多多指教,謝謝 😀
2017-06-03
搶頭香~~想要看更多設計文!
(還有假如是用內建wordpress comment 而沒有做一些防範措施,不久後你就會發現一堆機器人留言…)
2017-06-03
部落格前輩,謝謝妳!寫文章有人留言真的還蠻開心的耶!剛發現原來工程師男友有幫我設定(感心)
2017-06-03
是公友唷
2017-06-03
「工」程師男「友」不管怎樣都是工友耶 lol
2017-06-30
好認真啊妳真的寫了
2017-06-30
跟 Hannah 看齊!