La guía de no Bull para convertirse en un profesional de Figma en 2023, y UX/UI

1. Introducción y tráiler: Oye, gracias por hacer click en esto y quería revisar mi curso sobre Figma. Entonces este es el noble curso sobre Figma. Y lo que vamos a hacer es enseñarte a ponerte al día para ser un Figma Pro lo más rápido posible. Mi nombre es Chuck, y en línea con la filosofía del Nobel, lo que vas a sacar de esto no es nada extra, nada esponjoso. Te vamos a dar exactamente lo que necesitas para tener plena confianza y competencia en el uso de la herramienta Figma para darte cuenta de todas las ideas y las cosas que estás discutiendo con tus amigos, con tus compañeros de equipo y expresarlo en la herramienta Figma. Entonces hay un par de razones por las que quizás quieras confiar en mí y confiar en este curso y ver cómo vamos a llegar allí. Usar mi curso es cuádruple. Primero es que he sido usuario de Figma desde 2018. Y no sólo eso, actualmente soy amigo de Figma para el área de Manchester. Así que me han metido mucho en Figma y realmente me encanta y lo que he podido lograr con ella. Y eso es algo que me encantaría compartir con todos ustedes. Segundo es el tipo de trabajo que he hecho también. Así que he sido un excelente ingeniero de software, el próximo líder tecnológico. Así que no solo entiendo cómo ser diseñador de productos y entender cómo sacar lo mejor de Figma y hacer que su flujo de trabajo sea simple y directo posible. Pero sé lo que van a necesitar tus ingenieros porque tengo ese conjunto de habilidades. Sé cómo encaja todo. Entonces esa es la segunda razón. Tercero es un tipo de lugares en los que también he trabajado. Entonces no son solo las corporaciones en las que he trabajado o las startups las que han trabajado en el trabajo para ambos. Entonces en cuanto a corporaciones y empresas en las que han trabajado en orden cronológico inverso es Jaguar Land Rover. Antes de eso, trabajé en el Banco Cooperativo aquí en el Reino Unido. Y antes de eso estuve en una consultora llamada KYC solutions, que ahora forma parte del streaming de Disney. Entonces ya sabes que no es solo HTML, CSS, algunas de las cosas básicas. Va a ser muy complejo, cosas difíciles que he podido lograr y he podido entregar dentro del conjunto de habilidades de ingeniería. Entonces sé exactamente cómo piensa esa gente, cómo esas personas en esos puestos quieren recibir diseños. Del lado Figma. El siguiente es medio. Así que he estado escribiendo artículos y medios desde hace algunos años con más de 300,000 visitas, podría agregar en UX Collective, el mayor medio de publicación UX. Y he estado muy entusiasmado en enseñar a otros en la comunidad cómo hacer, desde algunas de las cosas más simples como asegurarse de que domine el anidamiento de marcos en Figma hasta cosas más complejas como poder crear prototipos de puntos de interrupción y poder juntar esos tipos de prototipos. Y no siempre son útiles. No me malinterpretes. Pero a veces realmente valen la pena cuando realmente quieres revisar algo y asegurarte de que el prototipo de algo sea lo mejor posible para obtener el mejor resultado posible para tus usuarios y para tu producto. Y si eso no es suficiente para ti, tengo mi ventana de perro mascota fiduciario aquí para mantener la compañía de vez en cuando. Así que mantén un ojo hacia fuera y podrías unirte a nosotros para algunas de las lecciones. Ese más preámbulos. Si ya no estás convencido, entonces no hay ángulo para convencerte. Entonces para aquellos de ustedes que sí quieren quedarse adelante, muchas gracias por elegir arriesgarse conmigo y no los defraudaré. Empecemos. 2. Ventana, paneles y la etapa principal: En esta lección, vamos a cubrir los paneles básicos, ventanas y cosas que querrás tener en cuenta al abrir por primera vez un archivo en Figma y orientarte. Entonces, lo que cubriremos es el panel de capas, el panel de páginas , los paneles de diseño, prototipo e inspección, así como dónde se ubicarán sus herramientas y cosas predeterminadas . Entonces aquí, cuando abres una ventana de Figma y abres cualquier archivo, o incluso cuando no abras el archivo, verás un pequeño icono más en la parte superior. Y verás esta página, que es útil cuando quieres elegir entre un archivo de diseño y un archivo de gema de higos. Abrirá un nuevo archivo de diseño aquí y te orientará a las diferentes ventanas y donde se encuentra todo. Entonces, como puedes ver cuando abres por primera vez, no está pasando demasiado. Tienes el escenario principal en el centro. Entonces aquí es donde harás la mayor parte de tu trabajo de diseño. Tienes el panel Capas aquí abierto por defecto a la izquierda. Entonces, todas las cosas importantes de las que querrás estar al tanto y administrar estarán ahí. Entonces a medida que creo algunas cosas básicas, verás que las diferentes capas van a aparecer aquí en el panel de capas. Lo que verás es que el panel de páginas no está abierto por defecto. Entonces normalmente tengo esto abierto yo mismo y medida que mi archivo empieza a hacerse más grande y cuando quiero ser organizado, trabajando con otros, esto es lo que voy a abrir. Y puedes crear páginas aquí, bastante sencillas. Los otros paneles de los que querrás estar al tanto también están aquí en el lado derecho. Entonces, si creo un rectángulo simple, verás que el panel de diseño abre algunas opciones diferentes sobre su ubicación, el tamaño, algunas personalizaciones diferentes que puedes hacer. Este panel de diseño cambia dependiendo del tipo de capa que tengas abierta. Entonces puedes ver aquí con la capa de texto, tengo las diferentes cosas que puedo abrir y editar desde un punto de vista tecnológico. Los otros paneles que verás es que cuando creo un marco simple, así que esto es lo que quiero crear un prototipo y crear algunos flujos para crear un prototipo clicable. Aquí es donde tendré que estar. Así podrás crear algunos puntos de partida de flujo dependiendo del marco que tengas. Configura las interacciones desde diferentes marcos o desde diferentes capas. Entonces puedes crear una interacción a partir de estas cosas, pero puedes crear una interacción a partir de estas cosas. Entonces lo que más verás es el panel de inspección en el lado derecho. Entonces esto produce algunas propiedades y colores autogenerados. Así que no los uso personalmente demasiado. Pero tus devs, los devs con los que trabajas pueden usarlos ellos mismos. Y puedes ver algunos, algún código básico autogenerado que puede ser útil. Entonces las dos cosas que sí quiero llamar su atención, o tres en realidad lo son. Primero está el trasfondo. Para que puedas cambiar el color del fondo si eso es demasiado tarde para ti, quieres trabajar sobre un fondo más oscuro, digamos que te sientes más cómodo con eso. Entonces eso suele ser un placer tenerlo aquí. Interesado en cambiar eso hacia arriba, pero me gusta simplemente dejarlo como predeterminado. En segundo lugar están los estilos locales. Eso es lo que quería compartir contigo. Así que he creado un rectángulo aquí y cambiemos este color a algo aleatorio como el verde lima. Una vez que hayas creado ese color, podemos agregarlo a nuestra biblioteca local. Al hacer esto. Verde lima, llamémoslo. Lo que hace es agregarlo a tus estilos locales. Entonces hay un montón de cosas diferentes que puedes agregar. Texto, colores, efectos y estilos de cuadrícula que quizás quieras usar para ayudarte a crear tus diseños y tus prototipos. Por aquí arriba en la cima es lo último. Yo, toda la segunda última cosa en realidad, antes de repasar eso, la segunda, la última cosa que sí quiero compartir, segunda última cosa que quiero compartir contigo es esta cosa de aquí arriba. Así que sería capaz de ver dónde se encuentra tu archivo y renombrarlo. Entonces mi, mi primer archivo. Obtendrás algunas opciones diferentes desde aquí para poder mover a otro proyecto favorito tu archivo, duplicarlo si quieres publicar tu biblioteca. Entonces, cuando empiezas a trabajar con sistemas de diseño, eso es algo que quizás quieras usar. Lo último que debes compartir y cubrir contigo es que todas tus herramientas principales estarán aquí arriba. Estos son engañosamente simples. No hay tantas herramientas que lo comparen con. Si eres un poco de la vieja escuela y ya has usado Photoshop en su día. Hay un panel enorme, diferentes herramientas que puedes usar. En la siguiente lección, repasaremos estas herramientas, cómo usarlas y cómo sacarlas al máximo. 3. Herramientas y atajos de teclado: Entonces, a continuación, vamos a cubrir las diferentes herramientas y orientadas en torno a qué son las herramientas, para qué las puedes usar, los atajos que también podrás usar, y luego voltear entre las diferentes cosas. Así que de vuelta en el archivo se iniciará de izquierda a derecha aquí en la barra superior. Entonces, la herramienta predeterminada que tienes es la herramienta puntero. Entonces, si tienes algunas cosas diferentes, la herramienta puntero es buena para simplemente arrastrar cosas. Y el atajo para eso es v. Así que la forma en que recuerdo es que la letra V es bastante apuntando. Entonces puedes usar eso también. Apunte alrededor. Debajo de eso está la herramienta de escala. Así que por un tiempo descubrimos esto, pero la herramienta de escala es realmente genial. Entonces k es un atajo, o puede hacer clic usando la barra de herramientas en la parte superior izquierda. Y esto es bastante nuevo, en realidad, esto es bastante reciente. Esto no estaba aquí antes, y puedes escalar por factores que quieras escalar por defecto. El valor por defecto es de abajo a la izquierda, creo. Entonces hacemos veces dos. Se puede ver que ha crecido desde la esquina inferior izquierda. También puedes crecer desde el centro. Entonces si vuelvo a hacer dos veces, se puede ver que ahora se superpone ese cuadrado a la izquierda de éste. Entonces esa es la herramienta de escala y también puedes hacer clic en las cosas y simplemente hacer clic y arrastrar como quieras. También puedes escalar. Escala en proporción en realidad, creo que es lo que estoy tratando de decir. Así que no deberías tener que preocuparte demasiado por conseguir el tamaño adecuado. Si vuelve a cambiar a la herramienta de puntero, puede cambiar la forma. Como cabría esperar. A continuación, tenemos los marcos, secciones y slice. Los marcos son tu pan y mantequilla, así que los cubriremos en el siguiente módulo. Así es como se cosen diferentes prototipos y se puede trabajar en el anidamiento de marcos. Y cuando usas la herramienta de marco, también obtienes algunos ajustes preestablecidos. Así que es genial que puedas usar cosas como el preajuste del Apple Watch o puedas usar otras cosas y decir en realidad tengo MacBook Air y quiero crear un prototipo basado en ese tamaño de pantalla. Entonces eso es muy útil. Lo que puedes usar también. Aquí está la herramienta de sección. El atajo es Shift S. Y la sección es bastante buena para armar tus cosas. Así podrás organizar tus cosas por completo y arrastrar las cosas de izquierda a derecha. Eso es genial. Vamos a deshacernos de eso. A continuación, tenemos las herramientas de forma. Entonces el valor por defecto es el rectángulo. Entonces como viste allá arriba, si uso are, puedo dibujar un rectángulo y personalizarlo a la derecha. También tengo la herramienta de línea y la herramienta de flecha. Entonces puedo usar L para dibujar una línea, o puedo usar Mayús L para dibujar una flecha. Puedo usar 0 para, es la herramienta Elipse, pero la recuerdo como 0 para oval. Entonces lo voy a arrastrar. No mantiene ninguna relación de aspecto. Y he aquí abajo Shift, va a ser exactamente cuadrado. Se. Eso es bastante bueno para, para crear las formas ovaladas y hacer cosas como avatares o algunos íconos. También tienes esta otra herramienta, el polígono y la estrella. Entonces estrella es más o menos por defecto, solo creas un ícono de estrella como quieras. Y también tienes el polígono. Entonces por defecto eso es un triángulo. Pero en el siguiente módulo, fuera debería cubrir cómo editar esto y algunas cosas en profundidad sobre la edición de formas. También obtuvo imagen o video de Place. Y normalmente no uso eso. En realidad arrastra directamente desde el escritorio o desde mi navegador de archivos. Y eso me parece mucho más fácil. A continuación tenemos la herramienta pluma y lápiz. No uso tanto la herramienta pluma porque es punto a punto, lo cual está bien. Pero lo que más a menudo he usado es la herramienta lápiz. Entonces podría usar eso para anotar cosas y decir que este es mi polígono y esto es una estrella. Así que encuentra que la herramienta lápiz es bastante buena y eso funciona un iPad también y tabletas. Entonces eso es bastante bueno si solo quieres esbozar algo o hacer alguna anotación y crítica de diseño. Tienes la capa de texto. Para que puedas crear capas de textos y agregar tu texto a tus diseños y prototipos. Tienes los recursos, así que eso cubre tus componentes, plug-ins y tus widgets. Entonces eso es bastante útil. Entonces tienes la herramienta de mano. Entonces, lo que habrás notado es que he estado arrastrando cada vez que quería navegar, hace una herramienta manual directa, pero también puedes hacer clic central y usarla para moverte por tu archivo. Y por último, tenemos los comentarios. Entonces puedo presionar C para comentar y decir que esta es una capa de texto. Ahí lo tienes. Esas son todas las herramientas con las que tienes que trabajar. 4. Páginas y páginas con nombre las mejores prácticas: Entonces, finalmente, lo último que creo que vale la pena cubrir en sí mismo son las páginas. Y eso es porque no siempre es, no está claro al principio cuántas páginas deberías tener, cómo debes estructurar eso, ese tipo de cosas, y también las limitaciones también. Entonces en cuanto a recomendaciones y como te sugiero, organizas tus páginas y las pones juntas, es que usas estas cinco constantes diferentes. Entonces primero tienes tu tapadera. Entonces esa es la primera página que cuando vuelvas al navegador de archivos, verás lo que tengas en este archivo en particular. Entonces también puede ser bueno. Pon esto arriba y di mi primer archivo. Y si entonces enmarco esto, esta puede ser la portada. Entonces, cuando alguien mira este archivo en el navegador de archivos, esto es lo que verá. Para que puedas poner la información clave, usarla para estados, ese tipo de cosas. Y eso es muy útil cuando se trabaja con otros diseñadores. E incluso solo para recordarte en qué estás trabajando y qué, qué contiene este archivo. El siguiente son estos dos. Entonces se llaman Final y prototipo. Entonces final también se puede llamar traspaso. A veces. A mí me gusta poner eso como la segunda página. Esto es cuando has terminado de pasar por tu proceso de diseño y has terminado de averiguar qué quieres construir, cómo quieres construirlo, ese tipo de cosas. Esta es la página a la que dirigiría mis ingenieros y a los diseñadores cuando quiero que vean qué es exactamente lo que se necesita construir y qué es exactamente lo que viene a continuación. Y lo que me gusta hacer es descomponer eso también un poquito. Entonces esto es lo que considerarías la página terminada si quieres. También puedes crear versiones alternativas. Entonces eso puede ser útil a veces si quieres indicarle a la gente, en realidad hemos pasado por un par de revisiones clave. Y queremos construir una versión uno, pero aquí hay una versión dos que podríamos querer poner encima. La siguiente sugerencia es un prototipo. Esto es cuando tienes un prototipo de extremo a extremo en el que se puede hacer clic y lo que podría querer comunicar a otros diseñadores y desarrolladores, etcétera. Tal vez diferente al prototipo clicable o las pruebas de usuario que estoy armando. Entonces por eso recomiendo tener eso como página separada. Trabajar es el siguiente. Entonces aquí es donde pasarías la mayor parte de tu tiempo o donde paso la mayor parte de mi tiempo experimentando con algunos flujos diferentes, algunas ideas diferentes, algunas formas diferentes de modelar algo o comunicar algo al usuario y para ver si podemos llegar a una conclusión hasta una decisión sobre lo que debería ser. Esto es bueno si necesito hacer algunas pequeñas correcciones y ajustes también, una actualización. Cosas como podríamos querer cambiar la escala de tipos de sus primeros días o más tarde, podríamos elegir cambiar el radio del borde y queremos asegurarnos de que eso se vea bastante bien o actualizar la copia, por ejemplo antes de pasar a la página de traspaso. El último que recomendaría son los componentes. Entonces hay otro módulo que discutiremos los componentes de extremo a extremo y en profundidad. Pero tener una página separada con tus componentes es muy útil para que si otros diseñadores entran en tu archivo, no van a hacer clic en el archivo de trabajo y se van, ¿dónde están todos los componentes? O entrar en el prototipo y decir, ¿dónde están todas las diferentes partes y piezas? Tal vez sobre copia sobre el, el tipo equivocado de cosas. Así que tenga algunos blogs diferentes y cosas hablando de esto, sobre por qué esto es algo realmente útil de hacer. Pero en pocas palabras, si tienes una página donde has creado todos los nuevos componentes de trabajo son todos los componentes locales. Es bueno separar los dos y juntarlos en la misma página. Para que puedan ver claramente, aquí están los componentes que he creado que deberían ser absorbidos de nuevo en un sistema de diseño más grande. Aquí en los componentes locales que solo he usado localmente para este archivo con el fin de entregar la obra y llegar a la decisión. Así que eso cierra el primer módulo. Espero que eso haya sido útil, te dio una orientación en cuanto a dónde están los diferentes paneles y cómo encontrar tu camino alrededor de Figma dentro del archivo de diseño. Dónde encontrar las herramientas principales que necesitarás usar y cómo usarlas, así como las páginas y mi configuración recomendada para páginas. En el siguiente módulo, vamos a cubrir las formas y las herramientas y utilizarlas un poco en profundidad. Para que puedas ver un poco más de detalle cómo sacar lo mejor de esas cosas, en lugar de simplemente arrastrar y soltar los diferentes presets. 5. Punto de control 1: respira respiro: Fresco. Entonces ojalá te sientas orientado alrededor del programa Figma y no te sientas demasiado perdido cuando saltas y estás tratando de averiguar qué es esta ventana, qué hace esa ventana ahora tienes una idea de dónde se sientan todas las cosas principales en un archivo de diseño de figma. A continuación, vamos a entrar en colores, líneas y formas, y topografía, no en ese orden, sino que vamos a pasar por esas cosas. También te ves confuso. Eres como lo que gritó. Sí, vamos a pasar por esas cosas. Sí, lo estás haciendo genial. Sigue así. 6. Formas, radio fronterizo y edición de formas: En este módulo, habrá bastante fácil. Vamos a cubrir formas, radio de borde y edición de formas. Estos son los fundamentos y has, has usado cosas como Sketch o Photoshop antes, o has experimentado con edición de esas diferentes formas o incluso fuegos artificiales de macro medios cuando eso era una cosa. Esto lo encontrarás bastante natural. De lo contrario, no se preocupe, entraremos en los diferentes detalles y lo esencial que necesitará saber para ser buena interfaz de usuario de UX o diseñador de productos. Así que de vuelta en el editor empezará con la herramienta rectángulo. El atajo otra vez es nuestro, si solo lo creamos, es bonito, muerto simple. Se puede crear algo que añadir un radio de borde. Puedes agregarlo por aquí. Entonces, lo que esto hace es agregarlo a todos los diferentes rincones. Entonces esto es bastante bueno para crear algo de tipo tarjeta, por ejemplo, también puedes hacer eso dos fotogramas, por cierto, como un rápido aparte, para que puedas agregar border-radius para que sea útil más adelante. Y lo que hay que saber sobre border-radius es que puedes hacerlo independiente. Entonces, por ejemplo I. Podría querer hacer las dos esquinas inferiores afiladas, pero la superior en realidad sea redondeada. Si estoy creando por ejemplo I. Haga clic con el botón derecho y voltearlo verticalmente, puedo hacer esto blanco, por ejemplo y hacerlo más corto. Y entonces se parece un poco más a una tarjeta. Eso es bastante útil cuando se trabaja con radio de borde. Si agregamos en un polígono, te puedo mostrar dónde. Creo que aquí el radio fronterizo sigue funcionando en todas las esquinas. Pero lo que puedes hacer es cuando entras en la edición de formas, aquí es donde puedes agregar más vértices, creo que es la palabra. Y todos ellos tienen frontera independiente, valor de radio. Entonces aquí puedo cambiar esto a 999 y eso es como súper curvo por aquí. Pero puedo dejar a estos dos como están y agregar más cosas según sea necesario. Entonces podría necesitar una forma diferente. Entonces esto es bastante útil si quieres hacer un ajuste fino en alguna forma y hacer algún trabajo más ilustrativo natural como editar forma. Y luego usando el radio del borde junto con eso, puedes hacer algunas formas realmente complejas o algunas formas realmente fascinantes como necesites y como mejor te parezca. La herramienta ovalada es probablemente la siguiente cosa interesante para compartir contigo. Así que de nuevo, recuerda que 0 es para óvalo. Y si mantengo pulsado Shift, puedo cambiar el aire, mantener la relación de aspecto a medida que actualizo el tamaño. Así que eso es muy útil cuando estoy trabajando con esa cosa. La otra cosa a mencionar es que también está la rotación. Entonces, si lo haces de manera incorrecta, puedes cambiar la rotación del objeto o el hover cerca de una de las esquinas, puedes arrastrarlo al ángulo recto que prefieras. Manteniendo pulsado la tecla Mayús. Se puede cambiar a uno de los grados de ajuste. Entonces puedes ver aquí cambia aproximadamente cada 15 grados. Si estás vigilando el valor en la parte superior derecha, eso es bastante útil cuando quieres trabajar en formas, juntarlas usando border-radius, agregando esos vértices y creando formas personalizadas. Usar eso para sacar exactamente lo que quieres y ponerlos todos juntos. Lo último antes de moverme en dos líneas es la Herramienta Estrella. Y no estoy seguro de ser honesto contigo por qué esta es su propia herramienta personalizada. Pero por aquí tiene esta propiedad especial aquí sobre cuentas de radios son picos que podrías tener en la estrella. Entonces a veces es simplemente divertido jugar con él. Parece que 60 es el máximo que puedes hacer. Pero eso es bastante útil si necesitas una forma más de estrella. 7. Trucos con el radio de frontera: Una última cosita que me gusta mostrarte, que es bastante genial, es que si recuerdas, usamos 0 y presionamos Mayús y podemos hacer un círculo. Ahora con el border-radius, vamos a crear un rectángulo del mismo tamaño. Y si estableces el radio del borde a un valor alto, digamos 200. Y ahora también parece un círculo. Déjame cambiar ese color para que lo veas un poco más claramente. Pero ten cuidado al usar esto. Porque si utilizo solo la herramienta de puntero de punto regular y luego redimensionarla. Y podrás ver que uno queda como círculo. Y uno solo se ve como un rectángulo con bordes muy curvos. Así que ten cuidado al usar esa técnica, lo cual no está mal, pero es una pequeña y agradable técnica que puedes usar. Si necesitas hacer un círculo rápidamente. Y quieres usar la herramienta rectángulo en su lugar, o eso es lo que te viene a la mente primero. 8. Líneas y flechas: Ahora que ya tienes una idea de las herramientas para crear formas, editar formas en, en el radio del borde, líneas y flechas, lo que te será bastante fácil. Te voy a mostrar. Entonces primero crearemos algunas líneas y cosas para que podamos trabajar con ellas. Entonces usas el, puedes dar click aquí para una línea y dibujarla de forma normal. O puedes usar l como la tecla de acceso rápido para hacer eso. Y si mantienes presionado el turno, puedes en lugar de tenerlo de forma libre, puedes hacer que se mueva hacia abajo a un ángulo determinado. Se puede cambiar el grosor de la misma. Tienes todas estas configuraciones diferentes por aquí, así que eso es bastante práctico. Yo sólo puedo escribir azul por ejemplo y hacer eso. Mantenga presionada la tecla Mayús y luego presionar L se abrirá la herramienta de flecha. Así que es bueno estar atento a la parte superior izquierda para ver qué herramienta estás usando. Y entonces eso crea una flecha. Y puedo usar eso para anotar mis diseños y cosas en las que estoy trabajando. Entonces por ejemplo I. Podría hacer esto y luego simplemente presionar Mayús L cada vez para conectar todas las diferentes formas que tengo. Si quieres hacer de la flecha una forma diferente, por ejemplo lo que hago a veces facilidad, arrastra un vértice extra y cambia eso para decir 50, tal vez 200. 200 nos da un poco más para jugar con esto. Y le da una bonita curva. Así que puedes hacer doble clic para entrar en la edición y luego hacer doble clic afuera para salir. Y a partir de aquí, ahora tengo una pequeña flecha bonita que puedo arrastrar hasta aquí. Puedo ir a la esquina y rotar y decir aquí está mi, usemos T para texto. Solo para ilustrar y usar K para agrandar. Entonces aquí está mi punto de partida. Y puedo anotar un poco de flotación. Así que eso te da una idea de la herramienta de línea, la herramienta de flecha, cómo editarla y moverla. Y prácticamente para qué lo podrías usar. 9. Estilos de color: Entonces para esta parte, vamos a estar hablando de estilos. Y primero hablaremos sobre estilos de color, cómo configurarlos y comenzar lo más rápido posible para que puedas empezar a crear cosas más rápido. Así que de vuelta en mi primer archivo, te habrás dado cuenta, o si recuerdas de una de las lecciones anteriores, configuramos un estilo básico de color llamado verde lima. Y sólo para recapitular, cuando hacemos algo así como un rectángulo. Entonces el atajo es R, y puedes simplemente arrastrarlo al escenario principal. Para ello, podemos actualizar el relleno con uno de los estilos locales que hemos creado. Entonces, una cosa que notarás es que aquí tengo un conjunto de diferentes colores. Y estos solían ser proporcionados por defecto cada vez que creabas un nuevo equipo, pero ese ya no es el caso. Entonces lo que voy a hacer es proporcionar un enlace en la descripción de esto. Si quieres usarlos o si quieres usar algo más moderno, lo que voy a hacer es usar el diseño de materiales, usando algunos de esos recursos. Y los sugiero para poder configurar tu paleta y apenas empezar a trabajar desde. Entonces, por ejemplo, tenemos este archivo que he encontrado en la comunidad. Así que tenemos cerca de 5 mil descargas y es muy fácil. Simplemente puedes hacer una copia. Y todo lo que tendrás que hacer es hacer clic aquí. Haga clic en Publicar biblioteca. Estoy usando el plan gratuito y lo más probable, lo más probable es que sean dos estilos, solo. Los colores por defecto. Y publica esos estilos. Y ahí tienes. Entonces, a partir de ahí, podrás volver a tu expediente. Puedes hacer clic en Figma y hacer clic en Bibliotecas solo para asegurarte de que las hemos compartido. Y pueden ver que tengo estas bibliotecas disponibles las cuales quedan. Pero esta acabo de publicar el diseño de materiales dos colores. Y así en el plan gratuito, puedes compartir los estilos básicos. Entonces lo que eso significa es que ahora puedo hacer clic en Cerrar y luego puedo cambiar el color de relleno. Y tengo todos estos colores disponibles en toda una gama de colores. Entonces el orden está bien. Los tienes como absolutamente no, en realidad es bastante bueno. Así que tenemos basado en material para diseñar ahora material a tres años, pero esto te ayudará a empezar y al menos a poder trabajar con algo. Entonces puedo establecer el trazo de esto, por ejemplo pongamos eso en diez píxeles. A lo mejor eso es demasiado, tal vez cinco. Y podemos entrar aquí y podemos actualizar esos colores y ponerlos al contenido de tu corazón, tal vez un color un poco mejor que ese. Entonces, lo que esto significa es que puedes configurar estos estilos. Y luego en lugar de tratar de recordar los códigos hexagonales así, como recordar cosas como d9. Significa que a medida que avanzas por tu diseño, puedes intentar recordar cuáles son. Un consejo que te voy a dar también es que puedes buscar por nombre. Así se puede ver en la escala de colores para el material, van desde 50 por aquí hasta el tono más oscuro, que es 900. Y luego tienen algunas tonalidades de 100, 200, 300, etcétera. Entonces puedes filtrar por estos y solo teclear rosa 700 y saldrá recto hacia arriba. Entonces, esa es una manera muy fácil de armar rápidamente el diseño y asegurarse de que sus colores sean consistentes para armar rápidamente el diseño y asegurarse que cuando lo arregle por completo y use, dé un paso atrás, el diseño se vea agujereado. 10. Estilos tipografía: Genial. Ahora que te tenemos configurado en colores, vamos a configurarte en la tipografía. Porque una vez que tengas esas dos cosas juntas y luego usando las herramientas básicas de forma en Figma, podrás crear muchas cosas ya podrás crear muchas cosas sin aprender algunas de las otras técnicas más avanzadas. Salta en. Cuando se trata de tipografía. No olvides que nuestra tecla de método abreviado es T para texto. Cuando metemos, podemos decir mi primer título, por ejemplo, lo que vamos a querer hacer es mostrarte cómo configurarlo. Si quieres crear tu propio stack de tipografía. Y luego te mostraré el atajo. Para que puedas saltar hacia adelante. Si eres un tipo de atajo de persona como yo, o si quieres entender cómo funciona, Eso también es como yo. Te voy a dar una introducción rápida. Vamos a establecer mi primer título. Llamémoslo un punto 24. Y si quieres crear un estilo y hacer clic en el más, entonces no lo olvides, podemos establecer uno y decir Estilo de encabezado. Ahora, cuando quieras crear algunos textos más, puedes decir algún otro texto, y por defecto será el estilo de encabezado de los textos más recientes. Lo que puedes hacer si quieres establecer algún texto corporal es que puedes desacoplar eso. Entonces, si alguna vez te quedas atascado, no lo olvides, siempre puedes desprender estilo. No hay problema con eso. Establecer el tamaño de la misma. Pongamos esto de nuevo a irregular. Y ahora puedo hacer otro estilo cool. Ahora, cuando tengo algunas cosas diferentes que estoy diseñando o armando. Ahora tengo mis estilos locales definidos para rumbo y para cuerpo. Y podría ser capaz de crear algunos más. Entonces, si tienes una idea clara de los que quieres poner en marcha, o tienes un fondo de diseño gráfico, por ejemplo o tal vez tienes una experiencia en ingeniería front-end y ya has visto este tipo de cosas. Eso es genial. Siempre puedes configurarlo y personalizarlo y jugar con tu corazón al gusto de tu corazón. Si quieres avanzar rápido y no eres tanto diseñador visual. Al igual que todavía lo estoy hasta cierto punto. Lo que puedes hacer en cambio es que puedes descargar algo, por ejemplo como hicimos con los colores. Aquí hay un archivo que encontré en la comunidad. Entonces ya he copiado esto en mis borradores. Y al igual que antes, podemos publicar esta biblioteca, solo publica estilos, digamos estilos de fotografía tipo base. Muy sencillo. Podemos volver a entrar aquí. Da click en Bibliotecas desde el menú figma en la parte superior izquierda de mi archivo. Y luego puedo habilitar esa biblioteca de archivos en mi archivo de trabajo actual. Si cerramos esto y luego hacemos una copia de esto. Para que pueda Comando C, haga clic derecho pegar aquí. Ahora, puedo cambiar estos y puedo ver estos estilos de tipografía de diseño de materiales. Entonces digamos que la partida dos, que es masiva, y tenemos el cuerpo uno. Entonces, cuando estás armando tus propios diseños y cosas que quieres armar. También puedes hacer es que puedes usar esto como base y luego retocar estos estilos. Sugiero intentar apegarse a algún sistema existente. Si no tienes mucha experiencia, no has hecho este tipo de cosas antes. Me parece muy útil porque establece la escala de tipografía de una manera agradable donde es muy fácil ver cuál es el título, ¿Cuál es el cuerpo y qué es una etiqueta? Entonces por ejemplo, si estoy haciendo un botón, puedo ir al estilo de botón y configurar el estilo de una manera que puedas reconocerlo visualmente y distinguirlo de los otros estilos. Entonces ahí tienes. Hay una configuración rápida en los textiles, cómo hacerlo usted mismo. Y una sugerencia de algo que pueda hacerte empezar de inmediato. 11. Punto de control 2: ¿todavía respira?: Cosas grises. Entonces espero que estés disfrutando del curso hasta el momento. En este módulo, vamos a cubrir marcos, grupos en secciones. Ahora bien, esto merece su propio módulo porque hay algunas diferencias sutiles entre un grupo y un fotograma A. Y lo que notarás es que tu memoria muscular podría estar acostumbrada al agrupar las cosas juntas. Es importante tener en cuenta que hay una diferencia y los marcos son en realidad más potentes. Y te voy a mostrar las razones por las que son más poderosas y por qué las vas a usar con más frecuencia. Pero por qué los grupos también son muy importantes para recordar también, porque tienen sus propios beneficios al ser utilizados también. También tienes secciones aquí, lo que es una adición relativamente reciente a Figma. Entonces esto es realmente bueno para organizar tu trabajo. Entonces siento que realmente redondea hasta tres herramientas diferentes que usarán juntas. Si eres más lector, entonces tengo este artículo, que enlazaré a continuación que escribió hace alrededor de dos años y medio. Ahora, eso explica las diferencias entre usar un grupo y usar un marco y cuándo es posible que desee usar cualquiera de ellos. Entonces eso es bastante útil. Y sin más preámbulos, vamos a seguir adelante. 12. Grupos: Así que comencemos con grupos porque para mucha gente, sobre todo si no has sido diseñador antes o utilizas algunas de las herramientas de diseñador en el pasado. Los grupos te serán mucho más familiares. Entonces saltaremos a la Figma y te mostraré cómo encaja todo eso. Entonces, para demostrar cómo funcionan los grupos, lo que voy a hacer es crear algunas cosas diferentes. Entonces tengo una capa de texto regular, tendré un círculo. Vamos a llamar a ese círculo y hacerlo azul para que sea más fácil de ver. Entonces lo que voy a hacer es también importar una imagen. Y vamos a gritar. Entonces, como puedes ver ahí, eso fue bastante genial en realidad, puedes colocarlo dentro de objetos. Si tu imagen importante que vamos a hacer en realidad es simplemente meterla por aquí y dejar que se mantenga presionada Comando. De hecho, puedes recortar sin tener que hacer doble clic y editar imágenes. Entonces eso es bastante práctico. Y aquí hay algo de arte latte en el que he estado trabajando aprendiendo a verter. Entonces, para mostrarte cómo encaja todo eso, si agarras esto, puedes hacer clic derecho y puedes agrupar una selección o presionar Comando G para unirlo. Y cuando eso suceda, puedes cambiar el tamaño de eso para ver qué pasa con las capas que están dentro. Entonces mientras hago eso, se puede ver todo dentro de escalas tan amplias como lo es el propio grupo, se encoge para igualar. Y es un poco más difícil de ver con las capas de textos. Pero si hago clic en eso, puedes ver que también se redimensiona dentro de click en el grupo y haz esto. Se puede ver que eso se ha ido al mismo tamaño. Entonces, una cosa a tener en cuenta es que aún no verás algunas de las herramientas que obtendrás con un marco. Y si quieres que esto mantenga su tamaño, eso ya no es posible con grupos, sobre todo si te has ido a leer el artículo que escribí sobre grupos versus marcos. Así que en realidad no puedes editar las restricciones. No se puede editar, quiera que se escale o no. Todo lo que podrás hacer es con un grupo cuando agrupes cosas y obtienes el comportamiento predeterminado de cómo funcionan y encajan los grupos. Esto es un poco más familiar. Esto probablemente sea mucho más sobre a lo que muchas personas estarán acostumbradas, a excepción del texto. Entonces esto se parece mucho más a la herramienta de escala. Presionas una tecla para escalar. Recuerda que esto está en la parte superior izquierda, y lo escalo. A lo mejor eso es un poco más familiar. Y esto comienza a mostrarte algunas de las pequeñas diferencias en Figma y de lo que podrías echar un vistazo cuando nos movemos sobre marcos. Como se puede ver cuando me moví de nuevo a la herramienta puntero. Y si redimensiono esto, todo se tambalea. Ese es solo el tamaño de la capa en sí, pero las capas de texto se comportan un poco diferente. Entonces cuando se usa un grupo, estos, esto es una cosa a tener en cuenta. Entonces, cuando agrupas cosas juntas, van a escalar. Entonces, si necesitas cambiar el tamaño de las cosas, no va a funcionar de la manera que podrías pretender. Entonces lo dejaré ahí por ahora a la hora de explicar grupos, cómo hacerlo y cómo encajan. Cuando cubro los marcos, verás exactamente dónde está la diferencia realmente comienza a brillar y realmente una gran diferencia en cómo juntas tu archivo y cómo juntas tus prototipos y diseños. 13. Marcos 1 de 2: Entonces, donde los grupos eran bastante simples y bastante fáciles de entender. Ojalá eso estuviera bien para ti. Vamos a sumergirnos en los marcos. Hay mucho que cubrir. Así que comencemos. Entonces lo que voy a hacer es copiar estas tres cosas. Voy a hacer una copia. Para que veas ahí sostení la tecla Opción o la tecla Alt y arrastré una copia de la cosa original. Entonces por eso puedo hacer para volver a poner las cosas a algún tipo de escala áspera y aproximada con la que pueda trabajar. Lo haré es simplemente bajar esta también, o cambiar el texto. En realidad, hago esto y cambio esto de nuevo a lo que fue, 16. Es más como 24, algo así. Entonces, si copio todos estos, ahora estos no están agrupados. Puedo enmarcar esta selección que es diferente, siendo el atajo la Opción de Comando G. Y ahora tengo un frame. Y al principio no parece que nada sea diferente, pero si empiezas a redimensionarlo, entonces verás que las cosas no cambian su ubicación y no parecen cambiar su tamaño. Si vas por la izquierda, parece que se pega a la izquierda. Y lo mismo con la parte superior. Y sólo indagando en estas cosas aquí podrás ver las diferencias. Sólo vamos a hacer es sacar eso. Y si selecciono la capa de imagen, por ejemplo verás en el panel de diseño que hay esta cosa llamada restricciones izquierda y parte superior de las cosas predeterminadas. Y así se comportan las cosas en la web. Entonces, si no estás acostumbrado a diseñar cosas para la web, lo que notarás son los comportamientos que quieres ver. Para los productos digitales, las cosas que verás en la web y en las aplicaciones móviles. Se comportarán mucho más en función de las restricciones en comparación con más de un grupo tradicional que podrías encontrar en cosas como Google Slides o archivos de presentación de PowerPoint. Estos son bastante poderosos porque puedes hacer cosas como si selecciono este círculo, por ejemplo, pongámoslo en el centro, y vamos a darle a este marco un color de fondo. Entonces usaremos el relleno. Y vamos a seleccionar un tipo de color verde claro, y esto está aproximadamente en el centro. Ahora, cuando cambio el tamaño, el ancho ahora sigue al medio. Y entonces ojalá lo que puedas ver eso es que tu cerebro está empezando a pensar y a ver. Hay diferentes cosas que podemos lograr con los marcos. Algo diferente aquí. Y lo que notarás es que al usar estas restricciones, en realidad podemos hacerlo bastante poderoso. Entonces, si lo hacemos a la izquierda y a la derecha, podemos imitar el comportamiento o podemos usar la escala para replicar más exactamente. Un grupo lo hace. Entonces, si pongo el ancho a escala, podemos hacer eso. Pero con el marco, es genial porque es aún más potente que a medida que hago esto, siga siendo el mismo. O lo que puedo hacer es en cambio solo centrar eso cuando redimensiono este marco, luego se queda en el centro, cotizar entre comillas, de ese fotograma. Una de las primeras cosas que probablemente querrás saber y aprender a hacer es en realidad cómo haces el comportamiento de desplazamiento para prototipos. Cubriremos prototipos en profundidad más adelante. Pero lo que es realmente importante trabajar es el comportamiento de desplazamiento. Entonces, si tomo todos estos y los cambio a izquierda y arriba otra vez, lo que puedo hacer es cambiar la altura de esto y ahí está esta cosa llamada Contenido de Clip. Y lo que notarás es que las cosas pueden estar dentro un marco o dentro de un marco. Se puede cortar lo que hay ahí. Y para que eso pueda ayudar a la hora de cambiar qué cosas deben ser visibles, ¿qué cosas deben ser editables? Una de las cosas interesantes que puedes hacer en Figma es el desplazamiento de desbordamiento. Entonces cuando hago desplazamiento vertical, que es probablemente lo más común que querrás hacer. Ahora cuando pongo esto en un prototipo. Entonces hagamos esto solo para demostrar el comportamiento. Ahora se puede ver a medida que me desplace, Es casi como una página web. Ahora, usando estos bloques básicos de construcción de un marco, cómo eso encaja usando las restricciones, puede elegir cómo se muestran realmente las cosas juntas. Y puedes usar este comportamiento de desbordamiento para dictar cómo deben fluir las cosas juntas y cómo debería funcionar tu página. Entonces eso realmente va a ser muy útil. Y uno de los trozos de pan y mantequilla de tu kit de herramientas. Y usando Figma. 14. Marcos 2 de 2: Entonces, lo último que me gustaría hacer para cerrar esta lección es darte otro ejemplo de lo poderosos que pueden ser los marcos. Hagamos, por ejemplo, una superposición. Entonces cuando nos metemos en este marco, cada recuerdo, hay que desplazarse hacia abajo para llegar al círculo azul. Convirtamos eso en un botón. Y lo que vamos a hacer es simplemente crear una superposición muy simple, si quieres. Entonces lo que voy a hacer es agrupar eso juntos, hacer eso rojo, cambiar las líneas. Entonces, una cosa buena que te voy a mencionar aquí es que definitivamente vigila tu estructura de capas. Eso realmente va a ser útil para que sigas adelante si te pierdes o no estás seguro. Qué es un marco una vez que un grupo, para que puedas estar atento a los diferentes iconos aquí. Entonces este es un grupo, por ejemplo, con la línea discontinua. Y el marco es más de esto como tipo hash de cosas. Aquí había ido a x, luego superposición, cosa de superposición. Y hagamos una línea simple aquí y aquí. Vamos a hacerlos un poco más apagados. Y luego, no te preocupes, repasaremos este tipo de cosas un poco más tarde. En uno de los módulos posteriores, en realidad deshazte de eso solo con fines de demostración. Entonces, si hacemos esto, podemos crear muy rápidamente una superposición ustedes mismos, algún relleno. Hagámoslo. Y luego darle un poco de color a algo. A lo mejor no ese color. Sí, vamos, vamos a hacer eso y darle un radio fronterizo. Entonces aquí tenemos nuestro overlay básico, y este es un frame. Y esto sólo se puede hacer porque está configurado como marco. Entonces, cuando entramos en la pestaña Prototipo, en realidad puedes crear una nueva interacción. Y al hacer clic en él, se abre una superposición. Y podemos seleccionar el marco de superposición. Y cuando hacemos eso, podemos agregar un fondo. Así que tenemos el fondo aburrido en el fondo. Y ahora, cuando abras este prototipo, podemos desplazarnos como demostramos antes. Y si haces clic en el botón azul, entonces podrás ver tu superposición. Esta es solo una de las muchas cosas diferentes y poderosas que puedes hacer con los marcos. Y lo que realmente quería compartir contigo para ayudarte a entender cuál es la diferencia entre un grupo era el marco y ¿por qué realmente tenemos estas dos cosas diferentes? 15. ¿Debería usar grupos o marcos: Fresco. Entonces ahora que te he dado una introducción a qué son los grupos, qué son los marcos, el tipo de cosas que puedes lograr con ambos, ojalá empiece a quedar claro qué cosas deberías estar usando con más frecuencia y cuándo. Aún así me hacen la pregunta, ¿ cuál es mejor o cuándo debo usar cualquiera? A diferencia de si quieres una regla general rápida, siempre por defecto a un marco. Y hay un par de razones por las que. Entonces, aunque los grupos sí tienen su lugar y todavía se comportan mucho más como lo harían las imágenes cuando escalas las cosas hacia arriba y hacia abajo, especialmente cuando estás trabajando con archivos de presentación, ese podría ser un comportamiento al que estás más acostumbrado a un, eso sigue siendo algo que puedes replicar con un marco configurando los objetos dentro a un comportamiento de escala. Y B, las capas de textos simplemente no se comportan de la misma manera. También puede usar la herramienta de escala en su lugar y puede cambiar el tamaño de las cosas. Entonces esas son las principales razones por las que realmente usarías un frame sobre un grupo. Y sí tienen un par de casos de uso. Pero si revisas a través del artículo que compartí antes en realidad ya no es así la capacidad de usar restricciones en grupos. Entonces ese es algo que solía ser el caso y ahora eso se ha ido. Entonces, en mi opinión, son algo un poco más heredado. Y creo que uno de los otros mayores, yo diría trampas porque no es un beneficio mayor cuando un diseñador diferente o una persona diferente está trabajando en tu archivo Figma, si quiero alargar un marco. Entonces por ejemplo I. Podría tener una pantalla de iOS o una pantalla de aplicación móvil en la que estoy trabajando. Y quiero agregar una sección extra. Si lo alargo para cualquier grupo que esté dentro, eso va a alargar la cosa. Entonces te voy a dar una rápida demo de eso ahora solo para mostrarte hola. Entonces aquí hay un ejemplo de una pantalla móvil. En realidad, vamos a darle un oops a eso. Vamos a darle un relleno rápido. Sólo para que se vea un poco más como una página. Lo que he visto es que aquí tienes una barra de navegación, este grupo de cosas. Y por qué lo llamamos solo el filtro. Quiero, ya he visto antes es que este no es el predeterminado en realidad. Por lo que puede que no sea un problema para ti. Pero a medida que los diseñadores trabajan en un archivo grande y a medida que trabajan juntos a través de un problema grande, a veces las restricciones se establecen a escala por defecto. Para un grupo de cosas, generalmente esto será íconos o grupos de un par de cosas diferentes juntos. Lo que verás es que si necesito alargar la pantalla, este tipo de cosas pasan. Y eso es realmente frustrante. Cuando usas un pie de página. Definitivamente siempre debe ser fondo. Así que no te preocupes, luego entraremos en ese tipo de restricciones. Pero verás este tipo de comportamiento y eso no es lo que queremos. Lo que queremos es que solo cree un poco más de espacio para que podamos trabajar al trabajar en un diseño. Eso resume más mi opinión sobre cuándo usarías un grupo, cuando usas un marco, cuento largo, corto, usas marcos, son mejores. 16. Secciones para archivos organizados: Fresco. Entonces el último, no falta mucho para ir es la herramienta de sección aquí arriba con el marco. También tienes esta cosa llamada sección. Esta es una característica relativamente nueva o Figma, que ha sido muy recomendable. Entonces como he estado pasando por estas diferentes lecciones y compartiendo contigo cómo encajan las cosas. Puede ser muy fácil perderse. Y lo que podrías tener la tentación de hacer es agrupar ciertas cosas en un marco. Pero cuando haces eso, puedes perder la integridad de las interacciones o la forma en que configuras ciertas cosas. Y las secciones tienen comportamientos ligeramente diferentes y diferentes propiedades que, en pocas palabras, lo único que necesitas saber es que esta es una forma más segura de agrupar una colección de diferentes capas y marcos y cosas en las que estás trabajando para que sea más fácil para alguien mirar tu archivo. Entonces, por ejemplo, si hago clic en la Herramienta Selección o Mayús S para el atajo, puedo hacer esto. Puedo darle un nombre a esta sección. Entonces este es el primer conjunto de cosas. Y si creo una nueva sección, estos pueden ser mis marcos. Marcos, herramientas de selección de marcos. Y lo que puedo hacer es moverme. ¡Vaya! No ha repasado esas cosas del todo bien. Lo que puedo hacer es cortar esas cosas usando el comando de corte y simplemente pegarlas dentro. Puedo hacer eso y luego arrastrar todas mis cosas agradables y fáciles. Y es bastante bueno porque aquí estoy trabajando en formas y líneas. Y puedes cambiar el color de tu sección. Entonces digamos que quiero hacer más de un color rojo claro porque esto es algo de lo que necesito deshacerme y puedo cambiar la etiqueta. Esto es realmente muy útil cuando quieres organizar tu trabajo y dejar claro a alguien la edad que estas cosas encajan entre sí. Uno de los superpoderes que encontrarás las secciones es que puedes anidarlos uno dentro del otro, pero son en gran medida una cosa de primer nivel. Entonces explica a qué me refiero con eso. Entonces tomamos esta, esta selección de marcos y secciones. Lo que puedo hacer es seleccionar eso y puedo mover las formas y líneas a esta sección. Y ahora todo esto es movible en conjunto. Entonces eso es bastante práctico. Pero una de las cosas que es diferente de las secciones es que no se pueden arrastrar a cuadros. Entonces digamos que creo un marco de aproximadamente este tamaño. Y quiero arrastrar esta sección o arrastrar una copia. Puedo arrastrarlo aquí a esta zona. Pero como se puede ver, se le agrega a este marco. Entonces uno de los problemas con configurar marcos antes y usar eso para organizar tu trabajo visualmente será el mismo, pero debido a que un marco puede estar dentro de cualquier otro marco, comienza a desordenarse muy rápidamente, donde accidentalmente podrías agrupar cosas o agregar cosas a un marco y de la manera equivocada. Entonces las secciones hacen dos cosas. Te permiten organizar tu trabajo y dejarlo claro. Pero hazlo de una manera que no te sea fácil ni para ti ni para otros diseñadores navegar o editar tu archivo para organizar las cosas de una manera que pierda la integridad de la estructura de lo que estás trabajando y armando esas cosas. 17. Punto de control 3: diseño auto, héroe mi héroe: Hola, playera, nueva iluminación, ese mismo contenido de calidad. Entonces en esta lección vamos a hablar sobre el diseño automático. Te voy a mostrar cómo todas esas diferentes herramientas y técnicas que puedes usar como parte del auto-layout realmente pueden hacerte la vida mucho más fácil. Y realmente puede hacer tu día a día en Figma y construyendo diseños. Eso mucho más de un placer. Te voy a dar un rápido show ahora de lo que vamos a poder construir el tiempo que terminemos de enseñarte esas habilidades. Aquí en Figma, tenemos un ejemplo trivial de un sitio web para la venta de microondas. Y a medida que me desplazo hacia abajo, parece bastante típico. Solo un par de imágenes con alguna copia, un llamado para el llamado a la acción. Y esto la colección brillante siempre que queramos , queremos llamarlo. Y si me alejo un poco, medida que crezco y encojo esto, se puede ver como todo responde al tamaño. Y eso es algo que lo exploraremos juntos. Esto parece desalentador, no te preocupes. Lo repasaremos paso a paso y te sorprenderá lo rápido que puedes armar algo así tú mismo. En cuestión de varios minutos, menos de una hora seguro. Empecemos. 18. Conceptos básicos de dimensionamiento horizontal/vertical y espaciado: Entonces primero vamos a cubrir Horizontal y Vertical Auto Layout y darle un poco de una idea de cómo funcionan estas cosas juntas. Entonces, con lo que me gusta empezar es con estos navbar y los componentes futuros. Y te voy a mostrar cómo encajan esos. Primero, tomemos la barra de navegación superior. Toma una copia de eso y déjame destruirla primero. Entonces, si me desagrupo y puedes ver eso es un poco difícil de ver. Incluso cambia esto a, vaya, a un color negro temporalmente. Podemos ver por aquí que tenemos un logo y luego tenemos un marco de estas cosas diferentes. Entonces, pero desagruparlo, probablemente empezarás con algo como esto. Consigue un grupo de artículos y obtendrás otra cosa que quizás quieras poner a un lado. Destacará estos y luego lo convertí en un marco. Entonces esa es la opción de comando G. Dos formas en las que puede agregar todo para diseñar aquí es primero es el diseño definitivo. Simplemente puede hacer clic aquí o el atajo. Me gusta usar este turno a, y eso aplica automáticamente el diseño automático. Puedes ver aquí va a establecer algún relleno horizontal, lo que sea más cercano y los dividirá de manera uniforme. Puedes ajustarlo tú mismo a lo que quieras. Y esto establece el valor por defecto o el horizontal. Si por ejemplo tomo tres copias de esto y las hago más o menos verticales y hago lo mismo. No necesitas agrupar al principio, simplemente puedes presionar Mayús a y te llevará directamente a agregar todo al diseño en Figma resolverá que todo debe apilarse verticalmente y averiguar el espaciado áspero que debería estar ahí. Entonces a partir de aquí, volteemos este original y empecemos a anidarlo. Entonces esto es realmente bastante importante. Así que cubrimos los marcos de anidamiento y eso es muy importante para que estas cosas sucedan. Entonces aquí tengo este marco a la izquierda. Entonces estos son mis elementos del menú. Uy. Eso es genial. Esos elementos del menú. Y es ésta. Esto es Jacquard blanco porque estoy usando una instancia de un componente. Y luego agrupa estos y presiona Shift a nuevamente. Verás que he añadido diseño automático. Y se hace automáticamente. Esto. Una cosa que querrás hacer para lograr el efecto de barra de navegación real es ignorar el espaciado entre. Y vamos a darle un relleno solo para que sea más fácil de ver. Hagamos algo como esto para poder diferenciarlo. Y lo primero con lo que te encontrarás muy rápido es el espaciado. Entonces vamos a, vamos a, vamos a hacer esto. Y esto 12.12. Así que eso pone lo izquierdo y lo correcto y lo incorrecto que notarás es que mientras hago esto, no responde. Lo que queremos que haga es cambiar el modo de espaciado. Entonces, si deshago eso y voy aquí a los tres puntos, ahí está esta cosa llamada empaquetada, y el espacio entre el valor predeterminado está empaquetado y puedes establecer cantidad de espaciado que debe haber entre cada uno de los elementos en ese marco en particular. Pero si hago espacio entre, ahora, entre estos dos elementos en este marco, medida que crecen y se encogen, siempre se pegará a la derecha. Entonces, si solo agrego para que se vea un poco más natural y normal, revele la estructura de lo que hay aquí dentro. Para crear suficiente barra. Tenemos los elementos del menú anidados interior con su propio diseño horizontal. Tenemos el logo a la derecha. Entonces. Para esta barra de navegación principal, tiene su propio diseño automático, pero hemos cambiado el espaciado y le hemos dado un relleno. Y lo que hemos hecho es ajustar el modo de espaciado para obtener esta capacidad de respuesta. Entonces ese es un ejemplo realmente simple que puedes hacer. Y trabajándolo paso a paso para comenzar a explorar cómo funciona la horizontal. El vertical funciona, y también algunas de las cosas como el espaciado, que entraremos en un poco más detalle en una de las siguientes lecciones. Lo único último que hay que añadir es que para los diseños verticales, esto es muy lo mismo, pero las cosas simplemente fluyen en una dirección diferente. Así que puedes ver aquí, si pongo el cursor sobre el espaciado, espaciado vertical entre los elementos cuando un volteo entre horizontal, vertical. Al mirar la foto, se puede ver que cada uno de estos elementos, cómo estas vacunas se espacian entre sí. 19. Alineación y orden de artículos con diseño automático: En esta lección, vamos a cubrir la alineación de los artículos y vamos a cubrir el orden de los artículos. Porque una cosa que encontrarás es que a veces quieres reorganizar el orden de las cosas o puede entrar en el orden equivocado y es posible que necesites ajustar las cosas. Muy común, pero muy fácil. Te voy a mostrar. Así que aquí están los dos ejemplos con los que voy a estar trabajando es el pie de página y una de las piezas principales de la imagen característica más copia. Entonces tomando esto como ejemplo que seguimos uno de lo que aprendimos de la primera lección, como lo hizo aquí. Para lograrlo se está haciendo una alineación vertical de todos estos diferentes ítems. Y entonces lo que he hecho es simplemente cambiar la alineación y tienes esta muy bonita cuadrícula. Esto hace que sea muy sencillo cambiar la forma en que quieres que se arreglen las cosas. Para que los pudiera arreglar a la izquierda, a la derecha. Si elijo tener una altura fija, puedo cambiar para que esté en la parte superior izquierda, en la parte inferior izquierda, por encima a la derecha, en el centro muerto. Así que hay tantas opciones diferentes con las que tienes que jugar. Y es bueno tener en cuenta que si quieres algo que sea un poco más complicado, tendrás que hacer algún anidamiento de marco para conseguir logrado para lograr el efecto deseado. Para ilustrar algunos de esos efectos de anidamiento de marcos, usaré este ejemplo por aquí. Así que vamos a cubrir el reordenamiento de las cosas muy rápido antes de sumergirnos en ella, donde puedes hacer es que viste en la otra pieza, yo tenía esto y estaban en orden alterno. Simplemente arrastre su artículo. Y solo funciona siempre y cuando haya un diseño automático en el marco padre. Este ejemplo enmarca 63, solo debe hacer clic en él. Tenga en cuenta que cuando arrastre ese elemento a su capa podría tomar cosas fuera del marco de diseño automático y volver a agregarlo. A veces tan fácil o a veces es un poco quisculento y puedes empezar a ir a anidar las cosas en un poco más profundo. Entonces, por ejemplo, aquí, he movido la imagen a un fotograma diferente. Entonces, al mirar el anidamiento de marcos y ajustar cómo están las cosas, para ilustrar primero, hagamos esto un poco más grande. Para que veas que esto está en el centro. Si cambio la alineación aquí al medio, eso cambia ese estilo y cómo eso se une. Pero si hago esto, se puede ver eso internamente, esto se hace de una manera diferente. Si cambio esto a ancho fijo, que cubriremos en un poco, no te preocupes. Y solo cambia el ancho de eso. Puedo cambiar el ancho de algunos de los elementos internos como este, por ejemplo, se puede ver este marco con toda la copia. Puedo cambiar cómo se muestra eso, ya sea a la izquierda o a la derecha. Entonces es por eso que comenzarás a ver que tratar de enseñar todos estos paso a paso puede ser bastante complicado porque muy rápidamente se unen de la mano para lograr componentes responsive y hacer un diseño responsive. Dentro de Figma. 20. Modos de abrazo, relleno y redimensionado fijo: Entonces a continuación vamos a ver los modos de redimensionamiento horizontal y vertical. Así lo hacen todos estos ejemplos usando la horizontal, pero las mismas reglas se aplican para la vertical. Yo hago horizontal porque eso es probablemente con lo que vas a estar luchando con más frecuencia a medida que empieces a aprender cómo encajan todos estos. Usando esta sección que reúne la colección brillante, como la llamé. Tomemos una copia de todas estas imágenes y apliquemos Auto Layout. Y recuerda el atajo para eso es Shift a. y cuando hago eso, lo que hace por defecto es que establece el espaciado. Entonces cambiemos eso a 40. Entonces es un poco más fácil de ver en la pantalla. Y podemos ver que el modo de espaciado predeterminado para horizontal y vertical no es realmente abrazar. Lo que eso significa es que si copio y pego otra imagen que se va a agregar a ese fotograma padre. Entonces este es el marco 63. Así que veamos la horizontal predeterminada hasta cambiar el tamaño. Modos de cambio de tamaño. Se puede ver como le agrego elementos, sólo va a alargar la longitud de esa cosa. Entonces, lo que deberíamos comenzar a explorar es cómo funcionan los comportamientos fijos y de relleno. Se necesita una copia y vamos a cambiar el nombre de esto por defecto. Echemos un vistazo a fijo. Entonces, si cambio esto a fijo, lo que eso significa es que el marco padre fijo también diseno todavía existe, pero el tamaño de este marco seguirá siendo el mismo. Si borro esta cosa y tenemos un artículo menos o incluso a menos artículos. Se puede ver que el tamaño de ese marco en sí en realidad todavía conserva el tamaño original. Y esto es realmente importante a la hora armar tu maquetación. Porque si por ejemplo pongo esto en un marco como este y cambio el fondo. Cambiemos eso a un color ligeramente diferente. Hagamos uno más oscuro. Se puede ver que está arreglado así. Y si agrego auto-layout y trato de moverlo al centro, todos los elementos, solo quedan tres. Entonces va a poner esos más hacia el lado izquierdo de este marco. Y eso podría no ser lo que quieres lograr. Si cambio esto para abrazar, entonces puedes ver que eso automáticamente se centra. Y una cosa que puedo hacer aquí es si acabo de cambiar el tamaño de este marco aquí. Si te das cuenta y mantenías un ojo cercano. Pasó del defecto de abrazar cualquiera que sea el tamaño de los contenidos, fijo. Y ahora, cuando mezclé la alineación en este nuevo frame 63 parent frame, y este frame fijo con las tres imágenes, ahora tenemos el comportamiento hug. El último comportamiento que quiero compartir con ustedes es el contenedor de llenado. Y es importante recordar que llenar contenedor sólo funciona en un contenedor dentro de otro. Así que puedes ver aquí tengo este par fijo en el marco. Llamemos a esto. ¿Cómo se llamaba? Demostración de llenado de contenedor. Y renombrar este marco aparente. Si cambio este para llenar, entonces puedes ver que ahora ocupa el espacio de ese marco padre para que sea más grande. Se puede ver que el espaciado a la izquierda y a la derecha es el mismo. Y lo haré más pequeño. El espaciado, coincide con ese tamaño y espaciado también. Entonces estos son realmente buenos para mezclarlos. Y a medida que empiezas a jugar con ellos, si tienes tu anuncio, si agrego otro, por ejemplo puedes ver esto se llena, pero se desborda aquí porque no está abrazando el contenido. Entonces eso es probablemente lo último que realmente te hará consciente de ese contenido aquí. El marco en sí, la demostración del contenedor de llenado. Tomaremos el espacio central exacto con igual espaciamiento izquierdo y derecho. Pero el contenido dentro puede desbordarse a medida que agrego más artículos a él. Entonces dependiendo de lo que quieras, si cambio eso para abrazar de nuevo, entonces es más receptivo y ocupa el espacio y lo envuelve de manera uniforme y agradable. Entonces ojalá eso te haya sido muy útil como un tutorial muy pequeño pero rápido para mostrarte cómo funcionan los comportamientos de redimensionamiento de contenedores abrazar, arreglar y llenar. 21. modos de espacio y espacio de diseño automático: En esta parte, vamos a estar viendo modos de espaciado y espaciado. Y la mejor manera para mí de explicar esto con un ejemplo trabajado es con un botón o llamada a la acción, además de usar este ejemplo, que utilicé para explicar los modos de cambio de tamaño. Entonces, para explicar cómo funciona esto, reconstruir el llamado a la acción es probablemente la forma más rápida. Entonces, si mantengo presionada la tecla Alt u Opción, mientras arrastro la capa sobre, eso significa que estoy tomando un café y lo que voy a hacer es simplemente cambiar el color para que podamos ver que tomando esto, una de las cosas rápidas que puedes hacer si quieres crear un botón o crear algo como lo he hecho con la llamada a la acción aquí. Simplemente presione Mayús a, y eso crea todo para el diseño. Y lo que eso hace si solo hay un elemento, se establece por defecto y establece el espaciado entre los elementos en diez, así como el relleno horizontal y el relleno vertical. Entonces, cuando se trata de espaciado, lo que quiero decir con eso es el relleno que está en la parte superior, inferior, izquierda y derecha de los elementos dentro de su grupo de diseño automático. Entonces, si configuro un color de relleno rápido, hagamos este. Vamos púrpura. Creo que los púrpuras, bastante bonitos. Ahora puedo cambiar de nuevo el color del texto y hacerlo un poco más fácil de ver. Entonces hagamos eso no parece estar funcionando. Entonces voy a cambiar esto así. Ahí vamos. Vuelvo a seleccionar esto, agrego un radio de borde solo para que se vea más abotonado. Y lo que puedes ver es que se ve bien por sí mismo. Pero a medida que juegas con estos valores, puedes usar eso para cambiar el espaciado que hay alrededor de tus artículos. Por lo tanto, eso puede ser útil dependiendo de cómo desee que sus elementos fluyan automáticamente usando el diseño automático o cómo desea que se muestren. Si estás haciendo un llamado a la acción como este, haciendo algo más como un botón. También puedes hacer clic en esta cosa por aquí para establecer un relleno individual. Entonces digamos por alguna razón, quería agregar como 50 espaciado a continuación porque solo pensé que estaría bien. Y aquí, si recuerdas, tenemos la alineación. Entonces, si lo alineo al centro y a los elementos dentro, entonces eso no va a afectarlo. Por lo que puede que no se comporte de la manera que pretendes. Así que lo he hecho accidentalmente, pero creo que en realidad esta es una muy buena lección. Dónde está el acolchado en la parte inferior que va a dictar a dónde va. Entonces si luego cambio eso a diez y luego cambio la altura de esta cosa, entonces se puede ver que la altura se vuelve fija y el relleno sigue aquí, arriba e abajo, entonces los elementos dentro fluirán entre ellos. Entonces esa es una demostración rápida para pasar por el espaciado. Lo último por lo que pasar son estos modos básicos. Entonces, por costumbre, creo que es agradable agregar un pequeño botón de sombra porque simplemente redondea bien las cosas. Si recordamos de esto o de una de las lecciones, si la pasaste, aquí, tengo esta demo de contenedor de llenado, pero no todo se presenta muy bien. Todo lo que hace es que se alinea a la izquierda. Así podría alinear las cosas en el centro. Alguna vez quisiste que el espaciamiento entre ellos fuera consistente. Pero a veces quieres que llenen todo dentro de ese marco. Entonces lo que puedes hacer es si demuestro cómo funciona esto primero, si hago esto eso se queda en el centro. Selecciono esto, llene una demo de contenedor. Si hago clic en los tres puntos, entonces obtienes acceso al modo de espaciado. Y usando el espacio entre eso se asegurará de que el espaciado entre se cambie automáticamente y se establezca automáticamente. ¿Estoy haciendo eso? Ese es un truco muy simple de un solo clic. Eso significa que el espaciamiento entre siempre es uniforme y consistente entre sí. Pero ocupa el espacio del contenedor que está usando un contenedor de llenado. Modo de redimensionamiento horizontal o cambio de tamaño vertical. Entonces esos son los ejemplos concretos que puedes usar. Y ojalá te haya ilustrado cómo establecer el espaciado en las cosas, cómo usar el contenedor de relleno y establecer el modo de espaciado a otra cosa. Y ojalá usemos esos para ayudar a lograr aún mejor. También diseña las cosas por ti mismo. 22. Componentes: maestrías e instancias: Estupendas cosas. Así que vamos a saltar directamente a los componentes y a las dos cosas que vas a necesitar tener en cuenta, nuestros maestros e instancias. Y te voy a mostrar lo que quiero decir con un ejemplo concreto. Entonces, para un pequeño ejemplo, comencemos con el botón humillado usando t para hacer una capa de texto. Y lo llamaré mi botón. Y si recuerdas, tenemos nuestros textiles. Así que busca el estilo de botón. Entonces eso es algo que puedo usar bastante bien. Entonces simplemente podemos agregar auto-layout y eso por defecto nos dará algunas cosas que son bastante útiles. Dale un radio de borde simple y un relleno. Escojamos este color. Sí me gusta este tipo de color brillante. Y permítanme actualizar eso a esto. Entonces lo que puedes hacer desde aquí es ahora que tienes esta cosa del botón. Pero, ¿y si quieres usarlo varias veces? Si quiero editar el contenido o el color, digamos, y actualizan el color de este azul tres a como un verde. Si tengo que hacer eso en un prototipo, va a ir a todas partes. Y voy a tener que ir a cambiar cada botón. Lo que puedes hacer es si lo deshago y borro estos dos. En realidad, no, déjame, déjame copiar esto de nuevo. Déjenme convertir eso en un componente. Entonces hay dos formas de hacerlo. Puede hacer clic con el botón derecho y crear un componente, o siempre uso la tecla de opción de comando abreviado. Y lo que eso hace es crear lo que se llama maestro para un componente. Y se puede ver eso por el pequeño símbolo aquí. Entonces no creo que Zooming parezca marcar la diferencia. Pero siempre puedes mirar hacia el lado izquierdo de tu panel Capas. Se puede decir si algo es una instancia es un maestro o no. Y se puede ver por este resaltado morado , lo copio sobre. Ahora notarás que no tiene como un nivel con nombre, pesar de que en realidad tiene un nombre. Y se puede decir ese cliente de fondo, Llamemos al fondo. Y si actualizo la etiqueta a tu botón, todos los cambios se propagan. Ahora bien, esta es una de las cosas más poderosas que puedes usar usando componentes en Figma. Y no sólo eso, hay tantas cosas más que puedes hacer. Pero si puedes clavar aquí los conceptos básicos de maestros e instancias con componentes, eres dorado. Entonces como otro ejemplo, sólo para darte una idea, puedo personalizar mi instancia por aquí. E incluso si actualizo esto a ellos son botón, eso solo va a actualizar las instancias en las que no he anulado cuáles son los valores predeterminados. Y se puede ver esto de nuevo donde si cambio el color de este por ejemplo así que voy a cambiar el color a amarillo, por ejemplo ahora de un cambio el color del original, el amarillo permanecerá, pero el botón inferior cambiará a púrpura. Entonces eso es un poco como el, el ciclo de actualización funciona un poco entre un maestro y una instancia. Y siempre se pueden decir algunas cosas por ejemplo porque es morado en cuanto al contorno así como al pequeño símbolo. Verás en el panel de capas, que es un diamante vacío. Solo hay, lo único que quizás quieras saber es que hay tantas otras cosas que se pueden compartir cuando configuras tus componentes. Entonces, cuando lo configuras, no es solo el relleno y el contenido del texto. También hay cosas como la opacidad. Entonces dije que eso es 50 por ciento. Eso en realidad se propaga todo el camino a lo largo de aquellos como el borde o el trazo, debería decir. Las tantas cosas diferentes que puedes configurar en tu componente. Y esta es bastante simple donde es sólo una sola capa de texto, pero puedes agregar tantas cosas diferentes dentro de ella. Entonces podría, por ejemplo, agregar dos cosas de texto y volver a cambiar eso a 100% de opacidad. Y se puede ver como con dos capas de texto, puedo decir aquí está el botón y cambiarle esto a su autobús. Y para que puedas ver eso a partir de un simple ejemplo de botón, puedes empezar a construir encima de esto. Y te animo a experimentar e intentar que todas estas actualizaciones vayan y vengan y te asegures de estas actualizaciones vayan y vengan que te sientes cómodo con qué cosas puedes establecer de tus maestros y qué cosas se propagan hasta tu instancia y qué cosas se salvarán a sí mismas. No se verá afectado por las actualizaciones maestras. 23. Anidación de componentes: A continuación, vamos a construir sobre ese ejemplo haciendo anidamiento de componentes. Entonces suena exactamente como lo hace en la lata. Estás prácticamente poniendo componentes dentro otros componentes y otros dos marcos. Por aquí. He hecho un poco de preparación antes de tiempo. Entonces hizo una cosita de avatar. Y ellos apenas 50 por 50 pixeles, solo usando la herramienta elipse para la cabeza y para el cuerpo también, y simplemente hundiéndola. Y tengo dos capas de textos aquí solo usando el estilo header six así como el estilo body one. Y tenemos el autobús y de la lección anterior. Entonces lo que puedes hacer a partir de aquí es que si tomo una instancia de esto, asegúrate de tomar una instancia, entonces puedes tomar las otras cosas que quieras. Diseño automático a eso. Recuerda que el atajo para eso es la letra a. y vamos a hacer ese cero entre eso. Y lo que voy a hacer es llevarme una copia de este botón. Simplemente voy a cambiar el contenido de una vista, por ejemplo ahora, si altero, diseñar este centro de salida, lo cual es bueno para mí, quería reducir eso. A modo de ejemplo. Dale, digamos diez espaciado por todos lados. Sólo para que parezca una tarjeta. Llamémoslo blanco, gris seis. En realidad, quiero hacer blanco, así que es más fácil para ti ver ojalá, y border-radius es normal. Y a partir de aquí, ahora tenemos un prototipo básico para una cosa de tarjeta. Lo que puedes hacer es tecla Opción de Comando para convertirla en componente. O recuerda, siempre puedes hacer clic derecho en algo. Se puede convertir un marco en un componente. Simplemente cambie el nombre de esto a una fila de tarjetas de perfil, digamos. Ahora tenemos un buen maestro, donde dentro de este componente maestro, la fila de tarjetas de perfil, tenemos dos componentes, el avatar y regular, y este componente de botón. Ahora bien, si tomo una instancia de esto, si estoy armando una pantalla, puedo tomar algunas copias diferentes de esto. Agreguemos el diseño automático y llamemos a eso 20 entre cada fila. Y ahora si hago actualizaciones a esto, así que por ejemplo si cambio los colores de selección del perfil a verde. Déjame, tal vez tenga que profundizar en esto por alguna, por alguna razón. Ahí vamos. Ahora se puede ver que esos cambios ahora se propagan. Entonces puedes ver que incluso solo usando componentes como potentes, pero anidando tus componentes y entendiendo el ciclo de actualización entre ellos, realmente puedes componer juntos tus diseños y tus diseños y cosas que quieres comunicar de manera muy, muy rápida. 24. Variantes y propiedades: Entonces, esta última gran lección que tengo que enseñarles se trata variantes y los componentes de Eve no eran poderosos, lo suficientemente poderosos. Las variantes son una manera de hacer un montón de cosas personalizables y decir global en lugar de crear muchos conjuntos de componentes. Así que toma un ejemplo en el que quizás quieras tener muchos estilos de botón diferentes. Y en el pasado, solías tener que crear cada estilo único. Así que tendrías que crear botones de color predeterminado, cada color con iconos sin contras de diferentes tamaños. Y eso solo crece exponencialmente. Entonces, las variantes que pueden reducir eso a un conjunto de componentes agradable, realmente pequeño y fácil de usar con muchos alternadores configurables. Entonces haremos un ejemplo trabajado juntos para mostrarte cómo encaja eso, cómo encaja y se puede lograr. Aquí en Figma facturación del ejemplo anterior, lo que he hecho es que he duplicado la fila de tarjetas de perfil y las he renombrado. Entonces esto es para que sea fácil cuando configuras varianza. Entonces la varianza es generalmente cualquier cosa donde tienen algo similar. Así que construyamos otro ahora que sea un poco más alto, y luego agreguemos algo de sombra solo para distinguirla visualmente de todas las demás. Entonces, por ejemplo, podrías querer estar intercambiando algo y eso es algo que acabas de agregar o algo así. Si mantengo presionado Alt o puedes hacer clic con el botón derecho copiar y pegar como de costumbre. Y lo que tenemos que hacer es separar esta instancia porque queremos convertir esa de una instancia en su propio maestro. Y cambiemos el nombre a este resaltado. Y podemos hacer algo sencillo. Simplemente aumentemos la altura o el efecto por defecto, que es una sombra. Y la tecla de opción de comando o haga clic con el botón derecho en girar al componente, y ahí va. Entonces lo que queremos hacer desde aquí es si seleccionas múltiples componentes, verás por aquí a la derecha, ahí está esta cosa llamada combinada como varianza. Entonces, cuando hago eso, se puede ver lo que se hace automáticamente. Entonces Figma ahora reconoce esto como un componente singular, pero tiene muchos estilos diferentes. Así que puedes ver aquí hemos abierto esta ventana con las propiedades y déjame renombrar ese estilo. Y podemos ver que ahí hay algunos estilos diferentes. Tienes por defecto alguna vez un resaltado. Entonces eso es muy útil solo para inspeccionar lo que es diferente ahí dentro. Y puedes hacer todo tipo de cosas realmente geniales. Te voy a dar una rápida vista previa de lo que realmente puedes hacer. Ahora que lo hemos hecho con esta, esta variante, ahora podemos cambiar cualquier instancia existente por una de esas cosas resaltadas. Ahora, se puede empezar a ver el poder que no sólo podemos anidar componentes y empezar a propagar cambios de un lado a otro. Pero en realidad podemos agregar la capacidad de alternar las cosas retrospectivamente. Y ahora estos diferentes estilos. Y mientras estemos usando un anidamiento de marcos, y mientras estemos usando nuestro Auto Layout, muchas cosas pueden unirse muy rápidamente. Para darle una introducción y una ronda a las otras cosas que puede hacer va a estar alrededor de los estilos de propiedad. Así que te voy a dar un rápido adelanto de todos estos. Variant es la predeterminada que se establece. Entonces eso suele ser bueno para estados y estilos. Booleano es bueno si quieres esconder algo. Normalmente me gusta usar un signo de interrogación. Entonces, por ejemplo, título. Entonces podemos decir ShowTitle un título alto. Lo que puedo hacer es entrar en esa capa. Y lo que tendré que hacer es usar esta cosa donde pueda aplicar una propiedad booleana. Y así por defecto, eso es cierto si conecto todos estos arriba. Entonces aquí es donde probablemente sea bueno tener en cuenta que es bueno establecer tu componente y simplemente trabajar con dos o tal vez tres antes de conectarlos a todos. Ahora en estos, ahora tengo este pequeño toggle donde puede activar y desactivar el título. Entonces algunas otras cosas que puedes hacer, También está el intercambio de instancias y los textos de texto por ejemplo I. Solo puede entrar aquí. Y para el contenido podemos buscarlo. Entonces tipo de texto de textos. Ahora para todos estos, debería poder, porque sólo he mirado a ese, puedo cambiar esto a su título. Y eso se actualiza automáticamente. Y lo último es el intercambio de instancias. Entonces eso significa que puedes intercambiar entre dos componentes diferentes. Entonces aquí lo que voy a hacer es vincular este componente como un intercambio de instancias y es botón. Y lo que le voy a pedir a la gente que haga, los swaps preferidos que me gustaría que hicieras. En cuanto a hacer sistema de diseño va a ser esto. Ahora, pueden ver que puedo intercambiar entre Button y link. 25. Consejos para modelar componentes: Entonces aquí, construyendo encima de esas variantes y propiedades, hay un par de consejos rápidos que quiero darte solo para hacerte la vida un poco más fácil, más adelante en la línea mientras descubras cómo modelar las cosas. Así que sí te animo a que te sientes y practiques e intentes jugar y crear algunas cosas, cometer algunos errores para que puedas recordar y cimentar ese conocimiento en tu cabeza. Pero aquí hay algunos atajos rápidos también que pueden ayudar a avanzar rápidamente el aprendizaje. Bien, así que lo primero es alrededor del dimensionamiento de las cosas cuando estás haciendo un intercambio de instancias. Entonces esto se está construyendo a partir de lo que pasamos anteriormente. Se puede ver que la altura de este botón es de 39 píxeles, mientras que este enlace es de 19. Entonces si cambio eso a 19 y en realidad pongo la capa de texto justo en el medio. Oh, en realidad tengo que hacerlo así. No arregle la capa de textos. Entonces, cuando haces el intercambio de instancias, suele ser un poco más fácil cuando intercambias cosas. Entonces puedes ver que si puedes igualar el tamaño de la cosa, suele ser mejor. Entonces los íconos son buenos, por ejemplo, intercambian ese tipo de cosas. Es muy bueno tener en cuenta cómo se juntan las cosas y cómo se aplican los estilos al diseño automático y al dimensionamiento, ese tipo de cosas. Lo siguiente son los consejos rápidos torno no necesariamente booleanos, sino usando los alternas. Entonces al seleccionar esto, podemos ver que puedo seleccionar el estilo con el desplegable, así que eso es bueno. Usando la propiedad variant, tienes el título, que es hecho por un booleano. Tienes la propiedad text y la instancia while property aquí. Pero también lo que puedes hacer es que eliminaré esto para que solo tengamos dos. Y voy a renombrar estilo de estilo para resaltarlo. Y lo que notarás es que con este diamante, eso en realidad todavía significa que es una propiedad de tipo variante. Pero si cambio los estilos de o resalto o debería decir, de, digamos falso a verdadero. Entonces automáticamente Figma puede reconocer eso y está desgarrando lo que resaltó del menú desplegable a una alternancia. Entonces eso es realmente útil. Y algunas otras cosas que puedes hacer es en vez de falsas, también puedes decir sí y no. No estoy seguro si puedes. No puedes mezclarlos así puedes usar true y false, sí y no. Entonces esos son los tipos que puedes usarlos aquí, verdadero y falso funcionarán. Sí y no trabajo. Y esos los armarán. Entonces esas son solo algunas pequeñas cosas que he notado con el tiempo, construyendo componentes yo mismo y tratando de ensamblarlos juntos. Y eso realmente me ayudó a dictar y averiguar cuál es la mejor manera de modelar y expresar esta cosa. que sea más fácil para mis compañeros y para otras personas usar las cosas que he armado y las crea. 26. Punto de control: componentes sensibles: Increíble. Así que tenemos casi todo lo que necesitamos para poder realmente, verdaderamente ser muy rápidos y muy libres y poder expresar todas las cosas que queremos y unir diferentes prototipos lo más rápido que podamos pensar, que es lo que realmente me atrajo a la herramienta Figma y por qué todavía me encanta, usándola todo el día todos los días. Entonces, en este módulo, realmente vamos a hablar sobre diseño responsive y los componentes responsive. Y lo vamos a ver desde dos ángulos. Primero, veremos métodos para hacer que las cosas sean receptivas en Figma. Al siguiente vamos a hablar de a quién responden. Entonces, cuando hablo componentes responsivos y Figma y ese tipo de cosas, normalmente estoy pensando en los diseñadores. Entonces, ¿cómo puedo hacer la vida fácil para mí, para mis compañeros de equipo para que puedan unir prototipos muy rápidamente y poder ajustar esas maquetas para que podamos entregar al ritmo que necesitemos Pero también hay un diseño receptivo. Así que vamos a tocar el diseño responsivo muy brevemente. Este no es un curso para ayudarte a aprender los fundamentos del diseño web responsive, pero lo abordaremos y cómo Figma puede ayudarte a llegar allí. 27. Métodos de modelado sensibles: Sobre la base de lo que hicimos en una de las lecciones anteriores, acabo de tomar uno de nuestros componentes que construimos juntos. También he hecho otro, y aún no lo he configurado por completo. Pero solo para ilustrar las diferencias entre las dos formas de modelar componentes para la capacidad de respuesta. Entonces primero, este marco anida un diseño automático. Entonces lo que notas es que a medida que crezco y encojo este componente en particular, el tamaño de las cosas, el botón de vista se queda a la derecha. Lo que notarás es que lo arreglaremos en un momento, pero el botón de vista también va encima del texto. Entonces eso es algo receptivo con esta versión de restricciones. Lo que he hecho en cambio es que si recuerdas, enmarqué las capas de texto juntas y lo aplico también layout y aplico a todos para diseñar a toda la tarjeta en sí. Entonces el horizontalmente, se habría aplicado en última instancia siempre con el modelo de restricciones. Acabo de poner todo dentro. Entonces tienes tu avatar, tu título, y el contenido corporal, y el botón. Y lo que puedes hacer es cambiar las restricciones de estas cosas en relación a dónde encaja en su marco padre. Y es muy importante que como marco también, porque creo que funciona un poco diferente con los grupos, pero nos apegaremos a los frames porque los frames son buenos. Recuerden, ahora que lo he hecho, si luego crezco y encojo esto, ahora se comporta exactamente como lo hace el otro. Entonces sería preguntar como, ¿cuál es la diferencia entre estos dos? Y algunas otras cosas que puedes hacer. Así que puedes ver aquí tengo este marco y el cambio de tamaño horizontal está configurado para llenar. Pero lo que aún no hemos hecho es establecer el redimensionamiento horizontal en el título y el cuerpo necesita llenar. Lo que notarás es que ahora cuando encojo esto, el texto se envuelve automáticamente. Se puede ver como encojo eso, entonces el todo va al centro de esa tarjeta. Y si no me gusta eso, puedo ajustar a donde va todo. Puedo usar la alineación. No te olvides del diseño automático y cambia esos ajustes hasta que esté feliz. Lo que notarás es que si hago algo parecido, puedo hacer esto y cambiar el ancho, el ancho de estos, todo el camino hasta aquí, hasta el final. También puedo cambiar esta restricción a izquierda y derecha. Así que sí te animo como siempre, a experimentar y jugar con estos escenarios para ver cómo encajan todos. Al hacer esto, se puede ver que el texto ahora cambia. Y entonces lo que notarás también es que el fondo no ha cambiado para envolverlo. Y aquí es donde empiezan a aparecer las diferencias. Donde hay un montón de cosas que vamos a estar haciendo. Cosas muy básicas para hacerlas receptivas. Ellos tipo de trabajo. Pero si quieres que las cosas se envuelven alrededor de las cosas y que funcionen un poco así, necesitas un poco también de diseño. Eso no quiere decir que no puedas mezclarlos a los dos. Entonces, si bien estos son dos enfoques independientes, es muy bueno que intentes experimentar y mezclar y combinar lo que necesitas. Entonces hay un ejemplo para éste. Puede que no quiera que el avatar esté realmente en el centro. En realidad quiero que esté en la cima. Entonces lo que puedo hacer es si descargo esto solo para que sea más fácil porque necesito configurar las cosas. Y por dentro, se puede ver que todas estas cosas en el interior están puestas a escala. Entonces, si configuro todos ellos para que estén a la izquierda y a la parte superior, por ejemplo , ahora, cuando cambio la altura, realmente puedo cambiar la altura para ser llenado contenedor. Entonces esto significa que el avatar y el texto se alinearán más amablemente y de manera más natural. Mientras que si antes intenté hacer eso, puede ver que se estira así y solo escala. Um, así que creo que estos son ejemplos lo suficientemente buenos para que veas y disecciones y empieces a jugar y lo que apreciarás y empezarás a hacerlo, de lo que quieres que te beneficies es jugar con estos ajustes para que puedas tener una idea de cómo encajan todas estas cosas. Creo que a partir de aquí, lo único último que hay que mencionar es con el diseño automático y hacer que las cosas sean receptivas. Intente pegarse a un eje. Así que no intentes hacerlo verticalmente receptivo, así como las vacaciones horizontalmente receptivo. Verás que cuando me encoja y haya hecho esto, realmente solo he trabajado en el eje horizontal. Pero en cuanto empiezo a cambiar la altura de esto empieza a no quedar muy bien y empieza a desmoronarse. Por lo que es bueno tener en cuenta, trate de apegarse a un eje y experimentar con estos dos estilos diferentes de hacer que los componentes respondan. 28. Responsive para diseñadores: Así que cuando se trata de diseñar responsivamente, pero para los diseñadores, esto es exactamente a lo que me refiero. Entonces, cuando tomamos esto como ejemplo, digamos que estoy usando algunas de estas filas de tarjetas de perfil. Y quiero alinearlos a todos. Así que estoy tratando de alinearlos así y obtener el rumbo hacia arriba. Simplemente escribe lo que quiera agregar en algo diferente al medio. Digamos que tengo uno de estos componentes, digamos. Y voy a acercar. Y si quiero ponerlo aquí, tendría que seleccionar estos, moverlos hacia abajo, y luego tengo que volver a verificar el espaciado. Así que probablemente ya te hayas dado cuenta o lo que recogiste de una de las lecciones anteriores ojalá, es que si las selecciono todas y uso la maquetación automática, eso viene al rescate. Y eso es algo que puedo hacer para hacerme la vida más fácil. Entonces aquí puedes ver si hago esto y cambio todas las cosas dentro para rellenar el cambio de tamaño horizontal, entonces si hago esto y tal vez cambiar el tamaño de fijo, lo cual está bien. Digamos 349 porque estamos trabajando en la pantalla 375. Y aquí puedo ajustar la altura de las cosas. Y no sólo eso, puedo reorganizar las cosas si es necesario, sin problema. Estoy incluso, aún más. Puedo agregar otra sección y puedo decir, voy a agregar esto y colocarlo en la pantalla y ponerlo aquí. Y si configuro todo bien, lo que notarás y lo que probablemente hayas empezado a reunir es que estás usando múltiples marcos dentro de marcos en realidad no es un problema siempre los administres con cuidado y cada fotograma debería servir a un propósito y hacer algo. Así se puede ver allí donde acabo de añadir también el diseño en allí. No demasiado, ha cambiado, pero ahora tengo esos contextos y otros contactos. Y digamos que estás dentro de la crítica de diseño, así que estás trabajando profesionalmente y tienes algunos de los diseñadores o stakeholders. Y dicen En realidad creo que el, mi otro contacto debería ir a la cima. Y pretendamos por un momento que los contenidos dentro de estos son diferentes. Simplemente puedo moverme por ahí. Y es un sencillo es que aún, aún más, puedo tomar una copia de esto y digamos vamos a diseñarlo para tablet, ¿verdad? Entonces, si hago esto, esto está arreglado. Pero lo que he configurado aquí para la barra de navegación, Vamos a hacer que se sienta contenedor. Ahora se puede ver automáticamente en realidad, este diseño no funciona muy bien. A lo mejor deberíamos hacerlos uno al lado del otro. Entonces, si luego los agrupo, cambio a para hacer el diseño automático y ponerlos uno al lado del otro. Y mantengámoslo a los 30. Se puede ver automáticamente que tratando de diseñar. Como diseñador cuando tengo componentes que responden de esta manera, me hace la vida mucho más fácil. Y hace que las cosas sean tan rápidas de hacer y de actualizar. Porque si todo fuera solo una capa en la parte superior, sí, es un poco frustrante a veces ir, aquí está mi mainframe y diseñando para iPad. Y tengo mi contenido. Tengo que entrar en este marco. Y este marco, que es esta columna, luego entra en este componente y luego haz algunos retoques. Pero si construyes tu, tu archivo Figma y tus diseños como composición, realmente, todas estas cosas en el interior deberían ser solo componentes que sean bastante fáciles seleccionar y de jugar con las propiedades que puedas haber configurado o cambiarlo por otra cosa. Entonces puedes ver eso automáticamente redimensionando las cosas. Si luego cambio estos de fijos a rellenos también, lo que recogerás, esto se convierte en un comportamiento y memoria muscular muy común que acumulas con el tiempo. Ahora puedo ajustarlo y puedo empezar a jugar con todos los diferentes diseños y cosas y empezar a ver cómo podría comportarse mi diseño de verdad. Entonces eso es algo que definitivamente sugiero y eso te da un poco la sensación de intentar diseñar, pero hacer que las cosas respondan para ti como diseñador. Y es muy importante cuidarte y hacerte la vida más fácil. 29. El diseño web responsivo: Así que abordaremos muy brevemente cuando se trata diseñar sitios web receptivos. Y hago esto intencionalmente porque de nuevo, esto es solo para ponerte al día y trabajar con fluidez en Figma, no para enseñarte a hacer diseño web responsive, sino si quisieras explorarlo y entender como llegué a estas decisiones. Así que parece bastante sensato alinear estos lado a lado. Pero, ¿cómo encaja todo y cómo hacemos esas cosas? Así que la historia de ello muy brevemente todo se reduce a la disposición y las dos cosas que queremos mirar, nuestros contenedores en columnas. Entonces por contenedor, lo que queremos decir es que una cosa fija en el centro de la pantalla. Notarás que si tenemos un hipotético iPad y lo estiramos así, hay un tamaño máximo al que debería ir. Si vuelvo a reducir eso, lo que he hecho es configurar también una cuadrícula de diseño. Y si uso Control G, y eso puede alternar eso aquí, lo que estoy usando 0s, sistema básico de 12 columnas, que es bastante estándar. Y lo que notarás es que no está perfectamente alineado, pero es suficiente para darte una idea de que bien, todo está en el centro. Entonces, si renombro esto, esto podría ser contenedor. Y si los encojo, tenemos esta columna izquierda y columna derecha. Entonces llamemos a esto Columna seis. Y llamemos a esta Columna Seis también. Y eso es porque cuando se trabaja con bootstrap como ejemplo en muchos otros frameworks y sistemas de diseño front-end, usan un sistema de doce columnas y establecen el tamaño de las cosas usando 12 columnas. Y puedes configurarlos para que cumplan con el tamaño de todo. Entre ese tamaño. Si entiendes mi deriva. Entonces tenemos columnas seis ocupa seis columnas a la izquierda, y la otra toma seis columnas a la derecha. Podrías ajustarla y podrías cambiar la división. Entonces una toma tres columnas y la otra toma nueve. Incluso podrías hacer números impares que no encajen al configurar cosas y hacer un diseño web receptivo. Se puede ver eso aquí. En realidad, debo ajustar estas cosas aquí. Entonces tengo estas cosas, el icono, cambiemos el nombre de eso para que sea más fácil. Y esta B es blanca. Mi logo es blanco. Entonces, si quiero colocarlo, cámbielo a ancho fijo y encoja esto a aproximadamente el mismo tamaño. Y entonces si llamo a ese contenedor, entonces está bien. Eso está bien. Esto debería ser realmente como tenemos, si cambias eso al espacio entre, entonces te da una idea aproximada de cómo las cosas realmente deberían funcionar y encajar. Entonces este concepto de contenedor, puedes leer más sobre, Obtener Bootstrap y solo buscar contenedores. Y luego mirando columnas, puedes mirar getbootstrap y mirar columnas. Entonces la documentación es bastante buena, diría yo. Y lo que encontrarás es eso para este hipotético iPad, si entonces lo hago súper ancho. Entonces tengo una pantalla ultra panorámica, por ejemplo, que es de 21 por nueve en relación. Verás que en realidad muchos sitios web no saben cómo usar eso. O si dejamos que se divida en todo el asunto en realidad sería bastante incómodo de leer. Entonces dije esto y solo lo configuré para llenar un contenedor. Eso es bastante horrendo, ¿no? Entonces simplemente apagamos esas rejillas por un momento. De nuevo, con el control G, se puede ver que es poco difícil de ver y leer y es mucho más agradable sostener el medio. Entonces este contenedor te da un tamaño máximo para donde las cosas deben ir a las columnas, te da un sistema de cómo se colocan las cosas en la página, que proviene de una historia de diseño de impresión. Muy interesante. Recomiendo leerlo. Y eso debería darte suficiente idea de cómo encajan estas cosas. Desafortunadamente, a Figma no le gusta mucho el modelo de ellos. Al igual que por igual, no se puede conseguir los componentes cambien a medida que cambia el tamaño de la pantalla. Pero eso está bien. Hay algunas cosas que pueden imitarlo bastante cerca. Pero recuerda a Figma como una herramienta para darte una idea y comunicar tu intención para los diferentes tamaños de pantalla. Y luego depende de usted cerrar esa brecha al hablar con sus ingenieros. Y definitivamente puedes aprender mucho. Y creo que te hace la vida más fácil si aprendes cómo se hace realmente para codificar de verdad. Porque al final del día, ahí es donde ve tu usuario, no tus archivos Figma. 30. Interacciones prototipo: Así que hemos tocado prototipos en los que se puede hacer clic anteriormente. Pero ahora hagámoslo de verdad. Consigamos un muy buen trabajo de extremo a extremo, un ejemplo para ayudarte a descubrir cómo hacerlo también. Así que aquí he construido a partir de algunos de los ejemplos anteriores de los módulos y lecciones anteriores para construir un tipo de flujo de comercio electrónico muy básico. Entonces estoy tomando la idea directa de microondas y armé una pequeña cosa selectora donde puedes elegir entre dos estilos de microondas y elegir entre dos colores diferentes antes pasar a la pantalla de la cesta y luego ir al inicio de la caja. Así que vamos a saltar directamente a ella. Para comenzar, lo más fácil de hacer es hacer clic en los prototipos que tienen en la parte superior derecha. Y a partir de ahí, lo que verán a medida que atraviese diferentes capas es que hay un pequeño círculo que aparece a través de estas diferentes capas. Y cuando selecciones tu capa, esa va a ser la forma más fácil de crear una interacción prototipo. Entonces, si la página en la que estás trabajando no tiene un flujo existente, notarás un par de cosas aquí. Antes no hubo interacciones prototipo. Y cuando arrastre esto, eso lo crea e interacción. Y las dos cosas a tener en cuenta primero es que esto creó un flujo que puedes ver en la parte superior izquierda llamada flow one, que puedes editar por aquí, pero en los detalles de la interacción. Entonces, por defecto esto va a ser al hacer clic, pero si hay una interacción existente, por defecto será la siguiente. Por lo que irá a arrastre. Luego mientras se cierne, mientras presiona , etcétera, etcétera. Hoy vamos a ceñirnos a deshacer clic. Pero voy a dejarte con algunos ejercicios para explorar los otros. Entonces si vamos a deshacer clic y navegar, y quiero que sea instantáneo, y no hay mucho más que quiera hacer. Así que voy a hacer clic en Cerrar y eso lo mantendrá ahí. Lo que puedo hacer desde aquí es hacer clic en todas las diferentes cosas entre las que quiero navegar. Entonces con el selector a medida que voy entre los diferentes, quiero que esto suceda. Lo que voy a hacer aquí es activar la animación inteligente. Y eso hará que parezca como si fuera más interactivo de lo que era. Así que haz que se vea más real, creo que es lo que estoy tratando de decir. Entonces, si pasamos por aquí y pasamos por esto, solo pasa por los diferentes. Puedes ver que si has preparado tus pantallas y flujos antes de tiempo, conectar todo es relativamente sencillo. Tomemos un momento y hagamos esto y asegurémonos de que he hecho la mayoría de ellos. Y se puede ver que una vez que cambio la configuración, para cuál es esta b? Éste, ¿no? Una vez que cambio los ajustes ahí, continuó manteniendo los últimos ajustes conocidos que puse. Entonces eso es bastante útil. Vamos a ir aquí. Puedes conectar esto hasta aquí. Bien, cosas geniales. Entonces solo conéctelos por completo. Entonces cada uno debería tener interacciones yendo a una de las otras pantallas. A partir de ahí. Quiero conseguir este solo con fines ilustrativos. La alternativa y el estilo blanco, que es éste. Y consigue el botón de añadir a la cesta. Y mira eso por aquí. Así que voy a mover esto de nuevo al instante. Y así eso es más natural. Y a partir de aquí, puedo hacer esto y hacerlo. La única otra cosa que quizás quieras saber es también el desclick. Puedes regresar. Entonces irá a la pantalla anterior o a la interacción anterior. Entonces no parece tan interesante en estos momentos. Pero eso es muy útil si quieres deshacer o si tienes muchos flotadores complejos diferentes. Entonces esas son las cosas centrales de las que quieres estar consciente. Entonces así es más o menos cómo configuras todas tus interacciones. Sólo voy a abrir esto muy rápido. Cambiemos el nombre de este flujo. Flujo. Haga clic a través. Y deberías poder ver en un momento cómo encaja todo eso. A medida que nos desplazamos, podemos ver aquí, construir mi microondas y el Smart Animate. Se puede ver que voltea entre ellos. ¿Qué tan genial es eso? Entonces selecciona estos dos en la canasta, nos lleva hasta aquí, luego puedo proceder a compra y de vuelta a la canasta nos lleva allá atrás. Ejemplo corto, limpio, sencillo y te ayuda a coserlos juntos. Como prototipo de instructor. 31. Múltiples flujos: Creamos un flujo en la lección anterior. Pero, ¿y si quieres compartir múltiples flujos? Uno de ustedes quiere probar dos condiciones diferentes entre sí. Entonces les voy a dar una introducción rápida y una visión general de cómo hacerlo. Primero, lo que quieres notar en la vista previa es que al hacer clic, puedes ver un par de controles diferentes. En la parte superior izquierda aquí. Esto va a ser lo que más te sirva. Puedes ver todos los diferentes flujos que armaste. Entonces aquí tenemos el flujo único que armamos, mi flujo. Pero, ¿qué queremos armar? ¿Otro? Es bastante sencillo. Digamos que partimos de la caja por cualquier motivo. Y puedes simplemente, en esta pestaña de prototipo, si no la has seleccionado o has hecho clic fuera de ella, asegúrate de seleccionar nuevamente en la pestaña Prototipo. Entonces, si haces clic en el punto de inicio del flujo, puedes hacer la condición de flujo de pago y darle un nombre a ese. Entonces el prototipo va a partir de ahí. Así que son prácticamente solo marcadores donde puedes ir desde un IT podría hacer clic aquí o hacer clic en el botón de reproducción en la parte superior derecha. Lo que verás es que para cualquiera que tenga el archivo abierto y pueda ver el prototipo, también puede ver esas cosas. Entonces, si hago clic en mi flujo, eso nos lleva de regreso al inicio del flujo que construimos antes. Podría pasar, construir mi microondas y hacer clic entre las diferentes cosas. O si quiero trabajar en el flujo diferente y comenzar directamente desde otro lugar, hemos venido por aquí y se puede ver que esto nos lleva directo a la canasta. Ahí vas. 32. Compartir prototipos y prototipos: Ahora que tienes un prototipo en el que se puede hacer clic y has reunido los flujos que quieres compartir con la gente. Ahora vas a querer compartirlo con alguien que sea remoto o digamos que estás trabajando desde casa o tienes a alguien que está trabajando en una oficina diferente geográficamente y quieres compartirlo con ellos. Entonces aquí están todas las cosas que vas a querer saber para poder compartir tu prototipo de la mejor manera posible. Entonces, antes de llegar a los enlaces, hay tres cosas que quería poner en tu radar. Son los puntos de acceso azules, el nivel de zoom, y mostrar y ocultar la interfaz de usuario. Porque cualquiera que sea la configuración que selecciones aquí, nos convertiremos en ese enlace para compartir que luego los compartirás con tus amigos, colegas o con quien quieras compartirlo. Por lo que es muy importante que estos ajustes sean correctos antes de generar ese enlace para compartir. Aquí en la parte superior derecha, se pueden ver algunas cosas diferentes. Entonces, por defecto, muestra pistas de hotspot. Onclick siempre está activado. Entonces, si hago esto, se puede ver que hay un área de la pantalla que resalta en azul. Entonces a veces es posible que quieras apagar eso. Si no quieres darle pistas a la gente y hacerla sentir más realista, no es algo que puedas activar y desactivar desde aquí. El siguiente es el nivel de zoom. Aquí. Es un tamaño bastante bueno, pero quieres asegurarte de que el Zoom es el tamaño adecuado para lo que quieres compartir. Así que Fit to Screen es uno de los formatos que puedes usar. Eso es bueno para presentaciones. Tienes un poco de ancho de ajuste. Por lo que se expande hasta que el tamaño máximo de tu pantalla sea lo suficientemente grande, simplemente se mostrará al 100%. También tienes Fill Screen, que es un poco similar a ajustarse a la pantalla. Bueno hay tamaño real. Entonces, dependiendo de cómo hayas configurado tu prototipo y qué resolución tengas puede cambiar la forma en que un prototipo es visto por la persona que lo recibe. Entonces, si me aprieta esto, no va a funcionar, ¿verdad? Bien, no apaguemos eso. De todas formas. Larga historia corta cuando intentas decir, cambia las opciones de zoom hasta que estés satisfecho con cómo se muestra. Antes de que realmente le envíes eso a alguien. El último es mostrar y ocultar la interfaz. Entonces alguien que ama esto arriba, vamos a conseguir esto también, este bar. Y si abres esto, eso será visible para lo que quizás quieras hacer es mostrar u ocultar la interfaz de usuario de Figma. Entonces aquí tiene este divertido símbolo. Pero el atajo que uso es el comando y el retroceso, pero el botón de barra invertida, lo siento, o el símbolo de tubería, que es como una línea vertical. El clic esto. Se puede ver que está oculta la interfaz de usuario. Y cuando hago clic sobre, ya no puedo ver para que vuelva a mencionarlo, comando, tubería, carácter de barra invertida, y luego puedo ver todas las cosas de la interfaz de usuario nuevamente. Una vez que lo hayas configurado, entonces deberías ir al enlace Compartir Prototipo. Entonces es por eso que puedes ver que hay un enlace de copy share que aparece en la parte inferior. Porque si ocultas la interfaz de usuario, en realidad no puedes ver el botón de compartir. Pero a partir de aquí, eso es probablemente algo que vas a querer hacer. Si saltamos aquí, puedo mostrarte cómo es la URL. Si acercamos el zoom, puede ver, generalmente puede usar esto para verificar usted mismo dos veces. Aquí, esta URL opciones, así que voy a mantenerlo lo más accesible para usted como sea posible. Pero para ocultar la interfaz de usuario, por ejemplo, puede ver aquí se agrega una opción y un alto DUI, y es uno. Si quiero que eso realmente se muestre, podría cambiarlo a cero, por ejemplo, y puedes ver aquí que también está horneado en la opción de escalado para el Zoom, esas son todas las opciones importantes que necesitarás tener en cuenta. Y una vez que compartes el enlace, lo último que querrás hacer es cuando compartes prototipo, asegúrate de que cualquiera que tenga el enlace pueda verlo y luego copiar el enlace. Se lo puede enviar por correo electrónico a Pete ellos. Puedes agregar correos electrónicos de personas o cuentas de Figma, pero me resulta más útil solo configurarlo a cualquiera que tenga el enlace y copiar el enlace y enviarlo a alguien. Así que eso cubre todas las cosas querrás saber sobre compartir un prototipo de Figma y cualquier flujo que quieras hacer y probar el usuario o compartir algunas ideas con tus amigos, colegas, familiares, con quien quieras compartir con tu perro. Tal vez e.g