In my work as a UX/UI designer,I found that I was using a lot repeated UI elements in my projects. Our company had its own accent colors, button and card styles which we used commonly amongst all platforms. This pushed me to create a design system from scratch,taking advantage of every free feature Figma offered at the time.
The goal was to create a set of colors, numbers and font styles which can be used in any and all projects coming forward,with as little tweaking as possible while designing.
Approach & Process
Global Styles - Colors & Numbers
I started off with variant setup. I took up the basic colors I frequently use in my projects and generated different hues for it, which can be used for pretty much any element in the design. I called this the Base Values collection.
Once the colors were generated,I generated the number values, which will be used for all numerical values. I generated two sets of numbers - 2s and 8s , so that it would give a wide range of options to choose from.
This is the base values which we will be using in customizing the elements.
Font Styles
We usually work on responsive design, which is desktop first. So I had to create styles for both desktop and mobile version. I used the plugin Typescales to generate font sizes ranging from H1 to footnote. This acted as a base value. I rounded off the decimal numbers and corrected the line height wherever needed. This was saved as design styles,which can be edited as per project if needed.
Buttons
From my experience,I have learnt that properly designed and strategically placed buttons make or break a sale. I needed the buttons to be in
-
2 Types - Primary and Secondary
-
2 Designs - Box and Pill ;
-
3 Sizes - Small ; Medium and Large ;
-
4 states - Default ; Hovered ; Clicked and Disabled ;
-
5 Styles - With Icon ; Without Icon ; Icon Only ; Icon on the left and Icon on the right.
With the colors and numbers in place,it was pretty easy to come up with states for the icons.
The trick was in naming them in order to make them into variables. The naming system followed is
State = Default/Hovered/Clicked/Disabled ; Type = Primary/Secondary ; Size = Small/Medium/Large ; Pill = True/False ; Icon = With/Without/Only/Left/Right
This naming brought all the button variants into a single button
With all the values taken from the variant collection I had designed in the beginning, the customization became not only easy but uniform as well. If there is a need to change the entire color scheme or size, all I had to do it change it in the corresponding variant block, there by reducing the room for human error.
Outcome
This project was an opportunity to refine my expertise with Figma’s advanced features, such as variants, auto-layout, and style management. By structuring components with flexible variants and globally managed styles, I achieved a high level of adaptability within the design system, reducing the need for redundant assets and allowing for quick updates across the board.
Creating variants for commonly used elements like buttons, form fields, and cards made it easy to toggle between states (e.g., “hover,” “pressed,” “disabled”) without needing separate components for each. This approach demonstrated my ability to make systems that both designers and developers can implement and iterate on efficiently.

One of the key insights from this project was understanding the importance of thoughtful naming conventions and style hierarchies. Establishing a clear, logical naming system for components and styles made it much easier to maintain the design system over time. Additionally, I found that incorporating auto-layout properties significantly enhanced the responsiveness and adaptability of each component, especially when designing for various screen sizes.
This exercise reinforced my approach to creating scalable design solutions that not only streamline the design process but also elevate the user experience through consistency and clarity.
