Overview
Some design elements in Figma do not work in email. Email clients have strict limitations. These limitations affect layout, styling, and interactivity.
Use this guide to adjust your designs before building in Knak.
🎨 Opacity & Blending Modes
Figma supports transparency and blending. Email clients do not.
What to Know
Transparent overlays do not render correctly
Ghost buttons may disappear
Blending effects are not supported
What to Do Instead
Use solid colors
Flatten transparent elements into images
🧊 Drop Shadows and Inner Shadows
Shadow effects are inconsistent in email clients.
What to Know
Box shadows may not appear
Text shadows may render differently
What to Do Instead
Keep shadows very subtle
Export shadows as part of an image🖼️ SVGs or Vector Shapes
SVGs or Vector Shapes
SVG (Scalable Vector Graphics) files are not widely supported.
What to Know
Icons may not display
Logos may break in some email clients
What to Do Instead
Export assets as PNG or JPG files
Use high-resolution images for clarity
📐 Auto Layout / Flex-Like Responsive Behavior
Figma uses flexible layouts. Email does not.
What to Know
Email uses table-based layouts
Spacing behaves differently
Elements do not overlap reliably
What to Do Instead
Design using rows and columns
Avoid overlapping elements
Keep structure simple
🔠 Custom Fonts
Custom fonts have limited support in email.
What to Know
Not all email clients load custom fonts
Fallback fonts may appear instead
What to Do Instead
Use brand-approved fonts available in Knak
Define fallback fonts
🧁 Gradients
Gradients are not reliable in email.
What to Know
Background gradients may fail
Button gradients may not render
What to Do Instead
Use solid background colors
🧩 Hover States or Interactions
Interactive states are not supported.
What to Know
No hover effects
No animations
What to Do Instead
Design static elements
Add supported interactions in Knak where possible
Check out our Hover Effect for Buttons in Knak!
🧱 Complex Nesting or Grouping
Figma allows deep nesting. Email does not.
What to Know
Nested layouts do not map to email structure
Complex groups break during build
What to Do Instead
Follow this structure:
Rows
Columns
Content blocks
💎 Layering or Z-Index Design
Layering elements is difficult in email.
What to Know
Text over images is not reliable
Overlapping elements may break
What to Do Instead
Flatten layered designs into images
Use image editing tools before importing
✅ Pro Tips for Figma-to-Email Editor Workflow
Use these best practices to simplify your workflow:
Design in a 600px-wide frame
Match Knak layout structures (1-column, 2-column, etc.)
Keep layouts simple and predictable
Test designs early in Knak
Need more help? Contact support via live chat using the chat bubble in the bottom right corner or email support@knak.com.