Mejores prácticas de sistemas de diseño
Un resumen condensado de las 25 mejores prácticas más importantes extraído de cada página de esta sección.
//
Busca en todas las páginas de la documentación
Un resumen condensado de las 25 mejores prácticas más importantes extraído de cada página de esta sección.
Comienza con tokens, no con una librería: Define roles de color, espaciado y tipografía en un módulo antes de adoptar NativeWind, Tamagui o Paper - las librerías consumen tokens; no reemplazan decisiones de diseño.
Nombra tokens por rol semántico: Usa surface, textPrimary y accent en lugar de gray700 - los cambios de paleta y las variantes de etiqueta blanca intercambian valores sin renombrar cada pantalla.
Mantén el espaciado en una escala fija: Una cuadrícula de 4px (4, 8, 16, 24) vence el padding ad-hoc de 13 y 17 - diseñadores e ingenieros comparten un ritmo.
Expón APIs de componentes pequeños: Las primitivas aceptan variant, size y disabled - no props de estilo abiertos que recreen botones únicos por funcionalidad.
Un ThemeProvider en la raíz: Centraliza la selección de esquema y marca - los proveedores anidados causan colores divididos y descargas dobles al cambiar tema.
Aplica colores dinámicos al renderizar: El StyleSheet.create a nivel de módulo con hex codificado no reacciona al modo oscuro - empareja layout estático con useTheme() o utilidades dark:.
Elige una estrategia de estilo por aplicación: Mezclar pantallas Tamagui, pantallas NativeWind y StyleSheet bruto sin límites crea inflación de bundle e inconsistencia en movimiento - elige una columna vertebral e envuelve lo heredado incrementalmente.
Perfila antes de adoptar un compilador: NativeWind y Tamagui resuelven problemas de escala - un MVP de cinco pantallas no necesita transformadores Metro o mantenimiento de tamagui.config.ts.
NativeWind: strings de clase estática en listas: Dynamic `bg-${x}` rompe la extracción en tiempo de compilación - usa mapas de variantes fijos en componentes de fila.
Tamagui: variantes tipadas sobre hex en línea: Las variantes styled() codifican estados de diseño - los tokens $brand mantienen el modo oscuro y las variantes coherentes.
React Native Paper: siempre envuelve PaperProvider: El tema MD3, ripple e iconos fluyen desde el contexto - las pantallas que omiten el proveedor vuelven silenciosamente a los valores por defecto.
Paper + Navigation: usa adaptNavigationTheme: Los colores de encabezado y pestaña deben coincidir con primary y surface - el chrome no coincidente se lee como dos aplicaciones diferentes.
@expo/ui para chrome nativo, RN para densidad: Los controles universales Host/Button/Switch sobresalen en sensación de plataforma - las listas virtualizadas y gráficos personalizados permanecen en RN (islas RNHostView).
Los modificadores de SwiftUI no son estilos de RN: Los diseños de widget y vidrio usan @expo/ui/swift-ui/modifiers - no pegues StyleSheet en objetivos de extensión.
La accesibilidad pertenece a las primitivas: Establece accessibilityRole="button" y etiquetas en el Button/Pressable de la librería una vez - los equipos de funcionalidades olvidan parches por pantalla.
Soporta tipo dinámico en primitivas de texto: Reenvía maxFontSizeMultiplier y prueba cadenas largas en alemán en envoltorios de Text - las barras de herramientas densas limitan el escalado; el cuerpo de copia no debería.
Honra el movimiento reducido en primitivas animadas: Los esqueletos de carga y las transiciones de entrada deben respetar la configuración del sistema - cierra animaciones de entrada de Reanimated cuando el movimiento reducido está activado.
Prueba el contraste en cada variante de marca: Los pares de primary/onPrimary de etiqueta blanca deben pasar la auditoría por inquilino - una paleta Acme aprobada no certifica el verde de Globex.
Storybook documenta estados, no solo el camino feliz: Las historias vacía, cargando, error, deshabilitado y texto largo atrapan errores de layout antes de que lleguen a flujos de autenticación de producción.
Mantén Storybook fuera de los bundles de producción: Usa intercambio de entrada de STORYBOOK_ENABLED - nunca importes .rnstorybook incondicionalmente en App.tsx.
Semver el paquete de UI como cualquier dependencia: Renombrar title → label es un bump mayor - las aplicaciones móviles fijan versiones; documenta cambios visuales importantes en CHANGELOG.
Exporta una API pública estrecha: Exporta con barril solo primitivas y hooks desde index.ts - los helpers internos prefijados o no exportados previenen acoplamiento no soportado.
Etiqueta blanca con configuración de variante, no con forks de git: BRAND_FLAVOR en perfiles de EAS + registro de brands escala parches de seguridad - los forks multiplican el costo de actualización de SDK.
Aísla canales de OTA por variante: Publicar el bundle de JS de un cliente en el canal de otro inquilino es un incidente de marca y datos - mapea canales en eas.json.
Revisa tokens de forma cruzada en CI: Bloquea hex bruto nuevo en carpetas de funcionalidades y estilos en línea nuevos en renderItem de lista - la disciplina del sistema de diseño se erosiona uno a la vez sin puertas de lint.
Cuando tienes muchas pantallas compartiendo tokens y la ergonomía de utilidad o variante vence mediblemente el mantenimiento de StyleSheet. Mantente en tokens + StyleSheet hasta que aparezca la deriva de copia - ve Conceptos básicos de sistemas de diseño.
Elige Paper para productos Android-first MD3 con formularios y diálogos estándar. Elige personalizado + tokens cuando el lenguaje de marca no es Material. Ve React Native Paper.
Controles nativos de reemplazo inmediato y diseños híbridos - no un reemplazo completo para listas y navegación. Ve Expo UI Drop-Ins.
Variante elige el primario de marca y activos; esquema elige fondos neutrales y bordes. Combina en un proveedor - ve Temas y variantes de marca.
Extrae cuando dos aplicaciones comparten primitivas o cuando Storybook y semver importan. Los equipos de aplicación única pueden usar components/ hasta que aparezca el segundo consumidor - ve Construir una librería de componentes interna.
accessibilityRole, etiqueta visible (o accessibilityLabel en controles solo de icono), contraste en texto, y VoiceOver/TalkBack humo en cada primitiva nueva - ve Conceptos básicos de accesibilidad.
Versiones de stack: Esta página fue escrita para React 19.2.3, React Native 0.86.0, y Expo SDK 57 (
expo~57.0.4).
Revisado por Chris St. John·Última actualización: 19 jul 2026