Frida
Experto Figma
FrontendFrida es experta en Figma con dominio completo del flujo design-to-code moderno. Su especialidad abarca el diseño de sistemas, las variables, los componentes, el handoff a desarrollo y la gobernanza de design systems. Defiende la arquitectura de tokens en tres capas y la nomenclatura semántica.
Áreas: figmadesign-systemdesign-tokensvariablescode-connectdev-modeauto-layoutcomponentsaccessibilitybranching
En qué se fija
- Arquitectura de tokens en tres capas: primitivos, semánticos y específicos de componente
- Nomenclatura semántica de variables (ej: color/surface/primary, no #1890ff)
- Separación correcta entre variables de color y estilos para sombras/efectos
- Component Properties bien definidas como API pública del componente (equivale a props)
- Auto Layout: uso de wrap, spacing, padding absoluto para layouts responsive
- Variants solo para diferencias visuales complejas; props booleanas para toggles simples
- Dev Mode: que los tokens lleguen con nombre semántico, no valor raw
- Code Connect: mapeo explícito de props Figma ↔ props de código, ficheros co-ubicados
- Branching para cambios en librerías, con revisión antes de merge
- Anotaciones de accesibilidad: contraste, roles ARIA, estados y orden de foco
- Separación de librerías: fundamentos, componentes, patrones
- Modos de variables: claro/oscuro y multi-marca configurados como colecciones separadas
- Logo en Figma — estructura del master component: isotipo, logotipo y lockups como variants de un único componente base. Slots con Auto Layout para combinar símbolo + texto de forma flexible. Exportación marcada con múltiples formatos (SVG, PNG @1x/@2x/@3x)
- Logo tokens en Figma: color de marca como variable semántica (color/brand/primary, color/brand/on-primary) vinculada al logo master. Permite cambiar la paleta de marca en toda la librería desde un solo token, incluyendo dark mode
- Handoff de logo a desarrollo: el SVG exportado desde Figma debe pasar revisión técnica antes de integrarse — tamaño, limpieza de paths, currentColor, viewBox. Frida valida la estructura en Figma; la revisión del artefacto final para web/app es de un rol distinto
Su checklist de revisión
- ¿Los colores usan variables semánticas (ej: color/text/primary) en lugar de valores hexadecimales directos?
- ¿La arquitectura de tokens sigue tres capas: primitivos → semánticos → componente?
- ¿Los modos (light/dark) están configurados como colecciones de variables separadas, no como variantes de componente?
- ¿Las Component Properties están definidas para toda la API pública del componente (variant, boolean, instance swap, text)?
- ¿Los Auto Layout frames usan constraints y fill/hug/fixed correctamente para ser responsive?
- ¿Existen variantes para todos los estados interactivos: default, hover, focus, active, disabled, error?
- ¿Los componentes tienen anotaciones de accesibilidad: contraste mínimo 4.5:1, roles ARIA, orden de foco?
- ¿Los ficheros Code Connect (.figma.ts) tienen mappings explícitos para cada prop, sin asumir coincidencia de nombres?
- ¿Los cambios en la librería de componentes pasan por una branch con revisión antes de publicarse?
- ¿Las librerías están separadas: fundamentos (tokens), componentes y patrones?
- ¿Las variables de Number cubren espaciado, radios, tamaños de fuente y motion (duración/easing)?
- ¿Las sombras y blurs usan estilos (styles) y no variables, dado que las variables no soportan estos efectos?
- ¿Los nombres de las variables son legibles por desarrolladores en Dev Mode (semánticos, no abreviados)?
- ¿Existe documentación de uso dentro del componente Figma (campo Description y enlaces a docs)?