Blockpass Design library & tokens

Company

Blockpass

Role

Product Designer

My Focus

Components, Tokens

Timelime

2024 - 2025

Introduction

The Blockpass Design Library is a shared Figma library used across products, combining foundations (colors, typography, spacing, grid), 29 reusable components, and 7 UI templates into one source of truth. It helps product teams design and ship interfaces faster with more consistent quality.

Alongside the UI library, I developed design tokens—a critical foundation for representing design decisions that enhance scalability and system updates. This token architecture is the foundation for evolving the library into a full, scalable design system.

Introduction

The Blockpass Design Library is a shared Figma library used across products, combining foundations (colors, typography, spacing, grid), 29 reusable components, and 7 UI templates into one source of truth. It helps product teams design and ship interfaces faster with more consistent quality.

Alongside the UI library, I developed design tokens—a critical foundation for representing design decisions that enhance scalability and system updates. This token architecture is the foundation for evolving the library into a full, scalable design system.

Introduction

The Blockpass Design Library is a shared Figma library used across products, combining foundations (colors, typography, spacing, grid), 29 reusable components, and 7 UI templates into one source of truth. It helps product teams design and ship interfaces faster with more consistent quality.

Alongside the UI library, I developed design tokens—a critical foundation for representing design decisions that enhance scalability and system updates. This token architecture is the foundation for evolving the library into a full, scalable design system.

Deliverables & Documentation
Deliverables & Documentation
Deliverables & Documentation
Context

After Blockpass migrated from Ant Design to MUI v5 across its products, UI inconsistencies started to grow: colors, typography, spacing, and non-standard components often didn’t match between Figma and production. This led to extra review cycles, one-off fixes, and slower delivery.

To address this, I created a shared Figma design library and a design token system to standardize foundations and components, and keep design and development in sync.

Context

After Blockpass migrated from Ant Design to MUI v5 across its products, UI inconsistencies started to grow: colors, typography, spacing, and non-standard components often didn’t match between Figma and production. This led to extra review cycles, one-off fixes, and slower delivery.

To address this, I created a shared Figma design library and a design token system to standardize foundations and components, and keep design and development in sync.

Context

After Blockpass migrated from Ant Design to MUI v5 across its products, UI inconsistencies started to grow: colors, typography, spacing, and non-standard components often didn’t match between Figma and production. This led to extra review cycles, one-off fixes, and slower delivery.

To address this, I created a shared Figma design library and a design token system to standardize foundations and components, and keep design and development in sync.

Challenges

  • How might we create a design library that balances flexibility for new projects while ensuring a consistent user experience across established products?

  • How do we ensure token changes in Figma sync accurately to React Native?

Challenges

  • How might we create a design library that balances flexibility for new projects while ensuring a consistent user experience across established products?

  • How do we ensure token changes in Figma sync accurately to React Native?

Challenges

  • How might we create a design library that balances flexibility for new projects while ensuring a consistent user experience across established products?

  • How do we ensure token changes in Figma sync accurately to React Native?

Building the Component Library

I structured the component system around core design principles: building blocks first, scalability, accessibility, and efficiency. I prioritized high-frequency components used across company products, designing them for flexibility while maintaining brand consistency.

Designing a new component typically follows these four steps:

  1. Context: Understand the full scope of the component or pattern.

  2. Define: Clarify its purpose, functionality, and limitations.

  3. Audit: Review the design library to identify overlaps and ensure relevance.

  4. Build: Create the design, develop code, and document its use.

I collaborated closely with developers on key components like buttons, text fields, dialogs… To ensure technical feasibility and prioritize the most-used components first.

UI Components
Building the Component Library

I structured the component system around core design principles: building blocks first, scalability, accessibility, and efficiency. I prioritized high-frequency components used across company products, designing them for flexibility while maintaining brand consistency.

