Diseño de interfaces (UI) y web con Figma | Curso de diseño gráfico gratis: de básico a avanzado

Lo que lograrás en esta lección

Entender la diferencia entre UX y UI y el proceso para diseñar una pantalla.
Usar Figma: marcos, componentes, variantes, auto layout y prototipos.
Diseñar interfaces claras: estados, tamaños táctiles, formularios y diseño adaptable.
Preparar tu diseño para que un desarrollador lo construya.

Las aplicaciones y las webs son hoy uno de los campos con más demanda para los diseñadores. El diseño de interfaces usa todo lo que has aprendido (jerarquía, color, tipografía, retículas), pero añade algo nuevo: la persona no solo mira, también interactúa. Un botón tiene que parecer pulsable, un formulario debe poder completarse sin errores y todo debe funcionar en un celular y en una pantalla grande.

UX y UI

	UX (experiencia de usuario)	UI (interfaz de usuario)
Pregunta	¿Qué necesita la persona y cuál es el camino más sencillo para lograrlo?	¿Cómo se ve y se siente cada pantalla y cada elemento?
Entregables	Investigación, flujos, arquitectura de información, wireframes, pruebas	Pantallas en alta calidad, componentes, sistema de diseño
Analogía	El plano de la casa	Los materiales, colores y acabados

En equipos pequeños, la misma persona suele hacer ambas cosas. Para entender cómo se construye después lo que diseñas, te ayudará leer qué son las aplicaciones web y la diferencia entre frontend y backend.

El proceso para diseñar una pantalla

Objetivo y usuario: ¿quién usa esta pantalla y qué necesita lograr? ("Hacer un pedido de café en menos de un minuto desde el celular").
Flujo: los pasos y las pantallas: catálogo → producto → carrito → datos de envío → pago → confirmación.
Wireframes: bocetos en baja calidad (grises, cajas, sin colores) para decidir la estructura y el contenido.
Diseño visual: aplicar la identidad, la tipografía, el color y los componentes.
Prototipo: conectar las pantallas para simular el uso.
Prueba con usuarios: pide a 4 o 5 personas que hagan la tarea mientras piensan en voz alta. Con pocas pruebas ya aparecen la mayoría de los problemas importantes.
Iterar y entregar a desarrollo.

Figma en 10 conceptos

Concepto	Qué es
Marco (frame)	Un contenedor; las pantallas son marcos con el tamaño de un dispositivo
Capas y grupos	Los elementos y su organización (nómbralos bien)
Retícula de diseño (layout grid)	Columnas y márgenes del marco (lección 5)
Estilos y variables	Colores, textos y valores guardados con nombre para reutilizarlos en todo el archivo
Componentes	Elementos reutilizables (botón, campo, tarjeta). Editas el principal y se actualizan todas sus copias (instancias)
Variantes	Versiones de un componente agrupadas: botón primario/secundario, normal/desactivado
Auto layout	Hace que un marco se adapte a su contenido con espaciados fijos, como en la web: el botón crece si el texto es más largo
Restricciones	Cómo se comporta un elemento cuando cambia el tamaño del marco
Prototipo	Conexiones entre pantallas con interacciones (clic, arrastre) y animaciones
Bibliotecas	Componentes y estilos compartidos entre archivos y personas del equipo

1. Tienes el mismo botón en 30 pantallas y el cliente quiere cambiar su color y su radio de esquina. ¿Qué te ahorra el trabajo en Figma?

Copiar y pegar el botón nuevo en cada pantalla.
Que el botón sea un componente: cambias el principal y se actualizan todas las instancias.
Exportar las pantallas como imagen.

Los componentes son la base del diseño de interfaces escalable.

Principios de interfaz

Que parezca lo que es

Un botón debe parecer pulsable (forma, color, texto de acción); un enlace, distinguirse del texto normal; un campo, invitar a escribir. Si la persona duda de si algo se puede tocar, el diseño falla.

Estados

Cada elemento interactivo necesita varios estados, y hay que diseñarlos todos:

Estado	Cuándo
Normal	En reposo
Al pasar el ratón (hover)	En computadora, cuando el cursor está encima
Presionado	En el momento del clic o toque
Foco	Cuando se llega con el teclado (imprescindible para la accesibilidad)
Desactivado	Cuando aún no se puede usar
Cargando, éxito, error	Respuesta del sistema a la acción

Tamaño táctil

Los dedos no son cursores. Las guías de las plataformas recomiendan áreas táctiles mínimas de unos 44 × 44 puntos (Apple) o 48 × 48 dp (Material Design de Google), con espacio entre elementos para no pulsar el equivocado.

