EMAILING
DESIGN SYSTEM
Un sistema modular para crear emails en Figma.
Contexto
Diseñar emails suele ser un trabajo repetitivo. La mayoría comparten estructuras similares: headers, heroes, bloques de contenido, cards, CTAs o footers.
El problema aparece cuando cada campaña empieza desde una copia distinta. Se repiten decisiones de color, espaciado, responsive y composición, haciendo que el sistema pierda consistencia con el tiempo.
El reto era convertir una plantilla de email en un sistema capaz de evolucionar.
El objetivo era crear una única base para producir emails de forma rápida y consistente.
La base
El sistema parte de un conjunto reducido de variables que gobiernan las decisiones fundamentales: marca, tema, color, tipografía, espaciado y layout.
En lugar de configurar cada componente manualmente, todos comparten una misma base preparada para evolucionar sin perder consistencia.
COMING SOON
La consistencia empieza aquí.
La intención
Sobre esa base se construye una capa semántica que convierte variables técnicas en decisiones de diseño.
Los componentes dejan de depender de colores o tamaños concretos y pasan a utilizar roles como Surface, Text, Card o CTA. Esto permite cambiar temas o intenciones visuales sin modificar cada elemento manualmente.
El resultado es un sistema más fácil de mantener, escalar y reutilizar.
Los primitivos contienen valores.
Los semánticos contienen intención
Las piezas
COMING SOON
A partir de las foundations y los tokens semánticos se construye una librería modular de componentes preparada para construir distintos tipos de comunicaciones por email
Headers, heroes, contenido, cards, CTAs, banners, footers o bloques promocionales comparten la misma lógica y pueden combinarse libremente para generar nuevas campañas.
Resultado
Una única base para producir y mantener emails.
El sistema permite construir campañas desde Figma sin duplicar plantillas ni reconstruir componentes. Las reglas compartidas mantienen la coherencia mientras cada equipo adapta contenido, marca y layout.
- Variables para marca, tema y layout.
- Estilos tipográficos conectados al sistema.
- Componentes reutilizables.
- Arquitectura preparada para escalar.
- Documentación para facilitar la adopción.