De @theme a variables de Figma

En Figma: selecciona una capa → panel derecho → Effects → + → elige el tipo de efecto de la columna "Tipo de efecto en Figma" de cada tabla → rellena los campos con los valores de la fila. En cada campo (X, Y, Blur, Spread, Color) pasa el cursor y pulsa el icono de variable para enlazarlo a un primitivo si tienes uno equivalente (el color, por ejemplo, a color/black) en vez de dejarlo fijo — así la sombra se actualiza si cambias el primitivo. Cuando esté montado, pulsa el icono de estilo (4 puntos) para guardarlo como Effect Style con el mismo nombre del token (p. ej. shadow/md).

Shadow → Drop Shadow

Tipo de efecto en Figma: Drop Shadow (una capa de efecto por fila; si el token tiene varias capas, añade varios efectos del mismo tipo apilados sobre la misma capa).

Inset Shadow → Inner Shadow

Tipo de efecto en Figma: Inner Shadow.

Drop Shadow (filter) → Drop Shadow

Tipo de efecto en Figma: Drop Shadow.

Text Shadow → Drop Shadow (sobre la capa de texto)

Tipo de efecto en Figma: Drop Shadow (una capa de efecto por fila; si el token tiene varias capas, añade varios efectos del mismo tipo apilados sobre la misma capa).

Estas curvas sí tienen un sitio nativo en Figma, pero no en Variables ni Styles — viven en el panel de prototipado. Al crear una conexión de interacción, en el desplegable "Easing" elige Custom bezier e introduce los 4 números de cada cubic-bezier().

Estos presets combinan una animación CSS (@keyframes) con duración y easing. Figma no ejecuta keyframes de CSS, así que no hay una forma de "importarlos" ni recrearlos exactamente con Smart Animate — sobre todo por el infinite (bucle), que Smart Animate no reproduce de forma nativa. Guárdalos solo como documentación para quien implemente en código; si necesitas mostrar la idea en el prototipo, usa la duración como referencia aproximada.

El primitivo fontFamily/sans es la pila de fallback de Tailwind (ui-sans-serif, system-ui, sans-serif...), no el nombre de una fuente instalada — Figma no puede enlazar eso a un campo de texto tal cual. Para usarlo de verdad: elige una fuente real que represente esa intención (la que uséis en producción), instálala en Figma, y créala como propiedad de un Text Style. El primitivo sigue existiendo como documentación de qué renderiza el navegador; la fuente real es la decisión visual encima de esa documentación — igual que un primitivo de color no te dice qué botón lo usa, esto no te dice qué fuente exacta dibujar, solo la intención.

Como comentamos: un título o un párrafo combina varias propiedades a la vez (tamaño, peso, interlineado, tracking), y una variable solo guarda un valor — por eso esta capa se resuelve con Text Styles, no con más variables ni con un componente. Punto de partida sugerido, construido enlazando los primitivos que ya tienes:

lineHeight tiene una entrada por cada tamaño de fontSize, ya en px — usa siempre la que comparte nombre con el tamaño que estés aplicando (fontSize/base → lineHeight/base), así el texto nunca queda ni apretado ni con huecos raros entre líneas. Es una sugerencia de partida, no una regla fija: ajusta según cómo se vea en vuestros componentes reales.

Es el único tipo de estilo que aún no tenéis y no tiene alternativa en Variables — Figma no tiene un tipo "grid" bindable, así que se crea una vez como Grid Style y se aplica a los frames de cada breakpoint. En Figma: selecciona el frame → panel derecho → Layout grid → + → tipo Columns → rellena columnas / margen / gutter de la fila correspondiente → guarda como estilo con el mismo nombre. Propuesta de partida construida con vuestros primitivos spacing ya existentes (ajustad libremente, es un punto de partida, no una norma):

Los campos de margen y gutter dentro del Layout Grid sí aceptan bind a variable numérica (igual que en shadows) — enlázalos directamente a spacing/4, spacing/6, etc. en vez de escribir el número suelto, para que hereden cualquier cambio futuro de la escala. El "ancho de referencia" no es un campo del grid en sí, es la anchura del frame en la que aplicas cada estilo (o el max-width si trabajáis con contenedores centrados — ahí sí entran vuestros primitivos container).