我是Acronis的首席设计师Sergey。 在本文中，我将讨论我们不仅实现而且为公司内其他设计人员开发的那些工具。 这是关于Sketch的插件，控制台实用程序和Chrome扩展程序。
首先，让我们简要介绍一下生态系统的主要功能，然后深入研究细节并更详细地讨论每个工具。 这样啊 插件可以为表生成数据，将缩进保存在按钮中，将文本翻译成不同的语言，打开实时组件，Zeplin中组件的文档以及Jira中实际任务的列表。 控制台实用程序可以清除垃圾中的SVG，收集字体图标并将这些字体自动连接到所有产品和服务。 Chrome扩展程序可让您检查元素之间的正确缩进布局，而无需打开浏览器检查器或在图形编辑器中使用标尺测量这些缩进。 现在，让我们看一下我们生态系统的示意图，并尝试更详细地了解所有内容。
基本草图插件
基本的插件集不仅包括我们编写的解决方案，还包括第三方开发人员的开源项目，我们可以根据自己的需求进行调整或将其集成到生态系统中。
资料
我们的界面有很多表。 表内部包含大量特定数据。 每当您需要一组新的列，长时间甚至有害的练习时，要用手敲击这些特定数据。 为了消除设计人员的部分机械工作，我们组装了一个包含大量此类非常具体数据的插件。 操作原理与数十个其他用于Sketch的虚拟数据生成器没有什么不同。 值取自JSON，并根据选定的类别被顺序或随机替换到选定的列中。
调色板
由于Acronis的产品使用自己的颜色，因此我们需要一种解决方案，使我们能够在调色板之间快速切换，而不是将所有产品的颜色存储在一个大列表中。 该插件与本机Color Inspector一起使用，可让您保存，加载或删除以前连接的调色板。 如果您梦dream以求已经很久了，请查看Andrew Fiorillo撰写的Sketch Palettes。 我们使用类似的实现。
https://github.com/andrewfiorillo/sketch-palettes
要使用按钮，我们使用Ken Moore的Relabel Button插件。
https://github.com/kenmoore/sketch-relabel-button
而是对叉子进行了稍微的修改和优化，以满足我们的需求。 插件的主要任务是覆盖字符内的文本值并保存先前设置的缩进。 该插件可以处理字符内部的复杂绑定，并且在发布下一版新的Sketch后不会中断。
翻译
我们提供26种语言的产品和服务。 英语是我们在布局中使用的主要语言。 在将布局提交给开发之前，我们必须确保绘制的界面可以承受本地化检查。 用于本地化的最“有问题”语言之一是德语和俄语（以及波兰语，意大利语等）。 这些语言的平均单词长度比英语长20％。
俄语，英语和德语文本的单词长度分布。
V.V. 博伊科夫（NA） 茹科娃（L.A.） 罗曼诺娃。 特维尔经济管理学院
在进行干预之前，流程如下：设计者从Sketch复制有争议的文本，使用Yandex或Google Translate进行翻译，将其返回给Sketch，进行检查，然后重复该过程。 在大多数情况下，没有人对系统进行任何测试，并且该接口照常开发。 这种方法的逻辑结果是将语言环境连接到测试台之后，UI上出现了许多错误。
为了使这部分工作变得不那么常规和更加系统化（请阅读，请设计人员检查界面），我们提供了一个插件，该插件可通过Yandex.API运行，并且可以将选定的文本层转换为所有必需的语言。
当然，这是机器翻译。 它没有考虑到词汇或术语的特殊性，并且在大多数情况下，将与母语人士的翻译有很大不同。 但是！ 在设计阶段，它就可以对接口的有争议的部分进行更详细的研究，并避免在后续实现过程中出现许多潜在的问题。
自动完成
该插件将自动完成功能添加到用于创建新角色的本机对话框中。 那些至少曾经在Sketch中创建角色并将其构建为层次结构的人，只需看一下要哭的演示即可。
我们从Griffin Stewie那里获得了原始的SymbolNameAutocomplete插件，并将其添加到我们的生态系统中，没有任何更改。
https://github.com/griffin-stewie/SymbolName自动完成
探索素描插件
浏览插件可让您将Sketch中的组件与沙箱中的实时组件相关联，在Zeplin中将符号附加到文档中，并提供对Jira中当前任务的访问权限。 插件使用skpm构建，并使用sketch-module-web-view。
https://github.com/skpm/skpm
https://github.com/skpm/sketch-module-web-view
游乐场和文档
Playground插件将Sketch中的角色（读取的组件）与沙箱中的实时组件相关联。 从简单的按钮到复杂的工具栏，就可以在画板上放置任何符号，然后使用键盘上的菜单操作或快捷方式，转到代码中包含此组件实现的页面。
Zeplin存储了100多个文件，其中详细描述了设计系统中使用的组件和模式。 为了简化对每个组件信息的搜索，我们制作了一个Docs插件，该插件将Sketch中的字符与Zeplin中的文档相关联，这对于新设计人员来说非常关键。
现在让我们来看看它的工作原理。 当我们在画板上选择一个字符并运行其中一个插件时，一个正则表达式开始工作，该正则表达式在符号名称中查找后缀“ -c”。 由于某些组件可以用一个名称组合在一个部分中（例如，“按钮”部分组合了主按钮，辅助按钮，重影按钮，状态按钮），因此后缀可以位于符号名称中的任何位置。
找到后缀后，主脚本会拉动config.js，并将Sketch中符号的名称与字典中的名称进行比较。 找到匹配项后，便立即过渡到Web视图或Zeplin。 对于Zeplin，您可以同时使用https：//和zpl：//作为链接。 对于https：// Web版本的Zeplin将打开，对于zpl：//应用程序本身。
我的任务
该插件可让您转到Jira中的当前任务列表，这些任务已按NEW，OPEN，DRAFTING，IN PROGRESS状态过滤。 自然，使用该插件的每个人都只会看到他们当前的任务列表。
保持更新或appcast.xml
由于某些原因，我们不能使用第三方服务来发布和更新我们的插件，因此有必要找到一种解决方案，该解决方案不仅可以自动更新插件，还可以将其放置在公司内部资源中。
从45版开始，Sketch提供了官方的插件更新机制。 在manifest.json中，将带有URL的行添加到appcast.xml文件，其中包含有关可用更新的信息。 在对插件进行更改并发送请求池之后，Jenkins已连接，这会将新版本的插件放在内部服务器上，并将相应的条目添加到appcast.xml中。
每次启动后，Sketch都会检查该文件，查看可用版本并将它们与已安装插件的版本进行比较。 如果appcast.xml记录了新版本，则Sketch中会出现一个标签，通知您有更新。
控制台实用程序
Gulp清洁＆图标字体
那些至少曾经打开过从Sketch导出到SVG的图标的代码的人知道，此代码包含大量垃圾，可以在进一步使用前删除它们。 为了尽可能快地大规模执行此操作，我们编写了一个gulp任务，该任务使用控制台中的正则表达式和一个命令来删除所有不必要的内容并重新组装SVG。
Gulp iconfont将所有“干净”图标收集为一种字体，并将新版本分发给与该字体连接的所有产品。 在新程序集投入生产之前，将在浏览器中打开包含所有字形的字体预览，您可以在其中检查所添加图标的正确显示。 您可以在上一篇文章中了解有关我们如何自动化和简化添加新图标的过程的更多信息：
Acronis设计系统 第二部分 图标，SVG字体，Gulp
Chrome扩展程序
检查
我们的缩进系统基于8px的网格。 因此，不是8px倍数的元素之间的所有缩进在开发方的实现中都被视为错误。 为了简化检查这些缩进的过程，我们对Chrome进行了扩展，它模拟了本机浏览器检查器中的盒模型。 该扩展名无需打开devtool即可显示边距，填充及其数值。
而不是结论
在某些人看来，这一切都是极其复杂的，这是一个严重的发展，而且耗时很多。 我赶紧保证，事实并非如此。 我们没有专门参与复杂的开发，也没有做复杂的事情来支持我们将来必须花费很多时间。 以最少的时间获得最大的收益是我们解决方案的基本原则。 这种方法不仅允许进行大量廉价的实验，而且可以快速积累与设计相关领域的经验和专业知识。
特别感谢Kirill Savelov，Dmitry Kozlov和Shawn Xu的帮助，耐心和支持。
链接清单