开发快速上手MasterGo,让设计和代码连接更紧密

业界
在项目中,设计师与开发者处于不同的项目阶段,同时也使用着不同的工具,那么让他们两者之间建立良好的沟通协作方式就尤为重要,MasterGo虽然是一款面向设计师的专业工具,但同时兼顾强大的协作基因,今天小编就用一个全新的视角,站在开发者的角度,帮助大家了解和正确使用MasterGo,让设计与代码连接更加紧密!

在项目中,设计师与开发者处于不同的项目阶段,同时也使用着不同的工具,那么让他们两者之间建立良好的沟通协作方式就尤为重要,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。

责任编辑:企业资讯
相关推荐

2009-03-31 19:05:24

Vmware虚拟化服务器

2013-03-27 09:28:46

ArubaBYOD无线网络

2013-06-28 13:36:12

Windows8.1必应Xbox

2017-06-25 11:05:33

党员党务工作党建

2018-04-24 10:05:13

Docker工具交付

2017-07-17 15:27:49

Azure IoT技术物联网

2021-06-24 09:32:00

鸿蒙HarmonyOS应用

2014-12-12 10:25:21

Xcode 6iOS快速上手

2020-11-17 08:43:20

ElasticSear

2021-05-13 18:12:04

云计算行业科技

2020-11-06 08:54:43

Vue 3.0函数代码

2025-01-15 07:55:30

2011-07-26 13:58:17

LINQ

2024-11-08 08:37:25

2022-08-21 07:17:16

LinkerdKubernetes服务网格

2013-11-19 12:53:33

OA信息化

2021-12-10 08:13:02

MatplotlibpythonAPI

2022-08-19 07:13:45

SQL方法编程

2020-04-06 12:26:32

数据可视化场景设计

2021-01-08 13:37:25

API网关API开发平台数据库
点赞
收藏

51CTO技术栈公众号