Figma para el diseño web UI y UX: lo esencial

1. Introducción: Hey ahi y bienvenidos a este curso que te va a enseñar lo esencial de trabajar con Figma. Oye, ahí, soy Chris Baron, diseñador profesional de web y aplicaciones, así como instructor de best-seller. En este par de horas, vas a aprender a levantarte y correr con Figma en poco tiempo. Y eso sin ninguna experiencia previa. Nuestro objetivo es acostumbrarnos al programa mientras te diviertes. Entonces por eso he inventado todo tipo de actividades y ejercicios para que puedas mejorar tus habilidades mientras haces algo divertido e interesante. Figma es lo más nuevo para los proyectos de diseño web y diseño de aplicaciones móviles. Se está convirtiendo rápidamente en el estándar de la industria. Por lo que es una gran cosa aprender a tener un nuevo CD. Figma compite con el sketch de Adobe XD en algunos otros programas. Para hacer este curso, vas a aprender todo lo que necesitas saber al respecto, incluyendo los conceptos básicos en cuanto a cómo instalarlo, además ¿cuál es mi toma como profesional? ¿ Es lo suficientemente bueno? ¿ Es mejor que Adobe XD y todos esos otros programas? Ahora, al final de estas horas, vas a tener un sitio web de reuniones terminado, un collage. Sabrás diseñar cargas, capas de texto, y tendrás una buena comprensión de los fundamentos y de Figma. Cosas como cómo enmascarar elementos, cómo trabajar con color, pero también cosas más avanzadas como cómo trabajar con cuadrículas, efectos de todo tipo, componentes y borradores. Por último, este curso forma parte de una serie y este es el inicio de tu viaje. Después de que esta parte se haga, debes continuar con los siguientes pasos para que puedas llegar a ser proficiente en Figma. Y con eso, pongamos la palabra. 2. ¿Qué es Figma y mejor es otros programas de diseño?: Hey ahi, esto es berro, menos hablar de Figma. Figma es un programa de diseño gratuito que te permite crear impresionantes proyectos de diseño web y app. Por lo que sitios web, aplicaciones de Android, y aplicaciones de iOS. Ahora que digo que es gratis, sí, es gratis y no hay limitaciones significativas al plan libre. Aquí puedes consultar la comparación. Básicamente, no podrás compartir cosas dentro de un equipo, pero eso realmente no es esencial. Si estás trabajando por sí solo, eres el bueno hace. Más sobre eso en otro video. Ahora, lo siguiente que debes saber sobre Figma es que hay mucho bombo alrededor de eso. La gente está hablando de Figma y lo impresionante que es. Tiene un impulso serio. Y lo puedes ver desde este gráfico aquí, al menos en cuanto a animar tus diseños, que se llama prototipado. Ahora, Figma parece estar creciendo como loco. ¿ Por qué los diseñadores aman tanto a Figma? Bueno, realmente no puedo decir que haya una cosa específica, pero déjame decirte mi punto de vista. Número uno, me gusta que varias personas puedan trabajar en Figma al mismo tiempo, en el mismo proyecto. Eso es totalmente impresionante. Ahora, para ser justos, otros programas lo están haciendo también. Por ejemplo, Adobe XD, lo segundo que me gusta, puedes usar Figma en tu navegador. Sí, ya oíste eso, ¿verdad? Puedes encender casi cualquier navegador, registrarte gratis y ponerte a trabajar. Tu computadora no tiene por qué ser tan poderosa. Necesitarás al menos Windows 8.1 o macOS Sierra, pero eso no debería ser un problema. Ahora, eso es todo. Nada más a ella. Una sugerencia, por favor instale el programa independiente aunque. Eso es lo que vamos a usar en este curso. Por favor pausa el video, crea una cuenta gratuita y descarga el programa. Nuevamente, puedes usarlo en tu navegador, pero prefiero usarlo como programa. No te voy a mostrar cómo puedes inscribirte porque es como registrarte en Gmail. Todo es súper simple, sencillo NADH. El tercer motivo por el que me gusta Figma es que es bastante fácil de usar para los principiantes, pero está construido para manejar los proyectos más grandes del mundo en este momento. Piensa en proyectos como Lyft o Uber. Piensa en las apps que tienen cuatro o 500 pantallas. Figma puede manejarlo, no hay problema. Y más que eso, Figma permite realizar rápidamente cambios en cientos de pantallas. Ese es el verdadero poder de Sigma. En realidad está siendo utilizado por el equipo de diseño de Rubens. Ahora una cosa antes de que sigamos adelante, Figma en tu navegador versus big man tiene un programa independiente. No hay diferencia entre ellos. ¿ Es el mismo programa, las mismas características? Si prefieres trabajar en un navegador, eso está totalmente bien, pero me gusta mantener las cosas separadas. Entonces aunque no hay diferencias, de nuevo, recomiendo la versión independiente del programa. A continuación, hablemos de Figma versus Photoshop, Illustrator, Sketch, Adobe XD y así sucesivamente. En primer lugar, no deberías comparar Figma con Photoshop e Illustrator. Aquellos a los programas de Adobe son increíblemente poderosos, pero della construida para otra cosa, completamente diferente. Photo shop es un programa increíblemente versátil. Puede hacer montones de cosas, pero porque es tan capaz, También es increíblemente lento. Es como un crucero lleno de montones de cosas para su disfrute. Pero como ofrece tanto, es muy difícil rodearlo y no es exactamente la definición de velocidad. Por decirlo muy bien. Ilustrador, de nuevo, similar a Photoshop. Es un programa fantástico. Me encanta, pero todo se trata de trabajar con vectores. Figma, por otro lado, se trata de diseño web y agregar proyectos de diseño. Eso es todo. Todo el programa gira en torno a estos dos tipos de proyectos. Y como se enfoca en sólo estas dos cosas, es más rápido, más fácil de aprender, pero también es increíblemente poderoso en ese sentido. Ahora, ingresos Adobe XD y sketch, que son competidores directos a Figma. Estos dos programas hacen las mismas cosas, pero ¿cuál es mejor con C? Esa no es la pregunta correcta. No hay mejor programa. Bmw serie tres contra Mercedes, clase C frente a la A4. ¿ Cuál es el mejor? El último iPhone frente al último Android, que es mejor. Pepsi o Coca Cola, que es mejor. Es cuestión de preferencia. Seguro que nuestras diferencias, pero al final del día, todos hacen lo mismo. Ahora, algo a destacar es que Figma es bocetos gratis $9 al mes. Xd es de unos $10 mensuales al momento de esta grabación. Y Adobe XD tiene una función de rejilla VBD, que es totalmente impresionante. Pero el figma tiene diseño automático y como puedes ver, es una lista muy larga de diferencias. Pero como dije antes, no hay claro ganador. Y lo vamos a decir otra vez. Hay montones de diferencias, pero no son algo en lo que hay que pensar. Confía en mí, aunque sean competidores directos, no puedo decirte cuál es mejor porque es algo subjetivo. Más que eso, tengo un curso de diseño web en Photoshop y un curso de diseño web en Adobe XD. Al final del día, no importa qué vaya a usar. Lo que importa es lo que se puede hacer con él. lo voy a decir una vez más. No importa con qué programa elijas trabajar. Al cliente no le importa, al desarrollador no le importa, la comunidad de diseño no le importa. Te voy a mostrar cómo preparar el diseño para la codificación, y eso funcionará para todos los involucrados. El codificador no tendrá que aprender Figma con Adobe XD con Photoshop. El cliente no tendrá que abrir el archivo fuente y jugar con él. Eso no es necesario. Entonces por estas cosas, puedes usar lo que quieras. Si eliges Figma y alegría que Pepsi y BMW. Eso es genial. Si eliges algo más, de nuevo, es lo mismo, no hace diferencia. Entonces por favor no te preocupes por ello y no te preguntes cuál es mejor. En cambio, pregúntate ¿ cuál prefieres? Y con eso fuera del camino, por favor pausa el video y asegúrate de tener instalado Figma como programa independiente porque estamos a punto de ponernos a trabajar. Gracias. 3. La pantalla de bienvenida en Figma: Hola y bienvenidos a esta conferencia. Abramos a Figma y acostumbrémonos a ella. Así es como se ve el programa al momento de esta grabación. un principio, hay mucho que mirar, pero vamos a simplificarlo. Para crear un nuevo proyecto. Puede hacer clic aquí en el archivo de diseño del lado superior derecho. Una vez que hagas click en él, serás llevado a tu nuevo proyecto. Sin preguntas, sin configuración. Grandes fusiones nos trae directamente a ella. Ahora, nota rápida, si vienes de Adobe XD o del Photoshop, no puedes abrir tus proyectos en Figma. Ahora mismo. Figma solo puede abrir archivos de boceto y eso se trata de eso. Por lo que realmente no puedes venir de un programa diferente con tus archivos anteriores. De acuerdo, Déjame cerrarlo para poder mostrarte otra forma de crear un nuevo proyecto. Y eso es con control y donde puedes recordar N por nuevo. Entonces eso es control. Y en este curso sólo nos interesan los archivos de diseño. Entonces por favor ignora esta otra opción no es necesaria. Si no te gusta ver esta opción, solo marca esta casilla. De acuerdo, volvamos a la pantalla principal o a la pantalla de bienvenida. Aquí es donde puede ver tus proyectos recientes y puedes cambiar esta sección haciendo click aquí. Te recomiendo esa versión en miniatura. No verás los mismos proyectos de tu lado porque estos son específicos de mi cuenta. Este diseño puede cambiar con el tiempo, así que no te preocupes si el tuyo no se ve exactamente como éste. Por ejemplo, aquí tenemos una sección de plantillas, pero solo podemos cerrarla en caso de que quieras revisar tu perfil, tu configuración, o cerrar sesión. Eso se puede hacer desde aquí ahora. De acuerdo, buenas cosas. Ahora, déjame mostrarte lo importante. Figma es muy grande en su comunidad. Da click aquí y obtendrás un diseño totalmente nuevo. Básicamente, aquí es donde tienes una tonelada de cosas gratis, plugins, regalos, cosas que te ayudan con tus wireframes, toneladas de cosas. Tienes una barra de búsqueda aquí si buscas algo en particular. Aquí están todas estas categorías. Ahora, sé que esto podría asustarte. Es mucho que aceptar, pero sepan que aquí nada es esencial. Estas son cosas que podrían ayudarte después de obtener más experiencia bajo tu cinturón. Estos son recursos que podrían convertirte en un diseñador más rápido, más eficiente, pero más adelante, como principiante, no debes enfocarte en ellos. En cambio, propongo que aprendas los principios del Diseño Web. Y después de tener una base sólida, puede comenzar a explorar estos archivos. Otra vez. Algunos de ellos son agradables, pero no al principio. Ahora, ¿cómo volvemos a la pantalla principal? Bueno, si haces clic aquí, no va a pasar nada. Lo que realmente necesitas hacer es hacer click en esta flecha aquí. Esto te llevará de vuelta. Por lo que tenemos recientes, borradores, y comunidad. Ah, por cierto, esto es en Beta. Por lo que puede cambiar cuando estés viendo este video. Si ese es el caso, no te preocupes, la funcionalidad va a ser la misma, ¿de acuerdo? Y cuando estás en comunidad, puedes volver haciendo click aquí. Asegúrate de echar un vistazo a este punto culminante, conozco entre la pestaña reciente por este color azul. Si has hecho clic en un proyecto de equipo por error, obtendrás otro diseño. Hablando de estimas, Figma permite trabajar con varios diseñadores al mismo tiempo, en el mismo archivo. Déjame reorganizar rápidamente mi configuración. Tengo el programa independiente en un lado y mi navegador en el otro lado. Imaginemos que este es otro diseñador. Ahora, a medida que muevo mi ratón, lo puedes ver aquí también. Entonces así es como es trabajar con varias personas en un mismo archivo. Pero eso no es para todos, así que no vamos a meternos en ello. Hablando de cosas que no vamos a cubrir demasiado era esta otra cosa llamada mermelada de higo. Podemos verlo aquí en la parte superior derecha, pero también cuando golpeamos Control N, y no marcamos esa casilla en la parte inferior. Verdadero rápido. El mermelada de huevo es una pizarra blanca que puedes usar para esbozar tus ideas. Déjame mostrarte cómo se ve eso. Básicamente es un lugar donde puedes intercambiar ideas, bosquejar cosas, crear una estructura para tus proyectos, y así sucesivamente. Pero piensa que el jam es una herramienta separada, no es esencial para nuestro trabajo de diseño web, por lo que no vamos a meternos en ello. Jam es genial para reuniones en línea donde varias personas quieren discutir algo. Funciona justo en tu navegador. Es intuitivo, por lo que es fácil empezar. Pero de nuevo, ya que no somos parte de un equipo ni de una empresa, lo pondremos a un lado. Sé que puede que tengas curiosidad al respecto, pero hay tiempo y lugar para eso y no es ahora. Confía en mí en eso. Está bien. Tomemos un descanso rápido y seguiremos en un segundo. 4. Comenzar con Figma: Bienvenido de nuevo. Pongámonos a trabajar. Pero les animo a ver la mayoría de los videos, sobre todo sus manos en las dos veces. La primera vez que miras. No trates de trabajar. Simplemente mira y entiende lo que está pasando cuando llegues al final del video, reinicia y vuelve a verlo, esta vez haciendo una pausa con la frecuencia que necesites para trabajar. Esta es, con mucho, la mejor manera de aprender. Entonces otra vez, no intentes trabajar conmigo en tu primera visualización. En cambio, haz eso la segunda vez que veas el video. Y por favor no uses tu teléfono. Es demasiado pequeño y no entenderás lo que está pasando. De acuerdo, empecemos. Por favor crea un proyecto nuevo con control y, o al hacer clic aquí, todo parece tan vacío. Pero vamos a crear un segundo proyecto usando el mismo control de teclas rápidas. Y está bien, echemos un vistazo rápido aquí. Nuestros proyectos son los que se muestran como pestañas. Si queremos volver a nuestra pantalla principal, podemos hacer clic aquí en este icono de Inicio. Justo así. Hacer moverse entre proyectos. Basta con hacer click en los nombres. En este momento ambos se llaman Sin título. Para cambiar ese enfoque aquí en medio de la página. Haga clic aquí, y ahora podemos renombrarlo. Yo lo llamaré Kress ganó. Ahora pasa a la otra y renombra eso para presionar también. Entonces Proyecto 1 y Proyecto 2, ¿verdad? Ahora Vamos a crear un rectángulo pulsando R, R para la herramienta de rectángulo, o simplemente puedes hacer clic aquí. Se puede ver que esta herramienta es la que selecciona porque tiene este resaltado azul. Ahora vamos a arrastrar uno. Es gris sobre gris, así que eso no funciona. Cambiemos este color. Esto siempre se hace desde este lado derecho. Este panel cambia en función de lo que está seleccionado. Ya sabes, el rectángulo está seleccionado porque tiene este resaltado azul. Si hacemos click en cualquier otro lugar, note que aquí tenemos muy pocas opciones. ¿ De acuerdo? Selecciona el rectángulo y en el lado derecho encontrarás a Phil allí. Por favor haga clic en esta plaza, no en las letras por cierto, en la plaza, aka la muestra. De acuerdo, eso va a abrir el recolector de color. Este es el recolector de color. Elige cualquier color aleatorio y luego pulsa la tecla de escape o que el botón de cerrar. Pero si haces clic en los caracteres, puedes escribir manualmente el código de color. Eso también está bien, pero eso no es lo que queremos ahora mismo. Está bien. Ahora tenemos una plaza roja dentro de Chris, para ir a las pestañas y la cabeza, este símbolo X, para cerrarla. Ahora bien, esto es realmente importante. Simplemente guardamos todo el trabajo que acabamos de perder. Pasaría. Escucha, todo está bien. Haga clic en el icono Inicio. Y en la reciente puñalada, verás berro a, este es el primero de la lista porque es el último proyecto en el que trabajamos. Si desea abrirlo, haga doble clic en él. Entonces el primer punto esencial es que Figma funciona con pestañas exactamente como cualquier navegador. Si quieres cambiar entre pestañas, haz click en ellas. El siguiente punto esencial, Figma siempre guarda tu trabajo, por lo que no hay necesidad de usar Control S ni ninguna otra tecla de acceso rápido. Figma guarda todo automáticamente. Pero eso trae la pregunta, ¿dónde se guarda el proyecto? Bueno, no están en tu computadora local. Todo se guarda en la Nube. Es por eso que Figma es impresionante. Si inicias sesión en cualquier otro equipo, tendrás acceso a todos tus archivos. Es así como múltiples personas pueden trabajar en un mismo proyecto. Ya que todo está en la Nube. Por lo que en Internet, todo el mundo tiene acceso a ella. Piénsalo. Si el archivo está en tu disco, otras personas tendrían que conectarse a tu computadora y eso no está bien. Pero debido a que el archivo se sienta en el servidor, en la web, todos pueden acceder a él. Es decir, si les permites, por supuesto, la nube es segura, rápida y muy fácil de acostumbrarse. El inconveniente es que sí necesitas acceso a internet. Ahora no es el fin del mundo. Si estás en un vuelo o te desconectas por unas horas. Una vez que vuelvas a estar en línea, el proyecto será subido a la nube una vez más. Pero digamos que no te gusta trabajar así. A lo mejor estás acostumbrado a los photoshops forma de guardar archivos. Tienes ese PSD en tu disco duro. Puedes copiarlo, pegarlo en una unidad USB, enviarlo por correo electrónico y así sucesivamente. Bueno, la cosa es que todos se están moviendo a la Nube. Photoshop también tiene esa opción. Adobe XD es grande en la Nube. Incluso boceto dejó muy claro el interruptor que la Nube es el futuro. Mi consejo, no lo pelees, aunque ahora no estés cómodo, pruébalo. Siempre y cuando nombre a los proyectos de una manera decente. Y se pueden ver las miniaturas. Deberías poder encontrarlos rápidamente, pero por si acaso simplemente no lo puedes manejar. Por favor haga clic aquí en el logotipo de Figma. Desde aquí, vaya a Archivo. Ahora elige guardar copia local. De nuevo, no lo recomiendo, pero sepan que pueden hacerlo. Hay algunos detalles más aquí y allá, pero vamos a saltar a un proyecto para ensuciarnos las manos. Trabajemos en algo. 5. Las mejores formas de mover en Figma: Bienvenido de nuevo. Hablemos de las mejores formas de moverse y de Figma. En primer lugar, por favor vaya a su pestaña de archivos recientes y haga clic derecho en estos dos proyectos que creamos anteriormente. Para eliminar el proyecto, basta con hacer clic derecho en él en la lista y elegir el salto. De acuerdo, por si cometiste un error, siempre puedes ir a borradores y partir de ahí tienes una sección eliminada. ¿ De acuerdo? Ahora, vamos a crear un archivo totalmente nuevo para controlar la tierra, qué, el método que prefieras, y pongámonos a trabajar. En un principio, sé que todo parece tan vacío. Cualquier proyecto comienza con un marco. Eso es lo primero que debes recordar. A-frame es como un tablero de arte o un lienzo, pero solo hay el poco diferente en Figma es un lugar donde agregas todas tus imágenes de texto, básicamente tu contenido Eso está todo dentro del marco. No te preocupes por la definición. A medida que trabajamos, pronto lo conseguirás. Para agregar un marco. Por favor, pulsa F para activar el muro enmarcado o simplemente haz clic aquí. Ah, por cierto, hace otra herramienta aquí llamada la rebanada morada, pero no queremos eso. De acuerdo, tenemos seleccionada la Herramienta Marco y el panel derecho acaba de cambiar. Tienes montones de opciones que están muy bien organizadas. Teléfono, tableta o escritorio y así sucesivamente. Y puedes hacer click en los nombres para abrirlos o cerrarlos. Y si haces clic en alguno de ellos, digamos iPad Mini, el marco se agrega automáticamente. También lo puedes ver en el panel de capas. Mira aquí este símbolo ese tipo de parece un hashtag. Ese es un marco para eliminarlo. Simplemente toca la tecla Eliminar y eso es todo. De acuerdo, pasemos a la sección de escritorio y elijamos el primer elemento de esta lista, que también se llama escritorio. Podemos ver el tamaño justo aquí. Es 1440 por 1024, entonces lo tienes. Ahora el problema es que mayoría de los proyectos de diseño web deberían comenzar con un marco que es 1920 por 1080. Por eso recomiendo encarecidamente la mejor manera de redimensionarlo es usar esta parte aquí. W es sinónimo de la web, y h representa altura en lugar de 1440, haga clic aquí. Y ahora puedes teclear en 1920. Lo mismo para la altura que buscamos, luego 80. Ahora el marco se expandió y no lo podemos ver muy bien. Esto es lo que debes hacer. Amplíe o aleje. Por favor, mantenga presionada la tecla Control y utilice la rueda del ratón. Si te desplazas hacia atrás, te alejarás. Si te desplazas hacia adelante, te acercarás después de hacerlo un par de veces se va a sentir natural. Por favor, usa tu mano izquierda, idealmente tu meñky, para mantener presionada la tecla de control izquierda en tu teclado. Ahora usa tu pergamino. Por favor, haga lo siguiente. Mueve el ratón en la coordenada del marco y amplía el zoom. Como puedes ver, esto realmente te ayuda a enfocarte en esa área. Ahora, aleje el zoom y muévase a otra esquina. Lo mismo. Amplíe desplazando hacia la palabra. Sé que esto parece algo muy básico, pero confía en mí, es esencial que practiques. No puedes avanzar hasta dominar estas cosas. Hay una cosa más que hay que saber usar, y esa es la clave de la barra espaciadora. Diga eso con Zoom luego a una esquina y con muy contentos con el nivel de zoom. Pero ahora queremos pasar a la otra esquina. A esto se le llama panning. Panning alrededor. Sostén la tecla Barra espaciadora y el cursor del ratón va a cambiar a una mano. Si sueltas la tecla de la barra espaciadora, volverá a los datos estándar, El bien movido, por lo que de nuevo, mantenga presionada la barra espaciadora, haga clic en mantener presionada, y se mueva de coordenada a coordenada, de lado a lateral, arriba y abajo. Al lograr dominar estas dos técnicas simples, estás creando una base muy sólida. Este es tu alfabeto. Esta es tu matemática básica, básica. Por favor, aprenda. No hay que moverse por eso. Para recapitular, mantén presionada la tecla Control y usa desplazamiento del ratón para acercar o alejar y mantén presionada la tecla Barra espaciadora, haz clic y mantén presionada para moverte de lado a lado para desplazarte alrededor, desplazándote por ahí. De acuerdo, por favor empiece un proyecto vacío y practiquelo porque la próxima conferencia va a ser un ejercicio. 6. Ejercicio: cómo mover elementos alrededor: Bienvenido de nuevo. Este es nuestro primer ejercicio. Esto es lo que quiero que hagas. Por favor descargue este archivo llamado primer ejercicio que FIG. Cuando lo encuentres, por favor arrástrelo a Figma. Deberías ver un punto culminante azul. Esa es una buena señal. Suéltala y el archivo se va a importar. Si no te gusta arrastrar y soltar, entonces por favor haz esto. Ve a la pestaña Inicio. Desde el lado derecho vas a ver este ícono aquí, justo debajo de tu avatar. Haz clic en él y podrás buscar ese archivo, seleccionarlo, y eso va a hacer lo mismo. Lo vas a abrir. Esto es lo que recomiendo, ¿de acuerdo? En este proyecto vas a ver dos marcos en el panel de capas. El primero se llama marco pequeño, y el segundo, cerebro grande. Y esa es básicamente tu tarea. Necesitas acercar este marco en el lado derecho, seleccionar uno de estos iconos y luego moverlo al marco grande. Como puede ver, sí necesita usar la tecla de la barra espaciadora para desplazarse y sí tiene que acercar y alejar. Yo quiero el asiento a iconos en cada rincón del marco grande. Esa es tu tarea. Asegúrate de moverlos de uno a la vez. No engañes. No es divertido de esa manera. Y por favor no muevan los marcos juntos, déjalos como están. Ahora, una última cosa, te darás cuenta de que el marco pequeño tiene otro marco dentro de él. Se llama enmarcado a. No quiero que eso se mueva dentro del marco grande, sólo del ícono. Ve cómo puedes manejar eso. Ahora bien, si estropeas algo, casi cualquier cosa, siempre puedes usar Control Z para deshacer varios pasos. De acuerdo, cuando termines, por favor exporta el marco grande como PNG y compártelo a la plataforma para que pueda verlo. Aquí te explicamos cómo puedes exportar en Figma. Seleccione el marco grande haciendo clic en este nombre. Tenga en cuenta que si simplemente hace clic dentro de él, no seleccionará eso. Así que haz click en el lado superior izquierdo o puedes usar el panel de capas. Basta con dar click allí. De acuerdo, Ahora muévete a ese paciente al lado derecho de la pantalla. Aquí la última opción se llama Exportar. Está gris, pero puedes hacer clic en él. A partir de aquí. Tenemos algunas opciones. Vamos a estar contentos con una X y B y G. Así que asumiendo que terminemos con el ejercicio, podemos presionar este botón y vamos a conseguir esta ventana. A mí me gusta guardar cosas en mi escritorio. Creo que eso es genial. De acuerdo, golpea Save. Y eso va a ser que por favor ponte a trabajar dos iconos en cada rincón del marco grande. Cómo las arreglas, eso depende totalmente de ti. De lo que me gustaría ver un bonito diseño. No continúes con el curso porque en el siguiente video, te voy a mostrar cómo resolverlo. Por favor, haga una pausa y consiga trabajo. Muchísimas gracias. Diviértete con él. 7. Resolver el ejercicio y algunos consejos profesionales: Hola y bienvenidos de nuevo. ¿ Hiciste los ejercicios por tu cuenta? De no ser así, por favor detenga el video ahora mismo. Sé que parece tan sencillo y estoy seguro de que entiendes lo que necesitas hacer, pero sí necesitas practicar. La velocidad requiere toda otra práctica. De acuerdo, aquí hay una solución y algunos consejos para ser un poco más rápido. El modo regular de hacerlo es acercar un poco y hacer click en el primer ícono. Ahora, aleje un poco y muévelo al cuadro grande. No importa si lo haces en un solo movimiento o por otro lado, podrías hacerlo en múltiples pasos. Vuelves a acercar, seleccionas uno y luego lo mueves al borde izquierdo de la pantalla. Sostenga la barra espaciadora, haga clic en Hold y encuéntrese hacia la izquierda. Ahora muévelo otra vez. Y si es necesario, haz esto unas cuantas veces más. Ahora cuando coloques el segundo ícono, te sugiero que cuides estas líneas rojas. Estos ayudan a alinear las cosas con precisión. No me importa dónde coloques los iconos en la esquina del marco, pero me gustaría verlos alineados. De acuerdo, ahora, esta es la forma estándar de trabajar y te sugiero que hagas el ejercicio de esta manera al menos dos veces. De acuerdo, ahora reparte alguna alternativa. Puedes ajustar tu nivel de zoom a un punto donde veas ambos fotogramas en la misma pantalla. Ahora agarra el pequeño y muévelo justo al lado del grande. Esto sería engaño y no te animo a trabajar de esta manera para este ejercicio específico. La idea es aprender a acercar y alejar y panoramizar, pero esto hará las cosas mucho más fáciles y podemos aprender algunas otras cosas. Aquí hay otro consejo. Si haces clic y arrastras y haces un rectángulo, seleccionarás algunos de los iconos del marco pequeño. Comprueba el panel de capas para eso. Descubre cómo ahora se destaca la marca de verificación en el Chevron. Eso es bueno. Pero si haces clic y arrastras alrededor de todo el asunto, ahora seleccionarás todo el marco. El punto esencial es que se pueden seleccionar varios elementos arrastrando hacia fuera la caja. Si las ciénaga es hacer mendigar, seleccionarás el marco en sí. Por lo tanto, asegúrate de tomar nota de eso. De acuerdo, Ahora aquí hay otra forma de trabajar. Seleccionaré el menos y lo arrastraré sobre el marco grande. Observe que Figma lo mueve de inmediato en el panel de capas. Esto es impresionante. Por lo que siempre que muevas una capa por encima de la lluvia, se la tragará. Por favor, tome nota de ello. De acuerdo, ahora agregaré rápidamente el rectángulo aleatorio. Observe el panel de capas. Esto se sienta por encima de ambos marcos. Pero si la muevo por encima de la grande, bueno, ahí tienes. Simplemente le sigue. Y si lo mueves afuera, Figma es lo suficientemente inteligente como para sacarlo de ese cerebro. Por cierto, en caso de que no estés seguro si este rectángulo está dentro del marco, simplemente puedes hacerlo. Haga clic aquí para cerrar el marco. Eso es lo que hace esta flecha. Ahora podemos ver que este rectángulo sólo está flotando alrededor. No es parte de ningún marco. Pero y si lo arrastramos en el marco grande usando el panel de capas con si hacemos eso desde aquí, bueno, aquí está la cosa. Sí lo hace. Muévelo en el panel de capas, pero no en el lienzo real. Aquí se puede ver lo más destacado. Esto no es todo tan genial. Pero podemos hacer una cosa más. Aleja el zoom hasta un punto en el que se puede ver el cuadro grande. Ahora concéntrate aquí en la parte superior derecha. Haga clic en estos dos iconos, el segundo y el quinto. Y así, los rectángulos se sientan justo en medio del marco. Ahora bien, ¿cómo nos ayuda esto? Bueno, podemos seleccionar el símbolo menos, y una vez que está dentro del marco grande, podemos usar los mismos mundos de alineación. Esta vez usaremos una línea ¿verdad? Y luego después de que eso esté hecho, alinea abajo, haz zoom en esa esquina, luego ahí vas. De acuerdo, Ahora repite el proceso. El caso es que podrías conseguir una superposición. Eso no es un gran negocio porque esta es una gran manera de introducir tus teclas de flecha en tu teclado con este icono seleccionado, mantén pulsado, Shift, y toca la tecla de flecha izquierda. Esto moverá el icono y los incrementos de 10 píxeles. Entonces si quieres moverte a 20 píxeles hacia la izquierda, son dos pestañas. Uno en cosas geniales. El punto esencial es que al seleccionar un elemento que está dentro del marco, puede utilizar las herramientas de alineación para reposicionarlo rápidamente dentro del marco. Eso lo diré otra vez. Figma sabe que esto está dentro del marco. Esto significa que podemos usar las herramientas de alineación, reposicionarlo así. Una cosa más a tener en cuenta, digamos que nos movemos a más iconos a través del panel de capas. Esta no es la mejor opción, pero escúchame. Ahora. Digamos que queremos usar los pozos de alineación. Estos no funcionarán como se esperaba porque hay dos elementos seleccionados. Y eso es porque cuando Figma ve dos elementos seleccionados, si cosas que queremos alinearlos entre ellos. Entonces mi consejo, solo hazlo uno a la vez cuando icono y luego usa las herramientas de alineación y luego el segundo icono. Y de nuevo, las herramientas de alineación con apenas hecho. Pasemos rápidamente al siguiente ícono, que tiene otro cerebro. Eso es algo de lo que hay que estar al tanto. Aquí está la cosa. Anteriormente fuimos por encima del ícono, hacíamos clic y se seleccionó fácil. Pero aquí eso no va a funcionar. Consulta el panel de capas. Daré click en el fondo para desseleccionar. De acuerdo, Ahora me moveré por encima del ícono y haga clic en él. Y note que el marco secundario está realmente seleccionado. Para llegar al ícono, tenemos que hacer doble clic sobre él. Ahora el marco se ha abierto y podemos hacer lo nuestro con el icono. Hagámoslo otra vez. En caso de que tengas un marco dentro de un marco y hay una capa dentro de la que quieres seleccionar. Tendrás que hacer click, luego hacer doble clic para bajar el nivel. Asegúrate de mantener un ojo en el panel de capas para saber qué está pasando. No es un gran trato, pero sí necesitas asegurarte tener seleccionado el banco adecuado, vale, al final del día, esto es lo que me gusta ver de ti. Todos los contras die muy bien alineados. Asegúrate de ver este video una vez más para entender realmente todos los conceptos clave. Gracias y diviértete con él. 8. Descubre la interfaz de Figma y por qué los profesionales la utilizan.: Bienvenido de nuevo. Cuando abres Figma, parece un programa de diseño básico. Abramos cualquier nuevo proyecto para que podamos revisar la interfaz y entender verdaderamente dónde brilla Figma. De acuerdo, aquí estamos. El proyecto está completamente vacío, así que no hay mucho que mirar, pero tomémoslo de arriba. Siempre tenemos aquí el ícono de inicio que nos permite volver a esta pantalla. Podríamos querer hacer eso para abrir otro proyecto. Qué tal vez echa un vistazo a la pestaña de la comunidad junto al icono de inicio tenemos nuestras pestañas de proyecto. Esta parte es muy similar a tu navegador, por lo que pasaremos a la barra de herramientas. Aquí es donde empieza a pensar, este es un programa súper sencillo. Y eso es porque tenemos tan pocas herramientas. El primer ícono nos muestra muchas opciones. Aquí tenemos nuestro menú principal y podemos hacer un montón de cosas. Pero aquí está la cosa. En realidad no lo usarás todo tan a menudo. La mayoría de estas opciones tienen teclas de acceso rápido que son mucho más fáciles de usar. Nadie viene aquí a crear un nuevo archivo, por ejemplo, en su lugar, la mayoría de la gente usa Control N. Así que ten eso en cuenta. No usaremos este menú con tanta frecuencia. De acuerdo, Junto a este menú principal, tenemos algunas herramientas y hecho que son sólo un puñado de ellas. El primero es la herramienta de movimiento, y eso hace exactamente lo que crees que hace. Mueve las cosas alrededor, sea en capas o los marcos de la glucosa o lo que sea que se seleccione. Debajo de ella, tenemos la herramienta de escala. Esto es genial cuando se quiere cambiar el tamaño las cosas y tenemos una conferencia sobre eso. El siguiente aquí es el marco a pared. Este tipo de parece un símbolo hashtag sin embargo. No es el caso. Como estás a punto de ver, esta es en realidad una herramienta muy útil. Tenemos una conferencia completa sobre eso también. Continuando, tenemos las formas clásicas, rectángulo, línea, flecha, elipse, las obras. 95 por ciento del tiempo, utilizarás la herramienta de rectángulo. Eso es sólo cosas básicas de diseño web. Al final de esta lista, tienes la opción de llevar una imagen a Figma. Como se puede ver, esto lanza la ventana de navegación. Elige cualquier imagen y estás bien para ir. Y por supuesto tenemos una conferencia dedicada sobre esto también. De acuerdo, Ahora, ten en cuenta que los dos últimos mundo es el primero aquí. Entonces es mejor que memorices algunas teclas rápidas, por ejemplo, son para rectángulo. V para la herramienta de movimiento no es tan grande, pero debes recordarlo. V para la herramienta de movimiento, o simplemente haga clic en esta flecha pequeña y seleccione la más útil. Y esa es la herramienta de rectángulo en este caso. A continuación tenemos la clásica herramienta de bolígrafo, pero realmente no la vamos a utilizar porque la mayoría de nuestros iconos y gráficos van a venir de la web. Aquí está la herramienta de texto, hotkey P, Es muy sencillo. Palabra más un par de otras herramientas aquí que, para ser honestos, no son todas tan grandes, eso no todo tan interesante. De acuerdo, vamos a añadir el marco y luego un rectángulo justo al azar. Sólo para que tengamos algo que ver en nuestras pantallas. A lo mejor una capa de texto dos. ¿ De acuerdo? Ahora en el panel Capas, verás estos elementos. Todos tienen símbolos diferentes. A medida que continuemos, pronto empezarás a aprenderlas. Cuando tengas algo seleccionado, el panel derecho te mostrará propiedades para esa capa específica. Por ejemplo, aquí podemos cambiar la familia de fuentes, el tamaño, el color, etcétera. Pero si seleccionamos el rectángulo, hay menos opciones. Y si hacemos clic en cualquier otro lugar, vamos a anular la selección y entonces este panel va a ser justo sobre ellos. Aquí está la cosa. Agarra nuevamente el rectángulo. Este panel derecho está configurado en modo de diseño. Y se puede ver eso aquí en la parte superior. También hay un modo prototipo que te ayuda a hacer un diseño interactivo. Realmente no nos enfocaremos en eso, sobre todo en la primera parte. Y también hay un tercer modo aquí, inspeccione. Esto te da un poco de código CSS y eso es básicamente útil para los codificadores. Ahora, lo importante es que te apeges al modo de diseño. De acuerdo, Ahora adelante, Lo siguiente. Tienes el nivel de zoom aquí mismo. Y esto es algo que debes mirar constantemente. El bit importante son estos atajos aquí mismo, específicamente cambian uno, aunque Shift Z. No es necesario recordarlos porque siempre se puede confiar en que los controles gruñan, pero sepan que esto está disponible aquí mismo. Y de nuevo, acercar al nivel de zoom correcto es bastante importante. A continuación, el ícono de juego es lo que pretende la presentación cuando quieres echar un vistazo a tu diseño sin ninguna distracción, sin ninguna herramienta y todo eso. Esto también es agradable cuando se tiene un prototipo interactivo. Pero de nuevo, ese no va a ser el caso aquí al principio. Pasando en la interfaz, este es tu avatar. El mío es c para el Kress. Se sin varias personas en un proyecto activo a la vez, verán que tengo unas toallas aquí. Y por último el botón de compartir. Esto es realmente útil cuando quieres presumir de tu trabajo, o quieres invitar a otros diseñadores a trabajar contigo en el mismo archivo? El recurso compartido es genial porque puedes enviar el diseño como enlace vía e-mail o lo que sea, luego seguir trabajando en ello. Si envías el archivo PNG, Eso es como una instantánea, y obviamente eso no cambia. Por lo que compartir el enlace es mejor porque puedes seguir trabajando en él. Y para cuando el cliente abra el enlace, podría haber arreglado el gran problema. De acuerdo, en medio de la interfaz, en la parte superior, encontrarás algunos iconos, y estos son muy poderosos y los usarán bastante. Como siempre, tendrá conferencias separadas sobre ellos. Por último, a la izquierda, aquí hay un tabulador llamado activos. Lo que nuestros usuarios que quieren sacar el máximo provecho de Figma. Esto es bastante importante. Pero si has tenido el principio, no tanto. Te lo explicaré todo más adelante. Simplemente sepan que aquí tenemos una pestaña separada. Sin portón. Ahora, cualquier diseño se puede dividir en varias páginas. Esto es útil cuando se tiene un gran proyecto Con decenas o incluso cientos de pantallas. Piensa en un proyecto de diseño web con 20 páginas más la versión de tableta, más la versión móvil, luego una aplicación para Android, luego en la aplicación para iOS, eso es un proyecto enorme, así que lo haces necesitan alguna manera de organizarlo. Bueno, eso se puede hacer a través de páginas. Para ser honesto, hay múltiples formas organizar proyectos enormes, pero las páginas son definitivamente parte de ello. De acuerdo, ahora vamos a dar un paso atrás y enfocarnos en lo esencial. El principal punto fuerte de Figma, lo que hace fantástico a Figma es la capacidad de escalar tu trabajo. Significado con estas herramientas básicas y algunas características avanzadas, puedes crear una forma de trabajo que te permitirá crear rápidamente decenas de pantallas. Este es el verdadero poder de Figma, la capacidad de crear grandes proyectos sin ningún tipo de dolores de cabeza, con facilidad. Para los principiantes, de nuevo, esto no es tan importante. No estaremos creando proyectos de 100 páginas en este curso, pero es mejor que conozcas las fortalezas de Figma desde el principio. Nuevamente, uber lo usa, izquierda usa eso. Y algunas otras grandes empresas son sartenes grandes o Pigma. Pero para nosotros, ahora es realmente todo eso de importante. De acuerdo, con eso que se diga, sigamos. 9. Crea tu primer sitio web mini sitio web: Bienvenido de nuevo. Tenemos una actividad práctica donde quiero que sigas mis pasos en tu segunda visualización. La primera vez, por favor sólo mira y entiende cómo me acerco a este ejercicio. La segunda vez que ves el video en pausa tantas veces como necesites trabajar. Por favor, por favor, no intentes trabajar en la primera visualización. El objetivo es crear un mini sitio web mediante el uso de todos estos elementos. Lo más importante, por favor diviértete con él. No hay presión alguna. Sé que es muy temprano en el curso, pero quiero mostrarte lo fácil que es si tienes el enfoque correcto. Comience desde el panel de capas. Observe lo que tenemos aquí, un logotipo, algunos elementos para el menú principal, una carga, una foto, un fondo de menú principal y así sucesivamente. Entonces las cosas son lo bastante organizado. Empecemos con el logo. Donde nuestros logotipos suelen colocarse en la mayoría de los sitios web. ¿ Está en la parte superior derecha? ¿ Está en el fondo? No, claro que no. El logo suele colocarse aquí en la parte superior izquierda. Así que haga clic en él para seleccionarlo y arrástrelo al lugar donde exactamente. Bueno, en realidad no importa a estas alturas ahora. De acuerdo, ahora ¿qué pasa con el menú principal? ¿ Dónde suele encontrar eso? Si no estás seguro, solo abre tu navegador y echa un vistazo a algunos de tus sitios web favoritos. Por lo general, el menú principal se asienta a la derecha del logotipo. Por favor muévalos uno por uno, así. Y notarás que el estigma está entrenado para ayudarnos con estas líneas rojas y está totalmente bien trabajar de esa manera. Tómate tu tiempo con él. Sin presión. Una vez que las tengas dispuestas más o menos, algo así, por favor haz clic en cualquier parte la superficie y y arrastra hacia fuera una caja. De acuerdo, así es como podemos seleccionarlos a todos. Ahora, se puede ver este es el caso en el panel de capas. Comprueba eso dos veces. De acuerdo, ahora usa este icono aquí para alinearlos abajo. Esto los arregla rápidamente. Es un poco más rápido. De acuerdo, un paso más, haz clic aquí, y tendrás una opción que se llama idea, que básicamente significa limpiarla para mí. Y así, el menú principal se ve bastante bonito. Si realmente quieres ser exactos, puedes hacerlo. Mueve esto fuera del camino. Por cierto, seleccione tanto el logotipo como el menú principal. Y ahora puedes usar este ícono aquí, que se concentra entonces esto es opcional, pero sí hace que se vea un poco mejor. A continuación, seleccione el rectángulo blanco y muévalo hacia arriba. Este gris obviamente no funciona tanto genial. Entonces vamos al lado derecho y buscará algo un poco más bonito. A mí me gustan los colores brillantes. Entonces creo que me voy a ir con éste por ejemplo. Esto se ve mejor, pero un gran texto obviamente lo es ahora. Está bien. Entonces esto es lo que podemos hacer. Selecciona todos estos elementos así. De acuerdo, del lado derecho, busca esta muestra gris. Aquí está. Haga clic en él y abra el selector de color, que debería ser bastante fácil de trabajar. El blanco va a ser así de mucho mejor. Y en efecto, es genial. Cierra este panel y ahora vamos a centrarlos una vez más sólo para una medida segura. Usa este ícono aquí. Si no estás seguro de cuál es cuál, solo pruébalos y luego usa Control Z para deshacer. Explora. Sé curioso, Esa es la esencia. De acuerdo, por el botón, mueve el texto dentro de eso. Si miras con cuidado, verás figma. Trataremos de ayudarte LK. Cuando eso esté hecho, por favor seleccione el rectángulo y abra el seleccionador de color una vez más. Queremos el mismo color. Aviso Figma vuelve a saltar a nuestra ayuda. Tenemos opción del del aquí mismo. Pero si no lo puedes ver, también puedes usar este ícono aquí. Haga clic en el menú principal, y eso es todo. Tenemos el mismo color, pero ¿qué pasa con el texto? Bueno, tenemos que hacerlo blanco. Por supuesto, no hay otra opción decente. ¿ De acuerdo? Las cosas van bien. De acuerdo, selecciona la imagen y subirla. Asegúrate de que puedes ver todo el marco para que lo alinees correctamente. Esto es perfecto. Está bien. Tenemos que manejar el título y la descripción. Para el título, por favor cambie su tamaño a 40 píxeles. Eso es para la z sin embargo. Ahora lo podemos ver mucho mejor para el color blanco es. El blanco siempre está en la parte superior izquierda del recolector de color. Ve todo el camino en la esquina. Ya sabes, es blanco puro. Si dice FF, FF, FF aquí. Entonces Fs para el otro bit de textos, 18 píxeles por favor, Eso es 18, y por favor que sea blanco también. Ahora, sé que esto puede parecer rápido, pero quiero mostrarles cómo las cosas simplemente caen en su lugar. De acuerdo, Lo último, estos artículos están por todas partes. ¿ A dónde debemos moverlas? Bueno, el mejor lugar está aquí mismo del lado izquierdo. Mueve el Paypal hasta que veas una línea vertical roja que sube hacia el logo. Esto es lo que queremos. Cf. Eso es perfecto. Haz lo mismo con la otra capa FX. Tómate tu tiempo con él. Espero que estés viendo esto en una computadora y ojalá estés trabajando conmigo. Por último, con la carga, basta con moverlo a su lugar uno a la vez. Eso está totalmente bien. Y en general, este es nuestro mini sitio web. Esto es lo que quiero que recuerden. No necesitas ser creativo. Necesitas conocer las reglas. Uno de ellos es alinear las cosas es muy importante. Sé que puede ser aburrido, pero en realidad es esencial para el logotipo y el menú principal, para la carga, para la alineación de estas capas. Todos estos son pedacitos muy importantes. Así es como se vería sin el forro de ellos. Tan solo un vistazo a cómo se vería sin ningún alineamiento. Entonces esto está bien, Esto se ve horrible. Entonces nuevamente, el principio es bastante básico pero poderoso. Alinear todo, utilizar la alineación dos mundos, vale, en términos de color, elegimos un color brillante y el resto era blanco puro. Blanco puro, no amarillo, no verde, ni nada más. Tan solo blanco para el color principal. No tendría sentido elegir algo como esto, ¿verdad? Todo tiene que tener sentido. El título es más grande que la descripción porque necesita destacar. Por lo que estos son algunos de los principios en los que se apoyarán. Hablaremos de ellas a detalle en otras conferencias. Pero por ahora por favor dime, ¿necesitas ser creativo para hacer esto en menos de 10 minutos? Creamos un mini sitio web, y todo se basó en algunos principios. Alinear las cosas correctamente, usar buenos colores, usa el diseño estándar. El logo de la izquierda, el menú principal a la derecha, y así sucesivamente. Así es como vamos a trabajar. No dibujaremos, no dibujaremos, no nos pondremos creativos. Aprenderemos principios clave como alineación, simetría, topografía, contraste, y crearemos cosas impresionantes juntos. Eso se debe a que esto es lo que necesita el cliente. Esto es lo que te hará contratar y esto va a meter dinero en tu cuenta bancaria. Ahora por favor pausa, rebobina, y ponte a trabajar. Quiero ver tu versión con un color diferente. Sé que es un poco temprano, pero cree en ti mismo, Puedes hacerlo. Estoy aquí para ayudar tanto como pueda. Toma esto como un reto divertido. Al final, haga clic en el marco y luego elija Exportar. Entonces Exportar una vez más, subido, y eso es todo. De acuerdo, Muchas gracias y busco eso que ver tu diseño. 10. Íconos de edición: colores y tamaño: Bienvenido de nuevo a un ejercicio. Este archivo se llama Editar iconos y lo tienes adjunto en la carpeta de recursos. Como recordatorio, vaya a la pestaña Inicio y luego haga clic en este icono para importar al archivo Figma. Trabajemos en este conjunto de iconos que ya conocemos. Digamos que quieres redimensionarlo, ¿verdad? Si solo agarras un mango de esquina y comienzas a arrastrar, bueno, mira lo que pasa. El icono sí se hace más grande y si mantienes Mayús, sí se hace más grande proporcionalmente. Pero ten en cuenta que se vuelve más delgado. Y si lo haces más pequeño, cintura más pequeña, bueno, se vuelve más gruesa. Y esa es una muy buena oportunidad no quieras que eso suceda. Entonces aquí está la solución. Enfoque en la parte superior izquierda de la pantalla y haga clic en esta flecha pequeña. Esto revelará la herramienta de escala. Eso es lo que queremos utilizar la herramienta de báscula. Ahora podemos redimensionarlo rápidamente sin ningún problema. Las no están manteniendo presionada la tecla Mayús porque nariz Figma, queremos cambiar el tamaño de todo el artículo proporcionalmente. Déjame deshacer y te mostraré cómo funciona esto en varios iconos a la vez. Así que selecciónalos y luego cambia el tamaño. Funciona como un encanto. Lo siguiente, el cambio de colores. Antes de entrar en eso, quiero hablar de algo que en realidad es un poco aburrido. Descargué estos iconos de la web y es muy probable que vayas a hacer lo mismo una y otra vez. Los diseñadores web en realidad no crean iconos desde cero. Y ten en cuenta que puede sonar raro, pero permítanme explicar por qué ese es el caso en una conferencia separada. Sólo tienes que saber que no se supone que crees estos iconos tú mismo desde cero. Porque vamos a descargar iconos de la web. Esto significa que usaremos el trabajo de otras personas y todos trabajan de manera diferente. Si le pides a 10 personas que te hagan un outlet, verás diferentes formas de hacerlo. Y es lo mismo aquí en Figma. Si miras en el panel de capas, notarás que estos iconos tienen un símbolo en particular. No es de eso de lo que quiero hablar. En cambio, haz clic aquí a la izquierda de este símbolo y abrirás este elemento. Como puedes ver, el icono de la papelera está hecho de cuatro cosas. Estas dos líneas verticales, el contorno más la línea horizontal para el plomo. Bueno, pasemos a este otro. Esto tiene un símbolo diferente. Se trata de un grupo. De nuevo, eso no es lo importante. Pero si la abrimos, esta es la cama esencial. Verá montones de otras cosas, más grupos y los pocos vectores. Y podemos abrir uno de estos grupos. Pero aquí hay otro grupo, Dios mío. Entonces aquí está la idea esencial. Todo diseñador trabaja de manera diferente. No esperes que los iconos se construyan de cierta manera. Algunos iconos pueden tener dos o tres elementos, otros pueden tener 20 o 30. No hay forma correcta o incorrecta de hacerlo. De acuerdo, ahora, volvamos a colorear iconos. Yo sólo quería sacarlo del camino porque estoy seguro que te vas a encontrar los diversos tipos de iconos. Está bien. Si simplemente hacemos clic en la basura Dan, podemos ver que hay una muestra gris en la parte inferior derecha en caso de que no la veas, mueve tu cursor en este panel y luego desplázate hacia abajo. Esto significa que podemos hacer clic en él y cambiar todo el ícono así. Es otro color. Déjame deshacer al Control Z. Porque tenemos acceso a cada bloque de construcción, podemos seleccionar uno de ellos, decir el contorno, y sólo cambiamos ese color. Y ahí tienes. Ahora, para este cubo de basura, esto no se ve tan genial para ser honesto, pero probemos la burbuja del habla. Ábrelo y selecciona el contorno. Cambia eso por lo que quieras. Estoy contento con cualquier color aleatorio, por cierto. A continuación, seleccionaré los vectores 6 y 7. Mantendré pulsada la tecla de control para seleccionarlos a ambos a la vez. Ahora puedo cambiar su color para decirle a éste, por ejemplo, sólo al azar. Ahora, está bien, cosas geniales, pero vamos a hacer una pausa un rato. Hagamos una recapitulación rápida. Si desea cambiar el tamaño de los iconos correctamente, deberá utilizar la herramienta de escala. Recuerda cambiar de nuevo a la herramienta de movimiento, por cierto, la tecla de acceso directo V, si quieres cambiar el color de un icono, puedes cambiar todo el asunto, o puedes perforar en el panel de capas y seleccionar algunos de sus bloques de construcción y cambiar esos. Antes de que te deje probar este, aquí te dejamos algunos otros iconos. Seleccione la primera e ignoró todas esas capas y grupos en el panel de capas. En cambio, por favor concéntrate aquí. Aviso tenemos tres colores mostrando plus tenemos esta opción para cargar otros 11 colores. Ahora aquí está la idea esencial. Puedes decidir qué color quieres ajustar y simplemente haz clic en la muestra. Digamos que no te gusta el color verde claro. No hay problema. el recolector de color y empieza a jugar con él. Es así de fácil. Déjame deshacer y mostrarte algo realmente genial. Digamos que abrimos todos los colores y no estás realmente seguro con este gris oscuro se está usando. De acuerdo, eso no es un problema. Basta con mover el ratón aquí y dar clic en este icono de destino. Y así, Figma apuntará a esa capa específica. Entonces de nuevo, abres esta zona y si no estás seguro de dónde se está utilizando ese color, haz clic en el icono de destino. De acuerdo, aquí hay una técnica final antes de este tu turno. Estos iconos provienen del mismo conjunto. Digamos que no somos fanáticos de este color dorado, amarillo. A lo mejor lo queremos morado. De acuerdo, no hay problema. Siempre y cuando estén seleccionados todos, haga clic en la muestra y cámbiala. ¿ No es esto impresionante? Me encantó este tipo de cosas. La idea principal es experimentar. No hay manera correcta o incorrecta. Simplemente quieres divertirte en este punto. Entonces, por favor, abre este archivo y cambia ambos conjuntos de iconos. Haz lo que quieras con ellos. Y cuando hayas terminado, selecciónalos todos y pulsa el botón Exportar. Diviértete y por favor publique tu trabajo. Gracias. 11. Aquí es por qué tantos principiantes: Hola y bienvenidos de nuevo. Hablemos de algo que es un poco sensible. Muchos principiantes renuncian a su aprendizaje cuando golpean un problema. Cuando no entienden algo, se frustran. Y eso lo entiendo. Y hago todo lo posible para simplificar las cosas y para brindar toda la ayuda que pueda en el servidor del discurso. Pero en Figma, esto a veces es muy desafiante y realmente quiero abordarlo. Permítanme mostrarles un ejemplo rápido. No tienes que trabajar bien, solo traté de sacar mi punto sobre estar frustrado. Entonces aquí va, puedes organizar un proyecto en páginas, vale, digamos que estamos trabajando en un rediseño para el sitio web. Podemos tener una página para los wireframes, otra la página para la versión de escritorio, obviamente eso se necesita y eso va a ser separada. Otro para la versión móvil, ¿no? Porque de nuevo, eso debería ser separado. Ahora, esa es una forma de organizar un proyecto en dos páginas. Basta con dar click aquí para ampliar o cerrar esta zona. Y cuando se expanda, puedes agregar páginas haciendo clic en este símbolo más, entonces puedes renombrarlo. ¿ De acuerdo? Ahora, de nuevo, todas estas páginas forman parte de un solo proyecto con una sola empresa. ¿ De acuerdo? Cómo nombras tus páginas, cómo organizas las cosas dentro de ellas. Eso depende totalmente de ti. Ahora, supongamos que entiendes cómo funcionan las páginas hasta este punto, aunque no lo entiendas por completo , solo quédate conmigo. De acuerdo, aquí es donde se pone complicado, mata un proyecto que he descargado de la pestaña Comunidad. Echa un vistazo a esto. Tenemos tantas páginas, una sencilla portada, luego una guía que tiene ocho marcos. Aquí los puedes ver. Pero luego otra página, cuatro componentes, luego una página que se acaba de usar como divisor aquí para ayudar a organizar las cosas. Entonces en y en él va avatar acordeón, banner y así sucesivamente. Ahí hay toneladas de épocas de páginas. Esto hará girar la cabeza. Es por ello que los principiantes se rinden. Cuando las cosas se complican tan, solo te sientes abrumado y frustrado. Por eso quiero tomarme un momento y decirles que este nivel de organización de las cosas para los profesionales, para los usuarios del poder, para los que ya hacen esto por los vivos. Y quieren maximizar el tiempo. Si trabajas en Uber o el móvil o HB, Así es como necesitas configurar las cosas. Pero aquí está la cosa. Si solo quieres ganar unos cuantos miles de dólares al mes o si quieres rediseñar tu propia página web, este tipo de cosas no es necesario. No es necesario entrar en este nivel de detalle. Te prometo que esto no es lo esencial. Confía en mí. La idea es que esto cubrirá algunas características avanzadas en Figma como este tipo de organización. Pero mi plan es conseguir que camines antes de correr. Si nos enfocamos en lo más avanzado de Figma, es muy probable que te vayas a dar por vencido. Y quiero ser lo más claro posible , esas características avanzadas. No te van a hacer un buen diseñador. Voy a decir eso otra vez. Esas técnicas y flujos de trabajo avanzados no son una gran parte de tu fundación como diseñador web, esas cosas de lujo son el último cinco o 10 por ciento, la cereza encima de tu pastel. Entonces por favor no te preocupes si no entiendes algo de este curso, sigue viendo y te lo prometo, lo vas a conseguir. Y si no vienes al servidor de Discord y hablemos de ello en tiempo real. De nuevo, este acorde es una sala de chat como WhatsApp o Facebook Messenger, pero no es privada. Es con un montón de otros estudiantes que todos están pasando por lo mismo que tú. Así que por favor asegúrate de unirte al servidor. Es totalmente gratis. Y si no quieres hacer eso, solo haz preguntas en la plataforma y yo aclararé las cosas. Recuerda, está bien no entender absolutamente todo desde el principio. Mira al menos la mitad del curso y verás que todo empezará a tener mucho más sentido. Gracias por tener pacientes, y sí espero que estés teniendo una experiencia de aprendizaje de cinco estrellas hasta el momento. Por favor escríbeme o la vista. Realmente ayuda a traer una sonrisa a mi cara. Está bien, sigamos. Muchísimas gracias. 12. La mayor diferencia en Figma versus los otros programas: Bienvenido de nuevo. Déjame decirte lo que creo que es una de las cosas más grandes a las que tienes que acostumbrarte en Figma, di que quieres agregar un botón, ¿verdad? ¿ Cómo se suele hacer eso? Digamos que en Photoshop o Adobe XD, lo que en realidad la mayoría de los demás programas de diseño, típicamente obtienes la herramienta de rectángulo y arrastras una forma así. Por favor, no trabajes por cierto. Después obtienes el libro de texto o la Herramienta Tipo y agregas algo. Por último, seleccionas ambas capas y luego usas las herramientas de alineación para centrar el texto dentro de la forma. Como bono, podrías agrupar estas dos capas en una carpeta para mantener las cosas organizadas. Ahora bien, esto te puede parecer natural, pero no ayuda a que Figma funcione. No deberías trabajar así. En realidad, si quieres mostrarle a la gente que no has usado Figma en absoluto, este es un regalo claro. Esto le dice a la gente que en realidad no sabes usar Figma. Así es como deberías trabajar realmente con marcos, no con rectángulos ni con los grupos. Permítanme darles un ejemplo. Aquí tienes un marco, 1920 por 1080. Digamos que hemos iniciado un proyecto de diseño web y necesitamos el encabezado para el menú principal. Seleccione la herramienta de marco y agregue una en esta región, justo encima de estas dos capas. No perfecto. Y es probable que no vaya a haber perfecto. Siéntase libre de moverse a los bordes y redimensionarlo en su lugar. A partir de aquí, vaya a llenar y haga clic en cualquier lugar alrededor de esta región. Desde el recolector de color, elige cualquier forma que quieras. Así funciona mejor Figma. Se puede preguntar por qué sin embargo. ¿ Por qué tenemos que usar marcos? Ahora para mantenerlo corto? Esto te ayuda a controlar mucho mejor tus elementos de diseño y también es más fácil crear versiones receptivas. También te va a ayudar con tu prototipado, animar el diseño lo hace básicamente cuando quieres hacer que tus pantallas sean interactivas sin ninguna codificación. Entonces marcos, mejor bailarina, sé que esto puede parecer un poco raro porque puedes pensar que los marcos son exactamente como los tableros de arte de Photoshop o Adobe XD, pero no lo son. Y otra cosa puedes poner un marco dentro del marco. Esto es normal en Figma y es la forma recomendada trabajar en otros programas no es el caso. Entonces la idea esencial es esta. Para la mayor parte de sus elementos de diseño, utilice marcos, no la herramienta de rectángulo. Muy cerca de esa idea. Por favor, no uses grupos. No hay necesidad de grupos porque tenemos una forma más inteligente de organizar todos los elementos. Bueno, acabas de ver es un ejemplo. Agregamos el marco por encima estas dos capas de textos y ahora están dentro de eso. Entonces si queremos mover todo el asunto, puedes agarrar el marco y hacer lo que quieras. Como puedes ver, todo se mueve sin el grupo. Te voy a mostrar muchos más beneficios a medida que continuemos. Pero quería ser lo más claro posible, marcos, no rectángulos y grupos. Por último, agregamos un marco de película. Pero observe que esto en realidad no crea una capa separada en el panel de capas. Sólo tenemos el marco y estas capas de textos. Eso es un poco extraño si vienes de otros programas de diseño, pero pronto te acostumbrarás. Tomemos un breve descanso. 13. Aquí tienes cómo crear botones en Figma: Bienvenido de nuevo. Te dije que los marcos son la mejor manera de ir en Figma, no rectángulos ni grupos. Saltemos directamente para poder mostrarte cómo se supone que debes trabajar para crear el botón y Pigma. Está bien. Agarra la herramienta de texto. Sí, ya oíste eso, ¿verdad? Ese es el primer paso. Escribe lo que quieras. Voy a decir mi botón. A continuación, tienes dos opciones principales. Puedes hacer clic con el botón derecho en él y elegir Añadir diseño automático. Entonces esa es la opción uno. Si bien el layout, o lo que la mayoría de la gente está haciendo hoy en día es el turno a es lo mismo. Por lo que de nuevo, agregas tus etiquetas y luego golpeas Shift un siguiente, ve al panel derecho y haz clic en llenar. El color predeterminado es el blanco. Así que abre el recolector de color y cámbialo por lo que quieras. Este es el fundamento de su carga. Así es como se supone que tienes que trabajar, no se ve tan gris ahora mismo, pero vamos a darle algo de vida. Los bordes cuadrados son aburridos, así que vamos a redondearlos. Esto se hace mediante el uso de esta parte aquí. Vayamos con un alto valor. Digamos 25. A lo mejor no te gusta el color o tal vez el texto no tiene sentido. No hay problema para cambiarlo. Simplemente puede hacer clic aquí debajo de los colores de selección. Tienes esta disponible. Si tienes el marco seleccionado, por favor recuerda presionar la tecla Escape para cerrarlo. Como alternativa, se puede utilizar el panel de capas. Esa también es una opción. Haga clic aquí para expandir el marco, y ahora puede seleccionar el texto. A algunas personas les resulta extraño que no haya capa de fondo. No hay rectángulo per se. Comprueba el panel de capas para eso, ¿verdad? Solo está la capa de texto y eso se debe a el marco en sí tiene un relleno aplicado a ella. Piensa en ello como una suerte. Entonces ninguna capa individual para el relleno es totalmente normal y Figma, ahora la pregunta es, ¿por qué deberíamos usar turno ellos así aunque disposición sin cargas, bueno, tenemos algunas características interesantes. En primer lugar, selecciona la capa de texto y aumenta su tamaño, digamos 30 píxeles, ¿verdad? Observe cómo crece el rectángulo en tamaño. Eso es una cosa. Entonces esa es una ventaja al usar el diseño automático, el marco cambia su tamaño automáticamente. A lo siguiente, por favor seleccione el marco. Este es un paso muy importante. Por lo tanto, seleccione el marco. Y de esta parte aquí llamada Auto Layout, por favor cambie este valor a 20. Esto se llama relleno y es el espacio vacío dentro de la carga. Cuanto más grande es el relleno, más grande es el botón. Si usas un valor muy pequeño, como uno o dos, ese texto se va a sofocar y no queremos eso. Pero si usamos valores más grandes, como por ejemplo, nuestro botón no sólo va a ser ancho, sino que también va a ser alto. Y eso no es genial. Entonces esto es lo que podemos hacer. Da clic aquí en este ícono hacia la derecha. Esto permite ajustar el relleno en todos los lados individualmente con 24 los campos superior e inferior y dejar lo que el para los lados. Está bien. Esto es mucho más parecido. Este es un botón. Entonces ese es otro beneficio de usar el diseño automático, pero no terminamos. Vea aquí este ícono azul. Esto nos dice dónde se coloca la capa de texto para darle sentido, agrandarla desde la esquina inferior derecha. Observe cómo el texto se mantiene en el lado superior izquierdo. Eso es lo que esto controla. Y podemos moverlo aquí por ejemplo, o aquí. Pero obviamente queríamos aquí mismo en medio, así como así. Entonces esto significa que tenemos mucho control sobre la carga. Esto significa que no tenemos que usar constantemente las herramientas de alineación en un rectángulo más una capa de texto. Es por ello que usar marcos es mucho mejor. Hagamos esto de nuevo, esta vez con un icono a mi fuente go-to para iconos es plano icon.com. Pero por favor ten en cuenta que esto requiere una suscripción. Esto no es gratis. El formato que buscamos es SVG. Esto funciona mejor con Figma. Tienes el icono adjunto por cierto, así que por favor siéntete libre de arrastrarlo y soltarlo. De acuerdo, Ahora tal vez quieras redimensionarlo solo un poquito. Eso lo cubriré rápidamente. De acuerdo, ahora, aquí está la apuesta esencial. Si hacemos clic en mantener pulsado y lo arrastramos aquí, puedes ver que hay un punto culminante. Hagamos que suceda. Y aquí está la magia. Podemos controlar la distancia entre el icono y la capa de texto seleccionando el marco. Ahora desde la derecha dentro cualquier valor que quieras, digamos 15. Cosas impresionantes, esto es genial. Entonces déjame hacer eso otra vez. Arrastraré el icono una vez más a Figma y lo voy a hacer más pequeño. A continuación, daré la herramienta de tipo y escribiré algo aquí. Ahora selecciona ambas capas y pulsa Shift a. Lo más probable es que la alineación no va a ser correcta. Pero abre el relleno y centralo. Cosas encantadoras. Esto es bastante fácil, pero por favor trabaje a lo largo de su segunda visualización para mantenerse al día. De acuerdo, Ahora agreguemos un relleno y hagámoslo de cualquier color aleatorio. Me muevo bastante rápido, pero claro que deberías tomarte tu tiempo con ello. Ahora por favor ajuste las coordenadas de esta parte aquí. Usa lo que sea el valor que quieras cambiar el icono y el texto a blanco. Eso lo haré a partir de colores de selección. Nuevamente, se selecciona el marco. Ahora para la distancia, Vamos con algo así como 20. Y para el relleno, creo que voy a usar algo así como 34 los lados. Eso es una locura sin embargo. Y luego para arriba y abajo, y esa es nuestra carga. Ahora por supuesto, hay mucho más que podemos hacer, pero vamos paso a paso. Por favor, pausa el curso y crea tus propios botones. Quiero que cambies el radio de esquina, el relleno, los colores, y tal vez pruebes algunos otros iconos. Cuando haya terminado, seleccione el marco grande y exporte. Si tienes más de tres botones. Si solo tienes uno o tal vez dos botones, puedes exportarlos de forma individual. Para hacer eso, al igual que los cuadros y golpea Export. También hay una hoja de tramposos adjunta por si quieres revisar rápidamente lo que cubrí en esta conferencia. Recuerda, diviértete con él. No hay presión. Sólo prueba las cosas. 14. Los fundamentos de trabajar con el color: Bienvenido de nuevo. Déjame mostrarte cómo puedes trabajar con colores en Figma, los puntos esenciales, por cierto, en la próxima conferencia que nos meteremos en cosas más avanzadas. De acuerdo, empieza con cualquier fotograma aleatorio. En este punto, ya sabes, puedes usar el área Relleno para controlar este color de marcos. No hay diferencia entre el relleno para este marco y el relleno para un rectángulo, por ejemplo, permítanme agregar uno. Por favor, abre el recolector de color para que podamos explorar esta parte. El lado superior izquierdo es blanco puro. Eso es FF, FF, FF. Por lo que seis f's en total. Y en el lado opuesto tenemos negro puro y eso son seis ceros, 0000, 0000, 0000. Ahora bien, ¿por qué estoy viendo a estos personajes? Estos conforman el código hexadecimal. El código hexadecimal es lo que usan los desarrolladores web para convertir nuestros diseños en un sitio web completamente funcional. No les dices que quieres el color azul oscuro para el botón. En cambio dices que quieres d 0 seis, CA. Se puede ver que este es un código hexadecimal porque así lo dice aquí mismo. Nunca usó nada más para los propósitos de diseño web. Si tu cliente tiene un código de color específico para su marca, por ejemplo, DHL es famoso por su amarillo. Se puede escribir eso en FFC, ver 0000, así como así. Y si buscas esquemas de color en la web, podrás obtener códigos hex para cada color. Sólo tienes que escribirlas en pegarlas con Control V. A continuación, puedes bajar la opacidad usando este slider aquí, aunque no te recomiendo que hagas eso con tanta frecuencia. No es buena idea. Ahora déjame cerrar esto y añadir la novela, la forma. Aquí está la cosa. Después de establecer un color, lo podemos ver aquí en los colores del documento. Esto es grande mi intento de ayudarnos. Si hacemos este rojo y luego queremos añadir la tercera forma, por ejemplo, adivinar iba a suceder. Tendremos ese reloj de pulsera agregado aquí de lo que es. Y si hacemos clic en él recogerá ese color. Hablando de eso, esto se llama la herramienta cuentagotas de ojos, y te ayuda a seleccionar colores desde cualquier lugar del lienzo. Como puedes ver, hay un efecto de aumento en la parte superior derecha. Ese es Figma, ese no soy yo editando este video. Por lo que esto te ayuda a recoger colores con precisión. Esto funciona muy bien en las fotos, pero tendremos tiempo para explorar eso más adelante. Pasemos a este bar aquí. Hasta el momento hemos trabajado con colores sólidos, pero también se pueden agregar gradientes. El asunto es que este lineal es el único que recomiendo. Los otros, los uso tal vez menos del 5% del tiempo. Con un gradiente lineal, obtienes dos extremos que puedes controlar. Ahora mismo, estoy trabajando en este. Cuando termine, puedo pasar a este coleccionado y ahora puedo jugar con él en caso de que esté medio lleno, solo levante la opacidad así. Por favor, acerque y juguemos con este gradiente. Ahora, para ser honesto, todos estos ajustes, como ajustar la transición aquí y todo eso. Bueno, no lo vas a hacer todo tan seguido. Esa es la verdad. Pero quiero que sepas que sí tienes control total sobre lo que está pasando aquí. Por ejemplo, puedes agregar un tercer color. Ver esta plaza vacía. Si haces click, agregarás otro punto de color. Y si quieres quitarlo, solo tienes que hacer clic en él y luego presionar la tecla Eliminar. Entonces de nuevo, en realidad no vas a hacer eso todo lo que se abrió en proyectos de diseño web, pero sepan que está disponible. De acuerdo, una última cosa, puedes cambiar el ángulo del gradiente así. Basta con agarrar un extremo y luego moverlo. Ahora, para ser honesto, solo usarás aquí dos tipos de gradientes. Ahora, la cosa es que en la mayoría de los proyectos de diseño web, vas a usar dos tipos de gradientes, vertical y horizontal. Estos son los únicos dos que en realidad se utilizan en el diseño web moderno para asegurarse de que el gradiente sea perfectamente recto. Me gusta alinearlo en uno de sus bordes como así la opción final en este desplegable es la imagen. Al hacer clic en él, obtendrás este patrón a cuadros. Esto significa que puedes arrastrar un año de imagen y esta parte, o puedes hacer clic aquí para llegar a la ventana de navegación. El grandioso de ello es que tienes algunos deslizadores para ajustar la imagen. Ahora para ser justos, esto no es exactamente Photoshop, pero esto es más que suficiente para la mayoría de la gente. Entonces, de nuevo, esto es algo bastante impresionante. Pero volvamos a usar colores. El grandioso de esta parte es que puedes agregar otro relleno encima de esta imagen. Basta con hacer click en el símbolo más. Por defecto, la opacidad se baja al 20 por ciento. Y así es como se puede agregar que somos la imagen o aún mejor añadir el gradiente. Por ejemplo, imagina que quieres agregar algo de texto blanco en la parte inferior, pero tal vez esta parte no sea lo suficientemente oscura, así que realmente no puedes leer ese texto blanco. Por lo que para arreglarlo arriba en el gradiente de arriba a abajo para la Opacidad ir con 80%. posible que quieras ajustarlo para que la parte superior no se vea afectada. Y en general, así como eso tienes en efecto impresionante. Ahora para recapitular, esto se llama Selector de color, y este es el código hexadecimal. Se pueden escribir los códigos de color que se pueden obtener de la web. Pero recuerda que siempre son seis personajes. Sigma te está ayudando con estos colores de documentos, pero eso es solo después de que te comprometas una aplicación de color que realmente la usas. Puedes bajar la opacidad de un color a partir de aquí. Y se puede cambiar el tipo de falla tienen de esta parte aquí, mi consejo se adhieren a gradientes lineales ya que se ven así mucho mejor. Puedes apilar varios colores usando este símbolo más aquí. Y también se puede cambiar la opacidad desde este lugar, 01. Lo último que se me olvidó mencionar, siempre se puede ocultar, se llenará haciendo clic en este ícono. Entonces si no estás seguro de si tu gradiente está bien, apágalo y mira qué es qué. Y eso es lo básico de trabajar con el color. A continuación, veamos cómo funcionan los pros. Te veré en la próxima conferencia. 15. Cómo trabajar con el color como un profesional: Bienvenido de nuevo. En este punto, conocemos los conceptos básicos de usar colores en Figma, pero así es como llevamos esto al siguiente nivel. Diga que este tono específico de azul es muy importante para el cliente, ¿verdad? Imaginemos ese caso. Esto significa que probablemente lo usaremos durante todo el diseño, ¿verdad? Lo vamos a usar y montones de lugares. Ahora, en lugar de depender los colores de los documentos o usar la herramienta cuentagotas de ojos, esto es lo que debes hacer. Al lado derecho de Fell. Vas a ver estos círculos llenos. Haga clic en ese icono y eso abrirá estilos de color. Actualmente no hay nada aquí, pero haga clic en ese símbolo más de la derecha. Figma nos está pidiendo que lo llamemos e incluso nos está mostrando el color aquí mismo. Y así, tenemos nuestro primer color en estilo de otros colores. Si anula la selección haciendo clic en una región vacía, verá que esta entrada está justo aquí en la parte superior derecha. Ahora, cuando quieras usar el mismo color, ya sea en una capa de texto, en un marco, en el rectángulo, donde sea que puedas simplemente hacer clic aquí, y eso revelará tus estilos de colores. Haga clic en él, y ahí va a haber muerto. Ahora, déjame hacer eso una vez más. Podría preguntarse, ¿por qué es esto importante? ¿ Por qué esto es tan revolucionario? Bueno, la consistencia es clave. Quieres asegurarte de que usas exactamente el mismo código de color absolutamente en todas partes. En un proyecto que es sólo una página. Eso parece bastante fácil. Pero imagina que tienes 20, 40, tal vez 100 pantallas a las que tienes que acudir. Ahí es donde realmente brilla esto. Déjenme agarrar rápidamente estos elementos. Haga la herramienta de movimiento arrastrando hacia fuera una caja, haga clic en los círculos y elija uno de los estilos. Es así como puedes actualizar rápidamente tu diseño realmente, realmente rápido. Y si quieres cambiar las cosas, solo tienes que dar click aquí y elegir la otra. Simple y fácil de conseguir. Ahora, déjame cambiar a un freebie desde la pestaña de la comunidad. Aquí tenemos una app con montones de botones, pero imagina que acabamos recibir algunos comentarios y es mala retroalimentación. Bueno, así es como debes trabajar. No tengo nada seleccionado en este momento, así que puedo ver los estilos de colores de este archivo. Son dos de ellos, botón principal y secundario. Haga clic con el botón derecho en el primero y elija Editar estilo. Se puede cambiar su nombre, descripción, y propiedades, pero quiero cambiar el código de color. Haga clic aquí y utilice el selector de color. Cuando estés contento con él, simplemente ciérralo y ve cómo puedes actualizar rápidamente todas estas pantallas en una sola acción. Y este es un proyecto bastante pequeño. Permítanme actualizar el verde también. Entonces no se selecciona nada ¿verdad? Después hacemos clic derecho para editar al estilo desde la parte inferior click aquí para mostrar el selector de color. Y ahora puedes hacer lo tuyo. De acuerdo, Ese es el, volviendo al proyecto inicial. Aquí es donde necesitas hacer una actualización. Mira, nunca debes llamar a estos colores por lo que son ahora mismo, como el rojo, el verde, el azul o lo que sea. En su lugar, dales un nombre descriptivo como color de fondo, color de acción, titular, color primario y así sucesivamente. Y eso es porque si lo agregamos y transformamos esto en un tono verde por ejemplo, bueno, el nombre leído no tiene sentido. Entonces otra vez, cámbialo a algo que sea universal, como carga principal, botón secundario, fondo y así sucesivamente. Pero antes de que terminemos, ¿qué tal si ya no quieres que la capa tenga el mismo color? Bueno, no hay más la entrada de relleno aquí porque le has asignado este estilo de color. Entonces básicamente estos están vinculados, pero siempre puedes desconectarlo haciendo clic aquí. Ten en cuenta que no verás este icono de la cadena a menos que pases por encima de él. De acuerdo, ahora aparece. Haga clic en él, y eso va a ser que la forma sí siga siendo del mismo color, pero ahora obtienes acceso para expulsarlo y puedes cambiarlo como quieras. Déjame seleccionar otra capa. También podría usar este símbolo menos, pero eso quitará el relleno y podría perder la forma si no tienes cuidado. A ver a qué me refiero. ¿ Dónde está? Todavía lo tenemos aquí, pero es totalmente transparente. Ahora para recapitular, todas las empresas deben tener un esquema de color. Si tu cliente no lo hace, tendrás que idear uno por tu cuenta. Tenemos una conferencia separada sobre eso sobre cómo se supone que debes trabajar con varios esquemas de colores y llegar a ellos. Pero suponiendo que tengas algunos colores que quieras usar, agréguelos a tus estilos de color. Esto se hace mediante el uso de este icono a la derecha el relleno, haga clic en él, y luego use el símbolo más. Recuerda nombrarlo apropiadamente en función de cómo o dónde se usa. No lo nombre en función de su look actual. Antes de irnos, déjame volver a ese freebie y eliminaré ambos estilos de colores. Entonces estamos empezando de cero. Imaginemos que acabamos de descargar este archivo y no hay estilos, el altavoz, ¿verdad? De acuerdo, no hay problema. Aquí te explicamos cómo debes trabajar. Voy a mantener presionada la tecla Control y voy a pasar a uno de estos botones. Voy a usar Control porque eso me permite perforar hasta esa capa. No importa si está dentro del marco, será un grupo lo que varios marcos en varios bucles. Entonces por eso estoy sosteniendo el control voluntad, Ok, siguiente voy a seguir manteniendo Control y luego voy a añadir turno. Y esto me permitirá recoger múltiples capas. Entonces eso es Control y Turno. Justo así. Ahora con todos ellos seleccionados, ahora podemos llegar a este ícono, golpear el símbolo Plus, y crear un nuevo estilo de color. En general, configurarás tus colores al inicio del proyecto. Pero en caso de que te encuentres con esta situación, ahora sabes manejarla. Imagínate que un compañero de trabajo sólo te manda este archivo, ¿verdad? Pero tal vez otra vez, lo descargaste de la web. Ahora, está bien, pruébalo y mira cómo te va. Esto debe ser agradable y divertido. 16. Cómo agregar imágenes: cuadros y rectangles: Bienvenido de nuevo. En esta conferencia, quiero mostrarte cómo puedes agregar imágenes a tus proyectos. En primer lugar, ¿dónde se pueden obtener imágenes de alta calidad que sean totalmente gratuitas? Por suerte, tenemos unsplash.com. Este es el lugar para bellas imágenes. Úsalos como quieras, son totalmente gratis. A continuación, quiero mostrarte cómo debes trabajar con ellos en Figma. En la primera fila, tenemos algunos marcos y debajo tenemos algunos rectángulos. Así es como te recomiendo trabajar. Ahora, usa el control de teclas rápidas Shift K, esa es la tecla Command Shift en el Mac. Y eso abrirá una ventana del navegador. Si no puedes recordar Control Shift K, por favor ve a la barra de herramientas y encontrarás esta opción debajo de las herramientas de forma. Por lo que debajo de la herramienta de rectángulo de abajo, seleccionaré las imágenes manteniendo presionada la tecla de control y haciendo clic en ellas. Ahora, Figma va a pensar por un segundo, va a dudar porque se trata imágenes enormes de más de 4000 píxeles. Entonces sí tienes que ser un mal paciente. Ya sabes, Figma está listo cuando tu cursor se va a quedar así. Podemos ver tenemos tres imágenes cargadas. Ahora todo lo que queda es dar click en los marcos cuando To Entry. Genial. Ahora repitamos el proceso, pero esta vez usaremos los rectángulos. Entonces Control Shift K, igual a las imágenes para que puedas obtener una buena comparación. Y de inmediato se puede ver que esto es más fácil de trabajar con. Esto es lo que recomiendo. Estas imágenes se ven mucho mejor porque encajan mejor. Ese es el primer punto esencial. Colocar imágenes en rectángulos te conseguirá un mejor ajuste. Si comprobamos el panel de capas, observe las diferencias. En cierto sentido, las imágenes han sustituido a los rectángulos. Eso es porque se pondrán como relleno. Entonces obtenemos tres capas, no sexo. En cuanto a marcos. Tenemos tres marcos y tres imágenes. Entonces tenemos un poco más de cosas y eso no es ideal. Pero, ¿por qué te deberían preocupar los marcos? Bueno, si controlas, haz clic en la imagen así, obtendrás un resaltado de sus bordes. Ahora puedes redimensionarlo. Es decir, si te alejas y también puedes usar el panel de capas para seleccionar las imágenes y luego redimensionarlas. Tan solo ten en cuenta una cosa que sí necesitas mantener pulsada la tecla Shift mientras cambias el tamaño para no distorsionar las imágenes. De lo contrario podrías terminar con algo como esto. Y obviamente no queremos eso. Por lo tanto, por favor mantenga pulsado Shift o utilice la herramienta de escala De acuerdo, así que eso es lo que pasa con los marcos. No se establecen las imágenes como Fells. No encajan también, pero son más fáciles de redimensionar. Pasemos a la segunda fila, que nuevamente es la opción preferida aquí en caso de que quieras ajustar la imagen, mi consejo es que hagas click aquí en Recortar imagen. Esta es la forma más fácil y eso es lo que recomiendo. Ahora puedes moverlo arriba o abajo, izquierda y derecha y así sucesivamente. Y por supuesto también puedes redimensionarlo. Pero aquí está el pateador. Déjame acercar mucho. Se puede redimensionar el rectángulo o la imagen. Entonces esa es una distinción ordenada. El rectángulo o la imagen, CD símbolos azules. Estos te muestran los bordes del rectángulo. Entonces si arrastro hacia adentro así, y luego golpeo Escape para comprometerme. Bueno, el rectángulo ahora está consciente. De acuerdo, déjame habilitar el cultivo una vez más. Si voy al borde de la imagen, veremos esta flecha sobre qué Dios, señor. Ahora podemos redimensionarlo, pero una vez más, por favor mantenga pulsado Shift. Ahora el ligero tema es que se puede conseguir esta situación donde estos bordes tipo de superposición. Entonces tal vez no sepas cuál es cuál, ¿verdad? En estos casos, mi consejo a medida que mueves la imagen hasta que puedas ver claramente como bordes, realmente ayuda también acercar mucho. Ahora para recapitular cuando quieres colocar imágenes, los rectángulos son un poco mejores que los marcos. Usa Control Shift K y haz clic en ellos, estar en rectángulos, círculos o cualquier otra cosa. Cuando desee editar una imagen que se coloca dentro del rectángulo, utilice el icono de recorte de la parte superior de la pantalla. Si quieres redimensionarlo, asegúrate de entender los símbolos azules delineados en el rectángulo. De acuerdo, entonces otra vez, azul para el rectángulo. ¿ De acuerdo? Una cosa, también puedes hacer doble clic cualquier imagen para ajustarla en términos de contraste de exposición, y así sucesivamente, obtienes estos deslizadores. Pero por favor ten en cuenta que si este panel está abierto y quieres cerrarlo, no hagas clic en el Canvas así. En su lugar, usa la tecla Escape. Entonces déjame hacer eso otra vez. Entonces con una imagen dentro del rectángulo, si haces doble clic en él, vas a abrir este panel. Para cerrarlo, por supuesto puedes usar el símbolo X o mejor aún, usar la tecla Escape. Grado. Una última cosa que debes saber, decir que no te gusta esta imagen y quieres agregar otra. Seguro. La mayoría de las personas prefieren arrastrar una nueva foto desde su escritorio por encima de una existente. Pero eso no funciona en Figma como se esperaba. Como puedes ver, la imagen no va dentro del rectángulo. En cambio, esto es lo que debes hacer. Necesitas seleccionar la forma existente y notarás que el relleno está configurado en imagen. Ahora, ve a tu escritorio o a la carpeta que quieras. Agarra tu foto, pero esta vez, déjala aquí. Consulta este punto culminante. Esto significa que va a sustituir al existente. Igual que eso. Ahora, déjame hacerlo de nuevo en un nuevo rectángulo. Entonces una simple, básica ¿verdad? Ahora, arrastra una imagen, pero no la dejes caer en el Lienzo. En cambio, déjalo aquí en esta pequeña zona. Ahora, de hecho es un poco demasiado pequeño. Entonces lo que puede hacer es este doble clic dentro de una imagen y este panel se va a abrir. Ahora puedes dejar caer la foto aquí. Y como esto es más grande, esto puede ser más fácil para la mayoría de la gente. En general. Es así como añades imágenes a tu proyecto. Control Shift K en un rectángulo, puedes usar un marco también, pero en mi opinión no es tan bueno. Entonces rectángulos lo es. Gracias. 17. Crea una galería o collage en Figma: Bienvenido de nuevo. Pongamos a prueba nuestras habilidades creando una galería encantadora o un collage en Figma. Esto es lo que quiero que hagas. Yo quiero que te veas la primera vez y la segunda vez lo vas a hacer. Por favor, tanto el tiempo en los comentarios junto con su diseño. Empieza con cualquier marco, cualquier tamaño, porque quiero que cambies su ancho y altura desde el panel de propiedades. Estamos buscando 1920 por 1080. A continuación, agregue cualquier rectángulo aleatorio. Ahora esta es la parte interesante. Digamos que queremos tres columnas, ¿verdad? Puedes usar lo que quieras, pero yo voy a usar tres. ¿ Cómo nos aseguramos de que el rectángulo sea lo suficientemente ancho para un buen ajuste? Bueno, aquí está la cosa en el campo ancho, puedes hacer algunas matemáticas. Entonces teclea en 1920 slash 3, eso es 1920 dividido por tres. Y eso nos va a dar 640. Y ahora podemos crear copias de esta forma y sabemos que va a encajar ¿verdad? Se puede utilizar Control D para hacer copias, D como en duplicado, pero eso colocará la copia justo por encima de la inicial. Entonces aquí hay una mejor manera. Lo que sugiero es que mantenga presionada tecla Alt o la tecla Opción en un Mac, haga clic y arrastre hacia fuera una copia. Ahora, esto funciona en la mayoría de los programas de diseño, y estoy muy contento con las palabras en Figma 21 tiempo más. Pero esta vez quiero que sostengan también Alt y Shift. turno hará que la copia se mueva en una línea perfectamente recta. Entonces eso es genial. De acuerdo, Ahora el tema es que no podemos ver los bordes de nuestras formas. Por favor selecciona Alt V y agrega un trazo. Esto está disponible aquí mismo debajo de relleno. El trazo es muy fácil de usar. Se puede ajustar el color como para que el seleccionador de color sea exactamente el mismo. Y eso significa que podemos tener un color sólido, un gradiente, o incluso una imagen como trazo. Queríamos blanco puro, aunque mi consejo es que lo hagas un poco más grueso. Pero tenga en cuenta que necesita usar sus teclas de flecha en su teclado para cambiar este valor. Tu desplazamiento del ratón no funciona aquí. ¿ De acuerdo? Ahora también puedes cambiar el posicionamiento. Ahora mismo está ajustado al interior. Estoy bastante contento con eso, pero puedes elegir otro escenario. Si eliges centro y tienes un valor como seis píxeles, tres de ellos se van a colocar en el interior y tres de ellos en el exterior. Entonces eso es lo que significa centro. A continuación, necesitamos agregar más filas. Entonces usemos exactamente la misma técnica. Entonces todo para hacer una copia y turno con el fin de que vaya en línea recta. Por lo que todos los cambios de arrastre. En este caso, no hice ninguna matemática porque quiero mostrarte una alternativa. Entonces ahora que tenemos nueve formas, por favor selecciónalas todas. si acaso seleccionas el marco, por favor pulsa Enter. Observe esa diferencia por cierto. Entonces ahora mismo tengo las formas seleccionadas. Pero si dibujo una caja grande, así, vale, ahora este marco que se llama este top one que está seleccionado y eso no es bueno, eso no es lo que queremos. Entonces si se selecciona el marco, solo tienes que pulsar Enter y eso agarrará todas las capas dentro de las que se van a seleccionar. De acuerdo, Ahora nos moveremos aquí y arrastraremos hacia abajo. Sentirás figma. Trataremos de ayudarte a encontrar el borde del marco. Está bien, Hermosa. Ahora esto encaja. De acuerdo, ahora es el momento de agregar algunas fotos, ir a unsplash.com y descargar un montón de ellas. Ya lo he hecho, así que déjame usar Control Shift a para añadirlos. De nuevo, espere un segundo hasta que Figma los procese. Por lo general es bastante pasado. Ok, Ahora da click en cada rectángulo. Este es un ejercicio de velocidad. Las técnicas son bastante simples. Alt Shift, arrastre, control Shift K, y eso se trata de que nada todo eso especial. O por supuesto puedes hacer algunas matemáticas. Pero quiero que te muevas lo más rápido posible y crees un bonito collage. Ahora bien, me encantaría ver algunas imágenes de su propio país. A ver si puedes encontrar alguno que debiera ser divertido. Y en caso de que el trazo blanco no funcione, por favor seleccione todas las capas así. Echa un vistazo sin embargo. El marco no está seleccionado. Las formas son. Está bien. Ahora cambia el color del trazo a lo que quieras. También se puede ajustar el grosor, tal vez la posición. Ahora, es mejor que hagas esto ahora porque llegas a ver cómo se ve afectada toda la galería. Pruébalo y publica tu propio collage. De nuevo, me encantaría ver fotos de tu otro país. Ten uno y recuerda publicar tu trabajo y tu tiempo. Gracias. 18. Cómo enmascarar en Figma: Bienvenido de nuevo. Sabemos agregar imágenes a Figma Control Shift K o las fotos de arrastrar y soltar en la región llena, ya sea en el panel derecho o en esta área de revisión. Entonces esas son las principales opciones. Pero déjame mostrarte algo más que necesitas saber y eso es enmascarar. Digamos que quieres hacer un avatar. Tema muy común en proyectos de diseño web. Comience con una elipse, un círculo. Se puede encontrar eso debajo de la herramienta de rectángulo. Arrastra uno hacia fuera y como lo estás haciendo consigue arrendamiento, mantén turno. Y eso te dará un círculo perfecto. A continuación, arrastre cualquier imagen por encima de ella. Ya tengo uno preparado. Ahora, inicialmente va a ser enorme, sobre todo porque es de unsplash.com. Esto no se agrega como una película que sea intencional. Vale, Ahora, esta es en realidad una buena oportunidad para enseñarte cómo cambiar rápidamente el tamaño de una imagen gigante además del punto, pero es una buena oportunidad. Entonces sabemos que necesitamos mantener el turno para no distorsionar bien la imagen, aplastarla o nada por el estilo. De acuerdo, Ahora, turno nos ayuda con eso. Pero si mantienes presionada la tecla Alt o la tecla Opción en un Mac, eso te permitirá cambiar el tamaño de la imagen desde ambos extremos. Entonces si estás trabajando en este punto de coordenadas, el otro va a seguir el ejemplo. Entonces eso es Alt y Shift para encogerlo, Es una forma más rápida de trabajar. De acuerdo, ahora vuelve a las máscaras del tema principal, por favor asegúrate de que el círculo esté debajo de la foto. Esto es muy importante, ahora va a funcionar de otra manera. Ahora selecciona ambos y tenía este ícono de esta zona superior. En así como eso, tienes mayor que Máscara. Si revisas el panel Capas, verás que ahora tienes un grupo de máscaras. Y contiene dos cosas, por supuesto, la foto y el círculo. Si haces clic en la foto, puedes cambiar el tamaño de la imagen, moverla, y así sucesivamente, básicamente completa libertad. Lo mismo aplica si cambia a la elipse. Aunque control total. Ahora bien, ¿Esto es mejor que usar Control Shift K? Bueno, realmente depende de ti y de tu preferencia, pero ten en cuenta ellos ventaja, di que tienes una capa de texto grande. Esto se muestra en Airbus 300. Entonces un tamaño masivo, masivo, 300 es absolutamente enorme. Ahora arrastraré otra imagen por encima esta capa de texto y repetiré la acción. Crearé una máscara pinchando aquí. Y como dije antes, tenemos control total moverá la imagen para mejor se pueda girar el efecto y así sucesivamente. Y la capa de texto sigue viva, sigue siendo editable. Lo único que tienes que hacer es agarrar la herramienta de texto. No es necesario tener seleccionada una capa en particular. En realidad puedes seleccionar algo completamente diferente, como este avatar. Ahora activaré la herramienta de texto y me mudaré aquí. De acuerdo, Ahora editaré el texto a cualquier otra cosa, tal vez algo como esto, y ya está. Por lo que para recapitular, puedes usar cualquier tipo de capa de cualquier tipo, ya sea la forma de una capa de texto u otra imagen y utilizarla como máscara. Lo importante es que coloques esa capa específica debajo de la imagen, llegue ahí. Ahora, aquí hay otra ventaja de usar máscaras frente a la técnica de control Shift K. Puedes agregar varias capas a esta máscara y se ocultarán a, por ejemplo, todo como algunos círculos aquí. Observe cómo funciona esto. En el panel de capas. Podemos ver que esto se extiende. Eso nos dice que todas estas elipses también son parte de la máscara. Básicamente, cualquier cosa que añadas a este grupo va a actuar de esta manera. Entonces, por ejemplo, si quieres un nuevo círculo que no esté oculto, tienes que colocarlo fuera de este grupo. Ahora, para ser honestos en otros trabajos de diseño web, no nos encontraremos con demasiados casos como este. Pero conocer los principios del enmascaramiento es importante. En caso de que alguna vez te hagas una prueba de habilidades en una entrevista, ahora sabrás cómo funciona esto. Y con eso, sigamos, pero por favor asegúrate practicar lo que te acabo de mostrar. 19. Estos son los 3 tipos de texto de texto de Figma: Bienvenido, bienvenido. Veamos cómo podemos trabajar con texto. Cubriremos lo básico y como antes en el siguiente video, haremos más avanzado. Hay dos formas en que puedes agregar texto en Figma cuando puedes hacer clic y empezar a escribir así. Y en el segundo se puede hacer clic, arrastrar hacia fuera una caja, luego empezar a escribir. Voy a pegar algo de texto con Control V, Así que sólo péguelo. Ahora bien, estas son dos formas diferentes de agregar texto. Ahora déjame volver a hacer clic. Cuando inicias cualquier capa de texto y quieres terminar de editarla, puedes hacer clic en cualquier otro lugar como así. Y como se puede ver, el texto se ha guardado. O déjame volver a hacer esto. También puedes presionar la tecla Escape y el texto permanecerá como está. Ahora, sé que en otros programas, la tecla Escape podría eliminar el texto, pero aquí no es así. Entonces ese es tu primer punto esencial. Escape es tu amigo, ya sea en el selector de color cuando estás agregando texto o cuando estás trabajando con cualquier otro panel. Ahora volvamos a ella para el texto del párrafo, es decir, el que tiene la caja que dibujamos, podemos agarrar un mango y moverlo. Esto te permite hacerlo tan ancho o tan estrecho como quieras. Ahora tenemos algunas opciones aquí. Si hacemos click en este llamado Auto, donde el texto va a ser tan amplio como necesita ser para caber en una sola línea. No queremos esa muesca aquí y no en general, para ser honestos. De acuerdo, ahora déjame añadir la nueva capa de texto a través de una caja. Observe qué icono se presiona por defecto, es éste, tamaño fijo. Si lo piensas, en realidad tiene sentido. Dibujamos esa caja ¿verdad? Nosotros, el usuario, el diseñador, probablemente hicimos eso, así de grande porque eso es lo que necesitamos. lo hace la tercera opción, son de tamaño fijo. Básicamente eso es decirle a Figma, oye, este es el tamaño que quiero. De acuerdo, ahora hay otra opción aquí llamada auto hide. Esto es muy útil porque cuando dibujamos cajas, somos bastante descuidados para ser honestos. Como puedes ver, hay bastante espacio vacío aquí en la parte inferior. Y eso no está bien. Déjame mostrarte por qué. Digamos que agrego otra forma al Lienzo. De acuerdo, ahora con estos dos lado a lado, digamos que quiero un fondo alinearlos a la derecha. Ahora, mira lo que pasa. Figma ve que esta capa de texto es así de grande. Ahora para nosotros, sobre todo cuando deseleccionamos, bueno, asumimos que esto, todo lo que es. Entonces como puedes ver, esto es todo un problema. Aquí hay otro ejemplo rápido. En Figma, puedes medir distancias manteniendo presionada la tecla Alt y moviendo el cursor alrededor. Entonces está la tecla ALT y luego moviendo el cursor. Entonces si tenemos seleccionada la capa de texto y mantenemos presionada Alt, y movemos nuestro ratón sobre el rectángulo. Bueno, Figma nos va a mostrar la distancia. Enfriar como se esperaba. Eso es predecible. Esa es la palabra clave aquí. Predecible. Pero mira lo que pasa si ponemos el rectángulo debajo. Si comprobamos la medición. Esto obviamente no es correcto. Esto es una sorpresa y eso no es bueno. Ahora, técnicamente esto es correcto, pero no es lo que esperábamos. Por lo que la solución es elegir altura automática, altura automática. ¿ De acuerdo? Ahora, sé que paso cinco minutos en esto, pero es importante en caso de que alguna vez tengas que explicar qué son estos para recapitular. El primero es mejor para líneas simples de texto que suelen ser cortas. El segundo es generalmente el más útil como la caja o simplemente basado en el texto. Y el tercero es lo que esos casos donde sabes exactamente qué talla quieres. En mis proyectos reales, empiezo con una caja aleatoria. Entonces la tercera opción, después de basar mis textos, luego cambio a auto hide, y eso es lo que recomendaría. Entonces de nuevo, dibuja una caja aleatoria, luego cambia a auto hide. Antes de irnos, hablemos de font-family, fuentes y tipos de letra, palabras todo eso. Bueno. El primero aquí es la familia de fuentes. Roboto es una tipografía o familia de fuentes que contiene varios tipos de letra o familia de fuentes. Simplemente significan lo mismo. Voy a decir que otra vez, tipografía y familia de fuentes, son lo mismo. Ahora, para entender las diferencias entre una fuente y la font-familia, piense en lo siguiente. Eres parte de una familia ¿verdad? Ahora eso puede ser múltiples personas en tu familia, tal vez solo una persona, eso también está bien. No obstante, tienes una familia. Ahora use específicamente son una fuente. Eres toda la familia es una tipografía o familia de fuentes. Pero los individuos, por ejemplo, tu madre o tus hermanos o tus sistemas, esos son fuentes. Entonces, de nuevo, esto significa que el albedo es una tipografía o familia de fuentes. Y Roboto bold es una fuente que forma parte de esa font-family. La mayoría de las personas a menudo intercambian estas palabras como si significaran lo mismo. Fuente y tipografía. Eso no es correcto por lo que acabo de describir. Si los confundes, no es el fin del mundo para ser honesto. No te meterán en diseño de cárcel por eso. Pero de nuevo, para recapitular, múltiples fuentes, maquillaje de font-family aunque Burdeos cursiva, Roboto, Light, Roboto, audaz. Esas son todas fuentes. Ellos forman parte de la familia de fuentes Roboto. De acuerdo, ahora ya conoces las diferencias y podemos continuar. Gracias. 20. Descubre las propiedades de las capas de texto: Bienvenido de nuevo. Echemos un vistazo a esta parte del panel Propiedades y veamos lo que haga la cama. Más que eso, les voy a contar mis mejores prácticas. Por lo que este no será sólo un recorrido básico. ¿ De acuerdo? Ahora sabemos que este es el campo para la tipografía. Tenemos a Roboto aquí mismo para cambiarlo, solo teclea algo más. Así es como trabajan la mayoría de los Bros. En realidad no abres esta lista luego desplázate saber, en cambio solo escribes algo como MOSFETS y su ego, Montserrat. Ahora, hagamos un desvío rápido. ¿ Cómo se obtienen estas fuentes? Ahora la mayoría de la gente usa Google Fonts, pero aquí hay un consejo. Es importante que elijas tus fuentes en función del estado de ánimo del proyecto. A modo de ejemplo, imagina que te vas a la playa, ¿no? ¿ Te pondrías un traje formal? Por supuesto que no. ¿ Qué pasa con la boda? ¿ Te pondrías los shorts y chanclas? De nuevo, claro que no. Toda situación es diferente y requiere una mirada diferente. Así son tus proyectos de diseño web. Por eso hay que tomarte un tiempo y pensar en lo que funciona mejor. Algunas fuentes son elegantes, algunas otras juguetonas, algunas de ellas son serias, severas. Por lo que esto significa que esta no debe ser una decisión rápida. Después de que te decidieras, necesitas descargar la fuente haciendo click aquí. El proceso es bastante sencillo. Vas a conseguir el archivo zip que hay que extraer. En esta carpeta. Encontrarás algunos archivos y estos necesitan ser copiados y pegados en fuentes C Windows. Y eso es todo. Ahora en algunos casos quizá quieras reiniciar el mapa grande para asegurarte de que esos bonos van a estar disponibles para ti. Mi consejo es que descargues este archivo en particular que contiene la mayor parte de la responsabilidad de Google Pons. Es absolutamente enorme, así que por favor ten eso en cuenta. De acuerdo, Ahora, esto es lo que hay que buscar. Este es un sitio muy popular y puedes confiar en él con un 100 por ciento. De acuerdo, La siguiente parte en Figma y este panel de propiedades, esto se llama el peso o el estilo. Algunas tipografías tienen un solo estilo. Si vuelves a las fuentes de Google, verás el número de estilos que se muestra aquí en esta parte. Mi consejo, usar siempre bonos que tengan al menos tres estilos. Entonces eso es ligero, regular y audaz, por ejemplo, al menos tres de ellos, ¿verdad? Pasando adelante, aquí es donde estableces tu talla. Esto está en píxeles, pesar de que en realidad no lo menciona. No puedes usar el desplazamiento del mouse para cambiarlo hacia arriba, pero puedes escribir tus valores manualmente, o como lo hace la mayoría de la gente, usan las teclas de flecha arriba o abajo. Más turno. Shift cambia este valor en incrementos de 10 píxeles. Entonces eso es bastante bonito. De acuerdo, aquí están las cosas divertidas. El alto de la línea. Esto es crucial para mis proyectos de diseño web. Esto controla la cantidad de espacio vertical entre cada línea. Déjame mostrarte un valor muy bajo hará que el texto se vea pregunta. Es como si alguien lo pisara. Escribe, un valor generoso lo hará sentir suelto. Ahora se deben evitar ambos extremos. En su lugar, debe utilizar esta fórmula específica, el tamaño de fuente multiplicado por 1.5. Entonces si esto es de 12 píxeles, eso significa que la altura de la línea debe ser de 18. En caso de que no quieras hacer ninguna matemática, también puedes escribir un porcentaje como el 150 por ciento. Prefiero los valores de píxel. Entonces de nuevo, eso es 1.5 veces el tamaño de la fuente. Siempre puedes usar cuanto más pequeño sea el multiplicador, como 1.4 o 1.3. Pero me encanta Pi de un punto. Ese es el punto dulce a lo sumo que uso a x, pero eso es en situaciones muy específicas que cubrirán juntas. Mi consejo se pega con 1.5 y estarás bien para ir. A continuación se presenta el espaciado entre letras. No debes jugar con esto excepto por títulos que son bastante cortos. Unas palabras y eso es todo. Pero por favor nunca modifique este campo para los párrafos. Es un enorme error. Ahora, el espaciado siguiente párrafo, esto es bonito y ordenado, pero no puedo decir que lo use todo tan a menudo. Mata idea. Diga que tenemos un bloque de paquetes, ¿verdad? Voy a golpear Enter y eso lo romperá. Pero si quieres controlar la cantidad de espacio vacío aquí, podrías usar este campo. Observe cómo funciona, pesar de que aquí no teníamos ningún espacio vacío visible, este campo lo insertó. Aquí. Voy a tocarlo dos veces. Y obviamente vamos a conseguir esta brecha aquí. Voy a golpear Enter, pero sólo unos. Para hacer esta opción llamada espaciado de párrafos. Podemos ajustar nuestras brechas. De nuevo, está bien para gente como yo, pero ¿lo usarás? Yo bastante adeudo. Entonces no te preocupes por ello es solo algo de lo que debes estar al tanto. Aquí las opciones finales son bastante sencillas. Esta es la orientación del texto, alinear a la izquierda o a la derecha, o para esos pocos casos, centrado. Bastante fácil de entender. Usarás esto bastante. Pero aquí hay algo que no usarás. Esta parte aquí cambia la alineación del texto en el recuadro que es postura. Entonces si la caja es bastante grande, podrías potencialmente alinearla de fondo o centrarla. Pero, y es un enorme, pero no te recomiendo que juegues con él. No es necesario. Ya verás por qué ese es el caso más adelante en las canchas, tenemos opciones mucho mejores. Ahora, tal vez piensen que en realidad hemos terminado con esta parte, pero hay una tonelada más por hacer. Haga clic en estos puntos y vea cuántas características nos está dando Pigma en realidad. Además, esta es una ventana desplazable para que haya cargas que exploramos. Ahora lo que me encanta es el hecho de que obtienes esta ventana de vista previa justo aquí, izquierda, centro, alinear a la derecha. Probablemente lo sepas. Pero y si no estás familiarizado con sólo el pastel, por ejemplo, escuchará esta palabra que es, la segunda línea de texto tiene huecos más grandes para que forme un bonito bloque de texto. ¿ Y qué hay de subyacente a todo tachado? Basta con pasar el cursor sobre ellos y ver qué es qué. Pero de nuevo, la verdad es que en realidad no uso estos discursos excepto el en particular, todos gorras. Esto está disponible aquí mismo bajo mayúsculas y minúsculas. Haga clic en el primero y observe el cambio. Se puede ver esto está habilitado por este fondo gris. El movimiento que haga clic en el menos. Esta es una opción un poco extraña porque en la mayoría de los programas de diseño, si vuelves a hacer clic en él, lo deshabilitas aquí no es el caso. Entonces, de nuevo, si quieres desactivarlo, usa el símbolo menos. Ahora por lo demás, te voy a dejar para explorar estas partes si te interesa. Pero mi consejo, instalar montones de Google Fonts. Recuerda usar 1.5 para tu altura de línea y no te metas con esta otra cosa excepto todas las gorras. Tenemos cosas mucho más importantes que cubrir. Gracias, y nos vemos en la próxima conferencia. 21. Cómo trabajar con texto como un profesional: Bienvenido de nuevo. Déjame mostrarte cómo trabajan los profesionales con capas de textos en Figma. Después de configurar un texto, mira de cierta manera, tenemos que usar este ícono aquí. Este panel se llama Estilos de texto. Y si has estado siguiendo, es muy similar a los estilos de color. Haga clic en el símbolo más y ahora puede nombrarlo. El siguiente paso, puedes seleccionar cualquier otra capa de texto o crear una nueva. Y en lugar de meterse con todos estos ajustes, puedes hacer esto. Da clic aquí y elige el estilo vasco que acabamos de crear. Además puedes organizar estos estilos como quieras. Pero la mayoría de la gente usa la siguiente estructura. H1, H2, H3, a veces H4, textos corporales, citas, enlaces, y tal vez algunos otros ítems. Pero tomémoslo el mejor más bajo. ¿ Por qué sin embargo, para qué necesitamos todo este trabajo de preparación? Bueno, aquí está la cosa. Déjame abrir este regalo desde la pestaña Comunidad. Tenemos tres títulos aquí, ¿verdad? Si hacemos click en el primero, podemos ver esto se muestra en un ferrocarril extra negrita 25 pixels. Pero ¿y si el siguiente fuera de 23 pixeles y el final de 27 pixeles? Estaría bien eso? No, claro que no. Eso se debe a que necesitamos consistencia, pero también necesitamos velocidad. Entonces para asegurarnos de que tenemos ambas cosas, montamos un estilo. Llamaremos a esto h3 o al subtítulo, o lo que quieras. Y ahora podemos aplicar este estilo en todas partes. Esta es una sola página, pero de nuevo, esta conferencia trata sobre cómo trabajan los diseñadores profesionales. Proyectos serios pueden tener 2050 Incluso cuando 100 páginas o pantallas. Cuando ese es el caso, posible que no recuerdes el, si este valor era 22 o 24, 26, la gente se olvida, es normal. Por eso tenemos los textiles de Estados Unidos. Esto nos ayuda a trabajar más rápido pero también a mantenernos consistentes. Ahora sobre esa estructura de nomenclatura, tal vez no sepas lo que significan H1, H2, H3. Está bien. Déjenme explicarlo rápidamente. H significa el rubro o el titular. Este es un término que proviene de HTML y es una convención de nomenclatura estándar. H1 debe utilizarse para el título más importante de la página. También es la más grande, y típicamente sólo hay uno de ellos en la página. H2 es otro título y a menudo se ve varias veces en la página, pero es menos importante asegurarse de que estas sean cosas muy diferentes. Debes asegurarte de que haya una gran diferencia entre ellos. Entonces si H1 es de 60 pixeles, H2 no debe ser de 56 pixeles, ¿verdad? Por sexo. No, porque eso sería demasiado parecido. La gente podría no ver la diferencia. En cambio, deberías usar algo así como 48 píxeles. Ahora, déjame ser claro. No hay lineamientos estrictos. No hay un conjunto particular de reglas que tengas que seguir si quieres tu título más grande. Entonces H1 para ser 48 pixeles, eso está totalmente bien. Si lo quieres más grande o más pequeño. De nuevo, eso está totalmente bien. Depende de ti. La única regla es esto asegura que sean lo suficientemente diferentes, sobre todo con los tres primeros títulos, H1, H2, H3. Nuevamente, éstas deben significar un nivel de importancia diferente. Ahora en este proyecto en particular, si anula la selección, sí vemos que tenemos siete rubros. Eso es bastante inusual, pero como acabo de decir, noméndalos como quieras. Por ejemplo, este diseñador eligió este bit de textos de la sección testimonial para ser estilizado en H6. Habría preferido que esto se llamara texto corporal. Y probablemente usaría el mismo para esta breve descripción aquí en estas las tarjetas. Pero de nuevo, al final del día, no te pongas mucha presión. Si no estás seguro de cómo llamarlos. Usa el nombre que quieras. Textos testimoniales para revisar texto, cita, lo que funcione para ti, siempre y cuando recuerdes lo que hiciste está totalmente bien. Ahora volviendo a la velocidad, Vamos a editar encabezado para decir la versión extra negrita, ¿verdad? Voy a subir esto hasta un gran valor, digamos 60 píxeles. Observe cómo se han actualizado muchas capas de textos en una página. Esto es agradable de tener, pero no hay nada tan loco, ¿verdad? No es todo tan impresionante. Pero en un diseño de 50 páginas, esto es absolutamente monumental. Entonces así es como trabajan los profesionales con capas de texto. Ellos les ahorraron estilo en este panel y lo hacen uso para ser más rápidos pero también para mantenerse consistentes al hacer eso, consiguen el trabajo hecho, pero también Bacon mucha flexibilidad. Entonces si el cliente odia esta fuente, puedes cambiar rápidamente las cosas. Velocidad, consistencia, flexibilidad, eso son textiles para ti. 22. Efectos en Figma: sombras y más más: Bienvenido de nuevo. ¿ A quién no le encantan los efectos? ¿ Tengo razón? Trabajo, sombras en las sombras difumina las palabras, ¿verdad? Bueno, el figma ha descubierto, Empecemos con este diseño que has apegado al curso. Exploremos los diversos ejemplos empezando por este menú principal. Esto se ve bastante bien, ¿verdad? Pero el contraste simplemente no está ahí. Es un poco difícil de leer. Podríamos seleccionarlo. Este valor, esto controla la opacidad de esta capa, pero aquí hay una mejor manera de hacerlo. Vaya a efectos y haga clic en este símbolo más. Recuerda que puedes desplazarte en este panel. Entonces si no ves efectos ni exporta, simplemente desplázate hacia abajo. Ahora por defecto obtendrá una sombra de gota. Haga clic aquí y cámbielo. Y así de esa manera, este rectángulo se congeló. Pero di que realmente no puedes timbre tal vez por la grabación. Bueno, no hay problema. Haga clic aquí en este icono para personalizar su efecto. Esto tiene un solo campo y controla la fuerza del desenfoque de fondo. Cámbialo a ocho. Déjame acercar y deberías ver el efecto. Esto es bastante popular, sobre todo en las aplicaciones de iOS. Este look congelado para ver el antes y el después, puedes hacer clic en este ícono aquí mismo en pensar que es un buen paso adelante. Pero mi consejo es que te pegues al blanco o al negro. De acuerdo, intentemos esto otra vez. En este botón secundario, puedes ver que la imagen de fondo es un poco desordenada. Entonces, de nuevo, es difícil de leer en el desenfoque de fondo y se va a quedar más bonito. Mi consejo es que no te dejes llevar con ello. No añadiría eso aquí en esta mezcla simplemente porque ya lo usamos en el encabezado, y eso es suficiente. De acuerdo, ahora pasemos al título principal. Mismo tema de visibilidad. Esta vez, una sombra de gota puede ayudarnos a habilitarlo y sí, creo que es más fácil de leer. Ahora mi consejo es que siempre desselecciones para ver el texto sin distracciones. Abramos los ajustes y veamos qué está pasando. X es sinónimo de horizontal. Mi consejo es que siempre lo dejas en 0. Déjame ponerlo a algo así como 30. A ver qué pasa. La sombra se mueve hacia la derecha. Y si usas un valor negativo va a ir hacia la izquierda. En el diseño web moderno, las sombras extraviadas son la forma en que van. Es mejor así. Entonces otra vez, 0 y si x representa la horizontal, y representa el eje vertical. Y esto controla hasta qué punto se coloca la sombra del texto. Los valores bajos funcionan mejor. En realidad, la mayoría de las sombras de gota deben ser realmente, realmente, realmente sutiles, apenas perceptibles. Pero si quieres destacar más, podrías aumentar la opacidad. Ahora mismo está en 25 por ciento. Mantén pulsada Mayús y toca la tecla de flecha arriba, lo incrementamos. Pero esto es peligro de que ya, nunca usaría un valor tan alto. Entonces volvamos a bajarlo. De acuerdo, Ahora pasemos al botón principal. Aquí te voy a mostrar otro tipo de sombra de gota, esta vez una de color. Usa el mismo morado que el botón. Deberías tenerlo aquí mismo. Pero si no simplemente muestras el botón, está bien, la herramienta cuentagotas es fantástica. Ahora sube lo borroso a algo como Ben y por el valor y, digamos seis. Por último, toma la opacidad hasta el 50 por ciento, por si no has visto iba a hacer la decodificación. Déjame sacar esta imagen de fondo fuera del camino. Observe cómo el botón está irradiando hábito tiene un globo. Esa es otra forma de usar una sombra de gota, cosas geniales. Ahora pasemos a capas del desenfoque. Selecciona la imagen principal y aplícala, e inmediatamente verás qué es lo que esto ayuda con la legibilidad del texto bastante. Y por supuesto puedes ajustar su intensidad a partir de esta parte aquí. Ahora déjame aclarar algo. Este es el desenfoque de capa y está afectando la capa sobre la que la tenemos aplicada. Este botón aquí tiene un desenfoque de fondo. Por lo que el efecto congelado aparece sólo en su fondo. Entonces esa es la diferencia. Lo voy a decir una vez más. El desenfoque de capa funciona en la capa que lo tienes el aplicado en la capa de fondo solo difuminará la capa que está detrás del rectángulo o ese marco específico. De acuerdo, Cuando esta conferencia, déjame decir dos cosas. En primer lugar, prueba estos efectos para verlo por tu cuenta y ver cómo te gustan. También te recomiendo que intentes reemplazar la imagen de fondo por otra de unsplash.com. Ahora lo segundo, y ésa en realidad es la importante. Por favor, utilice los efectos con moderación. No los agregues por todas partes. Y cuando lo hagas, por favor sé sutil al respecto. Todos estos efectos no son la muleta. Si no puedes leer el texto primero, intenta desenfocar el fondo. Si eso no funciona, haga clic aquí y agregue la superposición negra. Pero si eso no te da un muy buen resultado, por favor sólo cambia la imagen. Otra vez. Los efectos no son tu gracia salvadora. No son una muleta en la que puedas apoyarte. Seguro podrías agregar una sombra de gota masiva y trazos y lo que sea. Pero esto se verá horrible. lo que de nuevo, por favor utilice una dosis muy baja de impactos. Por eso no te mostraré suficiente sombra, por ejemplo. No es una opción aquí, pero la mayoría de los principiantes la usan en exceso y hacen que sus diseños parezcan como si fuera 2005 otra vez. Entonces otra vez, sólo voy a saltarme. Está bien. En general, por favor diviértete con él y recuerda, dosis bajas. 23. Todo lo que necesitas saber sobre las cuadrículas: Bienvenido de nuevo. Hablemos de rejillas. Inicia un proyecto totalmente nuevo y agrega que este marco superior. Por favor cambie el ancho a 1920 ya que eso es lo que siempre recomiendo. Aleja un poco y hablemos de agregar y usar un sistema de cuadrícula. En primer lugar, tienes que agregarlo. Esto se hace seleccionando el marco así. Ahora en este panel justo debajo del diseño automático, encontrarás la cuadrícula de diseño. Haga clic en él, y tendrá una cuadrícula móvil aplicada por defecto. Obviamente esto es útil para las aplicaciones móviles, iOS y Android, pero para los propósitos de diseño web, por favor haga clic aquí y desde la cuadrícula, cambie hacia arriba dos columnas. Aquí te presentamos los mejores ajustes para la cuadrícula para un proyecto de diseño web. 12 columnas y el margen de 360. Esto es lo que te recomiendo encarecidamente que uses. Ahora bien, ¿por qué necesitamos una grilla? Bueno, esto nos ayuda a alinear las cosas correctamente. Cierra esto y agarra la Herramienta Rectángulo. Imagina que vamos a diseñar algunas tarjetas para una tienda online, ¿verdad? 12 columnas es el estándar porque podemos dividir ese número por 234 o incluso seis. Aquí voy a añadir un rectángulo que abarca cuatro columnas. Lo duplicaré rápidamente, entonces verás que quedará bastante bien. Esta cuadrícula te mostrará cualquier imperfección. Por ejemplo, déjame mover este sólo un poco a un lado. A ver cómo se destaca esto. Las rejillas te mantienen en línea, pero también te ayudan en Figma cuando quieres cambiar el tamaño de algo, por ejemplo, para la versión de escritorio, redimensionarlo para la versión de tablet. Por lo que 12 columnas con por qué 360 a ambos lados. Bueno, esa es mi preferencia personal. Y aquí está el porqué. 360 veces 20 es 720. 1920 menos 720 es de 1200 píxeles. Esta parte del diseño se llama el área activa, y aquí es donde deben colocarse todos tus elementos importantes. Déjame mostrarte un ejemplo rápido. Diga el New York Times, ¿verdad? Vea cómo funciona mucho espacio vacío a ambos lados del contenido. De esta manera el margen de 360 que ponemos. Pero aquí está la cosa. Cambiemos a Stripe.com. Se puede ver claramente que hay una línea vertical que cruza el lado izquierdo. Las cosas están perfectamente alineadas. De acuerdo, nada más sale fuera de ella. Pero del lado derecho, mira lo que está pasando, Lo que está pasando aquí. ¿ Por qué se permite que este diseño de tablero salga fuera del área activa? Lo mismo si nos desplazamos un poco hacia abajo. Esto en realidad no es un error. Esta parte aquí en medio, este es contenido esencial. Necesitas leerlo, necesitas verlo. Pero esta parte que está afuera, Eso es sólo decorativa. Se ve bien, pero de eso no es esencial, no es importante. Por lo que para recapitular, la cuadrícula para proyectos de diseño web debe ser de 12 columnas, margen de 360, de 1920 de ancho, con un área activa de 1200 píxeles. Se pueden colocar elementos de diseño fuera de estos 100 píxeles construidos, pero sólo si son decorativos. Eso significa que si no se les ve, no es gran cosa. Déjame explicarte un poco más las cosas. La resolución de pantalla más utilizada en el mundo estos momentos es 1920 por 1080. Por eso mi marco es 1920 y no 1440. ¿ Qué es otra cosa? Ahora fue la segunda resolución más utilizada. El seis por 768. Esto se usa principalmente en computadoras portátiles, las más antiguas en eso. Aquí está la cosa. Aquí te dejamos un cuadro de 1366 con una cuadrícula que está adaptada a ese tamaño. Este rectángulo aquí tiene 1200 píxeles de ancho. Aquí es donde se va a colocar el contenido. Y aún se puede ver que hay un poco de espacio vacío a ambos lados. Por eso recomiendo 1200 pixeles para el área activa. Incluso en laptops más antiguas, el usuario va a ver el sitio web de manera decente. Entonces voy a decir que de nuevo, diseñamos a 1200 píxeles porque esto encajará bien en mayoría de las pantallas de computadoras y laptops, incluso las más antiguas. Ahora, usted puede preguntar, prensa, ¿qué pasa con la grilla 960? Seguro. Eso es básicamente sólo un poco más estrecho y desafortunadamente los diseños estrechos simplemente no se ven tan bien. La mayoría de las personas prefieren unas experiencias grandes e inmersivas. Ahora, si ese es el caso, puede decir, pero Chris, ¿por qué parar a las 1200? ¿ Por qué no ir al 1400 o al 1600? A lo mejor aún más. Wikipedia ocupa todos los bienes raíces de la pantalla, igual que Amazon o Netflix. Pero estas son excepciones y no puedo recomendarlas. Te meterás en muchos problemas si no sigues mis consejos, al menos empieza con. Se supone que se rompan las reglas. Claro, pero ahora no. Cualquier diseño que publiques, por favor asegúrate de seguir mis consejos. 1924, el marco 1200 píxeles para el área activa, 12 columnas, 360 margen. Ahora, antes de que terminemos, quiero que hagas esto. Usa Shift R, que revelará a los gobernantes de la izquierda y en la parte superior. Entonces eso se envía son. Ahora haga clic y arrastre una guía, la pone a ambos lados del área activa aquí. Y cuando termines aquí, aquí es donde voy a usar ya que estoy grabando estos videos, realidad esconderé la grilla la mayor parte del tiempo. Y aun cuando esté habilitado ahora va a estar en 10 por ciento. En cambio, podría usarlo al 3% o algo así. Y eso es porque es distraer ser honesto. Hay mucho que mirar y desarrollar montones de decisiones de diseño a tomar. Quiero que presten atención a lo que estoy haciendo y que no se distraiga por la grilla. Creo que esa es una experiencia de aprendizaje mucho mejor. Para ocultar la cuadrícula, simplemente haga clic aquí en este ícono y ya está. De acuerdo, eso lo envuelve. Por favor, asegúrate de recordar esos valores. 1920 y 1200 píxeles, 360 a ambos lados, 12 columnas. 24. Una descripción de los componentes: Bienvenido de nuevo. Cubramos rápidamente los componentes en Figma. Estos te dan mucho control y flexibilidad. Así es como va esto. Digamos que creamos un botón. Empezaré con una capa de texto y luego usaré Shift a para habilitar el diseño automático. Entonces es realmente una cuestión de preferencia. Habilitaré un relleno, elige cualquier color que quieras. Voy a elegir azul o algo así. Por supuesto, necesitamos cambiar el texto a blanco puro. Eso tiene sentido. Obviamente, podríamos querer hacerlo un poco más grande. El tamaño predeterminado es demasiado pequeño. De acuerdo, entonces redondea las coordenadas y así sucesivamente. Nuevamente, este azulejo es subjetivo, pero como puedes ver, sí toma bastantes acciones, ¿verdad? No es nada demasiado difícil, pero es un montón de clics. Ahora que tenemos un botón completado, podemos usarlo a lo largo de nuestro diseño, ¿verdad? Diga un diseño de 50 páginas. Pero como siempre, entra el cliente y dice: Oye, no me gusta ese color, no me gusta esa carga. Agrega un icono, cambia el radio de esquina, y así sucesivamente. Básicamente cambiarlo todo. Aquí es donde entra en juego el problema. Tenemos que actualizarlo en montones y montones de lugares. Ahora podríamos cambiar el color si usamos estilos de colores. Pero, ¿qué pasa con el resto? Es por ello que necesitamos componentes. Permítanme borrar todas estas copias. Aquí está la carga original, ¿verdad? Selecciónelo y haga clic en este icono Crear componente. A continuación, arrastraré una copia. Ahora, digamos que el cliente dice que quiere bordes cuadrados. Está bien, no hay problema. Ahí vas. ¿ Y el color? Simplemente cámbialo. Es tan fácil como eso. Pero, ¿y si necesitamos añadir un icono? Bueno, podemos simplemente arrastrarlo y ajustarlo según sea necesario. Ya que estoy trabajando. Aquí está la llave. El clon de la derecha se actualiza constantemente. Esa es la magia de los componentes. Permiten hacer un cambio en el componente original y luego todos los clones se actualizan automáticamente sin importar cuántos sean. Déjame cambiar a otro proyecto. Aquí. Todos estos son botones básicos. En realidad, están hechos de un rectángulo y la capa de texto. Entonces esto ni siquiera es usar un marco que esté lejos de ser ideal. Pero digamos que el cliente quiere cambiar el estilo de este botón. Bueno, antes que nada, eliminemos todos estos básicos porque no los necesitamos. Imagínate a un colega tuyo que acaba de entregar este proyecto, ¿verdad? A lo mejor lo descargaste de la web o algo así. De acuerdo, seleccionemos los dos primeros y usemos Shift ocho para habilitar el diseño automático. Esto es opcional, pero la mayoría de los diseñadores lo prefieren. A continuación, ve a la cima de Figma y transforma esto en un componente. Hermosa. Ahora podrías alterar potencialmente copias de arrastre así. Pero si el proyecto es enorme y a través muchas páginas puede ser no se puede manejar eso. Entonces ve al panel izquierdo y cambia a activos. Aquí vas a encontrar el botón. Ahora, arrástrelo y ponlo en todas partes. Es así como se supone que trabajes desde el principio, podría pensar, pero Chris, si constantemente estamos arrastrando cosas desde la barra lateral, no podemos simplemente hacerlo cada vez el cliente cambia de opinión? Apenas actualizar y arrastrar copias. Bueno, sí, claro, en pequeños proyectos como este por supuesto esto está totalmente bien. Pero en los más grandes, es un gran dolor de cabeza. Y ten en cuenta que solo voy a hacer esto una vez después de eso, empieza a cambiar el botón, así, encuentra el original y empieza a editar aún, haré algo bastante obvio para que puedas ver los cambios. Es así como los componentes pueden ahorrarle mucho tiempo. Más que eso, puedes cambiar el contenido de texto en cualquiera de los clones a cualquier otra cosa, escribir algo, y eso es todo. Pero si cambias el estilo original, éste va a seguir el ejemplo. Se actualizará el tamaño, la familia de fuentes con cualquier otra cosa que hicieras en la original. Y los componentes no son sólo con botones. Puedes usarlos para casi cualquier cosa que se te ocurra. Pero tomémoslo paso a paso. En primer lugar, ¿cómo sabes cuál es el botón original y cuáles son los clones? Bueno, el original se llama oficialmente el componente maestro. Si cambiamos al panel Capas, verás este símbolo. Se dio cuenta de que esto está lleno. Esta es una masa ese componente y aquí es donde haces todas tus ediciones y se esparcirán por todos tus clones. A los clones en realidad se les llama instancias. Entonces de nuevo, clones o instancias es lo mismo. Y este es su símbolo. Este está vacío. Por lo que es bastante fácil recordar lleno para el original, vacío para el clon. Otra forma de hacerlo, da click en cualquier clon y verás esta opción aquí. Ir al componente maestro. Justo así. Ya sabes dónde puedes encontrar el original. Pero, ¿y si borras por error? No se preocupe. Da click en Aceptar préstamo y vas a ver esta opción llamada Restaurar componente. Figma nos tiene la espalda. De acuerdo, ahora pausemos y recapitulemos. Los componentes son una gran manera de acelerar tu trabajo. Selecciona cualquier marco, cualquier carpeta, cualquier elemento, y usa este icono aquí desde la parte superior. La mayoría de las personas prefieren habilitar el diseño automático. Antes de eso, entonces sugiero que arrastrara copias del panel de activos. Eso también se puede hacer desde el lienzo. Pero como este panel, ahí es donde básicamente esta guerra. Cuando quieras asegurarte de que eso está bien, el componente musulmán, también conocido como el botón original. Se puede reconocer por este símbolo en el panel de capas. O puedes hacer click en cualquier clon y tendrás la opción de ir al componente principal. De acuerdo, Volviendo a ello, puedes hacer ediciones en tus instancias y se mantendrán como están aunque cambies el componente maestro. Aquí sólo hay un ejemplo. Haré algo justamente. Su amigo. Voy a desactivar el relleno. Voy a mantener un derrame cerebral. Voy a cambiar el color del texto. Entonces otra vez, radicalmente diferente, ¿verdad? No hay necesidad de trabajar para este. Por cierto, quiero que cuenta de que las otras instancias, así que las otras, los clones, siguen siendo las mismas. Ahora vayamos a la original y cambiemos, digamos la familia de forma, ¿verdad? Voy a cambiarlo a Montserrat. Vea cómo se actualiza todo, incluido éste. También voy a aumentar el tamaño que puedas ver las diferencias. Y de nuevo, seguirá el ejemplo pesar de que le hicimos algunos cambios. Y si cambiamos de opinión, lo grandioso de ello es que podemos ir aquí mismo y vas a encontrar esta opción llamada reset all overrides. De igual manera, fluye todas nuestras ediciones. Este es el poder de los componentes, pero esto es sólo una visión general. Hablaremos más de ellos a un ritmo más lento cuando llegue el momento adecuado. En este punto, quiero que practiques con esta situación específica con un botón. Usa este proyecto y vuelve a rastrear todos mis pasos. Elimina todos estos otros botones, usa el diseño automático en este primero, conviértalo en un componente y luego solo diviértete con él. Ve qué puedes cambiar en lo que no puedes cambiar. Por favor acércate con una actitud relajada. Ahora bien, no mencioné algunas cosas sobre los componentes y eso es totalmente intencional. Entraremos en cosas más avanzadas más adelante. También hay una hoja de tramposos adjunta a la relación de memoria. Y con eso, por favor ve a divertirte un poco. 25. Drafts y proyectos en Figma: Bienvenido de nuevo. Yo quiero tomarme un minuto y explicar las limitaciones del plan gratuito y Figma, hay mucha información que cubrir. Y eso se debe a que Figma está construido para los proyectos que contienen cientos de pantallas. Por eso todo lo que se avecina es tan jodidamente complejo. La buena noticia es que no hay que memorizarla. No tienes que memorizar nada. Siéntate y relájate. De acuerdo, en la pantalla de bienvenida en el panel izquierdo, tienes la opción de crear un equipo. Deberías hacer eso aunque planees trabajar solo por el momento. Ya tengo Mindset arriba y puedo hacer clic derecho en él para renombrarlo. Ahora, aquí es donde podemos crear un proyecto. Te recomiendo usar el nombre de la empresa para la que estás trabajando. Entonces si estás rediseñando, esto se ve genial. Dotnet, ese es mi blog. Eso es lo que escribiría aquí. Entonces solo teclea el nombre de la empresa. Al hacer clic en su proyecto, inicialmente va a estar vacío. Pero el lado derecho te cuenta la historia del plan libre de Figma. Obtienes tres archivos de diseño de figma y el único proyecto, es decir, éste que acabamos de crear. Permítanme explicar cómo funciona esto. Como acabo de decir, te recomiendo que nombre tus proyectos en base al nombre de la empresa. Entonces si estás trabajando para el Uber, escribe eso, siempre puedes hacer clic derecho y cambiar el nombre del proyecto. De acuerdo, ahora, se puede pensar en un proyecto como un juego de mesa. Todos los juegos de mesa tienen una caja que sostiene todas las piezas juntas, ¿verdad? Si tienes diferentes juegos de mesa, deberías tener diferentes cajas para cada uno de ellos, ¿verdad? Y eso es porque no quieres mezclar piezas entre ellas. Eso sería absolutamente horrible, ¿verdad? Debes mantenerlos separados en todo momento. Es por ello que tenemos proyectos para mantener cada archivo relacionado con esa empresa dentro de su propia caja. Es muy similar a las carpetas de tu sistema operativo, ¿verdad? Digamos que tienes tres juegos instalados en tu sistema. Deberías tener tres fuentes diferentes, ¿verdad? Si instalas las tres ganancias en una sola carpeta, los archivos se mezclarían juntos, y obviamente eso sería toda una pesadilla. Tiene mucho sentido estar organizado. De acuerdo, Entonces eso es un proyecto, una caja grande o la carpeta que mantiene todos los archivos juntos. Pero, ¿qué archivos entran en proyecto? Ficheros de diseño de Figma. Eso archivos FIG, es decir lo que acabamos de crear con Control N palabra mediante ese botón dedicado en la parte superior derecha. Ahora, si vamos a la pestaña reciente, verás un montón de archivos aquí. Imagina que estos dos son para el proyecto OBOR. Bueno, basta con hacer click en ellos y arrástrelos dentro de nuestro proyecto. Simple como eso. Para que puedas arrastrar archivos desde el lado derecho hacia la izquierda. Ahora vamos a alejarnos de reciente y checkout al proyecto. Dentro de esta caja tenemos los dos archivos que acabamos de mover. Imagínese este es el diseño para la aplicación móvil y éste es lo que la versión top. Tiene sentido tenerlos separados porque los proyectos son bastante diferentes para una misma empresa, pero de nuevo, diferentes tipos de proyectos, ¿no? O tal vez uno de ellos contenga los marcos de riqueza. O tal vez tengas las fuentes de inspiración o tal vez algunas notas del cliente tal vez sería una presentación que hiciste para el cliente. Los proyectos grandes pueden tener decenas de archivos diferentes. Si vienes de Photoshop, puedes pensar en estos como archivos PSD individuales. Eso es lo que en realidad son, archivos FIG de puntos individuales. Pero en lugar de que se guarden en tu disco duro en tu computadora, se guardan en la nube. Ahora, hagamos una pausa por un momento para recapitular un proyecto. Este de aquí puede contener varios archivos de diseño. Estos archivos de diseño pueden ser casi cualquier cosa que esté relacionada con el proyecto. El plan de tres Figma te permite tener tres archivos. Eso es todo. De acuerdo, pasé a la pestaña reciente y arrastra otra allí. Ahora, vuelve al proyecto y nota el mensaje, actualiza para los archivos de diseño ilimitados. Entonces ese es el límite con los tres planos Figma tres expedientes. Ahora el precio es descenso, pero ¿y si no quieres pagar? Bueno, no recomiendo esto, pero aquí está. Cuando creas cualquier proyecto aleatorio así. Déjame hacer un rectángulo simple con un color brillante. Ahora, cuando lo cierras, esto se guarda automáticamente. El interrogante es dónde no en reciente, no te dejes engañar. En cambio, guardó aquí, bajo borradores. Aquí puedes tener tantos archivos como quieras. Entonces básicamente este es el trabajo alrededor. Potencialmente podrías dejar aquí todos tus archivos. No puedes compartirlos con ningún otro diseñador para trabajar en ellos juntos, pero puedes presentarlos a tu cliente y puedes renombrar cada archivo a algo como Uber iOS o Android, Uber escritorio y así sucesivamente. Obviamente no es tan bueno como no tan bien organizado. Pero si solo eres un principiante, esto está totalmente bien para empezar. Y después de haber hecho unos miles de dólares de tu trabajo de diseño, deberías actualizar a un plan de pago que sea más que estos. Y además, sí tienes la opción de buscar tus archivos siempre y cuando los nombrees correctamente, no deberías tener ningún problema. Ahora para recapitular, todo esto se trata de cómo organizas las cosas. No hay manera correcta ni equivocada, pero hay mejores prácticas. Lo mejor es tener un proyecto en el lado izquierdo para cada empresa para la que trabajas. Dentro de ese proyecto, puedes tener varias pilas de diseño. Uno para el diseño del boletín, otro para las redes sociales 14, esa app iOS para la versión móvil y así sucesivamente. Ahora, aquí hay una cosa que puedes hacer por los proyectos muy grandes. Dentro de estos archivos. Puedes tener páginas y páginas que te ayuden a organizar las cosas aún mejor. Por ejemplo, en el archivo de redes sociales, que pueden ser muchas cosas. Puedes tener páginas separadas para YouTube, Facebook, TikTok, Pinterest, Instagram, y así sucesivamente. ¿ Verdad? Entonces de nuevo, esta es solo una forma de organizar un proyecto masivo que puede contener decenas, tal vez cientos de pantallas. Figma se puede utilizar para los proyectos más grandes del mundo con temas que tienen decenas de diseñadores, proyectos, gestores de productos, probadores, desarrolladores, etcétera. Literalmente $100 mil proyectos. Y cuando hay tantas pantallas y tanta gente involucrada, este es el tipo de cosas que realmente te ayuda. Tienes que estar increíblemente organizado. Pero de vuelta al mundo real, no tienes que preocuparte por todo esto. Te enseñaré paso a paso fue a crear un nuevo archivo y nuevas páginas y así sucesivamente. Entonces por favor sea paciente y no te preocupes si no entiendes completamente todo esto. A medida que continuemos con el curso, prometo que tendrá cada vez más sentido. Pero ahora mismo, conoces las limitaciones del plan gratuito, un proyecto y tres expedientes individuales. Ya sabes que el vestido es un lugar donde todo se almacena por defecto. Y que no puedes invitar a otros diseñadores a trabajar en esos proyectos junto contigo. Pero incluso con borradores, puedes compartir tu trabajo con el mundo en el sentido de mostrarlo con la vista. Y con eso, sigamos. 26. Aquí tienes un buen diseñador web: Cuando pienso en lo que hace un buen diseñador web, siempre pienso en estas tres cosas. Pixel ejecución perfecta, entendiendo las necesidades del cliente y la atención al detalle. Vamos a hablar de estas cosas a detalle. Pero quiero subrayar un punto increíblemente importante. No te dejes atrapar en cargas de trabajo avanzadas al principio. Dicho lo contrario, No pienses que si aprendes Figma a un nivel súper alto, que automáticamente te convertirás en un gran diseñador web. Permítanme explicar lo que eso significa. Mira, Figma es un increíblemente poderoso diseñado para bien, que es utilizado por profesionales de todo el mundo, desde freelancers hasta enormes estudios de diseño. Ahora si logras dominar estas funciones avanzadas, Figma, te puedo ayudar a construir proyectos impresionantes en ningún momento. Se puede trabajar con sistemas de diseño. Puede compartir activos con un equipo, confiar en componentes, invariancia, usar restricciones para crear estados responsivos fácilmente. De nuevo, cosas verdaderamente avanzadas. Y sé que no conoces ambos términos. Entonces aquí hay un ejemplo rápido. Puedo cambiar fácilmente el esquema de color para hacer unos clics. Este poder de entender el figma tiene capacidades. También puedo cambiar mi topografía con la misma facilidad. Puedo cambiar ese texto oscuro por algo un poco más vibrante y se puede ver cómo simplemente funciona eso, ¿verdad? A lo mejor el cliente quiere las categorías por encima de esta área, no un problema. Este diseño está construido de una manera en la que esto literalmente no requiere ningún esfuerzo. Puedo voltear un interruptor y puedo cambiar el estilo de una carga así como así. Ahora hace unos años, esto habría sido increíblemente tiempo. Y esto es En la superficie. Hay mucha más capacidad empaquetada en Figma. Pero mira si dejas el comienzo de tu viaje, esto podría hacer girar tu cabeza. Esto podría desanimarte. Encuadra componentes varianza con el infierno hasta esas cosas. Marcos dentro de marcos con diseño automático. Por eso en realidad hice este video. Para decirte esto, por favor no te concentres en estas cosas. Es genial aprenderlas. No me malinterpreten. Es impresionante construir tu proyecto con las técnicas más avanzadas y las mejores prácticas posibles. Pero es tan intimidante y podría hacer que quieras rendirte. Por eso quería contarles de este material aparentemente complicado. Esto no te convertirá en un gran diseñador web. El material más avanzado no te hará éxito de la noche a la mañana. En cambio, esto es lo que propongo. Entiendan por favor los tres principios que voy a mencionar en este curso. Pixel ejecución perfecta, entendiendo las necesidades del cliente y la atención al detalle. Estos tienen poco que ver con Figma. Si te enfocas en ellos y los entiendes, el resto caerá en su lugar. Más que eso, puedes trabajar en cualquier programa de diseño, estar en Figma y Adobe XD sketch y lo que sea. Pero por favor no dejes de aprender sobre el diseño web porque no entiendes cómo funcionan algunas características avanzadas. Estas cosas son todas opcionales, varianza y restricciones y demás. No son un imperdible. En el tiempo. Los aprenderás. Te enseñaré sobre ellos, pero son parte esencial son los principios. Entonces lo voy a decir una última vez. No dejes que estas funciones avanzadas te asusten. No son esenciales para que te conviertas en un gran diseñador web. vas a aprender a su debido tiempo. Y con esa presión fuera de ti mismo, podemos continuar con una actitud más relajada. 27. ¿Qué sigue?: Hey ahi, Este es Chris. Enhorabuena, estoy muy contenta de que lo hayas hecho para entonces. Espero que hayas visto lo impresionante que puede ser Figma, tus actividades y ejercicios. Pero hay que notar que hay mucho más por desempacar. Te sugiero que revises mi perfil para que puedas iniciar el siguiente tramo de tu viaje. Figma está siendo utilizado por las empresas más grandes del mundo para los proyectos de diseño web y de aplicaciones. Entonces mi consejo, el calor va, a ver de qué se trata todo lo primero. Hay mucho zumbido alrededor de Figma. Todo el mundo está hablando de ello. Y en esta parte, acabamos de rayar la superficie. Hay un tercio más para desempacar. Entonces con eso espero que te vea en la siguiente parte de tu viaje. Recuerda, sigue aprendiendo, sigue creciendo. Se trata de barón de prensa apuntando por el momento.