Design Systems Made Simple: Your Guide to Getting Started with New Products
Daniel Birch UX Strategist
19+ years of UX Strategy + design for digital experiences, web businesses serious about results. Award-winning UX speaker & mentor.
Are you ready for your dose of UX awesomeness in your mailbox this week, stay tuned—exciting content is here!
?
Let's get into it,
?
In today's article:
?
Best regards, Dan
How to Plan Your Design System for a New Product
Having built many products from the ground up, I’ve learned that a well-organised design system can save an incredible amount of time. Currently, we’re in the midst of developing a new product with a fresh design system, and this experience has reminded me just how essential it is to get it right from the start.
But first, for those unfamiliar, a design system organizes your design styles, fonts, libraries, and components—usually in tools like Figma. It’s not just about visuals; a good design system will have code libraries that developers can use to maintain consistency. Examples like Google’s Material Design or Apple’s Design System are well-known standards.
The goal? Consistency, speed, and alignment. When changes happen, they update across your designs globally. As designers, we lean on components to speed up our work while keeping everything unified.
Our Process for New Products
Before we move into high-fidelity designs, we map out customer journeys, user flows, and key user stories. At this point, we usually have sketches or wireframes to guide us on the layout.
From there, we source a design system that aligns with our product and development needs. We recently helped UNSW restructure their design system, and I can’t stress enough how crucial taxonomy and file layout are. It can be the difference between an efficient, streamlined design process and one that drags. Structuring your Figma file and libraries properly will keep things moving fast and organised.
Picking the Right System
When choosing a design system, consider one that matches your preferred codebase. There are thousands out there! For example, AntD works well for both mobile and desktop, while Telerik is great for complex tables. It’s key to match your choice to your development stack—whether it’s React, Flutter, or Bootstrap, each has its own design systems and libraries. Check out a collection of Figma design systems here.
?
Customising Your System
Once you’ve installed your base design system in Figma, review what’s missing. When we work on new products, we often need to mix and match—like how AntD doesn’t cover all the elements we needed for dashboards, so we pulled in components from another system to fill the gaps. The idea is to build a custom solution that fits your product perfectly.
Conclusion From personal experience, I’ve seen how a thoughtfully structured design system sets the stage for success. Whether it’s building from scratch or refining an existing system like we did for University NSW, the way you organize and customize your system directly impacts how efficient or slow your design process will be. With the right tools and structure in place, your product will come to life faster and with more consistency.
领英推荐
Client spotlight
Retail Edge needed a simple store and a fast, responsive website, Webflow and ECWID made the perfect combo!?
The best from the web
A compilation of top-notch UX insights and advice from around the internet
Miro launches new product project space
Miro has launched a new space specifically for product teams, I, for one, am excited to see if this will remove the need for other PM tools. Check it out here.
The new friendlier face of AI chat bots
The team at The Verge discusses Microsoft’s new Copilot updates, its friendlier chatbot approach, and what an AI companion should actually do for users. ?View the video
Does your digital experience need help?
Take advantage of a FREE mini UX audit
Limited free 45-minute UX audits for web or digital products.
Included in this offer:
As always, if I can be of service, feel free to grab some time with me.