Clase magistral de diseño UI/UX en Figma: de lo básico a lo avanzado

1. Avance de la clase magistral de Figma: Hola a todos. Así que bienvenidos a todos ustedes en mi serie maestra completa zona Pigma diseño UIUX Entonces en esta serie maestra en particular, te enseñaré la herramienta Figma desde el nivel muy básico hasta el nivel avanzado En primer lugar, te enseñaré su diseño básico de la interfaz y sus características. Después de eso, aprenderemos algunas cosas básicas como componentes, diseño automático y creación de prototipos He creado este ciclo de conferencias de una manera muy sistemática para que cualquiera pueda entenderlo muy fácilmente. Así que no importa quién venga con qué antecedentes, aunque no hayas usado ningún software de diseño gráfico en toda tu vida, aún puedes entender Figma con mi serie de conferencias Esta serie maestra comenzará desde nivel muy principiante y subirá al nivel profesional. Así que no debes perderte mi serie de conferencias. Te veo en la conferencia. Bien, adiós. 2. Interfaz básica, diseño y características de Figma: Entonces ahora voy a comenzar mi ciclo de conferencias Figma. Entonces, antes que nada, te enseñaré su interfaz básica y propiedades y también cómo funciona Figma. Bien, entonces discutiremos de todo. Bien, entonces este es un espacio en blanco. Donde tienes que crear tu diseño. Bien. Entonces, antes que nada, entendamos sobre su herramienta, características y diseño. Bien. Entonces, antes que nada, vamos a discutir sobre algunas herramientas. Aquí tenemos herramienta de movimiento, marco, saps, herramienta pluma, herramienta de texto Bien, entonces cubriremos cada tema uno por uno de manera muy detallada. Bien. Aquí estoy presentando primero su diseño. Bien. Entonces, suponga que está creando rectángulo. Así que siempre que crees algo en tu lienzo en blanco, su capa se proyectará en el lado izquierdo de la pantalla. Eso se puede ver. Entonces creé rectángulo y está cosiendo en el tipo de capa. Bien. 1 minuto. Esta es una sección de capas donde la capa rectangular está cosiendo. Supongamos que estoy creando elipse, entonces su capa aparecerá en la sección izquierda de la pantalla Supongamos que si voy a crear flecha, así su capa aparecerá en el lado izquierdo de la pantalla. Bien. Así que siempre que vayas a crear algo, su capa aparecerá en el lado izquierdo de la pantalla. Bien, entonces hay que notar este punto. Bien. Ahora, hemos cubierto las herramientas, y también discutimos sobre el panel lateral izquierdo. Bien, ahora vamos a discutir sobre el panel lateral derecho. Así que cada vez que selecciones algún objeto, su propiedad aparecerá en el lado derecho de la pantalla. Eso se puede ver. He seleccionado rectángulo, así que aquí podemos ver que toda la propiedad del rectángulo es visible. Ahora podemos cambiar cualquier cosa. Supongamos que si tengo que cambiar algo en elipse, así que simplemente voy a hacer clic en elipse y su propiedad aparecerá en el lado derecho de la pantalla Supongamos que si tengo que cambiar algo en erotap, su propiedad aparecerá en el lado derecho de la pantalla Bien. Así que aclaremos todo. Y ahora voy a repetir todo lo que logre. Bien, entonces esta es una pestaña de herramienta. Supongamos que estás creando rectángulo, así su capa aparecerá en el lado izquierdo de la pantalla. Esta es una pestaña de capa donde se recogerá toda la capa. Bien. Y siempre que tengas que editar cualquier capa, tienes que hacer clic en esos objetos. Supongamos que tengo NVA en blanco, he creado rectángulo y círculo En nvas en blanco he creado rectángulo y círculo. Entonces supongamos que tengo que cambiar cualquier cosa en rectángulo, así que simplemente voy a hacer clic en rectángulo desde aquí. Y ahora puedo ajustar todos estos ajustes. O en vez de eso, lo que puedo hacer, puedo seleccionar mi rectángulo de la capa sexan también. Este es un sexano de capa. Entonces, en lugar de seleccionar mi objeto directamente, simplemente puedo seleccionar mi capa rectangular desde el panel lateral izquierdo, y su propiedad aparecerá en el lado derecho de la pantalla. Entonces tienes un tanto el método. O puedes seleccionar tu objeto desde el aquí o puedes seleccionarlo de la capa. Bien. Esto es algo básico. Ahora, vamos a colorear este círculo. Color rojo. Bien. Bien, bien. Ahora, en la sección de capas, verás que la elipse es sobre el rectángulo La elipse es sobre el rectángulo. Por eso se ve así. Pero, ¿qué pasará si arrastramos nuestra elipse por debajo del rectángulo, entonces qué pasará? Arrastremos elipse debajo del rectángulo. Vamos a arrastrar ahora verás que rectángulo han cubierto la elipse Este es un fundamental muy básico del diseño. Entonces supongamos que si alguna vez has usado Photosop, entonces estás familiarizado con esto Creo que puede que esté familiarizado con esto. Bien. Mientras creas tu diseño de UIUX, tal vez algunos elementos no estén apareciendo correctamente, tienes que verificar la disposición adecuada de la suma de sexo de capa Entonces en esta pantalla, elipse no está apareciendo porque capa rectangular es sobre la capa de elipse También el tamaño de la capa rectangular es mucho mayor que la elipse Por eso aquí, la elipse no está apareciendo. Entonces, ¿qué tenemos que hacer? Tenemos que arrastrar elipse por encima de la capa rectangular. ¿Bien? Bien. Tienes que practicar todo conmigo. Bien. Entonces cada vez que estoy creando algo aquí, también tienes que realizar la misma actividad en tu computadora. ¿Bien? Y con la ayuda de pocas conferencias, dominaré su Figma. Estoy comenzando mi serie de conferencias desde la capa muy principiante. Entonces, si estás familiarizado con algunas cosas básicas, puedes eskip esta parte Pero según yo, deberías ver video completo, no debes escipular nada. Poco a poco voy a aumentar el nivel de dificultad en mi curso. Por lo que está empezando desde el nivel muy principiante y va a subir al nivel profesional. Te veo en la próxima conferencia. Bien. Adiós. 3. Propiedades en Figma: Ahora aprendamos sobre la propiedad sexon dentro de la figma. Entonces para aprender un sexón de propiedad, tenemos que crear cualquier cosa, obviamente Así que vamos a crear un rectángulo. Bien. Ahora, como ya te he dicho que siempre que tengas cambiar la propiedad de algún objeto, tu objeto debe ser seleccionado. Entonces o estás seleccionando tu objeto desde el aquí directamente, o en lugar de eso, lo que puedes hacer, puedes ir en sección de capas y puedes seleccionar tu rectángulo desde el aquí directamente. Bien. Entonces no importa lo que estés usando qué método, solo tienes que seleccionar aquellos objetos en los que tienes que cambiar cualquier cosa. Bien, ahora, nuestro objeto ha sido seleccionado correctamente. Ahora, su propiedad, sus propiedades están apareciendo al lado derecho. Bien, entonces antes que nada, hablemos del puesto. Entonces, con la ayuda de la posición, puedes manipular su posición haciendo que tu mouse sea harapiento así Solo tienes que pasar el mouse. Tienes que pasar el ratón sobre la X, y ésta cambiará su icono Vamos a acercarlo. Así que vamos a pasar mi flecha del ratón por encima de la X, y está cambiando su icono Bien. Ahora lo que puedo hacer para disminuir el valor, tengo que arrastrar el ratón hacia el lado izquierdo. Para aumentar el valor, tengo que, uh, mover el ratón hacia el lado derecho. Así que vamos a disminuirlo arrastrando mi ratón hacia el lado izquierdo. Bien. Bien. Y similares por un tiempo. Pero no es tan importante porque puedes cambiar fácilmente, fácilmente la posición de tu objeto, por lo que no tiene ningún sentido. Bien. Entonces, seleccionemos nuestro objeto y avancemos hacia las otras herramientas. Bien. Así que con la ayuda de rotar, puedes rotar fácilmente tu objeto. Esto es una voltereta. Bien. Entonces, obviamente, no lo conseguirás aquí porque es rectángulo. Bien. Entonces con la ayuda de flip opson, puedes voltear horizontal y verticalmente. Bien. Bien. Esta es una pestaña de dimensión, que es lo más importante. Bien. Entonces desde aquí, se puede establecer cualquier dimensión. Entonces digamos 720 debe ser ancho, y alto debe ser 1080. Bien, entonces esta es una dimensión vertical, así puedes teclearla manualmente. Bien. Sencillo. Ahora, vamos a llenar el color. Ahora, vamos a llenar el color. Así que vamos a llenar el color naranja. Bien. Ahora, aquí verás opacidad Opson. Aquí verás opacidad Opson. Para que lo puedas poner 70. Entonces opacidad significa transparencia. Para que puedas disminuir su valor. Vamos a escribir 20. Bien. En lugar de eso, tenemos algún tipo de corte en nuestro teclado. Bien, entonces antes que nada, vamos a escribir 100. Bien. Entonces, si tienes que cambiar la transparencia de tu objeto, entonces tenemos algún tipo de cortes en nuestro teclado. Entonces supongamos que si tienes que establecer tu opacidad al 70%, entonces tienes que presionar siete en tu teclado ¿Ves? Bien. Si tienes que deshacer algo, tienes que presionar Control Z o deshacer. Control más Z. bien. Supongamos que tienes que establecer tu transparencia en el 30%, entonces tienes que presionar tres en tu teclado. Bien. Presionemos Control más R para Deshacer. Supongamos que si tienes que fijar tu transparencia en 60%, entonces tienes que presionar seis. De igual manera, si vas a hacer clic en dos, entonces se fijará la transparencia en el 20%. Si presionarás tres, entonces fijará la transparencia en el 30%. Entonces tenemos algunos atajos. Bien. Adiós. Ahora vamos a aumentarlo. Entonces esto es un rectángulo. Ahora pasemos hacia otra opción. Aquí tenemos un radio de esquina. Aquí tenemos un radio de esquina. Entonces, ¿qué significa? Tu esquina SAR se volverá radial. Bien, entonces entonces antes que nada, activemos esto. Bien. Entonces o puedo poner cualquier valor en el radio de esquina o en lugar de eso, puedo mover mi mouse hacia la izquierda y derecha, izquierda y derecha. Entonces pongamos el valor de T. Se puede ver que mis bordes SAP se han convertido en la curvatura. En lugar de eso, aquí verás un pequeño punto. También se puede manipular fácilmente la curvatura desde aquí. Bien. Y notarás una cosa que todos los bordes están cambiando al mismo tiempo. Bien. Pero y si tienes que cambiar el radio de la Esquina específica. Supongamos que hay que cambiar el radio de la esquina específica. No tienes que cambiar la esquina de todos, entonces lo que vas a hacer. Entonces para eso, aquí tenemos una opción separada llamada esquina individual. Entonces esta es una opción de esquina individual. Bien, entonces te voy a mostrar cómo funciona. Entonces, antes que nada, eliminemos la curvatura. Bien. Ahora tenemos unos bordes SAP por todo el rectángulo. Así que vamos a seleccionarlo. Bien. Supongamos que tengo que hacer curvatura sólo aquí. Y las partes de descanso permanecerían igual. Entonces, ¿cómo voy a hacer? Entonces antes que nada, seleccionaré rectángulo y daré click en esquina individual. Así que vamos a hacer clic en esquina individual. Bien. Ahora, aquí tenemos un lado cuatro. Aquí tenemos un lado cuatro. Entonces este lado cuatro manda por cuatro esquina. Entonces supongamos que tengo que cambiar esta esquina así voy a manipular el ajuste. Entonces o puedo poner valor directamente o puedo arrastrar el mouse hacia la izquierda o hacia la derecha. Bien. Así que arrastremos mi ratón hacia el lado derecho. Se puede ver que he logrado la curvatura en la parte específica, y la parte de descanso permanece igual. Bien. Entonces así es como se puede manipular con opción de esquina individual. Bien. Entonces ahora sigamos adelante. Aquí tenemos alguna opción que cubriré en las próximas conferencias. Bien, esta es una opción avanzada. Con la ayuda de I, puedes apagar el color. O con la ayuda del botón menos, puedes quitar el color. O puedes eliminar el color. Entonces presionemos a Andrew. Bien. Ahora aquí tenemos una opción de Etroke. Así que vamos a hacer clic en Estroke. Vamos a hacer clic en Estroke. Y aquí, te preguntará sobre eTrokePosision. Debe estar dentro, centro o afuera. Bien. Entonces creo que debería ser centro. Bien. Y escojamos su intensidad. Tres. Y además, aquí estamos obteniendo la misma opción de arrastrar mi mouse así Bien. Entonces así es como funciona un trazo. De igual manera, tengo efecto secon. Entonces con la ayuda del efecto, puedo proporcionar sadoblur Tenemos todas las opciones que cubriremos en los próximos videos, y también puedes explorarlo tú mismo. Es muy sencillo. Bien. agregar sados detrás del objeto R. Se le puede dar al hijo directo de sados. Bien. Puede proporcionar un efecto de desenfoque detrás del objeto R. Puedes hacer cualquier cosa. Entonces esta era la propiedad todo del rectángulo. Pero si voy a crear círculo aquí, entonces obtendré la propiedad según el círculo. Si voy a crear flecha, entonces obtendré Propiedades, según flechas. Así que la propiedad depende totalmente del tipo de objeto que estés creando. ¿Bien? Para que puedas crear cualquier objeto, y de acuerdo a tu objeto, propiedad se mostrará en el lado derecho. Bien. Entonces supongamos que estoy creando una estrella. Supongamos que estoy creando una estrella. Entonces aquí voy a ver algún opson nuevo que no voy a ver en el rectángulo o círculo Bien. Entonces, según SAP, obtendrás diferentes propiedades. Bien. Por lo que el sexón de propiedad puede variar con respecto a tu forma u objetos Bien. Entonces así es como funciona la propiedad secan. Entonces actualmente te estoy enseñando algunas cosas básicas, y voy a mejorar las capas de dificultad, los niveles de dificultad a partir de las próximas conferencias. Bien. Entonces, adiós. 4. Atajos en Figma: Ahora en esta conferencia en particular, te voy a discutir sobre algunos cortes tipo en figma, que te harán un diseño más rápido Bien. Entonces, antes que nada, hablemos de cómo puedes copiar cualquier objeto en Figma. Bien. Entonces, antes que nada, hablemos de la forma tradicional. Bien, así que la manera tradicional es que tengas que escribir clic en el mouse y obtendrás copia, y después de eso, presionarás el botón Control más V. Entonces así es como haces la copia de cualquier objeto. Entonces esta es una forma muy tradicional. Obviamente, aquí no lo usaremos. Bien, así que vamos a eliminar. Así que deja de copiar de la manera tradicional. Bien. Entonces ahora tenemos un método de dos. El primer método es el botón Alt. Entonces en tu teclado, deberías tener el botón Alt, el botón Alt. Entonces hay que presionar el botón Alt. Y con la ayuda del click izquierdo del mouse, tienes que arrastrar tu objeto así, y hará su copia interminable. Justo lo que tienes que hacer, tienes que presionar el botón Alt en tu teclado y mover tu Objeto, que tienes que copiar. Se puede copiar en cualquier dirección. Así es como puedes hacer una copia sin fin con la ayuda del botón Alt. Ahora hablemos de la segunda forma por la que se puede copiar el objeto. segunda forma es Control más D. Seleccionemos este objeto y presionemos Control más D. Control DDD, Control DD DD Bien. Entonces así es como puedes crear la copia als con la ayuda del botón Control más D. Bien. Ahora, se ve tan chateado, así que alejemos el zoom Alejemos el zoom sin cambiar el tamaño de nada. Tienes que presionar Control en tu teclado, y vamos a desplazarnos hacia abajo. Bien. Entonces así es como puedes aumentar o disminuir. Así es como puedes acercar o alejar tu lienzo. Su tamaño no está cambiando en el mundo real. Bien. Solo estamos acercando o alejando el zoom con la ayuda de control y botón de desplazamiento en el mouse Así que con la ayuda de botón de control y yo botón de desplazamiento en tu mouse, puedes acercar y alejar. Y tienes que asegurarte de que estás practicando lo mismo mientras ves mi conferencia. Hay que practicarlo todo. Bien, supongamos que te estoy enseñando estos fundamentos. Por lo que tienes que realizar toda esta actividad al mismo tiempo en tu computadora. De lo contrario, no conseguirás mi punto en las próximas conferencias. Así que por favor, uh, practica un poco conmigo. Bien. Entonces, vamos a eliminarlo. Bien. Entonces hemos aprendido sobre cómo podemos copiar. Entonces tenemos un método de dos. El primer método es Alt plus mouse. Mientras presionamos el botón Alt, tenemos que arrastrar nuestro objeto, y así es como podemos hacer que los extremos se copien o en lugar de eso, simplemente seleccione su objeto y presione Control más B. Y hará una copia interminable. Y para Alejar, presionemos el botón Control en tu teclado y desplázate hacia abajo y desplázate hacia abajo. Ahora aprendamos cómo puedes hacer selección múltiple en tu proyecto. Supongamos que tienes que seleccionar varios objetos al mismo tiempo, luego cómo puedes hacerlo. Bien, así que con la ayuda de la tecla Mayús, puedes hacerlo fácilmente. Así que vamos a presionar la tecla Mayús en tu teclado, tecla Mayús en tu teclado, y vamos a seleccionar aquellos objetos que tienes que seleccionar. Así que vamos a seleccionar todos los objetos. Ahora pensarás en eso. Podemos hacerlo fácilmente arrastrando mi ratón así, obviamente, puedes hacerlo así Pero, ¿y si no tenemos que seleccionar la estrella? Si vamos a seleccionar todo así, entonces se seleccionan todos los objetos. Pero, ¿y si no tengo que seleccionar la estrella, entonces cómo la haré? Simplemente presidiré clave y seleccionaré aquellos objetos en los que tengo que cambiar cualquier cosa Y aquí no estoy seleccionando estrella. Cambiemos el color para que veas los cambios. Entonces así es como puedes seleccionar múltiples objetos con la ayuda de la tecla Mayús. Además, tenemos otro uso de la tecla Mayús dentro de la figma. Bien. Entonces supongamos para un ejemplo, si va a activar la herramienta rectángulo, entonces usted puede crear fácilmente rectángulo uh, con diferente altura y anchura. Bien. Pero si vas a usar la tecla Mayús al mismo tiempo, entonces la hará simétrica. Y ahora, si vas a mover tu mouse, no va a cambiar. El motivo detrás de esto es que se han registrado apetra. Bien. Así que siempre que uses la tecla Mayús, te guiará para crear tu objeto simétrico. Bien. Entonces sin la tecla Mayús, puedo crear un rectángulo así. Pero si voy a usar la tecla Mayús y voy a crear un rectángulo, entonces mantendrá una relación de aspecto específica en todo el diseño. A, supongamos que estoy creando cualquier línea como esta. Pero con la ayuda de la tecla Mayús, ¿qué pasará si voy crear alguna línea con la ayuda de la tecla Mayús, entonces o creará una línea horizontal pura, o creará una línea vertical pura. O en lugar de eso, puede proporcionar línea con 45 grados, pero no creará línea aleatoria. Si voy a usar la tecla Mayús, entonces o será pura horizontal o será de 45 grados o será vertical. Pero si no voy a usar la tecla Mayús al crear línea, entonces puedo crear línea en cualquier dirección. Y una vez presiono la tecla Mayús. Consiguió algunas limitaciones. Bien. Entonces supongamos que tienes que crear diagramas rectos de líneas rectas sin comprometer con las dimensiones, debes usar la tecla Sift Ahora aprendamos sobre la agrupación. Supongamos que si has creado algunos objetos, algún conjunto de objetos, y tienes que agruparlos. Entonces con la ayuda de Control plus G, podrás hacerlo fácilmente. Supongamos que si he creado rectángulo, elipse y atar. Entonces en el lado izquierdo, capa sexon, se puede ver que todas las capas son creadas individualmente Bien. Pero para agrupar, tengo que seleccionar todos los objetos. Bien, así que vamos a seleccionar Tamizar, turno, turno. Con la ayuda de la tecla Mayús, he seleccionado todas las capas que puedes verificar desde aquí. Todas las capas están seleccionadas. Ahora tengo que presionar el botón Control más G en mi teclado para agruparlos. Así que vamos a presionar Control más G, lo siento, Control más G. Ahora el grupo se ha creado con éxito. Ahora bien, si lo voy a expandir, se puede ver que dentro del grupo, dentro del grupo, tengo ar elipse y rectángulo Entonces así es como puedes agrupar cualquier artículo. Bien. Entonces supongamos que ha creado supongamos que ha creado rectángulo y después de eso, escribe algo aquí. ¿Bien? Creaste un diseño así. Y si hay que fusionarlos, entonces selecciona tanto el objeto y presiona Control más G para agruparlos. Bien. Ahora hablemos de la selección específica de objeto. Bien. Así que vamos a crear un rectángulo grande dentro de este rectángulo, vamos a crear otro rectángulo. Vamos a cambiar. Dentro de este rectángulo, vamos a crear polígono y dentro del polígono, vamos a crear el círculo Bien, bien. Ahora supongamos si hay que cambiar algo en círculo. Supongamos que si tienes que cambiar algo en círculo, entonces obviamente tienes que seleccionar el círculo correctamente. Bien. Actualmente, todas las capas son individuales. No están agrupados. Bien. Así puedes seleccionar fácilmente círculo en cualquier momento y puedes cambiar cualquier cosa en círculo. Bien. Pero, pero, pero. Si lo agrupamos, eso es alabanza Control más G. Ahora grupo se han creado con éxito. El grupo se ha creado con éxito. Ahora, si tienes que seleccionar el círculo, luego dar clic en círculo, no está seleccionando en este momento. Hay que hacer doble clic con la ayuda del mouse, luego el círculo seleccionará, pero no es necesario que funcione en todas las situaciones. Bien. Así que avancemos hacia el diseño práctico. Este es un diseño. Bien. Entonces supongamos que tengo que seleccionar esta imagen de chico, entonces no está seleccionando correctamente. Esta es la caja cuadrada que están seleccionando. Bien. Entonces, para la selección directa, hay que presionar el botón Control y mover el mouse sobre el objeto. Entonces puedes ver que puedes seleccionar fácilmente cualquier objeto. Simplemente presione el botón Control. Se puede seleccionar una pieza específica. Supongamos que tiene que seleccionar texto. Así que al presionar el botón Control justo sobre el mouse sobre el texto y haga clic en Texto han sido seleccionados. Si tiene que seleccionar UI UX designer. Entonces si lo vas a seleccionar normalmente, entonces no está seleccionando, puedes ver que estoy dando click, pero no es seleccionando. Pero con la ayuda del botón Control, puedo seleccionarlo fácilmente. Así que con la ayuda del botón Control, puedes seleccionar cualquier cosa con el mouse. Bien. Entonces, para una selección específica, debes usar el botón Control. De lo contrario, seleccionará cualquier cosa. No utilicemos el botón Control. Y supongamos que tengo que seleccionar en Ver más. Entonces estoy dando click en Ver más y no está seleccionando. En lugar de Ver más, caja cuadrada han seleccionado. Entonces no es exacto, ¿verdad? Y es que consume mucho tiempo. Ahora, presionemos el botón Control y pasemos el mouse sobre la vista más Ahora, vamos a hacer clic. Sencillo. Bien. Entonces, con la ayuda del botón Control, puedes seleccionar fácilmente una pieza específica. Entonces de manera similar, si tienes que seleccionar el círculo, entonces tienes que presionar el botón Control, entonces puedes seleccionar fácilmente círculo. Supongamos que si hay que seleccionar la savia piramidal. Entonces sin el botón Control, intentemos seleccionar. No está seleccionando correctamente. Ahora vamos a presionar el botón Control en el teclado y vamos a pasar el ratón Ahora puedes seleccionar la savia trangular. Bien. Supongamos que tiene que seleccionar este rectángulo de radar. Entonces si lo harás sin presionar el botón Control, no funcionará correctamente. Pero si vas a usar el botón Control en tu teclado, ahora, puedes seleccionar fácilmente una parte específica. Entonces, para la selección adecuada de una pieza específica, hay que usar el botón Control. Y mientras presiona el botón Control, tienes que pasar el mouse sobre cualquier objeto Entonces veamos cómo va a funcionar. Presionemos el botón Control. Y mientras presiono el botón Control, estoy pasando el mouse sobre objetos alludi, y me está pidiendo que seleccione a cualquiera Entonces así es como puedes seleccionar una parte específica con la ayuda del control. Entonces si disfrutas de esta conferencia, entonces no olvides darme una buena calificación positiva y comentar. Bien, Bee. 5. Alineación en Figma: Hola a todos en esta conferencia en particular, les enseñaré cómo se puede usar la alineación en Figma. Bien, así que sin perder tiempo, comencemos nuestro video. Bien. Entonces supongamos que tenemos un elemento cuatro , uno, dos, tres y cuatro. Pero estos no están debidamente alineados. Bien. Entonces si tenemos que alinearlo correctamente, entonces tenemos que seleccionar todos los elementos, obviamente. Bien. Y en el lado derecho, verás alineación Opson. Bien. Entonces aquí tenemos diferente tipo de opción de alineación. Supongamos que si tienes que alinear desde la línea de referencia izquierda, entonces se verá así. Presionemos Control plus. Si hay que alinearlos desde el centro horizontal, entonces se verá así. Del mismo modo, puedes explorar toda la opción, pero comúnmente usaremos, pero comúnmente usaremos align horizontal center y align vertical center. Bien. Entonces, seleccionemos todos los elementos, y antes que nada, hagamos Centro común. Vamos a hacer clic en Alinear centro vertical. Ahora verás que todos los elementos están debidamente dispuestos con centro común. Bien. Pero si vas a notar aquí, la brecha entre cada elemento es inconsistente. Bien. Bien. Entonces para arreglar esto, lo que tenemos que hacer, aquí veremos cada vez que seleccionarás todos los elementos, aquí verás este ícono, rienda. Lo que indica igual está pasando entre todos los elementos. Bien. Así que siempre que hagas clic en reline, la brecha entre todos los elementos se vuelve consistente Bien, puedes cambiarlo fácilmente desde aquí. Bien. También, Bien. Entonces así es como se puede hacer centro común. Bien. Ahora vamos a crear un botón. Entonces, antes que nada, vamos a crear un rectángulo. Ahora usemos texto. Descargar. Ahora bien, este es nuestro texto de botón. Aumentemos el tamaño del botón. Ahora lo que vamos a hacer, vamos a fusionar ambos elementos. Entonces, en lugar de hacerlo manualmente, en lugar de hacerlo manualmente, también puedes hacerlo así. Seleccione el elemento. Ahora, en primer lugar, tenemos que hacer un centro vertical. Después de eso, tenemos que seleccionar un centro horizontal. Lo arreglará automáticamente. Bien. De igual manera, si tenemos que crear una pestaña home de cualquier web, entonces vamos a crear características de home, contacto sobre esto no es más que un texto. Esto no es más que un texto. Y aquí tenemos un rectángulo. Bien, entonces tenemos que fusionarlos. Bien. Entonces, en lugar de hacer todo manualmente, justo lo que haremos. En primer lugar, seleccionaremos todo el texto, alinearlos en centro común. Bien. Ahora vamos a hacer clic en re igual línea o igual espaciado. Bien. Ahora los seleccionaremos todos dentro de este rectángulo. Seleccionaremos todo. Nuevamente, haremos click en alinear centro vertical. Bien. Ahora puedes ver que los hemos alineado correctamente, así no tienes que hacer trabajo manual si sabes usar la alineación. ¿Bien? Para un ejemplo, has creado rectángulo, has creado círculo. Bien. Has creado otro rectángulo. Digamos de color rojo. Bien. Entonces ahora lo que puedes hacer puedes seleccionar tanto el elemento, hacer centro común, Bien, haz así. Hacer centro común. Seleccione todos los elementos que hacen centro común. Bien. Entonces así es como puedes crear cualquier cosa. Así es como se puede jugar con la alineación. Bien. Entonces, si te gusta esta conferencia, entonces no olvides darme una buena calificación positiva. Adiós. 6. Qué es el esquema de página, la maqueta y el prototipo: Hola a todos. Así que bienvenidos a todos ustedes en mi serie maestra completa sobre Pigma UIUX Design En esta conferencia en particular, te enseñaré qué es la maqueta de wireframe, y Entonces sin perder el tiempo, comencemos nuestro. Bien. Entonces aquí verás preimagen, primera, segunda y tercera Bien, entonces el primero es alambre de estructura alámbrica. Marco. Entonces wireframe es un diagrama aproximado de tu aplicación o sitio web. ¿Bien? Sea lo que sea que vayas a crear, tienes que crear un diagrama rugoso de tu app. ¿Bien? Bien. Al tratarse de un diagrama aproximado, por eso no es necesario medir nada. Incluso puedes crearlo con la ayuda de lápiz y papel. Básicamente, tienes que transmitir tu idea con la ayuda de diagrama áspero. Bien. Entonces, siempre que crees wireframe, tus otros compañeros de equipo pueden entender tu idea muy fácilmente Bien. Con la ayuda de wireframe, puede compartir su idea con las partes interesadas, CEO Bien. Entonces se puede decir que la estructura alámbrica es fase inicial en el diseño. Ahora aprendamos qué es la maqueta Mk up. Así que la maqueta es una mejor representación de tu app. Bien. Se puede decir que esta es una versión avanzada de wireframe Entonces este es un ejemplo de maqueta. Esta es una versión realista de tu aplicación, y en realidad se ve mejor que el wireframe Wireframe era el diagrama básico de tu app. Por otro lado, la maqueta es una versión más realista de tu app Bien. Y también aquí nos verson de nuestra app Bien. Esta es la primera, esta es la segunda. Entonces la principal diferencia es que esto es un mal diseño. Este es un diseño de gama alta. Bien, entonces por qué se ve pobre y por qué se ve más realista por fidelidad. Aquí veremos término de Fdlity. Entonces esto es baja fidelidad. Y este diseño es de alta fidelidad. Entonces fidelidad significa realismo. Si tu diseño está más inclinado hacia el realismo, entonces dirás alta fidelidad. Si tu diseño es menos realista, entonces dirás baja fidelidad. Entonces este es otro ejemplo de baja fidelidad y alta fidelidad. Se ve más realista. Por eso podemos decir que esto es de alta fidelidad, maqueta. Esto es baja fidelidad, maqueta. Ahora, por fin, tenemos una última etapa que es la creación de prototipos, el proto tipado Prototipado o prototipo. Donde jugarás todo tu diseño. Donde jugarás todo tu diseño. Así que juguemos con cualquier diseño. Entonces en etapa de prototipo, básicamente lo que harás, conectarás muchas páginas, así. Bien. Supongamos que si voy a hacer clic en chatear con Colin, entonces debería aparecer esta página Si voy a hacer clic en Embajador, entonces esto debería aparecer. Bien, para que puedas asignar la relación entre todas las páginas. Este es un proceso de toma de tiempo. Bien. Bien. Para que también puedas tocar tu prototipo. Así que vamos a jugar, y ya se está cargando. Bien, chicos, entonces en la etapa de Prototipo, realidad puedes reproducir tu sitio web en tiempo real. Así que vamos a hacer clic en con Colin. Ahora verás aparecer nueva página. Hagamos clic en Crear cuenta, ir a registrarte, Verificar OTP, haz clic en Ver perfil de Colin Bien, agendemos el horario de la reunión, vamos al planificador. Bien. Entonces aquí notarás que me estoy moviendo en toda la página con la ayuda de un solo clic, esto es un prototipo. Así que he cubierto todo, wireframe, mockup y Así que cada vez que vas a crear cualquier proyecto. Primero hay que crear una estructura alámbrica, que es un diagrama aproximado Y después de eso, tienes que crear una versión más realista de tu diseño básico en software. Y después de eso, tienes crear más páginas y tienes que vincular todas las páginas juntas para que puedas ejecutarlas en tiempo real. Bien, entonces si disfrutaste de esta conferencia, entonces no olvides darme un buen elemento de calificación positiva para que pueda motivarme. Bien. Adiós. 7. ¿Qué es un componente en Figma? Cómo crearlo: Diablos Hola a todos. Así que bienvenidos a todos ustedes en mi serie maestra completa sobre el diseño Pigma UIUX Entonces en esta conferencia particular, aprenderemos que lo que es componente y cómo podemos crearlo. Bien, entonces antes que nada, hablemos de su definición. Así que los componentes Pigma son elementos de interfaz de usuario reutilizables, como icono de botón, y barras Avigan lo que significa que creará su componente por una vez, y siempre que tenga que usarlo, simplemente lo arrastrará en su diseño Bien. Supongamos que este es un proyecto real. Este es un proyecto real. Y aquí se puede ver que he usado el mismo botón varias veces. He usado el mismo botón varias veces. Entonces, siempre que estés creando algún diseño, así que crearás cada botón desde el principio cada vez, no harás eso. En lugar de eso, lo que harás, crearás tu botón. Crearás tu botón por una sola vez. Y después de eso, siempre que sea necesario usarlo, simplemente lo arrastrarás. Bien, entonces esto se llama componente. Entonces componente es un elemento reutilizable. ¿Qué es reutilizable? Porque lo estás creando por una sola vez y puedes usarlo para siempre. ¿Bien? Entonces botón es un buen ejemplo de componente. Este es un componente. Así que puedo usar este botón muchas veces en mi diseño. Entonces si tengo que usarlo en 50 páginas diferentes, puedo usarlo fácilmente porque es un componente. Esto es una belleza. Bien. Ahora aquí, hay que entender una cosa. Qué es componente y qué es instancia. Bien, entonces entenderás esta cosa. Bien. Pero antes de eso. Pero antes de eso, vamos a crear un componente. Bien, sigue básico Bien. Ahora voy a crear un componente. En primer lugar, tomemos un rectángulo. Vamos a crear. Se puede dar radio de esquina, se puede sentir el color. Ahora puedes agregar botón de texto, aumentar el tamaño. Ahora, en el lado izquierdo, verás dos capas diferentes. La primera capa es para texto, segunda capa es para rectángulo. ¿Bien? Ahora, lo que vamos a hacer, vamos a fusionar tanto el elemento. Entonces, antes que nada, seleccionemos el elemento después del clic derecho sobre él. Y aquí verás botón de crear componente. Por lo que hay que hacer clic en Crear componente. Bien. Ahora aquí puedes ver que tenemos un nuevo icono como este. Este es un icono de componente. Este es un icono de componente. Siempre que vayas a crear un componente, su icono aparecería así. ¿Bien? Así que puedo usar este componente muchas veces en mi diseño. Bien. Entonces tomemos un marco. Tomemos un marco. Bien. Y supongamos que tengo que usar este botón aquí. Bien. Entonces muchos de ustedes pensaremos en eso. Podemos copiar, podemos copiar, y podemos pasarlo aquí así. Pero este es un método equivocado. No tienes que hacer eso. En lugar de eso, ¿qué tienes que hacer? Siempre que tengas que usar componente, tienes que ir al sexon activo Tienes que ir al sexón activo. No tiene que copiar esto. No tiene que copiar esto. Tienes que ir al sexton activo de tu Figma. Entonces, cuando vayas a los activos, aquí verás toda la biblioteca. Aquí podrás ver toda la biblioteca. Tienes que hacer click en él. Y aquí podrás ver todos los componentes que has creado recientemente. Entonces este es mi componente. Entonces, ¿qué tengo que hacer? Voy a hacer click en él. Y aquí verás instancia de recuadro Ahora escucharás una instancia de término. Así que vamos a hacer clic en Instancia. Bien. Bien. Ahora, hay que escuchar con mucha atención. Esto se llama componente padre. Esto se llama componente padre. Y a esto se le llama instancia. Se puede decir hijo padre hijo, padre hijo, padre hijo. Bien. Entonces, sea cual sea el cambio que hagas en el componente padre, su reflexión aparecerá en instancia, ¿de acuerdo? Bien. Cualquiera que sea el cambio que aplique en el componente padre, su efecto se aplicará automáticamente en el componente hijo, que es instancia. Bien. Entonces este es mi componente padre, así que vamos a seleccionar este. Bien. Supongamos que le estoy cambiando de color. Se puede ver eso. Sea cual sea el color que voy a aplicar en el componente padre, El mismo color se aplicará en niño también. Sea lo que sea que haga aquí, es reflexión aparecerá aquí también ¿Por qué tienes alguna razón por la que está sucediendo? Porque este es componente padre, padre, padre, padre. Y este es componente hijo. En figma, en vez de llamar a un niño, podemos decir instancia Esto es instancia. Bien. Entonces, sea cual sea el cambio que aplique en el componente padre, también se aplicará en instancia o hijo. Bien. Pero si vas a hacer algún cambio en niño, entonces su reflexión no aparecerá en el padre Este es un concepto principal. Hay que pensar en eso. Cualquiera que sea el cambio que hagas en parent, su efecto también se aplicará en child. Pero sea cual sea el cambio que hagas en el niño, su reflexión no aparecerá en el padre Bien. Bien, bien. Entonces ahora saltemos al tema del departamento. Mm. Entonces aquí verás. Este es un componente principal. Este es un componente principal. Se puede decir padre. Componente padre también llamado componente principal. Componente principal. Y con la ayuda del componente padre, creará múltiples hijos. Con la ayuda de los padres, crearás múltiples hijos. Y en vez de llamarlo niño, se puede decir que es instancia. Bien. Entonces, antes que nada, aclaremos cada cosa. Bien. Supongamos que ha creado un componente. Supongamos que ha creado un componente. Entonces, sea cual sea el componente que hayas creado, lo llamarás componente principal. Así que cada vez que vas a crear algún componente, dirás que es componente principal. Componente principal también llamado componente padre porque este es uno básico. Y siempre que uses este componente principal en tu marco, siempre que lo uses. Entonces puedes llamarlo instancia. Bien. Se le puede llamar niño. Bien. Ahora, la parte más hermosa del tirón es. Cualquiera que sea el cambio que aplique en componente principal. Es la reflexión aparecerá aquí también. Bien. Pero sea cual sea el cambio que aplique en instancia, su efecto no aparecerá en el componente principal. Esto es algo principal que hay que aprender. Bien. Bien, bien. Uh Bien. Entonces, eliminemos todo. Y este es un componente que hemos creado recientemente. Así que siempre que vayas a crear algún componente, puedes llamarlo. Este es un componente principal. Este es un componente principal. Se puede decir padre. Se puede decir componente principal o padre, ambas cosas son iguales. Y siempre que tengas que usarlo en tu marco, entonces tienes que ir a asset sexan Bien. Así que vamos a crear un marco A. Vamos a crear cualquier marco. Ahora bien, si tienes que usar este componente en este marco, entonces irás a asset Sexan y dentro asset verás biblioteca y dentro de la biblioteca, verás tu botón Entonces, si va a hacer clic en él, entonces obtendrá componente hijo o componente padre. Obtendrás componente hijo. Bien. Y puedes crear múltiples versiones de tu componente hijo. Bien. Entonces supongamos que lo estamos usando demasiadas veces. Bien. De igual manera, podríamos tener 50 páginas diferentes donde he usado este botón varias veces. Bien. Bien. Vamos a crear múltiples marcos. Supongamos que tengo múltiples frame, donde he usado este botón. Bien. Supongamos que tengo que cambiar el color del botón en toda la página, entonces ¿cómo puedo hacerlo? Simplemente voy a seguir componente principal. Simplemente voy a seguir componente principal. Y sea cual sea el cambio que voy a hacer aquí, es reflexión aparecerá aquí, aquí. Bien. Entonces, en lugar de cambiar el color de cada botón individualmente, obviamente, este fue el proceso de toma de tiempo. En lugar de hacer este método, lo que vamos a hacer, simplemente vamos a ir en componente principal. Este es el componente principal. Yo estos son componentes hijos. Y sea cual sea el cambio que voy a hacer aquí, es la reflexión que aparecerá aquí también. Entonces cambiemos el color del texto. Cambiemos el color del texto. Eso se puede ver. Apliquemos trazo, aumentemos el grosor. Cambiemos el botón de color. Bien. Entonces así es como puedes aplicar componente. Vea la principal ventaja del componente es que no tiene que crear cada botón cada vez. Crearás cualquier componente por una vez y podrás usarlo siempre que tengas que usarlo. Entonces este es un proceso de ahorro de tiempo. Bien. Supongamos que si tienes un sitio web como este donde has creado 50 páginas diferentes. Supongamos que tu senior te pide que cambies el color de todos los botones. Entonces si vas a ir de manera manual, entonces tardará todo el día en cambiar el color. Mira, si vas a cambiar el color de cada botón individualmente, entonces tomará mucho tiempo, tal vez un día o dos días. Bien. Pero si has creado componente, bien, entonces ¿qué vas a hacer? Irás a su componente padre. Bien. Este es un componente hijo. Este es un componente hijo. Obviamente, deberíamos tener un componente principal. Deberíamos tener un componente principal. Entonces tenemos que ir en componente principal y cualquier cambio que sea lo haremos aquí, no importa lo que estemos cambiando de color, texto, tamaño. Cualquiera que sea el cambio que hagas en componente principal, su reflexión aparecerá en todo el diseño, sin importar lo que hayas usado este botón en 50 páginas o 100 páginas. En esta pequeña cantidad de esfuerzo, se puede cambiar la propiedad de botón en todas las páginas. ¿Bien? Esta es la belleza del componente. Y si no vas a crear componente, entonces para una tarea muy sencilla, tienes que hacer cada proceso manualmente. Si no vas a crear componente, entonces te voy a pedir que cambies el color del botón, entonces qué harás, irás aquí, entonces cambiarás el color y simplemente aplicarás lo mismo en todo el diseño. Este es un proceso de toma de tiempo. Bien. Entonces, en lugar de hacer eso, solo crea un componente, continúa activo y usa cualquier componente que quieras usar. Bien. Y con la ayuda de componentes, puedes editar todo tu diseño con unos pocos clics. Bien. Entonces espero que hayan disfrutado de esta conferencia. Entonces si tienes alguna ayuda por parte del estudio, entonces puedes darme una buena calificación positiva y comentar. 8. Variables en Figma: Hola a todos. Así que bienvenidos a todos ustedes en mi serie maestra completa sobre el diseño Figma UIUX Entonces en esta conferencia en particular, aprenderemos que lo que es variable en Figma y cómo podemos crearlo muy fácilmente En una conferencia anterior, ya hemos cubierto que lo que es componente. Entonces componente era un elemento reutilizable como botón. ¿Por qué es reutilizable? Porque vamos a invertir nuestro tiempo y esfuerzo solo por una vez y después de eso, siempre que sea necesario usarlo, podemos fácilmente soltar dragón. Por eso se le llama elemento reutilizable. ¿Bien? Entonces botón es un mejor ejemplo. Button es un mejor ejemplo de componente, por lo que ese es componente. Pero, ¿qué será variable? Si voy a crear diferente variación de este botón. Verás, este es mi componente. Este es mi componente. Si voy a crear, es diferente variación en base al color del texto, forma y tamaño. Bien. Si voy a crear diferente variación de este botón, eso se llama variable. Bien, creo que entendiste mi punto. Entonces ahora vamos a entender cómo podemos crearlo muy fácilmente. Entonces antes que nada, tienes que ir en blanco y era y tienes que hacer una maraña dar radio de esquina, color pal, y agregar un efecto de trazo Ahora, agreguemos un botón de texto, botón. Bien. Bien, bien. Así que aún no he creado componente. Texto texto y botón, ambos están separados aquí. ¿Bien? No lo he convertido en el componente. Bien. En primer lugar, lo que voy a hacer, voy a crear su diferente variación. Entonces seleccionaré tanto la capa correctamente, y después de eso, haré duplicado. Entonces, con la ayuda del botón antiguo, puedes copiar fácilmente el botón. Bien. Ahora, tengo que crear una variación diferente. Tenemos que crear una variación diferente. Entonces digamos que si tengo un color rojo oscuro, entonces otras variaciones serían de color rojo claro. Bien. Entonces este es mi segundo botón. Hagámoslo ligero. Bien. Del mismo modo, cambiemos el color del botón a verde. ¿Bien? Y voy a copiar el mismo código de color en el Fest aquí. Ahora hagamos una versión más ligera de la misma. Creo que estás entendiendo mi punto. En realidad, lo que estoy haciendo, estoy creando botón primario. Este es mi botón principal. Y aquí estoy creando mi botón secundario. Por lo tanto, el botón secundario se denota por el color claro. El botón principal se denota por objetivo. Bien. Se puede crear una variación diferente sobre la base de texto diferente, diferente forma, diferente tamaño. Bien. Entonces aquí estoy creando diferente variación de componente sobre la base únicamente del color. Bien, aquí estoy creando aquí estoy creando varion aquí estoy creando variación en base al color Bien. Puede crear una variación diferente de componente sobre la base del tamaño, la forma también. Bien. Vamos aquí, selecciónelo. Pon color azul, pon color azul, copia su código de color y pegarlo en el segundo. Y hazlo ligero. Que sea ligero. Bien. Entonces actualmente, tenemos un verson más oscuro, persona más oscura y un verson más claro, ahora tenemos que convertir cada elemento en el Bien. Ahora, aquí hay que prestar atención. En primer lugar, cubriremos botón y texto así. Después de eso, crearemos componente. Bien. Así que siempre que conviertas dos elementos en el único componente, verás este icono aquí. ¿Bien? Ahora vamos a seleccionar botón y texto del segundo elemento. Ahora en la sección de la izquierda, se puede ver que el elemento de texto ha sido seleccionado. Y rectángulo han sido seleccionados correctamente. Bien. Entonces, sea cual sea el elemento que estés seleccionando, tienes que verificar que estás seleccionando la capa correcta. De lo contrario, puede equivocarse. Bien. Así que siempre que selecciones algún elemento, tienes que verificar desde el panel lateral izquierdo. Estás seleccionando el elemento adecuado o no. ¿Bien? Así que vamos a convertir tanto el elemento en el componente. Algo similar tenemos que hacer aquí, leer componente. Crear componente. Crear Crear componente. Bien. Ahora se puede ver que tenemos un componente de seis diferentes. Tenemos un seis componentes diferentes aquí. Ahora tenemos que cambiarles el nombre de manera inteligente, bien. Entonces hay que seguir cualquier secuencia mientras se cambia el nombre. Bien. Entonces para un ejemplo, este es mi componente uno, este es mi componente uno. Entonces haré doble clic sobre el texto, y ahora puedo cambiarle el nombre. Pero antes de renombrar, hay que entender que es lo fundamental del cambio de nombre Entonces ahora te voy a enseñar eso como tienes que renombrar tu comput Bien. Entonces debería ser como botón. Tienes que prestar atención aquí, ¿de acuerdo? Botón de botón, barra diagonal. Botón mm, barra, rojo, barra diagonal activa Bien, entonces tienes que renombrar así. Bien. Entonces ahora vamos a entender qué es esto. Así que slash significa carpeta. Siempre que use slash, Pigma predecirá que es una propiedad diferente Bien. Entonces slash es una carpeta Slash es una carpeta. Entonces, en primer lugar, hay que escribir botón. En segundo lugar, hay que escribir color. En el tercer lugar, hay que escribir estado activo o inactivo. Bien, entonces vamos a explorarlo muy prácticamente para que lo entiendas muy fácilmente. Bien, entonces tenemos que seguir el mismo orden. Tenemos que seguir el mismo orden. Botón, luego rojo, que es color, y después de eso, estado, activo o inactivo. Bien, entonces tenemos que seguir la misma secuencia. Bien. Entonces, antes que nada, cambiemos el nombre de este componente uno. Bien. Ahora vamos a escribir. Vamos a escribir botón. Activo. Bien, porque esto es un activista. Bien. De igual manera, tengo que copiar esto, y voy a ir en segundo botón y su nombre debe ser botón, rojo e inactivo porque color claro significa inactivista lo Bien. También puede escribir deshabilitar o habilitar. También puedes escribir encendido o apagado en lugar de activo o inactivo. No es necesario que tengas que usar texto activo o inactivo. En lugar de activo o inactivo, en lugar de activo o inactivo, lo que puedes hacer, puedes usar off puedes usar enable. Puedes usar deshabilitar así que aquí estás libre. Puedes usar cualquier cosa. Pero sea cual sea la secuencia que asignaste en primer botón, tienes que seguir la misma secuencia en todo el botón. De lo contrario, no va a funcionar. ¿Bien? Ni siquiera tienes que cometer un error ortográfico. ¿Bien? No tienes que cometer un error ortográfico. De lo contrario, se asegurará de que uh debe ser consistente. Entonces aquí puedes ver ese botón. Rojo Activo. Bien. Y aquí verás botón, barra roja inactiva. Bien. Bien. Lo mismo tienes que hacer con otros botones como si voy a ir al componente tres, entonces tengo que renombrar botón, luego verde, luego activo. Bien, bien. Vamos a copiar, lo mismo. Ir al componente cuatro, renombrarlo como botón, botón verde, botón, verde, e inactivista inactivo Lo mismo que tienes que ver con el componente cinco Botón, azul y activo. Copia el mismo texto y pegarlo en el componente seis. Botón, azul e inactivo. Bien. Entonces he creado he creado seis componentes diferentes con un cambio de nombre adecuado Bien. Ahora bien, si lo has hecho muy correctamente, entonces ¿qué pasará? Tienes que seleccionar todo el componente, y si lo has realizado muy bien, entonces verás a Opson como, entonces verás a Opson Combine como variante. Combine como variante. Bien. Por lo que hay que hacer clic en Combinar como variante. Bien. Haga clic en combinar como variante. Ahora, todos los componentes se convierten en el único componente grande. Bien. Ahora, aquí tenemos una mejor parte. Propiedad una propiedad dos. Entonces, si has hecho toda la actividad correctamente, entonces finalmente obtendremos la propiedad uno, propiedad uno y la propiedad dos. ¿Has recordado que hemos agregado el icono de barra al cambiar el nombre Bien. Entonces fue por propiedad. Entonces primera propiedad significa color. Segundo inmueble significa activo o inactivo. Bien. Entonces ahora, la cosa es suponer que tengo que usar componente. Bien. Este es un nuevo marco donde tengo que usar un componente que he creado recientemente. Entonces en primer lugar, voy a seguir sexon activo. En primer lugar, voy a seguir sexon activo. Así que vamos a seguir activo. Dentro de activo, aquí voy a ver aquí voy a ver todos los componentes que he creado recientemente. Entonces este es un componente. Vamos a darle un click sobre él. Instancia interior. Bien. Entonces este es un botón que he creado recientemente. Bien. Pero la parte beautyul estaba aquí estoy consiguiendo la propiedad uno y la propiedad Bien. Entonces propiedad uno significa color, así puedo cambiar al cualquier color verde, azul. Bien. Y supongamos que tengo que conseguir una versión más clara de color azul. Entonces voy a ir en color azul, y en propiedad dos, voy a seguir en activista. Bien. Así que cada vez que va a utilizar el icono de barra diagonal en el cambio de nombre Bien, se convertirá en la propiedad. Bien, suponga que está renombrando su botón como botón, botón, botón barra diagonal, rojo, barra diagonal Luz. Bien. Entonces, ¿qué va a pasar? Esta sería su primera propiedad y esta sería su segunda propiedad. Entonces, siempre que uses el ícono de barra diagonal, lo considerará como si fuera una propiedad diferente Entonces aquí lo que hemos hecho en realidad, hemos renombrado este botón me gusta Color, activo. Bien. Entonces, en lugar de activo o inactivo, puedes usar palabras como habilitar o deshabilitar on o de bien, claro u oscuro. Para que puedas usar cualquier cosa. Bien. En lugar de botón, puedes escribir cualquier cosa. En lugar de botón, puede escribir tarjeta de componente. Puedes escribir cualquier cosa. Entonces esta era nuestra secuencia, botón, color y activo. Entonces aquí lo que está sucediendo en realidad. El color es una primera propiedad y el estado activo o inactivo es la segunda propiedad. Entonces, en el lado derecho de la pantalla, verás ambas cosas. Supongamos que si ha creado un conjunto de componentes en los que ha asignado múltiples propiedades, entonces aquí verá múltiples propiedades sol. Ya que hemos dividido en las dos partes solamente, color y estado activo o inactivo, es por eso que aquí tenemos una propiedad uno y propiedad dos. Y si vas a crear tu botón como este botón botón barra tamaño diferente tamaño, diferente texto Bien. Entonces, ¿qué va a pasar? Dentro de la carpeta de botones, obtendrá la primera propiedad sobre el modo más oscuro o el modo más claro. Segunda propiedad sobre el diferente tamaño. Tercera propiedad sobre el texto diferente. Bien. Entonces esta es una belleza de variación. Ahora puedo usar cualquier variación como esta. Bien, bien. Entonces esto fue una varión. Del mismo modo, puede crear variaciones para diferentes conjuntos. Como, para un ejemplo, um, si quieres crear cuatro diferentes sol de este botón rojo, como 100% rojo, y cien por ciento rojo, 80% rojo. 60% d En realidad, estoy hablando los diferentes conjuntos de botones particulares. Bien. Para que puedas hacerlo fácilmente con la ayuda de variables. Entonces espero que hayan disfrutado de esta conferencia. Y si tienes alguna ayuda por parte del estudio, entonces puedes darme una buena calificación positiva. Bien. Y si quieres aprender Figma personalmente conmigo, clase uno a uno en vivo, entonces lo que puedas hacer, puedes contactarme en, Instagram, UX a través de un profesor señor UX. Para que podamos discutir todo uno a uno sobre Figma. Si estás interesado en aprender, entonces puedes contactarme. Bien. Entonces espero que hayan disfrutado de esta conferencia. Hola, Bob. 9. ¿Qué es el sistema de diseño?: Hola a todos. Así que bienvenidos a todos ustedes en mi serie maestra completa sobre el diseño Figma UIUX Entonces en esta conferencia en particular, aprenderemos que qué es sistema de diseño y cómo se puede utilizar en Figma. Bien. Entonces, sin perder el tiempo, saltemos a la definición principal. ¿Bien? Esta es una definición. Sistema de diseño son una colección integral de componentes reutilizables. Bien. Es un componente reutilizable. Es una colección de componentes reutilizables. Entonces en conferencias anteriores, ya cubrí que lo que es componente, cómo se puede usar, cuál es la importancia del componente. Lo he cubierto todo en conferencias anteriores. Entonces, con la ayuda de la definición del sistema de diseño, se puede entender una cosa, que es componente también es parte del sistema de diseño. Si círculo grande es sistema de diseño, Entonces círculo pequeño es componente. El componente también forma parte del sistema de diseño, lo que significa que el botón que ha creado en conferencias anteriores también es parte del sistema de diseño. Bien. Y es un elemento reutilizable. Es un elemento reutilizable. Reutilizable. ¿Por qué? Porque invertirás tu esfuerzo y tiempo solo por primera vez. Y después de eso, siempre que se requiera su uso, puede arrastrar fácilmente cualquier elemento o componente. No tienes que crearlo varias veces. No hay que crearlo desde el principio. Simplemente, puede crear una colección de elementos reutilizables y siempre que se requiera, puede arrastrar y soltar fácilmente. Bien. Entonces este es un sistema de diseño. ¿Bien? Entonces, ¿por qué el sistema de diseño es importante? El sistema de diseño es importante para la consistencia. Supongamos que si tienes una marca, supongamos por ejemplo, este es un sitio web. Ahora, te estoy preguntando ¿cuál es el color de la marca? Cuál es el color primario del sitio web ¿Cuál es la identidad de marca? Entonces dirás, estos color azul es identidad de marca. Eso dirás tú. Este color azul es identidad de marca. Bien. Si te pregunto cuál es el color primario de Instagram, entonces dirás que es un poco como el rosa color rosa y si te preguntaré cuál es el color primario de YouTube, entonces dirás rojo y negro. ¿Bien? Si te preguntaré cuál es el color primario weiter Entonces dirás azul y blanco. Bien. Entonces, con la ayuda del color, puedes hacer un diseño consistente. ¿Bien? Entonces, para una consistencia adecuada, usaremos sistema de diseño. ¿Bien? Así que creamos un sistema de diseño sobre la base del color, texto, tamaño, diseño, pauta y componente. Bien. Y como ya les he dicho ese sistema de diseño es lo más importante para el branding. ¿Bien? Porque cada marca tiene su propio color único llamado color de marca. Bien. Entonces, para una marca adecuada, debemos usar el sistema de diseño en todo el diseño. Bien. Si vas a ver este sitio web, entonces verás este color azul en toda la página. En toda la página, verás el mismo color. Bien. Con la ayuda de este color, estamos manteniendo la consistencia, y la consistencia es lo más importante al crear UIUX ¿Bien? Este es un principio básico de UIUX La consistencia es clave. Bien. Design System es una plantilla predefinida, temp predefinida donde la hayas creado por una vez, puedes usarla siempre que sea necesario usarla. Bien. Bien, bien. Ahora surge la pregunta ¿por qué diseñar el sistema tan importante? Supongamos que soy un CO, CEO de una empresa. Supongamos que soy CEO de una empresa y asigné tarea a mis empleados que tienes que crear diseño de aplicaciones hoteleras. Tienes que crear una app para hotel. Bien. Después asigné tarea a múltiples diseñadores de UIUX. Bien. Entonces supongamos que le asigné a Mm Ella es Katy, supongo Ella es Katie. Bien. Así que le asigné trabajo Katie que tiene que crear la página de inicio de sesión. De igual manera, le asigné una tarea a Rahul que tienes que crear Inicio es pantalla Bien, entonces contraté a dos diseñadores de UIUX diferentes y ambos diseñadores están trabajando en el mismo proyecto Tanto los diseñadores están trabajando en un mismo proyecto. Bien. Entonces Katty creó esta página de inicio de sesión. Bien. Y Rahul creó esta Pero si vas a notar que no hay consistencia. En cuanto a color, icono, tipografía, no hay consistencia Entonces, cómo se relacionará tanto el diseño con un mismo proyecto, cómo se relacionará con un mismo proyecto. Si no vas a mantener la consistencia en base al color, texto, iconografía, entonces sea cual sea la página que vayas a crear, toda la página se verá diferente a la anterior Bien. Este es un proceso equivocado. Es por eso que aquí vamos a utilizar el sistema de diseño para una consistencia adecuada. Bien. Entonces así es como se ve el sistema de diseño. Crearás un conjunto de texto en diferentes tamaños. Yo crearás un color que usarás comúnmente en tu diseño. Bien. Crearás un patrón así. Bien. Entonces así es como se ve el sistema de diseño. Ahora, sin perder tiempo, vamos a crear un sistema de diseño. Entonces, antes que nada, tomemos un marco. Bien. Entonces, antes que nada, vamos a crear un sistema de diseño para el color. Lo que voy a hacer, voy a crear un rectángulo así. Voy a hacer una copia. Bien. Entonces entremos en el color. Verde oscuro. Bien, entonces vamos a escribir color negro. Vamos a copiar el mismo color. Copia el mismo color, pegarlo en el segundo. Hazlo un poco más un poco más brillante. Hazlo un poco brillante. Bien. Ahora voy a copiar el mismo código. Pégalo aquí. Reducir la transparencia. Así que he creado múltiples conjuntos aquí. ¿Bien? Entonces así es como puedes crear un sistema de diseño. Este es mi color primario. Supongamos que este es mi color primario. Bien. Del mismo modo, puedo crear color secundario. Bien. Pelemos otro color rojo. Y copiemos su código de color. Bien. Así que he creado múltiples conjuntos de rojo. Bien. Entonces este es mi color primario, este es mi secundario. Bien. Entonces te he explicado cómo puedes renombrar tu componente en conferencias anteriores. De igual manera, hay que hacerlo el mismo proceso aquí. Bien. Entonces, antes que nada, hagamos clic en F uno. Bien. Y aquí verás cuatro puntos. Aplica estilo y variables, da clic en él y haz clic en el botón Más. Bien. Ahora, puedes hacer renombrar como ya lo hemos realizado en la conferencia de componentes. Bien. Entonces, vamos a escribir uno. Vamos a teclear Black one. Bien. Entonces escribo aquí Black slash one Entonces cada vez que voy a usar esta barra, se dividirá en la carpeta. Bien. Entonces de manera similar, voy a hacer renombrar como Negro, uno , negro, dos, negro, tres, negro, cuatro. Entonces, si no voy a usar el icono de barra entre X y número, entonces ¿qué pasará? Todo el color será visible individualmente. Pero si voy a agregar slash key así , entonces ¿qué va a pasar Voy a conseguir Negro y por dentro negro, voy a conseguir todos los variesens Entonces esto sería muy sistemático. Así que no te preocupes por eso si no lo entiendes. Te voy a mostrar prácticamente. Bien. Entonces, antes que nada, vamos a renombrar el primer botón, el Negro. He renombrado esto Bien. Haga clic en Estilo Creativo. Así que el primer estilo se ha creado con éxito, puedes ver aquí. Bien. Ahora, haga clic en el segundo botón, vaya a cuatro puntos. Haga clic en el botón Más. Nuevo Estilo en variable, y pegar nombre falta barra dos Estilo creativo. Bien. Ahora vamos a la tercera. Botón Agregar Plus. Falta barra tres. Ir en cuatro puntos más x cuatro. Bien. Bien. De igual manera, hay que hacer cuatro de color rojo, también. Bien, así que haga clic en el color rojo, vaya en el icono de cuatro. Bien. Y mira, ya he creado uno rojo, rojo, dos, rojo tres. Bien. Entonces antes que nada, vamos a las botón. Rojo uno. Rojo menos uno. Punto F más icono, rojo dos, crear estilo. Rojo tres. Tarifas menos cuatro. Bien. Ahora, supongamos que hay que usar este color. Bien. Entonces, ¿qué vas a hacer? Supongamos que he creado este marco y dentro de este marco, he creado un círculo. Bien. Entonces supongamos que tengo que aplicar este color. Bien. Entonces no voy a usar píldora. No voy a usar la opción de relleno para sentir el color. Esto está mal. Así que cada vez que vas a crear sistema de diseño, tienes que poner color así. En primer lugar, seleccionarás aquellos objetos en los que tienes que sentir el color, yo seleccioné el círculo. Ahora voy a ir en cuatro puntos, y aquí verán aquí verán lo que hayan creado. Punto. Aquí podrás ver el orden sistemático. Como ya te dije eso, estoy renombrando así Rojo uno, rojo más dos, rojo, más tres. Entonces parecerá que hay una carpeta, roja, y dentro roja, uno, dos, tres. De igual manera para el negro, me pondré negro, uno, dos, tres. Este es un proceso sistemático. Entonces supongamos que tengo que rellenar color sobre círculo rojo. Entonces voy a dar clic en círculo y seguir aplicando estilo y variables. Desplácese hacia abajo. Y aquí verás carpeta negra, carpeta roja. Bien, entonces pongamos un dos negro. Entonces así es como puedes sentirte. Y si quieres eliminarlo, así puedes eliminarlo desde el aquí. Bien. Supongamos que he creado otro círculo aquí. Tengo que sentir color en este círculo, así voy a ir en cuatro puntos Supongamos que tengo que rellenar el color rojo, también. Entonces esta es una carpeta principal, roja, y dentro roja, tenemos una uno, dos, tres, cuatro. Bien. Entonces, siempre que uses el icono de barra diagonal en tu cambio de nombre, lo dividirá como una propiedad Entonces así es como puedes usarlo. Bien. En vez de eso, ¿qué puedes hacer? Puedes hacer renombrar así. Puedes hacer renombrar así. Primario falta una carencia primaria y así sucesivamente. Puedes hacer nombre así. Entonces, siempre que use esta tecla de barra diagonal, considerará como una propiedad de dos diferentes La primera propiedad es para negro y segundas propiedades para el número. Bien. Además, puedes hacer nombre así. Primaria primaria, Negro oscuro. Entonces puedes hacer renombrar así también. Bien, oscuro, más oscuro, más claro, ligero. Bien. Así que siempre que uses icon, slash key, la dividirá en la propiedad diferente Se puede hacer renombrar como colos primarios rojos, secundarios colos negros. Bien. Entonces eres libre de renombrar. Bien. Entonces solo tienes que pensar en eso sin importar qué tipo de secuencia estés usando, pero debería ser consistente en todo el sistema de diseño. Así que he creado sistema de diseño para colores. Bien. De igual manera, hay que usar sistema de diseño para texto, tipografía Bien, entonces vamos a expandir el marco. Bien. Ahora vamos a crear un sistema de diseño para texto. Entonces, antes que nada, vamos a escribir aquí rumbo. Encabezamiento. Bien. Entonces aquí puedes ver que actualmente, estilo quanti es pop ins, regular 36. Bien. Ahora puedes copiar esto y puedes reducirlo a los 32, luego copiar este 24. 20. Bien, o puedes escribir párrafo. Bien. Entonces esta es tu tipografía. Bien. Y en un solo diseño, no tienes que usar más de dos fontistyle diferentes Estoy diciendo que no tienes que usar más de dos funtistyle en cada En cada diseño, hay que utilizar como máximo dos tipos diferentes de font tist. En tu diseño único, no debe constar más de dos fuentes diferentes. Este es un diseño fundamental. Así que he creado cuatro tamaños diferentes. Bien. Además, se puede cambiar su grosor. ¿Bien? Así que he creado cuatro verson diferentes de manera muy aleatoria. Para que puedas asignar cómo puedes asignarlo. De nuevo, vas a ir en cuatro puntos. En primer lugar, seleccionemos ese texto, sigamos cuatro puntos y agreguemos más el estilo creativo del icono. Aquí puedes escribir cualquier cosa. Entonces digamos encabezando uno. Digamos que encabezar uno es nuestro primer texto. Después vamos a Etding dos. Añadiendo tres. Añadiendo cuatro. Entonces supongamos que tengo que usar esto. Bien, entonces he creado cuatro tipografías diferentes. Bien. Entonces supongamos que tengo que usarlo. Entonces voy a ir en este marco. Aquí, me llevaré kit. Bien. Ahora bien, si tengo que aplicar alguno de estos sistemas de diseño, entonces ¿cómo puedo? En primer lugar, voy a hacer doble clic en mi Nombre y después de eso, desde aquí, puedo elegir a cualquiera. Rúbrica uno, Rúbrica dos, Rúbrica tres, rúbrica cuatro, párrafo. Bien, entonces así es como puedes usar el sistema de diseño. Bien. Entonces, cuando crearás esto cuando crearás esto. Supongamos que está creando un sitio web así. Estás creando un sitio web así. Entonces lo que harás, primero crearás tu sistema de diseño para el color. Crearás un rectángulo o círculo. Esto es sólo para referencia. Bien. Y lo que harás, copiarás este color. Bien. Entonces este es mi sistema de diseño. Bien. Así que he creado sistema de diseño para este sitio web. Bien. Así que siempre que tenga que aplicar este color, simplemente voy a hacer clic en esos elementos y puedo rellenar color desde el aquí. Bien. Entonces este es un sistema de belleza de diseño. Algo similar se puede hacer con el texto. Entonces básicamente, se trata de una plantilla predefinida. Se trata de un templo predefinido. Aquí pueden ver que he usado este color en particular en todo el diseño, en todo el diseño. Por eso como referencia, creé un sistema de diseño, y para hacer consistencia, usaré el mismo color. Bien. Entonces así es como puedes crear tu propio sistema de diseño. Bien. Espero que hayan disfrutado de esta conferencia. Adiós. 10. Diseño automático en Figma (parte 1): Hola a todos. Así que bienvenidos a todos ustedes en mi serie Master completa sobre el diseño IGMAUIUX Entonces en esta conferencia en particular, aprenderemos que lo que es el diseño automático. Bien. Entonces, sin perder tiempo, comencemos nuestro video. Bien, entonces antes que nada, vamos a discutir sobre su definición. Bien, entonces el diseño automático es una característica de diseño que ajusta automáticamente un elemento dentro de un marco. Entonces hay un marco que consiste en mucha cantidad de elemento. Entonces, siempre que disminuya o aumente el tamaño del marco, los elementos que están dentro ese marco ajustarán automáticamente su posición. Bien, por un ejemplo, por un ejemplo, tomemos un proyecto práctico. Bien. Esto es un marco. Bien. Se trata de un marco, que consta de muchos elementos. Bien, entonces esto es un marco. Todo este cuerpo es un marco. Y dentro de ese marco, tenemos muchos elementos como este, esto, esto. Así marco constan de muchos elementos. Bien. Así que siempre que aumentes o disminuyas el tamaño del marco, su elemento ajustará automáticamente su posición. Por ejemplo, si estoy disminuyendo el ancho del fotograma, entonces puedes ver que la imagen está ajustando su tamaño automáticamente en base al ancho del fotograma. Entonces esto se llama autoyout. Entonces en autoout en autoaout tenemos un frame. Otoeut es una característica de diseño que se ajusta y alinea automáticamente con el elemento dentro de un marco Bien, entonces para un ejemplo, tomemos un contenedor. Tomemos un contenedor. Bien. Entonces este contenedor es un marco. Supongamos que este contenedor es un marco, y el contenedor consiste en agua. Consiste en agua. Se trata de un contenedor. Bien, entonces digamos que el contenedor es tu marco, y el agua es tu elemento. Bien. Así que imagina una cosa. Este es tu contenedor. Este es su contenedor, que consiste en agua. Bien. Entonces, ¿qué pasará si voy a aumentar el ancho del contenedor? ¿Qué va a pasar? Obviamente, si voy a aumentar el ancho del contenedor, entonces el agua se ajustará en todo el espacio. Bien, aquí he mencionado cuatro puntos de referencia, uno, dos, tres, cuatro, que no es más que un medio para mostrarte cómo funciona el layout automático. Bien. Entonces, si tienes espacio extra, obviamente, ocuparás eso. ¿Bien? Supongamos que viajas con tus cuatro amigos en autobús. Bien, suponga que viaja en autobús con cuatro amigos. Entonces supongamos que si tienes un asiento limitado, entonces te ajustarás en un lugar muy pequeño. Bien. Pero siempre que consigas espacio extra, ocuparás todo el espacio, ¿de acuerdo? Bien. Entonces este es un marco. Si voy a aumentar el ancho del marco, elemento se ajustará según el tamaño del marco. Bien. Tomemos otro ejemplo. Esto es un botón. Esto es un botón. Bien. Esto es un marco. Esto es un marco, y dentro de ese marco, tenemos un elemento, ¿verdad? Tenemos un marco, y dentro de ese marco, tenemos un elemento. Entonces ahora, qué pasará cuando aumente o disminuya el tamaño del marco, su elemento se autoajustará de acuerdo con el tamaño del cuadro. Bien. Ahora te darás cuenta de una cosa que está manteniendo su posición. Entonces, si voy a aumentar la altura de la fama, nuevamente, elemento está manteniendo su posición. Entonces esto se llama diseño automático. Así que el diseño automático es una de las mejores características de gma que permite al elemento ajustar su posición de acuerdo con el tamaño del marco. Siempre que el tamaño del marco cambie, su elemento cambiará automáticamente su posición. ¿Bien? Entonces, uh, siempre que tengamos que diseñar cualquier app. Bien, entonces no crearemos diseño separado para móvil, diseño separado para escritorio, diseño separado para tableta. ¿Bien? Como sabes eso, tenemos múltiples marcos. Si haces clic en el marco, entonces aquí verás. Contamos con un marco para tablet, escritorio, tablet, escritorio y teléfono. Bien. Entonces con la ayuda de Autoayout, lo que puedes hacer, puedes crear tu diseño y optimizarlo para diferentes tamaños Puede optimizar el diseño de la aplicación de escritorio para la vista de tableta para la vista del teléfono. Bien. Entonces esta es una belleza de Autoeyout Ahora aprendamos cómo podemos hacerlo. Bien. Entonces antes que nada, te explicaré que es propiedad. Bien. Después de eso, aplicaremos el efecto de diseño automático. Pero antes de eso, debemos entender que es propiedad. Bien. Entonces aquí tenemos dos cosas. ¿Puedes ver esta línea azul este rectángulo azul? A esto se le llama marco. Y dentro de eso, tenemos un elemento. Bien. Entonces siempre que aumente o disminuya el tamaño del marco, su elemento ajustará su posición y tamaño también. Bien. Entonces vamos a aumentar el y se puede ver que está manteniendo su posición. Está manteniendo la posición central. Bien. Ahora, hay que mirar hacia este lado. Aquí obtendrás un icono como este. ¿Puedes ver eso? Este es un pogison diferente de elemento dentro de un marco. Bien. Entonces aquí verás aquí verás una pequeña caja. Aquí verás una pequeña caja. ¿Puedes ver esto? Bien. Y mi inglés es un poco pobre porque el inglés no es la lengua. Bien. Pero deberías enfocarte en mis conocimientos. ¿Bien? No tienes que juzgar mi habilidad para hablar inglés porque el inglés no lo es. Bien. Entonces aquí puedes ver que Punto negro representa elemento, y cuadro rojo representa Marco. Bien. Bien. Así que siempre que seleccione su marco, cada vez que seleccione su marco, verá la opción de alineación. Entonces, si voy a hacer clic en la esquina superior, entonces notarás que notarás que su posición ha sido cambiada. Bien. Así que con la ayuda de la alineación, se puede cambiar su posición. Bien. Entonces esta era una opción de alineación. Esto fue un alineamiento. Entonces, si lo vas a hacer en el centro, entonces qué pasará si aumentarás o disminuirás el tamaño del marco. Por lo que hará su posición en el centro de todos modos. Bien. Si lo harás hacia el Pogison izquierdo, entonces hará que quede Si va a hacer clic a la derecha, entonces se mantendrá pogison derecho Bien. Así que cada vez que vas a crear botón, tienes que hacerlo en el centro, ¿bien? Es De igual manera, tenemos un marco para el icono de los alumnos. Bien. Entonces, si voy a hacer clic en la parte superior izquierda, entonces los elementos se moverán hacia la esquina superior izquierda , arriba centro, arriba derecha , centro, medio derecho, medio, medio izquierdo. Bien. Entonces así es como puedes asignar su centro. Bien. Bien, bien. Ahora, siempre que aplique diseño automático en más de dos elementos, entonces ¿qué pasará? Aquí verás gap. Aquí verás gap. Bien. En realidad, cuando pase el mouse, lo siento, entonces verás esta brecha ¿Ves esta línea morada? ¿Ves esta línea morada? A esto se le llama gap. Se trata de una brecha entre cada elemento. Bien. Entonces donde lo encontrarás, esto es una brecha. Esto es una brecha. Bien. Entonces supongamos que lo está incrementando a partir de aquí, entonces también, verá que aquí aparecerá el mismo cambio. Bien. Entonces tienes tanto la opción. O puedes cambiar el valor desde aquí o en vez de eso, puedes cambiar el valor desde el aquí. Ambas cosas son iguales. Bien. Y uh hay que prestar atención aquí porque supongamos que escribo aquí 50. Eso significa que cada vez que voy a aumentar o disminuir el tamaño del marco, no va a cambiar su brecha. Bien, Gap será de 50, pase lo que pase, estoy aumentando o disminuyendo el ancho del marco. Bien, Gap no es un Bien. Entonces si lo voy a disminuir demasiado, entonces no está funcionando. Pero si voy a hacer clic en Hit y teclear Auto y pulsar el botón Enter. Ahora, ¿qué va a pasar? El elemento Is se ajustará según el tamaño del marco. ¿Correcto? El elemento Is se ajustará según el tamaño de la película. Bien. Entonces tienes tanto la opción. Entonces, si vas a poner el valor de gap entre cada elemento, entonces tienes tanto la opción. O bien puedes ingresar cualquier valor. Entonces, si ingresarás algún valor como 50, entonces hará una distancia consistente de 50, sin importar lo que estés aumentando o disminuyendo el tamaño del fotograma. Mantendrá la distancia 50. Bien. Y tienes otra opción, que es establecer la brecha al auto. Bien. Entonces, cuando establecerás tu brecha en el auto, entonces ajustará automáticamente su distancia entre otros elementos. Bien. Entonces vamos a repetir lo mismo. Entonces, antes que nada, lo que tienes que hacer, tienes que seleccionar un marco. Y después de eso, si vas a situar el cursor entre esta brecha, entonces verás estas líneas de eclosión moradas, que está representando la brecha entre cada elemento Se trata de una brecha entre cada elemento. Ahora tienes tanto la opción. O puedes ingresar un valor fijo o puedes configurarlo en el auto. Actualmente se encuentra en auto. Actualmente, nuestra brecha se establece en auto, lo que significa que si voy a aumentar el ancho de mi marco, entonces la brecha también aumentará. Si voy a disminuir el ancho del marco, entonces la brecha también disminuirá. Si voy a introducir algún valor fijo como 40. Entonces te pedirá que los alinees correctamente. Lo estoy alineando en el centro. Ahora bien, si voy a disminuir o aumentar el ancho, AP es consistente. Aquí, AP es consistente, 40, 40, 40. Entonces tienes tanto la opción. O puedes poner cualquier valor fijo o puedes configurarlo al auto. Por lo que he explicado ambos escenarios. 11. Diseño automático en Figma (parte 2): Entonces chicos, um, así que esto es un frame, y aquí hemos asignado la brecha al auto, lo que significa que cada vez que aumentemos o disminuiremos el tamaño del fotograma, Gap se ajustará automáticamente. Bien, según el tamaño del marco. Entonces, si voy a aumentar el tamaño del cuadro, entonces también aumentará la brecha. Si voy a disminuir el tamaño del cuadro, también disminuirá la brecha. Bien. Pero debería haber un límite, ¿verdad? Por ejemplo, si voy a aumentar demasiado el ancho del marco, entonces notarás una cosa, que es que todos los elementos se han fusionado y se ve feo. Esto estropeará todo tu diseño. Bien, entonces tienes que aplicar. Hay que aplicar ancho mínimo y ancho máximo. Tienes que restringir tu dimensión de diseño. Tienes que restringir tu dimensión de diseño como máxima y mínima. Bien. Básicamente, estás limitando tu flexibilidad de diseño. ¿Bien? Este es el límite máximo, y este es el límite mínimo. Creo que estás entendiendo mi punto. Bien, entonces si voy a disminuir el ancho del marco. Bien. Ahora aquí, tengo que aplicar límite mínimo de ancho. Entonces lo que voy a hacer, actualmente, nuestro ancho es de 1508 Entonces voy a copiar ese límite. Bien. Y como tenemos que aplicar límite de ancho, por eso voy a ir en ancho. Supongamos que tengo que aplicar límite de altura, entonces voy a ir en altura. Aquí tenemos que aplicar límite de ancho. Por eso voy a ir en ancho, vamos a bajar. Y aquí tenemos un add minimum width, add minimum width value here. Bien. Entonces aquí puedes ver que he agregado ancho mínimo de marco. Entonces desde el nu, qué va a pasar. Siempre que disminuya el ancho del marco, disminuirá 1508 Bien. Después de eso, no puedo disminuir el ancho del marco porque he restringido, ¿de acuerdo? Y lo mismo hay que solicitar el máximo. Bien, yo voy a disminuir, perdón, si voy a aumentar el ancho del marco, entonces no hay límite, puedo expandirlo de acuerdo a mi necesidad. Pero es necesario que asigne límite máximo a. ¿Bien? Si asigné ancho mínimo, entonces también debería asignar límite máximo. Bien. Entonces supongamos que este es mi límite máximo. Entonces lo que haré nuestro ancho actual es 1961. Voy a copiar este menú desplegable. Y aquí verás agregar ancho máximo. Bien, entonces pon el valor. Bien. Ahora, ¿qué va a pasar? Aumentará o disminuirá dentro de un límite máximo y mínimo. ¿Eres capaz de entender lo que estoy tratando de hacer? He asignado límite máximo y límite mínimo, que no deben cruzar. Bien, he asignado límite mínimo. He asignado límite máximo, no debe ser cruzado. Bien. Bien. Completo. Bien. Creo que entendiste mi punto, ¿verdad? Entonces, vamos a disminuir la brecha. Bien. Hagámoslo en el centro. Por lo que he asignado gap 55. Ya que he asignado un hueco 1 minuto, Bien. Ya que he asignado una brecha de 55, lo que significa que esta brecha es de 55 Lo he asignado sin importar lo que esté aumentando el fotograma o disminuyendo el fotograma. Bien, seguirá manteniendo 55 gap. Bien. A partir de aquí, puedes cambiar también. Bien, bien. Ahora aquí verás opción de relleno. Eso se puede ver. Esta línea azul es de relleno. El relleno es una distancia entre tu marco y tu elemento. Por un ejemplo, C. Esto se llama padding. A esto se le llama relleno. Se trata de relleno horizontal. De igual manera, tendríamos relleno vertical. Bien, entonces este es un relleno horizontal. Entonces este es tu elemento. Y este es tu marco. Así que el relleno es una distancia entre el relleno es una distancia entre el elemento y el marco. Bien. Del mismo modo, puedes asignar relleno así. Bien. Ahora vamos a explorar otra cosa. Aquí tenemos diferentes diseños como disposición horizontal, disposición vertical, para que puedas cambiar tu diseño así. ¿Bien? Bien. Bien. Ahora, tenemos otro marco aquí. Tenemos otro marco. Como ya te dije eso, marco constan elementos. Bien. Marco consistido elemento. Esta línea azul, he añadido un efecto de trazo para que puedas ver fotograma. Esta línea azul representa el marco. Esta línea azul representa el marco, y dentro de ese marco, tenemos un elemento de dos. El primer elemento es imagen, el segundo elemento es texto. Ahora, vamos a entender sobre las propiedades del elemento. Ya aprendimos la propiedad de frame. Ahora aprenderemos la propiedad del elemento. Entonces, antes que nada, seleccionemos la imagen. Seleccionemos la imagen. ¿Bien? Así que ancho sexon verás pastillero contenedor de pastillas Entonces, ¿qué significa? El envase de la píldora actúa como un agua. Envase de pastillas, actúa como agua. Este es el mejor ejemplo de contenedor de llenado. Este es un marco que consiste en agua. Este es un marco que consiste en agua. Entonces, si voy a aumentar el ancho del marco, entonces el agua se extenderá por todo el marco. Bien. Si vas a dar espacio extra, entonces ocupará. Bien. Aquí se puede ver. Aumento el ancho del marco. Por lo que sus elementos se están ajustando de acuerdo al tamaño. Entonces aquí se aplica lo mismo. Si voy a dar click sobre esta imagen, y voy a ir en sección de ancho y ancho interior, si voy a hacer clic en contenedor de campo, entonces ¿qué va a pasar? Y mira, hay que recordar una cosa que es Peel container es propiedad de un elemento. Bien, y el elemento se comportará de acuerdo con el marco. Hay que recordar esta cosa. El contenedor de pozo es una propiedad de elemento. Esta imagen, esta imagen es un elemento. Aquí hemos aplicado envase de píldora. Siente el contenedor. El contenedor de soldadura actúa como agua. Bien. Por lo tanto, el contenedor de campo es una propiedad del elemento. En el lugar del elemento, podría ser cualquier cosa. Podría ser imagen o texto. Cualquier cosa que esté dentro de un marco llamado elemento. Entonces verás contenedor de campo en elemento, no en marco. Bien, entonces el contenedor de rueda es propiedad del elemento, ¿verdad? Y elemento se comportará de acuerdo con el marco. Bien. Así que he aplicado efecto contenedor de campo en esta imagen. He aplicado efecto contenedor de campo en esta imagen. Bien. Entonces, ¿cuándo se comportará? Si voy a hacer algún cambio con marco. Bien. Entonces, si voy a disminuir o aumentar el tamaño del marco, entonces su elemento ajustará automáticamente su tamaño y posición. Bien. Esto es una belleza de un contenedor de llenado. Así que vamos a repetir lo mismo. Bien. Repetimos lo mismo. Hay que ver esta conferencia en particular más de tres veces tres a cinco veces, porque esto es un poco confuso. Entonces esta línea azul representa el marco. Bien. Y he añadido un efecto de trazo azul en marco para mostrarte. ¿Bien? De lo contrario, el marco no se verá así. Bien. Dentro de ese marco, tenemos dos elementos. primer elemento es imagen, y el segundo elemento es texto. Bien. Entonces, antes que nada, estamos hablando de esta imagen. Bien. Entonces cuando hacemos clic en esta imagen, luego en la sección de ancho, aplicamos efecto contenedor de campo. Bien. Por lo tanto, el contenedor de campo es una propiedad de un elemento, que se ajustará de acuerdo con el tamaño del marco. Si va a disminuir el tamaño del marco, tamaño del elemento también disminuirá. Si vas a aumentar el tamaño del marco, tamaño del elemento también aumentará. El contenedor de campo es una propiedad de un elemento, que depende totalmente del marco. Por lo que el marco va a aumentar, elemento va a aumentar. Si el tamaño del fotograma disminuye, el tamaño del elemento disminuirá. Demostremos esto si voy a disminuir el marco. Así se puede ver que su tamaño está cambiando ahora. ¿Bien? Bien. Lo mismo se puede aplicar en altura también. Vamos a hacer clic en la imagen. Y si voy a aplicar contenedor de campo en altura, entonces ¿qué pasará? Si voy a aumentar la altura, entonces su imagen se ajustará automáticamente según el espacio libre. Si voy a reducir la altura, entonces se puede ver que la altura de la imagen también se redujo. Si voy a aumentar la altura del marco, entonces se puede ver que la altura de los elementos también está aumentando de acuerdo a la altura del marco. Bien. Entonces aquí tienes una opción de contenedor de testamento. Entonces si vas a dar click en imagen e ir aquí, aquí tienes un ancho fijo. Entonces aquí tienes dos opciones diferentes, contenedor de campo y ancho fijo. Supongamos que hemos explorado el contenedor de campo, ¿verdad? Así que vamos a hacer clic en ancho fijo. Y vamos a ajustar el ancho. Bien. Entonces ancho fijo significa, obviamente, que no va a cambiar. No va a cambiar. Si voy a disminuir o aumentar el tamaño del marco, ancho no va cambiando, ¿verdad? El ancho no está cambiando. Si voy a aumentar la altura, entonces la imagen se está ajustando por sí misma ya que si vas click en imagen y vas a la altura Sexton, actualmente se selecciona en contenedor de campo, lo que significa que ajustará su altura de acuerdo a la altura del marco Entonces, si vas a fijar su altura así, ahora, no importa lo que la estés incrementando o disminuyendo, su altura no va cambiando. Entonces tienes una opción de dos. Tienes una opción de dos. Estamos hablando de elemento. Estamos hablando del tamaño del elemento. Bien. Entonces, cuando vas a hacer clic en cualquier elemento, no importa lo que estés haciendo clic en imagen, icono, texto. Bien. Siempre que hagas clic en cualquier elemento, tienes dos opciones en ancho y alto, ancho y alto. Verás esta opción tanto en ancho como en alto. Bien. ¿Qué opción verás? Contenedor Will. Siente el contenedor y arregle. Entonces, cuando asignará propiedad de contenedor de campo, entonces ¿qué pasará? Si vas a aumentar el tamaño del marco, tamaño del elemento también aumentará. Si va a disminuir el tamaño del marco, tamaño del elemento también disminuirá. Pero si va a seleccionar ancho o alto fijo, entonces no cambiará su altura y ancho según el marco. Bien. Creo que entendiste mi punto. Bien. Entonces he cubierto las cosas básicas sobre el diseño automático. Básicamente, le expliqué la propiedad del diseño automático. Bien. Y además, tenemos una cosa que debo enseñarte, que es de 1 minuto. Bien, así que si voy a hacer clic en el texto, si voy a hacer clic en el texto, estoy seleccionando otro elemento. Entonces aquí tenemos una opción de contenedor de campo, y abrazar contenido es una nueva opción. Entonces ya le expliqué el contenedor de campo. Ya he explicado el ancho fijo. Aquí tenemos contenido de abrazo. Entonces, ¿qué va a pasar? En primer lugar, ajustemos el ancho. Bien. Entonces he asignado el contenedor abrazo. Por lo que siempre que asigne contenedor HGA, bloqueará su posición Ahora, si vas a aumentar, si vas a aumentar o disminuir el ancho de tu marco, no se moverá. Básicamente, dirá, no me voy a mover de aquí. Bien, voy a bloquear su posición. Entonces a esto se le llama un abrazo contenido. Bien. Esto se llama contenido Hug, que se puede aplicar en texto. Bien. Bien, bien. Seleccionemos el texto. Seleccionemos el contenido del abrazo. Disminuyamos el ancho. Bien. Ahora bien, si voy a disminuir o aumentar el ancho. Se ha registrado la posición del texto. Bien, no está cambiando según Okay. Así que lo he cubierto todo. En primer lugar, cubrí todo lo relacionado con el marco. Marco constan de muchos elementos. Bien, el marco consta de muchos elementos. Y siempre que tengas que cambiar cualquier cosa relacionada con la alineación, tienes que hacer click en frame. Bien. Después de eso, te expliqué toda propiedad de los elementos. Entonces en elementos, tenemos un contenedor de campo re property fix. Y ug. Bien. Entonces, si vas a hacer clic en Fijar, entonces no importa lo que cambies tu marco, ancho o alto, se arreglará. Si va a utilizar contenedor de campo, entonces se ajustará automáticamente su tamaño de acuerdo con el tamaño del marco. Si vas a hacer clic en el contenido de Hug, entonces el elemento bloqueará su posición y no se moverá sin importar lo que estés aumentando o disminuyendo el tamaño del fotograma. Bien. Así que lo he cubierto todo. Y en la próxima conferencia, te enseñaré a aplicar el autolayout ¿Bien? He cubierto la propiedad básica del diseño automático, y en el siguiente video, te enseñaré a aplicar el autolayout en ¿Bien? Si tienes alguna ayuda por este video, entonces puedes darme una buena calificación positiva y comentar para que pueda motivarme 12. ¿Cómo crear un diseño de sitio web de UI/UX responsivo en Figma?: Hola a todos. Así que bienvenidos a todos ustedes en mi serie maestra completa sobre el diseño Figma UIUX Entonces, en esta conferencia en particular, aprenderemos cómo podemos crear un diseño responsivo completo con la ayuda de Figma mientras usamos AutoEoutFeature Bien. Entonces, sin perder tiempo, comencemos nuestro video. En primer lugar, vamos a replicar este sitio web, ¿de acuerdo? Estamos utilizando esta página como referencia, e intentaremos replicar esta página Bien, entonces antes que nada, tomemos un DextoFrame donde replicaremos nuestro Bien. Entonces, antes que nada, vamos a crear una pestaña. Bien. Vamos a crear una pestaña. Entonces, antes que nada, tomemos una herramienta de texto y escriba home. Después de eso, con la ayuda del botón Control más D, puedes duplicar esto y puedes tomar cursos, contacto con la comunidad y sobre nosotros. Ahora, tienes que seleccionarlos todos y puedes cambiar su propiedad desde aquí. Se puede hacer que se alinee correctamente, ¿de acuerdo? Alinear correctamente. Y con la ayuda de estas tres líneas, lo que puedes hacer, puedes proporcionar un hueco igual entre cada texto. Así que asegúrate de hacer clic en eso. Ahora, por fin, tenemos una brecha igual. Por último, tenemos una brecha igual. Ahora vamos a hacer clic en eso. Y aquí tenemos opción de autoayout. Así que haz clic en eso. Con la ayuda del diseño automático, puede hacerlo receptivo. ¿Bien? Ahora, en el lado derecho, obtendrá su propiedad. ¿Bien? Y a esto se le llama marco. Entonces este es un marco uno, y puedes renombrar esta pestaña como. ¿Bien? Para facilitar la navegación, puedes cambiarle el nombre. En el lado izquierdo, se puede ver que tenemos una nueva capa llamada tab. Bien. Ahora en el lado derecho de la pantalla, tenemos una propiedad. Entonces con la ayuda de la alineación, lo que puedes hacer, puedes alinear tu elemento con respecto a tu marco. Así podrás alinearlos correctamente en el centro. Bien. Ahora vamos a aumentar la altura Bien. Entonces aquí tienes una alineación. Entonces, si vas a hacer clic en la esquina superior izquierda, se moverá hacia la esquina superior izquierda. Si vas a hacer clic en la esquina superior derecha, entonces se moverá hacia la esquina superior derecha. Entonces así es como puedes alinearlos. Si vas a hacer clic en la esquina superior, inferior, lo siento, la esquina inferior derecha, entonces se moverá hacia la esquina inferior derecha. Entonces, si vas a crear una pestaña, entonces debería estar en el centro, ¿de acuerdo? Ahora, aquí tenemos un relleno horizontal y un relleno vertical, por lo que este es un hueco entre tu marco y el elemento de texto. ¿Bien? Por lo que hay que asignarlos correctamente. Esta es una brecha entre tu marco y elemento. Bien, ahora vamos a disminuir el tamaño, ¿de acuerdo? Ahora hablemos de la brecha. A partir de aquí, se puede manipular el ajuste de gap. O bien puedes ingresar un valor fijo o puedes ingresar auto. Así que vamos a seleccionar auto. Si va a seleccionar auto en lugar de valor fijo, entonces ¿qué pasará? La brecha variará según el tamaño del marco. Si vas a aumentar el tamaño de tu cuadro, también aumentará la brecha. Si va a disminuir el tamaño del cuadro, entonces la brecha también disminuirá. Bien. Entonces así de manera similar, si ingresarás algún valor fijo en lugar de ponerlo auto, si ingresas algún valor fijo, entonces mantendrá la misma brecha entre cada texto. ¿Bien? Para que puedas usar ambas cosas de acuerdo a tu necesidad. Entonces supongamos que se puede escribir 50, 40, entonces mantendrá la misma brecha. Ahora, para poder rellenar color, tienes que seguir En primer lugar, tienes que seleccionar tu marco y tienes que seguir sintiéndote. Y a partir de aquí, puedes elegir tu color primario. Entonces usaré el color azul como color primario. Ahora cambiemos el texto. Entonces para una selección específica, tienes que usar el botón Control, y para la selección múltiple, tienes que usar el botón Tamizar, lo que significa que tienes que usar ambos el botón juntos Bien, Tamizar el control y el clic del ratón. Con la ayuda de esta combinación, puede seleccionar todo el texto. Ahora seleccione elementos enteros y conviértelos en componentes. Entonces esto se llama componente padre. Y siempre que lo usemos, llamará a componentes secundarios. Así que voy a ir a la sección de activos, y aquí voy a obtener mi instancia padre significa componente hijo. Ahora voy a ajustar su tamaño, bien. Vamos a ajustarlo aquí. Este es mi componente padre. Este es mi componente padre, y este es mi componente hijo. Entonces, sea lo que sea que haga en el componente padre, su reflexión aparecerá en el componente hijo. Si voy a cambiar el color del padre, entonces se reflejará en niño también. Ahora vamos a crear el logo del sitio web. Entonces tomemos un nombre I escuela Hub. Se puede cambiar la propiedad del texto. Se puede aumentar el tamaño. Se puede cambiar el grosor de cada texto. Se puede cambiar el color del texto. Así que seleccionemos la escuela y apliquemos nuestro color de tema. Entonces para poder aplicar eso, tienes que ir en cuatro puntos y puedes aplicar así. Ahora, voy a descargar un logo, que voy a adjuntar con mi logo. Básicamente, tengo que adjuntar ese logo con Ikolhub. Puedes crear tu propio logo así, así que fusionaremos ambos elementos. Vamos a alinearlos correctamente. Ahora, vamos a alinearlos correctamente. Ahora selecciona todo el elemento y aplica el diseño automático. Entonces, con la ayuda del autoayout, puedes cambiar fácilmente la posición de tus dos elementos Así, puedes cambiar tu posición. Ahora cambiemos el nombre de este logotipo. Y si quieres crear un componente, entonces también puedes crear un componente de tu logo para que puedas usarlo siempre que sea necesario usarlo. Así que coloquemos nuestro logo. Ahora es el momento de crear un banner de nuestro sitio web. Entonces estoy creando banner con el rectángulo Alfa. Ahora, vamos a subir imagen desde aquí. Seleccionemos cualquier imagen. Creo que debería usar esta imagen. Bien. Se ve bien. Ahora, aumentemos la altura de nuestro marco para que la gente pueda desplazarlo. Ahora tenemos que crear otros elementos, también. Al igual que tenemos que crear este rectángulo de imagen. Tengo que crear este, solicitar otoño primavera. Bien. Entonces intentemos replicar este sitio web Entonces he creado muchos rectángulos, rectángulo grande, rectángulo pequeño y rectángulo súper pequeño, y estoy fusionando estos dos elementos como un grupo para que se mueva juntos Bien. Ajustemos su posición, alinéelos correctamente, y tenemos que escribir un texto como aplicar para otoño primavera. Entonces voy a escribir algo diferente. Vamos a teclear exploradores. Puedes cambiar la configuración del texto Puedes disminuir o aumentar tu grosor. Vamos a alinearlos y ajustemos su posición. Pero antes de eso, deberíamos aplicar el layout automático. Ahora, ajustemos su posición. Ahora seleccionaremos ambos elementos y lo crearemos como grupo. ¿Bien? Ahora aquí podemos subir imagen, pero antes de eso, podemos duplicarla porque necesitamos este elemento tres veces. Ahora lo que voy a hacer, voy a aplicar efecto de diseño automático entre estos tres elementos, pero antes de eso, vamos a alinearlos correctamente y crear una brecha consistente. ¿Bien? Y puedes dar la vuelta a tu esquina. Ya que hemos seleccionado los tres componentes, es por eso que si vamos a cambiar el radio de la esquina, cambiará al mismo tiempo. Ahora selecciona todos los elementos. Y nuevamente, aplicaremos la maquetación automática. Ahora bien, si va a escribir aquí algún valor fijo, entonces será fijo. Ahora vamos a crear un encabezado. Comience su viaje UX con nosotros. Y ahora lo arreglaremos correctamente, y seleccionaré todo el elemento, y aplicaré efecto autoeu entre todos estos elementos Tienes que asegurarte de que el autolaout se Ahora puedes manipular su distancia. Bien. He creado este marco. ¿Bien? Ahora vamos a arrastrar la imagen y colocarla así. Nuevamente, aplicaremos el diseño automático. Básicamente, lo que estoy haciendo aquí, estoy aplicando el diseño automático en un elemento pequeño. Después de eso, lo estamos fusionando con otro elemento, ¿de acuerdo? Bien ahora vamos a arrastrarlo en nuestro marco. Ahora tenemos que subir imagen. Voy a ir a imagen y video dentro herramienta Rectángulo y seleccionaré múltiples imágenes con el botón Control. Con la ayuda del botón Control, puedes seleccionar múltiples imágenes y puedes soltar tu imagen con la ayuda del click izquierdo del mouse. Es súper fácil. Ahora tecleemos conectemos con nuestros alumnos actuales. Vamos a ajustarlo y vamos a crear un párrafo. Aquí me estoy saltando este video porque este es un proceso repetitivo ¿Bien? Si no me saltaré alguna área, entonces este video sería muy largo. Ahora, aplica autoayout. Entonces, básicamente, tienes que dividir tu sitio web en varias partes, y después de eso, tienes que fusionar todas las partes en el gran diseño automático. Entonces básicamente, tienes que dividir tu sitio web en pequeños grupos. Tienes que aplicar autolyou en esos pequeños grupos, y después de eso, tienes que fusionar todos los grupos pequeños con la ayuda de Bien. Ahora, seleccionemos conectar con nuestro alumno actual, y desde la sección de ancho, tenemos que seleccionar un contenedor de campo. Entonces con la ayuda de contenedor de campo, lo que puedas hacer, actuará como un agua. Entonces tenemos un marco, y dentro de ese marco tenemos un agua. Entonces, si vas a aumentar el ancho del marco, entonces lo que sucederá El ancho del agua también aumentará con respecto al ancho del contenedor. Algo similar trabajar con nuestro sitio web también. Entonces conectar con nuestros alumnos es un elemento de texto, y actualmente se encuentra dentro del marco. Así que he seleccionado la propiedad de contenedor de campo en texto. Bien, entonces va a funcionar como el agua. Si voy a disminuir el ancho del marco, entonces también disminuirá. De igual manera, hay que seleccionar su párrafo, y nuevamente, hay que aplicar contenedor de campo. Ahora, ajustará su posición de acuerdo al tamaño del marco. Si vas a disminuir el tamaño de tu fotograma, entonces también disminuirá. Y a partir de aquí, se puede ajustar la brecha. Puedes cambiar el valor desde aquí. Bien. Ahora es el momento de crear un sexon diferente de nuestro sitio web como perfil sexon Bien. Entonces intentemos replicar esto Vamos a crear un rectángulo, un rectángulo más grande. Hacer un radio de esquina. Ahora selecciona un color blanco. Crea una pequeña caja cuadrada para perfil, crea una esquina lisa, alinéalas correctamente. Ahora vamos a crear otro rectángulo por aquí. Y usaremos color primario para rellenar este rectángulo. Así que el color azul era nuestro color primario. Ahora voy a ajustar esto así. ¿Bien? Así que selecciona una caja cuadrada y hazla delante de nuestro marco. Seleccione, traiga al frente. Entonces, si vas a hacer clic en traer al frente, entonces sería capa superior. Ahora vamos a escribir un nombre de perfil de texto. Entonces estoy escribiendo mi nombre Ankit Ahora, he descargado un ícono en el perfil Para el icono, también puedes usar plugin. Se puede ajustar. Ahora voy a aplicar efecto autoayout entre estas dos cosas Ankit y ese icono, aplicar Entonces básicamente, hay que aplicar autoayout en un elemento pequeño, y después de eso, hay que fusionarlo con elementos grandes Del mismo modo, vamos a crear un texto de diseñador de UIUX. Los alinearé correctamente. Del mismo modo, vamos a escribir en línea alinearlos correctamente. Ahora podemos aplicar efecto de maquetación automática entre estos elementos. Así que selecciona todos los elementos y aplica autoyout. Selecciona todos los elementos y aplica autodiseño. Entonces he eliminado un texto en línea porque se veía feo. Ahora estoy creando el botón llamado sombrero con Ankit. Entonces estoy descargando imagen PNG de chat. También puedes usar plugin. Disminuyamos el tamaño. Seleccione el texto y el icono, haga que se alinee correctamente y aplique Diseño automático. Ahora aumenta el tamaño del marco, y puedes convertirlos en el botón. Aquí no necesitas un rectángulo. Puedes convertir tu marco en el botón así. Si vas a sentir color en tu marco, entonces se convertirá en botón. Ahora cambiemos el color del texto. Ajustarlo correctamente. Ahora, seleccionaré todo el elemento, y voy a aplicar Autoout, pero se ve feo Entonces lo que voy a hacer, voy a quitar Autoot y después de eso, voy a fusionar estos dos elementos como un grupo Ahora voy a aplicar Autoout. Bien. Entonces, en algún momento si estás teniendo algún problema, entonces tienes que intentar convertir cualquiera de dos elementos como grupo, y después de eso, puedes aplicar el autoout Bien. Entonces vamos a replicarlos. Entonces, siempre que estés enfrentando alguna dificultad al crear Autoeout, entonces tienes que agrupar inteligentemente dos elementos y después de eso, tienes que aplicar tienes Ahora vamos a subir toda la imagen. Con la ayuda del botón Control, puedes seleccionar varias imágenes y puedes soltarlas fácilmente así. Ahora selecciona nuestro marco y aplica Autoaout. Pero se puede ver que no está respondiendo de acuerdo a nuestra necesidad. Entonces lo que vamos a hacer, arrastraremos nuestro todo componente así. Ya que está respondiendo de acuerdo a nuestra necesidad, por eso ya no necesitamos un marco blanco. Podemos convertir este marco en el marco blanco. Simplemente selecciona tu marco y podrás sentir tu color así. Se puede sentir el color blanco. No necesitas un marco blanco. ¿Bien? Ajustemos el texto. Ahora vamos a arrastrar nuestro logo dentro de nuestro nuevo marco. Vamos a ajustarlo. Entonces, chicos, pueden ver que está funcionando bien. Así que finalmente, hemos creado una página responsive. Bien, chicos, si disfrutan de esta conferencia, entonces no se olviden de darme una buena calificación positiva y comentarios para que pueda motivarme. Bien, adiós.