What are the options available to go from Sketch to ReacJs?

Question

What are the options available to export Sketch for Mac UX designs to ReactJS components to be used by the coding team.

From those options, what are the recommended ones, pros and cons of each?

We need something that can automate the coding work of ReactJs components, supports flex and offer support for web applications as well as react-native code.

Our scenario is a SaaS application where we do everything coding (html, css and js) and we want to better develop the UX using Sketch and then generate base code for our UX components to be worked by our coding team.

Answer 1

We have developed the web and app for years and also have the same question. We have sketch design and it indeed takes much time to code design into web and app.

Currently, the best tool to mitigate the pain is handoff tools which improve productivity and communication overhead. There're few tools such as Anima, it's good for the prototyping but not easy to adopt for code modification and integration. Finally, we find out the key to the quality code is the right structure of the group and layouts which is not easy to represent in the Sketch design file. So our solution leaves the key decisions for users to decide their group structure for responsive behaviors and we provide an intuitive and fast way to create react components. In our early experiments, it would much faster than manual coding without sacrificing the code quality.

You can checkout the export code via github

https://github.com/px2code/pxCode-Sketch-to-React-Example1

or directly check the codesandbox to preview and edit the code via

https://codesandbox.io/s/pxcode-example-s9sxx?file=/src/components/Card.js

Answer 2

This is more like a 2 step process. First you need to import the sketch file, which you can do so with Desech Studio. This will create an html structure where elements are positioned with css grids, not position absolute. But you will still need to make some changes to the margins and sizes to match your design.

Then you can install and enable the react plugin into your project and then export the code as react code. Check the github repo for more details.

But this is only for web react, not react-native. Maybe you can make your own plugin, based on the existing react web one, but I haven't tried it though.

So pros, and cons. The pros are that it automates and speeds up things. The cons are that the automation requires some work from you.