How to start creating a design system that integrates with your organization

You're likely thinking of creating a design system. Perhaps it's for a specific application, or even more ambitiously, for your entire organization. Aiming for consistency across all applications. Reading this, I think you're on the right path because you are researching before you start.

When I started my journey to create my first design system, I had an idea that our team needed a guideline to create our custom components, and maybe start a component library. I was initially unsure of where to begin or how to implement the system and share it across two teams. On that journey, I had to overcome challenges, and it was a profound learning experience. However, to ensure a smoother journey for you, there are some essential questions you could ask yourself.

The value of a design system for an organization

Firstly, does your organization truly understand the value of a design system? It's crucial to recognize the benefits it brings, such as improved efficiency, consistency, and communication. A design system is not a luxury or something you do as a project aside. It's a strategic asset that can streamline your design and development processes.

Understanding whether your organization truly grasps the value of a design system involves a combination of direct questioning, observation, and analysis. Here are some steps you can take.

Engage in conversations with key stakeholders, product managers, designers, developers, and product owners. Ask them about their understanding of a design system and its benefits. Their responses can provide insights into their level of understanding and appreciation for such a system. Try to think about the benefits at each level of the organization and communicate them. Designers benefit from the fact that they have documentation for better communication with developers and vice versa. Product managers and product owners benefit from efficiency and development speed.

Look at how design decisions are currently made in your organization. If there's a lot of inconsistency, redundancy, or confusion, it could indicate a lack of understanding of the value of a design system. Try to find out the design-related issues that frequently cause project delays and if designers frequently create the same elements from scratch for different projects, it suggests that there's no system for reusing design components, leading to unnecessary work. Evaluate your organization's current design and development practices.

Implement a small-scale design system for a specific project or team. Monitor the results and feedback to gauge the organization's understanding and appreciation of the system. Since it's for a specific project or team, you don't need to cover every possible design element. Instead, focus on the components that are most relevant to the project or team in question. Identify the common and recurring design elements in the project.

These could include typography, colors, buttons, forms, icons, and other UI elements. Also, consider including some design patterns, such as how to display error messages or how to structure a page.

Once you've identified these components, create clear and detailed specifications for each one. This includes visual specifications (like size, color, and spacing) as well as usage guidelines (when and how to use each component). Once you've defined your small-scale design system's components, it's time to develop them. 

This could involve creating a library of reusable design assets, writing CSS styles, or even building a set of React components, depending on your team's needs and capabilities. Once the design system is developed you can start implementing it in the project or even better in the organization. Make sure all designers, developers, and other relevant team members are trained on how to use the design system and have access to all its resources.

Align your User Experience (UX) team, Product Owners (POs), developers

Secondly, how do you plan to align your User Experience (UX) team, Product Owners (POs), developers, and potentially other teams in the creation of the design system? Aligning different teams to create a design system requires a strategic approach that fosters collaboration, communication, and shared understanding. 

Begin by defining what you hope to achieve with the design system. This could include improving consistency, increasing efficiency, or enhancing user experience. Try to think about the following questions and involve key stakeholders to establish goals:

• What are you trying to achieve with the design system?

• When is the design system a success?

Try to make sure these goals are communicated clearly to all teams involved. It’s important to involve all stakeholders from the start, including representatives from the UX team, POs, developers, and other relevant teams in the initial discussions about the design system. The early involvement ensures that everyone has a say in the system's creation and feels a sense of ownership over it. 

Try to schedule regular meetings or workshops where all teams can come together to discuss progress, share ideas, and resolve issues. This ongoing collaboration helps to maintain alignment and foster a shared understanding of the design system.

And outline who is responsible for the creation and maintenance of the design system and who is in charge of the priorities. This clarity helps to prevent confusion and ensures that all tasks are adequately covered. You can also offer training sessions or resources to help all team members understand how to use the design system effectively. This support ensures that everyone is on the same page and can use the system effectively.

What to include in your design system?

Next, think about the components you wish to include in your system. What are the foundational elements of your design system? Where will the advanced visualizations and domain-specific UX elements fit in? These decisions will shape the character of your design system.

