Features That Don’t Translate from Figma to Email

Figma allows it. Email editors don’t.

Effects like faded overlays, ghost buttons, or transparent images won’t translate in emails.

Fix: Use solid colors or flatten transparent elements into images.

Box/text shadows are either unsupported or render inconsistently in email clients

Fix: Keep shadows subtle, or bake into image assets.

Fix: Export as PNG or JPG, especially for icons and logos.

Knak is modular and use table-based layouts under the hood.

Stacking, spacing, and responsiveness don’t behave like web.

Fix: Design with clear row/column structure and avoid overlapping elements.

Ensure your custom font is brand approved and available in Knak

Many email clients don’t render gradients well (especially in buttons/backgrounds).

Fix: Use solid background colors

No hover, no animations.

Fix: Design everything as static. Add interactions in Knak.

Nested auto layout frames in Figma don’t translate into modular content blocks.

Fix: Build with the drag-and-drop structure in mind: rows > columns > content.

Stacking elements (e.g., text over images) can’t be easily recreated.

Fix: Use image editing tools to flatten text + image if layering is essential.

Design in a 600px-wide frame to match the email editor.

Use a layouts that mirrors the Knak editor’s structure (e.g., 1-column, 2-column, etc.)