A permanent redirect that tells browsers and search engines a page has moved to a new URL forever. This is essential for maintaining SEO value when restructuring your site or changing URL patterns. In Framer, configure 301 redirects in your site settings under the Redirects section to preserve link equity from old URLs.

A custom error page displayed when visitors try to access a URL that doesn’t exist on your site. A well-designed 404 page helps retain visitors by offering navigation options and search functionality rather than a dead end. Framer lets you create branded 404 pages that match your site’s design and guide users back to relevant content.

A method of comparing two versions of a page to determine which performs better based on user behavior and conversions. This data-driven approach removes guesswork from design decisions by letting real visitors vote with their actions. Framer's built-in A/B testing in Metrics lets you run experiments without third-party tools or complex setup.

Comprehensive tracking tools that go beyond pageviews to measure user journeys, conversion funnels, and behavioral patterns. Understanding how users actually interact with your site reveals optimization opportunities that basic analytics miss. Framer's built-in analytics include A/B testing, click tracking, and funnel analysis—all GDPR-compliant without requiring cookie consent banners. See Track clicks, build funnels, and A/B test pages.

Descriptive text added to images that screen readers and search engines use to understand image content. Good alt text describes content and purpose, not just its appearance — “Team celebrating product launch” is better than “people in office.” Framer lets you add alt text directly in the image properties panel. See How to add Alt Tags to images.

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 CSS effect that applies visual filters like blur or color adjustment to the area behind an element, creating frosted glass or tinted overlay effects. This technique is popular for navigation bars and modal backgrounds that need to stand out while maintaining context with underlying content. In Framer, apply backdrop filters through the Fill properties to create modern, layered interfaces.

A mathematically defined curve used in vector graphics and animation, controlled by anchor points and handles that determine its shape. Understanding bezier curves helps create smooth, natural-feeling animations and custom easing functions. Framer’s animation curves use bezier mathematics to control the acceleration and deceleration of motion.

A setting that determines how an element’s colors interact with the layers beneath it, such as multiply, screen, overlay, or difference. Blend modes enable creative effects like color tinting images, creating texture overlays, and building complex visual compositions. Experiment with blend modes in Framer to achieve effects that would otherwise require image editing software.

The CSS property that rounds the corners of an element, measured in pixels or percentages. Border radius transforms harsh rectangles into friendlier, more organic shapes—from subtle rounding to perfect circles. Framer provides individual corner controls for asymmetric rounding and variables to maintain consistent corner radii across your design system.

A CSS effect that adds shadow beneath or around an element, creating depth and visual separation from the background. Shadows help establish hierarchy by making elements appear to float above the page surface. Framer offers detailed shadow controls including multiple shadows, inner shadows, and variables for consistent elevation systems.

A specific screen width where your design adapts to a different layout, ensuring your site looks good on all devices from phones to large monitors. Strategic breakpoint choices prevent awkward in-between states where content becomes cramped or overly stretched. Framer's breakpoint system lets you customize layouts at each size while maintaining a single source of truth for your design.

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.

An HTML element that tells search engines which URL is the ‘official’ version of a page when duplicate content exists at multiple addresses. This prevents SEO dilution from copied content, URL parameters, or www/non-www variations. Framer automatically generates canonical tags, and you can customize them in page settings for specific SEO requirements. See Setting up a custom canonical URL in Framer.

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

Content Delivery Network—a distributed network of servers that delivers web content from locations geographically closest to each visitor. CDNs dramatically reduce latency and load times for global audiences while providing redundancy if one server fails. Framer hosts all sites on a global CDN automatically, ensuring fast performance worldwide without additional configuration.

The measurement of where and how users click on a webpage, revealing which elements attract attention and which are ignored. Click tracking data helps optimize button placement, navigation design, and content hierarchy. Framer's built-in click tracking in Metrics shows exactly where visitors engage without needing external heatmap tools.

text and images while maintaining consistent styling. Framer’s built-in CMS supports Content Management System—a platform for creating, organizing, and publishing digital content without writing code for each update. A CMS separates content from design, allowing non-technical users to update collections, relationships, and dynamic pages for blogs, portfolios, and product catalogs.

A CMS that groups related items together, like blog posts, team members, or products. Collections define the fields and data types for each item, ensuring consistent structure across entries. Connect collection items to dynamic pages to automatically generate individual pages for each entry with consistent layouts. See CMS collections, items & fields.structured content type in Framer’s

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 way to organize and filter cmsCMS 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, use groups in collection lists to display categorized content with dynamic filters.

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

