Figma 2024: UI con Figma de principiante a profesional

Las cosas esenciales que necesitas saber para convertirte en un diseñador de interfaz de usuario con Figma.

Ratings: 5.00 / 5.00




Description

Empezando con Figma (3.5 horas)

Un curso para principiantes en diseño UX/UI con Figma

Este curso es una introducción completa a Figma, desde un principiante absoluto hasta las funciones avanzadas. Corto y enfocado, proporcionándote todo lo que necesitas saber para abordar cualquier diseño.

Comenzaremos desde cero configurando tu cuenta de Figma y familiarizándonos con su estructura de archivos. Luego, nos sumergiremos en los fundamentos de Figma, como configurar marcos y anidarlos, agregar formas, texto, colores y cuadrículas, y crear diseños de UI sólidos. Una vez que te sientas cómodo con lo básico, profundizaremos en temas más avanzados como la creación de diseños de UI sólidos y trabajar con componentes para elementos reutilizables.

Aprenderás cómo establecer estilos y variables para la consistencia, crear diseños responsivos con diseño automático y agregar prototipos básicos para dar vida a tus diseños, siempre teniendo en cuenta la colaboración con el desarrollo.

Con ejercicios paso a paso y valiosos consejos y trucos, te convertirás en un experto en Figma en menos de 4 horas. Es perfecto para principiantes o aquellos que cambian de otro software de diseño como Sketch o Adobe XD a Figma.


Empezando

  1. Conseguir Figma - Proceso de registro

  2. Figma en el navegador vs. Aplicación de Figma

  3. El navegador de archivos de Figma - La página principal de Figma

  4. Crear archivos de diseño en Figma


Conceptos básicos de Figma

  1. Agregar marcos a nuestro archivo

  2. Algunos atajos útiles

  3. Visión general del archivo de diseño

  4. Agregar formas y color

  5. Menú de tamaño - manipulación de formas y marcos

  6. Alinear, ordenar y medir

  7. Agregar y trabajar con texto

  8. Anidar marcos - El superpoder de Figma

  9. Marcos vs Grupos

  10. Diseñar con marcos anidados

  11. Cuadrículas reutilizables con estilos

  12. Comunidad de Figma y complementos

  13. Agregar imágenes

  14. Dibujar en Figma

  15. Escalado en Figma

--> PROYECTO DEL CURSO Parte 1.1: Creando nuestro boceto de alambre

--> PROYECTO DEL CURSO 1.2: Boceto de alambre a diseño


Introducción a los componentes

  1. Reutilizar elementos con componentes e instancias

  2. Anulación de instancias

  3. Qué anular y qué no

  4. Revertir componentes y anulaciones

  5. Anidar componentes

  6. Conjuntos de componentes con variantes

  7. Mover componentes a su propia página

  8. Mantener organizados los componentes

  9. Introducción a funciones de componentes avanzadas

PROYECTO DEL CURSO Parte 2: Convirtiendo nuestro diseño en componentes


Variables y Estilos

  1. Introducción a las variables

  2. Trabajar con variables de color

  3. Organizar con colecciones y grupos de variables

  4. Variables de tamaño y espaciado

  5. ¿Y qué hay de los estilos?

  6. Tipografía y estilos

  7. Documentar variables y estilos

PROYECTO DEL CURSO Parte 3.1: Agregando variables de color

PROYECTO DEL CURSO Parte 3.2: Agregando Estilos de Texto


Diseño Responsivo

  1. ¿Qué es el auto layout?

  2. Agregar auto layout

  3. Componentes y variables de auto layout

  4. Configuración de redimensionamiento

  5. Automático o espacio entre

  6. Anidar auto layout con sistema

  7. Posicionamiento absoluto

  8. Páginas de auto layout

  9. Restricciones en Figma

  10. Restricciones y cuadrículas

  11. ¿Qué tamaño de marco debo usar?

PROYECTO DEL CURSO Parte 4: Haciendo nuestro diseño responsivo


Prototipado en Figma

  1. Configurar comportamiento de desplazamiento

  2. Conectar pantallas

  3. Menú desplegable con superposiciones

  4. Tipos de animación

  5. Componentes interactivos

  6. Espejo de Figma - Vista previa en tu dispositivo

PROYECTO DEL CURSO Parte 5: Convirtiendo nuestro diseño en un prototipo


Compartiendo con otros diseñadores y desarrolladores

  1. Configurar una miniatura

  2. Bibliotecas de equipo compartidas en Figma

  3. Configurar una biblioteca de equipo compartida

  4. Conectar a una biblioteca de equipo compartida

  5. Actualizar bibliotecas de equipo compartidas

  6. Compartir diseño, componentes, estilos y variables

  7. Dev Modo: Compartir con desarrollo

Aprovecha Figma para mejorar tus perspectivas en Diseño UI, Interfaz de Usuario, Diseño de Experiencia de Usuario, Diseño UX y Diseño Web, facilitando tu camino para asegurar un trabajo trabajando con Diseño UX/UI en Figma.

Este es un curso original de moonlearning

© moonlearning con moon learning


What You Will Learn!

  • ¡Configura tu propia cuenta gratuita en Figma!
  • Configuración de Diseños de Interfaz de Usuario con Figma
  • Configura un Diseño de Interfaz de Usuario completo con Figma
  • Comparte tu trabajo con otros Diseñadores y Desarrolladores
  • Haz que tus Diseños Destaquen en el Modo de Presentación
  • Prototipado Básico con Figma
  • Creación de elementos reutilizables con componentes
  • Conjuntos de componentes avanzados con variantes
  • Comprensión de variables y estilos
  • Mantente actualizado con las últimas versiones
  • Comparte y documenta tu diseño con desarrollo
  • Crea bibliotecas de equipos compartidas
  • Creación de guías de estilo simples para color, tipografía y espaciado
  • Crea microinteracciones simples para botones y desplazamientos
  • Trabaja en equipo
  • Recursos gratuitos para ser utilizados de inmediato en tus diseños
  • Archivos de ejercicios de Figma para que puedas trabajar junto a mí

Who Should Attend!

  • Principiantes, usuarios más avanzados que buscan obtener una visión general más completa, así como cualquier persona que esté cambiando desde otro software.