¡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🔥
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....) 😅
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
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.
¡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.
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?
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, 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!
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)
Игры
¡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
Lo quiero mucho señor que explica como usar figma
Muy buen contenido, gracias por compartirlo. Saludos!
Me ha ayudado un montón, muchas gracias!!
Gracias raul por tu contenido, cada video vale oro!
Gracias a ti!
Fabuloso como siempre, Raúl. Enhorabuena!
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 por tus consejos, son extremadamente valiosos!
Gracias a ti por venir al canal ;)
Muy Buen tip, gracias por compartir!
Ojalá pudieras hacer un video acerca como trabajar con design tokens en los sistemas de diseño. 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!
Muy buen vídeo como siempre Raúl, mil gracias!
Gracias Javi ;)
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 ?
Gran video y apuntes a seguir
Gracias por comentar Christian! ;)
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
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.
¡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.
Excelente, gracias
Gracias a ti Teo ;)
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?
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
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 👍
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, 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 😸
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.