≡En resumen
- El user interface design termina cuando el diseño está documentado para programarse, no cuando la pantalla está bonita.
- Cada fase produce entregables distintos: flujos, wireframes, mockups, prototipo, componentes y especificaciones.
- Los design tokens son el puente entre diseño y código: nombres compartidos para colores, espacios y tipografías.
- Herramientas como Figma Dev Mode o el modo Inspect de Penpot dan a desarrollo medidas, código y recursos sin tocar el diseño.
- El handoff es una conversación continua, con revisión de lo implementado, no un envío de archivos.
01 ¿Qué es el user interface design?
Es el mismo concepto que el UI design, donde explicamos sus principios, la diferencia con el diseño UX y las herramientas. Aquí nos centramos en lo que suele quedarse fuera: qué entregables produce cada fase y cómo se traspasa el trabajo a quien lo programa.
02 Fases del diseño de interfaz y sus entregables
| Fase | Entregable | Para qué sirve |
|---|---|---|
| Investigación | Hallazgos, perfiles de usuario, tareas clave | Decidir qué pantallas hacen falta y qué priorizar |
| Arquitectura | Mapa del producto y flujos de usuario | Definir caminos y pantallas antes de dibujarlas |
| Estructura | Wireframes en baja fidelidad | Validar contenido y jerarquía sin discutir colores |
| Diseño visual | Mockups en alta fidelidad | Aprobar el aspecto final de cada pantalla |
| Interacción | Prototipo navegable | Probar con usuarios y enseñar comportamientos a desarrollo |
| Sistema | Librería de componentes y design tokens | Reutilizar piezas y mantener la coherencia |
| Entrega | Especificaciones, anotaciones y recursos exportados | Programar sin adivinar medidas, estados ni comportamientos |
Los mockups son el entregable más visible, pero no el más útil para desarrollo. Lo que ahorra horas de programación es tener cada componente definido una vez, con sus variantes y estados, en lugar de pantallas sueltas con pequeñas diferencias.
03 Qué debe incluir una buena entrega a desarrollo
- ✓Todos los estados de cada componente: normal, hover, foco, pulsado, desactivado, cargando y error.
- ✓Comportamiento en cada punto de ruptura: móvil, tableta y escritorio.
- ✓Espaciados, colores y tipografías expresados como tokens, no como valores sueltos.
- ✓Casos límite de contenido: textos largos, nombres de 40 caracteres, listas vacías, cero resultados.
- ✓Mensajes de error y textos de interfaz definitivos, no texto de relleno.
- ✓Interacciones y animaciones: qué las dispara, duración y curva.
- ✓Notas de accesibilidad: orden de foco, etiquetas de campos, textos alternativos y contraste.
- ✓Iconos e imágenes exportados en el formato correcto (SVG para iconos) y con nombres claros.
- ✓Nombres de componentes iguales en el archivo de diseño y en el código.
El comportamiento por tamaños de pantalla merece su propia documentación: el diseño responsive no es solo reordenar columnas, también cambian la navegación, los tamaños de toque y lo que se muestra.
04 Design tokens: el idioma común entre diseño y código
Un design token es una decisión de diseño con nombre: en lugar de decir «este gris es #6B7280», se dice «texto secundario». Diseño y desarrollo usan el mismo nombre, y cambiar el valor actualiza todas las pantallas y plataformas. Desde el 28 de octubre de 2025 existe un formato estable para intercambiarlos: la especificación 2025.10 del Design Tokens Community Group del W3C, en JSON.
| Token | Valor | En Figma | En CSS |
|---|---|---|---|
| color.texto.secundario | #6B7280 | Variable de color «texto/secundario» | var(--color-texto-secundario) |
| espacio.m | 16 px | Variable numérica usada en auto layout | var(--espacio-m) |
| radio.boton | 8 px | Variable aplicada al radio del componente | var(--radio-boton) |
| tipo.cuerpo | Inter 16/24 | Estilo de texto «cuerpo» | Clase o variables de fuente |
Los tokens son la base de un sistema de diseño, y su equivalente programado es una librería de componentes que los consume. Cuando ambos comparten nombres, el handoff se reduce muchísimo.
05 Figma Dev Mode y otras herramientas de handoff
Figma Dev Mode
Modo para desarrolladores con inspección y fragmentos de código, estado «Ready for dev», anotaciones y medidas, comparación de cambios entre versiones, variables y Code Connect para enlazar componentes con su código real.
Integraciones de Figma
Extensión para VS Code, plugins de Jira, Storybook y GitHub, y un servidor MCP que da el contexto del diseño a asistentes de programación con IA.
Penpot Inspect
Modo de solo lectura de la herramienta de código abierto: medidas, propiedades copiables, exportación de recursos y código SVG, HTML y CSS de cada capa.
Storybook
Documenta los componentes ya programados, con sus variantes y estados, para que diseño revise lo implementado.
06 Cómo hacer el handoff paso a paso
-
1
Implica a desarrollo desde los wireframes
Detectar a tiempo qué es caro o imposible de programar evita rediseños al final.
-
2
Haz el inventario de componentes
Relaciona cada componente de diseño con el que existe o se creará en código.
-
3
Marca lo que está listo
Señala las pantallas cerradas (por ejemplo, con «Ready for dev») y separa lo que aún está en exploración.
-
4
Haz una sesión de traspaso
Recorre flujos, estados y casos límite con quien lo va a programar, y resuelve dudas en vivo.
-
5
Revisa lo implementado
Haz QA de diseño en navegador y dispositivos reales, no solo sobre capturas.
-
6
Registra los cambios
Cualquier cambio posterior se anota y se comunica; los archivos que cambian en silencio rompen la confianza entre equipos.
El equipo de diseño cierra el flujo de reserva en Figma con 14 componentes y 30 tokens. Antes de programar, diseño y desarrollo revisan juntos el selector de horas: en móvil, la cuadrícula de 7 días no cabe, así que se cambia a una lista por día. Ese ajuste, detectado en la sesión de traspaso, habría costado una semana de rehacer código si se hubiera descubierto en pruebas.
07 Errores habituales al entregar un diseño de interfaz
Solo el camino feliz
Se diseña la pantalla perfecta y se olvidan errores, cargas y estados vacíos.
Valores sueltos
Quince grises casi iguales en lugar de cinco tokens con nombre.
Componentes desconectados
Botones dibujados a mano en cada pantalla en lugar de instancias del mismo componente.
Sin notas de accesibilidad
El orden de foco, las etiquetas y el contraste se dejan a la interpretación de quien programa.
Entrega y desaparición
Nadie de diseño revisa lo implementado y las diferencias se acumulan versión tras versión.
La calidad de la entrega depende también de lo que hay antes: sin investigación, el mejor handoff documenta con precisión una interfaz que no resuelve nada. Si quieres saber cómo empezar, repasa estos métodos de investigación UX.
En appyweb, el servicio de diseño UI/UX y el equipo de desarrollo de apps a medida trabajan sobre los mismos componentes y tokens, para que lo aprobado en diseño sea exactamente lo que llega a la tienda de aplicaciones.
Preguntas frecuentes sobre User interface design
Es el diseño de la capa visual e interactiva de un producto digital y su documentación para que se programe tal como se diseñó.
Sí. UI design es la forma abreviada; en español se dice diseño de interfaz de usuario o diseño de interfaces.
Es el traspaso del diseño a desarrollo: especificaciones, estados, tokens, recursos y explicaciones necesarias para implementar las pantallas.
Mockups y prototipo, componentes con todos sus estados, design tokens, comportamiento responsive, textos definitivos, notas de accesibilidad y recursos exportados.
Es el modo de Figma para desarrolladores: permite inspeccionar medidas y código, ver qué está listo para desarrollo, comparar cambios y enlazar componentes con su código.
No. Según la ayuda de Figma, está disponible en los planes de pago y requiere un asiento Full o Dev.
El mockup es una imagen estática en alta fidelidad; el prototipo es navegable y simula interacciones para probarlas con usuarios o enseñarlas a desarrollo.
Fuentes consultadas
Sobre el autor
Germán Gutiérrez
Development Manager en appyweb
Dirige el equipo de desarrollo de appyweb: aplicaciones web y móviles, SaaS, integraciones y arquitectura de software.
Ver perfil en LinkedIn ↗