design systems case study

• Cosima Mielke
• Nov 9, 2022

Design Systems: Useful Examples and Resources

• 17 min read
• Design Systems , Inspiration , Resources , Round-Ups , Case Studies
• Share on Twitter ,  LinkedIn

About The Author

Cosima has been an editor at SmashingMag since 2013. Whenever she’s not writing articles for the weekly Smashing Newsletter , she’s probably working on a … More about Cosima ↬

Email Newsletter

Weekly tips on front-end & UX . Trusted by 200,000+ folks.

Design systems ensure alignment, reusability, and consistency across a project or brand. And while we have gotten very good at breaking down UIs into reusable components, a lot of design systems aren’t as useful and practical as they could be, or they aren’t even used at all. So how can you make sure that the work you and your team put into a design system really pays off? How can you create a design system that everyone loves to use ?

In this post, we’ll take a closer look at interesting design systems that have mastered the challenge and at resources that help you do the same. We’ll explore how to deal with naming conventions, how motion and accessibility fit into a design system, and dive deep into case studies, Figma kits, and more. We hope that some of these pointers will help you create a design system that works well for you and your team.

Table of Contents

Below you’ll find quick jumps to real-world design systems and specific design system topics. Scroll down for a general overview. Or skip the table of contents .

• Audi Design System
• Brand Estonia Design System
• Carbon Design System
• Culture Amp Design System
• Deutsche Bahn Design System
• If Design System
• Nord Design System
• Olympic Brand Design System
• Shopify Design System
• Workbench Design System
• accessibility
• brand expression
• case studies
• custom design attributes
• data visualization
• enterprise design systems
• live examples
• measuring design systems
• multi-lingual design
• naming conventions
• ROI calculator
• visual examples

Inspiring Real-World Design Systems

Nord: accessibility and naming conventions.

Bringing together everything that’s required to manage a healthcare business digitally, Nordhealth creates software that aims to redefine healthcare. As such, their design system Nord is heavily focused on accessibility.

Nord offers plenty of customization options, themes, and a fully-fledged CSS framework, plus dedicated guides to naming conventions and localization , for example. Unfortunately, the Nord Figma Toolkit isn’t open-sourced yet.

Workbench: Comprehensive Live Examples

Gusto serves more than 200,000 businesses worldwide, automating payroll, employee benefits, and HR. To enable their team to develop cohesive and accessible experiences for Gusto’s platform, the Workbench design system encompasses Gusto’s design philosophy, design tokens, creative assets, React components, and utilities — and documentation to tie it all together.

What really stands out in the Workbench system are the comprehensive live examples that explain exactly how components should be used in different contexts. Do’s and don’ts, visual explanations, and implementation details ensure that both designers and developers working with Workbench can use the design system effectively . For even more convenience, there’s also a Gusto Workbench VS Code Extension with common snippets for UI components.

Olympic Brand: Branding And Multi-Lingual Design

The Olympic Games are probably one of the most widely recognized brands in the world. Since the birth of the modern Games more than 125 years ago, hundreds of people have grown and enhanced the Olympic brand. To increase consistency, efficiency and impact across all that they do, the IOC hired a Canadian agency to create a comprehensive design system that conveys the timeless values of the Olympic Games and propels the brand into the future.

The Olympic design system is focused on branding and identity design, but also provides examples of illustrations and graphic elements. It shows how to manage multi-lingual challenges and how to use typography, with plenty of good and not-so-good examples and guidance notes along the way.

Brand Estonia: Custom Design Attributes

Pure and contrasting nature, digital society, and smart, independent-minded people are the core values behind the brand Estonia. The Brand Estonia design system maps the country’s strengths and shows how to express them through writing, designs, presentations, and videos.

Stories, core messages, facts, and plenty of examples and templates provide a solid foundation for creating texts and designs across the brand — be it on the web, in social media, or print. A special highlight of Estonia’s design system lies on authentic photos and custom design attributes such as wordmarks and boulders to underline the message.

Audi: Visual Examples Of Do’s And Don’ts

Audi UIs range from websites to applications for a particular service. The Audi design system provides a joint set of components, modules, and animations to create a well-balanced, system-wide user experience — from the app to the vehicle.

Along with brand appearance guidelines and UI components, a handy feature of the design system is its comprehensive set of visual examples of how a component should (and shouldn’t) be used in Audi’s interfaces. There is also a Audi UI Kit for Figma and a Sketch UI library that ensure that designers use the most up-to-date components and icons in their products.

Deutsche Bahn: Content Guidelines And UX Writing

Deutsche Bahn, the national railway company of Germany, is one of the most recognized brands in Germany. With the help of their DB Digital Product Platform , the company enables developers, designers, and copywriters to build flexible digital experiences with an emphasis on mobility.

The design system features content guidelines, accessibility considerations, code examples, components, and contextual examples of how to use them. It also provides guidelines around UX writing and helpful visual guides to accessibility and logo. Everything is open source on GitHub and NPM.

Shopify, If, And More: Data Visualization

Data is pretty much useless if we can’t make sense of it. Luckily, data visualization helps us tell the full story. But how to include data visualization in a design system? Here are some examples.

Shopify’s design system Polaris maps out guidelines for how to approach data visualization and defines five core traits for successful data visualizations. Do’s and don’ts for different data visualizations deliver practical examples. Culture Amp features helpful further reading resources for each type of data visualization they define in their design system. The If Design System shines a light on color in data visualizations, and the Carbon Design System comes with demos and ready-to-use code snippets for React, Angular, Vue, and Vanilla.

Design Systems For Figma

Atlassian, Uber, Shopify, Slack — these are just a few of the design systems you’ll find on Design Systems For Figma . Curated by Josh Cusick, the site is a growing repository of freely available Figma kits of design systems — grouped, organized, and searchable.

Not featured in the collection, but worth looking into as well, is the GOV.UK design system Figma kit . It focuses specifically on complex user journeys and web forms. Lots of valuable insights and inspiration are guaranteed.

Design System Resources

Design system naming conventions.

Let’s face it, naming things can be hard. Particularly in a design system, where you need to find names for your components, styles, and states that can be easily understood by everyone who works with it. But how to best tackle the task? Ardena Gonzalez Flahavin explores not only why we should care about naming in our design systems but also what we should keep in mind when doing so.

Shayna Hodkin also summarized best practices for solid naming conventions for the different categories in a design system — from colors and text styles to layer styles and components.

Another great read on the topic comes from Jules Mahe. To help you find the right balance between clarity, searchability, and consistency, Jules summarized tips for naming your design files , understanding what you need to name in a design system, and structuring it. Three useful resources for futureproofing your design system.

Accessibility In Design Systems

When building a design system, it’s a good idea to include guidelines and documentation for accessibility right from the beginning. By doing so, you reduce the need for repeat accessibility work and give your team more time to focus on new things instead of spending it on recreating and testing accessible color palettes or visible focus states again and again. In her article on accessible design systems , Henny Swan explores what an accessible design system needs to include and how to maintain it.

To shift the understanding of accessibility from one of basic compliance to a truly inclusive, human-centered experience, the team at AdHoc released their Accessibility Beyond Compliance Playbook . It explores several ways to improve accessibility — from the immediate task of building accessible products to creating teams of people that underscore an Accessibility Beyond Compliance mindset.

Another handy resource to help you incorporate accessibility efforts comes from IBM. Their open-source Carbon Design System is based on WCAG AA, Section 508, and European standards to ensure a better user experience for everyone. It gives valuable insights into how users with vision, hearing, cognitive, and physical impairments experience an interface and what designers should think about to ensure their design patterns are operable and understandable.

For more practical tips , be sure to check out the IBM Accessibility Requirements checklist on which Carbon is based. It features detailed tips to make different components and design patterns comply with accessibility standards. A way forward to empowering your diverse user base.

Brand Expression In Design Systems

When it comes to visual elements like icons and illustrations, many companies have difficulties finding the right balance between being on-brand, useful, and scalable. The team behind Design Systems For Figma also faced this challenge and came up with a recipe for creating and scaling a system of visuals. Elena Searcy summarized how this system works .

In her blog post, Elena starts with the smallest visual element, an icon, explaining what her team aims for when choosing and creating icons to make them align with the brand and provide real value for the user. Elena also shares insights into how they handle illustrations, including a scalable way of creating them and considerations regarding anatomy, style, and color. A great example of how a set of established rules can help make visuals more meaningful.

Motion In Design Systems

Motion in design is powerful. It can help to reduce cognitive load, guide users through pages and actions, provide user feedback, improve the discoverability of features, and improve perceived response time. To make full use of motion , the design team at Salesforce created an end-to-end motion language for their products: the Salesforce Kinetics System .

As Pavithra Ramamurthy, Senior Product Designer at Salesforce, explains, the intention behind the Salesforce Kinetics System is to enable the evolution and scaling of kinetic patterns across products, with design system components that are pre-baked with motion right out-of-the-box.

But how do you scale these motion patterns from design system to product? How would teams actually use the artifacts in their daily workflows ? Pavithra wrote a case study that takes a closer look to demonstrate the possibilities. Interesting insights guaranteed.

Enterprise Design System 101

Introducing an enterprise design system is a lot of work. But it is work that will pay off. Especially with large teams, multiple platforms, and numerous user interfaces to manage, having a single source of truth helps maintain a consistent user experience . So what do you need to consider when building your own? Adam Fard takes a closer look .

As Adam explains, an enterprise design system is a system of best practices, reusable design elements, processes, usage guidelines, and patterns that help reinforce the brand, improve the UX design process, and optimize the user experience. He compares it to a box of Lego: the building blocks are the collection of code and design components, the building instructions that you’ll usually find inside the box correspond to a collection of guidelines , processes, and best practices that ensure that co-designing and cross-collaboration are seamless. If your enterprise traverses numerous sites or apps, Adam’s writeup is a great opportunity to get familiar with the concept of enterprise design systems.

Measuring A Design System

When you’ve built a design system or are just about to start working on one, metrics might not be the thing you’re concerned about at first sight. However, measuring your design system is more important than you might think. In his article “ How to measure your design system? ”, Jules Mahe dives deeper into why it’s worth the effort.

Jules explains how to define the KPIs for your design system and how to get quantitative data measurements to learn more about a design system’s efficiency. Qualitative data conducted with the help of surveys and interviews make the narrative more compelling. Of course, Jules also takes a closer look at how to use the data . As he concludes, measuring a design system is challenging and requires time, but it will be a goldmine and one of the essential levers for your design system’s growth and sustainability.

Design System ROI Calculator

Your boss is hesitant that the work you’ll put into a design system will eventually pay off? The Design System ROI Calculator might be just what you need to convince them that the time and money invested in a design system is a good investment.

The ROI calculator helps you understand and project cost savings when implementing a design system. It calculates total employee savings from implementing a design system, as well as time saving and efficiency gain by component or UI element. To estimate total savings, you can select between different scenarios based on team size and product calculation.

Design System Case Studies

Having robust components and patterns that can be reused in different situations is the essential idea behind every design system and often seems like the magical wand everyone has waited for to solve challenges and improve collaboration . Henry Escoto, UX & Design at FOX Corporation, offers a perspective on design systems that is a bit different. He claims that it’s actually the practice which can truly make a difference.

In his case study “ Our Design System Journeys ”, Henry shares in-depth insights into FOX Tech Design’s design systems Delta and Arches to find answers to the following questions: How will a design system truly help your product design? What does it take to build and execute a design system within an organization? How to inject the practice into existing workflows? And last but not least, what is the pay off of such an investment?

Another interesting case study comes from Jan Klever. Jan is a designer at Quero Educação and also fills the role of the organization’s Design System Ops. He shares from his team’s experience how having a dedicated Design System Ops role can help when it comes to maintenance and following up on the product.

Design System In 90 Days

When you’re starting to work on a design system, you do it with the intent to build something that lasts, a system that teams love to use and that saves them precious time in their daily work. However, many attempts to build a design system end up in great libraries that don’t get used as much as you had hoped. But how do you create a design system that becomes an established part of your organization’s workflow? SuperFriendly published a practical workbook in which they take you and your team from zero to a design system that lasts — in 90 days.

