# Figma to HTML email

## Turn Figma designs into HTML email

Convert your flex layouts directly into HTML email templates

[Start here](/content/an?url=https://www.figma.com/community/plugin/857346721138427857/anima-figma-to-code-react-html-vue-css-tailwind&mobileUrl=https://projects.animaapp.com/signup&utm_content=figma-email-lp&utm_campaign=config2024&utm_medium=website&utm_source=content/index.html)

## Who is it for?

###### Web developers & agencies

Creating email HTML templates

###### Marketers & start ups

Looking to quickly run email campaigns

## Start translating Figma designs to email HTML

[Start here](/content/an?url=https://www.figma.com/community/plugin/857346721138427857/anima-figma-to-code-react-html-vue-css-tailwind&mobileUrl=https://projects.animaapp.com/signup&utm_content=config-lp-get-comp-cta&utm_campaign=config2024&utm_medium=website&utm_source=content/index.html)

## How to use it?

###### Step 1:

Create your email design using native Figma prototype capabilities.

###### Step 2:

Make sure you use flex layouts

###### Step 3:

Select "email Compatible HTML" under HTML

###### Step 4:

View the code, and see how it renders in Anima playground. Copy the code in playground and paste it into your email client.

## Try it Yourself

###### Figma file

File with pre-designed components that you can use to check the code.

[Try it now](/content/an?url=https%3A%2F%2Fwww.figma.com%2Fcommunity%2Ffile%2F1207275552106101233%2Flanding-page-ui-kit-fully-customizable-landing-page-ui-kit-export-as-html&utm_content=trynow-fullwebsite-figma&utm_campaign=config2024&utm_medium=website&utm_source=content/index.html)

###### Live page

See how the design translated into code.

[Try it now](/content/an?url=https%3A%2F%2Flandingpageuikit.animaapp.io%2Flanding-page-v2-desktop-3&utm_content=trynow-fullwebsite&utm_campaign=config2024&utm_medium=website&utm_source=content/index.html)

#### What users say

“I really like Anima because when I show Animas’s output to clients, they can already see it as a finished product, with layouts and micro-animations giving life to it. There is no need to envision anything, it is all there in front of their eyes.”

Masoud Rawahi  
CEO & Founder @PhazeRo

“ I would estimate we’re cutting the time to get from the starting line to a POC or MVP by about half (50%) using code generation.”

Jeffery Mac  
SVP Services & Solutions @Radiant

“The approach we’re taking right now is largely leveraging code generation (Anima) for things like usability tests or for designing new domain components.”

Lam  
Director of Digital Experience @Radiant

## Try it out today

[Start free](https://projects.animaapp.com/signup)

**We only have to do this once!**