{"id":54644,"date":"2024-09-24T08:16:17","date_gmt":"2024-09-24T15:16:17","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=54644"},"modified":"2024-10-09T05:46:14","modified_gmt":"2024-10-09T12:46:14","slug":"design-system-for-developers","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-for-developers\/","title":{"rendered":"Design System Tips from Developer&#8217;s Point of View"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/09\/Design-system-management-from-the-developer-1024x512.png\" alt=\"Design system management from the developer\" class=\"wp-image-54648\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/09\/Design-system-management-from-the-developer-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/09\/Design-system-management-from-the-developer-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/09\/Design-system-management-from-the-developer-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/09\/Design-system-management-from-the-developer.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><em>Today we&#8217;re sharing a guest post by <a href=\"https:\/\/blog.stackblitz.com\/authors\/nick-moore\/\" target=\"_blank\" rel=\"noreferrer noopener\">Nick Moore<\/a> that originated from collaboration with StackBlitz. Build code-backed prototypes and open them in StackBlitz in one click. <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Request access to UXPin Merge<\/a>.<\/em><\/p>\n\n\n\n<p>If you know how to ride a bike now and wait five years to ride one again, you\u2019ll likely do just fine once you get back on. Bicycles are intuitive once you\u2019ve learned how to ride them, and the basic design is unlikely to change over time and across bicycles. Reaching this level of usability in software is a little more difficult.&nbsp;<\/p>\n\n\n\n<p>Developers and designers often have to iterate too rapidly to reach bicycle-level reliability, but the intuitive experience of a user logging onto your app as if they were hopping on a bicycle is still something we should aim for\u2014and design systems are the best way to do so.&nbsp;<\/p>\n\n\n\n<p>Even though it\u2019s a high bar, this level of usability pays dividends. Users will adopt your app more readily (reducing churn), use it to greater effect (and feel the benefits), and strengthen your marketing efforts as engaged users recommend and amplify your app.&nbsp;<\/p>\n\n\n\n<p>Building and using a design system is one of the best ways to clear this high bar because design systems allow development and design teams to build and ship quickly while relying on standardized components that reduce friction and confusion.&nbsp;<\/p>\n\n\n\n<p>If you\u2019ve ever encountered a bad design system, then you know the issue: A great one can lift you up, but a bad one can hold you back.&nbsp;<\/p>\n\n\n\n<p>The key is to treat your design system like a fully-fledged product that must remain effective and dependable over time. Without enough investment, design systems will only offer marginal help; with enough investment, design systems can provide consistency and stability while improving the pace of development.<\/p>\n\n\n\n<p>Build responsive layouts fast! Try UXPin Merge, a technology that helps designers and developers create prototypes that are production-ready from the start. With our integration, open UXPin Merge prototypes in StackBlitz with one click. <a href=\"https:\/\/www.uxpin.com\/merge\">Request access to UXPin Merge<\/a>.<\/p>\n\n\n\n<section class=\"discover-merge\">\n    <div class=\"discover-merge__container\">\n        <div class=\"discover-merge__left\">\n            <p class=\"discover-merge__heading\">Reach a new level of prototyping<\/p>\n            <p class=\"discover-merge__text\">Design with interactive components coming from your team&#8217;s design system.<\/p>\n            <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noopener\">\n                <button class=\"discover-merge__button\">Discover UXPin Merge<\/button>\n            <\/a>\n        <\/div>\n        <div>\n            <img decoding=\"async\" src=\"https:\/\/uxpin.com\/studio\/wp-content\/themes\/uxpin-juggernaut\/img\/cta-banner-merge.png\" class=\"discover-merge__image\" alt=\"\">\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n.discover-merge {\n    margin: 40px 8px;\n}\n\n.discover-merge__container {\n    display: flex;\n    max-width: 690px;\n    height: 200px;\n    padding: 20px;\n    padding-left: 24px;\n    border-radius: 4px;\n    background-color: black;\n    box-shadow: 10px 10px #9999ff;\n    align-items: center;\n    justify-content: space-between;\n}\n\n.discover-merge__left {\n    width: 50%;\n}\n\n.discover-merge__left p {\n    margin: 10px 0px !important;\n    color: white !important;\n    font-size: 18px !important;\n}\n\n.discover-merge__heading {\n    font-weight: bold !important;\n    color: white !important;\n    font-size: 18px !important;\n}\n\n.discover-merge__text {\n    margin: 0 !important;\n    line-height: 22px !important;\n}\n\n.discover-merge__button {\n    width: 174px;\n    height: 44px;\n    margin: 10px 0px;\n    border: none;\n    border-radius: 2px;\n    background: white;\n    color: black;\n    font-size: 16px;\n    text-align: center;\n}\n\n.discover-merge__button:hover {\n    cursor: pointer;\n}\n\n.discover-merge__image {\n    max-width: 320px !important;\n    height: 200px;\n    margin-right: -19px;\n}\n\n@media (max-width: 760px) {\n    .discover-merge__container {\n        height: auto;\n        margin: 10px;\n        align-items: left;\n    }\n}\n\n@media (max-width: 500px) {\n    .discover-merge__container {\n        flex-direction: column;\n    }\n\n    .discover-merge__left {\n        width: 100%;\n        align-items: normal;\n    }\n}\n\n<\/style>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Build design systems via iteration, not waterfall<\/h2>\n\n\n\n<p>For developers, design systems often feel like intrusions from the outside in. The design systems team might have their best interests at heart, but developers know that a bad process with good intentions will still likely lead to a bad product.&nbsp;<\/p>\n\n\n\n<p>After all, developers are well-versed in building a product and iterating over time, with user feedback informing every iteration. Any whiff of a waterfall or waterfall-esque process \u2013 where teams build a product in a silo and release it all at once \u2013 will make them justifiably skeptical.&nbsp;<\/p>\n\n\n\n<p>The solution is to focus on simplicity over comprehensiveness\u2014at least at first\u2014and build design systems bit by bit over time. By breaking the problem down, platform teams can build simple but essential features, prove the concept&#8217;s value, and get feedback that will inform the rest of the work.&nbsp;<\/p>\n\n\n\n<p>Slack provides a <a href=\"https:\/\/slack.engineering\/the-gradual-design-system-how-we-built-slack-kit\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">good example of this methodology<\/a>. Back in 2016, millions of people were using Slack, and the company\u2019s codebase was, according to Zack Sultan, Lead Product Designer at Slack, \u201cbuilt in a way that favored time-to-market over maintainability, consistency, or reusability.\u201d<\/p>\n\n\n\n<p>Like many young companies, Slack prioritized finding and pursuing product\/market fit before building a codebase suited for scalability and reliability. Some companies encounter breaking issues first and decide to reassess potential tech debt issues, but Slack kept ahead of itself.&nbsp;<\/p>\n\n\n\n<p>\u201cWe never encountered a single breaking point in our user interface,\u201d Sultan writes, \u201cbut rather a slowly cascading series of inconsistencies, quirks, and discrepancies.\u201d The momentum of the business was growing, and as Slack added more product teams (and more products and features), components started to drift.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfe-oDTVa5WimZxVoQ-xxMQ_itGAfJjvRrs6vsx537SJtQJ1A2xpDKyS3P4qed7cjye8gLtBfvi756RSZeF4pgGWNAJ7Vwp66aTar4qq8NiCxJiuHfQjcj4obf3oKjqufpkOy5042xKE2EXKHzEyGG1tGLI?key=RFZ9LG52hrkl0_8EkLQF9Q\" alt=\"\" style=\"width:750px\"\/><\/figure>\n\n\n\n<p>(<a href=\"https:\/\/slack.engineering\/the-gradual-design-system-how-we-built-slack-kit\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Source<\/a>)<\/p>\n\n\n\n<p>Questions soon abounded, Sultan writes. \u201cWhat does a button look like in Slack? How do you build it? What words do you put in it? It was up to individual teams to make these decisions.\u201d<\/p>\n\n\n\n<p>Many companies correctly notice the problem and then build a mediocre solution by asking a group of developers to cook up a new design system in isolation. Some slowing down is to be expected as companies grow, but a design system developed this way can cause development to come to a screeching halt.&nbsp;<\/p>\n\n\n\n<p>Slack was wary of this potential and focused on finding ways to rebuild and standardize its components without slowing down overall development. \u201cIt was a bit like taking a car engine apart piece by piece, and cleaning, repairing, and replacing each part while it accelerated down the highway,\u201d Sultan writes.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfiEBxSpR0yaHorF3CL99JqGQ2wgA69tzzeWSQl6X-wioJjxMn6daxk98ZGUZlyPtdNFYl-O3cPgADtS_lFjDVgwAvI4UvxnsYgK8mkoEzvDSWmb6af0oZtklOHpsVGcAc6mxGPtiUii2-DuBtQ7yDiNiko?key=RFZ9LG52hrkl0_8EkLQF9Q\" alt=\"\" style=\"width:750px\"\/><\/figure>\n\n\n\n<p>(<a href=\"https:\/\/slack.engineering\/the-gradual-design-system-how-we-built-slack-kit\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Source<\/a>)<\/p>\n\n\n\n<p>Like building a <a href=\"https:\/\/brianpagan.net\/2015\/lean-startup-mvp-how-to-make-meaningful-products\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">minimum viable product (MVP)<\/a>, design systems need to have core features built well and not many features built poorly. Early on, you\u2019re looking to demonstrate value\u2013not comprehensiveness\u2013even if it means building one single component really well.<\/p>\n\n\n\n<p>\u201cJust one component, thoroughly documented, was immediately valuable,\u201d Sultan writes. By building components one at a time and ensuring each was complete and well done, they were able to create a \u201cvirtuous cycle for the system.\u201d&nbsp;<\/p>\n\n\n\n<p>The value of each component, as simple and small as each isolated chunk was, demonstrated the value of the work as a whole. Developers remained invested throughout, and Slack eventually launched its design system, Slack Kit.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Maintain design systems or lose them to tech debt<\/h2>\n\n\n\n<p>Let\u2019s imagine, for a moment, that the platform team and design team have worked together \u2013 alongside developer feedback \u2013 to build the perfect design system. Every developer takes a look and gives it a thumbs up.&nbsp;<\/p>\n\n\n\n<p>Why, then, could you take any one of those developers aside and hear some wariness in their voice when they talk about actually using the design system?<\/p>\n\n\n\n<p>The issue is that developers are very familiar with what happens when a product doesn\u2019t have a maintenance plan. They\u2019ve built products that have fallen by the wayside and created beloved internal tools that managers deprioritized until they died. Eventually, even a great product will fall prey to tech debt if there\u2019s no plan to keep it alive.&nbsp;<\/p>\n\n\n\n<p>For teams building design systems, the solution is to build a flexible design system that they can iterate, maintain, and update over time.&nbsp;<\/p>\n\n\n\n<p>Design systems, by their nature, tend to offer some level of standardization, but over-focusing on standardization can lead to an overly rigid system. If the design system is good, people might not complain at first, but if even a good system is hard to keep up to date and hard to use in non-standard scenarios, people will eventually stop using it.&nbsp;<\/p>\n\n\n\n<p>Instead, platform teams need to build design systems with maintenance as a first principle and map each component across a spectrum of flexibility.&nbsp;<\/p>\n\n\n\n<p>To make this a little less abstract, let\u2019s look at an <a href=\"https:\/\/engineering.atspotify.com\/2021\/04\/customization-vs-configuration-in-evolving-design-systems\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">example from Spotify<\/a>.\u00a0<\/p>\n\n\n\n<p>The team behind Encore, Spotify\u2019s design system, faced the same issue we\u2019ve talked about here. As the product changes and the development team grows, writes Charlie Backus, design systems engineer at Spotify, \u201cit can sometimes seem like the team is outgrowing the current set of components and styles.\u201d<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXeE50YzX_iBKQle5cvaupWZUX3sBe8-GqqjiiqcjAwS1JZn6Rc4yZVmFTj4d7kvOxNCu5Kpqq8M6tuqIqZjIi_vgeoCUD3DVRo4WpBK4gMoDhQRMiaYUD1T_GEA_dj2cV_TzLgC4ad3uVywt7O9ti5i74A?key=RFZ9LG52hrkl0_8EkLQF9Q\" alt=\"\" style=\"width:750px\"\/><\/figure>\n\n\n\n<p>(<a href=\"https:\/\/engineering.atspotify.com\/2021\/04\/customization-vs-configuration-in-evolving-design-systems\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Source<\/a>)<\/p>\n\n\n\n<p>As you can see in the <a href=\"https:\/\/spotify.design\/article\/reimagining-design-systems-at-spotify\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">selection above<\/a>, there was a dire need for consistency, despite an equal need for teams to remain creative and driven.\u00a0<\/p>\n\n\n\n<p>To find a balance, Backus recommends teams develop \u201can abstract shared vocabulary around component properties\u201d or ensure that the \u201cbase properties remain accessible for modification by end consumers.\u201d<\/p>\n\n\n\n<p>The best way to think about this strategy is to imagine a spectrum between configuration (high-abstraction components that developers pass additional parameters to in order to add varied behaviors) and customization (low-abstraction components that developers just add custom styles to).&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXe3FUf1AHKySmcWoMMpGvkLGVHk-uAKTB4M3t1Sd9yqS-qCkUTLe1Lisc8lIUZPHTxBh6eyjVbEx5pIdRuD-4mHKWdig3PVnJt8upFKDwSoZWS_HD5h3h5oqj4HkqYH33e-Ku0am3-bjJq45GDHaYpuSl4?key=RFZ9LG52hrkl0_8EkLQF9Q\" alt=\"\" style=\"width:750px\"\/><\/figure>\n\n\n\n<p>(<a href=\"https:\/\/engineering.atspotify.com\/2021\/04\/customization-vs-configuration-in-evolving-design-systems\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Source<\/a>)<\/p>\n\n\n\n<p>This spectrum-based approach is useful because it forces teams to think about tradeoffs ahead of time.&nbsp;<\/p>\n\n\n\n<p>On the one hand, as Backus writes, \u201cA more abstract configuration approach can increase consistency and maintainability but at the risk of the system being a bottleneck for outgoing features.\u201d By increasing abstraction, a design system can make development more consistent but potentially slow down development.&nbsp;<\/p>\n\n\n\n<p>On the other hand, Backus continues, \u201cThe less abstract customization approach enables quicker feature development; however, the overall consistency of the product can suffer as a result.\u201d Speed increases, in this case, but the likelihood of inconsistencies increases, too.&nbsp;<\/p>\n\n\n\n<p>Backus recommends thinking about maturity to find your spot on the spectrum for any given component. \u201cThe more mature a product or feature is, the more beneficial and feasible a configuration approach is. However, the iterative and low-level nature of customization makes it more suitable for prototyping and features which are bespoke, or are still subject to change.\u201d<\/p>\n\n\n\n<p>Like in the Slack example, we\u2019re incorporating concerns that lie outside the immediate purview of the design system. With Slack, they were thinking about the growth of the company, and with Spotify, they were thinking about the growth of features. Mature, well-tested, well-known features can be standardized, but new, still-growing, and one-off features require more flexibility.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Avoid rework by aligning developers and designers<\/h2>\n\n\n\n<p>Developers and designers alike often decry meetings, wishing they had more time and space to work. Don\u2019t get us wrong \u2013 too many meetings can be a <a href=\"https:\/\/blog.stackblitz.com\/posts\/flow-state\/\" target=\"_blank\" rel=\"noreferrer noopener\">huge drag on focus<\/a> \u2013 but a good meeting can also save you a lot of work. An aligned team, delayed by a meeting, will always be more effective than an unaligned team working hard on the wrong things.<\/p>\n\n\n\n<p>This dynamic is true within teams and departments, but alignment issues can be much more severe between different departments. A development team and design team working on different things, for example, can end up negating each other\u2019s work if the designs are for a feature that isn\u2019t built yet and the feature is built for a design that hasn\u2019t been sketched yet.&nbsp;<\/p>\n\n\n\n<p>Design systems magnify this issue. If a design system isn\u2019t well thought out, all the effort toward building one can be wasted if developers and designers don\u2019t start out using it in an aligned way and maintain alignment over time.<\/p>\n\n\n\n<p>As we said in the first section, the design system can\u2019t feel like a third party designed from the outside in. In the same way, it can\u2019t be a tool that developers and designers only call on occasionally or when absolutely necessary. Instead, a design system should be a language for the design and development teams\u2014both a result of alignment and an anchor that continuously shows how well the teams are aligned.<\/p>\n\n\n\n<p>To see what we mean when we refer to design systems as language, <a href=\"https:\/\/medium.com\/airbnb-design\/building-a-visual-language-behind-the-scenes-of-our-airbnb-design-system-224748775e4e\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">look at Airbnb<\/a>. Back in 2016, Airbnb was growing rapidly and adding feature after feature. Karri Saarinen, then Principal Designer at Airbnb, writes, \u201cOne-off solutions aren\u2019t inherently bad, but if they aren\u2019t built upon a solid foundation, we eventually find ourselves having to pay back accrued technical and design debts.\u201d<\/p>\n\n\n\n<p>To reset these efforts and ensure ongoing sustainability, the Airbnb team looked toward language as a guiding metaphor. \u201cVisual language is like any other language,\u201d Saarinen writes. \u201cMisunderstandings arise if the language is not shared and understood by everyone using it. As a product or team grows, the challenges within these modalities compound.\u201d<\/p>\n\n\n\n<p>Airbnb built a new language via a new design system by looking at where their old designs failed. \u201cWe started by auditing and printing out many of our designs, both old and new,\u201d&nbsp; Saarinen writes. \u201cLaying the flows side by side on a board, we could see where and how the experiences were breaking and where we needed to start making changes.\u201d<\/p>\n\n\n\n<p>By focusing on the miscommunications first, Airbnb was able to build a language that used a consensus understanding of shared components as its foundation.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXeD81pQkk8ra_ztgI_WnEAVcqNsW7DjSxb-fn0YYltYBoXZmj7pRIj01eJG8imEGMD5DHNoT1MgOW_VOtBHLgYESuK0lI5LMd33e_fOdzZwH2rYgqdPIvVAlnJncnGQ3pc1WYYvQnJXmXceLn6OKBoaiBnz?key=RFZ9LG52hrkl0_8EkLQF9Q\" alt=\"\" style=\"width:750px\"\/><\/figure>\n\n\n\n<p>(<a href=\"https:\/\/medium.com\/airbnb-design\/building-a-visual-language-behind-the-scenes-of-our-airbnb-design-system-224748775e4e\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Source<\/a>)<\/p>\n\n\n\n<p>\u201cWe felt that we were all working together towards the same idea,\u201d Saarinen writes. \u201cReviewing our collective work at the end of each day, we began to see patterns emerge. We course-corrected when necessary and started defining our standardized components.\u201d&nbsp;<\/p>\n\n\n\n<p>The team knew they were onto something when, even before the design system was finalized, productivity and consistency sped up in tandem. \u201cOne day,\u201d Saarinen remembers, \u201cWhile putting together a last-minute prototype, our team was able to create nearly 50 screens within just a few hours by using the framework our library provided.\u201d&nbsp;<\/p>\n\n\n\n<p>The early and ongoing boosts to productivity and standardization were a result of building a design system like a shared language. By thinking of the design system first and foremost as a way for developers, designers, and others to communicate and understand each other, the entire company benefited.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Treat your design system like a basecamp<\/h2>\n\n\n\n<p>One of the biggest worries developers can feel when a platform team or engineering leader proposes a design system is the tension between the freedom to do new work and the restraints standardization can impose.&nbsp;<\/p>\n\n\n\n<p>Developers often fear that design systems, even when they introduce welcome consistency, can inhibit experimental and exploratory work. Ultimately, developers want to code, and design systems can sometimes feel like a way of reducing coding to boilerplate work.&nbsp;<\/p>\n\n\n\n<p>With this fear and its real risks in mind, companies have to take a different approach to making design systems work for developers: Design systems should be like basecamps for developers and designers on the frontiers of exploration.&nbsp;<\/p>\n\n\n\n<p>The base camp is more stable than the frontier, and the work done there is more routine. In this metaphor, the ultimate purpose of the design system is to give designers and developers resources so that they can explore further with every trek. The design system acts as a dependable foundation, but it doesn\u2019t replace all the work that needs to be done.&nbsp;<\/p>\n\n\n\n<p>With the lessons we\u2019ve outlined here\u2014iterating over time, thinking carefully about flexibility and maintenance, and aligning developers and designers\u2014you can create a design system that developers trust, one they will gladly return to before exploring further.&nbsp;<\/p>\n\n\n\n<p>Create fully functional, production-ready prototypes from the start. With UXPin Merge, what you design is exactly what gets built\u2014eliminating handoff issues and speeding up development. Plus, with our seamless integration, you can open your UXPin Merge prototypes in StackBlitz with a single click for an even smoother workflow. Ready to elevate your design and development process? <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Request access to UXPin Merge today<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-buttons\">\n<div class=\"wp-block-button is-style-fill\"><center><a class=\"btn btn-flat btn-large btn-content-width\" href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Discover Merge<\/a><\/center><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Today we&#8217;re sharing a guest post by Nick Moore that originated from collaboration with StackBlitz. Build code-backed prototypes and open them in StackBlitz in one click. Request access to UXPin Merge. If you know how to ride a bike now and wait five years to ride one again, you\u2019ll likely do just fine once you<\/p>\n","protected":false},"author":3,"featured_media":54648,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,199,441],"tags":[],"class_list":["post-54644","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-design-systems","category-front-end"],"yoast_title":"","yoast_metadesc":"Read about managing a design system if you're a developer or a technical designer. Uncover design system management best practices.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Design System Tips from Developer&#039;s Point of View | UXPin<\/title>\n<meta name=\"description\" content=\"Read about managing a design system if you&#039;re a developer or a technical designer. Uncover design system management best practices.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-for-developers\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Design System Tips from Developer&#039;s Point of View\" \/>\n<meta property=\"og:description\" content=\"Read about managing a design system if you&#039;re a developer or a technical designer. Uncover design system management best practices.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-for-developers\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2024-09-24T15:16:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-09T12:46:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/09\/Design-system-management-from-the-developer.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"UXPin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@uxpin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"UXPin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"35 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-for-developers\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-for-developers\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"Design System Tips from Developer&#8217;s Point of View\",\"datePublished\":\"2024-09-24T15:16:17+00:00\",\"dateModified\":\"2024-10-09T12:46:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-for-developers\\\/\"},\"wordCount\":2415,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-for-developers\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/Design-system-management-from-the-developer.png\",\"articleSection\":[\"Blog\",\"Design Systems\",\"Front-End\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-for-developers\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-for-developers\\\/\",\"name\":\"Design System Tips from Developer's Point of View | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-for-developers\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-for-developers\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/Design-system-management-from-the-developer.png\",\"datePublished\":\"2024-09-24T15:16:17+00:00\",\"dateModified\":\"2024-10-09T12:46:14+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"Read about managing a design system if you're a developer or a technical designer. Uncover design system management best practices.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-for-developers\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-for-developers\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-for-developers\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/Design-system-management-from-the-developer.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/Design-system-management-from-the-developer.png\",\"width\":1200,\"height\":600,\"caption\":\"Design system management from the developer\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-for-developers\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Design System Tips from Developer&#8217;s Point of View\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\",\"name\":\"UXPin\",\"description\":\"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.\",\"sameAs\":[\"http:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/@uxpin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/hello\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Design System Tips from Developer's Point of View | UXPin","description":"Read about managing a design system if you're a developer or a technical designer. Uncover design system management best practices.","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:\/\/www.uxpin.com\/studio\/blog\/design-system-for-developers\/","og_locale":"en_US","og_type":"article","og_title":"Design System Tips from Developer's Point of View","og_description":"Read about managing a design system if you're a developer or a technical designer. Uncover design system management best practices.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-for-developers\/","og_site_name":"Studio by UXPin","article_published_time":"2024-09-24T15:16:17+00:00","article_modified_time":"2024-10-09T12:46:14+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/09\/Design-system-management-from-the-developer.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"35 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-for-developers\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-for-developers\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"Design System Tips from Developer&#8217;s Point of View","datePublished":"2024-09-24T15:16:17+00:00","dateModified":"2024-10-09T12:46:14+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-for-developers\/"},"wordCount":2415,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-for-developers\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/09\/Design-system-management-from-the-developer.png","articleSection":["Blog","Design Systems","Front-End"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-for-developers\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-for-developers\/","name":"Design System Tips from Developer's Point of View | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-for-developers\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-for-developers\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/09\/Design-system-management-from-the-developer.png","datePublished":"2024-09-24T15:16:17+00:00","dateModified":"2024-10-09T12:46:14+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"Read about managing a design system if you're a developer or a technical designer. Uncover design system management best practices.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-for-developers\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/design-system-for-developers\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-for-developers\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/09\/Design-system-management-from-the-developer.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/09\/Design-system-management-from-the-developer.png","width":1200,"height":600,"caption":"Design system management from the developer"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-for-developers\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Design System Tips from Developer&#8217;s Point of View"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e","name":"UXPin","description":"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.","sameAs":["http:\/\/www.uxpin.com","https:\/\/x.com\/@uxpin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/hello\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/54644","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=54644"}],"version-history":[{"count":8,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/54644\/revisions"}],"predecessor-version":[{"id":54657,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/54644\/revisions\/54657"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/54648"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=54644"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=54644"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=54644"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}