Written for cross-disciplinary teams of design, engineering, and product, the workbook consists of a 130-page PDF and FigJam prompts and Figma templates you’ll use to complete activities. No theory, only clear instructions on what to do and how to do it over a 90-day timeframe. At $349, the workbook isn’t cheap, but considering that it can save you about 6–9 months of figuring out what work to do, the investment is definitely worth considering.

Wrapping Up

Have you come across a design system you found helpful? Or a resource or case study that eased your work and that you’d like to share with others? We’d love to hear about it in the comments below.

Useful front-end & UX bits, delivered once a week.

With tools to help you get your work done better. Subscribe and get Vitaly’s Smart Interface Design Checklists PDF via email. 🎁

On front-end & UX . Trusted by 207,000+ folks.

Smashing Newsletter

Tips on front-end & UX, delivered weekly in your inbox. Just the things you can actually use.

Front-End & UX Workshops, Online

With practical takeaways, live sessions, video recordings and a friendly Q&A.

TypeScript in 50 Lessons

Everything TypeScript, with code walkthroughs and examples. And other printed books.

Advisory boards aren’t only for executives. Join the LogRocket Content Advisory Board today →

• Product Management
• Solve User-Reported Issues
• Find Issues Faster
• Optimize Conversion and Adoption

Unveiling the best design systems: Principles, examples, and key takeaways

Systems are all around us, even if we don’t notice them. They are the hidden engines behind banking, healthcare, and even the economy. A system is like a team of different parts that work together to achieve a specific purpose. They bring order to potential chaos and make things work better and faster.

Design systems play a significant role in helping teams create consistent and scalable solutions. A robust design system helps designers and engineers work more efficiently and implement design consistency across one or more products. By leveraging common components and patterns, they can get from problem to solution much faster. This article will talk about the principles that guide successful design systems and key takeaways from a few examples to help you develop your own.

What is a design system?

Guiding principles of effective design systems, essential components of design systems.

• Case study: Example 1  —  Carbon design system
• Case study: Example 2  —  Audi design system
• Case study: Example 3  —  Polaris

Lessons learned from the best design systems

Implementing a design system: guidelines and considerations, design system tools and resources, measuring the impact of a design system.

A design system is a centralized repository of design principles, guidelines, and reusable components that aid in design decision making. Its purpose is threefold: to promote consistency, efficiency, and brand cohesion.

Serving as a single source of truth for a team or organization, a design system establishes standards and guidelines, giving designers and developers the building blocks necessary for efficient and scalable design creation. By providing a library of shared components, a robust design system can reduce redundant workflows and boost a team’s efficiency, making it relatively quicker to go from a problem to a high-fidelity solution.

Using a design system promotes consistent user experiences across a product or platform of products. It provides the visual elements necessary to ensure cohesive branding, which is important for making digital products and websites recognizable and memorable by users.

Design principles create the foundation of a successful design system. They are shared guidelines that set the standard for design excellence and support the team’s mission to create solutions that resonate with their users. Although design systems can each have unique principles tailored toward their context, here are a few overarching ones that can contribute to their effectiveness.

Design components and patterns should be able to work well together to create unified user experiences. Cohesive design systems integrate closely related elements that can maintain visual harmony, and consistent interactions, and address a range of user needs.

By focusing on closely related elements within the design system, designers will have the necessary tools to create consistent and intuitive user journeys.

Effective design systems are composed of reusable modular components, which gives designers the building blocks to create a variety of interfaces. Modularity provides versatility in how components are arranged and configured within a layout.

This approach saves time and effort, allowing designers to easily mix and match the modules to create different page layouts while ensuring a coherent design language throughout the product.

Scalability

A design system is a living entity that continues to evolve alongside the products. Adapting to changes in the scope and scale of products ensures that visual and functional experiences are maintained across screen sizes, devices, and platforms.

Over 200k developers and product managers use LogRocket to create better digital experiences

Using modular design principles, focus on frequently used components that can cover a range of scenarios by creating variants. This ensures that designers have the tools available to meet the requirements of any challenge.

Accessibility

Inclusive products allow fair and equal access to all users, regardless of their ability. Design systems should have inbuilt accessibility best practices that meet WCAG accessibility standards. This considers users who experience challenges while using products in a traditional way and might require assistive tools, such as a screen reader. Even though a design system contains accessible components and elements, designers must still consider how they work together in order to design a holistic, accessible experience.

Every design system has its own unique features or characteristics; however, there are several essential components that all design systems share. Let’s explore the purpose and application of design tokens, typography, color palettes, grid systems, UI components, and documentation within a design system.

Design tokens

Design tokens are variables used by designers and engineers to communicate the values of how things should be styled when building interfaces. These tokens point to important information such as colors, font styles, spacing, or animation.

Instead of providing fixed values to hard-code into a product, which can be hard to change, design tokens ensure that everything stays consistent and works well together, even if the values themselves change.

For example, a design token intentPrimary might point to a primary color value that is blue. But if the team decides to rebrand and change its primary color value to green, every element associated with the token intentPrimary will be updated to green, while the token remains unchanged. This example shows how design tokens keep design systems organized and easy to maintain.

A major component of brand and style guidelines, typography consists of selecting fonts that can be used for specific scenarios. Some key aspects of typography include choosing the brand’s typefaces, as well as defining font sizes, weights, and styles for various use cases, such as headings, subheadings, body text, or labels. Typography guidelines keep content visually organized by establishing a hierarchy and ensuring legibility across various platforms.

Color palette

A well-defined color palette within a design system has a number of benefits, including establishing brand identity, guiding user interactions, and maintaining visual consistency. A color palette generally consists of primary colors, secondary or tertiary colors, and background and text colors.

Before defining your colors, identify the different use cases and contexts in which color might be needed. Thoroughly test your color palette to ensure that there is sufficient contrast between background and text colors, and provide guidance on how colors should be used across different UI elements.

Grid systems

Grid systems help organize and align design elements to create cohesive layouts. A grid is a series of evenly spaced columns and rows that provide structure to designs. They can help position individual components in a way that makes information and content flow smoothly throughout a page.

A design system might have several grids to account for responsive layouts on different screen sizes, such as desktop, mobile, or tablet. The most common types of grid systems include column grids and modular grids.

A column grid system consists of a set number of columns that span the width of the page, providing vertical guidelines for visual alignment. A fluid column grid can adjust to the screen size, either by expanding the column widths or changing the number of columns used.

A modular grid system consists of columns and rows that break layouts into modules, providing more flexibility in how elements are arranged in the layout.

UI components

A design system would be incomplete without UI components, the fundamental building blocks of an interface. UI components are the elements users interact with on a page, ranging from common input controls like buttons, checkboxes, dropdowns, and radio buttons, to navigational components like search bars, breadcrumbs, pagination, and tags.

In addition, there are informational components like progress bars, tooltips, toast notifications, and modals, along with containers like accordions or panels. The components listed represent just a subset of the wide variety of UI components that contribute to a cohesive design system.

When selecting UI components for a design, it’s helpful to consider users’ mental models. Users have become accustomed to interacting with certain UI components in specific ways, so choosing the right component can help with familiarity, task completion, and ease of use.

Documentation

Finally, each design element and component should have detailed documentation to provide guidance on how to properly use them. Well-documented design systems communicate rules and best practices to aid designers and developers during the design and implementation process. It’s helpful to explain common use cases for each element, as well as how not to use them, to avoid inconsistencies in the final design.

Documentation can be communicated in the form of an overview, visual examples or use cases, and scenario explanations to give enough detail on how to use each element and avoid any confusion. It also includes working code for developers to implement and customize the element for their application.

Case study: Example 1  — Carbon design system

IBM’s Carbon is an open-source design system that provides a collection of reusable assets such as components, patterns, guidance, and code. Its primary goal is to build efficiency and consistency in the design process, giving designers a comprehensive toolkit they can leverage in their workflow. This saves designers time from building basic elements and instead allows them to focus on creating digital experiences that meet user needs.

Carbon offers a well-defined design language that includes typography, content, color palette, iconography, grid systems, motion, and accessibility guidelines. This enhances the brand identity across multiple products by defining specific visual guidelines.

Carbon also hosts a library of UI components, patterns, and data visualizations for various use cases. This ensures that design decisions are unified, leading to consistent user experiences across multiple products. Each of the base elements leaves room for customization, which allows projects to scale well as the scope evolves. This modular approach gives designers the flexibility to design for any scenario.

As an open-source design system, Carbon facilitates collaboration and knowledge sharing, encouraging contributions back to the design system. This leads to continuous improvement and has a direct impact on IBM’s projects, ensuring consistent and cohesive user experiences. Also, Carbon’s focus on accessibility shows its commitment to inclusive design, which empowers designers and developers to create accessible experiences for all users, regardless of their abilities.

Case study: Example 2 — Audi design system

The Audi design system highlights its focus on speed, consistency, and quality for development across all Audi products. The design system was created to support designers and developers to build products efficiently that meet the evolving needs of their customers.

The design system acts as a single source of truth for Audi’s global product teams. Its products range from websites to in-vehicle applications, each with unique user interface requirements. Their design system offers a library of brand identity guidelines and components to ensure consistent branding and user experience regardless of the platform.

Efficiency is a common theme across design systems, and Audi’s design system aims to enhance the speed of asset creation by giving designers access to reusable components. By removing the need to recreate basic elements, designers are able to focus on innovation and quickly design pages by leveraging and customizing Audi’s purpose-built components and patterns.

Each of the UI components provides usage guidelines, as well as variations that cover different states and use cases. The documentation includes available properties for developers to understand how to customize each component.

Audi emphasizes accessibility by providing WCAG and WAI-ARIA guidelines, as well as additional web accessibility resources for designers and developers to follow, ensuring that its final products allow equal and fair access to all users.

Case study: Example 3 — Polaris

Polaris is Shopify’s design system, built to guide app developers and designers in creating outstanding merchant experiences for the Shopify admin. Its focus is on enabling designers and developers to create apps that add functionality to the Shopify admin experience.

Shopify emphasizes that “Polaris is the floor, not the ceiling,” meaning that designers should use the design system as a foundation without limiting their creativity. They recommend focusing on solving problems first rather than worrying about consistency, which will come later. Polaris is meant to provide the building blocks with the added option to contribute back to the design system if a gap exists.

One of Polaris’ standout features is its robust content guidelines. It provides rules and best practices around actionable language, alternative text, error messages, and even grammar to ensure that the way copy is worded maintains the brand’s tone of voice and way of communicating with its users. The Do’s and Don’t’s are a great method for providing examples while explaining usage guidelines.

Polaris conveniently lays out the different variants of each UI component across the top of the page to allow users to easily view and compare to decide on the best one for their application. This convenience enhances the efficiency within a designer’s workflow, allowing them to quickly make informative design decisions.

Its icon library is easily searchable with each icon associated with multiple tags, allowing users to quickly find visual elements without knowing the specific name. It provides guidance for both designers and developers on how to access and use the icons, further enhancing their workflow efficiency.

From exploring these design systems, there are common themes and best practices that can be applied when developing your own. Some of the core principles include efficiency, consistency, open collaboration, accessibility, and clear documentation. These principles can be applied to small and midsize businesses (SMBs) to improve design and development processes.

Enhancing workflow efficiency

All three design systems emphasize the importance of efficiency in design and development. The main goal of any successful design system is to help product teams design and develop solutions faster without the need to recreate common assets. Providing reusable components saves time and effort by avoiding redundant work.

SMBs often have little resources allocated to development as they try to maintain a lean approach. By leveraging a design system, they can build efficiency into their workflow by speeding up product development and ultimately saving time and money that can be invested in other areas of the business.

Keeping experiences consistent

Consistency is another common theme of successful design systems. The purpose of a design system is to ensure that teams develop consistent experiences across all their products so that customers can quickly familiarize themselves with their tools.

Consistency is key in preventing user confusion, especially for SMBs that are in the early stages of customer adoption. This can help users quickly understand and see the value of a product without being concerned about its usability.

Contributing back to the design system

