Adam Keyes | Maquetación fiel desde Figma

Un ejercicio que parece simple

En el máster de Conquer Blocks nos dieron un diseño de Figma de un portfolio ficticio y el objetivo era claro: llevarlo a código respetando cada detalle. Tipografías, espaciados, imágenes optimizadas.

Parece sencillo cuando lo describes así, pero la realidad es que maquetar un diseño de forma fiel requiere mucha más atención al detalle de lo que parece. Cada decisión de CSS importa.

Cómo lo construí

Monté el proyecto con Vite y organicé todos los estilos con la arquitectura 7-1 de Sass: variables, mixins, funciones y cada componente en su propio archivo. La tipografía personalizada con Space Grotesk, animaciones de scroll suaves con Lenis y validación del formulario de contacto en el frontend.

El diseño es completamente responsive y accesible, pensado para que funcione igual de bien en móvil que en escritorio.

Lo que me enseñó

Este tipo de ejercicios te entrenan para lo que luego necesitas en proyectos reales: ser capaz de coger un diseño y llevarlo a código sin que el resultado se aleje de la intención original. Parece básico, pero es una habilidad que marca la diferencia.