Screens & Components

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

Basic concepts

Basic building elements of every mobile applications are screens, and components that are shown on each of them. Supernova follows the same paradigm - you will find screens and components that you can manipulate, transform and bring to life.

The design data come from the Sketch file that you import when you start a new project. Artboards will become screens while the content of the artboards will become components. After the initial import, you can start transforming the layers to native components.

Supernova does not import the design as it is, there is a lot of optimizations behind the scenes, for example removing redundant layers, merging paths into image views, creating image resources, optimizing colors, fixing transparency and many more. Supernova always preserves all the data, but cleans and transforms them to prepare it as the developer would when creating the UI by hand.

Let's dive into how the screens and components are created and how you can build your native UI in few minutes just by few clicks.

Useful tip:

The cleaner / more structured your design is, the better the transformation. As a designers, you should keep that in mind one way or another. As a developer, make sure your designers keep their designs clean. We do not enforce any structure at all, Supernova can handle most variations - but it expects logical segments to be grouped together.

Screens

Screens are the primary elements of every application. One screen usually represents one logical part of the app (such as profile, list of goods). Supernova analyzes Sketch file that you provide and creates screen out of every single artbord it finds. In addition to structural optimization, It also optimizes the size of the artboards, so if the designer created it twice the size it is supposed to be (say, the design is 640x1136px), it gets imported as original size of 320x568 and everything rescaled down.

Supernova supports most of the features of Sketch, like masks, overlays, symbols, gradients, so you are free to use anything you need for your projects. Let's look into how easy it is to create screens in Supernova.

Screen transformation & optimizations
Screen customization (right panel)
  • Screen name - The name of the screen that shows up in the studio and is also used to named the element for export
  • Controller class - Supernova uses platform-specific base classes for screens, but you can also force your own.
  • Exportable - Allows for control of the export of the screen. Navigation connections that go to that screen will be removed as well
  • Show status bar - When exported, the screen will show / hide native status bar
  • Show navigation bar - When exported, the screen will show / hide top control bar, even if one is present in the design
  • Show tab bar - When exported, the screen will show / hide bottom control bar, even if one is present in the design

Components & Transformations

Components are what makes the content of each screen. While in Sketch, those are layers, paths and all the other graphical elements, in the Supernova those are real, native components. Not only that, you are able to switch between component types seamlessly, transforming the layers that you have into different types of components.

Sketch original
screenshot
Supernova after import
screenshot
Supernova after transform
screenshot

In the example above, you can see how the transformation works:

  • ( 1 ) Sketch original - This is what you create in the sketch file. Button now consists of 2 layers and group holding it
  • ( 2 ) After import - After import, Supernova optimizes layers and keeps the bare minimum with all information
  • ( 3 ) After transformation - After you select "Button" component type, Supernova creates native component from all information

By doing this, you are able to create components that extremely complex, like collections / grids with multiple prototype cells simply by one click. Supernova tries to preserve all the information, but sometimes it doesn't - in situations, where you are converting layers to completely unrelated type (for example, if you convert segmented control to switch, you lose all the information, because they have nothing in common). Lets watch the example of how easy (and fast) it is to make some components.

Components transform into real native objects in seconds
Shared properties of each component

All components share basic properties that you can set. Each specific component type also has their own properties.

  • Name - Name of the original layer, that you can change. Used in the studio and also for component names when exporting
  • Type - Type of component, when changed, Supernova analyzes and transforms it and all sublayers to a new type
  •  
  • Generates Property - If enabled, component will show up in the code as accessible property
  • Property name - The name of the property in generated code
  • Class Name - Custom class name of the component, if left empty, native base components are used (UILabel, Text)
  •  
  • Visible - Used to show / hide components without removing them from the screen
  • Alpha - Transparency of the component from 0 to 1
  • Corner Radius - Rounds the corners of the components, clipping the extraneous area
  • Background Color - Background color of the component. Can be either solid color or linear gradient
  •  
  • Border - Border around entire component, disabled by the default
  • Shadow - Shadow under entire component, disabled by the default

Component Types

All native components that Supernova supports can be divided into 3 groups.

Standalone components

Standalone components are the final level of the components. They are little bit sad because they can't have descendants (they are final nodes in the component tree), but to make up for it, they provide you with all the sweet content. All of those components can be positioned through the layout and animated. Supernova supports all the native components that exist in base SDKs, plus few extras. Currently supported standalone components are:

Container Components

Container components are special type of the components, because they don't have the content on their own. Instead, they rely on the components inside of them, and provide them with extra behavior (for example, Scroll View will allow content to be larger than the space it has available, scrolling the rest). Currently supported container components are:

