Understack
Parliamo di un progetto

Figma to WordPress

Il tuo designer consegna il Figma. Noi consegniamo il sito.

Figma to WordPress per agenzie: trasformiamo il file di design in un tema WordPress su misura, fedele al layout e costruito perché il cliente lo aggiorni da solo. In white label, con il nome della tua agenzia sul lavoro.

Chiedi un preventivo Tutti i servizi
Il file di design che diventa sito: il frame Desktop 1440 con il blocco selezionato diventa un template Twig, riga per riga, e il template diventa la stessa pagina nel browser, con la stessa misura. Home.fig agenzia.it LIVELLI PROPRIETÀ DESKTOP — 1440 1200 × 420 home.twig 1 2 3 4 5 6 7 8 9 10 11 12 {% extends 'base.twig' %} {% block content %} <section class="hero"> {# 1200 × 420 #} <h1>{{ hero.titolo }}</h1> <p>{{ hero.testo }}</p> {% include 'bottone.twig' with { testo: hero.azione } only %} </section> {% for scheda in schede %} {% include 'scheda.twig' with scheda only %} {% endfor %} {% endblock %}

Un buon file Figma si rovina in un modo solo: approssimandolo.

Spaziature arrotondate a occhio, lo stesso componente ricostruito tre volte in tre modi diversi, un tema acquistato piegato fino a somigliare al progetto. Il sito va online, ma non è quello che il cliente ha approvato — e il tuo designer se ne accorge per primo. Noi partiamo dal file: stili, componenti e varianti diventano token e componenti del tema, una volta sola. Quello che nel Figma è uguale, nel codice è lo stesso componente.

Se nel file manca qualcosa — uno stato, una versione mobile, un caso limite — lo chiediamo prima di scrivere codice, non a metà lavoro.

Cosa consegniamo

Un tema, non una serie di pagine: il layout approvato e la struttura per mantenerlo nel tempo.

  • 01

    Tema WordPress su misura

    Costruito sul design, non adattato da un tema esistente. Timber e Twig separano i dati dal markup: il codice resta leggibile anche per chi lo riprenderà dopo di noi.

  • 02

    Design token dal file

    Colori, tipografia e spaziature del Figma diventano token nel CSS. Una modifica al sistema si fa in un punto solo e vale ovunque.

  • 03

    Componenti, non pagine

    Ogni componente del file diventa un componente del tema, con le sue varianti. Le pagine nuove si compongono con quelli, senza riscrivere nulla.

  • 04

    Backoffice pensato per il cliente

    Campi ACF strutturati o blocchi Gutenberg, a seconda del progetto. Il cliente aggiorna testi e immagini; il layout resta protetto.

  • 05

    Responsive e accessibile

    Se il file ha la versione mobile la seguiamo; se non ce l’ha, te la proponiamo prima di costruirla. Contrasto, focus e navigazione da tastiera fanno parte della consegna.

  • 06

    Repository e staging

    Codice versionato su Git, anche nel tuo repository se preferisci, e uno staging dove tu e il cliente verificate tutto prima della pubblicazione.

Come lavoriamo su un file Figma

Quattro passaggi. Il sito arriva in produzione solo dopo che l’hai approvato sullo staging.

  1. Lettura del file

    Controlliamo componenti, stili, stati e versioni mobile. Quello che manca lo segnaliamo subito, con un elenco preciso.

  2. Sistema e componenti

    Prima i token e i componenti, poi le pagine. È il passaggio che rende il sito coerente e veloce da estendere.

  3. Staging e revisione

    Il sito gira su un ambiente separato. Tu e il cliente lo provate lì, e le correzioni si fanno lì.

  4. Pubblicazione

    In produzione va solo la versione approvata, con un deploy deliberato. Ti consegniamo accessi e documentazione.

Con cosa lo costruiamo

Lo stesso stack di questo sito. Quando il progetto o il tuo workflow chiedono altro, ne parliamo prima.

  • Figma
  • WordPress
  • PHP
  • Timber
  • Twig
  • ACF Pro
  • Tailwind CSS
  • Vite
  • Git

Domande frequenti

  1. Serve un file Figma completo?
    Serve un file con le pagine principali e i componenti. Se mancano stati, casi limite o la versione mobile, li segnaliamo in lettura e decidiamo insieme se li disegna il tuo team o li proponiamo noi.
  2. Non abbiamo ancora un design. Potete farlo voi?
    Sì. Progettiamo l’interfaccia in Figma, la approvi tu con il cliente, e da lì il passaggio al tema è lo stesso. In white label, come il resto del lavoro.
  3. Il risultato sarà identico al design?
    Sì, sulle misure del file. Dove un dettaglio non regge nel browser — un testo più lungo del previsto, una lingua diversa — te lo diciamo prima e ti proponiamo come trattarlo.
  4. Usate un tema già pronto o un page builder?
    No. Il tema nasce dal tuo design. Se il workflow della tua agenzia richiede Elementor possiamo lavorarci, ma per un Figma su misura lo sconsigliamo, e ti spieghiamo perché.
  5. Il cliente saprà che l’avete sviluppato voi?
    No. Lavoriamo in white label: nel codice, nella documentazione e nelle comunicazioni compare la tua agenzia. Se serve, firmiamo un NDA prima di vedere il file.
  6. In quanto tempo è pronto?
    Dipende dal numero di template e dalle integrazioni, e lo sappiamo con precisione solo dopo aver letto il file. Ti diamo una stima con il perimetro scritto, non un numero valido per tutti.

Lo stesso team, per il resto del lavoro.

  • 01

    Tema WordPress su misura

    Markup scritto per il progetto, contenuti strutturati e un backoffice che il cliente usa senza rompere il layout.

  • 02

    Plugin WordPress su misura

    Integrazioni, API e logiche di business che un plugin generico copre solo a metà.

  • 03

    Sviluppo WooCommerce

    E-commerce su misura: listini, regole di prezzo, integrazioni con gestionale, spedizioni e pagamenti.

  • 04

    Sviluppo PrestaShop

    Moduli e temi su misura, migrazioni a PrestaShop 8, integrazioni con gestionale e fatturazione elettronica.

  • 05

    Sviluppatore WordPress dedicato

    Capacità di sviluppo riservata alla tua agenzia ogni mese, dentro i tuoi strumenti e i tuoi processi.

  • 06

    Manutenzione WordPress

    Aggiornamenti provati prima di pubblicarli, backup, sicurezza e monitoraggio, con il nome della tua agenzia.

  • 07

    Hosting gestito

    Server dedicati con lo stack ottimizzato per WordPress, configurati e mantenuti da chi costruisce i siti.