design
System
Background
Building & revamping an existing Design Language System for Vanguard from scratch in Figma, to create a scalable, consistent and accessible digital experience.
Methodology
In Vanguard, we used Atomic design for creating design systems, where this methodology helps us seek direction on building interface design systems in a more methodical way with explicit order and hierarchy.
Modes
Variable in Figma make it easy to switch between light and dark mode with just one click. So, i adapted the feature & added dark mode version of the design system.
Variables
Vanguard have different templates, themes as well as devices for their product. With the help of variables, it helps to fasten the design process when switching from one mode to another.
Structure
Previously the guidelines of the design system was a mess. Despite components and rules are all over the place, i’ve structured them in a way where it comes in 4 consistent content style in order for better communication & clearer directions with the team.
let’s connect • design • work • let’s connect • design • work • let’s connect • design • work • let’s connect • design • work • let’s connect •
design
System
Background
Building & revamping an existing Design Language System for Vanguard from scratch in Figma, to create a scalable, consistent and accessible digital experience.
Methodology
In Vanguard, we used Atomic design for creating design systems, where this methodology helps us seek direction on building interface design systems in a more methodical way with explicit order and hierarchy.
Modes
Variable in Figma make it easy to switch between light and dark mode with just one click. So, i adapted the feature & added dark mode version of the design system.
Variables
Vanguard have different templates, themes as well as devices for their product. With the help of variables, it helps to fasten the design process when switching from one mode to another.
Structure
Previously the guidelines of the design system was a mess. Despite components and rules are all over the place, i’ve structured them in a way where it comes in 4 consistent content style in order for better communication & clearer directions with the team.
let’s connect • design • work • let’s connect • design • work • let’s connect • design • work • let’s connect • design • work • let’s connect •
design
System
Background
Building & revamping an existing Design Language System for Vanguard from scratch in Figma, to create a scalable, consistent and accessible digital experience.
Methodology
In Vanguard, we used Atomic design for creating design systems, where this methodology helps us seek direction on building interface design systems in a more methodical way with explicit order and hierarchy.
Modes
Variable in Figma make it easy to switch between light and dark mode with just one click. So, i adapted the feature & added dark mode version of the design system.
Variables
Vanguard have different templates, themes as well as devices for their product. With the help of variables, it helps to fasten the design process when switching from one mode to another.
Structure
Previously the guidelines of the design system was a mess. Despite components and rules are all over the place, i’ve structured them in a way where it comes in 4 consistent content style in order for better communication & clearer directions with the team.
let’s connect • design • work • let’s connect • design • work • let’s connect • design • work • let’s connect • design • work • let’s connect •