Design System: How to Effectively Create & Implement (2023)

Keeping user experience and user interfaces consistent across the applications in your product is challenging. The presence of a design system alone is not enough to ensure alignment. Establishing a process to connect the design system with its implementation and distribution is key to achieving its ideals and benefits.

With a design system spec in hand, you have thefoundationin place for a thoughtful and consistent user experience across the digital touchpoints of your product. In order to realize these benefits, however, there’s more work to be done; the abstract must become concrete. Specifically, your product team must connect theabstracteddesign system specification to theconcretecode that comprises the user interfaces across your product. Absent this connection, the ideals of your design system are likely to remain only ideals, isolated and of little help to the reality of the users of your product.

Unfortunately, implementing a design system is not quite as simple as creating said design system, handing developers the design files, and turning them loose to code. A process of this nature increases the likelihood that the interfaces coded in your product fail to be aligned with the design system your team has specified.


Key characteristics of a solid design system process

There is not a single correct process to implement and maintain a design system, it will vary from organization/product to organization/product. However, there are some common characteristics a successful process should look to incorporate. Any process you put into practice should be: collaborative, comprehensive, and adaptable.


Collaborative

(Video) 5 Best Design Systems and How to Learn (and Steal) From Them

First and foremost, your process needs to becollaborative. Most product development teams have groups of people responsible for different things; user experience (UX), design (UI), development, project management, etc. It sounds obvious, but to successfully implement a design system, these groups need to work closely together. Adding some structure to how and when that collaboration occurs, via process, puts the framework in place for necessary collaboration to occur.

Your user experience and user interface experts have likely invested significant time and thought towards designing the components of your design system, but despite best efforts, documenting these nuances for someone else to implement is never foolproof. Even when using modern, best in class, design mockup and prototyping tools, important details are inevitably lost. UX and UI designers are, by trade, not developers, meaning certain technical aspects will not be considered in the design. Information needs to flow both ways between these groups. The path to implementation needs to be a collaborative one between designers and developers. This ensures that what is implemented stays true to the intent of the designed user experience. The collaboration works both ways; inevitably there will be user experience considerations that arise during implementation, states that were not accounted for in design, edge cases, etc., and developers will benefit from collaboration points with designers to find the best solutions possible. Your process needs to support these types of collaborations.


Comprehensive

The next key characteristic necessary for a successful design system implementation process is that it becomprehensive. That is, it needs to cover the full life cycle from design inception to theuse of the coded components in your applications. You’ll need to map out these steps based on your product team, both to ensure the steps cover the complete life cycle, and to understand what groups of your product team should own and participate in each step.


Flexible

And finally, as with most successful processes, yours needs to be rigid and repeatable enough to make things easier and more efficient for your team, butflexibleenough to handle iteration and improvement. As you put aprocess into practice, inevitably you’ll hit speed bumps. Don’t put yourself in a position you can’t iterate and improve.

(Video) Build it in Figma: Create a Design System — Foundations

Again, the process you use to implement a design system will need to be tailored to your team and product. It may be as simple as connecting discrete processes you already have in house (scrum sprints, design sprints, etc.). Whatever you end up with though, the characteristics just discussed should be present.


A 9 Step Plan for Implementing a Design System

In an effort to ground the ideas discussed so far, let’s take a look at an example process for implementing a design system.This is just an example of a process you could use, please do not think of this as a magic solution for your organization and product – you will need something that fits your specific situation.

With that disclaimer out of the way, let’s move on to the example. The diagram below outlines one particular design system implementation process that we have used with our clients and their internal teams. Typically this process fits into a larger process of software development (scrum, kanban).

Note that standard flowchart shapes have been used in the diagram (terminators, processes, decision).

Design System: How to Effectively Create & Implement (1)

The intent is that the above process would be used, from design idea to distribution of code, for any element of a design system that warranted the coding of a reusable component for use in your digital product ecosystem. The process can be repeated for subsequent changes to an existing design system element as well. Also worth noting, what is proposed above is a process to be used within larger processes or whatever the product development workflow is in use at your particular organization.


Let’s walk through the steps/shapes on the diagram left to right:

(Video) How to connect your design system to engineering workflows

  1. Inception:The starting point is the idea/need for a new element, or change to an existing element, in your design system – this tends to look different at different organizations. The starting point could also be you have an entire design system you want to put into code and get into your interface.
  2. Define requirements:Next the idea/need needs to be fleshed out into requirements. We recommend this process be collaborative, including representatives from UX, UI, and development, to ensure the requirements are realistic. Note the requirements at this point need not be overly verbose; they will almost certainly evolve in subsequent steps. The goal is to define the problem you are trying to address and the requirements of the solution.
  3. UX design:Next the UX team will tackle modeling a solution that meets the requirements. This often takes the form of wireframes, paper prototypes, or clickable prototypes. Typically this step is iterative and involves areview from the product manager/owner, as well as representation from the development team to ensure feasibility. Usually, at this stage, the solutions being modeled are not visually polished in regards to “look and feel”. Spurred by collaboration, often additional requirements will emerge and/or the original requirements will alter.
  4. UI design:Once basic UX is settled, a similar process step will repeat for the UI design to create the visual polish. This step again is likely an iterative process involving review and approval from the product owner/manager, as well as development. Requirements usually continue their evolution. In some product teams, steps 3 & 4 are merged.
  5. Handoff:Now things are ready to handoff to the development team for implementation. A collaborative session should occur where the UX/UI work completed so far can be reviewed in detail. This includes going over all the artifacts created – any written requirements, as well as any mockups, prototypes, etc. – as well as communicating any nuance not captured therein. Ideally, this is not the first time the developer(s) are seeing these artifacts so they can come prepared to ask questions. Involving the development team early and often in previous steps goes a long way towards avoiding big surprises and minimizing the amount of time required for this step. The solution being proposed here has already been vetted by key disciplines, ensuring its feasibility in the final design system.
  6. Develop:Next, the developers code the solution to the specifications provided. This step also tends to be iterative, usually including functional QA. Because predicting the future is hard, there will inevitably be questions on requirements, edge cases not thought of, etc. Collaboration with the UX/UI teams is again crucial to a successful outcome. Don’t make this step a black box as you will probably be dissatisfied with the output.
  7. Deploy:Once development is complete, the resulting implementation (code) needs to be deployed somewhere the UX/UI team can access it to review the functional result. Often acomponent libraryfills this role (more on that below).
  8. Visual QA:The visual QA step is a chance for the UX/UI disciplines to review the resulting implementation to ensure it satisfies the requirements and intent of the solution proposed. If the implementation step was not a black box, feedback at this juncture tends to be minimal. If there is feedback, developers handle those changes, redeploy, and another review occurs. This repeats until required approvers agree the implemented (coded) solution is acceptable.
  9. Release:Next the coded components are released for inclusion in the user interfaces of your digital product, usually via a tool that handles distribution of code packages (more on that below).

Hopefully walking through the example process gives an idea of how to create a collaborative, comprehensive, and flexible process to take your design system from idea to code.


Tools to support your design system implementation

Finally, let’s take a look at several tools, or categories of tools, that can help support the design system implementation process. These tools all fit nicely into the process outlined above, but are fairly adaptable should the process for your product look different.


Zeplin

Zeplin is a tool for collaboration between design and development, geared towards translating design assets into more detailed specifications for developers. Zeplin publishes plugins for the major user interface design tools (Sketch, Figma, Adobe XD, Adobe Photoshop CC). The Zeplin plugin can be used within the UI design tool to create a Zeplin export file containing development specs and assets automatically generated based on the designs. At Emerge, we typically plug this into our process at the design to development handoff, using the Zeplin export as an artifact of the design process, which our developers then utilize as a source of truth for translating design to pixel faithful implementation.


Zeplin also supports a feature calledconnected componentsto help developers keep track/connect design specs to code. More specifically this feature, surfaces links to source code, component libraries, or other documentation, within the context of the design files (when viewed in Zeplin). This is particularly useful in cases where elements of a design system have already been implemented (coded), as developers can more easily locate and keep track of the relevant components and source code.


Component Libraries

(Video) Design Systems: What are They and How to Get Started

A component library is a tool that helps your team implement a reusable collection of UI elements in isolation. When you have a design system, this is a library of the individual elements of the design system implemented in code. These components are the building blocks developers will use in creating the user interfaces of your product.