It's important to carefully consider the components to incorporate into your design system. Reflect on the foundational elements that will form the core of your system, as well as how the more advanced visualizations and domain-specific UX elements will fit into the framework. These decisions will play a pivotal role in shaping the unique character and functionality of your design system. In general, a comprehensive design system encompasses the following key elements:

• Components

• Patterns

• Standards

• Tools and Resources

• Documentation

Components

The specific components included in a design system may vary depending on the needs of a particular product or organization, but certain parts are often common to most design systems. Try to involve all key stakeholders to discuss the necessary components to include in the system. 

Here's a list of common components to include in the system:

• Color Palette: This includes primary, secondary, and any other supplementary colors used in the product, as well as different shades of each color.

• Typography: This includes the typefaces used, along with different weights, sizes, line heights, and letter spacing for other textual elements (headings, subheadings, body text, captions, etc.).

• Spacing: Guidelines for consistent spacing and layouts, which might include grid systems and rules for margins and padding.

• Buttons: Different types of buttons, with their various states (normal, hover, active, disabled), styles (primary, secondary), and sizes (small, medium, large).

• Forms: Form components such as text inputs, checkboxes, radio buttons, dropdowns, toggles, and validation messages.

• Icons: A set of commonly used icons.

• Navigation: Components such as menus, breadcrumbs, pagination, tabs, etc.

• Cards: Used to present information in a structured manner, including images, text, and any actions the user can take.

• Modals/Dialogs/Drawers: Pop-ups, alerts, and other types of overlays.

• Tables: For displaying data, with different styles and options like sorting or filtering.

• Lists: Both unordered and ordered lists, along with any nested lists.

Patterns

While the exact list of patterns that should be included in a design system depends on the specifics of the organization and applications, there are common patterns that often exist in design systems:

• Navigation Patterns: This might include patterns for primary navigation (like a top bar or side menu), secondary navigation (like tabs or breadcrumbs), and mobile navigation (like a hamburger menu or bottom navigation).

• Forms Patterns: This could include patterns for simple forms, complex multi-step forms, and forms with validation.

• Lists and Tables Patterns: For displaying data in an organized way, whether as a simple list, a complex table with search, filtering, sorting, or a grid of cards. 

• Interaction Patterns: These might include patterns for things like modals, tooltips, accordions, tabs, and dropdowns.

• Feedback Patterns: These include patterns to give feedback to the user, such as success messages, error messages, loading indicators, tooltips, and notifications.

• Empty States: Patterns that define what users see when there's no data to show, like no search results or no notifications.

• Authentication Patterns: This includes patterns for sign-up, login, and password reset flows.

Considering the inclusion of patterns in your system, with active participation from stakeholders, fosters consistency across applications. This approach also generates increased momentum for integrating the system into an application.

Standards

Central to any effective design system are the standards, encompassing aspects from color palettes and typography to accessibility guidelines. These standards serve as the foundational elements shaping user experience across various products and platforms. 

Far from being mere rules or restrictions, standards in a design system are powerful tools that foster creativity and ensure consistency. They provide a shared language, enhancing collaboration and communication among designers, developers, and other stakeholders. By outlining the appearance, behavior, and usage of design elements, standards remove ambiguity, allowing teams to concentrate on resolving complex design challenges. 

They play a pivotal role in boosting the efficiency of the design process, offering designers a set of guidelines, thereby reducing redundancy. This efficiency extends to developers as well, facilitating code reuse and alignment with design intent. 

Consider the specific standards your organization requires for a design system that will serve as a comprehensive guide for designers and developers during the design and development process. Here is a list of standards that you could include.

• Color Contrast: Provide guidelines for maintaining sufficient color contrast between text and background elements to ensure readability for users with visual impairments. Specify minimum contrast ratios based on WCAG (Web Content Accessibility Guidelines) guidelines, such as a minimum contrast ratio of 4.5:1 for normal text.