Carbon and Polaris are open source design systems that encourage contributions from the community. Design systems are considered a foundation to start building from but may have gaps that don’t address specific use cases or customer needs.

SMBs often have to adapt to changing customer requirements as they learn more about their users. Thus, their design system might not contain the necessary elements for building robust solutions.

A design system shouldn’t limit a team’s creativity by being too prescriptive, but rather spark ideas and allow for innovation. It should leave room for flexibility and scalability, especially for a small team that is growing quickly. By fostering a culture of open collaboration, design and development teams can continuously improve the design system.

Prioritizing accessibility and inclusive design

All three design systems prioritize accessibility by providing guidelines for designers and developers to build accessibility into their solutions. This ensures that product teams are considering users with disabilities creating products that are usable by all individuals.

Accessibility should be incorporated early into the development process instead of treated as an afterthought. SMBs can benefit from designing accessible products to help them reach a broader audience. It’s important to note that investing in accessibility early on can prevent teams from accumulating design debt and having to address accessibility issues later.

Implementing your own design system can seem like a daunting task. Here are practical guidelines and considerations for design system adoption, collaboration, documentation, and maintenance.

Before you jump ahead, first understand why your team needs a design system. This includes identifying any business goals and user needs that the design system would align with, such as improved designer efficiency and consistent user experiences across products. Communicating these benefits to stakeholders, such as product and development teams, can help with team adoption so that stakeholders are on board and aware of the design system’s existence.

Then, define the scope of your design system by outlining the essential elements and components that your team needs. Collaborate with your cross-functional partners, including design, development, product, and content, throughout this process to ensure alignment across teams and cover various requirements.

A guideline to consider is that proper documentation will lead to consistent experiences. It also takes the guesswork out of the team’s workflow, further enhancing their efficiency to get to results quicker. Even with limited resources, SMBs should focus on providing concise and clear documentation that outlines how to use design system elements. Investing the time and effort to document a design system clearly can lead to smoother implementation and avoid any confusion or misuse down the road.

Once your design system is up and running, provide thorough training to help your team use it effectively. Advocate for its adoption, but implement it gradually to avoid disrupting existing workflows and committing drastic product changes that might overwhelm users.

Maintaining a design system ensures that it evolves with changing customer needs and business objectives. It can be helpful to establish a regular cadence of feedback to gain input from team members in order to continuously refine the design system. Encourage team members to contribute back to the design system in order to fill gaps in the experience. Design system office hours are also a great way to broadcast any new changes or fixes to the design system components.

Many companies use Figma as their main design tool, so it’s a no-brainer to also use it to host design system assets. Teams can create a centralized library of reusable assets, including component variants and design tokens for designers to easily leverage in their Figma files.

Figma is a collaboration tool, which is perfect for enabling multiple team members to work in real time on the design system, speeding up development and ensuring everyone is aligned. Figma recently introduced Dev Mode, which allows developers to quickly inspect and translate designs to code, further accelerating design system adoption.

A popular open source tool for developing UI components within a design system is Storybook. Its main feature is the ability to build UI components in an isolated sandbox environment, which enables developers to render different variations of a component by using props and mock data. This reduces the need to spin up the entire app to test the component, saving substantial development time.

Storybook can be used to maintain documentation for how UI components behave and interact. The platform is interactive, allowing users to test out various use cases for each UI component. It also supports collaboration by allowing teams to discuss feedback during the design system development process.

Zeroheight is a centralized platform for design system hosting and documentation. It allows teams to create organized and interactive style guides, component libraries, and guidelines. Zeroheight ensures that design documentation remains up-to-date as components and guidelines evolve, making it easier to communicate changes across teams.

It also has inbuilt integrations with other design system tools, including Figma and Storybook, which help automate the workflow from design to code. Teams can import their assets from Figma and display developer resources for each component all in the same place as their design system documentation.

After your design system is implemented and teams have adopted its usage, it’s important to evaluate the impact and effectiveness that it has on your business to understand which areas are working or need improvement. The impact of a design system can be assessed by evaluating a combination of quantitative metrics and qualitative insights. This will result in a broader understanding of its performance.

In terms of quantitative metrics, it can be useful to track:

• The number of projects that use design system tokens and components
• The number of components used in each project
• The frequency of each component used across projects

These metrics will give you an idea of adoption rates across the organization, as well as which components are the most valuable to your teams. This can help in measuring which areas of the design system are most successful and which ones might need improvement.

On the other hand, qualitative insights offer a more human perspective. By gathering feedback through surveys and testing, you can begin to uncover the challenges that your team faces when using the design system and what can be done to alleviate these pain points. Continue to iterate and gather feedback in an iterative loop to improve your design system, which will lead to further adoption and success.

Setting measurable goals can help craft a clear understanding of how to improve your design system. These goals can cover things such as reduced design time, improved consistency, and increased user satisfaction. Achieving a successful design system requires an ongoing commitment to collaborate with your team: listen to their feedback and adapt to changes. The resulting value will benefit both your team and users in a significant way.

Conclusion and key takeaways

Design systems are essential for achieving design consistency and scalability in products. They also play a big role in enhancing efficiency in product development workflows. Design systems offer centralized repositories of guidelines and components, driven by principles like cohesion, modularity, scalability, and accessibility. These principles can apply to businesses of all sizes, including SMBs looking to streamline design processes and enhance user experiences.

For designers and teams interested in developing their own design systems, start by collaborating with cross-functional partners to understand its purpose and scope. Then, communicate its benefits to stakeholders so that everyone is on board.

As your team gradually adopts the design system, remember to maintain clear documentation and gather feedback from them. Using tools like Figma, Storybook, or Zeroheight can help you manage and broadcast changes to the design system as it evolves. By continuously tracking the success metrics of your design system, you can identify areas that are lacking and make the necessary improvements that your team and users will benefit from.

LogRocket : Analytics that give you UX insights without the need for interviews

LogRocket lets you replay users' product experiences to visualize struggle, see issues affecting adoption, and combine qualitative and quantitative data so you can create amazing digital experiences.

See how design choices, interactions, and issues affect your users — get a demo of LogRocket today .

Share this:

• Click to share on Twitter (Opens in new window)
• Click to share on Reddit (Opens in new window)
• Click to share on LinkedIn (Opens in new window)
• Click to share on Facebook (Opens in new window)
• #design systems

Stop guessing about your digital experience with LogRocket

Recent posts:.

How to use design planning for a smooth project delivery

Let’s talk about the design planning process, why projects fail without it, and the necessary elements all designers should include in it.

Structuring a design team for success

Having a strong design team structure is key to creating the right conditions for your team if you want them to produce their best work.

Color and culture: How color language changes by background

Color variance across cultures and perceptions can impact the way UX design is interpreted and how effective it is.

How to run one-on-one meetings with a design team

Let’s talk about the purpose of a one-on-one meeting, what makes a successful one, and strategies to plan and run one effectively.

Leave a Reply Cancel reply

Building and Scaling a Design System in Figma: A Case Study

Building a design system for a multinational company means cataloging every component in meticulous detail. It’s a massive undertaking that calls for both a big-picture view and a focus on specifics. Here’s how one design system team leader accomplished it.

By Abigail Beshkin

Abigail is a veteran of Pratt Institute and Columbia Business School, where she oversaw the design and production team for Columbia Business magazine. Her work has appeared in the New York Times and been heard on NPR.

Determining how to build a design system for a multinational company means cataloging every component and pattern in meticulous detail. It’s a massive undertaking that calls for both a big-picture view and a focus on specifics. Here’s how one design system team leader accomplished it.

When Switzerland-based holding company ABB set out to create a design system , the goal was to knit together a consistent look and feel for hundreds of software products, many of which power the mechanical systems that keep factories, mines, and other industrial sites humming. It was no small task for a company with almost two dozen business units and nearly 150,000 employees around the world. For Abdul Sial , who served as the lead product designer on ABB’s 10-person design system team, scaling the library of components and patterns depended on maintaining openness and transparency, with an emphasis on extensive documentation.

The Role of a Design System Designer

Increasingly, large companies like ABB have teams dedicated exclusively to creating and maintaining design systems. “A design system allows for consistency, going to market in a fair time and not allowing production to get stuck on customizations that are not building value,” says Madrid-based designer Alejandro Velasco . Or, as Alexandre Brito , a designer in Lisbon, Portugal, explains, “Design systems come to provide structure whenever there are many people using the same set of tools. It’s like everyone having the same language.”

If a traditional style guide covers the design basics—fonts and colors, for instance—a design system has a much further reach. “A design system is a mix of a style guide, plus design components, design patterns, code components and, on top of it, documentation,” Sial says. When he worked on ABB’s design system, about 120 designers used it on a regular basis. The effort represented version 4.8 of the system, and the team dubbed it “Design Evolution.”

Design system designers play a different role than those who focus solely on individual products. “You have the bird’s-eye view of all the different products that a company is using,” Sial says.

Working in design operations also calls for communicating with stakeholders throughout a company. “Design system designers have to be social,” says Velasco. “A design system designer has to really like to work and talk with people who have different roles within an organization. They have to be able to distinguish what feedback to include in order to build the design system around the company’s needs.”

The Life Cycle of a Component

Working on ABB’s design system, Sial was guided by one overarching philosophy: “Documentation, documentation, documentation.” For every reusable element on ABB’s websites, mobile screens, or large stand-alone screens, Sial wanted to show what he calls the life cycle of a component. That meant extensive record-keeping for all components and patterns—breadcrumbs, headers, inputs, or buttons, to name just a few. “What are the journeys it went through? What decisions went into it? That way we’re not always recreating everything. Before trying something, you can read and see that someone already tested it,” Sial says.

In his experience, this philosophy is a departure from the typical approach to documentation. In the fast-paced world of product development, for example, documentation is often written at the end of the project or abandoned altogether. But for design systems, Sial says, documentation should be more than an afterthought. “A design system is never done; it needs continuous improvement,” he says. “Design system creators and consumers want to understand the thought processes and decisions in order to keep improving it.”

Documentation is especially important for a design system as large as ABB’s. “With such a large team you have to be able to scale,” he says. “How can we make sure that everybody who joins the team can quickly go to any component and understand how it started, how it was edited, and what version they are using?”

Finding the Right Tool

There are many tools out there for building design systems, including Figma, Sketch, and Adobe XD. Sial experimented with several, trying a mix of design and project management tools before settling on Figma, which offers ample space for documentation.

Sial and his team determined that every component should sit within its own file. “Most of the time, you’re working on one component at a time. If you put all the components in one file, it slows down Figma. By giving each component its own file, it’s quicker to open and you have the whole history and documentation in one place,” he says.

Setting the Hierarchy

Sial set up the ABB design system so that the file for each component and pattern has the same pages. The images that follow detail what’s on each page.

Sial recommends setting up a simple cover page for every component. In Figma, this enables a thumbnail preview of all the components and helps with the browsability of files. In the ABB setup, the cover page includes the component name and what phase it’s in: design, development, or released. The status can be easily updated when the component progresses.

Inventory, Use Cases, and Requests

This page contains examples of the numerous ways that a component shows up in a company’s digital product. In the case of a text field component, for instance, the inventory page would show how the text field looks on abb.com compared to how it appears on an iPhone compared to how it shows up on an Android device. “The inventory allows us to understand clearly what’s already there,” says Sial.

This page should also show the ways the component is being used incorrectly. “This allows you to look at your products and see where there are alignments and misalignments,” Sial says. He advises teams launching a design system project to begin by cataloging what already exists. “Start with inventory and it will guide you as you’re creating the design,” he says.

References, Best Practices, and Competitive Analysis

Sial advises creating a section of each component file akin to a vision board, showing how other companies design comparable pieces. “As with anything else, best practice is to perform competitive analysis and see how other people are doing it,” he says. “Observe other products and see their learnings.”

Tests and Data

The test results data page aggregates all the data related to testing a component, including the results of A/B testing and feedback from users and stakeholders. In short, Sial says, “It’s the whole story of a component.” Perhaps the design team tried a new variation two years ago and found it didn’t work? “Maybe we worked on that variation and we discarded it for some reason,” he says. If so, this kind of history can save significant time by making sure that designers don’t try it again.

