Añadir trazos de borde a tus elementos de diseño
Puedes añadir un borde sólido a las capas de tus diseños de email (por ejemplo, Row, Column, Button, etc.): haz clic en la capa y aplícale un trazo de Figma. Se incluirá automáticamente como borde CSS en el HTML final que exporta Emailify.
Para dejar algo de espacio entre el borde y el contenido interior de la capa, puedes aplicar un relleno interior a esas capas después de aplicar el borde.
Ten en cuenta que los clientes de email no admiten bordes degradados, así que, si usas un relleno degradado en tu trazo de Figma, en la exportación HTML final se usará el primer color sólido del degradado.
Añadir líneas separadoras entre tus capas de contenido
Si necesitas añadir una línea separadora entre capas de contenido dentro de una Column de tus diseños de email, puedes añadir un elemento separador especial de Emailify: haz clic en tu capa "Column", elige el elemento "Divider" en el menú desplegable Quick Add de la parte inferior del plugin y haz clic en el botón Add + para insertar la capa de línea separadora en tu Column.
Cuando hayas añadido la capa separadora a tu Column, puedes arrastrarla en el panel de capas para cambiar entre qué capas queda. Después, puedes ajustar su tamaño cambiando la Height de la capa en su panel de propiedades de Figma, o cambiar su color de fondo poniendo cualquier color sólido en el Fill de la capa en Figma.
Ten en cuenta que los clientes de email no admiten bordes degradados, así que, si usas un relleno degradado en tu separador, en la exportación HTML final se usará el primer color sólido del degradado.
Añadir relleno interior a tus capas de línea separadora
Si quieres, puedes añadir relleno interior a tus separadores: selecciona una capa separadora de Emailify de tu email con el panel Settings abierto, activa el interruptor Inner Padding y añade los valores de relleno que quieras aplicar a la capa separadora seleccionada.
Así se añade un relleno "interior" extra dentro de la capa separadora cuando se renderiza en HTML, lo que te permite definir valores de relleno para determinadas capas de texto de tu Column sin afectar a las demás capas.
Si quieres, también puedes sobrescribir en móvil el relleno de cualquier capa separadora de Emailify: activa el interruptor Mobile Padding y añade los valores de relleno que quieras aplicar a la capa separadora seleccionada. Solo se verán al abrir tu email HTML en un móvil.
Añadir radio de borde a los fondos de tus elementos de diseño
Si tu elemento de diseño Row o Column tiene un relleno de fondo (sin trazo), puedes redondear las esquinas del fondo: haz clic en la capa y define un valor de esquina redondeada con la propiedad Corner Radius de Figma.
Atención con el contenido basado en imágenes. Si aplicas en móvil un radio de borde menor que el de escritorio, la imagen se exporta como un JPG cuadrado para conservar toda el área de la imagen. Así se puede aplicar el radio menor en móvil, pero el radio no queda integrado en el PNG. Por eso, Outlook mostrará la imagen con esquinas cuadradas, ya que no admite el radio de borde CSS.
Ten en cuenta que los clientes de email no admiten el radio de borde en los trazos de borde, así que, si usas un radio de borde en un elemento de diseño con un trazo de Figma, en la exportación HTML final se mostrarán bordes cuadrados, sin redondear.
Notas importantes sobre el radio de borde con trazos
El radio de borde funciona de forma fiable en cualquier capa Column que también tenga un trazo. Sin embargo, no funciona en las capas Row, porque son tablas HTML (que, por desgracia, no admiten el radio de borde en los trazos).
Por desgracia, el radio de borde no es compatible con ninguna versión de Outlook, así que esos clientes siempre mostrarán esquinas cuadradas, sea cual sea la configuración.
Para obtener los mejores resultados, aplica el radio de esquina directamente a la capa Column de Emailify que tiene el trazo, y no a una Row o un Wrapper, teniendo siempre en cuenta que las esquinas redondeadas no se mostrarán en ninguna versión de Outlook.