Converting Sketch Designs to React Native - tool or coding shop?

Question

I'm working with a couple friends (very experienced in other frameworks) on a new React Native app. We are trying to establish a good workflow for going from Sketch (or another modern design tool) into RN so that our designer can hand off to our developer with minimal friction and without the developer needing to do a lot of layout and design fixes.

So far going from Sketch to Zeplin to RN seems to be working the best, but it's not perfect. Other tools like BuilderX seem to be a lot worse and not a usable workflow. We've basically tried the obvious 5 or 6 things that come in when you google this problem.

I'm interested in general advice but also have two specific questions:

Is there a better flow we're missing? Would working in WebFlow and then converting that output to RN be better than Sketch+Zeplin?

Are there coding shops like the psd->html services that take Sketch designs and make good RN code and can be available for small ongoing design tweaks and things? Any recommendations?

If all else fails, we'll hire a developer onto our team to do this in between step of turning the designs into layouts, but we're soooo close to not needing that and I'd love to find a good solution.

Thanks!

Answer 1

I think you need to convert the file from Sketch to Framer (Framer X) before. Framer X is really good for developing an react native app.

Answer 2

Similar difficulties can be found in another post I have answered

Besides sketch to react/html, we also spend much time on "React Native". Originally we are optimistic because the same technologies we would use to resolve the issue

• react-based concept (Virtual DOM tree)
• support flex layout

But it's not that easy, but still achievable. The major problem we suffered is that the flex of react native is not 100% the same to CSS flexbox, even not close. The layout engine of RN is using yoga which is still different from CSS flex. With the difference, we have to separate our two codegen for react and RN and add many special rules to adapt the difference.

After 6 months fighting and iterations, we have made good progress to this problem. The key problems we suffered are still "structure adjustment" and "layout model & settings" which is still required some kinds of human intervention. You can check our initial demo result (just demo video, haven't released yet) for reference.