Figma tutorial para principiantes | 👋Aprende Diseño Web UI de manera simple a través de Figma

¿Quieres aprender Figma de manera simple pero no sabes por dónde empezar?✍ En este tutorial paso a paso te enseñamos todas las herramientas y conceptos básicos que necesitas saber para comenzar a diseñar aplicaciones y sitios web en Figma.

En este tutorial de Figma para principiantes, el diseñador gráfico Oliver Puente te guía a través de la interfaz y las herramientas de Figma.

¿Tienes más preguntas sobre Figma? Déjalas abajo en los comentarios ⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️

¿Negocio? Obtén Hosting Seguro y Confiable (Con SSL gratis) A partir de $4.95/mes*. Para sitios web personales y empresariales (Que yo, personalmente, llevo usando los últimos 5 años sin problema)

😱⚡Empaque logotipos para clientes en menos de 5 minutos | Logo Package Express 3.0

-----------------------------------------------------------------------------

👉¿Necesitas ayuda con el diseño de tu sitio web?
Ponte en contacto, estamos para ayudar:

-----------------------------------------------------------------------------
⏰Guía de video (Marcas de tiempo)

0:00 Introducción
0:50 Organización de equipos, proyectos y archivos
1:08 Configuración de la cuenta y opciones
1:26 Tipos de archivos a usar
2:05 Templates de figma
2:22 Proyectos recientes, borradores, comunidad
2:41 Qué es un equipo/team en Figma
3:32 Barra de menú superior y herramientas básicas
3:36 Nombre del proyecto
4:15 Herramientas básicas
4:36 Qué son los frames
5:22 Herramientas de forma
6:07 herramienta pluma
6:26 Herramienta texto
6:33 Movimiento en el espacio de trabajo
6:56 Herramienta comentarios
7:29 Herramienta de movimiento
7:41 Barra de menú lateral izquierdo, Layers, frames y componentes.
7:45 Trabajar con Frames y Layers
8:04 Assets y componentes
8:55 Páginas y su uso
10:24 Barra de menú lateral derecho, Modificaciones y diseño.
11:20 Modificar la posición de los Frames
11:55 Autolayout
12:18 Layout Grid
13:34 Modos de mezcla
14:25 Fill/Rellenar
14:35 Opacidad
15:19 Constrains
15:37 Stroke/Trazo
16:02 Efectos
17:10 Exportar
17:39 Recomendaciones de exportación
18:09 Click derecho, máscaras y opciones útiles.
18:22 Copiar, pegar, pegar como
18:40 Bring to front / Send to Back
18:53 Seleccionar capa
19:08 Agrupar y desagrupar
19:41 Outline Stroke
20:05 Crear una mascara
20:56 Set a thumbnail
21:17 Click derecho Auto layout
21:39 Crear componente con clic derecho
21:53 Publicar componentes y plugins
22:09 Ocultar/mostrar y bloquear/desbloquear
22:15 Voltear horizontal/vertical
22:20 Aplicando lo aprendido
¡Vamos a diseñar!
31:24 Agradecimiento y cierre
-----------------------------------------------------------------------------
Disclaimer*

El propósito de este video es puramente educativo.

-----------------------------------------------------------------------------
👋Link para instalar figma

👋Pasos para empezar a usar Figma:
2- Dale clic al botón que dice "Sign Up"
3- Define un correo electrónico, nombre y contraseña
4- Confirma tu correo electrónico en la bandeja
5- Abre la webapp de Figma
6- Descarga e instala la versión de escritorio
-----------------------------------------------------------------------------

---------------------------------------------------------------------
MÚSICA

¡Si te gusta el video suscríbete y compártelo con tus amigos!
--------------------------------------------------------------------

⭐⭐⭐⭐⭐⭐
¿Quieres apoyarnos a crear más contenido así? Considera realizar una donación (Dizalo).

[OliverPuente]

⏰Guía de video (Marcas de tiempo)

