⏰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
Sí, puedes visualizar en el telefono figma, aunque carga super lento el editor. Yo lo utilizo en el telefono cuando termino de diseñar un prototipo para dispositivos moviles y quiero probar como se veria. Es más util usarlo en telefono como medio para prototipado la verdad.
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?
En el caso de Figma puedes trabajar de manera colaborativa en tiempo real online asi que no te tienes que preocupar, puesto a que Figma y Adobe XD son los programas de diseño UI/UX estandar en la industria del diseño UI/UX Con respecto a Wordpress en el apartado de desarrollo o de inspeccionar puedes ver toda la información del diseño que estas haciendo como código CSS o directamente sus atributos por si usas editores visuales como elementor o DIVI. Figma ha donado una membresia bastante robusta a la comunidad de wordpress para que desarrolladores y diseñadores puedan participar. Con respecto a "convertir" diseños de wordpress a figma tenemos varias formas Tradicional: Figma te da todo el codigo de los elementos que usas y a través de modificar de forma manual los archivos podemos pegar este codigo Editor visual: Usar un editor visual como elementor y el diseño de figma y los atributos que te aparezcan en el apartado de inspeccionar Figma2wp: Empresa que hace servicio de conversión de un diseño de figma que tengas a tu sitio web en wordpress Siter.io : Constructor de sitios web que tiene un plugin sin ningún tipo de codigo trabaja exportando directamente los archivos de diseño de figma sin convertir los diseños en codigo html o css pero no es wordpress Custom Native Blocks ACF: Basicamente un editor visual que instalas en wordpress. Haces tu diseño en figma y vas construyendolo en el editor. Personalmente siempre diseño la experiencia de usuario y la interfaz de los sitios web en figma, alli hago el diseño de la web y después me paso a wordpress y lo uso como mi súper guia para desarrollar el sitio web tal y como esta en el diseño o prototipo que he creado, usando editores visuales como elementor o DIVI y temas como astra, generatepress entre otros que sean bastante flexibles. Bastante útil Espero este comentario sea de ayuda🙌
Puedes exportar tus mesas de trabajo como PDF por lo que tecnicamente puedes diseñar tus catalogos allí. Simplemente use Archivo → Exportar frame (marco) a PDF; exportará todos los marcos de la página actual como un único archivo PDF. Cada cuadro será una página separada en ese PDF. [Archivo → Exportar frame a PDF...]
Muy buenos días Sra. Monica ¿Cómo está? con mucho gusto. Puede entrar en contacto enviandome un correo a mi email personal de oliverpuente916@gmail.com
La versión gratuita de Figma te deja añadir tipografías pero tienes que usar la aplicación de escritorio no la versión web, para que te cargue todas las tipografías que tienes en tu computadora a nivel local
⏰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
Muy interesante la introducción a Figma, me ha ayudado mucho. Mil gracias
Muchas gracias!! Aprendí mucho el dia de hoy y seguí paso a paso tus instrucciones!! gracias!!!!
excelente método de enseñar super básico y paso a paso gracias , un abrazo desde Colombia
Excelente turorial. Cien por ciento didáctico!! Muchas gracias, no es fácil encontrar tutoriales que realmente sirvan
Excelente explicación! Llegaste justo en el momento que necesitaba esta información. Gracias por disponer de tú tiempo. Explica muy bien!
super tu forma de enseñar paso paso muy practico
muchísimas gracias,muy didáctico bendiciones
Muchas gracias te lo agradezco 😘😘
Excelente video! Contenido de calidad
Muchas Gracias y éxitos!
Hablas muy claro, muy didactico.
Excelente!! Me encanto la explicación!!! Gracias!!!
Muy buen contenido!!!!!!gracias!!!!!!!!
Y se puede visualizar en el movil como app?
Sí, puedes visualizar en el telefono figma, aunque carga super lento el editor. Yo lo utilizo en el telefono cuando termino de diseñar un prototipo para dispositivos moviles y quiero probar como se veria. Es más util usarlo en telefono como medio para prototipado la verdad.
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?
En el caso de Figma puedes trabajar de manera colaborativa en tiempo real online asi que no te tienes que preocupar, puesto a que Figma y Adobe XD son los programas de diseño UI/UX estandar en la industria del diseño UI/UX
Con respecto a Wordpress en el apartado de desarrollo o de inspeccionar puedes ver toda la información del diseño que estas haciendo como código CSS o directamente sus atributos por si usas editores visuales como elementor o DIVI.
Figma ha donado una membresia bastante robusta a la comunidad de wordpress para que desarrolladores y diseñadores puedan participar.
Con respecto a "convertir" diseños de wordpress a figma tenemos varias formas
Tradicional: Figma te da todo el codigo de los elementos que usas y a través de modificar de forma manual los archivos podemos pegar este codigo
Editor visual: Usar un editor visual como elementor y el diseño de figma y los atributos que te aparezcan en el apartado de inspeccionar
Figma2wp: Empresa que hace servicio de conversión de un diseño de figma que tengas a tu sitio web en wordpress
Siter.io : Constructor de sitios web que tiene un plugin sin ningún tipo de codigo trabaja exportando directamente los archivos de diseño de figma sin convertir los diseños en codigo html o css pero no es wordpress
Custom Native Blocks ACF: Basicamente un editor visual que instalas en wordpress. Haces tu diseño en figma y vas construyendolo en el editor.
Personalmente siempre diseño la experiencia de usuario y la interfaz de los sitios web en figma, alli hago el diseño de la web y después me paso a wordpress y lo uso como mi súper guia para desarrollar el sitio web tal y como esta en el diseño o prototipo que he creado, usando editores visuales como elementor o DIVI y temas como astra, generatepress entre otros que sean bastante flexibles. Bastante útil
Espero este comentario sea de ayuda🙌
Hola como hago para comunicarme directamente con ustedes??
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.
Qi Press
Hola hermano también puedo crear catálogos digitales para negocio?
Puedes exportar tus mesas de trabajo como PDF por lo que tecnicamente puedes diseñar tus catalogos allí. Simplemente use Archivo → Exportar frame (marco) a PDF; exportará todos los marcos de la página actual como un único archivo PDF. Cada cuadro será una página separada en ese PDF. [Archivo → Exportar frame a PDF...]
Hola, una consulta. Cómo hago para pegar en el mismo lugar??
CTRL + C y CTRL + V con el objeto a remplazar su posicion seleccionado
Hola Oliver, me gustaría contactar contigo para valorar una posible colaboración. Gracias
Muy buenos días Sra. Monica ¿Cómo está? con mucho gusto. Puede entrar en contacto enviandome un correo a mi email personal de oliverpuente916@gmail.com
Alguien me puede decir cómo añadir tipografías a figma? ¿lo permite la versión gratuita?
La versión gratuita de Figma te deja añadir tipografías pero tienes que usar la aplicación de escritorio no la versión web, para que te cargue todas las tipografías que tienes en tu computadora a nivel local