Guía Completa Para Maquetar Un Diseño De Figma En HTML5 y CSS3
La maquetación de un diseño web es un paso esencial en el proceso de desarrollo de sitios web, en este artículo vamos a ver como abordar un diseño realizado en Figma que nos han pasado, para luego maquetarlo o convertirlo en código HTML5 y CSS3 y que sea funcional. Si bien no abordaremos una web completa, los principios son los mismos y te detallaré al final del artículo notas importantes a tener en cuenta para una mejor organización de archivos y carpetas que te pueda ayudar a dar mantenimiento al sitio web a largo plazo.
Antes de empezar
Instalamos un IDE(entorno de desarrollo integrado) de tu preferencia en mi caso utilizaré el más popular a día de hoy VSCode y una extension llamada Live server.
El diseño
Para este ejemplo he elegido un diseño que lo puedes encontrar en Frontendmentor.io el cual cuenta con todos los archivos para empezar la maquetación web, excepto el fichero de figma el cual puedes acceder si eres usuario de pago, he encontrado el mismo diseño en la comunidad de figma para que puedas seguir el tutorial.
Analizando la estructura del diseño
Antes de empezar a codificar debemos analizar el diseño y su estructura tanto el diseño para escritorio como para móvil, a primera vista para la maquetación de este componente card el contenido esta en un gran bloque resaltado con rojo, luego tenemos dos bloques, a la izquierda el texto y a la derecha la imagen, en el bloque del texto como vemos tenemos dos subbloques el de texto y los datos numéricos, esta misma estructura nos servirá para Mobile First que es por donde empezaremos.
Con esta información ya podemos hacernos una idea de la estructura HTML, este proceso facilita y agiliza la maquetación web
Piensa en la analogía de la construcción de una casa, en la que la estructura las columnas y las divisiones son el html, y la pintura y el diseño es el css.
Generando la estructura HTML5
Bien, una vez analizado el diseño pasamos a crear la estructura HTML con toda información del diseño, en este caso texto e imágenes, es muy importante crear toda la estructura con el contenido para luego añadir el css correspondiente, de esta manera nos evitamos repetir codigo css, porque si analizamos el diseño encontraremos varios estilos comunes como color de texto, espacios, y tamaños tipográficos, y en nuestros css global podemos aplicar esos estilos y el desarrollo será mucho más rápido, en diseños más complejos y extensos es mejor crear clases de utilidad con Tokens de diseño como en la metodología CUBE CSS. Y así es como quedaría nuestra estructura html en código y como se ve en el navegador, nos falta añadir los estilos css que añadiremos mas adelante.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="shortcut icon"
href="./images/favicon-32x32.png"
type="image/x-icon"
/>
<title>Card Component</title>
</head>
<body>
<div class="card">
<div class="card__info">
<h2>Get <span>insights</span> that help your business grow.</h2>
<p>
Discover the benefits of data analytics and make better decisions
regarding revenue, customer experience, and overall efficiency.
</p>
<ul class="list" role="list">
<li class="list__item"><span>10k+</span><small>Companies</small></li>
<li class="list__item"><span>314</span><small>Templates</small></li>
<li class="list__item"><span>12M+</span><small>Queries</small></li>
</ul>
</div>
<div class="card__img">
<picture>
<source
srcset="./images/image-header-desktop.jpg"
media="(min-width:40em)"
/>
<img
src="./images/image-header-mobile.jpg"
alt="Chicas en el ordenador trabajando"
/>
</picture>
</div>
</div>
</body>
</html>
Así es como nos queda la estructura sin añadir la hoja de estilos que lo haremos más adelante. Para poder visualizar en el navegador tienes que darle click derecho en sobre el códgio html en tu editor de código y la opción Open With Live Server
Guía de estilos
En el fichero descargado de frontendmentor nos viene una guía de estilos y esto es genial porque nos ahorra tiempo y nos permite sentar las bases de nuestros estilos como son los colores y la tipografía, es bueno tener una buena comunicación con el equipo de diseño para cualquier detalle que se presente y si de paso nos pueden pasar una guia algo parecida a esta, mucho mejor.
Nuestros estilos CSS3
Este es nuestro estyle.css, donde le damos vida a nuestra estructura html, lo he hecho con variables css ya que es una forma no solo moderna sino que también nos ayuda a un mejor manteniemto de los estilos globales y un mayor control, también puedes ver funciones css clam() en el --title-1 la utilizo mucho para tener una tipografía responsiva puedes ver como funciona en este artículo Scale font-size with CSS clamp() , en este caso va desde 28px (mobile) a 36px (desktop), hay muchas herrmientas en internet que te facilitan el trabajo, esta es la que utilizó, min-max-calculator.9elements, lo importante es saber como funcionas las cosas y no copiar todo lo que vemos en internet.
Esta hoja de estilos he añadido un resetcss porque cada navegador añade unos estilos por defecto, lo que hace este reset es quitar esos estilos para minimizar las varias diferencias visuales que se dan en diferentes navegadores de una misma web. Más abajo he añadido mis estilos.
:root{
/* Colors */
--very-darkBlue:hsl(233, 47%, 7%);
--dark-desaturatedBlue:hsl(244, 38%, 16%);
--soft-violet: hsl(277, 64%, 61%);
/* Neutral */
--white-hsl:0, 0%, 100%;
--white-transparent1:hsl(var(--white-hsl),0.75);
--white-transparent2:hsl(var(--white-hsl),0.6);
--white:hsl(var(--white-hsl));
/* Typography */
--fw-regular:400;
--fw-semiBold: 700;
--ff-inter:'Inter', sans-serif;
--ff-lexendDeca: 'Lexend Deca', sans-serif;
--title-1: clamp(1.75rem, 1.568rem + 0.91vw, 2.25rem);
}
Estilos base a partir de la guía de estilos, donde hemos declarado los colores principales, secundarios y tipografía, después de estos estilos añada el resetcss
/*Global Style*/
body{
font-size: clamp(0.938rem, 0.869rem + 0.34vw, 1.125rem);/*15px > 18px*/
font-family: var(--ff-inter);
display: grid;
place-items: center;
background-color: var(--very-darkBlue);
}
h2{
color: var(--white);
font-size: var(--title-1);
}
h2 span{
color: var(--soft-violet);
}
p{
color: var(--white-transparent1);
line-height: 1.67;
}
ul{
color: var(--white);
padding: 0;
margin: 0;
}
ul span{
color: var(--white);
}
ul small{
color: var(--white-transparent2);
}
picture,img{
width: 100%;
height: 100%;
object-fit: cover;
}
Vincularemos nuestra hoja de estilos y añadiremos unos estilos globales. Mira como queda la estructura html una vez añadido el reset y los estilos globales.
Estilos para la clase card
Estilos principales de la card component, aplicando display grid para crear dos columnas, la parte del texto y el de la imagen
.card{
display: grid;
grid-template-columns: 1fr;
max-width: 69.375rem; /* 1110px */
background-color: var(--dark-desaturatedBlue);
border-radius: 8px;
overflow: hidden;
}
.card__info{
display: flex;
flex-direction: column;
justify-content: flex-start;
padding:clamp(2rem, 1.091rem + 4.55vw, 4.5rem);
order: 1;
text-align: center;
}
@media (min-width:40em){
.card{
grid-template-columns: 1fr 1fr;
}
.card__info{
order: 0;
text-align: left;
}
}Estilos para la clase list
En esta parte estamos aplicando estilos con flexbox para la parte numérica en la sección de texto
.list{
margin-top: clamp(2.5rem, 1.773rem + 3.64vw, 4.5rem);
display: flex;
flex-direction: column;
gap: 1.6rem;
}
@media (min-width:40em){
.list{
flex-direction: row;
justify-content: space-between;
}
}
.list__item{
display: flex;
flex-direction: column;
align-items: center;
}
.list__item span{
font-size: 1.6rem;
font-weight: var(--fw-semiBold);
}
.list__item small{
text-transform: uppercase;
font-size: 0.8rem;
letter-spacing: 1px;
}
.card__img{
background-color: var(--soft-violet);
}
.card__img img{
mix-blend-mode: multiply;
}Aplicando estilos card y list
Y por último aplicamos estilos a la imagen que darán un efecto de color superpuesto a la imagen, para que tenga ese aspecto característico violeta
Resultado final
Este es el resultado después de añadir todos los estilos css a nuestra estructura, como se puede visualizar es un componente responsive y se adapta perfectamen a pantallas de diferentes tamaños, puedes visualizar la maquetación final en este link
Notas finales
Recapitulemos, hemos recibido un diseño en figma(puede ser de cualquier otro programa), lo hemos analizado y creado una estructura html5, luego vinculamos los estilos css para darle vida a nuestro componente card.
Para este tutorial se ha creado algo sencillo como un componente card, pero para una landing paga o un sitio más grande, es necesario seguir alguna metodología como BEM, CUBE CSS, SMACSS, me gusta seguir uno parecido a SMACSS que es le Patron 7-1 sass, seguir una de estas metodologías te permite tener organizado tus hojas de estilos, y de esta manera escalar tu sitio web y puedes adaptarla a tus preferencias ya que no son reglas estrictas a seguir.
Andy Bell dio una charla muy interesante, Crea excelentes sitios web, en la cual expone unos principios y fundamentos claves al construir un sitio web, como css moderno con metodologías, escala de espacios y tipografía fluida, diseños flexibles y mejora progresiva.