Do I Need a Design System in 2024? A Guide for UX/UI Designers
You may be wondering, “Should I use a design system for the project?”, or “Which one to choose?”, or “What are the difference?” and many question you might have.
Over the past 6 months I’ve researched many design systems made with Figma, delving into both free and paid options available on the market. I’ve decided to share what I’ve learned..
I don’t talk about basic stuff like “What is design system?” and don’t like bla bla “soup” article. Let’s get straight to the point.
The question of whether you need to use a design system has a complex answer: ‘Yes’ and ‘No’. It all depends on the project at hand.
When you don’t need a design system?
If you’re creating a landing page, a web page for marketing purpose, or a company’s website, you might NOT need a design system. You can simply create your own components or purchase a ready-made Figma template.
If you are creating a simple app, such as a to-do list or an application form for submitting data, or any app where users perform small tasks, you might not need a design system initially. However, if the project expands with additional functionality, you can consider re-designing it by purchasing any design systems.
When you should start with design system?
For web apps such as CRM, ERP, editor tools, or any management software with multiple pages and forms, a design system is essential.
(We made a Design System specifically for those kind of projects: www.finalui.com )
It’s valuable to invest in a design system rather than creating one from scratch. Why? Because crafting each component and considering their states — such as focus, hover, disable, and active — along with concerns about accessibility, is time-consuming. Without proper design system you will loose consistency. developers will become frustrated by implementing too many colors, sizes, paddings, and margins.
There’s a saying, “If the first button of one’s coat is wrongly buttoned, all the rest will be crooked.”
The same is true for UX and UI designing. For instance, during my career, I made a big mistake. When my team was designing an inventory management app, I chose to use forms with floating labels. It looked very compact, similar to an input form as per material design. But, when it came to adding a description to input and error/success hints, I realized it was a mistake to design input with a floating label for large forms that required a description and hint for every input or textarea. Later I had to re-create all from start. But it was costly… Anyways…
So, don’t rush into designing pages to show your “productivity” to your boss or manager. You have to begin with ideation and design thinking, sketching on paper or whiteboard.
Once you have decided to design the UI, first try to find a suitable design system that can meet your needs. I’m specifically referring to web apps, which are applications designed to perform specific tasks or provide solutions, in other words, Softwares (SaaS), Web applications. I’m not talking about landing pages.
So how to choose correct design system for Figma?
You should consider several factors. Explore preview file (aka Figma link) and check file carefully page by page.
- Check list of components you need. Are they exist?
- See example templates (is there any layout related to your future app?)
- Check how it is structured (atomic or encapsulated)
- Does it have light/dark modes?
- Does it have component states, like error, success, warning, focus?
- Is it made for web app or Saas products, or just landing pages?
- Does it have basic building blocks like navbar, sidebar and widgets?
- Examine Documentation and Support
- Consider Updates and Maintenance: Evaluate how frequently the design system is updated and maintained.
The list of recommended Design Systems for UX/UI Designers to create better interfaces for web in 2024:
1. Final UI — Design System & UI kit
Download: https://finalui.com
Design System for Figma to create effective SAAS web apps, MVPs, desktop applications. Well-tested design system based on modern best practices.
2. AlignUI Design System
Download: alignui.com
The design system lightning-fast.
3. Disy — Saas UI Kit and Design System
Download: https://disy.design
Disy is a minimalist Design System/UI Kit to help you build human-centered product experience.
4. Tetrisly Design System
Download: https://tetrisly.com
Design System Ecosystem (React version available)
5. Keep Design System
Download: https://keepdesign.io
Create beautiful and consistence user interface with ease.
(Available React version)
6. Premium Pixels — Design System & UI kit
Download: https://premiumpixels.com
The ever-expanding design system & UI kit for Figma
7. Prime Design System Kit
Download: https://primedesignsystem.com
For Pros, and the ones who want to become experts.
8. Stratum UI design kit
Download: https://stratumkit.com
It’s stunning what you can do with just one Figma library
9. Reshaped — Design System for React & Figma
Download: https://reshaped.so
Professionally crafted design system in React & Figma for
building products of any scale and complexity
10. Module — Design system that works
Download: https://modulesystem.design
Build, prototype and customize any design. Neat and simple, just in minutes
11. Gravity UI
Download: https://gravity-ui.com
Build modern interfaces with the Gravity design system and libraries
(JS version available)
12. Blank Design System
Download: https://useblank.design/
Create top-notch websites and apps in minutes, taking advantage of Blank
13. Space Design System for SAAS
Download: https://spaceui.design/
Design System that facilitate the creation of visually stunning designs.
14. Ant Design System for figma
Download: https://www.antforfigma.com
Design and develop Ant Design projects faster than ever
(Available for React)
15. UI Prep
Download: https://uiprep.com
Figma Design system UI Kit to design quickly & confidently
Follow for more articles about UX, UI, Web design, Design Systems
