Responsive Layouts

By today's standards, having app 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 boasts Starlight - our own state-of-the-art automatic solution to responsive layouts. Starlight reduces the need to do any layout for to such extent that most of the times you won't have to do anything at all.

Responsive layouts out of the box - The app is immediately responsive right after being importedResponsive layouts out of the box - The app is immediately responsive right after being imported

Responsive layouts out of the box - The app is immediately responsive right after being imported

Best of all, once all your prototyping work is done, you can export components with layout information for all platforms using only native definitions - Auto Layout for iOS, Constraint Layout for Android and Flexbox for Flutter and React Native.

Let's go through the magic behind Starlight one at the time.

Automatic Behaviors

In order to automate as much work as possible, Supernova uses behaviors. You are already familiar with behaviors if you've worked with current-gen design editors. For example, you can pin layers to left and right and they'll properly stretch or shrink when the screen size changes.

Behavior control panel giving you full control over how the layout worksBehavior control panel giving you full control over how the layout works

Behavior control panel giving you full control over how the layout works

In Supernova, you can apply the layout behavior to any component with fine control over the behaviors. But before we get into the details, let's look at how to define behaviors.

Automatic behavior: Layout on import

Starlight engine creates the initial behavior configuration at the import for you. It uses very complex heuristics to compare how different combinations of behaviors look at different resolutions and suggests the best solution. This removes the need to go through each component separately.

Automatic behavior: Layout on component conversion

When a component is converted to a different type, different behavior is usually needed. For example, if components are merged to create one single list, the suggestion engine runs on the newly created components and creates new behaviors.

Manual behavior

Finally, it is completely possible to define behaviors by hand. Each behavior can be set and reset, and immediately propagates to the live mode, showing the changes in real-time.

📘

Save time doing the layout work twice

In today's world, the layout is usually done 3! times before the app gets to production. When the app is designed when it is turned into the prototype and then when it is coded. This results in hundreds of hours just plain wasted.

Supernova Starlight engine suggestions are close to being perfect and so we suggest you don't do the layout work in Sketch or Adobe XD - instead, import your project to Supernova and it will be created for you, and your developers when they export the project. Viva la automation.

Edge pinning

Edge pinning is a method of how to say to a component to stay the exact distance from the edge of the screen or the nearest component. You can pin to left, right, top or bottom edge. When enabled, the specific component will find its nearest neighbor in that direction and position with it, keeping the distance specified in the preview.

You can easily see how the component behaves by checking the dots on the selected component. 
If the dot is colored, the component will keep the distance to other components in that directionYou can easily see how the component behaves by checking the dots on the selected component. 
If the dot is colored, the component will keep the distance to other components in that direction

You can easily see how the component behaves by checking the dots on the selected component.
If the dot is colored, the component will keep the distance to other components in that direction

📘

Developer Tip

Compared to tools like XCode Interface Builder, you are not defining constraints - constraints are generated from Supernova behaviors in runtime when project is exported or when you have real-time code generation enabled. This allows you to test different configurations of layouts just by moving things around without the need to constantly change constraints for even the smallest of changes.

Centering

Centering is a method of how to say that a component should stay aligned with the center of its container. Note that the centering doesn't align the component with the middle of the screen! In order to do that, your component needs to lie below the root component - the main view is always of the size of the entire screen.

You'll be able to tell if the component is centered immediately by looking at the middle point.
Centered components are represented by horizontal and vertical alignment linesYou'll be able to tell if the component is centered immediately by looking at the middle point.
Centered components are represented by horizontal and vertical alignment lines

You'll be able to tell if the component is centered immediately by looking at the middle point.
Centered components are represented by horizontal and vertical alignment lines

🚧

Keep in mind

Centering is mutually exclusive to edge pinning in its respective axis - if you configure a component to center itself in X-axis, left and right pinning to edges will be disabled and vice versa. This combination would result in situations that logically can't be resolved and is therefore not possible.

Resizing

If no resizing behavior is provided, Starlight will guess what should happen when the screen size changes. There are 3 possible scenarios:

  • The component will not resize at all
  • The component will resize depending on its content
  • The component will resize always and purely depends on the size of the screen

What choice is selected depends on several factors, like where the component is located, what are its surrounding components, what type of component it is and so on. However, there is a way how to force the behaviors above:

  • To prevent resizing, set either width or height lock on (see image below)
  • To force component to resize with the screen, pin it to both edges at the desired axis
  • To keep component resizing based on its content, pin it to one (and only one) edge at the desired axis*
In this example, the content of the form will keep the precise width - 335px. 
It will also be centered horizontally with the screen and stick to the top textIn this example, the content of the form will keep the precise width - 335px. 
It will also be centered horizontally with the screen and stick to the top text

In this example, the content of the form will keep the precise width - 335px.
It will also be centered horizontally with the screen and stick to the top text

Intrinsic sizes

Intrinsic size means the size provided by the content. Some components like text container can provide its width and height without settings any layout rules. This makes creation of layout significantly easier, but also allows for some very interesting additions like layout that adapts to the content.

For example, if the text wraps and creates a new line, it is often desirable to have the entire content below shift. This is done through the intrinsic size of the text container. The great news is that you don't have to do anything at all - intrinsic sizes are automatically accounted for when the layout is resolved for the export.

By default, components that can provide intrinsic size will do just that - if you want to prevent texts, images, and others (see the list below) to resize by content, make them to have fixed width or height using behavior panel.

Supported components

By default, following components provide you with intrinsic size: Stackable Views, Texts, Images, Buttons, Switches, Sliders and Navigation Bars / Tab Bars.

Bonus: Maintaining content ratios when resizing

Sometimes it is desirable so that multiple elements resize in relation to each other. This is usually impossible to achieve in design editors however it is fully supported in Supernova.

Maintaining ratio allows you to do resizing usually impossible with standard design toolsMaintaining ratio allows you to do resizing usually impossible with standard design tools

Maintaining ratio allows you to do resizing usually impossible with standard design tools

In order to use this advanced option, first, group everything that should resize together inside one view. When maintain horizontal content ratio option is enabled, the layout will do two things:

  • Spacing between elements is preserved and is not resized
  • Elements are resized using their relative sizes

In the case above, both buttons are the same width - and so they'll be resized 1:1, for example, from 100px and 100px to 200px and 200px. However, if the first button would be twice the size of the second one, it would be resized using 2:1 ratio instead. Spacing will not change in any way.

Previewing on different devices

Supernova allows you to preview the design immediately using Live Mode. Switch to live mode and a new option using the buttons at the bottom of the canvas, and a device selection option will appear just below the toolbar. Click on the device and select which one you'd like to see.

There is also a second option to show layout behavior. When in live mode, move your cursor over to the edge of the simulated screen and simply resize the device. The layout is then adjusted every time the screen size changes, allowing you to test a wide range of device sizes within seconds.

👍

Not just size

Live mode not only simulates different sizes, but also different properties of the device. For example, iPhone X has natural padding from the top - and the layout will reflect that. It is currently not possible to modify global paddings of the device (so-called safe areas), but that feature is planned.


What’s Next

Learn how to create navigation between screens