Creación de Interfaces con FIGMA

Name: Creación de Interfaces con FIGMA
Rating: 4.0 (479 reviews)

Aprende a utilizar esta poderosa herramienta y cambia la manera de trabajar

Created byMario German Reyes Candado

Last updated 1/2023

Spanish

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

Course content

12 sections • 66 lectures • 8h 3m total length

Generalidades del curso I3: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 II6:36
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.
¿Donde y como conseguir FIGMA?3:49
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

Introducción Sección 20:35
Canvas y Frames9:13
Vamos a conocer el concepto de Canvas y el concepto de Frames. Estos 2 elementos serán la base de nuestros elementos.
Herramientas Básicas parte 14:03
Iniciamos trabajo sobre frame con las herramientas básicas de Cuadrado, Elipse, lineas. Además de algunos tips que de seguro te servirán.
Herramientas Básicas parte 217:13
Conclusión Sección0:25

Aplicar Propiedades en FIGMA2:30
Iniciamos el proceso de aplicar propiedades a los elementos de FIGMA que ya sabemos crear con las herramientas básicas.
Alineación8:07
Las propiedades de alineación nos permitirán organizar los elementos en los frames y entre ellos.
Coordenadas y tamaño4:33
Conocemos como usar las coordenadas y los diferentes herramientas para modificar los tamaños.
Relleno7:19
Exploramos las opciones de Relleno con las que cuenta la herramienta.
Borde y Efectos8:10
Conoceremos la herramienta bordes y las opciones de efecto del panel de propiedades.
Constraints / Restricciones4:19
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.
Layout grid y propiedades a Frames2:52
Configuramos el Layout Grid y entendemos que es posible aplicar propiedades a los Frames
Guía y Reglas3:36
Creando una interfaz para Exportar9:12
Creamos un interfaz sencilla para poder explicar los principios de Exportación. Además se puede ir conociendo un poco el flujo de trabajo
Export y Slice Tool5:14
Ejercicios Seccion 3 Parte 124:25
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 216:08
Segunda parte de los ejercicios.
Realización de Iconos con FIGMA

Introducción Sección 40:46
Concepto de Capas4:19
Concepto principal de la organización CAPAS
Concepto de Grupos2:43
Ejemplo de Capas y Grupos7:33
Realizamos un ejemplo real de como usar capas y grupos
Concepto de Páginas y ejemplo7:28
Componentes7:18
Los componentes nos ayudarán a realizar tareas repetitivas con mejor facilidad.
Atajos de Teclado2:59
Los atajos de teclado están realizados para agilizar nuestro trabajo

Introducción0:48
Planeación2:50
La planeación es muy importante por que nos da un punto de partida, de referencia de hacia donde va nuestro proyecto.
Guía de estilos2:45
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
Wireframes16:14
Mockups - Creación pantalla bienvenida11:19
Mockups - Creación pantalla Login12:01
Mockups - Creación Pantalla WalkThrough5:17
Mockups - Creación de pantalla Registrarse5:06
Mockups - Creación de pantalla Codigo SMS3:23
Mockups - Creación de pantalla Registro Exitoso0:48
Mockups - Creación Pantalla Principal17:56
Mockups - Creación pantalla contactos2:11
Mockups - Creación pantalla conversación13:16
Prototipando8:22
Figma Mirror3:13
Compartiendo nuestro trabajo4:09

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)

Creación de Interfaces con FIGMA

What you'll learn

Explore related topics

Course content

Introducción al curso3 lectures • 14min

Conociendo FIGMA5 lectures • 31min

Panel de Propiedades12 lectures • 1hr 36min

Organización7 lectures • 33min

Sección 5: Flujo de trabajo (WorkFlow)16 lectures • 1hr 50min

Finalización del curso1 lecture • 11min

Extras1 lecture • 25min

Actualización FIGMA 3.010 lectures • 50min

Figma Plugins2 lectures • 18min

Speed Design1 lecture • 9min

Requirements

Description

Who this course is for: