Figma — Tokens extraídos (Stream_clone)

Resumen

Este documento recoge los tokens visuales (colores, tipografías, tamaños, radios) extraídos automáticamente desde el archivo Figma Stream_clone (Page 1 / Frame Figma design - streamyard1.png). Los valores son la mejor correspondencia extraída del archivo (hex, px) y se proponen como tokens para sincronizar con tailwind.config.cjs.

Colores (hex)

studio-dark: #12151D (fill_GX03CB)
studio-bg: #41444A (fill_DLCT4G)
studio-muted: #7E8791 (ej. fill_13MDCZ / configurado previamente)
studio-muted-2: #77818F (fill_XG994A)
studio-border: #D0D0CB (fill_9R9Y7U)
studio-btn-blue: #98BFFE (fill_49OOFB - botón)
studio-grabar-bg: #424E6A (fill_BWASHJ - botón "Grabar" fondo en Figma)
studio-accent-alt: #122B54 (fill_BOQTE5)
token-gray-light: #C7C6BF (fill_N03D5A)
token-gray-mid: #C9D1D0 (fill_XEE5XM)
token-gray-2: #CBCEC9 (fill_XEE5XM)

Tipografías y tamaños

Extracciones desde los style_* en Figma (valores en px):

style_2I2NT6: 12.8px -> figma-transmision (ya en Tailwind)
style_I6TCK2: 11.3px -> figma-personas (ya en Tailwind)
style_0GZP76: 14.2px -> (UI small labels)
style_CREH16: 15.5px -> (heading small)
style_4TUWSC: 13.2px -> (botón / label)
style_QUEM4J: 16.2px -> (subtitle / section headings)
style_2T7708 / style_10RTOQ / style_UT5PZD: 16-17px (varios headings)

Sugerencia: mantener en tailwind.config.cjs los tokens ya añadidos: figma-transmision, figma-personas, figma-h1, figma-h2, figma-base. Añadir figma-btn = 13.2px si se desea.

Radii (border-radius)

small-radius: 3.25px / 3.75px (varios elementos con borderRadius 3.25–3.75px)
rounded-xl: ~12px (usado en Brand logo container)

Sombras

El archivo Figma devuelto en la extracción no contenía propiedades de sombra explícitas en los estilos expuestos por la API (o estaban en layers rasterizados). Recomendación: extraer sombras manualmente desde la inspección en Figma o fijar una shadow scale en tailwind.config.cjs (ej. shadow-sm, shadow-md, shadow-lg) y ajustar según revisión visual.

Tokens JSON (next steps)

He exportado también un JSON con los tokens detectados (colores, tipografías y radios) en packages/studio-panel/src/design/figma-tokens.json. Úsalo como fuente canónica para sincronizar tailwind.config.cjs.

Notas

Algunos elementos en el Figma son imágenes o composiciones (Image fills con imageRef). Esos se descargaron como PNGs en packages/studio-panel/public/figma-assets/.
Para extracción exacta de sombras, letter-spacing y otras propiedades de texto/efecto es mejor acceder directamente al archivo Figma (layers) y exportar tokens desde el plugin "Design Tokens" o solicitar al diseñador que exporte la tabla de tokens.

Siguiente paso sugerido

Sincronizar tailwind.config.cjs con los valores listados arriba (colores exactos, agregar figma-btn si se desea).
Opcional: ejecutar un paso de QA visual comparando capturas del header actual con la imagen Figma (usar Playwright snapshots).

Archivo con tokens: packages/studio-panel/src/design/figma-tokens.json

3.2 KiB Raw Permalink Blame History Unescape Escape