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.
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.
Figma also gives you access to an extensive catalog of Google Web Fonts, which you can use in Figma without having to install anything.
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.
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, 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.
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 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.
Learn more about TailGrids Figma: https://tailgrids.com/figma