The University of the Arts London’s Accidental Path to a Design System | Figma Blog

UAL’s fragmented history across six colleges created inconsistent digital experiences and made collaboration difficult. Midway through a website redesign, the UX team switched from Sketch to Figma, gaining real-time collaboration and a shared source of truth. That change unexpectedly led to a flexible design system that aligned designers, developers, stakeholders, and external agencies while accelerating delivery.

A Fragmented Digital Identity

• UAL consists of six colleges, each with its own history, identity, and website practices.
• Individual teams preferred implementing their own styles, resulting in inconsistent digital experiences.
• As part of a 2017 Digital Transformation Program, UAL began redesigning its core website to become more user-centric.
• Although a design system was not initially the main objective, it emerged naturally during the project.

Switching from Sketch to Figma

• The team struggled with Sketch’s siloed files, versioning problems, syncing delays, and limited collaboration.
• These issues were especially difficult because stakeholders and agencies were distributed across 14 campuses.
• Figma enabled browser-based, real-time collaboration and allowed the team to import Sketch files easily.
• Designers, developers, executives, and other stakeholders could work from one centralized source of truth.
• The shared workspace improved transparency and helped repair the disconnect between design and development.

Building the Design System

• Since the website had to be built largely from scratch, the team prioritized creating reusable design-system foundations.
• The design system was intended to unify not only the website but also UAL’s broader digital channels.
• Workshops with students and business partners helped identify essential features, components, and inconsistencies.
• The system had to support UAL’s complex brand, including variations in color, typography, and visual personality.
• Figma’s team libraries created a living, accessible version of the brand guidelines.
• Figma Styles allowed color, text, and effect styles to be managed independently, providing additional flexibility.

Faster Delivery Through Reusable Components

• The team used components to create base pages that served as templates for future pages.
• Developers could build new pages more quickly and see how designs translated into code.
• Designers and developers worked from the same system, reducing communication gaps and improving coordination.
• The design system became both a visual foundation and a practical workflow for speeding up website production.

UAL’s experience shows that a design system can emerge from solving everyday collaboration and consistency problems. Centralized tools, reusable components, shared libraries, and close designer-developer collaboration helped transform an unwieldy redesign into a faster and more unified digital process.