使用 React Studio 将基于 Sketch 的设计系统转换为真实代码

rAc

158人浏览 · 2022-08-15 04:25:55

rAc · 2022-08-15 04:25:55 发布

Sketch 的符号和覆盖使得创建复杂的 UI 设计库成为可能。使用免费的React Studio及其 Sketch 传输插件,您可以将这些 Sketch 符号转换为真正的 UI 组件(无需编写代码!)并从您的 Sketch 设计中获取实际的 React 项目。这是一个渐进的过程:您不必丢弃任何东西,甚至已经实现的代码也不必丢弃。这篇文章展示了它是如何工作的。

在本教程中,我们将从移动应用程序的 Sketch 设计开始:

![](data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27800%27%20height=%27600%27/%3e)

最终结果将是这个具有完整源代码的移动优先 ReactJS Web 应用程序:

Experience Mars — 演示站点发布自 React Studio

该设计在从 Sketch 转换为 React Studio 时具有响应性,因此要了解最终产品与原始 Sketch 设计的关系,请尝试调整浏览器窗口的大小 — 甚至更好,查看手机上的链接。

这个 Sketch 设计有一个有趣的特性,它本身并不显着,但却是更伟大事物的“种子”。每个画板(u003d 每个应用程序屏幕)上都有一个按钮符号。我们想把这个符号变成一个可重用的 React 组件。 Sketch 中的覆盖已用于配置符号,以便每个按钮具有不同的标签;我们还希望自动将这些覆盖转移到代码中的 React 属性中。有了这两个强大的概念 - 符号到 React 组件,覆盖到 React 属性 - 我们有一个工作流程的起点,可以将您的设计系统提升到一个全新的水平。

您可以在此处下载 Sketch 文档:火星体验资料。 (这个 zip 还包括完成的 React Studio 项目。)

接下来,您还需要 React Studio 应用程序和 Sketch 的“Transfer to React Studio”插件。

