Supernova 101: Preparing Designs

Prepare designs for Supernova Studio the right way

Mar 13, 2018 · 6 min read

Welcome to the first true part of our tutorial, where we finally start building our app — Spacebook.

Before we can even do that, we have to design it — fortunately, we went ahead and made the final design (.sketch) for you. Let's download it and make sure you have all the required fonts (Lato) installed.

Image for post
Image for post

Follow Best Practices

When you first opened Supernova Studio, you must have thought there must be an absurd amount of artificial rules and special naming conventions or similar restrictions.

Image for post
Image for post
Feels complicated? It isn't, don't worry :)

Fortunately, this isn’t the case — The underlaying algorithms of Supernova are so clever that when you follow the best practices of development and design, it works out of the box, on pretty much any design you prepare.

So what are the best practices?

Structured Design Over Flat Structures

Supernova runs analysis above the design during imports. The analysis does several things but most importantly, it looks for groups of content — flat structure doesn’t make the cut. In general, content should be grouped if:

  • It is a logical section that makes for one component, i.e. navigation bar
  • It is a design section, i.e. header with profile image and a few icons
  • It is an image group containing multiple paths that should be connected together so they result in one image

Here’s the following comparison of structured vs. flat design:

Image for post
Image for post
The result might look the same in Sketch — but would you guess the right one is TabBar?

This is the single most important rule to follow in Supernova. By giving your design structure, you give Supernova lot more options to analyze the designs — flat designs has nothing to analyze but they’ll still import though it will take much more than few clicks to make it work.

The example on the left results in Tab Bar that can be used on every screen and Supernova can infer all the information with a single click. The example on the right will not work.

When working with design libraries, you can prepare them so they are structured like this — doing this work only once. We’ll be trying to work with authors of the most prominent UI Kits to polish them so they work out of the box with Supernova as well.

Use Extra, Invisible Groups for Sizing

Supernova infers positions and sizes of the components based on the frames of their original layers (with the exception of labels which are recalculated so they fit mobile frames, as they differ significantly from the Sketch).

In some cases, you would like to have a difference size — for example, to expand table view row:

Image for post
Image for post
Using invisible rectangles to give elements precise sizing

Here are 2 table view cells. The first one has extraneous view that expands its size and doesn’t. When importing to Studio, in the first case, “Rectangle 14” will be removed automatically and the sizing information will move to “Phone Entry” group, including any fill information, shadows etc. — preserving all the information by just removing this extra view.

This technique is extremely important especially when elements look that they should have certain size (cells are good example) but they don’t.

In the example above, cells created using this technique would have proper size, while the second row would have all the content packed tightly together.

Love Your Design, Name Your Layers Properly

Supernova Studio works with pretty much every single piece of information it can derive from a Sketch file but names have special place. We can infer a lot of information simply from the name and alongside the analysis, we use it to name the output layers when exporting the code (though you can of course override that).

The view on the left has no naming and as a result you can’t really tell what it is after import unless you look for it.

The view of the right has proper naming — and it tells you quite a lot about what to expect. When converted to code, variables are named “separator” and “username”, “exampleLabel” and “usernameLabel”. That’s pretty much how you’d name your code as well.

Studio does not work with special keywords though there are 2 exception to the rule:

  • If Studio detects “status bar” in the name or a variation like “statusbar”, “status-bar” etc., it automatically removes the layer and enables the status bar for given screen. Most of the UI Kits are already name this the same way so it works out of the box about 90% of time.
  • If Studio detects “keyboard” or a variation, it automatically removes the layer and everything it contains. This is because keyboards are provided by the system as a functionality of textfields and typically consist of hundreds of layers which slow down the import. You’ll eventually remove by hand one way or another, so let Supernova do it for you.

Use Any Resolution

Supernova Studio detects the resolution of your project automatically and converts everything to the base size so you can definitely prepare everything in Retina resolution and the otherwise complicated conversion is done, without any development.

Studio comes with device definitions for all the most prominent devices and device sizes which it can detect — but if you design something in a custom size, that’s fine too. It just cannot infer whether to scale your design down or not.

Use Single Page + Symbols Page When Importing

Studio supports imports from any of the design pages — but we suggest only creating a single page from to import and the second one being what holds your symbols (Symbol page that is generated automatically by Sketch).

There’s a very simple reason — Studio uses Sketch position data from Artboards to lay out your navigation map. When using multiple pages and result will looks like this:

Image for post
Image for post
Tethr UI Kit when imported to Studio — multiple pages overlap each

In a future, we’ll a allow selection of pages and artboards to import right from the beginning. For now, we advise you to import only what is absolutely necessary for the app.

Remove Screen Clutter

Are you using a few help layers by grouping things 20 times etc.? Remove them — they’ll get imported and become part of your design. While you can definitely do these optimizations in Supernova, it’s better to have them already clear in Sketch so it ties to the structured design:

The more clear and understandable your design, the easier time you’ll have building it Supernova.

And that wraps up tutorial for design preparations. As you can see, preparing designs for Supernova are really straightforward and we cannot wait to see what you’ll create next.

You can now download the full design for the “Spacebook” app which we’ve polished based on the recommendations. Now, hop over to the next part of the series, Creation of Basic Components.

Image for post
Image for post
We suggest you to read through the Spacebook's design first. It'll be fun they said :)

And if you want to see what you'll be creating, download the .pdf showing all the application screens — we promise it will be well worth your time. Especially, if you like science fiction :)

With ❤️ from your friends at Supernova

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store