Reactjs 如何反应？

我们正试图利用React-sketchapp Sketch开发一个工作流，Sketch中的设计师可以生成React组件，并且编码（至少对于CSS）是自动生成和配置的。似乎没有太多的文档和/或支持

我们了解在React to Sketch中开发组件的基础知识，但是有人想出了相反的工作流程吗？有没有其他想法或文件可以帮助您

---

我们正在考虑放弃react sketchapp，转向更有效的工作流程

我一直在研究这个概念（从草图到react的翻译），但还没有找到一个有效的/可配置的解决方案，我认为不会很快出现，或者至少会有一个解决方案将草图的最佳部分与react的最佳部分结合起来使用

Sketch有一个惊人的符号系统，允许设计标记（如全局调色板或排版样式）从一个中心位置重复使用或实例化，这是事实的来源

不幸的情况1:
这些符号集在导出到React组件时不会转换为变量集（CSS或SCS等）——所有值都是硬编码的，不存在任何变量。您可以创建一个非常定制的实现来实现这一点，但它肯定会在您重新配置构建过程或技术堆栈选择时中断

不幸的情况2:
草图符号或UI元素无法管理它们自己的状态，您只需使用不同的符号/元素将它们替换掉即可。将多个草图元素转换为管理其自身状态的React组件的逻辑涉及的内容太多。特别是当您考虑到现代构建流和技术堆栈的复杂性时

我的团队如何解决此问题：

---

在设计和开发之间架起桥梁的共享构建块和标准确实有帮助。（例如，一组CSS颜色变量映射到一组草图颜色符号）。系统的原子级部分可以相对轻松地在草图和CSS之间进行转换，然后您所要做的就是将拼图部分放在一起。再加上设计师和开发人员之间良好的沟通，您的团队将遥遥领先。

我一直在研究这个概念（草图反应翻译），还没有找到一个有效的/可配置的解决方案，我认为不会很快，或者至少有一个使用了草图中最好的部分和反应中最好的部分

Sketch有一个惊人的符号系统，允许设计标记（如全局调色板或排版样式）从一个中心位置重复使用或实例化，这是事实的来源

不幸的情况1:
这些符号集在导出到React组件时不会转换为变量集（CSS或SCS等）——所有值都是硬编码的，不存在任何变量。您可以创建一个非常定制的实现来实现这一点，但它肯定会在您重新配置构建过程或技术堆栈选择时中断

不幸的情况2:
草图符号或UI元素无法管理它们自己的状态，您只需使用不同的符号/元素将它们替换掉即可。将多个草图元素转换为管理其自身状态的React组件的逻辑涉及的内容太多。特别是当您考虑到现代构建流和技术堆栈的复杂性时

我的团队如何解决此问题：

---

在设计和开发之间架起桥梁的共享构建块和标准确实有帮助。（例如，一组CSS颜色变量映射到一组草图颜色符号）。系统的原子级部分可以相对轻松地在草图和CSS之间进行转换，然后您所要做的就是将拼图部分放在一起。再加上设计师和开发人员之间的良好沟通，您的团队就远远领先于其他人。

我们在这个问题上花了很多时间，因此我们可以分享我们在产品开发过程中学到的一些经验

首先，react sketchapp是“react to sketch”方向，而不是sketch to react

对于草图反应问题，我们发现最难的事情是

• sketch与react代码树结构的差异

设计师关注的是视觉效果，并不关心项目结构，但工程师确实关心DOM的结构，因为它是为动态布局和可调整大小而设计的 因此，我们的方法是使用一些智能算法（或未来的人工智能），几乎不需要人工干预。有时真的很难决定，因为在布局方面可能有不同的正确答案

• 调整版面大小的说明或设置

Sketch（设计工具）不会有任何关于布局的概念和提示（尤其是孩子之间的关系）。因此，有时工程师需要与设计师讨论组件调整尺寸时的确切行为。 因此，需要一种将结构转换为某种布局设置的方法。尝试之后，我们的建议是CSS-flex和grid。因为flex和grid为定位提供了极大的灵活性，并且被前端工程师广泛使用和认可，并且具有很高的浏览器兼容性

上述两个问题很难100%自动化，但经过几次迭代后，我们认为可以通过一些算法和少量人工干预实现70%的自动化。生成的代码对于正确的布局结构非常有用。在这之后，可以通过应用一些代码优化（共享样式、更好的命名、简化的css/代码等等）来改进代码，这些优化更容易实现