These design system templates provide a solid foundation for product designers to create their own custom design systems. You may refer to how typography, icons, colors, and components are organized in this kit. This design kit is famous for its modern styling, adaptive guidance, and color. Google's Material.io team created this Design kit with documentation and guidance for how to use the components and styles. Different companies are using this design system for building products. The links to each part of the design system are listed below:Īnt Design System is a popular design system that has been used by many to create applications and websites across various industries. You may refer to this to know how to write such guidance to share with your team. Also, the design systems kindly feature the ‘Get Started’ guideline to help the users to know how to use the design systems. 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. Popularity StatsĪtlassian Design System #3. If you like Uber’s UI/UX and want to benchmark it, this is a good source to use. Uber's Base Design System was created to promote a centralized library of reusable UI components for Designers and Engineers in Uber team. Just like some of the other examples, Lightning Design System’s UI kit is divided into different parts as listed below: If you are on the team that builds Salesforce Lightning apps, this would be the right reference to look at. Salesforce's Lightning Design System includes the resources to create user interfaces consistent with the Salesforce Lightning principles, design language, and best practices. Like Atlassian Design System, the kit is divided into different parts including: Shopify's Polaris Design System is the UI kit that provides all the components, styles, and icons used when designing Shopify admin. If you have any part in creating a Teams app, this is definitely the right reference to use. 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. The Microsoft Teams UI Kit includes UI components, templates, best practices, and other resources for creating Teams app. 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Ĭhakra UI is another popular UI kit that many designers take as a reference for their works. If you are planning to develop an app to register inside Airtable, this is a good kit to try. Custom Apps UI kit by AirtableĪirtable built this UI kit for the product makers to build apps on top of Airtable. Their design systems toolkits are available in different themes:Ĭustom Apps UI kit by Airtable #9. Thanks to Carbon’s open-source mission, this open-source library was published publicly in the Figma Community. By creating a living library of IBM Design Language patterns and Carbon components, IBM expected their designers, developers, and teams to boost overall productivity. IBM created Carbon Design System to support the adoption of Figma across IBM. So here are top 10 Design Systems references built in Figma. 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. 10 Figma Toolkits for Design Systems Reference In this article, we will take a look at the top 10 design systems templates built in Figma that are available to designers. Figma has become a popular tool for building design systems because of its collaborative features and its ability to create responsive designs. They are a collection of reusable components, guidelines, and best practices that help designers create consistent and cohesive designs. Design systems have become an essential part of every designer's toolkit.