Restructure the libraries
The monolithic Figma file became three purpose-built libraries for foundations, icons and production UI components. Each one had a clear role, ownership model and relationship to code.
Project overview
From fragmented foundations to a design system used at scale.
The redesign of BT Arc connected foundations, tokens, components and documentation, helping adoption grow from fewer than 100 daily inserts to 64,000 each week.
The challenge
BT had invested more than £3 million in a design system, but adoption remained low. Fewer than 100 component inserts a day showed that the system was not yet working as the default way for teams to build.
Research with designers and engineers traced the problem to three connected issues:
- Figma components had fallen behind the tools and the code.
- Real product use cases had not shaped the library structure.
- Teams had little guidance on purpose, behaviour or best practice.
- Organisation
- BT Group
- Contribution
- Design system and service leadership
- Timeline
- January 2022 to July 2023
- Tools
- Figma, Token Studio, GitHub, Storybook and React
The approach
Rebuild the system around adoption. That meant making every layer easier to understand, more useful in production and visibly connected from design decision to shipped interface.
Connect tokens to code
Existing JSON tokens were mapped into Token Studio and Figma, creating a dependable relationship between GitHub, design foundations and the React implementation.
Research real components
Every component started with an audit of live product work, user experience decisions and established market patterns before moving into design and engineering.
Document and test
Usage guidance, accessibility requirements, technical behaviour and testing were treated as part of the component, not supporting material added after delivery.
Library architecture
One system, three clear entry points.
Separating shared foundations, icons and UI components improved performance, clarified ownership and made adoption measurable.Token parity
One decision, carried from repository to interface.
GitHub JSONToken StudioFigmaReact
Component research
Use cases before variants.
Documentation and testing
Design and code tell the same story.
The result
From an underused library to BT's shared way of building.
A token-led foundation, production-ready components and practical documentation gave teams a system they could use with confidence.- 64,000
- weekly component inserts
- 1,000+
- component variations
- 1:1
- parity between Figma and Storybook
Project scope
The work brought together.
- Design systems
- Tokens
- Components
- Documentation
