Entregar un diseño que desarrollo pueda construir.

En esta página

1. Ideas clave
2. ¿Por qué la entrega decide si el diseño sobrevive?
3. ¿Cómo se organiza un archivo para que ingeniería pueda leerlo?
4. ¿Cómo se muestran las conexiones entre pantallas?
5. ¿Por qué diseñar primero los estados de error y vacío?
6. ¿Qué debe contener el sistema de diseño que se entrega?
7. ¿Cómo se trabaja con ingeniería en vez de lanzar el trabajo al otro lado?
8. La lista de ocho pasos
9. La entrega es la última edición del diseño
10. Preguntas frecuentes
11. Fuentes

Un diseño se termina cuando un ingeniero puede construirlo sin adivinar, y la distancia entre eso y que tenga buen aspecto tiene un precio. En la encuesta de Zeplin de 2024 a profesionales de DesignOps, el 66 por ciento dijo perder entre una cuarta parte y la mitad de su tiempo por ineficiencias en la entrega del diseño. Zeplin lo cifra en entre 10 y 20 horas semanales dedicadas a tareas que no aportan valor al negocio. La entrega no es un trámite. Es donde se pierden dinero e impulso.

He lanzado productos para más de dos millones de personas en Branders y Zain Cash, y casi todas las regresiones que he perseguido empezaron en la entrega. La solución es una mentalidad antes que un método. La entrega es un trabajo preparado, no una exportación. Consiste en dar a ingeniería todo lo necesario para construir el diseño, en el orden en que lo necesitará, para que las únicas sorpresas sean buenas. Esta es mi lista de ocho puntos, agrupados por las acciones más importantes.

Ideas clave

• La entrega se prepara como un trabajo propio, no como una exportación. Dos tercios de los equipos pierden entre el 25 y el 50 por ciento de su tiempo cuando se deja para el final (Zeplin, 2024).
• Las pantallas deben ordenarse y nombrarse por flujo, para que el archivo se lea como una historia.
• Hay que mostrar cómo se conectan las pantallas y diseñar los estados de error y vacío, además del recorrido sin problemas.
• El sistema de diseño se entrega con tokens con nombre y se acuerdan las condiciones con ingeniería antes de diseñar.
• Hay que seguir disponible durante el desarrollo. Una entrega clara ayuda a conseguir el siguiente proyecto.

¿Por qué la entrega decide si el diseño sobrevive?

Porque el archivo es el último lugar que se controla y el primero en el que el diseño se degrada. En esa misma encuesta, el 53 por ciento informó de retrasos en lanzamientos por ineficiencias en la entrega, y el 73 por ciento de una caída de la moral del equipo de diseño. Una entrega débil no solo cuesta horas. Reescribe el trabajo de forma silenciosa.

El ingeniero debe tratarse como el usuario más importante del archivo. Si cuesta leerlo, costará construir el producto, y lo publicado parecerá un borrador de lo diseñado. Cada ambigüedad es una decisión que otra persona tomará, normalmente con prisa y de otra manera. La entrega es la última edición del diseño.

¿Cómo se organiza un archivo para que ingeniería pueda leerlo?

Se ordenan las pantallas por flujo, se nombran con claridad y se agrupan por sección para que cualquiera lea el archivo como una historia. Un ingeniero que encuentra la siguiente pantalla en un segundo mantiene la concentración. Si tiene que buscarla, empieza a inventar, y ahí el diseño se desvía.

Poner nombres es comunicar, no hacer limpieza. «Pantalla 12 copia final v3» no explica nada. «Pago, carrito vacío» dice exactamente qué se construye y cuándo aparece. Dedicar esos diez minutos ahorra horas al otro lado.

¿Cómo se muestran las conexiones entre pantallas?

Se muestra el flujo, además de los marcos. Una pantalla estática indica qué construir, pero no cómo funciona: qué toque lleva a dónde, qué hace volver atrás, qué ocurre al completar y al cancelar. Al ver el recorrido, la lógica deja de ser una adivinanza y el desarrollo se acelera.

Es la capa que se omite en más archivos y la que más preguntas genera durante el desarrollo. Cada flecha dibujada ahora es un mensaje que no habrá que responder después, a menudo cuando ya se ha publicado algo incorrecto.

¿Por qué diseñar primero los estados de error y vacío?

Porque forman parte del producto, son lo primero que encuentra un usuario real y lo primero que se recorta en un archivo preparado con prisa. Si no se diseña el 404, la bandeja vacía o el pago fallido, lo hará ingeniería, y no tendrá el cuidado del recorrido ideal. Los recorridos con problemas merecen la misma atención que la demostración.

