Trio - Design System

The Challenge

1. Establishing consistency at scale

2. Making components flexible

3. Reducing repetitive work

The Solution

Discovery & System Audit

The first step was understanding the existing Figma environment and identifying where the current structure could be improved.

I reviewed the existing styles, components, properties, and recurring interface patterns to understand:

• Where inconsistencies existed

• Which properties could become reusable variables

• Which components needed greater flexibility

• Where repetitive work was happening

• Which structures could be standardized

This analysis became the foundation for rebuilding the Design System.

Design Tokens

One of the most important parts of the reconstruction was creating a structured token architecture directly in Figma.

I created Variables and Collections for:

• Semantic colors

• Color primitives

• Typography

• Spacing

• Sizing

• Border radius

• Breakpoints

The goal was to establish a clear relationship between foundations and interface components, making the system easier to maintain and evolve.

Instead of defining values directly inside individual components, properties could reference centralized variables.

This created a more consistent and predictable foundation for the entire product.

Components & Properties

With the foundations in place, I rebuilt the components using Figma's variable and property capabilities.

Components were structured with properties for different states and configurations, including:

• Boolean properties

• Text properties

• Component properties

• Variants

• States

• Optional elements

• Dynamic content

For example, a financial indicator component could control elements such as:

State: Default
Badge: True
Suffix: True
Suffix text: “vs. previous month”
Helper: True
Helper text: “Updated 5 min ago”
Icon: Light Mode
Title: Title 1

This approach allowed a single component to support multiple use cases without duplicating its structure.

Templates & Slots

Beyond individual components, I created reusable templates for the most common product structures.

This included:

• Main pages

• Internal pages

• Modals

• Feedback states

• Forms and recurring layouts

• Other frequently used page structures

Figma Slots were particularly useful here.

Instead of creating rigid templates, I built structures where designers could replace or add specific content while preserving the underlying layout and logic.

This created a more flexible relationship between:

Tokens → Components → Templates → Screens

The result was a system designed not only to standardize what already existed, but also to accelerate the creation of what would come next.

AI as Part of the Process

One of the differentiators of this project was incorporating AI directly into the Design System workflow.

I worked with:

• Figma

• Figma AI / Agents

• Claude connected to Figma

• Skills for component analysis and review

AI was used mainly in two areas: accelerating production and reviewing components at scale.

During implementation, I used AI to automate repetitive tasks, especially the application and organization of tokens across components.

Instead of manually applying variables to dozens of component properties, AI helped accelerate the process.

I also used Skills to review components, identifying inconsistencies, incorrectly configured properties, standardization opportunities, and potential structural issues.

Rather than manually reviewing every component from scratch, Skills helped identify patterns and inconsistencies across the system, allowing me to focus my attention on the decisions that required actual design judgment.

Delivery

The final result was a rebuilt Design System infrastructure covering the main layers required to support the Internet Banking product.

Foundations

• Color primitives

• Semantic colors

• Typography

• Spacing

• Sizing

• Border radius

• Breakpoints

Components

• Structured properties

• States and variants

• Boolean configurations

• Dynamic content

• Token-based styling

Templates

• Main pages

• Internal pages

• Modals

• Feedback

• Reusable layouts

• Flexible Slot-based structures

The system became a more structured foundation for designers to create and evolve new product experiences.