Saltar al contenido

Herramientas

Normalizar la exportación

Sube lo que exporta Figma y descarga DTCG estricto: alias como referencias, tamaños con unidad y el tipo de cada variable decidido por su scope. Todo pasa en tu navegador.

Última revisión:

Sube lo que exporta Figma y descarga DTCG estricto, con los mismos cambios que explica Completar la exportación. Todo pasa en tu navegador: los archivos no se envían a ningún servidor.

Subir

Lo que exporta Figma

Los .zip de Export modes, uno por colección, o una carpeta con una subcarpeta por colección.

o suelta aquí los .zip o la carpeta

Resultado

En tu repositorio

Para hacerlo en tu proyecto, descarga el script: lleva tus decisiones escritas en SCOPE_TYPES, al principio del archivo. Ponlo en tools/, con la exportación en tokens/figma/ (una carpeta por colección), y ejecútalo con Node.js; escribe el resultado en tokens/dtcg/.

tools/figma-to-dtcg.mjs

// <scope-types>
// Para cada tipo de Figma, qué scope (tal como lo escribe la exportación) da qué tipo DTCG.
// Añade aquí tus decisiones. La clave puede ser un scope ('LINE_HEIGHT'), varios scopes unidos
// con "+" en orden alfabético ('FONT_STYLE+GAP') o '(sin scopes)'. Tipos posibles en TYPE_OPTIONS;
// 'exclude' deja el token fuera de la salida.
export const SCOPE_TYPES = {
  number: {
    FONT_STYLE: 'fontWeight',
    GAP: 'dimension',
    CORNER_RADIUS: 'dimension',
    STROKE_FLOAT: 'dimension',
    FONT_SIZE: 'dimension',
    WIDTH_HEIGHT: 'dimension',
  },
  string: {
    FONT_FAMILY: 'fontFamily',
  },
  boolean: {},
};
// </scope-types>

Terminal

node tools/figma-to-dtcg.mjs

Para pasar el DTCG a variables CSS, sigue Las variables CSS.