{"id":24170,"date":"2026-06-25T08:02:35","date_gmt":"2026-06-25T08:02:35","guid":{"rendered":"https:\/\/shm.studio\/news\/figma-2026-code-layers-animazioni-ai-plugin-custom\/"},"modified":"2026-06-25T08:02:35","modified_gmt":"2026-06-25T08:02:35","slug":"figma-2026-code-layers-animazioni-ai-plugin-custom","status":"publish","type":"news","link":"https:\/\/shm.studio\/en\/news\/figma-2026-code-layers-animations-for-custom-plugins\/","title":{"rendered":"Figma 2026: code layers, animations, and AI for custom plugins"},"content":{"rendered":"<h2>Cosa \u00e8 cambiato nell&#8217;aggiornamento Figma di giugno 2026<\/h2>\n<p>On June 24, 2026, Figma announced a significant update to its platform. As reported by <a href=\"https:\/\/techcrunch.com\/2026\/06\/24\/figma-adds-code-layers-support-for-animations-more-ai-features-in-new-update\/\" target=\"_blank\" rel=\"noopener noreferrer\">TechCrunch<\/a>, le novit\u00e0 si articolano su tre assi principali. Primo: l&#8217;introduzione di un <strong>code layer<\/strong> native. Second: support for <strong>motion and shaders<\/strong> direttamente nell&#8217;editor. Terzo: la capacit\u00e0 di generare <strong>custom plugin via AI<\/strong>.<\/p>\n<p>Pertanto, non si tratta di aggiornamenti estetici o marginali. Al contrario, queste funzionalit\u00e0 intervengono su nodi critici del workflow tra design e sviluppo. Inoltre, arrivano in un momento in cui molte aziende italiane stanno ripensando i propri processi di produzione digitale.<\/p>\n<h2>Il code layer: less friction between designers and developers<\/h2>\n<p>Il code layer \u00e8 probabilmente la novit\u00e0 pi\u00f9 attesa dai team che lavorano in ambienti <strong>design-to-development<\/strong>. In sostanza, consente ai designer di annotare e strutturare le specifiche tecniche direttamente all&#8217;interno del file Figma. Di conseguenza, il developer non deve pi\u00f9 interpretare visivamente il layout per estrarne le propriet\u00e0 CSS o i token di stile.<\/p>\n<p>Infatti, uno dei colli di bottiglia pi\u00f9 comuni nei team digitali \u00e8 proprio il <em>handoff<\/em>: il momento in cui il design viene consegnato allo sviluppatore. Tuttavia, con il code layer integrato, questa fase diventa pi\u00f9 fluida. Ogni componente porta con s\u00e9 le informazioni tecniche necessarie, senza necessit\u00e0 di documentazione separata.<\/p>\n<p>For digital managers of SMEs and mid-market companies, this translates to <strong>tempi di sviluppo pi\u00f9 brevi<\/strong> e in una riduzione degli errori di implementazione. Inoltre, facilita l&#8217;adozione di sistemi di design scalabili, come i <a href=\"https:\/\/www.figma.com\/design-systems\/\" target=\"_blank\" rel=\"noopener noreferrer\">design system<\/a> structured.<\/p>\n<h2>Motion and native shaders: animations without external tools<\/h2>\n<p>Support for <strong>motion and shaders<\/strong> rappresenta un passo importante verso l&#8217;autonomia del designer. Fino a oggi, chi voleva integrare animazioni nei prototipi doveva affidarsi a plugin di terze parti o a tool separati come After Effects, Lottie o Rive. Tuttavia, questo frammentava il flusso di lavoro e aumentava i tempi di produzione.<\/p>\n<p>Con l&#8217;aggiornamento di giugno 2026, Figma integra queste capacit\u00e0 direttamente nell&#8217;editor. Pertanto, \u00e8 possibile progettare micro-interazioni e animazioni di interfaccia senza uscire dall&#8217;ambiente di lavoro principale. In particolare, i team che producono <strong>landing pages, mobile apps, and interactive web interfaces<\/strong> beneficiano di un processo pi\u00f9 compatto.<\/p>\n<p>Analogamente, il supporto agli shader apre scenari interessanti per chi lavora su interfacce visivamente ricche. Ad esempio, effetti di sfondo dinamici o transizioni avanzate diventano prototipabili direttamente in Figma. Cos\u00ec, la distanza tra il prototipo e il prodotto finale si riduce ulteriormente.<\/p>\n<p>Da un punto di vista strategico, questa evoluzione \u00e8 coerente con quanto <a href=\"https:\/\/www.gartner.com\/en\/information-technology\/insights\/design-tools\" target=\"_blank\" rel=\"noopener noreferrer\">Gartner<\/a> had indicated as a trend: the convergence of design tools toward integrated production environments.<\/p>\n<h2>AI for custom plugins: tailored team automation<\/h2>\n<p>La terza novit\u00e0 \u00e8 forse quella con le implicazioni pi\u00f9 ampie nel medio periodo. Figma introduce la possibilit\u00e0 di <strong>create custom plugins with AI<\/strong>. In pratica, un designer o un product manager pu\u00f2 descrivere in linguaggio naturale una funzione desiderata, e l&#8217;AI genera il plugin corrispondente.<\/p>\n<p>Dunque, non \u00e8 pi\u00f9 necessario avere competenze di sviluppo per estendere le funzionalit\u00e0 di Figma. Questo abbassa significativamente la barriera all&#8217;automazione dei processi creativi. Inoltre, consente a ogni team di costruire strumenti su misura per il proprio workflow specifico.<\/p>\n<p>For example, a team that manages visual campaigns for <a href=\"https:\/\/shm.studio\/en\/servizi\/digital-marketing\/linkedin-campaigns\/\">LinkedIn<\/a> Could you create a plugin that automatically resizes asset formats according to platform specifications? Likewise, those who produce content for <a href=\"https:\/\/shm.studio\/en\/servizi\/digital-marketing\/google-ads-campaigns\/\">Google Ads<\/a> it could automate the generation of creative variations.<\/p>\n<p>According to <a href=\"https:\/\/hbr.org\/2025\/11\/how-ai-is-reshaping-creative-workflows\" target=\"_blank\" rel=\"noopener noreferrer\">Harvard Business Review<\/a>, l&#8217;automazione dei task ripetitivi nei workflow creativi \u00e8 una delle leve pi\u00f9 efficaci per aumentare la produttivit\u00e0 dei team digitali. Pertanto, questa funzionalit\u00e0 di Figma si inserisce in una tendenza consolidata.<\/p>\n<h2>Immediate impact on Italian creative teams<\/h2>\n<p>For marketing managers and digital leaders in Italian companies, this update has concrete implications. First of all, those who use Figma as a central tool in their <a href=\"https:\/\/shm.studio\/en\/servizi\/web\/\">web development process<\/a> pu\u00f2 aspettarsi un guadagno di efficienza misurabile. Inoltre, chi sta valutando l&#8217;adozione di Figma ha ora argomenti pi\u00f9 forti a favore della scelta.<\/p>\n<p>Tuttavia, \u00e8 importante distinguere tra le funzionalit\u00e0 immediatamente operative e quelle che richiedono un periodo di adozione. Il code layer, ad esempio, richiede che il team designer adotti nuove convenzioni di annotazione. Di conseguenza, \u00e8 necessario pianificare una fase di onboarding interno prima di beneficiarne pienamente.<\/p>\n<p>We of <a href=\"https:\/\/shm.studio\/en\/\">SHM Studio<\/a> lavoriamo quotidianamente con team che gestiscono la produzione di interfacce digitali, dalla fase di concept fino al rilascio. Pertanto, comprendiamo quanto questi aggiornamenti possano incidere sulla qualit\u00e0 e sulla velocit\u00e0 dei progetti. In particolare, la riduzione del friction nel handoff \u00e8 un tema che emerge regolarmente nelle analisi di processo che conduciamo per i nostri clienti.<\/p>\n<h2>What the numbers don't say yet<\/h2>\n<p>\u00c8 presto per avere dati consolidati sull&#8217;adozione di queste funzionalit\u00e0. Tuttavia, alcune considerazioni strutturali sono gi\u00e0 possibili. Il mercato dei design tool \u00e8 in una fase di consolidamento accelerato. Figma, dopo il tentativo di acquisizione da parte di Adobe fallito nel 2023, ha accelerato il proprio sviluppo autonomo. Quindi, questo aggiornamento va letto anche come segnale di posizionamento competitivo.<\/p>\n<p>Inoltre, la direzione verso cui si muove Figma \u2014 integrazione di AI, codice e animazioni in un unico ambiente \u2014 \u00e8 coerente con la visione di un <strong>Design tool as a production platform<\/strong>, non solo di prototipazione. Questo cambia il profilo delle competenze richieste ai designer. In seguito, \u00e8 probabile che emerga una figura ibrida, capace di lavorare sia sul piano visivo che su quello tecnico.<\/p>\n<p>For companies investing in <a href=\"https:\/\/shm.studio\/en\/servizi\/ai\/\">AI solutions<\/a> per i propri processi digitali, questa evoluzione di Figma \u00e8 un segnale da non ignorare. Altres\u00ec, chi gestisce team distribuiti o lavora con agenzie esterne trover\u00e0 nel code layer un elemento di standardizzazione utile.<\/p>\n<h2>Cosa fare ora: tre priorit\u00e0 per i responsabili digital<\/h2>\n<p>Alla luce di questo aggiornamento, \u00e8 utile identificare alcune priorit\u00e0 operative. Prima di tutto, \u00e8 consigliabile verificare la versione di Figma in uso all&#8217;interno del proprio team e accertarsi che le nuove funzionalit\u00e0 siano accessibili. Inoltre, vale la pena pianificare una sessione di formazione interna dedicata al code layer.<\/p>\n<p>In secondo luogo, \u00e8 opportuno mappare i workflow attuali e identificare dove il supporto alle animazioni native potrebbe eliminare passaggi ridondanti. Ad esempio, se il team utilizza tool separati per la prototipazione animata, \u00e8 il momento di valutare una migrazione verso un flusso pi\u00f9 integrato.<\/p>\n<p>Infine, la funzionalit\u00e0 AI per i plugin merita una sperimentazione mirata. Pertanto, \u00e8 utile identificare due o tre task ripetitivi nel workflow creativo e testare la generazione di plugin dedicati. Cos\u00ec, si acquisisce familiarit\u00e0 con lo strumento prima di adottarlo su scala.<\/p>\n<p>Per approfondire come ottimizzare i processi di produzione digitale, \u00e8 possibile consultare le risorse di <a href=\"https:\/\/shm.studio\/en\/blog\/\">SHM Studio on the blog<\/a> to explore our <a href=\"https:\/\/shm.studio\/en\/servizi\/digital-marketing\/\">digital marketing services<\/a>. Chi desidera un confronto diretto pu\u00f2 contattarci attraverso la <a href=\"https:\/\/shm.studio\/en\/contacts\/\">Contact Us<\/a>.<\/p>\n<h2>Perspectives: Towards Design Tools as Unified Production Environments<\/h2>\n<p>Nel breve periodo, l&#8217;aggiornamento di Figma consolida la sua posizione come strumento di riferimento per i team che lavorano su interfacce digitali. Tuttavia, la vera trasformazione \u00e8 strutturale. Infatti, la convergenza tra design, codice e AI in un unico ambiente ridefinisce il confine tra il lavoro del designer e quello dello sviluppatore.<\/p>\n<p>Per il 2027-2028, \u00e8 ragionevole attendersi un&#8217;ulteriore integrazione tra Figma e i principali framework di sviluppo front-end. Di conseguenza, chi investe oggi nell&#8217;adozione di questi strumenti costruisce un vantaggio competitivo che sar\u00e0 sempre pi\u00f9 difficile da recuperare per chi rimane indietro.<\/p>\n<p>Who manages the <a href=\"https:\/\/shm.studio\/en\/servizi\/seo\/\">online presence<\/a> di un&#8217;azienda, o \u00e8 responsabile della <a href=\"https:\/\/shm.studio\/en\/servizi\/seo\/copywriting\/\">digital content production<\/a>, ha tutto l&#8217;interesse a seguire questa evoluzione con attenzione. Perci\u00f2, aggiornare le proprie competenze e quelle del team non \u00e8 pi\u00f9 un investimento discrezionale, ma una necessit\u00e0 operativa.<\/p>","protected":false},"excerpt":{"rendered":"<p>Figma updates its platform with code layers, motion and shader support, and AI for custom plugins. Concrete impact on Italian creative teams.<\/p>","protected":false},"author":7,"featured_media":24166,"template":"","meta":{"_acf_changed":false,"footnotes":""},"tags":[],"news-category":[166],"class_list":["post-24170","news","type-news","status-publish","has-post-thumbnail","hentry","news-category-web","entry"],"acf":{"tldr_content":"<p>Figma ha rilasciato un aggiornamento significativo nella seconda met\u00e0 di giugno 2026. Le novit\u00e0 principali sono tre: un nuovo <strong>code layer<\/strong> integrato nell'interfaccia, il supporto nativo a <strong>motion e shader<\/strong>, e la possibilit\u00e0 di creare <strong>plugin personalizzati tramite AI<\/strong>. Inoltre, queste funzionalit\u00e0 agiscono in sinergia, riducendo i passaggi tra design e sviluppo.<\/p><p>Per i team creative delle PMI italiane, l'impatto \u00e8 immediato. Pertanto, chi gestisce workflow tra designer e developer pu\u00f2 aspettarsi meno attrito nella consegna degli asset. In particolare, il code layer elimina la necessit\u00e0 di esportare manualmente specifiche tecniche verso i developer. Allo stesso modo, il supporto alle animazioni riduce la dipendenza da tool esterni come After Effects o Lottie per prototipi interattivi.<\/p><p>Noi di <strong>SHM Studio<\/strong> monitoriamo questa evoluzione con attenzione. Infatti, la convergenza tra design tool e generazione di codice \u00e8 una delle direttrici pi\u00f9 rilevanti per chi progetta interfacce web e digitali nel 2026. Di conseguenza, aggiornare i propri processi interni non \u00e8 pi\u00f9 un'opzione, ma una priorit\u00e0 competitiva. In sintesi, questo aggiornamento di Figma merita analisi approfondita da parte di ogni responsabile digital.<\/p>"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Figma 2026: code layers, animazioni e AI per plugin custom<\/title>\n<meta name=\"description\" content=\"Figma aggiorna la piattaforma con code layers, supporto a motion e shader, e AI per plugin custom. Impatto concreto sui team creative italiani.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/shm.studio\/en\/news\/figma-2026-code-layers-animations-for-custom-plugins\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Figma 2026: code layers, animazioni e AI per plugin custom\" \/>\n<meta property=\"og:description\" content=\"Figma aggiorna la piattaforma con code layers, supporto a motion e shader, e AI per plugin custom. Impatto concreto sui team creative italiani.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/shm.studio\/en\/news\/figma-2026-code-layers-animations-for-custom-plugins\/\" \/>\n<meta property=\"og:site_name\" content=\"SHM Studio\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"6 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Figma 2026: code layers, animations, and AI for custom plugins","description":"Figma updates its platform with code layers, motion and shader support, and AI for custom plugins. Concrete impact on Italian creative teams.","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:\/\/shm.studio\/en\/news\/figma-2026-code-layers-animations-for-custom-plugins\/","og_locale":"en_US","og_type":"article","og_title":"Figma 2026: code layers, animazioni e AI per plugin custom","og_description":"Figma aggiorna la piattaforma con code layers, supporto a motion e shader, e AI per plugin custom. Impatto concreto sui team creative italiani.","og_url":"https:\/\/shm.studio\/en\/news\/figma-2026-code-layers-animations-for-custom-plugins\/","og_site_name":"SHM Studio","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/shm.studio\/news\/figma-2026-code-layers-animazioni-ai-plugin-custom\/","url":"https:\/\/shm.studio\/news\/figma-2026-code-layers-animazioni-ai-plugin-custom\/","name":"Figma 2026: code layers, animations, and AI for custom plugins","isPartOf":{"@id":"https:\/\/shm.studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/shm.studio\/news\/figma-2026-code-layers-animazioni-ai-plugin-custom\/#primaryimage"},"image":{"@id":"https:\/\/shm.studio\/news\/figma-2026-code-layers-animazioni-ai-plugin-custom\/#primaryimage"},"thumbnailUrl":"https:\/\/shm.studio\/wp-content\/uploads\/2026\/06\/figma-code-layers-animazioni-ai-plugin-2026.jpg","datePublished":"2026-06-25T08:02:35+00:00","description":"Figma updates its platform with code layers, motion and shader support, and AI for custom plugins. Concrete impact on Italian creative teams.","breadcrumb":{"@id":"https:\/\/shm.studio\/news\/figma-2026-code-layers-animazioni-ai-plugin-custom\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/shm.studio\/news\/figma-2026-code-layers-animazioni-ai-plugin-custom\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/shm.studio\/news\/figma-2026-code-layers-animazioni-ai-plugin-custom\/#primaryimage","url":"https:\/\/shm.studio\/wp-content\/uploads\/2026\/06\/figma-code-layers-animazioni-ai-plugin-2026.jpg","contentUrl":"https:\/\/shm.studio\/wp-content\/uploads\/2026\/06\/figma-code-layers-animazioni-ai-plugin-2026.jpg","width":1536,"height":1024,"caption":"Figma aggiorna il workflow creativo con code layers, motion e AI per plugin personalizzati"},{"@type":"BreadcrumbList","@id":"https:\/\/shm.studio\/news\/figma-2026-code-layers-animazioni-ai-plugin-custom\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/shm.studio\/"},{"@type":"ListItem","position":2,"name":"News","item":"https:\/\/shm.studio\/news\/"},{"@type":"ListItem","position":3,"name":"Figma 2026: code layers, animazioni e AI per plugin custom"}]},{"@type":"WebSite","@id":"https:\/\/shm.studio\/#website","url":"https:\/\/shm.studio\/","name":"SHM Studio","description":"Your digital partner","publisher":{"@id":"https:\/\/shm.studio\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/shm.studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/shm.studio\/#organization","name":"SHM Studio","url":"https:\/\/shm.studio\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/shm.studio\/#\/schema\/logo\/image\/","url":"https:\/\/shm.studio\/wp-content\/uploads\/2026\/06\/shmlogotipo.svg","contentUrl":"https:\/\/shm.studio\/wp-content\/uploads\/2026\/06\/shmlogotipo.svg","caption":"SHM Studio"},"image":{"@id":"https:\/\/shm.studio\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/shm.studio\/en\/wp-json\/wp\/v2\/news\/24170","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shm.studio\/en\/wp-json\/wp\/v2\/news"}],"about":[{"href":"https:\/\/shm.studio\/en\/wp-json\/wp\/v2\/types\/news"}],"author":[{"embeddable":true,"href":"https:\/\/shm.studio\/en\/wp-json\/wp\/v2\/users\/7"}],"version-history":[{"count":0,"href":"https:\/\/shm.studio\/en\/wp-json\/wp\/v2\/news\/24170\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/shm.studio\/en\/wp-json\/wp\/v2\/media\/24166"}],"wp:attachment":[{"href":"https:\/\/shm.studio\/en\/wp-json\/wp\/v2\/media?parent=24170"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shm.studio\/en\/wp-json\/wp\/v2\/tags?post=24170"},{"taxonomy":"news-category","embeddable":true,"href":"https:\/\/shm.studio\/en\/wp-json\/wp\/v2\/news-category?post=24170"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}