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.

A user action or system occurrence that can trigger responses, such as clicks, scrolls, form submissions, or page loads. Events drive interactivity by connecting user actions to visual feedback and functionality. Understanding events helps create responsive, engaging experiences.

The transparency level of an element, ranging from 0% (invisible) to 100% (fully opaque). Reduce opacity to create overlays, de-emphasize secondary content, or build layered visual effects. Animate opacity for smooth fade-in and fade-out transitions.

The relative size of elements in relation to each other and the overall design, establishing hierarchy and emphasis. Scale creates visual drama—dramatically larger elements command attention while smaller ones recede. Consider how scale relationships change across breakpoints in responsive designs.

The border or outline applied to shapes and text, defined by weight, color, and style like solid, dashed, or dotted. Strokes add definition, create contrast, or achieve specific visual styles like outlined buttons. Framer offers stroke controls including width, color, and position (inside, center, outside).

Empty space in a design that provides visual breathing room and separation between elements. Whitespace improves readability, focus, and perceived quality of designs. Resist filling every available space—whitespace is an active design element.