Basics & Workflow

Last updated: Jul 11th, 2017 (for version 0.7)

Introduction

Supernova is the development tool that helps convert native mobile designs from Sketch (with upcoming support for more import options later) to native platforms - iOS or Android. Primary goal is to provide developers with quick way to automate otherwise very time-demanding tasks, such as creation of components, styles, resources, layouts and navigation.

Primary purpose of this guide is to show you how to use Supernova properly, and how to make the most of it. Guide covers following:

Installation

Supernova supports OS X 10.11+, with planned release for Windows later down the road. To get Supernova installed, download it first and get your beta key for free. Once you unpack the .zip file of Supernova, move it to your mac's Application directory and run it.

After initial launch, you will be asked for your beta key, that you obtained in the registration email. And that's it, you are ready to enjoy Supernova to its full potential.

Useful Tip:

Supernova will ask you if you want to enable automatic updates. Especially in beta, it is highly adviced to enable it, as we are pushing updates sometimes daily and resolving the issues / adding new features quickly.

Interface

Supernova's interface will feel very familiar if you used any of the design / development tools like Sketch, Affinity Designer or others. Entire interface is split into 3 parts:

  • ( 1 ) Left panels - Screens, components, animations, navigation connections and resources
  • ( 2 ) Right panels - Selection-specific configuration and layout interface
  • ( 3 ) Workspace - Preview for your current state and app visualisation
Main Interface
screenshot

Left panels

Left panels allow you to quick-select editable elements of your projects. Each selection then changes right panels (context-sensitive selection). There are currently 5 types of items that represent logical sections of the development: Screens, components, navigation, animations and resources.

Useful Tip:

Screens, components and animations can be modified in many ways. You can access most of the available operations through top application menu, by right-clicking the specific element in the left panel or in case of components by right-clicking the component in the preview as well.

Screens

Each row in the screen panel represents one logical screen that user can access within your application. See the next chapter for greater details about how they can be configured and how Supernova creates them.

Screen panel interface
screenshot
Available operations
  • Reorder - Drag & Drop screens and reorder them to better fit the logical order
  • Remove - Remove any controller(s). This is undoable, but there is currently no way to import it back (coming soon)
  • Status - Sets the Waiting | In Progress | Done status for your convenience. Tap the colored circle and pick one

Components

Each row in the components panel represents one logical component that is used to build the screen content. There is always at least one component - the root view that cannot be removed. The components form a tree-like structure that is similar to the Sketch one. See the next chapter for greater details about how components behave, how they can be configured and how Supernova creates them.

Components panel interface
screenshot
Available operations
  • Reorder - Drag & Drop components and reorder them to better fit the logical order. This changes rendering order as well
  • Group - Creates extra view as container for all selected views, of a size of bounding rectangle of all components
  • Ungroup - When the selected view is a container, it is removed. When the selected view is contained, parent is removed
  • Add - Adds completely new component that were not part of the original design
  • Duplicate - Duplicates the selected component and adds it to the parent of the original
  • Remove - Deletes the selected component(s)
  • Type - Converts the views to a specific native type (buttons, table). More on that in the next chapter
  • Merge as image - Creates image out of self and all descending layers (note: available if the layer came from the Sketch)
  • Add template animation - Creates the animation for selected component from pre-defined template
  • Add custom animation - Creates the animation for selected component with one placeholder property
  • Constraints - Manipulates the layout information of selected component

Animations

Animation panel holds all animation for the selected screen. This is 3-level deep menu, with animation groups, elements and properties. There always has to be at least one of each type in one specific animation (deleting any of the last elements will remove the animation completely). See the animation chapter for more details.

Animation panel interface
screenshot
Available operations
  • Remove - Deletes the selected animation group, element or property
  • Add components - Adds new component to animation group (right-click animation group)
  • Add properties - Adds new property to animation element (right-click animation element)

Navigation

Navigation panel holds all the navigation connections from the entire project. From here, you can see which screen can be accessed from which screen and what type of connection it actually is. This panel mirrors the navigation map in organized fashion. See the navigation chapter for more details.

Navigation panel interface
screenshot
Available operations
  • Remove - Deletes the navigation connection between the origin and the destination screen

Resources

Resources show you the preview of all available image resources in the project. Resources show in this panel will get exported, unless you say otherwise. Depending on the size of your left panel, resources will show in 2 or 3 columns to show as much information as possible. See the exporting chapter for more details.

Resources panel interface
screenshot
Available operations

Resources are managed automatically by the studio and the component system, and cannot be manipulated manually to preserve integrity of the project at the moment.

Right panels

Selection specific

Right selection-specific panel changes the content depending on what type of object you've selected. For example, when you select an image in the preview, you are able to change its configuration, but you can do that with the screen itself as well. Sections in this panel can be collapsed (up / down arrow) to give you more space to make the interface that you need more accessible. The panels are always used for the selection-specific configuration of the given object.

Selection-specific panel interface
screenshot
Selection-specific panels

Screen configuration - actives after screen is selected from the left panel.

Component configuration - actives after component is selected from the left panel or the preview.

Navigation configuration - actives after navigation connection is selected from the left panel or the navigation map.

Animation configuration (group) - actives after animation group is selected from the left panel or the timeline.

Animation configuration (element) - actives after animation element is selected from the left panel or the timeline.

Animation configuration (property) - actives after animation property is selected from the left panel or the timeline.

Resource configuration - actives after image resource is selected from the left panel.

Layout

Layout panel allows you modify layout of the selected view. You can resize, move, pin and in general do most of the stuff with positioning through there. It also serves as a proxy for the starlight engine, our one-of-a-kind automatic solution to make the designs responsive. See the layout chapter for more details.

