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
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.