📋 Descripción

En este apartado se encuentra el material del curso de Introducción al Diseño UX/UI con Figma.

En esta clase se abordan los conceptos esenciales del diseño centrado en el usuario, su proceso, metodologías y herramientas, incluyendo el uso fundamental de Figma para la creación de interfaces.

📎 Adjunto : Se incluye la diapositiva usada en la sesión:

🧰 Recursos

📚 Curso UX/UI: Introducción y primeros pasos

El diseño UX/UI se centra en crear productos digitales que sean útiles, intuitivos y visualmente agradables. A lo largo de este curso se desarrollarán fundamentos clave, desde la investigación del usuario hasta la creación de wireframes y componentes reutilizables.

1. Introducción al Diseño UX/UI (Historia y Definiciones)

Diferencia entre UX (Experiencia de Usuario) y UI (Interfaz de Usuario).
Historia del diseño digital y su evolución.
Principios básicos de usabilidad.
Diseño centrado en el usuario.

2. Proceso de diseño y desarrollo

El diseño UX/UI utiliza procesos iterativos como:

Design Thinking
Doble Diamante
Etapas: Investigar → Definir → Idear → Prototipar → Testear

Este proceso permite construir soluciones orientadas a las necesidades reales del usuario.

3. Investigación de Usuario

User Persona

Representación semi-ficticia del usuario objetivo.

User Journey

Mapa que describe cómo el usuario interactúa con un producto.

Incluye:

Emociones
Dolor (pains)
Necesidades
Oportunidades

4. Definición de Funcionalidades

Identificación de requerimientos.
Inspiración visual (Moodboards).
Tips para organizar ideas.
Recursos para buscar referencias (Dribbble, Behance, FlowMapp).

5. Introducción a Figma

Entorno de trabajo.
Herramientas básicas.
Uso de plugins.
Alineaciones, grids y frames.

6. Auto Layout en Figma

Auto Layout ayuda a crear interfaces responsivas y consistentes.

Dirección
Espaciado
Padding
Auto-resize

7. Wireframes

Los wireframes permiten planificar la estructura sin enfocarse en lo visual.

Baja fidelidad: bocetos simples.
Media fidelidad: distribución clara de contenido.
Alta fidelidad: apariencia cercana al diseño final.

8. Atomic Design (Creación de componentes)

Metodología que permite crear sistemas escalables:

Átomos → Botones, inputs.
Moléculas → Formularios simples.
Organismos → Secciones completas.
Plantillas y páginas.

9. Naming (Buenas prácticas en Figma)

Nombrar Frames, componentes y variantes correctamente.
Uso coherente de prefijos.
Organización con Assets y Libraries.

👨‍💻 Autor - Facilitador

Alan Israel Arnez Flores

🇧🇴 La Paz - Bolivia 2025