The next page lays out a component’s scope so designers can bring a design to fruition. By the time they arrive at the scope page, Sial says, “You have a story. You understand the inventory of all the products. You know what you need to build and you know the requirements. Now it’s time to write it down and make a brief out of it.” He adds that creating the scope should be a collaborative process with the product owners, developers, and designers.

Images of the final versions of the component are found here, with the latest iteration pinned on top. Other designers should be able to review and comment on it.

The sandbox enables designers to experiment with different iterations of a component or pattern directly in Figma. “It can be messy, and there’s no standardization,” Sial says. “It’s just a playground where a designer has the freedom to do anything.”

Figma Component

The file also contains a page for the Figma component itself, a UI element that is easily repeatable throughout the design system. The designer can make changes to the component, and that change will populate throughout all the instances of that component across the company, keeping everything consistent. This page will be exported to the Figma design system library, and any individual designer can drag and drop the Figma component into their design. If the design system team needs to make a change to the component, they can make it once and deploy it throughout the company.

Style Rules

Next, the design system designers and developers create the style rules page, a kind of catch-all for elements that, Sial says, “are not visible in the design.” For example, how will the component render when you scroll down the page? It’s also where the design system team keeps track of unresolved questions or issues. He says he was surprised at how integral this page turned out to be: “At first, we thought this page was not that important, but now we realize we spend most of our time here.”

The handover notes are the instructions for developers on writing the code for the component. The handover document begins with the anatomy of the component, then includes its variations.

The ABB system handover documents also include design tokens . Becoming increasingly popular in large-scale design systems such as ABB’s, design tokens are pieces of platform-agnostic style information about UI elements, such as color, typeface, or font size. With design tokens, a designer can change a value—indicate that a call-to-action button should be orange instead of blue, for instance—and that change will populate everywhere the token is used, whether it is on a website, iOS, or Android platform.

Sial also created a Figma token plug-in to expand the scope of tokens designers can create in Figma. “Figma supports colors, typography, shadows, and grid styles,” he says. The plug-in will generate tokens for more variables, such as opacity and border width. It also creates a standardized naming convention, so designers don’t have to keep track of token names manually. “The plug-in bridges the gap between developers and designers. It allows both to work on a single source of truth for design; if one makes a change in one place, that change takes effect everywhere in the design and code,” he says.

Sial stresses that in his system, developers take an active role throughout the creation of a component. “Early on, we would involve our developers when we had something ready to show them,” he says. “Then we realized that’s not working, and now we literally start kickoff sessions with them.”

Documentation Webpage

The last page of each file contains a webpage with the final design, showing how the component looks as a finished product. “We create a page that shows how the live example will look so the users, in this case our designers, can see how it will look at the end of the day on a real website,” Sial says.

Collaboration Is Key

The role of a design system designer is multifaceted. As Alejandro Velasco says, “Designing a design system involves so many roles, and if I’m leading that, I’m the glue for the project.”

It’s an enormous undertaking and not necessarily the right move for all companies. Startups, for instance, might do better to begin with an out-of-the-box system such as Google Material Design or the IBM Carbon Design System , rather than dedicating extensive resources to creating one. Still, the time might come when that won’t suffice, says Alexandre Brito: “As soon as you have multiple designers working together, you start to realize that there’s a need for someone to build rules that are more in line with the product or brand you’re building.”

Building a design system takes work and dedication; it also takes collaboration. Sial stresses that involving all stakeholders in the development of ABB’s system throughout the process was a priority. “It was really iterative work with my whole team. It was all about listening to them and we took the time to learn and test it thoroughly and develop this structure,” he says.

Having a structure that includes extensive documentation, including history and best practices, is at the core of the Figma design system. “It’s a success because people can read the documentation all in one place,” Sial says. “They can see everything, starting from the use case to the design and moving on to the handover and the final component page. People can see the whole life cycle of a component.”

You can browse Abdul Sial’s Figma file in its entirety here: Component Template .

Further Reading on the Toptal Blog:

• Saving Product X: A Design Thinking Case Study
• All About Process: Dissecting Case Study Portfolios
• The Benefits of a Design System: Making Better Products, Faster
• Helping AI See Clearly: A Dashboard Design Case Study
• Design Problem Statements: What They Are and How to Frame Them

Understanding the basics

What is a design system.

While a traditional style guide covers the design basics—fonts and colors, for instance—a design system has a much further reach. The design system documentation for Switzerland-based holding company ABB, for example, contains design components, patterns, and code components.

What role does a design system designer play in an organization?

Design system designers play a different role than designers who focus solely on individual products. They tend to have more of a bird’s-eye view of all the products a company is using. They also must interface and communicate with stakeholders throughout a company.

What are some best practices when building a design system?

One approach is to organize it in Figma and give each component and pattern its own file. This design system case study demonstrates one approach: At ABB, each file has several pages with extensive documentation on all the ways the element is used throughout the product and all the iterations it went through. Showing the full life cycle of a component is key to building and scaling a design system.

• DesignProcess

World-class articles, delivered weekly.

By entering your email, you are agreeing to our privacy policy .

Toptal Designers

• Adobe Creative Suite Experts
• Agile Designers
• AI Designers
• Art Direction Experts
• Augmented Reality Designers
• Axure Experts
• Brand Designers
• Creative Directors
• Dashboard Designers
• Digital Product Designers
• E-commerce Website Designers
• Full-Stack Designers
• Information Architecture Experts
• Interactive Designers
• Mobile App Designers
• Mockup Designers
• Presentation Designers
• Prototype Designers
• SaaS Designers
• Sketch Experts
• Squarespace Designers
• User Flow Designers
• User Research Designers
• Virtual Reality Designers
• Visual Designers
• Wireframing Experts
• View More Freelance Designers

Join the Toptal ® community.

How to Use a Design System – a Case Study

You may have heard of, studied, or used a design system at some point in your coding career. But what role do design systems actually play in our projects? Why should we even bother to create or use them?

In this guide, you'll be learning what design systems are, why they're important, typical elements of a design system, and a practical example of how to implement a design system as a designer. Let's dive in!

What is a Design System?

Design Systems are structured collections of reusable design components and elements. We use them to create a consistent and cohesive user experience across a range of products or services.

A design system is like a set of building blocks and rules for creating digital products like websites and apps. Design systems are made up of key elements like typography, color palette, icons, spacing and layout, and so on.

Importance and purpose of a Design System

Design systems are important for many reasons.

Design systems help you become more efficient. Because it's a collection of reusable components, it saves the time of producing new elements, and helps designers produce new features quickly in projects. It also serves as a productivity booster.

Collaboration

A team trying to build a product may consist of designers, developers, product managers, and others. The design system helps all members of the team make reference to the brand guidelines, no matter what they working on. It also helps to make sure everyone, including stakeholders, are involved in the design process, and facilitates collaboration.

Consistency

Design systems ensure consistency in the user interface and user experience across various products and platforms.

We wouldn't want a scenario where a button design is inconsistent on different screens, would we? That's where the design system comes in. It helps our design assets and elements stay consistent, and it can always serve as a reference point.

Scalability

Scalability here refers to the ability of the design system to grow and adapt to the changing needs of a project or an organization.

A crucial element of any design system is scalability. Design systems help in situations where the project might need to expand to accommodate different devices and platforms or when the team is expanding or when trying to accommodate new trends and practices.

How Design Systems work

To understand how a design system works, you just need to know the kinds of assets or components that make up the system and their roles.

A typical design system comprises of the following parts:

When you open a design system, one of the first things you'll see is a colour palette section. It's one of the most common elements in a design system.

Design systems define a set of of primary and secondary colours, as well as their various uses. This includes background colours, text colours, and so on.

Another typical element of a design system is typography. Every design system usually includes guidelines for typography, specifying fonts, font sizes, line height, and so on.

It may also define how typography is used for different content types like headings and body text, making sure they're accessible and legible for design use.

Icons are very important when trying to give visual clues to your users. Design systems provide a set of standard icons and guidelines for their usage, ensuring they are recognizable and consistent.

Grid and Spacing Styles

A grid system helps establish a consistent structure for different components or pages.

Design systems provide spacing guidelines specifying margins, padding, and other layout-related rules to maintain alignment to create a visually pleasing and organized design.

Documentation

Every well-structured design system has some form of documentation that usually explains how to use the elements and guidelines effectively. The documentation also helps designers and developers understand how to use and implement the design system.

UI Patterns and Components

UI patterns and components are the building blocks of a user interface. Design systems define UI patterns and components such as buttons, forms, modals, accordions, navigation bars, and so on, along with guidelines on how and when to use them.

Content Guidelines

These cover how text and imagery is used in the user interface. They may specify tone, image use, and content hierarchy, ensuring that the content is consistent and aligns with the brand guidelines.

Accessibility Guidelines

Most design systems contain accessibility guidelines in order to increase the usability of products for people with all kinds of abilities. These guidelines ensure that the design is inclusive and complies with accessibility standards like WCAG (Web Content Accessibility Guidelines). This includes colour contrast, keyboard navigation and other accessibility features.

Examples and Use Cases

Most design systems also contain examples and use cases of the design system in action to help designers and developers understand how to implement it effectively.

Differences Between a Design System and a Style Guide

Style guides and design systems are very similar and can often be confused for the same thing – but they're different.

Some differences between design systems and style guides are:

Style guides are relatively limited in scope and may not include detailed UI components or interactions.

Design systems on the other hand, are more comprehensive and encompass a broader range of elements including interactive components, user interface guidelines, amongst others.

Style guides typically focus on ensuring brand consistency, helping maintain a uniform look and feel across various materials and platforms.

Design systems aim to establish both brand and user interface consistency, by providing reusable components and interaction patterns.

Evolution and Scalability

Style guides tend to evolve more slowly, and might not be as scalable as design systems. Design systems are more adaptable and evolve with the product or service.

Style guides are mainly used by designers to ensure visual consistency across a brand. They have a limited role in facilitating collaboration amongst designers and developers.

Design systems, on the other hand, promote collaboration by providing a common language and shared resources between designers and developers.

Real-Life Examples of Design Systems

A lot of software corporations have created their own design systems to help ease the work of their designers and generally make it a smoother experience to build products.

Google, for instance, has a design system which they use for their products – you can see similar styles and elements in most of their products.

Most of these design systems are free and available to the public for use. Some examples of real life design systems are:

• Google Material Design by Google
• Apple Human Interface Guidelines by Apple
• Atlassian Design System by Atlassian
• Polaris by Shopify
• Carbon Design System by IBM

How to Use a Design System for Your Designs – Rayna UI Design System Example

For this article, we'll be using the Rayna UI Design System to illustrate how to use a design system for your designs.

It's a newer design system that I recently learned about, so I thought I'd share my experience by using it for a challenge.

Step 1 – Download the Design System

The first step will be to download the design system you're trying to use. In this case, we'll download the Rayna UI Design System. Go to their landing page @ Rayna UI and grab it from there.

Next, click on "Get Rayna UI" to download the design system.

Next, type your email in order to get the design system sent to your email address.

The link to the Figma file will be shared to your email, and you can open it.

Scroll down in the email to find the link to view the Rayna UI Figma file.

Click on the link sent to your email to open the design system. The link will open up the Rayna UI Design System on the Figma community.

Next, click on the "Open in Figma" button by the right side of your screen.  This will open up a Figma file containing all assets and components of the Rayna UI Design System.

Step 2 – Publish the Rayna UI Design System to your libraries.

The next step is to publish the Rayna UI Design System to your libraries, so you can use it for any design.

The third page on the Figma file (Get Started) contains a guide to getting started with the design system. Included in this guide are resources for beginners so you can gain a solid grasp of the basics, along with steps to take to publish and enable the library in other projects.

Follow the steps given in the guide to publish the library. First, go to the assets panel in the top-left area of your screen, and press the book icon.

When you click on the book icon, it'll bring up a modal for you to publish the library.

Click on the publish button next to the file on the modal.

I was asked to move the library to a professional team, so I could publish there. Click on the "Move to team" button to move the file.

Next, select the team file you want to publish the library to.

