{"id":62894,"date":"2019-04-02T04:16:29","date_gmt":"2019-04-02T11:16:29","guid":{"rendered":"http:\/\/www.taterboy.com\/blog\/2019\/04\/design-system-what-it-is-and-how-to-create-one-using-indigo-design\/"},"modified":"2019-04-02T04:16:29","modified_gmt":"2019-04-02T11:16:29","slug":"design-system-what-it-is-and-how-to-create-one-using-indigo-design","status":"publish","type":"post","link":"https:\/\/www.taterboy.com\/blog\/2019\/04\/design-system-what-it-is-and-how-to-create-one-using-indigo-design\/","title":{"rendered":"Design System: What It Is And How To Create One Using Indigo.Design"},"content":{"rendered":"<link rel=\"canonical\" href=\"https:\/\/www.smashingmagazine.com\/2019\/04\/design-system-indigo\/\"><title>Design System: What It Is And How To Create One Using Indigo.Design<\/title><\/p>\n<article>\n<header>\n<h1>Design System: What It Is And How To Create One Using Indigo.Design<\/h1>\n<address>Nick Babich<\/address>\n<p>                  <time datetime=\"2019-04-02T12:30:58+02:00\">2019-04-02T12:30:58+02:00<\/time><time datetime=\"2019-04-02T11:06:19+00:00\">2019-04-02T11:06:19+00:00<\/time><\/header>\n<p>(This is a sponsored article.) Design is about scaling. Digital products are becoming more and more complex, and it is evident that product teams need to adapt their approach when designing them. To deliver well-designed products to the market, many organizations have started taking a more systematic approach to design, experimenting with style guides and pattern libraries in order to create design systems.<\/p>\n<p>While product teams might face various problems in creating and incorporating a design system into their design process, one of the most common problems is integrating the different tools a team uses. Even if a team has a pixel-perfect visual design with properly handled components, they could face trouble in the design handoff and coding, all because their tools do not work properly with each other.<\/p>\n<p><a href=\"https:\/\/www.infragistics.com\/products\/indigo-design\">Indigo.Design<\/a> attempts to solve this problem by introducing a unified platform for visual design, UX prototyping, code generation and app development. Using this platform increases the chances that you will create a design system that takes root and becomes an essential part of the organization. In this article, we\u2019ll focus on just one aspect of this tool: using a design system in a visual design. But before that, it\u2019s important to define what a design system is.<\/p>\n<h3>What Is A Design System?<\/h3>\n<p>A design system is a collection of elements that can be combined and reused to build products. This definition might give the wrong impression that it\u2019s a single design deliverable, such as a Sketch library with UI components or a style guide. In fact, a design system is much more than that. Think of it as a process and a set of deliverables that create a shared language that everybody on the team will use when creating a product.<\/p>\n<p>A design system is about communication. A well-crafted design system establishes a common shared language among team members, and this language allows the team to collaborate more effectively. Thus, the ultimate goal in creating a design system is to create both a single source of truth that can be referred to during product design and an effective shared language that all team members can use when working on a product.<\/p>\n<h4>What Problems Does A Design System Solve For Team Members?<\/h4>\n<p>Perhaps the most crucial thing that a design system brings to a product team is a different approach \u2014 members start approaching a design with a system in mind. Here are a few everyday tasks that a design system can help a team member with:<\/p>\n<ul>\n<li>Quickly find and use the right component, pattern or style option (color, typeface, icon, etc.);<\/li>\n<li>Reuse a component or pattern (either in the same product or in another product);<\/li>\n<li>Know how to use a component or pattern properly (product creators will now have this guidance when creating products);<\/li>\n<li>Reassure yourself that the components you are using are up to date.<\/li>\n<\/ul>\n<h4>What Can Motivate A Team To Think About A Design System?<\/h4>\n<p>There are a few powerful motivators for a team to think about a design system:<\/p>\n<ul>\n<li><strong>Design debt.<\/strong><br \/>\nAs products and teams age, they accumulate design and development debt. Non-reusable conventions, inconsistent styles and legacy code are the most common sources of design and technical debt. Debt prevents a team from moving quickly. A design system helps an organization to reduce its debt.<\/li>\n<li><strong>Collaboration and communication problems.<\/strong><br \/>\nIn large companies, a few different teams will usually work on a single project. Even with a team that communicates regularly, it\u2019s quite common for their work to overlap (such as by creating similar components or UX patterns). A design system can build bridges between teams and make it easier to reuse work.<\/li>\n<li><strong>Repetitive work.<\/strong><br \/>\nA design system frees up time from repetitive work so that the team can focus on solving more interesting problems. The fact that team member won\u2019t need to worry about which icon or button to choose in a particular situation not only saves valuable time, but also helps them to focus on the big picture: thinking more about how the user will use the product.<\/li>\n<li><strong>Consistency within a product family.<\/strong><br \/>\nLarge companies need to design for multiple platforms and have a consistent experience across all platforms (both in behavior and interaction). Considering that an individual team is responsible for creating a design for a particular platform, this isn\u2019t a simple task. A design system makes it much easier to design a consistent experience across all platforms.<\/li>\n<\/ul>\n<h3>The Key Qualities Of A Well-Functioning Design System<\/h3>\n<p>Regardless of the technologies and tools behind it, an effective design system has the following characteristics:<\/p>\n<ul>\n<li><strong>It should be adopted by the team.<\/strong><br \/>\nThe system should fit the culture of the team. It should become a natural part of the design process and evolve gradually with the team\u2019s products.<\/li>\n<li><strong>It should be balanced.<\/strong><br \/>\nThe system should give team members enough freedom to contribute yet stay within parameters.<\/li>\n<li><strong>It should be consistent.<\/strong><br \/>\nThe different parts of the system work well together.<\/li>\n<li><strong>It should be well-documented.<\/strong><br \/>\nThe quality of documentation has a direct impact on the system\u2019s adoption. If something is not documented, it doesn\u2019t exist. That\u2019s why the documentation should always be up to date.<\/li>\n<li><strong>It should be robust.<\/strong><br \/>\nWhatever the product or platform to which a design system is applied, the final product should have minimal flaws.<\/li>\n<li><strong>It should be highly reusable.<\/strong><br \/>\nAll components of the system should be able to be reused in many contexts.<\/li>\n<li><strong>Last but not least, it should be cost-effective.<\/strong><br \/>\nAn effective system can make the design process more cost-effective.<\/li>\n<\/ul>\n<h3>How Does Indigo.Design Simplify The Process Of Building A Design System?<\/h3>\n<p>Starting a design system can feel daunting. It\u2019s evident that a great design system cannot be built overnight; there are too many things to consider. Even with all its benefits, it\u2019s hard to get buy-in from the teams involved in design and development, mainly because the system will influence the way designers and developers work. Let\u2019s see how Indigo.Design can improve this process.<\/p>\n<p>The key thing that differentiates Indigo.Design from any other tool is that it\u2019s a unified platform for visual design, UX prototyping, code generation and app development. Usually, design systems are created by product companies for their own products.<\/p>\n<p>As a result of the significant number of user requests and expertise in building UI controls, the Indigo team has identified the component and pattern needs of a great number of clients from various industries. Thanks to this knowledge, Indigo.Design\u2019s system goes beyond regular design systems that are created for specific product needs; rather, it is a ready-to-use design system that can be easily adjusted to the needs of a particular team. Users can use Indigo.Design\u2019s Sketch UI kit as a starting point to build their own system using the premade components and patterns.<\/p>\n<p>Indigo.Design consists of three parts: <a href=\"https:\/\/www.smashingmagazine.com\/articles\/#components\">components<\/a>, <a href=\"https:\/\/www.smashingmagazine.com\/articles\/#patterns\">patterns<\/a> and <a href=\"https:\/\/www.smashingmagazine.com\/articles\/#styling\">styling<\/a>. All three parts are integrated as Sketch libraries and are perfectly synced. They will appear in the \u2018Symbols\u2019 section in Sketch.<\/p>\n<h4>Components<\/h4>\n<p>Components are the building blocks of user interfaces. Think of components as LEGO blocks that you can use to create a product. Avatars, cards and dialogs are just a few examples of components.<\/p>\n<p>Components range in complexity, from simple components such as a \u201cSubmit\u201d button to more complex components such as interactive cards. Usually, the more complex a component, the fewer the scenarios to which it can be applied.<\/p>\n<p>Component-based design and development bring a lot of benefits to the design process, reducing technical overhead by making design and code reusable.<\/p>\n<p>Because components are designed and built in code, for each component, it\u2019s vital to describe both:<\/p>\n<ul>\n<li>visual language (visual appearance),<\/li>\n<li>functional behavior (code).<\/li>\n<\/ul>\n<p>Indigo.Design provides a flexible way of working with components:<\/p>\n<ul>\n<li>The design library has over 50 components:<\/li>\n<\/ul>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/17980d65-a43e-4d1f-88bd-0a6403a976b2\/indigo-design-system-0.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/indigo-design-system-0.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/17980d65-a43e-4d1f-88bd-0a6403a976b2\/indigo-design-system-0.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/17980d65-a43e-4d1f-88bd-0a6403a976b2\/indigo-design-system-0.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/17980d65-a43e-4d1f-88bd-0a6403a976b2\/indigo-design-system-0.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/17980d65-a43e-4d1f-88bd-0a6403a976b2\/indigo-design-system-0.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/indigo-design-system-0.png?w=900\" sizes=\"100vw\" alt=\"A robust array of components are available in Indigo.Design\"><\/a><figcaption>\n\t\t\tA robust array of components are available in Indigo.Design. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/17980d65-a43e-4d1f-88bd-0a6403a976b2\/indigo-design-system-0.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<ul>\n<li>Indigo allows you to modify everything about a component in a structure way. Individual properties, such as size, styling, icons, fonts and events, can be modified in the Overrides section of a component. For example, for avatars, we can select a different shape of the object, changing it from a circle to a square. With overrides, it\u2019s possible to create unlimited design combinations to drive your team\u2019s productivity.<\/li>\n<li>The components of a design system are interdependent. When we introduce a change in one place, the change will be inherited throughout the system.<\/li>\n<li>Indigo makes it easier to translate design into code. All components map to the Ignite UI for Angular components. Data from the DataProperty field will be passed through to the code generator.<\/li>\n<\/ul>\n<p>Below, you can see a layout with an input component. Sketch\u2019s Overrides section contains the properties of the selected component. Modifying each property in a structured way is easy; basically, everything from styling options to events can be easily adjusted.<\/p>\n<p>Each component can have a different list of Overrides based on its capabilities. For example, for the input field, we notice a DataProperty field, which can be translated directly to a code generator.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/228e2014-7d45-4e25-a76d-ea51e3f04f84\/indigo-design-system-1.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/indigo-design-system-1.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/228e2014-7d45-4e25-a76d-ea51e3f04f84\/indigo-design-system-1.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/228e2014-7d45-4e25-a76d-ea51e3f04f84\/indigo-design-system-1.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/228e2014-7d45-4e25-a76d-ea51e3f04f84\/indigo-design-system-1.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/228e2014-7d45-4e25-a76d-ea51e3f04f84\/indigo-design-system-1.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/indigo-design-system-1.png?w=900\" sizes=\"100vw\" alt=\"Use Overrides to modify the properties of a component\"><\/a><figcaption>\n\t\t\tUse Overrides to modify the properties of a component. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/228e2014-7d45-4e25-a76d-ea51e3f04f84\/indigo-design-system-1.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<h4>Patterns<\/h4>\n<p>Many designers think that patterns and components are the same things. They are not. The idea of a design pattern was introduced by architect Christopher Alexander. In his book <em>A Pattern Language<\/em>, Alexander gives the following description:<\/p>\n<blockquote><p>\u201cEach pattern describes a problem which occurs over and over again in our environment, and then describes the core of the solution to that problem, in such a way that you can use this solution a million times over, without ever doing it the same way twice.\u201d<\/p><\/blockquote>\n<p>Similarly to architecture, we use patterns in interface design to solve common problems. For example, many apps have contact lists. It\u2019s possible to create a contact list using components, by pairing avatars and text sections.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/20d6625c-2178-4900-93e8-ea84a5756e46\/indigo-design-system-2.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/indigo-design-system-2.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/20d6625c-2178-4900-93e8-ea84a5756e46\/indigo-design-system-2.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/20d6625c-2178-4900-93e8-ea84a5756e46\/indigo-design-system-2.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/20d6625c-2178-4900-93e8-ea84a5756e46\/indigo-design-system-2.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/20d6625c-2178-4900-93e8-ea84a5756e46\/indigo-design-system-2.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/indigo-design-system-2.png?w=900\" sizes=\"100vw\" alt=\"Create a contact list using Indigo.Design\u2019s avatar and text component sections\"><\/a><figcaption>\n\t\t\tCreate a contact list using Indigo.Design\u2019s avatar and text component sections. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/20d6625c-2178-4900-93e8-ea84a5756e46\/indigo-design-system-2.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>But there is a much easier approach \u2014 use a pattern called \u2018List\u2019.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/45e052d1-1e10-4ca2-9351-6bb587412143\/indigo-design-system-3.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/indigo-design-system-3.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/45e052d1-1e10-4ca2-9351-6bb587412143\/indigo-design-system-3.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/45e052d1-1e10-4ca2-9351-6bb587412143\/indigo-design-system-3.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/45e052d1-1e10-4ca2-9351-6bb587412143\/indigo-design-system-3.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/45e052d1-1e10-4ca2-9351-6bb587412143\/indigo-design-system-3.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/indigo-design-system-3.png?w=900\" sizes=\"100vw\" alt=\"Use Indigo.Patterns\u2019 list for people\"><\/a><figcaption>\n\t\t\tUse Indigo.Patterns\u2019 list for people. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/45e052d1-1e10-4ca2-9351-6bb587412143\/indigo-design-system-3.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>Patterns empower designers, allow people to use their previous experience when interacting with a product. Because many design patterns are familiar to users, they will enable a design to be understood intuitively.<\/p>\n<p>Components and patterns form the language of a product\u2019s interface. But a design system should contain not only patterns, but also techniques and practices for using and iterating on those patterns. For many companies, a pattern library typically lives in a wiki, which means it\u2019s difficult to keep up to date. What makes things worse is that patterns are also shaped by the conventions of platforms (for example, iOS and Android).<\/p>\n<p>Indigo.Design solves these common problems by providing easily customizable UX patterns for a brand\u2019s needs.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/97280a97-2c22-4a94-9e1d-b27260e6b07a\/indigo-design-system-4.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/indigo-design-system-4.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/97280a97-2c22-4a94-9e1d-b27260e6b07a\/indigo-design-system-4.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/97280a97-2c22-4a94-9e1d-b27260e6b07a\/indigo-design-system-4.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/97280a97-2c22-4a94-9e1d-b27260e6b07a\/indigo-design-system-4.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/97280a97-2c22-4a94-9e1d-b27260e6b07a\/indigo-design-system-4.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/indigo-design-system-4.png?w=900\" sizes=\"100vw\" alt=\"Adding elevation for the article details pattern\"><\/a><figcaption>\n\t\t\tAdding elevation for the article details pattern (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/97280a97-2c22-4a94-9e1d-b27260e6b07a\/indigo-design-system-4.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>With the last release of Indigo.Design, it\u2019s become much easier to customize styling options: You can apply your styling options for the entire design all at once using the <a href=\"https:\/\/www.infragistics.com\/products\/indigo-design\/help\/sync-themes-plugin.html\">Theme<\/a> plugin.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/32efe689-73ed-4f26-a796-421038d17af3\/indigo-design-system-5.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/indigo-design-system-5.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/32efe689-73ed-4f26-a796-421038d17af3\/indigo-design-system-5.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/32efe689-73ed-4f26-a796-421038d17af3\/indigo-design-system-5.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/32efe689-73ed-4f26-a796-421038d17af3\/indigo-design-system-5.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/32efe689-73ed-4f26-a796-421038d17af3\/indigo-design-system-5.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/indigo-design-system-5.png?w=900\" sizes=\"100vw\" alt=\"Indigo.Design\u2019s Theme plugin allows you to apply style settings for all elements in a design\"><\/a><figcaption>\n\t\t\tIndigo.Design\u2019s Theme plugin allows you to apply style settings for all elements in a design. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/32efe689-73ed-4f26-a796-421038d17af3\/indigo-design-system-5.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<h4>Styling<\/h4>\n<p>A style is something we use to create a certain kind of aesthetic and to strengthen the emotional connection between a product and its users. Indigo.Design makes it really easy to create an elegant design that matches your brand.<\/p>\n<p>Indigo-Styling.sketch is a representation of the theming engine. It is separated into two parts, represented as different pages in the library:<\/p>\n<ul>\n<li>Icons are a collection of over a hundred Material icons that you can easily extend.<\/li>\n<li>Colors are a rich collection of primary, secondary and special colors, as well as shades of gray and levels of opacity.<\/li>\n<\/ul>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/b178dfc6-f17b-4759-99bb-57f6665e5978\/indigo-design-system-6.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/indigo-design-system-6.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/b178dfc6-f17b-4759-99bb-57f6665e5978\/indigo-design-system-6.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/b178dfc6-f17b-4759-99bb-57f6665e5978\/indigo-design-system-6.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/b178dfc6-f17b-4759-99bb-57f6665e5978\/indigo-design-system-6.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/b178dfc6-f17b-4759-99bb-57f6665e5978\/indigo-design-system-6.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/indigo-design-system-6.png?w=900\" sizes=\"100vw\" alt=\"\"><\/a><figcaption>\n\t\t\t(<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/b178dfc6-f17b-4759-99bb-57f6665e5978\/indigo-design-system-6.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>The styling library allows you to do custom branding (changing colors, fonts, etc.), and it is also inherited by the design. With just a few clicks, you can create and reuse a theme.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f3368483-75c8-4db6-bc8f-068032c73bc5\/indigo-design-system-7.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/indigo-design-system-7.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f3368483-75c8-4db6-bc8f-068032c73bc5\/indigo-design-system-7.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f3368483-75c8-4db6-bc8f-068032c73bc5\/indigo-design-system-7.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f3368483-75c8-4db6-bc8f-068032c73bc5\/indigo-design-system-7.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f3368483-75c8-4db6-bc8f-068032c73bc5\/indigo-design-system-7.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/indigo-design-system-7.png?w=900\" sizes=\"100vw\" alt=\"Change the text color of a form\u2019s active elements to the product\u2019s primary color using Overrides\"><\/a><figcaption>\n\t\t\tChange the text color of a form\u2019s active elements to the product\u2019s primary color using Overrides. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f3368483-75c8-4db6-bc8f-068032c73bc5\/indigo-design-system-7.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/26c1d80e-143f-4a93-9b69-bbe4ec8b3b10\/indigo-design-system-8.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/indigo-design-system-8.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/26c1d80e-143f-4a93-9b69-bbe4ec8b3b10\/indigo-design-system-8.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/26c1d80e-143f-4a93-9b69-bbe4ec8b3b10\/indigo-design-system-8.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/26c1d80e-143f-4a93-9b69-bbe4ec8b3b10\/indigo-design-system-8.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/26c1d80e-143f-4a93-9b69-bbe4ec8b3b10\/indigo-design-system-8.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/indigo-design-system-8.png?w=900\" sizes=\"100vw\" alt=\"\"><\/a><figcaption>\n\t\t\t(<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/26c1d80e-143f-4a93-9b69-bbe4ec8b3b10\/indigo-design-system-8.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>Indigo.Design\u2019s <a href=\"https:\/\/www.infragistics.com\/products\/indigo-design\/help\/sync-themes-plugin.html\">Theme functionality<\/a> lets you take care of most of your styles in a systematic way.<\/p>\n<h3>Conclusion<\/h3>\n<p>Design systems have changed the way we design and build applications. They are quickly becoming a cornerstone of an organization\u2019s digital product strategy. And it\u2019s extremely important to select tools that allow you to set a solid cornerstone for your product\u2019s design process. <a href=\"https:\/\/www.infragistics.com\/products\/indigo-design\">Indigo.Design<\/a> offers a ready-to-use design system that can be adapted to your individual needs.<\/p>\n<div>\n  <img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/logo-red-1.png?w=900\" alt=\"Smashing Editorial\"><span>(ms, al, il)<\/span>\n<\/div>\n<\/article>\n<p class=\"wpematico_credit\"><small>Powered by <a href=\"http:\/\/www.wpematico.com\" target=\"_blank\">WPeMatico<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Design System: What It Is And How To Create One Using Indigo.Design Design System: What It Is And How To Create One Using Indigo.Design Nick Babich 2019-04-02T12:30:58+02:002019-04-02T11:06:19+00:00 (This is a sponsored article.) Design is about scaling. Digital products are becoming more and more complex, and it is evident that product teams need to adapt their&#8230;<a class=\"moretag\" href=\"https:\/\/www.taterboy.com\/blog\/2019\/04\/design-system-what-it-is-and-how-to-create-one-using-indigo-design\/\"> Read the full article&#8230;<\/a><\/p>\n","protected":false},"author":4,"featured_media":62895,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[371],"tags":[],"class_list":["post-62894","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-user-experience"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.0.1 - aioseo.com -->\n\t<meta name=\"description\" content=\"Design System: What It Is And How To Create One Using Indigo.DesignDesign System: What It Is And How To Create One Using Indigo.Design Nick Babich 2019-04-02T12:30:58+02:002019-04-02T11:06:19+00:00(This is a sponsored article.) Design is about scaling. Digital products are becoming more and more complex, and it is evident that product teams need to adapt their approach when\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Guest Contribution\"\/>\n\t<meta name=\"keywords\" content=\"user experience\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.taterboy.com\/blog\/2019\/04\/design-system-what-it-is-and-how-to-create-one-using-indigo-design\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.0.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Design System: What It Is And How To Create One Using Indigo.Design | Design for Immersive Technologies\" \/>\n\t\t<meta property=\"og:description\" content=\"Design System: What It Is And How To Create One Using Indigo.DesignDesign System: What It Is And How To Create One Using Indigo.Design Nick Babich 2019-04-02T12:30:58+02:002019-04-02T11:06:19+00:00(This is a sponsored article.) Design is about scaling. Digital products are becoming more and more complex, and it is evident that product teams need to adapt their approach when\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/www.taterboy.com\/blog\/2019\/04\/design-system-what-it-is-and-how-to-create-one-using-indigo-design\/\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2019-04-02T11:16:29+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2019-04-02T11:16:29+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Design System: What It Is And How To Create One Using Indigo.Design | Design for Immersive Technologies\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Design System: What It Is And How To Create One Using Indigo.DesignDesign System: What It Is And How To Create One Using Indigo.Design Nick Babich 2019-04-02T12:30:58+02:002019-04-02T11:06:19+00:00(This is a sponsored article.) Design is about scaling. Digital products are becoming more and more complex, and it is evident that product teams need to adapt their approach when\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/04\\\/design-system-what-it-is-and-how-to-create-one-using-indigo-design\\\/#article\",\"name\":\"Design System: What It Is And How To Create One Using Indigo.Design | Design for Immersive Technologies\",\"headline\":\"Design System: What It Is And How To Create One Using Indigo.Design\",\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.taterboy.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/04\\\/indigo-design-system-0.png?fit=400%2C711&ssl=1\",\"width\":400,\"height\":711},\"datePublished\":\"2019-04-02T04:16:29-07:00\",\"dateModified\":\"2019-04-02T04:16:29-07:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/04\\\/design-system-what-it-is-and-how-to-create-one-using-indigo-design\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/04\\\/design-system-what-it-is-and-how-to-create-one-using-indigo-design\\\/#webpage\"},\"articleSection\":\"User Experience\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/04\\\/design-system-what-it-is-and-how-to-create-one-using-indigo-design\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"name\":\"User Experience\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"position\":2,\"name\":\"User Experience\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/04\\\/design-system-what-it-is-and-how-to-create-one-using-indigo-design\\\/#listItem\",\"name\":\"Design System: What It Is And How To Create One Using Indigo.Design\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/04\\\/design-system-what-it-is-and-how-to-create-one-using-indigo-design\\\/#listItem\",\"position\":3,\"name\":\"Design System: What It Is And How To Create One Using Indigo.Design\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"name\":\"User Experience\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/\",\"name\":\"Guest Contribution\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/04\\\/design-system-what-it-is-and-how-to-create-one-using-indigo-design\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Guest Contribution\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/04\\\/design-system-what-it-is-and-how-to-create-one-using-indigo-design\\\/#webpage\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/04\\\/design-system-what-it-is-and-how-to-create-one-using-indigo-design\\\/\",\"name\":\"Design System: What It Is And How To Create One Using Indigo.Design | Design for Immersive Technologies\",\"description\":\"Design System: What It Is And How To Create One Using Indigo.DesignDesign System: What It Is And How To Create One Using Indigo.Design Nick Babich 2019-04-02T12:30:58+02:002019-04-02T11:06:19+00:00(This is a sponsored article.) Design is about scaling. Digital products are becoming more and more complex, and it is evident that product teams need to adapt their approach when\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/04\\\/design-system-what-it-is-and-how-to-create-one-using-indigo-design\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.taterboy.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/04\\\/indigo-design-system-0.png?fit=400%2C711&ssl=1\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/04\\\/design-system-what-it-is-and-how-to-create-one-using-indigo-design\\\/#mainImage\",\"width\":400,\"height\":711},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/04\\\/design-system-what-it-is-and-how-to-create-one-using-indigo-design\\\/#mainImage\"},\"datePublished\":\"2019-04-02T04:16:29-07:00\",\"dateModified\":\"2019-04-02T04:16:29-07:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Design System: What It Is And How To Create One Using Indigo.Design | Design for Immersive Technologies","description":"Design System: What It Is And How To Create One Using Indigo.DesignDesign System: What It Is And How To Create One Using Indigo.Design Nick Babich 2019-04-02T12:30:58+02:002019-04-02T11:06:19+00:00(This is a sponsored article.) Design is about scaling. Digital products are becoming more and more complex, and it is evident that product teams need to adapt their approach when","canonical_url":"https:\/\/www.taterboy.com\/blog\/2019\/04\/design-system-what-it-is-and-how-to-create-one-using-indigo-design\/","robots":"max-image-preview:large","keywords":"user experience","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.taterboy.com\/blog\/2019\/04\/design-system-what-it-is-and-how-to-create-one-using-indigo-design\/#article","name":"Design System: What It Is And How To Create One Using Indigo.Design | Design for Immersive Technologies","headline":"Design System: What It Is And How To Create One Using Indigo.Design","author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/indigo-design-system-0.png?fit=400%2C711&ssl=1","width":400,"height":711},"datePublished":"2019-04-02T04:16:29-07:00","dateModified":"2019-04-02T04:16:29-07:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/04\/design-system-what-it-is-and-how-to-create-one-using-indigo-design\/#webpage"},"isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/04\/design-system-what-it-is-and-how-to-create-one-using-indigo-design\/#webpage"},"articleSection":"User Experience"},{"@type":"BreadcrumbList","@id":"https:\/\/www.taterboy.com\/blog\/2019\/04\/design-system-what-it-is-and-how-to-create-one-using-indigo-design\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","position":1,"name":"Home","item":"https:\/\/www.taterboy.com\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","name":"User Experience"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","position":2,"name":"User Experience","item":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2019\/04\/design-system-what-it-is-and-how-to-create-one-using-indigo-design\/#listItem","name":"Design System: What It Is And How To Create One Using Indigo.Design"},"previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2019\/04\/design-system-what-it-is-and-how-to-create-one-using-indigo-design\/#listItem","position":3,"name":"Design System: What It Is And How To Create One Using Indigo.Design","previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","name":"User Experience"}}]},{"@type":"Organization","@id":"https:\/\/www.taterboy.com\/blog\/#organization","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","url":"https:\/\/www.taterboy.com\/blog\/"},{"@type":"Person","@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author","url":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/","name":"Guest Contribution","image":{"@type":"ImageObject","@id":"https:\/\/www.taterboy.com\/blog\/2019\/04\/design-system-what-it-is-and-how-to-create-one-using-indigo-design\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g","width":96,"height":96,"caption":"Guest Contribution"}},{"@type":"WebPage","@id":"https:\/\/www.taterboy.com\/blog\/2019\/04\/design-system-what-it-is-and-how-to-create-one-using-indigo-design\/#webpage","url":"https:\/\/www.taterboy.com\/blog\/2019\/04\/design-system-what-it-is-and-how-to-create-one-using-indigo-design\/","name":"Design System: What It Is And How To Create One Using Indigo.Design | Design for Immersive Technologies","description":"Design System: What It Is And How To Create One Using Indigo.DesignDesign System: What It Is And How To Create One Using Indigo.Design Nick Babich 2019-04-02T12:30:58+02:002019-04-02T11:06:19+00:00(This is a sponsored article.) Design is about scaling. Digital products are becoming more and more complex, and it is evident that product teams need to adapt their approach when","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/04\/design-system-what-it-is-and-how-to-create-one-using-indigo-design\/#breadcrumblist"},"author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"creator":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/indigo-design-system-0.png?fit=400%2C711&ssl=1","@id":"https:\/\/www.taterboy.com\/blog\/2019\/04\/design-system-what-it-is-and-how-to-create-one-using-indigo-design\/#mainImage","width":400,"height":711},"primaryImageOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/04\/design-system-what-it-is-and-how-to-create-one-using-indigo-design\/#mainImage"},"datePublished":"2019-04-02T04:16:29-07:00","dateModified":"2019-04-02T04:16:29-07:00"},{"@type":"WebSite","@id":"https:\/\/www.taterboy.com\/blog\/#website","url":"https:\/\/www.taterboy.com\/blog\/","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","inLanguage":"en-US","publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"}}]},"og:locale":"en_US","og:site_name":"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","og:type":"article","og:title":"Design System: What It Is And How To Create One Using Indigo.Design | Design for Immersive Technologies","og:description":"Design System: What It Is And How To Create One Using Indigo.DesignDesign System: What It Is And How To Create One Using Indigo.Design Nick Babich 2019-04-02T12:30:58+02:002019-04-02T11:06:19+00:00(This is a sponsored article.) Design is about scaling. Digital products are becoming more and more complex, and it is evident that product teams need to adapt their approach when","og:url":"https:\/\/www.taterboy.com\/blog\/2019\/04\/design-system-what-it-is-and-how-to-create-one-using-indigo-design\/","article:published_time":"2019-04-02T11:16:29+00:00","article:modified_time":"2019-04-02T11:16:29+00:00","twitter:card":"summary","twitter:title":"Design System: What It Is And How To Create One Using Indigo.Design | Design for Immersive Technologies","twitter:description":"Design System: What It Is And How To Create One Using Indigo.DesignDesign System: What It Is And How To Create One Using Indigo.Design Nick Babich 2019-04-02T12:30:58+02:002019-04-02T11:06:19+00:00(This is a sponsored article.) Design is about scaling. Digital products are becoming more and more complex, and it is evident that product teams need to adapt their approach when"},"aioseo_meta_data":{"post_id":"62894","title":null,"description":null,"keywords":null,"keyphrases":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_custom_url":null,"og_image_custom_fields":null,"og_custom_image_width":null,"og_custom_image_height":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"location":null,"local_seo":null,"created":"2021-02-07 21:16:35","updated":"2026-09-01 07:52:08","focus_keyword":null,"additional_keywords":null,"truseo_locale":null,"primary_term":null,"og_image_url":null,"og_image_width":null,"og_image_height":null,"twitter_image_url":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"limit_modified_date":false,"ai":null,"breadcrumb_settings":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/\" title=\"User Experience\">User Experience<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tDesign System: What It Is And How To Create One Using Indigo.Design\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/www.taterboy.com\/blog"},{"label":"User Experience","link":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/"},{"label":"Design System: What It Is And How To Create One Using Indigo.Design","link":"https:\/\/www.taterboy.com\/blog\/2019\/04\/design-system-what-it-is-and-how-to-create-one-using-indigo-design\/"}],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8wzr5-gmq","jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/04\/indigo-design-system-0.png?fit=400%2C711&ssl=1","_links":{"self":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/62894","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/comments?post=62894"}],"version-history":[{"count":0,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/62894\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media\/62895"}],"wp:attachment":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media?parent=62894"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/categories?post=62894"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/tags?post=62894"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}