Sitios de Figma: crea y lanza un sitio web

1. Introducción a los sitios de Figma: Con Figma Sites, puedes diseñar y publicar todo tu sitio web, todo desde Figma. Sin código, sin dev, sin pila complicada. Solo tienes que arrastrar y soltar, diseñar y poner en marcha. Incluso puedes configurar bibliotecas compartidas, para que tu equipo use los mismos bloques, colores y estilos, manteniendo todo consistente y en la marca. En este curso, te guiaré desde lo básico hasta temas más avanzados, hasta el lanzamiento de tu sitio. Empezaremos desde cero usando los bloques preconstruidos Figma. Perfecto para principiantes. Te mostraré cómo conectar subpáginas, agregar elementos personalizados y darle vida a tu lado con interacciones simples y animaciones suaves N. Aprenderás a construir elementos reutilizables como NAFBA y futers usando Incorporaremos videos y mapas e incluso crearemos bloques de código personalizados con IA usando Figma Make Después publicaremos ya sea con una URL Figma gratuita o con tu propio dominio Te mostraré cómo configurarlo todo para accesibilidad y la optimización de motores de búsqueda. Entonces tu lado está pulido y listo para salir a vivir. Quieres ir un paso más allá, entonces te mostraré cómo construir tu propia biblioteca de diseño con colores flexibles, tipografía y bloques receptivos Puedes reutilizar en todos tus proyectos. Figma Sites es perfecto para portafolios, lanzamientos de productos y páginas personales o Una manera rápida y fácil de tener tu idea en línea y volver a enfocarte en tu producto. Este es un caso de moonlearning dot IO. 2. Material del curso: Para obtener el material de tu curso, asegúrate saltar al proyecto y a los recursos, y luego ves un enlace llamado Descargas material del curso. Haga clic en él. Llegarás a la página de Descargas, y luego aquí verás la miniatura del curso que estás tomando actualmente Simplemente haga clic en Descargar. Entonces hay dos archivos para descargar, así que uno que termina en punto sitio, esa es la página donde te muestro todo lo que estoy construyendo durante el curso, solo puedes inspeccionarlo a tu gusto y jugar con él. No lo necesitas, pero podría ser bastante útil. Y luego el de aquí arriba, esto es en la parte posterior del curso donde vamos a construir nuestra propia biblioteca. Entonces esta es una biblioteca a la que puedes conectar. Ya puedes descargarlos dos ahora. Entonces, para acceder a estos archivos, no puedes simplemente hacer doble clic en ellos para abrirlos. Es necesario importarlos a FIGMA. Y voy a correr por la interfaz Figma en un segundo con más detalle Entonces, si eres nuevo en esto, entonces no te preocupes. Vamos a cubrirlo con más detalle. En general, necesitas ingresar a tu cuenta, y luego debes ingresar a tus proyectos y luego seleccionar un proyecto. Y por dentro, deberías encontrar algún tipo de botón de importación. Sigue cambiando un poco ahora mismo. Si vas por debajo de Crear, entonces encuentras tu botón Importar aquí y luego simplemente puedes importar los archivos que descargaste. No importa si se trata de archivos de sitios o archivos de diseño Figma, puedes almacenarlos todos en un mismo proyecto 3. CONCEPTOS BÁSICOS: navegador de archivos Figma: El navegador FigMafle. Antes de sumergirnos, primero echemos un vistazo a la estructura de trabajo de Figma Esto es especialmente importante si eres nuevo en Figma. Cuando abres tu cuenta, podría verse algo así. Puede haber ligeras diferencias, por ejemplo, si estás trabajando en un navegador o también si estás trabajando en otra versión o una actualización, entonces a veces las cosas se mueven ligeramente. No obstante, en el núcleo, deberías encontrar los mismos elementos. Entonces, lo que necesitas es encontrar a tu equipo, y luego dentro de tu equipo, tienes algo que se llama proyectos. Puedes tener más de un equipo en Figma, así que podrías ser invitado a algunos equipos Es posible que tengas algunos equipos pagados para ti, o podrías tener algunos equipos libres. Si haces clic en un pequeño error, entonces podrás ver todos tus equipos y puedes intercambiar entre ellos. El equipo en el que estoy ahora mismo es un equipo profesional. Para poder utilizar Figma Sites y bibliotecas, por ejemplo, necesitas una cuenta pro o superior en este momento Entonces dentro de tu equipo, ves los proyectos, y este término es un poco confuso. Entonces ese es un naming que desde el principio mismo de Figma, y lo guardaron Entonces eso significa que se trata de proyectos diferentes. Sin embargo, realmente podrías usar eso para absolutamente todo. Verlo como una capa de organización, de verdad. Ahora, puedes ver aquí tengo dos proyectos, y lo que queremos hacer, queremos crear uno nuevo para este nuevo proyecto donde vamos a construir nuestra página de Sitios ahora. Ahora mismo en la aplicación, tenemos el botón de proyecto pequeño plus aquí arriba. Y como dije, esto sigue cambiando todo el tiempo. Para ser honesto, yo esperaría algo por aquí, pero aquí no tenemos un botón más. Así que vamos a dar clic aquí, hacer clic en Proyecto, y ahora solo puedes nombrar tu proyecto. Entonces voy a nombrar la demo de Sites. Y luego es preguntarte si quieres invitar a otras personas. No necesitamos eso por ahora, así que solo salta que siempre podrás invitar después. Y ahora puedes ver que tienes tus nuevos proyectos. Si hacemos click en todos los proyectos, puedes ver que creó el tercero, y por cierto, hay un pequeño botón de estrella. Entonces esto es realmente útil. Puedes ver si protagonizas un proyecto, entonces va a aparecer al margen para que puedas acceder a él más rápido Haga doble clic ya sea aquí donde inició o justo en el proyecto, y luego dentro donde puede crear archivos. Entonces a medida que creas un archivo, usamos el mismo botón y ya puedes ver un cambio. Entonces, si hacemos clic en más o en el pequeño error descendente aquí, puedes ver que tienes la opción entre archivos de diseño, FIG Jam, y así sucesivamente. Ahora, queremos ir por un archivo de sits. Así que haz clic en esto y vas a saltar directamente a tu archivo lateral. Te van a preguntar si quieres usar plantillas. Por ahora, hagamos clic en No. Y si quieres volver a tu visión general, luego haz clic en el pequeño botón Casa. Nuevamente, esto podría verse un poco diferente si estás en el navegador, y luego estás de vuelta en tu pantalla principal. Y recuerda, puedes acceder a él entrando en todos tus proyectos, encontrando los proyectos en los que te encuentras, y luego justo dentro, vas a ver el archivo que acabas de crear. Puede cambiar el nombre de su archivo ya sea desde dentro de aquí o directamente desde aquí haciendo clic derecho en él y haciendo clic en Cambiar nombre. 4. CONCEPTOS BÁSICOS: descripción general de la interfaz de sitios: La interfaz Figma Sites. Entonces esto es lo que ves más o menos cuando estás abriendo tu archivo. Ahora, alejemos un poco. Puedes usar Comando y menos y Comando y plus para Zoom o simplemente puedes usar las teclas del mouse. Entonces estos son nuestros lienzos, así que esta es nuestra casa, y siempre comenzarás con una casa que es básicamente la página de inicio que luego va a abrir Y por lo general lo que muestra será un escritorio y un móvil. Esto también podría cambiar con el tiempo. Y te recomiendo que hagas clic en el pequeño botón Plus aquí arriba, y también agregues una tableta. Y en realidad, si golpeas a Shift y dos, entonces obtienes una vista completa muy agradable de esto. Entonces, antes de sumergirnos en el diseño, echemos un vistazo a lo que sucede por aquí, como las opciones que tenemos en esta vista. Entonces en el lado izquierdo, tienes tu panel de capas. Entonces eso significa que ves todo lo que está pasando en la lona. Entonces ahora mismo puedes ver que tenemos una página web. Puedes agregar más. Lo vamos a hacer más tarde. Y puedes ver aquí el hogar y luego los detalles. Entonces tenemos estos tres puntos de interrupción, y también se puede ver qué hay en ellos. Ahora mismo, no tenemos contenido. Solo agreguemos cualquier cosa al azar. Entonces, por ejemplo, vamos a agregar especie de solo un círculo aquí. Y ahora se puede ver que esto se sumó a todos ellos. Entonces esto se agregó al escritorio, la tableta y digamos en el móvil, podríamos moverlo individualmente. Y digamos que no queremos este elemento en el móvil, solo lo queremos en el escritorio y la tableta. Ahora bien, si pulsamos eliminar, puedes ver que esto simplemente estaría oculto porque esta es la misma pantalla. Entonces las cosas siempre estarían presentes en todas partes, pero puedes mostrarlas y ocultarlas a tu gusto. Si lo quitas en el escritorio, entonces se va a quitar en cualquier otro punto de interrupción Entonces más adelante, vas a encontrar aquí también el botón de publicar. Vamos a aprender en detalle cómo publicar nuestra página. Es súper fácil. Entonces por aquí, tienes este donde con Insert, tienes bloques y tienes bibliotecas. Entonces bloques, esto es, como, una especie de elementos pre hechos por Figma. Así que vamos a agarrar a un héroe. Y si lo dejas caer en tu elemento de escritorio, entonces puedes ver que ya está configurado para todos tus otros tamaños de pantalla también. Entonces esto es realmente útil, y puedes, por supuesto, alterarlo a tu gusto. También cuentan con bibliotecas. Vamos a aprender a conectar nuestras propias bibliotecas. Así que eso va a parecerse a estos bloques de aquí, pero solo vamos a hacer los nuestros, y te voy a mostrar cómo hacer puntos de interrupción y todo Entonces por aquí, tienes una búsqueda, para que puedas buscar cualquier elemento. Entonces tenemos nuestra marca. Entonces esto es realmente emocionante. Aquí, podemos agregar elementos de código. De nuevo, voy a mostrarte todo esto en detalles. Entonces aquí ya obtienes un avance Figma está trayendo un CMS ahora mismo al momento de la grabación Esto todavía está en progreso, pero voy a agregar esto en cuanto esté listo. Y luego por aquí tenemos algunos ajustes. Entonces aquí es donde vas a configurar como favicon y vista previa e información sobre tu página De nuevo, vamos a pasar por todo esto. Así que por defecto, siempre tenga su archivo abierto. Entonces en la parte inferior de aquí, tienes tus herramientas, así que ya sea te puede gustar, vamos a escoger algo de texto, para que solo puedas agregar el texto aquí a tu gusto. Y luego tan pronto como agarres un elemento, así que esto podría ser texto o simplemente agreguemos nuestro círculo aquí nuevamente. Si lo agarras, entonces en el lado derecho, podrás ver la propiedad. Entonces, por ejemplo, podrías cambiar el tamaño del texto, podrías cambiar la fuente y todo eso y los colores y cualquier propiedad de cualquier elemento que agarres por aquí. Entonces la mejor manera es simplemente pasar por aquí. Entonces tienes diferentes formas. Tienes herramientas de dibujo, tienes imágenes, tienes texto. Y tú también aquí, puedes agregar nuevas páginas. De nuevo, vamos a hacer eso por separado y hacer. Vamos a explorar eso en un video separado. En el panel lateral derecho, no solo tienes las propiedades. Al igual que justo al lado de las propiedades, también ves las interacciones. Entonces esto es, como, puedes agregar efectos Ha, conectar páginas. Y nuevamente, vamos a repasar todo esto con más detalle. 5. CONCEPTOS BÁSICOS: crea tu primera página: Así que comencemos configurando nuestra primera página con Pigmacytes La forma más fácil de comenzar y aún tener mucho control sobre tu diseño es probablemente usar bloques. Da clic en un pequeño signo más y luego vas a ver los bloques preestablecidos de Figma. Entonces hay páginas preestablecidas, pero tenemos un mejor control sobre el diseño si estamos usando los bloques reales. Se puede ver que hay navegación, héroes, características. Empecemos con una navegación. Simplemente tomemos cualquier navegación y luego simplemente arrástralo y importante es que solo necesitas arrastrarlo a la versión de escritorio, y luego va a crear todos los puntos de interrupción por ti automáticamente Eso está en horneado en esos bloques Vamos a convertir esto en una pequeña cartera, así que voy a ir a héroes, y sólo voy a arrastrar sobre una sección de héroes. Y luego a partir de características, voy a agregar algo de texto, algo así, describiendo mis habilidades, tal vez una imagen como algo sobre. Y entonces lo que también quiero al final es algún tipo de pie de página, así que eso debería ser navegación. Yo sólo voy a tomar este pie de página muy sencillo aquí. Ahora bien, lo que puedes ver es que no están en el orden exacto. Por ejemplo, quiero que el pie baje más, así que simplemente puedes arrastrarlo o también puedes usar tus teclas a, y luego puedes mover esos bloques enteros a tu gusto. Y fíjate como solo necesito cambiarlo en el escritorio, y luego seguirán todos los demás puntos de interrupción Ahora bien, cualquier cosa que borraría en mi escritorio, por ejemplo, si me deshago de todo ese bloque eso le pasaría a todos los puntos de interrupción Pero tenga en cuenta una cosita. Entonces digamos que estoy aquí, estoy teniendo estos botones, y así que solo tomemos el secundario. Digamos que nos estamos quitando la secundaria. Ahora, aquí puedes ver que este es el escritorio y echar un vistazo a lo que está pasando aquí. Si me quito la secundaria, entonces esto va a desaparecer por completo. Entonces aquí es donde realmente puedes elegir si un elemento debe desaparecer por completo. Pero también se podría decir, solo quiero este botón en mi la versión de escritorio principal. Pero, por ejemplo, en mi tablet por el motivo que sea, no quiero esto, si entonces pulsarías eliminar, entonces simplemente lo ocultaría. Y eso está totalmente bien, solo sé consciente de esto. También podrías ocultar toda la sección. Entonces digamos que no quieres esta sección en escritorio, al final se vería como si se hubiera ido, pero ten en cuenta como siempre estará aquí en tu panel Capas. Entonces, antes de alterar el contenido, veamos realmente cómo se ve nuestra página en una configuración dinámica, entonces cómo se verá en el navegador. Hay diferentes formas en las que puedes obtener una vista previa. Puedes hacer clic en este botón de reproducción aquí o tienes el botón de reproducción aquí. Con este pequeño error, puedes elegir si quieres una vista previa en línea o una página completa. Así que vamos a hacer clic en él, y luego vas a obtener una vista previa propia. Y a ver que es muy agradable. Ya hay algo de animación ambientado aquí. Entonces puedes redimensionarlo, entonces puedes ver el comportamiento diferente, y también puedes desplazarte por esto muy bien Si volvemos aquí, lo que también puedes hacer es usar el atajo y lo obtienes si lo olvidas aquí. Así que cambia en el espacio. Y si presiono Mayús y espacio, entonces me sale esto útil en la vista previa de archivos, así que es un poco más agradable trabajar rápidamente en esto Al usar los bloques preestablecidos, entonces Figma es realmente inteligente Y así si hacemos clic aquí, puedes ver que ya configuró el llamado diseño automático para ti. Por lo que agregaron un diseño vertical. Puedes ver que vemos la página completa. Si alguna vez no ves la página completa, entonces necesitas ir aquí en la altura y asegurarte de que esto esté configurado para abrazar. Y todos nuestros bloques ya están configurados para algo llamado llenar el contenedor en el redimensionamiento. Entonces, para empezar, eso es genial. Entonces todo está configurado, y vamos a tomarlo a partir de ahí. Solo ten en cuenta que más adelante, cuando agreguemos elementos o estés cambiando las cosas, necesitamos entender un poco mejor esta sección de diseño para tener un control total sobre nuestro diseño. Pero para nuestro primer ejemplo sencillo, todo está funcionando de la manera que queremos, por lo que ahora podemos agregar nuestro contenido. Y esto es realmente bastante sencillo. Simplemente seleccionas el contenido en el escritorio y luego lo cambias a tu gusto, y esto se reflejará en todos los puntos de interrupción Así que solo puedes ir poco a poco y luego simplemente agregar el texto a tu gusto. Y por ejemplo, quiero deshacerme de estos botones. En realidad, no los necesito, así que vamos a deshacernos de esto. Ahora, si queremos agregar nuestras imágenes, entonces simplemente podemos seleccionar cualquier marco o cualquier forma, y luego a través del menú de relleno, haces clic en llenar subir desde la computadora, y luego puedes seleccionar cualquier imagen. Hay una función de importación masiva en Figma, por lo que puedes presionar Shift Command y K, y luego puedes literalmente simplemente seleccionar las imágenes y luego simplemente soltarlas donde quieras El único problema en estos momentos es que hay un pequeño error, por lo que no los agrega a los puntos de interrupción actualmente Espero que esto se resuelva para cuando estés usando esto. Por ahora, solo voy a hacer esto manualmente. Sólo voy a acelerar eso para ti. Ahora bien, si quieres barajar un poco los elementos, también puedes hacerlo simplemente selecciona la imagen, y luego con la tecla de flecha en tu teclado, puedes moverlos. Nuevamente, se puede ver que esto se refleja en todas partes. Simplemente me adelanté en el fondo y ya actualicé todo este texto aquí. Puedes hacerlo completamente a tu gusto. Otra cosita que en realidad podrías querer hacer es que se vea un poco plano todo en blanco. Así que solo puedes seleccionar ciertos bloques y luego simplemente hacer clic en el botón de relleno en caso de que no veas un color de relleno, y solo voy a darle un ligero tinte de un gris realmente claro solo por un poco de profundidad. Y así, si estamos presionando nuestro botón de reproducción, puedes ver que tienes un primer diseño web realmente encantador y funcional listo en poco tiempo. Y por cierto, todas estas preciosas fotos que estoy usando son de lomi.ai. Puedes encontrar muchas imágenes gratis así como actualizar a un plan pro y obtener fantásticas imágenes generadas por IA para tus diseños. 6. CONCEPTOS BÁSICOS: conéctate a subpáginas: Entonces ahora agreguemos una subpágina. Entonces lo que quiero que suceda es que quiero hacer clic en una de estas imágenes de portafolio y luego obtener más información en una página separada. Entonces lo que tengo que hacer es que necesito agregar esa página, así hacemos clic en agregar una página web. También puedes hacerlo aquí arriba. Y entonces lo que obtienes es este tipo de página. Entonces solo tenemos el escritorio, pero necesitamos todos los mismos puntos de interrupción Entonces lo que vamos a hacer es que vamos a hacer clic en el botón Plus, y vamos a agregar una tableta, y queremos agregar un móvil para el control de caídas. Puede cambiar el nombre de la página. Así que sólo voy a llamar a este Café. Voy a empezar de nuevo con mis bloques. Y esta vez, lo que quiero es que quiero algunas características. Entonces quiero algo que sea una especie de muchas imágenes o algo así. Así que voy a volver a arrastrar esto, soltarlo en el escritorio, y luego simplemente lo va a duplicar en todos tus puntos de interrupción Y también quiero una navegación, pero ya cambié un poco el texto en esta navegación aquí por el contacto conmigo. Entonces voy a usar lo mismo, así que solo voy a copiar esto, y lo voy a pegar en el escritorio, pegarlo aquí abajo, así que voy a moverlo con mis teclas a arriba, y ahora tengo la misma navegación en todas ellas. Y entonces tal vez solo queremos agregar, no sé, un poco de texto o algo así. Entonces aquí abajo, se puede ver que hay algunos campos de texto. No estoy segura. Creo que esto de aquí va a ser correcto, así que podemos agregar un poco más de información si quisiéramos. Y, por supuesto, nuestro término de comida, va a usar el mismo aquí, y esa copia muy bien en la parte inferior. Así que ahora antes de saltar al contenido, vamos a conectarlo de inmediato. Entonces, en el panel de propiedades del lado derecho, tienes diseño y tienes interacciones. Haga clic en interacciones, y ahora seleccione el elemento. Entonces, en este caso, nuestra imagen que quieres conectar, tienes que hacer click profundo hasta que realmente tienes la foto, y luego ves aparecer estas pequeñas burbujas. Cualquier burbuja, solo manténgala baja con tu mouse y luego solo conéctalo. Y vas a ver que conecta desde todos los diferentes puntos de interrupción. Eso es más o menos. Ahora, queremos volver a conectarnos. Entonces en este caso, me encantaría una miga de pan, pero no hay una en mi cuadra, así que voy a usar aquí el logo principal para volver a conectarme Entonces esto tal vez sea algo que más tarde voy a arreglar. Voy a conectar ambos aquí y voy a seleccionar esto y solo conectarme de nuevo. Bien, entonces echemos un vistazo si eso está funcionando. Entonces voy a usar mi atajo Shift y barra espaciadora. Y así ahora puedes ver aquí esto está funcionando muy bien. Sigue siendo receptivo y todo funciona. Y así si ahora pasamos el cursor sobre esto, podemos ver que podemos darle click, y luego llegamos a nuestra nueva página Y si hacemos clic en el logo, estamos bien, genial. Todo lo que voy a hacer ahora, voy a agregar mi contenido aquí, saltar de nuevo al diseño, y de hecho voy a acelerar eso en segundo plano para ti. Entonces, vamos a agregar el texto. Ya escribí y ya agrego hecho un poco de subtexto aquí también, que voy a copiar Nuevamente, recuerden, siempre solo copiamos en escritorio, y ahora solo necesitamos agregar nuestras imágenes. Sólo voy a acelerar eso un poco para ti aquí en el fondo. Y aquí vamos, así tenemos lista nuestra página con subpáginas. Juguemos todo el asunto para que puedas ver encantador todo receptivo. Saltamos a nuestra subpágina, que también responde, y siempre podemos volver atrás. 7. BÁSICO: inserta elementos personalizados: Así que personalicemos un poco nuestro diseño y agreguemos algunos de nuestros propios elementos a esto. Para que puedan ver por aquí, tengo una imagen grande, cual quiero agregar porque si ahora mismo tengo un vistazo y características, realidad no solo obtengo una imagen de héroe grande. Entonces lo que hago es que sólo voy a arrastrar esto. Lo voy a dejar caer aquí, y puedes ver que puedo agregarlo, pero no se comporta como lo hacen mis bloques preestablecidos. Ahora, si quieres agregar elementos personalizados, entonces necesitas saber un poco sobre el diseño. Solo voy a mostrarte lo básico, pero te recomiendo encarecidamente que si no estás familiarizado con la función de diseño automático de Figma, saltes a uno de mis otros cursos mientras paso por el diseño automático Figma en profundidad Realmente es una característica que merece la pena conocer. Si solo estás jugando un poco con sitios, incluso podrías salirte con la tuya con solo algunos trucos que te muestro. Entonces primero que tenemos que hacer, si seleccionas este bloque, por ejemplo, puedes ver aquí que en el ancho, se establece automáticamente algo llamado llenar el contenedor. Entonces eso significa que va a ocupar todo el espacio disponible. Ahora mismo, si seleccionamos nuestra imagen, esta no está configurada para llenar el contenedor. Puedes ver aquí en maquetación, si bajamos esto, puedes ver que este tiene un ancho fijo. Así que solo salta para llenar el contenedor. Puedes ver también aquí tenemos este conjunto, lo que significa que estamos manteniendo la relación de aspecto de esta imagen. Ahora se puede ver que esto llena el contenedor por todas partes. Así que no hagas esto. Solo volvamos a lo que teníamos anteriormente. Podrías tener la tentación de simplemente cambiar el tamaño de esto. Pero entonces lo que ha pasado, se ve bien en tu vista de stata, pero si entonces tienes una vista previa, puedes ver que esto en realidad ya no va a comportarse con tu diseño. Si quieres un elemento fijo, esto está bien. De lo contrario, asegúrate de configurar esto para llenar el contenedor. Ahora podemos personalizar esto un poco más. Puedes ver aquí que tenemos un radio de esquina de 16, así que solo podemos agarrar nuestra imagen principal, y también podríamos establecer esta en un radio de esquina de 16. Ahora, agregué otro elemento. Entonces esto es un poco de miga de pan porque recuerden, es un poco extraño que tenga que hacer click en el logo para volver atrás Quiero que esto sea más obvio sobre cómo navegar esto. Entonces la cosa es que, ahora mismo, esto es sólo un marco y agregué algo de texto. En Figma, cada elemento que tenemos, y en bloques, ellos configuran esto para que usted debería estar configurado en diseño automático para que esté funcionando Nuevamente, si eres un principiante total, esto podría ser abrumador, y te recomiendo encarecidamente que te familiarices con el diseño automático Solo voy a mostrarte esto rápidamente y asumir que entiendes un poco de diseño automático. Entonces estoy seleccionando esto y voy a presionar Shift y A. Así que esto creó un diseño automático, y puedes ver que esto está sucediendo aquí. Entonces esto va en esta dirección. Puedo ver la distancia aquí. Voy a hacer este múltiplo de ocho, en realidad. Puedo añadir un poco de relleno y así sucesivamente. Y ahora también voy a crear el marco exterior. Voy a seleccionar esto. Y puedes ver aquí este es un marco, así que también puedo seleccionar esto aquí, o puedo presionar Mayús y A. Este es mi atajo, y luego estoy creando este diseño automático. Entonces ahora sólo voy a sacar esto. Entonces este es el tamaño de mi marco padre, 1,280. Y ahora puedo, por ejemplo, agregar algo de relleno aquí arriba e abajo. Entonces solo voy a tener el de abajo, 24, el de arriba, creo, 24, también. Y ahora los lados, en realidad voy a comprobar lo que está pasando aquí en mi navegación. Entonces mi navegación me está diciendo 64, así que voy a usar 64 para izquierda y derecha, también. Si esto es un poco abrumador cuando eres nuevo en Figma, también podrías salirte con la tuya con elementos simples como este, simplemente ponerlos afuera y ponerlos ahí dentro. Entonces, lo que vamos a hacer ahora, vamos a arrastrar esto por aquí, y solo voy a dejarlo aquí. Se puede ver que se le cayó por todas partes. Nuevamente, veamos como no se redimensiona correctamente porque lo que tenemos que hacer, al igual que con los demás, tenemos que seleccionar todo el elemento y luego en el ancho establecer esto para llenar el contenedor Ahora bien, hay una forma más estructural de configurar esto, pero en este momento solo estamos haciendo esto un poco manualmente para un one off. Entonces puedes ver aquí que tenemos diferentes acolchados. Entonces aquí tenemos un relleno de 32. Así que solo voy a hacer eso en este elemento aquí también. Y luego para el móvil, tenemos 24, y también voy a configurar este 24. Así que aquí tienes. Entonces lo que no me gusta es esta enorme distancia aquí. En realidad, una cosa que quiero hacer es que quiero este bonito fondo gris aquí también. Entonces voy a seleccionar esto, puedes dar click en el color de relleno. Voy a tomar esta pequeña selección. Sólo voy a escoger el color de fondo que tengo por aquí, así que tengo una visión general más agradable Entonces esto es lindo, pero esto es realmente grande aquí, esta distancia. Así que también puedo alterar esto aquí y sólo puedo bajar aquí un poco y hacer esto un poco más pequeño. Y si quisiera, también puedo usar esto y tal vez agregar un poquito aquí así que tengo más espacio si quiero que se haga clic en esto Todo lo que necesito hacer ahora es que voy a seleccionar esta casa de aquí. Voy a saltar de nuevo a la interacción, y solo voy a asegurarme que cuando haga clic en esto, esto esté saltando de vuelta a casa. Entonces probemos esto. Entonces aquí tenemos nuestro diseño. Vamos a la subpágina. Esto se ve encantador. Veamos si nuestra imagen está redimensionando. Sí. Y luego si hago clic en Inicio, voy a volver a casa. 8. CONCEPTOS BÁSICOS: agregar enlaces y correo electrónico: Agreguemos algunos enlaces externos a nuestro diseño. Entonces un enlace de correo y conecta nuestras redes sociales, por ejemplo. Entonces lo que tenemos aquí es que tenemos un botón, así que queremos hacer clic en ese botón y luego abrir un correo electrónico. Y luego aquí abajo, tenemos algunas redes sociales. Entonces hagamos ambas cosas. Empecemos con nuestro botón. Entonces voy a seleccionar el botón, y esto realmente funciona para cualquier elemento. Y luego en la derecha dentro del panel de propiedades, se ve algo llamado Enlace. Lo ves en el diseño y también en la interacción. A veces se mueve un poco. Haga clic en el botón más, y luego obtendrá un campo para agregar una URL. También puedes conectarlo a cualquier subpágina que hayas creado, por ejemplo. Entonces, si tienes una página con un formulario que quieres que la gente llene, ahora mismo, lo que queremos, solo queremos que se haga clic y luego abra un correo electrónico Y lo puedes hacer con mailto. Para que no agregues una URL. Podrías agregar una URL, por ejemplo, si tienes un blog externo o algo al que quieras enviar gente, pero vamos a usar Mail two. Ahora podrías abrir esto en una nueva pestaña. En este caso, no importa porque va a abrirse en uno nuevo de todos modos Entonces probemos esto. Así que abramos nuestra vista previa. Vamos a hacer clic en nuestro botón, y podrás ver que abrió mi programa de correo electrónico, y lo está enviando a la dirección de correo electrónico que le di. Está usando el mismo aquí porque esta es mi dirección que estoy usando para demo, así encontrarías la dirección del usuario que la envía desde este campo. Cuando estés agregando algo como esto, solo asegúrate de que también tienes tu dirección de correo electrónico en el Foor o algún otro lugar en texto plano Por lo que cualquier persona que no tenga un programa de correo electrónico instalado en su dispositivo aún puede encontrar sus datos de contacto. Una pequeña nota al margen, también puedes extender mailto Entonces, en lugar de solo abrir el correo, lo que puedes hacer es agregar algo de información. Entonces hay diferentes generadores. Puedes, por ejemplo, usar mailto linkgenerator.com o simplemente buscar Entonces aquí agregas la dirección que deseas abrir, a donde se debe enviar el correo. Puedes agregar CC, BCC, puedes agregar un título. Entonces, por ejemplo, sabes que se trata una solicitud que viene de tu sitio web cuando alguien la envía. Después puedes agregar un cuerpo, para que puedas agregar un correo preestablecido. Esto es súper práctico, por ejemplo, estás teniendo una especie de solicitud que quieres que se llene a la gente, como, ¿cuál es tu presupuesto? ¿Cuál es su empresa? ¿Cuál es tu posición? Entonces simplemente haces clic en Generar, y te va a dar el enlace mailto o el código HTML Necesitamos el enlace mailto ya que estamos trabajando con Links. Y luego en vez de lo que acabamos de tener, solo voy a cambiar esto y pegar el correo a que acabo de copiar. Ahora echemos un vistazo a lo que sucede. Entonces, si hago clic en Contacto M, puedes ver que se agregó toda esta página aquí. Para que veas que ahora tenemos un tema, tenemos un CC, y tenemos esto como cuerpo. Entonces no es necesario, pero podría ser bastante útil. Entonces ahora conectemos también nuestras redes sociales. Entonces aquí abajo en el Foota tengo mis redes sociales. Entonces voy a usar LinkedIn como ejemplo. Entonces voy a seleccionar todo este marco completo aquí, así que el del marco de LinkedIn. Y luego voy a ir por el mismo camino. Voy a dar click en Linked, y ahora voy a agregar un link externo, en realidad. Entonces aquí solo voy a tomar el enlace para mi página de LinkedIn, y solo voy a pegarlo en ese campo. Entonces ahora si vamos a previsualizar, y estamos dando click sobre esto, va a abrir mi página de LinkedIn. 9. BÁSICOS: componentes: Trabajar con componentes. Entonces componente es un tema grande Figma. Y nuevamente, si eres muy nuevo en esto, salta a mi curso de principiantes, y tengo una sección donde explico todo esto con mucho detalle. Por ahora, solo quiero mostrarte algunos usos básicos de componentes con sitios. Entonces, por ejemplo, aquí tenemos nuestro botón, y lo usamos por todas partes, y también tenemos nuestra navegación, y tenemos nuestra Puta y también tenemos algún comportamiento horneado ahí, que ahora tendríamos que copiar en todos estos botones por todas partes. Entonces, lo que podemos hacer es que podemos convertir esto en un componente, y un componente básicamente significa que tienes como un molde que luego estás usando. Entonces, en realidad , saquemos este botón de aquí y podrás verlo copiado todos ellos. Sólo necesito uno. Y a esto se le llama botón primario. Eso suena genial. Y simplemente voy a convertirlo en un componente haciendo clic en el pequeño signo de componente de aquí. Y así nuestro componente siempre debe vivir fuera de nuestro diseño, y lo vamos a organizar un poco mejor también más adelante. Pero lo que quiero hacer ahora, solo quiero copiar, y todas estas copias se llaman instancias, y las voy a poner en mi diseño. Así que sólo voy a arrastrar una instancia, mantener pulsada la tecla Alt y opción. Puedes usar copiar y pegar, por cierto. Eso me parece un poco más desordenado. Entonces lo que hago, mantengo presionada Opción o Alt, y luego me sale una instancia de esto. Y ahora lo que voy a hacer es que me voy a deshacer de este botón original, y sólo voy a reemplazarlo. Con el botón que acabo de hacer. Sólo hablemos. Si no logras colocarlo muy bien aquí, usa tu panel de capas. Tenemos un pequeño grupo de botones aquí, así que voy a agregarlo ahí dentro. Déjame colocarlo del otro lado. Entonces ahora tengo el mismo botón en mi navegación que tengo por aquí. Entonces si cambio algo, por ejemplo, este comportamiento de enlace, o simplemente cambiemos aleatoriamente el color, puedes ver que esto se refleja en todas partes en nuestro diseño ahora. No obstante, también estoy usando esta navegación en varios lugares. Entonces lo uso aquí y lo uso por allá. Entonces también puedo convertir toda esta navegación con el incienso anidado del botón en un componente Entonces, saquemos esto. Y luego voy a hacer lo mismo. Voy a convertir esto en un componente. Se llama cabecera dos. Voy a dejar eso ahora. Y ahora puedo crear una instancia, y luego puedo reemplazar esta. Entonces, deshagámonos de esto. Y ahora estoy creando así que ya creé uno. Estoy usando esta instancia aquí, y solo voy a arrastrarla ahí. Lo que sin embargo pasó ahora es que esta instancia, se puede ver que estoy usando la misma por ahí, así que podría cambiarla manualmente. Podría sobrescribirlo, pero eso no estaría limpio porque sobrescribiría, y luego perdería cada vez toda la información que pongo aquí Entonces se pone un poco impuro. Pero como pueden ver, lo que originalmente pasó ya es que cuando saqué esto, se puede ver que en realidad me dio todos estos tres, o podría crearlos a mano. Y ahora podemos crear algo llamado un conjunto de componentes con esto. De hecho , vamos a darle un poco de color de fondo para que podamos trabajar mejor con él. Podemos quitártelo más adelante. Así pueden ver, ya tengo todas estas tres versiones que necesito, o podrías configurarlas a mano, por ejemplo, con una miga de pan o simplemente cualquier cosa que agregues aquí, también podrías configurarlas manualmente, pero voy a usar lo que Figma ya Y entonces lo que voy a hacer es que voy a convertir todos esos en un componente. Y ahora sólo voy a cambiar un poco el nombre. Así que solo voy a tener a todos ellos llamados cabecera o en realidad voy a llamar a todos ellos navegación. Entonces ahora voy a seleccionar los tres, y luego puedes ver por aquí, está diciendo que combinas como variantes. Haz click en eso y luego vas a ver un pequeño contorno morado que Figma les va a dar la vuelta. Entonces, lo que ves ahora, saquemos una instancia de esto. Y ahora se puede ver que tengo la instancia, pero me está diciendo que hay un error. Dice que hay una propiedad pero todos tienen el mismo nombre. Entonces lo que tenemos que hacer seleccionamos cada uno de ellos, y luego voy a llamar a este escritorio. Y esto es importante. Va a funcionar muy bien si usas escritorio, tableta y móvil. De lo contrario, propiedades Figma Design, se les puede nombrar cualquier cosa. Pero aquí nos apegamos a este naming. Entonces tomo la tableta. Yo lo llamo tableta. Y el móvil móvil. Ahora, también podría cambiar ese nombre de propiedad. No tienes que hacerlo. De todos modos funcionaría, pero podría llamar a este punto de interrupción. Bien, genial. Y ahora si selecciono la instancia, se puede ver que ahora tiene en baaked todas estas diferentes versiones Y lo que puedo hacer ahora, sólo voy a deshacerme de esto, y voy a arrastrarlo aquí, y ahora va a saber dónde posicionar cuál. Simplemente por haber usado ese nombre. Esto es algo que Figma te configuró en el fondo Y lo genial es que ahora solo puedo usar esa misma navegación aquí, así que voy a sacar una instancia y agregarla aquí. Y ahora también tengo mi navegación. Y así cualquier cosa que cambie ahora con el botón, con la configuración, digamos que estamos dando la vuelta, como, el orden de esto decir que estamos seleccionando este botón y lo estamos moviendo, se puede ver que esto se vería reflejado en todas partes, y ahora solo en el escritorio. Así que también puedo tomar decisiones conscientes como el relleno o como los márgenes en estos diferentes puntos de interrupción Entonces en el fondo, todos estos bloques que estás viendo que tan mágicamente trabajaron a través de los puntos de interrupción, como en el fondo en Figma, todos están configurados de esta manera Por eso funciona, lo que también significa que podemos configurar nuestra biblioteca de bloques completamente propia, y lo vamos a hacer un poco más adelante. Por ahora, sólo vamos a dejar aquí nuestros componentes. Si has trabajado con Figma Design, entonces sabrás que normalmente no quieres tus componentes estén en la misma página que tu diseño Pero ahora mismo, Figma realmente no nos está dando muchas opciones en esta versión beta con la que estoy trabajando Lo que puedes hacer para agregar un poco de organización es ir aquí abajo, y aquí encuentras secciones, o puedes usar Shift y S, y luego puedes dibujar una sección por aquí y simplemente puedes llamar a este componente. También organice esto aún más para que pueda tener elementos de navegación y así sucesivamente. Pero más adelante voy a mostrarte una mejor manera de montar una biblioteca y mantener todo esto agradable y organizado. Si solo tienes unos pedacitos y bobs aquí y allá, entonces esto va a estar bien para empezar Y solo para acostumbrarlo, hagamos lo mismo con nuestra navegación. Voy a sacar esto. Voy a colocarlo aquí ahora mismo. Voy a darle un poco de color de fondo. De nuevo, puedes quitarte esto más adelante si te molesta solo para que lo veamos mejor Hagamos esto muy rápido. En realidad también hay un atajo para hacer esto. Entonces lo que estoy haciendo es que los estoy seleccionando a todos. Podría o bien crear componentes para cada uno de ellos y luego combinarlo o puedes usar un atajo. Entonces hay una pequeña flecha al lado de tu signo de componente, y luego puedes ver crear conjunto de componentes desde aquí. Por lo que también puedes usar esto. De nuevo, te va a decir que hay un error con el naming, así que resolvemos el naming Sólo voy a acelerar esto, pero recuerda, es de escritorio, tableta y móvil. Y si lo desea, puede hacer clic en el nombre completo del componente y también renombrar la propiedad, por ejemplo, a Breakpoint Y ahora simplemente podemos sacar una instancia, y la vamos a agregar de nuevo a nuestro diseño. Puedes agregarlo en cualquier lugar, y luego recordar, solo puedes moverlo con las teclas de flecha. Me quedé atascado un poco. Al parecer no. Vamos a agregarlo hasta el final. Y también puedes copiarlo solo de cualquier diseño a otro, así que podríamos simplemente deshacernos de él aquí y luego copiar este de nuevo en Otra vez, tienes que asegurarte de colocarlo como en este pequeño donde te muestra esta pequeña línea, y luego podrás moverlo más allá. Y aquí tienes. Entonces ahora, cualquier cosa que agregues aquí, por ejemplo, solo necesitas agregar tus enlaces de redes sociales una vez, o también puedes cambiar este botón principal. Así que solo ten cuidado con una cosa. Ahora tengo un botón general, y solo uso este botón de contacto, pero podrías usar un botón para diferentes cosas. En ese caso, es posible que tengas que crear un botón separado. Entonces donde tienes un botón para el botón de contacto y luego solo un botón general que vinculas dentro del documento, solo sé un poco consciente de eso 10. ¡Consulta mi clase para principiantes de Figma para obtener los conceptos básicos!: Ahora durante este curso, quiero referirme a muchas características de FIGMA como componentes, también layout y variables Si usas T FIGMA, entonces esto será todo muy natural para ti Sin embargo, si eres nuevo en FIGMA, entonces esto podría ser un poco abrumador No voy a cubrir estos conceptos en este curso. Sin embargo, con tu membresía de Skillshare, puedes saltar a mi curso de principiantes de Figma. En Proyectos y recursos, agregué un enlace directo. Simplemente puedes hacer clic en eso. Esto te llevará directamente a este curso. El curso dura 4 horas y comienza con todos los conceptos básicos por los que podrías o no querer pasar. Si solo quieres indagar en ciertos conceptos como componentes o variables, por ejemplo, la diferencia entre variables y estilos, algo muy importante para la tipografía, entonces puedes simplemente saltar a estas secciones y explicar todo eso desde el principio También o a maquetación, como puedes ver aquí. Si quieres hacer un extra, entonces puedes encontrar más cosas en este curso, como cómo hacer prototipos con FIGMA, cómo colaborar, e incluso hay un proyecto de curso para tu portafolio. Este también es de lejos, mi curso más popular sobre Skillshare, y como puedes ver, en las reseñas, la gente ha estado muy contenta con ello Así que entra y aprende más sobre Figma. 11. BÁSICO: navegación fija: Vamos a configurar una barra de navegación fija. Entonces en nuestro diseño aquí, tenemos una vista previa, podemos ver que tenemos una barra de navegación, pero si nos desplazamos, desaparece. Quizás quieras esto, pero probablemente en muchos de los casos, solo quieres que esto se mantenga fijo en la parte superior. Entonces esto es realmente fácil. Todo lo que necesitas hacer es seleccionar tu navegación, y esto podría ser una instancia de un componente. Esto podría ser de cuadras. Esto podría ser cualquier cosa que diseñes tú mismo. No importa. La parte importante es que mires que es un hijo directo de tu marco principal. Así que a veces podrías tener por accidente empaquetarlo dentro de aquí. Y esto se ve igual, pero podría bloquear que puedes configurarlo para que arregle. Así que solo asegúrate en tu panel de capas que esto esté en su propio nivel y luego selecciónelo en el lado derecho en posición. Esto solía estar en interacciones, ahora mismo lo tienen en posición, por lo que podría moverse ligeramente. Así que busca algo llamado posición o scroll y luego elige el comportamiento fijo. Entonces vas a ver este pequeño bosquejo aquí. Entonces eso significa que fue sacado del comportamiento estándar, así que no va con la corriente, ¿por qué también tu contenido se movió hacia arriba? Porque tu contenido se mueve hacia arriba cuando decía a la maquetación automática. Así que vamos a agarrar esto para entenderlo. Entonces esto está alineado aquí en la parte superior. Así que sólo va a empezar desde lo más alto. Entonces, si quieres esta pequeña brecha natural, entonces por ejemplo, aquí, verás que es muy necesario. Entonces echa un vistazo. Entonces esto es alrededor de 95 de altura, tu navegación. Puedes verlo aquí en tus ajustes de altura. Y lo que haces es simplemente agarrar el escritorio, así que va a agregar esto a todo. Y luego en tu configuración de diseño automático, puedes ver aquí el relleno, y luego puedes simplemente agregar este relleno nuevamente a la parte superior. Y de esta manera, esto sólo va a empujar hacia abajo. También podrías alterar esto un poco a tu gusto, y también podrías ver soluciones donde esto realmente está usando una especie de fondo falso aquí. Entonces, a veces la gente simplemente hace un pequeño marco y lo pone encima. También funciona, pero creo que esta es la solución más limpia. Así que echemos un vistazo y avance. Y si nos desplazamos por él, entonces eso se ve bien. No obstante, si cambiamos el tamaño, anote una cosa cómo esto está saltando Así que tenemos que volver atrás y arreglar un pequeño detalle. Así que selecciona el encabezado porque ahora mismo, recuerda, siempre configuramos todo esto para que se llene, y de pronto ya no tenemos esta disponible porque llenamos el contenedor. Esa es una configuración de diseño automático. Y debido a que sacamos esto del diseño automático y lo configuramos en fijo, ya no tenemos las reglas de diseño automático. Pero lo que podemos usar es esto de aquí arriba. Podemos usar las restricciones. Entonces, en tu panel de restricciones, busca algo llamado izquierda y derecha. Así que eso sólo va a mantenerlo ahí. Entonces ahora mismo, si volvemos a hacer clic en la vista previa, y la redimensionamos ahora, se puede ver que ahora está manteniendo la distancia muy bien 12. BÁSICOS: conceptos básicos de animación: Agreguemos algunas animaciones a nuestro diseño. Entonces, en realidad, si vamos a previsualizar, podemos ver que estas pequeñas miniaturas, ya están animadas por sí mismas, y esto es una especie de horneado en ese bloque Entonces volvamos y entendamos cómo funciona realmente eso. Entonces, para las animaciones, salta al panel de interacciones. Entonces, justo al lado del diseño, encuentras interacciones. Ya agregamos interacción. Entonces eso significa cuando vamos de una página a otra o a un enlace externo. Pero si seleccionamos elementos en nuestro lienzo, entonces obtenemos más opciones en ese menú. Y por ejemplo, seleccionemos este grupo de cartas donde ya tenemos algo establecido, así que es una animación poco circulante agradable. Y se puede ver que esto se configuró aquí en interacciones. Entonces hay una animación que está incorporada y se llama Marquee Podría simplemente hacer clic en menos para poder quitarme la interacción, y luego solo tengo una imagen estática aquí. Para cualquier elemento que seleccionemos, podríamos agregar algunas interacciones. Ahora bien, es bueno agregarlos cuando tienen sentido, sino más bien usar menos que más. Por favor, no tengan estas cosas donde las cosas están volando dentro y fuera. Siempre es una fuente potencial de error, y siempre es un poco confuso. Así que úsalo, pero ten cuidado al respecto. Pero vamos a darle una oportunidad. Entonces tenemos a Herotex aquí, y luego tenemos interacciones Así que vamos a hacer clic en el signo más, y luego veremos nuestro menú de interacciones preestablecidas. Entonces puedes ver aquí tenemos cosas como el comportamiento de desplazamiento, pero la parte importante que nos gusta para esto es en realidad esta aquí. Entonces, por ejemplo, si quiero que esta tipografía esté apareciendo, entonces lo que me vendría bien es ésta Podría usar esa máquina de escribir y luego podría establecer la velocidad. De hecho voy a dejar eso a moderada, y podría darle un bucle. En realidad, no quiero esto, y tengo un pequeño cursor. Entonces echemos un vistazo a cómo se ve eso. Y se puede ver que esto es realmente agradable. Entonces esto va a empezar a escribir en cuanto haga clic en él en cuanto abra esta página, básicamente. Ahora, agreguemos un poco más aquí y también entendamos que depende de la capa que esté eligiendo de lo que está sucediendo. Entonces agreguemos otro efecto porque en realidad puedes, aunque ya tengamos el efecto marquesina, puedes agregar Entonces digamos que queremos un poco de efecto hover. Y en realidad está calificando. Y esto es porque ya agregué un efecto hover. Entonces puedes tener múltiples efectos, pero no el mismo efecto dos veces. Entonces déjame quitarme esto para poder mostrarte desde cero, y solo voy a seleccionar esto de nuevo. Entonces ahora tengo un efecto hover, y pueden ver que tengo esto aquí y puedo configurarlo Entonces voy a poner esto a escala 1.2. Entonces eso significa que si me cierro sobre él, entonces va a aparecer un poco más Entonces echemos un vistazo y anotemos cómo configuré esto en todo el grupo de cartas. Entonces echemos un vistazo. Así puedo desplazarme, y en cuanto lo repaso, va más grande. Entonces podría querer esto, pero en realidad quiero simplemente pasar cursor sobre una tarjeta y solo tener esto en la tarjeta única Así que asegúrate de sacarlo de aquí. Y ahora selecciono el grupo de tarjetas. Golpeé Enter. Esta es una forma rápida de acceder a todos los elementos secundarios. También podrías simplemente seleccionarlos uno por uno. Y luego lo que hago, agrego una interacción, y agrego el efecto hover, y hago lo mismo ahora, 1.2 o en realidad tal vez 1.1 para mantenerlo un poco sutil Y echemos un vistazo ahora. Entonces estoy jugando a esto. Y a medida que flote, puedes ver me sale este bonito efecto de flotación suave y poco Podría querer ajustar un poco la distancia, así que ahora podría seleccionar esto, saltar de nuevo al diseño. Y luego aquí, de hecho tengo la brecha, así podría ensanchar un poco esta brecha y darle un poco más de espacio para crecer Bastante agradable y muy sutil también es revelador. Entonces digamos que queremos revelar estos elementos a medida que nos desplazamos. De hecho voy a dejar esto como está. Y luego voy a seleccionar estos dos. Y así voy a agregar interacción y revelar. Y así en cuanto esté a la vista, también puedes hacer carga de página, pero voy a hacer tan pronto como me desplace hacia ella, se va a desvanecer. Entonces esto es realmente sutil. Echemos un vistazo. Entonces, si me desplazo, fíjate como esto viene ligeramente visible. Entonces es casi que casi no te das cuenta. De hecho, déjame darte este. Y en vez de desvanecerse, digamos que éste viene de la izquierda, y luego hagamos que éste venga de la derecha Entonces lo vemos un poco mejor. Y ahora volvamos a echarle un vistazo. Vamos a usar la vista completa. Y se puede ver que es realmente despacio solo se desliza hacia adentro. También tienes algunos locos aquí. Solo seleccionémoslos solo por diversión. Entonces aquí, por ejemplo, si vamos a jugar, y luego tenemos Drager Ball, y solo decimos que puedes arrastrar a cualquier parte, y luego puedes ver ahora solo podemos arrastrar esos elementos alrededor No estoy seguro de lo útil que es eso, pero realmente solo juega con ellos y mira lo que podría ser útil para ti. Sea consciente con las animaciones, pero úselas donde tengan sentido 13. CONCEPTOS BÁSICOS: incrustar mapas y videos: Incrustaciones. Entonces una parte de nuestro bloque. Entonces si haces clic en un botón más, ves los bloques, entonces justo aquí al final, actualmente tengo los incrustados Entonces estoy grabando esta palabra todavía en beta, así que podría ser un poco limitada, y espero que veas mejor adaptabilidad Pero solo quiero mostrarte lo que es posible por ahora. Entonces tenemos ahora mismo tres URL, YouTube y Google Maps. Entonces URL, si agrego esto, puedes ver que esto es realmente solo puedes agregar una URL o un código HGML Entonces, los que probablemente te interesen más es nuestro de YouTube. Entonces agreguemos este y uno de Google Maps. Entonces, si los seleccionas, ya ves que tienen menos propiedades en el panel Propiedades. Pero lo que puedes hacer es que no puedes simplemente dejarlos caer ahora mismo, sino que puedes copiarlos. Y luego, por ejemplo, puedes seleccionar este héroe y puedes agregarlo aquí. Así que también podrías tenerlo dentro de cualquiera de tus otros bloques o diseño como elemento. Entonces podría tener menos opciones, pero aún puedes posicionarlo relativamente bien. Ahora queremos agregar un video aquí y queremos agregar un mapa aquí. Entonces qué necesitamos si seleccionamos esto, puedes verlo aquí arriba, necesitamos una URL o algún HTML. Así que con YouTube, simplemente podemos pegar nuestra URL de YouTube aquí. Así que sólo voy a agarrar uno de mis videos. Entonces esto está en mi canal de YouTube. Entonces, si quieres usar tus propios videos, primero debes subirlos en tu propio canal. También podríamos simplemente incrustar cualquier otro video de YouTube. Encuentra el botón Compartir, y luego a través del botón Compartir, simplemente copia el enlace para compartir. Y ahora sólo vamos a pegarlo dentro de aquí. Y ya puedes ver tu miniatura ya está aquí. Puedes elegir si quieres reproducción automática. Quieres habilitar la pantalla completa para que la gente pueda ampliarla. Y ahora mismo, en realidad tengo que decir que hay una cosita que espero se va a resolver pronto que la miniatura, las dimensiones no son correctas para YouTube Así puedes deshacer clic en el registro de relación de aspecto, y luego puedes simplemente, como, configurarlo en las dimensiones correctas También puedes simplemente obtenerlos de YouTube. Si quieres, solo voy a hacerlo manualmente por ahora, así que se ve bien. Aquí tenemos nuestro mapa y puedes ver que tenemos una URL o algún HGML podemos obtener URL o en realidad solo un Yo voy a hacer lo mismo aquí. Voy a saltar a Google Maps. Y entonces acabo de buscar Berlín ahora, y así todo lo que hago es que voy a conseguir la ubicación para compartir para Berlín. También puedes agregar una calle específica con un número de casa, y yo sólo voy a copiar el enlace. En realidad, no, quiero el mapa incrustar. Entonces hago clic en Embed y puedes ver aquí este es un iframe, y voy a copiar este iframe Así que ahora saltemos de nuevo a nuestro archivo Figma, y voy a pegar eso justo aquí Y ahora, si hacemos clic en nuestra vista previa, puedes ver que tenemos este video, así podemos reproducir este aquí. Blogs y tamaños ***. Y también puedes desplazarte hacia abajo, y luego tienes tu mapa el cual puedes usar tal como lo harías con Google Maps. Entonces, en realidad, en tus bloques de características, si quieres usar ese mapa con una dirección, entonces también encuentras uno aquí. Así que solo puedes reemplazar ese bloque. Entonces, básicamente, solo puedes usar esta, y ahora podrías simplemente agregar toda esa información tal como hicimos antes. En realidad, aún deberíamos tenerlo guardado para que puedan ver aquí si ahora pego esto dentro de aquí, y vamos a jugar esto de nuevo. Entonces ahora ves si desplazas el bloque, puedes agregar la información y ver el mapa integrado. 14. BÁSICO: capas de código con Figma Make: Figma Hacer y codificar capas. Así que hay una gran característica que aún no hemos explorado, y esa es Figma Make, que trae código dentro de nuestra página Y podemos literalmente crear estos pequeños bloques con código. Entonces actualmente hay en esta versión, esta sigue siendo la versión beta, dos lugares donde la encuentras. Entonces lo encuentras por aquí en la barra, y aquí puedes verlo abre una página completa para que también puedas simplemente crear una página propia con Figma Make Lo que quiero mostrarles es esta parte de aquí, donde la usamos como capas de código. Para que veas, es en este pequeño campo embed o make que tenemos actualmente. Así que simplemente haz clic en él y va a abrir la interfaz. Y así ves esta pequeña capa de código aquí, y podemos colocarla en nuestro diseño. Y luego estamos obteniendo esta ventana con la capa de código. Y ahora es bastante sencillo. Entonces todo lo que tienes que hacer es que es una herramienta de IA, y estás describiendo la idea que te gustaría construir. Entonces esto realmente podría ser cualquier cosa, y puedes ver que nos está dando algunas ideas aquí, como un fondo degradado, un reloj digital. Entonces, en realidad vamos a ir por el reloj digital, y luego puedes ver un prompt cómo se vería, para que puedas ver aquí. Ahora, si hacemos clic en este botón, va a generar este código para nosotros. Entonces esto podría tomar un tiempo así que voy a acelerar eso en el fondo para ti. Y ahora se puede ver que se generó la capa de código. Observe cómo podemos ver nuestra capa, por lo que se generó para cada punto de interrupción Se ve así. Nos está dando algunas opciones para que podamos alterar este tipo de parámetros más importantes. Puedes ver tu código aquí. Y puedes ver también usualmente lado a lado, y luego puedes tener tu chat aquí para que también puedas decirle que haga cualquier cambio. Pero vamos a usarlo por ahora. Entonces, si cerramos esto, podemos verlo aquí, así podemos moverlo y se puede ver, como de costumbre, probablemente tenemos que configurar esto y auto layout y posicionar esto un poco. Pero básicamente tenemos este pequeño bloque aquí. Entonces si presionamos Pu view, entonces se puede ver que se trata de un reloj de trabajo, que ahora podemos posicionar al igual que cualquier otro elemento aquí e integrar en nuestro diseño. Entonces aquí arriba, puedes ver que también podemos editar el código, para que puedas saltar de nuevo aquí. Y entonces lo que realmente me gusta es esta pequeña parte de aquí, que es apuntar y editar. Entonces, por ejemplo, puedo usar esto, y ahora puedo señalar diferentes áreas en mi diseño. Así puedo seleccionar esto para poder cambiar el color aquí. Entonces esto es todo tipo de cosas de diseño, pero también puedes hablar o conversar con tu capa de código y luego decirle qué hacer. Entonces probemos esto, e intentemos si podría darnos una versión AM y PM en lugar de este tipo de reloj. Y por lo general es una herramienta de IA, así que nunca se sabe realmente lo que va a pasar, así que tal vez tenga que jugar un poco. Entonces nuevamente, esto va a tomar un poco de tiempo en el fondo. Voy a acelerar eso para ti. Para que veas que cambió esto para nosotros. Ahora probemos otra cosa. Entonces la página que estamos construyendo es para freelancer. Entonces, lo que quiero hacer, quiero tener esta calculadora para poder agregar mis precios ahí, y luego la gente puede calcular una especie de primera estimación de cuánto serían mis servicios y luego contactarme. Entonces en este momento, lo que todavía me gusta hacer es simplemente describir en JGBT o Claude lo que me gusta y luego pedirle que escriba un prompt adecuado para Entonces esto solo hace que tu pronta sea un poco más clara. Entonces le di una idea vaga. Quiero una calculadora de estimación para ti sitio web de diseñadores. Por lo que los clientes potenciales pueden seleccionar entre un precio básico estándar y premium. Y luego quiero algo para logo, tipografía, imagen hecha, y una landing page, y luego ven el total Así que quería crear un prompt, y luego vamos a usar ese prompt. Así que normalmente, trabajaría un poco y personalizaría este primero, pero solo voy a copiarlo así, y ahora estamos saltando para hacer y lo pegamos ahí. No tienes que hacer eso. También puedes simplemente escribirlo aquí y luego jugar con él. Pero solo encuentro que me da mejores resultados. Pero nuevamente, no hay absolutamente ninguna necesidad prefactorizar el prompt si solo prefieres escribirlo tú mismo. Entonces otra vez, voy a acelerar esto en el fondo para ti. Eso se ve bastante bien, así que vamos a cerrarlo, y echemos un vistazo a nuestra página adecuada. Sólo voy a como de costumbre, configurar el diseño automático. Golpea Enter. Realmente puedes usar esto como usas cualquier otra capa así que llena el contenedor, y veamos ahora en acción. Así podemos ver ahora podemos seleccionar cualquier otro precio. Muy encantadora. Y luego aquí abajo, en realidad, tenemos que saltar hacia atrás porque tenemos que poner éste, recuerda, para abrazar el contenido, así vemos el completo , no está funcionando. Así que solo establece la capa make para abrazar el contenido también. Y ahora deberías poder verlo. Así que volvamos. Ahora podemos desplazarnos hacia abajo. Y entonces se puede ver, como estoy cambiando esto, esto automáticamente va a actualizar mi contenido. Así que realmente, realmente encantador. Y esto es, por supuesto, totalmente receptivo de inmediato. Ahora siempre puedes regresar. Puede seleccionar la capa de código, y puede volver a Editar, y luego puede hacer cualquier cambio aquí. 15. PUBLICA: publica tu sitio: Así que publiquemos tu sitio, y esto es muy, muy fácil. Entonces, una vez que estés feliz, simplemente haz clic en Publicar. Y entonces lo que va a pasar es Figma te va a dar algún número aleatorio o palabra, y luego es punto figma punto SIDE, y esa es una URL gratuita que puedes usar por ahora Posteriormente podrás conectar tu dominio personalizado, pero por ahora, sí usa este. Entonces simplemente pulsa Publicar. Y una vez que veas la actualización, simplemente puedes hacer clic en ese enlace, y luego vas a ver tu sitio web real en vivo. Es totalmente receptivo, y siempre puedes volver atrás y simplemente actualizar y empujar a tu sitio de vida. 16. PUBLICA: SEO, favicon y intercambio social: Entonces nuestra página se ve bien, pero hay alguna información adicional que deberíamos agregar, así que un poco de información sobre la página. A lo mejor queremos un poco de favicon, eso es cosa en la cabecera Entonces, hagamos clic aquí en nuestra configuración, y luego podemos tener configuraciones generales, y tenemos configuraciones de dominio. Entonces aquí puedes conectar tu dominio y controlarlo aún más si estás haciendo esto. Pero luego en general, también se puede agregar alguna información sobre la página. Tienes un título, entonces lo que está escrito en una tabulación. No es el mejor título aquí, pero vamos a dejar eso para esto. Y luego tenemos una descripción del sitio. Entonces esto es, por ejemplo, si lo copias en alguna parte, ellos lo ven o los motores de búsqueda. Entonces aquí querrías agregar una descripción. Por ejemplo, esta es mi cartera. Entonces lo que voy a hacer, sólo voy a agarrar esta primera parte aquí y voy a agregarla. En realidad, la buena idea es si estás usando Claude o ChachiBT para pedirlo, ayudarte a escribir estas descripciones y rellenar todo esto, y luego puedes decirle que use la optimización de motores de búsqueda Lenguaje. En mi caso, esto es inglés, así que voy a dejar ese Google Analytics. Esto es muy útil. Entonces, si quieres ver quién hace clic, quién está visitando tu página, no ves a qué persona, sino desde qué países demográficos, así obtienes un poco de visión general, entonces puedes configurar una cuenta de analítica, y ellos te van a dar esta fuente de código y puedes simplemente copiarlo ahí y va a rastrearlo. Entonces puedes excluir el sitio web de los resultados de los motores de búsqueda. Voy a mantenerlo así porque esta es solo una página de demostración. Pero obviamente, si esta es tu página, definitivamente quieres tener esta sin hacer clic, así que quieres asegurarte de que los motores de búsqueda puedan encontrarte Aquí tenemos un favicon, tan cosita en la cabeza y ese pequeño ícono que ves, y luego compartir imagen social Entonces, vamos a configurar esos dos. Entonces favicon, 48 por 48 y compartir social 1,200 por 630. Así que vamos a saltar por encima y podemos hacer eso realmente aquí mismo. Así que vamos a montar nuestro favicon. Entonces eso fue 48 por 48. Entonces necesitamos un marco. Puedes hacer clic aquí y simplemente obtener el marco o golpear F, y luego vamos a dibujar un marco y asegurarnos de que las dimensiones son 48 por 48. Entonces eso va a ser bastante pequeño. Entonces, sí, entonces el favicon es ese pequeño encabezado que luego tienes aquí arriba en tu Ahí está, como, este pequeño icono. Así que solo voy a crear algo al azar con los colores de mi página. Entonces voy a acelerar esto para ti. Entonces, sí, esta es solo una idea aleatoria que tuve, que creo que va bien con mi diseño. Voy a ponerle nombre a este fabricon. Entonces podrías o exportar el favicon y luego volver a importarlo, o en realidad esto es mucho más fácil Simplemente salta por aquí y luego entra en tu configuración de favicon Y aquí puedes ver, lo llamamos fabricon y simplemente puedes seleccionarlo, y luego esto va a aparecer. Entonces déjame mostrarte. Volvamos a publicar. Y visitemos nuestra página. Y ahora puedes ver aquí arriba tenemos nuestro pequeño favicon apareciendo En realidad, me gusta tanto mi favicon que solo voy a convertir esto en un logo sin el fondo para no tenerlo tan Así que vamos a mover esto aquí arriba. De hecho voy a convertir esto en un componente. Y ahora solo voy a reemplazar todo esto con mi nuevo logo. Pequeño consejo, lo que puedes hacer para hacerlo en todo tu grupo es seleccionarlo, y luego aquí arriba, tienes una edición múltiple, para que puedas deshacerte de todo eso. Y luego podemos seleccionar éste también. Y ahora estamos sacando una instancia y estamos agregando esa instancia aquí y que tenemos que hacer en cada uno de ellos por sí mismos. Y voy a hacer lo mismo por mi Futter. Entonces me voy a deshacer de esto. Yo también me voy a deshacer de éste. Y yo sólo voy a agregar esto aquí. Bien, genial. Entonces aquí puedes echar un vistazo porque esto son componentes, esto agregó mi logo por todas partes. Entonces ahora que tenemos la página que la queremos, vamos a configurar nuestra imagen de vista previa. Entonces déjame saltar por aquí y ya ves que son mil 200 630, así que voy a hacer eso. Entonces voy a golpear F y dibujar un cuadro de ese tamaño. Entonces 1,200. Veces 630. Y luego puedes agregar cualquier cosa que quieras como vista previa. Puedes hacer esto completamente a tu gusto. Yo sólo voy a ir por el camino fácil, y sólo voy a copiar una vista previa de esto aquí arriba. Entonces hay un pequeño truco de lo que puedes hacer para copiar esto para que no tengas que exportar e importar, presiona Shift Command y C, y esto debería copiar un PNG para ti. Entonces vas a ver un poco de alerta, copiado como un PNG, luego selecciona el fotograma donde quieres pegarlo y simplemente pulsa Comando y V. Así que solo un pegado normal Y ahora vas a tener como una foto de lo que sea que hayas agarrado aquí arriba Oh, el pequeño problema que tuve es esto agarrado, como todo esto, así que no quiero esto Entonces lo que voy a hacer es simplemente voy a tomar una captura de pantalla por ahora. Así que déjame agarrar eso de mi computadora. Sólo voy a pegarlo aquí. Y entonces esta es mi pequeña imagen de previsualización. Y nuevamente, puedes personalizarlo completamente a tu gusto, así que solo voy a darle un fondo oscuro. Y voy a llamar a esta vista previa. Vuelva a su configuración. Y entonces, por lo general, puedes simplemente agarrar esto desde aquí. Y así ahora en cualquier lugar que vayas a compartir esto en tus redes sociales, esto va a aparecer. También puedes agregar más código. Entonces, si estás familiarizado con CSS aquí, tienes la opción de agregar cuerpo personalizado, encabezado y código de cabeza, lo que quieras agregar aquí. Pero esta es la configuración básica que necesitarás. 17. PUBLICA: conecta un dominio personalizado: Entonces conectemos el dominio personalizado. Entonces necesitas comprar este dominio primero con cualquier proveedor. Compré el mío con Go Dei, así que te voy a mostrar esto, pero también puedes usar cualquier otro proveedor. Entonces infigmasites, ve a publicar, y luego puedes conectar Vas a estar en configuración, así que también lo ves aquí y vuelves a hacer clic en Conectar dominio, y luego simplemente escribe el dominio que compraste con tu proveedor preferido. Una vez que hayas hecho eso, haz clic en Seguro. En la parte inferior, ahora estás viendo la llamada configuración de DNS. Por lo que necesitamos agregarlos con nuestro proveedor. Eso suena un poco complicado, pero en realidad no es tan difícil. Cuente dónde aborda su dominio y luego necesita buscar la configuración de DNS. Si alguna vez tiene problemas para localizar esto, entonces generalmente hay algún contacto para atención al cliente que puede preguntar. Entonces aquí ves tus registros DNS, y nosotros solo vamos a agregar los que nos dijeron. Entonces no hace falta que entiendas mucho al respecto. Solo necesitas agregar un registro CName y un registro de texto. Y puedes simplemente copiar la información directamente desde FIGMA. Entonces ahora entramos aquí y luego vas a encontrar un botón donde puedas agregar un registro. Desde el menú desplegable, tienes el tipo de registro que puedes agregar. Entonces aquí vamos a ir por el Cname y luego simplemente vamos a pegar la información que Figma nos dio y ahora la guardaremos y se va a agregar Y ahora se puede ver que en realidad estamos recibiendo un error de que esto ya existe. Entonces tenemos que checar aquí, y luego podemos ver que ya tenemos una C Nombre de eso. Y así básicamente lo que hace un nombre C es simplemente apuntar a una dirección. Entonces vamos a cambiar esos bloques lunares que teníamos aquí por defecto por nuestro nuevo. Y entonces es posible que te pidan que verifiques que eres el dueño real. Y luego sólo vamos a agregar nuestro registro de texto. En este caso, esto es solo una verificación de propiedad. Y así se puede ver que ya hay algunos. Entonces, solo agreguemos el nuestro en cualquier caso, y luego podremos ocuparnos de cualquier error más adelante. Así que sólo voy a asumir que no entiendes mucho sobre los registros DNS. En ese caso, solo cópielo ahí dentro, y luego vamos a comprobar lo que está pasando. Entonces copiemos éste, también. Y entonces solo nos van a pedir probablemente que verifiquemos esto nuevamente si lo decimos. Así que adelante y solo verifica que eres el dueño. Y cuando volvemos a Figma, podemos ver que CNM está funcionando, pero parece que hay algo mal con los registros DNS Podría ser un retraso de tiempo. Intentemos esto otra vez. Pero en vez de solo esperar, voy a verificar, y lo que me gusta hacer es usar un LLM para eso Por lo que no tengo idea de estos registros. Yo solo voy a tomar una captura de pantalla sobre las que me muestran un error, y también voy a tomar una captura de pantalla de lo que me da Figma, y luego simplemente voy a dejar esto en el ALM de tu agrado Estoy usando CGPT pero puedes usar cualquier otro ALM, también. Así que solo voy a dejar caer esas imágenes dentro de mi ALM en mi caso, JGBT Y luego solo voy a preguntarlo como lo haría con cualquier servicio al cliente o desarrollador alrededor. Entonces te estoy diciendo que estoy tratando de conectar sitios Pigma a mi dominio Go Daddy, y agregarías el proveedor que estás usando Y entonces te estoy pidiendo que por favor echen un vistazo porque lo que estoy un poco confundido acerca de no saber sobre los registros DNS es, ¿realmente necesito esos dos registros? ¿Necesito eliminar algo? Y sólo voy a pedirle que me ayude un poco con esto. Y cosas como esta funcionan súper bien porque esto es literalmente información técnica. Entonces me está diciendo el nombre C, como ya vimos figma, eso está funcionando bien Y luego me está diciendo que aquí hay un problema. Entonces en realidad me está demostrando que está establecido en una hora. Entonces eso generalmente está bien. Podría ser un poco paciente, y entonces ¿qué más me está diciendo? No es necesario eliminar ninguno de ellos, así que ambos están bien, y luego esperar un poco y refrescar. Entonces no soy muy paciente. Entonces lo único que sólo voy a cambiar porque todo lo demás parece estar bien. Sólo voy a cambiar esto a media hora, esperar un poco, y luego refrescarme. Y mi paciente fue recompensado. Ahora puedo ver que todo está conectado, así podemos dar click en el enlace real, y luego ya podemos ver nuestro sitio de trabajo completo. Entonces sí, todo bastante sencillo. Y si tienes problemas, entonces usa tus LLM. Funciona de maravilla. Un poco de notas al margen. Esto debería estar funcionando, pero a veces solo puedes acceder a la página si pones WWW y no solo el nombre. Entonces en ese caso, hay que reenviarlo. Disculpe, esto es en alemán, pero necesitas encontrar tu delantero, elegir HTDPS y luego necesitas reenviar a la WWW, y luego siempre va a funcionar, ya sea que pongan los ThreeWS o simplemente pongan el Y luego guárdala, y ahora debería estar funcionando bien. 18. PUBLICA: fundamentos de la accesibilidad: Ajustes de accesibilidad. Entonces en este video, te voy a dar un pequeño panorama de los ajustes de accesibilidad actuales que tenemos en los sitios de FicMA y probablemente también evolucionan con el tiempo Solo ten en cuenta que la accesibilidad en realidad en muchos países es un requisito legal que debes cumplir, y hay diferentes roles para diferentes países. Entonces, es tu responsabilidad buscarlo tú mismo y en caso de duda, consultar a un abogado y asegurarte de estar al tanto de lo que necesitas entregar. Entonces esto no es asesoría legal que te estoy dando. Solo te estoy guiando a través la configuración que actualmente tenemos disponible. Entonces comencemos con nuestro texto. Entonces, en cada página, usualmente tenemos un titular principal, y eso se llama el llamado H one. Entonces el primer titular. Ahora, selecciona este titular, y puedes ver aquí abajo en el panel de propiedades del lado derecho, puedes ver que hay una ventana de accesibilidad. Y debido a que seleccionamos tipografía, obtenemos las etiquetas tipográficas Ahora, P, ese es cualquier texto de copia estándar. Entonces, por ejemplo, este de aquí, esto debería establecerse como una P. Echemos un vistazo, y eso es correcto. Ahora bien, este es nuestro titular principal, H uno, así que queremos cambiar eso a nuestro H uno. Consciente siempre hay solo una H una por página. Se puede tener más H dos, H tres, pero debería haber sólo una H una. Ahora bien, tenga en cuenta cómo personalmente no estoy llamando a mis estilos H uno, H dos, H tres, y así sucesivamente, que verán mucho por la razón que van a ver aquí de inmediato. Entonces tengo un titular de exhibición, luego tengo otros titulares. Entonces este es el estilo. Esta es mi jerarquía visual. Y esto de aquí, las etiquetas, esa es mi jerarquía cuando alguien con lector de pantalla está leyendo esto. Entonces en nuestra subpágina, por ejemplo, no estoy usando este titular de visualización, pero este sigue siendo uno de edad porque este sigue siendo el titular principal. Entonces todavía quiero usar esto aquí. Sólo una pequeña nota al margen. Existen diferentes enfoques para esto. Soy un firme defensor de desacoplar tu texto CSS de tus nombres de estilo Entonces, realmente piensa en cómo alguien leería esto. Entonces este probablemente será el principal. Entonces esto sería probablemente nuestra edad de dos años, o tal vez tenemos un titular aquí. Esto también podría ser una edad de tres años. Y así, correría por ahí. Entonces estos de aquí son probablemente los titulares menos importantes, así que los convertiría en una edad de cuatro años. Y aquí puedes ver que puedes tener múltiples cuatros de edad, pero solo tienes una edad uno Entonces cualquier copia de texto que por lo general ya esté configurado en P, y simplemente podemos dejarlo ahí. Ahora, es posible que hayas notado que cuando estás publicando, se muestran errores. Entonces, si tienes problemas, Figma en realidad te ayuda a resolverlos. Hasta el momento, los ignoramos, pero echemos un vistazo porque todos deberían resolverse en tu página final. Entonces aquí nos está diciendo que en realidad comencemos con este de aquí. Falta una etiqueta. Entonces eso significa que tenemos una imagen que no tiene etiqueta. Vamos a dar click aquí, y luego vamos a saltar a esa imagen. Y en realidad, necesitaríamos agregar eso realmente a todas nuestras imágenes. Lo que tenemos que hacer es cada vez que usamos una imagen, entonces necesitamos agregar un nombre o una descripción, una etiqueta llamada Alt. Entonces vamos aquí. Hacemos clic en Plus, y luego tenemos una etiqueta, y ahora vamos a describir lo que vemos aquí. Así que cualquiera que utilice un lector de pantalla ahora podría entender lo que está pasando aquí, así que en caso de que no pueda ver esas imágenes. Y realmente necesitamos hacer eso por todos ellos. Si tienes una imagen decorativa, entonces puedes presionar este pequeño botón. Así que a veces es posible que solo tengas algo intermedio que sea como un fondo o un marcador de posición o algo así Entonces realmente puedes simplemente dar click aquí, y eso deshabilitará el Alt. Pero también aquí, por ejemplo, si tienes tu foto de perfil, solo asegúrate de agregar una imagen y que escribes una descripción. Entonces aquí donde escribirías tu nombre. Y esto realmente tiene que suceder para todas las imágenes que estés usando. Otra parte importante para agregar a tu CSS a través de estos ajustes es la estructura general. Nuevamente, para tener una mejor lectura, y esto también va a mejorar la optimización de tu buscadores, por cierto. Entonces por ejemplo, aquí, selecciona esto, y luego en el texto, puedes ver esta sección, esto ya está marcado como encabezado. Entonces deberíamos tener un encabezado, y luego también deberíamos decirle que el Putter es el futer Entonces se puede ver, debido a que esto se almacenó probablemente como un bloque Putter, esto ya recogido, pero de lo contrario, debería hacerlo a mano De hecho, vamos a pasar por esas etiquetas principales 1 segundo. Entonces un div que es un contenedor general, por lo que no tiene significado semántico Entonces tienes un artículo que es una pieza de contenido autocontenida que podría ser independiente, como, por ejemplo, una entrada de blog, luego un sitio que significa contenido relacionado con el contenido principal como una barra lateral o una nota. Entonces tenemos un botón, bastante obvio. Entonces un elemento interactivo que realiza una acción mientras se hace clic. Tenemos una figura, así que eso es para envolver medios como una imagen o gráfico con una leyenda opcional. Entonces tenemos la puta que define la sección Puta de la página, así que eso es bastante sencillo. Entonces tenemos nuestro encabezado que marca la sección superior de la página, o la sección generalmente con títulos o navegación. Tenemos nuestro principal, así que eso representa el contenido principal de la página, excluyendo elementos repetidos como nag bar o puta. Y entonces tenemos suficiente que contiene los enlaces de navegación para las secciones laterales. Y luego tenemos sección, así que eso es semánticamente una sección de grupo o contenido, como un capítulo de la página Entonces por ejemplo, nuestra parte acerca de aquí, esto podría ser una sección. Y luego tenemos esto aquí como nuestro encabezado, y luego podríamos ir un poco más allá y podríamos, por ejemplo, decir, realidad, podríamos etiquetar esto aquí mismo en nuestro componente si estamos usando componente, si no solo agregarlo en la página. Entonces este es nuestro encabezado. Y entonces esta de aquí, esa sería nuestra NAF. Se puede ver esto ya configurado. Y luego nuestro botón, este debería estar registrado como un botón. Y aquí se puede ver esto, por ejemplo, no lo recogió. Así que en realidad podemos hacer eso aquí mismo en el botón. Ahora bien, si lo seleccionamos aquí porque está anidado, se puede ver que esto también lo recogió. Es una buena idea configurar todo esto en tu componente si los estás usando y para cualquier otro elemento directamente en tu página. Entonces, la accesibilidad es mucho más que agregar un poco de contraste de color y un poco de etiquetas aquí y allá. Pero ya puedes hacer un buen trabajo como diseñador. Como se dijo, esto no saca que necesites familiarizarte con las reglas generales de tu país, pero actualmente hay bastantes herramientas geniales solo en el diseño Figma y no en Espero que los veamos en sitios enchufar pronto. Entonces, si estás en el diseño de Figma, entonces ve a tus complementos a través del panel de acciones Hay diferentes. Hay uno llamado ID. Hay uno que se llama Stark, así que solo te voy a mostrar Star también solo Google para complementos de accesibilidad y probar diferentes. Y entonces esto es realmente genial porque esto viene con un verificador de contraste. Entonces, por ejemplo, podríamos comprobar que los colores del texto que tenemos, podemos realmente usarlos sobre qué fondo diferente? Entonces, por ejemplo, este texto, no podrías estar usando en este, pero podrías, por ejemplo, estar usando este color de texto oscuro en cualquiera de los claros. Entonces ya ves cuál pasa. Hay más información. Y hay otros temas como la tipografía, los objetivos táctiles, objetivos táctiles Nuevamente, obtienes todos los encabezados de enfoque de texto. Así que tienes todo esto dentro de aquí para bucear un poco más profundo. 19. BIBLIOTECA: introducción a las bibliotecas: Configurar su propia biblioteca de sitios con colores, tipografía, jerarquía y sus propios bloques de componentes Entonces, ¿cómo funciona esto? Bueno, básicamente, lo que puedes hacer es, como has estado usando bloques Figma, puedes construir tus propios bloques Para que puedas configurar una biblioteca completa. Entonces eso significa que podrías configurar tu tipografía completamente a tu gusto, así que qué fuente estás usando, cómo quieres que todo esto se comporte a través de diferentes puntos de interrupción y una idea general de la jerarquía Entonces, ¿qué tipo de dinámica quieres aquí? Lo mismo para tus colores, puedes configurar variables de color, y luego puedes usarlas en todos tus diseños, y puedes actualizarlos fácilmente. Y puedes configurar tus propios bloques, por lo que son componentes totalmente personalizables que se configuran para diferentes puntos de interrupción Podrías configurar bloques, pero también puedes configurar páginas enteras y crear plantillas para que cualquier página de sitios figma consuma Puede publicar todo este archivo como una biblioteca, y eso significa que simplemente puede colocarlo en su equipo, y luego puede crear cualquier archivo sits o usar cualquier archivo de sitios existente. Y a través del botón de biblioteca, simplemente puede acceder a esta biblioteca externa. Ahora puedes introducir todos los bloques que creaste con todos los ajustes correctos. Por supuesto, puedes personalizarlo completamente, agregar imágenes, cambiar texto, y cualquier cambio que hagas en la biblioteca también se verá reflejado aquí. Simplemente puedes publicarlo como lo harías con cualquier otro sitio que hayas hecho en sitios. Y de esta manera, podrás crear tu página totalmente receptiva con tus propios componentes. 20. BIBLIOTECA: Conectar una biblioteca: Importemos nuestro archivo Figma moon Block, convertirlo en una biblioteca y conectarlo con sitios Pigma Entonces, lo primero que debes hacer salta a tu cuenta de FigMA y luego a cualquier equipo, pero tiene que ser un equipo profesional o superior He creado un nuevo proyecto aquí. Voy a saltar aquí. Y en lugar de crear un nuevo archivo, lo que hago, uso el mismo botón, pero voy a Importar. Y por cierto, en figma, la interfaz cambia bastante, por lo que es posible que encuentres esto en un lugar ligeramente diferente Lo importante es que uses Importar y ahora vas a importar el archivo FIGMA que descargaste previamente Esto podría tomar solo un momento. Es un archivo bastante grande, así que dale algo de tiempo. Voy a acelerar esto aquí. Así que una vez que hayas terminado, haz doble clic en el archivo, y luego dentro de aquí, podrás ver todos los elementos preestablecidos. Entonces vas a tener colores, tipografía y algunos elementos ya configurados Ahora, no necesitas hacer nada. Podemos consumir tal como es, todos estos elementos derechazos interiores Lo único que debes hacer es convertir este archivo en una biblioteca para que puedas conectarlo. Así que salta a los activos por aquí. Entonces justo al lado del archivo, ves la pequeña pestaña Activos, y aquí ves el símbolo de la biblioteca. Da click en este símbolo y luego haz clic en Publicar. Nuevamente, esto podría tomar solo un momento ya que esto es un poco más grande, así que voy a acelerar esto en segundo plano. Una vez hecho esto, volvamos a nuestro equipo, y puedes usar un archivo de sitios existente o simplemente voy a crear uno nuevo. Entonces vuelvo a hacer clic en el botón y voy a sitios Importante, no es un archivo de diseño, pero necesitas un archivo de sitios FIGMA, y podemos saltar esto porque queremos empezar de cero Así que alejemos un poco, y podrás ver que ya nos va a dar la página principal, y hay una versión de escritorio y un móvil. Pero en el archivo que tienes, siempre tenemos una versión, todo, escritorio, tablet y móvil. Entonces queremos lo mismo en nuestro archivo lateral. Simplemente haga clic en un botón más, y luego verá este aquí. Esto ya está configurado exactamente en los mismos tamaños, y ahora tenemos exactamente la misma configuración que en nuestro archivo. Entonces ahora queremos conectar nuestra biblioteca. Así que da click en este pequeño botón aquí. Y luego saltar a bibliotecas. Hay bloques, pero quieres bibliotecas, y haz clic en Examinar bibliotecas de equipo, y ahora deberías encontrar tu biblioteca, si no solo buscar por nombre. Una vez que lo encontraste, tengo dos aquí porque tengo esto instalado previamente. Entonces este es el que acabo de agregar. Sólo verás uno. Simplemente haga clic en Agregar a Archivos. Y ahora puedes ver tu biblioteca por aquí en biblioteca. Entonces aunque salgas de aquí, aquí es donde lo encuentras todo el tiempo. Ahora, haz click en él, y luego vas a ver tres secciones, los bloques de construcción. Entonces esto es todos los pequeños bloques, navegación de héroes, o también puedes tener diseños. Entonces aquí hice algunos diseños listos para ti o wireframes Si saltas de nuevo al archivo, entonces el archivo original que convertiste en una biblioteca, entonces puedes ver aquí si te vas de activos a archivos que tienes tres páginas. Entonces los bloques de construcción, que ves por defecto, el wireframe Entonces aquí es donde encuentras todos los wireframes y los diseños. Entonces este es un espejo exacto de esto. Y así todo lo que necesitas hacer es elegir los bloques prefabricados. Entonces simplemente selecciona uno de ellos, y solo necesita arrastrarlo a la versión de escritorio, y luego va a configurar los otros puntos de interrupción para usted también O también puedes usar las páginas listas para usar, y lo mismo aquí, simplemente elige cualquiera de ellas, simplemente elige cualquiera de ellas, colócala solo en la versión de escritorio, y va a configurar todas las demás para ti automáticamente. 21. BIBLIOTECA: Configuración de páginas personalizadas: Configuremos nuestra primera página y también agreguemos algunos ajustes básicos de diseño automático porque lo que se horneó en bloques Figma, debe configurarlo aquí a mano Entonces tenemos nuestra página configurada, pero aún está un poco apagada, porque la cosa es que no podemos verlo todo. Y si pulsamos en vista previa, entonces este es este botón de aquí o también puedes usar este , es lo mismo. Entonces lo que pasa es que sí vemos la vista previa, pero no podemos desplazarnos correctamente. Y además, si cambiamos el tamaño lo sé, solo está un poco fuera, ¿verdad No se comporta de la manera que esperamos que lo haga. Así que saltemos hacia atrás. Y configurar esto. Entonces, estos son algunos cambios de diseño automático que debes hacer. Y si necesitas arreglar mi, esa es la única parte, eso podría ser un poco confuso. Así que realmente sígueme por aquí paso a paso, y deberías estar bien. Así que agarra el escritorio. Solo necesitas configurarlo en el escritorio, y va a configurarlo para todo lo demás. Entonces, lo que tenemos que hacer es cambiar esto de una disposición de flujo libre a una disposición vertical. Entonces hagámoslo. Ahora lo siguiente que tenemos que hacer es alinear esto con el centro y la parte superior. Y luego asegúrate de que todo esto esté puesto a cero. Entonces, si tienes algunos números aquí, cámbialo a cero. Para poder ver toda la página, queremos establecer la altura, no en un valor fijo, sino para abrazar el contenido. Entonces eso ya se ve bastante bien. Echemos un pequeño vistazo a la vista previa. Así que ahora podemos desplazarnos, pero aún se ve que cuando estamos redimensionando, ahora está en el centro, pero todavía estamos obteniendo estos pequeños huecos que no queremos porque queremos que esto sea muy fluido. Entonces tenemos que hacer una última cosita. Así que de nuevo, agarra la parte del escritorio y luego presiona Enter, y va a agarrar todos los elementos secundarios, y necesitas configurarlos para llenar el contenedor. Entonces en dimensiones, no saquen esta. Solo usa un pequeño error y luego elige llenar el contenedor. Y así, si estamos comprobando esto de nuevo, entonces ya se puede ver que ahora está funcionando muy bien. Y ahora podemos alterar todo el contenido a nuestro gusto. Entonces, si cambias el texto en el escritorio, eso solo va a reflexionar sobre todas las demás áreas. También puedes cambiar las imágenes, claro, simplemente selecciona la imagen, y luego vía el relleno de imagen, puedes elegir cualquier otra imagen desde tu computadora. Ahora las páginas ya están configuradas para ti. Entonces, tal vez quieras una configuración un poco más flexible. También podrías usar los diferentes bloques de construcción entonces. Así que vamos a crear otra página. Entonces voy a ir a la página web aquí abajo. Voy a colocar esto justo al lado, y voy a llamar a esto, por ejemplo, la página de la cafetería, y ahora voy a hacer la misma configuración. Entonces voy a agregar una tableta, voy a agregar un teléfono móvil. Ahora en lugar de las páginas listas, voy a saltar a los bloques de construcción, así puedo ver aquí la misma navegación. Simplemente voy a ponérselo aquí y ya se puede ver que ya agrega lo mismo. Ahora, tenemos que repetir la configuración que teníamos antes, lo cual es genial, para que puedas volver a verlo. Entonces, seleccionemos nuestra página principal, y luego recordemos el primer paso, necesitamos una configuración vertical. Entonces tenemos que centrar esto. Tenemos que asegurarnos de que todo esto esté puesto a cero, que comience desde arriba. Y ahora queremos establecer esto para abrazar el contenido, así vemos exactamente tanto como tenemos aquí. El redimensionamiento, el contenedor lleno vamos a hacer al final, pero también podríamos hacerlo individualmente con todos ellos. Así que solo puedes seleccionar el elemento, y luego puedes girarlo para llenar el contenedor con el fin de cambiar el tamaño Entonces agreguemos algunos elementos más. Agreguemos tal vez solo un pequeño héroe. Vamos a agregar eso aquí. Y entonces si no lo tienes en el orden que deseas, simplemente puedes usar tus teclas arriba y abajo para cambiarlo. Y también fíjate por aquí, tienes algunas opciones. Entonces, por ejemplo, podrías ocultar el logo y el grupo de botones o tal vez solo un botón. Y así solo voy a agregar algunas imágenes también. Entonces echemos un vistazo a undercard. Entonces lo que puedo hacer es simplemente agregar esta de aquí, entonces tal vez una imagen más grande. Y si tienes algo como esto, agreguemos algo más de texto también. Entonces lo que quizás quieras es que quieras agregar algo de espaciado entre estos. Entonces podrías agregar esto aquí, pero esto va a agregar espaciado a todo, así que no recomiendo esto. Entonces lo que recomiendo es hacer, si seleccionas esos dos, y luego los conviertes en un grupo de diseño automático, también. Nuevamente, esto podría ser un poco más complicado. Entonces, lo que haces es presionar Mayús y A, y lo va a convertir en un grupo de diseño automático. Y ahora todo lo que tienes que hacer, puedes establecer la brecha dentro de aquí ahora. Y también podrías establecer algún relleno, por ejemplo, arriba e abajo. Entonces, por ejemplo, ahora tendrías un pequeño hueco entre aquí. Y por cierto, también puedes establecer un color de fondo. Si querías esto, aquí hay algunos colores preestablecidos para ti. Entonces puedes usarlos y puedes establecer cualquier color de fondo, por ejemplo. Ahora bien, si queremos agregar imágenes aquí, entonces lo hacemos igual que antes. Simplemente haga clic aquí y luego use la imagen de relleno y podrá subir imágenes desde su computadora. Y nuevamente, también aquí, si quieres cambiar el orden, entonces simplemente puedes seleccionar el elemento, y luego con tus teclas arriba y abajo puedes cambiar esto alrededor, y también puedes cambiar cualquier texto aquí y va a reflejarse a través de puntos de interrupción Ahora bien, si echamos un vistazo a la vista previa de esta página, puede ver que se sienta muy bien, pero de nuevo, tenemos este salto raro. Así que recuerda, tenemos que poner todo para llenar. Entonces ya lo tenemos establecido aquí. Entonces podríamos pasar por cada uno de estos elementos y luego simplemente configurarlos todos para llenar el contenedor, o puedes usar un pequeño truco, presionar Enter, y ahora tienes todos ellos seleccionados, y ahora configurarlos para llenar el contenedor. Entonces volvamos a echar un vistazo. Y se puede ver que esto ahora redimensiona muy bien Ah, en realidad, echa un vistazo aquí. Salta, y esto es porque agrupamos esto, así que tenemos que ir dentro de este grupo y luego solo asegurarnos de que esto también esté configurado para llenar el contenedor. Entonces, si ahora estamos echando un vistazo, entonces ahora debería funcionar sin problemas, y podemos ver este comportamiento realmente agradable. Ahora, vamos a conectar las páginas. Entonces para hacer eso, simplemente seleccionas el elemento que deseas conectar. Podría tener toda la miniatura o solo la imagen o tal vez solo este enlace por aquí Depende de ti. Después ir a las interacciones. Y entonces todo lo que necesitas hacer es que vas a alargar un poco de interacción, y puedes ver que la saca de todos los puntos de interrupción de aquí al café Y ahora, si estamos echando un vistazo a esto, podemos ver nuestra página aquí. Hacemos clic en nuestro Enlace, y nos va a llevar a la cafetería. S solo asegúrate de agregar una miga de pan aquí para volver. Siempre se puede hacer eso después. Volvamos al diseño, Navegación. Aquí tenemos nuestra pequeña miga de pan. Vamos a agregar eso aquí. Nuevamente, si agregas un nuevo elemento, asegúrate de que lo dijiste para llenar el contenedor, y ahora podemos volver con un enlace a nuestra página principal. Recuerda, puedes cambiar cualquier texto, y así, tienes un sitio web de trabajo bastante agradable. 22. BIBLIOTECA: Personalización del color con variables: Personalizando tus colores. Entonces aprendamos un poco sobre cómo funcionan los colores en nuestra biblioteca y cómo podemos personalizarlos. Así que los colores en Figma generalmente se configuran en algo llamado variables Entonces en tu biblioteca, y de nuevo, esto podría verse un poco diferente una vez que lo mires. Esta es la primera versión. Sin embargo, la configuración debería ser bastante la misma. Por lo que encontrarás una visión general de tus colores. Entonces estos son los colores actuales de la marca que estoy usando en esta biblioteca, y encuentras una pequeña captura de pantalla, pero realmente no puedes cambiar nada ahí. Si seleccionas un color, por ejemplo, este rojo, entonces en tu menú de rellenos, puedes ver que esto es marca forward slash primary Así que aquí hay un pequeño clip para poder separar este color. Y esto va a ser una especie de color puro para que pueda ver el código hexadecimal. Pero solo volvamos porque lo que queremos es cada vez que usamos un color para cualquier cosa en nuestro diseño, queremos usar una variable. Entonces a través de este menú, haz clic en este pequeño icono, y luego podrás acceder a las variables que ya te configuré. Entonces, lo que es realmente importante si estás configurando algún elemento es que todo en este elemento esté configurado en una variable. No queremos ver ningún código hexadecimal en tu diseño final. Entonces, por ejemplo, echemos un vistazo a éste. Y así, si seleccionamos esto, una buena manera de ver si los atrapó a todos es en sus paneles de propiedad del lado derecho. Ve al fondo y ves algo llamado colores de selección, y luego deberías ver todo esto usando esta notación de variables. Entonces no quieres ver nada de eso, aunque sea solo el fondo. La forma en que puedes agregar colores es seleccionar los elementos, y luego en el menú de película, usas el pequeño ícono aquí, y luego vas a elegir esos. Entonces me gusta separarlo en colores de texto, luego colores de marca, y luego tener algunos neutros para cosas como fondo Pero hay formas muy diferentes en las que puedes configurarlo, así que siéntete libre de experimentar con tu propia configuración también. Siempre puedes cambiarlos. Entonces, por ejemplo, si estás seleccionando este texto aquí, entonces a través de este menú de películas, simplemente puedes hacer clic aquí, y luego podrías elegir cualquier otro color también. Ahora, el lugar donde viven esos colores y donde puedes editarlos y agregarlos y organizar todo eso está en el panel de variables. Así que haz clic en tu fondo de tu Canvas, y luego en el lado derecho, puedes ver algo llamado variables, y puedes abrir esta configuración. Si no ve los colores de inmediato, asegúrese de que a través del menú desplegable de la colección, elija los colores. Y aquí puedes ver todos los colores de la forma en que los configuré. De nuevo, puedes cambiar esos colores. Por ejemplo, eso es en realidad para nuestro primario, solo cambiarlo a un morado, y luego también podríamos agregar variables. Así que simplemente haz clic en el botón Plus. Se puede agregar otra variable de color. Así que podrías simplemente agregar cualquier variable a tu gusto, y luego eso va a aparecer en el menú. También podría notar que tengo un modo de luz y una configuración de modo oscuro. Para que puedas agregar modos haciendo clic en el botón pequeño más aquí. Entonces si volvemos a nuestro diseño, y ahora puedes ver que todo esto aquí cambió. Entonces todos mis botones que eran rojos, ahora la variable ha cambiado. Debido a que estoy usando la variable en todas partes, solo necesito cambiarla en este lugar. Entonces esta es mi única fuente de verdad. Ahora, también podemos ver el modo oscuro. Así que puedes seleccionar esto aquí por aquí o en realidad, vamos a seleccionar uno de ellos. Creo que lo mejor sería si solo sacaras una instancia. Entonces aquí tenemos una instancia. Y ahora lo que podemos hacer es por aquí, encuentras algún tipo de pequeño interruptor. Y si haces clic en ese interruptor, entonces ves tus diferentes variables, colecciones, y por ejemplo, aquí el color, y puedo cambiar esto a modo oscuro. Ahora, lo mejor es simplemente dejar todo en un modo predeterminado al primer modo de tu colección. Así que actualicemos esto y saltemos a nuestro diseño. Entonces, para poder ver el diseño ahora, da clic en el pequeño botón Biblioteca cuando veas esta pequeña burbuja aquí pidiéndote actualizar y luego publicar la nueva biblioteca con los cambios. Así que saltemos a nuestro diseño. Y luego necesitas volver hasta que veas la miniatura y el pequeño ícono aquí Da clic en él, y ya puedes aceptar las actualizaciones. Y ahora echa un vistazo a lo que está pasando con este botón, y ya puedes ver que ahora tenemos el nuevo color que cambiamos. Ahora, también puedes usar tu modo aquí, por lo que solo puedes seleccionar toda esta sección. Y luego por aquí, tienes el pequeño interruptor otra vez, y ahora puedes cambiar al modo oscuro. Y luego ves que todo cambia a modo oscuro. Observe cómo esto sigue en rojo porque nunca cambiamos el color realmente en nuestro modo oscuro. También puedes acceder a todos estos colores dentro de tu sitio. Entonces, por ejemplo, si estás seleccionando este texto y solo quieres hacer cambios aquí mismo, luego a través de tu menú de película, si haces clic en él, vas a ver que actualiza automáticamente todas tus variables de color, para que también puedas acceder a ellas justo dentro de aquí. 23. BIBLIOTECA: estilos de tipografía responsiva: Entonces echemos un vistazo también a nuestra tipografía y cómo podemos usar y personalizar Entonces nuevamente, primero entendamos cómo se configura esto. Como de costumbre, esta es la primera versión de esta biblioteca podría verse ligeramente diferente, pero generalmente va a usar algo llamado estilos y variables para esto. La configuración tipográfica es, en general, un poco más compleja Te recomiendo que si necesitas este set te apegues un poco a la configuración que te di. Te voy a dar una visión general rápida. Pero de nuevo, si eres principiante total en Figma, esto podría ser un poco desafiante, pero solo quédate conmigo. Entonces lo que hice aquí, y esto es algo que me gusta montar. Esto no es nada que viene con Figma es solo una visión general de su diseño Entonces, en general, nombro los estilos. Entonces tengo display, titular L, M, y así sucesivamente, y luego tengo algún cuerpo y botones. Y nuevamente, puedes personalizarlo absolutamente a tu gusto. Puedes llevarte cosas , agregar cosas tal como las necesites para tu diseño. Ahora lo que ves aquí, esta es una vista previa, y esta vista previa en realidad está usando algo llamado estilo. Entonces si selecciono esto, entonces puedes ver por aquí en la tipografía que esto no se llama display Y aquí se puede ver igual que con las variables de color antes, se pueden ver los diferentes estilos de texto. Ahora bien, si haces clic en el fondo de Canvas y ves una vista previa de tus estilos por aquí, y por ejemplo, en el display uno que acabo de mostrarte, podemos abrir esto, y luego podemos alterar los ajustes. También puedo ver que algunas cosas, me gusta usar hit de línea así porque personalmente me gusta usar un porcentaje aquí, pero puedes ver que algunas cosas se usan como variable. Entonces si está en esta cajita aquí o esta de aquí solo dice fuente, entonces esa es una variable. También tenemos una colección que ponemos en estos textiles. Nuevamente, esto no es nada que tengas que hacer. Literalmente podrías simplemente sacar este y simplemente escribir un 80 aquí y tendrías el mismo resultado. Entonces, si eres principiante, tal vez quieras hacer esto. Solo estoy usando un poco más de una manera sofisticada, lo que significa que si voy directo al final de esta línea, veo un pequeño símbolo variable, y ahora elijo el tamaño de mi configuración variable. Entonces echemos un vistazo a cómo se ve eso. Y nuevamente, si eres principiante, tal vez solo quieras configurar todo esto a mano y saltarte este. Entonces tenemos nuestra colección, vamos a tipografía. Y aquí se puede ver lo que hice es, tenemos la fuente, así que estoy usando pop ins aquí. Entonces, digamos que quieres cambiar la fuente en todo tu documento, y extrae Google Fonts automáticamente. Simplemente puedes ir a Google Fonts, el sitio web, y luego puedes ver todas las diferentes fuentes. Entonces puedes entonces simplemente escribir el nombre aquí. Digamos que quiero cambiar todo esto al Inter, entonces solo tendría que poner eso aquí, y luego todas mis fuentes cambiarían a Inter. Así que no tengo que ir uno por uno. Entonces esto es súper, súper práctico. Ahora aquí puedes ver los diferentes tamaños. Entonces esto es display on desktop, luego titular L en desktop, y puedes ver que puedo cambiarlos individualmente para los diferentes modos. En este caso, esto es de escritorio, tableta y móvil que estoy usando. Sólo para verlo, hagamos esto ridículamente grande. Agreguemos esto como un 100 para que podamos ver que funciona. Entonces todo lo que necesito hacer necesito cambiar esto aquí. Y esto es ahora, como pueden ver, esto es realmente grande ahora, y esto es Internw Así que en realidad no se puede ver aquí, pero si yo separara esto y yo también separaría esta fuente aquí, entonces ya se puede ver que este es ahora No obstante, queremos mantener esto intacto. Para que veas que todo lo que tengo que hacer es esto, y ahora esto va a reflejarse en todos mis diseños. Así que puedes ver aquí tenemos un titular muy, muy grande de repente. Y ahora, la forma en que usamos esto aquí es tal y como te mostré antes con la vista previa. Entonces, por ejemplo, éste, se puede ver que en tipografía, estoy usando display Si quisiera otro, sólo podría elegir otro titular de aquí. Y esto es jalar en los estilos. Entonces siempre tratarás con los estilos, y luego los estilos están tirando de las variables. Entonces ahora nos estamos volviendo un poco más complicados porque lo que está pasando aquí es que siempre usamos nuestro estilo general, y entonces el estilo sabe, solo recordemos, el estilo sabe qué modo. Entonces este es el valor predeterminado, por lo que siempre operamos en un escritorio. Entonces de alguna manera, si vamos aquí en nuestra tableta, tenemos que decirle a este estilo que ahora es una tableta. Entonces lo que pasa es que seleccionamos este el pequeño interruptor que tenemos por aquí, vas a la tipografía También inventé uno para espaciado, pero ahora nos interesa la tipografía y hay que decirle que sea una tableta porque por defecto, qué pasaría, se vería así Y así sólo vamos a decírselo por favor use el modo tablet. Entonces todo el modo de tableta tipografía para esto. Y entonces puedes ver lo mismo aquí para el móvil. Si seleccionamos esto, podrás ver que todo está configurado para móviles. Así que de nuevo, si necesitas fabricar esto podría ser un poco abrumador Así que recomendaría apegarse a mi configuración por ahora. Si quieres sumergirte más profundo aquí, te recomiendo que realmente, realmente te familiarices con los estilos topográficos y variables primero Si estás familiarizado con FIGMA entonces esto tendrá mucho sentido para usted Ahora bien, si queremos usar esto en nuestro diseño, lo habitual, solo necesitamos actualizar nuestra biblioteca. Entonces publiquemos todos estos cambios. Ahora, saltemos a nuestro diseño y actualicemos nuestra biblioteca y ahora echemos un vistazo. Esto debería llegar a ser bastante grande. Y también, vamos a ver al Inter en lugar de aparecer pop ins aquí. Y debido a que todo ya está horneado en los componentes, no hace falta cambiar mucho aquí. Entonces puedes ver esto automáticamente va a recoger esto, pero lo vas a ver aquí abajo en apariencia, que esto está usando tablet y que esto, por ejemplo, está usando móvil. Una última cosita que podría haber olvidado señalar. Así que acabo de volver aquí en mi configuración original es si quieres agregar un estilo, así que vimos cómo agregar variables. Así que vamos a recordarnos nosotros mismos si quieres otra variable, solo tienes que hacer clic en el botón Más, y esta vez no usas color, solo agregas otra variable de número, y luego solo podrías definirla a tu gusto. Y si quieres agregar otro estilo, entonces lo que podrías hacer es definirlo aquí, así puedes hacer clic en Plus y simplemente agregar un estilo de texto. Y luego obtienes esta ventana y puedes simplemente configurarla. Pero en realidad me resulta más fácil crear mi propio estilo. Digamos que quiero otro titular. Saco esto, lo separo, y luego configuraría esto completamente a mi gusto. Solo vamos a agregar cualquier cosa como algo así como al azar que nos gustaría. Entonces despegaría todo, y luego configuraría esto de la manera que quisiera Y una vez que esté listo con esto, iría por aquí en mi panel de tipografía y luego lo agregaría desde Entonces voy a estilos, y luego creo estos nuevos estilos. Y entonces lo encontrarás si haces clic en el fondo, dentro de aquí, dentro de tus estilos. Y entonces crearía otro campo y documentaría esto en mi visión general. Por lo que este panorama no es nada obligatorio. Esto es realmente algo para que te recuerdes cómo está funcionando todo esto. 24. BIBLIOTECA: bloques de componentes responsivos: Déjame mostrarte cómo crear componentes para usarlos en sitios figma, ya sea para extender una biblioteca existente o para configurar la tuya propia Pequeña nota al margen antes de sumergirnos. Si quieres construir tus propias bibliotecas, entonces realmente necesitas entender las características de Figmas, así no puedes salirte con la tuya con solo adivinar y probar Si quieres hacer esto, necesitas entender variables, estilos tipográficos y variables, componentes, propiedades de componentes y muy importante diseño automático de Figma. Así que sigue. Aún podría darte una buena visión general si conoces los conceptos básicos de Figma. Pero si te tomas en serio esto, entonces por favor asegúrate saltar a un curso sólido para principiantes y de que realmente entiendas esos principios hasta la médula. Así que agreguemos un componente a nuestra biblioteca para entender cómo funciona todo esto en segundo plano y todos los ajustes a su alrededor. Entonces, al configurar componentes, entonces también necesitamos algunos bloques de construcción que los alimenten. Entonces ya configuré mis colores en variables, y tengo mis estilos tipográficos Vamos a recordarnos a nosotros mismos. Aquí puedes ver los diferentes estilos de tipografía. Y luego si nos registramos en variables, tenemos diferentes colecciones. Entonces voy a usar estos estilos de color en mi componente, que voy a crear. Tengo una colección adicional que hice. Esto no es necesario, pero es bastante práctico e incluso puedes hacerte más sofisticado en este caso. Entonces, por ejemplo, tengo que el tamaño de pantalla como variable, así que esto es un escritorio, tableta y móvil, y luego tengo algún relleno que cambiaría en consecuencia. Nuevamente, puedes configurarlo absolutamente a tu gusto. Y recuerda, también tengo mis tamaños tipográficos configurados de tal manera que esto automáticamente tira los diferentes tamaños para los diferentes puntos Entonces en nuestro componente, esto se está uniendo ahora. Entonces voy a agregar una galería, y voy a colocar esto en mi sección de grupo de tarjetas. Entonces, lo que realmente hacen las secciones es que tienes diferentes formas mantener las cosas organizadas. Entonces, por un lado, en el archivo, tenemos nuestras páginas. Entonces tenemos nuestros bloques de construcción. Déjame darte esa visión general. Entonces esta es esta página, y tenemos nuestros wireframes y nuestros diseños. Entonces así es como configuré esto. Podrías configurar esto de manera completamente diferente. Y luego en mis diferentes páginas, utilizo secciones. Entonces encuentras secciones aquí abajo. Tienes marcos o tienes secciones. También puedes usar el atajo Shift S. Siempre que coloques algo en una página diferente o sección diferente, echemos un vistazo aquí en nuestra biblioteca, puedes ver que esta es la biblioteca. Entonces primero, vemos las diferentes páginas. Y entonces si saltamos a los bloques de construcción, déjame recordarte, esta sería esta página de aquí. Después en el interior, podemos ver las diferentes secciones que creamos. Entonces aquí tenemos los grupos de tarjetas, que es donde vamos a agregar nuestro nuevo componente, por lo que debería aparecer aquí. Esto es realmente genial porque lo también significa es que simplemente puedes arrastrar componentes de una sección a otra para mantener todo reorganizado o renombrado Entonces, por ahora, vamos a acercarnos a éste y agreguemos nuestro propio componente. Entonces lo que voy a hacer primero, voy a presionar F, y voy a dibujar un frame. Y ahora quiero que este tamaño de marco sea el tamaño de mi escritorio. Y ya configuré una variable para ello. También podría simplemente escribir esto a mano, pero tengo una variable, así que solo voy a ir aquí dimensiones, y ya ves el tamaño de la pantalla, y voy a usar esta. Voy a añadir un titular. Voy a presionar T para escribir algo y sólo voy a nombrar este titular. Y entonces voy a mantener esto bastante sencillo. Así que solo voy a tener un rectángulo, y solo voy a crear algunos rectángulos aquí Y luego luego quiero que una especie de simplemente se muevan literalmente como una pequeña galería en movimiento a través de esto. Hagámoslos un poco más grandes. Y vamos a agregar esto aquí. Así que estoy manteniendo esto bastante simple. Y también puedes investigar todos los otros ejemplos que agregué aquí. Por ejemplo, aquí puedes ver que esto es como cartas anidadas, así puedes saltar aquí y puedes ver dónde se construyó originalmente esta carta Así que realmente puedes anidar e ir muy sofisticado. Pero solo voy a mostrarte una configuración simple y luego podrás tomarla a partir de ahí y explorarla más a fondo. Vamos a nombrar esta, y yo solo voy a nombrar esta galería, y ahora voy a agregar algo de diseño automático. Y nuevamente, ya no podrá sortear el diseño automático si desea configurar sus propios componentes. Entonces antes que nada, voy a anidar estos. Voy a seleccionarlos a todos. Y se puede ver que no tengo ajustes de diseño automático. Voy a usar el atajo para crear un marco alrededor de él, que es Shift A. Crea un marco de diseño automático a su alrededor, que puedes ver aquí. Voy a nombrar las tarjetas. Y ahora podemos ver los ajustes por aquí. Esto es horizontal. Tenemos una brecha. Vamos a hacer de esto un múltiplo de ocho, en realidad tal vez un poco más grande. Y luego también vamos a agregar algo de relleno a la izquierda y a la derecha. Entonces, en realidad, si tenemos vamos a mantenerlo en los 40 aquí por ahora, y luego vamos a tener un 20 por aquí, y entonces eso debería hacer el truco. Ahora vamos a agregar diseño automático para todo esto. Entonces creo que puedo salirme con la suya con solo agregársela al padre. Vamos a ver. Y aquí están los marcos. Ya veo el menú, y ahora todo lo que voy a hacer es que voy a centrar todo esto. Así que vamos a asegurarnos de que todo esto esté centrado. Bien, genial. Podríamos ajustar la brecha y todo, pero sólo voy a dejarlo así por ahora. Y luego voy a sacar una copia, y ahora quiero que este sea el escritorio. Y ahora, recuerden, trabajé de tal manera que tengo variables para el espaciado. De lo contrario, puedes hacerlo a mano. Entonces tengo escritorio, tengo tablet, así que solo puedo usar las de aquí. No he usado estas variables de espaciado. Y luego con la tipografía, es lo mismo. Entonces tengo que asegurarme, antes que nada, de que estoy configurando todo con variables. Solo voy a comprobar esto de vez en cuando deberías sacar el tamaño de tipografía correcto Y cualquier cambio. Así que antes que nada, solo para mostrarte por aquí, estoy usando estos padding, así que estoy teniendo padding izquierda y derecha, así que eso se adaptaría. Realmente no lo necesito en esta configuración, pero todavía lo tengo en segundo plano por si lo necesito. Entonces lo que aún no hice es no verifiqué que todo esté configurado con estrellas y variables. Entonces el titular, automáticamente me dio un titular L, así que está bien. Y ahora solo necesito asegurarme de que mis colores que mis colores también sean variables. Entonces aquí sólo voy a tomar esto del fondo. Creo que este debería ser éste que no necesito. Esta, voy a convertirme en imágenes en un segundo. Entonces este es un color de texto. También podrías simplemente elegirlo de aquí. Entonces ves que es un color de texto. E incluso el fondo es muy importante que tu color de fondo, que este también esté configurado en variables de color. Entonces en realidad, sólo voy a borrar esto, y luego lo tengo aquí. Para tener una copia, y siempre puedes comprobar que todos tus colores de selección son variables. Y me olvidé de mis pequeñas imágenes otra vez, así que volvamos aquí otra vez. Y ahora lo que voy a hacer es que voy a configurar esto como relleno de imagen. Entonces tengo esto fuera del camino, y cualquiera que consuma este componente más adelante sabe que este es el lugar donde espero que agreguen imágenes. Bien, entonces ahora deberíamos estar bien. Ahora, todo lo que tenemos que hacer tenemos apariencia por aquí, y como estamos usando todo con variables, ya es que toda la información ya está almacenada en esas diferentes colecciones. Entonces ahora estoy haciendo espaciado y voy a tablet, y luego también quiero el color que no cambie. Y luego la tipografía, también quiero que esta sea la tableta, así se puede ver que esto se está Y ahora podemos hacer lo mismo por nuestro móvil. Así que ya ves, los tengo abiertos, y me voy a móvil, y me voy a móvil. No lo necesitas en tu escritorio porque es el primer modo. A veces me gusta bastante agregarlo solo para que todo esté configurado de la misma manera, pero como es el modo predeterminado, normalmente no lo necesitas. Y entonces lo que podemos hacer ahora, ahora podemos seleccionar todos estos. Y luego con un clic, voy con un pequeño desplegable, crear conjunto de componentes Me gusta bastante hacer este contorno un poco más grueso, así que es visible, y luego normalmente solo lo amplifico un poco solo para mi mejor visión general Bien, así que saquemos uno. En realidad, saquemos a esos dos, y luego podemos ver que simplemente se comporta de la manera que espero que lo haga Ahora se puede ver que todavía tengo un error. Entonces lo que tengo que hacer es que tengo que nombrarlos. Y recuerda, nuestro naming es de escritorio, móvil y de escritorio, tablet y móvil Así que vamos a seleccionar esto, y sólo voy a renombrar a todos ellos. Y luego también puedo seleccionar todo el grupo, y puedo nombrar a este punto de interrupción. Bien, genial. Tablet, escritorio, y luego deberías ver en el desplegable nuestro móvil fantástico. Ahora, puedo agregar una cosita, y nuevamente, esto es un poco más avanzado, pero es bastante útil porque en apariencia, se puede agregar una propiedad de componente. Y así se puede hacer clic más aquí, y luego sólo puedo decir mostrar titular, crear la propiedad. Voy a agregar esto aquí también. Entonces solo voy a seleccionarlo , y luego debería verlo. Puedo seleccionarlo desde aquí porque estoy en el mismo conjunto de componentes. Y ahora si estoy seleccionando esto, puedes ver por aquí más adelante, solo podemos elegir si queremos este componente con o sin titular. Así que esto es muy agradable después cuando lo estamos consumiendo. Bien, así que hasta ahora se ve bien. Vamos a probarlo. Entonces lo que vamos a hacer es que queremos publicar esta biblioteca. Entonces vamos a actualizarlo. Vamos a saltar a nuestro archivo de diseño y luego vamos a actualizar. Vamos a recibir esas actualizaciones. Bien, genial. Entonces ahora si saltamos a la sección en la que la colocamos, que era grupos de cartas, deberíamos ver nuestra galería, y puedes ver que está aquí mismo. Y ahora podemos simplemente arrastrar esto, y ahora debería poblar todos los diferentes puntos de interrupción directamente Echemos un vistazo, y eso funciona muy bien. Entonces esto sólo funciona porque usamos la convención de nomenclatura de escritorio, tableta y móvil, así que sabe qué hacer con ella. Bien, genial. Entonces, lo que tenemos que hacer ahora, vamos a previsualizar esto, y luego podemos ver que probablemente necesitamos algunas configuraciones de diseño automático porque no se transfieren automáticamente. Entonces todo dentro, se mantiene, pero hay que decirle cómo este bloque debe sentarse dentro de aquí. Entonces hacemos nuestro habitual, seleccionamos nuestro par y marco. Eso ya está configurado para un diseño automático vertical. Después seleccionamos este marco que acabamos de agregar y solo nos aseguramos de que este esté configurado para llenar el contenedor. Entonces echemos un vistazo a cómo se ve esto ahora. Y si, eso se ve genial. Ese es el tipo de efecto que queremos. Ahora, queremos que esto esté rotando, y ahora mismo solo podemos hacer esto en el sitio figma, así que no podemos agregar esto a nuestra biblioteca Entonces necesitamos agarrar el elemento aquí y luego saltar a las interacciones, agregar una interacción y agregar una interacción de marquesina Se puede ver que este es el tipo de cosas que queremos. Podrías cambiar eso, así que la velocidad, la dirección , y todo, sólo voy a dejarlo como está por ahora. Entonces ahora echemos un vistazo. Ese es el lado equivocado. Seleccionemos este lado aquí. Juega, y eso se ve maravilloso. Y lo importante, en realidad, es que tenemos un poco de relleno a izquierda y derecha. De lo contrario, se quedarían unidos. Déjame mostrarte esto. Entonces lo que hicimos aquí, si seleccionas esto, entonces puedes ver que tenemos relleno a la izquierda y a la derecha de esto. De lo contrario, se mantienen unidos, así que solo ten en cuenta eso. Bien, así que vamos a agregar algunas imágenes. Sólo voy a acelerar esto para ti en el fondo. Y así vamos a echar un vistazo. Eso se ve genial. Asegurémonos de que nuestro cambio de tamaño funcione. Pero en realidad, me está dando este salto raro otra vez. Entonces, a veces cuando agregas una animación eso sucede, así que solo necesitas volver a entrar y solo asegurarte de que esto esté configurado para llenar el contenedor o cualquier manera, en realidad quieres que esto funcione. Así que intentemos de nuevo. Y ahora estamos teniendo un comportamiento muy agradable, así que también puedes usar tus presets aquí arriba Se quiere cambiar cualquier cosa sobre este componente. Entonces, por ejemplo, digamos que quieres tener todos estos aquí en realidad con, como, esquinas redondeadas. Seleccionemos todos ellos. Pequeño atajo golpeó Enter, y luego estás obteniendo todos los elementos secundarios, y luego solo estamos agregando un poco de esquinas redondas. Y luego vamos a actualizar. Por cierto, una pequeña nota al margen. Si estás usando elementos anidados, aquí lo tenemos todo en un elemento Pero aquí, por ejemplo, donde tenemos una carta anidada, saltemos a esta carta Si pones un poco bajo trazo en la nomenclatura, entonces no va a actualizar la biblioteca porque solo queremos dar más adelante los componentes completos de nuestra biblioteca. Entonces esta es una manera de ocultar esas pequeñas notas al margen. Entonces publiquemos esto y luego una vez que esto se actualice, también tenemos que saltar de nuevo. Asegurémonos de que esto esté realmente actualizado, publique. Sí. Vamos a asegurarnos de que saltemos por aquí, y ahora tenemos que volver hasta que veamos nuestra miniatura y vamos a recibir esto y ahora echar un vistazo a recibir esto y ahora echar un vistazo lo que sucede con las esquinas Así que actualice todo, y se puede ver esto recibe directamente la actualización. 25. Aprende más sobre Figma: Ahora durante este curso, quiero referirme a muchas características de FIGMA como componentes, también layout y variables Si usas T FIGMA, entonces esto será todo muy natural para ti Sin embargo, si eres nuevo en FIGMA, entonces esto podría ser un poco abrumador No voy a cubrir estos conceptos en este curso. Sin embargo, con tu membresía de Skillshare, puedes saltar a mi curso de principiantes de Figma. En Proyectos y recursos, agregué un enlace directo. Simplemente puedes hacer clic en eso. Esto te llevará directamente a este curso. El curso dura 4 horas y comienza con todos los conceptos básicos por los que podrías o no querer pasar. Si solo quieres indagarte en ciertos conceptos como componentes o variables, por ejemplo, la diferencia entre variables y estilos, algo muy importante para la tipografía, entonces puedes simplemente saltar a estas secciones y explicar todo eso desde el principio También o a maquetación, como puedes ver aquí. Si quieres hacer un extra, entonces puedes encontrar más cosas en este curso, como cómo hacer prototipos con FIGMA, cómo colaborar e incluso hay un proyecto de curso para tu portafolio. Este también es de lejos, mi curso más popular sobre Skillshare, y como puedes ver, en las reseñas, la gente ha estado muy contenta con ello Así que entra y aprende más sobre Figma.