NUEVO Figma 2024: Fundamentos de UI con Figma de principiante a profesional
Christine Vallaure, UI designer, speaker & teacher
Watch this class and thousands more
Watch this class and thousands more
Lessons in This Class
-
-
1.
00 Intro ES
3:13
-
2.
01 Sobre la versión en español
1:02
-
3.
02 ¿Qué es Figma y quién realiza la programación?
2:06
-
4.
CONFIGURACIÓN - 01 Proceso de Registro en Figma
2:38
-
5.
CONFIGURACIÓN - 02 Figma en el Navegador vs
1:25
-
6.
CONFIGURACIÓN - 03 El navegador de archivos La página principal de Figma
4:03
-
7.
CONFIGURACIÓN - 04 Creando archivos de diseño en Figma
1:40
-
8.
IMPORTANTE - Archivo de trabajo
1:02
-
9.
BÁSICOS - 01 Agregando marcos a nuestro archivo
2:10
-
10.
BÁSICOS - 02 Atajos útiles
0:48
-
11.
BÁSICOS - 03 El archivo de diseño
2:48
-
12.
BÁSICOS - 04 Añadiendo formas y color
3:31
-
13.
BÁSICOS - 05 Menú de tamaño – manipulación de formas y marcos
3:29
-
14.
BÁSICOS - 06 Alinear ordenar y medir
2:15
-
15.
BÁSICOS - 07 Añadiendo y trabajando con texto
5:56
-
16.
BÁSICOS - 08 Anidando marcos – el superpoder de Figma
3:00
-
17.
BÁSICOS - 09 Marcos vs Grupos
3:12
-
18.
BÁSICOS - 10 Diseñando con marcos anidados
7:49
-
19.
BÁSICOS - 11 Rejillas reutilizables con estilos
3:43
-
20.
BÁSICOS - 12 Comunidad y complementos de Figma
2:57
-
21.
BÁSICOS - 13 Agregando imágenes
3:13
-
22.
BÁSICOS - 15 Duplicar
3:15
-
23.
BÁSICOS - 16 Dibujando en Figma
2:01
-
24.
BÁSICOS - 17 Escalando en Figma
1:51
-
25.
--> PROYECTO
2:01
-
26.
--> PROYECTO Parte 1.1: Boceto de alambre
15:57
-
27.
--> PROYECTO Parte 1.2: Diseño
11:44
-
28.
COMPONENTES - 01 Reutilizar elementos con componentes y instancias
3:43
-
29.
COMPONENTES - 02 Sobrescribiendo instancias
3:23
-
30.
COMPONENTES - 03 Qué sobrescribir y qué n0
0:49
-
31.
COMPONENTES - 04 Revirtiendo componentes y anulaciones
1:50
-
32.
COMPONENTES - 05 Anidamiento de componentes
1:39
-
33.
COMPONENTES - 06 Conjuntos de componentes con variantes
4:04
-
34.
COMPONENTES - 07 Mover componentes a su propia página
2:40
-
35.
COMPONENTES - 08 Manteniendo organizados los componentes
3:46
-
36.
--> PROYECTO Parte 2: Componentes
9:49
-
37.
VARIABLES Y ESTILOS - 01 Introducción a las variables en Figma
0:59
-
38.
VARIABLES Y ESTILOS - 02 Trabajar con variables de color
6:08
-
39.
VARIABLES Y ESTILOS - 03 Organizando variables con colecciones y grupos
2:35
-
40.
VARIABLES Y ESTILOS - 04 Variables de tamaño y espaciado
1:15
-
41.
VARIABLES Y ESTILOS - 05 Y ¿qué pasa con los estilos?
4:39
-
42.
VARIABLES Y ESTILOS - 06 Tipografía y estilos
3:32
-
43.
VARIABLES Y ESTILOS - 07 Documentación de variables y estilos
5:09
-
44.
DISEÑO RESPONSIVO - 01 ¿Qué es auto layout?
1:17
-
45.
--> PROYECTO Parte 3.1: Variables de color
7:29
-
46.
--> PROYECTO Parte 3.2: Variables de text
4:07
-
47.
DISEÑO RESPONSIVO - 02 Agregar auto layout
3:23
-
48.
DISEÑO RESPONSIVO - 03 Componentes y variables en auto layout
1:48
-
49.
DISEÑO RESPONSIVO - 04 Resize – Configuración de redimensionamiento
4:17
-
50.
DISEÑO RESPONSIVO - 05 Auto o space between
1:43
-
51.
DISEÑO RESPONSIVO - 06 Anidando auto layout con el sistema
7:11
-
52.
DISEÑO RESPONSIVO - 07 Posicionamiento absoluto en auto layout
1:54
-
53.
DISEÑO RESPONSIVO - 08 Páginas de auto layout
7:22
-
54.
DISEÑO RESPONSIVO - 09 Constraints en Figma
2:06
-
55.
DISEÑO RESPONSIVO - 10 Restricciones y cuadrícula
2:45
-
56.
DISEÑO RESPONSIVO - 11 ¿Qué tamaño de marco debería usar?
3:02
-
57.
PROTOTIPADO - 01 Prototipado en Figma
3:08
-
58.
PROTOTIPADO - 02 Configurando el comportamiento de desplazamiento
3:14
-
59.
PROTOTIPADO - 03 Conectando pantallas
4:57
-
60.
PROTOTIPADO - 04 Menú desplegable con superposiciones
1:41
-
61.
PROTOTIPADO - 05 Tipos de animación
3:49
-
62.
PROTOTIPADO - 06 Componentes interactivos
3:04
-
63.
PROTOTIPADO - 07 Figma Mirror – Vista previa en tu dispositivo
2:04
-
64.
--> PROYECTO Parte 5: Prototipo
6:13
-
65.
COMPARTIR - 01 Compartir e invitar a otros
3:20
-
66.
COMPARTIR - 02 Estableciendo una vista previa
2:27
-
67.
COMPARTIR - 03 Bibliotecas de equipo compartidas en Figma
1:01
-
68.
COMPARTIR - 04 Configurando una biblioteca de equipo compartida
1:19
-
69.
COMPARTIR - 05 Conectando a una biblioteca de equipo compartida
1:44
-
70.
COMPARTIR - 06 Actualizando bibliotecas de equipo compartidas
2:14
-
71.
COMPARTIR - 07 Compartiendo diseño, componentes, estilos y variables
3:35
-
72.
COMPARTIR - 08 Dev Mode – Compartiendo con el equipo de desarrollo
5:49
-
-
- --
- Beginner level
- Intermediate level
- Advanced level
- All levels
Community Generated
The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.
121
Students
2
Projects
About This Class
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
Meet Your Teacher
Hi, I'm Christine Vallaure, founder of moonlearning a UX/UI design Figma learning hub. . moonlearning is my pet project that has turned into a full-time job, and I couldn't be happier about it. I love talking, teaching, and writing about UX/UI design and Figma, always encouraging UI designers and developers to be curious about each other's work.
Besides video tutorials, I also offer live and online workshops and speak at conferences and meetups. Connect with me on Twitter, LinkedIn, YouTube and via my newsletter, so I can keep you updated on future moonlearning adventures.
You will find a small selection of some of my original moonlearning courses here on skillshare. Content is shortened and adjusted to the skillshare format. Enjoy!
www.moonlearning.io
See full profile
Hands-on Class Project
PARA DESCARGAR LOS ARCHIVOS DE EJERCICIO, HAZ CLIC AQUÍ
No te preocupes; discutiremos el manejo de archivos con más detalle más adelante. ¡Puedes descargar el archivo en cualquier momento, pero asegúrate de hacerlo! ¡No hay nada como probar todo lo que te muestro por ti mismo!
Si haces clic en el botón de descarga, el archivo debería abrirse directamente en tu cuenta de Figma. Podría abrirse en el navegador, dependiendo de tu configuración, pero se guardarán en tus DRAFTS, y desde allí puedes moverlos a cualquier otro equipo o proyecto. Alternativamente, simplemente haz clic en la pequeña flecha junto al nombre del archivo en el navegador, y también puedes enviarlo a cualquier otro equipo o proyecto. ¡Disfruta!
Class Ratings
Why Join Skillshare?
Take award-winning Skillshare Original Classes
Each class has short lessons, hands-on projects
Your membership supports Skillshare teachers
Learn From Anywhere
Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.
