Taller intensivo de Figma 1: aprende sobre componentes rápidamente

1. ! Introducción el bootcamp: Oye, todo el mundo en Brian White. Tú conocí a X Designer fuera de Lawrence, Kansas. También hago diseño de marca y algunas otras cosas en esta clase. Aprendemos rápidamente a crear componentes como símbolos en componentes Sigma, ¿verdad? ¿ Por qué? Elementos que se pueden reutilizar a través de tus diseños? Te ayudan a crear y administrar un diseño consistente en todos los proyectos. Se estiran para un diseño receptivo, ayudaron a construir diseños y se pueden editar sobre la marcha. Esta clase camina por la construcción de un sistema de componentes base en un proceso paso a paso. Esta clase de principiante estigma te dará el dedo de las herramientas. Desea su carrera de interfaz de usuario. Recuerda los higmentos gratis para descargar. Así que agarra una copia, salta y empecemos. 2. Components y configuración.: Te mostraré rápidamente cómo configurar algunos componentes y poder estirarlos sin que se vean horribles. Entonces vamos a ir al menú aquí, ir a preferencias, empujar cantidad. Asegúrate de que sea un ocho a bonito. número divisible puede ser un 10 pero está bien. Buen marco, y luego asegúrate de que estás en diseño. Vamos a revisar el escritorio 14 40 y vamos a cambiar el nombre de esta página principal. De acuerdo, vamos a hacer rectángulo y configurar un pequeño sistema de barra de menús. Y sólo pongámoslo fácil. Bueno, por usar octavos Hola. Hacer 88. Está bien. Y vamos a hacer bromas de un logo. De acuerdo, Entonces lo que queremos hacer es revisar nuestras rejillas de diseño. No tenemos uno. Vamos a hacer es agregar uno y rápido en columnas y qué hacer 12. Y me gusta bajar esto al 3%. Eso simplemente agradable. Al igual que el rosa no te arruina. Y luego, ya que donde se ochos, hagamos 24 picks la van a conseguir. Muy bien, ahora estamos ahí. Cuando se apaga el nombre de la página, se puede mantener presionado el comando y estirarlo. Por lo que es un poco agradable prepararse para agregar algunos componentes. Entonces hagamos el sistema de menús. Entonces voy a usar perspicaces. Pro. Digamos 18 píxeles y ¿lo perderemos? Está bien, vamos a ver. Elemento de menú uno. De acuerdo, ahora no queremos simplemente escribir menú menú menú menú menú menú. Lo que queremos hacer es hacer de esto un componente, así que hagámoslo un poco más normal. Entonces digamos portafolio o simplemente podemos mantenerlo Elemento de menú uno, y te mostraremos qué pasa. De acuerdo, entonces este es tu componente que aún no es un componente que querías componente porque quieres hacer thes y quieres tenerlos todos iguales y poder estirar y crecer con tus secciones. Entonces lo que vamos a hacer es configurar un sistema donde tengas tu área de menú. Entonces lo que vamos a hacer es hacer un rectángulo simple y poner esto en el medio. Entonces vamos dedo del pie hazlo 32 pixeles de alto, solo inventando todo esto a medida que voy. Entonces y queremos que esto esté centrado aquí mismo una línea media. Está bien. Está un poco alto, porque tengo esto estirado un poco. Está bien, Así que si estás en esta sección y digamos que quieres, como, como, un punto culminante lejos o algo así, sigamos adelante y lo agreguemos tan bien en un bar. Digamos cuatro. De acuerdo, entonces ya nos topamos con los colores. Queremos meter algunos colores aquí, ya que no estamos enmarcando alambre donde estamos haciendo componentes. Pero vamos a hacer que se vea un poco animado. Voy a saltar por encima de una tienda de fotos sólo por un segundo. Este es uno de mis productos de proyectos. Es, uh, uh, una acción de tienda de fotos llamada Instant Pallet Maker. Y lo que me gusta hacer es agarrar imágenes realmente geniales que tienen colores fríos y tratar de sacarte yo los colores de ella. Por lo que cuando solo haces clic en esto automáticamente lo convierte en paleta. No arruina tu imagen. Se lo coloca sobre otra capa. Si alguna vez quieres conseguirlo, es bastante barato. Es un mercado creativo, fabricante de palets instantáneos. Entonces lo que voy a hacer es ir a este tiro. Pensé que era un poco divertido ir a cambiar los niveles. Y no te preocupes, estamos saltando de nuevo para recoger mi punto culminante realmente rápido. Esto un poco. Consigue unas rosas lindas ahí dentro. De acuerdo, entonces vamos a probar la paleta media y hacer clic en ella. Está demasiado lavado. Entonces lo que voy a hacer ha vuelto. Haga clic en paleta, grande. Intenta conseguir algunos de esos divertidos colores de acción. Incluso voy a darle un puñetazo a esto. Algunos aplanan esto. No te preocupes. Vamos a volver mucho a los higmentos. Está bien. Está bien. Entonces vamos a copiar esto, Así que tenemos que amarte yo coloreé ahí dentro. Muy bien, estamos de vuelta aquí. Vamos a tirar abajo esta cosa del color y tirar de los ins y un bonito esquema de color rápido para ustedes chicos. Entonces, ¿quieres buscar tu color interactivo? Y originalmente buscaba rosa. Entonces estamos verdes para ir por ese tipo de color salmón y ver si podemos hacerlo No es lo suficientemente brillante . ¿ Todo bien? A lo mejor incluso algo de ese rosa no potenciado. Sólo un poquito. Está bien. Y luego queremos un poco de Cool. Estos grises, estos aire. Bonito warren pastoreo. Entonces hagámoslo. Esta y esta forma. Y por lo general iría a llenar. ¿ Sabes qué? Perdón. Ir estilo de color de relleno. Y luego, como, lo nombra gris. Enfriar. ya sabes, o caliente o lo que sea. Caliente uno y crea ese estilo. Solo me estoy moviendo un poco más rápido para ti. Yo solo quiero que no te aburras, y estamos lidiando con componentes ahora mismo, así que está bien. ¿ Ver? Aclararlo un poco oscuro en esto hasta un poco. Y vamos a conseguir otro par de colores. Simplemente me encanta cómo estos puedes tirar de tantos colores fríos realmente rápidamente. Y se siente como si perteneciera juntos la mayor parte del tiempo. A lo mejor un melocotón. Está bien, podríamos volver a eso, pero ya veremos, iba a mantenerse alejado de las aceitunas y especie de quedarse en esta paleta. Algunas de estas son un poco divertidas a Ya veremos si podemos arrojar algo. Está bien. Sí, eso se ve un poco genial. Um, sólo vamos a mantener esto cerca y a mano. Entonces voy a cambiar este Teoh este fondo a partir de ahora. Aún así, eso puede ser todos los derechos. Contamos con nuestro menú. Queremos dedo del pie, um, alto. Al igual que esto. Di, como, oye, esto está encendido. Entonces lo que vamos a hacer es escoger ese color salmón, y a veces me gusta que una vez me den un ajuste de cabecera, Um, miedo. Si estás trabajando para alguien, nombra totalmente todas tus capas. Pero, um, lo que vamos a hacer es hacer de esto un componente ahora para que podamos hacer nuestro menú y luego cambios. Entonces este es nuestro corcel activo, y solo seguiremos enchufándonos a esto. Entonces obviamente, con este trasfondo, creo que ya no me gusta. Yo sólo quería ponerme un poco más oscuro. Sí, está bien. Por lo que el menú no tendrá que ser blanco, pero todo esto puede cambiar sobre la marcha. De acuerdo, Entonces lo que queremos hacer es conseguir que nuestros muchos sean el fondo, que probablemente ni siquiera usaremos, pero llévelo a la altura de tu barra por ahora. Ya sabes, voy a caminar eso. De acuerdo, aquí tienes tu elemento de menú. Entonces vamos a golpear el comando de opción K, y eso automáticamente lo convirtió en un componente. Y lo que me gusta hacer es o esta es la página base y todos los componentes están en esto. O, um, puedes golpear el comando D, que lo convierte en un duplicado. Y luego puedes llevar tu componente y moverlo a otra página como puedes hacer una página. Se trata de componentes, pero para fines de conveniencia, lo vamos a mantener aquí en esta página para que pueda mostrarles cómo funciona. Entonces lo que me gusta hacer es tirar de tu Este es tu componente maestro. Ve cómo se ve con estos cuatro cuadrados, la forma del diamante, y luego esta es la forma del diamante abierto, que es este es tu componente. Um, copia. Entonces lo que sea que hagamos aquí, como, decimos nosotros y cambiamos eso a Azul, que se ve horrible. Perdón. Um, bueno, lo que pasa es que todas las instancias cambian. Entonces vamos a hacer este vuelo y lo que vamos a hacer es ocultar este fondo. No lo necesitamos, pero sí podemos. Podemos hacer todo tipo de cosas geniales con ella ahora que tenemos ese fondo, algo escondido. Entonces, ¿qué? Lo que pasa es que no funciona muy bien de inmediato. Entonces es sólo una especie de ruptura. No hay relleno. El estiramiento no funciona. Entonces lo que queremos hacer es que este es el gran problema en los componentes. ¿ Es cómo funcionan estas secciones? Entonces, ¿qué? No queremos esta escala. Nosotros queremos ir a izquierda y derecha Así que se va a centrar el gravado aquí y luego a medida que tecleas, se centrará en esto en este marco por lo que se mantendrá el mismo ancho. Por lo que queremos hacer lo mismo para esta pieza de fondo la cual mostrará por ahora es un poco divertido cómo se puede ver cómo funciona. Entonces lo que normalmente queremos hacer es probarlo en estos la copia del componente. Entonces esta pieza trasera aquí fondo queríamos escalar izquierda y derecha, no queremos Oh, no vamos a arrastrarlo enorme. Pero si quisieras, puedes poner un top bottom Un oleaje. Si esto cambia, digamos, por ejemplo, en una página receptiva, el encabezado necesita ser un poco más grande porque el contenido que se está encogiendo. Entonces lo que vamos a hacer es hacer que esto se vea mejor y nombrar a este estado activo. De acuerdo, entonces ahora tenemos nuestro elemento de menú y podemos duplicarlo ahora y luego volveremos a nuestro componente. Esto es bastante guay. Lo esconden y luego, um ver, vamos a ver, esto se trata de nosotros y soy de mal tipo o a veces así que me gusta volver aquí y cambiar mi texto. Y quiero que todas estas sean mayúsculas tan rápidas. Eso y boom, todos tus componentes son mayúsculas, así que voy a hacer otro diga cartera y espacio que fuera. No todo el mundo quiere casa. Todavía lo están. Y yo soy como, vamos, por favor. Está bien. Otra página. Eso es más largo. Whoops. Perdón. lo que este es un buen ejemplo de cuando pones tu texto en el medio y tienes tu espaciado de párrafo en tu altura de línea establecido. Corregir eso. Esto podría ser un poco demasiado alto ahora mismo. Entonces lo que podemos hacer es entrar son ¿Dónde está? Han añadido tanto. Ahora está justo aquí. Yo buscaba los suyos propios. Perdón, se supone que te estoy enseñando. Así que mira. Esto es lo toco. Se puede ver la otra página es ya que estamos metiendo con esta parte, pero es que se puede ver cómo funciona aquí, Así que voy a decir 96 libros, no 96 96% pero está bien, 20. Está bien. Entonces ya puedes ver ahora solo voy a decir casa sólo porque Ok, Así que esta es nuestra página activa. Entonces lo que podemos hacer es entrar en nuestro componente y se puede ver que hemos escondido el estado activo hit en el fondo para que podamos dar click en el estado activo y en realidad podemos dar click en el fondo Eso parece poo. Entonces lo que vamos a hacer es volver a este original este fondo y mostrarlo y podemos cambiarlo Teoh White encendido, como, p por ciento así Pero no queremos que se muestre en todo. Y esto demuestra que lo que es un poco bonito es que puedes ver tus espaciados un poco horrible. Pero lo que queremos hacer es ocultarlo. Pero se está manteniendo activo porque en el hogar. Pero lo tenemos, um, con el ojo abierto para que puedas verlo. Entonces, sí, esa es una buena manera de hacer algunos menús rápidos. Entonces sigamos moviéndonos y trabajemos en configurar componentes para formas que entren en juego y pongan un poco molestos 3. Forun componentes de forma y cómo crear componentes de formas maestros: De acuerdo, saltemos a formas. Entonces vamos a usar algunos de estos grises de los que podría necesitar algunos más de los que podamos sacar. Puede que haya algunos más ligeros, pero solo por conveniencia, vamos a seguir moviéndonos. Entonces lo que vamos a hacer es volver a hacer lo mismo. Queremos tipo de cajas para estas áreas, así que quiero, como, una especie de base de forma más grande, y voy a abarcar estos tres viene y vamos a poner esto en 64. Entonces esa es nuestra base. Y luego quiero, como,que como, aparezca una base de 32 píxeles para la forma misma. El nombre del formulario. Está bien. Y a veces, si quieres, puedes solo estos podrían ser de cualquier color que quieras, porque no lo vamos a usar. Entonces wow, eso es tan malo. Pero al menos se te ocurre la idea. Um, entonces esta será nuestra forma, y este será el nombre del formulario. Y queríamos estirar sin romper la parte superior o la parte inferior, y simplemente lo hace mucho más fácil cuando tienes un nombre, nombre, apellido, apellido, lo que sea. Eso es lo que vamos a hacer es hacer de esto un componente y Y la forma en que lo vamos a hacer es que lo vamos a tener en componentes. Entonces voy a escribir texto y sólo decir, um, um, nombre de estrella. Entonces esta estrella será, como, rojo brillante para lo mismo y luego el nombre que usará me gusta esta marina. Entonces sólo vamos a hacer esto Quién no puede Tal vez. Muy bien, entonces vamos a seleccionar el nombre Click Phil boot camp, tal vez. Está bien, lo siento. Esto se ve horrible, pero vas a tener el sentido de ello, Así que esta será nuestra forma misma. Y lo que le gustaría hacer es sólo para que se vea un poco interactivo. Vamos a hacer un borde de tres píxeles sobre él no son borde sino esquinas redondeadas. Entonces voy a seguir adelante y hacer de esta sección, um, su propio componente, y voy a llamarla forma licitación de slash, y creo que voy a mantener todas las minúsculas esta vez. Y así entonces nombrará esta parte. Sólo formulario campo, Ok. Y voy a seguir adelante y darle estilo a esto para que hagamos un derrame cerebral. En realidad, esto es una especie de estilo antiguo, así que sólo voy a mantenerlo de esta manera, pero, um lo mismo aplica. Quieres este tamaño si quieres solo lo subyacente, como android o algunos de los estilos más nuevos. Te mostraré cómo hacer eso en un segundo. Um, vamos a ver. Es como un evento separado. Acaricia esto con un píxel y mira si no podemos usar esto para un poco más oscuro. Muy bien, vamos a dos para que todos puedan ver. Muy bien, entonces ahora tenemos dos componentes. Tenemos el encabezado del formulario en el campo de formulario. Y lo que queremos hacer es dentro de este campo de formulario, queremos escribir son tipo y decir, vamos a ver, nombre. Y no quiero que esto sea todo gorras, así que voy a volver. Entonces estoy en el espacio fuera. A 32 píxeles desde el borde. Y esto será, um, um, texto de forma. Está bien, entonces este fondo obviamente no anda por ahí para que podamos ocultarlo. Entonces tenemos el inicio de nuestra forma. Tenemos nombre, que esto es realmente grande para esto. Simplemente nos enorgullece hacer una especie de pequeño y pesado, más pequeño y pesado. De acuerdo, entonces ahora queremos entrar y entrar en este fondo, y queremos que esta Tiu se quede, pero, um, um, queríamos estirar y queríamos quedarnos en la parte inferior porque queríamos que nos mancharan contra esta forma. Entonces voy a entrar aquí y decir izquierda y derecha para que se estire un poco. Haremos lo mismo con el nombre, pero queríamos quedarnos a la izquierda. Y lo bello de esto es que puedes duplicar esto, y si está fallando en absoluto, puedes volver atrás y decir como, Oh, no lo hice a la izquierda o así es como quería reaccionar. Entonces voy a apagar eso. Y ahora lo que hacemos es ahora que tenemos campo foráneo y Cabecera, vamos a hacer un componente de ambos. De acuerdo, Entonces lo que pasó fue que hizo una instancia de ambos al mismo tiempo, Así que estalló forma, encabezado y campo de formulario. Entonces este es nuestro nuevo componente, que es forma maestra o vamos a hacer forma Maestro, minúsculas. Vamos. De acuerdo, Entonces lo que vamos a hacer es, ya que ya tenemos esto aquí, voy a seguir mis componentes arriba de la página. A veces es agradable no haberse ido. Um, vamos a hacer sí, sólo hacer esto un poco, hacer esto un poco más pequeño y mantenerlo aquí por ahora. Y lo que hacemos es simplemente mantener a estos dos a la izquierda si necesitamos cambiar el medio. De acuerdo, entonces ahora que tenemos esto lo vamos a hacer en realidad es Bruce Command De y vamos a hacer una copia de eso. Vamos a seleccionar el maestro y sacarlo del lado de la página para que quede fuera de la página principal. Entonces, ¿ven ahora qué está pasando? Entonces, ¿qué pasó? ¿ Es este nombre para ser izquierda y derecha? Entonces lo que hacemos es volver a aquí y decir, izquierda y derecha. A veces lo que pasa es que como que hice eso a propósito. ¿ Lo es? Will Lo anulará. Simplemente dirá como, Oye, si no dijiste nada, sólo vamos a hacer que se quede. Entonces éste, éste se queda. Este es de izquierda y derecha. Entonces lo que tenemos que hacer es decir izquierda. Y ahora lo tenemos estirando correctamente. Es algo divertido. Entonces digamos que aquí tenemos una barra lateral. Sólo vamos a tener un periodo separado. De acuerdo, así que digamos que queremos espaciar estos, así que vamos a tener nombre de pila. Entonces queremos tener, um, nombre de pila aquí, y vamos a mantener turno una opción y duplicado. Y obviamente no necesitamos esto. Por lo que hay dos formas en que puedes hacerlo. Puedes simplemente, como, ocultar esto, que a veces hago mucho, en realidad, o puedes creerlo y luego venir aquí para formar campo y simplemente mantener la opción hacia abajo, y hará una copia del campo extranjero más grande. Y esto no tiene el encabezado. Para que puedas entrar aquí y decir apellido. De acuerdo, así que esto me parece totalmente malo. Entonces ustedes probablemente Wow, este tipo es diseñador, así que voy a hacer esto realmente ligero y lo haremos. Ups. Vamos a hacer la píldora más ligera, y se puede ver lo que pasó es en este maestro. No fue al campo, así que tengo que volver. Y por eso me gusta tener estos realmente rápidos para meterme con ellos. Para que puedas ver si puedes cambiar realmente rápidamente tus campos de formulario. Entonces, ¿qué? ¿ Vamos a hacer su cambio? Nuestro trazo Solo un poco más ligero. también. Muy bien, Así que ahora que tenemos un buen ajuste de forma, una cosa que puedes hacer es tu edificio Estos. Entonces, por ejemplo, digamos que debemos enfrentarnos a esto. Por lo que noté cuando escribí país, lo que estaba pasando fue que esto está configurado para centro de línea. Entonces tenemos que volver aquí. A pesar de que esto es de izquierda y derecha, lo hacemos y tenemos nuestro espaciado correcto para el país. Entonces lo que es bonito es ahora el país puede abarcar todo el asunto sin estirar y desordenado non conduce hacia arriba. Pero lo que queremos al construir las formas es una real que es la misma manera. Entonces lo que haremos es volver a este click a la izquierda y lo arreglaré. Las ideas que quieres bajar para mostrar un desplegable Así que vuelves al campo Granja , que es bonito, es como, siempre puedes volver a esto y solo hagamos un estrecho bajando. Y obviamente no queremos esto en todos ellos. Y vamos a hacer sólo un borracho simple y vamos a hacer este color interactivo ahí, justo Desde forma como este color, vamos a llamarlo salmón. Está bien, espera una bota. Campamento salmón. De acuerdo, Entonces, ¿qué está pasando aquí? ¿ Por qué eso no está ahí? Entonces no lo hacemos Sólo queremos esto en el país. No lo queremos ahí. Entonces lo que hacemos es volver al campo y decimos que queremos que esto se oculte. Pero antes de hacer eso, queremos que esto se mantenga a la derecha y lo queremos como esa brecha de 32 píxeles. Entonces lo que hacemos es mandar esto a escribir y al centro. Entonces lo que pasa es ahora, medida que esto se mueve, se mantiene igual y caminará hacia la derecha. De acuerdo, entonces ahora volvemos a la original, bajamos una fila, y lo esconderemos. Y entonces estamos como, Bueno, se ha ido al país. Entonces todo lo que tenemos que hacer es entrar ahí y dar click. Sí, quería estar ahí para que veas cómo es super agradable. Y algunos de los componentes originales tienen muchos campos en ellos que escondes y haces todo tipo de cosas con Así, por ejemplo, nombre con sin nombre, pero número telefónico. Entonces hagamos una versión de número telefónico y lo que queremos usar es el campo de formulario base, y luego vamos a crear Soy versión diferente del mismo con un componente dentro del mismo. Entonces tendremos un desplegable más uno para América. Entonces a veces haré esto y diré: Oye, Oye, quiero desprender esta instancia Este ya no es el campo de formulario. Entonces esta es la primera vez que nos estamos alejando de usar esa instancia principal para que no podamos hacer eso o pero quieres intentarlo y no hacerlo tanto como sea posible para que utilices las secciones que puedes cambiar a lo largo de toda la app o web. Ese. Estás cambiando estos colores. Cambia a lo largo de todo el sitio de hoyos. Entonces me voy a quedar con el campo de formulario. Pero lo que vamos a hacer es por ir Teoh ocultar texto de forma, y luego vamos a añadir otra pieza aquí, en realidad se va a duplicar. Entonces vamos a decir comando D y C. texto telefónico. Y ahora vamos a mover esto. No te preocupes, no lo hará. No va a estropear todo lo demás. Entonces lo que vamos a hacer es decir que queremos que seas un código de área de tres dígitos y luego tres miembros se deslizan en cuatro números, y queremos tener, como, un desplegable más uno. Por lo que ya tenemos este desplegable, héroe. Lo que vamos a hacer es tomar eso. Solo estoy sosteniendo la opción básicamente y arrastrándola de ésta a ésta. Y me voy de pie. No te asustes. Y no vigilen por ahí a la derecha. Pero lo que queremos hacer es dejarlo caer por aquí, y estoy en una especie un poco. Después de hacer esto, voy a copiar este rectángulo son solo opción de retención y caída de teléfono seguro. Y dentro de esto, quieres un poco mantenerlo unido para que incluso puedas hacer un grupo dentro. Entonces tenemos esta caída telefónica, y es la parte interior. Entonces lo que vamos a hacer es como un 32 por 32. Está bien, mira 37 mi 32. ¿ A qué tiene que entrar eso? De acuerdo, así que ahora vamos a espaciar esto y poner la gota junto a él, y luego vamos a tomar este texto telefónico, duplicar eso y decir país, es un más uno. De acuerdo, así que tenemos su desplegable y podría hacerse un poco más grande, pero sólo estamos haciendo esto rápidamente. Entonces queremos que esto sea capaz de estirar, y queremos que realmente se quede a la izquierda para Así lo voy a bloquear a la izquierda y no ir todo el camino a través. Quieres que este sea un centro de línea porque podría haber agregando más en realidad. Lo hará. A la izquierda una línea a medida que los crece empujará la flecha. Por lo que esta sección necesita agruparse para que también trabaje en conjunto. Entonces vamos a cambiar esto entre dedo del pie izquierdo. Sé que esto es sólo para la reforma, pero una vez que termines, ya terminas. Es bonito. Entonces espaciaremos esto en tres. Entonces tenemos nuestro número telefónico aquí, y no vamos a tener eso Sea que lo necesites. No lo es. Eso no es necesario. Entonces aquí está nuestro teléfono, pero esto está todo en mal estado ahora. Entonces volvemos a aquí y escondemos esos traen el texto del formulario de vuelta al país, y diremos que esta es la sección telefónica. Entonces ahora tenemos la sección telefónica, que está escondiendo el escondite, el área telefónica. Pero queremos que se vea el área telefónica. Entonces lo que queremos hacer es entrar aquí y decir que quiero ver el teléfono, ¿de acuerdo? Y queremos quitarnos las otras partes. Ups. Ahí. Entonces ahora tenemos esta sección telefónica, que probablemente debería verse así donde todos estos estén abiertos. Pero entonces esto está cerrado. Entonces lo haces muy rápido. Boom. Y tienes un teléfono y ver si se está estirando. Esto no es estirarse correctamente, así que Bueno, lo hará, pero , um, llegaremos ahí así que volveremos al texto telefónico. Entonces me fui. Sí, así es. De acuerdo, así que ahora simplemente bastante simple. Si queremos un correo electrónico, basta con dejarlo caer. 123 Y todo el mundo necesita correo electrónico. Así lo hacen el correo electrónico en la comida. No, correo electrónico. Después, como, este texto de formulario es demasiado similar. Entonces lo que voy a hacer es volver rápido y cambiarlo de bota camp a boot camp gris. Está bien, así que es sólo un poco divertido. A medida que construyes los componentes, puedes ver cómo puedes hacerlos estirarse rápidamente, construirla, ir más rápido. Haremos un cuadro de comentarios a continuación, así que éste se estirará porque necesitarás muchos párrafos. Vamos a saltar a un cuadro de comentarios. Lo que vamos a hacer es duplicar esta sección y en un cuadro de comentarios, por lo general solo tienes que empezar de nuevo desde el maestro de formularios para que sea un poco más fácil. Adelante y veamos si no podemos hacerlo todo juntos. Será una especie de campo de forma loco, pero lo haremos. Entonces vamos a tener un comentario no necesario. Y veamos qué pasa. Entonces lo que vamos a hacer es tirar de esta forma, acampar este todo este maestro y ver qué pasa. Por lo que no está funcionando muy bien en absoluto. Lo que queremos hacer es tener estos stack sin cambiar, y queremos que esto sea capaz de manejar párrafo y luego queremos que ese pequeño drag open Borras . Si te gusta escribir un poco más, estoy jugando a la defensora del diablo en todo solo para que puedas tener una idea de lo que pasa. Entonces voy a cambiar estas formas hacia abajo o los componentes hacia abajo, y lo que queremos hacer es volver al antes y a esta sección este texto de formulario, y ahora queremos decir arriba. Entonces lo que va a pasar es boom. Ya consigues esto, y yo voy a seguir adelante y añadir un comentario Deplora en medio. De acuerdo, entonces el aquí está aquí es un ejemplo, también, de por qué no está envolviendo. Entonces lo que queremos hacer es volver a sus textos de formulario y decir, izquierda y derecha, y ahora lo vamos a establecer para que diga dentro de esos parámetros. Entonces serán como 32 pixeles. Son 32 pixeles de arriba, y llegaremos ahí. Por lo que ahora queremos el camino de sección de componentes. Queremos que esto se arregle. Por lo que esta sección realmente queremos este comentario áreas flotantes. Entonces, ¿cómo lo consigues? Correcto. Entonces si algo es raro, como cuando seleccionas todo y lo estás arrastrando, no está funcionando correctamente. Puedes volver a tu formulario y vamos a revisar esto para que lo tengamos ajustado de izquierda a derecha. Pero esto está configurado a escala, Así que realmente queríamos de arriba a abajo, así que automáticamente lo bloquea, y vamos a revisar este a No nos hemos ido y arriba. Entonces lo que pasa es que se pega a la parte superior. Y a medida que nos desplazamos por esto, se hace más grande y tienes más espacio para tu párrafo. Entonces ahora en realidad nos hemos acercado a esto. Nos vamos a deshacer del área desplegable, héroe. Vamos a entrar en el campo de formas, lo hacen bastante los hombres. Y quiero este D A d c. lo que sea. Realmente simple. Uh, voy a dibujar vino para ribete y mantener turno. Creo que me voy a acercar, pero sólo lo están haciendo rápido por ustedes chicos. De acuerdo, entonces tenemos que esas líneas de campo de campo, una línea de comentarios. Vamos a ocultar eso, entrar aquí, y queremos ver las líneas de comentarios. De acuerdo, ¿Qué pasó? Entonces ahora están por ahí. Entonces por eso es una belleza fuera de belleza. Es sólo buen dedo del pie. Tenlos aquí mismo. Estos estos componentes a solo un lío con lo que va a volver al campo de formulario. Mira estas líneas de comentarios. Los tenemos agrupados, pero vamos a seguir adelante y hacerlos un componente, que no se puede porque estoy en un área duplicada, así que necesito entrar aquí ingresos a la línea de comentarios. Haga clic aquí. Ah, tiene que estar afuera. Um, eso es correcto. Entonces lo que vamos a hacer en realidad es simplemente poner esto a la derecha y al fondo, para que siempre se quede justo ahí. Tiene que ser un poco más fuerte, así que voy a hacerlo este. No, éste. Sí. Está bien. Por lo que ahora tenemos nuestro componente que está funcionando su mancha derecha y abajo, y Y puedes hacer que tu componente salte tanto como nuestro bajar hasta donde quieras. Entonces es Es realmente agradable y simple ahora que tenemos, como, como, un campo de formulario que es realmente fuerte tiene mucho contenido en él que puedes ocultar la mayor parte de él, y esto lo necesitas. 4. Botones: los componentes de botones responsive y los botones secundarios y más más: este momento que tenemos nuestras lindas formas y tenemos nuestro estado activo que vamos a hacer es solo que rápidamente le hace cabeceras secciones. Sección uno, les digo 36. De acuerdo, - Entonces lo que podemos hacer es nuevo estilo fiscal cada uno a podemos hacer de esto una opción de componente arriba. De acuerdo, bueno, dile a cada uno con el mío, haremos que la línea sea larga. Esto está tan exagerado, pero sólo hacerlo por diversión. Entonces vamos a hacer de izquierda y abajo en eso y vamos a tomar Vamos a duplicar este control, de, de, voy a tomar este componente maestro son componente, y luego esto es un duplicado de componentes por aquí. Entonces lo que queremos es que este texto diga que es la izquierda y la parte inferior para que se quede al lado de la línea, darle un poco de espacio para respirar, mucho más espacio para respirar si así vamos a volver a aquí. Yo estaba tratando de hacerlo un poco más agradable para ustedes chicos, pero digamos que esta es nuestra longitud de sección que tenemos así 8 32 Entonces lo que queremos hacer es volver aquí y este texto diga 8 32 Sé rap. Está bien, entonces haremos una nueva sección, llamaremos a estos botones, ¿de acuerdo? Y como tenía ese espaciado que quiero hacer es jet éstos para que coincidan con el color. De acuerdo, solo voy a ir un poco más rápido y apagar estos para hacer un poco más fácil. Frieda's Así que necesitamos un botón. No digas que llamaremos a este botón primario y vamos a hacer esto realmente pequeño porque esto es sólo nombrarlo. Sólo lo estamos nombrando. Por lo que queremos sólo un botón estándar y no queremos seguro. Vamos a ir Big 64 por, como, 200 sólo por rápida rapidez. Entonces vamos a llenarlo con nuestro salmón, y vamos a poner algo de texto aquí para decir, como someter, hacer esto blanco. Este será de 18 píxeles. Vayamos 16 y 16. Aquí vamos Teoh centro, alinear el texto y vamos a espaciar esto con 32 píxeles en el borde y luego un poco en la parte superior e inferior. Lo averiguaremos en un segundo, pero este será nuestro botón principal, y puedes seleccionarlo y alinearlo siempre y cuando el texto esté centrado. En ocasiones la altura de la línea cambia un poco, dependiendo del texto para la compilación de la fuente. Entonces tenemos ese botón primario que traje mi creo que llamé a un puntero, que es un archivo ping que acabo de traer, así que para mostrar rápidamente lo que está pasando. Entonces lo que queremos hacer es entonces manera tener, um esto es solo nuestro botón primario, y haremos una secundaria, pero vamos a duplicar esto en un segundo. Entonces lo que queremos hacer es hacer de esto un componente, adivinar otro componente y decir botón Y queríamos ser primarios. Te mostraré por qué en un segundo. Por lo que duplicamos esto controlado el tomar el componente maestro aquí fuera. Simplemente lo vamos a dejar a la izquierda. Y lo que queremos hacer es entrar aquí y ver atrás, uh, fondo. Y creo que es más fácil hacer un estado activo siempre y cuando no estés cambiando todas estas cosas como locas. Pero queríamos ser izquierda y derecha, izquierda y derecha, y luego centro. Entonces ambos estos centros Así que voy a esconder esto, y este es nuestro estado activo. Entonces vamos a hacer ese rosa por diversión. Y, um Así que ahora lo que hacemos es ocultar lo activo y tenemos nuestros antecedentes. Entonces voy a seleccionar su botón duplicado y mantener la opción y el turno Y vamos ponerlo a 40 píxeles aparte y diremos hover tap, diré foco. De acuerdo, así podemos hacerlo como un sutil flotar. Um, lo que podemos hacer se llama simplemente a este hover en su lugar. Y lo que vamos a hacer es decir que es Onley rosa en el fondo. Entonces, ¿qué es bonito es que puedes entrar aquí y esperar, ¿eh? ¿ Ves lo que hice? Nómbralo explícito, sin embargo allí. Y vamos a mostrar el fondo, y vamos a tomar este flotador hacia abajo y hacer sólo un simple resaltado de tres píxeles en la parte inferior. Esa es forma de asentarse. Para que puedas bajar tus antecedentes y decir contraportada, esconder esto por un segundo y puedes pasar por esto. Entonces, como, digamos que es 90%. De acuerdo, entonces ahora lo que podemos hacer, aún no es Sí, voy a hacer algo un poco diferente. ¿ De acuerdo? Sólo tenemos que ser pacientes conmigo. Voy a hacer es así que tenemos nuestra barra flotante y lo haremos así en la parte inferior y para hacerlo aún mejor, Lo que y para hacerlo aún mejor, podemos hacer es seleccionar ambos, agruparlo, digamos, digamos, sin embargo, lo que vamos a hacer es agregar, hecho, sólo una simple sombra de gota. Um, demasiado tan bien debido a y dos y 10%. Demasiado poco. Está bien, ahí. 20%. A veces me gusta usar los colores que tienen que estoy usando ya aquí. Entonces me gusta ir a unos colores locales y usar ese gris, pero luego traerlo de vuelta a mí como 40 porque es tan como, OK, cool. Está bien, así que ahora no queremos esto. Entonces lo que hacemos es volver a nuestro botón primario y ocultar la riqueza flotando. En realidad, vamos a mantener el flotar y luego esconder todo eso. Y así ahora en Hever semanas así, queremos eso, pero no eso. Entonces ahora tenemos el botón de enviar, tener su enfoque, e incluso podemos hacer un click. Entonces lo que haremos es volver aquí, duplicar nuestros antecedentes y decir click. Y lo que vamos a hacer es que sea el mismo rojo, pero tener un interior el hecho. Entonces en su sombra y otra vez, los colores locales van con la marina y lo bajan a, como, 15% y a Ok, así que ahora tenemos al click, y podemos ocultar ese duplicado el enviar 40 pixels, Ver click activo, y mostraremos click y fondo alto. Entonces este es tu enfoque y el cursor, y luego haz clic Solo le da un poco de sombra de gota sutil. Podría ser demasiado sutil, en realidad. Por lo que sólo vamos a volver a pinchar en su sombra y golpear eso hasta un 20%. De acuerdo, entonces ahora lo que queremos hacer es decir, um, um, necesitábamos discapacitados. Por lo que tenemos el botón primario. Volvemos aquí, creo que se te ocurre la idea. Nosotros Oh, sí. Ya sabes, queremos hacer eso. De acuerdo, entonces ahora nos sumergimos, lamemos el fondo, y solo puedes mantener la opción y arrastrarlo. Um, vamos a hacer esto para salvar a discapacitados. Hola. Esto y vamos a desactivar el botón. ¿ De acuerdo? Y eso es bastante sencillo. Creo que eso es todo lo que queremos y podremos cambiar el color del texto como queremos. Pero para recordar, creo que es importante duplicar tu texto y tener eso como color. Es realmente útil porque si te olvidas, entonces obtienes todos estos grises diferentes y ahí, está bien, así que hemos deshabilitado y nos sometemos, y así puedes ver que todos estos necesitan ir a izquierda y derecha, y eso lo verás en un segundo. Pero lo que queremos hacer es cambiar este color, también. No queremos eso. Sí, y esto necesita ser un poco más ligero. Nos vamos, OK, OK, así que ahora nos esconderemos desactivados y mostraremos, enviaremos y mostraremos el fondo. Entonces volvemos aquí para ocultar fondo y mostrar, deshabilitar y luego esconder enviar. Y ahí estamos, está bien, bastante fáciles. Pero la idea es que lo que quieres hacer es configurar estos para que puedas cambiarlo a lo largo de tu composición y que sea súper fácil. Entonces a medida que estás construyendo, tienes otro botón y dices, Inicia sesión y puedes hacer más pequeño y son espacios correctamente y funciona muy bien estado y hacer algunos botones secundarios. Entonces lo que vamos a hacer es ir al botón primario que tenemos y vamos a duplicar el maestro. Entonces si alguna vez estás como, ¿dónde está esta cosa? Ya sabes, si estás construyendo una tonelada y tonelada de componentes y eres como yo a veces has conseguido área de componentes desorganizada. Uh, puedes hacer click derecho sobre él y decir, Ir al componente maestro saltará ahí mismo. Entonces ahora mismo lo tenemos en el lado izquierdo, lo cual es bonito. Y entonces lo que vamos a hacer es solo usar opción drag duplicado, y me apunto a la grilla mientras ustedes se fueron. Entonces, uh, uh, todos modos, voy a dar click derecho a desacoplar instancia. Entonces ahora tenemos este botón y lo vamos a hacer, um, secundaria. Vamos a ponerle un nombre secundario. Y, uh, sólo nombraremos a esta secundaria. Y otra vez si quieres que tu texto sea todo gorras, veamos aquí mismo, todas las gorras así y asegúrate de que esté en el centro. Entonces lo que vamos a hacer con este es tomar vamos a tener blanco como fondo y un trazo de semen de campamento de arranque a, y luego vamos a cambiar nuestro color de envío o secundario al rojo. Está bien. Entonces ahora que tenemos esto, lo que podemos hacer es duplicado y hacer el flotar y enfocar. Al igual que el otro es sólo un poco divertido. A veces para ser como, Bueno, ¿cómo se verá esto? Y puedes sacarlo rápidamente. Entonces solo voy a hacer esto muy rápido. Agruparás esto juntos, digamos, antecedentes. Voy a duplicar esto y decir Hover. Whoops. Perdón. Va demasiado rápido. Está bien. Entonces así será el Hever. Lo haremos. ¿ Simplemente vamos a hacer caer esto a esto? Um, como gris en el foco. Haremos rosa ya que el ribete se ve un poco demasiado brillante. Por lo que necesitas aligerarlo. Haré de esto un gris nuevo. Entonces cuatro. Ups. De acuerdo, entonces ahora que tenemos nuestra portada, vamos a añadir un efecto a este mismo efecto. Y si tú si quieres Oh, ya sabes, mantén los efectos similares. Puedes entrar aquí y nos gusta esta sombra de gota. Simplemente vemos el estilo de los efectos. Quién no puede soltar el botón. De acuerdo, así que ahora saltamos de nuevo aquí a nuestra tener su enfoque que los efectos de tierra, pero no se puede soltar el botón Así que tiene eso bonito con el algunos de esa marina de ahí dentro. Al igual que tener algunos de esos colores pop a través. Este es un esquema de color un poco diferente, pero me estoy divirtiendo, así que vamos con él. Uh, vale, así que vamos a duplicar, sin embargo , quítate eso, y ahora tenemos click activo. Entonces lo que vamos a hacer es volver a aquí y mirar lo que hay en el hover. Bueno, en realidad, solo podemos hacerlo aquí, también, para que puedas ver la sombra interior para que hagamos comida. Gorra no puede en su sombra. Está bien. Está bien. Entonces vuelvo a aquí, y una cosa que hago es como, Oye, si esto está realmente cerca, simplemente no podemos duplicar esto. Mantente activo y muéstralo. Y luego al fondo, afecta campamento de botas a su sombra. No sé si eso funciona, pero vamos a ir con frente a hacer clic en lo Lo que es bueno de los componentes es que si sientes que no está funcionando, puedes volver atrás y sacarlo. Y cambiará a lo largo de este sitio. Incluso si tienes,ya sabes, ya sabes, múltiples piezas que son realmente largas como un final de, Ah, Ah, somete que quieres una acción muy grande llamada, lo que sea Todos estos cambian y lo hemos configurado para que estirar correctamente. Entonces, um, así que ahora tenemos activos, y vamos a hacer, um, discapacitados. De acuerdo, así que solo haremos este con ese gris y este mismo gris lo podrías necesitar para ser más claro buscando son más oscuros, para que puedas verlo. Sí, eso está bien. Entonces, um, deshabilitar. Muy bien, entonces ahora encendemos nuestro botón secundario, y antes de hacerlo, tenemos que asegurarnos y golpear. Hey, este es el maestro Symbol Copy. Duplicar el. Vamos a llevarnos nuestro símbolo maestro por aquí, y luego nos aseguraremos de que sí, este es nuestro duplicado secundario. Entra en este. Desactiva el fondo. Encienda el duplicado del mouse (ratón). Apague. Enciende activo. Y lo mismo con los discapacitados ayuda a hacer eso. Yo soy el equivocado. Está bien. Sí. En el click necesita algo de trabajo. Simplemente no es suficiente cambio ahí. Entonces, ¿qué está pasando aquí? Volveremos con nuestro maestro para asegurarnos de que lo estamos cubriendo correctamente, y lo vamos a hacer demasiado rosa. Harás lo que haremos lo activo como rosa. Uh, no puedes rosar. De acuerdo, entonces ahora sí, eso se ve un poco mejor, y funciona. 5. Cambios de cliente: el diseño de cambios rápidos con la edición de componentes dominos.: Volvamos a jugar Devil's Advocate y digamos: Al igual que en este punto, el cliente era como Esto parece 2015. Necesitábamos ser más nuevos, y queremos los campos de formulario que solo tienen un trazo en el borde inferior inferior. Entonces lo que puedes hacer es entrar aquí de nuevo a tu original. Y en lugar de tener este rectángulo, lo que vamos a hacer es simplemente agregar lo que vamos a hacer es duplicarlo. Entonces tenemos el mismo tamaño y nos quitamos las esquinas redondeadas por aquí, Voy a demostrarlo me voy a quitar el trazo y ahora tenemos que llenar pero manera no lo queremos. 64 pixeles. Hagamos dos píxeles Y lo que vamos a hacer es dejarlo caer. Y lo que me gusta hacer es tener ese rectángulo base allá atrás para que sepa dónde está mi ribete para parar por el dimensionamiento. Entonces ahora vamos a esconder eso. Entonces ahora tenemos un bonito, um, bonito um, marco son campos de formulario que son un poco más limpios, y tu cuadro de comentarios no está funcionando correctamente, y es porque agregamos esto, um, el rectángulo que se establece a escala Así que realmente queríamos dedo del pie abajo y luego automáticamente hace que dos píxeles para que puedas ver eso rápidamente. Espero que lo puedan ver. Es un poco ligero. Entonces lo que es lindo, también, es si estás entrando y diciendo Hey, quiero mostrar que este está resaltado Puedes entrar en este campo de formulario específicamente y decir, Hey, esto es esto es accionable, ya sabes, y probablemente sí rompan esto y hacen este rosa por diversión. Entonces esto está encendido en Hever o bien enfocarse, y luego puedes decir que realmente estás escribiendo y entrando en este momento, así que esa es otra forma de hacerlo muy rápido. 6. Menú flotación: cambiamos el menú original y construimos un menú flotado.: Muy bien, bienvenido de nuevo. Vamos a saltar de nuevo al área superior y ver algunas formas en que puedes cambiar componentes por página simplemente muy rápidamente con imágenes e impuestos. Entonces lo que vamos a hacer es deshacernos de esta parte y flotar bonita imagen de skateboarding detrás de esto y hacer que el menú flote en el fondo de la imagen para que cada página tenga un ajuste de imagen diferente. Entonces vamos a poner ah, sistema de menús aquí que acabo de hacer ya. Y lo que queremos hacer es asegurarnos de que tenemos un poco de oscuridad en la parte superior para que el menú siempre muestre que es que vamos a romper esto y vamos a hacer un lineal de Grady Int Phil. Y entonces esto se desvanece a cero. Ya veremos cómo funciona, pero puede que no necesitemos que tanto lo deje caer de nuevo en un segundo. Entonces básicamente hacer rectángulo y dejarlo caer detrás de su comando opción corchete izquierdo, y luego lo vamos a llenar con una imagen. Por lo que tenemos sólo algunas imágenes del skateboarding. A ver, este es un poco genial. Eso puede ser Sí, vamos a ir con este Es un poco demasiado bajo. Entonces lo que podemos hacer es cruzar bien antes de eso, quiero asegurarme de que tengo la A bonita A bonita altura. Entonces hagámoslo por 92. De acuerdo, ahora vamos a recortar ID. Baja eso. Está bien, así que esto se ve un poco raro. Ahora, lo que queremos hacer es hacer clic en esto y volver al componente maestro, Ir al maestro, que está ahí mismo a la izquierda. Entonces cuando tenemos esto, simplemente se ven un poco demasiado gordos ahora. Y no necesitamos ese trasfondo. Entonces si estamos cambiando, queremos asegurarnos de que lo estamos haciendo todo juntos. Y por lo general cuando consiga esto juntos como el sistema de menús, guardaré esto como componente también. Entonces lo que es un poco bonito es que una vez que entramos en la presente sección principal que esta acción o el estado activo en el botón, queremos asegurarnos de que tienes tu izquierda y derecha, por lo que se estira con ella también. Permítanme volver atrás como parte estatal activa. Quieres que esté en el fondo. Entonces si no está en la parte inferior y está configurado para escalar, lo que pasa es que si la encoges, la línea se encoge y no quieres eso en absoluto. Por lo que quieres caminar eso también Bottom o top, dependiendo de tu diseño. Entonces y ahora, ahora que hemos tipo de borrado algunos de los colores en el make this pink por diversión y vamos a deshacernos de ese fondo al 8% vamos a ocultar eso. Lo voy a esconder aquí, ID. Y ahora vamos a volver a esta sección principal y apagar activo Estado a Así que ahora estamos en casa y tenemos ese bonito menú. Y lo que es bonito es decir, quieres dedo del pie, hacer otra página y lo conviertes en un componente. Por lo que este podría ser el menú principal. Mano duplicará esto y sacará el menú principal. Ups. ¿ Qué hice ahí? Saca el menú principal y póngalo por otro. Entonces lo que es bonito es que puedes cambiar esta sección en todo el sitio. Entonces, por ejemplo, bueno, vamos a hacer de todo esto un componente también. Entonces vamos a agregar la navegación principal no están en la navegación, El texto principal para la página. Entonces el encabezado uno y yo queremos que éste no sea todo mayúscula, así que sólo lo vamos a tener regular. Vamos a hacer grande este apestoso en más grande. Vámonos. 64. Está bien. Está bien, vámonos. Aún más grande. Muy bien, Así que ahora lo que queremos hacer es establecer este Grady int funden esta imagen de fondo y el encabezado uno dos en el que, lo cual es agradable. Si configuras esto en tus textiles, solo tienes que seguir adelante y llamarlo H one. Pero vamos a seleccionar los tres de esos comando de opción K. Este será nuestro héroe, Así que copio eso duplicado y llevo al héroe aquí arriba. Entonces lo que es bonito es decir que queremos otra página. Basta con duplicar la página. Mueve todas las cosas rápido, sólo para que puedas verlo. Tenemos otra página. Seleccionamos este componente, ella es una imagen, y probaremos este. Está bien. Y ahora lo vamos a recortar. Ya está listo para recortar fresco. Entramos en nuestra cabecera uno y nos gusta el agrietamiento. No sé si eso es una patineta o no. Entonces necesitamos una línea a la izquierda Así volvemos a nuestro componente y una lima a la izquierda. Está bien. Por lo que rápidamente consigue una idea de cómo vaciar diferentes páginas con el diferente sistema de menús. 7. Botón con íconos: construir botones con varios íconos y estados activos.: Hagamos un salto rápido a un botón con un ícono. Lo que vamos a hacer es realmente sencillo. Button tiene los diferentes iconos de redes sociales en él, y puedes intercambiar muy rápidamente. Tan bien, haz un botón blanco con un trazo y hazlo bastante sutil y haz. Esto bajará a 56 para las redes sociales. Y digamos, ya sabes, hacer un seguimiento o algo así para hacer esto aún más pequeño. Es bueno en 48 así que no es abrumador. Y dije, este texto la línea izquierda, darle algo de espacio. Vamos a traer primero a Twitter. Entonces tienes Twitter y lo que vamos a hacer es espaciar esto. Ya que todos dicen seguir, vamos a centrar eso y tener el espaciado que 32 Muy bien, tan bastante simple. Opción Comando K. Así que tenemos nuestro botón social tipo Kim con ustedes mirando. De acuerdo, entonces lo que queremos hacer es poder arrastrar esto hacia fuera y tener los diferentes botones de seguimiento para que incluso podamos hacer uno diferente, también, donde solo tenemos al nosotros como una versión pequeña como 32 pixeles. Lo mismo. En ocasiones, si tenemos algo, solo péguelo dispara a la parte superior izquierda solo para vigilarlos. Entonces una de las cosas que puedes hacer es simplemente tirar todos estos iconos aquí y un centro de línea. Alinee vertical y suéltelo en este botón. Alinear. Línea vertical. Opción horizontal Comando K. Tienes tu componente social pequeño. De acuerdo, vamos a hacer un duplicado de eso. A mí me agarran el original. Tire hacia fuera. Entonces lo que es lindo entonces es decir, tienes esto, maestro, Entra y sólo escondes todos estos. Entonces cuando entres en este principal social digamos, digamos, empecemos con Twitter y queremos tenerlos encerrados así. ¿ Todo bien? Creo que eso está mal. De acuerdo, entonces todo lo que haces es entrar aquí, Apague, encienda Facebook, luego apague. Twitter, Enciende Lincoln. Y así sucesivamente y así sucesivamente. Y súper fácil. Súper, Super Fácil. Por alguna razón, ese se ve raro. Por lo que tenemos que volver a nuestro principal rápido YouTube y ver que uno va abajo en la sección principal . Entonces esa es una forma de hacer estos pequeños botones de redes sociales y no te olvides de enlatar . Um, decir así está apagado y bueno, duplicar eso y decir y hazlo gris completo. Entonces, ya sabes, si estás seleccionando esto y quieres mostrar el botón estar encendido o el botón rollover, entonces solo tienes que hacer clic en esperanzas en este, ¿de acuerdo? Por lo que puedes ver rápidamente lo fácil que es hacer estos componentes. Y luego, por ejemplo, si esto está en el pie de página y los pies a lo largo de todo el sitio, entonces simplemente puedes obtener rápidamente un sentido. Es casi como si tuvieras CSS visualmente para cambiar todo sobre la marcha. Entonces no voy a pasar una tonelada de tiempo en esto. Pero, um, así que vamos a voltear flop esto realmente rápido. Oops, no tenía a los otros ahí dentro. A veces hay que tener un showings que se puede ver lo que se está haciendo. Eso es algo divertido. Está bien, así que ahora me voy Teoh, deshazte Twitter. Es grande, solo lo hace súper fácil y bien apagado. Tienes tus botones sociales y puedes hacer rollovers cualquier cosa y estilo de la manera que quieras, Pero antes de que termines, quieres ver cómo funciona esto? Responsivamente. Entonces echemos un vistazo a esto y veamos si se estira y esto es de lo que estoy hablando es no, eso no está bien. Entonces lo que hacemos es entrar yendo a estos, así que selecciónalos todos y digamos que lo queremos en el centro y queremos entre izquierda y luego queremos que este seguimiento sea ¿Qué canción? Este botón social principal justo aquí. Queremos que esté justificado. Vamos a mantenerlo a la izquierda justificada. Pero lo que haremos es decir derecho y centro. Entonces a medida que esto se desliza, se hará más grande. Ahora lo hicimos bien, e incluso se puede agrupar estos juntos como grupo y línea central esos para que se queden juntos en el botón como hace. Supongo que debería mostrarte eso. Entonces lo que vamos a hacer es agrupar esto y lo que tienes que hacer es decir, un centro central y ahora deberías ir. Si no, tendremos que ¿Qué? Simplemente lo hizo en el Twitter. Entonces tal vez tengas que demostrarlo, um, dice centro. Está bien, así que es agradable que solo lo puedas probar. Entonces tienes un bonito botón que sigue y no juego de palabras intencionado y puede estirar a tu respuesta de contenido. 8. Componen de selección: botones de radio y cuadros de: Muy bien, vamos a saltar al multi. Seleccionar y soltero Seleccionar. Entonces lo que se verá es un multi select sería casilla de verificación. Entonces vamos a hacer de estos 32 32. Voy a seguir con el mismo tipo de estilo con el fondo blanco, como un trazo gris a pixel. Está bien. Y ella está agarrando algún texto. Vamos a llamar a esta casilla de verificación una casilla de verificación a Tenemos un texto simplemente regular y espaciar esto con, um, 24 píxeles. Ya puedes ver cómo me va. Todo en octavos estaban tratando de Azzam. No voy demasiado rápido. Entonces, um, sólo vamos a hacer la caja en sí para el y es que parece todavía demasiado grande. Entonces bajemos a 24. Muy bien, entonces básicamente tenemos nuestra caja, estás de vuelta. Y entonces lo que queremos hacer es conseguir un cheque. Y así uso, uh, no tan lejos impresionante. Y así podemos hacer Look up, check Si no tienes la versión pro, um, puedes usar la versión gratuita, así que ahí hay un cheque también. Entonces me gustan algunos de estos. Los delgados que tipo de concuerdan con el estilo que vamos a buscar. Entonces lo que hago es copiar el Unicode y volver a Sigma. Sí, pega esto aquí y llénalo con ¿Funcionó eso? Ah, está en la visión, Prue. Por lo que necesitamos fuente Awesome. Cinco, no marcas, pero sólo cinco ahí. Sí, hay un profesional, y vamos a poner ese cheque ahí dentro. Está bien. Parece que tengo a esos No estoy seguro de dónde ese. Está bien, agréguese un poco. Entonces tenemos una casilla de verificación, y lo que queremos hacer es decir, entonces voy a duplicar eso y decir activo. Y este cheque no está caliente en la propia página. Entonces a veces simplemente lo cortaré, comando X, e iré a seleccionar algo en la página y decir comando V, y lo pegará en algún lugar cercano. Entonces estamos donde está nuestro Sí, estamos allá arriba. Normalmente agrupo estos un poco mejor para ir un poco más rápido, pero, um, um, medida que construyes el resto de páginas, Pero lo que vamos a hacer es simplemente seguir moviéndonos. ¿ De acuerdo? Entonces tenemos nuestro cheque aquí. Podemos nombrar ese cheque y activo. Entonces queríamos ir a ese rosa. Y ahora lo que hacemos es decir, activo. Yo estoy agrupando eso, y Oh, y vamos a ocultar eso y luego seleccionarlos a ambos. Y no necesitamos un grupo de más. Sólo di opción comando K. Así que conseguimos nuestro componente y, um, selecciona casilla de verificación. Muy bien, entonces ahora contratamos esto aquí abajo, y vamos a duplicar esto. Mantén esto alejado a un lado en caso de que necesitemos cambiar a alguien. Haz que este activo sea súper divertido. Um, así que ahora iremos por aquí y haremos lo mismo. Entonces vamos a tomar ese estilo, hacer un botón de radio. Y el trazo de vuelo de Phyllis es el gris a y abajo a 24. A veces los botones de radio son un poco más pequeños, así que podríamos bajar al 22 solo, uh, conseguir esta sensación de ese estilo. ¿ Todo bien? Es y entonces diremos fuera de lo mismo. Pero éste, lo que haremos es simplemente hacer un simple, um, círculo en el medio. Y una cosa contigo sabes, 22 no funciona con el círculo directamente en el medio a menos que sea simplemente perfecto. Entonces iremos al 21 y luego un centro de línea, Línea vertical, horizontal y todavía está apagado un poco. Entonces tal vez eso está bien, supongo que lo tenía bien. 08 Hola, Evens. De acuerdo, entonces aquí vamos. Iremos a Pink por la película. Nombra esta activa y va a duplicar ésta. Cambia esto a Rosa. Eso no me gusta. Tiene que ser el tal vez. De acuerdo, entonces, um, después de punto Así que vamos al grupo Teoh. Esos sí lo apagan. Seleccionando ambos opción comando K. Y así tendremos selecto radio duplicado. Entiendo lo rápido que puedes llegar en esto. Justo lo rápido que puedes moverte con él. No hay click en. Está bien. Y como, ya sabes, por ejemplo, si quieres cambiar como el texto con eso, puedes, pero vamos a simplemente vamos a mantenerlo de esa manera. 9. Componentes de tubos: utilizando componentes responde para añadir fácilmente las pestaña nuevas.: Voy a saltar y seguir adelante y trabajar en algunas pestañas. Y así tenemos, como, como, un estado de tabulación activo. Tenemos una pestaña condensada ahora mismo con, como, no sé, como, como, un interesante como, Hey, Hey, hay tres cosas pasando dentro de esta pestaña, pero esta es una bonita sección de componentes. Por lo que asl siempre y cuando estés construyendo pestañas, puedes seguir arrastrándolas y tener tus sets encendidos y apagados. Entonces lo que haremos es hacer una línea en la que me gusta usar un rectángulo, no las líneas. Por lo que tienes un poco más de juego. No estoy seguro de por qué. Creo que fue Sean Moynihan quien me enseñó esa. Muy bien, así que vamos a ir a bota, genial para, Y vamos a darle a este espacio un intento de tratar esta pestaña activa como un botón, pero vamos a hacer algunas cosas diferentes con él. Entonces vamos a tener el fondo, moverlo hacia atrás, que es opción comando corchete izquierdo. Entonces ve al 44 teniendo un poco más alto, y vamos a llenarlo de blanco y tener este, um, um, trazo para ser del mismo color. Por lo que igualará. Creo que ese no es el mismo color para y tres. De acuerdo, así que tenemos nuestra pestaña activa aquí, y vamos a ir hasta el área de la barra lateral, ¿de acuerdo? Acabo de duplicar eso sosteniendo opción. De acuerdo, entonces ahora tienes tu pestaña activa. Ahora, si sabes que tus fondos van a ser blancos, conduces sólo un poco rápido, como un golpe encima de esto, um, para cubrir, cubrir lo que hay ahí. Y luego tienes eso activo, sobre todo si estás haciendo, como, una toalla de estilo o algo que lo estás haciendo realmente rápido. Esa es una forma agradable, rápida de hacerlo. Entonces digamos que vamos a tener esto como, como, uh, rama en la ficha para mostrar cuántas cosas estaban pasando que serían algo divertidas. De acuerdo, así que ahora que tenemos nuestra estructura básica, queremos un centro, el texto, el texto, y asegurarnos de que su espaciado a veces Oh, uh, voy a dejar caer el's adentro y decir como, Quiero una base de 24 píxeles. Entonces esta es una forma barata, rápida, rápida de hacer eso. Y ayuda. Simplemente consigue rápidamente tu espaciado. De acuerdo, no lo haré. De acuerdo, ahora que tenemos un tabulador funcionando. Este es nuestro estado activo. Lo he duplicado y tengo al maestro aquí. Entonces podemos intentar hacer algunos estiramientos y cosas así para ver si está funcionando. Y es La razón por la que es esto se agrupa y se establece a la derecha en la parte superior. Por lo que siempre mantente justo en la cima. Queremos que esto sea de 44 píxeles y no es exactamente así. Haré que sea 44 pixels. Y hemos enviado esto a este activo como tipo de bar, básicamente diciendo: Hey, Hey, esta es la zona que activa. No quería que pasara todo el camino. Yo quería que demostrara que Hey, estamos trabajando en este contenido a continuación, pero queremos que sea centro e inferior. Por lo que siempre nos quedaremos en el centro y no va a crecer. Sé que siempre estar al fondo. Entonces ahora que tenemos esto, lo que necesitamos hacer es espaciarlo. Sólo estoy sosteniendo opción cuando arrastro así en un inactivo y activo. De acuerdo, así que di que es como tabulador inactivo. Es un poco más largo. Um, así que de nuevo o queremos dos líneas y vamos a cambiar esta línea. HaIf y, um ahora mismo podemos hacer eso y puedes ver que funcionará correctamente con el otro. Entonces es 84 por ciento. Y pero una cosa que podemos hacer es simplemente hacerlo un poco más amplio. Por lo que esto debe ser de 20 son 24 píxeles, 24 píxeles y 32 espacio. Entonces lo que hacemos ahora es que podemos mantener los números o flotarlos y despegar el despegue activo y despegar eso. Entonces tenemos solo una bonita pestaña inactiva aquí y vamos a duplicar de nuevo y decir, Like, solo llamaremos a esto inactivo, así que sé un poco más pequeño y la forma en que sabes dónde está tu talla es que vas hasta que salte a dos líneas. Entonces ahora eso es correcto para tu espaciado. Entonces saltemos en dos mesas siguiente 10. Tablas: utilizar componentes para acelerar tu construcción de diseño y de cambio dinámico..: vamos a saltar a mesas, así que voy a inventar algunas cosas. Consiguió X juegos status. Ahora tenemos un yo a nivel mundial. intentemos ver, como, um, disponibilidad, um, um, patrocinador. Y tal vez hagamos nombre aquí solo inventando esto. Entonces lo que queremos hacer es una especie de caminar estos hacia nuestras columnas o trabajar en espacios, dependiendo de si este aire se va a quedar o ser dinámico, por lo que este podría ser un componente también. Entonces, por ejemplo, me gustaría hacer esto, uh, textil. Entonces voy a decir que esto está, um, um, por delante de los pobres. Está bien, que puedas poner esto y hacer clic en ellos todos, selecciónalo y di cada uno por una cosa a la que puedes hacer es si estás espaciando, puedes hacer de esto un componente, por lo que se deslizará con tus mesas también. Vamos a trabajar en las otras mesas ahora mismo. Entonces lo que vamos a hacer es seguir adelante y vamos a romper esto y sólo conseguir algunos textos básicos un texto regular y dejarlo caer a 16. Entonces vamos a tener 123478 9-001 Así que este es su número y disponibilidad es, um no veo disponible. Y lo que vamos a hacer es asegurarnos de que este texto no sea centro. Cotización mayúscula mayúscula. Lo mismo con éste para estar seguro. Sí. Está bien. Entonces queremos esto. Esto es como nuestra zona de cabeceras. Por lo que queremos que esta sea nuestra primera celda de mesa. Vamos a espaciar esto de 30 a 48 píxeles, así que queremos que esto sea un poco más fuerte, así que lo vamos a usar como esta base de la Marina. Um, creo que lo haremos sólo por debajo de tu estatus, vale, solo haz una cita solo para el Heckman. Entonces, ya que esto va a ser una cita, debilita, encoge eso bastante y trae el nombre. Y empecemos con, uh, Rodney llore. Por lo que esto también sería genial . La mayoría de las mesas no tienen esto, pero podemos hacerlo. Simplemente, um, es que podemos lanzar su logotipo de patrocinador, y sólo vamos a usar esto como espacio. Entonces voy a hacer eso bastante pequeño y mover al patrocinador y perdonarme. No sé qué patrocinadores acabo de agarrar algunas empresas Así que sólo por diversión, princesa, Ver Adidas. Está bien. Y vamos a mandar a este Phil a imagen, acuerdo? Y estado disponible. Así que conviértete en un agradable vamos a volver y comprobar. Icono. Vamos a mirar hacia arriba. A ver. Um, ya tenemos el cheque. No veo sólo por el carajito de ello va a servir. Um, cerca. Entonces tenemos tiempos de tiempo, señor. Enfriar. Entonces copia esa. Copiarlo. Vuelve al fig MMA. Asegúrate de que sea fuente impresionante y pro. De acuerdo, entonces ahora tenemos nuestra ropa, y vamos a poner esos 24 píxeles encendidos, ver si está disponible o no. Entonces, ¿y si probablemente queremos revisar? Eso es realmente similar a eso. Por lo que volveremos a revisar en el círculo. Comprobar círculo una copia. Vuelve. Paz. Está bien. Entonces, ¿qué colores tenemos? ¿ El verde o el rosa? Porque es el color activo y no disponible. ¿ Es ese tipo de incluso esos verdes? Es como si yo lo supiera. Entonces voy a apilar estos y alinearlos, conseguir este estado correcto, y luego asegurarme de que tenemos suficiente espacio para no estar disponibles. Tipo de tipo fuera como más lo tienes por lo que si sabes que está disponible, no están disponibles. Escriba no disponible y verifique dónde se encuentra. Entonces tenemos el logo con el patrocinador. El nombre fecha y el mundo I d. número. Um, solo yendo al espacio esto solo un poquito, para que no lo hagamos Tú no quieres Está bien, así que vamos a deshacernos de eso. Para que podamos ver. Entonces esta es nuestra mesa. Pero lo que queremos hacer es mirar primero nuestro espaciado antes de hacer de esto un componente. Entonces puse esto en el fondo, y en realidad, lo voy a hacer realmente ligero. Y así a pesar de que este 1er 1 no queremos ser, um, Gray, probablemente queríamos ser blancos. Um, vamos a querer esto en segundo plano. Entonces queremos Este es el espacio. Entonces solo digo 84 ahora mismo, solo viendo mi grilla. Muy bien, así que queremos espacio. Esto sólo un poquito. Yo tenía que cumplir 24. Eso lo conseguimos por ahí. Entonces ahora tenemos nuestra mesa, y no me gusta el fondo así, Pero lo que podemos hacer es usar esa misma, pero déjala caer al 10 o 20%. Funcionarán 30. Y lo que vamos a hacer es duplicar esto y bajarlo a dos a. Y a veces si tienes problemas para forrar, puedes seleccionarlos a ambos y asegurarte de tener una línea al fondo. Y así ahora sé que este es el de arriba. Voy a ir al 50%. Estoy tratando de ir al 100 para igualar a todos los demás. Muy bien, entonces ahora lo que hacemos es seleccionado todo comando de opción K. Usted es. Tienes un componente, y es una mesa. Entonces ahora lo que podemos dio es duplicar esto va a sacar a nuestro maestro de mesa. Tendremos que jugar un poquito con eso. Y vamos a duplicar esto sosteniendo opción y turno y éste y éste. Está bien, así que tenemos Vamos a ver, Bucky LASIK, um quemar Quist. Eric costó porque hecho. De acuerdo, así que no tengo ni idea con quién estaban estos tipos. Entonces lo siento si estropeo esto, solo tengo estos logotipos disponibles así y dependientes. De acuerdo, entonces ahora esto falló aquí mismo. Lo que vamos a hacer es volver a este y asegurarnos de que tenemos el espacio para hacerlo . ¿ De acuerdo? Creo que es e nt Independiente. Sí. ¿ Eso es cierto, hombre? Espero no haberlo estropeado para que puedas cambiar rápidamente los números aquí. Entonces digamos 3478 Tienes 678 y fechas. No lo sé. Simplemente estamos haciendo toda la sustancia que podemos cambiarla rápidamente. Pero es tan agradable cuando estás haciendo brújula para empresas. Entonces veamos 12 y 2020. Muy bien, Entonces lo que queremos hacer ahora es que podemos entrar en la imagen y elegir nuestra imagen. ¿ Y cuál fue esa? Primero mejor sé cuál de lo que ve Adidas que puedo tirar independiente. Es tan agradable poder simplemente cambiar rápidamente. Es decir, estas son diminutas, pero tienes la idea de que puedes hacer todo tipo de cosas. Santa Cruz Plan B imagen de queso y estar bien. Entonces eso es genial. Para que ahora puedas entrar y decir, como, que yo no lo hice aquí. Podemos nombrar esto, um, disponible, disponible, y se puede ver a continuación en estos. Está empezando a llenar esos para ti. Entonces ahora sabemos cuál es cuál. Así que digamos que no está disponible y dirá, Uops, está disponible. Entonces vamos a esconderlos para que rápidamente puedas tener una sensación de, como, variables que puedes encender y apagar. Entonces éste, lo que vamos a hacer es volver atrás y esconderlo. Lo mismo con esta forma. Bueno, en realidad, vamos a hacer Vamos a quedarnos este y necesitaremos esconder éste y esconder la espalda. Esta, ella puede ver rápidamente cómo se podría construir la mesa. 11. Blockquotes: cerrar este tutorial hacia fuera. Quiero repasar un par de cosas más solo conseguir una sensación de comportamiento receptivo con componentes. Entonces, por ejemplo, construí esta cita de paseo, y la forma en que se quiere construir, como una cita testimonial, testimonial o de bloque no está en pedazos. Entonces tienes tus antecedentes, um, um, llamadas de vuelta y tu texto, y yo tengo, como, como, una pequeña cita de tirón. Y, um, Doctor, soy un tipo gracioso. Entonces esta pieza es el nombre, y esta es la cotización, cotización, corchetes, corchetes, o cotizaciones, y entonces esta es la cotización de bloque real. Entonces lo que queremos hacer es guardar esto como componente y solo por propósitos de tiempo, lo voy a poner justo debajo. Entonces lo copié, lo duplicé. De acuerdo, entonces cuando nos metemos con esto, no le va bien, y de verdad te aplastan y nada se mueve. Correcto. Entonces lo que queremos hacer es que en realidad podemos aplastarlo un poco para que veas qué pasa . Pero ve a la parte de atrás y di, izquierda y derecha y arriba e abajo. Entonces quieres que tu nombre esté en la parte inferior. Entonces dices izquierda porque siempre quisiste izquierda. Junto a esta cotización son como cotización de burbuja de voz, y luego lo quieres en la parte inferior. Lo mismo con este. Lo quieres a la izquierda y al fondo. Y estas quieres izquierda y derecha. Ya lo puedes ver cambiando y arriba e abajo realmente te permite arriba. Y pongamos esto en, um, centro y superior. De acuerdo, mira, Así que esto está funcionando, ¿verdad? Simplemente parece que no está funcionando bien, porque cuando estiras esto, y entonces lo espacias para que puedas ver rápidamente cómo funciona esto realmente bien, con diseños receptivos donde simplemente puedes verterlo y luego tirarlo hacia abajo. Tan super agradable. Y simplemente encajaremos en una de estas columnas, sacaremos bien ese espacio, y sacaremos el componente maestro y terminaremos. 12. Tabla de precios - un componente para crear una mesa de precios rápida de 3 columas.: en esta última pieza, vamos a hacer estructura de precios del modelo para que los componentes se puedan mover y editar. Y es solo buen dedo del pie tienen estructura de precios, pero tenerlos estar en componentes. Entonces vamos a hacer esto blanco y sólo divertirnos un poco. Um, en este fondo, Entonces lo que voy a hacer es meter foto, ¿verdad? ¿ Una especie de gran odio? Está bien. Y lo que vamos a hacer es ir Teoh Solo duplica esto para propósitos de dimensionamiento y ve a sólido, y luego podemos mover esto atrás, así que diremos que esto es de vuelta y moverlo si puedes mirar hacia abajo a la izquierda, puedes ver aquí está la parte de atrás y nos vamos a oscurecer en este, y vamos a cambiar la imagen a Vamos a probar el software. Sí, así que eso es algo divertido, e incluso puedes desdibujarlo y hacer todo tipo de cosas con él. Entonces por encima de esto, Así me gusta agrupar estos y decir de nuevo y luego bloquearlo. A veces si estoy trabajando encima de su pero vamos a tirar en nuestra grilla y vamos a hacer un conjunto de 33 y tres. Así que pon esto en fila, acuerdo? Y sólo inventar un Zagat. Entonces, ten cuidado conmigo. Entonces lo que haremos es tener, ah, ah, luz como un profesional. Y, um, como, um, bueno, tal vez ligero, regular y pro. Entonces lo que haremos es averiguar los colores simplemente realmente rápido pensando en lo que podría ser el más fuerte y medio. Y en realidad, muchas veces tienen, como, como, la luz y regular, y luego el pro en el medio con eso es un poco más grande. Entonces podríamos simplemente hacer, um este gris verde. Sí, sólo por el carajo. Vamos a probar esto, así que vamos a poner esto aquí. Y queríamos pasar todo el asunto porque queremos Ah, una sombra de gota. Por lo que se me cayó ya demasiado lejos. Entonces aquí está la devolución de precios. ¿ De acuerdo? Vamos a hacer los efectos. Quién no puede soltar el botón, y vamos a romper eso. Vamos a hacerlo un poco más grande. Así que haz como un 14. Y hacer esto realmente oscuro para que puedas verlo demasiado oscuro. Entonces dejaremos esto de nuevo a 50. De acuerdo, entonces diremos mano ligera. Mantendremos estos thes rompen y haremos que sea un poco diferente. Will irá más grande pero más delgado. Por lo que queremos centrar el texto y pensar en estirar y espaciar. Entonces queremos tener libros tanto espacio como podamos para el otro. Las otras piezas. Y creo que lo que quiero hacer es ir pequeño, en realidad, Y, uh, el 24 no al 24 24 y luego hacer el precio justo aquí. Tan bueno, ten el precio. Y entonces digamos que son 29 al mes. En realidad, eso es mucho ST nueve al mes. Y queremos que esto sea grande y este sea ligero y pequeño. Y así una cosa que podemos hacer es trabajar en la alineación con esto es ponerla en donde será trabajo superíndice la posición de la misma para ser más alta. No creo que necesitemos el corte. Yo quiero esto aún más grande. 56 64 aquí. De acuerdo, tienes una luz, y te describiremos esta línea y otra vez, tiró ahí arriba y luego vuelve a bajar. Sí. Está bien. ¿ Por qué nos va a hacer pasar todo el camino? No estoy seguro Lo que no está funcionando con esto. Está bien. Voy a hacer esto realmente sutil. Diga, como, 20%. ¿ Te conformas? Ah, esto son 100 ahí, pero pastores 20. Está bien, está bien, así que esto son 9 dólares al mes. Pero lo que es divertido ahora es en realidad, podemos tirar de esto hacia atrás, bajar y hacer que esto pase por unos pedacitos. Se puede ver el fondo. Alguien lo haga. 75%. De acuerdo, ahora, tenemos, como, como, una lista tipo de lista como una lista atornillada. Pero vamos a centrarlo y decir, como, en realidad, en realidad, tengo algo de latín por aquí, Gramps en este centrado. Hagamos 30 cuatro heridos. Es que estamos en un Spacey's por 24. Está bien. Y a ver que concibes. Esto está centrado, y eso está bien. En realidad, lo dejaremos así. Se ve bien, Aunque queremos comprarlo ahora. Botón tan bien, espacio un poco mejor. Está bien. Y así ahora podemos volver a nuestro botón. Copiarlo. Ya desmenuzado, puedes encogerlo un poco si queremos. De acuerdo, esto es súper sencillo que se te ocurra la idea. Entonces ahora vamos a hacer de este dictador un componente. Por lo que necesitamos esta devolución de precios con todas estas otras cosas. Tenía tantas cosas pasando y lo limpiaba. Botón de orden para ir. Ahí vamos. Una de las cosas que puedes hacer es seleccionar todos los artículos estaban teniendo problemas en el grupo, llamar a precios, y luego vamos al comando de opción K y lo hacemos, uh, componente, uh, va a duplicar esto Saca fuera. Bueno, son gotas bastante locas. Por lo que tenemos nuestros precios en nuestro master. Entonces lo que vamos a hacer ahora es chasquear a las columnas y sacarlo. Y lo que es algo genial es que podemos mantener opción y hacer esto un poco más grande. Gracias entonces. Y diremos 80 19 y 14. Entonces diremos pro y negocios. Apenas al carajos. Entonces esto es lo que es tan bonito de los componentes es que puedes cambiar rápidamente los elementos. ¿ Ver? Vea lo que funciona colores aquí. Un poco loco. Perdón. E incluso puedes cambiar tus botones sobre la marcha a. Entonces espero que haya sido útil y entiendas lo potentes que son los componentes. Y espero adelante, Teoh, ver lo que ustedes crean piensa algunas de estas áreas de precios que he agregado en una imagen, pero no me gusta, así que voy a eliminarlo. Lo borra en todo. Algunos de estos artículos tendrán. Este es el mejor valor o tipo de cinta que exhibe Hey, míralo. Mírame. cual obviamente haríamos en este pro uno que, um y yo usualmente es como la versión más barata. Es como la versión media. Entonces bueno, Dio, cambiaremos esto y diremos pro y negocios. De acuerdo, entonces, ¿cómo agregamos algo aquí que no queremos por el otro a lo mismo? Simplemente volvemos al componente maestro y este es el área de cabecera. Entonces algo de este diseño podría no ser el mejor, pero es más solo para mostrarte Hey, esto es lo que podemos hacer. Entonces lo que voy a hacer es hacer una cinta y la enmascararé así que solo llamaremos a esta cinta y haremos blanca, y luego la bajaremos a esta zona de cabecera, y lo que haremos es usar como máscara también para esta Esta sección aquí. Entonces vamos a duplicar el encabezado y llamar a esta máscara. Yo estoy en un grupo estos juntos. Entonces llamaré a esta misa Tuas. Bueno, entonces voy a decir usa como mástil y luego esto golpea y para que puedas ver que va a ver, um, um, esta cinta se puede mover dentro de esa zona de máscara a lo que quieras para que podamos lanzar, como en uno de esos efectos en aquí. Entonces esa gota de botón que está bastante asentada y dejemos caer, sigamos adelante. Y queremos enmascarar esto ya que su texto a vamos a poner, uh, no ves que eso es valor. De acuerdo, haremos condensado y regular y lo haremos rosa. Entonces conseguimos igualar el ángulo de la misma. Y esto es lo que es genial de los vectores es que solo puedes estirarlo. Y como ya tienes tu masa montada, entonces solo tienes que moverte. Muévelo a donde funcione y sólo le daremos un poco de espacio extra. Y ya agarré el icono caliente, así que lo voy a cortar, volver a la pasta de cinta, y ahora ves que está aquí. No es exactamente un 45 pero está bien. Entonces solo diremos que eso es todo. Y creo que mi se puede ir así Un directo al sostener turno. Goto a un 45. Yo sólo quería un ángulo un poco diferente. Creo que se trata de 30. A lo mejor algo así. Entonces Ok, entonces ahora tenemos el mejor valor, pero sabemos que los tres no son el mejor valor. Entonces todo lo que tienes que hacer es entrar aquí y esconder la máscara y esconder la máscara. Entonces, ¿qué pasó aquí? Esto es algo de cambio para los componentes. Entonces lo que tenemos que hacer es meternos en nuestra máscara. Y una cosa que podemos hacer que podría ayudar es sólo decir que esto está bien y luego arriba, y así lo puedes ver saltado. Entonces esa es la mejor manera de hacerlo es solo probarlo si es necesario. A veces necesitas hacer de esto un componente. No puedes hacerlo dentro de los componentes, por lo que puedes arrastrarlo fuera, convertirlo en un componente duplicado y luego arrastrarlo a tu precio. Um, no necesitábamos hacer eso esta vez. Hay algunas estructuras más complejas que yo que así no la meto ahí si no lo necesitamos. Entonces, uh, esa es la sección de componentes. En pocas palabras, puedes entrar en la paginación, que es, ya sabes, con el triángulo y el número establecido y el estado activo todo en un solo componente. Entonces ahora que tienen las herramientas, espero ver lo que ustedes construyen. Gracias. Sí, ya terminaste. Espero que estas clases te hayan ayudado a mostrar cómo puedes trabajar con los componentes, lo fáciles que son de editar y agradables turnos. Si el cliente odia algo, puedes cambiar bastantes cosas al mismo tiempo. Entonces me encantaría ver algunos de los proyectos que ustedes inventan más así que no proyectos sino componentes y tal vez incluso algunas páginas que construyeron usando este formato de clase. Gracias esperanza de ver en la siguiente clase.