A reusable design element that maintains consistency across your project, from simple buttons to complex navigation systems. Components create a single source of truth—update the main component and all instances reflect the change. In Framer, components can have variants, responsive states, and interactive behaviors.

The appearance of a page or component when no content is available, such as an empty search results or new user dashboard. Well-designed empty states guide users toward actions that populate the interface. Include helpful messaging and clear calls to action rather than leaving users stranded.

Properties passed to components that control their appearance and behavior, the primary customization mechanism. Props enable component reuse by allowing different configurations of the same underlying component. Design prop interfaces thoughtfully for intuitive component customization.

A layout component that arranges children in a vertical or horizontal sequence with consistent spacing. Stacks simplify common layout patterns and maintain consistent gaps between elements. Use Framer's auto layout or stack components for structured arrangements.

The current condition of a component or interface element, such as default, hover, active, loading, or error. Managing state effectively enables responsive, interactive experiences. Design all relevant states and transitions between them.

A predefined variation of a component representing different states, themes, or configurations. Variants keep related options organized and enable smooth transitions between states. Framer's variant system supports complex interactive components.