Magia de diseño con Figma: curso intensivo para principiantes

1. Introducción al curso: ¿Estás interesado en aprender una poderosa herramienta de diseño que pueda llevar tus habilidades de diseño de interfaz de usuario al siguiente nivel Entonces este curso de Figma para principiantes es perfecto para que comiences Este curso está diseñado para cualquier persona con poca o ninguna experiencia en Figma. Ya sea que seas un principiante completo que busca aprender lo básico o alguien que quiera repasar sus conocimientos de Figma, este curso te proporcionará una base sólida en el uso de Figma para el diseño de UI No hay requisitos de software para este curso. No obstante, ¿será muy útil la alfabetización informática básica y la familiaridad con los principios de diseño A lo largo de esta formación integral de Figma, cubriremos una amplia gama de temas, incluyendo lo que es Figma y sus beneficios clave para el diseño de UI Cómo configurar tu cuenta Figma y navegar por la interfaz Aprenderemos a instalar la aplicación de escritorio Figma para mayor funcionalidad. En el mismo curso, igualmente aprenderemos a crear archivos, a usar el panel de propiedades y a las capas de elementos También aprenderemos a diseñar y trabajar con marcos, cuadrículas y guías, cómo agregar y personalizar varias formas usar herramientas de pluma y paquetería, dominamos cómo usar operaciones booleanas para manipular y combinar Aprendemos a crear botones interactivos y componentes de diseño reutilizables. En el mismo curso, exploraremos la vasta biblioteca de complementos de Figma para ampliar sus capacidades de diseño Y al final de todo, aprenderemos a exportar y compartir tus diseños para diversos usos. Al final de este curso, estarás equipado con las habilidades y conocimientos para usar Figma con confianza para usar Figma con confianza para crear diseños de UI de aspecto profesional Soy el doctor Rashi, conferencista, conferencista, y un YouTuber apasionado, y voy a ser el instructor Entonces, ¿estás listo para sumergirte en el mundo de Figma? Empecemos. 2. ¿Qué es Figma?: Entonces, ¿qué es Figma? FGMA es una herramienta de diseño basada en la nube para crear interfaces de usuario y experiencias de usuario, lo que llamamos la UI UX, ¿verdad En diseño web y desarrollo de apps. Por lo que es similar a programas como sketch, pero con un enfoque y colaboración, fomenta la colaboración entre equipos entre tus socios, o tus compañeros. Puedes trabajar fácilmente en un proyecto en particular en tiempo real. Y luego permite crear gráficos vectoriales, diseñar diseños y agregar animaciones. Uno de los beneficios de usar Figma es que es fácil de aprender Tiene una interfaz amigable para principiantes, lo que la hace ideal para aquellos que son nuevos en diseñar software. Y luego hablamos de la colaboración en tiempo real. Es muy, muy importante y es uno de los focos clave de Figma, puede trabajar con otros en el diseño simultáneamente independientemente de tu ubicación Así que dondequiera que estés en el mundo, puedes trabajar en colaboración en un proyecto o en un archivo en particular En tiempo real, puedes hacer cambios directamente. Entonces nos fijamos en cómo colaborar en este curso en particular. Y luego hablamos de prototipado. Puedes construir prototipos interactivos para probar y refinar tus ideas de diseño Es muy fácil con Figma. Y luego hablamos de la naturaleza basada en la nube. En Figma, tienes acceso a archivos desde cualquier dispositivo con conexión a internet Así que es fácil sincronizar cosas y puedes acceder a ellas en cualquier lugar. El hecho de que esté basado en la nube, no es necesario guardar nada. Se guarda automáticamente, guarda tu trabajo ya que estás trabajando directamente en la nube. A pesar de que tienes la versión de escritorio, pero también se sincroniza fácilmente la versión en línea. Así que funciona fácilmente. Una vez que tengas conexión a internet, puedes seguir trabajando directamente en Figma. Y luego, por último, hablamos de las características del mango. puede trasladar sin problemas sus diseños desde Con Figma puede trasladar sin problemas sus diseños desde el concepto hasta el desarrollo Es muy, muy fácil. Esta es una herramienta todo en uno que puedes usar para desarrollar aplicaciones, para diseñar sitios web, para diseñar diferentes tipos de elementos interactivos, y puedes ir a la creación de prototipos y disfrutar de tu experiencia Espero que disfrutes este video. Gracias por mirar, y espero verte en la próxima clase. 3. Cómo crear una cuenta e iniciar sesión: Para empezar, puedes venir a cualquier parte dentro de tu navegador. Puedes abrir cualquiera de tus navegadores. Vienes a la barra de búsqueda de aquí y solo buscas Google, y puedes buscar Figma muy fácilmente Simplemente puedes buscar a Figma y lo ves por aquí. La herramienta de diseño de interfaz colaborativa y la puedes ver con la primera opción. O alternativamente, puedes simplemente ir a figma.com y te llevará a la misma plataforma Muy bien, entonces te llevará a esta misma plataforma. Entonces este es el sitio web de FGMA. Puedes venir directamente a figma.com, como te dije, o puedes seguir el procedimiento de Google Y una vez que estás aquí, la forma en que diseñas, alineas y construyes realmente importa. Así que hazlo junto con FDMA. Entonces puedes ver que esto es solo una muestra colaborativa de lo que se trata la plataforma y para qué puedes usarla Entonces, algunas de las características que puedes estudiar y simplemente entender cómo se puede usar la plataforma para desarrollar diferentes tipos de aplicaciones, diferentes tipos de cosas relacionadas con la web y prototipos Entonces aquí abajo, puedes continuar solo para tener otra comprensión de algunos de los beneficios y cuáles son algunas de las características que ofrece por las que realmente puedes pasar solo para entender brevemente sobre la plataforma. Ahora, una vez que hayas terminado, puedes comenzar creando una cuenta aquí, y puedes hacerlo simplemente usando Get started aquí o puedes usar la función de inicio de invitado gratis aquí. Alternativamente, puedes consultar el enlace en la descripción de este video y podrás encontrar un enlace para unirte. Entonces, hagamos clic en comenzar gratis, y luego tienes estas opciones de coincidencia. Puedes iniciar sesión directamente con tu cuenta de Google. Puedes registrarte directamente con tu cuenta de Google, o puedes usar cualquier correo electrónico que tengas o contraseña, y puedes usarlo para crear una cuenta directamente. Para este tutorial, vamos a usar una de mis cuentas de correo G solo para iniciar sesión, así podemos hacer clic en la cuenta de Gmail. Bien. Entonces, una vez que inicies sesión, serás llevado a esta misma plataforma. Ahora, por aquí, tendrás que responder algunas preguntas para tener acceso a la plataforma principal. Tenemos la opción de saltarnos en cualquier momento dado si no quieres. Pero creo que aconsejablemente es recomendable simplemente responder a las preguntas Básicamente, son solo preguntas básicas, así que solo puedes decir, ¿cuál es tu nombre? Simplemente puedes escribir, y luego puedes seguir adelante. ¿Qué tipo de trabajo realiza? Esto es solo para que ellos puedan preparar la plataforma para ti, solo para tener algunos datos sobre ti. Entonces, por ejemplo, podemos decir estudiante y educador, y luego podemos pasar al siguiente, y luego podemos decir, ¿alguno de estos describe tu trabajo Freelancer en un campo de entrenamiento, en una empresa, en una agencia en la escuela. Digamos en la escuela, por ejemplo. Y entonces podemos ver a qué tipo de institución asiste o trabaja? Digamos educación superior, por ejemplo. Y entonces ya se puede ver, ¿con quién suele colaborar? Entonces digamos compañeros de equipo. Entonces se puede decir quiere invitar a algunos colaboradores. Por el momento, no quiero invitar a nadie para que pueda simplemente seguir adelante y saltarme esto. Y entonces lo que te trae hoy a Figma, inicia un nuevo trabajo y proyecto Así que inicia un nuevo proyecto laboral. Entonces ese es mi objetivo para hoy. ¿Y has usado antes los productos FGMA? Puedo decir, no, es mi primera vez porque es la primera vez y auto te estoy llevando a través de esto. Entonces solo tenemos una comprensión de qué es y para qué podemos usarlo directamente, así aprenderemos todo en el trabajo. Entonces, qué plan hará como, es el plan de inicio, que tiene esta función de coincidencia, o el plan profesional, que también tiene esta función de coincidencia. Bueno para este tutorial, sólo vamos a ir con el plan de inicio. Así que solo podemos seguir adelante y seleccionar el plan de inicio y continuar con el siguiente. Ahora bien, lo que te gustaría hacer primero, es usar el Figma o continuar y usar la pizarra blanca en mermelada alimentada Pero para esto en este momento, para enfocarme en el diseño con Figma, así puedo seleccionar la primera opción, y luego sólo puedo seguir adelante y decir acabado. Bien, entonces ahora estás en la plataforma principal. ¿Bien? Entonces tienes la opción de simplemente seguir esto y solo te va a mostrar alrededor para que puedas enviar un texto a capas con tus barras de herramientas, mover herramientas que puedes mover tus documentos a tus entidades a diferentes lugares, y así sucesivamente. Y aquí abajo, tienes el formato en el panel de diseño Tienes las características de formateo, las características de diseño por aquí Y puedes simplemente mostrarte de un vistazo, las propiedades. Así que solo puedes seguir adelante e iniciar un nuevo archivo a partir de eso, y luego puedes seguir adelante y ser bienvenido a la plataforma principal. Bien, entonces esta es la plataforma principal donde te traerán cada vez que te inscribas en Figma. Ahora, esto concluye esta clase sobre cómo crear una cuenta e iniciar sesión en Figma. En la siguiente clase, vamos a ver algunas de las cosas básicas que debes entender antes de usar Figma. Todo este panorama general de la interfaz. vamos a repasar algunas de Aquí vamos a repasar algunas de las cosas básicas que necesitas entender antes de empezar a crear archivos y empezar a trabajar en serio. Bien, pero vamos a cubrir algunas de las cosas básicas que necesitas entender en esta etapa. Entonces hasta la próxima, gracias por ver y espero verte en la próxima clase. 4. Descripción general de la interfaz básica: En la última clase, platicamos sobre cómo registrarse y crear una cuenta dentro de Figma. Y en esta clase, vamos a hablar de lo básico, la visión general de la interfaz, lo que hay que entender y cuáles son algunas de las cosas a las que debes prestar atención. Entonces lo primero es que cuando inicies sesión en tu cuenta de Figma, esta es la plataforma principal en la que te van a traer En la parte superior izquierda por aquí, tienes tu cuenta. Tienes la opción de cambiar las cosas directamente. Puedes editar cualquier cosa aquí. Puedes agregar tu foto COV también, Puedes agregar cualquier cosa. Y entonces puedes cambiar el tema de todos los looks de la figma. Este es el tema ligero. Se puede hacer que oscurezca. A algunas personas les gusta así. Pero creo que lo prefiero en el tema de las luces, así que siempre puedes usar el tema y puedes cambiarlo directamente. O también puedes seguir el diseño del sistema si estás interesado. Ahora, de nuevo, tienes el escritorio, la configuración. Aquí, tienes un montón de ajustes con los que puedes jugar, por ejemplo, puedes cambiar el nombre, y luego puedes cambiar el idioma o el título del trabajo, el tema. También, puedes cambiar desde aquí. Y otras características. Así que solo puedes seguir adelante y estudiarlos, y luego puedes entender la información de la cuenta desde aquí. Puedes actualizar o eliminar o agregar cualquier cosa. Y luego puedes eliminar tu cuenta incluso de forma permanente si has terminado con lo que estás haciendo y quieres eliminar. Y entonces esta es una comunidad para los usuarios de Figma. Puedes tener tu propio puedes unirte a la comunidad Figma para publicar archivos y enchufar y comentar y ver qué está haciendo la gente Puedes seguir a los miembros y dar me gusta lo que usan, y también puedes aprender de ellos. Y luego también puedes administrar las notificaciones desde aquí usando esta misma función. Entonces esto se trata de los tres puntos. Se trata de ajustes. Si lo deseas, puedes descargar la versión deskstop, que en realidad es lo que vamos a usar para este tutorial Vamos a estar usando la versión deskstop de Figma. Te voy a mostrar cómo descargarlo e instalarlo. Es muy fácil, y luego puedes abrirlo y empezar a trabajar. Se sincroniza automáticamente entre la versión de escritorio y la versión en línea, para que no tengas que preocuparte por nada Y este es el perfil de la comunidad. Puedes crear un perfil por tu cuenta y simplemente unirte a la comunidad, y luego puedes compartir ideas. Si tienes algún reto, siempre puedes compartirlo con ellos, y luego puedes comunicarte y agregar tus propios comentarios también al desafío de algunas personas. Y luego por aquí, puedes elegir la cuenta en la que quieres trabajar, lo que significa que puedes trabajar con más de una cuenta, y luego puedes cerrar sesión si te interesa. Entonces esta es la primera opción. Puedes buscar cosas directamente desde aquí. Puedes buscar archivos, puedes buscar proyectos, puedes buscar cualquier cosa usando la barra de búsqueda. ¿Correcto? Al siguiente, tienes lo reciente. Esto describe algunas de las cosas clave recientes que has tocado dentro de Figma. Entonces, si has tocado un proyecto en particular o un archivo en particular en el que estás trabajando, siempre puedes encontrarlo en los últimos de aquí. Y luego en la parte superior aquí, tienes las plantillas de mermelada de higos. Si quieres trabajar en plantilla, puedes consultar fácilmente y trabajar en plantillas. Se clasifican. Esto es todo. Puedes consultar brainstorms, puedes consultar diagramas, puedes consultar planeación y reuniones dependiendo de lo que intentes crear Pero entonces nuestro objetivo para esto son las opiniones recientes, bien. Y luego estos son archivos compartidos. Si tienes archivos compartidos, si las personas o el equipo tienen archivos compartidos, podrás encontrarlos aquí. Proyecto compartido también. Puedes encontrar proyectos que se comparten contigo para que puedas trabajar en ellos directamente. Ahora lo siguiente son tus equipos. Puedes tener múltiples equipos en los que puedes trabajar juntos, y luego tienes el draft. Draft es en realidad uno de los lugares más importantes para estar en Figma. Aquí es donde se pueden crear diferentes tipos de proyectos, diferentes tipos de archivos. Puedes crear y trabajar directamente desde aquí. Por lo que puedes agregar diferentes tipos de archivos de este borrador usando este signo más. Así puedes hacer clic en el signo más, y podrás ver que puedes crear un nuevo archivo de diseño, nuevo archivo figma fi jam Puedes crear desde aquí, y puedes importar medios desde aquí directamente. Te voy a mostrar en detalle cómo usar esto. Y luego aquí abajo, tienes la opción de ver tu plan y actualizar si es necesario. Entonces por aquí, ustedes tienen equipos. Entonces el primero es lo primero que tienes. Se pueden tener múltiples proyectos. Puedes agregar nuevos proyectos directamente desde aquí, o en cualquier proyecto dado, puedes venir aquí, puedes golpear este signo más para poner en marcha un proyecto. Esta es también otra forma, pero siempre me gusta partir del borrador. Desde el borrador es mucho mejor y más fácil. Entonces estos son los básicos. Por aquí, esto es lo principal donde puedes ver tu borrador, y luego puedes ver eliminado si estás trabajando en proyectos borrados o borrados, podrás verlos por aquí. Ahora, en la parte superior derecha, aquí es donde es aquí donde puedes checar. Puede agregar archivos de diseño. Puede crear un archivo de diseño de agregar solo golpeando este archivo de diseño, y solo va a crear un archivo de diseño fresco para usted. De la misma manera, puedes crear igualmente fit jam board directamente desde esta parte superior derecha. Y entonces tienes la opción de importar medios sean una imagen B y video, puedes importar directamente desde Pre. Puedes consultar todos los archivos, archivos diseño, archivos fi jump, el arreglo, puedes verificar en la clasificación. ¿Es alfabético? ¿Es fecha de creación o última modificación o días primero o más reciente primero, puede organizar los archivos en consecuencia, y luego puede cambiar el aspecto. Esta es la vista de cuadrícula. Puedes cambiarlo a vista de lista , que es algo así. Y pienso específicamente, me gusta que esté en la vista de cuadrícula, que es mi favorita. Entonces aquí abajo, en los casos, si tienes algún reto durante tu trabajo, siempre puedes acercarte a esto. Y da click en esto, y tienes la opción de ordenar el ver sus videos de YouTube Puedes consultar sus foros de soporte, las notas de lanzamiento y enviar comentarios si tienes problemas que puedes compartir con la marca con la compañía, y luego también puedes contactar con el soporte directamente. Se puede preguntar en la comunidad. Esta pestaña también te va a llevar a la misma comunidad donde podrás interactuar con las personas y compartir tus retos e ideas. Y luego por aquí, tenemos el atajo, el atajo de teclado. Y luego aquí abajo tienes, puedes resetear al abordar. Todo vuelve a reiniciarse y puedes cambiar la distribución del teclado y cambiar el idioma también desde aquí. Entonces esto es algo muy importante en lo que siempre puedes hacer clic para tener un entendimiento o para conectarte con las otras características. Y luego por aquí también, puedes explorar la comunidad si te interesa. Entonces esto concluye esta clase sobre la comprensión de los fundamentos de Figma. Las cosas muy básicas que debes entender antes de empezar a usar Figma. En la siguiente clase, vamos a aprender a crear un proyecto o un archivo en el que podamos trabajar directamente. ¿Bien? Entonces crearíamos un proyecto y un archivo, y también vamos a entender la visión general de la interfaz, para que puedas tener una comprensión clara de qué es la plataforma y para qué podemos usarla directamente. Así que hasta la próxima, gracias por ver y espero verte en la próxima clase, ¿verdad? 5. Instalación de la aplicación de escritorio Figma: En esta clase, vamos a aprender a descargar e instalar la aplicación de escritorio Figma, lo cual es muy, muy importante si la tienes instalada en tu sistema, entonces es tu trabajo, y es el proceso Y fíjate, como dije antes, es muy fácil trabajar en la versión de escritorio, y se sincroniza automáticamente con la versión Cloud. Así que cada vez que inicies sesión en cualquier computadora, seguirás encontrando intacto tu trabajo. Es solo por facilidad de acceso que se fabrica la versión de escritorio. Entonces para acceder a la versión de escritorio, todo lo que necesitas es solo iniciar sesión ya que tenemos inicio de sesión por aquí, y puedes llegar a nuestra parte superior izquierda por aquí, esta hoja médica. Puedes hacer clic, como te mostramos anteriormente. Se puede ver obtener la aplicación de escritorio. Aquí es donde obtienes la aplicación de escritorio y la descargas e instalas. Entonces puedes hacer clic y va a detectar automáticamente qué tipo de sistema operativo estás usando, ya sea un sistema operativo windows o es un sistema operativo mark. Se va a detectar automáticamente y te va a dar la versión para ese sistema operativo en particular. Entonces en mi propio caso, estoy usando el sistema operativo Mark, así que me va a dar la versión mark automáticamente. Así que una vez que venga aquí, va a guardar este archivo. Es muy, muy pequeña. Se puede ver. Simplemente puedes hacer clic y podrás verlo. Nuestro modelo FIG DMG, una vez que haga clic, podrá ver la ubicación, y podrá comenzar a trabajar en él directamente Para que puedas hacer doble clic y comenzar a abrir e iniciar la instalación directamente. Es muy fácil de instalar. Es solo un proceso paso a paso. Al igual que nosotros instalamos cosas en software en el sistema operativo mac. Entonces solo necesitas arrastrar esto y soltarlo aquí. Y solo te va a dar la versión textop instalada Por lo que ha detectado que ya tienen instalado uno. Entonces va a reemplazar esta parada porque sé que ya lo tengo instalado. Pero ese es el proceso solo arrastrar y soltar, y vamos a tenerlo instalado. Entonces una vez que lo instales, puedes simplemente seguir adelante y abrirlo y para abrirlo, puedes simplemente venir a la parte de lanzamiento por aquí. Simplemente puedes hacer click y podrás ver Figma. No lo ves, puedes buscar Figma y lo ves aquí Figma Entonces, una vez que hagas clic, se va a abrir, que puedas cerrar en esta versión textop y seguir trabajando en la versión en línea Y se puede seguir trabajando en la versión desstop. Siempre y cuando solo inicies sesión, puedes continuar con tu trabajo. Entonces esta es la versión de escritorio, y acabo de iniciar sesión, y se puede ver que no hay diferencia entre la versión de escritorio y la versión en línea. Así que es solo por facilidad de acceso, que puedas trabajar todo en el escritorio. Entonces básicamente, así es como descargar e instalar la aplicación de versión de escritorio para Figma. Simplemente puedes seguir adelante y seguirlo, descargarlo e instalarlo en tu sistema para que podamos continuar con el proyecto. Entonces en la siguiente clase, vamos a ver cómo crear un archivo y un proyecto y luego la visión general de la plataforma de archivos principal, en la plataforma principal, para que puedas entender cuáles son cuáles son algunas de las cosas importantes a las que debes prestar atención mientras usas FICMA mientras creas un archivo y lo administras en FIGMA Así que hasta la próxima, gracias por verte y verte en la siguiente clase. 6. Cómo crear un archivo y la interfaz: En esta clase, vamos a aprender a crear un archivo y la visión general de la interfaz dentro de un archivo en particular. Entonces para empezar, como dije, puedes estar en el draft, que es lo más fácil, y puedes estar en el equipo. Entonces puedes llegar al signo más, y luego puedes patear, lo que quieras patear inicio. Alternativamente, puedes venir al archivo de diseño por aquí y va a comenzar un archivo de diseño fresco. Para este tutorial, vamos a comenzar con el borrador, puedes venir al borrador y puedes dar click en este signo más. Y nuevamente, tienes la opción de diseñar comenzar desde un nuevo archivo de diseño. O del nuevo archivo fik jam. Para esta clase, vamos a iniciar nuevo archivo de diseño con solo importar con solo hacer clic en el nuevo archivo de diseño. Y una vez que hagas clic en eso, serás llevado a esta misma plataforma. Entonces, lo primero que debes mirar en la parte superior es que tienes este borrador, y luego tienes el proyecto titulado. Entonces hay que nombrar al proyecto al principio. Ese es el primer paso. Entonces podemos hacerlo haciendo doble clic aquí, y digamos que esta es nuestra primera clase. En Figma. Para que puedas hacer click en. Y ahora tienes esta clase este archivo, primera clase sobre Figma bajo borrador bajo el borrador del proyecto Y ahora puedes hacer clic en este pequeño desplegable y tienes la opción de mostrar el historial de versiones para exportar este proyecto y luego cambiar el perfil de color del archivo, y puedes duplicar el archivo. Puedes cambiarle el nombre cuando quieras, y puedes mover el proyecto a algún lugar, y luego puedes separar este archivo o eliminar el archivo a medida que mueves Entonces esto es lo principal que puedes hacer por aquí. Este es el lienzo principal donde haces toda tu adición y creación de prototipos y así sucesivamente. Haces todo por aquí. Ahora a la izquierda, tienes las capas donde puedes hacer la búsqueda por aquí. Puedes buscar cualquier cosa también dentro de tus capas o dentro de las otras plataformas. Y luego tienes las capas listadas y tienes activos, y tienes páginas. Además, puedes enumerar páginas y a medida que sigas trabajando en el proyecto. Miramos esto en detalle a medida que avanzamos con nuestro proyecto. Entonces ahora mismo puedes estar en capas. Y puedes ver a la derecha tienes esta pestaña de diseño. Aquí es donde tienes la mayoría de las cosas clave con las que puedes jugar como las propiedades, y luego tienes esta sección de prototipos. Puedes crear prototipos, puedes crear una nueva conexión. Puedes ejecutar tu prototipo también desde aquí para ver cómo va a quedar en el punto terminado. Entonces estos son dos muy importantes se sienta al lienzo que debes entender cómo usarlos. Ahora, arriba a la izquierda, tienes este desplegable. Una vez que haga clic en este menú desplegable. Puedes consultar el acceso rápido a la acción rápida. Si quieres checar acción rápida, puedes echarle un vistazo. Y luego tienes el archivo. Tienes la oportunidad de crear un nuevo diseño, nuevo archivo f jam desde aquí o puedes colocar una imagen o guardar una copia local del proyecto en el que estás trabajando en tu máquina local o en tu computadora directamente. Y puedes guardar a la historia de la visión, si quieres o puedes mostrar el historial de la visión. Y así sucesivamente, y puedes exportar marcos a PDF y exportar tu proyecto a archivo local. Tienes estas opciones básicas como la edición, puedes copiar prueba y encontrar cosas para reemplazar el acerca. Puedes encontrar que puedes hacer bastante desde aquí. Se pueden cambiar las vistas. Además, puedes insertar líneas de cuadrícula, reglas y así solo para ayudarte con tu trabajo y puedes acercar y alejar Tienes muchas funciones de Zoom directamente aquí abajo. Bien. Y luego podrás mostrar y ocultar la interfaz de usuario directamente. Puede mostrar contornos, contornos de marco, etc. Aprendemos a usar la mayoría de estas herramientas básicas, cosas básicas a medida que navegamos. Tienes las características del objeto, tienes las características de texto, que tenemos bastantes de ellas en el panel de propiedades de aquí, y luego tienes la función arreglada. Que habla del arreglo en capas, cuál viene primero y cuál viene el último La característica vectorial, los plug ins, los widgets y las preferencias, puede habilitar o deshabilitar cualquier cosa por aquí para cambiar la preferencia en lo que respecta a lo que sucede o lo que se muestra en la plataforma. Para que puedas revisar o atar o cosas antiguas desde aquí. También puedes cambiar el tema del modo oscuro a claro, o de claro a oscuro, o puedes seguir el tema del sistema. Usando este método también. Perfil de color, distribución del teclado, y puedes tener bastantes controles desde aquí y bibliotecas. Eres libre de revisar las bibliotecas y ayudar a una cuenta, que hemos mostrado también desde aquí. Puedes cerrar sesión, puedes consultar el resumen legal, videos tutoriales, también atajos de teclado. Página de ayuda, puedes consultar todos estos desde aquí. Entonces esta es la primera opción. El siguiente elemento es esta función de movimiento. Puedes hacer click en este pequeño menú desplegable y podrás mover Tu contenido o tu proyecto. Se pueden escalar las cosas, que vamos a ver en detalle sobre cómo usarlas. Después de esto, tenemos el marco que puedes activar usando la letra F, o tienes la sección, puedes crear sección, puedes crear cortes. Vamos a aprender a usar todos estos también en detalles junto con sus atajos. Al siguiente por aquí, tienes las formas de diferentes tipos, rectángulo, tienen línea rectangular, flechas, elipses y polígonos y así sucesivamente Puedes colocar imágenes y videos si te interesa con sus respectivos atajos. Puedes seguir adelante y explorar todo esto. Y luego por aquí, la siguiente es que tenemos las herramientas Pluma. Tienes la pluma y el lápiz dependiendo de lo que quieras usar. Los tenemos a los dos. Y luego la siguiente es la característica de texto. Puedes hacer click para empezar a escribir cualquier cosa. Así que solo puedes hacer clic y puedes comenzar a escribir tu texto, y lo puedes ver aquí, Ca. Puedes hacer doble clic sobre él para tener la opción de cambiar las cosas a su alrededor. A medida que avanzas. Bien, entonces vamos a ver en detalle sobre todo esto, que puedas ver, puedes tener las funciones de edición de texto de diseño. Hablamos de todas estas características, cómo usar algunas de ellas, cambiar el estilo del teléfono, las capas, lo regular y el estilo de campo, el color, el trazo, los efectos Vamos a ver todo esto en detalle a este tutorial. Y luego tienes esta página de recursos. Puedes checar cualquier cosa. Puede agregar complementos, puede agregar componentes, puede widgets a medida que avanza. Entonces miramos en detalle, cómo usar algunos de ellos, y luego tienes la herramienta de mano por si quieres hacer un juego de palabras a las cosas, dentro de las camas particulares. Quieres mover las cosas. Quieres acercar alguna característica o a algún punto directo. También puedes hacer eso. Y luego por aquí, puedes agregar comentarios. Puedes agregar comentarios en cualquier momento dado, y alguien puede trabajar en ese comentario en particular. Puedes agregar a alguien. Puedes usar el signo de agregar para llamar a cualquier colaborador en particular, y puedes trabajar en colaboración con esa persona Se le puede dar instrucción y va a trabajar directamente. Entonces vamos a ver cómo colaborar con personas dentro de Figma agregando comentarios y palabras colaborativas o acciones colaborativas para que puedas trabajar simultáneamente en un mismo proyecto Entonces digamos colorear esto. Todo bien. Es solo una cosa normal, solo una característica normal, ¿verdad? Se puede ver que podemos verlo por aquí. Entonces sólo estoy dando una instrucción. Ahora bien, estas son las cosas más básicas. Por aquí, también tienes podemos comprobar esto. Una vez que haces clic, ahora estás revisando la sección de comentarios. Ahora, por aquí, tienes tu nombre Spotlight me demuestra que no soy nadie ajustando trabajando en este marco en particular. Y luego puedes compartir tus archivos directamente desde aquí, puedes compartirlos con la gente, puedes crear un enlace y compartir, y puedes dar los distintos controles respectivos a las personas con las que estás compartiendo el documento como los propietarios de este enlace pueden ver o pueden editar el proyecto. Dependiendo del tipo de control que les des, ellos podrán acceder y editar el proyecto directamente. ¿Todo bien? Tienes la opción de publicar la comunidad para que la gente pueda ver, puedes ver tu trabajo, y ellos te pueden dar comentarios también. Entonces este es el control. Se puede decir que cualquiera con este enlace puede ver o editar este proyecto en particular. ¿Bien? Entonces se trata de compartir. Puedes copiar el enlace y luego compartirlo con ellos, o puedes agregar la dirección de correo electrónico de la persona directamente. Por ejemplo, puedo decir que quiero agregar, y luego solo puedes seguir adelante e invitar, y esto ahora va a mandar en este mensaje para invitar a esta persona a trabajar en este borrador. Selecciona un proyecto en particular y di, queremos invitar a esta persona, y va a recibir la invitación, ha sido invitado a editar la primera clase en Figma, que es el proyecto en el que estamos trabajando en este momento Bien, entonces este es el mensaje que vas a recibir una vez que envíes la invitación. Entonces este es el mensaje, la clase que te invité a editar la primera clase de Figma, que es el proyecto que somos Entonces puedes abrir Figma y puedes seguir trabajando en el proyecto también, porque ahora estás dando el permiso Para comenzar a trabajar en el proyecto. Puedes ver que tienes el modo de desarrollo. Puedes habilitar esto, y siempre puedes pre-reproducir tu prototipo para ver los resultados directamente. Puedes hacer click sobre esto y podrás presentar y previsualizar tu prototipo directamente para ver el resultado de lo que estás creando. Vamos a ver esto en detalle también para entender qué significa o para qué puedes usarlo. Ahora, tenemos la función Zoom. Puedes hacer zoom a esto al 100%. Puedes acercar y alejar y puedes pixelar, y está en vista previa de píxeles en reglas, cuadrículas de diseño y así sucesivamente y múltiples también otras cosas, que vamos a cubrir y mostrar cómo usarlas de forma muy detallada a medida que navegamos por Y por último, tenemos estos tres puntos. Muy, muy importante. Tus pestañas cerradas recientemente aparecerán aquí. Puedes checar desde los tres puntos. Entonces, por último, tienes esta p s también en cualquier momento dado. Si quieres referirte al centro de ayuda o quieres ponerte en contacto con el soporte o quieres ver los videos o por ahí Entonces esto concluye esta clase sobre cómo crear un archivo en Figma, y luego la visión general de también la plataforma del archivo Espero que disfrutes este video. Gracias por mirar, y espero verte en mi próxima clase. 7. El panel Propiedades: Hola, y bienvenidos de nuevo. En la última clase, platicamos sobre cómo crear un archivo y algo de la visión general de la plataforma mientras se crean archivos. Hablamos de algunas de las pestañas básicas de aquí, cómo podemos usarlas para mejorar nuestra experiencia. Entonces en esta clase, vamos a mirar el panel de propiedades, que es lo que tenemos aquí. Por el momento, porque no tenemos nada en nuestro lienzo, así que el panel de propiedades, prácticamente no podemos hacer nada desde aquí. Excepto que puedes cambiar el fondo y cambiar el color de fondo, simplemente viniendo aquí y haciendo clic en esto, y podemos cambiarlo a cualquier color de nuestra elección. Para que puedas seguir adelante y cambiarlo a cualquier color de u. y si tienes una cuna, también puedes entera. Y luego aquí abajo tenemos la función de exportación, que vamos a cubrir también para seguir adelante con este tutorial. Pero por ahora, déjame hacer esto así tenemos un fondo llano. Una cosa que debes entender es que este panel de propiedades es una de las cosas más importantes que vamos a utilizar a lo largo de nuestra experiencia con Figma. Todo depende de qué propiedad, qué elemento se esté tratando con este panel de propiedades va a cambiar. Entonces, por ejemplo, tomemos por ejemplo, si vienes aquí a los turnos, y podemos simplemente hacer clic, y digamos que seleccionamos en esta elipse o círculo Si quieres dibujar un círculo, tienes que mantener presionada la tecla Mayús, y luego puedes dibujar un círculo igual que muy fácilmente. Y con solo dibujar el círculo, se puede ver que ahora se ha cambiado el panel de propiedades . Ahora, se han introducido muchas cosas en que se pueden cambiar las posiciones de este círculo desde el eje x eje x al eje y, y luego el ancho y la altura. Se pueden variar todas ellas. Incluso haciendo clic, se puede aumentar el número. Bien. Al hacer clic y arrastrar, puede aumentar o disminuir el número en consecuencia A pesar de que esto están conectados al ancho y alto están conectados están vinculados con esto, puedes vincularlos y puedes variarlos individualmente como tú para que puedas ver si los varías de manera diferente, la forma cambia en consecuencia. preferiré vinculados, y déjeme hacer esto en este momento. Entonces esta es una de las cosas. Puedes cambiar la posición, también puedes cambiar la posición de la capa, y puedes cambiar el campo, que es una de las cosas más importantes. Puedes hacer clic aquí y puedes agregar diferentes tipos de coloración a esta misma forma que acabas de agregar. Digamos que podemos pasar a algún lugar agradable y podemos seleccionar y simplemente darle un color muy bonito. Bien, digamos algo como esto, y podemos hacer click out. Bien. Entonces mientras seguimos seleccionando la forma, todavía tenemos otras características como ahí abajo, puedes agregar un trazo con solo hacer clic en esta posición. Y ya ves ahora tenemos un trazo agregado en su interior. Bien, puedes cambiar la posición del trazo. Podemos hacerlo centro, tú puedes hacerlo afuera. Entonces en este caso, hagámoslo afuera. Pero porque es un trazo muy pequeño. Por eso no lo ves visualmente. Puedes aumentar el tamaño también mientras vienes aquí, puedes aumentar y puedes ver ahora mismo que estás aumentando el tamaño. Creo que algo así está bastante bien. Y si quieres, también puedes cambiar el color del efecto del trazo. Pero solo haciendo clic en esto. Se puede hacer algo así como dependiendo. Se puede hacer algo así como algo así. Creo que esto es lindo. Así que solo puedes escapar para escapar de esto y vuelves a la misma propiedad spanel Tienes otras características con las que puedes lidiar y lidiar. Puedes tener los efectos. Puede hacer clic para agregar efectos. Puedes agregar sombra caída a esta misma forma. Puedes agregar sombra paralela, y puedes ver que puedes ver en sombra sombra caída capa golpe, o puedes en el golpe de fondo. En cada caso, se puede ver que la forma está cambiando en cuanto a sus propiedades. Entonces, digamos que tenemos una sombra paralela, y se puede ver visualmente que tenemos una pequeña sombra caída por aquí. Por lo que puede eliminar cualquiera de estas características con solo hacer clic en este signo negativo e introducir eliminarlo y puede habilitarlo o deshabilitarlo a esta función de ojo. Para que puedas habilitar y deshabilitar. Se puede ver la sombra caída, es bastante poco, pero es visible. Lo mismo por aquí, puedes activar o desactivar este trazo con solo este signo. Y aquí abajo, tienes más características. Digamos que habilito esto. Aquí abajo, tienes más características. Puedes exportar si te interesa y exportar, tienes diferente formato. Puedes por defecto este PNG, pero puedes exportar en P SVG y PDF. Esto es muy básico y puedes previsualizar, puedes consultar la vista previa de lo que acabas de crear. Se puede exportar. Esto es sin antecedentes, y puedes usarlo en otros documentos redactar informes o cualquier cosa con la que estés trabajando. Entonces esto es muy básico. Y este es un elemento de entre los muchos elementos que tenemos. Intentemos otro elemento. Por ejemplo, vamos al texto de aquí y simplemente haga clic. Puedes habilitar el texto simplemente haciendo clic en la pestaña T de aquí, el texto, o puedes usar la letra T en tu teclado para iniciar el comando de texto. Para que puedas hacer click en cualquier lugar, y digamos que escribimos algo como bienvenidos a mi canal, por ejemplo, Y ya puedes ver ahora mismo una vez que seleccionas, sí vienes a seleccionar todo. Dependiendo de los elementos de contador que tengas, el efecto de aquí cambia, las propiedades de aquí cambian. Entonces, al igual que este texto, puedes ver que también puedes lidiar con la posición. Se puede jugar con la posición izquierda o derecha en el eje x. Puedes jugar con él en el eje del camino, y también puedes jugar con la rotación, puedes girarlo a cualquier ángulo. El algo aquí, tienes la función de rotación, pero puedes ver en cualquier punto dado, puedes rotar. Déjame hacer esto. Y puedes revisar la capa, qué capa, puedes jugar con la capa, y puedes organizarla en consecuencia. Esta es la opacidad. Y luego aquí abajo, tienes otro texto, funciones básicas de edición de texto, como puedes cambiar el estilo del teléfono. Se pueden ver diferentes tipos de estilo de teléfono. Al pasar el cursor sobre, verás que el texto cambia en el estilo del teléfono, y puedes tener los tamaños de teléfono. Puedes tener el diferente tamaño. Si quieres, puedes por tu cuenta solo directamente, aumentar el tamaño directamente. Entonces es muy fácil. Entonces y luego aquí abajo, tienes las otras características, como puedes agregar la altura de línea y Esto es interlineado, altura de línea, y interlineado en lo que respecta al texto, si tienes texto múltiple, si tienes texto múltiple, puedes agregar la altura de línea entre ellos, y esta es la vertical, esto es el espaciado entre letras entre ellos. También puedes agregar. Y entonces este es el espaciado entre párrafos. Tal vez puedas hacerlo dos, el ancho del párrafo, puedes aumentar o disminuir en consecuencia. Y esta es la altura automática. Este es de tamaño fijo en todas partes. Puedes ajustar todo esto. Tienes controles virtuales. Puedes alinear izquierda derecha y centro. Puedes hacer todo tipo de alineación por aquí. Y tienes esta alineación superior inferior media. Puedes hacer todo eso desde aquí. Y una de las cosas clave a las que debes prestar atención es sentir el texto. Puedes cambiar eso desde aquí, puedes hacer clic y puedes agregar la sensación por aquí y puedes cambiar el color a cualquier color de nuestra elección. Stra algo así azul, y se le puede agregar trazo también, dependiendo, se puede añadir trazo y aumentar el ancho, de ello y se puede cambiar el color, tal como hemos explicado en el otro, ¿verdad? Entonces digamos que tenemos algo así como este color rojo, y podemos tenerlo así. Y entonces también tienes los efectos. Sombra caída, puede agregarle sombra caída. Y puedo ver que se puede ver la diferencia sin y con. Déjame hacer esto. Esto es sin, esto es con sombra paralela, y se puede ver que el texto se ve bastante bien. Entonces tienes un montón de controles por aquí. Otra cosa a la que debes prestar atención tienes otros controles por aquí. Al igual que puedes agregar un enlace a esto, puedes crear un enlace a partir de esto y puedes por tu cuenta, crear un componente a partir de esto. Hablaremos de todo esto en detalle mientras navegamos a través de este tutorial. Y una cosa que también debes tomar nota es que cualquiera que sea el elemento con el que estés tratando, aún puedes encontrar las propiedades habilitadas aquí. Puedes ver bienvenido a mi canal. Este es el texto que tenemos, y se pueden ver los labios. Esto discutirá todo el arreglo y dónde están aquí y cómo encargarse de los temas de posición. Esto concluye este tutorial sobre el panel de propiedades, qué es y cómo entender las características básicas. En cuanto a agregar algunos elementos y jugar con algunas de sus características. Espero que hayan disfrutado este video. Gracias por mirar, y espero verte en la próxima clase. 8. Capas de elementos en Figma: En la última clase, platicamos sobre los fundamentos del panel de propiedades dentro de Figma. Y en esta clase, vamos a hablar de lo básico de las capas. Así que cada vez que has creado un proyecto, lo largo de tu experiencia en Figma, vas a estar usando bastante estas capas características porque la mayoría de las cosas que vas a ser mayoría de los elementos que vas a estar arreglando, van a ser arregladas por aquí Entonces el arreglo por aquí es muy importante de entender. Entonces, lo primero que debes entender es que podemos crear duplicados de esto manteniendo la tecla de opción o la llave antigua en tus ventanas Simplemente puedes seleccionar la tecla de opción y luego hacer clic y podemos arrastrar y ya puedes ver ahora mismo tenemos un duplicado de esto. Entonces puedes ver ahora mismo tenemos LPS uno y LPS dos. Esto se debe a que ambos , son dos cosas distintas. Y otra cosa que debes saber es que la posición realmente varía en cuanto a la estratificación. Entonces cualquier objeto o cualquier elemento que tengas en la parte superior aquí se va a enfocar o se va a comportar en la parte superior de este LPS porque está encima de él, incluso en el ranking aquí en la estratificación Y se puede ver que este texto está por encima de todos ellos. Entonces si traigo esta lesta por ejemplo, selecciono esta y cambio el color a algo así como rojo Y si trato de llevar esto a esto, se puede ver ahora mismo que está encima. Esto se debe a que esta capa dos está encima de esta. Para que podamos hacer clic derecho y cambiarle el nombre si lo desea. Podemos cambiarle el nombre a esto. Bien, entonces llamémoslo el círculo naranja. Y luego cambiemos el nombre de éste al círculo verde, por ejemplo. Entonces digamos este círculo verde para facilitar la comprensión. Bien. Entonces podemos ver que este es el círculo naranja, este es el círculo verde. Y cuando intentas traer el texto también, puedes ver que el texto está por encima de todos ellos. Eso es porque su posición está realmente por encima de todo en este punto. Se puede tratar de ajustar. Puedes cambiarlos con solo arrastrar. Por ejemplo, cuando arrastras y sueltas tu naranja, puedes ver que va por debajo del texto, y puedes arrastrar el verde también a la parte superior, y puedes ver que se convierte en la parte superior. Entonces el arreglo es muy, muy fácil. Siempre puedes ajustarte si te interesa. Así que el texto siempre puede volver porque lo queremos en la parte superior. Se puede ver ahora mismo lo tenemos en la parte superior. Desde aquí se puede jugar con las cosas muy básicas, pero el arreglo es lo importante. Si entiendes cómo están dispuestas las capas, hará que tu trabajo sea muy, muy fácil. Así que tienes un buen número de cosas que tener en cuenta. Entonces todo lo que está arriba está arriba. Todo lo que está debajo está realmente por debajo eso cuando miras el proceso de estratificación, tienes otro montón de cosas que vamos a ver en este mismo panel Tienes el panel assets, y nosotros tenemos el panel page, cual puedes crear varias páginas como hemos dicho, vamos a ver todo esto en detalle a través del otro tutorial. Y puedes bloquear posiciones de elementos. Por ejemplo, puedes bloquear la posición de este texto con tan solo este clic. Entonces esto va a permanecer en esta posición, y puedes bloquearlo directamente con solo hacer clic y puedes usar esta función por solo hacer clic y puedes usar igual para habilitarla o desactivarla desde el panel desde el lienzo. Entonces, o se vuelve visible o invisible. Así que dependiendo de lo que estés trabajando, siempre podrás tener algunas de estas características y jugar con ellas. Bien, entonces esto concluye esta clase sobre los fundamentos de las capas, entendiendo la estratificación en términos de la disposición de los elementos en Figma. Espero que hayan disfrutado de este video. Gracias por verte y verte en la siguiente clase. 9. Cómo agregar y personalizar marcos: En la última clase, hablamos la estratificación de elementos dentro de Figma, y en esta clase, vamos a hablar de los fundamentos de los marcos, cómo agregar marcos. Ahora bien, ¿qué son los marcos? Los marcos son en realidad los elementos que sí agregamos propiedades que podemos tener que nos ayudan a separar los elementos y las propiedades dentro de diferentes tipos de páginas, ¿de acuerdo? Si construyes una aplicación de teléfono, las diferentes páginas que tienes en esa aplicación en particular están significadas por marcos Entonces el número de fotogramas que tenemos dependiendo. Entonces, si tienes diez páginas en una app en particular, eso significa que tienes diez marcos dispuestos con esa esperanza. Vamos a aprender a crearlos y a vincularlos a ellos y sus propiedades a medida que avanzamos. Por ahora para agregar un marco básico, puede venir hasta aquí y puede hacer clic en esta función de marco, o puede usar la letra F. Puede presionar la letra F en su teclado para habilitar la herramienta de marco. Así que solo puedes seleccionar en cualquier lugar y puedes arrastrar y puedes tener tu marco seleccionado o creado igual que. Entonces esta es la talla 469 por 3408. Solo podemos soltar, y ya puedes ver que ahora mismo tenemos esto como marco. Ahora bien, esto se está convirtiendo en un marco, puede ver automáticamente asegurarse de que todos estos elementos ahora están alojados debajo de él. Se puede colapsar esto y colapsarlo de nuevo, y todos estos elementos ahora están específicamente bajo esto. Entonces, en particular, los marcos también se pueden usar para categorizar nuestros elementos para que podamos saber exactamente qué parte de estos elementos pertenecen a este marco y qué parte de estos elementos pertenecen a estos marcos también Así que de nuevo, cuando alternativamente, si estás seguro con el tipo de tamaño que deseas, si no lo haces puedes ajustar el tamaño directamente del marco ya que acabas de drogar, hacer clic y arrastrar y moverlo a través, puedes ajustarlo a cualquier tamaño. O si conoces la talla, específicamente, puedes venir aquí y puedes cambiar el tamaño en consecuencia. Se puede ver que podemos aumentar el tamaño o disminuir la altura en términos de altura, así como en la posición en x e y, se puede jugar con la posición. Y en cualquier punto dado, puedes hacer clic y moverlo. Pero si estás configurando con el tipo de tamaño que quieres crear, puedes tenerlo fácilmente, así por ejemplo, si estás intentando crear con la tecla F, y habilitas la creación de marcos, puedes ver las plantillas que te está dando la Figma Así que tenemos un montón de tamaños preestablecidos para tal vez teléfono si estás tratando de teléfono, tal vez si estás tratando de desarrollar una app para teléfono, Puedes ver los diferentes tamaños para iPhone 14 y 15 Pmax. Los puedes ver. Este es el tamaño. Este es el tamaño estándar para 15. Este es el tamaño estándar para iPhone SE, y teléfono h, se puede ver que este es el tamaño estándar. Para Android, pequeño, este es el tamaño, Android grande, este es el tamaño. Así que solo puedes seguir adelante y seleccionar a cualquiera. Si también estás tratando de tableta, estos son tamaños preestablecidos que puedes seleccionar fácilmente dependiendo de lo que estés tratando de crear si no sabes el tamaño específico. Si estás tratando con escritorio, puedes ver diferentes tamaños están usando MT book o TV o escritorio o por ahí o Map book pro 14 o por ahí Así que solo puedes seleccionar re crear presentación, puedes ver los diferentes tamaños. Estás usando 16 por nueve cuatro por tres, Oh, puedes ver si también estás usando relojes, es un Apple Watch. Y si quieres crear tamaños para papel, puedes ver la mayoría de ellos A A cinco A seis y tamaño carta y diferentes redes sociales. Puede seleccionar y puede tener el papel seleccionado y puede tener los tamaños precisos adjuntos. Entonces para este caso, vayamos con algo sencillo. Seleccionemos pon 14 plus, da click en él, y podrás ver por defecto la Figma nos acaba de dar esta talla como nuestra talla pon 14 Bien. Así que puedes por tu cuenta, mantén presionado el comando la tecla de comando y usa la rueda de desplazamiento en tu mouse para hacer una especie de paneo alrededor para alejar así puedes tener más detalles por aquí con el comando manteniendo pulsada la tecla de comando y desplazándote hacia abajo, podrás reducir el tamaño, al igual que o aumentarlo si te desplazas hacia arriba, desplazarte hacia abajo, puedes usar esta tecla de comando pan para con la letra H e inmueva estos dos tamaños por el lado. Otra cosa que puedes notar es que en marcos, por lo que siempre puedes escapar para volver a la herramienta de selección. Entonces seleccionas cualquier marco. Puede duplicarlo simplemente usando el comando D para duplicar un fotograma en particular. O alternativamente, puede mantener pulsada la tecla de opción en la marca o las ventanas de la tecla t, y puede seleccionar y arrastrar y puede crear la misma copia de este fotograma en particular. Entonces es muy fácil hacerlo. Además, puedes copiar y pegar este mismo marco en alguna parte. Ahora, mantengamos presionada la tecla de comando y separemos esto un poco para que podamos ver todo dentro. Entonces otra cosa que quiero mostrarte es que puedes copiar propiedades. Puede alinear esto en consecuencia. Si los tienes alineados, puedes alinearlos directamente con solo seleccionarlos directamente todos por aquí, y puedes ver aquí abajo, tienes este ícono, que te permite alinearlos verticalmente. Al hacer clic, los verás, están igualmente alineados en consecuencia. Tienes la misma alineación verticalmente. Y si quieres que lo hagan si los tienes separados, por ejemplo, está alineado, y quieres que estén alineados verticalmente. Se pueden seleccionar todos ellos. Ampliamente, mantengamos presionada la tecla Mayús. Y podemos comandar key y desplazarnos hacia abajo, podemos seleccionar todo, por ejemplo, y luego podemos alinear esto. Esto va a asegurar que estén alineados verticalmente. Y si quieres alinearlos horizontalmente, esto es alinear horizontal. Si quieres alinearlos verticalmente para estar en el mismo tamaño en el mismo nivel, puedes simplemente venir por aquí y puedes ver alinear centros verticales. Así que solo puedes con un solo clic, puedes ver que están igualmente alineados y están alineados en el centro vertical. Entonces esto es básicamente cómo lidiar con elementos con marcos y tratar jugamos con ellos. Ahora bien, otra cosa es que hay que entender que los elementos que tenemos en un marco en particular son fáciles, puedes copiarlos fácilmente y ponerlos en diferentes marcos. Bien. Entonces, por ejemplo, si tenemos este marco, si seleccionas este marco y seleccionamos este texto y simplemente damos clic y solo podemos poner en este. Vamos a escribir algo. Bienvenida. Y tenemos esta bienvenida. Lo que esto significa es que si seleccionas este texto y mantienes pulsada la tecla de comando y mantienes pulsada la tecla de opción, te va a mostrar exactamente la distribución. El tamaño es desde la izquierda, desde la parte superior, desde los lados, la disposición desde los lados y desde el lado derecho y desde abajo. Este es el arreglo. Entonces, si quieres copiar esta bienvenida, copias con Comando o Control C en tu teclado, llegas al segundo fotograma. Puedes hacer el comando V para pegarlo y puedes ver que cuando mantienes pulsada la tecla de opción, vas a ver que se ha pegado en la posición exacta donde la copiaste de la otra propiedad, desde el otro fotograma directamente Y lo mismo aquí, puedes superarlo y va a mantener la misma posición en consecuencia a medida que sigas adelante. Otra cosa que podemos aprender en cuanto al marco es que cuando mires esto, notarás que cada uno de los marcos de iPhone que tenemos, este es iPhone 14 plus, Teléfono 14 más uno, dos, tres, están dispuestos en consecuencia. Puedes cambiarles el nombre como te hemos explicado anteriormente. Simplemente puedes hacer doble clic y podrás renombrarlos para que veas la pantalla uno, por ejemplo, y luego podrás hacerla. No, esta es la pantalla tres. Por ejemplo, digamos la pantalla tres, y esta es la pantalla una pantalla dos, y esta es la pantalla uno. C solo haz doble clic y llama a esta pantalla una. Entonces puedes ver que la bienvenida es ahora un subconjunto de la pantalla tres porque este es un ítem bajo este fotograma tres. Este es un artículo bajo el marco dos. Este es un artículo bajo marco. De uno, en uno. Y entonces tienes esto, déjame usar la letra H, y puedes ver en este pequeño marco uno, puedes ver que todos estos están alojados debajo de este marco. Y en cada caso, puedes contraer las propiedades, los elementos, que puedas ver para mayor claridad y facilidad de acceso a otras propiedades. Ahora, en cada fotograma que hayas creado, puedes ver que tienes esta opción, una vez que seleccionas en tu seleccionas ese fotograma, puedes ver estas propiedades. Estas son las propiedades de marco que acabas de crear. Y se puede jugar con el tamaño también en términos de la posición, el ancho y la altura. Puedes jugar con algunas de estas propiedades, y puedes invertirla desde horizontal y hacerla desde vertical y hacerla horizontal o a bordo. Y se puede jugar alrededor con el radio de la esquina. Puedes usar esto bastante. Entonces porque cuando juegas por ahí, puedes ver que puedes aumentar el radio de la esquina. Y ahora todo se convierte en el radio ahora ya no es más empinado como lo has hecho antes. Para que puedas tener tanto propiedades. El ángulo de rotación, tal y como hemos explicado anteriormente, tienes las propiedades para jugar con la irrotación así como la sensación, puedes cambiar el color de la sensación solo hacer clic en esto y puedes seleccionar el color y variarlo en consecuencia. Bien. Entonces cubrimos todos estos elementos básicos, cómo agregar elementos y tratarlos dentro de marcos en detalles. Pero ahora mismo tienes la opción de campo. Tienes la opción de trazo tal como te explicamos anteriormente. Tienes la opción de secc. Además, si quieres agregar sombra paralela ahí sobre, puedes ver bastante. Así que también tenemos estas otras características. Tenemos la marca como lista para el desarrollo y los usuarios enmascaran y grandes componentes fuera de esto. Esto concluye esta clase sobre cómo agregar marcos y personalizarlos en consecuencia dentro de nuestro lienzo. Espero que disfrutes este video. Gracias por mirar, y espero verte en la próxima clase. Por 10. Cómo agregar cuadrículas y guías: Bien, entonces en la última clase, hablamos sobre cómo agregar y personalizar marcos dentro de Figma. Y en esta clase, vamos a hablar de cómo agregar cuadrículas y guías en nuestros marcos Entonces, las cuadrículas y guías son realmente muy importantes para mantenernos organizados y asegurarnos de que trabajamos con precisión durante todo el proceso de agregar elementos y eliminarlos dentro de nuestros marcos Así que podemos conocer exactamente los tamaños en todos los sitios, y así sucesivamente a medida que avanzamos con nuestra creación de marcos. Entonces, lo primero es que podemos agregar cuadrículas simplemente seleccionando en un marco en particular, y puedes venir al panel de propiedades de aquí, y puedes ver la cuadrícula de diseño por aquí Así que simplemente puedes hacer clic en este signo de trazado para agregar una cuadrícula, y por defecto, esta es la cuadrícula que se está agregando. Ahora, tengo una cuadrícula en esto, y se puede ver claramente el diseño de cuadrícula visible. Puedes ocultarlo si quieres. Puedes ocultarlo o mostrarlo directamente como hemos explicado este corte a través de cualquier elemento. Si quieres tener más propiedades de esta grilla en particular o jugar más con ella, puedes dar click sobre estos puntos, este Seton Simplemente puedes hacer clic. Simplemente puedes hacer clic, y puedes ver que con este desplegable, tienes múltiples tipos de cuadrícula. Esta es la rejilla normal. Si desea tener cuadrícula de columnas, puede hacer clic y tiene esta cuadrícula de columnas. Puedes hacerlo 20, si quieres el número. Dependiendo, si lo haces 20, puedes ver que tenemos el número 20, y puedes jugar con la coloración puede cambiar el color a cualquier color que elijas. Ahora mismo, puedes ver que tenemos este color, y puedes golpear y escapar. Y tienes otras propiedades como la opacidad. Por el momento son diez, se puede hacer que sea a lo mejor dos. Así que pavimenta para que tus elementos sean visibles. puede ver ahora mismo que son dos, pero sus elementos son muy visibles. Si no quieres puedes aumentarlo a tal vez cuatro, aumentar la visibilidad, para que puedas verla ahora mismo. Los elementos son visibles, pero también las cuadrículas también son visibles Entonces tienes aquí abajo el tipo de grilla. Esta es la cuadrícula de columnas. Puedes hacer click a la otra mitad tener cuadrícula izquierda, y puedes tener la cuadrícula derecha o cuadrícula centrada dependiendo si estás interesado en obtener más espaciado desde la derecha o desde la izquierda, dependiendo de ello todo depende de ti y puedes venir aquí y decir estirado, desplazado a través. Entonces todo depende. Se puede jugar con ellos. Entonces ahora mismo, digamos que queremos la grilla izquierda, y se puede jugar con el con a través de la separación. Se puede tener que ser tal vez cinco el con ahora se vuelve más pequeño. Un menos grueso. Y si quieres, puedes hacerlo tal vez siete para aumentar el grosor. Y el desplazamiento también ahora se establece en cero, puedes venir aquí y aumentar el desplazamiento. Si lo haces seis, ve que el offset se ha incrementado. ¿Bien? Entonces dependiendo de lo que quieras al borde. Si quieres un desplazamiento más grande en el borde, puedes hacer esto probablemente 15. Bien, para que veas ahora tenemos un malestar más grande en los bordes. Ahora, aquí abajo, tienes el número gotta. Se puede aumentar. A lo mejor si lo hacemos cinco, puedes ver ahora mismo puedes aumentar o disminuir el número. Digamos que hacemos que este 30 se ajuste, para que puedas ver el gotta ya que ahora puedes aumentarlo ahí. Ahora, puede agregar otro diseño de cuadrícula. Si te interesa, siempre puedes escapar de esto, y puedes agregar otra grilla viniendo a ella en este signo más, y puedes cambiar. Ahora, puedes agregar la gutta. Si lo quieres, puedes convertirlo en uno, y podrás ver que ahora es mucho más grande. Cuando acerques el zoom, ahora podrás ver lo que tienes la separación, el gotta, pero luego puedes tener este 20. Yo creo, y ahora creo que esto es bueno. Ahora puedes agregar otra grilla simplemente viniendo por aquí. Puedes escapar de esto, y puedes agregar otra grilla viniendo en esto y golpeando en el lado positivo. Entonces puedes agregar otros, para que puedas venir aquí también y jugar con las propiedades. Dependiendo, esta es la cuadrícula de columnas. Puedes convertirlo en cuadrícula de filas, y también puedes jugar con las características. Se pueden cambiar las diferentes porciones. Esto es útil en los casos en los que estás tratando así que hagamos esto probablemente 15. Oh, 12. Entonces esto es útil a veces cuando estás lidiando con lo del teléfono y quieres organizar tus elementos en consecuencia. Entonces, si tienes este tamaño uniforme, se vuelve muy fácil para ti organizar tus elementos muy bien. Y luego puedes seguir adelante y pelar con ellos. Las otras características como las que hemos explicado, y también puedes habilitar o deshabilitar cualquiera de la grilla directamente con esto. Y puedes quitar cualquier grilla por los que golpeen el signo negativo. Pues si te interesa, solo puedes quitar la grilla. Ahora, otra característica clave que quiero compartir contigo que puede ayudarte a mantenerte preciso y a mantener el espaciado dentro de tu marco son las guías. Las guías se pueden adjuntar usando las reglas, bien desde las reglas Entonces puedes doblar entre para mostrar las reglas y mostrarlas a través de cualquier tipo de lienzo Sigma simplemente usando el atajo el shift F shift r para habilitar las reglas a los lados y en la parte superior por aquí y cambiar r nuevamente a Así puedes duplicar la regla con shift r y puedes doblarla encendida o apagada. Entonces la guía que puedes tener aquí para ayudarte en la precisión es que puedes llegar a los bordes y hasta que tu posavasos se convierta en este letrero horizontal. Cuando haces clic y arrastras, puedes ver que tienes una línea que puedes mover dentro del lienzo para definir tal vez el punto de partida de un elemento. Si quieres saber el tamaño de dónde estás, el momento, puedes mantener pulsada la tecla de opción en tu teclado, y puedes mantener la tecla t en tus ventanas y podrás ver el número de la pieza desde la izquierda. Y lo mismo también, se puede bajar. Haz clic de nuevo y puedes poner otra a la derecha, si te interesa así solo por facilidad de claridad, aún puedes mantener pulsada la tecla de opción para definir la longitud en el otro borde. Puedes hacer lo mismo también en la parte superior para tener una guía horizontal con solo hacer clic por aquí, y puedes simplemente arrastrar y la tendrás. Digamos que sostenemos esto también para definir la posición exacta. Puedes traer tantos como quieras, dependiendo de lo que quieras crear. Puede traer diferentes y definir un tamaño particular que desee agregar en elementos durante el proceso el proceso de adición. Entonces, para quitar cualquier lata de guía en un marco, puedes simplemente repasarla, seleccionarla, hacer clic y mantenerla, y luego puedes tirar de ella hacia atrás y has quitado esa guía. Para que veas, solo tienes que eliminar esto simplemente dando clic y arrastrándolos hacia atrás muy fácilmente Se puede ver simplemente eliminar todos ellos. Entonces esto es lo básico de cómo agregar cuadrículas y guías que nos ayuden en la adquisición dentro de nuestros fms Entonces esto concluye esta clase sobre agregar cuadrículas y guías en nuestro marco dentro de Sigma Espero que disfrutes este video. Gracias por mirar, y espero verte en la próxima clase. Adiós. 11. Cómo agregar y personalizar formas: En la última clase, platicamos sobre cómo agregar cuadrículas y guías a nuestro lienzo Y en esta clase, vamos a aprender a agregar ovejas, diferentes tipos de ovejas y personalizarlas Ahora, comencemos por despejar esto. Entonces usemos nuestra herramienta de pan con la letra H para limpiar nuestro lienzo, y luego podemos comenzar a traer diferentes sheps Ahora, para insertar formas, puedes dejarlo en la tapa para volver a la herramienta de selección. Para insertar formas, puedes llegar hasta la cima aquí. Puedes ver que puedes hacer click en este desertor y tienes series de diferentes formas Puedes comenzar desde rectángulo, que puedes activar con la letra r, y tienes línea con la letra L. Tienes flecha con la letra mayúscula L, y así sucesivamente. Bien, tienes labios y polígono y estrella, y puedes colocar imágenes y videos también en el mismo lienzo si te interesa Entonces comencemos con la importación algo sencillo como un rectángulo. Y una vez que hacemos clic en el dcgle puedes dibujarlo directamente simplemente arrastrando así Entonces puedes notar que estoy dibujando un rectángulo, pero cuando mantenga presionada la tecla Mayús, va a convertirla en un cuadrado. Va a hacer que sea un cuadrado con tanto el largo como el ancho y la altura iguales. Entonces, si quieres crear un cuadrado, es mejor que mantengas presionada la tecla Mayús durante la ecuación. Para que puedan ver ahora mismo, tengo una plaza. Pero si quiero dibujar un rectángulo, puedo levantar la mano de la tecla mayúsculas, y se puede ver ahora mismo que puedo ir a cualquier longitud de mi elección. Pero digamos que voy a ir con un cuadrado de esta longitud, ya que se puede ver ahora acabo de dibujar mi cuadrado. Y agreguemos otro. Digamos que puedo dibujar un polígono así. Puedo dibujar fácilmente. También puedes dibujar otra forma. Digamos que vamos con la elipse. Y si dibujas también, vas a ir con elipse así Y si quieres un círculo perfecto, puedes mantener presionada la llave del eje. Por lo que se convierte en un círculo perfecto muy fácilmente. Ahora bien, así es como insertar diferentes formas o dibujar cualquier forma en el lienzo. Ahora, cada vez que seleccionas en alguna de las formas de los elementos que acabas de importar o insertar, puedes ver que las propiedades aparecen aquí. Por ejemplo, la posición x, puedes venir aquí y puedes jugar con la posición en la X. Y en la dirección y, puedes variarlos directamente así. Y puedes alterar la anchura y altura si quieres alterar la anchura y la altura, aunque estén interconectadas, por lo que aumentan o disminuyen de la misma manera. Si quieres que aumenten o disminuyan de diferentes maneras, entonces tienes que quitar este enlace. Entonces en ese caso, puedes aumentar el ancho, Bien, puedes ver que ahora puede aumentar o disminuir el ancho por sí solo sin afectar la altura. Lo puedes ver ahora mismo o puedes aumentar la altura sin afectar el ancho. Pero siempre prefiero que esté ligado para que podamos tener un incremento o disminución uniforme Entonces déjame hacer esto para tener un cuadrado perfecto. Entonces otra cosa, mientras sigues seleccionando la forma, tienes la opción de rotarla, puedes rotarla a cualquier ángulo de tu elección si te interesa. ¿Correcto? Déjame hacer esto también, y luego podrás jugar con el radio de la esquina. Ahora mismo, es puntiagudo. Si desea reducir o aumentar o traer alguna naturaleza curva al radio de la esquina. Puedes ver ahora mismo que has agregado algo de naturaleza curva a la esquina. Alternativamente, si quieres agregar la misma curva de rumbo al radio de esquina, si seleccionas el barco, puedes ver estos puntos. Si selecciona en cualquiera de ellos, seleccione, haga clic y arrastre, y también puede agregar manualmente el radio de la esquina. En consecuencia, se puede aumentar o disminuir. Esta es otra forma de sumar el radio de la esquina. Bien, entonces esto es esto. Aquí abajo, tienes la opción de campo. Puede agregar diferentes tipos de coloración de campo a esto. Puede hacer clic y puede seleccionar en cualquier color de su elección. Eres libre de navegar y elegir un color muy bonito para ti. Este es un color sólido. Si quieres un color degradado, siempre puedes dar click sobre este, y ahora puedes ver que tienes una coloración degradada. Al hacer clic en esto, puedes agregar en el degradado desde este lado. Puede utilizar esta función para controlar la ubicación del degradado. Bien, para que puedas aumentar o disminuir la ubicación del gradiente, así podrás ver. Y por aquí, también se puede cambiar el color de esto. Si tienes otro color, si quieres otro color, también puedes elegir y puedes ver que cambia en consecuencia. Entonces aquí abajo, puedes agregar trazo, puedes golpear en este lado de la trama. Para agregar trazo a esto, puedes ver si se agrega un trazo puede hacerlo dentro o fuera o en el centro. Ahora mismo, vamos a hacerlo dentro del grosor del trazo. este momento es uno, menos accidentado a algo así como 30, y se puede ver la mitad de su a los 30, y se puede hacer clic en esto para cambiar la coloración del trazo Por ejemplo, vamos con algo así como el blanco, una especie como el color blanco. Para que veas, Ahora mismo tenemos nuestro trazo como blanco. Y en cada caso, en cada una de estas propiedades, puedes habilitarlas o desactivarlas desde aquí, la coloración y el trazo. Puedes habilitarlos o deshabilitarlos usando esto, y puedes eliminarlos también usando los pecados menos, como ya hemos explicado anteriormente. Entonces tienes otros efectos. Puede hacer clic para agregar el efecto de sombra paralela. Puedes agregar sombra paralela, puedes agregar sombra interior, puedes agregar golpe de capa o golpe de bolsa. Puedes agregar cualquiera de ellos. Pero por ahora, vamos con sombra paralela. ¿Todo bien? Y luego puedes exportar o si te interesa, que vamos a cubrir en una clase posterior. Ahora, hemos sumado tanto a esta propiedad a esta forma. Si quieres agregar la misma cosa o propiedad similar a esta, hay una manera más fácil de hacerlo dentro de Figma. Lo primero es que puedes llegar a la cima. Al seleccionar esa forma, puede llegar a la cima y puede seleccionar aquí. Puedes venir a editar y puedes venir hasta abajo y venir a copiar propiedades por aquí, y puedes seleccionar sobre esto y puedes regresar y luego venir a editar e ir a propiedades de plagas. Por aquí. Lo puedes hacer con el comando de opción C, puedes pegar las propiedades directamente, puedes ver el comando de opción V o comando de opción C para copiar un comando de opción V para pegar. Y ahora mismo puedes ver que has agregado has copiado estas propiedades a esta propiedad sin tener que cambiar el color de esta y luego agregar algunas de las características que has agregado En cada caso en cada forma, cuando haces doble clic en la savia, tienes acceso. Significa que tienes acceso a la forma. Se puede hacer bastante. Por ejemplo, puedes cambiar la forma de esto simplemente viniendo a los sitios. Puedes hacer click en esto y puedes extenderlo directamente así. puedes venir aquí, y puedes hacer clic y extender esto y convertirlo en otra forma si te interesa. Puedes ver, solo puedes variarlo haciendo clic, estás extendiendo o cambiando la forma. Y si lo deseas, puedes seleccionar agregar otro, solo puedes seleccionar y puedes jugar con él. Entonces déjame hacer esto, pero solo para mostrarte que esto te está dando mucho control en lo que se refiere a lo que hay aquí. Si quieres cambiar el color del fiel, puedes ver si quieres así puedes cambiar el color del campo, puedes seleccionar, y luego puedes cambiarlo a algo como rojo. Entonces creo que esto está bien. Y puedes hacer click hacia fuera. Y si quieres cambiar el color del trazo, también, puedes hacer click y luego puedes cambiar el color del trazo, tal vez a algo así como azul este azul. Y puedes ver ahora mismo una vez que escuches una fuga, puedes tener este color. Entonces dependiendo de lo que quieras cambiar. Pero entonces si haces doble clic en alguna de las vainas, podrás tener acceso a esa hoja, y podrás jugar con ella muy fácilmente Entonces creo que básicamente esto concluye esta clase sobre cómo agregar vainas y jugar con sus propiedades y personalizarlas en consecuencia. Entonces, espero que hayan disfrutado este video. Gracias por mirar, y espero verte en la próxima clase, ¿verdad? 12. Las herramientas para pluma y lápiz: En esta clase, vamos a aprender a usar la herramienta pluma y lápiz dentro de Figma. Ahora, para empezar, puedes llegar a la cima por aquí, los iconos superiores por aquí, y puedes ver pluma y lápiz. Al hacer clic en este menú desplegable, podrás ver lápiz y lápiz, que puedes activar con el comando con la letra P en tu teclado o el Mayús P para habilitar la herramienta lápiz. Entonces, cualquiera que sea que sea el que vaya a trabajar, puede activarlo fácilmente con las teclas de método abreviado Ahora, comencemos con el bolígrafo simplemente haciendo clic en la letra P, o simplemente podemos hacer clic en P, y te gusta la herramienta pluma de aquí. Para que puedas seguir adelante y escribir y crear cualquier cosa de tu elección. Simplemente puedes seguir adelante. Y como notas, si te mueves libremente, eres libre puedes moverte a cualquier ángulo de tu elección. Pero cuando mantienes pulsada la tecla Mayús, va a chasquear a tal vez 45, 90 grados, 45, 90 grados así. Hace que el encaje sea muy fácil dentro de estas características. Digamos que vamos a tener algo así como 45 grados, hago click aquí, y luego seguimos manteniendo el mismo turno, puedes ver automáticamente me dice que estoy en un punto donde estos dos son iguales, así puedes hacer un click también, y luego probablemente podamos movernos por aquí, y hasta que llegues a este punto, ahora te está demostrando que estás en el mismo punto y ubicación. Simplemente puede hacer clic en esto y luego finalmente puede cerrar si lo desea. Podemos mudarnos aquí. Y hacer otro click y luego finalmente a este punto. Pero quiero que cubra aquí y son sólo 45 grados. Yo quería cubrir entonces. Puede que tenga que liberar el turno, entonces solo puedo hacer clic y cubrir esto. Entonces ahora esto se vuelve perfecto, según lo que yo quiera. Siempre puedo presionar la tecla de comando para salir de esto. Y ahora tengo esta forma dibujada con mi propio pin. Cuando seleccionas una forma en particular que hayas dibujado, verás igualmente sus propiedades por aquí. Por defecto, agrega un trazo a esto. Y se puede ver el trazo. Cuando vienes por aquí, haces clic y extiendes y puedes ver que el trazo existe. Se puede ver que existe. Y si quieres cambiar el color, igualmente puedes cambiar el color tal como lo hicimos en la otra clase, puedes cambiarlo así. Ahora, otra cosa que puedes hacer con la forma que acabas crear es que siempre puedes hacer doble clic dentro. Siempre puedes hacer doble clic dentro para estar dentro de la forma, y puedes hacer algunas ediciones. Por ejemplo, es posible que desee agregar algunos puntos para la edición. O tal vez desee cambiar la forma de esto. Simplemente puedes hacer clic y puedes cambiar la forma. Solo podemos hacer clic. Así como así, puedes ver que puedes hacer cambios en la forma. Puedes extenderlo y cambiarlo a como quieras. Simplemente puedes jugar con esto muy fácilmente. Y si quieres colorear algunas secciones de esto, por ejemplo, quieres poner algo de sensación dentro de esto. Entonces, mientras aún estás en el modo de edición, puedes venir aquí y hacer clic en este bolsillo para bolígrafo. Y una vez que hagas clic en él, puedes colorear las secciones en consecuencia. Ahora puedes colorear esta sección simplemente golpeando esto y por defecto, elimina el color predeterminado dentro. Y puedes venir por aquí, solo haz clic y ya puedes cambiar la coloración. Puedes cambiarlo tal vez a este rojo y un escape. Y una vez que hayas terminado con esto, puedes seguir adelante y decir hecho, y ahora tienes una forma que has creado con tu bolígrafo y tiene tanto detalle. Ahora bien, si quieres usar la herramienta lápiz, aún puedes usar el Shift P. Shift una letra P para activarlo, y puedes venir aquí y escribir lo que quieras. ¿Bien? Entonces puedes venir y puedes ver por defecto la figma te ayudará a estirar lo que tengas Se puede ver ahora mismo y tan solo tecleando algo. Bien, así puedes seguir adelante y simplemente escribir lo que quieras escribir aquí. Para que puedas ver lo que has escrito en esta capa bien en detalle sobre cómo organizar todas estas capas, que puedas entender lo que significa todo esto. Pero por ahora, puedes usar esto y puedes ser capaz de crear esto. Puedes escribir como así lo desees dentro de este barco o en cualquier lugar. Y una vez que hayas terminado, siempre puedes escapar para salir de eso, y puedes ver que puedes seleccionar en cualquiera de estas características que hayas escrito. Y puedes hacer ediciones también si te interesa. Pero por el momento, no quiero ninguna de ellas, así que puedo seleccionarlas todas y eliminarlas si quiero eliminarlas. Pero esto es lo básico sobre cómo usar la herramienta pluma y la herramienta lápiz dentro de tu lienzo para escribir cualquier cosa o dibujar cualquier cosa de tu elección. Espero que disfrutes este video. Gracias por mirar, y espero verte en la próxima clase. 13. Operaciones booleanas + señalización: Entonces, bienvenido de nuevo. En esta clase, vamos a aprender algunos conceptos básicos de las operaciones booleanas ¿Bien? Así que en las operaciones booleanas, vamos a aprender a combinar una forma con otra, y vamos a aprender probablemente a veces cómo separar una forma de Entonces vamos a partir de una nueva eliminé todo, así que solo voy a traer dos formas con las que podamos demostrar esto. Digamos que llegamos a la opción shapes, sept shape feature por aquí y vamos a seleccionar algo así como y dibujar algo así como un rectángulo. Y si queremos tener ese mismo borde circular alrededor de él borde, todavía podemos venir por aquí y dli y arrastrar y tenemos una forma circular así como esta Vamos a decidir cambiar el color del campo a algo así como algo así es bueno. Intentemos agregar otra forma. Vamos a agregar esto. Dibujamos el círculo como hemos mostrado anteriormente, puedes mantener pulsada la llave del eje. Y puedes dibujar un círculo perfecto así, ¿verdad? Así que vamos a cambiar el campo de esto también a algo así como algo así, simplemente puede hacer click hacia fuera. Ahora bien, en las operaciones booleanas, por lo general, hay que combinar dos cosas juntas Entonces, cuando seleccionamos droga y seleccionamos estas dos formas, notarás que este icono acaba de aparecer. Se llama grupos booleanos. Este, aprenderás a agrupar estos elementos en diferentes formas. Entonces, al hacer clic en este menú desplegable, verá que puede tener selección de unión, tendrá selección de restar, intersectar selección y excluir selección. Y luego tenemos aplanar la selección ¿Bien? Entonces vamos a aprender todo esto al final de esta clase. Ahora, comencemos con el inicial. Seleccionemos nuestro círculo y solo arrástralo a éste. Bien. Así que simplemente vamos a insertar esto en esto. Ahora, cuando los seleccionas todos seleccionándolos todos así, y puedes llegar a los grupos de lingotes, puedes hacer selección de unión, que combina esta característica y esta característica juntas, ¿verdad Esto y esto ahora se combina. Ahora, en cualquier caso, si quieres tener acceso a cada una de ellas, puedes hacer doble clic en la forma, y puedes ver ahora mismo que tienes dos formas, pero se combinan usando los grupos booleanos Y eres libre de moverlos y cambiar e intercambiar su posición si esto es lo que quieres. Entonces esto se combina, un lingote. Así que solo combinas las dos formas juntas. Ahora, puedes hacer esto. Digamos que hacemos esto hasta este punto y luego vamos a arrastrar acero y moverlos a través, y luego podemos seleccionar. Y ahora queremos hacer restar selección. Entonces sí restamos selección. Lo que esto hace es simplemente restar esta porción que la sección combinada a, restaré de esta porción de ésta ¿Correcto? Entonces, ¿cómo lo confirmamos? Podemos hacer doble clic aquí, y se puede ver que ese círculo sigue ahí, ¿verdad? Sigue ahí, pero se ha restado, y puedes cambiar la resta o el arreglo o el comportamiento entre los dos simplemente moviéndote Pero ahora mismo, el valor por defecto es que se ha restado y puedes extender o jugar con esta característica, como quieras Pero ahora es una sola cosa que se ha restado. Esa forma se había restado de esto. Ahora, otra cosa que podemos confirmar es, así que hagamos esto también. Desde que hemos visto sustracción. Volvamos todavía mientras seleccionamos ambos, podemos volver a la operación Boulan, podemos decir intersectar Ahora seleccionamos, lo que esto nos da es el punto de intersección entre la selección. Entonces, este es el punto de intersección entre los dos. Entonces hagámoslo para que entiendas lo que estoy tratando de decir. Bien, entonces esta es solo la intersección que nos ha dado entre estos dos. Justo esta intersección es lo que nos ha dado. Entonces obtienes el mensaje. Esa es la selección de intersección. Podemos seleccionar de nuevo, y podemos hacer la última, que es excluir selección. Y lo que esto va a hacer, el punto de intersección entre estas dos formas es lo que se va a excluir. Entonces probemos eso. Y se puede ver que ahora se ha excluido el punto de intersección . También puedes moverte por ahí. Y cuando haces doble clic, puedes moverte también para cambiar la intersección. Pero lo que te está diciendo es que en un momento dado, estas dos formas se cruzan es esa sección que se va a quitar para ti Eres libre de jugar con esto, quieras dependiendo de lo que intentes crear. Ahora, la última característica, que es la selección de aplanamiento, cualquiera que sea la operación booleana que hayas seleccionado aquí y tienes la resolución, si haces selección de aplanamiento, ahora va a convertir esto Entonces ahora solo tienes una sola forma que se comporta con la operación booleana que acabas Básicamente, esto es lo básico sobre cómo usar el jugador de operaciones booleanas con barcos y agregar cosas diferentes, Así que puedes seguir adelante y probarlos como quieras, dependiendo de lo que estés tratando de crear y dependiendo de tu objetivo, solo puedes hacer suma de resta o intersección o por ahí Y luego al final de todo, puedes convertir todo en un solo barco. Ahora, antes de que terminemos esta clase, quiero darte una tarea sencilla que puedes probar por tu cuenta, solo para demostrar el uso de la Figma para crear las operaciones bulon Quiero que crees esto. Déjame dejarme en la letra H para dar vueltas. Entonces esta nave. Quiero que creen esta nave con la operación booleana Esto es solo un triángulo y estos son círculos encima de él, y usamos las operaciones booleanas para crearlo Así que por favor intenta crear algo como esto para que podamos ver si no tienes si no tienes la oportunidad de hacerlo, vamos a resolverlo en la siguiente clase. Pero solo para tener en tus manos el sistema e intentar hacer lo que estamos haciendo y tratar de aprender lo básico, quiero que pruebes esto, pero lo resolveremos en la siguiente clase de todos modos. ¿Bien? Entonces espero que disfrutes este video. Gracias por mirar, y espero verte en la próxima clase. Adiós. 14. Solución al Assignment: Entonces en la última clase, damos una tarea simple sobre qué tal si intentas crear algo como esta forma simple con las operaciones booleanas Entonces en esta clase, vamos a simplemente reproducirla para ver cómo podemos hacerlo rápidamente usando las operaciones booleanas Entonces, para empezar, solo te acercas a las formas de aquí y puedes hacer clic en cualquier forma. Ahora mismo, podemos ver que este es un rectángulo. Es un polígono, así que solo podemos seguir adelante, hacer clic en un polígono, y solo puedes hacer clic y arrastrar y ya podemos ver que hemos creado un Así podemos seleccionarlo mientras seleccionamos el polígono, aún podemos volver y cambiar el campo a cualquier color, podemos cambiarlo a cualquier color solo para diferenciar lo que tenemos Entonces, seleccionemos algo como esto. Y entonces estos son pequeños círculos pequeños que tenemos. Entonces, para crear esos círculos, podemos simplemente venir aquí a ps, hacer clic y mantener pulsada la tecla Mayús para crear el círculo, ¿verdad? Puedes ver que acabamos de crear un círculo, y también puedes cambiar el campo a cualquier color que coincida con este. Así que vamos con algo así como el rojo. Sí. Tan rojo para diferenciar y hacer click out. Ahora podemos seleccionar esto y copiar y pegar usando Control C y ControV control C y Control V, y luego podemos ver que los hemos creado tres veces Hacemos tres copias una, dos, tres, ¿verdad? Así que en cada caso, podemos arrastrar cada uno de ellos y ponerlo en una posición. Muy fácilmente, algo como esto, muy fácilmente, algo como esto, y muy fácilmente, algo como esto, ¿verdad? Entonces creo que solo tenemos tres necesarios para esto, ¿verdad? Para que podamos vender así y eliminar. Entonces no necesitamos esto. Entonces una vez que tengamos estas tres formas alineadas o combinadas juntas, ahora vamos a aplicar las operaciones booleanas como has mostrado en la clase anterior . Entonces, ¿cómo hacer eso? Para hacer eso, podemos hacer selecciones de las tres características, las tres formas, y luego podemos pasar al grupo de Bullion por aquí, y luego podemos continuar y hacer la selección de subpistas Así que simplemente podemos hacer clic en restar selección y boom usted tiene su solución lista Todo se está creando igual que la forma en que tenemos esto. Entonces esta es solo la solución básica a nuestra tarea, poca tarea que acabamos de dar en la clase anterior. Por favor, continúe e intente ver cómo puede jugar con la mayoría de estas características y vea cómo puede mover las cosas y ver cómo puede seguir planeando las cosas juntos. Espero que disfrutes este video. Gracias por mirar, y espero verte en la próxima clase. 15. Uso de las herramientas de alineación: Bien, entonces en esta clase, vamos a aprender los fundamentos del alineamiento dentro de Figma. ¿Bien? Entonces tengo estas formas en las que hemos trabajado. Acabo de agregar algunas pocas solo para demostrar algunas de las aplicaciones. ¿Bien? Entonces, digamos que tenemos estas formas dispersas y vamos a aprender a alinear la alineación de formas dentro de un marco particular. Para que veas los enmarqué a todos, y éste se va fuera de marco. Este también va fuera de marco. Entonces, ¿cómo nos aseguramos de que estén alineados usando esta función de alineación? Entonces, lo primero que debes hacer cuando quieras iniciar la alineación es asegurarte de seleccionar todos los detalles o todos los elementos que quieras alinear. Entonces en este caso, he seleccionado todas estas naves, y puedo venir aquí, tienes diferentes tipos de opciones de alineación. Por ejemplo, puedes alinear a la izquierda, y todo estará alineado a la izquierda, o puedes alinear el centro o puedes alinear a la derecha. Entonces déjenme hacer esto, y todo va a estar alineado de acuerdo a esta casilla. Eso sí, es de acuerdo con esta caja. Entonces centro izquierda, va a que acaba de alinearse a la izquierda. Y para alinear el centro, puedes simplemente hacer clic en alinear centro, y todo estaría alineado al centro así como esto. Entonces déjame hacer esto también con ControZ y puedes alinear a la derecha y se alineará justo así Bien, para que veas que ahora todo se está alineando bien. Ahora, otra cosa que puedes hacer es que puedas esta alineación vertical. También puedes hacer alineación horizontal. Así que puedes hacer top align top y ahora todo va a estar alineado a la parte superior de acuerdo con esta caja, y puedes alinear el centro también. Uso de la función vertical. Puedes ver que ahora todo está alineado, y puedes alinear igualmente la parte inferior igual que la forma en que lo tenemos en el letrero vertical. Ahora, otra cosa clave a tener en cuenta es que además de esta alineación horizontal y vertical muy básica, tienes los puntos. Tienes más opciones al hacer clic en esto, tienes la marea luego tienes el espaciado vertical de distribución, y luego tienes espaciado horizontal distribuido. Puedes hacerlo con todas las teclas de método abreviado de teclas. Teclas de acceso directo, puedes usarlas. El orden se asegura de que las entidades estén habilitadas igualmente espaciadas en la dirección vertical. Así se puede ver con este signo rosa línea rosa, se ha espaciado en la dirección vertical. Entonces puedes alterar esto también si te interesa cuando pasas el cursor sobre el color rosa y tu cursor se convierte en este signo vertical, puedes hacer clic y arrastrar y puedes ver el color rosa que se muestra directamente, y puedes aumentar o disminuir el signo también como quieras El ritmo entre las formas en la dirección vertical, ¿verdad? Y lo puedes hacer también desde aquí. Puedes hacer eso desde cualquier lugar, ¿verdad? Entonces déjame hacer esto también. Y luego se puede hacer de otra manera en el espaciado vertical distribuido. puede ver que se han distribuido por igual en el espaciado vertical, y también se puede hacer de la misma manera en el espaciado horizontal. Se han distribuido equitativamente en el espaciado horizontal. Entonces esto concluye esta clase sobre los conceptos básicos de alineación, cómo alinear izquierda derecha y centro y dentro de estas naves que acabamos de agregar. Entonces hasta la próxima, gracias por mirar, y espero verte en la próxima clase. Adiós. 16. Cómo agregar y personalizar buttons: En esta clase, vamos a aprender a crear botones e incluso hacerlos receptivos. Ahora para crear botones, comencemos agregando algo así como un marco. que puedas acercarte a la sección de marco de aquí, que puedes activar también con la letra F. Simplemente puedes hacer clic y seleccionemos a cualquiera. Digamos que vamos con F 14, F 13 mini, éste. Entonces, para agregar un botón, puedes venir directamente a las formas de aquí. Puede hacer clic y seleccionar un rectángulo. Simplemente puedes bajar aquí y hacer clic y arrastrar. Entonces este es ahora nuestro botón. Pero como saben, la mayoría de los botones sí tienen rojos circulares por los lados, lo que podemos agregar rojos circulares. Al llegar a este fin, podemos simplemente venir aquí hasta que tu cursor se convierta en este signo horizontal. Puedes hacer clic y puedes crear la naturaleza circular. Para que veas que tenemos los bordes circulares. Para que puedas cambiar la coloración de esto. Sólo puedes venir por aquí. Cambiémoslo a algo así como azul. Y podemos seleccionar en este color y hacer click out, y ahora tenemos nuestro botón creado. Entonces lo siguiente es que podemos agregar un texto en el botón. Podemos hacerlo llegando a la letra T por aquí o a la función de texto, o puede presionar la letra T en su teclado para activar o activar la función de texto. Ahora podemos pinchar por aquí y simplemente podemos escribir cualquier cosa. Bien, empieza y ya podemos seleccionar. Podemos jugar con el tallaje por aquí. Hagámoslo algo así como 40, ¿verdad? Para que podamos golpear un escape, y si quieres, puedes alinearlos a los dos. Así puedes seleccionar esta y seleccionar esta manteniendo presionada la tecla Mayús o simplemente puedes seleccionar ambas juntas. Y puedes simplemente seguir adelante y venir aquí y ver alinear centro y alinear centro también. Entonces esto ahora está perfectamente alineado a tu botón. El texto ahora está perfectamente alineado con tu botón. Ahora lo siguiente es, si notas que esto no responde, lo que queremos decir con no responsivo es si seleccionamos sobre esto e intentamos cambiar el menú de inicio a algo así como, intentemos crear un duplicado de esto por ejemplo. Selecciona y haz venir y D, estás marcado, para crear un duplicado, puedes simplemente hacer doble clic y puedes decir empezar. Se puede ver en este momento no responde en que a medida que se extiende la longitud del texto, el botón aún permanece donde está. Entonces, para crear un botón extendido o responsivo, todo lo que necesita es seleccionar ambos, el botón y el texto, hacer clic derecho y decir selección de grupo, y luego aún puede cablear clic derecho en. Puedes usar el turno A en tu teclado para que responda. Lo que esto significa es, si hago doble clic en esto, y en vez de empezar, trato de que empiece, eche un vistazo a lo que sucede. Se puede ver que el botón se extiende también mientras trato de extender mi parte superior derecha. ¿Bien? Entonces el botón ahora se vuelve sensible en base a lo que he escrito en el botón. Bien. Entonces, si decido cambiar esto también, y para simplemente llamar a este menú, simplemente se convierte rápidamente en menú. Otra cosa que quiero mostrarles es que mientras seguimos seleccionando el botón que acabamos de seleccionar. Una cosa a la que debes prestar atención es este diseño automático. Ahora, por el momento, se ve que se selecciona la disposición horizontal. Se ha seleccionado el diseño horizontal. Eso es porque todo lo que tenemos aquí está alineado horizontalmente. Todo es horizontal. Si añadimos algo, va a ser a la horizontal. El incremento y decremento del tamaño, la naturaleza responsiva es a la horizontal porque ha detectado automáticamente en base al contenido que Intentemos ver cómo va a detectar automáticamente que esto sea vertical. Así que vamos a crear otro botón simple, más o menos. Entonces digamos que tenemos este botón así, y rápidamente venimos por aquí y ajustamos las esquinas laterales y cambiamos el campo a algo así como rojo. Y ahora queremos agregar algunos elementos, tal vez digamos círculo pequeño. Simplemente lo dibujamos y cambiamos el color a algo así como azul. ¿Correcto? Entonces algo como esto, y como que aumentamos un poco el tamaño, ¿verdad? Entonces digamos que aumentamos el tamaño. Ahora bien, lo que podemos hacer es que podamos duplicar esto tal vez unas cuantas veces más. A lo mejor tenemos tres de estos. Así que solo podemos arrastrar y soltar, arrastrar y soltar, y luego podemos arrastrar y soltar. Para que podamos seleccionar todo como lo hicimos antes y llegamos a la alineación. Podemos alinear todo al centro. Entonces, ahora todo está correctamente alineado. Entonces, mientras seguimos seleccionando todo, podemos hacer el Turno A para asegurarnos de que ahora todo esté hecho receptivo. Así se puede ver por Mor haciendo el turno A, la disposición automática se ha cambiado a la disposición vertical, B ha detectado el incremento de Entonces digamos que no podemos duplicar esto. Entonces digamos que agregamos algunos queremos agregar algo a esto. Puedes acercarte al círculo, y digamos que vamos a crear otro círculo pero esta vez alrededor de este color. Entonces, si quieres agregarlo a esta característica, va a alinear se va a ajustar y responder a la suma y va a estar en la dirección vertical. Así que vamos a venir por aquí y se puede ver con esta línea azul, sólo está significando la posición que va a poner nuestro círculo Entonces, una vez que nos fuimos, soltamos se puede ver que se ha agregado a nuestro círculo, ¿verdad? Así puedes seleccionar esto y vamos a moverlo hacia arriba para que podamos ver todo. Ahora bien, este es el deber del anuncio de hacerlo sensible a la vertical. Para que puedas hacer eso como yo lo quiera. Y puedes hacer doble clic sobre esto y eliminar. Y el mismo botón va a responder a lo que has agregado. Entonces en este caso, esto es muy útil en los casos si quieres agregar algunos íconos a esto. Por ejemplo, solo puedes seleccionar y puedes mover esto, tal vez probablemente hasta aquí. Y una vez que sueltas, puedes ver el botón acaba de ajustarse en consecuencia. Cambiemos este color, así se vuelve visible. Bien, así que vamos a hacerlo blanco. Muy bien, para que veas, empieza aquí y esto ahora se vuelve receptivo a medida que lo agregamos, y este también se vuelve receptivo a medida que lo eliminamos. Entonces esto concluye esta clase sobre agregar botones y hacerlos responsivos, tanto en la horizontal vertical usando el layout automático para. Espero que disfrutes este video. Gracias por mirar, y espero verte en la próxima clase, 17. Adición y personalización de componentes: En esta clase, vamos a aprender sobre componentes, cómo agregar componentes, cómo crear componentes y administrarlos dentro de Sigma. Por lo tanto, los componentes son un comportamiento específico que puede asignar a algún grupo de elementos en los que puede tener un comportamiento específico a través. Entonces asumiendo que tengo este botón de inicio, y planeo crear diez o 15 fotogramas más, y quiero tener este botón de inicio incluido en todos los marcos. Ahora, ordinariamente, si voy a incluir esto en distintos fotogramas, por ejemplo, digamos que seleccionamos este fotograma, y lo duplicamos Y digamos que tenemos este marco fresco, y queremos tener este menú de pestañas incluido en todo esto en todos los marcos respectivos que quiero tener. Lo que solía suceder es que lo podemos hacer de diferentes maneras. Podemos copiar esto y podemos llegar a este marco y pegarlo. Y lo que pasa ahora es que si cambiamos alguna de las características de esto, no va a afectar esto. Todo bien. Entonces, si decides cambiar la coloración de ésta, no va a afectar a esta en particular. Entonces, en los casos en los que estoy tratando con más de diez a 15 cinco cuadros con este menú de inicio incluido, podría ser muy difícil para mí hacer cambios. Si cambio uno en particular y quiero que afecte a todos los demás, me resulta muy, muy difícil hacerlo. Entonces, ¿cómo lo hago más fácil? Puedes hacerlo más fácil creando componentes a partir de la serie de elementos que tengas, o este botón en particular, por ejemplo, Así que déjame hacer esto, o déjame seleccionar esto y eliminar. Y lo que puedo hacer para crear componente es que puedo seleccionar este fotograma en particular, que pueden ver por aquí, el fotograma uno. Y mientras lo seleccionas, puedes llegar a lo más alto a este top hombres. Se puede ver crear componentes a partir de esto. Y lo puedes hacer con la tecla de opción y la tecla de comando y luego la tecla. Te va a ayudar a crear componentes. Ahora, podemos dar click sobre esto y automáticamente esto ahora se convierte en un componente. Se puede ver que los bordes acaban de volverse a este color rosa, y se puede ver también desde aquí que este ahora se convierte en el color de estos cambios, y tiene este signo de diamante, que esto es ahora un componente. Entonces esto es una señal de que esto es ahora un componente es una combinación de todo esto, y tiene la misma propiedad única. Déjame mostrarte lo que puedes hacer también para administrar este componente. Entonces llamemos a esto vamos a cambiar el nombre esto para que sea botón principal. Entonces puedes llamar a este botón principal, ¿verdad? Y aquí no entres. Y así intentemos duplicar esto para que pueda mostrarte algo. Ni siquiera duplicarlo solo no es suficiente. Se puede ver si duplicamos esto. Probablemente voy a querer tener esta copia duplicada. Se puede ver que es un componente duplicado. Está aquí por aquí. Se puede ver este tiene los dos signos son diferentes. Este es un componente de incienso y este es un duplicado, este es el componente principal, este, este es el incienso, al igual que una copia del componente principal. Ahora bien, lo que pasa es que si trato de copiar este componente de incienso y llego a este marco y lo pego. Entonces si cambio algo aquí, todavía no va a afectar a mi componente principal, solo para mostrarle que una copia del componente no puede servir a la función que puede servir un componente principal. Entonces vamos a tratar de hacer eso. Cambiemos esto, y no puedes ver nada, no se muestra ningún efecto sobre el componente principal. A pesar de que es un componente de incienso, que es una copia igual que una copia del componente principal. Bien, entonces si hago una copia de esto. Entonces si lo hago eliminemos esto, y si hago una copia de esto, tal vez, por ejemplo, selecciono, y duplique esto y muevo esto a esto. Bien. Y probablemente tengo otro marco. Duplico esto también, duplico este formulario así que tengo tres fotogramas con esto. Entonces cada vez que cambie algo de esto, no va a pasar nada. Pero cuando vuelvo al componente principal, éste, y cambio cualquier cosa, va a afectar al resto del componente. Echa un vistazo a lo que sucede. Entonces si vuelvo al componente principal, y luego cambio este color a probablemente algo así como este rojo y se puede ver, ahora todo cambia y toma el efecto que acabo de insertar al componente maestro, que es el componente principal. Y si decido cambiar el radio del radio del círculo exterior, si lo cambio, va a afectar igualmente a todo el componente, todo el cuerpo que tengo en todos los diferentes fms Entonces digamos que reduzco aumento este radio de esquina, Todavía va a afectar a la otra cosa. Puedes ver si selecciono y agrego algo aquí, va a afectar a los demás. Se puede ver muy fácilmente. Entonces esto se vuelve muy fácil para ti navegar y conectarte entre diferentes elementos ya que los tienes a través de los diferentes marcos, sin importar la cantidad de frats que puedas tener Así que tener la creación de componentes, se vuelve muy, muy fácil para ti navegar a través. Ahora, déjame mostrarte cómo puedes agregar componentes muy fácilmente a través de los diferentes elementos, los diferentes marcos, también. También siempre puedes llegar a activos aquí, iPhones y podrás ver el componente principal aquí que acabas de crear Para que puedas arrastrarlo y soltarlo fácilmente aquí. Puedes arrastrarlo y soltarlo fácilmente donde quieras arrastrar y soltar. Y siempre que hagas cambios a esto también, afecta a todo el asunto. Verás, muy fácilmente. He afectado todo a Los cambios en el componente principal definitivamente afectarán a los demás. Bien. Entonces básicamente, así es como crear componentes y administrarlos dentro de Figma. Espero que disfrutes este video. En la siguiente clase, vamos a mirar variantes, qué son variantes y cómo las gestionamos dentro de Figma. Entonces hasta la próxima, gracias por ver y espero verte en la próxima clase. 18. Cómo crear y administrar variantes: En la última clase, platicamos sobre cómo agregar componentes personalizados. Y en esta clase, vamos a aprender a crear variantes. Entonces varianza I casos de componentes, hay que mantener la propiedad de esto igual a través todas las demás plataformas a través de todos los demás botones que vas a crear. Pero en varianza, ahora eres libre de tener una versión diferente de esto, y cuando quieras cambiar alguna de estas, automáticamente, puedes seleccionar cuál de la variación de esta quieres crear, y simplemente puedes crearla muy fácilmente. Ahora, déjenme darles un ejemplo de lo que estoy hablando en cuanto a esto. Para empezar, intentemos ajustar algo ajustar esto. Entonces déjame borrar esto porque no lo necesitamos, e igualmente no necesitamos esto en este momento. Empecemos por ajustar esto. Al seleccionarlo, podemos llegar al panel de propiedades de aquí. Lo primero es, digamos, quiero crear una variante de esto. Puedes ver seleccionando, tienes las propiedades. Puedes ver propiedades, así puedes golpear en este signo más y tienes las diferentes propiedades. Se puede ver crear nuevas propiedades. Tienes variante, tienes lingotes, tienes intercambio de instancias y texto Para este caso, vamos a crear una variante. Así que sólo podemos hacer click en variante y ya podemos ver lo que tenemos aquí. El nombre es propiedades y la propiedad es predeterminada. Lo configuré por defecto. La propiedad se establece por defecto bajo esto. Entonces lo que podemos hacer es que esta es la variante principal, ¿de acuerdo? Es su propiedad de nombre y la propiedad que tiene es predeterminada. Entonces podemos decidir renombrar esto, llamar a la variante principal, y la propiedad va a ser predeterminada. Podemos mantenerlo por defecto. Pero entonces podemos crear media podemos crear una variante a partir de esto simplemente bajando a este signo de parcela, y podemos dar click en agregar variante y tenemos esta segunda variante. Ahora, todo va a estar encerrado bajo este marco discontinuas, algo así como un cuadro de tablero También. Es extensible Puedes venir aquí y puedes hacer clic y extenderlo si quieres extenderlo. Entonces por eso decimos que es como un cuadro de tablero de tablero. Entonces ahora, esta, esta segunda, intentemos ver si podemos cambiar las propiedades de la segunda. Bien, así que digamos que tratamos de cambiar esta comp esta propiedad las propiedades de este botón en particular. Por ejemplo, podemos decidir eliminar esta coloración, podemos decidir quitar el color, y probablemente podamos hacerlo así de ligero. Y entonces podemos decidir jugar con esta frontera. Entonces podemos decidir tocar el borde el trazo simplemente agregando el trazo y probablemente extendiéndolo a tal vez nuestro cinco sea hablar, pero creo que está bien. Entonces podemos hacer doble clic sobre este texto, y podemos cambiar las propiedades del texto, también, especialmente el color, especialmente el color del texto, y seleccionarlo y vamos a hacerlo así de rojo. Y este icono también que tenemos, vamos a seleccionarlo y cambiar el color a probablemente este color rosado. Bien, para que podamos ver. Ahora tenemos este inicio con este color de la para que podamos llamar a esto. Podemos hacer doble clic sobre esto y podemos acercarnos a las propiedades. Ahora cambiamos la variante principal. Podemos llamar a esta variante dos, pero podemos llamarla. Llamemos a este esquema, por ejemplo, porque es diferente al principal porque éste es solo el esquema. ¿Correcto? Entonces ahora mismo, quiero mostrarte cómo puedes efectuar estas dos variantes en estos botones que has distribuido entre los dos fotogramas. Entonces, cuando seleccionas cuando haces una selección del componente principal de este botón, puedes ver las mismas propiedades que aparecen. Entonces, al seleccionar este botón en particular, se puede ver desde el botón principal. Oh, este es el nombre que le hemos dado al botón principal. Eso es lo que aparece porque esto es un componente de esto. Es sólo una copia del componente principal. Puedes ver que lo hemos nombrado para que esté en botón, y puedes ver que las propiedades son predeterminadas. Entonces, al hacer clic en este menú desplegable, se puede ver el botón de esquema, que es para la variante. Así que una vez que haces clic en esto, ya puedes ver que tu botón ahora cambia a esta variante. Entonces se vuelve realmente, muy útil en los casos en los que no tienes que recrear esto y tienes múltiples fotogramas para simplemente estar usando diferentes variaciones Entonces cuando vengas sobre esto también, si quieres cambiarlo por el otro, simplemente puedes seleccionar y ver copia de esquema. O si quieres volver a esta variante principal, solo puedes seleccionar. Hay algunos cambios. Puedes seleccionar, y puedes bajar y simplemente decir default, y vuelve a la principal. Bien. Así que eso es básicamente cómo agregar variante y crear variante y administrarla a través de. Ahora, déjame mostrarte otra instancia que es muy, muy importante y que puedes disfrutar usando. Entonces digamos con éste. Digamos con esta variante, esta primera. Quiero cambiar algo. Por ejemplo, doy éste. Le doy otro nombre. Yo lo llamo icono, y aquí lo llamo verdad. Y yo lo llamo verdad. Y selecciono éste y vengo aquí. Le doy un nombre de icono también. Pero en esta ocasión, a esto lo llamo falso. Bien. Entonces lo que estoy tratando de hacer. Lo voy a hacer es al seleccionar este, voy a eliminar este icono, este, lo que significa que este está sin icono, y este es con un icono. Yo los acabo de definir. Entonces cada vez que hago clic en esto, este es ahora el nombre ahora ha cambiado a un icono, pero cuatro. Y entonces éste también el nombre ha cambiado a un icono, pero cierto. Entonces ahora, cuando yo cuando trato de cambiar la faración a través de esto, tal vez selecciono en esto, y llego al botón principal Puedes ver ahora mismo que el nombre ha cambiado a un icono o con este letrero de encendido y apagado. Entonces si yo en esto, va a traer de vuelta esta variación. Y si lo quito, va a ir sin el icono, igual que hemos mostrado. Bien, entonces es muy, muy interesante. Si selecciono esto también y quiero volver a esta variante de botón, puedo simplemente salir del icono, así que ahora se convierte en esto. Entonces esto solo es posible porque he agregado el comando verdadero y falso, ¿de acuerdo? Entonces si vuelves a esto e intentas hacer click en él. En este caso, defino la propiedad como verdadera, y en este, definí la propiedad como falsa. Esa es la única razón por la que puedo obtener este botón de dos variantes para activar y desactivar. Así que solo consigue la diferencia. Esto es si usas algún texto, no vas a obtener el mismo efecto de este toggle on y off del tema del icono, puedes ver, esta variante. Como se puede ver, también de las capas de aquí, este primer icono, icono es igual a falso, y en este un icono equivale a dos. Esa es la diferencia. Entonces esto concluye esta clase sobre la comprensión de variantes, cómo crearlas y cómo manipularlas dentro de Figma. Espero que disfrutes este video. Gracias por mirar, y espero verte en la próxima clase. 19. Cómo agregar complementos: Entonces en esta clase, vamos a aprender a agregar y ejecutar plug-ins. plug-ins son elementos de terceros que podemos aplicar que podemos agregar a nuestra Figma para mejorar nuestras experiencias A veces es posible que tenga que emplear algunas aplicaciones gratuitas de terceros para agregar en la creación de nuestro contenido dentro de Figma. A veces en la creación de sitios web, o a veces en la creación de elementos. Es posible que necesitemos agregar uno o dos componentes o enchufes para poder tener una mejor experiencia en él. Por lo que hay diferentes formas de agregar plug-ins. Pero la forma más fácil y rápida de agregar complementos es acercarse a este menú principal. Puedes dar click en el menú principal y puedes bajar aquí, puedes ver los plug-ins. Puedes venir hasta aquí abajo. Tienes tanta opción. Puede crear un nuevo complemento de puerto enchufable desde el manifiesto, o puede ver la documentación de la API sobre los complementos Se puede mostrar u ocultar cónsul y así sucesivamente. Pero para esto, vamos a ir a administrar plugins por aquí, y tienes la opción de hacer búsquedas sobre cualquier tipo de conexión que quieras usar Puedes ver que tenemos componentes aquí. Tenemos plug ins aquí, tenemos widgets aquí. Así que vamos a ir con plug ins y podemos hacer nuestra búsqueda directamente por aquí. Entonces el primero así que digamos que quiero agregar este moges animados quiero agregar moges animados Solo puedes buscar cualquier Puedes ver este animado enchufando imágenes animadas, y solo puedes seguir adelante y seguir Ahora está cargando taponamiento animado y puedes verlo por aquí, ¿verdad Entonces todo lo que necesitas es solo seleccionar donde quieres agregar el plugin y simplemente puedes seguir adelante y agregarlo directamente. Entonces digamos que quiero agregar esto. Simplemente puedo hacer clic en él arrastrar y agregarlo dentro de mi marco. Y se puede ver que se ha agregado en mi marco, y puedo seguir adelante y redimensionarlo y ponerlo donde quiera dentro de mi dentro de esto Entonces tal vez probablemente quiera ponerlo en alguna parte. Sí. Sólo puedo seleccionarlo, y se puede ver que he insertado este MOG Y siempre que selecciones la G. Todavía tienes sus propiedades por aquí abajo. Si quieres cambiar alguna de sus propiedades. También puedes hacer clic para editar diferentes propiedades, y puedes reproducirlo para tener una vista previa también de lo que hace. Y tiene tanto característica en cuanto a su opacidad, puede cambiarla directamente desde aquí Entonces este es el primer plugin. Puedes tener tantos plugins como puedas como quieras. Todo lo que necesitas es solo asegurarte de volver a enchufar aquí, y venir a enchufar. Estos son los dos que he usado. Se pueden agregar muchos. Vamos a muchos. Se puede decir, Hay uno que se llama content el. También es muy agradable e interesante. Así que solo puedes seguir adelante y seleccionarlo y puedes seguir adelante y correr. Y ahora mismo puedes ver que acabamos de agregar el contenido de prueba. Entonces, ¿cómo usamos el contenido? Hay diferentes características que tiene desde anunciadas hasta el nombre completo, la fecha de la fecha, dirección completa, los números de teléfono, moneda estadounidense, y así sucesivamente tantas cosas para las que puedes usar esto Y tiene el efecto puede agregar el efecto en el texto, Agregar efecto en las imágenes, y puede agregar los efectos en los iconos. Y luego así intentemos tener un ejemplo lo que estamos hablando de cómo usar esta prueba de contenido. Entonces, por ejemplo, si tenemos vamos a venir a las naves, e intentemos agregar esta elipse, haga clic y arrástrala a alguna parte de aquí, puedo mantener pulsada la tecla Mayús, para que podamos tener un círculo perfecto Y digamos aquí dentro. Quiero agregar una imagen y no la tengo, así puedo agregar algo como este Avatar. Sólo puedo hacer click con un solo click mientras seleccionas este barco, va a agregar la imagen de alguien. Y si sigues pinchando, va a seguir cambiando las imágenes que tiene dentro de la misma nave. Entonces dependiendo de lo que quieras crear. Igualmente puedes tener eso seleccionado y puedes tenerlo creado. Entonces así es como agregar esto. Si quieres agregar imágenes también, si quieres agregar diferentes imágenes, igualmente puedes venir y puedes usar diferentes tipos de imagen. Puedes usar diferentes tipos de imagen y puedes ver varias imágenes dependiendo de lo que estés creando. Puedes usar check y seleccionar uno y solo aplicar. Entonces puedes seleccionar una imagen y simplemente puedes cambiarla desde aquí, ¿verdad? Lo mismo con los íconos. Puedes tener múltiples iconos, iconos fluidos regulares. Estos son creados por Microsoft. También tienes iconos fluidos llenados por Microsoft. Para que puedas dar click en cualquiera de ellos y verás múltiples iconos. Obviamente, puedes ver múltiples íconos que al menos puedes estar usando, lo largo de tu creación en Figma. Así que solo puedes seleccionar en cualquiera de ellos, puedes seleccionar en cualquiera, puedes arrastrarlo y soltarlo, y puedes agregarlo fácilmente a tus creaciones. Para que puedas seleccionar y también puedes arrastrarlo y soltarlo aquí. Tengo esta característica para ti mismo, puedes cambiar cualquiera de las características mientras sigues seleccionando el ícono. Puedes cambiar cualquiera de sus características. Mientras sigues seleccionando los íconos, puedes cambiar Iqu muchas cosas desde aquí Se trata de plug ins. Puedes manipular cualquiera de ellos que te interese, y puedes simplemente seguir adelante y explorar, tratar de ver cómo puedes encontrar otros plug-ins y ajustarlos, o empezar a usarlos para empezar a aprender a usarlos porque los plugins son excepcionales a la hora de aportar profesionalismo y facilidad de acceso y trabajo en Figma Entonces espero que disfrutes este video. Gracias por ver y espero verte en la próxima clase, pero 20. Creación de diseños a partir de plantillas: En esta clase, vamos a aprender a crear algunos diseños a partir de plantilla dentro de Figma. Así que comencemos por volver a la pestaña home por aquí. Todo bien. Así que una vez que estés aquí, puedes venir aquí para explorar la comunidad. Y puedes ver que hay un montón de diferentes tipos de plantillas que puedes acceder desde aquí. Puedes buscar todo dentro la comunidad desde aquí directamente, o puedes llegar a la inspiración, lo que otras personas han creado, lo que otras personas han creado, equipo se hunde y el sistema de diseño, los activos visuales. Puedes consultar desarrollos, iconos, y accesibilidad, web, móvil y eran frame. Un buen número de eso han creado los usuarios de Figma, y puedes encontrar bastante inspiración desde aquí Incluso puedes bajar aquí y descubrir cuáles son las cosas comerciales que están trabajando en FDMA Entonces algunas de las creaciones de tendencia de los usuarios de FDMA. Se puede ver el buen número de ellos. Entonces, por tu cuenta, puedes simplemente seguir adelante y buscar directamente. Por ejemplo, puedes buscar cualquier cosa. Intentemos buscar algo sencillo como problemas arriba, ¿verdad? Así que intentemos buscar algo así como problemas. Bien, entonces para esta clase, vamos a ir con algo sencillo. Bien, seleccionemos este problema hasta 2.0. Simplemente puedes hacer clic. Y te traerá para mostrarte esto y solo puedes seguir adelante y decir, abrir en Figma, solo puedes hacer click y va a abrir esto como un proyecto fresco dentro de Figma Bien, así que una vez que abras, esto es con lo que te van a dar la bienvenida. El primer st es que tienes el menú principal donde puedes hacer click y puedes seleccionar y puedes llegar a este punto. Esta es la imagen de lista, y después esta es la página de detalles. Entonces esta es la página de detalles que contiene algunas de las cosas que puedes cambiar. Ahora, para cambiar cualquiera de estas características, simplemente puedes hacer clic y simplemente cambiarlo. Por ejemplo, puedes hacer click sobre esto y puedes ver que hemos hablado sobre el uso de marcos y elementos, cómo agregar diferentes tipos de cosas, capas de todo esto Una vez que seleccionas cualquier tipo de elemento, como, por ejemplo, si estás interesado en cambiar esta imagen, puedes hacer clic en esta y seleccionar la imagen. Puedes ver la imagen por aquí, puedes dar click y puedes venir aquí y ver elegir imagen. Así podrás navegar a donde sea que tengas imágenes dentro de tu sistema. Por ejemplo, en mi propio caso, tengo este tutorial de Figma, lo tengo en este recurso Y puedo seleccionar cualquiera de las imágenes ya sea esta o esta. Vamos a algo como esto. Y con solo un clic, puedes ver que acabamos de cambiar la imagen sobre esto. ¿Bien? Así que eres libre de usar cualquiera de tus imágenes. Puedes escapar de esto y ahora estás de vuelta a lo nuevo. Para que veas ahora mismo hemos cambiado esto. También puedes cambiar el texto, pero simplemente haciendo doble clic sobre el texto. Como hemos explicado, esto podría sobre la mejor aventura para ti. Disfruta de tus vacaciones aquí, por ejemplo. Tienes tanta opción. Puedes hacer doble clic y puedes cambiar cualquier cosa desde aquí. Por ejemplo, se puede cambiar el tamaño del texto, ¿verdad? Puedes ver que puedes cambiar el tamaño del texto e intercambiar el estilo del teléfono. Bien. Puedes hacerlo audaz. Puedes hacer que se utilice. Tienes tantas características como características de edición de texto tan gas también. Puedes cambiar el relleno de esto a tal vez probablemente color rojo. Por lo que es muy fácil alterar y cambiar algunos de estos elementos a medida que avanzas. Entonces otra cosa con la que puedes jugar es este botón. Simplemente puedes hacer clic en el botón y podrás cambiar bastantes cosas. También desde aquí, se puede cambiar la coloración. Se puede hacer algo así. Yo puedo ver, y ya ves que podemos ver que vamos a cambiarlo. Ahora puedes controlar el radio de la esquina también desde aquí. Hablamos del radio de la esquina. Se puede controlar. Y aquí con sólo hacer doble clic sobre el objeto. puede ver doble clic en él y puede cambiar el radio de la esquina, aumentarlo o disminuirlo, como quiera que lo desee, ¿verdad? Ya ves digamos que tenemos algo así. Y también puedes cambiar el texto dentro para comenzar ahora. Únete ahora. Entonces puedes hacer bastantes cosas. Aquí se puede cambiar bastante en lo que respecta al contenido de esto. También puedes cambiar esto y simplemente hacer clic y Esto se agregó usando el complemento que hemos mostrado anteriormente. Puedes agregar diferentes tipos de iconos con los plug ins. Entonces si, por ejemplo, quieres cambiar esto, quizás quieras venir a enchufar, como ya te explicamos anteriormente, puedes venir a plug ins y puedes ir a Contenido público real. Podemos encontrarlo llegar al contenido real. Y puedes ver que puedes llegar a los íconos, si tienes algún tipo de icono que te interese, vamos a seleccionar sobre esto. Bien, para que puedas seleccionar en base a estos íconos, los que te interesan, simplemente puedes seleccionar fácilmente, por ejemplo, vamos a seleccionar algo como esto, y puedes ver que acabamos de agregarlo a este particular, ¿verdad? Puede mantener presionada la tecla de comando. Puedes arrastrar esto fácilmente. Entonces digamos que arrastramos esto y solo lo insertas aquí. Podemos ver si acaba de agregar esto. Puedes agregarlo en cualquier lugar que te interese. Entonces así es como incorporar diferentes elementos y cambiarlos en consecuencia. Puedo cerrar esto y así déjame usar la letra H para desplazarte por ahí. Entonces, en realidad esta es la forma de personalizar diferentes cosas. Puedes cambiar cualquiera de esto. Si te interesa, puedes cambiar cualquiera de esto en consecuencia si estás tan interesado. Entonces esto concluye esta clase sobre cómo abrir una plantilla y ajustar cualquier característica de esa plantilla. La siguiente clase, vamos a aprender a crear un diseño de interfaz de usuario particular desde cero. A lo mejor vamos a replicar esto desde cero. Vamos a crear esto desde cero y ver cómo podemos jugar con algunas de las características. Así que hasta la próxima, gracias por ver y espero verte en la próxima clase, ¿verdad? 21. Creación de diseño de interfaz de usuario desde cero: En esta clase, vamos a aprender a crear diseño de interfaz de usuario desde cero. Solo vamos a elegir cualquiera de estas páginas, y vamos a crearla usando diferentes métodos, diferentes métodos. Puedes comenzar creando un marco, así podemos seguir adelante y llegar a los marcos por aquí. No podemos guiarlo con una letra F, podemos solo marcos. Y como dijimos antes al inicio del tutorial, podemos seleccionar en cualquiera de estos. Entonces vamos a seguir 14. Vamos a fanatizar este, y creo que tenemos suerte de conseguir este del mismo tamaño. Entonces lo que tenemos que hacer es que podamos simplemente hacer doble clic y podemos cambiar el nombre de este marco en particular, puede hacer que tal vez aviging H. Así que podemos seguir adelante y agregar diferentes características como hemos visto aquí Entonces el primero es que podemos agregar esta imagen. Podemos agregar imágenes directamente regresando a esta carpeta y puedes usarlas directamente por tu cuenta y arrastrar y soltar cualquier imagen directamente en el marco. Se puede ver ahora mismo que hemos insertado esta imagen. Puedes seguir adelante y redimensionarlo para apuntalar todos los versos dicen que caracze Y llevar tamaño como este también. Todo bien. Entonces una cosa que podemos notar es que esta tiene esta naturaleza curva en la parte inferior. Para que podamos hacer eso. Podemos replicar eso también llegando a la naturaleza curva. Podemos seleccionar la imagen, y podemos cambiar la característica de curva desde aquí, el radio de la esquina. Puedes cambiar el seleccionar este doble clic aquí y tal vez hacer este 25 y podrás ver si se agrega algún radio de esquina, pero no es como pix así que podemos arrastrar y hacerlo mucho más visible. Bien. Esta es una manera de hacerlo. Alternativamente, podemos llegar a los rincones independientes. C simplemente haga clic. Y si notas en la parte superior aquí, no hay esquina. Entonces esta es la señal superior. El botón superior esquina inferior. Así que vamos por aquí y hagamos este cero y hagamos este cero también. Bien. De inmediato hacemos click out, puedes ver que ahora mismo tenemos esto con las esquinas por la parte superior las curvas lentas. Así que podemos seleccionar alternativamente también, todavía podemos crear las esquinas usando este puede rastrear y se puede hacer esto con las esquinas, tal como lo demostramos al principio de este tutorial. Así que acabamos de crear esto. El siguiente es que podemos agregar este texto. Oh, podemos agregar estos elementos, éste, es sólo un rectángulo con tantas características. Entonces podemos agregar el rectángulo sobre esto. Puedes llegar a las formas aquí, hacer clic en seleccionar un rectángulo, y solo podemos seleccionar y dibujar un rectángulo. Este igualmente tiene algunos extremos circulares, por lo que podemos acercarnos al radio y simplemente aumentar los bordes de esquina de este. Podemos tener algo como esto. Y podemos cambiar el color también a blanco puro en esta ocasión. Bien, entonces tenemos algo como esto. Pero no lo es todo. Tenemos que tener una sombra paralela. Podemos haber llegado a efecto hasta que tengamos esta sombra paralela. Y ahora podemos ver que tenemos nuestros elementos así como así tenemos aquí. Ahora, aquí abajo, podemos agregar esto diferente para que podamos agregar este texto. El texto es fácil. Sólo puedes copiar y pegar. Así que vamos a hacer sólo copiar y sólo podemos venir. Digamos que lo agregamos con esto, podemos llegar a la letra T, y solo podemos hacer clic y escribir algo. Viajes. Detalles, por ejemplo, y luego podemos hacer click out y podemos hacer click y moverlo a algún lado aquí, y luego podemos tener este noble texto, que aún podemos desencadenar con esto. Y luego podemos seleccionar. Bien, y podemos tener un texto aquí. Yo simplemente como lo tenemos por allá. Así que solo puedes hacer clic es solo un cuadro de texto y puedes pasar en diferentes cosas redimensiono usando las propiedades, diferentes propiedades Entonces el siguiente es el último es agregar este botón, y hemos aprendido a agregar botones simplemente llegando a formas por aquí. Puedes seleccionar una maraña roja, y nosotros podemos dibujar y hacerla así de grande Entonces, si lo deseas, puedes acercar el zoom para ver los detalles y también puedes usar el membrete para desplazarte Para que puedas seleccionar esto y nosotros podamos llegar a cambiar. Puedes redimensionarlo también puedes escapar. Puedes cambiar el tamaño de esto, y puedes cambiar el Puedes agregar radio de la esquina desde aquí, así como así Y puedes cambiar el color desde aquí. Se pueden ver más colores. Puedes usar el seleccionador de color y escoger la coloración exacta que tenemos aquí Entonces puedes escapar de esto a menos que active el texto y podamos ver únete ahora, solo puedes unirte ahora. Y podemos seleccionar esto y hacer negrita, venimos y, y podemos seleccionar seleccionar todo, seleccionar el texto, así como el botón, y luego podemos centralizar centro de ambos en la horizontal y vertical Y ahora lo tenemos todo. Entonces lo siguiente que podemos tener es esta ubicación, la estrella así como las dos. Entonces esto se puede agregar desde el icono. Entonces esto requiere que agreguemos un plugin. Entonces, ¿cómo agregamos un plugging ven aquí y podemos buscar un plugin llamado el icono explorador icono explorador Así que solo puedes buscar ícono, por defecto ves bastantes enchufes diferentes que te pueden dar iconos. Pero para este oral, vamos a usar el explorador icono, éste. Para que puedas ver al hacer clic, hacer clic en, y Explorar. Lo tengo. Por lo que requiere que inicies sesión. Así que solo puedes seguir adelante y buscar cualquier icono. Entonces, por ejemplo, podemos decir flecha hacia atrás. Digamos que buscamos la flecha hacia atrás, y podemos ver diferentes tipos de flechas traseras que podemos usar fácilmente. Entonces por ejemplo, para esta, se puede ver esta flecha hacia atrás, esta, esta. Intentemos crearlo, para que podamos tener diferentes tipos de flechas hacia atrás. Tenemos esto Así que podemos seguir adelante y usar eso también. Entonces usemos esto. Entonces usemos esto. Podemos arrastrarlo y soltarlo. Para que podamos cambiar el tamaño. Vamos a redimensionarlo. Vamos a escapar de esto vamos a cambiar el tamaño de esto. Así que vamos a redimensionarlo y ponerlo en alguna parte de aquí. Así que pongámoslo por aquí. Y podemos cambiar la coloración también a partir de aquí. Hagámoslo algo así como el blanco. Creo que ya está. Puedes tener algo como esto, así podemos retroceder. Entonces por aquí también, puedes agregar todo esto. Puedes agregar este texto en ubicación y esta etiqueta de precio. Así que aún puedes volver al mismo plugin. Así que solo puedes buscar la ubicación. Bien, entonces solo busca la señal de ubicación. Y se pueden ver de diferentes tipos. Puedes arrastrar y soltar. Y puedes volver a dimensionar directamente. Puedes bajar la tecla Mayús para obtener un cambio de tamaño perfecto. Bien, menos, vamos a redimensionarlo. Entonces podemos buscar los otros, etiqueta de precio. Siempre se puede volver a la obra y continuar. Entonces esto concluye esta clase sobre cómo crear un diseño fresco desde cero. Bien, entonces espero que disfrutes este video. Gracias por mirar, y espero verte en la próxima clase. 22. Creación de un prototipo interactivo de la aplicación: En esta clase, vamos a aprender a crear un diseño interactivo de esta aplicación de interfaz de usuario que estamos tratando de crear dentro de Figma. Entonces, para comenzar, intentemos hacer esto mismo algo que podamos interactuar y pasar de un fotograma a otro realizando algunas acciones desde el primer fotograma que podrían llevarnos al segundo fotograma, y podemos definir el comportamiento de cada acción a partir del prototipo. Entonces el prototipo es igual que la demostración de cómo a quedar la aplicación que intentas crear va a quedar la aplicación que intentas crear en la vida real. Y vamos a hacer la vista previa directamente aquí con este icono. Directamente. Entonces, para empezar, comencemos con el primer fotograma aquí. Agreguemos un simple icono o un simple botón. Volvamos al modo de selección y seleccionemos para agregar un botón simple y menos copiarlo y darle palmaditas. Sí, vamos a moverlo aquí. Y cambiemos el nombre de esto a medida que comencemos. Hagamos que comience, y podemos agregar algo aquí para demostrar el impacto de lo que intentas crear. Digamos que le agregamos una imagen a esto, arrastramos esta imagen y la pegamos dentro de esta. Todo bien. Y se puede ver ahora mismo que lo ha cubierto todo. Entonces intentemos arreglarlo y derribar esto. Entonces tenemos esto y podemos traerlo aquí también, para que podamos tener las otras características abod Pero entonces siempre podemos seleccionar la imagen y podemos traerla aquí, y podemos reducir la opacidad para que se vuelva bastante visible Las otras características no pueden hacerse visibles, sot lo puso como una opacidad de diez Eso es a pequeño. Hagámoslo tal vez 40. Bien. Creo que esto está bien. Para que podamos ver desde aquí, podemos empezar y vincularnos a este lugar. Pero luego agreguemos probablemente mi logo a esto. Podemos simplemente arrastrar y soltar el logo también, y también podemos dimensionarlo viniendo aquí y gustando y arrastrando para que podamos hacerlo un poco más pequeño presionada la tecla Mayús, que podamos tener un arreglo perfecto, y luego solo podemos seleccionarlo y ponerlo a un lado. Entonces podemos agregar en algún texto, tal vez para significar que algo está pasando aquí, pero creo que está bien. Cuando hagas clic, puedes llegar aquí. Y luego desde aquí cuando hagas clic, podrás ver este detalle. Entonces, ¿cómo hacemos esto? Cómo vinculamos la acción, tal vez en tu teléfono que al hacer clic en empezar, te llevará a este marco. Y luego cuando hagas clic en esta imagen, te va a traer a este detalle mag. Entonces, lo primero que debes hacer es comenzar dando clic en comenzar, y puedes venir al prototipo por aquí. Y entonces puedes seguir adelante y venir aquí. Se puede ver este signo más. Bien. Entonces, una vez que haces clic en el signo más, puedes hacer clic en el signo más, y simplemente puedes unirte así, ¿de acuerdo? Para que veas que simplemente navega a la siguiente acción. Está vinculado al siguiente puente. ¿Y cómo sucede? ¿Está en click? Se puede ver que el valor por defecto es al hacer clic. Entonces, una vez que hagas clic en comenzar, vas a estar vinculado al siguiente fotograma. Eso es un valor predeterminado, pero luego tienes otras características como puedes convertirlo en un mouse enter o mouse leave mouse abajo o mouse. O después de retraso en Drac. Puedes seleccionar cualquiera de estos si te interesa. Entonces para esta clase, vamos a simplemente quedarnos o hacer clic, lo cual es un valor predeterminado, y solo haremos que navegue a esta página. Si tienes otra opción, como puedes seguir adelante y seleccionar de Pre, puedes tener superposiciones, puedes tener superposiciones de intercambio o sobre ellas y las demás características, puedes seguir adelante y seleccionar consecuencia si te interesa Y esta es la primera opción. Lo has vinculado. Después de esto, se va a vincular aquí. Entonces lo siguiente es que podemos intentar probar run, y veamos cómo va a ser la acción de este frame al siguiente. Ya conoces la transición entre este fotograma al siguiente. Vamos a probarlo en vivo para ver cómo va a suceder. Así que podemos comenzar llegando a la prueba atropellada aquí al botón de vista previa de aquí, donde podremos previsualizar el prototipo y ver qué va a pasar en nuestro teléfono móvil. Así que puedes venir aquí y hacer clic. Y luego lo trajimos a esta plataforma tal como la tenemos. Y para que puedas seguir adelante y dar click y empezar, y al hacer click, puedes ver que sí nos lleva a este punto directamente. ¿Bien? Entonces podemos ver con solo hacer clic y comenzar, estamos aquí, y eso es exactamente lo que estamos tratando de probar con esto. Así que volvamos a la Figma y continuemos con nuestro enlace o haciendo que la aplicación sea interactiva en su conjunto Ahora, lo siguiente es que quiero que conectemos esta imagen a la siguiente diapositiva. Entonces, cuando alguien haga clic en esta imagen, va a tomar el relevo al siguiente fotograma. Entonces podemos seleccionar esta imagen, y luego podemos pasar a este signo más, y podríamos simplemente hacer clic y agregarla y conectarla así, y va a vincularla a esto. Entonces, ¿cómo va a ser esto? Para que podamos seleccionar o mudarnos. Porque tienes diferentes tipos de opciones. Tienes instantáneo, tienes disolver, tienes mate inteligente. Entonces voy a seleccionar mudarte, que te va a mostrar la vista previa aquí y puedes cambiar la facilidad Y las otras características también. Si quieres que se mueva de izquierda a derecha, o de derecha a izquierda, puedes ver la vista previa o de arriba a abajo, o de abajo hacia arriba, puedes seleccionar como quieras. Entonces para éste, vamos a ir con derecha a izquierda, y creo que podemos ver actualización de esto. Y luego ya terminamos. Bien, así podemos cerrar en esto, y luego podemos intentar probar en esto también, poder ver la transición desde el primer fotograma hasta el último fotograma. Así que sólo podemos seleccionar el primer fotograma, y venir aquí. Y da clic en inicio. Una vez que haces clic en comenzar , nos lleva a este punto. Y una vez que hagas clic en esto, echa un vistazo a la transición muy rápido y muy interesante. Llegaremos a esto. Entonces, en pocas palabras, así es como crear un diseño de interfaz de usuario interactivo dentro de Sigma y jugar con él en su teléfono móvil Para que puedas ver, hemos mostrado la vista previa incluso de cómo puedes verlo en vivo en tu teléfono móvil, las diversas acciones que vas a realizar y los distintos pasos y click y cómo va a ser la interacción. Espero que disfrutes este video. Gracias por mirar, y espero verte en la próxima clase. Adiós Bien. 23. Cómo compartir y exportar diseños: En la última clase, hablamos sobre cómo crear un diseño de interfaz de usuario interactivo dentro de Sigma. Y en esta clase, vamos a hablar de cómo exportar o compartir nuestro diseño con colegas o con nuestros amigos o con cualquier persona con la que nos interese compartir el documento. Así que para compartir un diseño en particular, Puedes venir hasta aquí hasta el botón de compartir en la parte superior derecha. Simplemente puedes hacer clic en él, y puedes invitar a la persona directamente dando su dirección de correo electrónico, y puedes simplemente seguir adelante e y puedes simplemente seguir adelante e invitarlo. Puedo invitar a alguien. Por ejemplo, déjame ver tutoría, pero yo. Así que una vez que escribas la dirección de correo electrónico de la persona, también puedes cambiar el permiso que vas a darle a esta persona Por ejemplo, el permiso en este momento es que solo puede ver, pero puede hacer clic en esto y tú también puedes convertirlo en editor. A este mismo proyecto. Para que puedas seguir adelante e invitar a la persona y va a recibir un correo electrónico invitándole a comentar o a editar este proyecto en particular. Bien, así que una vez que inicies sesión en tu cuenta de Gmail, podrás ver que hemos recibido un correo electrónico de Figma una vez que abres Simplemente puede seguir adelante y hacer clic para abrir. Bien, al mismo tiempo, puedes grabar. Puedes descargar el proyecto, puedes descargar cualquier tipo de puedes descargar cualquier sección del proyecto, cualquiera de los marcos con solo seleccionar el marco, y puedes volver al diseño, y puedes bajar aquí y ver exportar Si haces clic en exportar, no puedes definir qué tipo de formato de archivo quieres. Se puede ver que el valor por defecto es PNG, pero se puede ir a JPEG o S V G de PDF dependiendo. Déjame ir con JPEG, y solo puedo seguir adelante y exportar. Se puede ver que el valor por defecto también es una X, que va a mantener todo en cuanto a la calidad. Pero si estás exportando un proyecto muy grande, es mejor ir por dos X, que serían menos en la calidad durante la exportación, pero alta en la calidad durante la vista previa desde el otro extremo, tal vez desde el punto de vista de tu cliente. Entonces una vez que hayas terminado aquí, puedes decir exportar el menú y puedes definir la ubicación donde quieres exportarlo. Por ejemplo, en mi caso, quiero exportarlo al proyecto Still Figma, y solo puedo seguir adelante y ver seguro a esto Y esto ahora se exporta en esa ubicación en particular. Si desea exportar los fotogramas completos, puede hacer clic y seleccionar un fotograma en particular. Mantenga pulsada la tecla Mayús y seleccione el segundo fotograma. Mantenga presionada la tecla Mayús y seleccione el tercer fotograma, y luego podrá seguir adelante y venir aquí y decir exportar. Ahora puedes definir también el valor por defecto que quieras. O JPG, y puedo decir exportar las tres capas. Y definir la misma ubicación. Por ejemplo, puedo crear otra carpeta aquí y llamarla salida y dar clic en crear. Y luego quiero exportar todo en esta ubicación para que vea seguro. Y ahora mismo, se ha exportado, así que revisemos la carpeta y veamos qué hemos exportado. Se puede ver que hemos exportado los tres archivos que tenemos. Por lo que podemos simplemente hacer clic en cualquiera para tener una vista previa de lo que acaba de exportar. Entonces esto concluye esta clase sobre cómo compartir tu proyecto dentro FGMA e incluso exportarlo a tu computadora en diferentes formatos Espero que hayan disfrutado de este video. Gracias por mirar, y espero verte en la próxima clase. ¿Por qué? 24. Conclusión del curso: Enhorabuena por completar este curso. Has llegado al final de este curso de Figma para principiantes A lo largo de este viaje, ha adquirido una comprensión integral de Figma y sus funcionalidades para diseños de interfaz Has aprendido a navegar por la interfaz, crear y manipular elementos, construir prototipos de interfaz y, en última instancia, compartir tus diseños con el mundo Al despedirte de este curso, recuerda, la práctica es clave Cuanto más uses Figma, más cómodo y seguro te volverás Prueba y explora la comunidad Figma. Me gustaría desafiarte a que consultes la sección de proyectos de este curso para un proyecto sencillo para que pruebes y demuestres tus habilidades recién adquiridas. Sinceramente, me gustaría darle las gracias por estar conmigo, y le deseo la mejor de las suertes en sus posteriores emprendimientos. Sigue diseñando.