Diseño de UI/UX: 6 consejos para agilizar los componentes en Figma | Maddy Beard | Skillshare
Menú
Buscar

Velocidad de reproducción


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Diseño de UI/UX: 6 consejos para agilizar los componentes en Figma

teacher avatar Maddy Beard, Product Designer & Educator

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Lecciones en esta clase

    • 1.

      Introducción

      1:52

    • 2.

      Cómo crear un componente

      9:30

    • 3.

      Cómo configurar las propiedades de los componentes

      4:34

    • 4.

      Cómo hacer que los componentes sean adaptables

      3:39

    • 5.

      Cómo crear variantes para los componentes

      11:23

    • 6.

      Cómo hacer que los componentes sean interactivos

      2:04

    • 7.

      Cómo construir en función del trabajo en equipo

      4:20

    • 8.

      Reflexiones finales

      0:28

  • --
  • Nivel principiante
  • Nivel intermedio
  • Nivel avanzado
  • Todos los niveles

Generado por la comunidad

El nivel se determina según la opinión de la mayoría de los estudiantes que han dejado reseñas en esta clase. La recomendación del profesor o de la profesora se muestra hasta que se recopilen al menos 5 reseñas de estudiantes.

1020

Estudiantes

11

Proyectos

Acerca de esta clase

¡Aprovecha la potencia de los componentes de Figma con la diseñadors de productos, Maddy Beard! 

Como diseñador de UI/UX, sabes que los componentes son los bloques de construcción de diseño de tus proyectos. Entender cómo usar los componentes a tu favor puede aumentar tu confianza en Figma y mejorar la eficiencia de tu equipo. Acompaña a Maddy mientras te guía a través de seis consejos para mejorar tu uso de componentes en Figma. 

En esta clase con Maddy, aprenderás lo siguiente:

  • Aprende a crear un componente de la manera correcta 
  • Configura las propiedades de los componentes
  • Haz que los componentes sean adaptables 
  • Crea variantes para tus componentes 
  • Haz que los componentes sean interactivos 
  • Construye componentes en función del trabajo en equipo 

Tanto si eres nuevo en el mundo del diseño de productos como si eres un experimentado diseñador de UI/UX, esta clase te brindará las herramientas necesarias para optimizar el uso de componentes en Figma.  

______

La clase de Maddy está destinada a diseñadores de UI/UX, pero todos los estudiantes pueden unirse y disfrutarla.

Conoce a tu profesor(a)

Teacher Profile Image

Maddy Beard

Product Designer & Educator

Profesor(a)

I'm Maddy Beard, a product designer & content creator based in Denver, Colorado.

You can also find me on YouTube, Instagram, and my Newsletter. 

Ver perfil completo

Level: All Levels

Valoración de la clase

¿Se cumplieron las expectativas?
    ¡Superadas!
  • 0%
  • 0%
  • Un poco
  • 0%
  • No realmente
  • 0%

¿Por qué unirse a Skillshare?

Mira las galardonadas Skillshare Originals

Cada clase tiene lecciones cortas y proyectos prácticos

Tu membresía apoya a los profesores de Skillshare

Aprende desde cualquier lugar

Ve clases sobre la marcha con la aplicación de Skillshare. Progresa en línea o descarga las clases para verlas en el avión, el metro o donde sea que aprendas mejor.

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.