I’m currently structuring a design system in Figma and need to design screens for three different sizes (desktop, tablet, and mobile). To streamline this, I’m setting up variable modes for each screen size.
I have separate libraries: one called Foundations and another called Core.
-
In Foundations: I’ve created variables for screen sizes and other recurring dimensions, like internal content areas.
-
In Core: I’m building a 'Content Card' component with specific variables for its width at each breakpoint.
The issue is that when I apply a variable mode, I have to select the desired mode twice—once for each collection (Foundations and Content Card).
I’m looking for a more efficient way to handle this. My goal is to reduce manual work and repetition. Since I need to create all versions for every part of the project—including navigable prototypes—I want to minimize clicks and keep the component volume as low as possible.