Cambiar el espaciado entre elementos predeterminado del Auto Layout de tus capas
Ajustando la propiedad Item Spacing de tu Row, Column u otras capas de diseño de Emailify (como un Wrapper, un Hero o un contenedor de iconos sociales), puedes definir el espacio predeterminado entre los elementos hijos de esa capa.
Por ejemplo, si asignas un espaciado entre elementos de 16 a una capa Column, se repartirá el mismo espacio (16 píxeles) entre todos los elementos (por ejemplo, textos, imágenes, botones, etc.) que haya dentro de esa capa Column.
Añadir espaciadores verticales personalizados a tus columnas
Si ya has definido el espaciado entre elementos predeterminado pero aún necesitas algo más de espacio vertical entre ciertas capas de tu Column, puedes añadir un espaciador especial de Emailify. Haz clic en tu capa "Column", selecciona el elemento "Spacer" en el menú desplegable Quick Add de la parte inferior del plugin y haz clic en el botón Add + para insertar la capa del espaciador en tu Column.
Cuando hayas añadido el espaciador a tu Column, puedes arrastrar la capa en el panel de capas para cambiar entre qué capas queda y, después, ajustar su tamaño cambiando la Height de la capa en el panel de propiedades de la capa de Figma.
Los espaciadores personalizados también tienen alrededor el Item Spacing predeterminado de su elemento padre, así que tenlo en cuenta al indicar el valor de Height de tu espaciador.
Añadir espaciado vertical automático entre las capas de tu columna
Para mantener una capa en la parte superior de una Column y otra en la parte inferior, configura el tamaño vertical del Auto Layout de la Column como Fill container. Después, configura Item spacing como Auto. Figma reparte el espacio disponible entre las capas a medida que cambia la longitud del contenido.
Sobrescribe el valor del espaciado entre elementos en móvil. Si usas este método para crear un diseño dividido en vertical en tu diseño de escritorio, también deberías añadir un valor específico para móvil del Item Spacing. Haz clic en la misma capa "Column" a la que aplicaste los pasos anteriores, haz clic en el botón Settings, activa la opción Mobile Item Spacing e introduce el número que quieras (en píxeles) para que el espaciado entre elementos tenga un tamaño fijo y uniforme en móvil (sea cual sea el espaciado "auto" en escritorio).
Añadir margen vertical personalizado entre los párrafos de tus capas de texto
Puedes personalizar el espacio vertical entre los párrafos de tus capas de texto de Figma abriendo el panel de propiedades de texto de Figma y ajustando el valor Paragraph spacing de la pestaña Basics. Esto determina cuánto margin-bottom se añade a las etiquetas <p> del contenido de esa capa de texto cuando se genera tu email HTML.
Ten en cuenta que, si has añadido párrafos de más (por ejemplo, pulsando Enter o Return dos veces para dejar un doble espacio), ese párrafo extra vacío se seguirá incluyendo y también se le añadirá debajo el espaciado entre párrafos personalizado como margin-bottom. Si quieres controlar mejor el espaciado entre párrafos de tu texto, puedes eliminar estos párrafos extra o en blanco (como en el vídeo de arriba).
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.