Facebook Design System
Role
Design engineer
Time
2 years
Scope
3+ billion MAU
Surface
Facebook Mobile App
Frameworks
Bloks, React Native, iOS, Android
Specialization
Design systems, tokens, motion
Overview
Facebook is used by more than 3 billion people every month and runs across hundreds of surfaces. From 2024 to 2026 I worked as a design engineer on Facebook Foundations, building and shipping the design system components, tokens, and tooling that product teams build with across Bloks, React Native, iOS, and Android. My work focused on quality and accessibility at that scale, and on using automation and Gen AI to keep the system consistent as it changed.
40+
components connected to Figma Code Connect
20+
components with accessibility improvements
26
reduction in Bloks legacy motion inconsistencies
10+
theme experiments run on the system
.png)
As a Design Engineer on Facebook Foundations, I owned core UI infrastructure and shipped Facebook Design System (FDS) components across web, Bloks, React Native, iOS, and Android. That includes high-traffic UI like the post reaction bar, where people respond with emoji-style reactions alongside comments, and a compact contained toggle button for icon-only actions. I also added and resolved accessibility improvements across 20+ FDS components and connected 40+ components to Figma Code Connect. Leveraging Figma Code Connect was a brand new initiative for the Facebook design team, not a routine rollout, so a large part of the work was troubleshooting, identifying gaps in what Figma had built into the system so far, and sharing those findings with Figma to get the initiative off the ground. Once connected, those components kept design files and production code in sync.
Public documentation ↗For tokens and theming, I built internal tools that made token coverage gaps easy to spot across themes. One let designers test themes and token values on real prototyped components and explore token hierarchy within themes, from base to semantic to category to component tokens, through interactive hierarchy charts. Another applied test themes to the live Facebook app to surface token coverage gaps across surfaces for color, corner radius, shadow, and more in light and dark mode. I also built the theme experiment management system behind 10+ theme experiments.
Base tokens
Mapped to raw values
→
Semantic tokens
Meaning and intent
→
Category tokens
Composite groupings
→
Component tokens
Per component values
The token hierarchy the theming tools were built to explore, from raw values up to shipped components.
A tool for testing themes against FDS components to find token coverage gaps. Interactive charts showed the token hierarchy behind each theme, from base tokens through semantic and category tokens up to component tokens.
I ran large-scale experiments across the Facebook app. One iconography experiment updated icon sizes and shifted variants from filled to outlined across Bloks, React Native, iOS, and Android, as part of a broader simplification initiative. It was tested on surfaces including settings screens, the top of the home feed, and the post composer where people write posts.
I also ran a theme experiment on the on-media color system, the colors used for components placed over photos and videos such as search pivots, through which I tested the impact of changing this color from Gray10Alpha60 to Gray20Alpha67 to be more visible on top of dark backgrounds. As a result of this change, search pivots were more visible and engaged search behavior increased by about 6%.
On the motion side of my systems work, I built an AI agent that updated animation across Facebook’s mobile components. The agent analyzed the mobile codebase, identified legacy motion implementations, generated production-ready code changes, and produced before/after animations to speed adoption of the unified motion system, reducing Bloks legacy motion inconsistencies by 26%. I was also part of the strategy to revamp and overhaul the animation system, helping shape the new tokenized motion system that replaced the outdated structure. As part of that revamp, I added a category token layer between semantic and component tokens to hold composite animation recipes modeled after real-world interactions, bundling values like duration and easing into presets that components can consume directly.
Expand/collapse
Move in/out
Fade in/out
Scale in/out
I designed and built Design Assist, an internal Gen AI tool in Figma that streamlined the design workflow and gave designers standards guidance as they worked. I worked with the design team in Figma on the design strategy for the tool, then built much of its frontend. A designer could ask which component to use or whether a design followed the system, and Design Assist would answer in chat with the right components ready to drag into their Figma file. It drew on the system's sticker sheets, the Figma pages that lay out components in example screens, and gave the work a quality score before handoff, so adherence was easy to see instead of something to guess at. In my first month on the team, I implemented five new features and four improvements to existing features, including a code refactor, agent mode, and deprecation of the default mode.
Closing the gap between design and code
The through line in my systems work is closing the gap between design and code. When components, tokens, and motion are defined in ways both engineers and AI tools can act on, the system can keep up with the teams building on it.
