top of page

Figma Design System Guide.

Scaling consistent design system usage in Figma.

guide.png

The Challenge.

As the design system grew, so did the number of designers and delivery pressures.

 

While the system itself was well defined, how designers used it in Figma varied widely. Leading to unnecessary overrides and avoidable design debt.

​

As Design System Designer, I identified a core gap:
There was no shared, end-to-end guidance on how to consume and explore the design system within Figma.

​

This created friction across:

  • Onboarding new designers,

  • Design critique and review,

  • Collaboration between product teams and the system team,

  • Long-term maintainability in a regulated environment.

​

The challenge was to create guidance that was clear and scalable without slowing teams down.

Screenshot 2026-01-17 at 4.11.44 pm.png

Strategy & Design.

​The goal was to define a single, repeatable mental model for working with the design system in Figma. Covering everything from file setup to component usage and contribution.

​

The guide needed to:

  • Reduce ambiguity and decision fatigue,

  • Encourage consistent behaviours across teams,

  • Support both delivery and exploration,

  • Be usable by designers at different levels of seniority.

​

Crucially, it had to live inside designers’ workflows, not as a separate artefact that would be forgotten.

Screenshot 2026-01-17 at 4.11.50 pm.png

Structure & Content.

I designed the guide as a clearly ordered, modular system that mirrors how designers actually work in Figma.

​

Core sections included:

  • File structure & project space: Clear conventions for setting up files and pages to support collaboration and long-term maintenance.​

​

  • Themes & foundations: Guidance on how core tokens, styles, and foundations are applied. Reinforcing consistency and accessibility from the start.​​

​

  • Components & patterns: How to correctly consume components, use variants and understand when patterns should be reused vs evolved.​

​

  • Specs & resources: Where to find canonical references, specifications, and supporting materials to reduce duplication and rework.

​​

  • Exploration: A clearly defined space for experimentation. Enabling designers to explore safely without polluting production files or system libraries.

​​

  • Libraries, toolkits & plugins: Practical guidance on using shared libraries and Figma-native resources effectively.

​​​

  • Using and extending system libraries: Clear expectations for when to use core libraries, when to create local extensions, and how to propose changes back to the system team.

​​

This helped designers understand not just the rules, but the intent

behind them.

Screenshot 2026-01-17 at 4.11.58 pm.png

Collaboration & Rollout.

I collaborated closely with:

  • Design system contributors,

  • Embedded product designers,

  • Design managers and leads.

​

The guide was reviewed iteratively to ensure it reflected real workflows rather than idealised ones.

 

It was then:

  • Embedded into onboarding for new designers,

  • Referenced during design critiques,

  • Used as a shared baseline during system conversations.

​

By aligning on behaviours early, we reduced the need for corrective feedback later.

Screenshot 2026-01-17 at 4.11.35 pm.png

The Solution:

While not tied to a single KPI, the impact was clear across the organisation:

  • More consistent use of components and patterns,

  • Fewer detached or modified components,

  • Cleaner, more maintainable Figma files,

  • Faster onboarding for new designers,

  • Reduced friction between product teams and the system team.

​

Most importantly, the guide helped reposition the design system as something teams understand and trust, not just something they’re told to use.

bottom of page