Building Design Systems

A design system is a comprehensive guide to the visual and interactive elements of a brand's identity, including its color schemes, typographies, interfaces, and even animations. It helps maintain consistency and streamline design across different platforms and projects and can be thought of as a single source of truth for a brand's design language.

There are numerous other benefits to having a design system in place:

• By reusing elements from a standardized component library, designers can accelerate the design process. This saves time and resources across different projects.
• Design systems ensure the user experience is consistent across all products. This is crucial in building trust and recognition with users.
• They help improve collaboration among design teams. Everyone works with the same set of guidelines, ensuring a unified approach.
• They make it easier to update or add new features across all platforms simultaneously.
• By incorporating accessibility guidelines into the design system, designers will be able to ensure that their products are usable by as many people as possible.

The atomic design framework, proposed by Brad Frost, is a method that helps designers build robust design systems. It's like constructing a building, starting from the smallest pieces and working up to the full structure.

According to the framework, a system can be broken down into:

• Atoms: Atoms are the basic building blocks of your design, just like bricks in a building. Colors, typefaces, spacing, buttons, inputs, or any other small, indivisible UI elements represent atoms.
• Molecules: Just like how bricks combine to form a wall, atoms combine to form molecules. A molecule might be a form label with a search input and a button, creating a search bar.
• Organisms: Walls and other components come together to form rooms or organisms. In design, this could be a header consisting of a logo (atom), a navigation menu (molecule), and a search bar (molecule).
• Templates: Rooms come together to form the layout of a floor, which can be compared to a design template that lays out a page structure but doesn't contain the actual content. It's like an empty floor plan of a building.
• Pages: Lastly, we fill the floor (template) with people and furniture (content), creating a page. This is a specific instance of a template filled with unique content, showing what a UI will look like during use.

Consider an audit as a design check-up. It's like taking apart a watch to see how the individual pieces interact to tell time. When auditing your existing product, you're analyzing all design elements, from colors and typography to buttons, icons, and layouts.

The goal is to catalog these elements to identify inconsistencies and redundancies. You may discover multiple styles applied to one component, like several different button designs. Here, you'll decide on a standard style to use consistently moving forward.

An audit also helps identify missing elements. Perhaps there's a need for a new component that doesn't exist yet in your product. The outcome of this audit forms the basis of your design system. It provides a clear overview of your current design landscape, showing you what to keep, what to modify, and what to create anew. Remember, it's a crucial first step in creating a comprehensive, efficient, and effective design system.

By studying other design systems, you can glean valuable insights into what works and what doesn't in terms of design principles, structure, and application. This research can spark ideas and offer direction for your design system.

• Atlassian's design system is top-notch. It provides everything a design team could need, including component and pattern libraries and in-depth details on its brand and style foundations.
• Salesforce's Lightning Design System emphasizes its design principles and offers a comprehensive, searchable resource with all necessary assets. It includes articles, downloads, and FAQs to support designers.
• Google's Material Design is known for its simplicity and clarity. It's divided into three main parts: Principles, Components, and Theming. This structure helps designers understand Google's design philosophy and explore when to use different components and how to tailor designs appropriately.

Remember, every design system is unique. Your goal isn't to duplicate another system but to learn from existing ones.

Design principles are the commandments of your design universe. They guide your decisions, keeping your designs consistent and purposeful. To formulate effective design principles for your design system, follow these steps:

• Understand your brand and users. Start by clearly defining your brand's personality and understanding the needs and behaviors of your users. Your design should embody the brand's ethos and meet your users' needs.
• Keep it simple. Good design principles are easy to understand and actionable. They should be short, memorable, and guide clear design decisions.
• Be specific. Instead of vague principles like "make it user-friendly," aim for specific ones like "ensure all text is legible at a comfortable reading distance."
• Ensure it's comprehensive. Your principles should cover different aspects of design, such as aesthetics, usability, functionality, and emotion.
• Involve your team. Formulating design principles should be a collaborative process. Input from diverse team members can help create a well-rounded set of principles.