Layout panel interface
screenshot

Workspace

The main workspace of the Supernova can be found in the middle. In this area, following can be found:

  • ( 1 ) Preview of the application screen - Shows editable or interactive preview of one selected application screen
  • ( 2 ) View options - Allows to change between one specific screen and navigation map view
  • ( 3 ) Interactivity options - Allows to pick between editation mode and real-time simulation of the application
  • ( 4 ) General information - Quickly shows the important information about the workspace
  • ( 5 ) Workspace configuration - Allows to change zoom levels, preview-device sizes, orientation in the interactive mode and more
Workspace Interface
screenshot

Middle panel

Middle preview panel shows either one specific screen, or the navigation map. Both modes allow you to zoom in and out. Use arrows, double click in the preview image or swipe in the screen mode to move to the next or previous screen.

The screen preview changes depending on the mode you select - edit, interactive or preview, all of which allow you to do different things. Let's see the following video to understand the difference between edit and interactive mode.

Edit vs. Interactive mode

Edit mode

Edit mode allows you to modify the components of the selected screen. You are able to select / draw / resize and edit properties, and also edit the layout information. In the edit mode, screen is locked to single size - that of the artboards in the Sketch file.

Supernova picks the right size of the screens even if some of them are not the same - say screens that have a lot of vertical content that should go to scroll view or should become a table. Supernova also automatically manages artboards that are @2x or @3x in size, making them @1x instead and resizing everything properly.

Edit mode enabled
screenshot

Interactive mode

In the interactive mode, you are able to test the screen in real-time. All components have two modes - edit where you modify the properties, and interactive, which looks and behaves like you would expect - buttons have can be clicked, switches have on / off states, tables / collections can scroll.

All the animations and interactions work exactly how they will on the device within the studio as well. You are also able to test the navigation transitions, which change the selected screen depending on where the connection points to.

Interactive mode enabled
screenshot

Not only you can preview the application in real-time, but you can also change the preview device on the fly. Special menu at the bottom visible in the interactive mode allows to simulate screen sizes of the most common iOS and Android devices, in both portrait and landscape mode.

Interactive iPhone 7 / Portrait
screenshot
Interactive iPhone 7+ / Portrait
screenshot
Interactive iPhone 7 / Landscape
screenshot

Design mode

To make sure you have everything done correctly, Supernova features third mode - design overlay that you can enable and that shows the original artboard rendered from the Sketch, and you can set the transparency of the overlay above your actual screen.

Design mode with 50% overlay
screenshot

Navigation mode

Navigation mode allows you to connect screens and components that invoke the transition to visually create the navigation maps. You are also able to drag the screens around to visually make the sense of the navigation flow. The initial position of the screens is taken from the Sketch file. See the navigation chapter for more details.

Navigation mode enabled
screenshot

Color schemas

Since Supernova was written from ground-up using our own graphical engine, you are able to use two graphical variations - light and dark mode, whatever suits you the best. The mode can be switched from menu > view > color scheme > dark / light.

Dark design
screenshot
Light design
screenshot

Recommendations

While everyone will find their own style quickly, we feel that throughout the extensive testing we've identified some things that should make your life even easier and will prevent unnecessary complications. If not, please feel free ignore everything what we wrote below.

Design polish aka keep your design files clean

Supernova requires certain level of structuring to deliver the best results (more on that in components section). Every designer should keep their designs structured to simply make sense of all the layers, but it is better to make sure that is true. It is especially important for layers that should become image components, as our heuristics for what the image is a what not work by analyzing groups of content.

It is also important to group layers in a sense of components. What will eventually become table should all be grouped together, and similarly for every other component. If you don't do it in Sketch file before importing, you are able to do this grouping / ungrouping in Supernova as well through Menu > Component > Group as > View or Menu > Component > Ungroup.

Workflow

Developing the application is multi-stage process, and you should follow it in Supernova as well. To us, following worked the best:

  • ( 1 ) Polish the design first - it will save you lot of headache down the road. Remove all the extraneous screens, information that is only to show something. Remove duplicate screens.
  • ( 2 ) Create components - After import, go through each screen and convert views to appropriate components - buttons, tables, maps. Remove all extraneous layers and groups to prevent generation of unused views.
  • ( 3 ) Create layout for every screen - make sure your application works well on all the devices using the interactive mode. Don't create layout by hand, use starlight automatic solve to make it for you.
  • ( 4 - optional ) Create animations - When you have screens that work, add some animations. Supernova has very nice out-of-the-box action animations that will make your application feel much better.
  • ( 5 ) Connect navigation - Create navigation maps and triggers - from which component to invoke screen transition to which page. You can test that in the interactive mode for each screen as well.
  • ( 6 ) Rename resources - Resources are automatically named from the original layer name. You can override that if the layers were not named properly.
  • ( 7 ) Test your application on simulators - While Supernova's interactive mode tries to simulate the application as closely as possible, it can be sometimes little off. Real simulators will always show the real thing.
  • ( 8 ) Export the application for your platform - make sure you select proper configuration for the export and go for it. You can continue working on the project in the IDE of you choosing. Happy coding!

That's it, you've mastered the basics! Here, on us.

Now you know everything about the interface of Supernova and how to use it. Let's dive into screens & components to learn about how to convert the design to native components and preview them immediately.

Spread the for Supernova - the world's first true design-to-code platform.

AppKit Theme

Enjoying the Supernova?

Thank you for your interest in Supernova. Would you mind to spread the ? Supernova is free in beta, for everyone.

Our goal is to help all the developers out there - and we want everyone to know what we are trying to achieve. We can only do that with your help.