Figma Breakpoints

Preview

Figma Breakpoints

Figma Variables: Breakpoints

Breakpoints are variables that enable responsive design across Frames X UI kits. They allow components and layouts to adapt for optimal display on desktop, tablet, and mobile devices.

By using Frames X UI Kit Breakpoints variables, you can create UI layouts and components that automatically resize and adapt to Desktop, Tablet, or Mobile screen resolutions, making your work as a designer easier.

Breakpoints are Figma number variables in the Frames X collection — Desktop, Tablet and Mobile modes — that components and layouts read so they resize to each screen width automatically.

Breakpoints AI Prompt

Paste this into Claude, ChatGPT, or Figma Make:

Set up responsive breakpoints in Figma using variables. Create a Breakpoints variable collection with three modes — Desktop, Tablet and Mobile — and number variables for container width (1200, 768, 375), column count (12, 8, 4), gutter (24, 20, 16) and page margin (80, 40, 20). Add spacing variables that scale per mode — section gap 120, 80, 56 and card padding 32, 24, 16 — and a type-scale set where heading sizes drop from 56 to 40 to 32px across modes. Bind frame widths, auto-layout padding and gaps on a sample page to these variables so switching the frame's mode reflows the layout without manual edits. Build one demo page — header, hero, three-column feature row and footer — three times with the same components, each frame set to a different mode, to prove the variables carry the responsiveness. Name every variable with a breakpoint prefix so designers find them in the variable picker.

To learn how to use breakpoint variables effectively, visit our Intro Guide to Figma Variables.

Source