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.
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.
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.
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.
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.
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.
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 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
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.
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 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.
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.
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*
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.
By default, following components provide you with intrinsic size:
Navigation Bars /
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.
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.
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.
Updated over 2 years ago