¡Otra muy buena píldora! 😍 ¡Estos "trucazos" me vienen de lujo para arrancar cualquier proyecto en Figma de manera organizada! Está claro que por muy pequeño que sea tu sistema de diseño, unas variants bien pensadas y planteadas, facilita mucho las cosas. Gracias Raúl🔥
Justo en esa mala practica caí, recuerdo que cuando unifique todos los iconos en un solo componente fue para que la librería no se me llenara de tantos componentes, pero a la larga si es mejor separarlos tal y como recomienda Raúl.
Qué grande! Gracias por compartir todas estas lecciones, breves pero brutales. Me queda la duda con los botones, que suele ser otro monstruo dado a crear un gran número de variantes (estados, tamaños, con y sin icono, icono izq, icono der....) 😅
¡Gracias, Raul! Lo he puesto en práctica y la verdad que va muy bien. El único inconveniente que tengo es, cuando quiero exportar como png o svg el componente de cada icono con sus variables, me exporta el frame completo con las tres variables como si fuera un solo icono. En lugar de 3 files separados por a cada icono. También quedan nombrados con nombres complejos que incluyen el "=". ¿Hay alguna manera de optimizar la exportación de assets de este estilo para desarrollo? Estuve buscando para ver plugins en figma pero la verdad que ninguno me convence. Lo que hice fue generar instancias y luego exportarlas para que no me queden nombres extraños en los iconos, pero en algunos casos tuve que renombrar a mano, para librerías pequeñas está bien pero si es una libreria de 1000 iconos no lo veo como una buena práctica el renombrar a mano.
Holaaaa, me gustaría saber si estás buenas prácticas aún siguen siendo vigentes. Pues me parece genial tu análisis y quiero tomarlo en cuenta. 😊❤ Gracias por explicar
Muy buen video !! solo comentar que la nomenclatura de las capas es importante también para los "botones con texto", si en las capas no tienen los mismos nombres en sus capas cada variante, el texto que escribas al cambiar de variante, se re ajustara al del componente original, lo mismo que ocurre con el ejemplo de color en los iconos.
@@RaulMarin_Figma si es para un proyecto inventado tengo que hacer los 4 tamaños de los iconos como está en el video (16, 24, 32, 40) o eso es solo en caso de que vaya a usar esos 4 tamaños?
si es para un proyecto inventado tengo que hacer los 4 tamaños de los iconos como está en el video (16, 24, 32, 40 ) o eso es solo en caso de que vaya a usar esos 4 tamaños?
Hola, pregunta de novata en Figma... (no soy capaz de encontrarlo y debe ser de lo más sencillo). Veo como en las instancias se puede cambiar color, texto etc pero si yo tengo un componente botón con icono (dentro de una variante con lapropiedad:estados) y al crear una instancia de ese botón quiero cambiar el icono... No puedo cortar el nuevo icono y pegarlo en lugar del icono por defecto. ¿Qué debo hacer? He conseguido crear una nueva propiedad duplicando los botones (en todos sus estados), creando una nueva propiedad (iconos) y cambiando el icono en cada estado, ¿es así? ¿No se puede cortar y pegar de forma puntual en una instancia?. Gracias por los tutoriales, siempre he trabajado con XD y debo ponerme las pilas con figma. Un saludo
Hola, pues si lo que quieres es poder sustituir iconos dentro de las instancias del botón para poder personalizarlos primero debes convertir cada icono en componente, si están todos juntos en el mismo frame o usas una nomenclatura como esta (iconos/icono1, iconos/icono2...) podrás intercambiar las instancias de esos iconos también. La otra solución es usar la nueva funcionalidad de component properties, hay algún video en el canal... ruclips.net/video/XDgd6sNvJEQ/видео.html&ab_channel=Ra%C3%BAlMar%C3%ADn-Figmatraining
Interesante para la gente con menos experiencia. Creo que tus vídeos mejorarían si nombras los elementos de Figma por lo que son porque fallas en ese aspecto, por ejemplo, una capa es una capa. Además mezclas español e inglés. Mucha suerte!
No entendí muy bien lo de las overries, por mas que les ponga "Grupo/Nombre_icon" se terminan exportando 2000 componentes. Tengo todos los iconos de material design con sus variantes (el archivo que comparten ellos) pero al momento de publicar la librería demora un montón.
Hola Luis, pues las 2 nomenclaturas son correctas. Depende más de tu equipo. ¿qué prefieren ellos? A veces en desarrollo les gusta que por delante se indique la característica de cada componente (atom, molecule, etc.). Habla con ellos y llegad a un consenso por ambas partes. A nivel funcionamiento es indiferente (Figma no necesita específicamente la nomenclatura para hacer el anidamiento de componentes)
Lo quiero mucho señor que explica como usar figma
Muy buen contenido, gracias por compartirlo. Saludos!
¡Otra muy buena píldora! 😍 ¡Estos "trucazos" me vienen de lujo para arrancar cualquier proyecto en Figma de manera organizada! Está claro que por muy pequeño que sea tu sistema de diseño, unas variants bien pensadas y planteadas, facilita mucho las cosas. Gracias Raúl🔥
me rompio la cabeza, que buenos tips
Fabuloso como siempre, Raúl. Enhorabuena!
Gracias! 😊
Gran tip el autolayout dentro de las variants, como no había caído antes 🤦🏽♂️!!!! Muchas gracias por tus videos Raúl😊!!!!
Gracias Javi!
Gracias raul por tu contenido, cada video vale oro!
Gracias a ti!
Muy buen vídeo como siempre Raúl, mil gracias!
Gracias Javi ;)
Gran video y apuntes a seguir
Gracias por comentar Christian! ;)
Gracias por tus consejos, son extremadamente valiosos!
Gracias a ti por venir al canal ;)
Me ha ayudado un montón, muchas gracias!!
Muchas gracias! Aprendo mucho con tus consejos, me encanta tu canal :)
Gracias a ti Carmen! 😊 Me hace mucha ilusión ese feedback!
Excelente video me fue de gran aporte. De casualidad tendrás un video donde hables de los espaciados ?
Justo en esa mala practica caí, recuerdo que cuando unifique todos los iconos en un solo componente fue para que la librería no se me llenara de tantos componentes, pero a la larga si es mejor separarlos tal y como recomienda Raúl.
Muy Buen tip, gracias por compartir!
Ojalá pudieras hacer un video acerca como trabajar con design tokens en los sistemas de diseño. Gracias!
Qué grande! Gracias por compartir todas estas lecciones, breves pero brutales. Me queda la duda con los botones, que suele ser otro monstruo dado a crear un gran número de variantes (estados, tamaños, con y sin icono, icono izq, icono der....) 😅
¡Gracias, Raul! Lo he puesto en práctica y la verdad que va muy bien. El único inconveniente que tengo es, cuando quiero exportar como png o svg el componente de cada icono con sus variables, me exporta el frame completo con las tres variables como si fuera un solo icono. En lugar de 3 files separados por a cada icono. También quedan nombrados con nombres complejos que incluyen el "=". ¿Hay alguna manera de optimizar la exportación de assets de este estilo para desarrollo?
Estuve buscando para ver plugins en figma pero la verdad que ninguno me convence.
Lo que hice fue generar instancias y luego exportarlas para que no me queden nombres extraños en los iconos, pero en algunos casos tuve que renombrar a mano, para librerías pequeñas está bien pero si es una libreria de 1000 iconos no lo veo como una buena práctica el renombrar a mano.
Holaaaa, me gustaría saber si estás buenas prácticas aún siguen siendo vigentes. Pues me parece genial tu análisis y quiero tomarlo en cuenta. 😊❤ Gracias por explicar
Excelente, gracias
Gracias a ti Teo ;)
Hola, muchas gracias por el video! tienes alguno de buenas y malas practicas al usar variants de botones u otro componente???
Hola, hay algunos videos más de componentes pero no hay más de variants. Intentaré aportar en breve con algun otro por si interesa ;)
@@RaulMarin_Figma Genial, agradezco los videos amigo
Muy buen video !! solo comentar que la nomenclatura de las capas es importante también para los "botones con texto", si en las capas no tienen los mismos nombres en sus capas cada variante, el texto que escribas al cambiar de variante, se re ajustara al del componente original, lo mismo que ocurre con el ejemplo de color en los iconos.
Cierto, el tema del nombrado de capas afecta a todo como dices 👌
@@RaulMarin_Figma si es para un proyecto inventado tengo que hacer los 4 tamaños de los iconos como está en el video (16, 24, 32, 40) o eso es solo en caso de que vaya a usar esos 4 tamaños?
si es para un proyecto inventado tengo que hacer los 4 tamaños de los iconos como está en el video (16, 24, 32, 40 ) o eso es solo en caso de que vaya a usar esos 4 tamaños?
Hola Gabriel, solo debes hacer los iconos en los tamaños que necesites 👍
Hola, pregunta de novata en Figma... (no soy capaz de encontrarlo y debe ser de lo más sencillo). Veo como en las instancias se puede cambiar color, texto etc pero si yo tengo un componente botón con icono (dentro de una variante con lapropiedad:estados) y al crear una instancia de ese botón quiero cambiar el icono... No puedo cortar el nuevo icono y pegarlo en lugar del icono por defecto. ¿Qué debo hacer? He conseguido crear una nueva propiedad duplicando los botones (en todos sus estados), creando una nueva propiedad (iconos) y cambiando el icono en cada estado, ¿es así? ¿No se puede cortar y pegar de forma puntual en una instancia?. Gracias por los tutoriales, siempre he trabajado con XD y debo ponerme las pilas con figma. Un saludo
Hola, pues si lo que quieres es poder sustituir iconos dentro de las instancias del botón para poder personalizarlos primero debes convertir cada icono en componente, si están todos juntos en el mismo frame o usas una nomenclatura como esta (iconos/icono1, iconos/icono2...) podrás intercambiar las instancias de esos iconos también. La otra solución es usar la nueva funcionalidad de component properties, hay algún video en el canal... ruclips.net/video/XDgd6sNvJEQ/видео.html&ab_channel=Ra%C3%BAlMar%C3%ADn-Figmatraining
@@RaulMarin_Figma Muchas gracias.😍
Interesante para la gente con menos experiencia. Creo que tus vídeos mejorarían si nombras los elementos de Figma por lo que son porque fallas en ese aspecto, por ejemplo, una capa es una capa. Además mezclas español e inglés. Mucha suerte!
Gracias por el feedback Matías 😸
No entendí muy bien lo de las overries, por mas que les ponga "Grupo/Nombre_icon" se terminan exportando 2000 componentes. Tengo todos los iconos de material design con sus variantes (el archivo que comparten ellos) pero al momento de publicar la librería demora un montón.
Hola, es correcto nombrar a un icono de la siguiente manera "Atom/Icon/Delete/XL" o debería optar por quitar el "Atom/Icon" de mi nomenclatura?
Hola Luis, pues las 2 nomenclaturas son correctas. Depende más de tu equipo. ¿qué prefieren ellos? A veces en desarrollo les gusta que por delante se indique la característica de cada componente (atom, molecule, etc.). Habla con ellos y llegad a un consenso por ambas partes. A nivel funcionamiento es indiferente (Figma no necesita específicamente la nomenclatura para hacer el anidamiento de componentes)
@@RaulMarin_Figma Muchas gracias por la aclaración y el video.