在項目中,設計師與開發者處于不同的項目階段,同時也使用著不同的工具,那么讓他們兩者之間建立良好的溝通協作方式就尤為重要,MasterGo雖然是一款面向設計師的專業工具,但同時兼顧強大的協作基因,今天小編就用一個全新的視角,站在開發者的角度,幫助大家了解和正確使用MasterGo,讓設計與代碼連接更加緊密!
在開始之前,我們首先需要知道,MasterGo能為開發者做什么?
首先,MasterGo提供自動標注功能,無需第三方應用,就可以自動將設計稿中元素的尺寸、間距、位置、顏色、字號等進行標注,只需一個分享鏈接,團隊開發人員就可進入項目獲取到設計稿的標注信息。
其次,MasterGo的切圖功能,快捷鍵為“S”,在這里預設了iOS、Android、Flutter設備的尺寸、倍率、前后綴、格式等參數,與開發對接的時候,即可精準匹配多設備、多尺寸的使用需求,更快速、精準的交付設計稿。
第三,雖然MasterGo可以直接查看設計圖的標注,但為了滿足工程師的習慣,還添加了「一鍵同步至藍湖」的功能,提高設計效率的同時,也可以滿足開發人員的習慣。
此外,當設計師交付設計稿給開發時,開發人員可以通過MasterGo的評論功能,快捷鍵為“C”,在設計稿的對應區域添加評論,減輕溝通成本,高效調整設計圖。
當然,通過MasterGo提供的API接口,開發者可以獲取到設計稿的權限,根據項目或團隊的需求,開發一些更能提升團隊效率的插件,同時,MasterGo的社區,也提供了眾多優秀的插件供我們使用。
在與設計師協作時,通常會收到對方發送的MasterGo鏈接,我們推薦使用谷歌瀏覽器打開,如果只是預覽,不需要查看標注和代碼切圖,就不需要登錄,直接按住Cmd+鼠標滾輪即可完成縮放,按住空格即可完成拖拽。如果需要查看設計圖的標注,就要登錄賬號,并獲取相應的查看權限。
進入標注模式后,可以通過不同的頁面來查看不同的內容,如果開發人員要查看的內容均在一個頁面內,設計師只需要分享這個頁面鏈接即可。頁面左側是圖層欄,開發人員在查看設計稿時可以通過左側的圖層樹,查找并快速定位到元素,點擊下拉菜單后,可以選擇想要的類型,選擇好圖層類型后,在搜索框中輸入名稱即可指定元素圖層。
如果想快速定位到圖層位置,可以在左側圖層欄中選中該圖層,雙擊圖標即可快速定位到圖層的位置,或者選中圖層后,按快捷鍵Shift+2或Cmd+2,也能快速定位到圖層。如果想要測量元素的間距,就在選中圖層后,鼠標移到其他圖層就可以自動測量出圖層與圖層間的距離。
其實對開發者來說,最重要的還是查看標注和代碼,開發人員可以進入標注模式,點擊設計圖,在右側的標注面板查看元素的各種信息,并且MasterGo支持選擇不同的開發平臺,滿足在iOS、Android、Web端的各種開發需求。
除了開發平臺之外,我們還可以查看顏色模式,點擊顏色右側的下拉菜單便可以看到,它支持16進制、RGB、RGBA等類型,這里所有的參數都可以直接點擊來復制使用,出現“已復制”提示后就可以直接粘貼到編輯器中,另外MasterGo還支持多種色彩模式的切換,對于開發者來說,十分友好。
設計師標注好切圖后,開發者可以在標注模式導出切圖,MasterGo提供了兩種導出方式,分別是“單獨導出切圖”和“批量導出切圖”。
首先是“單獨導出切圖”,我們選中一個圖標后,在右側的設置中找到導出,可以根據需要選擇倍率、前后綴以及不同格式,完成后點擊導出即可導出切圖。
如果我們想要“批量導出切圖”,有三種方式:可以點擊左側菜單欄,選擇“文件”和“導出所有切圖”,然后點擊導出;也可以進入標注模式,點擊右側欄中的“導出所有切圖”完成導出,或者使用快捷鍵“Shift+Cmd+E”激活批量導出切圖彈窗,完成批量導出。
以上就是本期分享的從開發者視角快速上手使用MasterGo的全部內容了,希望能夠幫助到開發同學,同時也希望能有更多開發同學可以加入體驗一下MasterGo。