Recursos Figma — Diplomatura UX/UI

🎯

N0

Primeros pasos

Explorá el canvas

Abrí Figma y creá un frame de iPhone 14. Adentro: un rectángulo de fondo, un texto con el nombre de una app inventada por vos y un ícono simple con formas básicas. Cambiá los colores hasta que algo te guste. El objetivo no es que quede perfecto — es que pierdas el miedo al canvas.

🎯

N1

Primeros diseños

Tu primera pantalla

Diseñá una pantalla de bienvenida (splash screen) para una app inventada por vos. Debe incluir: nombre de la app, un subtítulo, un botón de CTA y al menos un elemento decorativo. Usá colores y tipografía coherentes. No uses imágenes externas — solo formas, texto y color.

🎯

N2

Auto Layout y Componentes

Componente Button con variantes

Creá un componente Button con Auto Layout y 3 variantes: Default, Hover y Disabled. El texto y el ícono (opcional) deben ser propiedades del componente. Después usá ese componente 5 veces en un frame para armar una mini UI. Si cambiás el componente base, las instancias deben actualizarse solas.

🎯

N3

Prototipos

Flujo de onboarding con 3 pantallas

Diseñá un onboarding de 3 pasos para una app a tu elección. Conectá las pantallas con transiciones (slide o dissolve) y agregá un botón "Saltar" en cada pantalla que lleve directo al home. La última pantalla debe tener un CTA principal que también lleve al home. Compartí el link de prototipo para que se pueda testear.

🎯

N4

Nivel avanzado

Mini Design System con modo claro y oscuro

Creá una página "Design System" con: paleta de colores como estilos, escala tipográfica (H1, H2, Body, Caption) y 3 componentes mínimos (Button, Input, Card). Usá Variables para implementar un modo claro/oscuro que se pueda cambiar desde el prototipo. Cualquier cambio en un token debe propagarse a todos los componentes.

Lecturas recomendadas

Diseño que se aprende leyendo

Principios, herramientas y reflexiones sobre diseño UX/UI, composición visual e inteligencia artificial.

★ Lectura esencial

Las 10 heurísticas de usabilidad de Jakob Nielsen

En 1994, Jakob Nielsen sistematizó los 10 principios que definen si una interfaz es usable o no. Visibilidad del estado del sistema, correspondencia con el mundo real, control del usuario, consistencia, prevención de errores... Tres décadas después siguen siendo el framework de evaluación más citado del mundo. Una lectura obligatoria antes de diseñar cualquier pantalla.

Jakob Nielsen · NN/g

8 min de lectura

Gestalt aplicada al UI: cómo el cerebro organiza lo que ve

Proximidad, similitud, cierre, continuidad. Los principios de la psicología Gestalt no son teoría abstracta: son la razón por la que un grupo de botones parece "junto" o "separado" en tu diseño.

6 min · Smashing Magazine

IA generativa en el flujo de diseño: criterio antes que prompt

Midjourney, Firefly, ChatGPT para copy. Las herramientas no faltan. El problema es saber cuándo usarlas y cuándo el criterio humano no tiene reemplazo. Una guía para integrar IA sin perder el ojo.

Escala tipográfica y jerarquía visual: más que elegir una fuente

El tamaño, el peso y el interlineado hacen más por la legibilidad que el tipo elegido. Cómo construir una escala coherente desde cero y por qué el contraste tipográfico dirige la atención.

Herramienta · typescale.com

Color como sistema, no como decoración

Un color mal elegido no es un problema estético: es un problema funcional. Semántica del color, contraste WCAG, paletas de 60-30-10 y cómo los tokens de color hacen que los sistemas escalen.

Libro · Refactoring UI

Carga cognitiva: diseñar para el cerebro que no quiere pensar

George Miller y sus "7 ± 2 elementos". La ley de Hick. El efecto von Restorff. Qué dice la psicología cognitiva sobre cómo las personas procesan interfaces — y cómo aplicarlo a cada decisión de diseño.

Design systems: por qué pensar en componentes cambia todo

Un botón no es un botón: es un átomo de un sistema. La metodología de Atomic Design, los beneficios de consistencia a escala y por qué Figma es la herramienta ideal para construir y documentar sistemas.

Libro · Brad Frost

Accesibilidad desde el origen, no como afterthought

WCAG 2.1, contraste 4.5:1, texto alternativo, foco visible. Diseñar accesible no es agregar trabajo al final: es tomar las decisiones correctas desde la primera pantalla. Además, lo que es accesible es mejor para todos.

6 min · W3C WAI

Motion design: cuándo animar y cuándo quedarse quieto

Las 12 principios de Disney aplicados a UI. La diferencia entre una animación que orienta y una que distrae. Duración, easing y el principio de "el movimiento tiene que ganarse el espacio que ocupa".

5 min · Material Design

El diseñador en la era de la IA: co-creación o sustitución

La IA no reemplaza el criterio: reemplaza las tareas mecánicas. Qué habilidades van a importar más — pensamiento sistémico, investigación, escritura de diseño — y cómo empezar a desarrollarlas hoy.