TailGrids Figma

Introduction

TailGrids Figma is a complete toolkit for modern-day designers. It comes with over 500 functional Figma UI components, including landing pages, e-commerce, dashboards, and more.

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

How to master variants

TailGrids UI takes full advantage of Figma’s powerful variants feature.

Variants offer a fresh approach to grouping and arranging different versions of the same component, simplifying component maintenance and enhancing usability. This not only streamlines your library but also makes it more intuitive.

Our UI kit fully leverages the capabilities of variants, enabling you to effortlessly replace individual components or entire sections for faster prototyping.

If you're new to variants, fear not! They're incredibly user-friendly and quick to grasp. Once you get started, you won't want to go back.

Check out these videos for more information:


Example of variants in action

Variants are elegantly simple: they enable you to consolidate hundreds of different versions of a specific UI component into a unified whole. This not only simplifies matters but also establishes a definitive 'source of truth.'

If you're new to variants, give them a go! Simply choose the input field component below, and you'll discover instant access to an array of countless variations.

No need to detach components for particular use cases! You can employ this singular component seamlessly in any design.

figma variants

How to install Font

TailGrids UI uses Inter as the default typeface. It’s 100% free to use in all types of projects — both personal and commercial.

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, as well as a variable font version.

font preview

Download Inter for free via the official release ->

Download Inter for free via Google Fonts ->

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

Access local fonts on your computer ->

How to change color styles

TailGrids UI is thoughtfully configured with 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.

color preview

Step 1: Open the color style edit menu

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

color edit menu

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.

change color menu

Step 3: Repeat for all color styles

When adjusting colors for your specific project, it's advisable to update all color styles simultaneously instead of making changes on a per-user basis. 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 a bit 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.

typography preview

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:

update typography menu

Step 2: Change typeface or styles

From this point, you can modify any of the 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.

change typeface menu

Learn more about TailGrids Figma: https://tailgrids.com/figma