A single-purpose components represents a single piece of functionality in your app. It can be interaction or visual presentation - from buttons to sliders to progress bars and so on. Single-purpose components can't contain other components - if you need that, use containers instead.
Each component has a set of shared and specific properties you can configure to make it look exactly as you like. Shared properties can be configured for every component:
Alpha- Opacity of the component where
0means fully transparent and
1means fully opaque. Note that opacity is applied to the entire component, so it also affects things like border and shadow.
Corner Radius- Circular area around each corner of the component that will be clipped. Note that the option to set each corner radius separately is not yet supported.
Background Color- Background color rendered behind the component.
Shadow- Shadow rendered behind the component.
Border- Border rendered around the component
Visibility- Hides or shows the component. Note that invisible components will still be exported - if do not want this, remove them from the component tree.
Buttons allow users to interact with the app. Buttons also have the option to invoke navigation like pushing to other screens or showing modal views. Buttons also allow you to define different states (
disabled). You can convert any component to a button by using the shortcut
cmd + shift + b.
Each button has a configurable state. States indicate to the user how they can interact with it. Following states are supported:
Default- Button is enabled and not selected/pressed
Highlighted- Button is enabled and in the pressed state
Selected- Button is enabled and reflects a selected state (but is not currently being pressed)
Disabled- Button is disabled and cannot be pressed
Text- Text that is shown on the button. Content of the button is always centered, offset by insets.
Image- Foreground image, usually an icon. For buttons that are image-only, always use
Imagegets an automatic highlight state.
Background Image- Background image, usually for complex backgrounds like gradients. Always choose background color over an image if the background is a solid color.
Image Position- Positioning of the image from the center. Available options are
Image-Text Spacing- Spacing between image and text, if both are provided. If text or image is missing, spacing is ignored.
Insets- Inset of the content (both image, text and their potential spacing) from either edge.
Text containers are used to present a single piece of text information that is not interactive in any way. You can edit text by double-clicking the component in preview.
Plain. The type is inferred on import - attributed strings allow you to set advanced options like spacing or line-height, and are exported differently.
Number of Lines- You can limit the wrapping of text by setting the number of lines to 1. If set to 0, the text is free to wrap until the content fits. In order to wrap the text, layout needs to be set properly - either by constraining its width or pinning the container to both left and right edge
Font- Font of the presented text
Text Color- Color of the presented text
Text Alignment- Text alignment of the presented text. Note that text alignment will only take effect if the container is wider than the text itself
Spacing- Sets specific spacing for characters, lines, and paragraphs
Text input fields allow gathering a singular piece of information from your users. They can either be single-line or multi-line. You can convert any component to a text field by using shortcut
cmd + shift + f.
Multi-line. Use single-line for things like names and passwords, and use multi-line for larger blocks of text, like stories.
Keyboard- Type of keyboard that will be shown to the user when the text field has focus. Keyboard type is a great way to limit what the user can type.
Return Key- Changes what the return key on the keyboard represents.
Clear Button- When enabled, shows a clear button on the left side of the text input.
Secure- When enabled, input will show stars instead of clear text - e.g., for password entry.
Autocorrect- When enabled, the text field will autocorrect what the user types.
Insets- Text interior inset from the edges of the field.
If your input is named "password" or contains "*" or "password" in the placeholder in your designs, Supernova will automatically create s secure text input field for you on conversion.
Images present a single (either vector or bitmap) asset to the user.
Content mode defines resizing behavior of the image. Not to be confused with resizing behavior of the layout, content mode describes what should happen when container size changes. There are 4 possible options:
Scale to Fill- Image will ignore aspect-ratio and fill 1:1 with the container.
Aspect Fill- Image will keep the aspect ratio and scale to fill the container. If the image doesn't fit the container perfectly, it will be clipped.
Aspect Fit- Image will keep its aspect ratio and scale so it fits the container fully. If the image doesn't fit the container perfectly, there will be transparent gaps.
None- Image will be kept exactly as it is.
Image- Source image shown in the container.
Activity indicators inform users about the loading state. The activity indicator has a specific (system) size and can't be resized.
Animating- When enabled, activity indicator will be spinning
Small(20 x 20px) or
Large(40 x 40px)
Tint Color- Primary color of activity indicator
The page control is used to inform the user that the content has multiple cards that can be presented by scrolling left or right.
Number of Pages- Total number of represented pages
Current Page- Selected page indicator index
Page Color- Color of page indicators that are not selected
Tint Color- Color of page indicator that is selected
Progress bars and sliders allow the user to select continuous values from a certain range.
Current- Default value of the bar. Must be within range of <minimum, maximum>
Minimum- Minimum value represented by the slider
Maximum- Maximum value represented by the slider
Active color- Color of active part of the slider (on the left)
Track color- Color of inactive part of the slider (on the right)
Thumb color- Color of the thumb circle
Segmented controls allow for easy access to multiple choices, working like radio buttons.
Segments- Either image or text information shown in the control
Tint Color- Primary color of the control
Title Color- Color of the idle segment text
Selected Title Color- Color of the selected segment text
Switches allow for easy configuration of on/off states with a simple gesture.
Is On- Specifies whether the switch is enabled by default
Tint Color- Color of outline when the switch is off
Selected Tint Color- Color of outline when the switch is on
Thumb Color- Color of the thumb button
Specifics of different platforms
The images used in this documentation represent the visual style of iOS, however, the visuals might differ from platform to platform. For example, a switch on Android is very different from iOS, however the same configuration still applies.
Updated over 1 year ago