Responsive variable magic
Case Study
How I transformed a desktop layout into a 4-breakpoint, responsive system using Figma variables
In the Product Design department at SVB, bustling with creativity, my team and I faced a daunting challenge: redesigning a hub screen for users managing multiple applications, with one hitch...make it responsive. It sounds simple, right? Yet, our initial design introduced unnecessary friction, resulting in user dissatisfaction. Our research also revealed that fewer than 1% of users were accessing their account applications from anything but desktop, but that 1% matters. If 10 users out of 1000 were using a mobile device, it was mission-critical that we enable users who prefer mobile.
Stumbling blocks
We began the project with the misguided belief that merging our website’s engaging look and feel with that of our digital product’s stark minimalism would create a seamless transitional experience for users. Our initial Hub screen designs (depicted in the middle below) attempted to straddle these differences, resulting in confusion and visual disarray. For smaller screen sizes, cards didn’t adjust properly, and horizontal scrolling created a frustrating experience. The footers looked nothing alike. The colors palettes were different. The hero component in the Hub screen put the image before the text, unlike the hero on the website.
Website design
Hub screen (straddling the website and application design)
Website design
The aha moment
Amidst this chaos, my team had a collective epiphany. It became clear that our original assumptions were not only flawed but were actively impeding user experience. Rather than forcing an ill-fitting design onto our users, we needed to embrace a mobile-first mindset and rethink the entire hub screen's design from scratch.
Solution: variables
I resolved to turn this project from a design disaster into a cohesive, user-friendly experience that worked seamlessly across all devices. The solution? Harness the power of Figma’s variables for responsive design.
Step 1: analyze and adapt
The first step involved dissecting every component of our existing design. I analyzed the elements of the website to create matching components for the hub screen, taking care to ensure that the design transformed responsively to fit the users’ needs across 4 screen sizes. This meant discarding the transitional design we’d initially implemented and instead embracing the look-and-feel of the website that users already trusted.
Take a look at how the website elements (the heading, hero, types of cards, and footer) are styled (color, spacing, wrapping, alignment, buttons, icons, the three sections of the footer) and how they respond to varying screen sizes.
Mobile
Tablet
Desktop
Large
Breakpoints
After testing the breakpoints on the website, I created corresponding number variables for my new responsive system.
The components
To be able to switch layouts for each breakpoint, we needed to create components with a variant for each breakpoint. Each component uses autolayout to ensure proper display of padding and alignment within each breakpoint.
Header
Because the header for the hub doesn’t have as much content in it, we could use the same design for the large, desktop and tablet screen sizes and set the width to fill. The mobile header always centers the logo and provides a place for an icon on the left and right side of the screen.
Hero
By inspecting the website hero component’s CSS in the browser, I constructed a hub hero component with variants that match the website design pixel for pixel for each breakpoint; mobile, tablet, desktop, and large.
Cards
In order to provide visual consistency between the hub and the website, we analyzed the 3 card components on the website and chose one to use as a template for our new card for the hub. We called our new hub card the Task Card.
Website card analysis
The Blog Card had
icon
card type label
title
description
button
Task Card Requirements
icon - match
card type label - match
title - match
button - match
Hub Task Card result
New Task Card
icon
card type label
title
button
Step 2: Variable Power
Utilizing Figma variables, gave me the power to manipulate the typography and layouts of 4 different breakpoints, simultaneously, ensuring a single source of truth. By creating a design system that automatically adjusted to breakpoints, I transformed our hub design – making it flexible and adaptable.
Final result
Hover over any of the videos below to see how each part of the page responds when the browser window is stretched horizontally. Notice how the cards stay at a fixed width, or stretch, depending on the breakpoint.
Notice how each breakpoint section dictates the number of card columns.
Each Hub frame can be stretched to see how the parts of the page should react when stretched between breakpoints.
This effort ensured that Product Management, Design, and Engineering teams had a common source of truth for all aspects of design for all breakpoints and anything in between.
How I got there
If you’re still here and interested in how I got to the “final result”, read on.
Typography
button
large
title/3xlarge
title/xlarge
single line/body base
single line/xsmall
single line/body bold
single line/small
I created variables for font family, size, weight, and line-height…
…and applied them to the family, size, weight, and line-height properties of each of the 8 font styles.
For the hub, there were 8 font styles.
Setting up the parts
Since I wanted to design in one main frame (Hub - Responsive Design) and drag it into a breakpoint section to test how it responded, I needed to assign certain variables to certain parts of the design.
I assigned the screenWidth variable to the width property of the main frame (Hub - Responsive Design). The screenWidth would change based on the device variable applied to each section.
2. I assigned the device variable to each variable of each page part component; header, hero, task card, and footer.
3. I assigned the device variable to each of 4 breakpoint sections.
393-767
768-1023
1024-1239
1240-infinity
This image shows the 393-767 section selected and Icon, Layout, and Typography properties set to mobile.
Icon variables
The icon size variable allowed me to adjust the icon size for the card link type to match the text size when the design is viewed on mobile, tablet, desktop, and large screens.
An example of a card link type icon is the little folder icon shown in this card.
Step 3: Testing and Iteration
The rest of the layout variables
Then began the trial and error testing of how the different screen widths affect how the cards stretch left to right and wrap from one, two, and three columns across the screen.
The tileWidth and tileHeight variables control the min-width and height of each card at each breakpoint.
The gutter controls how far the cards are between one another.
The columns, vertPadding, minColWidth, and maxColWidth variables control when the cards shifted from one, two, or three columns and at what minimum width to set the space between the edge of the main content area and the edges of the browser window (margins), at each breakpoint.
Step 4: Implementation
I approached the developers with a newfound optimism. Armed with clearly defined breakpoints and detailed component specifications, they could effortlessly translate my design into a functioning product. It wasn’t just about creating a design; I provided a framework for continuous improvement, allowing for swift adjustments in response to new requirements.
Consistency Through Variables
The transformation was remarkable. What started as a chaotic pile of mixed designs evolved into a polished, user-friendly hub screen that aligned with the brand’s overall aesthetic and function. The result? Teammates praised the new design for its cohesion, usability, and — perhaps most importantly — a consistent experience across all devices.
To sum it up, improving the legacy design led to some valuable lessons in my professional growth about the value of adaptability, testing assumptions, and harnessing the right tools to create an exceptional user experience.