当前您所在的位置:首页>新闻中心>新品发布
新品发布
行业动态
营销活动

Sketch和Zeplin:帮助设计师和开发人员协作

发布时间:2020/04/15 浏览量:2289

Sketch和Zeplin:帮助设计师和开发人员协作

 

设计师和开发人员之间的协作程度对于项目的成功至关重要,并且它是衡量一个团队成功的标准。尽管在同一个办公场所工作很常见,但通过网络来协同办公也是可以的。在本文中,我们将看看如何将Zeplin与Sketch结合起来使用。

 

Sketch的快速入门

 

这个软件的好处在于它是专门用于界面和图标设计的;从具有特定尺寸的网页,移动设备和图标到具有帮助加强设计流程的功能的Sketchboard,简直是设计师必备。以下是一些示例,可以帮助你了解使用Sketch可以做些什么:

image001.png

  1. UI图稿

  2. 使用Inspector查找有关特定对象的所有详细信息(大小,位置,颜色,字体洋式,不透明度等等)。

  3. 使用“ 导出”功能可将Artboard或单个对象导出为特定的文件格式(PNG,JPG,PDF等)。

 

“我是一名开发者,我从未使用过Sketch!”

 

我们不应该要求开发人员精通设计师用于仿真产品的工具。也就是说,我们也不应该要求设计师摆脱他们最擅长的事情:设计!  每次交付设计时构建“规范文档”远非“敏捷”,并且可能意味着在交付设计和需要迭代之间浪费大量时间。

 

Zeplin

 

这是Zeplin大显身手的时候。Zeplin是面向UI设计师和前端开发人员的协作工具。它超越了设计工作流程,并帮助团队完成设计交付。

它允许设计师直接从Sketch上传他们的线框或视觉设计,并将它们添加到Zeplin的项目活页夹中。这可能是最好的工具了? 注释会自动添加到设计中(尺寸,颜色,边距,甚至某些元素的CSS建议),这将为你提供整个团队的在线存储库。

 

“当Zeplin作为一个单一来源时,它可以很好地协同工作。

此外,由于它可以作为独立应用程序以及Web应用程序提供相应素材,因此你可以在任何地方访问它。可以轻松检查设计和空间,尺寸,颜色等。“ - Daniel Setas Pontes,Javascript开发人员@NOW TV,Sky

 

将设计稿从Sketch导出到Zeplin

 

Zeplin在Sketch中作为一份插件,因此上传设计是一项简单活儿。

以下是如何开始一个项目:

 

image002.png

  1. 下载Zeplin并安装。开发人员不需要运行OS X,因为他们只需访问基于Web的工具即可访问内容。

  2. 创建项目。

  3. 选择你设计的平台。

  4. 标出项目名称。

image003.png

 

在Sketch中,选择单个对象并将它们导出。这将使你的开发团队能够在以后从Zeplin内导出每个元素。这是如何使用的呢:

 

image004.png

 

  1. 接下来,选择要上传到Zeplin的画板。

  2. 转到插件> Zeplin> 导出选定的画板。

  3. 选择你要上传设计元素,然后点击导入。

 

使用Zeplin一起工作

 

一旦进入Zeplin,你可以在项目之间导航并轻松探索其中的所有组件。查明某些元素的规格也很直观; 选择你想要的元素,然后所有的相关信息将出现在右侧栏中。

image005.png

 

开发者:一旦你打开了基于网络的工具并登录,以下是它的工作原理:

  1. 选择你想要检查的对象。

  2. 查看右侧栏中的详细信息,如字体洋式,颜色等(信息将根据妳选择的对象显示)。

  3. 复制CSS。

image006.png

 

如果设计团队在将设计导入Zeplin时允许选择素材元素,开发团队应该能够导出个人资产。资产将以SVG格式和三种不同的PNG尺寸下载。

 

image007.png

  1. 在这里,你可以将注释添加到设计中。

  2. 在这里,你可以复制和分享项目链接,甚至可以与团队的Slack频道集成以获取通知或邀请团队成员进行协作!

 

为什么你的团队应该采取协同办公

 

使用Zeplin协同办公有很多优点,下面是一些例子:

  • 你将避免构建规格文文件; 这既不敏捷也不容易更新。

  • 为开发人员和其他设计人员创建具有所有相关信息的实时注释设计。

  • 你可以创建可导出的设计,因此开发人员可以快速访问单个资产。

  • 创建你想要的项目,然后只需点击几下即可上传和更新。

  • 创建帮助设计团队保持一致的风格指南。

  • 利用Slack,每次有更新时立即通知你的团队。

尝试一下!

使用Zeplin来进行Sketch的协同办公是设计师与开发人员合作的绝佳方式。

北京哲想软件有限公司