bg texture

Conversione Figma e XD in HTML/CSS

Tutti i servizi

Parlami del progetto

Raccontami cosa devi realizzare, modificare o far evolvere. Non serve avere già le specifiche tecniche.

Rispondo personalmente, di norma entro due giorni lavorativi · 347 0788683 · WhatsApp

Il frontend fatto da chi lo fa di mestiere

Se lo sviluppo frontend non è il vostro core, dare fuori la conversione del layout ha senso: è una fase delimitata, con un input chiaro e un output verificabile, e non richiede di aprire il vostro progetto a nessuno.

Ricevo il file Figma o Adobe XD e restituisco HTML semantico e CSS responsive, fedele al design, testato sui browser correnti e organizzato per essere integrato senza riscritture. Se il design ha stati, varianti o componenti ambigui, li chiedo prima invece di interpretarli.

Lavoro anche in white label, come parte del vostro team verso il cliente finale.

Come lavoro il file

Il processo, dalla ricezione del file alla consegna.

  • Lettura del design: griglia, spaziature, breakpoint, stati dei componenti. Quello che manca lo chiedo prima di iniziare, non a lavoro fatto.

  • HTML semantico: struttura corretta, landmark, gerarchia dei titoli, attributi di accessibilità dove servono.

  • CSS responsive: fedele al design ai breakpoint concordati, e sensato anche in quelli intermedi.

  • Test sui browser correnti: Chrome, Firefox, Safari ed Edge, desktop e mobile, su dispositivi reali.

  • Codice leggibile: classi con una logica, nessuna duplicazione, commentato dove serve. Deve poterlo mantenere chi non l'ha scritto.

  • Validazione W3C su richiesta, e controllo dei contrasti se l'accessibilità è un requisito.

  • Consegna: HTML, CSS, immagini ottimizzate e font in una struttura di cartelle ordinata. Su repository Git se preferite.

Perché darlo fuori

Cosa ci guadagna un'agenzia o uno studio a non farlo internamente.

  • Codice che si integra senza riscritture: pensato per essere messo dentro un backend o un CMS, non per stare da solo.

  • Il vostro team resta sul valore: backend, integrazioni, progetto. Lo slicing è tempo che non differenzia nessuno.

  • Fedeltà al design senza rincorse: meno cicli di revisione con il designer e meno correzioni dopo la consegna.

  • Compatibilità già verificata: browser e dispositivi li provo io, non il vostro cliente.

  • Assorbe i picchi: una consegna ravvicinata non obbliga a spostare persone dagli altri progetti.

Quando conviene

I casi in cui questa fase viene tipicamente esternalizzata.

Il frontend è la fase che si comprime peggio. Esternalizzarla libera giorni senza aggiungere persone in pianta stabile.

Molte varianti, animazioni, griglie irregolari: casi in cui un frontend approssimativo si paga in revisioni infinite.

Chi conosce il dominio del progetto è meglio impiegato sulle logiche che sulla codifica del layout.

Una fase che si può parallelizzare senza coordinamento continuo, perché input e output sono definiti.

Capita a studi di design e a software house orientate al backend: è una competenza a sé.

Domande che mi fanno spesso

Che file accetti?

Figma e Adobe XD. Anche Sketch o un PDF con le specifiche, ma in quel caso servono più informazioni su stati e breakpoint.

Cosa consegni?

HTML, CSS, immagini ottimizzate e font, in una struttura di cartelle ordinata. Su repository Git se preferite, con commit leggibili.

Il codice è responsive?

Sì, ai breakpoint che concordiamo. Se il design ne prevede due, gli intermedi li gestisco con criterio e vi mostro come si comportano prima della consegna.

Quanto tempo ci vuole?

Dipende dal numero di schermate e da quante varianti hanno. Mandate il file: lo guardo e vi dico tempi e costo, senza impegno.

Fai anche l'integrazione in CMS o il backend?

Questo servizio si ferma all'HTML/CSS. Ma integrazione in WordPress o Craft CMS e sviluppo backend li faccio: sono servizi a sé, e spesso si prendono insieme.

Lavori in white label?

Sì. Verso il cliente finale il lavoro è vostro: non compaio, non contatto il cliente e non firmo niente. È la modalità con cui lavoro con diverse agenzie da anni.