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


    我这里推荐的是摹客,摹客是设计+协作(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

  • 相关阅读:
    net core3.1 + electron 9.31.2 项目初始化
    DEV Express控件VScorllBar控件使用
    背包系统学习笔(tu)记(cao)
    C#应该掌握的一些东西
    服务器之间数据库拷贝
    photoshop AdobeCS6分享
    Random的实现原理
    C#利用System.Net发送邮件(带 抄送、密送、附件、html格式的邮件)
    jQuery validate验证控件remote缓存bug
    litrpa1.4版本正式发布了
  • 原文地址:https://www.cnblogs.com/jongde-0077/p/14301968.html
Copyright © 2020-2023  润新知