Movement applied to elements that brings interfaces to life and guides user attention through visual storytelling. Thoughtful animation improves usability by providing feedback, showing relationships between elements, and making interactions feel responsive. Framer offers powerful animation tools including appear effects, scroll-based triggers, and component variants with smooth transitions.

A version of a component or layout specifically designed for a particular screen size, allowing different arrangements at each breakpoint. This approach provides precise control over how elements restack, resize, or hide across devices. In Framer, create breakpoint variants to transform horizontal navbars into mobile hamburger menus or reflow card grids into single columns.

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.

A predefined state or version of a component, such as primary/secondary buttons or default/hover/active states. Variants keep related component options organized together while enabling smooth transitions between states. Framer's variant system supports complex interaction patterns with animated transitions between any variant combination.

The process of adapting content and design for different languages, cultures, and regions. Localization goes beyond translation to include date formats, currency, imagery, and cultural considerations. Framer supports localized content variants within its CMS for managing multilingual sites efficiently.

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 navigation icon consisting of three horizontal lines that reveals a hidden menu when tapped, standard on mobile devices. While space-efficient, hamburger menus hide navigation and reduce discoverability—consider keeping key links visible. In Framer, create hamburger menus with component variants that animate between open and closed states.

Removing or replacing branding so products or services can be resold under another brand name. White label options help agencies deliver branded client experiences. Framer's business plans include white label options.

Combo Classes extend a base CSS class with targeted style changes, allowing reusable variants without duplicating entire style definitions.

Component Properties are exposed settings on reusable components that let editors and designers change values like text, states, visibility, or variants.

Framer supports dark experiences through color choices, tokens, and component variants, making it easier to design interfaces that feel polished in low-light or high-contrast contexts.

In Framer, smart components package structure, styling, content controls, and states into reusable building blocks so teams can update repeated UI consistently across a site.