In regards to the process of implementing a design system, a component library is an excellent tool to organize and keep track of components that have been coded. Component libraries often also act as the environment where the visual QA step is performed, as they tend to include a web server component.

For web applications, the most common component library tools we see used areStorybookandbit. You can read more about these component library tools in aprevious post on this site.


Component governance and distribution

Because design system components are usually implemented (coded) in isolation, there needs to be a sane approach to dependency management as well as means for developers to distribute these components for use when building the interfaces for your product. This is an area oft-overlooked, and one that leads to significant problems and technical debt if not done properly.

The most fully-featured tool in this arena is one we’ve already mentioned,bit. In addition to acting as a component library, it also offers governance (versioning, dependency management) and means of distribution (via NPM).

(Video) Create a Figma Design System - Fundamentals (Part 1)


Tools & Process Are the Glue That Holds Design Systems Together

Keeping UI consistent in, and across, digital touchpoints within a product can be hard, even when you have a design system. The good news is, process and tools can help.

While unfortunately, no single universal prescription exists for implementing a design system, there are some key characteristics you should try to incorporate as you create your own process to suit your product and team. To support and enhance your process you can incorporate tools as needed. The end result should ensure a manageable and repeatable means to convert the abstract ideals of your design system into concrete benefits for the users of your product.

FAQs

How do you measure the effectiveness of a design system? ›

How to Measure a Design System's Success?
  1. Team efficiencies – measure how long it takes teams to build a new product using the organization's design system.
  2. Speed to market – measure how long it takes teams to build and test prototypes.
  3. Effect on code – measure how much code developers change with each release.
25 Oct 2021

How good design helps in efficient implementation? ›

A good design is effective and efficient in fulfilling its purpose. It relies on as few external factors and inputs as possible, and these are easy to measure and manipulate to achieve an expected other output. A good design is always the simplest possible working solution.

What steps are needed to implement a design? ›

The 7 steps of the design process
  • Define the problem. Crucial to solving any design problem is to begin by asking the right questions. ...
  • Conduct research. ...
  • Brainstorm and conceptualize. ...
  • Create a prototype. ...
  • Select and finalize. ...
  • Product analysis. ...
  • Improve.

What makes a design effective? ›

The principles of design are the rules a designer must follow to create an effective and attractive composition. The fundamental principles of design are: Emphasis, Balance and Alignment, Contrast, Repetition, Proportion, Movement and White Space. Design differs from art in that it has to have a purpose.

What is design efficient process? ›

Process Efficiency – Are the processes designed in a way that their goals are reached with the least possible inputs (time, material, equipment, financing, human efforts etc.) or, to turn the argument around: Are the company's resources utilized in the best possible way?

How do you analyze a design system? ›

Analysis and Specification

Gather, analyze, and validate the information. Define the requirements and prototypes for new system. Evaluate the alternatives and prioritize the requirements. Examine the information needs of end-user and enhances the system goal.

What is the purpose of design system? ›

Design systems provide a single source of components, patterns, and styles and unify disjointed experiences so that they are visually cohesive and appear to be part of the same ecosystem. As an added bonus, any major visual rebrands or redesigns can be managed at scale through the design system.

What is effective implementation and how? ›

The Effective Implementation Framework describes how to manage complex changes to practice and policy. Initiate Change. Engage Stakeholders. Build Capacity. Set Goals and Create Plan.

Why is effective implementation important? ›

Research shows that the quality of implementation plays a significant part in bringing about outcomes[2]. If a program is implemented poorly or even moderately well, its goals are unlikely to be achieved, or the results will be less significant. With high quality implementation, success is more likely.

Why is implementation important in design thinking? ›

It is important to implement design thinking in your work environment because it helps to simplify complex problems. By thinking like a designer, teams can learn to create human-centered solutions instead of solving problems based on assumptions.

What is the first step in implementation of a design? ›

Planning a Design Implementation

Planning and documenting the design implementation is the first step in this process. The design implementation description should be as detailed as possible. The more detailed the design documentation, the less knowledgeable the network engineer must be to implement the design.

What is design and implementation requirements? ›

Design and implementation. Is the stage in the software engineering process at which an executable software system is developed. activities are invariably inter-leaved. Design is a creative activity in which you identify software components and their relationships, based on a customer's requirements.

What does it mean to implement a design? ›

