Diseño web en Figma: desarrolla como un desarrollador y genera código con IA

1. INTRODUCCIÓN: Hola y bienvenidos a esta clase sobre Figma Web Design para desarrolladores web. Soy Christopher Dodd Soy desarrollador web freelance y top teacher aquí en skillshare.com, cubriendo todas las cosas, desarrollo web y freelance online En la clase de hoy, vamos a acercarnos a Figma no como lo hacen los diseñadores tradicionales, sino desde la perspectiva de los desarrolladores web Si eres un desarrollador que quiere aprender diseño, pero también se preocupa por la estructura limpia, respuesta y poder generar código utilizable, esta clase es para ti Cubriremos los conceptos básicos de trabajar con Figma cómo configurar diseños receptivos usando componentes de diseño automático y nombres de capas adecuados Luego lo llevaremos un paso más allá, usando herramientas impulsadas por IA como Locofy y Cursor para convertir nuestros diseños directamente en código Al final de esta clase, no solo te sentirás cómodo creando diseños Figma, sino que también tendrás un flujo de trabajo que cierra la brecha entre el diseño y el desarrollo, convirtiéndote en un desarrollador web más eficiente y versátil Entonces, si estás listo para aprender a construir diseños como un desarrollador Figma, haz clic en el siguiente video, y te veré por dentro 2. Demostración: Bien, así que aquí tengo la versión web del programa Figma. Figma es un programa que puedes ejecutar en tu computadora, o puedes ejecutarlo directamente en tu navegador Actualmente estoy en Google Chrome, y esta es la versión web. Pero más adelante en la clase, vamos a descargar el programa de escritorio porque vamos a usar el servidor MCP En el siguiente video, te mostraré los conceptos básicos de FGMA y te llevaré un poco mejor a través del programa Primero, quiero comenzar la clase con una demostración, que demuestre la premisa de toda esta clase. ¿Bien? Entonces aquí mismo, tenemos un diseño para sitio web de comercio electrónico. Se llama Dog Box. Encontré esto a través de una publicación de trabajo en Upwork. Entonces, como puedes ver aquí, es una especie de caja de suscripción para perros. Se ve bastante genial. Echamos un vistazo al archivo Figma. Incluso si no has usado Figma antes, quiero que hagas clic en este marco o me veas hacer clic en este marco y luego echar un vistazo aquí en el panel de capas Aquí puedes ver un montón de grupos con números aleatorios después de ellos. Y luego dentro de estos grupos, tenemos otros grupos con números aleatorios debajo de él, y tenemos diferentes marcos, vectores, todo tipo de cosas. Es un desastre gigante, ¿de acuerdo? Ahora, de los diseñadores configurarán sus diseños así porque visualmente se ve genial. Y mientras se vea visualmente genial y puedan exhibir ese diseño a la gente, no necesariamente es necesario configurarlo para que tenga sentido mirarlo en el panel de capas. Pero la razón por la que vamos a hacerlo manera diferente en esta clase es doble Número uno, en realidad no podemos cambiar el tamaño de esto como lo haríamos con una página web real, como puedes ver aquí, parte de ella es un poco receptiva, pero no realmente Realmente me descompone ya que estamos expandiendo y contratando el no es un gran negocio porque este es un programa de diseño. En realidad no es un programa de desarrollo web. La razón más importante por la que propongo que configuremos nuestros archivos Figma de manera diferente es para que podamos generar automáticamente nuestro código usando IA de manera más precisa y confiable Entonces solo para darle un poco más de mirada a este diseño aquí, como pueden ver, si simplemente hago clic en cualquier parte de esta sección, tenemos un grupo gigante que se extiende fuera del marco. Tenemos otro grupo que se extiende fuera del marco aquí. Esta parece tener bastante buena anidación. Al igual que, lo que quiero decir con eso es que los elementos que están visualmente dentro del grupo en realidad están anidados dentro de la capa Es una buena idea, como puedes ver aquí. Pero no hay etiquetado y no hay uso o muy poco uso del diseño automático. ¿Bien? Entonces ahora déjame mostrarte lo contrario. Déjame mostrarte la versión refractada que creé. No es exactamente lo mismo, pero en realidad está configurado con etiquetado adecuado de las secciones. Se descompone en sus secciones individuales que se apilan una encima de la otra. Si el diseño automático se usa en todas partes, tiene sentido. Entonces aquí puedes ver el encabezado justo aquí dentro del encabezado, tenemos el lado izquierdo del encabezado, el menú del encabezado, y el lado derecho, y luego tenemos las diferentes cosas anidadas dentro de ahí Y lo que también puedes ver es este icono aquí, que indica el diseño automático. Ahora, no voy a entrar en el diseño automático y todas las cosas diferentes sobre Figma. Ese es el tema de la clase en el que nos vamos a meter. Pero como puedes ver aquí, esto tiene mucha más estructura en las capas que, digamos, por aquí, el diseño original. Y si cambio el tamaño de alguna de estas secciones, verás que termina siendo mucho más receptiva porque está usando el diseño automático, que es esencialmente equivalente a Flexbox en CSS Aunque aquí hay una opción para grid, que es casi como el equivalente a grid. Ahora, como se mencionó anteriormente, la versión refractada, si configuro todas las capas para usar una estructura contenedor responsiva adecuada usando componentes, que aprenderemos un poco más adelante Entonces los elementos que se duplican varias veces, esos son esencialmente componentes. Si anido correctamente y uso el diseño automático, entonces deberíamos obtener un resultado mucho mejor las herramientas de IA como, como puedes ver por aquí, Locifi ¿Bien? Entonces me he dado cuenta de que obtenemos resultados muy inconsistentes cada vez que pasamos por Locifi Entonces te voy a mostrar una solución diferente más adelante en la clase que creo que funciona mejor. Pero por ahora, echemos un vistazo a los resultados de una prueba anterior que ejecuté usando Locifi Entonces, si cambiamos a este gráfico aquí, pueden ver los resultados de una prueba previa que hice con este diseño de caja para perros. Entonces, si repasamos y echamos un vistazo al diseño original, obviamente, esto queda genial. Ese es el diseño original. Se ve genial con infigma. Acabo de copiar y pegar la mirada directamente en este gráfico Entonces creé una página web generada por IA de este diseño Figma usando Locifi y este es el resultado Entonces, como pueden ver, realmente comienza a romperse en las cartas. Puedes ver aquí que simplemente lo estropeó por completo y las cartas aquí también Y ciertas partes se puso bien, pero sí, no el mejor resultado. Refactorizamos la página web, y luego la ejecuté a través de Loci Obtuve un resultado mucho mejor, sobre todo en las cartas. Obviamente, esta no es perfecta Eva, pero en cuanto al HTML de salida que obtuve, fue mucho mejor. Y mientras tengamos HTML sólido con el que trabajar, hacer pequeñas actualizaciones en CSS no está tan mal. Pero si el programa de IA obtiene el HTML completamente equivocado, eso básicamente crea un proyecto que tengo que refactorizar completamente de todos modos, así que bien podría no haber usado IA para comenzar Esta es la inspiración para la clase, presentando una forma de crear nuestros diseños Figma como un desarrollador web con estructura adecuada para que sea receptivo, más fácil de navegar dentro del propio programa FigMA y más traducible a y más traducible código real usando generadores de código AI como Locifi AI, que veremos un poco Por ahora, demos un paso atrás y veamos los conceptos básicos de cómo usar realmente FigMA. 3. Conceptos básicos de Figma: Bien, así que ahora puedes ver que estamos de vuelta dentro de Figma, pero tenemos un diseño completamente en blanco Ni siquiera tiene nombre todavía. Así que vamos a hacer clic en Sin título y darle un nombre, digamos, probar el diseño, como quieras llamarlo Y sin entrar en el extremo detalle de todo Figma, solo quiero cubrir aquí lo básico absoluto En realidad es un programa bastante simple. Una vez que salga adelante con algunas características clave, y para las funciones más avanzadas, hay muchos otros tutoriales en línea. Es fácil recoger esas habilidades avanzadas un poco más tarde. Pero básicamente, lo que tenemos aquí es que tenemos nuestro Figma fiile aquí, y podemos crear múltiples páginas aquí mismo No podemos ver ninguna diferencia, pero si tuviera que dibujar un rectángulo en la página uno, cambiar a la página dos. No podemos ver ese rectángulo en ningún lado, incluso si nos alejamos al 50% o lo acercamos, verás que está en una página diferente Bien bastante autoexplicativo, pero normalmente los diseñadores web no separan las páginas web en diferentes páginas dentro de Figma. Normalmente lo ponen todo en una página aquí para que pueda ver, supongo, la consistencia del diseño a través de varias páginas. Entonces, en lugar de diseñar una página, lo que suelen hacer los diseñadores es comenzar con un marco. Así que si hago clic en este botón aquí abajo para marco podemos ver aquí que ya tenemos algunos marcos predefinidos para escritorio si estamos buscando hacer escritorio. Así que vamos a hacer escritorio. Voy a simplemente hacer clic en escritorio aquí, y nos va a dar un marco 14 40 por 1024. Ese es el marco estándar que Figma ha decidido para nosotros en escritorio Y luego normalmente verás un marco móvil junto a él. Entonces, si pasamos al teléfono, y el tamaño típico que veo más a menudo es 390, puedes poner una pantalla 390 por aquí. Entonces puedes diseñar tu diseño móvil aquí y tu diseño de escritorio aquí. Bien, entonces me voy a deshacer del marco móvil. Realmente no necesitamos esa multa. Vamos a centrarnos en el cuadro único. El marco es el padre de todo. En realidad, eso no es necesariamente cierto. Podemos crear una sección, y eso es algo que nos permite básicamente agrupar ciertos marcos. Pero otra vez, si utilizo ese ejemplo de crear un marco para el diseño del iPhone aquí, tal vez podríamos decir que esta es la página principal, poner la descripción de qué página es como la sección, y entonces podemos tener nuestros diferentes marcos aquí basados en el ancho de pantalla de esa página, ¿bien? A lo mejor sólo dejo eso ahí dentro. Entonces, ¿con qué más tenemos que trabajar? Entonces tenemos formas aquí abajo que podemos agregar, si queremos agregar ciertas formas, supongo, podemos dibujar esas formas. Entonces estas son buenas herramientas de diseño si eres un poco diseñador gráfico y quieres crear íconos y esas cosas. Obviamente, nuestro sitio web probablemente va a tener texto. Entonces podríamos poner aquí algún texto. Así que a la derecha, pueden ver, tenemos un montón de ajustes, y si me desplazo hacia abajo, podemos ver la tipografía Entonces voy a aumentar el tamaño de fuente de este texto, y luego voy a escribir, no lo sé. Digamos que se dirige, ¿verdad? Ahora, un diseñador normalmente solo pondrá eso en el medio usando estas líneas de guía, como puedes ver aquí. Y como tenemos un lienzo fijo aquí mismo, podemos dar fe de que esto siempre va a estar en el medio Podríamos traer algunas imágenes. Por lo general, es posible que veas un banner de imagen de fondo en un sitio web, así que vamos a traer una imagen. Como pueden ver aquí, aquí tengo una carpeta que vamos a usar un poco más tarde. Vamos a configurarlo de la manera que te recomiendo. Pero por ahora, solo echemos la imagen y la colocaremos y simplemente haga clic en arrastrarla, ya sabe, nosotros mismos para llenar el espacio del contenedor. Básicamente cómo funciona con el orden visual es que la imagen del héroe se va a mostrar encima del encabezado porque está por encima del encabezado en el panel de capas. Así que solo tenemos que cambiarlos por ahí y verás que el rumbo viene a través. Podríamos querer cambiar el color de esa partida, obviamente, porque está sentada sobre un fondo un poco oscuro, así podríamos hacer click aquí, darle a eso un fondo blanco, hacerlo más grande. Nuevamente, posicione eso, asegúrese de que esté en la posición ahí. Vamos a escribir algo un poco más realista. La ropa deportiva líder. Puedes ver aquí cuando no estamos usando diseños flexionados, estamos teniendo que cambiar el tamaño de esto y decidir dónde queremos nuestros saltos de línea Voy a establecer la alineación para que quede en el medio, y pongámoslo así. Nuevamente, vamos a hacer este diseño correctamente más tarde. Sólo te estoy enseñando los fundamentos absolutos. Podemos traer una imagen, podemos traer texto. Y, por supuesto, voy a usar mucho uso del auto-layout en este curso Pero como mencioné antes, mayoría de los diseñadores no usan un montón de ella. Hay una zona en la que la usan mucho, y es para botones. Y así usaré el botón para demostrarlo. Entonces vamos a teclear botón aquí. Y si quisiéramos darle un color de fondo a este botón, podríamos tener la tentación de poner un rectángulo aquí Ahora, obviamente, tenemos que cambiar el posicionamiento vertical aquí, y luego tenemos que hacer que se asiente en el medio. ¿Bien? Ahí vamos. Ahora bien, para que esto parezca más un botón, podemos darle a esto más de un radio de esquina, r. Pero el problema con esto es que si cambiamos el texto del botón así, verás que estos son dos elementos diferentes que no están vinculados, y va fuera de los límites de este rectángulo Entonces entonces tendríamos que ya sabes, cambiar el tamaño de esto otra vez y luego posicionarlo así ¿Bien? Así que la mayoría de los diseñadores que encuentro usan auto-layout con botones. Este concepto se aplica en cualquier lugar dentro de tu diseño Figma, pero por alguna razón, solo se usa realmente en botones Y así en vez de poner este rectángulo aquí como un elemento separado, lo que podemos hacer es agregarle auto-layout a Podemos agregar auto-layout. De varias maneras diferentes, podemos hacer clic derecho sobre él y hacer clic en Agregar diseño automático O podemos usar este atajo de teclado. Me gusta usar el atajo de teclado, así que voy a presionar Mayús A, y ahora si miramos por aquí, va a estar anidado dentro de este marco Entonces voy a renombrar este botón de marco porque me gusta usar el naming adecuado Y luego si hacemos clic en ese auto-layout, que es padre al texto, puedo agregar un relleno a este auto-layout Entonces bajaremos aquí y lo haremos, digamos, rojo. Bien. Ahora, debido a que este es un elemento de auto-layout, si hago que el texto del botón sea más grande, verás que el cuadro se expande para cubrir el fondo Entonces, claro, puedo volver a agregar ese cuarto de radio. ¿Qué tenía cinco píxeles?, y puedo aumentar el relleno aquí mismo también. Entonces ese no es un color realmente realista. Déjame cambiar ese color para que hagamos, tal vez como un gris aquí. ¿Bien? Y luego este texto, si realmente quiero cambiar el texto, necesito hacer clic en el texto mismo, y luego vamos a hacerlo 36. Y entonces lo que puedo hacer es agarrar el elemento de botón auto dispuesto aquí, y luego podría colocarlo aquí, ¿verdad? Para el diseño móvil, puedo hacer algo parecido. Puedo traer imagen de héroe para móvil, y luego solo puedo arrastrar manualmente. Aquí, obviamente, las dimensiones no se alinean. Entonces lo que podría hacer es que podría hacer doble clic en esto y configurar esto para recortar. Entonces solo puedo recortar hasta los límites de mi diseño móvil, lo que haré ahora mismo. Y luego solo copiemos y peguemos este texto por aquí. Obviamente, mi anidación está fuera de control aquí. Tengo el texto y la imagen sentados sobre el marco, en realidad no en él. Así que en realidad podemos salirnos con la suya con esa Figma. Obviamente, no lo estoy recomendando en esta clase, pero Figma te permite obtener visualmente el resultado que estás buscando sin realmente organizar demasiado bien tu proyecto. Entonces lo que voy a hacer es que voy a llevar eso a la cima y luego anidar arrastrándolo así, el texto y la imagen, ¿de acuerdo? Entonces, al menos está anidado dentro de ahí. Si quiero cambiar el texto para que sea un poco más pequeño, ponlo ahí. Entonces puedo traer una copia de mi botón. Puedo mantener presionada la opción en Mac. No estoy seguro de lo que es en Windows, y luego puedo hacer clic para traer una versión de eso sobre. Pero obviamente, el tamaño del texto para la versión móvil es demasiado grande, así que vamos a reducir eso a 12. En realidad, creo que aquí necesitamos mínimo 16. Bien. Bien. Entonces como dije, programa bastante sencillo. Obviamente, hay algunas características avanzadas, pero puedes simplemente hacer clic y arrastrar las cosas donde quieras en la página. Lo básico con Figma no son tan difíciles de entender, en mi opinión La mayor habilidad es realmente averiguar las fuentes correctas para usar, los tamaños de fuente correctos, las imágenes correctas. No es la herramienta de diseño en sí la que es complicada, sino el diseño en sí mismo, ¿de acuerdo? Entonces esta herramienta, Figma la simplifica al máximo, y es por eso que esta herramienta se ha convertido en la herramienta de diseño web más popular en el mercado actual Simplemente podemos seguir diseñando nuestros proyectos así, pero como les mostré, no responsivos en absoluto. Entonces, si realmente queremos que esto se organice para facilitar su uso, pero lo que es más importante, que sea traducible a la web, vamos a necesitar tomar un poco más de un enfoque estructurado Y eso es en lo que nos vamos a meter en el siguiente video. 4. Construye como un desarrollador: parte 1: Bien, así que solo para recapitular dónde estamos hasta ahora, comenzamos con una demostración de cómo los diseños web suelen aparecer en esta estructura de grupos aleatorios, sin etiquetar, no mucho uso del Y te mostré la alternativa, que es estructurar nuestras secciones como si fuéramos una página web con nombres adecuados y mucho uso de auto-layout Entonces te mostré los conceptos básicos de Figma, y acabamos de armar una verdadera sección básica de héroes en un sitio de comercio electrónico Me especializo en ecommerce, así que básicamente cada sitio web que creo es uno de ecommerce. Así que voy a seguir con este ejemplo, y vamos a construir la forma en que te mostré en este primer ejemplo con la versión refactorizada Entonces vamos a comenzar exactamente de la misma manera. Vamos a crear una sección. Esta sección es opcional. Pero voy a crear una sección y voy a llamar a la sección homepage. Bien. Y luego voy a poner mis dos marcos ahí. Entonces voy a hacer un frame para escritorio. Como pueden ver aquí, puedo seleccionar de estos látigos y alturas predeterminados Y obviamente, nuestra sección no es lo suficientemente grande como para dar cabida a este diseño de escritorio. Así que voy a hacer clic y arrastrar eso sobre, y luego voy a poner en un diseño móvil también. No me gusta 430. Voy a ir con 390, así que voy a ir aquí. Y voy a renombrar estos marcos. Este será de escritorio, y este será móvil. Bien. Así que aquí puedes ver, tanto visualmente como en nuestro panel Capas por aquí, tenemos un proyecto bastante organizado hasta ahora. Asegurémonos de que se mantenga organizado mientras construimos este diseño. Como demostré en el primer video, la forma en que voy a crear mis diseños en Figma se basa cómo los sitios web se construyen realmente en el mundo real, y se construyen con contenedores receptivos Para dar un paso fuera de Figma por un segundo y echar un vistazo a un ejemplo muy básico en la web o simplemente una página de HTML y CSS que creé justo antes de este video, puedes ver aquí que tengo un contenedor responsive Obviamente, los colores y todo no son ideales, pero solo para mostrarte los límites de nuestros diferentes contenedores, si tuviera que presionar Option Command I y usar eso para cambiar el tamaño de mi pantalla, puedes ver aquí que en un tamaño de pantalla más amplio, hay igual margen izquierda y derecha de este contenedor Y luego si bajamos a tamaños de pantalla más pequeños, ese espacio se encoge hasta que el contenedor está ocupando toda la pantalla Y si bajo a tamaños de pantalla más pequeños, estas cajas se romperán en nuevas líneas porque están flexionadas, y están usando flex box Entonces típicamente en el desarrollo web, tenemos contenedores que tienen Max látigos y tenemos elementos flex dentro de ellos. Entonces eso es en lo que me voy a centrar cuando esté creando mi diseño de figma. Y como mencioné anteriormente, podemos crear algo similar a CSS Flexbox usando auto-layout Y también podemos dentro de cualquier elemento o marco definir un Max con. Entonces, si voy aquí para diseñar en mi diseño de escritorio aquí, realmente puedo hacer clic en este botón para convertir todo este marco en un diseño automático Y ahora tengo todas estas opciones que son muy similares a CSS Flex. Para que puedas ver la dirección del flex. Puedes ver la alineación aquí. Se puede ver la brecha, que es exactamente la misma en CSS. También puedes ver estos Chevrones aparecer en WIP y altura. Entonces puedo dar click en estos Chevrones y puedo agregar un látigo mi y un látigo Max, y también puedo elegir el marco abrazar el contenido Esto no tiene sentido, en esta instancia. Normalmente usas abrazo en altura. Pero lo que puedes hacer es si creo otro frame y lo pongo dentro del escritorio aquí, y luego también hago de este frame un marco de auto-layout Puedo hacer click de nuevo en este Chevron y pueden ver que puedo hacer click para llenar el contenedor, lo que significa que el WIP llenará el espacio disponible de su padre, que es este marco de escritorio, Si agrego otro marco aquí, los va a poner uno al lado del otro, y eso es porque aquí he establecido la dirección flex o no se llama dirección flex en Figma, pero el flujo, como se le conoce en Figma auto-layout sigue Entonces para la página en sí, quiero ponerla en vertical, y luego se puede ver que podemos capas secciones abajo de la página. Y si solo tuviera que duplicar presionando Comando D para crear un tercer fotograma, se puede ver que eso solo apila encima del otro, y si creo otro, ya verán aquí que se va fuera de las dimensiones de nuestro marco aquí, lo que quiero hacer es que quiero ir aquí a alturas y cambiar eso para abrazar contenidos. Entonces ahora nuestro diseño de escritorio va a ser tan grande como el contenido dentro de él. Entonces, si borro ese último fotograma, verás que ahora quita ese espacio extra, ¿de acuerdo? Entonces la estructura que voy a usar es que tenemos nuestra página general aquí, y luego tenemos anidada dentro de ella, secciones, ¿de acuerdo? Entonces voy a llamar a esta sección. Eliminemos el otro, y luego duplicaremos esto una vez que hayamos construido nuestra estructura. Quiero que mi sección extienda el látigo completo, así como pueden ver aquí, para llenar el contenedor Ahora quiero poner en mi página látigo contenedor dentro. Entonces en esta, está bastante apretada porque estoy grabando esta clase en un látigo de ventana más pequeño Entonces este contenedor tiene 1,000 píxeles de ancho, lo cual es bastante ajustado. Normalmente, tendrías un contenedor que es al menos 1,200. Pongamos otro marco aquí dentro, y voy a llamar a este contenedor, ¿verdad? Entonces dentro de este contenedor, lo que podemos hacer es establecer esto en auto-layout, también Verás que voy a estar configurando casi todo en auto-layout Y luego voy a poner esto para llenar el contenedor. Entonces ahora se va a llenar, vamos a acercar un poco, el espacio disponible. También voy a luego hacer clic en el Chevron nuevamente y agregar un Ancho Máximo. Entonces voy a fijar eso a mil 200. Todo bien. Pero ahora puedes ver que nuestro contenedor está apagado a la izquierda. Entonces solo quieres subir a la sección y actualizar la alineación para que sea centro. Así que vamos a hacer eso y luego volveremos a nuestro contenedor, y se puede ver que nuestro contenedor está ahora en el medio. De hecho, puedo hacer de este un color diferente para demostrarlo un poco mejor para ustedes. Entonces haré la sección roja y el contenedor azul. Obviamente, no nos vamos a quedar con esto, sino solo para mostrar realmente esto y también puedes ver aquí el relleno. Entonces hay un poco de rojo que viene por encima y por debajo de la sección azul, y hay algo de blanco que mira a través de la sección Queremos ser muy intencionales con el acolchado. No queremos que el relleno sea solo el predeterminado. Entonces en la propia página, el diseño del escritorio, voy a quitar el relleno a cada lado. La idea es que la sección se extienda todo el ancho y que la página sea un montón de secciones apiladas una encima de la otra, así que no queremos ningún relleno alrededor de la página misma. Y luego si bajo a sección, no quiero ningún relleno en superior e inferior, así que voy a quitar eso. Y entonces ahora lo que debería poder ver es si redimensiono mi frame, podemos ver un efecto similar al que teníamos en nuestro HTML Como pueden ver, si llego a un tamaño de pantalla más amplio como 1,500, mi contenido, que estará contenido en mi contenedor, todavía 1,200 pixeles, ¿verdad? Pero si me baja menos de 1,200 o cerca de él, se puede ver que el contenedor ahora es tan grande como el propio marco menos el relleno de la sección, ¿de acuerdo? Entonces sí queremos algo de relleno a ambos lados, y queremos estandarizar esto, también. Entonces te voy a mostrar algo que deberías estar usando en el desarrollo web que también puedes usar en Figma, y eso son variables Voy a hacer click fuera de mi marco aquí y puedes ver por aquí las variables. Todo bien. Entonces hago clic en esto para crear una nueva variable, y aquí vamos a introducir algunas medidas, así que vamos a seleccionar el número. Y como puede ver, podemos organizar nuestras variables en diferentes colecciones. El nombre estándar para nuestra primera colección es colección uno. Así que voy a renombrar esto a dimensionamiento. También podemos crear otra colección más tarde para los colores. Cualquier otra cosa que podamos pensar que podamos almacenar dentro de una variable. Y voy a crear una variable para página Con o contenedor Whip, quieras llamarlo, y vamos a marcar en nuestro contenedor ancho de 1,200 Ahora cerrando esto, una vez que vuelva a mi contenedor aquí, puedo volver al Max WIP Da click en esto, da click en el Chevron junto al Max Whip y haz clic en Aplicar variable Ahora puedes ver puedo seleccionar Page Whip. Y ahora, si en cualquier otro momento, vuelvo atrás y cambie mi variable, digamos, cámbiela a mil. Mira que eso llega a cualquier lugar donde estemos usando ese valor. Entonces sigue ocultándolo, pero puedes ver aquí ahora el valor es de 1,000. Entonces ahora mismo, solo lo estamos usando en un solo lugar, lo que significa que esto es redundante en esta etapa. Pero una vez que empezamos a construir muchos contenedores, esto es bastante útil porque nos da la posibilidad de cambiar el contenedor más adelante. Entonces, por ejemplo, solo para darte una demostración para perforar ese hogar, si fuéramos a crear otra sección con otro contenedor, obviamente, queremos que estos tamaños de contenedores sean consistentes. Entré aquí y lo cambié una vez por este contenedor en particular, y lo hice, cómo apago el Déjame solo quitarlo, agregar uno nuevo, y configuré esto en 1,000. Ahora tienes un ancho de contenedor inconsistente. En cambio, lo que querrías hacer es mantener ese ancho de contenedor consistente y cambiarlo aquí, y ahora está afectando a todos los contenedores de la página. Bien. Así que vamos a verificar dos veces. Todavía tenemos nuestro ancho de contenedor aquí, y también nuestro relleno de contenedores es otra variable que podríamos querer cambiar más tarde. Entonces voy a bajar hasta aquí, crear otro relleno de página número uno, llamémoslo, y tal vez hagamos 16 píxeles. ¿Bien? Entonces entonces voy a bajar hasta aquí, y en nuestras secciones, pongamos el relleno izquierdo y derecho al relleno de página. ¿Bien? Entonces lo haremos en esta sección. En realidad, no crearemos una segunda sección hasta que hayamos marcado en esta Y así ahora, una vez más, si cambio el tamaño de esto, verás que solo tenemos 16 píxeles de relleno en ambos lados hasta llegar a esos tamaños de pantalla más amplios donde el contenedor se tapa a 1,200, y en realidad obtenemos más margen ¿Bien? Entonces usé la palabra margin, que es importante tener en cuenta en el desarrollo web, tenemos padding y margin. Pero en Figma, solo tenemos relleno. Entonces, si estás acostumbrado a tener tanto márgenes como relleno, hace que sea un poco más complicado traducir eso al mundo Figma. Pero esencialmente, cómo nos movemos eso es si queremos establecer un margen en, digamos, este contenedor, lo agregaríamos como relleno al contenedor padre. ¿Bien? Esa es la mejor manera de sortearlo. Bien, entonces voy a volver a establecer el ancho de página a 14 40 píxeles. Ya hemos probado que el contenedor responde. Y luego dentro del contenedor, pondremos el contenido que queramos dentro de ese contenedor. Entonces voy a darle a esto un relleno diferente. Nuevamente, vamos a hacer el amarillo, y tal vez para la sección de héroe , al menos, este va a ser texto en el medio que no queremos extender todo el ancho del contenedor. Entonces podemos llamar a este contenedor interior. A lo mejor tiene un ancho máximo de 800. Queremos que llene el espacio disponible. Todo depende de lo que hagamos dentro de este contenedor, ¿de acuerdo? Entonces lo que voy a hacer es que voy a salvar esta estructura. Obviamente voy a quitar los colores. Entonces me dirijo a la sección de aquí. Usa este botón menos aquí para quitar el rojo, entrar en el contenedor, quitar el azul, y luego el contenedor interior, y quitar el amarillo. Voy a cambiar el nombre de este interior, y esta será esencialmente nuestra estructura para construir nuestra página web. Entonces obviamente esto es muy diferente a lo que hicimos en el último video donde acabamos de lanzar cosas en la página, y vimos un resultado visual de inmediato Con este enfoque, nos enfocamos más en la estructura y nos aseguramos que nuestro proyecto esté configurado con de que nuestro proyecto esté configurado con diseño automático antes de agregar elementos Y hablando de eso, usemos realmente esta estructura y pongamos algunos elementos reales a partir del siguiente video. 5. Construye como un desarrollador: parte 2: Bien, así que ahora que hemos hablado sobre cómo vamos a construir nuestra estructura general receptiva para nuestro proyecto, ahora construyamos nuestra primera sección Entonces lo que voy a hacer es que voy a salvar esto. Voy a apagarlo, pero voy a guardarlo para que podamos hacer referencia a esto y duplicarlo para todas nuestras secciones. Y luego voy a darle al Comando D para duplicarlo, y voy a encender el segundo. Y voy a nombrar esta sección d. Entonces, lo que vamos a hacer en este proyecto, vamos a crear cuatro secciones, una cabecera, un héroe, una sección de colección destacada y un pie de página. Nuevamente, este es un ejemplo típico de comercio electrónico porque predominantemente trabajo con sitios de comercio electrónico en desarrollo web. Entonces por eso estoy haciendo más de un ejemplo de comercio electrónico. Y lo que me gusta hacer es para la sección interior aquí, me gusta llamarlo header inner. Me gusta reciclar el nombre de la sección. Obviamente, hay cierta flexibilidad sobre cómo lo nombres. Depende de ti. Y así, básicamente, este va a ser nuestro encabezado. Entonces me voy a deshacer de ese máximo WIP. Y voy a volver a hacer este un marco de diseño automático. Y cada vez que creamos un marco de diseño automático, verás que agrega relleno automático a la parte superior e inferior izquierda y derecha. En nuestro contenedor, ya tenemos algo de relleno automático, así que tal vez no necesitemos eso, pero dejémoslo por ahora. Tal vez necesitemos modificarlo en el futuro. Y lo que voy a hacer es que voy a traer el primer elemento que va a entrar dentro de esta cabecera en. Ese es nuestro logo falso. Así que voy a traer en logo adornos negros, y puedo simplemente hacer clic y arrastrar eso directamente a nuestro contenedor aquí Y obviamente, este logo es demasiado grande. Voy a marcarlo en 113, que va a hacer que sea mucho más pequeño. Y ahí tienes. Tenemos nuestro logo en. El logo está en el lado izquierdo de nuestro encabezado. Ahora voy a crear el lado derecho. Entonces nuestro lado derecho va a tener un par de elementos. Va a tener un ícono para la cuenta, un ícono para CRT, y la bandera del mercado actual Entonces, en un sitio de comercio electrónico, puede hacer clic en el icono de CRT para abrir la tarjeta lateral Puede hacer clic en el botón Cuenta para abrir la página de su cuenta, y puede hacer clic en la bandera de su país, su mercado actual para cambiar a otro mercado. Para los íconos, estos van a ser en forma de SVG, así que no los tengo guardados en mi computadora Lo que sí tengo es acceso a una biblioteca, así puedo abrirla en otra pestaña aquí mismo. A éste se le llama iconos U por icono plano. Como puedes ver, la licencia te permite usar el contenido para proyectos comerciales y personales, por lo que podemos usar totalmente los iconos aquí para nuestros propósitos creando nuestro pequeño diseño falso aquí. La página de inicio. Vamos a cambiar aquí a esta página, y debería poder si estas están etiquetadas correctamente, buscar cuentas. Tal vez usuario. Bien, aquí vamos. Entonces echemos un vistazo. Eso es anuncio de usuario, usuario eliminar. Solo queremos usuario estándar. Bien, dale al Comando C para copiar esto, pégalo hasta aquí. Probablemente no va a pegarlo en el lugar correcto, pero eso es todo bueno. Podemos agarrarlo en el panel de capas y llevarlo a nuestro encabezado interior. Mira aquí que una vez que lo traemos, se va a sentar justo al lado de nuestro logo aquí. Y si intento hacer clic y arrastrar para reposicionarlo, no va a ceder porque estamos usando el diseño automático Esto es bastante diferente al ejemplo anterior donde solo estás posicionando absolutamente elementos en la página. Eso no se traduce bien a la web, pero esto sí, y esa es la gran diferencia. Entonces, usando autoayout, lo que vamos a hacer en lugar de hacer clic y arrastrar las cosas a su posición, vamos a actualizar nuestra configuración de diseño automático, que como se mencionó anteriormente, es como nuestra configuración de CSS Flexbox , ¿ Entonces por aquí, lo que vamos a hacer es que voy a hacer clic en el centro de Aline y luego voy a hacer clic de nuevo para esencialmente obtener el equivalente de justificar el espacio de contenido entre. Entonces ahora puedes ver que tenemos nuestro logo en un lado y nuestro ícono en el otro. Ahora también quería un icono de carrito. Así que déjame buscar carrito. Bien. Este es el carrito de compras genérico. Así que voy a presionar Comando C, o por supuesto, puedo simplemente hacer clic derecho y hacer clic en Copiar y luego pegarlo por aquí. Nuevamente, no va a ser la posición correcta. Vamos a arrastrarlo a la cabecera interior. Ahora puedes ver que estamos obteniendo ambos íconos, pero no están agrupados a la derecha, ¿verdad? Entonces eso debería esperarse. Tenemos nuestra sección flexionada aquí con un espacio de contenido esencialmente justificado entre ellos Entonces, lo que tenemos que hacer es agrupar estos iconos juntos, y voy a hacer eso en, lo adivinaste un marco de diseño automático Así que voy a presionar Mayús A para convertirlo en un marco de diseño automático, y luego voy a cambiar el nombre de esto para encabezar los iconos de escritura o encabezado hasta usted. Voy a configurar el WIP para abrazar contenidos. Y como puedes ver por aquí, nos ha dado un WIP basado visualmente en cómo aparecieron estos dos anteriormente Entonces, lo que voy a hacer es ir a WIP y usar contenidos hug, que es esencialmente como contenido apto Max WIP en CSS Pero ahora se puede ver que es con el fin de mantener el espaciamiento entre ellos, establecer una brecha gigante. Entonces queremos eliminar eso o en realidad, queremos no eliminarlo por completo, sino establecer una brecha mucho más pequeña. Entonces tal vez diez, déjame acercarme un poco, echa un vistazo. Bien, entonces digamos que tal vez 16 pixeles entre ellos, ¿bien? Entonces ahora tenemos nuestro logo a la izquierda y nuestros íconos a la derecha. Lo último que quería añadir es la bandera. Voy a traer aquí la bandera australiana, que va a indicar nuestro selector de mercado. Y si comparamos el tamaño de esta bandera con nuestros iconos aquí, estos son 24. Entonces para que sean iguales, voy a cambiar la altura aquí a 24, y solo queremos asegurarnos de que la relación de aspecto esté bloqueada para la relación de aspecto esté bloqueada que el icono no se estire. Y luego vamos a mover eso a encabezado justo por aquí. Necesitas tonest eso un poco más, y ahí puedes ver, tenemos un conjunto de tres iconos ahí, y podemos aumentar la brecha entre ellos así, o podemos meterse con estos parámetros de cualquier manera que queramos actualizar el espacio entre ellos, esencialmente el aspecto visual de nuestra sección derecha Bien. Ahora, entre nuestro logo y nuestros íconos a la derecha, quiero un menú en el medio. Entonces lo que voy a hacer es que puedo hacer esto. A formas en las que puedo crear el texto primero y luego agruparlos en un diseño automático, o puedo crear primero el diseño automático. Vamos con la escalera. Entonces voy a tirar un marco aquí y voy a llamar a este menú de encabezado. Y voy a configurar esto en el diseño automático inmediato sin ningún contenido dentro Voy a poner los látigos para abrazar el contenido. Sí, todo para abrazar, así que va a encajar el contenido dentro de él. Y luego voy a tomar mi herramienta de texto aquí, escribir mi primer elemento del menú aquí, y solo voy a tener dos enlaces en nuestro menú. Muy sencillo. De los hombres, haz click fuera de eso. Golpea al Comando D para duplicar eso y cambiarlo a femenino. Como puede ver, están apilados uno encima del otro, así que necesitamos cambiar nuestro flujo en nuestro diseño automático de aquí a horizontal. Si eso es lo que queremos, la brecha entre ellos va a ser de diez. Podemos cambiar la alineación. Realmente no tiene ningún sentido por el momento, dado que todo está listo para abrazarse. Tenemos un poco de relleno a la izquierda y a la derecha. A lo mejor nos quedamos con eso. No quiero el relleno en la parte superior e inferior porque ya lo tenemos en nuestro contenedor. Entonces si nos alejamos aquí, puedes ver que tenemos elementos de nuestro menú centrados en el medio, ¿de acuerdo? Entonces como te mostré en el video anterior, porque aquí tenemos nuestra estructura responsive, si cambio el tamaño de esto ahora, verás que esto responde como si fuera un proyector web real, ¿verdad Y eso es más de lo que se puede decir de mayoría de los diseños web que aterrizarán en tu regazo porque los diseñadores, como dije antes, normalmente solo usan el posicionamiento absoluto. Bien. Lo que quiero hacer aquí también, porque obviamente esto se va a descomponer una vez que lleguemos a, ya sabes, tamaños de pantalla bastante bajos, pero este es el diseño del escritorio. En realidad no queremos mostrar cómo se ve 4:16 en nuestro marco de escritorio aquí Queremos mostrarlo en el móvil. Entonces, lo que realmente voy a hacer es establecer un Mnwidth en el marco general en sí, y voy a establecer esto en 769 Cualquier cosa menos que 769, y estás mirando tablet y móvil, ¿de acuerdo? Entonces ahora verás que no puedo redimensionarlo a menos de 769 Así que voy a volver a establecer mi página a 14 40, y voy a encargarme de una cosa más antes de pasar a la siguiente sección, y es crear algunas nuevas variables alrededor de las fuentes, ¿de acuerdo? Entonces como puedes ver aquí, cuando creamos este texto aquí mismo, simplemente lo configuró con la fuente estándar Inter. Eso es solo el valor predeterminado. Se toma en el tamaño de fuente predeterminado, y todo es, por supuesto, predeterminado. Cosas como colores de marca y fuentes de marca, normalmente querríamos poner en una variable. Así que voy a hacer click fuera de mi marco aquí y configurar nuestras fuentes. Así que aquí puedes ver que tenemos una colección de tallaje. Voy a crear una nueva colección y llamar a esto fuentes, y voy a crear dos fuentes. Esto va a ser una cadena, y el primero va a estar encabezando fuente, segundo uno a otro string, va a ser fuente body. Estoy contento con el body font del Inter por ahora, que es lo que teníamos, así que voy a poner al Inter ahí. Pero cuando creamos nuestros encabezados, quiero una fuente diferente Quiero la fuente de Oswald. Entonces crearemos nuestro primer encabezado en la siguiente sección, pero ya tenemos algún texto en nuestra sección de encabezado, así que quiero bajar aquí, y en vez de Inter, voy a dar click aquí para vincular una variable que voy a poner en la fuente del cuerpo. Entonces no va a cambiar nada porque body font ya es inter. Pero si después cambiáramos la fuente del cuerpo, como te mostré antes con el dimensionamiento, va a fluir a todas las áreas de nuestro diseño. Y mientras estamos aquí, también podría marcar en los colores de nuestra marca. Entonces voy a crear una nueva colección, y llamaré a esto colores y luego presionaré Crear, y puedes ver que vamos a usar nuestro tercer tipo de variable, y eso es color. Entonces, si te estás preguntando cómo se me ocurrió esta paleta de colores, estoy bastante seguro de que acabo de pedirle a HachPT que me generara una paleta de colores basada en esta marca falsa Así es también como generé el logo y las imágenes que estás viendo aquí a través de la IA. La IA es genial cuando quieres producir algo genérico con fines de demostración. Entonces voy a llamar a mi primer color core black, y los nombres para estos también fueron creados por Chat GBT, también Así que doy crédito a ojo abierto por estos nombres también. A continuación, el blanco puro, que como su nombre indica, solo será blanco puro. El siguiente será carbón, el siguiente grafito. No va a terminar usando todos estos colores, para ser honestos, pero me los dio Chat GBT, así que solo los voy a tirar aquí El siguiente fue gris ceniza. Nuevamente, si están siguiendo, chicos, no tienen que poner aquí todas las mismas variables de color, solo demostrando cómo podemos usar variables de color, plata, algún color llamado blanco humo. Y por último, el súper cool suena azul acero, que no se parece demasiado a un azul, sino que se ve bastante genial Bien. Así que ahora que tenemos nuestras variables de color marcadas, vamos a ir por aquí y asegurarnos de que nuestra fuente usa la variable en lugar de un valor arbitrario aquí mismo Entonces voy a dar click en el relleno, y por aquí, no tenemos ese mismo botón que vimos antes para las otras áreas donde agregamos la variable. En cambio, tenemos que hacer clic sobre las bibliotecas aquí, y luego puedes ver nuestros colores aquí. Entonces vamos a establecer los elementos del menú en Core black. Y como sigo mencionando a lo largo de esta clase, si cambiamos el líder negro central en el nivel variable, va a fluir a donde sea que se use el core black a lo largo de nuestro diseño. Bien, así que esa es nuestra primera sección hecha, nuestra sección de encabezado Como puedes ver, responde desde el 769, que va a ser nuestro punto de quiebre hasta el 14 40 y más allá Entonces está configurado correctamente. Se ve bien con un diseño sencillo. Ahora vamos a crear nuestra siguiente sección en el siguiente video. 6. Construye como un desarrollador: parte 3: En el último video, creamos nuestra primera sección, nuestra sección de encabezado, y ahora si creamos una nueva sección, voy a duplicar de nuestra pequeña plantilla aquí y luego encenderla, arrástrela hasta aquí. Verás que extiende la altura del marco. Eso es porque si echamos un vistazo al marco, puedes ver que tenemos el diseño automático activado y puedes ver que la altura está establecida para abrazar el contenido Entonces va a ser tan alto como debe ser para el contenido que hay dentro. Lo cual es consistente con cómo funciona realmente la web, una página web será tan larga como sea necesario para contener todo el contenido dentro de ella. Por supuesto, hay algunas excepciones donde la experiencia del usuario es más desplazamiento horizontal, pero eso es muy poco común La mayoría de las veces, cuando estamos navegando por la web, estamos de desplazamiento vertical, y nuestro látigo de pantalla y navegador está determinando nuestra variable Entonces, como todo lo que imita cómo funciona realmente la web, me gusta este enfoque Y ahora lo que voy a hacer es cambiar el nombre esta sección a héroe, ¿de acuerdo? No familiarizado con una sección de héroes, es básicamente lo que creamos antes, igual que un banner con una imagen de fondo. Eso suele ser lo que es una sección de héroes. No estoy seguro de cuál es la definición real, pero es algo que se sienta por encima del redil. Entonces hacia la parte superior de la página, básicamente, la primera sección grande que ves en una página. Y si recuerdas antes en la clase en la lección de conceptos básicos de Figma, traje nuestra imagen para el fondo de héroe Entonces voy a traer eso de nuevo, cómo lo hice antes. Entonces lo abrí en Finder, y simplemente hice clic y lo arrastré justo adentro Y ahora se puede ver que se sienta dentro del contenedor. Eso no es lo que queremos. A lo mejor lo arrastramos hasta aquí, pero eso no es exactamente lo que queremos, Eva. De hecho, hay una manera mucho mejor de hacer esto, y es no usar una imagen en absoluto. Establece la imagen dentro del relleno. Ahora, porque quiero una imagen de ancho completo que recorra toda la sección, voy a seleccionar la sección. Entonces voy a bajar a llenar, clic en este botón más para agregar relleno, y de lo que quizás no te hayas dado cuenta es además de agregar un relleno de color, también podemos agregar un relleno de imagen. Voy a hacer clic en Subir desde la computadora, y luego voy a seleccionar esa imagen de héroe nuevamente. Ahora puedes ver que tenemos esa imagen de héroe extendiendo todo el ancho de la sección. La altura completa, pero la altura actualmente está restringida a 120. Establecer esto para llenar aquí es esencialmente como cubierta de la imagen de fondo en CSS o la cubierta de ajuste a objetos, y luego establecer esto para que se ajuste es esencialmente como contenedor de ajuste de objeto. Pero obviamente, no queremos que contenga aquí. Queremos que se llene. Obviamente está la opción de recortar, que vimos antes. Pero mucho mejor que lo llene. Y como puedes ver aquí, esta sección es simplemente demasiado corta. Queremos asegurarnos de que podamos ver suficiente de la imagen. Entonces voy a darle a esta sección una altura mínima. Entonces voy a dar click sobre el Chevron, clic en Agregar altura mínima y agreguemos 750 pixeles Ahora, hay una limitación dentro Figma que sí tenemos en CSS, y es que podemos elegir el punto de anclaje de donde proviene la imagen Entonces podemos configurarlo para que venga de arriba o de abajo o de la izquierda o de la derecha. No parece ser esa opción dentro BigMa no estoy seguro de por qué la imagen debería aparecer aquí, pero como puedes ver, no hay opción aquí para hacer eso Entonces esa podría ser una modificación que solo tendremos que hacer en CSS una vez que exportemos esto al código. Por ahora, sólo voy a hacer que sea una altura mínima para que podamos ver claramente ambos modelos. Podría reducir esta altura más tarde una vez que exportemos a código, pero ahí se puede ver con una altura mínima de 900, estamos llegando a ver ambos modelos, ¿de acuerdo? Ahora tenemos nuestro contenedor aquí, y parece que está tomando la misma altura que nuestra sección anterior. Así que sólo voy a cambiar eso. Voy a establecer la altura para llenar contenedor en ambos de estos. Y ahora, si tuviera que, por ejemplo, escribir algún texto aquí, digamos encabezamiento. Eso es muy pequeño, así que voy a ir por aquí. En realidad, antes que nada, voy a poner la fuente de encabezado a nuestra fuente de encabezado que configuramos antes de Oswald Y entonces obviamente necesito hacer esto más grande para que podamos verlo dirigiéndose así. Y entonces, ahora mismo, debido a que este marco no está auto dispuesto, puedo hacer clic y arrastrar este rumbo a donde quiera. Este es el mismo posicionamiento absoluto que teníamos antes. No queremos esto, así que voy a entrar en el hit interno Shift A para convertirlo en auto-layout Y se puede ver por defecto, sólo va en el bang metal, ¿de acuerdo? Obviamente, podemos elegir nuestra alineación. Y si tuviéramos que hacer clic en alinear arriba a la izquierda y quitar este relleno que Figma ha insertado para mantener esa posición, puedes ver que nuestro rumbo se alinea muy bien con el logo de aquí, ¿de acuerdo? Entonces eso es lo que vamos a querer para el resto de la página. Pero para esta sección de héroes en particular, queremos que el contenido esté muerto en medio. Entonces lo que voy a hacer es devolverlo a aquí. Y entonces lo que voy a hacer es seleccionar el texto, duplicarlo, y verás que va a ir a la derecha. Entonces voy a cambiar la dirección del flex o en auto-layout, se llama la dirección del flujo, supongo Voy a cambiar eso a vertical, y luego voy a cambiar la segunda pieza de texto a cuerpo, y luego voy a cambiar la fuente del encabezado sobre la fuente del cuerpo. Eso no funcionó, déjeme seleccionar eso de nuevo, y luego marquemos eso hacia abajo. ¿Bien? Entonces eso va a sentar en el centro muerto porque tenemos nuestra configuración de alineación establecida como tal. Y va a haber un hueco de diez píxeles entre el encabezado y el texto del cuerpo. El mejor redactor, así que le pedí ChahPT que se le ocurriera un rumbo mejor que este Entonces voy a ponerlo aquí, redefinir tu eje. Y obviamente, o al menos, obviamente, a mí, el texto se ve mejor con todas las mayúsculas. Y luego la segunda pieza de copia para el cuerpo, indumentaria impulsada por el rendimiento para quienes se mueven con propósito, diseño minimalista, máximo impacto. Eso es un poco pequeño, y quiero que esté alineado en el medio. Entonces voy a cambiar la alineación a media. No estoy seguro de si se aplica la variable para la fuente, así que voy a asegurarme de que sea la fuente del cuerpo, y voy a aumentar eso con, ¿de acuerdo? Como pueden ver, a medida que lo aumento cada vez más grande, se solapa con el contenedor Y también, incluso en este tamaño, cuando no se solapa con el contenedor, sigue siendo un poco demasiado ancho. Entonces lo que voy a hacer es que voy a entrar aquí en este contenedor interior y forzar algunas rupturas de línea con un olor máximo en este contenedor Entonces voy a añadir un máximo de oler de vamos a experimentar con unos 600 Como pueden ver, esto es recorte. Entonces queremos cambiar esto para tener un ancho de contenedor de llenado. Y entonces se puede ver que tenemos algunos saltos de línea. Así que juguemos con el tamaño de fuente y el tamaño del contenedor para que esto se vea un poco mejor. Creo que ese es probablemente un mejor equilibrio ahí mismo. Esta situación, es agradable tenerlo en el medio, pero como que quiero que se siente en este espacio disponible justo encima de él. Entonces voy a hackear esto un poco para ponerlo en posición. Puedo usar la alineación aquí para colocarla en la parte superior vertical, pero está demasiado cerca del encabezado. Idealmente, lo querría en algún lugar intermedio. En HTML y CSS, puedo agregar un porcentaje específico para que quede sentado en alguna parte de aquí, pero no tenemos acceso a esa Figma. Entonces lo que voy a hacer es que voy a añadir poco de relleno vertical para empujarla a su posición Empecemos con 50, trabajemos nuestro camino hacia arriba desde ahí, 100, 150. Hagamos 165. Algo así ahí, pero el texto está un poco cerca de la cara de la señora ahí. Entonces solo voy a traer un poquito el contenedor, encuentra el ancho máximo aquí, hazlo 550. Bien. A lo mejor ese salto de línea está en el texto en sí mismo. Ahí vamos. Bien, entonces el salto de línea estaba en el propio texto real Entonces sí, si hacemos ese contenedor, 550 píxeles como máximo y jugamos con el relleno, lo podemos conseguir en una posición bastante buena. Ahora bien, para probar esto, para ver si sigue respondiendo, voy a hacer clic en el marco del escritorio, y voy a cambiar el tamaño de este Entonces, como puedes ver, nuestra imagen llena el espacio disponible, y nuestro encabezado en texto permanece en el medio. Perfecto. Pero hay otra cosa que quiero hacer aquí, y es poner un botón, un botón de CTA Entonces, claro, te mostré un botón en los fundamentos de Figma. Vamos a utilizar, una vez más, el auto-layout para ello. Así que simplemente podemos hacer clic en nuestro diseño aquí, y luego vamos a llamar al botón Comprar ahora. Voy a hacer click fuera de la herramienta de texto. De lo contrario, va a agregar una A real . Voy a presionar Mayús A, y ahora se ha agregado el diseño automático Voy a llamar a este botón. Bajemos y le demos algo de relleno a esto, y usemos una de nuestras variables de color. Entonces tal vez voy a hacer que este humo sea blanco, y luego dentro del botón en el texto real, voy a cambiar el relleno de eso algo que esté en contraste con eso. Entonces tal vez grafito. Acerquemos ahora, échale un vistazo a eso. Obviamente, necesitamos un poco más de relleno, así que voy a agregar un poco de relleno a la izquierda y a la derecha, algo de relleno en la parte superior e inferior. Algún radio fronterizo, que se llama radio de esquina aquí en Figma. Empecemos con diez, ¿de acuerdo? En realidad, no me importa diez. Creo que diez está bien, así. Y para terminar esto, no soy un gran fan de la diferencia espacial. Entonces, como puedes ver, parece que hay más espacio entre el encabezado y el texto del cuerpo, en entre el encabezado y el texto del cuerpo, comparación con el texto del cuerpo y el botón. Echemos un vistazo a por qué es eso. Vamos a nuestra capa de encabezado aquí y verás que la caja es un poco más grande que el texto real en sí. Es posible que desee bajar a la altura de línea, establecer eso igual al tamaño del texto, entonces 60, y eso cambia eso. Y ahora se puede ver que todo es un poco más igual. Así que eso casi arregla eso. Voy a hacer lo mismo por aquí para el texto del cuerpo, aunque entre líneas, como que necesita esa altura de línea. Entonces voy a revertir ese cambio. Y vamos a aumentar la brecha aquí. Entonces digamos 20 píxeles. Bien. Ahora lo que podríamos hacer si quisiéramos diferentes brechas entre estos, podríamos agrupar el texto, agregar auto-layout a eso, tal vez llamar a esto el texto héroe si quisiéramos, y luego darle un poco de relleno al fondo De hecho, podemos hacer clic aquí abajo, y eso nos permitirá separar el relleno izquierdo y derecho y el relleno superior e inferior, y podemos marcar algún relleno adicional para separar el botón del texto. Entonces tal vez sólo voy a usar cinco píxeles aquí. En realidad, acabo de poner eso en el lugar equivocado. Entonces tal vez solo use diez o cinco píxeles aquí, y eso se ve bastante bien. Bien, así que de nuevo, redimensionando nuestro diseño desde 769 hasta más allá de 14 40 Obviamente, aquí perdemos las caras de los modelos. Y en realidad, permítanme poner el escritorio por encima del móvil para que podamos tenerlo mostrando. Pero con CSS, podemos arreglarlo fácilmente cambiando el posicionamiento de la imagen de fondo. Bien, entonces voy a poner esto de nuevo a 14 40. Antes de pasar al siguiente video, lo que voy a hacer es mostrarte componentes. Para poder sostener mis componentes, sólo voy a crear otra sección por aquí. Voy a llamar a esto elementos. Puedes llamarlo como quieras. Ni siquiera tienes que usar una sección. La mayoría de la gente ni siquiera usa una sección, y voy a agarrar este botón aquí y lo voy a arrastrar a elementos. Ahora bien, ¿por qué lo he sacado de aquí y lo he puesto aquí es porque quiero definir nuestro estilo general de botones que vamos a usar a lo largo de nuestro diseño Cualquier cambio que hagamos a este estilo de botón centralizado, pasa a todos nuestros botones. Ahora, eso no quiere decir que no podamos hacer cambios específicos a los botones individuales, como si lo pusiéramos aquí y luego tal vez sea sobre un fondo blanco, necesitamos invertir los colores. Eso lo podemos hacer. También podemos crear dos versiones del botón maestro, pero para tener un estilo de botón central centralizado, lo que podemos hacer es crear lo que se llama un componente. Entonces podemos hacerlo haciendo clic derecho sobre el elemento y podemos dar clic en Crear componente. Ahora se puede ver que se vuelve púrpura. Este icono aquí indica que ahora es un componente. Ahora bien, si tuviera que hacer clic y arrastrar, lo siento, opción haga clic y arrastre un botón desde el componente hasta aquí, lo que obtengo es una instancia de ese componente. Y se puede ver aquí dice instancia, y aquí tenemos el diamante ahuecado en lugar del diamante de cuatro cuadrados por aquí Y como se puede ver, dice componente. Entonces puedes ver aquí que ahora tenemos una instancia de nuestro componente de botón. Podemos, por supuesto, seguir cambiando el texto, y eso no va a cambiar el componente original. Pero si cambio el componente original a texto por aquí, verás que eso realmente tira a través de las instancias. Entonces, a nivel de instancia, podemos hacer personalizaciones, o a nivel de componente, podemos hacer personalizaciones, pero esas fluirán a todas las instancias de ese ¿Todo bien? Entonces creo que los componentes son una muy buena idea, y los vamos a usar a lo largo de esta clase. Y verás en el siguiente video cuando construyamos una sección de colección destacada de múltiples tarjetas de productos, vamos a querer usar la misma tarjeta una y otra vez, y ese es un caso de uso perfecto para componentes. 7. Construye como un desarrollador: parte 4: Bien, entonces en el último video, construimos nuestra sección de héroes Ahora, vamos a trabajar en la siguiente sección, que va a ser una sección de colección destacada, que es muy común en el comercio electrónico. Entonces, a medida que estamos construyendo un sitio web de comercio electrónico, tiene sentido poner una sección de colección destacada. Entonces voy a duplicar esa plantilla de sección que teníamos y encenderla, y luego voy a llamar a esta colección destacada. La principal complejidad de esta colección destacada van a ser algunos componentes de cartas que voy a tirar dentro. Bien. Entonces, antes que nada, vamos a querer un rumbo aquí. Entonces voy a darle a esto el encabezamiento de, digamos destacado lo siento, eso es muy pequeño. Voy a acercarme un poco, pero vamos a hacerlo más grande. Colección destacada. La mayúscula es mucho mejor, y vamos a cambiar la fuente a nuestra fuente de encabezado aquí mismo de Oswald, tal vez aumentarla a Eso se ve un poco más agradable. Entonces voy a hacerlo mucho más grande, así que voy a hacer que sea 60 pixeles. Bien. Entonces, como puedes ver, podemos moverlo con nuestro Cursor. Eso debe significar que actualmente no estamos dentro de un marco de diseño automático Así que voy a golpear el marco interior y presionar Mayús A para convertirlo en auto-layout Y como pueden ver aquí con nuestra alineación, va a estar en el medio. Entonces voy a mover eso hacia la izquierda. Y como pueden ver, se mantiene ese relleno, así que solo queremos quitar ese relleno, y luego deberíamos ver que este título alinea con el resto de nuestros contenedores. El siguiente que voy a hacer es trabajar en el componente de tarjeta. De hecho voy a ir aquí a mis elementos aquí y vamos a crearlo por separado, convertirlo en un componente, y luego podemos copiar algunas instancias de ese componente a nuestra sección aquí. Voy a hacer clic aquí abajo para crear un marco, y quiero hacer este fotograma de unos 280 píxeles de ancho. Y entonces la altura va a ser abrazo una vez que agreguemos los elementos en su interior. Entonces voy a llamar a esto nuestra tarjeta de producto. Y los verdaderos niños en nuestra tarjeta de producto va a ser la imagen de la tarjeta del producto y luego todos los detalles. ¿Bien? Entonces, para la imagen, en realidad no tengo un montón de imágenes de productos para poner aquí. Entonces voy a poner un marcador de posición, y para eso, solo voy a usar un rectángulo Me gusta el color para este rectángulo marcador de posición, y luego voy a dimensionarlo para que sea igual al ancho completo de la tarjeta del producto, y para la altura, tal vez 320 En realidad, voy a marcarlo por aquí. 320. Y luego para el WIP, quiero que llene contenedor Pero para eso, vamos a necesitar algo de auto-layout. Así que voy a ir a la tarjeta del producto, golpear el diseño automático en eso, volver a nuestro rectángulo, configurarlo para llenar el contenedor, y luego voy a extender la tarjeta del producto Aquí puedes ver que la alineación está apagada. Lo está poniendo al centro. Entonces vamos a moverlo ahí arriba, y luego vamos a poner en otro marco aquí para nuestros detalles. Solo hay que volver a hacer clic en la ficha del producto y cambiar la alineación a vertical, y luego poner esto en la parte inferior. ¿Bien? Este marco va a llenar el contenedor, y las alturas abrazarán el contenido, pero aún no hay contenido en él. Entonces comencemos a poner eso. Vamos a querer poner en el título del producto. Como puedes ver, se guardó nuestro tamaño de fuente desde antes. A lo mejor bajé eso a 24, y luego escribo producto. Volvamos a hacer mayúsculas, título del producto, ¿verdad? Y ahora mismo, esto no está dentro de un marco de diseño automático. Así que vamos a subir aquí y agregar el diseño automático al marco Y ahora puedes ver que va a haber cierta alineación con el título de nuestro producto. Vamos a cambiar el nombre de los detalles de la tarjeta del producto del marco, y quiero poner este título del producto a la izquierda, eliminar estos números de relleno por ahora. Y como pueden ver aquí arriba, también hay alguna brecha voy a quitar eso por ahora, también, y podemos marcar eso un poco más tarde sin que Figma decida eso por nosotros Y lo que voy a hacer es que voy a golpear el título del producto, y voy a darle de nuevo al turno A, para crear otro marco, para crear otro marco, y esto va a ser los detalles de nuestra tarjeta de producto o en realidad, simplemente lo llamaré tarjeta de producto a la izquierda. Porque voy a poner aquí algún otro texto. Vamos a poner otro trozo de texto, y queremos que estos se alineen verticalmente. Entonces voy a cambiar el flujo a vertical. Estoy empezando a acelerar un poco ahora porque ya hemos discutido mucho de auto-layout ya Y entonces esta no va a ser nuestra fuente de encabezado. Va a ser nuestra fuente corporal, y voy a llamar a esta variante título. No queremos que esto sea audaz. De hecho, a lo mejor queremos que sea ligero, ¿de acuerdo? Y entonces el tamaño del texto es demasiado grande. Voy a hacerlo como 14. Bien. La alineación está en el medio. Entonces solo necesitas moverlo a la izquierda. En realidad, incluso cuando hace eso , todavía está en el medio, y eso es porque tenemos que seleccionar nuestra alineación por aquí y luego golpear Comando D para duplicar una vez más, y este va a ser nuestro precio. Así que voy a establecer esto a tal vez 10 dólares con los ceros finales Y para esto, quiero que sea audaz y tal vez un poco más grande. Voy a poner un marco sobre el lado derecho, y dentro de este marco, voy a fijar el número de reseñas. Así que sólo voy a llamar bien a esta tarjeta de producto marco. Y para mostrar el número de reseñas, voy a usar un icono de estrella. Así que voy a volver a nuestros iconos U por icono plano biblioteca de iconos aquí y buscar estrella. Esa es la estrella que estamos buscando. Bueno, déjame ver qué es esta. Quiero el redondeado. Entonces voy a copiar eso, pegarlo dentro de este marco, y luego un trozo de texto dentro de este marco también por la cantidad de estrella. Entonces digamos 4.5. Bien. Voy a volver a ordenar estos, y luego voy a agregar el diseño automático a la tarjeta del producto, bien Y luego voy a hacer clic hasta los detalles de la tarjeta del producto y actualizar nuestra alineación aquí, voy a establecer esto en el espacio intermedio. Ese es el término en CSS Flex, pero básicamente, acabo de hacer doble clic aquí para darle espaciado automático, y luego de vuelta aquí en la tarjeta del producto a la derecha Voy a establecer la altura para llenar contenedor. Voy a quitar el acolchado superior e inferior que lo hace sentar en el medio, y luego voy a establecer la alineación. En realidad, eso no lo ha arreglado para nosotros. Queremos que se siente arriba a la derecha. Entonces tal vez necesitamos hacer clic aquí. Ahí vamos. Es necesario hacer clic de nuevo para obtener el hueco automático. Y luego pasamos a la tarjeta de producto por aquí. De hecho, queremos que esto esté en este diseño automático, alineados entre sí Tal vez cinco píxeles de brecha en su lugar. Y ahora se puede ver que esto está un poco fuera con esto. Bajemos y cambiemos la altura de la línea a 24. Y ahora deberías empezar a ver todo alineado bastante bien. ¿Bien? Ahora con todo el relleno básicamente eliminado, voy a marcar en mi propio acolchado a mi gusto. Entonces, obviamente, voy a querer alguna brecha entre estas secciones. Entonces 20 es probablemente demasiado. Hagamos diez. Y luego para los detalles de la tarjeta del producto, necesito algo de espacio a cada lado. Marquemos tal vez 12. Eso es lindo. Deja que respire. Entonces voy a repasar al propio componente de la tarjeta de producto, entrar en altura, hacer clic en Hug content, para que no sea más grande que el contenido dentro de él. Y entonces podemos ver aquí que tiene que haber algún relleno en la parte inferior de los detalles de la tarjeta del producto. Entonces, en lugar de tener un hueco aquí, podríamos eliminar ese hueco, y luego en los detalles, darle algún acolchado superior e inferior, como tal. Y en realidad, ahora estoy bastante contento con mi tarjeta de producto. Bien, así podemos dejar este marcador aquí así o podemos cambiar el relleno a nuestra imagen real del producto Solo tengo una imagen de producto. Entonces voy a ir por aquí y traer un ejemplo. Así que aquí podemos ver la imagen del producto. Y como puedes ver, es una especie de recorte en la parte superior de su cabeza Entonces hay algunas opciones que podríamos configurarlo para que encaje, cual no es una gran opción porque ahora tenemos este espacio en blanco en el lado eva. Si todavía quisiéramos que se llenara y solo anclara desde arriba, lo podemos hacer en nuestro CSS más adelante. No se puede hacer en Figma, desgraciadamente. Pero en este caso, sólo voy a recortar. Entonces solo voy a alinear la imagen así, y tal vez el producto es solo este sujetador deportivo de aquí. No involucra la pieza inferior, en cuyo caso, esto funcionaría bien. ¿Bien? Entonces podríamos decir, en lugar del título del producto, sujetador deportivo. ¿Bien? Podemos dejar eso ahí dentro, o podemos deshacernos de la imagen, o podríamos volver al marcador de posición, si solo controlo Z fuera de eso Pero aquí podemos ver nuestra configuración de tarjeta de producto correctamente estructurada. Bien. Entonces lo que voy a hacer es que voy a hacer clic derecho sobre esta ficha del producto, y voy a hacer clic en Crear componente. Ahora podemos crear instancias de esta tarjeta de producto, y cualquier cambio que hagamos a este componente centralizado va a fluir a través de cada instancia, igual que con los botones. ¿Bien? Entonces lo que voy a hacer es que voy a volver a nuestra sección de aquí. Voy a renombrar esta colección realmente destacada interior. Y luego voy a crear un nuevo marco dentro de él. Obviamente, no queremos que vaya a la derecha del rubro. Queremos que vaya por debajo, así que voy a cambiar mi flujo aquí. Esta va a ser nuestra lista de tarjetas de productos. Bien. Y entonces lo que puedo hacer es hacer que esto se extienda para llenar todo el contenedor, y luego puedo empezar a opción arrastrar uno de estos a mis tarjetas de producto como tal. En realidad, se ha salido a un lado, pero luego puedo anidarlo dentro de mis tarjetas de producto aquí. Y luego una vez más, como hemos visto a lo largo de todo, voy a agregar auto-layout a eso, y ahora se puede ver que tenemos nuestra tarjeta de producto perfectamente en el centro Lo que voy a hacer es duplicar estas tarjetas de producto. Hagamos cuatro de ellos, creo. Y se puede ver que Figma ha puesto algún relleno de izquierda y derecha. Vamos a deshacernos de eso. Obviamente queremos alguna brecha entre todos estos. Podría aumentar esa brecha a 15. Y como puedes ver aquí en nuestras tarjetas de producto, el contenido es apto para abrazar, lo cual es bueno. Eso significa que va a ser tan grande como las tarjetas dentro de él, y nuestro WIP va a llenar el contenedor Perfecto. Ahora, como puedes ver con nuestro título aquí arriba, la altura de línea es mayor que la altura del texto real. Entonces vamos a hacer este 60 para que ocupe sólo el espacio para el texto. Y en este caso, vamos a necesitar algún margen entre este texto y las fichas del producto. Entonces podemos agregar auto-layout a este texto aquí mismo, y luego en el marco de auto-layout, podemos agregar algo de relleno inferior o simplemente podemos usar gap en la sección interna ¿Bien? Entonces creo que solo voy a hacer eso y solo a aumentar la brecha. En realidad, ya tenemos alguna brecha aquí, pero vamos a crear un poco más de ella, tal vez 30 píxeles de gap. Todo bien. Entonces, si miramos nuestro contenedor aquí, hay algo de relleno en la parte superior e inferior, que no debería existir. Y además, estas secciones no parecen alinearse perfectamente. Entonces vamos a averiguar por qué es eso. Parece que aquí hay un poco de brecha. Vayamos a nuestro marco padre aquí, marco de escritorio, y puedes ver que hay una brecha establecida ahí. Entonces solo queremos eliminar eso. Y ahora se puede ver que la parte superior de la sección y la parte inferior de la sección está a ras contra la sección. Ahora, obviamente, queremos crear algo de espacio aquí, pero quiero crear esto como una variable porque si creamos otra sección como esta con texto y algunas imágenes, vamos a querer mantener ese relleno de sección consistente. Lo voy a hacer es que voy a hacer clic fuera de nuestro marco aquí, entrar en variables, ir a nuestra colección de tallas, y voy a crear una nueva variable numérica para el relleno de sección. Y con los modos, en realidad podemos cambiar esto para que sea diferente basado en el móvil o el escritorio. Pero solo si estás en el asiento de dev, que cubriremos un poco más tarde. Así que vamos con 75 pixeles. ¿Bien? Y entonces lo que voy a hacer es repasar a mi colección destacada y luego agregarla aquí mismo a nuestra sección padding. Bien, vamos a extender la sección hacia abajo para que veas que se ve bastante bien. Bien, entonces, ¿cómo va a ir con la capacidad de respuesta? Entonces, como puedes ver aquí, esto posiblemente podría ser un contenedor de desbordamiento. Así que en realidad podría verse así, y luego el usuario podría desplazarse hacia la izquierda y hacia la derecha, o podríamos configurarlo para que las tarjetas del producto se envuelvan. Entonces aquí está el botón de aquí para rap, y luego veamos qué pasa si marcamos hacia abajo. Se ve que empiezan a envolverse, pero quizá queramos que también se estiren un poco. Estoy feliz de que ellos, en este caso, solo sean una situación de contenedor de desbordamiento. Y si queremos algo diferente, podemos arreglarlo fácilmente dentro de nuestro HTML NCSS Bien. Así que volviendo a poner esto al 14 40, el látigo original En esta lección, cubrimos principalmente cómo construir este componente único. Pero puedes ver que tenemos múltiples instancias aquí de este único componente. Y si vuelvo y cambio uno de estos marcadores de posición en una instancia real a esa imagen Entonces si voy a donde está el relleno, ahí está, y voy a subir desde computadora, pongo ahí la imagen del producto. Vamos a recortarlo una vez más para ponerlo en la posición correcta. Como tal. En realidad, he recortado un poco la parte superior, así que déjame retroceder eso. Para tocar, ¿de acuerdo? Eso se ve bastante bien. Como pueden ver, eso no va a cambiar ninguna de nuestras otras instancias. Pero si tuviera que ir aquí y cambiar el precio aquí en el componente real a 20, y luego miramos por aquí, verá que todas nuestras instancias ahora tiran 20. ¿Bien? Yo solo controlaré Z, volveré a poner eso a diez, y luego eliminaré esta imagen de producto en particular aquí porque no tengo las otras para poblar las otras ranuras Es necesario volver a poner ese relleno D 9d9d9. Bien. Entonces, en el siguiente video, vamos a hacer la sección final, que es la sección de pie de página, y luego continuaremos con la migración este diseño de escritorio a nuestro ancho de pantalla 390 más pequeño para móviles 8. Construye como un desarrollador: parte 5: Bien, así que ahora a la sección final de nuestra compilación aquí, y ese es el pie Entonces, una vez más, voy a duplicar esta plantilla de sección y encenderla, luego renombrar la sección a pie de página. Y este pie de página va a tener un color de fondo separado para indicar que es un pie de página. Así que sólo voy a agregar eso ahora mismo. Voy a usar una de nuestras variables de color en nuestra combinación de colores. Voy a usar plata. Bien. Eso se ve bastante bien. Renombrar inner a footer inner y para que esta sección tenga padding consistente como la última sección y cualquier otra sección que creamos en el futuro, voy a subir a la sección, y voy a agregar nuestro relleno superior e inferior de relleno de sección. ¿Bien? Genial. Ahora dentro de nuestro pie de página interior, podemos agregar en lo que queremos aquí. Entonces voy a traer de nuevo el logo, obviamente, demasiado grande, así que voy a marcar esto abajo a 113, igual que el encabezado, y por alguna razón, está fuera de lado aquí. Nuestro interior de pie de página aún no está en el diseño automático, así que voy a establecer eso y luego trae de vuelta nuestro logotipo. Bien. Entonces lo que voy a hacer, va a ser un pie de página bastante simple porque es un sitio web bastante sencillo como puedes ver, voy a tener un conjunto de menús a la derecha. Entonces para eso, podemos comenzar por la parte inferior o trabajar nuestro camino hacia arriba o podemos comenzar por arriba y trabajar nuestro camino hacia abajo. Entonces voy a empezar por la cima. Voy a añadir en otro marco aquí. Este va a ser menús de pie de página. Entonces voy a subir a mi pie de página interior, y voy a cambiar el flujo a horizontal y establecer la brecha aquí a automático. Luego en mis menús de pie de página, que va a ser empujado hacia la derecha, otro marco para un solo menú de pie de página. Entonces voy a llamar a este menú de pie y convertirlos en Auto Layout. Y luego dentro de Menú FDA, voy a agregar en algún texto. Entonces este va a ser el encabezado de nuestro menú de la FDA. Entonces lo voy a meter como tienda. A mí me gusta audaz. En lugar de usar Inter, aunque sea la misma fuente, voy a usar la variable que nos permita cambiarla posteriormente si así lo elegimos. Y luego voy a darle al Comando D para duplicar eso y cambiarlo a una fuente menos negrita, y aquí no vamos a usar mayúsculas, y voy a poner de nuevo el Comando D femenino y el masculino Entonces ahí lo tenemos, nuestro primer menú. Aquí podemos cambiar la brecha entre los artículos, pero estoy contento con diez. Y ahora lo que podemos hacer porque ya hemos configurado todo dentro de los diseños automáticos es que puedo hacer clic en el menú de pie de página, duplicar eso, y luego obtenemos otro menú a la derecha. ¿Bien? Entonces este va a ser nuestro menú de ayuda, primero, FAQ, segundo enlace información de entrega. Y como pueden ver, debido a que hemos flexibilizado esto, todo va a pasar a su posición automáticamente. El siguiente va a ser hacer una devolución. Si te estás preguntando dónde se me ocurrieron estos, básicamente me inspiré en otros sitios web, otros sitios web de comercio electrónico que venden productos similares y simplemente copié algunos de sus enlaces. ¿Bien? Así que aquí puedes ver que tenemos un pequeño problema. Esto se establece en una línea en el medio. Eso no queremos, así que cambiemos la alineación. Ahí vamos, para que nuestros rubros estén alineados. Entonces crearemos un menú más por aquí duplicando y voy a llamar a esto legal Estas van a ser nuestras políticas y términos y condiciones, privacidad, política, términos y condiciones, y luego simplemente eliminamos esa. Bien. Entonces ahí lo tenemos. Nuestros menús se van a ampliar para llenar el contenido, pero no me gusta cómo unos son mucho más grandes que los otros. Entonces voy a tomar el ancho de este, que es 172, y solo voy a hacer todos estos anchos mínimos 172. Entonces voy a agregar aquí 172, y en el otro por aquí, ancho mínimo 172. Y así estos serán al menos tan grandes como el menú de ayuda. ¿Bien? Así que ahí se puede ver, aquí tenemos un pequeño pie de página agradable. Y debido a que usamos el diseño automático para todo, déjame tomar los límites de nuestro marco aquí, cambiarlo de tamaño, y verás que funciona desde 769, que fue el mínimo, hasta tamaños de pantalla realmente grandes Ahí puedes ver nuestros trabajos de pie de página. Sólo voy a ampliar nuestra sección para cubrir eso. Y una cosa más que olvidé del último video es que tenemos nuestros componentes de tarjeta de producto establecidos en Auto ruidoso. Así que en realidad no probamos la capacidad de respuesta de esto. Se puede ver aquí. Sí, si lo hacemos extra ancho, es muy poco probable que sea así de ancho, así que realmente no tenemos que preocuparnos, aunque tal vez queremos fijarle un máximo, tal vez 450, más de 450, y está empezando a verse simplemente raro No quisiéramos que fuera más que eso. No vamos a poder redimensionarlo más grande que eso. Y entonces, obviamente, si bajamos de aquí a abajo, cómo es 250, entonces estamos consiguiendo cierta superposición con la calificación de estrellas. Así que queremos hacer de esto un ancho mínimo de 250 también, y luego puedes ver que realmente no podemos romper este diseño de tarjeta con el ancho mínimo y el ancho máximo y el diseño automático aplicados. Ahora que nuestra vista de escritorio se ve bien y es receptiva, pasemos ahora al móvil en el siguiente video. Y ojalá podamos migrar todos estos a móviles en una sola lección. Entonces te atraparé en la siguiente. 9. Construye como un desarrollador: parte 6: Este video ojalá final en esta sección sobre cómo construir nuestro diseño como desarrollador, vamos a traducir este diseño al móvil. Ahora, por supuesto, en la web, no tenemos dos marcos diferentes. Lo que tenemos es un punto de quiebre. Y desafortunadamente, es prácticamente imposible conseguir que este fotograma funcione hasta, digamos, 320 píxeles hasta 768. ¿Bien? Así que todavía vamos a necesitar un marco móvil. Y para el marco móvil, voy a hacer lo mismo que hemos hecho aquí. No quiero que este marco móvil se extienda más 768 porque entonces queremos entrar en nuestro diseño de escritorio. Así que voy a establecer un Max WIP, pero primero tengo que convertir esto en un diseño flexible Así que solo voy a cambiar A para hacer eso. Y luego configuraré el M WIP a Creo que el teléfono más pequeño que hay es como 320 No vamos a soportar teléfonos inferiores a 320, y le daremos un WIP máximo así de 768 como ya comentamos Bien, entonces, en realidad configuré el real con, no los valores min y max. Entonces, ¿qué fue? Eran 32768 Así que ahí tenemos a los dos. Así que aquí puedes ver cómo debería funcionar el diseño móvil desde el 320 hasta el 768, ¿bien? Pero voy a poner eso de nuevo a 390. Ese es el tamaño del lienzo que normalmente me gusta trabajar. Y primero vamos a traer a través de nuestro encabezado. ¿Bien? Entonces lo que voy a hacer es hacer clic en encabezado, clic en Comando C para copiar, ir a nuestro marco móvil por aquí y presionar pegar, y puedes ver aquí. Tenemos algo de relleno general en el marco, así que queremos deshacernos de eso. Bien. Realmente no necesitamos contenedores en el móvil, pero vamos a mantenerlos porque eso probablemente hará que sea más fácil de entender para la IA. Y queremos que el logo, antes que nada, sea más pequeño. Vamos a marcar, como, tal vez algo de la mitad de esos 75 pixeles. Parece que aquí tenemos demasiado relleno. Para que veas que tenemos algo de relleno en el encabezado interior y en el contenedor. Para que podamos elegir al malvado. Entonces lo voy a quitar para el encabezado interior y tal vez para el contenedor también. Utilizar tanto espacio como sea posible. Nuestro patrón común en el desarrollo web es tomar este menú aquí mismo, que es bastante amplio, sobre todo cuando tienes otros elementos del menú y convertirlo en un ícono de hamburguesa Entonces voy a borrar eso por completo, y luego voy a volver a ir a nuestra biblioteca de iconos y decir hamburguesa. Creo que no se llama hamburguesa, sino hamburguesa, pero pronto lo averiguaremos Entonces ahí está el menú de hamburguesas. De hecho, me parece una hamburguesa, y esta es la hamburguesa de menú, ¿de acuerdo? ¿Cuáles son los que tenemos? Sí. Entonces básicamente lo mismo recto o redondeado. Hacerlo recto, creo. Sí. Y luego vamos a pegar en ese icono. Solo necesitamos arrastrarlo a la posición correcta. Entonces lo voy a poner antes del logo, como pueden ver aquí. Y como tenemos un encabezado interno con un hueco automático, estamos obteniendo algo de espacio no deseado entre el icono de Hamburger y el logo Entonces voy a agruparlos juntos. Ahora bien, lo que esto va a hacer es que va a crear una inconsistencia con la versión de escritorio Entonces voy a hacer lo mismo en la versión de escritorio para mantener estos consistentes para la IA. Así que voy a ir aquí a nuestra versión de escritorio, y vamos a agrupar estos también, activar el diseño automático y luego llamar a este encabezado a la izquierda Y entonces podría incluso querer que estos artículos estén más a la izquierda. Entonces para cabecera izquierda, no voy a hacer un margen automático. Sólo voy a hacer una línea a la izquierda. Parece que hay algún relleno automático que se aplica aquí en alguna parte, o al menos un fijo con. Entonces lo que voy a hacer es establecer el Con aquí para abrazar contenidos. El menú sigue permaneciendo en posición. Para averiguar por qué es así. Parece que en lugar de algún relleno automático, estamos obteniendo algo de hueco automático. Entonces pondremos la brecha en no auto, pero vamos a dilatarnos en nosotros mismos, tal vez como diez pixeles, ¿bien? Entonces ahora tenemos de cabeza a izquierda con nuestro menú de encabezado y nuestro logo a la izquierda en el escritorio, y también tenemos lo mismo por aquí, y solo necesitamos deshacernos de ese espaciado automático aquí. Como puedes ver aquí, está usando flujo de forma libre. Voy a poner eso en horizontal, y luego voy a establecer la brecha para que empecemos con diez. Bien. Creo que necesito un poco más de diez. 20, digamos, a dónde nos dirigimos en cabecera izquierda. Bien, es abrazar contenidos. Está alineado en el medio. Tiene una brecha de diez píxeles. A lo mejor vamos a aumentar eso a 15 píxeles. Bien, genial. Bien, así que ese es básicamente nuestro encabezado. Entonces lo siguiente que traeremos a través es nuestro héroe. Entonces voy a agarrar al héroe golpeando al Comando C para copiar. Y luego por aquí en nuestros diseños móviles aquí mismo, voy a golpear pegar, y se puede ver pasado en el mismo contenido. La imagen de héroe para móviles va a ser diferente. Y esto es bastante común dentro del desarrollo web tener diferentes imágenes de banner basadas en la diferencia entre escritorio y móvil. Entonces voy a entrar aquí, y tengo una versión alternativa, hero Image para móviles. Entonces voy a subir eso, y también voy a disminuir la altura de este héroe. Parece que algo tiene un mínimo, lo que probablemente se hereda del diseño del escritorio. Entonces déjame ver qué está pasando aquí. Altura establecida para llenar. Bien, sí. Entonces déjame ver por aquí. Sí, tenemos una altura mínima de 900. Definitivamente queremos cambiar eso por móvil. Digamos, tal vez altura mínima de 500, y luego marcaremos hacia abajo la altura a 500. Y ahora puedes ver que tenemos nuestros modelos más en el marco. Entonces tal vez digo altura mínima 450, marque esto hacia abajo aún más. Bien, eso es un poco más agradable. Y luego envía un mensaje de texto aquí mismo. No queremos ser tan grandes, obviamente, así podemos poner 36 para el tamaño de fuente del encabezado, tal vez, dejémoslo a los 16, solo para que sea más legible. Y entonces voy a disminuir la brecha aquí, tal vez solo quite la brecha por completo y luego lo mismo entre el texto del héroe y el botón. Entonces voy a hacer que tal vez cinco pixeles. Estamos recibiendo algo de relleno en la parte superior e inferior de 165. Eliminemos eso y veamos qué pasa. Bien, obtenemos nuestro texto hasta la cima. Solo alineemos el centro para obtener esa alineación en el medio, y estoy bastante contento con eso. Bien, entonces siguiente sección, la sección de colección destacada Voy a copiar eso que entra en nuestro diseño móvil. En realidad, antes de hacer eso, voy a establecer la altura de nuestro marco móvil para abrazar contenidos. Entonces va a estar haciendo que el marco sea tan grande como el contenido dentro de él, pero no más. Ahí puedes ir. Y luego sobre nuestro móvil, voy a pegar en nuestra colección destacada, lo que inevitablemente hará que nuestro marco móvil sea más grande. ¿Bien? Ahora puedes ver que tenemos nuestro relleno de sección, pero es bastante pesado a 75 píxeles. Entonces lo que podemos hacer es que podemos establecer un relleno de sección diferente en el móvil. Así que voy a quitar esto, y vamos a jugar con algunos números, primer lugar, antes de establecer la variable. ¿Cómo está el 25? Bien. Creo que quiero hacer 35 solo por un poco de espacio extra para respirar, ¿de acuerdo? Y luego en variables por aquí, puedo si estás en la versión gratuita de Figma, tendrás que crear otra variable, así puedes llamar a esta sección padding mobile, ¿verdad Establezca eso en 35 o cualquiera que sea su acolchado deseado. Y luego, como hemos visto a lo largo la clase, agrega eso aquí. Derecha. Pero en realidad, si estás en un asiento deb, que veremos un poco más tarde cuando hablemos del servidor MCP, realidad puedes crear diferentes modos para tu relleno de sección Así que no voy a demostrar eso ahora, pero más adelante, vamos a crear un modo separado, ¿de acuerdo? Voy a cubrir eso en una lección posterior. Por ahora, hagámoslo de la manera que esté disponible gratuitamente con Figma. No se requiere suscripción paga Figma para hacer este enfoque. Solo necesitamos separar el relleno de sección en dos variables diferentes para escritorio y móvil. Bien. Ahora tenemos esto un poco de espacio en blanco aquí que necesitamos resolver. Déjame ver qué está pasando ahí. Creo que eso podría estar viniendo del marco general. Aquí se puede ver que hay una brecha. No queremos ningún hueco entre secciones, así que voy a quitar eso. Ahí vamos. Obviamente, este rubro necesita ser mucho más pequeño. Así que vamos a marcar, digamos, 32, ¿de acuerdo? Poco demasiada brecha entre estos dos ahora, así que voy a trabajar en eso a continuación. A lo mejor diez. Bien, genial. Y si estamos contentos con un contenedor que se desborda horizontalmente, en realidad podríamos dejarlo así, ¿de acuerdo? Por lo que el usuario puede desplazarse a las otras tarjetas de producto de la colección. ¿Todo bien? Solo echemos un vistazo a lo receptivo que es esto hasta ahora. Todo está usando auto-layout, por lo que debería ser bastante bueno Bien, se ve bastante bien, excepto cuando empezamos a perder espacio por aquí. Así que soy muy pequeño tamaño de pantalla. Entonces podemos o crear otro marco o simplemente para hacer esto más flexible, poner la fuente abajo en esto. Sé que dije que lo quería a los 16, pero hagamos eso 14. Y en realidad, el texto de nuestro botón también podría ser un poco más pequeño . Entonces voy a hacer ese 14. Ahora nuestro héroe debería funcionar mucho mejor, sin importar el tamaño de pantalla 768-320 Hay algunos tamaños de pantalla en los que hay un problema de UX en términos de el usuario podría no saber que puedes desplazarte. aquí, puedes ver que hay, ya sabes, una tarjeta de producto que se está cortando, por lo que debería indicar al usuario que puede desplazarse hacia la izquierda y hacia la derecha. Pero por aquí, no tanto, y hay algunos recortes de la colección de largometrajes No voy a entrar en tratar de arreglar ese infigma porque esa es una mejora menor que podemos hacer una vez que lleguemos al código Entonces voy a dejar eso como está por ahora. Pero en general, es bastante receptivo. Y luego finalmente, voy a poner en nuestro pie de página aquí. Así que haz clic en Comando C, ve a nuestro marco móvil, dale al Comando V. Y lo que queremos hacer por aquí es rejig esto un poco, obviamente No queremos usar el relleno de la sección de escritorio. Queremos usar el acolchado de la sección móvil aquí ¿qué tan bajo pusimos el logo? Eran 75 pixeles. Así que hagámoslo por aquí también. Dónde está Axis Whip 75 pixeles. Bien. Juguemos con algunas de estas opciones de flujo aquí. A lo mejor lo pusimos en vertical. En realidad, uno de los problemas que probablemente estamos enfrentando es que estos menús de pie tienen un látigo mínimo, así que solo queremos quitar esos látigos mínimos, No creo que el último lo tuviera. Pero realmente no parece haber suficiente espacio horizontal para todos estos pies y menú. Alinear horizontalmente. Entonces voy a ir por aquí y pondré la dirección del flujo vertical y la alineación a la izquierda. Y si, creo que estoy contento con eso, en realidad. No se ve tan mal. Veamos qué tan receptivo es eso. Sí, funciona desde 320 hasta 768. Entonces eso es bastante bueno. Estoy bastante contenta con eso. Y eso es suficiente indicación, yo esperaría de cómo queremos que los elementos nuestra página se rejig para móviles Bien. Entonces, ahora que hemos terminado construir nuestro diseño como un desarrollador, veamos cómo podemos transformar esto en código HTML y CSS de la vida real. 10. Figma para codificar con IA de Locofy: Bien, así que en los últimos videos, cubrimos la construcción de este diseño responsive en Figma. Y en los siguientes dos videos, vamos a cubrir dos métodos para generar código HTML y CSS directamente a partir de este archivo FIGMA Ahora, te animo a crear tu propio diseño Figma y luego recorrer este proceso que te voy a mostrar en este y el siguiente video Pero si quieres copiar mi diseño, solo puedo compartirlo contigo aquí en Skillshare para que puedas probar esto sin necesidad crear tu propio diseño Pero te animo a que hagas tu propio diseño. Es importante poner en práctica estas habilidades si realmente quieres aprender te animo a crear tu propio diseño. Y como hablaremos de líder en la clase, te animo a subir eso como proyecto de clase aquí en Skillshare Bien, así que sin más preámbulos, entremos en el proceso de en este video, convirtiendo nuestro diseño Figma en HTML y CSS con un plugin Figma Puedes ver por aquí porque lo he usado antes en mi lista de plugins, tengo a Locofy aquí mismo Pero para el resto de ustedes, puede hacer clic en Acciones aquí mismo y puede buscar Locofy Puedes filtrar hasta plugins y widgets. Como pueden ver, ya se está mostrando ahí porque es un plug in reciente para mí. Pero si no, solo puedes buscar Locofy y luego hacer clic en ese enchufe Algo que debo señalar antes de ir más lejos es que entre videos, he actualizado el nombre de mi frame para que tenga homepage dash al inicio, homepage desktop, homepage mobile. Eso es para ayudar a Locofy AI a identificar que estos dos marcos representan la misma página pero diferentes Entonces veamos qué tan bien Locofy hace eso ahora. Entonces, antes de seguir adelante, es importante tener en cuenta que los resultados realmente varían al usar estas herramientas de IA, ya sea Locofy o el servidor MCP, que veremos un Incluso usando el mismo proyecto Figma con el mismo prompt puede producir resultados inconsistentes Así que tenlo en cuenta, la salida puede ser inconsistente. Y así, si estás comparando tu resultado con mi resultado, muchas veces simplemente no va a ser lo mismo debido a la variabilidad aleatoria Bien. Entonces como pueden ver aquí, tengo dos opciones. Puedo usar el clásico o el relámpago. Estas son las dos opciones a la hora de grabar. Y claro, si no te has registrado antes en Locofy, sí necesitas registrarte para obtener una cuenta gratuita o una cuenta de pago, lo que quieras hacer con ella Obviamente lo hice antes de tiempo. Pero ahora que tengo una cuenta con Locofy obviamente, no tengo que volver a pasar por esos escalones de embarque Pero solo anotando, si es tu primera vez, tendrás que pasar por la configuración de la cuenta, ¿de acuerdo? Debe ser completamente gratuito para los efectos de esta clase Figma Realmente no necesitas más tokens de los que proporcionan en el plan gratuito. Así que voy a hacer clic aquí para convertir a código, y voy a seleccionar nuestros dos marcos de página principal, y ojalá Locofy AI detecte automáticamente que pertenecen a la misma Entonces voy a golpear Convertir a fotogramas, y como pueden ver eso ha funcionado. Ahora, está luchando por encontrar el marco de la tableta aquí mismo. Obviamente, no hay marco para tablet. Entonces, lo que podría hacer solo para que sea más fácil, queremos que sea lo más fácil para la IA hacer lo suyo como sea posible. Así es como vamos a obtener los mejores resultados de ello. No quiero que piense que el punto de interrupción móvil es 390 Entonces lo que voy a hacer es simplemente voy a duplicar nuestro diseño móvil aquí y cambiar el nombre del duplicado a tablet. Así que voy a arrastrar esto hasta su máximo de 768 y etiquetar esto como tableta. Bien. Todos son los mismos elementos y mismo contenido que el diseño móvil, pero simplemente estamos indicando aquí para locificar que todo debería ser Obviamente, receptivo. Queremos el mismo diseño en estos dos puntos de interrupción. Básicamente, solo hay un punto de interrupción, y ese es 768. ¿Bien? Así que volvamos a Locofy, pulsamos Convertir a código Luego seleccionaremos esos tres marcos pertenecientes a la página de inicio. Y ahora deberías ver que identifica correctamente los diferentes puntos de interrupción ¿Todo bien? Entonces voy a darle a Confirmar, y ahora Locofy hará su Obviamente, esto va a llevar algún tiempo, así que voy a estar avanzando rápidamente a través de partes de esto. Todo bien. Y ahora podemos ver una vista previa dentro de la app de Locofy Así que voy a hacer esto un poco más grande si puedo. Parece que no puedo eso más grande a menos que vaya a pantalla completa y eso es solo por el código. En fin, así que echemos un vistazo. Vamos a desplazarnos hacia abajo. A mí me parece bastante bien, ¿de acuerdo? No ha identificado que se trata de enlaces, pero así es. Eso lo podemos agregar en nosotros mismos. Bajemos al 960 y veamos qué pasa. Bien, hay algo de espacio en blanco a la derecha, y como que perdemos nuestro cabezazo. Entonces una vez llegamos al 768, empezamos a ver el diseño de la tableta, y si vamos a 420 o 390. Curiosamente, a las 390, funciona, pero no se ha dado cuenta que a las 4:20, todavía queremos ese Pero esto no es necesariamente un gran problema. El mayor problema es que el HTML se ha creado correctamente, porque podemos finsce un poco el CSS, arreglar pequeñas cosas Pero si el HTML es un desastre, entonces tenemos que refactorizar todo el proyecto Entonces voy a echar un vistazo a nuestro código aquí o al menos el código que Locofy ha generado Está trayendo algunas hojas de estilo externas de la API de fuentes de Google, pero estas probablemente se van a romper cuando lleguen porque la familia está configurada para objeto objeto. Ese es un bicho que he notado en Locofy. Echemos un vistazo en nuestra sección de cuerpo. Entonces, como puedes ver aquí, tenemos todo el escritorio de la página de inicio en un div, y luego tenemos nuestro encabezado. Tenemos nuestro contenedor, tenemos un encabezado interior. Bien, eso es bueno. Encabezado a la izquierda. Bien, bien, encabezado a la derecha. Y luego terminamos con ese encabezado. Pasamos al héroe. Tenemos al héroe. Contenedor de página principal. No estoy seguro de por qué es contenedor aquí y un contenedor de página principal. A mí me gustaría que esos fueran consistentes. Y aquí es donde normalmente he visto problemas con Locofy, como puedes ver Tienen dos versiones diferentes del héroe HTML. Tienen uno para escritorio y otro para móviles. Pero como puedes ver aquí, el contenido está duplicado. Los nombres de las clases también son un poco raros. Entonces puedes ver aquí que tenemos lo que era contenedor aquí arriba. Entonces tenemos contenedor homepage y luego contenedor dos. Estos deberían ser todos del mismo nombre, solo contenedor. Y entonces este es un nombre de clase bastante raro. Realmente no queremos nombrar así a nuestras clases. Y si bajamos aquí, contenedor tres, de nuevo, la idea era simplemente tener una clase de contenedor centralizada. Podríamos entrar y arreglar las clases, arreglar esta duplicación de contenido. Pero en el siguiente video, te voy a mostrar lo que suele obtener un mejor resultado para mí, ¿de acuerdo? Como puede ver, estamos usando un elemento de sección aquí para la ficha del producto. No necesariamente elegiría un elemento de sección para la ficha del producto, pero como pueden ver, la estructura es consistente entre las tarjetas, que es entonces bajamos a nuestro FOOTA Tenemos el contenedor FOOTA cuatro, que prefiero ser contenedor porque estamos usando el mismo contenedor en todo el sitio web y luego meterlo con nuestros menús FODA de imagen Yo no usaría un elemento B. Eso es bastante anticuado en HTML y CSS. Pero honestamente, esto quita mucho de nuestro trabajo para empezar. Creo que podemos pulir esto y obtener un resultado bastante bueno. Dicho esto, encontré una mejor herramienta para el trabajo, que voy a cubrir en el siguiente video. Entonces, antes de pasar al siguiente método, solo voy a hacer notar que la siguiente opción va a ser una opción de pago. Vamos a necesitar un asiento dev con Figma para poder usarlo si no tienes presupuesto para gastar en absoluto, tal vez dale una oportunidad a Locofy y trabaja en arreglar el código de Locofy o mira Pero para aquellos de ustedes que tienen al menos 15 dólares, creo que es una mamá de sobra. Echemos un vistazo al uso del servidor MCP en el siguiente video 11. Figma para codificar con cursor y el servidor MCP de Figma: Bien, así que estamos de vuelta dentro de nuestro proyecto en Figma, pero podrías notar que la interfaz es un poco diferente, y eso es porque actualmente estamos ejecutando la versión de escritorio de la app Figma Ahora ambas aplicaciones funcionan increíblemente bien. La aplicación de escritorio y la aplicación web para mí sienten exactamente lo mismo. Pero la razón por la que tengo el proyecto abierto en la aplicación de escritorio es porque esto es necesario para ejecutar un servidor MCP local Bien, entonces entraré en lo que eso significa en solo un segundo. Pero antes que nada, necesitamos dos cosas descargadas si no las tienes ya. Número uno, vas a necesitar la versión de escritorio de Figma. Así lo puedes encontrar en las descargas de Figma. Yo uso un Max, así que voy a estar dando click en éste. Si usas Windows, obviamente, darás click en éste. Y luego también, quiero que descargues Cursor. Puedes usar otro navegador si no quieres usar Cursor, pero las instrucciones de instalación para el MCP van a ser un poco diferentes Entonces, si quieres seguir exactamente, necesitarás usar Cursor. De lo contrario, si estás familiarizado con la instalación MCP o quieres investigar cómo hacerlo en un editor de código diferente, no dudes en hacer un editor de código diferente Por último, como mencioné al final del último video, solo para hacerte saber que si quieres usar el servidor MCP, necesitarás un asiento Dev Entonces, si miramos hacia abajo los diferentes planes aquí, si haces un año del asiento de Dev, van a ser 12 dólares al mes. Mensualmente, son 15 dólares al mes, y como pueden ver aquí abajo, necesitamos esto para poder usar el Servidor MCP, ¿de acuerdo? Entonces, si no estás dispuesto a probar esto durante al menos un mes, dudes en saltarte este video. Pero descubrí que obtengo mejores resultados usando Cursor y el Servidor Figma MCP Bien, entonces lo que voy a hacer es obviamente, tengo mi programa Figma abierto aquí Pero lo que aún no tengo es una carpeta para insertar el código generado. Entonces voy a abrir mi carpeta Skillshare y llamar a este sitio web de Access Bien. Entonces voy a ir a Cursor y abrir esa carpeta. Este es Cursor, se parece mucho al código de Visual Studio, que es el editor de código habitual que uso. Y para conectar Cursor a Figma a través del Servidor MCP, vamos a subir a en Mac el elemento del menú que dice Va a estar un poco fuera de tu pantalla, pero luego una vez que haga clic en él, verás que aparece este menú. Entonces vamos a entrar en ajustes. Entonces vamos a entrar en la configuración del Cursor. Entonces vamos a buscar MCP a la izquierda aquí, y ya pueden ver, ya tengo dos servidores MCP configurados, así que solo los eliminaré rápidamente y lo restableceré con Bien, entonces los he quitado, y ahora se puede ver con un emptmcpt jcnfle, puede dar click aquí para agregar MCP personalizado, y luego dentro de este objeto, vamos a agregar, déjame simplemente acercar aquí, crear simplemente acercar Para que podamos ver esto claramente. Voy a escribir la palabra Figma con una F. Y luego dentro de aquí, se puede ver la sugerencia, URL, y luego la dirección al servidor MCP local Le pegaré a Guardar en eso. Ahora bien, es probable que Cursor ya lo haya sugerido porque eso es lo que tenía anteriormente. Entonces, si te estás preguntando cuál es la URL específicamente en tu caso, creo que es exactamente lo mismo sin importar el usuario, pero cuando enciendes el servidor MCP en Figma, sí te da la Entonces volvamos a Figma. vamos a hacer click en lo que se conoce Aquí vamos a hacer click en lo que se conoce como el menú Figma Vamos a bajar a las preferencias. Y luego vamos a asegurarnos de que se marque habilitar el Servidor MCP local Obviamente, ya tengo esto encendido, así que apaguemos eso y luego volvamos al menú, y te mostraré cómo funciona esto si aún no lo has encendido. Haré clic en Habilitar servidor MCP local. En realidad te dará las instrucciones aquí para que puedas ver aquí, podemos llamarlo Figma o Figma escritorio y eso te dará la configuración de instrucciones A lo mejor sólo copia eso. Eso ha cambiado desde la última vez que hice esto. Ast vez en realidad se le ocurrió la URL en un pequeño consejo de herramientas por aquí, y luego simplemente copié eso aquí. Pero como dije, no creo que esta URL cambie nunca. Es una URL local. Entonces, si tienes el servidor MCP encendido en tu escritorio para Figma, es probable que esta sea la URL ¿Bien? Si hacemos click out mcp dot JCN, deberíamos poder ver ahora si alejo escritorio Figma está habilitado con este icono verde Bien. Así que ahora podemos generar realmente el código a partir de nuestro archivo Figma Entonces lo que voy a hacer es que voy a crear un prompt aquí. Voy a decir dentro de mi archivo Figma, tengo una sección con mis marcos para la página principal Y lo que voy a hacer es que solo creé una tercera versión para ayudar a locificar, así que voy a deshacerme de Y sólo voy a renombrar. En lugar de móvil, voy a decir en realidad, lo voy a mantener móvil y luego solo le diré a Cursor que quiero eso en cierto punto de interrupción. ¿Bien? Entonces dentro de mi archivo Figma, déjame hacer esto más grande Dentro de mi sección Figma fiile Abe con mis marcos para la página principal, el escritorio de la página principal del marco es el aspecto y el diseño previstos 769 píxeles y superior, y punto de la página principal Mobile representa el diseño y la disposición ¿Bien? Por favor, genéreme el HTML y CSS para esta página de inicio, manteniendo el HTML duplicado al mínimo absoluto. Ahora, antes de presionar Enter en este prompt, he escrito algo similar en Cursor usando el mismo proyecto y obtuve cierto resultado. Pero como dije, los resultados pueden variar. He escrito ciertas cosas en el prompt como mantener el HTML duplicado a un mínimo absoluto es por lo que vimos en Locofy AI en el video anterior con ese HTML duplicado para la sección hero A menos que sea absolutamente necesario, no queremos ningún HTML duplicado. Y cualquier otra cosa que se te ocurra para darle más contexto a la IA o para ayudarla entender mejor los requisitos, puedes poner aquí. Pero lo principal es que Cursor entiende que los dos fotogramas representan la misma página, pero en diferentes puntos de interrupción Y lo que me gusta de Cursor, por cierto, es que en realidad puedo escribir en el punto de interrupción exacto que quiero, que no es una característica de Locofy ¿Bien? Entonces voy a presionar este botón para mandarle eso al agente y ver con qué viene. Es posible que tengamos que hacer clic en Ejecutar algunas veces aquí. Me alejaré un poco, arrastraré esto. Sigue haciendo clic en Ejecutar. Estos son métodos en el propio servidor MCP Así que voy a seguir aprobando estos. Y obviamente, como esto toma un poco de tiempo para que la aplicación funcione, voy avanzando demasiado rápido a través de gran parte de este proceso. Mm. Bien, entonces parece que ya está hecho. También nos proporciona mucha información sobre lo que se hace, también. Para que puedas ver el diseño responsive. Cuenta con el punto de interrupción, estructura HTML única que funciona tanto para escritorio como para móvil. Eso es lo que queremos. Clases CSS para mostrar y ocultar elementos basados en el tamaño de la pantalla, componentes reutilizables para tarjetas de producto y menú de navegación. Perfecto. Bien. Entonces, por lo que estamos leyendo aquí mismo, parece bastante bueno. Entonces voy a darle a Keybll. No tengo ningún comentario. Obviamente, no he mirado el código, pero obviamente puedes dar retroalimentación sobre el código que genera. En cambio, lo que quiero hacer es solo quiero ejecutar este código en nuestro navegador y ver el resultado. Hagámoslo primero. Lo que voy a hacer para hacer eso es hacer clic aquí abajo para ejecutar Live Server. Esto es un plug in, así que si actualmente no tienes esto, solo tendrás que entrar en extensiones, y si miro dentro de mis extensiones aquí, servidor en vivo aquí mismo, este es el de RIT WIC Day Déjame alejar el zoom para que puedas ver el listado completo o la mayor parte. Servidor en vivo por RIT Wi Day. Con ese nard, puedes hacer clic en Go Live aquí abajo y ahora tenemos nuestro sitio web en nuestro navegador. Pasemos el cursor sobre nuestros elementos del menú, y como puedes ver, tiene puntero Cursor, que es correcto Eso es algo que no teníamos en Locofy AI, y el botón tiene un bonito efecto hover Las tarjetas de producto se ven bastante bien, pero tienen un borde redondeado, que no es lo que puse y un poco de sombra. El texto destacado de la colección está en el medio, no a la izquierda, pero quizás nos gustaría ir con este diseño en su lugar. Se ve bastante bien. Entonces en esta pantalla Whip, esto se ve bastante bien Estoy bastante contento con esto. Veamos la página web ya que responde a diferentes látigos de pantalla Bien, bastante bien. Como puedes ver aquí en como 958, las tarjetas están un poco comprimidas. Nos gustaría arreglarlo un poco. Una vez que bajamos por debajo de 768, estamos obteniendo el menú de Hamburguesa y los elementos del menú aquí Realmente no queremos eso, y estamos haciendo que las cartas se apilen un poco raras, pero eso es fácil de arreglar. Bajemos a 390. Bien. Y con la excepción de este menú aquí y la posición del menú Hamburger, no estar a la izquierda del logo, esto se ve bastante bien, y se puede ver que se ha decidido apilar nuestras tarjetas de producto en lugar de tenerlas como desbordadas horizontalmente ¿Bien? Así que estoy bastante impresionado con las cosas que se ha equivocado, probablemente podamos arreglar fácilmente. Solo verifiquemos que el HTML ha sido escrito muy bien. Entonces voy a entrar en índice punto HTML, y entonces tal vez voy a cerrar esto o tratar de crear un poco más de espacio aquí, cerrar el chat. Como puedes ver aquí, tenemos un enlace a la API de fuentes de Google, que en realidad está funcionando, que en realidad está funcionando, a diferencia del ejemplo de Locofy Y si miramos el encabezado, tenemos capas que imitan los nombres configuramos en nuestra Figma. Esto es lo que yo buscaba. Así que encabeza nuestro contenedor centralizado, cabecera interior, cabeza de izquierda, cabecera derecha. Eso se ve bastante bien. Puedes ver que tenemos una sección aquí, un conjunto de HTML para el héroe. Está usando la misma clase de contenedor aquí, que es exactamente lo que queremos. Está usando esa clase de contenedor a lo largo de nuestra página web. Perfecto. No es usar una sección para la ficha del producto, que es un pequeño detalle, pero aún así, creo que es mucho más inteligente. Desplázate hacia abajo para ver el pie de página. De nuevo, esa clase de contenedor que tenemos para toda la página, y estoy bastante contento con este HTML. ¿Bien? Lo único que tendremos que arreglar es que actualmente está sirviendo estas imágenes a través de Figma. Así que solo necesitamos mover las imágenes ya sea a la carpeta aquí o a alguna dirección que no sea nuestra dirección local aquí porque no pudimos publicar esto la web porque es una versión local del servidor Figma Bien. Pero todas las cosas consideradas, estoy muy contento con este resultado. Y luego el siguiente video, limpiemos un poco nuestro código, lo que no debería ser demasiado trabajo, dado que la IA ha hecho bastante buen trabajo al generar automáticamente el código. Te voy a mostrar que los modos variables cuentan con Figma, y luego terminaremos la clase Entonces te veré en la siguiente. 12. Limpieza de código final: Bien, así que en el último video con el uso del servidor MCP Figma y el generador de IA habilitado como Cursor, pudimos crear nuestra página web con la estructura HTML adecuada y los nombres de clase, además del CSS para que funcione en cada tamaño de pantalla, I E para ser responsive, pero no es 100% del camino ahí No podemos simplemente tomar este resultado y enviarlo directamente. Tenemos que hacer algunos cambios. Pero creo que estarás de acuerdo conmigo en que IA ha hecho un trabajo bastante bueno. Solo tenemos que hacer lo último, digamos, 10% de refinamiento para arreglar este diseño Bien. Entonces si miramos esta es la pantalla más grande con, pero tal vez si simulo esto en una pantalla mucho más grande con, me pregunto si podemos marcar esto para ver cómo es en 4,000. Bien, genial. Entonces ahí se puede ver que esta es una pantalla poco probable con, pero aún así algo que es posible. Y el único problema que veo en este látigo de pantalla son las caras de los modelos Recuerden que dije antes cuando estábamos agregando el relleno de fondo, era que sería bueno controlar el posicionamiento, el punto de anclaje de la imagen de fondo. Entonces podemos hacer eso dentro de HTML y CSS. Hagamos clic en nuestra sección de héroes aquí. Veamos cómo han incluido la imagen. Sí, así que lo acaban de poner como imagen de fondo sobre el elemento a través del CSS. Y lo que voy a hacer para que no estemos confiando en los servidores Figma MCP, voy a mover estos archivos de activos sobre y refactorizar Pero antes que nada, quiero cambiar la posición de fondo. Lo siento. Todo está un poco apretado aquí mismo. Y como pueden ver, cuando vuelo el cursor sobre esto, llena todo el espacio Pero básicamente, lo que estamos buscando es la posición de fondo aquí. Y en vez de centro, quiero que esto esté en la cima. Ahora bien, esto se ve un poco raro porque su barbilla está un poco cortada. Entonces tal vez queremos establecer otro punto de ruptura y en tamaños de pantalla muy grandes, tal vez hacer que la altura de la sección sea aún más grande. Entonces voy a usar mis herramientas de desarrollo aquí para marcar en una altura mayor, tal vez no 12. Cien, pero 1,000 pixeles tal vez miro el encabezado, que mide 98 pixeles de alto, y hago que esto se extienda hasta la parte inferior del pliegue, así que puedo hacer eso yendo Cuk 100% altura de viewport menos lo que era otra vez, 98 Bien. Bien. ¿Voy a volver a entrar en Cursor Va a ir al final de nuestro archivo CSS aquí, poner en media ancho mínimo, y digamos 1,500 para empezar. El selector es hero, y vamos a establecer la altura Calk 100 viewport height -98 ¿Bien? Y luego vamos a cambiar la posición de fondo superior, no en una media query, sino solo en general. Entonces vamos a buscar héroe. En lugar del centro de posición de fondo, cámbielo a la parte superior. Bien. Eso se ve un poco mejor. Pero en lugar de arriba, podemos marcar algo un poco aún más apuntado, y eso es para poner en posición de fondo hemos perdido nuestro atributo aquí. Déjame hacerlo directamente en el código aquí. En vez de arriba, voy a hacer posición de fondo Y. Y luego voy a poner como 5%. Todo bien. Juguemos con eso, para que podamos hacer 5% es sobre eso, que lo mueve un poco hacia arriba en comparación con arriba, como puedes ver aquí. 5% reduce un poco el espacio por encima de la cabeza del tipo. Bien, entonces bajemos nuestro ancho de pantalla. Recuerden, lo fijamos en mil 500. Entonces, si bajamos a mil 500, todo esto debería funcionar para nosotros. En realidad, también necesitamos establecer nuestra posición de fondo X, porque como puedes ver aquí, no está centrada. Entonces traeremos de vuelta nuestro posicionamiento central sobre el eje horizontal, como tal. Bien, genial. Y luego una vez que llegue por debajo de mil 500, verás que la altura no es tan alta, ¿verdad? Y así hasta mil 200, creo que todo se ve bien. Estoy bien con esto. Si quisiéramos que nuestras tarjetas se parecieran más al diseño original sin el radio del borde, si quisiéramos quitar las pezuñas grapadas y si quisiéramos quitar las sombras, podríamos hacer eso Pero estoy bastante bien con esto. Lo único con lo que tengo un problema es que son bastante altos, así que no sé si quiero eso. Así que permítanme simplemente eliminar el modo de respuesta y disculpas por que esto sea súper apretado aquí mismo Y veamos qué hace que eso sea así. Si echas un vistazo a nuestro contenedor, solo tiene 847 píxeles ancho porque tiene un relleno masivo. Bien. Entonces en la clase contenedor, hay un relleno gigante que se ha establecido, que no es lo que buscamos. Yo creo en la Figma, establecemos el relleno del contenedor a 16 Entonces en realidad, por alguna razón, no me deja cambiarlo. Pero volvamos a nuestro código aquí, busquemos contenedor. Y entonces creo que si lo buscamos de nuevo, se puede ver que tiene el relleno de 16 píxeles, pero sólo hasta 480 píxeles aquí mismo. Así que sólo podemos eliminar esto por completo. De los estilos de escritorio aquí, y luego el que está por debajo de 480, podemos eliminar eso también porque eso es simplemente redundante y solo nos quedaremos con relleno de 16 píxeles a cada lado. Ahora bien, si echamos un vistazo, no están tan apretados, solución bastante fácil. Todo bien. Así que volvamos a verificar de nuevo nuestros tamaños de pantalla súper ancha, ¿cómo te ve eso? Marquemos 4,000 pulg. Fresco. Estoy contento con eso. Si bajamos a mil 200, estoy bastante contento con eso. Bajemos a mil. Genial, genial. Todo bien. Así que probablemente estamos donde estamos por aquí. Así que eso es 1030. Vamos a bajarlo, abajo, abajo, abajo, abajo. Creo que aquí se está apretando un poco. Tal vez queramos establecer un punto de quiebre de tal vez como 10,000 al punto de interrupción móvil A lo mejor queremos dividir esto en una grilla diferente, tal vez una grilla de dos en dos como esa. Y luego las tarjetas de producto cambian el ancho máximo en ellas, por lo que se ve un poco así. Y yo hago eso. Vamos a crear un punto de ruptura al final de nuestro archivo CSS aquí. Mín con 769 píxeles y Máx con 10,000. Y entonces, ¿qué tenemos? Vamos a quitar el ancho máximo de la ficha del producto, Max con, digamos, 100%, y lo que era, cuadrícula del producto. En realidad, sólo voy a copiar esto. Me ahorra algo de tiempo escribiendo esto, ponlo en dos, la misma brecha que antes. Entonces ahora se puede ver una vez que obtenemos de la realidad, podría haber puesto esto en demasiados ceros. Ahí vamos. Una vez que lleguemos por encima de 10,000, tendremos cuatro horizontalmente. Pero luego una vez que bajemos hasta aquí, verás que obtenemos una grilla de cuatro. Y así eso debería ser bueno para todos nuestros tamaños de pantalla de escritorio. Así que 769 todo el camino a realmente grande, como, hemos probado hasta 4,000 Ahora echemos un vistazo a abajo 769. Y como pueden ver, tenemos algo de trabajo que hacer aquí. Por lo que ya no queremos que este menú se muestre. Entonces sí dice solo escritorio, lo cual es interesante. Y tiene una clase que está lista para mostrar ninguna. Pero entonces, claro, está siendo sobrescrita aquí por esta otra clase Hay algunas cosas que podemos hacer. Podríamos ponernos importantes aquí. Podríamos cambiar el orden. Dado que dice solo escritorio, estoy bien establecer estos dos importantes, bien, porque es un nombre de clase bastante específico. Por lo general, hay que tener cuidado con la importancia, pero si estoy poniendo el escritorio de clase solo en algo, es bastante seguro que no quiero que eso se muestre. Bien. Ahora, la otra cosa en la cabecera es que el menú móvil está sobre a la derecha. No sé cómo se equivocó la IA. Eso no era parte del diseño en absoluto, pero podemos simplemente entrar en nuestro archivo de índice aquí y moverlo directamente de head of right over to header left. ¿Bien? Vaya, crea el espacio ahí, póngalo ahí, y verás que está en la cabeza o a la izquierda La alineación se ve un poco apagada. Están establecidos para alinear los elementos al centro, pero a veces los iconos tienen una altura un poco extraña. Entonces como puedes ver aquí, el botón es un poco más grande que el SVG dentro de él. Hay algunas maneras de arreglarlo. Una de ellas es poner display flex en esto. Ya veo. Solo móviles tenemos Bloquear Importante bloqueándonos. Entonces sí, solo usaré Importante cuando estamos hablando de mostrar ninguno, y luego pondré display flex aquí con align items establecidos para centrar en el botón real en sí, y puedes ver que con eso encendido, como que lo mueve a su posición. Entonces voy a ir a Menú alternar aquí, punto Menú Toggle. Y como puedes ver aquí, en lugar de que yo intente crear todo este HTML y CSS a partir del diseño, estoy usando IA para recortar como, 80% del trabajo, y luego solo puedo refinar esto con un poco de limpieza de código, ¿de acuerdo? Entonces estos ya se están apilando uno encima del otro, lo cual no creo que sea el movimiento correcto. Entonces, encontremos nuestra clase de cuadrícula de productos aquí. Y dice bajo 768, queremos que sea una columna. No hagamos eso. Vamos a darle dos columnas. Pero a medida que bajamos a tamaños de pantalla aún más pequeños, probablemente queremos que se apile como una columna, ¿de acuerdo? Y luego tarjeta de producto Max WIP en realidad, probablemente podamos simplemente eliminar el max con completamente en cualquier tamaño de pantalla Lo siento, déjame encontrar eso de nuevo porque el máximo con debe ser restringido todos modos por el contenedor con, el espacio disponible en tamaños de pantalla realmente grandes. Así que solo comprobando eso dos veces. Volvamos a 4,000, y verás que las tarjetas realmente no crecen más allá de 280 WIP de todos modos, porque hay cuatro de ellas seguidas, y están dentro de un contenedor Max WIP Bien. Así que volvamos a, digamos 650. Eso se ve bastante bien. Bien. Y luego bajemos a en realidad, voy a usar el modo de respuesta aquí para marcar. Teléfono 12 Pro. Y como puedes ver aquí, estas tarjetas de producto son un poco demasiado altas. Entonces creo que a este ancho, vamos a querer una sola columna. Entonces como puedes ver aquí, ya hay un punto de quiebre para 480. Entonces lo que voy a hacer es que lo haré antes de que la tarjeta de producto ponga en un selector aquí para la cuadrícula del producto y establezca columnas de plantilla de cuadrícula a una FR. Fresco. Eso me gusta en el móvil. Bien. Así que ahí van, chicos. Ahora es básicamente intacto, pero no particularmente funcional y estos botones realmente no hacen nada Entonces, obviamente, necesitaríamos diseñar eso y construir eso. Es posible que queramos establecer el Cursor en puntero en estas tarjetas. Yo voy a hacer eso. Así que establece Cursor en puntero. Y ahora indica que si hago clic en estas tarjetas, iré al producto individual. Si quisiéramos llevar esto un paso más allá, entonces todavía podemos usar IA con Cursor, solo sin un diseño Figma o con un diseño Figma si tuviéramos que entrar aquí y crear nuestro menú lateral y nuestro carrito Podríamos hacer eso con Figma y luego referenciarlo en un prompt Pero digamos que no construimos el diseño. Todavía podemos pedirle a Cursor que lo cree para nosotros. Así que tenemos que traer de vuelta a nuestro agente Cursor. Voy a golpear a Comando I para hacer eso, y eso trae a colación una charla otra vez. Y lo que voy a hacer, solo me aseguraré de conocer la clase exacta del menú toggle. Voy a copiar eso y voy a decir en el móvil, yo por debajo de 769 pixeles Cuando el usuario hace clic en, quiero que un cajón de la barra lateral salga de la izquierda con los mismos elementos del menú, ya que es mejor ser realmente específico. Si usas clases reales del HTML, eso te va a dar el mejor resultado. Entonces voy a encontrar menú de encabezado como punto Menú de encabezado. ¿Bien? En el móvil, cuando el usuario hace clic en esa clase, quiero que un cajón lateral salga de la izquierda con los mismos elementos de menú que este elemento en particular. ¿Bien? Si tienes otros requisitos, si eres realmente bueno describiendo lo que quieres, específicamente, puedes agregar un poco más de detalle, pero solo voy a darle a Enter en eso y ver qué se le ocurre a Cursor. Como puedes ver, está pasando por una lista a dos y actualizando nuestro código. Si tuviéramos un diseño Figma para el cajón, actualizaría este prompt para decir, Infigma tenemos el Por favor, siga ese diseño. En este caso, no vamos dejar que Cursor decida el diseño por nosotros. Y yo sólo voy a hacer clic en Keep A. Y ahora vamos a echar un vistazo. Si miramos nuestro diseño en el móvil y hago clic en el elemento del menú aquí. En realidad ha hecho un trabajo bastante bueno. Estoy impresionado. Ahí vas. Así que tenemos los mismos elementos del menú que tenemos en el escritorio. Ah, y ahora los hemos perdido. Entonces averiguaremos a dónde fueron. Escritorio solo no importante. Solo que el escritorio ni siquiera estaba en un punto de interrupción. Entonces, en vez de tenerlo así, prefiero tenerlo al revés. Entonces escritorio solo a en media Max WIP, probablemente ya tengamos una media query para eso Entonces en vez de eso, encuentra la media query para Max WIP 768 y pon escritorio solo muestran nueve importantes ahí dentro Bien. Entonces ahora puedes ver que tenemos nuestro menú de escritorio, y en el móvil, que se encoge en este ícono de hamburguesa Hacemos clic en eso y tenemos los mismos elementos del menú aquí. ¿Bien? También podemos crear un cajón de manera similar usando IA para el carro. Pero obviamente, necesitaremos crear mucha funcionalidad de JavaScript para que eso funcione. Y mucha más lógica, depende de la plataforma que estés usando. Pero sí, estoy bastante contento con este resultado. Llevo grabando este video tal vez de 15 a 20 minutos, y podemos tomar el resultado generado por la IA y conseguir que se vea así, totalmente receptivo móvil con un cajón lateral para el menú móvil. Así que te animo a que, una vez que generes el código para tu propio proyecto, limpies el código HTML y CSS, y compartas con nosotros el resultado en la sección de proyecto de clase de esta clase. 13. Modos variables de Figma: Bien, entonces en este video final, antes de concluir con la conclusión, estoy de vuelta en figma, y la razón por la cual es porque quiero mostrarte una característica genial, Figma que es relevante para lo que hemos estado haciendo que sí te recomiendo que uses, pero sí requiere el asiento dev o superior Figma, lo que significa que es una función paga De ahí por qué no te lo mostré antes. Pero ahora que hemos pasado por el MCP y demostrado lo que requiere el dev set o superior, pensé, si has decidido cambiar a un plan pago con Figma, entonces vas a querer usar modos ¿Bien? Entonces lo aludí antes cuando configuramos nuestras variables Pero si volvemos a nuestras variables por aquí y voy a dimensionar, se puede ver que tengo sección padding y section padding mobile. Este es el caso de uso perfecto para un modo. ¿Tiene sentido tener dos diferentes cuando es solo el modo, eso cambia ¿Bien? Entonces lo que voy a hacer es que voy a hacer clic en este botón aquí para crear un nuevo modo variable. Y veamos si puedo extender esto. Ahí vamos. Así podemos ver ambos modos al mismo tiempo. Y en vez de modo uno y modo dos, lo que voy a hacer es decir escritorio default, y luego voy a crear uno para móvil. ¿Bien? Para el ancho de página y el relleno de página, tenemos los mismos valores, independientemente de si es de escritorio o móvil. Siempre podemos cambiar esto si queremos, pero aquí puedes ver para el relleno de sección, obviamente tenemos una diferencia. Así que voy a por aquí establecer el relleno de sección en el modo móvil a 35, lo que me permite eliminar esta variable aquí mismo, ¿de acuerdo? Ahora lo que eso va a hacer es que puedo usar la misma variable en escritorio y móvil, pero luego cambiar el modo general del marco padre para modificar esa variable. ¿Bien? Entonces veamos cómo funciona esto si voy ahora a mi diseño móvil. Deberíamos ver el relleno de sección fija de 35. Ves aquí eso está un poco atenuado y desvinculado porque hemos eliminado esa variable Si entro aquí y solo lo configuro en el relleno de sección, va a ser igual a ese relleno de sección más grande en el escritorio, pero lo arreglaremos en solo un segundo. Así que voy a establecer esto a relleno de sección. Ahora bien, para conseguir que responda a un modo diferente, necesitamos decir en qué modo opera este marco. Entonces si hago clic en el marco móvil de mi página de inicio y voy por aquí a la apariencia, puedes ver este icono aquí, aplicar modo variable. Así que vamos a hacer clic en eso, entrar en dimensionamiento y hacer clic en Móvil. Ahora puedes ver si voy por aquí y entramos en nuestra sección de relleno aquí mismo, son 35 allá, pero por aquí, son 75. Entonces, obviamente, no tuvimos que establecer un modo en la versión de escritorio, pero vamos a hacerlo por el bien de la integridad porque autos a la primera opción Si queremos que sea específico, podríamos entrar y establecer el modo de este marco a escritorio predeterminado, y de hecho puedes ver el modo aparecer aquí. Y eso es sólo un ejemplo básico de usar modos. Déjame mostrarte algo genial ahora mismo. No sé cómo describirlo, así que solo se lo voy a mostrar pero podríamos establecer, por ejemplo, el tamaño del texto del botón en escritorio y móvil para que sea una variable y luego cambiarlo en función del modo. Entonces, como puedes ver, son 20 en el escritorio y son 14 en el móvil. En lugar de tenerlo como dos valores distintos, qué puedo hacer para que esto sea más automático, y nuevamente, esto es opcional. Todavía obtuvimos un buen resultado con la generación de código de IA sin esto. Pero si quisieras llevar todo esto un paso más allá, si tuviera que entrar aquí y vamos a crear el tamaño del texto del botón. Y entonces el primero en escritorio fue 20, ¿no? 20, creo, y el otro tenía 14. Entonces lo que podemos hacer ahora es que puedo ir por aquí, cambiar esto para usar una variable en su lugar. Entonces simplemente me desplace hacia abajo hasta la parte inferior, haga clic en este icono para variable, elija el tamaño del texto del botón. Eso automáticamente lo configurará en 20 porque el modo del marco padre es de escritorio. Y si voy por aquí, haga lo mismo en la versión móvil, cambie el tamaño del texto del botón, serán 14. Y lo que lo más genial es que si tuviera que duplicar este componente, en realidad, probablemente querríamos establecer el texto del botón en el propio componente padre Entonces voy a hacer eso ahora el tamaño del texto del botón, ¿verdad? Entonces ahora si tuviéramos que duplicar este botón, y ojalá esto sea visualmente obvio cuando lo hago. Pero si arrastro este elemento de aquí a aquí, podemos ver un cambio instantáneo de un tamaño de pantalla a otro. ¿Bien? Entonces eso es solo un poco en los modos. De hecho, podríamos tomar todo nuestro encabezado y refactorizar gran parte de este contenido para que sean variables, establecer un modo separado en esas variables y luego arrastrar la sección al otro marco, y automáticamente se transformará en el diseño móvil Pero esto no es necesariamente necesario para obtener un gran resultado con nuestra generación de código de IA. Modos no es algo que sea nativo dentro de HMLCSS, sino algo que hace que nuestras variables sean un poco más organizadas Por ejemplo, tener dos acolchados de sección que son esencialmente lo mismo, pero para diferentes tamaños de pantalla, tener el mismo nombre para ambos modos, pero solo cambiar el valor basado en el modo es un poco más limpio desde el punto de vista del proyecto FIGMA Bien. Entonces con ese pequeño consejo fuera del camino, concluyamos en el siguiente video y hablemos sobre tu proyecto de clase. 14. Conclusión y proyecto de clase: Esto concluye esta clase sobre diseño web Figma para desarrolladores web Para tu proyecto de clase, te animo a crear tu primer diseño web Figma usando las técnicas que cubrimos en esta clase, configurando tu layout con auto-layout y componentes, nombrando tus capas correctamente y preparando tus diseños para que se pueda convertir en código con una de las herramientas de IA que exploramos en la que exploramos en Cuando hayas terminado tu diseño, súbelo a la sección de proyectos de clase para compartir tu trabajo con otros estudiantes o para obtener comentarios de mi parte personalmente. Si disfrutaste de esta clase, asegúrate de dejar una reseña positiva y asegúrate de revisar mis otras clases aquí en skillshare.com donde profundizo en el desarrollo web, Shopify y otras herramientas Gracias como siempre por mirar, y te pillaré en la siguiente.