Introducing React Studio 1.3

Introducing React Studio 1.3

Welcome! We’ve done a lot of work with React Studio over the past month based on your feedback. Some of these features were released in interim 1.2.x updates, but this 1.3 release brings everything together.

Here’s a high-level outline of what’s new — each of these new features and improvements is discussed in more detail below:

• Major performance improvements
• Localization: automatic support for multiple languages
• Head+tail items for the List/Grid element
• New flexible nav bar settings for screens
• Add mock data with one click in the Sheet Editor
• New Card element (and a new app-wide style to match)
• New Picker element
• New Sync command in the Sketch plugin
• New “Symbol id” setting allows Sketch symbols to be converted into real components
• Improvements to “Make Component” function
• Data linkage for nested component properties
• Value transformer script option for data sheet service path
• Updated to React v16.2 libraries in project export
• Tidier method names on export, e.g. for multi-state components on export
• “Export Screens & Components as PNGs” command in File menu
• Various UI bug fixes

Performance

The editing canvas and device previews should now render noticeably faster, and memory usage should be substantially lower. Hopefully you’ll find the experience improved.

Localization

React Studio now supports multiple languages and can seamlessly switch between them, both at edit-time and runtime. In exported code, this is implemented using the react-localization package (it’s now included by default in the Webpack setup).

Although this feature may not seem immediately exciting, it’s actually a big one! Anyone who has ever worked on a large web app (or other software) probably knows how hard it can be to properly support multiple languages.

Multi-language support is one of those things that may not seem very important when you’re starting out… But when the time comes and localization turns out to be necessary, it’s typically an enormous amount of work to bolt it on afterwards. With React Studio’s integrated support, the boring work of ensuring your app’s texts are localizable is automatically done for you.

With this update, all projects now contain a data sheet named Localization:

Whenever you add an UI element that contains localizable text (such as a button, checkbox or text block), a new row is automatically created in the Localization sheet. The new UI element is assigned a localization key, which you can change in the element’s inspector. (Typically you’ll want to change these keys to something more descriptive than the automatically assigned ones.)

To add more languages, you simply add columns to the Localization sheet. In the example above, there are two languages: English (en) and French (fr).

To switch the UI to another language, look in the Localization menu and choose “Active Language”:

All elements will now display the localized texts from the data sheet.

Once you switch the language, you can also edit localizations directly in the React Studio UI. Just double-click on that button or whatever and type in the translation — the new text will be automatically saved in the right column in the Localization sheet.

Switching your app’s language at runtime

The active language is a setting that you can modify within your app. For this purpose, a data slot named “ds_activeLang” is provided automatically. Just create an interaction that changes the value of that data slot to one of the language codes.

For example, here’s an interaction to change the app’s language to French:

Often you may also need to load new data from a server based on the active language. For this purpose, React Studio’s data sheets include a setting labeled “Update based on data slot”. You can select the “ds_activeLang” data slot there, and the sheet will get automatically reloaded when the language changes. (How the language code is passed to the server depends entirely on the web service plugin. E.g. for the Google Sheets plugin, you could use document id’s with the language as a suffix.)

Dynamic updates of text using localization

This is a cool trick you can do with the Localization sheet. Because it’s a regular data sheet, you can get its contents using a web service plugin… So you can use the Google Sheets plugin to load the localized texts from a spreadsheet.

What’s more, the Google Sheets plugin does realtime updates, so your app’s text will update in realtime when you modify the spreadsheet — you don’t even need to reload, the update is truly dynamic.

This can be very useful if you need to send your app out for translation by a remote freelancer. Publish a private copy of the app (e.g. with React Studio’s built-in Publish feature) where the Localization sheet is linked to a Google spreadsheet. Then share that spreadsheet with the translator, and also send her the link to the app. Now she can work on translations and see the app update live while she’s working. No more guessing about where a particular piece of text actually goes inside the app!

List improvements

You can now specify an optional “head block” and “tail block” for a List/Grid item. We’ve updated the Lapland Adventures sample project to demonstrate this feature (you can find this project in File menu > New From Template):

View the sample project

For the head block, there’s also a new setting “Show only when list is empty”. This is particularly useful for lists of user-generated content, which are typically initially empty. With this setting, you can easily display e.g. an onboarding placeholder item that says “Click here to get started”.

Instant mock data

It’s a good idea to design using real data as early as possible… But sourcing that data can be difficult.

To ease the pain of filling out your data sheets, we’ve added a function that lets you bring in real data at one click.

Click on the button “Add Mock Data” in Data > Sheet view, and choose from a number of data sets courtesy of lists.design:

The chosen list data is added as a new column into the sheet. You can of course add multiple lists into one sheet, like this:

More options for nav bars

React Studio’s standard nav bar now has new options that make it much more flexible. You can find these settings in the Screen inspector.

• “Take nav bar title from property” lets you change title based on a property value. This is particularly useful for detail views, where the title usually should be the name of an item that the user selected in the previous screen. (See the Lapland Adventures sample project for an example.)
• “Display foreground items over nav bar” lets you place elements on top of the nav bar. Again, the Lapland Adventures sample shows this in action — check out the logo icon and menu button that are placed on top of the nav bar in the main list screen.

