Sketch插件⎡Zeplin⎦详细介绍

Zeplin ——
一磨蹭共设计师、前端开发工程师、iOS、Android的家伙,省去设计师很多切图、标注的光阴,让设计师更在意设计自己,节约了重重生机。在介绍功能以前先报告大家怎么设置。

装方式

1.
去官网下载最新的Zeplin.app安装包并安装

2.
下载安装Zeplin的Zeplin.sketchplugin插件

这儿以sketch的plugins菜单上就是能够看Zeplin一栏,说明已经设置收尾。当然如果当为此事先要优先失官网注册邮箱账号,并于软件及登录

再者安装软件包以及插件

功用介绍

想念只要把sketch里面的画板导入zeplin之前,我们要在zeplin里面建立一个种类,sketch的画板就都导入此种,目前因此底免费账户好像就允许用户建一个自己之型,但得而且参加另外食指树立之档次。下面的Gif图,建立了一个”zeplin
introduce”的品类:

Zeplin – creat project

1. 树切片导入Zeplin

于sketch中出三三两两栽方式成立切片导入zeplin

方法一:

让图层对象建立symbol,在相应页面里都选symbol画板,然后点击在右侧下比赛点击“Make
exportable”
,不用管切片规则,看见左侧图层上出切片图标就可以了。

方法二:

当原来图层上直接打来片,一定要留心切片的命名,因为开发以zeplin下载的图像文件名都是片名称。

不过这种办法发生只弊端,在潜移默化背景色图层上切图时,开发好困难中切片而是径直看看了日益变色值,以为无切片,建议有规则下先利用方法同样

立切片后,在sketch的plugins菜单中找到“zeplin”-“export selected
artboards”
,或者按照快捷键command+control+E弹出导入画板提醒,选择刚刚自己建的“zeplin
introduce”
后点击“inport”

内需专注的凡,在选取导入画板的对话框中,左下比赛有相同宗“Replace screens
with the same
name”
,如果勾选此桩,文件称相同的画板在zeplin中会为替换掉。

Import面板

2. Zeplin页面信息介绍

管同摆设登录页面导入zeplin后我们能够看页面右侧有4有些系消息,基本信息-颜色-切片-备注信息。

页面信息

·基本信息

Description – 点击“No description
yet.”可以加上描述信息,完成点击“Done”按钮。

Last updated – 最近一个创新时间

Tags –
点击“Manage”可以于页面建立多单标签,作为免费用户我们日常用竹签来受每次的迭代分类

Links – 其他用户通过你大饱眼福的链接能看到该页面

File – 能顾您的sketch源文件存放于本土的岗位,点击可以打开sketch文件

主干信息

·颜色

得看到页面中冒出的富有颜色,鼠标滑动到对应色彩及出现些微水珠图标,提示可以将该颜色添加至样式库。

别zeplin菜单栏中点击“Project”“Color
Representation”
足因开发要求切换颜色模式是RGBA还是HEX。

颜色

·切片

切开件内部可以看看该页面所有片,开发在这个页面可以一次性下载所有切图的PDF和PNG格式,非常有利。

切片

·备注信息

每当页面中遵循停command键+点碰碰鼠标左键能建备注信息,如下图①黄色标签,右侧面板显示具体内容。

单击标签,可以对标签进行颜色改变、设为已解决、编辑、删除等。

备考信息

·其他力量

左侧漏斗图标:点击可以进行左侧该页面的史更新信息,目前免费账户只能查相最近同次于的更新。

加减号:放大缩小页面百分比。

弹来图标:可以拿欠页面单独弹有显示。

下手下比赛加号图标:添加备注信息。

Notes图标:显示/隐藏备注信息。

另职能

用Tags来治本页面

右键点击页面弹有菜谱,选择“Add
Tag”
可以加上标签,在早就补偿加Tag的页面右键单击弹出之会晤是“Manage
Tags”
,一个页面可以加上多独Tag,点击Tag栏来罗当前签的页面,如下Gif图:

add tag

除此以外,我们尚足以把Tag转化成为区域标题来开内容筛选,当Tag转化成区域标题以后该Tag就熄灭了,当前页面的变现方式也改为了列表显示方式。

① V1.0对应login,V2.0对应play

② 右键点击Tag弹有菜谱选择”Convert to Section”

③ Tag转化成为了区域标题,右侧三角箭头可以进行/隐藏页面

· Section相关操作

点击右侧还多图标弹出菜谱

Edit Description – 于区域标题下方添加描述信息,e.g. 这里是乐播放界面

Rename Section – 重命名区域标题,e.g. V 2.0

Move Section Down –
把该区域内容倒到下方区域(这里发生重利于之拖动方式,鼠标点击标题前方的图标即可形成拖动)

Delete Section – 删除该区域

Move Screen to Project –
当您出差不多个门类的下(高级会员),可以将该区域内容倒至其它类,至于免费用户,自然会弹出框告诉您快到钱升级会员^_^

 Section相关操作

拖动区域排序

最后…

复享受一个便捷小操作,再举行页面适配的常我们有时用懂得一个动态百分比而非固定值,zeplin页面内,按停option键就好就看到pt和%转换

pt和%转换


以上Zeplin版本Version 1.22.2 (316)

Sketch Version 47.1 (45422)

相关文章