Designing a new component typically follows these four steps:

  1. Context: Understand the full scope of the component or pattern.

  2. Define: Clarify its purpose, functionality, and limitations.

  3. Audit: Review the design library to identify overlaps and ensure relevance.

  4. Build: Create the design, develop code, and document its use.

I collaborated closely with developers on key components like buttons, text fields, dialogs… To ensure technical feasibility and prioritize the most-used components first.

UI Components
Building the Component Library

I structured the component system around core design principles: building blocks first, scalability, accessibility, and efficiency. I prioritized high-frequency components used across company products, designing them for flexibility while maintaining brand consistency.

Designing a new component typically follows these four steps:

  1. Context: Understand the full scope of the component or pattern.

  2. Define: Clarify its purpose, functionality, and limitations.

  3. Audit: Review the design library to identify overlaps and ensure relevance.

  4. Build: Create the design, develop code, and document its use.

I collaborated closely with developers on key components like buttons, text fields, dialogs… To ensure technical feasibility and prioritize the most-used components first.

Components of the design library

Guidelines

The design library includes usage guidelines and component properties documentation to ensure consistent usability and UI across all products.​

Basic guidelines and properties of a component
Guidelines

The design library includes usage guidelines and component properties documentation to ensure consistent usability and UI across all products.​

Basic guidelines and properties of a component
Guidelines

The design library includes usage guidelines and component properties documentation to ensure consistent usability and UI across all products.​

Basic guidelines and properties of a component

Basic guidelines and properties of a component

Design tokens

Design tokens are created and managed using Figma Variables, then synced through the Tokens Studio plugin. These tokens define all UI design details and serve as the single source of truth.

I export tokens as JSON files via Tokens Studio and push them to a GitHub repository, enabling developers to work directly with the token library

Figma variables and Tokens studio plugin
Design tokens

Design tokens are created and managed using Figma Variables, then synced through the Tokens Studio plugin. These tokens define all UI design details and serve as the single source of truth.

I export tokens as JSON files via Tokens Studio and push them to a GitHub repository, enabling developers to work directly with the token library

Figma variables and Tokens studio plugin
Design tokens

Design tokens are created and managed using Figma Variables, then synced through the Tokens Studio plugin. These tokens define all UI design details and serve as the single source of truth.

I export tokens as JSON files via Tokens Studio and push them to a GitHub repository, enabling developers to work directly with the token library

Figma variables and Tokens studio plugin

Figma variables and Token studio plugin

Additionally, all design tokens will be documented and compiled on a single Figma page called 'Design Tokens.' This page will list all token details for each design foundation.

Design tokens documentation

Additionally, all design tokens will be documented and compiled on a single Figma page called 'Design Tokens.' This page will list all token details for each design foundation.

Design tokens documentation

Additionally, all design tokens will be documented and compiled on a single Figma page called 'Design Tokens.' This page will list all token details for each design foundation.

Design tokens documentation

Design tokens documentation

Conclusion

This project established a scalable design system for all company products, including a Figma design library and a token-based implementation layer.

The library is structured into four main categories — Foundation, Assets, Components, and Templates — covering core foundations (colors, typography, icons, spacing & radius, effects, grid), 29 reusable components, and 7 UI templates (cards, data tables, email templates, empty states, side sheets, 404 pages). Together, they give teams a consistent starting point for most core product screens.

Collaboration and Implementation

During development, the company went through restructuring that reduced tech capacity, so I narrowed the implementation scope to focus on foundations, key components, and tokens with the highest reuse.

I documented the library structure, finalized the token system, and pushed it to GitHub for version control and collaboration. Tokens are currently being tested in sandbox environments across products before full production rollout.

Impact

The token system now acts as a single source of truth for visual decisions (color, typography, spacing, radius, effects, grid), while the shared components and templates reduce one-off styling and duplicated work.

Although full adoption is still in progress due to limited resources, the system provides a ready-to-scale foundation that will speed up future development and streamline design–development handoff as more teams adopt it.