Justin
4:24
Generate responsive breakpoints with the Agent
Learn 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 details
To 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 instead of fixed canvas coordinates. Set sections and columns to Fill when they should use available space, and use Fit for buttons, badges, and text that should follow their content. When a responsive layout breaks, check fixed sizing, positioning, and Stack structure first.
Frequently asked questions
What are the two ways to make your site in Framer responsive?
You can let the Agent generate breakpoints or build them yourself. Use Generate from the breakpoint controls, run the breakpoint skill from the Agent panel, or write a custom prompt. Manual work gives you direct control over the same layout settings.
How many page breakpoints should I use in Framer?
Start with a flexible primary desktop breakpoint, then add tablet and phone. Those three cover most sites when the layout uses fluid sizing. Add a custom breakpoint only when the content begins to break at a width the main three do not cover.
How do breakpoint overrides work in Framer?
Changes on the primary desktop breakpoint flow down to smaller breakpoints. A change made on tablet or phone becomes an override for that breakpoint. This lets you share most of the design while adjusting only the properties that need a smaller-screen treatment.
Why are Stacks useful for responsive layouts?
Stacks make children flow in a vertical or horizontal direction and respond to changes in content or width. They use relative positioning by default, so layers keep their relationship to their parent and siblings instead of relying on fixed canvas coordinates.
What is the difference between Fill and Fit sizing?
Use Fill when a layer should take the available space in its parent, such as a section or column. Use Fit when a layer should hug its content, such as a button or badge. Fixed sizes often cause responsive layouts to break.
Continue watching
Load more