Design systems have become essential tools for modern-day UI/UX designers, streamlining workflows and ensuring consistency across digital platforms. When I began my career as a Product Designer in Berlin 8 years ago, the landscape was different – automation and component libraries were scarce. Fast forward to today, and the availability of design systems online has revolutionized the design process. For instance, in a recent collaboration with soniq GmbH, a startup in the cleaning industries sector, I witnessed firsthand how a design system can transform operations and management through a SaaS platform.
Design systems are comprehensive collections of design elements, patterns, guidelines, and principles used to create and maintain consistent, scalable, and efficient UI/UX designs. They act as a single source of truth, providing a unified framework for collaboration among designers, developers, and stakeholders.
1. Consistency: They maintain visual and functional consistency across digital touchpoints, ensuring a cohesive user experience.
2. Efficiency: By providing reusable components and patterns, they streamline the design and development process, saving time and effort.
3. Scalability: As digital products evolve, design systems provide a scalable framework for managing design assets and accommodating changes.
4. Collaboration: They promote cross-functional collaboration by establishing a shared language and reference point for all team members.
5. Accessibility and Inclusivity: Design systems enable teams to incorporate accessibility considerations into the design process, ensuring products are usable for all users.
Moreover, design systems play a crucial role in branding and product design. They help maintain brand consistency and adherence to design guidelines across various products and platforms, reinforcing brand recognition and instilling trust in users.
During my last collaboration with soniq GmbH I found very useful to brand an entire Design System with Token Studio. The entire library was branded in a couple of working days and with automation all the components were reflecting the new brand look&feel.
When I started the project I did some internal investigations and while talking with the team I found out that due to the presence of multiple non-centralized libraries of components (approximately 21 mixed and incorrectly branded component libraries files), the Figma files organization and the collaboration with the IT team was very difficult and not structured.
We opted to conduct thorough market research to propose the integration of a unified library called Ant Design. This powerful React-based component library is exceptionally easy to customize through Figma Tokens and offers limitless possibilities for use.
We organized our project by dividing the tasks among designing the new navigation, main layouts, branding the components, and creating new necessary components based on the new design system.
Integrating a unified design system were able to achieve a great success by decreasing the number of variables and future maintenance, rebranding the entire product and migrating 40+ files
Figma Libraries performance improvement +90.48%
(variables reduced from 21 to 2 Libraries)
Styles variable performance improvement +82.31%
(variables reduced from 605 to 107)
Components performance improvement +66.67% (variables reduced from 3000 to 1000)
In conclusion, design systems are indispensable for achieving design excellence and driving business success in today's digital landscape.
They empower teams to create cohesive user experiences, enhance brand recognition, and streamline workflows.
As technology continues to evolve, investing in design systems will be essential for staying competitive and meeting user expectations.
When approaching a new product migration or product rebranding I definitely suggest to investigate with the internal Design and IT team about which are the current pain points in terms of Figma files structure, components inconsistency and variables, components integration with FE.
On top of this I also suggest conducting thorough research to identify the most suitable design system for addressing specific challenges that were previously defined, and using a language compatible with the tools adopted by your company's IT team (whether React or others).
