Framer · Indexed content

JustinSep 15, 20264:24Generate responsive breakpoints with the AgentLearn how to make your site in Framer responsive with the Agent or the manual breakpoint controls. Start with a flexible desktop layout, then add tablet and phone overrides using Stacks, relative positioning, and Fill and Fit sizing. The Agent can generate a first pass, while you review every breakpoint and refine the layout on the canvas.Lesson detailsTo generate a responsive layout, choose Generate from the breakpoint controls, run the breakpoint skill in the Agent panel, or describe how the desktop page should adapt across tablet and mobile. Review the generated breakpoints and make any manual changes needed to preserve the hierarchy, content, and design direction.For a manual workflow, make the primary desktop breakpoint flexible first, then add tablet and phone. Changes to the primary breakpoint flow down, while changes made directly on tablet or phone become overrides for that breakpoint. A flexible main layout usually handles the widths between those three breakpoints without requiring a custom breakpoint for every screen size.Use Stacks and relative positioning so layers respond to their parent and siblings…

JosephSep 15, 20263:45Give one Component multiple states with the AgentLearn how to create Components and instances in Framer so repeated buttons, cards, and navigation elements share one maintainable design. Edit the source Component to update its instances across the project, while Variants and variables let each instance support different states, styles, and content.Lesson detailsFramer Components give repeated interface elements one shared definition. Place instances across the project, then edit the Component to update them together. The Agent can turn an existing layer into a Component and replace visually matching elements with instances across the site.To create one by hand, select the layer, choose Create Component, and give it a clear name. Framer opens the Component on its own canvas and adds it to Assets. Drag new instances from Assets, insert them with Quick Actions, or use Replace With to swap an existing layer.Instances stay connected to the source Component, which keeps structure and styling consistent. Add Variants for distinct layouts or states, then expose selected properties as variables when each instance needs different labels, icons, colors, or links.Frequent…

JosephSep 15, 20264:32How to use Component Variants in FramerLearn how to use Component Variants in Framer to keep alternate layouts, visual styles, and interactive states inside one reusable Component. Variants inherit their shared structure from the primary Variant, while overrides, hover states, press states, and instance controls handle the differences you choose.Lesson detailsComponent Variants let one Component support different appearances without splitting the design into separate Components. Every Variant inherits its layer structure and shared properties from the primary Variant. Change a property on another Variant to create an override, then reset that override whenever you want it to inherit again.New Variants inherit from the primary Variant, even when you duplicate another Variant to create them. Hover and press states work a little differently: they branch from a specific Variant and include an interaction that Framer animates in Preview.Each instance gets a control in the Style panel for switching Variants. You can combine that control with Component variables, so the same text and images move between layouts without losing their instance-level overrides.Frequently…

JosephSep 15, 20263:53Positioning modes in FramerLearn how Framer positioning modes work and choose the right relationship for each layer. Relative layers flow with siblings, absolute layers attach to a parent Frame, fixed layers stay anchored to the browser window, and sticky layers remain in view only while their parent section is scrolling.Lesson detailsResponsive layouts in Framer use relative positioning for most page content. A Stack or grid controls how relative children flow with their siblings, including direction, gaps, padding, and alignment. Relative layers can also fill the available width or height while respecting the space used by nearby layers.Absolute positioning removes a layer from that flow and measures it against the parent Frame. Pin it to the top, right, bottom, or left when the edge relationship matters. This mode works well for badges, decorative artwork, and other elements that need to overlap content.Fixed and sticky layers measure against the viewport. A fixed layer stays in the same browser position while the page scrolls. A sticky layer moves with the page until it reaches its set edge, stays there within its parent section, then leaves when the paren…

JosephSep 15, 20265:15How to use Component variables in FramerLearn how to use Component variables in Framer to expose the properties each instance should control, including labels, icons, colors, links, and visibility. Variables reduce the need for large sets of Variants while the Component keeps its shared structure, layout, and styling consistent across the project.Lesson detailsComponent variables turn selected properties inside a Component into editable controls on each instance. Use them for values that change often, such as text, links, colors, images, or whether an icon appears. The Component still controls the shared structure and layout.Create a variable from a supported property, give the control a clear name, and bind one or more layers to it. A single color variable can control the text and icon together, while a Boolean variable can show or hide optional content.Keep Variants for meaningful style or layout changes, then use variables for the content and smaller property choices inside each Variant. The Agent can consolidate a crowded Component, replace repeated cards with instances, and preserve the content of each card as variable overrides.Frequently asked questions…

