figma · braza shows you
how to make a design responsive in figma
braza points at the fill/hug and constraint settings in order so your layout reflows instead of breaking.
responsive in figma means your design reflows cleanly when the frame changes size, instead of elements overlapping or floating off. it's two tools working together - auto layout's fill/hug and constraints - applied in the right order. here's the combination.
or do it yourself
- 1wrap your section in auto layout (shift + a) so it manages spacing automatically.
- 2select the element that should stretch (like a card or input) and set its horizontal resizing to 'fill container'.
- 3set fixed-size items (icons, avatars) to 'hug' or a fixed width so they don't distort.
- 4for layers not in auto layout, open 'constraints' in the right panel and pin them (e.g. 'left & right' to stretch, 'center' to stay centered).
- 5grab the frame's edge and drag - watch it reflow; tweak any element that still breaks.
let braza do this with you
braza is a tiny on-screen guide that points at the right buttons and talks you through it, on windows and mac.
downloadcommon questions
what's the difference between constraints and auto layout for responsive design?
auto layout reflows spacing inside a frame; constraints control how individual layers pin or scale when the frame resizes - responsive design uses both.
why does my layout break when i resize the frame?
elements are set to 'fixed' or pinned to one corner; switch them to 'fill' or 'left & right' constraints so they stretch with the frame.