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