De cero a héroe del diseño web: conquista Figma y crea sitios web asombrosos en 2024

1. Introducción a la clase: Hola, bienvenidos a mi bootcamp de diseño Figma y UI UX. La única clase que necesitas para crear, diseño web o app. Mi nombre es Peter, y estoy tan emocionada de haber tenido el privilegio de ser tu instructor en este curso. En los últimos años, he tenido miles de personas que han aprendido a codificar y actualizarse a sí mismas. Esta clase abarca todos los conceptos y temas que necesitas aprender y dominar sobre Figma y diseño web. Comenzamos con conceptos básicos de Figma, como barra de herramientas, capas, panel, sistema de cuadrícula, teoría del color , tipografía, trabajar con imágenes , wireframes, animaciones y prototipos, y un montón más. También crearemos un proyecto del mundo real. Ahora puedes agregar en tu portafolio. Esta clase es para cualquiera que quiera aprender sobre Figma como diseñador de UI UX, o alguien que solo quiera tener alguna comprensión general del diseño de sitios web o aplicaciones independientemente de su experiencia previa, es una ventanilla única. Es la única clase que necesitarás para aprender sobre Figma. Al final de esta clase, puede esperar diseñar no solo aplicaciones móviles o sitios web, sino también trabajar en la creación de miniaturas o contenido infográfico para los manejadores de redes sociales. Gracias por echarnos un check out. Estoy súper seguro de que te va a encantar esta clase. 2. (1) Introducción a Figma: Hola a todos. Bienvenidos a la primera conferencia de nuestro curso Figma. Voy a presentarles a todos el tema Figma. Y también aprenderemos la diferencia entre nuestra UI y UX. Entonces, sin más preámbulos, comencemos con la conferencia de hoy. Entonces, ¿qué es sigma? Entonces Figma es en realidad una herramienta de diseño de colaboración en tiempo real basada en la nube. Bueno, la nube es solo un espacio virtual en Internet. Actúa como un servidor. Todos deben haber usado aplicaciones basadas en la nube como su Google Drive y esas cosas. Entonces la nube es solo un servidor virtual que está presente en Internet. Esta Figma te permite colaborar con otras personas en tiempo real mientras estás haciendo tu diseño. Así que no te confundas desde el primer paso, bien, Aprenderás todos y cada uno paso a paso. Así que no te preocupes, solo sigue el curso. Y si tienes alguna duda, siempre puedes comentar abajo abajo. Bien, entonces, ¿cuáles son algunas de las características de Figma? Entonces Figma básicamente nos da herramientas de diseño. Podemos diseñar tu proyecto móvil. Digamos que estás intentando crear una aplicación para Android. Así que antes de empezar a codificar cualquier aplicación o cualquier sitio web que estés tratando de desarrollar. Siempre tiene un front-end y back-end. Front-end básicamente significa que estás tratando enfatizar en la parte de interacción, lo que verá el usuario, lo que los clientes o tus usuarios o los clientes, veremos qué se mostrará en su pantalla. Esa es la parte frontal. Básicamente como tus artículos, tus botones, tu texto, imágenes , gráficos, tipografía, todo eso está incluido en la parte frontal. Entonces, si ustedes están familiarizados con el desarrollo web, todos deben estar sabiendo que hay un front-end y un back-end. Front-end básicamente significa que en realidad estás lidiando con las cosas del diseño, como tus miniaturas, iconos, botones, topografía, gráficos y todas esas cosas. Entonces esa es la parte frontal. Esa es la parte que verán los usuarios que son tus clientes. Entonces cualquier aplicación, cualquier sitio web tiene un front-end y back-end. El back-end se ocupa de la parte del servidor. ¿Qué pasará cuando el usuario haga clic en un botón específico? ¿Cuál es la función que necesita para ejecutar? Cuál es la funcionalidad o cuáles son las cosas que necesita mostrar, cómo se mostrará y todo eso depende de la parte del back-end. Entonces todo el front-end y back-end es para ser codificado. Ahora puedes ir a con cualquiera de los lenguajes, bien, Hay tantos lenguajes diferentes, como para tu, para tu desarrollo web, tienes tu HTML, CSS. Hay algunos de los frameworks para CSS, como tu viento de cola, CSS Bootstrap y todas esas cosas. Entonces no necesitas preocuparte por ello porque esta clase no se enfoca en todos esos diferentes componentes o frontend, solo estamos enfatizando en la parte de diseño. Entonces, antes incluso intentamos codificar el código de front-end, antes incluso intentamos desarrollar la parte frontal. Obviamente, ya sea front-end o back-end, todo tiene que ser codificado. Entonces, antes de que realmente saltemos a la parte de codificación, queremos formar realmente un diseño. Queremos formar un plano basado en el cual podamos desarrollar nuestro front-end. Entonces esa es la razón por la que la parte UI o UX entra en escena. Ahí tenemos nuestra Figma y otras herramientas de diseño con la ayuda de las cuales realmente podemos diseñar nuestro proyecto cualquier aplicación. Entonces con Figma, no solo puedes crear un proyecto móvil, sino que también puedes crear una aplicación para tablet o un proyecto de tablet. E incluso se puede diseñar cómo se vería una aplicación de escritorio o una aplicación web en una computadora portátil o una pantalla de computadora. Entonces esas son algunas de las características de Figma. Bien, otra característica es que hay una característica de prototipado de Figma. Ahora, ¿qué significa realmente la creación de prototipos? Bueno, imagina que estás creando una aplicación, ¿bien? Ahora bien, cuando intentas desarrollar la aplicación, no te gustaría simplemente tener un prototipo o algo así como, digamos, no una etapa perfecta para su despliegue, sino otra etapa de certificación, un prototipo como todavía estás lidiando con esas cosas. Aún estás, sigues probando esas cosas. Entonces ese es tu prototipo. Así que incluso en tu Figma, cuando creas tu propio diseño, puedes usar la función de prototipado de Figma para realmente mirar y ver cómo se verá exactamente mi aplicación en tiempo real. Cuando haga clic en este botón, cómo interactuará y todas esas cosas se harán en Figma. Y lo mejor de Figma es que no necesitas codificar ni una sola cosa. Todo está basado en GUI y solo necesitas hacer clic en algunas de las cosas. Y hay algunos atajos de teclado que puedes usar. Entonces todas esas cosas son muy fáciles y muy simples de seguir. Así que no te preocupes, este curso es muy fácil y te voy a explicar a todos, todos y cada uno paso a paso. Bien, otra característica de Figma es que es una herramienta de colaboración. Al igual que, tal como mencioné al principio, esa colaboración básicamente significa que puedes colaborar con tus compañeros o digamos con tus clientes. Digamos que eres un desarrollador freelance, eres un desarrollador UX freelance, ¿verdad? Entonces quieres mostrar tus ideas, tus cosas de diseño a tu cliente. Entonces, ¿cómo los vas a mostrar? ¿Simplemente conseguirás todo esto y les enviarás el archivo de video? No. Simplemente puedes compartir tu ID de inicio de sesión o más bien puedes decir que puedes simplemente compartir el enlace de tu proyecto. Pueden iniciar sesión y luego podrán ver en qué has estado trabajando. Y podrán verlo en tiempo real. Entonces digamos si dejan algunos comentarios sobre el proyecto diciendo que quieren cambiar el color de su esquema de color de piel de tu proyecto. Quieren algún estilo de fuente diferente. Ellos pueden hacer eso y lo podrás ver en tiempo real. Entonces esa es la característica más fantástica de Figma. Ahora, Figma no es solo el único taburete de diseño que está disponible. También hay otras herramientas como tu Adobe XD. Entonces surge la pregunta de que ¿por qué no estamos usando Adobe XD? Adobe, ¿una marca tan genial? Adobe tiene diferentes productos como tu Premier Pro, After Effects, Photoshop, Lightroom y todas esas cosas. Entonces, en lugar de usar ese software bastante premium y un software muy confiable, ¿por qué estamos usando este Figma? Bueno, la razón detrás de eso es que figma es completamente gratuito para usar Adobe XD. Tienes que pagar algún precio. Adobe tiene su suscripción a Creative Cloud. Tienes que pagar la cuota de suscripción mensual o anual para poder acceder a esas aplicaciones, lo contrario no podrías utilizarla. Bien, así que esa es la parte principal, principal del fémur que es de uso completamente gratuito y proporciona una herramienta colaborativa. Bien, ahora, eso viene a la colaboración parte. Digamos que estás situado en algún lugar de Estados Unidos y quieres mostrar tu proyecto y tu barriga está en algún lugar de Europa o de Sudáfrica. Entonces, ¿cómo verán tu proyecto? Simplemente puedes compartir tu enlace. Así que esa es la flexibilidad que brinda tu Figma. Ahora llegando a la parte sobre UI y UX, ¿esas cosas son iguales? ¿Hay alguna diferencia? Y si hay una diferencia, ¿cuál es la diferencia entre UI y UX? Ui básicamente significa su interfaz de usuario, mientras que UX significa experiencia de usuario. Ui se ocupa del diseño visual. Cómo se vería la aplicación o un sitio web o alguno de tus proyectos. Y con la ayuda de Figma, no solo estás tratando con la parte de diseño de aplicaciones. Incluso puedes desarrollar miniaturas para tus videos de YouTube. Incluso puedes crear infografías. Incluso puedes crear plantillas de diapositivas y todas esas cosas. Entonces con Figma, no solo puedes lidiar con la parte de la aplicación, también puedes diseñar tu contenido. Esa es la mejor parte de Figma. Entonces UI básicamente indica que vas a lidiar con los colores, el diseño, la tipografía, estilos de fuente, ¿cómo se vería el teléfono? Esa es la parte topográfica que se diseñaron. Mientras que UX básicamente significa que vas a tratar con la parte de la experiencia del usuario. Ahora, ¿cómo va a determinar eso en realidad? Ese usuario tendrá la fantástica experiencia mientras usa nuestra aplicación. Entonces definitivamente habrá algunas investigaciones de usuarios en curso. Como digamos que estás realizando una encuesta y estás preguntando tus clientes o clientes que ¿cómo te gustaría que fuera nuestra aplicación? Entonces tus clientes responderían algo así como, digamos que quiero una Interfaz de Usuario muy limpia y quiero que las cosas sean manera sencilla y muy sofisticada. No quiero ninguna animación compleja. No quiero que ninguna cosa compleja esté frente a mi pantalla. Entonces no quiero ningún término técnico. Quiero que las cosas se muestren frente a mi pantalla en términos simples y legos. Entonces eso es lo que sus usuarios investigadores. Entonces, antes de desarrollar la parte UX, necesitas tener una investigación de usuario adecuada. Tenemos que hacer énfasis en la redacción publicitaria. Entonces eso es lo que vas a encajar con el contenido de tu aplicación, ¿verdad? Entonces esa es tu parte de redacción publicitaria. Entonces tienes los flujos de trabajo que digamos si haces clic en un botón, qué otras cosas deberían pasar. Entonces ese es tu flujo de trabajo. Pero cuáles son las diferentes etapas que sucederán una vez que interactúes con los botones o tus íconos en la aplicación. Entonces ese es tu flujo de trabajo. Y también cómo interactuaría el usuario con la aplicación y qué psicología usarás para involucrar a tu audiencia, a tus clientes, a la aplicación o un sitio web tanto como sea posible. Entonces esa es tu parte de UX. Pero aunque estas son las diferencias entre UI y UX, hay algunas de las cosas que se superponen UI y UX y esa es tu wireframing. Ahora, ¿qué significa realmente el wireframing? Entonces, aunque sí tenemos una conferencia dedicada sobre wireframing, permítame darle una breve introducción sobre wireframing. Entonces antes de que en realidad, digamos que soy un cliente se te acerca y digo es que quiero hacer un sitio web de cartera. Ahora el cliente es en realidad un contador público y ha estado en esta industria durante los últimos diez años y tiene grandes clientes. ¿Bien? Ahora, si tienes que desarrollar un sitio web de cartera para este cliente, que qué contenido encajas realmente en la página en la primera página, en la página de inicio Acerca página Contáctenos página y todas esas cosas. Así que solo formar un diseño es tu parte wireframing. Bien, Luego viene la usabilidad. La usabilidad es otra similitud común entre tú y UX. Eso significa que ¿cómo usaría el usuario nuestra aplicación? Entonces eso no es solo parte de la UI, también es parte de la parte UX, luego surge la creación de prototipos como se discutió. prototipos es solo una aplicación que se ha desarrollado, aunque no en la etapa de producción final, sino en la etapa de prueba, en una característica como la que en realidad estás usando la aplicación. Entonces aunque la aplicación no está completamente lista, pero en realidad la estás probando. En realidad estás simulando de una manera que parece que la aplicación está completamente lista. Entonces eso es lo que en realidad significa la creación de prototipos. Entonces sí, eso fue todo sobre la suma de la introducción a Figma y todas esas cosas. Simplemente puedes abrir cualquiera de tus navegadores que estés usando. Prefiero Google Chrome. Simplemente puedes abrir cualquier navegador y atar figma.com. Una vez que vayas por allí, verás esta página y simplemente podrás crear tu propia cuenta. Entonces después de iniciar sesión y esto es lo que verás. Ahora, una vez que hayas llegado a esta página, solo puedes decir el nombre de tu equipo. Simplemente puedes formar una D o lo contrario puedes hacer esto más adelante. Una vez que formes un equipo, lo que sucede es que solo puedes compartir enlace de tu equipo y los miembros pueden unirse a ese grupo. Y ellos podrán ver tus proyectos que estás creando para ese grupo. Ahora bien, aunque dije que este software Figma es de uso completamente gratuito, hay algunas limitaciones al mismo. Significa que puedes tener archivos ilimitados. Como digamos que tienes algunos de tus propios activos como tus imágenes, algunos videos que quieres incrustar. Todas esas cosas son completamente ilimitadas. Puedes subir N número de archivos, pero solo puedes diseñar tres archivos y solo puedes crear un proyecto. Entonces ese es el contratiempo de usar tu plan gratuito. Aunque el plan gratuito puede parecer, ya sabes, podría no ser suficiente para que puedas utilizar todas las funciones. Pero para este curso en particular, no es necesario pagar ni un solo centavo para comenzar con Figma. Bien, así que comencemos con el plan gratuito y continuaremos en la próxima conferencia. 3. (2) Figma: Bienvenidos de nuevo al curso. En este video tutorial, voy a dar a todos una visión rápida Figma como espacio de trabajo. Y aprenderemos algunas de las cosas que tenemos en Figma. Bien, así que tan pronto como te registres y crees tu propia cuenta, se te enviará un correo electrónico de confirmación a tu correo electrónico. Así que solo ve allá y confirma que eres tú y estás tratando de crear una cuenta Figma. Una vez que haces eso, solo quedaste con todas las cosas que te incita a hacer. También intentarán llevarte a un rápido, intentarán darte un recorrido rápido a Figma, pero no necesitas preocuparte por ello. Yo hago exactamente lo mismo por aquí. Bien, entonces ahora, una vez que realmente vengas a esta Figma como página principal, verás que tienes dos opciones. Puede crear un nuevo archivo de diseño o un nuevo archivo de mermelada de higos. Ahora, ¿qué es este gran archivo jam? Así que piensa en ello como una pizarra donde haces una lluvia de ideas sobre tus ideas y exploras algunas ideas. Bien, entonces ese es tu archivo de examen. Mientras que el archivo de diseño es donde realmente intentó diseñar y crear prototipos para su aplicación. Como puedes ver en la pestaña Resultados, en esta pestaña particular del lado izquierdo, verás que tienes razones. Entonces los proyectos recientes en los que has estado trabajando, verás borradores. Entonces las cosas que no has guardado manualmente se guardarán automáticamente y verás, y las verás por aquí. Así que igual que en tu Gmail, intentas redactar un correo y no lo mandas, ¿qué pasa ahí? Se guarda automáticamente en la parte de borradores. Eso, eso es lo que hace exactamente tu Figma por aquí. Entonces por aquí verás a sus equipos. Entonces, ¿cuántos equipos has creado hasta ahora y quiénes son los miembros del equipo? ¿Qué es un proyecto de equipo en el que has estado trabajando? Entonces todas esas cosas que podrás ver por aquí. Ahora bien, ya que este es el primer video de otro, debo decir que el inicio mismo de nuestro curso, hasta ahora no he creado ningún archivo. Entonces todas esas cosas que verás por aquí, estos son los archivos que ya están creados por el equipo Figma. Y estos son solo para que puedas echar un vistazo rápido y entender cómo usar esta herramienta y estás diseñando. Así que intentemos crear un nuevo archivo de diseño. Y una vez que haga clic por aquí, verán que así es como figma tiene el aspecto del espacio de trabajo. Ahora, en realidad intentarán darte un aviso que ¿quieres hacer un rápido recorrido por Figma? Así que simplemente haz clic en estos nuevos tanques y continúa con el espacio de trabajo. Entonces en la parte superior puedes ver lo que tienes es tu barra de herramientas. Esto se llama como barra de herramientas porque por aquí tienes n número de opciones para trabajar. Ahora, además de este borrador, verán esto como sin título. Por lo que solo puedes hacer clic en los borradores. Pero más bien debería decir que solo puedes hacer click sobre este sin título y puedes renombrar el proyecto. Entonces digamos que quiero darle a esto un título como prueba. Entonces el título de mi proyecto es prueba. Y una vez que haga clic en este botón desplegable, tengo la opción de mostrar el historial de versiones. Eso quiere decir, ¿cuáles eran las otras cosas que había hecho anteriormente? Si quiero exportar esto en un formato de archivo PNG o JPEG, puedo hacerlo. Si quiero duplicar este proyecto, puedo hacerlo. Si tuviera que cambiar el nombre de esto, también puedo hacerlo. Si quiero eliminar esto, si quiero marcar como favorito este archivo, si tengo, si quiero mover este proyecto a otro equipo, o digamos otra ubicación de carpeta. Yo también puedo hacer eso. Entonces estas son todas las funcionalidades en mi barra de herramientas. En la parte superior tenemos barra de herramientas, para que puedas ver la barra de herramientas. Tengo este icono de cursor. Una vez que hago clic en este desplegable, tengo la opción de mover o escalar. Así que muévete, puedes simplemente hacer clic en algunas de las competencias que podrías tener en tu espacio de trabajo y puedes moverlas de una ubicación a otra. La parte de la escala realmente intentará escalar tu tamaño. Entonces digamos que quieres escalar 1.5 veces. Entonces puedes hacerlo con la ayuda de la báscula. Entonces tienes esto como marco, sección y rebanadora. Si hago clic en el marco, si hago clic por aquí, puede ver que se ha creado un marco para nosotros. Ahora, ¿qué nos permite hacer esto? ¿En este marco? En realidad puedes dibujar formas. De hecho, puedes dibujarlo usando la herramienta pluma. De hecho puedes agregar algunas y todas esas cosas. Entonces digamos que usando este botón de caja rectangular, tengo la capacidad de crear cualquier forma que quiera. Entonces hay algunas de las formas predefinidas que puedes crear con solo arrastrar. Entonces tienes rectángulo, tienes flecha alineada, la elipse, la estrella poligonal, e incluso puedes colocar una imagen o un video si lo deseas. Ahora puedes ver que hay algunas teclas de método abreviado que puedes presionar en tu teclado para realmente simplemente dibujar tu rectángulo. Entonces digamos que hago clic en este rectángulo y tengo que dibujar esto. Ahora digamos en lugar de dar click por aquí, si quiero dibujar una flecha, entonces, ¿qué puedo hacer en su lugar? Yo sólo puedo, déjame borrar esto. A partir de ahora. Simplemente eliminaré esto usando la clave de eliminación. Bien, solo puedo sostener mi tecla Mayús y presionaré mi botón en el teclado. Una vez que hago eso, se puede ver que la flecha ha sido seleccionada. Se puede ver que se ha seleccionado la forma de la flecha. Ahora solo puedo arrastrar esto y dibujará la forma de la flecha. ¿Bien? Entonces esto es lo que puedo hacer esto en mi marco. Entonces este es mi marco y puedes ver todas las diferentes formas que tengo en mi marco particular. Entonces en el lado izquierdo, esta parte en particular es mi panel Capas. Se puede ver que tengo diferentes capas y actualmente estamos trabajando en la página número uno. Entonces debes haber visto en muchos sitios web, tenemos página de inicio, tenemos acerca de la página, tenemos la página Contáctenos. Como de hecho, incluso en mi página web, verás mi página principal. Acerca de la página la página de contacto. Cuántos cursos tengo y todas esas cosas, todo lo que hay en mi página web. Entonces hay varias páginas. Así que así, si primero quieres diseñar la página de inicio, entonces la blanca se diseña la página Contáctenos. Entonces tal vez quieras diseñar los servicios que ofreces toda esa página. Así que simplemente puedes hacer clic en este ícono más y se creará el número de páginas para ti. Bien, así que solo puedes eliminar esto si quieres. Digamos que quieres cambiar el nombre de esta página para que digamos la página Acerca de nosotros. Entonces puedes hacer eso si quieres eliminar al paciente por tres, puedes hacerlo. Si quieres duplicar algunas de las páginas, digamos en el paciente de una, lo que sea que hayamos creado hasta ahora, quiero duplicar esto para que solo pueda duplicar y se crea una nueva página con título de página número dos. Las mismas cosas exactas que tengo en mi página número uno. Y si quiero hacer algunos cambios leves, puedo hacerlo en mi pH2. Entonces eso es lo que Figma nos permite hacer. Bien, ahora pasando a la siguiente parte, hay activos en el panel de capas. Ahora esos activos nos permiten crear algunos de los activos para que podamos usar y diferentes proyectos Sigma. Entonces digamos ahora mismo, este marco en particular tiene una maraña y una forma de flecha. Ahora digamos que quiero crear un activo de esto, aunque este activo no significa nada, bien, no sirve de nada. Ni siquiera es una parte de diseño, pero solo por el bien de ello, estoy creando un activo para poder usarlo también en mis otros proyectos. Yo puedo hacer eso. Tengo la funcionalidad para hacer, para hacer eso. Bien, así que eso es lo que nuestros activos nos permiten hacer. Ahora, en esta barra de herramientas, también tengo la herramienta pluma. Usando la herramienta pluma, lo que puedo hacer es hacer clic en un vértice, puedo dar click en los otros vértices. Puedo arrastrar esto así sucesivamente para crear un objeto. Entonces digamos que este objeto ha sido creado. Entonces esto se está formando como un triángulo. Si puedes ver un triángulo un poco, se ha formado un triángulo. Y para salir de esto, puedo, lo que puedo hacer es simplemente hacer doble clic en cualquiera de los vértices y en realidad va a formar uno. Sólo puedo hacer click en este Hecho. Y se puede ver que se ha formado una forma. Eso es lo que anexar a nos permite hacer. También tengo la capacidad de dibujar usando la mano libre, así que eso es lo que mi herramienta Lápiz nos permite hacer. Entonces digamos que estoy dibujando esto usando la herramienta lápiz. Se ha formado rectángulo, pero esta vez, no tuve que mapear realmente los vértices. Tuve que dibujarlo con la mano libre. Entonces, si tienes una tableta gráfica que perfecta, podrás usar la herramienta lápiz de manera muy eficiente. De lo contrario, usando el mouse, no es la mejor manera de dibujar una forma. En su lugar, puede usar la herramienta pluma. Bien, entonces tenemos el cuadro de texto, ¿de acuerdo? Para que puedas, lo que puedas hacer, simplemente puedes hacer click sobre este texto o simplemente puedes presionar la tecla T en tu teclado y puedes hacer click en cualquier parte del marco. Ahora, puedes escribir cualquier cosa que te gustaría dar e incluso puedes establecer algo del color a tu texto. Puedes formar el estilo de texto si tienes, digamos que quieres dar esto como, quieres formar este texto en negrita y subrayado formato. Entonces, ¿cómo puedes hacer eso? Si quieres aumentar el tamaño de esta fuente, incluso puedes hacer eso para eso enfatizar en este panel de propiedades de diseño, que está en el lado derecho. Entonces tal vez no podamos verlo por completo. Sólo dame un segundo y podrás ver este panel de propiedad de diseño completamente. Entonces ahora espero que debas poder ver este panel de propiedades de diseño. Y por aquí se puede ver que tengo la capacidad de realmente darle color a este texto. Entonces digamos que quiero darle este color como para poder darle este color rojo. Bien, tengo la capacidad centrar alinear este texto o tal vez alinear a la derecha, alinear la izquierda y todas esas cosas. Entonces tengo la capacidad de exportar todo esto en formato PNG. Si quiero hacer eso, puedo hacerlo. Por lo que en este panel de propiedades de diseño, simplemente puede seleccionar cualquiera de los elementos y puede ver todos los elementos de diseño con los que puede tratar. Entonces por aquí puedes diseñar, puedes crear prototipos, incluso puedes inspeccionar algunos de los elementos. Ahora, ¿qué significa realmente este elemento de inspección? Entonces, si has trabajado en desarrollo web, debes estar familiarizado con la parte HTML y CSS. Para que puedas ver toda la parte de diseño se hace con el CSS, con la ayuda de hojas de estilo CSS en cascada, eso es lo que significa tu CSS. Entonces por aquí, si quieres hacer esto exactamente lo mismo en tu página web, entonces puedes simplemente copiar estos estilos CSS y puedes pegarlo en tu archivo. Incluso puedes importar esto en el formato CSS. Si quieres desarrollar una aplicación iOS, entonces puedes copiar todo esto y pegarlo en tu proyecto iOS. En Android, puedes hacer eso lo mismo. Entonces, aunque no puedas conseguir completamente todo esto en tu proyecto Android o iOS, prácticamente la parte de diseño la realiza Figma. Podemos simplemente copiar el código y la mayoría de ellos, mayor parte del trabajo está hecho por todos ustedes. Esa es la característica fantástica de Figma. Y sí, eso es más o menos sobre eso. También tenemos el icono de la mano que te permite moverte de una parte a otra. Entonces digamos que tienes esta interfaz número dos, tienes este frame uno. Y veamos, también creas un fotograma más. Digamos que estás creando un marco más. Entonces ahora quieres pasar de una parte a otra. Simplemente puedes arrastrar esto usando este ícono de mano. Bien, digamos si quieres dejar algunos comentarios especiales para esta caja rectangular en particular. Así que puedes simplemente dejar por aquí una cosa común que sí, esta caja rectangular se ve genial. Y puedes simplemente ponerlo por aquí. Ahora, cuando compartes el enlace de tu proyecto Figma, puedes ver que puedes compartir el enlace. Simplemente puedes copiar este enlace y compartirlo por correo electrónico o cualquier plataforma de redes sociales. Y cuando lleguen a este proyecto, simplemente pueden hacer click sobre este y podrán ver qué comentario les ha dejado. E incluso pueden hacer cambios allá. Entonces digamos que esta es la pregunta que estoy tratando de hacer y alguna otra persona, mi otro colega o mi cliente puede aplicarla. Eso bien. El tamaño de la caja se ve genial, pero quiero cambiar el color de la forma para que puedan dejar un comentario diciendo que acaba de cambiar el color de la caja. ¿Bien? Y eso es lo que nuestro comentario nos permite hacer. Entonces esto fue solo una breve descripción de nuestra Figma y cómo todas las diferentes herramientas están ahí en Figma. ¿Qué vamos a tratar con todo este curso y todas esas cosas? Entonces en la próxima conferencia vamos a estar centrándonos solo en la barra de herramientas. Así que veremos todas y cada una de las características de nuestras ofertas de barra de herramientas e intentaremos crear algunas cosas usando las funciones de la barra de herramientas. Bien. 4. (3) Barra de herramientas: Hola a todos, bienvenidos de nuevo a otro videotutorial. En esta conferencia, nos centraremos en nuestra barra de herramientas en Figma. Entonces aunque había compartido prácticamente todo sobre la barra de herramientas, pero quedan algunas cosas. Entonces vamos a estar cubriendo en este video tutorial. Bien, así como pueden ver, este es nuestro espacio de trabajo. Y en este marco en particular, y en este marco en particular tenemos una caja rectangular, tenemos un comentario, hemos dibujado una forma usando la herramienta pluma. Hemos dibujado un rectángulo usando la herramienta lápiz, tenemos algunos textos, tenemos algunas flechas. Ahora, ¿qué pasa con este ícono de figma? ¿Qué hace? ¿Qué podemos hacer con la ayuda de este botón de acción del menú principal? Así que solo puedes volver a los archivos, archivos anteriores en los que has estado trabajando, y simplemente puedes saltar a otro archivo. Entonces este es el archivo de prueba en el que estábamos, nosotros, estábamos trabajando. Así que sólo voy a hacer doble clic sobre esto. Y este proyecto Figma se abrirá para nosotros. Si realmente quieres importar este archivo. Si quieres exportar, más bien debería decir exportar esto en forma de PNG o JPEG. Simplemente puede hacer clic en este menú desplegable del icono de figma, y simplemente puede hacer clic en este archivo y tiene la opción de exportarlo en forma de PDF también. Entonces, dependiendo del número de habitaciones que hayas creado, puedes crear el PDF. Entonces digamos que quieres exportar los marcos a formato PDF entonces. Actualmente en esta página, página uno, ¿cuántos marcos tenemos? No tenemos otros marcos. Solo tenemos un fotograma, como puedes ver por aquí, resaltado es solo el marco uno en la página dos, tenemos dos marcos, marco uno, marco dos. Entonces ahora si me gustaría exportar esto en forma de PDF, entonces si abro este PDF, verán que este PDF tiene dos páginas, página uno y la página dos, la página cuando está completamente vacía porque este marco no tiene ningún otro elemento. Ahora bien, aunque hemos creado este marco, habíamos dibujado manualmente usando el cursor. ¿Y si realmente quieres diseñar una aplicación? O digamos que quieres diseñar una aplicación móvil que sea adecuada para tu iPhone. Entonces lo que harás es simplemente hacer clic en este marco, seleccionar el marco. Y en el panel de propiedades, este panel de propiedades de diseño, permítanme simplemente desplazarme hacia el lado izquierdo. Tienes diferentes opciones para crear un marco para iPhone 14, 14, 14 plus, digamos que quiero crear un marco de iPhone 14. Entonces estas son las dimensiones exactas en las que podría querer trabajar para mi aplicación. Entonces así es como creo frame para dispositivo de hardware particular. Puedo volver a hacer clic en mis marcos. Yo puedo. Y tengo la opción de elegir cualquier dispositivo Android y teléfono Android grande, Android pequeño. Tengo la opción de elegir entre iPhone 814 y así sucesivamente. Tengo diferentes opciones para elegir entre diferentes tablets, como tu Surface Pro, iPad. Puedo elegir escritorio como MacBook Air, MacBook protein inch Pro, MacBook 816 inch Pro desktop. Y también puedo crear una presentación. Entonces digamos que voy a crear una presentación de diapositivas de 16 es 29 ratio, así puedo hacer eso también. Incluso puedo crear diapositivas de cuatro es 234 por tres proporción. Puedo crear una aplicación o un diseño para mi smartwatch. Incluso puedo crear el tamaño de papel, Digamos tamaño A4, tamaño A5 y todas esas cosas. Si quiero crear una imagen para mis publicaciones de Instagram y puedo dar click en esta y va a crear un marco para el tamaño exacto de los datos. Entonces esta Figma también nos permite crear una publicación en Twitter, encabezado de Twitter y todas esas cosas. Figma tiene tan flexible que nos permite crear marcos para diferentes cosas en las que podríamos querer trabajar. Entonces como pueden ver, este es mi marco. También tengo la opción de rebanar. Entonces, ¿qué significa esto en realidad? Entonces digamos que en este marco en particular, uno, frame, uno, quiero realmente cortar alguna porción de él. Así que sólo puedo hacer clic en esta rebanada y puedo arrastrar la porción de la caja rectangular que quiero exportarla por separado. Así que una vez que lo haga, sólo puedo hacer clic por aquí y puedo hacer clic en el Exportar. Ahora, puedo exportar esto en forma de JPG, SVG. Svg es básicamente tu formato de icono, SVG. Si tú, si exportas esto en formato SVG, lo que básicamente significa que puedes usar esto en forma de icono fab. Puedes usar esto como un ícono para tu sitio web. Entonces eso es lo que realmente significa tu SVG. Incluso puedes exportar esto en los formatos PDF. Si exporto esto en formato PDF, qué va a hacer, en realidad lo exportará. Y tratemos de exportar esto en formato PNG. Y una vez que haga esto, y si abro, verán que una porción de mi marco ha sido recortada, y ahora es esta imagen en particular. ¿Bien? Entonces así es como cortas algunas de las cosas que tienes la opción de moverte y escalar también. Digamos que quieres escalar esta forma, o digamos que en realidad prefiero debería decir, voy a crear una. Digamos una elipse. Dibujaré una elipse. Fresco. Ahora digamos que quiero agrandar esta forma de círculo. Entonces, si hago clic en este vértice en particular y si quiero expandir esto, puedo hacerlo. Pero se puede ver que la forma en sí también está cambiando, pero no quiero que eso suceda. Entonces, lo que puedo hacer en cambio es simplemente sostener mi tecla Mayús. Y ahora. Incluso si muevo mi cursor de arriba a abajo, se puede ver que no está cambiando la forma con la ayuda de la tecla mayúscula. Se puede ver aunque, aunque mueva mi cursor de arriba a abajo, de izquierda a derecha, solo está tratando de expandir mi forma. No es tratar de cambiar la propiedad de mi forma. Bien, eso es lo que nos permite hacer nuestra tecla Shift. Puedes expandir fácilmente tu cualquier forma, no solo tu elipse, sino incluso tu rectángulo o tu forma personalizada. Puedes ampliar esto con la ayuda de la tecla Mayús. Así que solo mantén tu tecla Mayús y haz clic en cualquiera de los vértices y podrás expandirlo. Bien, así que esa es tu forma que quizás quieras crear. También puedes crear una estrella. Entonces digamos que quieres crear una estrella. Entonces así como se puede ver, mientras dibujo la estrella, se puede ver que la forma misma también está cambiando. Entonces ahora mismo los bordes son como largos, pero el ancho es muy pequeño, Pero no quiero que eso suceda. Entonces, lo que puedo hacer en cambio es simplemente sostener mi tecla Mayús y puedo expandir mi forma de estrella. Fresco. También contamos con diferentes componentes. Podemos descargar algunos plug-ins. Ahora, ¿qué significa realmente este plugin? Entonces, si has trabajado en WordPress, es posible que estés al tanto de los plugins. Así que los plugins son básicamente algunas funcionalidades que son auditadas, desarrolladas por algunos desarrolladores. Y ahora están disponibles gratuitamente para correr. Ahora una vez que instalas esos plugins en tu proyecto particular, la mayor parte del trabajo lo realiza el propio plug-in. No tienes que preocuparte por cómo vas a hacer esas cosas manualmente. Así que al igual que puedes ver sobre tu icono plano, ¿qué hará este plugin? Este plugin realmente te ayudará a importar algunos de los iconos directamente desde este plano que puedo enchufar. Así que no tienes que ir a otro sitio, buscar los plugins, descargarlos, y subir por aquí. Simplemente puedes usar directamente este plugin. Una vez que instales este plugin para tu proyecto, solo podrás buscar el ícono que buscas y que será importado directamente en tu proyecto. Entonces esa es la característica genial de Figma, que tienes la habilidad y la gran variedad de elegir entre diferentes complementos. No solo que incluso puedes exportar tu forma de diseño de Jeff o un formato de video. Entonces normalmente puedes ver, puedes exportar tu proyecto Figma un formato PDF o en formato PNG o JPEG, básicamente solo un formato estático, no en un formato dinámico. Entonces con la ayuda de estos diferentes complementos, incluso puedes exportar esto en formato de video. Bien, entonces tenemos diferentes plug-ins y cosas para que pueda buscar y descargar el complemento en función de sus requisitos. No es nada rígido o fijo que tengas que usar este plugin en particular. También tenemos diferentes widgets que puedes usar. También tenemos la capacidad de integrar nuestra Jira y Asana. Estas dos son las herramientas de gestión de proyectos que te permitirán lidiar con tus flujos de trabajo y tu equipo. Bien, entonces estos son todos los widgets que tenemos. Entonces sí, eso es más o menos sobre eso. Eso es lo que tenemos. De lo contrario, el resto de las cosas como tu texto, tus comentarios, diferentes formas, el marco, la capacidad de movimiento para mover diferentes entre diferentes objetos y tus marcos ya se ha cubierto en las conferencias anteriores. Así que no tengo que iterar a través de esas cosas una y otra vez. Bien, así que eso fue todo de mi parte para esta conferencia en particular. Los veré en mi próxima conferencia. Cuídate. 5. (4) Panel de capas: Hola a todos, bienvenidos de nuevo al video. En esta videoconferencia, estaremos buscando en el panel de capas. Entonces, aunque ya hemos cubierto sobre el panel Capas anteriormente, nos quedan algunas cosas por cubrir. Entonces como pueden ver en esta página en particular, número dos, tenemos diferentes marcos, ¿bien? Y en todos y cada uno de los fotogramas tenemos diferentes formas y vectores que hemos creado, ¿verdad? Y por cierto, este vector no es más que la forma que creaste usando la herramienta pluma. Entonces eso es lo que es tu vector. Ahora, digamos que si realmente quieres cambiar el nombre de algunas de tus formas, digamos que en lugar de elipse una, quieres darle este título ya que puedes simplemente hacer clic por aquí o por aquí. Y puedes hacer doble clic sobre este objeto en particular y simplemente puedes dar cualquier nombre. Digamos que voy a dar este título como círculo, círculo uno. En lugar de elipse uno, me gustaría darnos uno en un círculo. ¿Bien? Y así es como puedo renombrar cualquiera de mis formas, no solo a la forma, a cualquiera de las cosas que podrías haber creado dentro de tu espacio de trabajo Figma. Ahora bien, y si quieres eliminar algunas de las cosas que tienes en tu, ya sabes, tu espacio de trabajo. Digamos que quieres eliminar el fotograma tres. También quieres eliminar este marco del iPhone 14. ¿Cómo puedes hacer eso? Bueno, lo haces manualmente, como hacer clic con el botón derecho en este marco en particular y luego solo buscar una eliminación o tal vez simplemente hacer clic en el botón de eliminar. Puedes hacer eso, pero hay una manera más corta de hacerlo. Simplemente puede mantener presionada la tecla Mayús y puede seleccionar varias cosas, y simplemente puede eliminar todo su fotograma. Para que veas que todas estas cosas han sido borradas hasta el momento. Fresco. Incluso este marco será eliminado, ¿verdad? Entonces eso es lo que nos queda, solo fotograma número uno. Ahora puedes ver ahora mismo estamos en el Zoom. El porcentaje de Zoom es 78. Digamos que quiero hacer zoom a alrededor de las 01:25. Así que solo puedo sostener mi botón de Control y puedo usar la rueda de desplazamiento del mouse. Usando la rueda de desplazamiento del mouse, puedes acercar y alejar el zoom, pero tienes que mantener presionado el botón Control. Si mantengo pulsado mi tecla Mayús y si uso mi botón de desplazamiento o mi, ya sabes, mi rueda de desplazamiento del mouse para alternar realmente entre la mano izquierda, lado derecho de mi espacio de trabajo. Yo puedo hacer eso. Entonces, en lugar de usar realmente manualmente mi cursor y mi mouse, en realidad moviéndose del lado izquierdo al lado derecho, navegando hacia la luz izquierda, derecha. Solo puedo sostener mi tecla Mayús y puedo usar la rueda de desplazamiento del mouse. Bien, entonces esas son algunas de las cosas. Ahora incluso puedo agrupar algunas de estas cosas. Como solo puedo usar mi cursor, asegúrate de que has seleccionado este botón de movimiento. Y puedes seleccionar todo. Y ahora usando esto, puedes simplemente agruparlos usando el Control G. Así que ahora todo se forma bajo un solo grupo. Ahora puedo moverlos. Se puede ver cada uno y todo se puede mover. Todo esto se puede mover. Digamos que creo otro marco. Bien, puedo crear otro marco. Como, digamos, quiero crear un marco de escritorio. ¿Bien? Entonces para, digamos MacBook Pro de 14 pulgadas. Así se puede ver MacBook Pro 14 pulgadas marco ha sido creado para mí. Yo sólo puedo arrastrar y puedo colocarlo por aquí o de lo contrario lo que puedo hacer es simplemente hacer una copia duplicada de esto y puedo pegarlo por ahí. Para ello, solo puedo sostener el Control y puedo dar click en D o Control D, y eso será replicado por aquí. Bien, no tengo que hacer eso. Control C y control V. Solo puedo hacer Control D y puedo arrastrar la copia duplicada del mismo. Bien, para que puedan ver que tengo dos marcos en mi página número dos, y también puedo alternar entre diferentes páginas. Entonces tengo diferentes páginas, pero quiero eliminar otras páginas. Entonces, ¿qué voy a hacer? Simplemente puedo hacer clic por aquí y puedo hacer clic en el eliminar, o simplemente puedo hacer clic en este clic derecho y eliminarlo. ¿Bien? Entonces esta marca básicamente representa que estás en página seis o de lo contrario incluso puedes ver por aquí que estás en la página seis. Bien, solo eliminaré esto. Y ahora estamos en página a página dos. Tenemos el marco del MacBook Pro de 14 pulgadas y el marco uno que en realidad hemos dibujado manualmente. Bien, Ahora, ¿qué pasa con los activos en el panel de capas? ¿Y qué pasa con eso? ¿Cómo podemos hacer uso de ella? Digamos, en realidad quiero crear un activo de, digamos un auto. Debiste haber visto realmente un auto en un sitio web. Si no eres consciente de ello, intentemos crear una tarjeta sencilla. Bien, lo que voy a hacer es dejarme simplemente hacer clic en este grupo también y puedo eliminar este. Bien. Ahora lo que voy a hacer, voy a crear una forma rectangular con el color como el blanco. Vamos a darle esto como color blanco. Y voy a dar esto como más bien déjame sacar esto de mi marco, lo contrario no podrás ver lo que estoy haciendo. Bien, entonces esta caja se ha sacado de mi marco. Ahora voy a dar este radio fronterizo. Ahora, sólo voy a hacer clic en esto. Tengo la capacidad de dar border-radius. Entonces este es mi radio de esquina. Ahora soy del fondo de desarrollo web y me gusta llamar a esto radio fronterizo de Estados Unidos. Incluso se puede llamar a este radio de esquina S en Figma, nosotros llamamos a este radio de esquina S. Entonces, si digo, quiero llamarlo un radio de unas diez. Entonces digamos 20. A cero. Entonces verás que hay algunos bordes ligeros a doblados. Los bordes no son afilados. Esto es posible usando el radio de esquina, incluso puedo cambiar esto a, digamos 50. 50 es lo que he seleccionado. Y sí, eso es más o menos ****. Y ahora lo que voy a hacer, voy a crear uno. Voy a crear una elipse. ¿Bien? Voy a crear un cuadro de texto. Puedo dar el nombre como lo hago. Quiero que el color de mi texto sea negro. Así que vamos a conseguir esto como Black. Joe. Los bloggs también aumentan el tamaño del texto. Entonces en vez de solo, Bueno, vamos a darle esto como 24. Espero que sea visible para cuatro cualquiera. Vamos a agrandar a 36. Sí. Entonces el nombre de esta persona es Joe Bloggs. Y lo que voy a hacer, lo siguiente que queremos hacer es simplemente decir algo así como desarrollador web. Bien, necesitamos cambiar las estadísticas de texto, color y tamaño. Sí. Así desarrollador web, freelancer y portales. Podemos ver ingeniero de software. Ingeniero de software. Bien. Ahora, sólo puedo seleccionar todo esto. Puedo hacer uso de los textos de la línea central. Bien, puedo agrandar el tamaño del cuadro de texto para que aparezca muy bien. Sólo puedo hacer click por aquí. Puedo agrandar esto. ¿Correcto? Sí, eso es más o menos sobre eso. Ahora lo que voy a hacer, voy a hacer uso del plugin Unsplash para que pueda importar una imagen. En la sección de plugins, puedo buscar Unsplash, y puedo hacer clic en este botón Ejecutar. Una vez que haga eso, tomará algún tiempo ejecutar este complemento en particular para usted. Y puedes buscar a cualquier persona. Digamos que quieres un ingeniero? ¿Ingeniero? Yo sólo busco. Sí. Simplemente voy a hacer clic en esta imagen. Y puedo arrastrarlo hasta aquí. Entonces esta imagen es demasiado grande, pero la encajaremos de acuerdo con nuestro, um, ya sabes, se puede ver una vez que la arrastre dentro de mi elipse, en realidad había redimensionado en consecuencia. Bien, así es como se ve mi tarjeta. Ahora lo que puedo hacer es simplemente seleccionar todo esto. Puedo seleccionar todo esto. Y lo que puedo hacer, puedo agruparlos usando la tecla de método abreviado Control G. Y puedo usar el control los diez K para formar realmente un activo. Ahora bien, este grupo dos es ahora mi activo. O bien lo que puedas hacer, puedes seleccionar todo este grupo y tienes la opción de crear un componente. Así que solo puedes crear un componente y ahora se ha creado un activo para nosotros. Así que solo puedes ir a esta parte de activos y puedes importar este activo dentro de tu MacBook Pro de 14 pulgadas o cualquier otro marco o cualquier página que te gustaría usar, digamos de la página uno a la página Acerca de Nosotros me gustaría importar ese activo. Entonces lo que voy a hacer por aquí, solo voy a crear un nuevo marco, digamos, de mi iPhone Pro. Y ahora me gustaría traer mi ácido. Entonces ahora se puede ver que se ha planteado ese activo , ¿correcto? Digamos que este marco tiene un fondo o puedo importar esto. Se puede ver que es exactamente de la misma manera. Incluso las dimensiones son exactamente las mismas. 5.7 por 616. Si vuelvo a mi página dos, supongo. Sí. Entonces por aquí también tenemos 5.7 por 616. Así que ese es mi ancho y alto. Entonces estas son todas las cosas que pude hacer usando el panel de capas y la barra de herramientas y todas esas cosas. 6. (5) alineación y distribución en Figma: Hola a todos, bienvenidos de nuevo a otro video. En este video tutorial, vamos a estar aprendiendo sobre alineaciones y distribución en Figma. Entonces como pueden ver frente a mi pantalla, he creado un marco dentro del cual tengo una caja de enredos. Ahora, puedes ver tan pronto como seleccione mi caja de enredos en el panel de propiedades de diseño, tengo la opción de alinear realmente mi caja. Entonces puedo alinearlo a la izquierda. O puedo alinearlo a la derecha, o incluso puedo alinearlo al centro. Ahora, ¿qué pasa si elijo esta izquierda alineada? Así que en cuanto hago clic en él, lo ha alineado hacia el lado izquierdo, más a la izquierda. ves, ahora si lo arrastro hacia arriba, puedes ver que es posible, aunque incluso puedo colocarlo en algún lugar intermedio, puedo hacerlo. Y en cuanto hago clic en el botón Alinear a la izquierda, nuevamente, lo ha alineado al lado izquierdo. Otra vez. Ahora bien, esto está sucediendo con respecto al eje x. Como puede ver, está sucediendo con respecto al eje x, ¿correcto? Ahora, ¿y si realmente quiero alinear esta caja en particular para, digamos, alinear centros horizontales Ahora lo que sucede en este caso, en realidad es, en realidad está alineando nuestra caja en la posición central con respecto al eje x. De igual manera, si quiero alinearlo a la derecha, lo puedo hacer. Como pueden ver, una vez que haga clic por aquí, no la tiene alineada a la derecha. Si hago clic en este botón que dice que alineado a la parte superior, ahora está alineando mi elemento en el lado más derecho. Ahora, ¿por qué es eso? Es porque ya lo hemos seleccionado. Queremos alinearlo a la derecha. Y si quiero que mi caja esté en la posición más alta, pero no en el lado más derecho, sino en la mayor parte central. Para que pueda seleccionar el centro. Y ahora puedes ver que también es la línea central, pero también está en la posición más alta. Entonces esto está sucediendo con respecto al eje y. La alineación a la parte superior está ocurriendo con respecto al eje y y al eje x. Ahora que pasa si selecciono alinear centros verticales. Entonces es alinearse con respecto al eje y, no al eje x. Entonces aunque lo ponga de esta manera, digamos que lo estoy colocando en algún lugar por aquí. Ahora bien, si hago esto y se puede ver que lo está alineando al centro con respecto al eje y. Entonces incluso haciendo el eje x, mis cajas hacia el lado izquierdo, lo ha alineado al centro la mayor parte con respecto al eje y? Correcto. De igual manera, tengo otras opciones para alinearlo al fondo también. Eso significa que se va a unir a los ceros y al eje y, ¿Correcto? Incluso puedo alinearlo a lo contrario como digamos que quiero que esté en el lado más derecho, pero también en la parte inferior. Si quiero en la parte superior. Y quiero que sea Irlanda, también puedo hacerlo. Entonces estas son algunas de las cosas que quería mostrarles a todas. ¿Bien? Entonces ese era un elemento individual. Ahora, ¿qué pasa cuando tenemos un grupo de elementos? Digamos que tengo esta caja y una caja más pequeña también. ¿Y si estoy tratando ¿Y si intento agruparlos? No exactamente tratando de agruparlos con la ayuda de control G. Pero en cambio, si solo puedo seleccionar esto con la ayuda de este botón de movimiento, en realidad puedo seleccionarlos. Ahora bien, si traté de alinear esto al lado más a la izquierda, entonces se puede ver que mi imagen ya se ha ido. Mi caja rectangular ya se ha ido, pero no ha ido a ningún lado. Está justo atrás o se puede decir que está justo en el lado más a la izquierda con respecto a mi elemento padre. Entonces, una vez que intentas agrupar algunos de los elementos, lo que sucede es que Figma entiende automáticamente que el elemento más pequeño, la forma más pequeña es el elemento hijo, mientras que el elemento que está en la forma más grande cuando el tamaño más grande es tu elemento padre. De igual manera, también tenemos hermanos, lo que significa que digamos que yo también creo, déjame crear una caja más. Lo que puedo hacer en cambio es simplemente intentar hacer este Control D. Una vez que haga eso, puedo arrastrar. Y ahora se ha encontrado un elemento hermano. Entonces ambos están actuando como hermanos, mientras que padre de estas dos cajas es mi caja rectangular grande. Ahora bien, si trato de alinearlos, si tratara de seleccionar todo esto y si trato de alinearlos a la izquierda, puedes ver tanto mis casillas, esta caja como esta caja ahora se han alineado al lado más a la izquierda con respecto a mi eje x. Es porque mi padre está sucediendo con respecto a mi elemento padre. Si intento seleccionar de nuevo todo esto, ahora si intenté alinearlo al lado más derecho, entonces ¿qué pasa en ese caso? Se puede ver que se está alineando con respecto a mi elemento padre, no lo que en realidad estaba esperando. Esperaba que este Euro, mis elementos hermanos lo alinearían al lado más derecho con respecto al marco. Pero ahora está sucediendo con respecto a mi elemento padre porque ahora están bajo esa jerarquía. ¿Bien? Si quiero alinearlos en el universo, esta horizontal se centra, entonces se puede ver que está alineando en el centro. Incluso puedo cambiar el color para que veas que donde exactamente mis cajas. Entonces puedo darle esto como color rojo, incluso esto como el mismo color rojo. Ahora podrás ver que ahora ambos están siendo alineados en el centro en su mayor parte. Correcto. De igual manera, tengo este texto Figma dentro de mi caja rectangular. Ahora si trato de seleccionar esto y si quiero alinearlos, digamos que quiero alinear mi texto Figma en la parte inferior. Mi caja no se mueve a ningún otro lado. Las cajas en la misma posición exacta. Lo que se mueve es mi cuadro de texto, mi elemento de texto. ¿Verdad? Ahora, se ha alineado a la mayor parte inferior. Si quiero alinearlo al centro con respecto al eje y, puedo seleccionar este elemento en particular si quiero que esté en la parte superior con respecto a la y, puedo seleccionar este. Si quiero que esté alineado a la derecha, entonces puedes ver que está sucediendo con respecto a x Así que cuando intentas alinearlo a la izquierda o a la derecha, sucederá con respecto al eje x, pero quieres intentar alinear tu parte superior o inferior. Puede suceder en ambos sentidos, XOR y. ¿ Bien? Entonces esto es lo que hace tu elemento padre e hijo, y por eso es importante para nosotros entender cómo se forman realmente las capas, cómo se forma la jerarquía. ¿Bien? A pesar de que no has formado un grupo por aquí, estás tratando de alinearlos en un formato de grupo, pero no es un grupo. Acabas de seleccionar todo esto. Y Figma entiende automáticamente que esto ahora ha formado un grupo. Déjame darte otro ejemplo. En mi marco, ¿ tengo diferentes cajas? Se puede ver todo al tamaño de mis cajas exactamente igual. La alineación es bastante diferente. Y si quiero alinearlos y agruparlos tal manera que se forme como un teclado numérico. Ya sabes cómo es la estructura de nuestro teclado numérico. Entonces lo que puedo hacer en cambio es simplemente arrastrar todo esto y puedo seleccionar todos estos elementos. Ahora se puede ver en la parte inferior derecha, una vez que mueva el cursor por aquí, tengo la opción de alinear realmente mis casillas de tal manera que se forme como un teclado numérico. O la estructura de la misma será tal que se alineará con un espaciado adecuado, una alineación adecuada y cosas así. Así que una vez que haga clic por allá, se puede ver la primera caja, la casilla número uno. Se puede ver que ahora es de tal manera que ahora pertenece al lado más a la izquierda con respecto al eje x y en la posición más alta con respecto al eje y. El segundo cuadro está ahora en la posición más alta, pero está en el centro alineado con respecto al eje x, no en el eje y sino en el eje x. Mientras que este elemento está alineado en el centro con respecto al eje y y también al átomo central con respecto al eje x. Entonces así fue como fue capaz de hacer eso. Y esta cosa en particular que hacía hace un momento no era más que la capacidad de ordenar. Se puede ver que también tenemos una tecla de método abreviado para hacer eso. Puedes mantener tus teclas de control Alt, Shift y D para ordenarlas realmente. De lo contrario, si quieres que se distribuyan, espaciado horizontal, puedes ver así es como se verá si quieres que tengan un espaciado vertical. Así es como se verá ¿verdad? Ahora. A pesar de que vamos a cubrir sobre las cuadrículas y toda esa sección más adelante. Se puede ver que tenemos algunos reflejos rosados. ¿Qué hace esto y cómo nos va a ayudar? Ahora digamos que tengo este espacio rosa, el espacio que queda entre estas dos cajas. Si amplío esto, entonces verán la misma cantidad de espacio, que es el valor a 08, queda entre mi casilla uno y la casilla dos. De manera similar entre la caja uno, caja tres, la caja cuatro y la caja phi y así sucesivamente. Desde que dejó algunos exactamente un espacio entero, puedo hacer eso con horizontal también. Ya ves puedo dejar exactamente el mismo espacio que quiero que tengan. ¿Bien? Incluso puedo, ya sabes, escoger algunas cajas particulares que no quiero que se alineen. Sólo puedo sostener esa caja en particular y puedo cambiar la alineación de la misma. Entonces sí, eso es más o menos sobre eso, sobre tus alineaciones y distribución. Entonces, una cosa a recordar es que Figma siempre intentará alinear la capa con su elemento padre. Podría ser tu grupo, podría ser un frame o conteniendo el frame del componente. Entonces eso es lo que hay que recordar. Y con base en este conocimiento, podrás crear hermosos diseños para tu sitio web o aplicaciones. 7. (6) Sistema de rejilla en Figma: Hola a todos, bienvenidos de nuevo a otro video. En este video tutorial, estaremos aprendiendo sobre el sistema grid en Figma. Entonces todos los chicos que están familiarizados con el desarrollo web, todos deben estar conociendo los márgenes flexbox, el padding, el diseño de cuadrícula en aspectos de desarrollo web, porque hemos aprendido en el CSS, aunque no hayas visto mi curso, estoy bastante seguro de que cualquiera del curso o clase en la que debes estar inscrito con respecto al desarrollo web, debes tener aprendió sobre su sistema de red. Así que el sistema grid prácticamente permanece igual en Figma también. Entonces, ¿qué significa eso y por qué lo usamos? Así que básicamente utilizamos el sistema grid fin de hacer nuestra aplicación, o mejor dicho, debería decir, sitio web y aplicación aplicación Android no sería tanto receptiva. El sitio web definitivamente tiene que ser receptivo. Responsivo básicamente significa que, digamos que este portátil en particular que estoy usando actualmente tiene 15.6 "de pantalla. ¿Y si este sitio web está intentando acceder por un dispositivo móvil? Ahora, el dispositivo móvil generalmente no tiene pantallas más grandes, ¿correcto? Generalmente se encuentran en la proporción de seis a nueve. Y el tamaño del dispositivo es bastante pequeño en comparación con las pantallas de tu portátil, correcto. Entonces por ahí, ¿cómo se vería tu sitio web? Bueno, algunas de las porciones se cortarán o solo se mostrarán algunas cosas y algunas cosas se ocultarán. ¿Qué pasará en ese caso? Generalmente, si solo abres tu teléfono y buscas alguno de los sitios web, ¿ves todas estas cosas? Sí, claro que haces todas estas cosas. Bien. Eso es porque el sitio web al que estás accediendo es receptivo. Entonces cualquier sitio web que estés tratando de construir o incluso acceder tiene que ser responsive porque en la fecha de hoy, hay tantos dispositivos diferentes, no solo tus smartphones, sino que tenemos tus tablets , tenemos laptops, tenemos escritorios, tenemos smartwatches, tenemos celulares. Por lo que estos diferentes dispositivos tienen diferentes pantallas y según ese sitio web debe ser debe acomodar el contenido acuerdo al tamaño del dispositivo. Entonces por esa razón, tenemos el sistema grid. Con la ayuda del sistema de cuadrícula, comprenderá que cómo puedo cambiar el tamaño de mis elementos de mi página web para que se ajuste perfectamente a ese tamaño particular del dispositivo. Entonces, como pueden ver, he creado un marco que está fuera MacBook de 16 pulgadas MacBook Pro de 16 pulgadas de tamaño. Y asegúrate de haber habilitado estos diseños de cuadrícula. Solo asegúrate de que puedes ver las cuadrículas de diseño. De lo contrario, aunque podrías haber seleccionado las cuadrículas, pero es posible que no puedas verla solo porque has ocultado esta parte. Así que solo asegúrate de haber seleccionado esta cosa. Así que simplemente haz clic en este ícono más y podrás ver que se ha formado la cuadrícula. Ahora bien, esta cuadrícula está en columna y fila sabia. ¿Y si solo quieres ver las columnas, la cuadrícula de pilares? Por lo que ahora solo podrás ver las columnas. Ahora el espaciado entre estas dos columnas, esta columna y esta columna, el espacio que tienes, el blanco que tienes se llama como Godot. El canalón es el espacio entre tus columnas o incluso filas. Si quiero mostrar en formato de fila, también puedes hacerlo. ¿Y si quieres dejar algo de espacio partir de tu marco? Cuando tu columna realmente comienza, realmente comienza una fila, ese es tu margen. Entonces si digo que el margen tiene que ser de unos 50 pixeles. Todo por aquí, margen o tu radio fronterizo, tu radio de esquina, el tamaño de la caja, y todo eso está todo en el formato de píxeles. Hay diferentes unidades como tus píxeles. En CSS, tenemos diferentes unidades como tus píxeles. Tenemos, tenemos EM RAM, tenemos porcentaje sabio. Entonces en Figma, para simplificar las cosas, sólo tenemos suficiente formato de píxeles. Así que asegúrate de que sea lo que estés escribiendo, tienes unidad de píxeles en la mina. ¿Bien? Entonces, si entro 50, para que veas que queda algo de espacio, bien, ahora, si realmente quiero ajustar también el tamaño de la canaleta, puedo hacerlo. También. Digamos que quiero que el tamaño de la canaleta sea de 30 píxeles, entonces se puede ver que el tamaño de la columna ahora se ha disminuido. Si quiero que el recuento de columnas se incremente a, digamos diez, entonces se puede ver que no tiene sentido. Ahora ha cabido diez columnas diferentes dentro de nuestro marco. Ahora con la ayuda de esta disposición de tus columnas, lo que puedes hacer, puedes organizar tus elementos tal manera que deje algún espacio especificado entre estos elementos. Digamos que si creo una caja rectangular por aquí, ¿bien? Y si hago lo mismo por aquí, se puede ver que está dejando 42 pixeles de espacio entre estas distintas cajas. ¿Bien? Así que esa es mi barra espaciadora si realmente quieres. Y por cierto, si puedes ver, si selecciono mi caja rectangular, verás en la sección húmeda, enfocarte en el panel de propiedades de diseño. Dentro de este ancho, W significa esto, h significa altura. Esta es la dimensión en el formato de píxeles, bien, 124 por 78. Y esta posición x e y dice que quedan 62 pixeles de espacio a partir de mi fotograma. Si trato de mover esta caja hacia mi, esto más bien debería decir eje x, entonces se puede ver que el valor del eje x disminuye a 13. Inicialmente estaba en algún lugar alrededor de 62, ahora es alrededor de 13. Bien, vamos ahora alrededor de las 13. Si me muevo esto hacia arriba, entonces se puede ver el valor de mi Y cambia. Entonces este espacio, 47 es el espacio de la pastilla superior donde realmente comienza mi caja. Entonces esa es mi posición Y y esta es mi posición x. ¿Bien? Entonces así es como podrás crear un diseño responsive. Si quieres realmente averiguar cuánto espacio ha quedado de aquí, de este punto a este punto. De este punto a este punto, se puede hacer uso de los gobernantes. Así que solo vuelve a por aquí y selecciona gobernantes. También tiene una tecla de método abreviado que es Shift R para habilitar reglas dentro de su proyecto. Entonces, ¿ahora qué voy a hacer? En realidad puedo, en realidad puedo crear el centro. Puedo hacer clic en todo este marco y puedo traer mi regla. Así se puede ver regla ahora está colocando, se ha colocado por aquí. Entonces ahora si hago clic por aquí, pueden ver 62 es la posición de mi y. y si muevo mi regla, si muevo mi regla, verán que también mostrará el valor 47. Déjame volver a hacer clic en mi regla. Por qué no muestra la posición del eje x. Entonces, si realmente quiero traer una regla que medirá desde el eje x o la forma horizontal. Sólo voy a necesitar arrastrar desde arriba hasta donde quiero que esté mi gobernante. Entonces se puede ver que ahora está en esta posición en particular. ¿Bien? Entonces esto es lo que tus gobernantes te permitirán hacer. Entonces eso es todo. Y ¿ cuáles son las cosas que nos quedan? Por cierto, si ustedes quieren realmente echar un vistazo a todas las diferentes teclas de método abreviado que tenemos para Figma. Simplemente puedes hacer click por aquí y puedes ir a ayudar a una cuenta y simplemente puedes hacer clic en estos atajos de teclado o de lo contrario lo que puedas hacer, solo puedes mantener presionado Control Shift y el botón de signo de interrogación. Una vez que hagas clic por allí, encontrarás todas las diferentes teclas de método abreviado para acercar, para navegar entre diferentes herramientas, para seleccionar algunos de los elementos y todas esas cosas. Así que solo puedes ver todas estas diferentes teclas de método abreviado que tienes en Figma. 8. (7) Teoría de colores: Bien chicos, bienvenidos de nuevo a otro video. En esta lección en video, voy a tratar explicar todo sobre la teoría del color. Y traté de explicar toda la información crítica sin que sea muy complicada para todos ustedes. Ahora cuando se trata de la teoría del color, hay mucha información por ahí en Internet. Si has trabajado con algún tipo de trabajo de diseño antes, entonces probablemente estés familiarizado con los conceptos básicos de la teoría del color. Pero si no lo estás, a lo mejor solo necesitas un poco de refresco. Entonces, sin perder el tiempo, vamos a ver cómo va. Entonces, antes que nada, veamos algunos de los tipos de colores. El primero es tu color primario. Ahora el color primario involucra tus colores rojo, amarillo y azul. Al mezclar estos colores, obtenemos nuestros colores secundarios, que son el verde, que obtenemos cuando mezclas azul y amarillo, obtenemos naranja. Cuando mezclamos amarillo y rojo, y obtenemos violeta o morado cuando mezclamos azul y rojo. Ahora, al mezclar tus colores primarios y secundarios, obtienes los colores terciarios. Cuando mezclas azul con verde, obtienes azul-verde. Cuando mezclas verde y amarillo, obtienes un verde amarillo. El verde es en realidad tu color secundario, mientras que el amarillo es un color primario. Entonces cuando combinas ambos colores, obtienes un terciario, que es de color amarillo, verde. Veamos algunas de las terminologías de color en Figma. Así que sólo voy a subirme a mi Figma. Ahora voy a crear una caja rectangular aproximadamente del tamaño. Y voy a explicar sobre EU. Entonces, ¿cuál es la Q de la que debes haber escuchado tantas veces cuando podrías estar usando herramientas de edición de fotos como tu Lightroom o Canva Entonces u es solo tu color cuando eliges el color de aquí, este es tu matiz. Usa solo un color. Entonces, si seleccionas este cursor, lo apuntas hacia el lado más a la izquierda. Se va a decir que tienes la posibilidad de elegir entre diferentes tonos de color rojo. Entonces la forma más pura de cualquier color es básicamente un tú. ¿Bien? Entonces si arrastre mi cursor de este lado a tal vez digamos este lado. Entonces voy a conseguir un color azul saturado adecuado. Si arrastro esto hacia este lado, me voy a poner verde. Si arrastro esto hacia este lado, voy a conseguir un color rosa o morado, ¿ verdad? Entonces esa es mi u Hablemos de tintes, sombras y tonos. Ahora, ¿qué pasa con las decenas? Bien, imaginemos que el color de esta forma en particular es sobre el azul. ¿Bien? Ahora voy a crear exactamente una misma réplica de caja de esta caja con un color blanco, ¿verdad? Color blanco con opacidad de alrededor del 40 por ciento. Entonces acabo de modificar la opacidad presionando el botón F4 en mi teclado. Y ahora se puede ver que la opacidad de mi forma se ha cambiado al 40%. ¿Bien? Ahora bien, si muevo esta forma sobre esta forma, se puede ver que el color de la caja ahora se ha cambiado a un color azul claro, ¿verdad? Entonces diez es básicamente cuando le agregas un blanco a un color específico, ese es tu tendón. Bien, déjame hacer otra caja para que puedas ver la diferencia en el color. Entonces la caja inferior, esta caja es la forma más pura de mi color, mientras que esta es el tinte de este color en particular. Entonces así fue como pude lograr con la ayuda de Tinder, ¿verdad? ¿Qué pasa con los tonos? Entonces, imagina que en vez de esta caja en particular de ser negra en vez de blanca, puedes ver que esto es de color negro. Si arrastro esto en esta caja en particular, bien, obtendré un color azul más oscuro. Pude lograr este color en particular porque agrego negro a un color específico. Se puede ver la clara diferencia entre estos dos colores. Este se ve mucho más aburrido, ¿verdad? Tiene algún tono más oscuro. Mientras que esto como un formato más puro y natural. Hablemos de tonos. Ahora. El tono es cuando mezclas tu color con un color gris. Déjame seleccionar este color, o más bien esta caja en particular con el gris, ¿verdad? Esto es un gris, ¿verdad? Si arrastre esta o esta caja en particular, verán que así es como se ve mi forma. ¿Correcto? Ahora. Si quiero emparejar este color de esta caja con esta caja, entonces tendré que mover mi deslizador. Voy a tener que mover mi deslizador hacia diagonalmente. Eso significa que en el lado izquierdo, abajo izquierdo, así es como podré lograr este color exacto. Puedes ver una vez que muevo mi cursor, el cursor, soy capaz de buscar exactamente ese mismo color. Algo mismo. Sí, se puede ver algo mismo retraso es posible porque ahora he añadido algo de gris a mi color natural. Si quiero hacer esta forma un poco más oscura, ¿verdad? Si quiero hacer este color un poco más oscuro o agregarle algo de sombra, tendré que arrastrar mi cursor hacia la parte inferior derecha. Esto me va a dar un tono más oscuro y añadir más sombra a mi color. Si quiero agregar más a esto, tendré que mover mi cursor hacia el lado superior izquierdo. Derecha. Así voy a ser capaz de conseguir atender a este color. Hablemos de saturación. Ahora bien, la saturación es otra terminología que se usa con bastante frecuencia cuando hablamos de colores y teoría del color. Básicamente nos dice lo rico o podría ser. Así que imagina que esta es la forma más pura de mi color. Para que puedas ver cuánta cantidad de azul se agrega a esta caja en particular. Entonces este nivel de saturación está al 100%, o se puede ver que la saturación es como mucho. Si le agrego más opacidad. Se puede ver que este color en particular no está saturado. Ya está hecho. Hablar de brillo, que contrasta con esta declaración particular de saturación, es cuando el color está más cerca de un blanco o un negro en una escala. Di si estoy moviendo mi color hacia el lado más derecho, se puede ver que el color azul es muy brillante. Si muevo mi cursor hacia abajo, se puede ver que el color no es ese color brillante. Entonces así es como puedo decir que, ya sabes, que este color en particular no está en Albright. Hablando de temperatura de color, tenemos o bien los colores fríos son colores cálidos. Los colores fríos son esos colores que tenemos que son agradables o más fríos, cualquiera que sea los ojos, esos son el azul, el verde y el morado. Hablando de colores más cálidos, se les da la terminología como una sola porque son bastante cálidos para nuestros ojos. Así que los colores incluyen rojo, amarillo y naranja. Si muevo mi cursor de EU, quien tiene el lado izquierdo, verás que voy a conseguir la temperatura más cálida, ¿verdad? Si quiero modificar la temperatura de mi color demasiado cálido, me deslizaré hacia el cálido. Y si quiero que esté más fresco, lo deslizaré hacia el lado derecho. Estos son los colores fríos. Entonces esas son algunas de las terminologías. Hablemos de algunos modelos de color que tenemos. Hablemos de RGB. Rgb es un modelo de color bastante popular que hemos estado usando bastante tiempo, incluso en CSS. Siempre que nos ocupamos asignar algunos colores a nuestros elementos, generalmente usamos las declaraciones RGB o la unidad RGB. Entonces RGB significa rojo, verde y azul. Entonces todos esos gamers de PC, muy fascinados por las tiras RGB y las luces RGB. Rgb significa rojo, verde y azul. Y utiliza la mezcla aditiva de luz para crear diferentes colores. Ahora, todas nuestras pantallas tienen diferentes luces LED. Ahora, estas luces LED tienen tres intensidades. Intensidad roja, intensidad verde e intensidad azul. Ahora, en base a estas intensidades de diferentes luces, puedes ver todos los colores diferentes. Entonces incluso en la pantalla de mi laptop, tengo pequeños transistores, diodos, y acumulativamente, forman estos diferentes colores. Si digo que quiero formar un color negro, la intensidad de mis diodos rojo, verde y azul sería la mínima o la más baja. Entonces ahora, como no se está proporcionando la intensidad, naturalmente el color sería el negro. Pero si quiero que el color sea blanco, todas las luces que esas son rojas, verdes y azules, la intensidad se pondría demasiado alta. Eso significa que los tres colores están creciendo a su máxima capacidad. Y ahora obtendría el color blanco. Entonces, cuando superpones rojo, verde y azul a pleno brillo, obtenemos el blanco. Y así es como funcionan nuestras pantallas, no solo nuestras pantallas, sino incluso, hasta mi ratón por aquí. Se puede ver este ratón gaming. Es capaz de cambiar diferentes colores. Déjame mostrarte. Entonces estos son diferentes colores en mi mouse. Entonces es capaz de buscar estos diferentes colores porque este tiene diferentes diodos de luz, diodos LED. Ahora estas tiras de LED, no tienen ningún otro color. Simplemente tienen rojo, verde y azul en base a su intensidad de luz, es capaz de visitar diferentes colores. Entonces así es como funciona el modelo RGB. Déjame mostrarte cómo podemos trabajar con el modelo RGB en Figma. Entonces como pueden ver por aquí, si elijo de hex a RGB, tengo la capacidad o la opción de agregar los valores. Ahora puedo agregar los valores desde en el rango 0-255. El valor a 55 es la cantidad máxima que puedo dar a rojo, verde o azul. Ahora la primera unidad o el primer valor que ingresaré representará el color rojo. El segundo valor representa el verde, y el tercer valor representa w. ya que en este caso, tengo un color más frío. No tengo ningún color rojo para ello. Por eso tenemos ceros en rojo. Como pueden ver, ya que este color está más hacia el lado azul, se puede ver que la saturación del azul está al máximo, es decir 255, aunque hay algo de sombra al mismo, tenemos algo de verde también. Esa es la razón por la que obtenemos este tono más fresco de este color en particular. Si quiero cambiar esto a, digamos rojo, entonces pondré en 55, 55, los demás como cero. Así podré subir tu color rojo. Bien, ese es mi modelo de color RGB. Hablemos también de diferentes modelos de color. Segundo, tenemos el CMYK. Cmyk significa cian, magenta, amarillo, negro, y para crear colores, este modelo utiliza lo que se llama mezcla sustractiva. Ahora no vamos a entrar en detalle sobre modelo de color CMYK porque este se usa principalmente para fines de impresión, generalmente no usamos en Figma ni en ninguna de las herramientas de diseño, ya sea que estemos diseñando un diseño de aplicaciones, diseño de sitios web, o cualquier creación de contenido , material de diseño, no usamos el modelo CMYK. Generalmente usamos el RGB y otros modelos que voy a discutir. Otro es tu HSB. Ahora, HSB, significa tono, saturación y brillo. Estas terminologías de tres colores ya las he discutido. Aún así, si no tienes claro esos, retrocede a esas partes y podrás referirla de nuevo. Ahora, este modelo de color en particular utiliza una mezcla de estos tres atributos para crear diferentes colores. Déjame mostrarte en Figma. Entonces en vez de RGB, si elijo este HSB, ¿qué pasará? Se puede ver que el valor máximo que tenemos es 100 y el valor más bajo que podemos obtener es cero. Entonces, si configuro esto en 100, se puede ver que EU es 100, la saturación también es 100, y el brillo también se establece en 100. Si configuro el brillo para que sea cero, obtendré esto como negro. ¿Por qué es eso? Porque no hay brillo en ello. El color está completamente hecho. Es negro, ¿verdad? Si pongo la saturación al 50%, veamos qué pasa. puede ver todavía es negro porque el brillo está puesto a cero. Si pongo el brillo a 50 , estará por aquí, ¿verdad? Si pongo el matiz para que sea, digamos 50, entonces esto me dará este particular color ocre, ¿verdad? Así es como es capaz de darme u, saturación y brillo. Así que valoras depende de dónde pongas tu cursor en esta escala en particular. Eso es lo que dirías que es, hablemos de otros modelos. Entonces hexadecimal es otro de los modelos de color que usamos. Hexadecimal es una manera muy amigable de mostrar tus colores RGB, porque las dos primeras letras o números se refieren a la lectura. Los dos ríos siguientes a verde, y los dos últimos se refiere al azul. Ahora todas aquellas personas que están familiarizadas con CSS podrían estar usando hexadecimal. Ahora generalmente en CSS usamos el símbolo hash antes de escribir nuestros valores hexadecimales. Pero en Figma, no necesitamos hacer eso. Entonces si vuelvo a mi Figma, pueden ver que también puedo seleccionar el valor hexadecimal. Ahora estamos aquí, como pueden ver, tenemos 40 AD y para el valor 40 representa mi rojo, AT, representa mi verde, y el cuatro representa mi azul. Ahora, ¿por qué nos hemos avisado vía, porque si has aprendido sobre los valores hexadecimales, todos los valores que están en dos dígitos, como eres 10, 111-213-1415. Estos se representan en el formato de celosía. De lo contrario 0-9, tenemos números. Entonces la letra a representa el valor diez, porque en el valor hexadecimal no podemos escribir diez de lo contrario se representará como un suboficial. Entonces por eso tenemos las letras como a, B y así sucesivamente. Entonces estos son mis valores hexagonales, ¿verdad? Y si quiero cambiar esto a, digamos, este valor en particular, se puede ver que el valor hexadecimal también cambia. Entonces, hagamos un resumen rápido lo que hemos aprendido a lo largo de esta sesión. Entonces hay tres colores primarios, rojo, amarillo y azul. Estos representan los bloques de construcción para todos los demás colores. Los colores secundarios se obtienen mezclando los primarios, como rojo más amarillo obtendrá naranja. Si mezclamos rojo y azul, obtendremos púrpura o violeta. Si mezclamos azul y amarillo, iremos a buscar verde. Los colores terciarios están operando mezclando colores primarios y secundarios. Tú eres la familia dominante de un color dado. El modo de color CMYK utiliza colores cian, magenta, amarillo y negro, y se utilizan principalmente para fines de impresión. Por eso no incorporamos este modelo de color en particular para Figma ni ninguna herramienta de diseño. Por último, tenemos modelos RGB, HSB que se utilizan en medios digitales. Y el formato de color hexadecimal es una forma más amigable de representar los colores RGB. Entonces sí, eso fue todo de mi parte para esta conferencia en particular. En la próxima conferencia, vamos a estar aprendiendo sobre armonías de color, la psicología del uso de diferentes colores y diferentes herramientas que podemos usar para ayudarnos en la elaboración de nuestros proyectos. 9. (8) Armonías de colores y psicología: Hola a todos, bienvenidos de nuevo a otro video. En esta videoconferencia, vamos a estar aprendiendo sobre armonías de color y la psicología del uso de diferentes colores. Ahora, cuando estás trabajando con diferentes colores, puede ser un poco desalentador, especialmente para principiantes, porque conoces la teoría del color, pero no sabes cómo incorporar diferentes colores a tu proyecto específico. Entonces esa es la razón por la que tenemos armonías de color, la paleta de colores, y la psicología de usar diferentes colores. Ahora, tomemos solo este sitio web de fórmula uno como ejemplo. Ahora, ¿cómo surgió la fórmula cuando se le ocurrió la idea de usar el color rojo en su proyecto, en su página web Bueno, no hay como tal conjunto de reglas al usar diferentes colores para tu proyecto. Pero hay algunas, algunas pautas que te ayudarán a elegir realmente un color específico para tu proyecto. Entonces como han usado el rojo, rojo es básicamente el color de la pasión. Se utiliza para llamar la atención de los usuarios o tal vez transmitir tu mensaje a la audiencia. Entonces, la Fórmula Uno está tratando de dar ejemplo para decir que hay tantos corredores de tarifas diferentes y quieren dar ese ejemplo. Entonces esa es la razón por la que podrían haber usado el color rojo que viene. Tenemos el sitio web digital oceánico. Ahora, usa el color azul como el color más primario. Puedes ver en toda esta página web tenemos color azul, ¿verdad? azul es el color más popular y ampliamente utilizado en Internet. La mayoría de los sitios web y aplicaciones móviles que ves, han utilizado el color azul en su proyecto. La mayoría de ellos en realidad, porque transmite confianza vienen pieza, inteligencia y seguridad. Entonces, a la mayoría de las marcas tecnológicas les gusta tu Facebook, Twitter, LinkedIn, todas usan el color azul. Incluso el océano digital es un lema porque te proporciona servidores, ¿verdad? Ellos le están proporcionando una aplicación SAS. Ellos le brindan la capacidad de ejecutar sus aplicaciones y sitios web en el servidor. Así que toma las marcas por lo general, suelen usar color azul. Las instituciones financieras también usan colores azules como tus Goldman Sachs. Usan color. Entonces tenemos amarillo. Ahora el amarillo solo es utilizado por tu industria de entretenimiento y juguetes infantiles. ¿Por qué es eso? Porque el amarillo generalmente muestra un movimiento divertido y audaz. Es un color de sol. Por eso nos trae alegría, felicidad. Eso es lo que hacen las películas. Eso es lo que hacen las series de televisión. Entonces es por eso que el color amarillo se usa generalmente para la industria del entretenimiento, ¿verdad? También transmite energía cálida. Por lo tanto, el color amarillo se usa generalmente cuando se trata del sector del entretenimiento. Entonces tenemos el color del tema verde, que generalmente se usa para la naturaleza, ¿verdad? El verde es el color de la naturaleza. Representa salud, bienestar, seguridad. Entonces, todos los sitios web que están vendiendo sus productos de suplemento, o están relacionados con la industria de la salud, la industria del fitness, la industria médica, o están promocionando algunos productos ecológicos, entonces podría ser mejor usar el color verde. Como puedes ver, están promocionando productos veganos, por lo que han usado el color verde que viene. Ahora tenemos color naranja. Las naranjas generalmente se utilizan para mostrar felicidad, alegría y confianza. Entonces, dado que el naranja es una combinación de rojo y amarillo, las naranjas se forman cuando mezclas rojo y amarillo. Así es como se obtiene naranja. Entonces esa es la razón por la que la mayoría de las propiedades de amarillo y rojo, obtenemos una naranja. Por lo que el naranja es generalmente utilizado por sitios web de comunicación como Postman. Postman es una plataforma API, API, interfaz de programación de aplicaciones utilizada para fines de comunicación. Entonces esa es la razón por la que tenemos naranja como color de este tema en Cartero. Digamos que quiero crear un sitio web para mi cliente que en realidad está configurando su propia tienda de productos veganos, ¿verdad? Entonces, obviamente, el color que debemos usar es el verde. Pero qué color exacto o qué Saturación Brillo el EU o mi tono debería ser para mi color verde. Para encontrar que lo que puedo hacer es simplemente copiar el código hexadecimal de este color verde. Y puedo ir a color.adobe.com. Y allá en la sección de crear, puedo hacer uso de esta rueda de colores. Ahora podemos ver que tengo, puedo elegir diferentes colores y mostrará el valor hexadecimal por aquí. Incluso muestra los valores RGB. Ahora podemos usar diferentes colores de la rueda de colores que en realidad nos está mostrando. Se puede ver que tienen diferente color. Cuántas herramientas como tu tríada analaga, monocromática, complementaria y todas esas cosas. Entonces analágica básicamente significa que si estás tratando con el color verde, entonces te mostrará los colores en el segmento verde. Si tomé el monocromático, entonces mostrará el rango de contraste como el lado más oscuro de mi verde o el lado más brillante del verde. Así se puede ver que se forma un contraste por aquí. Entonces tengo la tríada. Ahora viajó. tríada realmente nos mostrará o nos dará sugerencias sobre diferentes colores que serán opuestos. Por lo que también nos puede dar verde. Se puede ver en la sombra de azul y en la temperatura más cálida también. Entonces esa es mi tríada. Entonces tengo cortesía. Ahora la cortesía es completamente opuesta. O nos mostrará verde y algunas sugerencias en sentido contrario. Entonces podemos usar verde, morado, rosa. Estos son de cortesía. También tenemos split, doble split complementario, tonos compuestos cuadrados complementarios, e incluso podemos usar colores personalizados. Pero generalmente, como regla general, siempre les recomendaría a todos que se quedaran con monocromáticos o tal vez complementarios para desarrollar sus sitios web o desarrollar sus herramientas de diseño Figma. Así que tenemos monocromática, análoga y complementaria para usar en nuestro proyecto. Incluso puedes mover esta rueda. Si mueves esto hacia el centro, entonces verás que el color está más hacia el lado más brillante. El color no está tan saturado. Es más brillante y no está saturado. Cuanto más te muevas hacia la rueda, estará más saturado y será un poco más brillante. Estará más saturado. Una vez que mueves la rueda, el color también se mueve a la derecha? Se puede ver que el color base también está cambiando, el monocromático. Se puede ver cuando tenemos el saturado y el uno está menos saturado. Entonces estos son diferentes colores que podemos usar para desarrollar nuestro proyecto Figma, ¿verdad? Tomemos un rápido recapitulación sobre lo que hemos aprendido en toda esta conferencia. Entonces, antes que nada, los colores pueden tener diferentes significados en diferentes escenarios o diferentes culturas. Por lo que no hay como tal, conjunto de reglas específicas que puedas usar Read only para mostrar pasión o para llamar la atención de tus espectadores. Depende completamente del tipo de proyecto que estés usando. Pero solo para mantener una pauta, yo tenía te había dado diferentes ejemplos de diferentes sitios web donde han usado estos diferentes colores. Ahora, las armonías de color le permiten crear fácilmente una paleta de colores. Esa es la razón por la que tenemos el concepto de armonías de color. Una paleta de colores complementaria le dará el mayor contraste. Eso es lo que vimos en la paleta de colores de Adobe, ¿verdad? Mientras que uno monocromático te dará el menor contraste. La herramienta Adobe Color es la mejor para explorar temas de color o para crear tu propio color. Entonces, sí, eso fue prácticamente todo de mi lado. En las próximas conferencias, aprenderás a crear tus propios colores, cómo crear realmente diferentes colores lineales, colores de relleno sólidos. Y también exploraremos la parte topográfica. 10. (9) Modo de llenado en colores: Hola a todos, bienvenidos de nuevo a otro video. En esta videoconferencia, vamos a estar aprendiendo sobre la modalidad cinematográfica en Figma. Y también veremos en la sección de capas que tenemos en Figma. Entonces, ¿qué es exactamente Fillmore? Entonces hemos aprendido sobre la teoría del color. No hemos hablado de armonías de color, pero aún quedan algunas cosas por cubrir sobre los colores en Figma. Así que no sólo Figma, sino sobre diseñar cosas. Entonces como pueden ver, tengo esta caja en particular, pero ¿verdad de color verde? Ahora puedes ver una vez que haga clic en este relleno en el Modo Color, verás que este modo de película en particular es de color sólido. Sólido básicamente significa que el color solo tendrá, esta caja de elementos en particular solo tendrá un color. Ese es mi color sólido. Si cambio esto a lineal, ¿qué pasará? Voy a tener dos tonos contrastantes. Eso significa uno, o bien puedo tener color verde y segundo, puedo tener o cian o algún otro color. Entonces déjame seleccionar uno verde, el otro color como pecado. Y si muevo este punto a este punto y el segundo color a este punto, entonces verán así es como se ha formado una sombra o color lineal. Se han utilizado dos colores para formar este color. Ese es mi modo de filtro lineal. Entonces tengo radial, radial, como pueden ver, se está formando como una forma circular, como brilla el sol ante cómo es el sol, así es como nos está mostrando esto. Se puede ver que este es el radial Fillmore, ¿verdad? Entonces tenemos el angular. Eso significa que puedo elegir este ángulo a este ángulo. Solo en ese ángulo en particular, obtendré ese color más oscuro o cian, ¿verdad? Ese es mi modo de película angular. Tengo diamante. Se puede ver que se ha formado una forma de diamante. ¿Correcto? Entonces tengo la imagen. Puedo usar imagen o video mientras creo un color y así sucesivamente, ¿verdad? Así que esos son los diferentes modos que tengo en Figma. Hablemos de capas que tenemos en Figma. Bien, esta manera de capa, veamos cómo podemos crear realmente nuestro propio color cuando superponemos diferentes formas de diferentes colores. Entonces, ¿qué voy a hacer, solo voy a crear un nuevo marco, verdad? Y voy a crear diferentes formas. ¿Bien? Al sostener la tecla Alt, puedo replicar exactamente esta misma forma. ¿Bien? Entonces estas son las tres formas, y las tres formas se superponen entre sí. Digamos que esta forma en particular tiene un color violeta o morado, ¿verdad? Un color violeta o morado con un poco de transparencia. Este tiene color amarillo. Vamos a poner esto en amarillo. Sí. Este como cian. Así se puede ver estas tres formas están establecidas para firmar. Ahora, cuando superpongo las tres formas, ¿obtengo el nuevo color? ¿Cuándo se mezclan el morado y el cian? La parte superpuesta, ¿ obtengo un nuevo color? No, no lo sé. ¿Por qué es eso? Simplemente porque la forma de capa, cómo está en capas, es de paso, no se multiplica. Si quiero hacer eso, tendré que arrastrar las tres formas y tendré que establecer la capa como multiplicada. Una vez que lo haga. Ahora puedes ver que cuando hay cian y el morado se multiplica, el color que obtenemos es w Cuando los tres colores se multiplican, obtenemos el negro. Cuando el cian y el amarillo se multiplica, obtenemos el verde, el morado o el rosa se multiplica por el amarillo, obtenemos el rojo. Entonces eso fue todo acerca de los colores. Ya terminamos con los colores. Ahora, en la próxima conferencia en adelante, aprenderemos sobre tipografía y diferentes textiles. 11. (10) Estilos y propiedades de texto: Bien, vamos a saltar a la tipografía. Ahora, la tipografía es un concepto realmente importante en el diseño, ya sea que estés diseñando un sitio web o una aplicación móvil. Tendría algún tipo de contenido de texto. Ahora bien, cuando escribes algún contenido en un formato basado en texto, sabes que tu contenido podría ser imágenes, videos, ¿verdad? También podría ser texto. Entonces x también necesita un poco de estilo. Ahora el estilo del texto podría ser el estilo de fuente, la familia de fuentes, el peso de la fuente, y el tamaño de fuente, la alineación de fuentes también. Ya sea que quieras que lo alinee al centro o tal vez en la parte superior, tal vez en la parte inferior. Entonces eso es todo lo que vamos a aprender en esta conferencia. Entonces para eso, como pueden ver, he creado un marco dentro de esto. Si quiero escribir algo, tendré que hacer clic en este icono en mi barra de herramientas. Este T I can representa el texto. Una vez que haga clic por allí, ahora puedo arrastrar. Puedo mantener pulsado el botón del ratón y puedo arrastrar el cuadro de texto. Dentro de este cuadro de texto, puedo escribir mi texto. Digamos que escribiré cualquier texto al azar. Ahora otra vez, vea, podemos ver este texto. Aunque el texto es de tamaño muy pequeño, podemos aumentar su tamaño entrando en el panel de propiedades de diseño. Dentro del panel de propiedades de diseño, puedes ver que puedo cambiar el tamaño de fuente a, digamos 30. Por lo que esta unidad 30 está en píxeles. Si no puedes ver ningún otro símbolo o ninguna unidad después del valor, probablemente esté en píxeles. Si ves un signo de porcentaje, eso significa que está en porcentaje. Si has visto no formato de grado, es in-degrees. Si mira aquí en el panel de propiedades de diseño, esta rotación en particular se establece en formato de grados. Entonces la unidad de aquí es grados, mientras que el tamaño de fuente es el formato de n píxeles. Por aquí, puedes ver que tenemos el font-weight. Actualmente se ha fijado a regular. Incluso podrías cambiar esto a negrita. Se puede ver que el texto ahora ha sido cambiado a bowl. Si quieres que esto tenga un poco de peso ligero, puedes ver así es como se ve nuestro libro de texto. Volveré a regular. Ahora, intentemos cambiar el estilo de nuestra fuente, pero intentemos cambiar la familia de fuentes. Me gustaría aplicarle un estilo diferente, y puedo elegir entre diferentes estilos. Ahora bien, ¿cómo nos limitamos a una familia de fuentes en particular de toda esta lista? Bueno, para eso, tienes otros recursos de los que puedes acotar en qué familia de fuentes te gustaría usar. Yo personalmente uso Google Fonts para verificar realmente qué familia de fuentes se vería mejor para mi diseño. Así que puedes simplemente pasar a la nueva pestaña, buscar fuentes de Google. Una vez que hagas clic en las fuentes de Google, verás esta página. Voy a entrar, ver teléfonos disponibles. Una vez que voy por allí, pueden ver que tengo tantas familias de fuentes diferentes entre las que puedo elegir. Digamos que quiero seleccionar Roboto. Haga doble clic aquí. Y ahora puedes ver también nos está mostrando cómo se vería si dijera el peso de mi familia de fuentes demasiado delgado, 100, cómo se vería mi teléfono si cambiara eso a un metálico, cómo se vería si dijera eso a irregular, y así sucesivamente. Digamos que realmente quiero mirar mi contenido en lugar de su contenido ficticio. Me gustaría configurar mi propio contenido ficticio para comprobar si se ajusta a mi estilo o no. Entonces para eso, lo que podría hacer es poder escribir por aquí algo de mi texto de vista previa. Digamos que quiero escribir cualquier texto al azar. ¿Bien? Entonces así es como se vería mi texto. Digamos que quiero utilizar esta familia de fuentes Roboto. Así que sólo puedo volver a mi Figma. Puedo dar click en la familia de fuentes. Voy a necesitar seleccionar todo este texto. Puedes ir por aquí y simplemente puedes buscar en Roboto. Y puedes ver que el estilo de Roboto se ha aplicado aquí y actualmente se ha configurado para regular. ¿Y si quiero poner esto en negrita? Así es como se ve nuestro texto. Y así es como se vería audaz. Se puede ver exactamente de la misma manera. ¿Correcto? Ahora bien, esta zona en particular donde tenemos el valor 35, ¿qué es esta cosa? Esta es básicamente mi altura de línea. Ahora, ¿qué significa básicamente la altura de la línea? Digamos que también tengo otra frase. Digamos cualquier texto aleatorio que esté escribiendo para probar esto. Entonces en total, he escrito tres líneas abajo. ¿Verdad? Ahora la altura entre estas tres líneas está definida por mi altura de línea. Así puedo cambiar la altura de la línea a, digamos 30. Para que pueda establecer 30. Y se puede ver ahora el texto aparece más cerca. ¿Y si quiero aumentar esto? Así también puedo aumentar la altura de la línea. Solo estoy sosteniendo mi tecla de flecha hacia arriba para aumentar la altura de la línea. Y ahora verán que este cambio se aplica a mi texto. Permítanme seleccionar mi texto completo. Voy a repasar la altura de línea y voy a aumentar la altura de la línea. Se puede ver. Eso es cada vez más espacio entre estas diferentes líneas. ¿Y si quiero dejar algo de espacio entre estas letras? Para eso, voy a necesitar usar el espaciado entre letras, que está por aquí. Ahora puedes ver que está usando la unidad porcentual, no la unidad de píxeles sino la unidad porcentual. Pongamos esto al diez por ciento primero, y luego intentaremos aumentarlo. Se puede ver 10%. Así es como se ve. ¿Y si quiero disminuir esto? Puedes ver el espaciado entre letras como se vería nuestro formato. ¿Verdad? ¿Qué pasa con esta parte? ¿Qué significa esto? Básicamente significa que el espaciado entre párrafos bien, no vamos a cubrir sobre el espaciado de párrafos a partir de ahora porque no será evidente si les muestro a todos. Bien, ahora, vamos, permítanme deshacer todas estas cosas a nuestro estado inicial. Estoy escribiendo para probar la fuente. ¿Verdad? Ahora. Este es el tamaño de mi cuadro de texto. Aunque si quisiera agregar algo más de contenido, puedo agregar, digamos después de esto, en mi nueva línea, quiero agregar el número de línea para la línea phi. Todo este texto, la línea cuatro y la línea cinco están fuera de mi cuadro de texto. ¿Verdad? Entonces para eso, lo que puedo hacer, puedo cambiarlo a esta altura de línea. Eso significa que el cuadro de texto se ajustará según la altura de mi línea. Ahora bien, este tamaño fijo significa que hasta este punto, el punto, mi cuadro de texto es solo hasta ese punto mi cuadro de texto será, no cambiará si agrego más palabras o más líneas. Déjame mostrarte el ejemplo para eso. Digamos que este es el texto que en realidad estoy agregando. Así se puede ver que no se está ajustando la altura. Incluso el ancho no se está ajustando sólo porque lo hemos dicho a tamaño fijo. Así que en realidad fijó el tamaño previamente, en base a los textos que teníamos que alinear el número cinco, y ahora la caja no va a cambiar su ancho o alto. Y si quiero cambiar el ancho de nuestro cuadro de texto de acuerdo con el texto dentro del cuadro de texto. Para eso, tendré que seleccionar esto, que es ancho automático. Entonces ahora puedes ver así es como se ve mi cuadro de texto. ¿Y si quiero que este texto esté alineado al centro? Puedo seleccionar este botón en particular que alineará mi texto en el centro con respecto a mi cuadro de texto. Si selecciono esto, lo alineará a la izquierda con respecto a mi cuadro de texto. Si selecciono esto, lo alineará a la derecha con respecto a mi cuadro de texto. Esto se selecciona, es decir, alinearlo a la parte superior. Si selecciono esto, lo alineará al fondo, o mejor dicho debería decir medio. Déjame mostrarte lo que quiero decir con eso. Si elijo esta parte y si elijo, alinearla al medio, déjame reducir el siguiente tamaño de caja. Entonces para eso, lo que puedo hacer es que puedo escribir, Digamos lorem ipsum. Bien. Ahora se puede ver que el cuadro de texto se está ajustando de acuerdo a los textos que tenemos. Esto es posible porque hemos configurado nuestro cuadro de texto para tener veterinario automático. ¿Bien? Si agrego una nueva línea, se puede ver que en realidad es incluso acomodando su altura, ¿verdad? Entonces hago clic en este cuadro de texto y voy a arrastrar un nuevo cuadro de texto. Ahora ya pueden ver que puedo escribir este texto de la mitad en adelante. Entonces ahora está alineando el texto con respecto al eje y dentro de mi cuadro de texto. Si selecciono esto para alinearlo a la parte superior, mi texto aparecerá en la parte superior con respecto al eje y dentro de mi cuadro de texto. Si selecciono esto al final, significa que mi texto está siendo alineado la parte inferior con respecto al eje y dentro de mi cuadro de texto. Entonces estas son algunas de las propiedades de mis fuentes. También tengo una funcionalidad más dentro de mi panel de propiedades de diseño, que son los tres puntos por aquí. Esta es mi configuración de tipo. Si hago clic aquí, puedo previsualizar el texto antes incluso aplicar el estilo a mi texto. Ahora puedes ver si aplico esto, que es de tamaño fijo. Así se vería mi texto si lo pusiera a altura automática. Así se vería mi texto dentro de ese cuadro de texto. Si configuro eso para automatizar. Así es como podría verse la exportación. Si quiero la alineación al lado izquierdo, puedo hacerlo si quiero que esté centrada. Así se vería si quisiera estar bien alineado. Así es como se vería. Y si quiero que se justifique, así es como se vería. Ahora, ten en cuenta que no todas las funcionalidades como tu alineación, estás redimensionando y la decoración está disponible para cada familia de fuentes. Algunos font-family permite, algunos elementos de diseño, sum no permite. Así que tenlo en mente. Ahora estamos usando Roboto. Entonces por eso nos está permitiendo tener esa alineación justificada. ¿Y si cambio este texto en particular de Roboto para que diga Poppins? Si hago eso, ahora verán que parte del estilo no está disponible. Digamos qué estilo no está disponible. Bien, todo el estilo está disponible. Pasemos a los detalles. Por lo que incluso subíndice y superíndice está disponible. Bien, así que sí, estaba hablando de que algún estilo no está disponible para alguna familia de fuentes. Pero en mi caso, Poppins nos está permitiendo formatear esas cosas, ¿verdad? Entonces podemos hacer alineación justificada, podemos hacer subrayado. Incluso podemos tener un tachado, lo que significa que una línea pasará por nuestro texto. Lo que quiero decir con eso es, digamos que soy, déjeme ponerlo de esta manera. Bien. Déjame escribir palabras que tengan sentido Como texto aleatorio. Se puede ver que el texto está teniendo algún subrayado. Y si no quiero un subrayado, sino más bien, me gustaría tener esto que es tachado. Entonces se puede ver un strike through line que ha estado pasando por nuestro texto. ¿Y si quiero esto? Pero simplemente ninguna, ninguna decoración como tal. Así que hasta puedes hacer eso. Ahora bien, si tienes algún párrafo sangría, entonces puedes hacerlo. Ahora bien, ¿qué significa sangría de párrafo? Digamos que tienes diez píxeles de párrafo sangrados. Eso significa que quedarían diez píxeles de espacio. A partir del cuadro de texto. Tu primera carta empieza con tus textos, ¿verdad? Entonces ese es mi párrafo sangría. Como dije anteriormente, el espaciado entre párrafos no tendría sentido. Si te explico, todos ustedes investigarán eso más adelante si es necesario. También tenemos list-estilo. Digamos que también tengo algunos otros textos. Digamos uno. Primero, segundo, tercero. ¿Bien? Y voy a seleccionar todo mi texto. Y podría aplicar algún estilo de lista, como digamos lista de viñetas. Entonces así sería nuestro texto si dijera esa lista numerada dos, tendría números, ¿verdad? Si tengo algo de interlineado, incluso puedo hacer eso. Entonces tenemos algunos casos. Ahora caso significa que si quiero todo mi texto tenga mayúsculas, entonces todas las letras de mi texto tendrían mayúsculas. Si quiero que eso sea minúscula, entonces todas las letras dentro de mi texto tendrían minúsculas. Si quiero el caso del título, entonces significa que cada palabra, primera letra estaría en mayúscula. Tiene todas las letras en esa palabra serían minúsculas. Entonces tenemos esto, que no se soporta para gorras pequeñas. Se puede ver la fuente no soporta gorras pequeñas, por lo que este Poppins no soporta esta carcasa en particular. Entonces eso es lo que había dicho anteriormente. Volvamos a cambiar a Roboto y veremos si esto es aplicable o no. Por lo que ahora puedes aplicar esto que es forzados gorras pequeñas. Ahora para mayúsculas básicamente significa que aunque todas las letras dentro de tu texto están en mayúsculas, pero el tamaño del mismo es más pequeño, tal que se vería así. No es una fuente tan grande y enorme, ¿verdad? Entonces eso es lo que en realidad significa esta primera gorra pequeña. Digamos que no quieres aplicar ninguno, ya sabes, ninguno de estos casos, entonces simplemente puedes seleccionar este ninguno. Puedes volver a estos detalles. Si quieres algún superíndice o subíndice, incluso puedes escribir eso. Digamos que tienes este texto algo así como dos al poder de dos. Entonces puedes poner esto en superíndice. Entonces ahora son dos elevados a los dos. Y si quiero escribir, digamos log a la base diez. Para que pueda escribir la bitácora diez. Puedo seleccionar diez, y puedo agregar esto en subíndice. Entonces ahora podemos ver que ahora es log a la base diez. Si estás diseñando algún contenido para tu sitio web, o tal vez una aplicación donde te gustaría usar estas expresiones matemáticas o tal vez ecuaciones químicas, entonces puedes usar Figma para tener realmente superíndice y subíndice dentro de tu diseño. Bien, así que eso fue todo de mi parte para esta conferencia en particular. En la próxima conferencia, conocerás cuál es la diferencia entre tu formato serif y sans-serif? 12. (11) Serif vs fuentes serif Sans Serif: Ahora ha habido mucha confusión entre las fuentes serif y sans-serif. Bueno, no se preocupen chicos. Haré todo lo posible para aclarar la confusión que hay alrededor. Y al final de esta conferencia, podrás elegir la fuente perfecta para tu diseño. ¿Cuál es exactamente la diferencia entre estas fuentes serif y sans serif? Entonces Hijos es una palabra francesa, que básicamente significa sin. Entonces, como su nombre indica, la principal diferencia entre estas dos caras tipo es la presencia o ausencia de serif dentro de las letras. Ahora, ¿qué es exactamente esto seguro? Tan asertivo como una línea decorativa o una conicidad añadida al principio o al final de las letras tallo, lo que crea un pequeño plano horizontal y vertical dentro de una palabra. Entonces, en pocas palabras, se puede decir que las fuentes serif tienen esas líneas decorativas o cónicas, mientras que sans-serif no. Como puedes ver por aquí, sans-serif no tienen esos trazos. Ahora, veamos algunas de las fuentes Serif de uso común. Entonces esos son Times New Roman. Tenemos en nuestro Microsoft Word. Así Times New Roman es fuente serif de uso común. Garamond es otra fuente serif de uso común. Entonces tenemos Baskerville, Georgia, y Courier New. Veamos algunas de las fuentes sans-serif de uso común. Helvética, Próxima Nova, Futura y Calibri. Ahora bien, ¿qué dice una fuente serif de tu marca? Si vas por una apariencia tradicional en tu diseño, definitivamente debes ir a la ruta serif. Desde fuentes serif han sido ampliamente utilizadas en libros, periódicos, revistas. Nos recuerdan temas más clásicos, formales y sofisticados. Las fuentes Serif son una gran opción para las marcas que quieren ser vistas como confiables, establecidas y confiables. Entonces, las fuentes serif son una excelente opción para negocios más tradicionales como prácticas legales, firmas financieras o compañías de seguros. ¿Qué dice una fuente sans-serif sobre tu marca? Entonces las fuentes sans-serif se tratan más de tirar la tradición por la ventana y son mucho más a favor de más que de sofisticación. Así que los sans serifs se consideran más modernos porque ya conoces los, nuestros minimalistas, proporcionan un aspecto moderno. Son más simplistas. Entonces, si quieres que tu diseño parezca más juvenil, más accesible, ¿verdad? Así que las fuentes sans-serif pueden sentirse más accesibles que las cosas aquí, más contrapartes serif corporativas. Así que las fuentes sans-serif son vistas como más accesibles, juguetonas y juveniles debido a su simplicidad. Entonces, básicamente, nuevos negocios, start-ups, negocios en línea, empresas tecnológicas, utilizan estas fuentes sans-serif. El logotipo actual de Google está usando la fuente sans-serif. Antes, en, supongo, 2005 o seis, cuando Google era bastante nuevo en comparación con Yahoo, estaban usando las fuentes serif. Entonces eso es todo. Espero que la confusión entre Serif y Sans Serif sea clara y espero que todos tengan claro qué tipo de letra usar para su diseño. 13. (12) Utilizando fuentes personalizadas en Figma: Muy bien, echemos un vistazo a cómo podemos subir nuestras fuentes personalizadas y Figma. Ahora puede haber una situación que quizás quieras usar algún tipo de familia de fuentes, que no está disponible en Figma. No está disponible en las fuentes de Google. Entonces, ¿qué haces en ese caso? Para darte un ejemplo, ¿y si quiero usar Grand Theft Auto font-family? Como si realmente disfrutara jugando rentado de juegos, y me gustaría usar esta familia de fuentes, pero esto simplemente no está disponible en Figma. Digamos que quiero aplicar este mismo estilo a esta fuente. Entonces, ¿cómo aplico eso? Entonces para eso, voy a necesitar ir a figma.com slash downloads. Solo tienes que ir por allí y elegir la plataforma que estás usando. En mi caso, estoy usando una máquina Windows, así que voy a instalar este instalador de Windows en estos instaladores de fuentes. Por lo que va a llevar algún tiempo e intentará descargar la aplicación EXE, sólo tiene que abrirla e instalarla en su sistema. Entonces voy a instalar esto. Se puede ver que esto ha sido instalado. Así que ahora puedo volver a esta fuente y puedo dar click aquí para descargarla. Ahora no voy a volver a descargar esto porque ya lo he descargado en mi sistema. Entonces aquí como pueden ver, este es un archivo zip. Entonces voy a extraer esto usando 7-Zip. Puedes usar cualquier otra herramienta que tengas como tu tráquea o cualquiera de estas cosas. No voy a ir en detalle sobre los datos. Así que ahora tenemos este famoso tipo de fuentes punto TXT. Una vez que haga clic en esto, o mejor dicho debería decir esto, este archivo PDF de un punto. Puedes ver este botón Instalar simplemente haz clic por ahí. Por lo que el Figma descargará esta familia de fuentes en particular. Entonces ahora puedes usar esta familia de fuentes en tu Figma. Entonces déjame llevarte de vuelta a Figma y voy a volver a mi proyecto tester. Así que volvamos por allá. Voy a aplicar el texto, que es Grand Theft Auto. Vamos a aplicar el estilo, que es si no me equivoco, su precio bajó. Y lo puedes ver igual. Sí. Ahora se puede ver exactamente la misma familia de fuentes que se ha aplicado. Por aquí. Se puede ver que esta es la familia de fuentes que se está utilizando. Lo mismo se está aplicando aquí. Déjame aumentar el tamaño de la fuente para que sea mucho más visible. Ahora, espero que todos puedan ver exactamente que se está aplicando la misma familia de fuentes. 14. (13) Trabajar con imágenes en Figma: Bien, sigamos con las imágenes en Figma. Ahora hay tres formas de importar realmente imágenes en Figma. El primer y más importante método es que puedes repasar el icono de estas formas en la barra de herramientas. Y se puede seleccionar esta opción que es colocar imagen o video. También puedes ver la tecla de método abreviado, que es Control Shift y k. Así que si mantienes presionados los botones Control Shift y K, tendrás que navegar por la imagen donde has ubicado dentro de tu carpeta. Y puedes seleccionar eso. Y puedes simplemente colocarlo donde quieras pegar. Bien, para que veas esta es mi imagen. Esta imagen en particular es la miniatura de mi curso de desarrollo web full stack. Si estás interesado en explorar los aspectos de desarrollo web, definitivamente deberías revisar mi curso porque este curso está enfocado en el desarrollo web full stack. Se centra tanto en el front-end como en el back-end. Así que partimos directamente de HTML. Después cubrimos CSS, algunos frameworks CSS como Bootstrap, entail y CSS. También miramos JavaScript en su totalidad. También cubrimos frameworks JavaScript como React, que es un framework front-end. Entonces también cubrimos un framework backend, que es NodeJS. También nos fijamos en JS express. Después cubrimos bases de datos como MongoDB y también verás cómo usar Git y GitHub para subir realmente tus proyectos. Y no solo proyectos, sino cualquier sitio web que les guste subir. Y por cierto, si estás interesado en crear aplicaciones y sitios web del mundo real, definitivamente deberías revisar este curso porque por ahí, hago todo lo posible para actualizar el curso regularmente subiendo proyectos, videos y tutoriales sobre nuevos marcos. Así que basta de marketing para mis otros cursos, volvamos a centrarnos en nuestras imágenes y Figma. Entonces esta es la única forma de importar imagen en Figma. La otra forma es abrir realmente la carpeta y simplemente usar el método de arrastrar y soltar para colocar la imagen dentro de su espacio de trabajo Figma. Ahora, por aquí, como pueden ver, no he importado esta imagen dentro de mi marco. Si quisiera colocar esta imagen y el marco, también puedo hacerlo. Así que permítanme crear un marco de, digamos tamaño de escritorio. Y, um, sí, sé dónde puedo colocar mi imagen para poder usar el arrastrar y soltar o de lo contrario incluso puedo hacer Control C y Control V. Una vez que hago Control V, puedes ver que la imagen ha sido colocada dentro de mi marco. Ahora verás que las imágenes de gran tamaño comparadas con el tamaño del fotograma. Entonces la imagen ha sido recortada, ¿verdad? Entonces, si me gustaría cambiar el tamaño de la imagen, entonces lo que puedo hacer es sostener esto, ya sabes, estos cuatro vértices. Puedes ver si crees que te gustaría cambiar el tamaño de la imagen. Y si haces algo como esto, entonces notarás que no se está redimensionando la imagen , más bien se está recortando. Entonces, ¿qué haces en ese caso? ¿Por qué sucede esto? Está sucediendo porque hemos seleccionado el movimiento. En su lugar, debemos seleccionar el botón de escala. Entonces déjame deshacer. Y ahora voy a seleccionar el método de escala o simplemente puedes mantener presionado el botón de tu teclado. Y ahora voy a cambiar el tamaño de tal manera que la imagen no se esté recortando de ninguna manera. Se pueden ver las imágenes no siendo azotadas. Más bien es estar asustado. Se ha reducido a la baja. El tamaño de mi imagen se ha bajado significativamente y la imagen no está siendo golpeada de todos modos. Bien, entonces esas son las tres formas de importar realmente imágenes en Figma. Ahora bien, ¿y si quieres colocar esta imagen en una forma? ¿Cómo vamos con eso? Entonces digamos que quiero colocar esta imagen y la caja rectangular. Así que déjame crear una caja rectangular. Y por aquí, me gustaría colocar esta imagen en particular. Entonces lo que puedo hacer, puedo seleccionar esta casilla en particular. Y dentro de mi relleno. Hemos aprendido sobre los campos y todas esas cosas en la sección de color. Entonces, en lugar de sólido, elegiré Imagen. Una vez que vaya por aquí, puedo elegir mi imagen, que es esta imagen en particular. Ahora pueden ver esto es ahora, esto ahora ha estado dentro de mi forma. Bien, ahora incluso puedo rotar esta imagen. Entonces una vez que haga clic en este giro, lo rotará 90 grados. Ahora por qué ella, la imagen ha sido rotada, no mi forma. Entonces esa es una cosa que debes tener en cuenta. ¿Bien? Así puedo rotarlo tantas veces como me gustaría. ¿Bien? Ahora, también verán que tenemos algunos otros ajustes que puedo hacer. Más bien debería decir que en la película o incluso puedo cambiar de modo película a modo de ajuste. Una vez que haga eso, verán que la forma está ocupando la dimensión exacta como mi caja rectangular. Entonces eso es posible porque he elegido este modo FET. Si elijo esto para recortar, entonces podré recortar la imagen tal manera que solo esa parte de la imagen sea visible. Digamos que quiero quitarme de la imagen y solo quiero colocar el logo, que es MongoDB Express reactivo NodeJS logos. Así que una vez que he terminado de recortar mi imagen, así que ahora solo puedes hacer clic en esta cruz para salir del modo de recorte. Y ahora solo esta parte de la imagen está presente dentro de mi caja. Bien, también tenemos otras opciones. Con eso, quiero decir, es que digamos que selecciono esta parte, me gustaría encajar. Eso significa que pongamos forma y déjame aumentar el tamaño de mi caja. ¿Bien? Voy a aumentar el tamaño de mi caja. Y ahora puedo hacer otros ajustes también. Entonces como Lightroom y Photoshop te permiten lidiar con otros ajustes en tus imágenes como exposición, contraste, saturación, temperatura, tinte, reflejos, sombras, todas esas cosas que puedes hacer en la misma Figma. No es necesario usar ningún otro software para tratar realmente la parte de las imágenes. Como pueden ver, he bajado un poco la exposición para que la imagen aparezca más oscura. Entonces esa es mi exposición si me gustaría aumentar el contraste y verás más nitidez y todas esas cosas a ella. Nos gustaría aumentar la saturación. Yo también puedo hacer eso. Así que la personalización depende de ti. No hay como tales reglas fijas en cuanto a qué exposición se debe establecer para esta imagen o qué contraste debe establecerse para esta imagen. Depende totalmente de tu caso de uso de la imagen con la que estés trabajando. ¿Bien? Y la otra cosa que quería mostrar es que aunque voy a cubrir en detalle en la sección de efectos, digamos que quieres crear algún tono más oscuro o un efecto tipo vidrio para esta imagen en particular. Y le gustaría aplicarle algún texto. Ahora debes haber visto algunos sitios web donde tienes una imagen. Ahora esta imagen tiene cierta transparencia a la misma y sobre la cual se aplica cierto ancho de texto, sombra más clara tal manera que la imagen también es visible, aunque no claramente, pero alguna sombra de las imágenes ahí en la página web y el texto también está ahí. Déjame mostrarte lo que quiero decir con eso. En segundo lugar, seleccione esta imagen. Puedo ir al panel de transparencia y puedo reducir la transparencia. Entonces, si cambio de 100% dos, digamos 80, 80 por ciento. Y se puede ver que la imagen es transparente. Eso, bien, vamos, vamos a traerlo de vuelta al 100%. Bien, puedo usar el Alt. Puedo arrastrar hacia abajo para que obtenga una copia exacta de esta forma. Y ahora dentro del modo película, cambiemos de imagen a sólido. Eso significa que quiero colorear no una imagen. Déjame tener un tono más oscuro por aquí. Y voy a elegir la transparencia a aproximadamente, digamos esto alrededor del 22%. Si traigo de vuelta a esta parte. Ahora puedes ver así es como se ve mi imagen. Se puede ver así es como resultaría mi imagen. Ahora, incluso puedo aplicar algún texto a esta imagen. Digamos que quiero escribir algo así como MAN stack. También aumentaré el tamaño de la fuente. Entonces aumentemos el tamaño de fuente de este texto. Entonces, en vez de 12, hagamos esto 36. 36 aún no está claro. Vamos con 48. 48 se ve bien. Cambiemos el estilo del texto a Roboto. E incluso puedo cambiar el color de esta fuente por digamos negra. ¿Correcto? Sí, eso se ve genial. Una pila. Entonces eso fue todo acerca de las imágenes para esta conferencia. Una vez más, un resumen rápido. Hay tres formas de importar imágenes en tu archivo. El primer método es mantener presionados los botones de cambio de control y K en el teclado. Y luego puedes mirar el archivo que te gustaría importar. La otra forma es simplemente arrastrar y soltar la imagen de tu carpeta a tu espacio de trabajo Figma. El tercer método consiste en utilizar realmente los métodos Control C y Control V. ¿Qué aprendimos? Aprendemos que hay una manera de importar o de otra manera colocar tu imagen dentro de la forma, cualquier forma, no solo un rectángulo, sino más bien si estás tratando con una elipse o un polígono, puedes elegir el modo de relleno y desde el modo película dentro del sólido, desde, puedes cambiar eso de sólido a imagen. Una vez que haces eso, también tienes otras opciones. O puedes recortar eso. Una última cosa con la que nos quedamos es que incluso puedo cambiar de FIT a crop. Y una vez que hago tile, entonces eso significa que puedo repetir las imágenes tantas veces me gustaría. Digamos de 20 I10, establece esto a 25, entonces verás 25%. Eso significa que básicamente cuatro veces mi imagen se ha repetido dentro de esta forma particular. Entonces ese es mi azulejo. Entonces tienes diferentes opciones para elegir. Si lo haces, entonces eso significa que la imagen se colocará dentro de tu forma, pero no se ajustará acuerdo a las dimensiones de la forma. Si eliges el ajuste, entonces encajará en consecuencia. Si eliges la otra forma que es recortar, entonces tendrás que recortar la parte de tu imagen. Si eliges el mosaico, entonces puedes repetir las imágenes tantas veces como quieras. Entonces tienes las opciones para lidiar con los ajustes de la imagen, como la exposición, el contraste, la saturación y todas esas cosas. También expliqué cómo rotar las imágenes. ¿Bien? Una vez más, recuerda que cada vez que giras, estás rotando la imagen dentro de la forma, no la forma en sí. Entonces esa es una cosa que hay que recordar. Y si quieres disminuir o aumentar la transparencia de la imagen, solo tienes que ir a esta capa y podrás lidiar con la transparencia de la imagen. Si quieres usar este tipo de efecto de sombra o vidrio, entonces puedes usar otra forma con un color sólido, desplegar su transparencia y colocarla con esa imagen en particular. Y luego puedes usar cualquier otro teléfono o cualquier otra forma que te gustaría usar sobre esa capa. Así que eso fue todo. En la próxima conferencia, aprenderás algunos plug-ins que podemos usar para ayudarnos realmente a importar imágenes. Y también aprender a eliminar el fondo de las imágenes en la misma Figma. 15. (14) Plugin para Unsplash: Bien, sigamos con las imágenes y Figma. Ahora, a veces estás creando algún tipo de diseño para tu cliente. Es posible que desee usar algunas fotos de archivo. Ahora bien, si estás pensando que puedo usar cualquier foto de Google, solo puedo subir en Google cualquier imagen que me gustaría usar en mi diseño que puedas entregarla a mi cliente. Bueno, te equivocas. ¿Por qué es eso? A veces las imágenes tienen derechos de autor. Si usa con fines comerciales, puede enfrentar algunos problemas legales como problemas de derechos de autor. Así que no quieres meterte en ningún problema. La mejor manera de lidiar con esta situación es descargar imágenes libres de derechos de autor desde los lados, lo que proporciona fotografía de stock. Uno de los sitios que es muy popular es Unsplash. Así que solo ve a unsplash.com, busca cualquier imagen que estés buscando. Digamos que estoy buscando imágenes abstractas. Así que sólo puedo ir por ahí. Puedo buscar cualquiera de las imágenes y puedo descargarlas. Otro sitio web es pexels.com. El tercero es Pixabay. Y encontrará EGN número de sitios web que proporcionarían fotografía de stock. Ahora, una forma de importar las fotos a tu proyecto Figma es descargarlas de estos sitios web, ubicarlas en alguna carpeta e importarlas en tu Figma. Eso es lo que aprendimos anteriormente, que hay tres formas de importar imágenes en Figma. Pero, ¿no hay una forma abreviada de importar directamente imágenes de Unsplash a tu proyecto Figma Eso es lo que vienen los plugins, entra en la imagen. Así plug-in es básicamente una adición o una extensión de su programa existente, que proporcionará algunas características adicionales que son programa existente no está proporcionando. Así podrás descargar cualquier plug-in, no solo el plugin Unsplash, sino cualquier plug-in que te gustaría tener en Figma simplemente yendo a este ícono de Recursos en la barra de herramientas o Figma, simplemente haz click ahí, ve a estos plug-ins y busca un plugin que estés buscando. En nuestro caso, ya que estamos tratando con imágenes, nos gustaría descargar el plugin Unsplash. Entonces busquemos Unsplash. Ahora mismo. Se puede ver que esto está apareciendo en mi reciente, simplemente porque ya he descargado esto en mi cuenta de Figma. Simplemente haga clic en esto. Tomará algún tiempo instalar y dejar que se instale. Una vez que hagas eso, te dará esta opción para correr. Ahora puedes ejecutarlo desde aquí y puedes importar la imagen, el tipo de imagen que te gustaría usar dentro de tu proyecto. Para que puedas hacer eso. Otra forma. Puedes ver que está ejecutando mi plugin Unsplash. Ahora puedo seleccionar esta abstracta. Puedo importar esto. Se puede ver que tardará algún tiempo en importar, y ahora se ha importado, ¿verdad? Otra forma de descargar este plugin es hacer clic derecho en tu espacio de trabajo Figma. Ve a este plug-ins y encuentra más plug-ins. Una vez que hagas eso, encontrarás Unsplash. Otra forma de usar realmente complemento Unsplash es hacer clic derecho en tu forma o tu marco y simplemente ir a Plugins, unsplash. Y tu plugin Unsplash se abrirá directamente, seleccionará abstract o cualquier otro tipo de imagen que te gustaría usar. Y en mi caso, me gustaría usar esta imagen en particular. Entonces solo voy a dar click sobre esto. Tomará algún tiempo. Y ahora se puede ver que esta imagen ha sido cargada. Incluso puedo cambiar el color de la fuente. Ahora mismo, es negro y la imagen también es oscura, así que no parece buena, pero no se preocupe. Solo estoy tratando de explicarles a todos cómo usar este plugin en particular. Ahora, ¿y si quieres importar esta imagen Unsplash Italia a una forma? Entonces, ¿cómo vamos con eso? Digamos que tengo una imagen rectangular. Permítanme simplemente borrar esta imagen en particular. Está tomando algún tiempo para deshacer. Así que ahora puedo crear una forma rectangular de este tamaño. Entonces puedo crear otro rectángulo de, digamos, este tamaño. Puedo usar el Alt y así es como puedo lidiar, ¿verdad? Sí. Hagamos otra copia de esta forma. Y otra copia de esta forma. Ahora, quiero importar las imágenes de esa manera. Y por cierto, intentemos alinearlos al centro. Así que ahora puedo importar las imágenes dentro esta forma con solo hacer clic derecho sobre esta forma. Puedo elegir Plugins, unsplash, y luego puedo elegir abstract. Vamos a importar esta imagen. Y se puede ver que esta imagen ha sido importada. Lo mismo que puedo hacer aquí. Por aquí. Por aquí también. Por aquí, y por aquí también. Entonces así es como simplemente puedes importar imágenes sin derechos de autor a tu proyecto Figma. 16. (15) Eliminar fondo de imágenes en la Figm: Bien, veamos cómo podemos eliminar el fondo de nuestras imágenes. Ahora sé que todos ustedes deben estar al tanto del sitio web eliminado dot Vg. Ahora bien, este es un sitio web realmente famoso que elimina el fondo de tus imágenes. Incluso utilizo de vez en cuando para eliminar el fondo de mis imágenes. Entonces lo que haces por aquí es que simplemente subas cualquiera de tus imágenes de la que quieras eliminar el fondo y podrás descargar la imagen modificada. Ahora bien, ¿podemos hacer eso directamente en Figma? Bueno, puedes hacer eso. Y para eso necesitarás un plugin, que obviamente es que he eliminado o BG. Pero necesitas registrarte y crear una cuenta primero o eliminar dot Vg para que puedas generar tu propia clave API. Ahora usando esa clave API, entonces la usará en su complemento, el Eliminar fondo de las imágenes. Así que déjame registrarme rápidamente y crear una cuenta por aquí. Voy a usar Google. Solo asegúrate de seleccionar esto. Estoy de acuerdo con los términos del servicio. Y si quieres recibir las nuevas funciones y ofertas especiales por correo electrónico. Simplemente puede hacer clic en eso, su marketing por correo electrónico, marketing por correo electrónico, esas cosas. Entonces, una vez que hayas hecho eso, solo tienes que ir a herramientas y API. Ve por allá. Y puedes generar tu propia clave API. Sólo tienes que ir a esta ABI y línea de comandos. Y verás como consigo una API. Sólo tienes que ir por ahí. Y te mostrarán que en el perfil de la cuenta, verás la clave API. Entonces voy a crear una nueva clave API. Voy a crear esta clave API, y voy a copiar esta. Volveré a mi Figma. Seleccionaré esta forma particular donde me gustaría importar mi imagen. Así que vayamos a Plugins unsplash. Buscaré una imagen de retrato. Entonces busquemos retrato. Voy a seleccionar esta imagen y me gustaría eliminar el fondo para esta imagen. Usa el patrón antiguo para que pueda hacer una réplica de esta imagen. Y voy a descargar un nuevo plugin buscando, eliminar, Eliminar, BG aquí mismo. Puedes ver que puedo seleccionar Ejecutar e intentará correr, pero no va a correr. ¿Por qué es eso? Simplemente porque primero necesitas establecer la clave API, como viste, primero tenemos que establecer la clave API. Volvamos a los plugins. Voy a dar click en este desplegable. Intentemos configurar nuestra clave API. Y ahora voy a necesitar pegar mi EBIT. Así que sólo voy a pegar mi clave API y vamos a hacer clic en Guardar. Y ahora puedo eliminar este fondo tan solo hacer clic en Complementos de clic derecho. Eliminar fondo y ejecutar, y tomará algún tiempo eliminar el fondo. Tratemos de darles algo de tiempo para que eliminen el fondo. Y verás que se ha quitado el fondo. 17. Enmascarar imágenes en Figma: Bien, echemos un vistazo a diferentes técnicas de enmascaramiento que podemos hacer en Figma. Ahora tal vez te estés preguntando ¿qué es este enmascaramiento? Enmascarar es, ya sabes, es una forma de manipular tus imágenes sin destruir realmente la calidad de tu imagen. Entonces digamos que realmente quieres mostrar alguna parte de tu imagen. Entonces ese es tu enmascaramiento de la imagen. Al igual que antes lo que vimos, cómo eliminar el fondo de las imágenes. Esa no era más que una forma de enmascarar las imágenes de portada. Eliminamos el fondo de la imagen. Solo estábamos exhibiendo el retrato, la persona misma, como puedes ver por aquí. Si quitamos el fondo de la imagen, y este color gris que estás viendo no es más que el color de nuestra caja rectangular. Entonces esencialmente en esta imagen en particular, no tiene un fondo gris. Ahora el ocupa el color, que es el color de nuestra caja rectangular. Veamos diferentes maneras de cómo podemos enmascarar a las mayores. Entonces para eso, lo que voy a hacer, solo voy a crear un nuevo marco de aproximadamente tamaño de escritorio. Y dentro de esto, voy a copiar esta imagen. Y lo voy a pegar por aquí. Bien, intentemos enmascarar esta imagen. Entonces debes haber visto en las plataformas de redes sociales que generalmente las fotos de perfil están en forma circular. Entonces, ¿cómo podemos enmascarar realmente esta imagen? Y es tal manera que solo la cara o ciertas partes de esta imagen aparecen dentro de la elipse o una forma circular. Entonces, lo que puedo hacer, puedo crear una nueva forma de elipse. Probablemente del tamaño. Se ve genial. Y ahora quiero sólo la parte de mi imagen, esa es la cara dentro del círculo. Entonces, ¿cómo puedo hacer eso? Bueno, lo que necesitas hacer es que solo puedas llevar tu imagen al frente en la sección de capas, como puedes ver en el panel de capas aquí, justo por aquí, elipse está en la capa más alta que la caja rectangular que tenemos. Este rectángulo no es más la imagen de la que estábamos hablando de él. Entonces esta elipse necesita ir detrás de nuestra imagen. O se puede decir que la imagen tiene que venir delante de nuestra forma de elipse. Para que puedas hacerlo dentro del panel de capas. Simplemente puedes arrastrar hacia abajo y la imagen vendrá al frente. O bien lo que puedes hacer es simplemente clic derecho sobre esta forma circular. Y solo puedes traer de vuelta o mejor dicho Enviar a Atrás. Simplemente envía al dorso o bien lo que puedas hacer, puedes seleccionar tu imagen, hacer clic derecho sobre tu imagen y traerla al frente. También puedes ver las teclas de método abreviado para eso. Entonces así es como lo haces. Y luego selecciona tanto tu forma de elipse el rectángulo manteniendo presionado el botón Control y en el panel Capas, selecciona tanto tu imagen como la forma de elipse. Ahora haga clic derecho en la imagen y utilízala como máscara. También puedes ver la tecla de método abreviado, que es Control, Alt y M. Una vez que hagas eso, verás solo aparece la cara dentro de la forma circular. Entonces así es como en realidad enmascaras tus imágenes y Figma. Tratemos también de ver cómo podemos enmascarar una imagen en nuestro texto. Que voy a seleccionar todo esto y voy a mover esto a algún lado por aquí. Bien. Ahora, voy a crear un nuevo cuadro de texto, y voy a leer la máscara de texto. Bien, entonces el color de este texto parece ser, o mejor dicho debería decir que este texto necesita no ser parte de esta capa en particular. Bien, entonces, ¿dónde está mi texto? Este es mi texto. Escribamos mezquita y tiene que estar fuera de las cosas. Entonces ahora, antes lo que pasó es que Figma combinó automáticamente mi texto con la imagen de cuadro rectangular y mi forma de elipse juntas como una sola capa. Ahora como la imagen sólo está dentro de esta parte del área, se puede ver la que está resaltada en puntos azules son guiones azules. Esa parte contiene toda mi imagen. Si traigo mi texto dentro de esa parte, entonces obviamente no verás mi texto. Es porque la imagen está siendo ocupada dentro de ese texto. ¿Correcto? Ahora queremos que esta máscara tenga alguna imagen en formato maestro. Entonces para eso, en realidad voy a preferir, debería decir que escribiré todo en mayúsculas. Tratemos de mover este texto a algún lugar por aquí. Hagamos esto audaz, bien, ya es audaz. Intentemos cambiar el tipo de fuente o familia de fuentes. Cambiémoslo a Roboto. ¿Bien? Cuando 80 píxeles se ven bien. Bien, intentemos traer una imagen del complemento Unsplash. Entonces voy a elegir unsplash hará uso de una imagen abstracta. Así que vayamos al resumen. Voy a seleccionar esta imagen u otra. Vamos a tratar de elegir esta imagen ¿verdad? Ahora. Esperemos a que surja. Bien, intentemos escalar esta imagen. Entonces voy a escalar esto. Seleccioné la parte de la escala. ¿Bien? Así que asegúrate de escalarlo hacia abajo. Bien, Esto se ve genial. Y ahora queremos que nuestro texto esté detrás de nuestra imagen. Ahora verás que esta imagen Unsplash no forma parte del marco de mi escritorio. Entonces, ¿cómo realmente ponemos esto dentro de nuestro escritorio, escritorio a marco? Así que solo baja esto. Y ahora puedes ver que esta máscara de texto aparece frente a mi imagen. Pero no queremos que esto suceda, lo contrario el enmascaramiento no funcionará. Entonces queremos que el texto vaya detrás de nuestra imagen. Así podremos enmascarar una imagen en nuestro texto. Así que siempre que quieras enmascarar tu imagen, siempre asegúrate de que si quieres enmascarar eso en una forma o un texto o alguna de las cosas, asegúrate de que la imagen esté en el frente y la otra cosa esté en la parte posterior. Entonces solo envía esto atrás y ahora selecciona tanto tu imagen como el texto y haz clic derecho y usa eso como máscara. Una vez que haces eso, puedes ver que esta imagen está ahora dentro de mi texto. 18. Margen y acolchado en el diseño de UI: Ahora, antes de saltar a la parte de diseño automático en Figma, es importante para nosotros entender el concepto de margen y relleno. Ahora, ¿qué es exactamente este margen y relleno? Entonces, para resumir, margin y padding es en realidad el espaciado entre dos elementos o elementos diferentes. Para explicar esto, con la ayuda de un ejemplo, sólo puedo dibujar una caja rectangular. Entonces digamos que esta caja rectangular de, digamos de color rojo y otra caja rectangular de, digamos de color verde. Sí. Entonces el espaciamiento entre estas dos cajas rojas y verdes se llama como mi margen. margen es esencialmente el espaciado, espaciado exterior entre diferentes elementos o entre dos elementos o dos elementos. Entonces la línea punteada azul que puedes ver entre la caja roja y la caja verde es mi margen. Ahora bien, el margen es aplicable en las cuatro direcciones. Eso significa que cada vez que hablamos de margen, si quieres que el margen sea de alguna altura específica, entonces eso podría ser desde arriba, desde abajo, desde la izquierda, o desde la derecha. Entonces el margen está ahí en todas las cuatro direcciones, arriba, abajo, izquierda y derecha. Entonces si pongo otra caja de, digamos de color azul, déjame hacer esto como de color azul. Otra caja de, digamos, de color amarillo. Así que déjame ponerlo de esta manera, ¿verdad? Y mantengamos este color amarillo. Y tratemos también de traer una caja más. Podemos mantener esto como, digamos, de color negro . ¿Bien? Así se puede ver el cuadro rojo está teniendo margen desde todas las cuatro direcciones, desde la izquierda, desde arriba, desde la derecha y desde abajo. Entonces, si realmente quiero verificar si el margen o más bien vota el margen desde mi parte superior, abajo izquierda, derecha. Se puede ver que a medida que muevo estos objetos, puedo ver que hay margen desde la izquierda y desde la derecha. Se puede ver que hay 88 pixeles de longitud de margen desde mi izquierda y desde la derecha. Así es como puedo ver mi margen. El margen esencialmente es solo la distancia entre mis elementos externos. ¿Bien? La distancia entre dos elementos diferentes, es la distancia exterior entre mis dos elementos. Ahora tenemos relleno. El relleno es el espacio interior entre dos elementos. Si coloco, digamos que estoy borrando mis otras formas como el azul, el amarillo. Y déjenme también liberar a este negro. Bien, sólo tengo dos cajas, que es verde y roja. Y permítanme ampliar esta caja roja. Entonces usando la escala uno, soy capaz de expandir esto. Colocaré mi caja verde en algún lugar en el medio. ¿Bien? Entonces el espacio interior entre mi roja y la caja verde se llama como mi relleno. Llamemos como mi relleno. El relleno es, de nuevo, no son todas las cuatro direcciones desde arriba, abajo, izquierda y derecha. Entonces, antes de entrar realmente en la parte de la capa exterior en Figma, es importante para nosotros entender sobre el margen y el relleno. Entonces espero que los fundamentos del margen y el relleno sean claros para todos ustedes. 19. Diseño de autos en Figma: Bien, comencemos con el diseño automático en Figma. Ahora, el diseño automático básicamente significa que el layout que vamos a establecer para nuestro diseño va a cambiar sus propiedades automáticamente. Así que eso es lo que realmente significa auto-layout. Entonces, si traté explicar esto con la ayuda de un ejemplo, puedo dibujar un marco, digamos, de aproximadamente este tamaño. Y dentro de este marco, digamos que tengo un rectángulo de aproximadamente este tamaño. Bien, agreguemos texto dentro de esto. Entonces voy a dibujar un cuadro de texto de probablemente de este tamaño. Vamos a insertar nuestro texto. Y voy a reducir su tamaño de texto a unos 32 píxeles. Y vamos a ajustar también su altura, o mejor dicho debería decir, bien, no disminuimos el tamaño de la misma. 36 píxeles. Eso se ve genial. Y hemos configurado el cuadro de texto para que tenga altura automática. Bien, eso se ve genial. Y permítanme ajustar el cuadro de texto tal manera que tenga margen adecuado. Eso significa que el margen de esta caja rectangular y ésta debería tener el mismo desde la izquierda. ¿Bien? Entonces esto es lo que he dibujado hasta ahora. Este es mi diseño. ¿Bien? Y si quiero agregar una caja rectangular más de, digamos al respecto, de este tamaño dentro de mi marco. Entonces, ¿qué crees que va a pasar en ese caso? ¿Mi marco ajustará su altura o tal vez mojado de acuerdo con el contenido que realmente estoy agregando dentro de él? No, no lo creo. Bien, vamos a tratar de ver si arrastre esta caja dentro de mi marco. Uno, se puede ver todavía este rectángulo dos no es parte de mi marco. Entonces lo que puedo hacer es si quiero que esta caja rectangular se incluya dentro de este marco a otro marco uno, tendré que aumentar el tamaño de mi Freeman, ¿verdad? Voy a tener que seleccionar este marco. Entonces. Voy a tener que aumentar el tamaño de mi marco. Ahora, verán que este rectángulo es ahora parte o mejor dicho debería colocar esto por aquí. Ahora este rectángulo es parte de mi marco uno. Se puede ver en el panel de capas que primero tenemos este cuadro de texto. Tenemos un rectángulo, dos, rectángulo, uno, ¿verdad? Entonces esto ahora es parte de mi marco. si lo quito y lo muevo fuera de mi marco, entonces se puede ver que la herramienta rectangular no forma parte de mi marco, ¿verdad? ¿Y si tengo una cosa más? Digamos que creo un cuadro de texto más. Bien, déjame crear un cuadro de texto más. Puedes ver si arrastro mi caja rectangular dentro de mi marco uno. Ahora es parte de mi marco cuando tuve que hacerlo manualmente y agregar para aumentar el tamaño de mi marco uno también. ¿Y si quiero agregar un cuadro de texto dentro de mi marco uno? Digamos que creo un texto. Bien, déjame pegar el texto y ajustaré su altura en consecuencia. Bien. Digamos en vez de esto, todos estos textos, vamos a guardarlo solo en este punto solamente. Sí, eso se ve genial. Tratemos de incluir esto dentro de nuestro marco. ¿Qué crees que va a pasar? Vendrá adentro? No. Se puede ver que no es parte de mi marco. Tengo que aumentar eso. Si quería incluir dentro de esto, tengo que poner esto dentro mi marco uno aumentando el tamaño del marco. Entonces, el diseño automático, lo que básicamente hace el diseño automático es eso, déjame mostrarte lo que hace el diseño automático. Entonces lo que voy a hacer, simplemente colocaré mi rectángulo fuera de este marco uno. Déjame disminuir el tamaño del cuadro. Entonces usaré mi marco uno. Disminuiré el tamaño del cuadro. Seleccionaré este marco, y configuraré esto para agregar diseño automático. Entonces esta es una manera. También puedes ver que la tecla de método abreviado para agregar diseño automático a tu fotograma es Shift. Mantener presionado el botón de cambio y presionar D en su teclado. O en el panel de propiedades de diseño también verá el icono de diseño automático. Y además de esto, tendrás este ícono más. Una vez que haga clic allí, encontrará que se ha agregado el diseño automático. Así que puedo establecer esto como auto-layout. Se puede ver que ya se ha agregado. ¿Por qué es eso? Porque hice clic aquí en el ícono más. Así que ahora se ha agregado el diseño automático a este marco. Y se puede ver, ahora se puede ver que también se ha cambiado el icono del marco uno . Si deshago usando Control Z, verás que inicialmente el logo de frame one tenía este tipo de tic-tac-toe box. Se pueden ver dos líneas verticales y dos líneas horizontales justo por aquí. Una vez que configuré esto en diseño automático, se puede ver que el icono de mi marco ha sido cambiado. Esto indica que todo este marco tiene diseño automático. Ahora bien, si trato de agregar una caja rectangular dentro de mi marco, ¿qué crees que va a pasar? Se puede ver que la altura del marco se ha ajustado automáticamente. ¿Y si intenté agregar este texto dentro de mi marco? Se puede ver que el cuadro de texto también se ha agregado dentro de mi marco. Ahora no verás el texto en sí porque el texto es de cuello blanco. Déjame cambiar eso a color negro. Así que sólo puedo ir a Llenar. Puedo seleccionar negro. Y ahora podrás leer el texto. ¿Bien? Entonces así es como trabajas con el diseño automático. Ahora, verá que cualesquiera elementos que estemos agregando dentro de un marco que se ha configurado para auto layout. La altura se está ajustando automáticamente. ¿Y si quisiéramos ajustar su ancho en consecuencia? ¿Cómo podemos establecer nuestro diseño automático de tal manera que cualquiera que sea el elemento que agreguemos otro marco, el ancho aumente en lugar de la altura Entonces, ¿qué necesitas para hacer esto? Seleccione su marco, vaya al panel de propiedades de diseño. Despliega esta parte de diseño automático y verás estos iconos. Entonces este icono en particular, digamos es que se ha puesto en dirección vertical. Si cambio eso a dirección horizontal, verás que el ancho se ajusta automáticamente de acuerdo a los elementos que tenemos. Así se puede ver que los elementos están ahora siendo en un formato vertical u otro formato horizontal. Entonces esta es mi dirección horizontal, ¿verdad? Entonces, si agrego un elemento más dentro de este, la altura se ajustará en consecuencia. Bien, ahora ¿qué significa este estado en particular, este ícono en particular? Esto significa que el espaciado entre los elementos, por lo que actualmente se ha establecido en 53 píxeles. Ya que esta no cuenta con ninguna otra unidad. Sabemos que esta tiene unidad de píxeles. Si tuviera un grado o una unidad porcentual, todos deben ser conscientes de que no es una unidad de píxeles. Ahora mismo, esta no es unidad de píxeles. Entonces si configuro esto de 53 para dejar decir 60, entonces verás que esta caja va a aumentar y su tamaño. Se puede ver que se ha incrementado el espaciado entre este cuadro de texto y este cuadro rectangular. El área sombreada en rojo es la región que es el espaciamiento entre mis diferentes elementos. Esos son mis 60 píxeles de espacio entre diferentes elementos. Ahora anteriormente todos ustedes han aprendido sobre el relleno y el margen, ¿verdad? ¿Y si quiero agregar relleno desde arriba e abajo? Entonces, ¿cómo voy a hacer eso? Entonces déjame deshacer del fotograma uno. En este momento, se ha puesto en dirección horizontal. Cambiemos eso a dirección vertical. Y verás que así es como se ve. Bien, intentemos arrastrar una caja rectangular del marco para que ya no sea parte del marco. También movamos nuestro cuadro de texto fuera del marco. Entonces ya no forma parte del marco. Se puede ver que el tamaño del marco se ha reducido ya que hemos establecido nuestro marco en auto-layout y en la dirección vertical. También se puede ver que el espaciado entre el elemento, digamos 60 píxeles. Ahora, ya has aprendido sobre el acolchado. Y si quiero agregar relleno, que es el espacio interior entre mi marco y la caja rectangular. Si quiero que eso suceda, entonces lo que pueda hacer, solo puedo seleccionar mi relleno vertical por aquí. Y puedo cambiar eso a de 42 para dejar decir 60. Una vez que haga eso, verán el espaciado desde arriba, abajo se ha incrementado. Déjame mover este cuadro de texto justo por aquí. Bien. Déjame mover esto por aquí, ¿verdad? Entonces ahora podemos ver el texto. Más bien, el espaciado entre esta parte y esta parte ha sido de 60 píxeles. ¿Y si quiero que sea de igual tamaño? Eso significa desde arriba, abajo, desde la izquierda o hacia la derecha. También primero echemos un vistazo de manera horizontal. Y si quiero manipular solo el relleno desde mis direcciones izquierda y derecha, entonces puedo elegir esto para que sea 100. Y se puede ver que este tamaño se ha incrementado, esto, y esta región se ha incrementado a 100 píxeles. ¿Y si quiero eso? Quiero establecer que todas estas direcciones deben tener el mismo relleno. Entonces puedo elegir esto para ser 60 también, y este para ser 60 también. ¿Y si solo quiero manipular el área de relleno desde la parte superior, desde abajo, o desde la izquierda o la derecha? ¿Puedo manipular el relleno individual? Sí, claro que puedo hacer eso. Simplemente seleccione su marco, vaya a este diseño automático y seleccione esta parte que dice relleno independiente. Una vez que haga clic allí, encontrará desde el relleno izquierdo, acolchado superior, desde el acolchado derecho y desde el relleno inferior. Para que puedas ingresar los valores que te gustaría ver en tu diseño. Una cosa más que podrías ver por aquí es que esto se establece en la alineación superior izquierda. ¿Qué significa esto básicamente? Digamos que aumento el tamaño del cuadro. Déjame borrar esta caja rectangular y esta caja de texto. Voy a borrar estos dos para mostrar lo que realmente significa. Y además, también me alejaré a cerca del 50 por ciento. Intentemos aumentar nuestro marco. Entonces como puedes ver, si aumento el tamaño de mi fotograma, seguirás viendo que mi contenido, que es el cuadro rectángulo y mi cuadro de texto, sigue pegándose a la sección superior izquierda. No se ajusta en consecuencia porque la alineación se ha establecido en la parte superior izquierda. Si quiero que mi, esta caja rectangular y esta parte sea la línea central, entonces puedo seleccionar por aquí. Y ahora se puede ver que se está alineando perfectamente con el centro. Si quisiera estar en la posición más a la derecha, pero al centro con respecto al eje y. Puedo seleccionar esto si quiero que esté en la parte superior con respecto al eje y, pero alineado al centro con respecto al eje x. Puedo seleccionar esto y solo puedes jugar con otras direcciones donde te gustaría colocar tus elementos. Entonces se trata de tu diseño automático. Una última cosa que nos queda por cubrir para esta conferencia es que también podemos tener diseño anidado en auto-layout en Figma. Ahora, lo que básicamente significa el diseño automático anidado es ese término, diseño automático dentro de un diseño automático. Entonces digamos que tengo este marco, ¿de acuerdo? Tengo este marco en particular. Puedo seleccionar este marco uno. Y puedo sostener, más bien, debería decir que puedo seleccionar este fotograma uno, puedo sostener Mayús y un botón. Y ahora se puede ver que también hemos formado un marco al interior del cual tenemos un marco uno. Así que ese es mi auto-layout anidado. Lo que quiero decir es que digamos que creo una caja rectangular. ¿Y qué pasa si quiero colocar esto dentro de mi diseño automático anidado? Si arrastro esto a mi marco dos, puedes ver, bien, simplemente arrastraré esto y lo colocaré dentro de mi marco dos. Entonces ahora puedes ver que ahora es parte de mi marco a ahora es parte de mi marco para enmarcar uno. Esta parte donde tiene este cuadro de texto y el cuadro rectángulo pequeño es mi marco uno, rectángulo dos y el marco uno son ambos la parte de mi marco a que se establece en auto layout y en dirección vertical. Si quiero que esto sea en dirección horizontal, verán así es como aparece. 20. (19) Principios de formato en Figma: Bien, sigamos con los principios de formateo en Figma. Ahora hay cuatro principios formativos clave que debes tener en cuenta. El primero es la agrupación. Entonces tenemos, ya sabes, enmarcar, copiar y duplicar. Entonces echemos un vistazo a cada una de ellas. Por ejemplo, supongamos que tienes un marco, digamos, de aproximadamente este tamaño. Y dentro de este marco, voy a crear uno, digamos una estrella. Derecha. Ahora. Esta es una forma de estrella. Déjame mover el sitio. Y voy a crear un texto diciendo que esto es una estrella. ¿Bien? Permítanme también aumentar el tamaño de este texto. Entonces aumentemos el tamaño de la fuente a tal vez aproximadamente, digamos 24 píxeles. Vamos a probarlo con 32. Esto parece mucho más legible. Entonces este es un texto. Creemos también un texto más, que diría algo así como, cuántos lados inicia esto tiene 1,234.5. Entonces diremos que esta estrella tiene cinco lados, lados phi, y la oveja es de color gris, algo así. Y tratemos también de disminuir el tamaño de la fuente a unos 20 píxeles, ¿verdad? Sí, se ve bien. Una cosa más, déjame reorganizar. Más bien, debo decir que debo alinearlo correctamente. Este también. Por aquí, escribiría algo como esto. Bien, sí, esto se ve genial. Entonces tenemos tres cosas en nuestro marco. Primero tenemos nuestra forma, tenemos este texto, y luego tenemos la descripción de este texto. Ahora bien, si tengo que agrupar este elemento y este elemento juntos, ¿cómo puedo hacerlo? Yo sólo puedo seleccionar esta. Puedo mantener presionada la tecla Mayús y puedo hacer clic en el otro elemento. Ahora podemos ver en el panel de capas que estos dos textos han sido seleccionados hasta el momento. Si quiero agruparlos, tendré que presionar mi tecla Control o Comando si estás usando el MacBook y controlar G. Una vez que lo hagas, puedes ver que se ha formado un grupo. Dentro de este grupo, tenemos estos dos elementos textuales. Entonces ahora con la ayuda de este grupo, lo que puedo hacer, simplemente puedo arrastrarlo y colocarlo donde quiera . Esto ha formado un grupo entero. ¿Bien? Entonces este es un grupo. Si quiero agrupar esta forma junto con esta forma, entonces ese sería un grupo anidado. Porque podría ser un grupo dentro de un grupo. Así que tú también puedes hacer eso. Nuevamente, simplemente seleccione este elemento, que es nuestra forma de estrella. Mantenga presionada la tecla Mayús, seleccione su otro grupo o cualquier otro elemento que le gustaría agruparlos y mantenga presionados sus botones de control y G. Una vez que hagas eso, te darás cuenta de que esto ahora se ha hecho todo el grupo. ¿Correcto? Ahora, dentro de este grupo dos, encontrarás que este grupo dos tiene forma de estrella y grupo cuando sí mismo. Este grupo uno contiene estos dos elementos de textos. Entonces así es como agrupas diferentes elementos dentro tu marco o en Figma. Bien, así es como los agrupa. Ahora, vamos a entender cómo podemos copiar estos elementos. Digamos que quiero copiar mi grupo un elemento, no todo el grupo dos, sino más bien solo elemento Groupon. Digamos que tengo otra, otra forma, algo así como, digamos un polígono. Entonces voy a crear un polígono. ¿Bien? Y quiero este grupo uno. Entonces, lo que voy a hacer, mantendré presionada la tecla Control. Si estás usando Mac, sería comando y presionaría el botón C, que es control de copia, C es copiar. Ahora he copiado todo este grupo, uno, que tiene dos elementos de texto, ¿verdad? Primero, el nombre de nuestra forma y la descripción de nuestra forma. Si quiero pegar este texto debajo de mi polígono, ¿cómo voy a hacer eso? Sencillo, voy a usar control V. Ahora bien, aunque tengo pulse el control V, y en el panel de capas se vería que otro grupo llamado Groupon con este texto se ha formado otro grupo llamado Groupon. ¿Correcto? Entonces, ¿por qué no podemos ver nuestro elemento de texto que acabamos de pegar en este momento? Es porque ha pegado justo sobre eso. Entonces, si arrastro esto, encontrarán que esta es nuestra copia de nuestro grupo uno. ¿Correcto? Ahora puedo manipular este texto seleccionando esta parte. Puedo decir que esto es un polígono. Este polígono. Tiene tres lados. Y la forma es de color gris , ¿verdad? Entonces así es como formas u otros copias diferentes elementos y los pegas. Entonces esta es una forma de hacerlo. Otra forma es que digamos más bien debería decir que voy a crear otro marco. ¿Bien? Voy a crear otro marco. Déjame crear una elipse de aproximadamente este tamaño, ¿verdad? Vamos a darle a esto un color en el relleno. Voy a darle esto como un color verde azulado, algo así como, ya sabes, tipo aguamarina, azul claro, ¿verdad? Y me gustaría hacer una copia o un duplicado de este elemento en particular. ¿Y cómo voy a hacer eso? Puedo sostener mi botón Control y voy a usar d, que es control duplicado. D significa duplicado. Se ha formado un duplicado con una sola tecla de atajo Control D. No tengo que hacer control C y control V. He hecho Control D para hacer un duplicado de mi forma. Pero, ¿por qué no puedo ver mi duplicado? Por simple respuesta? Es sólo sobre mi elipse uno. Entonces si me arrastro, verás que formamos un duplicado. Ahora bien, de nuevo, si pongo esto o si hago un duplicado de este elemento en particular, entonces volverán a encontrar eso, no se ha formado ningún duplicado. Si vuelvo a hacer Control D, entonces ahora verás que una forma, que es, aunque fuera de un marco, puedo aumentar el tamaño de mi marco. Pero ahora está en el espacio igual, el espacio entre esta elipse, esta elipse, lo que sea, cualquier distancia que se cubriera, las mismas distancias mantenidas aquí también, ANOVA también. Entonces ahora, con la ayuda del control D, lo que sucede es que estás haciendo un duplicado de tus elementos o tu forma. Y también es mantener esa distancia que estás teniendo entre diferentes elementos, ¿verdad? Entonces puedo, lo que puedo hacer es aumentar el tamaño de mi marco. Derecha. Ahora verás que también tenemos la cuarta elipse. Entonces así es como haces duplicado de tus formas son elementos con la ayuda de Control D, comando. Bien, entonces, hasta ahora aprendiste a agrupar cosas, a hacer un duplicado, a hacer una copia. Bien, intentemos ver cómo podemos lidiar con el diseño automático. Y aunque hemos cubierto sobre cosas de diseño automático, déjame mostrarte también que lo que pasa si hacemos auto-layout al texto, no al marco, pero otros dos son texto. Pero más bien debería decir eso. ¿Qué pasa si creo una forma de rectángulo? Bien, supongamos que esta es mi forma de rectángulo. Y ahora tenemos una elipse dentro de esta forma rectangular. Bien, déjame darle esta forma de rectángulo como color rojo. Otra, esta elipse tiene un color rojo y rectángulo como cuello blanco. Bien, voy a seleccionar mi rectángulo, y voy a darle esto como un color blanco sólido. ¿Bien? Ahora bien, lo que pasa es que si quiero realmente, si realmente quiero que este rectángulo se comporte como un marco, entonces solo puedo seleccionar esto. Y puedo crear, que es la selección de fotogramas. Yo puedo hacer esto. Y ahora se puede ver que se ha formado un marco tres. Enmarca uno de nuestros polígonos. Estas cosas. Déjame mostrarte ¿a qué me refiero con eso? Así que sólo voy a alejar un poco, ¿verdad? Sí, se ve perfecto. Ahora, verás que este es mi marco a todo esto es mi marco para, este es mi marco uno. ¿Bien? Entonces dentro de mi marco tres, tengo mi rectángulo. Entonces ahora mismo mi rectángulo no está actuando como un marco. Más bien mi rectángulo está ahora dentro del marco. Si hago clic en este marco, verás que la maraña ahora forma parte de mi marco, ¿verdad? Si muevo este fotograma, verás que la elipse está en su posición original. No se mueve junto con el marco. Normalmente lo que pasa es eso, déjame mostrarte a qué me refiero con eso? Si digo eso, quiero mover este marco que tiene nuestra estrella de un polígono y todas esas cosas. Si quiero mover todo el marco, entonces todo el asunto, todos los elementos dentro de este marco también se moverán junto con él. Se puede ver, pero esto no está pasando con nuestro marco tres. ¿Por qué es eso? Porque si miras muy de cerca el panel de capas, encontrarás que la elipse no forma parte de nuestro marco tres. Si quiero que esta elipse sea parte de nuestro marco tres, tendré que traer esto dentro de nuestro marco tres. ¿Correcto? Ahora bien, si muevo mi marco tres, verás que las elipses también se mueven junto con él. Entonces este es el concepto de enmarcar. Hasta ahora hemos aprendido sobre enmarcar, agrupar, copiar y duplicar, ¿verdad? Aprendamos lo último que tenemos que cubrir para esta parte. Permítame agregar un texto. Entonces lo que voy a hacer es digamos que tengo un texto y no es parte de mi encuadre. Es solo en el área de espacio de trabajo de Figma. Y quiero agregarle marco. Entonces, ¿cómo podré hacer eso? Solo puedo agregar un diseño automático, ¿verdad? Hemos aprendido sobre el auto-layout en las conferencias anteriores. Si quieres conocer más al respecto, solo puedes referir esas conferencias. Otra vez. Escribamos un texto sencillo diciendo que se trata de un sencillo. Siguiente. Bien. Ahora se puede ver, aunque he creado este texto, texto es de color blanco y no tiene fondo alguno porque esto no forma parte de ningún marco. Si quiero agregar este marco interior, solo puedo agregarle un diseño automático, ¿verdad? Entonces se puede ver un marco es más bien, debería decir que el texto ahora forma parte de mi marco. Se puede ver por aquí. Ahora bien, lo que sucede es que dado que este es ahora un diseño automático, en realidad también puedo especificar la dirección del diseño automático. Si quiero que sea dirección vertical, dirección horizontal. Ya sea que quiera que este elemento esté alineado a la parte superior izquierda o al centro, puedo hacerlo. Pero una cosa que es importante es que este marco no tiene color. Entonces puedo agregar un relleno a esto. Una vez que haga eso, verán que se ha agregado un color blanco. Ahora si tengo que seleccionar mi texto, puedo cambiar este color a negro. Ahora podrás ver nuestro marco de texto correctamente. Puedo agregar texto o puedo hacer algunos cambios en él. Algo así como, digamos que este es un texto. Sólo puedo quitar la palabra simple. Y ahora el tamaño del fotograma también disminuye simplemente porque todo este texto ahora es parte de mi marco y ahora es un auto-layout, ¿verdad? Entonces así es como lo hacemos. Ahora, incluso puedes agregar un diseño automático a una forma también. Entonces vamos a ver. Agrega un diseño automático a tu elipse, entonces incluso puedes hacerlo. Así puedo seleccionar toda esta elipse. Puedo agregarle un diseño automático. Y ahora el marco tiene esta elipse dentro de él. Entonces así es como funcionan realmente los principios de formateo en Figma. 21. Limitaciones y cambios de tamaño de la figura: Bien, sigamos con las restricciones y el cambio de tamaño en Figma. Ahora, ¿qué significa realmente las restricciones? Así que las restricciones son una forma de poner nuestros artículos en una posición fija. Entonces intentemos entender con la ayuda de un ejemplo. Digamos que creo un marco de aproximadamente este tamaño. Y puse una elipse algún lugar de aquí en la posición superior izquierda. Y déjenme darle un color a esta forma en particular, en algún lugar así. ¿Bien? Ahora bien, lo que pasa aquí es que si realmente cambio el tamaño de mi cuadro, si lo expando, ya sabes, desde el lado derecho, la posición de mi esta elipse en particular no cambia. Si me aumento de este lado, está cambiando. ¿Por qué es eso? ¿Por qué se pega a su posición superior izquierda? Porque en el panel de propiedades de diseño, si miras de cerca, verás que las restricciones en realidad se han establecido de manera predeterminada a izquierda y superior. Izquierda significa que en la dirección horizontal. Eso significa si intentas estirar, apretar tu marco desde el lado derecho o desde el lado izquierdo. Tu forma, el elemento elipse que ha sido seleccionado en este momento, siempre trató de permanecer en el lado más a la izquierda. Y en el eje y, eso significa que si intenté expandir o apretar mi marco desde la posición superior o desde la posición inferior, intentará permanecer en la posición más alta. Déjame mostrarte lo que quiero decir con eso. Si traté de apretar mi marco de abajo hacia arriba, entonces verás que la elipse no cambia su posición. Pero si traté de apretar la posición de mi marco de arriba a abajo, entonces verás que mi elipse está tratando de permanecer en la mayor parte superior de mi marco. Entonces eso es posible por las limitaciones. ¿Verdad? Ahora. Intentemos imitar uno, ya sabes, el diseño de sitios web. Entonces lo que voy a hacer, sólo voy a crear un icono de hamburguesa. Entonces, el ícono de la hamburguesa, ya sabes, ícono de la hamburguesa es solo esas tres líneas. Y una vez que hagas clic por allí, verás tu barra de navegación. Entonces eso es lo que hace básicamente tu ícono de hamburguesa. Entonces voy a hacer una réplica de ella. Esta línea, hamburguesa tiene básicamente tres líneas, así que vamos a hacer eso. Sí, así es como se ve realmente mi icono. Bien, déjame agruparlos. Muy bien, voy a agruparlos con la ayuda de control G. Y déjame cambiarle el nombre a, ya sabes, voy a cambiarle el nombre a hamburguesa de jamón. Hamburguesa. Y tratemos también de agregar algunos elementos de texto. Digamos a casa. Entonces voy a crear uno sobre. Así que vamos a dar esto tiene sobre, también intentemos aumentar un poco nuestro tamaño de marco para que tengamos algo de espacio para agregar nuestro contacto. Contáctanos también. Así contactado. Bien, intentemos agrupar estos tres elementos de navegación. Entonces déjame renombrar esto también, diciendo que la navegación, bien, marina. Bien. Intentemos moverlos para que aparezca en algún lugar así, ¿verdad? Se ve bien. Y tratemos cambiar el tamaño de un marco de tal manera que aparezca como si fuera una vista de móvil o tableta. Bien, intentemos fijar esta posición de mi icono de hamburguesa a la izquierda o a la parte superior. Y pondremos esto de una manera que en la dirección horizontal, siempre sepa con el lado más derecho. Y en el eje y se queda al lado más alto. Ahora bien, una vez que haga eso, ¿qué pasará si intentara aumentar o disminuir el tamaño de mi marco? Entonces, si traté de reducir el tamaño de mi marco, verás que este ícono de navegación, este botones de navegación como tu casa sobre contacto. Todos están tratando de quedarse al lado derecho de nuestro marco. Si trato de aumentar el marco desde el lado más a la izquierda, entonces verás que el ícono de la hamburguesa se queda al lado más a la izquierda. Pero estos elementos de navegación, que es hogar y contacto, no están cambiando de posición porque está tratando de pegarse al lado más derecho. Si traté de aumentar desde abajo, entonces no verás que ocurra ningún cambio. Se quedarán en su posición. Pero si trato de disminuir desde arriba o aumentar desde arriba el tamaño de mi marco obviamente, entonces intentará mantenerse en la posición más alta. ¿Qué pasa si trato de seleccionar mi icono de hamburguesa y si cambio las restricciones de izquierda y de izquierda para dejar decir centro, entonces qué pasará en ese caso? Si trato de aumentar el tamaño de mi cuadro en la dirección horizontal, entonces verás que el icono de la hamburguesa también cambia de posición. Porque ahora se trata de pegarse a la posición más central con respecto a la expansión en el lado más a la izquierda. Pero si lo deshago, y si aumento el tamaño de mi posición o el tamaño de mi marco. Desde la parte superior o inferior la mayor parte, entonces no verás que ocurra ningún cambio. Se trata de pegarse en su mayor parte porque en el eje y, hemos seleccionado que se adhiera a la parte superior. Si cambio eso a centro, entonces ahora verás el cambio. Déjame tratar de disminuir. Entonces no verás el ícono de la hamburguesa. ¿Por qué es eso? Porque está tratando de pegarse a la posición central. Si traté de aumentar, entonces verás que está tratando de bajar. Eso significa que con respecto al eje y, mi ícono de hamburguesa está tratando mantenerse en la posición más central. Para que puedas jugar con otras direcciones para ver cómo reaccionaría nuestro elemento. Así que déjame alejarme y ¿dónde está mi marco? Entonces aquí tenemos nuestro marco. ¿Bien? Entonces espero que los fundamentos de sus limitaciones sean claros. Tratemos de entender sobre el cambio de tamaño. Ahora bien, cambiar el tamaño es más o menos lo mismo que las restricciones. La única diferencia es que las restricciones generalmente se aplican a los elementos o elementos que forman parte de la disposición normal del marco. Mientras que el cambio de tamaño es aplicable a aquellos elementos o elementos que pertenecen a un marco que está en un formato de diseño automático. Bien, entonces veamos cómo podemos usar el cambio de tamaño. Entonces lo que voy a hacer es que voy a crear un marco. Bien, déjame dibujar un marco de, digamos sobre este tamaño. Y voy a agregarle un diseño automático. Entonces agregaré un diseño automático y agregaré un elemento, que es rectángulo dentro de este marco. Ahora, dado que este marco es ahora parte de nuestro marco para enmarcar a sí mismo es un diseño automático. Puedes mirar este ícono en particular. Este icono significa que este marco está en diseño automático, mientras que este icono significa que el marco está anormalmente fuera. Entonces ahora auto-layout, todos sabemos lo que sucede en eso. Básicamente cambia el tamaño de mi marco con respecto a los elementos dentro de mi marco. Eso es lo que hemos hecho hasta ahora. Ahora verán que aunque he agregado mi rectángulo dentro del marco, e inicialmente el tamaño de mi marco era demasiado pequeño comparado con lo que es ahora mismo. Pero a medida que aumento el tamaño de mi rectángulo, el tamaño de mi marco también aumentó, pero aún así podemos ver algún hueco entre mi rectángulo y mi marco. A esto se le llama relleno. También hemos cubierto esas cosas antes. Pero, ¿qué pasa si trato eliminar todo el relleno de las posiciones? Eso es desde la posición X, Y. ¿Qué pasa en ese caso? Seleccionaré mi marco. Iré al panel de propiedades de diseño. Y por aquí verás el relleno desde posición horizontal y desde posición vertical. Entonces si cambio de diez a digamos cero, x, y, y de dirección y también cero. Entonces verás que el rectángulo no está ocupando espacio extra. O mejor dicho debería decir que no hay relleno dentro del marco. Y el rectángulo se pega exactamente con el tamaño de mi marco, ¿verdad? Entonces esta es mi manera que estoy tratando de representar. Ahora, ¿qué pasa en este caso, si selecciono mi rectángulo, esta forma en particular? No vas a ver las restricciones. Manera de las restricciones. Lo que solíamos ver antes. No podemos verlo en este momento, porque ahora mismo tenemos todo esto en un formato de auto layout. Deberíamos ver cambiar el tamaño del panel, derecha, en lugar de restricciones. Entonces, ¿cómo podemos ver eso? ¿Qué debemos hacer para hacer eso? Entonces lo que podemos hacer es dentro de este rectángulo, o mejor dicho debería decir dentro de este marco, ya verás el rectángulo en la parte de auto-layout justo por aquí donde se cierne mi cursor. Verás que el rectángulo ahora se pega a la alineación superior izquierda. Si llego a la alineación central y si trato de aumentar el tamaño de mi marco, verás que ahora el rectángulo se pega a la posición más central, ya sea que se supone que sea con respecto al eje x, se supone que es con respecto al eje y. El rectángulo está en la posición más central. Esto es posible porque en la parte de auto-layout, seleccionamos que nuestro rectángulo de elemento debe estar en el centro, alineado, ¿verdad? Eso es lo que hemos hecho hasta ahora. Ahora bien, si quiero eso, quiero que esto tenga uno redimensionando elementos, entonces ¿cómo podemos hacer eso? Así que sólo puedo seleccionar este elemento rectángulo en el panel de propiedades de diseño. El extremo fijo, estos horizontales es básicamente mi redimensionamiento horizontal. Este es mi redimensionamiento vertical. Entonces ambos están por defecto establecidos en fijos. Si cambio de fijo a dejar decir llenar contenedor, entonces ¿qué crees que va a pasar en ese caso? Ahora mismo, este ancho fijo básicamente significa que no importa que aumente el tamaño de mi marco, habrá algún tipo de espaciado entre mi marco y mi rectángulo. Aunque no hemos usado ningún tipo de relleno, pero aún así habrá algo de espacio porque ahora mismo el tamaño de mi marco es mayor que el tamaño de mi rectángulo. Y el triángulo se ha fijado a fijo. Cambiar el tamaño. Se ha dicho para establecer en ancho fijo. Y el rectángulo está ahora en el centro más alineado con respecto al eje y y x, ¿verdad? Ahora bien, si cambio eso a esto, lo que significa que este rectángulo tiene que llenarse contenedor, entonces eso significa contenedor. ¿Qué significa básicamente contenedor? El contenedor actúa como una caja, un compartimiento de almacenamiento. Eso es lo que básicamente significa contenedor. Entonces rectángulo o mejor dicho debería decir que el marco ahora está actuando como un contenedor. Y ahora estás diciendo que el rectángulo debería ocupar su tamaño según el contenedor. Entonces no importa cuánto sea el tamaño de mi marco, ampliará su tamaño y se estirará. El elemento. Rectangular por aquí está ocupando el ancho máximo que puede hacer, e intentará tocar los bordes de mis tres. Esto es posible porque hemos hecho contenedor lleno con respecto al eje horizontal. Si hago eso para eje vertical también, también lo hará así. Entonces en estos momentos no tenemos ningún relleno. Nuestro rectángulo también es la línea central. Y el tamaño de mi marco también puede disminuir. O mejor dicho debería decir, el tamaño de mi marco, no un enredado, el tamaño de mi marco puede disminuir y aún así mi rectángulo enrollado disminuir. Ocupará el tamaño de mi marco con respecto al mismo. Cambiará su tamaño. El rectángulo va a cambiar su tamaño con respecto al tamaño de mi marco porque hemos usado el redimensionamiento que debería llenar su contenedor, ¿verdad? Entonces si expando, entonces se puede ver que el rectángulo también se está expandiendo. Esto es posible debido al cambio de tamaño. Bien, intentemos ver otro ejemplo. Y si creo, o mejor dicho debería decir, volvamos a nuestro marco uno donde tenemos disposición normal. Bien, tenemos capa normal. No tenemos auto-layout para este famoso. Bien, tenemos un ícono de hamburguesa, tenemos nuestras herramientas de navegación, ¿verdad? ¿Y si quiero agregar un texto dentro de este marco en particular? Entonces digamos que quiero agregar un cuadro de texto. Bien, lo he dibujado XBox. Voy a hacer clic derecho en este marco. Iré a mis plugins. Y ahora se puede ver que tengo un plugin llamado como Lorem Ipsum. Si no tienes este, solo tienes que ir a buscar más plug-ins y buscar el plugin Lorem Ipsum. Solo trata de ejecutar esto. Ahora bien, lo que hace este plugin es básicamente que trata de generar algún texto aleatorio. Y ahora nos va a pedir que realmente seleccionemos algunas capas de texto. Entonces voy a seleccionar esta capa de texto. Y por aquí, nos pregunta si quieres generar algunas diez palabras y frases aleatorias, diez caracteres, diez párrafos, lo que quieras. Entonces digamos que quiero generar diez oraciones, o reduzcamos a cinco oraciones. Bien, voy a generar esto. Y ahora verán así es como realmente aparece, pero no queremos que esto aparezca de esta manera. Y otros, quiero que esto ocupe altura auto. ¿Bien? Y quiero cambiar el tamaño de mi cuadro de texto. Entonces, ¿cómo haría eso? Déjame mover esta posición. Y lo que puedo hacer es por aquí, puedo reducir el tamaño de mi cuadro de texto. Bien, intentemos reducir el tamaño de mi cuadro de texto en algún lugar así. Ahora se ve genial. Y tratemos de hacer esto teniendo altura automática. Ocultar automáticamente. Eso significa que, no importa cuántas palabras o caracteres diferentes agrego dentro de mi cuadro de texto, mi altura también aumentará o disminuirá en consecuencia, ¿verdad? Eso es lo que básicamente significa. Intentemos alinear esto de tal manera que no importa lo que haga con mi amigo, este cuadro de texto permanece en la posición más central. Entonces intentaremos alinearlo en el centro. Bien. Así me gustaría que fuera mi cuadro de texto. Y dentro de mis restricciones, me gustaría que esto estuviera en la posición más central con respecto al eje horizontal o x y al eje y también, me gustaría que esto estuviera alineado al centro. Entonces ahora si trato de manipular mi fotograma, digamos que si disminuyo el tamaño de mi fotograma, verán que mi cuadro de texto aún permanece en la posición más central, ¿verdad? Este icono de hamburguesa debe quedar a la izquierda y arriba. Muy bien, ahora si traté de aumentar el tamaño de mi marco, verán todavía este cuadro de texto está en el centro, ¿verdad? Esto es lo que hemos hecho con la ayuda de las limitaciones, ¿verdad? Entonces se trataba de eso. Déjame volver a mi hamburguesa. Espero que esté en la parte superior izquierda. Sí. Vamos a la siguiente parte, que es alinear u otra aplicando el concepto de redimensionamiento a nuestro texto. Digamos que agrego algo de texto por aquí. Déjame dibujar un cuadro de texto, o mejor dicho debería decir que en lugar de primero un cuadro de texto en blanco, déjame simplemente hacer clic derecho sobre aquí. Generar algún texto aleatorio de unas cinco oraciones a sobre esta caja. Bien, generado. Por lo que ahora se puede ver que se han generado cinco frases. Y seleccionaré todo este cuadro siguiente y aplicaré altura automática. Bien, genial. Esto es lo que queríamos. Intentemos agregar un diseño automático a este cuadro de texto en particular. Así que voy a agregar auto-layout a este cuadro de texto. Así que simplemente haz clic derecho y agrega un diseño automático. Y se puede ver que se ha agregado el auto-layout a estos textos en particular, lo que significa que ahora este marco tres contiene texto. fotograma tres no es visible, pero el texto es ahora parte de mi fotograma tres. ¿Bien? Ahora puedo darle a este marco tres cuando este color. Entonces intentemos agregar un color de fondo de, digamos gris, ¿verdad? Un color verdoso. Color gris. Y el texto tendría negro, amarillo, ¿verdad? Intentemos darle a esto un color negro. Fresco. Esto es lo que queríamos. Ahora bien, qué pasa en este caso, si selecciono mi texto, verás el redimensionamiento de uno. Tiene Hub contiene, tiene contenedor lleno. Tiene un ancho fijo en este momento, seleccionado y con respecto al eje y, tiene un contiene. Ahora bien, ¿qué pasa si trato de disminuir el tamaño de mi marco? Verás que está disminuyendo el tamaño de mi marco, pero el texto ahora está fuera de mi marco. El cuadro de texto no está ajustando su tamaño de acuerdo con el tamaño de mi marco. Entonces, ¿cómo vamos a cambiar eso? Puedo seleccionar mi texto y puedo hacer lo mismo, que es contenedor lleno. Ahora bien, si trato de disminuir el tamaño de mi fotograma con respecto al eje x, entonces verás que el tamaño de mi cuadro de texto también aumenta altura porque ahora está tratando encajar el contenedor, ¿verdad? Eso es lo que queríamos. Entonces así es como somos capaces de hacer esto y atar cosas. Ahora, ¿y si agrego todo este frame tres insight, otro frame que no es un auto-layout lo, lo que sucede en ese caso, vamos a tratar de crear un frame de aproximadamente este tamaño. Agreguemos este marco tres dentro de mi marco para lo que sucedería en ese caso. ¿Qué pasaría? Vamos a tratar de averiguarlo. Así que déjame alinearlo en algún lugar por aquí. Voy a seleccionar este marco tres. Ahora una cosa a tener en cuenta por aquí es que una vez que agregamos un fotograma tres, que en sí mismo es un layout automático dentro de otro frame, que no es un auto-layout , que es normalmente, entonces lo que podemos ver serán restricciones C o vamos a ver redimensionando. Bueno, la respuesta es que los veremos a los dos. Como se puede ver una vez que seleccione mi marco tres, voy a obtener opciones de cambio de tamaño, que es o bien ancho fijo o alto contiene. Y en el eje y también voy a ver estas dos opciones, y también voy a ver restricciones por aquí. Entonces en estos momentos, por defecto, se ha dicho que es la posición más a la izquierda con respecto al eje x. Y se establece en la posición superior, restricción superior con respecto al eje y. Así que solo puedes jugar con diferentes direcciones para ver cómo funcionaría y cómo se vería para tu diseño. Entonces eso fue todo de mi parte para esta conferencia en particular. Las restricciones y el cambio de tamaño es concepto muy importante para aprender en Figma diseño web o diseño de aplicaciones, simplemente porque cuando estamos tratando de hacer diseños responsive, es decir, mirar realmente o un diseño desarrollado para diferentes dispositivos, entonces debemos saber que cómo nuestro diseño respondería a ese tamaño particular de nuestro dispositivo. 22. Estilos y componentes de Figma: Bien, continuemos con estilos y componentes. Ahora, siempre que estamos tratando desarrollar un sitio web o una aplicación web, o podría ser otra aplicación. Deberíamos crear algunos estilos y componentes para nuestro diseño. Ahora, ¿por qué los necesitamos? Tratemos de entenderlos primero. Entonces, para dar un ejemplo, solo puedes echar un vistazo a mi propio sitio web. He creado mi propio sitio web utilizando tecnologías como reactant, tailwind, CSS. Entonces por aquí, si puedes ver desde la perspectiva del diseño, puedes ver que el texto es de color negro. El fondo o, ya sabes, el fondo principal resaltado de esto no es un color blanco puro. Está en algún lugar a la sombra de gris, incluso en la barra de navegación superior, verás que hay algo de tinte en este gris, ¿verdad? No está completamente oscuro, no es completamente brillante. Hay algo de sombreado gris en él. Siempre que intentemos flotar alrededor los botones de navegación como tus cursos de inicio, contáctame, verás un color azul por ahí cuando flotemos alrededor de eso. Y aquí se aplica el mismo cajero. Cuando te desplazas hacia abajo, verás que estas tarjetas, como la tecnología, yo uso, el HTML, CSS Bootstrap reaccionan, JavaScript, NodeJS, Java, todas estas cosas. Todas estas tarjetas tienen algo de sombra a ello. Tiene algún radio de borde a él. Tiene algún estilo fijo o tamaño fijo de su ancho y alto que ha sido consistente en todo el sitio web. Y en la parte inferior de mi pie. Derecha. Se puede ver en la parte inferior de mi página web, que es mi pie de página, o a través de usted puede ver mis enlaces sociales. Si flotaba alrededor de eso, verás los colores de los iconos, los colores del ícono de la marca. Entonces, por ejemplo que Twitter tiene color azul, cuadrícula hacia arriba, tiene color naranja. Entonces, cuando rondaste esos colores, cursor alrededor de esos artículos, verás los colores de la marca. Inicialmente. No verás ningún color porque tengo que mantener esa consistencia de mi diseño en todo el sitio web. Entonces eso es lo que hemos hecho. Bien, ahora, cada vez que estamos tratando de desarrollar un diseño para nuestro sitio web, lo primero y más importante es intentar crear estilos, estilos y estilos tipográficos. Entonces, ¿qué tipo de colores vamos a utilizar en toda nuestra página web? ¿Cuál será el color primario? ¿Cuál será mi color secundario? ¿Qué necesito un color de marca degradado? ¿Los necesito? Si es así, entonces seguro. Adelante e inclúyalos también. Entonces, ¿qué pasa con los colores del texto o tal vez la sombra o, ya sabes, algún fondo lo resalta Entonces esos colores también son importantes. Luego viene la parte de topografía. Eso significa qué tipo de tamaño de texto desea para el título de su sitio web. ¿Qué tipo de fuentes, familia de fuentes quieres usar? Qué tipo de peso de fuente quieres usar. ¿Quieres usar negrita? Muévete en semi negrita, nuevo, normal. ¿Qué quieres? ¿Cuánto quieres que sea el espaciado entre letras? ¿Cuánto quieres que sea la altura de la línea? Todas esas cosas se formarían en un estilo formal. Ahora, la ventaja de usar estilos es que una vez que formas un estilo, realidad puedes crear múltiples copias de esos mosaicos en otros componentes u otros estilos de tu sitio web. Lo que quiero decir con eso es, digamos en su página web de inicio, tu página de inicio, has creado el diseño del centro. Ahora en la página acerca de, tendrías que mantener realmente esa consistencia del diseño. Así que intentamos realmente manualmente tratar de pegar esos códigos hexadecimal para tu color. Intenta realmente hacer todos y cada uno de los detalles. No. Por qué no solo pegar el estilo que se le aplica en la página principal. Te hará la vida más fácil, ¿verdad? Entonces eso es lo que hace el estilo. Digamos que después de desarrollar todo el diseño, se lo muestras a tu cliente. Clientes es que ¿sabes qué? No me parece que este color sea tanto atractivo. Me gustaría cambiar los colores de los botones de, digamos, rosa, verde azulado. Así que cuando intentas ir a cada página web, como homepage sobre pagas página de contacto y encontrar todos los botones y luego tratar manualmente de cambiar los colores de rosa para saber. Si tengo el estilo que he aplicado a todos los botones, simplemente puedo cambiar el color de mi estilo. Y el resto de los cambios se aplicarán a todos los botones de mi página web, ¿verdad? Entonces esa es la ventaja de mi estilo. La competencia, por otro lado, es como digamos que quiero crear un botón, o digamos un auto como este, ¿verdad? Un auto es simplemente una tarjeta de exhibición, ¿de acuerdo? O iconos para ser así , de este tamaño. Entonces una vez creo un auto con este peso particular, altura particular, radio fronterizo particular, texto particular en el centro. Tenemos que definir la altura, anchura a partir de la cual se debe colocar el texto. Queremos que esté alineado al centro, alinee a la izquierda y a la derecha todas esas cosas se formarían en forma de componente. Entonces puedes replicar lo competente en otras páginas web o en esa misma página web, pero a un espaciado diferente. Así que esa es la ventaja de tus estilos y componentes. Tratemos de ver cómo podemos desarrollar realmente nuestro propio sitio web u otro. ¿Cómo desarrollamos nuestros propios estilos y competencia para nuestro diseño, verdad? Entonces, antes que nada, necesitaremos una marca. Logotipo. Así que al azar acabo de elegir este logotipo de marca en particular de Google. Entonces, como puedes ver, este logo tiene dos tonos. Una es púrpura o púrpura oscuro, color violeta, y la segunda es rosa, o se puede decir una tonalidad burdeos, ¿verdad? Así puedo escoger estos dos colores y los puedo usar en mi estilo. Entonces, antes que nada, necesitas instalar realmente una extensión de Chrome en tu navegador, y ese es el seleccionador de color. Así que solo puedes buscar el recogedor de color de la extensión de Chrome, y podrás descargarlos e instalarlos en tu Chrome, ¿verdad? Una vez que lo haga, es posible que vea que esta podría ser la notificación emergente de que podría obtener que se necesita acceso a archivos. Eso significa tu archivo personal, como esta imagen en particular la descargué en mi carpeta y la abrí con Chrome. Entonces normalmente lo que pasa es que cualquiera de las imágenes nuestro sistema se abra con el ImageViewer, como un visor de fotos o no sé qué pasa en Mac. Entonces, si no quieres hacer eso, solo puedes abrir con Chrome para que puedas usar la extensión Selector de Color para elegir el valor del código hexadecimal de color de este tono violeta y burdeos. Ahora puedes ir a la configuración y desplazarte hacia abajo y elegir esto, permitir el acceso a las URL de archivos. Una vez que cambies eso, puedes cerrar esta parte, puedes volver a este logotipo, hacer clic en esta extensión de Chrome para especializar, y arrastrar al color donde te gustaría elegir el color. Entonces, en algún lugar alrededor de este punto, me gustaría copiar el valor hexadecimal. Entonces solo voy a copiar mi valor hexadecimal con la ayuda de controles aquí solo puedes hacer clic en este botón, que es para copiar todo tu valor X. Regresa a tu Figma. Voy a crear un marco de, digamos tamaño de escritorio. ¿Bien? Y una vez que haga eso, lo que voy a hacer, voy a crear una forma de elipse de 160 píxeles de ancho, 160 píxeles de alto. Una vez que haga eso, voy a agregar color a esto, que es un valor hexadecimal. Entonces déjame agregar y solo asegúrate de eliminar el símbolo de libra o el símbolo de hashtag antes de tu valor hexadecimal y presionar Enter. Ahora este es mi color primario. Entonces, si quiero almacenar esto en forma de estilo, puedes ver este ícono además tu película o tu ícono más. Para que puedas ver este botón particular de cuatro puntos, que es estilo. Así que solo ve por ahí, haz clic en este plus para crear tu propio estilo y darle un nombre a esta cosa. Entonces sólo voy a dar esto como primaria. Bien, y voy a elegir esto como crear estilo. Ahora voy a hacer una réplica de esta elipse, y ahora usaré la diferenciación de todo ese color. Ahora, ¿y si el logotipo de tu marca no tiene otro color? Solo tiene un color, entonces ¿cómo vas a crear realmente un color secundario para tu diseño? Puedes usar Adobe Color. Hemos usado esto antes, ¿verdad? Así que solo puedes ir a Adobe Color y crear barra diagonal. Allá. Encontrarás este analago, vas por ahí y pega el color primario que te gustaría usar. Así que sólo voy a pegar mi color primario. Le pegaré a Enter y verás diferentes tonalidades del mismo, ¿verdad? Verás diferentes tonalidades de la misma. Entonces ahora mismo nos está mostrando este color, mostrando otras versiones del mismo, no versiones Borgoña. Si vas a monocromática o tríada, de cortesía, split, cortesía, de doble hendidura, encontrarás la combinación de colores que se ajuste a tu diseño. Entonces, todo depende de tu diseño, lo que te gustaría usar en tu diseño. ¿Bien? Pero como este logotipo en particular tiene dos colores diferentes y sí coincide con el diseño, voy a elegir este color burdeos y color violeta. Así que de nuevo, sólo tienes que ir a tu recogedor de color, recoger. Y a veces esta extensión podría no funcionar. Entonces en ese caso, lo que puedes hacer es simplemente volver a tu extensión o hacer clic en esta extensión. Para que pueda dar click en estos tres puntos e ir a Administrar extensión. Haga clic en este acceso a, tengo acceso a URL de archivo. Refresca esto, vuelve atrás, actualiza, selecciona Configuración. Nuevamente, intenta alternar esto, vuelve atrás. Y ahora podrás escoger este color burdeos. Vamos a copiar este valor hexadecimal va a ir por aquí. Vamos a pegar esto. Y antes que nada, necesito desvincular esto o desvincular mi estilo. Lo que suele suceder es que digamos que creas un componente o cualquiera no competente, pero digamos una forma o un elemento o cualquiera del ítem. Y le pegaste un poco de estilo e hizo un duplicado de ese artículo. Ahora, el artículo duplicado tendrá exactamente el mismo estilo que contiene el artículo original. Si realmente quieres aplicar algún estilo diferente, o quieres crear un estilo diferente del elemento duplicado, primero necesitas combinar el estilo del mismo. Para que pueda ver este botón desvinculado o un icono simplemente haga clic sobre entonces. Y ahora puedes volver al relleno, pegar, el código hexadecimal de color, eliminar este icono de ceniza, hacer clic en Bien, y crear el estilo, que le daría el título como secundario. Haga clic en Crear estilo y también se ha formado el color secundario, también se intentará crear otra elipse con una degradado. Entonces intentemos desvincularlos. ¿Bien? Ahora lo que voy a hacer en lugar de sólido. Hacer un gradiente lineal, uno lineal. Y ahora este color será burdeos, y este será mi, este color, este color. Entonces déjame copiar este color. Así que sólo voy a dar click por aquí. ¿Cuál es el valor del color? Déjame seleccionar el valor del color. Voy a seleccionar el valor de color y deshacer esto para que tenga este estilo primario. Vayamos por aquí. Seleccione Lineal, regrese, pegue el valor, presione Enter. No estoy seguro de por qué seleccionó el color verde? Idealmente, debería seleccionar este color, ¿verdad? Entonces intentemos escoger esto. Y si, eso es lo que tenemos. Y quiero que esto tenga de manera horizontal. Eso significa de Borgoña a violeta, quiero que la forma vaya de izquierda a derecha, algo así. Entonces esto es lo que queremos y esto se ve genial. Entonces este es mi gradiente de marca. Puedo darle un nuevo estilo a esta cosa. Así que vamos a dar gradiente de marca. Bien, vamos a crear estilo. Para que veas que hemos creado tres estilos de colores diferentes. Ahora, ¿qué pasa con nuestro próximo color? Entonces desvinculemos esto. Vamos a darle un color negro oscuro. En algún lugar, algo así. Hagamos una copia de esto. Demos esto como otro. Tratemos de cambiar la transparencia de la misma 100% o digamos 80 u otra, digamos 75%. Bien, entonces de 75 a decir 50%. Entonces cambiemos esto al 50 por ciento, luego al 50-25. Demos esto como 25%. Entonces de 25 a, digamos 10%. Entonces de diez a, digamos 5%. Hemos creado estos diferentes estilos. Intentemos guardarlos como un estilo. Entonces voy a dar esto como cien negros. Bien, negro y rojo. Este como negro 75. Así que vamos a crear un estilo llamado Black 75. Este tiene 50 negros. Este como 50, este como negro 25. Este tiene diez negros. Y éste tiene phi negro. Bien, entonces estos son estilos diferentes que hemos creado hasta ahora. Ahora, imagina que estoy tratando de crear mi sitio web. Así que de nuevo, crearía un marco de escritorio. Dentro de esto, digamos que tomo el color primario ya que puedo elegir el color del documento o los colores locales. De documentales a cierre local. Y ahora tienes la opción de elegir. Entonces sí quieres tu color primario, tu color secundario. Intentemos elegir nuestro color primario, ¿verdad? Tomé el color primario. Digamos que tengo algunos, digamos formemos una caja rectangular. Vamos a agregar un color, que será el color secundario. También agreguemos un botón a esta cosa. Entonces agreguemos un botón por aquí. Con, digamos, de un gradiente. Mi gradiente. ¿No creamos un gradiente de marca de estilo degradado? Sí, sí tenemos. ¿Y por qué no puedo verlo por aquí? Volvamos. Elija Rellenar. O mejor dicho debería decir, selecciona tu gradiente de marca, ¿verdad? Esto se ve genial y no se ve tan genial, como considerar que el fondo es de color púrpura. Entonces intentemos manipular alrededor para que obtengamos una salida deseada. O mejor dicho debería seleccionar, debo seleccionar, ya sabes, Vamos a crear un botón, un botón. Ancho de botón, digamos alrededor de un radio de 20. Bien, agreguemos algo de texto en él. Digamos que quiero que este botón tenga negro, como 25, negro 50, negro 75. ¿Eso es como 75 años? Como 75, en algún lugar adentro por aquí. Sí. Y también puedo agregar algo de texto dentro de esta cosa. Entonces déjame agregar un botón a continuación. Bien. Ahora bien, este texto de botón, me gustaría darle esto como 32 pixeles. Dos pixeles. Quiero que esto sea semi audaz. Tener alguna familia de fuentes de Roboto con el texto de la línea central. Quiero que esto tenga altura auto. Quiero que esto tenga un espaciado entre letras. Entonces digamos que el espaciado de celosía es aproximadamente cinco, 5% de altura automática. Bien, dejaremos esto como altura automática. Y vamos a darle también esto como bit automático. Bien. Eso se ve bastante bien. Entonces este es mi botón. Formo este tipo de cosas de diseño. ¿Bien? Ahora bien, si quiero crear un componente de botón, un componente como el layout, entonces ¿cómo puedo hacerlo? Si quiero que esto sea como un botón. Para que no importa cuántos botones tenga en el diseño de mi sitio web, los pueda usar. ¿Y qué puedo hacer en ese caso? Sólo puedo arrastrar todo esto. Y en la parte superior de la barra de herramientas, verás este icono en particular, que es crear tu componente. E incluso puedes ver la tecla de método abreviado, que es totalmente o control o comando en tu Mac, Alt en tu Windows, u opciones en tu Mac y botón K. Una vez que hagas eso, se creará un componente. ¿Bien? Se ha creado un componente. Ahora bien, este componente es en realidad un componente maestro, o se puede decir que este es un elemento padre y no un elemento hijo. Ahora, ¿a qué me refiero con padre e hijo? Déjame mostrarte. Este es mi padre uno, ¿verdad? Si quiero usar exactamente este mismo componente en otras páginas web o en otros marcos, o digamos en este marco mismo. Pero quiero hacer esto, quiero hacer uso de este componente. Entonces, ¿cómo voy a hacer eso? Bueno, hago uso del control D o viejo, sosteniendo mi tecla Opciones de pedido y usando mi mouse para hacer un duplicado del mismo. No, voy a hacer uso de los bienes. Sólo puedo ir a mis activos en el panel de capas. Buscaré componentes locales. Encontraré escritorio también y texto de botón. Sólo puedo arrastrarlo y colocarlo por aquí. Ahora bien, si, digamos por alguna razón mi cliente se entera de que no me gusta este texto de botón. Quiero que el texto en este botón tenga diferente color. Entonces, ¿cómo voy a hacer eso? Digamos que mi diseño contiene cientos de botones. Y el cliente dice que quiero cambiar de color a este botón. En todos los botones, quiero cambiar el color dentro de mi botón. Y ese cambio debería ser aplicable a todos los botones de mi diseño. Entonces, ¿cómo haría eso? Simplemente seleccionaré mi elemento maestro o padre. Volveré a este color. Voy a cambiar esto a gradiente. Y ahora verás que se ha formado un botón de Degradado por aquí. Se puede ver que este es mi hijo. Si hago cambios al padre, todos los elementos tendrán o mejor dicho reflejarán los mismos cambios. ¿Verdad? Espero que esto sea claro para todos ustedes. Ahora, ¿y si quiero hacer algunos mensajes de texto o, ya sabes, algún estilo tecnológico? Entonces, ¿qué voy a hacer en ese caso? Digamos que creo el texto del título. Bien, seleccionaré todo esto. Siguiente. Voy a aumentar el tamaño a, digamos 40 o 40 podría no ser suficiente entonces 48. Bien, quiero que esto tenga, digamos Josephine Sans semi audaz. Esto se ve genial. Y esto es lo que quiero para mi título. Para que pueda seleccionar todo este texto. Puedo elegir este para crear un estilo de mi texto. Puedo añadir. Y puedo nombrar esto como Título. Puedo crear uno. Otra forma es crear realmente un texto corporal también. Entonces solo puedo decir texto corporal. Ahora normalmente lo que pasa es que el cuerpo del texto suele ser, por lo general tiene un tamaño de fuente pequeño, ¿verdad? Tiene algún tamaño de fuente pequeño. ¿Dónde está mi otro? Ahora bien, para tu texto corporal, es posible que no veas las opciones de font-family. No verá las opciones de espaciado entre letras , etc. en el panel de propiedades de diseño. Simplemente porque en este momento, Figma asumió que desde que creamos otro cuadro de texto, contendría el mismo estilo que nuestro texto de título. Así que de nuevo, ahora hay que desvincular o desvincular el estilo que anteriormente contenía. Y ahora puedes cambiar el estilo de la misma. Entonces lo que puedo hacer, sólo puedo reducir el tamaño de este texto. Déjame seleccionar desvincular, cambiar el estilo a 24 de semi bowl a, digamos normal o regular. Y mantengamos esto como alineada a la izquierda. Entonces eso es lo que he hecho correctamente. Volvamos por aquí. Digamos, quiero renombrar esto para leer más. Leer más. Bien, digamos que este fotograma en particular en el panel de capas, puedo seleccionar mi escritorio para enmarcar teniendo el color, que es que puedo seleccionar el color. Puedo elegir, digamos negro 25. 25. Puede que no veas este 25 negro simplemente porque el área de espacio de trabajo de mi Figma está en modo oscuro. Entonces no verás los cambios. Entonces, si quiero cambiarme a algo como el phi negro, idealmente debería ver porque el phi negro es de color claro. A ver. ¿Vemos? No, no vemos lag phi n color negro, ¿verdad? Entonces tendré que cambiar la apariencia de Chrome, Chrome de modo oscuro a modo claro. Entonces déjame hacer eso. Bueno, cambiar el tema de mi Figma no ayudó. Básicamente, lo que debes hacer es simplemente hacer clic en el área del espacio de trabajo, ir al fondo y cambiar el color a gris. Por cierto, si quieres cambiar tu Figma de modo claro a oscuro, o tal vez de modo oscuro a modo claro o viceversa. Simplemente ve a este ícono de figma, desplegable, haz clic en Equipo de Preferencias, y simplemente elige lo que quieras, claro, oscuro o tema del sistema. Entonces eso es lo que hice. Y ahora se puede ver que este cuadro de escritorio también tiene color gris, ¿verdad? Déjame solo acercar un poco para que lo veas correctamente. Entonces, seleccionemos nuestro escritorio, escritorio a marco. Nuevamente, seleccionaremos sobre este escritorio para colorear ya que es phi negro en este momento, ¿verdad? Podemos elegir negro 50. Sí, como 50 se ve genial. ¿Qué pasa con el negro 25. 25. Entonces se ve bien, pero como 50 se ve mucho más Bueno. Entonces este es mi marco completo. Bien, digamos que estoy hablando de este componente. Tengo este particular a continuación. Bien, déjame agregar algo de texto dentro de estas cosas. ¿Bien? Lo voy a hacer. Lo que voy a hacer es dejarme agregar algo de texto dentro de esto. Digamos que estoy escribiendo ese término. Desarrollo web de pila completa y pila completa. Desarrollo Web Full Stack. Y a esto le puedo agregar estilo. Entonces, ¿dónde está mi texto? Puedo agregar estilo. Entonces puedo usar title, puedo usar title, y solo puedo arrastrar para que quede en algún lugar por aquí. ¿Dónde está mi cuerpo? Este es mi texto corporal. Déjame agregar esto a nuestro nuevo textil y agregaremos cuerpo. Bien, vamos a crear estilo. ¿Bien? Y agreguemos un estilo por aquí. Daremos esto como algún texto aleatorio. Entonces para eso, lo que voy a hacer plugins Lorem Ipsum. Bien, vamos a crear un cuadro de texto. Generar frases phi, eso sería suficiente. Ahora bien, esto ha supuesto automáticamente que usaría estilo de carrocería. ¿Por qué es eso? Porque anteriormente creó este estilo de carrocería. Por lo que ahora tiene usando el estilo de carrocería. Entonces así es como en realidad está usando estas cosas anti. Si quieres replicar estas dos cosas enteras, puedes hacerlo. Puedes usarlo por aquí, ¿ verdad? Se puede utilizar. Si quieres aumentar el tamaño de tu marco, también puedes hacerlo. Incluso puedes agregar auto-layout, ya sabes esas cosas. Cambiemos el color de este rectángulo en particular de secundario a, digamos que el sitio primario puede elegir de secundario a primario. Se ve bien. Podemos ver que así es como realmente trabajamos con estilos y componentes en Figma. 23. Introducción a los efectos y los golpes Figma: Bien chicos, comencemos con los efectos Figma y las tropas. Entonces intentemos crear una caja rectangular con color. Digamos verde. Esta sombra se ve bien. ¿Bien? Y si quiero agregar algún borde a esta caja en particular de tal vez, digamos color negro. Entonces en CSS sabemos que podemos dar una caja, ¿no? Podemos dar sobre una caja. En CSS, debes haber aprendido sobre content box y border-box. Entonces eso es lo que vamos a buscar. Entonces digamos que quiero agregar algún borde a esta caja en particular, entonces ¿cómo puedo hacer eso? Bueno, si te enfocas en el panel de propiedades de diseño, verás una opción para agregar un trazo. Entonces solo puedes agregar. Y ahora verás que se ha agregado una delgada línea de color negro como en forma de borde a nuestra caja verde, ¿verdad? El color es negro, opacidad es rojo persona. Y hay alrededor de una línea. Ahora, ¿qué significa realmente esta línea? Entonces si hago zoom esto, si hago zoom esto al nivel donde encontrarás que Figma en su núcleo son estas cajas pequeñas, ¿verdad? Hay tantas cajas pequeñas diferentes. Ahora, déjame desplazarme hasta arriba para que veas que cuántas cajas de un borde negro ocupa, para que tengas una idea ¿por qué tenemos una como valor? Entonces ahora puedes ver justo por aquí, puedes ver que tenemos una caja. Entonces esto significa que a pesar de que mi caja rectangular, la caja verde rectangular tiene 622 píxeles de ancho y 320 píxeles de alto. Este borde es ahora parte de mi caja rectangular. No está fuera de mi caja. Está dentro de mi caja, ¿verdad? Puedes ver que hemos seleccionado dentro. Esto es parte de mi caja rectangular. Si aumento el tamaño de mi borde, entonces el rectángulo, que es de color verde, intentará parecer más pequeño. Entonces ahora mismo está ocupando sólo una caja. Si cambio eso a dos, entonces verá sus cajas de herramientas para ocupantes con respecto a y porque ese es nuestro descuento, ¿de acuerdo? El ancho, o se puede decir, que sería esta altura es la altura de la caja aumenta en función del número que pones aquí. Si cambio eso de dos a, digamos 20, entonces obviamente tantas cajas estarían ocupadas alrededor de 20 cajas. Ahora para ver si nuestra caja rectangular realmente disminuye en su tamaño o no. Así que ahora puedes ver aparece la caja rectangular pero más pequeña de lo que solía hacer. Entonces, si cambio eso a 60, se puede ver que el rectángulo verde se ve tan pequeño. Pero si cambio eso de adentro a afuera, entonces ahora la caja verde se ve más grande. Pero el rectángulo, o más bien el borde, que es de color negro, ahora está fuera de mi rectángulo. Es rectángulo exterior. Ya no forma parte de esa caja rectangular. Entonces eso es lo que básicamente significa. Si cambio eso a otra vez 20, verás que así es como se ve. Tenemos una opción más que es centro. ¿Qué hace eso? Centro básicamente significa que es una combinación de interior y exterior. Por lo que 20 cajas están ocupadas dentro y fuera también. Y el centro se forma con esta línea azul. Se puede ver que esto es lo que básicamente significa realmente tu apoplejía. Puedes cambiar el color del borde si quieres que tenga color lineal, también puedes hacerlo. Déjame cambiar eso a, digamos este color, esto no va a quedar bien. Cambiemos para leer algo como rojo y el otro color a, digamos que tal vez amarillo. Y vamos a darle este color. Pero este tipo de sombra lineal. Bien. Sí, esto se ve bien, ¿ verdad? Esto se ve bien. Déjame ponerlo de esta manera para que veas el color correctamente. Queremos que ambos colores tengan el 100%. Porque se puede ver por aquí, cuando persona de TI, sí, ahora se ve bien. ¿Y qué más? Sí. Entonces así es como puedes cambiar realmente el color del borde también. Bien, veamos algunos efectos. Entonces veamos. Estoy creando otra caja. Ahora. Quiero que esta caja tenga algún tipo de sombra. En su panel de propiedades de diseño. Se puede ver un botón que es efectos. Una vez que haga clic en el icono más, tendrás una sombra paralela. Entonces ahora está aplicando alguna forma de sombra que quizás no puedas ver en este momento. Pero una vez que deseleccionar esta forma en particular, se puede ver que se forma algo de sombreado en la parte inferior de mi caja. Si selecciono esto nuevamente, tengo la opción de elegir la capa de sombra interna, el desenfoque de fondo y así sucesivamente. Pero ahora mismo, centrémonos en la sombra paralela. Entonces voy a seleccionar este icono. Veré el valor x, y valor. ¿Qué significa eso? Básicamente significa el valor de desplazamiento. Si cambio el valor x de cero a, digamos 12, luego del eje x con respecto al eje x, se está moviendo bien píxeles hacia adelante. Entonces eso es lo que básicamente significa. Inicialmente el valor de desplazamiento X se estableció en cero. ¿Entonces no hubo desplazamiento en el lado derecho o izquierdo? Correcto. Y en la y tenemos el valor cuatro. Entonces en la parte inferior verás algún tipo de sombra. Si vuelvo a cambiar eso a 12, verás que aparece sombra, derecha. También hay algo de desenfoque. Intentemos eliminar a aprender a partir de ahora. Si elimino el desenfoque, entonces ¿qué puedes ver? Se puede ver exactamente la misma forma formada, ¿verdad? Cuando cruzas la calle donde tienes algunas farolas y se forma una sombra detrás de ti. Entonces, ¿qué significa eso? La sombra se forma apretada y la sombra es exactamente la forma de tu talla. Entonces sombra en Figma, siempre que estés creando sombra para tus objetos o tus elementos o artículos, lo que sucede es que va a ocupar el mismo tamaño exacto. Incluso puedes cambiar el color de la sombra. Actualmente se ha fijado en negro, 25% de transparencia. Pero si queremos que esto tenga algún color, digamos morado, o digamos color tinte azulado, color aguamarina. Entonces puedes hacer eso. Si quieres algo de desenfoque, también puedes agregar un desenfoque. Entonces se puede ver que se le ha agregado algo de sangre a esta sombra en particular. Si quieres que se extienda. Difundir básicamente significa que ¿cuánto quieres que tu sombra extienda un efecto de mancha? Si lo pones 20, verás que se ha mancillado de todas las direcciones. Entonces esto es lo que básicamente significa en realidad una sombra paralela. Si cambias de sombra paralela a dejar decir sombra interior, verás que la sombra ahora aparece dentro de nuestro elemento. Esa es mi sombra interior, miraré dentro de la capa y el desenfoque de fondo más adelante. 24. (23) Efecto de texto en Figma: Bien chicos, permítanme mostrarles un efecto de texto genial que podemos hacer. Entonces lo que tengo en mi mente es que podemos tomar una imagen asomándose a través de nuestro texto. Entonces eso es lo que tengo en mi mente. Para eso. Lo que voy a hacer, solo voy a crear frame de tal vez aproximadamente el tamaño. El tamaño es demasiado grande. Intentemos bajar el tamaño de esto a 1080 por 1080. Y el siguiente paso nos gustaría usar cuando imagen. Entonces este es nuestro marco. Intentemos traer una imagen usando nuestro complemento Unsplash. Entonces intentemos traer abstracto. ¿Queremos un resumen o retrato? Tomemos retrato. Y tratemos de llevarnos a este tipo. Bien. Esencialmente, lo que sucede es esto. Sí, así que eso es lo que queríamos. No queríamos que esta imagen estuviera exactamente dentro de nuestro marco. Queremos que se haga de forma manual. Entonces ahora voy a colocar esta imagen dentro de nuestro marco. Ahora, ¿cómo hacemos eso? Simplemente entrando en el panel Capas, puedes arrastrar la capa de imagen debajo de tu marco. Entonces ahora está dentro del marco. Simplemente puedes moverte por donde te gustaría que estuviera SMH. Si quieres manipular con esta imagen, puedes hacerlo también. Simplemente haga clic en el relleno. Simplemente puedes bajar la saturación si lo deseas, aumentar la saturación, lo que sea que funcione mejor para ti. Quieres jugar con la exposición de contraste, adelante y haz eso. Pero esta imagen no requiere porque es simplemente tu imagen en blanco y negro. Entonces, siguiente paso, ¿qué vamos a hacer? Intentemos crear un rectángulo. Tal vez sobre esta talla. Y déjame simplemente acercar esto a cerca del 50%. Sí. Y el siguiente paso, permítame también aumentar el tamaño de la caja rectangular, algo así. Sí. A continuación, queremos que el color de esta caja sea blanco. Bien, vamos también, intentemos también crear un texto dentro de esta caja. Entonces podemos decir algo como Figma. Figma es más bien, Figma es increíble. Bien, sigma es increíble. Y ahora puedo hacer diseños de UI. Bien, algo así. Y hagamos también que este cuadro de texto de altura automática sea altura automática. Bien, el estilo de fuente es de buen impacto. Tenemos 96, ¿bien? Si queremos aumentar el tamaño de esta caja, podemos hacerlo también. Bien. Podemos hacerlo algo así. Sí. ¿Y qué queremos? Es que la caja rectangular blanca debe quedar como está. Pero este texto debería tener también la imagen y algo de desenfoque también detrás de este texto. Entonces para hacer eso, lo que podemos hacer es colocar una réplica de esta imagen manteniendo presionada la tecla Alt, colocándola en la parte superior. Así es como se vería. El siguiente paso, queremos nuestro texto. Podemos seleccionarlo y podemos usar esto, que es para usar como mezquita. Y así es como se ve nuestra salida. Cosas simples. Entonces lo que ha pasado por aquí dentro de este marco uno, Este texto ahora está actuando como una máscara sobre nuestra imagen. Y esta imagen es ahora, o más bien esta caja rectangular está en la capa superior de nuestra parte superior, no en la capa superior, sino más bien en la capa superior de mi imagen. Se puede ver justo por aquí, esta es mi imagen sobre que tenemos una caja rectangular. Dentro de esta caja rectangular tenemos nuestro texto. Y el texto se utiliza como máscara a nuestra imagen. Eso es lo que hemos hecho. Puede seleccionar este texto. Ve a los, ya sabes, tus efectos, puedes agregar, puedes agregar alguna sombra. Si quieres algo de sombra, digamos color negro con tal vez alrededor del 50% de sombra. Desenfoque para ser sobre, digamos diez X, diez Y para ser Phi. Se puede ver así es como se vería nuestra salida. Puedes ver así es como lo hemos hecho con la ayuda de los efectos Figma y las sombras. 25. Efecto de texto rebanado: Muy bien chicos, hoy estoy muy emocionada porque ahora voy a mostrarles algunas cosas de nivel profesional. Entonces lo que vamos a hacer es que vamos a rebanar nuestro texto y vamos a agregarle algo de sombra. Entonces para hacer eso, antes que nada, intentemos crear un marco de tamaño de escritorio. ¿Bien? Entonces esta es nuestra dimensión. Vamos a darle algo de color a nuestro escritorio. Entonces voy a dar naranja. Vamos a darle color naranja, quizá naranja opaco. Sí, esto se ve bien. Agreguemos algo de texto a este marco. Entonces voy a agregar el texto que está cortado. Y se puede ver que la familia de fuentes estoy usando en realidad está impactada y el tamaño de fuente es de 300 píxeles. Bueno. Asegúrese de que el texto sea la línea central, tanto con respecto al eje x como con respecto al eje y. Entonces ahora nuestro texto aparece perfectamente en el centro. Ahora, con la ayuda de la herramienta Pluma, en realidad voy a rebanar el texto. Y ahora quiero el texto de tal manera que se haya cortado en diagonal. Y se forma cierta distancia entre estas dos diagonales, la diagonal superior izquierda y la diagonal inferior derecha. Y el espacio es minuto, aunque notorio, pero no ese juego cambiando. Y queremos agregarle algo de sombra. Entonces para hacer eso, voy a usar mi herramienta pluma. Simplemente seleccione su herramienta de pluma. Lo que voy a hacer, lo colocaré en algún lugar por aquí para que pueda cortarlo directamente en diagonal. En algún lugar de aquí a la cima. Ir hacia la izquierda para que coincida con esta posición. Tráelo en algún lugar por aquí. Entonces esta parte de mi texto ha sido cortada. Ahora lo que voy a hacer, seleccionaré este vector el cual ha sido cortado junto con este texto. Y ahora lo que voy a hacer esto, restaremos la parte seleccionada. Se puede ver que esto ya se ha restado. La porción que realmente seleccioné ahora ha sido cortada conectada. Ahora lo que voy a hacer es antes que nada, tuve que seleccionar este vector. ¡Vaya! Déjame seleccionar esta parte. Y lo que quería hacer es que esta parte restara, ¿verdad? La parte restada, déjame elegir este vector. Yo quería dar esto, quitar el trazo y quería que esto tuviera, que es de color gris. Así se puede ver que la porción ha sido deseleccionada u otra parte de mi texto se ha eliminado simplemente porque hemos eliminado la parte de trazo. Bien, entonces este es mi restado. Bien, vamos a crear un duplicado de nuestra resta. Muy bien, voy a hacer un duplicado con la ayuda de Control D. Ahora, tenemos que restar el primero que ha sido cortado y el segundo que es duplicado. El que ha sido rebanado. Voy a mantener esto intacto cerrándolo. Y el que está justo por aquí. Lo que voy a hacer por aquí, voy a ampliar. Voy a elegir este vector, voy a elegir este color. Y ahora, con la ayuda de esto, que es editar mi objeto, me aseguraré de tener mi botón Mover seleccionado. Yo elegiré esta parte superior, que es tres, estos tres vértices, el primero, el segundo y el tercero. Entonces solo arrastraré y seleccionaré esta parte. Ahora, la arrastraré hacia abajo. Bien. A lo mejor esta parte, esta parte ha sido seleccionada. Yo elegiré esto hecho. Y ahora lo que ha pasado es que se han cortado dos porciones de mi texto. El primero fue mi el superior izquierdo y el inferior derecho. Bien. Entonces a restas se han hecho. Entonces ahora voy a elegir el vector uno. ¿Bien? Cambiaré el valor de mi valor de compensación X. Aumentaré el valor de compensación X. Entonces, si aumento manteniendo presionada la tecla de flecha hacia arriba, verás que se mueve ligeramente hacia la izquierda. Si aumento el tamaño de mi valor y. Lo que está pasando aquí es que la parte se está moviendo y esto está formando una especie de espacio en blanco, ¿verdad? Hay algo de acción en rodajas pasando. ¿Bien? Ahora lo que queremos es eso, déjame hacerlo de esta manera. Ahora lo que queremos es que dentro de esta, esta parte haga una copia de este vector manteniendo pulsado nuestro viejo. O si estás usando la Mac, puedes usar la tecla de opción y simplemente colocarla justo aquí. Muy bien, también vamos a crear una elipse de aproximadamente este tamaño. Y vamos a agrupar esto, esta elipse y este vector, ambos, pero ahora mismo queremos esta elipse. Por cierto, esta elipse estaría junto con nuestro vector. ¿Bien? Esta elipse debe tener un color lineal con negro cien por ciento y negro cero por ciento de transparencia. Así que solo asegúrate de que ambos colores al final sean negros. Esto debería tener 100%, esto debería tener 0% de opacidad. Bien, vamos a agruparlos. Entonces voy a seleccionar esta parte y esta parte manteniendo presionada mi tecla Mayús. Y en lugar de agruparlos realmente, lo usaré en forma de máscara. Y ahora lo que voy a hacer es seleccionar esto. Puedo seleccionar todo este grupo de masas u otra parte simplemente elipse. Voy a rotar este ángulo. Entonces voy a rotar esto. Sí, voy a mover esto por aquí. Déjame cambiar de nuevo la rotación. Déjame seleccionar mi elipse. Rotación. Sí, esto se ve genial. Redujamos el tamaño de esta sombra. Algo así. Si yo, si selecciono mi elipse, nuevo, esto es exactamente lo que queríamos. Un diseño tan genial. Entonces así es como puedes hacer que tu diseño se vea como 3D y puedes tener efectos tan geniales usando Figma. Una última cosa que queda por agregar para que sea como una cereza encima del pastel. Entonces eso sería para agregar algo de sombra a nuestra sombra a esta elipse en particular. Por lo que hemos agregado este color de relleno. Podemos ir a Efectos, agregarle algo de desenfoque de capa. Y si hago clic en este icono, podemos cambiar el valor de desenfoque de cuatro a, digamos diez. Si hago eso, entonces verán que así sería nuestro texto. Si quieres reducir el tamaño de nuestro desenfoque. También puedes hacerlo. Y perfecto. Así es como debería verse realmente. Si lo desea, puede cambiar el nombre del marco de escritorio uno a, digamos, efecto de texto en rodajas. 26. (25) Esquema de efectos de texto: Muy bien chicos, echemos un vistazo a cómo podemos crear un efecto de texto de contorno. Entonces para eso, voy a crear un nuevo marco de aproximadamente este tamaño. Y antes de que realmente creamos un wireframe, ¿ sabes qué, qué haremos? Solo traeremos una imagen del plugin Unsplash. Así que vamos a tratar de encontrar un animal. Bien, esta jirafa se ve genial. Entonces voy a traer este y vamos a tratar de quitar fondo de esta imagen. Usando el plugin Remove BG, voy a eliminar el fondo de esta imagen en particular. Ahora una vez que se haya quitado el fondo, lo que voy a hacer, sólo voy a alejar un poco. Y siguiente paso, queremos un marco. Así que vamos a crear un marco de aproximadamente el tamaño 1920 por diez ADP. Ésos son tus pixeles, ¿verdad? Ese es nuestro formato de visualización. Entonces 1920 por 1080 pixeles, ¿verdad? Una vez que hacemos zoom, y queremos que esta imagen esté dentro de un marco, eso es lo que queremos. Intentemos alinear al centro u otro primero, intentaremos escalar esto. Intentaremos escalar esta jirafa en particular. Pero ¿sabes lo que es este marco, en vez de 1920 por 1080? Solo hagamos esto también, el ancho cero por 1080. Y tratemos de llevar esta imagen para tratar de reducir esta escala. Otra vez. Intentemos escalar esto. Sí, esto se ve genial. Intentaremos hacer zoom a esto para que aparezca amablemente. Bien. Intentaremos alinear al centro con la ayuda de éste. Esto se ve genial. También le daremos un color a nuestro marco. Entonces intentemos darle un color a este marco. Entonces, para darle un color a este marco, me aseguraré de que haya sido seleccionado para moverlo, seleccione su marco, y luego vuelva al panel Propiedades del diseño, vaya a este color, sólido, encontrará un color de naturaleza que obviamente es verde. Entonces estoy buscando ese tono de color de bosque y un lado un poco más oscuro. Sí, esto se ve bien. Bien, siguiente paso, queremos un texto, así que voy a traer mi cuadro de texto. El tamaño. Se ve genial. Bien, intentemos escribir texto de esquema. Bien, intentemos alinearlo al centro. Con la ayuda de esto, tengo la línea central, mi texto. Muy bien, sé lo que tengo en mi mente para delinear estos dos textos, hacer que este tipo de esquema tenga efecto. Lo que tenemos es que queremos que esta imagen sea masiva tal manera que parezca que se ve así. La imagen ha sido enmascarada y el texto tiene esta imagen dentro de ella. Pero no estamos usando el método de enmascaramiento. Más bien vamos a estar usando el método de esquema y vamos a ver un truco corto. Entonces como pueden ver por aquí, tenemos este texto y voy a hacer una réplica de esto. Entonces voy a mantener mi botón alt y voy a bajar debajo de mi imagen. Ahora lo que pasa aquí es que hay una capa de textos, que es sobre mi imagen, y una capa de texto que está detrás de mi imagen. Entonces hay dos capas. Otro que está al frente, queremos ocultarlo. Entonces para eso, sólo voy a quitar el color. Y una vez que se haya eliminado el color, obviamente, no verás el carácter del texto porque ahora es invisible. Si bien el texto está presente, hay declaración de impuestos, que son textos de esquema. Pero como no tiene ningún color, ¿cómo sembrarás? Entonces eso es lo que está pasando por aquí. El siguiente paso, lo que queremos es que este texto en particular que está al frente. Queríamos dar algunos esbozos. Entonces voy a añadir un poco de trazo. Y en cuanto agrego trazo se puede ver, se puede ver la imagen que está dentro de mi texto. Ahora, voy a cambiar el color de mi, ya sabes, el trazo al ser también blanco va a hacer esto. Tener celdas phi. Queremos que esto esté dentro y así sería nuestro texto. Entonces en la capa frontal del texto, que está apareciendo al frente de mi imagen. Eso es no tener ningún texto. Es tener sólo frontera. Frontera. Cuando tiene borde y no tiene ningún color. Obviamente, verías imagen. Ahora detrás de esa imagen. ¿Qué otra cosa tienes? El mismo texto con el mismo color. Entonces se forma como, ya sabes, como en realidad te da la ilusión que has hecho un enmascaramiento de tu imagen. Entonces eso es lo que está pasando por aquí. De lo contrario, son cosas bastante simples. Aquí no hemos hecho nada. Así, simples dos cosas que hemos hecho. En primer lugar, usamos nuestra imagen dentro del marco. Ponen un color a nuestro marco. Entonces usamos dos capas de nuestro texto. Uno que está al frente de mi imagen, sin tener color sino solo trazo, que de nuevo es el mismo color que el color de mi texto. Y la capa de texto que está detrás de mi imagen, no está teniendo ningún borde. Es tener solo color de relleno. Por lo que da una ilusión de que la imagen ha sido enmascarada. 27. Efecto de iconos brillantes: Bien chicos, veamos cómo podemos crear un efecto de icono azul. Entonces para eso, voy a crear un nuevo frame del tamaño de publicación de Instagram. Hagamos esto más oscuro o de color negro. Ahora, vamos a importar cuando el icono de Instagram. Ahora para hacer eso, en realidad voy a hacer uso de cuando plugin, que en realidad es un icono de fuente o plugin Font Awesome, solo puedes encontrar más plug-ins y buscar iconos Font Awesome por realizo. Simplemente ejecuta eso y busca el ícono que estás buscando. Lo que tengo en mi mente, usaremos el icono de Instagram y lo modificaremos de tal manera que usando los efectos y la sombra que hemos aprendido hasta ahora, voy a hacer que parezca que está brillando. Bien, así que vamos a usar ese logo de Instagram. Bien, intentemos alinear su centro. Línea central. Esto tiene que estar alineado al centro. Seleccione esto en algún lugar por aquí. ¿Bien? Y tratemos también de aumentar el tamaño de la misma. Digamos 200 por 200. O lo que más puedes hacer es que simplemente puedas bloquear esto para que si cambias el tamaño de tu ancho o alto, la otra dimensión cambiaría por sí misma respectivamente. Entonces, si quieres que sea 250, puedes hacerlo. Se ve bien. Seleccione eso. Y cambiaremos el color de nuestro icono de negro a blanco para que sea visible. siguiente paso que queremos es que, ya sabes, el siguiente paso que necesitaremos es que intentaremos usar algunos efectos de sombreado. Entonces haremos clic en los Efectos. Usaremos una capa de desenfoque en primer lugar, o más bien debería decir primero sombra interior que usaremos. Ahora dentro de la sombra interior, lo que queremos es que no haya desplazamiento, ¿verdad? No debe haber compensación. No queremos que la sombra esté fuera del rango dado. Debería aparecer tal como está, como se ve nuestro icono de Instagram con la misma dimensión, no debe estar desplazado del eje x o del eje y. Eso es lo que queremos que la sangre esté apagada a unos 20 píxeles. Y el color que vamos a requerir es de color púrpura o violeta. Eso es lo que usa Instagram ¿verdad? En algún lugar alrededor de esta sombra. Y queremos que esto sea al 100%, al 100%. Y este es el color que vamos a usar. El siguiente paso que requeriremos es que requeriremos otra sombra que es tu sombra paralela. Así que usa la sombra paralela. Otra vez. Hacer que el desplazamiento sea cero. Haz que el desenfoque sea 50. Vamos a probarlo con 50. Cambia el color a ese mismo color exacto, que es tu color que realmente usamos. Enviar los colores del documento. Lo encontrarás por aquí. Y eso es lo que queríamos y difuminar para ser 5.000% ¿verdad? Ahora lo que voy a hacer es hacer una copia de este ícono Instagram. Entonces solo haz una copia de esto. Entonces a los íconos de Instagram que tenemos, puedes ver, no hagas click sobre este vector. Da click en este icono, Instagram, que es grupo. Bien, esta es la que realmente usamos, y esta es la copia. Entonces dentro de la copia voy a quitar todas las sombras. Lo que voy a usar esto solo mi trazo. Entonces solo agrega un trazo, haz que el trazo sea de color blanco. Haz esto de unos cinco píxeles de tamaño. Y el color que vamos a usar en vez del blanco. Usemos el mismo color del documento. Y ahora puedes ver este tipo de efecto gluey. Por último, antes de que terminemos este tutorial, lo único que debes hacer es simplemente quitar el color de relleno y también agregar algunos efectos, que serían el desenfoque de capa. Entonces solo agrega un desenfoque de capa y haz esto como cinco sangre. ¿Qué pasa si aumentamos esto? Verás que el desenfoque alrededor del ítem es lo que vamos a ver si lo aumento. ¿Bien? Entonces, si quieres que esto sea cinco, se vería genial. Y así es como creas efectos de iconos brillantes. 28. (27) Mini proyecto: Bien chicos, hoy estoy muy emocionada porque ahora vamos a investigar cosas muy buenas. Porque vamos a construir un miniproyecto. Ahora bien, este miniproyecto que vamos a construir es solo un encabezado simple. O puedes ver una landing page para tu sitio web. Y no vamos a profundizar al respecto. Papá, qué tipo de topografía, qué tipo de familia de fuentes, qué tipo de combinación de colores deberías usar para tu diseño Figma. Pero más bien solo veremos cómo colocar nuestros artículos y cómo organizamos esas cosas con lo que hemos aprendido hasta ahora. Entonces para eso, solo voy a crear un marco de tamaño de escritorio. Y quiero que esté apagado MacBook Pro de 14 pulgadas. Para que podamos seleccionar eso. Y déjame alejarme un poco. Bien, no tanto. 50 por ciento, eso sería bueno. Sí. El siguiente paso que queremos es que queremos asegurarnos de que, ya sabes, podemos agregar diseño a esto. Entonces para eso, solo asegúrate de ir por aquí. Así que solo asegúrate de ir por aquí y asegúrate de que las cuadrículas de diseño hayan sido grabadas. siguiente paso que desea es que simplemente haga clic en esta cuadrícula de diseño y verá toda la cuadrícula que está en las columnas y filas también, pero solo queremos nuestras columnas. Entonces para eso, lo que vamos a hacer es solo usaremos éste, que es, voy a seleccionar este icono. Voy a elegir de cuadrícula a solo columnas. Una vez que seleccione columnas, cambiará el recuento de columnas 5-12. Si también quieres cambiar el color, puedes cambiar eso de, digamos, en lugar de rojo, quieres algo como azul claro son como este color. Para que puedas hacer eso. Siguiente paso. Lo que vamos a hacer es que queremos algún tipo de margen desde la primera columna de nuestra cuadrícula y la última columna de nuestra cuadrícula. Entonces vamos a agregar algo de margen. Seleccione, digamos que quiero agregar margen de unos 50 píxeles. Así puedo hacer eso. Bueno, esto no parece bueno para nuestro proyecto, así que podemos cambiar eso a, digamos que tal vez 100. Ahora, se ve bien. Pero y si cambio eso a otra vez, 125, algo así. Esto se ve bastante genial. El siguiente paso tenemos espaciado de canalones. Ahora bien, lo que básicamente significa un buen espaciado es que el espaciado, el espacio extra entre las dos Cuadrículas de Diseño están entre las dos columnas de Diseño. Este espacio donde se cierne mi cursor es mi espacio de canalones. Creo que el espacio de canalones en este momento son 20. Si cambiamos eso a, digamos que tal vez 30, se ve bien. Entonces podemos hacer esto como 30. Siguiente paso. ¿Qué vamos a hacer? Solo voy a hacer zoom un poco para que veas. Bien, el siguiente paso, queremos crear una barra de navegación. Entonces para eso, voy a crear caja enredada de proveedor a partir de esta esquina a esta lista para que se adjunte correctamente. Permítame asegurarme de que esto también toque esta línea. Y nos aseguraremos de que la altura sea de 100 solamente. Bien, vamos, aumentemos eso a 200. No, no, eso sería demasiado. Entonces creo que cien mil estuvo bien. Al siguiente, queremos extender esto hasta este punto. El siguiente paso, ¿qué vamos a hacer? Queremos traer nuestro icono por aquí y los demás elementos del menú aquí. Entonces para eso, voy a usar mi plug-in. Si has creado tu icono, puedes simplemente sacar a relucir, o si quieres crear tu propio logo, puedes hacerlo en Figma también. Así que solo usa este icono de Font Awesome. Y puedo buscar cualquiera de las marcas. Digamos que quiero usar algunas marcas famosas como podría ser LinkedIn. Entonces usemos eso. Usa eso. Y nos aseguraremos de que este icono tenga seis píxeles de alto y 36 píxeles de ancho. Entonces solo voy a usar estos 36 pixeles de altura y 36 celdas B y mojadas. Bien, 36 por 36. En realidad es demasiado pequeño. Cambiemos eso de 50 por 50. Sí, se ve bien. Y si cambio eso de 50 por 50 para dejar decir tal vez 60 por 60. Sí, esto se ve bien. Entonces 60 por 60 es el tamaño ideal que realmente usaría en mi proyecto. Ahora en realidad depende tu apariencia de tu diseño. No hay como tal, regla dura que tengas que usar 60 píxeles alto y ancho para todos tus iconos en tu diseño web. Solo tienes que jugar y ver si se ajusta a tu diseño bajo pedido. El siguiente paso, ¿qué vamos a hacer? Nos aseguraremos de que esté alineado centralmente en el centro con respecto al eje y. Entonces solo voy a seleccionar esto, que es alinear centros verticales. Bien, el siguiente paso que queremos es que vamos a hacer uso de nuestro menú. Así que con solo presionar mi Tiki, en realidad puedo escribir, digamos a casa. Inicio. Entonces tengo sobre Dan servicios y contáctanos página. Entonces estos son los diferentes elementos del menú de navegación. Entonces el hogar es uno que voy a seleccionar. El siguiente paso, quiero que el tamaño del texto sea aproximadamente, tal vez digamos que 36 píxeles se ven visibles. Entonces seguiremos adelante con 36 pixeles. Utilizará medio. El medio se ve bien. Y el font-family que deberíamos estar usando es que digamos, si uso algo así como quedemos con este interno. No me importa usar este. Bueno, voy a hacer lo siguiente. Voy a hacer una copia de esto. Cambiaré el contenido de casa a unas diez, de a punto de contactarnos. Contáctanos. Y por último, voy a utilizar los servicios. Servicios. ¿Bien? Ahora la razón detrás he usado estos diferentes cuadros de texto y los estoy alineando en diferentes direcciones. Se puede ver que esta está en la parte inferior, esta está sentada en la parte superior de la casa. Esto vuelve a estar en la parte inferior. Esto vuelve a estar en la cima. No se está llevando a cabo una alineación tan adecuada. Entonces podemos hacer eso. Lo que necesitas hacer es seleccionar todos estos y conformarlo en una forma de grupo, no exactamente grupo. No tienes que usar Control G o Comando G. Lo que tienes que hacer es que uses este. Una vez que hagas eso, puedes agregar un diseño automático. Una vez que agregues el diseño automático, tu trabajo está hecho. Entonces eso es lo que hiciste. Ahora, solo arrastra todo este marco y colócalo por aquí. Ahora bien, ¿por qué lo colocamos por aquí? ¿Por qué nos aseguramos de que Contáctenos permanezca en esta parte de mi diseño porque queremos que la última parte de la columna de diseño toque el último elemento del menú Entonces eso es lo que hicimos por aquí. Y el icono azul que viste anteriormente y yo hice clic sobre, no había nada más que simplemente formar un marco. Así que acabamos de hacer una selección de cuadro. Puedes hacerlo con el botón derecho del ratón y también puedes usar la selección de fotogramas. Entonces no hay nada como cohetes y ciencia de cohetes que estén sucediendo. Que el siguiente paso que queremos hacer es que queremos ocultar nuestro, este rectángulo. No queremos que esto aparezca en nuestro sitio web. Entonces para eso, si quieres, entonces puedes usar eso y solo puedes agregar alguna sombra borrosa y puedes usar algo de transparencia para esta barra de navegación en particular. El siguiente paso, queremos asegurarnos que éste y éste, ambos estén alineados verticalmente. Así que solo nos aseguraremos de que ambos estén alineados verticalmente y solo ocultaremos nuestra caja rectangular. Una vez que ocultes eso, así es como se vería nuestro lado izquierdo. Bien, el siguiente paso, ya que en realidad estamos tratando de crear un proyecto, un mini-proyecto se asegurará de que este sea un responsive. Eso significa que aunque el tamaño de mi mojado cambie, bien, si me muevo de MacBook Pro para decir, un dispositivo móvil, entonces el contenido no debería saltarse o no debería cortarse. Entonces, para asegurarnos de que no suceda, ¿qué vamos a hacer? Seleccionaremos nuestro icono, este icono de LinkedIn. Y en la parte de restricciones, en la parte de restricciones, debería ver la parte de restricciones. Entonces voy a agregar un diseño automático. Una vez que agrego el diseño automático, verás estas restricciones y cambiar el tamaño de los elementos. Entonces, en el eje y, queremos que esto abrace a otros artículos. Y desde el eje x queremos que esto esté en fijo a él. ¿Bien? El siguiente paso, lo que vamos a hacer es que ahora para asegurarnos de que nuestro diseño sea responsive, es decir, si paso del tamaño de pantalla del MacBook Pro a, digamos un dispositivo móvil. No quiero cortar parte de mi porción. Ahora mismo. Nuestro diseño no responde. Entonces, ¿qué pasará si reduzco el ancho de mi sitio web? Entonces verás que algunos de los contenidos de mi menú se están quedando fuera. No se puede ver el Contáctenos con claridad. Incluso si reduzco esta humedad de esta parte a esta parte, verás que el ícono del lumen está fuera de mi marco. Bien, esto no es parte de mi tema, así que solo traeremos esto dentro de este. Y una vez que haces eso, puedes ver que esto ha quedado fuera. Entonces lo que voy a hacer es simplemente deshacer para que obtengamos el tamaño. Otra vez. Se asegura de que el icono esté dentro de un marco, el marco del MacBook Pro. Y para asegurarnos de que nuestros diseñadores respondan, basta con hacer clic en este marco en particular. ¿Bien? En este momento no verás la parte de las restricciones. Verás la parte de redimensionamiento porque hemos usado auto-layout. Así que solo usa el botón derecho del ratón, usa una selección de fotograma y podrás ver que se ha formado un nuevo marco. Así que sólo puedo cambiar el nombre de este marco para que sean elementos del menú. Y ahora verán que este marco nos va a dar limitaciones. Entonces ahora puedo decir que en el eje x, quiero que estos elementos del menú se peguen al lado más derecho. Y en el eje y, debería pegarse al lado más alto. Entonces ahora si trato de reducir el tamaño de mi marco, verás que los elementos del menú no están siendo comprimidos. Más bien, mi icono ha sido comprimido. Entonces veremos que como podemos arreglar este icono también. Entonces nuevamente, haga clic derecho sobre esto. Utilice Selección de Marco. Cambiar el nombre del marco. Podemos cambiar esto a icono. Icono. Se puede ver logo. Simplemente puedes cambiar el nombre de esto a no-go. Bien, una vez que hayas hecho eso, quédate a la izquierda y arriba. Ahora bien, si trato de reducir el tamaño de mi marco, se puede ver que mi logo no está comprimiendo. Bien, así es como lo hicimos posible. El siguiente paso que queremos es algo de texto de título y un texto de cuerpo. Y por debajo de eso queremos un botón. Y además de eso, en el lado derecho, queremos que se coloque una imagen. Entonces para eso, voy a usar texto. ¿Y sabes qué? Sólo voy a usar un cuadro de texto. Dentro de este cuadro de texto, voy a pegar las cosas que ya he usado. Entonces voy a copiar este texto, que es iniciar hoy su propio viaje de negocios. Pega esto por aquí, asegúrate de que use este auto mojado. Y el siguiente paso que queremos es, debo decir, el siguiente paso que queremos. Eso asegura que sean 36 píxeles. Si quieres que este título tenga 40, puedes hacerlo también. Para ser audaz. Tú también puedes hacer eso. Quieres algún otro estilo de fuente. Adelante haz eso. No voy a hacer. Sólo tienes que seleccionar esta. Se asegura de que toque esta parte. ¿Bien? Asegúrate de que se pegue. Esta parte en particular. Crearemos otro cuadro de texto. De esta parte a tal vez digamos que esta posición va a pegar el resto de la siguiente, que es mi cuerpo. Así que selecciona esto. Otra vez. Usaremos 36. Puedes usar tus estilos, puedes, puedes guardar estilo, y puedes usarlo en otras partes de tu diseño. Haz que esto sea normal, regular. Sí, eso es. Entonces solo me aseguraré de que este cuadro de texto tenga altura automática. Entonces vamos a hacer eso. Y vamos a asegurarnos de que haya algún espaciado que justifique la distancia entre tu título y tu cuerpo. Bien, el siguiente paso que vamos a hacer es que vamos a hacer uso de nuestro botón. Entonces para crear un botón, no voy a estar usando una caja rectangular. Más bien, estaré usando un cuadro de texto. Entonces solo voy a usar los textos que es empezar ahora. Y para que parezca un botón. ¿Por qué estamos usando? En primer lugar, ¿por qué estamos usando este cuadro de texto como un botón y no un cuadro rectangular para que podamos hacer que nuestro botón sea sensible Entonces, lo que voy a hacer, agregaré un diseño automático a este botón. Simplemente voy a seleccionar esto. Voy a añadir un diseño automático. Ahora no verás la opción de agregar un diseño automático directamente a las obras de texto. Primero, deberá agregar la selección de fotogramas. Así que solo usa la selección de fotogramas. Y ahora verás una opción para agregar un diseño automático. Una vez que hagas eso, asegúrate de que sea la línea central. Y luego proporcionas algo de relleno, tanto si quieres que proporcione como si no. Entonces para este diseño, voy a proporcionar un poco de relleno horizontal. Entonces, desde las posiciones izquierda y derecha, queremos 30 píxeles de relleno y desde arriba e abajo V1, 15 píxeles de relleno. Yo he hecho esto. Ahora, agreguemos un color. Entonces quiero que el color sea sobre esto, un botón positivo de llamada a la acción. Entonces este color se ve bien, y el color del texto sería byte. Así que vamos a seleccionar eso. Si quieres agregar algún radio de borde, también puedes hacerlo. Así que intentemos agregar un radio fronterizo también. Entonces déjame agregar 20. Una vez que haya hecho eso, lo que puedo hacer, solo puedo seleccionar esto. Yo lo colocaré. Y se puede ver que la distancia entre este texto corporal y mi botón es de 61 píxeles, y la distancia entre mi título y cuerpo también es de 61 píxeles. Así que simplemente lo dejaremos así. Y me aseguraré de que las restricciones sean de izquierda o derecha. Se pega a la parte más a la izquierda. Y, en realidad, es, una restricción, en realidad es ancho fijo. ¿Bien? Una vez que lo hayas hecho, ¿qué quiero decir con responsivo? Pero luego habiendo hecho el botón responsive , sí, claro. Entonces, si extiendo esto, permítanme simplemente extender esto. Se puede ver que no importa cuánto aumente o disminuya el tamaño de mi botón, el texto, que se enseña ahora, siempre permanece en el centro de la posición de la masa y el relleno se mantiene constante. Entonces eso es lo que básicamente significa. Bien, el siguiente paso, lo que queremos hacer es que si yo, permítanme primero intentar renombrar este frame. Así que simplemente voy a cambiar el nombre de este marco a botón. Éste como texto corporal. Entonces renio dos, cuerpo. Siguiente. Éste como texto del título. Bien, vamos a seleccionar los tres. El siguiente paso queremos asegurarnos de que se selecciona restricciones izquierda y derecha. ¿Bien? Y ahora queremos agregar una selección de fotogramas. Una vez que los hayas agregado dentro un marco, ¿qué vamos a hacer? Nos aseguraremos de que se adhiera a las restricciones izquierda y derecha. El siguiente paso, dentro de este marco dos, tenemos nuestro texto corporal y etiquetas de título. Así que solo selecciona el texto del título. Y dentro de éste. En primer lugar, seleccionemos todo este fotograma. Hacer. También agreguemos un diseño automático. Vamos a añadir un diseño automático. Una vez que hayamos hecho eso, asegúrate de que las restricciones, ahora no podrás ver esto a izquierda y derecha. Así que solo usa la izquierda. Una vez que hayas hecho eso, selecciona tu título. Y en la parte de restricciones de aquí, para mi restricción horizontal, redimensionamiento horizontal, deberías usar el contenedor lleno. Ahora bien, ¿por qué deberíamos usar contenedor lleno? Entonces, si trato de disminuir el tamaño de mi marco, verás ese término. Ahora mismo. No vas a ver el cambio. Entonces si selecciono este contenedor lleno, si me aseguro de que, ya sabes, es, está usando esto. ¿Bien? Cambiemos esto también a ancho fijo. Ahora bien, si trato de disminuir el tamaño de mi marco en este momento no podrás ver que este texto del título se ajuste de acuerdo con el tamaño de mi marco. Entonces para eso, ¿qué vamos a hacer por eso? Seleccionaremos nuestro texto de título, aseguraremos de que esté configurado en contenedor completo. Y en el eje y, se establece en hub contiene. Ahora ¿por qué contiene Hub? Te lo mostraré en un minuto. Entonces esto es lo que queremos en el vértice. Queremos que esto sea, de nuevo, llenar contenedor. Una vez que hayamos hecho eso, asegúrate de que este sea de ancho fijo. ¿Bien? Selecciona todo el marco a la izquierda, otra vez a la derecha. Y luego la siguiente parte, lo que queremos es que seleccione su marco, trate de redimensionarlos. Y ahora puedes ver los textos del título y el vértice se está ajustando según el tamaño de mi marco. Entonces está reduciendo su tamaño. Así se vería en los dispositivos móviles, correcto. Ahora bien, a qué me refiero con Hub contiene tu redimensionamiento. ¿Qué significa básicamente esa propiedad? Entonces digamos mi texto corporal, copio este texto y lo coloqué algunas veces más así. Y eso a cuando tiene un botón también, es mantener esa distancia, 61 pixeles de distancia de aquí y de aquí. Eso contiene propiedad básicamente lo hace cuando estás hablando de cambiar el tamaño. Bien, así es como realmente haces tu diseño responsive. Hasta el momento, hemos hecho lo único que queda es si realmente quieres usar una imagen. Entonces, si quieres usar imagen, no tenemos ese espacio para la imagen. Entonces lo que podemos hacer es seleccionar nuestro título y podemos ponerlo así. Podemos seleccionar nuestro texto corporal y aumentar el tamaño de la altura, la altura de nuestro cuadro de texto. Sí, eso se vería genial. El siguiente paso, queremos importar una imagen. Así que con la ayuda de mi plugin Unsplash, realmente puedo usar cualquiera de la imagen. Entonces intentemos traer alguna imagen, digamos relacionada con los negocios. Entonces voy a seleccionar eso. Buscaré a un emprendedor. Y ojalá debería ver a alguien que en realidad está tratando de presentarlos frente a sus clientes. Entonces este se ve bien. Y esta es una muy buena imagen que podemos usar en nuestro diseño. Así que una vez que esta imagen ha sido importada, podemos redimensionarla usando la herramienta de redimensionamiento. Entonces vamos a cambiar el tamaño de esto. El tamaño, solo se asegura de que se ajuste a nuestro contenido correctamente. ¿Por qué no puedo arrendar esto dentro de mis cuadrículas? Bien, entonces esta imagen necesita estar dentro de un marco de MacBook Pro. Así que intentaremos poner esto dentro de un marco de MacBook Pro. Está dentro de eso. Intentemos ajustarnos de nuevo. Y ahora se vería bien. Sí, eso se ve bien. Sólo se asegura de que se adhiera a esta parte. Bien. También podemos asegurarnos de que este esté alineado al centro con respecto al eje y. Eso ya lo hemos hecho. Ahora está en el centro. Entonces lo siguiente, simplemente voy a cambiar esto a imagen. Y para que esta imagen sea sensible, me aseguraré de que las restricciones sean dos, izquierda y derecha. Así que solo selecciona esta imagen, asegura de que las restricciones sean izquierda y derecha. Y trataremos de reducir el tamaño para ver si funciona correctamente o no. Para que puedas ver nuestra imagen también responde y este texto también responde. Ahora es posible que veas algún tipo de superposición sucediendo entre este texto y la imagen simplemente porque el espacio de datos es más de lo que deberíamos haber usado. Y esa es la razón por la que estás viendo estas cosas. Entonces así es como se vería en mi GoPro de 14 pulgadas. Entonces solo puedes, al final, solo puedes eliminar el diseño de la cuadrícula. Y así es como se vería tu sitio web. 29. (27) Animaciones y prototipos en Figma: Bien chicos, ahora que todos ustedes han aprendido a construir un mini-proyecto, sigamos adelante y veamos cómo podemos construir flujos interactivos usando Figma. Ahora cuando estás creando diseños en Figma, es importante que realmente le des al cliente o al usuario el campo en el que realmente están usando el software, no solo la parte de diseño. Entonces necesitamos algunas animaciones para que fluyan, ¿verdad? Para que el usuario obtenga el campo que, bien, este diseño es interactivo. Cuando hago clic en este botón o tal vez cuando hago el cursor alrededor de esos algunos elementos, o cuando me deslice sobre algunos objetos, llego a ver algunas otras cosas. Entonces eso es lo que vamos a aprender en la conferencia de hoy. De eso se trata la creación de prototipos. Entonces para eso, lo que voy a hacer, solo voy a crear un nuevo marco de tamaño iPhone 14. Así que vamos a crear rápidamente algunas cosas básicas. Voy a crear un texto diciendo que esto es prototipado protocolo Mecanografía. Intentemos alinear el centro. Bien, con respecto a mi eje x, no eje y, porque queremos que esto esté en la cima. El siguiente paso que queremos es, vamos a crear una caja rectangular simple de tal vez aproximadamente este tamaño. Y asegurémonos también de que esto esté alineado al centro. ¿Bien? Si quieres agregarle algún trazo o algún color, adelante hazlo, pero no voy a estar haciendo eso. El último paso queremos algunos botones. Entonces voy a decir eso, digamos Haga clic, haga clic aquí, haga clic aquí botón. Y queremos que este texto tenga algunos, ya saben, 2020 parece mucho más pequeño que eso. 24 funcionaría bien. Entonces 24, eso es todo. Agreguemos el diseño automático a este texto. Así que haga clic con el botón derecho en agregar diseño automático. Asegúrate de que tenemos algún relleno para este botón. Entonces relleno con respecto a mi eje x, voy a dar esto como, digamos, soy Wendy. Y eje y, eso significa desde arriba e abajo I15. Entonces sigamos adelante y hagamos eso. También agreguemos algo de color a este botón. Podría agregar algo así como, digamos un botón amarillo. Un amarillo más brillante. Bien, también agreguemos algo de trazo a esto. Entonces voy a agregar un trazo y trazo negro. Sí, eso se ve bien. Y solo asegúrate de que esto esté alineado correctamente. Bien, el siguiente paso, este es mi único frame del iPhone 14. Ahora, quiero que cada vez que el usuario que arounds esta caja de enredos en particular, quiero que cambie el color de esta caja rectangular. Ahora bien, si estás aprendiendo desarrollo web, debes estar haciendo eso en CSS, tenemos los efectos hover, pero realmente queremos mostrar ese tipo de cosas en Figma. Entonces, ¿cómo podemos hacer eso? Entonces para eso, solo seleccionaré mi marco completo. Voy a hacer una copia de este marco. Y me aseguraré en el fotograma de copia, tengo el color de la caja rectangular que en realidad quiero mostrar, digamos un rojo brillante. Entonces, cuando flote alrededor de esta caja rectangular, quiero que el color de mi caja rectangular cambie de gris a, digamos rojo. Entonces intentemos ver cómo va a suceder. Para eso. Concéntrese en el panel de propiedades de diseño. En la parte superior, verás tres opciones. Diseñar, prototipar e inspeccionar. Así que sólo tienes que ir al prototipo. Selecciona el dispositivo que estás usando realmente. Selecciona el objeto sobre el que quieres que si se está realizando alguna actividad sobre ese elemento en particular, se mostrará el cambio. Entonces solo, puedes ver por aquí tenemos el ícono más. Simplemente arrastre alrededor del marco donde queramos el cambio deseado. Entonces, como pueden ver, tenemos el tipo de acción que este objeto debe realizar. Entonces, si toco en esta caja rectangular, entonces el siguiente fotograma, que es iPhone votando para que se muestre. Si arrastro ese objeto, si deslizo de izquierda a derecha o de derecha a izquierda, así será como se mostrará mi cambio. Si flotaba alrededor de ese objeto, se mostrará el cambio. Así que intentemos ver qué pasa si solo toco el objeto. Así que me quedaré con esto tal como está. Quiero que esto navegue hasta mi iPhone, iPhone 14 para enmarcar. Si todos están usando algún proyecto de diseño existente allí, es posible que también tenga otros marcos. Así que solo ve al menú desplegable y asegúrate de seleccionar el marco correcto. Una vez que lo hagas, puedes ver la pestaña Animaciones, justo en la ventana emergente de detalles de interacción. Verás la animación. Entonces en este momento se selecciona para disolverse. Inicialmente, podría ser seleccionado al instante. Eso significa que si solo haces clic o simplemente puedes tocar este o este elemento en particular. Y B se mostrará instantáneamente. O no habrá ningún tipo de efectos especiales. Si quieres mostrar algún tipo de efectos especiales, entonces debes seleccionar este menú desplegable y elegir la animación deseada. Entonces, si elijo disolver, entonces así es como se vería nuestra animación. Si selecciono esto demasiado inteligente animate. Así es como se vería. Si selecciono mudarme, entonces así es como se verá. Tratemos de investigar todas y cada una de las animaciones desplazándonos realmente alrededor de esto, o más bien escribiendo en esta caja rectangular. Entonces una vez que hayas seleccionado tu animación, tu fotograma, tu elemento, todas esas cosas. Simplemente haz clic en este ícono más en la parte superior. Así que solo puedes presentar. Figma se abrirá en una nueva pestaña y verás el dispositivo que has seleccionado. Entonces como pueden ver, tenemos este iPhone votando. Una vez que haga clic en esta caja rectangular, ahora mismo se puede ver que estoy rondando esta caja rectangular. Una vez que haga clic en este color rojo se está mostrando, ¿verdad? Eso es lo que está pasando por aquí. Sólo puedo volver a mis interacciones. Puedo elegir, en lugar de tocar para dejar decir que quiero flotar, entonces ese cambio deberíamos mostrar. Entonces, si actualizo esto, y una vez que flote, o mejor dicho debería revelar esto, debería volver a cargar esto. Ahora bien, si pongo el cursor alrededor esta caja rectangular, verás color rojo. Una vez que mi cursor sale de la caja rectangular, está en su estado original. Eso es lo que realmente significa flotar. Este es un efecto instantáneo. Permítanme cambiar de instante a, digamos, digamos que estoy cambiando de instantáneo a disolverse. Ahora, verías cómo se verá la animación. El color se disolverá del gris para leer. Déjame mostrarte. Entonces una vez que voy por aquí, se puede ver que la guillotina es para leer. Si muevo el cursor hacia afuera, el color se disuelve lentamente de nuevo a gris. Eso es lo que básicamente hace. Ahora mismo. No le hemos hecho nada a nuestro botón. Entonces una vez hago clic en esto, aunque podrías estar viendo algún cambio de color sucediendo en la caja rectangular, que es de un color azul claro. Pero eso es básicamente solo para decirnos que no has proporcionado ninguna acción a este elemento. Si deseas agregar alguna acción a tu botón, que es dar clic aquí, entonces solo puedes volver para seleccionar tu elemento, arrástralo por aquí. Y luego se puede decir de barril. Y entonces solo puedes elegir qué animación te gustaría. Digamos que quiero que esto se deslice. Entonces puedes hacer eso. ¿Bien? Si quieres eso, en lugar de, ya sabes, 300 milisegundos de retraso, te gustaría cambiar el retraso a unos 100 milisegundos. Entonces hasta tú puedes hacer eso. Ahora deslizándose desde qué dirección? De derecha a izquierda, de izquierda a derecha, de arriba a abajo, de abajo hacia arriba, de la manera que más te convenga, puedes seleccionar eso y se aplicaría animación. Así que volvamos. Y podemos seleccionar de derecha a izquierda. Y vamos a tratar de ejecutar esto. Ahora bien, si flotaba alrededor de mi caja rectangular, puedes ver los cambios de color. ¿O qué pasa si hago clic en este botón? Se puede ver así es como aparece realmente el cambio. Entonces así es como trabajas alrededor de estas cosas. ¿Bien? Ahora bien, si quieres eso, si hago clic en este botón y debería volver al estado original, entonces puedes hacerlo también. Simplemente cambia el texto en lugar de Click Here para dejar decir que también quieres cambiar el nombre de los textos. Um, digamos que regresemos. Entonces, lo que puedes hacer, puedes ir a Seleccionar, volver atrás. Y eso sería solo seleccionar este botón. Arrastre de nuevo al fotograma anterior. Y o mejor dicho debería decir que esta sería una interacción. Esta sería una interacción. Y también podemos agregar otra interacción. Ahora esta interacción es de este botón a mi estado anterior. Así que en la pestaña, navega al iPhone 141. Si quieres que esto empuje. Incluso puedes hacer eso. Ahora también tienes la curva. Eso significa que queremos que la animación entre, salga fácilmente, entre y salga. Ahora bien, si tienes su propio CSS, debes estar conociendo todas las cosas. No tengo que repetirme. Estas son solo una forma en que realmente representas tu animación. ¿Bien? Entonces también hay alguna otra manera que puedas presentar tu animación. ¿Y qué es la animación? Básicamente, la animación es básicamente una forma de representar tus imágenes. ¿Qué es el video? El video son básicamente imágenes, ya sabes, toneladas de imágenes renderizadas en un segundo que se muestran en tu pantalla, lo que te da la ilusión que en realidad se trata de un video. El video no es más que un grupo de imágenes, grupo de imágenes en movimiento, como un fotograma donde una persona está justo por aquí. En el segundo cuadro, la persona está por aquí, luego por aquí. Cuando estas tres imágenes se combinan y se te muestran a una velocidad particular , en realidad te darías la ilusión de que la persona en realidad está caminando a una distancia, distancia b. Así que eso es lo que es tu animación. Básicamente. Es solo trabajar alrededor de las imágenes y estás tratando averiguar que ¿cuál debería ser la curvatura de mi animación? ¿Quieres que sea animación lineal? La flexibilización está fuera y todas esas cosas. Así que simplemente puedes seleccionar lo que funcione mejor para ti. Así que sólo voy a mantenerlo sencillo. Seleccionaré lo que haya seleccionado hasta ahora y ejecutaré mi prototipo. Entonces si vuelvo, ya ves, puedo volver a mi cuadro anterior. Si flojo, puedes ver que me sale el rojo, me sale este color rojo y también me sale un cuadro de texto diferente. Si hago clic, puedes ver así es como aparece la animación. Entonces así es como trabajas alrededor tus animaciones y haces prototipos en Figma. 30. Restaurantes en Figma: Bien chicos, ahora es el momento de que entendamos qué es el diseño de wireframing y UI UX. Wireframe es un esquema digital de un diseño. Entonces, como diseñador de UI o UX, necesitas crear wireframes que los clientes o tu empresa, o tal vez tus colegas puedan visualizar tus ideas rápidamente. Entonces wireframe solo representa el panorama general de una idea, y es muy importante que aprendas si quieres diseñar cualquier sitio web o cualquier aplicación. Entonces, con todo, en general, wireframe no tienen ningún elemento de estilo. Cuando intentas acercarte para crear una aplicación o un sitio web, simplemente no saltas directamente al estilo de diseño. La isquemia vocal va a usar qué tipo de topografía, qué tipo de familia de fuentes, y todas esas cosas. No, eso no es lo primero que cubres. Lo primero es que se crea un wireframe. Wireframe básicamente contiene todos los contenidos parte qué contenido básicamente vas a cubrir en esa página web o en esa sección particular de tu aplicación. Entonces eso es lo que básicamente significa tu wireframe . Para dar un ejemplo. Para toda esta conferencia, vamos a hacer un wireframe de aplicación de Instagram. Entonces, cuando realmente vas a Instagram y miras el perfil de cualquiera de tus amigos, simplemente puedes seleccionar cualquiera de las imágenes y encontrarás el nombre de usuario en la parte superior. Encontrarás la ubicación. Si la persona ha etiquetado la ubicación, la imagen misma, el icono, el icono del perfil de usuario. Después debajo de la imagen verás el nombre de usuario, el comentario, luego su pie de foto, los íconos como si estuvieras como comentar, enviar, guardar y todas esas cosas. Entonces, antes de que en realidad solo entremos directamente, dimos cuenta de que tipo nos dimos cuenta de que tipo de familia de fuentes vamos a usar, qué tipo de esquema de color vamos a usar. Primero, tratamos de visualizar la parte del contenido donde exactamente queremos que se coloque la imagen. Si queremos que esté centrado, si queremos algún relleno, si queremos algún tipo de alineación diferente. ¿Dónde debería mostrarse mi nombre de usuario? En la parte superior, en la parte inferior, donde debe mostrarse. Bien, entonces tenemos otros íconos e Instagram como tu icono de inicio buscar reales de iconos. Entonces hay un, no sé, ¿cuáles son los íconos que tenemos? Tenemos nuestro propio icono de foto de perfil donde nos llevaría a nuestro perfil. Entonces hay una filtración o un ícono de retroalimentación, supongo que lo es. Entonces tienes algunas otras cosas. También tienes las imágenes del carrusel e Instagram, así que puedes simplemente deslizarte y en la parte superior izquierda, arriba a la derecha, lo siento, lo verías de cuántas imágenes, en qué imagen en particular te encuentras. Entonces digamos que la persona que realidad estás abasteciendo en Instagram, esa persona ha publicado tres fotos en la sombrilla. Así que puedes simplemente deslizar e ir al primero, segundo y tercero. Y se mostrará en la sección superior derecha, y así sucesivamente. Entonces eso es lo que vamos a hacer en esta conferencia. Así que vamos a crear rápidamente un marco de tamaño iPhone 14. Y el siguiente paso, lo que voy a hacer es hacer zoom esto para que todos puedan ver que el 75% se ve bien. El siguiente paso, siempre que intentes crear cualquier diseño o estructura de alambre, es importante que uses cuadrículas. Así que vamos a agregar cuadrícula de diseño. Ahora vamos a cambiar esto de sistema de red a sistema de RO ahora ¿por qué fila y no llamarlos? Simplemente porque estamos haciendo una aplicación móvil. Ahora cuando estamos tratando con la aplicación móvil, no tenemos mucho mojado. Tenemos mucha altura. Entonces cuando estamos lidiando con mucha altura, nos ocupamos de filas. Cuando tenemos mucho mojado, nos ocupamos de muchas columnas. Entonces eso es lo que vamos a tratar. Entonces solo selecciona filas, selecciona bien, cuenta de filas. Y todos y cada uno de los móviles tienen su propia barra de notificaciones, ¿verdad? Donde mostraría el tiempo, el porcentaje de batería ahí, servicio del operador que están usando la red, la fuerza de la red. Y en la parte inferior de la sección móvil, pantalla móvil, verías los iconos home back y Task Manager. Entonces queremos algún tipo de margen por esa razón. Así que dejemos unos 50 píxeles de margen. Y el tamaño de la canaleta me parece justo. Entonces voy a dejar esto a 20 pixeles y solo cerraré esto y mantendremos esto como está. Ahora el siguiente paso vamos a usar este punto en la mayor parte inferior por aquí donde estoy flotando mi cursor. En esa parte, queremos los íconos de navegación. Así que vamos a crear rápidamente una caja rectangular de exactamente ese tamaño. Así que sólo voy a crear una caja rectangular. Y me aseguraré de que el ancho también coincida con la cuadrícula de diseño. Y ese es el siguiente paso. Nos aseguraremos de que tengamos cuantos acres la búsqueda de viviendas, el verdadero Saigón, supongo que hay un ícono afilado, creo. Y la última es tu propia foto de perfil. Entonces cinco puedo decir requerir. Bien, así que para eso, lo que voy a hacer, solo voy a usar mi plugin de fuente impresionante. Entonces, si no tienes ningún ícono que estés buscando en el complemento Font Awesome, entonces puedes usar la herramienta Pluma para crear tu propio ícono. Pero mayoría de los casos, no encontrarás ningún icono que no esté disponible en este plugin en particular. Entonces busquemos a quien pueda, y lo buscaré. Y aquí puedes ver el ícono de Inicio. Así que vamos a traer ese icono por aquí. ¿Dónde está mi icono? ¿A dónde voy exactamente? Eso lo puedo encontrar. ¿Dónde está mi Eigen? Bien, así que se ha entregado aquí. Vamos a mover esto. El siguiente paso queremos el icono de búsqueda. Vamos a traer nuestro icono de búsqueda. Ahora no sé por qué está tardando tanto tiempo traer este ícono. Entonces icono de búsqueda. Bien, tenemos nuestro ícono de búsqueda. El siguiente queremos. No creo que sean icono de Reel y este Font Awesome. Así que en su lugar podemos usar el icono de la cerca. Entonces obtendríamos algo real así. Simplemente puedes escribir película. Podemos usar este icono por ahora. El siguiente, siguiente paso queremos artículos de tienda. Tan afilada. Esto se ve bien. Entonces usaremos este ícono, artículo de tienda o este, este en particular se usa generalmente Instagram. Así que simplemente eliminaremos esta. Y para la foto de perfil usaremos una forma de círculo para que no tengas que preocuparte por ello el siguiente paso, los otros íconos que estaríamos usando es el ícono, el ícono, el ícono de comentario, y el ícono de aroma, y también el ícono de guardar. Así que vamos a traer todos los íconos. Ahora, he agregado todos los íconos. El siguiente paso que vamos a hacer es que vamos a estar usando todos estos iconos en espacios iguales. Entonces solo arrastra por esta parte. Bien, vamos a arrastrar esto. asegura de que el ancho y alto de esto sea de 30 píxeles por 30 píxeles. Y esto se ve bien. Bien, intentemos alinear este centro con respecto al eje y, no al eje x. O lo siento, podemos dejarlo aquí mismo. Bien, el siguiente paso, queremos el icono de búsqueda. Así que vamos a hacer clic en este icono de búsqueda 30 por 30. Solo trae todos estos íconos y luego lo intentaremos, luego intentaremos colocarlos a distancias adecuadas. Entonces 30 T. Entonces esta, de nuevo, tiene que ser 30, 30. Vamos a usarlo por aquí. Y por último, queremos queremos una forma circular. Entonces solo usaremos eso. Bien, 38, 38. Revocar alrededor de eso. Así que no te preocupes por ello. Vamos a crear de nuevo una elipse de tamaño 30 por 30. Y le daremos un color de relleno de tal vez un tono más oscuro. Esta sombra se ve bien. Y nos aseguramos de que la distancia de esta elipse desde este punto sea la misma desde esta posición. Entonces para hacer eso, lo que voy a hacer, en ese caso, sostendré mi tecla de mayúsculas u otra. Sólo puedo seleccionarlos todos juntos. Éste, éste, éste, éste, y éste. Y puedo alinearlos tal manera que ocupe distancias iguales. Bien, ahora, sólo puedo seleccionar 12 todo el asunto. Vaya, sólo puedo seleccionar 123, todo el material. Y solo muévelo para que quede alineado verticalmente. Bien, así es como debería verse nuestra navegación, la navegación inferior más. El siguiente paso, queremos. En la parte superior, queremos el icono, que es el icono de la flecha hacia atrás. El icono de flecha hacia atrás también lo requerirá. Así que vamos a traer ese icono. Entonces podemos decir Flecha hacia atrás. Sí, éste, eso es lo que estaba buscando. Vamos a colocarlo por aquí. Y el siguiente paso que queremos es, nuevo, este sería de 30 por 30. Así que solo asegúrate de que todos los íconos sean de 30 por 30. Éste. También es de 30 por 30. Este también es 30 por 30, 30 por 30, 30 por 30, 30 por 30, 30 por 30. Bien, genial. A pesar de que este no se ve tan genial con 30 por 30, pero vamos a trabajar en torno a eso. Así que no te preocupes por ello. El siguiente paso, queremos asegurarnos que la imagen se ajuste a la mayor parte de la parte. ¿Bien? Entonces, um, ya sabes, hay un pie de foto, hay esta leyenda, hay una sección de comentarios. Ver todos los comentarios y parte del pie de foto. Entonces tenemos imagen. Entonces usaremos éste para que sepamos que esto tiene que irse. Esto permite que el usuario regrese. Bien, entonces en esta fila, esta fila, particularmente, bueno, asegúrate de que tenemos el ícono, la foto de perfil, el nombre de usuario. Debajo de eso tenemos la ubicación y los tres puntos. Yo creo que lo sería. Entonces de este punto a tal vez, digamos este punto, o tal vez este punto, vamos a mantener nuestra imagen. Entonces este punto a este punto de esto a este. Así que vamos a crear una caja rectangular. De este punto a aproximadamente, sobre esto. No, esto se ve bien. Este se ve bien. Entonces, vamos a mantenerlo así para que sepamos que de esto es de lo que estamos hablando. Esta es nuestra imagen. Bien, el siguiente paso, queremos que esta línea tenga nuestro comentario me gusta enviar y este botón de guardar. Bien, así que solo usaremos esta. Asegúrese de que esto esté correctamente alineado. Este también está correctamente alineado. Icono de corazón. Seleccione eso dicho por aquí. Bien. Asegúrate de seleccionar esta. Justo aquí. Seleccione este aquí mismo. ¿Bien? Ahora bien este se ve bien. Todo bien. Solo asegúrate de que esté alineado al centro. Así que sólo puedo seleccionar esta. Icono de corazón. Y ahora mi icono del corazón también está correctamente alineado. Cosas geniales. Ahora el siguiente paso por aquí, queremos, queremos el nombre de la persona, el nombre del pie de foto, pie de foto y comentarios y todas esas cosas. Entonces vamos a hacer eso. Y en la parte superior por aquí, término V1, ¿qué queremos? Queremos ese término. Déjame copiar esto. Haz una copia por aquí. Ahora puedo por favor configurarlo para que muestre que estoy hablando de la persona. ¿Correcto? Bien. El siguiente paso, este tiene que estar correctamente alineado al centro. Sí. Vamos, vamos a caminar alrededor del texto, que es inter, se ve bien. Diremos Nombre de usuario. El nombre de usuario debe ser semi negrita. Entonces cambiaremos de regular a semi negrita. Y debajo de este texto, queremos otro texto, que es la ubicación. Entonces, cuando hablamos de etiqueta, etiqueta tu ubicación. Y copiaremos esto, cambiaremos esto a regular, ¿verdad? Sí, esto se ve bien. El siguiente paso que queremos es el icono de tres puntos, el icono de Opciones. Um, intentamos encontrar para el plugin, si tenemos, bien, no tenemos opciones. A lo mejor podemos decir tres puntos. Nosotros sí tenemos tres puntos, así que eso es lo que vamos a usar. Asegurémonos de que se ajuste correctamente. Y con respecto a otros íconos también. Está correctamente alineado. Sí. Y solo asegúrate de que esto también sea de 30 por 30. 30 por 30. Oh, gritos. Esto tiene que ser bloqueado. 30. 30. Bien, Esto no se ve bien. Intentemos usar el tamaño original. Este se ve bien. 30 por 8.7, sea lo que sea. Y se asegura de que esta es la distancia que cubre. Bien, genial. Este wireframe se ve muy bien. El siguiente paso, si queremos que esto tenga, ya sabes, vamos a, vamos a mantener esto como color negro. Y dentro de esta imagen en la parte superior derecha. En esta parte, también crearemos una pequeña caja rectangular más, que dirá de cuántas imágenes estamos realmente. Así que solo asegúrate de que esta caja tenga este color. Este color, ¿verdad? Um, asegúrate de que se quede en esta línea. O mejor dicho debería decir que vamos a eliminar éste va a traer cuadro de texto, y vamos a ver uno por 31 por tres. Agreguemos un diseño automático a esto. Una vez que agregamos el diseño automático, nos aseguraremos de que el relleno desde todas las direcciones esté solo 55 desde todas estas direcciones. Aún así, es demasiado grande. Entonces hagamos esto tres. Bien, y le daremos a esto un color de relleno. Así que rellena un color gris. Sí. Este se ve bien. Si quieres agregar algo de radio fronterizo, adelante hazlo. Pero los propios wireframing requieren necesariamente cualquier radio fronterizo. Así que sólo vamos a mantener esto tal como está. Por aquí. Podemos volver a agregar tres puntos solo para asegurarnos de que estamos viendo que se trata de una sombrilla. Así que sólo podemos hacer una copia de esto. Y podemos cambiar el color. Sólo puedo colocarlo en el centro. Solo asegúrate de que en vez de negro, tengamos color azul. Sólo para mostrar que están usando cortisol. Así de color azul. Y eso se ve bien. Al final, queremos. Por aquí podemos decir Instagram. Puedes usar Instagram en font-style. Y por aquí, ¿qué vamos a hacer? Vamos a decir, antes que nada, vamos a tener esto, bien. Déjame solo alinear el centro, algo así. Entonces usaremos textbox. Bien, cuadro de texto, gustado por esta porción estará viendo que esto es del agrado de esta persona. Y vamos a traer esto a alguna parte por aquí. Esta parte. Podemos usar el mismo texto. Así que solo copia esto y colócalo por aquí. Bien. Ver, me gustó por nombre de usuario y digamos 20 otros, ¿verdad? Wendy, otros. Fresco. Esto es lo que queríamos. El siguiente paso, queremos el pie de foto. Entonces otra vez, solo usemos este nombre de usuario, font-style, ¿verdad? Podemos simplemente colocar el nombre de usuario por aquí. Nuevamente copia del texto. Ahora para el pie de foto, podemos usar el texto Lorem Ipsum. Entonces puedo decir guión de leyenda y luego puedo usar el Lorem Ipsum. Así que solo usaré el plugin Lorem Ipsum. Así que vamos a generar frases phi. Y no ha calificado cinco frases. Solo asegúrate de que se ajuste al auto, esconde estas cosas. Más bien debería decir eso. Solo estoy alejando esto. Y voy a cambiar el tamaño de esto. Voy a cambiar el tamaño de mi cuadro de texto. Este cuadro de texto sitios necesita ser acortado. Y solo asegúrate de que ocupe altura automática. De nuevo, haz zoom a esto. Algunas de estas cosas podrían necesitar ser eliminadas en la parte de subtítulos. Simplemente puedes cambiar el tamaño de esta parte. Puedes colocar el pie de foto por aquí. Eliminemos esta parte del pie de foto, esta parte. Y podemos decir leer más. Leer más. Y también podemos agregar algunos puntos suspensivos para simplemente asegurarnos de que esto es lo que realmente queremos decir. Sólo podemos seleccionar Leer más parte. Podemos cambiar el color de relleno a color gris, algo así alrededor. Bien. Lee más y en la parte inferior, usaremos la sección de comentarios. ¿Bien? Entonces podemos decir Ver todos los comentarios de phi. Y por último, queremos precisar también la fecha. Bien, así que para eso, lo que voy a hacer, vamos a disminuir el tamaño de estos iconos. Siento que 30 por 30 es demasiado grande. Así que vamos a reducir a 2020. No, esto sería demasiado pequeño. 25, sin embargo, ese 25 se ve bien. Así que solo asegúrate de que esta se ajuste correctamente. Bien, vamos a seleccionar cosas enteras. Muévelo a algún lugar por aquí. Y al final, queremos la fecha. Entonces podemos ver aquí mismo que podemos seleccionar la fecha. Entonces digamos hace dos días. Entonces hace dos días, algo así. Y así es como se vería tu wireframe de Instagram como réplica exacta de la misma. ¿Qué tan genial es eso? Al final, solo puedes seleccionar tu marco. Simplemente puedes quitar la rejilla. Y así es como se ve realmente tu wireframe de Instagram. Y antes de que realmente terminemos esta conferencia, solo me gustaría agregar algunas otras cosas que siento que podrían ser, podrían hacer algunos cambios. Eso sería para agregar algunas líneas horizontales. Así que solo selecciona todas estas cosas. Por favor, siéntese en algún lugar por aquí. Bien. Ahora, agreguemos una línea, sólo una línea simple, que divide esta sección. ¿Bien? Una línea horizontal simple. Solo asegúrate de que el color del trazo sea gris. Este color. Bien, por favor, siéntate en algún lugar por aquí. Bien, hagamos una copia de esto. ¿Y dónde lo vamos a pegar? Justo aquí. Bien. En algún lugar de aquí. Y uno más, que colocaría, que estaría encantado de escuchar ese desierto. Así es como tu Instagram. Déjame alejar el zoom para que puedas ver correctamente. Y así es como se vería realmente tu wireframe de Instagram . 31. (30) Exportar archivos en Figma: Bien chicos, ahora que hemos aprendido a hacer wireframes para nuestro diseño, veamos también cómo podemos exportarlos en diferentes formatos y qué formato particularmente usar para nuestro caso de uso. Así que solo seleccionaré mi marco cuando quieras exportar cualquiera de tus diseños, solo asegúrate de seleccionar ese marco completo. Así que solo selecciona eso. Y en su panel de propiedades de diseño, simplemente desplácese hacia abajo hasta la parte inferior más allá, encontrará exportación. Inicialmente. Sería así. Así que simplemente haz clic en el icono más y encontrarás el método de exportación. Ahora hay diferentes formatos en los que puedes exportar tu archivo de diseño Figma. Ahora, eso es PNG, JPEG, SVG y PDF. Ahora bien, ¿qué significa realmente P&G? ¿Por qué debería exportar mi diseño en formato PNG? Así que PNG significa gráficos de red portátiles. Es un formato de imagen de mapa de bits utilizado generalmente para transferir imágenes a través de Internet. Así que no entres en detalles sobre lo que es PNG, ¿qué es este formato de mapa de bits? Solo entiende que se trata de un formato de archivo sin pérdidas, lo que significa que la calidad de la imagen no se reduce cada vez que se comprime la imagen. Bien, así que si intenté enviar un archivo PNG por correo electrónico, digamos, y todos ustedes saben que hay algún límite, Hay algún límite de tamaño a los archivos que solo se pueden enviar alrededor de 25 mega, 25 mb de archivo usando su Gmail o cualquiera de los proveedores de servicios de correo electrónico que esté utilizando. Entonces en ese caso, P&G entra en la imagen porque se puede reducir el tamaño del archivo y no se reducirá la calidad. Por lo que P&G hace que sea un buen uso cuando quieres compartir tus archivos en Internet. En segundo lugar viene el formato JPEG. Jpeg significa Grupo Fotográfico Conjunto. Ahora, cuando comprimes esta imagen de grupo fotográfico conjunto, da como resultado un tamaño de archivo más pequeño, pero también reduce su calidad de imagen. Por lo tanto, no es una forma ideal compartir realmente tus archivos JPEG a través de Internet. Generalmente, lo que sucede es que si tienes un archivo, archivo JPEG, digamos que es de aproximadamente un megabytes en tu sistema. Y estás tratando de enviar eso usando algún software de mensajería instantánea o aplicación de mensajería instantánea que estás usando. Algo así como, digamos WhatsApp. Entonces, si envías algún archivo, hay posibilidades de que WhatsApp generalmente reduzca o comprima el tamaño del archivo para que sea más fácil para la transmisión de datos. Entonces en ese caso, si estás enviando archivos JPEG, los archivos serán de formato comprimido y el receptor recibirá una imagen de mala calidad, y no querrás que eso suceda. Por lo tanto, los JPEG generalmente se utilizan cuando se quiere imprimir todo su diseño o cuando se está utilizando con fines fotográficos. Así que usa PNG cuando quieras enviar los archivos en internet, usa JPEG cuando realmente quieras imprimir algunas cosas. Luego viene el formato SVG. Ahora, SVG es en realidad tus Gráficos Vectoriales Escalables. Ahora, los gráficos no están ligados a ninguna resolución específica. Al igual que este fotograma en particular podría tener 1920 por 20 píxeles de ancho, pero los SVG no están vinculados a ninguna resolución específica. Se trata de un gráfico vectorial basado en XML, lo que significa que puedes hacer cualquier elemento grande o pequeño sin perder su claridad. Ahora, ¿cuándo deberías usar realmente SVG? Entonces, digamos que estás tratando de crear cualquier ícono nuevo usando Figma. Entonces, en ese caso, SVG se convierte en un gran uso y. Entonces porque cuando pasas este formato SVG a un desarrollador front-end, entonces cuando el desarrollador front-end en realidad está codificando esas cosas, digamos HTML o reaccionemos. Entonces en ese tiempo, cuando el desarrollador quiere usar tu icono, entonces el formato SVG se convierte en un gran caso de uso porque SVG es un tamaño realmente ligero y no tienen ninguna resolución específica. Y al final tenemos el formato PDF. Pdf es bastante popular porque no requiere ningún hardware o software específico que se ejecuta en ningún sistema. Pdf básicamente significa formato documentado lanzador. Entonces generalmente usamos PDF para compartir nuestros activos, los cuales hemos guardado en Figma. Y yo estoy por aquí. También podrías ver que tenemos diferentes opciones de escala cuando x 1x2x, tal vez te preguntes ¿qué significa eso? Entonces generalmente se ha establecido en una x por defecto. Si selecciono a x, entonces la calidad se duplicará. Si selecciono dos para x, la calidad será mayor, pero el tamaño del archivo también será grande. Entonces, si intenté descargar esto, déjame exportar este marco de iPhone 14 para x y luego el formato PNG. Entonces solo voy a mostrar esto en la carpeta. Y déjame mostrarte eso. ¿Cuánto archivo ocupa? Tamaño del archivo. Entonces se están ocupando alrededor de 100.103 kb de espacio. Déjame mostrarte cómo se ve la imagen. Entonces así es como se ve realmente la imagen y esta es una forma inadecuada de enviar realmente cualquier archivo que nos interese. Entonces así es como en realidad trabajas alrededor. Estás exportando sistemas cuando quieras, en realidad envía tus archivos a tus clientes y tal vez a colegas y cosas así. Entonces, en ese caso, se utilizan estos diferentes formatos de archivo.