Cómo diseñar una tabla de precios adaptables en Figma | Serie de patrones de UI

1. Te doy la bienvenida a la clase: Si quieres mejorar tus habilidades de diseño tipográfico y color sin asumir un proyecto masivo, entonces esta clase es para Todos, soy Adi, y en esta clase corta, diseñaremos una tabla de precios receptiva en Figma. Es rápido, está enfocado y cada paso es procesable Verás exactamente cómo estructurar un diseño, elegir y escalar la tipografía, trabajar con espaciado consistente y crear un esquema de color simple y efectivo Y como solo estamos diseñando una parte de un sitio web, es fácil de seguir. Además, preparé un archivo de inicio con las breves instrucciones y marcos listos para usar, para que puedas saltar directamente. Esta clase es parte de mi UI Pattern Series, construcciones prácticas cortas que se centran en un patrón a la vez. Para que puedas agudizar tus habilidades y practicar fundamentos clave sin perderte en el alcance de un sitio web completo Así que abre Figma, toma el archivo de inicio y comencemos 2. Disposición base y tipografía: Esta es una copia del archivo de inicio. Déjame mostrarte lo que tenemos. En primer lugar, instrucciones. Necesitamos diseñar nuestra propia tabla de precios receptiva basada en el resumen de la clase, y necesitamos incluir tres planes de precios. Los nombres de los planes, los precios, las descripciones breves y las listas de características. Tenemos que destacar el plan más popular. Necesitamos tener un botón de CTA claro para cada plan, y necesitamos crear diseños de escritorio y móviles Ahora también tenemos algunos activos del proyecto. Estamos diseñando esta tabla de precios para una startup SAS llamada flujo de tareas. Tenemos los tres planes, Basic Pro y Enterprise, y necesitamos destacar el plan pro. Tenemos algunos colores de marca para empezar. En cuanto a la tipografía, necesitamos usar una tipografía San serif limpia, y también tenemos la copia o el contenido del texto Oh, de hecho empecemos aquí mismo. Voy a agarrar la copia para el plan Básico, y voy a ir a mi diseño de escritorio. Aquí es donde comenzaremos. Voy a pegar eso, y voy a empezar a dividir el texto según sea necesario. Entonces voy a agarrar el texto, cortarlo de aquí, crear otro elemento de texto, y voy a agarrar esta descripción, cortarlo de aquí, crear otro elemento de texto, y luego voy a agarrar el nombre del plan. Pegado aquí, y todo lo que nos queda aquí es una lista de las características de nuestro plan Entonces ahora arreglemos estos un poco. Básicamente tendríamos el nombre del plan, luego el precio, y luego la descripción aquí, y luego las características del plan. Ese es un diseño bastante estándar. Y al final, vamos a sumar el CL a la acción. Y si miramos hacia atrás en el brief, se puede ver que el texto del botón CTA debería ser empezar Entonces vamos a copiar eso, pegarlo. Entonces ahora tenemos todo el contenido del texto preparado. Vamos a usar Auto Layout para esto porque es mucho, mucho más fácil. Seleccione todo. Shift A. Esto agregará todo a un marco de Auto Layout, y luego voy a comenzar a agrupar elementos según a dónde pertenezcan. Entonces, por ejemplo, el precio por mes y esta descripción probablemente deberían agruparse. Entonces, vuelve a cambiar A, para agregarlos a su propio marco de Auto Layout. Entonces creo que en realidad también voy a separar estos elementos. Entonces voy a cortar cada uno de estos, crear un nuevo elemento de texto y no voy a usar una lista aquí. Duplicemos eso dos veces más. Vamos a copiar esto, pegarlo en, copiar esto, pegarlo en. Solo eliminemos esos. Y por último, el último elemento que queda aquí es el soporte por correo electrónico. Y vamos a limpiar esto también. Ahora, seleccione esto, este y este turno A para agregarlos a su propio marco de Auto Layout. Y por ahora, vamos a configurar un espaciado aleatorio así. El siguiente paso es aplicar una escala de tipos a todo esto. Y una escala typ es básicamente un sistema tipográfico donde cada tamaño de fuente se basa en el tamaño de fuente anterior multiplicado por una Esto le permite crear, como, tamaños de fuente de aspecto muy natural, por así decirlo. Entonces puedes hacerlo de múltiples maneras. Mi forma preferida de hacerlo es mediante el uso de un plugin. Entonces voy a presionar Control o Comando K para sacar a colación las acciones. Voy a ir a plug ins y widgets, y déjame acercarme aquí y voy a buscar la escala de tipos. Y voy a simplemente dar click en uno de estos. El primero, creo que funciona bien. Voy a salvar esto, y voy a ejecutarlo. Y voy a elegir 16 pixeles como tamaño de fuente base. Y la escala, voy a ir con 1.333, que también se conoce como el cuarto perfecto así Y esta es una especie de escala tipo que estamos viendo. Entonces solo voy a dar click en generar, y solo voy a sacar esto a colación así. Entonces ahora puedes ver que aquí tenemos los 16 píxeles, y luego el siguiente tamaño de fuente en la escala es 21, y luego es 28, y luego es 38 y así sucesivamente y así sucesivamente. Y también va a niveles por debajo donde tenemos 12 y nueve píxeles para texto realmente, muy pequeño. Esta es una gran manera de establecer los tamaños de fuente si estás perdido, básicamente, si no sabes qué tamaños de fuente usar, usa siempre una escala de tipos. Bien. Entonces ahora vamos a aplicar esta o esta escala a nuestros elementos de diseño. Empezaremos por el más grande, que debería ser el precio. Y si volvemos hacia arriba, no iré, como, el primer elemento aquí porque es demasiado grande. Probemos 51 píxeles porque eso se ve aproximadamente del tamaño correcto. Entonces aquí, estableceremos 51 píxeles, 150% de altura de línea. Eso se ve bastante bien hasta ahora. A continuación, para esta pequeña descripción, vamos con un paso más alto que el tamaño de fuente predeterminado. Siendo el valor predeterminado 16, usaremos 21. Así que selecciona eso. Vamos a poner 21 ahí mismo. Eso se ve bastante bien. Vamos a establecer 16 píxeles. A las características porque éstas se asemejan más a un texto corporal, como a un texto corporal normal. El nombre del plan, usemos también 21 píxeles. Por lo que es del mismo tamaño que esta descripción. Y luego el botón aquí vamos a 16 píxeles, pero vamos a cambiar esto a negrita porque quiero que el botón destaque un poco más. Bien, así que hicimos el diseño básico. Aplicamos la escala tipo, pero también necesitamos elegir un tipo de letra, ¿verdad? Porque por defecto, esto es usar Inter, pero Inter es un gran tipo de letra, pero se usa mucho, ¿verdad? Así que hay muchas opciones geniales por ahí. Y una gran fuente de tipografías que uso todo el tiempo es Google Fonts Son libres. Básicamente, hay una gran selección, y están precargados en Figma. Y si miramos hacia atrás a nuestro resumen de proyecto bajo tipografía, podemos ver que la sugerencia es usar un tipo de letra Sans Serif limpio Así que vamos a ir a Google Fonts, y en realidad nos desplazaremos hacia abajo en la barra lateral aquí donde dice San Serif, y yo solo voy a elegir todos Y eso sólo me va a mostrar todos los tipos de letra sanerif Aquí, se puede ver el Inter. El que estaba ahí por defecto, Monstera es otra gran variación Y solo puedes elegir cualquiera de estos, probarlo en tu diseño. Yo personalmente, voy a elegir hijos DM. Realmente me encanta este tipo de letra. Es muy legible. Funciona muy bien para el texto corporal, y tiene solo, ya sabes, un poco de carácter, así que no tiene un aspecto demasiado soso Entonces DMSNSF Google Fonts, voy a elegir cada elemento de texto de aquí, y rápidamente voy a cambiarlo aquí mismo a DM sons Y así es como se ve de cerca Hermosa, hermosa tipografía Bien, entonces con eso hecho, el siguiente paso es trabajar en los colores. Eso viene en la siguiente lección. 3. Aplicación de colores: Vamos a crear rápidamente una paleta de colores para nuestro proyecto. Y en base al brief, si recuerdas, el brief nos dijo que, oye, tenemos algunos colores de marca que puedes elegir. Hay una primaria, que es como un color índigo, y hay un acento, que es como un naranja cálido. Ahora, tengo esos colores justo aquí, y lo primero que quiero hacer es crear un color gris basado en mi primaria. Puedo hacerlo muy fácilmente duplicando esto, abriendo el selector de color Y elegir el modo de color HSL para crear una versión más oscura, menos saturada del color de mi marca, y ese va a ser el color gris base. Entonces así es como lo hago. Yo cambio, antes que nada, de hex, que es probablemente el modo predeterminado en tu selector de color a HSL Esto significa luminosidad de saturación de tonalidad. Básicamente es otra forma de representar un color. El primer cuadro aquí representa el matiz. Esta es la saturación, esta es la ligereza. Entonces lo que quiero hacer es mantener el mismo matiz pero disminuir la saturación. Así que elimina mucha de esa información de color y también disminuye la ligereza. Entonces saturación, voy a disminuirla todo el camino hasta por aquí hasta alrededor de 16. Entonces está más hacia el gris, pero aún tiene un poco de ese color en su interior. Y también voy a hacerlo más oscuro. En vez de 63, voy a reducirlo a casi tanto 32, ¿verdad? Entonces, al hacer eso, obtuve una versión más oscura, menos saturada de mi color primario. Ahora, vamos a crear algunos tintes y matices para estos colores, específicamente para el primario y el gris Y un tinte es básicamente una versión más clara del color. Un tono es una versión más oscura del color. Es como mezclar blanco o negro con ese color. Y hay varias formas de crear latas y tonalidades. Personalmente, prefiero usar un plugin Figma, y también hay un montón de plugins disponibles Los que he estado usando recientemente se llaman Hu Hu Tins and Shades Así puedes abrir el panel de acciones aquí y puedes ir a plug-ins y widgets y buscar Hue Hue. Entonces, cuando haces clic en esto, te permite seleccionar un color, básicamente. Sólo voy a probar mi primaria y voy a dejar el resto por defecto y dar clic en Generar Colores, ¿verdad? Así que eso va a generar algunos colores bonitos para mí aquí. Y voy a volver a poner el enchufe. Pero esta vez, voy a probar el color gris. Y vuelve a generar. Y sólo puedo cerrar el enchufe en la ventana. Vamos a copiar estos y pegarlos dentro de mi sección, ¿verdad? Entonces ahora tengo mi paleta de colores. Si en algún momento necesito crear tintes y tonalidades para el color de acento, puedo hacerlo con la misma facilidad, pero por ahora, eso no es necesario Entonces ahora que tengo algunos colores con los que trabajar, comencemos con el fondo. Y hagamos algo diferente. Esta vez hagamos un modo oscuro. ¿Bien? Entonces voy a seleccionar el escritorio, y voy a presionar I, y voy a probar este color muy oscuro. Y en lugar de usar un color sólido, usemos un degradado. Así que voy a volver al color de relleno aquí mismo. Y voy a dar click en un degradado. Voy a elegir la radio, y quería irradiar desde, digamos, sobre este punto hacia afuera, ¿ Y aquí voy a intercambiar los colores, así que va de un color más claro a uno más oscuro. Y para el color más claro, solo probemos tal vez este. Bien, entonces creo que ya es suficiente. No tiene por qué ser una gran diferencia de contraste, solo lo suficiente para que sepamos que ahí tenemos un gradiente. Bien. Ahora, trabajemos en estas tarjetas. Empecemos por añadirles un color de fondo. Entonces agreguemos un relleno, y probemos este color oscuro aquí mismo. Usemos tal vez el 60% de ese color solo para darle un poco de fondo más oscuro, así que todavía podemos mezclarlo en el fondo. También le agreguemos un color de borde, haga clic en trazo. Voy a poner la frontera al exterior. Y vamos a ver. También vamos a usar un color gris. Así que vamos a probar tal vez este. Bien, da click afuera, mira como se ve, y eso me queda bastante bien. Todavía es distinguible del fondo, y agrega un pequeño borde de acento a la tarjeta A continuación, agreguemos un poco de relleno a esta caja. Debido a que estamos usando Auto Layout, es realmente simple. Simplemente agregaremos 40 píxeles a izquierda y derecha, y luego 80 píxeles a arriba y abajo. Y agreguemos también un radio de borde de 40 solo para hacer esto un poco más redondeado. Ahora, coloreemos estos elementos de texto porque apenas los podemos ver en estos momentos. Así que selecciona la tarjeta. Y, ya sabes, en vez de usar el negro aquí, podríamos cambiar esto a blanco. Pero siento que eso tiene demasiado contraste. Entonces lo que me gusta hacer es simplemente usar otro gris, pero uno que sea muy, muy ligero. Entonces solo voy a seleccionar este tinte muy ligero. Y eso hace que el texto sea visible. Tiene un gran contraste, pero también se mezcla un poco más con el fondo. Y vamos a seleccionar el texto aquí, y para ello, voy a usar un color más oscuro. Así que vamos a probar tal vez veamos éste. Eso es demasiado oscuro. Vamos dos pasos hacia arriba. Eso se ve bastante bien. Y creo que me quedaré con eso. Ahora, ¿qué más? Vamos a crear el botón, ¿verdad? El botón en realidad debería usar, como, el color principal de la marca. Entonces seleccionaremos el texto. Haremos Mayús A para agregarlo a su propio marco de Auto Layout, y usaremos un relleno de 32 píxeles. Horizontal 16 píxeles relleno vertical, vamos a alinear el texto a la mitad. Nos aseguraremos de que el relleno aquí o el ancho esté configurado para llenar el contenedor para que cuando redimensione mi tarjeta, el botón también redimensione con ella, y seleccionemos el texto dentro, y estableceremos su ancho aquí para abrazar Y déjame mostrarte la imagen completa aquí. Y ahora tomemos este botón. Presiona Voy a muestrear el color primario, y solo agregaremos un radio de borde 100. Entonces es como una forma de píldora. Entonces ahora, debido a Auto Layout, el botón cambia de tamaño junto con la tarjeta Fresco. También vamos a vestir esto un poco más, y agreguemos algunos íconos a la lista de características aquí. Y uno de mis conjuntos de iconos preferidos que también es gratis son los íconos de fósforo Puedes agarrarlo en phosphor icons.com. Y si hacemos clic en los iconos Explorar, podemos buscar tal vez un cheque, y voy a seleccionar el círculo de verificación. Y todo el camino aquí en la parte inferior, tenemos la opción de ya sea descargar o copiar un SVG. Así que vamos a copiar ese SVG. Saltaremos de nuevo a Figma y seleccionaremos uno de los elementos de texto aquí Vamos a pegar eso en, y vamos a establecer su tamaño en 16. Por 16. Y también necesitamos aplicarle color. Así que en realidad voy a usar el color de este texto aquí, copiarlo, pegarlo en ese icono, seleccionar el icono y el texto al que lo estamos aplicando. Cambie A para agregarlo a su propio marco de diseño automático. Y luego en el inspector aquí, vamos a establecer su dirección a horizontal y la alineación a media así, y luego simplemente seleccionaremos el texto, lo moveremos hacia la derecha. Entonces ahora todo lo que queda por hacer es aplicar el mismo diseño a las otras cuatro características. Y la forma en que me gusta hacerlo es simplemente duplicar el primero, así controlar o mandar D, y luego solo seleccionar el texto, copiarlo, pegarlo. Copiar, pegarlo en. Y copiar, pegarlo así, y luego puedo seleccionar estos, eliminar. Y ahora mi maquetación está lista. Por último, otro detalle aquí, voy a seleccionar la tarjeta, y voy a establecer la brecha entre los artículos a 40, ¿de acuerdo? Pero me gustaría que el botón, el CTA se colocara más abajo. Y también me gustaría que eso se quedara en la parte inferior de la tarjeta cuando cambie el tamaño la tarjeta verticalmente. Entonces, ¿cómo hacemos eso? Muy sencillo. Seleccionamos estos tres elementos si cambiarías A para agregarlos a su propio marco de Auto Layout. Y ahora, en la tarjeta principal, establecemos el espaciado en Auto. Entonces eso significa que cuando ahora cambio el tamaño de esta tarjeta, estos elementos permanecen en la parte superior mientras que la tarjeta permanece fija en la parte inferior Y antes de concluir esta lección, solo dos cambios más. Seleccionemos este marco, que contiene el precio y la descripción. Y solo tenemos que asegurarnos de que el espaciado aquí sea correcto. Vamos a configurarlo en cuatro píxeles así como así. Y por último, el nombre del plan, vamos a darle un color diferente. Vamos a usar este color de axón aquí mismo. Por lo que ahora el nombre del plan es más visible. Y para el resto de los elementos, utilizamos el primario y también los grises que hemos creado antes Bien. Entonces con eso hecho, el siguiente paso es simplemente crear las otras dos cartas. Eso viene en la siguiente lección. 4. Completa el diseño: Completemos el diseño creando primero las otras dos tarjetas. Así que simplemente voy a cambiar el tamaño de esto un poco, moverlo aquí y controlar o comando D para duplicarlo, y solo lo moveré a la derecha, lo haré de nuevo, y crearé el tercero, y ahora seleccionaré los tres Shift A para agregarlos a su propio marco de Auto Layout, y solo voy a establecer el espaciado aquí en 40 píxeles. Bien. Ahora vamos a actualizar el contenido de cada tarjeta. Entonces hicimos el básico. Hagamos el Pro. Entonces el Pro cuesta 19 dólares al mes. Y déjame copiar ahí el texto. Voy a sustituir aquí al Pro 19. Control Shift R para reemplazar el texto. Y luego editemos estos también. Tenemos proyectos ilimitados. Contamos con 100 gigs de almacenamiento. Contamos con analítica avanzada. Tenemos soporte prioritario por correo electrónico y contamos con herramientas de colaboración en equipo. Entonces copiemos este texto, y luego entraremos aquí y simplemente duplicaremos uno de estos elementos y seleccionaremos ese Control Shift R para reemplazar el texto o comando Shift R si estás en un AMAC, y luego haremos lo mismo para el Enterprise El Enterprise es de 49 al mes. Es para grandes organizaciones, y tenemos proyectos ilimitados, 1 terabyte de almacenamiento Contamos con analíticas personalizadas. Contamos con un gerente de cuenta dedicado, y contamos con 247 soporte telefónico. Encantadora. Ahora, hay una cosa más que hacer, y es resaltar el medio, el plan pro y agregar como una insignia más popular o algo así. Entonces hay muchas maneras en las que podemos destacar este plan. Podemos darle como un fondo mucho más brillante, un fondo más colorido o podemos agregarle, como una insignia de color. Podemos hacerlo más grande. Para esta aplicación, esto es lo que voy a hacer. Voy a seleccionar el marco principal y voy a hacer click derecho sobre él, y voy a la selección de cuadros, ¿verdad? Esto lo envolverá en su propio marco. Entonces con eso hecho, voy a agregarle Auto Layout. Podemos hacerlo entrando en el inspector y presionando usar Auto Layout. Ahora bien, déjame traer esto para que puedas verlo un poco mejor. Para Auto Layout, le voy a dar cuatro pixeles de relleno en todos los lados. También voy a darle un relleno. Y ese color de relleno va a ser una de las variaciones del color primario. Así que vamos a elegir primero el color base. Está bien. Definitivamente destaca, pero creo que es un poco demasiado brillante. Entonces vamos a bajarlo de tono. Voy a elegir este color aquí mismo, el tercero desde abajo. Además, voy a seleccionar la tarjeta principal que está dentro, y voy a aumentar la opacidad de color 60-80. ¿Todo bien? Porque quiero poder ver el fondo, pero no demasiado de él. Bien. Y ahora voy a seleccionar toda la tarjeta, y voy a darle los mismos 40 pixeles de radio de esquina. Entonces se ve así. Y luego voy a seleccionarlo, y solo voy a acercar aquí para que veas lo que estamos haciendo. Y voy a hacer clic en este botón de relleno individual, y en la parte superior, lo voy a poner en 64 píxeles. Y eso básicamente agrega un espacio superior aquí que podemos usar para colocar nuestro texto más popular. Bien. Entonces hagámoslo ahora mismo. Voy a hacer clic dentro de T para texto, y solo voy a escribir Más populares. Y quiero que este texto flote libremente. Así que voy a ir justo aquí en la parte superior donde dice posición, y voy a presionar Ignorar Auto Layout. Bien. Y en cuanto lo hago, el texto sigue dentro de mi marco de Auto Layout, pero ahora puedo moverlo a donde quiera. Entonces, para el texto, pongámoslo en negrita, y pongámoslo todo en mayúscula Así. Y porque lo estamos poniendo en mayúscula, aumentemos un poco el espaciado entre letras Creo que el 6% es suficiente, y quiero hacerlo más pequeño. Entonces, para determinar qué tamaño de fuente quiero, puedo volver a mi escala de tipos, ¿verdad? Podemos ver que las fuentes que son menores a 16 píxeles en función de la escala deben ser 12 o nueve. Entonces probemos 12. Y vamos a acercarnos al 100% y veamos cómo se ve eso, y creo que eso funciona bien. Si eso no te funciona , claro, puedes aumentarlo o disminuirlo aún más. La escala de tipos está ahí como pauta. No hay que respetarlo como al 100%. Entonces tomemos esto. Vamos a alinearlo al centro, y vamos a moverlo hacia arriba o hacia abajo. Sólo para colocarlo en medio de ese espacio, y también voy a seleccionarlo y alinearlo al medio. Entonces, si lo cambiamos, se queda en esa posición. Y así optamos por destacar este plan medio. Ahora, antes de que terminemos las cosas, aquí hay un consejo rápido, y este es un consejo profesional para ti. Observe cómo estas dos esquinas se ven un poco raras. Y eso es porque tienen exactamente el mismo radio de esquina. Pero algo que recogí hace un tiempo fue que si tienes, como, esquinas anidadas así, la del exterior debería tener un radio de esquina mayor que la del interior, así que se ven bien Así que vamos a seleccionar esto. Y en lugar de 40 píxeles, que es el radio de esquina del interior, vamos a hacer 40 píxeles más la distancia entre los dos, que en nuestro caso, es de cuatro píxeles. Entonces voy a establecer 44 pixeles. Entonces, al hacer eso, las esquinas ahora se ven mucho más naturales, y eso hace que todo se vea un poco mejor. Es un detalle minúsculo, pero los detalles importan. Entonces esto de aquí es el diseño de tabla de precios para escritorio. Pero, ¿qué pasa con el móvil? Porque si tuviéramos que copiar esto en una pantalla móvil, no va a quedar muy bien. Entonces hagamos el cambio en la siguiente lección. 5. Adaptación del diseño para móviles: Antes de crear la pantalla del móvil, hagamos un pequeño y minúsculo ajuste a la tipografía Voy a seleccionar los tres precios, y voy a cambiar su peso de fuente de regular a negrita. Yo solo pienso que esto es un poco más equilibrado y llama un poco mejor la atención sobre esa zona. Bien. Ahora, pantalla móvil. Aquí, tengo un marco que tiene 428 píxeles de ancho. Obviamente, cuando estás diseñando para móviles, puedes, ya sabes, hacer esto más pequeño o más grande, dependiendo de los dispositivos para los que estés diseñando. Pero lo primero que voy a hacer es seleccionar mi escritorio, clic derecho en copiar y pegar, copiar propiedades, y luego copiar pegar como propiedades de pegar. Esto básicamente copió el fondo. A continuación, voy a seleccionar esto. Iré al móvil. Voy a pegar esto. Y claro, es demasiado grande para la pantalla. Entonces, en lugar de un diseño horizontal, necesitamos hacer un diseño vertical. Entonces en el auto o en el inspector, voy a cambiar el Auto Layout a vertical. Solo movamos estos aquí y hagamos que la pantalla del móvil sea más grande. Así. Y vamos a mover estos hacia atrás porque tenían sus limitaciones. Colóquelo al centro. Reiniciemos estos a la parte superior izquierda. Empujemos esto hasta 40 píxeles. Y, en realidad, seleccionemos la pantalla del móvil, y agreguemos Auto Layout a ella. Vamos a establecerlo en vertical, y vamos a seleccionar esto, y vamos a desagruparlo Y con la pantalla del móvil seleccionada, fijemos allí también 40 píxeles de relleno. Y luego voy a seleccionar las tres tarjetas de tabla de precios, y voy a establecer con ellas para llenar contenedores. Así que ahora cada vez que cambio el tamaño pantalla de mi móvil estos redimensionan con ella Y podemos ver ahora mismo que tenemos un pequeño problema aquí donde el salmón no cambia de tamaño, pero es una solución rápida, selecciónala, y en el inspector, cambia su ancho de fijo a contenedor de llenado, así como así Ahora, debido a que estamos tratando con una pantalla móvil, bienes raíces son realmente importantes. Entonces hagamos todo esto un poco más compacto. Seleccionemos esto y esto. Y en lugar de 80 píxeles de relleno vertical, lo cambiaremos a 40. Y también fijemos la brecha entre estos a 40 y también estableceremos esta brecha 40 y estableceremos la altura de cada uno de estos elementos para abrazar el contenido. Entonces solo son tan altos como el contenido que hay dentro. Nosotros haremos lo mismo aquí. Cambia esto a 40, cambia la brecha aquí a 40 y estableceremos la altura para abrazar contenidos. Y el cambio final aquí, cambia esto a 40 y la altura para abrazar. Y esa es nuestra versión móvil de la tabla de precios. Ahora es vertical en lugar de horizontal y es un poco más compacto. Y ahí la tenemos una tabla de precios receptiva construida a partir de un breve resumen y adaptada tanto para escritorio como para móvil. Cree que estos ejercicios enfocados rápidamente son realmente buenos para desarrollar sus habilidades porque está practicando la tipografía, el espaciado, el tamaño, el color y manteniendo los diseños consistentes, todo sin la presión de un proyecto completo Entonces, si solo has visto los videos pero no has seguido, te animo encarecidamente a que hagas el proyecto de clase. Y tu tarea es sencilla. Abra el archivo de inicio. Encontrará vinculado en la descripción y diseñará su propia tabla de precios receptiva. Puedes seguir el brief exactamente o personalizarlo a tu gusto. Eso depende completamente de ti. Y cuando termines, sigue adelante y comparte tu diseño en la galería de proyectos de clase. Me encantaría ver tu opinión sobre él, y también puedes inspirarte en lo que otros estudiantes han creado. Y si te gusta esto, echa un vistazo a mis otras clases de diseño visitando mi perfil o los enlaces en la descripción de la clase para mis recomendaciones personales. Bien, gracias viendo, feliz diseñando, y te veré en la siguiente clase. Adiós por ahora.