• Keyboard Accessibility: Ensure that all components and interactive elements can be operated using a keyboard alone, without relying on a mouse or touch input. Provide guidelines for keyboard focus styles, and tab order, and ensure that all functionality is accessible and operable via keyboard interactions.

• Screen Reader Compatibility: Design components and user interfaces in a way that is compatible with screen readers and assistive technologies. This includes providing appropriate semantic markup, labeling form fields correctly, and ensuring that interactive elements are properly announced to screen reader users.

• Content: These standards focus on the language and tone used in the product's content. They establish guidelines for writing clear, concise, and user-friendly content, including labels, error messages, tooltips, and other textual elements.

• Responsive Design: In today's multi-device landscape, responsive design is crucial. These standards provide guidelines for how components should adapt and respond to different screen sizes and resolutions, ensuring consistent experiences across devices.

• Grid and Layout: These standards define the grid system and layout guidelines for organizing components and content on screens. They ensure consistency in spacing, alignment, and hierarchy across different interfaces.

• Development and Coding: These standards guide developers on how to implement and use the design system's components. They may cover coding conventions, naming conventions, file structure, version control, and other technical considerations to ensure consistency in code quality and maintainability.

What tools and resources to include in your design system?

Consider what kind of tools and resources to include in the system. This is a crucial aspect that requires thoughtful consideration, taking into account the specific needs of your team and the requirements of the application(s) in your organization. To make informed decisions, here are several key factors to consider:Design Tools

• Code Frameworks and libraries

• Code Snippets and examples

• Version Control and Collaboration Tools

• Accessibility Testing and Evaluation Tools

• Asset Management, Distribution, and Release Management

• Training and Education Materials

• Design system Management Tools

Design Tools

Determine the primary design tools used by your team, such as Sketch, Figma, Adobe XD, or others. Include resources specific to these tools, such as design templates, style libraries, and component libraries. This ensures that designers and developers can easily access and utilize the design system within their preferred environment.

When your team uses Sketch as the primary design tool, ensure that all design files are accessible to relevant stakeholders, including developers. This can involve sharing design files through a centralized platform or version control system, such as Abstract or Zeplin, or granting appropriate permissions for file access. Encourage regular communication and involve developers in the design process, ensuring they are aware of any updates or changes to design files.

Or if the designers in your team use Figma, assure that all stakeholders have Figma accounts with the appropriate role and permissions. This allows designers and developers to collaborate effectively within the Figma environment. Ensure that relevant design files, components, and styles are shared across the team, making them accessible for implementation and reference.

By addressing the specific requirements of each design tool and ensuring that all stakeholders have the necessary access and involvement, you can foster a collaborative and efficient design and development process. This ensures that designers and developers can seamlessly access, utilize, and implement the design system within their preferred design tools, promoting consistency and cohesion across the entire workflow.

Code Frameworks and Libraries

Identify the programming languages and frameworks used in your development process. Include resources like CSS frameworks, UI component libraries, and code snippets specific to these technologies. This allows developers to efficiently implement the design system within their coding workflow. 

For example, design tokens are an effective way to share styling properties between developers and designers, ensuring consistency across different platforms and devices. They represent the lowest level of design detail, such as colors, typography, spacing, etc., and can be reused to maintain visual consistency.

The decision about where the source of truth for these tokens should reside depends largely on your team's workflow and the tools you use. If your designers are primarily driving the visual aspects and your design tools (like Figma or Sketch) support robust design token management, it might make sense for the source of truth to live within these design tools. From there, tokens can be exported into a format that can be consumed by the codebase.

On the other hand, if your developers are heavily involved in defining these visual aspects or if your design tools don't support design token management well, it might be more practical for the source of truth to live within the codebase. In this case, tokens can be defined in a format like JSON or YAML, and then imported into your design tools or directly consumed by your styling solution.

In either case, it's crucial to establish a clear process for managing and updating these tokens, ensuring that changes are synchronized between the design tools and the codebase. This might involve regular audits, automated synchronization tools, or a dedicated person or team responsible for managing the design tokens. Remember, the goal is to maintain consistency and efficiency in your design and development process. Choose the approach that best supports this goal in the context of your team's workflow and tools.

