Empezando con Figma (3.5 horas)

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

Las cosas esenciales que necesitas saber para convertirte en un diseñador de interfaz de usuario con Figma. ¡El único curso grabado después de las características de Figma23!

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

Conseguir Figma - Proceso de registro
Figma en el navegador vs. Aplicación de Figma
El navegador de archivos de Figma - La página principal de Figma
Crear archivos de diseño en Figma

Conceptos básicos de Figma

Agregar marcos a nuestro archivo
Algunos atajos útiles
Visión general del archivo de diseño
Agregar formas y color
Menú de tamaño - manipulación de formas y marcos
Alinear, ordenar y medir
Agregar y trabajar con texto
Anidar marcos - El superpoder de Figma
Marcos vs Grupos
Diseñar con marcos anidados
Cuadrículas reutilizables con estilos
Comunidad de Figma y complementos
Agregar imágenes
Dibujar en Figma
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

Reutilizar elementos con componentes e instancias
Anulación de instancias
Qué anular y qué no
Revertir componentes y anulaciones
Anidar componentes
Conjuntos de componentes con variantes
Mover componentes a su propia página
Mantener organizados los componentes
Introducción a funciones de componentes avanzadas

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

Variables y Estilos

Introducción a las variables
Trabajar con variables de color
Organizar con colecciones y grupos de variables
Variables de tamaño y espaciado
¿Y qué hay de los estilos?
Tipografía y estilos
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

¿Qué es el auto layout?
Agregar auto layout
Componentes y variables de auto layout
Configuración de redimensionamiento
Automático o espacio entre
Anidar auto layout con sistema
Posicionamiento absoluto
Páginas de auto layout
Restricciones en Figma
Restricciones y cuadrículas
¿Qué tamaño de marco debo usar?

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

Prototipado en Figma

Configurar comportamiento de desplazamiento
Conectar pantallas
Menú desplegable con superposiciones
Tipos de animación
Componentes interactivos
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

Configurar una miniatura
Bibliotecas de equipo compartidas en Figma
Configurar una biblioteca de equipo compartida
Conectar a una biblioteca de equipo compartida
Actualizar bibliotecas de equipo compartidas
Compartir diseño, componentes, estilos y variables
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.io con moon learning moonlearning

Daniel Pineda

Graphic designer

1

3