What are Components?

Components in Framer are UI elements that can be used multiple times across different projects or within the same project. They are designed to streamline the design process by providing a consistent look and feel while saving time and effort. Here are some key points about reusable components in Framer:

• Standardisation: Reusable components are versatile and can be used for creating various UI elements like navigation bars, buttons, footers, accordions, sidebars, cards, etc

• Reusable Animations: You can define animations once and then reuse them in multiple components. This feature allows for more complex animations and is easier to maintain than animations defined in code.

• Variants and Interactions: Components can have variants, which are different sets of properties and styles within a single component. These can be used to create interactive components with interactions such as hover, tap, and drag.

• Effects in Components: Framer allows you to add animations and interactions to your components, such as Appear, Hover, Press, Drag, Loop, Scroll Animations, Scroll Transforms, and Scroll Speed. This makes effects reusable and unlocks new interactions.

In summary, reusable components in Framer are a powerful way to create consistent and interactive UI elements that can be easily maintained and reused across different parts of a project or in multiple projects. They leverage the capabilities of Framer to provide a flexible and efficient design workflow.

Components can be both Interactive or not. Standardisation is key in building great websites.

How to make a Component?

Here is a Framer Tutorial about Components, covering Variants, Variables and Interactions using a Button Component.