DEV Community

Cover image for Top Free 10 Figma Toolkits to Build Custom Design Systems
FUNCTION12
FUNCTION12

Posted on • Originally published at blog.function12.io

Top Free 10 Figma Toolkits to Build Custom Design Systems

Design systems have become an essential part of every designer's toolkit. They are a collection of reusable components, guidelines, and best practices that help designers create consistent and cohesive designs. Figma has become a popular tool for building design systems because of its collaborative features and its ability to create responsive designs. In this article, we will take a look at the top 10 design systems templates built in Figma that are available to designers.

10 Figma Toolkits for Design Systems Reference

We have selected 10 prominent toolkits, tried to list them down in descending order according to their popularity indexes such as number of likes and downloads. So here are top 10 Design Systems references built in Figma.

Image description

10. Carbon Design System by IBM

IBM created Carbon Design System to support the adoption of Figma across IBM. By creating a living library of IBM Design Language patterns and Carbon components, IBM expected their designers, developers, and teams to boost overall productivity. Thanks to Carbon’s open-source mission, this open-source library was published publicly in the Figma Community. Their design systems toolkits are available in different themes:

Gray 100 Theme
Gray 90 Theme
Gray 10 Theme
White Theme

Popularity Stats

Likes: 235
Downloads: 6.1K

Image description

9. Custom Apps UI kit by Airtable

Airtable built this UI kit for the product makers to build apps on top of Airtable. If you are planning to develop an app to register inside Airtable, this is a good kit to try.

Popularity Stats

Likes: 720
Downloads: 19.6K

Image description

8. Chakra UI

Chakra UI is another popular UI kit that many designers take as a reference for their works. It includes extensive styles for typography, color, and effects, component variants including size and state, now also with interactions, dynamic layers powered by auto layout, and implicit pixel grid sizes and spacing.

Popularity Stats

Likes: 1.2K
Downloads: 31.2K

Image description

7. Windows Teams UI Kit by Microsoft

The Microsoft Teams UI Kit includes UI components, templates, best practices, and other resources for creating Teams app. This kit is built to help the app makers to focus on users’ needs, understand how and where people use Teams apps, and apply tested designs. If you have any part in creating a Teams app, this is definitely the right reference to use.

Popularity Stats

Likes: 2k
Downloads: 47K

Image description

6. Shopify Polaris Design System

Shopify's Polaris Design System is the UI kit that provides all the components, styles, and icons used when designing Shopify admin. Like Atlassian Design System, the kit is divided into different parts including:

Components
Styles
Icons

Popularity Stats

Likes: 842
Downloads: 26.9K

Image description

5. Salesforce Lightning Design System

Salesforce's Lightning Design System includes the resources to create user interfaces consistent with the Salesforce Lightning principles, design language, and best practices. If you are on the team that builds Salesforce Lightning apps, this would be the right reference to look at. Just like some of the other examples, Lightning Design System’s UI kit is divided into different parts as listed below:

Components
Typography
Icons
Color

Popularity Stats

Likes: 2.1K
Downloads: 65.5K

Image description

4. Uber Base Design System

Uber's Base Design System was created to promote a centralized library of reusable UI components for Designers and Engineers in Uber team. If you like Uber’s UI/UX and want to benchmark it, this is a good source to use.

Popularity Stats

Likes: 3.8K
Downloads: 70.4K

Image description

3. Atlassian Design System

One of the characteristics of Atlassian Design System is that the system is divided into a number of projects: one for components, design tokens, and foundations each. Also, the design systems kindly feature the ‘Get Started’ guideline to help the users to know how to use the design systems. You may refer to this to know how to write such guidance to share with your team. The links to each part of the design system are listed below:

Components
Foundations
Design Tokens

Popularity Stats

Likes: 2.8k
Downloads: 88.9K

Image description

2. Ant Design System

Ant Design System is a popular design system that has been used by many to create applications and websites across various industries. Different companies are using this design system for building products. Some examples include:

Ant Financial
Alibaba
Tencent
Baidu
Koubei
Meituan
Didi
Eleme

Popularity Stats

Likes: 6.6K
Downloads: 123K

Image description

1. Material 3 Design System by Google

Google's Material.io team created this Design kit with documentation and guidance for how to use the components and styles. This design kit is famous for its modern styling, adaptive guidance, and color. You may refer to how typography, icons, colors, and components are organized in this kit.

Popularity Stats

Likes: 12.3K
Downloads: 306K

These design system templates provide a solid foundation for product designers to create their own custom design systems. However, it's important to note that these templates should be used as a starting point, and not as a final product. Designers should customize and tailor the components and design tokens to fit their specific needs and brand identity.

Best Practices to Build Custom Design Systems in Figma
Then the question is ‘What are the best practices to build design systems?’ Building a custom design system can be a daunting task, but it is an essential step toward creating consistent and cohesive designs. Here are some best practices for building a custom design system in Figma:

  1. Define the purpose and scope of the design system
    Before start building up the design system, you should first determine what components and guidelines are necessary for the design system to achieve its objectives. To determine these, you may need to go through rounds of discussions and interviews with internal stakeholders.

  2. Use a modular approach
    To ensure the usability of the design system, it is recommended to break down the design system into smaller components. How small should the components be? You just need to make sure the components are small enough to be reused across designs.

  3. Create clear documentation
    It is important to document each component and guideline in the design system to ensure consistency across designs and to make it easier for others to use. Otherwise, a team may not adopt the design system.

  4. Collaborate with other product designers and developers
    Collaboration and feedback from other designers and front-end developers should be encouraged to ensure the design system meets their needs and is easy to use.

  5. Test and iterate
    Lastly, you should test the design system in different scenarios and iterate based on feedback to ensure it's effective and meets the needs of the users.

As these practices show, building and documenting design systems in Figma is not an easy task. That is why FUNCTION12 is developing new features related to design systems documentation soon. The features may include:

Automating design systems documentation based on Figma design input
Real-time sync between Figma design change and design systems document
Pushing components and design tokens in the design system document to Figma for reusability

With these features, we believe the process of creating and maintaining design systems will become easier and more efficient.

Final Words

In conclusion, design systems are a vital part of every designer's toolkit, and Figma provides an excellent platform to create them. By using the top 10 design system templates built in Figma and following the best practices outlined in this article, both product designers and developers can create custom design systems that will improve the consistency and efficiency of their design work. And with the upcoming release of the design systems documentation automation feature, design system builders will be able to take their design systems to the next level.

Credit to Design Systems for Figma

Related Posts

캡션을 입력해주세요

캡션을 입력해주세요

FUNCTION12 agrees to dev.to's policy on posts assisted by artificial intelligence.
This article was created with the help of AI.

Top comments (0)