Rules that define how an element should resize or reposition when its parent container changes size. Constraints control whether elements stretch, stay fixed, or maintain proportional relationships during responsive resizing. Setting constraints correctly in Framer ensures your layouts adapt elegantly across different screen sizes.

A parent element that holds and organizes child elements, defining boundaries for layout and positioning. Containers with maximum widths prevent content from becoming too wide on large screens while allowing full-width backgrounds. Framer's containers support auto layout, padding, and responsive size controls for flexible layouts.

When a visitor completes a desired action, such as signing up, making a purchase, or filling out a contact form. Conversion rate—the percentage of visitors who convert—is a key success metric for most websites. Track conversions in Framer Metrics and use A/B testing to systematically improve your conversion rates.

The visual indicator showing the mouse position on screen, which changes shape to indicate possible interactions. Custom cursors can reinforce branding and provide feedback about interactive elements. In Framer, the cursor becomes contextual tools for placing elements and manipulating the canvas during design.

A personalized web address like yourbrand.com instead of a platform-provided subdomain. Custom domains are essential for professional branding and improve trustworthiness with visitors. Framer supports custom domains with automatic SSL certificate provisioning and straightforward DNS configuration.

Interactive controls that let users narrow down displayed content based on selected criteria in real time. Dynamic filters improve content discovery for large CMS collections like products, articles, or portfolio items. Connect filters to Framer collections for powerful, no-code filtering experiences.

The rate of change in an animation over time, controlling acceleration and deceleration for natural-feeling motion. Linear easing feels mechanical while ease-out mimics physical objects slowing from friction. Framer provides preset easing curves and custom bezier options to fine-tune animation feel. See Mastering transitions and easing in Framer.

External content integrated into your page from another source, such as videos from YouTube, maps from Google, or widgets from third-party services. Embeds extend functionality without building features from scratch but can impact performance and introduce dependencies. Framer supports HTML embeds and iframe integration for external content.

Recording specific user interactions to measure engagement and understand behavior patterns beyond basic pageviews. Track meaningful events like button clicks, video plays, form starts, and scroll milestones. Framer Metrics includes event tracking for comprehensive behavior analysis.

The small icon displayed in browser tabs, bookmarks, and mobile home screens, typically 16x16 or 32x32 pixels. A distinctive favicon helps users identify your site among many open tabs and reinforces brand recognition. Upload favicons in Framer's site settings—consider how your icon reads at very small sizes.

The property that determines whether flexbox children are arranged in rows (horizontal) or columns (vertical). This setting affects wrapping, alignment, and spacing behavior within a flex container. In Framer layoutauto layout, direction maps to horizontal or vertical stacking.

A CSS layout system designed for one-dimensional layouts, distributing space among items in rows or columns. Flexbox excels at navigation bars, card rows, and any content that should grow or shrink responsively. Framer's auto layout is powered by flexbox concepts, making these layouts visual and intuitive.

A specific style and weight within a typeface family, like Inter Bold or Helvetica Light Italic. Choosing appropriate fonts affects readability, brand perception, and page performance. Framer provides access to Google Fonts and supports custom font uploads for complete typographic control.

Framer’s built-in product analytics, now referred to as Framer Analytics, for tracking traffic, user behavior, and conversions without third-party setup. It integrates directly with Framer sites and dashboards, reducing implementation overhead. Review current features in Framer docs as analytics capabilities continue to evolve.

A visualization of sequential conversion steps showing how many users progress through each stage toward a goal. Funnel analysis reveals where users drop off, highlighting optimization opportunities. Track funnels in Framer Metrics to measure and improve conversion paths.

The space between elements in a flex or grid layout, providing consistent gutters without margin manipulation. Gap is cleaner than margins because it only applies between items, not at container edges. In Framer's auto layout, gap controls the spacing between child elements uniformly.

Google's web analytics service tracking website traffic, user behavior, and conversion data. Google Analytics provides detailed insights but requires cookie consent in many jurisdictions. Framer's built-in analytics offer privacy-friendly tracking without external dependencies. See Tracking visitors with Framer’s built-in analytics.

A library of free, open-source web fonts hosted by Google with global CDN delivery for fast loading. Google Fonts simplifies typography with easy embedding and wide browser support. Framer integrates Google Fonts directly, making them available without additional configuration.

