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