FORD / IN-VEHICLE DESIGN SYSTEM
Rebuilding Ford’s in-vehicle design system, from Sketch to Figma Variables.
Components for Ford, Lincoln and Bronco had drifted apart over the years. With Headway, I helped Ford’s design system team rebuild the Driver Info and Controller systems in Figma on one shared foundation, using Figma Variables while they were still in beta. Ford presented the result at Config 2023.
Project details
In short
Three drifting brands, rebuilt on one themed system.
- brands on one shared foundation: Ford, Lincoln and Bronco
- 3Brands
- in-vehicle systems rebuilt: Driver Info and Controller
- 2Systems
- early access to Figma Variables, before their public launch
- BetaEarly access
- views of the Config 2023 talk on Figma’s channel
- 31K+Config 2023
The problem
In-vehicle components lived in Sketch and had drifted apart across three brands.
What I did
Moved two in-vehicle systems to Figma on one foundation, set the naming and docs rules, and built primitive and semantic variables with a theme per brand.
The result
One system that themes to each brand, presented by Ford’s team at Config 2023.
One foundation
Years of drift, one foundation.
Each brand’s in-vehicle components had been solved slightly differently, so every team kept rebuilding the same things. The fix was one foundation file that every surface draws from, with a theme for each brand.
Rules first
Rules before components.
We started from Ford’s four design principles, then agreed the anatomy and naming of every component, so three brands would build the same way.
Clarity
Always consider the user.
Sensory
Realism infuses design with meaning.
Warmth
Human connection is critical.
Clean and bright
Serenity shouldn’t be a luxury.
Size, tint and brand are set on the wrapper. The icon inside never changes and never gets detached, which is what keeps hundreds of icons consistent across three brands.
Base, then variants
Build the base, then the variants.
Every component started from a base template: checked off a list, responsive, with all its properties. Then the wireframe file added the variants, motion and interactive prototypes.
Variables in beta
Variables, while they were still in beta.
Because Ford’s team was presenting at Config 2023, we got early access to Figma Variables. We set up primitive and semantic collections, then a theme for each brand.
On Figma’s stage
On Figma’s stage.
Ford’s team presented the work at Config 2023 in “Creating multi-channel, multi-theme connected libraries in Figma”. It has since passed 31,000 views on Figma’s channel.
What people said
What people said.
The best part was the teaching. We left Ford’s team with a system and the habits to keep it healthy.
It has been great working with Taran on the Ford Design System project. Taran has been incredibly helpful and has taught me a few things I hadn’t known before regarding Figma and components.
“Can’t believe we’ve made this much progress in such a short amount of time.”
“Can’t ask for a better team than you. Learning from you all a lot.”
“You’ve taken this design system to the next level.”
Looking back
Looking back from 2026.
Governance first
Setting up variables is easy now. Deciding who can add a token, and how a change reaches every brand, is the hard part. I’d agree that first.
Tokens straight to code
We kept design and code in step by hand. Today I’d sync variables to the codebase automatically.