Curso de choque súper fácil

1. Introducción: Hola a todos. Soy Ruanda va bien. Y me gustaría darle la bienvenida al curso de choque súper fácil de los conceptos básicos de Figma. En este curso, estaremos aprendiendo todos los conceptos básicos de Figma, esa es la parte de diseño, las diversas características de Pigma. Y también estaremos aprendiendo a crear prototipos en Figma. Y todo esto se hará dentro de 16 minutos. Ahora veamos los contenidos de este curso. Ahora estos son los contenidos de este curso. Y he diseñado este curso de tal manera que es muy amigable para principiantes. que significa que si no tienes idea de lo que es Figma, o si eres nuevo en Figma, quieres aprender cómo funciona. Eres nuevo en el diseño y la creación de prototipos en su conjunto. No se preocupe, estaremos aprendiendo desde cero. Cubriré todos los aspectos del diseño y creación de prototipos utilizando la aplicación Figma. En primer lugar, estaremos cubriendo la parte de instalación de sigma, cómo instalar la aplicación de escritorio. Después seguiremos con algunos controles básicos como crear el fotograma usando el comando zoom in, zoom out, usando la herramienta manual, que son las necesidades básicas para usar la aplicación Pigma. Y luego seguiremos adelante con la parte de diseño. Aprenderemos sobre formas, componentes de masa, auto-layout, todas las características de Figma que se necesitan para crear diseños en Figma. Entonces seguiremos adelante con el uso de plugins. Hay tantos complementos en Figma, que facilitan nuestro trabajo. Aprenderemos a usar plugins para mejorar aún más nuestro proyecto. Entonces seguiremos adelante con la parte comunitaria Figma. Son varios creadores subir sus propios proyectos y podemos duplicar estos proyectos y modificarlos. Para crear nuestro propio proyecto. Podemos copiar los diversos elementos de los creadores y podemos usar nuestra propia creatividad y tomar inspiración de ellos. Aprenderemos a usar la comunidad de Figma para mejorar aún más nuestro proyecto. Y avanzando, también aprenderemos a crear prototipo en Figma, aprenderemos las diversas características que están involucradas en la creación de prototipos. Y luego estaremos implementando el prototipo para crear un proyecto simple, una aplicación móvil. Entonces así es como va a ser el flujo del curso. En primer lugar, aprenderemos la parte de diseño. Cubriremos diversas características de Pigma, como marcos, componentes de masa que vamos a mirar sobre ellos uno por uno. Después de eso, aprenderemos a usar los plug-ins y las características de la comunidad Figma para que nuestro proyecto sea aún mejor y nuestro trabajo mucho más fácil. Y después de conocer cómo funciona el prototipado, crearemos un proyecto que implemente el prototipo sin más demora. Empecemos. 2. Instalar la aplicación de escritorio Figma: Hola, todos tienen a Walker y me gustaría darle la bienvenida a este figma, las puntuaciones de IQ de alguien. Ahora Figma es una herramienta de diseño gráfico y prototipado. Ahora en este curso vamos a cubrir todos los conceptos básicos de Figma que vas a necesitar para el diseño gráfico, diseño interfaz de usuario, o prototipado. Y si eres completamente nuevo en Figma o si ya has instalado Figma, pero no sabes cómo funciona, entonces este es el lugar adecuado para ti. Vamos a cubrir rápidamente todos los conceptos básicos del magma que usted necesita. Empecemos. Lo primero que vas a necesitar es la aplicación de escritorio Figma. Si ya estás instalado se califica. Nos pondremos en contacto contigo en un minuto. Y si no has instalado o aplicación de escritorio Figma, solo tienes que ir a cualquier navegador y buscar la descarga de Figma. Aquí puedes ver el primer resultado que aparecerá aquí mismo. Figma.com. Simplemente haga clic en él. Ahora puedes ver que hay una opción para aplicación de escritorio. Puedes descargar esto para Mac OS o Windows. Ahora, actualmente estoy usando Windows, así que solo hago clic en Windows y este es un proceso de instalación simple. Basta con descargar el archivo e instalar la aplicación Figma. Una vez que haya instalado la aplicación de escritorio Figma, la interfaz va a verse algo así. Ahora somos dos opciones. Puedes iniciar sesión con tu cuenta de Figma o puedes crear una nueva. Ahora ya tenía una cuenta de Figma, pero sólo para acompañarte, solo voy a crear una nueva. Sólo voy a hacer click en Crear una oreja derecha. Y ahora seremos redirigidos al navegador. Ahora aquí puedes crear en cuenta Figma usando tu email o contraseña. O simplemente puedes iniciar sesión con Google. Por lo que sólo voy a hacer clic en continuar con el oído derecho de Google. Ahora hay algunas opciones que solo puedes llenarlo. Y una vez que haya terminado, simplemente haga clic en el Crear Cuenta. Ahora se hace el proceso de inscripción. Puedes ver que hay una opción, abre la aplicación de escritorio. Simplemente le daré click y simplemente haga clic en abrir Figma. Ahora estamos insertados la aplicación de escritorio Figma por primera vez. Y nos está pidiendo un nombre de equipo. Simplemente puedes hacer click en hacer esto más tarde. Por defecto, el nombre del equipo va a ser el nombre de tu correo electrónico. Por lo que aquí se puede ver dice que Rona es equipo de Goggles. Por lo que sólo voy a hacer clic en esto más tarde. Y aquí hay dos opciones. Simplemente haga clic en el Explorar por mí mismo. Ahora estás fuera. Algunos archivos predeterminados dados por Figma simplemente los ignorarán e irán a la parte de diseño. Ahora si querías crear algo o diseñar algo, lo primero que debes hacer es simplemente hacer clic en el signo más aquí mismo. Por lo que sólo voy a hacer clic en este signo más. Y se abre en página sin título. Ahora estamos en la sección de diseño. Se puede ver que el nombre es sin título y demandado como borradores. Si quieres cambiar el nombre, solo puedes hacer un solo clic sobre él y ahora vamos a darle un nuevo nombre. Simplemente haga clic afuera. 3. Controlos básicos en Figma: Ahora si quieres diseñar algo en la vida real, digamos que querías dibujar pintura. Lo primero que necesitas es un papel o un lienzo. De igual manera en Figma, necesitamos un lienzo para nuestros diseños. Ahora se llama a este lienzo, Let's frames. Si quieres establecer un marco para tus diseños, solo puedes hacer clic en el marco o simplemente puedes pulsar la tecla F en tu teclado. Acabo de presionar la tecla F en mi teclado. Ahora en el lado derecho se pueden ver varios marcos están apareciendo ahora estas son las dimensiones predeterminadas para varios marcos. Se puede ver por el teléfono, Ahí está el iPhone 13 Pro Max. Estas son las dimensiones de la pantalla fuera del iPhone. Y de igual manera, si lo desea para el escritorio, puede ver que estas son las dimensiones de marco predeterminadas para el escritorio. Ahora solo selecciono esta opción de escritorio para que aparezca una malla. Ahora antes de empezar a crear algo, hay algunos comandos y teclas que me gustaría que supieras. Lo primero es el comando zoom in and zoom out. Tuyo el siguiente marco superior. Y si quiero alejar de este otoño, tengo que hacer es mantener presionada la tecla Control y desplazarse hacia abajo sobre mi mouse. Se puede ver que estamos alejando de esto. Y de igual manera, si quieres acercar, solo puedes mantener pulsada nuevamente la tecla Control y desplazar el mouse hacia arriba. Ahora las teclas de control para el usuario de Windows, si tienes un dispositivo Apple, entonces supongo que será la tecla Comando en lugar de la tecla Control. Por lo que las funciones son similares en la mirada de líder, control y mando diferentes. Ahora el siguiente comando es la herramienta de mano. Ahora digamos que quiero arrastrar esta cosa y mantenerla en el lado izquierdo. Hasta ahora todo lo que tienes que hacer es mantener presionado el botón de espacio en tu teclado. Y ahora se puede ver el cursor es no hacer un icono de la mano usando el ratón, simplemente puede hacer clic y arrastrar esta cosa cualquiera que desee. Así que sólo arrastraré esto por el lado izquierdo. Así es como se puede arrastrar varios elementos. Estos dos son muy importantes sin embargo, herramienta de mano y zoom in, zoom out comando. Ahora podrían parecer insignificantes, pero mientras estás diseñando que son varios elementos en el marco están fuera del marco. Por lo que la herramienta de arrastre, zoom en la parte del modo zoom viene en muy útil. Así que solo recuerda que si quieres acercar y alejar, ¿mantengo presionada la tecla Control o la tecla Comando para los usuarios de Apple y simplemente desplázate el botón del ratón hacia abajo. Para la herramienta de mano necesitas mantener presionado el botón de espacio y simplemente arrastra tu marco o varios elementos de tu archivo Figma, cualquiera que quieras. Eso es todo por la sesión de introducción. En la próxima sesión estaremos aprendiendo diversas características motoras de sigma. Entonces eso es todo. Gracias. 4. Cómo crear diseños en Figma: En Figma, si querías hacer cambios a algún elemento en particular, debes seleccionarlo primero. Así que seleccione cualquier elemento en particular, digamos marco o forma o cualquier cosa. Es necesario simplemente hacer click sobre él. Ahora se puede ver su escritorio se ha seleccionado un marco. Ahora si quieres anular la selección de este marco, solo puedes hacer click afuera. Ahora hay otra forma de seleccionar también estos elementos. Puedes ver aquí en el lado izquierdo en la sección de capas, ahí está la de escritorio. Sólo puedes hacer click aquí. Esto se elige. Y cada elemento que añadas en tu página de diseño se agregará en la sección de capas. Cada elemento actúa como una capa individual. Por lo que vamos a repasar eso en la parte posterior con un ejemplo. El nombre del marco que agregamos en la sesión anterior por defecto es de escritorio uno. Si querías cambiar el nombre, solo puedes hacer doble clic aquí mismo en stock uno en la sección de capas. Desde aquí se puede cambiar el nombre del elemento. Así que sólo voy a cambiar el nombre de este marco para que digamos. Una vez que hayas terminado, solo presiona Enter. Ahora se puede ver el nombre de este marco ha sido cambiado. Agreguemos otra página de puerta de marco. Simplemente puedes presionar el botón F en tu teclado. Ahora si echas un vistazo a tu cursor, puedes ver que hay un signo más. Entonces si solo sostengo el botón izquierdo del mouse y arrastro esta cosa de todos modos, quiero, puedo agregar un marco de mis propias dimensiones. También se pueden ver las dimensiones en vivo. Así que sólo voy a dejar este botón del ratón. Y aquí está mi otro marco. Ahora si quieres mover este marco a cualquier parte, solo puedes tirar del botón izquierdo del ratón y arrastrar este marco a cualquier lugar que quieras. Y solo puedes alinear esta oreja derecha. De acuerdo, Entonces las dimensiones predeterminadas de este marco o 1576 y para 1053, si quieres cambiar estas dimensiones, todo lo que tienes que hacer es justo en el lado derecho puedes ver ahí está el ancho y la altura. Entonces a partir de aquí, se pueden hacer cambios en sus dimensiones. Puedes añadir dimensiones personalizadas propias. Sólo agregaré algunas dimensiones. Cambiaré el ancho a 1080 y cambiaré la altura a 109 a 0. Puedes usar el botón de zoom, alejar y la herramienta de mano que dijo la pantalla de una manera con la que te sientas cómodo editar. Así que lo guardaré así. Ahora si echas un vistazo a la sección de capas en el lado izquierdo, puedes ver que está el marco uno. Este fue el segundo elemento que agregamos. Ahora vamos hacia la parte de diseño. Así que solo seleccionaré este marco uno aquí mismo. Ahora si echas un vistazo al lado derecho, puedes ver que hay varias opciones para la parte de diseño. La opción de ancho y altura que acabamos de ver. Hay otra opción que es la opción de ángulo para la rotación. Simplemente puedes ingresar el ángulo de fila. Quieres rotar esta cosa. Si acabo de entrar diez y golpear Enter, puede ver así es como gira. Ahora puedes rotar manualmente esta cosa también. Solo tienes que llevar el ratón cerca de uno de los bordes. Y puedes ver los cambios del cursor al ícono Rotación. Y desde aquí solo puedes mantener presionado el botón izquierdo del ratón y arrastrar esta cosa de todos modos, quieres rotarlo. Y en el lado derecho en la parte de diseño puedes ver una vista previa en vivo de los cambios de ángulo que estás haciendo. Acabo de entregarlo a 0 una vez más, que se está moviendo. Ahí está la característica de radio de esquina también. Para que puedas evocar ideas ordinarias a esta cosa. Ahora, ¿qué es el radio de esquina? Ahora acerquemos y echemos un vistazo a este borde, esa idea. Por lo que aquí se puede ver este es un rectángulo perfecto. Los bordes son líneas rectas. Por lo que ahora seleccionaré este marco y agregaré un radio de esquina justo aquí. Entonces vamos a añadir un radio de esquina de 50. Ahora se puede ver que hay un radio de esquina hacia el marco. Esto también sobre el radio de la esquina. Ahora la función de diseño automático y cuadrícula de diseño, lo explicaré en la parte posterior con un ejemplo. Ahora hablemos de la sección de campo. Rellena igual que el nombre dice, aquí está la sensación de tus elementos. Actualmente hemos seleccionado el marco, así que vamos a cambiar el relleno de este marco. momento el relleno de este marco ha sido seleccionado como blanco. Ahora si hago click en este color aquí mismo, se puede ver que somos varias opciones para el color de este elemento. Simplemente puedes seleccionar cualquier color que quieras. También puedes ajustar la opacidad de esta cosa cambiando aquí mismo. Solo tienes que seleccionar el color que quieras. Obtendrás una vista previa en vivo así como haces los cambios por recién comenzado como verde por ahora. Y hay muchas más opciones para este campo también. Si acabo de ampliar esta opción aquí mismo, se puede ver que hay relleno lineal, radial, angular, de diamante, y de imagen también. Simplemente puedes explorarlos uno por uno. Ahí está esta opción de relleno lineal. Puedes cambiarlos de la manera que quieras. También está esta opción de imagen, lo que significa que puedes agregar una imagen como una sensación del elemento. Así que seleccionemos la opción de imagen. Desde aquí, puedes subir una imagen desde tu dispositivo. Hemos agregado una imagen como relleno del marco. Ahora están los trazos, efectos y opciones de exportación, así que los echaremos un vistazo uno por uno. Por lo que actualmente la opción Trazo no está habilitada. Entonces si quieres habilitar la opción de trazo, puedes ver que está el signo más. Simplemente haga clic en él. Y ahora se ha habilitado la opción de trazo, es el color del trazo. solo puedas seleccionar cualquier color que quieras. Simplemente lo tomaré como leído. Y la descarga es el tamaño del trazo. Simplemente puedes arrastrar esta cosa y seleccionar el tamaño del trazo. O simplemente puedes ingresar manualmente el número que quieras. Acabo de decir que el chico tiene diez. Por lo que ahora hemos añadido un trazo rojo a nuestro marco. Y seguir adelante, Ahí está la opción de efecto. Por lo que actualmente esto no está habilitado. Así que vamos a hacer clic en el signo más. Y ahora hay Sombra Sombra, capa de sombra interna borrosa y así sucesivamente. Vas a explorar estas características por tu cuenta. Ahora sólo te voy a dar un ejemplo de, digamos sombra paralela. Simplemente selecciona este icono aquí mismo y cambia los valores de la manera que quieras. Ya hemos agregado una sombra. Ahora si acabo de acercar, se puede ver que ahí está la sombra paralela. Luego está la característica de exportación. Por lo que sólo voy a hacer clic en este signo más. Se puede ver actualmente he seleccionado el marco uno. Estamos hablando de explotar este marco uno. Y ahora hay opciones que vamos a exportar este tipo de archivo. Entonces hay PNG, JPG, SVG, PDF, y así sucesivamente. Vamos a seleccionar PNG. Y ahora sólo voy a hacer clic en Exportar marco uno. Ahora puedes guardar esto en tu dispositivo. Por lo que sólo voy a hacer clic en la venta. Ahora este marco se ha exportado como PNG en nuestro dispositivo. De acuerdo, así que aquí está el marco. Se puede ver que este fue el marco que exportamos. Así es como se va a ver como una imagen. Ahora vamos a añadir algunos elementos a este marco. Así que echa un vistazo a la opción de arriba a la izquierda. El primero es básicamente la herramienta de movimiento que estamos utilizando, que es nuestro cursor del ratón. Y el segundo es la herramienta de escala. Ahora la herramienta de escala es básicamente para cambiar el tamaño de los elementos de tu página. Así que selecciona la herramienta de escala que puedes seleccionar de tu o puedes presionar el botón J en tu teclado. Ahora antes de seleccionar la herramienta de escala, simplemente alejaré un poco porque así es como me siento cómodo editando. Ahora digamos que seleccionaré este marco uno aquí mismo. Y quiero cambiar el tamaño de este marco. Entonces para eso necesitaba la herramienta de báscula. Pulsemos el botón de nuestro teclado. Por lo que ahora se ha activado la herramienta de báscula. Ahora si llevo mi ratón hacia uno de estos bordes, se puede ver que el cursor ha cambiado. Ahora se trata de un bool de redimensionamiento. Entonces si acabo de hacer clic con el botón izquierdo y arrastrar esta cosa, puedo cambiar el tamaño de mi marco uno. De acuerdo, Entonces así es como funciona la herramienta de redimensionamiento. Ahora de manera similar, si quiero cambiar el tamaño de este marco, por lo que sólo seleccionaré en él. Y llevo mi cursor hacia el borde, y simplemente arrastraré esta cosa. Ahora si echas un vistazo mientras estoy redimensionando este marco, alguna parte de ella va detrás de este marco uno. Ahora si quieres esta idea de marco justo detrás de este, nuestro primer fotograma, por lo que todo lo que tienes que hacer es ir a la sección de capa y luego mantén presionado el botón izquierdo del ratón en nuestro primer marco y arrastra esta cosa sobre el marco uno. De acuerdo, Entonces así es como funcionan las capas. Ahora solo lo pondré de vuelta donde estaba. Y sólo voy a mover esta cosa aquí mismo. De acuerdo, así que ahora si selecciono este fotograma y voy hacia el borde, se puede ver actualmente la opción de escala sigue activada. Entonces, si quieres apagar esto, simplemente pulsa el botón V en tu teclado. Ahora si llevo mi cursor hacia el borde, se puede ver que todavía podemos cambiar el tamaño de esta cosa, pero no se redimensionará según una dimensión fija. Vas a cambiar el tamaño de esta cosa que al azar, está bien, así que acabo de presionar Control Z en mi teclado. Si lo llevas de vuelta a su dimensión original. Y ahora volvamos a pulsar el botón. Ahora se puede ver que estamos redimensionando esta cosa en cada dimensión, redimensionando proporcionalmente. De acuerdo, así que acabo de presionar el botón V de mi teclado otra vez. Para volver a la opción Mover, puedes seleccionarla de tu valor. Puede mover o seleccionar escala. Ahora, pasemos a la segunda opción. La segunda opción es frame. Ya hemos cubierto esa parte. Y ahora la tercera opción son las herramientas de forma. Entonces si expando esto, se puede ver que estos son los videos herramientas de forma. Y algunas de estas herramientas tienen un atajo también. Para que a medida que te veas bien versado con Figma, solo puedes seleccionar directamente usando atajos. No es necesario seleccionar de este menú cada vez. Vamos primero con un rectángulo. Ahora sólo voy a hacer clic en este rectángulo. Ahora, al igual que el marco freestyle, puedes simplemente tirar de tu botón izquierdo del ratón y arrastrar esta cosa. Crea un rectángulo. Y al dejar el botón del ratón, se ha formado el rectángulo. Por lo que sólo voy a hacer clic afuera. Ahora hay otra característica de esta herramienta de rectángulo también. Seleccionemos nuevamente la herramienta rectángulo. Y ahora digamos que quería agregar un cuadrado en lugar de un rectángulo. Si desea agregar un cuadrado en lugar de un rectángulo, puede agregarlo usando esta misma opción. Esa es la herramienta rectángulo. Para eso. Todo lo que tienes que hacer es simplemente tirar el botón Mayús en tu teclado y luego arrastrar esta cosa. Ahora si echas un vistazo mientras estás arrastrando esta cosa, está entrando en una forma cuadrada perfecta. Simplemente dejo el botón del ratón y luego dejo la tecla Mayús. Por lo que se queda Perfecto. Bien, entonces los tuyos overs al cuadrado y los tuyos sobre rectángulo. Y ambos se han agregado utilizando la misma herramienta de rectángulo. Al igual que la opción frame cuando seleccionamos frame, pudimos hacer cambios en la sección de diseño. De manera similar, si quieres hacer cambios en tu rectángulo o cuadrado o cualquier elemento que seas. Solo tienes que seleccionar estos elementos y luego puedes hacer cambios aquí mismo. Vale, así que cambiemos el relleno de esta plaza. Lo cambiaré a azul. Y vamos a permanecer en el campo de este rectángulo también. Lo mantendré como blanco. Y solo agregaré un trazo a esto. Simplemente cambia el color del trazo y cambia el ancho del trazo. Vamos a explorar algunas herramientas más de forma. Ahí está la línea. Simplemente seleccionaré esta cosa de línea. Del mismo modo, solo puedes mantener presionado el botón izquierdo del ratón. Y puedes arrastrar esta cosa. Ahora si quieres que esto sea exactamente a 0 grados o 45 grados o 90 grados, solo puedes mantener presionado el botón Mayús en tu teclado. Y a partir de ahí solo puedes arrastrar estas cosas para que puedas ver cuál se queda en proporción. Y luego moveré el botón del ratón. Entonces ahí tenemos una línea recta. Aquí está la línea. Puede seleccionar esta línea y puede realizar cambios en su sección de diseño. Cambiemos el ancho de trazo de esta línea. Ahí está. Y vamos a cambiar el color del trazo, rojo. Ahora avanzando, también está esta opción de flecha. Similar a la línea. Ahora solo mantendré mi tecla Shift y arrastraré esta cosa aquí mismo. Si tenemos un anuncio o tu reservorio, y solo cambiaré el ancho del trazo y cambiaré el color del trazo. Aquí también hay algunas opciones. También puedes cambiar el punto final. ¿ De acuerdo? Entonces ahí está el diamante estrecho, ahí está la flecha de línea. Entonces esto es útil para hacer diagramas de flujo y así sucesivamente. Pasando, ahí está este eclipse. Ahora solo puedes mantener presionado el botón izquierdo del ratón y arrastrar esta cosa, pero solo dejaré esta cosa tal como está. Ahora puedes agregar un círculo perfecto también usando esta herramienta Eclipse. Todo lo que tienes que hacer es simplemente seleccionar la herramienta Eclipse. Y antes de empezar a arrastrar esta cosa manteniendo presionado el botón izquierdo del ratón, solo tienes que mantener pulsada la tecla Mayús en tu teclado, que obtenemos un círculo perfecto. Así es como funciona y conoció primero el botón del ratón y luego deja la tecla Mayús para que se mantenga Perfecto. Ahora, seleccionaré mi primer fotograma una vez más. Si traté de cambiar el tamaño de esta cosa, se puede ver que estamos redimensionando en tridimensional. Ahora si sostengo la tecla Shift mientras estoy redimensionando esta cosa, puede ver que se mueve en unas proporciones perfectas. No podemos hacer el freestyle que queremos. Así es como la caja de teclas de cambio, supongo que tenía algún campo a nuestro círculo también. Ahora avanzando, hablemos de las otras herramientas. Simplemente ampliaré esta cosa. Aquí puedes ver que hay una herramienta de bolígrafo y hay una herramienta de lápiz. Seleccionemos primero la herramienta Pluma. Ahora la herramienta pluma es similar, haz conectando los puntos. Si quieres crear un vector, puedes usar la herramienta pluma. El primer paso es hacer clic en alguna parte. Ahora este será el punto de partida. Y ahora si vuelves a hacer click, estos serán los otros puntos. Entonces es similar a crear puntos y líneas. Estamos creando un vector aquí mismo. Ahora, solo llevaré esto al punto de inicio, o puedes llevar esto a cualquier punto que quieras. Una vez que haya terminado, simplemente haga clic en Hecho oreja derecha. Ahora vamos a seleccionar nuestro vector. Y se puede ver que nuestras diversas características añadidas que podemos utilizar para vector también. Entonces vamos a añadir un relleno a este vector. Actualmente no se ha agregado el campo, así que vamos a golpear el signo más. Ahora se puede ver el vector como un campo también. Cambiemos el relleno de este vector. Estos son ahora esto es sólo para su referencia. Los vectores son muy útiles. Puedes crear cualquier forma que quieras. Ahora, avanzando, ahí está la herramienta lápiz. Simplemente seleccionaré esta herramienta de lápiz. Ahora es para el estilo gratuito. Puedes justo antes del botón izquierdo del ratón y dibujar todo lo que quieras. Si quieres dibujar una línea recta, solo tienes que mantener presionado el botón Mayús en tu teclado para que dibuje una línea recta. Entonces así es como funciona la herramienta lápiz. Una vez que hayas terminado con la herramienta lápiz, simplemente pulsa el botón tu teclado para que vuelvas a la opción Mover. Si quieres eliminar algún elemento en particular, todo lo que tienes que hacer es simplemente seleccionar ese elemento en particular. Vale, ahora digamos que quiero eliminar esto que se dibuja con un lápiz. Simplemente selecciona este elemento y pulsa el botón de retroceso en tu teclado. Ok, entonces ahora esta cosa se ha ido. Y si quieres deshacer los cambios, ahora digamos que he diluido este dibujo a lápiz y quería traerlo de vuelta. Simplemente presiona Control Z en tu teclado, que deshaga los cambios, da un paso atrás. Se puede hacer eso muchas veces para volver al paso anterior. Así que simplemente seleccionaré esto de nuevo y lo eliminaré golpeando el retroceso. Así que voy a eliminar esta cosa también. Éste también. De acuerdo, así que eso es todo sobre la herramienta Pluma de penicilina. Ahora sigamos adelante con el otro. Esa es la herramienta de texto. Sólo tienes que seleccionar en el texto aquí mismo. Y ahora agreguemos texto en algún lugar de nuestro marco. Así que solo bajaré usando la herramienta de mano. Voy a acercarme. Ahora vamos a añadir texto en este cuadro. Sólo voy a hacer clic aquí mismo. Y ahora desde aquí, solo puedes agregar cualquier texto que quieras. Entonces digamos una vez que hayamos terminado, basta con hacer clic afuera en algún lugar. Aquí está nuestro texto y simplemente arrastraré esta cosa hacia el centro. Se puede ver Figma es una herramienta muy inteligente. También te da dimensiones. Es nuestro punto, este justo aquí se puede ver que dice que está perfectamente en el centro. Y ahora también puedes personalizar este texto. Se puede ver en el lado derecho en la opción de diseño, hay varias opciones. Ustedes son los estilos extranjeros. Puedes cambiar la fuente desde aquí. Cambiemos también el estilo de fuente. Lo cambiaré para que hierva. Ahora avanzando, ahí está el manual que ya hemos cubierto. Simplemente puedes hervir el botón de espacio en tu teclado y arrastrar esta cosa a donde quieras. Y la última característica es agregar un comentario. Así que sólo seleccionaré esta cosa. Puedes seleccionar dónde quieres agregar un comentario. Acabo de seleccionar este círculo aquí mismo. Agregaré un comentario. Ahora se ha agregado el comentario, y ahora presionaré el botón V de mi teclado para volver atrás. Ahora digamos que estás trabajando equipo y quieres revisar los comentarios que tus compañeros han dejado sobre este diseño en particular. Los usuarios tienen que hacer click en este comentario aquí mismo. Y del lado derecho se pueden ver los diversos comentarios que dejan caer tus compañeros de equipo. Aquí puedes ver ahí está el comentario, el Yoda es. Así es como los comentarios son útiles cuando se está trabajando en equipo. De acuerdo, así que eso es todo por esta sesión. Estamos cubiertos con los fundamentos de Figma. En la sesión posterior, continuaremos con las características más avanzadas de Figma y repasaremos la parte de prototipado también. Eso es todo. Gracias. 5. Algunas características avanzadas que debes saber antes de prototipar: Hola y bienvenidos de vuelta a todos. En esta sesión vamos a conocer algunas características más avanzadas de Figma y nos estaremos inclinando hacia la parte de prototipado. Entonces antes de empezar con el prototipado, hay algunas imágenes de Pigma que debes conocer, que son más utilizadas en Figma. Así que empecemos. Entonces primero solo agregaré un eclipse. Ahora ya sabes cómo agregar un eclipse. Simplemente ve a la forma, selecciona la opción eclipse. Y si quieres sumar un círculo perfecto, todo lo que tienes que hacer es sostener el valor de la tecla Mayús o arrastrar esta cosa. Aquí está. Entonces tenemos un círculo perfecto. Ahora solo seleccionaré este círculo aquí mismo. Y si nos fijamos en la sección superior, hay tres opciones. Editar, objetar, crear, componente y máscara de usuarios. Ahora todos estos tres son bastante interesantes e importantes si vas a crear múltiples diseños mientras un prototipo o simplemente para figma básico de diario. Sólo vamos a pasar por ellos uno por uno. El círculo ya ha sido seleccionado, por lo que sólo vamos a hacer clic en la opción Editar objeto. Y ahora podemos editar este círculo de la manera que queramos. Puedes ver que aquí hay cuatro puntos, por lo que solo puedes ajustarlos y diseñar a tu manera que quieras. De acuerdo, Así que esta es una de las características de Figma para crear algún diseño. Y una vez que haya terminado, simplemente haga clic en Hecho oreja derecha. Y también puedes cambiar el relleno de esta forma. Ahora bien, esto se trataba de la función de edición de objetos. Simplemente eliminaré esto. Para eliminar cualquier objeto en Figma, solo tienes que seleccionar ese objeto en particular y presionar Retroceso en tu teclado. Por lo que ahora la forma se ha ido. Ahora antes de seguir adelante con otra característica de Figma, solo agregaré un rectángulo. Así que sólo ve a Formas, haz click en el rectángulo. Y ahora solo mantendré la tecla Shift porque quiero un cuadrado perfecto. Es tenemos una plaza perfecta. Y ahora sigamos adelante con otra característica interesante de magma llamada como componente create. De acuerdo, Así que estos fueron la opción Crear Componente. Ahora antes de explicarte cuál es el Crear Componente, solo te mostraré la diferencia entre usar opción Crear componente y sin ir con la opción Crear componente. Ahora Create Component opción es muy útil a la hora de crear diseños y también en prototipos. Por lo que ahora oíste que tenemos un cuadrado. Simplemente duplicaré esto ahora para crear copia de cualquier elemento, todo lo que tienes que hacer es seleccionar ese elemento en particular y presionar el control D en tu teclado. Y dice la selección de Duplicados. Ahora hay dos rectángulos. Sólo tienes que arrastrar éste justo aquí. Ahí está. Y ahora solo presionaré Control D en mi teclado una vez más para crear otra copia. Ahora si te has dado cuenta, Figma creó automáticamente el espacio entre los dos. Entonces sigma es una aplicación muy inteligente. Y ahora somos tres plazas. Simplemente seleccionaré el primer cuadrado aquí mismo. Ahora si trato de cambiar el relleno de este primer cuadrado, cambiémoslo a rojo. Ahora si te das cuenta, he cambiado la apelación del puesto al cuadrado. No obstante, el atractivo de las plazas de alberca restantes son igual a pesar de ser la copia de la primera. Ahora a pesar de que son la copia del primer cuadrado, ninguna manera están relacionados con el primero porque son simplemente copia y ambas de estas plazas son un elemento individual o diferente a la primero. Ahora aquí es donde la función Crear componente es muy útil. Porque cuando creas cualquier diseño o cualquier proyecto en Figma, habrá muchas reputaciones. Los diseños tienen que seguir un patrón de color particular o digamos un formato particular. Y tiempo muerto, no puedes seguir editando individualmente cada objeto solo para mantener un patrón particular. En ese momento, el componente Create viene muy útil. Ahora aprenderemos a crear trabajos de función componente. Ahora solo creo una copia de este rectángulo rojo. Acabo de presionar Control D en mi teclado. Y arrastraré esta cosa aquí abajo. Ahora tenemos una copia de esta plaza. Y cambiemos el atractivo de esta plaza por solo con fines de demostración. Pero lo voy a cambiar a, digamos verde. Ahora aquí está. Tenemos un rectángulo, otro rectángulo, Es rectángulo verde. Ahora tenemos un rectángulo verde. Y ahora te mostraré cómo funciona la función Crear componente. He seleccionado este rectángulo verde y acabaré de presionar Crear componente. Si observa el color de esta capa en particular se cambia a púrpura. Aquí tenemos un componente, este rectángulo verde es ahora un componente del componente padre. Ahora si voy a crear una copia de este elemento o E5 atada para duplicar este rectángulo verde. Solo mira cómo funciona. Acabo de presionar Control D en mi teclado una vez más. Ahora estamos calificados una copia de este rectángulo, y acabaré de presionar Control D en mi teclado una vez más. Por lo que ahora tengo tres rectángulos verdes. Ahora si trato de cambiar algo con el primero, ese es el rectángulo padre. Se puede ver que este es el rectángulo padre. Si echas un vistazo a la sección de capas, puedes ver que este no fue el primer componente que creamos. Y el rectángulo seis y los rectángulos siete son las copias del primero. Se puede ver la diferencia entre los iconos. Por lo que muestra que el rectángulo cinco del componente padre, y estos son los componentes secundarios. Ahora he seleccionado el archivo rectángulo, y solo intentaré cambiar el relleno de este elemento en particular. Demos clic en Rellenar. Sólo lo cambiaré a, digamos amarillo. Así que ahora si trato de cambiar cualquier color o hacer algún cambio con este archivo rectángulo, los cambios serán visibles también en los dos restantes. Ahí están las copias del archivo rectángulo. Así es como funciona la función Crear componente. Hagas lo que hagas con el primer componente, sigue el componente hijo. Esto no sólo es elegible para las formas, sino también para la textura. Simplemente te mostraré cómo funciona esto para el texto. Agreguemos algo de texto. Sobre el texto. Simplemente seleccionaré este texto y aumentaré el tamaño del mismo. Así que aumentemos un poco el tamaño. También lo hacen nuestros textos y acabo de golpear en Create Component. Ahora bien, este texto es un componente también. Ahora no es necesariamente que al igual que las formas son similares, los textos tienden a ser similares también. Los textos pueden ser cualquier cosa. Así que acabaré de presionar Control D en mi teclado. Se nos crea un duplicado de este texto en particular. Ahora, sólo voy a cambiar este texto aquí mismo. Yoda lo es, este es el segundo elemento y Figma es fácil es nuestro componente padre. Ahora seleccioné el primer texto. Ahora sólo voy a cambiar el relleno de este texto en particular. Entonces así es como funciona la función Crear componente. A pesar de que ambos siguen un patrón similar, no es necesario que sean exactamente iguales. Se va al ejemplo del rectángulo. Una vez más, solo disminuiré el tamaño de este rectángulo en particular. Y lo guardaré aquí mismo. Ahora si hago cambios en el componente padre, vamos a cambiar el campo una vez más. Tienes que hacer doble clic en esto para cambiar el relleno. Ahora acabo de cambiar, lo haremos, digamos rosa. Por lo que aquí se puede ver el color ha cambiado ahora para todos ellos. No obstante, no es necesario que la forma, el tamaño de todos ellos tengan que estar diciendo exactamente que pueden ser de cualquier forma también. De acuerdo, así que ahora pasemos a otra característica interesante de sigma. Acabo de borrar todo esto. Simplemente seleccionarán todos y presionarán Retroceso en tu teclado para que se borre. Ahora solo agregaré otro eclipse. Sólo ve a Eclipse. Simplemente sostendré la tecla Shift para que consigamos un círculo perfecto. Ahora estaremos aprendiendo otra característica interesante de Figma llamada como máscara de usuarios. Por lo que ahora tenemos un círculo perfecto. Simplemente lo mantendré a un costado y no voy a hacer añadir una imagen en algún lugar justo aquí. Así que sólo voy a ir a las formas y sólo voy a hacer clic en Colocar imagen. Muestra esta imagen aquí mismo, por lo que tienes una imagen particular. Simplemente ampliaré esto manteniendo presionada la tecla Mayús en mi teclado y luego arrastrando los bordes. Por lo que tenemos una opción simétrica de redimensionamiento aquí mismo. Ahora lo que quiero hacer es que quiero este logotipo de WordPress aquí están exactamente en este círculo. Quiero que ambos sean parte de lo mismo. Así que solo colocaré esta imagen sobre este círculo. Ahora sólo tienes que ir a la sección de capas, negrita la tecla Mayús en tu teclado, selecciona el eclipse así como la imagen. Y una vez hecho ambos de eso, acaba de golpear la función Máscara de usuarios en la esquina superior del menú para que sea. Ahora puedes ver que hemos usado el elemento no enmascara. Por lo que esta es toda la función de máscara juvenil funciona y puedes arrastrar esta cosa a cualquier lugar que quieras. Y una vez que estás satisfecho, consigues agrupar estos elementos y crear un solo elemento a partir de estos dos. Así que vayamos a la sección de capas, manteniendo presionada la tecla Mayús en tu teclado, seleccionamos el eclipse así como la imagen, y simplemente pulsa Control G en tu teclado. Una vez que hayas terminado, puedes ver ahora esto es un solo grupo. Estos ya no son hacer elementos diferentes. Ahí está. Así es como funciona la función Máscara de usuarios. Entonces ahora tenemos dos círculos y desembolsos. Este segundo círculo sobre el primer círculo irá avanzando hacia otra característica interesante de sigma. Para que puedas ver aquí seleccionado un segundo círculo. Seleccionemos el primero también simultáneamente. Así que solo tienes que mantener la tecla Mayús en tu teclado y selecciona el primer círculo. Ahora hemos seleccionado ambos círculos. Si miras la sección superior, puedes ver esta opción que dice grupos booleanos. Simplemente amplíe esto. Ahora se puede ver que hay muchas opciones diversas como unión Selección, Restar, Intersectar, excluir. También puedes probar estos grupos booleanos. Así que hagamos click en la selección sindical y veamos qué obtenemos. Acabamos de hacer clic en la selección de unión y se puede ver que tenemos forma diferente. Y en este momento, esta es una unión de los dos círculos que creamos. Así que vamos a explorar las otras opciones también. Si quieres ir hacia un paso atrás, simplemente presiona Control Z en tu teclado. Se puede ir al paso anterior. Así que acabaré de presionar Control en mi teclado una vez más. Ahora tenemos dos círculos una vez más. Y no es necesariamente que ambos tengan que estar en una forma idéntica. Pueden estar en cualquier forma que quieras. Así que sólo voy a cambiar la forma de este círculo en particular aquí mismo. Simplemente lo cambiaré a algún eclipse. Y ahora tocaré esto sobre el primer círculo. Vamos a seleccionar ambos. Una vez más. Simplemente mantenga pulsada la tecla Mayús en su teclado y haga clic en el primero. Por lo que ahora hemos seleccionado ambos objetos. Y probemos algunas otras características, como, digamos restar selección que ahora es esa selección se ha restado. Entonces así es como funciona la función de grupo booleano en Figma. Ahora que estamos cubiertos estas partes, vamos a seguir adelante. Acabo de añadir algún texto aquí mismo. Si quieres crear un duplicado de este texto, todo lo que tienes que hacer es seleccionar este texto y presionar el control D en tu teclado. Ahí has creado una copia de este elemento en particular. Y esa es también otra forma de crear un duplicado de estos elementos. Simplemente selecciona el texto que quieras, el texto o cualquier forma que quieras, y no tienes que presionar Control D cada vez. Solo tienes que mantener la tecla Alt en tu teclado. Entonces puedes simplemente arrastrar esta cosa a donde quieras. De acuerdo, por lo que ahora se puede ver la copia de estos textos en particular se ha colocado justo aquí presionando la tecla Alt en mi teclado. Así es como funciona. Del mismo modo, también se pueden crear copias de las formas. He seleccionado esta forma aquí mismo. Acabo de mantener la tecla Alt en mi teclado y arrastraré esta cosa hacia abajo. Puedes crear una copia duplicada fácil de cualquier elemento que quieras. Si quieres volver a los pasos anteriores, eso significa que si quieres deshacer, entonces simplemente pulsa Control y Z en tu teclado varias veces. 6. Prototipos y creación de un proyecto: Ahora sigamos adelante con la parte de prototipado. Y mientras hacemos la parte de prototipado, donde estaremos aprendiendo algunas más funciones y herramientas en Figma. Empecemos. Ahora estaremos creando un prototipo básico, digamos crear un prototipo de una aplicación móvil. Entonces primero lo que tenemos que hacer es agregar un fotograma clave, ir a la opción frame. Haga clic en el marco. Puedes seleccionar la pantalla móvil que quieras. Ahí está, eres nosotros tenemos un cerebro. Y acerquemos. Solo tienes que mantener presionada la tecla Control en tu teclado y desplázate el botón del ratón hacia arriba. Ahí está. Así que ahora vamos a crear un duplicado de este marco porque queríamos crear un prototipo. Entonces solo te mostraré cómo funciona el prototipado. Cuanto mayor es la tecla Alt en mi teclado. Y arrastra esta cosa aquí mismo. Mantendré la tecla Alt en mi teclado una vez más y arrastraré esta cosa que TI, o. Vamos a crear un simple prototipo de aplicación móvil usando estos tres frames. Simplemente cambiaré el color de relleno de esta post-impresión. Vamos a cambiarlo a negro. Ahora agregaremos algún texto al primer fotograma. Así que sólo escribiré. Bienvenido a nuestra app. Si notarás que el tamaño del texto es demasiado grande, así que vamos a reducir el tamaño del texto. En primer lugar, solo seleccionaré el texto y voy a reducir el tamaño de baja tecnología de tu parte. Que es ahora hemos reducido el tamaño del texto y acabaré de escribir, bienvenidos a nuestra app. Colocaré esta cosa, esa idea. Ahora agreguemos algunos campos de texto en forma de botón. Cuando algún usuario haga clic en estos botones, serán redirigidos hacia alguna otra página. Esto es lo que vamos a crear en este prototipo. Hemos agregado un texto y estaremos aprendiendo sobre otra característica importante y más popular de Pigma llamada como maquetación automática. Simplemente seleccione este texto aquí mismo. Entonces todo lo que tienes que hacer es simplemente presionar Shift a en tu teclado. Se puede ver que dice que se ha agregado el diseño automático y se puede agregar esto también. Simplemente habilitaré la opción de relleno para este autodiseño particular para que sea. Y podemos simplemente cambiar el relleno de este elemento en particular. Vamos a cambiarlo a amarillo. Y ahora estamos calificados como un botón para esta aplicación en particular. Y ahora solo seleccionaré esto y reduciré el tamaño manteniendo presionada la tecla K en mi teclado y luego arrastrando esto un poco hacia arriba. Y ahora solo voy a crear un duplicado de esta característica. Así que vamos a seleccionar éste. Mantén presionada la tecla Alt en tu teclado y arrastra esta cosa cerca. Ahora no estoy creando exactamente una aplicación hermosa. Solo te estoy mostrando cómo funciona la característica prototipo y ahora vamos a editar el texto de este elemento en particular nombrará esto como ahí está. Ahora hemos creado dos elementos para esta página en particular. Ahora esta será la página principal de la aplicación, y solo la colocaré aquí mismo. Ahora en este segundo marco, nuestra idea será la página Acerca de Nosotros. Lo que significa que si algún usuario hace clic en este botón About Us aquí mismo, serán redirigidos a esta página en particular aquí mismo. De acuerdo, así que vamos a añadir los detalles en este segundo fotograma. Acabo de cambiar el relleno de este segundo fotograma también. Agreguemos algunos textos. Puedes copiar el texto exactamente de tu también. Acaba de negritar la tecla Alt en tu teclado y arrastra esta cosa aquí mismo, y luego puedes editar este texto más tarde. Simplemente editaré el texto. Simplemente crearé un duplicado de este texto, la tecla Alt en mi teclado. Arrastra esta cosa aquí abajo y solo agregaré una línea simple. Y ahora otra característica importante de Figma o los plugins. Entonces veamos cómo funciona la función de plugins. Ahora, solo agregaré una forma esa idea. Agreguemos un cuadrado por el camino en la página Acerca de nosotros. Ahora si selecciono este cuadrado y pego el clic derecho en mi ratón, se puede ver que obtenemos ciertas opciones. Y entre estas opciones hay una característica llamada como plug-ins. Ahora ya sabes qué son los plugins, pero veamos cómo los plugins ganan Figma. Plugins en Figma realmente hacen tu trabajo y fácil. Hay tantos plugins para muchas funciones. Explorémoslos. Se puede ver que somos plugins administrados y navegar plug-ins en la opción de comunidad, solo hago clic en navegar plug-ins en la comunidad. Desde aquí, puedes instalar los plugins que quieras, no solo los plug-ins siendo más comunidad es una comunidad muy grande. Se puede ver que hay varias características. Hay topografía que es diseño móvil así como ilustraciones de Dui kids y así sucesivamente. También te publican tus propios diseños. Por lo que actualmente estamos buscando plugins. Para que puedas ver la opción de plugins ha sido seleccionada. Ahora vamos a buscar qué plugin. Simplemente buscaré el plugin Unsplash. Ahora el plugin Unsplash nos ayuda a acceder fácilmente a imágenes no copyright. Sea cual sea el diseño que puedas decir este es el plugin Unsplash. Por lo que sólo voy a hacer clic en Instalar. Simplemente haga clic en instalar plugin. Ahora se ha instalado el plugin Unsplash. Volvamos hacia el diseño de página. Ahora si hago clic derecho en este cuadrado una vez más, se puede ver si voy a los plugins, se puede ver que está el plugin Unsplash que acabamos de instalar. Por lo que sólo da clic en él. Se puede ver que el plugin se ha abierto. Entonces a partir de aquí, puedes buscar una imagen que quieras. Entonces ahí está la imagen lunar que quiero, así que sólo le daré click sobre ella. Ahí está. Aquí se puede ver hemos agregado la luna al rectángulo. Entonces así es como funciona el plugin Unsplash. Ahora se ha creado la página Acerca de Nosotros. Vamos a crear también la página Contáctenos. Simplemente cambiaré el relleno de este marco en particular. Así que solo mantén presionado la tecla Alt en tu teclado y arrastra esta cosa aquí mismo. Y si quieres asegurarte de que ambos estén perfectamente alineados, también puedes revisar las dimensiones. De acuerdo, así que sólo tienes que seleccionar el cartel sobre nosotros o la tecla Alt en tu teclado. Y luego solo puedes mover el cursor hacia los bordes. Se puede ver que está la distancia, las dimensiones de este texto en particular. Por lo que dice 1996. Ahora puedes asegurarte de que esto sobre nosotros esté a la misma distancia también. Por lo que sólo tienes que mantener la tecla Alt y luego apuntar hacia los bordes. Aquí puedes ver que no es exactamente similar. Ahora solo sigue manteniendo presionada la tecla Alt en tu teclado y usa los botones de flecha en tu teclado para bordes de las dimensiones. De acuerdo, así que lo cambiaré a 1986. De acuerdo, entonces ahora estos dos están perfectamente alineados. Simplemente cambiaré el texto para contactarnos. Por lo que ahora agreguemos otro plugin a esta página Contáctenos. Así que solo presionaré el botón derecho del ratón. Vamos a Plugins y pulsamos en Browse plug-ins en la comunidad. Ahora vamos a sumar de nuevo un mapa que es plugin de ubicación. Acabo de instalar el primer plug-in aquí mismo. Haga clic en Instalar. Ahora el plugin ha sido instalado, por lo que simplemente pulsa el botón derecho del ratón, ve a Plugins. Y ahora seleccionaremos una función de mapeador domo. Entonces a partir de aquí, puedes agregar cualquier ubicación que quieras. Así que simplemente escribiré cualquier aleatorio, incluso éste está bien. Puede ingresar la dirección de entrada aquí mismo, y luego puede agregar la ubicación. Sólo voy a hacer clic en Hacer mapa. Ahí está. Y ahora puedes cambiar el tamaño de esto también. Así que solo ve a los bordes y el botón k en tu teclado. Desde tu, puedes cambiar el tamaño esta cosa en particular y arrastrar esto. ¿ De acuerdo? Ahora, cuando presiones el botón V del teclado, vuelve a la opción Mover. Ahí está. Y no necesitas crear cosas manualmente cada vez. Diversos diseñadores profesionales han creado los prototipos de aplicación y diversos kits de interfaz de usuario y así sucesivamente. Y todos ellos ya se han subido en la comunidad. Todo lo que tienes que hacer es simplemente presionar el botón derecho del ratón. Ve a Plugins y explora plug-ins en la comunidad. Y aquí solo puedes buscar aplicación móvil. Eso no es que estamos creando solo búsqueda de aplicación móvil. Para que puedas ver esta es la sección plugin, y esa es otra sección llamada como archivos. Simplemente haga clic en Archivos aquí mismo. Y aquí se pueden ver estos son los diversos proyectos, diversos diseños creados por los usuarios y se han subido en la comunidad. Entonces todos estos son archivos lo que significa que puedes copiar y modificar estos archivos. Puedes copiar cada elemento de estos archivos y utilizarlo en tu propio proyecto. Lo que significa que no necesitas crear cosas manualmente cada vez. Sea lo que necesites para crear la página de inicio de sesión automática beta y aplicación, solo puedes buscar en la comunidad, inspirarte en estas personas, y también puedes copiar los elementos individuales. Literalmente puedes importar estos proyectos en tu propia aplicación Figma y luego puedes modificarlos. Ahora digamos que quiero la página de inicio de sesión para mi aplicación. Entonces todo lo que voy a hacer es solo buscar login aquí mismo. Y luego solo puedes hacer click en Archivos. Se pueden ver estos son los diversos archivos disponibles para la página de inicio de sesión. Puedes ver que estos están en páginas de inicio de sesión creadas para aplicaciones móviles o digamos stock tech. Puede seleccionar cuál desea, qué plantilla desea. Tu, este es el primer proyecto. Por lo que sólo voy a hacer clic en él. Aquí puedes ver que este creador ha creado una página de inicio de sesión sencilla para la aplicación móvil, una sola página de inicio de sesión. Todo lo que voy a hacer es simplemente dar click en duplicado porque queremos copiar estos elementos. Por lo que todo lo que necesitas hacer es simplemente hacer click en duplicado para que puedas importar el proyecto en tu propio cerdo mi aplicación. Por lo que aquí se puede ver este proyecto que fue creado por el usuario ahora se está importando en nuestra propia aplicación de escritorio. Entonces lo primero que quiero hacer es que quiero esta pestaña de inicio de sesión en mi propio diseño. Así que solo seleccionaré este login ni el texto, sino el rectángulo también junto con él, porque quiero toda la pestaña de inicio de sesión. Así que solo selecciona el rectángulo también usando la tecla Mayús y luego crea un grupo usando Control G en tu teclado. Una vez que golpeas el control Z, puedes ver los dos los elementos se agrupan en uno. Simplemente pulsaremos Control C en nuestro teclado para copiar esta pestaña de inicio de sesión. Y luego volveremos a nuestro propio proyecto. Y luego solo seleccionaremos el marco uno y luego lo pegaremos aquí mismo. Ahora la pestaña de inicio de sesión también está disponible en nuestro proyecto. Simplemente lo copiamos del usuario. Ahora queremos estos iconos también, los iconos sociales de inicio de sesión en nuestro proyecto. Simplemente seleccionaremos estos iconos enteros. Volveremos a pulsar Control G en nuestro teclado para crear un grupo. Y acabaremos de golpear Control C para copiar todos estos iconos, el grupo juntos. Entonces volveremos a su propio proyecto, y luego acabaremos de golpear Control V en nuestro teclado. Así es como funciona. Hace que nuestro trabajo sea mucho más fácil. Así es como funciona toda la función de copia. Y es muy útil. Ahora que hemos terminado con la parte de diseño. Este no es exactamente un diseño hermoso. Solo quería mostrarte un diseño básico que podamos seguir adelante con el prototipo. Ahora se puede ver que estamos terminados con la parte de diseño. Así que pasemos a la sección prototipo. Ahí se puede ver esta es la sección prototipo además del diseño. Ahora comprendamos el flujo de este prototipo. Cuando un usuario hace clic en el botón Acerca de nosotros, queremos que el usuario sea redirigido al segundo fotograma. Esa es la página Acerca de nosotros. Esta es la primera parte. Y cuando el usuario hace clic en el botón Contáctenos, queremos que sea redirigido al tercer fotograma. Esa es la página Contáctenos. Este es el flujo de nuestro prototipo. Ahora lo que haremos es crear este prototipo. El flujo del proyecto es ahora claro. Vamos a crear el prototipo. Ahora vamos al botón Acerca de nosotros. Aquí se puede ver hay un punto justo aquí cerca de lo anterior este botón. Por lo que sólo vamos a hacer clic en él y arrastrar esta cosa al segundo fotograma. Lo que significa que cuando un usuario haga clic en el botón Acerca de nosotros, se le redirigirá al segundo fotograma. Gracias de igual manera por el botón Contáctanos, lo que tenemos que hacer es arrastrar esta cosa que se ha acercado al botón Contáctenos. Tenemos que arrastrar esta cosa al tercer fotograma, Esa es la página Contáctenos. Así funciona el prototipo. Es bastante simple, Es bastante fácil. Así funciona el prototipo framework. También puedes editar las animaciones sobre cómo quieres hacerlo. Por lo que aquí se puede ver hemos creado dos interacciones para el prototipo. El botón Acerca de nosotros y el botón Contáctenos. Ahora no los puedes ver porque están bastante cerca, así que los haré en un poco. Para que puedas ver que estas son dos interacciones separadas. El sobre este botón va al segundo fotograma, Esa es la página Acerca de nosotros. Y el botón Contáctanos pasa por el tercer fotograma. Esa es la página de contacto con nosotros. También puedes crear animaciones aquí mismo. Ahora esto fue sólo una interacción unidireccional que aprendimos. Necesitamos crear una interacción inversa también. Simplemente agregaré un texto que diga anterior porque aprendimos cómo podemos ir desde el botón Acerca de nosotros a la página Acerca de nosotros. Pero y si el usuario quiere volver a la página de inicio desde lo anterior de esta página. Así que he creado un texto que dice Anterior, solo agregaré auto-layout haciendo el clic derecho sobre él. Por lo que ahora hemos agregado un auto-layout también, y sólo voy a cambiar el relleno. Demos un color a esta película que también creamos un botón anterior. Entonces estaremos usando este botón para el prototipo también. Ahora sólo voy a copiar este botón al tercer fotograma también. Ahí está. Ahora tenemos el botón anterior con el tercer fotograma también. Se puede ver además del botón anterior, hay un punto ahí mismo. Simplemente arrastraremos esta cosa y llevaremos de vuelta al primer fotograma que muestra una interacción que al hacer clic en el botón anterior, se le redirige al primer fotograma. Esa es la página principal. Por lo que de igual manera para el siguiente botón Anterior hará lo mismo. Se puede ver ahí está el punto. Simplemente arrastra esta cosa y llévala de vuelta al primer fotograma. Esa es la página principal. Ahora ya hemos terminado totalmente con nuestro prototipo. Creamos una interacción hacia adelante y también se nos ha creado una interacción inversa. Para siempre la aplicación. Ahora veamos cómo funciona nuestro prototipo. Así que ahora que terminamos con prototipo, se puede ver que está el botón Play. Por lo que sólo da clic en él. Aquí. Esta es nuestra página de inicio. Si hace clic en Acerca de Nosotros, será redirigido a la página Acerca de Nosotros. Esta es la página Acerca de nosotros. Y si quieres volver, basta con dar click en anterior. Si haces click en anterior, ahí está, vuelves a la página de inicio. De igual manera para el botón Contáctenos, si sólo hace clic en el botón Contáctenos, será redirigido a la página de contacto. Y si haces click en anterior, serás redirigido de nuevo a nuestra página de inicio. Entonces así funciona la previsualización del prototipo y también puedes compartir este prototipo. Simplemente haga clic en el botón Compartir. Puedes enviarlo a cualquier amigo. Puedes enviarlo a cualquier correo o a cualquier usuario de Figma también. También puedes publicarlo en la comunidad Figma también. Simplemente haga clic en Compartir. También puedes publicar a la comunidad Pigma. Esos también pueden inspirarse en su proyecto. Pueden copiar los elementos del proyecto, igual que cómo podemos duplicar proyecto de otros y después modificarlo. Entonces todo esto se trata de Figma. Esto es lo básico de sigma. Aprendimos algunas características básicas, aprendimos algunas características avanzadas. Aprendimos a hacer prototipos también. Eso es todo por esta sesión, y eso es todo por este curso. Te recomiendo a ti o personas que visites regularmente la comunidad Figma, aprendas diversas cosas de otros usuarios que han publicado sus diseños. Siempre hay cosas nuevas que aprender en Figma. Siempre puedes visitar la comunidad Figma. Entonces puedes duplicar sus proyectos y entender cómo han creado estos diseños y proyectos. Entonces eso es todo por este curso. Ojalá os hagan muy bien en Figma. La mejor de las suertes, y muchas gracias.