A free Google tool providing insights into how your site appears in search results, including impressions, clicks, and indexing issues. Search Console alerts you to problems and validates fixes, essential for SEO monitoring. Verify your Framer site in Search Console to track search performance.

A tag management system for deploying tracking codes and scripts without modifying site code directly. GTM centralizes third-party tool management and simplifies analytics implementations. Add GTM to Framer through the custom code section for flexible tracking management.

A layout system that divides space into rows and columns, creating alignment and structure for content placement. Grid systems ensure visual consistency and make responsive design more predictable. Framer supports CSS Grid concepts through layout tools that adapt columns and gaps across breakpoints.

HyperText Markup Language—the standard code that structures web content using tags that define headings, paragraphs, links, and other elements. While Framer generates HTML automatically, understanding its structure helps with SEO, accessibility, and debugging. Semantic HTML using proper tags like header, nav, and main improves accessibility and search rankings.

A visual element displaying photographs, graphics, or illustrations that communicates information or creates visual interest. Optimize images for web delivery with appropriate formats, compression, and sizing for fast loading. Framer automatically optimizes uploaded images for optimal performance.

Related AI terms: Generative Fill and Image Segmentation.

The process of reducing image file sizes while maintaining acceptable visual quality for faster page loads. Optimized images can be 10x smaller than originals without noticeable quality loss, dramatically improving performance. Framer automatically optimizes uploaded images, converting to efficient formats like WebP where supported.

A setting controlling whether search engines should index a specific page, useful for excluding drafts or duplicate content. Noindex pages remain accessible but won’t appear in search results. Control indexing in Framer’s page settings for SEO management.

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.

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.

A flexbox property that controls how items are distributed along the main axis, using values like center, space-between, and space-around. It affects horizontal spacing in rows and vertical spacing in columns. In Framer layoutauto layout, it helps control distribution and balance.

A point in an animation timeline that defines specific property values, with the software interpolating values between keyframes. Keyframe animation gives precise control over complex motion sequences. Understanding keyframes helps you create sophisticated animations in Framer's advanced motion tools.

An element in the design stack that can be positioned above or below other elements, controlling visual overlap. Layers enable complex compositions with overlapping elements and effects. Manage layer order in Framer's left sidebar or use z-index for precise control.

A technique that defers loading off-screen content until users scroll near it, improving initial page performance. It is especially useful for image-heavy pages and long content feeds. Framer automatically lazy-loads many assets, including below-the-fold images.

A geographic or language region with specific formatting preferences for dates, numbers, and currency. Supporting multiple locales enables international audiences to engage with localized content. Framer's localization features help manage content across different locales. See Adding a new locale.

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.

URL structures that include language or region codes for multilingual content, like /en/about or /de/about. Localized paths help search engines serve the right language version to users. Configure localized paths in Framer's localization settings for proper SEO.

A JSON-based animation format that renders Adobe After Effects animations on the web with small file sizes and infinite scalability. Lottie animations are lightweight, vector-based, and highly customizable through JavaScript. Import Lottie files into Framer for sophisticated animations without performance penalties.

The space outside an element’s border, creating separation from neighboring elements. Margin helps control rhythm and spacing between blocks of content. In Framer, use spacing controls and layoutauto layout gap for consistent, predictable layout behavior.

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 unique identifier for connecting analytics services to your website, like Google Analytics' G-XXXXX format. Measurement IDs enable tracking scripts to send data to the correct analytics account. Add measurement IDs in Framer's integrations section for third-party analytics. See Setting up Google Analytics.

CSS rules that apply different styles based on device characteristics like screen width, orientation, or resolution. Media queries enable responsive design by adapting layouts at defined breakpoints. Framer handles media queries automatically based on your breakpoint configurations.

An HTML meta tag providing a brief summary of page content, often displayed in search engine results below the title. Good meta descriptions are 150-160 characters, include relevant keywords, and entice clicks with compelling copy. Write unique descriptions for each page in Framer’s SEO settings.

HTML elements that provide metadata about a page to browsers and search engines, including titles, descriptions, and social sharing information. Proper meta tags improve SEO and control how pages appear when shared on social media. Framer provides fields for essential meta tags in page settings. See How to update page titles, descriptions, and social images.

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.

A measure of how quickly page content loads and becomes interactive, influenced by file sizes, server response, and code efficiency. Google uses page speed as a ranking factor, making optimization both a UX and SEO concern. Framer’s infrastructure and automatic optimizations help achieve fast page speeds.

