从 Sketch 到 React Js 有哪些选择?

What are the options available to go from Sketch to ReacJs?

有哪些选项可用于将 Mac UX 设计的 Sketch 导出到 ReactJS 组件以供编码团队使用。

从这些选项中,推荐的选项是什么?每个选项的优缺点?

我们需要一些可以自动化 ReactJs 组件编码工作的东西,支持 flex 并提供对 Web 应用程序和 react-native 代码的支持。

我们的场景是一个 SaaS 应用程序,我们在其中进行所有编码(html、css 和 js),我们希望使用 Sketch 更好地开发 UX,然后为我们的 UX 组件生成基本代码由我们的编码团队工作。

我们开发了多年的web和app,也有同样的问题。 我们有草图设计,将设计编码到网页和应用程序中确实需要很多时间。

目前,减轻痛苦的最佳工具是可提高生产力和通信开销的交接工具。 像 Anima 这样的工具很少,它对原型制作很有用,但不容易用于代码修改和集成。最后,我们发现代码质量的关键是组和布局的正确结构,这在 Sketch 设计文件中不容易表示。因此,我们的解决方案将关键决策留给用户来决定其响应行为的组结构,并且我们提供了一种直观且快速的方法来创建 React 组件。在我们早期的实验中,在不牺牲代码质量的情况下,它会比手动编码快得多。

您可以通过 github

查看导出代码

https://github.com/px2code/pxCode-Sketch-to-React-Example1

或直接勾选codesandbox通过

预览和编辑代码

https://codesandbox.io/s/pxcode-example-s9sxx?file=/src/components/Card.js

这更像是一个两步过程。首先,您需要导入草图文件,您可以使用 Desech Studio 执行此操作。这将创建一个 html 结构,其中元素使用 css grids 定位,而不是绝对位置。但是您仍然需要对边距和大小进行一些更改以匹配您的设计。

然后您可以在您的项目中安装并启用 react 插件,然后将代码导出为 react 代码。查看 github repo 了解更多详情。

但这仅适用于 web react,不适用于 react-native。也许你可以基于现有的 React web 制作自己的插件,但我还没有尝试过。

所以有利有弊。优点是它可以自动化并加快速度。缺点是自动化需要您做一些工作。