Responsive design in Figma starts with setting up frames for your target breakpoints. Create separate frames for desktop (typically 1440px or 1920px), tablet (768px or 834px), and mobile (375px for iPhone or 360px for Android). Name them clearly and organize them on the same canvas so you can see how layouts adapt side-by-side. Auto Layout is your primary tool for responsiveness. Apply it to containers, navigation bars, card grids, and any element that needs to grow or shrink. Set padding and spacing values in Auto Layout properties, then choose whether containers should hug contents or fill available space. When you nest Auto Layouts correctly, your design adapts when you resize the parent frame, mimicking how CSS flexbox behaves in code. Constraints control how individual elements anchor within their parent frames. Pin a logo to top-left, set a CTA button to right-align, or make a hero image stretch full-width. Without proper constraints, elements float randomly when you change frame dimensions, breaking your layout. Go to the Constraints panel and test left/right/center/scale options until elements behave as intended. Components and variants let you show different states across breakpoints. Create a navigation component with desktop and mobile variants—desktop shows full menu items, mobile shows a hamburger icon. Swap variants depending on the frame size. This keeps your design system consistent and speeds up iteration. Use Figma's layout grids to align content. Set a 12-column grid for desktop, 8-column for tablet, 4-column for mobile. Adjust gutter and margin values to match your front-end framework or design system. Layout grids don't enforce responsiveness, but they guide placement so developers can translate your design into clean code. At Ottawa SEO, we prototype in Figma with Auto Layout first, then hand off to developers with clear breakpoint annotations. We test designs by resizing frames manually and confirming nothing breaks between 320px and 1920px. The tighter your Figma setup mirrors real CSS behavior, the fewer revisions you'll need after launch.