The Problem with Traditional Email Builds
Designing high-converting emails in Figma is straightforward. Getting those designs into Klaviyo with proper mobile responsiveness, live text, and working links is where most teams lose hours. Building out individual slices and rebuilding layout tables manually is tedious work.
That is a massive waste of production time. To fix this for our own team at In-box, I built a software tool called LayerSend. It lets us slice Figma exports visually, inject editable text blocks, assign links, and push full templates directly into Klaviyo via API in under 5 minutes.
Connecting Klaviyo via Private API Key
Setting up the workflow requires a one-time connection between LayerSend and your Klaviyo account. You do not need complex webhooks or custom code to make this work.
- Head into your Klaviyo account settings and navigate to API Keys.
- Create a new private API key and name it clearly (for example, LayerSend).
- Grant Full Access to two specific scopes: Templates and Images.
- Copy the generated key, paste it into LayerSend, and click verify.
Once connected, you can manage multiple client accounts from a single dashboard without ever having to share raw login credentials.
Exporting from Figma and Slicing the Layout
In Figma, select your finished email artboard and export it as a single image at 2x resolution. High-density exports ensure your graphics remain crisp on Retina screens and modern mobile displays. LayerSend supports image uploads up to 20 megabytes, so you do not need to compress assets before uploading.
Once uploaded, use the horizontal and vertical slicing tools to divide your layout into functional sections:
- Horizontal slices: Separate headers, hero graphics, product grids, and footers into distinct rows.
- Vertical slices: Split horizontal rows into multiple columns (for example, breaking a 3-column navigation bar or product row into clickable blocks).
Each slice becomes an independent block once pushed to Klaviyo. This makes your layout completely modular without needing to write HTML tables from scratch.
Converting Static Slices to Live Text
Sending emails made entirely of static images hurts deliverability and stops screen readers from parsing your message. You want critical body copy to render as live, selectable text whenever possible.
With your slices created, click the image icon on any section to convert that specific slice into an editable text block. You can set your font family, upload custom brand fonts, adjust font sizes (such as 15px body copy), adjust line spacing, and set alignment.
LayerSend automatically matches the background colour of the text container to the surrounding design. You get the visual precision of Figma with the deliverability benefits of live text.
Independent Desktop and Mobile Optimisation
A desktop email designed at 600 pixels wide rarely displays properly on a mobile screen if you simply scale it down. Text becomes illegible and buttons become impossible to tap.
Here is the thing: great email marketing requires distinct layouts tailored to the reading device. LayerSend allows you to upload separate desktop and mobile designs for the same campaign.
You slice and configure your desktop layout, then switch to the mobile tab and do the same for your mobile-specific design. When pushed, Klaviyo automatically applies the correct show/hide settings for desktop and mobile viewports.
Automated Alt Text and Link Handling
Adding alt text to every image slice is crucial for accessibility, but manual data entry across 15 slices per email gets skipped far too often. Skipping alt text is a mistake.
LayerSend automatically reads standard icons (like Facebook, TikTok, and Instagram logos) and populates the alt text for you. For graphic slices containing text, it extracts the wording directly into the alt tag field.
From there, paste your destination URLs and UTM tracking parameters into each slice field. Everything maps cleanly to the corresponding Klaviyo block upon export.
Pushing to Klaviyo and Final QA
Once your links, alt tags, and slices are in place, select your destination Klaviyo account and click Push to Klaviyo. The tool generates the template, creates the image assets, formats the live text, and uploads everything into your Klaviyo template library instantly.
You can also send a live test directly to your inbox straight from the export screen. Check the test on both your phone and desktop client to confirm line breaks, image rendering, and link targets before scheduling the campaign.
Final Thoughts
Building high-performing email campaigns should not require hours of manual slicing and repetitive template rebuilding. By streamlining the bridge between Figma and Klaviyo, you can launch custom, mobile-optimised campaigns in a fraction of the time while maintaining flawless code quality.
Need Help Scaling Your Campaign Strategy?
If you want high-converting, custom-designed campaigns built and managed for your ecommerce brand every week, explore our Email Campaigns service to see how we handle everything from design to deliverability.