Special components

There are 2 types of special components - navigation bar and tab bar. Those are the only components that can be present only once on the screen (for obvious reasons). Those components cannot be positioned through the layout, as they occupied predefined space on the screen (navigation bar at the top, tab bar at the bottom). They can only contain their specific items and no other components and cannot be animated.

In Development note:

We are working on the navigation bars and tab bars heavily and will show the overhauled version in the upcoming 0.8 patch. Supernova will have the option for shared navigation and tabbar components, something that it not yet possible but will make the creation considerably easier. For now, you can create them on each screen separately.

Specific Components

Down below you will find complete list that describes and showcases all the components and the special properties that each one of them provides for additional configuration of the behavior, or content.

View

View is the basic container for other components. It does not have any other special parameters. There is always at least one view on each screen - the root view, which you cannot remove. Components inside View should have layout information.

View example
screenshot

Scroll View

Similarly to a View, Scroll View is a container. The main difference is that Scroll View content size is calculated based on the components that are inside. If the Scroll View is large enough to contain the entire content, it will not scroll. But if the content is larger, then it will be scrollable, either horizontally or vertically, or both. Components inside Scroll View MUST have layout information, otherwise scrolling will not work.

Scroll View example
screenshot
Properties
  • Horizontal scrollbar - When enabled, horizontal scrollbar will be shown when scrolling horizontally
  • Vertical scrollbar - When enabled, vertical scrollbar will be shown when scrolling vertically
  • Paging - When enabled, scroll view will snap itself to content pages (reading a book, for example)

Stack

Stack is a special case of Scroll View. Stack allows you to not care about the layout, as it will layout the content for you in a "stack", either horizontal or vertical. This components is extremely useful when you have a lot of granular components that can be hidden / shown, or the layout is expected to change a lot. Components inside the Stack CANNOT have layout information as the Stack provides it for them.

Stack example
screenshot
Properties
  • Horizontal Layout - Switches between horizontal and vertical stacking
  • Spacing - Represents the empty space between each component in the Stack

Label

Label allows to show text in all shapes and variations. Depending on the required usage and space contraints, it can be either single-line or multi-line. Label can have all the fonts that you have available on your machine, custom fonts will get exported for you with the project. Note: Make sure you have all the fonts installed before you import the Sketch file!

Label example
screenshot
Properties
  • Text - Text to be shown on the label. Can span multiple lines, if allowed
  • Text color - Text color of the label
  • Font - Font of the text. Can be either system font or a custom one, custom fonts will get exported for you
  • Text alignment - Text alignment in the content of label container (Left | Right | Center)
  • Multiline text - If enabled, label can wrap the content to the new line

In Development note:

Supernova currently does not support attributed labels (those which have more than one style, like different colors of each word). We are working on supporting it fully and it should be available in one of the future updates.

Image View

Image view allows to show image resources within one screen. Image view can only show image resources that are part of the project and has been created through the import, as it will manage all the screen sizes and resources sizes for you.

Image View example
screenshot
Properties
  • Image - Image to be shown on the screen
  • Content Mode - Each of the modes changes how the image stretches when the container size changes
    • Scale to fill - Image will always fill entire content of the container, precisely
    • Aspect fit - Image will fill entire content of the container, but will preserve aspect ratio
    • Center - Image will show up in the center in its original size

Button

Button provides the user with basic interaction with your application - taps. Buttons can be either text-based, image-based or combined. Buttons can also have background colors or even background images. When exported, buttons will create handlers in the code so you can intercept the events easily.

Button example
screenshot
Properties
  • Title - Title to be shown on the button. Can only be one-line
  • Title color - Title color of the button
  • Font - Font of the title. Can be either system font or a custom one, custom fonts will get exported for you
  • Text alignment - Text alignment of the title label (Left | Right | Center)
  • Image - Foreground image to be shown on the button
  • Background image - Background image to be shown on the button

Text Field

Text Field provides the user with the means to insert their own text input into the application. Text Field are usually used in login forms, for input into calculations and more. Text Field can only have 1 line of text, but has some interesting settings, like secure mode for passwords.

Text Field example
screenshot
Properties
  • Placeholder - Text to be shown when there is no user input yet. Can only be one-line
  • Text - Text to prefill the Text Field. This is not a placeholder, user will be able to delete it
  • Text color - Text color of the Text Field
  • Font - Font of the Text Field. Can be either system font or a custom one, custom fonts will get exported for you
  • Text alignment - Text alignment of the Text Field (Left | Right | Center)
  • Delegate - When enabled, code generators will create the Text Field bindings for you
  • Secure - When enabled, the Text Field will show * instead of regular text for each character user types in