Implementation is the execution or practice of a plan, a method or any design, idea, model, specification, standard or policy for doing something. As such, implementation is the action that must follow any preliminary thinking for something to actually happen.

What is the most efficient design? ›

The design, known as Schaie's 'most efficient' design, is based on a trifactorial developmental model which isolates the contributions to developmental data of the factors age, cohort and time of measurement.

What five things make a good design? ›

5 Things That Makes a Good Design Great
  • It Is Successful. The whole purpose of designing something is to get people invested in it. ...
  • It Is Unique. In order to become successful, your design will need to prove it can hold its own in a world full of design work. ...
  • It Is Consistent. ...
  • It Can Be Adapted.
29 Feb 2016

What is the most important factor in design? ›

Aesthetics:

Aesthetics is the final and most crucial factor that needs to be considered in product design.

What are the 8 key principles of design? ›

The eight principles of design every designer should know
  • Alignment. Making sure the elements of any design are aligned is essential. ...
  • Hierarchy. Hierarchy means putting your design's most important message or purpose front and center. ...
  • Contrast. ...
  • Repetition. ...
  • Proximity. ...
  • Balance. ...
  • Color. ...
  • Space.

What are the 10 steps of the design process? ›

The 10 Steps to Design Thinking
  • Identify needs. This is the most critical and most difficult step. ...
  • Gather information. This is the research phase. ...
  • Stakeholder analysis. ...
  • Operational research. ...
  • Hazard analysis. ...
  • Specification creation. ...
  • Creative design. ...
  • Conceptual design.
15 Feb 2019

What are the 5 key stages in the design process? ›

The short form of the design thinking process can be articulated in five steps or phases: empathize, define, ideate, prototype and test. Let's briefly explore each of these phases in relation to a practical design process.

What makes process effective and efficient? ›

Process efficiency signifies an optimal (in most of the cases, the fastest or the cheapest) way of operating processes. Conversely, process effectiveness implies executing the right processes and achieving the desired goals.

How do you improve efficiency in design team? ›

How to Increase the Productivity and Effectiveness of your Design...
  1. Good morale. It may seem obvious, but a happy team is a more productive team. ...
  2. Sharing of knowledge and tips across the team. ...
  3. Good planning to avoid delays where possible. ...
  4. Utilise the 'team' ...
  5. Take time out.
10 Mar 2022

What are the 3 keys to consider in processing a design? ›

Consider the three key design considerations laid out below.
  • Footprint. Before diving into the details, it's important to first grasp the “big picture” of your process system design requirements. ...
  • Output Diversity. Single-product manufacturing deals with fixed quantities. ...
  • Maintenance. ...
  • Learn More.
13 Jun 2019

What are the basic principles of design? ›

What are basic design principles? There are twelve basic principles of design: contrast, balance, emphasis, proportion, hierarchy, repetition, rhythm, pattern, white space, movement, variety, and unity. These principles work together to create visually appealing and functional designs that make sense to users.

What is an example of a design system? ›

1. Google Material Design System. One of the Big Four technology companies, together with Microsoft, Apple and Amazon, Google is a well-known tech giant that focuses on Web services and products, from online advertising and search engine to cloud computing and software.

What are the main components of a design system? ›

The exact ingredients included in your organization's design system will depend on your unique needs, teams, and products.
  • Component Library. ...
  • Pattern Library. ...
  • Brand Style Guide. ...
  • Brand Values. ...
  • Design Principles. ...
  • Icon Library. ...
  • Content Guidelines. ...
  • Accessibility Guidelines.
27 Apr 2022

What are system design skills? ›

Systems designers require a range of IT skills to help them understand the various components of information systems. These skills include database management, telecommunications, networking, application development and operating systems.

› Features › Web Design ›

Design systems help large industry players to standardise the design process and make it more predictable. A lot of companies try to take on the initiative of b...
Learn what a design system is, how to create one and how to continually use one through our 12-part guide.
Design System is much more than UI Style-guide. It is a source of truth for the whole team. This means UI Component Library for Designers, Ready to use UI Eleme...

What is the first way to design an effective system *? ›

What are the steps to creating a successful design system?
  • Audit. Much like with any project, The first step is to take inventory of all the assets and UI elements across all the different properties within your brand. ...
  • Finalize. ...
  • Loop in developers. ...
  • Put it in a central location. ...
  • Keep updating.
