Zeplin是一款高效的绘图软件，可以帮助用户更好的设计和制作图片，为用户提供批注、样式指南、笔记和简单的团队协作功能，还可以自动生成尺寸标注、CSS样式代码、导出图片等等。

软件特色

这一次，从您需要使用的草图中导出文件。

并且对于Zeplin的分组，设置功能，这样可以快速完成相关操作。

支持快速查看css样式并导出您完成的设计草稿。

支持键入您需要在文件中使用的更改。

快速对文档进行评论，支持评论功能。

还可以显示相关数值，快速完成查看。

功能介绍

在一个地方定制资源

Zeplin将从为您开发的平台定制的设计中自动生成准确的规格、资产和代码片段。不再丢失在设计文件中。

一键出口设计

您不需要改变您的设计方法，只需一键导出您的文件，并使用我们的草图、Adobe XD CC、Figma和Adobe photoshop CC插件。

让大家站在同一页上。

Zeplin的出口和商店设计项目在云中，在一个屋檐下。快速邀请队友，分享链接，建立。

在设计中交流。

直接向设计添加评论，以传达想法、反馈或请求技术细节。为了让事情有条理，给你的笔记涂上颜色，完成后再解答。

通过集成加速您的工作流程。

将ZePin添加到放松频道或TelLo board，以加快您的工作流程，并始终保持团队的最新状态。

建立团队的设计知识库

收集和组织团队的项目和资源，如组件、颜色和文本样式。存储旧版本和项目，并在必要时快速引用它们。

施用方式

下载完成后，我们打开本地App，点击右上角的Create，创建一个新项目。它有多种模式，Android，iOS，Web，下面会一一介绍。

这里我们选择Web，可以看到CSS和HTML。

从草图导出文件

让我们打开草图并选择菜单->；插件-& gt；Zeplin-& gt；导出选定的画板...

这时会弹出Zeplin的导入窗口，选择要导入的项目。

大家可以注意到左下角有一个“替换同名文件”的字样，意思是如果项目已经导入，但是我们草图中的设计稿已经修改，并且Zeplin上的设计稿需要更新，可以通过打勾来替换原文件。

Zeplin的分组和设置

导入完成后会自动弹出Zeplin的App，我们可以看到文件都在Zeplin里。鼠标悬停在第一个文件的最左侧，会出现一个类似除法符号的符号。单击它，我们可以为这些文件创建一个组。

这里我们称之为“商品相关”。看文件名的右边，有一个小三角符号，点击它可以轻松折叠或展开文件分组。

然后旁边还有一个更多操作的按钮。我们可以向该组添加描述、重命名该组、移动该组或通过单击删除该组。

查看CSS样式

我们输入Zeplin的设计稿，点击一个区域，如下图。我们可以看到这个区域的px大小，以及它与其他元素的距离。

查看面板的右侧，我们还会看到它的CSS相关值，比如box-shadow。

导出设计草图图片

Zeplin还有一个很好的功能，就是导出图片。矢量图片可以包含PNG和SVG格式。

但是不要忘了，你需要先在Sketch中为这张图片设置导出。

给文件贴标签

那么我们来看看Zeplin 功能的标签。您可以看到这个文档已经有了一个“主题”标签。我们也可以为它选择另一个标签，或者输入一个新标签。您也可以删除这些标签。

然后返回主面板。我们可以注意到顶部有两行标签。例如，如果我们选择“专题”，我们将看到所有标有“专题”的文档。

起初，Zeplin并没有创建分组功能，所以我们使用标签对文件进行分类。现在我们可以使用标签来制定更详细的过滤条件。

备注或评论

然后看评论功能。我们可以回复评论，或者改变评论的颜色，或者删除评论。

您还可以添加注释。CMD+单击空白区域并输入您的注释。

注意一下。文件右下角有一个张着笔记眼睛的小猴签。如果你点击它，你可以隐藏页面上的所有评论。