Blog updates

Latest news & updates
Tool

Sketch Plugin 介紹 – Sketch Measure

2017-06-02

設計師在完稿之後,接下來的任務是與前端工程師合作,讓視覺可以如實呈現。這時有一份完整的規範就是一件很重要的事情,基本規範像是尺寸、字體、色碼、間距等等。這份施工圖標注得越清楚,工程師們就會越好做事。

古早時期曾經也試過手工標注,但不僅耗時,設計師也累死了。

好在目前線上有很多選擇,而本篇要介紹的是我比較常用的外掛 Sketch Measure,不僅操作簡單,支援中文!
而且還免費啊(誤)

☞ 下載位置

如何使用呢?
點擊 Sketch 的工具列 > Plugins > Sketch Measure > 開啟工具欄(Toolbar)

發現也出了工具欄 2.0 Beta 版,可以做更多細節的標註。

也可以直接點選自己需要的功能。

標注規範示意圖:

操作方式很簡單,點選需要標註的物件後,再點選對應的功能即可。比較需要注意的是,寫備註功能時,需要先用 Sketch 的文字工具寫好內容,再點選「備註」功能。它會自動轉化成一個類似便利貼的示意(如圖內右上淺黃區塊)

而最讓我激賞的功能則是「匯出規範」了!(其實我也只用這個)根本設計師的福音來著。

點選需輸出的 Artboard 再選擇「匯出規範」,會自動生成出一個附有 html 的資料夾。

點開 html 檔後,點選任一物件,右側就會顯示詳細的資訊,省去超多手動標註的時間,根本 Amazing!

不需安裝任何軟體,只要你有瀏覽器!
這樣試了幾個專案,公司的工程師們回饋也還不錯唷!推薦給大家。

第一篇技術文,請多多指教,謝謝 😀

6 comments

  1. 搶頭香~~想要看更多設計文!
    (還有假如是用內建wordpress comment 而沒有做一些防範措施,不久後你就會發現一堆機器人留言…)

    回覆
    1. 部落格前輩,謝謝妳!寫文章有人留言真的還蠻開心的耶!剛發現原來工程師男友有幫我設定(感心)

      回覆
      1. 是公友唷

        回覆
        1. 「工」程師男「友」不管怎樣都是工友耶 lol

          回覆
  2. 好認真啊妳真的寫了

    回覆
    1. 跟 Hannah 看齊!

      回覆

Write a Comment