素描以反应? [英] 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 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屋！