Figma: ¡usando variantes!

1. Introducción: Oye, vamos a ser tutorial superrápido donde vamos a hablar de bariones fema. Dice función súper cool que te permitirá distribuir mejor tus componentes también. En este tutorial, hablaremos de cómo crear componentes de diferentes maneras. Nosotros dos enfoques. Uno va a ser los componentes independientes en el extranjero y el otro va a ser todos los componentes se van a crear, para ser creados a partir de un componente maestro. Por lo que todos los componentes son dependientes de solo uno. Por lo que más adelante puedes hacer cambios más rápido. Este es un tutorial para todos, aunque seas nuevo en sigma, tal vez sea una buena en el extranjero es cómo hacer componentes. Y así aprenderás el tipo de agrupación de los baryones. Y si ya sabes jugar combina aire o estás trabajando en, el mismo sistema va a ser bueno para ti porque tal vez aprendes un par de trucos sobre la creación componentes satélite que en también aprenderás a mejora todo tu flujo de trabajo con baryones. De acuerdo, así que baryons a, sólo para mostrarte un poco cómo, cómo funcionan. Baryons, lo que haremos es imaginar, aquí tengo este sistema de diseño y lo creo. Y por lo general tienes el, este debe más conjunto de filas de componentes creados con esta nomenclatura y todo. Y cuando llegas a activos, si quieres buscar tu botón, te vuelves un poco loco por todos estos elementos y botones que tienes aquí, todos, todos los componentes. Es un poco desordenado buscar un componente, vale. Pero tengo esta otra muestra, que es los mismos botones componentes que teníamos antes con este tipo de baryones que podemos ver aquí a la derecha con las variantes creadas. Entonces en lugar de tener muchos componentes, si venimos aquí a la columna vertebral de activos, ahora, sólo tenemos un botón en lugar de tener muchos de ellos. Entonces solo voy a colapsar esto en lugar de tener todos estos componentes, lo cual es un poco molesto buscar y hacer moverse. Sólo tenemos un botón, sólo un botón. Y aquí podemos cambiar sus propiedades para conseguir, para conseguir y utilizar todos estos elementos que tenemos ahí. Entonces esta es una forma súper rápida de trabajar con, como puedes ver, es una forma de trabajo súper VC de trabajar con los iconos que tenemos. Entonces simplemente vamos a ir a la primaria. Y si te interesa, puedes aprender sobre cómo crear componentes de una manera eficiente y cómo usar estos nuevos instaladores de Marianne, solo GME y en estas corta clase va a tardar como un 30 minutos, 35 minutos para aprende todo. Entonces únete a mí a estas anotaciones y piensa antes de hacerlo. 2. Variantes con un sistema de diseño existente: Oye, gracias por acompañarme para esta primera lección. Entonces, empecemos. Hay dos opciones mientras se trabaja con baryones. El primero es si tienes como un sistema de diseño de puertas clave de interfaz de usuario existente, imagina que estás trabajando para una empresa o empresa y tienen como un, un sistema de diseño. Y ahora estás trabajando con el sistema de diseño y quieres mejorarlo. Entonces una de las cosas que puedes hacer para mejorarla ahora mismo y más fácil que nunca es la variante de implementación AST en tus componentes, ¿de acuerdo? Está bien. Entonces tengo aquí un, un sistema de diseño podría haber creado. Y veamos un poco de distracción. Por lo que aún no he creado la versión pequeña de estos botones, pero es algo que estoy planeando hacer. Digamos que también quiero hacer una pequeña versión de las vitaminas. Eso serán 32 pixeles, ¿de acuerdo? Pero tengo este brote, la muerte, ¿de acuerdo? Entonces tenemos algunos, vamos a llamarlo tipos de botones. Uno de texto ancho, otro con iconos a la izquierda y a la derecha. Un icono a la izquierda y un icono a la derecha. Y entonces solo voy, Ok, entonces ahora vamos a entrar en cómo hice esto porque más adelante veremos cómo hacer todas estas botellas desde cero bastante rápido usándolas, usando el método maestro. ¿ De acuerdo? Por lo que no importa ahora mismo. Pero lo que quiero que veas es la estructura de esto, ¿de acuerdo? Entonces si vemos aquí estos botones, el texto grande y luego el objetivo crítico primario con todos estos estados sobre el default, Hulbert sombrío, lo que sea. Yo quiero verte esta estructura aquí. Entonces, por ejemplo, para este, tengo como botón, que es, este último es bastante importante como ustedes sabrán. Es lo que hace es crear como carpetas, ¿de acuerdo? En componentes. Entonces si pongo botón es último grande, barra, todos los, todos los botones que compartieron esa barra, van a estar en la misma carpeta. Entonces eso es bastante importante. Entonces tenemos el nombre del componente, esta iss, entonces tenemos el tipo de botón que estamos usando, entonces ese sería otro tipo de botón, ¿verdad? El primario, crítico, secundario sin fronteras, Eso sería otro tipo de tipo. Y luego el predeterminado y el clip por defecto o hover, que podría ser de un estado. De acuerdo, entonces vamos a ver lo fácil que es entrar. Algo importante al respecto es que si venimos aquí al, al inspector de componentes, podemos ver que tenemos todos estos GYN de toda cantidad masiva de botones aquí. Y si quiero elegir uno de ellos es un poco desordenado. Ya sabes, no desordenado, sino cómo decirlo. Es un poco difícil encontrar donde quiero, aunque busco, si pongo primaria, aunque busco, si pongo primaria,van a subir muchos botones aquí y tengo que tener 13 años. Este es el, este es el estado por defecto de este es el Hubbard. Ya sabes, es un poco difícil, así que vienen gangas en busca de ayuda. Entonces, ¿qué, qué estamos dispuestos a hacer si seleccionamos algunos componentes? Aquí a la derecha Bono tenemos baryones. Nosotros sí, podríamos combinarlos. Sí, ahora mismo. Está bien. Pero quiero seleccionar todos mis botones. Recuerda, acaba de hacer clic tamizar y luego seleccionar con droga. Todos tus botones. Entonces vamos a dar click en combinado como variantes, ECS, ese pedazo de pastel. Entonces si ves todos nuestros botones aquí, alguna manera tienen estos aparecer en los componentes de inicio de sesión, y ahora solo tenemos un botón, como puedes ver. Entonces esto es algo importante. Entonces ya no tenemos 143 León, millones de botones, sólo tenemos uno. Y esto es brillante. O sea, ¿qué pasa si traemos este botón aquí arriba que ahora tenemos estas propiedades aquí. Como se puede ver, icono, icono, Izquierda, Icono F, Derecha, icono a la derecha. Por lo que los baryones detectan al instructor que teníamos previamente en nuestro sistema de diseño con, con esa convención de nomenclatura que teníamos antes. Y vayamos a través de ella dos capas. Y podemos ver aquí que es como tomar el nombre que teníamos antes. Pero en lugar de que el Islam dice, lo que hace los baryones se pone como comas para separar estas propiedades. Ok? Algo que puedes hacer para mejorar aún más esta cosa mágica automática, su, seleccionas estas Barb negrita boarder que los baryones crean aquí. Y luego puedes controlar el nombre de las propiedades y luego organizar el icono, el orden que quieres la propiedad descuidada aquí. Por lo que aquí para la primera propiedad, vamos a nombrarlo tamaño. Para el segundo, lo voy a nombrar tipo para el tercero, eso es riqueza. Vamos con esto, con este estado. Es de nuevo de un estado y esa camarilla, etcétera. Por lo que vamos a empezar a reordenar aquí primero el valor predeterminado, luego el estado de desplazamiento. Por lo que quiero que aparezcan en ese orden cuando, cuando estemos seleccionando nuestro fondo aquí. Lo que quiero, es que, ya sabes, que estos aparecieron ante la camarilla de Hulbert y desactivar esto es genial. Y luego la primaria, está apareciendo aquí en el tercer lugar. No quiero eso. Yo quiero primaria, secundaria luego crítica Gao los sin fronteras. Entonces voy a seleccionar el aquí, el, toda la barrera y componente que gran baryon. Y luego voy a reorganizar esto a primaria, luego secundaria, luego crítica, y luego sin fronteras Tj i1. Estos ordenan aparecer, ok, entonces este es el estado, este es el tipo que no conozco, ítem convencido al respecto. A lo mejor compré icono, texto o icono de texto. Entonces es un poco más semántico. Y luego ds, esto es, voy a llamarlo tipo. ¿ De acuerdo? Entonces si vamos ahora a nuestro fondo, a nuestra instancia de estos maravilloso botón, vemos que sólo tenemos grande. Recuerda que quería crear una versión pequeña de la misma, pero tal vez otro día. Pero si has creado o has creado previamente una versión pequeña y la nombra correctamente, entonces en tamaño aparecerá más grande, pequeña, regular, vainilla o todo. Ok. Por lo que ahora puedo cambiar el ícono ahora mismo. Y este es un icono maravilloso. Ya no tengo que ir, tengo que ir como de ida y vuelta, ir, cambiar aquí, ya sabes, habríamos sido un poco molesto, algo lento. No estuvo mal, pero esto es mucho mejor. Por lo que ahora tenemos todos nuestros componentes en estos fangosos cuadro lateral de meta aquí. Y podemos cambiar de uno a otro, cambiar la finca y sólo ir aquí. Y va a cambiar de micrófono respetando la finca. Entonces es que es quiero decir, me sorprende cómo se desempeñaron los baryones. Entonces si tienes un sistema de diseño migrando desde tus componentes anteriores, dos variantes, es fácil como esto, así que es súper fácil, ok. 3. Crea componentes desde cero con Variants: Entonces ahora vamos a la segunda versión. Ok, ya hemos hecho esto. Y qué pasa si quieres empezar desde cero, tendrás cualquier sistema de diseño en el que estés trabajando en un nuevo proyecto. Vas a empezar a crear tus componentes desde cero. Y quieres obtener los beneficios son de usar baryones. De acuerdo, así que vayamos aquí y vayamos a nuestro tutorial. De acuerdo, entonces para este caso, voy a empezar por Diseño y amplificador, inferior super recto. Yo sólo voy a ir aquí con una altura de 40. Voy a cambiar el color a una especie de azul es uno como lo tenemos anterior en la otra, en la otra sección, satélite, este tipo de brillante. Voy a añadir el radio fronterizo de cuatro. Bueno, sí, voy a lograrlo con una tasa de radio fronterizo cuatro. Voy a añadir algo de texto a este caso. Voy a llamarlo botón. Si eres super proficiente con nosotros tenemos fema, tal vez puedas saltarte esta parte. Pero si no estás tan seguro de cómo crear componentes, creo que es algo bonito de ver. Porque te voy a mostrar cómo crear componentes de, de dos maneras diferentes. Uno, likey de forma independiente tienen estos, algo así. Por lo que algunos cazando por aquí. Por sentado componentes que son dos ondas principales de hacer las cosas. Por lo que se crean todos los componentes dependiendo de un maestro. Por lo que se crea un maestro. Y entonces ese maestro va a ser como componente anidado de los otros componentes, como una matryoshka, ¿sabes? La otra forma de hacer los componentes es sí, hacerlos de forma independiente. Cada componente, es independiente de los demás. Entonces lo están, están bien. Pero si quieres cambiar el radio de frontera a todos ellos, tienes que estar caliente b1 por uno cambiando el radio fronterizo. Si bien estos métodos, estos ferias método, sólo tienes que cambiar su maestro y que los cambios se replicarán a través de todos tus componentes. Ambos sistemas de creación tienen sus beneficios ahí. Hay pros y contras, ya sabes, pero por mi experiencia, creo que son realmente pueden causar. Te recomiendo usar la versión de componente maestro del mismo, vale, así que vamos a probar ambos, ambos sistemas y tú puedes elegir donde quieras, ¿de acuerdo? Entonces vamos a empezar por crear los dependientes agregando, ¿de acuerdo? Y luego haremos un maestro de uno de estos componentes. Y luego vamos a replicar estos muster y usarlo como nuestro componente muscular para luego crear los otros componentes basados en I-T. De acuerdo, así que vamos a ver en la práctica es más fácil Dinastía. Entonces sólo voy a sonar aquí. Al igual que un ícono, sólo un ícono simple para poner mis dos iconos aquí va a estar en un Chevron abajo. Oop. Perdón, sí. Esto se ha ido. Va a lograrlo. Y con el fin de, para más adelante puede cambiar esto, yo voy a, para usar esto. Yo sólo voy a crear otro tienen miedo así. Y voy a nombrar a estos ícono. Recuerda eso que sigma. El encuadre es importante porque Vamos a poner aquí algunos iconos aleatorios para que podamos ver la cáscara de nuez al nombre del, del AIR Bohr es importante ¿por qué nuclear componentes? Porque más adelante cuando vengamos aquí a los activos, el FirstName va a estar en la parte inferior y botón de radio, está empezando a partir de su marco. Está bien. Entonces si cambio esto es si cambiaría esto por otro nombre, tú cambiarás aquí. Entonces pero queremos ser lo mismo que, como el elemento que tenemos dentro. Ok, entonces para esto, solo voy a crear un componente aquí. Entonces supongo que para nosotros aquí. Y podemos ver que ahora tenemos varianza auditiva, varianza tutorial. Tenemos el icono de varios Down, ¿de acuerdo? Y voy a añadir otro icono aquí desde, desde el mismo de más iconos. Bastante sencillo. Y yo estoy, voy sólo a arrancar como una flecha. Y sí, tal vez cualquier lleno. Entonces vamos a crear múltiples componentes. Recuerda, si seleccionas algunos, algunos objetos, puedes crear múltiples componentes del mismo. Entonces solo me voy a subir a base aquí. Entonces vimos el marco n, solo voy a alinear este poquito. Entonces lo pusimos a ser. Lo hizo. Entonces a menos que sí, distribuido es uno. Por lo que tenemos tres iconos preconstruidos para todos. No voy a meterme con los colores y todas esas cosas. Si te interesan los sistemas de diseño creativo, tengo un tutorial bastante extenso sobre cómo crear tu primer sistema de diseño. Por lo que puedes combinar eso con esto, con estos Tutorial uno c. Y porque esto es para, cuando hayas creado todo tu sistema de diseño, vienes aquí y luego creas tus variantes fuera de todos los componentes grado antes. ¿ De acuerdo? Entonces ahora lo que quiero es sí para implementar un par de iconos aquí. Simplemente arrástrelos y soltarlos y cambiar el color a blanco. Por lo que son los partidos del MCI. Estos se han ido, son un poco demasiado grandes para mis gustos, así que los voy a escalar a 36. Bueno, si puedo. De acuerdo, 36 y ellos, los voy a escalar a 36. Tan bueno, hasta ahora, tan bueno. Entonces ahora lo que quiero, es que hay un buen alimentador fema tiene se llama auto-layout. Si no lo sabes, te recomiendo también ver, aunque tutorial a medio, aunque tutorial a medio, lo siento por todo el bot de spam. Voy a hacer iout es un super agradable instalador. Lo que hace, toma tus elementos y, y crea distribuciones y alineaciones. Y te permite crear como este tipo de responsive, responsive al contenido, como componentes. De acuerdo, entonces para esto, voy a crear un auto-layout con estos tres elementos. Acabo de seleccionarlos. Y puedes hacer clic aquí y luego crear el diseño automático, bien, o seleccionas los elementos y luego aparece el diseño automático y presionas plus, lo siento, usualmente uso el, común, la tecla, el atajo de teclas, el teclado atajos. Entonces el atajo es turno común a o si estás en BC, es cambio de control un inmobiliario hacia adelante. Y ahora voy a hacer tipo de lo mismo. Voy a seleccionar esto y luego seleccionar este fondo. Y voy a venir de nuevo aquí a auto-layout bendecir más 4m. Y él va a ser como, si te vas, esto es increíble. Bueno, ¿por qué no funciona un? Es increíble donde funciona. ¿Qué está pasando aquí? Ok, tengo estos artículo fijo cuando lo arregla, recuerda puedes arreglar el ancho aquí, pero en este caso queremos el, queremos nuestro fondo libre por lo que aumenta su tamaño cuando escribes más. De acuerdo, entonces tenemos nuestro botón, es Bri es lo que queríamos. Está bien. Tan bueno, para DSN va sólo para ir con 16, un a bordo aquí. Por lo que podemos poner aquí 1212 en como este controla el, esta base. Estos controla un brote vertical. Estos controlan el brote horizontal. Y si hacemos doble clic en, encendido, en nuestro marco, que son los iconos más textos, también podemos controlar. Esa distancia 12 es buena por ahora. Y esto, y esto, vamos a llamarlo fondo. ¿ De acuerdo? Imagina que estamos creando los botones independientes. ¿ De acuerdo? Nuestro enfoque sería nombrar a estos botón vivo. Recuerda esta iss, esto es grande, y luego este es un botón primario, ¿de acuerdo? Y entonces este sería el estado por defecto, ¿de acuerdo? Entonces lo nombramos así. Y entonces venimos aquí y creamos sobre bono. De acuerdo, entonces quieres crear otra versión de la misma. Recuerda, el estado de flotación de este elemento. Lo que voy a hacer es sí, desprender esta distancia. Entonces nosotros, no estamos anulando esto porque recuerden ahora aquí estamos trabajando con un oriente. Entonces lo que queremos es hacerlo, eso es todo. Después envía un color a algo un poco más oscuro, algo alrededor de eso. ¿ De acuerdo? Entonces esto sería, en lugar de por defecto, cambiamos estos a puerto y luego hacemos clic y tenemos otro símbolo. Y lo mismo, nos separamos. Y entonces esta es la camarilla, un estado que es una piel un poco más oscura alrededor de eso. Y luego o. y luego cambiamos el nombre a clicked o Octave o lo que quieras y apuntarlo. Y entonces otra vez, lo hicimos, esa es la asistencia. Y nombramos a estos, digamos Desactivar. Está bien. Sí, previamente hacia adelante, que dice esa multitud de estos azules a algo alrededor de eso. Y este es nuestro estado de discapacidad, ¿de acuerdo? Y luego creamos el componente con esto, ok. Entonces tenemos, nuestro fondo es independiente. Si cambio estos colores y decidí ir por un rev. Sí, no se puede ver nada cambia. Y si cocinamos, si seguimos creando por vibraciones del fondo, imagina que hice esos sistemas de estudio e imagina que ahora pedimos a uno que cree la versión correcta de la misma con el ícono. Entonces otra vez, dupliqué esto, dupliqué esto para que ya no tenga que ser Eso es todo. Es decir, y luego creo el color por separado. Entonces vengo aquí y luego vengo aquí, y luego vengo aquí. Esto es fomentar el diálogo, dan, haciéndote duplicar el primero cuando no es ese símbolo o un componente. Y luego cambias algunos de los colores y luego creas los componentes desde cero desde una sola toma. Por lo que ahora los seleccionamos todos y luego creamos múltiples componentes. De acuerdo, entonces esto es genial porque es rápido de crear y son consistentes y todo. Entonces tenemos estas variaciones. Ok, entonces ahora estos ID luego cambiaron. Ya que me olvidé de poner aquí los dos iconos, el ícono izquierdo y derecho. Entonces voy a usar un núcleo azul-verde, renombrarlo. Entonces lo que quiero que esto Buscar y Reemplazar abogados selectos. Esto es bastante guay. Lewin. Entonces lo que quiero es cuando encuentres gran desalojo, Lo que quiero es y cuando encuentres una ley grande, grande, grande, grande, no voy a hacer para cambiarla por lo grande. Como línea de pestañas va a ser más precisa. Primaria, quería cambiar por, en este caso está a la izquierda, a la derecha icono. ¿ De acuerdo? Y primaria. Entonces si le cambiamos el nombre, vemos que ahora tenemos icono de varilla izquierda primario, por lo que están renombrando es bueno. Entonces ahora estamos para renombrar estas capas también, porque me olvidé de arrancar. Esta es una especie de tipo de texto de icono. De acuerdo, así que lo mismo aquí. Lo que podemos hacer es sí, ir a primaria. Y luego SI like, esto va a ser como correcto. Icono. Y luego primaria. Y el corte. Entonces podemos ver ahora que tenemos bastón grande Ri Cai, cono primario default. Y ahora tenemos que cambiar estos nombres. Aquí está para hacer un poco más grande. Este es este exagerado NIH. Este va a ser el predeterminado. Esto va a ser, este es el estado recortado u octava, y éste va a ser los discapacitados. ¿ De acuerdo? Entonces con estos botones, podríamos seguir y hacer los botones, pero estos, estos botones son independientes si quiero cambiar el radio fronterizo porque tengo otro roto ahora. Tengo que ir uno por uno, seleccionarlos, todos, y luego ir aquí y decir, vale, quiero mis botones aquí. Es bonito, pero si tienes muchos botones puede ser un poco desordenado. ¿ De acuerdo? Y si, si quieres cambiar el color de estos botones o quieres cambiar el espaciado. Te imaginas que quieres hacer que estos espaciados sean más pequeños para ser. Nos dejaríamos espacio. Después tienes que ir a comprar un doble clic uno por uno. Es una especie de, ya sabes, tipo de que tienes que trabajar demasiado. ¿ De acuerdo? Entonces este es un enfoque, pero estos iconos como usted ha visto, son independientes. Entonces los vamos a combinar como variantes de todos modos. Entonces bombardeamos aquí, hacemos click, y luego tenemos nuestro magnífico botón con estas propiedades. Nuevamente, por la primera propiedad nombraremos en la ciencia. Y luego este icono de texto solo para recordar qué propiedades. ¿ De acuerdo? Y entonces este es el tipo. Y entonces este es el estado. Podríamos ir aquí y reorganizarlos y eso sería un derecho. Ok. Y si quieres, si necesitas agregar más, más, cómo decirlo propiedades a aquí, solo puedes venir aquí y propiedad Othniel. Imagina que estás creado como una versión redondeada y una misión normal. Y puedes venir aquí y escribir coordinadores, coordinadores, ni conos. Y entonces aquí has visto estos, esto es un valor. Por lo que tú, aquí puedes agregar nuevos baryones como lo llaman, o propiedades de osmio. Los inmuebles son jardineros finca dy, dx icon, y en el otro son baryons. De acuerdo, entonces para esta esquina, quiero estar, pongamos ahí el radio fronterizo que yo, que pongo como 100, vale. Si creo, cuanto más alto, si creo Colmena, creé algunas variaciones de la misma, imagina que voy a crear otra variación de este ícono. Entonces lo que hace es sólo para ser cerrado, puede escuchar dos fuera más componentes a su. Puedes agregar todo lo que quieras, vale, así que nosotros, creamos más componentes y lo que puedes hacer aquí, imagina que ya no quiero. Imagina que quiero crear la bursa Icon Izquierda. Entonces lo que voy a hacer es sí, ven aquí, borra mi icono y voy a añadir otro, otro porque necesitamos cuatro. Entonces venimos aquí y sí, recuerda hacer estos grandes porque a veces este marco es un poco molesto y te puedes distribuir. Esta es otra forma de trabajar con baryones para que puedas crear los componentes a partir de aquí, sí, crea el primer botón. ¿ Lo usas como haces un par de ellos usos como barrera. Y luego empiezas a crear los botones desde aquí. ¿ De acuerdo? Entonces sí, entonces lo que podemos hacer ahora es que tenemos lo grande y esto va a ser la izquierda, no izquierda, derecha. Esto va a ser sólo un Icono de la Izquierda. Y en realidad los voy a seleccionar a todos. Y voy a poner aquí icono izquierdo, que es una nueva barrera anti han creado. Y esto va a estar ahí. En lugar de incumplimiento, este va a ser nuestro estado de flotación. En lugar de default, este va a ser nuestro click el estado y el último va a ser nuestro estado de discapacidad. Entonces para eso solo voy a dar clic aquí y empiezo a agregar de nuevo a los llamadores para nuestros componentes. ¿ De acuerdo? Por lo que hemos aprendido que podemos crear componentes a partir de aquí. Lo que haces es simplemente seleccionar el componente que quieres duplicar, pero va a ser independiente. Por lo que haces click en plus y tú, has añadido aquí, ok. Entonces imagina que podemos agregar otra propiedad la cual se va a llamar Icon. Sí, ícono súper débil. Voy a ponerlo aquí en la parte superior. Y vamos a poner dos baryones o con lo que va a ser cierto. Si, si tiene si tiene icono va a ser cierto y si es no va a ser falso. ¿ De acuerdo? Entonces vamos a añadir una nueva ganga para ello, ¿de acuerdo? No, no para esquinas y quería para déjame seleccionar este ícono. Todo, todo es verdad. Selecciona otra. Y entonces aquí, ¿qué dices que es verdad? Digamos que es fuerza. Ok. Entonces quiero venderte algo. Entonces digamos esto. Voy a cambiarlos. Van a ser falsos. No van a tener un ícono. Esta está bien. Entonces sólo voy a eliminar. El icono va a ser sólo el texto. Yo sólo voy a hacer que sí. Para terminar esto varias veces. Entonces sólo tenemos la versión de texto de esto, así que los voy a seleccionar. Y en lugar de icono derecho, esta va a ser la próxima versión, ok. Y que esta versión es la única que tiene la fuerza en los iconos. El resto tiene estos verdaderos. De acuerdo, entonces estas verdadera barrera. Y así ahora si nos vamos, vendría aquí a activos y vendría aquí a nuestro botón. Y ponemos estos hermosos botones. Se puede ver que tenemos esto, estos dulces increíbles porque ponemos lag verdadero o falso. lo es un booleano, así es o habilita o deshabilita. Entonces lo que podemos ver que el único, el único B apropiado que no tiene un icono es ese S1. Por lo que sólo podemos seleccionar el DES aquí o se selecciona por defecto, podemos tender a apalancar icono y lo vamos a hacer es en el icono gas activado. Entonces venimos aquí y como pueden ver, está activado, pero esto es super cool. ¿ De acuerdo? Este tipo de, esto es, esto es super bonito. Por ejemplo, quiero venderte algo cuando cuando estés trabajando con botones de radio de malas hierbas, por ejemplo, y vienes aquí, puedes encenderte y activar la etiqueta y si está seleccionada o no, y entonces tú sí. Cambiar los estados de asistencia. De acuerdo, así que esto es más o menos de eso. ¿ Qué es Marianne sub fuera? Yo sólo quiero mostrarte. Hemos creado estos componentes con los que son independientes. Y hemos visto que es una especie de un poco de, bueno, puede ser frustrante si tienes dos cadenas, todo el, imagina que quieres cambiar el dipolo donde siento estas batallas. Tú, tienes que caminar uno por uno seleccionando todo el, ya sabes, todo el, todo el texto y luego cambia a medio o no lo sé, negro. Entonces le das otro sentimiento. Pero a menudo te pones a seleccionar las muertes una por una. Entonces esto es una especie de excepción, es súper aburrido. Entonces vamos a ver otro enfoque para hacer esto. Entonces solo voy a mostrarte cómo recordar imaginado. No quieres, para hacer la tarea. Te gusta baryon spot. ¿ No estás seguro si implementaste para implementarlo en tu negocio o algo así? Es súper fácil sí, a tipo de lo que es todo. Es un poco complicado. Entonces lo que tienes que hacer es venir aquí, seleccionar tus elementos y dejarlos fuera de la variante. Ok. Entonces ahora la variante se ha ido porque no hay. Y Dan Barry Anton quitó Barry antoxantina VS. Tienes que lanzar tu escaneo de componentes de nosotros estamos en realidad pero solo tienes que vencer a tus componentes y arrastrarlos hacia fuera. De acuerdo, así es como funciona. Entonces, está bien, tenemos todos nuestros hermosos componentes independientes. Voy a deshacerme de ellos. Ya no los necesitamos. Te voy a mostrar otro acercamiento a esto. Entonces este ícono, voy a cambiar super a uno al otro, dos, algún color raro. Este amarillo se siente bien para mí. Y estos van a ser nuestros componentes maestros. Entonces en lugar de nombrar así, vale, voy a copiarlo a, a , para copiar el nombre. Yo sólo lo voy a dejar aquí. De acuerdo, así que lo tengo para después. Y este componente, sólo voy a nombrarlo como punto, diferencia de como punto, botón de reunión. ¿De acuerdo? ¿ Por qué ese punto? Entonces creo un componente, pero no va a aparecer aquí. Pones un punto o o o sí, así. Corto hacia abajo. No lo sé. No sé el nombre de la misma. Ya sabes, sobre esto. Esto, lo voy a hacer tipo de b aquí. Entonces si pones como pones como un punto o un, a, ya sabes, esta abajo barra de tablero m o no lo sé, nm. Perdón por eso. Pero si lo nombras con un punto o con el otro, y luego maestro bastón o donde quiera que Diaz. Incluso si el componente de la ESA no aparecerá en su panel de activos de componentes aquí, bien, lo cual es genial para estos elementos. Entonces donde vamos a hacer es tener todos los elementos que necesitamos en estos botones. Te voy a mandar a cuatro. Por lo que vamos a crear todos nuestros componentes basados en estos. De acuerdo, así que empecemos y esto es súper rápido también. Entonces vamos sólo a, en este caso, no quiero leer eso es lo que quiero estos sí. Para crear copias de la misma. Múltiples copias de estas Pascuas. No vamos, no queremos romper la celda. Estas asociaciones con este botón maestro. Ok, entonces otra vez, voy a elegir por el carlos que antes teníamos. Lamentando. Borré mi mancha de color. De todos modos. Vamos con el azul. Este super cool. Entonces voy a recoger esta gripe y darle un poco más oscura aquí, otra vez, como lo hicimos antes. Lo mismo aquí. Voy a ser éste para ir un poco más oscuro aquí. Y esto va a ser un VC audaz. Y voy a escoger estos colores así que estamos en el lado azul de las cosas. Entonces sí, esto es bueno si fuera para mí. Entonces, ¿qué, qué vamos a hacer ahora? Vamos a crear múltiples componentes. Y usted dice de entrada, esto ya es una instancia de un componente. Sí, eso es lo que queremos. ¿ De acuerdo? Entonces vamos a crear múltiples confines de la misma. Y entonces vamos a empezar a nombrarlos como lo hicimos antes. De acuerdo, entonces tenemos este enfoque que como, whoops, nota, vamos a seleccionar estos botón maestro. Y entonces, claro, esto va a ser bueno. Y si lo hacemos en F, Y si pongo los nombres aquí, cuando crea los baryones, se van a crear los valores y todo. Pero para este ejemplo, en realidad no quiero poner ya el nombre. Lo que quería crear estos como variantes. Y como ves, sabemos la mitad de cualquier cosa como teníamos antes que tenemos el tamaño, tenemos el tipo, tenemos el ícono o texto, tenemos todo. Ahora. No tenemos no tenemos nada porque su nombre era dot master, que ya no es el nombre que queremos. Queremos renombrar esto a botón. Esto se va a poner, el nombre va a aparecer aquí en nuestros activos. Ahora tenemos nuestro en el tutorial diverso, lo siento. Tenemos nuestro botón, ya sabes, tenemos nuestros tres tipos o botón, pero aquí hay algo raro. ¿ Por qué? Porque no hemos puesto nuestros baryones en propiedades. Entonces la primera propiedad, recuerda, estábamos trabajando con tamaño. Por lo que el tamaño va a ser grande. Vamos a añadir una nueva propiedad en este caso va a ser icono de texto. Bueno, pongamos el ícono. Digamos lo verdadero y lo falso. ¿ Te acuerdas? Entonces vamos a crear otros baryones. Otro bar y sí. Si bien en este caso, sí. Y éste es uno. Voy a quitar los iconos. Entonces esto va, el icono va a ser falso. Ya no tenemos icono, por lo que seleccionamos todo. Y lo que vamos a hacer, ¿qué más? Esto va a ser lo primario. Entonces tenemos una propiedad nueva y este va a ser Bremmer. Este era el tipo. Esta es la primaria. Y si tenemos otros botones, podemos tener más propiedades como secundaria y todo. Pero en este caso todos ellos en primaria. Y luego, entonces queremos crear otra propiedad que es un estado. El estado en este caso podría estar doblado. Crea por defecto, pero esto va a ser por defecto, pero esto va a ser estado flotante. Por lo que solo seleccionamos el botón del puerto, entonces esta va a ser la camarilla que estado. Whew. Está bien, y este va a ser el estado con discapacidad. Entonces ahora cuando, cuando tiramos estos abajo aquí, ahora tenemos nuestro tamaño. Ya solo tenemos de qué tamaño, pero puedes hacerlo. Y luego tenemos los dulces para cambiar de texto a ícono si lo quieres. Esto es una especie de ejemplo. Normalmente eres lo que quieres. Es que no uso estos verdaderos falsos para esto. Lo que suelo hacer, es tarde bereber d en este caso va a ser yo contextos. Sí. Y n e, lo que suelo hacer es ícono izquierdo, derecho. Y por lo tanto estos serían, aquí, serían texto. Y lo que hago normalmente es posicionar este elemento, el escritorio de Saigón. Recuerda, bueno, te da selecto y las variantes. Puedes arreglarlos en el orden, ¿de acuerdo? Entonces para este me voy a posicionar por ahí. Y y lo que usualmente uso esta profundidad-primero, luego izquierda, ícono derecho, luego izquierda y derecha. Ok. Entonces no lo hago, no suelo usar estos ícono verdadero o falso, pero hazme tenía rodilla. Ok. Entonces imagina que quieres agregar más instancias de estos botones. Déjame solo hacer esto más grande porque es un poco molesto. El Varsovia va recto. Entonces si quieres aprender más baryones, entonces estos elemento, vamos a crear el SDS y terminamos. Por lo que creamos el S plus tres veces. ¿ De acuerdo? Entonces no vamos a, vamos a cambiar el color aquí otra vez, como lo hicimos antes. Entonces sí, ven aquí. Por lo general es una buena práctica para trabajar con estilos de color. No hice eso por este ejemplo porque sí, quería estar a sí. Para hacerlo sobre la marcha para que veas cómo funciona más o menos en. Y ahora podemos volver a aplicar aquí nuestros estados en este caso, solo escanea aquí y anula la selección de la finca porque ya hemos declarado la varianza antes. Por lo que se hace clic en esto y los discapacitados. Y quiero mostrarte algo ahora que probablemente ahora, pero tal vez ahora. Entonces imagina que ya no eres uno estos radios fronterizos y lo querrás a 100. Ya sabes, solo tienes que tocar a tu amo. Ya ves, hemos seleccionado aquí nuestro botón maestro, y sólo tenemos que trabajar con él. Por lo que queremos críticas más vulgares. Queremos justicia que ya no nos uno estos hermosos dipolo negro Rafi. Una cosa, una que lo obtuvimos es, sí. Ya ves, todo está cambiando en. Imagina esto. No quieres así, tanto espacio entre el LINCS, 48, imagina que quieres hacer como más cuerpo en tu fondo. ¿ Simplemente lo haces como realmente de cerca? Y yo sólo b Así que esta es la forma de hacer, acelerando tu, ya sabes, ese mismo año. Así que crea femmes sobre tu sistema de diseño o tu, o tus componentes. Entonces este es mi enfoque para crear y trabajar con componentes usando estos maestros y este es mi acercamiento a lo que tenemos baryones. Por lo que baryon SAS, puedes ver que son súper útiles. Son súper EC2 para usar si ya tienes un sistema de diseño o si estás estudiando desde cero, puedes ver que puedes hacer como un sistema de diseño en poco tiempo y crear variaciones en el botón buró en, no lo sé. Diez minutos, 15 minutos. Por lo que es una gran forma de trabajar.