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