Da Figma a Bulma CSS: guida pratica alla conversione

Bulma occupa una posizione particolare rispetto a Bootstrap o Tailwind: è un framework di componenti completo, ma funziona solo a classi — niente JavaScript incluso, nessun passaggio di build. Questo lo rende un target pulito per un export da Figma, ma convertire a mano un design nel vocabolario di classi specifico di Bulma richiede comunque di conoscere bene la sua griglia, la spaziatura e i modificatori per scegliere ogni volta la classe giusta.

Perché la conversione manuale da Figma a Bulma è lenta

La griglia di Bulma basata su flexbox (columns, column, modificatori di dimensione is-*) si legge in modo semplice una volta scritta, ma arrivarci a mano da un frame Figma comporta lo stesso lavoro ripetitivo di traduzione di qualsiasi altro framework:

• Mappare l'Auto Layout sul sistema di colonne di Bulma. Una riga di elementi con spaziatura uniforme in Figma deve diventare la combinazione giusta di columns, column is-half/is-one-third e gestione del gap — decisa a occhio, frame per frame.
• Scegliere le classi modificatrici giuste. Bulma esprime la maggior parte dello stile tramite modificatori (is-primary, is-rounded, is-large), quindi bisogna tradurre un colore di riempimento o un raggio d'angolo in Figma nel "modificatore Bulma più vicino", e la corrispondenza non è sempre esatta.
• Ricostruire tipografia e spaziatura usando la scala propria di Bulma (title, subtitle, helper mb-*/mt-*) invece di copiare direttamente i valori in pixel.
• Ripetere tutto a ogni breakpoint, dato che gli helper responsive di Bulma (is-hidden-mobile, cambi di larghezza colonna) vanno aggiunti a mano per ogni dimensione di schermo del design.

Niente di tutto questo è concettualmente difficile, ma è esattamente il tipo di lavoro ripetitivo e carico di giudizio che genera piccole incoerenze in un design reale multi-pagina.

Come MarkupGen genera l'output Bulma da un design reale

MarkupGen elimina il passaggio di traduzione invece di limitarsi ad accelerarlo. Il flusso di lavoro è lo stesso qualunque sia il formato di output:

1. Esporta il frame da Figma con il plugin MarkupGen, che cattura struttura, stili e immagini insieme.
2. L'IA costruisce il markup a partire dalla struttura reale del design, non da un'approssimazione.
3. Perfeziona contenuto, font e layout visivamente nell'editor integrato prima di finalizzare qualsiasi cosa.
4. Esporta il pacchetto di codice finale in Bulma 1.0.2.

Al momento dell'export, l'Auto Layout e i valori di spaziatura di Figma vengono mappati sulle vere classi di griglia e sugli helper di Bulma invece di essere indovinati — una riga di elementi in Auto Layout diventa una struttura columns/column dimensionata di conseguenza, e padding, gap e allineamento si risolvono negli helper di spaziatura di Bulma invece che in stili inline. L'output resta privo di qualsiasi dipendenza JavaScript, in linea con la filosofia di Bulma, quindi non c'è nulla di extra da collegare perché il CSS venga renderizzato correttamente.

Dove si colloca Bulma tra i formati di output di MarkupGen

Bulma è uno dei sei target CSS supportati da MarkupGen, insieme a CSS puro, Tailwind, Bootstrap, Materialize e Pico — scelto per progetto dal pannello di configurazione invece di essere fissato in anticipo. È la scelta giusta quando vuoi un'estetica moderna e pulita di default senza adottare una libreria di componenti completa come richiederebbero Bootstrap o Materialize. Per un confronto affiancato di tutti e sei, vedi 6 framework CSS per il Figma-to-Code.

Rivedere il markup generato prima di pubblicare

La conversione automatica ottiene la struttura di classi corretta per la maggior parte del design, ma vale la pena controllarla prima del merge:

• Controlla le larghezze delle colonne a ogni breakpoint — la griglia di Bulma è flessibile, quindi conferma che le dimensioni is-* generate corrispondano ancora all'intento su mobile, non solo su desktop.
• Cerca pattern di modificatori ripetuti, soprattutto dove lo stesso componente (una card, uno stile di bottone) appare più di una volta — dovrebbe risolversi nelle stesse classi modificatrici ovunque.
• Conferma l'HTML semantico sotto le classi Bulma — l'output privilegia di default tag con significato invece di <div> annidati.
• Usa l'editor integrato per le modifiche a contenuto o layout invece di editare a mano le classi esportate, poi riesporta.

Ogni export riceve anche un punteggio di qualità IA automatico, un segnale rapido su quanto sia pronto per la pubblicazione prima di andare avanti.

Provalo sul tuo design

Se stai ancora scegliendo a mano le classi modificatrici di Bulma per far combaciare un file Figma, vale la pena vedere quanto di quel lavoro scompare quando le classi arrivano dai valori reali del design. Prova MarkupGen gratis su uno dei tuoi frame, oppure consulta la pagina del convertitore da Figma a Bulma per vedere cosa ottieni di serie.