JustinSep 15, 20263:45Build your Framer CMS with the AgentLearn how to use the Framer CMS to organize repeatable content in collections, define the fields each item needs, and connect that content to pages and collection lists. You can update an item once while Framer keeps every connected layout in sync, without rebuilding pages by hand.Lesson detailsThe Framer CMS separates your content from the page design. A collection groups related content such as articles, projects, or team members. Each item is one record, and fields define the text, images, dates, links, and other values every record can contain.Start by creating a collection and choosing fields that match the content you plan to manage. Add items from the CMS, import structured data when needed, and keep field names clear so editors know what belongs in each entry.Connect collection fields to a CMS detail page to reuse one layout for every item. Use a collection list when you want to show several items in an index, grid, or featured section. Add or update content in the collection and Framer reflects it wherever those fields appear.Frequently asked questions What types of content can I manage with the Framer CMS?Use the F…

JosephSep 15, 20264:16Create and prompt animations in FramerLearn how Framer animations work across layer effects, text effects, scroll effects, and Component Variants. Use simple effects for individual elements, scroll-driven motion for page depth, and Variants for custom interactions. the Agent can help apply or repeat each approach while you review the result on the canvas.Lesson detailsFramer animations range from quick layer effects to custom interactions built with Component Variants. Use appear, hover, press, drag, loop, or scroll effects when one layer needs motion with little setup. Text effects can animate copy by character, word, line, or element.Scroll effects can reveal layers as they enter the viewport, change scale or position as visitors move down the page, or switch a Component at a chosen scroll point. Clip scaled images inside Frames when you want the motion to stay within the original image bounds.For larger interactions, create Variants that represent each state and connect them with click, mouse enter, or mouse leave triggers. Framer animates matching properties between states, while the Agent can build the Variants and repeat the same behavior across a page.F…

JustinSep 15, 20263:29Create one reusable page for every CMS itemLearn how to create a CMS detail page in Framer that uses one reusable layout for every item in a collection. Connect text, images, links, and visibility to CMS fields, preview different items from the canvas, and add previous and next navigation with help from a the Agent.Lesson detailsTo create a CMS detail page in Framer CMS, open Pages, choose New CMS Page, select a collection, then choose Detail Page. You can also ask a the Agent to create a page that matches the existing design. Each collection item uses this single layout while its fields supply the content.CMS variables connect each layer or property to the current item. Bind text, images, and link controls to their matching fields. Switching items from the dropdown at the top of the canvas lets you preview the content while the layout stays the same, and a layout edit applies across the collection.Use conditions when an element should appear only for items that contain a value, such as hiding a button when its URL is empty. Add previous and next links to help visitors move through the collection, then make final layout adjustments on the canvas.Frequently ask…

JosephSep 15, 20263:27Build flexible layouts with Frames and StacksFrames vs Stacks in Framer comes down to positioning and flow. A plain Frame contains layers that can be positioned freely, which suits overlaps and fixed decorations. A Stack is a Frame with Stack layout applied, so its children follow a responsive row or column. Choosing the right structure keeps layouts stable as content and screen sizes change.Lesson detailsA Frame is the basic container in Framer. It can hold text, images, icons, and other Frames. In a plain Frame without Stack layout, child layers use absolute positioning by default. You can place them freely, which works well for a badge over an image or another element that needs to stay in a precise spot. It is less suitable when neighboring content should move as text grows.A Stack is still a Frame, but Stack layout changes its children to relative positioning and puts them in a shared row or column. The Stack controls gap, padding, alignment, and distribution. Longer text pushes the next item forward, newly added items receive their own space, children can use Fill sizing, and the parent can Fit its content. This makes buttons, cards, and sections respond…

