{"id":30299,"date":"2021-06-02T05:03:32","date_gmt":"2021-06-02T12:03:32","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=30299"},"modified":"2021-12-03T04:09:26","modified_gmt":"2021-12-03T12:09:26","slug":"change-style-to-guide-design-system","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/change-style-to-guide-design-system\/","title":{"rendered":"How to Go From a Style Guide to a Design System"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/06\/The-UX-UI-designers-guide-to-user-centered-design-copy-1024x512.png\" alt=\"The UX UI designers guide to user centered design copy\" class=\"wp-image-30300\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/06\/The-UX-UI-designers-guide-to-user-centered-design-copy-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/06\/The-UX-UI-designers-guide-to-user-centered-design-copy-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/06\/The-UX-UI-designers-guide-to-user-centered-design-copy-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/06\/The-UX-UI-designers-guide-to-user-centered-design-copy.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Like a lot of companies, Johnson &amp; Johnson once relied on a style guide to make sure designers used approved language and components. Style guides can still <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/style-guide-ux\/\" target=\"_blank\" rel=\"noreferrer noopener\">help brands enhance their UX<\/a>, but they don\u2019t always match the needs of larger companies. Newer technology also makes it possible for smaller enterprises to move from style guides to design systems.<\/p>\n\n\n\n<p>During an <a href=\"https:\/\/youtu.be\/gnSv_nNBtyg\" target=\"_blank\" rel=\"noreferrer noopener\">April 2021 webinar<\/a>, J&amp;J Experience Design Expert Service Leader Ben Shectman talks about how he and his team used the corporation\u2019s existing style guides to build an interactive design system. It\u2019s a lesson in how adopting the right process and software can make a design department more effective and efficient.<\/p>\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\" id=\"h-why-you-need-a-design-system-instead-of-a-style-guide\"><strong>Why you need a design system instead of a style guide<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/06\/1_23.png\" alt=\"1 23\" class=\"wp-image-30304\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/06\/1_23.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/06\/1_23-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>For years, Johnson &amp; Johnson had used style guides saved as PDF files. The disadvantages of static style guides were obvious to an experienced UX designer who knew the benefits of interactive design systems.<\/p>\n\n\n\n<p>Some of the benefits you gain when you transform style guides into design systems include:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Creating a place that stores all the standardized versions of components.&nbsp;<\/li><li>Adding consistency to products that help users know what to expect when they encounter new features.<\/li><li>Controlling the design components that employees can access and add to their prototypes.<\/li><li>Establishing guardrails that make it impossible\u2014or at least extremely difficult\u2014for anyone to add unapproved features.<\/li><li>Improving efficiency by providing components that designers can drag and drop into their work.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/wsd9BrsrSKQW7rP_YCMMrgMKt1PA3lwCoro8bBebkawLnMlkxW2csM1TRtqHi2Co17l3yQIA76ONOGgp8GTbJHfEMNY2uMpeB9500MPMsqykkeaN7qHJqrQSaMxMNzeUkuDRbul_\" alt=\"\"\/><\/figure>\n\n\n\n<p>With a design system, the person in charge gains more control over product design and development. Meanwhile, the jobs of designers and developers become easier as designers used standardized and approved components in their work.<\/p>\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\" id=\"h-moving-from-style-guides-to-design-systems-with-atomic-design\"><strong>Moving from style guides to design systems with atomic design<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/06\/3_19.png\" alt=\"3 19\" class=\"wp-image-30302\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/06\/3_19.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/06\/3_19-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>Ben Shectman and his team chose to convert J&amp;J\u2019s style guides into a design system using <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/atomic-ui-components\/\" target=\"_blank\" rel=\"noreferrer noopener\">atomic design<\/a>. Atomic design works well for large corporations like Johnson &amp; Johnson. <a href=\"https:\/\/www.creativebloq.com\/web-design\/10-reasons-you-should-be-using-atomic-design-61620771\" target=\"_blank\" rel=\"noreferrer noopener\">Benefits of atomic design<\/a> include:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Letting designers mix and match components to build new products.<\/li><li>Relying on consistent, predefined pieces that maintain consistency throughout products.<\/li><li>Updating existing designs doesn\u2019t require nearly as much effort.<\/li><\/ul>\n\n\n\n<p>When using atomic design to build design systems, you get to focus on five layers of complexity:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Atoms<\/strong>\u2014the most basic, essential elements that get used to make everything else.<\/li><li><strong>Molecules<\/strong>\u2014more complex structures built from multiple atoms.<\/li><li><strong>Organisms<\/strong>\u2014the result of combining molecules (examples include search fields and navbars).<\/li><li><strong>Templates<\/strong>\u2014a controlled environment where designers can place organisms.<\/li><li><strong>Pages<\/strong>\u2014the final product that shows designers whether their approaches yielded the results they expected.<\/li><\/ul>\n\n\n\n<p>All of these levels of complexity serve essential roles, but most design managers focus on giving their teams templates.<\/p>\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\" id=\"h-create-templates-for-designers-developers-and-other-employees\"><strong>Create templates for designers, developers, and other employees<\/strong><\/h2>\n\n\n\n<p>Ideally, your design system should include as many templates as possible to fill potential user needs. Designers should be able to open the appropriate template and drag organisms into it. Depending on the template, the organisms might snap into specific places based on their functions.<\/p>\n\n\n\n<p>For an example of how valuable templates are, <a href=\"https:\/\/youtu.be\/gnSv_nNBtyg?t=1937\" target=\"_blank\" rel=\"noreferrer noopener\">watch J&amp;J designer Gil Gerard Austria<\/a> use one to transform an old employee search tool into a design that matches the company\u2019s preferences and provides excellent functionality.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-build-your-interactive-design-system-with-uxpin\"><strong>Build your interactive design system with UXPin&nbsp;<\/strong><\/h2>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/docs\/design-systems\/design-system-libraries\/\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin makes it easier<\/a> than ever for you to go from outdated style guides to interactive design systems. The team at J&amp;J chose UXPin in part because it helps in creating an interactive design system that shows all clickable components and helps a lot in user testing.&nbsp;<\/p>\n\n\n\n<p>The interactive design system solves numerous problems often caused by image-based design, such as inaccuracy, static designs that don\u2019t respond to interactions, and the number of back-and-forths with developers before establishing how exactly each component should look and behave.&nbsp;&nbsp;<\/p>\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\" id=\"h-take-your-design-system-to-the-next-level\"><strong>Take your design system to the next level<\/strong><\/h2>\n\n\n\n<p>If you want to keep the consistency of your components with the end product, reduce the number of designer-developer back and forths, and eliminate the handoff drift, you should choose to design with code components.&nbsp;<\/p>\n\n\n\n<p>Our Merge technology allows designers to use UI code components that developers already created and are stored in the coded design systems. This gives an ultimate single source of truth for the whole product teams, as designers use production-ready components in the designs that later on developers just search for in their libraries to build the product. Besides, the imported components are fully interactive, which means that the prototype will look and behave just like the end product!&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/qDdU37dw7ufAxxsoje8XH37Bh7Egu5jGAU1Kx6yoTriPfPwuuxOoW7T9zLvu2B0JSrj6_QQkTXJPrw6OjNrNO6k4Xgkky7kX8qYlaIekKOI_A78nbt4xiNa3q0wFeon5KmpuGMzV\" alt=\"\"\/><\/figure>\n\n\n\n<p>Reading about the benefits of design systems and code-based design doesn\u2019t always communicate how much more effective tools like UXPin Merge work. Experience the advantages yourself by requesting access to UXPin Merge.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Like a lot of companies, Johnson &amp; Johnson once relied on a style guide to make sure designers used approved language and components. Style guides can still help brands enhance their UX, but they don\u2019t always match the needs of larger companies. Newer technology also makes it possible for smaller enterprises to move from style<\/p>\n","protected":false},"author":3,"featured_media":30300,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-30299","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"yoast_title":"","yoast_metadesc":"How can you go from a static style guide to an interactive design system? Johnson & Johnson completed the challenge with UXPin.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Go From a Style Guide to a Design System | UXPin<\/title>\n<meta name=\"description\" content=\"How can you go from a static style guide to an interactive design system? Johnson &amp; Johnson completed the challenge with UXPin.\" \/>\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\/change-style-to-guide-design-system\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Go From a Style Guide to a Design System\" \/>\n<meta property=\"og:description\" content=\"How can you go from a static style guide to an interactive design system? Johnson &amp; Johnson completed the challenge with UXPin.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/change-style-to-guide-design-system\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-02T12:03:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-12-03T12:09:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/06\/The-UX-UI-designers-guide-to-user-centered-design-copy.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=\"5 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\\\/change-style-to-guide-design-system\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/change-style-to-guide-design-system\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"How to Go From a Style Guide to a Design System\",\"datePublished\":\"2021-06-02T12:03:32+00:00\",\"dateModified\":\"2021-12-03T12:09:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/change-style-to-guide-design-system\\\/\"},\"wordCount\":810,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/change-style-to-guide-design-system\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/06\\\/The-UX-UI-designers-guide-to-user-centered-design-copy.png\",\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/change-style-to-guide-design-system\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/change-style-to-guide-design-system\\\/\",\"name\":\"How to Go From a Style Guide to a Design System | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/change-style-to-guide-design-system\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/change-style-to-guide-design-system\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/06\\\/The-UX-UI-designers-guide-to-user-centered-design-copy.png\",\"datePublished\":\"2021-06-02T12:03:32+00:00\",\"dateModified\":\"2021-12-03T12:09:26+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"How can you go from a static style guide to an interactive design system? Johnson & Johnson completed the challenge with UXPin.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/change-style-to-guide-design-system\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/change-style-to-guide-design-system\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/change-style-to-guide-design-system\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/06\\\/The-UX-UI-designers-guide-to-user-centered-design-copy.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/06\\\/The-UX-UI-designers-guide-to-user-centered-design-copy.png\",\"width\":1200,\"height\":600,\"caption\":\"The UX UI designers guide to user centered design copy\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/change-style-to-guide-design-system\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Go From a Style Guide to a Design System\"}]},{\"@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":"How to Go From a Style Guide to a Design System | UXPin","description":"How can you go from a static style guide to an interactive design system? Johnson & Johnson completed the challenge with UXPin.","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\/change-style-to-guide-design-system\/","og_locale":"en_US","og_type":"article","og_title":"How to Go From a Style Guide to a Design System","og_description":"How can you go from a static style guide to an interactive design system? Johnson & Johnson completed the challenge with UXPin.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/change-style-to-guide-design-system\/","og_site_name":"Studio by UXPin","article_published_time":"2021-06-02T12:03:32+00:00","article_modified_time":"2021-12-03T12:09:26+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/06\/The-UX-UI-designers-guide-to-user-centered-design-copy.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/change-style-to-guide-design-system\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/change-style-to-guide-design-system\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"How to Go From a Style Guide to a Design System","datePublished":"2021-06-02T12:03:32+00:00","dateModified":"2021-12-03T12:09:26+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/change-style-to-guide-design-system\/"},"wordCount":810,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/change-style-to-guide-design-system\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/06\/The-UX-UI-designers-guide-to-user-centered-design-copy.png","articleSection":["Blog"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/change-style-to-guide-design-system\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/change-style-to-guide-design-system\/","name":"How to Go From a Style Guide to a Design System | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/change-style-to-guide-design-system\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/change-style-to-guide-design-system\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/06\/The-UX-UI-designers-guide-to-user-centered-design-copy.png","datePublished":"2021-06-02T12:03:32+00:00","dateModified":"2021-12-03T12:09:26+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"How can you go from a static style guide to an interactive design system? Johnson & Johnson completed the challenge with UXPin.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/change-style-to-guide-design-system\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/change-style-to-guide-design-system\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/change-style-to-guide-design-system\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/06\/The-UX-UI-designers-guide-to-user-centered-design-copy.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/06\/The-UX-UI-designers-guide-to-user-centered-design-copy.png","width":1200,"height":600,"caption":"The UX UI designers guide to user centered design copy"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/change-style-to-guide-design-system\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"How to Go From a Style Guide to a Design System"}]},{"@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\/30299","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=30299"}],"version-history":[{"count":3,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/30299\/revisions"}],"predecessor-version":[{"id":32602,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/30299\/revisions\/32602"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/30300"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=30299"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=30299"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=30299"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}