30-50% off hundreds of digital assets! WordPress themes, video, music and more 30-50% Off Go to Sale
Advertisement
  1. Web Design
  2. Sketch
Webdesign

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

Length:LongLanguages:

Chinese (Simplified) (中文(简体)) translation by Fuhuan (you can also view the original English article)

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

Sketch的快速入门

大约六个月前,我转职时曾被鼓励去尝试Sketch这款软件。这个软件的好处在于它是专门用于界面和图标设计的;从具有特定尺寸的网页,移动设备和图标到具有帮助加强设计流程的功能的Sketchboard,简直是设计师必备。

而Photoshop和Illustrator就很难快速入门。

以下是一些示例,可以帮助你了解使用Sketch可以做些什么:

  1. UI图稿
  2. 使用Inspector查找有关特定对象的所有详细信息(大小,位置,颜色,字体样式,不透明度等等)。
  3. 使用“ 导出”功能可将Artboard或单个对象导出为特定的文件格式(PNG,JPG,PDF等)。

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

近年来,设计人员已经学会了使用InVision等工具进行办公协作,但该平台仍然无法让开发团队进行协作办公。

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

Zeplin

这是Zeplin大显身手的时候。

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

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

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

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

将设计稿从Sketch导出到Zeplin

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

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

开始使用Zeplin
  1. 下载Zeplin(仅适用于Mac)并安装。开发人员不需要运行OS X,因为他们只需访问基于Web的工具即可访问内容。
  2. 创建项目。
  3. 选择你设计的平台。
  4. 标出项目名称。
Export from Sketch
从Sketch导出

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

  1. 接下来,选择要上传到Zeplin的画板。
  2. 转到插件> Zeplin> 导出选定的画板。
  3. 选择你要上传设计项目,然后点击导入。

使用Zeplin一起工作

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

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

  1. 选择你想要检查的对象。
  2. 查看右侧栏中的详细信息,如字体样式,颜色等(信息将根据你选择的对象显示)。
  3. 复制CSS。

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

  1. 在这里,你可以将注释和注释添加到设计中。
  2. 在这里,你可以复制和分享项目链接,甚至可以与团队的Slack频道集成以获取通知或邀请团队成员进行协作!

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

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

  • 你将避免构建规格文档; 这既不敏捷也不容易更新。
  • 为开发人员和其他设计人员创建具有所有相关信息的即时注释设计。
  • 你可以创建可导出的设计,因此开发人员可以快速访问单个资产。
  • 创建你想要的项目,然后只需点击几下即可上传和更新。
  • 创建帮助设计团队保持一致的风格指南。
  • 利用Slack,每次有更新时立即通知你的团队。

尝试一下!

使用Zeplin来进行Sketch的协同办公是设计师与开发人员合作的绝佳方式。我的团队喜欢以这种方式工作 - 我很想听听到你对于这些工具的看法!

相关的链接

  • Sketch插件
  • 关于Envato Tuts +的Sketch教程
  • 在Envato市场上绘制网站模板
  •  Twitter上的@zeplin_io账号
  • zeplin.io
Envato qr branded
关注我们的公众号
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.