墨刀MockingBot for Sketch

MockingBot for Sketch是墨刀為sketch用戶提供的原型設計協(xié)同插件，這款插件提供了同步設計稿，快速連接墨刀，進行交互制作、標注查看、切圖下載、協(xié)同討論、項目審閱等功能，可以大大提高設計師的工作效率。

功能特色：

自選顏色

自由吸取設計文件顏色、提供業(yè)內(nèi)專業(yè)的顏色解決方案

切圖文件

提供所有屏幕分辨率尺寸切圖，一鍵下載輕松獲取

樣式代碼

獲取設計稿中每個元素的 CSS、Swift、Android 代碼，滿足開發(fā)者需求

全平臺適配

自動適配不同分辨率設備，精準換算 iOS、Android 及 PC 端所有像素單位

在線查看

設計師只需分享一條鏈接，開發(fā)者即可進行標注工作

使用方法：

第一步：下載 MockingBot 插件，雙擊安裝后需要重啟 Sketch，重啟后重新登錄帳號插件才會生效。

第二步：選中某 Artboard 或 Layer 后，單擊 Export to MockingBot，打開插件彈窗。

第三步：輸入墨刀帳號，登錄后選擇想要上傳的「應用名稱」或者「新建項目」，點擊上傳，完成設計稿導入。

第四步：打開「墨刀客戶端」或「墨刀網(wǎng)頁版」，登錄同一帳號，對所上傳的設計稿進行交互設計、重新排序等操作。

第五步：也通過直接點擊「查看鏈接」，或者在項目中打開運行頁，點擊「標注」，查看詳細的標注、切圖信息。

常見問題：

一、上傳的設計稿會以 Artboard 為單位在「墨刀工作區(qū)」創(chuàng)建不同頁面：

頁面順序目前以 Artboard 從左到右排列，新增頁面會處于應用的頁面列表底部依次創(chuàng)建。

頁面名稱與 Artboard 命名一致，可在 Sketch 或 墨刀中修改頁面名稱

二、上傳更新版設計稿到原項目（已包含此 Artboard 的應用），會自動替換并覆蓋原有設計稿，設計稿上交互區(qū)域位置不變；反之，新設計稿會自動創(chuàng)建頁面添加到工作區(qū)中。

三、為什么上傳到墨刀的設計稿是一張圖片？如何給圖片中的元素添加交互？

v2.3版本的插件上傳到墨刀的設計稿是一張圖片，但是能夠讀取到設計稿中所有的標注信息，大家在標注頁進行查看即可。目前沒有做圖層分離的主要原因是，無法做到墨刀工作區(qū)的編輯修改與shetch文件保持同步。也就是說，如果導入到墨刀的設計稿做成分層的，那么對設計稿的元素進行顏色、位置等修改，不會同步到sketch源文件中。那么當你下一次在sketch中修改源文件再導入墨刀里時，就會覆蓋在墨刀中的修改，會給用戶造成一定的困擾。我們也在考慮如何與sketch打通接口，期待能夠同步文件信息。

但是，你也可以通過「鏈接區(qū)域」組件給圖片中的元素添加交互動效，「鏈接區(qū)域」組件是一個熱區(qū)的概念，具體操作如下圖。