An animation that plays when an element first becomes visible on screen, typically as the user scrolls down the page. These effects add polish and draw attention to content as it enters the viewport. Framer provides various appear effects like fade, slide, scale, and blur that can be customized for timing, delay, and easing.

A Framer feature that automatically arranges child elements in a row or column with consistent spacing, similar to CSS Flexbox. This powerful tool creates responsive designs that adapt to content changes—add or remove items and the layout adjusts automatically. Auto Layout is essential for building reusable components like navigation bars, card grids, and form fields.

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.

The workspace in a design tool where you create and arrange visual elements, representing the artboard or page you're designing. In Framer, the canvas is where you build your site visually, with a floating cursor that lets you precisely place and manipulate elements. The canvas supports zoom, pan, and rulers to help you work at any scale.

A custom React component written in code that extends Framer's capabilities beyond built-in features. Code components enable advanced functionality like custom animations, API integrations, and complex interactive elements. They live alongside visual components and can accept properties that designers control without touching code.

A JavaScript function that modifies component behavior without changing the component itself, enabling custom interactions and logic. Overrides let you add functionality like form validation, state management, or API calls while keeping components reusable. This separation of concerns keeps your component library clean while allowing page-specific customizations.

A way to organize and filter cms-collection">CMS collection items by shared attributes, enabling dynamic filtering and categorization. Groups help structure content for navigation, like filtering blog posts by category or products by type. In Framer, reference groups in collection lists to display categorized content with dynamic filtering.

A reusable color value stored centrally and referenced throughout your design, enabling consistent branding and easy global updates. When you change a color variable, every element using it updates automatically. Framer's color variables support semantic naming like 'primary' and 'error' for maintainable design systems.

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.

User-written JavaScript, CSS, or HTML that extends functionality beyond built-in features. Custom code enables advanced interactions, integrations, and unique behaviors tailored to specific requirements. In Framer, add custom code through code components, overrides, or the custom code section in site settings.

A variable font containing multiple weights, widths, or styles in a single file, enabling smooth interpolation between values. Variable fonts reduce file downloads while offering greater typographic flexibility. Use variable fonts for performance benefits and fluid typography that responds to user preferences.

The fundamental container element in Framer that holds content and defines boundaries for layout, sizing, and visual properties. Frames are the building blocks of every Framer design, from tiny icons to full page layouts. Unlike groups, frames have their own properties and can contain responsive layouts and effects.

A production-ready motion library for React that powers Framer's animation capabilities with smooth, performant animations. Understanding Framer Motion concepts helps you leverage advanced animation features in code components. The library handles complex calculations like spring physics and gesture recognition automatically.

A UI element in design tools providing quick access to add new elements like text, shapes, images, and components. Insert menus speed up design workflows by centralizing element creation. Framer's insert menu and slash commands enable rapid element addition.

A platform for buying, selling, or sharing design resources, templates, and assets within a tool's ecosystem. Marketplaces accelerate projects by providing ready-made solutions and components. Browse Framer's marketplace for templates, components, and inspiration.

Custom code or settings that modify default component behavior without changing the original component definition. Overrides enable page-specific customizations while maintaining reusable component libraries. Use Framer's code overrides for interactions that go beyond visual property changes.

A distinct document within a website with its own URL, content, and purpose in the site structure. Each page should have clear purpose, proper metadata, and thoughtful internal linking. Organize pages logically and limit depth to keep content discoverable.

Interface elements that allow adjusting component properties visually, exposing customization options to designers. Property controls make components flexible and reusable across different contexts. In Framer, add property controls to code components for designer-friendly customization.

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.

Creating a new project based on an existing template or shared design, inheriting structure while enabling customization. Remixing accelerates projects by building on proven foundations. Explore Framer's community for remixable templates and components.

Animation effects tied to scroll position, creating parallax, reveal, and other scroll-driven visual changes. Scroll transforms add interactivity and storytelling potential to long-form content. Balance visual interest with performance and accessibility considerations.

Framer's backend functionality enabling server-side operations, data processing, and secure integrations. Server APIs handle operations that shouldn't or can't run in the browser, like secure API calls. Use server APIs for authentication, database operations, and sensitive processing.

An enhanced component with logic, state management, or interactive capabilities beyond static visual properties. Smart components respond to user input, fetch data, or manage complex state. Build smart components with code when visual tools aren't sufficient.

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.

A pre-designed, reusable starting point containing layout structure, styles, and often placeholder content. Templates accelerate projects by providing tested foundations rather than starting from scratch. Framer offers professional templates for common site types that can be fully customized.

Visual enhancements applied to text including shadows, gradients, outlines, and animations. Text effects can add personality and emphasis but should maintain readability. Use effects sparingly and test at various sizes and backgrounds.

A saved combination of font, size, weight, spacing, and color settings that can be applied consistently to text elements. Text styles ensure typographic consistency and make global updates efficient—change the style, update all instances. Build a systematic hierarchy with styles for headings, body, captions, and other text types.

A named value stored centrally that can be reused throughout your project and updated globally from one location. Variables enable design systems by ensuring consistent values for colors, spacing, radii, and more. Framer's variable system supports colors, numbers, and responsive values.

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.

Framer's enhanced vector editing capabilities with improved path manipulation and boolean operations. Vectors 2.0 enables more sophisticated graphic creation directly within Framer. Use vector tools for icons, illustrations, and custom shapes.