NUEVO Figma 2024: Fundamentos de UI con Figma de principiante a profesional | Christine Vallaure | Skillshare
Drawer
Search

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

NUEVO Figma 2024: Fundamentos de UI con Figma de principiante a profesional

teacher avatar Christine Vallaure, UI/UX DESIGN, FIGMA + CODE

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and 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.

77

Students

1

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

  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.io con moon learning moonlearning

Meet Your Teacher

Teacher Profile Image

Christine Vallaure

UI/UX DESIGN, FIGMA + CODE

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

Level: Beginner

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

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.