La compatibilidad con los estilos de modo oscuro personalizados en los clientes de email se limita a Apple Mail de iOS/macOS, lo que significa que los ajustes de modo oscuro no funcionarán en ningún otro cliente, como Gmail, Outlook, etc. Tenlo en cuenta e intenta diseñar tus emails pensando en la mejora progresiva.
Tutorial en vídeo: añadir estilos de modo oscuro a diseños de email HTML
En este vídeo verás cómo añadir ajustes de estilo personalizados para el modo oscuro a tus diseños de email y exportar desde Figma emails HTML responsive y listos para producción con el plugin Emailify.
Aspectos de diseño importantes para el modo oscuro
La compatibilidad con los estilos de modo oscuro personalizados en los clientes de email se limita a Apple Mail de iOS/macOS, lo que significa que los ajustes de modo oscuro no funcionarán en ningún otro cliente, como Gmail, Outlook, etc. Tenlo en cuenta e intenta diseñar tus emails pensando en la mejora progresiva.
Como cada cliente de email tiene su propia implementación, diseñar para el modo oscuro es muy complicado, pero merece la pena intentar trabajar a favor de los cambios (a menudo horribles) que cada cliente de email aplica automáticamente en modo oscuro.
Como punto de partida, conviene consultar algunos recursos (como estos artículos de CampaignMonitor y Litmus) que explican exactamente qué cambian estos clientes de email y cómo mitigar algunos de esos cambios desde el diseño.
Aplicar ajustes de color para el modo oscuro
Selecciona un elemento, como una capa de texto, una imagen, un Button, una Row, una Column o un Wrapper, y haz clic en el botón Settings de la cabecera del plugin. Puedes definir los colores de texto y de fondo para el modo oscuro en la sección Dark Mode Overrides, al final del panel Settings.
En las capas Button, Row, Column y Wrapper también puedes definir un ajuste de Border Color. Así cambias el color del borde en modo oscuro sin cambiar el grosor ni el estilo del borde que se usan en modo claro.
Estos ajustes se mostrarán en los clientes de email compatibles con esta función (las apps Apple Mail de iOS/macOS) cuando el email se vea en un dispositivo con el modo oscuro activado.
La compatibilidad con los estilos de modo oscuro personalizados en los clientes de email se limita a Apple Mail de iOS/macOS, lo que significa que los ajustes de modo oscuro no funcionarán en ningún otro cliente, como Gmail, Outlook, etc. Tenlo en cuenta e intenta diseñar tus emails pensando en la mejora progresiva.
Alternar entre dos capas de imagen en modo oscuro y claro
También puedes sustituir ciertas capas de imagen en modo oscuro. Haz clic en tu capa de contenido de Figma (dentro de una capa Column), luego en el botón Settings de la cabecera del plugin y activa Only Hide in Dark Mode u Only Show in Dark Mode, según quieras que la capa de imagen se muestre o se oculte en los clientes de email compatibles con esta función (las apps Apple Mail de iOS/macOS) cuando el email se vea en un dispositivo con el modo oscuro activado.
La compatibilidad con los estilos de modo oscuro personalizados en los clientes de email se limita a Apple Mail de iOS/macOS, lo que significa que los ajustes de modo oscuro no funcionarán en ningún otro cliente, como Gmail, Outlook, etc. Tenlo en cuenta e intenta diseñar tus emails pensando en la mejora progresiva.
Previsualizar el modo oscuro en el plugin
Abre Preview y activa el interruptor Dark Mode en la barra de herramientas de HTML Preview. Puedes seguir usando el selector de ancho de la vista previa si quieres comparar el mismo diseño en modo oscuro en anchos de escritorio o de móvil. Dark Mode no está disponible mientras esté seleccionada la vista combinada Desktop & Mobile (Hybrid).
La vista previa local usa un tratamiento genérico de modo oscuro automático y activa los estilos prefers-color-scheme del email. Sus ajustes de color son una referencia aproximada y no imitan ningún cliente de email concreto. Si el email contiene ajustes de modo oscuro de Emailify, usa el interruptor Overrides que hay al lado para mostrar u ocultar sus estilos explícitos de fondo, texto, borde y sustitución de imágenes.
El interruptor es una ayuda para el diseño, no un emulador de clientes ni de dispositivos. No reproduce los filtros de saneamiento de las cuentas con sesión iniciada, los motores de renderizado y las fuentes nativas, la interfaz de las apps, el procesamiento durante la entrega ni todas las diferencias entre clientes y versiones.
Probar tus emails en modo oscuro
Tutorial en vídeo: probar emails HTML exportados desde Figma en modo oscuro
En este vídeo verás cómo probar en modo oscuro emails HTML exportados desde Figma con el plugin Emailify y Litmus.com.
Siempre merece la pena probar tus emails con un servicio como Litmus o Email on Acid para asegurarte de que se ven bien antes de enviarlos.
La compatibilidad con los estilos de modo oscuro personalizados en los clientes de email se limita a Apple Mail de iOS/macOS, lo que significa que los ajustes de modo oscuro no funcionarán en ningún otro cliente, como Gmail, Outlook, etc. Tenlo en cuenta e intenta diseñar tus emails pensando en la mejora progresiva.
Puedes aplicar ajustes en bloque abriendo Settings y seleccionando en Figma varias capas de Emailify del mismo tipo. Cualquier ajuste que cambies se aplicará a todas las capas seleccionadas.