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

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

软件特点

这次，完成从你需要使用的Sketch中文件的导出。

而且，Zeplin的分组和设置功能可以让您快速完成相关操作。

支持快速查看CSS样式并导出已完成的设计稿

支持使用您需要使用的更改来标记文件

快速对文件进行笔记并支持评论功能

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

特征

一站式定制资源

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

一键导出设计

无需改变您的设计方式，只需使用我们的Sketch、Adobe XD CC、Figma、Adobe Photoshop CC 插件一键导出您的文件。

让每个人都在同一页面上

在Zeplin 的云端退出和存储设计项目，在同一屋檐下。快速邀请队友、共享链接并进行构建。

沟通设计

直接在设计上添加评论以传达想法、反馈或请求技术细节。为了让事情井井有条，请对笔记进行颜色编码，并在完成后处理它们。

通过集成加快您的工作流程

将ZePin 添加到Slack 频道或TelLo 看板可加快您的工作流程并始终让您的团队了解最新情况。

建立团队的设计知识库

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

指示

下载完成后，我们打开本地App，点击右上角的创建，创建一个新项目。它有多种模式，Android、iOS 和Web，每种模式下面都有相应的说明。

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

从Sketch 导出文件

接下来我们打开Sketch 并选择菜单- 插件- Zeplin - 导出选定的画板.

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

你可以注意到左下角有一个“替换同名的屏幕”。这意味着，如果项目已经导入，但是我们Sketch中的设计稿被修改了，我们需要在Zeplin上更新设计稿，检查它是否替换原来的。文件。

Zeplin 分组和设置

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

这里我们将其命名为“产品相关”。看文件名右侧，有一个小三角标记，点击它可以轻松折叠或展开文件分组。

然后旁边有一个更多操作的按钮。如果我们点击它，我们还可以为组添加描述、重命名组、移动组或删除组。

查看CSS 样式

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

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

导出设计稿图片

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

但不要忘记，您需要先在Sketch 中为此图像设置导出。

标签文件

接下来我们看一下Zeplin的标签功能。你可以看到这个文件已经有一个“topic”标签。我们还可以为其选择其他标签，或者输入新标签。这些标签也可以删除。

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

由于最初Zeplin 不具备创建组的能力，因此我们使用标签对文件进行分类。现在我们可以使用标签来做更详细的过滤条件。

注释或评论

接下来我们看看评论功能。我们可以回复评论、更改评论的颜色或删除评论。

您还可以添加新评论。 CMD + 鼠标单击空白区域并输入您的评论。

注意。文件右下角有一个睁着眼睛的Notes小猴子标志。如果您点击它，您可以隐藏页面上的所有评论。