Diseña una landing page con tu design system

Curso Práctico de Sistemas de Diseño con Figma

Contenido del curso

Visión general de los Sistemas de Diseño

Guía de Estilos con Figma

Librería de componentes

Implementación y medición

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:004:45

Diseña una landing page con tu design system

Curso Práctico de Sistemas de Diseño con Figma

Clase 23 de 26

Clase 23 / 26

Recursos

Diseñar una landing page con un design system en Figma deja de ser un rompecabezas cuando ya tienes componentes, variantes y tokens listos para ensamblar. Aquí verás cómo pasar de piezas sueltas a un template funcional usando lo que construiste en clases anteriores, y por qué este flujo acelera tu trabajo como diseñador de producto.

¿Cómo organizar los componentes de un design system en Figma?

Después de tener tu librería publicada, el paso natural es darle orden visual a los elementos que antes estabas arrastrando sin estructura. La idea es ensamblar, no rediseñar desde cero.

Para un layout desktop parte de un frame de 1024 px y trae tu hero con variantes ya configuradas. Si tu hero ya incluye el header, evitas duplicar componentes y mantienes consistencia [01:05]. Encima, suma tu header responsive cuando lo necesites para otras resoluciones.

Luego incorpora las cards. Cambia el size a medium, duplica con command C y command V, alinéalas al centro y deja que respiren dentro de la sección. Una sección sin jerarquía no comunica nada, así que añade un título tipo H2 traído desde tu librería de foundations publicada, por ejemplo Songs o Canciones favoritas [01:55].

¿Qué es un template en un design system? Es una estructura de página armada con componentes reutilizables que define cómo se distribuye el contenido antes de llenarlo con información real.

¿Por qué usar tokens de espaciado grandes para el layout?

En tus foundations definiste dos escalas de espaciado: una pequeña para el interior de los componentes y una grande para el layout. Saber cuándo aplicar cada una marca la diferencia entre un diseño apretado y uno respirable.

Los valores grandes como 40 o 56 px funcionan para separar secciones completas. Al probar 56 px entre tu hero y la sección de cards, la página gana ritmo y cada bloque se lee como una unidad independiente [02:35]. Estos tokens no son decorativos: son la regla que mantiene tu producto coherente cuando otros diseñadores o desarrolladores tomen tu sistema.

Usar tokens en lugar de valores manuales tiene tres beneficios claros:

Mantiene consistencia entre pantallas y entre productos.
Permite cambios globales editando una sola variable.
Reduce decisiones repetitivas durante el diseño.

¿Cuándo conviene usar un design system y cuándo no?

El poder real aparece cuando dejas de pelear con botones y tipografías y te enfocas en problemas de producto. Pero esto no aplica para todos los proyectos por igual.

Un design system brilla en productos con múltiples pantallas, equipos grandes o necesidad de escalar rápido. En cambio, para una landing única, un experimento corto o un proyecto sin proyección de crecimiento, montar todo el sistema puede ser sobreingeniería. La reflexión honesta sobre ventajas y desventajas es parte del trabajo de un buen diseñador.

¿Cuál es la ventaja principal de un design system? Te libera del trabajo repetitivo para que enfoques tu energía en resolver problemáticas reales del producto y del usuario.

¿Qué son las páginas en el diseño atómico?

Dentro del atomic design, las páginas son la última etapa del proceso. Aquí los componentes dejan de mostrar placeholders como título o descripción y se llenan con contenido real.

Esto significa cambiar textos genéricos por copy que venda lo que estás diseñando. Si tu producto es una app de música, los títulos hablan de listas, artistas y canciones reales. Si es un e-commerce, los nombres de productos y precios son verdaderos. La diferencia entre una pantalla bonita y una pantalla útil suele estar en este detalle.

¿Qué sigue después de armar el sistema?

Diseñar con el sistema es solo una parte. El siguiente reto es más complejo y menos visual: vender un design system dentro de tu organización [04:30]. Convencer a stakeholders, equipos de desarrollo y otros diseñadores de adoptarlo requiere argumentos de negocio, no solo de estética.

Antes de avanzar, comparte en los comentarios tu template armado, los títulos reales que usaste y tu reflexión sobre si un design system tiene sentido para lo que estás construyendo hoy.