The animation or effect that occurs when navigating between pages, providing visual continuity. Page transitions can make navigation feel seamless and help users maintain context. Framer supports various transition effects between pages.

A scrolling effect where background elements move slower than foreground elements, creating an illusion of depth. Parallax adds visual interest and engagement but can impact performance and cause motion sickness. Use parallax sparingly and provide reduced-motion alternatives for accessibility. See Creating parallax with Scroll Speed in Framer.

The CSS property determining how an element is placed in the document flow—static, relative, absolute, fixed, or sticky. Understanding positioning is essential for creating overlays, sticky elements, and complex layouts. Framer provides visual controls for common positioning patterns.

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.

An interactive simulation of a product used to test concepts, gather feedback, and demonstrate functionality before full development. Prototypes range from low-fidelity wireframes to high-fidelity interactive mockups. In Framer, prototypes become production sites—there's no separate prototype stage to recreate.

The process of making website changes live and accessible on the internet. Publishing deploys your work to production servers where visitors can access it. Framer's instant publishing makes changes live immediately when you click publish.

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 approach that makes websites adapt fluidly to different screen sizes and devices through flexible grids, images, and CSS. Responsive design ensures optimal experiences whether viewing on phones, tablets, or desktop monitors. Framer's breakpoint system enables precise control over layouts at each screen size.

Animation triggered by scrolling, from simple reveal effects to complex parallax and timeline-based sequences. Scroll animations engage users and create storytelling opportunities as they progress through content. Use Framer's scroll-triggered effects for appear animations and scroll-linked transitions.

Animations that play once when elements enter the viewport during scrolling, commonly used for section reveals. Scroll-triggered animations add polish and draw attention to content as it appears. Framer's appear effects provide scroll-triggered animation capabilities. See Triggering animations on scroll in Framer.

Using HTML elements according to their intended meaning rather than just visual appearance, improving accessibility and SEO. Semantic elements like header, nav, main, and article convey document structure to assistive technologies. Framer generates semantic HTML from visual designs automatically. See How to use semantic tags for navigation and footers.

Search Engine Optimization (SEO) is the practice of improving a site’s visibility in search results through technical quality, relevant content, and authority signals. Strong SEO combines crawlability, performance, metadata, internal linking, and useful content. Framer supports SEO with clean markup, metadata controls, and sitemap generation.

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.

Generating HTML on the server before sending to browsers, improving initial load performance and SEO. SSR provides complete content to search engines and faster first paint for users. Framer uses server-side rendering for optimal performance and SEO.

A group of user interactions with a website occurring within a time frame, typically resetting after 30 minutes of inactivity. Sessions provide context for analyzing user behavior patterns and conversion paths. Track session-based metrics to understand how users engage over visits.

A hierarchical list of all pages and content on a website used for search engine indexing and user navigation. XML sitemaps help search engines discover all your pages while HTML sitemaps help visitors find content. Framer automatically generates and updates your XML sitemap. See How to access your sitemap.

A URL-friendly version of a page or post title, typically lowercase with hyphens replacing spaces. Descriptive slugs improve SEO by including keywords and help users understand page content from the URL. In Framer’s CMS, slugs are generated automatically but can be customized for optimization.

Physics-based animation that simulates natural spring-like motion with properties like stiffness, damping, and mass. Spring animations feel more natural than linear or bezier-based easing. Framer Motion powers Framer's spring animation capabilities. See Mastering transitions and easing in Framer. See Using the Loop Effect in Framer.

A digital certificate enabling HTTPS encryption that protects data transmitted between browsers and servers. SSL certificates are now essential for security, user trust, and SEO rankings. Framer provides free SSL certificates automatically for all hosted sites. See Do I need to set up SSL for a custom domain?.

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

A saved set of visual properties—colors, typography, effects—that can be applied consistently across elements. Styles enable design system consistency and make global updates efficient. In Framer, text and color styles ensure brand coherence throughout your project.

Scalable Vector Graphics—an image format using mathematical paths instead of pixels, staying crisp at any size. SVGs are perfect for logos, icons, and illustrations that need to scale across different screen sizes and densities. Framer supports SVG import and handles them optimally for web delivery.

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.

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

A CSS unit equal to 1% of the browser viewport width, enabling fluid sizing relative to screen width. Vw units are useful for responsive typography and full-width elements. Combine with max-width constraints for practical maximum sizes. See Relative, fixed, and viewport Sizing in Framer.

