香港澳门葡京网址Sketch插件⎡Zeplin⎦详细介绍

香港澳门葡京网址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)

admin

网站地图xml地图