Formularios

Etiquetas visibles encima del campo (el texto de ejemplo dentro del campo desaparece al escribir y no sustituye a la etiqueta).
Pide solo los datos necesarios.
El teclado adecuado en el celular (numérico para el teléfono, de correo para el email).
Errores claros, junto al campo, que digan cómo corregirlos: "El número debe tener 9 dígitos", no "Error".

2. ¿Qué mensaje de error es mejor en un formulario?

"Error 422".
"Dato inválido".
"El correo debe incluir @ (por ejemplo, ana@correo.com)", junto al campo.

Un buen mensaje dice qué pasó, dónde y cómo corregirlo.

Diseño adaptable (responsive)

Una misma web se verá en pantallas de 360 px a más de 1.920 px de ancho. Diseña al menos dos versiones: móvil (por ejemplo, 390 px de ancho, retícula de 4 columnas) y escritorio (por ejemplo, 1.440 px con un contenedor de 1.200 px y 12 columnas, lección 5). Muchos equipos diseñan primero la versión móvil (mobile first): obliga a priorizar lo esencial. En móvil, las columnas se apilan, los menús se pliegan y los textos se adaptan, pero la jerarquía y el orden del contenido deben mantenerse.

Sistemas de diseño

Cuando un producto crece, se crea un sistema de diseño: la colección de tokens (colores, tipografía, espacios, radios, sombras), componentes con sus variantes y reglas de uso, compartida por diseño y desarrollo. Es la versión digital y viva del manual de marca (lección 9). Para empezar, no reinventes: estudia sistemas públicos como Material Design (Google) o las guías de interfaz de Apple, y kits de componentes de la comunidad de Figma.

Entregar a desarrollo

Nombra capas, componentes y pantallas con claridad.
Usa estilos y variables para todos los colores, textos y espacios (sin valores sueltos).
Incluye todos los estados, la versión móvil y la de escritorio, y los casos límite: textos largos, listas vacías, errores.
Exporta iconos en SVG y marca qué elementos se exportan.
Revisa con el desarrollador antes de cerrar: lo que es fácil o difícil de construir puede cambiar decisiones.

Figma ofrece un modo para desarrolladores que muestra medidas, estilos y código de referencia (disponible según el plan).

3. ¿Cuántas personas necesitas, como punto de partida, para una prueba de usabilidad que revele los problemas principales de un flujo?

Al menos 500.
Unas 4 o 5 por ronda, repitiendo la prueba tras corregir.
Ninguna: basta con la opinión del cliente.

Pocas pruebas cualitativas descubren la mayoría de los problemas graves; es mejor hacer varias rondas pequeñas que una grande.

Ejercicio práctico: el pedido de café en el celular

Dibuja el flujo de pedido en 5 pantallas.
Haz los wireframes en Figma en escala de grises.
Crea los componentes: botón (primario, secundario; normal, presionado, desactivado), tarjeta de producto, campo de formulario (normal, foco, error) y barra de navegación.
Diseña las pantallas en alta calidad con auto layout y la identidad de la cafetería.
Conecta un prototipo y pruébalo con 3 personas: ¿completan el pedido sin ayuda?

Ver el flujo y los puntos de atención

1. Catálogo: filtros por método (chips), tarjetas con foto, nombre,
   notas de sabor y precio; botón "Añadir".
2. Producto: selector de molienda (variantes), cantidad, botón fijo
   abajo "Añadir al carrito · S/ 45".
3. Carrito: lista editable, envío calculado, total visible, botón
   "Continuar".
4. Envío y pago: pocos campos, teclado numérico para el teléfono,
   métodos de pago populares, errores junto al campo.
5. Confirmación: número de pedido, fecha estimada y botón "Seguir
   comprando".

Atención: áreas táctiles de al menos 44 px, botón principal al
alcance del pulgar, contraste suficiente y estado de carga en "Pagar".

Resumen

UX define el camino; UI, cómo se ve y se siente cada pantalla.
Proceso: objetivo, flujo, wireframes, diseño visual, prototipo, prueba con usuarios.
En Figma, componentes, variantes, estilos y auto layout permiten diseñar sistemas escalables.
Diseña todos los estados, áreas táctiles generosas, formularios claros y versiones móvil y escritorio.
Un sistema de diseño y una buena entrega facilitan el trabajo con desarrollo.

En la próxima lección convertirás todo lo aprendido en una carrera: portafolio, precios, trabajo con clientes y el papel de la IA en el diseño.