A font loaded from the web rather than installed locally, ensuring consistent typography for all visitors. Web fonts expand typographic options beyond system fonts but add loading time. Framer provides Google Fonts integration and supports custom font uploads for brand fonts.

A modern image format providing superior compression for both lossy and lossless images with smaller file sizes than JPEG and PNG. WebP significantly reduces image download sizes while maintaining quality. Framer serves WebP images to supported browsers automatically. See How images are optimized in Framer.

The horizontal measurement of an element, definable as fixed pixels, percentages, or content-based sizing. Responsive designs often use percentage or max-width rather than fixed widths for flexibility. Framer's sizing controls support fixed, relative, and content-based width options.

A CSS property controlling stack order when elements overlap, with higher values appearing in front of lower values. Z-index management becomes complex with many overlapping elements—establish systematic layer naming. In Framer, layer order in the sidebar determines stacking with z-index overrides available.

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.

Software application used to access and display websites, including Chrome, Safari, Firefox, and Edge, each with slightly different rendering behaviors. Cross-browser compatibility ensures your site works correctly for all visitors regardless of their browser choice. Framer generates clean, standards-compliant code that renders consistently across modern browsers.

A prompt encouraging users to take a specific action, typically presented as a button or link with action-oriented text like 'Get Started' or 'Learn More.' Effective CTAs are visually prominent, clearly worded, and strategically placed throughout the user journey. Test different CTA copy, colors, and placements to optimize conversion rates using Framer's A/B testing.

A small file stored in a visitor's browser that remembers preferences, login status, or tracking information across sessions. Cookies enable personalization and analytics but require consent notices under GDPR and similar regulations. Framer's built-in analytics are cookie-free, avoiding consent banner requirements.

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.

Domain Name System—the internet’s phone book that translates human-readable domain names into numerical IP addresses computers use. DNS propagation can take 24-48 hours when pointing a domain to new hosting, though it often completes much faster. Proper DNS configuration is essential for connecting custom domains to your Framer site.

File Transfer Protocol—a standard method for transferring files between computers over a network. While FTP was historically used for website deployment, modern platforms like Framer handle publishing automatically. Understanding FTP concepts helps when working with legacy systems or specific hosting requirements.

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 service that stores website files and serves them to visitors over the internet. Reliable hosting affects site speed, uptime, and security—poor hosting can undermine great design. Framer includes premium hosting on a global CDN with automatic SSL, eliminating the need for separate hosting configuration.

HyperText Transfer Protocol Secure—encrypted web communication that protects data between browsers and servers. HTTPS is now essential for security, SEO rankings, and enabling modern browser features. Framer provides free SSL certificates for automatic HTTPS on all sites.

An HTML element that embeds another webpage within the current page, commonly used for videos, maps, and third-party widgets. Iframes isolate external content but can impact performance and present security considerations. Use iframes for trusted third-party embeds and consider lazy loading.

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.

JavaScript Object Notation—a lightweight data format for storing and transmitting structured data, widely used in web APIs. JSON's human-readable syntax makes it easy to work with for configurations and data exchange. Framer uses JSON for various configurations and API integrations.

The process of removing unnecessary characters from code—whitespace, comments, line breaks—to reduce file size. Minification speeds up loading without changing functionality, typically applied to CSS and JavaScript. Framer automatically minifies code for production deployment.

A registrar is the company that manages domain registration, renewals, and DNS control for your domain name. Choose a reliable registrar with clear pricing, DNS tooling, and strong support. Common options include Namecheap, Cloudflare Registrar, and Squarespace Domains. See Is Framer a domain registrar?.

An image that adapts to different screen sizes and resolutions, serving appropriately sized versions for each context. Responsive images improve performance by avoiding unnecessarily large downloads on small screens. Framer handles responsive images automatically, serving optimized versions.

An HTML tag telling mobile browsers how to scale and size the page for their screens. The viewport meta tag is essential for mobile-responsive designs to display correctly. Framer automatically includes proper viewport settings.

Services that store website files and serve them to visitors over the internet. Reliable hosting affects site speed, uptime, and security. Framer includes premium hosting automatically with all published sites.

A low-fidelity visual representation of a page layout focusing on structure and content hierarchy without detailed styling. Wireframes help validate concepts quickly before investing in visual design. In Framer, you can start with simple shapes and progressively add detail as designs evolve.

Related AI terms: First Draft and Prompt-to-Code.

