nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Figma to Braze HTML templates

Selman_Balci

Hello guys,

I am trying to find a plugin or any 3rd party tool that can export from figma designs to the braze.

There is this plugin called Emailify on figma which I can export the email design as HTML template directly to the email templates on braze via API.

Now I am trying to apply this to landing pages and in-app messages.

Anyone using custom html templates for these channels? if yes, can you please share your experience and maybe suggest a solution?

Find more posts tagged with

In-App Message

Comments

Annika_Dunaway

Hi In the past weeks I have been playing around with template creation for IAM using v0 by vercel. They have a figma plug in. I take my design into vercel and say that i need that exact design for html in app messages in braze with inline css. As lightweight as possible. I got a lot of cool ones done. Maybe thats something you want to try

laasyam3

Hey! I’ve been working on something similar recently. If you want to go beyond Emailify or Vercel, you could try Figma to MJML to Braze. MJML is a responsive email framework that converts your designs into clean HTML with inline CSS, which works well for both emails and in-app messages.

You can use a Figma-to-MJML plugin (or just export the assets and use MJML blocks manually), then compile it to HTML and drop it into Braze. I’ve had better luck keeping layouts consistent this way, especially for IAMs where file size and inline styling matter a lot.

Not an out-of-the-box plugin, but a pretty solid workflow if you want more control and clean code.

akingkiwi

Hey Selman! Have you checked out the Email Love Figma Plugin - https://www.braze.com/docs/partners/message_orchestration/templates/email_love

We currently support email exports, but we're interested in adding additional channels. Let me know if you want to chat about it.

AllanHeoFNM

Absolutely +1 to the Email Love Figma Plugin! Andrew has been crushing it with improvements/momentum; this tool is very powerful and has tons of potential to support the email building process.

LiorPeleg

We released a plugin for exactly this use case this week 🙂

We built a Figma to Braze plugin that works a bit differently from other tools: instead of exporting static HTML, it recreates your layout inside Braze’s drag and drop editor, so you can keep tweaking copy, layout and personalization later without touching HTML.

We analyze your existing Figma design and build the final result to match it, so you do not need to change the way you design or adapt your layouts to predefined blocks like some other plugins require.

• It supports email, landing pages and in app messages with the same flow

• You design in Figma, select the frame and export via the plugin

• Then, using our HippoTools Chrome extension, you import the result directly into Braze as an editable drag and drop template

You can install the plugin from the Figma Community and the HippoTools extension from the Chrome Web Store.

Happy to answer any questions on this, so feel free to reach out

Lin_To

New to the community and having similar pain points of exporting Figma designs to Braze. Will for sure give Email Love a try