Transcripciones
1. Introducción: Los primeros meses
utilicé Figma, estaba usando
componentes todo mal. No fue hasta que me
zumí y aprendí más sobre el poder
de los componentes que realmente
comencé a
ver mi confianza en la velocidad y Figma dar
un giro para mejor. Como UI/UX y
diseñador de productos, los componentes son los bloques de
construcción para todos nuestros proyectos. Empezar fuerte es esencial si vamos a
producir un trabajo de calidad. [MÚSICA] Soy Maddie Beard, y soy diseñadora de UI/UX
radicada en Denver, Colorado. He estado trabajando profesionalmente
como diseñador desde 2017 para empresas tecnológicas
grandes y pequeñas, así
como para mí como
freelancer y emprendedor. En esta clase, vamos a estar hablando de seis formas de sacar
el máximo partido a los
componentes en Figma. Crearemos algunos
componentes desde
cero de la manera correcta, configuraremos las
propiedades del componente, los
haremos receptivos,
les daremos algunas variantes necesarias
y, finalmente,
los haremos interactivos. Luego, para concluir,
hablaremos sobre algunos consejos para construir componentes pensando en el trabajo en equipo
y la colaboración. Espero que te alejas
de esta clase, no solo con una
comprensión más profunda de los componentes, sino también con algunas habilidades reales y práctica en tu haber. Esta clase es para cualquier
diseñador que sea nuevo en Figma, componentes o que
trabaje en equipo, o tal vez haya estado
trabajando con componentes por un tiempo pero términos como variantes, propiedades
booleanas y diseño automático acaba de hacer
que tus ojos se glaseen. Una vez que hayas terminado
estas seis lecciones, estarás usando esas
funcionalidades y más para hacer que tus
componentes sean consistentes, flexibles y ahorrarles a ti y a
tu equipo toneladas de tiempo. Te animaría mucho a que hagas estos ejercicios junto conmigo e incluso los
compartas con tu
equipo si lo deseas. Pronto tendrás
todo lo necesario para aplicar estas lecciones a tu propio
trabajo en tu empresa.
2. Creación de un componente: Primero, aprendamos a crear algunos componentes
de la manera correcta. Prepárese para
el éxito a largo plazo siguiendo estos cinco consejos al crear sus propios
componentes. El primer consejo es solo pensar componentes como plantillas. Cada instancia de un componente es básicamente, cada vez que estás
usando esa plantilla. Los cambios que realice en el
componente se filtrarán y cambiarán
las instancias individuales. Pero si haces un cambio
en el nivel de instancia, no afectará
al componente principal ni ninguna otra instancia
del componente. Consejo número 2, siempre que sea posible, use marcos en lugar
de rectángulos. Tres, aproveche el diseño automático. Cuatro, siempre preste
atención a la alineación. Cinco, intenta seguir
un sistema de cuadrícula de píxeles. En mi última compañía, usamos un sistema de cuadrícula de ocho
píxeles, pero lo que sea que
use tu equipo está perfectamente bien siempre y cuando todos los diseñadores
estén siendo consistentes. Ahora, veamos cómo
estos consejos entran en juego con algunos componentes reales. Voy a empezar
por crear un componente realmente simple, un botón. Así que solo voy a
presionar F en mi teclado, que es el atajo para
alternar a esta herramienta de marco. Así que solo estoy creando un marco. Vamos a crear uno
que tenga 44 píxeles de alto por, digamos 100 píxeles de
ancho para nuestro botón. Como dije en la punta número 2, es importante
simplemente usar marcos como rectángulos en lugar de
agregar capas adicionales. Entonces, por ejemplo,
en lugar de agregar un rectángulo azul
encima de este marco, solo
voy a darle a este marco un
color de fondo de azul. De esta manera, estoy tratando con
menos capas y esto
realmente va a ser útil cuando se
trata de diseño automático. Ahora, agreguemos el texto, así que solo estoy presionando T
como botón de atajo. Ahora estoy seleccionando de nuevo en este marco y sólo
voy a darle un radio
de esquina de cuatro, agradable y sutil. En cualquier momento,
podemos convertir esto en un componente seleccionando
en el marco y golpeando Comando Opción K. También
puede hacerlo
subiendo a Objeto y luego
hacia abajo para hacer un componente. Entonces ahora que esto es un componente, vamos a cambiarle el nombre. Ahora, entremos en el diseño automático. La razón por la que
usamos el diseño automático es para que diferentes instancias
de este componente, si bien pueden aparecer
en diferentes tamaños, el texto
siempre debe estar centrado. Como es ahora, el
texto no está centrado. Así que vamos a seleccionar en todo el
marco y golpear el diseño automático. Por defecto, va
a anclar al niño, que en este caso es el texto dentro de todo el fotograma, lo va a anclar a la
parte superior izquierda con algún relleno. Entonces como puedes ver,
tenemos 23 pixeles de relleno a cada lado y
12 en la parte superior e inferior. Pero lo que queremos es asegurarnos que va a quedar
anclado al centro. Así que voy a
darle ahí a ese icono. Entonces, creo que 12 pixeles es
bueno para la parte superior e inferior, pero hagámoslo 24
para la derecha y la izquierda. Como dije, usar múltiplos
de ocho e incluso cuatro es realmente útil cuando se
trata de mantener la consistencia en tus diseños. Entonces ahora, ¿qué pasa cuando
cambiamos el tamaño de este botón? Se puede ver que el texto
permanece en el medio. Eso es exactamente lo que queremos. Ahora vamos a crear un componente
diferente. Hagamos una tarjeta. Entonces estoy golpeando F de
nuevo en mi teclado. Vamos a hacer esto 200
por 200 sólo por ahora. Voy a renombrar esta
tarjeta Opción Comando K. Voy a hacer R por rectángulo y poner una imagen dentro de
aquí que ocupe la primera mitad superior de
esta altura vertical. Entonces para poder usar
esto como máscara, solo
voy a
llenar en lugar de sólido, voy a darle a Image, y luego solo voy a
elegir una imagen. Tengo esta pizza
aquí en mi escritorio. Entonces tenemos esto, ahora
agreguemos los otros
elementos que necesitaremos. Hagamos algo de texto. Entonces tal vez esto sea un título
y luego una descripción. Esto debería ser mucho más pequeño. Queremos alinear esto a la izquierda y haremos lo
mismo con el título. Ahora que tenemos todos
los elementos que
vamos a necesitar aquí, voy a activar
el diseño automático. Entonces las cosas se pusieron un poco
funky, pero está bien. Vamos a averiguar
por qué sucedió esto y cómo podemos
hacerlo exactamente como
queremos que funcione como plantilla para el
resto de nuestros proyectos. Así se puede ver que cuando hice
auto-layout, automáticamente, va a posicionar a
los hijos, que son los
elementos individuales dentro de un marco. Los va a colocar
verticalmente y centrados en el medio
y anclados a la parte superior. Eso es exactamente lo que está
pasando aquí. Este texto está alineado a la izquierda, pero el cuadro de texto en sí está alineado con el
centro del marco. Entonces ahora, lo que quiero hacer en realidad
es agrupar estos
juntos en un marco. Solo voy a
golpear la selección de fotogramas, y en realidad podemos
activar el diseño automático para este marco dentro del marco. Entonces voy a alinear
estos a la parte superior izquierda. Realmente solo necesitamos como tal vez cuatro
píxeles entre estos tipos. En lugar de abrazar el texto, lo que quiero que haga es
realmente llenar el contenedor. Verticalmente, queremos que abrace los contenidos.
Entonces, eso es bueno. Entonces cuando hacemos clic en
este mainframe aquí, podemos ver que aquí hay ocho
píxeles de espacio. Hagamos eso 12. Ahora, vamos a ver qué pasa cuando ampliamos esto. Verás, estamos consiguiendo
espacio a ambos lados. Entonces en vez de tener un ancho
fijo para esta imagen, voy a decir que la imagen debe llenar el contenedor. Mantendremos la altura fija. Ahora, cuando lo expandimos, se
puede ver que llena todo
el contenedor. Vamos a agregar un
poco de relleno. Queremos agregarlo a
este elemento porque
no queremos que se aplique también
a la imagen. Así que vamos a agregar 12
píxeles en cada lado y 12 píxeles en la
parte inferior. Se ve bien. Ahora, vamos a darle a todo el asunto un radio de esquina, tal vez 16. Ahora vamos a tener que
entrar con esta imagen que está superpuesta y
agregarla por separado. Esto se ve bien. Le daremos una
sombra solo por diversión. Voy a hacer esa sombra
un poco más sutil. Me gusta usar el ocho
por ciento. Se ve bien. Con estos dos componentes, ya
estamos haciendo
tip número 1. Estamos pensando en
ellas como plantillas, así que estamos prestando
mucha atención a lo que va a pasar si, por ejemplo, seguimos escribiendo en esta descripción hasta que pase
a la siguiente línea. Eso se ve
perfecto. Así que revisa, estamos
pensando en la plantilla. Número 2, estamos
usando marcos cuando es posible en lugar de rectángulos. Número 3, hemos dominado el
diseño automático con ambos. Número 4, nos hemos asegurado de que todo esté alineado correctamente. Número 5, cuando es posible, hemos utilizado relleno y dimensiones que caen dentro de
una cuadrícula de ocho píxeles. Una forma de verificar que nuestros componentes son flexibles
y que hemos hecho todo lo necesario para
configurarlo para el éxito es arrastrar una copia de él o una instancia y usarlo como tú lo
usaría en un proyecto. Entonces, por ejemplo, ¿y si aquí
tuviéramos un título realmente largo? Entonces, como pueden ver,
este título realmente largo estiró este componente para que
fuera realmente amplio. No creo que eso sea
necesariamente lo que queremos. Entonces volvamos a este componente
principal y cambiemos esto en un elemento de ancho fijo. Entonces ahora, tenemos
este ancho fijo, definitivamente
necesitamos
alinear eso a la izquierda. Ahora veamos qué
pasa cada vez que
cambiamos el título por algo
más largo. Ahí vamos. Entonces ahora que este
es un ancho fijo, lo va a empujar hacia abajo lugar de
empujarlo hacia la derecha. Entonces ahora, podemos ir por aquí. Dado que este es el componente
principal, los cambios
se filtran hasta nuestra instancia. Ahora podemos ver que así es
exactamente como lo quisiéramos. Entonces voy a
darle a este componente un plus A y decir que podemos
pasar a la siguiente lección. Entonces ahora es tu turno. Adelante, elige uno o ambos de estos componentes y
créalos tú mismo. Asegúrate de marcar las
cinco casillas de los consejos que compartí en esta lección. Te
veré en la siguiente.
3. Configuración de propiedades de componentes: Ahora que tienes uno
o dos componentes con los que trabajar,
vamos a configurar algunas propiedades que
podamos hacerlo aún más flexible para poder ser
utilizado en tus proyectos. En esta lección, lo haremos a través de tres propiedades
diferentes. Booleano, que es una propiedad verdadero-falso, encendido-apagado, intercambio de
instancias y texto. Entonces veamos cómo esos
entran en juego con estos dos componentes
que ya creamos. Empecemos por las propiedades
booleanas. Piensa en eso como
crear un interruptor de encendido-apagado. Creo que un buen lugar para hacer
eso está dentro de este botón. Así que sólo voy
a colocar un icono aquí y ahora vamos a
averiguar cómo apagar y encender
este icono. Porque a veces cuando
estás usando este botón, es posible que quieras un ícono y
otras veces quizás no. Entonces, poder usar
un componente
solo en diferentes instancias
de ese componente, en lugar de crear dos componentes
separados, te
va a ahorrar mucho tiempo. Especialmente cuando
ves lo fácil que es esto. Entonces lo que voy
a hacer es entrar y seleccionar en este icono. Al otro lado de la capa, tenemos este icono aquí. Dice aplicar propiedad booleana. Entonces voy a hacer clic en
eso y me está mostrando automáticamente el nombre de esta propiedad por
defecto es mostrar icono. Entonces eso me suena bien, y así voy a crear eso. Ahora bien, si arrastramos esto para ver otra instancia
de este componente, así como así, tenemos un toggle donde el objetivo del
toggle es ese icono. Figma es lo suficientemente inteligente como
para saber que queremos apagarlo y encenderlo con
una propiedad booleana. Entonces eso es muy fácil. Ahora
vamos un paso más allá. ¿Y si queremos cambiar
este icono por otra cosa? Bueno, he creado un par de
variantes de este
componente por aquí, y vamos a
profundizar mucho en las variantes en la Lección 4. Pero por ahora, no te
preocupes por cómo creé esto, solo
pensemos en cómo
lo vamos a usar. Entonces tengo un componente aquí, este es el componente principal
y tiene varias variantes. Entonces tengo la
variante de descarga, que es la predeterminada, una variante de compartir y una variante de guardar. Entonces Figma es lo suficientemente inteligente como
para saber que como esos se agrupan
dentro de un componente, posible que
queramos
intercambiar entre ellos. Así que ahora otra vez, si entro y hago
clic en este icono aquí, voy a ver este icono aquí, aplicar propiedad de intercambio de instancia. Entonces voy a hacer clic en eso, le
vamos a nombrar instancia, y eso se ve bien. Así que ahora, cada vez que arrastre una instancia y hago doble clic
en este icono de aquí, podemos venir y
cambiar esto para todas las instancias de
ese componente de icono. Ahora, el último, hablemos de texto. Entonces, si quiero
que alguien pueda
entrar en mi archivo Figma y cambiar el texto sin
tocar el propio componente, lo que podemos hacer es
seleccionar en el texto. Entonces aquí abajo, podemos
hacer clic en este icono aquí y crear una
propiedad a partir de eso. Así que ahora, de nuevo,
arrastraremos una instancia, y en lugar de escribir
el texto aquí, en realidad
puedo seleccionar
la instancia, y luego
pasar a este panel Propiedades, y escribir algún texto en su lugar. Entonces tal vez queremos
que diga descargar. Entonces simplemente actualizará
automáticamente este componente sin
siquiera tener que tocarlo. Lo mismo funciona con
algo así. Digamos que
queremos poder
cambiar el título
y la descripción. Simplemente presionaremos ese botón
o nombraremos este título, le daremos un nombre a esta descripción. Ahora bien, si tenemos una instancia
de estos componentes en alguna parte, sin tener que
tocar este componente, simplemente
haremos clic en él
y vendremos por aquí. Aquí está el título, esta es una descripción. Como puede ver, también
prestará atención a todas las propiedades
de diseño automático propiedades
de diseño automático
que establecemos anteriormente. Así que esto solo hace que
las cosas sean mucho más fáciles y rápidas para
ti y tu equipo. Sigue adelante y juega
con estas propiedades con los componentes
que creaste y siéntete libre de ser
creativo con él y hacer algo nuevo y probar los límites de lo booleano y el intercambio de instancias
y las propiedades de texto.
4. Hacer que los componentes sean responsivos: Es importante tener en
cuenta que usted y su equipo podrían estar usando estos componentes en múltiples tamaños de pantalla
diferentes. Así que hacerlos receptivos es súper útil y ahorra tiempo. Hablamos
un poco de eso en la Lección 1. Pero hagamos otro
ejemplo aquí con una barra de navegación. Empecemos con
una barra de navegación que está optimizada para un iPad mini, y veamos si podemos hacerla receptiva para una pantalla de escritorio. Entonces voy a darle a “F” para
fotograma y crear algo que tenga 774 píxeles de ancho, y vamos con
60 píxeles de alto. Voy a darle a esto un
bonito color de fondo. Agarraremos un logotipo falso que
hice y lo pondremos ahí. Entonces hagamos algunos elementos del menú. Entonces, si esto es un café, posible que
queramos menú, horario y contacto. Ahora, igual que antes, queremos
convertir esto en un componente, opción “Comando K”, lo
llamaré nav. Entonces vamos a activar el diseño
automático de inmediato para que podamos ver con
qué estamos trabajando. Entonces, por defecto, va
a abrazar todo nuestro contenido. Así que vamos a agrupar estos juntos en un marco para que podamos poner el diseño
automático y
digamos que queremos 24 píxeles entre cada uno de estos. Entonces definitivamente parece que estos se están abrazando más
hacia el fondo, así que asegurémonos de que
podamos alinear esto al centro. Entonces ahora tenemos el frame padre, que es el
componente en su conjunto y dos hijos diferentes. Entonces veamos qué pasa cuando tratamos de hacer esto más grande. Eso definitivamente
no es lo que queremos. Entonces lo que voy
a hacer es seleccionar este marco y venir
y golpear estos tres puntos, y en vez de empaquetar, vamos a cambiar
esto al espacio entre ellos. Se puede ver que eso está más en
línea con lo que queríamos. Entonces podemos entrar y cambiar
el relleno en el costado, tal vez 24 funcionaría para eso. Entonces esto se ve
un poco grande, así que sólo voy a entrar
y hacerlo un poco más pequeño. Pero cuando lo hice más pequeño, parece que
cambió la altura. Entonces quiero asegurarme de
que mi altura sea siempre de 60 pixeles, así que digamos arreglada para eso. Entonces esto se ve bien. Entonces ahora, vamos a probarlo. Tengo estos marcos por aquí, uno para un iPad Pro y otro
para un MacBook Pro, de 16 pulgadas. Entonces lo que voy
a hacer es copiar y pegar estos sobre y
sólo vamos a posicionarlos. Entonces primero, para nuestro iPad, y luego para nuestro escritorio. Entonces como puedes ver eso
funcionó muy bien, y tal vez te estés preguntando
¿qué harías si
quisieras crear uno de
estos para la pantalla de un iPhone? Bueno, lo que podríamos
querer
hacer es convertir esto en un menú de hamburguesas, y esa en realidad tendría
que ser una variante separada. Entonces hablemos de varianza
en la siguiente lección. Pero antes de eso, trata de
entrar en alguna práctica
con la creación de un componente
receptivo. Puedes hacer algo que sea receptivo desde un iPhone a un iPad o un iPhone a un escritorio
o un iPad a un escritorio. Lo que quieras, y si te quedas atascado
siéntete libre de simplemente
hacer lo que hice y crear
esta misma barra de navegación.
5. Creación de variantes para componentes: A veces, las propiedades
y el diseño automático no son suficientes para
que sus componentes sean lo suficientemente
flexibles como para ser utilizados en todo el proyecto
o sistema de diseño. Ahí es donde
entran en juego las variantes. Pueden ahorrar mucho
tiempo y esfuerzo a la hora de diseñar pantallas
usando sus componentes. En esta lección, crearemos variantes para diferentes
estados de un botón, campos e iconos que
puedes usar e intercambiar
indistintamente. Empecemos con este botón
que ya creamos. Así que sólo voy a hacer click
en el marco como un todo. Luego vendremos aquí a las propiedades y presionaremos el
botón “Plus” y
crearemos una nueva variante. Entonces entonces voy a hacer clic en
el botón Más aquí
abajo para crear uno nuevo. Entonces esto automáticamente
va a ser etiquetado por defecto. Ahora vamos a editar esta propiedad
y darle un nombre. Lo llamaremos estado. Por defecto es bueno aquí. Ahora, ¿qué queremos que sea
este estado? Creo que empezaremos con hover. Entonces hagamos que el estado hover un
poco más oscuro de un azul. Yo solo voy a
Comando click para
bajar a esa capa de marco
detrás del texto en el icono. Entraré aquí y solo arrastraré esto hacia abajo hasta
que piense que ya es lo suficientemente oscuro. Sólo un poquito, no tiene que
ser demasiado drástico. Entonces ahora este es el estado hover
y vamos a crear uno más. A lo mejor tenemos un estado
que está discapacitado. En lugar de este azul, tomemos un color gris como este para que quede claramente
deshabilitado y no puedas usarlo. Creo que esto es bueno,
así que ya es bastante fácil. Ahora, hagamos lo
mismo con un campo. Primero, vamos a crear
este campo juntos. Voy a presionar F para fotograma. Veamos, definitivamente queremos que
esto sea de 44 píxeles de alto, el campo en sí, y la longitud no
importa en este momento. Vamos a etiquetarlo campo y
convertirlo en un componente. Ahora lo que queremos
hacer es que en realidad no exista
este fondo porque lo que queremos es
tener una etiqueta de campo. Entonces eso puede ser bastante pequeño. Simplemente
lo colocaremos en la parte superior derecha. Entonces queremos que otro
marco dentro este marco sea
el campo real, y este tendrá un relleno. Por ahora, solo lo
haremos blanco. Esto es lo que queremos que
sea de 44 píxeles de alto. Entonces queremos asegurarnos de
que todo eso
esté dentro del marco. Ahora hagamos el diseño automático y solo jueguemos un poco con
estos. Tenemos esta etiqueta. Creo que queremos que
esta etiqueta en realidad sea un poco más grande, 12 suele ser buena para etiquetas. Ahora por defecto, tiene
cuatro píxeles entre ella, o cinco píxeles entre
ella. Hagámoslo cuatro. Vamos a dar la vuelta un poco a
estas esquinas. Esto se ve muy bien. Ahora pongamos algo de
texto en el campo. Texto de muestra. Vamos a hacer esto un poco más grande. Creo que queremos
hacer esto por lo menos 14, y vamos a hacer que sea de peso
regular. Vamos a alinearlo a la izquierda. Asegurémonos de que
esto también esté alineado a la izquierda y
enmarquemos estos juntos para que así podamos poner el diseño automático. Creo que queremos arreglar el ancho y solo
asegurarnos de que tenemos, creo que podemos
tener menos relleno. Hagamos ocho píxeles y luego
16 en la parte superior e inferior. Asegurémonos de
centrar el texto dentro de ahí. Esto se ve bien. Ahora definitivamente vamos a necesitar múltiples variantes para esto. Sólo voy a agregar una
propiedad, agregar una variante. Vamos a hacer de esto nuestro valor por defecto. Lo llamaremos el estado predeterminado de
propiedad. Entonces llamemos a este campo. Ahora que lo estoy pensando, creo que el estado predeterminado
antes de que alguien empiece a
escribir algo, esto debería parecerse más
a texto de muestra. Vamos a entrar y hacer esto gris. Eso servirá por ahora. Ahora bien, este texto es
en realidad el texto relleno. Ahora tenemos dos
variantes distintas y hagamos una más. A lo mejor si alguien se
cierne sobre esto, debería
haber un trazo en este lleno aquí para llamar
su atención sobre ello. Simplemente agregaremos un trazo. Hagámoslo un
poco más sutil. Eso debería ser bueno.
Un pixel es bueno. Esto se ve muy bien. Ahora lo que tenemos son tres variantes
distintas. Pero este que creamos, el estado que
daríamos está flotando. Pero el problema es que alguien podría haber flotado sobre
un campo que ya está lleno y un campo que aún no
está lleno. De hecho, queremos
convertirlos en dos propiedades diferentes. Voy a deshacerme
de esto por ahora. Lo que voy a hacer es agregar
otra variante. Entonces solo visualmente, me gusta
alinearlos un poco diferente cuando es una propiedad
diferente para que pueda ver visualmente con
qué estoy trabajando aquí. Ahora tenemos éste, y vamos a copiar
éste también de nuevo. Ahora en esta columna de la izquierda, tenemos las que son predeterminadas. Ahora necesitamos agregar una variante
completamente distinta. [RUIDO] En lugar de tener
este llamado estado, llamemos a esto hover. Ahora hover va a ser sí con estos dos y
no con estos dos. Entonces para estos dos, le
daremos ese mismo
trazo que hicimos antes. Asegurémonos de que llenemos el estado para esto también. Esto es por defecto. Esto debe ser llenado. Ahora tenemos este componente con cuatro variantes totales
y dos propiedades. Ahora veamos qué pasa
cuando vamos a usarlo. Sólo voy a
pegar esto por aquí. Ahora, como teníamos un valor sí, no como una de
nuestras propiedades, realidad
se convirtió automáticamente esto en un booleano, lo que significa que podemos
activarlo y apagarlo, al
igual que el icono en el
botón en una lección previa, que lo hace más fácil. Entonces también podemos
cambiar
de texto predeterminado
a texto relleno. Ahora puedes ver cómo está funcionando
esto. Puedes tener tantas variantes como quieras con el componente. Con él se puede obtener muy
granular. Este es solo un ejemplo súper
simple de cómo usar variantes
con un campo. Ahora, vamos a entrar en estos íconos que te estaba
mostrando antes. Voy a
hacerlos negros solo para que sean más
fáciles de ver por ahora. Para mostrarte cómo hice esto, sólo voy a
añadir otro. Vamos a usar
el botón Plus, y eso solo va
a agregar uno que por defecto se vea como
este primero. Sólo voy a hacer doble clic
aquí y borrar eso. Pero todavía tenemos
este marco aquí. Sólo voy a agarrar
uno de estos otros íconos. Acabo de darle al Comando C para copiar. Ahora voy a seleccionar en este cuadro y
Comando V para pegar. Entonces solo lo
redimensionaré para que se asiente muy bien dentro de este marco
como lo hacen el resto de ellos. Eso se ve bien. Ahora, sólo
tenemos que darle un nombre. Tipo, vamos a llamar
a esta edición. Eso es todo lo que tienes que
hacer para crear este conjunto de iconos. Si tiene iconos que pueden ser diferentes tamaños dentro de
su sistema de diseño, puede tener absolutamente dos componentes
principales de iconos diferentes. Uno pequeño y otro grande o grande, mediano y pequeño, lo que sea que funcione para ti. Solo quiero
mostrarte rápidamente cómo
en realidad hice estos. Solo estoy golpeando T para texto. Tengo una tipografía llamada
Font Awesome 5 Pro. Si apenas empiezo a escribir, voy a escribir pausa, entonces hay un
icono de pausa para esto. Voy a hacer
la versión sólida. Entonces todo lo que hago es
Control click aplanar. Así es como creé
estos íconos. Vamos a crear solo un
par más aquí. Agregar una variante,
hacer doble clic, eliminar, copiar y
pegar, cambiar el tamaño. Incluso puedes centrarlo muy bien dentro de este marco.
Eso se ve bien. Ahora tenemos cinco
variantes diferentes de este icono. Puede usarlo en todo
su proyecto en cualquier componente o diseño
que tenga este icono. Eso solo hace que sea mucho
más fácil el intercambio de entrada y salida. A ver eso en acción. Ahora voy a agarrar una
instancia de este componente y sólo ver lo flexibles
que podemos llegar con esto. Si lo seleccionamos,
podemos cambiar el estado. A lo mejor lo cambiamos para que se ciernan. Podemos tocar el icono y cambiarlo a cualquiera de
estos que creamos. Editar. Entonces incluso podemos volver aquí y cambiar el texto sin siquiera tocar
el componente. Para practicar esto, toma uno de tus componentes y construye
un par de variantes. Si estás atascado,
un gran lugar para comenzar es con esos estados de
botones. Al igual que lo hice, crear
un estado predeterminado, un estado de libración y
un estado deshabilitado. Entonces siéntete libre de hacer una captura y compartirlo en
la sección de discusión.
6. Hacer que los componentes sean interactivos: Hacer que tus componentes sean
interactivos es definitivamente más
una cosa extra que puedes hacer si tienes tiempo o realmente quieres
meterte en la creación de prototipos. Pero dicho eso si trabajas en un equipo que hace
mucho prototipado, ya sea para probar o presentar a no diseñadores, entonces esto definitivamente te puede
ahorrar mucho tiempo. Piense en ello como creación de prototipos
en el nivel de componente o plantilla en lugar
del nivel de instancia. Por ejemplo, cualquier pantalla
que tenga una instancia de este
componente de botón principal va a adoptar ese
cambio de comportamiento al pasar el ratón. Veamos esto en acción. Ahora bien, ¿cómo
logras que esto suceda? Bueno, es súper fácil. Sólo vamos a afinarnos en estos dos estados del botón. Lo que voy a hacer es dar click en éste y
pasar al prototipo. Una vez que haga eso, entonces voy a ver este signo más aquí
cuando lo vuelque. Voy a hacer click y arrastrar. Voy a arrastrar esta
flecha al estado de flotación. Entonces aquí, en lugar de en tap, vamos a hacer mientras se
cierne y cambiará
a este estado de hover. Eso ya es bastante fácil. Entonces, saldremos del
modo prototipo y al modo de diseño. Voy a copiar
este componente. Sólo para mostrar esto en acción, voy a pegarlo
en este componente aquí. Entonces haré clic en
todo este marco del iPhone y presionaré el botón de reproducción aquí arriba. Una vez que se cargue,
podrás ver una vista previa de la pantalla y yo
voy a repasar. Como puede ver al pasar el cursor, esta instancia de
ese componente está cambiando de ese
azul más claro al azul más oscuro. Hay tanto que puedes hacer con este tipo
de interacciones. Este es simplemente
el más
simple pero es el que me
parece que más a menudo uso. Sigue adelante y prueba esto y
luego ponte creativo con él. Crea tu propia
interacción y crea algunas instancias de la misma y
pruébalas con
el reproductor de previsualización.
7. Construir con el trabajo en equipo: Antes de concluir esta clase, quiero compartir algunos de mis consejos para construir pensando en el
trabajo en equipo. Si estás creando componentes
para usar en todo tu equipo, ya sea que tu equipo sea dos
diseñadores o 50 diseñadores, estos pasos ayudarán a que
el proceso transcurra sin problemas. Número 1, use convenciones de
nomenclatura consistentes para sus componentes. Esto no importa
si solo tienes algunos componentes como
nosotros ahora mismo, pero cuando empieces a desarrollar todo
un sistema de diseño, vas a tener muchos, muchos más componentes,
muchas variantes, e incluso diferentes
versiones de componentes. Lo que me gusta hacer en realidad es
dividirlos en diferentes páginas y
empezar a crear un archivo que sea su sistema de
diseño. No profundizaremos en eso en esta clase porque los sistemas de
diseño son una bestia completamente diferente sobre la que puedo hacer una clase
entera. Pero comenzar temprano con
las convenciones de nomenclatura realmente puede ayudarte. Por ejemplo,
digamos que tenemos dos versiones de este componente de
tarjeta. A lo mejor tenemos uno con una imagen y tal vez tenemos
uno con íconos. Entonces puedes
nombrarlos en consecuencia. Se podría decir Tarjeta/Imagen
y Tarjeta/Iconos. Esto realmente ayudará
siempre que la gente esté usando estos componentes
y arrastrándolos desde el panel Asset en Figma. Volviendo a nuestro otro ejemplo, también
podríamos decir Nav/Mobile
versus Nav/Desktop, o Icons/Large, Icons/Small. Incluso puedes obtener más
detalles, Íconos/12 para
12 píxeles versus
Icon/24 para 24 píxeles. También lo he visto hecho de esa manera. Número 2, nombrando tus
capas dentro de un componente. Siempre que estoy
creando componentes, no
me preocupo demasiado
por lo desordenado que es. Pero luego volveré una vez que esté contento con cómo funciona un
componente, lo
estoy probando a través varios tamaños de pantalla,
luego estoy contento con él. En ese punto,
volveré y comenzaré a nombrar mis capas y
realmente a organizar las cosas. Muchas veces, estaré enmarcando elementos dentro de
diferentes marcos. Se convierte en un marco dentro un marco dentro de un
marco dentro de un marco. Etiquetar todos esos marcos
diferentes es realmente útil si alguien
alguna vez tiene que
entrar y modificar este componente. número 3 está pensando en
el tipo de etiquetas de texto que estás usando cuando
estás usando texto de muestra. Esto es difícil de
describir de manera abstracta. Echemos un vistazo a
este ejemplo de campo. Para todos estos, hemos utilizado
la etiqueta de la palabra como
etiqueta de campo, pero para el texto interior, estamos usando texto de muestra
versus texto relleno. Eso realmente ayudará
con los desarrolladores también, en lugar de solo tener
Lorem ipsum ahí, en realidad les
está
describiendo es como debería ser el
texto relleno, es negro, versus esto es lo que el texto de muestra debe
verse como, que es gris. Yo he hecho lo mismo
en el componente de tarjeta. He nombrado el título Título, y luego la descripción que
tengo ahí. Esta es una descripción y a veces
incluso voy a poner algo, puede ir a dos líneas antes de
truncar o algo así. Voy a usar eso como guía
para mis desarrolladores. Dicho todo eso, el
punto es tratar de
usar texto en tus componentes
a tu favor, y eso solo brindará
claridad a todos los involucrados. Número 4, ya compartí esto en varias de las lecciones, pero use el diseño automático. No te puedo decir
cuántas veces he ido a usar un componente y sentido
tan frustrado porque la segunda que lo estoy usando
en un proyecto real, me he sentido
tan frustrado porque la segunda
que lo estoy usando
en un proyecto real, simplemente no es
lo
suficientemente flexible como para que use y así que tengo que ajustarlo, y todo el tiempo
sería mucho más rápido
ajustarlo a nivel de componente para
que el trabajo no se duplique, triplique o cuadriplique con todos los diseñadores de tu equipo. Esos son mis cuatro consejos para construir pensando en el trabajo en equipo. Siéntete libre de reflexionar
sobre estos y compartir algunos de tus
favoritos con tu equipo.
8. Reflexiones finales: Enhorabuena por llegar hasta el final de esta clase. Realmente espero que poco a poco, estas lecciones te hayan ayudado a
sentirte más cómodo creando
componentes en Figma. Te animo mucho a que sigas practicando y compartiendo lo que estás aprendiendo con tu equipo. También puedes dejar cualquier duda que surja en la sección de
discusión a continuación y me aseguraré de
responderlas. Muchas gracias por
pasar tiempo conmigo hoy y los veré en mi próxima clase o más en
mi canal de YouTube. Adiós.
Maddy Beard, Product Designer & Educator
