Figma 2024: UI con Figma de principiante a profesional

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

TAKE THIS COURSE