How to Create Responsive Components in Figma

Introduction

Responsive design and atomic design principles have been around for well over a decade. Ethan Marcotte first coined the term responsive design in 2010, advocating for layouts that adapt fluidly to screen size. Brad Frost introduced atomic design in 2013, outlining his methodology for building interfaces using a system of reusable components. These concepts have shaped how we design today.

Every modern digital product is expected to work seamlessly across multiple breakpoints. Designing for this complexity under tight deadlines can be challenging. That’s why having an efficient workflow—one that enables speed while ensuring consistency and long-term maintainability—is essential.

That’s where a design system makes all the difference. In Figma, Flex Design System gives you a structured, design token–powered approach to building responsive components and layouts.

This guide focuses on designing responsive components for e-commerce—specifically a product card and a header navigation. It explores when to use a single responsive variant versus breakpoint-specific variants, and how to leverage tokens with Auto Layout to automate instance swapping and component scaling.

How Design Tokens Simplify Responsive Layouts

Instead of setting fixed pixel values for elements and manually updating them for each breakpoint, design tokens allow you to define reusable values that automatically adjust when you change contexts (modes in Figma). Update a token once, and it updates everywhere it’s used.

Design tokens in Flex Design System

Flex Design System includes a wide range of useful design tokens. For our examples, we’ll focus on the following:

• Spacing (e.g. spacing-s) – Used to set consistent component padding and margins, keeping layouts balanced across all breakpoints.
• Content widths (e.g. content-width) – Sets the maximum (or minimum) width of components, helping maintain alignment and readability on any screen size.
• Device sizing (e.g. small) – Specifies a responsive device width that adjusts automatically for mobile, tablet, or desktop.
• Component variants (e.g. small) – Lets you swap between different component variants depending on the selected breakpoint.

Single Responsive Component: Product Card

Some components—like product cards—have a consistent structure that scales naturally across devices. In these cases, you can create a single responsive component in Figma and utilise Auto Layout in conjunction with design tokens to handle breakpoint variations.

How to make our card component responsive

Once you have your card elements in place (image, typography etc), you can apply tokens to control responsive spacing and typography:

1. Apply Design Tokens for Spacing and Typography
   • spacing-m for content padding.
   • heading-m and body-m for headings and body copy.
2. Set Auto Layout and Constraints
   • If you want your cards to automatically scale then apply Auto Layout and set their width to fill
   • If you wish to control the min or max width a card can scale to, then apply these constraints in the width option using content-width tokens
   • Finally apply grid spacing tokens to the parent frame to control the gutters and margins between the child card components e.g. grid-top-margin and grid-side-margin

Breakpoint-Specific Components: Navigation & Filtering

But what if your design needs specific components to optimise usability at different breakpoints? Mobile and desktop often differ—for example, horizontal menus on desktop versus hamburger menus on mobile.

Breakpoint-specific components allow you to tailor layouts for each screen size while preserving functionality. By creating component sets and pairing them with string variables, you can automate swaps based on the mode you select.

How to Create Component Variants in Figma (with Variables and Modes)

Instead of creating three separate navigation components for mobile, tablet, and desktop, you can build one component set with variants and use variables + modes to switch automatically.

1. Create the Base Components

• Design your shop navbar at three breakpoints:
  • Mobile (compact menu)
  • Tablet (medium layout)
  • Desktop (full menu with categories/search etc.)
• Select each one and turn it into a Component (⌘ ⌥ K / Ctrl Alt K).

2. Combine as Variants

• Select all three navbars.
• Right-click → Combine as Variants.
• You now have a component set with three variants.

3. Define Variant Properties

• In the right-hand sidebar, rename the property to Breakpoint.
• Give each variant a value such as:
  • small = Mobile
  • medium = Tablet
  • large = Desktop

Now your component set knows which navbar belongs to which screen size.

4. Create a Variable Collection

• Open the Variables panel in the Assets tab.
• Create a new collection, e.g. Breakpoints.
• Add a string variable called Variant.
• Give it three values: small, medium, large.

5. Add Modes for Responsive Contexts

• Inside the same variable collection, create Modes.
• Example:
  • Mode 1: Small (mobile)
  • Mode 2: Medium (tablet)
  • Mode 3: Large (desktop)

Modes let you quickly switch all your designs between breakpoints.

6. Bind the Component to Variables

• Select your navbar component set.
• In the Variants panel, find the property Breakpoint.
• Click the link icon and bind it to the Breakpoint variable.

Now, whichever value the variable holds (small, medium, or large) will determine which navbar variant is displayed.

7. Switch Automatically Using Modes

• Drag an instance of the navbar into your canvas.
• In the Variables panel, toggle between Small, Medium, and Large modes.
• The navbar automatically switches between the small, medium, and large variants.

Bringing It All Together — A Responsive Product Category Page

When you combine these approaches, you can quickly build a responsive e-commerce product category page.

• Product Card (Single Responsive Component): A scalable card adapts seamlessly across breakpoints using Auto Layout, constraints, and design tokens.
• Navigation & Filters (Breakpoint-Specific Variants): Navigation and filtering adapt based on device size, optimising real estate and function.
• Responsive Grid Layout: With grid-width tokens controlling viewport width and Auto Layout managing reflow, cards stack neatly on mobile and spread across columns on desktop.

Final Thoughts

Combining design tokens, Auto Layout, and variants, results in a faster, more reliable responsive workflow:

• Speed — Global changes propagate instantly.
• Consistency — Every component adheres to the same rules.
• Scalability — Add breakpoints without starting over.
• Accuracy — Breakpoint-specific variants adapt automatically.
• Simplicity — Fewer master components covering all sizes.

Links

• Preview Flex Design System in Figma
• Purchase Flex Design System