Why we need a design system?
- Consistent design pattern lets users learn faster and reduce confusion to recognise and use each component;
- Reusable, pre-defined modules save time for development even without a complete design
|Ant Design||Web, React Native|
|Material Design by Google||iOS, Android, Flutter, Web|
One of the most popular React UI framework and relatively complete pattern library for enterprise applications.
- Detailed guidelines backed by design principles;
- Organised and nested components for common situations and states;
- Support data visualization and animation, powered by AntV and Ant Motion;
- ⚠️ Some docs and resources are not fully translated from Simplified Chinese into English
The Pro version provides advanced UI solution with higher level components like admin dashboard, charts, search box, notification badge and count-down, and it’s FREE!
Their Sketch plugin, Kitchen, is a powerful tool combining Anima and InVision Craft, with handy features like icons library, auto-layout, data population, colour palettes and module generator that helps designers apply Ant Design components on the fly.
Material Design by Google
A leading visual language inspired by the physical world and also inspired the industry to build good design system. The level of detail in guidelines and specifications are obviously worth learning.
- Textbook well-detailed guidelines;
- Includes fundamental components;
- Intuitive transitions to improve the experience;
- Shaping your brand with customizable themes;
- Cross-platform development;
- ⚠️ Exclusive components like the Floating Action Button, Backdrop, Chips look stylish, but not very useful on other applications;
- ⚠️ Elevations (cast shadows) – too many levels make difficult to follow
With Material Themes and the recently introduced “shape” customization, designers can express the brand better. However, still, it is not very creative and flexible to do it with a straight specification. Designers deeply follow the specs might generate another Google-like design lacking individuality.
Other Design Libraries
– handpicked design resources that Sketch users love
Neatly organised design system with lots of resizable, nested components, as well as customizable colour schemes and text styles in 3 themes – Standart (light), Charcoal (dark) and wireframe. It is designed and ideal for making dashboard UI, with fundamental templates and less common ones like Kanban board, file finder, Gantt chart, timeline, video editor, WYSIWYG HTML editor that fits for different use cases.
Components are grouped in categories and embed in templates. Since it has many templates in each theme, the Sketch file is quite bulky in size.
Velocity by InVision
Responsive dashboard UI kit for desktop, tablet and mobile, building with the most popular tools – InVision Studio, Sketch and Photoshop.