Hi! If you're interested in UX/UI design, you've probably come across terms like design system and framework. In this article, I'll explain what these concepts are, the differences between them, and how to effectively implement a design system into a framework. Let's dive in!

What Is a Framework?

A framework is essentially a skeleton or structure that simplifies the creation of applications or websites. It acts as a set of tools and libraries that accelerate the development process by offering ready-made solutions to common problems. This means developers don't have to write code from scratch every time.

Examples of Popular Frameworks:

1. React: A JavaScript library for building user interfaces.
2. Angular: A JavaScript framework for building web applications by Google.
3. Vue.js: A progressive JavaScript framework for building user interfaces.
4. Bootstrap: A CSS framework for rapid prototyping and styling of websites.
5. Laravel: A PHP framework for building web applications.

The Importance of Defining Colors in a Framework

Regardless of which framework is used, it's crucial to define your own colors before starting work. Otherwise, the default colors applied in the framework will be used, which may not align with your brand's visual identity.

Each framework has a theme or skin that sets basic styles like colors, typography, and spacing. Instead of using the default colors, you should override them with your brand's colors or those defined in your design system.

Unifying Styles When Using Multiple Frameworks

If the team uses several frameworks in a project, it's important to ensure the CSS is consistent everywhere. This means setting the same styles across all frameworks. In practice, this involves defining common styles that can be applied universally, ensuring a cohesive look and feel throughout the application.

What Is a Design System?

A design system is an organized and coherent structure of components, patterns, principles, and tools designed to guide and optimize the design process within a company or project. Its goal is to ensure visual, functional, and user experience consistency across all products and services of a brand or entity.

What's Inside a Design System?

1. Reusable Components & Tokens: This includes elements such as color palettes, typography, iconography, components, tokens, and more.
2. Design Patterns: Proven and efficient solutions to common design problems, including screen designs, workflow patterns, interactions, and other solutions that have demonstrated effectiveness in improving usability and user experience.
3. Design Principles: Established guidelines and principles that inform design decisions, covering aspects such as accessibility, readability, visual consistency, and design scalability.
4. Tools and Documentation: This includes digital tools like design kits, component libraries, and design management systems.

Why Do We Need a Design System?

Implementing a design system brings numerous benefits:

• Consistency: Ensures that all products and services of a brand have a consistent appearance and functionality, reinforcing brand identity.
• Design Efficiency: Enables design teams to work more quickly and effectively by providing resources and solutions.
• Scalability: Facilitates the expansion and evolution of products and services by providing a solid and adaptable design foundation.
• Interdisciplinary Collaboration: Promotes collaboration among multidisciplinary teams by providing a common language.

Key Benefits:

• Reduce Time and Effort: Saves around 60% of time in new features (design, development, testing).
• Micro-Frontends (Modularity): Simplifies the creation of modular applications.
• Increase Tech Performance and Automation: By reusing elements, you enhance performance and automate processes.
• Faster Time-to-Market: Increases iteration speed and accelerates product delivery.
• Reduce Development Costs: Less time spent recreating the same elements.
• Reduces Vulnerabilities: Proven components are more reliable and secure.
• Reduces Tech Debt: Minimizes outdated or inefficient code.

Enabling Responsive and Adaptive Design

A design system allows for the creation of interfaces that are:

• Responsive: Adaptable to different screen sizes (desktop, tablet, mobile web).
• Adaptive: Supporting different text directions (LTR - left-to-right, RTL - right-to-left) for languages like Latin, Cyrillic, Arabic, and Asian scripts.
• Accessible: Compliant with accessibility standards (A11y standards).

Component Usage Analytics

Design systems often include analytics tools that show how components are used. This helps in:

• Optimizing Components: Removing unused or rarely used elements.
• Understanding User Needs: Identifying the most popular features to focus on improving them.
• Better Development Planning: Deciding which components require updates or additional features.

How to Implement a Design System into a Framework

Implementing a design system into your chosen framework might seem complex, but here are some steps to guide you through the process:

1. Define Tokens and Variables

Tokens are basic values like colors, font sizes, or spacings that can be easily applied throughout the project. Using tokens ensures consistency and easy modification of styles in the future.

root {
--primary-color: #1a73e8;
--secondary-color: #ff5722;
--font-size-base: 16px;
}

2. Create a Component Library

Use the framework to create reusable components like buttons, forms, or cards. Ensure they align with your design system guidelines.

3. Utilize Tools Like Figma

Many design systems are prepared in tools like Figma. You can import ready-made components and styles from Figma, which can be used or adjusted to the currently implemented framework, significantly speeding up the process.

4. Document Everything

Good documentation is key to success. Describe how to use components, the style guidelines, and how to implement different elements.

5. Test and Iterate

Regularly test your components in different scenarios and on various devices. Collect feedback from the team and users to continuously improve the design system.

Summary

As you can see, if a team within a company implements a design system on the most popular framework, they should still have defined tokens that can be copied everywhere. It would be beneficial if each component had the ability to copy its CSS. Usually, there are already prepared components and styles in Figma that can be used or adapted to the currently implemented framework.

Implementing a design system is an investment that pays off in terms of consistency, efficiency, and a better user experience. I hope this article has helped you understand what a design system is, how it differs from a framework, and how to effectively implement it in your project.

---

For more information, you can read more on the NN Group website at: https://www.nngroup.com/articles/design-systems-101/