Design Personalized Klaviyo Emails in Figma with Marka
Personalization is a design decision as well as a data field. A greeting should read naturally when a name is missing, and a product card needs room for more than the ideal sample title.
Build those variations in Figma, then use Marka Email Generator to export your email for Klaviyo. Start with the Klaviyo variables Figma template and open Marka.
Start with a welcome email
Create a short greeting, a sentence explaining the value of your brand and one primary action. Finish that message before adding extra personalized sections.
Use shared components for the header, button and footer so the welcome email feels consistent with future campaigns. Keep a sample-content frame next to the export frame for copy and layout review.
Add a greeting with a fallback
Klaviyo supports a first-name greeting with a fallback such as {{ first_name|default:'there' }}. Use the exact tag from your Klaviyo account when preparing personalized copy. See Klaviyo's name and fallback guidance.
In Figma, compare these three rendered examples:
| Review version | Example |
|---|---|
| Short name | Hi Sam, |
| Long name | Hi Alexandra-Maria, |
| No name | Hi there, |
Check line wrapping and the spacing below the greeting. A fallback should fit the tone of the whole sentence, not just fill an empty field.
Keep the export version clearly identified and verify the personalization in Klaviyo after export. Figma sample text helps you assess the design; Klaviyo profile data determines the recipient's message.
Plan the data before designing dynamic sections
Ask the campaign owner which profile and event fields are available for this campaign or flow. Product information varies with the connected store and event. Use the fields shown in the actual account rather than assuming a universal list.
Klaviyo's personalization guide explains how to find and insert the available values. Keep a note beside the Figma frame describing each dynamic section and its fallback.
If the design includes repeated product cards or conditional sections, agree the implementation with the person building the Klaviyo flow. Drawing several cards in Figma does not by itself configure a live product loop.
Design a product card that tolerates real content
Try a short title, a two-line title and a missing image. Check the space for prices and supporting text, then review the card at phone width.
Decide what should happen when the content is unavailable. You might use a simpler message with a link to the collection. Make that fallback a reviewable design, so the campaign owner has a concrete example to work from.
Keep the footer and subscription links in the review. Use the account's configured tags and check them against Klaviyo's personalization reference.
Export with Marka and preview in Klaviyo
Review the Figma email in Marka, then use its Klaviyo export connection as described in the export guide. Open the exported template in Klaviyo and review the personalization with representative profiles and event data.
Check the long-name and missing-data cases from your Figma review. Send a test to inspect the received message, including links, images and the mobile layout.
Keep the next campaign consistent
Save the approved frame and its sample-content variations. Future campaigns can reuse the layout and review cases while the campaign owner checks the relevant data for each send.
Design your Klaviyo email with Marka, browse Klaviyo templates, or follow the complete Figma email workflow.
