The Email Love Figma Plugin allows you to control which content appears on desktop versus mobile devices. This feature gives you precise control over the mobile and desktop experience without duplicating entire email designs.
Where to Find It
- Select any email component in your Figma design
- Open the Email Love Plugin
- Navigate to the Mobile Styles section
- Look for the buttons at the top: Hide on Desktop and Hide on Mobile
Which Components Support Show/Hide?
You can apply these visibility controls to:
- Wrappers (container sections)
- Columns (layout blocks)
- Text frames
- Button frames
- Image frames
Common Use Cases
Device-Optimized Images
Display different images based on the viewing device:
- Upload a landscape image optimized for desktop viewing
- Upload a portrait/square image optimized for mobile viewing
- Apply "Hide on Mobile" to the desktop image
- Apply "Hide on Desktop" to the mobile image
Result: Users see the image that looks best on their device without loading both versions.
Simplified Mobile Layout
Hide elements that clutter the mobile experience:
- Select your social media icons column
- Click "Hide on Mobile"
Result: Desktop users see full social options while mobile users get a cleaner, more focused experience.
Device-Specific CTAs
Create different calls-to-action for desktop and mobile users:
- Create your primary button frame
- Duplicate the button frame
- Select the first button and click "Hide on Mobile"
- Select the second button and click "Hide on Desktop"
- Customize the text/styling of each button as needed
Result: Desktop users might see "Learn More" while mobile users see a more action-oriented "Download Now."
How to Apply Visibility Controls
To Hide Content on Mobile:
- Select the component you want to hide
- Open the Email Love Plugin
- Go to Mobile Styles
- Click the Hide on Mobile button
To Hide Content on Desktop:
- Select the component you want to hide
- Open the Email Love Plugin
- Go to Mobile Styles
- Click the Hide on Desktop button
Preview Your Changes
You don't need to export your email to see how it looks on different devices:
- Keep the Email Love Plugin open
- Use the device toggle at the top of the plugin
- Switch between Desktop and Mobile views
- Watch your visibility changes take effect in real-time
What you'll see:
- Components with "Hide on Mobile" will disappear in mobile preview
- Components with "Hide on Desktop" will disappear in desktop preview
- All other content remains visible on both devices
Best Practices
Keep Mobile Simple
Mobile screens are smaller and users often scan quickly. Consider hiding:
- Lengthy secondary text blocks
- Decorative images that don't add value
- Extra navigation options
- Complex multi-column layouts
Don't Hide Your Core Message
Never hide essential elements like:
- Your primary call-to-action
- Key product information
- Important brand elements
- Critical links or offers
Test Both Views
Always preview both desktop and mobile versions before exporting. Make sure:
- Your layout still makes sense on each device
- Nothing critical is accidentally hidden
- The mobile experience feels natural, not sparse
Consider Performance
Hiding content on mobile doesn't reduce file size—the HTML still contains both versions. For heavy images, consider:
- Optimizing image file sizes
- Using modern image formats (WebP)
- Balancing visual quality with load times
Powered by