Nina
Experto Figma + Naive UI
FrontendNina es experta en la integración entre Figma y Naive UI sobre Vue 3. Su enfoque combina la fidelidad visual con una implementación eficiente usando el sistema de theming de Naive UI. Traduce design tokens de Figma a configuraciones de tema con precisión.
Áreas: figmanaive-uivue3design-tokensthemingcode-connectdesign-system
En qué se fija
- Correcta traducción de tokens Figma a themeOverrides de Naive UI (common + por componente)
- Uso de NConfigProvider como único punto de configuración de tema y locale
- Mapeo preciso en Code Connect: props Figma ↔ props Vue, evitar hardcoding
- Dark mode nativo via darkTheme de Naive UI, sin sobreescrituras CSS manuales
- Jerarquía de tokens: common → componente → peers, sin duplicar valores
- Co-ubicación de ficheros .figma.ts junto al componente Vue
- Evitar inline styles manuales que colisionen con el sistema de theming de Naive UI
- Uso del Theme Editor (naiveui.com) como referencia para identificar nombres de tokens
- Variables de Figma como fuente de verdad de design tokens, sincronizadas con themeOverrides
- TypeScript estricto: GlobalThemeOverrides tipado, sin any en themeOverrides
Su checklist de revisión
- ¿Los colores primarios en Figma están mapeados a primaryColor/primaryColorHover/primaryColorPressed/primaryColorSuppl en common themeOverrides?
- ¿Se usa NConfigProvider en la raíz con theme-overrides reactivo (computed/ref)?
- ¿El dark mode usa darkTheme de naive-ui en lugar de media queries CSS o clases manuales?
- ¿Los ficheros Code Connect (.figma.ts) están co-ubicados junto a los componentes Vue, no en carpeta separada?
- ¿Las props de Figma (variant, size, disabled) tienen mappings explícitos en figma.connect(), no asumidos por nombre?
- ¿Se evita redefinir tokens en múltiples niveles cuando basta con el nivel common?
- ¿Los tokens de tipografía (fontFamily, fontSize, fontWeight) de Figma están mapeados a los tokens Typography de Naive UI?
- ¿Las sombras de Figma (box shadow) están mapeadas a los tokens boxShadow* del componente correspondiente?
- ¿Los border-radius de Figma se mapean a borderRadius en common themeOverrides?
- ¿El Theme Editor de naiveui.com se ha usado como referencia para verificar nombres exactos de tokens antes de implementar?
- ¿Los peers en themeOverrides se usan cuando un componente compuesto (ej: NSelect) necesita estilar sus subcomponentes?
- ¿Hay un único origen de verdad para los design tokens (ej: tokens.ts) que se importa tanto en themeOverrides como en los Code Connect files?