I led the design system creation for the Horizon Worlds UI Refresh, working closely with product designers to distill the new art direction for the 2D panels displayed across all worlds in Meta Horizon Worlds. My responsibilities spanned the full lifecycle of the system — from establishing the token schema and building the Figma library to creating specs and handing them off to engineering to ensure accurate implementation.

• Led the creation of the Horizon Worlds design system in Figma, including token schema, components, templates, and specs
• Collaborated with product designers to translate the UI refresh art direction into a systematic design language
• Authored and delivered design specs to engineering counterparts to ensure pixel-accurate implementation
• Co-hosted weekly design critiques with a product designer to support feature teams across Horizon Worlds
• Created and hosted educational sessions to onboard product designers on the design system and track implementation progress across design and development

Meta Horizon Worlds was undergoing a UI refresh — a new visual direction for the 2D panels that surface throughout every world in the experience. These panels are the connective tissue of the UI across Horizon Worlds, which meant the refresh needed to be systematized in a way that was consistent, scalable, and adoptable by the full range of product teams building within the platform.

I was brought in to lead the design system work — building the Horizon Worlds UI Refresh Figma library from the ground up and creating the infrastructure designers and engineers would use to build and ship the refreshed UI.

The work started with establishing the token schema — the foundational layer of the system that would carry color, typography, spacing, and other design decisions through to every component and template. Getting the token architecture right early was critical, as it determined how well the system could adapt across the different surfaces and contexts the 2D panels appeared in.

From there, the work expanded into components and templates — each built to reflect the refreshed art direction and structured so that product designers could build with them confidently. Specs accompanied every component and template, giving engineering a clear and unambiguous reference for implementation.

Throughout the process I worked closely with product designers to make sure what was being systematized accurately reflected the design intent for the refresh. The weekly critiques I co-hosted with another product designer created a consistent touchpoint for feature teams to raise questions, surface edge cases, and stay aligned with the direction of the system as it evolved.

Product designers across Horizon Worlds features used the Figma library as their foundation for building and shipping UI within the refreshed design language. The token schema, components, and templates gave every team a shared starting point, reducing the inconsistency that comes when designers are individually interpreting an art direction rather than building from a common system.

The educational sessions I hosted gave designers the context they needed to navigate the system effectively — understanding how the token schema worked, how to locate and use components, and how to track the progress of the refresh as it moved from design into production. The weekly critiques provided ongoing support so teams weren't left to figure things out on their own as the system matured.

The Horizon Worlds UI Refresh design system gave the broader product organization a single, maintained source of truth for building and implementing the refreshed 2D panel UI across the platform. By systematizing the art direction into a token schema, component library, and spec set, the work reduced the surface area for design drift and gave engineering a reliable handoff foundation — two things that matter significantly when a UI refresh needs to roll out consistently across every world in the experience.

Leading the design system work on Horizon Worlds reinforced how much of a design system's value comes from the work that surrounds the library itself — the critiques, the education, the specs, the ongoing communication with engineering. The Figma library is what people see, but the infrastructure around it is what determines whether it actually gets used well. Building both in parallel, rather than treating education and critique as secondary to the system work, was the approach that made the library usable from the start rather than something teams had to learn to work around.

Screenshots and GIFs showcasing components, specs, and templates from my work on Meta Horizon Worlds.