Figma para el diseño web UI & UX: Diseño de la primera página web

1. ¡Hola!: Hey ahi, soy Chris var1, profesional de web y aplicaciones diseñadorprofesional de web y aplicacionesen el siguiente Gower, tú y yo, vamos a diseñar una impresionante página de inicio en Figma. Si no has visto mi FIG, mi curso esencial lleva. Empieza con eso. Vas a necesitar esa base antes de saltar a este bar. Ahora, al final de esta hora, vas a tener un diseño completo de la página principal para un sitio web real. Pero por favor ten en cuenta, no hay codificación involucrada. Ahora en Figma, estamos creando el look y la sensación de la página web. Y eso podría llevarlos. Codewords van a recoger nuestro diseño e implementar eso en un sitio web de trabajo real. Eso es algo totalmente diferente. Y si tienes preguntas al respecto, es este proceso de codificación. Nuevamente recuerdo las puntuaciones esenciales que aclararán todo. Ahora lo que quiero de ti es una réplica perfecta de mi diseño en ese video. Entonces con eso, quiero ver tu versión. Entonces por favor publícala en la plataforma para que te pueda dar mis pensamientos al respecto. Te prometo que mi retroalimentación va a ser constructiva. Entonces no te preocupes por tus habilidades. Estamos aquí para aprender. Eso no es juicio. Todo se trata de divertirse y crecer como diseñador de portón, Vamos a trabajar. 2. Configura la versión de escritorio de la manera correcta: Bienvenido de nuevo. Por favor abre Figma, la versión independiente, y vamos a crear un nuevo proyecto. Llámalo el LG, corto para esta piernas, gran dotnet. Está bien, bien. El Frame Tool y haga clic en el reinicio del escritorio. Estos pasos deberían ser muy familiares, pero ese es el punto. Quiero que puedas pasar por estas acciones con los ojos cerrados al final de este curso, con el marco seleccionado, cambiar el valor de ancho a 1920. Se puede dejar la altura tal como está. Lo ajustaremos a medida que nos movemos hacia abajo. A continuación, la cuadrícula, como aquí en la cuadrícula de diseño, el valor predeterminado no es lo que estamos buscando. Entonces encabeza este ícono. Ahora de esta lista, elige columnas. Es por ello que no debes tomar notas con ir a repetir los pasos más importantes lotes y montones de veces para el número de columnas. Seguro que ya sabes que son 12. Por los márgenes. 360, por favor. A pesar de que la opacidad se establece en 10 por ciento, esto interferirá con la grabación. Está distrayendo. Entonces lo voy a bajar al 3%. No tienes que hacer eso por cierto. Más que eso, agregaré dos guías que configurarán o área activa de 1200 píxeles. Usa Shift R para activar las reglas si no las tienes activas. Ahora mueve tu cursor aquí en el lado izquierdo, y verás este icono en tu cursor. Haga clic, arrástrelo y muévelo hacia el borde izquierdo. Sentirás que el gran hombre está tratando de ayudarte a ponerlo en su lugar y alejarlo si es necesario. Repita para el otro borde de la rejilla. Básicamente, esta es la base de nuestro diseño. Este es nuestro punto de partida. Por favor, abre el sitio web en tu navegador. Es decir, esto se ve genial. Dotnet. Desde aquí queremos descargar el logotipo, que se puede hacer de varias maneras. Si su navegador lo permite, haga clic derecho en él y vea si puede descargar la imagen directamente. Si eso no funciona. Aquí está mi otro método. Haga clic con el botón derecho en él y elija Inspeccionar en esta lista. Entonces eso es inspeccionar. navegadores más conocidos tienen esta opción. Estoy usando Firefox, por cierto, en este panel en la parte inferior estás buscando la cosa soltera, esta parte aquí, logo que PNG. Si mueves tu cursor por encima de él, verás que se trata de un logotipo en formato transparente, PNG y eso es hermoso, Eso es exactamente lo que queremos. Haga clic en él. Y ahora definitivamente puedes decir que una vez hecho eso, por favor arrástralo y suéltalo desde tu escritorio a nuestro diseño. El grandioso de esto es que no tienes que redimensionarlo. Ya es exactamente como lo queremos. En cuanto a colocarlo, esto debería ser un no cerebro. Alinearlo con la guía izquierda. Desde arriba. Deja unos 30 píxeles también le dan fecha. No te preocupes por este valor específico ya que vamos a jugar con él más adelante. Hagamos una pausa porque hay un punto muy importante. Por favor, siempre vuelve al nivel de zoom del 100%. Esto es como cepillarte los dientes o beber agua. No es discutible, no es opcional. No se basa en tu estado de ánimo. Voy a acercar y alejar con mi ratón todo el tiempo. Tendrás que hacer lo mismo para comprobar los diversos detalles. Pero siempre, y repito, siempre tenemos que volver al 100%. Ahora bien, ¿por qué lo estoy haciendo tan grande? Porque nuestro trabajo se va a ver al 100%. Siempre tenemos que juzgar nuestro trabajo a través de los ojos del usuario. Nos vamos a dar cuenta de todo tipo de detalles minuciosos. Pero si volvemos a acercarnos al 100%, esos detalles son el intestino y nos perdemos. Por lo que este es un error muy común entre los principiantes porque fueron capaces de acercar. Ellos ven todos esos detalles y simplemente asumen que los usuarios los verán también. Y obviamente, ese no es el caso. Y aquí está la otra cara. Te alejas al 50% o algo así. Agregas el campo de texto que dice bienvenida o lo que sea. ¿ Ahora es el momento de ajustar su tamaño bien? 12 es claramente demasiado pequeño. Pero debido a que estamos alejados, podríamos elegir un valor como el 70. Ahora esto parece bien en este contexto específico, en este nivel de zoom específico. Pero cuando vuelves al 100%, y puedes ver claramente esto es demasiado grande. Esto es tan grande como el logotipo y es sólo una palabra. Entonces así es como los principiantes a menudo se engañan a sí mismos, que la vista se distorsiona por el nivel de zoom incorrecto. De acuerdo, por favor borra los textos y familiarízate con esta opción. Inasentado, di que la tecla de acceso rápido no tiene absolutamente sentido para mí. Desplazar el 0. Por lo que tendrás que soltar tu ratón para realmente usar Shift Z aunque. Es lo que es en otros programas de diseño se controla uno, pero que aquí hay algo completamente diferente. Por ahora. Por favor, asegúrate de acostumbrarte a este desplegable aquí y que siempre vuelvas a un 100 por ciento. Tomemos un descanso rápido. 3. Crea el encabezado: Bienvenido de nuevo. Ahora tenemos la fundación. Ahora pasemos a la cabecera. Para facilitar las cosas, por favor seleccione el marco y menos cambios de color de fondo. Busco el muy, muy claro gris y tengo un código de color exacto en mente. Es F2, F2, F2. A medida que crezcas y experimentas, pronto comenzarás a recordar algunos códigos de color esenciales. Confía en mí en esto. Ahora, pulsa la llave de escape y espero que veas por qué el sistema de rejilla es un poco un problema. Así que por favor hola que al golpear este ícono aquí porque necesitamos enfocarnos en lo que está pasando, en el lienzo real. Ahora, para el encabezado, necesitamos el fondo blanco puro, el figma. No nos basamos tanto en los rectángulos porque tenemos la herramienta Frame Tool golpeó F y arrastramos uno hacia fuera. Realmente no me importa lo grande que sea. Todo lo que quiero es asegurarme de que el logo esté incluido en esta caja. Si lo hiciste bien, deberías ver el logo dentro del marco 1, que está dentro de este top. De acuerdo, Ahora habilitemos un relleno blanco puro. Es por eso que elegí ese tono particular de gris porque funciona muy bien con estos rectángulos blancos. Ahora sobre el tamaño de esta lluvia, no importa lo que sea, Vamos a cambiarla a 1920. Y eso es porque ese es el tamaño de nuestro proyecto. Ahora para centrarlo, basta con mover el ratón hacia arriba y dar clic en este ícono. De acuerdo, ahora para la altura, no necesitamos mucho, así que alrededor de 100 píxeles deberían estar bien. Plus o el menos 10, 20 pixels dan o toman siempre está sobre la mesa porque realmente nada se pone en piedra. Realmente tienes que ajustarte a medida que vas hacia adelante bien, bien, Ahora arriba alinearlo haciendo click aquí. Ahora el logo necesita un poco de trabajo porque está dentro de este rectángulo. Podemos hacer clic en este ícono aquí para alinearlo verticalmente dentro del marco. Y por supuesto, necesita tocar la Guía izquierda. Ahora. De acuerdo, cosas buenas, bonitas y sencillas. El siguiente paso es archivar plano icon.com, que es de nuevo mi sitio web go-to para iconos. De nuevo, sí necesitas una suscripción para ello y no había recursos gratuitos por ahí que sean comparables. De acuerdo, necesitamos el set de redes sociales para el lado derecho. Por favor, ten en cuenta que el icono plano no es gratis, sino como el mejor de los mejores por mucho. Perdón por decir eso. No hay sitios web similares que sean totalmente gratuitos. Está bien. Estamos buscando los packs de iconos. Podríamos buscar Facebook, luego Twitter, e Instagram y así sucesivamente. Pero preferiría mucho encontrar la manada. Eso se debe a que ser consistente es increíblemente importante. Entonces escribe en redes sociales y echa un vistazo. Te recomiendo encarecidamente que uses iconos que sean del mismo color. Se ve así de más limpio, mucho mejor, pero claro, eso es algo subjetivo. Ahora bien, preferí esta red social de vuelta, iconos redondeados. Creo que estos lucen 10 veces mejor en mi mente. Me encanta esa simetría. Si no te gusta esta espalda, este también es un segundo fuerte. Queremos descargarlos como SVG. Rápidamente los agregaré a mi colección haciendo clic aquí. Esto es bastante intuitivo, así que no pasaré demasiado tiempo en ello. Ahora, cuando estés listo, descarga la colección y elige SVG. Png no es una gran opción porque simplemente no es como cresta. La calidad no es tan buena como los SVG exportan, archivan y arrastran y sueltan en Figma. Ahora, voy bastante rápido, pero espero que estés trabajando a lo largo de tu segunda visualización. De acuerdo, los tenemos a todos seleccionados. Por favor ve a buscar la herramienta de báscula y redimensionarlos a algo a lo largo de estas líneas. Tan bastante pequeño. A continuación, acercar el 100% para que podamos comprobarlos. Idealmente, me gustaría tenerlos por debajo 40 píxeles mientras los estás escalando hacia abajo. Mantenga un ojo en el campo de ancho. Bueno, el ancho y la altura son los mismos porque estos son círculos perfectos. Pero se te ocurre la idea. Mantén un ojo en esta parte cuando estés contento con el tamaño, cambia al movimiento a bien, ahora vuelve a colocar tu ratón entre dos iconos y verás algunas líneas rosas. Voy a aparecer, hacer clic y arrastrar hacia afuera para aumentar la distancia entre ellos. Quiero ver diez píxeles aquí, acaso no te gusta este orden en particular, ve por encima de uno de estos círculos, haz clic, mantén pulsado y arrastra el icono a otro lugar. Esto está disponible porque todos ellos están seleccionados y que el mismo tipo de capa, por cierto, estoy en movimiento a, uh, ahora mismo y no hay nada más pasando. no hay técnica avanzada Aquíno hay técnica avanzaday sólo cosas básicas en Figma. De acuerdo, ahora, una última cosa. Vamos a moverlas en la posición correcta. Haga clic en arrastrar y no se suelte. Busca estas dos líneas. Esto significa que el conjunto está centrado verticalmente en el marco blanco, pero también está alineado a la derecha con esta guía. Y eso es absolutamente perfecto. Una cosa sin embargo, no los dejes negros. Haga clic en los colores de selección y el seleccionador de color debe aparecer. Elige la herramienta cuentagotas, este icono aquí. De acuerdo, ahora muestra la naranja del logo, y eso es básicamente todo. Ya estamos hechos. Enhorabuena por su primer encabezado. Trabajo impresionante. Ahora tomemos un breve descanso y luego seguiremos. Gracias. 4. Crea el menú principal principal: Bienvenido de nuevo. Antes de pasar al menú principal, es mejor que tú el nombre encuadre uno a cabeza. Había algo parecido. Lo mejor es mantenerse organizado. Entonces otra vez, por favor cámbielo. De acuerdo, ahora, arrastra un nuevo marco y es la misma historia que antes. No hay tamaño en particular, solo uno al azar. Antes de ajustarnos, por favor habilita un relleno, abre el seleccionador de color y deberíamos tener esa naranja disponible debajo. De acuerdo, ahí tienes. Colores de documentos porque el ahora para el ancho 1920 es la elección obvia. actualidad, este es uno de los estilos de Menú Principal más populares. Sin efectos, sin gradientes de fantasía, solo agradables y simples. Céntrela horizontalmente y hablemos del tamaño. Esto sostendrá nuestros elementos principales del menú, pero eso se trata de eso y nada más. Entonces creo que 60 píxeles deberían ser suficientes, todo el camino zoom al 100% y ver si esto tiene sentido. Y creo que está bien aunque no podemos cambiar opinión más adelante después de añadir los artículos. De acuerdo, vamos a conseguir la herramienta de tipo y empecemos con casa. Puede obtener 14 pixeles. Y hablemos de la tipográfica que vamos a usar. La respuesta corta es este Poppins. A mí me gusta porque tiene algún carácter demasiado mojado, pero no es todo tan elegante. Es como una bonita camisa ajustada, una buena mediana entre camisa hawaiana y una formal que está destinada a ser usada con una pajarita. Entonces un medio feliz, eso es Poppins para mí. Ahora, quería destacar por lo que habilitaré la función de todas las tapas. Esto está muy en línea con la versión existente del sitio web. Recuerda, si quieres desactivar este estilo de todos los gorros, haz clic en el menos. Estoy contento con ello tal y como está, pero es un poco demasiado ligero para mi base. Entonces cambiemos el estilo a semi audaz. Con buen aspecto hasta ahora, por favor muévelo en el marco naranja y colóquelo para que toque la guía izquierda, aunque no es obligatorio. Sí te recomiendo usar Shift a para que esto se convierta en una lluvia de diseño automático por si no te gustan los atajos, voy a golpear Control Z, así puedo escribir pierna de esta lista, elige agregar auto-layout. Ahora otra vez, cosas buenas. Aviso tenemos algo de espacio extra a su alrededor Eso es relleno y puedes ajustarlo desde aquí, ponerlo en 0, eso lo noqueará fuera de lugar, pero no te preocupe, agárralo y moverlo hacia atrás pertenece. Ahora bien, el siguiente paso es importante. Asegúrate de tener seleccionado el hogar y no el marco en sí. De acuerdo, usa Control D para crear una copia y duplicar. Y debido a que se trata de un diseño automático, Figma sabe dónde colocarlo a la derecha de este artículo. ¿ Cómo sabe eso? Selecciona el marco y te mostraré que es esta flecha de aquí. Esta flecha dice que va a ser horizontal. Si eliges la otra, esa va a ser nuestra lista vertical. Obviamente no queremos eso, así que cámbialo de nuevo. Y vamos a editar este Haga doble clic para seleccionar eso. Es posible que tengas que hacer eso dos veces, por cierto. De acuerdo, esto debería decir aprender Photoshop. Ese es mi blog, esa es una de las páginas. Se escapó para cometer el cambio y usar Control D una vez más. Si no tienes bien con la tecla de acceso rápido, solo todos para arrastrar u Opción Drag. Si estás en un Mac, esto necesita ver los freebies. Está bien. Ahora, el siguiente punto es sobre Chris estéril y el último, el contacto. Todo sitio web necesita esa página. Ahora por favor ten un enfoque relajado sobre el diseño automático y todas estas teclas rápidas. Si solo quieres agregar capas de textos regulares y luego extenderlas manualmente. Eso también está totalmente bien. Todo lo que te pedí es que te asegures de que tengas el mismo espacio vacío entre ellos. Hablando de eso, por favor seleccione el marco. El hueco predeterminado es de 10 píxeles, pero eso es un poco bajo, sobre todo considerando cuánto espacio tenemos que jugar. Así que haz click aquí y te sugiero que mantienes el turno y tocas la tecla de flecha arriba. No tengo un valor específico en mente. A veces solo congelo dialecto. En este caso, me gustaría que este último elemento del menú estuviera un poco por encima del punto medio del marco, puede preguntar, ¿por qué no centrado este menú principal? Y es una respuesta sencilla porque los usuarios, estaría del lado izquierdo. Hay mucho más que decir, pero esa es la esencia, tendrá una discusión más profunda más adelante en el curso. El elemento de inicio es amarillo en el diseño existente, puedes encender tu navegador, hacer clic derecho e inspeccionar eso. Y el código de color es FF FE 00 000. Como consejo rápido, si anula la selección como así, tendrá que hacer doble clic muchas veces para llegar a esa capa de texto. Da click una vez y tendrás Rimland seleccionado doble clic y habrás enmarcado para seleccionar de nuevo doble clic, esta vez arriba de casa, y finalmente lo tienes. Eso es un poco tedioso. Entonces aquí hay una desselección de rayos más rápida. Está bien. Ahora con todo estos electos controlan glyc home. Y eso es todo. Controlado Likud y listo. De acuerdo, abre el recolector de color y usa ese código, FS y FF, FE 00, 00, 00. Gran trabajo. Así que recuerda, si controlas click en una capa de burbuja que está dentro de varios fotogramas, inmediatamente seleccionarás cosas increíbles. Vamos a renombrar este a Menú Principal, y ya terminamos por ahora. Muchísimas gracias. 5. Configura el cuadro de búsqueda de búsqueda: Bienvenido de nuevo. Manejemos el cuadro de búsqueda copiando pegando este bit de texto del diseño existente. Good the Type Tool y pegarlo en. Diseño de obsequios hechos con amor, gratis para uso comercial. Impresionante. Centrar el texto tanto en términos de posicionamiento sino también desde este lugar aquí. Esto ya está en todas las gorras. Entonces ajustemos el tamaño. Vamos con Poppins, robusto, pero quiero algo un poco más suave. Bold básicamente significa que estás haciendo una declaración fuerte, pero realmente no queremos tanta atención a este título. Por lo que un estilo más ligero puede funcionar mejor. Y en la luz parece bien. Por favor deje unos 40 píxeles del menú principal. Esto no es resonancia, no lo hagas, por cierto, por los Pexels. Pero queremos golpear ese punto dulce entre tener un diseño compacto y dejar espacio suficiente para respirar. Ahora para asegurarte de que estás en el camino correcto, mantén presionada la tecla Alt y pasa el ratón sobre el menú principal. Entonces usa tus teclas de flecha con qué? Sin turno. De acuerdo, Ahora para el cuadro de búsqueda, Empecemos con nuestro tipo de texto en busca del regalo. Y esto va a ser una pista que está dentro de la caja. A pesar de que la mayoría de la gente sabe usar un cuadro de búsqueda, esta sugerencia hace que se vea un poco mejor para el estilo. Vamos a bajarlo bastante. Yo diría que tal vez Poppins, regular 13 pixels, no todo tratamiento caps. Esa debe ser palabra simple y directa. Por favor recuerda abrir este panel para desactivar esa configuración, la configuración de todos los mayúsculas. se hace haciendo clic en este símbolo menos. De acuerdo, vamos a elegir un color después de añadir el fondo para esta región. Pulse Shift a para habilitar el diseño automático. Podríamos haber usado el marco simple, pero esto es un poco mejor. Habilita una campana haciendo clic aquí. El blanco puro está totalmente bien. Ahora, está bien, ahora vamos a redimensionarlo a algo alrededor de 500 píxeles, 500 o algo así en esas líneas. Ahora, ¿por qué 500 pixeles? Porque la carga se va a colocar dentro de ella y realmente no hay nada más que sea importante que esta área. Algo ahora aunque como 300 píxeles no ocuparían el espacio correctamente, se vería extraño, simplemente demasiado pequeño. Pero algo por encima de los 750 sería una exageración masiva. En caso de que quieras trabajar con precisión, ve al campo W aquí y escribe 550, qué, cualquiera que sea el valor que te convenga para la altura. Recuerda, el menú principal era de 60 pixeles, 600. Usa el mismo valor aquí, sin embargo. Es posible que notes que el campo H está gris. Eso puede pasarte a ti. Eso se debe a una configuración aquí de las restricciones y el cambio de tamaño. Pero sigamos adelante. Vamos a mantenerlo simple. Ve aquí y arrastra esto hacia abajo. Ahora el campo de edad, el campo de altura está desbloqueado porque Figma entiende con tryna hacer algo aquí. El texto ya no está centrado, pero abre el ajuste de relleno desde este lugar. El ajuste por defecto es de arriba a la izquierda. Yo busco este. ¿De acuerdo? A algunas personas les gusta centrarlo así. Pero porque el botón de búsqueda va a estar dentro de él, creo que lo voy a dejar así. De acuerdo, los bordes cuadrados son un poco 2005. Entonces, vamos a redondearlos a cinco píxeles. Y porque tenemos aquí en este panel, vamos a centrarlo dentro de este marco grande. Ahora andar, luciendo bien hasta ahora en relación al titular, deja 20 píxeles entre ellos. Algunas capas de textos tienen este cuadro limitador que es un poco más grande que el texto real. Por lo que la medición puede no ser 100% precisa, pero si te mantienes consistente y usas la misma medición del mundo, entonces eso es todo lo que importa. Por lo que confía en las mediciones que muestra Figma y estarás bien para ir. Ahora, es hora de configurar la carga, dar la herramienta de tipo y escribir la búsqueda. Ahora podrías notar algo un poco extraño aquí, pero no te preocupes, te lo voy a explicar. Recuerda cómo hicimos el menú principal, donde los elementos del menú se colocarían justo al lado del otro cuando tocamos el control D, Eso es auto layout en acción. Ahora, permítanme borrar eso. En este caso aquí tenemos que hacer lo siguiente. Selecciona el marco y en la ventana emergente de relleno, tenemos este desplegable aquí que quizá te hayas perdido. Ahora mismo dice atrás, cámbialo al espacio entre. Entonces de vuelta al espacio entre. Y ahí tienes. Y mientras estamos aquí, vamos a editar el relleno en el borde izquierdo para decir 20 píxeles. De acuerdo, la cama de al lado debe ser sencilla, como el texto de búsqueda y cabecera ellos o haga clic con el botón derecho y elija agregar diseño automático. Hecho. A continuación, agregarle un relleno. Y por supuesto esto debería ser naranja. Notarás que aún no configuramos estilos de texto ni de colores. Y eso es porque hasta ahora no hay necesidad de ello. Además, este va a ser un proyecto muy pequeño, por lo que realmente no se necesita. Ahora, cambia el texto blanco y redondeamos las coordenadas con un valor de cinco píxeles para que este botón sea más saludable, cambia el bateo, luego está bien para la parte superior e inferior 40 debería darte un botón de tamaño decente. Ahora sé que tenemos una brecha diferente para el cuadro de búsqueda, pero eso es intencional. Siento que así se ve mejor porque tenemos la misma distancia a nuestro alrededor botón y eso son 10 píxeles. De acuerdo, ahora retrocediendo, esto es todo cuadro de búsqueda. Todavía tenemos algunos detalles que resolver, pero déjame mostrarte por qué usamos Auto Layout. Agarra cualquier borde y redimensionarlo. Te darás cuenta de que todavía tiene sentido. Sin método. ¿ De dónde arrastras? Menos pausa ahora mismo para que puedas rebobinar el video y trabajar conmigo. Te veré en un minuto. 6. Crea un menú desplegado: Bienvenido de nuevo. Tenemos todo cuadro de búsqueda y el contraste es algo decente, pero siento que necesitamos un poco más de separación entre ellos. Para ayudarnos con eso, voy a añadir un trazo. Ahora, esto se va a aplicar a este marco que por cierto, debe renombrarse a buscar. Entonces por favor maneja eso ahora, cámbialo para buscar en términos de color, estamos buscando ese punto dulce. No demasiado oscuro, ni demasiado claro. Creo que algo en estas líneas debería funcionar bien. El código de color es C9. C9, C9. Impresionante. Ahora vamos a hacer el menú desplegable para moverlo a lo largo. Duplicemos este cuadro de búsqueda, usemos Control D y moverlo hacia un lado, renombrarlo para que caiga antes de sumergirnos en él. Ahora, está bien, Ahora lo primero que necesitamos configurar es cambiar este texto, cambiarlo a la fecha. Pero puedes usar todas las gorras para eso. No hay necesidad de ir a la transformación del texto. A veces es simplemente más fácil. De acuerdo, A continuación, tendremos que añadir el icono desplegable. Por lo que encenderé mi sitio web favorito para ese laboratorio icon.com mientras paso por estos pasos, déjame subrayar una cosa clave. No agregamos nada a nuestro panel de activos. Típicamente este botón de búsqueda, ni configuramos ningún color ni textiles. Potencialmente podríamos hacer eso. Pero si no planeamos usarlos a través de montones de páginas, ¿por qué molestarse? Si estamos hablando de un par de páginas? Configuración tutorial, estoy más que feliz de saltarme algunas de estas cosas que realmente nos desenfocan, que nos alejan del trabajo de diseño real. De acuerdo, borramos el botón y se movió la capa de texto. No se preocupe. Trae ahí sin embargo y encogerlo. No es necesario utilizar la herramienta de báscula para este. Si utilizas este tipo de icono, esto va a soportar el préstamo. Por lo que no hay necesidad de preocuparse por el ícono mirando a través de 10 ni nada por el estilo. Busco 36 pixeles, aunque solo hace una preferencia personal. Si has colocado icono dentro del marco, la fecha se va a mover de nuevo a su lugar. Ahora, ¿por qué retrocede así? Si seleccionas el marco desplegable, verás que tienes esta opción configurada en el espacio de la ventana de relleno entre, acuerdo, me gustaría que este elemento tuviera unos 120 píxeles de ancho. ¿ Verdad? Ahora mirándolo, creo que me olvidé de cambiar el color de la mano. Ver, esta es una selección aquí. Fecha es el valor predeterminado. Esto está activo. Este texto aquí. Por otro lado, esto es una mano. Se trata de una pieza de texto que desaparecerá una vez que empieces a escribir. Por lo que por favor controla haz clic en él y abre el seleccionador de color. Si bien estoy tentado a usar el gris del trazo, creo que eso es demasiado ligero para ello. Entonces, en cambio, vamos con algo alrededor de este código de color. A4. A4, a4. Está bien, esto se ve mejor. Ahora la pregunta es, ¿necesitamos esa palabra extra entre estos dos campos? Este de aquí que dice ordenar por y yo digo que no. En cambio, creo que preferiría una altura más pequeña, pero ambos de estos artículos, selecciónalos. Ambos 50 pixeles deberían ser un mejor ajuste. Y voy a hacer algo un poco polémico, pero me mantengo firme detrás de ello. Para el marco de búsqueda, cambie el relleno del lado derecho a 50 píxeles. Y eso es porque quiero cinco píxeles en los tres lados. Esto debería verse mucho mejor. Y efectivamente lo hace. Antes de tomarnos un descanso, vamos a centrarlos horizontalmente. Para lograrlo, seleccione ambos cuadros y agruparlos. Sí, nuestro primer grupo en este curso. De acuerdo, puedes usar Control G o puedes hacer clic derecho después de que hayan seleccionado. Prefiero el Control G por razones obvias, Es un poco más rápido. A continuación, use este icono aquí, alinee los centros horizontales. Ahora podemos desagrupar estos artículos así. Haga clic derecho en el panel de capas y eso es todo. Básicamente ya terminamos. Y estoy muy contenta con nuestro progreso. Y espero que lo estés pasando bien paso a paso. Vamos a crear este impresionante sitio web. Te veré en un minuto. 7. Crea el elemento más importante: la tarjeta: Bienvenidos de nuevo, tacones. La parte más importante en nuestro diseño, la tarjeta. Esto es esencial porque ocupa alrededor del 80 por ciento de la página. Esto determinará el aspecto de nuestra página de inicio, por lo que lo mejor es hacer un buen trabajo con ella. Por favor, asegúrate de trabajar a lo largo de tu segunda visualización. Está bien, abre, esto se ve genial. Dotnet, haga clic en cualquier freebie. Y una vez que estás entonces esa página es guardar la foto, copiar el título y añadirlo a Figma. Puedes dejarlo como está por ahora. Para la descripción copia alrededor de dos oraciones, parte, y pégalo en. Pero esta vez, saca una caja. De acuerdo, hemos agregado el texto porque vamos a usar el diseño automático, agarrarlos a ambos y usar Shift a Notarás que tendrás un diseño automático revisando el panel de capas. Este es el símbolo para eso. ¿ Verdad? Ahora por favor agregue el relleno blanco. Esto no se ve todo ese salto, pero no te preocupes, vamos a cambiar estos estilos de capa y se verá mejor. Lo primero que quiero arreglar es el relleno. Usa 24 todos los bordes. Y eso se debe a que esto tiene un impacto importante en cómo se ve el sitio web y que se siente así. Todo se trata de estos pequeños detalles. Para el título, usemos Poppins, semi negrita, 20 píxeles, no todas las mayúsculas transformación. El diseño existente tiene un estilo normal, pero creo que prefiero el semi audaz. No importa el caso, podemos experimentar con todo en tan solo unas lecciones por el camino. De acuerdo, Poppins semi negrita 20. Para la descripción, Vamos a probar Poppins regular 14 pixels, no todas las mayúsculas. De nuevo, no tienes que saberlo de memoria y no tienes que tratar cada elección como si fuera algo permanente. Es muy probable que vayamos a cambiar esto. Aquí la clave es asegurarse de que esa descripción insignificantemente menor que el título del libro. Eso es raro. Lo principal. Está bien. si acaso el relleno en la parte inferior no se ve así, por favor haga lo siguiente con la descripción seleccionada, elija la segunda opción aquí llamada auto hide. Con eso seleccionado, la caja blanca se expandirá y el relleno de 20 píxeles debería verse bien. Es por ello que estamos usando el diseño automático. Sin ella, habríamos tenido que ajustar constantemente el rectángulo de fondo y medir las cosas constantemente. No es el fin del mundo, pero aún así esto es mucho mejor. Hablando de trabajar de manera más inteligente, queremos ser columnas como en la versión en vivo. ¿ Cómo se supone que hagamos eso? Bueno, hay dos maneras. Número uno, hacemos algunas matemáticas. 1200 píxeles, área activa menos dos huecos. Diga que los píxeles cada uno, eso es 16 en total. Por lo que 1200 menos 60 es 1140 dividido por tres, eso son 380. Entonces ese es el primer método. Una tarjeta debe tener 380 píxeles de ancho. Seleccionaríamos el marco y luego cambiaríamos el valor w a 380. Ahora, aquí está el segundo método. Si simplemente arrastramos este mango hacia afuera, las cosas realmente no van a funcionar. Entonces cambiaré algo. Controlaré haga clic en la descripción y me centraré aquí. Esto dice dónde. Y eso es porque dibujé esa caja, la hice. Pero digamos que quiero que el texto se ajuste en función del ancho del marco. Bueno, tenemos que cambiar eso para llenar el contenedor. Y déjame explicarte. Esta es una capa de texto que está dentro del marco. Por lo que el contenedor es el marco. Si establecemos la capa de texto para llenar el contenedor, esto significa que seguirá su ancho. Así es como luce eso. Selecciona el marco y hazlo más ancho. En justo así, el texto se está reacomodando es como magia. En más que eso, aún tenemos ese relleno de 20 píxeles. Si hago el contenedor de nanoalambre, ese texto ve eso y se ajusta, crece en altura. Esto es totalmente impresionante y me encanta. Y aquí hay otra ventaja donde compran, tienen más textos con esta descripción. Déjame pegar algo. Y ahí tienes. Se ve encantador. Y si elimino algo de ello, lo mismo, el diseño cambia. De acuerdo, déjame redimensionarlo a 380 píxeles y hagamos un recapitulación. Creamos dos capas de textos para el título que acabo de recoger, y luego lo pegué para la descripción. Hice la caja y luego pegué algo dentro de eso. Entonces para ambos se utilizan Auto Layout para enviar. Oye, entonces agregué un relleno de fondo y configuré un relleno de 20 píxeles para el ancho de la tarjeta. Podría haber hecho algunas matemáticas, pero opté por agregar más flexibilidad al proyecto. Eso hice al seleccionar la descripción y la configuré para llenar contenedor. Contenedores simplemente significa marco. En este caso, se puede pensar en ello como dentro del marco. De acuerdo, con este ajuste, ahora puedo cambiar el tamaño del marco y la descripción se ajustará. Pero por favor ten en cuenta que no hicimos ningún cambio en el título. Entonces si le agregamos más líneas, no va a quedar bien. Entonces de nuevo, selecciónela y cámbiala para construir contenedor. Ahora se puede ver claramente que es borde justo aquí. Si pego más textos, vamos a estar bien para ir. Volviendo a ello. No configuramos la distancia entre estas dos capas. Entonces hagamos esto, seleccione el marco y establezca este valor en 10 píxeles. Por último, mueva esto hacia abajo y agreguemos un rectángulo. Hazlo tan ancho como el marco, y no te preocupes por la altura. Está bien, se ve bien. Ahora donde la foto, Vamos a usar Control Shift J. La que descargamos al inicio de la lección está totalmente bien si están en su lugar y ahora puedes cambiar el tamaño tan alto como necesaria. Se quiere asegurarse de que la esquina sea visible. Y cuando estés feliz, muévala un poquito hacia abajo. Espero que esto haya sido interesante, pero no te preocupes si aún no obtienes esta función de cambio de tamaño. No es el fin del mundo. Se trata de una técnica avanzada para hacerte un poco más rápido. Si no puedes manejarlo, eso está totalmente bien. Por favor acuda a esta cancha y pide ayuda. Muchísimas gracias. 8. Cómo mejorar las cartas: Bienvenido de nuevo. Siempre hay opciones en Figma. Anteriormente vimos cómo podemos agregar un poco de complejidad jugando con la función de cambio de tamaño. No teníamos que hacer eso, pero nos dio mucha más flexibilidad en caso de que quisiéramos hacer la tarjeta más estrecha o tal vez agregar la cuarta columna, el trabajo nos llevará solo unos clics. El trabajo se va a hacer en tan solo unos clics. Si no agregáramos esa complejidad, habría mucho más trabajo manual. Es lo mismo con lo que estamos a punto de hacer. Podríamos duplicar esta tarjeta el montón de veces. Pero entonces y si queremos cambiar el radio de esquina, por ejemplo, o tal vez el tamaño del título. Sería mucho más trabajo manual. Entonces esto es lo que propongo. Seleccione aquí el marco y esta forma. Consulta el panel de capas para asegurarte de que tienes seleccionado lo correcto. Ahora, transformarlo en un componente haciendo clic aquí, notará que el símbolo en el panel de capas ha cambiado. Y esto significa que estamos bien para ir. Por favor, quítalo del marco, solo tienes que arrástralo fuera de él. Normalmente crearía una página separada para los todos mis componentes, pero quiero que la veas aquí mismo. De acuerdo, a continuación, arrastrar unas cuantas copias todo para arrastrar es la mejor manera de ir. De acuerdo, otra, pero esta vez Centralo dentro del marco haciendo click aquí. Y por último otro. Seguro que queremos al menos dos más esos. Entonces aumentemos el tamaño del marco. Selecciona este top one, y arrástrelo bastante hacia abajo. Hazlo realmente grande. De acuerdo, a continuación, usa alter, drag y shift para crear unas cuantas copias más. Cuadrícula irreflexivo de tres por tres. Eso debería ser suficiente. Si bien estoy trabajando en segundo plano, permítanme decirles que es esencial que cambiemos las fotos y los títulos. Si dejamos una sola tarjeta nueve veces, esto va a decir mucho de nosotros ya que los diseñadores van a decir que somos perezosos en cualquier proyecto, asegúrate de diversificar tu contenido. El objetivo es sencillo. quiere hacer que parezca que el proyecto ya ha sido codificado. Al igual que este es el sitio web en vivo. Repetición o el contenido falso simplemente rompe esa imagen, rompe ese sueño, ese espejismo, que como quieras llamarlo, ¿verdad? De acuerdo, Ahora de vuelta a donde ahora tenemos esta grilla. Pero no estoy enamorado de ello. Entonces volvamos al componente principal que está al lado del marco grande. De acuerdo, Ahora por favor seleccione el marco, el diseño automático que sostiene nuestras capas de texto. Digamos que queremos redondear estas coordenadas, ¿verdad? Bueno, no uses este campo aquí porque eso también afectaría a los bordes superiores. No queremos eso. En su lugar haga clic aquí. Ahora con esta nueva línea, podemos controlar cada esquina individualmente y queremos los bordes inferiores. Por lo que esos son los dos últimos campos van con 15 píxeles. Y note cómo el cambio se extendió por toda la pizarra. Es por ello que agregamos un poco de complejidad con los componentes. Creo que vale la pena el problema. Ahora qué tal si le agregamos el ictus al académico de carrera fue C9, C9, C9. Sin portón. Aquí vamos Mucho mejor. Sólo por diversión. Selecciona el título y pulsa la tecla de flecha hacia abajo. Este cambio está disponible para nosotros debido a esta función Auto Layout. Y debido a que es un componente, a se extiende por todas las demás instancias. Nuevamente, una instancia es un clon. En otra nota. ¿ Y si hiciéramos leer el título? Bueno, echemos un vistazo. Así es como se vería. Pero sabes qué, creo que prefiero un color gris oscuro, no negro puro por cierto, sino cercano a él a, a, a, a hacer a. Este es uno de mis códigos de color favoritos y se ve un poco más refinado frente al negro puro para que la coordenada, puede que no lo note. Pero confía en mí, es una diferencia sutil pero notable porque me gusta tanto. Déjame añadirlo a mis estilos de colores solo para que podamos practicar de nuevo, realmente no se necesita, pero creo que es una buena práctica. Voy a llamarlo texto oscuro o algo así. Y me alegra que hayamos introducido nuestro primer estilo de color en nuestro proyecto. Recuerda trabajar a lo largo de tu segunda visualización. Por cierto, claro, sí tenemos bastantes capas que necesitan el mismo tratamiento. El título, la fecha, y el icono desplegable. Seleccione el título con un solo clic. A continuación, utilice el control shift click para agarrar la fecha. Y controlar el cambio como una vez más para seleccionar la flecha. Así es como debe verse tu panel de capas con estas tres capas seleccionadas. Ahora. Ahora por favor elige texto oscuro y estamos bien para ir. Esto es lo que quiero que hagan antes de continuar control de la cabeza Shift K y reemplace todas estas imágenes. Por supuesto, tendrás que descargarlos de este look gris.net. Pero sí, reemplaza las imágenes y después de eso, por favor reemplaza los títulos y las descripciones. Déjame mostrarte una situación sin embargo. Digamos que el título es realmente largo y la tarjeta crece en altura. Ahora, podríamos hacer todo tipo de engaños aquí, pero eso sería realmente complicado. Y no quiero hacer eso. En cambio, quiero que hagas esto. Eliminar una línea en la descripción. Esta no es una solución perfecta. Nuestra configuración no nos permitirá la máxima flexibilidad, pero esto es más que suficiente para este punto. Cuando hayas terminado, por favor prueba diferentes estilos para el título, la descripción para el relleno y ve qué se te ocurre. Aquí es donde puedes jugar con las cosas. Tómate tu tiempo y por favor diviértete con él. 9. Configura la navegación secundaria: Bienvenido de nuevo. Configuremos la navegación secundaria que se coloca entre el cuadro de búsqueda y la cuadrícula. Anteriormente nos saltamos eso porque las tarjetas tienen la máxima prioridad en mi libro. Una última cosa sobre ellos aunque en este punto, podríamos hacer mucho más en términos de re-dimensionamiento, flexibilidad, incluso estilo. Pero honestamente, eso sería mostrar capacidades de sigmas y nada más. Es tan fácil quedar abrumado por todos estos ajustes. Por lo que dejaré lo muy avanzado, tal vez al final del curso en caso de que sí consigues esta situación donde una de las cartas es un poco más grande, ve al componente principal, selecciona el marco que sostiene ambos textos capas y cambiar esta parte aquí en lugar de contenidos HCG, cambiarla a fija. Eso va a romper algunos de los ajustes anteriores. Pero de nuevo, todo está bien porque es un proyecto tan pequeño. Y nuevamente, arreglarlo, haciéndolo 100% flexible requeriría mucha complejidad. Y no quiero hacer eso ahora mismo. De acuerdo, para las categorías, consigue la tecla de acceso rápido de la herramienta de tipo D, y escribe todo. A continuación, cambiar a para el diseño automático. Se puede ver cómo se expandió la caja, hace el relleno, Vamos a dejarlo caer a 0. Y si estamos escuchando en el panel derecho, Vamos a configurar un diseño horizontal. El siguiente paso es bastante importante. Por favor, asegúrese de seleccionar la capa de texto y no el marco en sí. Comprueba el panel de capas para eso. Vale, Ahora toca Control D un montón de veces para crear montones de copias. Ahora el colocarlos uno por uno, ¿existirían en categorías de la versión en vivo? Al igual que con pasar por él, por favor trabaje a lo largo su segunda visualización y cree la réplica perfecta. En primer lugar, después de administrar la réplica, entonces puedes ponerte creativo con una nueva versión, hacerte creativo y divertirte con ella. Otros colores, otros diseños, otras fuentes, lo que sea. Pero por ahora, vamos a mantenerlo simple creando ambos lo mismo, incluso nombrando juntas las mismas cosas. De acuerdo, Ahora que tenemos un elemento configurado, Lee's renombró el cuadro dos categorías. De acuerdo, Una vez hecho eso, por favor utilice las herramientas de alineación del lado derecho para centrarlo. De acuerdo, cosas impresionantes. Cambiemos el estilo de estas capas de textos. Y aquí una propina. Después de tener seleccionado el fotograma, pulsa la tecla Enter que seleccionará todos los elementos de ese cerebro. De acuerdo, ahora tenemos la región de texto disponible para nosotros en el panel derecho. Poppins regular 14 está totalmente bien. Lo que quiero hacer es agregar una transformación all caps. Y eso es porque quiero que esto destaque un poco más, menos. También espejará la navegación principal. Ahora, está bien, pulsa la tecla de escape y selecciona el fotograma una vez más. Esta vez, queremos ajustar el espaciado entre estos elementos. Busco algo generoso, como 40 píxeles que esté lleno de 0. Para asegurarte de que lo juzgues bien, por favor vuelve a centrarlo. Y sí, estoy bastante contento con eso. Ahora tenemos algunas cosas que hacer. Por lo que queremos 30 píxeles del cuadro de búsqueda. Usa la tecla ALT y tus teclas de flecha para eso. Y 30 píxeles de las tarjetas. Ahora este valor, ¿te vendría bien más? Claro, ve por eso si te apetece. Pero por ahora, hagamos una réplica completa y luego vas a experimentar. Ah, no nos olvidemos del color. Por favor seleccione el marco, presione Entrar para seleccionar todas las capas de texto, y luego asigne ese textil oscuro. Apenas me olvidé de eso. De acuerdo, ya casi terminamos. Como paso opcional. Vamos a mostrar que estamos actualmente en esta primera categoría en la versión en vivo, esto se muestra en naranja. Entonces hagamos lo mismo, pero también lo haremos audaz. Control haga clic en él, y luego cambie el peso a partir de aquí. Pero vamos a, Ok, Impresionante, Buenas cosas para el color. Primero tenemos que romper el vínculo con ese estilo, porque de nuevo, este es el estilo oscuro. Eso es lo que es este botón para ese bit. Y ahora obtenemos acceso al recolector de color, cosas fáciles. Ahora nuestro tono de naranja debería estar disponible aquí, seleccionado y ya terminamos. Si no lo tienes por la razón que sea, solo usa la herramienta cuentagotas. No agregué ese punto redondeado porque no creo que traiga mucho a la mesa y creo que es una distracción de todo lo demás que está pasando aquí. Entonces sigamos adelante. Pero después del breve descanso, muchas gracias. 10. Crea la paginación: Bienvenido de nuevo. Esta parte que te muestra el número de páginas se llama paginación. Pongámonos a trabajar y hagámoslo en Figma. Empieza con la herramienta de tipo y escribe una. A continuación, habilita el diseño automático con Shift a y configura una película. Espero que estés empezando a aprender estos pasos de memoria. Si no, no se preocupe, vamos a pasar por ellos constantemente. Para el relleno, usemos 24 a cada lado y dejemos luego en la parte superior e inferior. De acuerdo, configura un radio de coordenadas de 10 píxeles, aunque quizá queramos cambiar este valor más adelante. De acuerdo, ahora, vamos a habilitar el trazo. Negro puro por ahora se establece en el lado n. Los trazos de píxel funcionan mucho mejor. Nunca sugiero que usen trazos de un píxel para los colores visibles en las tarjetas. El grado que utilizamos es muy sutil. Entonces por eso podemos salirnos con la suya ahí, pero no aquí. En este caso con este botón, eso no sirve. Ahora bien, bien, cosas lindas. En efecto, no estoy contento con el radio de coordenadas, entonces simplemente no lo está haciendo por mí. Entonces bájala a cinco píxeles, por favor. Y creo que esto es mucho mejor. Tenemos que crear varias copias. Pero primero, vamos a transformarlo en un componente desde lo más alto del programa. De acuerdo, cosas impresionantes. Arrástrelo a un lado de la pantalla y cámbielo a paginación o algo así. Nuevamente, prefiero no usar dominar los componentes en el diseño real. Y creo que es un buen hábito tener. Idealmente, deberías colocarlos en una página separada, pero esto también está bien. Ahora, arrastra hacia fuera la primera copia manteniendo pulsada la tecla Alt u Opción en un Mac. Encuadra 30 píxeles de la tarjeta, eso son 300, 30. De acuerdo, a continuación, vamos a arrastrar unas cuantas copias más. Estamos buscando a los cinco en total. Ahora, podríamos potencialmente agregar un diseño automático aquí, pero preferí la forma clásica para este elemento. De acuerdo, cinco instancias de este componente, cinco clones porque los tenemos todos seleccionados y del mismo tipo. Ajustemos el espaciado entre ellos a 10 píxeles. Clásico. Ahora bien, está bien, luce bien, pero aún tenemos que peinarlos. Y empecemos con el trazo y el texto. Estos necesitan ser ajustados a naranja. Doy click en el componente principal que está apagado a un lado. Y a partir de colores de selección, abre el recolector de color y elige naranja, cosas clásicas. De acuerdo, Ahora necesitamos que el primero sea negro porque ya está prensado. Déjame mostrarte lo fácil que es cambiarlo, seleccionarlo, y quitar el trazo al símbolo menos. Entonces desde el mismo lugar, cambia estos colores. Es tan fácil como eso. De acuerdo, ahora separemos estas cargas. Queremos tres a la izquierda y dos a la derecha. Y eso es porque entre ellos, queremos la capa de texto que muestre tres puntos. Es posible que pienses que las cosas se están complicando, pero es hora de romper los muros de alineación. Pero primero, cambiemos las capas de texto a algunos otros valores. Ahora de nuevo, esto sólo tomará un momento. Practica tu velocidad como siempre. Verán el hecho de que esta instancia con dígitos dobles se redimensionará por sí misma, lo cual está totalmente bien por mí. De acuerdo, ahora usa esta característica llamada ordenada y eso arreglará todo. Colinas ahí ya que mientras nos estamos acercando al final de este diseño de la página principal, todo lo que estamos haciendo es bastante sencillo. Se trata de capas de texto y rectángulos, nada de fantasía. Nos aseguramos de que nuestras distancias sean de baja clave y que utilicemos el mismo puñado de colores. Lo creas o no, esta es la base, las decisiones sólidas, una buena base al momento trabajar y el conocimiento decente del programa. Eso es todo lo que necesitas. Siéntete libre de seleccionar a todos estos chicos y organizarlos en un grupo. Y cuando eso se haga, hemos terminado esta sección. Muchas gracias y nos vemos en un minuto. 11. Crea la base para el pie de pie: Bienvenido de nuevo. Vamos a trabajar en cuanto más pueda necesitar para agrandar un poco más el marco del escritorio, pero eso es fácil de hacer. No se preocupe por ello ahora. De acuerdo, ahora, buena herramienta The Frame y dibuja uno hacia fuera. Esto necesita tener 1920 píxeles de ancho. Y en cuanto a la altura, diría que unos 400 píxeles. Ese es un tamaño decente. Tendrá que editar algunas cosas como de costumbre. Para el color, típicamente prefiero pies claros, pero en este caso el original es oscuro. Entonces déjame usar algo así como 33 para ser. Este es otro tono de gris oscuro que uso a menudo y pronto empezarás a recordarlos también. En el sitio web existente, sí tenemos una barra naranja que está pasando por eso. Para eso, usaremos la herramienta Rectángulo. Espero que ya hayas visto que en general, dibujo formas aleatorias, luego uso el panel de propiedades para mezclarlo. Entonces en este caso, esto es 1920 por seis píxeles. Al pensar que esto debería estar bien. Seis es un medio decente. Ocho funcionarían también, pero preferiría seis un poco más delgadas. Y como estamos de este lado, también podemos centrarlo luego alinear arriba en. Esto funciona bien porque el marco que creamos lo traga. Por cierto, debemos renombrarlo a pie de página. Entonces tenemos un poco más ordenados aquí. También podríamos agrupar todos estos componentes juntos. Pero otra vez, vamos, sigamos adelante. Consigue la herramienta de tipo y empieza a pegar todos estos títulos. Navegación, esa es la primera en el medio, descargas superiores. Después contáctanos y suscríbete a nuestro boletín, extiéndalos por la cama. Pero no estamos buscando algo en particular en este punto. Simplemente colóquelos a todos. Ahora. De acuerdo, ahora hablemos de estilo. Selecciona todas estas capas de textos, y lo mantendremos bastante simple. Poppins, regulares 14 píxeles en todas las tapas. Hay muchos, muchos detalles que puedes agregar para que un diseño se vea mejor. En el tiempo. Ya verás lo que son, pero te puedo decir que no son lo que podrías esperar. A los principiantes les encantaba tirar cuando fotos, gráficos enormes y cosas de esa naturaleza. Entonces por la borda, demasiado. Profesionales hacen esto. En lugar de usar el blanco para estos títulos o eso es blanco puro. Podemos usar uno de estos grises claros. Por ejemplo, E5, E5, e5. No parece mucho, pero confía en mí, así es como muestras atención al detalle. Es así como trabajan los profesionales. Otra cosa, coloquemos todos estos elementos 60 píxeles de la parte superior del marco, Eso es 60. ¿ De acuerdo? Algo de este espaciado, también podrías usar 40, 50, 60, 70, 80 píxeles, lo que quieras. Pero, ¿qué pasa con la brecha entre ellos? Bueno, arriba tenemos tres columnas y sabemos el ancho exacto porque hicimos las matemáticas. Eran 380. Ahora repitamos aquí las matemáticas. 1200 pixels para el área activa arriba arriba tenemos dos huecos, pero aquí tenemos tres. Los huecos pueden ser de cualquier tamaño, pero usemos 20 en este caso. Eso es bastante estándar. Entonces 3 veces 20 es 60, 1200 píxeles menos 60 es 1140 dividido por cuatro, porque queremos cuatro columnas, eso es 285. Entonces lo que puedes hacer es dibujar un rectángulo que sea así de ancho. 285. Ahí vamos. Ahora, claro que puedes alinearlo a la izquierda con la guía izquierda. Una vez hecho eso, podemos agregar algunas copias más y dejar 20 píxeles entre ellas. Ahora esta forma infalible de trabajar, pero incluso hay una forma más rápida con menos matemáticas. Recuerda la cuadrícula que configuramos al principio. Seleccionemos el marco de escritorio y lo habilitaré. También cambiaré la opacidad al 10 por ciento para que veas lo que está pasando. Ahora, nota algo. Los rectángulos grises son tan anchos como tres columnas. Entonces en realidad no teníamos que hacer ninguna matemática. Sabemos que tenemos 12 columnas en total y queremos cuatro áreas. Por lo que cada título debe obtener tres columnas. V veces 4 es 12. El primero tiene estos tres. Entonces el siguiente me tiene el siguiéndome. Ahora a la izquierda alinear los títulos con la primera columna de cada grupo es un no cerebro. Eso es bastante fácil. Entonces, en general, las muertes tienen puedes dividir un pie de página ya sea mediante el uso de matemáticas al 85 o mediante el uso de esta cuadrícula. Ahora bien, si quieres tres áreas, tres columnas, bueno, eso significaría lo siguiente. Las descargas superiores simplemente se moverían hacia la columna correcta. Eso es todo lo que hay a ello. El líder rectángulos y ahora podemos continuar. Pero después de ese rápido descanso, muchas gracias. Y de nuevo, espero que estés trabajando conmigo. 12. Añadir contenido en el pie de Piano: Bienvenido de nuevo. Empecemos a agregar algo de contenido a lo más lejos, el mantener las cosas en marcha. Voy a copiar pegar estos elementos del menú. Nada todo eso de fantasía. De lo que quiero asegurarme es que lo dejé alinear y que aumenté la altura de la línea a algo bastante generoso. A lo mejor 30 píxeles, así que eso es 300 algo a lo largo de esas líneas. Asegúrese de que el texto sea blanco y quite la transformación de todos los mayúsculas. El bit más importante es esta navegación es el título en estos ítems son el contenido en esa sección. Entonces este es un solo elemento. Para asegurarnos de que transmitimos eso a nuestro diseño. Yo quería que los ítems estuvieran bastante cerca del Título, 15, 20 pixeles como máximo. Bueno, en algún lugar de esa línea, tal vez 10, eso funcionaría también, pero idealmente de 15 a 20. Ahora, lo que quiero que eviten es un fuerte, este denso, que básicamente rompe la idea que este es un solo elemento. De acuerdo, ahora para la siguiente columna, voy a pegar mi contenido y voy a dejar unos 30 píxeles entre ellos. No quiero ir al borde de la tercera columna porque va a parecer raro y lleno también. Algo que podrías haber notado es que la segunda columna es en realidad más larga que la primera. Y esto no es una gran suerte. Idealmente, estos artículos tendrán la misma altura o el izquierdo sería más largo que el otro. Es sólo visualmente más agradable de mirar. Pero como este es un proyecto real, lo voy a mantener como está, porque así es en la biblioteca. Y permítanme explicar el razonamiento. En la primera columna se espeja la navegación principal ahora mismo. El otro es la navegación secundaria. Por eso, realmente no podemos cortar a otros y colocarlo en el izquierdo. Eso no tendría sentido. Por lo que estos son los organizados de manera lógica. Podemos empezar a reorganizar las cosas a expensas de la lógica o de la experiencia del usuario. Voy a decir eso otra vez. No basamos nuestras elecciones en el argumento de que, Oh, me gusta más así. Cuando sabemos que eso va en contra lógica o de la experiencia del usuario. De acuerdo, sigamos con esto. Las descargas superiores ya están ordenadas, solo el montón de espacio vacío que tienes que eliminar. Por favor, asegúrate de no dejar espacios vacíos al final de la línea. Eso muestra una falta de atención al detalle y es un error en mi libro no es uno grande, pero es un error que me dice a mí y al cliente que realmente no estás todo lo que interesado en ejecutar las cosas correctamente. Navegar. Para la sección Contáctenos. Por favor, arrastre una caja que diga por qué hay tres columnas y pegue el texto dentro. Selecciona la dirección de correo electrónico de la fila y hazla semi negrita. Más que eso, por favor hazlo amarillo. Deberías tener esa muestra debajo del recolector de color. De no ser así, basta con muestrear o ponerlo manualmente. La idea es que esto es un enlace y hay que destacar. Se podría decir, vale, pero los de izquierda también son enlaces, ¿verdad? Y en efecto tienes razón. Pero en términos de importancia, queremos empujar este poco hacia adelante. Esto es un poco más interesante. Los enlaces de la izquierda, bueno, son, son en su mayoría para propósitos de CEO, propósitos SEO. Pocas personas realmente las usan, pero es solo una parte de cualquier sitio web. Por lo que es algo clásico que hacer para incorporarlos en el pie de página. De acuerdo, ahora haz lo mismo para el contacto, semi negrita, y luego hazlo amarillo. Las cosas se están moviendo muy bien. Si bien copio pegar los iconos de las redes sociales, déjame decirte por qué debes mantenerte alejado de pies de página muy pequeños. Es decir, esas fotos que son increíblemente cortas, como 100 píxeles de altura o algo así, que sólo tienen un aviso de copyright y eso es lo que da la cosa. La mayoría de los negocios tienen diversos requisitos legales que tienen que publicar, que tienen que mostrar en el pie de página. Términos de servicio, cookies, cosas del RGPD, política de privacidad, lo que sea. Por eso es que lo mejor es tener fotos como esta, generosas. Ah, por cierto, debes seleccionar esta capa de texto y cambiarla hasta todo alto. Eso se debe a que quiero copiar el conjunto de pegar para la breve descripción del boletín por si no estás seguro de que las cosas estén correctamente alineadas, selecciona ambas capas y usa el comando Alineación. De acuerdo, cosas impresionantes. Otro consejo. Cuando desee apagar rápidamente la cuadrícula, no aleje el zoom y seleccione el marco del escritorio. En su lugar, utilice el panel de capas. Igual que eso. Ahora puedes activar o desactivar la cuadrícula. Buen trabajo. Déjame mostrarte otra pieza de buen trabajo. Necesitamos el campo aquí, ¿verdad? Copiemos el cuadro de búsqueda desde la parte superior de nuestro diseño. Ahora, haga clic en el pie de página y péguelo con Control V. Ahora posiciónelo a unos 10 píxeles de la capa de texto. Por eso quería que lo cambiaras a altura automática para que no tuviéramos acceso alguno. Esto es un poco demasiado amplio, pero en ninguna parte lo es. En primer lugar, haga clic en el botón y llévalo fuera de este marco. Colócala a la izquierda como con todo lo demás, nuevo en general, alinear a la izquierda de la cosa no se centran en, ¿de acuerdo? Una vez que eliges una alineación B, está centrada aunque dejé la línea. Entonces de nuevo, debes spec para dejar la línea, este campo requiere un poco más de amor. Esto es demasiado alto para esta región. Así que selecciónela y bájala a 40. Entonces eso es para la z sin embargo. Hazlo web más estrecho también. Si aún no lo has hecho, utiliza la guía adecuada para eso. Ese debería ser el punto del Líbano. Reemplaza el ancho del texto, introduce tu dirección de correo electrónico. Y voy bastante rápido. Pero de nuevo, si estás viendo esto en tu segunda visualización, deberías poder seguir adelante, pausar tantas veces como necesites saber, ¿de acuerdo? Esto se va a centrar porque solía haber una carga al lado de ella. Eso significa que tenemos que seleccionar el marco de búsqueda y cambiar el ajuste en el relleno, pop up desde el espacio entre DO de vuelta ahora. De acuerdo, Impresionante, Buenas cosas. Se eliminó el trazo gris. Realmente no necesitas eso, sobre todo en este fondo. Habría notado que esto es blanco mientras que el bibliotecario está oscuro. El pequeño variación en mi extremo. Estoy totalmente de acuerdo con eso. Consulta tus distancias y cuando estés feliz, podemos llamarlo un día. No me malinterpreten. Todavía queda mucho trabajo por hacer en la página principal, pero vamos a continuar después del breve descanso. Muchísimas gracias. 13. Cómo gestionar las imperfecciones visuales: Bienvenido de nuevo. Cuanto más lejos está apenas a punto de hacerse. Pero podría haber notado que no se ve todo tan equilibrado, mientras que técnicamente es correcto y bien ejecutado de acuerdo a las matemáticas, simplemente no se siente bien. Debido a eso agrupará todo en cuatro carpetas diferentes. Uno por cada columna. Use shift to multi-select layer y luego use Control G para agruparlas. Por lo que este va a ser el grupo número uno. Mientras yo manejo el resto. Déjame hablar un poco más de esta situación. Este es uno de esos pocos casos en los que debes doblar las reglas. Nuevamente, el sistema de rejilla es una bonita guía y nos puede ayudar, pero no es el fin del mundo. Si algo no está perfectamente alineado para los desarrolladores, esto realmente no es gran cosa, no es un tema enorme. Por eso. No dudo en hacerlo de la siguiente manera. Después de tener todos estos cuatro grupos, por favor selecciónelos todos. A continuación, ve a la parte superior derecha y usa esta característica que se llama ordenada. Esto básicamente reajustará el espacio entre cada carpeta, entre cada grupo. Y así como eso, esto se ve mejor. De acuerdo, Nos quedan algunos elementos. Seleccione la línea demasiado bien, para que podamos agregar este divisor horizontal. Si tienes tus guías activas, este debería ser un trabajo fácil. Echa un vistazo aquí al campo ancho para asegurarte de que esto esté configurado correctamente. Lo que los principiantes suelen hacer es dejarlo blanco o un gris muy claro. Y eso es un gran error. Esto es como un cinturón, pero para tu pie de página en lugar de tus bandas. Ahora bien, ¿quieres que tu cinturón destaque de verdad? No, en realidad no. Entonces por eso necesitamos un color muy sutil. Quizás quieras probar estas calificaciones desde el área de colores del documento, pero no creo que ninguna de ellas sea lo suficientemente sutil. En cambio, propongo algo como esto. 434343. En el pasado, algunos diseñadores usaban el blanco con menor opacidad, pero a los desarrolladores realmente no les gustaba ese tipo de cosas. Por lo que preferiría usar código de color específico. Es más seguro de esa manera. Ahora en cuanto a su posición, 30 píxeles de la navegación secundaria está totalmente bien. Ahora todo lo que queda es un poco de copia pegada, pero por favor no se apresure. Son los últimos minutos del proyecto. Ahora, en esta parte, podríamos haber usado el diseño automático con ese ajuste llamado espacio entre. Pero la forma clásica de trabajar está totalmente bien. Me gusta usar bastante la tecla alt para revisar mis medidas y empujar las cosas en su lugar con mis teclas de flecha. Te sugiero que hagas lo mismo ahora mismo. Eso puede no venir de forma natural, pero a medida que diseñas cada vez más proyectos, verás que empezarás a hacerlo sin siquiera pensar en ello. Está bien. Para términos de uso y política de privacidad, me gustaría presionar la tecla Barra espaciadora un montón de veces para configurar mi espacio vacío. Entonces me gusta copiar ese espacio vacío y pegarlo del otro lado. De esta manera está perfectamente equilibrado. El rápido arriba seleccionó este marco de datos y ajustar el tamaño si es necesario. Sí, está bien. Ahora para echar un vistazo al diseño, pulsa el botón de reproducción cuando estés listo y ten un buen look de arriba a abajo. Este diseño es un ocho de cada 10 en mi libro. No es nada creíble, ¿verdad? No es precioso, pero está bien ejecutado y se ve bien y se hace el trabajo. Significa que la gente no tendrá ningún problema al usarla. Si puedes manejar eso, un simple ocho de cada 10, puedes ganar fácilmente miles de dólares al mes. No tienes que salir todo creativo. Ah, aquí hay un detalle que no debemos perdernos. El botón Contáctenos hace justo por encima de lo más lejos. Copiemos la carga del cuadro de búsqueda. En primer lugar, asegúrese de seleccionar el marco y no la capa de texto. Eso es algo grande. Entonces de nuevo, seleccione el marco y luego cópielo. Sabemos que si arrastramos este botón por encima del pie de vena va a tomarlo, se lo va a tragar así. No queremos eso. Necesitamos la carga para flotar por encima de ella. La solución es bastante simple. Empieza a moverlo y luego mantén presionada la tecla de barra espaciadora. Y es realmente así de fácil. Eso le dirá a Figma que lo deje. ¿ Dónde se deja caer eso? Nuevamente, comienzas a mover la capa y luego mantienes espacio, encuentra el centro. Y eso es todo. Haz que se vea mejor. Redondear las coordenadas mediante un valor muy alto como AD por ejemplo. Entonces eso es e a z aunque. Eso se redondeará por completo, cambiará el texto a algo más interesante, como mandarme un mensaje y luego centrarlo una vez más. Es posible que desee cambiar el nombre del marco a carga o la llamada a la acción o CTA o algo así. Entonces sabemos si se trata de LK, cosas divertidas con casi hecho con nuestro proyecto. Te voy a ver en un segundo después de ese Greg, descanso. Gracias. 14. Esto es lo que necesitas recordar: Hey, ahi, Este es Chris. ¿Cómo lo hiciste? Espero que logren divertirse con él porque al final del día, de eso se trata todo. No importa el resultado final, tienes que apegarte a él y hacer lo mejor de ti aunque no estés 100% contento con tu propia versión, por favor, publícalos en la plataforma. Lo que me gustaría ver de ustedes es un esquema de colores diferente, diferentes fuentes, tal vez una cuadrícula de tarjetas diferente. Ahora, por favor ten en cuenta que primero tienes que crear la réplica perfecta solo entonces en la nueva logró hacer eso por tu cuenta. Sólo entonces debes pasar a tu propia versión. Ahora bien, si te gusta Figma y crees que este es el adecuado para ti, por favor sigue aprendiendo. Hay mucho más por desempacar, pero vamos a tomarlo paso a paso. Entonces con eso, espero que te vaya a ver en otro curso mío muy pronto. Este es Chris estéril ficando por el momento. Dan.