Sketch’s symbols and overrides have made it possible to create complex UI design libraries. With the free React Studio and its Sketch transfer plugin, you can turn those Sketch symbols into real UI components (without writing code!) and get actual React projects from your Sketch designs. It’s a gradual process: you don’t have to throw away anything, not even code that’s already been implemented. This post shows how it all works.
In this tutorial, we’ll start with this Sketch design for a mobile app:
The end result will be this mobile-first ReactJS web app with full source code:
Experience Mars — demo site published from React Studio
The design was made responsive when it was converted from Sketch to React Studio, so to get an idea of how the finished product relates to the original Sketch design, try resizing your browser window — or even better, look at the link on a phone.
This Sketch design has one interesting feature that is not remarkable on its own, but is the “seed” for something greater. There is a button symbol that gets used on each artboard (= each app screen). We want to turn that symbol into a reusable React component. Overrides in Sketch have been used to configure the symbol so that each button has different labels; we also want to automatically transfer those overrides into React properties in code. Armed with these two powerful concepts — symbols into React components, overrides into React properties — we have the starting point for a workflow that can take your design system to an entirely new level.
You can download the Sketch document here: Mars Experience materials. (This zip also includes the finished React Studio project.)
To follow along, you also need the React Studio application and the “Transfer to React Studio” plugin for Sketch.
React Studio is a free download for Apple macOS. (Sorry, no Windows or Linux version at present.) You can find the Sketch plugin on that same page.
The completed project in React Studio’s Project Map view looks like this:
As an extra bonus, you will also see how you can create dynamic lists in React Studio (for the “Destinations” page of the app).
Sidenote: the Sketch document and React Studio project are using a different font than the one you see in the screenshots simply due to licensing — we can’t distribute that font.
First import from Sketch: mapping the symbols
To get the symbol-to-component mapping right, we will need to do two passes with the “Transfer to React Studio” plugin. In the first pass, we‘ll just focus on the button symbol and make sure that its properties are correctly set up.
In React Studio, make sure you have an empty document open. A newly created project will have a default screen called “Start” — you can just delete that.
In Sketch, select the “Main menu” artboard. In the Plugins menu, choose Transfer to React Studio > Selected artboard.
In React Studio, you’ll see this:
The Sketch symbol named “Mars main button” was transferred as a component, and the “Main menu” artboard became a screen that contains references to that component.
Double-click on the Main Menu screen to open it for editing. You’ll see that something is missing — the overrides we had on Sketch side didn’t make it through, so each instance of the button has the same label:
To fix this, we need to add a property into the imported “Mars main button” component.
Double-click on any of the three buttons. The component opens for editing:
Click on the text label to select it, then open the Data tab in the inspector (on the right-hand side of the React Studio window). Click on the button next to the “Text” label, and choose “Create new”:
You are now prompted to choose a name for this new property. Enter “label” and press OK. You’ll now see this:
At the left-hand side of the canvas area, React Studio is showing you all the properties for this component. The blue line is a visual helper that connects to the element that is linked to the property, i.e. will take its value based on whatever value gets assigned to the property when this component is used.
Now select the “Mars main button” component in the Project Map. Look in the inspector for the setting named “Symbol id”, and enter “Mars main button” there as well:
This tells the Sketch importer that any instances of a symbol by this name should be replaced with this component.
Our component is now ready for use and we can reimport the artboards.
Second import from Sketch: working overrides
The plugin offers a powerful Sync function that lets you update elements within a screen or component that was already imported once. (The Sync function is smart enough to preserve any interactions or keyline alignments you’ve defined in React Studio, so it’s great for a situation where you want to start building an app but keep updating the design on the Sketch side.)
We’ll use Sync to bring the screens up to date.
In Sketch, select all the three artboard, then do Plugins > Transfer to React Studio > Sync selected artboards.
You’ll now see this in React Studio:
Open the Main Menu screen for editing, and click on any one of the buttons.
You’ll see that the overrides you had in the Sketch document, like this…
Have been turned into component property values in React Studio, like this:
Now you have a way to configure symbols in Sketch and convert those into React component properties automatically. Your design system is becoming live code right here!
Want to see what the generated React code (JavaScript/JSX) looks like? In React Studio, open the “Mars main button” component for editing, then click on the Code Glance button in the toolbar. This will give you an instant sneak peek of the component’s code:
What you see here came straight from the Sketch document: there’s two elements, a text label and a “disclosure indicator” graphic (which React Studio converts into a PNG asset referred in the code, and which Webpack will eventually neatly inline to save bandwidth). The text label is shown here using inline CSS styling because that’s what we got from Sketch — but you could edit the element in React Studio to use an app-wide style instead.
(What if you want to modify the generated code? There’s a solution for that — it’s discussed at the end of this tutorial under the heading Advanced components.)
Next we’ll take a look the full React project — but first we need to make this app actually, you know, do something.
Adding basic navigation
In React Studio’s Project Map, select the App Settings block. In the inspector, under “First launch”, choose “Main menu”. This sets up the screen where the app starts.
Click on the Clean button in the Project Map to see the app flow more neatly:
We need to wire up the “Destinations” and “Reservation” screens too.
Double-click on “Main menu”, then select the “Destinations” button. In the inspector, open the Interact tab. Then enable “When user taps”, select “Go to”, and set Navigation target to the “Destinations” screen:
Do the same for the other button labelled “Reserve your seat”, and point it to the “Reservations” screen.
Click once on the Project Map’s background to enlarge it. Press Clean again, and you’ll see that the app’s basic flow is now in place:
You can now run the app: click Open in Web Browser in the toolbar.
React Studio generates a complete Webpack project for you, starts a local web server, and opens the site in your web browser. (React Studio’s generated projects use the create-react-app scaffolding, which is Facebook’s officially supported way of developing single-page React web apps. If you want to look at the code output at this point, it’s easy — the Dev Server window in React Studio shows you the path where the project is located on your Mac.)
There’s something missing, which you’ll notice as soon as you click on one of the buttons to go to another screen: your Mars Experience app doesn’t provide a way to return to the previous screen. The finished demo solves this by adding a Back button to the two screens.
You could go back to Sketch for this, but it’s easy enough to do in React Studio too. Just grab an “Icon button” element and drop it in a screen. In the element’s inspector under Button icon, change its template to “Left arrow”. In the Interact tab, give it the “Go back” action. That’s it.
By default, the new element gets placed in the Scroll flow group. To make the layout work right, you’ll want to move the new element into the Foreground group. Drag the element in the list and drop it under Foreground:
(Another way to place elements directly into Foreground is to press down the Alt key while you’re dragging them onto the canvas.)
Adding responsiveness
The design that we imported from Sketch doesn’t know anything about how to scale to different screen sizes. To fix this, you can add layout settings in React Studio to the elements.
This topic is too large to fit in this tutorial, but we have a separate post for it:
Designing responsive web layouts in React Studio ➝
If you look at the completed React Studio project, you can see that the modifications that were made are pretty simple. There were two keylines added to align elements in a proportional manner. The keylines are set as “master” (so they’re visible on all screens), and all the buttons are aligned to these keylines. For background images, left+right screen edge alignments are used to ensure that the images always fill the screen.
Creating a dynamic list
Another major change from the Sketch document is the addition of a dynamic list in the Destinations screen. The Sketch original just shows a single list item and a hint of another below it, whereas the finished demo has a real scrollable list of items.
Again due to space constraints, we must guide you to another post for more details on how lists work:
Creating lists and using live data in React Studio →
The essential part of making a list out of the Sketch import is pretty simple. Simply select the elements that form the “list item” (i.e. the component that will be repeated for each row of the list) and click on the Make List shortcut button that appears in the bottom-right corner of the React Studio editing canvas.
A list needs a data sheet to provide its content. The data sheet used in the completed Mars demo looks like this:
This mockup data was entered manually in React Studio — but you could just as easily use a data plugin to get the data from somewhere else. In particular, the Google Sheets plugin is very useful for this kind of thing. (You can even include images in a Google sheet: any column whose name has the prefix “img-” will be interpreted as containing links to images.)
If you already have data in a system with an API, the Generic JSON data plugin can be used to pull that into React Studio. Note that data plugins work both inside Studio as well as the generated app: the plugins actually write the necessary JavaScript code into the React project that will load the data dynamically.
Advanced components: modifying and reusing existing React code
In this tutorial, we brought in a Sketch symbol and turned that into a React component, then we created the mapping that lets us take Sketch overrides and turn them automatically into property values in React. The code for the React component was generated by React Studio.
What if you want to modify the generated React component’s code? Or perhaps you already have React code for the UI components in your design system, and what you really want is to map Sketch symbols into those components?
React Studio’s answer to those questions comes in the form of element plugins. If this topic interests you, before going any further I would urge you to read the overview of how React Studio’s core works:
That post has a thorough overview of what plugins are and how they interface with the Design Compiler that actually produces the React projects you get from React Studio.
If you have an existing React component and you want to use that as a target for Sketch mapping, first wrap the component into a React Studio element plugin, and then place an instance of that plugin inside a component which has the “Symbol id” property set for Sketch design transfer. It’s as simple as that. You can then create properties and wire them up into your plugin, and those properties will in turn map to overrides in Sketch. (React Studio can handle npm dependencies too, so the plugin code could actually come from there — see the above linked post for details.)
If you want to modify the component code generated by React Studio, there are two options. The first one is the plugin route, as described above. The second one is that you do your code modifications on the generated project, and use version control to ensure that your manual code changes and generated changes from React Studio are properly merged. This is easier than it sounds because React Studio has built-in git versioning support: everything it exports is placed in a “reactstudio” branch by default, and it will detect uncommitted manual changes when exporting, giving you a degree of safety around this workflow.
What next
We are already working with some customers to gradually bring their Sketch design systems into the world of real React code. If that seems like the kind of thing you might be interested in, we’d be happy to help you figure it out — don’t hesitate to get in touch at hello@neonto.com.
Similarly, if you have ideas or feature requests, please drop us an email at the address above or simply leave a comment here.
Thanks so much for reading this far, and hopefully it was worth your while. May the Progressive Web Apps be with you!