[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-version":3,"blog-doc-it-figma-to-wordpress":4},"2.2.0",{"id":5,"title":6,"body":7,"category":457,"credit":458,"date":461,"description":462,"extension":463,"faq":464,"image":477,"imageAlt":478,"keyword":479,"meta":480,"navigation":481,"path":482,"related":483,"seo":486,"seoTitle":487,"service":488,"slug":489,"stem":490,"tags":491,"__hash__":496},"blog\u002Fit\u002Ftips\u002F2026-07-16-figma-to-wordpress.md","Da Figma a WordPress: dai token del design a theme.json e blocchi, senza perdere fedeltà",{"type":8,"value":9,"toc":445},"minimark",[10,14,19,22,57,60,64,72,102,105,109,112,144,147,151,158,162,165,182,186,189,193,196,228,231,235,238,386,393,404,408,414,417,421,429,441],[11,12,13],"p",{},"Gran parte del mio lavoro con le agenzie comincia da un file Figma. Il problema non è far somigliare il sito al design nella schermata a 1440 pixel: è farlo restare fedele a 375, a 1920, con un titolo di tre righe, con un'immagine mancante, nello stato di errore di un modulo, e dopo che il cliente ha modificato la pagina per sei mesi. Questo è il metodo con cui porto un design in WordPress senza perderlo per strada.",[15,16,18],"h2",{"id":17},"prima-del-codice-leggere-il-file","Prima del codice: leggere il file",[11,20,21],{},"Una lettura tecnica del file Figma prima di stimare evita metà dei problemi. Cosa controllo:",[23,24,25,33,39,45,51],"ul",{},[26,27,28,32],"li",{},[29,30,31],"strong",{},"variabili e stili",": colori, tipografia, spaziature e raggi sono definiti come variabili, o ogni elemento ha valori propri?",[26,34,35,38],{},[29,36,37],{},"componenti e varianti",": pulsanti, card e campi sono componenti con varianti e stati, o copie scollegate?",[26,40,41,44],{},[29,42,43],{},"auto layout",": gli elementi sono impaginati con auto layout, che si traduce direttamente in flexbox, o posizionati a mano?",[26,46,47,50],{},[29,48,49],{},"larghezze di riferimento",": esiste almeno la versione mobile, e cosa succede tra una larghezza e l'altra?",[26,52,53,56],{},[29,54,55],{},"stati e casi limite",": hover, focus, errore, vuoto, caricamento, testi lunghi.",[11,58,59],{},"Quello che manca si segnala subito all'agenzia, con domande precise. Indovinare un comportamento non disegnato è la prima fonte di revisioni.",[15,61,63],{"id":62},"dai-token-a-themejson","Dai token a theme.json",[11,65,66,67,71],{},"Le variabili di Figma diventano i token del tema. In WordPress il posto giusto è ",[68,69,70],"code",{},"theme.json",":",[23,73,74,80,90,96],{},[26,75,76,79],{},[29,77,78],{},"palette"," con i colori del design, e disattivazione dei colori personalizzati, così l'editor non permette tinte fuori sistema;",[26,81,82,85,86,89],{},[29,83,84],{},"tipografia",": famiglie, dimensioni con valori fluidi (",[68,87,88],{},"clamp()",") che interpolano tra mobile e desktop invece di saltare a ogni breakpoint;",[26,91,92,95],{},[29,93,94],{},"spaziature"," come scala, usata da blocchi e template;",[26,97,98,101],{},[29,99,100],{},"larghezze di contenuto"," e larghezze estese.",[11,103,104],{},"Il vantaggio è doppio: il frontend usa variabili CSS generate da un'unica fonte, e l'editor mostra al redattore solo le scelte coerenti con il design.",[15,106,108],{"id":107},"da-componenti-figma-a-blocchi","Da componenti Figma a blocchi",[11,110,111],{},"Ogni componente ricorrente diventa un blocco o un pattern:",[23,113,114,124,134],{},[26,115,116,119,120,123],{},[29,117,118],{},"componenti semplici"," (pulsanti, citazioni) come ",[29,121,122],{},"stili di blocco"," su blocchi nativi;",[26,125,126,129,130,133],{},[29,127,128],{},"sezioni ricorrenti"," come ",[29,131,132],{},"pattern"," bloccati nella struttura e liberi nei contenuti;",[26,135,136,139,140,143],{},[29,137,138],{},"componenti con dati"," (schede servizio, membri del team, eventi) come ",[29,141,142],{},"blocchi su misura"," con campi definiti, alimentati da tipi di contenuto dedicati.",[11,145,146],{},"Le varianti di Figma diventano attributi del blocco, non classi aggiunte a mano dal redattore.",[15,148,150],{"id":149},"layout-auto-layout-grid-e-container-query","Layout: auto layout, grid e container query",[11,152,153,154,157],{},"L'auto layout si traduce in flexbox con gap; le griglie di Figma in CSS Grid. Per i componenti che compaiono in contesti di larghezza diversa (una card in una colonna stretta o in una sezione larga) uso le ",[29,155,156],{},"container query",": il componente si adatta allo spazio che ha, non alla larghezza della finestra. È la differenza tra un componente davvero riutilizzabile e uno che funziona solo dove è stato disegnato.",[15,159,161],{"id":160},"dove-si-perde-la-fedeltà","Dove si perde la fedeltà",[11,163,164],{},"Gli errori che vedo più spesso nei passaggi fatti di fretta:",[23,166,167,170,173,176,179],{},[26,168,169],{},"dimensioni fisse in pixel copiate dal file, che si rompono a qualunque altra larghezza;",[26,171,172],{},"font caricati con varianti in più o senza le metriche giuste, con spostamenti al caricamento;",[26,174,175],{},"immagini senza proporzioni definite e senza le dimensioni responsive generate dal tema;",[26,177,178],{},"stati di focus e di errore mai disegnati e quindi mai sviluppati;",[26,180,181],{},"un page builder usato per «fare prima», che produce un markup lontano dal design e affida al redattore la coerenza.",[15,183,185],{"id":184},"verifica-con-anteprime","Verifica con anteprime",[11,187,188],{},"Lavoro su un ambiente di staging con anteprime condivise: l'agenzia confronta il sito con il file mentre si costruisce, non alla fine. La verifica finale comprende le larghezze intermedie, i casi limite, i Core Web Vitals e un controllo di accessibilità su contrasti, focus e moduli.",[15,190,192],{"id":191},"la-consegna-al-redattore","La consegna al redattore",[11,194,195],{},"Un tema fedele il giorno del lancio può perdere fedeltà in sei mesi, se il pannello lascia troppa libertà. Per questo la consegna comprende scelte precise:",[23,197,198,204,210,216,222],{},[26,199,200,203],{},[29,201,202],{},"pattern bloccati"," nella struttura e liberi nei contenuti, così una sezione non si smonta trascinando un blocco;",[26,205,206,209],{},[29,207,208],{},"blocchi disponibili limitati"," per tipo di contenuto: in una scheda servizio non serve l'intero catalogo dei blocchi;",[26,211,212,215],{},[29,213,214],{},"ruoli"," con permessi coerenti: chi scrive articoli non modifica i template;",[26,217,218,221],{},[29,219,220],{},"campi con indicazioni"," su lunghezze consigliate di titoli e testi, che sono i primi a rompere un layout;",[26,223,224,227],{},[29,225,226],{},"una breve guida"," con le regole del design applicate ai contenuti: formati delle immagini, uso dei titoli, testi alternativi.",[11,229,230],{},"È il lavoro meno visibile del passaggio da Figma a WordPress, ed è quello che fa la differenza tra un sito che resta come è stato disegnato e uno che si degrada pagina dopo pagina.",[15,232,234],{"id":233},"esempio-minimo-di-token-in-themejson","Esempio minimo di token in theme.json",[11,236,237],{},"Questo esempio illustrativo definisce un colore condiviso e impedisce la scelta libera dei colori nei controlli che rispettano queste impostazioni:",[239,240,245],"pre",{"className":241,"code":242,"language":243,"meta":244,"style":244},"language-json shiki shiki-themes github-light github-dark","{\n  \"version\": 3,\n  \"settings\": {\n    \"color\": {\n      \"custom\": false,\n      \"defaultPalette\": false,\n      \"palette\": [\n        { \"slug\": \"brand\", \"name\": \"Brand\", \"color\": \"#2346c8\" }\n      ]\n    }\n  }\n}\n","json","",[68,246,247,256,272,281,289,302,314,323,362,368,374,380],{"__ignoreMap":244},[248,249,252],"span",{"class":250,"line":251},"line",1,[248,253,255],{"class":254},"sVt8B","{\n",[248,257,259,263,266,269],{"class":250,"line":258},2,[248,260,262],{"class":261},"sj4cs","  \"version\"",[248,264,265],{"class":254},": ",[248,267,268],{"class":261},"3",[248,270,271],{"class":254},",\n",[248,273,275,278],{"class":250,"line":274},3,[248,276,277],{"class":261},"  \"settings\"",[248,279,280],{"class":254},": {\n",[248,282,284,287],{"class":250,"line":283},4,[248,285,286],{"class":261},"    \"color\"",[248,288,280],{"class":254},[248,290,292,295,297,300],{"class":250,"line":291},5,[248,293,294],{"class":261},"      \"custom\"",[248,296,265],{"class":254},[248,298,299],{"class":261},"false",[248,301,271],{"class":254},[248,303,305,308,310,312],{"class":250,"line":304},6,[248,306,307],{"class":261},"      \"defaultPalette\"",[248,309,265],{"class":254},[248,311,299],{"class":261},[248,313,271],{"class":254},[248,315,317,320],{"class":250,"line":316},7,[248,318,319],{"class":261},"      \"palette\"",[248,321,322],{"class":254},": [\n",[248,324,326,329,332,334,338,341,344,346,349,351,354,356,359],{"class":250,"line":325},8,[248,327,328],{"class":254},"        { ",[248,330,331],{"class":261},"\"slug\"",[248,333,265],{"class":254},[248,335,337],{"class":336},"sZZnC","\"brand\"",[248,339,340],{"class":254},", ",[248,342,343],{"class":261},"\"name\"",[248,345,265],{"class":254},[248,347,348],{"class":336},"\"Brand\"",[248,350,340],{"class":254},[248,352,353],{"class":261},"\"color\"",[248,355,265],{"class":254},[248,357,358],{"class":336},"\"#2346c8\"",[248,360,361],{"class":254}," }\n",[248,363,365],{"class":250,"line":364},9,[248,366,367],{"class":254},"      ]\n",[248,369,371],{"class":250,"line":370},10,[248,372,373],{"class":254},"    }\n",[248,375,377],{"class":250,"line":376},11,[248,378,379],{"class":254},"  }\n",[248,381,383],{"class":250,"line":382},12,[248,384,385],{"class":254},"}\n",[11,387,388,389,392],{},"Il token corrisponde alla variabile ",[68,390,391],{},"--wp--preset--color--brand",". Non è un sistema di autorizzazione: blocchi di terze parti, stili personalizzati e ruoli con privilegi elevati possono introdurre altre scelte. Completo quindi il tema con blocchi consentiti, permessi e blocchi della struttura dove necessari. Il collaudo comprende un contenuto lungo, una traduzione più estesa e un’immagine assente, anche alle larghezze intermedie del layout.",[11,394,395,396,403],{},"Riferimento: ",[397,398,402],"a",{"href":399,"rel":400},"https:\u002F\u002Fdeveloper.wordpress.org\u002Fblock-editor\u002Freference-guides\u002Ftheme-json-reference\u002F",[401],"nofollow","theme.json, documentazione WordPress",".",[15,405,407],{"id":406},"come-la-vedo-io","Come la vedo io",[11,409,410,411,413],{},"Il passaggio da Figma al codice è la parte del lavoro che preferisco, e lo faccio con la stessa logica qualunque sia la destinazione. Quando il cliente ha bisogno di un pannello per gestire i contenuti, WordPress a blocchi con ",[68,412,70],{}," è un'ottima scelta: è così che ho realizzato il sito di Dotcampus, traducendo una grafica volutamente fuori dagli schemi in blocchi che il team aggiorna da solo, e il sito di Olio Intini, fedele alla grafica consegnata dal cliente.",[11,415,416],{},"Quando il pannello non serve, porto gli stessi token in un tema Tailwind per Nuxt.js, ed è ancora più diretto: le variabili di Figma diventano le variabili del tema, una per una. In entrambi i casi niente page builder: il design merita un codice scritto per lui.",[15,418,420],{"id":419},"perché-affidarlo-a-me","Perché affidarlo a me",[11,422,423,424,428],{},"Dal 1999 ho consegnato più di 300 progetti, gran parte dei quali nati da un design, e collaboro con più di 30 agenzie anche in ",[397,425,427],{"href":426},"\u002Fconsigli\u002Fwhite-label-sviluppo-web-agenzia-sviluppatore","white-label",". Sviluppo da Figma con token, blocchi su misura e anteprime condivise, e segnalo i problemi del file prima di stimare, non dopo.",[11,430,431,432,436,437,403],{},"Se hai un design da sviluppare, ",[397,433,435],{"href":434},"\u002Fcontatti","scrivimi",": in una chiacchierata di circa 20 minuti leggiamo il file insieme. Il servizio è in ",[397,438,440],{"href":439},"\u002Fservizi\u002Ffigma-to-wordpress","Da Figma a WordPress",[442,443,444],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":244,"searchDepth":258,"depth":258,"links":446},[447,448,449,450,451,452,453,454,455,456],{"id":17,"depth":258,"text":18},{"id":62,"depth":258,"text":63},{"id":107,"depth":258,"text":108},{"id":149,"depth":258,"text":150},{"id":160,"depth":258,"text":161},{"id":184,"depth":258,"text":185},{"id":191,"depth":258,"text":192},{"id":233,"depth":258,"text":234},{"id":406,"depth":258,"text":407},{"id":419,"depth":258,"text":420},"Design e sviluppo",{"name":459,"url":460},"Amsterdam City Archives","https:\u002F\u002Funsplash.com\u002F@amsterdamcityarchives","2026-07-16","Come si traduce un file Figma in un tema WordPress fedele: variabili e token in theme.json, auto layout in CSS, varianti in blocchi, tipografia fluida, stati e casi limite. Il metodo di uno sviluppatore.","md",[465,468,471,474],{"q":466,"a":467},"I plugin che convertono Figma in WordPress funzionano?","Producono un risultato visivamente simile in poco tempo, ma con markup posizionato in modo assoluto o annidato, poco accessibile, difficile da modificare e pesante. Vanno bene per un prototipo, non per un sito da mantenere.",{"q":469,"a":470},"Cosa deve contenere il file Figma per uno sviluppo fedele?","Variabili per colori, tipografia e spaziature, componenti con varianti e stati (hover, focus, errore, disabilitato), almeno due larghezze di riferimento e i casi limite: testi lunghi, immagini mancanti, liste vuote.",{"q":472,"a":473},"Il cliente potrà modificare le pagine senza rompere il design?","Sì, se il tema espone solo le scelte coerenti: theme.json limita colori, dimensioni e spaziature a quelle del design, e i blocchi su misura hanno campi definiti invece di libertà totale.",{"q":475,"a":476},"Si può partire dallo stesso Figma per un sito non WordPress?","Sì. I token del design si traducono altrettanto bene in un tema Tailwind per Nuxt.js o in qualsiasi sistema di componenti: la parte di analisi è identica.","\u002Fimages\u002Ftips\u002F2026-07-16-figma-to-wordpress.jpg","Disegno di progetto in blueprint di un edificio con finestre","figma to wordpress",{},true,"\u002Fit\u002Ftips\u002F2026-07-16-figma-to-wordpress",[484,485],"tema-e-plugin-wordpress-su-misura","tailwind-css-perche-lo-uso",{"title":6,"description":462},"Da Figma a WordPress: token, theme.json e blocchi su misura","figma-to-wordpress","da-figma-a-wordpress-e-token-design","it\u002Ftips\u002F2026-07-16-figma-to-wordpress",[492,493,70,494,495],"figma","wordpress","design system","agenzie","a9cJr43c3vcIAw0tOMI5s_xbwg_7ivUkkJ0YTZk5pTw"]