我们正在尝试利用React react-sketchapp Sketch开发一个工作流程，以便Sketch中的设计人员可以生成React组件，并且代码（至少对于CSS而言）是自动生成和可配置的。似乎没有太多的文档和/或支持。
我们了解在React to Sketch中开发组件的基础知识，但是有人能找到相反的工作流程吗？还有其他有用的想法或文档吗？
我们正在考虑删除react-sketchapp并进入更有效的工作流程
答案 0 :(得分：2)
我们在这个问题上花了很多时间，所以我们可以分享一些在产品开发过程中所学到的经验。
首先，react-sketchapp的方向是“反应草图”，而不是反应草图。
为了草图来解决问题，我们发现的最困难的事情是
设计师专注于视觉，并不关心项目的结构，但是工程师确实关心DOM的结构，因为它是为动态布局和可调整大小而设计的 因此，我们的方法是在无需人工干预的情况下使用一些智能算法（或将来的AI）。有时候很难决定，因为布局可能会有不同的正确答案
草图（设计工具）不会对布局有任何概念和暗示（尤其是子代之间的关系）。因此，有时需要工程师在调整组件大小时与设计师讨论确切的行为。 因此，需要一种将结构转换为某种布局设置的方法。尝试之后，我们的建议是CSS flex和grid。因为flex和grid提供了极大的定位灵活性，并且被前端工程师广泛使用和认可，而且具有很高的浏览器兼容性。
以上两个问题很难100％自动化，但是经过几次迭代，我们认为可以通过一些算法和少量人工干预将其自动化70％。生成的代码在正确的布局结构中将很有用。之后，可以通过应用一些更易于解决的代码优化（共享样式，更好的命名，简化的CSS /代码等）将其改进为更好的代码。
答案 1 :(得分：0)
我一直在使用这个概念（Sketch到React的翻译），但没有找到有效/可配置的解决方案，而且我认为不会很快到来，或者至少会有一个时间来使用最好的解决方案Sketch的最佳部分以及React的最佳部分。
草图具有令人惊叹的符号系统，该符号系统允许从中心位置（真实的来源）重复使用或引用设计标记（例如全局调色板或版式样式）。
不幸的情况1：
这些符号集在导出到React组件时不会转换为变量集（CSS或SCSS等）–所有值都是硬编码的，没有变量存在。您也许可以创建一个非常自定义的实现来执行此操作，但是在您重新配置构建过程或技术堆栈选择时，它肯定会中断。
不幸的情况2：
草图符号或UI元素无法管理其自身的状态，只需将它们替换为其他符号/元素即可。将多个草图元素转换成管理其自身状态的React组件的逻辑涉及太多的工作。尤其是考虑到现代构建流和技术堆栈的复杂性。
我的团队如何解决此问题：
共享的构建模块和标准可以弥合设计与开发之间的鸿沟，确实可以提供帮助。 （一个示例是一组CSS颜色变量，它们映射到一组Sketch颜色符号）。系统的原子级片段可以相对轻松地在Sketch和CSS之间转换-然后，您要做的就是将拼图块放在一起。再加上设计师与开发人员之间的良好沟通，您的团队将遥遥领先于利润。
希望这会有所帮助！