Framer
  • Support
  • Using Framer
Framer
  • Learn
    • Speedruns
    • Starter Kit
    • Examples
    • Tutorials
    • Sessions
  • Teams
    • Teams
    • Enterprise
  • Pricing
  • Blog
  • Updates
  • Support
  • Support
  • Using Framer

Related Articles

  • Variables
  • Creating responsive designs
  • Insert Menu
  • Using Custom Fonts
  • Drawing Mode

Default Components

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

To see the Default Components, open the Insert menu and click Default Components. To add a component to your project, click on the component and then click Insert.

Default components within the insert menu

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 component

Device

View your work in clay device frames, including mobile and tablet. You can connect the component to content and open the preview to begin presenting.

The device component

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

Icon Set

Search the Feather icon library by entering a keyword, select an icon to add to your prototype and customize the size and color to fit your needs.

Icon component

Custom Icon

Draw custom paths and shapes to create your own custom icons. Export them as SVG elements within the handoff panel.

Draw a custom icon with the Graphic tool

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 component

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

Notes

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

Radio Buttons

Add fully customizable radio button lists to your prototypes. You can customize the styles for the active, inactive and hover states and transition to frames based on the selected option.

Each button will also have the ability to trigger a transition to another screen.

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 transition to frames based on the selected option.

The segmented control component

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

Tabs

Create tab menus in your prototypes without a single line of code. You can add multiple screens to the component and customize the icons to fit your needs.

The tabs 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

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
Helpful?Was this article helpful?

0

0

Framer

  • Updates
  • Pricing
  • Tutorials
  • Teams
  • Enterprise
  • Blog
  • Motion

Platforms

  • Web
  • macOS
  • iOS
  • Android
  • Figma Importing
  • Sketch Importing
  • User Testing
  • Desktop PrototypingNew

Resources

  • Examples
  • Sessions
  • SpeedrunsNew
  • Packages
  • Volt
  • API
  • State of Prototyping
  • Wireframing Tool
  • Mockup Tool
  • Dictionary

About

  • Loupe
  • Community
  • Company
  • Careers
  • Security

Support

  • Using Framer
  • Accounts
  • Contact

  • Twitter
  • Discord
  • Dribbble

Copyright © 2021 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement