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