\n2. Definition of tool<\/a>
\n3. Conduct a design audit<\/a>
\n4. Define basic design elements<\/a>
\n5. Define design components<\/a>
\n6. Define pages (screens, viewports, compositions)<\/a>
\n7. How to share your design system<\/a>
\n8. Recommended readings and examples<\/a><\/p>\n
<\/a>1. Design system creation process<\/span><\/h2>\nAccording to respondents to the latest survey on the <\/span>state of Design Systems in 2020<\/span><\/a>, building a design system can land you in debt for two main reasons:<\/span><\/p>\n\n- Lack of planning<\/span><\/li>\n
- Failure to understand the magnitude of a design system<\/span><\/li>\n<\/ul>\n
So one important thing you need to know is that a design system is not a file that you complete once and assume it\u2019s good forever. Creating a successful, long-lasting design system requires a great deal of effort and pre-planning. <\/span><\/p>\nThe first step is to clearly plan who will be in charge of the design system and decide on the process they will carry out. You can do this in different ways: in solitary, centralised, or federated teams. You will also need to determine the business goals\u2014how you will measure the success of the design system. This includes the cost and time required, the priorities, and the strategy to follow through on those priorities.<\/span><\/p>\nIn our case, as we only have two designers on the product team, we\u2019ve decided that only one person will be in charge and will dedicate a specific amount of time per week to maintaining the system. Also, when defining the OKRs for each quarter, we take into account that there must be a task related to the design system, either to update, add or remove certain elements. In this way, we ensure that a certain amount of time is always dedicated to keeping our design system in order. <\/span><\/p>\n![\"Design](\"https:\/\/www.testingtime.com\/app\/uploads\/2021\/07\/Design-System-Organisation.png\")
The three different approaches to organising a design system: solitary, centralised, or through federated teams <\/span>(source: Medium.com<\/a>).<\/p><\/div>\n<\/a>2. Definition of tool<\/span><\/h2>\nBefore starting to prepare anything, it is important to define where you do the designs and where you do the documentation. It is essential to document best practices for elements, components, views, and patterns. Documentation can also include your guiding principles and code snippets, the rationale behind design choices, dos and don\u2019ts, etc. <\/span><\/p>\nYou can choose to do everything in Figma (i.e., create components, modules, etc. and the documentation of the whole design system) or do this separately with the UI Kit on a design platform such as Figma<\/a>, Sketch<\/a>, or Adobe XD<\/a> while you do the design-system documentation on another platform.\u00a0 <\/span><\/p>\nSeveral platforms can handle documentation, and many of them are free. These are the four main types of documentation tools:<\/span><\/p>\n\n- Design tools \u2013 Use design tools to create any digital screen and manage all your digital assets. Also, use them to share designs (e.g., exporting images, online access and shared libraries). These tools, including Sketch, Figma, Adobe XD, and Framer X, aren’t designed for general documentation. Interestingly, <\/span>Framer X<\/span><\/a> mixes development and design by incorporating code.<\/span><\/b><\/li>\n
- Documentation tools \u2013 These tools host publicly available web pages with version control that anybody can use to retrieve information. Most of these tools are geared toward developers, with options for hosting and displaying code. Because there is no integration with design tools, designers have to develop (and update) images of each design and manually (re)place them on the website. Examples include <\/span>GitBook<\/span><\/a>, <\/span>VuePress<\/span><\/a>, <\/span>Fractal<\/span><\/a> and <\/span>Confluence<\/span><\/a>.<\/span><\/b><\/li>\n
- Design documentation tools \u2013 <\/span>Frontify<\/span><\/a>, <\/span>zeroheight<\/span><\/a>, <\/span>Nuclino<\/span><\/a>, <\/span>Lucid<\/span><\/a>, and <\/span>Bynder<\/span><\/a> are just a few examples of design documentation tools. Their layouts are better for displaying brand and design. Some of these tools even sync with your design tool automatically, so keeping your design system up to current with the latest modifications is a breeze. <\/span>
\n<\/span>In our case, we use zeroheight to explain use cases, combinations, values, etc. And then we have the UI kit in Figma. <\/span><\/b><\/li>\n- Custom platforms \u2013 Finally, you have the option of developing your own platform. This gives you more leeway in what you can do. However, it requires far more effort and technical knowledge and does not support synchronization with your design tool (unless you are a very skilled programmer willing to create your own custom plugin). Google’s Material platform<\/a> is an example of a custom-built platform.<\/span><\/b><\/li>\n<\/ol>\n
![\"Design](\"https:\/\/www.testingtime.com\/app\/uploads\/2021\/07\/Design-system-tools.png\")
Comparison of different design system tools (source: Hike One<\/a>).<\/p><\/div>\nAs you can see, each tool has its own set of features, strengths, and shortcomings; thus, finding the right tool depends entirely on your requirements. So, what other questions should you be asking yourself? Do you use Sketch, Adobe XD, or Figma to create your designs? Are you collaborating closely with developers? Do you wish to incorporate marketing into your strategy? Or do you want to use a static or dynamic design system?<\/span><\/p>\n<\/a>3. Conduct a design audit<\/span><\/h2>\nBrowse all the designs that have been made so far and take screenshots. Group them into different categories such as navigation, drop-downs, headers, etc. Then group those into subcategories, such as button states. Now look through what you already have and find patterns and inconsistencies. To sum up:<\/span><\/p>\n\n- Take screenshots of the components of your current product. Make sure you look at all the properties of your product like the help site, internal tools, different apps, etc.<\/span><\/li>\n
- Use Figma or Google Slides to organise your screenshots or consider printing out each screenshot and pinning them on foam-core boards.<\/span><\/li>\n
- Review each category to observe inconsistencies and note areas for improvement.<\/span><\/li>\n<\/ol>\n
<\/a>4. Define basic design elements<\/span><\/h2>\nYou must start your design system with the basics, which will be the tokens of your design system. Design elements are the basic building blocks of a user interface. The first step in creating a comprehensive design system is to define its base level elements. Try to get the lowest level of your component hierarchy. Later, you will use these basic elements to create your components.<\/span><\/p>\nDefine a list of basic elements that you think your design system should have. You can find numerous checklists on the internet. Don’t worry if you see elements you haven’t defined yet or that you didn’t even know you had to define. <\/span><\/p>\nEvery design system is unique. You don’t have to follow all the elements you see in the checklists. Just use them as inspiration for your complete design system.<\/span><\/p>\nIn our case, we used the checklist you can download from <\/span>this page<\/span><\/a>,<\/span> and we\u2019re still using all the elements on the list. <\/span><\/p>\nDepending on what you discover in your research, you decide what to tackle next. If you lack consistency in structure, colours, patterns, icons, etc., you can define your basic elements to ensure more consistency. Here are some examples: <\/span><\/p>\n4.1 Grid<\/span><\/h3>\nYou\u2019ll need to establish which layouts you use most and then apply changes to the ones you already have. For example, if the company is not used to working with grids, the elements may have been designed with proportions that will never look the same in development because you used the wrong grid. <\/span><\/p>\nSo you\u2019ll need to find out which viewports your users use most and base your designs on that information. Then, you will have to define what kind of grid you use depending on the viewport. This is something you can define with the developers. There is no one right solution.<\/span><\/p>\n![\"Design](\"https:\/\/www.testingtime.com\/app\/uploads\/2021\/07\/CSS-breakpoints.png\")
The 100% correct way to do CSS breakpoints (source: Udar Updates<\/a>).<\/p><\/div>\n4.2 Colours<\/span><\/h3>\nAnother basic element: the brand colours. It might seem silly, but many companies end up using different versions of the same colour simply by not setting it and not sharing it with the rest of the team. So it is crucial to establish the brand colours: the primary, the secondary, the neutral tones, the extra colours for illustrations, etc.<\/span><\/p>\n![\"TestingTime](\"https:\/\/www.testingtime.com\/app\/uploads\/2021\/07\/TestingTime-colours-1.png\")
Our brand colours (source: TestingTime\u2019s design system).<\/p><\/div>\n
4.3 Spaces<\/span><\/h3>\nAnother important basic element to define is the spaces. If we don\u2019t establish the spaces that we\u2019re going to use, our product will have an infinite number of different spaces with no logic between them. So, if we define the spaces, our designs will be more consistent.<\/span><\/p>\n![\"Design](\"https:\/\/www.testingtime.com\/app\/uploads\/2021\/07\/Design-System-Spacing.png\")
Our spacing rules (source: TestingTime\u2019s design system).<\/p><\/div>\n
<\/a>5. Define design components<\/span><\/h2>\nComponents are functional pieces of a user interface created from the basic tokens that come together in various ways to form a composition. You will also need to define the different states of the components, how they look when hovering, focused, active, etc. <\/span><\/p>\nCreating components is one of the most time-consuming tasks when creating the design system. In the beginning, it’s simple because you only have to replicate the components you already have and define when and how to use them. The complicated part is creating a new component and adding it to the design system. At this stage, you need to check whether or not the component you want to develop is promising. You always have to do this when you need to add a new component, so don’t be discouraged. It takes time and a lot of patience to improve the usability of a product!<\/span><\/p>\nHowever, once you have the new component, you simply add it to your design system and define when and how to use it. The better you can explain the component, the fewer questions you have to solve later. So if you have animations that show the operation, it\u2019s even better. In the next phase, the design is aligned internally and passed to the development team. Don’t forget, your design system is itself a product, and you need to communicate whenever you update it or add anything new.<\/span><\/p>\n![\"TestingTime](\"https:\/\/www.testingtime.com\/app\/uploads\/2021\/07\/TestingTime-Design-System-Buttons.png\")
How we provide the different button combinations in Figma (source: TestingTime\u2019s design system).<\/p><\/div>\n
It may seem a bit messy, but the important thing is that everything is well connected in the UI kit and that\u2014when it comes to design\u2014the designers can clearly see what combinations they have. Then, apart from having it in the UI kit in Figma, we also have zeroheight, where we explain the different use cases, right and wrong combinations, etc.<\/span><\/p>\n<\/a>6. Define pages (screens, viewports, compositions)<\/span><\/h2>\nOnce you\u2019ve defined the components of your product, you can combine them to create pages. This process shouldn’t take too long since once you have all the components designed. What can take more time is defining when to use each type of page, explaining the rationale of each page, whether or not you did research, the results of the research, etc.<\/span><\/p>\nIn our case, we did the redesign of our website, for which we did a whole research process, and it was documented so that in the future, we\u2019ll still be able to understand why we made the decisions we did. <\/span><\/p>\nOnce you\u2019ve done the research, the next step is to pass it to our UI kit as different components and their variants so that in the future they can easily be reused as single elements to create new components or edited in a future design.<\/span><\/p>\n![\"TestingTime](\"https:\/\/www.testingtime.com\/app\/uploads\/2021\/07\/TestingTime-WordPress-Modules.png\")
The designs of our WordPress modules for the website (source: TestingTime\u2019s design system).<\/p><\/div>\n
<\/a>7. How to share your design system<\/span><\/h2>\nEveryone in the company should have access to the design system. And the best way to ensure that everyone is up to date with the latest version is to have a single source of truth on a website, for example. I can assure you that using a PDF or a Google Doc won\u2019t work: everyone will lose it, use the wrong version or simply not use it at all.<\/span><\/p>\nA small company could use an internal wiki site if maintaining an external site involves more work. It is also essential that the product team doesn\u2019t depend on the developers to keep the design system up to date. Inevitably, people forget to use it or can\u2019t find it. That\u2019s ok\u2014just keep reminding them until it becomes a habit. Whenever you have updated or added a new token, component or page, share it with your teammates and remind them where they can find it and, if necessary, organise a workshop to explain, among other things, the structure and the content you can find. <\/span><\/p>\n<\/a>8. Recommended readings and examples<\/span><\/h2>\nI have put together some interesting readings that can help you build a design system. If you want to be up to date with the state of design systems in the sector, I recommend you <\/span>read this study<\/span><\/a>.<\/span><\/p>\nAn excellent example of a design system is Airbnb, so if you want to know more about how they implemented their system, I <\/span>recommend this article<\/span><\/a>.<\/span><\/p>\nOne book that has most helped to understand what a design system is is Atomic Design. So <\/span>reading Atomic Design<\/span><\/a> is crucial to a better understanding of design-system ecosystems.<\/span><\/p>\nTo find out more about the history of the design system, I <\/span>recommend this article<\/span><\/a>.<\/span><\/p>\nExplore the exemplary design systems of the following organisations: <\/span><\/p>\n\n- Google: <\/span>material.io\/design<\/span><\/a><\/li>\n
- Salesforce: <\/span>lightningdesignsystem.com<\/span><\/a><\/li>\n
- IBM: <\/span>ibm.com\/design\/language<\/span><\/a><\/li>\n
- Shopify: <\/span>polaris.shopify.com<\/span><\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
Table of contents 1. Design system creation process 2. Definition of tool 3. Conduct a design audit 4. Define basic design elements 5. Define design components 6. Define pages (screens, viewports, compositions) 7. How to share your design system 8. Recommended readings and examples 1. Design system creation process According to respondents to the latest […]<\/p>\n","protected":false},"author":59,"featured_media":28300,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"footnotes":""},"categories":[2531,5096],"tags":[],"class_list":["post-28174","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-case-study","category-design"],"acf":[],"yoast_head":"\n
Building a design system in Figma - TestingTime<\/title>\n<meta name=\"description\" content=\"Creating a design system on a new platform from scratch can be challenging, but with a good process you will avoid chaos. Read this for help.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.testingtime.com\/en\/blog\/design-system-figma\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building a design system in Figma\" \/>\n<meta property=\"og:description\" content=\"Creating a design system on a new platform from scratch can be challenging, but with a good process you will avoid chaos. Read this for help.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.testingtime.com\/en\/blog\/design-system-figma\/\" \/>\n<meta property=\"og:site_name\" content=\"TestingTime\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/testingtime\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-26T07:25:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-12-21T09:43:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.testingtime.com\/app\/uploads\/2021\/07\/TestingTime-Design-System-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2914\" \/>\n\t<meta property=\"og:image:height\" content=\"1966\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Beatriz G\u00f3mez P\u00e9rez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@testingtime\" \/>\n<meta name=\"twitter:site\" content=\"@testingtime\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Beatriz G\u00f3mez P\u00e9rez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.testingtime.com\/en\/blog\/design-system-figma\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.testingtime.com\/en\/blog\/design-system-figma\/\"},\"author\":{\"name\":\"Beatriz G\u00f3mez P\u00e9rez\",\"@id\":\"https:\/\/www.testingtime.com\/en\/#\/schema\/person\/e906f91aa704cca46130d9dcefa5b7f0\"},\"headline\":\"Building a design system in Figma\",\"datePublished\":\"2021-07-26T07:25:16+00:00\",\"dateModified\":\"2021-12-21T09:43:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.testingtime.com\/en\/blog\/design-system-figma\/\"},\"wordCount\":2198,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.testingtime.com\/en\/#organization\"},\"articleSection\":[\"Case study\",\"Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.testingtime.com\/en\/blog\/design-system-figma\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.testingtime.com\/en\/blog\/design-system-figma\/\",\"url\":\"https:\/\/www.testingtime.com\/en\/blog\/design-system-figma\/\",\"name\":\"Building a design system in Figma - TestingTime\",\"isPartOf\":{\"@id\":\"https:\/\/www.testingtime.com\/en\/#website\"},\"datePublished\":\"2021-07-26T07:25:16+00:00\",\"dateModified\":\"2021-12-21T09:43:27+00:00\",\"description\":\"Creating a design system on a new platform from scratch can be challenging, but with a good process you will avoid chaos. Read this for help.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.testingtime.com\/en\/blog\/design-system-figma\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.testingtime.com\/en\/blog\/design-system-figma\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.testingtime.com\/en\/blog\/design-system-figma\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"TestingTime\",\"item\":\"https:\/\/www.testingtime.com\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Building a design system in Figma\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.testingtime.com\/en\/#website\",\"url\":\"https:\/\/www.testingtime.com\/en\/\",\"name\":\"TestingTime\",\"description\":\"Wir rekrutieren Testpersonen\",\"publisher\":{\"@id\":\"https:\/\/www.testingtime.com\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.testingtime.com\/en\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.testingtime.com\/en\/#organization\",\"name\":\"TestingTime\",\"url\":\"https:\/\/www.testingtime.com\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.testingtime.com\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.testingtime.com\/app\/uploads\/2017\/04\/logo.svg\",\"contentUrl\":\"https:\/\/www.testingtime.com\/app\/uploads\/2017\/04\/logo.svg\",\"width\":1,\"height\":1,\"caption\":\"TestingTime\"},\"image\":{\"@id\":\"https:\/\/www.testingtime.com\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/testingtime\",\"https:\/\/twitter.com\/testingtime\",\"https:\/\/www.instagram.com\/testingtime\/\",\"https:\/\/www.linkedin.com\/company-beta\/9231506\/\",\"https:\/\/www.youtube.com\/channel\/UCpnMUgCz5FiiCUXU-U8ub1w\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.testingtime.com\/en\/#\/schema\/person\/e906f91aa704cca46130d9dcefa5b7f0\",\"name\":\"Beatriz G\u00f3mez P\u00e9rez\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.testingtime.com\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.testingtime.com\/app\/uploads\/2020\/02\/TT_Team_Beatriz_transp-150x150.png\",\"contentUrl\":\"https:\/\/www.testingtime.com\/app\/uploads\/2020\/02\/TT_Team_Beatriz_transp-150x150.png\",\"caption\":\"Beatriz G\u00f3mez P\u00e9rez\"},\"url\":\"https:\/\/www.testingtime.com\/en\/blog\/author\/beatriz\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Building a design system in Figma - TestingTime","description":"Creating a design system on a new platform from scratch can be challenging, but with a good process you will avoid chaos. Read this for help.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.testingtime.com\/en\/blog\/design-system-figma\/","og_locale":"en_US","og_type":"article","og_title":"Building a design system in Figma","og_description":"Creating a design system on a new platform from scratch can be challenging, but with a good process you will avoid chaos. Read this for help.","og_url":"https:\/\/www.testingtime.com\/en\/blog\/design-system-figma\/","og_site_name":"TestingTime","article_publisher":"https:\/\/www.facebook.com\/testingtime","article_published_time":"2021-07-26T07:25:16+00:00","article_modified_time":"2021-12-21T09:43:27+00:00","og_image":[{"width":2914,"height":1966,"url":"https:\/\/www.testingtime.com\/app\/uploads\/2021\/07\/TestingTime-Design-System-1.png","type":"image\/png"}],"author":"Beatriz G\u00f3mez P\u00e9rez","twitter_card":"summary_large_image","twitter_creator":"@testingtime","twitter_site":"@testingtime","twitter_misc":{"Written by":"Beatriz G\u00f3mez P\u00e9rez","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.testingtime.com\/en\/blog\/design-system-figma\/#article","isPartOf":{"@id":"https:\/\/www.testingtime.com\/en\/blog\/design-system-figma\/"},"author":{"name":"Beatriz G\u00f3mez P\u00e9rez","@id":"https:\/\/www.testingtime.com\/en\/#\/schema\/person\/e906f91aa704cca46130d9dcefa5b7f0"},"headline":"Building a design system in Figma","datePublished":"2021-07-26T07:25:16+00:00","dateModified":"2021-12-21T09:43:27+00:00","mainEntityOfPage":{"@id":"https:\/\/www.testingtime.com\/en\/blog\/design-system-figma\/"},"wordCount":2198,"commentCount":0,"publisher":{"@id":"https:\/\/www.testingtime.com\/en\/#organization"},"articleSection":["Case study","Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.testingtime.com\/en\/blog\/design-system-figma\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.testingtime.com\/en\/blog\/design-system-figma\/","url":"https:\/\/www.testingtime.com\/en\/blog\/design-system-figma\/","name":"Building a design system in Figma - TestingTime","isPartOf":{"@id":"https:\/\/www.testingtime.com\/en\/#website"},"datePublished":"2021-07-26T07:25:16+00:00","dateModified":"2021-12-21T09:43:27+00:00","description":"Creating a design system on a new platform from scratch can be challenging, but with a good process you will avoid chaos. Read this for help.","breadcrumb":{"@id":"https:\/\/www.testingtime.com\/en\/blog\/design-system-figma\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.testingtime.com\/en\/blog\/design-system-figma\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.testingtime.com\/en\/blog\/design-system-figma\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"TestingTime","item":"https:\/\/www.testingtime.com\/en\/"},{"@type":"ListItem","position":2,"name":"Building a design system in Figma"}]},{"@type":"WebSite","@id":"https:\/\/www.testingtime.com\/en\/#website","url":"https:\/\/www.testingtime.com\/en\/","name":"TestingTime","description":"Wir rekrutieren Testpersonen","publisher":{"@id":"https:\/\/www.testingtime.com\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.testingtime.com\/en\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.testingtime.com\/en\/#organization","name":"TestingTime","url":"https:\/\/www.testingtime.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.testingtime.com\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.testingtime.com\/app\/uploads\/2017\/04\/logo.svg","contentUrl":"https:\/\/www.testingtime.com\/app\/uploads\/2017\/04\/logo.svg","width":1,"height":1,"caption":"TestingTime"},"image":{"@id":"https:\/\/www.testingtime.com\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/testingtime","https:\/\/twitter.com\/testingtime","https:\/\/www.instagram.com\/testingtime\/","https:\/\/www.linkedin.com\/company-beta\/9231506\/","https:\/\/www.youtube.com\/channel\/UCpnMUgCz5FiiCUXU-U8ub1w"]},{"@type":"Person","@id":"https:\/\/www.testingtime.com\/en\/#\/schema\/person\/e906f91aa704cca46130d9dcefa5b7f0","name":"Beatriz G\u00f3mez P\u00e9rez","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.testingtime.com\/en\/#\/schema\/person\/image\/","url":"https:\/\/www.testingtime.com\/app\/uploads\/2020\/02\/TT_Team_Beatriz_transp-150x150.png","contentUrl":"https:\/\/www.testingtime.com\/app\/uploads\/2020\/02\/TT_Team_Beatriz_transp-150x150.png","caption":"Beatriz G\u00f3mez P\u00e9rez"},"url":"https:\/\/www.testingtime.com\/en\/blog\/author\/beatriz\/"}]}},"_links":{"self":[{"href":"https:\/\/www.testingtime.com\/en\/wp-json\/wp\/v2\/posts\/28174","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.testingtime.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.testingtime.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.testingtime.com\/en\/wp-json\/wp\/v2\/users\/59"}],"replies":[{"embeddable":true,"href":"https:\/\/www.testingtime.com\/en\/wp-json\/wp\/v2\/comments?post=28174"}],"version-history":[{"count":9,"href":"https:\/\/www.testingtime.com\/en\/wp-json\/wp\/v2\/posts\/28174\/revisions"}],"predecessor-version":[{"id":28622,"href":"https:\/\/www.testingtime.com\/en\/wp-json\/wp\/v2\/posts\/28174\/revisions\/28622"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.testingtime.com\/en\/wp-json\/wp\/v2\/media\/28300"}],"wp:attachment":[{"href":"https:\/\/www.testingtime.com\/en\/wp-json\/wp\/v2\/media?parent=28174"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.testingtime.com\/en\/wp-json\/wp\/v2\/categories?post=28174"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.testingtime.com\/en\/wp-json\/wp\/v2\/tags?post=28174"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- \n
- Lack of planning<\/span><\/li>\n
- Failure to understand the magnitude of a design system<\/span><\/li>\n<\/ul>\n
So one important thing you need to know is that a design system is not a file that you complete once and assume it\u2019s good forever. Creating a successful, long-lasting design system requires a great deal of effort and pre-planning. <\/span><\/p>\n
The first step is to clearly plan who will be in charge of the design system and decide on the process they will carry out. You can do this in different ways: in solitary, centralised, or federated teams. You will also need to determine the business goals\u2014how you will measure the success of the design system. This includes the cost and time required, the priorities, and the strategy to follow through on those priorities.<\/span><\/p>\n
In our case, as we only have two designers on the product team, we\u2019ve decided that only one person will be in charge and will dedicate a specific amount of time per week to maintaining the system. Also, when defining the OKRs for each quarter, we take into account that there must be a task related to the design system, either to update, add or remove certain elements. In this way, we ensure that a certain amount of time is always dedicated to keeping our design system in order. <\/span><\/p>\n
The three different approaches to organising a design system: solitary, centralised, or through federated teams <\/span>(source: Medium.com<\/a>).<\/p><\/div>\n
<\/a>2. Definition of tool<\/span><\/h2>\n
Before starting to prepare anything, it is important to define where you do the designs and where you do the documentation. It is essential to document best practices for elements, components, views, and patterns. Documentation can also include your guiding principles and code snippets, the rationale behind design choices, dos and don\u2019ts, etc. <\/span><\/p>\n
You can choose to do everything in Figma (i.e., create components, modules, etc. and the documentation of the whole design system) or do this separately with the UI Kit on a design platform such as Figma<\/a>, Sketch<\/a>, or Adobe XD<\/a> while you do the design-system documentation on another platform.\u00a0 <\/span><\/p>\n
Several platforms can handle documentation, and many of them are free. These are the four main types of documentation tools:<\/span><\/p>\n
- \n
- Design tools \u2013 Use design tools to create any digital screen and manage all your digital assets. Also, use them to share designs (e.g., exporting images, online access and shared libraries). These tools, including Sketch, Figma, Adobe XD, and Framer X, aren’t designed for general documentation. Interestingly, <\/span>Framer X<\/span><\/a> mixes development and design by incorporating code.<\/span><\/b><\/li>\n
- Documentation tools \u2013 These tools host publicly available web pages with version control that anybody can use to retrieve information. Most of these tools are geared toward developers, with options for hosting and displaying code. Because there is no integration with design tools, designers have to develop (and update) images of each design and manually (re)place them on the website. Examples include <\/span>GitBook<\/span><\/a>, <\/span>VuePress<\/span><\/a>, <\/span>Fractal<\/span><\/a> and <\/span>Confluence<\/span><\/a>.<\/span><\/b><\/li>\n
- Design documentation tools \u2013 <\/span>Frontify<\/span><\/a>, <\/span>zeroheight<\/span><\/a>, <\/span>Nuclino<\/span><\/a>, <\/span>Lucid<\/span><\/a>, and <\/span>Bynder<\/span><\/a> are just a few examples of design documentation tools. Their layouts are better for displaying brand and design. Some of these tools even sync with your design tool automatically, so keeping your design system up to current with the latest modifications is a breeze. <\/span>
\n<\/span>In our case, we use zeroheight to explain use cases, combinations, values, etc. And then we have the UI kit in Figma. <\/span><\/b><\/li>\n- Custom platforms \u2013 Finally, you have the option of developing your own platform. This gives you more leeway in what you can do. However, it requires far more effort and technical knowledge and does not support synchronization with your design tool (unless you are a very skilled programmer willing to create your own custom plugin). Google’s Material platform<\/a> is an example of a custom-built platform.<\/span><\/b><\/li>\n<\/ol>\n
Comparison of different design system tools (source: Hike One<\/a>).<\/p><\/div>\n
As you can see, each tool has its own set of features, strengths, and shortcomings; thus, finding the right tool depends entirely on your requirements. So, what other questions should you be asking yourself? Do you use Sketch, Adobe XD, or Figma to create your designs? Are you collaborating closely with developers? Do you wish to incorporate marketing into your strategy? Or do you want to use a static or dynamic design system?<\/span><\/p>\n
<\/a>3. Conduct a design audit<\/span><\/h2>\n
Browse all the designs that have been made so far and take screenshots. Group them into different categories such as navigation, drop-downs, headers, etc. Then group those into subcategories, such as button states. Now look through what you already have and find patterns and inconsistencies. To sum up:<\/span><\/p>\n
- \n
- Take screenshots of the components of your current product. Make sure you look at all the properties of your product like the help site, internal tools, different apps, etc.<\/span><\/li>\n
- Use Figma or Google Slides to organise your screenshots or consider printing out each screenshot and pinning them on foam-core boards.<\/span><\/li>\n
- Review each category to observe inconsistencies and note areas for improvement.<\/span><\/li>\n<\/ol>\n
<\/a>4. Define basic design elements<\/span><\/h2>\n
You must start your design system with the basics, which will be the tokens of your design system. Design elements are the basic building blocks of a user interface. The first step in creating a comprehensive design system is to define its base level elements. Try to get the lowest level of your component hierarchy. Later, you will use these basic elements to create your components.<\/span><\/p>\n
Define a list of basic elements that you think your design system should have. You can find numerous checklists on the internet. Don’t worry if you see elements you haven’t defined yet or that you didn’t even know you had to define. <\/span><\/p>\n
Every design system is unique. You don’t have to follow all the elements you see in the checklists. Just use them as inspiration for your complete design system.<\/span><\/p>\n
In our case, we used the checklist you can download from <\/span>this page<\/span><\/a>,<\/span> and we\u2019re still using all the elements on the list. <\/span><\/p>\n
Depending on what you discover in your research, you decide what to tackle next. If you lack consistency in structure, colours, patterns, icons, etc., you can define your basic elements to ensure more consistency. Here are some examples: <\/span><\/p>\n
4.1 Grid<\/span><\/h3>\n
You\u2019ll need to establish which layouts you use most and then apply changes to the ones you already have. For example, if the company is not used to working with grids, the elements may have been designed with proportions that will never look the same in development because you used the wrong grid. <\/span><\/p>\n
So you\u2019ll need to find out which viewports your users use most and base your designs on that information. Then, you will have to define what kind of grid you use depending on the viewport. This is something you can define with the developers. There is no one right solution.<\/span><\/p>\n
The 100% correct way to do CSS breakpoints (source: Udar Updates<\/a>).<\/p><\/div>\n
4.2 Colours<\/span><\/h3>\n
Another basic element: the brand colours. It might seem silly, but many companies end up using different versions of the same colour simply by not setting it and not sharing it with the rest of the team. So it is crucial to establish the brand colours: the primary, the secondary, the neutral tones, the extra colours for illustrations, etc.<\/span><\/p>\n
Our brand colours (source: TestingTime\u2019s design system).<\/p><\/div>\n
4.3 Spaces<\/span><\/h3>\n
Another important basic element to define is the spaces. If we don\u2019t establish the spaces that we\u2019re going to use, our product will have an infinite number of different spaces with no logic between them. So, if we define the spaces, our designs will be more consistent.<\/span><\/p>\n
Our spacing rules (source: TestingTime\u2019s design system).<\/p><\/div>\n
<\/a>5. Define design components<\/span><\/h2>\n
Components are functional pieces of a user interface created from the basic tokens that come together in various ways to form a composition. You will also need to define the different states of the components, how they look when hovering, focused, active, etc. <\/span><\/p>\n
Creating components is one of the most time-consuming tasks when creating the design system. In the beginning, it’s simple because you only have to replicate the components you already have and define when and how to use them. The complicated part is creating a new component and adding it to the design system. At this stage, you need to check whether or not the component you want to develop is promising. You always have to do this when you need to add a new component, so don’t be discouraged. It takes time and a lot of patience to improve the usability of a product!<\/span><\/p>\n
However, once you have the new component, you simply add it to your design system and define when and how to use it. The better you can explain the component, the fewer questions you have to solve later. So if you have animations that show the operation, it\u2019s even better. In the next phase, the design is aligned internally and passed to the development team. Don’t forget, your design system is itself a product, and you need to communicate whenever you update it or add anything new.<\/span><\/p>\n
How we provide the different button combinations in Figma (source: TestingTime\u2019s design system).<\/p><\/div>\n
It may seem a bit messy, but the important thing is that everything is well connected in the UI kit and that\u2014when it comes to design\u2014the designers can clearly see what combinations they have. Then, apart from having it in the UI kit in Figma, we also have zeroheight, where we explain the different use cases, right and wrong combinations, etc.<\/span><\/p>\n
<\/a>6. Define pages (screens, viewports, compositions)<\/span><\/h2>\n
Once you\u2019ve defined the components of your product, you can combine them to create pages. This process shouldn’t take too long since once you have all the components designed. What can take more time is defining when to use each type of page, explaining the rationale of each page, whether or not you did research, the results of the research, etc.<\/span><\/p>\n
In our case, we did the redesign of our website, for which we did a whole research process, and it was documented so that in the future, we\u2019ll still be able to understand why we made the decisions we did. <\/span><\/p>\n
Once you\u2019ve done the research, the next step is to pass it to our UI kit as different components and their variants so that in the future they can easily be reused as single elements to create new components or edited in a future design.<\/span><\/p>\n
The designs of our WordPress modules for the website (source: TestingTime\u2019s design system).<\/p><\/div>\n
<\/a>7. How to share your design system<\/span><\/h2>\n
Everyone in the company should have access to the design system. And the best way to ensure that everyone is up to date with the latest version is to have a single source of truth on a website, for example. I can assure you that using a PDF or a Google Doc won\u2019t work: everyone will lose it, use the wrong version or simply not use it at all.<\/span><\/p>\n
A small company could use an internal wiki site if maintaining an external site involves more work. It is also essential that the product team doesn\u2019t depend on the developers to keep the design system up to date. Inevitably, people forget to use it or can\u2019t find it. That\u2019s ok\u2014just keep reminding them until it becomes a habit. Whenever you have updated or added a new token, component or page, share it with your teammates and remind them where they can find it and, if necessary, organise a workshop to explain, among other things, the structure and the content you can find. <\/span><\/p>\n
<\/a>8. Recommended readings and examples<\/span><\/h2>\n
I have put together some interesting readings that can help you build a design system. If you want to be up to date with the state of design systems in the sector, I recommend you <\/span>read this study<\/span><\/a>.<\/span><\/p>\n
An excellent example of a design system is Airbnb, so if you want to know more about how they implemented their system, I <\/span>recommend this article<\/span><\/a>.<\/span><\/p>\n
One book that has most helped to understand what a design system is is Atomic Design. So <\/span>reading Atomic Design<\/span><\/a> is crucial to a better understanding of design-system ecosystems.<\/span><\/p>\n
To find out more about the history of the design system, I <\/span>recommend this article<\/span><\/a>.<\/span><\/p>\n
Explore the exemplary design systems of the following organisations: <\/span><\/p>\n
- \n
- Google: <\/span>material.io\/design<\/span><\/a><\/li>\n
- Salesforce: <\/span>lightningdesignsystem.com<\/span><\/a><\/li>\n
- IBM: <\/span>ibm.com\/design\/language<\/span><\/a><\/li>\n
- Shopify: <\/span>polaris.shopify.com<\/span><\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
Table of contents 1. Design system creation process 2. Definition of tool 3. Conduct a design audit 4. Define basic design elements 5. Define design components 6. Define pages (screens, viewports, compositions) 7. How to share your design system 8. Recommended readings and examples 1. Design system creation process According to respondents to the latest […]<\/p>\n","protected":false},"author":59,"featured_media":28300,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"footnotes":""},"categories":[2531,5096],"tags":[],"class_list":["post-28174","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-case-study","category-design"],"acf":[],"yoast_head":"\n
Building a design system in Figma - TestingTime<\/title>\n<meta name=\"description\" content=\"Creating a design system on a new platform from scratch can be challenging, but with a good process you will avoid chaos. Read this for help.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.testingtime.com\/en\/blog\/design-system-figma\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building a design system in Figma\" \/>\n<meta property=\"og:description\" content=\"Creating a design system on a new platform from scratch can be challenging, but with a good process you will avoid chaos. Read this for help.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.testingtime.com\/en\/blog\/design-system-figma\/\" \/>\n<meta property=\"og:site_name\" content=\"TestingTime\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/testingtime\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-26T07:25:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-12-21T09:43:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.testingtime.com\/app\/uploads\/2021\/07\/TestingTime-Design-System-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2914\" \/>\n\t<meta property=\"og:image:height\" content=\"1966\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Beatriz G\u00f3mez P\u00e9rez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@testingtime\" \/>\n<meta name=\"twitter:site\" content=\"@testingtime\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Beatriz G\u00f3mez P\u00e9rez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.testingtime.com\/en\/blog\/design-system-figma\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.testingtime.com\/en\/blog\/design-system-figma\/\"},\"author\":{\"name\":\"Beatriz G\u00f3mez P\u00e9rez\",\"@id\":\"https:\/\/www.testingtime.com\/en\/#\/schema\/person\/e906f91aa704cca46130d9dcefa5b7f0\"},\"headline\":\"Building a design system in Figma\",\"datePublished\":\"2021-07-26T07:25:16+00:00\",\"dateModified\":\"2021-12-21T09:43:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.testingtime.com\/en\/blog\/design-system-figma\/\"},\"wordCount\":2198,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.testingtime.com\/en\/#organization\"},\"articleSection\":[\"Case study\",\"Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.testingtime.com\/en\/blog\/design-system-figma\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.testingtime.com\/en\/blog\/design-system-figma\/\",\"url\":\"https:\/\/www.testingtime.com\/en\/blog\/design-system-figma\/\",\"name\":\"Building a design system in Figma - TestingTime\",\"isPartOf\":{\"@id\":\"https:\/\/www.testingtime.com\/en\/#website\"},\"datePublished\":\"2021-07-26T07:25:16+00:00\",\"dateModified\":\"2021-12-21T09:43:27+00:00\",\"description\":\"Creating a design system on a new platform from scratch can be challenging, but with a good process you will avoid chaos. Read this for help.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.testingtime.com\/en\/blog\/design-system-figma\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.testingtime.com\/en\/blog\/design-system-figma\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.testingtime.com\/en\/blog\/design-system-figma\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"TestingTime\",\"item\":\"https:\/\/www.testingtime.com\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Building a design system in Figma\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.testingtime.com\/en\/#website\",\"url\":\"https:\/\/www.testingtime.com\/en\/\",\"name\":\"TestingTime\",\"description\":\"Wir rekrutieren Testpersonen\",\"publisher\":{\"@id\":\"https:\/\/www.testingtime.com\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.testingtime.com\/en\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.testingtime.com\/en\/#organization\",\"name\":\"TestingTime\",\"url\":\"https:\/\/www.testingtime.com\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.testingtime.com\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.testingtime.com\/app\/uploads\/2017\/04\/logo.svg\",\"contentUrl\":\"https:\/\/www.testingtime.com\/app\/uploads\/2017\/04\/logo.svg\",\"width\":1,\"height\":1,\"caption\":\"TestingTime\"},\"image\":{\"@id\":\"https:\/\/www.testingtime.com\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/testingtime\",\"https:\/\/twitter.com\/testingtime\",\"https:\/\/www.instagram.com\/testingtime\/\",\"https:\/\/www.linkedin.com\/company-beta\/9231506\/\",\"https:\/\/www.youtube.com\/channel\/UCpnMUgCz5FiiCUXU-U8ub1w\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.testingtime.com\/en\/#\/schema\/person\/e906f91aa704cca46130d9dcefa5b7f0\",\"name\":\"Beatriz G\u00f3mez P\u00e9rez\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.testingtime.com\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.testingtime.com\/app\/uploads\/2020\/02\/TT_Team_Beatriz_transp-150x150.png\",\"contentUrl\":\"https:\/\/www.testingtime.com\/app\/uploads\/2020\/02\/TT_Team_Beatriz_transp-150x150.png\",\"caption\":\"Beatriz G\u00f3mez P\u00e9rez\"},\"url\":\"https:\/\/www.testingtime.com\/en\/blog\/author\/beatriz\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Building a design system in Figma - TestingTime","description":"Creating a design system on a new platform from scratch can be challenging, but with a good process you will avoid chaos. Read this for help.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.testingtime.com\/en\/blog\/design-system-figma\/","og_locale":"en_US","og_type":"article","og_title":"Building a design system in Figma","og_description":"Creating a design system on a new platform from scratch can be challenging, but with a good process you will avoid chaos. Read this for help.","og_url":"https:\/\/www.testingtime.com\/en\/blog\/design-system-figma\/","og_site_name":"TestingTime","article_publisher":"https:\/\/www.facebook.com\/testingtime","article_published_time":"2021-07-26T07:25:16+00:00","article_modified_time":"2021-12-21T09:43:27+00:00","og_image":[{"width":2914,"height":1966,"url":"https:\/\/www.testingtime.com\/app\/uploads\/2021\/07\/TestingTime-Design-System-1.png","type":"image\/png"}],"author":"Beatriz G\u00f3mez P\u00e9rez","twitter_card":"summary_large_image","twitter_creator":"@testingtime","twitter_site":"@testingtime","twitter_misc":{"Written by":"Beatriz G\u00f3mez P\u00e9rez","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.testingtime.com\/en\/blog\/design-system-figma\/#article","isPartOf":{"@id":"https:\/\/www.testingtime.com\/en\/blog\/design-system-figma\/"},"author":{"name":"Beatriz G\u00f3mez P\u00e9rez","@id":"https:\/\/www.testingtime.com\/en\/#\/schema\/person\/e906f91aa704cca46130d9dcefa5b7f0"},"headline":"Building a design system in Figma","datePublished":"2021-07-26T07:25:16+00:00","dateModified":"2021-12-21T09:43:27+00:00","mainEntityOfPage":{"@id":"https:\/\/www.testingtime.com\/en\/blog\/design-system-figma\/"},"wordCount":2198,"commentCount":0,"publisher":{"@id":"https:\/\/www.testingtime.com\/en\/#organization"},"articleSection":["Case study","Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.testingtime.com\/en\/blog\/design-system-figma\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.testingtime.com\/en\/blog\/design-system-figma\/","url":"https:\/\/www.testingtime.com\/en\/blog\/design-system-figma\/","name":"Building a design system in Figma - TestingTime","isPartOf":{"@id":"https:\/\/www.testingtime.com\/en\/#website"},"datePublished":"2021-07-26T07:25:16+00:00","dateModified":"2021-12-21T09:43:27+00:00","description":"Creating a design system on a new platform from scratch can be challenging, but with a good process you will avoid chaos. Read this for help.","breadcrumb":{"@id":"https:\/\/www.testingtime.com\/en\/blog\/design-system-figma\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.testingtime.com\/en\/blog\/design-system-figma\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.testingtime.com\/en\/blog\/design-system-figma\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"TestingTime","item":"https:\/\/www.testingtime.com\/en\/"},{"@type":"ListItem","position":2,"name":"Building a design system in Figma"}]},{"@type":"WebSite","@id":"https:\/\/www.testingtime.com\/en\/#website","url":"https:\/\/www.testingtime.com\/en\/","name":"TestingTime","description":"Wir rekrutieren Testpersonen","publisher":{"@id":"https:\/\/www.testingtime.com\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.testingtime.com\/en\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.testingtime.com\/en\/#organization","name":"TestingTime","url":"https:\/\/www.testingtime.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.testingtime.com\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.testingtime.com\/app\/uploads\/2017\/04\/logo.svg","contentUrl":"https:\/\/www.testingtime.com\/app\/uploads\/2017\/04\/logo.svg","width":1,"height":1,"caption":"TestingTime"},"image":{"@id":"https:\/\/www.testingtime.com\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/testingtime","https:\/\/twitter.com\/testingtime","https:\/\/www.instagram.com\/testingtime\/","https:\/\/www.linkedin.com\/company-beta\/9231506\/","https:\/\/www.youtube.com\/channel\/UCpnMUgCz5FiiCUXU-U8ub1w"]},{"@type":"Person","@id":"https:\/\/www.testingtime.com\/en\/#\/schema\/person\/e906f91aa704cca46130d9dcefa5b7f0","name":"Beatriz G\u00f3mez P\u00e9rez","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.testingtime.com\/en\/#\/schema\/person\/image\/","url":"https:\/\/www.testingtime.com\/app\/uploads\/2020\/02\/TT_Team_Beatriz_transp-150x150.png","contentUrl":"https:\/\/www.testingtime.com\/app\/uploads\/2020\/02\/TT_Team_Beatriz_transp-150x150.png","caption":"Beatriz G\u00f3mez P\u00e9rez"},"url":"https:\/\/www.testingtime.com\/en\/blog\/author\/beatriz\/"}]}},"_links":{"self":[{"href":"https:\/\/www.testingtime.com\/en\/wp-json\/wp\/v2\/posts\/28174","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.testingtime.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.testingtime.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.testingtime.com\/en\/wp-json\/wp\/v2\/users\/59"}],"replies":[{"embeddable":true,"href":"https:\/\/www.testingtime.com\/en\/wp-json\/wp\/v2\/comments?post=28174"}],"version-history":[{"count":9,"href":"https:\/\/www.testingtime.com\/en\/wp-json\/wp\/v2\/posts\/28174\/revisions"}],"predecessor-version":[{"id":28622,"href":"https:\/\/www.testingtime.com\/en\/wp-json\/wp\/v2\/posts\/28174\/revisions\/28622"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.testingtime.com\/en\/wp-json\/wp\/v2\/media\/28300"}],"wp:attachment":[{"href":"https:\/\/www.testingtime.com\/en\/wp-json\/wp\/v2\/media?parent=28174"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.testingtime.com\/en\/wp-json\/wp\/v2\/categories?post=28174"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.testingtime.com\/en\/wp-json\/wp\/v2\/tags?post=28174"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}} - Salesforce: <\/span>lightningdesignsystem.com<\/span><\/a><\/li>\n
- Use Figma or Google Slides to organise your screenshots or consider printing out each screenshot and pinning them on foam-core boards.<\/span><\/li>\n
- Documentation tools \u2013 These tools host publicly available web pages with version control that anybody can use to retrieve information. Most of these tools are geared toward developers, with options for hosting and displaying code. Because there is no integration with design tools, designers have to develop (and update) images of each design and manually (re)place them on the website. Examples include <\/span>GitBook<\/span><\/a>, <\/span>VuePress<\/span><\/a>, <\/span>Fractal<\/span><\/a> and <\/span>Confluence<\/span><\/a>.<\/span><\/b><\/li>\n
- Failure to understand the magnitude of a design system<\/span><\/li>\n<\/ul>\n