草图反应? [英] Sketch to React?

问题描述

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

We are trying to develop a workflow, utilizing React react-sketchapp Sketch, that a designer in Sketch can produce React components and the coding (at least for the CSS) is automatically generated and configurable. There doesn't seem to be a lot of documentation and/or support.

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

We understand the basics of developing a component in React to Sketch, but has anyone figured out a workflow for the reverse? Any additional thoughts or documentation that could help?

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

We are thinking of dropping react-sketchapp and going to a more effective workflow

推荐答案

我一直在研究这个概念(Sketch 到 React 的翻译)，还没有找到有效/可配置的解决方案，我认为不会有很快，或者至少将 Sketch 的最佳部分与 React 的最佳部分结合使用.

I've been working with this concept (Sketch to React translation) and haven't found an effective/configurable solution and I don't think there will be any time soon, or at least one that put to use the best parts of Sketch with the best parts of React.

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

Sketch has an amazing symbol system that allows for design tokens (such as a global color palette or typography styles) to be re-used or instanced from a central location – a source of truth.

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

Unfortunate circumstance 1:
These symbols sets do not translate over into variable sets (CSS or SCSS, etc.) when exported into a React component – all the values are hard coded and no variables are present. You may be able to create a very custom implementation to do this, but it will most certainly break the second you reconfigure your build process or tech stack choices.

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

Unfortunate circumstance 2:
Sketch symbols or UI elements don't manage their own state, you simple swap them out with a different symbol/element. There's far too much involved to translate multiple sketch elements into the logic of a React component that manages it's own state. Especially when you take into account the complexity of modern build streams and technology stacks.

我的团队是如何解决这个问题的:
弥合设计和开发之间差距的共享构建块和标准可以提供真正的帮助.(一个例子是一组 CSS 颜色变量映射到一组 Sketch 颜色符号).系统的原子级部分可以相对容易地在 Sketch 和 CSS 之间转换——然后你所要做的就是把拼图块放在一起.再加上设计师和开发人员之间的良好沟通层，您的团队将遥遥领先.

How my team has worked around this:
Shared building blocks and standards that bridge the gap between design and development can REALLY help. (An example is a set of CSS color variables that maps to a set of Sketch color symbols). Atomic level pieces of a system can be translated between Sketch and CSS with relative ease – then all you have to do is put the puzzle pieces together. Put this together with a good layer of communication between designers and developers, and your team is far ahead of the margins.

这篇关于草图反应?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！