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 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 component that displays multiple items from a cmsCMS collection, automatically repeating a template for each entry. Collection lists power dynamic content displays like blog feeds, portfolio grids, and product catalogs. Framer collection lists support filtering, sorting, limiting, and responsive layouts. See Utilizing collection lists in Framer.

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 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.

A type of animation that creates fluid, continuous motion between states or along scroll, often used for page transitions. Flow effects add polish and help users maintain context during navigation. Framer's transitions support various flow effects between pages and component states.

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.

A dialog overlay that requires user attention before interacting with underlying content, used for alerts, forms, or focused tasks. Modals should have clear purposes and obvious dismissal methods—don't trap users in unexpected dialogs. In Framer, build modals as overlay components with appropriate entrance and exit animations.

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.

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.

A JavaScript library for building user interfaces through composable components and declarative rendering. React's component model powers many modern web applications and design tools. Framer is built on React, enabling code components and advanced customizations.

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.

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.

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 cohesive set of design choices—colors, typography, spacing—that can be applied across a site or component library. Themes enable consistent styling and support features like dark mode. Framer’s variables support theming through switchable value sets.

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.

Application Programming Interface—a set of rules that allows different software applications to communicate and share data. APIs enable integrations like pulling content from external databases, connecting to payment processors, or syncing with third-party services. Framer supports API connections through code components and code overrides for dynamic, data-driven sites.

Cascading Style Sheets—the styling language that controls how HTML elements appear, including colors, fonts, spacing, and layouts. While Framer generates CSS automatically from your visual designs, understanding CSS concepts helps you troubleshoot issues and leverage advanced features. Custom CSS can be added through code components or overrides when needed.

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.

The programming language that enables interactive and dynamic behavior in web browsers. JavaScript powers everything from form validation to complex web applications and animations. Framer's code components and overrides use JavaScript for custom functionality beyond visual tools.

User Interface—the visual elements and interactive components through which users engage with a product. Good UI is intuitive, consistent, and aligned with user expectations and mental models. UI design balances aesthetic appeal with functional usability.

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.

A collection of reusable components, guidelines, and standards that ensure consistency across a product and team. Design systems speed up development, maintain brand coherence, and enable designers and developers to speak the same language. Framer supports design systems through components, variables, and styles.

Related AI terms: Find Similar Designs and AI Layer Renaming.

Documentation defining a brand’s visual standards including colors, typography, spacing, and component usage rules. Style guides ensure consistency across team members, projects, and time. Maintain living style guides that evolve with your design system.

A methodology for building design systems from smallest elements (atoms) up through molecules, organisms, templates, and pages. This approach creates reusable, composable components that scale efficiently across large projects. Framer's component system naturally supports atomic design principles with nested components.

Named values storing design decisions like colors, spacing, and typography, enabling systematic design across platforms. Tokens create a single source of truth that can be translated to different implementation contexts. In Framer, variables serve as design tokens for colors, numbers, and responsive values.

A linked copy of a component that inherits properties from its main component while allowing local overrides. Instances update automatically when the main component changes, maintaining consistency at scale. Override specific properties on instances when variations are needed.

The Framer interface panel used to add elements, components, sections, and assets to a page. It centralizes building blocks so you can quickly compose layouts and interactions. See Using the insert panel in Framer.

A form element used to collect user-entered values such as text, email, or numbers. Input components often support states, validation, and submission workflows.

A shareable Framer link that lets others duplicate a project or component into their own workspace. Remix links are commonly used for templates, examples, and reusable building blocks. See Creating Remix Links in Framer.

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 CMS is Framer’s built-in content system for creating collections, defining fields, and powering dynamic pages and components from structured content.

Prompt-to-Code describes workflows where AI converts prompts and design intent into code structure. It is commonly paired with Prompt Template systems and custom Code Component output.

Find Similar Designs is an AI retrieval feature that helps teams discover visually related assets in large files or libraries. It supports consistency by linking discovery to your Design System and optional Style Reference inputs.

AI Layer Renaming automatically assigns meaningful layer names based on content and structure. This improves handoff, keeps files consistent with a Design System, and complements reusable Component Properties.

An MCP client is the part of an app or MCP server and requests tools, resources, or prompts using Model Context Protocol (MCP).agent that connects to an

An agent bridge is the connection layer that lets an outside AI tool access a Framer project, including pages, components, and CMS content.

In external AI agent workflows, agent bridge helps teams move faster without losing control of structure, content, performance, or editable design details.

Agent bridge setup is the process of connecting an external AI tool to a Framer project so it can access project context and tools.

Agent bridge setup usually includes installing a connection layer, authorizing access, and confirming that the external tool can read or edit the correct project. It helps external agents work with pages, CMS content, and components without manual copy-paste.

Agent-editable content is website or CMS content structured so an AI agent can update it safely without breaking the design.

Agent-editable content depends on clear fields, reusable components, and predictable page structure. When content is well organized, an agent can update copy, metadata, or CMS records while keeping the site consistent and editable.

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.

Framer auto-save protects design progress while teams edit pages, components, and content, making collaboration faster and reducing the risk of losing work.