17 Oct 2022

What are 3 important aspects to designing a system process? ›

In successful systems design, three main components must be considered and managed effectively. These are quality, timeliness and cost-effectiveness.

What are the six principles of effective design? ›

Start with the six principles of design: balance, pattern, rhythm, emphasis, contrast, and unity. Just as instructional design models and methodologies shape your training strategy, so should these principles shape your basic visual strategy. By applying them, you can create high-impact visuals.

What are the effective design processes give 4? ›

Here are 4 steps to an effective design process:
  • Step 1: Discover. In nearly every situation, whether it's web design or print design, you will need to understand more about the potential project than the client may be able to offer. ...
  • Step 2: Discuss. ...
  • Step 3: Design. ...
  • Step 4: Refine.
21 Jun 2018

What elements are needed to make an effective design? ›

The elements of design are the fundamental aspects of any visual design which include shape, color, space, form, line, value, and texture. Graphic designers use the elements of design to create an image that can convey a certain mood, draw the eye in a certain direction, or evoke a number of feelings.

How do you implement a system at work? ›

How to implement a process at work
  1. Define your objective and business goals. ...
  2. Ask for feedback from employees. ...
  3. Allocate the necessary resources. ...
  4. Communicate the implementation process. ...
  5. Identify leaders and take ownership. ...
  6. Appoint people to the project team. ...
  7. Consider organizational structure and culture.
1 Jun 2021

What are the 5 key elements of a system? ›

Following are the system elements:
  • Input and Output:
  • Processing:
  • Control:
  • Feedback:
  • Boundaries:
  • Environment:
1 Dec 2018

What is the main purpose of system design? ›

The goal of system design is to allocate the requirements of a large system to hardware and software components. The system design activity starts after the system requirements analysis has been completed.

What are the basics of system design? ›

System design requires a systematic approach to building and engineering systems. A good system design requires you to think about everything in an infrastructure, from the hardware and software, all the way down to the data and how it's stored. Learn more about the basics of system design.

What is the golden rule of design? ›

A good interface should be designed to avoid errors as much as possible. However, if something goes wrong, your system should make it easy for users to understand and resolve the problem. Simple ways to deal with errors include displaying clear error notifications and descriptive hints to resolve the problem.

What are the four main qualities of good learning design? ›

According to Laurillard (2013), the properties required for an operational learning design are:
  • Learning outcome, sequence of activities, and assessment. These must be aligned for effective pedagogy.
  • The sequence of TLAs. ...
  • The time for each TLA. ...
  • The tools and resources required by the learners. ...
  • The designer's reflection.
25 Mar 2019

What are the 5 steps in design? ›

The Five Phases of Design Thinking

The short form of the design thinking process can be articulated in five steps or phases: empathize, define, ideate, prototype and test.

What is design efficient process? ›

Process Efficiency – Are the processes designed in a way that their goals are reached with the least possible inputs (time, material, equipment, financing, human efforts etc.) or, to turn the argument around: Are the company's resources utilized in the best possible way?

Videos

1. Design System: Everything You Need to Know in 2021
(Cieden)
2. Build a scalable design system for enterprise websites with Payload CMS & Next.js
(Learn With Jason)
3. The Fastest Way To Design System
(Kerev Design)
4. Create a Design System with CSS - Web Development Course
(freeCodeCamp.org)
5. What is a Design System? Design Systems 101 for Designers
(DesignCourse)
6. Design Systems 101: Why You Should Use one in 2023
(Pierluigi Giglio)
Top Articles
Latest Posts
Article information

Author: Domingo Moore

Last Updated: 09/30/2022

Views: 5943

Rating: 4.2 / 5 (53 voted)

Reviews: 84% of readers found this page helpful

Author information

Name: Domingo Moore

Birthday: 1997-05-20

Address: 6485 Kohler Route, Antonioton, VT 77375-0299

Phone: +3213869077934

Job: Sales Analyst

Hobby: Kayaking, Roller skating, Cabaret, Rugby, Homebrewing, Creative writing, amateur radio

Introduction: My name is Domingo Moore, I am a attractive, gorgeous, funny, jolly, spotless, nice, fantastic person who loves writing and wants to share my knowledge and understanding with you.