Text View

Text View works similarly to a Text Field, but it used for multi-line text input. The best example is the chat text field, where you can type however long message you want. Text View can't have secure input

Text View example
screenshot
Properties
  • Placeholder - Text to be shown when there is no user input yet. Can only be one-line
  • Text - Text to prefill the Text View. This is not a placeholder, user will be able to delete it
  • Text color - Text color of the Text View
  • Font - Font of the Text View. Can be either system font or a custom one, custom fonts will get exported for you
  • Delegate - When enabled, code generators will create the Text View bindings for you

Table

Table is a container that encapsulates cells (rows). Table allows the user to scroll through the content that can span hundreds of rows and is usually used to be filled with the dynamic data, like a user list, list of items and similar.

It is important to note that in order for Supernova to create the cells properly, each cell has to be contained in its own Sketch group or Supernova View.

Table + cells example
screenshot
Properties
  • Data source - When enabled, code generators will create the Table data bindings for you
  • Delegate - When enabled, code generators will create the Table event bindings for you
  • Interleaved mocking - When enabled, row order in preview will get randomized

Table Cell

Table Cell represents one type of an item in the Table. You can have multiple prototypes (cells) in the Table, but keep in mind that each prototype should always have somehow different content, otherwise Supernova will just create 2 of the same cells, which is redundant.

Properties
  • Prototype - When enabled, cell will get generated in the interactive preview and also in the code export
  • Identifier - Unique identifier for the cell - usually something that identifies the cell, like "ContactCell"
  • Cell Height - Cell height of the each row. Different prototypes can have different heights.
  • Mock cells - (editor property) How many rows of given cell type should be generated for the interactive preview

Collection

Collection is a container that encapsulates cells. The primary difference between the Table and Collection is that Collection can also create columns, while Table only creates rows. Collection allows the user to scroll through the content that can span hundreds of rows and columns and is usually used to be filled with the dynamic data, like a photo gallery.

It is important to note that in order for Supernova to create the cells properly, each cell has to be contained in its own Sketch group or Supernova View.

Collection + cells example
screenshot
Properties
  • Data source - When enabled, code generators will create the Table data bindings for you
  • Delegate - When enabled, code generators will create the Table event bindings for you
  • Vertical layout - Switches between direction of item stacking - top-down or left-right
  • Interleaved mocking - When enabled, row order in preview will get randomized

Collection Cell

Collection Cell represents one type of an item in the Collection. You can have multiple prototypes (cells) in the Collection, but keep in mind that each prototype should always have somehow different content, otherwise Supernova will just create 2 of the same cells, which is redundant.

Properties
  • Prototype - When enabled, cell will get generated in the interactive preview and also in the code export
  • Identifier - Unique identifier for the cell - usually something that identifies the cell, like "PhotoCell"
  • Cell height - Cell height of the each item. Different prototypes can have different heights.
  • Cell width - Cell width of the each item. Different prototypes can have different widths.
  • Mock cells - (editor property) How many items of given cell type should be generated for the interactive preview

Web View

Web View allows you to show the web content, like www.google.com or www.apple.com inside your application.

Web View example
screenshot
Properties
  • Delegate - When enabled, code generators will create the Web View event bindings for you
  • Default page - Allows you to set the initial page where the content will point to
  • Scale to fit page - When enabled, content of the Web View will always initially resize to the device width

Map View

Map View allows you to show certain area on the map inside your application. Map Views are powered by the native map applications of each platform so they can differ on each platform. Supernova shows the Apple Maps by default, but generates Google Maps for Android.

Map View example
screenshot
Properties
  • Allows zoom - When enabled, user may use pinch gestures to zoom in and out
  • Allows scroll - When enabled, user is able to scroll around the map
  • Allows rotation - When enabled, user can change the camera's heading
  • Allows 3D view - When enabled, map will render objects in the 3D
  • Shows user location - When enabled, map will show user's location if location services are active
  • Shows buildings - When enabled, map will show buildings
  • Shows PoIs - When enabled, map will show points of interests

Animation View

Animation View is special type of view that we loved immediately when we saw it. Supernova allows for amazing animations but sometimes you need animations that are beyond the capabilities of the standard SDKs, or at least would be unbelievably complex to pull of. The solution is not a part of the base SDK, but instead a library that has been created by the amazing people of AirBnB and it is called Lottie. We are bringing the full support of the Lottie to generated projects as well as to interactive preview.

Animation View example (courtesy of AirBnB)
screenshot
Properties
  • Autoplays - Animation will automatically play on load
  • Loops - Animation will loop and start over once it reaches the end
  • Animation JSON - Animation definition in the JSON format. See Lottie documentation

