Building responsive components in Figma using ‘Double-Glazing’

Visual diagram of how the ‘double-glazed’ effect is achieved for a Component.

Modern web solutions use responsive layouts that adapt to different devices, and it can be hard to design for it if you haven’t coded them yourself. If you setup your Design System Components in Figma correctly, you can make designing for responsiveness easier to understand and quicker to do. I’m going to show you how to design responsive Figma Components using the ‘double-glazing’…