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