eXtensible Markup Language—a format for storing and transporting structured data, used in sitemaps and RSS feeds. XML sitemaps help search engines discover all pages on your site. Framer generates XML sitemaps automatically.

A hyperlink that jumps to a specific section within the same page, identified by an ID attribute on the target element. These improve navigation on long pages by letting users skip directly to relevant content. In Framer, create anchor links by adding IDs to sections and linking to them with the # symbol followed by the ID name.

The proportional relationship between an element's width and height, expressed as a ratio like 16:9 or 4:3. Maintaining consistent aspect ratios prevents layout shifts when images load and ensures visual harmony across different screen sizes. Framer preserves aspect ratios automatically when you resize images proportionally by holding Shift while dragging. See Using images with unique aspect ratios in the CMS.

The maximum rate of data transfer across a network connection, measured in bits per second. Higher bandwidth allows faster loading of large assets like images and videos, directly impacting user experience. Optimize bandwidth usage by compressing images, lazy loading off-screen content, and leveraging Framer's automatic performance optimizations.

The process of reducing file sizes by removing redundant data, making assets faster to download and cheaper to serve. Image compression can reduce file sizes by 50-80% with minimal visual quality loss using formats like WebP. Framer automatically optimizes images for web delivery while preserving quality where it matters most.

A distributed network of servers that delivers web content from locations geographically closest to each visitor, reducing latency and improving load times. CDNs also provide redundancy and protection against traffic spikes or server failures. Framer hosts all sites on a global CDN automatically for optimal worldwide performance.

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 permanent URL for a specific piece of content, designed to remain unchanged over time for consistent linking. Clean, descriptive permalinks improve SEO and user understanding of page content. Framer generates permalinks automatically from CMS slugs and page paths.

High-resolution screens with twice or more the standard pixel density, displaying sharper text and images. Retina displays require higher resolution images—typically 2x the displayed size—to appear crisp. Framer automatically serves appropriate image sizes for different display densities.

Structured data added to HTML that helps search engines understand content context and display rich snippets. Schema markup can enhance search listings with ratings, prices, event dates, and more. Implement schema for content types where rich results provide value. See How to change the site name in Framer.

A web application that loads once and dynamically updates content without full page reloads. SPAs provide app-like experiences with smooth transitions and responsive interactions. Framer supports SPA-style navigation with page transitions.

The percentage of time a website is operational and accessible, a key measure of reliability. High uptime is essential for user trust and revenue-generating sites. Framer's infrastructure provides high uptime through redundant hosting.

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.

A composition guideline dividing frames into nine equal parts, placing key elements along lines or intersections for visual interest. The rule of thirds creates more dynamic compositions than centering everything. Apply loosely as a starting point rather than a strict rule.

Established usability principles used to evaluate interfaces, such as visibility of system status, error prevention, and user control. Heuristic evaluation helps identify usability problems efficiently without user testing. Apply Nielsen’s 10 heuristics or similar frameworks to audit your designs.

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.

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.

The positioning of elements relative to each other or a container to create visual order and clarity. Strong alignment improves scanability and perceived quality. In Framer, layoutauto layout and constraints help maintain consistent alignment across breakpoints.

A shared environment in Framer where teams organize projects, manage billing, and control member access. Workspaces make it easier to collaborate across multiple sites with centralized settings and permissions. See Organizations, Workspaces, and Folders.

A server setup that forwards incoming requests to another origin while keeping your public domain unchanged. Reverse proxies are used for migrations, custom routing, security policies, and integrating Framer with existing infrastructure. See How to self host using a reverse proxy.

A DNS record that points one hostname to another hostname instead of an IP address. CNAME records are commonly used to connect subdomains to hosted platforms like Framer.

A pre-production environment used to review and test changes before they go live. Staging helps teams validate content, layout, and behavior safely before publishing to the production site. See Publishing your Framer website.

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

A UI notice that informs visitors about cookie usage and, where required, collects consent preferences. Cookie banners help meet privacy and compliance requirements in regions with consent laws. See Add a fully functional Cookie Banner to your Framer site.

A plugin designed for workspace-level workflows such as governance, automation, or team operations across multiple projects. Workspace plugins extend Framer beyond single-file editing tasks.

Framer CMS is Framer’s built-in content system for creating collections, defining fields, and powering dynamic pages and components from structured content.

Model Context Protocol (MCP) is an open integration protocol that enables Framer Server API.AI agents to discover and use external tools, resources, and actions through MCP servers. If you want to learn more about how Framer integrates with MCP, check out the

