TTUI – Design system

Building a design system that maintains visual and functional consistency across multiple projects.

Design system

Design tokens

Figma

Github

Storybook

Identity

Design layouts, components and elements in Figma.

Figma is the ideal collaborative software for establishing branding guidelines, creating design elements, and conducting tests to ensure project cohesiveness.

Build the design tokens.

Convert each design rule into tokens within Visual Studio Code and utilize them to build the HTML/CSS elements.

Display on Storybook.

One of the purposes of this design system is to simplify the lives of developers by allowing them to easily copy and paste the code or tokens from Storybook.

Collaborative work with Github.

As a team, we continuously update this design system by adding new elements and design tokens, as well as updating existing elements.

Design system in use.

By utilizing this design system across multiple projects, we accelerate our deployments and achieve consistency across our work.

My role in this project.

My initial responsibility is to establish the design rules, layouts, and elements of this design system within Figma. In addition, I have experience working with Git, allowing me to navigate the codebase and create new releases independently.

Thank you for reading

More details available on request: pierre.philouze@gmail.com