Figma

TailGrids Figma (opens in a new tab) is a complete toolkit for modern-day designers. It has over 500 functional Figma UI components with 1000+ variations, making it suitable for diverse web projects, including landing pages, e-commerce, dashboards, and more.

Kickstart your projects, save countless hours, and elevate your design with TailGrids Figma.

How to master variants

TailGrids UI takes full advantage of Figma's powerful variant features to save time and enhance design consistency.

Understanding Variants

Variants offer a revolutionary way to group and arrange different versions of the same component (e.g., button with default, hover, and active states) into a single, adaptable element.

This simplifies component maintenance and enhances usability, streamlining your library and making it more intuitive.

Our UI kit is designed with your ease of use in mind. It fully leverages the capabilities of variants, enabling you to replace individual components or entire sections effortlessly for faster prototyping.

Are you new to Variants? No Problem! They're incredibly user-friendly and quick to grasp. Once you get started, you won't want to go back.

Check out either the docs (opens in a new tab) or the video for quick intros:

Example of variants in action

Variants make things simple. They let you combine hundreds of different versions of a specific UI component into one, simplifying things and creating a single, reliable 'source of truth.'

If you're new to variants, try them out! Simply choose the input field component below, and you'll discover instant access to countless variations.

There is no need to detach components for specific use cases. This single component can be easily used in any design without any hassle.

How to install Font

TailGrids UI uses Inter as the default typeface. This versatile sans-serif font is free for personal and commercial projects and works beautifully on screens.

Inter is a free, open-source sans-serif typeface designed by Swedish designer/programmer Rasmus Andersson. It was designed to work well on screens as a UI font and features a large x-height. The family is available in nine weights with matching italics and a variable font version.

Here's how to access it:

• Official Website: Download Inter for free via the official release -> (opens in a new tab)
• Google Fonts: Download Inter for free via Google Fonts -> (opens in a new tab)

Figma also gives you access to an extensive catalogue of Google Web Fonts, which you can use in Figma without having to install anything.

Access local fonts on your computer -> (opens in a new tab)

How to change colour styles

TailGrids UI provides a well-organized set of color styles, serving as an ideal foundation for any brand or project.

Let's explore how you can switch between colors.

Step 1: Open the color style edit menu

Open the edit dialog by clicking on the edit style icon next to the style:

Step 2: Change colors or styles

From here, you can modify the properties of the color style, and these changes will automatically propagate to every component and design where the color is utilized.

Step 3: Repeat for all color styles

When adjusting colors for your specific project, updating all color styles simultaneously is advisable instead of making changes per user.

This approach maintains organization and guarantees that no instances are overlooked.

In larger projects, Figma may require some time to propagate changes across styles, as they need to cascade down through every component in which they're employed. While this process can be tedious, the result is worth the effort!

How to Change Typography Styles

TailGrids UI comes preconfigured with an intelligent and adaptable typography system as the default setting. Let's explore how to customize these styles.

Making changes to these styles or the typeface you’d like to use for the project is pretty easy.

Here are the steps:

Step 1: Open the edit dialog by clicking on the edit style icon next to the style:

Step 2: Change typeface or styles

From this point, you can modify any text style properties, including the typeface, font size, and line height.

Any changes you make here will automatically propagate to every component and design where the type scale is utilized.

Unlock the Full Power of TailGrids Figma: Learn more (opens in a new tab)