{"id":4584,"date":"2023-02-24T09:44:23","date_gmt":"2023-02-24T09:44:23","guid":{"rendered":"https:\/\/blogs.gov.scot\/digital\/?p=4584"},"modified":"2023-02-24T09:44:23","modified_gmt":"2023-02-24T09:44:23","slug":"the-digital-scotland-design-system-kit-for-figma","status":"publish","type":"post","link":"https:\/\/blogs.gov.scot\/digital\/2023\/02\/24\/the-digital-scotland-design-system-kit-for-figma\/","title":{"rendered":"The Digital Scotland Design System kit for Figma"},"content":{"rendered":"<p><strong>Blog by Kevin Allen, Lead Graphic Designer, User Centred Design, Digital Transformation Division.<\/strong><\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-4609 size-full lazyload\" data-src=\"https:\/\/blogs.gov.scot\/digital\/wp-content\/uploads\/sites\/5\/2023\/02\/Header.png\" alt=\"\" width=\"768\" height=\"432\" data-srcset=\"https:\/\/blogs.gov.scot\/digital\/wp-content\/uploads\/sites\/5\/2023\/02\/Header.png 768w, https:\/\/blogs.gov.scot\/digital\/wp-content\/uploads\/sites\/5\/2023\/02\/Header-300x169.png 300w, https:\/\/blogs.gov.scot\/digital\/wp-content\/uploads\/sites\/5\/2023\/02\/Header-750x422.png 750w, https:\/\/blogs.gov.scot\/digital\/wp-content\/uploads\/sites\/5\/2023\/02\/Header-747x420.png 747w\" data-sizes=\"(max-width: 768px) 100vw, 768px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 768px; --smush-placeholder-aspect-ratio: 768\/432;\" \/><\/p>\n<p>The Digital Scotland Design System team are committed to providing the tools necessary to create accessible and inclusive digital services across the public sector in Scotland. We have recently <a href=\"https:\/\/designsystem.gov.scot\/get-started\/prototyping\/\">updated the prototyping section on the design system website<\/a> to include the Figma design system kit.<\/p>\n<p>The <a href=\"https:\/\/www.figma.com\/community\/file\/1179354393781430703\">Figma library<\/a> allows users to design and prototype interfaces, sites, and services utilising the same components and patterns which our team use in their day-to-day work. These components mirror the coded resources in the design system itself which have been created and tested by our multi-disciplinary team and conform with <a href=\"https:\/\/www.w3.org\/WAI\/\">WCAG AA Accessibility Guidelines<\/a>.<\/p>\n<p>Figma has grown rapidly since its launch in 2016, superseding Sketch as the most widely used user interface design tool. Being a browser-based application, it is easy for users to access, with additional options to download and use as a desktop application for both MacOS and Windows. This ease of access has contributed to its widespread adoption.<\/p>\n<p>In <a href=\"https:\/\/uxtools.co\/survey\/2022\">a recent survey<\/a> of 4,260 digital design professionals, over 85% used Figma as their primary tool to create user interfaces. 91% of this same group also used Figma for basic prototyping. Following on from feedback from our initial release we have added interactive states to components where possible to facilitate rapid prototyping. For in-depth prototyping we utilise Axure RP, all of these resources can be found in the <a href=\"https:\/\/designsystem.gov.scot\/get-started\/prototyping\/\">\u2018Prototyping\u2019 section of the design system site<\/a>.<\/p>\n<div id=\"attachment_4610\" style=\"width: 778px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" aria-describedby=\"caption-attachment-4610\" class=\"wp-image-4610 size-full lazyload\" data-src=\"https:\/\/blogs.gov.scot\/digital\/wp-content\/uploads\/sites\/5\/2023\/02\/Image_2.png\" alt=\"\" width=\"768\" height=\"190\" data-srcset=\"https:\/\/blogs.gov.scot\/digital\/wp-content\/uploads\/sites\/5\/2023\/02\/Image_2.png 768w, https:\/\/blogs.gov.scot\/digital\/wp-content\/uploads\/sites\/5\/2023\/02\/Image_2-300x74.png 300w, https:\/\/blogs.gov.scot\/digital\/wp-content\/uploads\/sites\/5\/2023\/02\/Image_2-750x186.png 750w\" data-sizes=\"(max-width: 768px) 100vw, 768px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 768px; --smush-placeholder-aspect-ratio: 768\/190;\" \/><p id=\"caption-attachment-4610\" class=\"wp-caption-text\">Our Figma \u2018Site header\u2019 pattern with variant options<\/p><\/div>\n<p>Programmes such as Adobe Photoshop and Illustrator continue to be widely used alongside more recent digital-focussed design applications as they provide a level of functionality when creating and editing raster and vector graphics not currently available in applications such as Figma.<\/p>\n<p>We are following the changes leading on from Adobes acquisition of Figma late last year with interest. <a href=\"https:\/\/www.figma.com\/blog\/a-new-collaboration-with-adobe\/\">It has been stated<\/a> there are currently no plans to fold Figma into the wider Adobe Creative Cloud, and in the short term it will remain functioning as an autonomous organisation. The Adobe equivalent digital design tool \u2018Adobe XD\u2019 also remains available with a Creative Cloud subscription.<\/p>\n<p>It is currently possible to create a free Figma account with full design features for a limited number of projects and team sizes. The Digital Scotland Design System Kit is available on the <a href=\"https:\/\/www.figma.com\/community\/file\/1179354393781430703\">Figma Community site<\/a>. Here you can create a copy to your own profile and begin to use the styles, components, and patterns in your designs.<\/p>\n<p>Our team is looking at ways in which we can provide tools, guidance and connect with and grow a wider design system community. We are extremely interested in gathering feedback on how the design system is being used in order to continuously improve through user evidence. Please contact us through the <a href=\"mailto:designsystem@gov.scot\">design system mailbox<\/a> if you have any feedback, queries, or suggestions.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Blog by Kevin Allen, Lead Graphic Designer, User Centred Design, Digital Transformation Division. The Digital Scotland Design System team are committed to providing the tools necessary to create accessible and inclusive digital services across the public sector in Scotland. We have recently updated the prototyping section on the design system website to include the Figma&#8230;<\/p>\n","protected":false},"author":317,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,253],"tags":[254,369,95],"class_list":["post-4584","post","type-post","status-publish","format-standard","hentry","category-digital-scotland","category-digital-scotland-design-system","tag-digital-scotland-design-system","tag-figma-library","tag-scottish-government"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>The Digital Scotland Design System kit for Figma - Digital<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blogs.gov.scot\/digital\/2023\/02\/24\/the-digital-scotland-design-system-kit-for-figma\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The Digital Scotland Design System kit for Figma - Digital\" \/>\n<meta property=\"og:description\" content=\"Blog by Kevin Allen, Lead Graphic Designer, User Centred Design, Digital Transformation Division. The Digital Scotland Design System team are committed to providing the tools necessary to create accessible and inclusive digital services across the public sector in Scotland. We have recently updated the prototyping section on the design system website to include the Figma...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blogs.gov.scot\/digital\/2023\/02\/24\/the-digital-scotland-design-system-kit-for-figma\/\" \/>\n<meta property=\"og:site_name\" content=\"Digital\" \/>\n<meta property=\"article:published_time\" content=\"2023-02-24T09:44:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blogs.gov.scot\/digital\/wp-content\/uploads\/sites\/5\/2023\/02\/Header.png\" \/>\n\t<meta property=\"og:image:width\" content=\"768\" \/>\n\t<meta property=\"og:image:height\" content=\"432\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Stewart Hamilton\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Stewart Hamilton\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/blogs.gov.scot\/digital\/2023\/02\/24\/the-digital-scotland-design-system-kit-for-figma\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/blogs.gov.scot\/digital\/2023\/02\/24\/the-digital-scotland-design-system-kit-for-figma\/\"},\"author\":{\"name\":\"Stewart Hamilton\",\"@id\":\"https:\/\/blogs.gov.scot\/digital\/#\/schema\/person\/fd47935c780321ad6c4ecbb2f10da552\"},\"headline\":\"The Digital Scotland Design System kit for Figma\",\"datePublished\":\"2023-02-24T09:44:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/blogs.gov.scot\/digital\/2023\/02\/24\/the-digital-scotland-design-system-kit-for-figma\/\"},\"wordCount\":490,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/blogs.gov.scot\/digital\/2023\/02\/24\/the-digital-scotland-design-system-kit-for-figma\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blogs.gov.scot\/digital\/wp-content\/uploads\/sites\/5\/2023\/02\/Header.png\",\"keywords\":[\"Digital Scotland Design System\",\"Figma library\",\"scottish government\"],\"articleSection\":[\"Digital Scotland\",\"Digital Scotland Design System\"],\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/blogs.gov.scot\/digital\/2023\/02\/24\/the-digital-scotland-design-system-kit-for-figma\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blogs.gov.scot\/digital\/2023\/02\/24\/the-digital-scotland-design-system-kit-for-figma\/\",\"url\":\"https:\/\/blogs.gov.scot\/digital\/2023\/02\/24\/the-digital-scotland-design-system-kit-for-figma\/\",\"name\":\"The Digital Scotland Design System kit for Figma - Digital\",\"isPartOf\":{\"@id\":\"https:\/\/blogs.gov.scot\/digital\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/blogs.gov.scot\/digital\/2023\/02\/24\/the-digital-scotland-design-system-kit-for-figma\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/blogs.gov.scot\/digital\/2023\/02\/24\/the-digital-scotland-design-system-kit-for-figma\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blogs.gov.scot\/digital\/wp-content\/uploads\/sites\/5\/2023\/02\/Header.png\",\"datePublished\":\"2023-02-24T09:44:23+00:00\",\"author\":{\"@id\":\"https:\/\/blogs.gov.scot\/digital\/#\/schema\/person\/fd47935c780321ad6c4ecbb2f10da552\"},\"breadcrumb\":{\"@id\":\"https:\/\/blogs.gov.scot\/digital\/2023\/02\/24\/the-digital-scotland-design-system-kit-for-figma\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blogs.gov.scot\/digital\/2023\/02\/24\/the-digital-scotland-design-system-kit-for-figma\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/blogs.gov.scot\/digital\/2023\/02\/24\/the-digital-scotland-design-system-kit-for-figma\/#primaryimage\",\"url\":\"https:\/\/blogs.gov.scot\/digital\/wp-content\/uploads\/sites\/5\/2023\/02\/Header.png\",\"contentUrl\":\"https:\/\/blogs.gov.scot\/digital\/wp-content\/uploads\/sites\/5\/2023\/02\/Header.png\",\"width\":768,\"height\":432},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blogs.gov.scot\/digital\/2023\/02\/24\/the-digital-scotland-design-system-kit-for-figma\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blogs.gov.scot\/digital\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"The Digital Scotland Design System kit for Figma\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blogs.gov.scot\/digital\/#website\",\"url\":\"https:\/\/blogs.gov.scot\/digital\/\",\"name\":\"Digital\",\"description\":\"Updates from the Scottish Government&#039;s Digital Directorate\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blogs.gov.scot\/digital\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/blogs.gov.scot\/digital\/#\/schema\/person\/fd47935c780321ad6c4ecbb2f10da552\",\"name\":\"Stewart Hamilton\",\"description\":\"Communications and Engagement Officer\",\"url\":\"https:\/\/blogs.gov.scot\/digital\/author\/stewarthamilton\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"The Digital Scotland Design System kit for Figma - Digital","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:\/\/blogs.gov.scot\/digital\/2023\/02\/24\/the-digital-scotland-design-system-kit-for-figma\/","og_locale":"en_GB","og_type":"article","og_title":"The Digital Scotland Design System kit for Figma - Digital","og_description":"Blog by Kevin Allen, Lead Graphic Designer, User Centred Design, Digital Transformation Division. The Digital Scotland Design System team are committed to providing the tools necessary to create accessible and inclusive digital services across the public sector in Scotland. We have recently updated the prototyping section on the design system website to include the Figma...","og_url":"https:\/\/blogs.gov.scot\/digital\/2023\/02\/24\/the-digital-scotland-design-system-kit-for-figma\/","og_site_name":"Digital","article_published_time":"2023-02-24T09:44:23+00:00","og_image":[{"width":768,"height":432,"url":"https:\/\/blogs.gov.scot\/digital\/wp-content\/uploads\/sites\/5\/2023\/02\/Header.png","type":"image\/png"}],"author":"Stewart Hamilton","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Stewart Hamilton","Estimated reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/blogs.gov.scot\/digital\/2023\/02\/24\/the-digital-scotland-design-system-kit-for-figma\/#article","isPartOf":{"@id":"https:\/\/blogs.gov.scot\/digital\/2023\/02\/24\/the-digital-scotland-design-system-kit-for-figma\/"},"author":{"name":"Stewart Hamilton","@id":"https:\/\/blogs.gov.scot\/digital\/#\/schema\/person\/fd47935c780321ad6c4ecbb2f10da552"},"headline":"The Digital Scotland Design System kit for Figma","datePublished":"2023-02-24T09:44:23+00:00","mainEntityOfPage":{"@id":"https:\/\/blogs.gov.scot\/digital\/2023\/02\/24\/the-digital-scotland-design-system-kit-for-figma\/"},"wordCount":490,"commentCount":0,"image":{"@id":"https:\/\/blogs.gov.scot\/digital\/2023\/02\/24\/the-digital-scotland-design-system-kit-for-figma\/#primaryimage"},"thumbnailUrl":"https:\/\/blogs.gov.scot\/digital\/wp-content\/uploads\/sites\/5\/2023\/02\/Header.png","keywords":["Digital Scotland Design System","Figma library","scottish government"],"articleSection":["Digital Scotland","Digital Scotland Design System"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/blogs.gov.scot\/digital\/2023\/02\/24\/the-digital-scotland-design-system-kit-for-figma\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/blogs.gov.scot\/digital\/2023\/02\/24\/the-digital-scotland-design-system-kit-for-figma\/","url":"https:\/\/blogs.gov.scot\/digital\/2023\/02\/24\/the-digital-scotland-design-system-kit-for-figma\/","name":"The Digital Scotland Design System kit for Figma - Digital","isPartOf":{"@id":"https:\/\/blogs.gov.scot\/digital\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blogs.gov.scot\/digital\/2023\/02\/24\/the-digital-scotland-design-system-kit-for-figma\/#primaryimage"},"image":{"@id":"https:\/\/blogs.gov.scot\/digital\/2023\/02\/24\/the-digital-scotland-design-system-kit-for-figma\/#primaryimage"},"thumbnailUrl":"https:\/\/blogs.gov.scot\/digital\/wp-content\/uploads\/sites\/5\/2023\/02\/Header.png","datePublished":"2023-02-24T09:44:23+00:00","author":{"@id":"https:\/\/blogs.gov.scot\/digital\/#\/schema\/person\/fd47935c780321ad6c4ecbb2f10da552"},"breadcrumb":{"@id":"https:\/\/blogs.gov.scot\/digital\/2023\/02\/24\/the-digital-scotland-design-system-kit-for-figma\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blogs.gov.scot\/digital\/2023\/02\/24\/the-digital-scotland-design-system-kit-for-figma\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/blogs.gov.scot\/digital\/2023\/02\/24\/the-digital-scotland-design-system-kit-for-figma\/#primaryimage","url":"https:\/\/blogs.gov.scot\/digital\/wp-content\/uploads\/sites\/5\/2023\/02\/Header.png","contentUrl":"https:\/\/blogs.gov.scot\/digital\/wp-content\/uploads\/sites\/5\/2023\/02\/Header.png","width":768,"height":432},{"@type":"BreadcrumbList","@id":"https:\/\/blogs.gov.scot\/digital\/2023\/02\/24\/the-digital-scotland-design-system-kit-for-figma\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blogs.gov.scot\/digital\/"},{"@type":"ListItem","position":2,"name":"The Digital Scotland Design System kit for Figma"}]},{"@type":"WebSite","@id":"https:\/\/blogs.gov.scot\/digital\/#website","url":"https:\/\/blogs.gov.scot\/digital\/","name":"Digital","description":"Updates from the Scottish Government&#039;s Digital Directorate","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blogs.gov.scot\/digital\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/blogs.gov.scot\/digital\/#\/schema\/person\/fd47935c780321ad6c4ecbb2f10da552","name":"Stewart Hamilton","description":"Communications and Engagement Officer","url":"https:\/\/blogs.gov.scot\/digital\/author\/stewarthamilton\/"}]}},"_links":{"self":[{"href":"https:\/\/blogs.gov.scot\/digital\/wp-json\/wp\/v2\/posts\/4584","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.gov.scot\/digital\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.gov.scot\/digital\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.gov.scot\/digital\/wp-json\/wp\/v2\/users\/317"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.gov.scot\/digital\/wp-json\/wp\/v2\/comments?post=4584"}],"version-history":[{"count":0,"href":"https:\/\/blogs.gov.scot\/digital\/wp-json\/wp\/v2\/posts\/4584\/revisions"}],"wp:attachment":[{"href":"https:\/\/blogs.gov.scot\/digital\/wp-json\/wp\/v2\/media?parent=4584"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.gov.scot\/digital\/wp-json\/wp\/v2\/categories?post=4584"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.gov.scot\/digital\/wp-json\/wp\/v2\/tags?post=4584"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}