Design Tool & System
Background
Building a design system for thousands of product designers, content designers, and software engineers at a large company is no easy feat. To distribute enterprise-grade design systems and enable high-fidelity design for the web, the design tool team at Meta built an internal design tool that allowed designing with real React components, customer data, and content metadata such as a content ID for translation.
Role
Product Design
Design Education
Team
3 PDs
8 ENGs
1 PM
1 DPM
Time
Jun 2018—
Mar 2020
Audience
Content Designers
Software Engineers
People Problem
Designing in high-fidelity does not guarantee that the end product will also be built in high-fidelity. There is an entropy that happens between design and engineering, because the 'language' designers and engineers speak are often different.
Fidelity
What if designers and engineers could design and develop with the highest fidelity resources? © Sean Blanton, Design Lead.
Distribution
What if design systems were directly distributed in the design tool as React components?
Collaboration
What if a design tool brings all functions to collaborate in one place instead of being a highly specialized tool?
Designing in React
Allowed designers to use real React components to compose web interfaces instead of design tokens. © Sean Blanton, Design Lead.
Designing for Mobile
Allowed designers to design with universal mobile components that are adaptive to all platforms and sizes.
Designing Content
Allowed content designers to design with greater authorship through high-fidelity content composers.
Previewing Prototypes
Designed and shipped intuitive prototype preview experience for designers and engineers.
Content Tools
Designed and shipped various content tools such as metadata editor, content status, variations and real-time collaboration.
Mobile Projects
Designed and shipped the project creation/management experience for mobile prototypes.
Mobile Preview
Designed and shipped the preview experience for mobile prototypes on web and mobile devices.
Design Camps
Created and taught in-person and virtual courses on designing with React, prototyping with React, and designing content with React.
Design Workshops
Led design workshops to promote healthy collaboration among product designers, content designers, and software engineers by leveraging tooling.
Design Workshops
Led design workshops to promote healthy collaboration among product designers, content designers, and software engineers by leveraging tooling.
