BBC Creative Studios
Production Design System
A design system for BBC Studios' EMEA team, streamlining the creation of digital assets for their media partners.
A typical homescreen of a streaming service. This one is Amazon's, promoting the BBC Player to non UK audiences.
Background and context
BBC Studios' EMEA team delivers digital promotional artwork for every BBC program they license, distributed across 15 media partners and into 9 languages. A significant volume of output handled by a small team of digital designers.
The artwork has to be delivered at set sizes across a multitude of platforms, together with logo's and programme information embedded within the exported assets.
The existing workflow relied on heavily layered Photoshop files, with every single asset requiring manual attention. Creative time was being consumed by repetitive production, leaving little time for the creative work process.
Role and approach
Photoshop is now soley used for the creative artworking, whilst Figma is now used as the production output environment. By introducing pixel-perfect media templates, that enable better collaboration and quicker batch processing.
To handle multilingual text across hundreds of assets, I built a bespoke Figma plugin that synchronises directly with Google Sheets — allowing automatic translated text to be injected across entire programme sets simultaneously.
For partners still requiring PSD deliverables, a second plugin enables batch export of any Figma frame as a fully editable Photoshop file.
Outcome
The production timeline has effectively been reversed. Where designers previously spent 3.5 days on asset production and just 1.5 on creative, those figures have now switched — freeing the team to focus on the craft that drives the work forward.
Higher creative output means greater volume and reach across BBC Studios' growing partner network.
To understand the current Production landscape, I mapped out the production variables:
- 6 banner types
- 14 platforms/providers
- 5 programming channels, plus BBC Player
- 9 different languages
This demonstrates that the number of assets can very quickly amount to 100's of individual banner assets.
I set up a collection of base template Figma components. I then duplicated these and assigned different languages to each set. I then labelled the text layers for each language so that it could be read and populated by the Text Plugin I created.
To handle multilingual text across hundreds of assets, I built a bespoke Figma plugin that synchronises directly with Google Sheets — allowing automatic text injection across entire programme sets simultaneously.
For partners still requiring PSD deliverables, a second plugin enables batch export of any Figma frame as a fully editable Photoshop file.
Plugin: Google Sheets text importer to Figma text Layers.
Plugin: Figma frames to PSD Exporter.
Whilst these plugin's are currently only available to designers working at BBC Creative Studios, I will be publishing them to the wider global Figma community soon!