Default Components

The Insert menu's Default Components are a collection of interactive code components, each built for speed and ease of customization.

You can find all the Default Components under the three categories in which they are categorized: Interface, Media, and Utility.

Default components within the insert menu

Interface

Button

Add interactive buttons with built-in hover and pressed states. Customize everything from the style to the action state animations.

The button component

Checkbox

Add fully customizable checkboxes that allow you to transition to frames when toggled, checked, or unchecked.

The Checkbox also comes with unique triggers that can be used to trigger a transition: Toggle, Check, Uncheck.

The checkbox component

Cursors

The Cursors component can be used to indicate different states of a cursor, and provides tens of different cursors to choose from with or without a Shadow.

Input

Add fully functioning input fields with customizable focus and blurred states. Supports password and text input field modes, and allows you to transition to frames on submit.

The Input also comes with unique triggers that can be used to trigger a transition: Change, Submit, Focus, and Blur.

The Input component

Radio Buttons

Add fully customizable radio button lists to your prototypes. You can customize the styles for the active, inactive, and hover states and add up to 10 radio buttons.

Each button will also have the ability to trigger a transition to another screen using the unique triggers: On Change and Option 1 Tap through Option 10 Tap.

The radio button component

Segmented Control

Add fully functioning segmented controls to your prototypes for switching content. You can customize everything from the style to the animations, and add up to 5 segments.

Each segment will also have the ability to trigger a transition to another screen using the unique triggers: On Change and Segment 1 Tap through Segment 5 Tap.

The segmented control component

Select

Create a dropdown to select any of the configured options. Customize many different aspects of the Select dropdown, from the focus state to the font family.

Each select option will also have the ability to trigger a transition to another screen using the unique triggers: Change, Blur, and Select Option 1 through Select Option 10.

Slider

Add customizable sliders with built-in functionality, including the ability to set values by dragging on the knob or clicking on the track. You can customize the style and set values to fit your needs.

The slider component

Toggle

Add fully customizable toggle controls to your prototypes. You can customize the style and the animations, as well as transition to frames when toggled on or off.

The toggle component

Media

Audio

Play sounds and music with the Audio component. Upload your own video file or use a URL. Control anything, from the volume to whether or not to show the controls.

Avatar

Instantly pull in avatars from real individuals, or customize the avatar with a background fill and initials or by uploading a background image.

GIF

Search from a library of GIFs by entering a keyword, view the looping GIFs on the canvas and add them to your prototypes.

Video

Add MP4 videos to your prototypes. Either input a URL or upload your own local file. You can customize a variety of playback options, such as enabling autoplay, hiding the controls, or muting the sound.

YouTube

Add embedded YouTube videos to your prototypes. You can input your desired video URL and set the autoplay option to on, off or loop.

The YouTube component

Utility

Loading Indicator

Add loading indicators to your prototypes. You can set a duration and link it to a layer to automatically transition on timeout.

The loading component

Progress Bar

Populate your prototype with an animating progress component, indicating the loading of any kind of content.

Tip: Combine the Progress Bar with the Appear transition on a Screen to create realistic delay-based, sequenced transitions that are in sync with your Progress Bar.

Rating

Easily enable your users to tap and provide a custom rating. By default, the ratings are given in stars, but the component allows you to leverage any icon from the Feather icon pack.

Sticky Note

Use this component to add comments, feedback, or to-dos on the canvas. You can select from a variety of colors and hide them in previews.

The note component

Time & Date

Display the live time and date, in as many formats as you’ll need. Pick from dates or times in 12h or 24h format and even control to hide or show seconds, minutes, and hours.

Need to use a different time locale? Just choose a different timezone from any location in the world.