60 lines
3.2 KiB
Markdown
60 lines
3.2 KiB
Markdown
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`
|
||
|