Figma para interfaz de usuario y experiencia de usuario UIUX

1. Introducción a Figma: Hola a todos y bienvenidos a nuestra clase de Figma for Learning UI UX Si planeas aprender la interfaz de usuario y la experiencia del usuario desde el principio, entonces estás en el lugar correcto. Porque cubriremos en esta clase desde el nivel básico hasta un nivel avanzado del uso de esta aplicación en particular. Esta es una clase de nivel principiante. Si no tienes experiencia previa, entonces solo puedes unirte a esta clase y podemos aprender juntos. Primero, echemos un vistazo a lo que aprenderás de esta clase. Primero, les estaré contando la introducción, como lo que hace esta aplicación Figma, y cómo es mejor que cualquier otra aplicación que haga UI UX diseñando Después de eso, les estaré contando sobre el espacio de trabajo y también la interfaz, ¿de acuerdo? En cualquier aplicación o en cualquier software, si estás familiarizado con el espacio de trabajo en la interfaz, nos será bastante fácil trabajar en ese mismo espacio. A continuación, les estaré contando sobre todas las herramientas básicas en Figma, qué es lo que pueden usar Bien, les estaré diciendo cómo pueden mover su objeto o cómo pueden crear un marco, seleccionar un fotograma en particular y escalarlo según ustedes mismos. Y también te mostrará cómo puedes importar imágenes, videos y diferentes tipos de formas. Bien, después de eso, les estaré diciendo chicos cómo pueden usar las páginas. A veces necesitamos crear más de dos páginas, en ese caso, cómo vas a administrar las páginas y todas las funcionalidades relacionadas con las páginas. Te lo estaré diciendo a todos después de eso, aprenderás prototipado en Figma, lo que te ayudará a hacer tu propia aplicación de diseño móvil o tu página web Bien, para que puedas diseñar tu propia página web o tu aplicación móvil que puedas conectar todas estas juntas y dar un buen resultado. Después de eso, les estaré contando algunas de las opciones de flexibilización que pueden usar Y algunas de las animaciones de prototipos como cómo se puede hacer animación en prototipado Te voy a descontar después de eso, te diré cómo puedes importar imágenes y usarlas en tu diseño de UI UX, ¿bien? Se pueden recortar esos y muchos más. Bien, entonces la siguiente clase es sobre eso. Solo sobre enmascarar, sobre cómo puedes recortar imágenes de todos los extremos y diferentes formas de hacerlo, ¿de acuerdo? También les voy a contar chicos sobre diferentes plug ins de imagen, lo que todos se pueden usar. Bien. Después de eso, hay opción llamada componente y efectos. Les diré chicos cómo usar el componente y también cómo pueden poner diferentes tipos de efectos en su archivo Figma. Bien, por último, les estaré diciendo cómo exportar sus imágenes, que han importado en su archivo. Entonces les diré chicos cómo pueden exportar sus imágenes desde la aplicación Figma Bien, una vez finalizada esta clase, podrás crear tu propia aplicación móvil y página web. Y también tendrás tu propio color, balette y degradados Podrás adquirir un buen conocimiento de la coloración en el diseño web y también podrás hacer buenos prototipos como llegarás a un nivel avanzado de uso de esta aplicación Después de eso, también podrás seleccionar imágenes para hacer botones, y también hacer la fuente de la página web. Básicamente, podrás diseñar una página web en definitiva, ya que este proyecto es como una clase basada en proyectos. Durante el aprendizaje tendrás proyectos de clase. Entonces, lo que aprendas, podrás participar en clase. Puedes hacer práctica mientras estás aprendiendo. Tendrás recursos de apoyo en esta clase. Te será más fácil aprender durante el aprendizaje. Si te enfrentas a algún problema o si tienes alguna duda, entonces no dudes en preguntarme. Siempre estoy ahí para que te ayudes. Empecemos a aprender Figma para IU juntos. 2. Qué es Figma: Hola a todos, y les damos la bienvenida a todos al tutorial sobre Figma. Aquí estaremos aprendiendo qué es Figma. Y el primer capítulo va a ser Introducción a Figma, donde les voy a contar chicos de qué se trata básicamente esta aplicación, cómo básicamente podemos usar este software y muchas cosas más aquí Bien, así que aquí si eres un principiante y tratando de aprender el diseño de UI UX por primera vez, este es el mejor curso para ti donde puedes aprender eso. Después de eso, les estaré diciendo que cómo funciona realmente esta Figma Por lo que Fima ha revolucionado el proceso de diseño. Ofreciendo una plataforma colaborativa basada en la nube con potentes funciones que atienden tanto a principiantes como a expertos Si eres un aspirante a diseñador de UI UX, un gerente de producto o un entusiasta creativo, este tutorial te equipará con las habilidades para navegar por el mundo Figma y producir No perdamos el tiempo, y empecemos con esta clase y el primer capítulo sobre Figma aquí Como pueden ver, he buscado Figma en micro, Esta aplicación aquí Este es el primero, y este es el archivo donde vamos a trabajar. Este archivo realmente funciona en ambos. Si estás usando un producto Apple o incluso Windows, también puedes usar este archivo allí. En nuestro smartphone también, podemos usar esta aplicación en particular para mí. Primero, voy a ir a éste. Bien, una vez que vengan aquí, ustedes pueden ver la interfaz aquí. Bien, aquí sí tenemos dos tipos de cosas, una figma y otra con figma jam. Aquí, todo lo que puedes hacer aquí, puedes hacer en línea una tabla, obtienes teats de planeación estratégica También puedes crear diferentes tipos de diagramas. Aquí. También puedes hacer trabajos de desarrollo, diseñar prototipos. Bien, aquí, si quiero descargar esta aplicación en particular, puedo descargar desde aquí. Pero primero, veamos qué es lo que podemos conseguir aquí. Desde aquí, puedo ver las descripciones generales, puedo ver las opiniones de los clientes, y también diferentes tipos de recursos con respecto a esta herramienta de diseño de UI UX en particular Bien, Esto es similar con un XD. He usado esta aplicación de comentarios desde hace bastante tiempo. Lo que puedo diferenciar es que esta herramienta es bastante fácil de usar. Con esta aplicación o con esta herramienta normalmente podemos trabajar un poco mejor ya que está recibiendo nuevas actualizaciones. Ellos sí tienen bastante buenas actualizaciones desde aquí. Bien, aquí puedo ver diferentes tipos de plantillas, plug in y todas las prácticas biblioteca de recursos. Si quiero ayuda en cualquier cosa, puedo ir al centro de salud y pedir cualquier ayuda. Como quiera, puedo decir mi problema. Y aquí están los recursos de la comunidad. Bien, Aquí también tengo muchos creadores de la comunidad desde donde puedo referir su trabajo y aprender diferentes tipos de cosas. Al igual que en este diseño UU, necesitamos entender básicamente cómo queremos diseñar nuestro. Si referimos a esas personas y vemos su trabajo, básicamente vamos a tener una mejor idea sobre el diseño de UU. Y aquí sí tenemos diferentes grupos de usuarios y también algunos programas educativos de cómo acostumbrarnos con esta aplicación en particular. También puedo ver diferentes tipos de eventos y livestream los cuales son conducidos por Figma Como ya he iniciado sesión, hay una opción llamada Cerrar sesión. Si quiero Cerrar sesión, puedo cerrar sesión desde aquí. Bien, si voy aquí abajo, sí tienen un resumen de cómo es esto. Así que muchas personas pueden trabajar en esta aplicación o en una carpeta juntas. Siempre podemos trabajar en la última versión. Y también podemos guardar nuestro trabajo en las bibliotecas del equipo de Cloud, que os estaré explicando más adelante y también en detalle. Bien, aquí sí tengo todo esto. Se puede ver cuales todas las marcas son sus socios. Bien, aquí está toda la página. Y déjame ir y descargar Figma desde aquí. Bien, entonces voy a hacer clic en descargar. Y una vez que haga clic en descargar, este Figma es básicamente tener dos versiones, bien. Cuenta con una versión gratuita así como una versión de pago. Si estás empezando con el diseño gráfico o estás empezando por la interfaz de usuario por primera vez, entonces te voy a sugerir que comiences con la versión gratuita y básicamente después lentamente ustedes pueden pasar a la versión paga. Porque pagó versión. algunas características premium que son bastante útiles cuando trabajas regularmente en esta aplicación. Pero si estás usando un ser temporal o para un proyecto en particular, uno o dos proyectos, y después de eso, no vas a usar eso para eso para practicar. Y toda la versión gratuita también es buena porque también tienen muchas características diferentes. Como pueden ver aquí, si quiero descargarlo en un escritorio, sí tengo opción para un SO y también para Windows. Si quiero descargarlo en mi iphone o ipad, puedo dar click aquí, y aquí está la opción ipad aquí. Yo sí tengo para Android, si quiero tomar diferente tipo de teléfonos, básicamente el instalador telefónico es como, me va a dar diferentes tipos de teléfonos los cuales puedo usar en Figma. Así que podemos descargar éste también para OS y para Windows es éste. Lo que voy a hacer, sí tengo un portátil con Windows, que estoy usando ahora mismo. Simplemente voy a hacer clic aquí, Dest para Windows. Una vez que haga clic aquí, puede ver que se está descargando en la parte superior aquí. Podría tomar algún tiempo, que es alrededor de 100 B, y me llevará alrededor de un minuto descargarme. Entonces aquí puedes ver sobre esto, como si quiero ver todos estos recursos, si quiero compararlos con otras apps. Bien, entonces estas son algunas aplicaciones competitivas que son Sketch, como ya te dije, Obex D y Framer diseñan en Windows Estudio Miro Invasion. Entonces estas son algunas de las aplicaciones que hacen lo mismo, que son solo UI, UX designer app. Entonces puedo usar los de aquí o compararlos y ver cuál es la diferencia entre estas aplicaciones y esta figma si quieres comparar Bien, si quiero explorar eso, lo que puedo hacer, lo puedo ver desde aquí. Y si quiero usar la versión paga, veamos cuál es el precio. Bien aquí. Si vengo aquí, ustedes pueden ver si estoy usando la versión gratuita, voy a estar consiguiendo tres archivos Figma y tres Fija, los cuales puedo colaborar con otros en el trabajo Y voy a tener archivos personales ilimitados, colaboradores ilimitados, plug ins, plantillas, y también puedo descargar la aplicación móvil. Comienza desde $12 mensuales si estoy usando el profesional Bien, aquí obtendrás archivos Figma ilimitados, historial de versiones ilimitado, biblioteca de equipos, prototipos avanzados y modo Ve, que está en beta Lo puedo descargar aquí en este si estoy eligiendo el profesional. También puedo obtener algún descuento si puedo mostrar comprobante de si soy estudiante o educador, lo mejor si eres estudiante puedes simplemente subir tu cédula de identidad o cualquier documento de tu colegio, universidad o escuela después de eso Si vengo aquí, $45 mensuales para ello es la organización Figma. ¿Bien? Así que aquí obtendrás estas bibliotecas, administración centralizada de archivos, inicio de sesión único y todo esto, ¿de acuerdo? Y esta es la premium, que son los 75 dólares por editor Por mes, obtendrá una pieza de palabras dedicada, sistemas de diseño avanzados, acceso para invitados, restricciones de acceso a la red y enlaces públicos que caducan Vas a estar consiguiendo todo esto aquí, esto se trata, Figma es lo que empieza aquí Podrás conseguir lo mismo. Reproductor de música, si estoy usando el gratuito para Figma Professional es de $3 Organización Fija, son cinco, y la empresa es de $5 por editor, por mes según su necesidad Ustedes pueden ver cuál va a ser bueno para ustedes, es beneficioso para ustedes. He descargado esta, ahora iré a mi archivo, intentaré instalar esta aplicación en particular en mi PC. Una vez que he instalado esa aplicación en particular, me redireccionó directamente a esa aplicación Bien, entonces aquí voy a ir a la casa, y como pueden ver aquí, tengo todo este trabajo, ¿de acuerdo? Les voy a estar enseñando todo esto, lo cual he hecho aquí. Ustedes pueden ver que he hecho todo esto. Les voy a estar enseñando a ustedes cómo hacer aquí Desde aquí. Como puede ver, esta es la campana de notificación. Puedo hacer clic aquí y ver si tengo alguna notificación aquí. Este es el expediente reciente. En la que has trabajado. Se guardará aquí aquí. El equipo es bastante importante en esta Figma. ¿Bien? Así que básicamente, supongamos que estoy haciendo una lección en particular o un proyecto en particular, ¿de acuerdo? En eso puedo tomar diferentes personas o puedo incluir a tantas de ellas, y podemos trabajar en un solo expediente, tantos de nosotros en conjunto, ¿bien? Entonces esta es una de las cosas más grandes que es bastante útil si tengo algo así me llevará alrededor 20 a 30 horas y quiero terminar ese trabajo en tres días, cuatro días. Tal vez pueda llevar a dos o tres personas conmigo y juntos podamos trabajar ahí, compartir nuestras ideas, acostumbrarnos a esa app en particular y terminar nuestro trabajo. Entonces aquí puedes ver si tengo algún equipo o no. Y aquí está el borrador donde se está salvando todo mi trabajo. Bien. Y aquí está la app reciente. Aquí lo puedes conseguir, estás verificado para Educación Fema Y aquí se puede ver listo para actualizar un equipo de forma gratuita. Bien. Entonces como he solicitado educación Fema uno Así que ahora puedo aquí como ya he creado estos equipos, como pueden ver, sí tengo diferentes equipos aquí. Una vez que baje esto, ya pueden ver que sí he hecho algunos proyectos de equipo. Entonces, permítanme borrar esto de aquí. Déjame borrar, escribiré BC. Así es como puedes eliminar un equipo. ¿Bien? Y de la misma manera, voy a borrar esta también. He nombrado a éste como Robert. Voy a eliminar el equipo aquí de nuevo. Este también voy a borrar solo para mostrarles a ustedes que como realmente podemos crear un equipo. Este es el proceso de cómo podemos eliminar realmente un equipo. Déjame borrar. Sí, este equipo también está siendo eliminado. Ahora a partir de aquí, en realidad puedo crear un equipo libre. A partir de aquí. Una vez que quiera crear un equipo primero, tengo que venir aquí, hacer clic en Crear un equipo y solo lo nombraré. Supongamos que lo nombraré como Mark. Bien, Y voy a hacer clic en Crear equipo. Aquí puedes ver otra página que apareció aquí. Aquí puedes agregar a tus colaboradores y lo que puedo poner su correo electrónico aquí en estas casillas. Como te he dicho que en esta versión sólo puedo agregar tres de ellos en mi equipo, si estoy usando la otra versión, que es la de pago , puedo agregar más. No voy a poner ningún correo electrónico aquí para eso. Yo sólo me quedaré con esta parte por ahora. Aquí ustedes pueden ver que sí tengo esta opción terminada de configurar y sólo voy a hacer clic sobre esto. Acepto Higos Término Servicio de Petróleo, y haré clic en la opción de actualización completa. Aquí ustedes pueden ver que se está creando el equipo. Este es el proyecto Team que tengo aquí. De hecho puedo verlo así en un formato mínimo o también en un formato de cuadrícula. Voy a cancelar esta. Ahora aquí puedes ver en mi página de inicio que sí tengo un equipo en particular. Aquí hay otra opción. Si quiero crear un nuevo proyecto, puedo agregar un nuevo proyecto o puedo consolarlo también. Bien, sólo puedo consolarlo así. Bien, entonces si vengo aquí y ahora les estaré enseñando a ustedes cómo será el espacio de trabajo si hago clic en este de aquí. Puedes ver que este es el espacio principal donde ustedes van a estar trabajando en Figma desde aquí encima ustedes Si hago doble clic en este desde aquí, realmente puede cambiar o cambiar el nombre de este archivo de proyecto en particular. Bien, déjenme nombrar a éste como proyecto uno. Y voy a hacer clic en Entrar desde mi teclado aquí, puedes ver que este está guardado o renombrado como Proyecto Uno Aquí ustedes pueden ver que sí tengo el menú principal. De aquí sí tengo la opción de archivo y tantas cosas que os estaré explicando chicos en etapas posteriores de la clase. Esta es la herramienta de selección, esta es la herramienta Marco, esta es la herramienta de forma, esta es la herramienta de creación que incluye el pecado y la herramienta de lápiz. Aquí, sí tengo la herramienta de texto y aquí los recursos, la herramienta de mano. Si quiero agregar algún comentario, puedo agregar un comentario usando este cuadro. Todo esto se lo voy a contar chicos en las etapas posteriores de la clase. Todo aquí, cada herramienta y sus usos. Les voy a estar diciendo chicos este es el panel de control desde donde puedo elegir el diseño y también exportar mis medios. Después de trabajar, sí tengo algunos de los prototipos que les voy a estar mostrando chicos cómo se hace Voy a estar diciéndoles cómo hacer prototipos también después de eso También puedes ver que sí tengo estilos locales como ya te he contado cómo podemos exportar. Tenemos diferentes formatos, PG, JPG, SVG y PDF. Eso también lo puedo ver. Aquí sí tengo la opción de vista previa. Esto es lo principal, lo que vamos a estar viendo, que es la capa. Bien, entonces mientras trabajamos en Figma, deberíamos usar capa y tendido es lo principal Entonces les voy a estar contando sobre la colocación, cómo podemos agregar diferentes páginas desde aquí. Toma dos o tres páginas y descubre cómo crear marcos. Entonces todo lo que vamos a estar aprendiendo en el siguiente tutorial. Así que hasta que espero que ustedes hayan entendido cómo podemos realmente descargar e instalar la aplicación Figma. Y si no quieres descargar también, también puedes trabajar desde el navegador. Aquí como te he mostrado cómo podemos agregar, esta es la opción Activos. Así que también les voy a mostrar el uso de esto. Espero verlos a todos en el siguiente tutorial sobre Figma. Cuídate. Y adiós a todos. 3. Espacio de trabajo e interfaz: Hola a todos, y bienvenidos a todos a otro tutorial sobre Figma. En última clase, aprendimos sobre lo que es Figma. Y también les he mostrado chicos el espacio de trabajo desde donde se puede trabajar. En la última clase, les di un resumen de cómo es, pero en esta clase voy a mostrarles el espacio de trabajo en la interfaz en detalle que ustedes pueden entender una vez que hayan hecho el trabajo, cómo se verá realmente o cómo funciona esto en realidad. Una vez que entiendas el espacio de trabajo en la interfaz, será fácil para ustedes trabajar en esa aplicación en particular. No perdamos el tiempo aquí, y empecemos con esta clase en particular aquí. Como ustedes pueden ver en la página principal de mi aplicación Figma, les he explicado sobre todo esto Lo que voy a hacer es estar tomando un proyecto Figma completo hecho para mostrarles cómo se ve realmente y qué se puede hacer ahí todo Para eso, solo voy a ir a la comunidad, a la comunidad Figma, ya he dicho lo que puedes hacer todo lo que puedes hacer Permítanme mostrarles cómo se ve realmente aquí en la comunidad Figma Tendrás tantas cosas aquí como equipo de aspiración canta sistemas de diseño. Si quieres ver algún desarrollo de página web o un desarrollo de página móvil, puedes verlo desde aquí. También nos han mostrado enmarcando. Desde aquí puedes descargar diferentes iconos los cuales son gratuitos desde aquí. Bien, para usarlo en tu trabajo. Hay tantas cosas que aprender de esta comunidad de Figma Como todos los aprendices avanzados o los avanzados, los que trabajan usando la Figma, a veces hacen subir su trabajo aquí para mostrar cómo es útil esta aplicación Déjame bajar y ver como sí tengo diferentes archivos aquí, solo voy a ir a éste y veamos qué hago todo lo que hago, tenerlo aquí. A partir de aquí, lo que voy a hacer, bajaré aquí, trataré de ver qué componentes tengo todos los componentes. Bien, déjame tomar una app sencilla para mostrarles aquí chicos. Bien. Estaré abriendo esta en mi aplicación. Como pueden ver esto es carga aquí. Esta es básicamente una reservación de cita para Dr., aplicación móvil. Bien. Ya veremos qué opciones tengo aquí. Bien, voy a abrir éste en Figma. Voy a estar usando una de mis cuentas aquí. Si quiero editar el archivo, puedo editar, pero no estaría editando solo para mostrarles la interfaz de cómo se ve realmente cuando esta en realidad es bastante grande. Bien, con mi herramienta de mano, voy a estar moviendo esta. Déjame ir aquí en el inicio y solo voy a acercar aquí. Bien, entonces espero que ustedes puedan ver ahora cómo en realidad logró hacer esto paso a paso. Como aquí puedes ver esta es la primera pantalla, y una vez que hagas clic aquí, serás redirigido a esta página aquí Esta opción podría tener algo más aquí. Sí tienes los pasos, si haces clic en empecemos y muchos más. Bien, aquí como les he dicho chicos sobre los fundamentos de todo esto, una vez que hayan terminado con el trabajo o una vez que estén haciendo el trabajo, así es como se verá realmente. Como ustedes ya pueden ver aquí. Así se verá, bien, a partir de aquí. Si quiero tomar algo, supongamos que quiero llevar esta página en particular aquí y quiero moverme. Puedes ver aquí, este será seleccionado automáticamente porque este se encuentra bajo este marco en particular como. Y si he seleccionado otro fotograma, si me alejo , podré ver cuál he seleccionado. Así es como realmente funciona. Será mejor si les muestro chicos un proyecto en el que pueda encajar todas esas cosas en una en mi pantalla. Porque este proyecto es bastante vasto como puedes ver. Pero es un proyecto bastante bueno cual se hace aquí y un proyecto total. Lo que voy a hacer es o bien puedo moverlo desde aquí, ¿de acuerdo? Para mostrarles chicos. De lo contrario, sólo puedo quedarme con esto aquí abajo. Como puedes ver, puedes cambiar el posicionamiento y también te mostrará las alineaciones, ¿bien? Así es como puedes moverte. Todo depende de ti, ¿de acuerdo? Al igual que como es adecuado para ti. De hecho, puedes alinearlo lado a lado o en vertical o también de manera horizontal. Depende totalmente del Reino Unido. Estas son las capas. Como ustedes pueden ver, estos se llaman frames, que puedo crear usando este botón de aquí y las teclas de método abreviado. Les voy a contar todo esto, cómo podemos crear un marco, y cómo podemos poner su trabajo en eso, cómo podemos configurarlos realmente. Ya les voy a decir chicos. Déjame ir a otro archivo de la comunidad Figma donde voy a poder mostrarles chicos, una vez que hicieron un proyecto en una capa, cómo básicamente se ve eso aquí Encontré un archivo de diseño, cual voy a estar eligiendo para mostrarles brevemente lo que se puede hacer aquí. Voy a abrir éste en Pigma, como el último, solo lo continuaré con mi correo electrónico aquí Ustedes pueden ver esta es la página, así es como pueden comenzar a hacer su página web, básicamente desde aquí. Como ustedes ya saben, pueden comenzar a crear su página. Como puedes ver, por defecto vendrá la página número cinco, justo después de la primera página. Lo que voy a hacer, no voy a estar creando ninguna página, pero para mostrarles cómo podemos realmente crear una página, voy a hacer clic aquí. Esta página. Como pueden ver, ya les he dicho que estas son solo capas diferentes. Ahora estoy en mi segunda página. Esta es la tercera página, y esta es mi cuarta página aquí. El que creó este, le ha dado nombre a este marco en particular que no se confunde ni a páginas particulares en consecuencia. Estas son diferentes capas debajo de cada capa. Ellos sí tienen diferentes opciones aquí. Supongamos que quiero seleccionar esta cosa en particular por dentro. Déjame simplemente acercar usando mi control y mi mouse. Solo estoy arrastrando adentro con mi herramienta de mano. Yo sólo voy a venir aquí. Bien, Para darles una mejor vista de la pantalla, supongamos que seleccioné este fotograma en particular. Ahora quiero mover este marco hacia la derecha de aquí. Ya ves que sí tengo la opción aquí, La X, Y con abrazo. ¿Bien? El ángulo de rotación, las curvas, todo lo que puedo cambiar desde aquí, y también las restricciones de diseño automático. Tengo la opción de cuadrícula de capas desde donde puedo elegir diferentes estilos de cuadrícula y también puedo navegar desde las bibliotecas de navegación. Una vez que esté conectado con mi Wi Fi o mi conexión a Internet, también puedo acceder a esos, que están disponibles de forma gratuita. De lo contrario, lo que puedo hacer es que también puedo crear mi propio estilo de cuadrícula a partir de aquí. Como pueden ver, si quiero eliminar, simplemente voy a hacer clic en esta. Yo también tengo la capa, ¿qué tipo de capa quiero aquí? Yo sí tengo capa diferente. Como pueden ver, esto sólo me está dando un adelanto. Todo lo que tengo, supongamos que tengo aquí dos o tres capas. Una vez que ponga una capa encima de otra, cómo quiero que se vea, les estaré mostrando todo eso chicos. Bueno, también puedo seleccionar el relleno significa el color. ¿Bien? Supongamos que he seleccionado un color rojo, me va a dar este tipo de colores desde aquí. Bien, voy a estar tomando esto como blanco solamente. No quiero arruinar esto desde aquí. Puedo cambiar la opacidad. Si tomo 50 y hago clic en, bien, puedo cambiar la opacidad Y también puedo disminuirlo si quiero disminuirlo más. Si quiero ver eso y ver la diferencia aquí, ustedes pueden ver la diferencia aquí mismo. Supongamos que pongo aquí por texto o una caja en particular, o un color en particular en eso. Si quiero cambiar el trazo de ese texto en particular, todo lo que puedo hacer, puedo simplemente cambiar el color del trazo desde aquí. También puedo aumentar el trazo, como si quiero aumentar el trazo desde el interior, desde el exterior o desde el centro, puedo hacerlo desde aquí también. También tengo la opción de efectos. A partir de aquí, sí tengo diferentes efectos. Sombra paralela, sombra interior, desenfoque de capa, desenfoque de fondo. Aquí se puede ver de lado en el desenfoque de capa, aparece como esa sombra interior y esta es la sombra paralela. Después de trabajar, también puedo exportar, como ya les he dicho chicos en la última clase, aquí está la opción de alineaciones. Yo puedo hacer eso. Déjenme mostrarles sobre esta X e Y. Supongamos que la voy a aumentar, es simplemente pasar a la derecha. la misma manera si quiero moverlo boca abajo, puedo hacerlo desde aquí también. También como pueden ver, a partir de aquí puedo cambiar las esquinas. Además, si quiero rotar esto, puedo rotarlo en consecuencia de la manera que quiera. Yo puedo hacer todo esto. Yo sólo lo pondré como cero. Sí. Una vez que hagamos este trabajo, los muchos cuadros de texto más harán que el bebé ponga más texto o los marcos harán. Podremos aquí, ustedes también podrán obtener un adelanto a partir de aquí. Como pueden ver, después de todas y cada una de las opciones, también tengo la tecla de atajo para eso obtendré la vista previa si hago clic en el botón de página arriba y también el espacio. Al mismo tiempo voy a conseguir la vista previa. Solo para mi teclado, no tengo que usar arco, pero siento que usar arco es bastante cómodo. Yo sí uso eso. También puedo compartir mi trabajo particular. De hecho puedo invitarlos usando cualquier correo electrónico a quien quiera enviar También puedo seleccionar eso. ¿Pueden editar mi obra en particular o solo pueden ver? Bien, después de eso, si copio el enlace y puedo ir y compartirlo en cualquier medio usando el correo electrónico o también usando cualquier otra plataforma de redes sociales como en Whatsapp Messenger, así, solo puedo darles el enlace copiando y pegando en su página aquí Esta es la estratificación. Como pueden ver, después de crear un marco, sí tengo toda esta opción dentro que en realidad puedo poner diferentes componentes debajo de eso. Como sí tengo fotos de marco, también tengo este marco. Ya pueden ver, espero que ustedes hayan entendido lo básico de para qué se está utilizando una capa. Además, aquí veremos la opción de activos aquí. Si vengo, realmente puedo navegar por diferentes tipos de activos, o simplemente puedo abrir la biblioteca del equipo, o puedo ver los componentes locales. Lo que todos se están utilizando aquí en este archivo en particular o en este proyecto. Yo sólo puedo verlos desde aquí. Como se puede ver este trabajo en particular bastante pulcramente y proyecto bien hecho. Puedo ver esto. Si quiero modificar algo desde aquí, puedo modificarlos de acuerdo a la manera que quiera, ¿de acuerdo? Como estoy seleccionando aquí, ustedes también pueden ver en mi pantalla ese icono en particular está siendo seleccionado. Bien, si hago clic en esto, ustedes pueden ver que esto todos están siendo seleccionados. Así es como en realidad podemos intentar diseñar o simplemente mantener una capa y un seguimiento de todos los iconos que he usado en este proyecto. Y aquí de nuevo sí tengo los componentes. Bien, esta es la tercera página. Esta es la última página aquí. ¿Bien? Aquí, si quiero cambiar algo, puedo seleccionar esta. Puedo seleccionarlo solo me redirigió a esa página. No quiero eso. Voy a borrar esto. Yo sólo voy a cerrar este de aquí. Si quiero seleccionar algo puedo seleccionar como desde mi botón. Si quiero eliminar esto, puedo eliminarlo y deshacerlo nuevamente. Encima también tengo estas opciones aquí como ustedes pueden ver. Si quiero editar algún objeto, si quiero crear un componente, y también si quiero usar esta capa en particular como máscara aquí. Si quiero crear un enlace, puedo dar click en esta opción e intentar crear un enlace como este. Bien, como ya te dije, en caso de cualquier texto, hecho puedo cambiar el tamaño del texto desde aquí. Así que voy a cerrar ésta. Puedo seleccionar el texto realmente sacado o puedo modificar o editar el texto de acuerdo a mi necesidad. También color de relleno, exportación de trazo de relleno. Esta es la opción de prototipado. Desde esta opción de prototipado, puedo ir a esto y les estaré mostrando chicos en breve de cómo pueden hacer prototipos Espero que ustedes hayan entendido esta clase de espacio de trabajo y la interfaz. Ahora creo que ustedes están familiarizados con esta aplicación. A partir de la siguiente clase vamos a estar aprendiendo sobre todas estas herramientas básicas que tengo en mi barra de herramientas. Vamos a estar aprendiendo sobre eso, todos los usos de lo que podemos hacer con esas herramientas particulares. Este último va a ser interesante, creo. Y ustedes también aprenderán sobre diseño UI UX y particularmente sobre esta aplicación desde un conocimiento muy básico hasta un conocimiento avanzado, como después de completar este tutorial, ustedes tendrán una buena idea sobre el diseño UI UX. Y también podremos hacer tu propio diseño web y diseño de aplicaciones móviles. Espero verlos a todos en el siguiente tutorial. Cuida de todos y adiós. 4. Herramientas básicas en Figma: Hola a todos y les damos la bienvenida a otro tutorial en Figma. En este capítulo, estamos en nuestro capítulo número tres y aprendiendo sobre las herramientas básicas en Figma. Aprenderemos sobre la herramienta move la scale. También sobre la herramienta de forma que se puede crear diferentes formas tipográficas incluyendo un rectángulo Cómo podemos jugar con todas esas formas y modificarlas en consecuencia sobre el texto. Cómo podemos modificar un texto, crear un texto y ponerlo dentro de tu marco. También les he enseñado a ustedes cómo capas abajo o renombrar sus marcos y poner ahí su trabajo sobre el corte y agregar un comando y también los recursos, plug ins y widgets Así que no perdamos el tiempo y empecemos con esta clase en particular sobre Figma. Como ustedes pueden ver aquí, tengo un espacio de trabajo vacío con ese espacio de trabajo vacío. Lo que voy a hacer es que ahora les voy a estar explicando sobre todas estas herramientas. Primero, voy a estar tomando esta herramienta de marco con mi marco dos, solo voy a estar creando un marco. Bien, supongamos que no quiero crear ningún marco de mi talla. Tengo algún tamaño en particular para hacer mi edición. Aquí pueden ver que sí tengo diferentes presets. Bien. Aquí sí tengo preset para mi escritorio, que es bankbook air Aquí también puedes ver el tamaño. Hay otro sitio web donde puede encontrar diferentes tipos de tamaños que sean apropiados para usted o su dispositivo. Ahí puedes simplemente poner el nombre de tu dispositivo y ellos te mostrarán el tamaño de la pantalla en particular. Bajo la opción de teléfono, sí tengo un Android grande y pequeño. Todas estas opciones de iphone, si tengo tablet, sí tengo todo esto. El ipad D 8.3 el Surface Pro Ocho. Si estoy haciendo alguna aplicación para reloj, también tengo este tamaño de pantalla. Ahora como ya he seleccionado ese, voy a estar creando un marco aquí. Después de crear el marco aquí, puedes ver en el panel de control, sí tengo todas las opciones para modificar este. Bien. A lo mejor voy a tomar este color, como pueden ver uno. Voy a seleccionar esta. Sí tengo esta opción de hacer todo esto. No, si quiero oscurecerlo, quiero crear lo normal Yo puedo hacer las capas desde aquí, y también puedo cambiarlo desde aquí también Si hago clic aquí, pueden ver que se aligeran en un 50% Si no quiero ver eso, solo puedo hacer clic aquí en este botón de ojo desde aquí Y también tengo ese botón de ojo aquí también. Justo al lado de eso, tengo el botón de registro. Ahora, no voy a poder mover esto usando mi herramienta de selección también. O hacer algún cambio, que si todo está dentro de esta caja en particular. Pero una vez que desbloquee esto, hecho puedo mover este cuadro en particular, posicionarlo en consecuencia. Y a partir de aquí también les estaré mostrando chicos si quiero mover esto en el eje x o en el eje y, puedo hacerlo. También puedo seleccionar esto si quiero tomarlo en modo retrato o en modo horizontal. Así es como se crea un marco. También tengo esta opción de trazos. Si quiero cambiar el trazo aquí, puedes ver que soy capaz de cambiar el trazo, cambiar el color del trazo. Si no quiero ver este, sólo puedo hacer clic en este de nuevo. Éste. Si no quiero ver el trazo. Esto otra vez. Éste. Si quiero ver desde aquí, puedo cambiar la opacidad por 50 Así se verá. Si quiero que mi trazo esté dentro, como afuera, puedo dar click sobre esto. Si lo quiero en el centro, puedo dar click aquí. En esta opción, también tengo la opción de efectos. Si quiero dar algún efecto de desenfoque, sombra paralela, sombra interior, sí tengo todo esto aquí. ¿Bien? Esta es la herramienta de escalado y la tecla de atajo para eso es K. Si hago clic en esta desde aquí, puedo simplemente escalar hacia arriba o reducir este fotograma en particular desde aquí. Esto es bastante sencillo y os lo diré chicos, supongamos que quiero hacer otro marco, ¿de acuerdo? Voy a hacer otro marco a partir de aquí. Como pueden ver, puedo hacer el marco de la manera que quiera, ¿de acuerdo? Pero si estoy seleccionando esta opción de fotograma desde aquí, y si hago clic en el turno de control y luego trato de hacer un fotograma, mi fotograma será proporcional, ¿de acuerdo? Entonces puedo crear un marco proporcionalmente a partir de aquí si estoy tratando de no crear Proporcionalmente, entonces ustedes pueden ver que va por el otro lado Pero aquí me va a dar un encuadre proporcional. Así es como puedes crear un marco proporcional. Desde mi control de clic más shift y manteniendo pulsado o arrastrando sobre tu mouse Voy a borrar esta. Este también. Toma este marco aquí. Puedo cambiar el nombre del marco desde aquí haciendo doble clic en aquí. De lo contrario, encima de este marco en particular, también puedo dar click aquí. Espero que ustedes hayan entendido el uso de esto y les estaré mostrando aquí más opciones. El encuadre, ustedes ya lo entendieron. Yo creo en este, ¿de acuerdo? Tengo la tecla de atajo para eso es la herramienta de movimiento y la herramienta de escalado también han sido entendidas por ustedes chicos. Y ahora pasemos a la sección, bien, aquí, usando esto, puedo crear una sección en particular. Supongamos que voy a crear esta sección aquí, y puedo simplemente mover esta sección en particular aquí dentro de mi marco, ¿de acuerdo? Entonces sí tengo esta sección ahora dentro de mi marco. ¿Bien? Si selecciono esta, o si selecciono esta, supongamos que me quedo aquí, ponga un color. Supongamos que elegí este color, no se ve bien. Sí, no está mal. Bien, ahora si vengo aquí, da clic en esta, otra vez, cerrar la opción de contenido del clip. Así es como en realidad me va a dar un adelanto. Pero si vuelvo a venir aquí en el contenido del clip, hay un cambio que ustedes pueden ver solo en esta sección con el contenido del clip. Y esto es sin, así es como se verá realmente como ustedes ya pueden ver aquí ahora. Bien, esto está justo encima de éste. Ahora pasemos a la herramienta de corte. Y la tecla de método abreviado para eso es, así que básicamente solo recorta marco o un área en particular que desea importar o exportar. Bien, si elijo aquí esta sección en particular, también he seleccionado la rebanada. Como puede ver, este es el lugar que se acaba de ocupar después de seleccionar este. Si llego a esta opción de exportación, como puedes ver aquí, está escrito, si quiero exportar este slice uno aquí, bien, si exporto slice uno aquí, te voy a estar mostrando, revisa esto, Lo que se guardará en mi pantalla, solo un slice de donde tengo diapositiva. Simplemente seleccionará esa parte la misma manera si selecciono rebanada dos, me dará una vista previa de esto ya que no hay nada ahí. Yo sólo cortaré uno también. Bien, entendido. Esta parte también aquí. Aquí sí tengo todas las formas. Si quiero crear una línea, un rectángulo, Bien, creo un rectángulo, Solo piensa que estoy creando este desde aquí. Puedo crear diferentes íconos. Si selecciono esto, rellena esto con un color diferente aquí. Bien, aquí pueden ver que sí tengo esto con Alt. Yo puedo simplemente duplicar esto también. Como pueden ver, he duplicado el mismo tamaño de icono aquí. Después de eso, también puedo hacer botones con estas formas. En esta línea aquí, puedo crear una línea de la manera que quiero aquí. Hay algo bueno de Figma, te mostrará alineaciones Como pueden ver, aquí hay una línea de color naranja, rojizo, que me muestra la alineación aquí De línea en realidad puedo poner, si quiero poner cualquier tipo de flecha, puedo hacer eso o todo el adelanto, lo conseguiré aquí. Y también éste. Éste. Y también puedo cambiar el ancho o el tamaño del trazo desde aquí. Bien, yo también puedo hacer todo esto. Yo también tengo la cosa de la flecha aquí. Simplemente puedo hacer clic o crear una flecha desde aquí. Si selecciono esto aquí, pueden ver que también puedo cambiar la opacidad También puedo hacerlo así, triángulo inverso en el círculo, flecha, flecha de diamante, redondo, cuadrado. Yo sí tengo estas opciones aquí. Si quiero hacer un círculo, puedo hacer un círculo de la misma manera con este circuito en particular. Puedo jugar como ustedes pueden ver. Pero si hago clic en turno de control como he seleccionado este, sin turno de control, se creará en una proporción. ¿Bien? Crearán círculo para mí en proporción. Después de eso, vayamos al polígono. De la misma manera puedo crear un polígono como este. Si quiero moverlo dentro de cualquier marco, puedo mover esto también. ¿Bien? Aquí puedes ver una vez que haya hecho esto, estas cosas son marco, ¿de acuerdo? Todas estas cosas están bajo el marco uno. Como éste está dentro, puedo cambiar el escenario desde aquí. Si quiero cambiar alguna configuración de este encuadre en particular, puedo hacerlo desde aquí Supongamos que quiero cambiar la rotación a partir de aquí, y todo va a estar incluido en eso. Como esto está bajo el marco uno aquí, lo he entendido. Vayamos a la estrella. A partir de aquí, puedo crear estrella si quiero. Aquí pueden ver tengo estas opciones donde puedo ensanchar esto o puedo jugar con todo esto Si quiero aumentar el conteo aquí puedes ver que también puedo aumentar el conteo. Aquí también puedo jugar con éste. Y si quiero colocar alguna imagen o video, simplemente puedo dar click sobre esta opción en particular. O desde mi teclado, puedo hacer clic en Control Shift después de esto. Veamos aquí en las Herramientas de Creación. En Herramientas de creación, sí tengo la herramienta pluma y la herramienta lápiz. Si me llevo la herramienta pluma, ustedes van a poder ver, puedo hacer diferentes formas a partir de aquí. Como se puede ver en consecuencia. De la manera que quiero aquí, he creado, también puedo doblarlo. Si quiero, como pueden ver aquí, puedo hacer cosas diferentes a partir de aquí. Bien, Si he terminado con esto, hago clic en. O si quiero doblar algo, esta es la herramienta Curvar. Yo también puedo usar esto. Bien. Si he terminado con esto, puedo dar click aquí. Déjenme mostrarles a ustedes la herramienta de lápiz. Herramienta lápiz, es solo una escritura humana. Si acabo de escribir Igm, lo siento, mi letra es muy mala. Voy a estar borrando todo esto de aquí. Haga clic en el botón de eliminar aquí, y esto se elimina. Este también. Si ustedes han entendido el uso de herramienta pluma y lápiz pluma, la tecla de método abreviado es solo para que el lápiz cambie más P. Solo necesita incluir un turno con la P para seleccionar su herramienta de lápiz. Déjame llegar a esta herramienta de texto después de eso. Aquí, una vez que haya seleccionado la herramienta de texto, necesito crear un cuadro en particular aquí. Desde aquí solo puedo escribir cualquier cosa como voy a escribir Ma tutorial de herramienta básica ya que he escrito este. Si selecciono esta cosa en particular desde aquí, en realidad puedo seleccionar la fuente. Bien, puedo seleccionar la fuente y también puedo seleccionar un tamaño particular. ¿Bien? ¿Qué talla quiero aquí? Yo sí tengo éste. También puedo cambiar la alineación, y hay muchas cosas más, que aprenderemos aquí. Yo sí tengo dos líneas. También puedo aumentar o disminuir el tamaño de la línea a partir de aquí. Como pueden ver, bien, puedo cambiar el ancho también desde aquí. Puedo seleccionar la fuente desde aquí. Como pueden ver, puedo hacer todo esto aquí, como una vez que haya seleccionado mi texto, I. Utilice esta opción de texto en particular. Y también puedo rellenar color, dar efectos de golpe put, que vamos a estar aprendiendo más adelante. Con esto, lo voy a poner aquí. Bien. También he aprendido cómo puedes usar la herramienta de texto. Para la herramienta de texto, la tecla de método abreviado es de tu teclado. Después de eso, iremos a recursos. Si hago clic en recursos, puedo obtener diferentes tipos de plug in, un tipo diferente de widgets. A partir de aquí, los enchufes son bastante útiles. Les mostraré algunos de los enchufes que son bastante útiles y prácticos de usar. Bien, entonces aquí usando la herramienta de mano, ya les he mostrado chicos cómo podemos movernos por aquí, como en esta página, ya que con esta herramienta de selección, solo pueden moverse por ahí. Bien. Pero aquí usando la herramienta de mano, se supone que sí tienes una página completa de trabajo y está tanto bien, tantos marcos que has creado y tantas cosas que has hecho aquí. Ahora solo necesitas moverte con tu herramienta de mano, Esta es una herramienta bastante práctica. La última herramienta en la barra de herramientas es una sección de comentarios. Si selecciono este, y aquí se puede ver un cuadro de comentarios está ahí. Supongamos que quiero poner un comentario aquí. Bien, así que aquí puedo dar click y escribiré Cambiar, cambiar el tamaño de fuente y el color. Si quiero mencionar a alguien, yo después del agrego su nombre, los que están en mi grupo con los que todo voy a estar trabajando, en realidad puedo mencionarlos. Si quiero mencionar a todos después de la tarifa, también puedo poner a todos bien aquí. También tengo diferentes Emoji. Como pueden ver aquí, tengo diferentes Mogi que puedo usar en consecuencia Tantas imágenes diferentes, no solo los emojis faciales, también animales, bocadillos de frutas, y muchos más Aquí sí tengo algunas palabras también. Bien. Que puedo usar. Incluso puedo buscar, así puedo hacer todo esto desde aquí. Esta también es una herramienta bastante útil si hago clic en Enter o si hago clic aquí, ustedes pueden ver que he subido un comentario aquí. Si he mencionado a alguien, van a recibir una notificación de que los he mencionado en mi proyecto de que necesitan hacer algo o le he dado algún consejo o algo como tal. Aparecerá en esta caja así como en su caja también, que podría ser visible para ellos donde quiera que esté haciendo esto. Bien, desde aquí solo puedo editar esto también. Bueno, también puedo borrar esta. Sólo voy a borrar esta. Espero que ahora estén bien familiarizados con todas las herramientas de la barra de herramientas. Ahora realmente puedes hacer un archivo básico usando esta aplicación Figma Espero que todos hayan entendido. Nos vemos a todos en la siguiente clase o en el siguiente tutorial. En el capítulo, aprenderemos muchas cosas más interesantes sobre esta aplicación de diseño de UI UX en particular. Hasta entonces, cuídate. Adiós. 5. Cómo puedes usar páginas en Figma: Hola a todos y les damos la bienvenida a todos a otro tutorial en Figma. Ahora estamos en nuestro capítulo número cuatro, y les estaré mostrando chicos cómo pueden usar las páginas en Figma. En la última clase, os lo he dicho chicos o os dado una idea básica sobre todas las herramientas, entonces, ¿cuáles son sus usos en esta aplicación en particular? Aquí en esta clase, voy a contarles sobre las páginas. Puedes agregar una página. Cómo puedes copiar un contenido en particular de un proyecto a otro usando el método copy paste. Y cómo puedes realmente poner tantos marcos o tantos componentes, tantos vectores dentro de una página en particular. Y cómo se puede trabajar realmente mostrándoles algunos ejemplos de la comunidad de Figma. No perdamos el tiempo aquí. Empecemos con esta clase. Ahora, estoy en la página principal de Figma. Como pueden ver aquí, tengo la comunidad explore. Y he tomado dos de los proyectos, como diseños. He tomado dos de estos diseños para mostrarles cómo funciona realmente, como cuál es el uso de las páginas o cómo puedes usar la página en tu trabajo. Como pueden ver, he tomado este primer diseño aquí. Se puede ver que tiene cuatro páginas aquí abajo. Bien. Aquí tiene cuatro páginas. Si quieres agregar más páginas desde aquí, solo puedes venir aquí y dar click en esta página desde aquí. Como pueden ver, una vez que hice clic en una nueva página, llegué a crear una nueva página Aquí lo estoy en consecuencia. Bien. Supongamos que voy solo como clase de páginas, sólo voy a decir eso. Ahora lo que quiero hacer es que quiero crear un marco. A partir de aquí, les enseñé a ustedes cómo podemos crear un marco ya que ustedes también tienen presets aquí Voy a estar tomando para un escritorio, voy a tomar 12, 18 a 832 Aquí sí tengo esta página en particular. Como pueden ver, una vez que he creado esta página, mi marco está ahí, pero debajo de mi marco, no tengo nada porque no puse ninguna caja ni lleva dentro de eso. Ahora, déjame crear una caja. Como pueden ver, donde creé esta caja o esta forma dentro de mi marco de marco. La caja rectangular apenas viene debajo por marco. ¿Bien? Por rectángulo caja está justo debajo del marco. Y ahora básicamente puedo nombrar esto de la manera que quiero. ¿Bien? Voy a escribir mazos. Detener. Voy a guardar este de aquí. Ya ves que en realidad puedo darle algo de color de la manera que quiero. Dale a este también un color diferente. Bien, déjame tomar este color. Como pueden ver, sí tengo esta página. ¿Bien? Así es como puedes usar realmente una página. Y también podemos crear diferentes páginas o diferentes marcos en una misma página. ¿Bien? Si solo me alejo usando control, un mouse aquí abajo, pueden ver que sí tengo un fotograma aquí. Si quiero replicar la misma página del mismo tamaño, lo que voy a estar haciendo es estar dando click en Viejo primero Voy a elegir este marco. Voy a hacer clic en Viejo. Una vez que hago clic en Viejo ahí, puedes ver en mi mouse, sí tengo dos mouse. Esta es la forma en que puedo replicar el mismo frame. Nuevamente, seleccionaré esto y moveré éste con mi herramienta de mano. Sólo voy a mover la pantalla que puedo mostrarles chicos en el medio. ¿Qué entendiste aquí? Como aquí, hemos entendido que dentro de una página podemos crear tantos marcos, tantos vectores. También podemos poner tantas animaciones de texto, íconos. Bien, también les he enseñado a ustedes cómo podemos crear una página. Déjenme mostrarles chicos si tengo el mismo nombre sobre cómo puedo cambiar eso en realidad. Bien, desde aquí. Voy a dar click aquí a este como tres. Que no me confundo aquí. ¿Bien? Supongamos que me ha gustado alguna de estas cosas. ¿Bien? Supongamos que me gusta este logotipo en particular. O déjame volver a esta página y quiero tomar esta imagen en particular en mi propia página. Para eso, lo que voy a hacer es o bien puedo dar click en el control C, que es copiar. De lo contrario solo puedo venir aquí, clic en Copiar desde aquí, y volver a esta página con mi herramienta de selección, seleccionar esta casilla en particular y pegar esto por aquí. Bien, así como pueden ver, una vez que lo he pegado también vino en mi página En consecuencia, también puedo tomar o referir tantos de los otros proyectos de la opción comunitaria. Si voy aquí, supongamos que primero me dejo acercar con la cabeza para que me deje mover esta de aquí y de aquí. Se puede ver cómo se usa realmente. Aquí primero ha seleccionado qué colores debe usar. ¿Bien? Estos son los colores que va a usar. Estos son el tipo de fuente que va a utilizar para el encabezado. Y este será el tipo de fuente o tamaño para el cuerpo. Y si quieres usar una letra minúscula, estará usando esta fuente. Estos son diferentes tipos de componentes que va a utilizar. Estas son la herramienta de navegación que se utilizará, sistema de divisores y diferentes tipos de cuadros de texto si desea poner cualquier área de texto especial y botones de let arriba también Simplemente se hizo un bonito plano antes de hacer cualquier aplicación móvil o cualquier tipo de sitio web Una vez que hayas terminado con esto, como una vez que haces todo esto, te resulta bastante fácil trabajar que no tenemos que prohibirle el tamaño de otros lugares que sigue siendo el mismo. Mira aquí, él ha enumerado tan perfectamente qué interruptor todo va a estar usando. Aquí se puede ver que ha seleccionado dos interruptores de aquí, los átomos del grupo de radio radio, lo que todas las cosas se necesitan. En realidad los ha puesto en orden correcto para que no se confunda. Aquí puedes ver gráficos y aquí va a estar poniendo gráfico de columnas. Pero aquí está escrito pronto que va a estar trabajando en esto más tarde. Así es como deberíamos trabajar realmente. Antes de comenzar cualquier proyecto, básicamente debemos establecer un plano para nosotros mismos que podamos referir esa cosa en particular y trabajar en consecuencia Aquí puedes ver este es logo desde aquí, esta es otra página. Esta no es la primera página, Bien. Aquí hay otra página que tomó e intentó hacer el trabajo demo desde aquí. Supongamos que si estoy tomando esta página aquí, puedo moverla abajo de aquí debajo de esta. Además, sí tengo diferentes títulos. Supongamos que quiero moverme o quiero copiar y pegar cualquier cosa en esta página en particular. Lo que puedo hacer es simplemente hacer clic en Opciones de Pegar aquí y la opción Copiar también está aquí. Depende de lo que quiera hacer aquí. Déjame venir aquí a este otro diseño web aquí. Si vengo, si voy a esta opción de activos desde aquí, como pueden ver, él ha utilizado todos estos activos aquí. Si quiero usar este activo en particular, lo que voy a hacer es simplemente hacer clic aquí o seleccionar este C. En vez de eso, permítanme simplemente tomar este de aquí. Bien, porque esto va a mirar, lo llevaré aquí. Volver a mi clase de páginas de capas. Aquí, solo presionaré presionaré control V aquí, se puede ver la escritura. Yo sí lo tengo aquí. Puedo aumentar el tamaño si quiero. Para eso necesito acercar y aumentar el tamaño de acuerdo a mi necesidad. Con mi herramienta de mudanza, puedo simplemente moverme aquí arriba. También puedo cambiar el color si quiero. Déjame tomarme un color negro. Déjame poner esto encima. Bien, aquí. Ahora tengo poco por texto uno. Puedo ponerlo en algún lugar aquí en el medio. Sí, esto se ve bastante bien. De hecho, puedo hacerlo con otras llamadas también. Bien, aquí nombran a este marco como marcador de posición. Básicamente puedo borrar esta. Puedo poner lo que quiera. Bien, supongamos este guión completo. Desde aquí, puedo hacer clic en control, volver atrás y hacer clic en control aquí. Puedes ver si tengo la página completa aquí o la imagen completa. De hecho puedo comprobar el tamaño desde aquí. Bien, puedo disminuir el tamaño de la manera que quiera. Este es el tamaño de la página. Si quiero disminuir el radio, también puedo disminuir el radio. Así es como podemos trabajar con página y en realidad podemos crear nuestro propio diseño. Y también podemos poner lo que queramos. Espero que ustedes hayan entendido el uso de las páginas y cómo podemos copiar y pegar, cómo podemos tomar diferentes páginas y poner contenido dentro de nuestra página. Básicamente, dentro de las páginas tenemos marcos, y debajo de marcos tenemos todos los demás componentes. Estaremos aprendiendo sobre componentes, vectores de enmascaramiento. Ya te dije cómo puedes usar las formas. Estaremos aprendiendo de todo eso. Se trata de una secuencia y de cómo trabajamos realmente en esto. Ver todo en la siguiente clase donde vamos a estar aprendiendo sobre cómo podemos prototipar en esta aplicación. Figma. Nos vemos a todos en la siguiente clase. Cuídate. Adiós. 6. Cómo puedes hacer prototipos en Figma: Hola a todos y les damos la bienvenida a todos a otro tutorial en Figma. Ahora estamos en nuestro capítulo número cinco y vamos a estar aprendiendo cómo puedes comenzar con la creación de prototipos en esta aplicación prototipos es como hacer una aplicación en la que simplemente te desplazarás y llegarás a la página siguiente Voy a estar haciendo eso y estaremos mostrando cómo podemos previsualizar tu trabajo, cómo podemos presentar tu trabajo y cómo también puedes editar tu trabajo mientras haces el prototipado No perdamos el tiempo, comencemos con esta clase de aquí. Como ustedes pueden ver, tengo tres Frap aquí Esta es solo una página que les estaré mostrando chicos cómo pueden prototipar entre estas páginas. Primero, lo que voy a hacer es estar seleccionando este fotograma en particular. Después de seleccionar aquí puedes ver la opción de diseño, justo al lado de la opción de diseño, sí tengo la opción de prototipo. Aquí pueden ver que sí tengo la opción de prototipo. Si hago clic aquí abajo, se puede ver el diagrama de flujo, las interacciones y todo. Pero lo que voy a hacer, voy a estar dando click en este lado positivo y me uniré a éste. Yo sí tengo estos lados más aquí, puedo unirme en estos cuatro lados. Bien, el prototipo es básicamente bastante vasto, pero voy a empezar con el prototipo solo para mostrarles cómo funciona esto en realidad. Como puedes empezar a hacer tu propia aplicación o cualquier página web. Me están preguntando cómo quiero navegar. Quiero querer seguir adelante. Voy a hacer clic en esta app de entrenamiento. Bien, en cambio también está bien. Estas son algunas de las animaciones que hay. Voy a estar tomando una clase breve sobre eso. Aquí está al hacer clic. Simplemente enlazaré este mismo aquí ya que hago este lado con este lado, me uniré a esta página aquí. Bien, yo también tengo este. Ahora como ustedes han visto, yo sí tengo esto. Ahora quiero ver cómo va a ir de una página a otra. Bien, para eso puedes ver que sí tengo un ícono aquí. Bien, aquí hay dos íconos básicamente. El primero está presente y el otro es Vista previa. Hay una gran diferencia entre el presente y el avance. Si hago clic en presente, tendré una caja diferente aquí, como una ventana diferente si hago clic en presente, veamos cómo se verá. Después de eso, les estaré mostrando a ustedes cómo es una vista previa y cómo es diferente. Aquí pueden ver que sí tengo éste. Si hago clic en esto, sólo puedo cambiar. Bien. Como se puede ver un manual también, puedo dar click aquí y ver cómo se ve mi página. Bien, aquí, supongamos que tengo estos íconos aquí. Si sólo estoy tocando, sólo voy a la otra página. Espero que ustedes hayan entendido cómo pueden hacerlo manualmente. También, podemos volver atrás, pero supongamos que quiero cambiar esta escritura en particular a partir de aquí. En ese caso, cada vez no debería volver atrás o simplemente cancelar estas páginas en particular. Lo que sólo puedo hacer, sólo puedo venir aquí. Supongamos que quiero seleccionar esto, o quiero seleccionar esta casilla. Y quiero disminuir el tamaño de esta caja. ¿Bien? Encoge el tamaño. Algo así. Así que solo quiero borrar esta casilla. Bien, solo para mostrarles un ejemplo, solo voy a hacer clic en eliminar. Ahora puedes ver mi página comienza desde aquí. ¿Bien? En ese caso, lo que voy a hacer es que si vengo aquí en esta página aquí, pueden ver que mi primera página se ve bastante así. No tuve que eliminar esta primera página ni cancelar esta primera página para ver los cambios. En ese mismo caso, si quiero cambiar cualquier color o cualquier cosa como tal, sólo puedo llegar a la opción de diseño a esta opción de campo. A partir de aquí, puedo tomar cualquier color como me guste aquí. Se puede ver que sí tengo este color en particular aquí. Simplemente puedo seleccionar esto ya que tengo este color. También puedo tomar este color en todos estos marcos también. Bien, voy a tomar un color igual que este de aquí. Se ve que sí tengo el color y puedo cambiar el patrón desde aquí. Aquí, Si quiero tomar un color diferente para la película, lo puedo hacer también desde aquí. Bien, Todas las cajas también, puedo poner diferente tipo de color de aquí. Bien, entonces espero que ustedes hayan entendido cómo pueden hacer el prototipo y cómo pueden ver esta página, bien, aquí, como pueden ver, una vez que he hecho algunos cambios aquí también se cambió. Así es como realmente funciona. Así es como puedes conseguir un regalo o ver nuestro trabajo en una nueva pestaña. Pero si quiero ver un adelanto, veamos qué hace. Si hago clic en Vista previa, tendré una ventana justo al lado de mi trabajo aquí. No va a crear una ventana diferente, pero en vez de eso, solo me dará una vista previa. En cualquier corredor donde voy a poner aquí, pueden ver mi cuadro de vista previa que se acaba cargar ahora ustedes podrán ver que me está dando una actualización en vivo de mi vista previa. A partir de aquí, puedo abrir éste en vista de presentación, lo cual no tengo que hacer porque ya he abierto este de aquí. También puedo alimentar esto a la relación de aspecto del fotograma. Puedo aquí de aquí de forma manual. Si solo toco esto, pasará de primera página a la segunda. Segunda a la tercera. 7. Opciones de facilidad y animación de prototipos: Hola a todos y les damos la bienvenida a todos a otro tutorial en Figma. Este es el capítulo número seis y estaremos aprendiendo sobre las opciones fáciles y la animación de prototipos Como en la última clase, he mostrado chicos cómo pueden comenzar con prototipos y conectar fotogramas con marcos Aquí en esta clase, vamos a estar aprendiendo sobre cómo puedes realmente animar esos fotogramas cuando aparezcan en la pantalla Y un botón en particular puede llevarte a otra página. Les voy a enseñar a ustedes cómo pueden hacer eso. Bajo eso, les voy a mostrar muchas más opciones. ¿Qué se puede utilizar en esta aplicación en particular para hacer una aplicación móvil o una aplicación web? No vamos a mojar tipo, y comencemos con esta clase en particular. Aquí otra vez, estoy de vuelta en mi página de inicio de Figma y les estaré mostrando chicos desde aquí Bien, aquí como ustedes pueden ver, ya tengo estos marcos, voy a hacer prototipos desde aquí, pero va a ser bastante diferente como les he dicho que si hago clic en cómo puedo liderar en esa página en particular, que puede estar en cualquier parte Bien, supongamos que quiero ir directamente en esta página. Qué es lo que hago clic en este botón en particular, déjame solo zoo en este botón. Seleccionado éste. Tengo el error ortográfico. Sólo voy a añadir aquí. Como sí tengo este botón en particular aquí, lo que voy a estar haciendo, primero alejaré si hago clic en este. Si voy a mi prototipado, como pueden ver sí tengo el lado positivo aquí Lo que voy a hacer es una vez que haga clic en este botón en particular aquí, voy a caer en esta página. Eso es lo que quiero. Bien, aquí pueden ver que sí tengo muchas opciones. Como si quiero navegar dos, si quiero volver atrás y qué animación en qué página quiero ir. En esta página quiero dejar aquí se pueden ver las últimas tres páginas. También, sí lo tengo aquí. Voy a hacer clic aquí. También voy a elegir esta opción desde aquí. Bien, aquí ustedes realmente pueden ver la vista previa de lo que realmente se verá como pueden ver desde aquí. También puedo cambiar está fuera. Déjenme mostrarles chicos con sólo conseguir un adelanto. Bien, sólo voy a hacer clic aquí. Toma la vista previa. Como puedes ver, se está cargando. Pero me va a dar esta cosa de aquí ahora mismo. Si hago clic en esta respiración aquí, puedes simplemente relajarte. Si vuelvo otra vez y cambio esta cosa en particular a instantánea. Ahora si vuelvo de nuevo y si hago clic en éste, aquí hay un cambio instantáneo. Estas son la animación o la forma en que realmente podemos animar esto es al hacer clic A veces solo queremos D, ¿de acuerdo? En ese caso, puedo dar click en éste, especialmente este se usa en caso de pop ups. Si quiero arrastrar algo o quiero ir a la siguiente página, entonces puedo hacer así. Bien, aquí sí tengo estas opciones. Vamos a verlo uno por uno, ¿de acuerdo? Si hago clic en Disolver aquí, puedes ver la vista previa de cómo se disolverá lentamente. Bien, déjame volver aquí en esta página. Si hago clic en la respiración aquí, pueden ver que esto se acaba de disolver. Bien, después les estaré explicando la opción de animar inteligente, porque esto es un poco complicado Sólo lo guardaremos para la siguiente fase de la clase. Aquí hay otra opción llamada mudanza. Así es como vendrá si hago clic en mi página aquí, déjame volver. Haga clic aquí. Entonces vendrá así, como se puede ver desde aquí. Además, en realidad puedo cambiar el momento. Bien, Como con eso, ¿cuántos segundos o milisegundos vendrá Voy a dar 450 milisegundos. Yo he dicho éste. Ahora volvamos otra vez. Haga clic aquí. Como puede ver, apareció un poco despacio. Todo depende tu aplicación o de qué tipo de aplicación móvil estés haciendo, qué se basa y todo eso. Aquí, puedo ver todas estas opciones. Si elijo los límites en, si vuelvo ahora Bien, si hago clic aquí, puedes ver que da los bouts aquí en mi pantalla, puedo elegir entre todo esto Si quiero que llegue despacio, vendrá así. A partir de aquí vendrá lento. Y de pronto simplemente aparecerá en mi pantalla. Sólo les estoy enseñando a ustedes cada opción que tenemos aquí. Esta es otra forma en la que quiero que aparezca rápido. Si hago clic en éste, vendrá así. Y si quiero que venga gentilmente aquí así, aparecerá bien. ¿De qué lado quiero que aparezca? Supongamos que lo di desde la derecha de aquí. Ahora ustedes podrán ver que esta página aparece por la derecha, no por la izquierda, apareció por la derecha. Y en ese caso, si lo di encima, entonces aparecerá desde arriba. O aparecerá de abajo y irá a arriba. Bien, déjame hacer clic en sí. Y éste es todo lo contrario de aquel. Es así como se puede trabajar aquí en esto todas las aplicaciones. Bien, espero que ustedes hayan entendido. Y si ustedes quieren cambiar algo, supongamos que esta cosa en particular puedo ver desde aquí puedo div como quiera. Está fuera si elijo éste, si quiero ver la vista previa, así es como va a llegar. Ustedes también pueden ver el avance aquí en este cuadro. Bien. Si quiero volver a navegar , puedo dar click aquí. Bien. Y ahora vamos a tratar de prototipar estas cuatro páginas enteras que tengo aquí. Bien, entonces con mi herramienta de mano, voy a mover un poco esta caja. Bien, regresen a mi primera página y como ya les he dicho chicos que no tienen que cerrar su vista previa ni su presente mientras hacen algún cambio. Si vengo aquí en el prototipo y vuelvo a elegir mi herramienta de selección, aquí pueden ver este es el botón de toda la página. Bien, les voy a mostrar chicos si solo voy a conectar esta a esta página otra vez. Y voy a estar dando todas las conexiones aquí aquí. Como sí tengo la opción de relajación, elegiré esta y también puedo elegir el texto si quiero, pero solo seleccionaré la casilla ya que mi texto está dentro de la caja. Yo me llevaré esta. Lo traeré aquí. A partir de aquí, puedo animar como quiera, cómo quiero que aparezca Bien, En esta página quiero que se disuelva. Voy a establecer el cronometraje a 400. Tomará 400 billetes para disolver la respiración. Ya lo he puesto aquí para yoga, ya que sí tengo esta opción aquí, yoga. Da click en esto y me llevará a la página de yoga. Cómo puedo eliminar realmente este es primero, déjame seleccionar la casilla aquí en esta casilla. Ahora puedo seleccionar esta página aquí. Bien. Aquí pueden ver que sí tengo todo esto aquí en todas estas cajas aquí. Puedes ver que también tengo el botón de Inicio. Me aseguraré de que una vez que haga clic en este botón de Inicio en particular o pestaña de inicio, déjame entrar en esto. Pestaña de inicio aquí. Mueva esto con esto aquí. Como pueden ver, quiero esto a nosotros. Vaya a esta página o conéctese con esta página. Como puedes ver, la opción plus aquí, solo me conectaré aquí en esta página como puedes ver desde aquí. Además, puedo cambiar, solo voy a mantener esto fuera y lo pondré como mudarme de aquí. Además, voy a tomar este botón, voy a tomar este de aquí. Hasta el momento no puedo seleccionar esto. Como he seleccionado este, traeré esto hasta aquí. Sólo desde aquí puedo elegir cómo quiero animar, ya que he dirigido todo esto a mi página principal Déjame obtener un adelanto de eso. Bien, así es como se va a relajar. Y aquí, se puede ver por navegaciones de todo lo que quiero. Veamos reseña o simplemente cortaré la vista previa. Sólo voy a presentarlo en un panel diferente aquí. Ustedes pueden ver que se está cargando ahora aquí como pueden ver, sí tengo esto. Si hago clic en esta relajación, pueden ver que fui a la página de relajación. Si bajo, si hago clic en esta de aquí, pueden ver que vuelvo a mi página de inicio otra vez. Si hago clic en esta opción de respiración, simplemente la aterrizo aquí en la página de respiración. Bien, desde aquí otra vez, si vuelvo y hago clic en este botón de inicio, ustedes podrán ver, de nuevo, volver a la página principal. Si hago clic en este botón de yoga, estoy de vuelta en esta página también aquí. Si quiero volver de nuevo a mi página de inicio, haré clic aquí. Puedo volver de nuevo a esta página en particular. Hay tantas otras opciones para eso. Necesitamos crear más marcos para mostrarles un ejemplo de cómo funciona realmente este prototipado Tengo show, espero que ustedes hayan entendido para darles a ustedes unos conocimientos básicos de prototipado y sobre esta animación que he mostrado Nuevamente, vayamos a este archivo principal aquí. Si quiero cambiar algo desde aquí, puedo cambiarlo. Solo tienes que ir a la opción de diseño. Ahora no puedes ver los enlaces entre todas estas cuatro páginas aquí. Siempre te sugeriré que nombre tu página correctamente entonces no te confundas. Porque cuando estás haciendo una app pequeña o una app más grande, siempre necesitas asegurarte de que no te confundas entre tus personajes o entre tus fotogramas. Que va a crear un lío y ustedes no podrán entender dónde se supone que deben poner. Lo que en ese caso como quizá en el tercer capítulo hay te han mostrado chico que he sacado de la comunidad en Figma. He tomado un proyecto y les he enseñado chicos cómo en realidad ordenó su trabajo. Ha escogido el color particular que va a usar, las cintas, los iconos, todos los diseños los tienen en una columna. En cada fotograma, acaba de decir lo que todas las fuentes va a usar, Tamaños, todo. Deberíamos configurarlo todo antes de crear cualquier aplicación. Ahora bien, si quiero borrar éste, como los enlaces para eso, de nuevo, tengo que venir aquí en el prototipo. En este prototipo de aquí, ustedes pueden ver que sí tengo todos estos enlaces aquí. Bien, aquí ustedes pueden ver que sí tengo todos estos enlaces. Si quiero eliminar algún enlace de aquí, simplemente puedo hacer clic aquí y puedo hacer clic en este botón menos aquí si no quiero hacer eso. En ese caso sólo puedo seleccionar esa línea en particular donde he conectado los marcos. Simplemente puedo hacer clic en esa línea y hacer clic en Eliminar. Bien, así es como puedo borrar. Sólo voy a deshacer esta otra vez. Aquí puedes ver esta es la forma en que podemos ser una sencilla aplicación móvil con la ayuda de la creación de prototipos Espero que esta clase haya sido clara y ahora ustedes puedan hacer su propia aplicación móvil. Yo sólo les diré chicos que comiencen con algo sencillo. Solo trata de crear una aplicación sencilla. Prueba esa después de eso. Una vez que estés muy acostumbrado a esta aplicación, opta por algo complejo que te acostumbres a esta aplicación, que no habrá ningún problema cuando hagas el producto final. Espero verlos a todos en el próximo tutorial donde aprenderemos sobre los retrasos y la animación inteligente. Lo que quiero decir con animación inteligente es suponer que tengo este ícono en particular, o cualquier tipo de imagen dentro de mi página aquí en esa jaula. Si hago clic en esto, aparecerá de manera animada. También les mostraré en la siguiente clase cómo podemos hacerlo realmente en nuestra aplicación particular. Cuídate de todos. Adiós. 8. Animación inteligente: Hola a todos y les damos la bienvenida a todos a otro tutorial figma aquí Este es el capítulo número siete y vamos a aprender sobre la animación inteligente. Al igual que cómo básicamente puedes moverte por cualquier herramienta en particular o cualquier objeto en particular dentro de tu marco y animar que se caiga correctamente Y de una manera agradable, vamos a estar aprendiendo todo eso en esta clase en particular. No perdamos el tiempo, y empecemos con esta lección en particular aquí. Nuevamente, de vuelta en la página principal de Figma. Ahora, en la última clase, ya les he dicho chicos sobre cómo podemos ir realmente de una página a otra. Ahora bien, si ustedes lo han recordado, he enseñado chicos en esta clase. Como pueden ver, también tengo el prototipado hasta ahora en última clase, si hago clic aquí, he eximido esta opción Esta clase se trata básicamente de esta animación inteligente. También les voy a enseñar a ustedes acerca de retrasar lo que básicamente es esto Supongamos que tengo esta imagen o este marco dentro de mi página principal aquí. Bien, entonces lo que voy a hacer es que solo quería entrar con una animación para eso. Ya veremos cómo podemos hacer eso. Bien, para empezar, lo que vamos a hacer es que quiero duplicar otra capa de este fotograma en particular aquí. Bien, para duplicar. Ya te dije que solo necesitamos dar click en Alt. Como he hecho clic aquí, pueden ver que sí tengo dos mouse Bien, déjame seleccionar todo el marco. Da click en la opción Alt aquí, puedes ver yo una. Bien, sí tengo el duplicado de esta capa. Déjame mover este lado. Permítanme también mover este marco en particular de este lado ya que no me confundo. Bien, esto trae este aquí. Como pueden ver, sí tengo estos dos separados. Este se nombra como ustedes también pueden ver, ambos es relajación en este marco. Copia de mi primer fotograma aquí. Ahora lo que voy a hacer es que necesito seleccionar el objeto que quiero animar. Bien, ahora sólo voy a venir aquí. Quiero animar esta imagen o este fotograma en particular. En ese caso, lo que voy a hacer es antes de eso, lo que voy a hacer es seleccionar esta. Voy a conectar esto con esta pestaña de relajación aquí. Bien, ahora ya ves que tengo éste. Vendré aquí y elegiré la opción llamada la opción Smart Animate Y aquí voy a usar Is is out opción. Como pueden ver, he seleccionado 400 aquí. Yo sólo haré 450. Y voy a dar click en Bien. Desde aquí. Como pueden ver sí tengo éste. Ahora lo que voy a hacer es como quiero que esta aparezca lentamente, solo voy a arrastrar esta capa en particular fuera de esta. ¿Bien? Ahora bien esta no está dentro de este marco. ¿Qué pasa aquí si simplemente arrastro todo esto aquí abajo? Ya ves que tengo que relajarme. Así que voy a llamarlo uno de relajación y a éste como el de relajación dos, ¿de acuerdo? Entonces voy a guardar esta y como pueden ver ahora tengo relajación de dos páginas y también la de relajación, ¿de acuerdo? Uno debería estar arriba y dos deberían estar aquí. Y voy a mantener este marco encima de éste, ¿de acuerdo? Yo solo les voy a mostrar un ejemplo si solo arrastro este fotograma en particular desde aquí, bien, supongamos que quiero arrastrar esto. Ahora, sólo voy a llegar a diseñar. Toma este marco en particular como yo, moviéndote en este, ¿de acuerdo? Sólo va a entrar en este, ¿de acuerdo? Como pueden ver ahora éste está dentro de eso. Pero una vez que apenas empiezo a mover esto, se puede ver que viene fuera de la relajación una pestaña, pero la quiero adentro. Como ya os he mostrado aquí chicos, sí tengo las cosas prototipo. Ver también he conectado este. Ahora intentemos ver un adelanto de cómo se verá realmente eso. Si hago clic en Presentar, me va a dar una mejor vista desde aquí. Voy a hacer clic en la relajación desde aquí. Si vuelvo a hacer clic aquí, aparece así. Sí, ustedes han entendido como básicamente podemos hacer esto. Pero lo que quiero es que no tenga que hacer click aquí como he hecho clic como ustedes pueden ver Déjenme mostrarles otra vez. Una vez que haga clic aquí en esto, esta página volvió a aparecer. Cuando hice clic aquí, entonces solo apareció esta imagen en particular Pero lo que quiero es que cada vez que abro esta página en particular o la pestaña de relajación, quiero que aparezca lentamente. En ese caso, lo que voy a hacer es que voy a poner algo de retraso y voy a hacer modificación de configuración aquí. Bien, déjame volver al archivo original aquí. Otra forma de hacer esto es si selecciono este marco en particular, y supongamos que quiero traer esto aquí, ¿de acuerdo? Traeré esto aquí. Pero en ese caso, lo que voy a hacer es simplemente cambiar la opacidad, ¿de acuerdo? Entonces déjame cambiar la opacidad de ésta, ¿de acuerdo? Déjame ir aquí, arregla este marco en particular aquí, cero, ¿bien? Esto no lo veo para nada. En ese caso, sólo voy a hacer diez. Si hago diez también, no puedo ver mucho. ¿Bien? A lo mejor voy a poder ver algo como 25 está aquí. Ya ves, aquí sí tengo un lugar borroso. Ahora si trato de conseguir el adelanto de éste ahora, volvamos aquí. Si hago clic en esto aquí, pueden ver esto aparece. Pero ahora como pueden ver, nuevo, necesito tocar esto solo para obtener una vista. Bien, aquí ya he cambiado la opacidad. Quiero hacer más. Déjame hacer 50% Bien, ahora veamos la vista previa Desde aquí, voy a dar click en esto, así es como aparecerá. O si solo quiero cambiar la opacidad y traerla en este lugar, puedo hacerlo también Ven aquí, selecciona todo el marco. Después de seleccionar, basta con poner aquí todo este fotograma y ver la vista previa ahora. Bien, déjame regresar. Haga clic en Relajación, luego haga clic aquí, y luego obtendrá la página. Pero como te he dicho, no quiero hacer doble click aquí. Quiero que aparezca por sí mismo. Bien, para eso, voy a venir aquí. Como pueden ver, he seleccionado este botón aquí. Ir a la opción prototipo. Yo solo seleccionaré esta aquí se puede ver que sí tengo la opción de disolver, pero en lugar de disolver, voy a estar eligiendo la opción instantánea después de eso. Como pueden ver, me llevará a la relajación una página y esta es la relajación de dos páginas. Quiero que aparezca en un aquí, que ya he seleccionado la opción de after delay aquí. Si voy al prototipo, conectaré esto aquí y daré clic en Sí. Ahora sí tengo esta opción aquí también. Bien, sólo puedo borrar uno de aquí. Yo sí tengo esta opción aquí. Como pueden ver, tengo una iluminación aquí ahora. Yo sólo voy a ir aquí. Vaya a la página principal y haga clic en esta. Aquí puedes ver que vendrá esto como una diapositiva. Espero que ustedes también hayan entendido este tutorial. Bien, cómo puedes animar de forma inteligente. Les he enseñado chicos la opción, cómo en realidad pueden animar lo suyo de manera inteligente Cómo puedes duplicar tu marco. Y todo esto aquí en este tutorial. En la próxima clase aprenderemos sobre cómo podemos compartir y también cómo puedes entrar. Puedes compartirlo con tu cliente o con los miembros de tu equipo y además trabajar al mismo tiempo en una interfaz en vivo. Espero verlos a todos en el siguiente tutorial. Cuida cada deseo. Adiós. 9. Utilidad de compartir y agregar comentarios: Hola a todos y darles la bienvenida a todos a otro tutorial en Figma. Entonces aquí ahora estamos en nuestro capítulo número ocho. Y nuestro nombre de capítulo es utilidad de compartir y agregar comentario. Entonces aquí en esta clase, vamos a estar aprendiendo cómo básicamente podemos compartir. Sé que ustedes ya saben lo básico de cómo compartir, pero aquí esta clase será en profundidad sobre compartir y cómo esto es bastante útil para agregar un comentario para otros miembros del equipo mientras están trabajando en un proyecto de vida. Como ustedes pueden trabajar juntos al mismo tiempo, ustedes pueden ver lo que está haciendo su otro miembro del equipo. Ustedes pueden agregar un comentario. Invítalos. Les estaré mostrando a todos aquí en esta clase en particular en profundidad sobre compartir y agregar comentarios. Así que no perdamos el tiempo y empecemos con esta clase en particular. Entonces nuevamente, estamos en la página principal de Figma, como pueden ver Y ahora aquí como ya te he dicho lo que vamos a aprender. Volveré de nuevo en este proyecto en particular aquí. Bien, y supongamos que ahora quiero compartirlo con mi cliente o con mis compañeros Bien, en ese caso, les he dado a ustedes lo básico de lo que se puede hacer. Así que aquí sólo voy a hacer clic en Compartir. Entonces suponga que quiero poner aquí la dirección de correo electrónico. Voy a poner una dirección de correo electrónico. Voy a hacer click en éste. Aquí puedes ver como he seleccionado una dirección de correo electrónico, ¿Qué pueden hacer con eso, pueden ver esta o también pueden editarla desde aquí? Bien, ¿quiénes van a tener acceso aquí a esta cosa en particular? Bien. Aquí puedo decirle sólo a las personas invitadas a este expediente, que necesito hacerlo desde aquí. De lo contrario, sólo puedo hacer clic aquí. Cualquiera que tenga el enlace. Básicamente, si este archivo es blanco reservado, entonces en ese caso solo puedo seleccionar este, como solo personas invitadas a este archivo Pero si este archivo, quiero seleccionar este enlace en particular y quiero copiar este y enviarlo a su palabra, Sap o Messenger. Puedo hacerlo desde aquí, bien. Y si pueden editar o solo pueden ver, supongamos que solo quiero enviarle a mi cliente el link donde solo puede ver. Bien, en ese caso puedo dar click en esta opción para mis compañeros de equipo a quienes voy a invitar Yo lo haré, ellos también pueden editar. Así que puedo tener estas dos cosas aquí. También puedo agregar un breve mensaje para ellos, a los que todos estoy invitando. Entonces voy a escribir que necesitas ayudarme a terminar este proyecto al final de este. Entonces les acabo de dar un mensaje. Con quien todo lo estoy compartiendo. Esto, solo puedo darles un mensaje y puedo enviarles una invitación. Bien, aquí si tengo tres o cuatro miembros del equipo aquí, en ese caso puedo elegir quién solo puede ver, quién es el dueño y quién puede editar. Bien, en ese caso puedo seleccionar desde aquí, sólo puedo copiar el enlace. Como pueden ver, esto se copia en mi portapapeles ya que tengo esta página aquí, y ya he seleccionado un correo electrónico Así que sólo les enviaré una invitación. Bien, desde aquí puedo invitarlos. Ya ves que los acabo de invitar aquí. Si quiero publicar mi trabajo particular que he realizado, puedo dar click aquí en Publicar y solo puedo nombrar este , dar una descripción. Si quiero usar diferentes tipos de etiquetas, puedo usar diferentes tipos de etiquetas. Si quiero que sea un prototipo, puedo hacerlo un prototipo. O si quiero convertirlo en un archivo, también puedo hacerlo un archivo. Qué previsualización obtendrán. Bien, si elijo prototipo, puedo llenar la pantalla, el tamaño real o 100% también puedo subir una miniatura para mi clase de prototipo, y aquí hay algunas opciones avanzadas ¿Quién es el creador, la licencia y la dirección de correo electrónico también? Bien, no voy a ser un, así que simplemente cancelaré esto. Vengan aquí y déjenme mostrarles cómo pueden trabajar realmente. Así que muchos de ustedes pueden trabajar en la misma pestaña. Se pueden editar o vivir diseñados juntos. Bien, entonces sólo voy a volver aquí. Yo sólo voy a ir a ese correo electrónico. Voy a ir a. Correo electrónico de aquí, sólo voy a tomar otro correo electrónico aquí. Ya ves que sí tengo invitación. Una vez que haga clic en éste, seré redirigido. ¿Bien? Como puedes ver, este archivo en particular, está trabajando en Figma. Voy a cerrar esto ya que ya estoy aquí. Como veis, sí tengo éste también. Bien, aquí para mostrarles a ustedes de una mejor manera. Aquí se puede ver en este archivo, si vengo, minimizar esto, así que aquí se puede ver, una vez que me estoy moviendo en esta pantalla, el ratón aquí, se puede ver lo que está haciendo el editor. Y supongamos que quiero cambiar el color de todo esto aquí. Lo que puedo hacer es venir aquí, vendré y editaré. Y sólo voy a recoger un color. Y ahora quiero pegar ese color aquí, bien. O quiero cambiar el color de toda la página a negro. Como pueden ver, una vez que hice esta cosa en particular aquí en esta página, en mi otra página también, cambió ya que le he dado también el permiso para editar. Él puede hacerlo al mismo tiempo. Esto es bastante interesante. Con esto, también puedo cambiar todos los ajustes. Supongamos que lo quiero en 50. Voy a hacer clic en Entrar aquí, se puede ver tanto la página se ve igual. ¿Bien? Como soy capaz de hacer cualquier cosa desde aquí. Bien, A partir de este diseño, selecciono aquí una caja en particular. Supongamos que estoy seleccionando esta casilla en particular. Ahora quiero cambiar el trazo. Bien, quiero seleccionar el trazo y voy a cambiar el trazo de esta casilla aquí, puedes ver ahí está el cambio en mi caja. Y puedo otra vez, venir aquí y cambiar el color del trazo a algo así. Bien, algo en este color. Guarde este aquí. Y da click en bien. Aquí, puedes ver ambos cambios aquí. Si solo tomo un zoom a pantalla completa, muevo este con y, tuve que aquí. Ustedes pueden ver que yo también estoy trabajando aquí. Y también puedo ver en qué está trabajando mi pareja. Bien, supongamos que quiero añadir algún comentario. Bien, si estoy agregando un comentario aquí, supongamos parte aquí. Entonces lo que voy a hacer, simplemente tomaré este marco y lo pondré justo al lado de este. Con mi herramienta de mano, puedo moverme y ver qué es. Bien. Como estoy aquí en la misma computadora portátil, ambas, entonces es bastante difícil hacerlo. Pero espero que ustedes estén entendiendo lo que estoy tratando de hacerles entender, como cómo ustedes pueden colaborar, cómo ustedes también pueden trabajar. Supongamos que quiero agregar un comentario y quiero decir como cambiar la forma de la caja a rectángulo sin ningún cambio en el radio de la esquina. De aquí en realidad puedo mencionar como, puedo mencionarlos si los acabo de enderezar o puedo mencionarlos en consecuencia. Bien, si quiero mencionarlos, puedo mencionarlos como quiero mencionarlo, solo voy a renunciar a un emoji también. Ahora bien, si presento este aquí, se les notificará que he enviado un mensaje. Bien, veamos aquí. Como pueden ver aquí, ya tengo mi mensaje. ¿Qué mensaje es este de aquí? El mensaje o el cuadro de comentarios Además, se me notificará que tengo un mensaje para mí. Bien. Aquí. Una vez que abro este y pueda ver el mensaje de que me está diciendo que cambie la forma de la caja y sin ningún cambio en el radio de la esquina, lo haré desde aquí. Y podemos colaborar así. Si ya he resuelto esa cosa en particular o ese problema en particular que me estaban diciendo, entonces puedo hacer clic en Resolver. Pero aquí no quiero cambiar nada. Solo para mostrarles el uso de la opción de compartir y también la opción de comentarios, como lo importante que es esto cuando estamos trabajando en grupo. Supongamos que aquí sí tengo tantas páginas para un marco en particular o una página en particular, también puedo dividir el trabajo por ellas. Supongamos que si simplemente hago clic en este marco en particular aquí en esta caja. Ahora quiero compartirlo y quiero decirle que trabajas en este archivo en particular solo para eso solo puedo hacer click en él. Como pueden ver, ahora esto está vinculado a la selección, y solo voy a marcar la marca en esta. A partir de aquí, en realidad puedo volver a invitarlos y ellos pueden empezar a trabajar en eso. Esta es otra característica que está siendo ofrecida por Figma para una mejor opción fácil de usar Ahora espero que ustedes hayan entendido cómo realmente pueden compartir su archivo y agregar un comentario, y cómo nos es bastante útil. Espero verlos a todos en el siguiente tutorial donde aprenderemos cómo pueden usar columnas y calificaciones en su archivo Figma Espero verlos a todos en el siguiente tutorial. El siguiente tutorial es útil. Espero que ustedes puedan hacer su propia aplicación al final de este tutorial. Cuida a todos y nos vemos en la próxima clase. 10. Columnas y cuadrículas: Hola a todos y les damos la bienvenida a todos a otro tutorial en Figma aquí Este es el capítulo número nueve y vamos a aprender sobre las columnas y cuadrículas. En esta clase, vamos a estar aprendiendo cómo puedes usar las columnas y la cuadrícula. Cómo se puede cambiar el color, la intensidad, el canalón de la columna También les diré qué es eso. También cómo puedes usar esto y obtener un tamaño o hacerte una idea de cómo diseñar tu página web. No perdamos el tiempo, Empecemos con este tutorial. Ahora, estoy aquí en mi espacio de trabajo, o el lugar donde voy a ir básicamente ahora. Primero voy a estar creando un marco. Aquí ustedes pueden ver por crear un marco, voy a estar creando capas o dos páginas básicamente, una será para escritorio. Para eso, sí tengo un tamaño de escritorio estándar, pero ustedes también pueden investigar y ver cuál es el tamaño de escritorio más utilizado. Escritorio para el que básicamente estás usando ese archivo. Solo tomaré un tamaño particular que es de 1,440 en 2024. Yo me quedo con eso. Y aquí se puede ver que sí tengo este marco, que acabo de seleccionarlo del Recinto Bien. Sí tengo el texto de uno aquí. Ahora, voy a estar creando, de la misma manera, otro frame pero en una página diferente. Bien. Sólo voy a añadir otra página. Voy a nombrar esto, ****, esta página superior. Voy a nombrar esto como página móvil. Yo sí tengo este de aquí. En esto también, voy a tratar de crear un marco. Y lo tomaré de mi precepto. ¿Qué lado debo tomar? Lo llevaré por teléfono 14 pro max. Voy a hacer clic en este de aquí. Ustedes pueden ver que tengo mi marco aquí. Bien. Lo que quiero hacer aquí es que quiero poner algunas columnas. Bien, Aquí justo debajo del diseño automático, puedes ver una opción llamada Layout Grid. Lo que voy a hacer es que voy a estar dando click en este lado positivo aquí. Como puedes ver aquí, puedes ver que sí tengo una grilla, pero para mi no quiero grillar, quiero conseguir algunas columnas aquí. Tengo la configuración de la cuadrícula de capas justo en el lado izquierdo, y voy a hacer clic aquí. En lugar de grilla, elegiré columnas de aquí. Después de elegir columna aquí, se puede ver que el conteo es de 12. Pero para mí la cuenta es de cinco. Pero quiero 12 12 porque este es el tamaño estándar o el tamaño de columna, recuento de columnas para la mayoría de los diseños gráficos. Yo sólo quiero ir con el impago. Si quiero cambiar algunos colores, puedo cambiar esos colores también a partir de aquí. Bien, en realidad puedo aumentar o disminuir todo esto a partir de aquí si quiero cambiar el ancho y la altura. Y aquí se puede ver la cuneta. Canalón, básicamente el espaciado entre ambas columnas. Bien, aquí, esta parte mal, que está en blanco, a esto se le llama la cuneta aquí Si aumento el tamaño, supongamos que si pongo 40 aquí, se puede ver que cambió de aquí. la misma manera si solo la disminuyo a diez, se puede ver que cambió. A partir de aquí disminuyó. También puedo elegir cómo quiero que sea mi columna. Lo quiero en el centro izquierdo, derecho, o quiero que se estire a lo largo de mi página. Este es el mejor formato. De la misma manera vendré aquí en la página del móvil, llegaré a mi grado de capa. Como voy a dar click en esta opción más, selecciona las columnas desde aquí. Aquí también, tomaré 12. Este diez. Este solo lo voy a mantener en estiramiento. Bien. A partir de aquí puedo cambiar la intensidad del color también, si tomo. 50 aquí, se puede ver lo profundo que se vuelve mi color. Yo sólo quiero que el color se desvanezca. Y se verá bien si también pongo algún tipo de animación más o menos. Ahora lo que voy a hacer es crear más marcos. Supongamos para esto, para uno, voy a crear un marco aquí. Yo sí tengo un cuadro aquí. Bien. También me llevaré otro de aquí. ¿Bien? Simplemente llenaré esto de un color profundo. Déjame tomar algo oscuro. Bien, desde aquí. Esta será la columna aquí. Voy a crear otro marco. A partir de aquí, me llevaré el cuerpo principal. A partir de aquí, sólo voy a mover esto mucho. Bien. Yo también tengo mi marco aquí. Tomaré otros marcos pequeños aquí. Bien, selecciona esto. Voy a seleccionar esta. Voy a duplicar esta capa aquí. Yo sólo me llevaré esto aquí también. También aquí. Ahora sí tengo estas cuatro columnas. También puedo poner algunos colores si quiero. Supongamos aquí quiero poner un color diferente. Supongamos que lo quiero negro oscuro. También quiero poner este en un color diferente aquí. En ese caso, a lo mejor voy a Algo en verde. Yo también lo haré aquí. Algún color diferente. Simplemente voy a elegir mi color en consecuencia. Aquí rojo, en azul. Aquí, algo en sí, esto está bien. Este será el diseño de la misma manera. Voy a pasar a la página siguiente. A partir de aquí, voy a estar tomando un marco. A partir de aquí, voy a elegir cisne. Después de eso, estaré creando una página principal aquí. Este será el cuerpo. Supongamos que quiero crear un folleto o un volante. Puedo empezar así desde aquí. Bien. Ahora voy a estar creando cuatro cajas más a partir de aquí atrás. Crear una caja de aquí a allá con mi viejo. Yo sólo voy a copiar esto. ¿Qué copia antigua aquí? Yo sí tengo cuatro cajas aquí. Todas las cuatro cajas. Si trato de seleccionar de una vez, supongamos que quiero seleccionar solo estos fotogramas en particular. Desde aquí, puedo dar click sobre esto, esto, y esto. Ahora lo que voy a hacer es cambiar su color en consecuencia de la manera que yo quiera. Bien, supongamos que les voy a dar este color, pero voy a cambiar la opacidad del color aquí Ustedes pueden ver, también puedo alinearlo de la manera que yo quiera. Ahora, los cuatro marcos están aliados. Voy a poner un color aquí también, esta capa aquí. Voy a poner otro color para esta capa en particular aquí. Puedes ver que he creado esto usando el verde. Tendrás un conocimiento sobre la idea si está en el centro o no. He creado esta capa desde aquí para esta página móvil. Además, sí tengo una talla particular a la que me refiero o prefiero. Yo puedo hacer el trabajo desde aquí también, desde aquí. De nuevo, déjenme mostrarles chicos, si vengo aquí, seleccionen este marco aquí. Yo sí tengo 12 columnas. Bien, ahora lo que quiero hacer es añadir márgenes. ¿Bien? En el lateral. También quiero agregar márgenes. Y por qué agregamos márgenes es básicamente cuando creamos una página web o una página de aplicación para móviles, a veces no queremos que las cosas principales o el tema principal estén a los lados. Bien, así que básicamente para ponerlos en medio, sí tenemos una buena idea al usar esta columna que donde poner esa cosa en particular. Básicamente para eso sí usamos todo esto y vamos a aumentar el margen a partir de aquí. Bien, déjame tomar diez. Y si hago clic bien, no hay mucha diferencia para mostrarles chicos. Tomaré alrededor de las 19 aquí. Puedes ver estos son los márgenes aquí a los lados, el ****** blanco Este es el margen y este es el principal espacio de trabajo para el teléfono. Supongamos que sólo voy a estar trabajando aquí en esta parte en particular y voy a editar, o voy a hacer el diseño aquí en esta parte en particular. Después de eso, si pienso eso, bien, solo necesito cortar estos lados, puedo cortarlos también. Esta también es una medida de precaución que es bastante útil y puede ser bastante útil mientras se trabaja en esto Déjame volver otra vez, volver a nuestros 12. Toma esto aquí otra vez. Espero que ustedes hayan entendido sobre esto. Ya les he dicho sobre el tramo y ya saben de la coloración. Bien. Si voy a esta página de texto, ahora sí tengo aquí 12 columnas, de la misma manera. Simplemente seleccionaré todos estos desde aquí. Éste. Ahora lo que puedo hacer es simplemente dar clic en esto, cambiar este uno a diez. Haga clic en Entrar. Si me preguntas cuál es el tamaño perfecto para una canaleta? No hay talla básicamente la que quieras poner ni ningún número, pero para esto, puedes poner algo como 50 a 20. Esto es bastante estándar, que se puede utilizar aquí. Si les muestro el margen chicos, bien, si pongo 60 aquí, pueden ver en los lados, yo también tengo los márgenes , ¿bien? Entonces puedo excluir mi trabajo de este lado y trabajar por mi cuenta en esta cosa. Déjame regresar y hacer esto ya que sí tengo 12 aquí. Si quiero bajarlo a seis aquí, sí tengo seis. Bien. Yo también puedo trabajar aquí. Solo necesito asegurarme de que estoy alineando todas mis cosas correctamente. Bien. Si acabo de poner esto de este lado aquí, éste debería estar en alguna parte de aquí. Este blanco aquí en el sitio. Puedo poner esto. Sí. Esto básicamente se ve bien. Esta es una de las formas en que realmente podemos alinear la página web tan bien. Así es como podemos. Déjame crear otra página donde voy a estar mostrando chicos la voy a justo como grilla. Voy a crear un marco o simplemente tomaré preset de aquí. Déjame tomar un escritorio o sí, preestablecido de escritorio. Si hago clic en esta opción de grado de diseño aquí, aquí pueden ver que sí tengo el grado de diseño. De aquí en realidad puedo cambiar el estándar uno es ocho a diez, básicamente. En los desarrolladores de teléfonos Android y Apple, desarrolladores aplicaciones, suelen hacerlo de este tamaño, ¿de acuerdo? Pero si estás trabajando para una empresa, estás trabajando para hacer tu propia aplicación. Básicamente se basa en tu necesidad, ¿de acuerdo? De la manera que quieras, en realidad puedes consultar con tantos diseñadores UI UX. No es que tengas que ser un codificador para convertirte en diseñador de UX Puedes comenzar desde Básico, aprenderlo, y luego puedes aplicar tu trabajo a un nivel avanzado. O puedes trabajar en un nivel superior donde entregarás tu trabajo a tu cliente. Una vez que estés haciendo un buen trabajo en el diseño, puedes ganar algunos buenos dólares desde aquí. Como pueden ver, también puedo cambiar el color. Aquí, lo mismo va con la rosa, la forma en que te he enseñado. Columnas. Las filas también, vendrá así. De la misma manera de las columnas. No les voy a explicar a detalle sobre esto, pero aquí solo pueden trabajar así y poner diferentes formas en consecuencia. ¿Bien? Ves como puedes ver, si voy a los lados, puedo ver una luz roja que está demostrando que si voy afuera. Bien, debería tenerlo en cuenta también. Aquí puedes ver esto. También, puedo crear diferentes tamaños. Si solo me alejo, puedo mostrarles mi trabajo aquí, chicos. Espero que ustedes hayan entendido esta clase en columna verde y también rosa ya que es bastante similar con el uso de columna. Espero que ustedes sepan la utilidad de las columnas y el verde que como te ayuda a hacer diseño. Espero verles a todos. En el siguiente tutorial estaremos aprendiendo sobre cómo básicamente puedes crear o usar colores en tu página web o en tu diseño. Al igual que, ¿cuáles son las diferentes formas de usar tu color? Cuanto más color o equilibrio obtengamos mejor. Nuestra página web buscará allí. Aprenderemos sobre la inspiración, el cuentagotas y cómo básicamente también puedes crear una paleta de colores Después de eso, también aprenderemos sobre cómo se pueden hacer gradientes. Por último, les diré chicos cómo pueden crear y usar estilos de color. En particular aplicación que su página web se verá tan atractiva y tan buena esperanza de verlos a todos en la siguiente clase. Cuida de todos. Adiós. 11. Inspiración de color, paleta de colores y herramienta de cuentagotas: Hola a todos y bienvenidos a todos a otro tutorial en Figma. En esta clase, vamos a aprender de donde todo lo que puedas obtener inspiración de color. Al igual que les voy a mostrar chicos sobre los sitios web desde donde pueden obtener colores coincidentes. Qué usar en tu página web o desarrollo de aplicaciones. Bien, después de eso, les estaré mostrando chicos cómo pueden hacer su propia paleta de colores. Y también sobre la herramienta Cuentagotas. Supongamos que sí tienes imagen o cualquier imagen y de ahí quieres sacar los colores que la están usando en tu página web o en tu diseño de UI. Les estaré mostrando chicos cómo pueden tomar esos colores en particular a partir de ahí, y también sobre algunos de los sitios web. No perdamos el tiempo y empecemos con esta clase Aquí ustedes pueden ver que estoy de nuevo en mi página de inicio. En última clase, les he enseñado a ustedes cómo pueden usar la cuadrícula y la columna aquí, voy a estar usando esa misma cosa, solo esos colores. Les estaré diciendo chicos si quieren combinar el color en su trabajo o en su proyecto de donde van a obtener esa inspiración. También les diré chicos cómo pueden usar realmente, lo dejo caer para que me guste cómo podemos extraer color de una pantalla en particular o un objeto y soltarlo donde quieran. Estaremos aprendiendo sobre todo esto en esta clase. También les voy a mostrar chicos cómo podemos hacer plantillas como ya les he dicho. Empecemos aquí. Tengo la última diapositiva de clase. Me voy a mudar un poco atrás. Ahora lo que voy a hacer es mostrarles algunos de los sitios web de donde pueden obtener su color. Este es el primero, que es el Autobl. Otro es Color.com ¿bien? Aquí puedes ver muchas combinaciones de colores desde aquí. Cualquiera que sea el color que te guste, solo puedes tomarlos Y también se puede ver desde aquí, sabemos poner un código. Si vengo de aquí, sólo puedo escribir ese código en particular. Supongamos que me gusta este color de aquí. Bien, éste. Bien, para eso acabo hacer clic en esto y se copió Yo sólo voy a entrar en mi página de Fima, seleccione. Yo sólo voy a pegar Enter. Ustedes pueden ver que sí tengo ese color en esta página. De igual manera, si elijo este de aquí, quiero cambiar el color. Puedo hacerlo de la misma manera, pero por ahora no quiero usar el color de fondo. Se ve bastante feo. Sólo voy a volver, aquí estoy otra vez de vuelta con mi fondo blanco aquí. Estos son algunos de los sitios web desde donde puedo elegir estos colores de color, y también todo desde aquí. Supongamos que quiero pegar todo esto. Yo también puedo tomar estos para tener una buena idea. Podemos usar eso. Bien, aquí puedes ver algunos de los colores populares que se están utilizando. Aquí podemos seleccionar colores para nuestro proyecto. Aquí puedes ver el color popular del mes del año, y también los populares de todos los tiempos. Bien, aquí sí tengo alguna colección de colores al azar. ¿Bien? No hay paletas en colección ya que he agregado ninguna, pero puedo hacerlo agregarla desde aquí Bien, si quiero solo un color aquí, puedo descargar esta imagen en particular. Y aquí puedes ver que se descargó. Bien. Ahora puedo tomar este color en particular de aquí, y solo puedo usarlo en mi trabajo. Bien. El siguiente sitio web, que es el Color.com aquí, esta es una inspiración de color más avanzada para Bien, desde aquí podemos ver la rueda de colores. Aquí sí tengo todos estos colores. Puedo reajustarlo de acuerdo a mi necesidad. Si algo me gusta sobre esto, me están mostrando los gradientes de esto, en los que uno irá bonito con qué color Aquí puedo sacar esas cosas en particular por aquí, ya pueden ver. Y también puedo seleccionar que todos los colores quiero. Si quiero explorar los colores primarios, también puedo explorar los colores primarios. Supongamos que quiero tomar o agregar esto a mi biblioteca. Sólo puedo hacer clic aquí. Este se agrega a mi biblioteca. Si quiero descargar un Jpeg, también puedo descargar el Jpeg desde aquí. Sólo para ver esos colores. Estas son algunas de las cosas. ¿Por qué continúa este color? Bueno, aquí puedes ver una imagen aquí arriba, bien, ahí mostraron la combinación de colores de cómo se verá en tu trabajo. Lo mismo va aquí, ya que se puede ver la imagen y cómo coincide. Después de eso, si voy a la opción Tendencias aquí también, ustedes podrán ver lo que todos los colores son tendencia en estos momentos. Para el diseño gráfico, estos colores son bastante útiles para la moda. Estos colores son una ilustración útil para el diseño de UI UX. Qué colores utilizan básicamente para cosas arquitectónicas, para el diseño de juegos, sabor salvaje, podemos elegirlo de aquí. No es que si estos colores solo se usan para el diseño de UI, no significa que tenga que elegir entre este color también. Supongamos que me gusta algo de estos colores. Yo también puedo descargar todos estos colores. Bien. Si estoy guardando algo en mi biblioteca, puedo verlo desde aquí. Este es un tema de color bastante agradable en mi biblioteca. Tengo estos dos temas de color. Bien, ahora si vuelvo aquí otra vez, si trato de sacar éste, ustedes pueden ver que voy a tener el color, déjeme verlo, en un lugar moto cromático Aquí puedes ver la paleta de colores. Si guardo este color, este color se agrega con éxito a mi biblioteca aquí. Ya ves, bien, si quiero ver eso, pruébalo, cómo se verá. Complementario, split. Complementarias. El doble split. No me gusta este borde de Opciones, pero ustedes también pueden usarlo. Se trata de diferentes tonalidades de color. Veamos cómo podemos usar este color aquí. Supongamos que vengo aquí, quiero colocarlo a imagen desde aquí. Como ya pueden ver, aquí también tengo una rueda de colores. Déjame poner esta rueda de colores encima aquí, tráela dentro. Entonces aquí sí tengo la rueda de colores. Y supongamos que tengo aquí mi trabajo particular. Bien, voy a elegir este, mantenerlo en una esquina. Voy a mantener esta rueda de colores aquí y mis diferentes temas. Justo al lado de eso, vendré a las descargas, y seleccionaré estas tres. Y voy a abrir aquí. Ya ves que tengo uno aquí ahí y otro aquí. Bien. Y voy a disminuir el tamaño uno por uno aquí. Tengo un conjunto de colores que puedo usar. Voy a alejar un poco ya que esto está aquí. Yo también tengo estos colores. Yo también tengo esto. Supongamos que quiero cambiar el color de mis cajas aquí, ¿de acuerdo? Y siempre asegúrate de tener tus colores de un lado, que no te confundas mientras trabajas en tu proyecto final. Bien, tengo todo esto aquí, ¿de acuerdo? Quiero animar esas cosas desde aquí. Lo que voy a hacer es que si selecciono esta, llegaré a esta opción de color aquí abajo. Simplemente voy a hacer clic aquí. Esta es la herramienta Cuentagotas. Bien, supongamos que quiero cambiar el color desde aquí, y he seleccionado la herramienta Cuentagotas Aquí puedes ver un color en particular. Tengo esta caja en particular. Una vez que elija cualquier color de aquí, ese color de caja en particular se cambiará. Déjame tomar este color y déjame seleccionar esta casilla aquí. Ahora quiero seleccionar este color de caja también. Para eso haré doble clic o simplemente haga clic aquí con mi color o la herramienta cuentagotas Seleccionaré este color en particular para las cajas. Voy a estar eligiendo un color desde aquí. Para eso, nuevamente, esto, antes de eso seleccionaré esta casilla. Se me cae su selección de herramienta. Algo en la oscuridad. De nuevo, yo también me caigo. Así es como puedes poner realmente el color que quieras. Así es como podemos hacer algunos trabajos aquí en esta página. Esta es una manera fácil de cómo puedes completar tu sitio web y no te confundirás que tendrás una buena idea sobre qué colores eres y qué puedes usar aquí en tu proyecto en particular, ¿de acuerdo? Antes de eso, solo necesitamos asegurarnos de que la página web se vea como va a quedar mi aplicación. En consecuencia, ustedes pueden poner esos colores. Supongamos que sí tienes un conjunto de colores, pero solo quieres modificarlos. En ese caso aquí, puedes ver aquí, puedes elegir la opacidad desde aquí Además, sí tengo esta opción justo arriba de aquí. A partir de aquí, en realidad puedes ver esos colores de la manera que quieras. Yo sólo voy a volver. También les mostraré chicos cómo podemos crear realmente una paleta de colores. Bien, supongamos que aquí tengo los conjuntos de colores. Bien, lo que voy a hacer es que me llevaré unas cuantas cajas rectángulos. Primero, tomaré esta pequeña caja rectangular, copiaré esta, copiaré esta otra, copiaré esta también. Yo sí tengo cuatro cajas aquí con mi herramienta cuentagotas. Voy a venir aquí, tomar este color en particular aquí. Quiero, tengo este color aquí en mi caja ahora. Quiero crear diferentes tonalidades de este color en particular. Sí, creo que sólo voy a eliminar este también, y este también. Ahora, voy a copiar esta caja en particular desde aquí. Como pueden ver, una vez que me he duplicado, sí tengo este color aquí también. Desde aquí veo la sombra que quiero. De igual manera, puedo crear otra caja. Ahora bien, este color se copia aquí en mi caja de película. Además, sí tengo el mismo color. Ahora puedo elegir un tono diferente de aquí. Nuevamente, simplemente continuaré el proceso de cuántos tonos de este color en particular deseas. Ahora sólo voy a ir a alguna versión más ligera aquí. Yo sí tengo una paleta de colores particular, como pueden ver. Bien. De la misma manera si quiero crear una paleta particular para este marrón. Bien, es marrón. Sí, lo es, pero algo marrón claro y no muy oscuro. Está en algún lugar en el medio. De la misma manera lo que voy a hacer es llevarme mi caja rectangular. Voy a crear una caja rectangular aquí. Pon cualquier color usando este. O supongamos que voy a tomar algo en azul. Bien, tomemos verde. Bien, tengo este verde aquí. Ahora, ven aquí y copia de nuevo la caja. A partir de aquí, puedo elegir un tono diferente de este verde. Copia este, y también cambia el tono desde aquí. Bien, ahora sí tengo un poco más ligero, y otra vez haga clic en Shift en A. Bien, vendré aquí y ahora tomaré otra versión más clara de este color. Aquí les he enseñado chicos cómo pueden crear una paleta de colores. Si quieren guardar este color en particular, ustedes pueden guardar esto. Supongamos que quiero guardar esto o copiar éste a otra página. Vendré a esta página aquí, voy a pegar esto aquí. A partir de aquí en realidad puedo disminuir el tamaño de éste. Pero aquí otra vez, se puede ver que sí tengo los colores también. Espero que ustedes hayan entendido cómo ustedes realmente pueden obtener inspiración de color de la que todos los sitios web. Y cómo se puede crear una paleta de colores. Y también el uso de Eye drop, dos como gotas para los ojos diferente tipo de color desde un objeto secundario hasta tu cosa final o hasta tu proyecto final. Como ya les he dicho chicos que el ob, vamos a venir aquí el color doo.com Este es bastante avanzado nivel de rueda de color, o desde donde podemos elegir color Supongamos que sí tienes una imagen en particular contigo, bien, En esa imagen te gusta el contraste de color de esa imagen en particular. Lo que puedes hacer simplemente es que puedes traer esos archivos en particular o esa imagen en particular en este y subirlo desde aquí. Lo que hará es extraer el color de esa imagen en particular y guardará como paleta de colores para ti. Bien, si quieres usar ese color en particular, déjame seleccionar un archivo de aquí. Bien, aquí pueden ver que sí tengo este logo de Fib. Bien, voy a dar click en esta figal. Voy a abrir esto. Y aquí se puede ver que sí tengo esta paleta de colores aquí. De hecho puedo guardar este color. Bien, aquí lo ves. Si quiero crear una nueva biblioteca y guardar esto, puedo hacerlo. Pero si quiero salvarla de aquí, puedo salvar esto también. Bien, este es el colorido . Voy a guardar esto. Si quiero llevarme el brillante aquí, puedes ver cómo se ve, el silenciado. Hay diferentes formas de cómo podemos seleccionar esto en realidad. Si desea reemplazar la imagen, también puede reemplazar la imagen. Déjame volver a esta de esta imagen. Además, si quieren extraer gradiente, que es nuestra siguiente clase, estaré mostrando chicos cómo podemos crear degradado y diferentes opciones bajo eso. ¿Bien? Desde aquí también se pueden ver los diferentes gradientes de éste, ¿de acuerdo? Supongamos que si vengo éste y de aquí selecciono el nivel de degradado de aquí. ¿Bien? Si quiero copiar este, puedo copiarlo desde aquí. Como ustedes pueden ver, yo también tengo esa opción. Si quiero guardar este gradiente, también puedo guardar este gradiente. partir de aquí, ustedes pueden ver la relación de contraste entre este color, el color del texto y el color de fondo que está mostrando que este color en particular continuará con este fondo en particular si quieren usar todo esto y también pueden probar diferentes colores de aquí. Esta es una herramienta bastante útil que podemos usar para nuestro trabajo se vea mejor y tener una mejor idea sobre el contraste de color y sobre la coloración. Bien, entonces aquí ustedes pueden ver. Y también me dio un pase que, sí, esta combinación de colores se puede utilizar entre un texto y un fondo. Así es como realmente podemos usar esto. Si quiero importar color, ya les he enseñado a ustedes qué hacer. Yo quiero salvar a éste. Puedo salvar esto desde aquí. Bien, Desde donde pueda ver, iré a mis bibliotecas. De mi biblioteca, voy a tener los colores de aquí. Ahora como he seleccionado este color en particular, éste, solo puedo descargar esta versión Jpeg, venir a mi aplicación Fib, y desde aquí, colocar esa imagen en particular. ¿Bien? Si hago clic en esto, abriré este archivo en particular. Si quiero poner esto encima aquí, puedo poner esto desde aquí. Como pueden ver, sí tengo este combo de colores. Bien. Si quiero cambiar de talla, también puedo cambiar ese tamaño. Bien. Como pueden ver, sí tengo esto. Bien, desde aquí. Esta es una forma de cómo podemos sumar colores. Supongamos que voy a tomar este de aquí. Control de turno, mueve mi color. Bien, aquí voy a buscar los colores. También ustedes pueden este tema en particular desde aquí. Si voy a la opción Explorar, nuevamente, opción Crear desde aquí. También puedo tomar esos colores código de aquí. Simplemente puedo copiarlos y pegarlos en mi aplicación de comentarios. Espero que ustedes hayan entendido cómo se supone que deben usar los colores en su trabajo particular. Espero verlos a todos en la próxima clase. Aquí en esta lección, realidad hemos aprendido sobre tres cosas. La primera es de donde puedes obtener tu inspiración de color. Les he enseñado el sitio web, chicos. Y lo siguiente que aprendimos sobre la herramienta cuentagotas, cómo podemos dejar caer tu color Bien, Y también hemos aprendido sobre cómo hacer tu propia paleta de colores. En la siguiente clase, aprenderemos cómo básicamente puedes trabajar con tu gradiente. Al igual que cómo puedes hacer tu propio gradiente y cuáles son las diferentes formas de hacerlo. Bien, así que hasta que cuídate y espero verlos a todos en el siguiente tutorial. 12. Proyecto de clase 1: Hola a todos. Ahora bien, este es el momento de crear tu propia paleta de colores. Y este es el proyecto de clase número uno donde estaré revisando tu paleta de colores. Como para entender cómo es tu sentido de la coloración, vamos a estar haciendo eso. Salgamos a la clase. Les voy a estar mostrando, chicos todos los pasos que deben seguir. Y si te estás confundiendo, mi tutorial ya está ahí. Puedes referir esos tutoriales. Veamos qué es todo lo que necesitas hacer. Lo primero es que necesitas hacer una forma de rectángulo usando la herramienta de forma. Después de eso, una vez que hayas hecho esa forma de rectángulo en particular, puedes elegir cualquier color de tu agrado de la caja de color que les he mostrado chicos. Desde la opción de relleno, puedes obtener tu caja de color y podrás llenarla con cualquier color. Después de eso, estarás duplicando el cuadro de color relleno y seguirás cambiando la intensidad del color para hacer una paleta De lo contrario, también pueden elegir diferentes colores que van bien entre sí. Continuar con ese proceso en particular. Y mínimo, necesitas tomar cuatro colores, ¿de acuerdo? O cuatro cajas rectángulos. Esto es lo mínimo si ustedes pueden hacer más, mucho más felices Si ustedes pueden demostrar eso. Después de eso, selecciona todas esas capas y conviértalas en grupo. El último paso será exportar ese grupo en particular en su sistema y enviarlo en nuestra sección de proyectos que pueda ver su proyecto y tratar de entender su nivel de conocimiento en la coloración. Bien, les voy a enseñar a ustedes cómo pueden hacer eso también. Aquí sí tengo mi figma. Voy a tomar esta caja rectangular y voy a hacer una caja aquí. ¿Bien? Como pueden ver desde esta esquina, después de crear una caja, sí tengo mi caja de color. Este es el paso número dos. Déjame venir aquí. Bien, voy a elegir este, y déjame tomar algo oscuro. Bien, ahora lo que voy a hacer es haciendo clic en Alt, simplemente volveré a duplicar esta capa. Lo que voy a hacer es venir aquí, tomar algo más ligero otra vez. Con todo, sólo voy a duplicar esta caja de color otra vez. Ahora voy a venir aquí. Continuaré con este mismo proceso una y otra vez. Bien, voy a estar creando cinco a continuación aquí, éste. Y elige este color, o te llevaré aquí. Bien. Entonces aquí he creado mi propio panel de color. Aquí ustedes pueden ver que sí tengo cuatro cajas rectángulos y esas cosas son individuales. A partir de aquí lo que voy a hacer es simplemente agrupar estas cosas y bajaré aquí sobre esta opción de exportación, haga clic en esta. Desde aquí, ustedes pueden ver, primero solo vendré aquí y seleccionaré un grupo. Bien, puedo nombrar a este grupo como paleta de colores. Guarde esto, ahora vaya a exportar. Ahora, cuando vengas a exportar aquí, puedes ver la vista previa. Bien, quiero tomar este en el formato Jpa. Voy a aumentar este. Ahora voy a exportar esta paleta de colores y guardar esto aquí en mis descargas. Bien, ahora ya he guardado paleta. Déjame ir aquí y ver, ¿dónde está mi paleta de colores? Ahora ustedes pueden ver que sí tengo la paleta de colores aquí en formato J Pac. Eso es todo lo que ustedes necesitan hacer aquí en esta clase. En este proyecto de clase, espero que ustedes envíen sus trabajos. Estoy muy interesado en ver idea o ver tus conocimientos sobre colorear y hacer tus propias paletas de colores Voy a estar esperando ver trabajo. Así que cuídate de todos. 13. Degradados: Hola a todos, y darles la bienvenida a todos a otro tutorial en Figma. Entonces ahora estamos en nuestro Capítulo número 11, y vamos a estar aprendiendo sobre los gradientes. Eso, cómo podemos jugar con todos tus colores, cómo puedes hacer tus propios degradados. Y además, les estaré mostrando chicos un sitio web desde donde pueden obtener los gradientes Did Y a partir de ahí en realidad pueden copiar esos códigos de color y pegarlo en su aplicación No perdamos el tiempo aquí. Como todos pueden ver, ahora estoy en uno de los espacios de trabajo aquí. Les voy a mostrar chicos cómo pueden empezar haciendo gradientes. Yo sólo voy a ir arriba. Yo sólo voy a crear un marco. Voy a tomar una prueba de teléfono talla 14, Guarde esto de este lado y duplique esta capa. Sí, ahora sí tengo cuatro de los marcos aquí como todos pueden ver aquí, ya que ya he creado cuatro páginas. Ahora voy a tomar esta herramienta de rectángulo de aquí y voy a crear una caja rectangular que voy a estar usando para hacer degradado. Bien. Antes de eso, quiero mostrarles el sitio web de ustedes desde donde pueden obtener cualquier tipo de gradiente que puedan usar en su trabajo. Bien, Este es el sitio web, el gradient.com De aquí, básicamente obtienes diferentes tipos de gradientes y cómo puedes usar eso Simplemente puedes venir aquí, dar clic en este color en particular, puedes simplemente copiar y pegar este código en particular en tu aplicación. O si quieres agregar esto a tu biblioteca, puedes agregarlo con solo hacer clic aquí. Bien, sí tengo este, pero les voy a enseñar a ustedes cómo pueden hacer los suyos. Volveré a ir a mi aplicación facial. Ahora como sí tengo este y este está seleccionado, vendré aquí en la opción de relleno y bajo Phil, ustedes pueden ver una opción de degradado está ahí. Y una vez que haga clic en esa opción de gradiente aquí, pueden ver que sí tengo uno lineal, uno radial, ¿de acuerdo? Y angulo, una vez que ponga el color, ustedes podrán distinguir cuál es la diferencia. Y éste tiene forma de diamante, ¿de acuerdo? Supongamos que en su mayoría uso el lineal en el radial. ¿Bien? Déjame tomar este primer color de aquí. Déjame bajar azul. Bien, de esto en adelante, déjame tratar de llevarme cualquier cosa en rosa como puedes ver aquí. Y como puedo ajustar el posicionamiento es si lo tomo de aquí, solo mueve este de aquí. Se puede ver que en realidad puedo mantener, o de hecho puedo poner donde va a estar el color. Esta es una forma de cómo podemos crear nuestro propio gradiente aquí. De hecho podemos poner más de dos colores a partir de aquí. Bien, Si hago clic aquí, ahora sí tengo un punto aquí también. Bien, supongamos que quiero agregar uno aquí. Ahora voy a estar eligiendo tal vez un color diferente. Puedo elegir así. Este, voy a hacer que sea un poco profundo aquí. Ya ves que sí tengo mi gradiente. Pueden agregar esto tanto como ustedes quieran. Bien, puedes agregar más desde aquí. Supongamos que ahora sí tengo éste. Voy a cambiar el color de esto. Voy a mover este en la parte superior. Voy a mantener este en medio. Ahora puedo cambiar el color desde aquí. Como pueden ver, hay una, una vez que venga aquí, tal vez me lleve algo similar de aquí. Si quiero oscurecerlo, puedo oscurecerlo. Si solo quiero que sea ligero, puedo hacerlo ligero. Todo depende de mí. Déjame ir un poco por el lado más ligero. Este lo llevaré de este lado. Sí, mi gradiente ya está listo. Como pueden ver aquí, sí tengo gradiente. Si hago clic en Enter, ustedes pueden ver que tengo mi degradado listo. Si quiero copiar este, sólo voy a copiar. Uno, llévelo a otra página, pega esta aquí. Puedes ver que sí tengo el tamaño del degradado aquí. Así, podemos crear nuestro propio gradiente. Permítanme también mostrarles las otras tres opciones aquí. Sólo voy a volver otra vez a la misma página. Y voy a venir aquí, crear otra caja rectangular a partir de aquí. O déjame simplemente tomar otra forma. Bien, déjame bajar círculo. Bien, voy a estar creando un círculo desde aquí. Como pueden ver, sí tengo mi círculo aquí. Sí, sólo voy a mantener este en el medio. Ahora lo que voy a hacer es que voy a venir en esta opción de campo, ir a mi biblioteca aquí, ir por el radial. Y ahora seleccionaré un color diferente. Bien, déjame tomar rojo aquí. Quiero poner un poco de desvanecerse amarillento por aquí. Bien, desde aquí he seleccionado este. Ahora ve al amarillo. Y aquí se puede ver justo afuera del rojo, sí tengo mi decoloración amarillenta Lo traeré a algún lugar aquí en el medio. Sí, sólo lo traeré aquí. Y también puedo agregar diferentes colores. Al igual que si solo hago clic aquí y tal vez quiero un verde, lo que voy a hacer es poder seleccionar verde desde aquí. Bien, puedo seleccionar verde en alguna parte de aquí. Sí, puedo. Ahora, si quiero expandirme, también puedo expandirme. Bien. Puedo tomar este color verde de aquí. Voy a hacer que oscurezca. También voy a aumentar este también. Bien, aquí, me quedaré con esto aquí. Sí, puedes hacer radial también de la manera que quieras aquí. Se puede ver si también aumento el tamaño a partir de aquí. Así es como puedes jugar con todos los colores desde aquí. Bien, esta es una forma de cómo puedes jugar. De igual manera, también puedo agregar diferentes colores. También aumenta el tamaño. A lo mejor quiero aumentar el tamaño a partir de aquí también. Bien, si quiero hacer un arco, también puedo hacer un arco así si quiero aquí. Acabo de hacer un gradiente radial. Como ustedes pueden ver, espero que ustedes estén entendiendo lo que estoy tratando de mostrarles aquí. Ahora, déjame tomar un polígono aquí, déjame crear un polígono encima de Déjeme llevarlo al centro. Después de eso, lo que voy a hacer es seleccionar esto. Ahora les voy a mostrar sobre el angular, ¿de acuerdo? Primero voy a estar eligiendo color desde aquí. Ahora bien este voy a seleccionar tal vez este color en realidad. ¿Dónde quiero que esté este color? Como pueden ver, he seleccionado este color desde aquí. A lo mejor voy a añadir otra caja en esta esquina. Voy a aumentar este. Puedo elegir cualquier color que quiera. O supongamos que ya tengo un color en particular, que quiero dejar caer aquí Usando este color, puedo venir aquí, puedo escoger este color. Mi herramienta cuentagotas aquí, se puede ver que hay un cambio ¿Bien? De igual manera, puedo agregar un color diferente aquí. Bien, déjeme agregar este color ahora. Déjame solo aligerar este también. A lo mejor la combinación de colores no es tan buena, pero para mostrarles eso, ¿cuál es la diferencia entre eso de aquí? También tengo algunas de las opciones como X y también RGBs si creo otra caja aquí o si creo otra forma Bien, déjame tomar solo una caja rectangular, estaré creando a partir de aquí. Escoge éste. Déjame mover esto con mi herramienta de mano un poco para que ustedes puedan ver esto correctamente. ¿Bien? Ahora tengo esto. Voy a dejar caer este aquí abajo. ¿Bien? Voy a tomar el angular aquí. Se puede ver como básicamente podemos trabajar con eso. ¿Bien? A partir de aquí. O cambien el color aquí, ustedes pueden ver. Puedo añadir un color diferente aquí. Supongamos que quiero tomar un verde aquí, se puede ver una coloración verdosa Bien, déjame acercar esa caja en particular aquí. Aquí, puedes ver que si agrego un color diferente aquí, puedo seleccionar un color diferente como me guste. Bien, déjame tomar esto en este extremo, color verde. Esta es una forma de cómo podemos trabajar realmente en esta aplicación. Bien, de igual manera ustedes pueden poseer gradiente. Una vez que hayas terminado con eso, puedes simplemente hacer clic en Enter una vez que estés listo con tu degradado. También les he enseñado chicos cómo básicamente pueden llevar esto a otra capa. Si quiero copiar, iré a esta capa. Yo sólo pegaré este de aquí. Como pueden ver, quiero que sea del mismo tamaño que esta. Para ello, voy a dar click aquí, Escala. Quiero escalar uno. Ahora, nuevamente con la herramienta mover, seleccionaré esta, aumentaré el tamaño. Así. Sí, ahora casi tengo el mismo tamaño, pero también puedo ver el ancho y la altura desde aquí, 270-93-2022 Sí. Ahora ambos son del mismo tamaño. Como pueden ver, me estoy uniendo a ambos. Estos son los dos gradientes que he creado aquí. Nuevamente, vaya a esta página en particular. Déjenme mostrarles la última opción desde aquí, que es la forma de diamante. Bien, aquí cómo se verá la forma del diamante. Pero angular sólo estaba bien. Déjame tomar otra forma a partir de aquí. Déjame tomar una estrella. Déjame crear una estrella aquí. Mantengan esto en el medio. Ahora, pon una estrella selecta, elige el campo. Déjame llevarme un poco de color marrón aquí. En este punto, permítame tomar un color amarillo. Bien. Sí, color amarillo desde aquí. Y de la misma manera, también puedo agregar color diferente de aquí si quiero. ¿Bien? Justo abajo en el medio, si quiero agregar algo de rojo o simplemente está tomando todo el color, así es como básicamente podemos ajustar la coloración. Se puede ver que se está desvaneciendo ya que tendrá forma de diamante Bien. Aquí, si solo extiendo el tamaño de esta, el tamaño de la estrella, si quiero escalarla, puedo escalarla también de la manera que quiera. Déjame escalar esto a la baja. Sí, ahora esta está en el medio. Selecciona esto de nuevo desde aquí. Selección o la herramienta de movimiento, diamante lineal. Y da click aquí, ustedes pueden ver cómo se ve realmente. Bien, Aquí puedes ver un pequeño punto. Usando eso, puedo simplemente extender la línea. O también puedo poner este aquí. Aquí en esta diapositiva, quiero agregar un color. Bien, déjame tomar esta, y aquí ustedes pueden ver el color de mi estrella. Da click en Enter, y aquí tienes tu gradiente de estrellas. Bien, también quiero seleccionar esto o copiar esto a mi página de escritorio aquí, Pegar. Sí, también tengo este gradiente. Disminuir el tamaño. Sí, también tengo este gradiente. Espero que ustedes hayan entendido cómo pueden hacer su propio gradiente y diferentes tipos de gradiente. Y también les he enseñado chicos cómo pueden jugar con su estilo degradado. Estas son las cuatro opciones que ustedes pueden usar cualquiera, pero para mí, sí uso la lineal y la radial, mayormente de aquí. También puedo el desmayo de lo mucho que quiero, lo profundo, suave, quiero esos colores. Bien. Yo también puedo elegir desde aquí. Bien. Entonces espero que esta clase fuera clara. En la siguiente clase les voy a contar chicos cómo básicamente pueden hacer sus propios estilos de color o crearlos y usarlos en su archivo. Bien, les voy a estar enseñando eso, así que estén atentos con esta clase y espero verlos a todos en el próximo tutorial. Entonces ahora vamos a nuestra última lección de colorear. Cuida a todos y nos vemos a todos. 14. Estilos de color: Hola a todos, y darles la bienvenida a todos a otro tutorial en Figma. Entonces ahora estamos en nuestro capítulo número 12 y estaremos aprendiendo sobre estilos de color, como cómo puedes crear diferentes estilos de color, guarda aquellos que puedes usarlos en tu proyecto. Bien, entonces veremos como todos ustedes pueden hacer eso y nombrar esos estilos en particular que no se confundan. Te estaré mostrando cómo guardar tu color, cómo puedes aplicar, y una vez que puedas editar esos colores guardados también, les estaré mostrando cómo puedes editarlos y una vez que cambies ese color en particular desde el panel de edición, cómo cambiará todos los lugares donde hayas aplicado esos colores. Estaremos viendo todas esas cosas aquí en esta clase en particular. No desperdiciemos tipo L. Empecemos ahora con esta clase en particular. Nuevamente, en el proyecto anterior o la página aquí, bien, les estaré mostrando aquí chicos que cómo pueden crear un color y cómo pueden guardar ese estilo en particular, que les será fácil usar ese mismo color también en el siguiente proyecto. Vamos a crear otro marco aquí. Bien, voy a estar viniendo aquí en la opción de marco, voy a tomar lo mismo que ya tengo aquí. ¿Bien? Lo guardaré en algún lugar de aquí con mi herramienta de mano. Yo sólo voy a mover este que ustedes pueden ver correctamente aquí. Bien. Ahora lo que voy a hacer es llegar a la herramienta de forma, crear una caja rectangular aquí. Otro aquí. Voy a copiar éste, ponerlo aquí, mantener el y el espaciado. Sí, ahora esta está en el centro. Ahora lo que voy a hacer es que tengo este tipo de colores aquí como pueden ver. Permítanme traer este archivo también a algún lugar justo al lado de aquí. Estos son mis estilos de color, que sí tengo, cómo básicamente puedo guardar estos colores y aplicarlos donde quiera. Les estaré mostrando chicos que una vez que cambie cualquier color desde aquí, si quiero editar después guardar eso y aplicar esos estilos, ese color en particular se cambiará en todas mis páginas donde todo lo que he aplicado. Déjenme mostrarles un ejemplo que bien, aquí sí tengo este color en particular. Como pueden ver en el cuadro de campo, ya tengo este color, bien, O este degradado. Lo que voy a hacer es hacer clic en estos cuatro puntos en la opción de campo. Ven aquí, da click en esta nueva variable, y puedes ver que sí tengo un estilo aquí, me está diciendo que nombre a este color en particular, ¿de acuerdo? Voy a guardar este como degradado uno, ¿de acuerdo? Y si quiero agregar algún tipo de descripción también puedo agregar. Esto se hace como si tantos de nosotros estamos trabajando en una misma pestaña, quiero que ellos los hagan saber o que para qué cosa o qué parte del diseño, quiero usar este color. Supongamos que quiero usar este color para los botones. Tabs, solo puedo hacer click aquí, puedo dar click aquí. Y aquí se puede ver que sí tengo el color degradado aquí. Bien. Entonces ahora sí tengo este color degradado aquí, y ahora se selecciona este. Lo que quiero hacer es que también quiero aplicar este color en todas estas cajas. Bien, solo voy a hacer click aquí, ven aquí, ven a esta opción Feel, necesito venir aquí. Y aquí se puede ver este color en particular se está guardando aquí. ¿Bien? Ahora bien, si hago clic en esto aquí, puedes ver por qué se pega este color por aquí De igual manera, también puedo hacer esto con todo este color también. En biblioteca, solo tengo un color y puedo seleccionar este color como color primario y crear un estilo. Entonces toma este color. Voy a guardar este como el color secundario. Voy aquí otra vez, nombra esto como el segundo color. Ahora bien, si vengo a esta caja en particular, elige esta o esta. Ahora voy a poner mi color primario aquí. Voy a poner el color secundario aquí. Ahora sí tengo esto. Ven aquí y pon el color primario aquí. Voy a poner el color secundario. Yo también voy a hacer aquí, déjame quedarme con éste como el gradiente. Haga clic en Entrar. Ven a este pastel aquí, otra vez, estoy cometiendo el mismo error una y otra vez. Aquí, voy a poner el color secundario, ¿de acuerdo? Ahora, como he seleccionado estos colores en particular desde aquí, como pueden ver, este está lleno de estos tres colores de aquí. Ahora bien, si quiero cambiar este color, supongamos que sí tengo este. De hecho puedo cambiarle el nombre. Y aquí está la opción de edición de color. ¿Bien? Desde aquí puedo editar el color. Ahora bien, si vengo aquí y si cambio este color ahí, se puede ver donde quiera que haya aplicado ese color en particular, se está cambiando. Y ahora puedo dar click aquí. Como pueden ver, se está cambiando. Lo mismo va con este de aquí. En la opción de color secundario, quiero cambiar todos los colores. Quiero cambiar el sombreado aquí, ya ves puedo cambiarlo a partir de aquí Aquí se puede ver donde he aplicado esos colores pueden cambiar que llegan al color primario. Yo también quiero cambiar este color. Simplemente lo llevaré algo en rosa o solo quiero agregar un degradado o elegir este color. Sí, espero que ustedes hayan entendido cómo podemos realmente usar estos colores y guardar sus estilos de color, cómo básicamente podemos trabajar con todo esto. Una vez que he cambiado esa cosa aquí, ves aquí en esa caja en particular también, puedes ver que el color ha cambiado porque esta también es una caja rectangular y de hecho tomé ese color de aquí. Ahora puedes ver que el color primario es éste, Secundario es este, y degradado es este. ¿Bien? De igual manera, podemos agregar diferentes tipos de color. Nombrarlos, y poner descripción el sistema. También puedes usarlo en otras páginas. Supongamos que ahora estoy en esta página, pero aún así tengo mis estilos de color particulares aquí. Como pueden ver, aquí también tengo los estilos de color. Ahora, también de forma manual, ustedes pueden venir aquí crear estilo. Bien, déjame crear un estilo de color, o tengo esta opción. Iré directamente a cómo crear un nuevo estilo de color. Puedo seleccionar el color desde aquí. Supongamos que quiero salvar esto. Quiero nombrar esto como Fondo Color de Fondo. Puedo guardar este estilo en particular también desde aquí. También puedo cambiar el color de fondo desde aquí. Si vengo, sólo puedo seleccionar esta. Haga clic en Entrar. Supongamos que estoy aquí, seleccione este color. Por esto, también puedo cambiar mi color de fondo, pero no quiero usar ningún color de fondo por ahora ya que no se verá bien en esta página. Espero que ustedes hayan entendido esta clase de cómo pueden guardar su estilo y también cómo pueden crear su propio color. Cambiarlo en un solo lugar y se cambiará toda esperanza esta clase fue clara. Ahora, ustedes pueden aplicar esto en su archivo particular o en página web de su aplicación donde quieran. Espero verlos a todos en la próxima clase donde aprenderemos sobre imágenes como sobre el enmascaramiento y cómo podemos recortar nuestras imágenes. También cómo básicamente podemos poner una imagen aquí en nuestro espacio de trabajo. Así que espero verlos a todos en el siguiente tutorial. Hasta entonces cuídate y adiós. 15. Cómo usar imágenes en Figma: Hola a todos, y darles la bienvenida a todos a otro tutorial sobre Figma. Entonces este es el Capítulo número 30, y les estaré mostrando chicos cómo pueden usar las imágenes en esta aplicación en particular, como cómo pueden importar, cuáles son las opciones, y cuáles son todas las formas en que podemos hacer. También les voy a mostrar chicos que cómo en realidad pueden hacer alguna edición básica en su imagen. Te voy a estar enseñando eso chicos. Y también vamos a estar aprendiendo si tengo una forma particular o un lugar en particular en mi página de manera ya hecha. Entonces ahí en vez de color, ¿cómo puedo llenar ese lugar con una imagen Entonces les estaré enseñando todo esto aquí en esta clase en particular. Así que comencemos. Entonces ahora, como pueden ver, estoy de vuelta en la página donde sí tengo un marco aquí. Ahora, lo que voy a hacer es hacer clic en Control más Shift plus. Bien. Y después de hacer clic en esto, aquí puedes ver que esta es la tecla de método abreviado de cómo puedes hacer tu imagen aparezca en pantalla que puedes subir o importar imagen en tu trabajo en particular Entonces lo que voy a hacer es hacer clic en esta, y abriré desde aquí. Y como pueden ver, sí tengo mi imagen en mi ratón. Así que aquí puedo elegir el tamaño de la imagen. A partir de aquí, puedo elegir esta talla en particular, cómo quiero poner mi página. Entonces aquí, como pueden ver, he puesto por página aquí. Y hay otra manera de controlar el turno K. Y a partir de aquí, lo que puedo hacer es simplemente arrastrar esta cosa en particular y soltar. Pero aquí, si hago esto, el tamaño de la imagen, no puedo mantener a partir de aquí. Pero si quiero mantener el tamaño de la imagen, así que sólo voy a volver. Así es como podemos poner imagen. También podemos dar click aquí en la opción de forma a, y de la forma a opción, iremos a colocar imagen y video. Y una vez que vengo aquí, si quiero seleccionar alguna imagen, puedo hacer eso. Y supongamos que quiero importar más de una imagen a la vez, así que estaré seleccionando así. Aquí se puede ver, yo sólo voy a la pierna hasta tanto. Y ahora puedo abrir esto, y aquí se puede ver, ahora tengo 11 imágenes en mi ratón. Entonces lo que voy a hacer es crear el tamaño, la manera que quiero. Entonces aquí voy a poner otro otro. Entonces así, en realidad puedo cambiar o poner tantas imágenes diferentes al mismo tiempo. Y si hago clic en Control Shift, aquí ustedes podrán ver que crecerá proporcionalmente ¿Bien? Pero no necesito eso. Voy a tomar esto, esto y esto Aquí. Bien, ya está hecho. Entonces les mostraré toda la página. Y aquí se puede ver que sí tengo mis imágenes aquí. Y como se trata de tantos archivos, solo los pondré dentro del marco, los seleccionaré y elegiré la selección de fotogramas. Así que ahora aquí puedes ver que esto está bajo un marco, ¿de acuerdo? Entonces este es otro marco. Voy a mantener esto en un lado. Entonces este es el método de atajo o la mejor manera, cómo puedes colocar tu imagen. O si tienes un video, también puedes importar un video también. Así que déjame volver aquí de nuevo. Así que voy a entrar a esta página en particular aquí, fuera un poco. Haga clic en este. Y tráelo aquí en la cama. Bien. Entonces ahora sí tengo esto. Y aquí, lo que básicamente podemos hacer es si selecciono esta capa en particular, supongamos que quiero seleccionar toda esta capa, estas dos capas aquí. Este es un cuadro. Déjame ver lo que todos los demás hicieron eso. Bien. Yo sí tengo este marco Así que sí, ahora, lo que voy a hacer es simplemente sacar esta imagen en particular de aquí, y voy a estar poniendo una imagen propia. Entonces para eso, lo que voy a hacer es una vez que haya seleccionado esta imagen, llegaré a esta opción de relleno, haga clic en esta. Y aquí se puede ver que tengo la opción de imagen. Entonces aquí puedes ver que seleccioné esta opción imagen. Y ahora, si solo vuelvo o hago clic en Entrar. Ahora sí tengo éste. Ahora si voy a esta opción de llenado. Aquí pueden ver puedo elegir una imagen. Supongamos que quiero poner ahí esta imagen. Simplemente voy a hacer clic en abrir. Aquí pueden ver que sí tengo la imagen justo debajo de esto. Yo sí tengo mi imagen aquí. Como pueden ver, sí lo tengo. Y aquí otra vez, voy a tratar de hacer una forma. Supongamos que sólo voy a tomar un círculo, hacer un círculo aquí, clic en esta opción de relleno, imagen, quien es una imagen de aquí. Y a lo mejor voy a tomar esto, voy a abrir éste. Aquí se puede ver que sí tengo mi imagen también aquí en el centro. Entonces así es como básicamente puedes poner tu imagen dentro de un ícono en particular también. Así que sólo voy a borrar esta. Entonces así es como puedes hacer eso. Y ahora, si de nuevo, vengo a esta opción de llenado aquí. Entonces como sí tengo en la imagen aquí, voy a elegir Así que como tengo esta, también puedo cambiar la exposición de esta, también el contraste. De la manera que quiero en realidad puedo hacerlo. Esto no es photoshop, pero podemos hacer parte de la edición básica de tu imagen desde aquí. Si quiero aumentar la temperatura, puedo hacer eso, y solo voy a usar este período un poco Bien. Se puede ver o. Los reflejos y las sombras. Esto está bien. Estoy contento con esto. Y aquí también puedo rotar la imagen en 90 grados a partir de aquí, como pueden ver, puedo rotar esto, así la voy a mantener así. Ahora, espero que ustedes hayan entendido esta clase de cómo pueden realmente poner imagen de acuerdo a la manera que quieran. Así que aquí también puedes animar el texto o si quieres poner algún cuadro de texto en algún lugar de aquí, como si quieres poner y quieres escribir como destacado por Figma. Y sólo voy a hacer clic afuera. Llévate esto arriba. Sí. Puedo hacerlo así. Y aquí se puede ver que sólo soy capaz de seleccionar esta casilla. Y en realidad también puedo cambiar el tamaño de la caja. Entonces ahora ya sabes que cómo puedes jugar con esta aplicación en particular en la opción de imágenes. ¿Bien? Entonces en la próxima clase, aprenderemos sobre cómo puedes enmascarar una imagen y cómo también puedes cm eso particularmente. Entonces espero verlos a todos en el siguiente tutorial y cuidar y adiós. 16. Complementos de enmascaramiento, recorte e imagen: Hola a todos y les damos la bienvenida a todos a otro tutorial en Figma. Entonces ahora estamos en nuestro capítulo número 14 y aprenderemos cómo puedes usar el enmascaramiento, recorte y algunos de los enchufes de imagen Les estaré mostrando chicos desde donde pueden obtener imágenes gratis para uso comercial o simplemente para trabajar en esas, para practicar desde donde se pueden obtener imágenes gratis de alta calidad. Te voy a estar enseñando eso chicos. Te estaré mostrando cómo básicamente puedes recortar una imagen de diferentes maneras y cómo podemos hacer el enmascaramiento básico en esta aplicación en particular. Empecemos con esta clase ahora estoy aquí en mi página. Lo primero que voy a hacer es estar exportando imagen como lo hice en la última clase desde aquí. También puedo hacer aquí. Se puede ver desde esa opción de rectángulo, puedo venir y dar clic aquí y voy a elegir una imagen, ¿de acuerdo? Básicamente para recortar imagen, lo que hacemos es que podemos simplemente hacerlo desde aquí si quieres que esta crezca proporcionalmente En ese caso, sólo puedo hacer clic en el turno de control y así es como podemos, y también puedo volver aquí de nuevo. Toma esta misma imagen y supongamos ahora estoy aumentando este tamaño de imagen. Esta es una forma de cómo puedes recortar, básicamente. Ahora bien, esto es suficiente si ahora quieres recortar proporcionalmente En ese caso, lo que voy a hacer es hacer clic en Control, o voy a dar click en Shift aquí. Ya ves que en realidad puedo mover la imagen proporcionalmente, ¿de acuerdo? Voy a seleccionar esta de aquí. Ahora también puedo recortarlo de aquí. Aquí puedes ver que la sensación es lo suficientemente buena y la alimentación también está bien. Pero si hago recorte aquí, se puede ver la opción de recortar como cómo puedo recortar esta imagen si aquí elijo imagen abierta desde aquí Como pueden ver, soy capaz de recortar esto. Déjame simplemente tomar esta imagen encima de esos. De lo contrario, movamos a este. A lo mejor aquí, sine o yo sólo tomé esa sombra. Ahora otra vez, vendré aquí y he ajustado el espacio de trabajo. Ahora ven a esta imagen. Ahora aquí se puede ver en esta opción de recorte, básicamente puedo recortar de un extremo así o puedo hacerlo desde los extremos también si quiero proporcionalmente En ese caso puedo hacer así. Aquí puedes ver que recortará proporcionalmente de todos los iconos de puntos azules Básicamente puedo recortar esta imagen. También puedo cambiar la exposición al contraste y esta es el contraste, saturación de la temperatura de la imagen, no quiero poner ningún matiz resaltado, esto se ve mejor y la sombra será así de mucho. Bien. Ahora ya sabes cómo puedes hacer eso. Si hago clic en Entrar aquí, pueden ver que hago mi imagen aquí, cual acabo de recortar. También puedes hacer enmascaramiento desde aquí. Para eso, déjame tomar otra imagen. Yo sólo voy a tomar esta imagen en particular de aquí. Como pueden ver, sí lo tengo en mi. Voy a mantener esta imagen hasta tanto. Ahora lo que puedo hacer es suponer que sí hago un rectángulo. ¿Bien? Y acabo de hacer este rectángulo en particular y quiero poner esto encima. Bien, Encima de esto entonces solo lo enmascararé, o me quedaré con este aquí. Ahora selecciona ambas de esta capa. Ahora lo que voy a hacer es haber seleccionado ambas de nuevo, sólo voy a enmascarar esto. Lo que voy a hacer es cambiar la opacidad a cero. Entra aquí lo hago. Tener la imagen, o ¿cuál es el problema aquí? A partir de aquí puedo cambiar la opacidad. Voy a volver. No quiero enmascarar, cambiar la opacidad de aquí Cero. Ahora voy a poder ver, esta es la página de imagen que tengo aquí. Como pueden ver, esta es la imagen, es como puedo enmascarar. Y les voy a enseñar a ustedes la otra forma de cómo podemos hacer eso. Voy a borrar la imagen de aquí. Yo sí tengo un aquí. Yo también eliminaré esto. Voy a tomar otra imagen. Ahora lo que voy a hacer es volver a venir aquí a la opción o simplemente voy a hacer clic en turno de control. A partir de aquí tomaré otra imagen. Voy a abrir esta. Ahora sí tengo esta imagen. Yo sólo lo voy a poner así. Esta ginebra ¿qué? Voy a hacer esta imagen desde aquí, voy a tomar forma aquí. Tengo aquí mi caja rectangular. Yo sí tengo estas cosas aquí. O primero voy a eliminar esta imagen. Toma esta de aquí. Déjame darle forma al tamaño aquí. Ahora voy a venir aquí de aquí. Quiero colocar una imagen aquí. Puedes ver, elige una imagen. Voy a abrir este de aquí, en realidad. Ahora voy a poder aumentar el tamaño. Supongamos que si tomo elipse en su lugar. ¿Bien? Y lo guardaré aquí. Coloca esa imagen desde aquí. A partir de aquí, abierto. He colocado esa imagen desde aquí y voy a venir aquí y voy a usar la opción como recorte de aquí. Básicamente puedo elegir todas estas cosas de cómo realmente podemos trabajar aquí. Así que en realidad puedo ajustar esto un poco más si soy la opción de cultivo ya vienen aquí un poco. Esta está bien. Simplemente puedo hacer click aquí y como pueden ver dentro del icono, también tengo la imagen. Bien, esta era otra forma de hacer esto, recortar tu imagen y la original o la forma de usar esta opción es primero lo que necesito hacer es simplemente seleccionar una forma Déjame tomar un triángulo de aquí. Ahora voy a traer esto aquí. Lo que quiero hacer es simplemente poner esto debajo de la imagen. Bien, aquí. Voy a tomar este debajo de la imagen. Bien, sí tengo este polígono. Sí, aquí puedes ver la imagen en la parte superior. Y sí tengo la forma justo afuera. Lo traeré en el centro. También voy a agregar solo la altura, bien. Sí, esto es pelea. Ahora lo que voy a hacer es una vez que seleccione ambas capas aquí, como pueden ver, puedo dar click sobre esta opción, ¿de acuerdo? Pero si hago clic solo en este de aquí, bien, voy a tener una cosa diferente aquí. Bien. Voy a hacer clic en ambos. Voy a usar esto como máscara aquí. Se puede ver que esta es una máscara. Ahora, también puedo cambiar el escenario desde aquí, ven aquí, así. Básicamente puedo recortar la imagen de la manera que quiera. Bien, esta es una forma de hacerlo. Si hago clic en Enter, ustedes pueden ver es la imagen o esta es la forma dentro de la cual sí tengo la imagen donde he usado esta opción como enmascaramiento aquí en mi capa. Además, ustedes pueden ver que sí tengo un grupo de máscaras. También puedo cambiarle el nombre de la manera que quiera. Escribiré Masking one. Voy a hacer clic en Entrar aquí. Se puede ver una vez que seleccione este, todo este asunto se está seleccionando. Pero si solo hago clic en particularmente este de aquí también puedo ajustar, como ustedes pueden ver, puedo ajustarlo así si quiero ajustar el polígono Puedo ajustarlo así. ¿Bien? Así que también podemos ajustarlo abajo de aquí según la forma que nos guste. ¿Qué todas las formas tomamos? Bien, depende de todo eso. Lo mismo que podemos hacer en muchos presets frame también. ¿Bien? Pero para poner todos estos iconos dentro de mi página web, básicamente hacemos formas en lugar de todo un frame. Bien, ahora aquí les he mostrado chicos cómo pueden hacer enmascaramiento, cómo pueden hacer cultivos de diferentes maneras Supongamos ahora si tomo un texto de aquí, bien, primero quiero escribir dentro de este texto. Vendré aquí. O con mi mano también. Veamos qué son todas las demás imágenes que tenemos aquí. Bien, seleccionaré esta imagen. Tráelo por aquí. Ahora, sólo voy a aumentar el tamaño. Sólo voy a aumentar el tamaño a esto como ustedes pueden ver aquí. Tuvo que mover el costado. Ahora con mi tipo también, lo que puedo hacer es que puedo escribir, bien, déjame tomar el color blanco de aquí. Escriba la herramienta, seleccione, ¿verdad? Bien, entonces tal vez solo voy a escribir como, esta es la página del efecto Adobe After After . Entonces solo escribiré Adobe after Effect. Bien, ahora lo que voy a hacer es simplemente seleccionar todo este texto de aquí. Yo sólo seleccionaré el conjunto. Ahora lo que voy a hacer es primero voy a venir y cambiar el color. Lo haré blanco. Lo que voy a hacer es simplemente aumentar el tamaño de este texto en particular. Bien, para eso también necesito seleccionar ambos del turno de control. Entonces este botón de aquí mismo, que es el botón de Parada Completa. Bien, voy a hacer clic en esto, luego el botón de Full Stop aquí, puedes ver que esta es una de las formas atajadas de cómo puedes trabajar realmente aquí. ¿Bien? O simplemente aumentar el tamaño de la fuente. Esto se ve bien, no está mal. Ahora lo que puedo hacer es que puedo subir aquí, sólo puedo ver este texto. ¿Bien? Si hago clic en esta página azul justo aquí arriba, cambio de color o cambio la opacidad Acercar un poco. Voy a sólo en la calidad de imagen no es tan grande. Pero mostrarles un ejemplo va a estar bien. Voy a poner este texto debajo de este marco. Ahora, sí quiero llevarme esta. ¿Dónde está básicamente la imagen? Veamos esta imagen. Quiero traerlo debajo de éste. Ahora no eres capaz de ver. Lo que voy a hacer es ahora lo voy a hacer, este cambio a cero. Ahora bien, si selecciono ambos, usa el enmascaramiento aquí. Ahora este texto, lo traeré arriba aquí, traigan en esta esquina. Voy a ajustar un poco el tamaño. A lo mejor 48 está bien. Sí, voy a tratar de ajustar esto para traerlo aquí. Sí, aquí está bien. Ahora, seleccionaré ambos y voy a hacer clic en esta opción justo en la parte superior aquí. Bien. Sí, una cosa que olvidé, necesito llevar esta encima. Bien, la imagen encima de mi escritura. Ahora bien, si acabo de hacer clic en este enmascaramiento aquí, ustedes podrán ver eso. Ahora sí tengo esta opción de enmascaramiento aquí. Bien, para que pueda ver debajo, Bien, si yo del enmascaramiento. Así se verá si soy dueño del enmascaramiento. Este efecto me va a dar aquí. Así es como realmente funciona. Espero que ustedes hayan entendido esta clase de enmascaramiento y recorte. Espero verlos a todos en el siguiente tutorial donde aprenderemos sobre restricciones y efectos antes de terminar esta clase. Permítanme también mostrarles cómo podemos realmente descargar imágenes gratis y también cómo podemos conseguir esas imágenes en sus plug ins Para eso, lo que voy a estar haciendo es que voy a ir a mi Chrome desde aquí. Buscaré en Splash aquí. Sí tengo un sitio web desde donde puedo obtener imágenes gratis, pero si estás trabajando para una empresa o cualquier cosa como tal, solo puedes decirles que vean su perfil y también puedes ver qué se puede usar y qué no se puede usar todo. ¿Bien? Si quieres conectarte con ellos, básicamente puedes conectarte con ellos. Y si quieres seguirlos, también puedes seguirlos desde aquí, puedes ver todas estas imágenes aquí. Ya puedes ver, bien, supongo que tomo esto, déjame tomarme una foto. Después de hacer clic en la imagen aquí, puedes ver toda la información básica como cómo obtuvieron las vistas y también cuántas descargas. Si quieres reportarlo por casualidad, puedes hacerlo desde aquí. También se puede ver cuándo se publica, en qué cámara y todo se utiliza. Otro sitio web que puedes usar son los píxeles. Si voy a pixeles desde aquí, desde aquí puedes ver, puedes buscar las imágenes aquí. Y también se puede ver la licencia. Como lo que todo está permitido usar. ¿Para qué fines? Aquí, todas las fotos y videos, los píxeles son de uso gratuito. No se requiere atribución. Al igual que no tienes que mencionar el nombre de la persona o las personas que crearon esto mientras lo mostras en tu trabajo, pero solo necesitamos darle crédito a un fotógrafo o píxeles no es necesario, pero siempre se agradece. No es necesario que tengas que hacer eso, pero si quieres eso, este es un buen gesto desde aquí. También puedes modificar esas fotos, videos a partir de píxeles, tratar de ser creativos y editarlos como quieras. Si estás haciendo algo identificable, es posible que la gente no aparezca con mala luz o esa manera ofensiva como si pudieras simplemente poner su imagen y hacer alguna mala edición. Supongamos que no puedes simplemente usarlo para cualquier propósito equivocado que todo esto diga. Ahora si vuelvo a mi Fagin, solo eliminaré todo esto Suprimir éste también. Ahora vine aquí en mi comunidad Figma. Volveré y buscaré tres imágenes. Yo sólo tomaré los enchufes de aquí. Ustedes pueden ver que tengo todas estas cosas aquí y aquí. También tengo la opción de unsplash. ¿Bien? Si solo quiero probar este en particular, puedo probar este en particular. Cómo puedes usar si ejecuto este. Veamos qué aparecerá aquí. Ven a este plugins, y ahora sí tengo mi chapoteo aquí también. Como todos pueden ver, ahora están abriendo el archivo. Así es como se verá aquí también. A partir de aquí, básicamente se pueden ver diferentes presets. Puedes buscar en algunos de los archivos editoriales. Si hago clic en este de aquí, puedes ver que esta imagen se está descargando automáticamente. Bien, he insertado una imagen como pueden ver. Ahora sólo puedo hacer esto a un lado. Regresa y yo sólo encajaré. Yo sólo me quedaré con esta. Regresa y puedo alimentar el tamaño de acuerdo a mi necesidad. Bien, cambia y puedo disminuir el tamaño de esta imagen. Entonces otra vez, retrocede el zoom al interior. Así se verá mi foto. Si pongo eso en enchufar. Esta es una de las formas más fáciles, cómo podemos hacerlo. la misma manera si vuelvo a la comunidad aquí puedes ver que sí tengo otras apps también desde donde solo puedo descargar imágenes. Bien. Así que aquí tengo yo generador de ebay por pick gratis. También puedes usar eso. Bien, desde aquí puedo agregar ese enchufe. Espero que ustedes hayan entendido esta clase sobre cómo pueden enmascarar y cómo pueden caer. También cómo puedes agregar algunas de las mejores imágenes e imágenes de uso libre. Les he enseñado chicos el sitio web y ahora también lo pueden descargar en su plug in, espero verlos a todos en la siguiente clase. 17. Componente y efectos: Hola a todos, y darles la bienvenida a todos a otra clase sobre Figma. Aquí en esta clase les voy a enseñar a ustedes sobre cómo pueden crear una composición y cómo pueden usar diferentes tipos de efectos en este software en particular. Entonces aquí les estaré enseñando a ustedes como pueden crear un botón y después cómo pueden usar eso en su mismo proyecto, en una página diferente. También les mostraré chicos cómo pueden guardar un efecto y usar diferentes tipos de efectos para diferentes tipos de vista. Bien, así que comencemos con esta clase. Ahora aquí otra vez estoy en el espacio de trabajo. Y a partir de aquí voy a estar mostrándoles componente para eso. Primero voy a venir aquí, tomar un círculo y como pueden ver, sí tengo este círculo. Con este componente, en realidad puedo hacer botones. Bien. Voy a escribir, voy a aumentar este 226. Seleccione éste. Voy a borrar esto. Regresa de nuevo. A partir de aquí voy a aumentar la talla 40, 45. Ahora solo voy a escribir, tal vez lo necesite un poco más grande. Escribiré alegato. Puedo seleccionar lo que quiera. Tiró de control de turno y esta llave. Simplemente haga clic en esto hasta el momento en que alcance el tamaño particular. Y esto está bien. Negrita. Seleccione esto de nuevo. Pondré éste entre el círculo. Ahora, también puedo agregar cualquier color a este círculo. Supongamos que quiero agregar un color rojo, o tal vez un verde. Puedo hacer esto desde aquí. Bien, Ahora lo que puedo hacer es, como sí tengo dos componentes aquí, puedo seleccionar ambos de esto de aquí. Como pueden ver, sí tengo la opción de crear componente y la tecla de atajo para eso es Control más A más K. Puedo dar click sobre eso o dar click en esta opción aquí. Como pueden ver, una vez que tengo este componente, se está salvando. Ahora déjame crear otra página. Bien, voy a crear un nuevo archivo de diseño después de crear un nuevo archivo de diseño aquí. Si voy a la opción esperar aquí, si vengo y aquí, si trato de ver, bien, si exploro biblioteca, sí, cometí un error aquí. No va a funcionar en un nuevo archivo, bien. No va a estar funcionando en un nuevo archivo, pero este componente aparecerá en el mismo proyecto. Pero si trato de crear un nuevo proyecto, se supone a partir de aquí, si intento crear un nuevo archivo de diseño, tendría ese componente. Pero en un mismo proyecto, en diferentes páginas, podrás verlo. Déjenme mostrarles aquí, chicos. Yo sí tengo este y he creado una página número dos. En la página número dos, si vengo a los bienes aquí, sí tengo el componente local con turno. De hecho, puedo bajar esto. Control de turno, básicamente puedo bajar el tamaño de este. Nuevamente, aumenta esto así. Bien. Control de cambio. Sí, esto está bien. Esta es la forma en que puedo hacer esto. Si quiero disminuir el tamaño, también puedo disminuir el tamaño de la manera que quiero aquí. Yo sí tengo esto, supongo que quiero disminuirlo. A partir de aquí, puedo disminuirlo. Bien. Espero que hayas entendido esta clase aquí. Ahora aprendamos sobre los efectos. Bien, como cómo podemos crear diferentes efectos para eso. De nuevo, tomaré otra forma a partir de aquí. Déjame tomar un polígono. Ahora he tomado un polígono de aquí. He seleccionado esto. Ahora lo que voy a hacer es que vendré aquí en la opción de efectos. Aquí puedes ver la opción de sombra paralela. A partir de aquí básicamente puedo cambiar la sombra. Se cambia el eje X, ahora el eje Y. Aquí se puede ver. Cómo se puede hacer eso. Coloca diferentes colores. ¿Bien? También puedes poner diferentes colores desde aquí. Además, en realidad también puedes elegir la profundidad del color. ¿Bien? Aquí si tomo esto o X, también puedo hacer con todos esos también. ¿Bien? Esta es una forma de cómo se puede hacer eso en la misma. Déjenme mostrarles sobre la sombra interior. Esta es la sombra interior. la misma manera que puedes ver, en realidad puedes cambiar los ejes x e y. Ambos son bastante similares. Aquí puedes ver el desenfoque. Bueno, si quieres cambiar el color, puedes cambiar el color. A partir de aquí. una sombra interior antes de que fuera eclipsar, pero en la sombra está dentro de mi objeto Bien. Ahora veamos esta tercera opción como el desenfoque de capa. ¿Bien? Si quiero difuminar esta capa en particular, cuanto quiero difuminarla, en realidad lo hago así, ¿bien? Ahí, puedes ver el efecto de desenfoque aquí. Se puede ver de nuevo el efecto de desenfoque, si selecciono este y voy a la última opción aquí, que es el desenfoque de fondo, bien, también puedo elegir esta. ¿Bien? Yo también puedo hacer esto desde aquí. ¿Bien? Pero déjenme tomar una imagen sólo para mostrarles a ustedes desde aquí. A lo mejor voy a tomar esa misma imagen aquí. Ahora, sólo voy a guardar esta imagen en algún lugar de aquí, ya que sí tengo esta imagen. En lugar de esto, déjame tomar un rectángulo. Lo que va a pasar es ahora si solo hago un rectángulo encima de esto, ven aquí, ve a la opción de efectos que puedo hacer es desenfoque de fondo. Bueno, esto no, básicamente. Ir a sombra paralela. Ve a este relleno, solo cambia la opacidad a diez. Bien, aquí ustedes pueden ver que sí tengo mi imagen aquí, permítanme mover este componente a alguna parte de aquí. Ahora lo que puedes hacer, sí tiene un marco propio. Ahora, una vez que venga aquí, básicamente puedo cambiar el encuadre El color también cambiará de la imagen, pero esto simplemente está sucediendo debajo de aquí. Selecciona esto, solo voy a poner un pequeño efecto aquí. También puedo tomar diferentes colores. ¿Bien? A lo mejor voy a aumentar este poquito. Ahora, espero que ustedes puedan ver el encuadre justo en mi foto A veces puede quedar bien, pero depende de ti mismo qué proyecto básicamente estés haciendo. Esta es una forma de cómo podemos jugar con los efectos aquí. Espero que ustedes entendieran. Y si tengo dos o tres efectos aquí y no quiero ver el efecto, solo puedo hacer clic en este. Y no voy a hacer que mi efecto se muestre este en particular. Si quiero añadir algún efecto, sólo puedo dar click sobre esto. Una vez que haga clic en esto, esta configuración en particular se guardará allí. Bien, espero que ustedes hayan entendido sobre esta clase en particular. siguiente clase será la última clase de este tutorial donde les voy a enseñar a ustedes cómo pueden exportar su imagen desde esta aplicación de comentarios. Cuídate de todos. Espero verlos a todos en el próximo. 18. Exporta imágenes: Hola a todos, y les damos la bienvenida a todos al tutorial sobre Figma. Entonces esta va a ser la última clase del tutorial de Figma Y si ustedes han hecho esto hasta aquí, espero que hayan disfrutado de la clase y gracias por asistir a esta clase. Y el último capítulo va a ser cómo se pueden exportar esas imágenes desde la aplicación en particular y diferentes formas y diferentes formatos de exportarlas. Si quieres exportar todo el marco, puedes hacerlo si quieres exportar algún artículo en particular. Básicamente, les voy a estar mostrando imágenes aquí, les voy a mostrar todo eso. Empecemos con esta última clase de Figma aquí. Yo sí tengo mi espacio de trabajo. Quiero seleccionar esta imagen en particular desde aquí, Solo esta quiero exportar. En ese caso, lo que voy a hacer es que vendré aquí en la opción de exportación. Da click aquí abajo, ustedes pueden ver en qué formato voy a tomar, este de aquí. Tengo el formato PNG, JPG, SVG y el formato PDF. Si quiero obtener una vista previa lo que estoy exportando, puedo ver aquí, Bien, solo estoy disminuyendo el tamaño de este. Esto es lo que estoy exportando a mi sistema. Yo sólo voy a exportar esta cosa en particular de aquí. Ven a la opción de exportación. Ahora lo que voy a hacer es seleccionar los dos X, Bien, esto es sólo la resolución. Si estoy viendo en una computadora RAM alta o rápida o una PC, entonces puedo seleccionar esta, que me dará una alta resolución de esa imagen. En lugar de PNG, tomaré un JPG y exportaré este fotograma en particular. Puedo seleccionar qué nombre quiero dar. Escribiré esto como archivo Figma. Ahora puedo seleccionar donde quiero colocar esto, Guarde esto aquí. Ahora si voy a este de aquí, mi Explorador de Archivos, y voy a ir a mis descargas desde aquí. Se puede ver que sí tengo este archivo. Déjame ver cómo se ve realmente. Este es el que acabo de tener de la opción de imagen. Lo mismo. Déjame hacerlo desde aquí. Bien. Supongamos que quiero tomarlo una x, ¿de acuerdo? O 0.75 x. Exporta el marco, guarda éste, ven y mira esto también. Como he descargado esto aquí, se puede ver el tamaño es menor aquí, pero ahí estaba dos x, ahora es 0.75 aquí. Si solo me acerco también a mi, esta imagen, la calidad de imagen es bastante mejor. Pero aquí, de la misma manera, si llego a este archivo, si me acerco, puede ver que la calidad no es tan buena comparando con ese otro, ¿de acuerdo? Esta es una manera que podemos hacer. Para mi PC, básicamente tomo dos x uno, ¿de acuerdo? También se pueden hacer tres huevos, cuatro huevos. Si quieres cambiar el ancho aquí, puedes cambiar el ancho también, diferentes métodos de uso de este. Si quieres guardar esta configuración de exportación, simplemente puedes hacer clic aquí y simplemente puedes agregar cualquier sufijo desde aquí, como si quieres usar 512 Bien, voy a exportar este archivo 512 y exportar ambos de este marco aquí. Ven a las descargas y guarda esto. Déjame volver de nuevo a este archivo aquí, vemos que las descargas reemplazan. Sí, voy a tener esos por aquí. Bien. Como sí tengo esto, voy a dar click aquí. Se puede ver esta imagen, o tal vez sea ésta. Bien, aquí puedes ver que cambió el ancho de esta imagen. En esta de aquí, han cambiado la altura de la imagen. Espero que ustedes hayan entendido cómo básicamente podemos usar o exportar su imagen desde esta aplicación en particular, entonces también la pueden usar en algunos otros lugares. Este fue el último. Espero que ustedes hayan disfrutado y aprendido todas las cosas que les he explicado y ahora estén familiarizados con esta opción en particular o esta aplicación en particular. Sigue practicando con tu diseño que cuanto más uses, más trabajas en esto, más aprendes de todo. También les he dado algunos de los proyectos de clase de proyectos que ustedes van a presentar en el panel de proyectos. Estoy muy ansioso por ver lo que van a hacer ustedes. Por favor envíen su trabajo y permítanme ver cuánto han aprendido de este tutorial. Cuídate y adiós a todos. 19. Proyecto de clase 2: Hola chicos. Este es el momento para proyecto de clase y estamos en nuestro proyecto de clase número dos, donde ustedes estarán haciendo su propio diseño. Ya sea un diseño de aplicación móvil o un diseño de página web, depende totalmente de ti. Después de eso, ustedes necesitan hacer prototipos. Ya os he mostrado chicos en el tutorial como pueden hacer esos pocos pasos que ustedes, estaré mostrando chicos y también les estaré dando una demo. Vamos a saltar a esa. Lo primero es que necesitas crear tu propio diseño particular. Y como te he dicho, puede ser un diseño web o incluso un diseño de app móvil. Asegúrese de que ustedes usen un mínimo de cuatro cuadros. Pero si estás haciendo algo más grande o algo que consiste en diez cuadros o más que eso, ustedes siempre son bienvenidos. Realmente me encantaría ver tus obras. Bien, después de eso, ustedes necesitan ir a la opción de prototipado, que está justo al lado de la opción de diseño Y conecta los marcos con el icono de iconos con los marcos. Entonces después de eso encienda el modo presente, como sé, hay dos modos, el presente y el modo de vista previa. Solo presente el modo porque se abrirá en una nueva ventana. Después de eso, solo comparte el enlace de tu proyecto en nuestra ventana y los estaré revisando. Vea cuánto progreso han hecho ustedes, entonces qué todo lo que han aprendido del tutorial. Déjenme mostrarles una demo aquí. Aquí ya he hecho diseño. Bien, este diseño los he mostrado chicos en el tutorial también. Yo solo les voy a mostrar chicos el prototipado ya que ya hice el diseño Pero ustedes hacen su propio diseño, traten de hacer esas cosas. También puedes obtener ayuda de la comunidad Figma. Toma sus fuentes, íconos ahí, estilo pagado. Ustedes pueden tomar esos y hacer los suyos. Bien, ahora lo que voy a hacer es ir a la opción de prototipo. Después de ir a la opción prototipo aquí, ustedes pueden ver que puedo seleccionar el de aquí, como pueden ver. Y voy a vincular este cisne con esta página. Y también puedo cambiar esto. Debe ser instantáneo o disuelto. Déjenme darle esto disuelto. Simplemente seleccionaré este botón aquí mismo. Toma este cisne y conéctate con esto. ¿Bien? Entra, entonces esta, la última, ¿de acuerdo? Y ENTRAR. Y quiero volver a mi página de inicio cada vez que haga clic en este botón de inicio en particular. Entonces lo que voy a hacer es simplemente conectar todos los botones de inicio con la primera página. Entrar. Bien, éste. Entrar. Seleccione esta otra vez. Me conectaré con esto, luego presionaré Enter. Yo hice mi prototipado. Si quiero ver el prototipado aquí, ustedes pueden ver que he conectado íconos con marcos, marcos con los íconos Ahora lo que ustedes van a hacer es que ustedes vengan aquí en esta opción y seleccionen esta opción presente. Bien, no el adelanto del presente. Aquí ustedes podrán ver que se está cargando en una nueva página o en una nueva ventana. Bien, ahora lo que puedo hacer es que si hago clic en esta relajación aquí puedes ver que puedo volver allá. Da click en esta página, aquí estoy. De vuelta a éste. Nuevamente de la misma manera que puedo hacer. Si también puedo volver manualmente aquí, puedo dar click en esta, va a volver directamente a esta página. Lo único que ustedes pueden hacer es compartir su trabajo conmigo. Ven aquí en la opción de prototipo compartido, solo haz clic aquí. Bien, cualquiera que tenga el enlace. Y solo ponlo como pueda ver porque no voy a estar editando el tuyo. Bien, solo selecciona este y puedes copiar el enlace desde aquí. Y solo pon ese enlace en particular en nuestro cuadro de proyecto. Tan simple como eso. Esperaré ver todo tu trabajo y cómo diseñas tu página. Veré la capacidad de ti después de unirte a esta clase, de cómo puedes diseñar tu propia página web y también prototipar en consecuencia. Cuídate, todos, espero ver tu trabajo así. 20. Proyecto de clase 3: Hola chicos, y ahora es tiempo de proyecto de clase. Ahora ustedes estarán haciendo el proyecto de clase número tres en el proyecto de última clase, donde estarán creando su propio gradiente. ¿Bien? Para crear gradiente, te he mostrado ya en el tutorial. Si hay algún problema que ustedes enfrenten, siempre pueden referir el tutorial. Bien, les voy a mostrar los pasos de lo que todo hay que hacer. Vamos a llegar a eso. Primero, necesitas hacer cualquier tipo de forma usando la forma para que pueda ser una estrella, una caja rectangular, un cuadrado o un polígono ¿Bien? Y luego puedes ir a la opción de relleno. Y desde la opción de relleno se puede ir al degradado. Después de eso, elige cualquier estilo de degradado, ya que básicamente hay cuatro estilos de degradado, modo radio lineal y angulo. Bien, ustedes pueden elegir cualquiera de ahí. Después de eso necesitas agregar más colores a tu degradado. Sigue haciendo eso. Y mínimo cinco colores que debes elegir. Después de eso. El último paso será exportar ese cuadro de degradado en particular o una forma de degradado en su sistema y ustedes pueden subirlo en nuestra sección de proyectos. Bien, veamos cómo van a estar haciendo eso por mí. Lo que voy a hacer es simplemente tomar una caja rectangular solo después de venir a esta caja rectangular de aquí. Puedes ver que sí tengo la opción de llenar aquí. ¿Bien? Debajo de la píldora, llegaré a esta opción de gradiente, que está justo al lado de la sólida de aquí. Ahora sí tengo esta opción, lineal, radial, angular y diamante debajo del gradiente. Pero lo que voy a hacer es que voy a seleccionar el lineal. Y como ya les he dicho chicos en el tutorial que me gusta usar el lineal y el radial quiero más. Voy a estar eligiendo cualquier color en particular desde aquí. Supongamos que voy a ir por algo oscuro. Bien, voy a tomar este color y voy a añadir más colores aquí. Entonces, ¿qué color elegiré? Déjame tomar esta, luego agregar otra caja aquí. Ahora déjame tomar algo más ligero. ¿Bien? Como ustedes pueden ver, puedo hacerlo de acuerdo a mi necesidad y puedo hacerlo de la manera que quiera. Ahora sí tengo tres y vuelvo a ponerse rojo, o simplemente volver, tomar otro aquí, y sólo voy a tomar un color rojo. Tomaré un rojo. El último, que voy a tomar aquí es este color, y voy a tomar un amarillo. Bien. Y en todo este color, básicamente puedo elegir sólido si quiero, si quiero desvanecer esto , puedo hacerlo. Siempre puedo mantener este forro aquí, estos cinco colores aquí, como pueden ver aquí. Aquí puedo cambiar la oscuridad. Aquí, sí tengo el degradado de color que he seleccionado. Y ustedes también pueden cambiar la opacidad desde aquí. Si quieres que oscurezca, puedes ir de este lado. He explicado todo el en el tutorial. Ahora lo siguiente que voy a hacer es que quiero exportar este. Seleccione esto, haga clic en Exportar. Aquí pueden ver, puedo ver la vista previa de cómo se verá si este es un PNG. Y aquí sí tengo el adelanto de un JP. Ustedes pueden descargar lo que quieran. Rectángulo de exportación de tres X. Sí, ya sólo lo diré. Veamos este de aquí. Ustedes pueden ver que hago mi gradiente aquí en el que usé cinco colores diferentes o cinco tonos diferentes. Estaré esperando a ver cómo ustedes hacen su propio degradado y quieren ver cómo pueden maquillar los colores y también entender el diseño de su color. Estoy bastante interesado en ver todo eso. Cuídate de todos. Solo espero ver algún buen trabajo de ustedes por parte de todos.