从设计到代码

我们已经有一段时间没有更新关于 xLayers 的信息了。在本文中，我们将介绍 xLayers 以及它能为设计师或开发人员的日常工作带来的价值。但首先，让我们重申一下 xLayers 的目标，这将有助于我们理解 xLayers 的创建意义。

目标：

xLayers 是一款旨在弥合设计师和开发人员之间鸿沟的在线 Web 应用程序。它的使命是为设计师和开发人员打造一个轻松协作的环境，从而实现快速迭代。

既然我们都了解了主要目标，接下来让我们看看 xLayers 是如何运作的。我们在 xLayers 中的学习之旅将分为三个部分，我们将从草图文件逐步过渡到代码。

第一部分，从 SketchApp 到 xLayers：

在使用 xLayers 之前，我们需要一个“草图”文件。有了这个文件，我们就可以开始使用 xLayers 了！（如果您没有任何草图文件，不用担心，我们提供了一些示例文件）

打开https://xlayers.dev，我们将进入首页。在这个页面上，您可以看到关于 xLayers 所有功能的各种信息。请浏览一下。现在，我们将继续学习如何从 Sketch 创建代码。

在首页上，你会看到一个写着“开始使用”的按钮，我们来按下这个按钮。

在这里，我们可以上传自己的草图文件，或者选择一个示例文件。

xLayers 将分析此文件并在您的浏览器中创建一个实时示例。此实时示例称为组件查看器，它以 HTML 格式呈现设计的草图文件。

太好了，我们继续下一部分！

第二部分，协作

现在我们进入了组件查看器，我们鼓励设计人员和开发人员并肩而坐，就组件查看器中可见的设计部分进行讨论。

xLayers 的目标和强大功能现在一目了然。您可以使用查看器来讨论组件的各个方面，并检查所有部分是否正确。在查看器中，您可以通过左侧边栏或点击图层轻松查看每个已创建的页面及其图层。选中图层后，该图层将以红色边框突出显示。

要查看更多详细信息，您可以使用顶部工具栏，这些操作都有各自的目标。

放大：

点击放大镜（如下图所示）或按住 Ctrl 键并移动鼠标即可放大。

缩小画面：

可以通过点击放大镜（如下图所示）或按住 Ctrl 键并移动鼠标来缩小画面。

重置为初始缩放级别：

按下“基本放大镜”按钮，缩放级别将重置为初始缩放级别。

3D：

按下 3D 按钮后，您可以以 3D 视角查看所有不同的图层。按住左 Shift 键并将鼠标移到一侧，您甚至可以浏览所有图层并从不同角度查看它们。

第三部分，源代码：

工具栏中的最后一个操作会将您引导至代码生成界面。导航后，您将看到一组基于草图文件生成的代码。默认情况下，它会打开并选择 Angular 框架，但您也可以选择自己喜欢的框架。

在这个页面上，您也可以使用工具栏。只是这次选项较少。其中一个选项是使用 StackBlitz 作为您的在线 IDE。启用此功能后，所有代码都将发布到 StackBlitz，您将拥有一个可以在在线 IDE 中使用的项目设置🚀。

第二种方法是下载所有代码。选择此选项，您将获得一个压缩的 zip 文件，可以下载到您的计算机上。这样，您可以轻松地将其集成到所需的代码库中。

xLayer 的未来发展方向是什么？

目前我们主要关注以下几个主题：

• 除了 Web 框架之外，还支持 Xamarin。
• 拥有全新的草图解析器，可以处理位图和 SVG，并且具有更多扩展性

谢谢

感谢您阅读我们的文章，我们希望这篇文章能鼓励您尝试使用 xLayers，因为它非常易于使用，并且在设计师和开发人员之间的协作中提供了很大的价值。

您是否愿意为 xLayers 贡献力量？我们为新手用户准备了一些问题解答，并乐意为您提供各种帮助。除了贡献代码，您还可以通过捐赠来支持我们，这样我们就能开发更多路线图上的功能。