Aprende a usar Figma: conceptos básicos sobre el diseño de interfaz de usuario - Diseño UI/UX

1. Introducción al curso: Si quieres convertirte en diseñador de UI/UX, estás en el lugar perfecto. Este curso completo te enseñará todos los elementos esenciales con tutoriales bien organizados y fáciles de seguir. Hola, me llamo Arash y soy diseñador de UI/UX. Juntos, tú y yo vamos a aprender a convertirnos en un diseñador de interfaces de usuario usando el software Figma. Este curso ha sido diseñado para personas completamente nuevas diseño UI/UX o digamos diseño en general. Al principio, vamos a aprender sobre los conceptos básicos del diseño y los elementos de la interfaz y luego aprenderemos juntos acerca de Figma y todos sus secretos ocultos, luego aprenderás a crear un modelo simple. A partir de ahí, aprenderás a configurar tu guía de estilo y a aplicar tus colores apropiadamente a tu diseño. También aprenderás sobre todos los principios de aplicación móvil y diseño web y luego diseñaremos una app de finanzas juntos y te compartiré todas las técnicas necesarias en secretos para diseñar una aplicación de clase mundial. Además, aprenderás tanto sobre Micro Interacciones simples como avanzadas, además, hay una sección dedicada de diseño web donde diseñamos juntos una completa página de aprendizaje moderno. Aquí aprenderás lo esencial del diseño web, como cuadrículas de diseño, interacciones, y mucho más. También hablaremos de los marcadores y cómo puedes crear tu propio portafolio en línea sin escribir una sola línea de código. Además, aprenderás sobre el modelado 3D y la creación de escenas de realidad aumentada. último, pero no menos importante, aprenderás a iniciar tu propio negocio y conseguir tu primer cliente como diseñador de UI/UX. Por lo que durante estos puntajes, diseñaremos y prototiparemos una aplicación móvil de finanzas para desarrollar tus habilidades de diseño y dominaremos todas las herramientas necesarias. Adicionalmente, obtendrás acceso a dos kits de UI completamente nuevos por valor de más de $3,000 y podrás utilizarlos en tus proyectos comerciales. Espero que estés listo para aprender nuevas habilidades y convertirte en diseñador de interfaces de usuario. Te veré en clase. 2. Introducción: Hola a todos. Bienvenidos al primer capítulo de este curso. En esta sección, vamos a estar hablando las diferencias entre el diseño de UI y UX y la estructura del curso que se puede entender cómo se organiza el curso para que usted pueda darle un seguimiento adecuado. último, pero no menos importante, vamos a estar hablando de las herramientas y requisitos que debes conocer para proceder al curso. Sin más preámbulos, empecemos. En primer lugar, voy a hablar de las diferencias entre el diseño de UI y UX. Si bien ambos elementos son cruciales para un producto y trabajan en estrecha colaboración, sus roles son totalmente diferentes. El diseño UX es un campo más técnico y analítico. No obstante, el diseño de la interfaz de usuario se refiere al diseño gráfico con responsabilidades más complejas. Permítanme darles un ejemplo. Si consideras un producto como un automóvil, el chasis es el código que le da una estructura clara. Las otras partes como puertas, filtro de combustible, etcétera representan el diseño UX que permite que el automóvil funcione correctamente. Por otro lado, el diseño de la interfaz de usuario representa la apariencia del automóvil, sus sensores, etcétera. En otras palabras, UX, que significa experiencia del usuario, trata de cómo debe funcionar un producto, y UI, que significa interfaz de usuario, trata de cómo debe verse un producto. Usted, como diseñador de productos, debe saber cómo funcionan juntos estos dos términos y cómo distinguir entre ellos. Por ejemplo, debes saber cuáles son las responsabilidades de un diseñador de UX, y por otro lado, cuáles son las responsabilidades de un diseñador de UI. Como se puede ver en las imágenes, tenemos dos pantallas diferentes. El de la izquierda nos muestra cómo debe funcionar el producto. Por ejemplo, supongamos que tienes una pantalla con dos botones y dos campos de texto, la UX nos muestra cómo estos botones deben interactuar con el usuario, y la imagen correcta es todo sobre interfaz de usuario y nos muestra cómo debe el producto mira. Por ejemplo, aquí tenemos un botón y una plaza. El diseñador de la interfaz de usuario decide qué tan grande debe ser este patrón o qué color es adecuado para ese cuadrado. Estas son las responsabilidades del diseñador de la interfaz de usuario. Muchas gracias por ver este video y te veo en el siguiente video. 3. Estructura del curso: Hola a todos. En este video, vamos a estar hablando de la estructura del curso. De hecho, se puede dividir el curso en dos secciones principales, la parte teórica y la parte práctica. En la parte teórica se crea el 10 por ciento de todo el curso, y la parte práctica forma el 90 por ciento del contenido del curso. En lugar de enfocarnos en teorías, nos enfocaremos en practicar las habilidades que aprendas trabajando en diferentes tipos de proyectos. En la parte teórica, aprenderás sobre conceptos básicos de diseño, elementos de interfaz de usuario, ideas de negocio, etc. En la parte práctica, diseñaremos una aplicación móvil completa desde cero. También aprenderás sobre lo esencial del diseño web diseñando una página de aprendizaje moderna, también hablamos de encuadre alámbrico, modelado 3D, diseño de logotipos, y mucho más. Si eres un principiante completo, recomiendo encarecidamente ver primero la parte teórica y luego proceder con el curso. Por otro lado, puedes saltarte la parte teórica y saltar a crear un proyecto. Muy bien, chicos, muchas gracias por ver este video y los veo en el siguiente video. 4. HERRAMIENTAS: Hola a todos. En este video, vamos a estar hablando de las herramientas requeridas para completar este curso. En este curso, vamos a utilizar diferentes herramientas de diseño gráfico para diseñar juntas interfaces de usuario de clase mundial. El software principal que vamos a utilizar se llama Figma, que está disponible tanto para macOS como para Windows. Incluso puedes usarlo en tu navegador sin instalación. Además, no necesitas pagarlo, es totalmente gratis. El resto de herramientas que aprenderás son Vectary y Adobe Photoshop. También hablaremos de sitios web útiles como Dribble, Behance, etc. Si no tienes alguno de los software antes mencionados, asegúrate de instalarlos antes de iniciar el curso así que te vemos ahí. 5. Introducción a los conceptos básicos del diseño: Hola a todos. Bienvenido de nuevo a otra sección de las anotaciones. En este capítulo, vamos a estar hablando de diseños, iconografía, tipografía, colores, composición, y mucho más. Si quieres convertirte en una interfaz de usuario profesional y genial, diseñador de UX, necesitas comenzar con los conceptos básicos del diseño. Ahora que ya sabes la importancia de conocer los conceptos básicos del diseño, empecemos este capítulo. 6. disposición/composición/diseño: Hola a todos. En este video, vamos a estar hablando de layouts en diseño. Cuando se trata de diseño UX de UI, la forma en que mostramos la información en una aplicación o sitio web es tan importante. De hecho, no existe una forma correcta específica de crear tu propia composición. Por lo que puede crear fácilmente un diseño basado en su propia necesidad siempre y cuando sea consistente y comprensible para los usuarios. Como se puede ver en las imágenes de la derecha, ambas pantallas están bien diseñadas. Si bien el espaciado es diferente, la composición es absolutamente clara y consistente. Necesitas prestar mucha atención a la consistencia mientras estás diseñando una interfaz de usuario. No importa para qué tipo de plataformas estés diseñando, las mismas reglas se aplican a todas ellas. Ahora vamos a echar un vistazo a estas fotos. Como se puede ver en la imagen de la izquierda, las distancias son bastante consistentes. Por ejemplo, si miras la distancia entre la imagen de perfil y la parte superior de la pantalla, puedes darte cuenta de que el valor es de 50 píxeles, y también la distancia entre la misma imagen de perfil y el campo de texto a la derecha bajo eso es de nuevo 50 píxeles. Como se puede ver, el diseño de este diseño es bastante claro, y la razón de eso es por la consistencia del espaciado. En las próximas conferencias, también hablaremos sobre el espaciado y la importancia de eso en el diseño. Ahora si miras la imagen correcta, puedes darte cuenta de que el diseño también es claro en ese diseño. No obstante, la única diferencia son los colores y el espaciado. Pero como habrás notado, el espaciado vuelve a ser consistente. Muchas gracias por ver este video. Te veo en el siguiente video. 7. Jerarquía visual: Hola a todos. En este video, vamos a estar hablando de jerarquía visual. La jerarquía visual es sobre cómo miramos los diseños. ¿ Suena raro? Pongámoslo de otra manera. Nosotros como diseñadores debemos ponernos en los zapatos de los usuarios con el fin de darnos cuenta de cómo ven nuestros diseños. El contenido en cualquier diseño de página digital perseguirá una jerarquía particular. Por ejemplo, los menús van a la parte superior, inferior, izquierda o derecha de la pantalla, o una combinación de éstos. Los encabezados aparecen arriba por el texto. En otras palabras, la jerarquía es una forma sencilla de mantenerse organizada de lo más a lo menos importante. Recuerda que los usuarios definen la jerarquía de cualquier aplicación o sitio web. El ítem que primero llama la atención de los usuarios está en lo más alto de la jerarquía. Las especificaciones visuales que el diseñador puede utilizar para influir en la comprensión de los usuarios de la información son el tamaño, cuanto más grande sea el elemento, más atención atraerá. Si estás familiarizado con el HTML y el proceso de desarrollo web, es posible que sepas que tenemos seis tipos de encabezados desde H1 hasta H6. H1 es el encabezado más grande y H6 es el más pequeño. Cuando queramos conseguir tanta atención, usaremos H1. Por ejemplo, supongamos que queremos llamar la atención de los usuarios a una sección específica o a un ítem específico. En ese caso, usaremos el encabezado más grande o por otro lado, a veces no queremos llamar tanta atención a una sección o contenido específico. En ese caso, podemos usar el encabezado más pequeño, por lo que el tamaño es tan importante. El siguiente elemento es color. Los colores brillantes son más notables que los apagados. Si no tienes suficiente información sobre colores, no tienes que preocuparte por ello porque en las próximas lecciones, cubriremos toda la información necesaria sobre la elección del color adecuado en tu diseño. El siguiente punto es alineación. Un elemento con una alineación diferente de los demás atraerá más atención. ¿Qué significa eso? Supongamos que tienes un diseño de, digamos, cuatro videos diferentes o cuatro fotos diferentes. Si alineas solo uno de esos videos o esas fotos de manera diferente, llamará más atención sobre él. De hecho, en ese caso, el usuario puede darse cuenta de que algo es diferente. El siguiente ítem es el contraste. Colores fuertemente contrastantes llamarán la atención fácilmente. El contraste es un tema muy importante en el diseño de la interfaz de usuario. Hablaremos de contraste en las próximas lecciones profundamente. El siguiente ítem es la proximidad. Elementos que se colocan estrechamente juntos aparecen más relacionados y eso es cierto. Si miras las imágenes del lado derecho, puedes ver que tenemos dos pantallas diferentes. Centrémonos en la pantalla izquierda. Como puedes ver, tenemos dos secciones diferentes, nuevas promociones y nuevas historias. ¿ Te das cuenta de que los elementos en ambas secciones se colocan estrechamente juntos para que los usuarios puedan entender fácilmente que están relacionados juntos? El siguiente punto es la repetición. Los estilos repetidos pueden indicar que el contenido está relacionado. ¿ Qué significa eso? Echemos un vistazo a las fotos de la derecha. Se puede ver que tenemos cuatro cuadrados, tenemos tres círculos, por lo que el usuario puede reconocer fácilmente la relación entre esos elementos. El siguiente ítem es el espacio en blanco, que es otro término importante en el diseño de UI/UX. Más espacio entre elementos llamará más atención hacia ellos. Echemos un vistazo a las imágenes de la derecha pero esta vez necesitamos distinguir entre la pantalla izquierda y la derecha. Como puedes ver en la pantalla de la izquierda, tenemos suficiente espacio, o digamos, suficiente espacio en blanco entre nuestros elementos y nuestras secciones para que los usuarios puedan caminar fácilmente por la interfaz de usuario. No obstante, en la pantalla derecha, se puede ver que todos los elementos están muy unidos y no hay suficiente espacio en blanco entre todos los elementos en ese tipo de disposición. Muchas gracias por ver este video. Espero que lo hayas disfrutado y te veo en el siguiente video. 8. Ruido visual: Hola a todos. En este video, vamos a estar hablando de ruido visual en el diseño. El ruido visual, como se puede adivinar por su título, se trata de una pantalla o parte de un producto digital que tiene tanta información y muchos elementos en ella. Cuando estás diseñando una aplicación o un sitio web, debes prestar mucha atención a los detalles. Porque para el final del día, queremos diseñar una pantalla que sea fácil de usar y fácil de ver. Asegúrate de eliminar de tu pantalla todos los elementos o información innecesarios. Si no estás seguro de si tu diseño tiene ruido visual o no, se recomienda pedir comentarios a los usuarios. Si miras las imágenes del lado derecho, puedes ver que tenemos dos pantallas diferentes. En la pantalla izquierda, no hay ruido visual, y es genial en cuanto al diseño de la interfaz de usuario. Por otro lado, en la pantalla derecha, hay demasiado ruido visual. Como puedes ver, hay tantas garrapatas en la parte superior y luego algunos artículos, que podrían ser videos o fotos, luego otra vez, algunos videos, y después de eso algunas historias, y puedes reconocer que no hay suficiente espacio en blanco entre esos elementos. Muchas gracias por ver este video, te veo en el siguiente video. 9. Iconografía: Hola. En este video, vamos a estar hablando de iconografía en diseño. La iconografía es un lenguaje visual utilizado para demostrar aspectos, contenido, o funcionalidad. Los iconos están destinados a ser simples y claros, elementos visuales que son reconocibles inmediatamente. No tienes que rediseñar iconos conocidos como Icono de Inicio, Icono búsqueda, etc, o digamos, no reinventes la rueda. Se puede obtener acceso a casi todo tipo de iconos en sitios web de forma gratuita o a costos razonables. Pero ¿y si lo necesitas para diseñar algunos iconos específicamente para tu proyecto? En ese caso, debes diseñar iconos que estén en armonía con tu diseño y otros iconos. Ten en cuenta que los iconos deben ser entendidos fácilmente por los usuarios, así que asegúrate de mostrar consistencia en tu diseño. 10. tipografía: Hola. En este video, vamos a hablar de tipografía. ¿ Qué es la tipografía? La tipografía transforma el lenguaje en un elemento visual decorado. tipografía es una de las partes más importantes del diseño de UI/UX por lo que vale la pena tu tiempo para aprender más al respecto. Cuando estés diseñando una aplicación o un sitio web, limita el número de tipos de letra y tamaños que usas para que tu diseño sea sencillo. Comience con dos fuentes como máximo; una para los encabezados y la otra para los cuerpos. Puedes usar fuentes gratuitas o de pago en tus proyectos, pero te recomiendo encarecidamente el uso de fuentes gratuitas. Si le gustará utilizar fuentes pagadas, consulte la licencia cuidadosamente. Deberás informar a tus clientes que necesitan pagar extra por usar fuentes pagadas. Ahora si miras el lado derecho de la pantalla, puedes ver que han clasificado la base tipográfica para ti. Vamos a comprobarlo paso a paso. Justo en la parte superior, tenemos propiedades. Toda línea de texto en cualquier programa tiene una línea base, como puedes ver, se indica aquí con la línea azul y también tiene el espaciado entre letras que puedes modificarlo en tu diseño. Por supuesto, hay más propiedades relacionadas con la tipografía, sin embargo, para preceder estas puntuaciones, basta conocer estas dos propiedades. Ahora centrémonos en la comparación entre el espaciado entre letras. A la izquierda, puedes ver tenemos el espaciado predeterminado, pero a la derecha, modifico el espaciado de esas letras dependiendo del tipo de proyecto en el que estés trabajando, puedes modificar el espaciado entre letras como desees. Ahora hablemos del peso de cada fuente. La mayoría de las fuentes tienen al menos peso de impresión 3D, pero algunas de ellas tienen más. Por ejemplo, una fuente puede tener seis pesos diferentes, como puedes ver en tu pantalla, tenemos aquí de luz a negrita. último, pero no menos importante, la clasificación de las fuentes. Como se puede ver, tenemos dos clasificaciones diferentes para las fuentes: la serif, que es la izquierda en la imagen, y la sans serif, que es la correcta en la imagen. ¿ Cuál es la diferencia? Seguro que puedes distinguir entre ellos, pero déjame explicarte para memorizar la regla de serif y sans serif. En realidad las fuentes serif tienen algún tipo de línea plana en la parte superior de ellas y también la parte inferior de ellas o se puede decir que tienen pies. Por otro lado, las fuentes sans serif no tienen este tipo de líneas. Sans en inglés y francés significa sin, por lo que sans serif significa sin serif. Tú como diseñador eres responsable de elegir el mejor peso de las fuentes y también la mejor clasificación dependiendo del tipo de proyecto en el que estés trabajando. Muchas gracias por ver este video, te veo en el siguiente video. 11. Contraste de colores: Hola a todos. En este video, vamos a estar hablando del contraste de color, que es un tema muy importante cuando se trata de diseño de interfaz de usuario. Aplicar colores de manera efectiva es una habilidad que todos los que trabajan con composiciones visuales deben tener. Tú como diseñador de UI, necesitas saber cómo usar colores en tus proyectos. hora de aplicar colores, la legibilidad y la legibilidad son los factores clave. Investigadores han demostrado que los colores vibrantes permiten suficiente contraste, ayudando a aumentar la legibilidad y legibilidad. Por favor, tome en consideración que demasiado contraste de color puede causar dificultad en la lectura. Recomiendo encarecidamente que los diseñadores creen un nivel medio de contraste, y para resaltar elementos, pueden usar colores de alto contraste. También puedes usar sitios web para proporcionarte una relación al comparar dos colores para ver si hay suficiente contraste o no. Si nos fijamos en los ejemplos de la derecha, tenemos seis colores diferentes. Como se puede ver, los cuatro primeros son aceptables y tienen suficiente contraste, pero los demás no son legibles. Cuando estamos diseñando una interfaz de usuario, necesitamos prestar mucha atención a los colores porque a veces, tú como diseñador, quieres ser lo más creativo posible. No obstante, la creatividad debe venir después de la legibilidad y la legibilidad. 12. paleta de colores;: Hola a todos. En esta lección, vamos a estar hablando de Paleta de Colores. Crear un esquema de color para producto podría parecer una tarea difícil, sobre todo si eres principiante. No obstante, en realidad, no es tan complicado como piensan muchos diseñadores. ¿ Cuál es el esquema de color? Tu esquema de color es una mezcla de colores utilizados en tu interfaz de usuario. Casi todos los esquemas de color contienen los siguientes grupos de colores. Colores primarios, colores secundarios, colores acento, neutrones, colores semánticos. ¿ Cuáles son los colores primarios y secundarios? Los colores primarios y secundarios son los colores base de su interfaz de usuario. A los colores que se utilizan con mayor frecuencia en su diseño de interfaz de usuario se les llama colores primarios. La mayoría de los diseñadores suelen elegir los colores de la marca como colores primarios. De hecho, se recomienda tener no más de tres colores primarios. Opcionalmente, puedes usar colores secundarios con el fin de distinguir tus productos y hacer diseños de interfaz de usuario más interesantes. Pero, ¿cómo elegir los colores correctamente? Cuando estás trabajando con colores, no debes crear una combinación de colores aleatorios. Porque el resultado no sería el que esperas. Para entender cómo trabajar con colores, primero, es necesario saber qué va a facilitar el color y cómo funciona. Aquí te presentamos importantes combinaciones de colores que necesitas conocer. cortesía, que son dos colores que están en lados opuestos de la rueda de color. El siguiente es monocromático, que son tres tonos tonos y los adolescentes son un color base. El último es análogo, que son tres colores que están uno al lado de la rueda de color. Si miras el lado derecho de la imagen, puedes ver que aquí tenemos una rueda de color. Como se puede ver, tenemos monocromáticos. Por ejemplo, si miras el rojo, tenemos tres tonos diferentes o digamos adolescentes de un color base, y también tenemos cortesía. Por ejemplo, aquí tenemos morado y amarillo, que están en lados opuestos de la rueda de color. Por lo que la combinación de estos colores es genial. 13. Espaciado: Hola a todos. Bienvenidos de nuevo a otra lección de este curso. En este video, vamos a estar hablando de espaciado en diseño. La consistencia juega un papel clave en el diseño de la interfaz de usuario. Cuando estás diseñando, necesitas medir todo y mantenerlo consistente. Como diseñador, el espaciado depende de ti, pero una vez que lo configuras, necesitas usar los mismos patrones de espaciado en tus diseños. Por ejemplo, si establece el espaciado entre el encabezado y el cuerpo toma en ocho píxeles, siempre debe usar el mismo espaciado en todo su proyecto. Como se puede ver en la imagen, todo el espaciado se ha medido con precisión y hace que el diseño sea más claro. Por ejemplo, si miras la imagen, puedes ver que tenemos 50 píxeles desde la parte superior hasta el título de las nuevas imágenes y luego ocho píxeles desde nuevas imágenes hasta la parte superior del subtítulo y pasando y pasando. Para mantener claro su diseño, asegúrese de usar patrones de espaciado consistentes a lo largo de su proyecto. 14. Composición: Hola a todos. En este video, vamos a estar hablando de composición en diseño. ¿ Cuál es la relación dorada? El ratio dorado es una proporción matemática entre los elementos de diferentes tamaños la cual se cree que es la proporción más estéticamente agradable para los ojos humanos. El ratio dorado es igual 1:1 .618 y por lo general se ilustra con espirales en forma de concha. Este número fue utilizado para crear proporciones para arquitectura, pinturas, fotografía, diseño, etc. Pero ¿cómo usar la relación dorada en tu diseño? Si tienes una pantalla con el ancho de 1,200 píxeles necesitas dividirla por 1.618 y el resultado será 741.6. Ahora, podemos decir 1,200 píxeles menos 741 equivale a 459, por lo que tenemos dos secciones con el ancho de 741 píxeles y 459 píxeles. Como se puede ver en el lado derecho de la pantalla aquí, tenemos una captura de pantalla del sitio web medio. ¿ Se puede ver cómo se ha diseñado en base a la relación dorada, para que pueda llamar la atención del usuario al lugar correcto en el momento adecuado? 15. Guía de diseño: En este video, vamos a hablar de Guía de Diseño. ¿ Qué es una guía de diseño? Una guía de diseño es un sistema que puede ayudarte a mantener tu diseño consistente. También puede acelerar su proceso de diseño. Los ejemplos que estás viendo son solo unos pocos componentes que se pueden utilizar en tu guía de diseño. Hay muchas cosas que se pueden incluir en tu guía de diseño como elementos de interfaz de usuario, tipografía, iconografía, dimensionamiento y espaciado, paletas de colores, etc. Tener una guía de diseño te hace la vida mucho, mucho más fácil. 16. Fuentes consistentes: Hola a todos. En esta lección, vamos a estar hablando de fuentes en diseño. Como diseñador, siempre trabajas con diferentes fuentes, por lo que necesitas saber cómo usarlas correctamente. Como se mencionó en la sección de tipografía, se recomienda trabajar con dos fuentes diferentes a lo sumo para que tu UI sea simple. ¿ Cuáles son las mejores fuentes para el diseño de UI? Número 1, San Francisco, es mejor para sitios web modernos y aplicaciones móviles. Número 2, Open Sans, es mejor para sitios web y aplicaciones móviles. Número 3, Montserrat, es mejor para sitios web mínimos y aplicaciones móviles. Número 4, Proxima Nova, es genial para sitios web y aplicaciones móviles centradas en contenidos modernos. último, pero no menos importante, Roboto, es mejor para sitios web modernos y aplicaciones móviles también. 17. Colores consistentes: Oigan a todos. En este video, vamos a estar hablando de colores. Aplicar colores a tus elementos de interfaz de usuario es una de las partes más cruciales del proceso de diseño de la interfaz de usuario. ¿ Recuerdas lo que estaba jugando un papel clave en el diseño de la interfaz de usuario? Tienes razón, consistencia. Por lo que necesitas mantener tus colores consistentes también. Por ejemplo, si aplicas azul a los títulos de una página, necesitas aplicar el mismo color a los títulos de otras páginas. O si aplicas un rojo a un botón precioso, debes usar el mismo color para cualquier otro botón precioso de otras páginas. Es por ello que necesitamos una guía de diseño y una guía de estilo. Si miras la imagen de tu derecha, puedes ver que usamos un color negro específico para los títulos, y utilizamos un color específico para nuestros botones, etc. Así que es tan importante mantener tus colores consistentes. 18. Íconos consistentes: Hola a todos. En este video, vamos a estar hablando de iconos en diseño. Es posible que pienses que trabajar con iconos es una parte fácil del diseño de la interfaz de usuario. No obstante, si no prestas atención a los detalles, no obtendrás un resultado apropiado. A continuación te presentamos algunos puntos importantes que debes cuidar. Número 1, escalabilidad de prueba. comprueba si tus iconos aún se pueden reconocer en tamaños pequeños, como 15 por 15 píxeles. Número 2, de tamaño adecuado. El tamaño objetivo recomendado para objetos de pantalla táctil es de 7-10 milímetros. También recuerda agregar relleno entre iconos para evitar toques incorrectos. Número 3, consistencia interna. Utilice el mismo esquema de color para todos los iconos y también los mismos atributos de estilo, como el tamaño de los bordes. Número 4, alineación perfecta. Siempre intenta tener una alineación perfecta en la iconografía, pero a veces, porque tienes iconos con diferentes tamaños, necesitas equilibrarlos tú mismo. Si miras la imagen de tu derecha, puedes ver que tenemos dos grupos diferentes de iconos. En el grupo de la izquierda, se puede ver que tenemos iconografía consistente porque solo usamos iconos de esquema. Pero por otro lado, tenemos iconografía inconsistente porque usamos a vez iconos contorneados y sólidos, lo cual no es recomendable. 19. Elementos UI consistentes: Hola a todos. En este video, vamos a estar hablando de consistencia de los elementos de la interfaz de usuario. Una de las cosas con las que siempre trabajas mientras estás diseñando una interfaz de usuario es un elemento de interfaz de usuario. ¿ Cuáles son los elementos de la interfaz de usuario? Botones, tarjetas, campos de texto, deslizadores, diálogos, gráficos, pasos, tablas, controles de selección, menús, snack bars, etcétera. Como se puede ver en la imagen, elegí sólo algunas de ellas para ti porque, desde luego, no pude ponerlas todas aquí. No obstante, aprenderás sobre casi todos ellos en el capítulo de elementos de la interfaz de usuario. 20. Recursos de fontes: Oigan, todo el mundo. En este video, vamos a estar hablando de recursos de fuentes. En ocasiones elegir las fuentes adecuadas para tus proyectos, podría ser complicado y llevar mucho tiempo, por lo que en esta parte, vas a conocer los mejores recursos en línea para obtener tus fuentes fácilmente. El primer sitio web se llama Google Fonts, que es tan famoso y allí puedes encontrar fuentes gratuitas. El segundo sitio web se llama MyFonts, y allí puedes encontrar fuentes gratuitas y de pago. último, pero no menos importante, puedes consultar el sitio web de Adobe Fonts, que allí puedes encontrar fuentes de pago. Si tienes problemas para emparejar fuentes, también puedes usar Typewolf o FontPair. 21. Recursos de color: Hola a todos. En esta lección, vamos a estar hablando de recursos de color. Ahora es el momento de buscar nuestros colores con el fin de usarlos en nuestros proyectos. La mayoría de las veces, encontrar buenos colores es una tarea difícil para los diseñadores de UI, especialmente si eres principiante. Estos son algunos recursos absolutamente útiles para encontrar colores. Número 1, Color Hunt, número 2, Adobe Color, que es tan útil por cierto, número 3, no sé cómo pronunciarlo, pero creo que es Coolers o Coolers, número 4, WebGradients, que es otro buen sitio web para encontrar gradientes si los estás buscando. Asegúrate de dedicar suficiente tiempo a encontrar la mejor paleta de colores posible para tus proyectos. 22. Recursos de ícono: Oigan, todo el mundo. En este video, vamos a estar hablando de recursos de iconos para tu proyecto de diseño. Como se mencionó anteriormente, la iconografía es una parte esencial del proceso de diseño de la interfaz de usuario, y es tan importante saber dónde puedes encontrar atractivo, y unos iconos estándar. Estos son algunos recursos útiles para encontrar iconos. Número 1, Icono plano el cual puedes encontrar iconos de pago o gratis allí. Número 2, IconFinder, que es otro buen sitio web para encontrar iconos. último pero no menos importante, Nucleo, que es una aplicación, y reúne todos los iconos para ti en un solo lugar. Recuerda que debes usar los iconos que son fáciles de reconocer por los usuarios, así que tómate tu tiempo, y echa un vistazo a todos los iconos disponibles que quizá quieras utilizar en tu proyecto. 23. Introducción a la Figma: Hola a todos. Bienvenido de nuevo a otra sección de este curso. En esta sección, vamos a estar hablando de Figma. ¿ Qué es Figma? Figma es una herramienta de diseño de interfaces que se ejecuta en el navegador. Te da todas las herramientas necesarias para diseñar una interfaz de usuario de clase mundial. Pero en realidad es mucho más que eso por el hecho de que Figma, en su naturaleza, es una herramienta siempre en línea, permite la colaboración en vivo y en tiempo real, lo cual es una característica fantástica. Si bien Figma está basada en navegador, existen versiones de escritorio tanto para Windows como para Mac OS. Te mostraré cómo podrías usar tanto las versiones de navegador como de escritorio en el siguiente video. A diferencia de otras herramientas como Sketch, Figma es libre de usar a menos que necesites crear más de tres proyectos. Puedes crear páginas y archivos ilimitados en la versión gratuita. Muy bien, chicos, muchas gracias por ver este video. Espero que lo hayas disfrutado y te veo en el siguiente video. 24. Requisitos de Figma: Hola a todos. Bienvenido de nuevo a otro video de este curso. En este video, te voy a mostrar cómo puedes crear una cuenta sobre Figma con el fin de usarla para nuestros proyectos. Como mencioné antes, Figma es libre de usar. No obstante, si quieres crear más de tres proyectos necesitas obtener la cuenta profesional que no es necesaria para este curso. Pero la buena noticia es que si eres estudiante y estás inscrito en una universidad o una escuela siempre podrías crear una cuenta de Figma para un estudiante y verificar tu estado de estudiante y utilizarla de forma gratuita. Eso es fantástico. Pero si no eres estudiante no hay problema. Todavía puedes usar todas las características de Figma con la cuenta gratuita y aún puedes crear páginas y archivos ilimitados. ¿ Cómo se puede crear una cuenta? Es tan sencillo. Si abres el sitio web de Figma que es figma.com, puedes hacer click en, “Regístrate”. Aquí podrías elegir si quieres registrarte con tu cuenta de Google o con tu dirección de correo electrónico y establecer una nueva contraseña en tu cuenta. Depende totalmente de ti. También puede iniciar sesión en su cuenta con su cuenta de Google o con su correo electrónico y contraseña que establezca. Déjame iniciar sesión con mi cuenta de Google. Ahí vamos. Como puedes ver, cada vez que creas una cuenta ya tienes aquí algunos proyectos que se llaman Fundamentos de Figma, Prototipado en Figma y Wireframing en Figma. Si abro éste, podrías ver algunos tutoriales sencillos y algunos conceptos básicos sobre Figma y cómo podrías usar eso. No necesitas preocuparte por ello porque vamos a cubrir todos los aspectos de Figma en la próxima serie de videos. Como puedes ver a tu izquierda tienes algunos menús. El primero es tu cuenta o tu perfil. Si haces click en eso puedes ver que es tu nombre. Puedes cambiar tu imagen de perfil. Aquí hay algunas opciones, fichas de acceso personal y no necesitamos usar eso por ahora. Si deseas eliminar tu cuenta puedes usar esta opción. La siguiente opción es Buscar. Puedes buscar a través de tus proyectos y tus archivos. Entonces tienes Recent que te muestra los proyectos y archivos recientes que has abierto. Entonces tenemos Plugins lo que te da la opción de instalar algunos plug-ins lo cual es tan importante. Hablaremos de ello más tarde. Después tenemos Drafts. Puedes crear algunos borradores y también tienes archivos borrados. También puedes crear un nuevo equipo por ahí si quieres trabajar en equipo. También podrías importar tu archivo de boceto. Es increíble. Figma convierte automáticamente tu archivo de boceto archivo Figma y podrías usarlo perfectamente. En este momento estamos usando Figma en nuestro navegador. No obstante, como mencioné antes siempre podrías instalar Figma en tu sistema. ¿ Cómo puedes hacer eso? Es tan sencillo. Si te adelantas a figma.com/downloads o si sigo adelante y entro sesión aquí, es la página de aprendizaje y puedes ver los recursos y si pasas cursor en este enlace podrías ver el enlace de descargas por ahí. Voy a dar click en eso. Aquí tenemos las descargas de Figma lo que nos permite descargar algunos recursos. El primero es la aplicación de escritorio. Aquí podría encontrar la aplicación de escritorio para macOS o la aplicación de escritorio para Windows. Dependiendo de tu sistema operativo podrías descargarlo e instalarlo. Después tenemos Live Device Preview. Es una gran aplicación. Podrías descargarlo desde App Store o Google Play y luego podrías previsualizar tu diseño al instante. último, pero no menos importante, tenemos instaladores de fuentes. ¿Qué es eso? Cuando estás usando Figma en tu navegador, Figma no puede obtener acceso a tus fuentes locales lo cual no es bueno porque la mayoría de las veces necesitas usar tus fuentes locales. Para solucionar ese problema podrías descargar el instalador de fuentes para Windows o macOS entonces podrías instalarlo. Después de eso, puedes obtener acceso a tus fuentes locales en tu navegador lo cual es bastante impresionante. Si bien podrías obtener acceso a tus fuentes locales instalando este instalador de fuentes, te recomiendo encarecidamente que utilices la versión de escritorio de Figma porque realmente acelera tu proceso de diseño. Chicos, muchas gracias por ver este video. Espero que lo hayan disfrutado. En el siguiente video, voy a hablar sobre el entorno de Figma y cómo podrías usarlo de forma sencilla. Nos vemos entonces. 25. Entorno de Figma: Hola a todos. Bienvenido de nuevo a otro video de este curso. En este video, vamos a estar hablando del entorno de Figma. Entonces como puedes ver, ahora mismo, estoy usando Figma en mi navegador. No obstante, voy a seguir adelante y abrir versión de escritorio con el fin de acelerar mi proceso de diseño. Entonces déjame abrir la app de Figma, ahí vamos. Esta es mi cuenta principal, como puedes ver, y esta es la versión de escritorio que podemos usar fácilmente. Entonces, antes que nada, sigamos adelante y creemos un nuevo archivo. Aquí, como pueden ver, podemos dividir el entorno del Figma en cuatro secciones diferentes. El barra de herramientas, que está justo en la parte superior, y consta de todas las herramientas necesarias que necesitas para diseñar una interfaz de usuario de clase mundial. Como puedes ver aquí tienes un menú y aquí tienes algún submenú como archivo, editar, ver, objeto, vector, texto, organizar, etc. Cubriremos todas esas opciones durante este curso. Aquí tienes algunas herramientas como herramientas de movimiento, escala, y también la herramienta de marco y corte. Después tienes la herramienta de objetos o formas y también la herramienta de lápiz. Entonces tenemos el texto y los comentarios. Justo a tu izquierda, tenemos el panel de capas que enumera todas tus capas y también todos tus activos respectivamente. Como pueden ver, no hay ningún componente aquí todavía porque no creamos ningún componente hasta ahora. No obstante, en las lecciones futuras, aprenderemos a utilizar también estas secciones. Entonces a su derecha, tenemos al inspector, que consta de tres partes diferentes. Como puedes ver, tenemos diseño, prototipo y código. Entonces si hago clic en una “A”, en mi teclado, puedo crear una mesa de trabajo para iniciar mi proceso de diseño. Por ejemplo, puedo elegir teléfono y aquí voy a elegir iPhone 11 Pro o X. Como puedes ver, tienes la dimensión justo por ahí, voy a dar click en eso, y aquí, tienes tu mesa de trabajo y puedes ver el nombre en la capa de la lista. Si haces doble clic en eso, puedes cambiarlo por lo que quieras. Por ejemplo, digamos en casa, bastante bueno, y puedo elegir fácilmente la forma del rectángulo, y ahí vamos. Tenemos otra capa justo debajo de esta mesa de trabajo. Aquí de tu lado derecho en la sección de inspector, tienes diferentes opciones. Por ejemplo, en la sección de diseño, tienes alineaciones, tienes una dimensión, y también la ubicación, el posicionamiento de tu forma. También tienes la sección de restricciones, y nos sumergiremos en cada sección por separado en la siguiente serie de videos. Entonces no te preocupes si no entiendes cuáles son las restricciones o básicamente qué hacen. Por ejemplo, aquí tenemos capa y puedes ajustar la opacidad de tu capa y su modo. Aquí tienes relleno para cambiar el color. Como puedes ver, tenemos trazo, tenemos efectos para agregar algunas sombras, y luego tenemos la exportación. Para la creación de prototipos, puedes ir a la sección de prototipos. Aquí tenemos diferentes opciones así que cubriremos en la sección de prototipos de este curso. También tienes la sección de código, y es tan útil si eres desarrollador o quieres entregar las propiedades de tu diseño a tu desarrollador web o incluso a tu desarrollador de aplicaciones porque puedes exportar fácilmente sus propiedades en código, por ejemplo, para iOS, tenemos propiedades variables y diferentes. Eso es bastante guay. último, pero no menos importante, la cuarta sección es el Lienzo, que está en medio de Figma. Aquí colocarás todos tus diseños y todas tus mesas de trabajo. También tienes la opción de compartir justo ahí, que puedes compartir tu archivo o componentes con tu integrante del equipo, o incluso puedes enviarlo a tu cliente para que revise el proyecto, etc. Todo bien chicos. Muchas gracias por ver este video. Espero que lo hayas disfrutado y te veo en el siguiente video. 26. Formas: Hola a todos. Bienvenido de nuevo a otro video de este curso. Espero que lo estés haciendo bien. En este video, vamos a estar hablando de las formas. El instrumento de forma es una de las herramientas más importantes cuando estás diseñando una interfaz de usuario porque no importa qué tipo de interfaz estés diseñando, seguro que necesitarás usar una de estas formas. Justo en la parte superior de la barra de herramientas, puedes encontrar las formas. Si haces click en eso, puedes ver que aquí hay diferentes formas. Por ejemplo, tenemos el rectángulo. Si selecciono eso, puedo crear fácilmente esta forma arrastrando y soltando. Como puedes ver, hemos creado un rectángulo y se llama rectángulo 1. Cada forma tiene algunas propiedades, por ejemplo, esta forma tiene la propiedad de radio de esquina, y como puede ver, está indicada con estos puntos. Si solo hago clic en uno de ellos y arro el ratón un poco así, puedo ajustar el radio de esquina a 30. Alternativamente, puedes cambiar la cantidad de radio de esquina, escribiendo el inspector por ahí, por ejemplo, puedo ponerlo en 50 así. Si quieres cambiar el radio de esquina o solo uno de esos puntos o aristas, puedes mantener presionada la tecla “Opción” y luego arrastrar y soltar así. Como puedes ver ahora tenemos diferente cantidad de radio de esquina para cada punto como este. De hecho, puedes personalizar tu radio de esquina así si solo haces clic en “Esquinas independientes” en este ícono, puedes ver que hay alisado de esquinas, y voy a dar clic en eso. Aquí tenemos un slider y voy a ponerlo en 60 por ciento. Como puedes ver aquí, está escrito iOS, entonces ¿qué significa eso? En realidad en iOS, Apple usa esquinas suaves. Si estás familiarizado con Sketch, también usamos el mismo término. Como puedes ver, hace que nuestros rincones sean mucho más suaves. Por supuesto que puedes aumentarlo, sin embargo, 60 por ciento hace que se vea genial, perfecto. Por supuesto, puedes cambiar el color de tu forma, como lo hemos comentado en el video anterior. No obstante, cubriremos todas esas características en la próxima serie de videos, pero por ahora, apegémonos a las formas. A la siguiente forma se le llama línea. Es sólo un derrame cerebral. Si sostengo “Shift” y “dos”, puedes ver que Figma me trae estas formas automáticamente de una manera que la pueda ver con claridad, así que voy a dar click en eso. Aquí en trazo, también tienes diferentes propiedades. Por ejemplo, puedes cambiar el grosor de la línea o digamos este trazo así. Déjame ponerlo en 10. Si haces click en estos puntos, puedes ver que aquí tenemos diferentes opciones. Se llama golpe avanzado y tenemos gorra y nos unimos. ¿ Qué significa eso? Echémosle un vistazo. Déjame abrir este menú y aquí tenemos diferentes opciones. Tenemos redondo que hará que nuestra línea sea redondeada para ambos lados. Tenemos cuadrado, lo cual no tiene sentido porque es algo igual. Tenemos flecha de línea como esta, y tenemos flecha de triángulo como esta. Si elijo, por ejemplo, “Flecha de línea” y decido modificar esta forma haciendo doble clic en esta forma y por ejemplo, moviendo este punto, se puede ver que cambiará automáticamente, bastante bien. Cubriremos las suposiciones en las futuras lecciones. Ahora hablemos de la siguiente forma, déjame hacer clic en “Deshacer” para terminar de editar. La siguiente forma es una flecha, así. Es de nuevo una línea o digamos que solo trazo que acabamos de crear. No obstante, podrías crear una flecha como esta también. Como puedes ver, tienes diferentes tipos, redondo, cuadrado, flecha de línea y flecha de triángulo. El primero, por defecto estaba mezclado porque teníamos una línea personalizada. La siguiente forma es el círculo. Voy a sostener “Shift” con el fin de mantener la relación de aspecto así. Voy a arrastrar y soltar para crear este círculo bastante bueno. Este círculo tiene una nueva propiedad la cual se llama arco. Demos click en eso y tratemos de movernos un poco para ver qué puedes lograr modificando esta propiedad de esta manera. Eso es bastante impresionante y sobre todo es tan útil cuando estás creando un gráfico, impresionante. A la siguiente forma se le llama Polígono, voy a crear una. Quitemos esta forma por ahora. Voy a hacerlo más grande, bastante bueno. La forma del polígono tiene dos propiedades diferentes. El primero es radio de esquina, y funciona como rectángulos. El segundo se llama recuento, lo que significa el número de aristas que estamos usando que estamos creando. Permítanme aumentarlo sosteniendo “Shift” y haciendo clic en eso así. Voy a mover mi ratón hacia arriba y hacia abajo. También puedes modificarlo en el inspector, pongámoslo en ocho, bastante bueno. También puedo modificar el radio obviamente aquí, fantástico. Déjame quitarme eso y voy a crear la estrella una vez más aquí, bastante bien. El forma de estrella tiene tres propiedades diferentes. El primero es radio de esquina, de nuevo, así. El segundo es la relación, que es la relación entre estos dos bordes así. Eso se puede modificar, voy a ponerlo en 40 El último es contar. Eso puedes aumentar y disminuir como desees, bastante impresionante. último pero no menos importante, es la imagen de lugar que puedes elegir una imagen de tu sistema. Si arrastras y sueltas así y asegúrate de mantener presionada la tecla Mayús en tu teclado para mantener la relación puedes colocar una imagen. También puedes cambiar el radio, es tan sencillo. Ahora hablemos de la propiedad de dimensión justo por ahí. Aquí, como puedes ver, tienes diferentes propiedades como X e Y, que se refiere a la posición de esta forma. Si pongo cero y cero para Y, como pueden ver, se mueve a la esquina superior izquierda porque los puntos cero y cero comienzan desde la esquina superior e izquierda. Ahora puedes modificar el ancho y la altura. Por ejemplo, puede configurarlo en 300. No obstante, como se puede ver, el ancho y la altura están vinculados. Si quieres cambiarlos por separado, puedes desvincularlos fácilmente haciendo clic en este icono, que se llama proporciones constreñidas, y luego puedo modificar el ancho o la altura por separado así. Al igual que en Sketch, puedes hacer operaciones matemáticas aquí. Por ejemplo, puedo dividir 300 por 2, así y allá vamos, tenemos 150 o puedo multiplicar 180 por 2. Es una gran y útil característica cuando estás diseñando tu interfaz de usuario. Tenemos las alineaciones donde están justo en la parte superior. Por ejemplo, si elijo este objeto o esta forma, puedo alinearlo con el centro horizontalmente, puedo alinearlo con el lado izquierdo, alinearlo con el lado derecho, alinearlo con la parte superior, alinearlo verticalmente, y alinearlo al fondo. Pero, ¿y si quieres alinear un objeto que se coloca dentro de otro objeto? Supongamos que vamos a poner este objeto aquí, voy a cambiar el color a algo como gris oscuro, así. Voy a hacerlo más pequeño un poco. Supongamos que vamos a alinear esta forma con nuestro rectángulo, que parece un cuadrado ahora mismo, pero ¿cómo podemos hacer eso? En primer lugar, debes asegurarte de que elegiste ambos objetos al mismo tiempo. Puedes mantener presionada la tecla Mayús en tu teclado y seleccionarlas, o bien puedes seleccionarlas así, arrastrando y soltando. Después harás clic en “Alinear horizontal al centro” y “Alinear vertical al centro” y ya está hecho, bastante impresionante. Ahora en este video, hemos aprendido a usar formas y ya conoces las propiedades de cada forma específica. Espero que hayas disfrutado de este video y te veo en el siguiente video. 27. Edición de formas: Hola a todos y bienvenidos de nuevo a otro video de este curso. En este video, vamos a estar hablando de editar formas, que es un tema muy importante porque sucede todo el tiempo que puede que necesites para editar tus formas. En primer lugar, voy a presionar, “A” y como pueden ver ahora puedo elegir mi tablero de arte. Abramos el menú de escritorio y aquí voy a elegir, MacBook Pro, para este video no importa, pero tengo suficiente espacio para mostrarte cómo puedes editar tus formas. Entonces lo que voy a hacer es crear aquí un nuevo rectángulo. Voy a aguantar, Shift, y arrastrar y soltar así. Entonces aumentemos el radio de esquina. Por cierto, si mantienes pulsada la tecla Mayús en tu teclado, puedes aumentar o disminuir el radio de esquina en 10 unidades, así, bastante bueno. Entonces lo voy a llenar de otro color, así que busquemos un azul muy bonito. Creo que es genial y luego voy a crear otro rectángulo aquí, así que vamos a sostener, Shift, otra vez, y te voy a mostrar una muy gran técnica para elegir tus colores correctamente. Si no estás seguro de cómo podrías emparejar un buen color con estos azules que crea un gran contraste entre ellos, primero puedes elegir el mismo color como este. Entonces si simplemente mueves este círculo al lado más oscuro de estas paleta de colores así, puedes elegir fácilmente una combinación perfecta con tu color de fondo, lo cual es increíble, ¿no? Ahora bien, ¿cómo podemos editar nuestra forma? Para poder editar cualquier forma, primero, necesitamos entrar al modo de edición. Para ello, puedes hacer doble clic en esa forma y ahí vamos. Ahora estamos en modo edición, y como pueden ver, aquí tenemos cuatro nodos diferentes, o digamos puntos con los que podemos empezar a editar nuestra forma. Si hago clic en el círculo, y trato de moverlo un poco. Se puede ver que puedo editar fácilmente esta forma como deseo, así. Incluso puedo aumentar el radio de estos rincones en el inspector, algo así. También puedes agregar más nodos en tu camino, así. Por ejemplo, aquí puedo hacer click una vez y allá vamos, acabo de crear un nuevo nodo, y puedo editarlo de otra manera como esta. Permítanme volver al primer estado de este rectángulo, o digamos cuadrado así. Ahora suponga que desea crear algo así como una curva, en ese caso, puede utilizar la herramienta de plegado, que está aquí. Puedes hacer click en eso y elegir uno de esos nodos, luego puedes ver que aparece el controlador manejado, y nosotros este controlador manejado puedes ajustar fácilmente tu curva así. Es impresionante, ¿no? El atajo de herramienta de curva está sosteniendo, Comando, en tu teclado, ahí vamos. Puedes ajustar fácilmente tu curva con el fin de cumplir tus expectativas, bastante impresionante. Después de editar tu forma, debes recordar cerrar tu modo de edición. Para hacer eso puedes hacer click, “Deshacer” así, así que En este momento estamos fuera del modo de edición. Pero, ¿no es mejor crear un icono real para mostrarte cómo podrías usar el poderoso modo de edición? Hagámoslo. En primer lugar, voy a acercarme un poco así, luego voy a entrar en modo edición, vamos a duplicar click. Después de eso voy a crear un nuevo nodo aquí mismo. Voy a hacer clic en eso, luego lo voy a arrastrar hacia abajo sosteniendo, Shift, así, bastante bueno. Lo siguiente que voy a hacer es seleccionar todos los nodos sosteniendo, Comando A o Control A, en Windows, entonces voy a aumentar el radio de esquina. Aumentémoslo a seis quizá, eso es bastante bueno. Ahora lo voy a hacer un poco más alto, y lo último que voy a hacer es rotar este ícono. Para rotar cualquier cosa en Figma, puedes desplazar el ratón justo fuera de tu forma, y puedes ver que el indicador o icono de rotación aparece inmediatamente. Entonces voy a aguantar, Shift, y lo voy a girar 180 grados. Como puedes ver, tienes la cantidad aquí, y allá vamos. ¿ Qué aspecto tiene? Tienes razón, es como un marcador. Se puede ver lo increíble y poderosa que es esta herramienta de edición? Voy a hacer algunos cambios para que sea mejor. Déjame hacer doble clic en la forma, y voy a seleccionar estos dos nodos superiores y luego aumentar el radio de esquina a 26 tal vez, bastante impresionante. Déjame seleccionar ambas capas y las voy a agrupar por, Comando G o Control G, en Windows, y lo voy a nombrar, marcador. Entonces, ¿qué más podemos hacer? Vamos a seguir adelante y crear un polígono aquí, voy a establecer el color en el mismo azul que nuestro icono de marcador. Copiemos y peguemos estos fondos como nuestro marco. Voy a mantener, Tecla de comando o Tecla de control, en Windows y dar clic en estos rectángulo o cuadrado y copiarlo por, Comando C, y lo voy a pegar. No obstante, recuerda mover esta capa fuera de estos grupos de marcadores. Voy a moverlo un poco así, ahora vamos a hacer doble clic en este triángulo. Aquí voy a crear otro nodo justo en la parte inferior, así y déjame arrastrarlo un poco, ahí vamos. Contamos con nuestro marcador GPS. Eso es bastante guay, ¿no? Déjame hacerla más pequeña. Fantástico. Déjame agruparlo y voy a escribir. Déjame agrandar un poco este tablero de arte, entonces te voy a mostrar cómo puedes usar la herramienta de bolígrafo. Supongamos que se quiere crear, por ejemplo, una flecha curva, ¿cómo se puede hacer eso? Es tan sencillo. Empecemos con agregar un nodo, luego necesitas otro nodo como este y el último aquí, eso es todo. En primer lugar, voy a aumentar el grosor del trazo a cuatro tal vez, luego voy a rotarlo un poco. Si hago clic en estos puntos, puedo cambiar el modo de tapa a flecha de línea así, es bastante genial. Incluso puedo editarlo así. ¿ Se puede ver lo fácil que es crear nuevas formas y editarlas? Bastante impresionante. Muy bien chicos, muchas gracias por ver este video, espero que lo hayan disfrutado. En la próxima serie de videos, practicaremos el uso de estas herramientas creando proyectos del mundo real. Entonces no te preocupes, si no entiendes todos los detalles, me aseguraré de explicarlo todo a detalle. Te veo en el siguiente video. 28. Conceptos básicos de capas: Hola a todos. Bienvenido de nuevo a otro video de este curso. En este video, vamos a estar hablando del panel de capas. Saber que cómo podrías usar correctamente el panel de capas es tan importante. Puede parecer fácil de usar, sin embargo, a veces se pone un poco complicado en cuanto a reordenar tus capas y tus objetos. Vamos a sumergirnos en estas partes y les voy a mostrar cómo se podría utilizar de manera eficiente. Como puedes ver, tienes la lista de capas a tu izquierda. Aquí pudiste ver todas tus capas, todos tus grupos, y también, todos tus marcos. Siempre que se crea una nueva forma o un nuevo objeto, va a la parte superior de la lista de estas capas. Vamos a probarlo. Voy a crear un rectángulo aquí, y como pueden ver tengo el rectángulo 1. Para cambiar el nombre de este rectángulo, voy a hacer doble clic en eso y llamémoslo R1. Entonces voy a crear otra forma. Vamos a crear un círculo. Bastante bien. Voy a cambiar el color, para que sea más visible. Bastante impresionante. Yo lo voy a llamar C1. Como se puede ver, C1 se ha colocado en la parte superior de la lista de estas capas. Aparece al frente de tu Lienzo. Esta es la razón por la que este círculo es visible aquí. Si muevo esta capa por debajo de R1, ya no es visible. No obstante, aún podrías cambiar sus propiedades como su color o su tamaño. Si lo muevo de nuevo a su posición anterior, se puede ver que es visible de nuevo. Ordenar tus capas es tan importante. Ahora supongamos que vamos a agrupar nuestras capas. Seleccionemos estas dos formas y mantengamos el Comando G. Como puedes ver, acabamos de crear el grupo uno. Siempre que quieras ver las capas incluidas en este grupo, puedes usar la flecha pequeña junto a estos íconos, que indica que se trata de un grupo. Voy a dar click en eso, y ahí vamos. Para seleccionar una capa, puedes hacer click fácilmente en eso. Como puedes ver, aparece una bicicleta azul claro con el fin de mostrar que esta capa ha sido seleccionada. Si vas a Menú, y vas a Preferencias, puedes ver que aquí tienes diferentes opciones. Una de ellas es, Resaltar capas al pasar el cursor. ¿ Qué significa eso? Significa que si pasas el ratón encima de cada capa, como por ejemplo C1, puedes ver en el Canvas que aparecerá la línea azul para mostrar que esta es tu capa deseada. Voy a seleccionar eso. Si desea desagrupar estas capas, puede hacer clic fácilmente en el nombre de estos grupos y luego hacer clic derecho aquí, y puede hacer clic en “Desagrupar” así. Voy a usar Command Z o Control Z en Windows. Ahora bien, ¿y si quieres ocultar algunas capas? Es tan sencillo. Supongamos que vamos a ocultar este círculo, que se llama C1. Para hacer eso, en primer lugar, necesitamos pasar el cursor sobre esa capa específica como esta. Después aparece inmediatamente un icono de ojo, junto a estos candado. Voy a dar clic en este icono de Ojo y puedes fácilmente apagar y encender esta capa, así. También puedes bloquear cada capa haciendo clic en este candado para evitar que tu capa se edite accidentalmente. Cuando bloqueas tu capa, no puedes mover tu capa, no puedes interactuar con tu capa, sin embargo, aún puedes cambiar sus propiedades. Vamos a probarlo. Voy a tratar de mover un poco esta capa. Como pueden ver, porque se ha bloqueado, no puedo moverlo. posición es fija y puedes usar esta técnica para bloquear tus fondos. A veces puede ser útil. No obstante, ahora intentemos cambiar algunas de sus propiedades. Por ejemplo, voy a cambiar su color. Como pueden ver, todavía puedo obtener acceso a sus propiedades, aunque ha sido bloqueado. Para desbloquear eso, puedes volver a hacer clic en este candado, y ahí vamos, está desbloqueado. Puede reconocer el tipo de cada capa en su lista de capas en función del icono junto a su nombre. Como puedes ver en la imagen, tenemos marco, tenemos grupos, tenemos componentes de los que hablaremos en futuras lecciones, tenemos instancias, tenemos objeto de texto, tenemos forma, imagen, un GIF animado. Ahora, hablemos del posicionamiento de tus capas. Una vez más, porque te voy a mostrar cómo puedes reordenar el posicionamiento de tus capas justo debajo de Canvas. Supongamos que quieres traer el cuadrado o digamos rectángulo al frente. Para hacer eso, por supuesto puedes ir a la lista de Capas y moverla así, y ya está hecho. No obstante, existe una alternativa para eso. Puedes fácilmente hacer clic derecho en eso en Canvas, y puedes elegir, Traer al frente. Ahí vamos. Si estás familiarizado con Adobe Illustrator, sabes que también podrías usar la misma funcionalidad en ese software. Ahora vamos a la sección de activos. Aquí, como pueden ver, porque aún no hemos creado ningún componente, aquí no podemos ver ningún componente. Básicamente componentes, son partes de tu diseño que puedes reutilizar. Hablaremos de ello más adelante, y nos sumergiremos en los componentes en las futuras lecciones. Tenemos otra opción aquí la cual se llama páginas. Justo en la parte superior, como pueden ver, aquí tenemos Página 1, y si hago click en eso, pueden ver que tengo páginas. Se llama Página 1. Se puede cambiar el nombre de eso. Voy a cambiarlo a página web. Puedes duplicar eso si solo haces clic derecho en esa capa, como puedes ver, puedes agregar una nueva página a esta lista de páginas, así. Puedes llamarlo Página 2. La buena noticia es que no hay límite para crear páginas. Eres libre de crear tantas páginas como quieras. Por ejemplo, podrías separar algunas partes de tu diseño para que quede claro cuando estás trabajando en equipo, o si quieres crear diferentes prototipos, es una buena idea tener páginas diferentes también. Voy a ir a la página web, y eso es todo por este video. Muchas gracias por ver este video. Espero que lo hayas disfrutado y te veo en el siguiente video. 29. Operaciones booleanas: Hola a todos. Bienvenido de nuevo a otro video de las partituras. En este video, vamos a estar hablando de las operaciones booleanas. En realidad, hoy en día, utilizamos operaciones booleanas casi en todos los aspectos de nuestra vida, como el arte, la programación, el diseño, etc. difícil que pueda sonar, en realidad, las operaciones booleanas son tan simples. Sumérgete en ello y te voy a mostrar cómo podrías usarlos fácilmente. Como pueden ver, aquí he creado un proyecto sencillo con cuatro mesas de trabajo diferentes, y las llamo Unión, Restar, Intersectar, y Excluir. Estos son nuestros operadores booleanos. Como puedes ver aquí, tenemos este Menú y tenemos Selección de Unión, tenemos Selección de Restar, tenemos Selección de Intersección, y tenemos Selección de Excluir. En primer lugar, déjame elegir esta mesa de trabajo y voy a sostener “Shift” y dos, así, como pueden adivinar, sindicato significa combinado. Si trato de solapar estas formas con este círculo, como pueden ver, se han solapado. Si elijo las operaciones booleanas y elijo operación Union, se puede ver que hemos combinado estos dos círculos en una sola forma. Aquí podrías, por supuesto, obtener acceso a subcapas como estos círculos y aún puedes editarlo. No obstante, tenemos una sola forma y estas operaciones son tan útiles para crear iconos, y hablaremos de ello más adelante. Ahora, sigamos adelante y hablemos de la próxima operación que es Restar. En primer lugar, permítanme solapar estas formas así. Voy a elegir Restar. Como se puede ver, resta la sección superpuesta de la forma base. El tramo solapado es esta parte en el medio. Cuando elijo Restar, elimina estas secciones superpuestas de esta forma base, que es el círculo izquierdo así. Como se puede ver, la operación Restar es lo contrario de Unión. El siguiente operativo es Intersect. Déjame solapar estas dos capas así. Voy a dar clic en “Intersectar selección” y esta operación elimina todas las áreas excepto la sección superpuesta de esta manera. El siguiente operativo, que es el último, se llama Excluir y es lo opuesto a la operación Intersect. Si solapo estas dos formas así, y hago clic en “Excluir selección”, se puede ver que mantiene todas las áreas excepto la sección superpuesta. Entonces, ¿viste lo sencillo que es usar operaciones booleanas? Son tan útiles. Ahora bien, ¿no crees que es buena idea crear algunos iconos con este conocimiento? Eso es genial. En primer lugar, voy a crear otra mesa de trabajo y voy a hacer clic en 'A' en mi teclado. Arrastremos y soltemos para crear un nuevo marco como este. Supongamos que queremos crear un icono de búsqueda. ¿Qué necesitamos? Necesitamos un círculo. Voy a crear uno, y no voy a llenarlo de colores. Voy a quitar el relleno y añadir un poco de trazo, así. Voy a aumentar el grosor de este trazo. Déjame ver, creo que 15 es genial y voy a crear un rectángulo también con el ancho de 15 también. Voy a cambiar el color a negro así. Déjame acercar un poco. Yo lo voy a mover hacia arriba. Entonces vamos a seleccionar ambos objetos y alinearlos con el centro. Voy a elegir “Selección Sindical” así. Bastante bien. Ahora puedo rotarlo. Impresionante. ¿Viste lo sencillo que es crear un icono con estas operaciones booleanas? Bastante bien. Espero que te haya gustado. Ahora vamos a crear otro icono. Por ejemplo, vamos a crear un icono de nube. Voy a crear un rectángulo aquí, así. Aumentemos el radio. Bastante impresionante. Necesito crear un círculo así como este. Déjenme superponerlo. Bastante bien. Después los voy a seleccionar a ambos y seleccionar “Selección sindical”. Ahí vamos, tenemos nuestra nube. Si cambio el color a negro, puedes ver lo increíble que es. También puedes personalizarlo más tarde o incluso, por ejemplo, puedo quitar el relleno y puedo agregar trazo como este si prefieres estos estilismo. Pero recuerda cuando estás diseñando algunos iconos para un proyecto específico, necesitas mantener el grosor de tus líneas igual para cada icono específico con el fin de ser consistente en tu diseño. Muy bien chicos. Muchas gracias por ver este video. Espero que lo hayas disfrutado y te veo en el siguiente video. 30. Texto: Hola a todos y bienvenidos de nuevo a otro video del curso. En este video, vamos a estar hablando de textos. Nosotros como diseñadores UX de UI utilizamos textos todo el tiempo y necesitamos conocer todos los secretos detrás de la herramienta de texto. Por lo que para crear un texto en Figma, fácilmente puedes dirigirte a la barra de herramientas y hacer clic en este icono de texto. O podrías presionar T en tu teclado así. Impresionante, y si haces clic una vez, crearás un área toma capa o digamos una capa de textos de párrafo. De acuerdo, así que voy a escribir “Hola”. Somos diseñadores UX de UI. Bastante impresionante, y como puedes ver, este tipo de línea de texto crece horizontalmente cuando estás escribiendo, ¿de acuerdo? Por supuesto que se puede cambiar, sin embargo. En primer lugar, déjame mostrarte cómo puedes cambiar el tamaño de la fuente. Si te diriges al texto Inspector de tu lado derecho, puedes cambiar la fuente, puedes cambiar el tamaño de la fuente, puedes cambiar el peso. Hablaremos de todas estas propiedades más adelante. Entonces, en primer lugar, voy a cambiarlo a 36. Bastante impresionante. Ahora voy a seleccionar el marco y voy a presionar Shift y a nuestra derecha. Entonces como mencioné antes, esta es una línea de texto de área. Entonces, ¿y si quieres que crezca verticalmente? Para hacer eso, puedes hacer click en estos puntos y aquí tienes un montón de opciones para cambiar. Pero lo que necesitamos es estos redimensionamientos, como se puede ver, está establecido como predeterminado para crecer horizontalmente. Si quieres que crezca verticalmente, puedes cambiarlo para que crezca verticalmente aquí, y si sigo escribiendo a partir de ahora, crece verticalmente. Voy a escribir, “Gracias por tu apoyo”, así. También puede crear una línea de texto de tamaño fijo. O podrías cambiarlo aquí así. Pero, ¿y si quieres crear una línea de texto de tamaño fijo tú mismo? Es tan sencillo. En primer lugar, elegirás la herramienta de texto, luego harás clic y arrastrarás así, y de esta manera especificarás la dimensión de tu cuadro de texto así, ¿de acuerdo? Si escribo algo aquí, como “Estamos hablando textos y comparando diferentes opciones”. De esta manera, y si quieres modificar la dimensión de estas marcas de texto, puedes desplazar fácilmente encima de estas casillas de límite azul y tu cursor cambia inmediatamente al icono de escala, vale, y puedo modificarlo así. Bastante bien, ¿no? Déjame cambiar el camino a lo regular, ¿de acuerdo? A veces puede ser útil convertir una línea de texto en un vector. Entonces, ¿cómo puedes hacer eso? Si hago clic aquí, puedo seguir adelante y dar click en aplanar, y ahí vamos. Ahora nuestro texto es un vector, como se puede ver por ahí, y se puede modificar cada letra por separado. Voy a acercar y vamos a hacer doble clic en estos H. Ahí vamos. Supongamos que aquí voy a cambiar algo. Por ejemplo, seleccionemos estos nodos y voy a aumentar el radio de esquina así, y también para éste. ¿ No es bastante guay? Entonces convirtiendo tu línea de texto a un vector como útil, sobre todo si estás diseñando un logotipo o una marca de palabras, etc, está bien. Supongamos que voy a crear otra línea de texto como esta. Escribamos H, entonces voy a duplicar eso una vez más y una vez más, y vamos a escribir e y aquí l y aquí l, y vamos a duplicar eso y o, bien. Déjame moverlos un poco, así que como mencioné antes, para hacer de tu línea de tomas un vector, necesitas aplanar tu texto sobre él. Pero, ¿y si quieres mantener tus capas como están? Por ejemplo, aquí tengo cinco capas diferentes y lo voy a hacer vector. En este caso, puede hacer clic con el botón derecho y en lugar de elegir aplanar, puede elegir Trazo de contorno. Ahora tienes todas las letras como vector. Eso es bastante impresionante, ¿no? Muy bien chicos, eso es todo por este video. Muchas gracias por verlo, y te veo en el siguiente video. 31. Inspector de texto: Hola a todos. Espero que lo estés haciendo bien y bienvenido de nuevo a otro video de este curso. En este video, vamos a estar hablando del inspector de texto, cómo puedes personalizar tu texto. Sin más preámbulos, empecemos con la selección de estos textos. En el Inspector de Texto, tenemos diferentes opciones. Como mencioné antes, algunos de ellos, los voy a revisar. La primera opción es la fuente a la que puedes acceder fácilmente a tus fuentes locales o a las fuentes Figma. Puedes cambiar fácilmente tus fuentes y ahora voy a devolverla a Montserrat. La siguiente opción es el peso de tu fuente. Puedes modificarlo a delgado, ligero, regular, negrita y negro. No obstante, ten en cuenta, que estas opciones pueden ser diferentes para diferentes fuentes. Voy a ponerlo a regular. El siguiente inmueble es el tamaño de fuente. Como puedes ver, puedes cambiar fácilmente el tamaño de tu fuente. Voy a cambiarlo a 68. También puedes hacer operaciones matemáticas aquí. Voy a dividirlo por dos, bastante impresionante. Entonces tenemos la altura de línea, que es tan importante cuando estás diseñando una interfaz de usuario en cuanto a visibilidad de tus líneas en diferentes tamaños de pantalla. Como se puede ver, se ha configurado en auto. Figma calcula la altura de la línea por porcentaje. Se basa en el tamaño de tu fuente. Si desea declarar su propia altura de línea en pixel, puede escribir fácilmente, por ejemplo, 80 pixel. Ahora este valor se basa en píxeles ya no en porcentaje. La siguiente propiedad es el espaciado entre letras, que determina el espaciado entre tus letras. Entonces tenemos espaciado de párrafos. No podemos ver los cambios aquí porque hemos creado sólo un párrafo. Entonces voy a hacer que este tamaño de fuente sea un poco más pequeño. Vamos a ponerlo en 24. Voy a cambiar la altura de la línea a auto. Vamos a agregarle un párrafo más. Voy a escribir, estamos hablando de propiedades. Ahora si cambias el espaciado de párrafos, puedes ver que cambia de inmediato. Entonces tenemos la sangría del párrafo. De incrementarlo, se puede ver que se puede especificar esta cantidad y se agregará algún espacio amplio antes de la primera palabra de cada párrafo. Voy a deshacer esto. Bastante bien. Aquí tenemos las alineaciones horizontales. Tenemos texto alineado a la izquierda, texto alineado al centro, y texto alineado para escribir. Después de eso, tenemos la alineación vertical. Como pueden ver, yo también puedo cambiarlo. No obstante, tenga en cuenta que esta opción sólo es aplicable a una capa de texto de tamaño fijo. Como puedes ver, podemos aplicar estos cambios porque estamos usando una capa de texto de tamaño fijo. Pero si creo otro texto aquí, hola, lo estoy probando. Ahora si cambio la alineación vertical, no pasa nada. También tienes algunas propiedades avanzadas a las que puedes acceder haciendo click en estos tres puntos. Aquí tienes la sección anterior que puedes previsualizar cada operación siempre que pases el mouse encima de estas opciones. El primero es cambiar el tamaño, y te he explicado en el video anterior, tienes tres opciones diferentes: crecer horizontalmente, crecer verticalmente , y capa de texto de tamaño fijo. Entonces tienes una alineación así. Después de eso, tienes decoración. Como puedes ver, está establecido en nada, por lo que no tenemos ninguna decoración. No obstante, puedes elegir subrayado o tachado de esta manera. Después de eso, tenemos el caso de la carta. Puede especificar qué tipo de mayúsculas y minúsculas desea utilizar. Por ejemplo, este es mayúscula, tenemos minúsculas. Si elijo mayúsculas, todas mis letras se convierten en mayúsculas. Si elijo minúscula, como puede ver, los cambios aplican inmediatamente. Entonces tenemos caso de título, tenemos gorras pequeñas y gorras pequeñas forzadas. Bastante impresionante. Tenemos también formularios sensibles a mayúsculas y minúsculas. No obstante, no es aplicable para estos textos seleccionados. Lo vamos a dejar por ahora. Entonces tenemos números. No podemos ver los cambios aquí porque no estamos usando ningún número en nuestro texto, pero puedes previsualizarlos aquí. Incluso puedes elegir la fracción. Se trata totalmente de números. Estos son tan avanzados, y la mayoría de las veces, no los usamos en nuestro proceso de diseño. Muy bien, chicos. Eso es todo por este video. Muchas gracias por verlo, y te veo en el siguiente video. 32. Estilo de texto: Hola a todos. Espero que te vaya bien y bienvenido de nuevo a otro video de las partituras. En este video, vamos a estar hablando de estilos de texto. En realidad los estilos te permiten especificar un conjunto de propiedades con el fin de reutilizarlas a través de tus proyectos y también podrías compartirlas con tu equipo. En este video, vamos a sumergirnos en estilos de texto y te voy a mostrar lo importante que es crear tu estilo de texto cuando estás diseñando una interfaz de usuario. Supongamos que estás diseñando un proyecto muy complicado el cual consta de 50 o más pantallas. En este caso, estás usando una fuente específica y después de un tiempo, repente decides cambiar, por ejemplo, la fuente de tu encabezado o incluso el tamaño de la fuente o el peso, así que no estaría bien que pudieras hacer esos cambios una vez y los cambios se aplicarían a todas tus etiquetas al mismo tiempo? Eso es fantástico. Esto es lo que hace el estilo de texto. Ahora sin más preámbulos, empecemos con la inserción de un nuevo texto. Voy a añadir, por ejemplo, Encabezado 1, y voy a ponerlo en negrita. En realidad, cuando estás diseñando un sitio web, tenemos seis tipos diferentes de encabezados, desde H1-H6, en HTML. No necesitas conocer cada detalle al respecto, sin embargo, es bueno estar familiarizado con algunos términos y algunas reglas de HTML o CSS. Ahora, es nuestro Encabezado 1 y voy a ajustar el tamaño a 80 así y luego voy a crear mi primer estilo de texto. ¿ Cómo puedo hacer eso? Es tan fácil. ¿Ves estos cuatro puntos? Voy a dar click en eso y aquí hay un icono plus que me permite crear un nuevo estilo de texto y voy a escribir H1, entonces vamos a duplicarlo. Así es, H2 aquí y aquí como puedes ver, utiliza el estilo de texto anterior que acabamos de definir para el Encabezado 1. En primer lugar, necesitamos desconectarlo de su estilo, y luego lo voy a poner en 60, bastante bueno y voy a crear otro estilo de texto y llamémoslo H2, duplicemos eso, una vez más, desconectarlo de su estilo de texto, y vamos a ponerlo en 30. Voy a escribir Header 3, vamos a crear un nuevo estilo de texto también, H3 y eso es todo. Ahora, ¿cómo podemos aplicar nuestros estilos de texto a nuestras capas de texto? Déjame crear un nuevo texto. Voy a escribir promociones, y como pueden ver, automáticamente usa H3. Eso se puede cambiar fácilmente haciendo clic en este menú, y voy a ponerlo en H2, ahí vamos. Si voy a mi estilo de texto aquí, Encabezado 2, y hago algunos cambios, esos cambios se aplicarán también a estas etiquetas de promociones. Vamos a intentarlo, vamos a H2 y aquí tienes Edit style, voy a dar vamos a H2 y aquí tienes Edit style, click en eso y por ejemplo, voy a hacerlo regular, ahí vamos. ¿ Viste lo increíble que es usar estilos de texto? También puedes cambiar el tamaño de fuente, por ejemplo, voy a establecerlo en 40, y eso está hecho. No obstante, ten en cuenta que si cambias el color del texto, no se aplica a la incidencia de ese estilo de texto, por lo que si por ejemplo, cambio el color de este Encabezado 2, por ejemplo, a este color, ya que se puede ver, no pasa nada. Porque para eso, necesitamos crear un estilo de color que cubriremos en las lecciones futuras. Ahora déjame duplicar estas promociones y luego podemos probar H3 también. Muy bien chicos, eso es todo por este video. Espero que lo hayas disfrutado y te veo en el siguiente video. 33. Consignaciones y diseños adaptativos: Hola a todos. Bienvenido de nuevo a otro video de este curso. En este video, vamos a estar hablando de restricciones y diseños responsivos. ¿ Cuáles son las restricciones y por qué necesitamos hacer que nuestro diseño sea receptivo? Supongamos que estás diseñando una página web o una pantalla de aplicación y estás usando, por ejemplo, este tablero de arte, MacBook Pro, entonces ¿qué sucede cuando tu usuario usa el modo retrato así? Si no hicieras que tu diseño respondiera, todo estaría desorganizado. En este video, vamos a estar hablando restricciones y cómo podrías hacer que tus páginas respondan. En primer lugar, voy a diseñar aquí una sencilla página de aterrizaje. Adelante y agreguemos un rectángulo aquí así, y voy a cambiar el color a azul oscuro. Bastante impresionante. Entonces voy a añadir un texto aquí. Escribamos bienvenidos al mundo del diseño UI/UX. Déjame cambiar el color a blanco por ahora y voy a cambiar la fuente a texto SF Pro. Voy a hacerlo más grande un poco. Vamos a ponerlo en 64. Creo que es mejor convertirla en una capa de texto de tamaño fijo como esta. Entonces déjame alinearlo al centro y también aquí, bastante bien. Entonces, ¿qué más necesitamos? Voy a añadir algunos enlaces o menús en la parte superior. Escribamos a casa. Yo también lo voy a hacer blanco. Hagámoslo más pequeño. Creo que 24 puntos es genial, duplicar eso, entonces vamos a escribir precios. Una vez más, duplicar eso y aquí, servicios. Una vez más, voy a duplicar eso y ahora contáctanos, bastante bien. Eso es todo. En primer lugar, cambiemos el espaciado entre ellos. Voy a elegir este menú en el inspector, y voy a dar clic en “Distribuir Espaciado Horizontal” así. De esta manera, el espaciado entre mis enlaces o mis menús será igual. Si desea comprobar el espaciado entre sus objetos, puede seleccionar fácilmente un texto u objeto y luego mantener pulsada la tecla Opción o Alt en el teclado, y puede pasar el mouse sobre el texto o forma junto a su forma anterior. Como se puede ver, se ha fijado en 25. Voy a hacer 24, así, bastante impresionante. Ahora pongamos en negrita este texto. Voy a elegir negrita. Ahora es mejor. Ahora voy a hacerlo un poco más grande. Bien. Agrupemos nuestros menús en la parte superior, Command G o Control G. Voy a escribir menús, impresionante. Yo también lo alineé verticalmente, y eso es todo por ahora. Ahora como puedes ver, hemos diseñado esta página para MacBook Pro con esta dimensión, 1440 por 900, y ha sido diseñada para el modo paisaje. Si lo cambio a retrato, se puede ver que todo estará desorganizado. Tenemos que hacer que nuestra página sea receptiva. Para ello, primero seleccionemos estos textos. Como puedes ver en el inspector, tienes algo que se llama Restringencias. Vamos a usar eso. Como puede ver, las restricciones se establecen en la parte superior e izquierda. Pero lo vamos a cambiar porque necesitamos mantener estos textos en el centro de nuestra pantalla. Voy a cambiarlo a centro. Sigamos con esto al tope porque necesitamos mantener esta distancia a la cima igual. Ahora, si elijo mi marco y lo cambio al modo retrato, podemos ver que cambia automáticamente su posición, y ahora todo está genial. Lo siguiente que tenemos que hacer es establecer restricción para nuestros menús. Volvamos al modo paisaje, y ahora voy a seleccionar los menús. Como se puede ver, las restricciones se establecen a izquierda y superior, sin embargo, necesitan fijarse en el centro y en la parte superior. Voy a cambiarlo al centro. Ahora si cambio mi marco al modo retrato, puedes ver que cambiará de manera responsiva así. Es bastante guay, ¿no? No obstante, ¿y si hago mi pantalla aún más grande así? Se puede ver que mi antecedente no es sensible. Ahora por favor pausa el video e intenta solucionar ese problema tú mismo. Entonces te mostraré cómo pudiste hacer eso. Chicos, estoy seguro de que podrían arreglarlo ustedes mismos. No obstante, ahora, te voy a mostrar también en caso de que tuvieras dificultades para hacer eso. Para que tu fondo también sea sensible, primero, elijamos este rectángulo, que es nuestro fondo. Como puede ver, las restricciones se establecen en los bordes izquierdo y superior. De lo único que necesitamos cambiar es de éste. Si podemos cambiarlo a izquierda y derecha, todo sería genial. Ahora vamos a intentarlo. Ahora, voy a hacer mi marco aún más grande. Como puedes ver, tenemos un fondo de estiramiento como este. Eso fue fácil. Chicos, eso es todo por este video. Espero que lo hayas disfrutado y te veo en el siguiente video. 34. Diseño automático: Hola a todos. Espero que lo estés haciendo bien. En este video, vamos a estar hablando de la característica más reciente de Figma, que se llama Auto Layout. La función Auto Layout se ha agregado recientemente a Figma, y es una característica súper poderosa y te voy a mostrar cómo podrías usar eso para acelerar tu proceso de diseño y hacer tu vida mucho más fácil. Sin más preámbulos, empecemos. En primer lugar, voy a seguir adelante y crear un botón. Para ello, voy a necesitar un rectángulo. Vamos a crear uno. Ahí vamos. Voy a ajustar el ancho a 300 y la altura a 70. Bonito. Entonces aumentemos el radio de esquina a 16. Como puedes ver ahora, esos pequeños círculos no aparecen aquí porque estoy lejos de este botón. No obstante, si zoom un poco, aparecerían estos círculos. Ahora cambiemos el color a morado claro, así. Bonito. Entonces necesitamos un texto obviamente. Voy a escribir login y vamos a cambiar el color a blanco y voy a aumentar el tamaño de la fuente a 24. Seleccionemos ambas capas y alinéelas tanto horizontal como verticalmente. Bastante bien. Voy a hacerlo un poco más pequeño. Ahora es mejor. Agrupémoslos y llamémoslo Iniciar sesión. Ahora todo está bien. Pero suponga que crea este botón, decide duplicar eso y cambiar el texto a otra cosa. Por ejemplo, quieres cambiarlo a Empezar. ¿ Puedes ver cuál es el problema aquí? Nuestros botones no son sensibles, y anteriormente, necesitábamos personalizar nuestros botones por separado así. Necesitábamos redimensionarlos manualmente, y de nuevo, teníamos que alinearlos así. No obstante, ahora, con la ayuda de Auto Layout, todo se hará en un segundo. Déjame mostrarte cómo pudiste hacer eso. En primer lugar, voy a duplicar estos botones de inicio de sesión una vez más. Ahí vamos. Como se puede ver en el Inspector, se ha agregado una nueva sección, que se llama Auto Layout. Puedes hacer clic en este botón más para agregar Auto Layout a tu botón, o podrías mantener pulsado Shift y A, y eso es todo. Alternativamente, podría hacer clic con el botón derecho aquí y elegir Añadir diseño automático. Todos funcionarán igual. Como pueden ver, aquí no se ha cambiado nada. Pero si intentas cambiar este texto a, por ejemplo, Get Started, puedes ver que ¿cuál es la diferencia aquí? Ahora nuestro botón responde. Eso es súper cool, y también puedes personalizar el relleno horizontal, el relleno vertical y un espaciado entre artículos. No obstante, debido a que aquí sólo tenemos un artículo, no podemos usar la sección. Se puede cambiar el modo de horizontal a vertical, pero aquí no se puede ver la diferencia. No obstante, si estás intentando crear una lista, puedes usar vertical. Tenemos diferentes opciones también para la altura. Como puedes ver aquí, tenemos auto altura. Si trato de agregar algunas líneas como esta, el tamaño de altura aumentará automáticamente, pero si trato de cambiarlo a altura fija y luego agrego algunas líneas, se puede ver que ya no es sensible. Puedes personalizar fácilmente las opciones que tienes. Aquí, este es el relleno horizontal. Puedes cambiarlo fácilmente así. Si estás familiarizado con CSS, funciona exactamente igual, y también el relleno vertical, eso es bastante impresionante. Ahora intentemos otra cosa. Vamos a crear otro rectángulo aquí y voy a ponerlo en 450 por 80. Bonito. Aumentemos el radio de esquina a 24 y cambiemos el color a este morado claro. Supongamos que esta es nuestra barra de pestañas, y vamos a agregar algunos iconos o simplemente formas simples. Voy a crear un rectángulo como este, y va a ser 45 por 45. Cambiemos su color a blanco. Voy a acercarme un poco y luego voy a crear otra forma, como un círculo y lo voy a establecer en 45 por 45 también. Cambiemos el color a blanco. Por último, voy a duplicar el cuadrado y aumentar el radio de esquina así, y lo voy a girar 45 grados. Después seleccionemos todas nuestras formas y pinchemos sobre distribuir espaciado horizontal para obtener el mismo espaciado entre nuestras formas. Voy a ponerlo en 91. Después los agruparemos y seleccionemos nuestra barra de pestañas y la alinemos al centro, tanto horizontal como verticalmente. No obstante, hay que recordar, porque vamos a hacer que estas formas respondan, necesitamos desagruparlas después de la alineación. Voy a hacer clic derecho aquí, desagruparlos, y seleccionar la barra de pestañas, que es nuestro fondo aquí, así, y una vez más, agruparlos y lo voy a llamar barra de pestañas. Entonces vamos a presionar Shift A para agregar Auto Layout a este grupo, y todo está hecho. ¿ Cómo podemos comprobarlo? La forma más fácil es tratar de eliminar una de estas formas. Voy a quitar el círculo, y ahí vamos, nuestra barra de pestañas está respondiendo ahora. Incluso podrías agregar más objetos y el tamaño cambiaría automáticamente. Yo lo voy a duplicar, y como pueden ver, está funcionando perfectamente. Eso es bastante impresionante. También podrías cambiar su lugar fácilmente así. Eso es fantástico. Ahora vamos a crear un grupo de diseño de pedidos más complejo. ¿ Qué opinas si pudiéramos crear una tarjeta receptiva, eso estaría bien. Vamos a seguir adelante y crear un nuevo rectángulo aquí mismo y voy a aumentar el radio a 40. Cambiemos las dimensiones a 300 por 400. Bonito. Voy a cambiar el color a blanco y vamos a agregarle un trazo con el mismo morado claro que tenemos aquí. Entonces le voy a agregar algunos detalles. Supongamos que vamos a tener una imagen de perfil, necesitamos un círculo aquí. Vamos a ponerlo en 70 por 70 y voy a cambiar el color a este morado. Bastante bien. Como se puede ver, el relleno superior se establece en 30. Pongamos el relleno izquierdo a 30 también. Entonces voy a añadir algunos textos. Necesito tener nombre. Hagámoslo más pequeño. Creo que 18 puntos estaría bien. Voy a cambiar el color a este morado también. Duplica eso, y aquí voy a escribir apellido, bastante bueno, y el relleno izquierdo va a ser de 16 píxeles como este. Entonces voy a añadir otro texto, que es la descripción, por ejemplo, así es, Hola a todos. En este video, estamos hablando de Auto Layout en Figma. Creo que es mejor convertirla en una capa de texto de tamaño fijo como esta. Voy a cambiar la altura del auto a 24. Bastante impresionante. Hagamos esta tarjeta un poco más pequeña por ahora, el relleno superior va a ser de 30, por lo que necesitamos tener 30 a la parte superior para este texto y 30 a la parte inferior. Como pueden ver, tengo 27 y necesito agregar tres más para poder ir a la altura, y aquí voy a escribir más tres. Ahí vamos. Hagámoslo un poco más grande. Fantástico. Ahora, ¿cómo podemos hacer que esta tarjeta responsiva? Tenemos que usar otra técnica aquí, porque si solo los agrupamos, déjame mostrarte y presionar Shift y A, no va a funcionar y todo se va a desorganizar. Tenemos que usar otra forma. En este caso, necesitamos tener dos grupos diferentes con Auto Layout. En primer lugar, necesitamos crear un diseño automático horizontal para este Marcador de posición de imagen de perfil y estas dos etiquetas. Voy a seleccionarlos y agruparlos. Démosle un nombre Usuario, y ahora como puede ver, aquí tenemos dos objetos que se colocan verticalmente. Si selecciono mi rectángulo y también este usuario y este texto y los agrupo y lo llamo tarjeta, ahora puedo agregar Auto Layout perfectamente, así que voy a presionar Shift y A. Como puedes ver, acabo de crear un auto vertical diseño. Pero necesitamos crear un diseño automático horizontal para nuestro usuario también. Ahora necesitamos agrupar este nombre y apellido también con el fin de utilizar un diseño automático horizontal para estos dos objetos también. Ahora, voy a elegir el grupo de usuarios y presionar Shift y A, y como pueden ver, acabamos de crear un diseño automático horizontal. Entonces voy a seleccionar mi tarjeta principal y presionar Shift y A una vez más, y como pueden ver, acabo de crear un diseño automático vertical. Voy a abrirla y voy a establecer la alineación de usuario a la izquierda y todo está hecho. Vamos a intentarlo. Voy a extender un poco este texto para ver qué va a pasar. Veamos si funciona o no y sí, como puedes ver, funciona perfectamente. Escribamos, sí, funciona perfectamente. Eso es bastante guay. Si solo intentas agregar algunas líneas, puedes ver que aumenta el tamaño de altura automáticamente. Pero, ¿qué tal para estos grupos de diseño automático? Si trato de cambiar el nombre a otra cosa, como Mike y el apellido a Blanco. Como puedes ver, no pasa nada porque no es tan largo, así que voy a añadir aquí algunos personajes aleatorios. Como puedes ver, funciona. No obstante, mi texto descriptivo se mueve a lo largo. Necesito arreglar ese problema. Para arreglar eso, lo voy a seleccionar y como pueden ver, se ha alineado al centro. Voy a alinearlo a la izquierda, y ahora todo está genial. Probemos algo aquí. Voy a copiarlo y pegarlo. Ahí vamos. Funciona perfectamente. Muy bien, chicos. Muchas gracias por ver este video. Yo lo disfruté y te veo en el siguiente video. 35. Imágenes: Hola a todos, y bienvenidos de nuevo a otro video de este curso. En este video, vamos a estar hablando de imágenes. Como diseñador UX UI, trabajas con imágenes todo el tiempo. Es tan importante saber cómo podrías usar características únicas, Figma, para poder usar tus imágenes correctamente. Sin más preámbulos, empecemos. Como pueden ver, aquí he creado un proyecto sencillo con sólo cinco círculos y tres cuadrados. Vamos a añadir imágenes a estos círculos y también a estas tarjetas. Hay un montón de maneras en que podrías hacer eso. El primero es simplemente arrastrar y soltar tus imágenes y luego utilizarás la opción Máscara, que cubriremos en las futuras lecciones. No obstante, hay mejores maneras de hacerlo. En primer lugar, asegúrate de descargar el archivo de Activos que ya preparé para ti, y consiste en algunas imágenes para estas tarjetas y algunas imágenes para estos círculos. El primer camino es ir a Sformas, y aquí tenemos Place Image. Si has descargado el archivo Activos, podrías ver que tienes dos carpetas diferentes, Perfil y Tarjetas. En la carpeta Perfil, puedes ver cinco imágenes diferentes. Voy a seleccionarlos todos y dar clic en “Abrir”, bastante bien. Justo en la parte superior, tienes dos opciones, Colocar Todo, Desechar Todo. Si haces clic en “Colocar todo”, todas tus imágenes se colocarán a la vez, así. Como puedes ver, tienes todas tus imágenes. Nuevamente, necesitas seguir adelante y usar máscaras para ponerlo en esos círculos. Una vez más, voy a abrir esas imágenes. Si hace clic en “Descartar todo” aquí, no pasa nada, es necesario seleccionar una vez más. Como puedes ver, hay una insignia roja en la esquina superior izquierda de tus imágenes, que indica el número de imágenes que te quedan, por ejemplo, aquí tenemos cinco. Si hago clic aquí, se puede ver que mi primera imagen se insertará en el lienzo, y ahora tengo cuatro. Puedo seguir adelante e insertarlas todas. Permítanme seleccionarlos una vez más. De la forma anterior, podrías colocar tus imágenes con sus propias dimensiones. No obstante, si quieres cambiar la dimensión, puedes arrastrar y soltar fácilmente así, ahí vamos. Puedes establecer la dimensión como quieras. La última vez que vamos a colocar estas imágenes en nuestros círculos, y es tan fácil hacerlo. Si pasas el ratón encima de estos círculos y haces clic, puedes ver que es tan fácil insertar tu imagen en esos círculos como este y eso es todo. La siguiente forma en que puedes insertar una imagen en Figma es usar la sección de relleno. Voy a mantener la tecla Command y voy a seleccionar estas tarjeta y aquí en relleno, si abro este menú drop, puedes ver que tienes opción Imagen y puedes elegir tu imagen así. También puedes cambiar la exposición de tu imagen, el contraste, la saturación, la temperatura, los reflejos temáticos y las sombras justo aquí. Incluso puedes rotarlo si quieres. Ahora vamos a sumar imágenes a nuestras tarjetas. Sigamos adelante y elijamos Place Image. Aquí voy a abrir tarjetas, y como pueden ver, aquí hay tres imágenes diferentes, voy a seleccionarlas todas, dar click en “Abrir”. Necesitas recordar algo. Si tu imagen es tan grande, Figma la redimensionará automáticamente antes de poder insertarla en Figma, por lo que debes estar al tanto de este tema también, así y ya está hecho. ¿ Viste lo fácil que es usar imágenes en Figma? También podrías editar estas tarjetas fácilmente así, ahí vamos. Todo es receptivo, eso es bastante guay, ¿no? La buena noticia es que a diferencia de otros softwares y plataformas, en Figma, también se podría insertar un archivo GIF. Vamos a intentarlo. Ahora si obtengo una vista previa de esta mesa de trabajo haciendo clic en este botón “Reproducir”, se puede ver que estas imágenes son estáticas. ¿ Y si agrego un archivo GIF a una de estas tarjetas? Por ejemplo, este, voy a seguir adelante y colocar una imagen de carpeta GIF, ahí vamos. Ahora como puedes ver, es como otras imágenes normales, sin embargo, si trato de previsualizar eso, puedes ver que en realidad es diferente a otras imágenes, porque es un archivo GIF y se reproduce en Figma, lo cual es bastante impresionante. Muy bien, chicos. Muchas gracias por ver este video. Espero que lo hayas disfrutado y te veo en el siguiente video. 36. Enrollado: relleno: Hola a todos. Espero que lo estés haciendo bien. En este video, vamos a estar hablando de la sección de campo. Sin más preámbulos, empecemos con insertar aquí una nueva forma. Voy a crear un rectángulo. Aumentemos el radio de esquina así, y a tu derecha, en la sección de inspector, puedes ver la sección de campo. Aquí podrías elegir tu color deseado para tu objeto o incluso tu capa de texto, así. Por ejemplo, ahora elegimos el rojo. Este color rojo tiene un valor, el brillo de cada color se llama su valor. Como puedes ver, si le agregamos el blanco a este color, se vuelve más claro y si agregamos negro a este color, se vuelve más oscuro y más oscuro. También puedes usar el cuentagotas para elegir tu color así, y también puedes elegir tu color con el código Hex aquí. Puede configurarlo en RGB, CSS, HSL y HSB. Pero la mayoría de las veces usamos código Hex. ocasiones necesitamos cambiar la opacidad de cada color, en ese caso, podrías usar el deslizador así, y como puedes ver ahora se pone transparente, o podrías usar este porcentaje aquí, como 20 por ciento, bastante bueno. Justo en la parte inferior, podrías ver los colores de tus documentos. Como puedes ver, no tenemos ningún color de documento porque aún no hemos creado uno. No obstante, en las lecciones futuras, hablaremos de ello. Justo en la parte superior izquierda, se podía ver un menú desplegable. Si lo abro, puedes ver que tienes un montón de opciones. El primero es sólido, y como se puede ver, sólo se podía elegir un solo color y base. Si deseas utilizar un gradiente, podrías elegir lineal como este. Por ejemplo, puedo elegir el segundo color aquí. No obstante, está configurado en transparente, puedo aumentar la opacidad al 100 por ciento, y con estos controladores, puedes cambiar la dirección de tu gradiente así. Incluso podrías agregar más colores a tus gradientes. Si haces click aquí, así, puedo elegir este color también, bastante impresionante. La otra opción que tienes es el gradiente radial. También tienes angular así. Entonces tenemos diamante así, e imagen de la que ya hablé. No obstante, las dos opciones más importantes son sólidas y lineales. También podrías cambiar la opacidad de tu color o gradiente aquí, así. Puedes ocultarlo si quieres o quitarlo. Aquí, puedes cambiar tu modo de color de normal a saturación de color, tonalidad, diferencia. Hablaremos de estas opciones más adelante. No obstante, si quieres ver qué va a pasar si lo cambiamos, necesitamos otro objeto. Voy a crear un nuevo rectángulo como este, y pongamos su color en algo como este azul, y voy a cambiar el modo de color a color, así. Aquí se puede ver la diferencia. Puedo configurarlo para superponerse así, pantalla, etc. Muy bien, chicos, eso es todo para este video. Muchas gracias por verlo. Espero que lo hayas disfrutado y te veo en el siguiente video. 37. Paso de tallado: trazo: Hola a todos. Bienvenido de nuevo a otro video de este curso. En este video, vamos a estar hablando de la sección de trazos. En primer lugar, permítanme crear una nueva forma. Esta vez, voy a elegir un círculo como este, y justo debajo de la sección de relleno de la que hemos hablado en el video anterior, tenemos la sección de trazo. Voy a dar clic en este botón más con el fin de agregar el trazo a mi forma. Aquí tenemos diferentes propiedades como el color. Nuevamente, tienes todas esas opciones. Al igual que en el relleno, tienes el grosor de tu trazo que puedes cambiar aquí, y tienes la propiedad de posicionamiento aquí también que puedes cambiarla de interior a centro y al exterior. Básicamente, significa que este trazo se aplica al exterior de tu forma. Este, significa que este trazo se aplica al interior de tu forma. Aquí tienes la opción avanzada, y ya hablamos de ello. Tienes Redondo, Cuadrado, Flecha de Línea y Flecha Triángulo. No obstante, aquí no funciona porque necesitamos tener una línea o un camino para poder utilizar estas opciones. También podrías hacerlo correr. Por ejemplo, puedo escribir dos coma cinco así, o digamos 10. Puedo cambiarlo fácilmente aquí, 40. Eso es bastante guay. Por supuesto, puedes ocultarlo o quitarlo. Muy bien, chicos, muchas gracias por ver este video y los veo en el siguiente video. 38. Enrollado: efectos: Hola a todos y bienvenidos de nuevo a otro video de las partituras. En este video, vamos a estar hablando de la sección de efectos. De hecho, usamos la sección de efectos tantas veces cuando estamos diseñando una interfaz de usuario, por ejemplo, hay momentos en los que quieres agregar algunas sombras a tu objeto o incluso a tu texto, o probablemente quieras agregar un desenfoque a su objeto o a su fondo. En estos casos, podemos utilizar la sección de efectos. Sin más preámbulos, empecemos. Como puedes ver aquí, he creado un cuadrado simple y cambio su color a estos código de color hexadecimal, 0038FF. Ahora, le voy a añadir algo de sombra de gota. Vamos a la sección Effect, y voy a dar clic en este botón más, y aquí tienes un menú desplegable. Tienes sombra interior, y como puedes ver esta opción agregará algunas sombras dentro de tu objeto. Si quieres modificar tu sombra, puedes hacer click en este icono del sol, y aquí tienes las opciones avanzadas. Tienes la cantidad de desenfoque. Ahora está fijado en cuatro. Voy a cambiarlo a 100, y como pueden ver, los cambios aplican de inmediato. También podrías cambiar el eje x. Vamos a ponerlo en 20, y este en 10. Por supuesto, no se pueden ver los cambios aquí porque en realidad está dentro de nuestro objeto. No obstante, probaremos también estas opciones para las sombras de gota. La siguiente opción que tienes es el color de tu sombra. Puede cambiarlo fácilmente a cualquier color que desee, y la opacidad se establece en 25 por ciento por defecto. Si quieres cambiarlo, podrías por supuesto aumentarlo o disminuirlo así. También tienes los menús de modo aquí. Bastante impresionante. Cambiemos el tipo de sombra a sombra caída. La mayoría de las veces usamos drop shadow cuando estamos diseñando una interfaz de usuario. Ahora, vamos a cambiar este color a negro, y voy a ponerlo en 25 por ciento. Bastante impresionante. Entonces cambiemos el desenfoque a 40 y la x a cero y la y a 20. Si quieres conseguir una sombra de gota muy buena, puedes calcular tus números como yo. Por ejemplo, si estableces el desenfoque en 40, podrías dividirlo por dos y establecer ese número como la cantidad y como aquí. Entonces voy a cambiar la opacidad a 20 por ciento así. Bastante bonito, ¿no? Como puedes ver, se ve bastante bien, sin embargo, te voy a sugerir algo. Para que tu sombra sea más realista, es una buena idea elegir el mismo color para tu sombra que tus objetos colorean así, luego disminuir la opacidad a, por ejemplo, 15 por ciento o incluso 10 por ciento. Depende totalmente de ti, sin embargo, tiene más sentido porque en realidad los objetos coloridos no tienen sombras negras. Si duplico este cuadrado, y cambio este color a, por ejemplo, algo así, puedo cambiar la sombra al mismo color y disminuirla al 10 por ciento o 15 por ciento así. ¿ Se puede ver la ligera diferencia aquí? Lo hace más realista. Ahora sigamos adelante y hablemos de otras opciones también. Como puedes ver aquí, tienes desenfoque de capa y desenfoque de fondo. Si elijo desenfoque de capa, como pueden ver, desdibuja mi capa seleccionada, y puedo cambiar la cantidad aquí así. Bastante impresionante. Voy a ponerlo en 10 y tú también tienes el desenfoque de fondo. Pero como puedes ver cuando elijo eso, no pasa nada porque no tengo nada detrás de esta forma. Si quiero ver el efecto de la capa de fondo, necesito tener algo detrás de ella. Sigamos adelante y elijamos esta plaza, y voy a colocar una imagen en eso. Escojamos éste. Bastante bien. Entonces voy a poner esta plaza encima de mi imagen así. Aquí como se puede ver, selecciona el desenfoque de fondo, pero no se puede ver nada. Porque cuando estás usando el desenfoque de fondo, necesitas disminuir la opacidad de tu campo para poder ver los cambios, no la opacidad de tu capa. Si lo cambio a 50, podemos ver que no pasa nada, pero si cambio la opacidad de mi color al 50 por ciento, se puede ver el efecto. Ahora voy a cambiar el color también a otra cosa como ésta, y vamos a reducirlo al 30 por ciento. Voy a cambiar la cantidad de desenfoque a 20 por ciento. Eso es fantástico. Déjame quitar esta capa y luego añadir un círculo aquí así, hazla negra, y luego agregarle desenfoque de fondo, y disminuyamos la opacidad al 30 por ciento. Voy a establecer la cantidad de desenfoque en 50, y ahora se puede ver claramente el efecto. También puedes añadir efectos a las capas de textos. Si creo aquí una capa de texto, vamos a escribir, hola, puedes ver que puedo añadir una sombra de gota, la sombra interior, el desenfoque de capa, y también el desenfoque de fondo así. Muy bien chicos, eso es todo por este video. Espero que lo hayas disfrutado y te veo en el siguiente video. 39. Estilo de color: Hola a todos. Bienvenido de nuevo a otro video de este curso. En este video, vamos a estar hablando de los estilos de colores. Al igual que el textil, podrías crear tu propio estilo de color. En primer lugar, sigamos adelante y creemos aquí un rectángulo y voy a aumentar el radio de esquina a 40, así. Entonces, pongamos el color sólido a algo como este azul, bastante bonito, y lo voy a duplicar. Entonces, cambiemos la opacidad al 75 por ciento. Una vez más, duplicarlo. Esta vez, lo voy a cambiar al 50 por ciento y otra vez, lo voy a duplicar y ahora cambiemos al 25 por ciento. Acabo de crear cuatro colores diferentes con el mismo color base, sin embargo, con cuatro valores diferentes. Como se puede ver, se vuelve más ligero y más ligero. Voy a seleccionarlos, duplicarlos y aquí, voy a elegir otro color también, creo que éste es genial. Copiemos y peguemos estos códigos de color hexadecimal para los demás, así. Pero, ¿cómo puedes crear tu propio estilo de color? Es tan fácil. Al igual que los textiles, primero necesitas seleccionar tu objeto o tu capa y luego aquí, puedes hacer click en estos cuatro puntos y aquí, puedes hacer click en este icono plus que crea tu estilo de color. Voy a escribir primaria/morado, porque parece un color morado. Voy a escribir primaria/morado, y vamos a dar click en Crear estilo. Bastante bien. Entonces voy a elegir éste. Hagamos lo mismo por esto, y esta vez escribamos secundario/rosa. Para éste, puedo decir morado primario 75 por ciento, así, y éste, morado primario 50 por ciento y así sucesivamente. Como puedes ver aquí, tenemos diferentes estilos de colores. Tienes morado primario, tienes rosa secundaria, morado primario 75 por ciento, y así sucesivamente. ¿ Cómo puedes aplicar estos estilos de colores a tus formas o a tus objetos? Es tan sencillo. En primer lugar, vamos a crear una nueva forma. Vamos a crear aquí un círculo así. Para poder aplicar tu estilo de color, puedes hacer click en estos cuatro puntos, y aquí puedes obtener acceso a tus estilos de color. Aquí tenemos primaria, aquí tenemos secundaria. Creamos cuatro colores primarios diferentes, y solo uno secundario. Nos sumergiremos en crear tu propio sistema de diseño en su propia sección en este curso. Ahora, puedo elegir el morado primario y eso es todo. Yo lo puedo duplicar. Aquí, puedo cambiarlo a rosa secundario, o si quieres cambiar algunas propiedades de estas formas, puedes separarlo de su estilo haciendo clic en este ícono así, y puedes cambiar libremente el color. Al igual que los estilos de color, también podemos crear estilos para efectos o para un trazo. Si haces clic en estos cuatro puntos, puedes crear un estilo de efecto o un estilo de trazo. ¿ Cuáles son las ventajas de usar estilos de color en tus proyectos? Al igual que los textiles, crear tus estilos de colores te va a ahorrar tanto tiempo. Porque, si decides cambiar estos colores primarios más adelante, puedes dirigirte fácilmente a este estilo de color, y luego puedes modificarlo haciendo clic en este icono Editar estilo aquí mismo y los cambios se aplicarán inmediatamente. Chicos, eso es todo por este video. Espero que lo hayas disfrutado, y te veo en el siguiente video. 40. Máscaras: Hola a todos y bienvenidos de nuevo a otro video de este curso. En este video, vamos a estar hablando de máscaras. En realidad las máscaras permiten mostrar una porción específica de una imagen o un objeto. Siempre que quieras usar una sección específica de una imagen, puedes usar máscaras fácilmente. O si quieres presentar solo una porción de un objeto, aún podrías usar máscaras para eso. ¿ Cómo puedes usar máscaras? Como pueden ver aquí, he creado un cuadrado y he colocado una imagen de nuestro archivo de activos. Si quiero usar máscaras, primero, necesito elegir estas capas y luego puedo hacer clic en el icono Máscara justo en la parte superior, así. Después de hacer clic en este icono, sus capas desaparecerán. Ahora, puedo seleccionar mi imagen de la lista de la capa y luego la voy a mover hacia el lado izquierdo. Como puedes ver ahora se ha recortado. Es necesario tener en cuenta que las máscaras se aplicarán a todas las capas por encima de ella. Aquí si muevo estas capas de imagen al fondo de mi máscara, puedes ver que no pasa nada. La otra forma de aplicar una máscara a tu capa es elegir ambas capas. En primer lugar, voy a poner esta imagen encima de mi rectángulo o de un cuadrado. Entonces los voy a elegir a ambos y luego dar clic en máscara así. Otra cosa importante que debes tener en cuenta es que si estás usando un gradiente o un efecto para tu rectángulo y quieres usar máscaras, necesitas duplicar tu forma para poder mantener esos efectos. Si agrego alguna sombra de gota aquí así, voy a ponerla en 20 y la y en 10, y luego voy a crear mi máscara. No obstante, ahora como puedes ver, mi color de sombra de gota ha sido cambiado. Para solucionar ese tema. Antes de crear mi máscara, puedo duplicar mi rectángulo. Lo voy a poner aquí justo debajo de mi capa de máscara. Entonces puedo crear mi máscara fácilmente. Ahora, como pueden ver tengo un grupo de máscaras. Si quiero poner estos rectángulo, que es mi sombra de gota, en estos grupos, necesito asegurarme de que lo coloque justo debajo de mi capa de máscara aquí. Porque si lo pongo por encima de eso, esta capa de máscara se aplicará también a este rectángulo. Muy bien chicos, muchas gracias por ver este video. Espero que lo hayas disfrutado y te veo en el siguiente video. 41. Componentes: Hola a todos y bienvenidos de nuevo a otro video del curso. En este video, vamos a estar hablando de componentes. Básicamente, los componentes son elementos reutilizables. Puedes crearlos una vez y puedes usarlos varias veces. Es bastante asombroso. Son como símbolos en Sketch. Sin más preámbulos, empecemos. En primer lugar, voy a seguir adelante y crear un botón. Necesito un rectángulo. Voy a arrastrar y soltar. Establezcamos el ancho en 270 y la altura en 70, así. Entonces voy a aumentar el radio de esquina a 20. Bastante impresionante. Creo que es una buena idea cambiar el color también. Voy a ponerlo a este color. El código es 3562FF. Entonces necesito un texto. Escribamos primaria. Voy a elegir la fuente SF Pro Text y el peso del medio, y su tamaño va a ser de 20 puntos. Entonces cambiemos el color a blanco para tener un buen contraste aquí, voy a seleccionar mis elementos, alinearlo al centro, tanto vertical como horizontalmente. Ahora vamos a agruparlos, y voy a llamarlo botón slash primario.Y creo que es una buena idea agregar auto-layout a este botón. Voy a presionar Shift y a, y como pueden ver, se ha agregado el diseño automático a este botón. Lo siguiente que tenemos que hacer es dar click en este ícono para crear nuestro componente. Si hago clic en eso, ya está hecho. Acabo de crear mi primer componente. También podemos agregar una descripción a tu componente aquí para que pueda escribir, es el botón principal así. Ahora, ¿cómo puedes reutilizar este botón? Es tan sencillo. ¿ Recuerdas que en el panel de capas teníamos la sección de activos? Ahora si lo abres, puedes ver que en los componentes locales tenemos nuestros componentes creados aquí. Si quiero usar eso, puedo arrastrarlo y soltarlo fácilmente. Si me cierro encima de eso, se puede ver la descripción que acabamos de escribir. Ahí vamos. Porque le agregué el auto-layout, puedo cambiar fácilmente estos textos. Por ejemplo, escribamos, empecemos. Su tamaño cambiará dinámicamente. Bastante impresionante. Pero y si quieres cambiar algunas propiedades de estas instancias. En realidad, estos botones es un incienso de este botón maestro. Llamamos a este botón el componente maestro, y este botón es una instancia de este componente maestro. Si quieres cambiar algunas propiedades de eso, por ejemplo, si quieres cambiar el color, puedes dirigirte fácilmente a llenar sección y puedes cambiarlo. Como se puede ver, nada le pasa al componente de masa. No obstante, si intentas cambiar el componente de masa, afectará a todas sus instancias. En la sección de inspector, tienes aquí la sección de instancias, y aquí tienes un menú desplegable. Te voy a mostrar cómo puedes usar eso. Pero si quieres ir al componente de masa, puedes usar este botón, así. Ahora estamos en componente de masa. Aquí, si trato de cambiar el color, se puede ver que su instancia cambiará de inmediato. O si incremento aquí el radio de esquina, se puede ver que aplica a sus instancias de inmediato. Voy a volver a ajustarlo a 20. Ahora vamos a crear otro botón. Voy a elegir esta Primaria 1. Voy a duplicarlo así, y antes de hacer algún cambio aquí, necesitamos desconectarlo de su instancia. En primer lugar, tenemos que hacer clic y desprender instancia. Ahora si lo cambio, no le pasa nada al botón anterior. Cambiemos la opacidad al 75 por ciento. Este va a ser el estado flotando de nuestro botón anterior. Voy a ir a la lista de Capas y vamos a cambiar el nombre a botón pasar el ratón y hacer clic en “Crear componente”, y eso está hecho. Ahora si selecciono estos botón Introducción y voy a este menú desplegable en la sección de instancias, puedo ir a botón. Por supuesto, aquí tienes componentes relacionados. No obstante, debido a que usaba slash cuando los nombraba, podía poner todos esos botones en estos botones de Grupo. Ahora puedo cambiarlo de primaria a flotar. Ahí vamos. Fue tan sencillo. Ahora sigamos adelante y agreguemos algunos efectos a este botón. Voy a elegir el componente maestro y luego dar clic en este botón más en la sección de efecto, y aquí tenemos drop shadow. Voy a ir a la sección avanzada y vamos a elegir el mismo color aquí, y vamos a cambiar su opacidad al 15 por ciento. Muy bien. Voy a cambiar la cantidad de desenfoque a 20 y la cantidad de y a 10. El x va a ser cero. Es bastante impresionante. Vamos a crear otro botón aquí también. Yo lo voy a duplicar. Entonces lo voy a desprender de su componente maestro. Entonces eso cambió la opacidad al 25 por ciento. Voy a quitar este drop shadow porque va a ser nuestro estado de discapacidad. Ahora voy a renombrarlo a botón/deshabilitar. Bastante bonito y haga clic en “Crear componente”. Ya está hecho. Si solo selecciono este botón de Introducción y voy a estos menú desplegable, fácilmente puedo elegir el mismo. Fue tan fácil, ¿no? Se puede hacer de casi todo un componente. Por ejemplo, podemos seguir adelante y crear un campo de texto. Voy a seleccionar la línea y vamos a arrastrar y soltar. Bastante bien. Aquí hemos creado una línea. Escojamos el mismo color que nuestro botón. Bastante bonito. Voy a aumentar el espesor de nuestra línea a dos. Fantástico. Cambiemos el ancho a 350 y necesitamos un texto aquí, así que voy a escribir campo de texto. Bastante bonito. Cambiemos su color a éste. Voy a ajustar el relleno superior de esta línea en ocho píxeles como éste. Vamos a mover un poco este texto a la derecha. Bastante impresionante. Creo que es mejor disminuir la opacidad de estos textos al 50 por ciento. Fantástico. Ahora vamos a agruparlos. Voy a llamarlo campo de texto/activo, y vamos a crear un componente fuera de esto. Bastante bien. No obstante, asegúrate de alinear tu texto a la izquierda así. También podrías agregar auto-layout a esto, pero para efectos de este video, lo voy a dejar como está. Ahora vamos a duplicarlo. Yo lo voy a desprender de su amo, y luego cambiemos el color a algo así. Este también y va a ser del 50 por ciento. Este va a ser el estado de error así que cambiemos su nombre a error y voy a crear un componente. Ahora si voy a Activos, en componentes locales, MacBook Pro-1, se puede ver que tengo campo de texto, y aquí puedo usarlo fácilmente. Vamos a cambiarlo a minería. Bastante impresionante. Si quiero cambiarlo al estado de error, puedo cambiarlo aquí fácilmente. Ahí vamos. Podrías hacer tu tarjeta como componente, tus botones, tus campos de texto, tus deslizadores, cada cosa, y es tan útil y potente y va a acelerar tu proceso de diseño. Ahora hemos creado nuestros componentes y podemos usarlos localmente. No obstante, si quieres compartir estos componentes con tus compañeros de equipo, puedes dirigirte fácilmente a la sección de activos y puedes hacer clic en este icono Biblioteca de equipos. Aquí tienes la capacidad de publicar tu archivo actual a otros miembros del equipo. Entonces pueden usar todos estos componentes en otros proyectos y otros archivos, lo cual es bastante genial. Ten en cuenta que vamos a practicar todo este conocimiento en las lecciones de futuros porque vamos a crear nuestros propios proyectos del mundo real basados en este conocimiento. No te preocupes si no entiendes cada cosa aquí, es totalmente normal y lo vas a aprender por la práctica. Espero que hayan disfrutado de este video. Muchas gracias por verlo. Te veo en el siguiente video. 42. Variantes (NEW): Hey, bienvenido de nuevo. En este video, vamos a estar hablando una nueva característica cool que se ha agregado a Figma recientemente, y se llama Variantes. ¿ Qué hace esta característica? Permítanme mostrarles un ejemplo. Supongamos que tenemos un botón, así que voy a seguir adelante y crear un botón rápidamente. Déjame seleccionar el rectángulo y solo tienes que hacer clic y arrastrar para crear este rectángulo. Voy a cambiar la altura a 44 píxeles y el ancho a 100 así. Déjame acercar. Perfecto. Entonces lo voy a hacer redondeado, así que aumenta el radio de esquina a cinco. Fantástico. Por último, permítanme cambiar el color a morado así. Bastante bien. Ahora para este botón, necesitamos una capa de texto. Voy a presionar “T” en mi teclado y hacer clic para crear una nueva capa de texto. Vamos a escribir botón. Entonces voy a cambiar su color a blanco así. Su tamaño divertido va a ser de 14. Entonces voy a seleccionar ambas capas y alinearlas horizontal y verticalmente. Eso es bueno. Una vez más, selecciónalos a ambos y les voy a añadir el auto-layout. Presiona “Shift and A” en tu teclado así. Ahora, acabamos de crear un botón sencillo el cual es dinámico así. Como te mostré antes, puedes crear un componente a partir de este botón así. Podrías simplemente crear un componente y está totalmente bien. Pero supongamos que tenemos diferentes estados de este botón. Déjame duplicarlo. Comando D o Control D. Lo voy a mover hacia abajo. Para el primero, voy a renombrarlo a Button/Primary/Default así. Este segundo es una instancia de este componente. En primer lugar, lo voy a desprender. Voy a dar clic en este icono de tres puntos y dar clic en “Desacoplar instancia”. Ahora, voy a cambiar su nombre a Button/Primary/Hover. Este es el estado de desplazamiento de este botón así. Entonces voy a agregar otro campo a la sección de campo, que es una capa de superposición y lo voy a cambiar de Lineal a Sólido. Es blanco. Eso es perfecto. Permítanme disminuir la opacidad del 100 por ciento al 10 por ciento. Fantástico. Recuerda crear un componente. Ahí vamos. Tenemos el segundo botón y si voy a la pestaña Activos, se puede ver que tenemos dos botones. Por ahora, tan bueno. Déjame crear un botón más y luego saltaremos a usar Variantes. Voy a duplicarlo, moverlo hacia abajo, desconectarlo de su componente maestro, y voy a renombrarlo a Botón/Primario/Prensado. Esta vez voy a cambiar el color de nuestra sensación de superposición y en lugar de blanco, voy a usar el negro. Permítanme aumentar la opacidad al 20 por ciento. Ahora déjame crear un componente y ya terminamos. Supongamos que estamos trabajando en un proyecto y quieres usar uno de estos botones. Podrías ir a la pestaña Activos y podrías arrastrar y soltar Botón/Primaria. Si necesitabas el estado de hover, podrías cambiar la instancia aquí por Hover, Prensado, y cualquier otra cosa. Pero ahora podrías usar Variantes, que es una forma muy genial de organizar tus componentes en un solo componente. Déjame mostrarte cómo funciona. En este momento tenemos tres componentes diferentes. Pero, ¿y si pudiéramos combinar estos componentes en un solo componente? Es tan sencillo de hacer. Simplemente selecciona todos tus componentes, todos estos tres componentes. En el Inspector, podría encontrar Variantes, haga clic en “Combinar como variantes”. Ahí vamos. Como pueden ver, aquí se ha creado un nuevo marco, y lo llamamos conjunto de componentes. Se indica con esta frontera discontinua. El genial es que podrías personalizar la apariencia de este conjunto de componentes. Podrías modificar el color de borde así de acuerdo a tus marcas, colores, y básicamente podrías peinarlo como quieras. Pero por ahora, lo voy a dejar como está. Déjame seleccionar mi conjunto de componentes y en el lado derecho, puedes ver bajo la sección Variantes, tenemos dos propiedades diferentes. Inmueble 1, Inmueble 2. El Inmueble 1 es básicamente el tipo de nuestro botón en este caso. Podrías ponerle el nombre que quieras. Pero por ahora, voy a seguir adelante y escribir Type porque tiene sentido. Pero, ¿qué pasa con la segunda propiedad? El segundo inmueble son básicamente los estados. Voy a escribir Estado así. Ahora bien, si voy a la pestaña Activos, se puede ver que sólo tenemos un componente, que es botón. Puedo arrastrarlo y soltarlo en mi lienzo. Del lado derecho, se puede ver que tenemos Tipo y Estado. Para el Tipo, ya que sólo tenemos un tipo de botón, que es Primario, no necesitamos cambiarlo. Pero para el Estado, podemos cambiarlo a Hover. Podemos cambiarlo a Prensado así. Eso es tan sencillo, ¿no? Esto es lo que llamamos Variantes unidimensionales porque aquí tenemos básicamente componentes diferentes con las mismas propiedades, sin embargo, con valores diferentes. En general, tenemos Variantes unidimensionales y Variantes multidimensionales. Te voy a mostrar cómo puedes crear Variantes multidimensionales también, así que no te preocupes. Pero antes de saltar a Variantes multidimensionales, permítanme darles dos ejemplos más aquí. Supongamos que quieres crear un interruptor que tenga en realidad dos estados diferentes encendidos y apagados. Sigamos adelante y creemos rápidamente un interruptor juntos. Para switch, necesitamos crear un rectángulo como este. Voy a establecer el ancho a 60 y la altura a 30 así. Entonces lo voy a hacer redondeado por completo ya que es un interruptor. Déjame cambiar el color a blanco. Fantástico. Ahora, lo voy a duplicar. Pulsa “Comando D” o “Control D” en tu teclado. Entonces voy a disminuir el ancho de esta nueva capa, esta capa duplicada a 30 para que obtenga un círculo de 30 por 30 píxeles. Entonces lo voy a mover al lado derecho así. Podrías cambiar su color a verde. Voy a cambiarlo a este verde. Perfecto. Por último, voy a reducirlo un poco. Sostenga la tecla “Mayús y Opción” juntas o “Tecla Mayús y Alt” e intente reducirla así hasta que obtenga un círculo de 24 por 24 píxeles. Fantástico. Déjame ir a Layers, y ahora los voy a agrupar. Permítanme renombrarlo a Switch/On. Entonces lo voy a duplicar. Comando D o Control D, muévelo hacia abajo. Voy a hacer doble clic en este círculo verde para seleccionarlo, moverlo hacia el lado izquierdo. Asegúrate de mantener aquí el mismo relleno. Aquí tenemos un relleno de tres píxeles para arriba, derecha e inferior. Si quieres ver el relleno, puedes mantener presionada la tecla “Opción” o “Alt” en tu teclado y pasar el cursor sobre tu elemento así. Entonces aquí tenemos tres, tres, y tres. Eso es perfecto. último, pero no menos importante, necesitamos cambiar el color de verde a gris para indicar que este interruptor está apagado. Por último, permítanme renombrarlo a Switch/Off. Entonces los voy a seleccionar a ambos. En la Barra de herramientas, en lugar de hacer clic en este botón, voy a dar clic en este icono de flecha para abrir este menú desplegable y hacer clic en “Crear múltiples componentes”. Déjame mostrarte lo que pasa si haces click en este botón. Si haces click en esto, crearás un solo componente, lo cual no es correcto. Voy a golpear “Comando Z” o “Control Z” para deshacer el proceso. Permítanme crear múltiples componentes. Ahí vamos. En este momento tenemos dos interruptores diferentes, Interruptor/Encendido, Interruptor/Apagado. Si me dirijo a la pestaña Activos, se puede ver que tenemos dos componentes diferentes. Eso está bien. Pero vamos a llevarlo a otro paso usando Variantes. Lo que tenemos que hacer es seleccionarlos a ambos y combinarlos como Variantes. Ahí vamos. Ahora, voy a cambiar el nombre de la propiedad aquí a Switch. Ya que usamos apagado y encendido en nombre de estos conmutadores si tratamos de agregar una instancia aquí, podía ver que ya no tenemos ese menú drop. Tenemos esta función genial de Switch como esta, y se siente realmente bien. Permítanme seleccionar mi conjunto de componentes de conmutador e intentar cambiar el nombre de esto Desactivado a, por ejemplo, Desactivar y esto Activar para Habilitar. Ahora, ya no tenemos esa funcionalidad. Tenemos este menú drop. Funciona perfectamente. No obstante, usar esta característica genial, podrías hacerlo aún mejor. Voy a escribir Apagado aquí y On aquí. Podrías usar verdadero y falso también. También, podrías modificar su posición así. Podrías hacer clic y arrastrar para cambiar su posición. Me voy a poner en primer lugar. Déjame mostrarte cómo podrías usar verdadero y falso. Voy a renombrarlo a falso y obtendrás la misma funcionalidad. Perfecto. ¿Se puede ver lo increíbles que son estas variantes? Este fue otro ejemplo unidimensional. Te voy a mostrar un ejemplo más y luego saltaremos a crear variantes multidimensionales. El siguiente ejemplo va a ser un botón de radio. ¿ Qué necesitamos para un botón de radio? Obviamente, necesitamos un círculo. Podrías presionar O también en tu teclado. Mantener presionada la tecla “Shift”, haga clic y arrastre para crear un círculo. Voy a establecer el ancho y la altura en 30. Está totalmente bien ahora mismo. Cambiemos el color a blanco. Entonces lo voy a duplicar. Pulsa “Comando D” o “Control D” en tu teclado. Presione la tecla “Shift” y “Alt”, o la tecla “Shift” y “Option”, e intente reducirla así. Para el círculo interno, vamos a tener un círculo de 18 por 18 píxeles como este. Ahora, voy a cambiar el color a este morado así. Déjame dirigirme a la pestaña de “Capas”. Voy a seleccionarlos a ambos, agruparlos, presionar “Comando G” o “Control G” en tu teclado. Permítanme renombrarlo a Radio Button/On. Voy a duplicarlo, moverlo hacia el lado derecho, y hacer doble clic en este círculo interno, eliminarlo, y renombremos el grupo a Radio Button/Off. Seleccione ambos, cree múltiples componentes como este y luego mientras se seleccionan estos dos componentes, haga clic en Combinar como variantes. Ahí vamos. Ahora déjame ir a la pestaña Activos, arrastrar y soltar el botón “Radio”. Contamos con Inmueble 1. No le cambiamos el nombre. Si desea cambiarle el nombre, debe asegurarse de seleccionar su conjunto de componentes, no su componente en sí. Su conjunto de componentes, que es Botón de opción. Aquí, puede hacer doble clic en este Inmueble 1, y vamos a escribir Estado. Ahí vamos. Ahora, tenemos Estado. Es bastante bueno, ¿no? Ahora, hablemos de variantes multidimensionales. En primer lugar, voy a seguir adelante y crear aquí una nueva página para organizar nuestros componentes. Esta es nuestra Página 1. Voy a renombrarlo a Unidimensional así. Voy a crear una nueva página haciendo clic en este icono más, y déjame escribir Multidimensional. Perfecto. Permítanme volver a Unidimensional. Voy a seleccionar este conjunto de componentes de botones, copiarlo, Comando C o Control C, ir a página Multidimensional y pegarlo, presionar “Comando V” o “Control V.” ¿Qué vamos a hacer aquí? En primer lugar, voy a seguir adelante y agrandar este marco. Voy a ampliarlo así para que tengamos más espacio con el que trabajar. Entonces voy a organizar estos botones. Yo lo voy a mover a la primera fila para éste también. Tenemos un botón con tres estados diferentes como éste. Déjame hacer este marco más pequeño. En primer lugar, voy a sacar estos componentes de este conjunto de componentes, para que ya no tengamos variantes. Si vamos a Activos y si vamos a Multidimensional, tenemos tres componentes diferentes lo que significa que ya no estamos usando variantes. Ahora, necesitamos cambiar el nombre de estos botones. ¿Cómo podemos hacer eso? Voy a seleccionarlos a todos. Voy a presionar “Comando R” o “Control R” en mi teclado. Aquí, usando esta ventana, puedo renombrar todas mis capas, todos mis componentes al mismo tiempo con funcionalidades geniales. Voy a dirigirme a este campo Renombrar a y déjame dar clic en este botón de nombre actual. De esta forma, estamos obteniendo el nombre actual de nuestra capa, y luego podemos agregarle más texto. Voy a escribir/y luego sin icono, perfecto. Haga clic en “Renombrar”. Ahí vamos. Acabamos de cambiar el nombre de todos nuestros botones. Eso es increíble. Ahora, voy a duplicarlos, Comando D o Control D, moverlos hacia abajo. Estas son las instancias de nuestros componentes maestros. Como saben, necesitamos desconectarlos de sus componentes maestros. Una vez más, voy a seguir adelante y renombrarlos. Golpea “Comando R” o “Control R.” Aquí en el campo Match, voy a escribir texto Sin icono. Asegúrate de escribirlo exactamente de la misma manera que lo escribiste antes, es tan importante. Sin Icon. Después reemplácelo por With Icon y pulsa “Renombrar”. Ahora, acabamos de reemplazarlo fácilmente. Entonces aquí, vamos a añadir un icono a estos botones. ¿Cómo podemos hacer eso? Es tan sencillo. Voy a seguir adelante y crear una estrella sólo por este ejemplo. Permítanme establecer el ancho y la altura en 16 píxeles. Voy a cambiar el color a blanco, fantástico. Entonces muévelo aquí. Arrástrelo y suéltelo. Como se puede ver, ya que estamos usando el diseño automático, el ancho se ha cambiado automáticamente. Esto no es lo que queremos porque queremos mantener el ancho de nuestro botón primario. Para arreglar eso, voy a dirigirme a la sección Auto Layout en el inspector. Para el relleno horizontal, voy a escribir 16 píxeles así. Eso es exactamente lo que necesito. Voy a repetir el mismo proceso para todos mis botones. Voy a seleccionar mi estrella, presionar “Comando C” o “Control C”, y seleccionar este botón, y presionar “Comando V” o “Control V” para pegarlo. Ahora, voy a cambiar la posición de este ícono del lado derecho al lado izquierdo. Puedo usar la tecla de flecha izquierda de mi teclado para hacerlo de forma sencilla. Una vez más, selecciona tu botón, cambia tu relleno horizontal a 16. último pero no menos importante, voy a hacer lo mismo para mi último botón. Todo está hecho. Lo último que tenemos que hacer es crear componentes. Voy a seleccionar estos tres botones y crear múltiples componentes. Perfecto. Ahora, tenemos seis componentes diferentes, y es hora de crear variantes. Voy a seleccionarlos todos y dar clic en Combinar como variantes. Ahí vamos. Acabamos de crear variantes multidimensionales. En el lado derecho, si nos dirigimos a la sección Variantes, podemos ver Propiedad 1, voy a escribir Tipo. Propiedad 2, voy a escribir Estado. Inmueble 3, voy a escribir Icon. Aquí, tenemos Con Icon, Sin Icon. Como mencioné antes, solo podrías cambiarle el nombre a On y Off para obtener esa función de alternancia. Ahora, puedo ir al Activos, Multidimensional. Podrías arrastrarlo y soltarlo. Ahí vamos. Tenemos primaria, tenemos estados como este, tenemos icono o sin icono. Eso es increíble. Así es básicamente como funciona una variante multidimensional. Pero, ¿y si pudiéramos llevarlo a otro paso añadiendo aquí un nuevo tipo de botón? Ahora, tenemos el botón primario, pero también podemos agregar un botón secundario. ¿ Cómo puedo hacer eso? Es tan sencillo. En primer lugar, voy a seleccionar mi conjunto de componentes. Entonces voy a agrandar esta frontera o, digamos, marco así. Por último, voy a seleccionar todos mis botones, presionar “Comando D” o “Control D”, moverlos hacia abajo. En primer lugar, voy a seleccionar todos ellos, estos tres botones sin icono, y déjame cambiar su color. Ve a “Colores de selección” y trata de cambiar la U así. Creo que es bueno. Asegúrate de agarrar este código de color hexadecimal, cópielo, y selecciona los otros tres botones, y pega el color aquí. Estamos hechos con su color. De lo único que queda es cambiar sus nombres. ¿ Qué debemos cambiar aquí? Tenemos que cambiar la palabra clave primaria a secundaria y estamos hechos, básicamente. Voy a seleccionarlos todos, pulsa “Comando R” o “Control R” en tu teclado. Aquí en el campo de texto Match, voy a escribir Primaria. Significa obtener primaria. Entonces lo voy a reemplazar por Secundaria así. Si presiono “Renombrar”, se les cambia el nombre. No hace falta hacer nada más. Vamos a intentarlo. Voy a ir a “Activos” y voy a arrastrar y soltar este botón. Ahora, en lugar de primaria, voy a elegir secundaria y tenemos otros estados. Podrías encender un ícono como este. Es así como podrías crear diferentes tipos de tu botón. Recapitulemos. En primer lugar, hay que recordar que tenemos dos tipos diferentes de variantes: variantes unidimensionales y variantes multidimensionales. El segundo que debes recordar es que puedes usar variantes o componentes. Debes tener en cuenta que necesitas tener componentes si quieres usar variantes. Lo último que debes recordar es que debes tratar organizar muy bien tus propiedades. Si selecciono este conjunto de componentes aquí, tengo Tipo, Estado, Icono. Asegúrate de nombrarlos correctamente porque más adelante, medida que crece tu proyecto, te resultará fácil trabajar con él. Lo último que voy a mencionar aquí es que en realidad se podría modificar el orden de estas propiedades. Si ordenas este tipo justo al lado, puedes ver que aparece un icono. Si hago clic y arrastre así, puedo cambiar el orden de estas propiedades, que es tan cool. En función del nivel de importancia, podrías simplemente modificarlos. Pero en este caso, creo que Tipo, Estado, e Icon tienen sentido. Muy bien chicos, eso es todo por este video. Espero que lo hayas disfrutado y te veré en el siguiente video. Nos vemos entonces. 43. Cuadrícula de diseño: Hola a todos. Bienvenido de nuevo a otro video de este curso. En este video, vamos a estar hablando de las rejillas de diseño. Básicamente, las rejillas de diseño nos ayudarán a diseñar con precisión, que podamos entender dónde exactamente deben colocarse nuestros objetos o cómo podría colocar sus objetos en diferentes tamaños de pantalla. Para agregar una cuadrícula de diseño, puede dirigirse al panel de propiedades o inspector y justo en el medio, puede ver la sección de cuadrícula de diseño. Voy a dar clic en este “Botón” Plus así y en el ajuste avanzado, puedes establecer el tamaño. Por ejemplo, puedo establecerlo en ocho si lo voy a usar para diseñar aplicaciones móviles y puedo establecerlo en 10 si estoy diseñando una página web. También puedes modificar el color así y la opacidad por supuesto. Si quieres cambiar el tipo de tu cuadrícula de diseño, puedes dirigirte fácilmente a este menú desplegable. Como se puede ver, tenemos tres opciones diferentes. El primero es grid, y esto es lo que se puede ver aquí. El segundo es columnas. En este caso tienes más opciones para modificar, por ejemplo tienes conteo, por lo que significa el número de tus columnas que quieres usar. Si estás diseñando una página web, puedes establecerla en 12, es la cuadrícula de diseño más famosa para diseñar una página web. Entonces tienes tipo, ancho, y margen. El ancho está deshabilitado porque estamos usando el tipo stretch, por lo que Básicamente significa que estira todas las 12 columnas a través de nuestro tablero de arte. Si lo cambio a centro, se puede ver que se habilitará el ancho, por lo que fácilmente puedo establecer el ancho en 30 o incluso 60 así, y está centrado. El monto de canaleta es el espacio entre columnas y filas y aquí puedes establecerlo a la derecha, puedes establecerlo a la izquierda y estirar. ¿ Cuándo se debe utilizar centro? Por ejemplo, si estás diseñando una página web para una pantalla ultra ancha, puedes usar esta opción de centro. También puedes cambiarlo a filas, como puedes ver. El siguiente punto importante que voy a mencionar es que rejillas de diseño no dependen de la dimensión de tu tablero de arte. Significa que si trato de cambiar el tamaño de este tablero de arte así, puedes ver que tu cuadrícula de diseño estará intacta. Muy bien, chicos, eso es todo por este video. Espero que lo hayas disfrutado y te veo en el siguiente video. 44. Plugins: Hola a todos y bienvenidos de nuevo a otro video de este curso. En este video, vamos a estar hablando de plugins en Figma. En realidad los plugins son scripts o aplicaciones de terceros que amplían la funcionalidad de otra aplicación. Para hacer algo de forma rápida o incluso mágicamente puedes usar plugins en tu proyecto. Ahora te voy a mostrar cómo podemos encontrarlos, cómo puedes instalarlos, desinstalarlos y finalmente, cómo puedes usarlos. Vamos a ir a “Plugins” justo debajo de la sección “Recientes” en tu panel de control. Esta ventana se divide en tres secciones diferentes. Plugins destacados, populares e instalados. En la sección de plugins destacados, puedes encontrar todos los plugins destacados de Figma, como puedes ver aquí, tenemos Sympli Handoff, tenemos Vectary 3D, cual aprenderemos en la sección de modelado 3D de este curso, tenemos Master, Arrow Auto, Clean Document, etc. Hay innumerables plugins por ahí que puedes utilizar en tu proyecto. No obstante, ahora les voy a mostrar los plugins más importantes y los más populares, y vamos a aprender a usarlos. Como puedes ver en la sección popular, tenemos estos plugins. El primero se llama “Unsplash”, que es tan útil. Si hago click en eso, podrías ver la descripción aquí. Puedes insertar bellas imágenes de Unsplash directamente en tus diseños. Es un gran plugin y además es un gran sitio web. Podrías usar imágenes libres de derechos de autor de este sitio web. Para poder instalar plugin, podrías hacer click en este botón y eso es todo lo que está instalado y si quieres desinstalar un plugin, puedes de nuevo, dar click en eso y ya está hecho. Bastante cool. Podrías obtener toda la información sobre estos plugin aquí, puedes hacer click en “Ver todo” puedes aprender sobre cada versión diferente. Volvamos a plugins y aquí, como puedes ver, tienes unsplash en la sección instalada, después tenemos Contenidos Reel. Es otro buen plugin que te da aleatorizar datos con el fin de que puedas diseñar todo con datos reales. Yo también lo voy a instalar. Entonces tenemos gráficos. Se pueden crear diferentes gráficos. No necesitamos eso por ahora. Tienes Map Maker, que es tan genial. Puedes escribir fácilmente tu dirección en este campo de texto y te crea una pantalla de Google Maps o incluso y una pantalla de Mapbox. Vamos a instalarlo también. Tenemos Isométrico, es tan genial. Voy a instalarlo. Contamos con Vectary 3D vamos a instalarlo también porque tenemos una sección completa sobre modelado 3D en este curso. Podrías usar modelos 3D en tu diseño. Entonces tienes Renombrar It y Themer, no voy a instalarlos ahora. Ahora vamos a dar click en “Navegar por todos los plugins”. Aquí voy a buscar un plugin llamado Brandfetch. Ahí vamos. Es el segundo. Yo también lo voy a instalar. Busquemos Palette. Aquí vamos, y eso es todo por ahora. De hecho, puedes seguir adelante e instalarlos todos. No obstante, en mi opinión, es mejor ir a revisar tu descripción, obtener alguna información de que cómo funcionan estos plugins, y luego podrías decidir cuál es adecuado para tu proyecto. Ahora vamos a crear un nuevo archivo. Voy a presionar “A” para agregar un tablero de arte. Voy a elegir MacBook Pro. Entonces vamos a crear un rectángulo aquí. Voy a aumentar el radio de esquina para que sea agradable. Ahora una vez seleccionado mi objeto, puedo dirigirme a la sección de menús. Aquí puedo abrir plugins. Tengo todos mis plugins listos aquí. Por ahora, voy a elegir Unsplash y ten en cuenta que solo puedes usar un plugin a la vez. No se pueden usar dos o más plugins al mismo tiempo. Ahora tenemos el plugin Unsplash abierto y fácilmente puedes hacer click en “Insertar aleatorio”. Ahí vamos. Se puede obtener una imagen aleatoria de inmediato. También puedes elegir estos presets, por ejemplo, minimalista o naturaleza, coloridos. Por supuesto que también puedes buscar. Por ejemplo, vamos a escribir retrato y ahí vamos. Es bastante impresionante. Puedes elegir uno fácilmente. Fantástico. ¿Se puede ver lo increíbles y poderosos que son estos plugins? Ahora puedo crear un texto. Vamos a escribir nombre. Voy a aumentar el tamaño a 40. Entonces vamos a la sección de plugins y voy a seleccionar Contenidos Reel. Ahora como puedes ver, tienes diferentes opciones en estos plugin. Por ejemplo, tienes texto, tienes avatares, tienes iconos. En primer lugar, probemos esta opción de texto. Como puedes ver, he seleccionado mi capa de texto de nombre, y voy a hacer clic en ella en este “Nombres”. Ahí vamos, tienes un nombre aleatorio. Si hago clic una vez más, podemos ver que aquí puedo conseguir nombres aleatorios. Si hago clic en estos puntos, puedes definir algunos ajustes. Por ejemplo, puede establecer si desea un nombre en inglés estadounidense, francés, español. Si elijo francés, puedes hacer click en “Aplicar” y ahí vamos. Incluso puedes cambiar el sexo. Por ejemplo, aquí tenemos varón o hembra. Puede especificar si desea solo nombre o apellido como este. Podrías ver aquí la vista previa de tu configuración definida. Ahora si quieres conseguir un número de teléfono, podrías hacer click en “Teléfono”. Ahí vamos. Si desea obtener una dirección, podría dar click en “Dirección” y aquí está su dirección. Podrías conseguir números, podrías conseguir fecha y hora, así. Sorprendentemente, también puedes generar algunos contenidos de Lorem ipsum como este. Puedes obtener direcciones de correo electrónico y algunas URL como esta. Ahora probemos la sección de avatares e iconos. En primer lugar necesitamos crear un círculo. Entonces voy a dar click en “Avatares”. Aquí puedo usar varón, hembra, varón y hembra. Voy a elegir femenino. Ahí vamos. Si duplico este círculo varias veces y los selecciono todos, y hago clic en “Hombre y Mujer”, se podría ver que tengo diferentes imágenes para cada círculo, lo cual es bastante asombroso. Si quieres usar iconos, primero necesitas descargar algunos fondos porque estos no son iconos PNG, que podrías usar fácilmente. Primero necesitas descargar algunos fondos especiales, y luego podrías usar estos iconos. Ahora, probemos con el Maker de Mapas. Primero necesito asegurarme de si lo instalé o no. Parece que me olvidé de instalarlo. Demos click en “Administrar plugins” y vamos a navegar por todos los plugins. Ahora vamos a buscar Map Maker. Vamos a instalarlo. Voy a ir a plugins, y ahí vamos. Aquí insertemos una dirección. No lo sé, escribamos Harrison. Ahí vamos. Podrías ser más específico, podrías agregar algunos números. No obstante, para efectos de este tutorial, creo que es suficiente. También podrías decidir si quieres obtener una pantalla de Google Maps o un Mapbox, así, también podemos modificar algunas propiedades aquí. Por ejemplo, puede cambiar el tipo de mapa de Roadmap a Satellite a Híbrido. También podría cambiar el nivel de zoom. Por ejemplo, voy a modificarlo a 16, así. También puedes añadir un marcador. Por ejemplo, este, eso es bastante impresionante. El siguiente plugin del que vamos a hablar es Brandfetch. Hay momentos en los que puede que necesites obtener un logotipo de un sitio web y lleva mucho tiempo ir solo a buscar ese logotipo, guárdelo, y luego insertarlo en Figma. En lugar de eso, podrías usar estos plugin. Supongamos que queremos conseguir el logotipo de Apple. Si solo escribo su nombre de dominio como su sitio web, apple.com y hago clic en “Obtener Logo”. Se podía ver el logotipo de Apple de inmediato. Puedo escalarlo, puedo bajarlo. Probemos otro logo también, Brandfetch. Escribamos figma.com y ahí vamos. Es bastante increíble, ¿no? El siguiente plugin del que vamos a hablar es el Palette. Si quieres crear alguna gran paleta de colores, pero no sabes cómo elegir tus colores. Este plugin te permite crear sorprendentes Paletas de colores en un segundo, como puedes ver, puedes cambiarlo de estándar a interfaz de usuario como esta. Se puede refrescar. Puedes elegir una foto con el fin de obtener algunos colores de eso. Puedes guardarlo. Ahí vamos. Tienes tus Paletas de colores listas para usar. Puedes obtener el código de color hexadecimal justo por ahí. Es bastante fantástico. En este video has aprendido a instalar plugins, cómo desinstalar eso, cómo puedes usarlo en tus proyectos. Espero que realmente hayas disfrutado de este video. Muchas gracias por verlo, y te veo en el siguiente video. 45. Exporta: Hola a todos y bienvenidos de nuevo a otro video de este curso. En este video, vamos a estar hablando de exportar tus archivos. Como diseñador de UI/UX, necesitas saber exportar tus archivos correctamente para entregarlos a tu desarrollador o a tu cliente. Supongamos que desea exportar estas imágenes, para hacer eso, en primer lugar, puede seleccionar un objeto, y luego en la sección Propiedad, tiene la sección Exportar. Si hago clic en este icono de “Plus”, puedes ver que puedes modificar estos ajustes. Como puedes ver, por defecto, está configurado en 1x. ¿ Qué significa eso? Significa que si lo exporta tal como está, obtendrá la misma dimensión de su archivo. No obstante, si estás diseñando esto para una aplicación que requiere que tengas diferente tamaño de archivo, puedes abrir este menú desplegable, y puedes configurarlo en 2x o 3x. También puedes escribir el sufijo aquí y luego puedes especificar el formato. Por ejemplo, puedes configurarlo en PNG, JPG, SVG y PDF, y luego puedes previsualizarlo y finalmente, puedes hacer click en “Exportar” y ahí vamos, puedes configurar fácilmente un nombre y dar click en “Guardar”. No obstante, si no quieres exportar tus archivos y solo quieres compartir este proyecto con tus compañeros de equipo o con tu cliente, puedes dirigirte a la sección Barra de herramientas y dar click en este botón azul, que se llama Compartir, y aquí puedes invitar a alguien a ver este proyecto o a editar este proyecto, depende totalmente de ti. También puedes copiar el enlace y enviarlo a otra persona. Si quieres presentar este proyecto en tu página web, puedes hacer click en “Obtener código de inserción”, y obtendrás un código iframe el cual podrás agarrarlo y copiarlo y pegarlo en tu archivo HTML y conseguirás estos proyectos en vivo en tu sitio web, por lo que si realizas algún cambio aquí, se aplicará también a tu sitio web. Es bastante asombroso. Muy bien chicos, muchas gracias por ver este video, espero que lo hayan disfrutado y los veo en el siguiente video. 46. Prototipos: Hola, todos y bienvenidos de nuevo a otro video de este curso. En este video, vamos a estar hablando de prototipos en Figma. Como diseñador UX de UI, es crucial saber acerca de los prototipos y tan importante dominar este tema porque no importa lo bonitos y lo increíbles que sean tus diseños, al final del día, si no puedes presentarlo en un manera increíble, tu arduo trabajo no da frutos, por lo que necesitas dominar este tema. Por esta razón, contamos con una sección completa sobre prototipado en este curso. En este video, te voy a mostrar cómo funciona el prototipado y quiero familiarizarte con el concepto. Sin más preámbulos, comencemos agregando dos tableros de arte. Voy a presionar “A” en mi teclado y vamos a elegir iPhone 11 Pro o X. Entonces voy a duplicar eso porque necesitamos dos tableros de arte diferentes y vamos añadir un rectángulo a este primer tablero de arte como éste. Voy a aumentar el radio de esquina a 40. Bastante bien. Permítanme alinearlo al centro. Entonces voy a elegir una imagen de nuestro archivo de activos. Por ejemplo, elijamos este en la carpeta Cards, número 2. Yo lo voy a abrir y pongámoslo aquí. Bastante impresionante. Entonces en el segundo tablero de arte, vamos a crear otro rectángulo. Bastante bien. Debe ajustarse a tu tablero de arte. Entonces voy a colocar aquí la misma imagen. Fantástico. Ahora es el momento de agregar interacciones a nuestro diseño. Permítanme renombrarlo para referirme a eso fácilmente, así que voy a cambiar el nombre a Home y el segundo a Detalle. Bastante bien. En realidad, si el usuario hace clic en esta imagen en nuestro tablero Home art, nuestra tabla Detail art debe presentarse en un segundo. Entonces necesitamos animarlo. En primer lugar, en la sección de propiedades, puedes seleccionar Prototipo de estas tres pestañas como esta. Entonces necesitas seleccionar tu objeto. Como puedes ver, mi imagen ya está seleccionada. Como se puede ver, aquí aparece un círculo. Entonces si hago clic en eso y sostengo mi ratón así, puedo conectarlo fácilmente al siguiente tablero de arte. Dejémoslo y ahí vamos. Ahora nuestras tablas de arte están conectadas. Si quiero quitar esta conexión, puedo arrastrarla y soltarla en el lienzo así. Una vez que hayas creado tu primera conexión, aparecerá un pequeño cuadrado azul en la esquina superior izquierda de tu primer tablero de arte. Significa que tu prototipo parte de este tablero de arte. Si quieres cambiarlo, puedes hacer clic fácilmente en eso, arrastrarlo, y soltarlo aquí así. Ahora que hemos creado nuestra interacción, vamos a previsualizarla por un segundo. Si voy a la barra de herramientas y hago clic en este botón de Vista previa, puedo ver mis tableros de arte aquí. Si hago clic en cualquier parte de mi tablero de arte así, podemos ver que me muestra que hay una interacción para esta imagen. Por lo que esta caja azul es un punto caliente. Ahora si hago clic en eso, se puede ver que mi segundo tablero de arte aparece de inmediato. No obstante, aquí no tenemos ninguna animación. Volvamos a nuestro archivo de proyecto. En la sección Prototipo, tienes sección Interacciones, tienes Animación. Aquí podemos elegir el tipo de interacción. Por ejemplo, tenemos On Tap, On Drag, Mientras se desplaza, Mientras se presiona, Mouse Enter, etc. No vamos a sumergirnos en estos detalles ahora mismo porque lo cubriremos en la sección de prototipos de este curso. También tienes el destino aquí. Navegar A, Abrir superposición, Intercambiar con, Atrás, Cerrar superposición y Abrir URL, y aquí está su destino. Después tenemos la sección Animación también. Como puedes ver, está configurado en instantáneo por defecto. Si abro este menú drop, tengo un montón de opciones. Tengo Smart Animate, que es una nueva característica. Contamos con Mover In, Mover Out, Empuje, Deslice In, y Deslice Out. Ahora voy a elegir Smart Animate y aquí tenemos opciones avanzadas. Por ejemplo, puedo elegir Ease In, Ease Out, Facilidad de entrada y salida, y Lineal. Estas están relacionadas con cosas de Animación. Lo cubriremos en el apartado avanzado. Aquí tienes el tiempo. Por ejemplo, puedo ajustarlo a 400 milisegundos así. También puedes abrir el ajuste del prototipo aquí. Está relacionado con esta ventana. Podemos modificar por ejemplo, el fondo demasiado blanco como este como tú desees. Puedes cambiar el modelo de tu iPhone, por ejemplo. Aquí está ajustado a Oro. Puedo elegir Midnight Green así. Fantástico. Ahora vamos a comprobarlo una vez más. Voy a ir a la primera página y ahora vamos a dar click en nuestra imagen. Ahí vamos. Es fantástico, ¿no? Si quieres empezar de nuevo, puedes hacer clic en este botón, reiniciar, y luego puedes comprobarlo una vez más. Ahora volvamos a nuestro archivo de proyecto. Aquí, como puedes ver, el nombre de nuestros rectángulos en estas dos tablas de arte son diferentes, así que hagámoslos iguales. Voy a cambiarlo a Imagen y este también Imagen. ¿ Qué crees que va a pasar? Vamos a comprobarlo. Voy a ir a Prototyping, reiniciemos eso, y una vez más, voy a dar click en eso. Fantástico. ¿Viste la diferencia aquí? Con la ayuda de Smart Animate, podrías crear este tipo de animación y creación de prototipos fácilmente en Figma, lo cual es bastante increíble. Si vas a sumergirte en animaciones más complejas y prototipos más complejos en la sección de prototipos de este curso. Muy bien, chicos. Eso es todo por este video. Espero que lo hayas disfrutado y te veo en el siguiente video. 47. Multijugador y comentado: Hola a todos y bienvenidos de nuevo a otro video de este curso. En este video, vamos a estar hablando de multijugador y comentando. De hecho, Figma tiene poderosas características con el fin de facilitar la colaboración de los diseñadores. Por lo que como ya mencioné, puedes compartir fácilmente tu proyecto con este botón azul. Si hago clic en eso, como pueden ver, ya invité a una persona y defino el ajuste que puede editar este proyecto. Después recibió un correo electrónico de Figma, aceptó eso y a partir de ahora puede colaborar conmigo para editar este proyecto. Como se puede ver en la barra de herramientas, hay dos personas viendo este proyecto. El primero soy yo, el segundo es esta persona, que también soy yo en este tutorial. Ahora te voy a mostrar cómo puedes usar eso. Permítanme cambiar a estas cuenta de diseño de la interfaz de usuario. Ahí vamos. Supongamos que elijo esta capa, si vuelvo a mi cuenta principal, se puede ver que ya ha sido seleccionada. ¿ Por quién? Este diseño de interfaz de usuario. Si cambio la posición de mi cursor aquí, se puede ver que cambiará inmediatamente también en este proyecto, o vamos a seleccionar otro objeto, por ejemplo, este menú y allá vamos. El diseño de la interfaz de usuario está haciendo algo con esta capa. Si selecciono el fondo aquí, esta es mi cuenta y cambio a la otra cuenta, se puede ver este trazo morado el cual indica que eligieron este fondo. Se pueden ver estos colores en la barra de herramientas con el fin reconocer qué persona está seleccionando qué objeto. Es bastante guay, ¿no? Ahora supongamos que quiero agregar aquí algunos comentarios. En la barra de herramientas justo al lado de nuestra herramienta de texto, hay otro icono para comentar. Si hago clic en eso, puedo colocar un marcador aquí, por ejemplo, aquí y puedo escribir un comentario, por ejemplo, ¿dónde está el CTA? Que es Llamada a la Acción. Puedo publicarlo. Incluso puedo mencionar a alguien aquí como add UI design y esta persona recibirá un correo electrónico sobre este comentario y me puede responder. Hecho. En esta cuenta, podemos ver que hay un comentario. Doy click en eso, escribo, ¿dónde está el CTA? Puedo contestar, lo diseñaré para esta noche. También podemos agregar un emoji aquí. Bastante cool. Responder, eso es impresionante y aquí en mi cuenta, puedo ver la respuesta de inmediato, lo cual es bastante fantástico. Si este problema ha sido solucionado, puedes hacer click en el botón Resolver y este comentario se eliminará. Como puedes ver, Figma te ofrece un montón de características con el fin de colaborar con otros diseñadores sin exportar tus archivos y enviarlos y todas esas cosas. que puedas cooperar instantáneamente con los demás y compartir tus ideas sobre tu diseño. Muy bien chicos, eso es todo por este video. Espero que lo hayas disfrutado y te veo en el siguiente video. 48. Atajos de teclado: Hola a todos. Bienvenido de nuevo a otro video de este curso. En este video, vamos a estar hablando de atajos de teclado en Figma. Como diseñador, es tan importante conocer los atajos más importantes de la plataforma que estás utilizando para diseñar. Debido a que Figma es un software multiplataforma, es demasiado difícil cubrir todos esos atajos en un solo video. No obstante, en lugar de mencionar y discutir todos esos atajos, te voy a mostrar una manera muy grande y rápida de que pudieras encontrar los atajos que necesitas para tu flujo de trabajo. Ya sea que estés usando macOS o Windows, podrías usar de esta manera en ambos sistemas operativos. Como puedes ver justo en la parte inferior derecha, hay un icono de signo de interrogación, se llama ayuda y recursos. Si hago click en eso, puedes ver aquí hay un montón de más opciones. Uno de ellos dice Atajos de teclado, y esto es exactamente lo que necesitamos. Hagamos click en ese Atajos de Teclado. Ahí vamos. Ahora tenemos acceso a todos esos atajos en un solo lugar. Como puedes ver, está categorizada en diferentes secciones, como Esencial, Herramientas, Ver, Zoom, Texto, Forma, etc. Porque estoy usando macOS, por ejemplo, aquí me muestra la tecla Command, pero si eres usando Windows, seguro, verás Control aquí. O por ejemplo, si voy a View, aquí tengo Command; para ti, si estás usando Windows, es Control seguro. De esta forma, puedes encontrar fácilmente los atajos que necesitas. Pero ahora, voy a mencionar algunos de los atajos más importantes que pueda necesitar para este curso. Empecemos con copiar y pegar. Al igual que otro software para copiar y pegar, puedes elegir fácilmente tu elemento como este texto y puedes usar Command C. Si quieres pegarlo, puedes usar Command V en macOS. No obstante, si estás usando Windows, puedes presionar Control C y Control V, y obtendrás el mismo resultado. Si quiero agrupar estas capas, por ejemplo, estas Windows y macOS así, puedo presionar Command G en mi teclado. No obstante, en Windows, puedes presionar Control G. Si quieres duplicar algo, puedes seleccionar la capa deseada y presionar Comando D en macOS. Si estás usando Windows, puedes presionar Control D en su lugar. Para escalar algo, puedes ir aquí y elegir la herramienta de escala, o bien puedes presionar K en tu teclado. No importa si estás usando macOS o Windows, porque no necesitas usar las teclas Comando o Control. Simplemente tienes que presionar K en tu teclado. Como se puede ver ahora, se selecciona la herramienta de escala. último, pero no menos importante, si quieres revisar los remaches y los márgenes, puedes mantener pulsada la tecla Opción en tu teclado si estás usando macOS de esta manera, y desplazar el ratón sobre otros elementos cerca de tus elementos seleccionados. Como pueden ver, ahora tengo este número el cual se indica con un texto rojo, y este es el relleno entre estos dos elementos. En Windows, puedes mantener presionada la tecla Alt en tu teclado y hacer lo mismo. Si quieres alejar, puedes mantener presionada la tecla Comando y desplazarte así, alejar y acercar. En Windows, puedes mantener presionada la tecla Control y hacer lo mismo. Eso es todo por este video. Espero que lo hayas disfrutado y te veo en el siguiente video. 49. Introducción a los elementos de UI: Hola a todos. Bienvenido de nuevo a otra sección de este curso. En esta sección, vamos a estar hablando de UI Elements, que son tan importantes cuando estás diseñando una interfaz de usuario. En la próxima serie de videos, vamos a hablar de campos de texto, botones, deslizadores, tarjetas, diálogos o incluso steppers y gráficos. Si estás confundido sobre todos esos elementos, te sugiero que estés viendo esta sección. Nos vemos en la siguiente serie de videos. 50. Camde: Oigan, todos, bienvenidos de nuevo a otro video de esta sección. En este video, vamos a estar hablando de campos de texto. Como sabrá, los campos de texto son elementos de interfaz de usuario, que permiten a los usuarios introducir un texto en una interfaz de usuario. Por lo general aparecen en diálogos y formas. Casi todas las aplicaciones móviles y también los sitios web utilizan al menos un tipo de campos de texto. Por ejemplo, puedes usarlos para ingresar fechas, nombres, hora, etc. Como diseñador de UI, necesitas conocer la anatomía de un campo de texto como se describe en la imagen. Es posible que encuentres diferentes tipos de campos de textos en diferentes plataformas. Por lo que se recomienda conocer acerca de los elementos de interfaz de usuario estándar que utiliza un sistema operativo específico. Si miras la imagen de la derecha, puedes ver que tenemos la anatomía de un campo de texto. Como puedes ver, tenemos etiqueta, tenemos el texto de entrada, tenemos el ícono final, que es opcional, como puedes ver, es el número tres. Además, contamos con indicador de activación. En ocasiones puedes usar el icono de entrada de voz o incluso un icono desplegable. Al final se puede ver que diseñamos diferentes estados de un campo de texto. Por ejemplo, si el usuario introduce la contraseña incorrectamente, el color del campo de texto puede cambiar a otra cosa, por ejemplo, rojo. 51. Botones: Oigan, todo el mundo. En este video, vamos a estar hablando de botones en diseño. botones permiten a los usuarios tomar acciones, por lo que siempre que un usuario necesite hacer algo, los botones entran en juego. Creo que ahora entiendes lo importante que es saber sobre el diseño de botones. Cuando estés diseñando un botón, asegúrate de prestar atención a los siguientes puntos. Número 1, estados. Diseñar todos los estados del botón, como activo, inactivo, tocado, flotar, etc. Número 2, jerarquía. Conoce la jerarquía de tus botones. Por ejemplo, si se trata de un énfasis alto, énfasis medio, o un énfasis bajo. Número 3, colocación. pueden utilizar múltiples tipos de botones para representar diversos niveles de énfasis. Número 4, botón de texto. Los botones de texto se suelen utilizar para acciones menos pronunciadas, por ejemplo, en diálogos y tarjetas, y por último pero no menos importante, el contraste. Los botones deben tener suficiente contraste para expresar la importancia de su funcionalidad. Si miras la imagen de la derecha, puedes ver que tenemos diferentes estados de un botón. Por ejemplo, tenemos activo, como se puede ver, tiene un color nítido y la opacidad es del 100 por ciento. Por otro lado, tenemos inactivo para mostrar que este botón está desactivado por ahora, que aquí es gris. También hemos tocado así cuando el usuario toca ese botón, cambia a ese color específico. Como se puede ver, tenemos eso es celeste y al final, como se puede ver, tenemos cuatro botones diferentes. Tenemos botón de texto, también tenemos botón de esquema, y luego contienen botón, y también botón de conmutación. Necesitas usarlos con cuidado cuando estás diseñando una interfaz de usuario porque es tan importante conocer la expectativa del usuario y también en términos de experiencia del usuario, es mejor usar el tipo de botón correcto en tu diseño. 52. Sliders: Oigan, todo el mundo. En este video, vamos a hablar de deslizadores en diseño. Los deslizadores permiten a los usuarios hacer selecciones a partir de un rango de valores. Son ideales para ajustar ajustes, como brillo, volumen, etc. Los deslizadores pueden tener iconos en ambos lados de la barra. Cuando estés diseñando un deslizador, asegúrate de prestar atención a las siguientes cosas. Número 1, estados. Diseña todos los estados del deslizador, como habilitar, deshabilitar, tocado, hover, etc., al igual que los botones. Número 2, ajustando. Los deslizadores solo se deben usar para elegir selecciones de un rango de valores. Número 4, celeridad. Los deslizadores deben reaccionar de inmediato, por lo que los cambios deben ser instantáneos, y por último pero no menos importante, la accesibilidad. Los deslizadores deben proporcionar toda la gama de opciones disponibles para el usuario para seleccionar. Si miras la imagen del lado derecho, puedes ver que tenemos dos deslizadores diferentes. El primero es el deslizador continuo. Como puedes ver en este tipo de deslizador, puedes modificarlo continuamente y sin ninguna interrupción. Por otro lado, en el segundo tipo de deslizadores, que es deslizador discreto, no se puede modificar sin ninguna interrupción. Existen algunos puntos fijos que el usuario puede elegir. 53. Información de herramientas: Oigan, todos. En este video, vamos a estar hablando de tooltips en diseño. Las sugerencias de herramientas son para mostrar textos informativos cuando los usuarios pasan el cursor sobre, se enfocan o tocan un elemento. Cuando estés diseñando una descripción de herramientas, asegúrate de prestar atención a las siguientes cosas. Número 1, concisión. información sobre herramientas sólo debe mostrar un texto breve. No agregues una imagen ni información detallada. Número 2, emparejamiento. Las sugerencias de herramientas siempre se emparejan cerca del elemento con el que están asociadas. Por último pero no menos importante, transitorio. sobre herramientas aparece al pasar el ratón, el enfoque o el tacto, y desaparecen después de una corta duración. El tiempo recomendado es de 1.5 segundos. Como se puede ver en el lado derecho, tenemos una descripción de herramientas en la que se muestra texto informativo. Tenemos un atajo para negrita, y también tenemos información adicional aquí, guardar para botón Confirmar. Asegúrate de usarlos correctamente. 54. Controles de selección: Hola a todos. En este video, vamos a estar hablando de controles de selección. Los controles de selección permiten a los usuarios seleccionar fácilmente entre diferentes opciones. Es útil para declarar preferencias como ajustes. Cuando esté diseñando su control de selección, asegúrese de prestar atención a los siguientes puntos. Número 1, familiaridad. Los controles de selección se han utilizado en el diseño de la interfaz durante mucho tiempo y deben utilizarse como se esperaba. Número 2, eficiencia. Los controles de selección llevan a los usuarios a comparar fácilmente dos o más opciones. Por último pero no menos importante, escaneable. Los controles de selección deben aparecer de manera que los usuarios puedan reconocerlos de un vistazo. Los elementos seleccionados deben ser visualmente distinguibles de los elementos no seleccionados. Como se puede ver en el lado derecho de la pantalla, tenemos tres controles de selección diferentes. El primero es conmutadores. Es útil para apuntar una sola opción encendida o desactivada, y es tan popular. El siguiente son los botones de radio. Son útiles para seleccionar una sola opción de una lista. El último es casilla de verificación, y es útil para seleccionar uno o varios elementos de una lista. Asegúrate de usarlos de una manera correcta. 55. papas fritas: Hola a todos. En este video, vamos a estar hablando de chips. chips permiten a los usuarios hacer selecciones, activar acciones, ingresar información, etc. A diferencia de los botones que deben ser una llamada a la acción consistente, chips deben aparecer dinámicamente como un grupo de múltiples elementos interactivos. Cuando estés diseñando un chip, asegúrate de prestar atención a las siguientes cosas. Número 1, estados. Al igual que los botones y deslizadores, necesitas diseñar todos los estados de tus chips, como activar, desactivar, tocado, flotar, etc. número 2, relevancia. Los chips deben tener una relación útil con el contenido o tarea que representan. El último, la compacidad. Los chips son elementos compactos que representan información distinta. Si miras la imagen del lado derecho, puedes ver que tenemos fichas diferentes. Algunos de ellos tienen iconos o incluso una imagen. Por otro lado, algunos de ellos sólo tienen un texto. Asegúrate de usarlos con cuidado en el diseño de tu interfaz de usuario. 56. Tarjetas: Oigan a todos. En este video, vamos a estar hablando de tarjetas en el diseño de la interfaz de usuario. Las tarjetas son contenedores que muestran contenidos y acciones sobre un solo tema. Deben ser fáciles de escanear y elementos como imágenes o textos deben colocarse sobre ellos de una manera que sin duda indique la jerarquía. Cuando estés diseñando tarjetas, asegúrate de prestar atención a las siguientes cosas. Número 1, individual, una tarjeta no se puede dividir en múltiples cartas. No debes fusionar una carta con otra. Número 2, independencia. Una tarjeta no necesita depender de sus elementos circundantes. Puede estar solo. Por último pero no menos importante, los componentes. Una tarjeta puede tener opcionalmente medios ricos como imágenes o videos, textos, botones, iconos y miniaturas. Actualmente la mayoría de los diseñadores usan tarjetas en su diseño de interfaz de usuario. Por lo que si quieres usarlos también, asegúrate de usarlos con cuidado. 57. Dibujos: Hola a todos. En este video, vamos a estar hablando de diálogos. diálogos informan a los usuarios sobre información crítica o incluso tareas. También piden a los usuarios que tomen una decisión o elijan entre diferentes opciones. Por ejemplo, los diálogos se pueden usar para pedir permiso o incluso elegir entre un rango de variables diferentes en un deslizador y mucho más. Cuando esté diseñando diálogos, asegúrese de prestar atención a las siguientes cosas: número 1, jerarquía. Un diálogo tiene la jerarquía más alta y bloquea el uso de la aplicación hasta que el usuario realiza una acción de diálogo. Número 2, visibilidad. Un diálogo debe ser reconocible fácilmente. Te recomiendo agregar una superposición oscura a la vista y poner el diálogo encima de eso. Número 3, directo. Un diálogo debe transmitir el mensaje de una manera comprensible y clara. Por último, botones. Te recomiendo usar botones uno al lado de un cuadro de diálogo, como puedes ver en la imagen. 58. Listas: Oigan, todo el mundo. En este video, vamos a estar hablando de listas. Las listas son un grupo continuo de imágenes o textos. Están compuestos por ítems, incluyendo acciones primarias y secundarias, las cuales están representadas por iconos y texto. Cuando estés diseñando listas, asegúrate de prestar atención a los siguientes puntos. Número 1, consistencia. Las listas deben presentar iconos, etiquetas y acciones en un formato consistente. Número 2, acción. Las listas muestran el contenido de una manera que facilita reconocimiento de un elemento específico en la colección y actuar en consecuencia. Por último pero no menos importante, escaneable. Las listas deben clasificarse de manera lógica que hagan que el contenido sea fácil de escanear. Como se puede ver en el lado derecho de la pantalla, tenemos diferentes tipos de listas. Por ejemplo, aquí tenemos tus contactos. Como se puede ver, está compuesto por imágenes y etiquetas, y también tiene un ícono. 59. Tablas: Oigan, todo el mundo. En este video, vamos a estar hablando de mesas. Las tablas son contenedores que muestran los diferentes registros de los usuarios, como productos, precios, estado, fechas, etc. Una tabla de datos contiene una fila de encabezado en la parte superior que enumera los nombres de las columnas seguidas de filas para los datos. Por lo general son desplazables y fáciles de escanear. Si necesita poblar algunos datos, que son ordenables y siguen el mismo patrón, puede usar tablas. Cuando estés diseñando mesas, asegúrate de prestar atención a las siguientes cosas. Número 1, ampliable. Las filas de una tabla pueden ser expandibles con el fin de permitir al usuario evaluar información adicional sin perder su contexto. Número 2, paginación. paginación funciona presentando el conjunto de números en una vista con la capacidad de navegar a otro conjunto. Por último, encabezados fijos. La fijación del encabezado de fila mientras un usuario se desplaza por una tabla ayuda al usuario a saber sobre el nombre de la columna. 60. Navegación: Hola a todos. En este video, vamos a estar hablando de navegación. navegación es el acto de moverse entre pantallas de una app para completar tareas. Por ej., puede navegar desde la página Explorar de una aplicación hasta la página Perfil. Existen diferentes tipos de navegación. Número 1, lateral, se refiere al movimiento entre pantallas al mismo nivel de jerarquía. El componente principal de navegación de aplicaciones debe proporcionar acceso a todos los destinos en el nivel superior de su jerarquía. Número 2, adelante, se refiere al movimiento entre pantallas en niveles consecutivos de jerarquía. último, pero no menos importante, revertir, se refiere a retroceder a través de pantallas ya sea jerárquicamente dentro de una aplicación o cronológicamente dentro de una aplicación o a través de diferentes aplicaciones. 61. Menus: Hola a todos. En este video, vamos a estar hablando de Menús en diseño de interfaz de usuario. En un menú se muestra una lista de opciones en una superficie provisional. Aparece cuando los usuarios interactúan con un botón, acción u otro tipo de controles. Los menús permiten a los usuarios realizar una selección a partir de múltiples opciones. A diferencia de los controles de selección, los menús son menos sobresalientes y ocupan menos espacio. Cuando esté diseñando menús, asegúrese de prestar atención a los siguientes puntos. Número 1, escaneable; las opciones de menú deben ser fáciles de escanear. Número 2, rápido; el menú debe ser fácil de abrir, cerrar e interactuar con. último, pero no menos importante, colocación; Los menús aparecen frente a todos los demás elementos de la interfaz de usuario. 62. Gráficos: Hola a todos. En este video, vamos a estar hablando de gráficos. gráficos ayudan a los usuarios a comparar valores de forma visualizada. Cuando se trata de comparar muchos valores, es mucho más fácil mirar gráficos en lugar de números en una cuadrícula. Cuando estés diseñando gráficos, asegúrate de prestar atención a las siguientes cosas. Número 1, visibilidad. La visibilidad de un gráfico es tan importante porque a veces se tiene un gráfico con detalles muy pequeños. Número 2, consistencia. Coloca tus gráficos en una tarjeta con el fin de mantener tu diseño limpio y consistente. Por último, márgenes. Asegúrate de que haya suficiente espacio en blanco entre tus gráficos y otros elementos. Posteriormente en este curso, aprenderás a crear gráficos y a usarlos en tus proyectos. 63. Patres de pasos: Hola a todos. En este video, vamos a estar hablando de steppers. Steppers muestran el progreso a través de una secuencia de pasos lógicos y numerados. En ocasiones puede utilizarlos para la navegación. Los Steppers pueden mostrar un mensaje de retroalimentación temporal, después de guardar un paso. uso de steppers podría ayudar a los usuarios a evitar perder su enfoque, cuando necesitan llenar formularios o tomar alguna acción. Cuando estés diseñando steppers, asegúrate de prestar atención a las siguientes cosas. Número 1, secciones. No incrustar steppers en otros steppers ni usar varios steppers en una sola página. Número 2, tipos. Generalmente, existen dos tipos de pasos, pasos editables y pasos no editables. Contamos con steppers horizontales y verticales steppers. Por último, retroalimentación. Opcionalmente puede diseñar retroalimentación transitoria para mostrar a los usuarios la progresión. Solo debes usar comentarios siempre que haya una latencia de línea entre pasos. 64. Barras de Snackbar: Hola a todos. En este video, vamos a estar hablando de snackbars. Snackbars proporcionan una retroalimentación concisa sobre una operación a través de un mensaje en la parte inferior de la pantalla. Deberían contener una sola línea de texto directamente relacionada con la operación realizada. Podrán contener un botón también. Cuando estés diseñando snackbars, asegúrate de prestar atención a los siguientes puntos. Número 1, debe ser breve. Snackbars solo deben mostrar información breve sobre una operación y no información detallada. Número 2, transitorio. Snackbars tiempo de espera automáticamente de la pantalla por lo que deben desaparecer rápidamente. Por último pero no menos importante, la jerarquía. Si la acción es lo suficientemente importante como para bloquear el uso de la aplicación, puedes usar diálogos en lugar de snackbars. Los snackbars solo usan un botón si es necesario y no más. Como se puede ver en el lado derecho de la pantalla, tenemos dos ejemplos diferentes. El primer grupo de snackbars están diseñados a la perfección porque no tiene más de un botón y los colores que se han utilizado son geniales. No obstante, por otro lado, el segundo grupo de nuestros snackbars cuenta con dos botones, lo cual no es ideal para snackbars. También utilizó un icono además del texto. 65. ¿Qué es el enmarcado de alambre: Hola a todos. En este video, vamos a estar hablando de wireframing. wireframing es una forma de diseñar una aplicación o servicios de sitio web a nivel estructural. Generalmente se utiliza un wireframe para diseñar contenidos y funcionalidades en una página que toma en cuenta las necesidades y experiencias de los usuarios. Podemos considerar la posibilidad de wireframing un esqueleto gráfico. Similar al plano de un automóvil, la estructura alambrada determina los detalles de todo el proyecto en la etapa inicial como la descripción del proyecto. La mayoría de los principiantes piensan que el wireframing y el prototipado son de alguna manera los mismos, sin embargo, no lo son. Un wireframe es un diseño de baja fidelidad, por lo que no ilustra la apariencia final de la interfaz de usuario. Por otro lado, un prototipo es un diseño de alta fidelidad y es dinámico e interactivo. El prototipado se parece casi al producto final. 66. Flujo de usuario: Hola a todos. En este video, vamos a estar hablando de flujo de usuarios. El flujo de usuarios es un camino tomado por un usuario prototípico en una aplicación o sitio web para completar una tarea. El flujo del usuario los dirige desde su punto de entrada a través de un conjunto de fases hacia un resultado exitoso y una acción final, como enviar un mensaje o comprar un artículo. Permítanme darles un ejemplo de un flujo de usuario muy simplificado para una aplicación de comercio electrónico. El usuario inicia desde la Página Principal. Desde la página de inicio, el usuario hace clic en una página de “Categoría”. Después, desde la página Categoría, el usuario hace clic en un “Producto”. Después, desde la página Producto, el usuario agrega un artículo al carrito y luego desde el carrito de compras, el usuario echa un vistazo. Después de eso, desde la página de Checkout, el usuario completa el pago y al final, el usuario puede obtener su recibo. Así es como se ve un flujo de usuario y es muy importante cada proyecto tenga al menos un flujo de usuario simplificado. 67. Prototipos interactivos: Hola a todos. En este video, vamos a estar hablando de prototipo interactivo. actualidad, el prototipado está jugando un papel cada vez más vital en el proceso de diseño. Usted como diseñador de UI/UX, necesita saber cómo hacer un prototipo de alta fidelidad de su proyecto de una manera que pueda transmitir claramente el mensaje de su diseño y también la interacción exacta que desea lograr. No solo los prototipos pueden ayudarte como diseñador a presumir de tu trabajo, sino que también puede ayudar a los desarrolladores a saber cómo se debe convertir tu diseño en código. Estas son algunas herramientas útiles que puedes usar para la creación de prototipos interactivos. Sketch, se puede utilizar para la creación de prototipos interactivos simples. InVision Studio, se puede utilizar para prototipos interactivos modernos y complicados. Principio, se puede utilizar para prototipos interactivos modernos y detallados, y mucho más. Por ejemplo, puedes usar ProtoPie también para prototipos avanzados. 68. Herramientas de Wireframe: Hola a todos. En este video, voy a hablar de herramientas wireframe. Ahora que sabes la importancia de la wireframe en el diseño UX de UI, es hora de hablar de las herramientas que son absolutamente útiles para preparar tu wireframe. Si bien algunos diseñadores prefieren usar software independiente para wireframing, hay diseñadores que prefieren usar herramientas basadas en web para wireframing. No importa la forma en que te guste elegir, asegúrate de mantener tu wireframing consistente. Estas son algunas herramientas útiles que puedes usar para wireframing. Número 1, MockFlow, puedes usar mockflow.com, y ofrece una variedad de servicios gratuitos y de pago. Número 2, Figma, puedes utilizar figma.com, y también ofrece servicios gratuitos y de pago. Número 3, sketch, es una aplicación de pago, y por último pero no menos importante, Adobe XD, que es gratis, y puedes instalarlo tanto en macOS como en Windows. 69. Encuadre de alambre en Figma: Hola a todos. Bienvenido de nuevo a otro video de este curso. En este video, vamos a estar hablando de wireframing en Figma. Como mencioné antes en videos anteriores, crear un wireframe de baja fidelidad es una tarea importante para un diseñador UX de UI. En este video, te voy a mostrar cómo puedes crear tu propio wireframe usando un kit de interfaz de usuario de wireframe prefabricado por Figma. En primer lugar, les voy a pedir que abran esta URL, figma.com/templates/wireframe-kits. En esta página, puedes encontrar estos kits wireframe que ha sido diseñado por Figma y si te desplazas un poco hacia abajo puedes obtener una copia gratuita de eso. Da click en eso y luego verás algo como esto. Este es un kit de interfaz de usuario de wireframe prefabricado que ha sido diseñado por Figma y te voy a mostrar cómo puedes usar esto. En primer lugar como puedes ver, tienes tres páginas diferentes. iniciar, construir el suyo propio y el ejemplo. En la página de inicio, si hago zoom un poco puedes ver que tienes alguna información sobre todos esos componentes. Por ejemplo, tenemos botones y tarjetas, tenemos navegación, tenemos aquí secciones, tenemos prueba social, tenemos características izquierda, características derecha, etc. Entonces tenemos construir las suyas propias y ejemplos. Abramos Construye Tu Propia. Aquí tienes un marco. Voy a eliminar estos componentes y supongamos que vamos a crear un marco de cable para un sitio web. En primer lugar, necesitamos una sección de héroes. Puedo ir fácilmente a Activos. Aquí, tengo un montón de componentes. Tengo héroe, tengo pie de página, características derecha, características izquierda, CTA, etc. Empecemos con hero y aquí tengo tres opciones diferentes. Voy a empezar con el primero. Arrástrelo y soltémoslo aquí. Voy a ponerlo aquí y alinearlo al centro. Perfecto. Como puedes ver, es el centro de héroes. Puedo ir fácilmente a la sección Instancia del inspector. Puedo abrir este menú drop y desde aquí puedo cambiarlo a lo que quiera. Por ejemplo, puedo cambiarlo a imagen lateral de héroe así. Prefiero éste porque también tengo una imagen. Vamos a quedarnos con este. Entonces, voy a aumentar el tamaño de altura de mi marco. Aumentémoslo un poco para tener más espacio con el que trabajar. Perfecto. Después de eso voy a añadir algunas características. Abramos Características. Bastante bien. Voy a usar este. Fantástico. Debido a que es un wireframe de baja fidelidad no necesitas preocuparte por toda esta información, todos estos colores. Mantenlo lo más simple posible. Entonces voy a añadir algunos posts. Abramos la sección de puestos. A partir de aquí, puedo usar post tail así. Por supuesto, puedes editar estas etiquetas y todos estos contenidos si lo deseas. Después de eso, voy a sumar alguna prueba social como testimonial. Usemos este, se ve genial. Después de eso, necesito tener un CTA. Abramos CTA y voy a elegir CTA Center. Bastante bien. Necesito aumentar la altura de mi marco. Déjame seleccionarlo. último pero no menos importante, voy a añadir un pie de página porque es necesario tener uno. Usemos este Pie de página Completo. Fantástico. Eso es todo. Como puedes ver, no agregué ninguna navegación. Pero es necesario tener uno, así que vamos a añadir una navegación. Creo que estas navegación es una gran opción como esta. Fantástico. Ahora, necesito disminuir mi talla de altura y eso es todo. Ahora si lo previsualizo puedes ver que tengo la navegación. Como pueden ver, tengo un logo, algunos menús en la parte superior luego tengo un botón de registro. Aquí tengo mi sección de héroe la cual consta de algunas etiquetas y un CTA y también una imagen. Entonces tengo mi característica clave como esta. Después de eso presento alguna pose y luego tengo la prueba social. Podrían ser revisiones, testimonios, cualquier cosa. Entonces tengo otro CTA aquí que es mi último CTA. Después de eso agregamos un pie de página. Aquí, tengo todos los enlaces relacionados con mi página web. Chicos, ¿vieron lo fácil que es crear su propio alambrón en Figma? Eso es todo por este video. Espero que lo hayas disfrutado y te veo en el siguiente video. Nos vemos entonces. 70. ¿Qué es un estilo de color?: Hola. Bienvenido de nuevo a otra sección de este curso. En este video, vamos a estar hablando del estilo de colores. ¿ Qué es un estilo de color? De hecho, cada marca tiene un conjunto de colores a los que se adhieren. Por ejemplo cuando piensas en Twitter, estoy bastante seguro de que piensas azul. En esta sección, vamos a crear nuestro propio estilo de color, o digamos nuestra propia guía de estilo para ayudarnos durante nuestro proceso de diseño. Te veo en el siguiente video. 71. Primary, acento, colores Semantic: Hola a todos. Bienvenido de nuevo a otro video de este curso. En este video, vamos a empezar a crear nuestra guía de estilo o nuestro sistema de diseño, lo cual es muy importante cuando se quiere trabajar en un proyecto complejo. Al principio, puede parecer que hay mucho trabajo por hacer, sin embargo, vale la pena. En primer lugar, necesitamos una mesa de trabajo. Como puedes ver he creado una mesa de trabajo de MacBook Pro, y voy a cambiar su nombre por colores. Agradable. Entonces sigamos adelante e insertemos un rectángulo como este. Voy a aumentar el radio de esquina para hacerlo más redondo, acercar para hacerlo más pequeño, el ancho va a ser cinco y la altura va a ser 64 por ahora. Voy a cambiar el color a 41, 35, y F3. Bastante bonito. Entonces déjame moverlo un poco al lado izquierdo. Aquí, voy a insertar un texto, y vamos a escribir colores. Voy a usar SF Pro Rounded. Bastante bonito. Aumentemos su tamaño a 24 puntos como este y va a ser regular. No obstante, voy a cambiar el código de color a 4A, 4A, y 4A. Déjame alinearlo verticalmente y lo voy a hacer un poco más pequeño. voy a agruparlo. Fantástico. Ahora, necesitamos crear nuestras secciones porque en colores tenemos diferentes secciones. Por ejemplo, tenemos colores primarios, tenemos colores de acento, y tenemos colores semánticos. Por supuesto, también puedes tener colores de fondo. No obstante, en este tutorial, vamos a crear colores primarios, acentos y semánticos. Ahora, necesito una línea como esta. Voy a sostener Shift y voy a cambiar el color a E4, E4, y E4, así, entonces necesito agregar un texto. Escribamos colores primarios. Voy a elegir el mismo color que usé para este texto. Vamos a copiar y pegar este código de color de texto. Fantástico. Voy a alinearlos a la izquierda y su relleno inferior va a ser de ocho píxeles. Agrupémoslos, y voy a llamarlo, Colores Primarios. Fantástico. Es bastante bonito. Entonces necesito crear aquí un cuadrado y hagámoslo redondeado. Fantástico. Entonces necesitamos cambiar el color a 41, 35, y F3. En realidad, este es el color que quiero usar en este tutorial. Puedes usar diferentes colores para tu sistema de diseño. Ten en cuenta que siempre puedes cambiarlos. Si no estás seguro de por qué y cómo elijo este color, solo depende de tu proyecto y toma algún tiempo entender cómo puedes crear tu paleta de colores correctamente. Pero ahora solo queremos enfocarnos en crear nuestro sistema de diseño. Te voy a mostrar cómo puedes hacerlo correctamente. No importan los colores. Su relleno superior va a ser de 16 píxeles. Voy a duplicar eso con un relleno izquierdo de 16 píxeles. Una vez más, duplicar eso. Una vez más. Tenemos cuatro plazas diferentes. Voy a seleccionar el segundo, y voy a disminuir su opacidad al 75 por ciento así. El tercero, lo voy a cambiar al 50 por ciento, y el último, vamos a ponerlo en 25 por ciento. El motivo por el que cambié la opacidad es porque a veces necesitamos tener diferentes estados de cada color. Por ejemplo, si estás creando un botón, puede tener diferentes estados, como activo, [inaudible] hover, etc. Por ejemplo, si estás usando este color para el estado activo, puedes usar otros colores, como este para el estado de flotación. Es bastante necesario tener diferentes versiones de tu color. Ahora, vamos a seleccionar el primer cuadrado. Voy a seguir adelante y dar clic en estos cuatro puntos, y luego dar clic en este botón más. Aquí voy a escribir Colores/Primario/Morado 100 por ciento y crear estilo. Fantástico. Después el siguiente, Colores Primario Morado 75 por ciento. Yo lo voy a copiar. Entonces el siguiente, va a ser del 50 por ciento y el último va a ser del 25 por ciento. Fantástico. Ahora, vamos a seleccionarlos todos. Agruparlos, y van a ser colores primarios. Mantenga pulsada la tecla Mayús y haga clic en este título de Colores primarios. Una vez más agruparlos y lo voy a nombrar, Primary Colors. Entonces necesito duplicarlo así. Cambiemos este nombre a Colores de acento. Creo que es una buena idea disminuir un poco el tamaño de la fuente. Por ejemplo, pongámoslo en 20. Este también. Ahora, es mejor. Ahora, vamos a seleccionar el primero. En primer lugar, tenemos que desprenderlo de su estilo, y lo mismo para los demás. Ahora, vamos a seleccionar el primero y luego cambiar el código de color a BE52F y 2. Bastante bien. Vamos a copiar esto y voy a pegarlo para los demás. Fantástico. Ahora, necesitamos crear el estilo de color para estas esquinas también. Repitamos el procedimiento. Aquí necesitamos escribir Colores, barra de acento, así es, Morado 1. Este también. Colores, Acento, Morado 2. Vamos a copiar esto. Aquí va a ser Morado 3. El último debe ser Morado 4. Puedes nombrarlos como quieras, sin embargo, mantenerlo lo más organizado posible. Entonces voy a renombrar este grupo a Accent Colors. Fantástico, y también éste. Una vez más duplicarlos. Aquí va a ser Colores Semánticos. En primer lugar, tenemos que desprenderlo de su estilo. No necesitamos esta última porque vamos a tener sólo tres versiones diferentes. Seleccionemos el primero. Voy a cambiar el código de color a FFCF y 5C. Voy a copiar esto y vamos a pegarlo por los demás. Está bien. Ahora, sigamos adelante y creemos nuestros signos de color. Escribamos Colores, Semánticos, y escribamos uno Naranja. Voy a copiar esto. El siguiente va a ser Orange 2, y el último, Orange 3. Genial. Necesitamos un color semántico más, así que los voy a duplicar así. De nuevo, tenemos que desprenderlos de su estilo así. Seleccionemos el primero. Voy a establecer el código de color en 00, 84, y F4. Copiémoslo y peguémoslo para los demás. Fantástico. Ahora, el último paso es crear nuestro signo de colores. Escribamos Colores, Semánticos, Azul 1, y luego Azul 2, y finalmente, azul 3. Ya casi terminamos. No obstante, te voy a mostrar algo y necesitamos personalizar un poco nuestros signos de color. Ahora, que hemos creado estos estilos de colores con diferente cantidad de opacidad, tendremos algunos problemas si decidimos usar estos colores encima de un fondo colorido. Ahora, que los estamos usando sobre un fondo blanco, no podemos entender la diferencia. No obstante, les voy a mostrar algo. Vamos a crear un rectángulo aquí. Voy a moverlo abajo justo por debajo de nuestro último grupo. Si lo muevo, se puede ver que en realidad, nuestros colores están cambiando porque cambiamos su opacidad. Pero necesitamos hacer un paso más, por supuesto, para los primeros colores, nada cambia porque la opacidad de esta primera capa es del 100 por ciento. ¿ Cómo podemos arreglar esto? El mejor modo es elegir cada uno. Por ejemplo, este, luego ve a Estilo de color, luego Editar estilo, y elige el cuentagotas y haz clic en este color, y ya está hecho. Hagamos lo mismo por todos ellos. Ahí vamos. Es una gran técnica para crear tus estilos de color porque a veces no tienes todo el código de colores. En este caso, podemos usar esta técnica, y luego puedes cambiar los colores. Yo voy a hacer lo mismo por todos ellos. Está bien. Ya está hecho. Ahora, si creo el mismo rectángulo una vez más, así, y lo voy a poner justo debajo de nuestro primer grupo, se puede ver que nuestros colores no están cambiando. A partir de ahora, aunque uses un fondo colorido en tu diseño, tus colores se mantienen intactos. Muy bien, chicos, eso es todo por este video. Espero que lo hayas disfrutado y te veo en el siguiente video. Nos vemos entonces. 72. Colores y degradados: Hola a todos. Bienvenido de nuevo a otro video de este curso. En este video, vamos a seguir creando nuestra guía de estilo o digamos nuestro sistema de diseño juntos. En este video, necesitamos agregar dos secciones más a nuestro sistema de diseño que son colores de fondo gris y colores degradados. Para ello, primero necesitamos aumentar el tamaño de altura de nuestra mesa de trabajo así. Voy a copiar y pegar una de estas secciones. Bastante bonito. Llamémoslo colores de fondo gris. Agradable. No necesito esta línea azul. Ahora déjame desprenderlos de su estilo así. Bastante bonito. Voy a duplicar el último porque necesito un color más. Fantástico. Ahora vamos a seleccionar el primero y voy a cambiar el código de color a 28, 37, y 4B así. Déjame crear el estilo de color. Voy a escribir colores grises 1. Para el segundo, voy a copiar este código de color. Vamos a pegarlo aquí. Voy a disminuir la opacidad al 75 por ciento. Después de eso, elijamos el cuentagotas y pinchemos sobre este color. Para obtener el mismo color con 100 por ciento de opacidad. Entonces vamos a crear los colores de estilo de color gris 2. Voy a copiar esto y necesitamos copiar el código de color una vez más. Paguémoslo aquí con 50 por ciento de opacidad. El último con 25 por ciento de opacidad como esta y déjame cambiarlos. El último una vez más al cuentagotas y selecciona el mismo color. Fantástico. Ahora vamos a crear el tercer color estilo colores gris 3. Vamos a copiar esto. El último, colores grises y cuatro fantásticos. Ahora voy a renombrar el grupo a colores de fondo gris. Déjame copiar esto y pegarlo también para otros grupos, así. Bastante bien. Una vez más, duplicarlo. Ahora, voy a renombrarlo a colores degradados. Quitemos los dos últimos colores porque aquí sólo necesito dos colores. Voy a seleccionar el primero, desconectarlo del estilo, el segundo también. Para la primera, voy a cambiar el color de sólido a lineal. Seleccionemos el primer color. Voy a cambiar el código de color a 41, 35, y F3. El segundo, aumentemos la opacidad al 100 por ciento. Voy a cambiarlo a 71, 68, y F6. Entonces voy a cambiar la dirección para conseguir algo como esto. Bastante bien. Entonces vamos a crear nuestro estilo de color. Voy a escribir colores, gradiente 1. Para el segundo, vamos a cambiarlo a lineal también. El primer color va a ser BE52 y F2 y el segundo color necesitamos aumentar la opacidad al 100 por ciento. Voy a cambiar el código de color a DB85 y F5, así. Permítanme cambiar la dirección. Fantástico. Necesitamos crear nuestro color style colores gradiente 2. último, pero no menos importante, vamos a cambiar el nombre de nuestro grupo a colores degradados. Para otros grupos también. Fantástico. Chicos, ahora probemos nuestros gradientes. Voy a crear un rectángulo aquí y vamos a aplicar nuestros gradientes. Por ejemplo, éste. Es bastante fantástico. Podemos cambiarlo fácilmente. Además, podemos elegir el color de fondo. Bastante impresionante, ¿no? Chicos eso es todo para este video. Espero que lo hayas disfrutado y te veo en el siguiente video. 73. Borders y sombras: Hola a todos. Bienvenido de nuevo a otro video de este curso. En este video, vamos a añadir bordes y sombras a nuestra guía de estilo. Sin más preámbulos, empecemos. En primer lugar, necesitamos duplicar nuestro tablero de arte así, y voy a renombrarlo a fronteras, y vamos a cambiar este título a fronteras también. Fantástico. Voy a quitarlos todos excepto el primero como éste, luego déjame acercar. Bastante bien. Voy a cambiar estos títulos a fronteras. Ahora, separemos estos colores de su estilo uno por uno así. Entonces, necesito añadir un trazo porque para las fronteras necesitamos tener trazo. Hagamos clic en este ícono más así. Entonces voy a quitar el relleno, bastante bien. Déjame cambiar el código de color a BE52 y F2 así y el segundo también, déjame quitar el relleno, agregar trazo, y voy a cambiar el código de color a DBA5 y F5. El siguiente, vas a hacer lo mismo. El código de color va a ser EEDFF y dos. No necesitamos el último, vamos a mantenerlo simple para que estos tres sean suficientes. Ahora es el momento de crear el estilo de frontera. Seleccionemos el primero, y voy a dar click en estos cuatro puntos. Al igual que crear estilos de colores, aquí voy a escribir Colores/Bordera/1. Copiemos esto. El siguiente va a ser Colors/Border/2, y el último va a ser Colors/Border/3 así. Vamos a crear una nueva forma. Bastante bien. Voy a aplicar el estilo de las fronteras a esto. Puedo agregar trazo y a partir de estilos de color, puedo elegir el color de borde como este. Quitemos el relleno. Fantástico. Puedo cambiarlo fácilmente a la segunda, y a la tercera. Tenemos que añadir sombras a nuestra guía de estilo. Creo que es una buena idea agregarlos aquí en estos tableros de arte. Voy a seguir adelante y cambiar este título por fronteras y sombras. Cambiemos también el nombre de tablero de arte, fronteras y sombras. Fantástico. Entonces, necesitamos cambiar el nombre de este grupo a fronteras, estos grupos también. Déjame duplicarlo, y vamos a escribir sombras. Vas a tener cuatro tipos diferentes de sombras. Voy a duplicar el último así. Fantástico. Seleccionemos el primero, necesitamos desprenderlos de su estilo. Bastante bien. Seleccionemos el primero y Aquí voy a añadir efectos. Bastante bien. En lugar de trazo, le agreguemos un color sólido. Voy a quitar el trazo y usar relleno. Vamos a la configuración avanzada aquí, y voy a cambiar la cantidad de desenfoque a 10 y la cantidad X a uno e Y a cinco. Cambiemos la opacidad al 20 por ciento también. Después de eso, podemos crear un estilo de efecto. Al igual que los estilos de color, puedes hacer clic en este icono más aquí, y aquí vamos a escribir Sombras/1 y el segundo también. Vamos a agregarle relleno y también un efecto, y luego voy a modificar el ajuste. Vamos a establecer la cantidad de desenfoque en 20 y la cantidad X en cinco y la cantidad Y en 10 así. Por supuesto, disminuyamos la opacidad al 20 por ciento. Una vez más, necesitamos crear nuestro estilo de efectos. Voy a escribir Sombras/2. El siguiente, el mismo proceso. Voy a añadir efectos a esto. El monto borrón va a ser de 20, la X va a ser de dos, y la Y va a ser de 10. Disminuya la opacidad al 10 por ciento, y voy a crear un nuevo estilo de efecto. Escribamos Sombras/3. El último, una vez más añadir relleno a estos y también un efecto. Voy a establecer la cantidad de desenfoque a 14, la X a uno, y la Y a cinco. Voy a fijar la opacidad al 10 por ciento. Fantástico. Vamos a crear nuestros efectos estilo Sombras/4. Bastante impresionante. Entonces, vamos a renombrar los grupos a sombras para todos los grupos, recordemos eso, para mantener nuestras capas lo más organizadas posible. Te voy a mostrar cómo puedes usar esto. Vamos a seguir adelante y crear una forma, por ejemplo, un cuadrado, y luego voy a cambiar el color a algo así. Si hago clic en estos cuatro puntos en la sección de efectos, se puede ver que tengo cuatro sombras diferentes. Puedo dar click en una, y ahí vamos. Puedo cambiarlo fácilmente por lo que quiera. Es bastante guay; ¿no? Muy bien chicos, eso es todo por este video. Espero que lo hayas disfrutado, y te veo en el siguiente video. 74. Introducción al estilo de tipografía: Hola. En este video vamos a estar hablando del estilo de texto, igual que lo que hicimos con nuestros colores, ahora vamos a estar haciendo con nuestra tipografía, por lo que en esta sección, vamos a estar creando nuestro propio textil y necesitamos establecer diferentes tamaños, diferentes pesos, y también diferentes colores a nuestro estilo tipográfico con el fin de usarlo en nuestro proyecto. Te veo en el siguiente video. 75. Guía de tipografía - parte 1: Hola a todos, y bienvenidos de nuevo a otro video de este curso. En este video, vamos a añadir el estilo tipográfico a nuestra guía de estilo. Sin más preámbulos, empecemos con duplicar esta mesa de trabajo, y la voy a llamar Tipografía. Entonces déjame acercar un poco y cambiemos este título a Tipografía también. Fantástico. Después de eso voy a quitar estas sombras y estas fronteras también. Cambiemos el título a H1, entonces voy a aumentar el ancho esta línea a 1,120, así. Después de eso, voy a duplicar este texto así. Bastante bien. Cambiemos el tamaño de fuente a 34 puntos y voy a ponerlo en negrita. Fantástico. Asegúrate de que esté alineado al lado izquierdo así. Voy a cambiar el texto a Texto de muestra. Bastante impresionante. Entonces necesitamos duplicarlo. Voy a trasladarlo al centro de esta mesa de trabajo. Alinémoslo al centro. Una vez más, duplicarlo. Fantástico. No obstante, ahora seleccionemos este medio. Tenemos que alinearlo al centro. El último que necesitamos para alinearlo con el lado derecho, y ahora es el momento de crear nuestro estilo de texto. Seleccionemos el primero y pinchemos en estos cuatro puntos. Demos click en este ícono. Aquí voy a escribir H1/Izquierda. Fantástico. El segundo va a ser H2/Centro, y el último va a ser H1/Derecha. Fantástico. Ahora, cambiemos el nombre de este grupo a H1, y éste también. Permítanme renombrar este grupo también a tipografía. Ahora, duplicemos este grupo H1 así, y voy a renombrar el título H1 a H2. Ahora, separemos estos textos de su estilo así, éste también, y éste también. Ahora, es hora de seleccionarlos todos. Voy a cambiar el tamaño de fuente a 26 puntos. Fantástico. Entonces necesitamos crear nuestro estilo de texto. Como pueden ver, cometí un error con éste, escribí H2. Adelante y cambiémoslo porque necesitamos escribir H1 para esto. Ahora, vamos a seleccionar este y voy a crear un nuevo estilo de texto. Escribamos H2/Izquierda. Voy a copiar eso. Este va a ser H2/Centro y el último va a ser H2/Derecha. Fantástico. Ahora, vamos a renombrar nuestro grupo a H2 también, entonces necesitamos duplicar eso así. Cambiemos el título a H3. Voy a desprender estos textos de su estilo uno por uno. Ahora, vamos a seleccionarlos todos y voy a cambiar el tamaño de fuente a 16 puntos. Fantástico. No obstante, ahora no voy a crear los estilos de texto porque te voy a ahorrar tiempo. Lo haré yo mismo y podrás descargar la guía final de estilo de la conferencia de recursos de la sección. Vamos a renombrar este grupo H3, y una vez más duplicarlo. Va a ser H4. Seleccionemos todos estos textos y cambiemos el tamaño de fuente a 12 puntos. Fantástico, y eso es todo por este video. En el siguiente video, agregaremos nuestro texto corporal aquí juntos. Nos vemos entonces. 76. Guía de tipografía - parte 2: Hola a todos y bienvenidos de nuevo a otro video de este curso. En este video, vamos a agregar nuestro texto corporal a nuestro estilo tipográfico. Sin más preámbulos, empecemos duplicando el último grupo, lo voy a poner aquí, y vamos a escribir cuerpo 1, bastante bueno. Voy a seleccionar todos esos textos y vamos cambiar el tamaño de la fuente a 14 puntos, fantástico. Ahora, vamos a seleccionar el primero, y voy a crear un estilo de texto. Escribamos cuerpo 1 izquierda, y el siguiente va a ser cuerpo 1 centro, y el último va a ser cuerpo 1 derecho, bastante bueno. Ahora renombremos el nombre de nuestros grupos. Va a ser el cuerpo 1, éste también. Entonces vamos a duplicarlo y vamos a cambiar el título por el cuerpo 2. Tenemos que desprender estas capas de texto de su estilo. Ahora vamos a seleccionarlos todos y voy a cambiar el tamaño de la fuente a 13 puntos. No obstante, no voy a crear los estilos de texto porque voy a hacer eso por ti y puedes descargar la guía final de estilo de la conferencia de recursos de esta sección. Una vez más, cambiemos el nombre de estos grupos: cuerpo 2, cuerpo 2 también. Voy a duplicarlo por última vez. Vamos a renombrarlo a cuerpo 3 y voy a seleccionar todos estos textos. Cambiemos el tamaño de fuente a 11 puntos. Muy bien chicos, creamos con éxito nuestra guía de estilo topográfico juntos así que ahora sigamos adelante y comprobarlo. Voy a crear un texto. Escribamos título. De los estilos de texto, puedo elegir lo que quiera. Por ahora, sólo tenemos tres opciones porque no creamos los estilos de texto para todos esos textos. No obstante, si descargas la guía de estilo final, tienes acceso a todos esos estilos de texto. Por ahora, elijamos H1 a la izquierda, y ahí vamos. Si solo trato de editar este H1 a la izquierda, así que sigamos adelante y modifiquemos esto, por ejemplo, de negrita a regular, se puede ver que mi título también cambió. Muy bien chicos, eso es todo por este video. Espero que lo hayas disfrutado y te veo en el siguiente video. 77. Diseñar una aplicación moderna de financiación: Hola, todos y bienvenidos de nuevo a otra sección de este curso. En esta sección, vamos a diseñar una aplicación móvil completa llamada Money. Se trata de una app de finanzas y vamos a diseñar 24 pantallas diferentes juntas paso a paso. Vamos a diseñar todas las pantallas necesarias que esta aplicación necesita. Empezamos con diseñar la pantalla de lanzamiento, luego diseñaremos una página de bienvenida. Además, tenemos dos páginas de firma diferentes, luego diseñaremos tres páginas de registro diferentes. Como se puede ver, con diferentes estados. Después de eso, vamos a diseñar nuestra página de verificación OTP y como puedes ver, tenemos tres pantallas diferentes para estas. La primera pantalla es para obtener el número del usuario, la segunda pantalla es para cuando el usuario está ingresando el código, y la última pantalla es cuando el botón está activo. Después de eso, diseñaremos el formulario de perfil. Como puedes ver aquí, tenemos dos pantallas diferentes: perfil y perfil completado. Después comenzaremos a diseñar nuestra página de inicio junto con estas tarjetas y todos estos componentes. Después diseñaremos nuestro menú de hamburguesas, y luego diseñaremos nuestra página de tarjetas. Tendremos dos tarjetas diferentes: la de primaria y la de secundaria. Aquí tenemos las transacciones. Después de eso, tenemos la página de transacciones y también el detalle de las transacciones. Básicamente, cuando el usuario haga clic en estas tarjetas, se deslizará hacia fuera y veremos esta pantalla con todos estos detalles. Después de eso, diseñaremos la pantalla de transferencia con estos numpad y todos estos elementos. Entonces tenemos la página de confirmación aquí. Después de eso, iremos por diseñar nuestra página de notificación con datos reales. Entonces diseñaremos la página del perfil aquí. último, pero no menos importante, diseñaremos tres páginas de incorporación diferentes juntas. Para empezar a diseñar este proyecto, primero, es necesario descargar el archivo de activos que ya preparé para ti desde la sección de recursos de la conferencia de activos. Muy bien, chicos. Eso es todo por este video. Te veo en el siguiente video. 78. Pantalla de lanzamiento: Hola a todos y bienvenidos de nuevo a otro video de este curso. En este video, vamos a empezar a diseñar nuestra aplicación de finanzas, que se llama Dinero. Es interesante, ¿no? Entonces, sin más preámbulos, empecemos insertando un nuevo tablero de arte a nuestro lienzo. Entonces voy a presionar A en mi teclado y desde la sección Teléfono, voy a elegir iPhone 11 Pro o X. Entonces déjame renombrarlo a Pantalla de lanzamiento porque esta es nuestra primera página. Después de eso, simplemente vamos a colocar el logotipo de esta aplicación que ya preparé para ustedes. Entonces si ya has descargado el archivo de activos de la conferencia de activos, puedes ver que tienes cuatro carpetas diferentes: logo, ilustraciones, iconos, y la interfaz de usuario de Apple iOS. Si estás familiarizado con el Sketch, es probable que sepas que tienes acceso al Apple iOS UI Kit con el fin de utilizar todos los elementos que Apple utiliza bajo el sistema operativo. No obstante, desafortunadamente, no hay un Kit de interfaz de usuario de Apple iOS actualizado para Figma. Pero no hay nada de qué preocuparse porque ya preparé para ustedes todas las cosas necesarias que puedan necesitar durante este curso. Entonces como pueden ver, tenemos barras, indicador de inicio, y la barra de estado, y eso es todo lo que necesitamos. Pero para este video, necesitamos abrir la carpeta de logotipos. Aquí puedes ver que tenemos tres archivos diferentes. Contamos con Logotipo Colorful-Blanco , y Logotipo Mastercard. Ahora, voy a elegir Colorful-Logo y vamos arrastrarlo y dejarlo caer en mi tablero de arte así. Bastante bonito, ¿no? Entonces lo único que tenemos que hacer es alinearlo tanto horizontal como verticalmente al centro así. Eso es todo por nuestra Pantalla de Lanzamiento. Fue tan sencillo, ¿no? Muy bien, chicos, muchas gracias por ver este video. Espero que lo hayas disfrutado y te veo en el siguiente video. 79. Inicio y página de bienvenida: Hola a todos y bienvenidos de nuevo a otro video de esta sección. En este video, vamos a diseñar nuestras páginas de inicio de sesión y también nuestra página de bienvenida juntos. Sin más preámbulos, empecemos duplicando esta mesa de trabajo, así que voy a presionar “Comando D” o “Control D”. Entonces quitemos este logo, no necesitamos eso. Después de eso, voy a seguir adelante y renombrar mi mesa de trabajo. Escribamos inicio de sesión. Fantástico. En realidad, en la página de Inicio de sesión, vamos a poner el logotipo en la parte superior y también necesitamos tener un texto que diga “Bienvenido de nuevo”. Después tenemos el título de inicio de sesión, algunos campos de texto, y después de eso, el botón de inicio de sesión justo en la parte inferior. En primer lugar, empecemos con insertar un círculo, así que voy a mantener “Shift” y arrastrar y soltar, y voy a establecer el ancho y la altura en 352. Entonces le voy a añadir un gradiente lineal así. Seleccionemos el primer color y voy a establecer el código de color en 5264F9, así. Seleccionemos el segundo, y éste va a ser 3AF9EF, así. No obstante, recuerda aumentar la opacidad así, al 100 por ciento. Después de eso, voy a cambiar la dirección, así que voy a seleccionar el primer color en la parte superior. Cambiemos la dirección por estos controladores de mango así. Fantástico. Ahora, voy a mover un poco este círculo para encontrar un buen lugar para eso. No obstante, debido a que ya calculé la ubicación, puedo ajustar fácilmente la X e Y aquí. Vamos a poner la X a menos 74, así, y la Y a menos 84. Bastante bien. Está bien. Ahora, necesitamos duplicar este círculo así. Voy a moverlo un poco, y pongamos esta capa justo debajo de nuestro primer círculo. Entonces necesitamos cambiar el gradiente, así que voy a seleccionar el primer color. Vamos a establecer el código de color en 2F56F8, así. Seleccionemos el segundo color. Este va a ser C630F8, así. No obstante, esta vez voy a disminuir la opacidad a cero, así. Creo que es una buena idea cambiar el lugar de nuestros colores así. Fantástico. Cambiemos un poco la dirección. Bastante bien. Entonces vamos a duplicarlo una vez más, y tenemos que moverlo hacia abajo justo debajo de nuestro segundo círculo. Vamos a moverlo al lado derecho. Una vez más, necesitamos cambiar nuestros colores, así que vamos a seleccionar el primer color, y voy a cambiar el código a C72FF8. Ahora, voy a cambiar la dirección. Una vez más, cambiemos el lugar de nuestros colores. Fantástico. Ahora, sigamos adelante y establecemos la X e Y para cada círculo. Voy a seleccionar la segunda, y vamos a poner la X a menos 43 y la Y a menos 56. Genial. El tercer círculo, pongamos la X a menos 12 y la Y a menos 106, así. Bastante bien. ¿No es así? No obstante, ahora voy a seguir adelante y seleccionar el primer círculo. Cambiemos un poco la dirección para que sea un poco más ligera. Creo que ahora es perfecto,. Ahora, es hora de agregar nuestro logotipo a este encabezado. Adelante y abramos el archivo de Activos que ha descargado de la conferencia de activos de esta sección. Voy a colocar una imagen. Aquí tenemos cuatro carpetas. De la carpeta Logo, voy a seguir adelante e importar logo-blanco y solo haga clic una vez aquí. Como puedes ver, este es un logotipo de SVG, por lo que si decides ampliarlo así, puedes ver que cambiará. En primer lugar, es necesario seleccionar la herramienta Escala, así. También puedes presionar “K” en tu teclado para seleccionar eso. Después de eso, si mantengo “Shift” en mi teclado e intento escalarlo, puedes ver que nada cambia excepto la dimensión y el tamaño. El tamaño es perfecto, es 60 por 59. Voy a mantenerlo así. Déjame acercar un poco. El relleno superior va a ser de 64 píxeles. Si quieres ver los rembings, puedes mantener fácilmente pulsada la tecla Opción o la tecla Alt en tu teclado. Ahí vamos, tienes todos los remanes. Como puedes ver, el relleno superior de este logo es de 80, así que voy a hacerlo 64, así, y el relleno izquierdo va a ser 52. Bastante bien. Después de eso, voy a insertar un texto. Presionemos “T” y pinchemos aquí, y voy a cambiar la fuente a Montserrat así. Escribamos, “Bienvenido de nuevo” así, y voy a cambiar el tamaño de la fuente a 28 puntos. Bastante bien. Cambiemos el color a blanco también y asegurémonos de que esta capa de texto esté alineada con tu logo. Obviamente, su relleno izquierdo va a ser de 52 pixeles, como nuestro logo. El relleno superior va a ser de 16 píxeles. Bastante bien. Está bien, terminamos con el encabezado. Ahora vamos a seleccionar todas nuestras formas, estos tres círculos. Voy a agruparlos y llamémoslo Formas, fantásticas, para mantener nuestras capas organizadas. Ahora es el momento de añadir nuestro título. Entonces insertemos aquí un nuevo texto. Voy a escribir inicio de sesión con la misma fuente. No obstante, esta vez voy a cambiar la forma de negrita y el tamaño de la fuente va a ser de 28 puntos y también necesitamos cambiar el color. Como puedes ver, es negro. Se puede, por supuesto, usarlo. No obstante, se recomienda usar algo más ligero cuando se quiere usar negro contra el fondo blanco, es mejor no usar un negro puro. Voy a cambiar el código de color a 3A3A3A. Como puedes ver, nos pondremos gris oscuro. Fantástico. Entonces voy a revisar el relleno, el relleno izquierdo va a ser de 30 píxeles, así que vamos a comprobarlo. Bastante bien. El relleno superior a este grupo va a ser de 39 píxeles. Bastante impresionante. Está bien. Ahora es el momento de crear nuestros campos de texto. Entonces para crear un campo de texto, necesitamos una línea, así que voy a seleccionar una línea de estos objetos. Mantenga pulsado “Shift” y arrastre y suelte. Bastante bien. Cambiemos el ancho a 315 así. Entonces lo voy a alinear al centro. Como puedes ver, obtendremos un relleno de 30 píxeles izquierdo y derecho, que es lo que queríamos. Entonces voy a cambiar el color a 2743FD, fantástico. Voy a mantener el grosor a uno. Déjame bajarlo un poco. Entonces necesitamos dos capas de texto. Entonces la primera va a ser dirección de correo electrónico y vamos a cambiar la fuente a texto SF Pro así y además el peso va a ser regular y el tamaño de la fuente debe ser de 14 puntos como este. Voy a cambiar el relleno a B9B9B9, fantástico, para ver este gris claro. Déjame acercar. Yo lo voy a alinear con mi línea y su relleno izquierdo va a ser de 30 píxeles también. Entonces vamos a duplicarlo. Voy a moverlo hacia abajo. Aquí vamos a escribir nuestro correo electrónico. Entonces voy a escribir design@test.com. Cambiemos el color a 3A3A3A, que es el mismo color que usamos para firmar en título. Muy bien, su relleno inferior va a ser de ocho píxeles, como se puede ver, y el encabezamiento superior va a ser de 16 píxeles como este. Entonces ahora todo es perfecto. Entonces lo siguiente que necesitamos agregar es un icono de tick. Entonces sigamos adelante e insertemos otra imagen de nuestro archivo de activos y de iconos. Aquí tenemos un montón de iconos. Voy a elegir tick, y vamos a dar click aquí. Ahí vamos. Ahora agrupemos todos nuestros elementos juntos. Después de eso, selecciona este icono de tick, y alinémoslo. Déjame acercar, su relleno inferior va a ser de 17 píxeles. Como pueden ver, no podemos conseguir el relleno correcto aquí porque estamos usando un grupo aquí. Entonces si estuvieras usando un marco en lugar de un grupo, podríamos conseguir fácilmente el relleno correcto. Ahora mismo el único relleno correcto que obtenemos es hasta el borde de esta pantalla. No obstante, necesitamos obtener el relleno correcto hasta el final de esta línea. Para que eso suceda, seleccionemos a nuestro grupo. Voy a renombrarlo a dirección de correo electrónico. Después de eso, vamos a hacer clic derecho en eso y puedes elegir Selección de marco. Entonces tendrás un marco. Voy a seguir adelante y copiar este nombre, vamos a pegarlo aquí para este marco y si elijo estos ícono de tic, ahora, si sostengo la tecla de opción mi teclado, puedo ver el relleno correcto porque estoy evaluando los paddings contra estos marco, que es lo que queríamos. Establezcamos el relleno correcto en 16 píxeles como este, y todo está hecho. Creamos con éxito nuestro primer campo de texto. No obstante, necesitamos uno más, así que sigamos adelante y duplicarlo y lo vamos a poner abajo y el relleno superior va a ser de 24 píxeles como este, entonces cambiemos el título a Password bastante bien y vamos a renombrar nuestro grupo y nuestro marco también. Vamos a cambiarlo a Contraseña y un nombre de marco también, fantástico. Entonces necesitamos cambiar estos textos porque para contraseña, necesitamos tener dos estados diferentes, el oculto y la contraseña y la contraseña visible. Para crear la contraseña oculta, podrías mantener la tecla Option o Alt en tu teclado y presionar 8, así. Como se puede ver, está oculto para la seguridad. Esto es lo que llamamos experiencia de usuario porque tú como diseñador de la UIX, necesitas prestar atención a todos los detalles. Entonces necesitamos cambiar este icono a un ícono de ojo, para dejar que el usuario haga visible u oculta esta contraseña. Yo voy a quitar eso. Colocemos otra imagen de nuestro archivo de activos y aquí tenemos me gusta esto, voy a insertar aquí y vamos a moverla justo dentro de nuestro campo de texto de contraseña. Va a tener un relleno de fondo de 16 píxeles y un relleno derecho de 16 píxeles. ¿ Qué más necesitamos para la página de inicio de sesión? Por supuesto, necesitamos el enlace de contraseña olvidada. Vamos a crearlo. Necesito un texto y escribamos, olvidé la contraseña, un signo de interrogación, y luego voy a cambiar el color a 2B47FC así y vamos a hacerlo más grande, así que voy a establecer el tamaño de fuente en 16 puntos. Vamos a alinearlo, es relleno izquierdo va a ser de 30 píxeles y su encabezado superior va a ser de 24 píxeles, así. último, pero no menos importante, necesitamos crear nuestro botón de inicio de sesión. Adelante e insertemos aquí un rectángulo. Voy a arrastrar y soltar, voy a establecer el ancho a 315 y la altura a 72 así, entonces vamos a aumentar el radio de esquina a 28. No obstante, necesito hacerlas suaves. Voy a dar click en este ícono, esquinas independientes y estos ícono así y como puedes ver aquí, tengo un slider, puedo aumentarlo al 60 por ciento con el fin de conseguir un iOS como botón redondeado. Entonces cambiemos el color a un gradiente como este. Voy a seleccionar el primer color y vamos a cambiarlo a 49, 60, y F9 y vamos a seleccionar el segundo color, aumentar la opacidad al 100 por ciento y cambiarlo a 1433 y doble F. Entonces voy a cambiar un poco la dirección como esto están bien, entonces necesitamos un texto, así que vamos a escribir inicio de sesión. Voy a cambiar la fuente a un conjunto y un tamaño de fuente a 20 puntos, el peso va a ser regular, sin embargo, cambiemos el campo a blanco así. Después de eso, necesitamos seleccionar tanto nuestro rectángulo como nuestras etiquetas de signo con el fin de alinearlas, así que voy a hacer clic en alinear verticalmente. Entonces revisemos los remos. Voy a acercarme un poco, los remeros superior, izquierdo e inferior van a ser de 24 píxeles como este. Entonces, ¿qué necesitamos? Necesitamos una flecha derecha para colocarlo aquí con el fin de indicar que al hacer clic en este ícono, serás redirigido a otra página. Sigamos adelante y coloquemos una imagen y de los íconos, puedes elegir flecha blanca y colocarla aquí. Ahí vamos y voy a seleccionar el rectángulo y este ícono juntos y hacer clic en alinear verticalmente y es el relleno correcto va a ser de 24 píxeles como este. Ahora hemos creado nuestro botón de inicio de sesión, sin embargo, voy a agregarle más detalles para que sea único. Vamos a seguir adelante y crear un círculo como este y luego voy a seguir adelante y dar clic en este tercer círculo así, luego haga clic derecho aquí. Desde este menú, copiar pegar, hacer clic y copiar propiedades como esta, y seleccionar estos pequeño círculo, hacer clic derecho sobre eso y desde copiar y pegar, hacer clic y pegar propiedades para que podamos obtener el mismo gradiente que usamos para nuestro encabezado, entonces lo voy a mover hacia abajo. Pongámoslo bajo nuestra flecha así y después de eso necesitamos crear una máscara, sin embargo, antes de hacer eso, necesitamos duplicar nuestro rectángulo porque vamos a añadir una sombra de gota después de enmascarar. A diferencia del boceto, si quieres tener una sombra de gota mientras usas una máscara, no va a funcionar fácilmente, por lo que la mejor manera de obtener ese resultado es duplicarlo. Este es el Rectángulo 2, lo voy a poner abajo, ocultarlo por ahora y luego seleccionar este círculo y este rectángulo y hacer clic y enmascarar así y después eso puedes hacer visible tu capa duplicada así y puedes mover fácilmente el círculo alrededor. Voy a rotarlo un poco para conseguir algo así, pongámoslo aquí y creo que es buena idea hacerlo más grande. Voy a ajustar el ancho y la altura a 144 por 144 para conseguir algo como esto. Vamos a duplicarlo, moverlo hacia el lado izquierdo, y luego voy a copiar y pegar la propiedad del círculo, este azul, así, a este pequeño círculo. Pongamos esta capa debajo de nuestro primer círculo y luego voy a girar un poco para obtener el mejor resultado posible. Creo que ahora es genial, es bastante bueno, ¿no? Lo último que tenemos que hacer es agregar una sombra de gota a nuestro botón. En primer lugar, recuerda elegir la capa duplicada, este rectángulo 2 y haz clic en añadir efectos como este. Voy a cambiar la configuración. En primer lugar, voy a cambiar el color. Vamos a ponerlo en 1B39 y doble F así. Entonces cambia la cantidad de desenfoque a 16 y un Y a ocho como este, y disminuye la opacidad al 20 por ciento, es bastante guay, ¿no? Ahora voy a seleccionar todos los elementos aquí, agruparlos y vamos a renombrarlo a botón de firma. Ahora como nuestro botón está seleccionado, alinémoslo al centro y como pueden ver, tenemos un relleno izquierdo y derecho de 30 píxeles y necesitamos obtener un relleno inferior de 64 píxeles como este. El único que queda por agregar a esta pantalla es un indicador de inicio. Si abres tu archivo de activos, como puedes ver, tienes una carpeta llamada Apple iOS UI, vamos a abrirla y aquí tienes diferentes carpetas, barras, indicador de inicio y teclados. Abramos indicador de inicio y aquí tienes dos variantes, el retrato oscuro y el retrato claro. En realidad la luz aquí no significa que sea blanca, significa que puedes usarla encima de un fondo claro, por lo que básicamente es negro. Voy a seguir adelante y abrirla y dar clic aquí, luego alinémoslo al centro así y es relleno inferior va a ser 0. Vamos a revisar nuestra página de inicio de sesión hacia fuera. Antes de poner fin a este video, necesitamos crear una página de bienvenida. Ahora voy a seguir adelante y mover este art-board al lado derecho y vamos a duplicarlo y llevar estos art-board duplicados al lado izquierdo así. Voy a renombrarlo para darle la bienvenida y por supuesto no necesitamos estos elementos, así que vamos a eliminarlos. No obstante, mantén el botón de inicio de sesión, y luego elijamos estos grupos de formas, cambiemos el ancho y la altura a 970, sin embargo ten en cuenta vincularlos primero así. Vamos a poner la x a menos 424 y la y a menos 409 y después de eso voy a rotarla un poco. Establezcamos la rotación en menos 28 grados para conseguir algo como esto, es bastante genial, ¿no? Entonces movámoslo un poco al lado izquierdo. Asegúrate de hacer estos pasos en orden porque si primero lo rotas, tu x e y se van a cambiar. En esta página de bienvenida, vamos a tener un botón más, el botón de inscripción. Voy a seguir adelante y mover estos botones hacia arriba, duplicarlo. Vamos a moverlo hacia abajo y su encabezamiento superior va a ser de 16 píxeles como este, entonces cambiemos estos textos para inscribirnos. Por supuesto, puedes hacerlo dinámico agregando diseño automático a esto si quieres, claro y luego voy a seguir adelante y seleccionar este rectángulo 2. Quitemos el relleno y le agreguemos un trazo y cambiemos el color del trazo a 27, 43 y FD así. Vamos a copiar este código de color porque voy a necesitar eso y quitar la sombra de gota, ya no necesitamos eso y también necesitamos quitar estos círculos así. Ahora seleccionemos nuestra flecha derecha y cambiemos el código de color al color que elegimos para nuestro trazo. Yo lo voy a pegar aquí y también voy a seguir adelante y cambiar el código de color de mis textos al mismo color como este. Vamos a revisar los remeros, el relleno inferior va a ser 64, así que voy a seleccionar ambos botones y moverlos hacia abajo un píxel como este y asegurarme de cambiar el nombre de su grupo. Voy a cambiarlo para apuntarme. Eso es todo por este video, espero que realmente lo hayan disfrutado, fue tan interesante. En el siguiente video, seguiremos diseñando juntas nuestras páginas de inicio de sesión. Nos vemos entonces. 80. Página de inscripción: Hola a todos, y bienvenidos de nuevo a otro video de este curso. En este video, vamos a seguir diseñando nuestras páginas de inicio de sesión y también nuestras páginas de registro juntas. Sin más preámbulos, sigamos adelante y duplicemos estas página de inicio de sesión. Voy a seleccionar este tablero de arte y vamos a duplicarlo. Después de eso, voy a seguir adelante y renombrar este tablero de arte para iniciar sesión dash password, porque en este tablero de arte, vamos a hacer visibles estas contraseñas. Vamos a acercar un poco. Fantástico. Voy a seleccionar estos textos capa y vamos a escribir UI2020. Bastante bien. Obviamente necesitamos cambiar este icono también. Adelante e insertemos nuevo icono de nuestro archivo de activos. Voy a ir a Icons, y aquí tenemos Ojo-Oculto, así que vamos a seleccionar eso y colocarlo aquí, y lo voy a reemplazar por nuestro ícono anterior así. Voy a quitar esto y vamos a poner este icono de Ojo dentro de nuestro campo de texto de contraseña. Fantástico. Eso es todo por este tablero de arte. Déjame alejarme un poco, y después de eso, vamos a crear nuestra página de registro. Va a ser casi lo mismo. De lo único que necesitamos cambiar es este título. Voy a seguir adelante y seleccionar la página de inicio de sesión, luego duplicarla y voy a renombrarla para registrarme. Bastante bien. Cambiemos este título para inscribirnos también. Recuerda cambiar tu botón también. Voy a seleccionar esta capa de textos y se va a inscribir. Fantástico. Ahí vamos. Acabamos de crear nuestra página de registro. Ahora duplicemos una vez más la página de registro, y esta vez vamos a crear otro estado de este campo de texto. Por ejemplo, vamos a diseñar un estado de error. déjame acercar un poco. En primer lugar, vamos a renombrar este tablero de arte para inscribirte a Wrong Email así. Entonces hagamos mal este correo por ejemplo, voy a eliminar this.com así. Como puedes ver, no es una dirección de correo electrónico completa, y luego necesitamos eliminar este ícono de tick también. Cuando es incorrecto, no tiene sentido tener este icono de tick, así que necesitamos quitarlo, y déjame mover un poco hacia arriba todo el campo de texto para tener más espacio para agregar el error en la parte inferior. Lo primero que tenemos que hacer es cambiar el color de este título a un color rojo. Quiero cambiar el código de color a FD2727, y déjame copiar este código de color porque voy a necesitar eso. Entonces seleccionemos esta línea horizontal y cambiemos el color al mismo rojo. Después de eso, voy a seguir adelante y duplicar esta capa de texto, moverla hacia abajo, como aquí, y vamos a escribir la dirección de correo electrónico está incompleta. Así. No obstante, voy a cambiar el tamaño de fuente a 13 puntos. Bastante bien, y cambiemos el color a este rojo también. Entonces voy a cambiar el peso de regular a ligero. Fantástico. Ahora es el momento de revisar nuestros remeros. Como puedes ver ahora, nuestro relleno superior está establecido en nueve píxeles. Voy a hacer ocho así. Entonces movamos este texto a nuestro grupo de direcciones de correo electrónico aquí. Bastante bien, y es relleno inferior va a ser de 24 píxeles como este. Seguro necesitamos mover un poco estos títulos de registro. Voy a moverlo hacia arriba para conseguir un relleno de fondo de 42 píxeles como este. Bastante bien. Ahora, todo se ve genial. Ahora necesitamos una página de registro más. Sigamos adelante y seleccionemos esta página de registro, ésta, y la voy a duplicar. Vamos a renombrarlo para registrarnos escribiendo, porque aquí vamos a presentar el teclado con el fin de mostrar al desarrollador cómo funciona este layout cuando presentamos una palabra clave. Porque obviamente, aquí vamos a mover algunos elementos. Voy a acercar. El primero que tenemos que hacer es seleccionar estos elementos y moverlos hacia arriba así, y luego sigamos adelante y coloquemos una imagen, y desde la carpeta de activos, Apple iOS UI, tienes palabras clave, y vamos a seleccionar eso, colocarlo aquí. Bastante bien, fantástico. Entonces voy a seguir adelante y seleccionar este campo de texto de dirección de correo electrónico y campo de texto de contraseña, agruparlos y moverlos hacia arriba hasta obtener un relleno superior de 24 píxeles como este. Todo está bien. No obstante, necesitamos agregar una cosa más, un marcador de entrada de texto. Debido a que el usuario está escribiendo en esta página, necesitamos agregar aquí un marcador de entrada de texto. Es tan fácil crear uno. Vamos a seguir adelante y crear una línea como esta. No obstante, esta vez una línea vertical, y voy a ajustar el ancho a 19, así, y voy a cambiar el color a este morado, como nuestro ícono de tic, fantástico. Es relleno inferior va a ser de ocho píxeles. Bastante bien. Ahora, movamos esta línea dentro de este grupo de contraseñas, que puedes medir correctamente todos los paddings. Como puedes ver ahora nuestro relleno izquierdo está establecido en cuatro, hagámoslo dos, y lo voy a mover un poco hacia abajo para conseguir un equilibrio visual. Bastante bien, y todo es genial. Chicos, hemos creado con éxito todas nuestras páginas de inicio de sesión y también nuestras páginas de registro juntas. Eso es todo por este video. Espero que lo hayan disfrutado. En el siguiente video, comenzaremos a diseñar nuestras páginas de verificación OTP. Nos vemos entonces. 81. Pantes de verificación de OTP: Hola a todos. Bienvenido de nuevo a otro video de esta sección. En este video, vamos a empezar a diseñar juntas nuestras páginas de verificación OTP. Sin más preámbulos, empecemos. Primero lo primero, necesitamos tener un nuevo tablero de arte. Voy a presionar A, y voy a elegir iPhone 11 Pro o X, así. Yo lo voy a mover aquí, justo debajo de mi pantalla grande con el fin de mantener organizado nuestro Lienzo. Entonces vamos a renombrar este tablero de arte a OTP. Va a ser nuestra primera pantalla porque en total, vamos a tener tres pantallas OTP diferentes, y vamos a crearlas paso a paso. Ahora bien, ¿qué necesitamos? Necesitamos un indicador de inicio para ponerlo justo en la parte inferior, para que podamos copiarlo y pegarlo fácilmente de nuestros tableros de arte anteriores. Voy a copiar esto y pegarlo aquí. Bastante bien. Necesitamos también la barra de estado. Voy a seguir adelante y colocar una imagen. Aquí, tengo barras, barra de estado, tengo versión oscura y clara, y la luz significa que puedes usarlo sobre un fondo claro. La barra de estado es oscura. Voy a seguir adelante y abrirla, colocarla aquí. Ahora, permítanme alinearlo al centro. También necesita pegarse al borde superior de esta pantalla, así. ¿ Qué más necesitamos? Necesitamos una ilustración que ya preparé para ustedes. Sigamos adelante y coloquemos otra imagen aquí. En la carpeta Activos, tienes una carpeta de ilustración, la voy a abrir. Aquí, tienes OTP. Abramos esto. Quiero mencionar que he descargado estas ilustraciones desde el sitio web de undraw.co, que es un sitio web muy genial al que se puede obtener acceso a increíbles ilustraciones libres de regalías. Si quieres usar otra ilustración, asegúrate de revisar este sitio web. Primero, alinémoslo al centro, luego voy a revisar el relleno superior. En realidad, van a ser 56 píxeles, así. Bastante bien. Entonces necesito una capa de texto. Escribamos, Verificación OTP, y cambiemos la fuente a Montserrat, así. Voy a usar la versión negrita, y también necesitamos cambiar el tamaño de fuente a 24 puntos. Bastante bien. El relleno superior va a ser de 60 píxeles, así. Entonces duplicemos esta capa de texto, muévala hacia abajo y cambiemos el camino a regular, y también cambiaré el tamaño de fuente a 16 puntos. Yo lo voy a alinear al centro. Aquí, escribamos : “Te enviaremos una contraseña de una sola vez a estos números de móvil”. Entonces voy a cambiar el tamaño de esta capa de texto para tener una capa de texto de tamaño fijo, así. Alinémoslo al centro. También voy a cambiar la altura de la línea. Lo que voy a hacer es escribir 16 veces 1.5, y luego PX, así. Es una gran fórmula. Si no sabes elegir la altura de tu línea, puedes usarla. Puedes escribir tu tamaño de fuente y multiplicarlo por 1.5. No obstante, recuerda en Figma, debes agregar una palabra clave PX al final. Bastante bien. Ahora, vamos a seleccionar estas dos capas de textos y vamos a cambiar el color del texto. Voy a ponerlos en 3A, 3A, y 3A, así. Bastante bien. Ahora, vamos a seleccionar esta capa de texto y duplicarla, moverla hacia abajo. Aquí, escribamos: “Introduce el número móvil”. Voy a cambiar la fuente a SF Pro Text, así, cambiar el camino a Regular, y también el tamaño de fuente a 14 puntos, así. Voy a alinearlo al centro, y también quiero cambiar el color a B9, B9, y B9. Bastante bien. Ahora, vamos a seleccionar esta capa de texto y comprobar los remantes. Como puedes ver, el relleno superior ahora es de 22 píxeles. No obstante, es mejor ajustarlo a 24 píxeles. Entonces revisemos el relleno de estos textos. Ahora, está configurado en 33 píxeles. No obstante, pongámoslo en 34 píxeles. Entonces aquí, necesitamos un campo de texto para ingresar el número móvil. Lo que voy a hacer es sólo seleccionar esta línea de campo de texto. Voy a copiar esto y pegarlo aquí, moverlo hacia abajo, bastante bien. Bajemos el ancho a 233, así. Alinearlo con el centro. Déjame moverlo hacia abajo y luego duplicar esta capa de texto, moverlo hacia abajo, cambiar el camino demasiado Bold. Asegúrate de que esté alineado al centro. Voy a cambiar el color a 3A, 3A, y 3A, así. Aquí, vamos a escribir un número aleatorio. Por ejemplo, podemos escribir +49 111 222 333. Bastante bien. El relleno inferior va a ser de ocho píxeles, así. Selecciona ambas capas, muévalas hacia arriba, y necesitamos obtener un relleno superior de 24 píxeles, así. Bastante bien. Ahora, puedes seleccionar estos tres elementos, agruparlos, y llamémoslo Número Móvil, bastante bueno. Lo último que necesitamos es un botón. Voy a seguir adelante y copiar y pegar el botón de inicio de sesión. Vamos a pegarlo aquí. Bastante bien. En primer lugar, voy a renombrarlo a, Get OTP Button. Entonces necesito quitar esta flecha derecha porque no necesitamos eso. Después de eso, voy a alinear esta capa de texto al centro. En primer lugar, seleccione esta capa de texto y, a continuación, seleccione el rectángulo , alinéelo al centro. Alinémoslo al centro en la sección de texto también. Voy a cambiarlo a, Get OTP. Bastante bien. También creo que es buena idea cambiar el lugar de estos círculos. Escojamos el azul, y lo voy a mover al lado izquierdo, así, y escogamos éste, el morado, y moverlo al fondo. Vamos a rotarlo un poco. Bastante bien. Voy a mover este azul un poco hacia abajo, y ahora creo que es genial. Déjame alejar un poco. Ahí vamos. ¿Se puede ver lo increíble y hermoso que es? El relleno inferior de este botón va a ser de 64 píxeles, así. Creo que es una buena idea aumentar el tamaño de fuente de nuestro número de móvil. Voy a seleccionar eso y vamos a cambiarlo a 18 puntos. Ahora, es más visible. Voy a alinearlo al centro, moverlo hacia arriba, y va a tener un relleno inferior de ocho píxeles. Ahora, es mucho mejor. Muy bien, chicos. Hemos creado con éxito nuestra primera pantalla. Ahora, sigamos adelante y creemos los otros dos. Duplicemos esta pantalla, bastante bien. Voy a cambiar este texto para Enter the OTP, enviar al +49 111 222 333. Voy a seleccionar este número telefónico, y voy a ponerlo en negrita, así. Está bastante bien. Entonces voy a quitar esta capa de texto y también este número de teléfono. Bastante bien. No obstante, voy a mantener esta línea. No obstante, vamos a cortarlo y pegarlo aquí porque ya no necesitamos ese grupo. Entonces voy a ajustar el ancho a 48, así. Bastante bien. Ahora, vamos a añadir una capa de texto y vamos a escribir un número aleatorio, por ejemplo, siete. Hagámoslo regular, así. También el tamaño de fuente va a ser de 24 puntos, así. Muévelo un poco hacia arriba para conseguir un relleno de fondo de ocho píxeles, bastante bueno. Entonces alinémoslo con nuestra línea, así. Agruparlos, y cambiémoslo a Campo de texto, luego duplicarlo, moverlo hacia el lado derecho. Va a tener un relleno izquierdo de 24 píxeles, así. Después duplicarlo una vez más, y una vez más, bastante bueno. Seleccionarlos todos, agruparlos y alinearlos con el centro. Entonces vamos a seleccionar el segundo número y cambiarlo por otra cosa, por ejemplo, tres. Voy a quitar los otros dos porque en esta pantalla, el usuario está ingresando la contraseña. Tenemos que representar de alguna manera este proceso. Entonces voy a seleccionar estas dos líneas y cambiar el color a B9, B9, y B9, así, bastante bueno. Ahora, todo está hecho. Entonces vamos a seleccionar este grupo, moverlo hacia arriba, y el relleno superior va a ser de 58 píxeles, así. Voy a tener una capa de texto más. Duplicemos esta capa de texto y la movamos hacia abajo. Aquí, necesitamos escribir, ¿no recibiste la OTP? Entonces escribamos, Resend OTP, así. Voy a cambiar la fuente a SF Pro Text, así. También cambiemos el tamaño de fuente a 14 puntos. Después seleccionemos esta parte del texto y cambiemos el código de color a B9, B9, y B9. También selecciona estos reenviar sección OTP y cámbiala a 27, 43, y FD, así. Es el relleno superior va a ser de 40 píxeles. Lo último que tenemos que hacer es cambiar nuestro botón. Porque ahora, necesitamos tener un botón de verificación desactivado. En primer lugar, vamos a cambiar este texto a, Verificar, genial. Entonces voy a seleccionar este rectángulo de dos capas, duplicarlo, quitar la sombra de gota, y luego moverlo hacia arriba justo por encima del texto verificado, así. Voy a cambiar el color a uno sólido. Vamos a cambiarlo a blanco. Después de eso, voy a disminuir la opacidad al 40 por ciento, así. También voy a seleccionar estos verificar texto. Disminuya la opacidad de la capa al 50 por ciento. Bastante bonito. último pero no menos importante, recuerda cambiar el nombre de tu grupo siempre, verifica, y eso es todo. Como puedes ver, ahora tenemos un botón deshabilitado porque el usuario no ingresó completamente el código OTP. Ahora, duplicemos esta pantalla con el fin de diseñar nuestra última pantalla. Voy a moverlo un poco al lado derecho. Ahora bien, ¿qué necesitamos? En primer lugar, necesitamos completar este código. Lo que voy a hacer es seleccionar este número, copiar esto, pegarlo aquí, moverlo al lado derecho, y lo voy a mover justo por encima de esta línea de texto en nuestro panel de capas. Entonces escribamos cero, bastante bien. Asegúrate de alinearlos al centro, así. Después de eso, voy a cambiar el color a éste. Bastante bien. Una vez más, duplicarlo, muévelo hacia el lado derecho. No obstante, necesitamos moverlo también en nuestro panel Capas, así. Vamos a cambiarlo a dos. Cambiemos el color de nuestra línea de texto. Bastante bien. Por último, pero no menos importante, ahora necesitamos habilitar nuestro botón. Voy a abrir este grupo, y vamos a quitar el rectángulo que acabamos de crear. Voy a aumentar la opacidad de mi texto al 100 por ciento. Muy bien, todo el mundo. Eso es todo por este video. Espero que lo hayas disfrutado y te veo en el siguiente video. Nos vemos entonces. 82. Pantes de perfil: Hola a todos y bienvenidos de nuevo a otro video de la sección. En este video, vamos a empezar a diseñar nuestras pantallas de perfil. Primero lo primero, necesitamos tener una nueva mesa de trabajo, así que lo que voy a hacer es simplemente duplicar esta pantalla OTP. Después de eso, voy a quitar todos los objetos y dejarme renombrarlo a perfil. Básicamente, esta pantalla de perfil va a tener un fondo y también un marcador de posición de imagen de perfil justo en la parte superior y algunos campos de texto y un botón. En primer lugar, sigamos adelante e insertemos un rectángulo con el fin de crear nuestro fondo así. Asegúrate de que se ajuste a tu pantalla, luego cámbiala a gradiente lineal y vamos a hacer que quepa así. Seleccionemos el primer color, y voy a establecer el código de color en 4960 y F9, así. El segundo color va a ser 1937 y FE. No obstante, asegúrate de aumentar la opacidad al 100 por ciento así, y además voy a cambiar un poco la dirección para conseguir un mejor gradiente, algo así. Es bastante bonito, ¿no? Después de eso, necesitamos agregar nuestra barra de estado y nuestro indicador de inicio. No obstante, en esta ocasión necesitamos obtener la barra de estado blanca y un indicador de inicio blanco. Adelante y coloquemos una imagen. Desde las barras de carpetas de la interfaz de usuario de Apple iOS, digamos esta barra, elegamos la oscura y la coloquemos aquí así. Bastante bien. Entonces coloquemos otra imagen. Desde la carpeta de indicador de inicio, elijamos el retrato oscuro y lo coloquemos justo en la parte inferior. Alinearlo con el centro, y también alinearlo con la parte inferior, así. Bastante bien. Hasta el momento hemos creado la pantalla base. Ahora es el momento de agregarle algunos detalles. El primero que necesitamos es una flecha de retroceso derecha en la parte superior izquierda. Colocemos un icono de nuestra carpeta de iconos, y aquí voy a elegir flecha izquierda y colocarlo aquí, así. En ocasiones, cuando agregas estos iconos, pueden ser invisibles. Este es probablemente un error de Figma, sin embargo, si quieres arreglar eso, puedes cerrar tu archivo y abrirlo una vez más, y luego verás esos iconos. Ahora vamos a revisar los remanes. El relleno izquierdo va a ser de 30 píxeles como este, y el relleno superior va a ser de 24 píxeles como este. El relleno superior va a estar en contra de esta barra de estado, no el borde de esta mesa de trabajo. Bastante bien. Ahora vamos a crear juntos nuestro posicionador de imagen de perfil. Lo que voy a necesitar es un rectángulo. Voy a insertar eso. Mantengamos pulsada Mayús agregar arrastrar y soltar así. Asegúrese de que tanto el ancho como el alto estén establecidos en 100 píxeles. Entonces voy a ajustar el radio de esquina a 36, y además voy a hacerlo suave así. Bastante bien. Después de eso, cambiemos el color a blanco. Ahora le voy a agregar algunos detalles. Duplicémoslo primero, mando D o control D, luego hagámoslo un poco más grande. Establezcamos el alto y el ancho tanto en 104 píxeles como este. Voy a poner el color a un azul claro. Probémoslo 40CE y F2. Fantástico. Ahora movamos esta capa hacia abajo justo debajo de nuestro primer rectángulo. Entonces lo voy a alinear al centro, este blanco también, y ahora vamos a seleccionar ambos y alinearlos tanto horizontal como verticalmente. Ahora vamos a renombrarlos. El azul va a ser azul y el blanco va a ser blanco, que podemos reconocerlos fácilmente. Ahora seleccionemos el azul, y lo voy a girar por menos 57 grados así. Entonces una vez más, duplicemos el blanco, y ahora cambiemos el color a B52FF y 8, así. Esta vez, hagámoslo 106 por 106 píxeles y asegurémonos de que esté alineado al centro horizontalmente. Voy a subirlo así. Cambiemos el nombre a morado moverlo hacia abajo justo debajo del azul, y esta vez vamos a rotarlo en menos 30 grados. Fantástico. Es tan elegante, ¿no? Entonces necesitamos colocar nuestro ícono de cámara justo en el centro de esta plaza blanca. Adelante y coloquemos una imagen. Desde iconos, voy a elegir cámara y colocarla aquí, después asegurarme de alinearla con tu cuadrado blanco, tanto vertical como horizontalmente. Después de eso, voy a seleccionar todos estos elementos, agruparlos, y llamémosle imagen de perfil, así. El relleno superior va a ser de 40 píxeles como este, y asegúrate de que esté alineado al centro horizontalmente. Además, voy a quitar estos 0.6 del eje y para obtener un relleno superior de 40 píxeles como este. Bastante bien. Ahora es el momento de crear nuestros campos de texto. Para ahorrar tiempo, voy a elegir este campo de texto de dirección de correo electrónico, copiar esto, pegarlo aquí. Bastante bien. Voy a moverlo hacia arriba y vamos a cambiar el título a nombre de usuario, y también el color va a ser 80E0 y FF. Vamos a copiar este código de color porque vamos a necesitar eso. Esta capa de texto va a ser tu nombre de usuario y el código de color va a ser el mismo. Bastante bien. Ocultemos estos ícono de tic, sin embargo, no elimines eso porque en la siguiente pantalla lo vas a mostrar. Vamos a ocultarlo por ahora, luego seleccione estos campos de texto línea y que sea blanco, bastante bueno. Voy a cambiar el nombre de estos campos de texto a nombre de usuario, este grupo también. Bastante bien. Ahora es el momento de duplicar eso y colocarlo con un relleno superior de 24 píxeles como este. Una vez más, duplicar eso, y una vez más. Bastante bien. El segundo va a ser nuestro nombre de pila. Vamos a escribir nombre, y aquí se va a cambiar a tu nombre y un nombre de grupo y marco va a ser nombre aquí también. Bastante bien. El tercero va a ser apellido. Fantástico. Aquí tiene que ser tu apellido también. Bastante bien. El último va a ser fecha de nacimiento. Fantástico. Aquí vamos a escribir tu cumpleaños, y voy a escribir un formato para estos. Escribamos dd-mm-aaaa. Significa que el usuario debe ingresar el día y el mes y el año. Recuerda renombrar el nombre de tu marco y también el nombre de tu grupo, así que voy a cambiarlo por apellido. Este también, y el último a cumpleaños. Bastante bien. Ahora vamos a seleccionarlos todos manteniendo presionada la tecla Mayús en el teclado, y agitar el relleno superior, es 71.2. Hagámoslo 40 así. Puedes agruparlos y llamarlos campos de texto, y como puedes ver, el relleno derecho e izquierdo son de 30 píxeles. Entonces lo último que necesitamos es un botón. Va a ser nuestro botón completo. Voy a elegir estos botón verificar, copiar esto, pegarlo aquí. Quitemos estos círculos, no los necesitamos. Además, voy a cambiar el color a un blanco sólido. Asegúrate de seleccionar el rectángulo 2 no el rectángulo 1 porque esta es nuestra máscara y voy a cambiar el color a blanco sólido. Bastante bien. Los colores del texto deben ser C8, C8, y C8 así. Vamos a cambiarlo para completar. Lo último que necesitamos agregar a este botón es un icono de tick. Déjame copiar y pegar estos ícono de tic de nuestra página de inicio de sesión, y lo voy a pegar aquí. Escojamos el mismo color para estos ícono de tic también. Voy a alinearlo con mi texto verticalmente, bastante bueno, y asegurarme de mover esta capa dentro de tu grupo de botones. Va a estar aquí y el relleno izquierdo va a ser un píxel. El motivo por el que elegimos un color gris claro para estos elementos es que este botón está inactivo en esta pantalla, debido a que el usuario aún no completó este formulario. Ahora vamos a renombrarlo para completarlo. Fantástico. Ahora todo está hecho. Ahora sigamos adelante y diseñemos nuestra página de perfil completada. Voy a duplicar esta pantalla así, y luego primero vamos a llenar juntos estos campos de texto. El primero va a ser Emma subrayar Ashley, puedes elegir lo que quieras, no importa. Yo lo voy a hacer blanco. El nombre de pila va a ser Emma, blanco también, el apellido debe ser Ashley. Hagámoslo blanco, bastante bueno. La fecha de nacimiento va a ser el 20 de diciembre de 1990. Hagámoslo blanco. Bastante bien. Ahora, como mencioné antes, vamos a mostrar nuestro ícono T. Adelante y mostrarlos así. Fantástico. El color de nuestros textos completos debe cambiarse a 2B47 y FC. Vamos a copiar esto porque voy a cambiar el color de este ícono T también, pega aquí. Bastante bien. Ahora, este botón está activo. Ahora sigamos adelante y cambiemos nuestro marcador de posición de perfil. Vamos a añadir una imagen a esto. En primer lugar, necesitamos quitar este ícono de la cámara así, luego elijamos estos cuadrados blancos. Ahora voy a elegir un plugin. Voy a utilizar el contenido plug-in real que ya te mostré cómo puedes usar. Voy a dar clic en este contenido aquí, y vamos a ir a los avatares, elegir femenino, y vamos a refrescarlo hasta que te den una gran foto. Creo que es bastante bueno, fantástico. Además, voy a añadir una sombra de gota a estos cuadrados, así que agreguemos efectos a esto. Voy a cambiar el ajuste, así que vamos a establecer el desenfoque en 22 y el blanco en ocho y disminuir la opacidad al 20 por ciento. Fantástico. Después de eso, voy a seleccionar estos cuadrados azules y morados, sacarlos de nuestro grupo de imágenes de perfil. Vamos a escalarlos un poco así. Voy a elegir primero el azul, hacer doble clic, en eso para entrar al modo de edición. Después de eso, voy a agregar un nodo justo en el medio, así, y luego lo voy a mover hacia el lado derecho hasta que consiga una forma como esta. Bastante bien. Vamos a moverlo a la derecha, haga clic en “Hecho”, y hagamos lo mismo a este cuadrado morado también. Voy a añadir un nodo aquí y moverlo así. Bastante bien. Muévelo a la parte superior. Vamos a rotarlo un poco así. No obstante, lo voy a escalar para que sea más grande, un poco más. Vamos a escalar este azul también, vamos a rotarlo un poco. Bastante bien. Voy a moverlo a la derecha hasta que consiga la mejor ubicación posible. Ahora vamos a seleccionarlos a ambos. voy a mover abajo justo debajo de nuestra imagen de perfil y también nuestra barra de estado, que es esta línea. Bastante bien. Subirlos y eso es todo. Es bastante bueno, ¿no? lo único que noté es que no alineamos estas capas de texto completo al centro. Vamos a seguir adelante y seleccionar estos texto completo y estos icono de tic, agruparlos y alinearlo al centro. Yo también le voy a hacer lo mismo a estos elementos. Voy a seleccionarlos, agruparlos, seleccionar el rectángulo y alinearlos al centro. Ahora todo está hecho. ¿ Se puede ver lo bonito que es? Es bastante interesante, ¿no? Chicos, eso es todo por este video. Espero que lo hayan disfrutado. En el siguiente video, diseñaremos juntos nuestra página de inicio. Entonces nos vemos. 83. Página de inicio: Hola a todos. Bienvenido de nuevo a otro video de este curso. En este video, vamos a diseñar juntos nuestra página de inicio. Sin más preámbulos, empecemos duplicando este perfil terminado mesa de trabajo así, entonces voy a quitar casi todo excepto el fondo. Tratemos de quitar todos estos elementos, esta flecha izquierda también porque ya no necesito eso, y también este indicador de inicio. Entonces usemos esta capa Rectángulo 4, que es nuestro fondo, y voy a cambiar la altura a 278, así. Después de eso, voy a hacer doble clic en eso. Ahora estoy en modo edición. Entonces vamos a seleccionar estos dos nodos inferiores. Voy a elegir el primero y mantener pulsado Shift, y elegir el segundo, y dejar establecer el radio de esquina en 66 así, hecho. Asegúrate de usar alisado de esquinas para obtener esquinas lisas como esta. Fantástico. Lo siguiente que necesitamos es el ícono del menú de hamburguesas justo en la parte superior. Sigamos adelante y coloquemos una imagen. De los iconos, tú eliges Menú de Hamburguesa, colócala aquí. Ahora vamos a revisar los remanes. Ahora pongamos el encabezamiento superior en 27, así, y un relleno a la izquierda va a ser 30. Fantástico. Entonces necesito esta imagen de perfil para poner justo en la parte superior de este encabezado. Vamos a seguir adelante y copiarlo y pegarlo aquí así. Entonces lo voy a bajar. Usemos la herramienta Escala. Bajémoslo a 50 por 50, así. Voy a ponerlo en 50 por 50 así. Pongámoslo justo ahí. Entonces necesito agregar un indicador de estado a esta imagen de perfil para indicar si este usuario está en línea o no. Añadamos un círculo como este. Voy a ponerlo en 10 por 10, y vamos a cambiar el color a 20C968 así, y necesito un trazo. Añadamos un trazo y cambiemos el color a blanco. Fantástico. Después de eso, lo voy a alinear con el lado derecho. Vamos a subirlo un poco así. Como puede ver, este indicador está perfectamente alineado con los bordes de esta imagen de perfil. Entonces pongamos este círculo dentro de este grupo de imágenes de perfil, y eso es todo. Después de eso, necesitamos revisar los remeros. El relleno superior va a ser de 24 píxeles, así, y la derecha debe ser de 30. Bastante bien. Lo siguiente que necesitamos es un texto. Añadamos una capa de texto y escribamos “Buenos días Emma”. Entonces, voy a cambiar la fuente a Montserrat así, hacerlo regular y el tamaño de la fuente debe ser de 24 puntos y el color obviamente blanco. Ahora vamos a revisar los remanes. El relleno izquierdo debe ser de 60 píxeles, así, y un relleno superior debe ser de 80. Fantástico. Ahora, ¿qué necesitamos? Aquí, voy a colocar una tarjeta, que consiste en un gráfico de barras que muestra el saldo disponible de este usuario específico. Necesito agregar un rectángulo, así. Por ahora, vamos a establecer el ancho y la altura en 315, así, alinearlo con el centro y aumentar el radio de esquina a 40. También asegúrate de tener esquinas lisas como esta. Entonces voy a cambiar el color a blanco. Fantástico. Ahora agreguemos una sombra de gota a esto. Voy a añadir efectos y vamos a cambiar la configuración. El desenfoque va a ser 50, la X va a ser cero, y la Y debe ser nueve en este caso. Disminuya la opacidad al 10 por ciento. Bastante bien. Voy a establecer el relleno superior de esta tarjeta en 16 píxeles como éste. En lo que va tan bien. Entonces necesitamos la capa de texto aquí, voy a escribir tu saldo total. Bastante bien. Permítanme disminuir el tamaño de la fuente a 16 puntos como este. Su encabezamiento superior va a ser de 32 pixeles, el relleno izquierdo 32 pixeles también, lo duplican. Ahora voy a cambiar el camino a negrita y un tamaño de fuente a 30 puntos. Aquí vamos a escribir la cantidad. Por ejemplo, escribamos 8,500 dólares así, y voy a cambiar el color a 2D99FF, así. Es relleno superior va a ser ocho ocho como ahora. Lo siguiente que necesitamos es un ícono Más. Sigamos adelante y coloquemos una imagen. Aquí tenemos el icono Más, lo voy a colocar aquí. Como puedes ver, ahora es invisible. Como mencioné antes, es un bicho. Para solucionar esto, puedes cerrar fácilmente tu archivo y abrirlo una vez más así, y ahora está visible. Usemos este ícono. Voy a moverlo al lado derecho. Ahora alinémoslo con nuestro texto. Vamos a elegir este icono más pequeño, y esta capa de texto y haga clic en “Alinear verticalmente”. Bastante bien. El relleno correcto va a ser de 32 píxeles también. No obstante, recuerda cambiar el color de esta capa de texto. Voy a ponerlo en 3A3A3A. Bastante bien. Ahora es el momento de crear juntos nuestro gráfico de barras. En primer lugar, necesitamos un rectángulo para crear nuestras barras. Voy a arrastrar y soltar así. Establezcamos el ancho en nueve y la altura en 122, así. Voy a hacer doble clic en eso y vamos seleccionar estos dos nodos superiores porque voy a aumentar el radio de esquina de ellos hasta obtener una barra completamente redondeada como esta. Entonces elijamos esto. Voy a elegir el cuentagotas y elegir el mismo azul que nuestro texto de cantidad, así. Voy a bajarlo un poco, luego duplicarlo, moverlo hacia el lado derecho. Voy a disminuir su altura así. Vamos a ponerlo en 32 píxeles. Bastante bien. Entonces, voy a hacer clic derecho en eso, y elijamos Flip Vertical. Como se puede ver, se volteó. Voy a moverlo hacia abajo y vamos a revisar los remeros. El relleno izquierdo debe ser de cuatro píxeles como éste. Lo último que tenemos que hacer es cambiar el color. Voy a ponerlo en A5F3FF. Bastante bien. Agrupémoslos. Voy a llamarlo Columna 1, duplicarlo, y vamos a establecer el relleno izquierdo en 16 píxeles como este. Ahora voy a cambiar la altura de estas barras. Seleccionemos esta barra. Voy a ponerlo en 100, así. Ahora es el momento de disminuir también la altura de esta barra. Añámoslo al 23. Bastante bien. Entonces vamos a duplicarlo una vez más. Colócala con un relleno izquierdo de 16 píxeles. Voy a bajar la altura a 89, así, y para este, vamos a disminuirla a 15, bastante bien. Vamos a duplicarlo una vez más. Vamos a establecer la altura en 61, y vamos a disminuir el tamaño de altura de este más pequeño también a siete. Entonces vamos a duplicarlo una vez más. Esta vez, necesitamos cambiar el lugar de estos dos bares. En primer lugar, hagamos clic con el botón derecho y elijamos Voltear Vertical. Voy a moverlo hacia abajo así. Después de eso, disminuyamos su altura a 44. Bastante bien, y elige éste también. Haga clic en “Voltear vertical” muévalo hacia arriba, y ahora aumentemos su altura a 27, así. Vamos a duplicarlo. Voy a disminuir este a 15, así. Aumentemos el segundo a 70. Por último, la última, voy a duplicar y disminuir un poco esta barra. Voy a ponerlo en 10 y aumentar el siguiente a 108, así. Ahora, vamos a seleccionarlos a todos, agruparlos, y voy a llamarlo columnas así. Alinémoslo con mi tarjeta. Voy a seleccionar este rectángulo, vamos a mantener pulsado Shift y hacer click en eso, alinearlo al centro. Vamos a establecer el relleno superior en 26, así y un relleno inferior va a ser 32 porque el relleno superior aquí es de 32 píxeles, por lo que necesitamos aumentar la altura de este cuadrado. Como se puede ver, son 26. Voy a cambiar la altura. Primero, desvinculemos esta altura y anchura, y luego, escribamos más seis. Vamos a comprobarlo. Ahí vamos. Ahora tenemos un relleno de botón de 32 píxeles también. último, pero no menos importante, tenemos que agrupar todos estos elementos. Seleccionémoslos a todos, agruparlos, y lo voy a llamar Balance Card. Ahora sigamos adelante y creamos nuestra barra de pestañas. Necesitamos colocar una barra de pestañas justo en la parte inferior de esta pantalla. En lugar de usar una barra de pestañas prefabricada, voy a mostrar cómo puedes diseñar tu pestaña de personalización lo cual es bastante increíble. Adelante e insertemos aquí un rectángulo. Voy a arrastrar y soltar y cambiar el color a blanco. Bastante bien. Voy a añadir algo de sombra de gota y vamos a cambiar la cantidad de desenfoque a 20. El y va a ser dos. También necesitamos disminuir la opacidad al 10 por ciento. Bastante bien. Entonces disminuyamos la altura a 92 también. Voy a alinearlo al fondo. También necesitamos el indicador de inicio. Vamos a seguir adelante y copiarlo y pegarlo de una de nuestras pantallas anteriores así. Bastante bien. Ahora es el momento de crear nuestras pestañas. Básicamente vamos a tener tres pestañas diferentes. El que está en la pestaña, la pestaña de notificaciones, y una pestaña de perfil. Sigamos adelante y coloquemos una imagen. En la carpeta Iconos, tienes un toque o carpeta así con tres iconos diferentes. Voy a colocarlos a todos uno por uno. Entonces cambiemos su lugar. Este icono de notificación va a estar justo en el medio y el perfil debe estar en el lado derecho. Ahora pongamos el relleno entre ellos. En primer lugar, voy a seleccionarlos todos así y desde la sección de alineación, voy a dar clic en distribuir el espaciado horizontal así. Después de eso con estos indicador, puedo configurar fácilmente el relleno entre ellos en 90. Bastante bien. Entonces necesitamos un indicador circular para mostrar que esta pestaña está activa. Voy a crear un círculo. Hagámoslo cinco por cinco. Voy a elegir el cuentagotas para seleccionar el mismo color que nuestro icono. Alinémoslo al centro. Bastante bien. Es relleno superior va a ser un pico de células. Al igual que esto. Ahora vamos a agruparlos, esta va a ser nuestra cartera. Bastante bien. Contamos con notificación y perfil también. Seleccionarlos todos, agruparlos. Una vez más, voy a llamarlo Tabs, y alinémoslo al centro así. Es el relleno superior va a ser de 24 pixeles como este. Ahora ya casi terminamos. No obstante, voy a crear algunos componentes con el fin de que tu vida sea mucho, mucho más fácil. Seleccionemos este monedero grupal y voy a dar click en “Crear icono de componente”. Ahí vamos. Ahora acabamos de crear un componente. Entonces vamos a copiar esto y voy a crear una nueva página. Llamémoslo símbolos, y lo voy a pegar aquí. Ahí vamos. Entonces necesito copiar y pegar estos dos iconos también así que vamos a seleccionarlos, copiarlos, y pegarlos en la página de símbolos justo aquí. Fantástico. Básicamente para cada icono, necesitamos dos estados diferentes, el estado activo y el estado de desactivación. Estos azules van a ser nuestro estado activo y estos gris oscuro va a ser nuestro estado de desactivación. Lo que vamos a hacer es crear aquí dos estados diferentes. Ahora lo voy a duplicar. Vamos a separarlo de su amo así. Quita el círculo y voy a cambiar el color a este gris oscuro. Escojamos estos cuentagotas y seleccionemos éste. El código de color es 3A, 3A, y 3A. Ahora voy a seleccionar estos monedero marco y hacer clic en “Crear componente”, así. Cambiemos el nombre a billetera/el activo. Vamos a renombrarlo a billeta/activo. Bastante bien. En realidad, como se puede ver, esta es una instancia de los componentes maestros. Nuestro componente maestro está aquí. Voy a cortar esto. Vamos a pegarlo aquí para que podamos tener el componente maestro. Voy a quitar éste, y ahí vamos. Una vez más, vamos a renombrarlo a billetera/activa. Nosotros vamos a hacer lo mismo para estos dos iconos también. Para la notificación, lo voy a duplicar. Vamos a moverlo al lado izquierdo. Cambiemos el color a este azul, así. Yo también necesito este círculo, así que lo voy a copiar y pegar aquí. Asegúrate de que esté totalmente alineado. Seleccione estas dos capas, agruparlas, y vamos a escribir notificación/activa, y haga clic en “Crear componente” así. El segundo va a ser notificación/desactivo. Para perfil también, lo voy a duplicar. Cambiemos su color a este azul. Voy a copiar y pegar este círculo también, agruparlos y llamémoslo perfil, activo. Haga clic en “Crear componente”. El último debe ser perfil desactivo así y dar clic en “Crear componente”. Nos olvidamos de crear un componente de esto, la notificación activa. Hagamos clic en crear componentes para éste también. Como pueden ver, tenemos otro marco aquí, así que vamos a quitar eso. No lo necesitamos. Bastante bien. Contamos con seis componentes diferentes. Ahora, ¿cómo podemos usarlos? Volvamos a nuestra Página 1, y ahora necesitamos reemplazar nuestros iconos por nuestros componentes. Vámonos a los activos. Aquí tenemos tres componentes diferentes. Colocemos aquí la billetera activa, bastante bien. También los voy a quitar a los dos. Colocemos también la notificación de desactivación. Bastante bien. También el perfil desactivo, selecciónelos todos, haga clic y distribuya el espaciado horizontal, alinéelos verticalmente también, y pongamos el relleno en 90, así. Una vez más, agruparlos y voy a llamarlo pestañas. Alineemos este grupo al centro. Bastante bien. Ahora necesitamos alinear estos dos iconos a la parte superior de este grupo. Seleccionémoslos todos y haga clic en alinear a la parte superior. Bastante bien. Ahora les voy a mostrar por qué hicimos eso. Supongamos que vas a hacer de esto el activo, en lugar de cambiar nuestros iconos una y otra vez, ahora fácilmente podemos ir a la sección de incienso y desde este menú de gota, fácilmente podemos elegir desactivados o activos. Bastante bien. Ahora agruparemos nuestros elementos. Voy a seleccionar estas pestañas y también nuestro rectángulo y estos indicador de inicio. Agruparlos y lo voy a llamar barra de pestañas. El último que necesitamos crear es otra carta aquí. Vamos a seleccionar estas tarjeta de saldo. Voy a mantener pulsada la tecla Command y dar clic en eso. Copia esto, y pegarlo aquí. Cambiemos la altura a 146, así. Voy a moverlo hacia abajo y vamos a poner el relleno superior en 24 píxeles. Bastante bien. Entonces voy a elegir este botón. Voy a mantener pulsada la tecla Comando y seleccionar este Rectángulo 2. Entonces vamos a hacer clic derecho en este Rectángulo 2 porque voy a copiar y pegar las propiedades de estos botones, necesito ese gradiente. Hagamos click en “Copiar propiedades”, y voy a seleccionar estas tarjeta y vamos a pegarla aquí. Bastante bien. No obstante, recuerda cambiar también el radio de esquina. Porque pegamos que las propiedades de estos botones, por lo que necesitamos cambiarlo a 40 una vez más. Bastante bien. Después de eso, voy a seleccionar estos círculos, copiarlos, pegarlos aquí así. Bastante bien. Vamos a mover estos morados un poco hacia abajo y este azul un poco arriba. Ahora voy a duplicar este rectángulo así moverlo hacia abajo y ahora puedo enmascarar fácilmente estos círculos. Usemos Rectángulos 6, que es el rectángulo superior, y estos círculos y haga clic en máscara. No obstante, recuerda quitar estas sombras de gota. Creo que es buena idea cambiar el lugar de estos dos círculos. Voy a mover estos azules hacia abajo y este morado hacia arriba para conseguir algo como esto. Vamos a escalarlos un poco. Ahora se ve genial. Entonces necesitamos una capa de texto, así que insertemos una. Escribamos chequear tus cuentas bancarias” así, y aumentemos el tamaño de la fuente a 20 puntos. Yo lo voy a hacer blanco. También cambiemos el marco de estos para conseguir algo como esto. Entonces lo voy a alinear con mi tarjeta. Tenemos que elegir ambos, alinearlos verticalmente y el relleno izquierdo debe ser de 32 píxeles. Ya casi terminamos. El único que necesitamos añadir es una flecha derecha más pequeña. Colocemos una imagen. Usemos flecha pequeña y colóquelo aquí. Bastante bien. Alinémoslo verticalmente. Fantástico. El relleno correcto va a ser 32 también. Ahora es el momento de seleccionar todos nuestros elementos. Seleccionemos estos grupos de masas, estos Rectángulo 7 también. Estos textos de capa y esta pequeña flecha, agruparlos y vamos a llamarlo tarjeta de cuentas bancarias. Eso es todo. Muy bien chicos, fue video alineado. No obstante, como puedes ver, podrías crear estos asombrosos y modernos dashboards para nuestra aplicación de finanzas. Lo último que tenemos que hacer es cambiar el nombre de nuestro tablero de arte a la página de inicio. Muy bien chicos, muchas gracias por ver este video. Espero que lo hayas disfrutado y te veo en el siguiente video. 84. menú: Hola a todos, y bienvenidos de nuevo a otro video de este curso. En este video, vamos a diseñar juntos nuestra pantalla de menú. Básicamente cuando el usuario hace clic en este icono del menú de hamburguesas justo en la parte superior de esta pantalla de inicio, nuestro menú debe deslizarse desde el lado izquierdo de la pantalla. En primer lugar, voy a seguir adelante e insertar aquí un nuevo tablero de arte. Entonces vamos a presionar “A” y elijamos iPhone 11 Pro o X. Bastante bien. Entonces voy a renombrarlo a Menu así. Después de eso, tenemos que seguir adelante y exportar la pantalla porque vamos a necesitar eso. No obstante, recuerda primero ocultar la barra de estado y este indicador de inicio. Te diré por qué. En primer lugar, vamos a exportarlo. Desde la sección Exportar puedes elegir 2x con el fin obtener una mejor resolución y el formato debe ser PNG. Podrías elegir JPG también, pero PNG está bien. Demos click en este botón “Exportar Página Principal”. En nuestra carpeta Activos, voy a seguir adelante y crear una nueva carpeta. Escribamos Exportaciones y guárdalo aquí. Entonces recuerda mostrar tu barra de estado y también tu indicador de inicio. Bastante bien. Ahora es el momento de colocar aquí nuestra imagen exportada. Sigamos adelante y elijamos eso de nuestra carpeta Activos. Ahí vamos, Exportaciones, Homepage. Yo lo voy a colocar aquí. Fantástico. El motivo por el que escondí la barra de estado y también este indicador de inicio fue porque ahora necesitamos mover la pantalla hacia el lado derecho. Si no los ocultáramos, su lugar estaría estropeado aquí. Por lo que no tiene sentido mover la barra de estado y el indicador de inicio hacia el lado derecho. No es posible. Ahora movámoslo un poco al lado derecho. Voy a poner la X a 266 así. Bastante bien. Después de eso, necesito colocar una capa de superposición para hacerla más oscura. Vamos a seguir adelante y crear un rectángulo. Voy a arrastrar y soltar así. Hagámoslo un poco más grande, pongámoslo en negro, y disminuyamos la opacidad al 30 por ciento así. Está bastante bien. Entonces necesitamos crear nuestro menú. Vamos a crear otro rectángulo aquí. Arrastra y suelta. En ocasiones, cuando creas una nueva capa, puede colocarse fuera de tu tablero de arte. Como puedes ver en este momento, está fuera de mis muchas tablas de arte, así que vamos a moverlo adentro. Ahí vamos. Entonces sigamos adelante y cambiemos el ancho a 281 así. El alto debe ser 812, y yo lo voy a hacer blanco. Bastante bien. Entonces hagamos doble clic en eso para poder entrar al modo de edición y voy a seleccionar estos dos nodos, el superior derecho y el inferior derecho así. Aumentemos el radio de esquina a 20. Bastante bien. No obstante, voy a hacerlo suave, así que aumentemos esta cantidad al 60 por ciento. Bastante bonito. Ahora podemos copiar y pegar este indicador de inicio así. Voy a colocarlo al centro y al fondo. Bastante bien. ¿Qué necesitamos para este menú? En realidad necesitamos esta imagen de perfil, así que voy a copiarla y pegarla aquí, moverla hacia el lado izquierdo, y su relleno izquierdo debe ser de 30 píxeles como este. Bastante bien. Déjame acercar. Otra cosa que necesitamos agregar es el nombre del usuario y el nombre de usuario. Insertemos un texto aquí. Voy a escribir así a Emma Ashley. Voy a cambiar la fuente a Montserrat. Bastante bien. Vamos a ponerlo en negrita y el tamaño de fuente debe ser de 16 puntos y voy a cambiar el color del texto a 3A3A y 3A. Bastante bien. Entonces duplica, muévelo hacia abajo, y aquí voy a escribir el nombre de usuario. Escribamos @emma_ashley y luego puedo cambiar el camino a regular y también el tamaño de fuente a 14 así. El relleno superior debe ser cero y ahora vamos a seleccionarlos a ambos, agruparlos, y alinearlo con nuestra imagen de perfil así. El relleno izquierdo debe ser de ocho píxeles. Bastante bien. Ahora es el momento de crear nuestros submenús. En primer lugar, insertemos un texto. El primer menú va a ser Pagos así y el tamaño de la fuente debe ser de 18 puntos, la fuente debe ser Montserrat, y el peso debe ser regular. No obstante, necesito cambiar el color para ser y FC así. Vamos a subirlo un poco. Entonces necesitamos colocar un ícono para esto. Adelante y coloquemos una imagen. Aquí en carpeta Iconos tienes la carpeta Menú y tenemos seis iconos. Por ahora elijamos Pagos, colóquelo aquí. Bastante bien. Seleccionémoslos a ambos y alinéelos verticalmente así y el relleno izquierdo debe ser de ocho píxeles. Agruparlos. Entonces voy a crear un fondo para esto porque vamos a tener diferentes estados por lo que cuando se seleccione el submenú, su fondo debe ser un poco más oscuro. Vamos a crear un rectángulo aquí. Voy a arrastrar y soltar así y pongamos la altura a 60. Voy a hacer doble clic en eso y vamos a usar estos dos nodos, la parte superior derecha y la inferior derecha, y establecer el radio de esquina en 14 así. Acuérdate de hacerlos suaves. Bastante bien. Después de eso, voy a cambiar el color a F2F4 y F8 para conseguir algo como esto y vamos a mover esta capa hacia abajo. Bastante bien. Alineemos nuestro texto con nuestro fondo verticalmente. En lo que va tan bien. Entonces lo siguiente que necesitamos es una flecha derecha, así que voy a seguir adelante y colocar una flecha, iconos, y aquí tenemos esta flecha pequeña. Vamos a colocarlo aquí. Entonces lo voy a subir así. Por último, cambiemos su color. Voy a seleccionarlo. Asegúrate de no seleccionar el marco. Necesitas seleccionar la forma, así que mantén presionada la tecla “Comando” o la tecla “Control” en tu teclado y selecciona eso. Ahora estamos seleccionando la forma. Entonces voy a elegir el cuentagotas y vamos a seleccionar el mismo color que nuestro icono. Después de eso, tenemos que alinear esta pequeña flecha con nuestro fondo y nuestro texto. ¿Cómo podemos hacer eso? En primer lugar, alinémoslo con texto leído como este. Porque ya alineamos nuestro texto al centro, por lo que estamos seguros de que este icono está alineado con nuestro fondo también. Su relleno derecho va a ser de 32 píxeles, así. Como puedes ver, el relleno superior e inferior son de 24 píxeles y el relleno izquierdo de nuestro icono y grupo de texto debe ser de 34 píxeles como este y ahora todo está hecho. Lo siguiente que voy a hacer es seleccionar este grupo y también la flecha pequeña. Una vez más, agruparlos y voy a renombrarlo a Pagos. Bastante bien. Duplicarlo, moverlo hacia abajo, y la distancia entre el siguiente submenú y el submenú anterior debe ser de 50 píxeles como este. Ahora lo voy a cambiar a Transacciones. Fantástico. Cambiemos el ícono también, así que voy a colocar un nuevo ícono. Desde la carpeta Menú, tenemos Transacciones. Vamos a colocarlo aquí y voy a quitar éste y vamos a moverlo hacia abajo, alinearlo con tu texto. Bastante bien. También necesitamos alinearlo con nuestro icono de pagos. Seleccionémoslos a ambos. Si desea seleccionar este también, mantenga pulsado “Shift” y “Comando” juntos o “Shift” y “Control”. click en eso y ahí vamos. Están seleccionados y lo voy a alinear al centro horizontalmente así. Bastante bien. Vamos a renombrar este grupo a Transacciones y una vez más duplicarlo. El relleno superior debe ser de 50 píxeles y aquí lo voy a cambiar a Mis tarjetas y vamos a colocar otro ícono. Ahí vamos. Tenemos Mi Tarjeta aquí. Quitemos el icono anterior. Voy a moverlo hacia abajo, alinearlo con nuestro texto verticalmente, luego voy a renombrarlo a Mis tarjetas. Una vez más, duplicarlo, y ahora tenemos que cambiarlo a Promociones y voy a eliminar este ícono. Colocemos uno nuevo. Tenemos las Promociones aquí. Fantástico. Vamos a alinearlo con nuestro grupo y también alinearlo con tu ícono anterior, así que voy a seleccionar este, el marco, y también este, alinearlo horizontalmente. Bastante bien. Como puedes ver, este icono está fuera de esta carpeta, así que lo voy a poner dentro y vamos a cambiar el nombre de esta carpeta a Promociones. Bastante bien. Duplicarlo y este es nuestro último submenú. Vamos a llamarlo Ahorro, quitar el ícono, y colocar un nuevo ícono, ahorro. Alinearlo al centro y además alinémoslo con tu ícono anterior así. Recuerda ponerlo dentro de este grupo y renombrar el grupo a Ahorros y eso es todo. ¿ Viste lo fácil que es crear tu menú? El último que necesitamos crear es un botón Cerrar sesión. Lo que voy a hacer es encontrar el botón Regístrate aquí en nuestra página de Bienvenida. Copia esto, pegarlo aquí. Voy a acercar y primero cambiemos este texto a Cerrar sesión. Bastante bien. Voy a eliminar este icono y vamos a seleccionar este Rectángulo 2, no Rectángulo 1. Recuerda este Rectángulo 2 y hazlo más pequeño así. Voy a establecer el ancho en 221. Fantástico. Colocemos un ícono. Tenemos Cerrar sesión, colocarlo aquí, muévelo hacia abajo así. No necesitamos este grupo de máscaras, por lo que puedes quitar eso. Comprobemos también el relleno de este ícono. En primer lugar, necesito alinearlo con mi texto. Seleccionemos ambos, alinémoslo verticalmente así, y el relleno correcto de este ícono debe ser de 24 píxeles como éste. Bastante bien. último, pero no menos importante, vamos a renombrarlo a Botón Cerrar sesión. Bastante bien. El relleno inferior debe ser de 56 píxeles como este. Eso es todo. Muy bien, chicos. Eso es todo por este video. Espero que lo hayas disfrutado y te veo en el siguiente video. Nos vemos entonces. 85. Página de tarjetas de crédito: Hola a todos y bienvenidos de nuevo a otro video de las partituras. En este video, vamos a diseñar juntos nuestra pantalla de tarjetas. Sin más preámbulos, empecemos esto. En primer lugar, voy a seguir adelante y seleccionar esta pantalla de páginas de inicio, duplicarla, y voy a moverla justo debajo de nuestra pantalla OTP, después necesitamos quitar algunos elementos. En primer lugar, vamos a quitar estas barras de pestañas, después esta tarjeta, estas tarjetas también, estas imagen de perfil, estas imagen de perfil, y también estos ícono del menú de hamburguesas. No obstante, necesitamos tener estos indicadores de inicio negro, así que vamos a copiarlo y pegarlo aquí. También necesitamos tener estas flecha izquierda, así que voy a copiar esto y pegarlo aquí con la misma posición. En realidad, Figma reconoce automáticamente la posición anterior de estas flecha izquierda. Entonces vamos a acercar un poco. En esta pantalla en realidad necesitamos tener tantos elementos. En primer lugar, necesitamos tener un título. Escribamos, aquí puedes revisar tus tarjetas”, así. Entonces voy a redimensionarlo bastante bien, y después de eso, voy a cambiarlo a negrita, y también vamos a establecer el relleno izquierdo en 30 píxeles como este. El relleno superior va a ser de 80 píxeles, hasta ahora, tan bueno. Entonces necesitamos tener dos cartas diferentes, la de primaria y una de secundaria. Después de eso, necesitamos tener la sección de transacciones recientes. En primer lugar, vamos a crear nuestra tarjeta primaria. Voy a crear un rectángulo como este. Establezcamos el ancho a 209, y la altura a 305 así, y voy a cambiar el radio de esquina a 40. Recuerda también hacer esos rincones suaves así, y ahora te voy a mostrar una técnica muy grandiosa. Vamos a crear un gran fondo para nuestra tarjeta primaria usando gradientes radiales. Voy a ponerlo en blanco, es nuestro fondo blanco, y después de eso, necesitamos crear nuestros gradientes radiales uno por uno. Voy a cambiar el gradiente a radial, y vamos a establecer el primer color a 40D3 y F2 así. Copiemos y peguemos estos códigos de color para el segundo color también. No obstante, recuerda mantener la opacidad del segundo color a cero por ciento así, y ahora voy a seguir adelante y cambiar la dirección de estos colores. Vamos a moverlo así. Ahora vamos a añadir otro gradiente, va a ser radial también, y vamos a establecer el color a E100FF. Copiemos esto y peguémoslo para el segundo color. Voy a cambiar la dirección así. Hagámoslo más grande, fantástico, y necesitamos un gradiente más también. Adelante y agreguemos otro gradiente radial, y voy a cambiar el color a 2B47 y FC así. Voy a copiar esto y pegarlo para el segundo color, y voy a cambiar la dirección a aquí. Hagámoslo más grande. Ahora voy a modificar un poco las direcciones para obtener el mejor resultado posible. Modiquemos también estos azul claro. ¿ Se puede ver lo sencillo que es crear estos antecedentes? Ahora es el momento de agregar una capa de texto a esta tarjeta. Voy a insertar una capa de texto y vamos a escribir por $4,500 así. Yo lo voy a hacer blanco. El tamaño de la fuente está bien, así que voy a moverlo hacia el lado izquierdo. Déjame acercar. Es el relleno superior va a ser de 38 píxeles, y es el relleno izquierdo debe ser de 24 píxeles como este. Entonces vamos a duplicarlo, moverlo hacia abajo, y aquí voy a escribir el título de esta tarjeta. Digamos que estas tarjetas son para un recuento de empresas, así que voy a escribir empresa, y vamos a disminuir el tamaño de fuente a 18 puntos. Bastante bien, y el encabezamiento superior va a ser de tres píxeles como éste. Entonces vamos a añadir otra capa de texto para la fecha de caducidad de esta tarjeta, y voy a escribir 01/2020. Hagámoslo un regular, y también voy a cambiar el tamaño de la fuente a 14 puntos, y vamos a cambiar el color a blanco también. Ahora tenemos que alinearlo. Es relleno izquierdo debe ser de 24 píxeles y su relleno inferior debe ser de 72 píxeles, así. Duplicarlo, muévelo hacia abajo, y aquí necesitamos escribir el número de tarjeta. Voy a usar estrellas para los primeros 12 dígitos como este, y para los últimos cuatro dígitos vamos a escribir 2204, y su relleno superior debe ser de 14 píxeles como este. El último que necesitamos agregar a estas tarjetas es el logotipo de la MasterCard. Voy a seguir adelante y colocar una imagen, y desde la carpeta del logotipo, voy a elegir el logotipo de MasterCard. Vamos a colocarlo aquí, fantástico. Voy a moverlo hacia abajo, y es relleno inferior debe ser de 32 píxeles, y el relleno correcto debe ser de 22 píxeles, así. Ahora todo está genial. Sigamos adelante y seleccionemos todos estos elementos porque necesitamos agruparlos y llamémoslo MasterCard. Lo último que tenemos que hacer es agregar una sombra gota a estas tarjetas. Yo lo voy a abrir, y vamos a elegir el rectángulo que es nuestra tarjeta base, y vamos a añadir efectos a esto. Sombra suelta, voy a fijar la cantidad a 49 y el blanco a nueve, y luego cambiemos el color a 5988 y F8 así, y vamos a disminuir la opacidad al 20 por ciento, fantástico. Como puedes ver, acabamos de crear nuestra primera carta, que es la principal. Es el relleno superior va a ser de 16 píxeles, perfecto, ahora es el momento de crear nuestra tarjeta secundaria. Voy a duplicar este, luego voy a elegir la herramienta de escala y la voy a escalar de esta manera. Creo que el ancho 177 es una dimensión perfecta para esto. Voy a moverlo hacia el lado derecho, el relleno izquierdo debe ser de 24 píxeles, y recuerda alinearlos verticalmente así. ¿ Qué vamos a cambiar por estas tarjetas? El primero que es el más importante es el fondo. Voy a eliminar todos estos gradientes porque vas a tener un color blanco sólido, entonces vamos a seleccionar todas las capas de texto, y voy a establecer el código de color en 3A3A y 3A. Entonces voy a cambiar estas cantidades a 4,000 así, y también esta empresa se lleva a casa. El último que necesitamos cambiar es el color de nuestra sombra de gota. Voy a seleccionar este rectángulo 14, y vamos a modificar el color a negro. No obstante, con un 10 por ciento de opacidad, ahora se ve genial. Ahora es el momento de crear nuestra sección de transacciones recientes. En primer lugar, voy a tener un título. Eso es escribir, transacciones recientes. Voy a aumentar el tamaño de la fuente a 22, va a ser calva y la fuente debe ser Montserrat, así que todo es perfecto excepto el código de color. Voy a cambiarlo a 3A3A y 3A, así, entonces vamos a alinearlo. Es relleno izquierdo debe ser de 30 píxeles, así, y además nos olvidamos de revisar el relleno izquierdo de estas tarjetas así que vamos a seleccionar ambos. Como puedes ver, el relleno izquierdo está establecido en 32 píxeles, voy a hacerlo 30, ahora es genial. ¿ Qué necesitamos aquí? Necesitamos crear tres transacciones diferentes con título, precio, y un icono. En primer lugar, vamos a crear otra capa de texto. Supongamos que la primera transacción está relacionada con las compras. Voy a escribir compras, vamos a seleccionarlo y voy a hacerlo regular, y también, vamos a disminuir el tamaño de la fuente a 18 puntos. Voy a cambiar el código de color a 3A3A y 3A así. Duplicarlo y moverlo hacia abajo, y ahora necesitamos anotar la hora y fecha exactas para esta transacción. Escribamos 15 marzo 2019, y escribamos 8:20pm, y luego disminuyamos el tamaño de fuente a 16 puntos, y también el código de color a BFBF y BF así. Creo que es mejor disminuir el tamaño de la fuente a 12 puntos tal vez. Sí, es genial, y el encabezamiento superior debe ser de cuatro píxeles, así que ahora todo está genial. Entonces, ¿qué más necesitamos? Necesitamos un icono a la derecha de la izquierda, así que voy a seguir adelante y crear un círculo como este. Debe ser de 48 por 48 píxeles, y luego cambiemos el código de color a FFCF y 87, fantástico. Después de eso, voy a traer el ícono específico que ya preparé para ti, iconos. Aquí transacciones, tenemos cuatro iconos diferentes, pero para la pantalla sólo necesitamos tres. Escogamos ir de compras y colocarlo aquí. voy a alinear vertical y horizontalmente. No obstante, a veces necesitas alinear tus elementos manualmente para conseguir un gran equilibrio visual. Voy a moverlo hacia arriba por dos píxeles, y ahora creo que se ve genial. Entonces vamos a agruparlo, y voy a llamarlo icono de compras. Entonces agruparemos estas dos capas de textos y alinémoslo verticalmente con tu ícono. El relleno izquierdo de estos grupos de texto debe ser de ocho píxeles como este. ¿ Qué más necesitamos? Necesitamos tener la cantidad aquí mismo y también una flecha pequeña. Voy a seleccionar estas capa de texto, copiarla y pegarla, luego la voy a mover fuera de este grupo, tal vez hacia el lado derecho. Cambiemos el tamaño de fuente a 16 puntos, y recuerda alinearlo al lado derecho, te voy a mostrar por qué. Escribamos menos 120 dólares. Alinémoslo con tu grupo de texto así, y después de eso, voy a necesitar una flecha pequeña. Vamos a colocarlo. Tenemos flecha pequeña aquí. No obstante, necesitamos cambiar su color a C7C7 y C7 así. Recuerda cuando quieras cambiar el color, debes seleccionar la forma no esta no. Aquí está la forma. Si desea obtener acceso a la forma fácilmente, puede mantener presionada la tecla Comando en su teclado o la tecla Control si está utilizando Windows. Entonces alinémoslo con este texto. Es el relleno correcto va a ser de 30 píxeles, y el relleno correcto de estas cantidades debe ser de 16 píxeles como este. Todo es genial. Seleccionemos todos estos elementos, agruparlos y lo llamemos compras. El relleno superior de esta transacción debe ser de 12 píxeles así, entonces vamos a duplicarlo, moverlo hacia abajo, y la distancia entre ellos debe ser de 16 píxeles como este. Vamos a renombrarlo a Medicina, y éste va a estar relacionado con los sonidos de la medicina. Cambiemos este título a Medicina, y también necesitamos cambiar el tiempo. Voy a escribir 13 marzo, 2019, y cambiémoslo a 12:00 y 10:00am. El monto debe cambiarse a $89.50. El motivo por el que te dije que necesitas alinear esta capa de textos al lado derecho es porque cuando estamos cambiando la cantidad, estas capas de texto deberían crecer desde el lado izquierdo no hacia el lado derecho. Entonces finalmente, elijamos el círculo y voy a cambiar el color a E09, y FFF. Quitemos este ícono, y voy a colocar el ícono de medicina de estas carpetas de transacciones, ponerlo aquí, y lo voy a alinear con mi círculo, tanto horizontal como verticalmente. Recuerda poner estos ícono de medicina dentro de estos grupos de medicina. Ahora duplicemos esta transacción, y la voy a cambiar por deporte, entonces cambiemos la hora al 10 de marzo de 2019, y la hora debe ser 6:50pm. Entonces cambiemos la cantidad a 99.90. Después de eso, eliminemos este ícono, elijamos este círculo y cambiemos el color de fondo a 87F0 y FF, y coloquemos su ícono específico, deportivo, colóquelo aquí y alinéelo con tu círculo tanto horizontal como verticalmente. Entonces recuerda renombrar a tu grupo también a los deportes. Muy bien todo el mundo, diseñamos con éxito nuestra pantalla de tarjetas juntos. Lo último que tenemos que hacer es cambiar el nombre de este tablero de arte a tarjetas, y eso es todo por este video. Espero que lo hayas disfrutado, y te veo en el siguiente video. 86. Página de transacciones: Hola a todos, y bienvenidos de nuevo a otro video de este curso. En este video, vamos a diseñar juntos nuestra pantalla de transacciones. Sin más yo, empecemos. En primer lugar, déjame acercar un poco y luego voy a insertar una nueva mesa de trabajo. Presionemos A en mi teclado y usemos iPhone 11 Pro o X. Bastante bien. Déjame moverlo al lado izquierdo. Fantástico. ¿Qué necesitamos para esta página? En primer lugar, necesitamos un encabezado, con una barra de navegación en la parte superior, y luego necesitamos algunas capas de texto. Después de eso necesitamos crear una tarjeta flotante justo en la parte inferior para nuestras transacciones. Vamos a seguir adelante y crear un rectángulo. Voy a arrastrar y soltar, asegúrate de que estos rectángulo estén dentro de tu mesa de trabajo. Ahora vamos a renombrar nuestra mesa de trabajo a transacciones. Bastante bien. Entonces voy a seleccionar este rectángulo y vamos a establecer la altura a 245 así. Voy a hacer doble clic en eso para poder entrar al modo de edición. Seleccionemos estos dos nodos inferiores porque voy a aumentar el radio de esquina a 62. Demos click en “Hecho”. Después de eso voy a suavizar esos rincones. Fantástico. Ahora sigamos adelante y cambiemos el relleno. En realidad voy a usar el mismo gradiente que este rectángulo. Adelante Copiar, Propiedades, y voy a hacer clic aquí y pegarlo. Bastante bien. Ahora vamos a copiar y pegar la barra de estado. Voy a copiar esto, pegarlo aquí, bastante bien. Ahora es el momento de crear nuestra barra de navegación. Para la navegación donde necesitamos un título, así que insertemos una capa de texto y escribamos transacciones. El tipo de letra va a ser SF Pro Text y el tamaño de fuente debe ser de 17 puntos y negrita. Entonces vamos a seleccionarlo y hacerlo blanco así. Alinearlo con el centro. También alinémoslo aquí. Ahora mismo, vamos a revisar los remeros. Dejó de rellenar hasta que este marco, que es nuestra barra de estado, debe ser de cinco píxeles como éste. El único que necesitamos agregar para poder terminar nuestra barra de navegación es una flecha de retroceso. Adelante y coloquemos una imagen. Desde iconos puedes insertar este icono de Flecha Nav. Colóquelo aquí. Bastante bien. Ahora alinémoslo con nuestro texto verticalmente así. Una vez más, necesitamos establecer el relleno superior en tres esta vez no en cinco, y el relleno izquierdo debe ser de 24 píxeles, así. Bastante bien. Voy a agruparlos y vamos a escribir barra de navegación. También puedes crear un componente si quieres usarlo una y otra vez. Como puedes ver en este momento tenemos un componente de barra de navegación. Bastante bien. Déjenme alejar. Para estas transacciones cabecera, necesitamos tener un título. Escribamos sus gastos totales, y voy a cambiar la fuente a Montserrat y también el tamaño de fuente a 22 puntos. Hagámoslo regular. Fantástico. Yo lo voy a alinear al centro. Cambiemos el color de la fuente a 87F0FF así, bastante bueno. Está alineado al centro. Vamos a subirlo un poco. Es relleno superior hasta que nuestra barra de navegación debe ser de 70 píxeles como este, duplicarlo, moverlo hacia abajo. Aquí necesitamos escribir el monto de nuestros gastos. En primer lugar, hagámoslo audaz. También lo voy a hacer blanco y luego vamos a aumentar el tamaño de la fuente a 28 puntos. Asegúrate de que esté alineado al centro. Aquí vamos a escribir $1,063.30 así. El relleno superior de esta cantidad debe ser de 16 píxeles, así. Bastante bien. ¿Qué más necesitamos? Voy a seguir adelante y duplicar este rectángulo. Mueve esta capa justo debajo de nuestro rectángulo principal. Voy a moverlo hacia abajo en cinco píxeles. Como puedes ver que Y está configurado en cinco ahora, y cambiemos su color a uno sólido. Voy a establecer el mismo azul que usamos para esta capa de texto. Escribamos 87F0FF, bastante bien. Nuestro encabezado está hecho y todo es perfecto. Ahora es el momento de diseñar nuestra tarjeta. Voy a seguir adelante y seleccionar este rectángulo, este azul, duplicarlo, moverlo hacia abajo. Entonces voy a hacer clic aquí, y volvamos verticalmente así. Bastante bien. Establezcamos la altura en 541 así y alinémosla al fondo. Bastante bien. Lo único que voy a cambiar es la dirección de estos gradientes. Voy a cambiar el lugar de estos dos colores así. Ahora todo está genial. Entonces necesitamos tener un indicador de inicio, así que sigamos adelante y copiemos y peguemos este blanco. Bastante bien. Después de eso, necesitamos crear un indicador que muestre que esta tarjeta es móvil. Voy a seguir adelante y crear un rectángulo, arrastrar y soltar así. Voy a establecer el ancho a 47 y la altura a cuatro, así. Voy a hacer que sea redondeado por completo, que sea blanco. Fantástico. Después de eso, alinémoslo al centro. El relleno superior debe ser de 16 píxeles, exactamente así. Entonces necesitamos tener una barra de búsqueda, así que en lugar de usar algunas barras de búsqueda prefabricadas, voy a mostrar cómo puedes diseñar tu propia barra de búsqueda personalizada. Es tan sencillo. Para una barra de búsqueda, necesitamos un rectángulo. Voy a arrastrar y soltar así. Vamos a establecer el ancho a 315 y una altura a 53. Entonces voy a establecer el radio de esquina a 16 así y asegurarme de que sean suaves. Fantástico. Alinearlo con el centro, y cambiemos el color de relleno a algo más oscuro que este fondo para crear un contraste. Escribamos 05199E. Bastante bien. Es el relleno superior debe ser de 24 píxeles. Así, y ahora necesitamos un texto y un icono. Voy a seguir adelante y colocar una imagen. Escogamos “Buscar” colocarlo aquí, y voy a alinearlo con nuestra barra de búsqueda verticalmente. Bastante bien. Su relleno izquierdo debe ser de 16 píxeles, como los remeros superior e inferior. Después de eso, necesitamos un texto. Voy a escribir búsqueda y la fuente va a ser SF Pro Rondeada. Cambiemos el color al mismo color nuestro icono de búsqueda con la ayuda de cuentagotas, bastante bueno. Alinearlo verticalmente con nuestra barra de búsqueda y es relleno izquierdo debe ser ocho ocho como este. Entonces vamos a seleccionarlos todos, agruparlos, y llamarlo barra de búsqueda. Fantástico. Ahora es el momento de sumar nuestras transacciones. Para facilitarlo, voy a seguir adelante y seleccionar estas transacciones recientes que creamos en el video anterior. Seleccionémoslos todos, copiarlos, y peguémoslo en la pantalla, muévalos hacia arriba. Bastante bien. Es el relleno superior debe ser de 24 píxeles, así. No obstante, necesitamos cambiar los colores para hacerlos visibles. Voy a seleccionar todos estos títulos, compras, medicina, y deporte, y vamos a hacerlos blancos así. Ahora vamos a seleccionar la fecha y la hora, y vamos a establecer el color a 80E0FF así. Voy a copiar este color. Entonces vamos a seleccionar estas flechas. No obstante, recuerda seleccionar la forma, no estos marco. El formato es éste. Puedes mantener pulsada la tecla Comando o la tecla Control en tu teclado y hacer clic en eso. Seleccionémoslos a todos. Voy a pegar el código de color que acabamos de copiar así. último pero no menos importante, necesitamos seleccionar estas cantidades X y hacerlas blancas. Ahora se ve genial. Ahora necesitamos agregar algunas transacciones más a esta tarjeta. Vamos a seguir adelante y seleccionar esta transacción de compra, duplicarla, moverla hacia abajo así, y asegurarnos de que su relleno superior esté establecido en 16 píxeles. Cambia el día al 5 de marzo, así, y el tiempo a algo así como 7:20 y la cantidad a 255 dólares, bastante buena. Una vez más, duplicarlo, muévelo hacia abajo, y esta vez lo voy a hacer diferente. Vamos a seguir adelante y renombrarlo para viajar. También cambiemos este título para viajar también, y el monto debe ser de 399 dólares. Cambiemos la fecha al 3 de marzo y el tiempo a 5:50. Bastante bien. Lo último que necesitamos cambiar es este ícono. Eliminemos estos ícono de compras, seleccionemos este círculo y cambiemos el campo a FF8787, así. Voy a colocar una imagen de transacciones. Aquí tenemos viaje, ponlo aquí y alinémoslos al centro así. Cambiemos el nombre de este ícono para viajar. Bastante bien. La última transacción debe ser deportiva, así que la voy a duplicar. Si quieres cambiarlos, Depende totalmente de ti. Puedes seguir adelante y cambiar los pedidos, las cantidades, los colores. Se puede jugar con esta pantalla con el fin de acostumbrarse a este software y al proceso de diseño de una pantalla. El monto debe ser el mismo, sin embargo, necesitamos cambiar la fecha. Voy a hacerlo el 10 de febrero, y el tiempo a las 5:20 así. Bastante bien. Entonces sigamos adelante y seleccionemos todas las transacciones, agruparlas, y llamémoslo transacciones así. Ahora todo está hecho. Chicos, eso es todo por este video. Espero que lo hayas disfrutado y te veo en el siguiente video. Nos vemos entonces. 87. Página de transacciones detalladas: Hola a todos. Bienvenido de nuevo a otro video de esta sección. En este video, vamos a diseñar juntos nuestra pantalla de detalles de transacciones. En primer lugar, voy a seguir adelante y duplicar estas transacciones mesa de trabajo. Entonces vamos a renombrarlo a las transacciones dash detail. Bastante bien. Entonces lo que vamos a hacer es realmente deslizar estas tarjetas hacia abajo y luego presentar algunos detalles sobre estas transacciones. Lo que voy a hacer es en primer lugar, agrupar por completo estos elementos. Seleccionemos estos indicadores, la tarjeta en sí, la barra de búsqueda, y estos grupos de transacciones. Agruparlos. Llamémoslo tarjeta, muévala justo debajo de nuestro indicador de inicio. Entonces pongamos la y en 693, así. Aquí vamos a colocar nuestros detalles. Primero lo primero, sigamos adelante y seleccionemos estas recientes transacciones toma. Voy a copiar eso, pegarlo aquí. Vamos a subirlo y lo voy a cambiar para rastrear sus gastos. Es el relleno superior va a ser 32 píxeles como este y es el relleno izquierdo debe ser de 30 píxeles. Déjame seleccionar esta pantalla, presiona Shift y 2 así. Ahora, ¿qué más necesitamos? En realidad, tenemos cuatro categorías diferentes. Viajes, compras, deporte, y medicina. Necesitamos cuatro tarjetas diferentes con cuatro colores diferentes con el fin de que algunos hasta estas cantidades. Vamos a seguir adelante y crear un rectángulo. Voy a arrastrar y soltar así. Voy a establecer el ancho en 153 y la altura en 103. Entonces aumentemos el radio de esquina a 25 y también lo haremos suave así. Fantástico. Por último, necesitamos cambiar el color. Voy a usar un gradiente lineal para estos. Seleccionemos el primer color y cambiemos el código de color a FF8787. Seleccionemos el segundo. Aumentar la opacidad al 100 por ciento. Voy a cambiar el código de color a C16A6A, así. Después de eso, cambiemos la dirección un poco así. Ahora creo que es bastante bueno. ¿ Qué más necesitamos incluir en estas tarjetas? Necesitamos dos capas de texto. El nombre de estas tarjetas que va a ser viaje y el monto total relacionado con esta categoría. En primer lugar, insertemos una capa de texto y escribamos viaje y lo voy a hacer regular. Disminuyamos el tamaño de la fuente a 18 puntos como este. Voy a cambiar el color a A73131 así. Bastante bien. Es el relleno superior va a ser de 24 píxeles y es el relleno izquierdo debe ser de 16 píxeles como este. Duplicarlo, muévelo hacia abajo. Hagámoslo audaz. También aumentemos el tamaño de la fuente a 24 puntos. Fantástico. Aquí necesitamos escribir el monto total de todas las transacciones de viajes que es de $399. Bastante bien. Ahora voy a añadir más detalles a esta tarjeta con el fin de que sea un poco mejor. En primer lugar, sigamos adelante y creemos un círculo como este. Voy a establecer el ancho y la altura en 112. Entonces elijamos un gradiente lineal para esto. Voy a elegir el primer color y vamos a cambiarlo a F78C8C así, copiar esto pegarlo para el segundo. No obstante, esta vez mantenga la opacidad a cero. Entonces voy a cambiar el lugar de estos dos colores así. Cambiemos la dirección de este color así y ahora necesitamos usar una máscara. No obstante, como mencioné antes cuando estás usando una máscara, es mejor duplicar este rectángulo una vez y voy a mover este círculo justo debajo de nuestro viaje. Elige la capa duplicada y haz clic en desenmascarar para conseguir algo como esto. Entonces vamos a seguir adelante y seleccionar el círculo y moverlo hacia abajo un poco como esto.t' Eso es bastante bueno. Ahora agrupemos nuestros elementos. Voy a elegir este grupo de masas, este viaje y es cantidad, y también nuestro rectángulo. Agruparlos, llámenlo viajar, duplicarlo, muévelo hacia el lado derecho y es relleno izquierdo debe ser de nueve píxeles como este. Entonces vamos a seleccionar ambos, moverlos hacia el lado izquierdo hasta obtener un relleno izquierdo de 30 píxeles y un relleno derecho. Ahora, sigamos adelante y elijamos este Rectángulo 20 y voy a cambiar su color a otra cosa. Escojamos el primer color. Voy a ponerlo a FFCF87 así. El segundo va a ser el CA9547. Bastante bien Ahora elijamos este círculo y cambiemos el color del degradado aquí también. Voy a seleccionar el primer color y va a ser F6C57A. Copiemos esto y peguémoslo para tu segundo color también. último, pero no menos importante, necesitamos seleccionar estas dos tomas y cambiar su código de color a A27430. Déjame cambiar el título a compras y el monto va a ser de 375 dólares. Por último, recuerda cambiar tu nombre. Voy a escribir compras. Ahora les voy a pedir que paren el video y sigan adelante y duplicen una de estas tarjetas, pongan aquí mismo, y les voy a pedir que lo modifiquen para nuestra tarjeta deportiva. El monto va a ser de 199.80. Te voy a dar una pista así es como podrías elegir estos colores. Tiene que ser algo así como el azul como puedes ver para este ícono del deporte. Entonces te voy a mostrar cómo pudiste hacer eso. Vamos a pausar el video ahora mismo y hazlo tú mismo. Estoy bastante seguro de que podrías hacerlo tú mismo. No obstante, ahora es el momento de hacerlo juntos. Ahora, vamos a seguir adelante y duplicar estas primera tarjeta. Voy a moverlo hacia abajo. Es el relleno superior va a ser de nueve píxeles. Seleccionemos estos Rectángulo 20 que es nuestra capa base. Voy a cambiar el gradiente. Eligamos el primer color y lo pongamos en 87F0FF, así. Elige el segundo y escribe 3AA2B1. Yo también voy a elegir este círculo. Cambiemos su color. Voy a seleccionar el primero y vamos a ponerlo 73BCEB copiar esto y pegarlo para el segundo color también. Ahora voy a elegir nuestras capas de texto y cambiar el relleno a 298693. Cambiemos el título a deporte. Puedes ver que aquí tenemos un gran contraste porque con este círculo, creamos un fondo brillante y estamos usando un color más oscuro contra este fondo. Lo cual es una manera bastante buena para crear una buena relación de contraste. Entonces cambiemos la cantidad a 199.80. Voy a renombrar a este grupo por deportes. Vamos a duplicarlo, moverlo al lado derecho, y voy a elegir estos Rectángulo 20. Cambiemos el color. Voy a elegir el primero y vamos a escribir E09FFF y el segundo va a ser 8A46AB, así. Escojamos nuestro círculo y cambiémoslo también. Voy a elegir el primer color y vamos a escribir D88FFF. Copiemos esto y peguémoslo para el segundo color. Por último, vamos a utilizar nuestras capas de texto y establecer el código de color en 9137BC. Voy a cambiar el título a medicina. El monto va a ser de 89.50. Por último, vamos a renombrarlo a medicina. Fantástico. Necesitamos una tarjeta más aquí, que es nuestra tarjeta de reembolso de tarjeta de crédito. Sigamos adelante y elijamos estos chequea tu tarjeta de cuentas bancarias. Copia esto, pegarlo aquí. Entonces voy a seleccionar este rectángulo, Rectángulo 7, recuerda eso y también Rectángulo 6 que es nuestra máscara. Cambiemos la altura a 105 así. También necesitamos cambiar el radio de esquina a 25 que es la misma cantidad que usamos para estas tarjetas. Entonces déjame acercar. Voy a alinear este texto con mi rectángulo así. También esta pequeña flecha va a estar al centro. Usemos estos dos círculos y movelos hacia arriba para conseguir algo como esto. Cambiemos este texto a reembolso con tarjeta de crédito, así. Cambie el nombre a reembolso de tarjeta de crédito Rand vamos a moverlo hacia abajo. Va a tener un relleno superior de 16 píxeles. Eso es todo por este video. Espero que lo hayas disfrutado y te veo en el siguiente video. Nos vemos entonces. 88. Página de transferencia: Hola a todos y bienvenidos de nuevo a otro video de este curso. En este video, vamos a diseñar juntos nuestra pantalla de transferencia. Sin más preámbulos, empecemos. En primer lugar, voy a seguir adelante y duplicar esta pantalla de detalles de transacciones así. Entonces vamos a renombrarlo para transferirlo. Perfecto. Después de eso voy a quitar casi todos los elementos. Vamos a seguir adelante y seleccionar estas tarjetas, quitarlas, ésta también, estas dos capas de textos también. No obstante, necesitamos el indicador de inicio. Vamos a copiar y pegar estos negros. Vamos a copiarlo y pegarlo aquí. Bastante bien. Entonces también necesitamos tener nuestra barra de navegación. Lo que voy a hacer es seleccionar estos dos rectángulos, rectángulo 15 y 16, agruparlos, y pongamos la Y en menos 141. Fantástico. Cambiemos este título a “Transferir”. Bastante bien. ¿Qué más necesitamos para estas páginas? En realidad, necesitamos tener una capa de texto, así que insertemos aquí una capa de texto. Voy a escribir “Introducir cantidad” así. Entonces pongamos la fuente a Montserrat. Fantástico. Voy a hacerlo regular. Además, cambiemos el tamaño de fuente a 18 puntos. Bastante bien. Alinémoslo al centro, y luego cambiemos el color a 2743 y FD. Fantástico. Es el relleno superior va a ser 75 píxeles como este. Entonces vamos a duplicarlo, moverlo hacia abajo. Voy a acercar. Aquí, necesitamos tener la cantidad. Voy a escribir $0 y hagámoslo audaz. Además, voy a cambiar el tamaño de fuente a 36 puntos. Bastante bien. Entonces necesitamos cambiar el color de este dígito, porque ahora el usuario aún no ingresó ninguna cantidad. Vamos a cambiarlo a B6BFFF, fantástico. Alinearlo al centro y su relleno superior va a ser de 16 píxeles, así. Entonces necesitamos un separador. Voy a seguir adelante y crear una línea como esta. Establezcamos el ancho en 224, alinéelo al centro. Cambiemos el trazo a DE, E1, y EF, así, bastante bueno. Es el relleno superior va a ser de 16 pixeles, fantástico. Una vez más, duplicemos esta capa de texto “Introducir cantidad”, muévala hacia abajo. Voy a escribir dos, y el relleno superior debe ser de 16 píxeles también. Entonces vamos a duplicarlo una vez más. Aquí necesitamos escribir el nombre del receptor. Escribamos Grace Addison y un tamaño de fuente debe ser de 16 puntos. No obstante, necesitamos cambiar el color a 3A, 3A, y 3A, bastante bueno. Necesitamos tener una imagen de perfil de este usuario también. Vamos a seguir adelante y seleccionar esta imagen de perfil, copiar esta, y pegarla aquí. Bastante bien. Muévelo hacia abajo. Entonces yo también voy a elegir la báscula. Puedes presionar K en tu teclado para seleccionarlo y escalarlo para obtener una imagen de perfil de 34 por 34 píxeles. Voy a hacerlo 34 por 34. Fantástico. Déjame moverlo aquí. El relleno correcto de esta foto va a ser de ocho píxeles. Entonces elijamos la capa de texto y la voy a alinear verticalmente. Bastante bien. No obstante, necesitamos cambiar esta foto. Voy a hacer doble clic en eso para elegir esta foto. Entonces sigamos adelante y ejecutemos nuestro contenido Plugin real. Bastante bien. Vayamos a Avatares y aquí voy a dar click en Femenino, fantástico. Ahora, agrupemos nuestra capa de texto y nuestra imagen de perfil , alinéela al centro y su relleno superior va a ser de 16 píxeles. Bastante bien. El siguiente que necesitamos crear es nuestro numpad. Voy a crear un rectángulo y vamos a establecer el ancho a 89 y el alto a 70, así, y voy a cambiar el radio de esquina a 17. No obstante, asegúrate de suavizar esas esquinas con este deslizador. Fantástico. Después de eso, necesitamos cambiar el color de fondo. Escribamos F5, F6, y F8. Bastante bien. Déjame acercar. Aquí, necesitamos insertar una capa de texto, así que voy a escribir una. No obstante, necesitamos cambiar la fuente a SF Pro Text, así, hacerla mediana y un tamaño de fuente debe ser de 24 puntos. Por último, cambiemos el color a 27, 43, y FD, bastante bueno. Voy a alinearlo al centro, tanto vertical como horizontalmente, y asegurarme de que tu capa de texto esté alineada al centro también aquí. Entonces vamos a agruparlos. Voy a llamarlo uno, duplicarlo, moverlo al lado derecho. La distancia entre ellos va a ser de 10 píxeles. Vamos a duplicarlo una vez más, seleccionarlos todos, duplicarlos, moverlos hacia abajo, bastante bien, una vez más y una vez más. Fantástico. Entonces sigamos adelante y cambiemos estas capas de textos uno por uno. Serán dos, tres, cuatro, cinco, seis, siete, ocho, nueve. Este va a ser un punto. Aquí vamos a tener 0 y el último va a ser cambiado. Quitemos esta capa de texto. Voy a seleccionarlos a todos, agruparlos, y llamémoslo numpad, fantástico. Alinearlo al centro y vamos a subirlo un poco. Para éste primero, voy a cambiar su color porque este es nuestro botón Enviar. Voy a usar el mismo gradiente que usamos para nuestro encabezado. Escojamos este rectángulo, rectángulo 15, haga clic derecho sobre eso y copie las propiedades, así. Yo lo voy a pegar aquí. Bastante bien. Déjame acercar. Entonces necesitamos insertar un icono de flecha derecha. Colocemos una imagen. Desde la carpeta Icons, voy a elegir la flecha derecha. Colóquelo aquí. Bastante bien. Entonces sigamos adelante y escalarlo, así. Creo que ahora es genial. Alinémoslo al centro. Fantástico. Entonces vamos a cambiar el nombre de este grupo a Enviar, bastante bueno. El relleno inferior de estos bloc numérico va a ser de 74 píxeles, así, y el relleno izquierdo de la derecha van a ser de 44 píxeles. Ahora, todo está hecho. Es bastante increíble; ¿no? Chicos, eso es todo por este video. Hemos creado con éxito nuestra página de transferencia juntos. Espero que lo hayas disfrutado y te veo en el siguiente video. 89. Página de confirmación: Hola a todos, y bienvenidos de nuevo a otro video de este curso. En este video, vamos a diseñar juntos nuestra pantalla de confirmación, así que sin más preámbulos, empecemos. En primer lugar, voy a seguir adelante y duplicar esta mesa de trabajo de transferencia, bastante buena. Vamos a renombrarlo a Confirmación, fantástico. Aquí, voy a cambiarlo a Transacción, así, y necesitamos quitar este numpad. No obstante, mantengamos esta foto porque necesitamos eso, y también voy a seguir adelante y quitar esta cantidad, este separador y esta capa de texto también. Entonces cambiemos esta capa de texto a, “Has enviado exitosamente 99 dólares a Grace Addison”, así. Entonces voy a redimensionar un poco esta capa de texto, alinearla al centro, vamos a hacerla más pequeña, bastante buena, y luego voy a seguir adelante y cambiar el tamaño de altura a 27. Una vez más, alinearlo al centro. Voy a acercarme, bastante bien, y luego vamos a seleccionar este nombre y ponerlo en negrita, así. Después de eso, necesito un ícono verde de tic, así que sigamos adelante y coloquemos una imagen. Aquí tenemos Hecho, vamos a colocarlo. Voy a mover esta capa de texto hacia abajo y el relleno superior de este icono Done va a ser 108, así que vamos a mover estos dos elementos hacia abajo. El relleno superior de esta capa de texto va a ser de 16 píxeles como este. Después de eso, voy a elegir esta imagen de perfil y vamos a utilizar la herramienta Escala y escalarla un poco y voy a establecer el ancho y la altura en 78 por 78 píxeles, fantástico. Aquí, voy a tener el indicador circular sobre el estado de este usuario, así que sigamos adelante y seleccionemos este indicador verde, copie esto, y lo voy a pegar aquí, moverlo hacia abajo, después asegúrate de que tengas escogió la Escala también, y voy a escalarla y pongámosla en 80 por 80 píxeles así. Vamos a alinearlo con tu imagen de perfil, fantástica, agruparlos, y llamémoslo imagen de perfil. Yo lo voy a alinear con el centro y su relleno superior va a ser de 40 píxeles, así, bastante bueno. Entonces necesitamos colocar aquí dos botones diferentes, el botón Ejecutar otra vez y un botón de confirmación. Vamos a seguir adelante y copiar y pegar este botón Verificar desde nuestra página de verificación OTP. Voy a copiar esto, pegarlo aquí, moverlo hacia arriba, y cambiémoslo a Ejecutar de nuevo, bastante bien. Asegúrate de cambiar el nombre de este grupo también, Ejecutar de nuevo. Su relleno superior va a ser de 100 pixeles, así y para el botón de confirmación, voy a elegir el botón de registro de nuestra pantalla de bienvenida, copiar esto, pegarlo aquí. Voy a moverlo hacia abajo así, entonces vamos a quitar esta flecha derecha. Después de eso, voy a seleccionar esta capa de texto y nuestro grupo de masas, alinearla al centro así y cambiemos este texto a Confirmación, fantástico. Una vez más, alinearlo al centro y aquí también. Por último, vamos a renombrar el grupo Confirmación y el relleno superior va a ser de 16 píxeles, bastante bueno. Muy bien, chicos, eso es todo por este video. Hemos creado con éxito nuestra página de confirmación juntos. Espero que lo hayas disfrutado y te veo en el siguiente video. 90. Página de notificación: Hola a todos. Bienvenido de nuevo a otro video de este curso. En este video, vamos a seguir adelante y diseñar nuestra página de notificaciones. Vamos a seguir adelante y duplicar esta pantalla de confirmación luego eliminar todos los elementos. Vamos a renombrarlo a notificación. Bastante bien. ¿Qué necesitamos para esta página? En primer lugar, necesitamos tener una barra de estado. Voy a seguir adelante y escoger este negro. Copiémoslo y peguémoslo aquí. Bastante bien. Entonces necesitamos estos tapper también. Voy a copiar este, seleccionar la pantalla, pegarla aquí. Pero aquí necesitamos cambiarlo de esta billetera a este icono de notificación. Voy a seleccionar este ícono de billetera. Hagámoslo el activo y elijamos este icono de notificación y hagámoslo activo así. Bastante simple, ¿no? Justo en la parte superior, necesitamos tener una barra de búsqueda. No obstante, no vamos a crear una nueva porque ya creamos nuestra barra de búsqueda personalizada. Voy a seguir adelante y elegirlo de la página de transacciones. Copia esto, pegarlo aquí, muévelo hacia arriba. No obstante, necesitamos cambiar el color de fondo de nuestra barra de búsqueda. Escojamos este rectángulo y voy a establecer el código de color en F5, F6, y FA así. Ahora vamos a revisar los remeros. El relleno superior va a ser de 24 píxeles como este y luego aquí necesitamos un título. Vamos a seguir adelante y seleccionar este seguimiento de sus gastos, Copia esto, pegarlo aquí. Voy a subirlo y cambiémoslo a que puedes revisar tus notificaciones aquí. Entonces vamos a redimensionarlo para conseguir algo como esto. Es relleno izquierdo debe ser de 30 píxeles. Es encabezamiento superior va a ser de 32 píxeles como este. Entonces, ¿qué más necesitamos? Tienes razón, necesitamos nuestros mensajes o nuestras notificaciones. Para cada notificación, vamos a tener una imagen de perfil, un nombre, y un mensaje corto. Sigamos adelante y elijamos esta imagen de perfil de nuestra página de confirmación. Voy a copiar esto y pegarlo aquí. Va a ser nuestra plantilla. Entonces voy a elegir la herramienta de báscula y hagámosla de 40 por 40 así. Bastante bien. Vamos a subirlo. Voy a acercar y aquí vamos a insertar una capa de texto y vamos a escribir nombre. Voy a hacerlo regular y también vamos a disminuir el tamaño de la fuente a 14 puntos. Bastante bien. Entonces alinémoslo con nuestra imagen de perfil así y es el relleno izquierdo va a ser ocho ocho como este. Entonces duplicarlo, muévelo hacia abajo y aquí escribamos mensaje. Nosotros lo vamos a cambiar más tarde. Voy a establecer el tamaño de fuente en 16 puntos y vamos a alinearlo con nuestra imagen de perfil así. Entonces necesitamos cambiar su color a 27, 43, y FD así. También necesitamos una flecha derecha. Voy a colocarlo de nuestro archivo de activos, usemos flecha pequeña, colóquelo aquí. Entonces voy a cambiar su color a B47 y FC así. Voy a elegir este marco, que es nuestra flecha pequeña y alinémoslo con nuestra imagen de perfil así. Es el relleno correcto va a ser de 30 píxeles como este. Bastante bien. En realidad, necesitamos un separador aquí también. Voy a crear una línea como esta. Establezcamos el ancho a 315, alinémoslo al centro, y cambiemos su color a DEE 1E y F. Su relleno superior va a ser de 16 píxeles. Bastante bien. Después de eso, voy a seleccionar todos estos elementos, agruparlos, llamémoslo mensaje. Bastante bien y luego voy a crear un componente. Demos click en este ícono. Bastante bien. Después duplicarlo, muévelo hacia abajo. Su relleno superior va a ser de 16 píxeles. Entonces lo voy a duplicar una vez más, hasta que consiga algo como esto. Ahora en lugar de escribir la información una por una, vamos a usar nuestro favorito plagando sin contenido. Vamos a correr y luego te voy a mostrar cómo puedes insertar real más adelante en un segundo. Seleccionemos esta imagen de perfil manteniendo pulsada la tecla Comando y haciendo clic en que mantenga pulsada la tecla Mayús aquí y la tecla Comando juntos y seleccionemos todas esas imágenes. Bastante bien. Vayamos a los avatares y pinchemos en masculino o femenino. Ahí vamos. ¿Viste lo fácil que es agregar contenido real a tu pantalla? Si no estás contento con las fotos, puedes hacer click fácilmente en eso y se cambiarán. Ahora tenemos que sumar nuestros nombres. No obstante, debido a que estos primero es nuestro componente maestro, primero necesitamos duplicarlo, para crear una instancia del mismo, luego eliminemos el componente maestro así y luego usemos la capa de nombre de las hembras. Voy a seleccionar este, mantenga presionado Shift, éste también y éste. Después sigue adelante y ejecuta el plugin de contenido real y en la sección de nombres, click en estos tres puntos y voy a cambiar el tipo de nombre a femenino. Puedes postularte y ahí vamos. ¿ Se puede ver lo fácil que es aplicar estos cambios? Es bastante asombroso. Ahora es el momento de seleccionar un [inaudible]. Seleccionémoslos y pinchemos en estos tres puntos. Esta vez lo voy a poner a principal y dar clic en “Aplicar” y eso es todo. El único que no podemos agregar al azar es este mensaje. Tenemos que cambiarlos uno por uno. Vamos a seleccionar estos mensajes de texto y voy a escribir Arlene sólo te manda $20 como este y el siguiente Teresa te envió $99. Fantástico. Para poder completar esta pantalla, necesitamos hacer sólo una cosa más y eso es cambiar este estatus. Como puedes ver ahora solo tenemos estado activo. Lo que voy a hacer es, por ejemplo, seleccionar este estado y cambiarlo a un estado de negocio. Voy a escribir F7, A700 así. Vamos a copiar este código de color y voy a elegir este también y éste. Vamos a pegarlo aquí y necesitamos un estado más. Usemos este y cambiémoslo a CE, CE, y CE. Copia esto y pegarlo para el segundo. Bastante bien. Este va a ser nuestro estado offline. Chicos, hemos creado con éxito nuestra página de notificaciones juntos. Espero que lo hayas disfrutado y te veo en el siguiente video. Nos vemos entonces. 91. El perfil del usuario: Hola a todos y bienvenidos de nuevo a otro video de esta sección. En este video, vamos a diseñar juntos nuestra pantalla de perfil. Sin más preámbulos, comencemos duplicando esta pantalla de notificación. Voy a renombrarlo a perfil. Entonces eliminemos estos elementos y esta barra de búsqueda también. No obstante, vamos a mantener nuestra barra de pestañas porque necesitamos desactivar este icono de notificación. Activemos estos ícono de perfil. ¿ Qué necesitamos para esta página? En primer lugar, necesitamos un título, así que voy a insertar un texto. Escribamos, perfil. Entonces cambiémoslo a Montserrat. Voy a ponerlo en negrita y cambiemos el tamaño de fuente a 40 puntos. Voy a cambiar el color a 3A, 3A, y 3A. El relleno superior debe ser de 46 píxeles y el relleno izquierdo debe ser de 30 píxeles. Entonces, ¿qué más necesitamos? En realidad, voy a ir a estas pantalla de perfil aquí, perfil completado. Déjame acercar. Aquí, voy a copiar y pegar estas dos formas. Copia esto y pegarlo aquí. Vamos a moverlas hasta abajo de la barra de estado. Voy a moverlas hacia el lado derecho. Ahora es perfecto. También necesitamos todos esos campos de texto, así que vamos a seleccionarlos, y copiarlos y pegarlos aquí. En primer lugar, voy a seguir adelante y eliminar estos iconos de tic. Entonces seleccionemos estos títulos. Fantástico. Cambiemos el color a 3A, 3A, y 3A. Además, necesitamos seleccionar el nombre de usuario, el nombre, el apellido, y la fecha de nacimiento, y cambiemos su color a 2743 y FD. Por último, necesitamos cambiar el color de nuestras líneas. Seleccionémoslas todas aquí y voy a cambiar el color del trazo a DE1EF. Necesitamos tener un botón de cierre de sesión justo en la parte inferior, así que voy a seguir adelante, y copiar y pegar el botón de cierre de sesión. Pongámoslo aquí y lo voy a agrandar. Vamos a seleccionar este rectángulo 2 y establecer el ancho en 315. Seleccionemos este botón, alinéelo al centro. Voy a seleccionar este ícono, y vamos a moverlo al lado derecho hasta que obtengas un relleno derecho de 24 píxeles. Fantástico. Su relleno inferior, va a ser de 30 píxeles. Ahora, vamos a seleccionar nuestros campos de texto. Su relleno inferior va a ser de 42 píxeles. último, pero no menos importante, necesitamos seguir adelante y seleccionar estos nombre, y nombre de usuario, y esta imagen de perfil, copiarlos y pegarlos aquí, moverlo hacia abajo. Vamos a seleccionar estas imagen de perfil. Voy a elegir la herramienta de báscula. Vamos a escalarlo hasta obtener una imagen de 64 por 64 píxeles. Su relleno izquierdo va a ser de 30 pixeles y su relleno superior va a ser de 32 pixeles. Voy a mover estos textos al lado derecho. En primer lugar, voy a cambiar estos nombre de usuario por el estado que está en línea. Voy a seleccionarlos a ambos porque necesitamos cambiar el color y la fuente. En primer lugar, vamos a establecer la fuente en SF Pro Text. El tipo de letra de este nombre va a ser de 20 puntos y debe ser medio. Para el estatus, pongámoslo a la luz y debe ser de 16 puntos. Yo me voy a mover hacia abajo. Su relleno superior va a ser de ocho píxeles. Seleccionarlos a ambos, agruparlos. Alinémoslo con tu imagen de perfil. Ahora vamos a seleccionarlos a ambos y voy a cambiar su color. Así es, 2743 y FD. Muy bien, chicos, eso es todo por este video, espero que lo hayan disfrutado. Te veo en el siguiente video. Nos vemos entonces. 92. La incorporación de páginas: Hola a todos y bienvenidos al último video de esta sección. En este video, vamos a diseñar juntas nuestras páginas de incorporación. En realidad, necesitamos diseñar tres páginas diferentes que ilustren las características más importantes de esta aplicación. Sin más preámbulos, empecemos insertando una nueva mesa de trabajo. Voy a presionar “A” en mi teclado, y elijamos un iPhone 11 Pro o X. Lo voy a colocar aquí, y cambiemos el nombre a Onboarding 1. ¿ Qué más necesitamos para esta incorporación? En realidad, necesitamos colocar el logotipo o icono de esta aplicación. En primer lugar, sigamos adelante y traedlo desde aquí. Voy a copiar esto y pegarlo. Bastante bien. No obstante, voy a quitar este título. No necesito eso. Entonces vamos a desagruparlo para conseguir un gran marco. Fantástico. Yo lo voy a alinear al centro. Su relleno superior va a ser 84, así que vamos a subirlo. No obstante, necesitamos cambiar el valor X a 167 y el valor Y a 80. Ahora, como puedes ver, tenemos un relleno superior de 80 píxeles. Hagámoslo 84, así. Ahora todo está genial. Entonces necesitamos colocar aquí una ilustración. Sigamos adelante y coloquemos nuestra ilustración. El primero va a ser el Ahorro. Colóquelo aquí. Yo lo voy a alinear al centro y su acolchado superior va a ser 45, así. Entonces aquí voy a colocar un círculo, así que vamos a crear uno. Voy a arrastrarlo y soltarlo, y luego cambiemos el código de color a F5F6 y FA, así. No obstante, asegúrate de que este círculo esté dentro de tu mesa de trabajo. Bastante bien. Quiero cambiar el ancho y la altura a 470, y vamos a establecer la X a menos 125 y la Y a 423. Bastante bien. Entonces necesitamos tener un título, una descripción, un indicador de página, y un botón Siguiente. Insertemos el texto aquí y escribamos : “Ahorra tu dinero convenientemente”. Entonces voy a cambiar la fuente a Montserrat. Va a ser negrita, y el tamaño de fuente debe ser de 24 puntos. Entonces voy a cambiar el color a 2743 y FD, y luego vamos a redimensionarlo para conseguir algo como esto. No obstante, voy a establecer la línea de altura en 36 para que sea más visible. Déjame acercar. Voy a poner la X a la 30 para conseguir un relleno izquierdo de 30 píxeles y el Y a 488. Bastante bien. Después duplicarlo, muévelo hacia abajo, y esta vez voy a cambiar la fuente a SF Pro Text, hacerlo regular, y el tamaño de fuente debe ser de 18 puntos. Entonces cambiemos el color a 7C2AFF, y luego voy a escribir : “Consigue un cinco por ciento de devolución de efectivo por cada transacción y gastarlo fácilmente”. Bastante bien. Cambiemos la altura de la línea a 28. Voy a moverlo hacia abajo. Su relleno superior debe ser de 22 píxeles como este. Ahora es el momento de crear nuestro indicador de página. Déjame acercar un poco. Necesito tener un rectángulo, así que arrastremos y soltemos para crear un rectángulo. Su ancho va a ser de 22 y su altura debe de ser de cinco, así. Hagámoslo completamente redondeado. Voy a cambiar el color a 2A46 y FF. Bastante bien. Vamos a duplicarlo, moverlo hacia el lado derecho, y el relleno entre ellos debe ser de cuatro píxeles. Consigue un círculo, cinco por cinco, luego cambiemos el color a B5BFF. Bastante bien. Una vez más, duplicarlo, muévelo hacia el lado izquierdo hasta obtener un relleno izquierdo de cuatro píxeles, agruparlos y llamarlo Indicadores. Bastante bien. Vamos a poner la X en 30 y la Y en 736. Fantástico. El último que necesitamos crear es nuestro botón Siguiente. Esperemos que podamos seguir adelante y copiar el botón de inicio de sesión. Voy a copiar esto y vamos a pegarlo aquí. Voy a moverlo hacia abajo, entonces cambiemos estos textos a Siguiente. Después de eso, voy a abrir este Grupo de Máscara. Seleccionemos este Rectángulo 1 y Rectángulo 2 sosteniendo Shift, y voy a disminuir el ancho a 153, así, y moverlo hacia el lado derecho. Fantástico. Entonces movamos nuestro texto también, y vamos a conseguir un remo de 24 píxeles a la izquierda, 24 píxeles arriba y abajo. Moveamos esta flecha derecha también hacia el lado izquierdo hasta que obtengas un relleno derecho de 24 píxeles. Bastante bien. Voy a renombrarlo a Next. Entonces pongamos su X en 192 y la Y en 702, y eso es todo. Como puedes ver, también tenemos un relleno derecho de 30 píxeles. Yo lo voy a duplicar. Quitemos esta ilustración. Voy a colocar uno nuevo. Esta vez debe ser la Caja de Seguridad, colóquela. Alinémoslo al centro, y ahora sigamos adelante y cambiemos este título a “Asegura tu dinero gratis y obtén recompensas”. Entonces vamos a cambiar el tamaño de esta capa de texto. Bastante bien. Yo también voy a cambiar esta descripción, así que vamos a escribir : “Consigue la aplicación de pago más segura de la historia y disfrútala”. Bastante bien. Obviamente, necesitamos cambiar nuestros indicadores. Seleccionemos este azul, lo movamos hacia el lado derecho, así, y seleccionemos este medio, lo movamos hacia el lado izquierdo con el mismo relleno de cuatro píxeles. Bastante bien. Eso es todo para esta página, y vamos a duplicarlo. Una vez más, voy a quitar esta ilustración. Colocemos uno nuevo, Trading. Fantástico. Yo lo voy a alinear con el centro, y aquí vamos a escribir, “Disfrutar de la negociación de acciones sin comisión”, así, y la descripción debe cambiarse a “ Invertir en línea nunca ha sido más fácil de lo que es ahora mismo”. Cambiemos nuestros indicadores. Voy a moverlo al lado derecho y vamos mover este último al medio. Bastante bien. Después de eso, necesitamos cambiar nuestro botón porque ahora necesitamos cambiarlo de Next to Get Start. En primer lugar, eliminemos esta flecha derecha. Entonces voy a seleccionar este Rectángulo 1 y Rectángulo 2, entonces vamos a aumentar su ancho a 211. Bastante bien. Voy a mover un poco estos círculos para conseguir algo así. Por último, alinemos este texto al centro y escribamos Get Start. Voy a mover un poco estos círculos, y vamos a renombrar este botón a Empezar. Chicos, eso es todo para esta pantalla también. Hemos creado con éxito 24 pantallas diferentes y has aprendido a aplicar todas las técnicas que necesitas para crear una interfaz de usuario moderna y elegante. Espero que hayan disfrutado de esta sección. Fue un largo viaje. Muchas gracias por verlo, y te veo en el siguiente video. Nos vemos ahí. 93. Introducción al proyecto de página de aterque: Oigan a todos, bienvenidos de nuevo a otra sección del curso. En esta sección, vamos a empezar a diseñar una página de aprendizaje moderna y hermosa, o una aplicación móvil ficticia llamada draft. Empezaremos primero con la creación de nuestro sistema de diseño juntos. Crearemos nuestros estilos de texto, nuestros estilos de color, y luego pasaremos al proceso de wireframing. Crearemos un wireframe de baja fidelidad con todas las secciones necesarias como sección héroe, sección de características, y luego tendremos planes de membresía como puedes ver, y sección Q&A, y finalmente, el pie de página. Después de eso, comenzaremos a diseñar juntos nuestra página de aterrizaje, diseñaremos la sección de héroes y luego diseñaremos una sección de tarjetas de crédito, la sección de estadísticas, sección apoyos, planes de membresía, etcétera. último, pero no menos importante, haremos que nuestro diseño sea interactivo agregando interacciones a nuestros elementos. Crearemos un prototipo de alta fidelidad para nuestra página de aterrizaje. Como puedes ver, tenemos diferentes animaciones, por ejemplo, aquí tenemos una transición genial para esta tarjeta de crédito entonces tendremos este efecto acordeón como este. El cartulina se expandirá y aprenderás todas estas técnicas geniales. ¿ Estás listo para empezar a diseñar tu página web? Te veré en el siguiente video. 94. ¿Qué es una página de aterrizar?: Hey, bienvenido de nuevo. En este video, vamos a hablar de las páginas de aterrizaje. Aprenderemos qué es una página de aterrizaje y cómo debe estructurarse. Bueno, ¿qué es una página de aterrizaje? Una página de aterrizaje es una página web diseñada con fines de marketing. Es la página en la que aterrizan los visitantes después de hacer clic en un enlace en un anuncio de Google, YouTube, Facebook, etc. Las páginas web suelen estar diseñadas para una variedad de objetivos. Una página de aterrizaje está diseñada específicamente para campañas de marketing, o digamos, convertir visitantes a clientes. ¿ Cuál es la diferencia entre una página de inicio y una página de destino? Bueno, en una página de inicio, puedes encontrar tantas distracciones como enlaces, imágenes, etc. Por otro lado, la página de aterrizaje está súper enfocada porque menos distracciones equivalen a una mayor tasa de conversión. ¿ Cuáles son los elementos esenciales de una página de aterrizaje? La parte más importante de una página de aterrizaje es la sección de héroes. una sección de héroes se incluye un titular, un titular de apoyo, un llamado a la acción o CTA para abreviar, etc. Dado que esta es la parte más importante de tu página de aterrizaje, debes asegurarte de diseñarla perfectamente. Entonces podemos tener las características impulsadas por los beneficios. Este es el apartado que presentamos las características más importantes del producto o del servicio. Después de eso, podemos tener comprobantes sociales o testimonios sociales. Por último, podemos tener un argumento de cierre. Este es un buen lugar para otro CTA. Podrás tener diferentes secciones en función del tipo de tu página de destino. Echemos un vistazo a una página de aterrizaje bien diseñada en Dribbble y lo analicemos. Esta página de aterrizaje está diseñada por Martin Strba, espero pronunciar su nombre correctamente. Como puedes ver, comienza con la sección de héroes. Aquí tenemos un titular grande y claro. Por cierto, siempre debes usar el estilo de texto H1 para nuestro titular principal. Hablaremos de ello más tarde. Después tenemos un llamado a la acción o CTA, empieza con tu asesor de riesgos. También tenemos una barra de navegación en la parte superior y aquí tenemos una imagen. Si te desplazas un poco hacia abajo, tendremos los tres beneficios más importantes de este producto: analizar, predecir, decidir. Entonces tendremos algunas soluciones, cómo funciona, algunos testimonios, otro llamado a la acción, y finalmente, un pie de página. Es así como se estructura una típica página de aterrizaje. Muy bien, chicos. Espero que ahora tengas una mejor comprensión de las páginas de aterrizaje. Espero que lo hayas disfrutado, y te veré en el siguiente video. 95. Cómo configurar tu proyecto: Hola ahí. En este video, vamos a configurar nuestro proyecto y luego empezaremos a diseñar juntos nuestra página de aterrizaje. En primer lugar, abre Figma y voy a dar clic en este icono más en la esquina superior derecha para crear un nuevo archivo. Si no ves estos dos iconos, es porque estás en una sección de Drafts, y eso está totalmente bien. Aquí no hay diferencia porque ahora mismo estoy en un equipo del curso de Diseño, así que por eso tengo estos dos iconos adicionales. Pero si estás en la sección Borradores o en la sección Recientes, solo tienes que hacer clic en este icono más para crear un nuevo archivo. Vamos a dar click en eso. Ahí vamos. Voy a ponerle nombre, página de aterrizaje. Bastante bien. ¿Qué necesitamos para este proyecto? En primer lugar, vas a crear nuestra guía de diseño. Va a incluir nuestros estilos de tipografía y nuestros estilos de color. Voy a presionar “A” en mi teclado para crear una mesa de trabajo. Cuando presiono “A” en mi teclado, se seleccionará esta herramienta de marco y voy a hacer clic y arrastrar así para crear un marco. Voy a hacerlo más grande un poco. Ahora voy a cambiar el relleno a F2F6FF para conseguir este azul muy claro como nuestro fondo. Entonces lo voy a nombrar, guía de diseño. Bastante bien. Esta guía de diseño va a tener dos secciones diferentes, tipografía y colores. Voy a seleccionar la “herramienta Rectángulo” en la parte superior y hacer clic y arrastrar para crear un rectángulo como este. Voy a hacerlo blanco así y déjame hacerlo redondeado. Voy a aumentar el radio de esquina a 30. Fantástico. Ahora, vamos a agregarle algo de sombra de gota. Vamos a agregarle un efecto. Ahí vamos. Por defecto, está configurado para soltar sombra. Voy a cambiar un poco su configuración. En primer lugar, voy a cambiar el color a 16194F. Fantástico. Entonces voy a ajustar la cantidad de desenfoque a 100 e Y a 50. Bastante bien. Por último, permítanme disminuir la opacidad del 25 por ciento al 10 por ciento. Se ve increíble, ¿no? Ahora, déjame decirte por qué elegí estas cantidades. Si no estás seguro de cómo establecer estas cantidades, por ejemplo, el desenfoque, el Y, siempre puedes usar la fórmula que uso y funciona casi todo el tiempo, y es tan simple. Solo necesitas tomar la cantidad de desenfoque y dividirla por 2. Por ejemplo, aquí usé 100 y aquí incluso puedo escribir 100/2 para dividirlo por 2. En este caso, obtendrás una sombra de gota muy buena y suave. Esto es exactamente lo que quería. Déjame hacerlo más grande un poco y luego voy a seleccionar la “Herramienta de texto”. Voy a presionar “T” en mi teclado y hacer clic aquí. Permítanme disminuir un poco el tamaño por ahora también, por ejemplo, 36. Aquí, voy a escribir topografía, bastante bien. Para este proyecto, voy a utilizar un Google Font, que se llama Roboto. Está disponible por defecto en Figma, por lo que no es necesario instalarlo. Déjame cambiar el peso de negrita a mediana y además voy a disminuir el tamaño de fuente de 36-24 puntos como este. Ahora, voy a duplicarlo, “Comando D” o “Control D” en tu teclado. Voy a moverlo hacia abajo. Déjame acercar. Si quieres acercar, puedes mantener presionada la tecla “Comando” o “Control”, y al mismo tiempo, puedes usar la rueda del ratón. Aquí, vamos a escribir el encabezamiento H1 60 negrita. Voy a seleccionar eso y hagámoslo audaz. Para este rubro H1, voy a elegir el tamaño de fuente de 60. Déjame escribir 60 aquí. Bastante bien. Voy a alejarme un poco y asegurarme de cambiar la altura de la línea. El alto de línea aquí por defecto está configurado en auto, pero asegúrese de escribir 150 por ciento. Puede que no veas ningún cambio aquí en este momento, pero déjame mostrarte un ejemplo. Voy a añadir una capa de texto y vamos a escribir algo. Hola mundo. Estamos creando nuestra guía de diseño. Voy a hacerlo más pequeño. Como pueden ver aquí, tenemos tres líneas. ¿Estoy en lo correcto? Si lo configuro a auto. El alto de línea ahora se establece en 70. Si hace clic en esto, puede que vea el número predeterminado, y ahora parece bien, pero si lo cambio a regular, y si disminuyo este tamaño de fuente a por ejemplo, 30 puntos. Ahora se puede ver que esta línea de texto no es tan legible. Pero si cambio esta altura de línea de 35 que es automática a 150 por ciento, se puede ver que es más legible, especialmente para los párrafos de línea. Tan crucial para tener suficiente espacio entre tus líneas. Esta es la razón por la que utilizamos 150 por ciento. ¿Qué significa? Si elimino eso, significa que multiplico el tamaño de fuente 30 por 1.5 y obtengo 45. Cuando lo puse en 150 por ciento, significa que mi altura de línea ahora es de 45. Ahora, necesitamos crear nuestro estilo de texto. ¿ Cómo puedo hacer eso? Es tan sencillo. Voy a seleccionar esta capa de texto y voy a dar click en estos ícono de cuatro puntos. Ahí vamos. Haga clic en este icono más “Crear estilo”. Aquí déjame escribir encabezado/H1. Pero, ¿por qué usé un corte entre estas dos palabras? Cuando quiero crear una categoría para mis estilos de texto o mis estilos de color, puedo usar una inclinación entre ellos. Pondré este H1 bajo la categoría rubro y vamos a crear un estilo. Ahí vamos. Aquí podemos ver que el nombre de esta categoría es rumbo, y bajo este rubro tengo H1. Siempre que quieras modificar este estilo de texto, puedes hacer clic fácilmente en este icono, “Editar estilo”, y editar tu estilo de texto. Incluso puedes agregar una descripción aquí. Se puede modificar el nombre, modificar las propiedades, etc. Bastante bueno. Ahora, voy a agrandar un poco este rectángulo para conseguir más espacio con el que trabajar. Entonces lo voy a duplicar, moverlo hacia abajo. Aquí vamos a crear nuestro segundo estilo de texto. Pero antes de hacer eso, necesitamos asegurarnos de que separamos esta capa de texto de su estilo. Si me dirijo a esta sección, se puede ver que tenemos un icono llamado estilo de desconexión. Voy a hacer clic en eso y ahora esta capa de texto ya no está conectada al estilo que acabamos de crear. Déjame cambiar este H1 a H2 y van a ser 50. Voy a disminuir el tamaño de la fuente a 50 puntos y eso es todo. No olvides crear tu estilo de texto. Vamos a escribir el encabezamiento H2. Bastante bien. De nuevo, permítanme duplicarlo, moverlo hacia abajo, desconectarlo de su estilo. Déjame cambiarlo a H3, y voy a hacerlo 40 y también déjame cambiarlo aquí. Por último, vamos a crear un encabezado de estilo/H3. Necesitamos crear seis estilos de texto más. Voy a duplicarlo, moverlo hacia abajo, desconectarlo de su estilo. Aquí, vamos a escribir el encabezamiento H4 y 24. Déjame disminuir el tamaño de fuente a 24 puntos y crear los estilos de texto encabezado H4. Ahora, déjame duplicarlo una vez más. Sé que es un proceso aburrido, pero créanme, más adelante este proceso dará sus frutos. Déjame desprenderlo de su estilo y esta vez, vamos a crear nuestra intro corporal. Voy a escribir cuerpo intro texto 24 regular. Para esta intro corporal, voy a cambiar un peso de negrita a regular, y un tamaño de fuente va a ser de 24. Déjame crear el estilo. Voy a escribir cuerpo/intro. Bastante bien. Voy a duplicarlo, moverlo hacia abajo y desconectarlo de su estilo. Aquí, vamos a escribir por principal y el tamaño de fuente va a ser de 20 puntos. Por último, permítanme disminuir el tamaño de fuente a 20 y crear el estilo de texto, cuerpo/principal. Necesitamos crear tres estilos de texto más para terminar nuestros estilos de tipografía. Vamos a duplicarlo, moverlo hacia abajo, desconectarlo de su estilo, y vamos a escribir texto medio 17 regular. Bastante bien. Déjame cambiar el tamaño de fuente a 17 puntos y crear el estilo. Ahora bien, no quiero crear ninguna categoría aquí, así que voy a escribir medio, voy a duplicarlo, moverlo hacia abajo, desconectarlo de su estilo. Ahora, vamos a escribir texto de leyenda y van a ser 15 puntos. Déjame crear el estilo y lo voy a llamar subleyenda. último pero no menos importante, voy a duplicarlo, desconectarlo de su estilo, y déjame escribir, texto pequeño y van a ser 13 puntos. Déjame crear el estilo. Voy a llamarlo pequeño. Eso es todo lo que estamos haciendo con nuestros estilos topográficos. Ahora los voy a organizar. Voy a mantener presionada la tecla “Shift” de mi teclado y hacer clic en cada capa para seleccionarlas al mismo tiempo. Entonces puedo dirigirme a la sección de alineación, en la parte superior derecha aquí está el inspector. En la parte superior puedes ver esta sección de alineación y en el lado derecho obtendrás este icono, Más opciones. Voy a seleccionar “Distribuir espaciado vertical”, y si hago zoom, puedo ver estos mangos rosados. Puedo hacer clic y modificar el espaciado fácilmente. Voy a ponerlo a, por ejemplo, 40. Puedo fijar la cantidad aquí. Ahí vamos. Todo se ve bien. Ahora te puedes preguntar, ¿por qué necesito crear estos estilos de texto? De hecho, no es una tarea obligatoria, pero si quieres convertirte en un muy buen diseñador UX de UI, y si quieres trabajar para una agencia, por ejemplo, debes asegurarte de usar texto y estilos de colores casi todo el tiempo, y necesitamos asegurarnos de mantener todo organizado. ¿ Cuáles son las ventajas de usar un textil? Déjame demostrártelo en un segundo. Voy a crear una capa de texto y aquí voy a escribir hola. Este es un texto normal. Si quiero aplicar uno de estos estilos de texto, puedo seleccionar fácilmente esta capa de texto y puedo dirigirme a esta sección Texto en el inspector y dejarme dar clic en el icono de estilo. Desde aquí, puedes encontrar los estilos que acabamos de crear. Tenemos cuerpo, encabezamiento y estos tres estilos de texto. Voy a ponerlo a, por ejemplo, H3. Voy a acercar y ahora voy a crear otra capa de texto y dejarme escribir mundo. Porque uso un estilo de texto para esta capa de texto anterior, y esto es exactamente lo que quiero. Por lo que tengo dos capas de texto con los mismos estilos de texto. Cuando el proyecto esté terminado, supongamos que el cliente o la empresa te pide cambiar el tamaño de fuente del encabezado 3, si no usas estilos de texto, necesitas ir y modificar manualmente todas tus capas de textos con las mismas propiedades. Pero cuando usas un estilo de texto, puedes dirigirte fácilmente a este estilo de texto y hacer clic en “Editar estilo de texto”. Por ejemplo aquí, puede aumentar el tamaño de fuente a 50. Ahora como se puede ver, los cambios se aplican a ambas capas de texto al mismo tiempo y si subo un poco, se puede ver que este rubro 3 también se ha cambiado. Voy a deshacer la operación sosteniendo “Comando Z” o “Control Z”. Perfecto. Es por ello que utilizamos un estilo de texto. Yo los voy a quitar. Cuando estés diseñando para web o incluso para móvil hoy en día, asegúrate de no usar un tamaño de fuente más pequeño abajo 13 puntos. Porque va a ser demasiado difícil para los usuarios leerlo. Muy bien chicos, eso es todo por este video. Espero que lo hayas disfrutado y te veré en el siguiente video. 96. Crea tu estilo de color: Hey allá, en este video, vamos a empezar a crear juntos nuestros estilos de color. Sin más preámbulos, empecemos. Déjame agrandar estas mesa de trabajo de guía de diseño así. Por último, voy a seleccionar todas estas capas y agruparlas presionando Comando G o Ctrl G en mi teclado. Déjenme llamarlo Tipografía. Entonces voy a crear otro rectángulo o podría simplemente duplicarlo, pero déjame mostrarte algo. Voy a arrastrar y soltar algo como esto. De hecho, voy a aplicar los mismos efectos y el mismo estilo que se utilizan para estos rectángulo. Si mantienes pulsada la tecla Comando o la tecla Control de tu teclado y haces clic en este rectángulo, se seleccionará. Alternativamente, puedes dirigirte a la lista de capas y elegirla manualmente. Ahora voy a dar click derecho sobre eso, y en la parte inferior, voy a ir a Copiar y Pegar, y desde aquí, voy a copiar las propiedades. Entonces voy a seleccionar este rectángulo que acabo de crear. Voy a dar click derecho en eso, ve a Copiar y Pegar y Pegar propiedades. Ahí vamos. Tenemos el mismo estilo para este rectángulo también. Este rectángulo es para nuestros colores. Voy a agrandar así, bastante bien, y déjame crear un cuadrado. Voy a mantener presionada la tecla Mayús, arrastrar y soltar así. Establezcamos el ancho y la altura en 250 por 250, y finalmente, aumentemos la cantidad del radio de esquina a 30. Bastante bien. Para este proyecto, voy a crear seis estilos de colores diferentes. El primer color va a ser nuestro color primario. El código de color es 554DDE. Bastante bien. Este morado va a ser nuestro color primario. Al igual que los textiles, con el fin de crear un estilo de color, puedes dirigirte fácilmente a la sección Relleno y hacer clic en el icono de estilo y dar clic en este icono más. Aquí voy a escribir Primaria. Ahí vamos. Acabamos de crear nuestro primer estilo de color. Entonces voy a golpear Command D o Control D en mi teclado, moviéndome hacia el lado derecho, y lo voy a desprender de su estilo y luego voy a poner el código de color en F44E77. Bastante bien. Este va a ser nuestro color Accent, y lo vamos a utilizar para, por ejemplo, botones de llamada a la acción, o cuando queremos resaltar una parte específica del texto, usaremos este color. Déjame crear un estilo de color, y voy a escribir Accent. Fantástico. Una vez más, duplicarlo. Voy a moverlo hacia abajo, lo voy a desprender de su estilo, y déjame cambiar el código de color a 6A6D9E. Va a ser nuestra secundaria ligera, pero voy a llamarla luz secundaria, así que déjame escribir Secundaria/Luz, porque vamos a tener una oscura también. Voy a duplicarlo, moverlo hacia el lado derecho, desconectarlo de su estilo, y déjame cambiar el código de color a 16194F. Déjame crear un estilo de color, Secundario/Oscuro. Fantástico. Necesitamos crear dos más. Voy a duplicarlo, subirlo. Este va a ser nuestro color neutro y lo usaremos, por ejemplo, para nuestro fondo. Voy a desconectarlo de su estilo y déjame cambiar el código de color a F2F6FF. Bastante bien. Es de color azul claro, es el mismo color que usamos para nuestro fondo aquí. Voy a crear un estilo de color, déjame llamarlo Neutral. Fantástico. Por último, pero no menos importante, vamos a crear un estilo de color para nuestro trazo. Voy a duplicarlo, moverlo hacia abajo, déjame desprenderlo de su estilo, quitar el relleno, y agregarle un trazo. Voy a poner el trazo en dos, el grosor no importa ahora, porque más adelante podemos modificarlo cuando aplicemos este estilo a nuestras formas, pero lo que importa es el color. Voy a establecer el código de color en CAD6F1. Bastante bien. Déjame acercar que lo puedas ver. Fantástico. Déjame seleccionarlo y añadir un estilo de color. Voy a escribir Stroke. Voy a hacer este rectángulo un poco más pequeño así. Permítanme seleccionar todas estas formas, agruparlas, y mantenga pulsada la tecla Mayús y seleccione este rectángulo. Por último, en el inspector en la parte superior, se pueden alinear tanto horizontal como verticalmente. Lo que queremos agregar aquí es un título. Déjame alejar y déjame agrandar un poco este rectángulo. Voy a mover estos colores hacia abajo, y déjame seleccionar este texto tipográfico, copiarlo, Comando C o Ctrl C, seleccionar este rectángulo y pegarlo, Comando V o Ctrl V. Aquí, voy a escribir Colores. Bastante bien. Es relleno izquierdo va a ser 65, y su relleno superior va a ser 60. Hemos creado con éxito nuestra guía de diseño. De hecho, puedes agregar más elementos a tus guías de diseño como logotipos, iconos, botones, deslizadores, etc. Pero por ahora, solo necesitamos nuestro estilo de tipografía y nuestros estilos de color. Muy bien chicos, eso es todo por este video, espero que lo hayan disfrutado, y los veo en el siguiente video. 97. Enmarcado de la conexión tu proyecto: parte 1: Oye, ahí. Ahora que nuestra guía de diseño está lista, es hora de crear una estructura alámbrica para nuestra página de aterrizaje. ¿ Qué es realmente wireframing? wireframing es una forma de diseñar un sitio web o una aplicación móvil a nivel estructural. En otras palabras, es el plano de nuestro diseño y nos ayuda a diseñar nuestro proyecto de manera fácil y más conveniente, así que sin más preámbulos, empecemos. Voy a abrir Figma y aquí, justo al lado de esta guía de diseño que creamos, voy a crear otra mesa de trabajo. Voy a presionar “A” en mi teclado y del lado derecho en el Inspector, se puede ver que tenemos algunas mesas de trabajo preconstruidas. Voy a elegir escritorio. La dimensión es de 1440 por 1024. Ahí vamos. Déjame acercar, bastante bien. Hemos creado nuestra mesa de trabajo, pero como pueden ver, no es lo suficientemente grande como para poner todos nuestros elementos. En primer lugar, voy a seguir adelante y renombrarlo. Hagamos doble clic en su nombre en la lista de la capa y voy a renombrarlo a wireframe. Perfecto. Entonces en el inspector, voy a fijar la altura en 6,100, por ahora. Si me alejo, se puede ver que ahora, tenemos mucho más espacio con el que trabajar. En realidad, tenemos dos tipos de wireframe, una estructura alámbrica de baja fidelidad y una estructura alámbrica de alta fidelidad. ¿Cuál es la diferencia? Una estructura alónica de baja fidelidad incluye sólo los elementos necesarios. No necesita tener los colores de las marcas, ni espaciado preciso, ni incluso iconos. Simplemente tratamos de imaginar cómo va a ser nuestro producto final. Utilizaremos formas simples como rectángulo, círculo, etc., para visualizar nuestro proyecto final a nivel estructural. Por otro lado, una estructura alámbrica de alta fidelidad requiere más contenido, como el tamaño exacto de tus botones, tus elementos, o incluso podrías incluir algunos colores. Pero por ahora, vamos a crear una estructura alámbrica de baja fidelidad juntos. Empecemos. Para nuestra página de aterrizaje, necesitamos tener una sección de héroes, en la parte superior de cualquier página de aterrizaje o cualquier sitio web, vamos a necesitar una sección de héroes, que es la parte más importante del sitio web. Deberías prestarle tanta atención. Voy a seleccionar la herramienta de rectángulo de la barra de herramientas y déjame hacer clic y arrastrar para crear un rectángulo simple. Entonces voy a seguir adelante y cambiar nuestro relleno. Déjame elegir uno de nuestros estilos de color que ya creamos. Voy a elegir secundaria, la oscura, bastante buena. Esta va a ser nuestra sección de héroes. En la parte superior, vamos a necesitar una barra de navegación. una barra de navegación se va a incluir un logotipo, luego algunos elementos de menú en el medio, y finalmente un botón de inicio de sesión en el lado derecho. Voy a seguir adelante y crear otro rectángulo. Déjenme mantener presionada la tecla Mayús, haga clic y arrastre para crear un cuadrado. Voy a ponerlo en 60 por 60. Hagámoslo redondeado, bastante bueno. Entonces voy a elegir otro color. Déjame elegir la secundaria, la ligera. Esto va a representar nuestro logotipo, entonces necesitamos algunos elementos de menú. En realidad, necesitamos tres elementos de menú, pero más adelante si quieres, puedes cambiarlo y no necesitas preocuparte por los detalles. Para ilustrar los elementos del menú, voy a seguir adelante y crear otro rectángulo como este. Voy a hacerlo redondeado. Permítanme aumentar la cantidad de radio de esquina en el inspector. Fantástico. Déjame cambiar el color, pero esta vez, voy a ir con este color neutro. Déjame duplicarlo dos veces, muévelo al lado derecho. Para duplicar la capa, puedes pulsar “Comando D” o “Control D” si estás usando Windows una vez más. Estas tres formas representan nuestros elementos de menú. Entonces, del lado derecho, necesitamos tener un botón Iniciar sesión. Déjame crear otro rectángulo, un poco más grande, y voy a hacerlo redondeado y déjame cambiar su color a este acento. Podrías usar, por ejemplo, este color secundario como usamos para nuestro logotipo. Pero como vamos a usar el color de acento para el botón Iniciar sesión en nuestro producto final, podrías usar eso también. Aquí voy a escribir algunas cosas. Déjame crear una capa de texto y déjame escribir botón, fantástico. Déjame seleccionarlo y aumentar su tamaño de fuente a 17 por ahora. Por ahora, no vamos a usar nuestros estilos de texto porque realmente no importa para esta etapa. Pero si lo prefieres, podrías usar tus estilos de texto también. Por ejemplo, podría usar este, medio. Permítanme seleccionar ambas capas. Voy a mantener presionada la tecla Mayús en mi teclado y hacer clic en ambos. Entonces los voy a alinear tanto horizontal como verticalmente. Déjame hacerlo un poco más grande, que podamos usar nuestros estilos de texto y por ejemplo, podríamos usar el principal 20. Déjame alinearlo. En lo que va tan bien. Hemos creado nuestra barra de navegación con éxito. Ahora, permítanme seleccionar todos estos elementos del menú y agruparlos. Voy a llamarlo menú. Voy a llamar a este logo rectángulo. Por último, vamos a seleccionar ambas capas, agruparlas, y vamos a llamarlo botón. último, pero no menos importante, se pueden seleccionar todas estas tres capas, ya que las hemos agrupado. Una vez más, agruparlos y alinear este grupo final horizontalmente al centro. Puedes darle un nombre como Nav Bar. En lo que va tan bien. Hemos creado nuestra barra de navegación. Entonces para nuestra sección de héroes, necesitamos tener una imagen del lado derecho y un encabezado grande, una descripción, y un llamado a la acción. Un llamado a la acción es en realidad un botón. Por ejemplo, un botón de registro o un botón Iniciar sesión. No importa por ahora. Lo que importa es crear algunas formas para representar nuestro título, nuestra descripción, y nuestro botón. Voy a seguir adelante y seleccionar la herramienta de rectángulo, haga clic y arrastre así. Voy a hacerlo redondeado. Déjame ampliarlo un poco, ya que este es nuestro título y es perfecto, entonces voy a cambiar su color a nuestra línea secundaria, duplicarlo, moverlo hacia abajo. Voy a hacerlo un poco más pequeño para mostrar que se trata de un texto. Una vez más, duplicarlo, hazlo un poco más pequeño. Fantástico. Este va a ser nuestro título. Voy a agruparlos y llamémoslo título. Entonces necesitamos tener alguna descripción. Para nuestra descripción, podríamos usar la misma técnica y crear un rectángulo como este. Voy a hacerlo redondeado así. Voy a elegir este color neutro para nuestra descripción, moverlo hacia abajo, hacerlo un poco más pequeño, duplicarlo, hacerlo un poco más pequeño. Eso es todo. Nuestra descripción también está lista. Voy a seleccionar los tres elementos, agruparlos , “Comando G” o “Control G” en tu teclado. Vamos a darle un nombre descripción. Fantástico. Por último, pero no menos importante, necesitamos un botón. Voy a seguir adelante y hacer doble clic en este botón para seleccionarlo. Voy a copiarlo, “Comando C” o “Control C” en tu teclado. Después selecciona este rectángulo grande, que es nuestro fondo, y pulsa “Comando V” o “Control V”. Ahora como pueden ver, este botón no está dentro de nuestro grupo de navbar, está fuera de él. Yo lo voy a poner aquí. Ya está listo el lado izquierdo de nuestra sección de héroes. Pero, ¿qué pasa con el lado derecho? Por el lado derecho, voy a usar una imagen muy sencilla. Voy a elegir rectángulo, dar clic y arrastrar así, hacerlo redondeado. Voy a aumentar la cantidad del radio de esquina. Vamos a ponerlo en 40. Por último, cambiemos su color a luz secundaria. Bastante bien. Ahora voy a seleccionar a todos estos tres grupos y bajarlos un poco. Déjame hacerlo un poco más pequeño y moverlo hacia abajo. Como puedes ver, nuestra sección de héroes está hecha. Acabamos de crear una estructura alámbrica de baja fidelidad para nuestra sección de héroes. En el siguiente video, continuaremos nuestro viaje para completar esta página de aterrizaje. Nos vemos en el siguiente. 98. Enmarcado de la conexión tu proyecto: parte 2: Hola ahí. Después de la sección de héroes, voy a crear la sección de características. Para este servicio, que es una aplicación de banca en línea, vamos a crear tres secciones de características. ¿ Qué es una sección de características? Una sección de características, como puede adivinar, es una sección que proporciona al usuario las características de ese servicio en particular o ese producto en particular, que en nuestro caso es la aplicación. Entonces para cada sección de características, vamos a necesitar un título, una descripción, y en el lado derecho, necesitamos tener una imagen. Voy a seguir adelante y seleccionar este título. En esta descripción, voy a mantener presionada la tecla Mayús para seleccionarlos a ambos. Pulsa “Comando C” o “Control C” en tu teclado, y luego pulsa “Comando V” o “Control V” en tu teclado y muévalo hacia abajo, así. Bastante bien. Permítanme alinearlos al lado izquierdo aquí también. Como puede ver, nuestra descripción aquí no es lo suficientemente legible. Entonces lo que voy a hacer, voy a seguir adelante y seleccionar este tablero de arte wireframe y cambiar su color de fondo. Como puedes ver por defecto, está configurado en blanco, pero lo voy a cambiar por nuestro color neutro. Déjame desplazarme hacia abajo. Ahora, podemos cambiar el color de nuestra descripción a otra cosa. Por ejemplo, luz secundaria. Para este título, podríamos cambiarlo a oscuro secundario. Fantástico. Ahora del lado derecho, necesitamos una imagen y podemos copiarla y pegarla. ¿ Se puede ver lo sencillo que es crear una alambrada de baja fidelidad? Voy a copiar y pegar. Muévelo hacia abajo. Pero lo voy a hacer un poco más pequeño, así. Bastante bien. En realidad en este apartado, vamos a presentar una tarjeta de crédito del lado derecho. Es por eso que hice que pareciera una tarjeta de crédito. El ratio de aspecto ilustra su propósito. Ahora, necesitamos otra sección de características así que voy a seleccionar todos estos tres elementos y presionar “Comando D” o “Control D” en tu teclado para duplicarlos, moverlos hacia abajo un poco así. Pero esta vez voy a cambiar el lugar de nuestro título y descripción con nuestra imagen. De lo que voy a hacer, los voy a seleccionar a ambos, agruparlos, moverlos hacia el lado derecho, y seleccionar nuestra imagen y moverla hacia el lado izquierdo. En esta sección, vamos a tener algunas estadísticas, por ejemplo, un gráfico. Entonces lo que voy a hacer, lo voy a hacer un poco más pequeño. Este rectángulo va a sostener nuestro gráfico. Voy a duplicarlo, “Comando D” o “Control D” en mi palabra clave, moverlo hacia arriba, y hacerlo un poco más pequeño así. Una vez más duplicarlo, moverlo hacia abajo, ponerlo justo al lado de nuestro rectángulo anterior, así. Bastante bien. Déjame seleccionarlos todos, agruparlos, y moverlo hacia abajo. Pero para esta característica, voy a necesitar un botón, un botón “Aprender más”. Lo que voy a hacer es mover un poco este grupo de texto y hacer algún lugar para nuestro botón. Vamos a seguir adelante y copiar este botón. Voy a golpear “Comando C” o “Control C.” Aquí, voy a golpear “Comando V” o “Control V.” Ahí vamos. Ahora necesitamos crear una sección de funciones más para nuestra página de aprendizaje. Para esta sección de características, voy a necesitar, nuevo, un encabezado, una descripción, y también algunas imágenes pequeñas justo debajo de la descripción. Déjame copiarlo y pegarlo, “Comando C” y “Comando V.” Voy a moverlo hacia abajo. Aquí, justo debajo de eso, necesito algunas imágenes circulares. Déjame crear un círculo. Voy a elegir la elipse, mantenga pulsada la tecla Mayús, haga clic y arrastre, bastante bien, así. Voy a cambiar el color de la misma a luz secundaria. Entonces déjame duplicarlo, muévalo hacia el lado derecho. Duplicarlo una y otra vez. Estos van a ser nuestros titulares de lugares de imagen. Bastante bien. Del lado derecho, voy a tener algunas imágenes. Lo que voy a hacer es seleccionar aquí uno de estos rectángulos. Voy a hacer doble clic en eso. Déjame copiarlo, “Comando C”, “Comando V”, así. Voy a hacerlo un poco más pequeño. Esta sección va a representar la característica de soporte de esta plataforma. Por el lado derecho, voy a necesitar unas burbujas de chat. Déjame duplicarlo, “Comando D” o “Control D”, muévalo hacia abajo. Una vez más duplicarlo. Bastante bien. Nuestra sección de características está hecha. Ahora podemos pasar a la siguiente parte que son nuestros planes de membresía. Déjame acercar. Aquí en medio, vamos a tener un título. Justo debajo de eso, vamos a tener una descripción muy corta. Déjame mantener presionada la tecla Comando de mi teclado o tecla Control y hacer clic en uno de estos rectángulos, así, para seleccionar solo éste. Voy a copiarlo, “Comando C”, y pegarlo, “Comando V.” Voy a moverlo hacia abajo. Permítanme alinearlo al centro horizontalmente. También lo voy a hacer más grande, pero no así. En realidad voy a mantener presionada la tecla Opción o la tecla Alt en mi teclado y luego tratar de ampliarla desde ambos lados. Esto es exactamente lo que quiero. Déjame duplicarlo, moverlo hacia abajo. Ya que esta es una descripción, voy a hacer un poco más pequeña así, y déjame cambiar su color a luz secundaria. Por último, voy a hacerlo un poco más pequeño así. Fantástico. Tenemos nuestro título, tenemos nuestro subtítulo, y aquí necesitamos tener dos planes diferentes, el plan gratuito y el plan premium. Cada plan debe tener el precio, un llamado a la acción, y también una imagen de que el usuario pueda elegir el diseño de sus tarjetas de débito o sus tarjetas de crédito, y finalmente, algunas características cortas de ese plan en particular. Permítanme seleccionar la herramienta Rectángulo. Voy a dar clic y arrastrar así. Fantástico. Voy a hacerlo redondeado. Déjame cambiar su color a nuestra luz secundaria, así. Como ya les dije antes, para este plan, necesitamos tener alguna información como un título. Voy a seleccionar este rectángulo, pulsa “Comando C”, “Comando V”, para pegarlo, así. Fantástico. Este va a ser nuestro título. Voy a duplicarlo y moverlo hacia abajo. Déjame ampliarlo un poco. Este va a ser nuestro precio. Entonces necesitamos tener un botón. Voy a subir, seleccionar este botón, “Comando C”, “Comando V”, y bajarlo, así. Pero en la lista de la capa, tenemos que subirla, aquí. Bastante bien. Aquí tenemos el botón. Entonces necesitamos tener una imagen así que vamos a crear una. Voy a seleccionar la herramienta Rectángulo, haga clic y arrastre. Este va a ser nuestro marcador de posición de tarjeta de crédito o débito, que sea redondeado, y cambiemos el color a oscuro secundario. Entonces necesitamos tener algún texto. Seleccionemos este título, copiarlo y pegarlo, “Comando C”, “Comando V”, o “Control C”, “Control V”, y hacerlo un poco más pequeño. Hagámoslo un poco más ancho. Fantástico. Por último, cambiemos el color a neutro. Déjame duplicarlo. Muévelo hacia abajo, duplicarlo. Hemos creado con éxito nuestro primer plan. Voy a seleccionar todos estos elementos y agruparlos. Haga clic y arrastre para seleccionarlos, así, y presione “Comando G” o “Control G” para agruparlos. Entonces llamémoslo plan, y lo voy a duplicar, “Comando D” o “Control D”, y moverlo al lado derecho. Después selecciónalos a ambos, agruparlos, “Comando G” o “Control G”, y llámalo planes. Por último, lo voy a alinear con el centro horizontalmente. Se ve tan bonito. El siguiente apartado va a ser una sección de preguntas y respuestas. Para esta sección de preguntas y respuestas , de nuevo, necesitamos un título, una descripción. Entonces voy a seleccionar a ambos, “Comando C”, “Comando V”, o “Control C”, “Control V.” Muévelo hacia abajo, así. Aquí necesitamos tener algunos rectángulos para sostener nuestras preguntas así que déjame crear un rectángulo. Podemos arrastrar, así. Déjame hacerlo redondeado. Por último, voy a cambiar su color a nuestra luz secundaria. Este marcador de posición va a tener una capa de texto así que permítanme seleccionar este título, “Comando C”, “Comando V”, moverlo hacia abajo, y lo voy a mover hacia arriba en la lista de capas aquí. Bastante bien. Déjame hacerlo un poco más pequeño. Muévelo al lado izquierdo. Esta va a ser nuestra pregunta. Del lado derecho, vamos a necesitar un icono, que es una imagen. Voy a crear un círculo, así. Muévelo hacia el lado derecho, y cambie su color a neutro. Bastante bien. Entonces vamos a seleccionarlos todos, agruparlos, y vamos a darle el nombre pregunta. Por último, puedes duplicarlo y moverlo hacia abajo para nuestra segunda pregunta. Nuevamente, duplicarlo para obtener 5 preguntas, así. Ya casi terminamos. El último que necesitamos para nuestra página de aterrizaje es un pie de página. Un pie de página es una sección que incluye todos los enlaces importantes de su sitio web y también la renuncia de derechos de autor. Voy a seleccionar la herramienta Rectángulo, hacer clic y arrastrar así, y luego cambiar su color a oscuro secundario. Aquí, necesitamos tener un logotipo, luego la renuncia de derechos de autor, y luego 3 columnas de enlaces. Vamos a crear un logotipo. Es tan sencillo. Necesitamos un rectángulo. Presione la tecla Mayús para crear un cuadrado. Ahí vamos. Voy a hacerlo redondeado. Déjame elegir luz secundaria para ello. Este es nuestro logo. Entonces necesitamos tener el descargo de responsabilidad de derechos de autor justo debajo eso así que vamos a crear alguna descripción como esta. Voy a hacerlo redondeado. Nuevamente, voy a elegir luz secundaria, así, duplicarla y moverla hacia abajo. Fantástico. El lado izquierdo de nuestro pie de página está listo. Voy a seleccionar estas 2 capas, agruparlas, y también dejarme seleccionar este logotipo y este grupo, y una vez más agruparlas, y voy a moverlas hacia abajo. En el lado derecho, como mencioné antes, necesitamos tener 3 columnas de enlaces. Déjame crear un rectángulo, pero pequeño y hacerlo redondeado. Cambiemos el color a este primario. Nunca lo usamos. Ya que estos van a ser enlaces, es mejor elegir otro color. Duplicarlo, muévelo hacia abajo. Una vez más, duplicarlo, así. Cada columna va a tener 3 enlaces. Ahora voy a mantener presionada la tecla Mayús en mi teclado y seleccionar los 3 enlaces, agruparlos, presionar “Comando G” o “Control G”, y voy a nombrarlo enlaces. Entonces en el inspector, puedo cambiar fácilmente el espaciado entre ellos, así. Voy a ponerlo en 70. Creo que es bastante bueno. Si bien está seleccionado, vamos a duplicarlo, “Comando D” o “Control D”, y moverlo hacia el lado derecho. Una vez más, duplicarlo. Ahí vamos. Todas nuestras 3 columnas están listas así que la voy a mover hacia el lado izquierdo. Muy bien chicos, revisemos nuestra estructura y veamos si necesitamos hacer algunos cambios. Aquí, permítanme seleccionar todas estas preguntas y subirlas un poco. Voy a alejarme. Ahí vamos. Nuestra estructura alambrada está lista. Por lo que voy a seleccionar esta mesa de trabajo wireframe y clic en este icono de “Play” para previsualizarla. Como puedes ver, tenemos una sección de héroes con una barra de navegación y todos los elementos necesarios. Voy a bajar, y tenemos la característica 1, característica 2, característica 3, bastante buena, y la sección de preguntas y respuestas, y el pie de página. ¿ Viste lo fácil que es crear este wireframe de baja fidelidad? En el siguiente video, comenzaremos a diseñar nuestro proyecto juntos. Espero que hayan disfrutado de este video, y nos vemos en el siguiente. 99. Barra de navegación: Hey, bienvenido de nuevo. Ahora que nuestro wireframe está listo, vamos a empezar a diseñar juntos nuestra página de aterrizaje. ¿ Estás listo? Vámonos. En primer lugar, voy a crear otro tablero de arte justo al lado de mi alambrada. Voy a presionar “A” en mi teclado, y luego en el lado derecho, voy a elegir Escritorio. Perfecto. Déjame subirlo, y voy a acercarme. Ahora, permítanme renombrarlo a Landing Page. Asegúrate de nombrar adecuadamente tus capas y tus tableros de arte para mantener tu proyecto organizado. Ahora, déjame hacerlo un poco más largo, así. Ya es suficiente por ahora. ¿ Qué necesitamos para nuestra página de aterrizaje? Como puedes ver, tenemos una alambrada que creamos en el video anterior y sabemos dónde se van a colocar los elementos. No obstante, para esta página de aterrizaje, necesitamos crear primero una cuadrícula de diseño con el fin de guiarnos donde debemos poner nuestros elementos. Si bien se selecciona este tablero de arte de la página de aterrizaje, dirígete a la cuadrícula de diseño en el lado derecho en el Inspector y haga clic en este icono más. Ahí vamos. Ahora tenemos una grilla. Pero si haces clic en este icono justo al lado de estas etiquetas, puedes modificar esta cuadrícula a columnas. Esto es exactamente lo que queremos. Para este proyecto, vamos a utilizar una cuadrícula de diseño de 12 columnas, que es una de las más populares. Voy a fijar el conteo a 12. Ahí vamos. Ahora tenemos 12 columnas. Entonces el tipo se va a estirar. Puedes ponerlo al centro y establecer el ancho, pero prefiero establecerlo para estirar. Voy a darle un margen de 150 píxeles desde el lado derecho y desde el lado izquierdo. Entonces cambiemos la cantidad de canaleta, que es el espacio en blanco entre nuestras columnas. Voy a ponerlo en 16. Ahora nuestra cuadrícula de diseño está lista, y podríamos empezar a diseñar nuestra página de aterrizaje. ¿ Qué necesitamos? En primer lugar, necesitamos diseñar nuestra barra de navegación en la parte superior. Nuestra barra de navegación va a tener un logotipo luego algunos elementos de menú y finalmente un botón. Por favor, abra la carpeta de activos que descargó antes porque vamos a necesitar el logotipo que ya preparamos para usted. Desde la carpeta de logotipos, por favor arrastre y suelte el archivo logo.svg a su proyecto, así. Fantástico. Si quieres ocultar tu cuadrícula de diseño, puedes presionar fácilmente “Control G” en tu teclado, y puedes volver a presionarla para activarla. Perfecto. Ahora, voy a acercarme un poco, y voy a alinear este logotipo al lado izquierdo de esta columna, la segunda columna. No vamos a poner nuestros elementos en la primera columna desde la izquierda y desde la derecha. Vamos a dejarlos vacíos. Bastante bien. Entonces necesitamos tener algunos elementos de menú. Voy a presionar “T” en mi teclado y hacer clic aquí para crear una capa de texto. Entonces déjame escribir, por ejemplo, Home como nuestro primer elemento de menú. Ahora, podríamos empezar a usar nuestro tamaño de texto. Si me dirijo a la sección Texto en el Inspector, puedo hacer clic en este ícono de estilo del lado derecho, y luego voy a elegir medio 17. Este es el estilo de texto que creamos antes. Ahí vamos. Voy a subirlo un poco. Déjame acercarme y duplicarlo presionando “Comando D” o “Control D” si estás usando Windows y moverlo hacia el lado derecho. Permítanme cambiarlo por características. Perfecto. Una vez más, lo voy a duplicar, “Comando D” o “Control D”, moverlo al lado derecho, y déjame escribir precios. Ahora, tenemos nuestros tres elementos de menú. Lo que voy a hacer es seleccionar estos tres elementos, y voy a presionar “Shift” y “A” para agregarle el diseño automático. Como se puede ver en el lado derecho, tenemos agregado un diseño automático. A partir de ahora, podríamos modificar el espaciado entre estos elementos usando la sección, así. Si desea, por ejemplo, agregar un nuevo elemento, solo tiene que seleccionar uno de ellos y presionar “Comando D”. Como puedes ver, este marco que acabamos de crear crecerá horizontalmente automáticamente porque estamos usando un diseño automático horizontal. Si cambiamos el modo de horizontal a vertical, se puede ver que se apilan verticalmente, pero queremos mantenerlo horizontal, así. Permítanme eliminar estas características. Bastante bien. Voy a fijar el espaciado entre ellos a 70, así, por ahora. Entonces déjame alinearlo al centro horizontalmente usando la sección de alineación en el Inspector, así. Lo último que necesitamos para nuestra barra de navegación es un botón. Lo que voy a hacer es seleccionar esta herramienta de rectángulo de la barra de herramientas y hacer clic y arrastrar para crear un rectángulo como este. Voy a aumentar el radio de esquina a 20 para que sea redondeado. Déjame acercar. Voy a ocultar mi cuadrícula de diseño para ver un poco mejor nuestros elementos. Permítanme cambiar el ancho a, por ejemplo, 167 en lugar de 177. Voy a fijar la altura a 56 por ahora. Ahora, para este botón, voy a usar uno de nuestros estilos de color que ya creamos. Si me dirijo a la sección Relleno del lado derecho y hago clic en estos iconos de cuatro puntos, puedo elegir el color de acento. Ahí vamos. Para este botón, voy a necesitar un texto. Déjame presionar “T” en mi teclado y hacer clic aquí para crear una capa de texto. Voy a apuntarme. Bastante bien. Dado que antes utilizamos un estilo de texto para nuestros elementos de menú, Figma elegirá automáticamente el mismo estilo de texto que nuestro estilo de texto predeterminado cuando creemos una nueva capa de texto. Está totalmente bien. Entonces voy a poner el color a blanco, así. Por último, necesitamos alinear aquí nuestros elementos. Si hago zoom un poco para que puedas verlo mejor, como puedes ver, mi texto está seleccionado. Voy a mantener presionada la tecla “Shift” y dar clic en nuestro rectángulo así. Ahora, si echas un vistazo a la lista de capas, puedes ver que se seleccionan dos capas al mismo tiempo. Esto es exactamente lo que queremos. Ahora, permítanme alinearlos tanto horizontal como verticalmente, así. Una cosa más, aquí podríamos crear un grupo o podríamos agregarles un diseño automático. Prefiero el posterior. Déjame presionar “Shift” y “A”, y ahora este botón es dinámico. ¿ A qué me refiero con eso? Ya que está configurado en horizontal, si trato de agregarle algo de texto, va a crecer horizontalmente. Vamos a intentarlo. Voy a cambiar de inscripción a algo como registro. ¿ Se puede ver cómo crece horizontalmente? Es perfecto. Nuestro botón está listo también. ¿Qué más debemos hacer? Tenemos que alinear verticalmente todos estos tres elementos. Voy a seleccionar todos ellos manteniendo presionada la tecla “Shift”, y voy a presionar “Alinear centro vertical”. Pero tenemos un problema más. Déjame desocultar mi cuadrícula de diseño. Lo que voy a hacer es mover este botón hacia el lado derecho para tocar el lado derecho de mi 2ª columna. Al igual que esto. Ahora, creo que se ve bien. No obstante, podríamos hacerlo un poco mejor teniendo la misma cantidad de espaciado entre nuestro logo y el lado izquierdo de nuestros elementos de menú y nuestro botón y el lado derecho de nuestros elementos de menú. Ahora bien, si mantengo pulsada la tecla Alt u Opción en mi teclado y coloco el ratón encima de los elementos a su alrededor, puedo ver la cantidad de margen que estoy rellenando. Del lado derecho, tengo 154, y del lado izquierdo, tengo 274. Déjame moverlo un poco al lado izquierdo. Ahora como pueden ver, tengo 214 píxeles de la izquierda y 214 píxeles de la derecha. Este marco está exactamente en medio de estos dos elementos, y es exactamente el resultado que buscaba. último, pero no menos importante, vamos a seleccionarlos todos, agruparlos, presionar “Comando G” o “Control G” en tu teclado, y voy a llamarlo Nav Bar. Como se puede ver, su margen superior está establecido en 79. Voy a ponerlo en 80 para poder moverlo hacia abajo por la tecla de flecha de mi teclado por un píxel. Perfecto. Muy bien, chicos, eso es todo por este video. Hemos creado con éxito nuestra barra de navegación. En el siguiente video, comenzaremos a diseñar juntos nuestra sección de héroes. Nos vemos entonces. 100. Sección de héroe: parte 1: Hola ahí, bienvenido de nuevo. En este video, vamos a empezar a diseñar nuestra sección de héroes. Sin más preámbulos, empecemos. ¿ Qué necesitamos para nuestra sección de héroes? Echemos un vistazo a nuestra estructura alambrada. Como puedes ver nuestra sección de héroes, tiene un fondo, y luego una línea de cabeza, una descripción de botón, y una imagen en el lado derecho. Creo que es una buena idea empezar a diseñar primero nuestros antecedentes, y luego pasar a los otros elementos. Para mantener todo organizado, voy a presionar “A” en mi teclado, y déjame añadir una nueva mesa de trabajo. Déjame seleccionar Escritorio y lo voy a poner justo al lado de mi página de destino. Déjame acercar. Para este fondo, voy a usar diferentes gradientes y diferentes colores, y luego con una técnica cool, voy a mostrar cómo puedes mezclar los colores juntos para conseguir un fondo muy fresco, que es tan popular hoy en día. Para este fondo, voy a utilizar la herramienta Pluma, seleccionar la “Herramienta Pluma” en la barra de herramientas y voy a crear un nodo. Déjame hacer clic en algún lugar de aquí, y voy a mover mi ratón hacia abajo así, mantenga presionada la tecla “Shift” para obtener una línea recta como esta. Haga clic para crear el segundo nodo y moverlo hacia el lado derecho, haga clic así, y aquí está la parte complicado. Ahora, voy a crear una línea curva. ¿ Cómo puedo hacer eso? Como puedes ver, si solo hago clic en algún lugar, obtendré una línea recta, pero esto no es lo que quiero. Para obtener una línea curva, puedes hacer clic y arrastrar, así, hacer clic y arrastrar para obtener algo como esto, y finalmente, cerrar tu camino, haciendo clic en tu primer nodo. Perfecto. Tenemos nuestra primera forma, pero la voy a modificar un poco. Déjame seleccionar la herramienta de movimiento, y voy a dar clic en este nodo en el medio, y usando estos manejadores, puedo modificarlo así. Creo que ahora se ve bien. Ahora es el momento de agregarle un color, pero antes que nada, voy a quitarle el trazo usando este icono menos, y luego le agregaré un relleno. Para esta primera forma, voy a usar nuestro color oscuro secundario así, y luego voy a duplicar esta forma, moverla un poco arriba así, y finalmente la voy a hacer un poco más grande. Presione la tecla “Shift” y haga clic y arrastre así. Pero no se puede ver nada porque ambas capas tienen el mismo color. Ahora lo voy a cambiar a acento, y como la segunda capa está por encima de nuestra capa anterior, no podemos ver nuestra capa anterior, así que la voy a mover hacia abajo así. Ahí vamos. Ahora ambos son visibles. Por el momento, tan bueno. Déjame rotarlo un poco para conseguir algo como esto, y lo voy a hacer más grande. Podrás jugar con estos valores y mover tus formas como quieras. Ahora se ve bien. Entonces necesito otra forma. Voy a seleccionar la herramienta Pluma y dar clic aquí, moverla hacia abajo, haga clic aquí, así, haga clic en algún lugar aquí. No importa cómo conduzcas ahora porque esta forma va a estar debajo de nuestras capas anteriores, así, y voy a poner la siguiente aquí y conectarlas así. Bastante bien. Ahora déjame agregarle un relleno. Voy a elegir este color primario y déjame moverlo hacia abajo así para ponerlo debajo de nuestras capas anteriores. Hasta ahora tan bueno, podemos hacerlo un poco más grande. Ahora voy a añadir más colores, así que déjame volver a seleccionar la herramienta de bolígrafo. Esta vez haga clic aquí, muévala aquí abajo y aquí para crear una línea curva como esta, y déjame agregarle otro color. Probablemente, podrías usar un color diferente a nuestros estilos de color, y está totalmente bien ya que es un fondo, lo que voy a elegir es un color azul claro. Déjame cambiar el tono, algo así. Sí, se ve bien y como puedes ver, tiene una muy buena armonía con nuestros otros colores. El código de color es 35ECEC. Ahí vamos. último, pero no menos importante, necesitamos otro color para poner justo detrás de estas formas. Pero antes de eso, como pueden ver, esta forma está fuera de mi mesa de trabajo y es un problema. Si te diriges a la lista de la capa, puedes hacer clic y arrastrarla y ponerla dentro de nuestra mesa de trabajo, y déjame renombrar esta mesa de trabajo a BG, que significa fondo, y por último pero no menos importante, déjame crear otra forma para rellenar esta área blanca con. Perfecto, bastante bueno. Voy a elegir algo así como naranja. Vamos a intentarlo y a ver si se ve bien. Déjame poner esta capa dentro de nuestra mesa de trabajo y moverla hacia abajo. Fantástico. Como puedes ver, tenemos una muy buena combinación de colores. No obstante, no se ve bien para nuestros antecedentes. ¿ Cómo podemos hacer que se vea bien? Déjame mostrarte una técnica muy buena. Lo que voy a hacer ahora es seleccionar este BG, copiarlo, presionar “Comando C”, y seleccionar tu página de destino y pegarlo, pulsar “Comando V”. Lo voy a poner debajo de nuestra barra de navegación y moverlo hacia arriba así, y luego le voy a añadir un efecto. Si te diriges a la sección Efecto y haces clic en este icono más, puedes agregarle un efecto, pero por defecto, está configurado para soltar sombra. Voy a cambiarlo a Desenfoque de capas así. Entonces si hago clic en este icono del sol, puedo modificar esta cantidad de desenfoque a lo que quiera. Voy a usar este slider, así, voy a incrementarlo para mezclar todos esos colores. ¿ Se puede ver lo hermoso que es ahora? Acabamos de crear un hermoso fondo para nuestra página de destino utilizando esta sencilla técnica y usando formas simples en realidad. Ahora voy a modificar un poco mis colores para obtener un mejor resultado. En primer lugar, voy a cambiar esta naranja por otra cosa. Déjame elegir mi color de acento, se ve bien, y además, voy a modificar un poco este color azul. Déjame oscurecerlo para conseguir algo como esto. Fantástico. Además, voy a cambiar un poco este color secundario. Lo que voy a hacer es seleccionar este elemento y hacerlo un poco más pequeño, y seleccionar esta capa Vector 2, moverlo un poco arriba, y además creo que necesitamos agregar otro color para nuestra transición aquí entre estos actos y color y este color azul. Lo que voy a hacer es seleccionar esta capa Vector 5, copiarla y pegarla, moverla hacia el lado derecho, no es visible porque está debajo de nuestras otras capas. Muévelo hacia arriba en la lista de capas así y cambie el color a otra cosa, pero antes de eso, necesitamos separarlo de su estilo así, y déjame cambiarlo por algo como esto. El código de color es 4EF4E0. Ahora voy a rotarlo un poco. Está cada vez mejor como se puede ver, bastante bien. Por último, cambiemos este color azul para obtener un mejor resultado. Bastante bien. Tenemos que hacer una cosa más. Como puedes ver, ahora que el añadido este efecto borroso a nuestro fondo, tenemos algo de color blanco a los lados, y eso voy a arreglar. ¿Cómo puedo hacer eso? Sólo necesitamos escalar este fondo. Presione “K” en su teclado para seleccionar la herramienta de escala y mantenga presionada la tecla “Shift” e intente escalarla así desde ambos lados, y ahora se ve mejor. Como puedes ver, aunque agregamos este efecto borroso a nuestro fondo, podríamos reconocer los bordes y las líneas entre estos colores y no es bueno. Deberíamos aumentar la cantidad de desenfoque de capa para eliminar esas líneas como esta, y ahora se ve mucho, mucho más suave, bastante bueno. Hemos creado con éxito nuestros antecedentes, pero no hemos terminado. Hay un solo paso más por hacer, y eso es enmascarar nuestros antecedentes. De hecho, podrías dejarlo tal como está y tratar de agregar aquí tu elemento de secciones de héroe. No obstante, voy a cambiar su forma a algo elegante. Déjame seleccionar la herramienta de lápiz y voy a crear un nodo aquí en la esquina superior izquierda, está fuera de nuestra página de aterrizaje y lo sé, está totalmente bien. Vamos a arreglarlo en un minuto. Después haga clic aquí para crear otro nodo, y ahora voy a crear una línea de onda. Para ello, puedo hacer clic y arrastrar así, y luego voy a dar clic y arrastrar aquí. Fantástico, muévelo hacia arriba, haga clic aquí, haga clic aquí, y conéctelo a su primer nodo. Entonces quitémosle el trazo y le agreguemos un color sólido. En primer lugar, permítanme modificar esta curva usando estos mangos. Voy a seleccionar ese nodo, bastante bien. Creo que se ve perfecto. Ahora deberíamos mover esta forma que acabamos crear y ponerla justo debajo de nuestro fondo, nuestro BG, dentro de nuestra página de aterrizaje, asegurarnos de que esté dentro de nuestra página de destino. Ahora está dentro, pero no es visible porque nuestro fondo es más grande que eso. Como pueden ver, aquí tenemos un marco, pero para enmascararlo adecuadamente, primero, necesitamos cambiarlo de fotograma a grupo, que pueda golpear “Comando G” o “Control G”, y voy a llamarlo BG, y luego mantenga presionada la tecla “Shift”, seleccione Vector 7, la forma que acabamos de crear en nuestro fondo, y presione el icono “Máscara” en la barra de herramientas. Ahí vamos. Acabamos de enmascarar nuestro fondo, y este es exactamente el resultado que buscaba. ¿ Se puede ver lo bonito que es? Si le agregamos algún contenido, se va a quedar increíble. Ahora podríamos modificarlo un poco. Si seleccionas este Vector 7 y presionas “Enter”, ahora estás en el modo de edición y puedes seleccionar este nodo y modificarlo. Creo que si pudiéramos modificar un poco esta curva, sería mucho, mucho mejor. Lo último que tenemos que hacer es cambiar el color de nuestros elementos de menú. Como puedes ver, no tenemos un buen contraste ya que utilizamos el color predeterminado para estos artículos. Voy a seleccionarlos todos, mantenga pulsada la tecla “Shift” y haga clic en ellos y cambie el campo a blanco. Perfecto. Chicos, eso es todo por este video. Espero que lo hayan disfrutado. En el siguiente video, terminaremos de diseñar juntos nuestra sección de héroes. Nos vemos entonces. 101. Sección de héroe: parte 2: Hey, bienvenido de nuevo. En este video, vamos a seguir diseñando juntos nuestra sección de héroes. Sin más preámbulos, empecemos. Echemos un vistazo a nuestra estructura alámbrica y veamos qué más necesitamos. Necesitamos un titular, necesitamos un subtítulo, y también un llamado a la acción. En el lado derecho, necesitamos tener una imagen. En primer lugar, vamos a crear nuestro titular. Voy a presionar T en mi teclado y hacer clic para crear una capa de texto. Pero como puedes ver, esta capa toma se ha creado dentro de mi grupo de fondo. Voy a moverlo fuera de ella así, bastante bien. Déjame escribir, banca inteligente para freelancers. Fantástico. Voy a seleccionarlo y vamos a cambiar el estilo del texto por el encabezamiento H1, que es el encabezamiento más grande que tenemos. Ahora déjame mostrar mi cuadrícula de diseño presionando Control G en mi teclado así. Voy a moverlo hacia el lado izquierdo, asegúrate de que esté alineado con el lado izquierdo de tu segunda columna, así. Entonces voy a disminuir su ancho así. Se ve bastante bien. Ahora voy a cambiar su color de negro a blanco para conseguir un mejor contraste. Déjame subirlo un poco. Ahí vamos. Perfecto. Ahora agreguemos nuestro subtítulo. Déjame duplicarlo, moverlo hacia abajo y lo voy a cambiar de rumbo H1 a body main. Entonces solo voy a copiar y pegar el texto que ya preparé para ahorrar tiempo. Déjame pegarlo. Ahí vamos. El texto es, Draft es una revolucionaria aplicación móvil construida para ayudarte a gestionar tu negocio fácilmente y ahorrarte dinero. Es interesante. Ahora déjame disminuir el ancho así para hacerlo un poco más pequeño. Perfecto. Ahora se ve increíble. Permítanme tomar el margen superior de esta capa de texto. Como se puede ver, se establece en 23. Voy a ponerlo a 30, así. Entonces necesitamos crear un botón. Permítanme seleccionar la herramienta de rectángulo, haga clic y arrastre para crear un rectángulo como este. De nuevo, está dentro de nuestro fondo. Yo lo voy a sacar. Para evitar que ese problema ocurra una y otra vez, voy a bloquear a este grupo. Seleccionemos BG y pinchemos en este icono de candado. Para este botón, voy a ajustar el ancho a 200, así y la altura 254. Mantengámoslo tal como está. Entonces lo voy a hacer redondeada. Vamos a ponerlo en 20. último, pero no menos importante, necesitamos darle un color. Voy a elegir secundaria oscura. Como pueden ver, aquí no tenemos un buen contraste. Posteriormente, podemos modificar un poco nuestro fondo, pero por ahora mantengamos este color como está. Entonces para este botón necesitamos un texto, así que voy a presionar T y dejarme escribir, Registrarse Ahora. Bastante bien. Yo lo voy a hacer blanco. Para este botón, voy a elegir el estilo de texto de subtítulos así. Amplíe, asegúrese de alinearlos tanto vertical como horizontalmente. Hasta el momento tan bueno, pero por este botón, le voy a añadir un icono. Un icono de flecha derecha que muestra a los usuarios si hacen clic en este botón, van a seguir adelante. Desde la carpeta de activos, voy a abrir iconos y tienes arrow-right.SVG. Arrástrelo y suéltelo aquí. Ahí vamos. Voy a subirlo en la lista de capas así. Voy a seleccionar este icono y mantener presionada la tecla Alt y vamos a ver cuál es el relleno entre estas capa de texto y este ícono. Como pueden ver, se establece en cuatro, voy a ponerlo en 10. Voy a moverlo hacia el lado derecho, luego seleccionarlos a ambos, agruparlos, golpear comando G o Control G, seleccionar el rectángulo y alinearlos al centro horizontalmente y también verticalmente. Ahora voy a seleccionar este grupo y nuestro grupo rectángulo luego una vez más y nombrarlo Botón Registrar. Bastante bien. ¿ Cuál es el margen superior de este margen? El margen superior se establece en 18. Voy a ponerlo en 30 píxeles así. Creo que es buena idea disminuir un poco la altura de línea de estos titulares. Por defecto, lo configuramos en 150 por ciento, pero creo que es demasiado ya que este tamaño de fuente es tan grande. Podemos desprenderlo de su estilo y podríamos reducirlo a 130 por ciento así. Ahora se ve mucho mejor. Asegúrate de modificar el margen para obtener 30 píxeles entre estos elementos. Perfecto. Como mencioné antes, no tenemos un buen contraste para estos botones, lo que puede que necesitemos modificar un poco nuestro fondo para obtener un mejor resultado. Voy a seguir adelante y abrir este grupo de antecedentes que bloqueamos. Voy a desbloquearlo y vamos a seleccionar estos color secundario oscuro. Este es el vector 1. En mi caso, lo voy a mover un poco hacia abajo y moverlo hacia el lado izquierdo para conseguir algo como esto. Este es el resultado que buscaba. Perfecto. Por el momento, tan bueno. Ahora que hemos creado nuestro contenido de texto para nuestra sección de héroes, es hora de enfocarnos en el lado derecho. Dado que esta página de aterrizaje es para una aplicación móvil, digamos aplicación móvil bancaria. Ya diseñé una sencilla pantalla móvil y la tienes en la carpeta de activos, imágenes, sección de héroes, y aquí tienes teléfono y algunas formas. Si lo arrastras y lo sueltas en tu proyecto, puedes ver la pantalla. Voy a acercar. Es una pantalla sencilla que ya diseñé. Dado que esta sección no se trata de diseño de aplicaciones móviles, lo preparo para ti con anticipación, que puedas poner cualquier imagen que desees del lado derecho. Perfecto. Ahora voy a subirlo un poco. Creo que aquí, se ve bien. Déjame mostrar mi cuadrícula de diseño. Voy a asegurarme de que esté alineado con mi cuadrícula de diseño bastante bueno. Como puedes ver, ya se ve bien. Pero para que se vea más interesante, quiero agregar algunas formas 3D a esta página de aterrizaje y tienes acceso a estas formas 3D que ya preparé. Si abres la sección de héroes, en la carpeta de activos, imágenes, sección de héroes, puedes ver que preparé cuatro formas diferentes para ti. Voy a seleccionar la forma 1 y arrastrarla y soltarla en mi proyecto así, luego la muevo hacia arriba y la pongo aquí. Se ve bastante bien. Déjame mover este tipo de letra un poco hacia abajo. Aquí se ve mucho mejor. También déjame arrastrar y soltar la segunda forma aquí. Voy a ponerlo justo ahí. Se pueden modificar los colores fácilmente ya que son vectores y también forma 3 la voy a poner justo por ahí. Pero para este, fin de crear el efecto de profundidad, le voy a añadir un efecto de desenfoque. Voy a agregarle el efecto y luego lo voy a cambiar a desenfoque de capa e incrementar la cantidad de desenfoque como esta. Usando esta técnica puedes crear estos efecto de profundidad de campo, y se ve mucho mejor, fantástico. último, pero no menos importante, vamos a arrastrar y soltar la forma 4 y ponerla aquí mismo. Ahora creo que es una buena idea seleccionar todos estos elementos del lado izquierdo y moverlos un poco hacia abajo. Como puedes ver, tengo tanto espacio en blanco aquí. Por espacios en blanco, no me refiero al color blanco como este fondo aquí. Espacio en blanco o espacio negativo es el espacio entre tus elementos. Es tan importante tener suficientes espacios en blanco en tu diseño para que tu diseño sea breve. Uno de los errores que veo cometer la mayoría de los principiantes, es que no tienen suficientes espacios en blanco. Si intentas mover este rumbo hacia abajo así y mover este patrón hacia arriba, como puedes ver, tu diseño no puede respirar. O por ejemplo, si las seleccionas todas y las mueves al lado derecho así, puedes ver que aquí no tienes suficientes espacios en blanco. Vas a modificar tu diseño hasta que estés satisfecho con el espaciado. Déjame moverlo un poco hacia abajo, bastante bien. Nuestra sección de héroes está lista. ¿ Se puede ver lo bonito que es? Déjame seleccionar mi mesa de trabajo y previsualizarla. Es increíble. Espero que te guste. Muy bien chicos, espero que hayan disfrutado de este video y los veré en el siguiente. 102. Sección de la caracteres: tarjeta de crédito: Hey, bienvenido de nuevo. En este video, vamos a empezar a diseñar nuestra primera sección de características, que es la sección de tarjetas de crédito. En primer lugar, permítanme echar un vistazo a nuestra estructura alámbrica. Como puedes ver para la primera sección de características, vas a tener una tarjeta de crédito en el lado derecho y un título y un subtítulo. Sin más preámbulos, empecemos. Primero lo primero, voy a mostrar mi cuadrícula de diseño. Voy a presionar Control G en mi teclado, y ahora mis cuadrículas de diseño son visibles. En el lado izquierdo, necesitamos tener un título y un subtítulo. Voy a crear una capa de texto como esta, y voy a cambiar el estilo de texto a H2 y aquí déjame escribir, una tarjeta para todos tus pagos. Voy a moverlo al lado izquierdo y dejarme disminuir su ancho a 366, por lo que cubre cuatro de nuestras columnas así. Entonces, lo que voy a hacer es cambiar su color, así que voy a elegir este color primario así. Voy a duplicarlo, moverlo hacia abajo y aquí necesitamos tener una descripción. Para esta descripción, voy a seguir adelante y cambiar el estilo de texto a Body Main, así, moverlo un poco hacia abajo y ya preparé un texto, así que lo voy a copiar y pegar desde mi portapapeles. Ahí vamos. Como se puede ver, la descripción va a ser ésta. Consigue tres por ciento de vuelta en todo lo que compres con la tarjeta Draft. Date de alta hoy y disfruta de cada aspecto de tu negocio. Está bien, ¿no? Ahora cambiemos el color. Ya no necesito el color primario, voy a necesitar el secundario de luz, así. Voy a seleccionar esta descripción y mantener presionada la tecla Opción o Alt en mi teclado y voy a pasar el ratón encima de mi título para ver el margen, pero voy a hacerlo 30 píxeles, así que voy a usar las teclas de flecha de mi teclado para bajarlo un poco. Ahí vamos, ahora tenemos 30 pixeles y se ve bastante bien. Todo está bien. Ahora podríamos seguir adelante y crear nuestra tarjeta de crédito del lado derecho. Para ello, voy a necesitar un rectángulo. Permítanme hacer click en Rectángulo, haga clic y arrastre para dibujar un rectángulo aquí y como pueden ver, el ancho está establecido en 466 píxeles y cubre cinco columnas, y la altura va a ser de 268 píxeles así. Creo que está bien, y déjame aumentar el radio de esquina a 24, así. Voy a ocultar mis cuadrículas de diseño por ahora porque no necesito eso. Voy a presionar Control G en mi teclado. ¿ Qué necesitamos para una tarjeta de crédito? Necesitamos un nombre en la parte superior, necesitamos el número de la tarjeta de crédito, necesitamos el logotipo del emisor de la tarjeta de crédito, y básicamente eso es todo. En primer lugar, voy a cambiar su color a nuestro oscuro secundario, así y luego le voy a agregar formas simples con el fin de crear un fondo tan grande para nuestra tarjeta de crédito. Para ello, voy a seleccionar la herramienta Estrella así, mantenga pulsada la tecla Mayús, haga clic y arrastre así, y como pueden ver, tenemos una estrella, pero lo que voy a hacer es cambiar su conteo de 5 a 7 para conseguir algo así y después de eso voy a aumentar el radio de esquina así. Puedes mantener presionada la tecla Mayús en tu teclado y hacer clic en este pequeño círculo en la parte superior y mover el ratón hacia abajo. Entonces voy a cambiar la relación. Como se puede ver aquí, tenemos tres círculos diferentes. El primero es el radio de esquina, el segundo es la relación entre los bordes, y el último es contar. Nuestro conteo ya está establecido, sin embargo, voy a cambiar la relación. Voy a mantener presionada la tecla Mayús, hacer clic y arrastrar. Voy a aumentarlo a alrededor de 74 o 75 así y luego voy a aumentar un poco el radio de esquina para suavizar esas esquinas. Puedes jugar con estos números y valores para conseguir la forma que buscas, pero creo que es una forma genial para empezar. Si no estás satisfecho con el aspecto de esta forma, puedes modificar fácilmente esos valores y crear tu propia forma y esto es lo que quiero que hagas. No solo copie y pegue lo que hago, asegúrate de crear tu propia versión y usar tu propia creatividad. Es así como te convertirás en un buen diseñador. Ahora voy a cambiar su color a un morado claro. Pero no quiero usar nuestros letreros de colores, voy a poner el color a CAC7FF, ahí vamos. Es el color que buscaba. Voy a subirlo un poco. Como puedes ver, esta estrella está fuera de esta tarjeta de crédito lo cual es un problema por ahora, pero necesitamos enmascararla de alguna manera. Si los selecciono a ambos, si mantengo pulsada la tecla Mayús y los selecciono y hago clic en Máscara, nuestro rectángulo desaparecerá. Vamos a intentarlo, ahí vamos. Para evitar eso, podríamos duplicar nuestro rectángulo. Voy a seleccionar el rectángulo, lo voy a duplicar, Comando D o Control D y como pueden ver ahora tengo dos rectángulos. Voy a seleccionar la superior y mantener pulsada la tecla Mayús y seleccionar mi estrella y ahora voy a dar clic en Máscara. Ahí vamos. Aquí usamos este rectángulo para enmascarar a nuestra estrella, y este rectángulo se queda como límites de nuestra tarjeta de crédito así. Déjame seleccionar esta estrella y moverla así. Bastante bien. Voy a hacerlo un poco más grande. Entonces lo voy a duplicar, moverlo hacia el lado derecho y también lo voy a mover hacia abajo, como pueden ver, está por encima de nuestra primera forma. Voy a moverlo hacia abajo. Nada ha cambiado porque ambos usan el mismo color. Voy a seleccionar mi segunda forma, que ahora está por debajo de mi primera forma y le voy a dar un código de color de 9A94FF así, bastante bueno. Voy a moverlo al lado derecho. ¿ Qué más necesitamos? Voy a volver a seleccionar mi primera forma, duplicarla, moverla hacia abajo así, y dejarme escalarla. Voy a presionar K en mi teclado y mantener presionada la tecla Mayús, hacer clic y arrastrar así, moverlo hacia abajo y ahora voy a ajustar su color a mi oscuro secundario, algo así. Por último, le voy a dar un color de acento también. Lo que voy a hacer es duplicar esta última forma que acabamos de crear Command D o Control D y además voy a seleccionar mi primera forma y duplicarla también. Entonces voy a seleccionar este Star 4 en mi caso, si echa un vistazo a la lista de capas del lado izquierdo, y voy a cambiar su color para acentuar así. No obstante, lo voy a enmascarar usando este Star 5 que acabamos duplicar así que lo que voy a hacer es seleccionarlos a ambos para Star 5 este, mantenga pulsada la tecla Mayús y haga clic en esta Estrella 4 y luego voy a dar click en Máscara, ahí nos ir. Acabamos de crear una nueva máscara y se ve genial. No obstante, voy a modificar un poco la posición de mis formas para que se vea mejor. Voy a seleccionar esta Estrella 2, moverla hacia abajo así para cubrir el lado derecho de mi tarjeta de crédito y además voy a seleccionar otras formas, Grupo Máscara, Estrella 1 y Estrella 3, y moverlas hacia el lado izquierdo, así . Nuestra tarjeta de crédito se ve muy bien ahora, así que hemos creado un fondo sencillo usando formas simples. Ahora necesitamos agregar los detalles. Como mencioné antes, para esta corriente de crédito, necesitamos un nombre en la parte superior así que voy a seleccionar la herramienta de texto y crear una capa de texto y vamos a escribir un nombre aleatorio como Ronald Richards, así. Voy a seleccionarlo, y en la lista de capas como puedes ver, está por debajo de nuestra tarjeta de crédito. Voy a subirlo así y dejarme cambiar el estilo del texto a H4, así y voy a ajustar el color a blanco. Ahora lo que voy a hacer es seleccionar todas las capas de nuestra tarjeta de crédito que es este grupo de máscaras y este rectángulo. Es tan importante este Rectángulo 48 es los límites de tu tarjeta de crédito por lo que debes asegurarte de seleccionar eso también. Comando G o Control G para crear un grupo y lo voy a llamar tarjeta de crédito. Ahora puedo acercar. Comprobemos el relleno. Para esta capa de texto, voy a establecer un relleno superior e izquierdo de 40 píxeles. Voy a moverlo hacia el lado derecho y bajarlo así. Ahí vamos. Ahora voy a duplicarlo, moverlo hacia abajo y aquí necesitamos tener el número de la tarjeta de crédito. Escribamos algo como este espacio 4242 mantenga presionada la tecla Mayús y presione ocho, 1, 2, 3, 4 para crear estas estrellas espacio, nuevo, 1, 2, 3, 4 espacio 2456, algo así. Para esta capa de texto, voy a cambiar el estilo de texto a Main, y va a tener un relleno izquierdo de 40 píxeles y un relleno inferior de 40 píxeles como este. último, pero no menos importante, necesitamos crear un logotipo. Puedes seguir adelante fácilmente y descargar por ejemplo el logotipo de la tarjeta Visa o el logotipo de MasterCard. No obstante, necesitamos crear un logotipo de MasterCard simplemente por nosotros mismos porque va a ser único para nuestro diseño. Como sabemos, el logotipo de la MasterCard es dos simples círculos combinados juntos. Lo que voy a hacer, voy a seleccionar la elipse, mantener presionada la tecla Mayús, hacer clic y arrastrar para dibujar un círculo. Voy a establecer el ancho y la altura a 35 así. Hagámoslo blanco, y ahora lo voy a duplicar, moverlo hacia el lado derecho y en la lista de la capa, mover esta nueva forma, que es el círculo derecho hacia abajo y ponerlo debajo de nuestro primer círculo. Después selecciona el segundo y disminuye la opacidad del 100 por ciento al 75 por ciento, así. Voy a moverlo un poco al lado izquierdo y ahí vamos. Voy a agruparlos, Comando G o Control G, moverlos al lado derecho, su relleno derecho va a ser de 40 y su relleno inferior va a ser de 40 también. Voy a alejarme un poco, así que se ve fantástico. Podríamos, por supuesto, modificar un poco nuestros antecedentes para que se vea aún mejor. Voy a seleccionar mis formas, este Grupo de Máscara, mantenga pulsada la tecla Mayús y Control de su teclado o la tecla Mayús y Comando y seleccione Estrella 1 y Estrella 3 y moverlas un poco hacia el lado derecho y también hacia abajo. Ahora creo que se ve mejor. Nuestra tarjeta de crédito está lista. Voy a seleccionar todas las capas. Una vez más, agruparlos y voy a llamarlo tarjeta de crédito. Lo último que podemos hacer es agregarle alguna sombra de gota. Voy a seguir adelante y añadir efectos a esta tarjeta. Voy a abrir los Ajustes de Efectos y por su color, voy a usar el cuentagotas y elegir este color oscuro secundario así y voy a disminuir la opacidad al 15 por ciento y finalmente, cambiemos la cantidad de desenfoque al 100 y la Y a 50. Ahí vamos. Acabamos de crear una sombra de gota muy grande para esta tarjeta de crédito. Se ve increíble. Creo que la altura de línea de este título del lado izquierdo es un poco demasiado. Lo que voy a hacer es seleccionar este título y lo voy a desprender de su estilo y luego voy a disminuir la altura de línea de 150 por ciento a 120 por ciento así. Voy a moverlo hacia abajo para obtener un margen inferior de 30 píxeles. Voy a mantener presionada la tecla Mayús y seleccionar mi descripción, agruparlas, y voy a nombrarla Característica 1 y mantengamos pulsada la tecla Mayús y seleccionemos nuestra tarjeta de crédito, alinearlas ambas verticalmente. Muy bien chicos, ahora vamos a seleccionar ambos grupos, agruparlos, Control G o Command G y llamarlo Sección Característica 1 y su margen superior va a ser de 260 píxeles. Voy a bajarlo así. Muchas gracias por ver este video. Espero que lo hayas disfrutado, y te veré en el siguiente. 103. Sección de las caracteres: estadísticas: Hey, bienvenido de nuevo. En este video, vamos a empezar a diseñar nuestra segunda sección de características, justo debajo de esta sección de tarjetas de crédito. En primer lugar, permítanme echar un vistazo a nuestro marco de alambre y ver qué necesitamos diseñar. Como puedes ver para nuestra segunda sección de características, en el lado izquierdo, necesitamos tener algunas cartas, dos cartas pequeñas en la parte superior y una carta grande en la parte inferior. En el lado derecho necesitamos tener un encabezado, una descripción, y también un botón. Lo que tenemos que hacer es seleccionar estos título y descripción que creamos para nuestra sección de función 1, así que voy a hacer doble clic en eso. Como puedes ver en la lista de capas, se selecciona la función 1, voy a copiar, así que pulsa “Comando C” o “Control C” en tu teclado y la voy a pegar. aseguramos de que esta nueva capa que acabamos de pegar esté fuera de esta sección de característica 1. Si está dentro así, asegúrate de sacarlo, y luego usando mi tecla de flecha, puedo moverlo hacia abajo así. Ahora, déjame presionar “Control G” en mi teclado, y si no conoces estos atajos, puedes fácilmente dirigirte a estos ícono de signo de interrogación en la esquina inferior derecha puedes hacer clic en eso, y hay una opción llamada “Atajos de teclado”. Voy a dar click en eso. Desde ahora estoy usando macOS me muestra solo los atajos de mac. Pero si estás usando Windows, podrían ser diferentes. Si me dirijo a “Ver” aquí puedes ver para cuadrículas de diseño, está escrito Control G, y puedes consultar todos los demás atajos aquí. Yo lo voy a cerrar. Ahora déjame mover esta capa al lado derecho aquí, así. Déjame ponerlo justo ahí. Perfecto. Como puedes ver, cubre cuatro columnas, luego voy a renombrarlo característica 2. Si hace doble clic en su nombre, puede renombrarlo fácilmente. Por último, necesitamos modificar el contenido. Voy a copiar y pegar el texto que ya preparé de mi portapapeles. Por el título, voy a escribir, manejar tus finanzas como un pro en poco tiempo. Déjame mover esta descripción hacia abajo para obtener un margen superior de 30 píxeles como este. Para la descripción, voy a volver a copiar y pegar la descripción de mi portapapeles, y ahí vamos. La descripción es así. Hacemos redactar la teneduría de libros, la banca, y las facturas están todos en un solo lugar. Siempre sabrás dónde estás parado. Justo debajo de eso, necesitamos agregar un botón, un botón aprender más. Lo que voy a hacer es seleccionar estos botones “Registrarse ahora”, de nuestra sección de héroes, copiarlo, “Control C” o “Comando C” y pegarlo y moverlo hacia abajo. Ahí vamos. Voy a poner su margen superior a 30, para mantener todo consistente. Por último, necesitamos cambiar el texto para aprender más. Déjame moverlo al lado derecho para conseguir un relleno derecho de 10 píxeles. Perfecto. Para que este botón se vea más interesante, le voy a añadir algunas formas. Déjame ocultar mis cuadrículas de diseño y luego voy a seleccionar la herramienta Pluma. Haga clic aquí, una vez, haga clic aquí y arrastre así para crear una línea curva. Haga clic una vez más y arrastre y finalmente, conecte sus nodos juntos. Ahora que nuestro camino está cerrado, podemos darle un relleno. Déjame quitar el trazo y agregarle relleno. Perfecto. Entonces voy a añadir un gradiente a éste. Voy a ir y dar click en esto, y luego voy a abrir este menú drop en la parte superior y cambiarlo de sólido a lineal. Ahora tenemos un gradiente lineal. Para el primer color, selecciono eso, puedo establecer el código en 554DDE, para obtener este morado. El segundo color va a ser el mismo. Voy a copiar este código de color y seleccionar el segundo color y pegarlo aquí así. Asegúrate de que la opacidad esté establecida en cero por ciento para nuestro segundo color. Fantástico. Ahora, necesito enmascarar esta forma. ¿Cómo puedo hacer eso? En primer lugar, permítanme seleccionar el rectángulo, este rectángulo 47 en mi caso. Entonces lo voy a duplicar, comando D o Control D y seleccionar este nuevo rectángulo que acabamos de crear. Presione la tecla Control o la tecla Comando su teclado y seleccione la forma que acabamos de crear. Este, este morado, así. Ahora que ambos están seleccionados, haga clic en “Icono de máscara” en la barra de herramientas. Ahí vamos. Ahora, acabamos de enmascarar esta forma y podemos moverla fácilmente así. Perfecto. No obstante, voy a hacerlo un poco más pequeño. Déjenme mantener presionada la tecla “Shift” y escalarla hacia abajo, y la voy a girar un poco. Bastante bien. Fantástico. Ahora permítanme seleccionar esta forma, duplicarla, comando D o Control D, moverla hacia arriba, haga clic derecho sobre eso y voltearla verticalmente. Al igual que esto. Se ve increíble, es bastante guay. último, pero no menos importante, necesitamos modificar el color de esta nueva forma. Voy a cambiar el gradiente de color a F44E77 así, y lo mismo para nuestro segundo color como este. Se puede modificar el gradiente usando este manejador. Perfecto. Déjame modificarlo para la primera forma también. Bastante cool. Es increíble, ¿no? Ahora que ya está listo el lado derecho de nuestra segunda sección, podemos empezar a diseñar la sección izquierda. Déjame mostrar las cuadrículas de diseño y necesitamos empezar a crear nuestras tarjetas. Necesitamos tener dos tarjetas pequeñas y una carta grande. Voy a seleccionar la herramienta de rectángulo de la barra de herramientas, hacer clic y arrastrar. Ahora tengo un rectángulo. No obstante, voy a establecer su ancho en 223 píxeles así, y es altura a 180 así. Además, voy a cambiar el radio de esquina a 50. Todo se ve muy bien. Lo siguiente que voy a hacer es cambiar su color. Voy a cambiarlo a blanco. No obstante, como puedes ver, no es visible porque nuestro color de fondo también está establecido en blanco, lo cual es un problema. ¿ Cómo podemos arreglar eso? Podemos seleccionar fácilmente la mesa de trabajo de la página de aterrizaje. Entonces como pueden ver, el relleno está puesto en blanco y lo voy a cambiar a nuestro color neutro así. Ahora, nuestra tarjeta es visible, y crea un bello contraste. No obstante, para que se vea mucho mejor, le agregaremos sombra de gota y trazo. Déjame agregarle un trazo. Voy a elegir el signo de color de trazo que ya preparamos así, después dejarme modificar su grosor a 0.5. Ahí vamos. Lo último que necesitamos es algo de sombra de gota, así que voy a dar clic en este icono más para agregar algunos efectos y dejarme modificarlo. Para el Blair, voy a ponerlo en 50. Para la Y, voy a ponerlo en 25, lo que 50 dividido por 2 es igual a 25. Para el color, voy a escribir el código de color 16194F así. Por último, permítanme disminuir la opacidad al cinco por ciento. Ahí vamos. Todo está listo, perfecto. Déjame mostrar las cuadrículas de diseño y le voy a agregar una capa de texto, y déjame escribir balance. Muestra el equilibrio del usuario justo debajo de esta capa de texto. Ahora voy a usar otro estilo de texto. Usemos main, body main. Se ve bastante bien. Voy a ajustar su relleno superior a 40, y es relleno izquierdo a 40 también. Duplicarlo, Comando D o Control D, muévalo hacia abajo, y aquí intentemos $5,600. Para esta capa de texto, voy a usar H3 porque necesitamos tener una buena jerarquía ya que esta cantidad, que es el saldo, es más importante que el título en sí, necesitamos usar una fuente más grande y también una negrita. Es por ello que uso H3 para eso. Por último, voy a poner su color a nuestro morado. Ahí vamos. Déjame ajustar su relleno inferior a 40, y ahora se ve increíble. ¿Qué más necesitamos? Necesitamos crear otra tarjeta justo al lado para el monto de la última transacción. No obstante, antes de hacer eso, quiero que pausas el video ahora mismo e intentes crearlo tú mismo. No necesitas hacer tanto, solo necesitas duplicar los elementos que acabamos de crear y solo modificar el contenido. Pausa el video y cuando termines, puedes volver a reproducir el video. Espero que lo puedas hacer tú mismo, ahora es mi turno. En primer lugar, voy a seleccionar todos estos elementos. Déjame seleccionarlos, agruparlos, y lo voy a llamar Balance Card. Ahí vamos. Ahora lo voy a duplicar, Comando D o Control D, muévalo hacia el lado derecho, asegúrate de que toque tu sexta columna. Como se puede ver, el margen se establece en 20. Ahora voy a hacer doble clic en mi capa de texto y dejarme cambiarla a Última Transacción. Cambiemos el monto a 230 dólares. Bastante bien. Voy a alejarme y se ve genial. El último que necesitamos antes de terminar de diseñar nuestra segunda sección de funciones es una tarjeta gráfica. Pero antes de eso, asegúrate de cambiar el nombre esta última tarjeta de transacción para mantener todo organizado. Va a ser Última Tarjeta de Transacción. Entonces, voy a seleccionar una de estas tarjetas, duplicarla, moverla hacia abajo así, y voy a renombrarla a Chart y seleccionar estas capas de textos y eliminarlas. Ya no los necesitamos. Para nuestro gráfico, necesitamos una tarjeta grande, así que la voy a hacer más grande. Su ancho se va a ajustar a 466 píxeles y su altura se va a ajustar a 246 píxeles. Podremos modificarlo posteriormente si no estamos satisfechos con el resultado. Pero por ahora se ve genial. Déjame acercar. Perfecto. En realidad vamos a diseñar un gráfico de barras simple. Vamos a tener lunes, martes, miércoles, jueves, viernes, sábado y domingo, y algunos bares. Permítanme empezar con las capas de texto. Voy a presionar T en mi teclado y dar clic aquí. Voy a escribir M-O-N, que representa el lunes. ¿ Qué estilo de texto es adecuado para este? Creo que este pequeño es genial. Además, voy a cambiar su color a luz secundaria. No obstante, tenemos un problema y ese es el peso de esta capa de texto. Lo que voy a hacer es desconectarlo de su estilo y cambiarlo demasiado audaz. Ahora, se ve mucho, mucho mejor. Mover un poco hacia el lado izquierdo, duplicarlo. Muévelo al lado derecho, y déjame escribir T-U-E, duplicarlo. Muévelo al lado derecho, y luego W-E-D. Nuevamente, duplicarlo. No vamos a establecer el relleno por ahora porque primero voy a crear las barras. Posteriormente nos ocuparemos del espaciado. Para cada día, necesitamos tener dos bares uno al lado del otro. Voy a seleccionar la Herramienta Rectángulo, haga clic y arrastre así para crear un rectángulo alto y luego hacerlo completamente redondeado. Puedes ajustarlo a 20 para asegurarte de que sea redondeado y su ancho va a ser 14. Voy a ajustar el radio de esquina a 25 para asegurarme de que esté redondeado. Para esta barra, permítanme establecer la altura en algo así como 134. Es sólo un número aleatorio. No significa nada. Puedes hacerlo más corto o más alto. Depende totalmente de ti. Pero creo que 134 es un buen número. Entonces voy a cambiar el color a nuestro primario, duplicarlo, Control D o Comando D, moverlo al lado derecho y hacerlo más corto y cambiar el color a Acento. Asegúrate de tener un relleno de cuatro píxeles entre ellos, así. Bastante bien. Nuestro primer día está listo. No obstante, voy a seleccionar ambas barras. Presiona la tecla Mayús en tu teclado y haz clic en cada uno de ellos para seleccionarlos ambos al mismo tiempo. Agruparlos, Control G o Comando G, y llamémoslo Barras. Entonces voy a mantener presionada la tecla Mayús y seleccionar “Lunes” y alinearlos horizontalmente así. Déjame acercar. El relleno inferior va a ser de 10 píxeles, así que los voy a mover hacia arriba por dos píxeles y ahí vamos. Ahora voy a seleccionar los “Bares”, duplicarlo, moverlo al lado derecho, así y voy a modificar un poco su altura. Si mantienes pulsada la tecla Comando o la tecla Control tu teclado y haces clic en una de estas barras, puedes seleccionar esa capa en particular y puedes modificar fácilmente su altura así. Voy a ponerlo en 98. El siguiente, voy a ponerlo en algo así como 40. Se ve bien. A continuación, asegúrate de que esté alineado con tu capa de texto al centro. Perfecto. Seleccionarlo, duplicarlo, moverlo hacia el lado derecho. Voy a modificar de nuevo su altura. Solo necesitas repetir este proceso una y otra vez para crear un gráfico de barras muy único. ¿ Se puede ver lo sencillo que es crear estos gráficos? Yo los voy a alinear, perfecto. Duplicarlo, muévalo al lado derecho así. Lo último que tenemos que hacer es agrupar estas barras con su nombre correspondiente. Voy a seleccionarlos, lunes, agruparlos , y lo voy a llamar M-O-N. Voy a adelantar rápidamente este proceso para ahorrar algo de tiempo. Ahora que todos los grupos están listos, puedo seleccionar todos los grupos, mantener pulsada la tecla Mayús y seleccionarlos uno por uno. Asegúrate de que todas ellas estén seleccionadas y puedo distribuir un espacio parejo entre ellas. Si te diriges a la sección de alineación en el Inspector, puedes ver este menú desplegable. Simplemente haga clic en este icono, “Más opciones” y haga clic en “Distribuir Espaciado Horizontal”. Ahí vamos. Ahora está fijado en 16. Voy a ponerlo a 20 usando este mango rosa. Por último, voy a agruparlos y déjame llamarlo Chart. Ahí vamos. último, pero no menos importante, necesitas alinear este gráfico con tu Tarjeta Gráfica. Voy a seleccionar esta Tarjeta Gráfica y este gráfico de barras al mismo tiempo y alinearlos horizontal y verticalmente. También puedes agruparlos y llamarlo Tarjeta Gráfica. Ahí vamos. Nuestra Tarjeta de Gráfica está lista. Déjame revisar su relleno superior. Se establece en 22. Voy a ponerlo en 20 para mantener todo consistente. Ahora, podemos seleccionar todas estas tarjetas y moverlas hacia arriba así, agruparlas y llamarlo Cartas. Además, organicemos todo en el lado derecho. Tenemos este Grupo de Máscaras, que incluye estas formas. Mantenga pulsada la tecla Mayús y seleccione este “Botón Registrarse”. Podemos renombrarlo con seguridad, agruparlos y llamarlo, “Botón Aprender más”. Después puedes mantener presionada la tecla Mayús y seleccionar tus textos. Nuevamente, agruparlos y llámalo “Característica 2", y puedes alinearlos verticalmente. Mantenga pulsada la tecla Mayús, seleccione “Tarjetas” y el grupo “Característica 2" y alinéelos verticalmente. Ahí vamos. Nuestra sección Característica 2 está lista. Voy a mantener presionada la tecla Mayús, seleccionarlos a ambos, agruparlos, y llamémoslo “Característica 2 - Sección” así. Bastante bien. Su margen superior va a ser de 260 píxeles. Voy a moverlo hacia abajo y ahí vamos. Todo se ve muy bien. Eso es todo por este video. Espero que lo hayas disfrutado y te veré en el siguiente. 104. Sección de la caracteres: apoyo: Hola a todos. Bienvenido de nuevo. En este video, vamos a diseñar nuestra última sección de funciones, que es la sección de soporte. Déjenme echar un vistazo a la alambrada. Como se puede ver en el lado izquierdo, necesitamos tener algunas capas de textos, como de costumbre, como nuestras secciones anteriores. Por lo que necesitamos tener un título, una descripción, y además de estas capas de textos, necesitamos tener algunas imágenes de perfil, como esta. Por el lado derecho, necesitamos diseñar burbujas de chat de impresión 3D, se va a presentar cómo el equipo de soporte responde a las preguntas del usuario. En primer lugar, necesitamos aumentar el tamaño de altura de nuestra mesa de trabajo de página de aprendizaje, así que voy a seleccionar eso y déjame aumentar la altura a, digamos 4,000 por ahora, más tarde podemos modificarla. Voy a acercar, y lo que necesito son algunas capas de textos, así que voy a seguir adelante y hacer doble clic en este contenido de la característica 1, copiarlo y déjame pegarlo aquí mismo. Voy a mostrar mis cuadrículas de diseño, déjame ponerlo al lado izquierdo así, y el título va a ser, “Te apoyamos en cinco idiomas diferentes”. Voy a copiarlo y pegarlo de mi portapapeles así. Déjame mover esta descripción hacia abajo y asegurarme de que el margen superior esté establecido en 30, así, y déjame copiar y pegar la descripción también. Va a ser, nuestro equipo de soporte está aquí para ayudarte en cinco idiomas, inglés, francés, español, polaco y alemán. En la parte inferior, necesitamos tener algunas imágenes de perfil. Para ello, necesitamos crear un círculo, así que voy a hacer clic y arrastrar, y voy a establecer el ancho y la altura en 60 píxeles, déjame moverlo hacia abajo. Para cada círculo, necesitamos tener una imagen. Antes de añadir la imagen a nuestro círculo, voy a agregarle un trazo, y cambiar el grosor de 1-1.5, y modificar el color a blanco, así. Entonces voy a seleccionar eso y duplicarlo, Comando D o Control D, moverlo al lado derecho, una vez más, duplicarlo, y dos veces más, ahí vamos. En total, vamos a tener cinco imágenes diferentes. Ahora, ¿cómo podemos agregar la imagen a estos círculos? Podemos seleccionarlos todos y dar clic en este menú de hamburguesas en la esquina superior izquierda e ir a los plugins, y aquí voy a ir y dar clic en Content Reel plugin. Si aún no has instalado este plugin, asegúrate de hacer click en Administrar plugins, y en el lado izquierdo puedes ver todos los plugins instalados. Si no instalaste ningún plugin, puedes ir fácilmente a la comunidad, y luego ir a la pestaña de plugins, y desde aquí puedes encontrar Content Reel y dar clic en el botón Instalar en el lado derecho. Si bien se seleccionan estos círculos, voy a seguir adelante y ejecutar estos contenidos plugin carrete. Entonces en la parte inferior tenemos dos opciones, Mi contenido y la biblioteca de contenidos. Voy a seguir adelante y dar clic en Biblioteca de contenidos, luego ir a imágenes. Aquí tienes un montón de bibliotecas, tienes Avatares de Microsoft y algunas otras bibliotecas. Déjame elegir Avatares de Microsoft, que incluye tanto imágenes masculinas como femeninas, y voy a dar click en Aplicar todo. Ahí vamos. Ahora tenemos imágenes aleatorias recortadas a nuestros círculos, y este es exactamente el resultado que estábamos buscando. No obstante, si no estás contento con las imágenes, puedes hacer click fácilmente en Aplicar Todo nuevamente para obtener el mejor resultado posible. Asegúrate de mantener un equilibrio para no obtener solo fotos masculinas o solo femeninas. Por supuesto, depende del propósito de su diseño y del propósito del producto. Creo que ahora tenemos un buen resultado. Voy a cerrar el plugin, nuestras imágenes están listas, puedes seleccionarlas todas, agruparlas, Command G o Control G, y llamémoslo Imágenes de Perfil. Justo al lado de estas imágenes, necesitamos tener un número, una capa de texto, así que voy a presionar T en mi teclado y crear una nueva capa de texto, y voy a escribir más 20, e indica que hay 20 personas más trabajando en el departamento de apoyo. Voy a subirlo un poco, asegurarme de que estén alineados verticalmente. Pongamos su relleno izquierdo en 10, y voy a elegir un estilo de texto para ello. Voy a elegir principal y déjame cambiar el color, usemos nuestros estilos de color, Secundario/Luz. Ahí vamos. Se ve increíble. El lado izquierdo está listo. ¿ Y el lado derecho? Como mencioné antes, necesitamos crear tres burbujas de chat diferentes. Necesitamos usar la herramienta de rectángulo, voy a seleccionar eso, clic y arrastrar, así, asegurarme de establecer el ancho en 370, y luego voy a modificar el radio de esquina, déjame cambiarlo a 30. Pero necesito establecer el radio de esquina de esta esquina en particular, la esquina inferior izquierda a cero. Para ello, puedes dirigirte fácilmente al inspector y hacer clic en este icono de esquinas independientes. Ahora puedes modificar el radio de esquina de forma independiente. Voy a poner la parte inferior izquierda a cero, ahí vamos, y finalmente, podemos cambiar el color a blanco. Ahora necesitamos agregar una imagen de perfil justo al lado de esta burbuja de chat, así que necesitamos crear un círculo, así, y lo voy a hacer más pequeño, así que vamos a establecer el ancho y la altura en 55 píxeles. Muévelo hacia abajo y asegúrate de que esté alineado con tu burbuja de chat, y su relleno correcto se va a establecer en 20 píxeles. Vamos a seguir adelante y ejecutar nuestro plugin de Contenidos Reel. Una vez más, ve a imágenes de la biblioteca de contenidos, y vuelve a elegir Avatares. Pero esta vez voy a elegir a una hembra, porque estoy bastante seguro de que esta persona necesita ser una hembra. Entonces déjame elegir éste, bastante bien. Voy a cerrarlo y necesitamos añadir su nombre y también la marca de tiempo. Voy a escribir, por ejemplo, Claire, 12:35, y para esto, voy a cambiar el estilo del texto a subtítulo. Asegúrate de que esté alineado con nuestra burbuja de chat y su relleno superior va a ser de 10 píxeles. Por último, déjame cambiar el color a Secundario/Luz, fantástico. Lo último que tenemos que hacer es agregar el mensaje, así que voy a agregar una capa de texto aquí y dejarme escribir, Hola Mike. ¿ En qué te puedo ayudar? Una típica pregunta de apoyo, por supuesto. Voy a cambiar el estilo del texto por el principal así. Asegúrate de que esté alineado con tu burbuja de chat verticalmente y es el relleno izquierdo va a ser de 40 píxeles, así. Como se puede ver, el relleno superior se establece en 30 y el relleno inferior se establece en 29. Para que sea 30, voy a elegir nuestro rectángulo o burbuja de chat, y pongamos la altura en 90 en lugar de 89. Ahora se ve genial. Necesitas asegurarte de alinear tu imagen de perfil con el rectángulo. Una vez más, también estas capas de texto se deben mover en un píxel para obtener el relleno superior de 10 píxeles. último pero no menos importante, necesitamos cambiar su color a Secundario/Luz, fantástico. Nuestra primera burbuja de chat está lista. Ahora seleccionemos primero estas dos capas, así. Voy a dar clic y arrastrar, y como pueden ver, nuestro rectángulo y esta pregunta está seleccionado, agruparlos y llamémoslo burbuja de chat. Después selecciona esta burbuja de chat con otros elementos. Mantenga pulsada la tecla Mayús y haga clic en ellas. Agruparlos, y ahora vamos a escribir Mensaje 1. Ahora lo voy a duplicar, Comando D o Control D, moverlo hacia abajo así. El siguiente mensaje va a ser nuestro mensaje de usuarios, y se debe cambiar la dirección de estas burbujas de chat. ¿Qué voy a hacer? Primero, voy a seleccionar este rectángulo, así que asegúrate de que tu rectángulo esté seleccionado, no el grupo de burbujas de chat, haz clic con el botón derecho en eso, y voltearlo horizontalmente, por lo que se cambie la dirección. Entonces voy a seleccionar de nuevo este rectángulo y modificar su color. Para este, voy a ponerlo Secundario/Luz y seleccionar la pregunta que es esta capa de texto, desconectarla de su estilo, y ponerla en blanco. Entonces voy a hacer doble clic en esta capa de texto, moverla hacia el lado derecho y asegurarme de que esté alineada con nuestra burbuja de chat, y finalmente, necesitamos mover esta imagen de perfil hacia el lado derecho. Necesitamos conseguir un relleno de 20 píxeles derecho, fantástico. Ahora podemos mover nuestro mensaje a grupo hacia el lado izquierdo. Voy a mostrar mis cuadrículas de diseño así, bastante bien. No olvides cambiar el nombre y la hora, voy a escribir Mike, y por el momento, pongámoslo a 12:36. Alinearlo, puedes alinearlo al lado derecho aquí también, y la capa de texto se va a cambiar a, me roban mi tarjeta de crédito, así. último, pero no menos importante, necesitamos cambiar nuestro panorama. Seleccionemos este círculo, asegurémonos de que esta capa esté seleccionada y ejecutemos el plugin Contenidos Reel, una vez más, vaya a Biblioteca de contenido, vaya a Imágenes. Pero esta vez voy a usar otra biblioteca, por ejemplo, esta. No importa cuál, depende totalmente de ti. Pero permítanme elegir, por ejemplo, este. Creo que se ve genial, perfecto. Nuestro Mensaje 2 está listo también. Necesitamos tener un mensaje más, y ahora es tan fácil porque necesitamos solo seleccionar Mensaje 1, duplicarlo, Comando D o Control D, moverlo hacia abajo así. Asegúrate de configurar correctamente tu espaciado. El margen superior de este Mensaje 2 va a ser de 40 píxeles así para éste también. Porque la consistencia es la clave en el diseño. Escribamos, no, no hay problema. Nosotros nos encargaremos de esto. También puedes agregarle un emoji, pero lo vamos a dejar como está. Déjame disminuir su ancho a 258, así, moverlo hacia arriba, y además necesitamos agrandar esta burbuja de chat porque ahora tenemos dos líneas. Asegúrate de seleccionar este rectángulo, y voy a cambiar la altura de 90 a 110 para tener algo de espacio aquí. Una vez más, alinearlos, asegúrate de mover tu capa de texto hacia abajo y también alinear esta imagen de perfil, fantástica, todo se ve muy bien. Ahora vamos a seleccionar todos estos mensajes, agruparlos, y llamémoslo Mensajes. Voy a seleccionar todo el contenido del lado izquierdo, agruparlos, y vamos a escribir Feature 3, mantenga pulsada la tecla Mayús y seleccione los Mensajes, alinearlos verticalmente, agruparlos, y llamémoslo Sección Feature 3. Ya casi terminamos, sin embargo, déjame mover esta Sección 3 hacia abajo para obtener un margen superior de 260 píxeles. Como puedes ver aquí, tenemos espacios vacíos. Para llenar estos espacios, podríamos agregar algunas formas simples a nuestro fondo. No hace falta que sea muy complicado, por ejemplo, podemos añadir algunos círculos. Permítanme elegir la Herramienta Elipse, mantenga presionada la tecla Mayús, haga clic y arrastre para crear un círculo, y permítanme cambiar el ancho y la altura a 16 píxeles, así. Entonces elijamos nuestro color Secundario/Luz, lo desconectemos de su estilo, y disminuyamos la opacidad al 10 por ciento para obtener este círculo de luz. Entonces lo voy a duplicar hacia el lado derecho, una vez más, duplicarlo, Comando U o Control D, y repetir este proceso hasta conseguir seis círculos seguidos, seleccionarlos todos, agruparlos, duplicarlo, moverlo hacia abajo, asegúrese de que el relleno entre ellos y el relleno entre estas filas sea el mismo, por lo que en este caso se establece en seis píxeles. Una vez más, lo voy a duplicar, moverlo hacia abajo, y repetir este proceso hasta obtener seis filas como esta. Entonces, voy a seleccionar todos estos grupos, una vez más agruparlos, llamémoslo BG. Voy a moverlo un poco al lado izquierdo, algo así. Creo que se ve bien, duplicémoslo, muévelo hacia el lado derecho hacia abajo y asegúrate de mover esta capa hacia abajo y ponla debajo de tu sección Feature 3. Aquí, allá vamos. Creo que ahora se ve genial. Muy bien chicos, eso es todo por este video. Espero que lo hayas disfrutado y te veré en el siguiente video. 105. Planes de Membership: Hey bienvenido de nuevo. En este video, vamos a empezar a diseñar nuestra sección de plan de membresía. Echemos un vistazo a nuestro alambrón. Como puedes ver para esta sección, necesitamos tener un título, un subtítulo, y dos cartas altas. Cada tarjeta va a tener alguna información sobre esa membresía en particular, como nombre, precio, una llamada a la acción o digamos botón de registro, la tarjeta de crédito y los beneficios de esa membresía en particular. En primer lugar, necesitamos crear una capa de texto para nuestro título. Voy a presionar T en mi teclado y dar clic aquí y vamos escribir un servicio excepcional al precio correcto. Voy a seleccionar esta capa de texto y dejarme elegir nuestro H3 o encabezamiento tres así y la voy a alinear al centro horizontalmente. Perfecto. ¿Y el color? Para el color voy a usar dos colores para estas capas de texto. Voy a seleccionar al precio correcto y elegir nuestro color de acento para esto y el resto va a tener nuestro color primario. Perfecto. Se ve bien. Entonces lo voy a duplicar. Comando V o Control V moverlo hacia abajo. Para el subtítulo, voy a escribir inicio con nuestro plan gratuito y cambiar a premium a medida que crezcas. Al igual que esto. Para estas capa de texto, voy a elegir por la intro así. Para el color, podemos elegir oscuro secundario y asegurarnos de alinearlo horizontalmente al centro y su margen superior va a ser de 20 píxeles como este. Perfecto. Ahora necesitamos crear nuestras tarjetas pero antes de eso, necesitamos aumentar la altura de nuestra página de aprendizaje. Asegúrate de seleccionar tu tablero de arte y aumentarlo a 6100 así. Tenemos suficiente espacio para trabajar. Voy a acercar. En primer lugar, vamos a dibujar un rectángulo para nuestra carta así y voy a establecer el ancho en 430 y la altura en 1131, así. Ya lo calculé porque ya diseñé este proyecto así que sé la altura que voy a necesitar pero si quieres diseñar un proyecto y no sabes cómo calcularlo, solo necesitas modificar estas cantidades varias veces como tu diseño continúa. Por ejemplo, supongamos que tienes algo como esto y le agregas más contenido y necesitas más espacio, entonces aumentarás la altura una y otra vez hasta obtener el tamaño de altura que necesitas. Para estas tarjetas, vamos a usar el mismo estilo que usamos para estas tarjetas. Para poder copiar el estilo, voy a mantener presionada la tecla Control en mi teclado o tecla de comando y hacer clic en estos auto para seleccionar estos rectángulo en particular. Alternativamente, puedes dirigirte a la lista de capas del lado izquierdo y buscar este rectángulo. A continuación, haga clic derecho en eso y vaya a copiar y pegar y copiar propiedades. Voy a desplazarme hacia abajo, seleccionar este rectángulo, hacer clic derecho en eso y pegar propiedades y ahí vamos. Acabas de copiar y pegar todos los estilos que agregamos a nuestras tarjetas antes y esto es exactamente lo que queremos. Tenemos el trazo, tenemos la sombra de gota, todo se ve muy bien. ¿ Qué necesitamos? En primer lugar en la parte superior, necesitamos el nombre. Voy a presionar T en mi teclado y añadir una capa de texto y aquí vamos a escribir gratis. Entonces voy a cambiar el estilo del texto a tres años sin embargo, no necesitamos que sea audaz, así que lo voy a desprender de su estilo y cambiarlo a regular. Entonces asegúrate de que esté alineado al centro de tu tarjeta. Debes mantener presionada la tecla Mayús, seleccionar esta capa de texto y tu tarjeta y dirigirte a la sección de alineación en el inspector y alinearla horizontalmente así. Ahora está exactamente en medio. Es relleno superior va a ser de 60 píxeles, duplicarlo, comando D o Control D, moverlo hacia abajo. aquí necesitamos escribir el precio. Voy a escribir $0/m, lo que significa por mes. Por esta cantidad $ y cero, voy a establecer el tamaño de fuente en 60 y esta barra y m van a usar el mismo tamaño de fuente 40. No necesitamos cambiar eso. Asegúrate de alinearlo con la tarjeta al centro así. Es el relleno superior va a ser de 50 píxeles, así. ¿Qué más? Después de eso necesitamos tener una descripción. Voy a duplicarlo, moverlo hacia abajo. Establezcamos la alineación de nuestra capa de textos al centro. Es más fácil modificarlo más tarde y aquí voy a escribir, gestionar tu negocio con una cuenta sencilla y eficiente. Sólo voy a copiarlo y pegarlo de mi portapapeles. Para esto, voy a elegir por el principal y su color va a ser luz secundaria como esta. Puede establecer el ancho en 340 y asegurarse de alinearlo con el centro horizontalmente. Siempre necesitas seleccionar tu capa y tu tarjeta para luego alinearlos. Es el relleno superior va a ser de 30 píxeles y hasta ahora tan bueno. Después de estas descripción, necesitamos tener un botón. Voy a crear un botón de inicio y voy a necesitar un rectángulo. Haga clic y arrastre así. El ancho de este rectángulo va a ser 170 y la altura, lo voy a establecer en algo así como 54 píxeles. Entonces lo voy a hacer redondeado, vamos a aumentar la cantidad de radio de esquina a 20 y finalmente, hagámoslo un botón de contorno. Voy a quitar el relleno y le añadiré un trazo. Voy a poner el grosor a 1.5 y el color va a ser secundario oscuro así. Después agrega una capa de texto y vamos a escribir, vamos a empezar. Para estas capa de texto, voy a usar subtítulo y también para es color, voy a usar oscuro secundario. Por último, necesitamos alinear estos rectángulos con nuestra capa de texto de inicio tanto horizontal como verticalmente y agruparlos Comando G o Control G. Llamémoslo a empezar y lo voy a alinear con mi tarjeta horizontalmente. Ahí vamos. Es el relleno superior va a ser de 30 píxeles. Por el momento, tan bueno. ¿Qué sigue? A continuación necesitamos tener nuestra tarjeta de crédito, no necesitamos diseñarla una vez más ya que ya lo diseñamos. Déjame simplemente seleccionar estas tarjetas de crédito, copiarla, y desplázala hacia abajo y pegarla aquí mismo. Voy a presionar K en mi teclado para seleccionar la herramienta de escala e intentar reducirla así. Creo que se ve bien. Alinearlo con el centro. Es el relleno superior va a ser de 40 píxeles. Justo debajo de estas tarjetas, necesitamos crear dos círculos diferentes para que el usuario elija entre dos diseños diferentes. Voy a seleccionar la herramienta Elipse, hacer clic y arrastrar, y vamos a establecer el ancho y la altura en 30, así. Vamos a tener dos diseños diferentes, la versión oscura y la versión ligera. Para indicar la versión oscura, aquí vamos a usar dos colores diferentes, nuestro color oscuro secundario y este color púrpura claro que utilizamos para nuestra tarjeta de crédito. Déjame acercar. Voy a elegir un rectángulo, dar clic y arrastrar así para sentir la mitad de nuestro círculo y elegir nuestro color oscuro secundario. Asegúrese de seleccionar este círculo, duplicarlo. Si bien esta capa duplicada está seleccionada, mantenga presionada la tecla Mayús y seleccione este rectángulo que acabamos de crear y haga clic en “Máscara” así. Entonces elige tu círculo inicial, que es éste, y cambia su color a este morado claro. Voy a elegir el ojo ahí vamos. Nuestro grupo de máscaras está listo. Es necesario asegurarse de seleccionar ambas capas. Asegúrate de seleccionar tanto tu círculo inicial como tu Grupo de Máscara y agruparlos. Vamos a llamarlo oscuro, muévelo hacia arriba, y es el relleno superior va a ser de 20 píxeles. Duplicarlo, muévelo al lado derecho, y ahora necesitamos modificar el color, así que permítanme acercar. Voy a seleccionar este rectángulo oscuro y cambiar su color a este morado claro, luego seleccionar nuestro círculo inicial y cambiar su color a este color más claro en la parte superior. Ahí vamos. Lo último que tenemos que hacer es poner un trazo alrededor de este círculo oscuro. Porque necesitamos indicar de alguna manera que esta versión oscura está seleccionada, y si el usuario hace clic en esta luz, ese trazo debería aparecer alrededor de este círculo. En primer lugar, permítanme renombrar este grupo a luz, y luego voy a crear otro círculo. Presione la tecla Mayús, haga clic y arrastre así, y colóquela justo debajo del grupo oscuro, quite un relleno, agréguelo un trazo y necesitamos alinearlo con nuestro círculo interno. Voy a hacerlo un poco más pequeño. Si lo configuro en 36 por 36 píxeles y mantén presionada la opción o la tecla Alt en mi teclado, puedes ver que tenemos un relleno de tres píxeles por todos lados. Esto es exactamente lo que necesitamos. Agrupémoslos, y voy a llamarlo vena seleccionada. El relleno izquierdo de este tema ligero va a ser de 10 píxeles como éste. Bastante bien. Pero no están alineados al centro de esta tarjeta. Lo que tenemos que hacer es mantener presionada la tecla Mayús y seleccionarlos a ambos, así, agruparlos, y aquí voy a llamarlo temas, y mantenga pulsada la tecla Mayús, haga clic en nuestra tarjeta de crédito y alinearlos con el centrar horizontalmente. Ahora están en el centro. El siguiente apartado son los beneficios de esta membresía. Necesitamos tener un icono en el lado izquierdo y una capa de texto justo al lado. Por favor, abre la carpeta de activos y abre la carpeta de iconos, y aquí tienes algunos iconos. Por favor elige el icono de cheque y arrástrelo y suéltelo en tu proyecto. Ahí vamos. Voy a acercar, vamos a presionar T y crear una capa de texto. Para el primer beneficio, voy a escribir, 10 transferencias locales gratuitas, y luego voy a poner el estilo de texto a medio así. Déjame alinearlo con mi icono de cheque muy rápidamente, y es el relleno izquierdo va a ser 10 píxeles y el color debe ser secundario oscuro como este. Ahora vamos a seleccionarlos a ambos. Presione la tecla Mayús y haga clic en su icono de cheque, agruparlos , y le voy a nombrar beneficio. Duplicarlo, muévelo hacia abajo. Aquí para el segundo largometraje, voy a escribir retiros gratis de cajeros automáticos en dólares hasta $250 mensuales. Voy a copiarlo y pegarlo de mi portapapeles para ahorrar tiempo. Ahí vamos. No obstante, necesito disminuir su ancho de 400 píxeles a 316 píxeles para obtener algo como esto. Fantástico. Entonces lo voy a duplicar, moverlo hacia abajo y aquí voy a escribir pagos gratis a otras cuentas provisionales. Déjame pegarlo. Ahí vamos. Asegúrate de alinearlos. Una vez más duplicarlo, muévelo aquí abajo. Voy a escribir tarjetas de débito prepagadas. Una vez más, duplicarlo, muévelo hacia abajo. Aquí vamos a escribir tarjetas visuales. Fantástico. Una vez más, duplicarlo, muévelo hacia abajo. Aquí voy a escribir apoyo prioritario 24-7 así. Tenemos que escribir dos beneficios más. Para este, voy a escribir cambio 24 divisas. Para el último, voy a escribir acceso multiusuario. Bastante bien. Ahora, necesitamos establecer el espaciado entre ellos. Voy a mantener presionada la tecla Mayús y seleccionarlos todos así, y distribuir el espaciado vertical. Voy a establecer el relleno entre ellos en 20 píxeles así. Agruparlos y llamarlo beneficios. Selecciona tu rectángulo, que es tu tarjeta, alinéala al centro y selecciona tu grupo de beneficios, muévelo hacia arriba. Su relleno superior va a ser de 40 píxeles como este, y su relleno inferior va a ser de 40 píxeles también. Como mencioné antes, puedes modificar la altura cuando quieras. Como se puede ver, ahora se establece en 41. Si configuro la altura en 1126, puedo obtener un relleno de 40 píxeles desde abajo así. En lo que va tan bien. Lo último que tenemos que hacer es desactivar estos tres últimos beneficios. Porque esta membresía gratuita va a tener todas estas características excepto estos tres últimos beneficios. Estos están disponibles en la membresía premium. Sólo necesito cambiar su color a un gris claro. Voy a seleccionar esta capa de texto, desconectarla de su estilo y cambiar el código de color a B7, B7, B7 así. Voy a copiar estos códigos de color y seleccionar mi icono de cheque, y en la sección de color de selección, lo voy a pegar. Ahí vamos. Voy a repetir el mismo proceso para otros beneficios como este. terminamos con nuestra tarjeta gratuita, pero una cosa que noto es que ponemos el relleno superior en 60 pixeles, así que necesitamos tener un relleno inferior de 60 pixeles también. No obstante, como se puede ver, se establece en 40. Lo que voy a hacer es seleccionar este rectángulo y voy a seguir adelante y sólo añadir 20 píxeles más a la altura. Lo que puedo hacer es escribir más 20 así. Ahora el relleno inferior está ajustado a 60. ¿ Y la tarjeta premium? En primer lugar, necesitamos seleccionar todos estos elementos de esta manera. Haga clic y arrastre para seleccionarlos todos, agruparlos, y aquí vamos a escribir plan gratuito. Después duplicarlo, muévelo hacia el lado derecho. El relleno entre ellos va a ser de 30 píxeles como éste. Tenemos que modificar algo aquí. En primer lugar, necesitamos modificar el nombre del grupo antes de que olvidemos eso, Vamos a modificarlo a plan premium. Entonces necesitamos modificar el nombre obviamente. Cambiemos gratis a premium. Pero antes de eso, se asegura de alinear la capa de texto con el centro para que se quede en el centro premium. El precio va a ser de 8 dólares. Es necesario cambiar la descripción. Voy a cambiarlo a un soporte prioritario y acceso multiusuario para maximizar su productividad. Déjame pegarlo de mi portapapeles. Ahí vamos. Voy a desplazarme hacia abajo, y ahora necesitamos que estas últimas tres opciones estén disponibles. Lo que debemos hacer es seleccionar todas estas capas de textos, mantener presionada la tecla Mayús y hacer clic en todas ellas y elegir secundaria oscura. Después selecciona tu icono de cheque y cambia su color a tu color primario. Bastante bien. Es tan sencillo, ¿no? También está lista la tarjeta premium. Ya casi terminamos, pero necesitamos recordar alinear nuestras tarjetas al centro. Seleccionémoslos a ambos, agruparlos, y aquí voy a llamarlo planes. Simplemente dirígete a la sección de alineación y alinéela horizontalmente al centro. Fantástico. Es margen superior va a ser de 120 píxeles. Eso es todo. ¿Se puede ver lo hermosas que son? Espero que hayas disfrutado de este video y te veré en el siguiente. 106. Sección de FAQ: Hey, bienvenido de nuevo. En Este video, Vamos a diseñar la sección de preguntas frecuentes. Para Esta sección, Necesitamos tener, nuevamente un título, un subtítulo, y algunas tarjetas. Estas tarjetas se van a abrir y cerrar dentro de una tarjeta en vigor. Sin más preámbulos, empecemos. En primer lugar, voy a seguir adelante y seleccionar Estas dos capas de texto, duplicarlas, Control D o Comando D. Muévalas hacia abajo como Esto. El relleno superior se va a establecer en 260 píxeles como This. El título se va a cambiar a preguntas frecuentes. Voy a cambiar Esta sección morada a Frecuentemente y la sección derecha a Preguntas hechas. Déjame cambiar el color a nuestro color de acento como Este, y alinearlo al centro. El subtítulo se va a cambiar por otra cosa. Voy a copiarlo y pegarlo de mi portapapeles. Como se puede ver, es un párrafo de línea. Voy a disminuir el ancho a 600 píxeles y alinear el texto al centro y también alinear una capa al centro horizontalmente como Esto. Lo último que necesitamos cambiar aquí es el color. Voy a cambiar el color a luz secundaria en lugar de oscuro para Esta descripción. La descripción como puedes ver es si no estás seguro de si Draft es adecuado para ti o no, no te preocupes. Estamos aquí para explicarte todo lo que podrías querer saber. Justo debajo de eso, Necesitamos tener nuestras tarjetas de preguntas. Para nuestra tarjeta de preguntas, Necesitamos crear un rectángulo. Haga clic y arrastre como Esto. Voy a desocultar mis cuadrículas de diseño. La segunda columna del lado izquierdo y la segunda columna del lado derecho, permítanme acercar. El ancho está establecido en 948 y la altura, lo voy a cambiar a 96 píxeles. Entonces, como puede adivinar, Necesitamos usar el mismo estilo que usamos para Estas tarjetas. Voy a seleccionar Este “Rectángulo' mientras está seleccionado, haga clic derecho en eso y “Copiar propiedades”. Seleccione Este “Rectángulo”, haga clic derecho en eso y “Pegar propiedades”. Ahí vamos. El único que necesitamos cambiar es la cantidad del radio de esquina. Como se puede ver, se establece en 50. No obstante, es demasiado. Voy a ponerlo en 27. Necesitamos una capa de texto y Necesitamos un icono en el lado derecho. Déjame crear una capa de texto y voy a pegar la pregunta de mi portapapeles. Ahí vamos. Aquí hay una pregunta. ¿ Cuál es la diferencia entre el borrador y una cuenta bancaria tradicional? Permítanme cambiar el estilo del texto a H4. Se ve bien. Asegúrate de que esté alineado con nuestra tarjeta verticalmente, y es relleno izquierdo va a ser de 30 píxeles como This. En el lado derecho, como mencioné antes, Necesitamos colocar un ícono más. Por favor, abre la carpeta de activos, y en la carpeta del ícono, puedes encontrar el icono más, arrástralo y soltarlo en tu proyecto y ponerlo justo por ahí. Es el relleno correcto va a ser de 30 píxeles. Asegúrate de que esté alineado verticalmente al centro de tu tarjeta. Selecciona tanto tu ícono como tu tarjeta y alinéela verticalmente. Ahí vamos. Nuestra tarjeta está lista. Fue tan sencillo, ¿no? Ahora, vamos a seleccionarlos a todos, agruparlos, y voy a llamarlo pregunta. Entonces lo voy a duplicar, moverlo hacia abajo. El margen entre ellos va a ser de 20 píxeles. Ahora voy a cambiar la pregunta por otra cosa. Déjame alinear Esta capa de texto al lado izquierdo, y luego pegar la pregunta de mi portapapeles. Ahí vamos. ¿Quién puede abrir un borrador de cuenta? Una vez más, duplicarlo y moverlo hacia abajo, y voy a cambiar la pregunta. Esta vez la pregunta es, ¿y si retiro dinero en el extranjero. Voy a duplicarlo una vez más, moverlo hacia abajo y cambiar la pregunta por otra cosa. ¿ Puedo cancelar mi suscripción o cambiar a otro plan en cualquier momento? Una vez más, duplicarlo, moverlo hacia abajo, y Esta es nuestra última pregunta. Voy a pegarlo enseguida. Ahí vamos. ¿ Qué pasa si retiro más de 250 dólares? Por supuesto que puedes seguir adelante y modificar Estas capas de textos y esas preguntas. Depende totalmente de ti. Nuestras preguntas están listas. Ahora voy a seleccionarlos a todos, agruparlos, y llamémoslo preguntas. Es margen superior va a ser de 120 píxeles como Esto. Está bastante bien. No obstante, como se puede ver aquí mismo, Tenemos tanto espacio vacío y no es bueno. Voy a agregar algunos antecedentes a Esta sección para transitar de alguna manera de esta sección planes de membresía a esta sección de preguntas frecuentes. Te voy a mostrar una técnica muy cool para crear fondos increíbles. Escojamos la herramienta Pluma. Haga clic en algún lugar como aquí. Ahora acabas de crear una nota, haz clic en otro lugar y arrastra. Asegúrate de hacer clic y arrastrar como Esto para crear una línea curva, y voy a dar clic y arrastrar como Esto. Perfecto. Ahora lo voy a mover hacia abajo, y vamos a cambiar su color a nuestro color secundario de luz, y abrir Este menú, ve a plugins. Esta vez voy a usar un plugin cool llamado Looper. Si aún no lo has instalado, asegúrate de ir a Manage Plugins, luego ve a Community, como te mostré antes, y busca el Plugin Looper, instálalo y ahora puedes ejecutarlo. Este plugin te permite iterar tus objetos. Por ejemplo, puede crear una forma como Esta línea, y luego puede establecer algunos valores como iteraciones, posición, escala, opacidad, incluso color, y luego crea formas y diagramas geniales. Vamos a intentarlo. Por ahora voy a mantener los ajustes como están. La iteración se establece en 20, la posición x es 0, y es 10, y el ángulo es cinco. El balanza es de 10, la opacidad es de 80 por ciento. Demos click en “Crear”. ¿ Se puede ver lo increíble que es? Ahora podrías crear fácilmente un fondo muy fresco usando Este plugin. Presione “Comando Z” o “Control Z” para deshacer el proceso. Voy a modificar Estos valores. Voy a cambiar las iteraciones a 15 y también la escala a cinco. Se ve bien. Como puedes ver, creó un grupo para nosotros. Voy a llamarlo BG-2 y asegurarme de mover Estos grupos BG-2 todo el camino hacia abajo, como Esto, moverlo hacia abajo, bastante cool. Entonces puedo presionar “K' en mi teclado y escalarlo un poco. Fantástico. Como puedes ver, aquí, No tenemos una buena relación de contraste. Lo que voy a hacer es disminuir Esta opacidad en la sección de capas a 20 por ciento, como Esto. Muy bien chicos, eso es todo por Este video. Espero que lo hayas disfrutado y te veré en el siguiente video. 107. Footer: Hey, bienvenido de nuevo. En este video, vamos a terminar de diseñar juntos nuestra página de aprendizaje. El último que necesitamos diseñar es el pie de página. Puedes encontrar un pie de página web normalmente en la parte inferior del sitio web. Consiste en una renuncia de derechos de autor, algunos recursos relevantes, y además podrías tener un llamado a la acción como una suscripción a newsletter y el logotipo de la empresa. Vamos a mantenerlo tan sencillo. Echemos un vistazo a nuestra estructura alámbrica. Como se puede ver, tenemos nueve enlaces diferentes. Tenemos un logotipo y algún texto, que es nuestro aviso de copyright. Sin más preámbulos, empecemos. En primer lugar, necesitamos crear un rectángulo como fondo de nuestro pie de página, así. Voy a establecer la altura en 440, y luego voy a cambiar el código de color a DC, E2, y F0, para crear una buena relación de contraste con el color de nuestro fondo. Ahora, necesitamos colocar aquí nuestro logo. Voy a desplazarme hacia arriba. Ahí vamos. Aquí está nuestro logo. Copiarlo, desplázalo hacia abajo y pegarlo aquí. Voy a presionar “K” en mi teclado para escalarlo. Creo que es demasiado. Hagámoslo algo así. Voy a cambiar el ancho a 80. Es genial. Déjame mostrar mis cuadrículas de diseño. Voy a colocarlo aquí en la segunda columna y justo debajo de eso, necesitamos tener nuestro aviso de copyright, así que voy a crear una capa de texto y vamos a escribir copyright y un signo de copyright 2020 Draft, LLC. Escribamos, todos los derechos reservados. Si no sabes cómo escribir este signo de copyright, puedes mantener presionada la tecla de opción de tu teclado si eres usuario de Mac y presionar “G”. Si eres usuario de Windows, debes mantener presionada la tecla Alt y escribir el número 0169. Si no tienes un teclado en tu teclado, puedes buscar registro de copyright en Google y encontrarás algo como esto, y puedes seleccionarlo, es una buena técnica, copiarlo y venir aquí y pegarlo. Eso es todo. Hace lo mismo. Ahora, voy a cambiar el estilo del texto a comprar y déjame cambiar el color a luz secundaria. Por último, lo voy a alinear. Como puedes ver aquí, obtengo 30.67. El problema es con el tamaño de marco de mi logo. Desde que lo escalé, no obtuve un número redondeado. No te preocupes por ello. Está totalmente bien. Para arreglar eso, puedes modificar tu tamaño de marco, pero por ahora, lo vamos a dejar como está. Lo siguiente que necesitamos crear son nuestros enlaces. Déjame crear una nueva capa de texto. Aquí voy a escribir equipo y va a ser cuerpo/principal, así que está bien, y su color va a ser secundario oscuro, así. Déjame moverlo al lado izquierdo. Voy a duplicarlo, moverlo hacia abajo. Aquí, voy a escribir, prensa. Una vez más, duplicarlo, muévelo hacia abajo. Aquí voy a escribir honorarios. Cada uno de ellos es un enlace. El relleno entre ellos va a ser de 44 píxeles, así. Bastante cool. Voy a subirlos, duplicarlos, moverlos al lado derecho y aquí voy a escribir servicios. Entonces voy a escribir proyectos. El último, voy a escribir afiliado. Una vez más, necesitamos seleccionarlos, duplicarlos, moverlos al lado derecho y aquí voy a escribir términos de uso. Para la segunda, voy a escribir política de privacidad, y luego voy a escribir contactarnos. Perfecto. Seleccionemos estos tres primeros enlaces, agruparlos, y luego seleccionemos los enlaces de segunda columna. Una vez más agruparlos y el último, y ahora selecciona los tres grupos. Voy a seguir adelante y distribuir espaciado horizontal entre ellos que puedo modificar fácilmente el relleno en el medio. El relleno entre ellos va a ser de 110 píxeles como éste. Se puede modificar desde el inspector también. Entonces agruparlos, llamémoslo enlaces. Bastante bien. Ahora, déjame ponerlo al lado derecho así, y luego voy a seleccionar nuestro rectángulo, este fondo, y alinearlo al centro verticalmente y además, necesitamos seleccionar este aviso de copyright, mantener pulsado el “Shift “clave y seleccione nuestro logotipo, agruparlos, y seleccione nuestro rectángulo y alinéelos verticalmente también. Bastante bien. Por último, pero no menos importante, necesitamos seleccionar todos estos elementos, agruparlos, y lo vamos a llamar pie de página. Perfecto. Tenemos un pequeño problema aquí y es que no tenemos tanto espacio en blanco, por lo que necesitamos solucionarlo. Está configurado en 68 píxeles, sin embargo, voy a establecerlo en 160 píxeles. Voy a seleccionar “Landing Page” e incrementar la altura así. Muévelo hacia abajo. A ver. Es demasiado. Voy a disminuirlo. Ahora, tengo 169, así que voy a seleccionar la “Landing Page” y aquí para la altura, voy a escribir menos nueve así, y mover este pie de página hacia arriba. Ahí vamos. Muy bien chicos. Eso es todo por este video. Nuestra página de aterrizaje finalmente está lista, y ahora vamos a previsualizarla juntos. ¿ Estás listo? Vámonos. Bastante cool. Aquí está nuestra sección de héroes. Voy a desplazarme hacia abajo. Muy bien chicos, eso es todo por este video. Espero que lo hayas disfrutado y te veo en el siguiente video. Nos vemos entonces. 108. Prototipos de tu página de aterrizaje: Hey, bienvenido de nuevo. Ahora que nuestra página Landing está lista, vamos a crear un prototipo totalmente funcional para nuestra página web. Sin más preámbulos, empecemos. Echemos un vistazo a nuestra página de aterrizaje. De hecho, vamos a sumar interactividad a algunos de nuestros elementos. Si te diriges a los planos, voy a acercar. En primer lugar, creo que es una buena idea agregar el estado de desplazamiento a este botón Get Started. Cuando el usuario pase por encima de este botón, se cambiará. Lo siguiente que debemos agregar es la versión ligera de esta tarjeta de crédito. Como puedes ver aquí, agregamos dos temas diferentes, y cuando el usuario hace clic en el tema de la luz, esta tarjeta de crédito debe cambiarse. último, pero no menos importante, vamos a añadir interactividad a nuestras tarjetas de preguntas y respuestas. Como puedes ver aquí, queremos crear un efecto acordeón. Cuando el usuario hace clic en una de estas tarjetas, la altura de estas tarjetas debe expandirse y debe mostrarse el texto relacionado con esa tarjeta específica. Eso es todo. Para poder agregar estas tres interacciones a nuestra Página de aterrizaje, en primer lugar, necesitamos seleccionar nuestra Página de aterrizaje, necesitamos duplicarla, comando D o control D. Básicamente aquí tenemos una copia de nuestra Página de aterrizaje. Ahora voy a acercarme así, asegurarme de seleccionar el grupo Get Started, luego dirígete al inspector y ve a la pestaña Prototype en la parte superior. Como puedes ver, si haces zoom, aparece un círculo en tus elementos como este con un icono más dentro. Lo que quiero que hagas es hacer clic y arrastrar para crear esta línea de flecha y conectar ese elemento a tu segunda página de Landing que acabamos de copiar. Así. Ahora, estas dos Páginas de aterrizaje están conectadas juntas. El izquierdo, que es el primer Landing page, es el inicio de la animación. Funciona como disparador. Cuando el usuario hace clic en este botón, se inicia la animación, y la segunda Landing page es el final de esa animación, ¿de acuerdo? En la última etapa. Lo que pase en medio es manejado automáticamente por Figma. No necesitas preocuparte por crear una animación específica. Todo lo maneja Figma. Ahora voy a cerrar esta interacción detalles pop up. Voy a acercarme, y aquí vamos a cambiar nuestro botón. Voy a seleccionar eso, hacer doble clic en él, y voy a seleccionar el rectángulo. Vamos a la pestaña Diseño y voy a quitar el Trazo y añadir un Relleno en su lugar, y voy a elegir el mismo color, secundario oscuro. Asegúrate de cambiar el color de tu capa de texto de secundaria oscura a blanca, ¿de acuerdo? Bastante bien. Ahora, vamos a Prototipo y voy a seleccionar mi primer botón en la primera Página de aterrizaje. Como puedes ver aquí, tenemos la sección Interacciones. Si hace clic aquí, aparece esta ventana, y aquí puede especificar la configuración de su interacción y animación. Para el gatillo, que es la primera parte, voy a abrir este menú drop. Por defecto, se establece en Al hacer clic. Tienes diferentes opciones como al arrastrar, mientras se pasa el ratón, mientras se presiona, etc. Voy a ir con mientras se pasa el ratón, y en la sección Animación, puedes abrir este menú desplegable y tienes diferentes opciones también aquí. Puedes ir con Instant, puedes ir con Dissolve, puedes ir con Smart Animate. Te sugeriría que utilices el Smart Animate. A continuación se puede especificar el tipo de animación. Como facilidad de entrada, facilidad de salida, facilidad de entrada y salida. No importa por ahora. Además, se puede especificar la duración de la animación, y voy a dejarla tal como está. Déjame cerrar esta ventana, y básicamente eso es todo. Analicemos nuestro prototipo. Voy a desplazarme hacia abajo. Cuando el usuario pasa por encima de este botón, se puede ver que su apariencia cambia de inmediato, así. Es bastante bueno, ¿no? Pero no funciona con el otro botón. Puedes seguir adelante y agregarla si lo deseas. Pero para este tutorial, solo quiero mostrarte cómo funcionan las interacciones. Ahora sigamos adelante y tratemos de animar nuestra sección de tarjetas de crédito. Voy a acercarme aquí. ¿Qué tenemos? Como puedes ver, nuestra etapa inicial es esta tarjeta oscura. Tenemos que añadir la interacción a este círculo de luz. Ahora tenemos que seguir adelante y seleccionar nuestra página inicial de aterrizaje, que es nuestra página principal de aterrizaje. Una vez más duplicarlo, comando D o control D, bastante bueno, y luego voy a acercarme aquí. Tenemos que hacer doble clic en este círculo de luz e intentar conectar este círculo a la página de aterrizaje que acabamos de duplicar. Así, perfecto. Para esta interacción, voy a establecer en On Click y Smart Animate. Eso es todo. ¿ Qué debemos cambiar aquí? Tenemos que cambiar dos cosas. En primer lugar, la aparición de la tarjeta de crédito porque debe ser ligera. Segundo, debemos mover este trazo hacia el lado derecho. Empecemos con este trazo. Voy a seleccionar eso, moverlo hacia el lado derecho, y asegurarme de que esté alineado con tu círculo interior. Perfecto. Entonces voy a modificar la apariencia de esta tarjeta de crédito. Vamos a la pestaña Diseño, primero lo primero, empecemos con este color oscuro. Voy a seleccionar Star 3, así, y déjame cambiar su color a luz secundaria. Entonces voy a seleccionar Estrella 4, y voy a cambiar este acento a neutro, bastante bueno. Entonces voy a seleccionar mis capas de texto y cambiar su color a oscuro secundario, así, y ya terminamos. Vamos a darle una oportunidad. Voy a seleccionar mi página inicial de aterrizaje y vamos a previsualizarla. Desplazémonos hacia abajo. Nuestro botón Empezar funciona perfectamente. Entonces voy a dar click en este círculo de luz. Ahí vamos. ¿Viste esa hermosa animación? No obstante, no podemos volver al primer estado porque aún no agregamos esa interacción. Adelante y agreguemos eso. Lo que necesitamos lograr aquí es que si el usuario hace clic en este tema oscuro, todo lo que cambiamos debe invertirse. Tenemos que conectar este círculo oscuro. Vayamos a Prototipo. Tenemos que conectarlo a nuestra página inicial de aterrizaje así, y estamos bien para ir. Vamos a previsualizarlo una vez más. Voy a desplazarme hacia abajo. Vamos a intentarlo. Voy a dar click en este círculo de luz, allá vamos, y oscuro. ¿ Se puede ver lo bonito y fácil que es crear este tipo de interacciones? Eso es increíble. Lo último que tenemos que hacer es agregar interacción a nuestras tarjetas de preguntas y respuestas. Voy a añadir la interacción a la primera tarjeta solamente. No obstante, para el producto final, puedes seguir adelante y agregar la interacción a todos ellos si lo deseas. Pero por ahora, voy a añadir la interacción a la primera tarjeta solamente. ¿ Qué necesitamos? En primer lugar, necesitamos seleccionar nuestra página inicial de aterrizaje y necesitamos duplicarla, comando D o control D, bastante bueno. Ahora voy a seguir adelante y seleccionar nuestra primera tarjeta en nuestra primera página de aterrizaje. Si bien estamos en la pestaña Prototipo, voy a seleccionar esta tarjeta y conectarla a nuestra última página de Landing que acabamos de duplicar, así. Para la interacción, voy a elegir On Click y la animación debe ser Smart Animate, así que no necesitamos cambiar nada. Entonces voy a acercar y tratar de modificar nuestra última página de Landing. ¿ Qué debemos cambiar aquí? En primer lugar, necesitamos modificar la altura de esta tarjeta. Voy a ir a la pestaña Diseño y voy a seleccionar esta tarjeta, puedes mantener presionada la tecla de comando o tecla de control en tu teclado y dar clic en esta tarjeta para seleccionarla. Alternativamente, puedes seguir adelante e intentar seleccionarlo en la lista de capas. Depende totalmente de ti. Entonces voy a aumentar la altura de esta tarjeta a 200 píxeles. Por último, voy a seleccionar todas las demás preguntas y moverlas hacia abajo, y asegurarme de mantener el relleno de 20 píxeles entre ellas así. último, pero no menos importante, necesitamos mantener el margen superior de 160 píxeles para este pie de página. Como puedes ver ahora, obtuve 56 pixeles. ¿ Cómo puedo arreglar eso? Es tan sencillo. Deberíamos seleccionar nuestra Página de aterrizaje, y aquí para la altura, voy a escribir plus, ya que tengo 56 pixeles y necesito conseguir 160, voy a escribir 104 así, y finalmente, seleccionas tu pie de página y muévelo hacia abajo, y ahí vamos. Tenemos 160 pixeles. Perfecto. ¿Qué más se debe cambiar aquí? Cuando esta tarjeta está abierta, este icono más debe reemplazarse por un icono menos. Voy a seguir adelante y seleccionar esta línea vertical, y eliminarla. último, pero no menos importante, necesitamos añadir aquí nuestra línea de texto. Aquí tenemos una pregunta y luego necesitamos agregar la respuesta para esa pregunta específica. Por ahora, voy a agregar una capa de texto Lorem Ipsum porque la respuesta no importa. Pero si estás trabajando en un proyecto de palabra real, asegúrate de agregar respuestas reales. Voy a presionar “T” en mi teclado y hacer clic para crear una capa de texto, y luego voy a pegar el texto de mi portapapeles. Para esta capa de texto, voy a usar Body/Main. Por último, permítanme cambiar el estilo de color a Secundario/Luz. Bastante bien. Permítanme disminuir el ancho de esta capa de texto. Voy a acercar así, déjame subirlo. Asegúrate de poner esta capa de texto dentro de este grupo de cartas, ¿de acuerdo? Esta es nuestra tarjeta de preguntas, y voy a mover esta capa de texto y ponerla dentro de este grupo. El relleno superior debe ser de 10 píxeles, el relleno izquierdo debe ser de 30. Ya casi terminamos. Lo último que necesitamos hacer es conectar esta tarjeta a nuestra página inicial de Landing. Porque cuando el usuario haga clic en esta primera tarjeta aquí, se va a abrir. No obstante, si él o ella quiere cerrarlo, necesitamos conectarlo a nuestra página inicial de aterrizaje también. Voy a seleccionar esta tarjeta de preguntas, asegúrate de seleccionar tu grupo de preguntas, ve a la pestaña Prototipo y usando este círculo, intenta conectarla a tu primera página de aterrizaje, y ya hemos terminado. Seleccionemos nuestra primera Página de aterrizaje e intentemos previsualizarla. Está bien, déjame desplazarme hacia abajo. Vamos a intentarlo. Voy a dar click en la primera tarjeta, Ahí vamos. ¿ Viste lo hermosa que fue esa interacción? Puedo cerrarlo así. Figma te permite crear interacciones complejas e increíbles en cuestión de minutos. No es necesario trabajar con software complejo para crear un prototipo de alta fidelidad. Muy bien chicos, fue un largo viaje juntos, espero que hayan disfrutado de esta sección y los veo ahí. 109. Tipos de logotipos: Hola a todos. En esta sección, vamos a estar diseñando nuestro logotipo, y también, en este video, vamos a estar hablando de siete tipos diferentes de diseño de logotipos. Sin más preámbulos, empecemos. El primer tipo de logotipo se llama monograma, o se podría decir membretes. Aquí tenemos diferentes logotipos como ejemplos, como HBO, que significa Home Box Office. Como pueden ver, aquí sólo tenemos letras. Se detallan y representan a su empresa. El segundo tipo se llama marcas de palabras, o digamos logotipos. En realidad son similares a un membrete. No obstante, una marca de palabras se centra solo en un nombre comercial, como Google, Canon, o Jeep. El siguiente tipo de logotipo se llama marcas de logotipo abstractas, como Pepsi, Nike, o BP como puedes ver aquí. De hecho, una marca abstracta es un tipo de logotipo pictórico. El siguiente tipo de logotipo se llama marcas pictóricas o símbolos de logotipo, como el logotipo de Apple, Twitter, y otras marcas famosas. En realidad, una marca pictórica es simplemente un icono que representa las características de la empresa. El siguiente tipo de logotipo son las mascotas. Los logotipos de mascotas son logotipos que involucran a un personaje ilustrado según 99designs.com. Si deseas obtener más información sobre logotipos y cómo debes usarlos, puedes consultar su gran artículo en su página web. El siguiente tipo de logotipo son las marcas de combinación, y este es el logotipo que te voy a enseñar cómo puedes crear. En este tipo de logotipo, puedes encontrar una letra combinada con una ilustración o una forma específica. Por último pero no menos importante, los logotipos del emblema. Un logotipo emblema consiste en fuente dentro de un símbolo o un icono como el logotipo de Starbucks. Muchas gracias por ver este video. En la próxima serie de videos, vamos a crear cuatro logotipos diferentes juntos. Asegúrate de descargar el proyecto de inicio porque ya preparé los colores para ti con el fin de ahorrar tiempo. Se puede descargar el archivo desde la sección de recursos de la próxima conferencia. 110. Diseñar tu primer logotipo: Hola a todos? Bienvenido de nuevo a otro video de este curso. En este video, vamos a empezar a diseñar nuestro primer logotipo. El logo que elegí para este tutorial es el logo de Figma, que es bastante interesante y a la vez bastante sencillo logo. En primer lugar, necesitamos una mesa de trabajo. Presionemos “A” y voy a elegir MacBook Pro, entonces voy a aumentar el tamaño de altura de mi mesa de trabajo. Así, bastante bien. Ya preparé los activos bien para ti que puedes descargar de la conferencia de activos de esta sección. En primer lugar, voy a colocar el logo de Figma como puedes ver en la carpeta Activos, ahí está el logo de Figma, bastante bueno y luego vamos a diseñar el mismo logo juntos. Como se puede ver, estos logotipos se componen de diferentes formas simples. Por ejemplo, aquí tenemos un cuadrado con dos esquinas redondeadas, aquí también. Aquí tenemos el mismo cuadrado, sin embargo, con tres esquinas redondeadas, y aquí tenemos un círculo sencillo. En primer lugar, insertemos aquí un rectángulo. Voy a sostener Shift para crear un cuadrado, y luego voy a establecer el ancho y la altura en 200. Al igual que esto, es bastante bueno, vamos a moverlo al lado derecho. Ahora necesito redondear estas dos esquinas. Voy a dar clic en esquinas independientes como esta, y vamos a establecer radio de esquina superior izquierda a 100 y radio de esquina inferior izquierda a 100 también, y como pueden ver, tenemos la misma forma que el logotipo del Figma. Ahora, necesitamos usar el cuentagotas de ojos en la sección de campos con el fin de elegir el mismo color, bastante bueno. Entonces tenemos que duplicarlo, y voy a hacer clic derecho en eso, y vamos a dar click en voltear horizontal así. Voy a moverlo al lado derecho, bastante bueno, entonces necesitamos cambiar su color así, bastante fantástico. Ahora usemos nuestro primer rectángulo. Duplicarlo, voy a moverlo hacia abajo, bastante impresionante. Una vez más, necesito cambiar el grado de color, y ahora necesitamos un círculo. Escojamos círculo del menú de formas. Voy a sostener “Shift” y vamos a crear un círculo. No obstante, con el mismo ancho y con la misma altura. Van a ser 200 por 200 píxeles así, y voy a cambiar el color a este azul. Una vez más, duplicemos este rectángulo. Voy a moverlo hacia abajo, y ahora necesito cambiar la cantidad de radio de esta esquina inferior derecha. Aquí en el inspector, voy a ponerlo en 100 también. último, pero no menos importante, cambiemos su color. Fantástico. ¿Viste lo fácil que es diseñar un logotipo en Figma? Ahora voy a seleccionar nuestras capas, voy a agruparlas, y vamos a llamarlo Figma nuevo. Se puede quitar éste y eso es todo. Muy bien chicos, eso es todo por este video, espero que lo hayan disfrutado y los veo en el siguiente video. 111. Diseñar nuestro segundo logotipo: Hola a todos y bienvenidos de nuevo a otro video de este curso. En este video, vamos a estar diseñando juntos nuestro segundo logotipo, que es para una marca imaginaria llamada Clock. Sin más preámbulos, empecemos. En primer lugar, voy a insertar un rectángulo y voy a sostener “Shift” para crear un cuadrado. Bastante bonito. Pongámoslo a 200 por 200, así. Entonces voy a aumentar el radio de esquina de tres esquinas. Necesito cambiar la esquina superior izquierda a 100, la esquina superior derecha a 100 también, y la esquina inferior izquierda a 100, así. Después de eso, voy a establecer el código de color en 00D179, así. Déjame acercar. Ahora, necesito insertar un círculo aquí. Voy a sostener “Shift”. Bastante bonito. Entonces voy a usar un gradiente para eso, el lineal. Vamos a establecer el primer color al mismo color que tenemos para nuestra plaza principal. El segundo color va a ser un poco más oscuro, así que probémoslo 038750, y voy a aumentar la opacidad a 100, así. Entonces cambiemos la dirección para conseguir algo como esto. Bastante bonito, ¿no? Ahora, voy a escalarlo un poco. Demos click en este “Mover Herramientas” y aquí voy a elegir Escala. También podrías presionar “K” en tu teclado y voy a mantener “Shift”. Vamos a escalarlo. Bastante bonito. Vamos a ponerlo en 176 por 176, y los remeros van a ser 12, como se puede ver. Entonces voy a dar clic en este círculo de arco, y voy a sostener “Shift” así. Bastante bonito. Ahora, lo voy a girar 90 grados. Como puedes ver, obtengo algo como esto. No obstante, necesito cambiar la dirección de mi gradiente. Usemos estos controladores de mango para conseguir algo como esto. ¿ Puedes ver que he creado un reloj aquí? Es bastante impresionante, ¿no? Entonces voy a añadir un texto y la fuente es Roboto. Escribamos Reloj. Van a ser 80 puntos. Voy a cambiar el color al mismo verde. Vamos a alinearlo. Su relleno izquierdo va a ser de 16 píxeles como éste. Ahora, voy a agruparlos. Vamos a llamarlo Reloj. Eso es todo. ¿ Viste lo fácil que es usar formas simples para crear logotipos increíbles? Muy bien chicos, eso es todo por este video. Espero que lo hayas disfrutado y te veo en el siguiente video. 112. Diseñar nuestro tercer logotipo: Hola a todos, bienvenidos de nuevo a otro video de este curso. En este video, vamos a estar diseñando juntos nuestro tercer logotipo, que es para otra vez, una marca imaginaria llamada Moon. Va a ser tan interesante y lo vamos a crear tan rápido. En primer lugar, necesito insertar un círculo. Voy a sostener a Shift así. Entonces necesito duplicar eso, y vamos a moverlo un poco al lado derecho, así. Después de eso, los voy a seleccionar a ambos y voy a usar operaciones booleanas. Escojamos Restar Selección y ahí vamos. Acabamos de crear nuestra luna. Ahora lo voy a girar un poco hacia el lado izquierdo, así. No obstante, lo voy a modificar. Para modificar eso, puedo obtener acceso a subblayers abriendo este grupo y ahí vamos. Voy a elegir el círculo superior, y vamos a moverlo un poco al lado derecho. Bastante impresionante. Entonces cambiemos el color a negro. Después de eso, voy a escribir Moon. No obstante, cambiemos la fuente a Montserrat y el peso va a ser regular. Van a ser 80 puntos. Voy a bajar mi luna así. Pongamos el ancho en 130 y los voy a alinear. No obstante, como se puede ver, parece que no están perfectamente alineados. Porque a veces, necesitas alinearlos manualmente para conseguir un gran equilibrio visual. Voy a mover un poco el texto lunar al lado derecho. Ahora creo que es genial. Vamos a subirlo. Bastante increíble. Voy a agruparlos y les voy a llamar luna. Muy bien, chicos, eso es todo por este video. Has aprendido cómo podrías crear tu propio logotipo simplemente en Figma mediante el uso de formas simples. Espero que lo hayas disfrutado y te veo en el siguiente video. 113. Introducción a Adobe Photoshop: Hola a todos. Bienvenido de nuevo a otra sección de este curso. En esta sección, vamos a estar hablando de Adobe Photoshop. A pesar de que mencioné antes que Adobe Photoshop no es un buen software para el diseño de interfaces de usuario, es bueno estar familiarizado con el entorno de Adobe Photoshop y también los fundamentos de Photoshop para preparar nuestras imágenes a veces o incluso edición de nuestros archivos. En el siguiente video vamos a iniciar nuestra lección con los entornos de Adobe Photoshop. Nos vemos entonces. 114. Entorno de Adobe Photoshop: Hola a todos. En este video, vamos a estar hablando de los entornos de Adobe Photoshop. Sin más preámbulos, abramos nuestro Adobe Photoshop. Como puedes ver, estoy usando Adobe Photoshop versión CS6. No importa qué versión estés usando ahora mismo porque nos vamos a centrar sólo en lo básico y te puedo asegurar que casi todos los elementos son iguales en todas las versiones, pero sería genial usar también la versión más reciente. Aquí en Adobe Photoshop, podemos dividir estos entornos en diferentes secciones. Por ejemplo, a tu izquierda, puedes ver que está el Panel de Herramientas y aquí hay todas las herramientas que necesitamos para editar nuestras imágenes o incluso crear algún diseño gráfico. tu derecha, puedes ver que hay más paneles, por ejemplo, aquí tenemos el panel de capas, que es uno de los paneles más importantes en Adobe Photoshop y además tenemos ajuste, colores, etc. Pero el panel más importante aquí es el panel Herramientas. Muy bien chicos, muchas gracias por ver este video. En el siguiente video, vamos a estar hablando de los conceptos básicos de Adobe Photoshop y cómo puedes usar estas herramientas. Nos vemos en el siguiente video. 115. Conceptos básicos de Adobe Photoshop: Hola a todos, bienvenidos de nuevo a otro video de este curso. En este video, vamos a estar hablando de los conceptos básicos de Adobe Photoshop. Como mencioné en el video anterior, vamos a utilizar diferentes paneles en Adobe Photoshop como panel de herramientas, panel de capas, colores, ajuste, etc. Pero primero lo primero, necesitamos un lienzo o digamos una página para iniciando nuestro proyecto con. Para ello, Puede o bien ir al archivo y hacer clic en nuevo, o puede presionar comando y N en sistemas Mac o Control y N en Windows. Aquí como puedes ver, hay una ventana que puedes elegir la dimensión de tu mesa de trabajo. Por ejemplo, aquí podemos establecer el ancho en 1920 y asegurarnos de que esté establecido en píxeles y la altura en 1080, y como puedes ver sus píxeles. Voy a cambiar la resolución a 72 porque es suficiente para fines informáticos y el modo de color, necesitamos configurarlo en RGB porque vamos a presentar este proyecto en computadora o en pantallas. CMYK se utiliza con fines de impresión. Puedo seguir adelante y dar click en bien. Ahí vamos. Ya está lista tu mesa de trabajo. No establecí un nombre específico para eso, pero asegúrate de establecer tu nombre deseado. Ahora vamos a hablar del panel de herramientas. Como puedes ver aquí, contamos con diferentes herramientas y diferentes secciones. Esta se llama herramienta de movimiento, y es para mover objetos o elementos en tu lienzo o tus mesas de trabajo. El siguiente es la herramienta de selección. Por ejemplo, permítanme crear una nueva capa aquí. Si desea crear una nueva capa, puede ir fácilmente a la sección de capa y hacer clic en este icono de capa. Como puedes ver, acabamos de crear una nueva capa. Entonces voy a utilizar la herramienta de selección con el fin de seleccionar un área específica como esta y puedo llenarla con cualquier color que quiera. Si quiero cambiar el color, puedo dar click en esta sección y puedo elegir este azul. Déjame elegir el pincel para llenarlo. Ahora, con esta herramienta de movimiento, puedo mover estos fácilmente. A la siguiente herramienta se le llama herramienta de selección. Toda herramienta aquí contiene algunas herramientas ocultas. Como puedes ver, hay una pequeña flecha en la esquina inferior derecha de cada herramienta específica y puedes ver que aquí hay algunas herramientas ocultas entre las que puedes elegir. A la siguiente herramienta se le llama lazo magnético, y es para seleccionar también. Puedes seleccionar fácilmente un área específica y puedes separar tu sección deseada de esa imagen específica. Para desseleccionar, puede presionar Comando y D o Control D en Windows. Aquí también tienes diferentes herramientas de lazo, y esta es la varita mágica. Es para selección. Lo tenemos en el boceto también, por lo que puede seleccionar un área específica mágicamente. El siguiente instrumento es el cultivo. Es para recortar tus mesas de trabajo o tu imagen. El siguiente es el cuentagotas de ojos. Se puede elegir un color específico de una foto o un elemento. Estas herramientas son para retocar. Como puedes ver, tenemos pincel de sanación puntual, herramienta de pincel curativo, herramienta de parche, etc. Entonces tenemos pinceles, por ejemplo, puedo elegir el color rojo aquí. Como pueden ver, aquí puedo pintar libremente, y si hago clic derecho, puedo cambiar el tamaño de eso y también la dureza de mi pincel. A la siguiente herramienta se le llama herramienta de sello de clon. Es para retocar también. No trabajamos mucho con eso. Entonces tenemos herramienta de pincel de historial y borrador que puedes borrar tu pintura o incluso un área específica de una imagen. Entonces tenemos gradiente como este y herramienta de desenfoque para desenfocar una imagen o una parte específica de una imagen. Esta es la herramienta dodge y es para editar el brillo de un área específica de una imagen. Después tenemos la herramienta de lápiz, que es una herramienta muy importante en Adobe Photoshop. Con la herramienta de lápiz, se puede seleccionar un área específica con precisión. Si hago clic aquí, puedo hacer clic en hacer selección, el radio del alimentador va a ser cero, y vamos a dar click en, ok. Ahí vamos. Ahora bien, si elijo la herramienta de pincel, puedo llenarla de color rojo como este. El siguiente es herramienta de tipo para escribir y crear algún texto. Aquí tienes diferentes opciones. Tienes tipo horizontal, herramienta de tipo vertical, herramienta máscara de tipo horizontal y herramienta de máscara de tipo vertical. La mayoría de las veces utilizamos herramienta de tipo horizontal. Esta herramienta de selección Path, no vamos a usar mucho eso. Entonces la herramienta de rectángulo redondeado es para crear diferentes formas. Por ejemplo, puedo crear un objeto redondeado como Esto entonces puedo hacer una selección con el botón derecho, y ahora puedo llenarlo con cualquier color que quiera, así. La siguiente opción es herramienta manual, y es para pintar alrededor. También puedes presentarlo con espacio de retención en tu teclado. Entonces tenemos la herramienta de zoom, bien, para acercar y alejar. Muy bien chicos. Ahora centrémonos en la sección de capas para ver qué tenemos ahí. Como puedes ver, acabamos de crear una nueva capa y como mencioné antes, cada vez que quieras una nueva capa, Puedes hacer clic fácilmente en este icono y crea una nueva capa para ti. Puedes cambiar el nombre de las capas haciendo doble clic en su nombre y puedes cambiarlo a lo que quieras. Vamos a cambiarlo a UI. Perfecto. Ahora voy a crear otra forma aquí con las herramientas de selección. Ahí vamos, y puedo moverlo. Si quieres ocultar una capa, puedes hacer click en este i, icono, como en Sketch y recuerda que el orden de colocar tus capas es tan importante en Adobe Photoshop. Aquí la interfaz de usuario está por encima de estos rectángulo redondeado. Si lo muevo encima de este rectángulo, se puede ver la diferencia. Voy a cambiar el color para que quede más claro así. También podemos cambiar la opacidad aquí de cero a 100 por ciento. El otro elemento importante en Adobe Photoshop es la ventana Estilo de capa. Hagamos doble clic en estas capas de interfaz de usuario. Como se puede ver, aparece una ventana, que se llama lado de capa. Aquí tienes diferentes opciones para peinar tu capa. Por ejemplo, aquí tenemos opciones de mezcla por defecto, por ejemplo, puedes cambiar la opacidad y el modo de mezcla aquí. Tienes estas opciones justo en esta ventana así como puedes ver tienes un montón de opciones aquí, tienes trazo. Por ejemplo, puedo cambiar el color a rojo y aumentar el tamaño. Tienes sombra interior, tienes resplandor interno, superposición de color, gradiente y mucho más. Tienes sombra de gota también aquí así. Muy bien chicos, muchas gracias por ver este video. Espero que lo hayan disfrutado y en el siguiente video, vamos a hablar sobre el uso de Adobe Photoshop para el diseño UX de la interfaz de usuario. Entonces nos vemos. 116. Adobe Photoshop para el diseño de UI/UX: Hola a todos. Bienvenido de nuevo a otro video de este curso. En este video, vamos a estar hablando del uso de Adobe Photoshop para el diseño de UI/UX. que usted, como diseñador de UI/UX, necesite editar sus imágenes, con el fin de utilizarlas en su proyecto correctamente. Hay algunas modificaciones que no puedes hacer en Figma y es buena idea procesarlas en Adobe Photoshop. En este video, te voy a enseñar cómo puedes usar Adobe Photoshop para editar tus imágenes. Sin más preámbulos, abramos nuestro Adobe Photoshop. Como puedes ver, he descargado una imagen de este zapato de unsplash.com con la finalidad de mostrarte cómo puedes separar cualquier objeto de su fondo en Adobe Photoshop. Supongamos que estás diseñando una aplicación de compras y necesitamos tener algunos zapatos en nuestra lista de compras. En este caso, es mejor separar este zapato de su fondo, luego guardarlo como un archivo Pg, luego importarlo en Figma. Hay diferentes formas en que puedes hacer eso. Se pueden utilizar diferentes herramientas de selección. Por ejemplo, puedes usar la Varita Mágica así. Funciona en algunos ejemplos. Pero antes que nada, déjame mostrarte algo. Como se puede ver, esta capa se llama Fondo. No podemos hacer nada cuando está bloqueado. Para desbloquear eso, puede hacer doble clic en esta capa, por ejemplo, establece un nombre, no importa lo que sea. Puedes ponerlo en zapato y ahora está desbloqueado. Se pueden hacer cambios. Voy a dar clic en “Eliminar” así. Como pueden ver, aquí no tenemos antecedentes. No obstante, debes asegurarte de que el fondo se haya eliminado por completo. Por ejemplo aquí, como puedes ver, tienes algo de espacio en blanco. Tenemos que seleccionar una vez más este espacio en blanco y dar click en “Eliminar” así. Ahora con el fin de mostrarte cuál es la diferencia aquí, voy a crear una nueva capa y llamémosla BG como nuestro fondo. Voy a moverlo hacia abajo, justo debajo de nuestra capa de zapatos. Presionemos Comando A o Control A en Windows. Entonces elijamos un color diferente, por ejemplo, este y presionamos la opción “Eliminar” y ahí vamos. Como puedes ver, podríamos cambiar fácilmente el color del fondo. También puedo quitar el fondo y guardarlo como un archivo Pg, e importarlo en Figma y usar eso. Podrías tener más posibilidades de trabajar con esta imagen. Pero hay algunas imágenes que no puedes usar la Varita Mágica fácilmente para separar tu objeto específico del fondo. Déjame deshacer estos procesos. En ese caso, puedes usar otras herramientas. Por ejemplo, puedes usar el Lazo Magnético de esta manera, y puedes seleccionar tu objeto de manera fácil y perfecta. También puedes usar la herramienta Pluma, que es la mejor opción posible porque puedes obtener una selección precisa de tu objeto. No obstante, lleva más tiempo. Aquí, después de seleccionar dos puntos diferentes, debe mantener presionada la tecla Opción y presionar este punto de esta manera, y seleccionar un nuevo punto, y así sucesivamente. Ahora te voy a mostrar otro ejemplo de usar Adobe Photoshop para modificar tus imágenes. En ocasiones, es posible que deba cambiar el color de su producto. En primer lugar, permítanme seleccionar el fondo y eliminar eso así. Supongamos que voy a cambiar el color de este zapato. Es un poco difícil porque está demasiado oscuro. No obstante, voy a probarlo. En primer lugar, vamos a crear una nueva capa. Entonces voy a seleccionar todo el zapato. ¿ Cómo podemos hacer eso? Podemos mantener pulsada la tecla Comando y dar click en esta plaza aquí. Como se puede ver, ya está seleccionado. Después, asegúrate de haber seleccionado la nueva capa y cambia un color diferente, por ejemplo, el color azul. Después elige la herramienta de pincel, así. Pintémoslo todo así. Ahora, parece extraño, pero en un minuto se puede ver lo increíble que es esta técnica. Como se puede ver aquí, tenemos dos capas diferentes. Aquí tenemos el modo de mezcla y tenemos diferentes opciones. Si seleccionas “Color”, puedes ver que el color de nuestros objetos se ha cambiado perfectamente. Es fantástico porque a veces tú como diseñador de UI, tú también tienes diferentes versiones de un producto específico, pero no está disponible en Internet, por lo que puedes crear las tuyas propias. Ahora, suponga que desea cambiar su color a otra cosa y desea ver cientos de opciones. En lugar de elegir cada color uno por uno, tengo una buena solución para ti. Si vas a Ajustes, puedes ver que tenemos diferentes opciones. No obstante, si hace clic en “Saturación de tono”, puede cambiar el tono fácilmente. Como puedes ver, el color de nuestro zapato está cambiando al instante. Es increíble. ¿No es así? Para guardar tu archivo, simplemente puedes presionar Command Shift y S, luego aquí, puedes establecer un nombre, por ejemplo, zapato, luego puedes elegir el formato específico que necesites. Aquí tenemos un montón de formatos. No obstante, cuando quieras usar esta imagen sin fondo, debes elegir Png. Después haga clic en “Guardar”, y ya está hecho. Ahora podemos importar este archivo Png a tu proyecto Figma. Muy bien chicos, muchas gracias por ver este video. Espero que lo hayas disfrutado, y te veo en el siguiente video. 117. Introducción al modelado en 3D: Hola a todos, y bienvenidos de nuevo a otra sección de este curso. En esta sección, vamos a hablar de modelado 3D. Quizás te estés preguntando cómo el Modelado 3D te va a ayudar en tu carrera como diseñador de UI/UX. Déjame explicártelo en un término sencillo. Para ti, como diseñador de UI/UX, es bueno saber un poco sobre Modelado 3D porque a veces quieres diseñar una página de aterrizaje creativa, o digamos una pantalla para una aplicación que necesita algunas formas simples o incluso algún contexto 3D. En esta sección, te voy a enseñar cómo puedes usar estas técnicas con el fin de crear cosas increíbles para tu diseño. Es posible que estés familiarizado con los softwares tradicionales de Modelado 3D como CINEMA 4D, 3ds Max, etc. Sin embargo, trabajar con estos softwares tradicionales podría ser bastante arriesgado para los principiantes. En lugar de trabajar con esos softwares, les voy a mostrar otro gran ambiente. Se cuenta con una aplicación web que se llama Vectary. Se trata de una aplicación web increíble y completamente nueva que puede ayudarte a crear increíbles cosas 3D de una manera rápida y fácil. En lugar de trabajar con algunas herramientas complejas, te voy a enseñar cómo podrías usar Vectary para obtener los mejores resultados posibles. Si te diriges a vectary.com, como puedes ver, esta es la página de aterrizaje. Ahí vamos. Podemos ver estas características y la buena noticia es que, cuando termines esta sección, puedes crear fácilmente este material y puedes poner el código en tu página web o incluso puedes previsualizarlo como un modelo de realidad aumentada. Lo primero que tenemos que hacer es crear una cuenta. Existen dos tipos de cuenta. El primer tipo es gratuito. Si vas a precios, puedes ver que tenemos dos tipos, gratis y premium. Para este curso, puedes usar la cuenta gratuita porque nos vamos a centrar únicamente en lo básico. Asegúrate de crear tu cuenta, y en el siguiente video, iniciaremos juntos nuestro primer proyecto de modelado 3D. Nos vemos entonces. 118. Crea tu primer modelo 3D: Hola a todos. Bienvenido de nuevo a otro video de este curso. En este video, vamos a empezar a trabajar con rectoría. Sin más preámbulos, empecemos. En primer lugar, sigamos adelante y pinchemos y empecemos a crear. Entonces aquí puedes crear nuevo proyecto o en lugar de eso puedes usar algunos proyectos prefabricados. Voy a seguir adelante y dar click en estos proyecto. Como se puede ver aquí, tenemos un entorno 3D con tres dimensiones. Aquí vamos. Por el momento estábamos trabajando en un entorno 2D. No obstante, ahora nos vamos a sumergir en un entorno 3D. Eso es tan interesante. En primer lugar, permítanme explicarles algunos conceptos básicos. Si quieres moverte por estos Canvas, puedes mantener fácilmente espacio en tu teclado y moverte. Si quieres acercar o alejar, puedes desplazarte así y también puedes desplazarte con el clic izquierdo del ratón. Rectoría es una aplicación bastante compleja, por lo que no vamos a cubrir todas las herramientas. No obstante, te voy a enseñar los requisitos con el fin que sepas cómo puedes usar esta gran aplicación. Justo en la parte superior, tenemos algunos modos. Como puedes ver, tenemos objeto, modo edición, biblioteca y comentarios. En objeto, tenemos diferentes opciones también. Aquí tenemos primitivas. Como puedes ver, tenemos caja, esfera, cilindro, tubo, etc. fácilmente puedes dar click en caja aquí y allá vamos. Tienes tu caja. Vamos a alejarnos. Bastante impresionante. A tu derecha puedes modificar algunas variables como posición, rotación, escala, tamaño, e incluso material como este. Bastante impresionante, ¿no? Tenemos segmentos también. Voy a hacerlo 10 por ahora. Como se puede ver aquí, tenemos un artiluto. Son algunas flechas, algunos cubos, y algunos arcos. Este gizmo te permite rotar, escalar y mover tu objeto. Si quieres mover tu objeto, puedes usar estas flechas como esta en cualquier dirección que quieras. Si quieres escalar tu objeto, puedes usar estos cubos. Como puedes ver, tenemos dos cubos diferentes. El cubo externo, usemos escala tu objeto en una dirección como esta y el cubo interno, vamos a escalar tu objeto proporcionalmente. Si desea rotar su objeto, puede utilizar estos arcos. Fantástico. Ahora voy a quitar este objeto. Otra cosa que puedes usar es texto. Siempre que hagas clic en este texto 3D, puedes ver ese vector automáticamente crea un nuevo texto aquí para ti y si quieres cambiar este texto, puedes dirigirte fácilmente a una sección de texto 3D y cambiemos esto a diseño UX de la interfaz de usuario. Bastante impresionante y puedo moverlo fácilmente aquí. Puedo cambiar la profundidad. Perfecto. También puedo cambiar el material o digamos el color en este caso. Bastante impresionante y también puedes cambiar la fuente. Busquemos a Montserrat. Ahí vamos. También se puede cambiar el peso, el espaciado entre caracteres y el espaciado entre líneas. Cuando estás trabajando con un objeto 3D, necesitas renderizarlo. Aquí en la parte superior se puede ver que hay un toggle de render y si se pasa el ratón encima de eso, se puede ver que hay tres opciones diferentes. Baja calidad, calidad media, y alta calidad. Voy a ir con calidad media. Ahí vamos. Se ha renderizado a la perfección. Por supuesto, hay algunas marcas de agua en versión gratuita. Si quieres eliminarlos, puedes usar la licencia premium de vector. Ahora dejemos de renderizar nuestro texto. Chicos, eso es todo por este video. Muchas gracias por ver este video. Espero que lo hayan disfrutado y en el siguiente video hablaremos de la cámara y de la iluminación. Nos vemos ahí. 119. Cámara y iluminaciones: Hola a todos. Bienvenido de nuevo a otro video de este curso. En este video, vamos a seguir trabajando en nuestro proyecto anterior. Como puedes ver, tenemos estos textos 3D. No obstante, ahora es el momento de agregar una cámara a nuestro lienzo o a nuestra vista. Demos click en esta cámara. Bastante impresionante. Ahora si te desplazas por ahí, puedes ver que la cámara está fija y frente a nuestro texto en la vista específica que establecemos. Si haces click en esta vista de cámara, lista de capas, ahí vamos, obtendrás tu vista de cámara de diseñador. Una cámara nos ayuda a mantener una vista específica cada vez que queremos renderizar nuestro proyecto. Ahora rendericemos nuestro texto una vez más. Como puedes ver, no parece realista, porque no tenemos grandes sombras y gran iluminación, así que vamos a arreglarlo. Lo que vamos a hacer es elegir un plano sombra. Bastante impresionante. Voy a moverlo hacia abajo. Como puedes ver, ahora tenemos un plano sombra. De hecho, siempre que pongas un objeto o digamos un texto 3D encima de un plano de sombras, automáticamente creará una sombra para eso. Por ejemplo aquí, permítanme acercar, como pueden ver, nuestro texto no está perfectamente por encima de nuestro plano de sombra. En primer lugar, seleccionemos nuestro texto 3D y presionemos A. Bastante bien. Entonces voy a subirlo así, asegurarme de que esté por encima de tu plano de sombra. Como pueden ver, no lo es, así que voy a subirlo de nuevo. Ahora está bastante bien. Si renderiza tus objetos ahora mismo, puedes ver que tenemos una gran sombra. ¿ Puedes ver eso? De hecho, también puedes agregar algo de luz. Por ejemplo, aquí, voy a ir por la luz de rectángulo. Voy a moverlo un poco. Vamos a renderizar nuestra escena una vez más. Es demasiado brillante. Ahora es mejor. Fantástico. Muy bien, chicos. Muchas gracias por ver este video. Espero que lo hayan disfrutado. Te veo en el siguiente video. 120. Materiales y texturas: Hola a todos. Bienvenido de nuevo a otro video de esta sección. En este video, vamos a hablar de texturas y materiales. Cuando estás diseñando un objeto 3D, seguro que necesitas una textura o material. Como mencioné antes, tienes una biblioteca justo en la parte superior, así que sigamos adelante y pinchemos en eso. Aquí tienes diferentes opciones, aquí tenemos colecciones, tenemos una colección de diferentes formas, como puedes ver, aquí podemos usar estas formas como esta o esta, y tenemos otras opciones como bueno, como los bienes. Tienes un montón de activos 3D, y luego tenemos materiales. Supongamos que aquí queremos cambiar el material de nuestro texto. Aquí podemos elegir uno de estos materiales, voy a ir por éste. Puedes arrastrarlo y soltarlo en tu texto 3D así. Eso es bastante guay, ¿no? Vamos a renderizarlo una vez más y podemos ver la diferencia. ¿ Se puede ver lo increíble que es? Puedes cambiar fácilmente el material como desees. Vamos a cambiarlo por otra cosa, por ejemplo, ésta. Puedes elegir tu texto y hacer click en eso, perfecto, o es mejor crear otra forma aquí. Vamos a crear una caja aquí. Voy a bajar la escala, vamos a moverlo aquí, perfecto, y luego voy a cambiar su material por otra cosa, por ejemplo, éste. Es bastante guay, ¿no? Puedes reconocer cuántas posibilidades hay para que crees objetos increíbles ahí? Eso es fantástico. Muy bien chicos, muchas gracias por ver este video. Espero que lo hayas disfrutado y te veo en el siguiente video. 121. Crear una escena 3D: Hola a todos, y bienvenidos de nuevo a otro video de la sección. En este video, vamos a empezar a diseñar juntos nuestra primera escena 3D. ¿ Qué es una escena 3D? Como puede adivinar, una escena 3D es una escena que consta de diferentes objetos 3D. Por ejemplo, aquí tenemos una escena porque aquí tenemos al menos dos elementos. No obstante, vamos a crear juntos una escena más interesante. En primer lugar, quitemos estos dos objetos, bastante buenos. Voy a quedarme con el avión Shadow. Ya no necesito la Cámara, así que vamos a quitar eso. Entonces después de eso, voy a crear un texto. Hagamos click en 3D Text por ahí, bastante bien. Entonces lo voy a cambiar a UI así. Vamos a establecer este color para que sea, así, bastante impresionante. Entonces lo voy a duplicar, y cambiemos su posición. Vamos a cambiarlo a UX, así. Después de eso voy a cambiar el color a 3646ff. Eso es bastante impresionante. Déjame acercar. Entonces lo voy a girar 90 grados así, bastante impresionante. Déjame moverlo hacia el texto de la interfaz de usuario así. Una vez más, lo voy a girar así. Parece que el UX está acostado encima de la interfaz de usuario. Entonces voy a disminuir el tamaño de UX por este cubo, así. Vamos a moverlo al lado izquierdo, bastante impresionante. Vamos a mover un poco estos textos de la interfaz de usuario porque necesitamos conseguir esa sombra. Si recuerdas, cuando estás usando un Plano de Sombra, necesitamos poner nuestros objetos por encima de él para conseguir una sombra. Fantástico. Entonces vamos a elegir UX aquí, y moverlo hacia el lado izquierdo, así. Eso es fantástico. No obstante, voy a hacer UX un poco más pequeño, creo que ahora es mejor, bastante bueno. Lo siguiente que voy a hacer es agregar un muro detrás de esto. Vamos a la Biblioteca y luego vamos a Zig-zag Sides por Vectario, y aquí tenemos un Muro de Esquina. Vamos a hacer click en eso, bastante impresionante. Voy a alejarme porque necesitamos agrandar este muro. Aquí, asegúrate de que la pared esté seleccionada, y usa este cubo para agrandarlo, y este cubo también, bastante impresionante. Entonces lo que voy a hacer es cambiar su color. Cambiemos su color a algo así, eso es bastante genial. Voy a acercar. Entonces voy a ir a Biblioteca, y esta vez voy a abrir Entornos como este. aquí tenemos diferentes ambientes. Por ejemplo, podemos probar este, puedes arrastrar, y soltarlo así. Vamos a renderizar nuestra escena para ver cómo se ve. Eso es genial. No obstante, lo voy a cambiar por otra cosa como ésta. Recuerda que el entorno que elijas va a afectar las reflexiones, y también las sombras. Asegúrate de elegir el mejor ambiente posible. Probemos este también, creo que es genial. Entonces agreguemos algunos de los activos 3D a nuestra escena. Vamos a la sección Activos, y aquí buscamos libros, y yo voy a elegir éste, bastante impresionante. Agrandémoslo, fantástico. Voy a buscar otra cosa, por ejemplo, una taza de bebida como ésta. Hagámoslo más pequeño, muévelo al lado derecho, fantástico. Entonces también podemos añadir una rosquilla. Busquemos donut. Podemos añadir, por ejemplo, esta, es una rosquilla baja de poli. Yo lo voy a hacer más pequeño, y ponerlo junto a nuestra taza de bebida. Como puedes ver, tenemos una Luz Rectángulo. No obstante, voy a añadir otra luz a nuestra escena. Busquemos Luz Direccional, bastante buena. Voy a alejarme, vamos a moverlo hacia el lado derecho, rotarlo un poco. Creo que ahora es mejor. También podemos añadir diferentes objetos a nuestra escena con el fin de que se vea más profesional, y también más complejo. No obstante, por el bien de este curso, voy a mantenerlo sencillo. Vamos a renderizar nuestra escena para ver cómo se ve. Es bastante genial, ¿no? También puedes seguir adelante, y agregar algunos objetos de Colecciones. Por ejemplo, podemos seguir adelante y abrir Formas Orgánicas, y aquí tenemos diferentes objetos como éste. Vamos a reducirlo, o podrías usar otros objetos, por ejemplo, formas redondeadas como este. Depende de ti y del proyecto en el que estés trabajando, así que asegúrate de elegir grandes objetos para crear la mejor combinación posible. Chicos, muchas gracias por ver este video, espero que lo hayan disfrutado. En el siguiente video, hablaremos de renderizar y exportar. Nos vemos entonces. 122. Renderización y exportación: Hola a todos. Bienvenido de nuevo a otro video de la sección. En este video, vamos a hablar de renderizar eres escena. Como mencioné antes, siempre que estés trabajando en un proyecto 3D, necesitas renderizarlo al final. Ahora te voy a mostrar cómo puedes modificar la configuración de renderizado, y también cómo puedes usar la opción de visor, y también cómo puedes exportar tu archivo. Antes de hacer eso, voy a hacer algunos ajustes a nuestro plano sombra. Vamos a seleccionar nuestro plano de sombra, y voy a cambiar su color a algo así. Voy a elegir el color, picker. Ahora, vamos a renderizar nuestra escena. Es genial; ¿no es así? Para renderizar tu escena, tienes diferentes opciones. En primer lugar, sigamos adelante y abramos el menú de render justo en la parte superior. El primer apartado es como estos toggle. Se puede modificar la calidad, se puede establecer en baja, media o alta, y se puede hacer clic en “Iniciar vista previa de Render” así. Se le pueden agregar algunos efectos, se puede cambiar la saturación, el contraste, el filtro de color, y también el equilibrio de color, etcétera. último, pero no menos importante, puedes exportar tu escena como una imagen. No obstante, necesitas actualizar tu licencia para poder obtener esa funcionalidad, y luego puedes hacer click en descargar imagen. El siguiente rasgo importante de Vectary es el espectador. Cuando vas a la sección Visor, aquí tienes diferentes opciones que puedes modificar, como texturas, horneado, y estas son sobre iluminaciones. Aquí, podemos elegir la vista central de la cámara, y significa que la vista de la cámara estará centrada en el objeto seleccionado actualmente. Si seleccionas UI, la vista de la cámara estará centrada en este objeto y la realidad aumentada está encendida, lo cual es genial porque también podemos conseguir una escena de realidad aumentada. Entonces generamos nuestro código aquí, y ahora podemos dar click en “Generar”, lleva algún tiempo y ya está hecho. Aquí, puedes obtener el código. Como puedes ver, puedes copiar y pegar el código iframe a tu código HTML, o si no estás desarrollando tu sitio web o la aplicación, puedes dárselo fácilmente a tu desarrollador y él o ella podría usarlo a la perfección. No obstante, si quieres mostrarlo a tus clientes con anticipación, puedes cambiar el formato de HTML iframe a link, y puedes copiar este enlace a tu portapapeles y enviarlo a tus clientes o a tu amigo. En primer lugar, vamos a comprobarlo aquí. Ahí vamos, se va a ver así; ¿no es genial? Podemos sostener Command y acercar, eso es fantástico; ¿no? Si abres la escena en tu teléfono, puedes usar la opción de realidad aumentada para aumentar la escena en tus entornos, eso es bastante impresionante. Asegúrate de comprobarlo. Puedes usar tanto dispositivos Android como iOS para hacer eso, y eso es fantástico. La siguiente opción es exportar. Aquí podrás exportar tu archivo con cualquier formato que quieras OBJ, DAE, USDZ, que es formato de realidad aumentada para iOS, etcétera. No obstante, para poder utilizar este tipo de funcionalidad, hay que obtener una licencia extendida para eso. Muy bien chicos, eso es todo para esta sección. Espero que hayas disfrutado de este video y te veo en el siguiente video. 123. Herramientas de prototipo: Hola a todos. Bienvenido de nuevo a otra sección de este curso. En esta sección, vamos a hablar de prototipado. Pero primero lo primero, les voy a presentar algunas de las mejores herramientas para crear prototipos de sus proyectos. De hecho, puedes usar Figma para crear un prototipo, sin embargo, si quieres hacer un prototipo de fantasía y complejo, recomiendo que utilices otros sitios web y aplicaciones. Bueno, ¿cuáles son las mejores herramientas de prototipado? Número 1, ProtoPie, que también es mi aplicación favorita, porque es tan fácil trabajar y hay una versión de prueba, y puedes probarla antes de comprar cualquier licencia. Número 2, Zeplin. Número 3, Framer X, y luego InVision Studio, Figma, y Marvel. En el siguiente video, comenzaremos a crear prototipos de uno de nuestros proyectos anteriores en Figma. Nos vemos entonces. 124. Prototipos en Figma: Hola a todos, y bienvenidos de nuevo a otro video de este curso. En este video, vamos a empezar a crear prototipos de nuestro proyecto de aplicación financiera juntos en Figma. Te voy a mostrar algunas técnicas útiles con el fin crear un prototipo muy suave y genial. En primer lugar, sigamos adelante y acerquemos. Voy a hacer que la pantalla sea interactiva. Esta es nuestra página de bienvenida, y como pueden ver , consta de dos botones diferentes. En primer lugar, vamos a seleccionar el botón de inicio de sesión y luego vamos hacer clic en prototipo en el inspector así. Como puede ver, aparece un nodo circular. Hagamos clic en eso y arrástrelo y soltarlo así para conectarnos al signo en la pantalla. Entonces, de tu lado derecho, tienes diferentes opciones para modificar. No necesitamos cambiar nada en la interacción. No obstante, en la sección de animación, voy a abrir este menú desplegable y vamos a elegir Smart Animate, que es una característica muy grande. Puedes crear micro interacciones con él. Como puedes ver, el tipo de animación está configurado para facilitar. Está bastante bien. El tiempo de duración es de 300 milisegundos. Está bien. ¿Qué significa Smart Animate aquí? Smart Animate reconocerá las capas en ambas pantallas con el mismo nombre. Por ejemplo, aquí tenemos formas y en esta pantalla, en el signo en la pantalla, tenemos formas también con la misma ortografía. Recuerda, la ortografía importa mucho. Tienen que ser idénticos. Cuando el usuario haga clic en el botón de inicio de sesión, porque aquí tenemos dos capas con el mismo nombre, Figma lo animará automáticamente para nosotros. Adelante y haga clic en Mostrar icono. Bastante bien. Voy a dar click en iniciar sesión. Ahí vamos. ¿ Viste lo suave y hermosa que era esa animación? Es bastante impresionante. Probémoslo una vez más. Es fantástico. Incluso puedes modificar la duración si quieres. Por ejemplo, pongámoslo en 400, y voy a intentarlo. Fantástico. Ahora, por ejemplo, hagamos lo mismo con nuestro botón de inscripción. Voy a arrastrarlo y soltarlo aquí. Vamos a ponerlo en Smart Animate, y eso es todo. Bastante bien. La siguiente técnica que te voy a mostrar es para un deslizamiento dentro y deslizarse hacia fuera. Es bastante útil cuando quieres animar tu menú de hamburguesas. Aquí en nuestra página de inicio, seleccionemos nuestro icono del menú de hamburguesas. Voy a arrastrar y soltar esta flecha para crear una conexión con nuestra pantalla de menú así. Entonces aquí, lo voy a poner para empujar así. No obstante, la flecha derecha debe seleccionarse así. Ahora vamos a intentarlo. Pero antes de eso, tenemos que seguir adelante y arrastrar y soltar este ícono de juego y ponerlo aquí porque indica que este prototipado debe comenzar desde esta página de inicio. Ahora sigamos adelante y pinchemos en este ícono del menú de hamburguesas. Ahí vamos. Creo que es buena idea cambiar la duración a 200 milisegundos. Vamos a intentarlo. Es bastante bueno, ¿no? Ahora sigamos adelante y seleccionemos esta capa de superposición, esta oscura, y voy a crear una conexión desde aquí a nuestra pantalla de página principal. Vamos a ponerlo a empujar. Esta vez, se debe seleccionar la flecha izquierda con una duración de 200 milisegundos, y voy a seleccionar capas coincidentes de Smart Animate. Porque en estas dos pantallas, tenemos esta imagen de perfil. Voy a hacerlo animado automáticamente. Vamos a intentarlo. Ahí vamos. Si hago clic aquí, se puede ver que nuestra imagen de perfil es animada. Por supuesto, también puedes usar animaciones simples. Por ejemplo, podemos seguir adelante y dar click en el botón Iniciar sesión. Hagamos una conexión a nuestra verificación OTP. Bastante bien. Voy a ponerlo al instante así. Una vez más, recuerda mover este icono de juego a esta pantalla. Vamos a intentarlo así. Es instantáneo. También puedes cambiarlo para disolverlo y darle una oportunidad. Ahí vamos. Es fase. Como puedes ver, crear un gran prototipo no es tan difícil en Figma. Chicos, eso es todo por este video. Espero que lo hayas disfrutado y te veo en el siguiente video. Nos vemos entonces. 125. Enla forma de formar una aplicación en Figma: Hola a todos y bienvenidos de nuevo a otro video de este curso. En este video, te voy a mostrar cómo puedes crear un marcado en Figma. En primer lugar, les voy a pedir que abran el sitio web de FreeBiesUI. Cuando lo abriste, busquemos así a Figma. Voy a desplazarme hacia abajo y creo que es un buen ejemplo. Vamos a dar click en eso. Bastante bien. Voy a desplazarme hacia abajo y aquí puedes dar click en Descargar Freebie, y se abrirá en tu Figma. Aquí tienes diferentes ejemplos. Voy a seguir adelante y elegir esta pantalla uno, copiar esto y vamos a pegarlo aquí en nuestro proyecto. Fantástico. Voy a moverlo al lado derecho. Genial. Déjame acercar. Como puedes ver aquí, tienes diferentes capas. Si abres esta pantalla, aquí tienes tu diseño y aquí está la imagen. Voy a seleccionar eso y vamos a colocar una imagen. Si recuerdas, ya exportamos nuestras pantallas de la página de inicio. No obstante, si no lo hicieras, podrías seguir adelante y exportar alguno de estos artículos. Entonces vamos a colocarlo aquí y haga clic. Como se puede ver, se ha volteado horizontalmente. Voy a hacer clic derecho en eso y vamos a dar click en voltear horizontal, eso es todo. ¿ Puedes ver lo fácil que es crear tu marcado en Figma? Muy bien chicos, eso es todo por este video. Espero que lo hayas disfrutado y te veo en el siguiente video. 126. ¿Cómo crear tu propio portafolio en línea?: Hola a todos. En este video, vamos a estar hablando de cartera en línea. Tú, como diseñador de UI/UX, necesitas absolutamente un portafolio en línea para mostrar tus habilidades y habilidades de diseño. Es extremadamente esencial tener un portafolio sobresaliente para que puedas conseguir un buen trabajo, ya sea como diseñador de tiempo completo o como freelancer. ¿ Cómo puedes crear tu propia cartera online sin escribir una sola línea de código? Para ello, puedes usar sitios web como Dribbble o Behance, que están diseñados para diseñadores y casi todos los empleadores necesitan consultar tu perfil en uno de estos sitios web. Behance es una plataforma en línea para exhibir y descubrir el trabajo creativo. Es propiedad de Adobe y puedes crear un gran portafolio utilizándolo de forma gratuita. Alternativamente, puedes usar Dribbble para mostrar tu obra de arte y crea automáticamente un portafolio en línea para ti. También puedes personalizar tu portafolio como quieras, pero necesitas tener algo en tu mente. Para poder utilizar los servicios de Dribbble de forma gratuita, es necesario que te inviten otros diseñadores. De lo contrario, puedes comprar la suscripción premium. 127. ¿Cómo usar Dribbble?: Hola a todos. En este video, vamos a estar hablando de cómo puedes usar Dribbble. Para poder utilizar los servicios de Dribbble, primero, es necesario tener una cuenta. Una vez que crees tu cuenta, puedes navegar por las ilustraciones de otros diseños en busca de inspiración, o bien puedes subir tu propia obra creativa. Cada mes, puedes subir hasta 48 tomas y tus tomas deben cumplir con los lineamientos del Dribbble. Puedes subir imágenes de alta resolución con formato PNG, JPEG y GIF, y también GIF animados a tu perfil. Adicionalmente, si eres miembro pro, también puedes subir videos. Después de subir tu obra de arte, puedes establecer un título para ella. También puedes agregar etiquetas relativas para que otros usuarios encuentren tu obra de arte más fácil. último, pero no menos importante, debes escribir una breve descripción para tu toma, y luego podrás publicarla de inmediato o en el futuro. 128. ¿Cómo usar el Behance?: Hola a todos. En este video, vamos a estar hablando de cómo puedes usar Behance. Al igual que usar Dribbble, para poder utilizar los servicios de Behance, es necesario tener una cuenta primero. Después puedes navegar y consultar otras ilustraciones de diseñadores, o crear tu propio proyecto. La principal diferencia entre Dribbble y Behance es la relación de aspecto de tus tomas o proyectos. En Dribbble, no se puede subir un tiros verticales como una página de aterrizaje por completo. No obstante, en Behance, puedes subir imágenes con cualquier relación de aspecto para mostrar tu obra. Te recomiendo usar tanto Behance como Dribbble al mismo tiempo e intentar usar sus características únicas para presentar tu diseño a la perfección. Behance también te permite subir tus imágenes y videos de alta calidad en un solo proyecto, lo cual es una gran característica para presentar un producto interactivo en poco tiempo. 129. ¿Cómo conseguir tu primer cliente?: Hola a todos, y bienvenidos de nuevo a otra sección de este curso. En este video, vamos a hablar de ideas de negocios y cómo puedes conseguir tu primer cliente e iniciar tu propio negocio. Como diseñador de UI, puede que te estés preguntando cómo puedes obtener tu primer cliente. Bueno, esperemos que haya muchas maneras de empezar. El primer paso para encontrar clientes es contar con un portafolio fuerte. Si aún no has visto la sección de portafolio, te sugiero que veas la sección de portafolio de este curso. Después de crear tu portafolio, debes preguntarte, ¿qué tipo de trabajos te gusta tener? ¿ Quieres trabajar como diseñador de tiempo completo o quieres trabajar como freelancer. Si quieres trabajar como diseñador de UI de tiempo completo, necesitas preparar tu currículum y solicitar las empresas en las que deseas trabajar. Por otro lado, si quieres trabajar como freelancer, puedes registrarte en algunos sitios web de freelancing y encontrar fácilmente a tu primer cliente. Hay tantos sitios web por ahí con los que se puede trabajar. Por ejemplo, Freelancer.com, Fiverr, Upwork, 99designs, Dribbble, etc. Asegúrate de revisarlos y averiguar cuál es la opción más adecuada para ti. 130. ¿Cómo empezar tu propio negocio?: Hola a todos. Espero que lo estés haciendo bien. En este video, vamos a hablar de cómo puedes iniciar tu propio negocio. Empezar un negocio es difícil, por lo que debes determinar el nivel de tu motivación antes de entrar en este proceso. Cuando estás pensando en iniciar un negocio, debes saber que se necesita tanto tiempo, energía y paciencia para lograr tus objetivos. Si estás al tanto de todos estos aspectos, estás listo para dar el siguiente paso. En primer lugar, debes evaluar tu nivel de habilidades y averiguar qué tipo de servicios te gusta ofrecer, luego necesitas saber quiénes son tus clientes potenciales. Además, debes trabajar en tu precio y analizar tus números. En segundo lugar, es necesario que registre su propia empresa. En este sentido, recomiendo obtener alguna asesoría de un abogado y asegurarme de que entienda todos los requisitos legales asociados al registro de una empresa. Después de registrar tu empresa, debes empezar a crear tu propia marca, diseñar un logotipo para tu empresa y elegir los colores de tu marca. último, pero no menos importante, definitivamente debes diseñar tu propio sitio web porque es la parte más crucial de tu negocio. Ahora que ya tienes tu sitio web listo, es hora de pensar en tu estrategia de marketing. Si no pudieras ofrecer tus servicios y habilidades a las personas adecuadas, tu negocio no sería exitoso profesionales y útiles que sean tus habilidades. Así que asegúrate de tener un gran plan de marketing y ejecutarlo con precisión. 131. ¿Cómo escalar tu negocio?: Hola a todos. Espero que lo estés haciendo bien. En este video, vamos a estar hablando de cómo puedes escalar tu negocio. Ahora que estás dirigiendo tu propio negocio, tal vez te estés preguntando cómo puedes escalar tu negocio, o en otras palabras, cómo puedes aumentar dramáticamente los ingresos de tu negocio. Cuando se trata de negocios en línea, la mayoría de los empresarios suelen centrarse en una región geográfica por el bien de la simplicidad. Es una gran idea para comenzar tu viaje, sin embargo, no es suficiente para desarrollar un negocio rentable. Como puede adivinar, la mejor solución es expandir sus opciones globales y conseguir clientes de todo el mundo. El siguiente paso es intentar automatizar tus procesos manuales los cuales pueden evitar perder tu tiempo, porque no importa cuántos clientes tengas, solo hay 24 horas al día. Puede utilizar el sitio web buffer para administrar sus redes sociales de forma automática. También hay un montón de otras herramientas para recordarle a sus clientes sus facturas en poco tiempo. No necesitas dedicar tanto tiempo a esas tareas que se pueden delegar y hacer automáticamente, en cambio, debes enfocarte en tu contenido y en el resultado de cada proyecto. 132. Comuní: Hola a todos. En este video, vamos a estar hablando de comunicarnos con tus clientes. La comunicación eficiente con los clientes juega un papel clave en cualquier tipo de negocio, y para los diseñadores, no hay excepciones. El modo en que interactúas con tus clientes es tan importante si quieres ser un emprendedor exitoso. ¿ Cómo debes manejar la situación si algo sale mal? Bueno, en cualquier tipo de negocio, hay momentos en que algo sale mal y es normal. No obstante, la forma en que afrontas estas dificultades es tan importante. Supongamos que establece un plazo para entregar el proyecto final al cliente y en medio del proceso de diseño, usted entiende que podría tardar más tiempo. Bueno, en este caso, necesario informar a su cliente al respecto lo antes posible y tratar de encontrar una buena solución que funcione para ambos. 133. Contrato: Hola a todos. En este video, vamos a estar hablando de contratos. Al igual que cualquier otro negocio, debes tener un contrato adecuado en su lugar para iniciar un proyecto. No importa lo grande o lo pequeño que sea ese proyecto, tener un contrato lo mantiene todo claro y protege los derechos de ambas partes. ¿ Qué debe incluirse en el acuerdo? Lo más importante que debes agregar al contrato es la declaración de tus servicios de manera clara, y a veces también es aún mejor mencionar lo que no harás por el cliente. Asegúrese de mencionar el plazo para entregar el proyecto y también sobre el calendario de pagos. Recuerda, que el contrato no debe ser sólo sobre esas cosas que podrían salir mal. Es mejor enfocarse en lo que se debe hacer bien. En general, es una buena idea obtener asesoría legal de un abogado con anticipación. 134. ¿Dónde encontrar la inspiración del diseño de clase mundial: Hola a todos. En este video, vamos a estar hablando de Inspiración y Recursos. Estar inspirado por otros diseñadores es absolutamente fino e importante. No obstante, es necesario asegurarse de que no se copian sus obras. Si te interesan sus diseños y te gustaría utilizar partes de ellos en tu proyecto, primero debes pedir permiso. Como recordarán, hablamos de Behance y Dribbble en las secciones anteriores de este curso. Estos dos sitios web son los lugares más populares para encontrar inspiración artística. Hay tantos sitios web y páginas de Instagram que puedes referirte como fuente de inspiración. También puedes mostrar a tus clientes lo que tienes como inspiración para saber cuáles son sus expectativas. 135. Recursos de imagen: Hola a todos. En este video, vamos a estar hablando de recursos de imagen. Nosotros como diseñadores trabajamos mucho con imágenes. Podría ser cualquier tipo de imágenes en forma de perfiles, productos, etc.. Contar con recursos eficientes es absolutamente esencial, a fin de obtener las imágenes más adecuadas para nuestros proyectos. Hay tantos sitios web que te ofrecen una variedad de imágenes. Algunos de ellos son pagados y algunos de ellos son gratuitos. No obstante, si buscas imágenes libres de derechos de autor para usar en tus proyectos sin duda alguna sobre su licencia, te sugiero que uses Unsplash.com. Es uno de los mejores sitios web por ahí, por encontrar casi cualquier tipo de imágenes en diferentes categorías. Recuerda que debes asegurarte de la licencia de las imágenes que deseas utilizar. De lo contrario, puede que estés en problemas. 136. ¿Cuál es tu próximo paso?: Hola a todos. En este video vamos a estar hablando del siguiente paso como diseñador UI UX. Ahora que has aprendido tanto sobre el diseño de la interfaz de usuario, es el momento de dar el siguiente paso. Ya estás listo para comenzar a diseñar increíbles aplicaciones móviles y sitios web. Como diseñador, siempre debes ser creativo. Así que trata de desafiarte a ti mismo todos los días para descubrir secretos ocultos de la interfaz de usuario y el diseño de UX, probablemente debes haber escuchado que la práctica hace la perfección, pero recuerda que tu diseño debería no ser siempre perfecto. Lo único que importa, tu progresión y mejoras. Creo que es una buena idea cambiar esa famosa frase, a la práctica progresa. Dicho esto, deberías convertirte en un mejor diseñador cada día. Si quieres aprender más sobre diseño UI UX y subir de nivel tus habilidades de diseño. Tengo buenas noticias para ti. Tengo un canal de YouTube donde pongo toneladas de cosas gratis que te pueden resultar interesantes. Así que asegúrate de suscribirte a mi canal para no perderte mis próximos tutoriales. Si deseas recibir notificaciones sobre actualizaciones de cursos o nuevos cursos, también puedes seguirme en Skillshare. Muchos de ustedes me pidieron que creara un curso que les ayude a construir sitios web modernos visualmente sin código. Y me gustaría anunciar que recientemente publiqué un curso integral que te enseña todo lo que necesitas saber para convertirte en un diseñador web y desarrollador web de clase mundial, aprenderás a convierta visualmente su Figma diseñado para sitios web personalizados y conviértase en un freelancer exitoso si desea aprender más sobre la teoría del color y comprender cómo crear impresionantes esquemas de color para su UI UX proyectos de diseño. Puedes consultar mi otro curso llamado crear increíbles esquemas de color para tus proyectos de diseño UI UX. Además, si quieres aprender a crear escenas 3D e ilustraciones en 3D, puedes consultar mi otro curso. Muy enseñarte a convertirte en un Illustrator 3D usando Blender. Por último, pero no menos importante, debo agradecerles por ver este tutorial. Ha sido un largo viaje para los dos y espero que lo hayan disfrutado. Te deseo la mejor de las suertes, y no puedo esperar a ver tu obra de arte.