La confianza se gana o se pierde en los estados vacíos y de error. Una pantalla en blanco parece rota. Un vacío bien resuelto transmite que el producto esperaba a la persona. El recorrido ideal recibe los aplausos, pero los casos límite deciden si se vuelve.

¿Qué debe contener el sistema de diseño que se entrega?

Las reglas, además de las pantallas: colores, escala tipográfica, espaciado, iconos y componentes, escritos como tokens con nombre en vez de valores que ingeniería tenga que extraer de un rectángulo. Un sistema convierte cien pequeñas decisiones en unas pocas. Es la diferencia entre un desarrollo coherente y otro que se desvía pantalla a pantalla.

Este es el trabajo que más me importa. Para Bysooq construí Souqra Design System, la base con la que se representa todo el mercado, y para Mercato, un sistema que mantuvo un catálogo de cambios rápidos coherente en cada pantalla. En ambos casos, la entrega fue un lenguaje documentado que los ingenieros podían ampliar sin llamarme, que es precisamente el sentido de un sistema.

Los tokens permiten que el diseño crezca más allá de las pantallas dibujadas. Cuando ingeniería necesita una distribución que nunca se diseñó, un sistema documentado responde. Uno sin documentar obliga a adivinar y, un año después, el producto es un mosaico de aproximaciones.

¿Cómo se trabaja con ingeniería en vez de lanzar el trabajo al otro lado?

Se acuerdan las condiciones antes de diseñar. Conviene conocer pronto sus limitaciones y su tecnología, sobre todo sin experiencia en ingeniería. Cinco minutos preguntando qué es fácil y qué es caro de construir evitan dibujar una interacción bonita que lleva un mes cuando otra parecida lleva un día y se siente igual.

Después hay que seguir disponible durante la construcción. La entrega es una conversación. Se responden preguntas, se revisa el enlace de pruebas y se corrigen pequeñas interpretaciones antes de que queden fijadas en el producto. Una respuesta rápida ahora cuesta mucho menos que una corrección posterior.

Por último, la relación forma parte del oficio. Los ingenieros que reciben una entrega clara son quienes recomiendan, construyen proyectos paralelos y hacen real el siguiente diseño. Una buena entrega expresa respeto por el trabajo y gana la confianza que trae el próximo proyecto.

La lista de ocho pasos

1. Ordenar las pantallas por flujo para que el archivo se lea como una historia.
2. Nombrar cada pantalla con claridad y agruparlas por sección.
3. Mostrar cómo se conectan: qué toque lleva a dónde, qué hace volver atrás y qué ocurre al completar o cancelar.
4. Diseñar los estados de error y vacío con el mismo cuidado que el recorrido ideal.
5. Entregar el sistema con tokens con nombre para color, tipografía, espaciado, iconos y componentes.
6. Acordar con ingeniería las limitaciones y la tecnología antes de diseñar.
7. Seguir disponible durante el desarrollo: responder preguntas y revisar el enlace de pruebas.
8. Tratar la relación con ingeniería como parte del oficio.

La entrega es la última edición del diseño

Un diseño vive o muere en la distancia entre el archivo y lo construido, y corresponde a diseño cerrarla. Ordenar y nombrar pantallas, mostrar flujos, dibujar recorridos con problemas, documentar tokens, acordar pronto y mantener la conversación. Nada es vistoso. Todo marca la diferencia entre un producto que sale como se dibujó y otro que parece un borrador.

Cumplir los ocho puntos facilita el siguiente proyecto, porque el equipo que recibió una buena entrega vuelve a pedir a la misma persona. Más abajo se puede ver esta forma de pensar en el rediseño de Zain Cash, o contarme qué se está construyendo.

Preguntas frecuentes

¿Qué es la entrega de diseño?

Es el momento en que diseño da a ingeniería todo lo necesario para construir: pantallas ordenadas, flujos, estados y un sistema documentado. Una buena entrega es un trabajo preparado, no solo un archivo exportado.

¿Qué debe incluir una entrega de diseño?

Pantallas ordenadas por flujo, sus conexiones, estados de error y vacío y un sistema con tokens con nombre para color, tipografía, espaciado y componentes, además de un breve acuerdo con desarrollo sobre las limitaciones.

¿Cómo se entregan diseños a desarrollo?

Se organiza y nombra el archivo, se muestra el flujo, se diseñan los recorridos con problemas, se documenta el sistema, se acuerdan las condiciones antes de diseñar y se mantiene la disponibilidad para responder durante el desarrollo.

Fuentes

1. encuesta de Zeplin de 2024 a profesionales de DesignOps blog.zeplin.io