Fundamentos de Figma: una introducción al diseño de interfaz de usuario

1. Introducción: Hola chicos, Mi nombre es Peter y bienvenidos a la clase. Entonces entrando directo al punto, si quieres dominar cualquier cosa en la vida, es muy importante que tus fundamentos sean claros los fundamentos. Y eso es exactamente lo que estamos haciendo en este video en particular aprendiendo los fundamentos de Figma. Entonces en esta clase, vamos a comenzar desde el mínimo de crear una cuenta Figma. Entonces queremos explorar la interfaz de Pigma, donde profundizamos con respecto a la sección de capas esta semana, mis herramientas, el panel de propiedades, todo con algunos ejemplos relevantes. Por último, vamos a concluir confinando todos los conocimientos que hemos adquirido al construir una landing page de pie. Entonces chicos, al final de esta clase en particular, tendrán una idea clara con respecto a lo que es Figma y cuál es el potencial Figma. Y habrá 100% confianza para construir un diseño básico usando Figma. Entonces esta es una visión general de alto nivel de lo que esta clase en particular, y hay mucho más a esta clase en particular en el próximo organismo estaba pidiendo. Entonces, muchas gracias por verlos y realmente espero verlos chicos en el siguiente video. 2. Empezando con Figma: Entonces chicos, en este video y vean como podemos empezar con Figma. Así es como podemos crear una cuenta en Figma. Por lo que este video es para principiantes absolutos que aún no tienen una cuenta Figma. Entonces, si ya tienes una cuenta, probablemente pueda saltarme este video en particular. Entonces para poder crear una cuenta en Figma, de nuevo, vaya a la URL www punto figment are cool, que te va a llevar directamente a este hermoso sitio web en particular. Entonces esta es una parte positiva realmente informativa y bien construida. Les sugiero chicos que echen un vistazo a este sitio web en particular, puedan ver qué hace único a Figma. Cuáles son las diferentes características y mucho más. Entonces, si ya tienes una cuenta, puedes ir directamente a iniciar sesión e iniciar sesión usando tus credenciales. Entonces, si no tienes una cuenta, puedes hacer clic en Comenzar ya sea de nuevo, ingresar un correo electrónico, contraseña, Crear una cuenta, verificar lo mismo, y estarás listo para ir o bien para facilitarte las cosas, puedes registrarte directamente con Google. Entonces de eso se trata de la parte de creación de cuenta. Entonces ahora mismo voy a iniciar sesión ya que ya tengo una cuenta. Entonces chicos, ahora mismo estamos en el tablero de Figma y como pueden ver, tenemos un par de proyectos en los que he estado trabajando. También puedes crear un nuevo archivo de diseño desde aquí. Y también puedes importar un archivo existente desde otras herramientas también. Entonces en este momento básicamente estamos accediendo a Figma a través de su aplicación web y todos los demás datos básicamente se almacenan en la Nube y no se está tomando nada en el almacenamiento local de su máquina. Por lo que también puedes obtener Figma y aplicación de escritorio. Puede hacer clic en el logotipo de su anuncio aquí mismo, y puede hacer clic en obtener la aplicación de escritorio para descargar Figma en su máquina local también. Entonces este es el tablero básico. Así que hagamos clic en el nuevo archivo de diseño para crear un nuevo archivo. Entonces chicos, esto es figma tiene interfase. Así que no te preocupes si no entiendes qué son las cosas, básicamente estaremos sumergiéndonos profundamente en cada una de las diferentes secciones que están en profundidad en los próximos videos. Entonces todo lo que quise decir en este video en particular es si eres un principiante absoluto, solo quería guiarte para comenzar con Figma, crear una cuenta, echar un vistazo al tablero y crear un nuevo proyecto fresco. Entonces eso es todo sobre este video en particular. Muchas gracias por verlas, y los veré chicos en el siguiente video. 3. Resumen de la interfaz Figma: Entonces chicos, En este video, les voy a dar una interfaz o vista de Figma. Entonces en el video anterior, creamos un nuevo proyecto fresco. Y como puedes ver, la interfaz de usuario o Figma es bastante simple y además es realmente fácil de entender. Y luego morir en la cara se divide principalmente en cuatro secciones diferentes. Hacia la izquierda aquí se puede ver la sección de capas. Así que cada vez que añades un objeto o una imagen, todas estas cosas podrían estar dispuestas en forma de capas, aquí mismo en la sección izquierda. De hecho, puedes ver toda la estructura de tu proyecto con solo mirar la sección de capas. Entonces eso es sobre la última sección. Y en la parte superior aquí se puede ver la sección de herramientas. Y Figma comparativamente tiene menos cantidad de herramientas. Pero todas estas herramientas son más que suficientes para crear básicamente cualquier tipo de diseño. Y esa es la belleza de Figma. Las cosas son bastante simples, pero tienes suficiente cantidad de herramientas y recursos para convertir básicamente tu idea en un diseño adecuado. Y en la parte inferior aquí se puede ver el lienzo. En definitiva, este es un lugar donde básicamente construimos el diseño. Y hacia la derecha aquí se puede ver la sección de ajustes o la sección de propiedades. Aquí es donde básicamente personalizamos un objeto individualmente. Por lo que esta sección se vuelve a dividir en diseño, prototipo e inspeccionar. Pero lo más probable es que nos quedaremos con solo la sección de diseño. Entonces chicos, esto es básicamente una visión general de alto nivel del Figma individual. En los próximos videos, vamos a recoger cada sección y profundicaremos en sus características mientras ellos, hay diferentes consejos y trucos, mejores prácticas y todas estas cosas en los próximos videos. Entonces eso es todo para este video, y los veré chicos en el siguiente video. 4. Herramientas de Figma: Entonces chicos, en este video, echemos un vistazo a las diferentes herramientas que ofrece el estigma. Entender cuáles son y son las diferentes funcionalidades que ofrecen. El primero que puedo escribir aquí en la sección de herramientas es básicamente el menú principal que ofrece alguna aversión funcional básica que una bella dama vista. Lo típico que podemos ver en cualquier tipo de sitio web. La siguiente herramienta aquí es básicamente que se moverá a la herramienta de movimiento, como su nombre sugiere, se usa básicamente para mover cosas alrededor y el lienzo. Entonces, por ejemplo, si tengo una estructura de símbolo aquí mismo en el lienzo, puedo usar la herramienta de movimiento para moverla alrededor del lienzo. Entonces eso es sobre la herramienta Mover. Y también hemos cogido a esta herramienta a escala. Entonces, ¿cuál es la diferencia entre la Herramienta Mover, la Herramienta Escala? Hablaremos de otra diferencia o prueba en un segundo. Entonces, la siguiente herramienta aquí es básicamente el frame to the Frame Tool es una de las herramientas más importantes aquí mismo en Figma. Así que por el momento hago clic en el cuadro dole hacia la sección de ajustes vuelve a ver muchos de ellos sangra como el de enmarcarlos blade para teléfono, tablet y escritorio o de lo contrario también puedes crear un marco de tamaño personalizado aquí mismo. Entonces podemos ver que tenemos un marco uno aquí mismo en la lona. Por lo que iframe puede considerarse como un documento separado, sobre el cual básicamente se construirá nuestro diseño. Entonces aquí puedo dar click sobre esta bobina en la esquina cuatro, cualquier caída de la esquina. Y voy a hacer click y redimensionarlo y decidir, digamos uno. Lo que iba a usar las herramientas aquí mismo para alterar el eje x y el eje y son el ancho y la altura aquí mismo desde los ajustes que pueden aspirar. Entonces, si quiero una plantilla predefinida, puedo volver a seleccionar los aceites de marco. Puedo usar el atajo F. Y puedo seleccionar cualquier off para la plantilla predefinida. Y eso va a estar directamente en mi Lienzo. Entonces esto es con respecto a la herramienta de marco. Así que siempre que estemos en nuestro diseño, básicamente lo estaremos diseñando para una computadora de escritorio o móvil, o tableta. En ese caso, estos están predefinidos. Las plantillas son marcos predefinidos son útiles. Entonces eso es todo, la herramienta de marco. Y también tenemos una rebanada dos. Entonces déjame explicarte la herramienta Slice con la ayuda de un ejemplo. Entonces déjame pegarlo. Entonces aquí tenemos un pequeño diseño simple por aquí. Entonces ya he seleccionado una herramienta de corte y voy a definir esta sección en particular aquí mismo. Básicamente he usado esta parte particular del diseño y básicamente pueden verte en la dirección aquí mismo. Y si hago clic en el Exportar y selecciono Vista previa aquí puedes ver que los ratones FIC solo van a exportar el área que he cortado. Entonces si cambio este sector, ubicarlo nuevamente t correspondientemente cambia la vista previa. Entonces, si queremos exportar solo una parte particular del diseño, ahí es donde las diapositivas vienen a ser útiles. Puedo definir el área que quiero exportar. Y nuevamente, ven aquí para dar click en vista previa y explotar la parte correspondiente. Entonces eso es con respecto a la herramienta Rebanar. Y ahora vamos a llegar al tercero de la lista. Esas son las formas. Y creo que más ofrece formas como rectángulos, línea, adulto, elipse, polígono, estrella, y muchas cosas diferentes. Y todos estos son un diseño autoexplicativo que quiero seleccionado y solo puedo arrastrarlos al lienzo y están adentro. Y cada vez que básicamente agrego un objeto, por ejemplo a. Rectángulo aquí puedes ver este Coyer edges, que se usa para cambiar el tamaño de los nodos o tener círculos dentro de él, que básicamente se usa para que básicamente se usa para hacer todo el radio, eso es un border-radius. Puedo moverlo hacia adentro o hacia afuera. Correspondientemente , básicamente aumentará o disminuirá el radio del borde. Entonces eso es sobre eso. Y aquí mismo en la tercera herramienta, también tenemos juega una imagen. Entonces, cuando hago clic en él, básicamente pedí seleccionar una imagen. Cuando seleccionen una imagen, otra tecla, arrástrala por aquí. Entonces, cada vez que dimensionas las medias, la imagen correspondiente también se redimensiona correspondientemente para alinearla. Entonces eso es algo genial. Entonces cuando lo cambio, también podemos ver que la música se altera para correspondientemente también. Así que aquí de nuevo, puedo cambiar el tamaño de la imagen. Además, es radio fronterizo. Y si selecciono la imagen aquí mismo en la configuración, nuevamente, haré clic en la imagen y haré alguna corrección básica de color o alguna edición básica para los medios también. También puedo elegir una imagen. Puedo reemplazar la imagen. Todas estas cosas se pueden hacer aquí también. Entonces esto es con respecto a la herramienta Colocar imagen. Puede ser útil cuando estás trabajando con sitios web donde quieras cambiar las carreras, haz algo básico de inmediato. Todos estos escenarios, la herramienta Place Image viene muy bien. Ahora, no hemos llegado a. La herramienta pluma, como su nombre indica, también se explica bastante por sí misma. Básicamente se utiliza para crear básicamente algunos diseños personalizados. Se puede hacer algún diseño es que Sigma no ofrece por defecto usando la herramienta pluma. Y también tenemos la herramienta de plegado que se utiliza para, para crear una especie de curvatura, bordes más afilados. Da click en él y eso va a crear una curvatura. Y además tenemos un mango usando el cual básicamente puedes alinear el ángulo para la curva. Entonces, si vuelvo a hacer clic en el círculo, va a volver a la estructura anterior. Eso es con respecto a la herramienta Pluma y a la Herramienta Pluma aquí mismo. Y también tenemos papi cubo de pintura. Así puedo seleccionar un área y asignarle un color. Entonces eso va todo al cubo de pintura. Y aparte de la herramienta pluma, también tenemos el lápiz y como su nombre indica, ayuda a algunas cosas amplias en el Lienzo. Bien, Y déjame seleccionarlo. Y vamos a borrarlo. Y también tenemos r d x2, que puedo seleccionar la herramienta de texto, hacer clic en un spot en el Lienzo y nuevamente indirecta. Entonces aquí puedo seleccionar el texto y aquí mismo en los ajustes, puedo personalizar un muro de cosas respecto al texto. Puedo cambiar el tipo de texto. Hemos escuchado muchos tipos de texto diferentes que los teléfonos que vienen preinstalados con Figma. Y también puedo agregar algunas fuentes personalizadas también. Entonces voy a agregar en Poppins. Aquí, puedo seleccionar los diferentes parámetros en negrita. Voy a poner ese extra negrita que de nuevo cambia el tamaño de los textos también. Aquí se pueden hacer muchas cosas. Entonces aquí puedes ver que tenemos nuestros diferentes parámetros, como eje x, eje y, el ancho, la altura, todas estas cosas también se pueden alterar. Y también siempre que, cuando vengamos a escribir esto así, puedo presionar Alt en mi teclado. En los casos las ventanas son opciones en Mac, y eso va a cambiar el cursor a un deslizador. Eso, y puedo deslizar el valor hacia la izquierda o hacia la derecha para aumentar o disminuir el tamaño. Por ejemplo, yo puedo seleccionar el texto y llego al selector de tamaño aquí, voy a presionar la tecla Option en mi teclado. Y nuevamente arrastra a la derecha o a la izquierda para aumentar o disminuir el tamaño del texto. Este es un símbolo pequeño atajo que nuevamente la Rumba para que pueda alterar estos valores de una manera mucho más rápida. Entonces eso es respecto al texto. Ahora, echemos un vistazo a cuál es la diferencia entre la herramienta Mover y la herramienta de escala, que no hemos discutido. Entonces, si selecciono la escala a aquí mismo, nuevamente, básicamente escala el texto y el texto dentro de otro contenido dentro de él también escala junto con él. Pero en el caso de la herramienta de movimiento, esto no va a suceder ni llevar se redimensione la siguiente área. Ahora los textos dentro de él por uno para aumentar el tamaño del texto junto con el de sus bordes o su área, puedo usar la herramienta de escala. También se puede ver que el tamaño por defecto también correspondientemente en Grecia. Entonces esa es la diferencia entre la Herramienta Mover, la herramienta Escala. Aquí tengo papi y herramienta, que normalmente se usa para mover las cosas. Y también tenemos los recursos como donde puedes acceder a componentes, plug-ins y todas esas cosas. Y también tenemos el comentario demasiado ligero aquí. Entonces el dual común básicamente viene más útil cuando estás trabajando en equipo, especialmente con varias personas, puedes agregar un comentario, por ejemplo, si quieres una persona en particular, pero cambiar el color del texto, puedes hacer clic en el texto. Después de seleccionar la herramienta común, simplemente puedo agregar cambio duro, color de texto y placenta. Entonces aquí puedes ver mi nombre básicamente entra aquí. Entonces, cuando otra persona inicia sesión en este mismo proyecto en particular, puedes ver mi comando aquí mismo y responder a él y básicamente resolver el comentario también. Entonces sí, eso respecto a la herramienta común, entonces estas son algunas de las herramientas que ofrece Figma. Entonces, como puedes ver, estas herramientas están en nuestro número de lección, pero estas son más que suficientes para convertir básicamente una idea en un diseño. Esa es una visión general bastante básica de las diferentes herramientas que ofrece Figma. Entonces espero que ustedes tengan una comprensión básica de las diferentes herramientas y cuáles son las diferentes funcionalidades que hace cada herramienta. Entonces eso es todo por este video en particular, y los veré chicos en el siguiente video. 5. Visión general de panel de propiedades: Entonces chicos, en este video, echemos un vistazo a la sección de propiedades papi en Figma. Entonces enseguida quiero crear un marco en el lienzo. Entonces para eso voy a usar el atajo que es presionar sobre la tecla F en el teclado. Y voy a arrastrar en un pequeño marco sencillo Model Canvas. ¿Bien? Y también puedo cambiar el color del lienzo para que puedas distinguir entre el lienzo y el propio marco. Y después de eso, voy a añadir también en una elipse. Así puedo hacer click en él y agregar una elipse. O puedo usar el atajo que es 0. Y déjame dibujar una elipse. Entonces solo un consejo rápido para ti. Como puedes ver ahora mismo, los puntos suspensivos básicamente se expanden, compran en el ancho y la altura. Es decir, es una especie de objeto de flujo libre. Entonces, para obtener una elipse perfecta o básicamente cambiar la altura y el ancho simultáneamente, puedo presionar la tecla Mayús en el teclado. Y si lo arrastro ahora, tanto el ancho como el alto básicamente estarían vinculados entre sí y se expanden en la misma proporción. Entonces ese es un pequeño consejo para ti. Y ahora puedo usar las líneas de guía para alinear este objeto en particular y el centro del marco. Y déjame cambiar también el color de la elipse. Ahora tenemos un pequeño diseño en la lona. Entonces en el momento en que haga clic en esta elipse en particular aquí mismo en la configuración de la propiedad. He escuchado muchos ajustes que puedo cambiar para este objeto en particular en el perro aquí se pueden ver las diferentes herramientas de alineación como align, left, align, center, align right, align under the top and all these things. Entonces esto puede ser útil si quieres alinear un objeto en particular en una posición particular dentro de las tres luces. Ahora no lo he aprendido atrás al centro. Y justo debajo de eso tenemos nuestra, nuestra configuración que nos puede ayudar a cambiar la posición del objeto. Por ejemplo, I. Puede cambiar la posición en términos de eje x y eje y. También podemos manualmente y valores aquí. Y aquí, puedo aumentar o disminuir el ancho así como la altura. Entonces en este momento, tanto el ancho como el alto están vinculados entre sí como se puede ver con esta proporción de restricción particular. Entonces, si lo desmarca, el ancho y la altura se pueden cambiar individualmente o van a estar teniendo impacto individual. Como puedes ver ahora mismo. Aquí básicamente puedo rotar el objeto. Entonces ya que básicamente es una elipse, ya que tenemos una anchura y una altura diferentes. este momento se puede ver que en realidad hay algo de rotación sucediendo aquí Cuando también pasamos el cursor sobre ellos. Puedes ver un pequeño punto aquí mismo. Entonces ese es el arco. Entonces, si hago clic en él, básicamente puedo especificar un arco. O de nuevo, básicamente haga clic y arrastre en él es que puedo proporcionar un valor aquí también. Así que esto puede ser muy útil, especialmente cuando estamos haciendo gráficos circulares y todo. Esto puede ser muy útil. Y también conseguimos algunas otras herramientas que nos pueden ayudar a crear un arco preciso. Entonces eso es todo, Eso es con respecto a la herramienta Arco. Y justo debajo de eso, también tenemos limitaciones. Entonces, como puedes ver ahora mismo, la restricción se establece en la parte superior así como en la izquierda. Se puede ver una pequeña línea desde la parte superior así como a la izquierda. Entonces si selecciono el marco y a medida que me muevo de la derecha aquí se puede ver que básicamente no pasa nada. Pero cuando intenté mover el fotograma desde la izquierda aquí se puede ver que el objeto está fijo hacia arriba a la izquierda, es decir arriba e izquierda. Sin embargo, cambio el marco, el objeto se fijará en la parte superior izquierda, por ejemplo, si selecciono el objeto y si cambio la restricción a centro, centro, centro y centro. Así que van a ver, aunque me cambie, el marco, será fijo o suelto y mucho libre. Entonces eso se refiere a las limitaciones. Así que la restricción básicamente viene muy útil, especialmente en términos de diseño web responsive phi cuando queremos especificar cómo se debe colocar un objeto, en qué orden. En ese tipo de escenarios las restricciones juegan un papel muy importante. O va a hacer clic en este botón, los glicanos y dichos aceites de restricción pueden hacer clic y básicamente establecer la restricción requerida. Eso se refiere a la sección de restricciones. Así que pasando, aquí, no hemos llegado a llenar sección. Entonces, si haces clic en la sección de relleno, básicamente puedes cambiar el color del objeto. Básicamente puedo cambiar de sólido o hacer varias otras opciones que tenemos para lineal aquí mismo, donde se puede especificar el color del degradado lineal que queramos. Nosotros también, nuevamente la anatomía. Aquí también tenemos algunos ajustes básicos , son tan increíbles. Herramientas básicas o de edición de imágenes también. Sí. hay muchas opciones diferentes Aquí también hay muchas opciones diferentes disponibles. Y aquí también podemos especificar el color en diferentes unidades como hex, RGB. También hay múltiples opciones para especificar el color de registro posible. Y aquí puedes especificar la opacidad del color. Entonces aquí puedo usar la vieja función para aumentar o disminuir la opacidad también. Y puedo ganar cada vez más alto también. Justo debajo de eso tengo esta opción de acciones. Entonces, si hago clic en más, se agregará un trazo aquí, puedo cambiar el color del trazo, por ejemplo, si quiero algún tipo de trazo verde, puedo agregarlo aquí. Puedo especificar dónde quiero el trazo en su lugar, insights y datos o fuera. Aquí puedo especificar el grosor del trazo, puede aumentarlo o disminuirlo. Y también puedo agregar múltiples trazos haciendo clic en la idea del icono más. Y aquí si hago clic en los tres puntos, básicamente puedo son seleccionados estilo stock. Si quisiera sólido o guión. O puedo especificar la brecha discontinua. Puedo especificar la unión. Si necesito que sea puntiagudo, humor. También hay muchas opciones disponibles aquí mismo en la opción de stock. Entonces eso es todo sobre eso es sección de camiones. Así que déjame quitarlo. Y justo debajo de él aquí tenemos la sección de efectos. Entonces voy a dar click en el icono más. Y por defecto para el otoño vamos a estar teniendo la sombra caída. Ahora mismo. Si echamos un vistazo más de cerca, aquí mismo estamos teniendo una ligera sombra. Entonces, si hago clic en este ícono en particular aquí mismo, estaré teniendo más opciones para personalizar la sombra. Entonces nuevamente especifique el eje x. De nuevo especificar el eje y, como un aumento o disminución de la sangre. Y aquí también puedo especificar el color. Entonces o puedo especificar manualmente el color que quiero audiencia. Aquí puedes dar click en Ahora esta herramienta de pluma en particular. O también puedes presionar el atajo de teclado, es decir i. Y puedes ver que ahora tenemos la herramienta pluma. Y aquí puedes ir a inocente del color que quieras y obtener un pixel de color perfecto. Entonces en este momento tiene electrodos, objetos particulares. Entonces estamos teniendo la misma oportunidad de ese sutil uso ministrado que vendió. Así que reduce las listas de clasificación para difuminar un poco, aumentar el eje x así como el eje y. Y también aumenta. Pero esta impresionante, tan pequeñas personalizaciones que de nuevo, debido a que básicamente mejoran las sombras también. También tenemos qué otras opciones si haces clic en la flecha desplegable como nuestra capa de sombra interna, borrosa, desenfoque de fondo y diferentes opciones y nuevamente eliges entre. Entonces eso se refiere a la sección Efectos. Y finalmente hemos llegado a la sección de exportación. Entonces cuando lo seleccionamos de aquí, y aquí de nuevo, especificamos el tamaño que es errantes a x. Entonces por ejemplo si tu imagen o el StartIndex de diseño, si seleccionas para x, va a ser zona de confort cuatro veces mayor que el tamaño original. Entonces eso se refiere a los criterios de selección del sitio. Y aquí puedes seleccionar todo el formato en el que quieras exportar. Y también puede obtener un pequeño adelanto de cómo va a resultar también el diseño. Y puedes hacer click en Exportar y se descargará. Así que gracias chicos. Eso es básicamente todo sobre la interfaz de Figma. Espero que ustedes tengan una idea básica con respecto a las cosas de esposa, cosas altas y salvajes para usar donde están las cosas, y una idea general que pueda ayudarte a navegar su propia Figma de una manera cómoda. Entonces eso es todo chicos. Y los veré chicos en el siguiente video. 6. Diseño de una página de destino: Entonces chicos, en los videos anteriores hemos visto lo que es Figma. Cuáles son las diferentes herramientas que ofrece el surf, dónde podemos acceder a ellas y qué hacen. Pero aún no hemos hecho nada práctico. Entonces, en este video en particular, vamos a poner en uso práctico todos los conocimientos que hemos adquirido. Mi edificio, una landing page como esta. Entonces en este video, vamos a construir esta particular playa de aterrizaje. Por lo que todos los activos utilizados en este video en particular se enumerarán en la sección de proyectos y recursos. Se puede acceder a eso desde ahí. Entonces, ya sea que veamos más tiempo, pongamos manos a la construcción de este proyecto en particular. Entonces chicos, ya he creado un nuevo proyecto fresco aquí. Entonces, el primer paso es básicamente crear un marco para eso. Voy a presionar el atajo F en mi teclado para seleccionar la herramienta de marco. Y voy a dibujar un marco o mi lienzo. Y después de eso voy a ir a la configuración de Propiedades y voy a cambiar el ancho y el alto. El ancho va a ser 2560 y la altura va a ser de un cuarto para cero. Entonces este es el tamaño en el que vamos a trabajar. Bien. Déjame alinearlo hacia el centro. Y ahora vamos a seleccionar el marco y cambiar su color de fondo. Entonces aquí voy a entrar a la sección de campo y vamos a seleccionarlo. Aquí. Estaré usando un gradiente lineal. Entonces voy a cambiarlo de sólido a lineal. Y déjame ajustar también el asa aquí. Bien. Ahora vamos a seleccionar el primer mango, que es el mango de la izquierda. Y voy a cambiar de nuevo el color a oscuro, y seleccionaré el asa correcta. Y voy a hacerlo justo aquí. Y voy a aumentar la opacidad a max o light y liberales, o simplemente a un slider. Ahora estamos teniendo un fondo degradado lineal. Y déjenme también hacerlo un poco más hacia la derecha. Ahora se ve bien. Entonces ahora lo que voy a hacer es que básicamente voy a añadir un objeto rectangular hacia la derecha de este particular libre. Entonces para eso voy a presionar Alt en mi teclado para seleccionar la herramienta rectangular. Y básicamente voy a dibujar un rectángulo por dólar aquí. Nuevamente, seleccionaré el rectángulo e iré a otra sección aquí. Y quiero cambiar el fondo por radial. Y otra vez, quiero que sea un poco más oscuro. Selecciona el asa más superior. Voy a hacer que este sea oscuro y el otro un poco claro. Ajusta un poco el mango, la posición. Bien. Y aquí también hacemos algunos pequeños ajustes. Déjame obtener un poco más de luz. Ahora que se ve bien. Entonces ahora hemos hecho un gradiente radial aquí mismo hacia la sección derecha del marco. Y ahora es el momento de básicamente agregar en algunas imágenes. Aquí. Ya agregué algunas imágenes aquí. Entonces, para obtener este tipo de imágenes, es bastante fácil. realidad hay una extensión. Entonces ahora mismo estoy en un funcionario de Logitech. Repetir. Entonces estas son las imágenes que hemos hecho uso de este video en particular, pero no puedes hacer clic directamente con el botón derecho y guardarlas y usarlas, o en realidad no funcionará con sigma. Por lo que aquí básicamente podemos hacer uso de una exposición llamada como lata gorda ya se reúnen por lotes. Entonces, si selecciono esta extensión en particular, puedo seleccionar la aplicación actual. Es decir, si hago clic en eso, esta extensión va a mostrar ahora todas las imágenes que se presentan en esta página web en particular. Por lo que puede hacer clic directamente y descargarlos en formato PNG PT. Por lo que esta es una herramienta útil que puedes usar para descargar algunas imágenes de alta calidad de sitios web oficiales como este donde las imágenes del producto son de alta calidad. Entonces ese es un pequeño consejo para ti. Ahora vamos a sumar básicamente son las mayores a la lona. Eso es una especie de marco. Esta es la imagen principal del héroe. Colóquelo justo por aquí. ¿Correcto? Observe también agregar estas imágenes hacia la derecha de la imagen del héroe. El fondo se ve un poco más claro, así que déjame hacerlo un poco más oscuro. Y eso se ve bien. Voy a colocarlos justo por aquí. Entonces, con el fin de disminuirlo. Entonces ahora básicamente hemos sumado el medius y nuestro agruparlos juntos. Entonces ahora si echamos un vistazo a nuestro proyecto terminado aquí puedes ver que estamos teniendo un hermoso anillo alrededor de este ratón en particular. Entonces ahora vamos a crear este efecto particular. Entonces para eso, déjame acercarme un poco. Y voy a ponernos a todos en mi teclado para seleccionar la herramienta elipse. Y voy a dibujar una elipse así como esta. Déjeme colocarlo por aquí. Ahora quiero ir a la sección de campo y voy a quitar el relleno de aquí. Ahora para eso quiero agregar en un trazo y quiero aumentar el grosor a dos. Y voy a seleccionar el color para que sea un color grisáceo aquí mismo. Y quiero cambiar el fondo o el trazo tipo dos lineales. Permítanme hacer algunos pequeños ajustes por aquí. Que sea un poco más brillante. Y quiero rotarlo así y dejar que esto, o simplemente su posición para que quede bien. Entonces hagamos algunos pequeños ajustes. Hagámoslo un poco más pequeño. Muy bien, eso se ve muy bien. Juega con el degradado lineal para hacerlo un poco más realista. Bien. Así que ahora hemos creado nuestro defecto ya ratón como bien conocido, Eso se ve muy bien. Ahora, ya terminamos con esto. Ahora vamos a crear también todos estos ahora malos enlaces por ahí. Voy a presionar T en mi teclado y dejarme dar click aquí. Así que el primero de ahí es todo tipo de pisar aquí. Y voy a seleccionar los pañales predeterminados en el deseo de cambiar el tamaño de fuente a 24. Y también queremos cambiar el color del teléfono a este valor particular. Ahora lo que voy a hacer es que puedo presionar y mantener presionada la tecla Alt en el teclado y hacer clic y arrastrar. Y eso va a hacer una copia exacta de este texto en particular. Y el siguiente byte elimina tienda soporte comercial de la tienda. Ahora mismo vamos a ser rango de señal estos enlaces correctamente. Por lo que estas pautas son realmente útiles de colocar. Estos elementos se encuentran en la posición correcta con espaciado adecuado o consistente. ¿Correcto? Ahora hemos agregado los enlaces de navegación. También vamos a traerlo un poco más alto. Y otra cosa que hago es que quiero decir que la tienda y cambiar su color a blanco. Entonces es como si estuviéramos en el corto Beta ahora mismo. Entonces los enlaces de navegación están bien. Vamos a seleccionarlo y movernos un poco hacia la derecha. Y también vamos a crear otra copia de la misma. Nima sí le conviene. Y vamos a crear otra copia. El logotipo de Windows. Aquí tengo dos íconos. Se copia y pega justo por aquí. ¿Correcto? Sí, ahí también se ven bien. Así que permítanme también ajustar ligeramente su posición. Bien, están buscando definido ahora. Estos son como que miran un poco. No están perfectamente alineados. Entonces déjame seleccionarlos y alinearlos juntos. ve bastante plano. Nariz también agrega el logo justo por aquí. Producto. Y luego también traer ligeramente estos hacia la derecha. Ahora, se ven bastante bien. De hecho, hemos hecho la barra de navegación superior así como un inicio de sesión de búsqueda, así como el logotipo. Y ahora es el momento de agregar básicamente en el contenido de texto aquí mismo para eso nuevamente. Y luego un más B, va a escribir MX Master tres. Y luego me seleccionan y voy a cambiar la funda del teléfono a mayúsculas. Y también voy a aumentar nuestro tamaño de fuente 200. Y también quiero cambiar la audacia a audaz. Y luego siéntate justo por aquí. Nuevamente, quiero dar click sobre este texto en particular mientras presiono Alt, voy a hacer una copia. Hace un CD de mezcla. Entonces para poder usar el tamaño a 30, voy a hacer una audacia deformada a regular y voy a aumentar su espaciado entre letras. Voy a colocarlo justo sobre el principal sano. Bien, ahora, agreguemos también en esta descripción básica particular sobre el producto. Así que de nuevo, incluso un más uno, la tecla D en el teclado. Y vamos a pegar por aquí. Aquí. Ya hemos heredado el estilo del proyecto anterior. Entonces todo lo que hemos hecho es cambiar el color del texto. Vamos a pegarlo justo por aquí. Ahora lo que necesitamos es la parte de revisión. Entonces para esa otra vez, más en la tecla de método abreviado de texto que es T, y luego escribe 50 más reseñas. También necesitamos agregar algunas estrellas. Así que déjame acercar un poco desde la sección de formas o seleccionar o la Herramienta Estrella. Y voy a añadir en esta oscuridad y van a equipos. Es bueno para 30 o Lockett. En primer lugar, no quiero cambiar el ancho a 35, ¿verdad? Y vamos a crear alguna copia. Entonces voy a presionar en espera un par de veces para hacer cinco de estos hace. Hagamos algo de espacio aquí. Y quiero seleccionar la última estrella y voy a hacerla un poco oscura para que destaque este producto en particular hace calificación de cuatro estrellas. Y permítanme seleccionarlos y agruparlos y colocarlos justo por aquí. Ahora, vamos a crear esta sección de precios en particular, así como el botón Agregar al carrito. Entonces lo deseado en la sección de precios, es decir dólar 99.999 aumentará el tamaño para ponerlo justo por aquí. También vamos a agregar en ese rectángulo aquí mismo. Y voy a añadir en un texto que es para resguardar. Déjame reducir su tamaño. Entonces quiero un equipo a este color rectángulos en particular a un color oscuro. Quiero cambiar el color del texto a blanco. También disminuimos la profundidad. Y también hagamos los bordes redondeados. ¿Correcto? Ahora vamos a delinear este texto en particular perfectamente hacia el centro de este botón en particular para que voy a seleccionar ambos y voy a seleccionar los centros verticales de alineación. Y eso va a alinear perfectamente este texto en particular hacia el centro de este elemento rectangular en particular. Y permítanme también agruparlos. Y vamos a colocarlo justo por aquí. Eso también se ve bastante bien. Entonces aquí puedes ver que el fondo se ve un poco en blanco o apagado. Entonces por eso agregué este particular M hace tipo de superposición de texto que llena el vacío del fondo. Entonces ahora agreguemos eso aquí también. Para eso voy a agregar en un texto que sea M max. Y aumentemos el tamaño a 200, o tal vez incluso más que eso. Y déjeme colocarlo justo por aquí. Quiero cambiar el bolo a negrita. Y voy a presionar el corchete de apertura para llevarlo hacia atrás aquí. Y seleccionaré el texto y eliminaré el relleno de aquí. Y quiero agregar en un trazo y color del trazo va a estar alerta un poco brillante. En Grecia. El espesor a dos. Déjame reducir un poco la opacidad. Y eso va a hacer perfectamente el fondo un poco más rico. Déjame seleccionar esto y llevarlos a la cima. Vamos a traerlo un poco hacia él abajo en él. Ahora bien, esto en realidad se ve bastante bien. Aquí. Creo que esto se ve un poco brillante. Entonces eso es otra vez, esa podría ser la profundidad. De nuevo, creo que el fondo necesita ser un poco más oscuro hacia la derecha adentro. Así que vamos a traerlo con más oscuro. Ahora eso se ve bastante bien. Casi hemos imitado todo el prototipo en nuestro proyecto. Aquí puedes ver que estamos teniendo una diferenciación entre la izquierda y la derecha. Para ello, seleccionemos el marco, vayamos a la sección de campo y seleccionemos el zurdo y aumentemos ligeramente la ligereza del color. Y eso va a traer una diferenciación justo por aquí. Entonces eso es todo chicos. Entonces este fue un pequeño tutorial o un ejemplo práctico sobre cómo básicamente podemos darle vida a un diseño. Entonces espero que ustedes hayan podido aprender algo de este video en particular. Entonces como ya dije, todos los recursos que están disponibles o todos los activos que están disponibles en la sección de proyectos y recursos, se puede acceder a él desde ahí. Entonces eso es todo chicos, gracias, mucho Y2 y los veré chicos en el siguiente video. 7. Conclusión: Eso es chicos. Has llegado al final del vaso fundamental femenino. Y esto demuestra lo apasionado que eres por el diseño de la interfaz de usuario. Y realmente espero haber podido entregar el valor que lo hemos estado buscando y por favor compartan en la sección de revisión, ¿ qué opinan ustedes de la clase? Así que eso es todo chicos, hasta que nos encontremos de nuevo con otro pigmento impresionante o dorsal respiratorio Johnson firmando.