Single-Purpose Components

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:

Shared properties:

  • Alpha - Opacity of the component where 0 means fully transparent and 1 means 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

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 (default, selected, highlighted, disabled). You can convert any component to a button by using the shortcut cmd + shift + b.

Button can have many forms - from text to icons to combinations of bothButton can have many forms - from text to icons to combinations of both

Button can have many forms - from text to icons to combinations of both

States
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

Important properties:

  • 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 Image instead of Background Image as Image gets 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 Left, Right, Top and Bottom.
  • 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

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.

Texts don't have much going on with them :)Texts don't have much going on with them :)

Texts don't have much going on with them :)

Important properties:

  • Type - Attributed or 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

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.

Text input fields gather important information from the usersText input fields gather important information from the users

Text input fields gather important information from the users

Important properties:

  • Content Type - Single-line or 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.

📘

Pro Tip

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

Images present a single (either vector or bitmap) asset to the user.

Image used for a complex backgroundImage used for a complex background

Image used for a complex background

Content Mode
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.

Important properties:

  • Image - Source image shown in the container.

Activity Indicators

Activity indicators inform users about the loading state. The activity indicator has a specific (system) size and can't be resized.

Black-tinted activity indicatorBlack-tinted activity indicator

Black-tinted activity indicator

Important properties:

  • Animating - When enabled, activity indicator will be spinning
  • Style - Small (20 x 20px) or Large (40 x 40px)
  • Tint Color - Primary color of activity indicator

Page Controls

The page control is used to inform the user that the content has multiple cards that can be presented by scrolling left or right.

4-page page control with fourth page being active4-page page control with fourth page being active

4-page page control with fourth page being active

Important Properties:

  • 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 & Sliders

Progress bars and sliders allow the user to select continuous values from a certain range.

Slider used in combination with additional UI to represent a volume controlSlider used in combination with additional UI to represent a volume control

Slider used in combination with additional UI to represent a volume control

Important Properties:

  • 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

Segmented controls allow for easy access to multiple choices, working like radio buttons.

Segmented Control with 3 text segmentsSegmented Control with 3 text segments

Segmented Control with 3 text segments

Important Properties:

  • 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

Switches allow for easy configuration of on/off states with a simple gesture.

Switch enabled by defaultSwitch enabled by default

Switch enabled by default

Important Properties:

  • 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.


What’s Next