介绍
如果您以前从未听说过，Sympli是一种工具，旨在简化采用Photoshop或Sketch设计的界面并将其实现为Web或功能性iOS或Android应用程序的过程。 工作流程如下：首先，设计师为Web，iOS或Android创建一个项目 ，该项目可以包含任意数量的设计 。 这些设计代表您正在开发的应用程序中应该可用的不同屏幕。 接下来，开发人员可以使用这些设计轻松地为网站或新应用创建界面。
在本文中，我将向您展示Sympli提供给开发人员的许多功能中的一些功能，这些功能可以在设计师所做的工作的基础上轻松地为iOS或Android创建应用程序。
1. IDE插件
使用Sympli作为开发人员首先要下载并安装Android Studio或Xcode的插件。 安装这些插件非常容易，如果有任何问题，链接的下载页面上显示的****将为您提供帮助。
2.检查设计模型
适用于Android和Xcode的Sympli插件提供对交互式设计规范的访问（某些团队使用术语“红线文档”）。 打开一个模型，然后单击设计元素，以获取在您的应用中实施设计所需的所有必要信息。
如下面的屏幕截图所示，Sympli为您提供了关于任何特定视图可能需要的所有信息，因此您可以在代码中或在Interface Builder或Layout Editor中手动实现像素完美的设计。
请注意，Sympli会自动将设计模型中的像素转换为点，以及将其他参数（例如填充，阴影和边框）转换为Android或iOS特定的术语和单位。
另外，如果在Sketch中创建了模型，Sympli插件将显示适用于Sketch中小部件的大小调整规则，这有助于开发人员设置适当的约束值。
拖放视图
Sympli开发人员的主要功能之一就是能够将设计中的视图拖放到Android XML或iOS Storyboard文件中。 在创建界面时，Sympli可以通过完全按照原始设计中显示的方式放置和调整视图大小来解决许多麻烦。 除此之外，Sympli还可以配置许多其他属性，例如背景颜色和用于文本视图的自定义字体。
要将样式应用于Xcode的Interface Builder中的现有视图，请按“ Shift”按钮，然后将设计元素拖放到视图中。
要为以编程方式创建的视图生成样式代码，请在鼠标右键按下的情况下将其拖放到控制器的代码中。
从这里开始，您要做的就是修改视图的约束，以便它们可以适应您在不同屏幕尺寸的设备上的期望。 对于iOS，这意味着添加自动布局约束，对于Android，这意味着按照设计的正确布局配置视图。
使用Sympli构建自定义视图
除了生成用于标准视图的样式代码外，Sympli的Xcode插件还可以帮助开发人员基于设计模型中的矢量数据来构建自定义控件。
在样机上选择矢量形状，然后在详细信息面板中按图层名称旁边的“片段”按钮。 这将弹出一个带有Swift代码的弹出窗口，该窗口的绘制方式与程序设计时相同。 还有一个方便的选项，可复制准备好Xcode Playground的代码以立即通过操场的实时预览继续构建自定义视图。
这对于需要在屏幕上手动绘制视图的任何应用程序都非常有用。
3.资产进口
只要设计人员已正确配置并上载了所有内容，Sympli即可负责导入设计中使用的图像和自定义字体。 导入后，Sympli会提示设计人员根据平台的最佳做法来命名图像或字体。 例如，如果将名为Image 1的图像上载到Android项目，Sympli将提示设计器将其重命名为image_1 。 这样可以确保您不必浪费开发时间来重命名文件，从而可以轻松地加载它们。 此外，开发人员可以创建重命名规则，以便每次更新模型时都将应用它们。
在Xcode和Android Studio插件中，在查看设计中的图像或字体时单击下面显示的按钮会将它们导入到您的项目中。
Sympli在导入资产方面非常聪明。 它将图像放入iOS上的资产目录以及Android上项目的resources文件夹中； 它甚至会自动为不同的设备创建缩放版本。
注意 ：Sympli宣布他们将很快为Android Studio和Xcode插件添加一个选项，以从模型中的任何矢量层导出矢量资产（iOS和Android的PDF）。
4.设计模型的自动同步
默认情况下，Sympli会在Xcode和Android Studio插件中启用项目设计的自动同步。 这意味着，即使您正在工作，如果设计人员进行了一些更改并将其上传到Sympli，新的设计将立即在Xcode和Android Studio中可用。
对设计进行更改后，Sympli将自动下载该设计的最新版本并通知您更新。 这样可以确保您不必手动检查您是否正在使用最新的设计，并且无需设计师在进行更改时通知您。
5.设计版本
除了自动下载项目的最新设计副本外，Sympli还使查看任何设计的早期版本变得非常容易。 在IDE插件和Sympli的Web应用程序中，您都可以轻松地查看任何设计的早期版本。
如果您不确定在特定设计的最新版本中进行了哪些更改，这将特别有用。 在Sympli的Web应用程序中，您可以轻松地在同一设计的不同版本之间滑动，以查看进行了哪些更改：
最后，如果您的应用程序版本需要使用较旧的设计，则先前版本的积压订单也可能非常有用。 为避免尝试在电子邮件的下载中查找旧文件的麻烦，使用Sympli，您可以从IDE插件中的简单下拉列表中选择一个版本：
Sympli Webapp提供了一个变更浏览器，您可以在其中直观地比较设计模型的任何两个版本，并排查看变更。 这使得添加，删除和其他更新立即显而易见，从而提高了团队的生产力。 不仅如此，开发人员还可以在属性级别上查看更改-例如，如果颜色略有变化或边框变粗1px。
对于不止一次上传到Sympli的任何模型，顶部栏中都会有一个“浏览更改”按钮，可打开一个并排的更改浏览器。 选择要比较的模型版本，然后单击突出显示的区域以查看实际更改。
6.项目总结
Sympli Web应用程序和IDE插件都可以为您显示任何项目的摘要 。 此摘要屏幕显示了整个项目中使用的所有颜色和字体。 如果您需要获取特定颜色或字体的详细信息，并且不能完全确定使用该资源的设计，这将非常有用。如果您需要开发应用程序，它也可以用作始终可用的参考。需要在未提供设计的地方使用确切的颜色或字体。
结论
如您所见，Sympli使从他人创建的界面设计开发应用程序变得更加容易。 Sympli负责将PSD或Sketch文件转换为iOS的Storyboard或Android的XML的大量手工工作。 由于Sympli节省的时间可以更有效地使用-例如，您可以将时间花在实际功能上，而不是繁琐地复制颜色代码和图像！
如果您想了解有关Sympli的更多信息或想亲自尝试，请访问他们的网站，并查看有关如何安装和使用Xcode和Android Studio插件的一些出色的****。
与往常一样，请确保在下面的评论中留下您的评论和反馈。
翻译自: https://code.tutsplus.com/articles/symplify-your-design-workflow--cms-27143