I’m a web designer and lately Auto Layout and constraints in Figma get me most of the way, but I still end up shuttling between Chrome DevTools’ device mode and Polypane to sanity-check components across 320–1440px. Anyone found a smoother setup for responsive work — something that previews fluid type scales and container queries without leaving the design file?
across 320–1440px. Anyone found a smoother setup for responsive work — something that previews fluid I keep it in Figma by setting variables with modes for 320/768/1024/1440 and driving type via clamp() values from https://utopia.fyi, then a single component with a ‘container size’ variant that swaps nested parts so scrubbing the parent frame width shows the right state. Not true container queries, but for component sanity checks it’s close.
Short answer from my side: I’m seeing the same pattern — one concrete thing that helped was writing down the exact handoff and timebox it to 15–20 min. Does that match what you’re running into?
I use https://utopia.fyi for clamp() scales, then mirror min/max as Figma variables; variants simulate ‘container queries’ decently. Edge cases struggle.
Quick tip: the Anima plugin for Figma lets you define breakpoints and live-preview a single frame as you drag its width, so your clamp-based type and layout respond without leaving the file (https://www.animaapp.com). Small caveat: nested components with mixed constraints sometimes jitter, so I keep a “flat” preview instance for testing.