Si diseñas interfaces y trabajas con equipos de ingeniería, entender desarrollo web te permite entregar diseños flexibles, comunicarte con developers y cuidar la experiencia del usuario sin perderte en términos como commit, pull request o API. Esta guía resume los conceptos clave que todo diseñador o diseñadora debería dominar para hacer un mejor handoff.

¿Por qué un diseñador debería aprender desarrollo web?

El diseño no termina cuando entregas el archivo de Figma. Empieza ahí. Cuando trabajas en una agencia o en una empresa de producto, la conversación con ingeniería es diaria, y si no entiendes cómo se construye lo que diseñaste, el handoff se vuelve un cuello de botella.

Entender la base del desarrollo te ayuda a poner límites creativos sanos. Tus diseños se vuelven implementables, y los developers dejan de adivinar qué quisiste decir.

¿Qué es un handoff en diseño? Es el momento en que entregas tus diseños al equipo de desarrollo para que los implementen. Mientras más claros y flexibles sean, más rápido y fiel será el resultado final.

¿Qué conceptos básicos vas a manejar?

En la formación se aterrizan términos que probablemente has escuchado en una daily sin entender del todo. Entre ellos están Git, GitHub, pull request, commit, merge, servidor y cliente [02:08]. La idea no es que escribas código, sino que cuando vuelvan a aparecer en una reunión sepas exactamente de qué se está hablando.

También se revisan HTML, CSS y JavaScript de forma introductoria, suficiente para entender cómo se arma una interfaz por dentro.

¿Cómo hacer diseños que no se rompan en producción?

El primer error clásico es diseñar con Lorem Ipsum. Se ve ordenado, todo encaja, pero genera una percepción falsa: el diseño se vuelve estático. En cuanto el contenido real llega desde una API, los títulos largos rompen las tarjetas y nadie sabe qué hacer.

La solución es usar data real desde el principio. Pídele al equipo de front-end una respuesta de API y trabaja con ese contenido en tu Figma.

¿Qué es una API? Es una entidad que vive en internet con una URL, por ejemplo platzi.com/api, a la que el front-end le pide datos y que responde en formato JSON con arrays y objetos que contienen propiedades como nombre del curso, imagen o progreso [16:30].

¿Cómo manejar contenido dinámico y flexible?

Un ejercicio típico: diseñar la sección "Cursos que estás tomando" en el home del estudiante. Si el nombre de una clase es una pregunta larga, ¿se corta en dos líneas? ¿Lleva ellipsis? Eso debe estar especificado en el diseño, no quedar al criterio del developer.

En Figma puedes lograr el truncado seleccionando la caja de texto y eligiendo la opción Truncate dentro de Resizing. En CSS, la propiedad equivalente es text-overflow: ellipsis, y siempre conviene consultarla en MDN para entender los valores disponibles.

¿Por qué los estados son tan importantes?

Cada componente en la web necesita comunicar qué está pasando. Si no defines el hover, el loading o el estado de error, el front-end va a improvisar.

• Estado normal: cómo se ve el componente en reposo.
• Estado hover: feedback cuando el mouse pasa por encima e indica que es cliqueable.
• Estado loading: lo que ve el usuario mientras la API responde, porque la velocidad de internet es finita.
• Estado de error: qué pasa cuando la información no llega.

Diseñar solo el camino feliz es la forma más rápida de generar fricción con ingeniería.

¿Cómo ordenar tu archivo de Figma para mejorar la implementación?

Los developers entran a tu Figma y leen los nombres de las capas. Si todo se llama Frame 1, Group 23 o row, la comunicación se rompe.

Nombrar componentes con consistencia, por ejemplo card, card-title, card-subtitle, thumbnail-container o progress [29:45], permite que esos mismos nombres viajen al código como clases CSS. El inglés es la convención más común, pero el español también funciona si tu equipo lo usa.

Este pequeño hábito acelera la implementación y hace que otros diseñadores no sufran al revisar tu archivo.

¿Cómo auditar un diseño ya implementado con DevTools?

Una vez que el equipo de ingeniería implementa tu diseño, tu trabajo no termina. Puedes revisarlo directamente en el navegador con las DevTools, disponibles en Chrome, Firefox, Opera o Safari.

Dando clic secundario y eligiendo Inspeccionar [33:30] se abre un panel con dos zonas: a la izquierda el HTML, a la derecha el CSS aplicado al elemento seleccionado. Desde ahí puedes desactivar propiedades, cambiar colores, modificar tipografías y proponer mejoras concretas al equipo con un pantallazo.

¿Qué es el modelo de caja en CSS?

Todo elemento en HTML, sea un texto, una imagen o un div, se construye con cuatro capas: contenido, padding, borde y margen. Lo encuentras visualmente en la pestaña Computed de DevTools.

La diferencia clave con Figma: en la web el borde siempre ocupa espacio dentro de la caja. No puedes elegir si va inside, center u outside como en Figma. Si agregas un borde de 3 píxeles, los elementos adyacentes se mueven 3 píxeles.

Conocer esto evita pedir cosas que en la web simplemente no existen.

¿Cómo probar el estado de carga con velocidad real?

En la pestaña Network de DevTools puedes emular conexiones lentas. Activa Disable cache y selecciona Slow 3G o Fast 3G en el menú de throttling [42:15]. Al refrescar, verás cómo se descargan las imágenes, el CSS y el JavaScript en cascada.

Esto es oro para validar si el estado de loading que diseñaste se está mostrando bien antes de que cargue el contenido real. Recuerda que la emulación solo funciona con DevTools abierto.

¿Para quién es esta formación y qué necesitas saber antes?

Está pensada para diseñadores y diseñadoras de interfaces, experiencia de usuario o product designers que quieran entrar al desarrollo web sin escribir código todavía. No hay requisitos técnicos: basta con curiosidad y haber diseñado algo antes para que los ejemplos te hagan sentido.

Si después quieres profundizar, en Platzi tienes cursos de HTML, CSS, JavaScript, programación básica gratuita y colaboración entre diseño y desarrollo para seguir creciendo.

¿Ya pusiste en práctica alguno de estos hábitos en tu último diseño? Cuéntanos en los comentarios qué fricciones has tenido con tu equipo de ingeniería.