JustinSep 15, 20264:26Understand how people use your site with Analytics and the AgentLearn how to use Framer Analytics to understand visitors, page views, bounce rate, session duration, traffic sources, devices, and top pages after your site goes live. You can filter the dashboard yourself or ask a the Agent to summarize trends, investigate a page, and export the data.Lesson detailsTo use Framer Analytics, publish your site and open Analytics from the top-left menu or with Option-4. The dashboard starts collecting privacy-friendly site data without extra setup and shows visitors, page views, bounce rate, average session duration, and an interactive chart for the selected period.Use the date picker and dashboard sections to inspect traffic sources, popular pages, countries, and devices. Select a page or another dimension to add filters, then combine filters to answer a narrower question. You can also open a page’s analytics from the Pages panel.Ask a the Agent for a 30-day overview when you want a faster reading of the data. Follow up on changes or underperforming pages, and export the results as CSV when needed. Funnels, A/B tests, and tracking IDs extend the workflow to specific …

JustinSep 15, 20263:05Design responsive layouts that work on every screenResponsive design in Framer means defining how one layout adapts as its available space changes, instead of drawing separate static screens for every device. Set clear relationships so elements can flex, wrap, stack, or stay fixed. The Agent can generate these responsive behaviors, while you review and refine the result across breakpoints and real devices.Lesson detailsStart by treating the page as one adaptable system. On a wide screen, cards may sit side by side. As the viewport narrows, they can wrap into another row and eventually stack into one column, while the navigation simplifies into a menu button. These behaviors let the same content respond to phones, tablets, laptops, and the widths between them.The visual hierarchy should remain clear as the layout changes. Visitors still need to understand what matters most, what comes next, and which actions they can take. The Agent can generate a responsive layout from the relationships already present in your design, but you remain the designer. Review when sections stack, when navigation changes, and whether any part of the hierarchy needs to be restructured…

JustinSep 15, 20264:45Keep your growing site consistently with the AgentLearn how to scale your site in Framer with the Agent by turning repeated typography, colors, and interface patterns into reusable styles and Components. The Agent can also identify unused assets, audit structural issues, and review SEO. You see the proposed changes on the canvas and decide what to adjust or remove before the project changes.Lesson detailsStart by asking the Agent to review the typography and colors already used across your site in Framer, create reusable text and Color Styles, and apply them to the matching layers. This turns consistent design choices into a system you can maintain from one place without rebuilding the existing design.Next, select repeated elements such as buttons and ask the Agent to convert them into Components, replace matching elements with instances, and create useful Variants and hover states. The Agent follows the Component patterns already in the project, while you can inspect the result and adjust the structure, styling, or instance content on the canvas.Use the Agent to review unused assets, structural issues, maintenance problems, and SEO as the project grows. Ask f…

JustinSep 15, 20263:58Help your visitors browse your CMS contentLearn how to create a CMS index page in Framer so visitors can browse multiple items from one collection. Build a repeating collection list, connect its layers to image, title, date, and summary fields, then refine the layout yourself or ask a the Agent to match the site.Lesson detailsTo create a CMS index page in Framer CMS, open Pages, choose New CMS Page, select a collection, then choose Index Page. You can also ask a the Agent to build a starting layout that uses the existing site design and the content hierarchy you describe.The page uses a collection list to repeat the same item layout for each record. Layers inside the list can connect to CMS variables for images, titles, dates, summaries, or links, so Framer displays each item’s values while keeping the design consistent.Add a layer to the first repeated item when a new field needs to appear, then bind its property to the corresponding variable. The layout change repeats across the list. Once the index works, connect its previews to a collection detail page so visitors can open each item in full.Frequently asked questions What is a CMS index page in Framer?A CM…

JosephSep 15, 20265:03Learn the Framer interfaceLearn the Framer interface by mapping the five main views, the toolbar, sidebars, and canvas to the work you will do in your site. This beginner lesson shows where to design pages, manage CMS content, localize, review analytics, use the Agent, preview changes, and prepare a site for publishing.Lesson detailsStart by mapping the editor’s five views: Canvas, CMS, localization, Analytics, and Settings. Canvas is where you create pages, arrange layers, work with Components, and build the visual experience. CMS holds structured content such as articles, careers, and events. Localization handles languages and regions, Analytics shows how visitors use the published site, and Settings covers domains, redirects, versions, and plans.Return to the Canvas to learn the working layout. The toolbar inserts layers and assets, names the project, shows the active branch, and provides preview and publish controls. The left sidebar switches between Pages, Layers, and Assets. The right sidebar changes with your selection, while the Agent lets you create pages, make targeted edits, clean up styles, and adapt a site for different devices. Use a branch to re…

