How a small team of UX designers pioneered a variable-index system to deliver three core automotive apps across four different screen sizes — systematically, efficiently, and at scale.
The team needed to ship three core HMI applications — a media player, a navigation system, and a voice assistant — across multiple car models, each with a different screen size and aspect ratio. With four distinct screen configurations to support, the traditional approach of designing each layout individually would have been time-consuming, inconsistent, and nearly impossible to maintain.
Without a systematic approach, designers and engineers would face constant rework. Each new car model would mean a full redesign cycle. The cost in time and quality risk was significant.
When we started, Figma had not yet released its Variables feature. We couldn't wait for tooling to catch up — the product timeline demanded a solution now. So we pioneered our own: a variable index system that defined UI widgets abstractly, decoupled from any specific screen size.
"Instead of designing for a screen, we designed for a rule. The screen was just an output."
Each widget — a media card, a map tile, a voice prompt panel — was defined by a set of indexed variables: its proportional size, spacing ratios, typographic scale, and layout priority. These indices could then be resolved against any target screen configuration to produce the correct rendered output automatically.
When Figma launched its native Variables feature, we migrated the system directly into Figma — validating our approach and making it even more accessible for the broader design and engineering team to work with.
Catalogued all UI components across the three apps. Identified shared patterns, divergent needs, and layout-critical elements that would behave differently across screen sizes.
Established a naming and indexing convention for every widget property — size, padding, type scale, grid columns. Each index mapped to a value per screen tier rather than a fixed pixel value.
Designed all components using the index system. Widgets were built once and resolved to the correct values per screen context. Designers could work in any screen size without rebuilding components.
Collaborated closely with engineers to translate the index system into implementable specs. The structured system made handoff dramatically faster and reduced back-and-forth on edge cases.
When Figma launched its native Variables feature, we mapped our existing index system into Figma Variables directly — giving the team a visual, interactive way to preview all screen-size variants inside Figma.
The system was successfully implemented across all target vehicle models. What previously would have required separate design and engineering efforts for each screen configuration was now handled systematically — designers specified intent once, and the system resolved it everywhere.
Beyond the immediate project, the system established a new way of thinking about responsive HMI design within the team — treating screen size as a variable to be resolved, not a canvas to be designed for from scratch.
The approach was later further accelerated when Figma's own Variables feature launched, allowing us to validate and extend the system natively within our design tool of choice.
This project reinforced that strong design systems thinking isn't just about UI consistency — it's about reducing the surface area for error and rework across an entire product pipeline. The constraint of building without the right tooling forced us to think in first principles, which ultimately produced a more robust solution than if we'd simply reached for an existing tool.
Leading this work also taught me that pioneering a new approach requires as much communication as it does craft — bringing engineers, PMs, and fellow designers along on the logic was just as important as the system itself.