Clase magistral para principiantes de Figma: diseña tu primera aplicación y UI de sitio web

1. ¡Bienvenidos a la clase magistral de Figma para principiantes!: Bienvenido a la clase magistral para principiantes de Figma. Si alguna vez has querido diseñar un sitio web o una aplicación móvil, pero no sabías exactamente por dónde empezar, entonces este es el curso para ti. Hola, mi nombre es Ahmed l Hassan, y soy diseñador de UIUX con más de cinco años de experiencia diseñando productos digitales, interfaces A lo largo de los años, he diseñado todo, desde los conceptos de aplicaciones más simples hasta sistemas de diseño completo. Y voy a guiarte a través del mismo flujo de trabajo amigable para principiantes que desearía tener cuando comencé. En este curso, crearemos un diseño completo de UI desde cero. Mientras hacemos eso, vamos a estar aprendiendo los fundamentos de Figma paso a paso juntos Primero comenzaremos familiarizándonos con la interfaz básica de Figma y luego creando nuestra primera pantalla Luego, vamos a aprender a usar los elementos más básicos como texto, formas, aprenderemos sobre colores, tipografía, espaciado, y muchos de los conceptos básicos de Figma A medida que avanzamos, aprenderemos más sobre herramientas más complejas como diseños automáticos y componentes que realmente nos ayudan a mantener nuestro diseño escalable y organizado al mismo tiempo. También estarás aprendiendo mucho más sobre prototipado y conectando diferentes pantallas juntas y creando animaciones simples, cosas que realmente hacen que tu diseño sea funcional e interactivo al final de esta clase, habrás creado tu propia interfaz de diseño de UI, y al mismo tiempo, habrás entendido el flujo de trabajo fundamental que utilizan los diseñadores Figma ya sea que quieras convertirte en diseñador tú mismo o simplemente quieres mejorar tus habilidades creativas, o tal vez simplemente quieras aprender una herramienta de diseño moderna y poderosa. Este curso es el lugar perfecto para comenzar. Entonces comencemos. 2. Introducción: lo que aprenderás y construirás en este curso: Hola y bienvenidos a la clase magistral para principiantes de Figma. Un curso en el que estarás aprendiendo los cimientos y bloques de construcción que necesitas para adentrarte en el mundo del diseño usando Figma. Figma es un maravilloso y programa de diseño así como muy fundacional en el campo hoy en día, digo que viene como si fuera nuevo, pero ha estado aquí por un tiempo y ha ocupado su lugar en el mundo del diseño, y es una de las empresas líderes y programas de diseño líderes en este momento que muchos diseñadores usan, especialmente cuando se trata del campo de diseño de producto o diseño UIUX. Um, pero también se está expandiendo, ¿verdad? Entonces, ya sabes, bienvenidos al curso. Así que si eres un principiante, un principiante completo, absoluto o si tienes algún conocimiento de Figma ya o no figma necesariamente, pero tal vez otros programas de diseño como los programas adobe, este es el curso para Voy a guiarte a través este curso de la manera más sencilla posible, pero también dándote consejos y trucos para salir adelante, no solo aprender lo básico, sino adelantarte un poco y convertirte más en un diseñador profesional y tener una gran base de entonces ¿qué vas a aprender en este curso? Hay algunas cosas que vas a aprender. Lo primero son los conceptos básicos del diseño. Entonces vamos a aprender sobre los conceptos básicos del diseño, cómo crear los elementos de diseño más básicos, marcos, objetos, formas, así como usar la herramienta pluma y otras cosas y entender cómo puedes usarlos para crear diferentes componentes y así sucesivamente Además de entender los colores, la tipografía, estos fundamentos básicos del diseño estos fundamentos básicos del diseño. Vamos a ir a través de ellos. Si ya tienes algunos antecedentes, esto solo va a ser un poco de revisión. Vamos a usar todo eso y construir sobre él y comenzar a crear pantallas de interfaz de usuario. Entonces estas son interfaces de usuario que vamos a estar creando para usar estos elementos, lo que hemos aprendido hasta ahora, lo que hemos construido hasta ahora, para construir algo más grande. Esto va de las células a los organismos a los cuerpos completos. Este es uno de los primeros pasos. A partir de ahí, vamos a estar explorando la creación de prototipos. Ahora la forma de pensar sobre la creación de prototipos, en caso de que no estés familiarizado con él, es básicamente lo que podrías llamar animaciones y funcionalidad Entonces diseñar un botón, eso es diseño. Pero el botón es clicable, utilizable, teniendo una pequeña animación agradable cuando pasas el cursor sobre él o haces clic sobre él, es decir prototipado, y vamos a estar aprendiendo eso Entonces una de las últimas cosas que vas a estar aprendiendo es compartir tu trabajo porque después de todo, ese es uno de los pasos más importantes y uno de los últimos pasos en el proceso. Después de hacer todo eso, quieres compartir tu trabajo, ya sea con los clientes, ya sea con los usuarios o con tus compañeros también, eso es parte de él. Compartir tu trabajo y entender cómo puedes usarlo para colaborar con compañeros de trabajo, eso es algo bastante esencial, y vamos a estar aprendiendo eso también Ahora bien, una segunda pregunta es, ¿qué vas a construir con ella? Esta es una pregunta que deberías haber aclarado hasta el momento. Es decir, tomando este curso. ¿Por qué viniste aquí? ¿Qué estás tratando de lograr? O qué quieres aprender a construir y quizás construir aquí, puedes llegar a un par de malentendidos Cuando decimos construir aquí, nos referimos al proceso de diseño. No nos referimos a construir un producto real. No nos referimos en realidad a construir un sitio web, programarlo, sino diseñar cómo se vería y cómo funcionaría. Entonces, ¿qué vas a estar construyendo o podrás construir con este curso? Sitios web, eso es una cosa. Poder construir sitios web, algo que vas a poder pensar en cualquier sitio web en mente, eso es algo que vas a poder hacer. Quieres hacer el nuevo Facebook, el nuevo Instagram, quieres hacer el nuevo Google. Eso es algo que puedes hacer que puedes enmarcar y crear prototipos dentro de este curso o después de aprender de este curso Otra cosa son las aplicaciones móviles que pueden ser para teléfonos, para tabletas, sea cual sea el producto que estés pensando. Puedes crear apps o diseñar estas apps a través de Figma. Otra cosa es el diseño gráfico. Esto es algo así como un caso de uso que se ve cada vez con más frecuencia en FigMA Para lo que mucha gente está usando Figma es el diseño gráfico, ya sea para hacer carteles o crear imágenes, identidades de marca, o tal vez contenido de redes sociales Eso es algo que ahora puedes hacer con Figma. Lo asombroso de Figma es que se está expandiendo continuamente Está creciendo con los diseñadores. Eso es algo que quizá personalmente, siento que a otros programas de diseño no les fue muy bien. Muchas veces era como, cada año, hay una nueva versión de cualquier programa de diseño XYZ, y era casi lo mismo. Simplemente agregaron un par de características para los usuarios altamente avanzados, pero el programa realmente no cambió mucho. No ofrecía algo nuevo, no revolucionó Pero Figma sigue creciendo y cambiando. Y ves un par de cosas que he resaltado, quiero decir, que escribí aquí, pero borrosas porque solo para darte la sensación de que hay muchos más casos de uso que vas a estar aprendiendo y que puedes construir usando Figma No vamos a estar discutiendo todos ellos dentro del alcance de este curso, ya que es un curso para principiantes. Pero sólo para darte un vistazo, quiero decir, se puede ver medio borrosa es como presentaciones Puedes crear presentaciones con Figma. De hecho, puede construir sitios web. Sin programación, se puede publicar un sitio web con FIGMA. Pero estas son otras herramientas dentro Figma de las que no vamos a estar hablando dentro del alcance Solo hay que tener en cuenta, Figma es todo un universo en sí mismo. Siguen expandiéndose, agregando funciones de IA, complementos, demás Por eso es algo genial que empieces ahora. De esto se trata este curso. Aquí es donde vas a aprender y comencemos. 3. Primeros pasos con Figma: Hola ahí. Así que esta es la primera lección para entrar en Figma explorando y entendiendo cómo puede configurar su espacio Entonces estoy asumiendo que has seguido adelante y descargaste la app o al menos abriste la versión web solo para tu información. No es necesario que descargues la app. Simplemente puede abrir el sitio web y usarlo desde allí desde su navegador. Estoy asumiendo que también has iniciado sesión tú mismo. No creo que deba guiarte a través de ese proceso, pero debería ser bastante fácil. Entonces ahora que ya tienes tu Figma instalado y ya estás en él ahora mismo, así es como debería verse A lo mejor tienes una versión ligera. A lo mejor este es el modo oscuro, pero básicamente es lo mismo. Tienes muchas cosas pasando. Él para hacerte saber, hay razones, comunidad. Así que no te distraigas con todos estos elementos y sigue adelante y haz clic en Crear, y continúa diseñando Ahora bien, tal vez veas esto de manera diferente, podrías verlas como servicios diferentes. Así que solo sigue adelante y haz clic en el diseño, y va a abrir una nueva pestaña para ti. Esta nueva pestaña es básicamente un nuevo archivo de proyecto un archivo de proyecto puede contener varias páginas dentro de él. Ahora mismo, estamos en este expediente. Ahora mismo está sin título y voy a repasar los diferentes elementos aquí en la pantalla contigo uno por uno Lo primero que vamos a ver es la sartén de la izquierda. Ahora tenemos, en primer lugar, aquí el logo Figma. Al hacer clic en él, tienes estas pestañas regulares, las pestañas estándar de archivo, vista de edición. Estos pueden ofrecerte muchas más opciones para editar cosas así como configurar el archivo, configurar algunas cosas, exportar, etc., cambiar tus preferencias. Pero estos están prácticamente ocultos, porque no hace falta que los uses tanto, así que están escondidos aquí bajo este logo de Figma. Entonces tienes el título. Puedes seguir adelante y darle un nombre a tu proyecto Proyecto X, por ejemplo, te dice que este es un proyecto de equipo, así también puedes cambiar el nombre del proyecto del equipo, y dice que es así que tenemos estas opciones aquí, y debajo de eso, tenemos dos pestañas diferentes. Contamos con archivo y activos. Ahora bien, los activos se relacionan con los activos de diseño que puedes pedir prestados. Pero esto es un poco más avanzado. Pero digamos que tienes aquí estas bibliotecas. Entonces tienes, por ejemplo, elementos de diseño IOS que puedes tomar prestados desde aquí y agregar a la página Pero ahora mismo, sigamos con el archivo. Ahora, en Archivo, tienes páginas. Entonces aquí se ve la página número uno, y dice que quedan dos páginas libres. Esto es si tienes la versión gratuita como yo hago para esta cuenta. Y puedes agregar otra página. Ahora se podría decir, ¿cuál es el punto de las páginas? Quiero decir, ¿es esto ya sabes ¿Estamos escribiendo un libro aquí? No, no se trata de eso en absoluto. Aquí se trata de documentos completamente diferentes. Entonces, cuando vamos a la página uno y creamos un rectángulo, y vas a la página dos, este rectángulo no se encuentra por ningún lado. ¿Bien? Así que solo tenlo en mente. Las páginas son un tipo de documentos diferentes dentro del mismo proyecto. Esto es como un archivo o se puede decir una carpeta, derecho, y tiene varias páginas dentro de él. Así que sigamos adelante, haz clic derecho y borra esta página. Y luego tenemos capas. Ahora, con las capas, solo puedes ver las capas, los objetos, los grupos, los marcos, todo tipo de elementos que tengas en tu lienzo. Si creamos otro rectángulo aquí, podemos ver el rectángulo uno y dos. Si hacemos un rectángulo con una forma diferente, puedes ver un poco la forma que también se muestra aquí. No muestra el color, sino que muestra la forma general del mismo solo para darte una idea. Entonces esto es más o menos para darte una visión general de lo que está sucediendo en tu archivo. También puedes buscar cosas dentro de ella. que puedas buscar texto diferente o puedes buscar nombres de archivos y así sucesivamente. También puedes reemplazar, puedes elegir lo que estás buscando exactamente es una imagen, una forma, etc. Hay muchas opciones y también puedes colapsar este menú o este panel aquí solo para que tengas más espacio para ver un proyecto. Pero te recomendaría que la guardes aquí. Puedes minimizarlo o puedes expandirlo si tienes una pantalla más grande, por ejemplo, y puedes permitírtelo. Sólo tienes que tener un control general sobre lo que está pasando. En su archivo de diseño. Puedes ver todas las capas aquí. Eso es realmente útil. Entonces aquí en la parte inferior, tenemos una barra de herramientas. A menudo puede asumir o esperar la barra de herramientas esté ahí arriba o tal vez a la izquierda o algo así. Pero no, en Figma, está aquí abajo, y no se le puede hacer mucho, para ser honesto No puedes moverlo, no puedes hacerle mucho. Mucha gente ve eso como limitante, pero para ser sinceros, me parece más sencillo es mejor. No quiero poder tirar mis herramientas por todas partes, sino tenerlas en un solo lugar y sé que siempre van a estar ahí. Vamos a hablar de las herramientas por separado más adelante. Pero por ahora, miremos en el panel de la derecha. Y aquí tenemos diseño. Entonces bajo diseño, tienes diseño y prototipo. Se trata de dos puntos de vista diferentes. Como dije antes, prototipo se relaciona más con animaciones y cómo se muestra el proyecto. Entonces, cuando quieres mostrárselo a un cliente, cómo se vería, y luego tienes diseño. El diseño se relaciona Quiero decir, cuando no seleccionas nada, puedes cambiar la página. Entonces el color del fondo, puedes hacerlo blanco o puedes hacerlo oscuro. Depende de ti. También puedes cambiar los estilos de variables, pero estas son cosas de las que aún no hemos hablado, y están un poco más avanzadas, ¿verdad? Así que no vayas solo ahí. Pero al hacer clic en cualquier objeto, este rectanel empieza a mostrarte las propiedades Entonces desde la posición, ves las Xs y Ys, tienes la rotación, así como un par de botones de alineación rápida y cosas. Puedes reflejar el objeto, voltearlo, y así sucesivamente. También tienes diseño, así que esto se relaciona con el tamaño, la altura, puedes cambiarlo, el ancho, tienes apariencia, la opacidad, esquinas redondeadas, tienes relleno, trazo, efectos y exportación En caso de que quieras exportar esto como una imagen como PDF, también puedes hacerlo. Aquí hay muchas opciones. Y podrías preguntarme, ¿qué es este botoncito de aquí o allá o lo que sea? Vamos a hablar de ellos a su debido tiempo. Pero sí, deberías obtener una comprensión general de tu archivo. ¿Dónde está qué y cómo los utilizo? Eso es lo que estoy tratando de darte ahora. Como mencionamos, el panel de la izquierda es tu archivo y tus capas. Aquí tienes tu barra de herramientas. Donde puedes elegir diferentes herramientas. También puedes usar atajo. Entonces aquí, dice rectángulo R. Por ejemplo, solo puedes presionar R para obtenerlo. Puede presionar V para obtener la herramienta de movimiento normal, y así sucesivamente. la derecha, tienes las especificaciones de diseño o propiedades de cualquier objeto que estés seleccionando. Hay un botón muy, muy importante que está justo aquí, este es el botón de reproducción. Cuando haces clic en este botón, te va a permitir ver en qué estás trabajando desde la perspectiva del usuario. Pero para hacer eso, es necesario tener un marco. Hablemos de qué marcos hay en la siguiente lección. 4. Configurar tu primera pantalla: Marcos, marcos y marcos. ¿Qué son realmente los marcos? Entonces los marcos son tu lienzo. Ellos son la herramienta o el material, digamos, en el que estás pintando. No es el pincel, no es la paleta de colores, sino que es tu ventana al usuario, ¿verdad? Esto es lo que es el producto final y lo que los usuarios lo que se va a entregar al final. Eso es lo que es un marco. No se puede dibujar en el aire, pero se puede dibujar en una pared. Pero en ese sentido, la pared es tu lienzo y eso es exactamente lo que son los marcos para figma. Aquí mismo, seleccionas la herramienta de marco, y lo que puedes hacer es simplemente crear cualquier marco de cualquier tamaño y así, tienes un marco. Esta es la pantalla. Esta es la pantalla. Podría ser una pantalla de computadora, una pantalla de teléfono, sea lo que sea. Cuando lo sostienes, cuando haces clic en él y vas a jugar, abres una nueva pestaña en Figma que te permite ver cómo se ve este marco Los marcos son únicos porque puedes poner cosas dentro de marcos. Puedes poner rectángulos, puedes colorearlos o copiarlos, pegarlos, ponerlos en otro lugar, y puedes ver cómo se ve Esta es la pantalla que estás creando y que puedes ver. Ahora, hay algunas cosas a tener en cuenta. Puedes tener marcos dentro de marcos. Crea un marco aquí, dale un color, hazlo. Entonces este es un marco dentro de un marco. Parece un rectángulo normal, pero en realidad es un marco. Pero el marco exterior es el lienzo, y esto se está volviendo como un contenedor dentro de un lienzo dentro de un lienzo. Vamos a discutir por qué podrías querer hacer eso y cuál es la diferencia entre un rectángulo y un marco. Pero por ahora, entendamos qué son los marcos y cómo usarlos para crear pantallas. Bien. Ahora una cosa a entender es que puedes crear marcos en diferentes tamaños, y FigMA ya te ayuda ahí Entonces, cuando haces clic en la herramienta de marco y vas al panel de la derecha, vas a ver diferentes marcos. Entonces hay un marco de un iPhone, ¿verdad? iPhone 17, 15, P max, lo que quieras, diferentes tamaños, así como Android. Tienes tablets, tienes escritorios, MacBooks, televisores. Entonces, lo que sea que quieras crear, puedes crear un marco de la misma. Así que con solo hacer clic en una MacBook Air, podemos crearla y te muestra el tamaño real. Esta es la dimensión de una MacBook Air. Cuando hacemos clic en él y hacemos clic en Reproducir, vamos a ver qué hay en esa MacBook, cómo se ve. Así es básicamente como se crea una pantalla. Puedes crear un marco de un iPhone o puedes crear un marco de un televisor o un Apple Watch incluso. Todo eso es posible. Una cosa que puedes hacer como extra. Cuando cree este marco, deseleccione todo. No elija nada, haga clic en la naturaleza, justo aquí, y luego vaya al prototipo. Figma nos permite mostrar un marco de un dispositivo. Como elegimos MacBook Air, puedes elegir MacBook Air aquí mismo como dispositivo. A veces lo hace automáticamente por ti. Lo que va a hacer es que va a agregar una imagen de la MacBook para mostrar tu diseño como si estuviera en una Mac real, eso es algo realmente genial porque es muy inmersivo y le da al usuario experiencia o la sensación de que en realidad está usando una MacBook Este es un sitio web real que se muestra en una computadora portátil. Ahora, compara esto con ser mostrado en nada, ningún dispositivo. Se ve muy seco. Esa es una cosa que puedes hacer que te recomiendo personalmente. Pero toda la idea de esta lección es que los marcos son tu lienzo. No se puede simplemente estar diseñando en la naturaleza. Tienes que tener un marco, un lienzo y poner tu pintura sobre él. Todo lo que está fuera de este marco, si vengo a crear aquí un rectángulo, y lo ponemos aquí, no se va a mostrar porque está encima de él, pero no está dentro de él, si lo pongo aquí, tampoco es visible. Es solo que no hay nada. Pero cuando arrastre esto y lo pongo aquí, ahora está dentro del marco. Es visible y se puede ver eso aquí. Se puede ver que el marco puede contener cosas dentro de él, una vez que se quita eso fuera de él, ahora el rectángulo está afuera. A pesar de que está en la parte superior, se puede ver aquí, pero no es visible. Así es como puedes usar marcos como tu lienzo. 5. Agregar texto y elementos básicos: Hola. En esta lección, vamos a estar creando o aprendiendo a crear formas, cuadros de texto, vectores y más. primero es lo primero, comencemos por conocer un poco esta barra de herramientas. Ahora, ya hemos explorado la herramienta de movimiento, y esta es la herramienta predeterminada que usas que deberías estar usando al seleccionar cosas y demás Así que siempre ten eso a mano y luego tienes la herramienta de marco. Esta es una herramienta con la que también hemos estado familiarizados y que hemos aprendido a usar, básicamente creando marcos, y luego tenemos esta herramienta rectangular. Y cada uno de ellos, tienen su atajo. Entonces puedes hacer clic en R para elegir esto. Puedes hacer clic en V para elegir el movimiento uno, así puedes simplemente cambiar entre ellos con estas letras. ¿Bien? Sólo hay que memorizarlo. Entonces tienes esta herramienta cuadrada o rectangular. Puedes crearlo así y puedes crear un rectángulo. Es tan sencillo como eso. Se puede hacer lo mismo con la herramienta de línea. ¿Correcto? Y tienes herramienta elipse, herramienta flecha, muchas cosas diferentes Ahora, una cosa que debes saber que es bastante importante es mantener el turno mientras que crear una forma básicamente te permite hacerlo recto. Hace que las dimensiones sean iguales. Entonces 154 por 154 son las dimensiones. De esta manera, simplemente se mantiene del mismo tamaño exacto. Lo mismo cuando se quiere crear un rectángulo. Entonces de esta manera, se convierte en un cuadrado más que en un rectángulo. Entonces eso es muy útil. Otra cosa es a la hora de crear algo así como una línea, mantener el turno permite que sea recto. Yo me quito turno, mira lo que pasa, puedo crearlo en muchos grados diferentes en todo tipo de grados. Pero si mantengo el turno, se vuelve recto a derecha e izquierda, o puede subir y bajar, o puede ser diagonal. Así que nosotros y abajo, ¿de acuerdo? Entonces eso es una cosa a tener en cuenta, es muy útil porque la mayoría de las veces, quieres mantener las cosas claras y limpias. Pero si no, depende totalmente de ti. Así que puedes seguir adelante y probar las otras herramientas también y crear cosas con ellas, pero en su mayoría funcionan con principios similares, ¿de acuerdo? Y luego tenemos la herramienta pluma. Ahora bien, la forma en que la herramienta pluma también es bastante sencilla. Entonces haces clic una vez, y luego creas un punto, ¿de acuerdo? Entonces haz clic, tienes un punto, y luego creas otro punto. Y mantienes pulsado si mantienes pulsado, básicamente puedes crear curva. Puedes hacerlo curvo. ¿Ves? Así como así, creé esta curva. Ahora, puedo crear una forma muy bonita o lo que sea con ella jugando Entonces solo para mostrarte a lo que me refiero, solo estoy tratando de crear esta forma de tres D. No estoy seguro de qué tipo de forma es, pero parece una bañera. Sí. Así como así, puedes crear diferentes formas, con diferentes líneas y así sucesivamente. Ahora, puedes editarlos, puedes cambiarlos, puedes cambiarlos hacia arriba. Por supuesto, si vas al diseño, también puedes cambiar el trazo para aumentar las líneas, y esto es algo que puedes hacer con todas ellas. Entonces, una vez que eliges una línea o un vector igual que éste, puedes venir aquí y podrás ver el trazo. Está a la una ahora, puedes hacer el peso. Puedes hacer que tenga más peso, por lo que se vuelve más grueso. Hay otros ajustes puedes cambiar el color y lo mismo con estas formas, también puedes cambiar el relleno, elegir un color diferente, darle una opacidad diferente, y así sucesivamente Porque como hablamos de ello, este panel de la derecha esto te ayuda a elegir y cambiar las propiedades de tus formas o de tus otros elementos como marcos. Puedes agregarle un trazo, puedes hacerlo negro, puedes hacerlo rojo, y también puedes agregarle efectos, pero eso es un poco más avanzado. Pero así es esencialmente como puedes crear diferentes formas. Con estas formas, estás tratando de crear tu interfaz de usuario. Lo que también tenemos es herramienta de texto. Con la herramienta de texto, hay dos formas principales de crear texto, por lo que simplemente puede hacer clic en cualquier lugar y comenzar a escribir. Se puede decir hola. Mundo, y luego solo escribe el tiempo que quieras. Lo que va a pasar es que va a seguir recibiendo el tiempo que quieras. No va a ir a una segunda línea, porque no tiene forma definida. Es decir, se puede ver este esquema, pero sigue expandiéndose. Se expande y se contrae en función del tamaño en función de la cantidad de texto que tengas. Hay otra manera que es creando una forma, mantener, hacer clic en mantener y luego dejarla, entonces puedes decir hola mundo. Y luego cuando escribes muchas A's, vas a ver que baja a la otra línea. Entonces hay un descanso, y esa es básicamente una diferencia entre estas dos formas diferentes de hacerlo. Si conoces la forma que quieres crear, así que si dices, Oye, quiero algún cuadro de texto por aquí, puedes crearlo de esta manera, claro, podemos cambiar los ajustes más tarde, pero lo más importante, que lo configures al principio de la manera que quieras, y luego la puedes retocar más adelante Pero escribamos aquí, quiero decir, Hola mundo. Podemos ir resaltando esto y luego en esta pequeña sección aquí, podemos cambiar la tipografía Podemos cambiar la fuente, elegir algo gracioso, cambiar el tamaño de la fuente. ¿Es regular o si hay una versión en negrita, también podemos elegir esa. Déjame mostrarte que hay estas versiones que podemos elegir. Podemos cambiar el espaciado entre letras, por ejemplo, podemos hacerlos más cercanos o más separados. Si hay varias líneas, hagamos otra línea. También podemos cambiar el espaciado entre ellos a interlineado, o podemos escribir Auto y luego se vuelve automático. Entonces podemos poner esto de nuevo a cero para hacer una normal podemos cambiar la alineación del párrafo también de alineado al medio o podría ser de derecha a izquierda. También podemos elegir en términos del cuadro de texto, si es más abajo o es al centro o así tipo de horizontal y vertical. Ambas cosas se pueden configurar y cambiar. Definitivamente te recomendaría que sigas adelante e intentes explorar estas opciones y tratar de averiguarlas por tu cuenta para entender cómo puedes manipular objetos y formas y cuadros de texto para llegar a algo que quieras. ¿Bien? Solo tómate unos minutos para tratar de entender y comprender, ¿de acuerdo? Entonces como mencioné, lo bueno es que la mayoría de los elementos, tienen los mismos ajustes. Entonces, ya sea un elemento de texto o un rectángulo o un cuadrado, en su mayoría son los mismos. Sólo objetos de texto, tienen la sección llamada tipografía Pero todo lo demás es igual. Tienes relleno, tienes trazo, tienes efecto, tienes diseño. Se puede aumentar o cambiar el tamaño. También se puede cambiar el posicionamiento y así sucesivamente. Entonces ahora que tenemos eso, hemos entendido cómo podemos crear diferentes formas. Podemos crear líneas. Podemos crear cuadros de texto. Pero hay algunas cosas que sabes, más. Una cosa muy rápido, Lines. Las líneas son geniales. Las líneas son bonitas. Pero una cosa que debes saber es cuando aumentas el ancho, puedes ver que esta línea es muy cuadrada o rectangular. También tiene bordes afilados. Podemos cambiar eso haciendo que los bordes sean redondos. Eso es una cosa que puedes hacer. Otra cosa es que puedes girar un extremo a una flecha o a una flecha triangular o a una flecha triangular inversa o círculo y así sucesivamente y así sucesivamente. Eso es algo genial a tener en cuenta es que también puedes jugar con estos ajustes, especialmente cuando se trata de líneas. Son muy versátiles y así sucesivamente. Ahora hemos aprendido a crear objetos y a cambiar las propiedades. En la siguiente lección, vamos a hablar un poco más sobre cómo podemos tener diferentes relaciones con estos objetos y cómo podemos trabajar con grupos y marcos. Te veré en la siguiente lección. 6. Marcos vs. grupos vs. formas: Entonces grupos y marcos, ¿qué son y cómo los podemos usar? Entonces, muchas veces, como diseñador, vas a encontrarte con una situación en la que vas a querer juntar algunos elementos Quieres que se mantengan juntas, yendo juntas. Ya sabes, no quieres que estén separados, sino que formen una sola forma. Y sólo para darte un ejemplo de eso, tenemos aquí esta tina. Podemos llevarlo de vuelta a la normalidad, y tenemos estas líneas. Pero el tema es que estas líneas están todas separadas. Entonces, lo que normalmente hacemos en el mundo del diseño es agruparlos para ponerlos dentro de la misma forma, el mismo grupo. De esta manera, sabemos tomarlos juntos y moverlos juntos y así sucesivamente. Ahora bien, la forma de hacerlo es mantener, arrastrar y seleccionar todos estos. Ahora estás arrastrando tu selección y puedes ver estas selecciones desde aquí También puedes hacerlo desde aquí, mantener presionado, y luego bajar y mantener presionado Mayús y hacer clic. Va a seleccionar todo entre esto y aquello. Entonces puedes dar clic en Control G o puedes hacer clic derecho, clic derecho y luego tienes selección de grupo. Y así, ahora tienes el grupo número uno. Ahora, por supuesto, puedes crear otro grupo encima de eso o encima de eso. Pero quiero decir, no va a hacer mucho, no va a ayudarte mucho. Ahora bien, esta es una forma de hacerlo. Se trata de un grupo. Ahora bien, lo bueno de un grupo es que se mueve juntos. Entonces, si las dimensiones, todas las líneas, se juntan, se mueven juntas. Pero a veces eso no es genial porque puede dar un aspecto muy distorsionado A lo mejor no es lo que quieres. Una alternativa a esto, acabo de regresar, lo deshice. Ahora solo son vectores separados es hacer clic derecho y elegir la selección de fotogramas. Ahora, lo interesante de un marco es que no estira las cosas. Cuando lo mueves, simplemente se abre y podría moverse con él, pero no va a estirarlo. Como puedes ver, no es estirarlo a menos que entres en escenarios más profundos, pero eso no es lo que estamos haciendo ahora. Esa es una diferencia entre frames y grupos es que trabajan de manera diferente. Los objetos dentro de ellos se mueven de una manera diferente. Una cosa con los marcos es que puedes tener mucho espacio que no se está ocupando. Pero con grupos, solo contiene el ítem real. Si agrupamos esto ahora, voy a agruparlo en lugar de enmarcarlo. Se puede ver que no hay espacio vacío. Esto viene directo a la frontera. Entonces, si lo estiro, va a estirar todo el asunto. Pero a veces quieres dejar un poco de espacio vacío y otras cosas Entonces esa es una diferencia. Ahora, llegando a otra pregunta, cuál es la diferencia entre un marco y un rectángulo. Así que déjame crear un marco aquí, ¿de acuerdo? Yo también lo puedo poner aquí. Déjame ponerlo aquí y darle otro color, darle rojo, darle un trazo. Como puedes ver, no son muy diferentes. No se ven para nada diferentes. Parecen casi idénticos. Por eso tenemos que preguntarnos, ¿cuál es la diferencia? La diferencia es que los marcos pueden contener cosas dentro de ellos. Para darles un ejemplo, puedo traer este círculo, y lo puedo poner dentro de este marco arrastrándolo hacia Ahora cuando miramos las capas, la elipse, el círculo está dentro del marco y se puede ver que se corta cuando sale del marco Si la sujetamos, la arrastramos y soltamos afuera, sale del marco. Eso es una cosa que los marcos pueden hacer. Intenta ponerlo en un cuadrado en un rectángulo, no funciona. No funciona de la misma manera, y esa es una diferencia principal. Siempre que crees alguna forma, tienes que preguntarte, si estoy creando un rectángulo, ¿quiero que solo sea un rectángulo o quiero poner algo en él? ¿Quiero que contenga otras formas y cuadros de texto y demás? En ese caso, entonces tal vez deberías crear un marco. Entiendo que esto es un poco difícil de entender, pero creo que con la práctica, va a ser un poco más fácil de entender. Solo para concluir esto, los grupos son geniales cuando quieres agrupar múltiples elementos en una sola forma, especialmente si quieres que se convierta en una forma propia, que sea estirable, que sea redimensionable, y los marcos son buenos para contener cosas dentro de ellos en oposición o en contraste con rectángulos u otras formas que no pueden contener cosas dentro de ellos o no pueden contener cosas dentro agrupar múltiples elementos en una sola forma, especialmente si quieres que se convierta en una forma propia, que sea estirable, que sea redimensionable, y los marcos son buenos para contener cosas dentro de ellos en oposición o en contraste con rectángulos u otras formas que no pueden contener cosas dentro de ellos o tener elementos debajo de ellos. Esa es una diferencia principal. Te veré en la siguiente lección. 7. Creación de cuadros: Entonces hemos hablado de formas. Hemos hablado de marcos y grupos y de las diferencias entre ellos. Pero ahora vamos a llegar a ello. Intentemos crear una pequeña interfaz de usuario agradable usando estos elementos de los que hemos aprendido. Entonces lo que voy a hacer es preguntarme, quiero crear algo ahora, pero ¿va a contener otras cosas? ¿Qué voy a crear? Bueno, quiero crear una tarjeta y quiero que esta tarjeta contenga otras cosas dentro de ella. Voy a usar un marco. Estoy pensando en crear una app de fitness que te muestre un dashboard, te muestre otra información también. Piénsalo como Apple Fitness, tener una app que te diga cuántos pasos has tenido, cuántas calorías has quemado, etc. Y vamos a tratar de diseñarlo de una manera diferente, pero va a ser tener más o menos los mismos principios y eso está completamente bien porque el enfoque aquí es aprender y podemos aprender de copiar tratando de imitar y obtener inspiración de otros buenos productos Ahora tengo la herramienta de marco. Voy a crear un marco aquí y voy a hacerlo rectangular así, y le voy a dar un poco de color, color muy ligero, bien, genial. Y luego le voy a dar 16. Este es el radio, radio de la esquina, ¿de acuerdo? Entonces ahora le doy 16, así que tiene estas bonitas esquinas redondeadas. Entonces voy a agregar texto aquí y voy a escribir pasos. ¿Bien? Mantenlo simple. Nada demasiado elegante. Puedes elegir una fuente diferente. Normalmente me gusta usar un medio en lugar de regular cuando se trata de peso porque es un poco más legible. ¿Bien? Ahora, asegurémonos de que el texto sea legible. 12 está bien, 14 es mejor. Entonces sí, eso es una cosa a tener en cuenta. Y luego vamos a seguir adelante y crear algo para mostrarnos cuáles son estos pasos. Voy a usar rectángulos porque como dije, cuando me pregunto, ¿quiero que esto contenga otras cosas dentro de él? No. Voy a crear este rectángulo y le voy a dar también 16 radios, eso lo va a hacer totalmente redondo, y luego voy a hacerlo azul o azulado Ahora es azul, y luego puedo copiar y pegar usando Control C, Control V, y traerlo aquí, cambiar la altura. También puedo simplemente aguantar y luego arrastrarlo, y luego arrastrarlo. Lo va a copiar. Se va a hacer un duplicado. Ahora, quiero mostrar la semana completa. Tenemos uno, dos, tres, cuatro, cinco, seis, siete. ¿Bien? Ahora se puede ver el espaciado entre ellos es de seis, dice. Ahora lo que podemos hacer es que podamos sostenerlos. Eligiendo los estoy reteniendo a todos haciendo clic en Shift, ¿de acuerdo? Así que haz clic en Mayús, mantén pulsada la tecla y luego haz clic en cada una de ellas. Entonces si hago esto, todos van a tener básicamente más ancho, que no estoy seguro es lo que quiero porque ahora es demasiado grueso Pero lo que puedo hacer es mantener este espacio y agregar un poco más de espacio entre ellos. Ahora bien, esto se ve bien, diría yo, y luego voy a voy a tratar de que varíen un poco. Entonces podría hacer el actual, no tengo un color diferente o algo así. Para demostrar que esto se está calculando ahora o es actual, o algo así. No estoy seguro. Esta es una interfaz de usuario muy, muy simplista que muestra los pasos, ¿verdad? Pero falta algo. Es decir, ¿cuántos pasos tuve para el día? Eso lo podemos hacer. A lo mejor podemos mostrarlo aquí a la derecha así podemos decir, no sé, 8 mil 600 Y también podemos cambiar los colores. Es decir, puedo hacer esto un poco más gris oscuro y darle un poco más de importancia a este número. Yo puedo hacerlo haciéndolo audaz también. A lo mejor podría hacer azul o tal vez no. Pero esta es una pequeña interfaz de usuario agradable y así así, hicimos una tarjeta y como puedes ver, es un marco el marco tiene un color y está conteniendo estos otros elementos. Se puede ver aquí. Marco número dos, tiene todas estas formas juntas. Tiene los cuadros de texto y así sucesivamente. Así como así, puedes crear un marco muy sencillo y con este marco, puedes agregarle elementos. Espero que eso tenga sentido para ti, pero sigue adelante y pruébalo por ti mismo y mira qué se te ocurre. 8. Efectos: Así que he jugado un poco con este elemento que tenemos aquí, pero falta algo y realmente no puedo ponerle el dedo encima, pero tal vez podamos ver qué podemos hacer cuando se trata de efectos. Entonces hoy, te voy a mostrar un poco cómo puedes jugar con un par de efectos a la hora de figma. Lo que vas a hacer es que vas a hacer clic en el marco o el objeto al que quieres agregar el efecto. Entonces aquí tenemos muchos objetos, pero queremos aplicarlo a un marco general. Entonces lo que voy a hacer es que voy a ir a efectos aquí. Hago clic en Más. Lo que eso va a hacer es que va a agregar una sombra paralela de inmediato. Ahora, drop shadow es interesante porque ya tiene un par de valores ya. Pero cuando haces clic aquí, puedes cambiar estos valores. Se puede cambiar cuánto va la sombra en términos de X e Y. Verticalmente y horizontalmente, ¿ se está desplazando o quitando un poco o más abajo a la derecha, en cualquier dirección que quiera que baje dependiendo de la fuente de luz? Y luego también puedes agregar el desenfoque. Ahora, me gusta mucho usar mucho desenfoque, tal vez 24, tal vez 16, tal vez incluso más. Entonces también te has extendido. Extender solo extiende toda la sombra. No recomendaría usar eso para ser honesto. Hagámoslo así. Voy a añadir 16 y voy a hacer el color un poco más desmayado, así que tal vez 15% Entonces voy a hacer el fondo completamente blanco. Y entonces así es como se ve ahora. Se ve mucho más limpio, mucho más moderno. Y la sombra es muy discreto, es muy sutil. No es muy visible y eso es exactamente. No queremos hacer. Se enfocan demasiado en el color de la tarjeta, sino más bien en el contenido. ¿Bien? Entonces ese es un efecto que puedes aplicar, y puedes jugar con él hasta que encuentres el valor correcto. O sea, puedes hacer la Y, puedes hacerla 16 también. Puedes hacer que baje tanto o puedes hacerlo ocho. Puedes hacer el desenfoque 36 y luego tienes mucha sombra aquí, y parece que el fondo es gris, pero en realidad no lo es. Aquí sólo hay mucha sombra. Pero eso es una cosa que puedes hacer. También hay otros efectos. Cuando agrego un efecto, es automáticamente sombra paralela, pero también hay sombra interior, y tiene las mismas cosas, las mismas especificaciones que puedes cambiar. Ahora bien, esta hace que parezca que esta tarjeta está incrustada dentro del lienzo, dentro de la pared. Se siente así. Eso es una cosa que puedes probar. Hay desenfoque de capa. Esto difumina toda la capa Hay desenfoque de fondo, esto difumina el fondo del mismo si hay algo, pero necesitas algo para el fondo para eso Hay ruido, textura de vidrio, y así sucesivamente. Adelante, pruébalos y mira qué funciona. Pero para ser honesto, diría que cuando se trata de Figma, el efecto más usado es la sombra paralela porque cuando se trata de web, las sombras son muy centrales para capas estilizadas y también son muy fáciles de implementar Así es básicamente como puedes hacer tus elementos se vean un poco más agradables. 9. Diseño, alineación y espaciado: Entonces, ahora que hemos creado nuestros elementos de diseño y hemos comenzado a diseñar esta pequeña pantalla ordenada, es hora de ser un poco más exactos. Como diseñadores, ya sabes, somos artistas. Es nuestro trabajo crear algo hermoso, y estamos en medio de eso. Estamos tratando de hacer eso. Pero también es nuestro deber ser exactos a la hora de hacer mediciones. No se supone que creamos las cosas de ninguna manera. No se supone que solo debemos crear cosas y solo, uh, guestimar las distancias en el espaciado Es muy importante para nosotros ser exactos a la hora de espaciar, a hora de alinear las cosas. No podemos hacer que las cosas estén un poco apagadas ni por un pequeño píxel porque nos puede quedar muy mal como diseñadores. Puede ser muy inquietante para los usuarios que miran nuestro diseño. Es por eso que tenemos que tomar medidas para asegurarnos de que nuestros diseños estén correctamente alineados y que no estén apagados ni siquiera por píxel. Ahora, hay múltiples formas de hacer esto. Una forma de hacerlo es a través de lo que llamamos cuadrículas. Entonces, cuando haces clic en el marco que tienes, todo el marco, puedes venir aquí, navegar, y puedes navegar aquí abajo a la guía de diseño. Y cuando haces clic en el signo más, va a crear una cuadrícula. Es como ese cuaderno de secundaria que tenías básicamente lo convierte todo en cuadritos. Ahora, hay diferentes cosas que puedes crear. También puedes crear columnas o puedes crear filas. Realmente depende de lo que intentes hacer. Yo personalmente te recomendaría que trabajaras con columnas porque suelen ser más estándar y más fáciles de trabajar con ellas. Va a dividir tu pantalla en columnas, pero puedes configurar los ajustes para ello. Entonces puedes configurar un margen y decir, no quiero que la pantalla esté al borde aquí mismo. Quiero que el contenido esté un poco en el medio en el centro. Le voy a dar 24 o se puede decir 16 márgenes. Digamos 16. Entonces puedes decidir cuántas columnas quieres tener. Vamos con cuatro. Creo que cuatro es un buen número y luego también está la cuneta El canalón es la cantidad de espacio entre ellas entre estas columnas Puedes hacerlo muy pequeño o muy grande que depende del espaciado que quieras tener entre ellos. Hagamos la cuneta ahora mismo apenas diez. Y entonces también podemos cambiar el color, por cierto, si quieres. A menudo me parece más agradable en lugar de rojo porque el rojo es muy alarmante Lo hago negro y lo hago 10% o 5%, solo para que pueda verlo, pero no es molesto. Entonces podemos seguir adelante y comenzar a alinear nuestros elementos. Lo bueno es, ya sabes que esto ya no debería ir a la izquierda. Esto es perfecto desde aquí. A la derecha, necesita un poco de trabajo. Podemos intentar redimensionarlo así a mano, voy a mover estos elementos un poco a mano Y luego voy a elegir todos estos y disminuir el espaciado. Ahora se ve mucho más limpia. Cuando llegamos a la segunda , ahora también está apagada. Sólo voy a copiar esto sosteniendo Alt y Shift y voy a alinearlo aquí. Yo sólo voy a copiar los valores de aquí y los colores también. Que voy a borrarlo aquí. Esa es una manera de hacerlo. Como puedes ver ahora cuando apagamos esta grilla, es un poco puede ser inquietante para la vista. Se puede ver que ahora están más correctamente alineados. Esa es una forma de hacerlo, y me parece que esto tiene mucho sentido. Implica mucho mirar con los ojos y adivinar o no adivinar realmente, pero solo juzgar con tu Pero eso es algo que vas a hacer mucho como diseñador. Otra forma de hacerlo es hacerlo con una regla. Ahora, probablemente te hayas dado cuenta aquí arriba, tenemos estos números, y todo lo que necesitas hacer es mantener y arrastrar. Sólo vas a arrastrar así como ese tirón, y luego obtienes esta regla. Entonces cuando lo pones aquí, puedes intentar configurarlo, puedes alinearlo a los bordes y asegurarte de que las cosas estén alineadas. Ahora lo voy a hacer desde este lado, horizontalmente porque tiene más sentido. De esta manera, podemos asegurar que estos dos elementos estén en el mismo nivel. Puedes hacer lo mismo con el texto si acaso algo sale mal, y solo puedes asegurarte desde todos los lados, todo está bien. Y sí, así que esa es una forma de hacerlo. También puedes hacerlo verticalmente y así cuando estés creando otros elementos ahora, solo necesitas asegurarte de que estén dentro de estos límites Esa es otra forma de hacerlo, pero esta es mejor porque tienes un poco más de control Se puede controlar la cosita, se puede decir, ¿qué pasa con estas columnas, las que están dentro? ¿Qué pasa con este? ¿Está correctamente alineado o no? Esa es otra forma de hacerlo, y hay una tercera. Una tercera vía. Bien. Entonces, la tercera forma es verificar amable dentro de las formas. Entonces cuando elijo estas, por ejemplo, estas dos formas, cuando las sostengo, cuando las selecciono manteniendo pulsada la tecla shift haciendo clic en ambas. Se puede ver al instante veo aquí un espaciado, puedo cambiar el espaciado aquí. Eso es una cosa que puedes hacer para que todo sea correcto, ya hemos hecho lo mismo a estas columnas. También puedes hacer esto así. Puedes elegirlos y asegurarte de que el espaciado sea adecuado o no. Esa es una cosa que puedes hacer para alinear mejor las cosas para darte otra manera también, otra característica. Digamos que copiamos este pegarlo aquí y ponerlo ahí. Pero ahora se puede ver que el espaciado está un poco apagado. En lugar de crear columnas y filas y reglas, lo que podemos hacer es elegirlas todas Yo elijo estos tres y luego tenemos este botón aquí. ¿Lo ves? Aquí. Por lo general, está en la esquina inferior derecha. Al hacer clic en él, Figma va a hacer que el espaciado sea igual y a partir de ahí, puede cambiar el espaciado a la cantidad que necesite Teníamos diez ahí, también puedes hacer diez aquí si quieres. Depende totalmente de ti. Pero sí, eso es una cosa que puedes hacer. Otra forma de alinear las cosas también directamente de los propios objetos. Da clic en el objeto que deseas alinear y luego puedes elegir estas posiciones. Se puede decir que la quiero centrada. Quiero que esté alineado a la izquierda del marco a la derecha, a la parte superior, al centro, a la parte inferior, y así sucesivamente. Lo que es genial es que también puedes, quiero decir, digamos que esto está un poco fuera de lugar. También puede elegir varios elementos y hacer que alineen para que se centren juntos. Horizontalmente, ahora están centradas o puedes decir, quiero que estén centradas verticalmente. Ahora están uno encima del otro y así sucesivamente y así sucesivamente. Estas son cosas realmente ordenadas que vienen muy bien para que puedas alinear tus objetos. Porque como mencioné, esta es una parte esencial del diseño. Estamos en el medio entre artistas y arquitectos, ¿verdad? No estamos creando estos edificios que son súper exactos con sus números y técnicos y así sucesivamente. Estamos creando algo que debería tener números exactos. No demasiado. No es tan grave. No estamos construyendo un rascacielos, sino que estamos haciendo un sitio web y debería tener cierta precisión al mismo Pero al mismo tiempo, sí tenemos una parte artística. Debemos ser artísticos, debemos ser creativos. Tenemos un poco más de libertad que los arquitectos. No estamos ligados por la física, estamos sujetos a otras pautas de diseño. Pero de nuevo, deberíamos estar en el medio, no demasiado artísticos, no demasiado exactos, pero tener un poco de equilibrio agradable en el medio. Entonces estas son solo algunas formas en las que puedes manipular tus objetos para alinearlos juntos. Entonces exploramos hacer eso con guías. Disponemos guías en columnas con cuadrículas y así sucesivamente. Hemos explorado cómo hacer eso con los gobernantes y sí, lo que se podría decir, estas son líneas de gobernante y otras cosas. Y también puedes hacerlo a través de estos botones de ayuda aquí. Te ayudan a alinear las cosas. Sólo tienes que averiguar cómo quieres hacerlo. O como mencionamos, cuando eliges varias cosas que no están alineadas, también obtienes un aquí, si quieres alinear varios objetos, solo puedes elegirlos para que les gusten y luego obtienes un bonito botón aquí en el que puedes hacer clic y luego así así, está alineado. Sigue adelante y prueba esto y mira qué tan preciso puedes ser. Te veré en la siguiente lección. 10. Colores: Hola. En esta lección, vamos a estar hablando de colores. Ahora, cuando se trata de colores, se pone un poco difícil. No es un tema o tarea muy fácil para mayoría de los diseñadores porque todos tenemos nuestros propios enfoques cuando se trata de colores, sobre cómo elegimos los colores, así como cómo nos aseguramos de que armonicen juntos y cómo realmente los hacemos utilizados en el diseño, cómo se llevan a cabo, digamos Porque a menudo tenemos un plan, y luego cuando llegamos a implementar realmente el plan y usar los colores, no es exactamente como se planeó. Déjame explicarte lo que quiero decir con solo sumergirme en él. Ahora, cuando se trata de colores en un diseño en una aplicación o sitio web o lo que sea, generalmente tienes una serie de colores que se mantienen consistentes a lo largo del diseño. Ahora, hice estas plazas aquí solo para mostrarte a lo que me refiero. Podemos escoger, por ejemplo, seis colores que son los colores principales que vamos a usar. Entonces llenemos los colores que queramos. Ahora, lo primero es lo primero, me gusta seguir adelante y comenzar con el blanco y negro porque la mayoría de los diseños, al menos los modernos, suelen tener un fondo blanco a menos que estés usando tema oscuro, pero sí, generalmente un fondo blanco, y tienes algún uso del negro. Lo que podemos hacer es que podemos elegir blanco o puedes tener blanquecino dependiendo de lo que estés haciendo. Pero voy a elegir blanco solo recto hacia arriba blanco, y voy a darle un borde solo para que sea visible. ¿Bien? Entonces este es nuestro blanco que vamos a estar usando, y luego también podemos tener el negro. Ahora bien, podemos tener negro recto o a veces puedes usar un tipo de gris oscuro muy apagado. Ya sabes, no es visible o no es distinguible que no sea completamente negro Pero a veces es agradable hacer eso para suavizar el contraste porque entre el blanco y el negro, hay una distancia enorme Por lo que elegir los colores blancos o los negros ayuda a reducir este fuerte contraste. Eso es lo que voy por este 252525 justo por aquí. Entonces lo que me gusta tener también es algo de gris. Hay diferentes tonalidades de gris que utilizo. Por lo general, hay gris oscuro que es lo suficientemente oscuro para que sea legible. Y luego, por ejemplo, este gris. Sólo voy a tomar esto aquí, copiar el código hexadecimal y pegarlo. Esto es lo suficientemente oscuro como para que haya legibles. Pero entonces también podemos usar un gris aquí mismo como estas líneas. No necesita ser visible. Es éste. Por lo que no necesita ser visible. No es tan visible, pero no es un elemento esencial para que tenga que ser visible. ¿Eso tiene sentido? En cierto modo, esto es genial tenerlo. Si lo puedes ver, puedes verlo. Si no lo ves, no estás perdiendo ninguna información real. Ahora, podemos reordenar estos, para ser honestos. Voy a reordenarlos solo para que tenga más sentido Déjame ver. Sólo voy a poner esto aquí y tomar estos arriba. Ahí vamos. Creo que esto es lo suficientemente bueno. Se ve desde el blanco y luego gris claro, gris oscuro, y luego este apagado negro. Entonces podemos agregar un color más para ser honestos. Entonces tenemos estos colores. Ahora estos suelen ser primarios, secundarios y terciarios. Por lo general, la gente empieza con estos, para ser honestos. Pero básicamente, la idea es que cada vez que tienes una app o una identidad de marca, tienes colores que se repiten, y estos colores, algunos de ellos se repiten más que otros. Por ejemplo, puedo usar el rojo aquí para tener un signo de exclamación, y es como el rojo para demostrar que hay un riesgo, hay un problema Pero eso no quiere decir que vaya a estar usando rojo en toda la pantalla. Lo mismo aquí, tengo azul, tengo naranja. No significa que vaya a estar reutilizándolos todo el tiempo Pero para ser honestos, es bueno asegurarse que estos colores que estás usando se están repitiendo. Digamos que este azul y naranja, a lo mejor podrían ser colores esenciales que usamos dentro de nuestro diseño. Por lo general, cuando se trata de aplicaciones de fitness, no solo tienes un color que se repite, sino que normalmente tienes ¿ eso tiene sentido? Por ejemplo, aquí podemos tomar el azul. Voy a hacer click I, abro la herramienta cuentagotas, y luego podemos tomar esta naranja Ahora tengo este azul y naranja. Lo que podríamos hacer es que también podemos usar el azul para los botones y también podemos usar el naranja para los botones. Eso también funciona, y podemos elegir otro color. Uno de los primeros colores. Entonces podría ser una especie de rojo podríamos tratar de ablandarlo así Podríamos escoger algo diferente. Ahora, generalmente el amarillo es un poco más difícil de leer o más difícil de ver en general. A menudo lo evitaría o lo haría oscuro, pero una vez que lo haces oscuro, llega a este color sucio ish. Es este color caqui o algo así. Pero no se usa muy a menudo, al menos no en diseños modernos. Podemos tener verde, pero no encaja exactamente con estos colores. Este es un lugar donde tienes que juzgar por ti mismo como diseñador. Hay teorías sobre cómo hacer esto, pero también puedes hacerlo por tu cuenta. Podemos elegir un azul oscuro para que se ajuste a estos trabajos. Podríamos obtener un color púrpura o rosado. Sí. Estas son nuestras opciones con las que estamos atrapados. Siento que me estoy inclinando hacia el rojo porque entonces tenemos la selección de colores muy básicos que aún funcionan juntos O sea, es una app de fitness, así que no tiene que ser algo loco. Ahora, un color que se usa a menudo este verde neón se usa a menudo en realidad para aplicaciones de fitness. Esto es algo por lo que también podemos ir. Pero no elegiría esto como mi color primario, y trataría de ajustarlo un poco. Esto nos gusta. No estoy segura. Tienes que asegurarte de que se vea bien sobre un fondo blanco también. Eso es bastante esencial. Entonces me movería hacia arriba el azul aquí y haría de ésta nuestra primaria, esta nuestra secundaria, y esta sería nuestra terciaria. Pero todavía no estoy completamente convencido con ello, para ser sinceros. Siento que quiero checar el tono. Ahora es más hacia el amarillo. Bien. Creo que esto es lo suficientemente bueno, ¿de acuerdo? Entonces ahora tenemos esta paleta. No tiene que ser la mejor paleta de todos los tiempos, pero es una paleta a la que podemos tratar de apegarnos. Ahora tenemos una paleta de colores general, y vamos a intentar integrarla en nuestro diseño. Entonces a lo largo de las siguientes lecciones, ya que estamos creando diferentes componentes, diferentes elementos, voy a tratar de incluirlos más y van a ver cómo parece que podemos volver a revisarlos y reordenarlos o cambiar los colores que tenemos solo para asegurarnos de que todo esté bien Una cosa que también puedes hacer, y esto es opcional es que puedes elegir un tono para cada color. Entonces por ejemplo, aquí tienes el azul. Podemos elegir un azul más oscuro solo para asegurarnos de que podemos usar eso como un efecto, como un efecto hover o algo así Quiero decir, ya tenemos el azul claro, ¿verdad? Entonces también podríamos tener el ligero azul como diferentes tonos de lo que tenemos. Cuando haces algo así, te vuelves más profesional. Tienes un mejor sistema porque entonces tienes una copia de seguridad para todo. Entonces en caso de que necesites una versión más oscura, ya tienes esa configuración. Y lo mismo para el naranja tienen una versión más oscura. Incluso puedes hacerlo un poco más rojo. Siempre me parece más agradable cambiar el matiz un poco también Podemos hacer que esto se vea sucio, pero una vez que lo llevas más hacia el naranja, amarillo, es mejor tal vez más hacia el verde. ¿Ves? Ahora tenemos versiones más claras de los colores así como versiones más oscuras por si acaso necesitamos. ¿Correcto? Pero estos son los colores principales y estos son los subcolores que solo respaldan en caso de que los necesitemos para ciertos efectos. ¿Bien? Entonces así es como puedes escoger tu paleta de colores. Como mencioné, aunque hay diferentes formas de hacerlo, para asegurarse de que tus colores estén funcionando juntos, pero esto entra más en teoría. Y para ser honesto, como diseñador, con tiempo y con experiencia, deberías poder tener ojo para estos colores, para entender cuándo trabajan juntos y cuándo no. Como nota, el solo hecho de que hayamos escogido estos colores, no significa que tengamos que ponerlos uno encima del otro o uno al lado del otro. No tiene que ser así. Podría ser diferentes elementos y diferentes puntos y así sucesivamente. Solo tenlo en cuenta. Ahora ya tenemos los colores hechos y tenemos que escoger la tipografía como en la fuente y que vamos a hacer en la siguiente lección 11. Tipografía: Así que ahora es el momento de elegir tipografía para elegir las fuentes adecuadas para nuestro diseño Ahora, como siempre, voy a hacer algo más simplista Esto podría ser un problema mucho más complejo, pero vamos a tratar de tomarlo con calma ahora. Entonces lo primero es lo primero, vamos a escribir algo aquí y escribir titular o algo así. Y entonces vamos a copiar esto y escribir subtítulo. Puedes tener una fuente para toda tu app, o podrías tener dos fuentes diferentes, una para los titulares y otra para los subtítulos. Entonces para los titulares, por lo general son más grandes, así que podría ser, 24, podría ser audaz, y entonces podrías tener esto como algo más pequeño, tal vez 16, simplemente no negrita, medio o regular, ¿de acuerdo? Entonces ahora mismo, estamos usando Enter, y es totalmente genial quedarse con Inter como tipografía Pero a lo mejor te gustaría explorar diferentes opciones. Ahora, por supuesto, hay algunas opciones básicas como Montserrat Este es mi ir a, para ser honesto. Me gusta mucho. También hay un ferrocarril. Ahora, puedes ver que cada uno tiene una vibra o ambiente diferente al mismo. Sólo voy a volver un poco solo para que puedas notar algunos de ellos, este está inclinado de manera diferente La E, se puede encontrar la D tiene una pequeña llamarada con el ferrocarril. A letras en realidad poco estilo a la derecha. Algunos de ellos parecen ser más pequeños, algunos de ellos son más gruesos. Puedes ver aquí, el grosor aquí cambia. Varía. De aquí a aquí es diferente. Aquí se vuelve más grueso. La línea se vuelve más gruesa, mientras que Montserrat mantiene un ancho casi desigual en todo el conjunto Pequeñas pequeñas diferencias pueden afectarlo, pueden afectarlo. Puedes tener muchas fuentes diferentes. Yo hay impacto. Podrías tener impacto como fuente. Podrías simplemente echar un vistazo a diferentes fuentes. Algunos de ellos son más duros, más grandes y cada fuente tiene una connotación, digamos, ¿verdad Entonces esta fuente es algo que no esperarías ver en una app, probablemente, ¿verdad? Lo mismo con este. O sea, tal vez en realidad, podría ser depende de qué tipo de aplicación, tal vez una aplicación para tomar notas, tal vez una pequeña aplicación, pero no una aplicación deportiva. Entonces aquí, estás haciendo fitness, no vas a ver esta fuente. Quiero decir, por una razón, esta es una fuente para otra cosa, tal vez para dictado, para escribir libros, para algo así, pero no exactamente para fitness Además, es un poco más difícil de leer. Entonces estas son dos cosas a las que hay que prestar atención. ¿Se ajusta al tema, verdad? Es el estilo armonizando adecuadamente con la idea de la app La segunda cosa, ¿es legible? ¿Es algo que puedas leer y entender adecuadamente? Este es genial, pero por ejemplo, no es muy práctico. Si voy a escribir esta palabra de ocho letras, ¿va a ocupar todo el espacio? Eso no tiene sentido. Así que trata de encontrar algo que esté en el medio. No es demasiado juguetón, pero tampoco es demasiado elegante. No demasiado cursiva, no demasiado manuscrita, algo en el medio Como dije, ahora mismo, estamos pasando por las fuentes una por una. Pero generalmente cada diseñador ha probado y probado fuentes, probado y probado fuentes que intentaron y tuvieron éxito y se ajustan bastante bien a la mayoría de los temas. ¿Bien? Entonces podemos, por ejemplo, tratar de impactar y tal vez podríamos escribir todo en mayúsculas. A lo mejor veamos cómo se ve eso. Entonces podemos probarlo y escribir aquí, por ejemplo, estadísticas. Veamos cómo se ve eso solo para tener una sensación. En este momento está a las 24 y se ve un poco demasiado grande. ¿Y si cambiamos el color? Todavía se ve demasiado grande. No encaja con el tema que tenemos aquí. Yo personalmente no lo tomaría. Ahora veamos cómo sería algo así como ferrocarril. A ver. Yo estoy aquí. Bien. No exactamente mi estilo. Quiero decir, porque es una letra mayúscula. Entonces, ¿y si escribimos tus estadísticas? Esto se parece más, para ser honestos. Esto se ve un poco más agradable. Comparémoslo con Montserrat. Siento que aquí, el ferrocarril tiene mucho más carácter. Y qué tal tomemos ahí está Geist, por ejemplo. En este caso, siento que Geist está un poco más estandarizado, no está demasiado acampanado, no demasiado elegante. Entonces encaja, pero vamos a ver, ¿es así de diferente al Inter? Sí, quiero decir, para ser honesto, no es tan diferente. Podemos seguir buscando. Podemos elegir algo un poco más agradable. Bien, entonces esta fuente es realmente interesante porque siento que este tipo de fuentes serif se están volviendo más populares y no encajan exactamente con la vibra, pero introducen una ruptura en el estilo, pero una que es interesante que me parece que funciona, simplemente funciona muy bien Entonces me gustaría ir con esto aunque siento que quiero decir, no es apropiado al 100%, pero probémoslo. ¿Por qué no? ¿Podemos cambiarlo, cambiarlo más tarde? No hay problema. Vamos a tomarlo y escribirlo aquí. DM serif, pantalla DM, y vamos a escribirla con letras normales Entonces la otra fuente, podríamos tomar ferrocarril tal vez, para ser honestos, probarlo, o podríamos simplemente llevar Geist o Inter para ser honestos, Inter es muy estándar Así que solo podemos tomarlo por ahora y no pensarlo demasiado. Entonces estos son todos Inter, y luego tenemos DM Serif. Y así, tenemos tus estadísticas y ya puedes ver, quiero decir, es bastante interesante. Podemos tratar de hacer que estos también se muestren siervos, y se vean bien, pero no tan bonitos, para ser honestos, para que podamos revertir eso Entonces solo para los grandes titulares, para los encabezados como este, podemos usar esto, pero para el texto más pequeño, entonces podemos dejarlo con el Inter. Así como así, elegimos una fuente. Como puedes ver, no es tan complejo. No hay que decidir 1 millón de casos diferentes. Sin embargo, hay un paso más para esto, que es definir los diferentes niveles o jerarquía de fuentes. No tienes que complicar eso demasiado para ti, pero solo se trata de mantenerte consistente Por ejemplo, aquí tenemos tus estadísticas. Cuando quieras agregar otra sección aquí y quieras decir tus actividades, tus actividades, o simplemente puedes llamarlo actividades. Simplemente mantenlo simple. Entonces no hagas esto 36, porque entonces ¿cómo tiene sentido eso? ¿Por qué este tamaño es diferente? Porque el tamaño significa que esto tiene un nivel diferente de importancia, ¿verdad? Entonces sí, cuando haces eso y cuando tienes una fuente antes de esto, diciendo, por ejemplo, no estoy seguro. Puedes decir tus estadísticas o tu salud hoy, y luego puedes llamar a esto. Entonces este lo está incluyendo todo. Está conteniendo todas estas diferentes secciones. Entonces sí, este, podrías hacerlo 32 o 36. Eso tiene más sentido. Se trata de tener una jerarquía. No quiero exagerar esto porque este es un curso para principiantes Pero es solo que la idea es, diferentes niveles. Entonces cuando este es un titular grande, está conteniendo todo lo demás, puedes hacer esto 32 y luego esta es un área más pequeña solo estadísticas, entonces puedes hacer este 24 y luego otra área de igual importancia, entonces esto también sería 24 y así sucesivamente y así sucesivamente. No lo compliques por ti mismo, pero generalmente así es como deberías estar trabajando con la tipografía Gracias por escuchar, y nos vemos en la siguiente lección. 12. Introducción al diseño automático: Entonces, desde la última lección, he hecho algunos retoques aquí y allá He agregado esta tarjeta para mostrar un resumen. Esto es algo bastante estándar que hacen la mayoría de las aplicaciones de fitness. Y sí, solo me metí un poco, hice la jerarquía tipográfica Pero en esta lección, me gustaría hablar de una característica muy importante de Figma, una característica que me encanta mucho, que se llama Auto layouts Ahora, es un poco difícil entender cómo funciona y acostumbrarse a él, pero es súper útil. Ahora, el diseño automático es una característica de Figma que facilita organizar las cosas horizontalmente, verticalmente dentro de un layout En lugar de tener que averiguar para alinear todo usted mismo en términos de textos como estos textos y esas cosas, autolayout lo hace más fácil y te ayuda a hacerlo de una manera diferente Déjame explicarte. Entonces, básicamente, un Auto Layout es algo que puedes aplicar a un marco y solo a un marco. Entonces la forma de hacer esto es seleccionar múltiples cosas. Entonces lo que voy a hacer es que voy a aplicar un Auto Layout a, por ejemplo, aquí mismo, tengo estas tarjetas y quiero mostrarlas para que estén en la misma sección. Entonces, primero, voy a sumar estos juntos a un Auto Layout. Ahora, para hacer esto, puedo sostener el turno A, que lo hace automáticamente, o voy a deshacer eso. Lo que vas a querer hacer es que vas a hacer clic derecho y hacer clic en la selección de fotogramas. Ahora esto es un marco. Y luego vas a venir y hacer clic en este botón, que dice toggle Auto Layout. Y cuando hagas eso, va a detectar automáticamente qué tipo de layout es. Ya se entiende que es horizontal. Entonces tienes a estos dos juntos y tiene aquí un auto. Entonces esto es Espaciado automático. Eso significa que cuando estire el marco, va a espaciarlo automáticamente hasta que llegue a él. ¿Bien? Esta es una pequeña característica agradable. Si quieres, podrías darle un número aquí, que creo que son diez, por ejemplo. Ahora bien, esto no es Auto, así que esto es sólo diez, ¿verdad? Entonces esto es algo que puedes hacerte y basado en tu diseño. Pero ahora tenemos esto dentro de un layout o un layout automático para ser más específicos. No es tan fácil de entender. Ahora, aquí tienes el espaciado, el hueco horizontal entre los objetos, para que puedas configurarlo y aquí tienes la alineación. ¿Quieres que esté alineado a la izquierda, al centro, donde sea? Digamos que lo hacemos alineado a la derecha. Eso significa que si el diseño automático se expande, se queda a la derecha, o decimos a la izquierda. Bien, entonces entiendes. Ahora, lo mismo cuando lo hacemos para arriba y abajo, ¿sabes? Entonces básicamente estás diciendo, una vez que esto se estira, dónde deberían ir básicamente los artículos. ¿Bien? Y voy a explicar más adelante por qué eso es útil. O sea, en este caso, tal vez no esté claro por qué eso es útil porque ya es quiero decir, ya tenemos todo alineado muy bien. Así que vamos a simplemente hacer el espaciado diez, y luego ahora voy a elegir esto y convertirlo en un Auto Layout con esto. Pero esto va a ser vertical porque está arriba y abajo. Entonces, como dijimos, haga clic en R, selección de fotogramas y luego agregue un Diseño Automático. Aquí vea el espaciado es de 15. Ya podemos decir, Oye, ¿por qué son los 15? Hagamos diez para que todos los espaciados sean iguales. Eso ya nos está haciendo la vida más fácil. O sea, no prestamos atención a ese espaciado de antemano. Ahora le prestamos atención. Entonces podemos seguir adelante y agregar esto también al Auto Layout. La forma en que podemos hacer esto es que solo podemos arrastrarlo aquí y puedes ver aquí un lugar. Y así como eso se convirtió en parte de ello. Ahora tenemos todo este Auto Layout. Podemos perder el tiempo con el espaciado más adelante. Hace que sea realmente más fácil para nosotros hacer eso si queremos. Pero otra cosa que podemos hacer con ello es que podemos perder el tiempo también con las alineaciones. Por ejemplo, lo puse en el centro. Entonces ahora podemos ver cómo se ve. decir, cuando lo alineamos al centro y hoy podemos ver tus estadísticas, se ve bastante bien en el centro, pero vamos a recuperarlo. Entonces Auto Layout te permite hacer cosas así para hacerlo de una manera en la que no lo hagas no puedes perder algo por error Verás, está ligado al mismo lugar. Puedes cambiar el orden de las cosas, puedes moverlas. Pero lo bueno es que no hay pocos problemas de alineación, porque muchas veces lo que noté especialmente trabajando con compañeros de equipo es que a veces por accidente, moverías el texto un poco Entonces más tarde, cuando venías, verías que tal vez tu colega lo hizo por error, y luego tienes que ir a alinearlo y decir, Oye, ¿dónde estaba esto en realidad? Eso es un dolor. Es por eso que Auto Layout lo hace más fácil porque determina todo con números exactos. Entonces, el siguiente paso aquí sería hacer de todo un diseño automático. Eso es lo que me encanta hacer. Ahora vamos a ir aquí y vamos a alternar Auto Layout. Lo que eso va a hacer es que va a hacer todo el asunto un Auto Layout. Todos los elementos en este marco un Auto Layout. Y esto es un inicio de alguna manera porque se puede ver todo esto es un Auto Layout. Tiene un Auto Layout dentro de él. Este Auto Layout también tiene un Auto Layout dentro de él. Este es el más grande y luego este y luego este. Así es como funciona FINMA. Y cuando estás trabajando de manera muy eficiente, estás trabajando con mucho diseño automático el uno dentro del otro. Pero espera un minuto, hay algo interesante que quiero mostrarte. Ahora hemos hecho de todo este marco un Auto Layout, ¿verdad? Aquí hay algunos ajustes más interesantes que son básicamente el relleno. Así es como lo llamamos, ¿verdad? Aquí puedes ver el relleno desde la izquierda, desde arriba, acolchado superior, el acolchado derecho y el acolchado inferior. Te está diciendo básicamente esta distancia aquí mismo, este es el relleno. Eso es lo genial de esto es que mantiene todo alejado de los lados por 24 o por 16 aquí. Siempre podemos cambiar eso. Podemos decir 24. Hagamos apretado o margen o lo que sea. Eso es algo que siempre puedes cambiar. Tienes relleno aquí 60, podríamos hacerlo 100. Que sea 60. Ahora bien, este relleno en la parte inferior, realidad no lo necesitamos porque ya lo tenemos alineado a la parte superior, ¿verdad? Entonces todo esto se está alineando a la cima. Podemos alinearlo a la parte inferior así o al medio al centro o como lo teníamos antes, alinear arriba a la izquierda. Esa es la mejor manera de hacerlo. Es decir, cuando estás haciendo una app como esta, o depende de ti. Depende completamente de ti, pero para nuestros propósitos, este es el camino a seguir, y ves que este relleno funciona bien, 16 desde la derecha, 16 desde la izquierda y 60 desde arriba. Veamos cómo se ve eso. Perfecto. Así que asegúrate de que nada vaya y se superponga detrás de la cámara porque normalmente las aplicaciones no hacen eso Pero hay un tema que es el espaciamiento. Entonces supongo que Figma siguió adelante e hizo 21 por su cuenta, pensando, ya sabes, porque trata de estimar el espacio antes de que lo hicieras un Auto Layout Pero vamos a seguir adelante y hacerlo, por ejemplo, no lo sé. 16. Ahora bien, una cosa importante es asegurarse que el espaciado dentro de un área como esta, sea diez. Eso significa que el espaciamiento entre otros elementos entre otras áreas debe ser superior a diez. La razón de ello es entender que se trata de un área completamente diferente a esta, que es un área completamente diferente a esta. Aunque sea una pequeña diferencia, para el ojo, explica toda la idea. Ahora tenemos Auto Layout dentro de los diseños de auto. Ahora hemos visto cómo funcionan los diseños de auto en términos de todo el lienzo. ¿Qué pasa con la creación de un elemento como Auto Layout? Vamos a probarlo. Quiero hacer una tarjeta, no para actividades, pero después de eso, digamos, hagamos otro título aquí y digamos leer más. O podría ser interesante para ti o algo así. Ahora hago clic en F y luego voy a crear algo directamente aquí dentro de este spot. Le voy a dar 16 radios carnoadios y luego voy a colorearlo con este color aquí, básicamente es debería ser un elemento que le diga a la gente leer más, aquí hay un artículo, lo que sea Voy a escribir un artículo. Voy a copiar este texto y este cuadro de texto y pegarlo aquí dentro, y voy a escribir los mejores consejos para correr para 2026 o algo así Y luego voy a sostener Alt, arrastrarlo hacia abajo. Básicamente lo dupliqué y voy a hacer este inter y 16, y luego voy a escribir Read Me. Bien. Se puede llegar hasta 14 o algo así. Tenemos este tipo de tarjetas, y lo que quiero hacer es también seguir adelante y escoger una imagen libre de derechos. Entonces solo estoy buscando algo aquí, tal vez algo con un humano en él que pueda ser bueno. Escojamos una linda foto de alguien. Quiero decir, tal vez esta foto o esta. ¿Por qué no? Puedes descargar esto o a veces lo que me gusta hacer es que haríamos click y copiamos imagen. Así es como a veces puedes traer imágenes a Figma, pero el tema es que a veces son de muy mala calidad Voy a eliminar esto y sólo voy a hacer una descarga gratuita de la imagen. Ahora que he descargado, sólo voy a arrastrarlo y soltarlo en Figma. Así es básicamente como siempre lo hago. Entonces ahora tenemos una imagen enorme aquí con buena calidad. Entonces lo que vas a querer hacer es que vas a querer traer esta imagen aquí dentro de ella. Pero antes de hacer eso, antes de entrar en esto, hagamos de esto un Auto Layout. este momento, es un marco, y sólo vamos a hacer clic en Auto Layout. Y FIMAS inteligente porque sigue adelante y organiza las cosas, pero también se deshace del espacio que no se usa Entonces se dio cuenta de que estos son los objetos que queremos, y no agregó ningún espaciado entre ellos, pero podemos poner ocho tal vez o en realidad, no necesitamos tanto espaciado entre ellos. Entonces vamos a seguir adelante y estirarlo como queramos. Este es el tamaño que quiero, y voy a hacer que se alinee a la parte inferior izquierda. Entonces quiero poner aquí esta imagen. Ahora, una forma de hacerlo es simplemente arrastrarlo y soltarlo aquí, y lo que va a pasar es que va a ser parte del diseño automático. Pero una cosa genial de Figma a la hora de importar imágenes y videos es que las imágenes son realmente rellenos, al igual que un color Entonces puedes copiar este relleno y solo puedes pegarlo aquí, ¿verdad? Entonces lo que pasa es que tienes la imagen como relleno encima de esto. Pero cuando haces clic en él, también puedes dar click aquí e ir a recortar, ya está llenando la imagen, pero la imagen no se está mostrando bien. No lo puedo ver. Lo recortaré y luego moverá la imagen así así, y voy a redimensionarla o dejarme simplemente guardarla así Bien. Entonces ahora tenemos la imagen en el fondo, no perfectamente colocada, pero es buena. Pero queremos que sea legible. Es decir, ahora mismo, no podemos leer nada, no podemos leer mucho. Una cosa que hacer al respecto, podemos traer este color aquí, y luego podemos hacer clic en esta pequeña gotita, que se llama modo de fusión en este icono, y luego puedes elegir estos modos que te permiten cambiar la forma en que se mezclan los colores Voy a tratar de elegir algo tipo de aseado y artístico a la vez. Pero eso no le arruina la cara. Creo que multiplicar es muy agradable, pero sigue causando problemas para la legibilidad Lo que voy a hacer es que sólo voy a tomar a este tipo, cambiarle el tamaño, ponerlo aquí a la derecha Así como así, está fuera del camino. Esto se ve como un pequeño y agradable guardián artístico, pero quiero ir un paso más allá. No me gusta cómo es esto de aquí. Voy a añadir otro y voy a hacer que sea un degradado. Se trata de rellenos normales y esto es relleno degradado. Voy a rotar el gradiente aquí, traer estos puntos aquí. Entonces lo que voy a hacer es que voy a colorear estos con el mismo color aquí. Creo que es éste, copia pegada. Vamos a hacer transparente este punto aquí mismo y luego este punto al 100% o en realidad lo contrario. Yo sólo voy a revertirlo aquí. Entonces voy a darle esta opacidad al 100%. Y así, ahora tenemos un efecto de destino, que es realmente limpio, para ser honestos. Se ve bien. Se ve bien. De esta manera, tenemos nuestra pequeña tarjeta y es decirle a la gente, mejores consejos para correr, leer más. Si alguna vez decidimos poner el leer más encima, podemos hacerlo. Es un Auto Layout. Solo asegúrate de que los valores que tienes en términos de relleno no sean aleatorios. Ahora mismo, son poco aleatorios. Ya sabes, de derecha e izquierda, son 14, de arriba y abajo, son 20 y? No estoy segura. Podemos hacer esto 16 y 16 o algo así o 24, 24. Depende totalmente de ti, pero yo sólo voy a hacer 16, 16, y ahí vamos. Así es como se ve. Muy simplista. Yo diría, sin embargo, esta zona está un poco vacía aquí mismo. Entonces tal vez podríamos agregarle algo, y no estoy seguro de lo que sería, pero solo voy a copiar esto aquí, podría ser, no sé Número uno, entonces solo voy a redimensionarlo Entonces es solo cuenta regresiva de artículos o algo así. Sólo como ejemplo, en realidad no estoy totalmente enamorada de esta idea, pero podemos probarla, no. A lo mejor es demasiado grande. Sí, es como Netflix, cómo eligió el número uno, película número uno, la película número dos. No estoy seguro de si hashtag le está haciendo justicia. A lo mejor podría ser así. Mucho diseño se trata de probar cosas y ver qué funciona y qué no. Entonces sí, quítame eso. Y sí, voy a llamar a esto podría ser interesante para ti o algo así. Por ahora, a lo mejor voy a cambiarlo después. Otra cosa, solo asegúrate de que la jerarquía aquí tenga sentido si las actividades pueden ser interesantes. Este es el mismo tamaño que no tiene sentido. Entonces tal vez podrías hacerlo un poco más pequeño. Y así, se ve un poco más agradable. Esto es básicamente cómo puedes usar diseños de auto para organizar y alinear mejor organizar y alinear tus elementos de diseño dentro del diseño. Gracias por escuchar, y nos vemos en la siguiente lección. 13. Creación de componentes simples: Hola para otra lección del curso para principiantes de Figma. En esta lección, vamos a hablar sobre qué son los componentes, cómo podemos usarlos de una manera muy sencilla para apoyar nuestros diseños. Primero que nada, definamos o intentemos entender qué es un componente. Un componente es básicamente un elemento reutilizable que ocurre en tu diseño. Y sé que podría haber dicho esto antes que describí las cosas de esa manera antes. Pero un componente es básicamente un elemento, un elemento de diseño. Podría ser un botón, podría ser una tarjeta como las tarjetas que hicimos aquí, y es algo que va a ser usado y reutilizado Entonces no es una cosa de una sola vez. Y esta cosa que se está utilizando y reutilizando tiene una estructura específica Por ejemplo, si tomamos esta tarjeta como ejemplo, tienes un número, y luego tienes un título, y luego tienes un en acción, lee más, y luego tienes una foto. Cuando tenemos tal estructura y tenemos recurrente de la misma manera, pero solo con una imagen diferente, título diferente, texto diferente, entonces eso se convierte en algo que podemos usar como componente. Lo que es realmente bueno de los componentes cuando se trata de Figma es que los componentes, todos vuelven al original Todavía están conectados de alguna manera. Déjame explicarte eso haciendo. Sigamos adelante y antes que nada, creamos un componente a o vamos a crear un botón, algo que podamos usar como componente, como ejemplo para un componente y luego ver cómo lo hacemos uso. Voy a hacer eso haciendo un Auto Layout. Entonces en caso de que no hayas tomado esa lección, entonces regresa, asegúrate de que lo tienes bien, has entendido cómo funciona eso porque esto va a ser cada vez más esencial a lo largo de las lecciones. ¿Bien? Lo que estoy pensando en agregar aquí es algo bajo actividades porque quiero que todo esto se complete en toda esta pantalla. Tenemos nuestras estadísticas, tenemos resumen, tus pasos, y luego tienes tu distancia, y estoy pensando que necesitamos poner para los usuarios, deberían poder bloquear sus tiempos o sus ejercicios muy fácilmente. Eso es algo que personalmente tengo una lucha con algunas aplicaciones, porque algunas apps, quieren que realmente vayas y hagas clic, voy a salir a correr ahora, haz clic en Inicio. Si quieren que haga eso, entonces deberían dejarlo muy claro en la primera pantalla. Eso, ya sabes, hay un botón que me dice, Oye, ¿quieres correr ? Haga clic aquí. Oye, ¿quieres salir a caminar? Tampoco quiero pasar por y filtrar todos los pequeños ejercicios diferentes, si eso tiene sentido. Por lo que es muy importante para nosotros mostrar a los usuarios una opción para hacerlo en la primera pantalla. Entonces en lo que estoy pensando es tal vez en mantenerlo minimalista A lo mejor podemos usar un pictograma o lo que podríamos llamar un icono Ya sabes, más comúnmente conocido como un icono. Y básicamente es como un dibujo o algo así, igual que estos que usé aquí que te muestran lo que se está haciendo. Entonces si alguien está corriendo, entonces, ya sabes, muestras este ícono de correr. Y si alguien es no lo sé, usando un temporizador, usarías esto, ¿verdad? Pero nos vamos a centrar en diferentes tipos de ejercicio, ¿de acuerdo? Así que comencemos a hacer eso. Entonces voy a agregar un elemento de texto, que puedas dar click aquí o hacer clic en T y luego seguir adelante y escribir Ejecutar, ¿verdad? Entonces voy a copiar esto sosteniendo el Alt. Ya tengo una fuente aquí llamada Font Awesome. Entonces en caso de que no lo sepas, quiero decir, no es muy conocido. Se trata de una fuente a que básicamente te muestra diferentes iconos. Es un concepto realmente genial. Entonces lo descargas como fuente y estoy en la versión gratuita ahora mismo, y luego seguirías a un sitio web donde tienen todas las fuentes, y solo necesitas copiar y pegar las fuentes o puedes escribirlas. A veces puedes simplemente escribir algo como no sé, reloj y luego aparecería. Podrías escribir bicicleta y aparecería. Eso es algo que podemos hacer. Quiero decir, aquí, podría estar corriendo. Por ejemplo, vino como un pictograma, o simplemente podrías ir al sitio web, solo tienes que ir a una fuente impresionante y luego encontrarías todos los íconos que tienen Pero al estar familiarizado con esta fuente, solo escribo cualquier palabra que me venga a la mente, y por lo general tengo un par de iconos memorizados En fin, basta presumiendo. Así que tenemos aquí inter, así que sólo voy a configurar esta fuente. Voy a hacerlo medio, y esto debería ser digamos 14. Ahora tenemos esto y aquello y vamos a elegir ambos y luego simplemente hacer clic en Mayús una A, ya sea eso o podrías tomarlo más tiempo y podrías seguir adelante y hacer clic en Agregar Maquetación Automática. Elija ambos, haga clic derecho y haga clic en Agregar diseño automático y así, hace un marco y lo convierte en un Diseño Automático. Puedo ver que el espaciado es de ocho, voy a hacer que sean cuatro, acercarlos más. Y ahora vamos a pasar por el proceso de creación de un botón. Por lo que probablemente es muy probable que sea un botón. La forma de hacerlo es que necesitamos tener antecedentes. Quiero decir, los botones suelen tener un aspecto específico, ¿verdad? Se ven similares a las cartas, pero son mucho más pequeñas. Entonces, ¿cómo lo hacemos exactamente? Bueno, la forma de hacerlo, al menos en este caso, es seguir adelante y agregar un relleno. Pero tenemos un problema porque ahora el relleno es blanco, el texto es blanco. Voy a elegir el texto y el icono y voy a hacerlo negro por ahora. Pero ahora está demasiado cerca de los bordes. Ves el texto aquí, no hay mucho espaciado, y por eso necesitamos relleno. Entonces voy a experimentar con el relleno y agregar cuatro. Ahora se ve bastante bien, pero déjame agregar algunas esquinas redondeadas. Voy a apariencia y escribo 16 aquí. Déjame ver cuanto fue el radio aquí, 16. Sí, eso es lo correcto. Entonces ahora lo tenemos a los 16, y parece un bonito botón, pero me gustaría un poco más de relleno. Por lo general a la derecha e izquierda, tenemos más relleno con botones. Quiero decir, es una decisión de diseño de estilo de diseño, pero podrías hacerlo solo para que respire un poco, especialmente con texto, ¿verdad? Y lo que también podríamos hacer podríamos incluso darle más espacio de arriba. Depende totalmente de nosotros. Podemos experimentar con ello. Sigamos adelante y decidamos una mirada general. Sólo voy a darle algo de color a esto. Entonces voy a hacerlo azul, por ejemplo. Ahora vamos a darle el nombre Botón de ejercicio. Esto es específicamente para el ejercicio, no para nada más. Ahora voy a convertir esto en un componente. Ahora, la forma de hacerlo es que puedes hacer clic derecho y hacer clic en Crear componentes, o podrías venir aquí y tienes este botón aquí, crear componentes. Se hace clic en él, y luego se vuelve púrpura. El morado resalta las cosas que son componentes. Pero hay algo muy importante que saber. Hay un componente padre y hay un componente hijo. Si estás familiarizado con la codificación, entonces este es probablemente un concepto familiar para ti. Básicamente, este es un componente padre porque es el original. Es la pieza original que acabamos de crear. Nosotros dimos a luz, cuando copias esto y vas a otro lado, y lo pegas Control V. Esta es una versión idéntica. Pero si te diste cuenta que esto tiene el título sobre él, esto no, pero esa no es la única diferencia. Quiero decir, de lo contrario se ven completamente idénticos. Pero la cosa es esto de aquí, como pueden ver, aquí hay cuatro cuadraditos. Este es el original, el componente padre. Si bien esta es una instancia. Creo que ese es el término real. Es una instancia o podrías llamarlo un componente hijo. Y aquí hay una relación interesante porque al igual que tener padres, los hijos adquieren las cualidades de los padres. Si un padre tiene ojos azules, el niño va a tener ojos azules. Si el padre tiene ojos verde neón, entonces el niño también va a tener ojos verde neón, deshagamos eso. Si cambiamos las cosas, ambos van a cambiarlo. Cuando vamos al niño y digamos que el niño va y usa lentes o no sé, va y hace algo, consigue algo cambiado en su apariencia, o digamos algo heredable, y digamos que cambian el color de sus ojos, como decíamos, se ponen algunas lentes Bueno, cuando eso pasa, nada padres. Es la misma lógica exacta. Por eso me encanta esta etiqueta o este nombre que es el componente padre y componente hijo porque retrata perfectamente la relación entre estos elementos Por lo que a los niños o instancias se les permite en cierta medida separarse de las cualidades de sus padres. Puedes venir a esta instancia y puedes cambiar la palabra aquí y decir diversión en lugar de correr podrías cambiar el color. También puedes cambiar el icono. Podrías escribir bicicleta. Por eso la fanta increíble es bastante genial porque solo puedes escribir cosas, puedes cambiar todo el color de esta cosa Se puede cambiar el relleno. Hay muchas cosas que puedes cambiar, hasta un punto en el que parece que esto ni siquiera está relacionado. Incluso puedes eliminar el icono o el texto o cualquier cosa. Vamos a deshacer todo eso. Pero una vez que hagas algo así , hagámoslo de nuevo Entonces vienes y dices: Oye, quiero que el ícono sea naranja. Entonces eso no se va a traducir a tu diseño. El motivo es porque, quiero decir, borraste el icono. Ya no está ahí. una regla para ello. Hay algunas reglas. Las cualidades que cambias en las instancias, ya no se desconectan de los padres. Ahora que cambiamos el relleno, por ejemplo, y decimos: Oye, cambiemos el relleno. Ya sabes, no va a cambiar, ¿ verdad? No va a cambiar. Pero algunas cosas, por ejemplo, el radio, el radio de la esquina, acabo de cambiarlo. Todavía está conectado. Y desafortunadamente, no hay una manera única de saber esto. Figma no te dice lo que sigue conectado con el padre y lo que no, lo que puede ser confuso la mayor parte del tiempo Pero hay que volver a pensarlo o pensar lógicamente en ello. Por ejemplo, aquí, se cambió la palabra, se cambió el color, se cambió el relleno. Entonces, obviamente, ya no están conectados. ¿Bien? Así que tenlo en mente, pero eso es solo un panorama muy general de cómo funcionan estas cosas. Puedo eliminar esto, no hay problema, pero una vez que elimino el componente padre, eso es un problema. Así que trata de no hacer eso, ¿de acuerdo? Quiero decir, no sería un gran problema, pero es correcto. Copia esto, pegarlo donde quieras, y luego puedes copiar y pegar esto. Puedes copiarlo y pegarlo. Y eso es lo que vamos a hacer. Vamos a crear diferentes versiones de la misma, o vamos a decir ir a correr y andar en bicicleta o digamos ciclo más término oficial, y luego podemos escribir ciclo o tal vez ciclismo hombre um, hombre bicicleta, persona en bicicleta. ¿Ciclismo? No estoy segura. Por eso se pone difícil. Oh, mira, ahí tienes. Persona en bicicleta. Por lo que a veces se pone un poco difícil conseguir estos. Y hagamos otra. Quiero decir, nadando, ¿verdad? Persona nadando nadando. Natación. Sí, ahí vamos. Y vamos a nadar. Así que estamos tratando de que esto sea lo más breve posible. No queremos hacerlo nadar. Ciclismo, ir en maratón. Eso sería un poco demasiado para las pantallas pequeñas pantallas de los teléfonos pequeños. Entonces, ¿qué podemos hacer? Quiero decir, para que puedas correr, también puedes caminar, supongo, salir a caminar. Así que caminando. Entonces ninguna persona esta vez, caminando. Y entonces podríamos poner algún otro bien podríamos simplemente poner uno más solo para que podamos llenarlo. Copiando esto y digamos fútbol tal vez, ojalá. Bien. Futbol Balón de futbol. Sí. Todo bien. Yo sólo voy a llamar a esto futbol. Lo siento, si hay algún estadounidense mirando, es fútbol. De todos modos. Ahora lo que podemos hacer, solo voy a agregar estos todos ellos en un Auto Layout, ¿de acuerdo? Apenas turno A y luego voy a aquí y lo voy a poner bajo actividades. Ahora tengo esto y me estoy dando cuenta de algo que el fondo ya es blanco, pesar de que se siente gris, pero en realidad es blanco Tenemos que recordar agregar la sombra. Podemos simplemente tomarlo de los efectos aquí, lo pegaremos aquí. Ahora tenemos un poco de sombra, pero es demasiado fuerte, así que la voy a tirar hacia atrás solo un poco solo voy a hacer retroceder un poco los valores. O alternativamente, lo que podríamos hacer es simplemente agregar un trazo. Como pueden ver, lo que es realmente genial es que solo estoy editando esta única instancia y está cambiando todas estas cosas juntas. Eso es súper increíble. Eso es lo que me encanta de estos componentes. Ahora vamos a ver cómo se ve. Sí, no se ve tan mal. Yo personalmente agregaría un poco más, digamos, relleno. Y la razón es que me gustaría permitir que la gente haga clic en ellos porque tenemos que dar cuenta del hecho de que la gente tiene dedos grandes. Quiero decir, todos lo hacemos, a la pantalla del teléfono. Pero también hay gente entre nosotros que también tiene dedos gordos, y eso es en realidad algo que tenemos dar cuenta como diseñadores. Creo que había algo llamado regla de dedo gordo o algo así, que es el hecho de que hay que hacer cosas, objetos lo suficientemente grandes como para que cuando la gente haga clic en ellos, pierda clic y haga clic en otro lugar. Podemos hacer lo mismo aquí agregando un poco más espaciado solo para asegurarnos de que las personas puedan diferenciarse. Así como así, tenemos diferentes tipos de actividades. Yo seguiría adelante y tal vez incluso cambiaría los colores, para ser honestos, pero no de una manera muy intencional, sino más bien un poco al azar, solo para que se vean diferentes. En cierto modo. O simplemente podríamos mantenerlos del mismo color. Quiero decir, es más fácil hacerlo, sobre todo porque elegimos este color como nuestro principal. Pero sí, esa es una versión de cómo podríamos hacer los botones. También podríamos hacerlas, como mencionamos solo con sombra. Pero yo diría, si quieres hacer algo así, entonces asegúrate de que la sombra no sea del todo loca así. Quiero decir, es un poco loco por estas tarjetas. Pero aquí, con las tarjetas, no son exactamente cliqueables, o puedes hacer clic en ellas, pero es una historia diferente Pero aquí, toda la función de estos es que deben ser clicables Así que queremos hacerlos lo más visibles posible, ¿de acuerdo? Así que solo tenlo en mente. Así que sí, así es básicamente como puedes usar componentes, crear diferentes tipos de elementos de diseño a lo largo de tu diseño y asegurarte de que se mantengan consistentes. Y ese es en realidad, ya sabes, todo el propósito en caso de que no haya hablado de eso directamente. La idea de los componentes es que no queremos, ya sabes, tener diferentes diseños por todas partes. No queremos tener diez tipos diferentes de botones. En cambio, queremos tener un sistema de diseño consistente. Un sistema de diseño es un ya sabes, una colección de elementos de diseño o componentes que serán utilizados y reutilizados, y deben dar cuenta de todo Si dices que va a haber un ícono, pongamos una opción para tener un ícono. Si va a haber sombra, si va a haber contorno, ya sabes, trazo, lo que sea, entonces deberíamos dar cuenta de eso. Así que adelante. Pruébalo, pruébalo, intenta hacer tus propios componentes y mira qué puedes hacer con él. Es muy divertido y facilita mucho las cosas. Y nunca es tarde si te apetece, Bien, oye, este es un objeto genial que tengo, puedes convertirlo en un componente con bastante facilidad, y luego puedes usarlo y reutilizarlo y hacer una versión diferente. Y lo que es aún más genial esto es que más adelante cuando dices, Oye, no me gusta cómo se ve este diseño, puedes seguir adelante y simplemente apagarlo una vez. No tienes que cambiarlo en todas las pantallas porque para ser honestos, una cosa que te puedo decir como diseñador, diseñador experimentado que lleva bastante tiempo trabajando en el campo es que muchas veces llegas a un punto en el que tienes tantos elementos diferentes y a veces los mismos elementos por todas tus Entonces la idea de ir a todos y cada uno de ellos y cambiarlos es solo una pesadilla completa. Es imposible, muchas veces, terminamos con tantos cambios, tantos elementos diferentes que son ligeramente diferentes entre sí, y la consecuencia de no comenzar limpios Por eso te aconsejaría seguir adelante, empezar limpio, aprender a usar los componentes y usarlos para que no te arrepientas más tarde y tengas que hacer mucho trabajo manual. Muchas gracias por escuchar, y hoy acabamos de aprender componentes. Te veré en la siguiente lección. 14. Cómo perfeccionar el diseño de UI: Bienvenidos de nuevo a otra lección. En esta lección, vamos a hacer un poco de reflexión. Vamos a echar un vistazo a todo el trabajo que hemos realizado hasta ahora y vamos a criticarlo un poco y ver qué falta Ya sabes, toda la idea, y este es un buen ejercicio para ti como diseñador, deberías aprender a mirar hacia atrás en tu trabajo, ya sabes, de una manera más objetiva. Es imposible ser completamente objetivo, pero trata de mirarlo desde otra perspectiva, especialmente la perspectiva de un usuario potencial, ¿bien? Y crítalo y trata de llegar a comentarios para los tuyos, algo que puedas usar para mejorar tu producto o tu diseño Eso es lo que hoy vamos a ejercitar y luego vamos a ir a mejorarlo. Todo bien. Entonces ahora, no te preocupes si sientes que las ideas no te vienen a la mente. No te preocupes si sientes que esto no tiene sentido. Mi profesor es mi instructor es absolutamente increíble. Se está poniendo al día con todo lo que falta. ¿Cómo voy a ser como él? No te preocupes por eso. Obviamente, tengo un par de años en el campo, así que me viene un poco más natural, pero esto es algo que puedes simplemente practicar. Con el tiempo criticando cada vez más, puedes llegar a un punto en el que puedes detectar estas cosas de inmediato de inmediato Hay otras cosas en las que no se puede decir que hay bien y mal. Es simplemente una cuestión de opinión, de opinión subjetiva. O tal vez necesitamos probarlo. Tenemos que hacer muchas pruebas hasta que sepamos cuál es la forma correcta y no tenemos tiempo ni dinero para eso. este momento lo estoy viendo como usuario y estoy revisando este dashboard y puede que no me guste. Se ve bastante bien. Hay algunas cosas donde dices, En vez de azul, me gustaría púrpura. En vez de naranja, me gustaría el azul. Pero no teníamos mucho con lo que ir. Entonces por eso se nos ocurrieron estos colores. Sí, ahora mismo, estamos pensando aunque más desde la perspectiva de la usabilidad. Entonces, ¿cómo está viendo esto el usuario? ¿Qué le falta al usuario? Lo que podría ser potencialmente molesto ópticamente, perturbador para el usuario, como en lo que se ve bien, no tan genial para los ojos, y así sucesivamente. Entonces, lo primero que yo diría personalmente es, soy un gran fan de este tipo de hablar con el usuario y decirle: Oye, Ahmed, y solo hablar con ellos llamándolos directamente por su nombre. Se diferencia de una aplicación a otra. Mucha gente no lo usa. No es súper común. Pero cuando alguien hace eso, sí espero tener un área donde pueda ir a mis propios datos personales y ver hola Ahmed, ¿quién es Ahmed? ¿Dónde puedo cambiar mi nombre? ¿Y si es el nombre equivocado? O quiero ver la configuración de mi perfil y así sucesivamente. A menudo, suele ser un círculo aquí o aquí a la izquierda o a la derecha, donde solo puedes acceder a tus propios datos, abrir tu perfil y así sucesivamente Eso es una cosa que agregaría que ya me falta. Una segunda cosa, y por cierto, siéntete libre de parar y solo pensar por ti mismo. Quería darte tiempo para eso, pero puedes hacer una pausa y hacerlo por tu cuenta. Lo segundo es que el espaciado está un poco fuera, siento. El espaciado entre tus estadísticas de hoy y las cartas debajo de él es un espaciado específico. Entonces cuando miras entre actividades, la palabra actividades, el título y las actividades reales, el espaciado aún no está ahí. Quiero decir, lo que podría ser potencialmente confuso aquí es el hecho de que miras las actividades y no sabes si esto pertenece a la zona antes. O después de ella. Porque tiene igual espaciado, y ahí es cuando piensas, por eso el espaciado es importante porque nos da inconscientemente, nos dice la relación entre diferentes elementos, y eso es exactamente lo que no nos está diciendo en este momento Por eso personalmente lo estoy notando más. Por eso es bueno mirar hacia atrás en tus diseños. Puede que te hayas perdido algo. Entonces lo que haría es que o bien disminuiría el espaciado aquí y básicamente agregaría estos dos elementos, el texto y todos estos botones. agregaría a un Auto Layout y disminuiría el espaciado. Lo mismo podría ser interesante para usted y esta tarjeta, o haría un Auto Layout. Yo los pondría juntos, pero aumentaría el espaciamiento entre todo lo demás. Estoy haciendo un Auto Layout de cualquier manera. Estoy agrupando estos juntos o no digamos agrupando porque los grupos son diferentes. estoy poniendo en un Auto Layout y estoy aumentando el espaciado entre o disminuyendo el espacio entre estos dos. Va a tener más sentido después. Todo bien. Eso se ve bastante genial. Ahora tenemos esta información. Ahora, claro, podemos llenar la primera pantalla con mucha más información, pero quiero que sea simple para ti. Eso es construir sobre el punto de tener una foto de perfil aquí para hacer clic en. Eso sirve para la navegación y necesitamos eso. ¿Cuál es esta página en la que estoy? ¿Es casa? ¿Es tablero de instrumentos? ¿Es resumen? ¿Qué es? ¿Hay otras pantallas que pueda ver? Ese es en realidad el tema de la siguiente lección es agregar una segunda pantalla, y eso es exactamente lo que vamos a hacer. La pregunta aquí es, ¿cómo puedo ver mi perfil? ¿Hay una parte social en esta aplicación? ¿Hay alguna parte de consejos, una parte educativa de esta aplicación, o tal vez haya una parte de amigos donde puedas competir con tus amigos Todas estas son ideas que hacen otras apps. Cuando no estás haciendo eso y ni siquiera lo estás contabilizando, ya te lo estás perdiendo. ¿Bien? Así que mantente al día y tenlo en mente. Eso es una cosa que vamos a hacer también es que vamos a añadir un Navbar Eso es lo que llamamos una barra de navegación donde tenemos múltiples botones, tal vez tres, cuatro, cinco, hasta ti y dices, aquí, esto es casa, esto es resumen, esto son amigos, quieras llamarlo, eso es algo que vamos a hacer. Aparte de eso, creo que estoy bien. Creo que el espaciamiento aquí entre High Ahmed y tus estadísticas de hoy podría ser un poco demasiado. No lo sé. Me apetece, pero veamos cómo podemos entenderlo. Vamos a llegar a ello. Ahora lo primero es lo primero, quiero terminar con el espaciado ya. Ya estoy poniendo estos en un Auto Layout y poniéndolos en un Auto Layout. Veo que el espaciado aquí es 16, y ese es el espaciado para todo el marco. Voy a ver cuanto espaciado tenemos aquí. Eso son diez. Voy a hacer ocho, y voy a hacer esto también ocho y este también ocho. Veamos cómo se ve ahora. Ahora puedes ver aquí el espaciado ahora es doble. No es tan notorio. Eso es lo que importa. Tu cerebro ya lo averiguó. Tu cerebro dijo: Bien, las actividades que están conectadas a estas actividades y nada más podría ser interesante para ti está conectado a esta tarjeta, nada más. Tu cerebro lo descubrió, así que no necesitas hacer nada por ello, ¿de acuerdo? Entonces ahora hemos terminado con eso y ahora vamos a seguir adelante y encargarnos de lo del perfil. Creo que el tema que tengo con esto es que a lo mejor es tener este texto es un poco demasiado alto. Tiene demasiada altura. Entonces ahora lo estoy bajando para ver si va a llegar, ya sabes, más cerca, no tanto. Todo bien. O sea, a veces con espaciado, una cosa que hay que tener en cuenta es que hay que ser más metódico al respecto Entonces como pueden ver, aquí colocamos números específicos y demás. Entonces aquí se ve fuera, y tal vez un diseñador gráfico hubiera dicho, sí, solo pon esto, más cerca de él. Como diseño de pantalla, no se puede hacer eso. ¿Bien? No puedes simplemente seguir adelante y decir, ya sabes, solo para que se vea mejor. No, hay que mantener, ya sabes, ser consistente. Si dijiste 16, 16, esto también debería ser 16, ¿bien? Entonces ya sabes, quítate las manos de eso. ¿Bien? Ahora, sigamos adelante y creamos nuestro botón de perfil. Ahora, lo voy a crear con solo hacer clic en O, lo que te consigue el óvalo, supongo Entonces sosteniendo Shift, solo lo haces más grande, y luego solo estoy comparando en este momento se ve a su alrededor como un buen tamaño. Y entonces lo que vamos a hacer es que vamos a conseguir una imagen de alguien. Todo bien. Entonces acabo de recibir una imagen. No estoy seguro si esto es IA en realidad, pero acabo de obtener una imagen de una persona. Entonces voy a copiar el relleno, pegarlo aquí, y esa es nuestra foto de perfil, ¿de acuerdo? Entonces voy a agregarlo al layout, y voy a elegir ambos elementos, la imagen y el texto, la imagen y el texto mantener presionada Mayús y A, hacerlos un Auto Layout, básicamente, y luego voy a hacerlos horizontales y voy a hacerlos centrados o en realidad tal vez más bajos. Y los voy a hacer alineados a la izquierda. Veamos cómo se ve cuando la foto está a la izquierda, se siente apagada, así que la voy a poner a la derecha. Pero voy a hacer el espaciado automático. Como ya expliqué antes, esto empuja a ambos elementos hacia los otros lados. Básicamente hace que el espaciado sea lo más posible. Eso es lo que hace. Ahora tenemos esta foto de perfil aquí y tengo la sensación de que no es suficiente. Voy a darle una sombra, sólo voy a copiar la sombra de aquí y pegarla aquí. Hazlo un poco menos borroso. Y acérquelo. No es tan visible, para ser honestos. Sólo voy a hacerlo más borroso. Esto se ve bien. O lo que podrías hacer es, podrías hacerlo mucho más pequeño. También podrías simplemente eliminar el desenfoque por completo. Depende totalmente de ti y también podríamos hacerlo mucho más grande. Esa también es una opción, algo que podemos hacer. Pero solo voy a asegurarme de que esto es que están centrados juntos. Todo bien. Entonces ahora tenemos eso. Todavía no estoy súper contento con la sombra, pero eso está bien. Entonces lo que podríamos hacer es intentar agregar un trazo para que se vea mejor, diferenciado del fondo. Creo que eso resuelve un poco nuestro problema. Ahora, estamos avanzando y vamos a crear nuestro elemento de navegación. Ahora, estoy pensando en hacer algo un poco parecido a lo que estamos pasando aquí con estos botones, nada muy diferente, agregar un icono, agregar algo de texto, y mantenerlo simple. Y la mayoría de las barras de navegación son así. ¿Bien? Entonces lo que voy a hacer es que voy a crear un marco, así que presiona F y trae este marco y voy a tratar de que encaje aquí, ¿de acuerdo? Sí, algo alrededor de eso. Entonces voy a hacerlo redondo. Y quiero agregarle diferentes botones, pero crear botones puede ser un poco difícil. Entonces déjame copiar esto. Acabo de copiarlo, y voy a crear un botón. Ahora, permítanme simplemente tomar prestados estos elementos aquí. estoy copiando y pegando aquí y déjame ver cuál es mi visión Voy a ponerlos así. Y luego voy a decir que esta es casa y esta es tu casa, y voy a hacer esto un poco más grande. Entonces voy a hacer de esto un Auto Layout ahora para unirlo todo. Y esto no se ve tan mal, para ser honesto. No estoy seguro si es demasiado grande, pero vamos a probarlo. Voy a agregarlo aquí y voy a hacer de esto un Auto Layout. Voy a darle un color diferente solo para ver. Bien. Cambiar el tamaño de esto Voy a redimensionarlo y darle el acolchado adecuado. Aquí es al azar, así que solo voy a hacer que sea ocho por 12 o algo así. Ahora voy a sacarlo. Voy a hacer de esto un componente y voy a decir botón Navbar. Voy a copiar esto ahora, pegarlo aquí, y copiarlo y pegarlo de nuevo taza y pegarlo de nuevo. Voy a hacerlo horizontal, y hacer que tengan ocho espacios. Con el acolchado, voy a hacer también ocho. Y lo haré ocho de arriba dos o tal vez veamos, tal vez lo hagamos cuatro, cuatro. Voy a quitar el color de aquí por ahora. Ya ves ahora están muy bien espaciados porque trabajamos con espaciado consistente. Trabajamos con un acolchado consistente por todas partes, y ahora se ve muy bien equilibrado. Voy a convertir esto en un componente. Voy a convertirlo en un bar nab. Tomaré esta barra de nab y la agregaré aquí. Y voy a tratar de centrarlo. Ahora, la manera de hacer esto, hay una manera que no te he enseñado todavía, pero ahora te la estoy enseñando. Cuando tienes un Auto Layout, todo está organizado de una manera específica, aquí tenemos un Auto Layout. Todo está alineado a la parte superior izquierda. Las cosas tienen 16 espacios y así sucesivamente. Pero hay una manera de decirle a Figma que ignore el diseño automático Y hacer lo que quieras. De esta manera es elegir el elemento que quieres sacar de todo esto, y luego vas a ir a este botón aquí y dice, ignorar Auto Layout. Entonces solo te va a permitir moverlo como quieras en cualquier dirección y en cualquier lugar, cualquier espaciado, no importa. Entonces eso es lo que estamos haciendo. Ahora tenemos estos elementos, y para ser honestos, no se ajusta a toda la pantalla. Si algo está pasando, tal vez podríamos agregar otro. A lo mejor eso podría resolver nuestro problema o podríamos agregar mucho más espacio entre ellos. Pero eso crea un problema un poco con el espaciado, como puedes ver. El relleno aquí es cuatro y luego el espaciado es 16. Sí. A lo mejor solo podemos trabajar con este tipo de Navbar pequeño. ¿Bien? Apenas por ahora, podemos trabajar con esto y podemos cambiarlo después. Voy a copiar y pegar esto para que parezca que hay más contenido. Sólo voy a agregar diferentes colores. Haz que parezca que tenemos más contenido en el fondo. Ahora bien, aquí hay una cosa que quiero hacer, que es bastante común, solo para mostrarte como ejemplo, es hacer esto más al estilo de Apple. No nos estamos apegando exactamente a su estilo de diseño y demás, pero estamos tratando de imitar un poco el estilo, eso es lo que hacen muchas aplicaciones Cuando se ejecutan en IOS en el sistema Apple, lo imitan Y lo que quiero imitar es el efecto cristal porque sí tenemos esta Figma. No es exactamente lo mismo, pero es bastante genial. La forma de hacerlo es que vas a seguir adelante y darle tu objeto, tu Navbar, vas a darle el color blanco Y luego vas a seguir adelante e ir a efectos. Y en lugar de sombra paralela, también podemos hacer sombra paralela, para ser honestos. Hagámoslo. ¿Por qué no? En lugar de solo eso, también vamos a hacer vidrio y hacerlo por sí solo, te va a dar ese efecto vítreo realmente bonito, que se ve muy limpio Hay más ajustes que son muy complejos, pero es muy agradable probar de todos modos. Pero para hacer eso, también hagamos que los colores sean más apropiados. Hagámoslos blancos por ahora y veamos cómo se ve eso. Y claro, yo siempre recomendaría que cuando haces tal cosa es que vayas y lo compares con lo real que estás tratando de copiar. En este caso, estamos tratando de copiar manzana, así que vamos a ver cómo lo hacen, y ahora, no hacen blanco. Quiero decir, ellos hacen negro. El color negro. Entonces para botones así, harían color negro o tal vez no exactamente negro, pero aquí podemos quitarnos nuestro negro apagado y usarlo. Es adaptativo. Si el fondo es de color, lo hacen blanco, si no lo es, lo hacen negro. En este caso, tenemos un fondo muy oscuro, así que sólo vamos a ir y hacerlo blanco. ¿Ves lo que hice ahí? Seguí adelante, revisé, vi lo que han estado haciendo y le dije: Bien, déjame un Bien, así que ahora vamos a seguir adelante y crear las diferentes secciones. Entonces digamos que tenemos casa, que hoy en día no es tan descriptiva, para ser honestos. Al igual que, hay que especificar, ¿este es tu feed? ¿Este es tu resumen? ¿Qué es esto exactamente? Entonces tal vez solo escribamos aquí resumen. Pero si escribimos eso, entonces necesitamos tener un pequeño icono bonito. Y acabo de escribir un gráfico circular, que funcionó bastante bien. Por ahora. Sólo voy a llamar a este resumen. Todo bien. Y luego voy a venir aquí. Entonces en lugar de casa, tal vez tengamos amigos o algo así o sociales. Voy a escribir usuarios y sólo voy a escribir aquí. Amigos. Perfil, tenemos el perfil arriba. Podríamos hacer una parte educativa. Entonces tal vez mancuerna. Sí. Y podríamos escribir aquí entrenamiento. Ahora lo estropeamos un poco porque ahora los nombres o los botones todos tienen diferentes tamaños de lo que normalmente tenemos Para ser honesto, también estoy notando que el texto es un poco demasiado grande para ser honesto Podemos seguir adelante y cambiar eso y hacer que sea 12 tal vez, lo que vamos a querer hacer es también darles a todos una talla. Voy a recoger la talla de la más grande, que es 79, así que sólo voy a darles a todos 80, un ancho de 80. Así como así, ahora son un poco más iguales . Se ven más bonitas. Pero este efecto de desenfoque es un poco demasiado fuerte, así que podemos intentar ajustarlo. Podemos hacer más glaseado, lo que arruina todo este efecto, para ser honestos Pero como puedes ver, sin glasear, es realmente transparente Hacemos un poco más de glaseado. Yo sólo voy a dejar eso. El glaseado le permite tener no tan ver a través del efecto, y luego se pueden ver los colores un poco mejor Sí, esto es muy bonito. Si queremos ir por todo el camino de imitar a la manzana Vaya, entonces tenemos que hacer esto realmente redondo y tenemos que hacer todo un poco Tal vez debería hacer que los iconos sean un poco más pequeños. Y aquí tenemos relleno de ocho, así podemos hacer que sea cuatro tal vez. Mira cómo se ve eso. Yo diría que esto es un poco más parecido. Es un poco más difícil de ver con todo el efecto de cristal. Quiero decir, cuando hacemos esto, es mucho más agradable. Pero sí, quiero decir, ahora mismo, se ve un poco más legible a mucho mejor, pero tal vez vuelva a hacer el icono un poco más grande, y luego se ve mucho mejor Entonces lo que podríamos hacer es agregar también un pequeño botón de búsqueda agradable. Entonces lo que voy a hacer es que voy a tomar una instancia, un hijo de este componente, y voy a eliminar estos. Ahora solo hay uno en lugar de ser múltiple, así que no necesitamos escribir la palabra. Sólo tendremos el icono. Y entonces voy a hacer esto 60 por 60, supongo, o 54 por 54. Tomaré esto aquí y también haré que ignore el Auto Layout y lo alinee aquí. Veamos si la altura aquí es 54, también debería ser 54 aquí. Vamos a comprobarlo de nuevo. Aquí hay un pequeño problema con el renderizado, creo. Bien, así que así es como se ve ahora. Entonces tenemos estos íconos. También tenemos icono para la búsqueda. Entonces tenemos nuestro Navbar luciendo bastante bien, para ser sinceros, tengo que decir, no es exactamente perfecto para Apple, pero nos está sirviendo bien para el diseño que tenemos aquí ¿Bien? El siguiente paso va a ser diseñar una segunda pantalla, lo que va a ser una tarea desafiante. No te pongas muy engreído, pero vamos a pasar por esto juntos Así que tampoco tengas miedo. Vamos a intentar crear otra pantalla. Usando los mismos principios, usando las mismas ideas que aprendimos, vamos a crear una segunda pantalla. Muchas gracias por escuchar y nos vemos en la siguiente lección. 15. Cómo agregar una segunda pantalla: Hola ahí. Hoy vamos a estar creando una segunda pantalla para nuestro diseño. Entonces en esta lección, vamos a tratar de entender cómo podemos expandirnos a partir de diseños que ya hemos comenzado que ya hemos hecho de una manera que se expande sobre él, que se basa en él y tal vez entra en nuevos elementos y así sucesivamente. Pero al mismo tiempo, aparte de introducir estas cosas nuevas, queremos mantener la consistencia. Y es por ello que esta lección algo a considerar. Por eso nos aseguramos de incluir esta lección. Porque leer una pantalla es una cosa, y es una gran habilidad, pero luego seguir adelante y continuar esa pantalla en otra, asegurándose de que se vean igual que si estuvieran en la misma app, eso es un desafío. Entonces hoy, vamos a estar asumiendo este reto. Para el propósito de esta lección, voy a, he optado por crear la página de capacitación. Entonces vamos a hacer una segunda pantalla, y va a ser la pantalla de entrenamiento. Y en esta pantalla, vamos a crear una página o una sección de la app que esté especializada para ayudar a las personas a formarse. Eso incluye dar videos tutoriales, tal vez artículos, posiblemente, pero mantenerlo muy ligero, tal vez algunas herramientas útiles para el entrenamiento. No estoy muy segura. Pero vamos a mantenerlo simple porque, de nuevo, parte de pensar realmente en lo que debería tener la app y las características y las funciones, eso es otra cosa. Eso es algo en lo que definitivamente deberías invertir tiempo. Pero para los propósitos de hoy, lo que estamos haciendo es que estamos practicando cómo dar vida a estas ideas. Entonces, no cómo llegar a las ideas, sino cómo implementarlas en un diseño real. Entonces comencemos. Ahora, normalmente, podrías seguir adelante y elegir la herramienta de marco y obtener un marco completamente nuevo. Pero me gusta trabajar en lo que ya hemos tenido. Entonces voy a nombrar esto aquí como si no estuviera seguro de la aplicación de fitness, y no nos hemos decidido por un nombre o marca ni nada, y eso está bien por ahora. Sólo voy a copiarlo y pegarlo. FINMA solo va a hacer una segunda pantalla aquí para mí y puedo llamarla, quiero decir, en lugar de solo app de fitness, realidad podría llamarla página de resumen Todo esto es una app de fitness, pero esta y esta es la página de entrenamiento. Bien, o podrías llamarlo pantalla, podrías llamarlo como quieras. Entonces voy a seguir adelante y quitar las secciones que para mi, no son interesantes o no realmente utilizables o reutilizables. Entonces vamos a ver. Yo, quiero quedarme con este tipo de lo voy a poner aquí arriba. Nos quedaremos con esta primera línea o tal vez en realidad podamos eliminarla. Entonces esto está enfocado en el fitness o vamos a traerlo de vuelta y llamemos a esto fitness o algo así. Y luego vamos a quitar esto. Lo alinearemos a la izquierda. Aquí tenemos actividades, tus estadísticas nos vamos a quitar las estadísticas. A lo mejor queremos que algunos de los artículos tomen forma así o no estoy seguro, pero tengámoslo en mente. Ahora tenemos un problema es el hecho que estos botones no se están adaptando, no son adaptables al color. Tenemos que encontrar una manera no quedar tan mal cuando eso sucede. A lo mejor deberías hacerlo grisáceo. Creo que esto es mucho mejor. El relleno aquí es blanco, pero aquí es negro curiosamente Quiero decir, acabamos de cambiarlo. Podemos hacer esto también negro. Sí, creo que eso es lo suficientemente bueno solo para asegurarme de que en cierta medida sea legible. Una cosa que queremos asegurarnos es que queremos asegurarnos también esté claro antes de comenzar, cuál estamos eligiendo, qué página se está eligiendo ahora mismo. Para hacer eso, lo que podemos hacer es que podamos venir aquí. Tenemos este elemento que ya creamos, ¿verdad? Entonces ahora, esta es una característica extra o una cosa extra que necesitas aprender. Entonces, cuando haces un componente, un componente puede tener múltiples variaciones del mismo o lo que llamamos varianza. Entonces dices, este es el botón Navbar, así es como se ve Pero también necesitamos asegurarnos de que haya una versión de la misma que esté algo resaltada, Cuando estés en la página de resumen, debería decirte que estás en la página de resumen. Ahora mismo, no nos dice. Entonces vamos a seguir adelante y hacer clic en este botón aquí, que tiene add variant, y eso va a agregar otra variante aquí. Entonces lo que vamos a hacer es que vamos a agregar un relleno. Vamos a hacer este relleno tal vez 5%, tal vez 10%. Eso es lo que vamos a hacer. Y luego cuando vengamos aquí, vamos a elegir este resumen. Y vamos a elegir la variante dos. Podemos darle un nombre también. Ahora veamos cómo se ve eso. Se ve un poco apagado en cuanto al acolchado, y tal vez deberíamos ajustar nuestro acolchado para asegurarnos de que funcione. Entonces lo que podríamos hacer aquí es en lugar de tener el relleno B ocho, podemos tenerlo B cuatro, y entonces sería consistente. Y si, ahora lo tenemos resuelto. Ahora solo tenemos que asegurarnos de que este botón también esté redimensionado, que sea 55 por 55 y lo traeremos aquí Ahora voy a borrar estos y sólo voy a agregarlos de nuevo. Veamos cómo se ven. Ahí vamos. Ahora esto se destaca y podemos perder el tiempo con lo más destacado. Quiero decir, ¿debería ser más claro o debería ser más oscuro? Nuevamente, sólo para darte una idea, estamos, como dije, no tomando en cuenta los colores de diseño reales y demás cosas de Apple Lo estamos copiando con el efecto cristal, pero todo lo demás, solo lo estamos haciendo muy rápido. Sí, no hay necesidad de enfocarse demasiado en eso. Entonces lo que podríamos hacer es que también podríamos hacerlo de una manera donde cuando se resalta, también tendría cierto color. Entonces aquí, por ejemplo, podría ser de este color. O este color que teníamos, pero esto es como se puede ver, no mezclar muy bien. Yo elegiría este color ya que es muy brillante. Entonces lo que vamos a hacer es que vamos a venir aquí y vamos a hacer este default y esta página está entrenando. Entonces vamos a elegir la segunda variante para el entrenamiento. ¿Bien? Y así se ve. Ahora, como mencioné, no tenemos elementos adaptativos. Cuando estás codificando, podrías decir, cuando el fondo es ligero, entonces esto debería tener mucha más opacidad, 50% o algo así Eso garantizaría esencialmente que aseguraría que no habría ningún tema en términos de visibilidad. Pero ahora porque realmente no podemos codificar eso, realmente no podemos hacer esa lógica, a veces terminas con elementos que no son muy legibles. ¿Bien? Entonces puedes seguir adelante y hacerlo manualmente y decir, bueno, en este caso, no hay el fondo es demasiado ligero, lo que sea, o podrías dejarlo en manos del desarrollador y ellos pueden decidir eso. ¿Bien? Pero esa es una historia para otro día. Ahora volvamos al diseño. Ahora tenemos mucho más claro que este es el resumen y esta es la página de capacitación. Perfecto. Entonces ahora tenemos que preguntarnos, ¿qué se espera normalmente en una página de capacitación? Entonces yo personalmente, esperaría hasta cierto punto que haya botones que me ayuden a elegir algo muy rápido, ¿verdad? Me encantan estos pequeños botones o chips o como los llames porque son de muy fácil acceso y te ayudan a acceder al contenido que necesitas. ¿Bien? Pero podríamos tener un problema aquí porque en esta sección, estaba claro que estabas iniciando una actividad, y tal vez incluso podríamos dejarlo claro con el título, iniciar actividad o algo así. Pero aquí, está sonando más como un filtro. Entonces tal vez deberíamos tener un poco cuidado con cómo redactamos estas cosas. Es decir, ¿estás iniciando una actividad? O estás filtrando, ya sabes, las lecciones o los videos que quieres ver? A lo mejor podríamos hacer esto de otra manera. Así que vamos a crear una variante diferente aquí. Y así tenemos este componente. Acabamos de hacer otra variante de la misma. Pero en vez de que tenga sombras y demás, vamos a quitar la sombra y vamos a quitar el relleno, y vamos a mantener el trazo, ¿de acuerdo? Teníamos un diseño de trazo, así que nos vamos a quedar con eso. Y veamos cómo se ve. Y para ello, sólo tenemos que seleccionar cada chip que tengamos y luego ir a la variante dos. Entonces ahora se puede ver la diferencia, la principal diferencia entre ellos es que estos estaban llenos de sombras. Ahora son más como chips de filtro. Se utilizan principalmente para filtrar. Y podemos tratar de hacer otras cosas para asegurarnos de que sea, no estoy seguro. Entiende que estos sean solo para filtrar. A lo mejor podríamos cambiar los colores del icono también. Para no hacer que parezca tan interactivo. Pero eso es sólo una idea. ¿Bien? Eso es en mi opinión, algo que podemos hacer para tratar de lograr ese efecto. Ahora que tenemos eso hecho así que tenemos actividades, en realidad podríamos simplemente eliminar eso y es auto explicativo que puedes filtrar de acuerdo a estos. A lo mejor aquí podemos dejar muy claro la actividad de inicio. Bien. Así que inicia la actividad. Se puede correr en bicicleta, nadar, lo que sea. Y aquí tienes las mismas actividades, pero simplemente están separadas. Pero yo diría, sin embargo, no tiene sentido que estés tratando de ver un video sobre correr. No creo que eso sea una cosa. Entonces, lo que dejaría esto extra claro es encontrar realmente las categorías adecuadas. Entonces yo diría que las categorías adecuadas serían el entrenamiento con pesas, ¿verdad? Como pesos. Y entonces aquí podríamos escribir mancuernas Podríamos escribir yoga como uno solo. Entonces veamos si tienen yoga. Sólo estamos buscando meditar. Asegúrate de filtrar gratis. Entonces puedes tener a una persona rezando pero en realidad no le queda bien las manos rezando, algo así. Tal vez um, relajarse o relajarse, spa. No estoy seguro si eso realmente lo simboliza, pero digamos manos Pero como dije, esta es la versión gratuita. Entonces en estos momentos no tenemos los mejores íconos, pero si realmente quieres desarrollar una app o diseñarla o si trabajas en una empresa, te recomendaría que consigas el paquete completo, la suscripción, para que puedas obtener todos los íconos y tienen muchos geniales. ¿Bien? Entonces, ¿qué más puedes hacer? ¿Tienes peso? ¿Tienes yoga? A ver. Quiero decir, estoy buscando en mi teléfono. Déjame revisar mi app de fitness y ver qué tienen ahí. O tal vez llamemos a esto meditación en lugar de yoga. Y no estoy seguro de lo que hay ahí. Digamos cardio, y luego vamos a tener a alguien corriendo. Y encontremos una cosa más. Sí, digamos solo yoga, pero luego tenemos que encontrar algo para ello. Yoga, colchoneta, colchón, almohada, estiramiento. Es decir, ¿realmente no hay nada que simbolice el yoga? Es decir, tienen persona meditando, por ejemplo. Eso podría ser bueno. Entonces estos son todos los tipos de tipos de ejercicio que tienen. Escojamos algo diferente. Digamos que solo digamos correr. Bien, entonces aquí lo tenemos. No cambiamos tanto, pero tenemos pesos y meditación al principio. Y así vamos a poner el podría ser interesante todavía abajo, ya sabes, al final del diseño. Me gusta tener esos elementos porque son un poco agradables reflejos, pero también son características adicionales o contenido extra, digamos. Cuando el usuario no encuentra lo que quiere, siempre hay, ya sabes, eso puede ser interesante para ti, podría interesarte o podría ser solo para ti, para ser honesto. Al igual que, esa también es una buena manera de decir es darle a alguien, como, un tema interesante y decir, Oye, esto podría ser una cosa para ti, algo que podrías hacer. Entonces sí, vamos a quedarnos con eso. Pero como dije, es contenido extra. decir, lo ideal sería se filtrara según la persona, según sus intereses, y según la página. Aquí está una página de fitness. Quiero decir, toda la app es una app de fitness. Me acabo de dar cuenta de que no es una página de fitness. Es una página de entrenamiento. Aquí podríamos decir entrenamiento. Ahora tenemos este tipo de entrenamientos para ti. Ahora vamos a crear un elemento o componente que tenga video. Al hacer clic en F y hacer una bonita cajita. Vamos a crear algo para ver. Pero lo que pasa es que este formato que ves aquí es en gran medida un formato regular para computadoras. Este es el formato para computadoras. Es paisaje. Pero hoy en día muchas aplicaciones, muchas cosas se están volviendo verticales. Se están convirtiendo en un retrato, y esto es por teléfono. Eso es una cosa que podrías hacer con tus diseños es asegurarte de que sean verticales en lugar de horizontales porque eso realmente está más optimizado para los teléfonos. Entonces lo que podríamos hacer es darle esto quiero decir, ¿cuánto radio de esquina tenemos? 16? Entonces podríamos darle a esto 16. Y voy a tomar esta imagen por ahora, la misma imagen que teníamos justo como ejemplo. Voy a hacer clic en él y voy a elegir en lugar de recortar, voy a decir llenar. Va a averiguar las dimensiones para mí y todo. Bien, entonces ahora tenemos esto aquí, ¿verdad? Ahora, el reto va a ser hagámoslo un poco más grande. El reto va a ser es escribir texto, ¿no? Entonces cuando tienes algo horizontal, escribir texto en él va a ser difícil. ver este es el Inter Inter y vamos a hacer 16. Cualquier cosa por debajo de 16 suele ser más difícil de leer, ¿de acuerdo? Por lo que estos títulos deberían ser muy, cortos. Así que voy a hacer esto negro, aunque en realidad no podamos ver mucho de ello en este momento. Entonces tenemos dos opciones, por lo que podemos escribir en la imagen real o podemos escribir debajo de ella. Para fines de legibilidad, siempre es mejor escribir debajo de ella o además porque no sabes qué tipo de imagen va a venir Así que asegúrate de que esté bien hecho para que tengas en cuenta todas las posibilidades. Ya sabes, de esta manera, sé que va a haber texto negro y debajo de él, va a haber blanco, así que funciona. Entonces voy a hacer de esto un componente, y voy a decir video, ¿de acuerdo? Entonces ahora voy a copiar esto, y esto es lo que me gusta hacer. A mí me gusta seguir adelante y pegarlo ya y volver a pegarlo. Y luego elegirlos y hacerlos Auto Layout manteniendo el turno en A y luego los haré horizontales, y luego voy a copiar pegar, copiar y pegar. O no necesitamos quiero decir, esto es suficiente. Entonces ahora podemos ver cómo se ve y podemos juzgar por nosotros mismos. Oye, a lo mejor esto está tomando demasiado de la pantalla, vamos a cambiarlo. Vamos a cambiarlo un poco, y veamos qué podemos hacer. Tal vez podamos disminuir el espaciamiento entre ellos, o tal vez eso sea una mala idea. Sólo el tiempo lo dirá. Así que ahora vamos a tratar de averiguar un pequeño título bonito, algo que sea mínimo. Nuevamente, estoy buscando una app solo para ver cómo lo ha hecho Apple, por ejemplo, um, y no estoy haciendo esto por ningún motivo específico solo porque mi teléfono es un teléfono amplio, así que es más fácil acceder a eso desde ahí. Veo que tienen fuerza con Kim, fuerza con Jen. Al igual que, estos son los entrenamientos que tienen, ¿verdad? Al igual que, dicen HIIT con Jamie Ray con Brian. Entonces es genial porque cuando lo piensas desde la perspectiva de la experiencia del usuario, supongo que están tratando de conectarte con la persona. Entonces es una conexión humana. La única diferencia entre esta o aquella lección es que esto es con Brian y esa es con Bakari, por ejemplo Entonces eso es algo realmente genial, pero también les facilita porque ya sabes, van a escribir HII T uno y dos, y tres Eso tampoco tiene sentido. Pero intentemos probar eso y ver cómo se vería eso en nuestra página. Entonces, si digo HIIT con Brian, ¿verdad? Demasiado tiempo. El texto es demasiado grande para ser honesto. Entonces hagámoslo 12. Y vamos a comprobar cómo se ve. Entonces voy a elegirlo, presiona play. Bien, ahí vamos. Para ser honestos, el texto no es demasiado pequeño, y es bastante bueno. Es bastante genial. Y si, como puedes ver, estamos haciendo uso de este espacio muy bien, e incluso podemos agregar otro. De esta manera, puedes agregar un pequeño teaser agradable. Ya ves, oye, ahí hay algo más para ti. Yo sólo voy a derribar este elemento. Esto de aquí mismo. Entonces me gustaría tomar este texto, copiarlo, pegarlo. Me muevo con el touchpad arriba y abajo. Para que pase por cosas diferentes. Entonces ahora lo estamos haciendo aquí, lo estamos poniendo aquí, y tenemos que llamar a este entrenamiento. Y los agregaré a ambos en un Auto Layout. Entonces la distancia aquí es de ocho, así que voy a hacer ocho también aquí. Así que de nuevo, sólo el mismo principio, ¿no? Y aquí es donde la consistencia es bastante importante es entender, oye, el espaciamiento entre esto y aquello y lo que sea debe ser igual en cierta medida, no del todo igual, pero debe ser consistente. Entonces aquí ocho, ocho, ocho, pero entre todas estas diferentes secciones a los 16. Así que asegúrate de seguir estas pautas que configuraste antes. ¿Bien? Así que sigamos adelante. Ahora tenemos esta configuración. Mantengamos el título ahora mismo vacío o predeterminado, así que solo vamos a escribir el nombre del video. Entonces podremos rellenar estos datos. Entonces podemos llamar a esto Yoga con Matt. Gracioso porque tienes colchoneta de yoga, y luego podemos decir HIT con Brian. Entonces podríamos ir por este camino o podríamos ir por otro camino, para ser sinceros, porque ahora estoy pensando que la forma en que hizo Apple es genial, pero bueno, podemos hacer algo más genial. Ahora déjenme hacer una lluvia de ideas sobre qué hacer. Una cosa que podemos hacer. Voy a copiar esto y pegarlo. Entonces ahora tenemos una línea extra. Así que estamos editando directamente sobre todo en todos estos elementos. Ahora voy a sostener a Shift y A solo eligiendo esto. Lo convertí en un Auto Layout, incluyendo solo el texto. Ahora voy a agregar cuatro y cuatro acolchados. Voy a añadir un relleno. Voy a hacer el relleno un poco gris, o tal vez puedas darle color un poco azul. Entonces le voy a dar 24 esquinas redondeadas. Entonces voy a escribir aquí para escribir etiqueta. Esta es una etiqueta de lo que vamos a querer decir. Déjame agregar un poco más de relleno de izquierda y derecha. Quiero asegurarme de que también solo encaje en el texto mismo. No quiero que esté ocupando todo el espacio. Veamos aquí era medio, esto debería ser medio. Bien. Y esto debería ser semi audaz, supongo. O podemos, no lo sé. Quiero decir, esto es audaz, así que podemos ceñirnos a eso. Podemos mantener las cosas en negrita, pero también tener mucho texto en negrita es un poco negrita. Mantengámoslo todo medio, ¿de acuerdo? Y entonces vamos a tener un ejemplo. Aquí, en vez de decir yoga con MP, podríamos decir principiante, ¿verdad? Entonces niveles, sumando niveles tal vez o sumando meta, ¿cuál es el objetivo de esto? Y podríamos decir aquí pro. Decir aquí mediados no me en medio o medio o gusta en medio o medio o algo así o no estoy seguro. Quiero decir, mediados también puede tener un mal significado hoy en día como malo. Pero digamos medio. Dificultad media, dificultad principiante dificultad pro o Max o como quieras llamarlo, realmente no es tan loco importante. Entonces, lo que podemos hacer, podríamos haber tomado esta etiqueta y convertirla en su propio componente. Es algo que ya podemos hacer. Voy a sacar esto, convertirlo en componentes, llamarlo etiqueta, y voy a crear tres variantes del mismo. Uno va a estar comenzando. Uno va a ser mega, uno va a ser duro o profesional. Quiero decir, en vez de decir duro, vamos a decir que eres profesional, esto es nivel pro. Entonces podemos jugar con los pros rojo medio es amarillo, principiante es verde, tal vez. Realmente depende de nosotros. Solo voy a agregar esto por defecto siendo principiante y luego cuando quieras cambiarlo, puedes elegir medio, pro, y así sucesivamente. De nuevo, puedes volver a los colores y decir: Oye, esto no me gustó mucho. Mantengámoslo azulado o tal vez el rojo a veces puede verse como una connotación negativa Entonces cuando lo haces azul, se vuelve más positivo. Pero también tal vez podamos hacer que todos estos colores sean un poco más teniendo un poco más de saturación solo para que se vean claros. Entonces ahora vamos a comprobarlo. Bien, se ve mucho mejor, pero ahora estoy pensando que podríamos hacerlo regular solo para que no destaque demasiado Y en términos de espaciado, tal vez puedas hacer un Auto Layout con la etiqueta, como el título en la etiqueta y hacer que cuatro siento que podrían estar más cerca entre sí. Ahora tenemos yoga con Matt principiante. Alternativamente, lo que podríamos hacer es marcar cada sesión de yoga en algo diferente. Entonces, por ejemplo, yoga pacífico, ¿verdad? Y entonces se puede decir HIIT, se puede decir, um, HIIT rápido Estás dando un poco de marca, esto es yoga, pero el objetivo de esta sesión de yoga es ser súper tranquilo o relajante. Quiero decir, se supone que el yoga es eso de todos modos, pero se podría decir yoga intensivo para los profesionales, ¿verdad? Entonces aquí tenemos P. ¿Qué tipo de ejercicio podría ser el hardcore running? Um, bien, o maratón maratón maratón correr, ¿verdad? Y entonces le estás agregando un poco más, estás agregando algo de marca, y estás haciendo que la gente se interese más porque me parece que lo que hizo Apple es muy amable pero no una locura, interesante. Como, aquí estaría como carrera de maratón. Guau. Sí, vi el video Marathon Run. Vi el reto que hicieron, y seguí adelante. A lo mejor es como un video que te pones en tu teléfono y luego sales a correr y los estás escuchando. Es como tener a alguien como un amigo corriendo contigo o algo así. No lo sé, escupiendo ideas diferentes. Pero recuerda, cuando estás creando tal cosa, creando etiquetas, por ejemplo, estás creando pautas para quien quiera que vaya a agregar el contenido. Lo más probable es que no vayas a agregar el contenido tú mismo, ¿verdad? Entonces hay que tenerlo en mente. Cuando estás haciendo un diseño así, estás sentando las bases para que alguien más entre y llene el contenido. Si no tenías la etiqueta de principiante o la etiqueta de dificultad incluida en absoluto, probablemente no se hubiera hecho. Quien lo llenó habría dicho, esto no es algo que sea necesario y no lo habrían hecho. Pero eso habría sido negativo para el usuario. Bien. Entonces otra cosa que me acaba de pasar por la cabeza es el tiempo. Sabes, ¿cuánto tiempo tengo? Si quiero ir a un maratón ¿no soy ninguno? ¿Esto es de 2 horas? 5 horas, 1 hora? No lo sé. Como, ¿qué tipo de video voy a ver ahora? Eso es muy importante agregar. Entonces yo diría, como, copiar y pegar aquí y agregar duración. Entonces podrías decir que podrías decir, como, esto son 20 minutos o algo así, o podrías, ya como, esto son 20 minutos o algo así, sabes, dar la duración más exactamente y decir, ya sabes, esto es 1020, ¿verdad? Algo así. Cosa de esa manera. Pero intentemos ver cómo podemos formatear eso de la mejor manera. Escojamos un color aquí. A lo mejor éste. No quiero editar aquí nada, así que no me meto con los componentes así que editaré todo directamente aquí. Bien. Entonces ahora tenemos el tiempo, pero estoy pensando que tal vez sea más fácil si escribimos 10 minutos o algo así. Porque es más difícil para la gente decir 1057. Oh, eso es técnicamente 11. No 10 minutos, 11. Entonces estás haciendo que calculen las cosas. No, solo di 10 minutos, ¿sabes? Y aún mejor si son 11 minutos, no digas 11 minutos, digamos 10 minutos. Simplemente redondearlo para que se vea como un pequeño número bonito. ¿Bien? Otra vez, como dije, aquí, estás agregando más valor. Aquí hay mucho valor. Para quien lo vaya a llenar, ahora encuentran un lugar para agregar el título. Tienen un lugar para sumar el tiempo y la dificultad. ¿Qué más podría necesitar alguien? Es decir, no estoy muy segura. Ahora sigamos adelante y agreguemos uno para esta última cosa aquí. Podríamos decir HIIT intensivo. HIT y conviértelo en una insignia profesional. Quiero decir, se llama placa o chip o como quieras llamarlo. Entonces intentemos encontrar algunas fotos. Normalmente voy a Pexels o hay otro sitio web llamado Free Podríamos simplemente escribir en Yoga, por ejemplo. Sólo voy a tomar las fotos más fáciles que pueda encontrar. Es decir, esto no se parece mucho a la lección. Ahora, como puedes ver, puedes agregarlo directamente a la instancia. Ya lo he mostrado antes, pero solo lo copias como relleno. En lugar de copiarlo aquí, no cometas ese error. Si copias esto aquí, no siempre funciona, copia el relleno y luego pégalo aquí. Entonces puedes eliminar los otros rellenos antes de él. Ahora lo mismo con HIIT, no estoy seguro de lo que es, para ser honesto Creo que es un entrenamiento intensivo de alta intensidad o algo así. Pero llevemos a este tipo aquí. Otra cosa que es importante cuando estás haciendo esto, como puedes ver, estamos haciendo las cosas muy rápido, pero también sería genial si puedes configurar un estilo específico para quien vaya a llenar el contenido. Ya sabes, elegir imágenes que sean brillantes, por ejemplo, elegir imágenes que sean, no estoy seguro de imágenes que tengan buena iluminación, buena calidad, y esto realmente podría recorrer un largo camino. Entonces voy a reemplazar esta imagen de aquí y voy a poner la intensiva aquí porque su entrenamiento se ve un poco más fácil, pesar de que están haciendo lo mismo. Pero se le quita la camisa y está sudando. Siento que realmente lo está pasando y también está oscuro, así que quiero mantenerlo fuera de la interfaz de usuario aquí. La carrera de maratón realmente encaja, pero déjame hacer una mejor. Así que haz clic derecho en Copiar imagen. Así, la imagen no viene con la más alta calidad, pero para mí, está bien. Ahí vamos. Ahora tenemos estas imágenes. Está lleno, no genial. Como ya he dicho, se debe tratar de dar ejemplo. Pero aquí estamos tratando de hacer esto muy rápido, pero idealmente deberías dar un ejemplo de qué tipo de imágenes se deben agregar aquí y cuáles no deberían ser. Lo último de lo que quiero hablar es quizás agregar un botón de reproducción. Normalmente me gusta hacer esto por mi cuenta. Yo solo sostengo turno y me aseguro de que tengan el mismo ángulo. Y luego lo meto un poco, lo estiro y le doy un relleno. Ahora podemos copiar esto y venir aquí. Este es el beneficio de agregar esta imagen no como una imagen, sino como un marco porque entonces puedo agregarle cosas como un botón de reproducción. Ahora, agregar un enorme botón de reproducción ocupa mucho espacio allí. Yo recomendaría redimensionar tal vez haciéndola un poco redondeada en las esquinas. Hoy en día, este es más el estilo. Puedes agregarlo en una esquina tal vez, darle un poco de sombra, solo para que sea visible. podrías hacerlo transparente, un poco no demasiado. Podrías ponerlo en el medio. Realmente depende de ti, pero deberías ver qué funciona mejor porque diferentes plataformas lo hacen de manera diferente. Y esto realmente muestra a la gente que esto no es una imagen, sino que esto es más bien un video. Entonces podríamos ponerlo en el medio, para ser honestos, pero tratar de no tomar demasiado de este espacio. Bien, entonces, ¿qué podríamos hacer también aquí en esta sección? Una cosa que estoy pensando hacer es que a lo mejor podríamos agregar artículos o algo así, consejos, no estoy seguro. A lo mejor podría tratarse de nutrición. Quiero decir, aquí está el entrenamiento, pero vamos a hablar de nutrición. ¿Es esta app nutricional? No lo sé. Pero agreguemos el título. Conocimiento para ti o artículos para ti o simplemente podríamos decir para tu información. Lo importante es mantener el tono interesante. Quiero decir, a veces, ya sabes, aquí es conversacional. Tus estadísticas de hoy inician actividad por ti. Aquí están los entrenamientos, es un poco más formal y luego aquí para tu información. No es tan formal, pero también es un poco, conversacional Pero todo está bien. Solo asegúrate de que el tono no esté por todas partes. Entonces ahora vamos a hacer un elemento diferente porque queremos asegurarnos de que se entiende que se trata de un artículo no solo de un video. Sólo voy a crearlo y no hacerlo horizontal, perdón, no vertical, sino más bien horizontal porque eso se entiende más como no video. Esto es un formato real, este es un formato Tik Tok, y esto no lo es. Ahora estoy tratando de traerlo aquí para ver la talla solo para asegurarme de que la talla sea buena. Entonces lo que podría hacer es poder copiar estos elementos aquí. Y sólo voy a traerlos aquí. Poner estos en un Auto Layout y luego poner esto en un Auto Layout, y luego podríamos hacerlo de esta manera y voy a hacer este componente y voy a llamarlo artículo. Lo mismo, cópielo. Tráelo aquí, pega, vuelve a pegarlo, hazlos un Auto Layout, hazlo horizontal, y vamos a agregarlo. Ahora, déjame poner estos menús y esas cosas, ponerlos en la parte superior para que no nos molesten Vamos a darle a esto un color diferente así que quede claro y voy a dejar esto abajo. Ahora podemos trabajar en esto, hacer de esto un Auto Layout, darle ocho espaciado. Ahora dice el nombre del video, pero debería decir el nombre del artículo. Vamos a cambiar el nombre de ese artículo, la duración. Me di cuenta aquí las duraciones no las variamos, así que hazlo así y luego para tu información Aquí tenemos múltiples artículos. Como puedes ver, lo estamos manteniendo simple con los elementos. No tienes que hacer todo lo posible, pero realmente depende del diseño y el estilo. Aquí usamos muchas sombras. Podríamos tratar de integrarlos. Podríamos intentar integrarlos a nuestro diseño. Entonces déjame agregarlos aquí a estos le agrega algo de profundidad, le agrega un aspecto agradable, para ser honestos. Pero no estoy completamente convencido, pero creo que está bien porque de esta manera podemos agregar algunos de los elementos que ya teníamos, entonces ¿por qué no? Aquí tenemos múltiples artículos, por lo que podemos escribir solo algunos ejemplos. Pero antes de hacer eso, solo asegúrate de que el espaciado sea similar. Aquí son ocho. También podríamos hacer ocho aquí, y luego podemos simplemente anotar dietas proteicas. No me gusta la comida preparando uno a uno. Asegúrate de que el texto ya esté estirado. Entonces comida preparando uno oh uno, y podríamos decir 5 minutos de lectura Me comí esta información que mucha gente da 5 minutos leídos. No va a tomar demasiado de tu tiempo, así que no te preocupes por ello, ¿de acuerdo? Así que eso es genial. Aquí tenemos preparación de comida. Bien, entonces tal vez solo podamos decir apps o entrenamientos. Bien. Entrenamientos para abdominales. Cinco entrenamientos o abdominales, y luego podemos decir, esto es una lectura de 10 minutos o 3 minutos. No lo sé. Entonces aquí al final, podemos decir cardio o decir consejos de cardio de profesionales. No lo sé. Quiero decir, la gente no puede leerlo de todos modos, y luego diremos que esta es una lectura de 10 minutos, y luego seguiremos adelante y escogeremos las fotos. Así que solo podemos escoger una foto de alguien corriendo para que pueda simplemente tomar esta foto. Ahora, como esto es vertical, tienes que asegurarte de que se va a cortar un poco. Tienes que asegurarte de que el foco esté en el medio para que cuando se corte o redimensione quede bien Aquí tenemos consejos de cardio. O sea, no es visible de todos modos, así que no importa tanto. Entrenamiento para abdominales, digamos abs. Entrenamiento de abdominales o veamos a alguien entrenando sus abdominales. Bien. Ahí vamos. Y luego tenemos comida para preparar. Mo prep. Esto se ve muy bien. También se ve delicioso. Bien. Entonces vas a tomar esto, ponerlo aquí, y listo Esto se ve muy bien. Entonces ahora tenemos una página llena. Lo último que podríamos hacer es que quizás podamos reemplazar, como, la imagen aquí porque ya la hemos usado muchas veces. Entonces agreguemos un artículo diferente. Vamos a escribir el trabajo así que copia esto, pégalo, y puedes ponerlo aquí. Podemos ir a recortarlo tal como lo hicimos antes, y solo voy a redimensionarlo mientras sostengo a Shift, poner a este tipo aquí solo para que sea visible. Eliminar la imagen. Y ahora sólo voy a asegurarme de que esté aquí abajo. Como dije, hay rellenos. Puedes tener múltiples rellenos, así que vas a asegurarte de que estén ordenados de la manera correcta para que puedas obtener este degradado lineal la manera correcta que quieras. Y lo que podemos hacer aquí es que podemos cambiar todo este color de todos modos. Azul y solo pega el código hexadecimal aquí. Pero esto no me gusta. No me gusta cómo se ve ahora mismo. Podemos hacerla luz dura, pero tal vez 50%. Entonces podemos hacer que todo este texto sea blanco. Mira qué bien resultó ahora, cambiamos algunas cosas y ahora se ve mucho mejor. Entonces en vez de, no sé, tal vez podríamos poner números. Pero pongamos aquí también el número. Voy a decir mejor manera o perder peso levantando a través de pesas. Eso suena bien. Entonces vamos a dejarlo así, ahora tenemos una segunda pantalla llena de información, llena de contenido con todo tipo de posibilidades. Es algo completamente diferente. Aquí, lo que tenemos es un dashboard. Te da alguna información. Sugiere algún contenido para ti. Es genial. Pero aquí tenemos mucho más incluido. Nosotros ya sabes, etiquetas donde puedes filtrar. Puedes escoger ciertos entrenamientos. Puedes tener para tu información. También tienes contenido para ti. Sabes, hay muchas cosas que podemos mejorar a esto solo dejándote saber. Como, por ejemplo, con todos los entrenamientos, podemos tener un botón que diga todos los entrenamientos o más entrenamientos. Lo mismo con para información. Podríamos tener eso. También podríamos tener una función de búsqueda justo en la parte superior, en realidad, podemos agregar una función de búsqueda. Vamos a hacerlo. ¿Por qué no? Es decir, es muy fácil. Simplemente agregaremos un marco así. Le vamos a dar un color, darle 16, um, radio de esquina, agregarlo aquí. Podemos hacerla más de 16, podemos hacerla 36, y luego es totalmente redonda. Entonces podemos agregar algo de texto aquí y decir buscar entrenamientos, artículos, videos, no lo sé. Haz que esto entre y hazlo un poco más ligero. Y así, tenemos una función de búsqueda aquí. Y si, es tan fácil como eso. No tiene por qué ser súper duper complicado. Pero aquí tenemos una interfaz de usuario realmente agradable, así como así, tenemos una segunda pantalla. Muchas gracias por escuchar, y nos vemos en la siguiente lección. En la siguiente lección, estaremos hablando de prototipado. Entonces eso significa conectar la primera pantalla a la segunda, además de hacer algunas interacciones aquí y allá para que se sienta como una aplicación real. Quiero decir, ahora mismo, no puedes sobre nada, no puedes ver nada, ni siquiera puedes desplazarte. Entonces vamos a tener que averiguarlo en la siguiente lección. Bien. 16. Conceptos básicos de la creación de prototipos: Hola. En esta lección estaremos hablando de la parte de prototipado de Figma. Ahora, hemos hablado mucho del lado del diseño porque en realidad está muy lleno de características y flujos y demás La parte de prototipado puede ser un poco más complicada, pero no es tan extensa como la parte de diseño Por lo que debería ser más fácil o más rápido de explicar, pero necesitas practicar un poco más para acostumbrarlo. Entonces, cuando hablamos de prototipado, nos referimos a cosas diferentes Ahora bien, este diseño que tenemos aquí se llama técnicamente prototipo. Se le podría llamar un wireframe o un prototipo. Pero cuando hablamos de prototipado, hablamos de jugar con interacciones y micro interacciones Entonces, cuando haces clic en un botón o cuando pasas el cursor sobre un botón, y tiene una forma diferente o un color diferente o un lo que sea diferente, cuando haces clic en un botón y te lleva a otra página, todas estas son interacciones y micro interacciones , ¿bien? Cuando te desplazas o cosas así, cuando te desplazas hacia abajo y te desplazas hacia la derecha, izquierda, lo que sea, abres un video. Todas estas son interacciones. Eso significa que el prototipo o el diseño deja de ser una imagen estática. Ahora mismo, es sólo una imagen. Ya lo ves, se ve bien. Podrías haber diseñado esto en otro programa. Podrías imprimir esto y ya está. Pero lo que nos hace diferentes es que a lo mejor puedas dar click y hacer click en algo y obtener un menú. Puede hacer clic en capacitación e ir a la página de capacitación. Eso es exactamente de lo que vamos a estar hablando hoy. Entonces, primero de lo que queremos hablar, hay que saber que en el panel de la derecha es donde encuentras los ajustes de prototipado, ¿bien? Entonces, cuando haces clic en cualquier ítem, ahí es cuando obtienes algunas opciones de creación de prototipos aquí Y vamos a estar hablando tres cosas principales interacciones aquí mismo , posición y desbordamiento. Entonces comencemos con las interacciones porque esta es la característica más utilizada. Entonces hablemos de eso. Entonces como decíamos, la interacción es cuando haces clic en un botón y hace algo o pasas el cursor sobre él o interactúas con él en cualquier capacidad, y hace algo Bien. Entonces podemos hacer esto solo con el menú. ¿Bien? Empecemos por el menú. Tenemos resumen, amigos y entrenamiento, y lo más sencillo que deberías poder hacer es dar clic en el entrenamiento, y luego vas a la página de entrenamiento. Entonces podemos hacer esto directamente aquí, pero preferiría que lo hicieras del lado de los componentes. Así que se conecta a cada página, a cada instancia. Entonces lo que vas a hacer es que vas a llegar al componente o a la parte que quieres que sea interactiva. Entonces en este caso, es este botón Napbar. Para que puedas ir y dar click desde aquí a Interacciones para agregar una. O lo que podrías hacer es simplemente pasar el cursor sobre él y encontrarás estos botones Yo sugeriría que lo hicieras y luego sostengas esto y luego va a salir con una flecha. Para el entrenamiento, lo vas a llevar a este marco y lo vas a dejar ir. Tan pronto como lo hagas, va a configurar la información algunas configuraciones para ti. Lo primero es el detonante. Eso significa que cuando haces clic en tap, cuando tocas esto, va a tener una acción. Esa acción es navegar hasta que haya un destino, que es la página de entrenamiento. Debido a que sacamos esta flecha aquí, ya está entrando toda esa información para y luego es solo preguntarte ¿qué tipo de animación quieres que sea? En este caso, es instantáneo y podemos convivir con eso. Vamos a probarlo. Veamos si realmente funcionó. Ahora mismo, vamos a abrir esta página. Entonces vamos a dar click en el entrenamiento. Y como pueden ver, lo que pasó, inmediatamente nos llevaron a la página de entrenamiento, vamos a repetirlo. Entrenamiento BAM, fácil. Eso es. Si haces clic en cualquier otro lugar, no hace nada. Si haces clic en Ninguna parte, te muestra qué elementos son interactivos y en este caso, solo está aquí. Das click aquí, estás ahí B. Ahora hay otras opciones, vengamos aquí. Puedes configurarlo para que el disparador se pueda arrastrar cuando arrastras este botón, cuando pasas el cursor sobre él o mientras presionas solo mientras presionas, si haces una tecla o gamepad, como si presionas un botón, si presionas la letra S o R o algo así Aquí hay más opciones, pero te sugiero que te quedes con estas primeras porque son las más comunes. Untap drag, mientras se cierne, y en su mayoría los tres primeros son muy relevantes y muy usados Cuando se trata de las animaciones, hay diferentes animaciones. Una de ellas es disolver y Figma te da un adelanto de cómo se ve Al hacer clic en él, hace esto. Agregan algunos ajustes más cuando pones animación, que está flexibilizando Esto significa el flujo de la animación, pero esto es un poco más avanzado y la duración. Esto es ahora 300 milisegundos. También hay vamos a ver cómo se ve disolver. Entonces cuando vamos aquí, damos clic en él. Como ves es algo así como un fade out fade in animation. Simplemente se disuelve en él. Y luego está Smart Animate, que es realmente genial porque se encarga de muchas cosas Si hay un texto o un objeto que pasó de arriba a abajo, se lo va a llevar contigo . Veamos cómo hace eso. Como puedes ver, esta tarjeta bajó porque reconoció que estamos usando el mismo elemento y estas fichas subieron. Ver. Pero esta es una animación realmente difícil poner para convertirse en una aplicación. Entonces te aconsejaría no abusar de esto. Quiero decir, en tal caso, cuando estás navegando, es muy difícil, y tampoco tiene sentido. Es decir, ¿por qué quieres que la gente vea que este elemento bajó y estas fichas subieron? Porque técnicamente ahora son elementos de diseño diferentes. No deberían no tener ninguna relación con eso, ¿de acuerdo? Entonces no te sugiero que hagas esto cuando lo estés haciendo entre pasar de un cuadro a otro. Hay otra opción, que es que hay otras animaciones, entrar, entonces se mueve así, se mueve hacia fuera, empuja. Ahora bien, en este caso, realmente recomendaría animación push porque vas del lado izquierdo al lado derecho. Entonces está siendo empujado, pero debes configurarlo para que sea la dirección correcta. En este caso, queda, así que va así. Vamos a enumerarlo ahora. Das click en él, y te lleva así. Bien. Entonces es realmente genial. Funciona muy bien y lógicamente tiene sentido. Hace que la gente entienda que oh esto está a la izquierda, esto es a la derecha. Pero como puedes ver, incluso el menú también se está quitando, lo cual no es lo ideal. Pero por eso ahí está este pequeño botón, esta casilla de verificación Da click en él y animará las capas coincidentes. Eso significa que si hay una capa coincidente como esta, la va a animar. Se va a hacer smart animate para ello. Veamos qué significa eso aquí. En este caso, das clic en el entrenamiento como puedes ver, todo se movió aparte de las capas coincidentes. En este caso, la capa coincidente es esta justo aquí. Yo no cambié. Pero también, de nuevo, esta tarjeta y estas fichas, lo cual es lamentable, pero hay una solución para ello. Los arreglos, vas a ir a los frames y vas a cambiar su nombre porque aquí, este frame se llama frame 24 y aquí este frame se llama 24 también. Lo que vas a hacer es que puedes simplemente decir 24 X y lo mismo aquí para ti, 25 X, o podrías darle un número diferente. Ahora veamos. Perfecto. Absolutamente perfecto. Como puedes ver, todo empujó, cómo empujar la animación, que no sea el menú. Eso es exactamente lo que queremos que esté sucediendo. Y sí, así como así, tenemos una interacción muy agradable para nosotros. Ahora, podemos aplicar la animación opuesta, y si quieres, puedes configurarla tú mismo o simplemente puedes copiarla desde aquí, dar clic en este elemento y pegarlo. Pero en lugar de que la flecha venga aquí, puedes hacer que venga aquí. Entonces ahora vamos a probarlo. Bien, hay un problema. Espero que lo hayas notado y es la dirección. Sólo vamos a invertir la dirección, y ahora vamos a ver. Perfecto. Lo bueno de esto es que ahora hay un flujo lógico. O sea, preferiblemente, deberíamos tener panel de un amigo en el medio. Pero ahora mismo, aún no hemos prototipado eso. No lo hemos diseñado. Simplemente pasas de resumen a entrenamiento así como así. Y hay mucho que tiene sentido. Es un flujo lógico de izquierda a derecha, de derecha a izquierda. Y a la vez, el menú se queda ahí fijo y eso es absolutamente perfecto. ¿Bien? Entonces esa es una manera de animar las cosas Hay otras cosas que hacer, otras cosas que quizás puedas hacer para animar o para crear prototipos, como decimos Entonces una de estas cosas es el desplazamiento. ¿Bien? Entonces, cuando lleguemos a estas páginas, lo que podemos hacer para habilitar el desplazamiento es que solo podemos derribar esto. Y luego cuando vayas a esta página, simplemente puedes desplazarte hacia abajo. ¿Bien? Entonces hay otra manera de hacer esto. Cuando traes esto de vuelta y dices, este es el tamaño del iPhone, así que quiero mantenerlo exactamente del mismo tamaño, vas a ir al panel de prototipado Vas a elegir la página. Al igual que todo el marco, vaya al panel de prototipos y justo alrededor del comportamiento de desplazamiento, va a ver desbordamiento Desbordamiento significa que el contenido que está fluyendo sobre el marco como este, por ejemplo, vas a decidir ahora mismo que es como configuración predeterminada no hay desplazamiento, pero puedes decidir si quieres desplazamiento horizontal, vertical o en ambas direcciones Piensa para ti mismo, ¿se supone que la persona en qué dirección se supone que debe desplazarse? Bueno, verticalmente. Entonces cuando haces esto, bajas y ahora habilitas el desplazamiento Puedes desplazarte hacia abajo. No realmente arriba. Se puede estirar, pero no se desplaza. Pero lo genial de esto es que puedes tener muchas cosas diferentes, pero están ocultas y luego puedes desplazarte hacia abajo hasta ellas. Pero esa es una manera y como dije, si restablecemos esto, una forma sencilla es simplemente extenderla mientras esté el marco, y luego puedes desplazarte hacia abajo. Practicemos lo mismo en esto aquí mismo. Nos gusta un slider o un carrusel aquí donde se supone que debes ir a la derecha Podemos hacer lo mismo con el desplazamiento. Entonces solo escoge el marco que contiene los artículos, y tienes lo mismo aquí, desbordamiento, solo hazlo horizontal. Ahora veamos si funciona. Ahora estamos tratando de desplazarnos, pero no está funcionando, y hay una razón porque esta configuración de desbordamiento solo funciona si el contenido fluye sobre el marco. Se está volviendo demasiado, está fluyendo por encima de los límites. Como puedes ver aquí, los límites, todo el contenido está dentro de los límites. Es decir, no se puede ver el resto de esto, pero está dentro de la caja. La solución fácil es solo minimizar esta caja, hacerla más pequeña para que se ajuste al marco que sea visible. Ahora esto se considera desbordamiento. Está fluyendo sobre él. Ahora puedes desplazarte, a la izquierda en la dirección que quieras. Puedes practicar esto para diferentes. Yo también puedo hacer esto aquí, horizontal y luego hacerlo más pequeño y luego podemos desplazarnos. Lo mismo aquí. Lo mismo aquí, horizontal y hazlo encajar. Ahora todo es desplazable. Entonces como mencioné, podemos hacer que todo esto también más grande y luego podemos desplazarnos hacia abajo. Todo por lo que somos capaces de desplazarnos a la perfección. Pero hay un problema. Un pequeño problema. Bueno, esto es un poco más avanzado. Pero si notas el menú se está desplazando, ¿verdad Y probablemente tengas una idea de cuándo estás al teléfono y hay un menú, algunas cosas en realidad no se desplazan hacia abajo, algunas cosas permanecen fijas, y eso es lo que normalmente esperarías, no es que subirían así. Deberían permanecer en el mismo lugar. Hay una manera fácil de hacer esto, la manera fácil es llegar a estos elementos aquí mismo, y luego los vas a poner en un marco. Voy a agregarlos juntos, y los voy a poner en un Auto Layout manteniendo presionada Shift y A. Voy a hacer que ignoren el layout de nuevo. Porque los pusieron en su lugar, pero no queremos que los vamos a traer de vuelta a su lugar. Sólo vas a ir al prototipo a la posición y luego hacer clic fijo. Ahora vamos a probarlo. Ahora lo tenemos aquí, y como pueden ver, ahora está arreglado en su lugar. Cuando subes y bajas, se queda en su lugar y tiene este efecto de vidrio realmente genial por todo el lugar, así así, tú decides dónde va a estar y lo arreglas. Dices que la posición es fija. Ahora podemos hacer lo mismo aquí. Vamos a convertirlo en un Auto Layout. Y luego le vamos a decir que ignore el Auto Layout y luego lo vamos a llevar a la misma posición. Podemos copiar la posición Y aquí y justo pasarla aquí para ser exactos y luego ir al prototipo y luego arreglarlo. Ahora está en mal estado. La razón es que ahora funciona como un vamos a ver. Funciona cuando vas ahí, pero estropeamos la animación, y te diré por qué y cómo podemos arreglarlo Bien. Pero ahora ambos están fijos, lo cual es perfecto. Pero lo que se estropeó es que ahora estas no se consideran las mismas capas No se consideran coincidentes. Y la razón es porque ahora tienen nombres diferentes, así que realmente hay que prestarle atención a eso. Aquí dice 38 y aquí está 37. Entonces una solución rápida es que solo les das el mismo nombre, que es frame 37 o podrías llamarlos Navbar o lo que quieras Y luego ahora son identificadas como capas coincidentes por Figma, funciona perfectamente Y como mencioné, puedes desplazarte por todo, todo es desplazable Estas son las microinteracciones, las animaciones que realmente hacen que una aplicación sea súper inmersiva y atractiva Así que asegúrate de que intentes practicar eso por tu cuenta, trata de entenderlo. No queríamos complicar demasiado las cosas para ti porque la creación de prototipos no es lo más fácil de aprender Por eso hice esto lo más simple posible, pero hay muchos más escenarios, muchas más posibilidades que puedes aprender por tu cuenta. Y realmente podrían llevar tu juego al siguiente nivel. Adelante, pruébalo, prueba diferentes prototipos, animaciones, interacciones, lo que sea que tengas esto Gracias por escuchar, y nos vemos en la siguiente lección. 17. Vista previa de tu prototipo: Entonces ahora hemos aprendido mucho sobre los conceptos básicos del diseño de prototipos, colores y tipografía y muchas cosas diferentes Pero al final del día, lo que realmente queremos hacer o lo que tenemos que hacer es previsualizar adecuadamente nuestros diseños, verlo por nosotros mismos, así como mostrarlo a otras personas. Hay muchas formas diferentes de hacerlo, pero todas son sencillas, así que no te preocupes, y te las voy a mostrar. Ahora, a lo largo del curso, ya hemos visto un par de estas formas, pero solo quiero hacer un poco de revisión. Entonces, la forma más fácil y la forma más rápida de mirar y previsualizar tu prototipo, es hacer clic en el fotograma que quieras ver y luego seguir adelante y presionar el botón de visualización Esto te permite presentar el diseño que tienes aquí. No importa qué tipo de prototipo, qué tipo de marco eliges, lo va a mostrar. Esa es la principal manera de hacerlo. Pero hay diferentes formas de hacerlo. Ahora, una cosa que puedes hacer, sobre todo si tienes una pantalla más grande, puedes elegir la opción de vista previa. Lo que eso hace es que abre una pantalla de teléfono justo al lado tuyo para que puedas ver el diseño mientras lo estás haciendo. Como estoy diseñando aquí y puedes cambiar el tamaño de esto por cierto, e incluso puedes intentar asegurarte de que ahora mismo estoy poniendo mi teléfono en la vida real Lo estoy poniendo al lado la pantalla para asegurarme de que el diseño encaje. Ahora me puedo imaginar como si este mi teléfono y puedo probarlo y decir, ¿puedo leer el texto? ¿Es legible, son las cosas propias, bonitas, lo que sea. Y al mismo tiempo, puedo cambiar las cosas directamente en el archivo de diseño, lo cual es bastante genial. Esa es otra forma de hacerlo. Pero también hay algo llamado flujos. Cuando haces clic en un marco y vas a la pestaña prototipo, tienes algo llamado punto de inicio de flujo. Ahora mismo, esto es considerado por Figma como un flujo y se llama flujo uno Es un punto de partida. Cuando vamos a previsualizar, tenemos aquí este pequeño panel que puedes sacar y dice, Aquí están tus flujos. Este es el primer punto de partida que elegimos. Aquí hay otro, pero creo que esto se cometió por error o Figma quizá lo identificó erróneamente. Esto probablemente esté aquí. El Navbar, podemos eliminarlo de aquí. Pero para crear un flujo, vas a la página que quieres mostrar y puedes dar click aquí. Puedes tener un punto de partida de flujo y puedes llamarlo Página de formación, por ejemplo. Te dice qué marco es este. Puedes cambiarlo con solo elegir desde aquí y también puedes darle un poco de descripción. Entonces puedes decir aquí, los usuarios pueden informarse y ver videos o artículos relacionados con la capacitación. Bien. Entonces cuando vayas aquí, puedes hacer clic en él, y luego te dice exactamente te da una descripción para explicártelo. Esto obviamente no es para ti, sino tal vez para compañeros de equipo o para usuarios que están probando, personas que están probando este diseño para que puedan entender Pero creo que las mejores pruebas se realizan sin dar descripción, sin dar información. Quiero decir, quieres que la gente entre y experimente esto de primera mano sin instrucciones adicionales ni nada. ¿Bien? Pero así es como puedes crear estos puntos de partida de flujo, y puedes editarlos. Y cuando deseleccione todo, encontrará sus flujos aquí También puedes cambiar los nombres y decir, bueno, esto es dashboard o página de resumen. Puede cambiar las posiciones, y también puede previsualizarlas directamente, copiar el enlace de flujo, marco. ¿Puedes ver qué marco es ese? Oh, bien, este. Eso. Todo bien. Aquí hay muchos ajustes y opciones útiles que te ayudan a descubrir tu diseño. Pero estas son las principales formas en las que puedes previsualizar el prototipo trasero. No olvides, por supuesto, que ya hemos hablado de esto, los ajustes de prototipado Lo tenemos aquí configurado como iPhone 17, pero puedes cambiar el marco o simplemente no puedes tener dispositivo. Solo hay un problema cuando no tienes dispositivo es la longitud completa se mostrará que de una manera muy desnuda, así como así. Esto puede ser un poco poco poco atractivo. Así que asegúrate de que si estás mostrando esto para teléfonos móviles tengas un marco, y de todos modos sea inmersivo para mostrarlo de esa manera Pero en caso de que tengas que hacerlo o quieras mostrarlo de esta manera, hay algunas configuraciones adicionales de creación de prototipos cuando estás aquí en esta vista Así que simplemente haz clic en este botón, y te va a dar algunos ajustes diferentes. Entonces hay tamaño real. Así que esto te muestra, ya sabes, con el tamaño o el supuesto tamaño del marco, ¿de acuerdo? Hay ancho y alto de ajuste. Entonces esto lo hace para que puedas ver todo el marco de principio a fin. Realmente no recomendaría esto. Lo que recomendaría es el ancho de ajuste. Entonces esto es muy similar en este momento, en este caso, al tamaño real, pero se ajustaría al ancho de una manera donde no es, ya sabes, exagerado También hay responsive pero si no has diseñado tu prototipo para que sea responsive, entonces va a verse muy distorsionado así Yo tampoco recomendaría esto. Sólo si has hecho tu diseño de una manera responsiva. También hay pantalla de relleno, y de nuevo, esto no se ve muy bien, pero todo depende de tus propósitos, lo que intentas hacer, y cómo se ve tu diseño, qué tamaño tiene, y así sucesivamente. Yo recomendaría simplemente jugar con estos y solo ver qué funciona mejor para ti. Para mí, ahora mismo, esto funciona bastante bien porque se puede ver la navegación. Se puede ver un poquito debajo de él, pero no demasiado. Pero no recomendaría el ancho de ajuste la noche. Eso no es genial. Entonces estas son solo algunas configuraciones de prototipado diferentes que pueden ayudarte a previsualizar correctamente tus diseños porque ese es uno de los pasos más importantes Yo diría previsualizar tu diseño y compartirlo. Estos son pasos importantes porque si tienes un diseño impresionante increíble, y luego no lo muestras correctamente, y la gente lo ve de una manera distorsionada como esta vista que acabamos de ver, entonces no va a venir muy bien a través Entonces yo diría, asegúrate cuando lo estés mostrando que estás bien preparado y todo parece que está en el tamaño adecuado y no estirado como esta imagen. Entonces esto es básicamente cómo previsualizar tu prototipo. Gracias por escuchar, y nos vemos en la siguiente lección. 18. Compartir y exportar: Así que además de previsualizar tus prototipos, otro paso importante es compartir y exportar tu trabajo Como mencionamos, este es un paso importante porque es cuando llegas a mostrar tu trabajo y lo compartes con personas, clientes, con compañeros de trabajo. Entonces es importante que lo hagas bien, obtengas el derecho de exportación , ya sabes, les das un enlace para compartir que puedan ver correctamente y que no se vea mal ni involuntaria de ninguna manera Así es como puedes hacerlo de manera muy sencilla. Ahora, comencemos con compartir porque es un poco más fácil ya que tienes un botón de compartir muy grande a la derecha. Entonces hay dos tipos diferentes de compartir. Puedes compartir un proyecto para ser editado, y es por ello que normalmente Figma tiene un archivo de edición, y hay una pestaña de edición, como puedes ver este icono aquí, y luego tienes una pestaña de visualización o vista previa Entonces, cuando haces clic en Compartir aquí, estás compartiendo el archivo como un archivo de diseño. Así que ten cuidado porque podrías estar compartiéndolo pensando que se lo estás dando al cliente para que lo vea, pero luego van a ver toda esta complicada vista. Van a estar abrumados y van a ver cosas que tal vez no deberían ver probablemente Bien. Entonces este enlace aquí es para compartirlo con la gente para ver el archivo o tal vez incluso convertirse en colaboradores o comentar. Puedes ver la configuración aquí, así que quién tiene acceso. Entonces sólo los invitados. O cualquiera, tenga cuidado al cambiar estos ajustes. Puedes hacerlo configurarlo para que cualquier persona en equipo proyecte y puedas ver a las personas que tienen acceso, por ejemplo, aquí, tengo acceso. Entonces también te muestran algunas otras opciones útiles como copiar Dvmodlink puedes enviar a alguien solo un Esto significa que si alguien es desarrollador, solo ve las cosas que son relevantes para ellos. No ven todas estas opciones de diseño. También puede copiar el enlace de prototipado o el enlace prototipo Esto es para que ellos lo previsualicen y puedas publicarlo en la comunidad, obtener código incrustar, pero estos son un poco más avanzados. Pero aquí está todo lo que necesitas. Puedes copiar el enlace desde aquí, cambiar el acceso o copiar Dvmodlink o tinta prototipo Otra cosa que hacer es ir a la pestaña de vista previa, y esto es lo que me encanta hacer porque aquí no puedo equivocarme. Basta con hacer clic en Compartir Prototipo. No es compartir igual que aquí. Es el prototipo Share específicamente. Aquí es donde puedes decidir, bien, copiar enlace y ¿ son solo los invitados o es alguien con un enlace? Y aquí realmente no se puede cometer ningún error. Pon cómo puedes compartir un proyecto, pero hay que tener en cuenta, no estás compartiendo un archivo aquí, no lo estás compartiendo en forma de archivo, sino más bien como un enlace web. Es un enlace basado en la web, por lo que tienen que tener Internet. Tienen que tener un navegador el que puedan navegar por Internet. Quiero decir, veamos cómo se ve eso, voy a compartir el prototipo, y voy a hacerlo cualquiera. También puedes tener una contraseña, configurar una contraseña para ella, copiar el enlace, y luego pegarla y luego tienes acceso. Creo que va a funcionar porque ya estoy conectado como yo mismo, así que tengo acceso y lo veo con los ajustes que se guardaron. Asegúrate de que los ajustes que tenías eran adecuados y que estás en el flujo correcto. Ahora hemos terminado de compartir o más específicamente compartir un enlace. Ahora hablemos de exportar. Ahora hay diferentes formas de exportar. Ahora, puedes exportar un elemento o un fotograma completo ahora hay diferentes formas de exportar tu trabajo. Ahora, puedes exportar un elemento por sí solo, o puedes exportar un fotograma completo, o puedes exportar todo el proyecto, todas las pantallas. Déjame decirte cómo funciona eso. Es súper simple. Vas a ir a la pestaña de diseño y luego vas a hacer clic en un marco cuando bajes, hasta el final, vas a ver exportar. Cuando hagas clic en él, te van a dar un par de opciones. Se puede cambiar de PNG a JPEG, SVG o PDF. Puedes elegir cualquiera de ellos, lo que es genial es cuando haces clic en él, eliges PNG, también puedes elegir la escala. ¿Quieres que sea exactamente del mismo tamaño o quieres que sea el doble del tamaño? Puedes ver el tamaño aquí es 402 por 963. Puedes hacer un punto X, dos X, cuatro X, y todas estas diferentes opciones, básicamente te permiten hacerlo mucho más grande porque a veces cuando exportas algo como imagen, la calidad no está exactamente ahí, no es tan buena. Usted solo para estar seguro, exporte 1.5, dos X, tres X, solo para asegurarse de que la calidad sea excelente. Y si tienes algo como un diseño, un logotipo o algo así, entonces tal vez quieras exportarlo, puedes hacerlo más grande. Puedes traer el diseño y simplemente hacerlo mucho más grande, o simplemente puedes exportarlo desde aquí como si fuera un diseño mucho más grande. ¿Bien? Como dije, estos son los tipos de archivos como los que puedes exportarlo. Y con PDF, no tienes nada. Entonces con PDF, no tienes ninguna opción de escalado. También puedes tener más opciones aquí si estás bien versado en estos ajustes, pero yo diría que eso es un poco demasiado complejo para ti en este momento, y solo tienes que ir a la página Export Summary y simplemente puedes pegarlo así Y luego solo puedes hacer clic en Bien, y luego se exporta. También puede realizar múltiples configuraciones de exportación. Se podría decir, quiero esto como PNG, pero también como JPEG, una X, quiero esto también como PDF. Y lo que es aún más genial de esto es que puedes elegir múltiples marcos. Incluso puedes elegir diferentes elementos. Puedes elegir cualquier cosa, cualquier capa, y exportarla. Y se puede decir, quiero exportar todos estos como JPEx. Entonces al hacer clic aquí, dice Exportar cinco capas. Entonces lo va a hacer por ti. Puedes exportar cualquier tipo de archivo, cualquier tipo de marco, cualquier tipo de grupo, marco, sea lo que sea, es posible y puedes hacerlos juntos. Me gusta mucho esa característica porque facilita las cosas. No tienes que hacer las cosas a mano cada vez. Simplemente se hace simple para ti. Así es como puedes hacer que conozcas, específicamente a través de las capas que puedes exportar capas por separado o enmarcar por separado. Pero aquí también hay una función de exportación. Entonces cuando vengas aquí, puedes exportar todo el proyecto. Entonces intentemos hacer esto y hacerlo con Export Project. Para que podamos cambiar la configuración, como dije, y te da aquí una pequeña vista previa agradable. Ahora bien, lo negativo de esto es que va a exportar todo, incluyendo estos pequeños detalles que tal vez no son tan importantes. Entonces ves aquí cuando haces clic en Exportar, va a decir uno de uno seleccionado. Entonces, ¿estás seguro de que quieres exportar esto y a, quiero exportarlo Va a tomar un tiempo, pero con el tiempo va a funcionar. Así es como se vería. Exporta todo como un lienzo como una sola página, lo que obviamente no es lo ideal. No estoy seguro de cuál es el caso de uso de esto, por qué querrías hacer esto, pero no es lo ideal. Nadie puede mirar esto y ser como, Oh, si, esta es una app genial porque no parece una app. Yo no te recomendaría hacer esto. Yo quitaría esto de aquí. Hay otra manera de hacer esto es pasar por aquí e ir a archivo. Y exportar marcos a PDF. Ahora bien, esta es una opción mucho mejor hacer porque sólo va a tomar los marcos. Ahora así es como se ve. Simplemente exportó los marcos, pero los exportó por separado en lugar de un lienzo completo, pero aun así exportaban los componentes y todo eso. Entonces estas han sido las principales formas en las que puedes exportar tus marcos. Ahora, por supuesto, hay otras formas más avanzadas en las que puedes hacerlo. Sencillo siempre es mejor. Así que trata de no complicar demasiado este proceso para ti y para los demás Solo asegúrate de exportar tus diseños de una manera que los haga lucir bien y fáciles de ver, y eso es todo lo que importa. Muchas gracias por escuchar, y nos vemos la próxima vez. 19. Proyecto de clase: crea tu propio diseño de UI en Figma: Y ahora es el momento de que crees tu propio diseño de interfaz de usuario. Para este proyecto de clase, se te pedirá que crees una interfaz de usuario Figma muy simple usando las técnicas que aprendiste a lo largo de este curso Puedes crear una app móvil o una landing page o cualquier interfaz sencilla que quieras. Empecemos por crear primero un marco y una estructura, y luego comenzar a agregar algo de texto, algunos colores, y luego crear algunos botones. Asegúrate de estar prestando atención al espaciado y al diseño general para asegurarte de que el diseño se vea moderno y limpio. A continuación, usa Auto Layout y componentes para organizar tu archivo de diseño un poco mejor y de manera más eficiente, y asegúrate de que estás creando al menos dos pantallas conectadas para que puedas construir un prototipo con alguna funcionalidad básica. Una vez que su proyecto esté completo, continúe y exporte sus pantallas como PDF, o simplemente puede compartir los enlaces de exportación, solo asegúrese de que sean visibles públicamente en la configuración, y continúe y compártelos en la galería del proyecto También puedes agregar una breve explicación para hablar sobre tu diseño, explicar lo que hiciste y tal vez defender algunas de tus opciones de diseño. Este proyecto se trata practicar el flujo de trabajo para principiantes Figma, desde hacerse la idea hasta comenzar y hacer un prototipo interactivo a partir de ella Así que adelante, prueba cosas, experimenta. No tengas miedo de estropearte y diviértete con ello. 20. ¡Felicidades!¿Qué sigue?: Enhorabuena por terminar la clase. Ahora aprendiste los fundamentos de Figma desde navegar por la interfaz y crear diseños básicos hasta crear componentes y prototipos interactivos Eso ya es un gran paso en el mundo del diseño de UI y UX. Lo más importante que hay que hacer ahora es seguir practicando. Intenta recrear las interfaces que te gusten, experimentando con diferentes diseños y estilos, y simplemente construyendo diseños para seguir trabajando en tus habilidades Aún no lo has hecho, por favor sigue adelante y sube tus propios proyectos a la Galería de Proyectos para que pueda ver lo que estás haciendo. Realmente me encantaría ver lo que se les ocurrió a ustedes. Como siempre, si has disfrutado de esta clase, no dudes en dejarnos una reseña. Realmente nos ayuda a mejorar y crear cursos aún mejores para ti. Gracias de nuevo por unirte y te veré en el próximo curso.