{"id":27487,"date":"2024-05-02T12:15:43","date_gmt":"2024-05-02T10:15:43","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=27487"},"modified":"2024-05-02T17:57:35","modified_gmt":"2024-05-02T15:57:35","slug":"design-system-come-implementarlo","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ux-design\/design-system-come-implementarlo\/","title":{"rendered":"Design System: come implementarlo"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\" id=\"h-cos-e-un-design-system\"><br>Cos\u2019\u00e8 un Design System?<\/h2>\n\n\n\n<p>Il Design System \u00e8 il cuore di tutti i prodotti digitali ed \u00e8 molto pi\u00f9 di una collezione di regole sui colori e tipografia, di linee guida e componenti di UI. All\u2019interno di un Design System, per esempio, possiamo trovare anche i pattern per l\u2019usabilit\u00e0 e regole di UX Writing (quindi copy e microcopy). Costituisce quindi un vero e proprio punto di riferimento per i nostri flussi di progettazione, in quanto ci permette di garantire la consistenza all\u2019interno dei nostri prodotti digitali.<\/p>\n\n\n\n<p>Negli ultimi anni in Italia se ne parla sempre di pi\u00f9, e a livello internazionale ci sono realt\u00e0 come <a href=\"https:\/\/carbondesignsystem.com\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">IBM<\/a> e <a href=\"https:\/\/m3.material.io\/\" class=\"ek-link\">Google<\/a> che hanno fatto un lavoro eccellente per quanto riguarda il Design System rendendolo disponibile per chiunque.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-perche-e-come-implementare-un-design-system\"><br>Perch\u00e9 e come implementare un Design System?<\/h2>\n\n\n\n<p>Implementare un design system all\u2019interno del proprio team di lavoro pu\u00f2 portare numerosi benefici, tra i quali possiamo trovare:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>scalabilit\u00e0<\/strong>, perch\u00e9 permette di evolvere un prodotto digitale, partendo da basi gi\u00e0 consolidate, sia a livello di design che a livello di infrastruttura tecnologica;<\/li>\n\n\n\n<li><strong>consistenza<\/strong>, in quanto avendo delle linee guida e dei componenti standardizzati possiamo rendere i nostri prodotti digitali coerenti dal punto di vista funzionale e visuale;<\/li>\n\n\n\n<li><strong>collaborazione<\/strong>, soprattutto tra il team di design e di sviluppo, ma anche con gli stakeholder. Ne ho parlato in modo approfondito <a href=\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ux-design\/designer-vs-developer-la-sfida-progettuale\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">in questo articolo.<\/a><\/li>\n<\/ul>\n\n\n\n<p>Dobbiamo immaginare il nostro Design System come una scatola dei Lego, in cui ogni componente corrisponde a un mattoncino. Ognuno di essi \u00e8 un tassello importante per la nostra progettazione e per questo dobbiamo curare molto bene la parte della documentazione.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-come-possiamo-iniziare-nbsp\">Come possiamo iniziare?&nbsp;<\/h3>\n\n\n\n<p>Iniziare un\u2019attivit\u00e0 enorme come pu\u00f2 essere quella di costruire un Design System da zero pu\u00f2 sembrare uno scoglio insormontabile.&nbsp;<\/p>\n\n\n\n<p>Quando ci troviamo di fronte a queste tipologie di \u201cimprese\u201d quello che pu\u00f2 aiutare \u00e8 porsi un obiettivo e chiedersi: quali problemi vogliamo risolvere? Come vogliamo, o abbiamo bisogno, di strutturare il nostro lavoro in modo che sia di facile mantenimento?<br><\/p>\n\n\n\n<p>Dopodich\u00e9 si parte facendo <strong>un&#8217;analisi<\/strong> di ci\u00f2 che attualmente abbiamo all\u2019interno dei nostri file di progetto e quindi:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>effettuare un primo<\/strong> <strong>audit<\/strong> di ci\u00f2 che \u00e8 in produzione e che non \u00e8 stato disegnato; in questo modo avremo traccia anche di possibili casistiche da implementare nei nostri componenti;&nbsp;<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>individuare<\/strong> <strong>i<\/strong> <strong>colori<\/strong>, <strong>icone, shadow, spacing, grid\/column system<\/strong> che sono attualmente presenti nei nostri prodotti digitali. Questi sopra citati nello specifico sono i pi\u00f9 importanti in quanto costituiscono le fondamenta di tutto il nostro Design System;<\/li>\n\n\n\n<li><strong>individuare la tipografia utilizzata su tutti i nostri touchpoint<\/strong> (quindi dalla schermate mobile, a quelle Web, alla tipografia utilizzata per mandare le email, ecc);&nbsp;<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>individuare pattern ricorrenti, <\/strong>in modo da rintracciare anche eventuali disallineamenti o possibili comportamenti da adeguare;&nbsp;<\/li>\n\n\n\n<li><strong>creare la documentazione<\/strong> <strong>scritta<\/strong> che dovr\u00e0 servire come enciclopedia di riferimento per tutti i membri del team e dove saranno racchiuse tutte le regole di utilizzo dei componenti, pattern e altri componenti di UI.<\/li>\n<\/ul>\n\n\n\n<p>Ora che abbiamo fatto tutti questi passaggi, una buona pratica \u00e8 fare ricerca su come altre societ\u00e0 o aziende hanno implementato il Design System e come lo usano all\u2019interno dei propri flussi di lavoro.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-consigli-per-l-implementazione-nbsp\">Consigli per l\u2019implementazione&nbsp;<\/h2>\n\n\n\n<p>A mio avviso bisognerebbe spendere una buona parte del tempo lavorativo per d<strong>elimitare il perimetro<\/strong> di componenti, colori, pattern, content e via di seguito.<\/p>\n\n\n\n<p>Investendo il giusto tempo per scrivere un esaustiva documentazione pu\u00f2 salvarci in tantissime occasioni e, di conseguenza, farci risparmiare molto tempo durante la fase di progettazione.<\/p>\n\n\n\n<p>Per quanto riguarda la parte della documentazione, invece, sarebbe opportuno farla <strong>a quattro mani con il team di sviluppo <\/strong>in modo da collaborare insieme per costruire quali sono le \u201cregole della progettazione\u201d.<\/p>\n\n\n\n<p><strong>Il Design System <\/strong>non \u00e8 una cosa solo ad appannaggio dei designer, al contrario, <strong>diventa uno strumento<\/strong> anche per gli sviluppatori che, attraverso la programmazione, rendono pi\u00f9 veri e reali i componenti che abbiamo progettato su Figma (o su altri software di prototipazione).&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-conclusioni-e-risorse\">Conclusioni e Risorse<\/h2>\n\n\n\n<p>Nel mondo digitale di oggi, implementare un Design System non \u00e8 solo una scelta, ma una strategia per i team nella ricerca della consistenza e della coesione della user experience.<\/p>\n\n\n\n<p>Abbracciando i principi di collaborazione e scalabilit\u00e0, i team possono creare flussi di lavoro fluidi che permettono di creare migliori esperienze user-centered e prodotti digitali.<\/p>\n\n\n\n<p>Invito tutte le persone, nel loro piccolo, a generare sensibilit\u00e0 attorno a questo tema e iniziare a crearne uno proprio: i risultati saranno sorprendenti!<\/p>\n\n\n\n<p>In seguito ho raccolto alcune risorse per approfondire il mondo del design system:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Design Systems<\/strong> vi pu\u00f2 aiutare a muovere i primi passi, quindi <a href=\"https:\/\/www.designsystems.com\/\" target=\"_blank\" aria-label=\"capire come strutturare (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">capire come strutturare<\/a> le linee guida<\/li>\n\n\n\n<li><strong>Resin, <\/strong>design system di <a href=\"https:\/\/design.telepass.com\/943425b5c\/p\/028e0f-telepass-design-system\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">Telepass<\/a> al quale ho lavorato personalmente&nbsp;<\/li>\n\n\n\n<li><a href=\"https:\/\/base.uber.com\/6d2425e9f\/p\/294ab4-base-design-system\"><strong>Base<\/strong><\/a><strong>, <\/strong>design system di Uber<\/li>\n\n\n\n<li><a aria-label=\" (opens in a new tab)\" href=\"https:\/\/polaris.shopify.com\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\"><strong>Polaris<\/strong><\/a><strong>,<\/strong> design system di Shopify<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Cos\u2019\u00e8 un Design System? Il Design System \u00e8 il cuore di tutti i prodotti digitali ed \u00e8 molto pi\u00f9 di una collezione di regole sui colori e tipografia, di linee guida e componenti di UI. All\u2019interno di un Design System, per esempio, possiamo trovare anche i pattern per l\u2019usabilit\u00e0 e regole di UX Writing (quindi&#8230; <a class=\"more-link\" href=\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ux-design\/design-system-come-implementarlo\/\">Read more<\/a><\/p>\n","protected":false},"author":167,"featured_media":27490,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","_uag_custom_page_level_css":"","_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[10299],"tags":[12091,10383],"collections":[11708],"class_list":{"0":"post-27487","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-ux-design","8":"tag-design-system","9":"tag-ux-designer","10":"collections-dalla-community","11":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.9 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Design System: come implementarlo - Codemotion Magazine<\/title>\n<meta name=\"description\" content=\"Tutto, o quasi, quello che dovresti sapere per migliorare i processi di implementazione del Design System all\u2019interno del tuo team.\" \/>\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.codemotion.com\/magazine\/it\/frontend-it\/ux-design\/design-system-come-implementarlo\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Design System: come implementarlo\" \/>\n<meta property=\"og:description\" content=\"Tutto, o quasi, quello che dovresti sapere per migliorare i processi di implementazione del Design System all\u2019interno del tuo team.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ux-design\/design-system-come-implementarlo\/\" \/>\n<meta property=\"og:site_name\" content=\"Codemotion Magazine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Codemotion.Italy\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-05-02T10:15:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-02T15:57:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/DALL\u00b7E-2024-05-02-12.13.08-A-minimalist-and-modern-digital-magazine-cover-for-an-article-about-Design-Systems-designed-purely-in-landscape-format-without-any-text-or-fake-text-.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1792\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Sherpa Community\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:site\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sherpa Community\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ux-design\/design-system-come-implementarlo\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ux-design\/design-system-come-implementarlo\/\"},\"author\":{\"name\":\"Sherpa Community\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/7f6219152300591e9d224ff6efac6acc\"},\"headline\":\"Design System: come implementarlo\",\"datePublished\":\"2024-05-02T10:15:43+00:00\",\"dateModified\":\"2024-05-02T15:57:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ux-design\/design-system-come-implementarlo\/\"},\"wordCount\":791,\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ux-design\/design-system-come-implementarlo\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/DALL\u00b7E-2024-05-02-12.13.08-A-minimalist-and-modern-digital-magazine-cover-for-an-article-about-Design-Systems-designed-purely-in-landscape-format-without-any-text-or-fake-text-.webp\",\"keywords\":[\"design system\",\"UX designer\"],\"articleSection\":[\"UX\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ux-design\/design-system-come-implementarlo\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ux-design\/design-system-come-implementarlo\/\",\"name\":\"Design System: come implementarlo - Codemotion Magazine\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ux-design\/design-system-come-implementarlo\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ux-design\/design-system-come-implementarlo\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/DALL\u00b7E-2024-05-02-12.13.08-A-minimalist-and-modern-digital-magazine-cover-for-an-article-about-Design-Systems-designed-purely-in-landscape-format-without-any-text-or-fake-text-.webp\",\"datePublished\":\"2024-05-02T10:15:43+00:00\",\"dateModified\":\"2024-05-02T15:57:35+00:00\",\"description\":\"Tutto, o quasi, quello che dovresti sapere per migliorare i processi di implementazione del Design System all\u2019interno del tuo team.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ux-design\/design-system-come-implementarlo\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ux-design\/design-system-come-implementarlo\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ux-design\/design-system-come-implementarlo\/#primaryimage\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/DALL\u00b7E-2024-05-02-12.13.08-A-minimalist-and-modern-digital-magazine-cover-for-an-article-about-Design-Systems-designed-purely-in-landscape-format-without-any-text-or-fake-text-.webp\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/DALL\u00b7E-2024-05-02-12.13.08-A-minimalist-and-modern-digital-magazine-cover-for-an-article-about-Design-Systems-designed-purely-in-landscape-format-without-any-text-or-fake-text-.webp\",\"width\":1792,\"height\":1024,\"caption\":\"design system\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ux-design\/design-system-come-implementarlo\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"UX\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ux-design\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Design System: come implementarlo\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"name\":\"Codemotion Magazine\",\"description\":\"We code the future. Together\",\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\",\"name\":\"Codemotion\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"width\":225,\"height\":225,\"caption\":\"Codemotion\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Codemotion.Italy\/\",\"https:\/\/x.com\/CodemotionIT\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/7f6219152300591e9d224ff6efac6acc\",\"name\":\"Sherpa Community\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/10\/sherpa-icon-rounded-150x150.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/10\/sherpa-icon-rounded-150x150.png\",\"caption\":\"Sherpa Community\"},\"description\":\"Sherpa \u00e8 la community italiana di UX\/UI Designer dove crescere e formarsi. Formazione, confronto e mentoring per aiutarti a crescere professionalmente.\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/author\/sherpa-community\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Design System: come implementarlo - Codemotion Magazine","description":"Tutto, o quasi, quello che dovresti sapere per migliorare i processi di implementazione del Design System all\u2019interno del tuo team.","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.codemotion.com\/magazine\/it\/frontend-it\/ux-design\/design-system-come-implementarlo\/","og_locale":"en_US","og_type":"article","og_title":"Design System: come implementarlo","og_description":"Tutto, o quasi, quello che dovresti sapere per migliorare i processi di implementazione del Design System all\u2019interno del tuo team.","og_url":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ux-design\/design-system-come-implementarlo\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2024-05-02T10:15:43+00:00","article_modified_time":"2024-05-02T15:57:35+00:00","og_image":[{"width":1792,"height":1024,"url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/DALL\u00b7E-2024-05-02-12.13.08-A-minimalist-and-modern-digital-magazine-cover-for-an-article-about-Design-Systems-designed-purely-in-landscape-format-without-any-text-or-fake-text-.webp","type":"image\/webp"}],"author":"Sherpa Community","twitter_card":"summary_large_image","twitter_creator":"@CodemotionIT","twitter_site":"@CodemotionIT","twitter_misc":{"Written by":"Sherpa Community","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ux-design\/design-system-come-implementarlo\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ux-design\/design-system-come-implementarlo\/"},"author":{"name":"Sherpa Community","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/7f6219152300591e9d224ff6efac6acc"},"headline":"Design System: come implementarlo","datePublished":"2024-05-02T10:15:43+00:00","dateModified":"2024-05-02T15:57:35+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ux-design\/design-system-come-implementarlo\/"},"wordCount":791,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ux-design\/design-system-come-implementarlo\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/DALL\u00b7E-2024-05-02-12.13.08-A-minimalist-and-modern-digital-magazine-cover-for-an-article-about-Design-Systems-designed-purely-in-landscape-format-without-any-text-or-fake-text-.webp","keywords":["design system","UX designer"],"articleSection":["UX"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ux-design\/design-system-come-implementarlo\/","url":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ux-design\/design-system-come-implementarlo\/","name":"Design System: come implementarlo - Codemotion Magazine","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ux-design\/design-system-come-implementarlo\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ux-design\/design-system-come-implementarlo\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/DALL\u00b7E-2024-05-02-12.13.08-A-minimalist-and-modern-digital-magazine-cover-for-an-article-about-Design-Systems-designed-purely-in-landscape-format-without-any-text-or-fake-text-.webp","datePublished":"2024-05-02T10:15:43+00:00","dateModified":"2024-05-02T15:57:35+00:00","description":"Tutto, o quasi, quello che dovresti sapere per migliorare i processi di implementazione del Design System all\u2019interno del tuo team.","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ux-design\/design-system-come-implementarlo\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ux-design\/design-system-come-implementarlo\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ux-design\/design-system-come-implementarlo\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/DALL\u00b7E-2024-05-02-12.13.08-A-minimalist-and-modern-digital-magazine-cover-for-an-article-about-Design-Systems-designed-purely-in-landscape-format-without-any-text-or-fake-text-.webp","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/DALL\u00b7E-2024-05-02-12.13.08-A-minimalist-and-modern-digital-magazine-cover-for-an-article-about-Design-Systems-designed-purely-in-landscape-format-without-any-text-or-fake-text-.webp","width":1792,"height":1024,"caption":"design system"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ux-design\/design-system-come-implementarlo\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codemotion.com\/magazine\/"},{"@type":"ListItem","position":2,"name":"Frontend","item":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/"},{"@type":"ListItem","position":3,"name":"UX","item":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ux-design\/"},{"@type":"ListItem","position":4,"name":"Design System: come implementarlo"}]},{"@type":"WebSite","@id":"https:\/\/www.codemotion.com\/magazine\/#website","url":"https:\/\/www.codemotion.com\/magazine\/","name":"Codemotion Magazine","description":"We code the future. Together","publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codemotion.com\/magazine\/#organization","name":"Codemotion","url":"https:\/\/www.codemotion.com\/magazine\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","width":225,"height":225,"caption":"Codemotion"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Codemotion.Italy\/","https:\/\/x.com\/CodemotionIT"]},{"@type":"Person","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/7f6219152300591e9d224ff6efac6acc","name":"Sherpa Community","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/10\/sherpa-icon-rounded-150x150.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/10\/sherpa-icon-rounded-150x150.png","caption":"Sherpa Community"},"description":"Sherpa \u00e8 la community italiana di UX\/UI Designer dove crescere e formarsi. Formazione, confronto e mentoring per aiutarti a crescere professionalmente.","url":"https:\/\/www.codemotion.com\/magazine\/author\/sherpa-community\/"}]}},"featured_image_src":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/DALL\u00b7E-2024-05-02-12.13.08-A-minimalist-and-modern-digital-magazine-cover-for-an-article-about-Design-Systems-designed-purely-in-landscape-format-without-any-text-or-fake-text--600x400.webp","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/DALL\u00b7E-2024-05-02-12.13.08-A-minimalist-and-modern-digital-magazine-cover-for-an-article-about-Design-Systems-designed-purely-in-landscape-format-without-any-text-or-fake-text--600x600.webp","author_info":{"display_name":"Sherpa Community","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/sherpa-community\/"},"uagb_featured_image_src":{"full":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/DALL\u00b7E-2024-05-02-12.13.08-A-minimalist-and-modern-digital-magazine-cover-for-an-article-about-Design-Systems-designed-purely-in-landscape-format-without-any-text-or-fake-text-.webp",1792,1024,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/DALL\u00b7E-2024-05-02-12.13.08-A-minimalist-and-modern-digital-magazine-cover-for-an-article-about-Design-Systems-designed-purely-in-landscape-format-without-any-text-or-fake-text--150x150.webp",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/DALL\u00b7E-2024-05-02-12.13.08-A-minimalist-and-modern-digital-magazine-cover-for-an-article-about-Design-Systems-designed-purely-in-landscape-format-without-any-text-or-fake-text--300x171.webp",300,171,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/DALL\u00b7E-2024-05-02-12.13.08-A-minimalist-and-modern-digital-magazine-cover-for-an-article-about-Design-Systems-designed-purely-in-landscape-format-without-any-text-or-fake-text--768x439.webp",768,439,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/DALL\u00b7E-2024-05-02-12.13.08-A-minimalist-and-modern-digital-magazine-cover-for-an-article-about-Design-Systems-designed-purely-in-landscape-format-without-any-text-or-fake-text--1024x585.webp",1024,585,true],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/DALL\u00b7E-2024-05-02-12.13.08-A-minimalist-and-modern-digital-magazine-cover-for-an-article-about-Design-Systems-designed-purely-in-landscape-format-without-any-text-or-fake-text--1536x878.webp",1536,878,true],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/DALL\u00b7E-2024-05-02-12.13.08-A-minimalist-and-modern-digital-magazine-cover-for-an-article-about-Design-Systems-designed-purely-in-landscape-format-without-any-text-or-fake-text-.webp",1792,1024,false],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/DALL\u00b7E-2024-05-02-12.13.08-A-minimalist-and-modern-digital-magazine-cover-for-an-article-about-Design-Systems-designed-purely-in-landscape-format-without-any-text-or-fake-text--100x100.webp",100,100,true],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/DALL\u00b7E-2024-05-02-12.13.08-A-minimalist-and-modern-digital-magazine-cover-for-an-article-about-Design-Systems-designed-purely-in-landscape-format-without-any-text-or-fake-text--180x128.webp",180,128,true],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/DALL\u00b7E-2024-05-02-12.13.08-A-minimalist-and-modern-digital-magazine-cover-for-an-article-about-Design-Systems-designed-purely-in-landscape-format-without-any-text-or-fake-text--896x504.webp",896,504,true],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/DALL\u00b7E-2024-05-02-12.13.08-A-minimalist-and-modern-digital-magazine-cover-for-an-article-about-Design-Systems-designed-purely-in-landscape-format-without-any-text-or-fake-text--400x225.webp",400,225,true],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/DALL\u00b7E-2024-05-02-12.13.08-A-minimalist-and-modern-digital-magazine-cover-for-an-article-about-Design-Systems-designed-purely-in-landscape-format-without-any-text-or-fake-text--600x400.webp",600,400,true],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/DALL\u00b7E-2024-05-02-12.13.08-A-minimalist-and-modern-digital-magazine-cover-for-an-article-about-Design-Systems-designed-purely-in-landscape-format-without-any-text-or-fake-text--600x600.webp",600,600,true]},"uagb_author_info":{"display_name":"Sherpa Community","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/sherpa-community\/"},"uagb_comment_info":0,"uagb_excerpt":"Cos\u2019\u00e8 un Design System? Il Design System \u00e8 il cuore di tutti i prodotti digitali ed \u00e8 molto pi\u00f9 di una collezione di regole sui colori e tipografia, di linee guida e componenti di UI. All\u2019interno di un Design System, per esempio, possiamo trovare anche i pattern per l\u2019usabilit\u00e0 e regole di UX Writing (quindi&#8230;&hellip;","lang":"it","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/27487","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/users\/167"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/comments?post=27487"}],"version-history":[{"count":2,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/27487\/revisions"}],"predecessor-version":[{"id":27489,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/27487\/revisions\/27489"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/27490"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=27487"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=27487"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=27487"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=27487"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}