Building a design system with Tailwind CSS: A step-by-step guide
Learn how to create a design system in Figma with step-by-step practice, covering creating Figma styles and variables for consistent and efficient design workflows.
Whether you’re a designer working for a company or pursuing your projects, building a design system is a crucial skill for an efficient workflow. Learning by doing is highly recommended. In this article, I will demonstrate using Tailwind CSS to create a Tailwind CSS UI Kit in Figma. By following these steps, you can gain inspiration and insights for building your design system.
Confirm the basic kit
In most cases, there are several fixed elements that need to be styled or defined as variables. Figma’s new feature released this year (2023 Config) allows us to accomplish this effectively.
The basic kit typically includes:
- Colors
- Typography
- Spacing
- Border radius
- Shadow
- Breakpoints (Screens)
Colors
Tailwind CSS provides predefined color definitions. You can use these color codes directly or define your own colors within your design.
Get the color number from Tailwind CSS.
Click the “Style” icon and then the “+” button.
Input the color name (e.g., “Slate/50”).
Note: use a slash (”/ “) to categorize your colors.
Repeat the above steps for each color style.
Example:
Fonts
To define font sizes and font weights, refer to the values provided by Tailwind CSS.
Get the font sizes and font weights from Tailwind CSS.
Click on the “Text Styles” icon in the right panel.
Create a new text style.
Done
Repeat the above steps for each font size and weight combination style.
Example:
Shadow
Tailwind CSS provides predefined shadow values. Use these values to define shadow styles in Figma.
Get the shadow value from Tailwind CSS.
Enter the shadow value in Figma.
Name the shadow for easy reference.
Repeat the above steps for each shadow style.
Spacing & Border Radius & Breakpoints (Screens)
Figma Config 2023 update introduced the ability to use numbers as reusable variables. Leveraging this feature enhances consistency between design and code, as numbers can be linked to margins, paddings, and radius values.
Let’s use Spacing as an example
Get the spacing values from Tailwind CSS.
In Figma’s right panel, click on “Local Variables”.
Rename the collection “Primitives” (or any other suitable name).
Click the “Create variable” button and select ”Number”.
Name the variable (e.g., “Spacing/1”) and assign it a value (e.g., 4px).
Repeat the above steps for each spacing.
Same way to create Border Radius and Breakpoints (Screens) variables.
Once established the basic styles and variables, you can use them to create a wide range of components.
Example:
Conclusion
By following the steps outlined in this article, you can effectively build your design system. Creating a design system is an ongoing process, and start by defining the basics and continue expanding your system to match the needs of your projects.