Color and typography are two vital elements of your design system. They help establish the look and feel of your brand, ensuring consistency across all designs.

• Creating a color system: Start by defining your primary brand colors, which typically include a primary, secondary, and possibly tertiary color. You can then create shades and tints of these colors for use in different contexts. In Figma, you can easily create color styles. Select an element with the color you want, click the "Style" button in the right panel, then "+,” and name your color.
• Creating a typography system: Typography involves more than just selecting a font. You'll need to define font styles for different text elements, like headers, subheaders, body text, and captions. For each element, consider size, weight, and line spacing. In Figma, select your text element, click the "Style" button in the right panel, then "+,” and give your text style a name.

By setting up these styles in Figma, you ensure consistent use of colors and fonts across your designs. Just select an element and click the appropriate style from the right panel. And if you ever need to adjust a color or font, changes to the style will apply everywhere it's used, keeping everything in sync.

A well-crafted icon set and grid system serve as a solid foundation for your design system in Figma. They help ensure visual harmony and intuitive navigation across all your digital interfaces, improving the overall user experience.

• Iconography refers to the use of icons within your design system. Icons are small graphical representations of a concept or function. They help users understand and navigate the interface more intuitively. In Figma, you can create an icon set that matches your brand's aesthetic and usability principles. Once designed, these icons can be saved as components, allowing you to reuse them across different designs, promoting consistency.
• Grid systems, on the other hand, are frameworks used to align and organize elements on a page. They help maintain balance and visual harmony in your designs. In Figma, you can set up grid systems to provide guidelines for where to place elements. You can define columns, rows, and gaps to create a structured layout. Once set, this grid can be applied to any frame, aiding in the consistent positioning and sizing of elements.

Imagine you're creating a design in Figma. A component library is like your toolbox, filled with parts like buttons, form fields, or navigation bars. When you need one of these parts, you just reach into your toolbox and pull it out. They're all standardized, meaning they look and work the same way every time.

This consistency is vital because it creates a more predictable and intuitive user experience. When users see the same elements, like buttons or fields, acting the same way across your design, it's easier for them to understand and use the product.

Consistency also makes your product look professional and accelerates the design process. Designers can reuse components without the need to recreate them each time. Suppose you decide to alter the color of a button. In a component library, you update the component, and the change is automatically reflected everywhere that button is used. This not only saves time but also ensures the entire product evolves coherently when changes are made.

A design pattern library offers tried-and-tested solutions to common design problems. It covers not just looks but also functionality and user interactions.

Let's say you're designing a website or an app. You might encounter familiar challenges:

• How to show lots of information without overwhelming users?
• How to guide users to complete a task like signing up?

That's where the pattern library comes in, offering proven “recipes” to solve these problems, like drop-down menus, carousels, or clean forms.

A pattern library makes designing faster and smoother. No need to reinvent the wheel each time you meet a common problem — pick the best solution from your library. It's a powerful tool for making better, more consistent designs more quickly.

Don't confuse a design pattern library with a component library. The latter contains all the individual, standardized pieces (or components) like inputs, buttons, shadows, and links that you might need to create a design. On the other hand, a design pattern, such as a registration form, uses these components to provide a standard solution to a common design problem. So, when you're creating a registration form (a pattern), you'll use components from your component library.

Accessibility is the key to making your designs friendly to everyone, regardless of their abilities. So, when we say "accessibility," we're talking about ensuring your design works well for all users, including those with disabilities or impairments.

Imagine you're designing a building. You'd want to include ramps for folks in wheelchairs, braille signs for the visually impaired, and clear signage for those who may have cognitive difficulties. The same goes for your designs in the digital world. You need to consider things like:

• Color contrast: Are your colors distinguishable for people with color blindness?
• Font size: Is your text big enough for those with vision impairments to read?
• Navigation: Is your site or app easy to navigate for someone who might not be able to use a mouse or touch screen?

By adding these accessibility elements and guidelines to your design system, you're making sure your designs are inclusive and easy to use for everyone. In turn, you're improving the user experience for everyone.