Published on <a href="http://ift.tt/2poySNz">| Prototyping: From UX to Front End &mdash; Medium</a> netsi1964 
<blockquote>Yesterday I read about a NPM package from AirBnB: It would take a React Native component and generate a plug-in for Sketch vector drawing app of the React UI. I tried it out this morning on my Mac.</blockquote>
Pretty cool concept: You code your React Native app, and using the AirBnB NPM package react-sketchapp you would get a design file of the way the React App looks like.
<img alt="" src="http://ift.tt/2qdNq5C">Example of dynamically updated Sketch design file of an example React Native app
What you see above is an altered version of an example React Native app supplied as part of the AirBnB NPM package “<a href="http://ift.tt/2q36hA6">react-sketchapp</a>”. I simply checked out the repository using git. Followed the install guide and after a little bump (you need to have Sketch open with an empty file before you run the npm run render command) I now have an autogenerated live updated <a href="https://sketchapp.com/">Sketch</a> <a href="http://ift.tt/2ponz7X">plug-in</a> which will render how the example React Native app looks like rendered.
<img alt="" src="http://ift.tt/2qdJTnO">I used Microsoft Code editor, but you could use any editor to make your changes to the code.
<h3>The sketch design file updates as you save your React App code</h3>
I must say that I was impressed: As I changed code and pressed “Ctrl-s”, two seconds later the design inside <a href="https://sketchapp.com/">Sketch</a> was updated! I had to pause for a few seconds trying to grasp the potential consequences this could have in future development of files!
If this is possible for React Native you should be able to do it for many other types of applications: React (for web), Angular and other javascript based stacks.
<h3>The truly innovative move: javascript Sketch plug-ins</h3>
The work done by AirBnB is truly cool and creative! Thank you AirBnB for doing this in a modern open source way, sharing your innovations — respect for that!
However I think that the truly innovative move is inside <a href="https://sketchapp.com/">Sketch</a>. They seem to have understood how to make a truly innovative and modern application in their vector drawing app: <a href="https://sketchapp.com/">Sketch</a>. They have chosen to use javascript in their way to open up their application. That is smart IMHO.
Everything (in my little world) turns to javascript. From a life as a utility language inside a webpage, it moved to backend (node.js), it moved into cross platform applications <a href="http://ift.tt/2juiMl1">Electron</a> web based desktop applications and now we start to see big applications like <a href="https://sketchapp.com/">Sketch</a> use a javascript environment to open up “native” applications — Great! 🙂 I have always told people around me that javascript is the way of the future.
<img src="http://ift.tt/2poqtJS" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2qe5MDk">I tried the react-sketchapp</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

I tried the react-sketchapp

Top Stories