After selecting a team, you'll have to publish the design system to the team files.

You'll receive a notification that your library has been published.

How to Use the Design System in Your Projects

Next, we'll be learning how to implement the design system in a design. I'll be designing a sign up screen for a fintech website to illustrate this.

Before starting your design, you can copy some icons you may need from the design system to your design file. I tend to copy the buttons and input field styles I may need, if I want to adhere strictly to the design system.

For the sign up page I'm going to be designing, the details I need are the name of the website, input fields (full name, last name, email address, password, confirm password), and the buttons or CTAs (sign up and sign up with Google).

How to Design a Sign Up Web Screen

Step 1 – select a frame.

Firstly, I'll open the frame I'll be using. For this design, I'll be using the desktop frame (1440 x 1024).

To open a frame, go to the tools panel on the top left-hand corner of your screen. A panel with different kinds of frame types and sizes will come up.

Open the Desktop section and choose "Desktop" (1440 x 1024). The frame will appear on your screen, and you can start designing.

Step 2 – Add Grid Styles

I like using grids for arrangement and consistency in my designs, so I'll add a grid layout to the frame.

In the Rayna UI Design System, there are already existing grid styles so I can just choose one. To add a grid style, go to the panel on your right, and click on the 4-block menu on the layout grid section.

A list of different grid styles on the design system will come up, and you can choose any which corresponds with the kind of screen you're designing for.

Since I'm designing with a desktop frame, I'll choose Large .

You can detach instance to see the specifications of the grid style you chose. To detach instance, click on the detach icon next to the eye icon on the layout grid section.

You can now see the specifications for the grid style you chose. Since I chose Large , the grid specifications are:

• Count – 12, using columns
• Colour – F4BBAE, with opacity set to 20%
• Type – Stretch
• Width – Auto
• Margin – 112
• Gutter – 32

Step 3 – Add Content

I'll go ahead to start adding content to the screen. I'll use a text to represent my logo – Ketusha.

You can also control text styles and sizes on the design system. To do that, go to the Text panel on the left hand side of your screen.

Following the same format, I typed a heading for the form called "Sign Up".

Earlier, I suggested that you copy the icons, buttons, and input fields samples from the design system file, so you can use them easily while designing. Now, I'm going to paste the input field sample I copied in my frame.

Since I want the input field to be longer, I'll elongate it slightly to 400 width. It was previously 375 width.

Next, I'll structure the input field to how I want it to look like – without icons.

Next, I'll edit the label to the label I want for my design.

Next, I'll just duplicate the input field until I'm satisfied, and also edit all the labels.

Next, I'll add the buttons to the screen.

I'll add the "Sign up with Google" button, so the user can have different options for signing up on the platform.

Next, I'll try to paste the google icon inside the "Sign up with Google" frame but that might not be possible.

To be able to paste and replace an item inside the selection, I'll have to detach the instance. To do this, right click on the item you're trying to replace. A list of options will come up. Click on "detach instance".

After that, right click on the icon again, and "paste to replace".

The icon will be replaced instantly.

We just created a sign up page using the Rayna UI Design System!

Keep in mind that using a design system doesn't mean you cannot be creative and add your own flair. You can add your own style and creativity as much as you'd like as you go.

Using design systems is a necessary skill every designer and developer should cultivate.

Design systems are a critical component of modern product design and development, fostering collaboration, efficiency, and innovation.

Thank you for reading!

I'm an avid reader and I love art. I appreciate people that are taking little, little steps to be better in what they do; it inspires me.

If you read this far, thank the author to show them you care. Say Thanks

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

• mindful design
• student success
• product design
• ui/ux design
• watch me work
• design careers
• design inspiration

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

Design systems are all the rage and while most articles talk about what they are and best practices for creating them, at DesignerUp we've been framing them as a teaching tool with our product design students to help them better understand, explore and learn the philosophies, best practices and principles of UI design, UX and Product Design.

Aside from implementing design systems into your workflow, design systems are a tremendous untapped resource for learning how to create better user experiences and interfaces just by studying them! What better way to understand how to design an e-commerce user flow than from Shopify or an iOS mobile app than from Apple?! These are what we call Design Patterns and great product designers know how use these to inform the decisions they make with their own designs. No need to reinvent the UX wheel when the best companies in the world have already paved the way, tested them with actual users and published their UI/UX and product design methodologies online!

“Sometimes I think everything I draw is just a combination of all of the millions and millions of drawings I’ve seen.”

— Jean-Luc Godard

Quick overview:

What is a design system anyway.

In a nutshell, a design system is a collection of documents, articles, examples, code snippets, screenshots, design guidelines, components, philosophies and other digital assets for a product design company. It's usually hosted online as a website (public or internal). Think of it as a big knowledge-base that is part UI kit, part documentation with instructions, language and coding guidelines all wrapped up together.

Why do companies create them?

A design system gets created in collaboration with an entire product team (programmers, engineers, designers, product managers, C-suite team etc.)  Ideally, they come together as a committee to work on it; take inventory of all their current digital product assets (colors, logos, headers, footers, forms, code etc) and attempt to come to some consensus about how things ought to be designed, coded, presented and talked about.

It's their master plan, the source of all truth and a reference to make sure that everyone who works on their product is always on the same page, consistent and in agreeance with the way things should be.

On the implementation level, when a coder needs to repeat a snippet of code on a new page, the reusable component is right there for them to copy and paste. When a designer needs to whip up a new landing page, all the pre-designed UI symbol elements are ready to drop in and can be non-destructably edited. When a marketer needs to send out a newsletter, there is no question as to the kind of tone the copy should be written in or what the header image should be. It's all there, clearly laid out and because everyone has discussed, contributed to and agreed upon it there is no question as to what and how things need to be done.

What you can learn from them

For the purposes of this article rather than talk about how to create a design system, we are going to look at design systems from another angle and show you how you can use them and as a study guide to understanding UI/UX and product design practices and implementation.

Most design systems are setup in much the same way; a top-level navigation that shows the main categories of the system; usually something like Branding, Design, Components, Code etc. Within each of those categories, there is usually a sub-navigation or side-bar navigation that further breaks down these categories into areas like Color, Typography, Components, Forms, Guidelines etc. It's like a master class in design!

So how can you learn from this? Say you're designing an e-commerce site and the menu needs a dropdown for categories. Not sure what size your arrow should be on the dropdown or how far away from the text to place it or what it should look like when it's fully expanded? Well, you can look to a shopping system pioneer like Shopify to see how they do it!

Here is our top 10 list (in no particular order) of the greatest of the greats, what their design systems include and how you can use them to learn from and inspire your own designs.

1. Google Material Design System

Who they are:

The Google we all know and use is a behemoth of an American technology company that specializes in Internet-related services and products; including online advertising technologies, a search engine, cloud computing, software, and hardware. It is considered one of the Big Four technology companies, alongside Amazon, Apple, and Microsoft

Their design philosophy:

In terms of design, Google's publicly shared 'Material Design' system paved the way for many to follow. The absolutely insane attention to detail categorized and cataloged components in a way the design world has never so succinctly seen before.  They made the mistakes so you don't have to and gave order and meaning to the atomic design principles that all design systems are built on today. Their goals for their design system:

• Create a visual language that synthesizes the classic principles of good design with the innovation and possibility of technology and science.
• Develop a single underlying system that unifies the user experience across platforms, devices, and input methods.
• Expand Material’s visual language and provide a flexible foundation for innovation and brand expression.

Design system features:

• Material Theming
• Design Source Files
• Mobile Guidelines
• Starter Kits

How you can apply it to your work:

Material design system allows you to directly download design component source files for the most popular design software (like Sketch and Figma). They also include Material studies which demonstrate how components and theming can be used to create beautiful, usable apps.

2. Apple Human Interface Guidelines

Needing no introduction, elegant and intentional design is in the very DNA of Apple. Apple's Human Interface Guidelines is not only a design system but an incredible resource full of downloadable templates and other guidelines that you can use in your own projects.

Their design philosophy

Famously, Steve Job's Design philosophy consists of 6 pillars:

1. Craft, Above All - Meticulous attention to detail and precision 2. Empathy - A process that emphasizes empathy with user needs and an intimate connection with the feelings of the customer 3. Focus - Eliminate all of the unimportant opportunities 4. Impute - People form an opinion about a company or product based on the signals that it conveys 5. Friendliness - recognize that high-tech devices could be friendly and approachable and appeal to novice and advanced user alike 6. Finding simplicity for the future in metaphors from the past - Design simplicity should be linked to making products easy to us

Apple's external-facing design system features best practices, guidelines and resources for developers, designers and distributors for macOS, iOS, watchOS, vOS

• Visual Index
• App Architecture
• User Interaction
• System capabilities
• Visual Design
• Icons and images
• Window and View
• Fields and Labels

You can download and directly use a variety of developer and designer resources and tools in your work (such as design files, device mockups, Swift code) as well as reference their guidelines for best practices and how-tos to bring your digital visions to life.

3. Microsoft Fluent Design System

From the makers of our loved and loved to be hated on Microsoft, we all know them for their ubiquitous computer operating system Windows, computer software Office and internet browser Internet Explorer.

Microsoft's Inclusive Design methodology is born out of digital environments. It enables and draws on the full range of human diversity. Most importantly, this means including and learning from people with a range of perspectives. They believe that exclusion happens when we solve problems using our own biases. As Microsoft designers, they seek out those exclusions, and use them as opportunities to create new ideas and inclusive designs:

• Recognize exclusion
• Solve for one, extend to many
• Learn from diversity
• Iconography
• Localization

Microsoft's ecosystem of design tools and open-source components can help you get the same look as their products quickly and easily so you can create a consistent vision across Web, Windows, iOS and Android platforms and understand the logic and look of Microsoft products. It is also a great case study reference for how to make your own UI/UX designs as inclusive as possible.

4. Atlassian Design System

One of my personal favorite design systems, Atlassian makes project management and collaboration tools like Jira and Trello that are used by thousands of teams worldwide. Their focus is on agile tools for agile teams by helping them stay on track as they plan, develop, and deliver products.

Atlassian's design philosophy reflects and underpins how digital experiences can unleash the potential in any team. Their credo is aimed at helping people and teams be more effective.

• Build trust in every interaction
• Connect people to collaborate better
• Match purpose and feel familiar
• Drive momentum from end to end
• Guide mastery for greater value
• Brand guidelines
• Design Principles
• Illustration
• Personality
• Prototyping

The style of this design system can inspire other similar collaboration and management tools that you're working on such as team collaboration, product management tools, project management tools, team chats, help desks, knowledge-bases

5. Uber Design System

https://brand.uber.com/guide

Uber is a ride-hailing service that is part of the Gig-Economy (Serving both passengers and freelancers), offering services that include peer-to-peer ridesharing, ride service hailing, food delivery (Uber Eats), and a micromobility system with electric bikes and scooters.

From sub-brands to internal teams and products to programs, Uber is about moving people to where they want to be. In their day, in their lives, in the moment-They believe that movement ignites opportunity.

• Brand Architecture
• Composition
• Photography
• Tone of voice

If you are in the working in the area of travel or transportation, gig economy or outer space; whether it be via scooter, career pigeon or bullet train, Uber is an amazing example of how to tackle problems related to getting from point A to point regardless of where you want to go.

👉🏽 You can also download the Atlassian Design Systems for free in the Figma Community

6. Shopify Design System

Shopify is an all-in-one e-commerce platform to start, run, and grow a business. It powers over 1,000,000 businesses worldwide.

Shopify believes that commerce can be made better for and more accessible to everyone. Their aim is to help people achieve independence by making it easier to start, run, and grow a business. Shopify's shared values are at the heart of the experiences they build:

• Considerate - Above all else, we show care for the people who use our tools and products
• Empowering - We want people to feel like they can accomplish whatever they’re trying to do.
• Crafted - Shopify experiences should feel like they were created with the highest level of craftsmanship
• Efficient - Shopify experiences should help people achieve their goals quickly, accurately, and with less effort
• Trustworthy - We constantly work to recharge our users’ trust batteries.
• Familiar - We want people to feel comfortable using our products, whether it’s their first time using them or their hundredth
• Accessibility
• Illustrations
• Interaction states
• Data visualizations

