Sketch plugin (React Studio and Native Studio)

Download the Sketch plugin file for Native Suite from here and for React Studio here. Unzip the package and install it by double clicking the file. After the installation you need to activate the plugin by checking the checkbox from Sketch: Plugins --> Manage plugins.

Using Sketch importer plugin

Open new Native Suite or React Studio project and go back to Sketch. Click Plugins --> Transfer to Neonto Studio Pro. Plugin exports Artboards as screens to Neonto Studio. If your Sketch designs are e.g. in iPhone 6 size you should set the same Base format for the Neonto Studio project --> App settings --> Base format.

Assets will not be imported if the name of a element group or Artboard starts with "-" or contain "navbar". This is handy way to exclude unneeded parts of your Sketch designs.

Plugin imports most of the assets but some masks and blur effects will not be applied. For images you can always set the blur effect directly in Neonto Studio. If you ran into any problems with the imported files just sen us an email to hello@neonto.com. If possible attach your Sketch file for making it easier to investigate.

React Studio spesific Sketch importer features

-Using prefix "c:" in group name imports group as component
-Symbols are automatically imported as component

*note that fills and gradients may not always work in import. Avoid using complex vector shapes and "flatten" the buttons in Sketch when possible.

Purchase React Studio or Native Suite to unlock the Sketch plugin.

Google Sheets plugin (Native Studio only)

First share your Google spreadsheet with the Neonto Cloud service account. Open the Sheet Admin page for more instructions. (You need an access key for Sheet Admin. You should have received one by email; if you didn't, email us at hello@neonto.com and we'll send it to you ASAP!)

On the Sheet Admin page, enter your Google spreadsheet's URL into "Add New Sheet". You can also choose a short identifier for the sheet, for example "products". Click "Add Sheet". Now you have a document id which is a secure reference to your spreadsheet.

Add the Google Sheets plugin in your Native Studio project. Then make a data sheet (or use an existing one). Open the Sheet Editor, choose the Sheets plugin as the web service, and enter your sheet's document id.

That's it! The data sheet in your app is now linked with the Google sheet. Click "Reload" in Sheet Editor to fetch the latest data from your sheet. It should appear in the Sheet Editor.

When sharing your spreadsheet with the Neonto Cloud service account, you can give the sheet either edit permissions or read-only (depending on if you want to collect data into the sheet, or just use it as a content source).

It's important to add headers to your Google Sheet -> headers reprecent columns in Neonto's Data sheet. If you want to add images to your sheet just add "img-" prefix to column name and add image file urls to the sheet.

When you export your Neonto Studio project into an app, the data in your app will of course continue to update when you modify the sheet. When the app is running on a phone, updates will become visible with a short delay (usually less than 30 seconds).