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