Transcripciones
1. ¡Hola!: Todo el mundo. Yo soy Adi. Bienvenido a esta
rápida sesión de Figma. Hoy construiremos un componente de botón inteligente y
reutilizable. Nuestro botón tendrá dos
variantes primaria y secundaria, y agregaremos
propiedades para activar la visibilidad
del icono
para cambiar los iconos y para cambiar
el texto del botón Lo que aprendes hoy se aplica
no solo a los botones, sino a cualquier tipo de componente
que quieras crear en Figma. No necesitas ninguna habilidad especial de
Figma para esto, un archivo nuevo y 15
minutos de tu tiempo Ah, y también hay un proyecto
de clase que puedes hacer. Entonces abramos Figma
y empecemos.
2. Diseñemos un botón inteligente: Bien, así que quiero crear
un botón versátil que pueda reutilizarse en múltiples
lugares en mis diseños, y ese botón necesita
tener, en primer lugar,
dos estilos, uno primario
y otro secundario, que sea más Y además, me
gustaría mostrar ya sea una etiqueta dentro del
botón o una etiqueta más icono. Y necesito una manera de
cambiar ese icono y el texto del botón y también la visibilidad
del icono muy fácilmente. Ahí es donde entran
las propiedades de los componentes, pero sobre eso solo
un poco más tarde. Por ahora,
vamos a comenzar con estos tres iconos
que obtuve de
m un conjunto de iconos llamado íconos de
fósforo Es un conjunto de iconos gratis. Entonces son SVG,
y voy a seleccionar los tres y
convertirlos en componentes Ahora bien, esto es muy importante porque eso nos va
a permitir intercambiar el icono en nuestros botones. No va a
funcionar de otra manera. Así que selecciona los tres,
y vamos a ir en el panel Inspector, clic en Crear opciones de
componentes y seleccionar Crear
múltiples componentes. Y eso va a tomar
cada elemento que
seleccioné y convertirlo en un
componente así como ese. Entonces ahora tengo un componente
para el icono del cubo, uno para la flecha a la derecha, y otro para la flecha hacia arriba a la
derecha. Ese es el paso uno. Paso dos, comencemos a
diseñar nuestro botón. Voy a presionar T para la herramienta de
texto, escribir algo de texto. En mi caso, etiqueta de botón. Esto puede ser lo que quieras. Para la tipografía,
voy a usar inter medium 16 pixeles
tamaño de fuente 140% Por ahora, pondremos
el relleno en negro. Ahora, voy a agarrar uno de los íconos. Digamos este cubo uno. Y pegarlo en mi marco. Y cambiemos su color a negro para que podamos
ver lo que estamos haciendo. Y voy a crear un
botón con estos dos elementos. Ahora, me gustaría que mi botón fuera
redimensionable, ¿verdad? Me gustaría que cambiara
automáticamente cambia su ancho, dependiendo de los
contenidos en su interior. Entonces para eso, voy a estar
usando el diseño automático. Seleccione ambos elementos, presione Mayús A para agregar
diseño automático a estos elementos. Y si no sabes
cómo funciona el diseño automático, esto básicamente crea un
marco en el panel de capas, y ese marco tiene
esta cosa llamada disposición
automática
aplicada automáticamente a él. El diseño automático me permite cambiar la dirección en la que se muestran
los elementos. Me permite cambiar el
espacio entre los elementos. En mi caso, voy
a elegir diez píxeles, y también me permite
agregar relleno vertical y
horizontal. Pero por ahora, agreguemos un color de
relleno a este marco, y ese color será 00 51bc Es como un color azul más oscuro. Ahora, voy a cambiar
el negro aquí a blanco, y voy a usar el 90%. Este es un pequeño truco
que me gusta hacer. Este tipo de toma prestado parte
del color del fondo porque no es blanco puro Es un poco ver a través. Entonces, estamos sacando un poco de ese azul
del fondo. Ahora, agreguemos algo de espacio
para respirar alrededor de la etiqueta y el icono. Para eso, voy a estar
agregando un poco de relleno. Entonces iré con 40 píxeles de relleno a izquierda y derecha
y 20 en la parte superior e inferior. Ahora, me pareció que usando, digamos, X en los lados
y X dividido por dos. Entonces, la mitad de esa X en la parte superior e inferior es
una buena regla general, y generalmente arroja
algunos resultados bastante buenos. Además, hagamos esto
un poco más amigable. Agreguemos ocho píxeles
de radio de esquina, solo redondeemos esas esquinas. Y el diseño inicial para
mi botón está completo. Ahora, hagámoslo reutilizable
convirtiéndolo en un componente. Entonces lo selecciono, y puedo
darle la vuelta de muchas maneras diferentes. Puedo ir en el
inspector aquí arriba y hacer clic en crear
componente o usar el atajo de
teclado Control Alt K o la Opción de Comando K
si estás en una Mac, o puedo hacer clic derecho y elegir Crear componente
así. Ahora, la forma en que me gusta trabajar
es definir mis componentes fuera de
cualquier marco de diseño terminado. Entonces voy a estar trabajando aquí mismo. Vamos a cambiar el nombre de
este Comando R Control R para cambiarle el nombre a botón. No, siempre puedo controlar C o copiar esto y
pegarlo en mi frame, y eso va a
crear una copia del mismo o una instancia
como se le llama. Entonces en figma, este es
el componente principal, y esto es una copia
de ese componente Y si hago algún tipo de
cambio al componente principal, eso automáticamente se va a aplicar a cualquier copia del mismo. Entonces digamos que voy a cambiar el tamaño de este icono
en vez de 32 por 32, lo
haré 22 por 22. Y ese cambio ocurre aquí, pero también en cualquier
copia. Súper genial. Ahora, agreguemos algunas propiedades a este componente de botón
porque actualmente, si quieres hacer
algún tipo de cambio la instancia, eso es
bastante difícil de hacer. Por supuesto, puedes seleccionar la etiqueta dentro y simplemente
cambiarla a lo que quieras. Pero, ya sabes,
hay que desenterrar y, ya
sabes, seleccionarlo directamente. Uh, puedes seleccionar
el icono en sí y simplemente hacer clic en este menú
desplegable y cambiarlo
por otra cosa. Y si quieres ocultar
este icono por completo, simplemente
puedes hacer clic en el botón Ocultar aquí y
va a desaparecer. Pero en realidad hay
una manera más elegante de hacer eso de controlar
estas cosas con componentes, y eso es con propiedades. Entonces vamos a seleccionar el componente
principal, y aquí arriba donde
dice propiedades, vamos a dar click en el
título o el signo más. Y tenemos cuatro tipos de
propiedades que
podemos elegir entre texto variante, booleano e intercambio de instancias Empecemos con el texto porque
esto es lo que
usaremos para editar la etiqueta del botón. Entonces haz clic en eso. Vamos
a llamarlo etiqueta. Y por el valor, llamémoslo
etiqueta de botón. Crear propiedad. A continuación, agreguemos una propiedad
para cambiar el icono, y eso se llama propiedad de intercambio
instantáneo. Así que de nuevo, haga clic más
seleccione intercambio instantáneo. Esta vez, llamémoslo icono. Y vamos a escoger
un valor por defecto. Escojamos el cubo que aquí
hemos definido. Ahora bien, esta lista
básicamente te muestra todos los componentes
que se pueden usar para, ya
sabes, intercambiar ese elemento Entonces voy a elegir
Crear propiedad. Por último,
volvamos a
hacer clic en el signo más y elegiremos a Bolion Boliano es como un cero y uno, verdadero, falso, on off
tipo de propiedad Es una o la otra. Así que elige Bollion. Vamos a llamarlo show icon. Por defecto, establezca el valor en
true y cree la propiedad. Ahora, tenemos estas tres
propiedades creadas, pero por sí mismas, no
hacen nada. Tenemos que vincularlos
a elementos específicos. Así que selecciona la etiqueta del botón, y en el inspector, vamos a hacer clic en
este icono que dice aplicar propiedad variable, y vamos a elegir
etiqueta porque esta es una de las propiedades que tenemos
disponibles en el botón. A continuación, voy a
seleccionar el icono. Y nuevamente, en el inspector, haga clic en el botón que dice
aplicar propiedad de intercambio de instancia. Voy a elegir
el nombre de la propiedad o la propiedad llamada icono. Y si bien aún
tenemos a los seleccionados, bajemos a la apariencia. Aquí mismo y haga clic en la propiedad variable de
aplicar, y voy a
elegir Mostrar icono. Ahora, esto
vinculará la variable
booleana del icono show con la
apariencia de este elemento Entonces, ¿cómo funciona esto exactamente? Bueno, si selecciono esta instancia o esta
copia del componente, se
puede ver que
en el inspector, ahora
tengo tres opciones con las
que puedo jugar. Puedo elegir ocultar
el icono por completo. Puedo elegir cambiar ese
icono por otra cosa. Y puedo cambiar fácilmente
la etiqueta de ese botón. Digamos, comencemos, y escojamos
la flecha a la derecha. Por supuesto, con esto, puedo, ya
sabes, copiar y pegar, crear tantos botones
como quiera que se vean, ya
sabes, diferentes, y
hacen cosas diferentes. Esa es la belleza de
usar componentes. Ahora, mencioné que
también necesitamos agregar un
estilo secundario al botón, y para eso, estaremos usando lo que se llama varianza en figma. Así que selecciona el botón
del componente principal. Y en el inspector, da clic en agregar variante. Ahora, esto agregará todo a este tipo de contenedores aquí, y va a hacer dos cosas. Se va a hacer una copia de este estilo inicial o de
esta variante inicial, y también va a agregar
otra propiedad a mi botón. Se llama por
defecto propiedad uno, pero puedo cambiarle el nombre
a estilo de botón. O lo que yo quiera.
Y este estilo de botón, si miras en el
panel de capas tiene dos opciones. El primero, que
se llama default, ya
sabes, puedes
cambiarle el nombre a primario. Y la segunda variante dos, puedes cambiarle el nombre a,
digamos, secundaria. Entonces ahora hagamos que este tipo de botón
secundario se vea diferente. Voy a empezar
cambiando el color de relleno, y voy a estar usando EB
F tres Ff para ello. Le estaré agregando un trazo
o un borde. Eso es b8d7 FF, un píxel. Y luego voy a cambiar el blanco del texto
y el icono a negro
80%, así como así. Ahora bien, si hago otra
copia de este componente, ahora
tengo otra opción en la barra lateral
llamada estilo botón, lo que me permite elegir
entre las dos variantes. También tengo acceso a otras propiedades como
Mostrar icono, etiqueta e icono. Y si en algún momento
no te gusta el orden
de estos elementos, eso es realmente fácil de cambiar. Simplemente seleccione el botón principal
y vaya en el inspector, simplemente pase el mouse sobre la
izquierda de la propiedad hasta obtener este icono de
tres puntos. Entonces puedes moverlas por ahí. Entonces tal vez quiero que la etiqueta se siente por encima de eso y luego muestre el
ícono y luego el ícono. Bien. Entonces ahora si
selecciono alguna de estas instancias, notarás que el orden de
estas propiedades ha cambiado. Entonces cambiemos la etiqueta
de este botón para obtener
más información y vamos a ocultar
el icono por completo. Entonces me gustaría
un simple botón en, ya
sabes, el estilo secundario
que no tenga un icono. Bien, eso fue
súper sencillo de hacer. Como puede ver, configurar componentes de esta manera le
ahorra mucho tiempo. No más reconstruir
botones o hacer cambios
constantes a
lo largo de tus diseños. Ahora es tu turno. Usa lo que aprendiste
en este video para crear tu propio componente de
botón, y siéntete libre de
ser creativo con los colores y
la
tipografía y los Sólo hazlo tuyo. Si necesitas un punto de partida, puedes descargar el
archivo Figma en el que trabajé Encontrarás un enlace a eso
en la sección del proyecto. Y una vez que hayas terminado de
crear tu botón, por favor comparte una captura de pantalla o simplemente un video rápido de tu
botón en acción y, ya
sabes, publica eso en la galería de proyectos de
clase. Me encantaría ver
lo que se te ocurre. Si disfrutas de esta clase, echa un vistazo a mis otros videos. Tengo una clase en profundidad sobre diseño automático
Figma que puede
resultarle útil Y con eso dicho, muchas
gracias por ver. Happy Designing y
nos vemos la próxima vez.
Adi Purdila, UI/UX Designer, Framer Developer, Educator
