BBC News

Figma Component Library

A scalable UI component library for BBC News' London design team, with a full component library and foundational Design System.

  • Web
  • Design System
  • Figma
  • Project Info  +
  • Project Info  –
BBC News

Figma Component Library

Background

BBC Product design teams had been using Adobe XD for several years, but Figma had become the industry standard. With the main Product team based in Manchester, a core group of London-based designers focused on specific content areas of the BBC News website. I was tasked with getting the London team up and running in Figma, starting with a fully tokenised component library.

Approach

As the London team ramped up output, I established a fully tokenised design system and component library in Figma. Published as a shared file, it was designed for any team across the organisation to use and contribute to. Alongside reusable components, I built typographic and colour token libraries — ensuring new components could be created from consistent, shared foundations.

Outcome

The new component library enabled the London team to design, test and build at speed. It improved collaboration and consistency across outputs, while laying the groundwork for a unified design system spanning Web, Social and TV across BBC News.

project image

Using my Design Systems experience I developed whilst at Condé Nast - who had a mature design system 'ecology', this provided a good steer on how to apply systems thinking to BBC News' London team.

Whilst the BBC has a large Product team spanning multiple brands, and have a good heritage of UX practices and 'brand advocacy', Team's work are silo'ed, and they also work at different cadences.

My remit, given to me by the Head of Design for BBC News (Sue Vago), was to improve efficiencies and consistency in current and future design output.

project image
project image
project image
project image

Design Tokens can be used to varying degrees. Whilst mature design systems can sync colour, type and component names to code bases, design tokens can also be used at an component-design level.

I created colour and type token libraries, then applied these to create token-based set of News components in Figma.

Designers therefore had fully responsive components for the entire BBC News website, together with token based style libraries to build out future components for new features.

project image
project image
Next project