{"id":18218,"date":"2023-10-11T10:42:34","date_gmt":"2023-10-11T10:42:34","guid":{"rendered":"https:\/\/uxmag.com\/?p=18218"},"modified":"2023-10-11T10:42:36","modified_gmt":"2023-10-11T10:42:36","slug":"10-things-no-one-told-me-about-design-systems","status":"publish","type":"post","link":"https:\/\/uxmag.com\/articles\/10-things-no-one-told-me-about-design-systems","title":{"rendered":"10 Things No One Told Me About Design Systems"},"content":{"rendered":"\n<p><em>Originally published by Diana Wolosin on\u00a0<a href=\"https:\/\/indeed.design\/article\/10-things-no-one-told-me-about-design-systems\" target=\"_blank\" rel=\"noreferrer noopener\">Indeed Design<\/a>.<\/em><\/p>\n\n\n\n<p>My introduction to design systems was like getting sucked into a black hole.<\/p>\n\n\n\n<p>It happened when I was working as a product designer at a trucking software company. We were growing exponentially, so our UI library needed critical enhancements to keep up with the business needs. As I ran an audit to determine what to optimize, I learned Figma had released the auto layout feature. I applied that new functionality to our library, but the task became more complex. I didn\u2019t stop at the audit; I ended up creating a whole design system.&nbsp;During that project, I wore multiple hats: building the components, doing research, creating documentation, and training my design peers on how to consume and contribute to our new design system.<\/p>\n\n\n\n<p>The first design system I created was born out of necessity to solve the lack of consistency between design and development. After this intense immersion into the design systems world, as well as experiences at other companies, I learned quite a few things I wish someone had told me at the beginning.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/2-Design-Systems-meme-strong-dog-weak-dog-1024x768.jpeg\" alt=\"\" class=\"wp-image-18219\" srcset=\"https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/2-Design-Systems-meme-strong-dog-weak-dog-1024x768.jpeg 1024w, https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/2-Design-Systems-meme-strong-dog-weak-dog-300x225.jpeg 300w, https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/2-Design-Systems-meme-strong-dog-weak-dog-768x576.jpeg 768w, https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/2-Design-Systems-meme-strong-dog-weak-dog-1536x1152.jpeg 1536w, https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/2-Design-Systems-meme-strong-dog-weak-dog-702x526.jpeg 702w, https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/2-Design-Systems-meme-strong-dog-weak-dog.jpeg 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-1-a-design-system-is-not-the-same-as-a-ui-library\">1. A design system is not the same as a UI library<\/h2>\n\n\n\n<p>When Figma released its auto layout, it changed the way that designers built components. I performed an audit to determine what elements could be rebuilt with this new feature. I found a large number of component discrepancies between the designs and the in-production product. The developers and product designers had access to all the components, but they didn\u2019t have any guidelines on when or how to use them. I wasn\u2019t expecting the original task of updating some components to turn into a big project, but it did. Not only did I apply the auto layout to some components, but I also had to create documentation to add consistency to our product. The UI library became a design system. Through this, I learned that a UI library is a collection of components and styles, while a design system is a set of guidelines to manage a collection of components and styles.\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/3-Design-Systems-meme-matryoshkas-1024x768.jpeg\" alt=\"\" class=\"wp-image-18220\" srcset=\"https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/3-Design-Systems-meme-matryoshkas-1024x768.jpeg 1024w, https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/3-Design-Systems-meme-matryoshkas-300x225.jpeg 300w, https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/3-Design-Systems-meme-matryoshkas-768x576.jpeg 768w, https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/3-Design-Systems-meme-matryoshkas-1536x1152.jpeg 1536w, https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/3-Design-Systems-meme-matryoshkas-702x526.jpeg 702w, https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/3-Design-Systems-meme-matryoshkas.jpeg 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">2. Productize your design system and your users will thank you!<\/h2>\n\n\n\n<p>A software product solves users\u2019 problems and addresses specific business needs. One of the first steps to building an effective product is identifying the users, their workflows, and their pain points. The same is true for your design system.&nbsp;<\/p>\n\n\n\n<p>You\u2019re designing for two sets of users when you build a design system. First, you\u2019re building for the end users who will be the customers of your company\u2019s final product. But you\u2019re also designing for the product designers who build those services and rely on the design system to create effective products. When you treat your design system as a product, the product designers who adopt it can focus on how to create a smooth UX navigation for the end user instead of spending time choosing things like the most suitable color for a button. The devs can then easily grab a ready-made component and assemble it. The main goal of a design system is to optimize the users\u2019 workflow and save time. Design systems are simply a product for building products.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/4-Design-Systems-meme-harder-than-splitting-an-atom-1024x768.jpeg\" alt=\"\" class=\"wp-image-18221\" srcset=\"https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/4-Design-Systems-meme-harder-than-splitting-an-atom-1024x768.jpeg 1024w, https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/4-Design-Systems-meme-harder-than-splitting-an-atom-300x225.jpeg 300w, https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/4-Design-Systems-meme-harder-than-splitting-an-atom-768x576.jpeg 768w, https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/4-Design-Systems-meme-harder-than-splitting-an-atom-1536x1152.jpeg 1536w, https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/4-Design-Systems-meme-harder-than-splitting-an-atom-702x526.jpeg 702w, https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/4-Design-Systems-meme-harder-than-splitting-an-atom.jpeg 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">3. Designers and developers should be like an atom: inseparable<\/h2>\n\n\n\n<p>Similar to designers, developers can speed up their workflows when building products with ready-made components from design systems. The real challenge is maintaining consistency between these two crews.&nbsp;<\/p>\n\n\n\n<p>The end users don\u2019t interact with the design tool (like Figma, Zeplin, Invision, or Sketch), but they do interact with the in-production product. They can tell when there\u2019s a disconnect behind the scenes, especially if it originates from the design system. Functionality consistency is also relevant. The end users want to predict how the components will behave. If components don\u2019t behave as expected, the users can feel frustrated and we may lose their trust. Developers and designers have to work together at all stages of a design system to maintain consistency. I learned that collaboration is the one and only secret to a successful design system.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/5-Design-Systems-meme-spider-man-1024x768.jpeg\" alt=\"\" class=\"wp-image-18222\" srcset=\"https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/5-Design-Systems-meme-spider-man-1024x768.jpeg 1024w, https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/5-Design-Systems-meme-spider-man-300x225.jpeg 300w, https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/5-Design-Systems-meme-spider-man-768x576.jpeg 768w, https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/5-Design-Systems-meme-spider-man-1536x1152.jpeg 1536w, https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/5-Design-Systems-meme-spider-man-702x526.jpeg 702w, https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/5-Design-Systems-meme-spider-man.jpeg 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">4. Fancy naming conventions aren\u2019t always practical<\/h2>\n\n\n\n<p>When I first created a design system, I was very proud of my outstanding color palette scale. I developed the coolest color style names; Denim, Chambray, Malachite, and Cinnabar. I thought it was going to be flexible enough, but then our fleet management product needed a dark mode. The first issue we faced was the lack of standardization regarding the use of each color across all the components. The designers and devs didn\u2019t know when to use which color. Some borders were gray and some were blue. Assigning an equal color pair on the dark theme was not helpful.<\/p>\n\n\n\n<p>We solved the issue by naming the color tokens based on context-agnostic usage, which simplified introducing theming to the design system.&nbsp;There are multiple ways to tokenize color values. Each company uses its own structure. Asana uses [sentiment-sage-prominence-interaction]; Material Design suggests [design-system-type-purpose]. My recommendation is to research and apply the most suitable semantic or global naming that can scale with your current and future design system\u2019s needs.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/6-Design-Systems-meme-toy-story-aliens-1024x768.jpeg\" alt=\"\" class=\"wp-image-18223\" srcset=\"https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/6-Design-Systems-meme-toy-story-aliens-1024x768.jpeg 1024w, https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/6-Design-Systems-meme-toy-story-aliens-300x225.jpeg 300w, https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/6-Design-Systems-meme-toy-story-aliens-768x576.jpeg 768w, https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/6-Design-Systems-meme-toy-story-aliens-1536x1152.jpeg 1536w, https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/6-Design-Systems-meme-toy-story-aliens-702x526.jpeg 702w, https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/6-Design-Systems-meme-toy-story-aliens.jpeg 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">5. Atomic design helps you remember the magic of basics<\/h2>\n\n\n\n<p>Before starting the first version of our design system, I researched best practices to build the foundation. I found an exceptional method to create modular systems called&nbsp;<a href=\"https:\/\/bradfrost.com\/blog\/post\/atomic-web-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">Atomic Design<\/a>, created by Brad Frost. It highlights how&nbsp;components can be broken into independent smaller components to be replaced, modified, or exchanged with other smaller parts, without breaking the component structure.&nbsp;Following this method allows us to assemble designs faster and update components across multiple designs automatically. This was a game-changer! I recommend applying this to any design system.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/7-Design-Systems-meme-two-buttons-1024x768.jpeg\" alt=\"\" class=\"wp-image-18224\" srcset=\"https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/7-Design-Systems-meme-two-buttons-1024x768.jpeg 1024w, https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/7-Design-Systems-meme-two-buttons-300x225.jpeg 300w, https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/7-Design-Systems-meme-two-buttons-768x576.jpeg 768w, https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/7-Design-Systems-meme-two-buttons-1536x1152.jpeg 1536w, https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/7-Design-Systems-meme-two-buttons-702x526.jpeg 702w, https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/7-Design-Systems-meme-two-buttons.jpeg 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">6. Collaboration promotes refinement, which supports business goals<\/h2>\n\n\n\n<p>A design system team shouldn\u2019t be isolated from their primary users. The interaction between the design system and the product teams that use it is not one-way. Design systems mature as the products evolve. However, the reports and requests from multiple teams can get overwhelming if the company grows exponentially.<\/p>\n\n\n\n<p>Opening a design system to cross-functional contributors and empowering them to service their own requests is the best strategy for keeping up with business needs.\u00a0One of the major concerns could be breaking changes. Set a contribution process to ensure consistency. Provide guidelines and materials for the contributors so they feel comfortable and confident with the process. Cross-functional collaboration provides new perspectives that prompt design system growth and drive business goals.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/8-Design-System-meme-three-dogs-stick-1024x768.jpeg\" alt=\"\" class=\"wp-image-18225\" srcset=\"https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/8-Design-System-meme-three-dogs-stick-1024x768.jpeg 1024w, https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/8-Design-System-meme-three-dogs-stick-300x225.jpeg 300w, https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/8-Design-System-meme-three-dogs-stick-768x576.jpeg 768w, https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/8-Design-System-meme-three-dogs-stick-1536x1152.jpeg 1536w, https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/8-Design-System-meme-three-dogs-stick-702x526.jpeg 702w, https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/8-Design-System-meme-three-dogs-stick.jpeg 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">7. A lasting design system needs collaboration beyond product and development<\/h2>\n\n\n\n<p>Tying up to the last point, big companies treat their design systems as the core of their brand and product vision. The guidelines don\u2019t exclusively impact software products but also establish a holistic brand experience. A design system team should respond to continuous feedback from the stakeholders and primary users.&nbsp;The collaboration across product teams, marketing, branding, customer experience, managers, and the design system team drives the evolution of our design system.&nbsp;Additionally, it\u2019s easier to adopt something when you\u2019re part of it and more familiar with it. Listing stakeholders and identifying how the design system would optimize their workflows is the best strategy for a consistent experience for the customers.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/9-Design-Systems-meme-jealous-girlfriend-1024x768.jpeg\" alt=\"\" class=\"wp-image-18226\" style=\"width:840px;height:630px\" width=\"840\" height=\"630\" srcset=\"https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/9-Design-Systems-meme-jealous-girlfriend-1024x768.jpeg 1024w, https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/9-Design-Systems-meme-jealous-girlfriend-300x225.jpeg 300w, https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/9-Design-Systems-meme-jealous-girlfriend-768x576.jpeg 768w, https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/9-Design-Systems-meme-jealous-girlfriend-1536x1152.jpeg 1536w, https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/9-Design-Systems-meme-jealous-girlfriend-702x526.jpeg 702w, https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/9-Design-Systems-meme-jealous-girlfriend.jpeg 1600w\" sizes=\"(max-width: 840px) 100vw, 840px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">8. Adoption is the most challenging part<\/h2>\n\n\n\n<p>There are multiple considerations during the adoption phase.&nbsp;To find solid footing, creating training material for the involved teams is a great strategy.&nbsp;Those&nbsp;can be in the form of videos, playgrounds, workshops, courses, or any other channel that you can think of. The distribution process depends on your company and its capabilities.&nbsp;The ultimate goal is to create awareness of the advantages of adopting the design system.&nbsp;If your stakeholders don\u2019t understand how to introduce the design system into their workflows, they won\u2019t use it, which could break a consistent experience for the end users. If your stakeholders introduce the design system but don\u2019t understand how to continuously apply its updates, they\u2019ll find a way to make it work for them\u2014even if that means detaching components or working without the design system guidelines.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/10-Design-Systems-meme-upside-down-house-1024x768.jpeg\" alt=\"\" class=\"wp-image-18227\" srcset=\"https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/10-Design-Systems-meme-upside-down-house-1024x768.jpeg 1024w, https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/10-Design-Systems-meme-upside-down-house-300x225.jpeg 300w, https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/10-Design-Systems-meme-upside-down-house-768x576.jpeg 768w, https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/10-Design-Systems-meme-upside-down-house-1536x1152.jpeg 1536w, https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/10-Design-Systems-meme-upside-down-house-702x526.jpeg 702w, https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/10-Design-Systems-meme-upside-down-house.jpeg 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">9. Accessibility is a must<\/h2>\n\n\n\n<p>Access to communications technology and equal opportunities are human rights, and accessibility is an inclusive practice every team should apply from the foundation of any design system. This adds more steps to the process but enhances the business value of the product and meets the needs of more customers. Companies that include&nbsp;<a href=\"https:\/\/www.w3.org\/WAI\/standards-guidelines\/wcag\/\" target=\"_blank\" rel=\"noreferrer noopener\">Web Content Accessibility<\/a>&nbsp;in their guidelines improve the accessibility for&nbsp;all users, increase consistency, and optimize the user experience.&nbsp;I learned that you don\u2019t need to be an expert in this field, but being cognizant of inclusion will make you a more ethical professional and a more empathetic individual.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/11-Design-Systems-meme-keyboard-cat-1024x768.jpeg\" alt=\"\" class=\"wp-image-18228\" style=\"width:840px;height:630px\" width=\"840\" height=\"630\" srcset=\"https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/11-Design-Systems-meme-keyboard-cat-1024x768.jpeg 1024w, https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/11-Design-Systems-meme-keyboard-cat-300x225.jpeg 300w, https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/11-Design-Systems-meme-keyboard-cat-768x576.jpeg 768w, https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/11-Design-Systems-meme-keyboard-cat-1536x1152.jpeg 1536w, https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/11-Design-Systems-meme-keyboard-cat-702x526.jpeg 702w, https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/11-Design-Systems-meme-keyboard-cat.jpeg 1600w\" sizes=\"(max-width: 840px) 100vw, 840px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">10. A Design system is endless<\/h2>\n\n\n\n<p>Just like any product, a design system goes through an intense recursive process after its initial launch. The product designers will report bugs and new requests and need constant support from the design system team. As the company evolves, the product team\u2019s priorities will too, so they\u2019ll lean on the design system to attend to new requests in a timely fashion. Along with creating training materials, keep track of work and improvements so you can trace who did what and when. To avoid the risk of regression, I recommend updating bug requests and adding new features by using individual releases so you can restore the library if needed. And don\u2019t forget that empowering your collaborators with knowledge is key to lasting improvements.&nbsp;&nbsp;<\/p>\n\n\n\n<p>During my experience with design systems, I\u2019ve had to rework and deprecate multiple tasks. To avoid wasting time, think ahead about how to create modular, scalable, and flexible solutions to facilitate future enhancements. Design systems might sound like a set of steps in a linear process that you follow, but in reality, it\u2019s a cyclical process that includes endless releases, periodic maintenance, and cross-functional contribution.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Originally published by Diana Wolosin on\u00a0Indeed Design. My introduction to design systems was like getting sucked into a black hole. It happened when I was working as a product designer at a trucking software company. We were growing exponentially, so our UI library needed critical enhancements to keep up with the business needs. As I<\/p>\n","protected":false},"author":2628,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[1],"tags":[],"topics":[144,28,29,81,82,148],"class_list":{"0":"post-18218","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-uncategorized","7":"topics-conversational-design","8":"topics-design","9":"topics-design-theory","10":"topics-personal-and-professional-development","11":"topics-personas","12":"topics-the-rise-of-design","13":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v18.2.1 (Yoast SEO v25.9) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>10 Things No One Told Me About Design Systems - UX Magazine<\/title>\n<meta name=\"description\" content=\"This UX designer learned the hard way, but you don\u2019t have to.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/indeed.design\/article\/10-things-no-one-told-me-about-design-systems\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"10 Things No One Told Me About Design Systems\" \/>\n<meta property=\"og:description\" content=\"This UX designer learned the hard way, but you don\u2019t have to.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/indeed.design\/article\/10-things-no-one-told-me-about-design-systems\" \/>\n<meta property=\"og:site_name\" content=\"UX Magazine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/uxmag\" \/>\n<meta property=\"article:published_time\" content=\"2023-10-11T10:42:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-11T10:42:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/2-Design-Systems-meme-strong-dog-weak-dog-1024x768.jpeg\" \/>\n<meta name=\"author\" content=\"Diana Wolosin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@uxmag\" \/>\n<meta name=\"twitter:site\" content=\"@uxmag\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Diana Wolosin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/indeed.design\/article\/10-things-no-one-told-me-about-design-systems#article\",\"isPartOf\":{\"@id\":\"https:\/\/uxmag.com\/articles\/10-things-no-one-told-me-about-design-systems\"},\"author\":{\"name\":\"Diana Wolosin\",\"@id\":\"https:\/\/uxmag.com\/#\/schema\/person\/0121974b94b92ade7dc78b1f3b9b928e\"},\"headline\":\"10 Things No One Told Me About Design Systems\",\"datePublished\":\"2023-10-11T10:42:34+00:00\",\"dateModified\":\"2023-10-11T10:42:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/uxmag.com\/articles\/10-things-no-one-told-me-about-design-systems\"},\"wordCount\":1678,\"publisher\":{\"@id\":\"https:\/\/uxmag.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/indeed.design\/article\/10-things-no-one-told-me-about-design-systems#primaryimage\"},\"thumbnailUrl\":\"https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/2-Design-Systems-meme-strong-dog-weak-dog-1024x768.jpeg\",\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/uxmag.com\/articles\/10-things-no-one-told-me-about-design-systems\",\"url\":\"https:\/\/indeed.design\/article\/10-things-no-one-told-me-about-design-systems\",\"name\":\"10 Things No One Told Me About Design Systems - UX Magazine\",\"isPartOf\":{\"@id\":\"https:\/\/uxmag.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/indeed.design\/article\/10-things-no-one-told-me-about-design-systems#primaryimage\"},\"image\":{\"@id\":\"https:\/\/indeed.design\/article\/10-things-no-one-told-me-about-design-systems#primaryimage\"},\"thumbnailUrl\":\"https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/2-Design-Systems-meme-strong-dog-weak-dog-1024x768.jpeg\",\"datePublished\":\"2023-10-11T10:42:34+00:00\",\"dateModified\":\"2023-10-11T10:42:36+00:00\",\"description\":\"This UX designer learned the hard way, but you don\u2019t have to.\",\"breadcrumb\":{\"@id\":\"https:\/\/indeed.design\/article\/10-things-no-one-told-me-about-design-systems#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/indeed.design\/article\/10-things-no-one-told-me-about-design-systems\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/indeed.design\/article\/10-things-no-one-told-me-about-design-systems#primaryimage\",\"url\":\"https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/2-Design-Systems-meme-strong-dog-weak-dog.jpeg\",\"contentUrl\":\"https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/2-Design-Systems-meme-strong-dog-weak-dog.jpeg\",\"width\":1600,\"height\":1200},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/indeed.design\/article\/10-things-no-one-told-me-about-design-systems#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/uxmag.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Personal and Professional Development\",\"item\":\"https:\/\/uxmag.com\/topics\/personal-and-professional-development\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"10 Things No One Told Me About Design Systems\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/uxmag.com\/#website\",\"url\":\"https:\/\/uxmag.com\/\",\"name\":\"UX Magazine\",\"description\":\"UX Magazine is a central, one-stop resource for everything related to user experience. We provide a steady stream of current, informative, and credible information about UX and related fields to enhance the professional and creative lives of UX practitioners and those exploring the field. Our content is driven and created by an impressive roster of experienced professionals\",\"publisher\":{\"@id\":\"https:\/\/uxmag.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/uxmag.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/uxmag.com\/#organization\",\"name\":\"UX Magazine\",\"alternateName\":\"uxmag\",\"url\":\"https:\/\/uxmag.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/uxmag.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/uxmag.com\/wp-content\/uploads\/2021\/01\/UX-Magazine-logo-2.png\",\"contentUrl\":\"https:\/\/uxmag.com\/wp-content\/uploads\/2021\/01\/UX-Magazine-logo-2.png\",\"width\":2440,\"height\":428,\"caption\":\"UX Magazine\"},\"image\":{\"@id\":\"https:\/\/uxmag.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/uxmag\",\"https:\/\/x.com\/uxmag\",\"https:\/\/www.linkedin.com\/company\/ux-magazine\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/uxmag.com\/#\/schema\/person\/0121974b94b92ade7dc78b1f3b9b928e\",\"name\":\"Diana Wolosin\",\"url\":\"https:\/\/uxmag.com\/contributors\/diana-wolosin\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"10 Things No One Told Me About Design Systems - UX Magazine","description":"This UX designer learned the hard way, but you don\u2019t have to.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/indeed.design\/article\/10-things-no-one-told-me-about-design-systems","og_locale":"en_US","og_type":"article","og_title":"10 Things No One Told Me About Design Systems","og_description":"This UX designer learned the hard way, but you don\u2019t have to.","og_url":"https:\/\/indeed.design\/article\/10-things-no-one-told-me-about-design-systems","og_site_name":"UX Magazine","article_publisher":"https:\/\/www.facebook.com\/uxmag","article_published_time":"2023-10-11T10:42:34+00:00","article_modified_time":"2023-10-11T10:42:36+00:00","og_image":[{"url":"https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/2-Design-Systems-meme-strong-dog-weak-dog-1024x768.jpeg","type":"","width":"","height":""}],"author":"Diana Wolosin","twitter_card":"summary_large_image","twitter_creator":"@uxmag","twitter_site":"@uxmag","twitter_misc":{"Written by":"Diana Wolosin","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/indeed.design\/article\/10-things-no-one-told-me-about-design-systems#article","isPartOf":{"@id":"https:\/\/uxmag.com\/articles\/10-things-no-one-told-me-about-design-systems"},"author":{"name":"Diana Wolosin","@id":"https:\/\/uxmag.com\/#\/schema\/person\/0121974b94b92ade7dc78b1f3b9b928e"},"headline":"10 Things No One Told Me About Design Systems","datePublished":"2023-10-11T10:42:34+00:00","dateModified":"2023-10-11T10:42:36+00:00","mainEntityOfPage":{"@id":"https:\/\/uxmag.com\/articles\/10-things-no-one-told-me-about-design-systems"},"wordCount":1678,"publisher":{"@id":"https:\/\/uxmag.com\/#organization"},"image":{"@id":"https:\/\/indeed.design\/article\/10-things-no-one-told-me-about-design-systems#primaryimage"},"thumbnailUrl":"https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/2-Design-Systems-meme-strong-dog-weak-dog-1024x768.jpeg","inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/uxmag.com\/articles\/10-things-no-one-told-me-about-design-systems","url":"https:\/\/indeed.design\/article\/10-things-no-one-told-me-about-design-systems","name":"10 Things No One Told Me About Design Systems - UX Magazine","isPartOf":{"@id":"https:\/\/uxmag.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/indeed.design\/article\/10-things-no-one-told-me-about-design-systems#primaryimage"},"image":{"@id":"https:\/\/indeed.design\/article\/10-things-no-one-told-me-about-design-systems#primaryimage"},"thumbnailUrl":"https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/2-Design-Systems-meme-strong-dog-weak-dog-1024x768.jpeg","datePublished":"2023-10-11T10:42:34+00:00","dateModified":"2023-10-11T10:42:36+00:00","description":"This UX designer learned the hard way, but you don\u2019t have to.","breadcrumb":{"@id":"https:\/\/indeed.design\/article\/10-things-no-one-told-me-about-design-systems#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/indeed.design\/article\/10-things-no-one-told-me-about-design-systems"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/indeed.design\/article\/10-things-no-one-told-me-about-design-systems#primaryimage","url":"https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/2-Design-Systems-meme-strong-dog-weak-dog.jpeg","contentUrl":"https:\/\/uxmag.com\/wp-content\/uploads\/2023\/10\/2-Design-Systems-meme-strong-dog-weak-dog.jpeg","width":1600,"height":1200},{"@type":"BreadcrumbList","@id":"https:\/\/indeed.design\/article\/10-things-no-one-told-me-about-design-systems#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/uxmag.com\/"},{"@type":"ListItem","position":2,"name":"Personal and Professional Development","item":"https:\/\/uxmag.com\/topics\/personal-and-professional-development"},{"@type":"ListItem","position":3,"name":"10 Things No One Told Me About Design Systems"}]},{"@type":"WebSite","@id":"https:\/\/uxmag.com\/#website","url":"https:\/\/uxmag.com\/","name":"UX Magazine","description":"UX Magazine is a central, one-stop resource for everything related to user experience. We provide a steady stream of current, informative, and credible information about UX and related fields to enhance the professional and creative lives of UX practitioners and those exploring the field. Our content is driven and created by an impressive roster of experienced professionals","publisher":{"@id":"https:\/\/uxmag.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/uxmag.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/uxmag.com\/#organization","name":"UX Magazine","alternateName":"uxmag","url":"https:\/\/uxmag.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/uxmag.com\/#\/schema\/logo\/image\/","url":"https:\/\/uxmag.com\/wp-content\/uploads\/2021\/01\/UX-Magazine-logo-2.png","contentUrl":"https:\/\/uxmag.com\/wp-content\/uploads\/2021\/01\/UX-Magazine-logo-2.png","width":2440,"height":428,"caption":"UX Magazine"},"image":{"@id":"https:\/\/uxmag.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/uxmag","https:\/\/x.com\/uxmag","https:\/\/www.linkedin.com\/company\/ux-magazine\/"]},{"@type":"Person","@id":"https:\/\/uxmag.com\/#\/schema\/person\/0121974b94b92ade7dc78b1f3b9b928e","name":"Diana Wolosin","url":"https:\/\/uxmag.com\/contributors\/diana-wolosin"}]}},"_links":{"self":[{"href":"https:\/\/uxmag.com\/wp-json\/wp\/v2\/posts\/18218","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/uxmag.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/uxmag.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/uxmag.com\/wp-json\/wp\/v2\/users\/2628"}],"replies":[{"embeddable":true,"href":"https:\/\/uxmag.com\/wp-json\/wp\/v2\/comments?post=18218"}],"version-history":[{"count":0,"href":"https:\/\/uxmag.com\/wp-json\/wp\/v2\/posts\/18218\/revisions"}],"wp:attachment":[{"href":"https:\/\/uxmag.com\/wp-json\/wp\/v2\/media?parent=18218"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/uxmag.com\/wp-json\/wp\/v2\/categories?post=18218"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/uxmag.com\/wp-json\/wp\/v2\/tags?post=18218"},{"taxonomy":"topics","embeddable":true,"href":"https:\/\/uxmag.com\/wp-json\/wp\/v2\/topics?post=18218"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}