Smile
Smile
ROLE / SERVICES
ROLE / SERVICES
ROLE / SERVICES
Design & Handoff
Design & Handoff
Design & Handoff
Project type
Project type
Project type
Design system
Design system
Design system
COMPANY & location
COMPANY & location
COMPANY & location
Alegra / Latam
Alegra / Latam
Alegra / Latam
INTRODUCTION
INTRODUCTION
INTRODUCTION
INTRODUCTION
Iterate and build Alegra's Design system, Smile UI; a closed-source design system that would give designers and developers the tools they need to create engaging product experiences.
Iterate and build Alegra's Design system, Smile UI; a closed-source design system that would give designers and developers the tools they need to create engaging product experiences.
Iterate and build Alegra's Design system, Smile UI; a closed-source design system that would give designers and developers the tools they need to create engaging product experiences.
Iterate and build Alegra's Design system, Smile UI; a closed-source design system that would give designers and developers the tools they need to create engaging product experiences.
Create a design system from scratch, from the base elements to the components, and ensure that once the components have been built and the complexity has been added, any designer or developer can still easily understand the design system.
Create a design system from scratch, from the base elements to the components, and ensure that once the components have been built and the complexity has been added, any designer or developer can still easily understand the design system.
Create a design system from scratch, from the base elements to the components, and ensure that once the components have been built and the complexity has been added, any designer or developer can still easily understand the design system.
Create a design system from scratch, from the base elements to the components, and ensure that once the components have been built and the complexity has been added, any designer or developer can still easily understand the design system.
Add Design thinking to constantly improve the design system and get ongoing feedback from all teams. It began with discussions and brainstorms with the team to truly figure out what needed to be in the Design System.
Add Design thinking to constantly improve the design system and get ongoing feedback from all teams. It began with discussions and brainstorms with the team to truly figure out what needed to be in the Design System.
Add Design thinking to constantly improve the design system and get ongoing feedback from all teams. It began with discussions and brainstorms with the team to truly figure out what needed to be in the Design System.
Add Design thinking to constantly improve the design system and get ongoing feedback from all teams. It began with discussions and brainstorms with the team to truly figure out what needed to be in the Design System.
A design system succeeds when it serves its users—designers and developers. Gathering their feedback helps identify pain points, refine components, and improve workflows. By listening to their needs, we can create a system that’s not just consistent but truly functional and scalable.
A design system succeeds when it serves its users—designers and developers. Gathering their feedback helps identify pain points, refine components, and improve workflows. By listening to their needs, we can create a system that’s not just consistent but truly functional and scalable.
A design system succeeds when it serves its users—designers and developers. Gathering their feedback helps identify pain points, refine components, and improve workflows. By listening to their needs, we can create a system that’s not just consistent but truly functional and scalable.
A design system succeeds when it serves its users—designers and developers. Gathering their feedback helps identify pain points, refine components, and improve workflows. By listening to their needs, we can create a system that’s not just consistent but truly functional and scalable.
Creating user stories helps keep the design system grounded in real needs. By putting ourselves in the shoes of designers and developers, we can spot what’s working, what’s missing, and what needs fixing. It’s a simple way to make sure the system supports real workflows, not just ideal ones.
Creating user stories helps keep the design system grounded in real needs. By putting ourselves in the shoes of designers and developers, we can spot what’s working, what’s missing, and what needs fixing. It’s a simple way to make sure the system supports real workflows, not just ideal ones.
Creating user stories helps keep the design system grounded in real needs. By putting ourselves in the shoes of designers and developers, we can spot what’s working, what’s missing, and what needs fixing. It’s a simple way to make sure the system supports real workflows, not just ideal ones.
Creating user stories helps keep the design system grounded in real needs. By putting ourselves in the shoes of designers and developers, we can spot what’s working, what’s missing, and what needs fixing. It’s a simple way to make sure the system supports real workflows, not just ideal ones.
As a product designer, I want to quickly find and use standardized UI components from the design system, So that I can create high-fidelity mockups efficiently while ensuring consistency across the product.
As a front-end developer, I want to have well-documented, reusable components from the design system, So that I can implement UI elements faster and maintain code consistency without redesigning components from scratch.
01
01
01
01
/
/
/
/
Design tokens
Design tokens
Design tokens
Design tokens
Creating design tokens
Creating design tokens
Creating design tokens
Creating design tokens
These are the foundations of any design system. Tokens consist of values needed to construct and maintain a design system, such as spacing, color, typography, border radius, and breakpoints. Creating a design token for this design system takes two steps.
These are the foundations of any design system. Tokens consist of values needed to construct and maintain a design system, such as spacing, color, typography, border radius, and breakpoints. Creating a design token for this design system takes two steps.
These are the foundations of any design system. Tokens consist of values needed to construct and maintain a design system, such as spacing, color, typography, border radius, and breakpoints. Creating a design token for this design system takes two steps.
These are the foundations of any design system. Tokens consist of values needed to construct and maintain a design system, such as spacing, color, typography, border radius, and breakpoints. Creating a design token for this design system takes two steps.
Primitive token
Primitive token
Tokens replace static values, such as hex codes for color, with self-explanatory names. The global tokens have a code-like name, such as: Blue -100 and an associated value like : #A6DDF8.
Semantic token
Semantic token
Semantic tokens are context-specific, instead of referring to colors by what they are, they reference another token. For example, surface-secondary refers to the global token slate-100 that has the value of #F8FAFC, and its role or context is to be used on a container with the value of surface-primary.
#A6DDF8.
blue-100
surface.secondary
slate-100
#A6DDF8.
blue-100
surface.secondary
slate-100
#A6DDF8.
blue-100
surface.secondary
slate-100
Examples
Examples
Examples
Color ramp
Color ramp
Color ramp
Color docs
Color docs
Color docs
Typography docs
Typography docs
Typography docs
02
02
02
02
/
/
/
/
Components
Components
Components
Components
Investigation
Investigation
Investigation
Investigation
Take a look at other well-known design systems, like material design or carbon design, to learn how they solve a common problem, how they structure the components, and what elements they have.
Take a look at other well-known design systems, like material design or carbon design, to learn how they solve a common problem, how they structure the components, and what elements they have.
Take a look at other well-known design systems, like material design or carbon design, to learn how they solve a common problem, how they structure the components, and what elements they have.
Take a look at other well-known design systems, like material design or carbon design, to learn how they solve a common problem, how they structure the components, and what elements they have.
There are a lot of resources such as articles, case studies, videos among others, that help give a guide or clearance on how to create a design system. It's very helpful to read and get as much information as possible.
There are a lot of resources such as articles, case studies, videos among others, that help give a guide or clearance on how to create a design system. It's very helpful to read and get as much information as possible.
There are a lot of resources such as articles, case studies, videos among others, that help give a guide or clearance on how to create a design system. It's very helpful to read and get as much information as possible.
There are a lot of resources such as articles, case studies, videos among others, that help give a guide or clearance on how to create a design system. It's very helpful to read and get as much information as possible.
Creating the components
Creating the components
Creating the components
Creating the components
Create a list of requirements that the component needs to have in order to solve the problem it's intended to. Then make a quick sketch of how you visualize the structure of the component.
Create a list of requirements that the component needs to have in order to solve the problem it's intended to. Then make a quick sketch of how you visualize the structure of the component.
Create a list of requirements that the component needs to have in order to solve the problem it's intended to. Then make a quick sketch of how you visualize the structure of the component.
Create a list of requirements that the component needs to have in order to solve the problem it's intended to. Then make a quick sketch of how you visualize the structure of the component.
What it needs
Title
Description
Three action buttons (on / off visibility)
Slot (on / off visibility)
Image (on / off visibility)
This is the most fun part of the process. With all the information gathered and with help from the sketch, bring the idea to life (We use figma in alegra). Each component has different properties like titles, descriptions, button quantity, slots, etc. They also need variants to ensure versatility and flexibility.It’s important that the design and construction are scalable to ensure that it’s future-proof.
This is the most fun part of the process. With all the information gathered and with help from the sketch, bring the idea to life (We use figma in alegra). Each component has different properties like titles, descriptions, button quantity, slots, etc. They also need variants to ensure versatility and flexibility.It’s important that the design and construction are scalable to ensure that it’s future-proof.
This is the most fun part of the process. With all the information gathered and with help from the sketch, bring the idea to life (We use figma in alegra). Each component has different properties like titles, descriptions, button quantity, slots, etc. They also need variants to ensure versatility and flexibility.It’s important that the design and construction are scalable to ensure that it’s future-proof.
This is the most fun part of the process. With all the information gathered and with help from the sketch, bring the idea to life (We use figma in alegra). Each component has different properties like titles, descriptions, button quantity, slots, etc. They also need variants to ensure versatility and flexibility.It’s important that the design and construction are scalable to ensure that it’s future-proof.
Design a prototype of a real world usage where the component would be used and measure if the solution is the best. It was shared to the team so they could test it out and then give feedback about the usability, versatility, flexibility, scalability and accessibility.After that you can publish the component so everyone can make use of it.
Design a prototype of a real world usage where the component would be used and measure if the solution is the best. It was shared to the team so they could test it out and then give feedback about the usability, versatility, flexibility, scalability and accessibility.After that you can publish the component so everyone can make use of it.
Design a prototype of a real world usage where the component would be used and measure if the solution is the best. It was shared to the team so they could test it out and then give feedback about the usability, versatility, flexibility, scalability and accessibility.After that you can publish the component so everyone can make use of it.
Design a prototype of a real world usage where the component would be used and measure if the solution is the best. It was shared to the team so they could test it out and then give feedback about the usability, versatility, flexibility, scalability and accessibility.After that you can publish the component so everyone can make use of it.
03
03
03
03
/
/
/
/
Documentation
Documentation
Documentation
Documentation
The documentations
The documentations
The documentations
The documentations
Clear documentation makes a design system actually usable. It guides teams on how and when to use components, reducing confusion and keeping things consistent. We decided to create two different documentations, one for designers and another one for developers.
Clear documentation makes a design system actually usable. It guides teams on how and when to use components, reducing confusion and keeping things consistent. We decided to create two different documentations, one for designers and another one for developers.
Clear documentation makes a design system actually usable. It guides teams on how and when to use components, reducing confusion and keeping things consistent. We decided to create two different documentations, one for designers and another one for developers.
Clear documentation makes a design system actually usable. It guides teams on how and when to use components, reducing confusion and keeping things consistent. We decided to create two different documentations, one for designers and another one for developers.
Designers focus on using components in Figma, while developers need specs and Tailwind tokens for implementation. By creating separate documentation, we ensured each team gets the right information—clear, relevant, and easy to navigate—while keeping the system cohesive.
Designers focus on using components in Figma, while developers need specs and Tailwind tokens for implementation. By creating separate documentation, we ensured each team gets the right information—clear, relevant, and easy to navigate—while keeping the system cohesive.
Designers focus on using components in Figma, while developers need specs and Tailwind tokens for implementation. By creating separate documentation, we ensured each team gets the right information—clear, relevant, and easy to navigate—while keeping the system cohesive.
Designers focus on using components in Figma, while developers need specs and Tailwind tokens for implementation. By creating separate documentation, we ensured each team gets the right information—clear, relevant, and easy to navigate—while keeping the system cohesive.
Each section is structured with a table and a graphic. The tables map attributes like font size, height, and color to their Tailwind CSS tokens (e.g., text-xs, h-4, surface-secondary). The graphics bring these details to life, offering a visual reference for clearer, more intuitive understanding.
Each section is structured with a table and a graphic. The tables map attributes like font size, height, and color to their Tailwind CSS tokens (e.g., text-xs, h-4, surface-secondary). The graphics bring these details to life, offering a visual reference for clearer, more intuitive understanding.
Each section is structured with a table and a graphic. The tables map attributes like font size, height, and color to their Tailwind CSS tokens (e.g., text-xs, h-4, surface-secondary). The graphics bring these details to life, offering a visual reference for clearer, more intuitive understanding.
Each section is structured with a table and a graphic. The tables map attributes like font size, height, and color to their Tailwind CSS tokens (e.g., text-xs, h-4, surface-secondary). The graphics bring these details to life, offering a visual reference for clearer, more intuitive understanding.
The idea of this documentation is to give the designers guidelines about how to implement the components in their designs, rather than knowing how they were built. This helps to maintain the look and feel of the product consist throughout the designs..
The idea of this documentation is to give the designers guidelines about how to implement the components in their designs, rather than knowing how they were built. This helps to maintain the look and feel of the product consist throughout the designs..
The idea of this documentation is to give the designers guidelines about how to implement the components in their designs, rather than knowing how they were built. This helps to maintain the look and feel of the product consist throughout the designs..
The idea of this documentation is to give the designers guidelines about how to implement the components in their designs, rather than knowing how they were built. This helps to maintain the look and feel of the product consist throughout the designs..
The payoff
The payoff
The payoff
The payoff
Increased efficiency through the designing and development of the website. It also helps create an organic look and feel between all the products of Alegra and less back and forth between designers and developers, and reduced friction.
Increased efficiency through the designing and development of the website. It also helps create an organic look and feel between all the products of Alegra and less back and forth between designers and developers, and reduced friction.
Increased efficiency through the designing and development of the website. It also helps create an organic look and feel between all the products of Alegra and less back and forth between designers and developers, and reduced friction.
Increased efficiency through the designing and development of the website. It also helps create an organic look and feel between all the products of Alegra and less back and forth between designers and developers, and reduced friction.
03/
Did you like what
you saw?
SEND ME A
MESSAGE
03/
Did you like what
you saw?
SEND ME A
MESSAGE
03/
Did you like what
you saw?
SEND ME A
MESSAGE
03/
Did you like what
you saw?
SEND ME A
MESSAGE