Switch

Switch is a 2-state control that represents logical value of enabled / disabled state. Those components differ for each platform, though their functionality remains the same. Switch cannot be resized.

Switch example
screenshot
Properties
  • Is On - Corresponds to the initial state of the Switch
  • Tint color - Tint color of the Switch (background color)

Segmented Control

Segmented control allows the user to select one of the predefined states, being a quick-to-access equivalent of the drop-down menu or elements like that. It is usually used to switch between content tabs, or to switch configuration of the screen, or in the data forms.

Segmented Control example
screenshot
Properties
  • Tint color - Tint color of the segmented control border and selected item
  • Number of segments - Number of distinct segment in the control
  • Segment text - Text shown for each of the segments

Activity Indicator

Activity indicator shows visual indication of some action in progress. It cannot be resized.

Activity Indicator example
screenshot
Properties
  • Animating - When enabled, Activity Indicator will animate on screen load
  • Hides when stopped - When enabled, if the Activity Indicator is is stopped, it will also set .hidden = true
  • Tint color - Tint color of the entire Activity Indicator

Slider

Slider is a visual representation of customizable numetic range. User can easily use their finger to change the number value of some data. It is great when you don't need absolute precision (volume control and similar).

Slider example
screenshot
Properties
  • Minimum - Minimum numeric value represented by 0% on the Slider
  • Maximum - Minimum numeric value represented by 100% on the Slider
  • Current - Current numeric value represented by the Slider (can only be from minimum - maximum range)
  • Tint color - Tint color of the active part of the Slider

Progress

Progress is similar to a Slider. The main difference is that the progress does not allow user input and is strictly controller by the application code. It is usually used for loading bars, music track control and similar.

Progress example
screenshot
Properties
  • Progress - Value from 0 - 1 representing current state of the progress (0 - 100%)
  • Tint color - Tint color of the active part of the Progress

Page Control

Page control provides the user with a visual representation of paged content that can be scrolled left / right. The page dot highlight is usually controlled from the code.

Page Control example
screenshot
Properties
  • Number of pages - Total number of pages in the Page Control
  • Current page - Current page that is selected (starting from 0)
  • Tint color - Tint color of inactive page dots
  • Page color - Tint color of active page dot

Picker

Picker allows user to pick from list of the items similarly as they would from a drop-down menu. It is used where conventional lists are not feasible, as it can be easily used as togglable overlay over existing UI.

Picker example
screenshot
Properties

Picker has no specific properties at the moment

Date Picker

Date Picker is special case of Picker which allows user to pick the date easily. It is also usually used as an overlay over existing UI.

Date Picker example
screenshot
Properties

Date picker has no specific properties at the moment

Navigation Bar

Navigation Bar represents system component for unified navigation interface and movement across the application. Navigation bar is currently under heavy development and we will be bringing much more extensive documentation once the 0.8 version is released. Navigation Bar and Navigation Bar Items cannot be layouted as the layout is provided by the system.

Navigation Bar example
screenshot
Properties
  • Text - Text of the title view of the navigation bar (centered on iOS, left on Android)
  • Background color - Background color of the Navigation Bar (and underlaying color of status bar on iOS)

Navigation Item

Navigation Item represents one piece of text or an image in the Navigation Bar (with the expection of the title text, that is configured from the Navigation Bar Itself). All the Navigation Items are actionable.

Properties
  • Title - Title of the Navigation Item
  • Image - Image of the Navigation Item
  • Enabled - When enabled, Item will show up in the Navigation Bar.
  • Is Left - When enabled, Item will preffer the left side when laying out in the Navigation Bar

Tab Bar

Tab Bar represents system component for switching between pre-defined set of screens. Tab bar is currently under heavy development and we will be bringing much more extensive documentation once the 0.8 version is released. Tab Bar and Tab Bar Items cannot be layouted as the layout is provided by the system.

Tab Bar example
screenshot
Properties
  • Background color - Background color of the Tab Bar

Tab Bar Item

Tab Bar Item represents one screen and one section of the Tab Bar. There is a maximum of 5 items that you can have in the Tab Bar, simply to fit all the information there. It is a good practice to follow as well.

Properties
  • Title - Title of the Tab Bar Item. "World Clock" in the example
  • Image - Image of the Tab Bar Item. World Clock icon in the example
  • Enabled - When enabled, Item will show up in the Tab Bar.

That's it, you've mastered screens & components! Here, on us.

But components are not useful when they hide or break on different devices. Supernova features one-of-a-kind automatic layout resolver, let's learn how to use it to create responsive layouts.

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.