Conceptos básicos de colaboración en productos

10 ejemplos para comenzar a traducir diseños en interacciones móviles viables en Expo SDK 57 - qué validar antes de comprometerte con el sprint, cómo hablar con diseño y PM en términos móviles, y dónde fallan los supuestos web en teléfonos.

Requisitos previos

La colaboración en productos asume una aplicación estándar Expo SDK 57 con tokens de diseño y al menos un perfil de construcción de vista previa.

npx create-expo-app@latest MyProductApp --template blank-typescript
cd MyProductApp
npx eas init

Herramientas: Estos ejemplos apuntan a Expo SDK 57 (expo ~57.0.4), React Native 0.86.0, y React 19.2.3. Empareja con Conceptos básicos de sistemas de diseño para tokens y Conceptos básicos de animaciones para viabilidad de movimiento.

Ejemplos básicos

1. El traspaso de diseño es una conversación, no una descarga de archivo

Trata la exportación de Figma como el inicio del refinamiento - no el final del diseño.

## Lista de verificación de traspaso (por pantalla)
- [ ] Artboards de iOS + Android O explícitamente "la plataforma sigue HIG/Material"
- [ ] Insertos de área segura anotados (notch, Dynamic Island, barra de navegación)
- [ ] Estados del teclado: predeterminado, enfocado, error en línea
- [ ] Cargando, vacío, error - no solo el caso feliz
- [ ] Hilo de comentarios de viabilidad de ingeniería abierto antes de la planificación del sprint

• PM programa paso de viabilidad de 15 minutos con ingeniero + diseñador antes de señalar
• "Se ve bien" en Figma ≠ "se envía este sprint" en dos plataformas
• Registra bloqueadores en el ticket - "necesita spike de módulo nativo" es un resultado válido

Relacionado: Trabajar con diseño y movimiento - revisiones de viabilidad pre-píxeles

2. El área segura cambia en cada encabezado "fijo"

Las maquetas web con position: fixed en barras superiores ignoran el notch y la barra de estado.

// src/screens/ProfileScreen.tsx
import { View, Text } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
 
export function ProfileScreen() {
  const insets = useSafeAreaInsets();
 
  return (
    <View style={{ flex: 1, paddingTop: insets.top }}>
      <Text accessibilityRole="header">Perfil</Text>
      {/* El contenido se desplaza bajo el encabezado transparente solo si fue diseñado así */}
    </View>
  );
}

• Muestra a los diseñadores dos frames de dispositivo: iPhone con Dynamic Island + Android con agujero de cámara
• Los números mágicos de paddingTop: 44 fallan en hardware nuevo - usa insertos
• Los pies de página adhesivos necesitan insets.bottom para solapamiento del indicador de inicio

3. Las láminas inferiores no son diálogos modales web

Los diálogos modales centrados de web a menudo se convierten en láminas inferiores o flujos de pantalla completa en dispositivos móviles.

• Marca las expectativas de descartar por gesto - el deslizamiento hacia abajo vs el toque afuera difiere por plataforma
• Ver Decisiones de paridad de plataforma cuando iOS y Android divergen intencionalmente

4. La evasión de teclado es parte del diseño

Un formulario que se ve perfecto en Figma puede ocultar el CTA principal cuando se abre el teclado.

import { KeyboardAvoidingView, Platform, ScrollView } from "react-native";
 
export function SignUpForm() {
  return (
    <KeyboardAvoidingView
      style={{ flex: 1 }}
      behavior={Platform.OS === "ios" ? "padding" : undefined}
      keyboardVerticalOffset={Platform.OS === "ios" ? 64 : 0}
    >
      <ScrollView keyboardShouldPersistTaps="handled">
        {/* campos + envío - el diseñador revisa con el teclado abierto */}
      </ScrollView>
    </KeyboardAvoidingView>
  );
}

• La revisión de diseño debe incluir captura de pantalla con teclado abierto en el teléfono más pequeño compatible
• android:windowSoftInputMode puede necesitar complemento de configuración - no es JavaScript puro
• Las etiquetas flotantes que se animan necesitan presupuesto de movimiento - Reanimated 4

5. Las áreas de toque superan la densidad perfecta en píxeles

Figma al 100% de zoom tienta con botones de 32px; Apple HIG y Material recomiendan mínimo de 44-48dp.

// design-systems/PrimaryButton.tsx - aplica área de toque mínima
import { Pressable, Text, StyleSheet } from "react-native";
 
type Props = { label: string; onPress: () => void };
 
export function PrimaryButton({ label, onPress }: Props) {
  return (
    <Pressable
      onPress={onPress}
      style={styles.hitSlop}
      accessibilityRole="button"
      accessibilityLabel={label}
    >
      <Text style={styles.label}>{label}</Text>
    </Pressable>
  );
}
 
const styles = StyleSheet.create({
  hitSlop: {
    minHeight: 48,
    minWidth: 48,
    paddingHorizontal: 16,
    justifyContent: "center",
    alignItems: "center",
  },
  label: { fontSize: 16, fontWeight: "600" },
});

