Cuando ya cuentas con un Design System completo —con fundamentos, tokens y componentes listos— el siguiente paso natural es ponerlo en práctica. Armar una página real arrastrando piezas predefinidas demuestra el verdadero valor de haber invertido tiempo en construir una estructura sólida de diseño.
¿Cómo se arma una página con componentes y variantes en Figma?
El punto de partida es tomar los componentes que ya existen en la librería y organizarlos dentro de un frame con las dimensiones adecuadas. En este caso, se trabaja con un tamaño de 1024 píxeles para desktop [01:00].
El primer componente que se arrastra es el Hero, que ya incluye el Header de forma integrada. Esto es posible porque al construir el sistema se pensó en la composición: un componente mayor puede contener otros componentes menores, siguiendo la lógica del diseño atómico [01:12].
Después se incorporan las cards, aprovechando sus variantes. Se selecciona el tamaño medium y se duplican con Command+C y Command+V. Se alinean al centro y se les asigna un espaciado de 24 píxeles entre ellas [01:27].
¿Cómo aplicar los estilos tipográficos desde la librería?
Para agregar un título a la sección de cards, se crea un elemento de texto y se conecta con los foundations publicados en la librería. En lugar de escribir un estilo manual, se selecciona directamente un H2 desde los estilos tipográficos ya definidos [01:55]. Esto garantiza consistencia visual en todo el producto.
¿Qué papel juegan los tokens de espaciado en el layout?
Durante la construcción del Design System se definieron dos niveles de espaciado:
- Tamaños pequeños: pensados para el espaciado interno de los componentes.
- Tamaños grandes: diseñados para el layout general, con valores como 40 y 56 píxeles [02:23].
En la práctica, se utiliza el valor de 56 píxeles para separar secciones completas de la página, creando una estructura de template clara y ordenada [02:30].
¿Por qué el Design System facilita centrarse en problemas reales?
Una vez que la estructura de componentes está lista, generar un diseño se vuelve rápido y predecible. Ya no se pierde tiempo rediseñando botones o ajustando tipografías. Esa eficiencia permite que el equipo se enfoque en problemáticas reales del producto: flujos de usuario, propuesta de valor, experiencia de uso [02:48].
Sin embargo, no todos los proyectos necesitan un Design System. Es importante reflexionar sobre si realmente aporta valor según el contexto:
- ¿El proyecto tiene suficiente escala para justificarlo?
- ¿Hay un equipo que lo mantenga actualizado?
- ¿Las ventajas superan el costo de crearlo?
¿Qué significa pasar de templates a páginas con contenido real?
Hasta este punto, los componentes muestran textos genéricos como "Título" o "Descripción". Pero siguiendo el modelo del diseño atómico, el último nivel de la jerarquía son las páginas, y estas deben contener contenido real [03:20].
Esto significa reemplazar los textos placeholder por información verdadera: nombres de productos, descripciones reales, imágenes representativas. El objetivo es que el diseño funcione como si fuera el producto final, listo para validar con usuarios o presentar a stakeholders.
- Cambia los títulos genéricos por copys auténticos.
- Incluye imágenes que representen el producto real.
- Presenta el diseño como algo que se pueda vender tal cual está.
Este ejercicio de pasar de lo abstracto a lo concreto es fundamental para detectar problemas de jerarquía visual, legibilidad o flujo antes de llegar a desarrollo. Comparte tu resultado y reflexiona: ¿el Design System realmente potencia lo que estás construyendo?
