专栏首页无原型不设计一款好用的程序员切图标注神器
原创

一款好用的程序员切图标注神器

我这里推荐的是摹客,摹客是设计+协作(All in One)的一站式云平台,为产品开发团队提供高保真设计、设计稿交付、全流程协作和设计规范管理。

目前整个设计领域只有zeplin和摹客拥有设计+协作。

摹客协作设计平台的特点:

- 高保真原型设计:在线设计创作,支持矢量绘图、交互设计、流程图等

- 设计稿交付:支持交付 Sketch / PS / XD / Figma / Axure 设计稿,解放双手

- 全流程协作:自动标注切图、在线评论审阅、设计任务管理

- 设计规范管理:轻松定制规范,高效管理资源

摹客网址:https://www.mockplus.cn/

现在用Sketch插件为例介绍一下怎样下载切图。

上传Sketch设计稿

摹客支持Sketch。通过摹客Sketch插件,可以上传Sketch设计稿以进行标记切图等。

安装Sketch插件

在摹客官网下载摹客Sketch插件安装文件并点击进行安装。

打开插件

插件安装好后打开Sketch,在「Plugins(插件)」中找到摹客插件,选择并打开。

注册和登录

使用摹客平台账号(在Mockplus、摹客上通用)即可登录。

选择团队和项目

通过下拉菜单选择团队和项目,设计稿将上传至该团队对应的项目中。

新建项目

点击项目名称后面的小三角,在展开的列表中点击加号图标“+”,进行新建项目的操作。

新建好项目,可将页面上传到指定分组内。                            

点击右上角的“更多”图标,可以进行切换团队、切换账号、设置等操作。

标记切图

  • 在Sketch中选中需要切图的图层或编组;
  • 点击右下角的Make Exportable,就可以完成标记切图,然后上传至摹客即可。

自定切图尺寸

  • 在Sketch中选中需要切图的图层或编组,点击右下角的Make Exportable;
  • 再点击“切刀” 

 工具,对外框大小进行调整即可。(快捷键是S,按住S直接绘制外框。)

如果切图下方是有背景的,如何让背景透明?方案如下:

  • 将切片图层 

 和需要切图的图层编组,选中切图图层;

  • 勾选右侧属性面板上的Export  group contents only。

通过上述操作可以保证切片在有背景的情况下也是透明的。

除了在Sketch中绘制外框外,在摹客中也可以自定切图尺寸。

  • 在Sketch中点击右下角的Make Exportable后,直接上传至摹客;
  • 在摹客的开发模式下选中切图,勾选“自定尺寸”,填充模式选为“居中”;
  • 接着设置好需要的切图尺寸,一键下载即可;
  • 此时下载下来就是带空白区域的切图。(注:当设置尺寸大于素材本身的尺寸时才会出现空白区域。)

选择设计稿倍率

点击倍率下拉框,根据设计稿的画板大小,选择设计稿对应的倍率。例:375pt*667pt的设计稿对应 @1× 。

上传设计稿

上传前,有以下三个选项:

  • 上传全部页面 — 将该设计稿中所有的页面和画板全部上传至摹客中。
  • 上传全部画板 — 将该设计稿中所有的画板上传至摹客中。
  • 上传所选画板 — 将选中的画板上传至摹客中。

然后点击“上传”,即可将设计稿资源一键上传至摹客,设计师和开发可登录摹客查看标注与下载切图。(注:操作过程中,如果误点击了“上传”,可在上传界面右上角点击叉号“x”图标,本次上传将会立即中止。)

状态图

在Sketch中选中单个画板并勾选“上传所选画板”,点击“上传”,插件将自动执行上传状态图操作。状态图详细操作可点击查看:状态图

同步画板

如果在Sketch中删除了几个画板,再次上传设计稿时,勾选“设置”中的“上传全部画板时自动检测不对应的画板”,Sketch中已删除的页面在摹客中也会同步删除。

标注扩展区域

在插件-设置中,若勾选了“标注扩展区域”,图层如果有阴影、边框、模糊等扩展区域,上传摹客后会显示最大区域;若不勾选,上传摹客后的标注将不包含阴影、边框、模糊等,仅显示图层本身的大小。

上传高清设计稿

如果你想导出非常高清的设计稿,请在插件设置中勾选“上传高清设计稿”选项。

  • 网页尺寸的设计稿,会以原有尺寸的2倍宽度上传;
  • 安卓或iOS的设计稿,会以原有尺寸的4倍宽度上传。

(但这样做会牺牲摹客的性能,如果你感觉在摹客的画板部分有卡顿,请尝试取消勾选此选项,并重新上传设计稿。)

上传Symbol画板

如果你想将symbol画板上传到摹客,需要先在插件的“设置”中勾选“上传symbol画板”。然后返回插件主界面进行上传的操作。

设置上传顺序

摹客提供了设计稿上传顺序的设置,如果不勾选此设置,上传后的设计稿将以倒序的方式呈现。如果想让设计稿顺序与Sketch中的顺序保持一致,请在设置中勾选“设计稿排序与Sketch保持一致”。

将文件名作为覆盖判断依据

勾选此设置后,即使之前上传过此文件中的画板,一旦改变了文件名,此文件中的所有画板会作为新的设计稿上传。