• Los diseñadores usan cuadrícula de 8px de Conceptos básicos de sistemas de diseño - los ingenieros aplican minHeight en componentes
• Las tablas de datos densas en teléfono a menudo necesitan alternativa de lista de tarjetas - negocia en refinamiento
• WCAG 2.5.5 (44×44) es una decisión de producto, no una sorpresa de auditoría posterior al lanzamiento

6. Los gestos necesitan ingeniería temprana

Deslizar para eliminar, arrastrar para reordenar y tirar para actualizar compiten por los mismos manejadores pan.

## Viabilidad de gestos (plantilla de ticket)
**Interacción:** Desliza fila izquierda - revela Eliminar
**Bibliotecas:** react-native-gesture-handler + Reanimated
**Conflictos:** Desplazamiento vertical del FlatList padre
**Spike:** 0.5 día si patrón nuevo
**Alternativa:** Presión larga - hoja de acciones

• Si la maqueta muestra arrastre basado en física, vincula Gesture Handler en el ticket
• "Igual que iOS Mail" no es una especificación - registra umbral, haptics y patrón de deshacer
• El gesto atrás de Android puede cancelar deslizamientos incompletos - prueba en emulador API 35

7. Estados más allá del caso feliz

Las pantallas enviables necesitan cargando, vacío, error, sin conexión y permiso denegado - no solo el frame de marketing.

type ViewState = "loading" | "empty" | "error" | "ready";
 
export function OrdersList({ state, orders }: { state: ViewState; orders: Order[] }) {
  if (state === "loading") return <OrdersSkeleton />;
  if (state === "empty") return <EmptyState title="Sin pedidos aún" cta="Explorar catálogo" />;
  if (state === "error") return <ErrorState onRetry={refetch} />;
  return <FlatList data={orders} renderItem={renderOrder} />;
}

• Criterios de aceptación de PM: "el usuario ve X cuando la red falla" - no implícito
• Skeleton vs spinner es una decisión de sistema de diseño - un patrón por densidad de datos
• Las cadenas de permisos (NSCameraUsageDescription) requieren construcción de tienda - marca en estimación

8. Tipografía y tipo dinámico

fontSize: 14 fijo en Figma se rompe cuando los usuarios habilitan texto más grande en configuración del sistema.

import { Text, StyleSheet } from "react-native";
 
export function BodyText({ children }: { children: string }) {
  return (
    <Text
      style={styles.body}
      maxFontSizeMultiplier={1.3} // límite de producto - documenta en a11y ADR si es menor que el sistema
    >
      {children}
    </Text>
  );
}
 
const styles = StyleSheet.create({
  body: { fontSize: 16, lineHeight: 24 }, // token: typography.body
});

• Los diseñadores entregan tokens de escala de tipo, no tamaños únicos - Temas y sabores de marca
• Revisa tipo dinámico XL en iOS y escala de fuente 1.3 en Android antes del aprobación final
• Reglas de truncamiento: numberOfLines vs expandir - decisión de copia empresarial

9. Selectores nativos vs dropdowns personalizados

"Select personalizado" de web es a menudo medio sprint en dispositivos móviles; los selectores de plataforma se envían más rápido.

• Documenta intencionalmente UI personalizado en ADR cuando se rechaza el selector de plataforma
• Los selectores personalizados necesitan a11y: orden de lector de pantalla, trampa de enfoque, gesto de descartar
• Tabla de intercambio de PM en refinamiento supera rediseño a mitad del sprint

10. Demostración en dispositivo cierra el ciclo

Finaliza el refinamiento con una caminata de 10 minutos en dispositivo - prototipo, construcción de vista previa, o Storybook en teléfono.

# Comparte vista previa con diseño + PM antes del inicio del sprint
eas build --profile preview --platform all
# QR en notas de refinamiento; misma construcción para aceptación de QA

## Refinamiento hecho cuando
- [ ] El diseñador vio iOS + Android (sim o dispositivo)
- [ ] El ingeniero registró riesgos de viabilidad en el ticket
- [ ] PM aceptó alternativa para cualquier elemento "spike pendiente"
- [ ] Movimiento marcado: Animated vs Reanimated vs estático

• Los stakeholders sopesan demasiado la fidelidad de Figma - demostración de dedo reestablece expectativas
• Registra grabación de pantalla para PMs asincrónico - 30 segundos superan un párrafo
• Se vincula a Comunicación con stakeholders para lenguaje de lanzamiento

Preguntas frecuentes

Relacionado

• Decisiones de paridad de plataforma - cuando iOS y Android difieren a propósito
• Trabajar con diseño y movimiento - viabilidad antes de píxeles finales
• Comunicación con stakeholders - actualizaciones de estado en lenguaje simple
• Conceptos básicos de sistemas de diseño - tokens y APIs de componentes
• Conceptos básicos de animaciones - marco Animated vs Reanimated
• Gesture Handler - conflictos de pan y desplazamiento
• Construcciones de vista previa en PRs - demostraciones QR para stakeholders

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).