0:00 Introducción
0:50 Organización de equipos, proyectos y archivos
1:08 Configuración de la cuenta y opciones
1:26 Tipos de archivos a usar
2:05 Templates de figma
2:22 Proyectos recientes, borradores, comunidad
2:41 Qué es un equipo/team en Figma
3:32 Barra de menú superior y herramientas básicas
3:36 Nombre del proyecto
4:15 Herramientas básicas
4:36 Qué son los frames
5:22 Herramientas de forma
6:07 herramienta pluma
6:26 Herramienta texto
6:33 Movimiento en el espacio de trabajo
6:56 Herramienta comentarios
7:29 Herramienta de movimiento
7:41 Barra de menú lateral izquierdo, Layers, frames y componentes.
7:45 Trabajar con Frames y Layers
8:04 Assets y componentes
8:55 Páginas y su uso
10:24 Barra de menú lateral derecho, Modificaciones y diseño.
11:20 Modificar la posición de los Frames
11:55 Autolayout
12:18 Layout Grid
13:34 Modos de mezcla
14:25 Fill/Rellenar
14:35 Opacidad
15:19 Constrains
15:37 Stroke/Trazo
16:02 Efectos
17:10 Exportar
17:39 Recomendaciones de exportación
18:09 Click derecho, máscaras y opciones útiles.
18:22 Copiar, pegar, pegar como
18:40 Bring to front / Send to Back
18:53 Seleccionar capa
19:08 Agrupar y desagrupar
19:41 Outline Stroke
20:05 Crear una mascara
20:56 Set a thumbnail
21:17 Click derecho Auto layout
21:39 Crear componente con clic derecho
21:53 Publicar componentes y plugins
22:09 Ocultar/mostrar y bloquear/desbloquear
22:15 Voltear horizontal/vertical
22:20 Aplicando lo aprendido
¡Vamos a diseñar!
31:24 Agradecimiento y cierre

[monicasanchezdebrond]

Muy interesante la introducción a Figma, me ha ayudado mucho. Mil gracias

[Mariluhernandez-qq]

Muchas gracias!! Aprendí mucho el dia de hoy y seguí paso a paso tus instrucciones!! gracias!!!!

[LuisJhonJairoEgasDivas]

excelente método de enseñar super básico y paso a paso gracias, un abrazo desde Colombia

[buonarrigo]

Excelente turorial. Cien por ciento didáctico!! Muchas gracias, no es fácil encontrar tutoriales que realmente sirvan

[mariamena]

Excelente explicación! Llegaste justo en el momento que necesitaba esta información. Gracias por disponer de tú tiempo. Explica muy bien!

[jhojanvegacompositor]

super tu forma de enseñar paso paso muy practico

[carlosarturorodriguezcamar]

muchísimas gracias, muy didáctico bendiciones

[lumity_adrinnette]

Excelente video! Contenido de calidad
Muchas Gracias y éxitos!

[fernandafreije]

Excelente!! Me encanto la explicación!!! Gracias!!!

[random]

Y se puede visualizar en el movil como app?

[LegendDx]

Nunca había visto este programa, he trabajado con mobirise pero no me agrada que solo una persona puede trabajar en ello y pues falta integración de blog.

Este tiene forma de integrar Wordpress?

[paolavinocour]

Hola como hago para comunicarme directamente con ustedes??

[JorgeOcampoIQ]

Hola, ¿cuál es el programa o cómo pones lo de las teclas en tiempo real? jaja Disculpa, me llamó mucho la atención eso. Seguiré viendo el tuto.

[eliasbriceno]

Hola hermano también puedo crear catálogos digitales para negocio?

[keniaandreapachecomorocho]

Hola, una consulta. Cómo hago para pegar en el mismo lugar??

[monicasanchezdebrond]

Hola Oliver, me gustaría contactar contigo para valorar una posible colaboración. Gracias

[monicasanchezdebrond]

Alguien me puede decir cómo añadir tipografías a figma? ¿lo permite la versión gratuita?