JosephSep 15, 20265:38Review Agent changes safely with BranchingBranching in Framer lets you explore and review changes without editing the version that is ready to publish. Create a branch from Main, work manually or with the Agent, preview it at its own URL, then merge approved changes back into the project. Publishing remains a separate step, so you decide when visitors see them.Lesson detailsA branch is a virtual copy of its parent. A branch created from Main inherits updates to pages, Components, canvas content, CMS items, collections, and styles while keeping its own changes layered on top. You can create and rename branches from the branch menu, keep each experiment focused, or protect Main by turning on automatic branching. The Agent also creates a branch automatically when you run a prompt from Main.The Changes panel shows what was edited and who created the branch. You can switch to a teammate's branch to review it without editing, then deliberately join when you are ready to contribute. For a larger project, create child branches to isolate smaller experiments. Merge a successful child branch into its parent, then merge the parent into Main when the complete change is ap…

JosephSep 15, 20267:07Build layouts that resize correctly in FramerFramer sizing modes control how a layer measures its width and height. Use Fixed for a set pixel size, Relative for a percentage of the parent, Fill for available space in a Stack or grid, Fit Content for the size of child layers, and Viewport for browser-height layouts. Combine different modes across dimensions to build responsive layouts.Lesson detailsChoose a sizing mode by deciding what should control each dimension. Fixed keeps a pixel value regardless of its parent, children, or siblings, which works well for icons, avatars, and logos. Relative uses a percentage of the parent and can exceed 100%, making it useful for flexible background elements that extend beyond their container.Fill takes a share of the space left by siblings inside a Stack or grid. Fractional units such as 1fr and 2fr control those shares and recalculate as available space changes. Fit Content works in the opposite direction by wrapping a parent around its relative-positioned children, including any padding.Width and height can use different modes. A section often fills its parent horizontally while fitting its content vertically. Viewport …

!function(){var c=new Map;function p(e,t,n){let r=[n,{numeric:t,style:e}],o=JSON.stringify(r),s=c.get(o);if(s)return s;let i=new Intl.RelativeTimeFormat(...r);return c.set(o,i),i}function D(e,t,n,a,r,o,s){let i=U(e,t,n),d=F(e,t,i),u=p(a,r,s).format(d,i);return o?R(u):u}function R(e){return e.charAt(0).toUpperCase()+e.slice(1)}function U(e,t,n){if(n!=="auto")return n;let a=T(e,t);if(Math.abs(a)<=7)return"day";let r=g(e,t);if(Math.abs(r)<=4)return"week";let o=v(e,t);return Math.abs(o)<=12?"month":"year"}var h=1e3,y=6e4,C=36e5,M=864e5,w=6048e5;function F(e,t,n){let a=e.getTime()-t.getTime();switch(n){case"second":return Math.trunc(a/h);case"minute":return Math.trunc(a/y);case"hour":return Math.trunc(a/C);case"day":return T(e,t);case"week":return g(e,t);case"month":return v(e,t);case"quarter":return _(e,t);case"year":return x(e,t)}let r=n}function l(e){let t=new Date(e);return t.setUTCHours(0,0,0,0),t}function T(e,t){let n=l(e).getTime(),a=l(t).getTime();return Math.round((n-a)/M)}function f(e){let t=new Date(e),n=t.getUTCDay(),a=(n<1?7:0)+n-1;return t.setUTCDate(t.getUTCDate()-a),t.setUTCHours(0,0,0,0),t}function g(e,t){let n=f(e).getTime(),a=f(t).getTime();return Math.round((n-a)/w)}…

:root body { background: var(--token-958e2cd1-b113-4aa3-9235-7a2b959c8feb, rgb(0, 0, 0)); }FramerPlatformSolutionsResourcesEnterprisePricingLog inSign up(()=>{(()=>{let e=document.currentScript.previousElementSibling;function t(){globalThis.__f_auth=0,e.style.display=`flex`}function n(){globalThis.__f_auth=1,e.style.display=`none`,Us();let t=document.createElement(`script`);t.type=`speculationrules`,t.textContent=`{"prerender":[{"source":"list","urls":["https://framer.com/projects/"]}]}`,document.head.append(t)}try{localStorage.__auth?n():t()}catch{t()}Gs(n,t)})();async function Gs(e,t){let n;try{n=await(globalThis.__framerLoginFetch??fetch(`https://api.framer.com/site/users/me`,{credentials:`include`}).then(e=>{if(e.ok)return e.json()}))}catch{return t()}if(!n?.name){try{localStorage.__auth=`0`}catch{}return t()}try{localStorage.__auth=`1`}catch{}e()};function Us(){function e(e){let t=document.activeElement?.nodeName;t===`TEXTAREA`||t===`INPUT`||e.key.toUpperCase()===`D`&&(globalThis.location.href=`https://framer.com/projects/`,e.stopPropagation())}globalThis.addEventListener(`keydown`,e)}})()Copy logo SVGBrand guidelinesFramerLog inSign up(()=>{(()=>{let e=document.currentScript.…

Tech and SaaS websites have to make complex products feel understandable in a few seconds. The strongest examples explain the product, show it in action, and make the next step obvious without flattening the brand into a generic startup template.Tech and SaaS websites have to make complex products feel understandable in a few seconds. The strongest examples explain the product, show it in action, and make the next step obvious without flattening the brand into a generic startup template.What these tech and SaaS websites get rightExplain the product in plain language before introducing features.Show the product in context with interfaces, workflows, or real outcomes.Match the visual system to the product's audience and category.Give visitors one clear next step at every stage of the page.Use proof, detail, and motion to build confidence without adding noise.12 best tech and SaaS website examples1. SandCastlesSandCastles makes an AI video workflow feel tangible from the first screen. Its dark, high-contrast layout puts the promise—creating viral short-form videos—next to a real product view, so visitors understand both the outcome and the tool behind it before they scroll.2. UGC Hour…

:root body { background: var(--token-958e2cd1-b113-4aa3-9235-7a2b959c8feb, rgb(0, 0, 0)); }FramerPlatformSolutionsResourcesEnterprisePricingLog inSign up(()=>{(()=>{let e=document.currentScript.previousElementSibling;function t(){globalThis.__f_auth=0,e.style.display=`flex`}function n(){globalThis.__f_auth=1,e.style.display=`none`,cu();let t=document.createElement(`script`);t.type=`speculationrules`,t.textContent=`{"prerender":[{"source":"list","urls":["https://framer.com/projects/"]}]}`,document.head.append(t)}try{localStorage.__auth?n():t()}catch{t()}uu(n,t)})();async function uu(e,t){let n;try{n=await(globalThis.__framerLoginFetch??fetch(`https://api.framer.com/site/users/me`,{credentials:`include`}).then(e=>{if(e.ok)return e.json()}))}catch{return t()}if(!n?.name){try{localStorage.__auth=`0`}catch{}return t()}try{localStorage.__auth=`1`}catch{}e()};function cu(){function e(e){let t=document.activeElement?.nodeName;t===`TEXTAREA`||t===`INPUT`||e.key.toUpperCase()===`D`&&(globalThis.location.href=`https://framer.com/projects/`,e.stopPropagation())}globalThis.addEventListener(`keydown`,e)}})()Copy logo SVGBrand guidelinesFramerLog inSign up(()=>{(()=>{let e=document.currentScript.…

We built the AEO Scanner and Stack Score with Framer Agents. Each gives visitors a useful result and our team better context for follow-up. You can use the same setup for other lead generation tools.Start with the experience on the canvas. Then use Framer Agents or an External Agent to connect the logic.1. Choose the result your tool returnsStart with the result. Write down what it should show, then work backward to the fewest inputs you need. Remove questions that do not change the result or help your team follow up.Scanner: inspect a submitted website and return an audit.Calculator: turn a few values into an estimate or forecast.Assessment: combine answers into a score and recommendation.Product finder: narrow a catalogue to the most suitable option.Use the same process for a scanner, calculator, assessment, or product finder. The AEO Scanner shows a server-backed flow that collects a URL before processing. Stack Score shows a multi-step assessment that calculates a scored recommendation from the visitor’s answers.2. Map the complete visitor journeyDecide which parts can share one page and which need their own route. A calculator may fit on one page. A scanner or assessment often…

:root body { background: var(--token-958e2cd1-b113-4aa3-9235-7a2b959c8feb, rgb(0, 0, 0)); }FramerPlatformSolutionsResourcesEnterprisePricingLog inSign up(()=>{(()=>{let e=document.currentScript.previousElementSibling;function t(){globalThis.__f_auth=0,e.style.display=`flex`}function n(){globalThis.__f_auth=1,e.style.display=`none`,cu();let t=document.createElement(`script`);t.type=`speculationrules`,t.textContent=`{"prerender":[{"source":"list","urls":["https://framer.com/projects/"]}]}`,document.head.append(t)}try{localStorage.__auth?n():t()}catch{t()}uu(n,t)})();async function uu(e,t){let n;try{n=await(globalThis.__framerLoginFetch??fetch(`https://api.framer.com/site/users/me`,{credentials:`include`}).then(e=>{if(e.ok)return e.json()}))}catch{return t()}if(!n?.name){try{localStorage.__auth=`0`}catch{}return t()}try{localStorage.__auth=`1`}catch{}e()};function cu(){function e(e){let t=document.activeElement?.nodeName;t===`TEXTAREA`||t===`INPUT`||e.key.toUpperCase()===`D`&&(globalThis.location.href=`https://framer.com/projects/`,e.stopPropagation())}globalThis.addEventListener(`keydown`,e)}})()Copy logo SVGBrand guidelinesFramerLog inSign up(()=>{(()=>{let e=document.currentScript.…

Changelogv5.0.0BreakingSep 8, 2026Plugins 5.0 adds full CMS list field support, represented in the Plugin API as Array Fields. This enables you to create and edit arrays with full flexibility and nested item management. To support this, there are some breaking type changes for Managed Collections.Breaking ChangesManaged collection array items and nested fields now require stable id values. Reuse them across syncs to preserve localized values.Array field definitions now expose ArrayItemField[]. Update code that assumes the first array field is an image field.Field data is now exposed as frozen, readonly properties rather than getters. Spreading or serializing field objects now includes those values.CMS ArraysCreate array fields with boolean, color, date, file, formatted text, image, link, number, and string fields. Arrays can nest these field types.Update or remove nested array fields through setAttributes() and remove().Writing array values replaces the full array. Pass an empty array to clear it.ChangesImage field inputs now accept an optional resolution setting.Branch site settings changes now include domains, performance, forms, and skills categories.v4.1.0Aug 4, 2026This releas…

Changelog (Beta)v5.0.0BreakingSep 8, 2026Plugins 5.0 adds full CMS list field support, represented in the Plugin API as Array Fields. This enables you to create and edit arrays with full flexibility and nested item management. To support this, there are some breaking type changes for Managed Collections.Breaking ChangesManaged collection array items and nested fields now require stable id values. Reuse them across syncs to preserve localized values.Array field definitions now expose ArrayItemField[]. Update code that assumes the first array field is an image field.Field data is now exposed as frozen, readonly properties rather than getters. Spreading or serializing field objects now includes those values.CMS ArraysCreate array fields with boolean, color, date, file, formatted text, image, link, number, and string fields. Arrays can nest these field types.Update or remove nested array fields through setAttributes() and remove().Writing array values replaces the full array. Pass an empty array to clear it.ChangesImage field inputs now accept an optional resolution setting.Branch site settings changes now include domains, performance, forms, and skills categories.v4.1.0Aug 4, 2026This…

Danny Sapio built a Framer membership business by solving an access problem in his own product. His library, Framer Overrides, needed a way to restrict content to customers. That led to FrameAuth, formerly FramerAuth, a third-party plugin for sign-in, member accounts, and gated content on Framer sites.After a decade in design, including work at startups and an agency, Danny now spends his time making products for other Framer creators. In our conversation with him in New York City, he explained how those products grew out of the things he wanted to build himself.His path started with a digital download, moved into a library of code overrides, and then opened up a larger problem: how to give customers access to content on a Framer website.A digital product and the first $800 in salesDanny discovered Framer in 2018 and began experimenting with it. One of his early product ideas was “the internet in your pocket,” a collection of useful knowledge that someone could keep on a USB stick.He built a Framer landing page to sell it as a digital download. Within about a month, he says, it had brought in $800 in sales.The experience made an impression because he could turn an idea into a websi…