The more obvious way to utilize Shopify's design system is as a practical guide to help you understand how to design for the Shopify platform. On another level, it provides a wealth of knowledge and inspiration for how to use language, content in design, visual elements and UI components to craft better product experiences for any e-commerce related project. This design system itself is beautifully designed...take note.

👉🏽 You can also download the Shopify Systems for free in the Figma Community

7. IBM Carbon Design System

Though IBM was once in the personal computing game with Apple and Microsoft, they have since shifted focus to large enterprise IT needs. They offer everything from business consulting to software development services to IT hosting & management, to software products to hardware (servers, mainframes, storage), and even financing.

IBMers believe in progress—that by applying intelligence, reason and science they can improve business, society and the human condition. Given their scale and scope, they believe that good design is not just a requirement, it's a deeper responsibility to the people they serve and the relationships they build.

Carbon tools and resources include design files for Sketch, Axure and Adobe XD as well as resources for developers.

• Data Visualization

If you are working on enterprise systems or large-scale corporate products (internally or externally) Carbon is a massive example of how to do it successfully. You can use this as a guide for how to manipulate heavy data in elegant and digestible ways and present it through compelling visualizations.

👉🏽 You can download the Carbon Design System for free in the Figma Community

8. Mailchimp Design System

Having recently updated their branding and identity system, Mailchimp has been a long-time leader in user-friendly email marketing and has grown beyond email into an all-in-one marketing platform for small businesses.

Mailchimp empowers businesses to grow while staying true to themselves. Their brand embodies what's important to the Mailchimp team — a devotion to craft, a love of creative expression, and an obsession with quality.

• Grid System

If you're working on a project in the realm of email, marketing, business, strategy or ads, Mailchimp can provide some useful tips and examples of how to do it right while still pushing the boundaries of expression and creativity. There are many innovative design ideas to pull from and ways to make complex tasks (such as creating automated email campaigns and newsletters); normally relegated to power users, marketing gurus or tech-savvy individuals, more accessible through approachable and intuitive UX.

9. Salesforce Lightning Design System

Salesforce pioneered cloud-based CRM software and has helped 150,000+ companies run more effectively they deliver personalized experiences to your customers through integrated CRM that enhances marketing, sales, commerce, service, IT, and more.

Ohana is the Hawaiian word for intentional family, and is what drives their company culture. Their 4 core values which serve as the foundation for their decisions, actions, and communication are:

• Customer Success
• Design Guidelines
• Components (lots of them!)

If you are working on content management systems, AI, sales, commerce or analytics platforms that focus heavily on user experience, interactions, and flows you would be wise to look towards the trailblazers themselves for inspiration and guiding principles.

👉🏽 You can download the Salesforce Design System for free in the Figma Community

10. Helpscout Design System

Help Scout is online support ticketing at its finest. Carefully crafted for a great customer experience, none of the typical help desk obstructions exist. All their efforts go into making software that gives teams the scale and efficiency of a help desk, but with a seamless customer experience.

• Brand Values
• Trustworthy
• Human & Organic

One of the smaller yet beautifully designed systems, HelpScout and it's broken down into 3 main sections:

• Visual Elements
• Content Style
• Product Design

Great for your work involving help desks, ticket submission systems, knowledge bases, FAQs, wikis and support forums.

Bonus 11. US Web Design Government Design System

Not the most glamorous of design systems, but believe it or not the U.S government actually has design principles and guidelines for their online touch-points! Not to be underestimated or understated, government websites (probably more than any other) touch every single one of us and while many have a long way to go in terms of improving UX, it's nice to know that some focus is being put into the development of this sector.

They believe that real user needs should inform product decisions. Whether their audience includes members of the public or government employees, decision-makers must include real people in our design process from the beginning and test the assumptions they make and the products and services they build with real people, to keep them focused on what is most useful and important.

• Start with real users
• Embrace accessibility
• Promote continuity
• Design Tokens
• Page Templates

If you are working on a system that mostly focuses on forms, fields, inputs, tables white papers and links this is the system to refer to!

“It’s not where you take things from—it’s where you take them to.”

— Dash Shaw

So those are our choices for top design systems and what you can learn from them. Hopefully, this will have you seeing them in a new light; as learning tools and resources to help you understand UI, UX and product design better and give you inspiration when applying it to your own work.

📚 If you're interested in learning the end-to-end process of UX/UI and product design come learn with us in our Product Design Course !

Quotes from the book Steal Like an Artist by Austin Kleon

The best design resources, in your inbox

Tips, tricks, articles and freebies. It's all happening in the DesignerUp Newsletter. View the archives →

We'll only send the occasional email and promise not to spam.

© Copyright 2022 DesignerUp. All Rights Reserved.

Case Study: Design Systems in Action

Table of content, what is a design system and why do you need one.

A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications. Design systems help ensure consistency in user experience and speed up the development process. They also allow for flexibility when adding new features or making changes to existing ones. Examples of design systems include Google's Material Design language, Salesforce's Lightning Design System, and Airbnb's design system.

The Benefits

Design systems come with a multitude of benefits:.

• A consistent visual language across projects – it saves time and money by making it easier for teams to reuse existing components rather than starting from scratch every time they need something new.
• Easier maintenance and scalability – Design systems are often built for future proofing, allowing teams to easily make updates or add new features. This helps to keep customers happy as they get the most up-to-date experience.
• Faster development cycles – With a design system in place, it becomes easier to quickly test out ideas without having to rebuild the entire system from the ground up.

How to Implement a Design System in Your Company

Implementing a design system in your company is all about understanding the needs of your customers and developing a solution that meets those needs. Here are some steps you can take to get started:

• Define your user personas – Who are your customers and what do they need from your product?
• Identify the core components of your design system – What will be included in your system? How many different types of components do you need?
• Create a library of reusable components – This library should include all the necessary elements for building out your design system

Case Study Overview

XYZ company is a large online retailer that faced challenges managing user experience consistency across multiple web, mobile and third-party applications.

To address this challenge, they developed their own design system to manage the creation of a unified customer experience. They created custom components such as buttons, icons, navigation bars and more – all based on their brand guidelines. As a result, they were able to ensure consistency across all their products.

Design systems are crucial for creating a cohesive brand image. Let's take a look at a real-life case study to understand their importance. A global financial institution was struggling with inconsistencies in their branding elements across various products and platforms. This was not only affecting their brand identity but also their customer experience.

To overcome this challenge, they adopted a design system that helped them unify their branding elements and provided a framework for creating consistent components. The design system made it easier for the teams to collaborate, resulting in a significant reduction in design time and cost. This real-world example showcases the effectiveness of design systems in practice and how they can help businesses achieve their branding goals.

Overall, design systems are becoming increasingly popular for companies of all sizes and complexity levels. By creating a unified visual language, design systems help teams create consistent experiences for customers while reducing development time and costs. Companies can apply the process outlined in this case study—

Challenges & Solutions

When it comes to creating and implementing design systems, there are a few common challenges that many companies face. One of the biggest challenges is ensuring that all branding elements are consistent throughout the system. It's important to put in the effort to ensure that all components of the design system align with the overall brand image. Another challenge is making sure that the design system is user-friendly and easy for designers to work with. This means creating clear documentation and organizing assets in an intuitive way. Fortunately, there are solutions to these challenges. By investing the time and resources to create a comprehensive design system, companies can ensure that their brand is presented cohesively across all platforms, while also streamlining the design process for their teams.

Final Thoughts

After analyzing the case study, it's clear that integrating a design system into your company's workflow is essential. The benefits of utilizing standardized branding elements and components cannot be overstated. A design system allows for greater efficiency, consistency, and flexibility when it comes to designing products and services. By streamlining the design process, teams can focus on creating high-quality user experiences rather than reinventing the wheel with each project. Not only does this enhance the overall quality of your company's output, but it also saves time and resources. Other companies can also benefit from adopting a design system, regardless of their size or industry. By prioritizing the importance of design and investing in a design system, companies can achieve a greater level of cohesion and professionalism in their visual communication.

In conclusion, the case study has served to highlight the countless advantages of using design systems in real projects. Designers now have the tools and resources to create beautiful, intuitive, and modern products that not only look great, but fulfill user needs with ease. From typography to color palettes to buttons and layouts, there is no limit to what a well-constructed design system can accomplish. A successful product should be developed within a coherent system and optimized for efficiency—all of which are aspects that are easy to achieve with design systems in action. So what are you waiting for? It's time for designers to start utilizing their skills, pushing themselves out of their comfort zone, and leveraging design systems to bring even bigger and better ideas into reality.

Download our Design System Blueprint

Are you looking for a comprehensive design system blueprint for your next project? Look no further! Enter your email below to receive our exclusive Design System Blueprint. This resource, created by NEUE WORLD, is packed with valuable insights and practical tips to help you build a solid design system that will elevate your project to the next level.

✓ The Basic Checklist

✓ Designing from Scratch

✓ With Existing Designs

✓ Inventory Checklist

Continue Learning Design Systems

curious if we're a good fit?

Setup a discovery call

We're a team of passionate designers and strategists dedicated to unlocking your brand's potential. Partner with us.

Case studies

Burgeon Labs

MC 2 Finance

Equity Edge

On The Layer

Webflow Beginners

Webflow Intermediate

Design Systems

Webflow Tools

Webflow Cloneables

• Mini Projects
• Web Development
• Career Guidance
• Developer Essentials
• Data Structures and Algorithms
• Programming Languages
• Crio Community
• In the News

A Comprehensive Guide to System Design

In the dynamic landscape of software engineering, system design stands as a pivotal phase that lays the foundation for robust and scalable applications. Mastering the art of system design involves understanding intricate design concepts that fuel innovation and ensure seamless functionality. In this comprehensive guide, we'll delve into the world of system design, explore its core concepts, and equip you with the knowledge to excel in this crucial aspect of software engineering.

Table of Contents

What is system design, key concepts in system design, understanding the components of system design, the process of system design, best practices for effective system design, case studies of successful system designs.

At its essence, system design is the blueprint that transforms concepts and requirements into tangible software structures. It is the strategic process of defining the architecture, components, and interactions of a software system to fulfill specific functional and non-functional requirements. It involves translating high-level concepts into concrete designs that can be implemented and executed efficiently.

Modularity and Abstraction: Breaking down a complex system into modular components promotes reusability, ease of maintenance, and efficient collaboration among developers.

Coupling and Cohesion: Striking the right balance between component interdependence (coupling) and the functional relatedness within a component (cohesion) is crucial for a well-structured system.

Architectural Patterns: Different architectural patterns, such as client-server, microservices , and monolithic, offer guidelines for organizing components and handling interactions.

Data Flow and Communication: Designing effective data flow and communication mechanisms ensures seamless information exchange between system components.

Trade-offs and Constraints: System designers often face trade-offs between factors like performance, cost, and development time. Understanding these trade-offs is vital to making informed decisions.

A well-crafted software system is a composition of carefully crafted components, each serving a specific purpose and collaborating seamlessly to bring a digital vision to life. Every component is designed and precisely placed to ensure smooth operation and optimal performance. These components encompass a spectrum of functionalities, from managing data and user interactions to securing sensitive information and facilitating communication between different parts of the system.

Let's take a closer look at these fundamental components that form the backbone of a well-structured system design:

Components and Modules: Each component encapsulates a specific functionality, allowing for modularity and reusability. This means that developers can focus on refining and enhancing individual components without disrupting the entire system.

Data Management: Data management involves designing databases , defining schemas, and implementing strategies for data storage, retrieval, and maintenance. A well-designed data management component ensures that information flows seamlessly through the system, enabling accurate and timely decision-making.

User Interfaces: A user interface component involves creating intuitive, aesthetically pleasing, and user-friendly interfaces that facilitate smooth interactions. From buttons and menus to forms and visual elements, a well-designed user interface component enhances user experience, making it easy for users to navigate and engage with the application.

