Introducción a Figma

Introducción a Figma

Aspectos básicos y utilidades en el diseño

Lic. BBAA Jocelyn Ford Perea

¿Qué es el diseño UX/UI?

¿Para qué sirve el diseño UX/UI?

Índice

Figma: Características principales

Figma: Tour en la interfaz

Ejercicio práctico

¿Qué es el diseño UX/UI?

• UX (User Experience) o Experiencia del Usuario se enfoca en cómo se siente una persona al usar un producto digital: una app, una página web o una interfaz.

• UI (User Interface) o Interfaz de Usuario se refiere a cómo se ve y se organiza visualmente ese producto: colores, botones, tipografía, iconos, etc.

Ejemplo: piensa en una aplicación como Spotify

• UX es que puedas encontrar fácilmente tu música.

• UI es el aspecto visual: colores, íconos, pantallas.

¿Para qué sirve el diseño UX/UI?

• Para crear experiencias digitales agradables y funcionales.

• Para hacer que los usuarios disfruten y comprendan cómo usar una app, una web o un sistema.

• Para unir el arte y la tecnología en un diseño visual que también sea útil.

En pocas palabras: UX/UI busca que las cosas se vean bien y funcionen bien.

Figma: Características Principales

• Figma es una herramienta de diseño digital que funciona en internet (no necesitas instalar nada)
• Sirve para diseñar interfaces: apps, páginas web, dashboards, etc.
• Prototipar (conectar pantallas para simular navegación)
• Crear componentes y sistemas de diseño
• Compartir diseños y colaborar

Los diseñadores UX/UI son esenciales porque transforman ideas en experiencias digitales reales, combinando creatividad y empatía con las personas usuarias.

Figma: Características Principales

¿Qué es un Frame? Frame = pantalla / marco.El frame es como “la hoja” donde diseñamos la pantalla.Auto Layout: sirve para que un contenedor acomode automáticamente los elementos adentro.¿Qué es un Layout? Layout es la estructura u organización visual de una pantalla.¿Qué es un componente en Figma y para qué sirve?Un componente es un elemento maestro que se puede repetir muchas veces. ¿Qué es un Input en UI?Un input es un elemento donde el usuario puede escribir información.

Tour rápido de la interfaz

• Panel izquierdo:

Layers (capas) → organizas elementos Assets (componentes, librerías)

• Centro: Lienzo donde diseñas

• Panel derecho:

Propiedades (tamaño, color, tipografías, bordes, auto layout, etc.)

• Barra superior:

Herramientas: mover, frame, shapes, texto, comentario, prototipado.

Conclusiones

• Figma es una herramienta muy útil para el diseño de interfaces web, permitiéndonos crear diseños eficientes y colaborar en equipo de manera efectiva.

• Su enfoque basado en la nube facilita la accesibilidad y la edición en tiempo real, lo que mejora la productividad.

• Una vez que el diseño está finalizado, el siguiente paso es convertirlo en una web funcional empleando técnicas de maquetado HTML, CSS y JavaScript en editores como VS Code.

Ejercicio práctico

Diseñar una pantalla de inicio sencilla para una app móvil:

• Frame tamaño iPhone

• Agregar:

Logo (puede ser un circulo con color y texto dentro)Título (Texto grande). Subtítulo o descripción smallBotón principal (con auto layout) Conectar el botón de la primera pantlla a la segunda (prototipo) Ejemplo de Prototipo Web Ejemplo de Prototipo App