First Draft is an AI workflow for quickly generating editable interface concepts. Teams use it to move quickly from idea to wireframe and then refine output with Prompt-to-Code.

An external agent is an AI tool outside Framer that connects to a project to inspect, update, or automate site work through an agent bridge.

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

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.

An agent skill is an installed capability or command that lets an AI agent perform project-specific actions, such as connecting to Framer or editing a site.

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

Auto-branching automatically separates agent or team changes into branches so the original project stays clean while work is reviewed.

In collaborative Framer workflows, auto-branching helps teams move faster without losing control of structure, content, performance, or editable design details.

A branch preview is a shareable version of work on a branch, used to review changes before merging or publishing them live.

In collaborative Framer workflows, branch preview helps teams move faster without losing control of structure, content, performance, or editable design details.

Merge to main is the action of bringing approved branch changes back into the primary project version before shipping them.

In collaborative Framer workflows, merge to main helps teams move faster without losing control of structure, content, performance, or editable design details.

Branch-aware cursors show collaborators in the correct branch context, so teams can review and edit without confusing separate versions of a project.

In collaborative Framer workflows, branch-aware cursors helps teams move faster without losing control of structure, content, performance, or editable design details.

AI site migration uses an agent to recreate pages, structure, styles, and CMS content from an existing site, export, or reference in Framer.

In AI-assisted website creation, ai site migration helps teams move faster without losing control of structure, content, performance, or editable design details.

An agent handoff is the transfer of context, files, or tasks from one AI agent to another so work can continue without losing project intent.

An agent handoff keeps a workflow moving when a task needs a different tool, model, or specialist. In Framer, this can mean passing site context from a design-focused agent to a coding or CMS-focused agent while preserving the user’s goals and constraints.

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.

Framer plugins help teams add new capabilities to the editor, automate repetitive work, and connect design workflows to external services without leaving the project.

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.

A bento grid in Framer helps present product features, media, and proof points in a structured but expressive layout, using cards that can span different rows or columns.

Framer blend modes can create richer visual treatments by letting text, shapes, images, and effects interact with the colors underneath them.

In Framer, background blur is useful for navigation bars, overlays, panels, and frosted UI where the page remains visible but visually softened behind the surface.

Framer overlays let designers build interactive layers that appear above or beside content, such as navigation drawers, tooltips, signup modals, and dropdown menus.

A masonry layout in Framer is useful for galleries, inspiration feeds, templates, and cards where uneven content should feel organic rather than forced into equal rows.

Framer filters can power dynamic collection lists, search experiences, and interactive browsing patterns by showing only content that matches the visitor’s chosen criteria.

Framer’s vector tools let designers craft visual assets in place, keeping illustrations, masks, and interface details editable alongside the rest of the site.

In Framer, radial gradients can highlight sections, create soft glows, add background atmosphere, or draw attention to important content without adding image assets.

Framer auto sizing keeps cards, buttons, sections, and text groups flexible, making responsive layouts easier to maintain as content changes.

Framer tickers can add motion to marquees, partner logos, feature labels, and repeated content while preserving a clean editable layout.

Framer designs can use wide-gamut color values for more vivid accents and gradients on supported displays, helping modern sites feel brighter and more refined.

In Framer workflows, exportable layers help teams move graphics, images, and design assets between site production, marketing, and documentation needs.

Framer comments keep feedback connected to the exact design context, helping teams review pages, resolve decisions, and collaborate without scattering notes across tools.

Framer text decoration helps designers style links, emphasis, and editorial details while keeping type treatments consistent across a site.

In Framer, balanced text can make headlines and supporting copy feel more intentional across screen sizes by reducing awkward single-word lines.

Framer selection colors let teams align the small details of browser interaction with the site’s visual system, reinforcing brand polish even in native behaviors.

In Framer, squircle corner styling can make cards, buttons, and panels feel more refined by blending geometric structure with a softer edge profile.

Framer layout templates help teams reuse global structure across pages, keeping navigation, footers, and shared layout behavior consistent while each page keeps its own content.

Framer link styles keep navigation, inline links, and active states consistent, so interactive text feels intentional across pages and CMS content.

In Framer, truncation is useful for cards, lists, and CMS-driven content where titles or descriptions may vary in length but the layout should remain aligned.

Framer custom cursors can add interaction feedback, brand personality, or contextual hints while visitors move through highly designed pages.