Communication Protocols: In a world where systems often need to talk to each other, communication protocols act as the language that enables effective dialogue. These protocols define the rules and conventions for data exchange between different components or even between separate systems. Whether it's a web service requesting information from a server or two modules sharing critical data, a robust communication protocol ensures that information is transmitted accurately and efficiently.

Security Measures: With the increasing importance of data privacy and cybersecurity, a dedicated security component is essential. This component encompasses encryption, authentication, access control, and other measures to safeguard sensitive information and prevent unauthorized access. A well-designed security component shields the software system from potential threats and vulnerabilities.

System design is a structured process that involves several stages. It involves a methodical process of conceptualization, refinement, and construction. This process serves as the blueprint for transforming abstract ideas into tangible and functional software systems.

Now, let's delve into the phases that constitute the process of system design:

Requirements Analysis : It is the foundation upon which the entire structure rests. This involves understanding user needs, functional specifications, and potential challenges to ensure that the design aligns with the project's goals.

Architectural Design : The architectural design phase shapes the high-level structure of the software. Here, designers determine the major components, their relationships, and the overall flow of information. This stage lays the groundwork for the subsequent design steps.

Component Design : The component design phase adds depth to the narrative. Designers delve into the specifics of each module, determining how they function and interact. This involves defining interfaces, algorithms, and internal mechanisms that contribute to the overall narrative of the software.

Database Design : The database design phase sculpts the data storage and retrieval mechanisms. Designers create a blueprint for organizing data, defining tables, relationships, and access methods. This step ensures that data is managed efficiently and can be accessed when needed.

User Interface Design : Designers craft user interfaces that are visually appealing and user-friendly. They create layouts, select fonts, and design interactive elements that enhance the user experience.

Integration and Testing : The integration and testing phase brings all the components together. System designers integrate different modules, test their interactions, and identify and rectify any issues. This step ensures that the entire system functions seamlessly as a unified entity.

• Thoroughly understand user needs and requirements before diving into design.
• Create modular components to enhance reusability and maintainability.
• Maintain comprehensive documentation to aid understanding and future development.
• Develop prototypes to validate design concepts and gather user feedback.
• Keep It Simple. Strive for simplicity in design to reduce complexity and improve system clarity.

Let's dive into some fascinating real-world examples that showcase how the principles of system design have been applied to create impressive and impactful digital experiences. These case studies provide a glimpse into how thoughtful design choices can lead to revolutionary solutions and redefine entire industries.

Netflix Streaming Service

Netflix, the world's leading streaming platform, is a prime example of successful system design. Behind the scenes, Netflix uses a microservices-based architecture . Think of this as a city with different neighborhoods, each serving a unique purpose. These microservices allow Netflix to deliver content seamlessly to millions of users worldwide. Just like each neighborhood has its own shops and services, each microservice handles a specific task, like user authentication or video streaming. This modular approach ensures scalability, easy maintenance, and quick updates, contributing to the smooth streaming experience that millions enjoy daily.

Uber's Real-time Matching

Uber's success is built on a robust system design that enables real-time matching of drivers and riders. Imagine a magic matchmaking spell that instantly connects people needing a ride with available drivers. Uber's system uses advanced algorithms and location data to make this happen. It's like having a digital GPS guiding drivers to their passengers in real-time. This efficient system design ensures that users get reliable rides quickly, making urban transportation more convenient and accessible.

Amazon Web Services (AWS)

Amazon Web Services (AWS) is a game-changing example of system design in the cloud computing world. Imagine having a supercharged toolbox of digital tools and resources that you can access from anywhere. AWS provides this by offering a wide range of services, like storage, computing power, and databases , through the cloud. It's like having a virtual workshop where developers can build and deploy applications without worrying about the hardware. AWS's scalable and flexible system design has transformed how businesses manage their IT infrastructure, enabling startups and large enterprises alike to innovate and grow rapidly.

System design is the backbone of software engineering, shaping the way applications function, scale, and deliver value to users. By understanding the core concepts, following a systematic design process, and considering key factors, developers can create software systems that meet user expectations and adapt to changing technological landscapes. Learning system design empowers software engineers to craft innovative, reliable, and efficient solutions that drive the digital world forward.

Written by Amani Undru

Top Skills to Land Tech Roles at Global MNCs in India

Empowering the Future: Celebrating Developers of India

20+ Outstanding UX/UI Design Case Studies

Discover an expertly curated collection of 20+ inspirational UX/UI design case studies that will empower you to create outstanding case studies for your own portfolio.

• Comprehensive end-to-end case studies covering research, ideation, design, testing, and conclusions.
• Perfect for designers building portfolios and looking for inspiration to create their own case studies.
• Learn new methods and techniques, improve your understanding, and apply them to your projects.
• Gain insights from the successes and challenges of accomplished designers.

Want to get access to 30+ more case studies including smart tagging system?

Download full version

All case studies included in this collection are sourced from real designers' portfolios and are used for the purpose of learning and inspiration. The original authors retain all rights to their work.

To read this content please select one of the options below:

Please note you do not have access to teaching notes, development of a dedicated process simulator for the digital twin in apparel manufacturing: a case study.

International Journal of Clothing Science and Technology

ISSN : 0955-6222

Article publication date: 16 May 2024

The purpose of this study is to introduce a dedicated simulator to automatically generate and simulate a balanced apparel assembly line, which is critical to the digital twin concept in apparel manufacturing. Given the low automation level in apparel manufacturing, this is a first step toward the implementation of a smart factory based on cyber-physical systems.

Design/methodology/approach

The mixed task assignment algorithm was implemented to automatically generate a module-based apparel assembly line in the developed simulator. To validate the developed simulator, a case study was conducted using process analysis data of technical jackets obtained from an apparel manufacturer. The case study included three scenarios: calculating the number of workers, selecting orders based on factory capacity and managing unexpected worker absences.

The developed simulator is approximately 97.2% accurate in assigning appropriate tasks to workstations using the mixed task assignment algorithm. The simulator was also found to be effective in supporting decision-making for production planning, order selection and apparel assembly line management. In addition, the module-based line generation algorithm made it easy to modify the assembly line.

Originality/value

This study contributes a novel approach to address the challenge of low automation levels in apparel manufacturing by introducing a dedicated simulator. This dedicated simulator improves the efficiency of virtual apparel assembly line generation and simulation, which distinguishes it from existing commercial simulation software.

• Task assignment algorithm
• Line balancing
• Apparel assembly line
• Automatic assembly line generation
• Apparel manufacturing
• Digital twin

Kim, M. and Kim, S. (2024), "Development of a dedicated process simulator for the digital twin in apparel manufacturing: a case study", International Journal of Clothing Science and Technology , Vol. ahead-of-print No. ahead-of-print. https://doi.org/10.1108/IJCST-01-2024-0017

Emerald Publishing Limited

Copyright © 2024, Emerald Publishing Limited

Related articles

We’re listening — tell us what you think, something didn’t work….

Report bugs here

All feedback is valuable

Please share your general feedback

Join us on our journey

Platform update page.

Visit emeraldpublishing.com/platformupdate to discover the latest news and updates

Questions & More Information

Answers to the most commonly asked questions here

Case study of condominium management in Brazil: survey of 30 years of maintenance and renovation costs of a 1982 multifamily residential building

• Research Article
• Published: 15 May 2024
• Volume 9 , article number  88 , ( 2024 )

Cite this article

• Adryelle Dias Novaes Machado   ORCID: orcid.org/0009-0006-7623-7671 1 ,
• Anna Luiza Dias Siqueira   ORCID: orcid.org/0009-0001-4092-828X 1 ,
• Júlia Assumpção de Castro   ORCID: orcid.org/0000-0002-2175-0199 1 ,
• Aldo Ribeiro de Carvalho   ORCID: orcid.org/0000-0003-2767-4374 1 ,
• Romário Parreira Pita   ORCID: orcid.org/0009-0008-8196-6443 1 &
• Julia Castro Mendes   ORCID: orcid.org/0000-0002-6323-5355 1 , 2  

This study carries out a case study of maintenance costs in a multi-family residential building built in 1982 in a mid-size city in Brazil. The condominium's monthly cost reports (maintenance fees) were analyzed for 30 years, between 1991 and 2021. This long period of analysis unprecedented in the literature. Expenses were classified by system and type of maintenance (preventive, corrective or modernization renovation). We identified that maintenance on elevator systems and gardens  summed up the highest costs throughout the period, while envelope conservation, sewage systems and water tanks presented the lowest costs. Disregarding the extreme years and correcting for inflation, the average expenditure on maintenance in the last 5 years (2017–2021) was 175% higher than the first 5 years analyzed (1991–1995), with the condominium fee being 43.6% higher. If the (predictable) maintenance expenses over the years were considered from the beginning of the building's operation, current families could be paying around 15% less in condominium fees. In conclusion, for an efficient maintenance management system, construction professional must focus on maintenance from the project design stage, provide a financial reserve for future upkeeping and renovation from the beginning of occupation, and prepare a robust user manual.

This is a preview of subscription content, log in via an institution to check access.

Access this article

Price includes VAT (Russian Federation)

Instant access to the full article PDF.

Rent this article via DeepDyve

Institutional subscriptions

Similar content being viewed by others

Economic Relevance of Building Elements—Studies, New Framework, Evolutions and Support for Refurbishment Operations

Maintenance in Real Estate and Manufacturing Industries: Differences, Problems, Needs and Potentials - Four Case Studies

Management and maintenance of multi-family buildings in Croatia: perspective of co-owners’ representatives

References  .

Silva MM (2020) Bim na operação e manutenção de edifícios. Build Inform Model 20

Possan E, Demoliner CA (2013) Desempenho, durabilidade e vida útil das edificações: abordagem geral. Revista Técnico-Científica do CREA PR, p 14

de Carvalho AR, da Silva Calderón-Morales BR, Júnior JCB, de Oliveira TM, Silva GJB (2023) Proposition of geopolymers obtained through the acid activation of iron ore tailings with phosphoric acid. Constr Build Mater 403:133078

Article   Google Scholar  

Chen F, Zhao J, Zhong H, Feng Y, Chen C, Xie J (2023) An investigation of the durability of ultra-lightweight high-strength geopolymeric composites. J Build Eng 80:107990

França S, Oliveira MNC, Sousa LN, de Moura Solar Silva MV, Borges PHR, da Silva Bezerra AC (2023) The durability of alkali-activated mortars based on sugarcane bagasse ash with different content of Na2O. J Build Pathol Rehabil 8:74

Joshi SP, Ramaswamy V, Sohail MAS (2023) Enhancing frost resistance and durability of self-compacting concrete through basalt fiber reinforcement. J Build Pathol Rehabil. https://doi.org/10.1007/s41024-023-00346-7

Ghodousian O, Garcia R, Ghodousian A, Ayandeh MHMN (2024) Properties of fibre-reinforced self-compacting concrete subjected to prolonged mixing: an experimental and fuzzy logic investigation. J Build Pathol Rehabil 9:22

Betz T, El-Rayes K, Grussing M, Bartels L (2023) Optimizing facility maintenance planning under uncertainty. J Build Eng 77:107479

Solanki SK, Paul VK, Singh V (2023) Blueprint for maintenance management of institutional buildings. J Build Pathol Rehabil 8:84

ABNT (2021) NBR 15575: Edifcações habitacionais — Desempenho. Associação Brasileira de Normas Técnicas, Rio de Janeiro

Google Scholar  

Adegoriola MI, Lai JH, Abidoye R (2023) Critical success factors of heritage building maintenance management: an ISM-MICMAC analysis. J Build Eng 75:106941

Bolina FL, Tutikian BF, Helene P (2019) Patologia de Estruturas. Oficina de Textos, São Paulo

ABNT (2024) NBR 5674 - Manutenção de edificações: Requisitos para o sistema de gestão de manutenção. Associação Brasileira de Normas Técnicas, Rio de Janeiro

ABNT (2011) NBR 14037: Diretrizes para elaboração de manuais de uso, operação e manutenção das edificações — Requisitos para elaboração e apresentação dos conteúdos. ABNT, Rio de Janeiro

Medeiros MHFD, Andrade JJ, Helene P (2011) Durabilidade e Vida Útil das Estruturas de Concreto. Em Concreto: Ciênc Tecnol 1:773–808