始终覆盖已有状态

勾选此设置后,如果之前上传过一次,修改后再次上传设计稿,会直接覆盖之前的画板,不再提示是否添加新状态。

PS插件下载地址:https://www.mockplus.cn/download/idoc-ps

XD插件下载地址:https://www.mockplus.cn/download/idoc-xd

Figma插件下载地址:https://www.mockplus.cn/download/figma-intergration

Axure插件下载地址:https://www.mockplus.cn/download/idoc-axure

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 一款好用的程序员切图标注神器

    我这里推荐的是摹客,摹客是设计+协作(All in One)的一站式云平台,为产品开发团队提供高保真设计、设计稿交付、全流程协作和设计规范管理。

    奔跑的小鹿
  • 推荐一款程序员专用的编辑器

    很多人问我写公众号用的什么写的,今天就给大家分享一下我一直用的这款编辑器。为什么要选择一款好的编辑器呢?一个好的编辑器既可以帮助你提高写作效率,又可以让你的文章...

    张俊红
  • 2019,UI设计师必备神器

    2019年将会是你全新起航的一年,相信你已经制定了很多规划,正在开启第一步的推动。

    极乐君
  • 程序员实用工具,推荐一款代码统计神器GitStats

    对于Git项目开发,有一些可视化的工具,如gitk,giggle等,来查看项目的开发历史。但对于大型的项目,这些简单的可视化工具远远不足以了解项目完整的开发历史...

    测试开发技术
  • PHP神注释记录一番,一个程序员专用的注释包

    V站CEO-西顾
  • 【工具】推荐一款切图神器,设计稿一键导出 Vue/微信小程序 代码

    emmm,这位产品小兄弟,说好只加 3 个页面,最后硬是让产品加了 6 个页面,差点凑齐七个小矮人了,后面的 UI 稿就像这样(考虑到公司利益,本文采用网上案例...

    pingan8787
  • 2019,UI设计师及程序员必备神器

    2019年将会是你全新起航的一年,相信你已经制定了很多规划,正在开启第一步的推动。

    奔跑的小鹿
  • 几款效率神器助你走上人生巅峰

      在我的工作和生活中,我一直都很注重效率工具的使用,这么些年下来也积累好几款很不错,但是又不为大多数人所熟知的软件工具,我用起来得心应手,很不错。那我就像在此...

    阿豪聊干货
  • UI设计初学者必看,这款设计神器教你快速入门

    网络时代,网页和手机App已经深入到人们生活的方方面面。这也使得App界面设计越来越受青年求职者们的青睐,并纷纷投入这个行业。但是,作为UI设计初学者,究竟如何...

    奔跑的小鹿
  • 这些开挂的Chrome插件助你的工作和学习事半功倍!

    Chrome在全世界能够如此受欢迎,除了它的稳定性强,速度快这些优点外,还有就是它的插件是非常丰富强大的!最重要的是作为一个程序员,如果不使用Chrome的话你...

    Java后端技术
  • 程序猿的 Chrome 浏览器插件推荐

    这是一款标签页插件,我使用 Chrome 浏览器的时候就开始使用这个插件,注册后可以使用 Pro 版本,它具有多种搜索引擎设计及类似书签页的功能,非常的实用,可...

    Meng小羽
  • 推荐几个牛逼的 IDEA 插件,还带动图!

    一款热部署插件,只要不是修改了项目的配置文件,用它都可以实现热部署。收费的,破解比较麻烦。不过功能确实很强大。算是开发必备神器了。热部署快捷键是control+...

    良月柒
  • 细数那些年我用过的前端开发工具

    王小婷
  • 神器!解放你的双手——UI设计稿全自动切图和标注的工具推荐

      前不久在 掘金 上看到一篇文章,前端 PS 切图方法,图文详细,相信每个前端都经过这种最原始的切图手法,不禁想起自己以前刚入门那会懒得切图,直接QQ截图,现...

    疯狂的技术宅
  • 听说,这个小程序里,存了各大高校女神的「私房照」

    蓦然回首,远逝的日子仿佛晃动的万花筒,不经意间摇晃出一个个无法模仿的图案,那一次次的聚散与悲欢都成绝版。

    知晓君
  • 程序员常用软件,你用了哪些

    编程软文
  • 程序员必备辅助开发工具总结

    工欲善其事必先利其器,拥有简捷的开发辅助工具能大大提高我们的开发效率。老九君给大家总结了一些常用的辅助开发的工具,希望大家能喜欢,闲话不多说,马上开始~! N...

    老九君
  • 为什么国外的码农爱用苹果 Mac电脑?

    Mac 在国外很受欢迎,尤其是在 设计/web开发/IT 人员圈子里。普通用户喜欢 Mac 可以理解,毕竟 Mac 设计美观,简单好用,没有病毒。那么为什么专业...

    程序员互动联盟
  • 作为程序员,近几年我都用过哪些优质的开源软件?

    作为 GitHubDaily 的运营者,过去几年我接触到了非常多优秀的开源软件,今天就借着这个机会,跟大家分享一下,那些我一直在使用的开源软件吧!

    GitHubDaily

扫码关注云+社区

领取腾讯云代金券