reactjs - 草图反应？

Question

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

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

我们正在考虑放弃 react-sketchapp 并采用更有效的工作流程

Answer 1

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

首先，react-sketchapp 是“对草图做出反应”的方向，而不是对草图做出反应。

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

• 草图和反应代码之间树结构的区别

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

• 调整大小布局的描述或设置

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

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

Answer 2

我一直在研究这个概念（Sketch 到 React 的翻译），还没有找到有效/可配置的解决方案，我认为不会很快出现，或者至少不会有一个使用 Sketch 最好的部分用 React 最好的部分。

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

不幸的情况 1：
这些符号集在导出到 React 组件时不会转换为变量集（CSS 或 SCSS 等）——所有值都是硬编码的，并且不存在任何变量。您也许可以创建一个非常自定义的实现来执行此操作，但它肯定会在您重新配置构建过程或技术堆栈选择的第二次破坏。

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

我的团队是如何解决这个问题
的：弥合设计和开发之间差距的共享构建块和标准真的很有帮助。（一个例子是一组 CSS 颜色变量映射到一组 Sketch 颜色符号）。系统的原子级部分可以相对容易地在 Sketch 和 CSS 之间转换——然后你所要做的就是把拼图块放在一起。将这一点与设计师和开发人员之间的良好沟通相结合，您的团队将远远领先于利润。