S Muduc (2021) Análise de custo-benefício da manutenção corretiva versus manutenção preventiva das infraestruturas da Guarda Nacional Republicana. Lisboa

Silva BAP (2013) Avaliação de edifícios em serviço: Índice de custo de manutenção de edifícios. Universidade do Porto, Porto - Portugal

G1 (2023) Laudo aponta falhas na construção e problemas de manutenção no prédio em que 13 sacadas caíram de uma vez em Belém. [Online]. Available: https://g1.globo.com/pa/para/noticia/2023/07/20/laudo-aponta-falhas-na-construcao-e-problemas-de-manutencao-no-predio-em-que-13-sacadas-cairam-de-uma-vez-em-belem.ghtml . [Acesso em 09 Agosto 2023].

G1 (2020) Dois engenheiros e um pedreiro são indiciados pelo desabamento do Edifício Andrea, em Fortaleza. [Online]. Available: https://g1.globo.com/ce/ceara/noticia/2020/01/30/dois-engenheiros-e-um-pedreiro-sao-indiciados-pelo-desabamento-do-edificio-andrea-em-fortaleza.ghtml . [Acesso em 21 Agosto 2023].

G1 (2019) Falta de manutenção em condomínios pode causar acidentes. [Online]. Available: https://g1.globo.com/fantastico/noticia/2019/03/31/falta-de-manutencao-em-condominios-pode-causar-acidentes.ghtml . [Acesso em 09 Agosto 2023].

Rocha T, Gonçalves V, Duarte D, Omore A, Machado M, Silva F (2023) Analysis of red stains on building facades in Bahia, Brazil. J Build Pathol Rehabil 8:82

Dzulkifli N, Sarbini NN, Ibrahim IS, Abidin NI, Yahaya FM, Azizan NZN (2021) Review on maintenance issues toward buildinung maintenance management best practices. J Build Eng

Batista P, Pessoa R, Melhado PYS (2018) Percepção dos usuários para gestão da manutenção predial. Estudo de caso de edificação residencial, Porto Alegre

Ersching MKS (2017) Avaliação de manuais de uso, operação e manutenção de edificações. Estudo de caso em Balneário Camboriú, Florianópolis

Pallaoro AM, Roscoff NDS, Costella MDM, Lantelme EMV, Costella MF (2018) Análise de Manuais de Uso, Operação e Manutenção de Edificações Habitacionais com foco na Norma de Desempenho. em VXII Encontro Nacional de Tecnologia do Ambiente Construído, Foz do Iguaçu

Neves J, Garcia D, Santana V, Lopes C, Mendes J (2021) Desenvolvimento de um guia de reparos para diferentes tipos de patologia relativos à umidade nas edificações. em VXI Congreso Latinoamericano de Patología de La Construcción y XVII de Control de Calidad en la Construcción

Hippert MAS, Longo OC, Moreira AC (2019) RFID na edificação: proposta de modelo de sistema para organização das informações de manutenção. Ambiente Construído

Viana VLB, Carvalho MTM (2021) Prioritization of risks related to BIM implementation in brazilian public agencies using fuzzy logic. J Build Eng 36:102104

Morais JMPD, Cirino MAG, Lôbo JMC, Silva EMD, Barboza EN, Oliveira BBD, Souza JHAD (2020) Analysis of constructive pathologies: a case study in a school in the city of Juazeiro do Norte, Ceará, Brazil. Res Soc Dev 9(7)

Filho ECDM, Rabbani ERK, Júnior BB (2012) Avaliação da segurança do trabalho em obras de manutenção de edificações verticais. Produção 22(4):817–830

Souza J, Silva A, Brito J, Bauer E (2018) Application of a graphical method to predict the service life of adhesive ceramic external wall claddings in the city of Brasília, Brazil. J Build Eng 1–13

Lignos A (2022) Conversão entre moedas brasileiras. [Online]. Available: http://www.igf.com.br/calculadoras/conversor_1.aspx

Pessanha EGDF, Pereira BB (2017) Brazilian shipbuilding and workers between tradition and innovation Shipyards Caneco/Rio Nave and Mauá – Rio de Janeiro, 1950–2014. Amsterdam University Press, Amsterdam

Silva CRLD, Carvalho MAD (1995) Taxa de câmbio e preços de commodities agrícolas. Informações Econômicas, 25, Maio

Brasil CDB (2022) Calculadora do Cidadão. [Online]. Available: https://www3.bcb.gov.br/CALCIDADAO/publico/corrigirPorIndice.do?method=corrigirPorIndice

BRASIL CDDD (2014) Lançado há 20 anos, Plano Real acabou com a hiperinflação. [Online]. Available: https://www.camara.leg.br/tv/437249-lancado-ha-20-anos-plano-real-acabou-com-a-hiperinflaca . [Acesso em 25 Julho 2023]

G1 (2014) Entenda a crise na Crimeia. [Online]. Available: https://g1.globo.com/mundo/noticia/2014/03/entenda-crise-na-crimeia.html . [Acesso em 27 Julho 2023]

G1 (2022) Guerra na Ucrânia: o que aconteceu até agora?. [Online]. Available: https://g1.globo.com/mundo/ucrania-russia/noticia/2022/02/25/guerra-na-ucrania-o-que-aconteceu-ate-agora.ghtml . [Acesso em 25 Julho 2023]

Moraes DASD, Medeiros CM, Teixeira EDC, Frade CM (2022) Pandemia Covid-19: impactos na construção civil no estado da Paraíba. Braz J Dev 10

Ribas R (2019) Para compensar condomínio alto, donos de imóveis oferecem aluguéis mais baratos. [Online]. Available: https://oglobo.globo.com/economia/imoveis/para-compensar-condominio-alto-donos-de-imoveis-oferecem-alugueis-mais-baratos-ate-de-graca-23731880

Saraiva MSM (2010) A importância da Norma de implementação de Sistemas de Gestão da Manutenção na integração de Sistemas de Gestão. Universidade da Beira Interior, Covilhã

ABNT (2014) NBR 6118: Projeto de estruturas de concreto – Procedimento. Associação Brasileira de Normas Técnicas, Rio de Janeiro

Download references

Acknowledgements

We would like to express our gratitude to the institutions that offered financial support for this work: CAPES (Coordenação de Aperfeiçoamento de Pessoal de Nível Superior - phD scholarship awarded to Aldo Ribeiro de Carvalho and Júlia Assumpção de Castro - finance code 001); CNPq (Conselho Nacional de Desenvolvimento Científico e Tecnológico - grant 305818/2023-6 - PQ Researcher - for Julia Mendes) and PROPPI/UFOP (Pró-Reitoria de Pesquisa e Inovação da UFOP).

The authors have not disclosed any funding.

Author information

Authors and affiliations.

Postgraduate Program in Civil Engineering, Federal University of Ouro Preto, Ouro Preto, Minas Gerais, CEP 35402-163, Brazil

Adryelle Dias Novaes Machado, Anna Luiza Dias Siqueira, Júlia Assumpção de Castro, Aldo Ribeiro de Carvalho, Romário Parreira Pita & Julia Castro Mendes

Postgraduate Program in Civil Engineering, Federal University of Juiz de Fora, Juiz de Fora, Minas Gerais, CEP 36036-900, Brazil

Julia Castro Mendes

You can also search for this author in PubMed   Google Scholar

Contributions

All authors contributed to the study conception and design. Conceptualization: Júlia Assumpção de Castro, Romário Parreira Pita ; Methodology: Julia Castro Mendes; Formal analysis and investigation: Adryelle Dias Novaes Machado, Anna Luiza Dias Siqueira, Júlia Assumpção de Castro, Aldo Ribeiro de Carvalho; Writing: Júlia Assumpção de Castro, Aldo Ribeiro de Carvalho; Writing - review and editing: Aldo Ribeiro de Carvalho; Resources: Julia Castro Mendes; Supervision: Julia Castro Mendes. All authors read and approved the final manuscript.

Corresponding author

Correspondence to Júlia Assumpção de Castro .

Ethics declarations

Competing interests.

The authors declare no competing interests.

Additional information

Publisher's note.

Springer Nature remains neutral with regard to jurisdictional claims in published maps and institutional affiliations.

Appendix Correction index by ipca (IBGE)

Rights and permissions.

Springer Nature or its licensor (e.g. a society or other partner) holds exclusive rights to this article under a publishing agreement with the author(s) or other rightsholder(s); author self-archiving of the accepted manuscript version of this article is solely governed by the terms of such publishing agreement and applicable law.

Reprints and permissions

About this article

Machado, A.D.N., Siqueira, A.L.D., de Castro, J.A. et al. Case study of condominium management in Brazil: survey of 30 years of maintenance and renovation costs of a 1982 multifamily residential building. J Build Rehabil 9 , 88 (2024). https://doi.org/10.1007/s41024-024-00433-3

Download citation

Received : 15 January 2024

Revised : 22 April 2024

Accepted : 24 April 2024

Published : 15 May 2024

DOI : https://doi.org/10.1007/s41024-024-00433-3

Share this article

Anyone you share the following link with will be able to read this content:

Sorry, a shareable link is not currently available for this article.

Provided by the Springer Nature SharedIt content-sharing initiative

• Building maintenance
• Maintenance costs
• Use and operation manual
• Find a journal
• Publish with us
• Track your research

Preprint  

• Preprint egusphere-2024-1030

Long Short-Term Memory Networks for Real-time Flood Forecast Correction: A Case Study for an Underperforming Hydrologic Model

Abstract. Flood forecasting systems play a key role in mitigating socio-economic damages caused by flooding events. The majority of these systems rely on process-based hydrologic models (PBHM), which are used to predict future river runoff. To enhance the forecast accuracy of these models, many operational flood forecasting systems implement error correction techniques, which is particularly important if the underlying hydrologic model is underperforming. Especially, AutoRegressive Integrated Moving Average (ARIMA) type models are frequently employed for this purpose. Despite their high popularity, numerous studies have pointed out potential shortcomings of these models, such as a decline in forecast accuracy with increasing lead time. To overcome the limitations presented by conventional ARIMA models, we propose a novel forecast correction technique based on a hindcast-forecast Long Short-Term Memory (LSTM) network. We showcase the effectiveness of the proposed approach by rigorously comparing its capabilities to those of an ARIMA model, utilizing one underperforming PBHM as a case study. Additionally, we test whether the LSTM benefits from the PBHM's results or if a similar accuracy can be reached by employing a standalone LSTM. Our investigations show that the proposed LSTM model significantly improves the PBHM's forecasts. Compared to ARIMA, the LSTM achieves a higher forecast accuracy for longer lead times. In terms of flood event runoff, the LSTM performs mostly on par with ARIMA in predicting the magnitude of the events. However, the LSTM majorly outperforms ARIMA in accurately predicting the timing of the peak runoff. Furthermore, our results provide no reliable evidence of whether the LSTM is able to extract information from the PBHM's results, given the widely equal performance of the proposed and standalone LSTM models.

• Preprint (PDF, 16342 KB)
• Preprint (16342 KB)
• Metadata XML

Status : open (until 09 Jul 2024)

Report abuse

Please provide a reason why you see this comment as being abusive. You might include your name and email but you can also stay anonymous.

Please provide a reason why you see this comment as being abusive.

Please confirm reCaptcha.

Model code and software

Model code for "Long Short-Term Memory Networks for Real-time Flood Forecast Correction: A Case Study for an Underperforming Hydrologic Model" Sebastian Gegenleithner, Manuel Pirker, Clemens Dorfmann, Roman Kern, and Josef Schneider https://github.com/tug17/ForecastModel

Interactive computing environment

Plots for "Long Short-Term Memory Networks for Real-time Flood Forecast Correction: A Case Study for an Underperforming Hydrologic Model" Sebastian Gegenleithner, Manuel Pirker, Clemens Dorfmann, Roman Kern, and Josef Schneider https://github.com/tug17/ForecastModel

Viewed (geographical distribution)

Sebastian gegenleithner, manuel pirker, clemens dorfmann, josef schneider.