{"id":355888,"date":"2021-11-05T12:58:37","date_gmt":"2021-11-05T19:58:37","guid":{"rendered":"https:\/\/css-tricks.com\/?p=355888"},"modified":"2021-11-05T12:58:39","modified_gmt":"2021-11-05T19:58:39","slug":"yes-design-systems-do-improve-developer-efficiency-and-design-consistency","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/yes-design-systems-do-improve-developer-efficiency-and-design-consistency\/","title":{"rendered":"Yes, Design Systems Do Improve Developer Efficiency and Design Consistency"},"content":{"rendered":"\n

One of the toughest things about being someone who cares deeply about design systems is making the case for a dedicated design system. Folks in leadership will often ask you to prove the value of it. Why should we care about good front-end development and consistency? Sure, sure, sure,<\/em> they say\u2014everyone wants a flashy design system\u2014but is it worth the cost<\/em>?<\/p>\n\n\n\n\n\n\n\n

That question is tough because developer productivity, front-end quality, and even accessibility to some extent, are all such nebulous things. In contrast, this is one of the smartest things about Google\u2019s Core Web Vitals<\/a> because it puts a number on the problem and provides very actionable things to do next.<\/p>\n\n\n\n

When it comes to design systems, we don\u2019t really have metrics that we can point to and say \u201cAh, yes, I need to put folks on the design systems team so that we can push our design system up from a bad score of 60\/100.\u201d It would be neat if we did, but I don\u2019t think we ever will.<\/p>\n\n\n\n

Enter Sparkbox. They wanted to fix this by testing how much faster their eight developers were in a little test. They got their devs to make a form, by hand, and then do it again using IBM\u2019s Carbon design system<\/a>, which they\u2019d never used before.<\/p>\n\n\n\n

The results are super interesting<\/a>:<\/p>\n\n\n\n

Using a design system made a simple form page 47% faster to develop versus coding it from scratch. The median time for the scratch submissions was 4.2 hours compared to the 2 hour median time for Carbon submissions. The Carbon timing included the time the developers spent familiarizing themselves with the design system.<\/p><\/blockquote>\n\n\n\n

Now imagine if those devs were<\/em> familiar with Carbon\u2019s design system! If that was the case, I imagine the time to build those forms would be way, way faster than those initial results.<\/p>\n","protected":false},"excerpt":{"rendered":"

One of the toughest things about being someone who cares deeply about design systems is making the case for a dedicated design system. Folks in leadership will often ask you to prove the value of it. Why should we care about good front-end development and consistency? Sure, sure, sure, they say\u2014everyone wants a flashy design […]<\/p>\n","protected":false},"author":223806,"featured_media":355958,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[1396,878],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/css-tricks.com\/wp-content\/uploads\/2021\/11\/sparkbox-design-system-chart.svg","jetpack-related-posts":[{"id":340573,"url":"https:\/\/css-tricks.com\/2021-design-systems-survey-courses\/","url_meta":{"origin":355888,"position":0},"title":"2021 Design Systems (Survey\/Courses)","date":"May 13, 2021","format":false,"excerpt":"My friends at Sparkbox are doing a survey on design systems, as they do each year. Go ahead and fill it out if you please. Here are the results from last year. In both 2019 and 2020, the vibe was that design systems (both as an idea and as a\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/Screen-Shot-2021-05-13-at-3.54.25-PM.png?fit=1120%2C628&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":286164,"url":"https:\/\/css-tricks.com\/who-are-design-systems-for\/","url_meta":{"origin":355888,"position":1},"title":"Who Are Design Systems For?","date":"April 23, 2019","format":false,"excerpt":"Specific design systems, I mean. Design systems, as a concept, are something just about any site can benefit from. A lot of hype goes into design systems these days. Just the other day, an organization's published their design system publicly and I got a slew of DMs, emails, and Slack\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/04\/design-systems-matrix.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":361971,"url":"https:\/\/css-tricks.com\/design-systems-with-backlight\/","url_meta":{"origin":355888,"position":2},"title":"Build, Ship, & Maintain Design Systems with Backlight","date":"January 27, 2022","format":false,"excerpt":"Design systems are an entire job these days. Agencies are hired to create them. In-house teams are formed to handle them, shipping them so that other teams can use them and helping ensure they do. Design systems aren't a fad, they are a positive evolution of how digital design is\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/hero-css-tricks.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":267589,"url":"https:\/\/css-tricks.com\/consistent-design-systems-in-sketch-with-atomic-design-and-the-auto-layout-plugin\/","url_meta":{"origin":355888,"position":3},"title":"Consistent Design Systems in Sketch With Atomic Design and the Auto-Layout Plugin","date":"March 12, 2018","format":false,"excerpt":"Do you design digital products (or websites) and hand design files off to developers for implementation? If you answered yes, settle in! While the should-designers-code debate rages on, we're going to look at how adding a methodology to your design workflow can make you faster, more consistent, and loved by\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/03\/sketch-stacks-atomic-design.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":263528,"url":"https:\/\/css-tricks.com\/user-experience-design-systems\/","url_meta":{"origin":355888,"position":4},"title":"The User Experience of Design Systems","date":"December 7, 2017","format":false,"excerpt":"Rune Madsen jotted down his notes from a talk he gave at UX Camp Copenhagen back in May all about design systems and also, well, the potential problems that can arise when building a single unifying system: When you start a redesign process for a company, it\u2019s very easy to\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":249663,"url":"https:\/\/css-tricks.com\/animation-design-systems\/","url_meta":{"origin":355888,"position":5},"title":"Animation in Design Systems","date":"January 4, 2017","format":false,"excerpt":"Our own Sarah Drasner: Unlike fonts, colors, and so on, we tend to add animation in as a last step, which leads to disorganized implementations that lack overall cohesion. If you asked a designer or developer if they would create a mockup or build a UI without knowing the fonts\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/355888"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/223806"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=355888"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/355888\/revisions"}],"predecessor-version":[{"id":355956,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/355888\/revisions\/355956"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/355958"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=355888"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=355888"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=355888"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}