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.
The gif component
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.
The video component
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.