{"id":18446,"date":"2020-01-23T16:00:01","date_gmt":"2020-01-23T16:00:01","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=18446"},"modified":"2020-12-14T09:39:24","modified_gmt":"2020-12-14T09:39:24","slug":"building-design-systems","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/building-design-systems\/","title":{"rendered":"Everything you need to know about design systems"},"content":{"rendered":"<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Design Systems has become a key part of my everyday work\u2026 And from the surrounding discussions, it is now the case for many people ;)<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img class=\"size-full\" title=\"\" alt=\"\" \/><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/11\/1-Fcng9a7mZ01KEZNd0E51w.jpeg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/11\/1-Fcng9a7mZ01KEZNd0E51w.jpeg\" title=\"\" alt=\"\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">After reading <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/designsystemsbook.com\/\">Alla Kholmatova\u2019s book<\/a> last year, I was lucky to attend the <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.backelite.com\/fr\/2018\/03\/a-design-systems-conference\/\">first European conference<\/a> on the subject in March. All of this strengthened my conviction that, in the future, every brand and every product will use a Design System, simple or comprehensive, strict or loose, mono or cross platforms\u2026<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">What is a Design System?<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I keep hearing various definitions, so let me start by saying what a Design System isn\u2019t: it is <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/bradfrost.com\/blog\/post\/your-sketch-library-is-not-a-design-system\/\">not a Sketch library<\/a>, no more than a Style guide or a Pattern Library\u2026 Actually, it\u2019s all of this and so much more!<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"A Design System is the single source of truth which groups all the elements that will allow the teams to design, realize and develop a product.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img class=\"size-full\" title=\"\" alt=\"\" \/><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/11\/1vI3VLuqj0NPUjI6MX25RuQ.jpeg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/11\/1vI3VLuqj0NPUjI6MX25RuQ.jpeg\" alt=\"What is a Design System?\" width=\"2866\" height=\"2769\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">So a Design System is not a deliverable, but a set of deliverables. It will evolve constantly with the product, the tools and the new technologies.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">As Jina Anne describes perfectly in <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/vimeo.com\/262958762\">this conference<\/a>, the System is composed of tangibles and non-tangibles elements :<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>Tools for designers &amp; developers, patterns, components, guidelines\u2026<\/li>\n<li>But also -and it\u2019s often the most difficult thing to achieve- some abstract elements such as brand values, shared ways of working, mindset, shared beliefs\u2026<\/li>\n<\/ul>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Style Guide or Pattern Library: what\u2019s the difference?<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">As it should be clear for you now, the Style guide and the Pattern Library are just some of the deliverables of a Design System.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">A <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Style Guide<\/strong> -as indicated by its name- will focus on graphic styles (colours, fonts, illustrations\u2026) and their usage.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">A <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Pattern Library<\/strong> will integrate functional components and their usage.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Most of the current Design Systems contains both, just as Shopify for example which as one tab \u201cVisuals\u201d for its Style Guide and one tab \u201cComponents\u201d for its Pattern Library.<img class=\"size-full\" title=\"\" alt=\"\" \/><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/11\/17qm4-J7Esv9arJC_E3KEGA.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/11\/17qm4-J7Esv9arJC_E3KEGA.png\" alt=\"Shopify \u2014 Polaris: Style guide &amp; Pattern library\" width=\"2340\" height=\"778\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"style=\"text-align: center;\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/polaris.shopify.com\">Shopify \u2014 Polaris: Style guide &amp; Pattern library<\/a><\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Why are we talking about that today?<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The desire for factorizing design and components is not new. But we can see that the trend has accelerated during the past years. More and more companies are based on digital supports and do not even have Graphic guidelines for print anymore!<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">For a long time, digital was treated like the \u201cside project\u201d: we used to make Graphic guidelines for printed elements and then, add some extra-guidelines for the digital\u2026 Who has never received 300 pages of graphic guidelines with only 6 pages about digital? I have\u2026 And as a Designer, that\u2019s not the kind of inputs I expect from a brand...<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"style=\"text-align: center;\"><img class=\"size-full\" title=\"\" alt=\"\" \/><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/11\/1gB99SGR1D6hpbwDFBpVy1A.gif\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/11\/1gB99SGR1D6hpbwDFBpVy1A.gif\" title=\"\" alt=\"\" \/><\/a>A designer who receives the Graphic guidelines of his client<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">We must now close the gap between print and digital around a shared language that will evolve with time. Design System is the direct descendant of the Graphic guidelines but it\u2019s more mature and more integrated into the teams' workflow. We also now have the tools which allow us to <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/atomic-design-system-of-components\/\">build and share systems of components<\/a>.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">What's Inside?<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The fundamental purpose of a Design System is to facilitate the work of the teams. So the first question we need to ask ourselves is not \u201cwhat should I put inside my Design System?\u201d but \u201cwho is going to use it and how?\u201d.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Once our target is defined and we have a first idea of what is already in place in the company (What is working or not? Which is the level of maturity of the teams about this subject? What are the existing tools?\u2026), it will be easier to know where to start.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">#1. Purpose and shared values<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-19050\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2020\/01\/0_4dDQva4jTVtHOnEj.png\" alt=\"\" width=\"320\" height=\"240\" \/>\u00a9<a class=\"link link--blue fontWeight-4\"href=\"https:\/\/dribbble.com\/jahit\">Jahit Janberk<\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Where are we going? Why? And How?<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Before starting anything, it\u2019s essential to align teams around a clear set of shared goals. It will help to build a vision and making sure everyone looks in the same direction. These goals will evolve with time and it\u2019s normal. We just have to make sure that changes are broadly communicated.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">As for the values, they are like great ideals that will guide our choices, according to the brand objectives. We need to make sure that what we\u2019re designing does not differ from these key values.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Beside these brand and product values, we could also define some team values that will bring each collaborator around a shared state of mind.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"style=\"text-align: center;\"><img class=\"size-full\" title=\"\" alt=\"\" \/><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/11\/1LvvCJUjJbJztcCxE1QYfbw.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/11\/1LvvCJUjJbJztcCxE1QYfbw.png\" alt=\"Posters the ASH team created for their core values\" width=\"800\" height=\"500\" \/><\/a>Posters the ASH team created for their core values<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">#2. Design Principles<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"style=\"text-align: center;\"><img class=\"size-full\" title=\"\" alt=\"\" \/><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/11\/1GdV5_Yq6xBr6RELbWcApiQ.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/11\/1GdV5_Yq6xBr6RELbWcApiQ.png\" alt=\"Design Principles: A collection of Design Principles and methods\" width=\"1120\" height=\"600\" \/><\/a><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/principles.design\/\">Design <\/a>Principles: A collection of Design Principles and methods<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">First thing to keep in mind: Design principles are so much more than just the visual aspect of a product\u2026<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Design principles are the guiding sentences that help the teams to reach the purpose of the product thanks to the design.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">They will help the teams to make meaningful Design decisions.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I will take the example of Medium. One of their Design principles is \u201cDirection over choice\u201d. Thanks to that principle, instead of designing a regular text editor with unlimited choices of colours and fonts, they opted for a simpler one. That allows the author to focus on the content of his article rather than on its visual aspect.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img class=\"size-full\" title=\"\" alt=\"\" \/><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/11\/1OndP9otWR3o5dlGu0TPEzA.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/11\/1OndP9otWR3o5dlGu0TPEzA.png\" title=\"\" alt=\"\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Design Principles must guide design choices<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">#3. Brand identity &amp; language<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"style=\"text-align: center;\"><img class=\"size-full\" title=\"\" alt=\"\" \/><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/11\/1jjmTamszwwAq46QgCTBtDg.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/11\/1jjmTamszwwAq46QgCTBtDg.png\" alt=\"Shopify brand identity\" width=\"962\" height=\"684\" \/><\/a>Shopify brand identity<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Identity should be defined in line with the strategy and the objectives of the brand. Alla Kholmatova speaks about the \u201cperceptual patterns\u201d that she lists as follows:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>Colours<\/li>\n<li>Fonts<\/li>\n<li>Spaces<\/li>\n<li>Shapes<\/li>\n<li>Icons<\/li>\n<li>Illustrations<\/li>\n<li>Photographs<\/li>\n<li>Animations<\/li>\n<li>Voice and tone<\/li>\n<li>Sounds<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">All of these forms the alphabet of the Brand.<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">It\u2019s a good starting point, but that\u2019s surely not enough to speak a language! We have to go further to use this alphabet to compose some words and then associate these words to obtain sentences that make sense. These brand elements will need some rules which will be, in a way, the grammar and the conjugation of the System.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">In our Design System, it\u2019s materialized by guidelines, <em>do\u2019s and don\u2019ts <\/em>and \u201cgood examples\u201d of use.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"style=\"text-align: center;\"><img class=\"size-full\" title=\"\" alt=\"\" \/><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/11\/1fc1L3xWnWykOStHFwuGU7w.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/11\/1fc1L3xWnWykOStHFwuGU7w.png\" alt=\"Examples of Identity Guidelines \u00a9Backelite\" width=\"1134\" height=\"1250\" \/><\/a>Examples of Identity Guidelines \u00a9<a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.backelite.com\/\">Backelite<\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">This will ensure the design teams use the \u201cright combinations\u201d of this language, those who make the brand so unique and recognizable.<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">#4. Components &amp; patterns<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img class=\"size-full\" title=\"\" alt=\"\" \/><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/11\/15kDA_gq5YBtyXKjtEvJlHQ.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/11\/15kDA_gq5YBtyXKjtEvJlHQ.png\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Components &amp; Patterns are at the heart of the System. All the previously mentioned elements will help us to create them and deliver a consistent experience.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The components<\/strong> are our LEGO blocs. They\u2019re used in Sketch by designers, and directly in the code by developers. Their functional behaviour must be specified.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">As for the <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">patterns, <\/strong>they are the building instructions that will allow us to use these components in a logical and consistent way across all the products.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">In the image below, we can clearly see that a component will be specified with technical and functional documentation, whereas a pattern will give recommendations about how to use it:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"style=\"text-align: center;\"><img class=\"size-full\" \/><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/11\/1tTjXTME68mGKnN7hW-bW1g.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/11\/1tTjXTME68mGKnN7hW-bW1g.png\" alt=\"Pattern vs component \u00a9Nathan Curtis\" width=\"2206\" height=\"1528\" \/><\/a><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/eightshapes-llc\/patterns-components-2ce778cbe4e8\">Pattern vs component <\/a>\u00a9Nathan Curtis<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">If you wonder which component you should develop first for your system, you can run a <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/@audreyhacq\/workshop-how-to-prioritize-your-design-system-components-744aa99f07d7\">component prioritization workshop<\/a>.<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Best practices<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Besides the documentation, that is often directly linked to the System, best practices will accompany teams in a larger and more transversal way.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The idea is to dig into the general best practices and extract only those who make sense, based on the product and the level of maturity of the teams.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Best practices will help the teams to form and develop their technicals skills.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-19051 size-full\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2020\/01\/0_xNlvl7QR994NVwAv.png\" alt=\"\u201cHow to\u201d in the BBC Design System\" width=\"1280\" height=\"897\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2020\/01\/0_xNlvl7QR994NVwAv.png 1280w, https:\/\/marvelapp.com\/wp-content\/uploads\/2020\/01\/0_xNlvl7QR994NVwAv-600x420.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2020\/01\/0_xNlvl7QR994NVwAv-768x538.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/>\u201cHow to\u201d in the BBC Design System<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">What kind of Design System?<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">We can almost say that there is one kind of Design System per team or product\u2026 To define our own, we have to ask ourselves the right questions:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>How many people will use this system?<\/li>\n<li>What is their profile and are they mature enough on the subject?<\/li>\n<li>How many products must we align? On how many platforms? How many different technologies (Angular, React, others\u2026)?<\/li>\n<li>What degree of consistency do we want across our products?<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">All these answers will help us to define the most appropriate kind of Design System.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">In her book, <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/craftui.com\/\">Alla Kholmatova<\/a> gives us some inspiration:<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Strict or loose?<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"style=\"text-align: center;\"><img class=\"size-full\" \/><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/11\/1Sw9sHYFk5CBwFEbIMvjXcw.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/11\/1Sw9sHYFk5CBwFEbIMvjXcw.png\" alt=\"On the left: Airbnb \/ On the right: Ted\" width=\"915\" height=\"279\" \/><\/a>On the left: Airbnb \/ On the right: Ted<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">A strict system <\/strong>will have a comprehensive and detailed documentation and will be fully synchronized between design and development. There will be a strict process for introducing a new pattern in the System. A strict system should be very broad in order to cover the majority of cases the teams may encounter.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">A loose system<\/strong> will leave more space for experimentation. The System is here to provide a framework for the teams while preserving some freedom. Designers and developers are free to use it or not, regarding their particular needs for their product.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">From my experience, we have to find the right balance between strictness and flexibility: a very strict system might repel designers and developers who will not want to use it. On the other side, can we still speak about Design System if this one is too loose?<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Modular or integrated?<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"style=\"text-align: center;\"><img class=\"size-full\" \/><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/11\/1cjnCJx9BKfkM0m0KPB22Sg.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/11\/1cjnCJx9BKfkM0m0KPB22Sg.png\" \/><\/a>Modular vs integrated systems \u00a9\u00a0<a class=\"link link--blue fontWeight-4\"href=\"http:\/\/craftui.com\/\">Alla Kholmatova<\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">A modular system<\/strong> is made of interchangeable and reusable parts. It suits well for projects that have to scale quickly and that have to adapt to multiple user needs. The negative part is that it\u2019s often more expensive to realize (because it can be difficult to make modules that can be independent while working well together). This kind of system will particularly fit large scale product as e-commerce, finance and governments websites. For a modular system, it will be very interesting to work with <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/blog\/atomic-design-system-of-components\/\">atomic design<\/a> in mind.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">An integrated system<\/strong> focus on one unique context. It\u2019s also composed of parts, but these parts will not be interchangeable. This kind of system suits products that have very few repeating parts and that need a strong and often changing Art Direction (portfolios, showcases, marketing campaigns\u2026).<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Centralized or distributed?<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The organization around <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/blog\/systems-design-design-systems\/\">Design Systems<\/a> is really important for its evolution and scalability. <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/eightshapes-llc\/team-models-for-scaling-a-design-system-2cf9d03be6a0\">In this article<\/a>, Nathan Curtis details the different types of models. Here are two of them:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"style=\"text-align: center;\"><img class=\"size-full\" \/><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/11\/1zOE1LV_WX0382jkI0nQjvg.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/11\/1zOE1LV_WX0382jkI0nQjvg.png\" \/><\/a>Which model for your Design System: centralized or distributed? \u00a9Nathan Curtis<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">In a <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">centralized model<\/strong>, one team is in charge of the System and makes it evolve. This team is here to facilitate the work of the other teams and has to be very close to them, to be sure that the System covers most of their needs.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">In a <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">distributed model<\/strong>, several people of several teams are in charge of the system. The adoption of the system is quicker because everyone feels involve but it also needs team leaders that will keep an overall vision of it.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">In each case, I advise allowing everyone to take part and make suggestions to improve the system, to create a sense of membership.<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Place your system on a scale<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The idea will be thus to position our system on these three scales, in order to define the kind of system that we want:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"style=\"text-align: center;\"><img class=\"size-full\" \/><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/11\/18fznO0Wdzfuynkxl39lviw.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/11\/18fznO0Wdzfuynkxl39lviw.png\" alt=\"Airbnb: a strict, modular and centralized system\" width=\"983\" height=\"413\" \/><\/a>Airbnb: a strict, modular and centralized system<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Some examples<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Without any originality, here are some of my favourites:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Material Design <\/strong>for its simplicity of navigation and the tools for designers &amp; developers<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"style=\"text-align: center;\"><img class=\"size-full\" \/><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/11\/1M2Y4J3epMfuBn-I0IcK-kQ.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/11\/1M2Y4J3epMfuBn-I0IcK-kQ.png\" alt=\"Material Design System\" width=\"1718\" height=\"951\" \/><\/a><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/material.io\/\">Material Design System<\/a><\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Atlassian<\/strong> for its exhaustiveness<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-19052 size-full\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2020\/01\/0_ObYjiaLjiu24xrqB.png\" alt=\"Atlassian Design System\" width=\"1280\" height=\"761\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2020\/01\/0_ObYjiaLjiu24xrqB.png 1280w, https:\/\/marvelapp.com\/wp-content\/uploads\/2020\/01\/0_ObYjiaLjiu24xrqB-600x357.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2020\/01\/0_ObYjiaLjiu24xrqB-768x457.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"style=\"text-align: center;\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/atlassian.design\/\">Atlassian Design System<\/a><\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Polaris<\/strong> from Shopify, because of its integration into the designer and developer\u2019s workflow<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"style=\"text-align: center;\"><img class=\"size-full\" \/><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/11\/1T4lKdtF2jNXb01zHpwOlUw.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/11\/1T4lKdtF2jNXb01zHpwOlUw.png\" alt=\"Polaris by Shopify\" width=\"1384\" height=\"887\" \/><\/a><a class=\"link link--blue fontWeight-4\"href=\"http:\/\/polaris.shopify.com\">Polaris by Shopify<\/a><\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">IBM<\/strong> for its wonderful work on the Design language<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"style=\"text-align: center;\"><img class=\"size-full\" \/><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/11\/1-S26zGWrqsToPLFRK3PEnw.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/11\/1-S26zGWrqsToPLFRK3PEnw.png\" \/><\/a><a class=\"link link--blue fontWeight-4\"href=\"http:\/\/ibm.com\/design\/language\/\">IBM Design Language<\/a><\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Last words<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">A Design System is a full product which will help the actors of a project to build other products.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img class=\"size-full\" \/><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/11\/1Awbi_affiJI5mjtfnx8LBg.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/11\/1Awbi_affiJI5mjtfnx8LBg.png\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">As for every good product, it will have its own backlog and will have to build itself in an iterative way, keeping the users (designers, developers, PO\u2026) at the heart of the approach.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"The more integrated the system will be with the designers and developers workflows, the more effective it will be.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">One really good example of this integration is the Sketch plugin of Polaris that displays the components and documentation of the system directly in Sketch, so the designers have everything they need during the conception phase:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"style=\"text-align: center;\"><img class=\"size-full\" \/><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/11\/1QktmLFj41IjJeUCu8eGHeA.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/11\/1QktmLFj41IjJeUCu8eGHeA.gif\" alt=\"Telescope: the sketch plugin, by Polaris\" width=\"818\" height=\"700\" \/><\/a>Telescope: the sketch plugin, by Polaris<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">And all of this is only a beginning!<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I\u2019m convinced that the future will provide us with a lot of great technical evolutions to facilitate our lives and to allow us to concentrate on the experience of our products and our users ;)<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>Sources<\/em><\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\" class=\"\">\n<li id=\"0caa\" class=\"ib ic fa ar id b ie if ig ih ii ij ik il im in io ke kf kg\" data-selectable-paragraph=\"\"><a class=\"link link--blue fontWeight-4\"class=\"bo gu iq ir is it\" href=\"http:\/\/designsystemsbook.com\/\" target=\"_blank\" rel=\"noopener nofollow noreferrer\">Alla Kholmatova<\/a>\u2019s book on Design Systems<\/li>\n<li id=\"c712\" class=\"ib ic fa ar id b ie kh ig ki ii kj ik kk im kl io ke kf kg\" data-selectable-paragraph=\"\">Every article of the fabulous\u00a0<a class=\"link link--blue fontWeight-4\"class=\"no gk gu\" href=\"https:\/\/medium.com\/u\/799c7c7840a?source=post_page-----54b109851969----------------------\" target=\"_blank\" rel=\"noopener noreferrer\">Nathan Curtis<\/a><\/li>\n<li id=\"0d65\" class=\"ib ic fa ar id b ie kh ig ki ii kj ik kk im kl io ke kf kg\" data-selectable-paragraph=\"\">Conferences and writings by\u00a0<a class=\"link link--blue fontWeight-4\"class=\"no gk gu\" href=\"https:\/\/medium.com\/u\/f5d1807b4e38?source=post_page-----54b109851969----------------------\" target=\"_blank\" rel=\"noopener noreferrer\">Jina Anne<\/a><\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">You can also find other examples of very good Design Systems on this repo:<\/p>\n<section class=\"pageWrap pageWrap--s marginBottom-l boxShadow-smoke boxShadow-smoke--xd--hover borderRadius-m transitionDuration-m transitionTimingFunction-ease\"><a class=\"link link--blue fontWeight-4\"class=\"link link--blue fontWeight-4\" href=\"https:\/\/designsystemsrepo.com\/design-systems\/\"><span class=\"display-block padding-xs paddingRight-m\"><span class=\"marginBottom-xs display-block c-slate lineHeight-l fontSize-l fontWeight-5\">Design Systems Repo<\/span><span class=\"c-slate lineHeight-l fontSize-l fontWeight-3 opacity-80\">A comprehensive and curated list of design systems, style guides and pattern libraries that you can use for inspiration.<\/span><\/span><\/a><\/section>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Thanks for reading!<br \/>\nThanks to\u00a0Soizic Le Colleter,\u00a0Valentin Chr\u00e9tien, and\u00a0Florent Hacq.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>\u2192 <\/em><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/@audreyhacq\/tout-savoir-sur-les-syst%C3%A8mes-de-design-1b6400c9a1b3\"><em>Pour la version en Fran\u00e7ais, c\u2019est par ici<\/em><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Originally posted on <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/uxdesign.cc\/everything-you-need-to-know-about-design-systems-54b109851969\">Audrey's Medium<\/a> page.<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Further reading:<\/h3>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/marvelapp.com\/blog\/atomic-design-system-of-components\/\" target=\"_blank\" rel=\"noopener noreferrer\">Atomic Design: How to Design Systems of Components<\/a><\/li>\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/marvelapp.com\/blog\/design-system-anyway\/\" target=\"_blank\" rel=\"noopener noreferrer\">What is a Design System Anyway?<\/a><\/li>\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/marvelapp.com\/blog\/how-design-systems-can-help-build-and-prototype-better-digital-products\/\" target=\"_blank\" rel=\"noopener noreferrer\">How Design Systems Can Help Build and Prototype Better Digital Products<\/a><\/li>\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/marvelapp.com\/blog\/why-design-systems-fail-how-to-make-them-work\/\" target=\"_blank\" rel=\"noopener noreferrer\">Why Design Systems Fail, and How to Make Them Work<\/a><\/li>\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/marvelapp.com\/blog\/style-guides-better-design-development\/\" target=\"_blank\" rel=\"noopener noreferrer\">Style Guides for Better Design and Development<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Design Systems has become a key part of my everyday work\u2026 And from the surrounding discussions, it is now the case for many people ;) After reading Alla Kholmatova\u2019s book last year, I was lucky to attend the first European conference on the subject in March. All of this strengthened my conviction that, in the future, every brand and every&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/marvelapp.com\/blog\/building-design-systems\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":302,"featured_media":19054,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[484],"tags":[],"class_list":["post-18446","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-systems"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"description\" content=\"The fundamental purpose of Design Systems is to facilitate the work of the teams. The first question we should ask is \u201cWho will use it and how?\u201d.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/marvelapp.com\/blog\/building-design-systems\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Everything you need to know about design systems | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"The fundamental purpose of Design Systems is to facilitate the work of the teams. The first question we should ask is \u201cWho will use it and how?\u201d.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marvelapp.com\/blog\/building-design-systems\/\" \/>\n<meta property=\"og:site_name\" content=\"Marvel Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/marvelapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-01-23T16:00:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-14T09:39:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2020\/01\/46.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"700\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:site\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"9 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/marvelapp\",\"https:\/\/www.instagram.com\/marvelapp\/\",\"https:\/\/www.linkedin.com\/company\/marvel-app\/\",\"https:\/\/twitter.com\/marvelapp\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/marvelapp.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/building-design-systems\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2020\/01\/46.png\",\"width\":1600,\"height\":700},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/marvelapp.com\/blog\/building-design-systems\/#webpage\",\"url\":\"https:\/\/marvelapp.com\/blog\/building-design-systems\/\",\"name\":\"Everything you need to know about design systems | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/building-design-systems\/#primaryimage\"},\"datePublished\":\"2020-01-23T16:00:01+00:00\",\"dateModified\":\"2020-12-14T09:39:24+00:00\",\"description\":\"The fundamental purpose of Design Systems is to facilitate the work of the teams. The first question we should ask is \\u201cWho will use it and how?\\u201d.\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/marvelapp.com\/blog\/building-design-systems\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/marvelapp.com\/blog\/building-design-systems\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/building-design-systems\/#webpage\"},\"author\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/2012b1cb1969f8c1bb1a1a1598983af5\"},\"headline\":\"Everything you need to know about design systems\",\"datePublished\":\"2020-01-23T16:00:01+00:00\",\"dateModified\":\"2020-12-14T09:39:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/building-design-systems\/#webpage\"},\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/building-design-systems\/#primaryimage\"},\"articleSection\":\"Design Systems\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/marvelapp.com\/blog\/building-design-systems\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/2012b1cb1969f8c1bb1a1a1598983af5\",\"name\":\"Audrey Hacq\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/558df6468df333205412d725a362af76ac051fbf812b430ff1b75b495e578d4d?s=96&d=mm&r=g\",\"caption\":\"Audrey Hacq\"},\"description\":\"Lead designer @Idean \/ write about design and process\/ On LinkedIn\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/18446","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/users\/302"}],"replies":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/comments?post=18446"}],"version-history":[{"count":0,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/18446\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media\/19054"}],"wp:attachment":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media?parent=18446"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/categories?post=18446"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/tags?post=18446"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}