AT&T BusinessEnterprise Design systemShipped

300+ components, from XD to Figma. AT&T Business’s design system, rebuilt for a team new to Figma.

AT&T Business’s design system lived in Adobe XD, with no responsive behavior and no guidance on using it. I rebuilt it in Figma as three libraries, with a guide for the designers building with it.

Role
Product Designer
With
Product manager, engineering, stakeholders
Company
AT&T Business, via CGI
Year
2023
Scope
Design system migration
What happened
Published across three libraries: 300+ styles and components.
The typography page The color page The accessibility page The buttons page The file status page

300+styles & components

3libraries

37documented pages

Architecture

One foundation, two platforms.

Wireline and marketing pages were built on one platform, and wireless on another. So the system became a shared foundation with a component library for each.

8Global StylesTypeColorGridSpacingIconsButtonsAccessibility
16AEM · wireline & marketingMarqueesTeasersComparison tablesAccordionsTabsLegal
13Azure · wirelessInputsModalsDevice listCartCheckoutPlans
Pages per library
Foundations

Every value comes with a rule for using it.

Type, color, grid, spacing, icons and buttons each got a page that says when to use a value, not just what it is.

The typography page: a responsive type scale
Type
The color page: primary, functional, secondary and interface palettes
Color
The grid page: column overlays at three breakpoints
Grid
The spacing page: heading and section padding per breakpoint
Spacing
The iconography page: the functional icon library
Icons
The buttons page: styles by breakpoint by state
Buttons
Accessibility

Contrast decided before anyone opens a file.

Every brand color is rated against every background it can sit on, for small and large text. Designers pick from a list instead of running a checker.

The accessibility page: contrast charts for text on white, on five background colors and on six secondary colors, then rules for icons
Use at any size · large text only · do not use
The guide

A guide built inside Figma, for designers new to it.

Much of the team hadn’t used Figma. The guide builds a component in seven steps, with live components you can edit on the page that teaches you.

Our content writers went into Figma too, to change copy. So I built components that take longer or shorter copy without a designer fixing the layout, and wrote the writers a short guide to editing copy without breaking anything.

The first part of the guide: finished state, auto layout, breaking a component down, and variants
Anatomy
The middle of the guide: properties and a component to test them on
Properties
The end of the guide: breakpoint behavior and testing the finished component
Breakpoints
Governance

Every page says what changed this sprint.

Revision history, status stickers and an “Edited this sprint” tag keep the file current for everyone working in it.

The file status page: a revision history table, milestone and status stickers, content flags, and edited this sprint tags
The file status page
Outcome

Published, and filled in from live pages.

Five designers, me included, and our content writers worked from it. Figma was the source of truth for the whole business site: layout and copy changed there first, then went to developers.

We audited live pages for components teams used but the system lacked, and built them in.

One was the mobile plan comparison table, which turned into its own project.

The full design system canvas: three horizontal bands of documentation pages for Global Styles, Azure and AEM

300+styles & components, published across three libraries