Code Snippets and Examples

Provide a collection of code snippets and examples demonstrating how to use the components, follow the standards, and implement the design patterns. These snippets can be in various programming languages and frameworks, catering to different development environments. 

Consider using tools like Storybook which can be invaluable. Storybook is an open-source tool that allows developers to create and showcase components in isolation, making it easier to understand how they work and how to use them. It provides a sandbox environment where components can be tested and tweaked without affecting the main application. But do your research. There exist more tools out there that could align better with your requirements.

Version Control and Collaboration Tools

Determine the tools your team uses for version control, collaboration, and project management, such as Git, GitHub, Jira, or Slack. Integrate the design system resources with these tools to ensure seamless collaboration, version tracking, and communication.

It's important to determine the tools your team uses for these purposes. For example, your team probably uses Git to maintain your codebase, so that could be a good place to maintain your codebase of the design system in a different repository.  

If your team uses Jira use that to manage tasks, issues, and milestones related to the design system's development and maintenance. Slack can serve as a communication channel for discussing design system updates, sharing feedback, and collaborating with all stakeholders. 

Accessibility Testing and Evaluation Tools

Consider including accessibility testing tools and resources to help ensure the design system meets accessibility standards. These tools can help identify and address potential accessibility issues, allowing your team to create an inclusive user experience.

Asset Management, Distribution, and Release Management

Determine how assets, such as design files, style guides, and code snippets, will be managed and distributed within your team and organization. Establish a centralized repository or platform, such as a shared drive, cloud storage, or a design system platform, where team members can easily access and retrieve the required resources such as design files, documentation, and code. Think about how to deal with new releases with breaking changes. Use guidelines to align with all stakeholders on how to implement updated elements in the system. 

Training and Education Materials

Provide training resources, tutorials, workshops, or learning materials to onboard new team members and educate them about the design system's usage, benefits, and best practices. This ensures a smooth transition and fosters a shared understanding of the system within the team.

Design system Management Tools

Using a Design System Management Tool offers several benefits that can greatly enhance the management and maintenance of your design system. Most of the resources and tools are features of a design system management tool. 

Here is a list of tools you can consider:

• UXPin

• Zeroheight

• Supernova

• Storybook

• Pattern Lab

A Design system from scratch or use an existing system

Then, consider whether you need a fully customizable design system or if an existing one could suffice. Both options have their merits and drawbacks. A customizable system offers flexibility but requires more resources, while an existing system can be more cost-effective but might not perfectly fit your needs.

An existing design system offers a comprehensive library of pre-built components, patterns, and guidelines that are ready to use. By utilizing these established resources, you can save valuable time and effort that would otherwise be spent on designing and constructing common UI elements from scratch. Leveraging the pre-built components, styles, and interactions provided by the design system accelerates the development process and significantly reduces the need for starting from square one.

Moreover, existing design systems that have an active and engaged community bring additional benefits. The community support provides valuable assistance, resources, and updates. By tapping into the collective knowledge, experience, and feedback, you gain access to bug fixes, new features, and improvements that are continuously shared and contributed. This collaborative environment ensures that the design system remains up-to-date, evolves with industry best practices, and addresses any issues or enhancements that arise over time.

Utilizing an existing design system grants you immediate access to a robust collection of components and guidelines, accelerating development and promoting consistency. Additionally, the active community surrounding the design system offers ongoing support, resources, and updates, keeping your product in sync with the latest industry trends and user expectations.

In my opinion, leveraging an existing design system as the foundation is a good strategy to add more value to the product and extend the system when required if you don’t have previous experience building a design system. Search for a design system that aligns with the requirements of your organization.

Conclusion

Remember, creating a design system for your team, multiple teams, or even your organization is a significant step, but you're not alone in this journey. With careful consideration and planning, you can create a system that brings immense value to your organization. Everything is alright as long as you try to see the design system as an important resource. You're on the path to creating something truly impactful. The alignment is more important than the system itself.