{"id":15837,"date":"2024-08-29T06:26:09","date_gmt":"2024-08-29T13:26:09","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=15837"},"modified":"2024-08-29T06:26:31","modified_gmt":"2024-08-29T13:26:31","slug":"creating-design-system-uxpin-3-minute-guide","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/creating-design-system-uxpin-3-minute-guide\/","title":{"rendered":"Creating a Design System in UXPin \u2013 The 3-Minute Guide"},"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\/2023\/04\/3-Minute-Design-System-Guide-1024x512.png\" alt=\"3 Minute Design System Guide\" class=\"wp-image-44566\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/04\/3-Minute-Design-System-Guide-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/04\/3-Minute-Design-System-Guide-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/04\/3-Minute-Design-System-Guide-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/04\/3-Minute-Design-System-Guide.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<div style=\"height:0px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>In 2016, we did an intense user research campaign. After 40+ interviews with design and engineering leaders and a survey of 3,100+ designers and developers, we concluded traditional design tools aren&#8217;t good enough to serve modern product development.<\/p>\n\n\n\n<p>Workflows are too fragmented, disconnected, and unfocused. Design system tools must be a complete hub for design and development.&nbsp;<\/p>\n\n\n\n<p>We summarized our findings with three simple rules for our first release of <a href=\"https:\/\/www.uxpin.com\/docs\/design-systems\/design-systems\/\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin Design Systems<\/a>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Dynamic environment, not static documentation<\/li>\n\n\n\n<li>An actionable system, not a reference document<\/li>\n\n\n\n<li>Facilitate a connection between design and development, not just a library of design patterns<\/li>\n<\/ul>\n\n\n\n<p>With these principles in mind, we released the <a href=\"https:\/\/www.uxpin.com\/design-systems\" target=\"_blank\" rel=\"noreferrer noopener\">first design system platform<\/a> on June 13th, 2017.<\/p>\n\n\n\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/KRlje1h6caU\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n\n\n\n<p> UXPin\u2019s Design System Libraries support various stages of design system maturity. The final stage is syncing design and development to create a fully integrated system where designers and engineers share one component library\u2014a single source of truth.<\/p>\n\n\n\n<p>UXPin Merge allows you to import code components from your design system\u2019s repository as visual design elements. Designers can use these components to build prototypes using a simple drag-and-drop workflow. Merge components render on UXPin\u2019s canvas exactly as they do in the repository, enabling designers to create fully functioning prototypes indistinguishable from the final product. <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">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<h2 class=\"wp-block-heading\">How to Create a Design System in UXPin<\/h2>\n\n\n\n<p>To begin, open the <strong>Design Systems<\/strong> tab in the top bar of your UXPin dashboard. Here, you can create a new design system or view existing ones. Let\u2019s start by clicking the <strong>\u201cCreate Design System\u201d<\/strong> button.<\/p>\n\n\n\n<p>You can build a design system in two ways:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Using an Existing Library<\/strong>: UXPin provides pre-built libraries that you can use as a foundation.<\/li>\n\n\n\n<li><strong>Starting from Scratch<\/strong>: For this tutorial, we&#8217;ll start with a blank slate by clicking <strong>\u201cCreate from Scratch.\u201d<\/strong><\/li>\n<\/ul>\n\n\n\n<p><strong>Note:<\/strong> All examples here are created within UXPin, but UXPin Design Systems also support Sketch and Figma imports.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><b>Create a Library of Styles<\/b><\/h3>\n\n\n\n<p>A solid design system begins with the most prevalent design elements\u2014<strong>text styles<\/strong> and <strong>color palettes<\/strong>. UXPin lets you pull these directly from your design projects and save them in a shared Design Systems Library, which acts as an actionable toolkit for your product\u2019s design system.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Adding Colors and Text Styles<\/h4>\n\n\n\n<p>To add colors or text styles, select the relevant layers in Sketch or UXPin. UXPin will automatically pull the styling and add it to your system. These styles stay synced with the library in UXPin or Sketch, making your system dynamic and up-to-date.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Typography<\/strong>: Text styles can be added directly from the Editor, allowing you to maintain a consistent typography system across all designs.<\/li>\n\n\n\n<li><strong>Colors<\/strong>: Add colors by typing their HEX code and pressing \u201cEnter,\u201d importing colors from a website URL, or linking directly to a CSS file. This ensures that all color palettes are centralized and easy to update.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/css-tricks\/image\/upload\/f_auto,q_auto\/v1498084947\/UXPin2_niuqcz.gif\" alt=\"\"\/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><b>Create a Library of Assets<\/b><\/h3>\n\n\n\n<p>Next, save your graphic design assets and share them alongside your colors and text styles\u2014such as logos, approved stock photos, or icon libraries. These assets can be stored in the Design Systems Library, providing your entire team with easy access to a centralized design toolkit.<\/p>\n\n\n\n<p><strong>Assets<\/strong>: Upload images and icons in various formats, including SVG. This makes it easy to maintain a library of all design assets that can be reused across different projects.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><b>Create an Actionable Library of Patterns<\/b><\/h3>\n\n\n\n<p>Design patterns are essential components and elements in your design system. In UXPin, you can create, save, and share these patterns, including those imported from Sketch. You can also add interactivity and animations, enabling designers to reuse these patterns without starting from scratch for each new project.<\/p>\n\n\n\n<p><strong>UI Patterns<\/strong>: These are reusable components and elements designed and prototyped in UXPin. Add them to your design system to ensure consistency and streamline the design process.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/css-tricks\/image\/upload\/f_auto,q_auto\/v1498084951\/UXPin3_mjgxfw.gif\" alt=\"\"\/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><b>Generate a System and Keep it in Sync <\/b><\/h3>\n\n\n\n<p>Having a library of shared assets is an excellent first step, but it&#8217;s not enough to solve the problem of scaling software development.<\/p>\n\n\n\n<p>Most solutions stop here and don&#8217;t move toward development. <em>We&#8217;ve decided to go all the way.<\/em><\/p>\n\n\n\n<p>In UXPin Design Systems, all the colors, text styles, assets, and patterns become a living system with one click. When you add new patterns, text styles, assets, or colors, UXPin automatically updates your design system and generates documentation. These changes are immediately available to all team members and stakeholders.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><b>Add Documentation for Developers<\/b><\/h3>\n\n\n\n<p>Once you&#8217;ve built your system, you can add documentation, including code snippets for patterns and components. Developers can view this documentation with prototypes and mockups, keeping style guides, assets, and instructions in one platform for smoother, faster design handoffs.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/css-tricks\/image\/upload\/f_auto,q_auto\/v1498084957\/UXPin4_gzpbbu.gif\" alt=\"\"\/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><b>Make Documentation Actionable<\/b><\/h3>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-documentation-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">Design system documentation<\/a> shouldn&#8217;t just be a reference document. It must be where the action is \u2013 <em>inside the design projects<\/em>.<\/p>\n\n\n\n<p>With UXPin, your design system documentation follows your projects.<\/p>\n\n\n\n<p>When you deliver a new release, UXPin automatically generates documentation from the product&#8217;s design system, including markup, imports, names of Javascript components, etc<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/css-tricks\/image\/upload\/f_auto,q_auto\/v1498084953\/UXPin5_psqta6.gif\" alt=\"\"\/><\/figure>\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\">Scaling Design Systems With UXPin Merge<\/h2>\n\n\n\n<p>UXPin&#8217;s Design System Libraries take you from stage one to three in <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-maturity-how-to-improve-your-design-system\/\" target=\"_blank\" rel=\"noreferrer noopener\">design system maturity<\/a>. The final stage is syncing design and development to create a fully integrated design system where designers and engineers share one component library\u2013<a href=\"https:\/\/www.uxpin.com\/studio\/blog\/dotsource-importance-of-single-source-of-truth\/\" target=\"_blank\" rel=\"noreferrer noopener\">a single source of truth<\/a>.<\/p>\n\n\n\n<p><em>And that&#8217;s where <\/em><a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\"><em>UXPin Merge<\/em><\/a><em> comes in<\/em>.<\/p>\n\n\n\n<p>Merge imports code components from your design system&#8217;s repository as visual design elements designers can use to build prototypes using a simple drag-and-drop workflow.<\/p>\n\n\n\n<p>Merge components render on UXPin&#8217;s canvas exactly as they do in the repository, allowing designers to build fully functioning prototypes indistinguishable from code.<\/p>\n\n\n\n<p>This high degree of fidelity and code-like functionality enables design teams to get meaningful, actionable feedback from usability testing and stakeholders who can interact and engage with prototypes as they would the final product.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Single source of truth<\/h3>\n\n\n\n<p>Merge also significantly enhances the product development process by centralizing the design system&#8217;s management and distribution from a single repository\u2013no more managing UI kits and a component library with separate instructions and documentation to maintain.<\/p>\n\n\n\n<p>Any changes to the repository automatically sync to UXPin, notifying teams of the update. With UXPin&#8217;s <a href=\"https:\/\/www.uxpin.com\/docs\/merge\/version-control\/\" target=\"_blank\" rel=\"noreferrer noopener\">Version Control<\/a>, designers can choose which projects to update and even revert to earlier design system releases when needed.<\/p>\n\n\n\n<p>Teams can use <a href=\"https:\/\/www.uxpin.com\/docs\/merge\/merge-design-system-documentation\/\" target=\"_blank\" rel=\"noreferrer noopener\">Merge Design System Documentation<\/a> or <a href=\"https:\/\/storybook.js.org\/docs\/react\/writing-docs\/introduction\" target=\"_blank\" rel=\"noreferrer noopener\">Storybook&#8217;s Docs<\/a> (for <a href=\"https:\/\/www.uxpin.com\/merge\/storybook-integration\" target=\"_blank\" rel=\"noreferrer noopener\">Merge Storybook Integration<\/a>) to manage documentation for all team members, simplifying one of the most time-consuming governance and maintenance procedures.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Scaling and streamlining with Patterns<\/h3>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/docs\/merge\/patterns\/\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin&#8217;s Patterns<\/a> enable design teams to create new patterns and templates by combining Merge components. They can use elements from the design system or combine components from other design systems.<\/p>\n\n\n\n<p>UXPin&#8217;s Patterns are also helpful for saving multiple versions or states of a component, template, or screen, allowing designers to swap out and try different variations during testing or feedback sessions with stakeholders. These &#8220;on-the-fly&#8221; changes allow designers to iterate faster and maximize valuable testing time.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Final Thoughts<\/h2>\n\n\n\n<p>To recap, setting up a design system in UXPin involves:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Creating and organizing design elements like colors, typography, assets, and UI patterns.<\/li>\n\n\n\n<li>Documenting each element with descriptions, code, and links.<\/li>\n\n\n\n<li>Using the Spec mode to inspect elements and ensure consistent implementation across your project.<\/li>\n\n\n\n<li>Scaling and syncing design and development with UXPin Merge to maintain a single source of truth.<\/li>\n<\/ul>\n\n\n\n<p>By following this guide, you&#8217;ll be able to create, manage, and scale a comprehensive design system that supports your team from design to development. Visit our Merge page and explore how UXPin can transform your design workflow today! <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Request access to UXPin Merge<\/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>In 2016, we did an intense user research campaign. After 40+ interviews with design and engineering leaders and a survey of 3,100+ designers and developers, we concluded traditional design tools aren&#8217;t good enough to serve modern product development. Workflows are too fragmented, disconnected, and unfocused. Design system tools must be a complete hub for design<\/p>\n","protected":false},"author":3,"featured_media":44566,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,199,19],"tags":[],"class_list":["post-15837","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-design-systems","category-uxpin"],"yoast_title":"","yoast_metadesc":"For faster and more consistent product development, companies all over the world, including such giants as Salesforce, IBM, Airbnb or Microsoft, started to invest in Design Systems.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v18.2.1 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Creating a Design System in UXPin \u2013 The 3-Minute Guide | UXPin<\/title>\n<meta name=\"description\" content=\"For faster and more consistent product development, companies all over the world, including such giants as Salesforce, IBM, Airbnb or Microsoft, started to invest in Design Systems.\" \/>\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\/creating-design-system-uxpin-3-minute-guide\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating a Design System in UXPin \u2013 The 3-Minute Guide\" \/>\n<meta property=\"og:description\" content=\"For faster and more consistent product development, companies all over the world, including such giants as Salesforce, IBM, Airbnb or Microsoft, started to invest in Design Systems.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/creating-design-system-uxpin-3-minute-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2024-08-29T13:26:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-29T13:26:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/04\/3-Minute-Design-System-Guide.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=\"7 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\\\/creating-design-system-uxpin-3-minute-guide\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/creating-design-system-uxpin-3-minute-guide\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"Creating a Design System in UXPin \u2013 The 3-Minute Guide\",\"datePublished\":\"2024-08-29T13:26:09+00:00\",\"dateModified\":\"2024-08-29T13:26:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/creating-design-system-uxpin-3-minute-guide\\\/\"},\"wordCount\":1284,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/creating-design-system-uxpin-3-minute-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/04\\\/3-Minute-Design-System-Guide.png\",\"articleSection\":[\"Blog\",\"Design Systems\",\"UXPin\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/creating-design-system-uxpin-3-minute-guide\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/creating-design-system-uxpin-3-minute-guide\\\/\",\"name\":\"Creating a Design System in UXPin \u2013 The 3-Minute Guide | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/creating-design-system-uxpin-3-minute-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/creating-design-system-uxpin-3-minute-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/04\\\/3-Minute-Design-System-Guide.png\",\"datePublished\":\"2024-08-29T13:26:09+00:00\",\"dateModified\":\"2024-08-29T13:26:31+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"For faster and more consistent product development, companies all over the world, including such giants as Salesforce, IBM, Airbnb or Microsoft, started to invest in Design Systems.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/creating-design-system-uxpin-3-minute-guide\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/creating-design-system-uxpin-3-minute-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/creating-design-system-uxpin-3-minute-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/04\\\/3-Minute-Design-System-Guide.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/04\\\/3-Minute-Design-System-Guide.png\",\"width\":1200,\"height\":600,\"caption\":\"3 Minute Design System Guide\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/creating-design-system-uxpin-3-minute-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating a Design System in UXPin \u2013 The 3-Minute Guide\"}]},{\"@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":"Creating a Design System in UXPin \u2013 The 3-Minute Guide | UXPin","description":"For faster and more consistent product development, companies all over the world, including such giants as Salesforce, IBM, Airbnb or Microsoft, started to invest in Design Systems.","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\/creating-design-system-uxpin-3-minute-guide\/","og_locale":"en_US","og_type":"article","og_title":"Creating a Design System in UXPin \u2013 The 3-Minute Guide","og_description":"For faster and more consistent product development, companies all over the world, including such giants as Salesforce, IBM, Airbnb or Microsoft, started to invest in Design Systems.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/creating-design-system-uxpin-3-minute-guide\/","og_site_name":"Studio by UXPin","article_published_time":"2024-08-29T13:26:09+00:00","article_modified_time":"2024-08-29T13:26:31+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/04\/3-Minute-Design-System-Guide.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/creating-design-system-uxpin-3-minute-guide\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/creating-design-system-uxpin-3-minute-guide\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"Creating a Design System in UXPin \u2013 The 3-Minute Guide","datePublished":"2024-08-29T13:26:09+00:00","dateModified":"2024-08-29T13:26:31+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/creating-design-system-uxpin-3-minute-guide\/"},"wordCount":1284,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/creating-design-system-uxpin-3-minute-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/04\/3-Minute-Design-System-Guide.png","articleSection":["Blog","Design Systems","UXPin"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/creating-design-system-uxpin-3-minute-guide\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/creating-design-system-uxpin-3-minute-guide\/","name":"Creating a Design System in UXPin \u2013 The 3-Minute Guide | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/creating-design-system-uxpin-3-minute-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/creating-design-system-uxpin-3-minute-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/04\/3-Minute-Design-System-Guide.png","datePublished":"2024-08-29T13:26:09+00:00","dateModified":"2024-08-29T13:26:31+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"For faster and more consistent product development, companies all over the world, including such giants as Salesforce, IBM, Airbnb or Microsoft, started to invest in Design Systems.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/creating-design-system-uxpin-3-minute-guide\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/creating-design-system-uxpin-3-minute-guide\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/creating-design-system-uxpin-3-minute-guide\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/04\/3-Minute-Design-System-Guide.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/04\/3-Minute-Design-System-Guide.png","width":1200,"height":600,"caption":"3 Minute Design System Guide"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/creating-design-system-uxpin-3-minute-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Creating a Design System in UXPin \u2013 The 3-Minute Guide"}]},{"@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\/15837","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=15837"}],"version-history":[{"count":7,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/15837\/revisions"}],"predecessor-version":[{"id":54310,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/15837\/revisions\/54310"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/44566"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=15837"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=15837"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=15837"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}