top of page

Transforming a Figma file in a powerful design system

This study details the steps taken in creating a robust design system through collaboration with the development team.

My role

My key responsibilities were coordinating how the team would collaborate; creating an accessible design system; and designing atomic component

Impact

Creating new interfaces became more efficient for the design team, and developers found the handoff process to be smoother and more comprehensible.

Transforming a Figma file in a powerful design system

Context

About the challenge

Through research, our team determined that Devoro's brand was not effectively communicating with our target audience and decided to update the visual identity. We used this opportunity to also create a flexible, responsive, and accessible design system.

Process

1. Updating colours and typography

Adapting the old file to the new brand identity

2. Building atomic components

Creating flexible and reusable elements

3. Designing flows

Improving handoffs processes

Step 01

Updating colours and typography

While updating the colour palette, we were careful to ensure consistency through colour tokens and accessibility through contrast. 

 

A previous challenge we had encountered was designers using different colours for the same component, which caused visual noise due to subtle inconsistency. To prevent this, we created tokens defining which colour should be used in each context after setting the visual identity according to the new brand. This allows designers to simply select the colour "IconContext" or "H3" from the library rather than deciding between "Gray30" or "Gray40".

We also conducted multiple tests to ensure that related colours had a contrast that met WGAC's AA level requirements for accessibility. Plugins like "Contrast" were helpful in this process. To allow for a wider color palette, we also recognized that larger fonts such as headings and graphics can have lower contrasts without compromising accessibility.

Colour tokens

Colour tokens

Verifying contrast for AA level

Verifying contrast for AA level

Step 02

Building atomic components

Prior to the redesign, we had already created components for our library, but they were not as interconnected as they could be. Therefore, we based our design system on the atomic design concept to ensure that the elements were connected, making it more flexible, reusable, and easy to update.

Creating a flexible design system following atomic design principles

Creating a flexible design system following atomic design principles

Step 03

Designing flows

When collaborating with developers, we learned that one of their main challenges was comparing two screens and figuring out what needed to be built. To address this issue, we now use two resources: one frame showing the screens to be developed and another frame demonstrating the step-by-step flow.

sacola.jpg

Variations of cart's flows

bottom of page