Creación de Interfaces con FIGMA
4.1 (114 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
350 students enrolled

Creación de Interfaces con FIGMA

Aprende a utilizar esta poderosa herramienta y cambia la manera de trabajar
4.1 (114 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
350 students enrolled
Last updated 5/2020
Spanish
Spanish [Auto-generated]
Current price: $13.99 Original price: $19.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 7.5 hours on-demand video
  • 11 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Assignments
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Identificar, Conocer y usar las herramientas proporcionadas por FIGMA para realizar interfaces y otros elementos.
  • Usar la Herramienta Colaborativa de FIGMA para compartir tus diseño y recibir Feedback
  • Construir su propio Flujo de trabajo(Workflow) para realizar proceso creativo en FIGMA
Requirements
  • Aplicación FIGMA instalada(Curso demuestra como instalar), Tener nociones básicas sobre diseño web, o diseño gráfico, para la creación de interfaces.
Description

FIGMA se ha convertido en una potente herramienta para quienes hacemos UI/UX, permite crear elementos de una alta calidad gráfica de manera muy sencilla, la interacción con el cliente y equipos de trabajo, además de realizar todo esto con sencillez.

En este curso aprenderás a usar FIGMA desde cero, mientras llevamos a cabo ejemplos prácticos para ver la aplicación de esos conceptos. 

Who this course is for:
  • Diseñadores gráficos, diseñadores web, desarrolladores web , creadores de contenido, o alguien con conocimientos en diseño, que búsquen una herramienta que les permita llevar a cabo sus diseños, maquetaciones de Apps, Webs, o piezas creativas.
  • Quienes ya han tenido contacto con FIGMA y desean conocer un poco mas a fondo la herramienta, además de un flujo de trabajo adecuado (Workflow)
Course content
Expand all 63 lectures 07:38:44
+ Introducción al curso
3 lectures 13:45

En este par de Vídeos sobre generalidades, veremos una introducción a FIGMA, que puedes esperar del curso, ventajas de trabajar con la herramienta y algunos detalles más.

Luego de esto estamos listos para comenzar.

Preview 03:20

En este par de Vídeos sobre generalidades, veremos una introducción a FIGMA, que puedes esperar del curso, ventajas de trabajar con la herramienta y algunos detalles más.

Luego de esto estamos listos para comenzar.

Generalidades del curso II
06:36

Definimos un ambiente requerido para trabajar, el cual es tener instalada la app de FIGMA en nuestro equipo, o en su defecto tenerlo funcional en el navegador, con simplemente crear un cuenta en la web de la herramienta.

www.figma.com


¿Donde y como conseguir FIGMA?
03:49
+ Conociendo FIGMA
5 lectures 31:29
Introducción Sección 2
00:35

Vamos a conocer el concepto de Canvas y el concepto de Frames. Estos 2 elementos serán la base de nuestros elementos.

Canvas y Frames
09:13

Iniciamos trabajo sobre frame con las herramientas básicas de Cuadrado, Elipse, lineas. Además de algunos tips que de seguro te servirán.

Preview 04:03
Herramientas Básicas parte 2
17:13
Conclusión Sección
00:25
+ Panel de Propiedades
12 lectures 01:36:25

Iniciamos el proceso de aplicar propiedades a los elementos de FIGMA que ya sabemos crear con las herramientas básicas.

Aplicar Propiedades en FIGMA
02:30

Las propiedades de alineación nos permitirán organizar los elementos en los frames y entre ellos.

Alineación
08:07

Conocemos como usar las coordenadas y los diferentes herramientas para modificar los tamaños.

Coordenadas y tamaño
04:33

Exploramos las opciones de Relleno con las que cuenta la herramienta.

Relleno
07:19

Conoceremos la herramienta bordes y las opciones de efecto del panel de propiedades.

Borde y Efectos
08:10

El concepto de Constraints es un poco complejo, con los ejemplos se entiende mejor, y también con el articulo de apoyo que esta adjunto.

Constraints / Restricciones
04:19

Configuramos el Layout Grid y entendemos que es posible aplicar propiedades a los Frames

Layout grid y propiedades a Frames
02:52
Guía y Reglas
03:36

Creamos un interfaz sencilla para poder explicar los principios de Exportación. Además se puede ir conociendo un poco el flujo de trabajo

Creando una interfaz para Exportar
09:12

Primera parte de los ejercicios de la sección 3, en los cuales vamos a crear un set de iconos para poner en practica el uso de las herramientas básicas que hemos aprendido.

Ejercicios Seccion 3 Parte 1
24:25

Segunda parte de los ejercicios.

Ejercicios Seccion 3 Parte 2
16:08
Realizar los iconos adjuntos para poner a prueba el conocimiento de las herramientas básicas de FIGMA. También puedes optar por crear iconos diferentes y recibir comentarios.
Realización de Iconos con FIGMA
1 question
+ Organización
7 lectures 33:06
Introducción Sección 4
00:46

Concepto principal de la organización CAPAS

Concepto de Capas
04:19
Concepto de Grupos
02:43

Realizamos un ejemplo real de como usar capas y grupos

Ejemplo de Capas y Grupos
07:33
Concepto de Páginas y ejemplo
07:28

Los componentes nos ayudarán a realizar tareas repetitivas con mejor facilidad.

Componentes
07:18

Los atajos de teclado están realizados para agilizar nuestro trabajo

Preview 02:59
+ Sección 5: Flujo de trabajo (WorkFlow)
16 lectures 01:49:38

La planeación es muy importante por que nos da un punto de partida, de referencia de hacia donde va nuestro proyecto.

Preview 02:50

La guía de estilos nos ayuda a tener una base de estilos para realizar la creación de los elementos con una consistencia gráfica 

Guía de estilos
02:45
Wireframes
16:14
Mockups - Creación pantalla bienvenida
11:19
Mockups - Creación pantalla Login
12:01
Mockups - Creación Pantalla WalkThrough
05:17
Mockups - Creación de pantalla Registrarse
05:06
Mockups - Creación de pantalla Codigo SMS
03:23
Mockups - Creación de pantalla Registro Exitoso
00:48
Mockups - Creación Pantalla Principal
17:56
Mockups - Creación pantalla contactos
02:11
Mockups - Creación pantalla conversación
13:16
Prototipando
08:22
Figma Mirror
03:13
+ Extras
1 lecture 24:36

Video creado para mi canal de Youtube, por lo que en ocasiones mencionó este. Aún así considero que el contenido tiene valor para complementar el curso y por eso lo agrego.

Diseñando poster con FIGMA - Youtube
24:36
+ Actualización FIGMA 3.0
10 lectures 49:44

Enlace: https://blog.figma.com/figma-3-0-217d6c248f85

Introducción FIGMA 3.0
01:45
2- Devices para presentaciones
04:47
3.1- Estilos parte 1
05:46
3.2- Estilos parte 2
04:38
3.3- Estilos parte 3
04:55
3.4 - Estilos parte 4
08:01
4- Objectos fijos
03:44
5- Áreas Scrollables
09:24
6- Transiciones
04:20
Conclusión
02:24