Figma
Todo el trabajo de diseño ocurre en Figma. Mantenemos una única fuente de verdad con páginas organizadas: Componentes, Patrones, Flujos y Archivo. Los desarrolladores tienen acceso de visualización a todos los archivos.
Nuestra librería de Figma incluye todos los componentes de producción con variantes, auto-layout y restricciones adaptables. Los componentes coinciden 1:1 con nuestra librería de componentes de React.
Proceso de diseño
Cómo abordamos una nueva función o página:
- Comprender: ¿Qué problema estamos resolviendo? ¿Para quién es? ¿Cómo se ve el éxito?
- Explorar: Esbozar múltiples enfoques. No comprometerse con la primera idea. Mostrar opciones.
- Refinar: Elegir una dirección y pulir. Considerar todos los estados y casos extremos.
- Revisar: Obtener retroalimentación de diseño e ingeniería. Iterar según los comentarios.
- Lanzar: Trabajar con ingeniería en la implementación. Verificar el resultado final.
Revisión de diseño
Los cambios de diseño significativos se revisan antes de la implementación:
- Compartir el problema que se está resolviendo, no solo la solución
- Mostrar el contexto: ¿cómo encaja esto en la experiencia general?
- Incluir casos extremos: estados de carga, vacíos y de error
- Obtener retroalimentación temprana cuando los cambios son baratos
Entrega diseño-desarrollo
No tiramos los diseños por encima de la valla. Los diseñadores y desarrolladores trabajan juntos desde el principio. La entrega incluye:
- Enlace de Figma con el modo de inspección habilitado
- Especificaciones de interacción para animaciones
- Notas de comportamiento adaptable
- Requisitos de accesibilidad
- Textos y microtextos finalizados
- Exportaciones de recursos si son necesarias
Aseguramiento de calidad
El control de calidad del diseño ocurre antes y después del lanzamiento:
- Revisar las funciones implementadas frente a los diseños
- Probar el comportamiento adaptable en dispositivos reales
- Verificar que las animaciones y transiciones se sientan correctas
- Comprobar la accesibilidad con lectores de pantalla
- Documentar cualquier desviación intencional