React Studio 是 Apple macOS](https://reactstudio.com/?ref=hackernoon.com)的[免费下载。 (抱歉,目前没有 Windows 或 Linux 版本。)您可以在同一页面上找到 Sketch 插件。

React Studio 的 Project Map 视图中已完成的项目如下所示:

![](data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27800%27%20height=%27600%27/%3e)

作为额外的奖励,您还将看到如何在 React Studio 中创建动态列表(对于应用程序的“目的地”页面)。

旁注:Sketch 文档和 React Studio 项目使用的字体与您在屏幕截图中看到的字体不同,这仅仅是因为许可 — 我们无法分发该字体。

第一次从 Sketch 导入:映射符号

为了获得正确的符号到组件映射,我们需要使用“Transfer to React Studio”插件进行两次传递。在第一遍中,我们将只关注按钮符号并确保其属性设置正确。

在 React Studio 中,确保您打开了一个空文档。一个新创建的项目将有一个名为“开始”的默认屏幕 — 你可以删除它。

在 Sketch 中,选择“主菜单”画板。在 Plugins 菜单中,选择_Transfer to React Studio > Selected artboard_。

在 React Studio 中,你会看到:

![](data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27800%27%20height=%27596%27/%3e)

名为“Mars 主按钮”的 Sketch 符号被作为一个组件传输,“主菜单”画板变成了一个包含对该组件的引用的屏幕。

双击主菜单屏幕将其打开以进行编辑。你会发现有些东西不见了 — 我们在 Sketch 端的覆盖没有通过,所以按钮的每个实例都有相同的标签:

![](data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27800%27%20height=%27600%27/%3e)

为了解决这个问题,我们需要在导入的“Mars 主按钮”组件中添加一个_property_。

双击三个按钮中的任何一个。组件打开进行编辑:

![](data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27800%27%20height=%27258%27/%3e)

单击文本标签将其选中,然后在检查器中打开 Data 选项卡(在 React Studio 窗口的右侧)。单击“文本”标签旁边的按钮,然后选择“新建”:

![](data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27800%27%20height=%27214%27/%3e)

现在系统会提示您为这个新属性选择一个名称。输入“标签”,然后按 OK。你现在会看到这个:

![](data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27800%27%20height=%27264%27/%3e)

在画布区域的左侧,React Studio 向您展示了该组件的所有属性。蓝线是一个视觉助手,它连接到链接到属性的元素,即,将根据使用此组件时分配给属性的任何值来获取其值。

现在在 Project Map 中选择“Mars main button”组件。在检查器中查找名为“Symbol id”的设置,并在那里输入“Mars main button”:

![](data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27800%27%20height=%27190%27/%3e)

这告诉 Sketch 导入器任何具有此名称的符号实例都应替换为此组件。

我们的组件现在可以使用了,我们可以重新导入画板。

第二次从 Sketch 导入:工作覆盖

该插件提供强大的同步功能,可让您更新已导入一次的屏幕或组件中的元素。 (同步功能足够智能,可以保留您在 React Studio 中定义的任何交互或关键线对齐,因此它非常适合您想要开始构建应用程序但不断更新 Sketch 端设计的情况。)

我们将使用同步来更新屏幕。

在 Sketch 中,选择所有三个画板,然后执行 Plugins > Transfer to React Studio > Sync selected artboards。

你现在会在 React Studio 中看到:

![](data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27800%27%20height=%27600%27/%3e)

打开主菜单屏幕进行编辑,然后单击任一按钮。

你会看到你在 Sketch 文档中的覆盖,像这样......

![](data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27800%27%20height=%27226%27/%3e)

在 React Studio 中已经变成了组件的属性值,像这样:

![](data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27800%27%20height=%27168%27/%3e)

现在您可以在 Sketch 中配置符号并将其自动转换为 React 组件属性。您的设计系统正在这里变成实时代码!

想看看生成的 React 代码 (JavaScript/JSX) 长什么样?在 React Studio 中,打开“Mars 主按钮”组件进行编辑,然后单击工具栏中的 Code Glance 按钮。这将使您立即了解组件的代码:

![](data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27800%27%20height=%27600%27/%3e)

您在此处看到的内容直接来自 Sketch 文档:有两个元素,一个文本标签和一个“披露指示符”图形(React Studio 将其转换为代码中引用的 PNG 资产,Webpack 最终将巧妙地内联以节省带宽) .此处使用内联 CSS 样式显示文本标签,因为这是我们从 Sketch 获得的 — 但您可以在 React Studio 中编辑元素以使用应用程序范围的样式。

(如果您想修改生成的代码怎么办?有一个解决方案 — 在本教程末尾的标题_高级组件_下进行了讨论。)

接下来我们将看看完整的 React 项目 — 但首先我们需要实际制作这个应用程序,你知道,do 一些事情。

添加基本导航

在 React Studio 的 Project Map 中,选择 App Settings 块。在检查器中,在“首次启动”下,选择“主菜单”。这将设置应用程序启动的屏幕。

点击 Project Map 中的 Clean 按钮,可以更整洁地查看应用流程:

![](data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27800%27%20height=%27600%27/%3e)

我们还需要连接“目的地”和“预订”屏幕。

双击“主菜单”,然后选择“目的地”按钮。在检查器中,打开 Interact 选项卡。然后启用“当用户点击时”,选择“转到”,并将_导航目标_设置为“目的地”屏幕:

![](data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27800%27%20height=%27402%27/%3e)

对标有“预订座位”的另一个按钮执行相同操作,并将其指向“预订”屏幕。

在项目地图的背景上单击一次以将其放大。再次按_Clean_,您会看到应用程序的基本流程现已到位:

![](data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27800%27%20height=%27600%27/%3e)

您现在可以运行该应用程序:单击工具栏中的在 Web 浏览器中打开。

React Studio 为您生成一个完整的 Webpack 项目,启动本地 Web 服务器,并在您的 Web 浏览器中打开该站点。 (React Studio 生成的项目使用create-react-app脚手架,这是 Facebook 官方支持的开发单页 React web 应用程序的方式。如果你想看此时的代码输出,很简单 — Dev React Studio 中的服务器窗口会显示项目在 Mac 上的路径。)

缺少一些东西,当您单击其中一个按钮转到另一个屏幕时,您会立即注意到:您的 Mars Experience 应用程序不提供返回上一个屏幕的方法。完成的演示通过在两个屏幕上添加一个返回按钮来解决这个问题。

你可以为此回到 Sketch,但在 React Studio 中也很容易做到。只需抓住一个“图标按钮”元素并将其放入屏幕中。在 Button icon 下的元素检查器中,将其模板更改为“左箭头”。在“交互”选项卡中,为其设置“返回”操作。而已。

默认情况下,新元素放置在 Scroll flow 组中。为了使布局正常工作,您需要将新元素移动到 Foreground 组中。将列表中的元素拖放到 Foreground 下:

![](data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27800%27%20height=%27250%27/%3e)

(将元素直接放置到前景中的另一种方法是在将元素拖到画布上时按下 Alt 键。)

增加响应能力

我们从 Sketch 导入的设计对如何缩放到不同的屏幕尺寸一无所知。要解决此问题,您可以将 React Studio 中的布局设置添加到元素。

这个主题太大了,不适合本教程,但我们有一个单独的帖子:

在 React Studio 中设计响应式 Web 布局➝

如果您查看已完成的 React Studio 项目,您会发现所做的修改非常简单。添加了两条关键线以按比例对齐元素。关键线设置为“主”(因此它们在所有屏幕上都可见),并且所有按钮都与这些关键线对齐。对于背景图像,使用左+右屏幕边缘对齐来确保图像始终填满屏幕。

创建动态列表

Sketch 文档的另一个主要变化是在 Destinations 屏幕中添加了一个动态列表。 Sketch 原版只显示一个列表项,并在其下方显示另一个提示,而完成的演示有一个真正的可滚动的项目列表。

同样由于篇幅限制,我们必须将您引导至另一篇文章,以了解有关列表如何工作的更多详细信息:

在 React Studio 中创建列表和使用实时数据 →

从 Sketch 导入中制作列表的基本部分非常简单。只需选择构成“列表项”的元素(即,将针对列表的每一行重复的组件),然后单击出现在 React Studio 编辑画布右下角的 Make List 快捷按钮。

列表需要数据表来提供其内容。完成的 Mars 演示中使用的数据表如下所示:

![](data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27800%27%20height=%27600%27/%3e)

此模型数据是在 React Studio 中手动输入的 — 但您可以轻松地使用数据插件从其他地方获取数据。特别是,谷歌表格插件对于这种事情非常有用。 (您甚至可以在 Google 表格中包含图片:任何名称带有前缀“img-”的列都将被解释为包含图片链接。)

如果您已经在具有 API 的系统中拥有数据,则可以使用通用 JSON 数据插件将其拉入 React Studio。请注意,数据插件既可以在 Studio 内部工作,也可以在生成的应用程序中工作:插件实际上将必要的 JavaScript 代码写入将动态加载数据的 React 项目。

高级组件:修改和重用现有的 React 代码

在本教程中,我们引入了一个 Sketch 符号并将其转换为一个 React 组件,然后我们创建了一个映射,让我们可以使用 Sketch 覆盖并将它们自动转换为 React 中的属性值。 React 组件的代码由 React Studio 生成。

如果你想修改生成的 React 组件的代码怎么办?或者你的设计系统中已经有 UI 组件的 React 代码,而你真正想要的是将 Sketch 符号映射到这些组件中?

React Studio 对这些问题的回答以 element plugins 的形式出现。如果你对这个主题感兴趣,在继续之前,我会敦促你阅读 React Studio 核心工作原理的概述:

认识设计编译器 →

那篇文章对插件是什么以及它们如何与设计编译器交互进行了全面的概述,设计编译器实际上生成了你从 React Studio 获得的 React 项目。

如果您有一个现有的 React 组件并且您想将其用作 Sketch 映射的目标,请首先将该组件包装到 React Studio 元素插件中,然后将该插件的实例放置在具有“Symbol id”属性的组件中为草图设计转移设置。就这么简单。然后您可以创建属性并将它们连接到您的插件中,这些属性将依次映射到 Sketch 中的覆盖。 (React Studio 也可以处理 npm 依赖项,因此插件代码实际上可以来自那里 — 有关详细信息,请参阅上面的链接帖子。)

如果要修改 React Studio 生成的组件代码,有两种选择。第一个是插件路由,如上所述。第二个是您对生成的项目进行代码修改,并使用版本控制来确保您的手动代码更改和从 React Studio 生成的更改正确合并。这比听起来容易,因为 React Studio 具有内置的 git 版本控制支持:默认情况下,它导出的所有内容都放置在“reactstudio”分支中,并且它会在导出时检测未提交的手动更改,从而为您提供一定程度的安全性围绕这个工作流程.

接下来是什么

我们已经在与一些客户合作,逐步将他们的 Sketch 设计系统带入真正的 React 代码世界。如果您可能对此感兴趣,我们很乐意帮助您解决问题 — 不要犹豫,联系[email protected]。

同样,如果您有想法或功能请求,请在上面的地址给我们发送电子邮件或在此处发表评论。

非常感谢你读到这里,希望它值得你花时间。愿 Progressive Web Apps 与您同在!

React

React社区为您提供最前沿的新闻资讯和知识内容

更多推荐

SSR、ISR、CSR、SSG有什么区别

简介 SSR、ISR、CSR 和 SSG 被称为渲染模式,因为它们是 Web 应用程序相互渲染的不同方式。在本文中,我们将详细研究它们中的每一个,并讨论使用它们的 Web 技术/框架的类型。企业社会责任 CSR 代表客户端渲染。这是一个将页面加载到客户端浏览器而不是服务器上的过程。 CSR 是一种呈现模式,其中浏览器向服务器发送请求,服务器通过发送一个空的 HTML 页面进行响应,其中仅包含对

React

React 中具有“显示更多/更少”功能的代码列表项

我想在我的页面上显示一个元素列表,并且我希望每个元素都具有“显示更多/更少”功能来随意扩展和缩短文本。为此,我将使用 React。我将从以下虚拟 API 获取一些假数据 u003d>jsonplaceholder.typicode.com 我将使用axios这样做。我的结构中将包含三个页面:App.js、Texts.js 和 Text.js。你可以在这里找到 repo u003d>githu

React

React::Angular

苹果与橙子 Angular vs. React:比较苹果和橘子有人说比较 React 和 Angular 就像比较_苹果和橘子_。一个是处理视图的库,另一个是_完整的框架_。反应 React 由 Facebook 开发和维护,并用于他们的产品,包括 Instagram 和 WhatsApp。它自 2013 年以来已经存在了大约,所以它并不是全新的。它也是 GitHub 上最受欢迎的项目之一,

React

所有评论(0)

查看更多评论

rAc

@coc_devpress_16

已为社区贡献29249条内容