Framer masks help designers create image treatments, reveal effects, soft fades, and graphic compositions without flattening the work into static assets.

In Framer, SVG animations can add lightweight motion to icons, illustrations, logos, and interface details while keeping visuals crisp at any size.

In Framer, multiplayer cursors make collaboration feel immediate by showing teammates’ presence on the canvas, helping teams design together without losing context.

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

In Framer, review sharing helps teams gather comments, approvals, and direction on a live preview or project state before changes go public.

Framer custom domains let teams publish production websites on their own domain, keeping collaboration, hosting, and launch workflows in one place.

In Framer, team workspaces give groups a shared place to manage sites, collaborate on designs, and keep ownership clear across projects.

Framer ownership transfer helps teams hand off sites cleanly between collaborators, clients, or workspaces while preserving project structure and access.

In Framer, guest editors make it easier to bring clients, contractors, or teammates into a specific project while keeping broader workspace access controlled.

Framer rollback gives teams confidence to move quickly by making it possible to recover from unwanted edits, experiments, or publishing mistakes.

In Framer, invite links simplify collaboration by letting the right people join a project quickly while permissions and roles keep access manageable.

Framer asset libraries help teams keep visual materials organized and reusable, so collaborators can build pages with consistent media and brand resources.

In Framer, Expert access can help teams move faster by getting guidance on design, implementation, migration, or launch decisions from experienced Framer professionals.

In Framer, SSO supports larger teams by connecting authentication to company identity systems, simplifying onboarding, permissions, and account security.

In Framer, Mobile CMS makes content updates possible away from the desktop, helping teams review, edit, and maintain collection-driven pages while on the go.

In Framer, tables in CMS rich text are useful for structured information like comparisons, specs, schedules, and reference data without building a separate custom layout for every entry.

In Framer CMS workflows, Markdown can help teams prepare content quickly before converting it into rich text, pages, or structured collection entries.

In Framer, bulk CMS operations help teams manage large collections faster, especially when importing, cleaning, tagging, or updating repeated content across a site.

Framer CMS can support large content libraries, letting teams build directories, blogs, documentation, marketplaces, and other dynamic sites with substantial collection depth.

In Framer, code blocks help technical content stay readable by preserving indentation, syntax language, and visual contrast inside CMS-driven articles or reference pages.

In Framer CMS content, blockquotes help editors highlight excerpts, testimonials, callouts, or cited material while keeping the content semantically structured.

In Framer projects, Google Sheets sync can support teams that plan, maintain, or collaborate on structured content in spreadsheets before displaying it through CMS-powered pages.

In Framer, Airtable sync can help teams maintain external content databases while presenting the resulting records through designed CMS collection lists and detail pages.

In Framer, CMS Galleries make it easier to publish collections of images, portfolios, case studies, or visual entries while keeping layout design separate from content updates.

In Framer, CMS agents can speed up structured content work by helping generate entries, refine fields, maintain collection data, and connect content to dynamic pages.

In Framer, static generation helps performance by serving ready-made pages wherever possible, reducing runtime work and making published sites feel faster.

Framer uses global delivery infrastructure to help pages, images, scripts, and assets reach visitors quickly across regions, improving perceived speed and reliability.

In Framer, edge caching improves performance by reducing distance and server work for published pages and assets, helping sites respond quickly around the world.

In Framer, instant navigation helps multi-page sites feel faster by reducing delay between clicks and page changes, especially when paired with preloading and optimized routes.

In Framer, route prefetching helps visitors move between pages with less waiting by preparing linked destinations before they are clicked.

In Framer, code splitting supports faster initial loads by avoiding unnecessary JavaScript on first view and loading additional code only when it becomes relevant.

In Framer, responsive images help pages load faster and look sharp by serving suitable image sizes instead of forcing every visitor to download oversized assets.

In Framer hosting, compression helps improve performance by shrinking files like scripts, styles, and markup before they travel over the network.

In Framer, font subsetting can improve page speed by minimizing font downloads while preserving the typography needed for the published site.

In Framer, resource culling supports leaner pages by keeping unnecessary media, scripts, and interface resources out of the critical loading path.

In Framer, optimized SVGs help maintain crisp visuals while reducing unnecessary markup, file size, and rendering cost on published pages.

In Framer, SEO-ready sites combine editable metadata, clean page structure, fast loading, responsive layouts, and publishing tools that help pages perform well in search.