Component Basics

In this video we explore components in Framer, including using variants to create different states and using variables to pass different information to our components.

There are some quirks to the way components work in Framer:

  • Component variants all share the same children. If you add a new element to a variant, it will be added to the layer tree of all the other variants but just hidden. This is to help with transitions but can be really confusing at first.

  • Variants inherit changes from the primary variants. This means that if you make a change on the primary variant, all the other variants will also change unless you specifically override it. This can be helpful when you need to make a change that effects all your variants.

Components are the key to motion and interactivity in Framer, so it's important to get your head round them.