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.

An interaction where users click and hold an element to move it, common for reordering lists, sliders, and drawing interfaces. Drag interactions should provide clear visual feedback about what's being moved and where it can be dropped. Consider touch device behavior where drag competes with scrolling gestures.

The visual appearance of an interactive element when it receives keyboard focus, which is critical for accessibility. Focus states must remain clearly visible; do not remove them without providing an equally visible replacement. A strong focus style improves usability for keyboard and assistive-technology users.

Any way users engage with your interface, from clicks and hovers to scrolls and gestures. Well-designed interactions feel responsive and intuitive while providing clear feedback. Framer enables complex interactions through triggers, animations, and state changes without coding.

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 small text popup that appears when hovering over an element, providing additional context or explanation. Tooltips should contain brief, helpful information that isn't essential for basic usage. Remember tooltips don't work on touch devices—don't hide critical information in them.

An invisible clickable area overlaid on designs to add interactivity, commonly used in prototypes for click-through demonstrations. Hotspots enable quick prototyping of interactions without building fully functional components. In Framer, prefer native interactive components over hotspots for production.

The initial appearance of an interface when empty of user content, requiring thoughtful design to guide action. Zero states should welcome users and clearly explain how to add content. Design engaging zero states that reduce new-user confusion.

Visual cues that suggest how an element can be used, such as a raised button appearing clickable or an underlined word suggesting a link. Affordances draw on learned conventions and physical metaphors to make interfaces intuitive without instructions. Strong affordances reduce learning curves and help users discover functionality naturally.

Conditional Visibility is a rule-based display setting that renders elements only when defined conditions are met, improving relevance and personalization.