NUEVO Figma 2025: de principiante a clase profesional

1. 00 Introducción para principiantes+ejercicios: Hoy, te guiaré por el mundo de Figma. Aprendamos a dar vida a nuestras ideas con las increíbles características de Figma Aprenderemos todo sobre configuración y la creación de diseños básicos, trabajando con componentes para crear elementos de diseño reutilizables. Configuración de estilos y variables para consistencia y jerarquía a través de la tipografía de color, y espaciado, diseño receptivo con diseño automático para adaptarse a diferentes tamaños de pantalla, prototipos básicos para dar vida a su diseño y cómo compartir y colaborar con otros diseñadores y, y cómo compartir y colaborar con otros diseñadores y lo más importante, desarrolladores para obtener su Empezaremos de cero configurando nuestra cuenta Figma y familiarizándonos con la estructura del fuego Genial. Luego nos sumergiremos en los fundamentos, como configurar marcos y anidarlos, agregar formas, texto, colores y cuadrículas, crear un diseño de interfaz de usuario sólido Una vez que se sienta cómodo con lo básico, nos aseguraremos de que sus diseños no sean solo imágenes bonitas, sino que también sean altamente funcionales y escalables. Te mostraré cómo crear elementos de diseño reutilizables con componentes y las variantes, que son esenciales para el diseño moderno de la interfaz de usuario. Crearemos variables y estilos para definir y reutilizar el color, la tipografía y el espaciado, asegurando la consistencia en todos los proyectos y permitiendo cambios rápidos en su diseño Comprender estas características y documentarlas de manera efectiva es crucial para comunicación fluida con el desarrollo A continuación, haremos que nuestros diseños respondan a los cambios en el contenido y los tamaños de pantalla, utilizando el diseño automático y las restricciones. Verás que con el enfoque correcto, es mucho más fácil de lo que piensas. Ahora, vamos a dar vida a nuestros diseños y añadir algunos prototipos básicos a la mezcla Para terminar, te mostraré cómo compartir tu diseño con otros diseñadores usando bibliotecas de equipo compartidas. Y probablemente uno de los temas más importantes pero a menudo descuidados. Hablaremos sobre cómo documentar y compartir tus diseños para una comunicación fluida y colaboración con el desarrollo. A lo largo del curso, abordaré preguntas comunes como cómo elegir un tamaño de pantalla adecuado, cuándo usar variables versus estilos, y compartiré valiosos atajos, consejos y trucos, y pequeñas gemas ocultas. Te proporcionaré un archivo de ejercicios Figma, permitiéndote seguir el video del tamaño de un bocado paso a paso junto a mí. Una vez que dominemos lo esencial, los aplicaremos a un proyecto real, construyendo un diseño de podcast totalmente receptivo basado en componentes listo para ser utilizado en su cartera. Lo mantengo corto y enfocado, para que en poco tiempo puedas enterarte de todo lo que necesitas sobre Figma para abordar cualquier proyecto Esta clase es adecuada para ti si eres un principiante total o cambias de cualquier otro software de diseño. Este es el curso de Moon learning dot AO. 2. 02 ¿Qué es Figma? ¿Quién realiza la programación?: ¿Qué es FIGMA y quién hace la codificación? En definitiva, FIGMA es una plataforma de diseño colaborativo. Hoy en día, incluye varios productos como Figma design, sights, make, slides, bus y FIG Jam, cada uno apoyando una parte diferente del flujo de trabajo creativo Pero cuando la gente simplemente dice Figma, suelen referirse al diseño Figma, el producto original y aún insignia en este momento Figma design es una interfaz profesional o herramienta de diseño de interfaz de usuario Se utiliza para crear de todo, desde wireframes de baja fidelidad hasta configurar diseños avanzados de interfaz de usuario y pulir prototipos interactivos Lo bueno es que FIGMA funciona tanto para Mac como para PC. Puedes usarlo en tu navegador web o a través de la aplicación de escritorio. FGMA le proporciona todas las herramientas que necesita para diseñar web o aplicaciones, como trabajar con componentes, configurar estilos y variables, herramientas para el diseño responsive, así como información automatizada para el desarrollo FIGMA está basado en la nube, lo que lo convierte en la opción ideal para colaborar con otros diseñadores o compartir su diseño con el desarrollo Una pregunta común que me sale es, si diseño en Figma, entonces ¿es ese código? ¿Puedo publicar eso o cómo funciona eso? Y eso realmente depende de qué herramienta Figma estés usando y de lo que intentes construir Piense en ello como construir una casa. Entonces, si trabajas con Figma design, es como si fueras el arquitecto planeando cada habitación, cada detalle y trabajando junto con otros para construir realmente esa casa, ya que también necesitas su experiencia Por lo tanto, utilizamos el diseño Figma para proyectos complejos como aplicaciones, flujos multipantalla, sitios web y sistemas de diseño completo El diseño Figma y sus características son la base de todo lo demás que puedes hacer con Figma Entonces es una muy buena idea aprender al menos los conceptos básicos del diseño Figma Te va a hacer la vida mucho más fácil más adelante. Ahora, sitios Figma, si nos quedamos con nuestro ejemplo de casa, entonces es más como construir un pequeño cobertizo por ti mismo Puede diseñar y publicar rápidamente sitios web simples como una cartera, página de destino o incluso una página de empresa pequeña. Utiliza la misma base que el diseño Figma. Entonces, una vez que aprendes el diseño de Figma, los sitios se vuelven muy fáciles y también puedes interconectarlos Ahora, tal vez te preguntes, ¿y qué hace Figma en todo eso? Y eso es realmente como si tienes un ayudante de IA que construye a partir de tus instrucciones. estos momentos, Figma make está en constante desarrollo, por lo que se mueve muy rápido, pero también sigue dependiendo del pensamiento estructural que viene del diseño Figma. Entonces mi recomendación será comenzar con una sólida comprensión de los conceptos básicos de diseño de FigMA, y va a ser mucho más fácil para usted en el futuro simplemente agregar cualquier otro producto de FigMA en 3. CONFIGURACIÓN: 01 Figma en el navegador: Se puede trabajar con FIGMA de dos maneras. Puedes trabajar directamente en el navegador, que es lo que estás viendo aquí o puedes descargar la aplicación. Para descargar la aplicación, vaya a figma.com forwardslash A continuación, puede elegir entre la versión Mac y la versión de Windows. Es muy importante tener en cuenta que a pesar de que trabajas en una aplicación de escritorio, FIGMA permanece basada en la nube Eso significa que todos tus archivos se almacenarán en la Nube y no localmente en tu computadora. Y por lo tanto, siempre necesitas acceso a Internet para trabajar en tus archivos FIGMA Podrías exportar y almacenar un FIGMFLE localmente, pero esto es algo que realmente solo debes hacer en caso de emergencia Como si necesitaras terminar un proyecto, y sabes que no vas tener acceso a Internet. Esto puede ocasionar obstáculos a la colaboración con tu equipo. Por lo tanto, siempre es mejor dejar todo en la Nube como se pretendía que fuera. Además de la aplicación de escritorio, podría interesarte Figma mirror para previsualizar tus diseños en tu móvil o tablet Y en caso de que no puedas usar la aplicación de escritorio y solo usarás la versión del navegador, te recomiendo encarecidamente descargar el instalador de fuentes. Esto te dará acceso a todas tus fuentes locales. Esto, sin embargo, no será necesario al usar la aplicación. 4. CONFIGURACIÓN: 02 El navegador de archivos Figma: la casa de Figma: El navegador de archivos Figma o en otras palabras, FigMashMe. Cuando abras Figma por primera vez, vas a ver algo parecido a esto Podría estar vacío o puede que ya tengas algunos archivos. Este es el lugar donde mantienes tus archivos y tus equipos organizados. Antes de crear nuestro primer archivo, asegurémonos de entender la estructura de archivos FigMA, lo cual es un poco extraño al principio Pero sólo tengan paciencia conmigo. Primero, tenemos equipos. Pueden ser para tu propio trabajo o para la colaboración. Dentro de los equipos, entonces tenemos proyectos, que puedes usar para agrupar archivos en diferentes proyectos dentro de un equipo. En el plan gratuito, actualmente obtienes un proyecto gratis. Dentro de un proyecto, ahora puedes tener múltiples archivos. Estos archivos son donde harías el trabajo real. Puede estructurarlos aún más en páginas. Volvamos a lo real. Por aquí, se puede ver al equipo. Podrías ser parte de un solo equipo o puedes abrir el menú desplegable y puedes cambiar entre diferentes equipos a los que podrías ser invitado También puedes crear tus propios equipos, simplemente haz clic en el botón más, nombra tu equipo. Entonces puedes elegir si quieres invitar a otros. Podemos saltarnos esto por ahora. Siempre puedes invitar más tarde. Elige un plan de equipo. Siempre puedes optar por Starter y luego actualizar más tarde si necesitas alguna característica adicional. Después verás el equipo que creaste en la parte superior. Para eliminar al equipo, solo usa un pequeño menú desplegable y elige eliminar Entendamos un poco mejor la estructura del equipo. Entonces dentro de nuestro equipo, encontramos los proyectos. La palabra proyecto es un poco confusa. Viene de los viejos tiempos de FigMA. En estos días, un proyecto realmente se puede utilizar para absolutamente cualquier cosa. Sólo verlo como otra subcarpeta y otra capa de organización Puedes almacenar cualquier archivo que quieras ahí y puedes nombrarlo cualquier cosa. Si hacemos clic en nuestros proyectos, entonces dentro de ellos, encontrará sus archivos. Haga clic en cualquier archivo para abrirlo, y va a abrir una nueva pestaña. Puedes tener tantas pestañas abiertas como quieras. Dentro de tu archivo, en el lado izquierdo, puedes ver diferentes páginas que estructurarán aún más tu archivo. Si quieres volver a tu navegador de archivos, luego haz clic en un pequeño icono de Inicio arriba a la izquierda. Puedes ver que tu archivo permanece abierto, y por cierto, todo lo que Auto guarda en figma. Un pequeño consejo, una característica muy útil es que puedes marcar proyectos así como archivos como favoritos. Entonces aquí, por ejemplo, si me quito eso, puedes ver por aquí, tengo mis archivos de inicio. Entonces me gusta bastante marcar todos los proyectos que son relevantes, y luego tengo una mejor visión general por aquí. Lo mismo funciona si haces clic aquí, ahora podemos protagonizar esto, y luego también puedes tener archivos importantes para un acceso rápido. Y por cierto, esto sólo es visible para ti. También es muy útil porque de esta manera, por ejemplo, si quieres mover algún archivo entre proyectos, entonces simplemente puedes hacerlo a través del navegador aquí. También puedes invitar a otros a tus archivos o a tu equipo. Entonces, si quiero invitar a mi equipo, vuelvo a ver todos mis proyectos, y luego busco el botón Compartir, actualmente esquina superior derecha. Eso sí se mueve bastante. Y ahora puedes simplemente invitar por correo electrónico o vía Link. Solo sé consciente porque tienes diferentes opciones. Entonces aquí, por ejemplo, ves vista y Editar, y luego vía correo electrónico, también ves otras opciones, solo modo sordo, asientos completos y así sucesivamente. Ahora, si invitas solo a ver, entonces esto es gratis y la gente solo puede ver tu archivo. Y no hay costos adicionales, sin embargo, cuanto aplique cualquier otro viaje, entonces habrá costos adicionales. Entonces eso depende del plan y del equipo en el que estés. Solo asegúrate de verificar eso antes de invitar a otros. Puedes ver y editar todos los miembros de tu equipo a través de la configuración de Admin. Otra zona interesante es la sección comunitaria. Así que actualmente lo encuentras aquí arriba. También se mueve bastante . Si haces clic aquí, entonces estás dentro de la comunidad Figma Y aquí encuentras una gran cantidad de increíbles archivos gratuitos de la comunidad Figma También puedes buscarlo. Por ejemplo, digamos, estamos buscando algunos íconos, luego simplemente ir por íconos, y luego puedes ver aquí diferentes archivos. Si te gusta alguno de esos archivos, simplemente puedes hacer doble clic en él. Obtienes un pequeño avance, y luego puedes hacer clic aquí, y va a abrir una copia en tu propia cuenta de FIGMA 5. 03 creación de archivos de diseño: Vamos a crear un nuevo archivo de diseño en Figma. Es posible que hayas notado que en Figma, tienes que elegir entre crear un Jamboard de higos, un archivo de diseño o una plataforma de diapositivas Sólo vamos a trabajar con archivos de diseño. Están aquí para configurar tus diseños. jamboards FIC son más para la lluvia de ideas, la colaboración y la El slide deck, como su nombre lo dice, es para presentación. Sin embargo, también puedes configurar tu presentación solo con archivos de diseño. Pero no te preocupes. Vamos a llegar a eso durante este curso. Vamos a crear un nuevo archivo. Puedes crear un nuevo proyecto y luego tener archivos en ese proyecto, o puedes usar un proyecto existente para hacer doble clic en él para abrirlo, y ahora vas a encontrar en la parte superior para crear un nuevo botón. Vamos a ir por un nuevo archivo de diseño. Esto ha creado un nuevo archivo y lo está abriendo de inmediato en una nueva pestaña. Siempre puedes volver aquí a tu tablero, y luego puedes ver aquí nuestro nuevo archivo sin título Si queremos renombrarlo, podríamos hacerlo bien en el archivo haciendo doble clic en el nombre. También podrías moverlo desde aquí. Solo usa ese pequeño error, y luego puedes hacer clic en Mover y podrías moverlo a cualquier otro proyecto. También podemos hacer lo mismo desde nuestro proyecto. Aquí tenemos nuestro archivo. Luego podemos hacer clic derecho, y luego puedes cambiarle el nombre, y también puedes mover el archivo. O simplemente puedes arrastrarlo. Recuerda, me gusta protagonizar mis proyectos. Al protagonizarlos aquí arriba, aparecen en la barra lateral, y esto hace que sea mucho más fácil mover tus archivos por ahí. Por lo general, los archivos en Figma siempre se comparten dentro del navegador de archivos Sin embargo, si alguna vez obtienes un archivo de descarga, entonces un archivo que termina con dot fig, entonces para poder verlo dentro de tu navegador de archivos, asegúrate de usar el botón de importación. No va a funcionar simplemente haciendo doble clic en él. 6. 01 Agregar marcos a nuestro archivo: Empecemos con una base de todo en Figma. Marcos. Asegúrate de estar en un archivo de diseño. Esta zona gris que ves aquí en el centro se llama Lienzo. Piensa en ello como la superficie de una mesa en la que estás trabajando. Además, agregarás tus diseños como hojas de papel. En Figma, esas hojas se llaman marcos. Puedes agregar imágenes, textos y formas a esos marcos para configurar tus diseños. Para crear un marco, simplemente haga clic en el símbolo del marco en la barra de herramientas, o también puede usar el atajo F. Ahora abrimos el menú de marco preestablecido Figma en el lado derecho Como puede ver, Figma configuró tamaños de pantalla más comunes para usted Si hago clic en uno de ellos, entonces va a agregar el marco en ese tamaño a mi Canvas. En caso de que no busques un tamaño de pantalla específico, también puedes dibujar un marco. Entonces volvamos a darle a F, y luego simplemente podremos arrastrar un marco abierto en nuestro lienzo. Ahora bien, lo bueno es que si selecciono este cuadro y vuelvo al menú desplegable del cuadro, también podría convertir esto en cualquiera de esos presets Puedes usar un turno de atajo y para centrar cualquier cosa en tus Cvas. Pasaron dos cosas. Figma agregó esos marcos a nuestro lienzo, y también podemos ver los marcos en nuestro panel de capas del lado izquierdo El panel de capas es básicamente un espejo de todo lo que sucede en los cavas Puedes cambiar el nombre de tus marcos. Puedes hacer clic directamente en el nombre del marco y luego simplemente escribir lo que buscas, o también puedes hacer clic en el nombre en el panel de capas. Siempre usamos marcos y nunca formas para representar nuestras pantallas en Figma. A diferencia de las mesas de trabajo tradicionales, puedes anidar marcos dentro de marcos en Figma, lo que te permitirá crear diseños más complejos más adelante 7. 02 Algunos atajos útiles: Algunos atajos útiles. En general, encontrará una visión general de todos los atajos si salta al menú de acciones y luego busca atajos de teclado. Verás algunos marcados en azul, esos son los que ya usaste, y los en blanco, son los que aún no has usado. Quiero mostrarte los más importantes por ahora. Para ocultar y mostrar la UR, puede presionar comando y barra diagonal hacia atrás Si presionas shift y slash hacia atrás, entonces esto solo se va a ocultar en el lado izquierdo Tan pronto como selecciones algo en tu Canvas, vas a seguir viendo todas las propiedades en el lado derecho, bastante útiles si necesitas un poco más de espacio. Puede acercar y alejar presionando el comando n más o el comando menos. Si presionas Mayús y cero, y obtienes 100% de visualización. Si presionas turno y uno, obtienes una visión general de todo lo que hay en tu Canvas. Si seleccionas un elemento específico y presionas shift y dos, entonces va a acercar solo ese elemento. Si presionas enter, entonces va a seleccionar los hijos directos de ese elemento. Al presionar la barra espaciadora, puedes moverte por el Lienzo. 8. 03 Descripción general del archivo de diseño: Vamos a obtener una visión general rápida de nuestro archivo de diseño antes de profundizar. Por defecto, vas a tener tu pestaña de archivo abierta mostrando tus capas. También hay otros grifos, por lo que tenemos archivo, activos, diseño y prototipado Pero permanezcamos en los archivos por ahora y conozcamos eso. Puedes ver justo aquí arriba, también tienes algo llamado páginas, y si haces clic en un pequeño botón más, y puedes agregar una página adicional. Y esto es básicamente un nuevo Cvas completamente vacío. Las páginas pueden servir para diferentes propósitos, y vamos a hablar más sobre ellas más adelante. lo general, puede agregar tantas páginas como desee en un plan pago, pero en un plan gratuito, puede estar limitado a solo tres. Si quieres nombrar una página, entonces simplemente haz doble clic y puedes cambiar el nombre, y haciendo clic derecho, puedes eliminar una página. Ese es nuestro panel izquierdo. Entonces en el lado derecho por aquí, tenemos el panel de propiedades. Muy importante es que si haces clic en el área de fondo gris de tu lienzo, entonces obtengas una visión general de lo que está sucediendo en tu archivo. Más adelante, vas a ver todos los estilos, variables, así todos los ajustes generales. Si seleccionas un marco o un elemento específico como un texto o una forma, entonces vas a obtener la información sobre ese elemento que has seleccionado actualmente. Aquí arriba, puedes ver quién está en tu expediente. Puedes obtener el modo presente, así que ya sea en un área diferente, o también puedes tener una vista previa en archivo, y también encuentras el botón de compartir aquí arriba. Todo esto, vamos a conocerlo con más detalle más adelante. En la parte inferior, actualmente tiene su barra de herramientas y tenga en cuenta que estas cosas podrían estar moviéndose. Antes solía estar aquí arriba en la parte superior. Aquí encuentras todas tus herramientas principales, como marcos, todas las formas, texto, etc. Tenga en cuenta que si pasa el cursor sobre ellos, va a obtener el atajo Esto realmente vale la pena anotarlo porque realmente va a acelerar tu flujo de trabajo, conocerlos. También encontrarás el menú de acciones aquí. En el menú de acciones puedes buscar literalmente cualquier cosa relacionada con tu archivo, y también encuentras tus herramientas I aquí. Hay una sección para plug in y Wichets. De nuevo, vamos a conocer más sobre los plug ins en un minuto. Por aquí, se encuentra el interruptor para modo sordo. Tenemos el modo de diseño, en el que nos encontramos actualmente, y podemos alternar esto si estás en un plan pago al modo sordo, y esta es el área que es para tu equipo de desarrollo. Si seleccionan algún elemento, entonces obtendrá la información relevante para el código. Algunas de estas características podrían estar detrás de un muro de pago. Esto cambia constantemente, así que asegúrate de consultar la página de precios del FICMA y podrás ver lo que está disponible actualmente 9. 04 Adición de formas y colores: L et's agregan algo de contenido a nuestros marcos. Entonces aquí tengo un frame, que llamé frame. Ahora agreguemos algunas formas. Voy a ir a la herramienta de forma, y puedo elegir entre rectángulo, líneas, error, elipse y polígono, así como estrella Ahora, fíjate como detrás de cada una de esas formas, vas a ver el atajo. Voy a ir por un rectángulo. Y si simplemente lo dibujara, entonces no mantendría la forma. Entonces, si quiero un cuadrado perfecto, entonces lo que puedo hacer es mantener presionado el turno, y luego dibujar. Puedo seleccionarlo, y luego puedo posicionarlo y notar como Figma te va a dar líneas de ayuda Ahora dibujemos un círculo. Entonces si le doy un vistazo a mi menú, veo que el atajo es. Entonces presionemos O. Y nuevamente, mantengo presionado el turno para obtener un círculo perfecto, y voy a agregar un círculo. Vamos a añadir otra forma. Voy a ir por un polígono. Éste, simplemente voy a dibujar así. Ahora noto que hay un poco más de espacio. En el lado derecho, se puede ver que ahora tiene una cuenta de tres. Podrías mover este hacia arriba y luego podrías crear otros polígonos Lo voy a dejar en un triángulo por ahora. Vamos a añadir algo de color a esto. Voy a comenzar con mi círculo aquí. Asegúrate de tener la forma que buscas seleccionar. Y luego en el lado derecho, en el panel de propiedades, se puede cambiar un color vía relleno. Puedes hacer clic en la muestra de color y luego simplemente elegir cualquier color, o también puedes agregar un abrigo Hx, que es lo que voy a hacer Ahora voy a seleccionar mi triángulo. Esta vez, voy a usar la rueda de colores, y simplemente voy a ir por un bonito rojo anaranjado Para esta plaza de aquí, quiero usar un azul. Juega con el menú fil para familiarizarte. Puedes usar la opacidad para que simplemente puedas agregar cualquier número. Podrías hacer que el relleno sea visible e invisible, e incluso podrías agregar más fils Sin embargo, esto es algo que rara vez uso. Si haces clic en este reloj, puedes verlo aquí, también puedes cambiar el degradado, y podemos cambiarlo en un relleno de imagen, que es algo que vamos a usar más adelante. También podríamos agregar un trazo. Ahora podría agregar esto a este único elemento, o simplemente puedo seleccionar todos los elementos. Simplemente mantenga la tecla del mouse abajo y seleccione todo. Ahora puedo hacer clic en el botón más junto al trazo, y verás que ahora cada uno tiene un contorno. Podría cambiar el trazo a un trazo más grueso, algo así como cuatro. Si tú, por ejemplo, querías una línea punteada, y podrías hacer esto aquí haciendo clic en los tres puntos y cambiar de sólido a da. Así como lo hiciste con el relleno, podrías cambiar el color del trazo. 10. 05 Manipulación de elementos: Aprendamos sobre la manipulación de elementos en el lienzo. Si seleccionas algún elemento, entonces vas a ver las propiedades en el panel lateral derecho. Observe cómo diferentes elementos le van a dar diferentes propiedades. En la primera sección, suele encontrar el posicionamiento para que esto funcione, seleccione más de un elemento, simplemente mantenga presionada la tecla del mouse y ahora podrá alinearlos. Puedes ver estas pequeñas líneas azules por defecto, siempre apuntan a la izquierda y a la parte superior de tu fotograma padre más cercano, y puedes ver el posicionamiento aquí, así podrías hacerlo muy específico solo escribir un número específico. vamos a hablar más sobre el adelante vamos a hablar más sobre el menú de restricciones, pero puedes encenderlo y desactivarlo y luego puedes cambiar las restricciones. Lo que hacen las restricciones es literalmente anclar lo que haya seleccionado a un área en el marco padre. Si lo cambio de izquierda a derecha y ahora cambio el tamaño, se puede ver que esto ahora está pegado a la derecha, y estos de aquí siguen pegados a la izquierda Pero no te preocupes demasiado por esto por ahora. Solo seleccionémoslos todos y enviémoslos nuevamente. Más abajo, tienes la herramienta Transformación. Seleccionemos nuestro cuadrado para ver esto mejor. Y con esto, puedes rotar tus elementos. Puedes hacer esto aquí mismo en el menú, o también puedes acercarte con tu cursor al elemento, y luego ves este pequeño error cambiante. Una vez que veas eso, mantén pulsado el ratón, y ahora también podrás rotar a la derecha sobre el Lienzo. Y por aquí, puedes voltear elementos, girarlos, y así sucesivamente. Ahora bien, esta parte de aquí abajo, la disposición, esta es la parte importante con tus dimensiones. Si tienes un elemento seleccionado, vamos a seleccionar de nuevo nuestro círculo, entonces puedes ver un pequeño clip aquí. Actualmente, está desrecortada. Si cambiara este ancho a 200, y se puede ver que solo va a cambiar un lado. Si quiero que ambos se cambien por igual, solo asegúrate de tener el clip seleccionado, y ahora puedes cambiar cualquier cosa y se va a aplicar a ambos lados, muy útil. Lo bueno de estos campos es que no solo puedes escribir números, sino que también puedes usarlo para hacer algunos cálculos básicos, así que cualquier cosa desde más menos división y multiplicación Como con la mayoría de las cosas, cualquier cosa que puedas hacer aquí en el panel de propiedades, también puedes hacerlo justo en el Lienzo. A medida que te acercas, puedes ver este pequeño error aquí arriba. Necesitas acercarte a una ventaja para que esto funcione. Y ahora si mantienes presionada la tecla shift, entonces puedes cambiar el tamaño esto manteniendo las proporciones en su lugar Un poco de propina oculta. Si tienes un círculo y pasas el cursor sobre él, vas a ver aparecer la herramienta de arco Si mantienes eso presionado, entonces puedes manipular ese círculo aún más a tu gusto. Cosas bastante chulas. También podemos agregar radio de esquina, elegir uno o más elementos, y luego en apariencia, encuentras el radio de esquina, y puedes agregarlo simultáneamente a todas las esquinas, o también puedes abrir el menú de esquinas individuales, y luego simplemente puedes aplicarlo a las esquinas de tu gusto. 11. 06 Alinea, ordena y mide: Aprendamos a alinear orden y la medida entre tus objetos. Entonces ya estamos familiarizados con la alineación. Pero otra opción que realmente me gusta es si seleccionas más opciones, entonces obtienes la función de ordenar aquí. Si pasas el cursor sobre esto, vas a ver estas pequeñas asas, y también vas a ver estos círculos Entonces arregló esto y creó la misma distancia entre todos tus elementos Ahora note que estoy usando mi rectángulo que sigue siendo un polígono y se sienta dentro de su forma Lo que podría hacer ahora, podría seleccionarlos a todos, y podría cambiar esos mangos y eso será lo mismo para todos ellos. También podría usar el panel de propiedades para manipular esto ya que ahora me va a dar el espacio entre esos elementos como una propiedad propia. También puedes seleccionar cualquiera de esas formas y luego cambiarla con bastante facilidad tan pronto como se arregle Ahora bien, si los seleccionamos todos, entonces todavía no están alineados en el centro. Sin embargo, puedes seleccionar todos estos juntos, moverlos, y luego Figma también te va a mostrar algunas líneas de guía para obtener el centro de tu marco Otra herramienta útil que uso todo el tiempo es que si seleccionas una forma y te mantienes presionada y pasas el cursor sobre cualquier otra forma, entonces te va a mostrar la distancia Esto funciona hasta el borde del marco padre o cualquier objeto vecino realmente, muy útil. Aún puedes moverlo mientras todo lo hayas seleccionado, y luego verás cómo cambia la distancia a este objeto. 12. 07 Adición y trabajo con texto: Agreguemos algo de texto. Desde la barra de herramientas, seleccione la herramienta de texto o simplemente puede presionar t. Hay dos formas de agregar texto. Puede simplemente hacer clic en cualquier lugar, desea agregar el texto y luego puede comenzar a escribir. También podrías dibujar un cuadro de texto. Vamos a darle a T otra vez, y voy a dibujar un cuadro de texto, y ahora puedo agregar el texto aquí. No importa qué enfoque vayas a usar porque siempre puedes cambiarlo a través del menú de texto, que es lo que vamos a conocer ahora. Voy a quedarme con los dos. Este va a ser mi titular, y voy a quedarme con este y solo copiar algún texto más ficticio, y podemos usarlo como copia Puedo abrir un cuadro de texto más grande simplemente manteniendo presionada la tecla del mouse y arrastrándola. En primer lugar, quiero que ambos tengan el mismo tipo de cara. Selecciono ambos y a través del menú, voy a seleccionar un tipo de letra Puedes ver que todas las fuentes de Google están preinstaladas si estás usando la app Figma. Además, todos los teléfonos que tengas localmente en tu computadora van a aparecer aquí. Voy a ir por una fuente de Google llamada Poppins. Ahora antes de ir a cambiar el tamaño y el ancho, se puede ver que esto es un poco por todas partes. Vamos a ordenar esto. Primero voy a ir por lo que va a ser mi titular, y voy a establecer esto en auto width. Eso significa que el cuadro de texto siempre se va a ajustar a cualquier cosa que agrego aquí en ancho. Mi texto de copia, voy a establecer en ancho fijo y altura automática. Eso significa que va a tomar toda la altura adentro y lo que sea que agregue, se va a ajustar a esta altura. El último aquí es de altura fija y ancho fijo. Y para ser honesto, casi nunca uso esto. Seleccionemos nuestras formas, bajemos y hagamos un poco más de espacio. Entonces ahora quiero cambiar el peso. Puedo hacer esto con el segundo desplegable, y voy a tener mi titular en negrita, y voy a dejar mi texto copiado en forma regular. Entonces, obviamente, quiero que mi titular sea más grande, así puedo hacer esto con el tamaño del texto aquí. Puedes escribir cualquier número o también puedes usar tus teclas de flecha en el teclado para subir y bajar. Nuevamente, si tienes turno presionado, entonces vas a saltar en tu cantidad nug Voy a tener un gran saludo en la parte superior aquí. Ahora, mi texto de copia, voy a tener esta caja aún más grande, me voy a quedar a los 16, que es el tamaño estándar para copiar texto. El siguiente aquí es la altura de la línea. Esta es una muy importante. La altura de línea es, podemos ver esto mejor en nuestro titular, este pequeño espacio en la parte superior e inferior de tu texto. Esto es como una brecha natural que estamos creando. Siempre deja eso al menos en auto que corresponde a 1.5, o incluso podrías ir más alto y establecerlo en 1.7. Se puede calcular esto, así se podría decir 16 es mi tamaño de texto, y ahora estoy multiplicando esto por 1.75, y por lo tanto, me daría el valor de píxel También podrías usar una notación porcentual, así que tengo 175% Si todo esto es nuevo para ti, entonces solo déjalo en auto por ahora, lo que te está dando una altura de línea muy buena. Hagas lo que hagas, no lo pongas en el mismo tamaño que tu texto o incluso más pequeño. Porque lo que pasaría es que perderías la altura de línea, lo que podría estar bien en un titular de una línea. Pero en tu texto de copia o en cuanto se cambie algo, como cambia el cuadro de texto, medida que cambia una ventana del navegador, entonces el texto va a ser machacado y no queremos eso La alineación es a la izquierda central o, por lo que bastante estándar. Esta pequeña herramienta aquí significa que si agregas más texto, qué dirección va a crecer. El valor por defecto lo tenemos encendido significa que si copio más texto, vamos a agregar más texto aquí, solo se agregará al fondo. Ahora bien, si tuvieras este conjunto al centro, entonces lo que pasaría es que esto crecería desde el centro y obviamente mismo si tuvieras un set al fondo, lo mismo si tuvieras un set al fondo, crecería hacia arriba. También puede abrir el menú extendido, y luego aquí encontrará más opción de alineación. Por favor, nunca use texto alinear justificado. Ni siquiera sé por qué sigue existiendo para ser honesto. Los que probablemente vas a usar más es como Subrayar y cosas así casos, y encuentras cosas más avanzadas como recorte vertical, estilo de párrafo, y en detalles, incluso más cosas como ciertos indens, o si tienes posiciones numéricas específicas y cosas así Pero la mayor parte del tiempo, el menú estándar estará bien. Al igual que cualquier otro objeto, puede seleccionar texto y alinearlo. Y cualquier cambio de color, usarías el menú de películas. Y por cierto, en el diseño Figma y UI en general, texto siempre tiene su propia caja El titular tiene una caja propia y el texto de copia tiene su propia caja. Técnicamente podrías tener este titular dentro de la misma caja, pero no es así como configuramos el diseño de la interfaz de usuario. 13. 08 Marcos de anidamiento: el superpoder de Figma: Figma es realmente todo acerca de anidar marcos. Al principio, podría no parecer tan obvio por qué todo debería colocarse en un marco. Esto es algo que vas a entender mucho mejor una vez que te muevas a características más avanzadas, como trabajar con componentes o también diseño. Echemos un vistazo a cómo se verían los marcos anidados. Aquí tienes un marco padre, y dentro de este marco padre, tienes más marcos. Entonces tienes un marco naranja, un marco rojo y un marco azul. Puedes ver que en el panel de capas del lado izquierdo, puedes mover los marcos simplemente arrastrándolos. Ahora dentro de esos marcos, todavía tengo más. Entonces si hago clic en mi marco azul o lo abro a través del panel de capas, se puede ver que tengo una forma, pero también tengo otro marco que contiene algún texto. Entonces esto sería algo así como un botón que nuevamente sería un marco anidado Si seleccionas algún marco y lo mueves, entonces todo lo que coloques dentro se moverá con él. Si arrastra elementos entre fotogramas. Por ejemplo, digamos esta forma, arrastro al marco rojo, entonces puedes ver que se reorganiza automáticamente en el panel de capas Así que no tienes que preocuparte por esto. También puedo simplemente arrastrar un elemento fuera del marco padre, y automáticamente creará otro marco en mi lienzo junto a él. También puedes dibujar marco. Entonces si golpeo F, simplemente puedo dibujar un marco dentro de aquí, y si lo dibujo sobre ciertos elementos, entonces va a contener estos elementos. Pero volvamos un segundo a nuestra configuración original. Si tienes todas tus capas abiertas y quieres colapsarlas, entonces simplemente selecciona el marco padre y presiona la opción o vieja L. Si quieres saltar al siguiente elemento hijo, luego presiona enter. Observe cómo eso va a seleccionar todos los fotogramas del siguiente nivel. Si vuelvo a presionar enter, va a ir un paso más allá y así sucesivamente. Con la barra inclinada hacia atrás, puede volver a chip al padre principal Y no olvides con viejo y L, vas a colapsar capas más viejas. Si quieres seleccionar en profundidad una capa, así que digamos que quieres este botón aquí, entonces primero tendrás que hacer clic en todo tu recorrido. Lo que podrías hacer es simplemente mantener presionado el comando y luego seleccionar la capa en adelante Este es en realidad el atajo que realmente necesitarías recordar porque es algo que vas a usar todo el tiempo. Es una buena práctica si ya empiezas a pensar y diseñar los elementos básicos de tu diseño con marcos, y te voy a mostrar cómo funciona esto. Sin embargo, no te estreses si aquí o allá, cometes un pequeño error o no estás seguro de qué usar Siempre puedes arreglarlo después. 14. 09 fotogramas vs grupos: La siguiente pregunta que probablemente tendrás es ¿por qué los frames y no solo los grupos en el FICMA Porque en el FICMA, podríamos simplemente agrupar elementos seleccionándolos y golpeando comando y G. Echemos un vistazo más de cerca a esto Aquí tengo un marco, y este marco sostiene otro marco azul y una elipse Y aquí tengo la misma configuración, pero este es un grupo, como se puede ver en el panel de capas. Ahora puedo moverlos en grupo, así que esto es lo que busco, e incluso podría colocarlos en otro marco. Digamos dibujando un marco alrededor de ellos. Entonces puedes ver que ambos se sientan muy bien dentro de este marco, ya sea marco minado o si es grupo minsted Al principio, parece que no hay mucha diferencia, entonces, ¿por qué no simplemente ir por esta? Es cierto cuando empiezo a diseñar, a veces en realidad uso grupos. De alguna manera son más rápidos y fáciles de manejar al principio. Si hago un borrador rápido de algo, a menudo empiezo con grupos. En realidad no necesitas preocuparte porque incluso si tienes un grupo, siempre podrías convertir esto en un marco más tarde simplemente usando el menú desplegable en el lado derecho, y siempre podrías convertir cualquier frame de nuevo en un grupo, si por alguna razón quisieras. Entonces, al principio, no te estreses demasiado sobre cómo necesitas configurar todo esto. Te va a llegar una vez que pases a las cosas más avanzadas, como el diseño de diseño automático con componentes, así como la creación de prototipos, donde vas a notar que simplemente vas a necesitar un marco o Figma incluso te va a dar una mano y convertir todo en marcos para ti cuando Todavía intentemos acostumbrarnos a trabajar con marcos. Por ahora, solo algunas diferencias básicas que podrías notar de inmediato. El primero es si tengo un marco, entonces se puede ver en el lado derecho, me sale esta cajita puede marcar, que se llama contenido de clip. Ahora, el contenido del clip es muy útil, especialmente porque estamos usando el marco para representar nuestro visor o el tamaño de nuestro dispositivo Por lo tanto, vamos a tener contenido que se desborda. Esto es algo que después con la creación de prototipos, podríamos querer animar, pero al principio, no queremos ver todo este desbordamiento, así que es muy útil que podamos mostrar y ocultar No puedo hacer eso en un grupo. También vas a notar que si quieres usar esto como fondo, digamos que solo estamos redimensionando este de aquí, entonces tenemos exactamente el mismo aspecto. Si estamos usando esto, entonces nos faltan algunas características. Echa un vistazo si cambio al marco. Verás que estoy obteniendo muchas más características como cuadrículas de diseño y todas estas selecciones diferentes Aquí estoy consiguiendo bastantes. Podría, por ejemplo, agregar diseño automático, algo que queremos hacer más adelante. Si me lo quito, notarás que Figma fue lo suficientemente amable como para convertir esto en un marco para mí. Entonces, en lugar de estresarse por el enfoque correcto, recomiendo simplemente saltar, obtener algunos tractores, y una vez que llegue a las características más avanzadas, todo va a caer en su lugar 15. 10 Diseño con marcos anidados: Vamos a configurar un primer diseño con marcos anidados y figma. He aquí un ejemplo clásico. Tengo un marco padre, y esto se llama bloque, que contiene otros marcos y elementos. Se puede ver aquí tengo mi navegación, que también es un marco que sostiene otro marco, y en su interior, tengo algunas líneas que representan el menú de la hamburguesa. Por cierto, solo puedo arrastrar esto aquí arriba si quiero cambiar el orden. A continuación, tengo mi titular, y se puede ver que los titulares o simplemente el texto como tal no se coloca en un marco separado a menos que sea como parte de una tarjeta u otro elemento. Un titular, puedes simplemente colocarlo libremente en tu marco de padres. Entonces tengo mi tarjeta aquí. Ya ves que tengo dos tarjetas. De nuevo, si quería cambiar el orden, simplemente arrastra eso dentro de tu panel de capas. Dentro de mi tarjeta, se puede ver que tengo una forma, que llamé imagen, y luego tengo un titular, y tengo algún texto. Entonces recreemos esto y en el proceso de construcción, quedará mucho más claro por qué y cómo configuré los diferentes elementos Bien. Vamos a mover esto un poco. Vamos a presionar F, y agreguemos una pantalla vacía justo al lado de ella con el mismo tamaño. Con el desplazamiento de dos, los enviamos justo en el medio. Voy a pasar por esto bastante rápido, así que siéntete libre de simplemente pausar el video y probar diferentes pasos en tu propio tiempo. Lo primero que voy a hacer es presionar L y activa la herramienta de línea. Se puede ver eso aquí arriba, los atajos. Y voy a trazar una línea para mi menú de hamburguesas. Pongamos esto a 40. Y lo que voy a hacer ahora va a seleccionar este hit Opción de Mayús o aught Y luego voy a arrastrar hacia abajo una copia. Y se puede ver que ahora puedo ver el tamaño directo. Si no tienes eso, también puedes seleccionarlo y simplemente usar la herramienta de ordenar. Ahora vamos a seleccionarlos todos y voy a hacerlos un poco más grandes para que podamos verlos mejor así que dos pixeles. Ahora bien, lo siguiente que podrías hacer es ir y cambiarlo en un grupo, así comando y G crearían un grupo. En el lado izquierdo aquí, puedes ver un grupo y puedes llamar a esta hamburguesa. Y para ser honestos, por ahora mismo, eso funcionaría bien. Si luego quieres cambiar esto a un marco, entonces simplemente puedes seleccionar tu grupo, y en tu panel de propiedades del lado derecho, simplemente puedes cambiar entre marcos y grupos. Tenga en cuenta cómo el grupo, si quería algo de espacio extra no me está permitiendo hacer eso. Entonces lo que voy a hacer es que voy a convertir esto en un marco por ahora, y pueden ver que me mostraría todo si me clip, pero va a cortar algunas cosas. Pero lo que entonces podemos hacer es simplemente presionar comando, y ahora puedes cambiar el tamaño de este fotograma a tu gusto Ahora terminemos de f navigation, simplemente presione F. Y en vez de escoger un frame, voy a dibujar un frame, y lo voy a dibujar alrededor de la hamburguesa que acabo de hacer. Puedes ver si lo dibujo alrededor de algún elemento, entonces este elemento se va a sentar automáticamente dentro del marco, así que se va a mover con este marco. Vamos a darle un poco de tinte al fondo para que podamos verlo mejor. Solo estoy usando mi relleno y solo escojo un color un poco más oscuro. Asegurémonos de que tenemos un relleno aquí también. En caso de que no tengas relleno, solo presiona en plus, y te va a dar blanco por defecto. Aún puedes seleccionar tu hamburguesa dentro aquí. Si presionas comando, incluso puedes seleccionar en profundidad, por lo que nuestros trazos. Pero la forma más fácil es en realidad presionar enter, y eso selecciona todos los elementos secundarios, y luego puedes usar la herramienta de alineación para centrar en el medio de tu navegación que acabas de crear. El siguiente arriba son algunos textos. Presionemos t, y simplemente puedo dibujar un cuadro de texto donde quiera agregar esto Puedo agregar texto aquí, y simplemente voy a copiar el texto que ya escribí, y lo voy a colocar dentro de aquí. Ahora se puede ver que eso automáticamente tomó el estilo de ese texto. Si quisieras cambiar eso, podrías hacer esto por aquí. Toma el hábito de agregar siempre altura automática a tu texto. Esto simplemente significará que si estoy borrando algunos textos o si estoy agregando algún texto, ese cuadro de texto respondería automáticamente Agreguemos el marco para nuestra tarjeta. Simplemente presioné F, y en lugar de usar el menú preestablecido, voy a sacar esta carta sobre mi lienzo. Voy a añadir una base de un efecto, así que eso va a dar sombra al fondo. Observe si no ve nada que asegure que su marco tenga un relleno, si no simplemente da clic en más, y le va a dar un relleno por defecto de pizca También puedes cambiar el efecto haciendo clic en el menú de efectos. Voy a agregar esta área para la imagen a mi marco, así que voy a darle a r, y voy a dibujar un rectángulo. Si lo dibujo en mi marco, se puede ver que en el menú del marco, se agrega automáticamente al marco. Si hago doble clic, puedo cambiar esto a imagen. Hay mucha opinión sobre si un marcador de posición para una imagen debe ser un marco o debe ser una forma No te preocupes demasiado por ello. No hay bien o mal. Ambos enfoques funcionarán. Generalmente me verás usando formas un poco más que marcos en mayoría de los casos porque siento que es más fácil agregarles imágenes. Pero en algunas ocasiones, un marco tendrá sentido. A veces incluso uso un fotograma con una forma dentro si estoy trabajando con efectos avanzados de animación y zoom. En este punto, no te preocupes demasiado por ello. Usa lo que mejor te funcione. Ahora agreguemos nuestro titular, entonces presiono T, así obtengo mi herramienta de texto y escribo titular. Para mi texto de copia aquí, solo voy a ser perezoso y copiarlo de mi ejemplo. Ahora fíjate como esto ya está configurado a la altura automática, y lo voy a dejar en esto. Puedes ajustarla como quieras configurar esta tarjeta. También voy a tener este titular a la altura automática. En general, auto width, usaría para algo así como botones donde sé que no va a fluir hacia una segunda línea. Y los voy a reorganizar un poco. Fantástico. Ahora, una cosa que quiero señalar es notar cómo aquí tenemos contenido de clip. Contenido del clip, vamos a dibujar otra forma aquí. Si tuviera, digamos un círculo, se puede ver que no va a mostrar el círculo completo. Si seleccionas el marco padre, entonces podrás ver todo fuera de tu tarjeta. A veces, si no ves elementos, especialmente si estás trabajando con un esquema de algo, entonces asegúrate de que el contenido de tu clip esté configurado. Para hacer una copia de tu tarjeta, simplemente selecciona una tarjeta, presiona, alt u opción, y poco tip hold shift press también. Entonces lo copiará justo en la línea de abajo, y no se moverá de izquierda a derecha. Aquí tienes. Tu primer diseño está hecho. 16. 11 cuadrículas usables con estilos: Vamos a crear algunas rejillas reutilizables. Aquí tengo mi página de bloqueo, y tengo otra página detallada si hago clic en este artículo. Ahora quiero agregar la misma cuadrícula a ambos para asegurarme de que sigan el mismo diseño general. Para agregar una cuadrícula, simplemente seleccione un marco. Y tenga en cuenta que esto funciona en cualquier marco, así que en este caso, voy a seleccionar mi marco padre aquí, representando la ventana gráfica, y en el lado derecho, voy a dar click en la cuadrícula de diseño Pero por defecto, vas a obtener esta cuadrícula de píxeles, pero no queremos eso. Queremos columnas. Haga clic en el icono y luego el menú desplegable, elija columnas Se puede cambiar el conteo, así que yo podría cambiar esto a cuatro, y también puedo establecer un margen. Entonces probemos algo así como 24. Observe como siempre trabajo con múltiplos de cuatro u ocho. Y Dn para el Gutter, voy a ir también por un múltiplo de ocho o 24 En realidad, vamos a subir un poco esto a 32. Ahora, hay diferentes tipos de cuadrículas. El estiramiento es probablemente el más común. Eso quiere decir que si cambio el ancho, entonces se va a estirar, así que la columna se estira, y la cuneta y el margen permanecen iguales Recuerda, siempre puedes volver al tamaño original a través del menú. Ahora bien, si voy por el centro, entonces eso significará que la grilla se quede en el centro. Y tendría que averiguar qué ancho necesitaría aquí. Así que necesitas hacer un poco de matemáticas para saber lo que buscas. Para nuestro diseño, vamos a pegarnos a estirar. Ahora podría aplicar la misma cuadrícula a mi otro marco simplemente pasando por ese proceso nuevamente, pero es mucho más fácil y mejor práctica guardarlo como un estilo. Voy a seleccionar el marco donde está mi cuadrícula. Entonces donde veo la grilla que acabo de crear, da clic en el icono Estilos. Ahora puedes hacer clic en el Plus y podrás guardarlo. Voy a llamarlo red móvil. Puedes agregar un poco más de descripción aquí y luego crear el estilo. Si haces clic en el Canvas gris, entonces vas a ver este estilo de cuadrícula guardado en tu descripción general. Si escribe, da clic, entonces también podría alterarlo o eliminarlo. Ahora, si queremos aplicarlo a cualquier otro marco, simplemente seleccione ese marco. Y luego desde el menú de cuadrícula, si pasas el cursor sobre él, vas a ver el ícono de estilos, ahora puedes seleccionar esa cuadrícula Ahora puedo empezar a alinear, por ejemplo, mis cuadros de texto a la cuadrícula. Observe que con cosas como estas tarjetas aquí, esto va a ser más tarde también maquetado. Entonces todo esto va a funcionar un poco más automatizado. Pero por ahora, hagámoslo a mano. Puedo mover el pequeño botón atrás aquí, alineándose con la cuadrícula. Con mi imagen, podría elegir si quiero que esta imagen de aquí vaya al borde o si quiero que esta se siente en la cuadrícula. Si colocas imágenes en la cuadrícula, asegúrate siempre de usar las columnas del archivo, no hagas nada como colocarlo en medio de una columna o algo así. Así que por ahora, en realidad voy a usar el ancho completo, y luego voy a hacer lo mismo con mis cuadros de texto Solo asegurémonos de que se sientan muy bien en la parrilla. Puedes ocultar o mostrar la cuadrícula usando el menú del lado derecho. Si pasa el cursor sobre él, verá el icono si, o puede usar el control de atajo y G. 17. 12 Comunidad de Figma y plugins: Plug ins y la comunidad Figma. Si vuelves a casa, luego en casa, vas a encontrar este pequeño globo aquí actualmente anuncios arriba en la parte superior y justo aquí abajo en la parte inferior. Pero tenga en cuenta que esto se mueve bastante, por lo que podría encontrarlo en otros lugares en el futuro. Si haces clic en él, entonces vas a saltar a la comunidad Figma Y aquí se ve todo tipo de archivos. Esto podría ser presentaciones, archivos de diseño que puedas usar. Algunos de ellos son gratuitos y algunos podrían ser pagados, pero la mayoría son gratuitos. Por ejemplo, digamos, estamos buscando un conjunto de iconos, entonces solo podemos buscarlo. Y entonces aquí se ven diferentes Consetes. Si te gustan algunos de ellos, entonces puedes ir a la página, así puedes navegar un poco por ellos, así vas a obtener una pequeña vista previa de lo que está sucediendo aquí, y luego puedes simplemente hacer clic en abrir en Figma y va a crear un duplicado de ese archivo en tu cuenta de FIMA También puedes buscar creadores. Entonces podrías, por ejemplo, buscar mi página en la comunidad, así que solo escribe Kristine Valor Y entonces si saltas a creadores aquí, llegarás a mi página. También puedes usar el enlace directo, que es figma.com forward slash, y luego solo usar el asa, que en mi caso está en Aquí podrás encontrar todos mis recursos gratis y simplemente duplicarlos y jugar con ellos en tu propia cuenta Figma. Otra cosa que tenemos aquí son los plug ins. Puedes buscarlos o aquí arriba, también tienes una pestaña plug in, que te muestra algunos complementos populares de plug, accesibilidad, etc. Solo echemos un vistazo, lo que nos da para la organización de archivos. Entonces obtienes una lista de plugins. Puedes ver cuántas personas lo están usando actualmente y luego simplemente podrías abrirlo en tu archivo. También puede abrir enchufes directamente en su archivo de diseño. Salta a tu menú de acciones, y puedes simplemente buscarlos aquí en la búsqueda normal o saltar a plug-ins y widgets, y luego también puedes buscar cualquier tema que te interese. Quiero mostrarte un plug in realmente genial llamado HTML to Design. Una vez que veas el enchufe, entonces simplemente haz doble clic en él y se va a abrir. Lo que podemos hacer con HTML para Diseñar, solo podemos agregar una URL a cualquier sitio web, y luego podemos desde una URL, crear este sitio web en Figma. Así que aquí puedes ver la página que importó y puedes ver todo como editable Entonces puedo, por ejemplo, sacar esta navegación aquí, y luego simplemente puedo trabajar con eso y puedo entrar aquí, puedo alterar todos los textos y todo. Así que esto es realmente genial para comenzar con cualquier sitio web con el que quieras jugar. 18. 13 Cómo agregar imágenes a tus diseños: Agregar imágenes a tus diseños. Hay diferentes formas de agregar imágenes a tus diseños. Puedes usar un menú de película e importarlas, puedes importarlas de forma masiva, puedes copiar imágenes existentes de tu mesa de Puedes crearlos con IA, o puedes usar un enchufe como Unsplash Entonces la primera opción es simplemente agregar una imagen a través del menú fil. Así que selecciona tu marco o forma y luego salta al relleno, y luego cambia a la imagen. Ahora puede obtener la opción de elegir una imagen, y simplemente puede seleccionar esa imagen de su archivo. No obstante, esto es un poco lento. Así que también podríamos seleccionar de forma masiva esas imágenes, presionar el comando shift o en Windows Control, y K, y ahora puedes seleccionar varias imágenes a la vez. Verás en tu cursor, una vista previa de la siguiente imagen a colocar y el número de imágenes que has almacenado. Podrías agregarlo directamente sobre el Lienzo, o puedes hacer clic en cualquier forma para colocar la imagen. También podría tener la situación de que ya tiene imágenes en su archivo de diseño que desea reutilizar. Ahora, no es necesario exportarlos e importarlos. Puedes utilizarlos directamente desde aquí. Simplemente seleccione la imagen, presione Mayús comando y C, y va a copiar un PNG, y simplemente puede pegar esto presionando comando o control y colocarlo en cualquier otra forma. Otra opción es que también podemos generar imágenes con A. Puedes o bien simplemente hacer clic en el menú Acciones, y luego aquí encuentras hacer una imagen o tener seleccionado un marco o forma y a través del menú de rellenos, elegir relleno de imagen, intercambiar imagen, y luego también puedes generar imágenes aquí. Y ahora simplemente escribe lo que estás buscando. Si te gustan más de una imagen, pequeño consejo, simplemente arrástrala en tu escritorio y luego podrás almacenarla, y luego, siempre podrás usarla en cualquier otro elemento. La última opción, y en realidad, mi favorita es usar un plug in. Abre el menú de acciones, haz clic en Plug ins y luego escribe Unsplash Haga doble clic en él para abrir, y puede escribir cualquier cosa que esté buscando, o puede usar algunas de las categorías preestablecidas. La mayoría de estas imágenes son de alta resolución y libres de regalías. Simplemente puedes hacer clic sobre ellos para rellenar cualquier imagen o marco en tu diseño. Así que agreguemos una imagen a nuestro diseño. Otro enchufe que funciona igual unsplash que también me gusta mucho es Lumi Solo tienes que ir a tus plugins y puedes elegir Lumi o el enchufe unsplash y luego abrirlo, seleccionar cualquier forma el enchufe unsplash y luego abrirlo, seleccionar cualquier Y luego puedes buscar las imágenes que te gusten aquí. Vamos a ir por este, y luego puedes colocarlo justo dentro de tu forma. Ahora bien, si queremos usar la misma imagen por aquí, entonces lo que podamos hacer, ya sea podemos usar la misma. Bueno, digamos que cierras el enchufe y no sabes dónde lo encontraste. Entonces lo que puedes hacer es usar tu atajo, comando shift y C para copiar un PNG, luego seleccionar la otra forma o marco, y ahora puedes simplemente pegarlo aquí. Si quieres cambiar la selección de la imagen, entonces haz doble clic, y vas a obtener el menú de la imagen. Aquí en el menú desplegable, que está configurado para llenar, elija cultivo. Ahora puedes mover la imagen alrededor. También puedes si te acercas a los bordes, también puedes cambiar el tamaño. Si mantienes turno, entonces va a escalar proporcionalmente 19. 15 métodos de duplicación: En Figma, quieres estar copiando y pegando bastante. Entonces es una buena idea entender las diferentes formas en las que puedes duplicar. Puedes pegar en la misma posición, pegar múltiples, pegar aquí, pegar para reemplazar o duplicar. Empecemos con pegar en la misma posición. De este modo simplemente copiamos un elemento, colocado en un marco en una determinada posición, y luego seleccionamos un nuevo marco y lo pegamos ahí. Entonces, seleccionemos nuestro encabezado, presionemos Comando o Control y copiemos, seleccionemos un nuevo fotograma. Y si simplemente ahora lo pegamos con el comando Control y V, se va a pegar exactamente en la misma ubicación. También podríamos hacer eso con múltiples elementos, así podemos elegir más de uno, seleccionar un marco, y va a pegar exactamente en el mismo lugar, muy útil. Y lo genial es que esto también funciona para multi paste. Entonces podemos hacer exactamente lo mismo y solo seleccionar varios fotogramas. Digamos que queremos que nuestro encabezado y nuestro botón aquí abajo se coloquen en cada fotograma en la misma posición, y simplemente los copiamos, seleccionamos todos los marcos, y pegamos, y van a estar exactamente en el mismo lugar. Si queremos una ubicación diferente, también podemos usar pegar aquí. Entonces lo copiamos también, pero luego hacemos clic derecho y seleccionamos pegar aquí de nuestro menú. Así que volvamos a seleccionar nuestro círculo. Lo copié, y ahora voy a seleccionar donde quiero colocarlo, y voy a hacer clic derecho a pegar aquí, y se va a colocar justo en esa posición. Otra muy útil que usé bastante es pegar para reemplazar. De nuevo, simplemente copias el elemento como antes, y luego presionas el comando Shift y R, o también puedes usar click derecho, y puedes pegar para reemplazar un objeto existente. Entonces voy a seleccionar la plaza aquí. Voy a presionar comando o control y C para copiarlo. Ahora puedo seleccionar cualquier otro elemento y simplemente presionar shift, command, o control, y R, y va a ser reemplazado. También puede seleccionar varios elementos y reemplazarlos todos a la vez. El último que quiero mostrarte es duplicado, me vas a ver usando esto todo el tiempo. Para duplicar, simplemente selecciona un elemento, presiona Alt y luego arrastra una copia. Si mantienes presionada mayúscula adicionalmente, entonces vas a copiarlo en la misma línea. Una vez que hiciste una copia, simplemente puedes presionar comando y D y va a hacer múltiples copias con la misma distancia. Vamos a probar eso. Así puedo seleccionar este fotograma, presionar t, y ahora puedo sacar una copia idéntica, pero se puede ver que esto se mueve libremente. Si hago lo mismo, pero mantengo presionada también la tecla mayúscula, entonces voy a copiar exactamente en la misma línea. Y una vez que hice un duplicado, ahora puedo golpear comando o control y D, y va a hacer más copias exactamente en la misma distancia. Si los seleccionamos todos, vamos a golpear turno y dos para tenerlos todos posicionados en el centro. Se puede ver en el lado derecho y el panel de propiedades, puedo ajustar los huecos entre ellos. Esto se debe a que todos están con la misma distancia, están ordenados, y por lo tanto, puedes ajustarlos y también puedes cambiarlos usando las pequeñas burbujas 20. 16 Dibujo en Figma: También puedes usar FIMA para ilustración y dibujo. FIMA es un programa basado en vectores. Si antes trabajaste con algo como Illustrator, esto te resultará muy familiar. Es importante tener en cuenta que FICMA está hecho principalmente para la configuración del diseño de la interfaz No se trata realmente de ilustración, pero puedes obtener algunos resultados bastante buenos si quieres configurar cosas como iconos, por ejemplo. Podrías usar simplemente tus formas aquí para ilustrar. Si dibujo una forma y si hago doble clic sobre esa forma, entonces nota como estoy obteniendo un menú diferente y puedes hacer click en él, y por lo tanto, vas a adivinar estas nuevas herramientas. Vas a conseguir estas curvas y cosas así. Ahora, probablemente quieras configurar tu propia ilustración y por lo tanto, tendría más sentido ir por tu lápiz o tu herramienta de bolígrafo. Si tu experiencia con la ilustración y tienes cosas como un track pad y bolígrafos en casa, entonces es posible que quieras ir por el lápiz. Él puede dibujar libremente. Sin embargo, si estás trabajando con un mouse en una configuración más estándar, entonces probablemente quieras ir por la herramienta pent La herramienta pent es algo lo que vas a estar realmente acostumbrado si antes trabajaste con software de ilustración Simplemente agrega un primer lugar en nuestro lienzo, y luego obtienes una línea. Si mantienes turno, entonces obtienes una línea recta. Hagámoslo aquí. Y por lo tanto, entonces puedes dibujar cualquier icono o cualquier elemento de ilustración que necesites. Ahora bien, si saltas de este menú, aún podrías volver a obtener esos puntos haciendo doble clic y podrás ajustarlos. También puedes obtener las curvas de Bézier. Hagamos doble clic para volver a nuestra ilustración. Si haces clic aquí, entonces podrías obtener las curvas y puedes manipularlas aún más. 21. 17 Escalado en Figma: Escalado en Figma. La herramienta de escalado en Figma se pasa por alto bastante pero es muy útil a veces Aquí tengo una ilustración vectorial, y se puede ver que ésta se compone de diferentes formas, y estas formas tienen un trazo que tiene un peso diferente. A veces son 28 y así sucesivamente. Ahora bien, si quiero agrandar eso, lo que podría hacer es ir al borde hasta que veas el pequeño roche a aquí y luego todo el turno hacia abajo para mantener las proporciones y ahora puedo cambiar el tamaño Sin embargo, con los trazos, simplemente no funciona correctamente, no me da las proporciones adecuadas. Una manera mucho mejor de hacerlo sería usar una herramienta de escala. Encontrará la herramienta de escala en la barra de herramientas justo al lado de la herramienta de movimiento. Así que asegúrate de sacar el submenú, y luego aquí ves escala, o también puedes usar un atajo k Notarás que el error se ve un poco diferente, y luego en el lado derecho aquí puedes ver el menú de escala. Entonces en el menú de escala, puedes o bien añadir una cantidad, así que dos veces el tamaño actual, por ejemplo, Si pulsas de nuevo K, vuelves a entrar ahí. También puedes agregar una altura y un ancho específicos que quieras que esto se escale También puede elegir la dirección de la escala. Por ejemplo, podríamos hacerla crecer de abajo a la izquierda en adelante. También puedes escalar en las Cvas siempre y cuando estés dentro de la herramienta de escala Así que solo selecciona cualquier elemento y luego vas a ver un nuevo error en el borde, y como estás en la herramienta de escala, entonces esto ahora va a escalarlo correctamente. A veces te quedas atascado en la herramienta de escala. Entonces, si no encuentras todas tus otras configuraciones, entonces esto se debe a que la herramienta de escala aún está abierta. Solo asegúrate de cerrarlo aquí mismo con la x. 22. Parte 1: Déjame contarte un poco sobre nuestro proyecto de curso. En el proyecto del curso que abarca todo el curso, estaremos trabajando en un diseño de aplicación de podcast, así como un prototipo funcional para ello Al final de cada capítulo de tu archivo de trabajo de Figma, encuentras un prompt y un enlace para saltar al proyecto del curso El proyecto del curso se suma al curso general. Eso quiere decir que es absolutamente opcional. No vas a perder ninguna información si solo pasas por las clases generales. Pero déjame decirte un poco más antes de que decidas. Cuando abres el archivo del proyecto del curso en el lado izquierdo, vas a ver páginas. En la primera página, tenemos nuestros ejercicios. Puedes ver para cada sección del curso, tenemos un ejercicio. Estos ejercicios se construyen unos sobre otros y vienen con instrucciones. Asegúrese de que primero recorra las lecciones generales de, por ejemplo, los conceptos básicos de Figma o componentes Y una vez que se sienta listo, vuelva al archivo del proyecto del curso y continúe con los siguientes pasos. No te apresures, porque sólo te va a confundir. Cada uno de los pasos viene con una solución sugerida. Tenga en cuenta que no existe tal cosa como una solución final en el diseño. En realidad es solo una sugerencia. Puede que se te ocurra algo completamente diferente que sea igual de bueno. Pero también siéntete libre de simplemente tomar mi solución y continuar a partir de ahí. Si alguna vez te quedas atascado en el lado izquierdo de las páginas, encuentras el diseño final. Esta es realmente la versión pulida y acabada. También encontrará una página para componentes y guías. No te preocupes, vas a aprender de todo esto durante el curso. Ahora volvamos a los ejercicios y un vistazo a nuestra primera parte, que es lo básico de Figma. Trato de mantener esos archivos actualizados. El tuyo podría estar luciendo un poco diferente. Toda la información importante estará ahí. No se preocupe. 23. Parte 1: En esta primera parte aquí, se nos pide que construyamos un wireframe Y puedes ver que hay una imagen de cómo debería ser y obtienes algunas instrucciones. Realmente puedes construir esto en tu propio tiempo también. En el lado derecho por aquí, encuentra mi solución sugerida. Esto es realmente un marco de alambre que puedes hacer clic y ver exactamente en el panel de capas, cómo configuré esto. No tienes que construirlo exactamente así, pero si alguna vez te quedas atascado, entonces solo echa un vistazo o cosas así. Barra de progreso aquí, eso podría ser un poco complicado para empezar. Sólo cópielo. Está absolutamente bien. La idea de estos ejercicios es que realmente saltes en ti mismo y lo descubras. Pero para empezar, déjame guiarte un poco. Voy a copiar este primero aquí. Y voy a traerlo y colocarlo junto a mis marcos de alambre en los que voy a trabajar. Aquí vamos, voy a simplemente colocar esto justo al lado. Vamos a sacar a estos de aquí fuera del camino. Pongamos esto aquí. Esto puede parecer bastante complicado y un poco abrumador, pero en realidad son solo formas y texto. Esto es todo lo que hicimos durante nuestra sesión básica. Voy a empezar así. Voy a presionar R y voy a dibujar esta forma de fondo. Mantenga el turno presionado para que obtenga una forma uniforme. Esta es mi foto de fondo aquí en la parte de atrás. Y voy a hacer lo mismo otra vez. Vuelvo a presionar R, voy a crear una forma más pequeña aquí. No quiero que sean del mismo color. Simplemente puedes hacer clic en cualquier gris desde aquí. Puede que tengas algo guardado aquí abajo. No importa qué colores uses. También puedes usar el seleccionador de color. Así que también podrías usar el color que estoy usando en mi ejemplo. Pero es realmente irrelevante para el marco de alambre. Ahora voy a agregar el texto. Entonces elijo mi herramienta de texto de la barra de herramientas y simplemente voy a hacer clic en donde quiero colocarla y comenzar a escribir el nombre del podcast. Voy a duplicar esto otra vez. Hicimos todo esto en las lecciones. Si no recuerdas cómo duplicar, salta de nuevo a las lecciones. Es la opción de cambio y alteración. Y de esta manera puedo duplicar justo debajo en la misma fila. Voy a colocar esto aquí y voy a llamar a esto por artista. Ahora puedo seleccionarlo. Y luego en el tamaño de la mano derecha en el panel de propiedades para texto, podría, por ejemplo, cambiar esto a medio y también cambiar el tamaño del texto. Por ejemplo, 216. Si selecciono el texto, también puedo cambiar el relleno a negro. Este botón aquí o esta etiqueta. Se puede ver que es simplemente un marco con un texto en su interior. Voy a golpear y voy a dibujar un marco anidado. Da clic en el botón más junto a Phil, si no viene con una pastilla. Ahora voy a redondear las esquinas. Simplemente voy a copiar el texto de un par. Da click en el marco, pégalo en tamaño y cámbialo. Simplemente arrástralo y colóquelo. Y puedes ver en el panel Capas que si seleccionas el marco, todo lo que arrastres sobre él se coloca automáticamente en tamaño si quieres un poco de sombra para el botón y simplemente puedes hacer clic en el más junto a Efectos en el panel Propiedades a la derecha dentro del panel Propiedades. Y eso va a agregar . Ahora en mi ejemplo, se puede ver que esto es todo en un cuadro. Todo esto está agrupado. Voy a hacer lo mismo para mi nuevo ejemplo aquí. Voy a seleccionar todos estos elementos. Ahora voy a presionar Comando y G. Esto lo agrupará realmente para marcos de alambre. Esto es bastante o correcto. Ahora puedo llamar a este grupo héroe. Pero tal vez quieras ya empezar a pensar en marcos como sabemos, esta es la superpotencia Igms ¿Qué puedes hacer para convertir esto rápidamente en un marco? Salta al panel de propiedades del lado derecho y en lugar de agrupar, solo usa un marco. También puede seleccionar elementos y hacer clic derecho. Y entonces puedes ver aquí la selección de fotogramas y un atajo para que también puedas hacer esto una sola vez o simplemente dibujar otro fotograma a su alrededor, mejor si pausas el video y luego pruebes esto tú mismo. Ahora quiero este titular aquí recientemente jugado, y podemos ver que este es 24 y medio. Entonces lo que voy a hacer es que voy a copiar este de aquí encima Oh, y por cierto, no encendí mis cuadrículas Hagamos esto. Seleccionemos este par y marco. Y luego en el lado derecho, puedo ver que no se aplica ninguna cuadrícula, pero ya creé un estilo de cuadrícula para ti. Da clic en los puntitos para Estilos y solo agrega la cuadrícula móvil. Entonces ahora lo puedes ver. También puedo alinear mis imágenes. Ahora vamos a envejecer esto. Y aquí donde obtienes la distancia agradable para que puedas medirla. Voy a colocar este titular aquí y voy a llamarlo recientemente plato. Voy a seleccionarlo y voy a cambiarlo a medio. Quiero crear estas pequeñas tarjetas aquí. Para esta tarjeta, en realidad sólo voy a copiar la que ya tengo. Parece que son más o menos del mismo tamaño. Voy a arrastrar este nombre porque esto parece ser, esto es 16. ¿Cuánto cuesta esto también? 16. Bien, genial. Así que ahora solo voy a cambiarlo por nombre de podcast. Ya voy a seleccionar a ambos. Esta vez voy a hacer click derecho y voy a decir selección de fotogramas. Es lo mismo si lo agrupas y luego lo cambias a través del menú desplegable aquí, o simplemente puedes dibujar un marco alrededor de él. No importa. Con lo que vas a terminar es con este marco. Y dentro de este marco tienes tu imagen. Por supuesto, puedes cambiarles el nombre y tienes el nombre del podcast. Llamemos a esta tarjeta de aquí. Ahora simplemente queremos duplicarlo. Vamos a arrastrar algunos ejemplares. Y siempre me mantengo viejo presionado para poder ver las distancias. Y voy a seleccionar aquí a todo este grupo. Déjame ver. En realidad, sí, estos son solteros en esa. Y sólo voy a copiar a todo ese grupo y colocarlo aquí abajo. Y también voy a copiar mi titular. Y voy a llamar a esto, tal vez te guste si vuelves a hacer una pausa en el video aquí y probar esto por ti mismo Como dije antes, puede que ni siquiera necesites el video. Tal vez sea más fácil para ti simplemente tener esta referencia y construir a partir de ahí. Bien, lo último que necesitamos ahora es esta barra de aquí abajo, la barra de grifo. Voy a darle a F, y voy a dibujar un marco para esto. Vamos a darle a esto un color de fondo. Vamos a hacer clic en Plus. Y en realidad sólo voy a escoger el color de mi ejemplo de aquí. Ahora lo que podría hacer es simplemente agregar estos elementos. Pero como puedes ver aquí en la barra de pestañas, ya los configuré en subcategorías, así que esto va a facilitarlo más adelante cuando queramos agregar capacidad de respuesta y cosas así No hace falta que lo hagas así, pero te voy a mostrar cómo configurarlo ya en esas tres secciones. Lo más fácil es simplemente copiar tu barra de pestañas y luego recordar nuestros campos aquí arriba, ellos pueden hacer cálculos. Lo que voy a hacer es que voy a sumar dividido por tres. De esta manera estoy obteniendo la cantidad exacta para uno de mis íconos que luego quiero colocar aquí. Ahora simplemente voy a conseguir algunos textos. Este texto aquí es en realidad mucho más pequeño. Esto es sólo 12. Voy a cambiar esto a 12. Voy a colocar esto dentro de aquí. Entonces simplemente voy a golpear y dibujar un círculo. Entonces esto es solo un marcador para un icono que luego va a estar ahí Vamos a acercarnos un poco más. Podemos usar nuestra herramienta de alineación. Vaya, en realidad ese no es el que quería, pero bueno, coloquemos esto Dale un poco más de espacio. Ahora, llamemos a este enlace, o icono, o como quieras llamar a esto. Ahora volvamos a colocarlo dentro. Ahora puedo simplemente duplicarlo de esta manera. Estoy recibiendo tres de estos enlaces que tienen exactamente el tamaño correcto. Voy a llamar a este hogar. Observe que esto es como a la izquierda. Lo que quiero hacer, quiero saltar hacia atrás. Voy a colocar esto en el centro. Cambiemos la alineación del texto al centro. Y voy a llamar a esto hogar. En realidad, voy a darle todo el espacio que tengo disponible porque podría tener alguna otra redacción más adelante aquí para asegurarme de que esto tenga suficiente espacio. Entonces llamemos a éste. Llamemos a esto guardado. Eso es. Tenemos nuestra primera configuración de nuestra primera pantalla. Vamos por el segundo. Bueno, en realidad hagamos doble clic en este y llamémoslo hogar. Ahora vamos a traer nuestro segundo. Vamos a copiar esto y pegarlo aquí mismo. Lo que voy a hacer aquí, así, es más o menos lo mismo. Voy a copiar esto. Yo sólo voy a deshacerme de estos elementos. No los necesito. Tengo este pequeño botón de retroceso. Sólo voy a copiar sobre algún texto. Esto es correcto, ¿Dónde está entonces? Tengo el nombre de la lista de reproducción y el nombre del podcast aquí también. Solo voy a agregar mi cuadrícula de diseño de nuevo, y en realidad solo voy a copiar esto, colocarlo en el medio. Y sólo voy a arrastrarlo hasta los bordes. Me aseguraré si tengo un nombre más largo de que haya suficiente espacio. Voy a seleccionarlo y centrar el texto. Entonces tengo algún texto copiado. Aquí voy a ser perezoso y solo voy a agarrar esto y colocarlo aquí porque sé que es solo copiar texto. Y después tengo que leer más. Entonces déjame hacer esto leer más. Lo selecciono y luego si lo quieres subrayado, entra en pequeños tres puntos en tu configuración de tipo, y aquí puedes encontrar el texto subrayado Si haces doble clic, entonces solo va a cambiar de los cuatro anchos para alterar el ancho si quieres eso, porque esto es un poco como un botón en realidad. Bien, genial. Ahora solo necesito agregar los episodios. Sólo voy a copiar un cuadrado de los que ya tengo por aquí. Voy a hacerlo un poco más pequeño. Como ves no tiene que sentarse en la grilla porque esto es como un elemento propio. Entonces voy a copiar esta. Voy a colocarlo de nuevo a la izquierda. Veamos en realidad qué tan grande es este. Es muy pequeño, son diez. Puedes escribir todas las mayúsculas o qué. También puedes hacer, de nuevo, saltar a estos ajustes adicionales y puedes cambiarlo a mayúsculas. Entonces voy a copiar este de aquí y colocarlo aquí. Ahora esta voy a hacer lo mismo. Déjame cambiar la configuración del texto para que quede todo a la izquierda. Y voy a colocar esto a continuación. En realidad, vamos a tener una buena distancia de ocho también. Voy a copiar esto otra vez. Puedes ver aquí dejé un poco más de espacio porque algo en realidad podría ser más largo. Lo que hice aquí es que puedo ver esto es auto, esta es una altura de línea de 24. Si haces clic en él, entonces podrás verlo. Voy a dar una talla. Déjame arrastrar esto para abrirla. Voy a darle a estas dos líneas caben cerca de 48. Si esto es un poco demasiado avanzado, no te preocupes. Simplemente arrástralo para que se ajuste a tus necesidades. Ahora esto está en la parte inferior. No quiero esto. Voy a cambiar la dirección aquí para ponerla en la cima. Ahora puedo alinearlo un poco mejor. En realidad, echemos un vistazo a lo que tienen aquí. Tienen auto y 48, probablemente solo necesitan deshacerse de esto. Bien, ahora solo necesito este pequeño botón de reproducción aquí. Se trata de un rectángulo. Vayamos a nuestras formas. En nuestras formas, elegimos un polígono. Dibujemos uno. Y eso es todo. Ahora esto obviamente pertenece juntos, así que voy a seleccionar todo esto. En realidad, esta vez lo estoy agrupando porque quiero que esto, como pueden ver aquí, vaya a través de todo el ancho. De hecho voy a golpear y voy a dibujar un marco alrededor de él. Ahora bien, esto es un on frame, lo que se llama episodio, llamémoslo también episodio. Genial. Ahora podemos simplemente duplicar esto. Tenga en cuenta cómo quiero algunos episodios más, como ir aquí abajo. Esto va a ir por el área visible. Recuerda si seleccionamos un marco padre y desencajamos, entonces podremos ver todo lo que está a continuación Entonces también puedes hacer esto en mi ejemplo, y puedes ver que en realidad solo tienen dos aquí. Pero sí, todo lo que es más grande que tu marco se volvería visible. Muy importante recordar siempre. Esto último que necesito es mi pequeño bar de aquí abajo. Simplemente copiemos esto. Seleccionamos el marco, y como sabemos lo va a pegar justo en su lugar. Genial, así que terminamos con el segundo. Bien, genial. Ahora sólo necesitamos nuestro último. Echemos un vistazo. Nuestro último es el episodio señalado que éste se coloca en un fotograma propio y luego simplemente tenemos un cuadrado. Tenemos texto, esta barra de juego aquí. Es simplemente un marco con otra forma en su interior. Si esto es demasiado complicado, entonces sólo tiene que copiar el que hice aquí. Y aquí tenemos texto otra vez. Aquí puedes ver que esto es simplemente un marco con esquinas redondeadas y un poco de trazo. Y luego coloqué mi triángulo que creé dentro de aquí. Así que echa un vistazo si puedes resolverlo por ti mismo con la solución dada. 24. Parte 1: Como segunda parte de nuestros conceptos básicos, queremos darle vida a este marco de alambre y agregar algunas imágenes y colores. Yo te proporcioné el material. Entonces aquí tienes todas las imágenes. Aquí también tienes algunos íconos. Y estoy usando un gradiente. Puedes usar esto. Te voy a enseñar en un segundo cómo, pero no tienes que hacerlo. Por supuesto también puedes usar el negro sin salpicaduras en o cualquier otra imagen de Bien, vamos a saltar por aquí. Lo que voy a hacer es que voy a copiar mi marco de alambre. Puedes usar la solución en la que trabajaste o puedes usar la que te proporcioné. Lo que voy a hacer es volver a copiar esto junto a mi solución. Entonces esto hace que sea un poco más fácil para mí agarrar todo. En realidad no necesito las rejillas, así que vamos a apagarlas. Sólo voy a ir poco a poco. Voy a comenzar con mi sección de héroes aquí y vamos a acercarnos un poco más a nuestras imágenes también. Y este pequeño gradiente aquí voy a usar en el segundo. Bien, genial. Entonces voy a comenzar con la primera imagen. Voy a agarrar esto, voy a mantener comando shift y ver que esta copia es un PNG. Si aún no estás seguro de cómo usar las imágenes, entonces por favor vuelve al video donde encontramos las diferentes opciones de cómo usar Ya sea copiar una imagen existente, también puede seleccionar cualquier marco o forma. Haga clic en Rellenar, luego en Imagen y elija una imagen. O puedes por supuesto, usar el enchufe unsplash en que echamos un vistazo durante las sesiones Voy a copiar esto de nuevo, comando shift, y esta es mi opción favorita. Y entonces simplemente voy a presionar el comando V y copiarlo aquí. Y voy a hacer esto con este pequeño de aquí también. Ahora se puede ver que quiero más contraste. Es por eso que he creado esta superposición aquí. En realidad, creo que en mi ejemplo, es una superposición más agradable porque abarca todo el tamaño de la imagen Voy a copiar eso. Voy a colocarlo en la imagen aquí. Ahora solo necesito ir a mi panel de capas y tengo el fondo de la imagen. Tengo esto, bien, eso se ve bien. Y tengo todo esto en la parte superior. Entonces voy a seleccionar el texto. Sólo voy a cambiar esto a blanco. Eso se ve bien. No te preocupes demasiado por los gradientes. Los usamos, no demasiado el nuevo diseño de ojos, pero si quieres echar un vistazo, entonces simplemente haz clic en el degradado que creé. Y puedes ver que simplemente en lugar de imagen, también puedes crear gradientes aquí También podrías cambiar los colores. Voy a poner mi barra de pestañas a un lado y voy a agregar el resto de mis imágenes y simplemente voy a copiarlas todas con mis pequeños atajos agradables. Entonces quiero cambiar el color de fondo. Ya voy a agarrar mi mensaje de texto. Déjame simplemente desabrochar esto para agarrar todo el texto. Si mantiene presionada la tecla Mayús y los comandos en el control de Windows, entonces puede seleccionar varios textos y profundos seleccionados. Debido a que esto está anidado, seleccionemos todo esto. Si no solo se selecciona uno por uno, mismo resultado. Y voy a ir por unos blancos aquí y voy a hacer lo mismo por los titulares. Bien, genial. Entonces ahora voy a cambiar mi color de fondo. Estoy haciendo esto a través del relleno del marco padre. De nuevo, sólo voy a recogerlo de mi ejemplo aquí arriba. Vamos a recortarlo de nuevo. Eso se ve bastante bien. Y eso es mucho más fácil de lo que pensabas, ¿no? Solo necesito ordenar mi barra de grifo aquí abajo. He añadido algunos íconos para ti. Déjame echar un vistazo. Los íconos que vamos a liderar es la casa, la búsqueda y el corazón. Ya voy a copiar ese botón de reproducción. Coloquemos esto por aquí. Ahora, antes que nada, configuremos nuestra navegación. Esto se ve muy bien. Primero que nada voy a cambiar el color, el color de fondo. También voy a escoger de mi ejemplo aquí, luego voy a seleccionar todos los textos y voy a cambiar eso a un blanco. Voy a deshacerme de estos puntitos que tenía aquí. Nuevamente, mantenga siempre el turno y comando o control. De esta manera puedes seleccionar en profundidad varios artículos o simplemente ir uno por uno si esto sigue siendo demasiado rápido. Ahora voy a agregar poco hogar aquí. Voy a sustituir esto con mi búsqueda. Y voy a poner mi botón aquí, genial. Ahora solo necesito seleccionar este, porque también quiero que este color de relleno se vea como en mi ejemplo. Bien, genial, así que ahora puedo agregarlo de nuevo aquí Otra vez, simplemente voy a copiarlo. Y ya puedo pegarlo aquí. Ahora vamos a hacer lo mismo para éste. Voy a agarrar esta imagen, pegarla dentro de aquí. Voy a deshacerme de esta espalda, y voy a usar otro icono que me proporcionaron. Tengo atrás y abajo. Vamos a copiarlos también. Vamos a traerlos por aquí. Y voy a poner esto aquí. En realidad, echemos un vistazo en el ejemplo porque puedes ver que ya coloqué esto en un marco abarcando todo el ancho solo va a hacer que sea mucho más fácil más adelante manejarlo Sólo voy a tener este marco invisible a su alrededor. Bien, genial. Ahora me voy a ir como está. Sólo voy a alargar esto por ahora. Voy a seleccionar mi texto. Todo tiene este blanco ahora, puedo cambiar de nuevo el relleno de fondo. Estoy pasando por esto bastante rápido. Realmente es solo una referencia para ti, tómate tu propio tiempo, toma la solución sugerida y realmente trata de resolverlo en tu propio tiempo. Ahora, quiero trabajar en mis episodios aquí. Tengo un botón de reproducción que viene con los iconos sugeridos. Yo sólo voy a darle a esto un color de fondo también, solo para poder verlo y manejarlo un poco mejor. Por ahora, me voy a deshacer de este triángulo y voy a usar mi botón Reproducir. Ya lo puedes posicionar muy bien, no es necesario. Y luego seleccione el texto. Entonces cambiemos el relleno a blanco. Este de aquí también. Asegúrate de que lo tenemos todo. De hecho voy a dejar esto como es porque entonces puedo rellenarlo. Sólo voy a dejar eso a un lado por un momento. No hay lugar que allá dentro. Ahora puedo simplemente agarrar esa imagen. Puedo colocarlo en mis formas. Observe tan pronto como vea el nombre del marco, luego se saltó fuera de este marco. Qué puedes hacer si quieres agregar uno más pero sigue saltando, luego simplemente selecciónalo. Solo haz una copia, solo que realmente, realmente un poco por debajo. Y luego úsalo con las teclas de tu teclado, esta manera se queda dentro. O simplemente reorganízalo en tu panel de capas. Bien, ahora podemos seleccionar el marco padre. Vamos a recortarlo de nuevo. Podemos colocar nuestro bar aquí atrás. La forma más fácil es en realidad solo copiar uno que ya está colocado encima y pegarlo aquí. Déjame ordenar este de aquí arriba, colocarlo amablemente. También podríamos organizar un poco esas distancias que tenemos aquí. Ahora vamos por el último, que es nuestro overlay. Voy a agarrar el color de fondo desde aquí. Ahora fíjate que este es un marco propio. Llamemos a esto overlay. Esto contiene toda la información porque más adelante , si hacemos clic en una canción, esto va a simplemente como deslizarse por aquí básicamente, y sentarse así. Para esta superposición, tengo un color ligeramente, ligeramente más claro. Voy a escoger eso de mi ejemplo también. Vamos a deshacernos de este de aquí. Vamos a hacer lo mismo que hicimos aquí. Tenemos un boton bajito que vamos a agarrar. Ya voy a colocarle un marco alrededor. En realidad, eso era un rectángulo. Vamos a presionar de nuevo. Necesitamos un marco, no un rectángulo. Ahora podemos colocar esto alrededor y ahora se puede ver que esta se coloca en su interior muy bien para la imagen aquí. Simplemente voy a copiar mi imagen ya sea de cualquier diseño existente o aquí abajo de mis muestras. Ahora puedo seleccionar mi texto, hacer este blanco aquí. De hecho, solo voy a usar mi botón Reproducir. Voy a colocar esto por aquí. ¿Recuerdas cómo podemos escalar? ¿Lo recuerdas exactamente? Tenemos que presionar K, el botón Escala. Y ahora puedo o agregar cualquier valor o podría escalarlo. Lo que voy a hacer es que voy a tener que duplicar el tamaño o algo así. Bien, genial. El último bit está aquí, mi texto. Siempre asegúrate de volver a saltar de la herramienta de escala. Y ahora puedes ver tu panel de propiedades generales. Entonces vamos a cambiar el color para esto. Ahora voy a agarrar este granero de aquí. De nuevo, si quieres seleccionar en profundidad, presiona comando o control. Y ahora simplemente voy a seleccionar mi color de luz alta. A ver si este gris también, creo que es un poco más claro. De alguna manera, perdí mi pequeño círculo. Sólo voy a agarrar esto de mi ejemplo. También puedes volver a destruir un círculo, y voy a colocar esto aquí. Ahora bien, si esto se coloca así, si alguna vez tienes algo así, entonces esto es porque este marco tiene contenido recortado Así que podrías simplemente desabrocharlo. Simplemente le di un poco más de espacio para que mi pequeña burbuja aquí encaje perfectamente. Como puedes ver, con solo usar marcos de formas generales, rellenar algunas imágenes y jugar con el color, construimos un diseño de interfaz de usuario bastante impresionante. Y por cierto, no te frustres si no es tan rápido como lo que te mostré en este video. Llevo bastante tiempo haciendo esto. Además estoy grabando esto para poder parar y cortar piezas. Y esto es simplemente un video para ayudarte en la vida real. Esto simplemente va a llevar más tiempo. Así que siéntate, tómate tu tiempo y juega con él. 25. COMPONENTES 01 Componentes e instancias en Figma: Conozcamos uno de los componentes de características más importantes de Figma componentes de características más importantes Una vez que empieces a diseñar, vas a notar que vas a diseñar los mismos elementos una y otra vez. Entonces cosas como mi navegación y mis tarjetas. Y por cierto, recuerda, desencribir tu marco padre para poder ver todo el contenido Ahora, en lugar de rehacer esos elementos y tratar de mantenerse al día con cualquier cambio, es mucho más útil tener algún tipo de plantilla, a que infigma llamamos componente Y a partir de ese componente, puedes hacer copias Infigma que llamamos a eso una instancia, que puedes usar en todo tu diseño . Entonces, vamos a configurar esto. Voy a sacar esta navegación aquí porque quiero meterme enseguida en el hábito de tener mis componentes separados de mi diseño. Para convertir la navegación en componentes, simplemente selecciónela, en el panel de propiedades del lado derecho, haga clic en el símbolo del componente. Observe cómo esto va a resultar en un contorno morado y un signo componente adjunto al nombre. Y puedes ver el mismo cambio en el panel Capas. Otras formas de crear un componente serían el atajo, Alt u Option Command y K, o simplemente hacer clic derecho y elegir Crear componente. Ahora queremos usar una instancia, así una copia de este componente en nuestro diseño. También hay varias formas en las que podríamos hacer eso. Puedes crear una instancia simplemente copiándola y pegándola o que sea un poco más rápida, mantén presionada y luego simplemente saca una copia, que luego puedes colocar dentro de tu diseño Observe cómo la instancia también tiene un contorno púrpura, pero tiene una forma de diamante vacía. Otras formas de crear una instancia es saltar al panel Activos, así que esto está justo al lado de tu panel Capas, y verá cualquier componente que hayas creado en ese archivo o más tarde en el que conectaste con una biblioteca externa. Simplemente puede sacar ese componente y luego colocarlo en su diseño. Así que vamos a deshacernos de nuestra navegación desde la página Artículos y luego reemplazarla con nuestra instancia también. Además del panel Activos, también puedes usar la función de búsqueda, saltar a assets y luego simplemente buscar por el nombre. Hagamos lo mismo con nuestra tarjeta. Y esta vez, quiero usar un atajo. Si alguna vez te olvidas de un atajo, simplemente pasa el cursor sobre el símbolo del componente y luego te va a mostrar aquí Entonces en mi caso, esta es la opción Comando K. Ahora saltemos al panel Activos donde puedo ver que mi tarjeta se guardó como componente y puedo colocarla en mi diseño. También quiero reemplazar la otra tarjeta, así que vamos a deshacernos de ella. Y por cierto, también puedo simplemente copiar directamente de una instancia existente. Si mantienes presionada Mayús y Alt, entonces copiarás justo debajo en la misma línea. No obstante, también copia sobre el contenido de mi componente. Entonces lo que voy a hacer es que normalmente tengo mi componente bastante neutral, así que me desharía de esta imagen aquí y vamos a reemplazarla haciendo clic en más con solo un relleno neutro. Y luego mi titular, yo también sólo voy a llamar titular. Entonces generalmente trato de tener todos mis componentes bastante neutrales, y luego voy a rellenar la información, el contenido en mi diseño. Entonces vamos a averiguar cómo hacer eso. 26. 02 Instancias superiores: Aprendamos qué y cómo sobrescribir en nuestras instancias. Entonces aquí tenemos un montón de componentes, y usamos instancias de esos componentes en nuestro diseño. Se puede ver esto al echar un vistazo al panel de capas, y se puede ver la forma de diamante vacía. Si alguna vez quieres ver el componente original, entonces en el lado derecho, justo al lado del nombre del componente, haz clic en Ir al componente principal, y saltará al componente original que usaste para configurar esta instancia. Por lo que suelo dejar mis componentes bastante neutros y descriptivos. Pero en mi diseño, obviamente quiero agregar algo de contenido, así que quiero cambiar esos fondos grises en imágenes, y quiero agregar un titular. Entonces, para mi titular, podría simplemente hacer doble clic y luego sobrescribir esto Yo puedo hacer lo mismo con mis imágenes. Simplemente puedo ir a llenar y luego cambiarme a imagen e importarlas, o puedo usar mi atajo con este comando shift y K, y voy a importar de forma masiva esas imágenes. Ahora puedo simplemente dejarlos caer en las formas. Yo también quiero la nube aquí. Voy a seleccionar eso con mi atajo comando Shift y C, que copiará un PNG, y ahora simplemente puedo pegarlo en la forma aquí. Sin embargo, puede haber algunos elementos que en realidad no quieres que se sobrescriban Por ejemplo, este botón de retroceso aquí, siempre quiero que esto se llame de nuevo. Así que simplemente puedo seleccionar mi componente y luego seleccionar el texto que quiero que quede fijo. En mi panel de capas, si pongo el cursor sobre esto, puedo ver este pequeño candado y luego bloquear esta capa Ahora mismo, en el diseño, nadie podría dar click y cambiar este texto. Ahora, lo mejor de configurar su diseño con componentes e instancias es que incluso si estuviera anulando esto, aún podría diseñar en sus componentes Por ejemplo, aquí, podríamos querer cambiar un poco la configuración. Es posible que queramos aumentar el tamaño de este texto, y puedes ver que seguirán todas las instancias. Además, algunos cambios de diseño más dramáticos. Digamos que queremos mover nuestro menú hacia la izquierda, así seguirían todas las instancias. Dos pequeños comentarios, tal vez te estés preguntando, ¿por qué está aquí este componente, este componente trasero configurado sobre todo el ancho, por qué abarca todo el ancho y tiene todo el espacio a su alrededor? No tienes que hacerlo así. También podrías simplemente tomar el texto y convertirlo en componente y ese es tu botón. Me gusta bastante así. De esta manera, ya sé que esta es la distancia. Solo tengo que ponerlo justo debajo de mi navegación, y no necesito preocuparme de que la distancia entre la imagen sea la misma si creo más páginas. Pero siéntase libre de encontrar su propio camino sobre cómo configurar esto para su diseño. La otra cosa que quizás te estés preguntando es, ¿qué pasa con el texto? ¿Esto no tiene que ser un componente también? Bueno, podrías configurar texto, como, por ejemplo, aquí donde tiene sentido donde el texto es un enlace, o esto podría ser una introducción, donde podrías agregar más detalles, tal vez iconos o algo así Podrías tener una composición de conjunto y convertirla en un componente. Pero solo copia texto, solo texto estándar en tu diseño así, no necesita ser un componente en absoluto. 27. 03 Qué anular y qué no: Lo que puedes sobrescribir y lo que debes anular. Ahora Figma te da muchas opciones para anular. Se pueden sobrescribir colores, imágenes, texto, estilos, opacidad, efectos como sombras y difures y visibilidad. Pero solo porque teóricamente puedes sobrescribir, no recomiendo anular todos estos Generalmente recomiendo anular solo texto e imágenes, así que cualquier cosa que provenga de una base de datos. Si quieres otros cambios como un color de fondo, entonces esta sería una nueva versión de ese componente. Entonces configuraría otro componente para esto. Posteriormente podrá combinar esas versiones en un conjunto de componentes con variantes. Vamos a cubrir esto en un momento posterior del curso. 28. 04 Reversión de componentes y anulaciones: Revertir componentes y anulaciones. Aquí tengo un componente y una instancia, y se puede ver que en mi instancia, anulé bastantes cosas, como la imagen, el trazo y el fondo Ahora bien, ¿y si no estoy contento con esto? Asegúrate de tener la instancia seleccionada, y luego en el panel de propiedades derecho dentro, puedes ver el nombre de la instancia, y más a la derecha, puedes ver tres pequeños puntos, el menú más acción. Justo dentro de aquí, ves las opciones de reinicio. Podríamos o simplemente restablecer elementos individuales, como, por ejemplo, restablecer el trazo, o también podemos seleccionar la tarjeta y restablecer todo. L et's sobre qué más encontramos en este menú. Entonces lo que también podríamos hacer es que podríamos saltar al componente principal, así que eso significaría que terminaríamos por aquí. Podríamos crear un componente adicional para esto. Entonces, si me gustaría dar click aquí, se puede ver que este sería sólo otro componente. Al comenzar, tenga mucho cuidado de no usar esto en una instancia existente porque lo que esperaría es otro componente de tarjeta, pero lo que hace, empaqueta la instancia dentro de otro componente llamado card, así que la está anidando, y probablemente no sea lo que buscas Entonces, a menos que tengas mucha confianza con los componentes, trata de mantenerte alejado de él por ahora. Podemos desprender la instancia. Ahora hay que tener cuidado con éste. No separes ninguna instancia si estás trabajando en un sistema de diseño Sin embargo, si solo estás explorando tu propio diseño y yendo y viniendo entre las cosas, entonces eso está absolutamente bien para usar esto. Pero qué pasa, digamos que solo tienes un componente y lo creaste por accidente. Ahora bien, no hay forma en el panel de propiedades volver solo al estado original de un marco. Lo que puedes hacer es sacar una instancia Eliminar el componente original. Seleccione la instancia y observe cómo esto también le da la opción de restaurar un componente. Esta es una muy buena noticia si alguna vez eliminas un componente por accidente, entonces simplemente puedes hacer clic aquí y va a restaurar tu componente original. Ahora mismo no es lo que buscamos. Lo que queremos, solo queremos el marco original de esto. En este caso, ahora usarías instancia, y luego solo volverías a tener un marco simple. 29. 05 Componentes de anidamiento: Lo bueno de los componentes en Figma es que también puedes anidarlos. Anidar significa que podemos tener dos componentes y luego crear una instancia de un componente y colocarlo en otro componente Tomemos este ejemplo aquí. Tengo una navegación, un formulario de inicio de sesión, y sólo alguna tarjeta estándar. Voy a convertir esos tres elementos en componentes. Pequeño consejo, cuando tienes más de un elemento seleccionado, en el desplegable de más opciones, puedes crear varios componentes a la vez. Ahora puedo arrastrar instancias y usarlas para mi diseño. Sólo voy a usar esta navegación aquí y esta tarjeta como ejemplo. Pero fíjate como estoy reutilizando el mismo botón en todos los componentes Así que sea una buena práctica para sacar el botón y crear un componente propio para el botón. Ahora eliminaré los botones individuales anteriores que estaba usando y los reemplazaré con una instancia de mi componente de botón que acabo de hacer. Ahora puedo sobrescribir el texto, así que únete aquí en la navegación, regístrate y suscríbete a mi tarjeta de taller Y como pueden ver, todo esto se refleja en el lado derecho en mi diseño. Ahora, cambiemos nuestro componente de botón principal. Un poco, agreguemos algo de radio y cambiemos el color. Como puede ver, cualquier cambio el componente principal se reflejará en todo el diseño. No importa si está anidado en un componente o si es una instancia de un componente anidado 30. 06 Conjuntos de componentes con variantes: Variantes Figma. A veces puede encontrar que necesita variaciones de un componente. Aquí tengo un ejemplo donde tengo una versión predeterminada de una tarjeta y una versión hover de una tarjeta La única diferencia aquí es que este tiene un color de fondo. Entonces se podría decir, bueno, simplemente podría agregar ese color de fondo en mi instancia y sobrescribirlo, por favor, adéntrese en el hábito de no sobrescribir cambios de diseño o cambios en la variación Solo queremos sobrescribir cambios de contenido como imágenes o texto Esta es una nueva variación de esta tarjeta. Por lo tanto, necesita ser su propio componente para que los desarrolladores posteriores vean que esto es lo que necesitan programar y planificar. Ahora bien, en teoría, podrías usarlo así y tener dos componentes separados. Pero hay una buena capa de organización extra en Figma, llamada conjunto de componentes con variantes, y esto permite agrupar diferentes versiones del mismo componente Observe cómo estoy usando la convención de nomenclatura de barra diagonal hacia adelante. Ya se les llama igual, les llama card forward slash default, y luego card forward slash Lo primero aquí sería el nombre del componente, y luego el segundo nombre después de la barra diagonal hacia adelante, ese sería la propiedad Si selecciono ambas cartas ahora, puedo ver en el lado derecho, los componentes se combinan como variantes. Si hago clic en esto, entonces verán que Figma crea este contorno punteado púrpura Ahora lo mejor de esto es ahora simplemente puedes sacar una instancia. O simplemente podría usar el panel de activos así como con cualquier otro componente. Te mostrará la primera variante. Si haces clic en esta instancia, entonces en el panel de propiedades de tamaño de la derecha, puedes ver un pequeño menú desplegable. Con este menú desplegable, ahora puede cambiar entre las diferentes variantes en su conjunto de componentes. Ahora a esto simplemente se le llama propiedad uno ahora. También puedes hacer clic en tu conjunto de componentes y luego hacer doble clic en la propiedad, y ahora puedes llamarla, por ejemplo, estado. Podrías agregar más variaciones. Digamos que quieres algo así como un estado desactivado Simplemente abre esto un poco y luego salta aquí a tu primera o también a tu segunda variante, y verás este pequeño signo más aquí abajo. Da click en él y va a crear otro para ti. Ahora bien, lo que podemos hacer es que simplemente voy a darle esta opacidad del 50% y voy a llamar a esto inactivo Ahora lo que tengo que hacer es llamar al estado. Automáticamente se le acaba de llamar estado tres, pero voy a cambiar esto a inactivo. Ahora bien, si selecciono mi instancia, se puede ver que en el desplegable, ahora puedo elegir entre el nuevo estado y los dos estados que creé antes. Por cierto, si aún no has convertido tus elementos en componentes, también hay un atajo, para que puedas seleccionar varios elementos, y luego obtienes un pequeño menú desplegable junto al signo del componente en tu barra superior. Utilice ese menú desplegable y seleccione crear conjunto de componentes. Esto va a crear el conjunto de componentes de inmediato. Ahora bien, no usé la convención de nomenclatura correcta con la barra diagonal hacia adelante También puedo hacer eso ahora mismo, así puedo nombrar esta tarjeta. Entonces entro y luego aquí tengo mi propiedad uno, y quiero llamar a este default, y quiero tener mi segundo llamado HVA Y puedo volver a hacer clic en mi conjunto de componentes para cambiar esto a estado. Ahora bien, si consigo una instancia, se puede ver que esto funciona igual antes y tiene mi Hova y el estado predeterminado incrustado 31. 07 Mover los componentes a su propia página 2: ¿Cómo podemos mover nuestros componentes a su propia página? Aquí tengo mis componentes y utilizo instancias de esos componentes en mi diseño por aquí. Está bien almacenar su componente justo al lado su diseño mientras aún está trabajando en sus diseños. Pero una vez que haya terminado y sepa cómo desea configurar sus componentes, es hora de limpiar un poco y encontrar un área designada propia para sus componentes. Existen técnicas más avanzadas y podrías almacenar tus componentes en bibliotecas externas. Pero en un pequeño proyecto por ahora, solo queremos almacenarlos en su propia página. Así que ve a la parte superior izquierda de tu archivo y haz clic en el botón Más. Esto va a abrir una nueva página, y se puede llamar a esta página componentes. Podemos saltar de nuevo a nuestra página original, que también podemos llamar diseño ahora. Y ahora si simplemente copiáramos este componente, saltemos a la página del componente y lo pegaríamos, entonces esto obviamente pegaría una instancia. Entonces no queremos eso. Entonces, ¿cómo podemos moverlo de la página de diseño a la página de componentes? Lo que tienes que hacer es, puedes usar el clic derecho, y luego aquí puedes ver pasar a la página, y luego esto te va a mostrar la página que acabas de crear, o una mejor técnica es en realidad usar comando y X, y esto va a cortar el componente. Ahora puedes saltar a la página del componente, y puedes pegar el componente aquí. Ahora bien, si saltamos de nuevo a nuestra página de diseño, podemos ver que si hacemos clic en esta instancia aquí y luego hacemos clic en nuestro signo de componente junto al nombre de la instancia, nos va a llevar al componente principal y va a saltar a la nueva página. Genial. Hagamos eso también para el resto de los componentes. Seleccionemos todos ellos, comandemos una x para cortarlos y luego pegarlos dentro de nuestra página de componentes. Si saltamos de nuevo al diseño, puedes ver que todas las conexiones están intactas. Por cierto, a veces se ve que la gente agrega pequeños íconos frente al nombre. Simplemente puede agregarlos ya sea presionando comando de control, y barra espaciadora, y luego aquí puede encontrar diferentes iconos. Aquí hay algunas que usé antes para el diseño. Me gustaría usar algo como este arcoíris. Para mis componentes, en realidad hay si cavas bastante dentro de tus emoticonos, pienso por aquí, encuentras un signo componente o en realidad algo que parece un signo componente, y me gusta bastante usar este 32. 08 Mantener los componentes organizados: Mantener los componentes organizados. Digamos que estás trabajando en tu diseño y creaste una página separada para tus componentes. Ahora tienes todos tus componentes por aquí, pero ahora mismo están en un lío. Así que asegurémonos de que nosotros mismos, otros diseñadores y desarrolladores que ingresarían a nuestro archivo, entendamos lo que está pasando. Entonces, antes que nada, agrupémoslos un poco. Por aquí, tengo mis íconos generales. Entonces tengo mi tarjeta. Y luego por aquí, tengo mis componentes que tienen que ver con la navegación. Para que puedas ver el encabezado, la barra de pestañas, los elementos anidados y estos iconos, que son solo los iconos de barras grabadas Y luego más adelante, tengo mis botones. Quiero crear una sección propia para cada uno de ellos. Y Noe, estamos usando secciones y no marco para almacenar nuestros componentes Encontrará secciones en la barra de herramientas justo al lado de los marcos, o simplemente puede usar un desplazamiento de acceso directo y S, y luego puede dibujar sus secciones alrededor de los clústeres que creó. Y puedo hacer doble clic en el nombre de la sección y ahora puedo nombrarlo. Voy a nombrar a este de aquí navegación. Pasemos al panel Activos y veamos qué pasó y asegurémonos de tener habilitadas las subcarpetas de visualización Voy a cambiar al formato de lista, así que esto es más fácil de ver, y puedes ver que todos mis componentes están listados justo en la capa superior, y puedes ver que se ha creado una carpeta para mis elementos de navegación. Voy a hacer esto para el resto de mis componentes también. Voy a darle a Shift S, y voy a sacar una sección alrededor de mi tarjeta. Voy a hacer lo mismo con mis íconos, y un último para mis botones. Entonces ahora echa un vistazo a mi panel de activos por aquí. Si ahora renombro esto, entonces tengo tarjeta, tengo iconos, y tengo botones. Entonces, al crear estas secciones, puedes ver que en mi panel de activos, ahora tengo subcarpetas, y es más fácil encontrar mis componentes Otra cosa que me encanta de las secciones es que si seleccionas el nombre de la sección, puedes ver este pequeño icono al lado que dice listo para el desarrollo. Si haces clic en él, entonces vas a ver aparecer esta burbuja verde. Ahora bien, si saltamos al modo sordo, aquí es donde tus desarrolladores verían tus diseños, entonces puedes ver que esto crea una carpeta antigua que le dice a los desarrollos cuáles de tus componentes o diseños ya están listos para los siguientes pasos en el desarrollo. Así que acostúmbrese a almacenar sus componentes en su propia área designada en secciones, que luego podrá marcar como listas para el desarrollo. Para empezar, almacenamos nuestros componentes en una página separada. Pero si tienes un plan pro o superior, y estás trabajando en un equipo más grande, entonces también podrías ver que los componentes están almacenados en un archivo separado, y estamos usando las llamadas bibliotecas de equipo compartido para trabajar con ellos. A medida que nuestro sistema está cada vez más avanzado, también puedes ver que puedes agregar más información a estas secciones. No te estreses demasiado al respecto. Comienza pequeño y organiza en secciones, y en cualquier información adicional, siempre puedes agregar a esas secciones. 33. Componentes de la parte 2: Si te sientes incómodo con los componentes, instancias y variantes, entonces ahora podemos saltar. En la segunda parte de nuestro proyecto del curso, queremos convertir el diseño que creamos en un diseño reutilizable basado en componentes. Puedes usar cualquiera que sea tu solución desde la primera parte o simplemente puedes copiar mi solución sugerida desde aquí arriba, que es lo que hice por ti. Lo que hago es que reviso mi diseño y luego simplemente saco los elementos que creo que tendrían sentido como componentes reutilizables. Ahora bien, no hay nadie correcto o incorrecto, depende de ti, y también puedes cambiar esto, o en el futuro anidar los artículos de manera diferente. Pero tenemos que empezar por alguna parte. Te voy a mostrar cómo me acerco a esto. Fui poco a poco. Por ejemplo, empecé con mi sección de héroes, porque estoy usando esta imagen de aquí. De hecho, saqué esta parte interior. Seleccioné todo esto. Déjame acercarme un poco más aquí. Selecciono la imagen, el texto y el botón, y presiono el comando G o clic derecho, y me convierto en un marco. Ahora estoy desarmando esto, se puede ver aquí abajo, acabo de llamar a esta información. Entonces esto es lo que he creado aquí. Entonces hice lo mismo con los demás elementos. Saqué la barra superior, luego la barra inferior para la superposición. Entonces esto es esto de aquí. Lo pasé poco a poco. Entonces esta imagen, entonces tengo mis tarjetas, obviamente mi toque mis elementos aquí. Esto en realidad depende de usted cómo quiere configurar esto aquí. Por ejemplo, yo uso esto como un solo componente. También podrías tener esto como un componente. Y texto suelto, como dije, no hay bien ni mal. Simplemente me parece un poco más cómodo ya que probablemente voy a ser re, usando esta parte bastante. Y decidí entonces hacer lo mismo para la barra de juego. Por lo que toda esta área de control es un componente. De nuevo, más adelante podrías tener esto como un componente anidado Esto como un componente anidado, depende de usted, pero mantengámoslo simple por ahora Ahora, en este archivo, tengo mi solución final. Si vas a páginas, ves el diseño final y también ves una página de componentes. Entonces aquí puedes ver todos los componentes, cómo los organizo, los configuro, los nombro, y así sucesivamente. Y esto es lo que estoy usando en mi diseño final. Entonces sugiero que no te estés confundiendo con mis componentes para simplemente copiar todo esto a un nuevo archivo. De hecho, seleccionemos mis ejemplos así como extrayamos los componentes potenciales que creé. Y saltemos a un nuevo archivo de diseño y simplemente peguemos esto aquí. Me gusta bastante tener mi fondo un poco más ligero. Y por cierto, puedes cambiar esto. Si haces clic en el lienzo, entonces puedes ver aquí arriba en la página, puedes cambiar el color. Eso me parece un poco más cómodo. Ahora, puede tener su propio archivo con sus componentes sin confundirse con el mismo nombre. Puedo seleccionar cada uno de ellos individualmente y luego convertirlos en componentes, o puedo seleccionarlos todos. Haga clic en un pequeño menú desplegable y cree múltiples componentes. No conjunto de componentes, eso es otra cosa como conocemos ahora, sino múltiples componentes. Ahora algunos de estos componentes estoy anidando, por ejemplo, los íconos, solo necesito limpiarlo porque éste no va a saber que quieres que esté anidado Yo sólo voy a sacar una instancia aquí arriba de ésta, de ésta. Ahora voy a sustituir estos elementos aquí los homólogos anidados, manteniéndolo todo agradable y limpio Eso lo haríamos, y para todos los íconos, déjame echar un vistazo, por ejemplo, para nuestro botón de reproducción aquí. También reemplazaríamos eso por una instancia, y aquí tenemos la misma. Así que ya puedes ver que estamos como volver a usar, lo cual es muy bonito, si cambiáramos algo en ese botón Reproducir. Esto será lo mismo en todas partes. Este podría ser todavía un botón de reproducción a escala, o podrías tener esto como un componente propio, De nuevo, depende de ti Bien, ahora necesitamos configurar estos diseños, nuevamente con los componentes. Ahora eso suena tedioso, pero en realidad es bastante rápido. Entonces hagámoslo. Vamos a deshacernos de esto, y simplemente voy a arrastrar nuestra portada por aquí y luego nuestra información. Y entonces voy a hacer lo mismo aquí. Voy a eliminar dosis, y voy a reemplazarlos por instancias. Lo que tenemos que hacer, por supuesto, es que tenemos que volver a colocar nuestras imágenes. Además, probablemente haré esto un poco más ordenado de lo que estoy trabajando aquí Mantén mis distancias y todo, pero haz eso solo para mostrarte rápidamente. Téngalo así. Necesitamos nuestras imágenes. Volvamos aquí. Y simplemente podemos copiar nuestras imágenes a este archivo. Los tenemos a mano. Porque lo que haría de todos modos, probablemente me desharé de las imágenes de mi componente Además, ten cuidado de agarrar siempre la imagen y no nuestra pequeña superposición de degradado que hicimos. Ahora, tenemos que agregar un relleno de nuevo. Esto es, en efecto, un poco tedioso. Tendríamos que volver a colocar esas imágenes. Nosotros, en nuestros componentes, los tendríamos agradables y neutrales. Y luego en nuestro diseño, tendríamos que rehacer nuestras imágenes Pero así, podemos configurar rápidamente nuestro diseño nuevamente ya que verás cualquier cambio obviamente porque ahora esto está basado en componentes solo seguirá y será muy fácil mantener todo actualizado. Entonces solo tomemos nuestra barra de pestañas también. Se puede ver así, ahora tengo mi mismo diseño que un diseño basado en componentes. Yo haría lo mismo para que mis otras páginas funcionaran. Está bien tener todo en una página, Pero recuerda, sí queremos que nuestros componentes se almacenen bajo páginas. Asegúrese de hacer una página propia llamada componentes. Ahora puede enviar sus componentes por allí, ya sea seleccionando todos ellos haciendo clic derecho, y yendo a pasar a la página y los componentes. O puedes cortarlos, que es comando y x no comando y copia. Debe ser x. Y ahora puedes pegarlos aquí, ellos mantendrán las conexiones. Por ejemplo, si estás haciendo clic aquí, ahora puedes hacer clic en el ícono del pequeño componente y saltará a tu componente principal en la página. Recuerda, sí queremos almacenar nuestros componentes en secciones. Las secciones están aquí arriba bajo marcos. Queremos crear secciones, por ejemplo, 14 iconos, y luego colocar todos nuestros iconos aquí arriba, luego uno para la navegación y así sucesivamente. Puedes ir a tu archivo de ejercicios en Componentes y Guías. Aquí te darás una idea de cómo organizo mis componentes. Por cierto, estoy usando un pequeño sistema de manejo de archivos que creé. No tienes que usar esto, pero puedes usar esto. Tengo como titulares y tengo pequeñas burbujas aquí. Entonces puedo alternar si algo está encendido o en ciernes. Y también tengo un poco de nodos pegajosos para agregar comentarios. Además, recuerda que aquí tenemos juegos de componentes. Ahora organicé nuestros componentes, nosotros los creamos. Y tengo mi barra trasera, mi barra over liber, bastante similar, así puedo combinarlas como variantes Por ejemplo, si los uso en mi diseño, entonces puedes ver aquí estoy teniendo un pequeño desplegable para derribar entre ellos. No tienes que hacer eso. Pero es agradable si tienes artículos similares y quieres organizarlos como discutimos en nuestras sesiones anteriores. Al final, nuestro diseño se compone completamente de instancias excepto tal vez algún texto aquí y allá. Y recuerda en instancias que podemos sobrescribir, estábamos anulando el relleno de imágenes más antiguas, así que agregamos imágenes más antiguas Y también podemos hacer lo mismo con el texto. Podemos, por ejemplo, cambiar el nombre de los álbumes aquí si quieres estos pequeños tres puntos aquí. Si algo es demasiado largo, entonces puedes hacer esto. Volvamos a nuestros componentes. Puedes hacer esto seleccionando el nombre, y luego también ir a los extras. Y aquí abajo encuentras el texto que corta con unos puntitos. Recuerda, cualquier cambio en un componente, vamos por ejemplo, darle la vuelta a este de aquí, resultará en un cambio en la instancia. 34. 01 Introducción a las variables: Introducción a las variables. Una variable es un nombre simbólico para un dato. Entonces es como un marcador de posición. Digamos que tenemos una variable x, y la asignamos al color rojo. Entonces podemos usarlo a través de nuestro diseño. Tan pronto como cambiamos nuestra variable x al color de azul, así mantenemos el nombre de la variable, pero cambiamos el valor de la variable, entonces todo en nuestro diseño seguiría. Seguimos usando componentes. Tenemos nuestros componentes, pero dentro y alrededor de esos componentes, hay muchas cosas como espaciamientos, diferentes colores que vamos a usar Para todo esto, vamos a usar variables. Entonces, en definitiva, los componentes son objetos reutilizables. Las variables son propiedades reutilizables que podemos aplicar a esos objetos. Suena todo todavía un poco abstracto. No te preocupes. Vamos a saltar y probarlo nosotros mismos, y se volverá mucho, mucho más claro. 35. 02 Trabajo con variables de color: Trabajar con variables de color. En nuestro diseño, solemos tener una paleta de colores establecida, y queremos asegurarnos de que todo en nuestro diseño siga esta paleta. Ahora yo mi diseño aquí, se puede ver que estoy usando rojo, pero algunos de los tonos de rojo están un poco apagados. Lo que podría hacer es ahora poder seleccionar todos los diferentes elementos, usar mi seleccionador de color, y luego saltar y elegir el color correcto No obstante, eso sería bastante tedioso. En algún momento, también podría querer cambiar este rojo aquí a otro color. Por eso también no llamo a mis colores por su nombre, así que no los llamo naranja, rojo y azul. Yo les doy naming semántico, así siempre puedo cambiarlos Entonces los llamo primarios por los colores de mi marca, y les doy un número. Esto me permite suficiente espacio para, por ejemplo, añadir otro tono entre el 20 y el 50, y tengo algunos neutrales. Aquí también, podría agregar más tonos de grado entre los 30 y los 90. También se les puede nombrar cualquier otra cosa, por ejemplo, llamada a la acción o fondo. Solo asegúrate de que sea semántico. Ahora, para reutilizar estos colores, vamos a configurarlos como variables, que podemos aplicar en nuestro diseño y componentes. Para abrir tus variables, asegúrate de hacer clic en el área gris del lienzo, y luego en el lado derecho, podrás ver las variables locales. Si haces clic en el icono, se abrirá un modo. Para crear una variable, haga clic en Crear variable y luego elija el color. Ahora simplemente voy a llamar a esto 120. Ahora puedo usar mi atajo para crear más. Voy a sostener Shift y entrar, y voy a llamar a este 150, voy a darle turno y volver a entrar, y voy a ir por 80. También podrías usar el menú desplegable aquí para crear más variables. Ahora, para agregar un valor, simplemente haga clic en este campo aquí y luego elija un seleccionador de color y elija su valor ya sea de la hoja de estilo que configuró o directamente de sus diseños Et's también crean nuestros neutrales. Voy a tener otro con 90. Entonces voy a volver a usar mi atajo, y voy a ir por 3010 y cero Y ahora estoy haciendo lo mismo. Simplemente voy a recogerlos de la hoja de estilo que ya configuré. Si pasas el cursor sobre tu variable, entonces en el lado derecho, ves el signo de la variable agregada, y puedes hacer clic en este pequeño icono aquí y ahora puedes agregarlo agregar más información, y también puedes alcanzarlo Alcance significa que solo estará disponible para ciertos campos. Genial. Entonces ahora creamos nuestras variables, así que ahora vamos a aplicarlas. Así podría seleccionar cualquier elemento, y luego a través del menú fil, clic en el icono Estilos. Esto sigue siendo un poco extraño que estemos usando el icono Estilos para usar variables. Yo esperaría que esto esté cambiando en el futuro. Por ahora, hagamos clic aquí para abrir nuestras bibliotecas, y aquí encontrarás todas las variables que configuraste. Observe que las variables tienen un s y los estilos tienen un círculo. Podemos dar click sobre esto y esto aplicaría la variable de color. Ahora, podría hacer esto a través de todo mi diseño, lo que de nuevo, sería bastante tedioso Recuerda, queremos trabajar con componentes, y puedes ver que mi diseño está configurado en instancias. Así que volvamos aquí. Reiniciemos este relleno, y saltemos a los componentes que utilicé para crear este diseño. Coloco el diseño al lado de mi componente, para que puedas ver esto mejor. Por lo general, lo tendrías en una página propia o incluso en un archivo externo. Entonces lo que queremos hacer ahora es que queremos pasar por todo nuestro componente y asegurarnos de que se apliquen nuestras variables porque también puedes ver algunas de ellas, como, por ejemplo, la fecha más hovest de mi botón, ni siquiera es visible en mi diseño, sin embargo todavía quiero dar aquí la información sobre la variable correcta Vamos a comprobarlo porque aquí podemos ver que actualmente no se aplica nada. Ahora bien, podríamos pasar por estos componentes uno por uno, así podría seleccionar el fondo aquí, aplicar una variable, luego puedo seleccionar el texto. Pero en realidad hay una manera bastante agradable de hacer esto. Así que solo selecciona todo esto, y luego podrás ver aquí los colores de selección. Ahora puedo ver aquí hasta tengo aplicado un estilo antiguo, y quiero usar mis variables. También tengo una mezcla de colores aplicada, así se puede ver que tengo diferentes tonos de rojo, así que quiero tener todo esto alineado con mis variables. Lo que vamos a hacer es, por ejemplo, si tenemos un estilo antiguo, entonces solo despegamos este estilo Y ahora vamos poco por rojo. Entonces voy a ir este es un blanco, y luego voy a ir y seleccionar una variable para cada uno de esos colores. Porque estoy usando la selección, entonces este es el esquema de mi conjunto de componentes. Voy a dejar esa sola. Debido a que estoy usando esta selección, realmente va a conseguir todos los colores para mí. Y aquí vamos. El último, vamos a igualar el rojo de nuestro pequeño marcador. Y ahora echemos un vistazo a nuestro diseño. Al seleccionar cualquier elemento en mi diseño, se puede ver que se aplicó la variable. Este es este pequeño cuadrado, se puede ver tanto en el color como en el nombre. Mientras corro por aquí, incluso como hasta el anidamiento más profundo, se puede ver que todo se aplica correctamente Podría haber algunos elementos en mis cavas aquí, por ejemplo, este texto que no es un componente Lo que puedes hacer es que también puedes seleccionar todo este fotograma, y luego puedes ver algunos que quedan sobrantes, y también podemos limpiarlos. Si en algún momento quieres editar tus variables, entonces simplemente haz clic en el fondo de Canvas, abre variables locales y cambia tu valor de variable. Todo tu diseño seguirá. 36. 03 Organización con colecciones y grupos variables: Organizar tus variables, recolección y agrupación. Para que pueda ver que tengo todas mis variables. Pero en mi hoja de estilo, en realidad los categorizo, así que tengo primaria, tengo secundaria, y tengo algunos neutrales Ahora en vez de tenerlos todos en esta como una fila, quiero agregar un poco de orden, y lo puedo hacer con la agrupación. Para agrupar tus variables, simplemente selecciónalas y luego mantén pulsada la mayúscula y haz clic derecho, y ahora obtienes un menú y puedes elegir agrupar. Puedes ver el grupo a la izquierda, y puedes hacer doble clic en él, y luego puedes nombrarlo. Entonces voy a nombrar a esta primaria. Si quiero volver a ver todas mis variables, entonces solo necesito dar click en la parte superior. Voy a hacer lo mismo por mi azul. Voy a llamar a éste secundario. Y vuelvo para poder verlo todo, y lo voy a hacer por mis neutrales también, así que seleccionémoslos todos shift y click derecho, y ahora vamos a nombrarlos neutrales Bien, entonces esto es organizar mi colección en sí, pero también puedo tener múltiples colecciones. Entonces, ¿qué significa eso? Esta es una colección que tiene todo mi color. En la parte superior izquierda de tu modo de variables, puedes ver un pequeño menú desplegable. Si haces clic en eso, antes que nada, cambiemos el nombre de esta colección, y llamémosla colores de marca. Ahora quiero agregar otra colección. Voy a dar click en Crear Colección. En esta colección, quiero guardar mi tallaje. Podría ser espaciado, esto podría ser el tamaño de ciertas tarjetas o elementos. Simplemente voy a llamar a esto talla única. Ahora puedo agregar más variables aquí, y esta vez voy a ir por números en lugar de colores. Puedo, por ejemplo, configurar mi sistema de espaciado. Podría decir el espaciado más pequeño, que es ocho, en realidad se llama X S, y luego puedo crear otro y voy a llamar a esto S, y eso sería 16. También podría agregar números que podrían ser el ancho de mi tarjeta, así podría llamar a esta tarjeta, y por ejemplo, tener una tarjeta, digamos al 320. Qué tipo de colecciones, cuántas y de qué manera necesitas depende puramente de tu configuración y proyecto. Por lo general, al menos necesitas una colección de colores. Si quieres volver a tu colección de colores, entonces simplemente puedes ir al menú desplegable y volver a los colores de tu marca, y puedes verla y editarla aquí. 37. 04 Variables de tamaño y espaciado: Variables de tamaño. También podemos trabajar con variables de tamaño en Figma. Para aplicarlos, simplemente selecciona un elemento, y luego en el lado derecho, panel de propiedades, si pasas el cursor sobre los campos, verás aparecer un símbolo de variable donde sea que puedas aplicarlos. Entonces podríamos agregar nuestra variable para un ancho y también para cosas como radio. Ahora bien, si solo aplicas esos tamaños a cualquier diseño, notarás que esto realmente no funciona porque el diseño no responde. Entonces, para que esto funcione, necesita configurar sus componentes como también un componente de diseño. Esto es algo que vamos a hacer en un momento posterior. Entonces, a medida que comencemos a agregar diseño automático, notarás que aquí es donde ocurre la magia de las variables y el dimensionamiento. Porque ahora como aplicamos nuestras tallas, toda la tarjeta responderá. Y también, podemos agregar todo el relleno y márgenes con nuestras variables. Entonces eso significa que a medida que establecemos este relleno y margen y luego redimensionamos nuestros componentes, todo se mantendrá en su lugar Pero más sobre esto en un poco. 38. 05 ¿Y qué pasa con los estilos?: Entonces, ¿para qué sirven los estilos en Figma? Te habrás dado cuenta de que en Figma, puedes configurar variables, pero también puedes configurar estilos En algunos casos, como, por ejemplo, con los colores, es casi idéntico crearlos y consumirlos. Entonces es bastante confuso entender por qué deberíamos usar uno u otro. Entendamos esto mejor. Usamos variables para valores individuales, así cosas como un color o un tamaño. Estilos, por otro lado, utilizamos para mantener juntos varios valores. Piense en ellos como una clase CSS. Una variable también podría ser un elemento en un estilo. Digamos que creé una variable llamada variable size S, y que tiene el valor de 24. Creé un estilo llamado Headline Strong. Ahora mi estilo está conformado por varios valores. Sólo por nombrar algunos. Esto podría ser tipo de letra, tamaño, altura de línea y peso Actualmente, los configuro todos manualmente. Entonces digo que el tamaño se define como 24. Lo que también podría hacer es que me vendría bien una variable aquí. Entonces puedo establecer el tamaño a la variable size, que por el momento también es 24, así no haría diferencia. Sin embargo, en un sistema de diseño más sofisticado, esto sería muy útil porque lo que pasaría es que tendría varios textiles. Entonces digamos que tengo el mismo titular pero una versión suave, y podría usar la misma variable. Ahora bien, si en algún momento quiero que cambie el tamaño para todos esos titulares, solo necesitaría cambiar mi tamaño variable S y todo seguiría. No hay bien o mal. Puedes usar ninguna o tan pocas variables como necesites en tus estilos o tenerlas todas variables tanto como necesites. Yo recomendaría si recién estás comenzando, mantenlo simple porque de lo contrario, esto podría ser bastante abrumador. Realmente es algo que usarías en un sistema de diseño más sofisticado. Otras áreas en Figma, donde usaríamos estilos, es, por ejemplo, los efectos Así que cualquier forma o cualquier marco en un panel de propiedades del lado derecho, puedes ver los efectos, hacer clic en más, y luego puedes elegir el efecto. Entonces tienes cosas como drop, shadow, blur, y así sucesivamente. También puedes hacer clic en el ícono de Little Sun aquí y cambiar cualquiera de estos valores. En todos los estilos, si pasas el cursor sobre el campo de entrada, ves aparecer el pequeño símbolo de variable, haz clic en él y podrías reemplazarlo con cualquier variable que hayas creado de antemano Ahora, en cuanto te guste tu efecto, podrás guardarlo como un estilo. Haga clic en el símbolo Estilo y luego haga clic en el botón Más. Ahora puedes nombrar tu estilo. También puede agregar una descripción y luego crear el estilo. Si haces clic en el área Canvas gris, entonces verás una descripción general de los estilos que tienes guardados actualmente en este archivo. En cualquier otro objeto, ahora podría simplemente ir al menú Efectos, hacer clic derecho en Estilos, y luego seleccionar el estilo y aplicarlo. Ya nos hemos encontrado con estilos de cuadrícula. Para recordarte, puedes aplicar una cuadrícula a tu diseño. Haga clic en el icono para cambiarlo a una cuadrícula de diseño. Tan pronto como te guste tu grilla, ahora puedes guardarla como un estilo. Mismo procedimiento. Da clic en el icono Estilos, haz clic en el botón más, nombra y guárdalo como estilo. Si haces clic en el fondo gris de tu Canvas, puedes ver todos tus estilos en tu archivo que se muestran aquí. También puede hacer clic en el campo agregado para alterarlos. Entonces, para darte una visión general en Figma actualmente, tenemos cadena de números de color y variables booleanas Y luego para los estilos, tenemos tipografía de efectos de cuadrícula y Y nuevamente, esto podría cambiar ligeramente con el tiempo. Entonces, si recién estás comenzando, podrías usarlas de forma aislada. Entonces, por ejemplo, es posible que desee usar variables para los colores, pero luego puede que solo tenga estilos de tipografía donde no use ninguna variable en absoluto Y eso seguiría funcionando bien. Pero a medida que estás escalando tu diseño y vuelves más sistemático al respecto, como en un enfoque de sistema de diseño. Vas a notar que quizás quieras usar variables dentro de estos estilos para que tengas valores reutilizables. No vas a necesitar todas las variables en todos los estilos. Por ejemplo, en cuadrículas, probablemente solo necesites números para establecer tu cuneta y tus márgenes, y luego en algo así como un degradado, solo vas a usar probablemente variables de color En tipografía, vas a ver más de una mezcla, por ejemplo, números para definir tamaño y altura de línea Pero vas a tener una cadena porque así es como definirías la familia de fuentes. Si recién estás comenzando, mi recomendación sería, configurar tus variables de color. Esto es realmente imprescindible, y también debes tener estilos tipográficos Más adelante, es posible que desee agregar variables numéricas. Por ejemplo, si está trabajando con diseño automático para controlar el espaciado, y es posible que también desee tener algunos estilos de cuadrícula. Por supuesto, puedes tener gradientes de efectos. Depende de lo que necesites para tu diseño. Pero mantenlo simple y yo los mantendría separados por ahora. Una vez que te sientas cómodo, siempre podrás editar tus estilos y luego convertir cualquier valor fijo en variables. 39. 06 Tipografía y estilos: Configuración de estilos de texto. Para crear un estilo de texto, seleccione un texto, y en su lado derecho, menú de texto, verá el símbolo de estilo. Haga clic en él. Haga clic en más, y ahora puede nombrar el estilo. Sólo voy a llamar a este estilo de texto. Puedes agregar una descripción y crear tu estilo. Ahora puedo seleccionar cualquier otro texto y a través del menú Estilos. Puedo seleccionar uno de mis estilos creados, y se aplicará. Si quieres cambiar el color, esto es independiente del estilo, simplemente elige cualquier variable que configures a través del menú de relleno. Si desea separar un estilo, simplemente seleccione un texto y luego justo al lado del nombre del estilo, encontrará el símbolo separado Si quieres eliminar un estilo, da clic en el área Canvas gris donde encontrarás una visión general de todos los estilos. Puedes dar estilos aquí, y también puedes hacer clic derecho y eliminar el estilo. Si estamos trabajando con A diseñado con componentes, entonces te recomiendo que siempre apliques tu estilo a tus componentes. En lugar de elegir textos al azar y convertirlos en estilos, es mejor tener un enfoque más sistemático. Entonces personalmente me gusta hacer esto es que una vez que sé que me gusta mi diseño así, voy a refinarlo mucho más, saco una copia de todo el texto que uso a través de mi diseño. Estos podrían ser mis componentes. Si ya creé algunos, esto podría ser solo puramente a partir de un diseño en bruto. Y así escojo todo lo que usé, y luego lo pongo en orden. Entonces desde el más grande, el más destacado hasta el más pequeño, y esto me permite crear una jerarquía. Entonces termino con algo como esto. De esta manera, obtengo una buena visión general. También puedo combinar texto que es bastante similar, y puedo limpiarlo para cosas como la altura de línea. Entonces lo nombro en consecuencia. No importa qué nombres uses. Solo asegúrate de tener una configuración semántica. Me gusta hacerlo así, pero algunas personas prefieren primero crear una jerarquía y luego usarla en sus diseños. Eso depende de ti. Una vez que esté contento con mi configuración, ahora puedo comenzar a guardarla con los nombres de pila. Así que una vez que hicimos eso para todos nuestros estilos, da clic en el área de fondo gris, y podrás verlos todos aquí. Podrías organizarlos aún más seleccionando ciertos estilos y luego haciendo clic derecho o usando el atajo Command NG, y puedes crear una nueva carpeta, por ejemplo, para todos tus titulares. Entonces aplico los estilos a mis componentes, simplemente selecciono el texto, y por cierto, si mantienes pulsada la tecla shift, puedes seleccionar múltiples a la vez, y ahora desde el menú desplegable, aplicar mis nuevos estilos. También puedo corregir pequeñas imprecisiones. Por ejemplo, aquí, probablemente quiero un default fuerte. Una vez que lo he hecho para todo mi texto en todos los componentes, si salto a mi diseño, puedes ver que heredan de mi componente, incluso si están sobrescritos porque eso solo concierne al contenido, no al estilo Cualquier cambio de estilo obviamente se reflejaría en todos los componentes y por lo tanto en todas las instancias. 40. 07 Variables y estilos de documentación: Hablemos un momento sobre documentar el sistema detrás de nuestro diseño Con nuestros componentes, necesitamos un componente como maestro para que nuestras instancias se vinculen de nuevo. Así que necesitamos almacenar cada componente en algún lugar idealmente en su propia página o en su propio archivo con alguna información adicional. Ahora, nuestros estilos y variables no apuntan a un estilo maestro o variable. Por lo que no necesitaríamos ninguna referencia o visión general en nuestro archivo. Sin embargo, recomiendo encarecidamente crear una visión general todos modos para dar una comprensión integral y documentación de uso Esto es útil, no solo para ti, sino también para otros diseñadores, y lo más importante para otros desarrolladores que luego construirán tu diseño. Entonces, echemos un vistazo a cómo documentar el color. Para los colores, la forma más sencilla es agregar una muestra de tu color variable e incluir el nombre al que la asignaste Queremos usar nomenclatura semántica, así que evita nombres como naranja rojo o azul En su lugar, use nombres descriptivos, como primario, fondo neutro o cualquier cosa en ese sentido. Los números detrás del nombre están ahí para permitirle agregar más variaciones del color. Por lo tanto, te recomendaría usar pasos de 100 o pasos de diez, porque si vas uno, dos, tres y quieres agregar algo en el medio más adelante, entonces no tienes ningún espacio. Te recomiendo agregar una capa adicional y crear variables separadas para tus colores de texto, aunque este color ya esté representado en los neutros. Hace que sea más fácil mantener un control general y asegurarse de que el contraste sea correcto. Puedes ir aún más lejos y verificar estos colores para un contraste correcto con los colores de tu marca. Puedes usar una herramienta en línea como web aim, o puedes usar cualquier enchufe en Figma, algo como Stark o cualquier otro para esto Espaciado. Ahora, también me gusta agregar alguna información sobre el espaciado que uso, pero esto no requiere mucha documentación. En la mayoría de los casos, utilizaría un sistema de espaciado de un múltiplo de cuatro u ocho. Ocho es un número mágico en el diseño web por diversas razones, entre ellas evitar la mitad de píxeles. Por ejemplo, si usarías cinco al escalarlo, se convierte en 2.5, lo que no es lo ideal. Un sistema de espaciado también te ahorra mucha discusión con los desarrolladores, porque si estás a un píxel de aquí y allá, ellos sabrán a dónde redondearlo o bajarlo. Normalmente incluyo una simple hoja de información sobre el sistema de espaciado de ocho puntos a mis hojas de estilo, junto con un ejemplo de cómo usarlo. También me gusta configurar variables en consecuencia. Nota. En el diseño web, no utilizamos la llamada grilla dura. Cuadrícula dura significa que habría alguna cuadrícula de píxeles en el fondo para alinearse. Nosotros no hacemos eso. Usamos una llamada grilla blanda. Esto significa que nuestro sistema de espaciado siempre funciona de un elemento a otro y también dentro, por ejemplo, de nuestros componentes. Aplico el mismo principio a la tipografía. Incluyo una hoja de estilo general para mi tipografía con un enfoque en mostrar la jerarquía Puedes crear una jerarquía aleatoriamente o usar un sistema como una proporción. Hay excelentes herramientas en línea disponibles para este propósito. Alternativamente, puede simplemente saltar en el paso ocho, que funciona muy bien con su sistema de espaciado. Para cada uno de los estilos, proporciono información adicional como la fase de tipo, la altura de la línea, el peso y cualquier otra cosa. Prefiero presentar esta información en formato de gráfico, pero también se puede ver en diseño Figmus o modo sordo directamente, lo que podría optar por ni siquiera agregar esto Nuevamente, recomendaría usar un enfoque de nomenclatura semántica No hay reglas estrictas, pero evita nombrar según el estilo exacto Así que no uses algo como Poppins 24 bold. En su lugar, opta por nombres como el título 03 o el título S. Si estás diseñando para una página adaptable, es posible que necesites ajustar el tamaño de tu texto en los puntos de interrupción dados, y también debes agregar esta información a tu escala de tipos. Este es un tema más avanzado, y tengo un curso de inmersión profunda completamente separado sobre esto. Tengo algunos ejemplos gratuitos de diferentes escalas de tipo responsive en mi página de comunidad Figma para que las descargues Cualquier estilo adicional como degradados o sombras que pueda estar usando Solo asegúrate de agregar también una página con la información a tu documentación. Puede almacenar esta información sobre sus estilos y variables en una página separada su archivo o dedicarle un archivo separado y usarlo como biblioteca externa. En general, la documentación va de muy básica a súper detallada y avanzada Al final, lo importante es comunicar el sistema que estás usando de la manera que se ajuste a tu equipo y a tus recursos y presupuesto. Así que empieza poco a poco y siempre podrás agregar y mejorar tu documentación. 41. Variables de color: Si te sientes incómodo con variables y estilos, entonces agreguémoslo a nuestro proyecto de curso. Las variables siguen cambiando mucho. Entonces es posible que veas una configuracion diferente en tu archivo de ejercicio a la que estoy mostrando en pantalla. Siempre trato de mantener actualizado el expediente de ejercicio. Así que también asegúrate de sacar la última versión. Lo que queremos hacer es comenzar con la creación de nuestras variables de color. Saqué todos los colores de nuestro proyecto para ti ya en estas muestras, y ahora solo necesitamos configurarlo en el lado derecho Si haces clic en el lienzo, ves las variables locales aquí, puedes abrir las variables de color que ya creé para ti. Si no los ves, entonces hay un pequeño switcher. Es posible que veas algunos colores de ayuda que también están establecidos. Asegúrate de que en la colección estés en color y luego puedas ver los diferentes colores para aplicarlos. Recuerda, solo podemos tener cualquier relleno. Y luego vía el relleno, damos click en los estilos Little. Y como dije, espero que esto vaya cambiando bastante en el futuro. Y luego podemos seleccionar cualquiera de las variables que configuramos. Ahora recuerda, creamos nuestros componentes en un archivo separado, y queremos hacer lo mismo con nuestras variantes de color porque de lo contrario solo estaríamos en conflicto con las que ya creé para ti en este archivo con una solución. Saltemos al archivo donde configuramos nuestro diseño. Y recuerda que tenemos nuestros componentes aquí en una página separada. Vamos a saltar realmente a nuestra página de componentes y pegar nuestro conjunto de colores aquí. Podemos dibujar una sección a su alrededor y también tener esto muy bien organizado. Llamemos a este color. También puedes cambiar el color de cualquier sección. Voy a tener este blanco en su lugar. No importa lo que uses, es solo para una mejor visibilidad. Ahora quiero crear mis variables y hago clic en variables locales y aún no hay nada creado. Y hago clic en la variable de color. Ahora puedo simplemente seleccionar el nombre que le di. Nuevamente, puedes darle a esto cualquier nombre, solo trata de ser semántico Ahora selecciona el Swatch. Y con el recogedor, estoy escogiendo el color de mi set. Pequeño atajo. Presiona turno y entra. De esta manera puedes crear rápidamente múltiples variables y luego rellenarlas. Voy a hacer esto por ti. Aquí están mis variables. Me gusta bastante agregar variables separadas. Cuatro textos, no tienes que hacerlo, también puedes usar esto, pero voy a agregar otra variable de color a la que llamo texto en primaria oscura. Esto en realidad va a ser del mismo color que aquí. Simplemente va a ser un blanco sencillo. Pero me gusta bastante mantenerlo separado por si quiero cambiar algo más adelante. También puedo comprobar si el contraste es lo suficientemente fuerte. Aquí pueden ver que estoy dando esta gama, así que eso significa que puedes usar este color en todos esos neutros. Y sí lo comprobé de antemano. Voy a crear una segunda a la que voy a llamar texto en secundaria. Esto también es, de nuevo, este es uno de mis neutrales en este momento, pero esto podría cambiar en el futuro de esta manera Lo tengo agradable y separado. Hay una cosita más, puedes ver colores. De hecho, vamos a hacer esto un poco más grande aquí. Entonces lo que puedes hacer es si pasas el cursor sobre el color, entonces puedes ver este pequeño campo de edición Y aquí podrías decir que solo quieres que esta variable sea visible cuando estés seleccionando texto. No voy a hacer esto por ahora porque está un poco avanzado, pero solo ten en cuenta que está ahí. Nuevamente, las variables están cambiando rápidamente, por lo que esto podría colocarse en otro lugar, pero seguramente se encontrará con el campo de edición. Ahora que hemos creado nuestras variables, queremos aplicarlas y muy importante, no queremos aplicarlas dentro de aquí. No queremos agregarlos en nuestro diseño. Podríamos agregarlos en nuestro diseño. Pero tiene mucho más sentido ir a nuestros componentes y aplicarlos a nuestros componentes porque entonces todas nuestras instancias heredarán esto podría ver menos ahora Pero si estás teniendo cientos de pantallas, entonces esto está haciendo una gran diferencia. De hecho, es mucho más rápido aplicarlos a tus componentes. Lo que hago es seleccionar todos estos componentes. Y luego con el color de selección aquí, simplemente voy a elegir rápidamente todos estos y cambiarlos a, um, mis colores variables. Yo voy a hacer lo mismo aquí, y ahora puedo seleccionar esto. Eso sí, estoy trabajando con colores separados para mi texto. Si hago esto, seguiría necesitando seleccionar el texto por separado. Y entonces solo estoy cambiando de este de aquí a mi color de texto. Si esto es un poco demasiado avanzado, si esto es un poco abrumador, entonces solo ve poco a poco. Seleccione este y aplique un color. Después selecciona el siguiente y aplica el siguiente. De veras depende de ti. Si es demasiado abrumador, entonces solo da un paso atrás. Pero por ahora voy a ir por el camino rápido. Voy a dejar el gradiente en paz. Muy importante, y sólo voy a ir así de esta manera. Esto también es muy útil si estás diseñando y estás teniendo colores similares y estás limpiando. Entonces puedes simplemente combinarlos aquí y asegurarte de que todo esté bien configurado con tus variables. Solo si lo he vuelto a hacer, entonces necesito asegurarme de que mi texto esté establecido en la variable de texto. Una vez que termine, simplemente voy a escoger el texto. Voy a cambiar este texto aquí por texto sobre primaria. De hecho, necesitaría crear otro, para este de aquí a la larga, un texto oscuro, y para este. Pero por ahora, sólo voy a dejarlos solos. ¿Me agarré este? Déjame echar un vistazo. Este de aquí es el texto sobre secundaria. Se puede ver que esto es como el gris. Si ahora seleccionamos alguna de nuestras instancias, seleccionemos aquí este texto, por ejemplo. Entonces puedes ver que automáticamente tiene aplicada la variable. No necesitamos preocuparnos por el diseño. Todavía quedan algunos elementos, como por ejemplo, los colores de fondo que podría tener que ordenar. Normalmente paso por esto y luego por ejemplo, este relleno, me gustaría ir en línea con mis variables. Yo limpiaría esto un poco de, por ejemplo, este texto aquí. Otra buena forma de hacerlo es seleccionemos este marco. Y entonces aquí se pueden ver colores no utilizados. Si hago clic en este pequeño blanco, entonces me va a decir cuáles no están usando variables o cuáles están usando este color. Simplemente puedo cambiarlos así. Por supuesto, cualquier cambio en la variable, cambiemos nuestro resaltado, por ejemplo, a un rojo, va a resultar en un cambio en todo el diseño. 42. Estilos de texto de la parte 3: Ahora, además de las variables de color, también queremos convertir nuestro texto en estilos. Nuevamente, esto es actualmente estilos. Ojalá Figma pronto nos va a proporcionar variables para esto también Y voy a actualizar Estoy usando mi método de picking que discutí durante las lecciones del curso. De nuevo, solo quiero estresarme, asegúrate de que primero recorras todas las sesiones antes de saltar a estos ejercicios. De lo contrario van a ser muy abrumadores. Cómo funcionan de nuevo, vamos a refrescarnos, es que simplemente saco todo lo que estoy usando en mi diseño. A partir de aquí, sólo necesito copiar eso. Copiar y pegar. Estoy creando estas pequeñas jerarquías. También estoy usando aquí mi pequeño texto. De esta manera los estoy agrupando. Si volvemos a tu archivo de ejercicios, puedes ver esto. Que aquí tengo todo esto y lo agrupé. Y se puede ver eso aquí arriba, se me ocurrieron algunos titulares de 24 píxeles, luego 16 texto corporal, y así sucesivamente, y uno muy pequeño aquí abajo. Ahora bien, si estás diseñando libremente, entonces podrías tener algo donde tengas un 32, 34, y este es también el momento en el que puedes agruparlos a todos. No siempre va a quedar tan claro. Probablemente va a ser un poco de limpieza si estás más profundo en un proyecto más creativo. Una vez que los agrupé, lo que hice es crear el título uno, título dos, el título tres, etc., y algunos textos corporales Y tengo esta escala. Y ahora quiero convertir esto en estilos. Y puedes ver si haces clic en el color de fondo gris. Creé estos estilos ya en tus archivos de ejercicio, así que estarían listos para usar. Simplemente podría hacer clic aquí y luego saltar a la sección de estilo y seleccionar cualquiera de estos estilos. Ahora queremos crear estos mismos estilos en tus archivos separados. Entonces vamos a hacer lo mismo que con nuestros componentes y colores. Vamos a saltar aquí en el archivo separado que creaste, y vamos a agregar nuestros estilos aquí. Nuevamente, podemos agregar una sección a su alrededor para mantener todo bien organizado, para tener este blanco también para una mejor visibilidad. Ahora voy a ir uno por uno, guardando estos estilos. Voy a ir por este de aquí y voy a dar click en el botón de estilo en plus voy a llamar a este título uno. Puedo agregar más información donde se usa y puedo crear este estilo. Ahora estoy haciendo lo mismo que hice con mis variables de color antes. No voy a aplicar este estilo aquí. Figma me dejaría hacer esto. Y esto es un poco peligroso. No queremos tener eso en nuestro diseño. Queremos tener eso en nuestros componentes. Entonces todo en nuestro diseño sigue. Por mi título, yo empezaría por aquí. Seleccionaría cualquier cosa que sea un título, y luego elegiría el título. Entonces crearía mi título. Dos, en realidad prefiero primero crear todos los estilos, y luego voy corriendo poco a poco por todos mis componentes para asegurarme de que todo esté configurado. Si saltas a tu diseño y haces clic en el título aquí, entonces estamos obteniendo un mejor precio. No heredó. Si hago clic en el título aquí, entonces sí heredó Lo que pasaba a veces si pegamos texto, aunque no queríamos hacerlo, accidentalmente estábamos anulando un estilo Lo que tenemos que hacer en este caso es seleccionar nuestra instancia y luego restablecerla donde se restablecen los tres pequeños puntos todos los cambios, y desafortunadamente, eso también restablece las anulaciones Sólo necesito volver a poner ese texto aquí. Ahora si selecciono, puedes ver que ahora tiene el estilo correcto. 43. DISEÑO AUTOMÁTICO: 01 ¿Qué es el diseño automático?: Entonces, hagamos una idea. ¿Qué es diseño automático y para qué lo usamos? Entonces con autoayout, podemos configurar nuestros diseños en Figma de tal manera que correspondan al Y esto funcionará en cosas como componentes individuales, pero también en grupos de esos componentes. Entonces eso significa que realmente podemos usar Autoayut para configurar cualquier cosa, desde un botón hasta una página completa Notarás que a veces cuando aplicas el diseño automático, esto funciona muy bien y es súper fácil. No obstante, en otras ocasiones, simplemente se comportará de la manera más extraña, y hay que entender por qué La razón es que las herramientas de diseño Figma se basan en CSS Entonces lo que podemos hacer es descomponer el menú en diferentes partes. La primera parte que es diseños unidimensionales, y representa algo llamado CSS Flexbox La última parte que es diseños bidimensionales, y que se traduciría aproximadamente en algo llamado cuadrícula CSS. Ahora bien, como diseñador, no necesitas escribir ni entender ese código, pero es importante que entiendas el concepto básico de por qué estas cosas funcionan de qué manera. Entonces lo que vamos a hacer es que vamos a desglosar el menú, y vamos a recorrer las diferentes áreas, entendiendo como diseñador cómo operan. Esto no sólo te ayudará a mucho más sentido a qué maquetar, sino que también mejorará tu colaboración y comunicación con el desarrollo. 44. DISEÑO AUTOMÁTICO: 02 El menú de diseño de Figma: Descripción general del menú de diseño. En figma, podemos desglosar nuestro diseño de menú en tres tipos principales Sin diseño, diseño de una dimensión, ya sea vertical u horizontal y diseño bidimensional, lo que crea una estructura similar a una cuadrícula. Hablemos de esto con más detalle con un ejemplo práctico. Por defecto, el menú está establecido en none. Eso significa que podemos mover elementos libremente con solo arrastrarlos alrededor. Ahora echemos un vistazo al diseño de una dimensión. Entonces estos dos de aquí. Primero, tenemos alineación vertical. Entonces esto solo significa que los elementos se apilan uno encima del otro, uno debajo del siguiente. Por ahora, solo mantén los ajustes de cambio de tamaño en abrazo tanto para ancho como para alto Nos sumergiremos en lo que eso realmente significa un poco más adelante, así que todo tiene sentido. A continuación, puede ajustar la alineación, que controla cómo se posicionan los elementos dentro del marco padre. Esta configuración se aplica a todos los niños directos de la misma manera. También notarás una opción de gap. Ese es simplemente el espacio entre cada uno de los elementos hijos. Observe cómo esto también es lo mismo para todos ellos. Por último, hay relleno, que controla el espacio dentro del marco, arriba, abajo, izquierda y derecha. Puedes hacer clic en este pequeño icono aquí para ampliar el menú y ajustar cada lado individualmente si quieres Puedes configurarlo a través del menú o simplemente puedes hacer clic justo dentro de tu elemento y usar los manejadores on Canvas y arrastrarlo a tu gusto. Cualquier cambio que realices aquí será representado en el menú. Si cambiamos de una alineación vertical a una horizontal, entonces todo permanece prácticamente igual solo que la brecha y la alineación ahora también se aplican horizontalmente solo como un apilamiento de los elementos. Tenga en cuenta esta pequeña flecha, sin embargo, por aquí que aparece al final de nuestro menú. Si activas eso, entonces significa que los elementos se envuelven. Entonces, si cambias el tamaño, se apilarán en una nueva línea Observe cómo el apilamiento depende de cómo establezca su alineación. Veamos nuestro último elemento del menú, que crea un diseño bidimensional. Entonces, en lugar de apilar, crea una estructura tipo cuadrícula compuesta por columnas y filas. Se pueden ajustar a través del menú. Para colocar tus elementos en la cuadrícula, simplemente arrástralos en las celdas. Tenga en cuenta que los artículos también pueden ocupar más de una celda. Esto crea una llamada área de cuadrícula. Esto es antes de que también podamos establecer la brecha, que ahora significa el espacio horizontal y vertical entre las celdas, así como el relleno, que ahora es el espacio exterior entre la cuadrícula y su marco padre. Podemos establecer todas las filas y columnas para que sean iguales o podemos dar click sobre ellas para cambiar el tamaño individualmente. Aquí también es donde esperaría que pronto se agreguen más funciones, como soporte para diferentes unidades. Al momento de grabar esto, solo tenemos la opción de valor fijo y auto. Si estableces tus celdas y filas en auto, entonces vas a cambiar el tamaño con el espacio disponible 45. DISEÑO AUTOMÁTICO: 03 Cuándo utilizar qué: ¿Cuándo usar qué? ¿Cuándo usar diseños unidimensionales cuando y cómo combinarlos? Bueno, no hay bien o mal, depende mucho de lo que busques. Y muchas veces hay diferentes maneras que podrían lograr el mismo resultado. Entonces aquí hay un ejemplo. Si quiero que esto sea apilado, entonces puedo usar alineación horizontal o vertical. Y recuerda, también podemos envolver. Cuando uses envoltorio, ten en cuenta cómo esto coloca un artículo tras otro como cuentas en una cuerda. Ahora bien, si alteras los elementos, se reorganizarán dependiendo del espacio disponible del padre, así como de cada uno de los No les importa lo que esté pasando en la fila de arriba. Simplemente siguen un eje y un solo eje. Entonces, si quieres algo más estructurado como algo para alinear, entonces necesitas cambiar al enfoque de diseño de dos dimensiones, creando una cuadrícula. No hay reglas estrictas, pero probablemente se encuentre usando diseños de una dimensión más para los componentes, mientras que la cuadrícula funciona bien para la estructura general. Pero puedes usar totalmente lo que se ajuste a tus necesidades. La parte importante es que entiendas cómo funcionan cada uno. Una vez que aprendas esto, uso vendrá naturalmente. Estoy usando ejemplos muy simplificados aquí. El verdadero poder viene cuando comienzas a anidar, mezclar y combinar estas herramientas de diseño No hay reglas duras, lo cual es a la vez emocionante y seamos honestos, un poco frustrante Sin una sólida comprensión de cómo funciona cada uno de ellos y cómo juegan juntos, las cosas pueden desmoronarse rápidamente, como una red enredada de elementos que colapsan cuando intentas mover solo uno Por eso vamos a separar cada herramienta de diseño, ver cómo funciona y luego volverlas a juntar poco a poco. El objetivo es asegurarte de que no solo estás adivinando y copiando cómo podrían funcionar las cosas, sino que realmente comienzas a construir con confianza 46. DISEÑO AUTOMÁTICO: 04 Configuración de diseños unidimensionales: Configuración de diseños unidimensionales. Vamos poco a poco y centrémonos en este primer pase aquí del menú. Entonces estos dos diseños horizontales y verticales. Entonces aquí tenemos dos elementos simples, un simple botón y una tarjeta con solo elementos apilados uno encima del otro. Entonces comencemos con nuestro botón y seleccionémoslo. Y ahora podemos seleccionar la opción de diseño de nuestro menú o podemos usar este botón aquí arriba. Tengo que decir que esperaría que esto desaparezca en un futuro próximo. La parte importante es que si pasas el cursor sobre él, ves el atajo, que es shift y A, así que solo voy a usar ese turno y A. Y ahora puedes verlo seleccionado un layout sugerido para mí En este caso, se trata de una disposición horizontal. También puedo simplemente usar el menú aquí para seleccionar esto. Es exactamente el mismo resultado. Entonces, qué hace esto ahora, si me quitara parte de mis contenidos, si cambio el contenido, puede ver que el botón se adapta a él, pero aún conserva todo el relleno que he establecido. Hagamos lo mismo con nuestra tarjeta. Entonces estoy seleccionando mi tarjeta, y esta vez, estoy seleccionando manualmente el apilamiento vertical. Y así ya se puede ver que esto es lo mismo. Si cambiara alguno de los contenidos, entonces seguiría manteniendo todo mi relleno en su lugar. Entonces echemos un vistazo más de cerca. Vamos a ignorar esta parte aquí por ahora, el redimensionamiento. Entonces la alineación, ahora mismo, no se puede ver ningún cambio, pero si cambio el tamaño de esta imagen aquí, se puede ver que ahora se puede ver que se podría ajustar la alineación de estos elementos. Vamos a llevarnos eso de vuelta. Entonces la otra cosa que puedo cambiar es mi brecha. Entonces, si mantienes presionada la tecla Mayús, por cierto, entonces saltas a tu cantidad de codazo establecida, de lo contrario, puedes simplemente subir una por una con tus teclas de flecha, o lo que también puedes hacer, puedes ir a Canvas y simplemente puedes arrastrar las asas, o también puedes simplemente agregar un valor aquí Y fíjese como esto siempre es lo mismo para todos los elementos hijos. Entonces es la misma brecha para todo en la misma capa. Y es lo mismo con nuestro relleno, también puedo cambiar mi relleno en el menú, o simplemente puedo cambiarlo directamente en mi lienzo usando las asas. Y recuerden, aquí tenemos este pequeño icono, así que también podemos cambiar esto individualmente. Si queremos cambiar el orden, entonces lo que podemos hacer, podemos usar nuestros rastrillos y anotar cómo el cambio en orden ahora se refleja automáticamente en su panel de capas También puedes simplemente arrastrarlo, y eso también va a reorganizar todo tu diseño Si desea eliminar el diseño automático en cualquier momento, entonces también puede hacerlo simplemente haciendo clic en este cuadro nuevamente, o también puede eliminarlo simplemente en el flujo seleccionando el estado predeterminado. Así que recapitulemos rápidamente. Para agregar y eliminar un diseño, puede usar el panel de propiedades. También puedes usar el atajo Shift y A o para eliminarlo Alt Shift y A. Y también puedes, como con casi todo en figma, click derecho, y luego también encuentras el atajo aquí Y por cierto, el atajo también es muy útil si tienes, por ejemplo, solo algo de texto porque entonces no ves el menú de diseño automático en ningún lado. Entonces, lo que puedes hacer, puedes hacer clic derecho y luego aquí ves agregar diseño automático, o puedes usar el atajo Mayús y A, y ahora tienes una configuración de diseño automático Si agregas un poco de relleno, entonces puedes ver eso. Y si ahora volverías a quitar Autoayout, entonces puedes ver que te queda solo con un marco Esta es también la razón por la que el autolayout se llama AutoyOutFrames como caída porque cada vez que conviertes algo en Autoayout, se basa en AutoyOutFrames como caída porque cada vez que conviertes algo en Autoayout, se basa en marcos. 47. DISEÑO AUTOMÁTICO: 05 ajustes de retamaño: Cambiar el tamaño con diseño automático. Así que hemos aprendido que simplemente podemos convertir cualquier elemento en un marco de diseño automático. Podemos ajustar el espaciado y el tamaño y relleno. Y a medida que alteramos el contenido, entonces podemos ver que nuestro marco corresponde. Ahora bien, funciona muy bien así porque si volvemos a echar un vistazo, este es un marco de diseño automático vertical. Pero lo que también queremos haga este marco es que si lo redimensionamos, entonces queremos que nuestro contenido también responda así Para que eso funcione, necesitamos agregar una capa adicional de diseño automático, que se llama cambiar el tamaño de la configuración Puede encontrar la configuración de cambio de tamaño en la parte superior del cuadro de diseño Si tiene el diseño automático aplicado, esto podría ser en el marco padre o en el marco anidado, entonces puede encontrarlo dentro de aquí Pero también cualquier elemento dentro de un marco de diseño automático, si haces clic en él, entonces vas a obtener el cuadro de diseño con la configuración de cambio de tamaño para este elemento, y esta es la parte que nos interesa Por lo tanto, es muy importante entender que mientras aplicamos el diseño automático al marco padre, el menú de diseño automático determina el comportamiento de todos los elementos secundarios dentro de Entonces la alineación para todos estos elementos, el espaciado para todos estos elementos. Ahora bien, si queremos configurar cómo deben comportarse estos elementos individualmente, entonces necesitamos seleccionarlos y establecer su comportamiento de cambio de tamaño, no el comportamiento de cambio de tamaño del marco general. Las opciones actuales que tenemos es un tamaño fijo, llenar el contenedor o abrazar el contenido. El autoayout se volvió realmente bueno adivinar qué comportamiento podrías desear Así que en realidad podrías salirte con la tuya con esto. Por ejemplo, esta imagen aquí ya está configurada para llenar el contenedor, y esto se debe a que Autoayout detectó un margen similar izquierda y derecha Pero recomendaría encarecidamente que no confíe en estos ajustes preestablecidos y realmente intente entender una vez cómo configurar el cambio de tamaño adecuado La configuración de cambio de tamaño suele ser la parte gente se confunde más sobre el diseño automático, pero no es tan difícil Realmente es solo entenderlo una vez y practicarlo un poco. La parte crucial es ir paso a paso. Esto no se puede apresurar. Así que vaya poco a poco. Lo primero que vamos a seleccionar es nuestra imagen. Ahora vamos a nuestro menú desplegable y pongamos esto para llenar el contenedor. Eso quiere decir que si redimensionamos el contenedor, va a, bueno lo que dice, llenarlo, siempre respetando el relleno que establecemos a izquierda y derecha Aquí estamos tratando con una configuración horizontal, así que no me preocupo demasiado por la configuración vertical. Aún así, voy a tener este de aquí a una altura fija. Eso quiere decir que mi imagen siempre está fija a esta altura específica. También puedes bloquear la relación de aspecto. Entonces eso significa ahora que si cambias el tamaño, entonces se mantiene la proporción Pero por ahora, vamos a mantenerlo a una altura fija. Ahora voy a ir con el siguiente elemento, que es mi texto, y quiero hacer lo mismo. No quiero que esto se arregle en este tamaño. Quiero que esto sea horizontal para llenar el contenedor. Y voy a hacer lo mismo para mi texto de copia. También quiero esto para llenar el contenedor. Ahora con texto, no quiero fijar la altura porque no sé qué tan alto va a ser esto si agrego más texto o si cambio el tamaño Por eso quiero que esto se abrace. El abrazo es una pequeña característica muy linda. Básicamente, piénsalo como darle un abrazo al contenido vertical. Cuando se trata de copiar texto y diseño automático, y por la presente me refiero a cualquier cosa que no sea un botón o un enlace, luego asegúrese de que siempre esté configurado en altura automática. Por lo general, el diseño automático lo hace por sí mismo. Y eso ya es prácticamente todo. Cambiemos el tamaño de nuestra caja ahora, y podrás ver que todo sigue muy bien E incluso si cambio mi texto, así que agreguemos un poco más de texto de copia aquí, puedes ver porque esto está configurado en altura automática, y abrazo, el cuadro se expande automáticamente y el diseño automático responde. Todavía puedo cambiar cosas como mi espaciado y mi dimensionamiento con el menú de diseño automático. Pero si cambio el tamaño, entonces todo se comportará de la manera en que se pretendía La función de diseño automático en figma es bastante inteligente. Entonces si yo, por ejemplo, tengo un botón aquí quiero agregar y lo convierto en Autodiseño, entonces puedes ver que no solo recoge automáticamente todo el espaciado, sino que solo recoge automáticamente todo el espaciado, también ya me da una configuración de redimensionamiento sugerida Ahora, en un botón, abrazar horizontalmente y abrazar verticalmente tiene sentido, porque si cambio esto, así digamos, cámbialo para leer más, entonces puedes ver que quiero que esto sea abrazado horizontalmente también Y por cierto, también puedo arrastrar un marco de autolayout dentro botón estaría anidado y mantendría sus ajustes de redimensionamiento Si quisiéramos moverlo, entonces lo que podríamos hacer es usar la alineación. Y también podríamos cambiar su configuración de redimensionamiento. Entonces, por ejemplo, si quisiéramos un botón de tamaño completo, entonces podríamos cambiar esto para llenar contenedor, y se sentaría en el medio. Y ten en cuenta, si tu texto está pegado a la izquierda, entonces esto probablemente se deba a que la alineación del botón aún está configurada a la izquierda y puedes cambiarlo al centro. 48. DISEÑO AUTOMÁTICO: 06 La configuración automática: Hay una característica que está un poco oculta, pero la uso todo el tiempo. Quiero que te des cuenta de ello, y se llama auto. Esta característica se llamaba anteriormente space Between Infigma y todavía se llama así en Es posible que también escuche que se hace referencia a este nombre. Entonces básicamente, aquí tenemos nuestro marco con tres elementos hijos. Y si cambio el tamaño, entonces puedes ver que puedo alinear esto, y ahora está en el medio Puedo alinearlo a la izquierda, pero siempre lo mantendrá espaciado. Ahora, en espaciado con el desplegable, puedo cambiar esto a auto Con auto, el espacio se distribuye equitativamente entre los niños. Además del menú desplegable, también puedes simplemente hacer clic en los mangos. Ahora si escribe algún valor, entonces saltará de nuevo a la configuración original, o si haces doble clic de nuevo y tecleas auto, entonces saltará al espacio entre o como lo llamamos ahora auto. Y mi atajo favorito, simplemente haga clic en el menú de alineación para alternar entre empaquetado y espacio entre. O también puede usar el atajo X mientras está en el menú de alineación. Auto es muy, muy útil cuando queremos crear cosas como una navegación, donde queremos sentar algunos elementos la izquierda y pegar otros a la derecha. Ahora lo genial es, si agregamos más elementos, depende de dónde los agreguemos. Entonces ahora, esto sería un hijo directo. Entonces ahora tenemos tres elementos hijos. Entonces si redimensionamos el espacio disponible se distribuye entre tres, pero si coloco esto dentro de mi marco anidado aquí, entonces vuelvo a mi configuración original Muchas veces Auto será solo esta solución que estabas buscando. Así que tenlo en mente. 49. DISEÑO AUTOMÁTICO: 07 Componentes y variables de diseño automáticos: Si estás usando variables y configuras una colección con tus valores de espaciado, entonces puedes usarlas en el diseño automático Esta es una excelente manera de asegurar la consistencia en todos los diferentes elementos y componentes de su diseño. Para aplicarlos a un marco de diseño automático, simplemente seleccione el marco, y luego en su menú de diseño automático donde encuentre sus valores de relleno y espaciado, si pasa el cursor sobre ellos, si pasa el cursor sobre ellos, verá Da click en él y obtendrás un desplegable con todos los valores. Ahora puedes elegir el valor que buscas. También puedes usarlo para tu espaciado. Solo tienes que ir a aplicar la variable a través del menú desplegable, y ahora puedes elegir cualquier variable que te gustaría aplicar. Por supuesto, puedes aplicar la misma variable varias veces a través de diferentes elementos. Siempre puedes cambiar la variable simplemente haciendo clic sobre ella y eligiendo otro valor de la lista o desconectarla haciendo clic en el pequeño clip Si no ves ese clip en algunos campos, entonces golpea el Bkey dos veces Y recuerda, en figma, estamos trabajando con un enfoque basado en componentes Por lo tanto, sería una buena práctica convertir cualquier marco de diseño automático que esté usando varias veces en un componente. Si ahora sacamos una instancia, puedes ver que la instancia heredará cualquier valor de espaciado que hayas aplicado con variables Al estar alterando el texto en la instancia, estas variables permanecerán en su lugar. Y por supuesto, como con cualquier otro componente, esto funcionaría también con cualquier otra variable. Entonces, por ejemplo, si establecería una variable de color a su componente, entonces todas las instancias heredan. 50. DISEÑO AUTOMÁTICO: 08 Anidado y la relación padre-hijo: Entendamos el anidamiento y una relación padre-hijo. , para tener la cabeza alrededor del anidamiento en el diseño automático Por cierto, para tener la cabeza alrededor del anidamiento en el diseño automático, así como en el código, es importante comprender la relación padre-hijo Aquí se puede ver un diseño de tarjeta que configuré. Ahora, no hay ningún diseño automático aplicado hasta ahora. Y se puede ver que esta tarjeta tiene especie de clusters. Entonces este introp de aquí pertenece junto, y luego tenemos un texto y un enlace que pertenecen juntos Ahora bien, si tuviera que seleccionar esta tarjeta y simplemente aplicar el diseño automático, entonces esto sucedería. Lo que pasó es que el diseño automático agregó la misma cantidad de espaciado entre todos los elementos. La razón de esto es que autoayout lo mira así Entonces nuestro marco es el elemento padre, y luego cualquier cosa que encuentre justo debajo en la primera capa de jerarquía son los hijos. Así que todas las reglas de diseño automático se aplican a todos estos niños. En este caso, nuestro espaciado. Ahora bien, si seguimos adelante y anidamos esto, así que ahora tengo un marco anidado de diseño automático aquí, y también anidé esta parte, entonces el diseño automático va a mirar Entonces tenemos el marco de ejemplo de anidamiento que sigue siendo el padre, pero ahora solo tenemos tres elementos hijos Entonces ahora si cambiamos nuestro espaciado, por ejemplo, entonces esto sólo va a afectar a los niños. Todavía tenemos todas nuestras capas, pero ahora son nietos Entonces van a seguir la regla de sus propios padres. Y dependiendo de cómo quieras que tu diseño cambie y se comporte, necesitas ajustar este anidamiento Entonces, por ejemplo, digamos que quieres una imagen de ancho completo. Entonces, lo que tenemos que hacer es deshacernos de nuestro acolchado en ambos lados. No obstante, lo que también queremos es que todavía queremos tener algún margen aquí. Entonces lo que podemos hacer ahora es que podemos seleccionar estos dos, crear otro anidado al layout, y ahora podemos aplicar los márgenes izquierda y derecha nuevamente Y ahora puedes ver que tienes un diseño completamente diferente, que también necesita sus propios rollos de anidación Por eso es tan importante tener la cabeza alrededor de la anidación, y en realidad se trata solo de practicar Así que el autolayout realmente no se trata solo de aplicar ese pequeño botón aquí Se trata de pensar en la estructura general de tu diseño, luego aplicar marcos de diseño automático donde los necesites. Y muy importante, todos estos marcos de diseño automático que anidaste, así como todas las capas dentro de ellos. Necesitas pensar detenidamente qué comportamiento de cambio de tamaño quieres que tengan 51. DISEÑO AUTOMÁTICO: 09 sugiere un diseño automático: Agreguemos algo de magia con sugerir diseño automático. Aquí tengo algunos diseños que necesitarían un poco de anidamiento si quiero convertirlos en auto layout El primero bastante sencillo. Entonces esta parte sería un diseño automático anidado, luego esta parte, y luego todo esto es un diseño automático vertical La segunda carta un poco más compleja. Esta parte derecha tendría que ser un anidamiento de diseño automático vertical, y luego la propia tarjeta anidación y luego la propia tarjeta Y entonces tenemos una navegación, por lo que esta parte derecha tendría que ser anidada Y entre el logo y esta parte anidada derecha, necesitaríamos establecer auto, también conocido como espacio entre Ahora podemos hacer todo esto a mano o podemos usar un pequeño truco. Entonces comencemos con el primero. Si simplemente seleccionara un marco, aplicara Autolayout, entonces esto No es agradable. Además, si echamos un vistazo al segundo, definitivamente necesitamos un poco de anidación aquí Pero lo que podemos hacer es hacer clic derecho y luego verás bajo Agregar Autoayout otra opción llamada sugerir AutoAyouto también podemos usar un atajo Shift Control y A. Así que en el panel Capas, puedes ver que Autoayout también podemos usar un atajo Shift Control y A. Así que en el panel Capas, puedes ver que Autoayout Ahora, acabo de llamar a este marco para que podamos agregar un pequeño consejo adicional, que es hacer clic en el menú de IA y simplemente renombrar tus capas. Y luego también vas a obtener algunos buenos nombres de capa para estos elementos anidados Ahora echemos un vistazo si eso funciona, y se ve bastante bien si estoy redimensionando aquí. Si hacemos clic dentro de aquí, podemos ver que esto realmente agregó nuestro redimensionamiento, también. Entonces esto está configurado para llenar, y también mi padre aquí está listo para llenar. Y si alguna vez quisiera cambiar esto, entonces simplemente puedo eliminar o arrastrar estos elementos alrededor de mi panel de capas y cambiar mi anidamiento Entonces probemos la siguiente, y seleccionemos esta tarjeta, control de turno, y A, voy a usar el atajo. Y también, voy a renombrar las capas. Y echemos un vistazo. Eso también se ve bastante bien. Todavía puedo hacer ajustes. Entonces digamos que quiero que esta imagen ocupe la mitad del contenedor, entonces simplemente puedo seleccionarlo y cambiar mi redimensionamiento para llenar el contenedor. Y así, lo tengo ajustado a la forma en que quiero que se comporte. Y nuestro último, echemos un vistazo a la navegación. Shift, control, y A, nuestro atajo. Y tomemos también el hábito de cambiar el nombre de las capas. Entonces esto va a renombrar cualquier cosa que no haya nombrado antes. Entonces estos que he nombrado antes no lo van a sobrescribir. Y echemos un vistazo. Si eso aplicó auto por sí mismo, sí, perfectamente, podemos ver que en el menú de alineación aquí, ese auto fue aplicado. Entonces esto realmente solía ser algo que era súper, súper difícil de hacer antes de que tuviéramos esta pequeña característica. Hacer uso de ella. No obstante, aún así te animaría fuertemente a que te acostumbras a entender el anidamiento manual, también, porque en algún momento quieres cambiar alrededor de las cosas y necesitas entender por qué las cosas se configuran de cierta manera Pequeña nota al margen, al momento de grabar esta función, esto es bastante nuevo. Y considerando lo poderoso e importante que es, esperaría que pronto saliera de este pequeño submenú de clic derecho a nuestro menú principal de diseño automático. Así que solo ten cuidado con eso. 52. DISEÑO AUTOMÁTICO: 10 Ignora el diseño automático: Ignorando el diseño automático. ¿Qué significa eso? Entonces aquí tengo un marco de diseño automático. Quiero arrastrar esta nueva pegatina aquí, y quiero que se asiente encima de mi imagen. Ahora bien, si simplemente lo arrastro dentro del marco de diseño automático, notarás que no puedo tirarlo encima de la imagen ya que se convierte en parte del diseño automático tan pronto como entra en el marco. Entonces lo que puedo hacer ahora es colocarlo dentro del marco, seleccionarlo. Y luego en el panel de propiedades bajo posición, se encuentra este pequeño icono llamado Ignorar diseño automático. En versiones anteriores, a esto se le llamó posición absoluta. Ahora puede arrastrar libremente su elemento alrededor del marco de diseño automático. Pequeño consejo, también hay un atajo. Mantenga presionado el control y simplemente arrástrelo dentro de un marco de diseño automático, y luego tendrá que aplicar automáticamente Ignorar diseño automático arrástrelo dentro de un marco de diseño automático, y luego tendrá que aplicar automáticamente Ignorar diseño automático. Si quieres quitártelo, simplemente haz clic nuevamente en el icono. Sin embargo, como he redimensionado la tarjeta, notarás que ya no responde al ancho. Esto se debe a que ya no forma parte del autolayout. Por lo tanto, el cambio de tamaño no aplica. Lo que puedo hacer para resolver esto es que puedo seleccionar el elemento y anexar la posición de buscar el menú de restricciones, y puedo pegarlo a la derecha. Esto sólo funciona para elementos que no son de autolayout. También es genial para crear cosas como burbuja de alerta. Simplemente arrástrelo a su marco de diseño automático, ignore el diseño automático y luego colóquelo donde lo desee . Ahora, por defecto probablemente va a cortarlo. Por lo tanto, asegúrese de seleccionar el marco principal y, en el menú de diseño automático, cambie del contenido del clip a mostrar el contenido Entonces eso significa que va a mostrar todo desbordando tu marco 53. DISEÑO AUTOMÁTICO: 11 cuadrículas de diseño: Configuración de diseños de cuadrícula en Figma. Para configurar una figma de cuadrícula, seleccione cualquier marco y, a continuación, en el menú de diseño automático, seleccione la entidad de cuadrícula Ahora verás la configuración de la cuadrícula. Entonces, si haces clic en esta área, entonces puedes cambiar la cantidad de celdas de cuadrícula. Siempre se puede alterar esto más tarde también. Ahora puedes simplemente arrastrar tus elementos dentro de la cuadrícula, y puedes extenderlos a través de las celdas o simplemente hacer que se sientan en una sola celda. Depende de ti. Entonces agreguemos un poco más. Agreguemos otro marco aquí, nuestra imagen, y agreguemos también algo de texto. Lo que también podemos hacer es volver a seleccionar el marco, y luego además de las celdas de la cuadrícula, podemos cambiar la brecha. Entonces este es el hueco horizontal y el vertical y anotar como esto siempre es lo mismo para todas las celdas. También podemos el acolchado. Entonces el relleno es el espacio alrededor de las celdas de tu cuadrícula. Si estamos redimensionando nuestra cuadrícula, entonces puedes ver que esto se comporta Y esto se debe a que al igual que con el resto del diseño automático, aquí también tenemos ajustes de redimensionamiento, que podemos ajustar Por supuesto, también puedes establecer esto en fijo, y, por ejemplo, mantener una relación de aspecto. Y de esta manera, podrás jugar con los elementos de tu grilla. También se puede jugar con los diferentes tamaños de columnas y filas. Entonces lo que puedes hacer es así ver estas pequeñas burbujas aquí que dicen auto. Si haces clic en esto, entonces también puedes establecer un ancho fijo y hacerlo más pequeño. Entonces, por ejemplo, podríamos convertir esto en una especie de encabezado más corto. Entonces echemos un vistazo. Y si cambiáramos el tamaño, entonces esto en realidad se quedaría fijo Para que puedas mezclar y combinar. Grabé este video justo cuando salió esto, así que espero que veamos algunas unidades más y algunas características más sucediendo aquí pronto, por ejemplo, ajuste automático a nuestro tamaño. 54. DISEÑO AUTOMÁTICO: 12 anidados y más: Cómo anidar, mezclar y combinar. Lo mejor del autolayout es que puedo anidar diferentes técnicas de diseño entre sí Entonces aquí tengo mi marco, así que este es mi diseño general, que quiero configurar, y pueden ver aplico la grilla. Por aquí, tengo componentes, y se puede ver que están configurados en enfoques de diseño unidimensional. Lo que puedo hacer es simplemente arrastrar una instancia aquí y puedo agregarla a mi grilla. Y como pueden ver, esto es mantener el comportamiento exacto. Entonces agreguemos algunas tarjetas. Yo puedo, por supuesto, también copiar uno y luego puedo agregar más, y esto solo los copiará en fila. Y, por supuesto, igual que antes, puedes abarcarlos, y ellos mantendrían el comportamiento que configuraste en el componente original. Si cambiamos el tamaño de todo el marco, esto también se comportaría muy bien Y ahora puedes, por supuesto, sobrescribir cualquier cosa. Podríamos agregar imágenes aquí. Puedes sobrescribir el texto y configurar tu diseño, manteniendo todo el diseño separado y organizado Muchas veces, probablemente así es como quieres abordar esto. Entonces usas la cuadrícula como un organizador general, y luego tus componentes se configuran con un diseño unidimensional, pero no tienes que hacerlo de esta manera. Porque realmente puedes anidar tan profundo en las formas que necesites o quieras. Entonces aquí hay otro ejemplo. Por aquí, ahora tenemos nuestra representación en pantalla. Y lo que hice aquí, sólo tengo dos columnas. Entonces, si haces clic en esto, puedes ver por aquí este es un diseño de cuadrícula con dos columnas. Y uno de esos que arreglé en un tamaño fijo, así que esto siempre se mantiene en su lugar. Y la otra columna que configuré en auto, así que esto va a cambiar el tamaño Entonces echemos un vistazo. Si redimensiono cualquier contenido que ponga aquí, cambiaremos el tamaño con él Por aquí, tengo algún contenido que configuré. En este caso, también elegí un buen diseño, pero podría elegir cualquiera de esas opciones de diseño. Y en el interior, encontramos nuestras instancias, que se configuran como diseños unidimensionales. Así que ahora puedo simplemente arrastrar eso a esta celda, y podemos ver que ahora se sienta muy bien en nuestro diseño general. Y si cambio el tamaño, mantengo mi barra lateral fija con el contenido flexible Entonces no hay reglas. Realmente puedes mezclar y combinar esto exactamente como lo necesitas. Incluso podrías configurar tus componentes en cuadrícula CSS, si eso tiene sentido. Lo importante es que entiendas la diferencia, juegues con ella y te acostumbras a configurar todo esto y luego combinarlo de la manera más poderosa. 55. DISEÑO AUTOMÁTICO: 13 páginas de diseño automático: Vamos a configurar una página de diseño automático. Echemos un vistazo al diseño simple y cómo podríamos abordar esto. Entonces por aquí, tenemos algunos componentes. Puedes ver aquí el conjunto de componentes con navegaciones para diferentes tamaños de pantalla así como una tarjeta Y ya preparé algunas instancias de esos componentes, y como pueden ver, ya están todos configurados con diseño automático, así que responden muy bien al cambio de tamaño. Entonces voy a presionar F y primero configurar el diseño móvil. Y en los teléfonos, encuentro algunos tamaños de pantalla comunes. Yo sólo voy a elegir uno al azar aquí. Simplemente puedes elegir a cualquiera, y voy a llamar a esto pequeño. Bien, entonces voy a agregar mi instancia aquí, solo voy a arrastrarla hasta el borde. Ahora, podría simplemente agregar mis tarjetas una por una, pero quiero acercarme a esto ya pensando en cómo funcionaría mi maquetación. Así que hay diferentes maneras en las que podría hacer esto. El primero sería, y ese es probablemente el más sencillo es seleccionarlos todos, presionar Mayús y A, y esto me daría un diseño automático vertical, y ahora podría agregarlos a mi diseño. Sin embargo, podríamos usar un diseño de cuadrícula anidado. Así que vamos a cambiar a la grilla y ver si retoma. Y tuvimos suerte de que recogiera de inmediato, y nos dio una columna con nuestro diseño de cuadrícula. Entonces no hay bien o mal. Voy a ir por la cuadrícula por ahora, pero también podrías usar el diseño vertical unidimensional. Entonces ahora que tenemos nuestra configuración general, queremos asegurarnos de que esto se comporte con el cambio de tamaño de pantalla Entonces, lo que tenemos que hacer tenemos que convertir a nuestros padres también en un autolayout Y aquí otra vez, me vendría bien una grilla, pero porque esto es todo de diferentes tamaños, lo que voy a hacer, lo que creo que es más fácil en el móvil es que solo voy a ir por un layout vertical por ahora. Entonces ahora vamos a establecer los comportamientos de redimensionamiento. Voy a comenzar con mi menú y me voy a asegurar de que esto esté listo para llenar, y se puede ver que Autodiseño ya recogido muy bien en muchos de Ahora tengo mi marco aquí. De hecho voy a llamar a este grupo de tarjetas. Y asegurémonos de que también configuramos esto para llenar el contenedor. Solo presionemos Enter para que obtengamos nuestras tarjetas individuales y nos aseguremos de que estén establecidas para llenarse. Se puede ver que esto ya está configurado muy bien por defecto. Ahora, lo que quiero es que quiero un poco de relleno a la izquierda y a la derecha, y puedes ver aquí mi navegación naturalmente tiene eso. Solo echemos un vistazo a cómo está todo esto configurado, y luego podemos ver que en realidad estamos usando una variable de 32. Entonces, lo que podríamos hacer, podríamos configurar esto a mano y simplemente escribir 32 aquí o podríamos usar una variable aquí también. Ahora podemos simplemente establecer la brecha, y de nuevo, podríamos hacer eso con una variable si quisiéramos o simplemente establecerla manualmente. Así que sólo voy a dejar eso a los 40 por ahora. Ahora, podríamos cambiar el tamaño esto manualmente simplemente agarrando el marco, pero lo que realmente tiene mucho sentido en una configuración móvil es esto que seleccionamos esto, y luego aquí arriba, elegimos un tamaño de pantalla diferente Entonces esto es realmente agradable porque te haces una mejor idea, y puedes probar desde la más pequeña hasta la más grande. Bien, entonces ahora también queremos una pantalla más grande. Entonces en ese caso, sólo voy a dibujar uno, y voy a llamar a éste ya sea mediano o grande. mí personalmente no me gusta nombrar después de dispositivos, así que trato de mantenerlo más semántico Entonces, lo que podríamos hacer ahora, podríamos simplemente agarrar esto desde aquí y ahora podríamos simplemente agregar nuestra navegación, la correcta para este tamaño. Pero recuerda, también puedes simplemente tomar el que tienes, hacer una copia de eso, y luego puedes usar en tu panel de propiedades derecho dentro del panel de propiedades el interruptor para elegir cualquier variante de tu conjunto de componentes. Y justo ahora podemos arrastrarlo hasta el borde para asegurarnos de que se aplique a todo el ancho. Ahora tenemos que mover nuestro grupo de tarjetas. Así que de nuevo, podríamos simplemente crear eso desde cero o podríamos copiar el existente por aquí. Y entonces lo que podemos hacer es que sólo voy a arrastrar esto abierto, y ahora podemos cambiar las columnas aquí. Entonces digamos, si queremos cuatro columnas o tal vez en realidad tal vez tres columnas, podemos jugar con esto, y ahora podemos cambiar esto. Entonces es un poco molesto. Sería bueno que se reorganizaran automáticamente. Espero que esto sea algo que queramos ver en un futuro próximo. Pero ahora lo que tenemos que hacer es que tenemos que moverlos a mano. Tampoco necesitamos tantos, así que vamos a mover éste hacia arriba, y se puede ver que todavía es un poco tedioso que tengamos que hacer todo eso a mano Por ejemplo, ahora tendría que cambiar el tamaño a mano. Pero de nuevo, estoy usando éste acaba de salir, así que espero que pronto veamos alguna mejora al respecto. Vamos a ordenar esto un poco. Por ejemplo, aquí, puedo ver que tengo un relleno de 48. Entonces hagámoslo también aquí. Y luego también quiero un poco de relleno arriba y abajo, tal vez. En realidad, no, no creo que lo haga. Entonces vamos a darle un poco más de espacio. Y en realidad necesitamos convertir este contenedor de libras en un diseño automático, también. De nuevo, se podría configurar con una grilla. En este caso, personalmente me resulta más fácil ir por el diseño automático vertical, pero depende completamente de usted. Entonces si lo tenemos así, entonces lo que podemos hacer es si estamos redimensionando ahora podemos ver que esto se comporta Una cosa que podríamos hacer si lo queremos es que podríamos bloquear la relación de aspecto en nuestro componente principal, y eso ahora significaría que nuestro contenido ahora va a mantener ese tamaño. Entonces, el único problema que tenemos ahora actualmente, esto se establece de tal manera que esto ahora se topará con la siguiente línea Esto es algo que esperaría que Figma arregle en los próximos meses Solo hagamos una última pequeña prueba. Entonces, ¿qué pasaría si no quisiéramos el diseño de la cuadrícula aquí, pero si quisiéramos tener esta unidimensional? Entonces digamos que queremos el horizontal, y luego se puede ver que se aplicaría el wrap. Y lo que pasa ahora es que esto también redimensiona muy bien así Entonces, de nuevo, no hay bien o mal. También podrías, por ejemplo, seleccionar esto y centrarlo, y en realidad es el tipo de diseño que buscas. parte más importante para no sentirte abrumado cuando empiezas a configurar páginas enteras es que rompas en pequeños trozos Entonces, antes que nada, asegúrate de tener tu componente configurado. Y nuevamente, se puede utilizar el diseño unidimensional o bidimensional. No importa la mayor parte del tiempo, sin embargo, encontrarás que probablemente uses un diseño unidimensional anidado para esto un poco más Y luego en tu diseño general, crea pequeños grupos como, por ejemplo, este grupo de cartas y piensa en cómo quieres que se comporten. Además, no tienes que empezar con el autolayout de inmediato. Está completamente bien hacer primero un diseño sin ninguna configuración de diseño y luego repensar la estructura Encuentra tu propia forma de trabajar, pero es muy importante que termines en la forma en que tienes como componente los grupos de elementos más pequeños. Entonces tienes grupos dentro de tu diseño, y luego piensas en todo el diseño de la página. Y entonces va a ser mucho más fácil y menos abrumador. 56. DISEÑO AUTOMÁTICO: 14 ¿Qué son las restricciones en Figma?: Restricciones FigMA. En FGma tenemos otra característica más que nos permite controlar el comportamiento a la hora de cambiar el tamaño Se llama restricciones. Seleccione cualquier elemento dentro de un marco, y esto debe ser solo un marco simple, no un marco de autodiseño. Ahora verás líneas punteadas azules que apuntan al siguiente fotograma padre. Estas son las limitaciones. También los puedes ver en el menú del lado derecho bajo restricciones. Sin embargo, solo en marcos estándar, no están disponibles en marcos de diseño automático. Por defecto, estas restricciones se establecen en la parte superior e izquierda. Y fíjate como incluso cuando tengas marcos anidados, siempre van a subir al padre más cercano Entonces, si cambiamos el tamaño, parece que no pasa nada porque están puestos a izquierda y arriba No obstante, si cambiamos esas restricciones, entonces por ejemplo, pongámoslas a izquierda-derecha a esta casilla, y luego en este punto rojo aquí, voy a ponerlas a abajo y derecha. Observa cómo cambian, y te muestran a qué lado están fijados, pongamos este de aquí al centro Puedes usar los menús o simplemente puedes usar el ícono y hacer clic en las diferentes direcciones Entonces a medida que los fijamos en sus nuevas direcciones, y ahora redimensionamos, se puede ver que esto cambia su comportamiento Y podemos establecerlos horizontalmente, o también podemos establecerlos verticalmente. Entonces, fijarlos a un lado o al fondo parece muy obvio Pero a veces nos confundimos un poco cuando hablamos de centro, la llamada izquierda derecha y escala. La diferencia entre ellos es que fijo simplemente tiene un margen fijo, izquierdo y derecho. Entonces donde quiera que lo coloques, va a mantener esa distancia. La escala tiene un margen porcentual para donde sea que la coloques, y el centro solo permanece en el centro relativo. Y lo mismo obviamente funciona horizontal y verticalmente. Pequeño consejo, a veces solo quieres cambiar el tamaño del marco paren e ignorar las restricciones En ese caso, el comando de arrastre hacia abajo, y solo va a ignorar las restricciones mientras lo mantienes presionado. 57. DISEÑO AUTOMÁTICO: 15 restricciones y cuadrículas: Restricciones y cuadrículas. Entonces, en lugar de configurar todo con el diseño automático, simplemente podríamos configurar nuestro componente como componentes de diseño automático. Y entonces lo que podríamos hacer es usar izquierda y derecha para fijarlos al lado izquierdo y derecho, y hacemos lo mismo aquí, incluso podemos agregar elementos como esta pequeña burbuja aquí y ponerla a la parte inferior y derecha. Así que ahora, si estamos redimensionando, entonces estamos obteniendo prácticamente el mismo resultado, pero es mucho, mucho más fácil que configurar un marco de autolayout Sin embargo, te darás cuenta, mientras que esto funciona muy bien para configuraciones móviles simples con un solo elemento Tan pronto como agregues más elementos, entonces simplemente no va a funcionar, porque el problema aquí es que si estamos usando izquierda-derecha, entonces va a tomar a distancia completa. No sabe de estos otros elementos alrededor. Lo que podríamos hacer es seleccionarlos todos y ponerlos a escala. Pero con esto, funcionaría, pero no mantendríamos una distancia establecida. Así que realmente no podíamos mantener nuestro relleno alineado con, por ejemplo, nuestra navegación. Gran manera de lidiar con esto es agregar una cuadrícula porque, échale un vistazo, si estoy agregando mis restricciones izquierda y derecha en una cuadrícula, entonces ahora va a mirar la columna más cercana porque está tomando las columnas como padres. Y por lo tanto, lo que pasaría ahora si seleccionamos todas estas cartas y las colocamos todas a izquierda y derecha es que permanecerían en sus columnas designadas mientras redimensionaban. Ahora podemos hacer lo mismo con nuestra navegación aquí arriba. Vamos a ponerla a izquierda y derecha. Y puedes ver que con solo unos pocos clics y muy pocas complicaciones, estamos obteniendo una configuración receptiva y podemos probar nuestro diseño. Ahora bien, esto es realmente útil solo para una prueba rápida, y también funciona muy bien si, por ejemplo, estás trabajando con números desiguales. Entonces digamos que no quieres distribuir todo de manera uniforme. Esto no funcionaría con el diseño del agua, pero funciona muy bien con una rejilla. Sin embargo, también hay desventajas en esto porque la cuadrícula no respeta ninguno de los acolchados verticales, por lo que no conoce la distancia entre aquí y aquí Entonces, si agregas más elementos como texto, entonces las cosas empiezan a fluir entre sí. Pero esto es puramente un problema de FigMA. Esto no va a ser un problema en código más adelante. Así que todavía me gusta usar cuadrículas para pruebas rápidas. Esto, sin embargo, no es un reemplazo para el diseño automático. Sus componentes siempre deben estar configurados con diseño automático, pero a veces es mucho más rápido probarlos rápidamente con una cuadrícula y restricciones. Un pequeño consejo. Siempre puedes activar y desactivar la cuadrícula. O bien use el panel de propiedades del lado derecho y simplemente haga clic en el icono I, o también puede usar el atajo Control y G. Si tiene la cuadrícula desactivada, entonces todas las restricciones seguirán en su lugar 58. Parte 4: Tan pronto como se sienta cómodo con el diseño automático y las restricciones, entremos en nuestro proyecto de curso. Recuerda, no hay nueva información en esto. Esta es solo una práctica adicional para profundizar tu comprensión de este tema Bajo la cuarta parte sensible, ves algunas instrucciones y también algunos ejemplos donde ocurre la capacidad de respuesta real es sin embargo, en los componentes Si saltamos a nuestra página de componentes, entonces a cada uno de esos componentes donde tiene sentido. Por ejemplo no a mis íconos, no necesitan diseño automático, pero cualquier cosa que dimensionar tiene contenido que está rehuffling Agregué el diseño automático y puedes hacer clic a través esos componentes y también asegurarte de que estás abriendo las capas. Entonces aquí puedes ver cómo anidé todo. Y luego en el lado derecho y el panel de propiedades, puedes ver los ajustes de diseño automático y además no te olvides de los ajustes de redimensionamiento, realmente abre estas capas para que veas dónde está anidado todo La anidación es realmente importante para hacerlo bien. Y recuerda, el diseño responsive es la parte más desafiante en Figma, Así que realmente sé amable contigo mismo y solo usa estos componentes que configuré para ti como referencia Esta es una parte que la estamos agregando a algunos de los componentes donde la necesitamos. Por ejemplo, mis iconos no necesitarían diseño automático, son solo iconos estándar. Después hay otra parte. Entonces, si saltamos a nuestro diseño, ahora todas nuestras instancias aquí heredarán Entonces puedes ver en el lado derecho que este tiene todos los ajustes de antes. Y también se puede ver que dentro de aquí, en el panel de capas, que este tiene el mismo anidamiento Todo esto es heredar. No necesito agregar eso cada vez que uso este componente o una instancia del mismo. No obstante, cuando lo coloco en un nuevo diseño, lo que sí necesito hacer ahora tiene que decirle cómo comportarse en relación con este nuevo entorno en el que se coloca. Hay varias formas en las que podrías hacer esto. Podrías configurar todo el marco con diseño automático o podrías usar restricciones, que es lo que estoy usando ya que me parece un poco más fácil de manejar y además aún me da más flexibilidad en el diseño. Por ejemplo, puede ver que esta instancia aquí tiene restricciones establecidas en izquierda, derecha y arriba. Y puedes, por ejemplo, ver la barra de toque aquí abajo tiene izquierda, derecha, e inferior. Si ahora selecciono la pantalla y luego uso mi menú desplegable, ahora puedo probar todos los diferentes tamaños de teléfonos actuales Por lo que suelo probar el más pequeño. Este no es un tamaño común, pero aún podría estar alrededor. Entonces me aseguro de que todo siga encajando y luego uso el más grande. Y puedo simplemente saltar entre aquí y asegurarme de que mi diseño funcione bien para todos los tamaños. Podrías, por supuesto, también simplemente agarrarlo y redimensionarlo a mano Sin embargo, me parece un poco más confiable usar este desplegable aquí con tamaños reales. Ahora déjame guiarte un poco cuando saltes en este ejercicio porque necesitarías agregar esto a los componentes que creaste en tus archivos separados que aún no tienen ningún diseño automático aplicado. Si no has configurado esto, entonces lo que puedes hacer es saltar de nuevo a los ejercicios y simplemente agarrar los componentes sugeridos que creé para ti en el ejercicio dos. Ahora tendrías que copiar eso a un nuevo archivo, convertirlos todos en componentes, y lo que debes hacer es también asegurarte de que estás anidando esos íconos nuevamente, o simplemente puedes deshacerte de él y olvidarte del anidamiento por un minuto y concentrarte en el diseño automático Eso también estaría bien. Luego puede configurar su diseño con esos componentes. Si eso es un poco rápido, entonces salta de nuevo a esta sesión. Salta de nuevo a nuestro proyecto de curso parte dos, donde hablamos de componentes. Ahora bien, si has seguido todos los diferentes pasos del proyecto del curso, entonces esto es algo que deberías tener ahora mismo. Probablemente tengas tu diseño configurado aquí y también tienes tus componentes, y tu diseño está compuesto por instancias de esos componentes. No obstante, en estos momentos aún no hay restricciones aplicadas. Primero saltemos a nuestros componentes y asegurémonos de que se comporten correctamente. Estamos empezando desde el principio. No necesito agregar diseño automático ahí, tal como los hay. Simplemente bien. Ahora nuestra barra de grifo aquí, necesito agregar diseño automático. Ya configuré esta barra de toque que cada uno de estos iconos aquí tiene su propio marco. Esto me lo está poniendo bastante fácil. Simplemente puedo aplicar el diseño automático. Aplico maquetación automática a este marco. Lo aplico a este marco y lo aplico a este marco. Ahora puedo aplicar el diseño automático a toda la barra. Ahora simplemente necesito darle a Enter. De esta manera estoy seleccionando todos los elementos secundarios anidados a la vez y ahora puedo configurarlo para llenar contenedor Sólo van a llenar el espacio disponible dividido por tres. Echemos un vistazo si esto está funcionando. Así que sólo voy a sacar una instancia y voy a redimensionar Eso. Se ve fantástico. Eso fue eso. Bien, el siguiente, nuestros mejores bares aquí. De hecho podrías discutir y decir, bueno, solo voy a dejar esto con limitaciones y funcionaría. Funcionaría, pero en cuanto estoy teniendo un cambio de tamaño adecuado, me gusta bastante tenerlo todo uniformal También para tener todas estas distancias aquí correctas con el diseño automático. Entonces voy a agregar diseño automático a esto. Voy a traerlo de vuelta al tamaño completo. Creo que lo tengo todo al 390. En realidad no importaría porque ahora responde, pero me gusta bastante tener eso de todos modos. Ahora, simplemente ordeno para que puedan ver aquí, esto ya está funcionando muy bien. Tengo izquierda y derecha, sólo voy a forrar en el centro, así que tengo que abajo izquierda y derecha, todo el espaciado agradable. Echemos un vistazo si esto está funcionando. Sí, eso está bien. Yo voy a hacer lo mismo con este de aquí abajo. Voy a aplicar también un layout. Puedes ver por ejemplo aquí, el espaciado está un poco apagado. También voy a hacer esto 390. Nuevamente, esto podría ser de cualquier tamaño, responde. Ahora, voy a ordenar esto y también tener esto a los 16. De esta manera, ambos son idénticos con todo el espaciado. Bien, genial, vamos a saltar por aquí. Nuestros elementos de diseño en la portada de mi lista de reproducción. En realidad, voy a dejar esto y voy a usar restricciones aquí. A pesar de que acabo de decir prefiero tener todo con diseño automático. Me parece que empezar con esto sería un poco complicado. Seguiría funcionando con el diseño automático. Podrías seleccionarlo, podrías agregar diseño automático. Entonces tendrías que seleccionar este gradiente aquí. Tendrías que posicionarlo absoluto, Tráelo de nuevo, Puedes ver que sigue funcionando. Pero se está poniendo un poco complicado. Volvamos a saltar aquí. Lo que voy a hacer es simplemente voy a establecer esto aquí, así que la superposición, en realidad debería llamarse gradiente. El degradado voy a establecer a izquierda, derecha, y la imagen también voy a establecer a izquierda, derecha. De hecho voy a hacer lo mismo para arriba y abajo. Eso significa que siempre van a estar escalando correctamente. Ahora bien, este pequeño de aquí, definitivamente necesito agregar un poco de diseño automático aquí. Primero necesitamos anidar porque ¿qué pasaría si solo aplicamos el diseño automático? Haría algo así. No queremos eso, tenemos que anidar. En realidad quiero que estos dos de aquí tengan su propia distancia. Los selecciono, presiono shift y A, luego selecciono esos shift y A. Y ahora puedo aplicar el layout automático a todo el fotograma. ¿Bien? Así que recuerda que estamos haciendo nuestros tres pasos. Primero estamos pensando en el anidamiento, luego estamos agregando diseño automático y luego estamos redimensionando Ahora necesitamos agregar el comportamiento de redimensionamiento. Voy a empezar con este botón de aquí. Eso está bien como en realidad está. No, vamos a establecer esto en realidad también tiene que ser un elemento de diseño automático. Agreguemos ese abrazo abrazo. Eso es perfecto. Ahora este de aquí, quiero llenar el contenedor. Quiero llenar el contenedor. Entonces este contenedor, también quiero llenar el contenedor. Y este de aquí, lo estoy dejando arreglado . Vamos a probar eso. Solo saquemos una instancia para asegurarnos de que funcione. Eso no, en realidad no lo hace. Este de aquí, lo olvidamos, también necesita llenar el contenedor. Solo agreguemos un poco más de texto y veamos qué pasa. Podemos ver que hay un pequeño error. Bien, encontremos ese error. Llena el contenedor, eso también está llenando el contenedor. Esto es, vamos a ir poco a poco llenar. Esto se dice para llenar, esto todavía se dice a k. Aquí tenemos el tema, llene el contenedor. Puedes ver si sacas esta pequeña prueba aquí, entonces eso es realmente útil. Otra cosa que probablemente haría es centrar esto. Entonces sería algo así. Bien, fantástico, eso está funcionando ahora también. Puedes ver por aquí en tu archivo de ejercicios que realidad este es el ejemplo que estoy usando. Entonces puedes ver primero que estamos pensando en el nido de anidación, luego estamos pensando en la configuración de diseño automático Se puede ver en realidad una posición, todo en la parte inferior, depende de usted. Y luego aplico el componente aquí al final. No importa cuando lo conviertas en un componente. También puedes jugar con esos ejemplos aquí. Vamos a saltar hacia atrás, nuestra portada. Nuestra portada. Yo hago lo mismo que aquí. Yo sólo lo dejo importante. Simplemente siempre agarra todos los elementos dentro y solo asegúrate de que todos tengan algún tipo de configuración. Podrías colocar imágenes justo en el marco. Estoy usando esta pequeña forma simplemente porque esto me permite copiar y pegar imágenes más rápido. Pero una forma es fina o un marco está bien. De veras depende de ti. Esta tarjeta aquí. Esto en realidad es realmente fácil, ya que solo tiene dos elementos hijos que podemos aplicar para diseñar directamente, sin necesidad de más anidación Lo único que voy a hacer, voy a configurar este texto para llenar el contenedor. Solo probemos eso también. Vamos a copiar un poco más de texto. Y puedes ver, sí, en realidad esto tiene unos puntitos. No quiero que esto entre en la siguiente fila. Perfecto. Recuerda si quieres eso, eso está en el pequeño menú extra de tus propiedades de texto, y luego lo encuentras aquí abajo. El siguiente arriba. Este también necesita un poco de anidación Y por cierto, podrías encontrar ligeras diferencias entre lo que te estoy mostrando aquí y cómo es mi configuración final en el expediente de ejercicio. Hay varias formas en las que podrías modificar esto, pero debería ser similar Lo importante es sacar una instancia, secarla y asegurarse de que funcione. Aquí primero que nada necesitamos un poco de anidamiento, así que vamos a agarrar esos dos, shift y ocho, crear un marco de diseño automático Ahora agreguemos el diseño automático también al padre y asegurémonos de que todo esto esté ordenado. Entonces quiero que esto sea 16 también. Ahora bien, si sacamos una instancia, se puede ver que esto aún no se comporta de la manera que queremos que se comporte. Entonces lo que quiero hacer es que estoy tomando este pedacito medio y digo llenar contenedor. Y ahora esto va a ocupar todo el espacio disponible. Y básicamente va a presionar este pequeño botón a la derecha, y aún así va a quedar a la izquierda. No obstante, siempre asegúrate probar también con más contenido. Entonces aquí puedes ver que lo que ahora nos olvidamos es poner a los niños internos, así que le pegué Enter, obtengo todos los elementos hijos. También puedes simplemente recogerlos uno por uno y los configuro para llenar contenedor. Y éste de aquí arriba también para llenar contenedor. Entonces, si estás sacando una instancia y jugando un poco con el contenido, siempre puedes obtener un resultado bastante bueno. Una idea de lo que está pasando por cierto, para evitar cosas como esta, como si esto se está volviendo demasiado pequeño, el desbordamiento, esto no es auto layout, esto es simplemente nuestro viejo amigo contenido clip. Simplemente recorre el resto de los componentes por ti mismo. Entonces solo esos dos para rematar. Recuerda primero que vamos a anidar, luego agregar diseño automático y luego cambiar el tamaño de los tres santos Una vez que hayas terminado con esto, lo hice por ti. Entonces volvamos a nuestro diseño. Puedes ver si solo hacemos clic en uno, entonces puedes ver que todos heredaron esos ajustes. Ahora solo necesitamos agregar nuestro comportamiento de redimensionamiento aquí. Voy poco a poco. Estoy seleccionando esta izquierda y derecha y arriba. Entonces esta de aquí. En realidad, déjame encender mi grilla porque sí quiero posicionar esto con la grilla. Recuerde que las restricciones se comportan con la cuadrícula. También voy a poner esto a izquierda y derecha. Entonces aquí mi texto para asegurarme de que es el ancho completo de la cuadrícula izquierda y derecha. Ya jugué con esto. Al parecer esto también se establece a izquierda y derecha. Ahora estos de aquí, necesito seleccionarlos. Y ahora voy a hacer click derecho y enmarcar la selección porque quiero que lo hagan. De lo contrario se pegaría a la arena de fondo e intentaría reorganizarse Ahora bien, esto es como un elemento que puedo posicionar izquierda y derecha. Yo voy a hacer lo mismo con este de aquí abajo. Voy a enmarcar selección izquierda y derecha. Obviamente mi barra inferior izquierda y derecha, y quiero que esto se pegue al fondo. Probemos, y como siempre se trata de probar y arreglar cosas. Si no funciona de la manera que esperas que funcione, parezcamos bastante prometedores. Echemos un vistazo a nuestro pequeño. Y eso también se ve bien. Perfecto. Volvamos a nuestro tamaño estándar. Solo pasa por esto poco a poco. Así que selecciona todo esto aquí, pequeño consejo, toda esta superposición. Necesitas asegurarte de que esté pegado al fondo. Si estás redimensionando, si quieres tener un pico grueso, entonces simplemente salta a nuestro archivo de ejercicios. En diseño final, puedes ver mis diseños. Y simplemente puedes hacer click aquí. Y se puede ver la forma en que configuré las restricciones para las distintas instancias. Y si, va a parecer un poco como trabajar con chicle al principio, pero créeme, vas a llegar ahí. Se va a poner más fácil cuanto más lo hagas. 59. 01 El prototipo del espacio de trabajo de Figma: Así que comencemos con algunos básicos alrededor del espacio de trabajo a la hora de tratar con la creación de prototipos Entonces aquí tenemos algunas configuraciones de diseño, algunas para móviles y otras para escritorio, y por defecto, vamos a estar en la pestaña de diseño Al lado de la pestaña de diseño, se encuentra el grifo de prototipado O también puedes usar el atajo para alternar entre ellos, viejo o Opción ocho y nueve. Así que vamos a conocer este menú aquí con más detalle. Por ahora, solo tenga en cuenta que si hace clic en el Canvas gris, entonces estás configurando la configuración general del prototipo. Entonces cualquier dispositivo que quieras configurar, vas a conocer más sobre eso más adelante, y si quieres cambiar el fondo, y eso va a estar en la vista de presentación, que vamos a echar un vistazo en un minuto. Sin embargo, si seleccionas algún fotograma en tu Canvas, entonces verás que el menú de creación de prototipos aquí cambia, y aquí es donde vamos a estar trabajando la mayor parte del tiempo Aquí en nuestro archivo de diseño, aquí es donde vamos a configurar el diseño y todo el comportamiento de nuestro prototipo. Si queremos ver nuestro prototipo en acción, entonces necesitamos presionar el pequeño botón de reproducción en la parte superior derecha de tu archivo. Esto luego salta al modo de presentación o vista previa. Simplemente puede usar las teclas de su teclado para saltar al siguiente fotograma, incluso si ya no tiene conexiones establecidas. Tenga en cuenta el orden que Figma usa aquí. Esto es muy útil porque Figma realmente escoge el primer fotograma que encuentra y luego pasa por la fila de marcos Si no hay más fotogramas, entonces va a saltar al siguiente fotograma disponible. Esto no tiene que ser una fila clara. Podría ser algo así, pero Figma va a interpretar esto como una fila y pasar por el marco uno por uno También se puede configurar un dispositivo para la vista previa. Asegúrate de que no haya seleccionado nada y haz clic en el fondo gris de Canvas, y luego verás el menú desplegable para dispositivos en un menú de creación de prototipos Aquí puedes elegir un dispositivo. Asegúrate de que el dispositivo que estás eligiendo coincida con el tamaño de tus marcos. Si ahora seleccionamos una pantalla y chimpancé volvemos al modo de presentación, entonces puedes ver que ahora tenemos un dispositivo a su alrededor Todavía podemos alternar a través de los diseños. Pero ten en cuenta que solo se ajusta al dispositivo que configuraste. Tan pronto como vayamos a, por ejemplo, nuestros diseños de escritorio, esto ya no funcionaría. La solución para esto sería almacenar tu móvil y tus diseños de escritorio en diferentes páginas para tu prototipado Por cierto, también podemos agregar videos o regalos animados a nuestros diseños. En nuestro modo de diseño, esto no aparecería, pero en cuanto saltes al modo presentación, podrás ver tus videos en acción. Esta es solo una característica profesional. Además del modo de presentación, también puedes seleccionar pantallas individuales en Figma y luego presionar Mayús y barra espaciadora, y obtendrás la vista previa del archivo Si te olvidas de esos atajos, entonces justo al lado del botón de reproducción, encuentras un pequeño menú desplegable, y también puedes activar la vista previa de inf y ver los diferentes atajos 60. 02 Configuración del comportamiento de desplazamiento: En Figma, podemos configurar nuestros diseños tal manera que en modo presentación, algunos elementos sean fijos y algunos desplazables . Echemos un vistazo. Aquí tengo el diseño de una pantalla móvil. Quiero que la navegación en la parte superior se mantenga fija mientras el contenido se desplaza Tengo otro botón de anuncio aquí abajo, que también me gusta estar fijo. Echemos un vistazo al modo de presentación, cómo se ve esto en estos momentos. Entonces presiono el botón de reproducción, puedo ver mi prototipo, y puedo ver que si intento desplazarlo, no pasa absolutamente nada Entonces, saltemos hacia atrás y arreglemos esto. Para que scroll funcione realmente, necesitamos contenido que sea más grande que el marco. Aquí selecciono el marco padre llamado móvil, y en el lado derecho, se puede ver una pequeña casilla de verificación llamada contenido clip. Si desmarca esta casilla, puede ver que mi grupo de tarjetas es en realidad mucho más grande que mi marco original Esto es realmente importante. Si no tienes contenido que puedas acortar y que básicamente desbordará tu frame, entonces no puedes agregar scroll. Puedes tener esto marcado o desmarcado. No hace ninguna diferencia. Lo que tienes que hacer ahora es saltar al modo de prototipado, así que haz clic en la pestaña de prototipos en la esquina superior derecha, y luego en desplazamiento de desbordamiento, elige el desplazamiento vertical elige Volvamos a saltar a nuestro modo de presentación y veamos qué hizo eso. Así que ahora puedo desplazarse por el contenido, pero como pueden ver, mi encabezado y mi botón aquí no están fijos. Así que volvamos y arreglemos esto. Elige el elemento, en mi caso, el encabezado que quieres que quede fijo, y salta a la creación de prototipos Verás debajo de la posición la opción de arreglar, permanecer en su lugar. Observe que aquí en el elemento hijo, también obtiene la opción de establecer el comportamiento de desbordamiento. Entonces ese sería el comportamiento de desplazamiento dentro de este marco anidado En este caso, no queremos ningún comportamiento. Ya configuramos nuestro scroll vertical al contenedor padre. Arreglemos también este botón aquí abajo. Vamos a establecer esto en una estancia fija en su lugar también. Y ahora vamos a golpear play y echar un vistazo a cómo se ve esto. Así que mi contenedor padre se desplaza muy bien, y todos mis elementos fijos permanecen en su lugar Si alguna vez estás experimentando desplazamiento, no trabajando, entonces asegúrate de verificar tres cosas primer lugar, en tu pestaña de diseño, asegúrate de tener contenido recortado que sea más grande que el marco con el que estás tratando En el menú de creación de prototipos, asegúrate de que tu desplazamiento de desbordamiento esté configurado Una vez que tenga configurado el elemento padre, ahora elija el elemento hijo que desea fijar en su lugar. Vaya a la creación de prototipos, y luego a la posición, elija la estancia fija en su lugar 61. 03 Conexión de pantallas: Vincular pantallas en Figma es realmente sencillo. Aquí tengo un ejemplo sencillo. En esta pantalla de inicio, tengo diferentes formas de color. Una vez que hago clic en una de estas formas de color, quería saltar a la página de detalles de cada color. Asegúrate de estar en modo prototipo, y luego selecciona cualquier forma, marco de texto, no importa. Una vez que coloques el cursor sobre él, verás aparecer esas pequeñas burbujas Simplemente puedes recoger cualquier burbuja. No importa de qué lado estés seleccionando. Ahora, arrastre un conector y simplemente conéctelo al marco con el que quería conectarse y suéltelo. Y eso es todo. Figma abrirá automáticamente el panel de detalles de interacción para usted, y aquí podrá personalizar aún más su interacción Puedes hacerlo de inmediato, o si está cerrado, simplemente haz clic en el conector o directamente en la interacción en el panel, y se abrirá de nuevo. Una interacción siempre se compone de un disparador, una acción y un destino. Esta es la parte superior de este panel aquí. Al hacer clic es nuestro disparador, entonces nuestra acción es Navegar dos, y el destino es nuestro marco llamado naranja. Ahora puedo alterar la acción desencadenante y el destino simplemente haciendo clic sobre ellos. Podría cambiar el disparador de clic a arrastrar, pasar el ratón, entrar, y así sucesivamente Si queremos cambiar de pantalla, entonces normalmente va a ser al hacer clic. Lo voy a dejar en esto por ahora. Mi acción es Navegar dos. Eso significa que vamos a saltar a una nueva página, y esta es la que probablemente más vas a usar. También hay vuelta, eso significa que vas a saltar de nuevo a la página anterior. Luego hay algunos ajustes más avanzados que podrías hacer con variables. Puedes desplazarte hasta los elementos de la misma página. Puede abrir enlaces externos, y puede abrir superposiciones e intercambiarlos . Después el destino. También podría elegir cualquier otro marco de este desplegable. Sin embargo, te darás cuenta a medida que estás lidiando con más marcos, esto es un poco tedioso Entonces prefiero simplemente seleccionar mi conector y luego elegir otro marco simplemente moviéndolo alrededor. A continuación se muestra la parte de animación. Entonces así es como se animan y comportan las cosas una vez que ocurre la interacción Ahora bien, esta es la parte elegante, la parte en la que configuras todo este comportamiento mágico, las cosas se transforman entre sí y así sucesivamente No obstante, sólo una palabra de precaución. Las micro interacciones son realmente útiles. Sin embargo, te recomiendo que primero te asegures que tu conexión real y tu usabilidad estén funcionando, y que todo tenga sentido. Y luego más adelante, con tu equipo de desarrollo, podrás pensar en qué animaciones e interacciones te gustaría agregar. Porque lo que a veces solo un clic en Figma es en realidad bastante difícil de configurar en CSS Así que sólo para tenerlo un poco suave, voy a ir a por disolver. Él puede establecer el tiempo que lleva disolverse en otra pantalla, y también podríamos elegir uno de los comportamientos preestablecidos. Sólo voy a dejarlo a gusto por ahora, lo cual es bastante bonito. Echemos un vistazo a cómo se vería eso en nuestra vista previa. Voy a seleccionar el marco padre, y solo voy a agregar un simulacro a su alrededor. Estoy trabajando en un iPhone tamaño 14. Bien, vamos a golpear play. Entonces aquí veo mi pantalla de inicio, y si ahora hago clic en mi forma naranja, puedo ver que navega hasta la subpágina No obstante, si estoy dando click en la parte posterior, entonces no pasa nada. Así que vamos a configurar las otras interacciones también. Así que volvamos a nuestro archivo Figma. Aquí, antes que nada, voy a conectar las otras dos formas. Simplemente voy a arrastrar un conector, y se puede ver que Figma guardó los presets que acabo de usar para el naranja Esto es realmente agradable y útil para acelerar tu trabajo. Lo siguiente que quiero hacer es si hago clic en la parte posterior, quiero saltar de nuevo a Inicio o en realidad de donde venga. Puedo seleccionar todos estos botones a la vez. Si mantienes presionada la tecla Mayús, puedes seleccionar varios. Ahora bien podría arrastrar la conexión desde aquí o puedo hacer clic en el botón de interacciones más en el panel Propiedades del lado derecho. Aquí puedo establecer la interacción, y simplemente voy a ir por atrás. Así que saltemos a nuestro prototipo, y eso está funcionando perfectamente. 62. 04 Menú desplegable con superposiciones: Echemos un vistazo a las superposiciones en Figma. Entonces ejemplo perfecto para overlay es un menú. Entonces es básicamente su propio marco. Pero si hacemos clic, por ejemplo, en el trabajo, no queremos que todo el marco cambie a este menú, pero queremos que el menú aparezca debajo de nuestra navegación aquí. Los configuramos prácticamente como cualquier otra conexión. Entonces, seleccionemos trabajo. Enlace al menú. Ahora, al hacer clic, en lugar de navegar dos, elegimos open overlay. En el menú de superposición, ahora puedo elegir la posición, así centro, arriba a la izquierda, abajo, y así sucesivamente, en relación con el marco padre, o también puedo elegir manual, que es lo que aquí necesitaría. Ahora puedo ver este pequeño adelanto de mi superposición, y puedo colocarlo en el marco según lo necesite. Puedo elegir que se cierre automáticamente cuando alguien hace clic afuera, así que cualquier área por aquí, y podría agregar un fondo para un menú que realmente no tiene mucho sentido, así que lo dejo. Como de costumbre, puedo elegir mi animación, así que voy a tener esta también tan disuelta como de costumbre. Echemos un vistazo a cómo se verá eso. L et's hit play, y puedo ver que si hago clic en el trabajo, aparece mi menú, y si vuelvo a hacer clic en el trabajo o en cualquier otro lugar del Canvas va a desaparecer de nuevo. Así que ahora puedo simplemente conectar cualquiera de estos submenú de aquí a una nueva pantalla. 63. 05 tipos de animación: Diferentes tipos de animaciones. En prototipado, tenemos la opción cambiar el tipo de animación Por defecto siempre se establece en instantáneo. Vamos a presionar shift y barra espaciadora, y luego obtenemos nuestra vista previa en archivo. Si hago clic aquí, pueden ver que tengo un cambio instantáneo. Por cierto, si presionas R, entonces esto va a resetear. Cambiemos de instante a disolverse. Ya ves que me dan algunas opciones más. Este es el tiempo que tardará en disolverse. Entonces aquí pueden ver que puedo elegir el tipo de facilidad de entrada, facilidad de salida, y así sucesivamente. Vamos a hacer clic en eso para echar un vistazo. Se puede ver que estoy consiguiendo esta animación más suave. Más adelante, obtienes las llamadas animaciones en movimiento. Entrar, salir, empujar, y así sucesivamente. Vamos a empujar, y se puede ver que se obtiene una pequeña imagen con la animación en movimiento. Se puede elegir de donde va a empujar, por ejemplo, de abajo hacia arriba o de izquierda, derecha, y así sucesivamente. Ahora echemos un vistazo. Se puede ver que esto empuja en toda la nueva pantalla. Ahora quiero destacar una última animación, que es Smart animate, y esta es realmente la mágica Lo que hace Smart animate es, busca capas con la misma jerarquía y nombre entre diferentes marcos o también dentro del conjunto de componentes entre diferentes variantes, y luego Smart anima, por lo que mágicamente anima cosas como color, tamaño, posición Reiniciemos nuestro marco y echemos un vistazo a lo que hace Smart Animate Podemos jugar con la velocidad, y puedes ver que estamos obteniendo estas animaciones suaves realmente agradables. También podemos jugar con nuestros disparadores. Voy a deshacerme de esta animación. De hecho voy a seleccionar todo el fotograma para animar en este fotograma, y voy a decir después del retraso de, vamos a mantenerlo en las mismas animadas inteligentes Voy a decir que si hago clic en esta imagen aquí, entonces va a animar inteligente por aquí Así que vamos a abrir nuestra vista previa, y ahora podrás verla automáticamente animada de la primera a la segunda pantalla. Hagámoslo otra vez. Ahora, si hago clic en la miniatura, entonces va a animar inteligente de la segunda pantalla a la tercera pantalla La parte importante para que esto funcione es que necesitas el mismo nombre y nivel jerárquico entre tus diferentes pantallas. Ahora bien, no importa si dentro de un nivel jerárquico, por ejemplo, moverías las imágenes o si tienes un marco de diseño automático o un marco estándar. La parte importante es el mismo nombre y la misma jerarquía para que la animación inteligente funcione Entonces si echamos un vistazo, entonces a nuestra segunda pantalla, si desrecortamos el contenido, podemos ver que, por ejemplo, este texto siempre ha estado aquí De lo contrario, no podría animarse en eso amablemente. Seguiría animando, aparecería, pero no tendría esta bonita animación en movimiento Y lo mismo de mis imágenes, si quiero que se muevan, entonces antes que nada, necesitan mantener su jerarquía, así que todavía están dentro de un grupo de imágenes, y siguen teniendo el mismo nombre. Y luego los que son invisibles, simplemente pongo a cero la opacidad en el segundo fotograma Por lo tanto, debe ser bastante inteligente al mostrar, ocultar y posicionar sus capas para obtener la animación correcta. Es por eso que también recomendaría mantener su prototipado separado de su diseño 64. 06 Componentes interactivos: Hasta el momento, hemos usado animación entre distintos fotogramas, y ahora voy a mostrarte una de mis características favoritas, los componentes interactivos. Básicamente son animaciones reutilizables establecidas dentro de tu componente. Como el nombre permanece, para que esto funcione, necesitamos componentes o más bien conjuntos de componentes con varianza en lado. Si no estás familiarizado con esto, un conjunto de varianzas es básicamente dos componentes, dos o más componentes en realidad, y puedes ver aquí uso el botón de convención de nomenclatura barra hacia adelante por defecto, botón hacia adelante barra botón hacia adelante barra Son de la misma familia, solo que son un estado diferente de lo mismo en realidad. Entonces por aquí en el lado derecho, puedo decir combinar como variantes. Lo bueno de esto es que si ahora sacas en instancia aquí, entonces puedes ver que dentro de este botón, ambas instancias simplemente se guardan como estados diferentes. A lo largo de mi diseño, voy a usar muchas instancias de esos elementos. Así que no sólo puedo salvar los diferentes estados que tienen dentro de esta instancia, sino que también puedo guardar el comportamiento. Entonces necesito estar en la configuración de mi prototipo. Entonces, por ejemplo, para guardar un comportamiento de botón, estado de libración, quiero agregar Simplemente estoy conectando mis dos botones como haría antes con cualquier otro marco. Ahora puedes ver eso en mi menú, dice al hacer clic, o voy a cambiar esto a mientras se cierne, y tiene cambio para configurar Este cambio hasta aquí solo va a estar activo dentro de los conjuntos de componentes. Ahora puedo usar dsolve instantáneo o Smart animate, voy a usar smart animate ya que es simplemente Ahora echemos un vistazo a lo que hace esto, para que podamos ver esto en nuestro modo de vista previa, necesito dibujar un fotograma, y ahora puedo agregar una instancia de mi botón a este fotograma. Ahora vamos a echar un vistazo. Al pasar el cursor sobre mi botón, pueden ver que tengo esta seguridad de comportamiento, y esto va a ser lo mismo donde quiera que use este botón Bien. Ahora quiero lo mismo para mi switch aquí, pero quiero que esto sea arrastrado hasta aquí y luego se convierta en este interruptor Ahora bien, en este caso, no quiero que se active todo el interruptor , pero quiero llevar aquí esta pequeña burbuja. Quiero tomar seleccionar esta burbuja, dibujar una animación, y verás que dirá al hacer clic. En este caso, quiero en drag, cambio dos, y quiero smart animated por aquí. Ahora, en este caso, necesito devolverme el favor. Entonces en drag, va a volver a volver a mi estado original. Ahora lo que voy a hacer es que voy a arrastrar una instancia, colocarla en mi marco, y echemos un vistazo si eso funciona. Entonces aquí está mi toggle, lo arrastro, y se puede ver que cambia el color con smart animate 65. 07 Figma Mirror: vista previa en tu dispositivo: Figma tiene una fantástica app que te permite previsualizar tus prototipos en tu móvil Vaya al sitio web de Figma y los productos, encontrará la pestaña de descargas Dentro de las descargas, puedes descargar la versión IOS o Android de la aplicación a tu teléfono. Una vez que abras la aplicación móvil, te solicitaron iniciar sesión. Para el inicio de sesión, solo usa tu inicio de sesión estándar de Figma. De hecho, es importante que uses exactamente el mismo inicio de sesión que para tus archivos de trabajo. De lo contrario, el espejo no va a funcionar. A continuación, verá una descripción general de los archivos en su cuenta. Sin embargo, eche un vistazo a la parte inferior derecha y haga clic en el espejo. Das clic en Iniciar espejo, esto reflejará cualquier marco que selecciones en este momento en tu desktobb Cualquier configuración del prototipo será automáticamente visible aquí. Entonces me encanta tener esto abierto mientras trabajo en mis diseños móviles. Esto me permite ver y probar mi diseño de una manera más realista mientras diseño. Solo asegúrate de verificar que el tamaño del marco en el que estás diseñando sea realmente el tamaño correcto para el teléfono móvil que estás usando. En mi caso, tengo un iPhone 14 físico. Por lo tanto, mi pantalla también está puesta a esas dimensiones. O. La aplicación escalará tu diseño hacia arriba y hacia abajo. Por lo que se verá real incluso si estás usando otra talla. Sin embargo, esto realmente puede generar errores cuando, por ejemplo, se trata de probar tamaños de objetivo táctiles. También puedes compartir tus prototipos móviles a través del enlace. Asegúrese de haber copiado el enlace desde la vista de presentación. Luego se abrirá automáticamente en la aplicación móvil Figma si se instala en un teléfono De nuevo, asegúrate de que aquí el tamaño de tu prototipo corresponda con el tamaño físico del teléfono que se está utilizando. No hace falta que te preocupes por la resolución en este caso porque el enlace se remonta a Figma, que se encarga de eso 66. Parte 5: Convertiremos nuestro proyecto de curso en un prototipo interactivo para la creación de prototipos Asegúrate de que en las páginas saltes a la página de prototipos Aquí encuentras como de costumbre el ejercicio así como una solución a la derecha. Si seleccionamos la primera pantalla en la solución, podemos presionar Mayús y Barra espaciadora y abrir nuestra vista previa Esta es una manera muy agradable y rápida de recorrer esto dentro de tu espacio de trabajo. Pero en realidad probablemente sea más agradable saltar al modo de presentación Simplemente haga clic en el botón de reproducción en la parte superior derecha, y luego obtendrá la pantalla de su prototipo. En modo presentación, puedes garabar y también puedes dar click en tu prototipo e interactuar con él Esto es lo que vamos a estar construyendo. Primero hagamos que sea desplazable y arreglemos ciertos elementos como la barra de toque En primer lugar, voy a seleccionar todas las pantallas que tenían contenido de desbordamiento. Recuerda, puedes desabrochar por aquí y puedes ver cualquier contenido que vaya más allá de nuestros puntos de vista Ahora saltamos al prototipo aquí. Podemos establecer esto en garabato vertical. Si seleccionamos este fotograma y presionamos Mayús y Barra espaciadora, entonces obtenemos nuestra vista previa Ahora podemos ver que esto hace garabatos. Sin embargo, no se desplaza lo suficiente porque básicamente no respeta eso. Aquí abajo tengo esta Tapa. Lo que tengo que hacer es darle algún tipo de búfer, algún tipo de espacio extra. Y hay varias formas en las que podrías hacer esto. Simplemente podrías dibujar otro fotograma en el fondo que sea más grande, o lo que hice es, déjame desabrochar esto para que puedas verlo mejor Básicamente empaqueté estos grupos de tarjetas aquí. Lo llamé Grupo de Tarjetas y le puse un marco alrededor. Entonces lo que voy a hacer ahora es que voy a mantener presionado comando o control en windows y solo voy a agregar algo de espacio extra. Esto básicamente sólo va a utilizar el espacio. Ahora echa un vistazo a lo que pasa si ahora vuelvo garabar. Ahora está funcionando. Esta es también una de las razones por las que siempre recomendaría tener el prototipado en una página separada porque vamos a ajustar bastante en tus diseños Todo lo que tenemos que hacer ahora es conectarlos. He añadido algunos errores aquí. Voy a seleccionar esta miniatura, asegurarme de que estás en prototipado, y luego verás las pequeñas burbujas Y ahora voy a conectar con éste. Voy a navegar dos en Tab. Por cierto, podrías ver clic aquí o Tab, es exactamente lo mismo. Navega dos landing page, y de hecho quiero que esto se disuelva. Probablemente se vea instantánea aquí, ese es el valor por defecto. Quiero que esto se disuelva. Entonces desde aquí quiero abrir una superposición. Observe que este es un poco más corto que el otro marco. Quiero que esto se mude y se coloque sobre este diseño original en la pestaña. Eso es correcto. Ahora necesitamos cambiar esto para abrir la superposición de la superposición. Este es simplemente el nombre de este marco. Quiero que se mueva desde abajo. Tengo un centro inferior. Sí, eso es correcto. Tengo cerca. Al hacer clic afuera, agregué un fondo del 50% se puede restablecer la posición de garabatos. Eso solo significa que es si vuelves, solo va a ir a la cima aquí otra vez, lo cual es bastante bonito. Voy a hacer dos cositas más. Voy a seleccionar este de aquí, y voy a agregar una interacción. Y voy a decir en Tab, vuelve. Va a volver a donde sea que venga. Porque más tarde podría entrar a esto desde cualquier otro lugar. Voy a hacer lo mismo por el overlay. Solo ten en cuenta que en la superposición ahora queremos en la pestaña. Ahora bien, si volvemos entonces volvería al fotograma anterior, a este. Debido a que una superposición no es un marco real, es solo una superposición. Entonces lo que queremos hacer es que queremos cerrar esta superposición. Bien, entonces ahora vamos a echar un vistazo que está funcionando muy bien. Estoy dando click aquí. También está funcionando ahora. Quiero abrir la superposición. Fantástico. Ahora volvamos a cerrar la superposición. Genial. Si hago clic aquí, vuelvo a casa. Tengo un pequeño extra para ti aquí. Esto es bastante avanzado, sin embargo, si desencajamos, se puede ver que tengo material horizontal para ser garabatado Ahora lo que puedes hacer, como te mostré antes, coloqué esto en un nuevo marco llamado Card, y ahora puedo configurar esto para garabear con padre Eso es correcto, pero horizontal. Y yo voy a hacer lo mismo por este de aquí abajo, Horizontal. Una parte importante para que esto funcione es que note que este marco es más pequeño, por lo que este marco tiene el tamaño. Termina en el borde del marco padre. No funcionaría si tengo esto a largo, puedes echar un vistazo y jugar con esto, pero como dije, es un poco más avanzado. Echemos un vistazo. Y eso también está funcionando muy bien. Bien, última cosita para hacer una demostración en modo presentación. También tienes dispositivos aquí. Puedes ver que ya configuré esto por defecto, está configurado en ninguno. Puedes elegir un dispositivo aquí. Ahora es importante que elijas el dispositivo exacto tamaño de tu pantalla. Echemos un vistazo. Tengo 390 por 844. Si voy a prototipado y dispositivo, necesito elegir algo que sea 390 por 844, teléfono 14 Si ahora presiono play, entonces puedes ver que ahora tengo este dispositivo alrededor de mi diseño. Simplemente funciona como un prototipo normal, pero está incrustado en esta bonita vista previa. 67. 01 Compartir e invitar a otros: Una de las grandes ventajas de Figma es que puedes invitar a otros a tus archivos, equipos y proyectos, y colaborar en tiempo real Si quieres compartir un archivo y simplemente haz clic en el botón Compartir, y vas a ver la apertura del modelo de compartir. Se puede ver quién ya tiene acceso al archivo, y también se puede ver qué tipo de acceso se les dio. Esto podría ser derechos de visualización o derechos de edición. Si eres administrador, entonces también puedes cambiar el tipo de derechos en esta ventana aquí mismo. Si quieres invitar a otros, puedes hacerlo ingresando su correo electrónico y simplemente enviar una invitación o copiar un enlace para compartir. La parte interesante es esta de aquí. Parece que ahora mismo si invitas, entonces la gente solo obtiene derechos de vista. Eso no es problema porque más adelante una vez que están invitados, siempre puedes cambiarlo y controlarlo a través de tu configuración de administrador. Ahora puedes cambiar eso alrededor. Puedes cambiar a cualquiera y luego puedes cambiar esto para ver o editar. Si haces clic en dit, ten cuidado y asegúrate de verificar primero tu plan Figma actual porque asientos de edición adicionales pueden tener costos adicionales y no quieres una gran sorpresa una vez que tu factura llegue a fin de mes La forma de controlar la vista y el dit se cambió bastante en el último mes. También podríamos ver algunos cambios aquí. Solo ten cuidado y ten en cuenta a quién le das vista y a quién le das derechos dit Entonces puedes ver aquí, cualquiera en diseño, actualmente es una persona puede acceder a esto. Lo que eso significa es que es nuestro equipo aquí llamado Moon Team, y luego tenemos un proyecto llamado Diseño. Aquí abajo, tienes otros enlaces, por lo que solo puedes compartir un enlace de modo def Si vas a estar trabajando con el desarrollo, eso tiene mucho sentido para solo darles un enlace de modo sordo. Entonces tenemos aquí sólo un enlace prototipo. Esto es algo que me gusta mucho compartir, por ejemplo, con los clientes, para que no tengan acceso al archivo real. Puedes publicar en la comunidad, y también puedes incrustar el código en otras páginas. Si saltas al modo sordo, entonces también podrías compartir desde aquí, y esto debería copiar un enlace de modo sordo para ti. Podemos elegir nuestro archivo, que es probablemente lo que más vas a usar, pero también podemos optar por compartir nuestro proyecto o todo nuestro equipo. Simplemente puedes hacer clic en uno de tus proyectos y luego también vas a encontrar un botón para compartir aquí, y luego puedes ver compartir este proyecto. De nuevo, puedes copiar tu enlace o enviar una invitación. Y puedes subir una capa de jerarquía, y también puedes compartir todo tu equipo. Si compartes tu equipo, nuevamente, poco desafortunado vuelve a verse diferente, así que puedes elegir entre derechos de visualización y edición, y tienes más opciones aquí para el control. A nivel de equipo, también puedes hacer clic en Vista de administración. Entonces, si eres el Administrador, eso te da acceso para controlar todos los derechos desde el panel. Esto también depende del tipo de plan que tengas con FIMA, por lo que podría parecer un poco diferente si, por ejemplo, tienes un plan empresarial que te da más visión general más control sobre el control del acceso de tu equipo 68. 02 Configuración de una miniatura: Agregar una miniatura. Por defecto, Figma te da una visión general de lo que hay dentro de tu archivo como una miniatura Ahora es posible que hayas visto en algunos archivos que tienen una bonita miniatura, indicando un nombre y dando un pequeño panorama general Déjame mostrarte cómo funciona eso. Vamos a saltar a este archivo de diseño aquí. Ahora, pueden ver que ya configuré una miniatura. Podría agregar una página separada y llamar a esta casa y agregarla aquí, o simplemente puedo tenerla junto con mi diseño. No importa. Nuestra miniatura es solo un marco simple con un tamaño 16 a nueve Puede configurar esto simplemente usando las diapositivas de presentación de su menú de marcos. Entonces me gusta agregar cosas como una categoría. Esto, por ejemplo, sería un archivo de diseño. Entonces me gusta agregar un nombre de proyecto, una breve descripción. Y también siempre es una buena idea si estás en equipo con muchos para agregar quién es el responsable o quién editó este archivo al final. Ahora, en el lado derecho, me gusta editar una imagen, y realmente puedes configurar todo esto como quieras. Es solo un marco, básicamente solo otro diseño. Lo que me gusta hacer es añadir un poco de info de cómo se ve esto. Simplemente copie algunas pantallas representativas o simplemente un componente representativo aquí. Entonces sólo puedo cambiar el tamaño de esto, recuerda. El truco es golpear K, y ahora estoy en el menú de escalado, y ahora puedo escalar esto hacia abajo, y solo lo estoy agregando a este fotograma para darle un poco más de contexto. Una vez que estoy contento con mi diseño, entonces simplemente selecciono este clavo para el pulgar, clic derecho. En el menú, encuentras set como umbnail. Verás el pequeño ícono de la uña del pulgar junto a su nombre. Si ahora saltamos de nuevo a casa, puedes ver que ahora tengo mi miniatura puesta. Si visitas mi página de la comunidad en figma.com fola at Moon ganando, puedes ver el conjunto de etiquetado de archivos de Mo earning y puedes obtener una 69. 03 Bibliotecas de equipos compartidas en Figma: En FiMA, podemos crear bibliotecas de equipo compartidas. Las bibliotecas de equipos compartidos son una forma para los equipos creen una biblioteca centralizada de activos de diseño que se pueden compartir y reutilizar en múltiples proyectos de diseño Podrías almacenar tus variables, estilos y componentes en bibliotecas externas. Entonces tus colores, configuración de tipografía y cualquier componente, desde botones de iconos hasta tarjetas y Una actualización del estilo o componente de la variable en la biblioteca del equipo compartido daría como resultado un aviso para actualizar cualquier archivo de diseño que utilice el componente o variable de estilo. Se puede trabajar con una o muchas bibliotecas de equipo. Es importante tener en cuenta que para usar una función de biblioteca de equipo compartida en Figma, necesitará un plan Pro Figma o superior Esto significa que pueden aplicarse costos adicionales dependiendo del número de editores que tenga en su equipo. Por favor, asegúrate de consultar con los planes de precios actuales de FIMA para obtener más información 70. 04 bibliotecas de equipo: Bibliotecas de equipo compartido. Aquí tengo dos archivos, y fíjate como en estos momentos solo son archivos de diseño normales. Ves que si pasas el cursor sobre ellos, obtienes este archivo de diseño azul que puedo Ahora bien, esta se llama biblioteca, y aquí guardo mis componentes. Y lo que quiero hacer es convertir esto en una biblioteca, y luego por aquí en mi archivo de diseño, quiero configurar mi diseño consumiendo esos componentes de la biblioteca. Entonces lo primero que tenemos que hacer es básicamente tenemos decirle a este archivo que ya no es archivo de diseño, sino que ahora es una biblioteca. Así que vamos a abrirlo. Y luego dentro, se puede ver que tengo componentes aquí, y también configuré algunas variables básicas. Entonces, saltemos al panel Activos, y luego aquí encontrarás el símbolo de la biblioteca. Da click en él, y verás el archivo actual y la opción de publicar. Ahora agreguemos una breve descripción. Aquí debes ser lo más específico posible. Sólo voy a agregar primero publicado a partir de ahora. Entonces obtenemos una visión general, para que puedas ver aquí tenemos nuestras cuatro variables, y podríamos publicar todo esto, o simplemente podríamos seleccionar ciertos componentes o variables para ser publicados. Ahora publiquemos, y hemos publicado con éxito nuestra biblioteca. Ahora bien, parece más o menos que no pasó nada. Pero si saltamos de nuevo a nuestra casa, entonces puedes ver que nuestro ícono ahora ha cambiado de azul a negro. Un icono negro, verás que ya es una biblioteca. Para consumir nuestra biblioteca, abrimos nuestro archivo de diseño. Por cierto, puedes consumir bibliotecas en archivos de diseño o en otros archivos de biblioteca también. En nuestro archivo de diseño, saltamos al panel Activos. Puedes ver que también tenemos algunos presets de Figma con los que podríamos jugar, pero queremos navegar por nuestras bibliotecas o simplemente volver a hacer clic en el símbolo de la biblioteca Y ahora a través del menú desplegable, echa un vistazo a tu equipo o cualquier otro equipo dependiendo de dónde viva tu biblioteca Él puede ver el que acabamos de publicar. Agreguemos eso a nuestro expediente. Ahora puedes ver en el panel de activos, tenemos nuestra biblioteca, y aquí podemos ver todos los diferentes componentes. Por supuesto, podemos sobrescribirlos y diseñarlos con ellos igual que en cualquier otro archivo Ahora, recuerden, también teníamos algunas variables. Si hacemos clic en variables locales, no las encontramos aquí. Pero digamos que simplemente dibujamos una forma o un marco y luego a través del menú de relleno, verás que aquí, ahora tienes una nueva paleta donde se almacenan los colores de nuestra biblioteca. Y por cierto, también puedes separar esto. Podrías extraer dos bibliotecas, una para componentes, otra para variables, y luego combinarlas aquí. Simplemente los encontraría todos aquí en el panel de activos. Como puedes ver, si haces clic en Agregar más, solo podrías agregarlos. Por supuesto, si quieres eliminarlo, de la misma manera, solo tienes que hacer clic en el botón de eliminar. Si estás trabajando en un archivo de diseño y quieres volver al componente original, entonces simplemente puedes seleccionar cualquier instancia, y luego a través del panel de propiedades, hacer clic en el componente ir al principal, y te va a llevar al archivo donde viven tus componentes originales. Qué sucede si se actualizan los componentes. Digamos aquí, estamos agregando algo de radio, y luego vamos a saltar también a nuestras variables. Solo cambiemos este de aquí por un digamos verde, solo para asegurarnos de que veamos los cambios. Ahora puedes ver que hay una pequeña burbuja en nuestra biblioteca. Así que revisa Cambios inéditos. Vamos a hacer clic en esto y dar clic en Publicar. Y también puedes ver dónde encontraste modificaciones. Ahora publiquemos esto. Deberíamos haber agregado una descripción, por cierto. Ahora bien, si abrimos algún archivo, donde usamos alguno de los elementos que fueron cambiados, también verás esta pequeña burbuja apareciendo aquí. Si haces clic en esto, entonces vas a obtener una visión general de la actualización que ocurrió, puedes actualizarlos individualmente o simplemente ir a actualizar todos. 71. 05 Mover componentes a bibliotecas externas: Mover componentes. Aquí tenemos nuestro diseño y nuestros componentes. Ahora el único lugar que realmente no los queremos es en la misma página. Si solo los copiáramos y luego los pegaríamos en una nueva página, entonces eso sería una instancia. Eso no va a funcionar. Lo que podemos hacer para esto es hacer clic derecho y pasar a una nueva página o podemos presionar comando y X. Esto va a cortar los componentes, y luego podemos pegarlo en la nueva página, y luego esto mantendría nuestra conexión. Si hacemos clic aquí, puede ver que estamos aterrizando en la página donde ahora vive nuestro componente. Ahora bien, ¿qué sucede si queremos colocar esos componentes en un archivo completamente diferente y volver a conectarlo a nuestro diseño? Lo que primero tenemos que hacer para que esto funcione es saltar al panel de activos y guardar este archivo, aunque este sea su archivo de diseño como biblioteca. Publiquemos esto, y parte importante es que se publiquen los componentes que estás a punto de mover. Ahora vamos a crear un archivo adicional. Sólo voy a llamar a esta biblioteca. Ahora voy a seleccionar estos componentes, y así como los muevo a la nueva página, voy a presionar comando y x para cortarlos. Ahora voy a saltar a la biblioteca que acabo de crear, y voy a pegarlas. Se puede ver que hay un poco de alerta porque la llamé biblioteca, pero aún no es una biblioteca porque necesitamos publicarla. Dice mover componentes básicos a este archivo, publicar actualización de biblioteca. Publiquemos esto. Puedes ver aquí está mi botón y mi tarjeta. Muévase a este archivo e incluso podrá obtener algo más de información. Echemos un vistazo a lo que eso dice. El componente se moverá. Este archivo y las instancias se conectarán a este archivo en el futuro. Genial. Eso es todo lo que queremos. Te avisamos un poco aquí cuando ambos mueves y cambias el componente, cualquiera que acepte la actualización de la biblioteca puede perder la anulación. Entonces sí, ese es el gran peligro aquí. Las anulaciones no son necesariamente seguras. A veces el trabajo, a veces no. Pero aún así, tenemos que moverlos, así que hagamos clic en publicar. Ahora como saltamos de nuevo a nuestro archivo de diseño, vamos aquí a la página uno. Ahora podemos ver que también estamos recibiendo una pequeña actualización para revisar aquí, y puedes ver que movimos estos dos componentes de este archivo. Queremos actualizar esto, claro. Ahora vamos a ver si tenemos suerte, tenemos suerte y nuestras sobrescrituras siguen intactas Entonces como se mencionó, a veces esto podría hacer que tus sobrescrituras desaparecieran. Ahora tuvimos suerte todo funcionó. Si saltamos aquí al componente principal, puedes ver que estoy saltando a mi nuevo archivo de biblioteca. Si saltamos de nuevo a nuestro archivo de diseño en realidad al panel de activos, puede ver que esto está consumiendo esta nueva biblioteca, pero el archivo en sí ya no es una biblioteca porque ya no hay componentes agregados. Si saltamos aquí a nuestro resumen, echemos un vistazo, entonces puedes ver que ahora esto tiene un ícono negro y es nuestra biblioteca, y nuestro archivo de diseño vuelve a ser un archivo de diseño. 72. 07 Compartir diseño, componentes, estilos y variables: Echemos un vistazo a lo que compartiríamos. Entonces, ¿cómo documentaríamos nuestro diseño, componentes, estilos y variables? Entonces déjame darte una visión general rápida de un archivo. Empecemos con componentes. Almacenamos nuestros componentes en nuestra propia página separada dentro nuestro archivo de diseño o los almacenamos en un archivo completamente separado. Podemos conectar un archivo de biblioteca separado con nuestros archivos de diseño, ire bibliotecas de equipo compartido. Dondequiera que almacene sus componentes, le recomiendo que los coloque en secciones. Esto creará carpetas en el panel de activos, haciendo que sea mucho más fácil mantener todo organizado para ti y para cualquier persona con la que estés compartiendo. Puedes renombrar y reorganizar fácilmente a medida que tu proyecto va creciendo sin perder conexiones con instancias Además, siempre puedes agregar más información sobre tus componentes a esas secciones. Pero no te estreses demasiado sobre esto al principio. Comience simplemente colocándolos en su propia sección. Otro beneficio de las secciones es que puedes marcarlas como listas para el desarrollo. El mismo principio se aplica a nuestros estilos y variables. Se pueden almacenar localmente en el mismo archivo. Al hacer clic en el área Canvas gris te proporciona una visión general en el panel lateral derecho. Alternativamente, puede almacenarlos en archivos externos, conectándolos a través de bibliotecas de equipo compartidas para diseñar archivos. A diferencia de los componentes, no hay conexión con ningún elemento de lienzo para estilos y variables. Sin embargo, recomiendo encarecidamente crear una visión general para usted, otros diseñadores y desarrolladores. Para nuestras variables de color, esta sería una hoja de estilo de color. Después agrego una jerarquía tipográfica e información sobre reglas comunes de espaciado y maquetación También puedes incluir otras reglas u otros estilos como difuminados, sombras y degradados Esto no solo ayuda a transmitir información técnica, sino que también proporciona información sobre el uso de los diseños y el sistema subyacente. Como siempre con el diseño, establecer una jerarquía visual y es crucial establecer una jerarquía visual y funcional. Ahora, además de estos lineamientos, obviamente queremos compartir nuestros diseños. Para el diseño móvil, solo uso uno. Pero para aplicaciones web y sitios web, normalmente tengo dos pantallas maestras. Uno para móvil y otro para escritorio. No hay reglas establecidas. Adapta eso a las necesidades de tu proyecto. Entonces esta es una página de Figma que proporciona una visión general de todas las pantallas Algunos equipos también tienen una página por función. De nuevo, absolutamente depende de usted cómo estructurar esto. Y también puedo usar secciones para estructurar mis diseños y marcar lo que está listo para el desarrollo. Si estás trabajando con prototipos, recomiendo agregar otra página para tus prototipos o tal vez incluso otro archivo, ya que puede implicar algunos ajustes y Por cierto, suelo prototipar flujos de trabajo críticos como registros y características específicas en lugar de todo el producto. Puedes usar flujos para marcar las diferentes secciones en tu prototipo. Personalmente me gusta dejar de lado una página en mi archivo como área de juegos para probar comportamiento receptivo y cualquier incertidumbre Sin embargo, solo los incluyo en mi documentación de componentes o documentación de diseño si son relevantes. También utilizo algún tipo de sistema de gestión de archivos donde puedo agregar titulares y alguna información adicional con viñetas. Eso es. Ya estás listo para ir. 73. 08 Modo dev Compartir con el desarrollo: Cómo compartir con desarrolladores usando el modo sordo. Tenga en cuenta que el modo sordo no está incluido en el plan gratuito. Entonces aquí tengo mi diseño, que está configurado de componentes, los cuales se almacenan en otra página. Para permitir un mejor intercambio con el desarrollo, Figma cuenta con un llamado modo sordo Puede activar el modo sordo a través de la barra de herramientas. Tendrás la misma visión general del diseño, pero verás que tus paneles a la izquierda y a la derecha cambiaron ligeramente. Si seleccionamos algún elemento, entonces podemos ver que en el lado derecho, estamos obteniendo información que es apropiada para el desarrollo. Echemos un vistazo más de cerca. Entonces, antes que nada, podemos ver aquí arriba que este es un componente, y estamos usando una instancia. Podríamos saltar al componente principal haciendo clic en el icono del componente. Entonces aquí se puede ver automáticamente saltó a la otra página y me está mostrando el componente detallado. Podemos inspeccionar el componente o la instancia. Entonces aquí, por ejemplo, si selecciono el texto, entonces se puede ver que estoy obteniendo el color, en este caso, la variable, la familia de fuentes, el tamaño, y así sucesivamente. Y por cierto, puedes elegir si quieres que esta información se muestre en CSS, en IOS, Android, o también en RAM o píxeles. Esto no es nada de lo que debas preocuparte, pero esto es algo que tus desarrolladores encontrarán muy útil para configurar. Si además hacemos clic alrededor de nuestro componente, puede ver que todas las pequeñas distancias y espaciado que configuramos se muestran muy bien y simplemente se pueden copiar. Volvamos a saltar a nuestra instancia por ahora. Y puedes ver que también con solo cursor sobre nuestra instancia, estamos obteniendo toda esta información, así como una distancia a cualquier artículo vecino Otra característica que realmente me encanta es que si seleccionas alguna instancia que forme parte de un conjunto de componentes, obtienes un pequeño botón llamado abrir patio de recreo. Y en ese patio de recreo, se pueden ver las diferentes variantes de ese conjunto de componentes. Una vez que comience a configurar componentes aún más complejos con propiedades de componentes, entonces esto también se mostrará aquí. Otra gran cosa es que todos tus activos, por ejemplo, imágenes, o aquí arriba, puedes ver nuestro pequeño icono, son realmente fáciles de descargar. Por lo que ya no es necesario exportar activos por separado. Se puede ver que esto se va a descargar automáticamente como un SVG. Si seleccionamos esta imagen aquí, entonces puedes descargarla un PNG, JPEC, o así sucesivamente También puedes hacer clic en Exportar e incluso podrías elegir cualquier otra resolución. Para resoluciones de pantalla más altas, podría optar por dos X, tres X, y así sucesivamente y exportarlo en cualquier formato necesario. Nuevamente, nada de lo que tengas que preocuparte como diseñador porque ahora tus desarrolladores tienen todas estas herramientas a mano. Entonces esto es todo el meollo arenoso, e incluso podrías un vínculo, por ejemplo, a recursos sordos Entonces aquí, puedes agregar un enlace. Si ya tienes configuración de componentes, por ejemplo, en gup, puedes conectarte a Tokens y así sucesivamente Este es un espacio realmente, muy poderoso, y te recomiendo encarecidamente que te sientes con tu equipo de desarrollo y eches un vistazo a esto. Además de eso , también te ayudará con la comunicación general. Entonces puedes ver aquí ahora mismo, dice listo para el desarrollo, y no tenemos nada marcado. Bueno, si volvemos a nuestro modo de diseño, entonces lo que podemos hacer es dibujar una sección alrededor de cualquier diseño. Entonces encuentras sección en tu menú de marcos o puedes usar un atajo Shift y S. Y digamos que esta versión de escritorio aquí ya está terminada, pero en realidad mi móvil todavía estoy trabajando. Dibujó una sección a su alrededor y podemos cambiar el color de fondo para asegurarnos de que podamos ver esto un poco mejor. Si pasas el cursor por aquí o haces clic en el nombre, entonces vas a ver aparecer este pequeño letrero listo para el desarrollo Si haces clic en eso, entonces esta sección y cualquier cosa que coloques en ella, ahora está marcada como lista para el desarrollo. Si saltamos de nuevo al modo sordo, entonces puedes ver en tu lado izquierdo, ahora tenemos todo lo que está listo para que los desarrolladores sean inspeccionados. Y luego en cuanto esté listo con mis otros marcos en mi diseño, simplemente podría agregarlos a mi sección, y por cierto, puedes agregar tantas secciones como quieras. Entonces, si vuelvo a saltar a listo para el desarrollo nuevamente, entonces ya puedes ver que ambos están marcados aquí. Si hago clic en ellos, acercaré el zoom y podré inspeccionar esto más a fondo. Otra característica que realmente me encanta es que te muestra cualquier cambio en tu diseño. Volvamos a nuestro diseño y cambiemos esto un poco. Digamos que aquí estoy cambiando el relleno. El espacio entre ellos es ahora más grande, así que algo realmente sutil. Si vuelvo a mi modo muerte y selecciono este diseño, ahora puedo ver aquí comparar cambios. Vamos a hacer clic en eso. Y ahora se puede ver que se agregaron algunos ligeros cambios. Así que a veces son muy sutiles, y aquí me gusta mucho usar la función de superposición. Y ahora podemos ver los cambios y se puede ver este pequeño cambio en el relleno. Si haces clic en él, entonces también te dará información más detallada. Además, siempre te recomiendo que agregues un poco más de información sobre tus componentes y des una visión general con hoja de estilo de cosas como el uso del color y la jerarquía tipográfica Puedes compartir directamente desde el modo sordo simplemente haciendo clic en el botón de compartir. 74. 99 gracias: Bien hecho para terminar este curso. No dude en comunicarse con nosotros en Moonlearningt. Siempre estamos interesados en escuchar sus comentarios. También nos harías un gran favor si pudieras tomarte un minuto y dejar una reseña aquí mismo. Si disfrutas de este curso, entonces también asegúrate de echar un vistazo a nuestros cursos adicionales en Molearn punto cubrimos todas las materias desde las bases mismas del diseño de UI hasta Figma e incluso algunos conceptos básicos de código Asegúrate de visitar nuestro sitio web en molar dot O donde también puedes suscribirte a nuestro boletín.