▷ TUTORIAL FIGMA: Cómo crear BOTONES con VARIANTES
Vložit
- čas přidán 25. 07. 2024
- ✅ PASOS para diseñar BOTONES INTERACTIVOS en FIGMA 👉 con VARIANTES y propiedades.
📌 En este tutorial puedes aprender:
00:00 - Presentación y resumen de la clase
01:22 - Cómo crear diseñar un botón en Figma
02:31 - Cómo crear un componente botón en Figma, con todas sus Variantes y Propiedades
02:56 - Cómo aplicar estilos en Figma
03:22 - Cómo crear la propiedad Text
03:33 - Cómo crear la propiedad Cambio de instancia
03:52 - Cómo crear una propiedad Booleana, para mostrar u ocultar elementos del componente
04:04 - Cómo cambiar el orden de las propiedades de un componente
04:14 - Cómo editar las propiedades de una instancia de un componente de Figma
04:48 - Cómo crear un prototipo de Figma (o Cómo crear las conexiones entre los Variants de un componente interactivo)
07:15 - Cómo presentar un prototipo de Figma
😄 Comunidad
Discord: www.juanpol.com/discord
Telegram: t.me/figmaespanol
👋 Social
Sitio web: www.juanpol.com
Twitter: / juanpol
Instagram: / juanpoldi
era lo que estaba buscando, mil gracias!
Gracias a ti Osmarly!
Muy efectivo, me ayudó bastante, muchas gracias 😀
Muchas gracias a ti Mel!
Muy bien explicado me has salvado
Muchas gracias Max, qué te estaba pasando? Por que dices que te he salvado? cuéntame!
gracias, muy útil
Muchas gracias a ti Alberto!
Muy bueno!! gracias
Muchas gracias a ti Bendi!
MUCHISIMAS GRACIAS
Gracias a ti Antonella!
Sos un genio juanpol
Gracias Agustín, soy más bien alguien con ganas de aprender y compartir.
profesional!
Gracias Daniel!
Buenísimo contenido, muchas gracias 💖
Muchas gracias Josue!
Por fin un tutorial rápido preciso y sin tanto rollo, muchas gracias por tu aportación, solo una sugerencia ¿Será posible que en pantalla pongas la secuencia de teclas que usas para crear el frame? para los novatos puede servir mucho. Excelente contenido ⭐⭐⭐⭐⭐
Gracias por tu comentario! tomo nota de tu feedback para aplicarlo en próximos vídeos.
Hola que buen video, una pregunta cómo hago para que dentro del mismo componente (cuadro punteado) todas las variables tengan iconos diferentes, solo me deja cambiarlo cuando duplico el icono y lo saco del recuadro punteado. Gracias
Felipe, la respuesta a tu pregunta es muy simple.
En lugar de crear 3 componentes Icon distintos, crea un componente Icon con variantes, cada una de esas variantes será un icono distinto.
Luego haces lo mismo, dentro del componente Icon pones una cadena de texto y un componente Icon.
Listo!
Si tienes más dudas avísame.
Tengo una pregunta... Agradezco la ayuda Juanpol, El ícono en Assets está color negro, pero cuando cambio el estado del botón en propiedades no me cambia a blanco o al color que tengo en la variante.
Gabriel, ese cambio no es "automático" 👉 Recarga la pestaña o tabs del archivo, (en Figma) y el componente aparecerá en la pestaña de Assets con tu nuevo color 😀
Holas Juanpol! Necesito hacer un calendario interactivo para reservar turnos. Me podrías ayudar x favor?
Lucía, pregunta obligada... tienes que diseñarlo o diseñarlo y crear un prototipo interactivo? Como siempre digo, con más información y especificaciones, siempre se puede responder mejor.
Te podrá valer este plugin? www.figma.com/community/plugin/1074589183210985644/calendar-generator
acabo de terminar ayer el curso de diseño ux/ui y m pidieron hacer una app para reservar turnos para manicura.
@@juanpoldi espero q si! Gracias! Nose inglés. Espero se entienda bien igual
Echa un ojo al plugin y si necesitas ayuda avísame.
¿Amigo puedes explicar como funciona el reset componente state de prototype? No sé si sea un bug pero se corta la animación. Mira, haz lo siguiente:
1. Crea un componente de boton de icono(buscar) : enabled y hover (agrega la animación)
2. Crea un componente de un boton en específico (icono guardar sin y con relleno): default y active (agrega animación)
3. Agrega el boton guardar en un componente de card.
4. Crea la instancia card y Visualiza la interacción.
Problema: el icono guardar pasa a icono con relleno, y de icono de relleno pasa a icono de buscar.
Ayudame porfa :(
Franco, ante todo te doy la bienvenida al canal y te doy las gracias por dejar este comentario tan interesante. Me apunto tu petición para probar tu caso e intentar resolverlo en uno s delos directos que haré la semana que viene. Sigue atento por favor.
Franco, para poder terminar de entender tu inquietud necesito ver tu diseño, puedes compartir el link al mismo respondiendo este comentario? Gracias!
Te pido más información, porque leyendo tu comentario creo que no es un bug de Figma lo que pasa, sino que la construcción que estás aplicando es incorrecta. Pero claro, sólo es una conjetura, por eso te pido que compartas tu archivo de Figma, para terminar de saber cómo lo estás construyendo. Gracias.
Franco, aquí te dejo un link a un pequeño prototipo que monté: www.figma.com/proto/UNz7rxd8Nb61GClFfsJEa7/Reset-component-state?page-id=0%3A1&type=design&node-id=1-32&viewport=-489%2C-50%2C1&t=MUxG9Qe8lT7U4K2o-1&scaling=min-zoom&mode=design
Dime si quieres obtener un resultado como este.
@@juanpoldi Gracias por responder.
www.figma.com/file/DUmfzkBRhBH9ezsBuPwBcn/Duda?type=design&node-id=0%3A1&mode=design&t=XTHYxsj27kNIMnx5-1
Hola, no me funciono tu tutorial. Estoy estancado en la parte donde creo la propiedad Texto, uso figma en diciembre del 2023. Cuando selecciono los textos, no me aparece donde crear la propiedad asi como lo muestras en tu video. Si pudieras aclararlo seria de mucha ayuda por que parece que tu guia no se muestra de la forma en como tengo el figma actualmente. Saludos.
Hola David, ante todo gracias por dejar tu inquietud. Hoy revisaré lo que comentas en un vídeo en directo en el canal. Estaré conectado a las 23:30 hs de España. Saludos.