GEODESIC: META'S BUSINESS DESIGN SYSTEM
Team
Meta
Scope
Component Creation Program Management
Platforms
Web and Moble Native
Date
Present
User Goals
When I view Geodesic documentation, I want to be able to click through and view Figma components that reflect coded components 1:1, so I can ensure design is up-to-date.
When I view our internal Figma plugin, I want to be able to access all the most up-to-date components in Geodesic, so I use the plugin as an entry point as intended.
When I browse our internal “Facebook” group for the team, I want to understand what the design team is working on in support of the component libraries, so I can follow along with the latest Geodesic library releases.
When I are utilizing Geo component libraries, I want our components to pass our internal design plugin’s check for contrast and styling, so I can save time and trust Geo components are WCAG AA compliant.
Feedback from our System Usability Scale survey, run every 6 months
Provide enough documentation to enable design system usage to be more self-serve. Cut down the number of support requests for component library questions.
Simplify layering on previously code-generated components in Figma and ensure the Figma props and variants worked properly.
By providing linking between docs site into Figma, we wanted to make the experience seamless to get into the Figma component.
As of end of 2023, we've Increased favorability score of component library, +28% on ease-of-use for Figma components
Quantitative Data and usage patterns
Usage and adoption is an ongoing learning metric for the team, and while we track both metrics for React component usage, Figma usage is a great barometer to infer usage across design and code. We wanted to ensure that we are able to support our top 5 components, all of which include 100k instances each, but aim to bring detachments down, and refactoring these components to ensure they are kept intact.
For our top-10 used components, we have a detachment rate of under 1%.
Support channels for product designers to gain support
We have an internal “Facebook group” where we answer support requests, but we wanted to provide an additional layer of support. We developed a Figma-specific Office Hours where my design partner and I do live-design and jump into the file with product designers. This was a method of support that had worked particularly well at Disney Streaming that I elected to try again.
Program Management
Simple Google Sheet tracker that we got off the ground earlier, that we would track component and documentation status. This worked really well with dead simple formulas that got us into the habit of tracking work on our own.
For 2023, we formalized our work and built tracking in Asana to allow for more granular task tracking, and reporting for leadership.
Document our playbook on how we audit components in React, align on naming if needed, build components, write baseline documentation. This would later lead in 2024 to an education program centered around building custom components using our system.
Regular comms of releases. Bi-weekly posts during the refactor of our Figma libraries to ensure designers were kept up-to-speed with what we were releasing.
Outcomes of 2022-2023
We currently maintain a set of 69 core web components with the number spiking to 147 include sub components. Our goal was to maintain 1:1 parity with our coded React components, including representing any code example that is available in our docs site.
Ensure amongst the 147 total components, all 6743 variants work and are responsive (can stretch) as needed.
Maintaining docs site on a bi-weekly basis. Every time we update a component, we ensure the documentation is up-to-date.
We acted on survey feedback from our product designs on simplifying our components further, and cutting down on the number of variants. Since our system if comprised primarily of subcomponents, we built simpler, more configurable components utilizing new functionality in Figma component props and nested instances.
Outcomes of 2023-2024
Used the web component library we built in 2023 as a jumping off point for a new brand theme. Leveraged new Figma functionality launched mid year to simplify most component variant sets by 50%.
Leaned into creating more flexible organism-based designs by mirror the granularity of our React library and using more small molecular components, and the concept of slot components.
Lead team on standardizing our theme tokens across legacy and new brand theme and partnered with front end engineering to build a bridge from our design token processor, into syncing with Figma.
Whole accessibility audit of our data visualization components, and developing method to modify our data viz semantic tokens to ensure all background colors met 3:1 contrast ratio using LCH color space to ensure perpetually even colors.