有哪些选项可以将 Sketch for Mac UX 设计导出到 ReactJS 组件以供编码团队使用。
从这些选项中,每个选项的推荐、优缺点是什么?
我们需要一些可以自动化 ReactJs 组件编码工作、支持flex
并为 Web 应用程序和react-native
代码提供支持的东西。
我们的场景是一个 SaaS 应用程序,我们在其中执行所有编码(html、css 和 js(,我们希望使用 Sketch 更好地开发 UX,然后为我们的 UX 组件生成基本代码,由我们的编码团队工作。
我们已经开发了多年的网络和应用程序,也有同样的问题。 我们有草图设计,将设计编码到Web和应用程序中确实需要很多时间。
目前,减轻痛苦的最佳工具是提高生产力和通信开销的切换工具。 像Anima这样的工具很少,它对原型设计有好处,但不容易用于代码修改和集成。最后,我们发现质量代码的关键是组和布局的正确结构,这在 Sketch 设计文件中不容易表示。因此,我们的解决方案将关键决策留给用户来决定响应行为的组结构,并且我们提供了一种直观快速的方式来创建 react 组件。在我们早期的实验中,它比手动编码快得多,而不会牺牲代码质量。
您可以通过 github 签出导出代码
https://github.com/px2code/pxCode-Sketch-to-React-Example1
或直接检查代码沙箱以预览和编辑代码
https://codesandbox.io/s/pxcode-example-s9sxx?file=/src/components/Card.js
这更像是一个 2 步过程。首先,您需要导入草图文件,您可以使用Desech Studio执行此操作。这将创建一个 html 结构,其中元素的位置是css grids
,而不是绝对位置。但是您仍然需要对边距和大小进行一些更改以匹配您的设计。
然后,您可以将 react 插件安装并启用到您的项目中,然后将代码导出为 react 代码。查看 github 存储库以获取更多详细信息。
但这仅适用于 web react,而不是 react-native。也许您可以基于现有的 react web 插件制作自己的插件,但我还没有尝试过。
所以优点和缺点。优点是它可以自动化并加快速度。缺点是自动化需要您进行一些工作。