Layout & Starlight

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

Responsivity

By today's standards, making applications responsive and supporting any size display is a must. Not only that, but the layouts must be performant and easy to modify, should the need arise. Supernova replicates the native functionality of iOS Autolayout and Google Constraint Layout, but also adds its own layout engine that is used in the simulation that overcomes the biggest issue of the constrains system - requirement to have completely valid layout before it can be resolved.

Let's look into the Supernova's layout technology and how it creates a seamless bridge between the layout systems.

Starlight

Starlight it the layout resolving engine powering the Supernova. It works similarly to Android or iOS resolving systems with one significant exception - it resolves the layout and preserves its state even if there is not enough constraints to satisfy it, using some predictive magic and also the information obtained from the Sketch base file.

Example usage of the constraints
screenshot

In the example above you can see that the inner view (white) has been constrained to always stick to its width and height, and that it should be offset from all sides by some arbitrary amount. This view can't be rescaled or dragged in the editor, but its parent can - so you can constraint only parts that you really want to ensure, keeping Supernova to do the rest.

But the primary reason for system like this is different. Making the layouts is tedious and error-prone and even after years of the development developers still cannot grasp all the intricacies - let alone the poor designers who don't use it that often. We've developed Starlight to finally fix this issue - its artifical brain can now create the layout for you, using the best practices of what to do and what not based on hundreds of real projects of all forms and shapes.

Important note on Starlight:

Starlight is NOT a replacement of iOS or Android layout systems. When exporting your project, it will generate native constraints exactly as you would create them. It only provides you with much more clever and less error-prone system that holds your design together when you work on them.

Constraints

There are 2 types of constraints - sizing and positioning. You can find the entire layout interface as a second right tab in the Studio. All layout operations are also available as keyboard shortcuts, making it extremely simple to pin different aspects of the component.

Layout Interface
screenshot

Frame

Frame configuration is the basic positioning method in the Supernova and works similarly to any other systems out there. Frame origin (0, 0) is the top-left corner of either screen, if the component is not within any other view, or top-left corner of its containing view.

Frame allows you to set the precise position of the element. Frame cannot be modified when the X or Y axis has been constrained, as the frame has to be able to change dynamically when other components change.

Positioning

There are 6 types of positioning constraints, each one with different purpose:

  • Leading (left) distance - makes sure that the left distance from the component remains the same
  • Trailing (right) distance - makes sure that the right distance from the component remains the same
  • Top distance - makes sure that the top distance from the component remains the same
  • Bottom distance - makes sure that the bottom distance from the component remains the same
  • Center X alignment - makes sure that the component is always centered horizontally
  • Center Y alignment - makes sure that the component is always centered vertically

You are free to combine them however you want. It is completely valid to have all positioning constraints active at the same time - effectively making a view of certain size that all the other components "obey".

Useful Tip:

When creating your layout by hand, start from inner-most components and continue upwards. This way, you will see how much space you need for your content in certain situations, letting Supernova to adjust the containers for you.

Sizing

There are effectively 3 types of sizing constraints, but you can only set 2:

  • Width constraint - Makes sure that the component width stays the same
  • Height constraint - Makes sure that the component height stays the same
  • Intrinsic size - Certain components provide their own height / width, usually based on the content they have

While the width and height constraints don't really need explanation, the intrinsic size does. You don't have to (and you really shouldn't in most cases) set width and height of certain components, layout system will calculate it for you. This applies to component that provide content (labels, buttons, images), OR that have specific size that cannot be changed (switch, activity indicator).

Layout Interface
screenshot

In the example above, the layout is completely valid, even though label does not have width or height constraints. That is because it provides intrinsic size on both horizontal and vertical axis. In the table below, you can see which components provide those sizes.

Nesting

Supernova is able to calculate nested layouts. You can have multiple levels of the views and it will use all that information to resize / reposition components for each level. Though the calculation can resolve multiple levels of the depth, you can create layout for given one component only on its own level (for example, you cannot pin the left edge of label to image that is 2 levels of hierarchy above it).

Example of nested layout

Automatic Solver

Making the layout for a person that is not accustomed to all its intricacies can be really difficult task. We would love if both developers and designers could use Supernova to its fullest and create the most stunning designs, so we created automatic layout solver.

What it does? It creates the entire layout for you. Not only that, but if you already created some of the constraints, it takes them into account and adds them a priority, so you can change the behavior of the Autosolve by providing the rules that you want to enforce.

Let's check the following video that showcases how the autosolve system will help you create your next layout. It showcases the real application without constraints (and how it would look on different screens) and then the same screen after Autosolve takes the place.

Making a layout for the screen - in one click

 

Autosolve works the best when you are finished with the structural changes to the screen. We recommend following workflow:

  • Clean up the design / screen - Remove extraneous components, to avoid unnecessary complexity
  • Convert all views to appropriate components - Each component type behaves differently and will produce different layout
  • Rum autosolve - Once all of that is done, run autosolve from the Layout panel > Solve screen

Simulation Modes

Supernova features 2 simulation modes - Starlight dynamic solver and Autolayout / Constraint layout simulation. While the first mode is great for the development because it will preserve your layout even if it is not valid, Autolayout simulation will show you precisely how the application will look on your device - and if it will be correct or not.

Starlight

Starlight will always preserve the layout, even if it means that some of the constraints need to be added behind the scenes, or removed if they are conflicting. In the example below, you can see that the buttons show up properly, even though it is missing a height constraint (Starlight simulation on the left).

Autolayout

Autolayout will only apply constraints that you created. If you created constraints that are conflicting or don't have enough information, it will simply not resolve correctly, often resulting in broken screens and components. Always check against Autolayout as well! You can enable the Autolayout simulation in Interactive mode > Enable Layout simulation. In the example below, you can see that the constraints are not sufficient - buttons show up with wrong height because it only used height information from its content.

The difference between Starlight and Autolayout rendering
screenshot

Additional information

We firmly believe that simply by using the Supernova you will very quickly understand what can be done with what components and why components sometimes behave differently. To the people that want really precise information about the layout, here you go:

Dynamic sizes of the components and other information about the layout
Component Provides width Provides height Can be constrained Can constrain children
View - - Yes Yes
Scroll View - - Yes Yes
Stack - - Yes -
Label Yes Yes Yes -
Image View Yes Yes Yes -
Button Yes * Yes Yes -
Text Field - - Yes -
Text View - - Yes -
Table - - Yes -
Table Cell Always table width - - Yes
Collection - - Yes -
Collection Cell - - - Yes
Web View - - Yes -
Map View - - Yes -
Animation View - - Yes -
Switch Yes Yes Yes -
Search Bar - Yes Yes -
Segmented Control - - Yes -
Activity Indicator Yes Yes Yes -
Slider - Yes Yes -
Progress - Yes Yes -
Page Control Yes Yes Yes -
Picker - - Yes -
Date Picker - - Yes -
Navigation Bar Always screen width Yes - -
Tab Bar Always screen width Yes - -

That's it, you've mastered responsive design! Here, third one us.

Your application is getting into shape, well done! It is time to double-down on that and give components little more oomph. Continue to learn about animations and how to bring your screens to life.

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.