Framer
Features
  • Features
  • Improvements
Framer
  • Why Framer
  • Teams
  • Learn
    • Tutorials
    • Examples
    • Speedruns
    • Starter Kit
    • Sessions
  • Pricing
  • Blog
  • Updates
  • Support
Features
  • Features
  • Improvements

Latest feature

  • Scroll tool update
    February 24, 2021

Previous features

  • Smart Components
    February 2, 2021
  • Templates
    January 29, 2021
  • Redesigned preview & custom presentation settings
    December 16, 2020
  • Design resources in the Insert Menu
    December 8, 2020
  • Screen tool
    December 2, 2020

Smart Components

February 2, 2021

Introducing Smart Components—interactive components that have their own interactions, animations, and properties. And require no code to build. 

To create a Smart Component use the shortcut command + K or go to the Component section of the top toolbar. Once your component is created you’ll arrive in the Component Canvas and you can start building. The key ingredients in creating Smart Components are Variants and Variables.

Variants are different visual states of a component, such as disabled, error, or hover. You can add as many Variants as you need to your components in the Component Canvas. You can easily add hover and pressed states to your components with infinite visual Variants then, add Variables to customize even further. Variables are custom properties you can expose in your components. Anything can be a Variable from text to color to border radius making it easy to customize any property you need in any component instance.

To unlock even more advanced layouts, you can even nest Smart Components, each with their own Variants and Variables, then compose them to create the most realistic interactive experiences.

Try Framer

Bring every idea to life.

Learn more
Pivot: Try Framer

Framer

  • Why Framernew
  • Teams
  • Pricing
  • Blog
  • Updates
  • Motion

Platforms

  • Web
  • macOSbeta
  • WindowsBeta
  • iOS
  • Android
  • Figma Importing
  • Sketch Importing

Learn

  • Tutorials
  • Examples
  • Speedruns
  • Starter Kit
  • Sessions

Resources

  • Packages
  • API
  • State of Prototyping
  • Desktop Prototyping
  • Prototyping Tool
  • Mockup Tool
  • Wireframing Tool
  • UI/UX Design Tool
  • Graphic Design Tool
  • User Testing

About

  • Loupe
  • Community
  • Company
  • Careers
  • Legal
  • Security

Support

  • Using Framer
  • Accounts
  • Contact

  • Twitter
  • Discord
  • Dribbble

Copyright © 2021 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement