Sketch to React?

Question

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.

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?

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

Answer 1

We have spent much time on this problem, so we can share some experience we have learned during product development.

First at all, the react-sketchapp is "react to sketch" direction, not sketch to react.

For sketch to react problem, the hardest things we found are

• the difference of tree structure between sketch & react code

Designer focus on the visual, and won't care about the item structure, but engineers DO care about the structure of the DOM because it's designed for dynamic layout and resizable So our way is to use some smart algorithm (or AI in the future) with little human intervention. Sometimes it's really hard to decide because there might be different right answers in terms of layout

• the description or settings for the resizing layout

Sketch (the design tool) won't have any concept and hint about the layout (especially the relationship among children). So sometimes engineers are required to discuss with designer the exact behaviors while the component is resizing. So it's required a way to convert the structure into some kinds of settings of layout. After trying, our suggestions would be CSS flex and grid. Because flex and grid provide great flexibility for positioning and be widely used and recognized by frontend engineers, also with high browser compatibility.

These two issues above are hard to be automated 100%, but after several iterations, we think it can be done 70% automated with some algorithms and a little human intervention. The generated code would be useful with right layout structure. After that, it could be improved to better code by applying some code optimization (shared style, better naming, simplified css/code, ...etc) which is easier to resolve.

Answer 2

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.

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.

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.

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.