Design token di Figma in Tailwind: colori, tipografia e spaziatura

Risposta rapida: un valore di colore/testo/spaziatura di Figma si mappa su Tailwind confrontandolo con la scala di utility di Tailwind stessa — lo step di spaziatura più vicino, il colore più prossimo, la dimensione tipografica corrispondente. Quando un valore è fuori scala, l'output ricade su una classe a valore arbitrario come bg-[#f4f4f5], invece di inventare un nuovo colore del tema che non esiste nella tua config.

I "design token" in un file Figma, concretamente

Prima che la mappatura abbia senso, è utile essere specifici su cosa conta come token e cosa invece come valore occasionale in Figma:

• Color style — un fill salvato e denominato (es. "Gray/100") applicato in modo coerente in tutto il file, in contrapposizione a un valore hex scelto una volta e mai riutilizzato.
• Text style — una combinazione salvata di font, dimensione, peso e line-height, applicata in modo coerente a titoli o testo del corpo.
• Valori di spaziatura — di solito non "salvati" come stile allo stesso modo, ma numeri di gap/padding dell'Auto Layout usati in modo coerente e ripetuto tra i vari frame.

La mappatura su Tailwind funziona meglio quando il file Figma usa davvero questi elementi in modo coerente. Un file in cui ogni bottone usa lo stesso color style salvato "Primary" si converte in modo pulito in un'unica classe Tailwind riutilizzata ovunque. Un file in cui cinque bottoni hanno ciascuno un blu leggermente diverso e occasionale si converte in cinque valori Tailwind leggermente diversi — perché è davvero ciò che il design contiene, non un difetto della conversione.

Come i valori si risolvono sulla scala di Tailwind

Il valore di Tailwind sta in una scala vincolata e predefinita per spaziatura, colore e tipografia — non una palette aperta. Convertire su quella scala significa trovare corrispondenze, non inventare:

Si tratta di una distinzione voluta: l'output Tailwind di MarkupGen si risolve rispetto alla scala predefinita reale di Tailwind, invece di generare un tema tailwind.config personalizzato per forzare ogni valore a "starci." Questo mantiene l'output onesto rispetto ai valori reali del design — un colore fuori scala compare come classe a valore arbitrario, un segnale visibile che vale la pena verificare con il designer se dovrebbe essere avvicinato alla palette condivisa, invece di un arrotondamento silenzioso.

Cosa significa questo per la revisione dell'export

• Le classi a valore arbitrario sono un segnale, non un bug. Un gruppo di classi bg-[#...] nell'output di solito significa che il design stesso contiene colori occasionali quasi duplicati che andrebbero consolidati in style condivisi — vale la pena segnalarlo al team design invece di "sistemarlo" solo nel codice.
• Controlla la coerenza della spaziatura tra i componenti ripetuti, dato che la scala di Tailwind arrotonda ogni valore in modo indipendente — lo stesso gap visivo in due frame diversi dovrebbe risolversi nella stessa classe, se il design ha usato lo stesso numero.
• Se il progetto ha già un tema tailwind.config, confronta i valori arbitrari generati con quel tema — un colore che sembra fuori scala rispetto alla palette predefinita di Tailwind potrebbe già essere un colore nominato nella tua config, e vale la pena sostituirlo a mano.

Per il flusso di lavoro completo — export tramite plugin, generazione IA, editing, scelta del formato di output — vedi Figma to Tailwind CSS: A Practical Conversion Guide.

Provalo sul tuo design

Il modo più veloce per vedere quanto in modo coerente si convertono i colori e la spaziatura del tuo file è far passare un frame reale attraverso lo strumento. Prova MarkupGen gratis, oppure controlla la pagina Figma to Tailwind converter per scoprire cosa include.