When designing emails with the Email Love Figma Plugin, you can easily adjust the padding around your components, text, images, and buttons using Figma’s Auto Layout feature. Auto Layout is a powerful tool that allows users to create dynamic designs that automatically adjust to fit their content, ensuring consistent spacing and alignment.
Applying Padding in Email Love Templates
Auto Layout padding can be applied to various components within an Email Love template, including:
• mj-wrapper
• mj-column
• mj-text-frame
• mj-image-frame
• mj-button-frame
This flexibility lets you control the exact amount of padding for each element, helping you achieve precise and consistent spacing throughout your email designs.
Setting the Height to “Hug”
For optimal results, ensure the Height of each component and the frames within it are set to “Hug.” This configuration prevents the height from being fixed, allowing the component to scale automatically based on the amount of text, images, or buttons added. This helps maintain a responsive design that adapts seamlessly to different content lengths.
Step-by-Step Guide to Updating Padding
- Select the Component or Frame: Choose the component (e.g., column, text frame, image frame, or button frame) you want to adjust.
- Use Auto Layout: Locate the Auto Layout feature in Figma’s right-hand panel.
- Adjust Padding: Modify the horizontal or vertical padding as needed. You can control the padding for each side individually, giving you granular control over your design.
- Check Height Setting: Make sure the height of the frame is set to “Hug” so the component scales properly with your content.
Powered by