Card element

This is a new element type meant for backgrounds and grouping. Previously you would just use a rectangle vector shape for this, but we wanted to add a degree of semantics to separate actual graphics and simple background cards.

There is also a new app-wide color, which unsurprisingly is called “Card”:

It’s the default color for new Card elements, but you can of course change it to a custom background color for any individual card.

Picker element

The Picker is a type of UI element that lets the user select a value from a list. It’s mobile-friendly: on a small device, it appears as a native picker list — e.g. on iPhone, a scrollable list that takes up the lower portion of the screen. On a desktop, it appears as a dropdown menu.

To provide values for the picker, you need to use a data sheet. (If you need some mock values to try it out, why not use the new Instant Mock Data feature described above!)

Sync features in Sketch plugin

Our Sketch plugin named “Transfer to React Studio” has seen many updates in these past weeks. (Don’t have the plugin? Download it here.)

One immediately visible new feature is two new commands, Sync selected artboards and Sync selected symbols:

These new commands are meant to solve a typical workflow problem where you’ve transferred some designs from Sketch into React Studio, but then you update the design on the Sketch side and would like to match that in React Studio without losing your changes.

Sync does that! It will only transfer artboards/symbols if a matching name is found on the React Studio side (so you won’t accidentally get multiple copies of something). When transferring using Sync, it will replace any existing layers with new ones from Sketch but also preserve any interactions and keyline alignments you made in React Studio.

This way, the design can be maintained in Sketch while interaction and responsive alignments are maintained in React Studio.

Symbol id — convert Sketch symbols into real components

For components, you can now specify a “Symbol id” that will be used to map Sketch symbols into this component. The setting can be found in the Component’s inspector under the heading Transfer Designs From Sketch:

This feature is a lot deeper than it might seem! It’s really about enabling design systems where a Sketch symbol library can be mapped into real code through React Studio. We wrote an entire post / tutorial about that, so check it out:Transform your Sketch-based design system into real code using React Studio

Improvements to Make Component command

The “Make component” shortcut is very convenient for creating groupings, but previously it wasn’t very smart about which properties to transfer into the component. We’ve now made it smarter about common scenarios including keyline alignments.

In particular, it’s pretty common to use a Card element to “block out” a component, like this:

In this screenshot, the Card element has a center keyline alignment. When you click on “Make component”, React Studio now figures out that the card should become the background of the new component, and that the keyline should stay outside of the component (i.e. you want the new component to be aligned, rather than just the Card element inside it).

Data linkage for nested component properties

This is a feature that was half-implemented before, but should now work everywhere. For an element which is an instance of a component, its custom properties are shown in the Data tab, and you can link them to outside properties:

This is a really important technique in React — propagating property values deeper into nested components.

Value transformer script option for data sheet service path

That title is certainly a mouthful! What it means is that you can now use a script to customize the “service path” which gets passed to a web service plugin that loads the contents of a data sheet.

Still not sure what it does…? Can’t blame you! Let’s take a concrete example.

In the discussion of localization above, it was mentioned that the active language is stored in a data slot. Let’s assume that your app loads its content from a custom server backend. To get the data in the right language, you need to pass the active language as a URL parameter — maybe something like: example.com/myapp/frontpage-items?lang=fr

In this example, “frontpage-items” would probably be the service path that you specify for the data sheet. What we need to do is tell the web service plugin that the service path needs to contain the extra parameter too.

Using the “Update based on data slot” and value transformer script settings, that’s possible. The data slot’s new value is provided to the script as a variable named input, so the script can be as simple as:

return "frontpage-items?lang+"+input

Update to React 16.2

The libraries used in exported projects have been updated to the latest React version 16.2. This shouldn’t mean any major code changes, but if something comes up that prevents your app from working, we’re happy to help figure it out — easiest way to reach us is with the integrated Chat window in React Studio (look in the Help menu).

Tidier method names

The code output now looks cleaner especially for multi-state components.

“Export Screens & Components as PNGs”

Previously this command was tucked away in the Project Map. Now it’s in the File menu too.

It’s a really convenient way to get a full set of screenshots from your project. All screens and components are rendered at a number of device sizes into a folder:

One nifty use case for this feature is that — together with the Sketch transfer “Symbol id” feature described above — it lets you use Sketch to build screens using the components you’ve made in React Studio.

Take a component’s screenshot and bring it into Sketch as a symbol. Then link the original React Studio component to the symbol by using the “Symbol id” field. Now, when you use the symbol in Sketch in a design, it will be transferred as the actual component when you use the Transfer to React Studio plugin.

This way you can build a Sketch library of symbols that get automatically translated into real code via React Studio. Pretty cool!

—

That’s all for this release. We’re working hard to make React Studio a worthy choice for bridging your design and development needs. If you have any requests or ideas, we’d love to hear about it. You can either use the in-app chat (in Help menu) or write to: [email protected]

We also do custom versions of React Studio adapted to your company’s development practices and design language. If that kind of internal power tool seems interesting to you, please reach out at [email protected] — we think you’d be surprised at how convenient it can be.

Finally, if you liked this post, why not give it a few claps here? Thanks for reading all this way!