Figma Tutorial: Design and export Emails from Figma to HTML

[@zelimirfedoran9720]

First of all, well done on the Figma to MJML plugin. To anyone using this, just a word of caution, any email that is over 102kb in HTML, will be cut off abruptly at 102kb in Gmail. MJML has a tendency to balloon once it is compiled..

[@hypermatic_tutorials]

Thanks! Great point, the 102kb Gmail HTML limit is definitely a bit annoying. We've also added HTML/CSS minification to the plugin, so any HTML files will compiled to be as small as possible; but adding enough content will inevitably blow out the file size, either way :/

[@veronicapaul2996]

I love your presentation!!! I already feel like a designer even if I've never designed a single email. I'll definitely learn how to use Figma and the emailify plugin.. You made it so simpleeee

[@hypermatic_tutorials]

Thanks so much for the feedback, that's awesome to hear! Feel free to get in touch if you need a hand with anything

[@yuliyahhh]

thank you for the tutorial! i was assigned my first HTML e-mail and was terrified at first, but this video saved my day

[@hypermatic_tutorials]

That's awesome! Thanks for the feedback!

[@kristalspringer5651]

I have been searching for a tutorial like this for years!! Thank you so much for creating this :)

[@hypermatic_tutorials]

That's awesome, so glad to hear it helped!

[@elvish248]

I've just found your KZbin channel and the website. It is the most useful thing I've come across lately. Thank you very much! Oh, and the way you convey the information - briefly and clearly. Brilliant.

[@mpho8018]

I couldn't agree more!

[@hypermatic_tutorials]

Thanks so much, Elvina! If you have any video requests, please feel free to reach out via figmatic.com

[@hypermatic_tutorials]

@@mpho8018 Thanks for the feedback! If there's any other tutorial you'd like to see, please feel free to let us know via figmatic.com

[@juststeve1288]

This channel is so underrated you deserve a subscribe

[@hypermatic_tutorials]

Hey Steve, thanks for the great feedback!

[@ithunder313]

GOATED. This is THE way to design. thank you so much for sharing

[@hypermatic_tutorials]

Thanks for the feedback! No problem at all

[@BelalAhmed-mp9gf]

Love this video. I was searching this type of video for my MailChimp email template design. Wow finally, I found this one. Thank you so much. keep up the good work.

[@hypermatic_tutorials]

Awesome, no worries!

[@TuFacez]

Amazing tutorial. Thank you so much! I have subscribed and liked, including checking out your other plug-ins. Incredible work!

[@hypermatic_tutorials]

That's awesome to hear, thanks for the feedback and support!

[@JETSLER]

Amazing! Thank you for your contribution to making the world a simpler place!

[@hypermatic_tutorials]

Pleasure, glad you found it useful!

[@abobus_artem]

Большое спасибо за видео! Я плохо знаю английский, но ваше видео просмотрела на одном дыхании. Очень подробно, понятно и полезно! Браво!

[@hypermatic_tutorials]

Thanks!

[@dianetbethencourt1858]

This video is incredible! It is the most useful and complete tutorial I have found. Great job!

[@hypermatic_tutorials]

Glad it was useful!

[@dianetbethencourt1858]

@@hypermatic_tutorials I would like to ask you a question. Can I add a youtube video to play it directly in the email?

[@hypermatic_tutorials]

@@dianetbethencourt1858 unfortunately, the support for video embeds in email clients is still very low at the moment, but there are some creative ways of integrating/linking to video content from your designs: www.campaignmonitor.com/resources/guides/video-in-email/

[@dianetbethencourt1858]

@@hypermatic_tutorials Thanks for your quick response. I appreciate it! I’ll try to do it.

[@amilcarlevicupulcortes9645]

Lovely, very nice explained, thank you so much!

[@hypermatic_tutorials]

No problem, glad you found it useful!

[@kendrafree7337]

Hey, thanks for this tutorial. Was wondering which code editor you are using?

[@hypermatic_tutorials]

No worries! The code editor is called VSCode - code.visualstudio.com/

[@urdesign6990]

Detailed video. like the way you explain.

[@hypermatic_tutorials]

Thank you!

[@_parkphoto]

Absolutely fantastic video, this is new stuff to me but as a visual designer Figma makes billions of times more sense than strict HTML and is far more flexible than template editors in email platforms. Awesome stuff. Question: Being not familiar with the nature of HTML, how do I get my images to show up in the final preview when I put the HTML code into my email platform (in this case Klaviyo)?

[@hypermatic_tutorials]

Hey there, there's a new export option for Klaviyo now that will automatically help you do this; please find the KZbin tutorial for this here - kzbin.info/www/bejne/bYCmoqCFqNd0j80

[@_parkphoto]

@@hypermatic_tutorials noticed that; very curious how it works but I’ve been just doing the old fashioned way because I’m not sure

[@hypermatic_tutorials]

@@_parkphoto all good! There's a couple of small steps to get your Klaviyo API key, but you can follow along with another recent tutorial here: kzbin.info/www/bejne/bYCmoqCFqNd0j80

[@seyedfayaz]

Hey man, it seems you are doing some real sick content. please make a playlist already. haven't dived into lot of videos but the quality in the first few seconds explains everything. keep going buddy.

[@hypermatic_tutorials]

Thanks, Seyed! Playlists are a great idea

[@Neo--X]

Insanely brilliant! Thanks for this wonderful tutorial 👏😎

[@hypermatic_tutorials]

Pleasure! Glad you found it helpful

[@yourDesire1107]

I never placed a comment but this is such a good video. Thank youuuuuu :)

[@hypermatic_tutorials]

You're welcome, thanks for taking the time to watch and leave a comment!

[@argeelearner3978]

Thanks for sharing, I cant wait to start using it!!!

[@hypermatic_tutorials]

Awesome, no worries!

[@souravisuncool]

Really helpful, thanks for the tutorial!!

[@hypermatic_tutorials]

No worries!

[@ei256]

13:40 How do I preview the mobile version to make sure my spacing values are right?

[@hypermatic_tutorials]

Great question! Since this video was recorded, there's now a "Preview" button built into the plugin that allows you to see it inside of the plugin to double check how it's looking

[@adammarciniak3663]

Amazing video I got so much from this

[@hypermatic_tutorials]

Awesome, glad it helped!

[@studio.biankicks]

You earned a subsciber. This was so well-explained. I enjoy doing our company's newsletters but recently felt like I'm so limited by Mailchimp's editing options. I've always been curious about the HTML coding option and today finally decided to see how I can maximise that to achieve better output in our newlsetters. And this video is just heaven sent! As a total beginner, I did drag the HTML into the MailChimp but the images and assets wont load. The layout and fonts are intact tho so I'm still very impressed! For the images and assets, do I need to upload them on a host site orrr?

[@hypermatic_tutorials]

Hey, thanks so much! You've done everything correctly, the only thing extra you'll need to do is zip up the .html file along with the "images folder, and then upload that .zip file into MailChimp, that should make MailChimp automatically detect and upload the images and replace the image URLs in the HTML :) Please feel free to get in touch via figmatic.com/contact if you need a hand, more than happy to help!

[@studio.biankicks]

@@hypermatic_tutorials I see!!! Thank you so so much! You have no idea how much easier you've made for creators and digital marketers. You've made beautiful newsletters accessible! Thank you!

[@hypermatic_tutorials]

@@studio.biankicks Pleasure! Please feel free to reach out if you have any other questions, always happy to help

[@_parkphoto]

@@hypermatic_tutorials I think this answered the question I just typed. Should've kept reading comments first ;) Thanks!!

[@hypermatic_tutorials]

@@_parkphoto All good, glad you found the answer! We'll also be putting up a proper video tutorial for doing this soon, too. Please reach out if you have any questions in the meantime!

[@mohamedalrifai4207]

This is the best plugin I have ever used, I am amazed by how quick and smooth it is ! Thank you so much ! Is there a pro version with even more functionalities ? (even if the plugin is already very complete !)

[@hypermatic_tutorials]

Thanks! There will be more component presets and options shipping to the plugin over time, and full templates coming soon!

[@obasiemmanuel2340]

This is nice. After creating the email designs. How do we send it across to mails as a real email(messgaes)

[@hypermatic_tutorials]

Thanks! No worries, you'll need to use an email marketing platform (eg. MailChimp, ActiveCampaign etc) to send out the HTML; please feel free to see the documentation on this here: docs.hypermatic.com/emailify/usage.html#sending-your-html-emails

[@sehreshtariq3266]

Love this tutorial !

[@hypermatic_tutorials]

Glad you liked it!

[@DanielaLopez-ok2xb]

Que buen video! Te ganaste una suscriptora.

[@hypermatic_tutorials]

Thank you!

[@chtdkmn]

I can't find that little settings icon on the top left corner. Am i missing something?

[@sherrili1071]

What a great tutorial! Easy to follow and super practical. One question, how do you replace the social media icons, say from KZbin to LinkedIn? I couldn't find a way to update the vectors/icons.

[@hypermatic_tutorials]

Thanks, Sherri! No worries, if you go to a site like iconmonstr.com/ and download any icon as an SVG file, you'll be able to drag and drop any directly inside of any "🔗 Social Icon Link" Figma layer (and delete the previous vector icon); you can change the size/colour of any social icons, too :) Feel free to reach out via figmatic.com/contact if you need a hand, more than happy to jump on a live chat!

[@bettiannucci]

thank you! well done and clear.

[@hypermatic_tutorials]

Glad it helped!

[@k3nphr3n12]

Hello, very interesting functionality. I have a problem though. In the draft mode, I created my own email with the tools you provide (rectangles, texts, etc.) and I add picture by draging it from my computer into the page. Everything seemed to be working but once I finished, I check it with the preview and all my work was turn into an image. Nothing was clickable, neither the writings. I don't understand how to turn what I did into an mail without using the canvas... Please help me! 🙇

[@hypermatic_tutorials]

Hey there, no worries! It sounds like you may have accidentally put some layers inside nested Figma groups/frames, which will automatically convert those into static fallback images (eg, docs.hypermatic.com/emailify/design/fallback-images ); to keep the content as rich text/HTML, you'll need to use the design tools provided by the plugin, and then ensure any new text layers are added directly inside of a "Column" layer, and that will keep them as editable. Feel free to reach out via email at www.hypermatic.com/contact/ if you need a hand!

[@alizeamani3105]

Will there be a possible update in the feature that you can change the shape of images? For example, a oval or circle shaped image. Also, can you explain sending the HTML file to a client or customer or is it as simple as sending (forwarding) them the HTML file that we saved to our computer?

[@hypermatic_tutorials]

Hey there, great questions! For sure, you can change the shape of the images already; you can either using layer masks in Figma or drag in an image that has already got some kind of shape around it, and should should render as expected in the email. In terms of sending the emails, you'll need use an email service provider (eg. MailChimp, Klaviyo etc); there's some documentation here that lists how to do that here docs.hypermatic.com/emailify/usage.html#sending-your-html-emails

[@Monkey85ft]

This is such a helpful tutorial man! Just a question on the plugin is there also a feature that would turn all components to dark mode when the user's desktop or mobile turn to dark mode?

[@hypermatic_tutorials]

Hey there, thanks for the great feedback! The plugin does have some dark mode overrides (please see this tutorial: kzbin.info/www/bejne/q3LbgmiGqM5ko5Y), but the preview window in the plugin will always show the "light mode" version, as the email clients all render their own way of approaching dark mode, so there's not a great way to preview it besides using something like www.litmus.com/

[@TomNess]

Such a great video, really appreciate the thoroughness here! One question I have is if you can preview the mobile design as you're making it without the full export and opening the index file? Seems like an important feature to be able to see that while you're building it, especially if you're building it for mobile-first. Just curious... thanks so much!

[@hypermatic_tutorials]

Thanks! For sure, this video was from a much earlier version, so there's built-in HTML previews inside the plugin now, so you can check this before exporting - feel free to give it a go here: www.figma.com/community/plugin/910671699871076601

[@pravinhublikar5505]

Great video, I completely familiar with figma part but I m wondering how would I import the html file to my Gmail ?

[@hypermatic_tutorials]

Hey, great question! Unfortunately Gmail isn't really suited to sending out the HTML, so you'll need to use an email service provider to send out the HTML, there's some more details in the plugin documentation here about how you can do this, and some of the built-in integrations that the plugin comes with, too: docs.figmatic.com/emailify/usage.html#sending-your-html-emails Hope that helps!

[@PacNapster]

Any idea how to stop strokes from scaling when seen in different screen sizes? This keeps happening and can't find a fix for it. Thanks a lot for sharing.

[@hypermatic_tutorials]

Hey there, any borders (eg. around "column", "row" or "button" layers) should be staying the same width across different screen sizes (as long as they're not part of an image), but feel free to reach out via email at hypermatic.com/contact if you need a hand!

[@adityagangannavar3945]

Hey there, Thanks for this informational video. I have created an email using emailify free version, I’m not able to export it even though I still have 10 free exports left . Can you please help me?

[@hypermatic_tutorials]

Hey there, no worries! Feel free to get in touch via email at www.hypermatic.com/contact/ - glad to help see what the issue might be there

[@Layla-dq5rg]

Thanks for this amazing tutorial! Can this be created as a template to use in Campaign Monitor? That is what I am looking to do

[@hypermatic_tutorials]

No worries! Yes, you can use the exported HTML in Campaign Monitor, just make sure you include any "unsubscribe" specific tags into the links, if needed, then you should be good to go

[@romanromanov2306]

Thank you! Save my time

[@hypermatic_tutorials]

Awesome!

[@deanresil519]

Can I edit first using the mobile view rather than the desktop?

[@hypermatic_tutorials]

Hey there! If you use the "Preview" button that's now in Emailify, you'll be able to have an HTML preview of your design, which you can refresh after making any changes in Figma/Emailify, but it's best to keep the main design in Figma as your "desktop" version, as the "mobile" overrides are set in Emailify (rather than the other way around)

[@deanresil519]

@@hypermatic_tutorials Ok thank you so much. I figured it the hard way, it messes up my design when I force it to have a mobile lxw first

[@vanessageammal367]

Hello! Any way to change the alignment of the buttons to let right or center?

[@hypermatic_tutorials]

Hey Vanessa, for sure! If you adjust the Figma auto layout horizontal alignment setting on the layer (Emailify "column") that the button is sitting inside, that should align the button to the option that you select. Please reach out via figmatic.com/contact if you need a hand!

[@chari---zard]

@@hypermatic_tutorials that doesnt seem to work. it's a quite obvious solution, but i think this option is either broken or idk what. Was wondering the same thing

[@hypermatic_tutorials]

@@chari---zard Oh right, very weird! Will do some tests here and see what might be going on, as the app is just using Figma's prototype embed, so it's likely a Figma issue if it's not showing up

[@chari---zard]

@@hypermatic_tutorials that was my bad 😅 kinda blind

[@hypermatic_tutorials]

@@chari---zard All good! Glad it's working now

[@jackelineporllesquinones4534]

thanks for the tutorial! i only have one issue with the images, none of the images are shown when I test the mailing. I have tried with my own images and with the ones that are in the plugin and neither of them are shown :( pls help me

[@interestingvideosmail5033]

I don't need the code since my company has outsourced that part. I just need to design the email. For that, I find Sendgrid's editor a bit limiting. Designing it in Figma would give me all the freedom required to design. My only question is can I send my Figma design to Sendgrid without having to buy the pro subscription of your app?

[@hypermatic_tutorials]

Hey there, happy to let you know that you can use the design features for as long as you like without needing the Pro version. If you're outsourcing the coding and don't need it to automatically generate the HTML from the Figma design, that should be fine, as they can hand code it and upload to SendGrid manually. Otherwise, there's a built-in SendGrid integration in the Pro version that will automatically generate the code and upload it into your SendGrid account automatically.

[@FoulOleRonThe3rd]

Looks amazing! Once you've built an email with your own images/colours/buttons etc, is there a way to save the modules back into the builder to use as presets? Or would I have to start from the sushi ones each time I want to build a new email?

[@hypermatic_tutorials]

Hey Ronan, great question! We're actually about to ship a feature this week which automatically adds to the modules as native Figma components, so the customised versions are available as instances in the "Assets" panel. The update will also include a totally custom component builder, so you'll be able to scaffold out your own layouts easily, without having to customise the base modules in the plugin either.

[@Rodrigodemetrio]

@@hypermatic_tutorials just wondering if it's available :)

[@vitalgym2909]

Is there a way to create custom content modules? I.e not use the template section that app includes and to design / ads own

[@hypermatic_tutorials]

Hey there, for sure! If you start off with the included modules as a base, and customise those for your own brand/design, you can re-use (copy/paste) those "rows" into any other emails without having to re-design them again. We're also planning on adding support for Figma components in an upcoming release, which should make this easier, too.

[@MyDigitalHub]

Can you do a customized design and not picking up from the builder library?

[@hypermatic_tutorials]

Hey, for sure! There's another video on custom components here: kzbin.info/www/bejne/rJTdlpp6nshketE

[@AndyFox-h2y]

Can you add gifs or animated images on Figma that will carry over to Mailchimp?

[@hypermatic_tutorials]

Hey there, for sure! Fou can add GIFs to your emails and those will be included in the HTML exports (to whichever platform), you can watch another tutorial showing how to use them here: kzbin.info/www/bejne/gJ7cY4err9-qoMk

[@bragglights]

How to do you add links to the social link components at the footer?

[@hypermatic_tutorials]

Hey there, if you click on any of the social icon frames and then click the "Settings" button in the plugin, you'll be able to paste in a URL: docs.hypermatic.com/emailify/usage.html#adding-links-and-alt-text

[@gracemaina6593]

Watching and following closely. Question though, how do I get the plug in and the email and the other row of components to fit like that in one screen, while the email is zoomed at 100% It is really hard for me to follow when I can't seem to navigate between the three components at the same time

[@hypermatic_tutorials]

Hey Grace, thanks for the question! If you click on the zoom feature in the top-right of the Figma app, you'll be able to select an option that says "Zoom to Fit", which will automatically zoom out to a level where you can see everything

[@gracemaina6593]

@@hypermatic_tutorials Thanks for your reply. Let me try that

[@revin9680]

Video was really good but how actually send this code as email? I don't know what to do after html code is generated... Please explain!

[@hypermatic_tutorials]

Hey Revin, glad you enjoyed the video, and great question! After you've exported the HTML, you'll need to use an email service provider (ESP) such as Klaviyo (or MailChimp etc). This is an example what it looks like: help.klaviyo.com/hc/en-us/articles/115005254068-Import-a-Custom-HTML-Template These providers will host all of your image assets, and handle the bulk sending of your HTML email to the addresses/subscribers on your mailing list. Please feel free to reach out directly at figmatic.com/contact if you have any questions about this - more than happy to help you further!

[@jedidiahescuzar8459]

Hey! This is such an awesome video! Could I export this to omnisend? The ESP editor only allows the user to add HTML blocks, and not an entire HTML-coded email.

[@hypermatic_tutorials]

Thanks! For sure, that should still work, you'd likely need to jump into the exported HTML and grab the content tables that you need. To make that a bit easier, one other option might be to create each email in Emailify as a seperate content block, and export all of them out as seperate emails, that should make it a bit easier to grab the HTML for each of those to paste into Omnisend

[@jedidiahescuzar8459]

​@@hypermatic_tutorials I tried to replicate what you did in this tutorial. but when I viewed it to see the results over on omnisend, the background image of the hero section didn't seem to upload. How can I set a background image, or any images for that matter, wherein it would be viewable by everyone I send the email to?

[@nicolaslemonier]

Thank you that's amazing

[@hypermatic_tutorials]

Glad it helped!

[@normanvalenzuela3055]

Hey! this plug-in is great, but I've been having an issue for some time now... a lot of the times when theres a custom autolayout or group it renders it as images for some reason? is there any fix for this? I've tried everything i still cannot determine what makes it that way.

[@normanvalenzuela3055]

Btw i imagine this maybe has to do with the "Correct nested layer structures" but could there be a detailed video explaining how to use these? . Example : to acheive a table where the components have an icon+ text in each cell. without the (icon[img]+ name) rendered out as an image as a whole.

[@hypermatic_tutorials]

​@@normanvalenzuela3055 Thanks for the feedback! For sure, any "nested" layers or any non-Emailify layers that are added in will automatically get rendered out an image. To make this easier, the plugin has recently been updated to automatically allow you to add new layout and content elements when different contexts are selected; please see the video tutorial for that here: kzbin.info/www/bejne/q5_CdpqFmaaXi7M. The documentation has also just been updated with more details about this, too: docs.hypermatic.com/emailify/usage.html#understanding-the-design-elements

[@TheDirtyPhil]

Awesome tutorial! Love the plugin. I have one question. When I want a certain word in a text to have a special color (a linear colored one) it doesn't work. It shows correct in figma but when you preview it on Desktop and mobile, the color order (4 colors) is not displaying and the word is only colored in one color.

[@hypermatic_tutorials]

Hey Philip, thanks for the feedback! Just double checking if you mean it's a linear gradient? If so, gradients sadly aren't supported in HTML emails, so using a solid color is a better way to go here

[@TheDirtyPhil]

@@hypermatic_tutorials Thanks, didn't know that!

[@brunosoares9021]

Very nice... but how do I insert all these generated files in a GMAIL mail?

[@hypermatic_tutorials]

Hey there, thanks for the feedback! In terms of sending the HTML emails after they're exported, unfortunately Gmail/Outlook etc aren't suited for this and will break the content, so you'll need to use an email service provider like Klaviyo, MailChimp etc; there are some more details and tutorials on some of those here: docs.hypermatic.com/emailify/usage.html#sending-your-html-emails

[@hugow6068]

Quick question! How would you go about exporting emails with specific vertical distances between texts and images? After exporting, the distances change and the look appears off :( And the mobile and desktop version doesn't look the same as the preview after exporting.

[@hypermatic_tutorials]

Hey there! You can either use the Figma auto-layout item spacing property to change the space between items, or use the "Spacer" component available from the "Quick add" menu at the bottom of the plugin (when a column/content layer is selected). In terms of the mobile/desktop version, you can apply overrides for mobile styles to get it looking how you'd like, but please feel free to reach out directly via hypermatic.com/contact if you need a hand

[@Alite-ai]

How do we optimize for mobile within Figma?

[@hypermatic_tutorials]

Hey there! All of the mobile optimisations and overrides are applied via the plugin, so the Figma version will always be the "desktop"/larger view, but you can configure overrides for things like padding, font sizes, image sizes etc if needed using the "Settings" panel in the plugin

[@Alite-ai]

@@hypermatic_tutorials So I can't customise for mobile separately within Figma using the plugin?

[@hypermatic_tutorials]

​@@Alite-ai You can design and add all the content for the original/desktop design in Figma, but if you'd like to add any mobile specific overrides, you'll just need to set those via the "Settings" panel in the plugin, which should let you override the most common properties, or show/hide different layers on desktop/mobile as well, if needed

[@Alite-ai]

@@hypermatic_tutorials Ok got it. Thanks! This video helped a lot 🤗

[@hypermatic_tutorials]

@@Alite-ai Awesome, no worries, glad it helped!

[@alexanderkrasnovsky]

How do I save a preview of the mobile version of the email as a png?

[@jayidkhalifa014]

It's Very Helpful But I am facing a problem that when I input the code in gmail I see no images are there. Please tell me about this

[@hypermatic_tutorials]

Hey, thanks for the comment! When it comes to sending the email, you'll have to have your images hosted online somewhere first, so you'll have to use an email service provider (something like MailChimp etc); these services will upload/host your images for you online, and also handle sending out the HTML email. Unfortunately, using Gmail or Outlook isn't suited to HTML emails, as they strip out code.

[@MichKY15]

Thanks for the video. Is it possible to hyperlink the icons?

[@hypermatic_tutorials]

Hey Mitch, thanks for the question! For sure, you can link the social icons by updating the URL in the settings panel, please see this section of the docs for more details - docs.hypermatic.com/emailify/usage.html#adding-urls-to-images-buttons-social-icons-and-navigation-links

[@MichKY15]

@@hypermatic_tutorials thanks! That was helpful. Another question: why are there gray spacing between each contents when I send it on email? It doesn’t show up on all platforms only some

[@MichKY15]

@@hypermatic_tutorials Thanks so much! Super helpful. Another question - i noticed whenever i send it via html on Outlook , it creates a grey border lines inbetween all the different sections. How do i avoid this?

[@hypermatic_tutorials]

@@MichKY15 thanks for the question, the issue is due to sending the HTML via Outlook, which unfortunately it's not suited for doing; you'll need to use an email marketing service like MailChimp or Klaviyo etc to send out the HTML as intended

[@MichKY15]

If I send it from Mailchimp, is it possible for the email to still look different when opened on outlook, gmail, etc?

[@arminealeksanyan2778]

Super helful

[@hypermatic_tutorials]

Glad it helped!

[@ziweizhang811]

Even I export the html, in the preview.html , all the links and buttons don't work! And there is no digital asset export! - ps. using the free Emailify free trial.

[@hypermatic_tutorials]

Hey there, thanks for reaching out! Happy to help if you could send an email via hypermatic.com/contact

[@deezehh7355]

is there a way to create your own email without the plugin? Ive made an email design and would like to use that. when I click the plugin the only option is to create it on the plugin...

[@hypermatic_tutorials]

Hey there, great question! To ensure the HTML gets exported propertly, you'll need to use the plugin to generate the base layout, but once you've got that setup, you're welcome to customize the elements style and content in Figma, and you can also add or build out your own layouts and content layers using the newer "quick add" feature too, there's another video on that here: kzbin.info/www/bejne/q5_CdpqFmaaXi7M&feature=emb_title

[@addisonmaly2081]

Okay. So I've done all this and have my HTML file. So, how do I, you know, use it in an email? Sorry for the dumb question!

[@hypermatic_tutorials]

Hey, that's okay! You'll need to use an email service provider like www.klaviyo.com/ to send out your HTML email to a list

[@awaisrashid7450]

Really helpful

[@hypermatic_tutorials]

Glad it helped!

[@alexanderkrasnovsky]

Is it possible to place a placeholder with text on top of two components? I couldn't find this in the plugin.

[@hypermatic_tutorials]

Hey there, you'll have to put any text inside of a column or hero block if you'd like it to render as HTML, but if you need text overlayed onto some other content for the aesthetic/design, you can insert a text layer into an image frame and create it that way

[@nadia5792]

Helllo! Does this have an export limit on its free plan?

[@hypermatic_tutorials]

Hey Nadia! Thanks for the question, the free plugin will allow you to design an unlimited amount of emails, along with 15 free HTML exports/uploads; then you can optionally upgrade to Pro to have unlimited exports

[@AmarjeetSingh-jv6df]

Does this email template work in all email clients?

[@hypermatic_tutorials]

Hey, yes! As long as you design the email using the Emailify components and elements, the exported HTML will be compatible across all email clients

[@mattybAllDay]

what if i want to use emailify to create good looking emails easily, but I don't need all the html file code, because Klaviyo takes care of that for me?

[@hypermatic_tutorials]

Hey there, you're welcome to copy/paste whichever parts of the exported HTML that you need, or alternatively you can use the built-in Klaviyo integration to upload the HTML directly into your Klaviyo account - There's a tutorial for that here, too: kzbin.info/www/bejne/bYCmoqCFqNd0j80

[@mattybAllDay]

@@hypermatic_tutorials Thank you so much!

[@hypermatic_tutorials]

@@mattybAllDay No worries!

[@ciak51]

Great video, also, is it possible to import the HTML into mailchimp?

[@hypermatic_tutorials]

Hey, absolutely! You'll just need to ensure there's an unsubscribe link included for MailChimp before you upload the exported HTML. If you paste *|UNSUB|* into a link layer in your Emailify footer design before exporting, you should be good to go.

[@zenskywalker9767]

Hi I’m trying to export my emails and2 of them have gifs and the exporting is getting stuck on exporting gifs is there a solution or reason why?

[@hypermatic_tutorials]

Hey, thanks for getting in touch! Would you be able to jump on a chat via figmatic.com/contact ? More than happy to help resolve this with you!

[@statelycompany]

When i upload the code to zoho the images are all missing...

[@hypermatic_tutorials]

Hey there, just double-checking that you've enabled the "Upload Hosted Image URLs" toggle before exporting the HTML (docs.hypermatic.com/emailify/export/images), as this will automatically host the images if you don't want to manually upload them. Hope that helps!

[@statelycompany]

im dumb. thanks so much that worked@@hypermatic_tutorials

[@Lady-Artblock]

Hi! I just discovered Figma and I´m trying it. It´s Emailify only available for premium users? I can´t see it in my profile, but the plugin is installed.

[@hypermatic_tutorials]

Hey, you should certainly be able to use it after installing; there is a weird Figma bug sometimes where the installed plugin doesn't show up right away, and usually re-opening your Figma file or restarting Figma should make it appear in your plugins list. The other reason is usually related to if you're inside of a Figma Org at work, and the Org's admin may need to "allow" the plugin to be installed :)

[@Lady-Artblock]

@@hypermatic_tutorials I just re-opened the file, It´s working now, thank you! : D

[@hypermatic_tutorials]

@@Lady-Artblock Awesome, no worries!

[@jenniferwassel6427]

Can you use the HTML to create modules in Hubspot?

[@hypermatic_tutorials]

Hey Jennifer! Thanks for the great question; the Hubspot API sadly doesn't support creating modules, but it is possible to upload the HTML to Hubspot: docs.hypermatic.com/emailify/usage.html#uploading-your-emails-to-hubspot Feel free to reach out at hypermatic.com/contact if you need a hand with anything!

[@abeblue]

we cant copyu past and change image on another file, it doesnt let change the image wer chosed

[@hypermatic_tutorials]

Hey there! If you've copied a component as a new instance, you should be able to click on an image your instance and replace the "Fill" for that layer: help.figma.com/hc/en-us/articles/360041090073-Upload-an-image-as-a-fill

[@danybontecou]

Hey, two of the images I changed broke and I have no idea how to fix it, does anyone have any advice on how to solve this? Thanks

[@hypermatic_tutorials]

Hey there, happy to look into this with you, please feel free to reach out via figmatic.com/contact

[@MrMyers1489]

I am having a issue viewing any image in my HTML export. When previewing they appear perfectly fine. I am exporting as HTML Email. I’m a missing something?

[@hypermatic_tutorials]

Hey there, all good, thanks for the question! if you're ready to send out the HTML (via an email marketing platform), you'll need to make sure that the images are hosted online somewhere; either by enabling the "Hosted Images" toggle in the Emailify export settings, or hosting the exported images yourself and setting the base URL for your email to your own hosted image path online: docs.hypermatic.com/emailify/usage.html#setting-a-custom-base-image-url-for-an-email

[@MrMyers1489]

@@hypermatic_tutorials Thank you so much! Just accidentally discovered this a few minutes ago. Took a few free credits thought 😅

[@hypermatic_tutorials]

@@MrMyers1489 Awesome, no worries! Feel free to reach out at hypermatic.com/contact if you need a hand with anything else

[@rishisk8]

BRILLIANT

[@hypermatic_tutorials]

Thanks for the feedback!

[@thewildpansy4005]

How do you send this thru email? When I import the html codes in gmail or outlook, the images are not showing up

[@hypermatic_tutorials]

Hey there! Unfortunately, using Gmail/Outlook doesn't really work for sending HTML emails, as they strip out code and aren't really designed for that method. To make it work, you'll need to sign up for an email service provider (like MailChimp, Campaign Monitor etc), which will allow you to upload the HTML and images (which they'll host for you online); they'll also handle sending your email to your entire address list. I hope that helps!

[@thewildpansy4005]

@@hypermatic_tutorials Thank you so much for this! This really helps and the plugin is so amazing to use

[@hypermatic_tutorials]

@@thewildpansy4005 All good, best of luck with the email!

[@thewildpansy4005]

@@hypermatic_tutorials I'd like to ask also, if I send the file zip that I have exported to someone, would he also be able to see the html email or view it the way I can view the file? does it depend on the browser or anything?

[@hypermatic_tutorials]

@@thewildpansy4005 For sure, you can either send the .zip to someone and have them open the preview.html in their browser, or you can upload the contents of the .zip file to somewhere online (like app.netlify.com/drop) and it will give you a URL to share (eg. something.netlify.app/preview.html)

[@deanresil519]

Can I change the font style?

[@hypermatic_tutorials]

Hey, you can change the font, but you'll just need to make sure it's either a web-safe font (eg. Arial, Georgia etc), or a Google Font, as other 3rd party custom fonts won't get embedded and will fallback to their closest web-font instead. Also, the Google Fonts will only show up in any email clients that support custom fonts: www.caniemail.com/search/?s=font (otherwise they will also fallback to web-safe fonts)

[@deanresil519]

@@hypermatic_tutorials thank you so much

[@sammi1981]

I’m trying to add a background image in the Split Row module but it doesn’t show up when it’s in preview? How come?

[@hypermatic_tutorials]

Hey there, great question! Just due to the way background images need to be exported for HTML, the background images are only supported for any of the "Hero" modules (which are single columns), these can be found under in "CTAs" tab, under the "Full Width Background Image" subheading. If you need a hand, please feel free to jump on a live chat via figmatic.com/contact

[@sammi1981]

@@hypermatic_tutorials thanks! Any chance there’s a 2 CTA or 2 columns that has a hero background image?

[@hypermatic_tutorials]

@@sammi1981 At the moment, there's only background images available for single column hero blocks - just due to the way email clients work, adding support for multiple columns will break the layout for those background blocks on some email clients, sadly

[@chandinicreates]

Thank you 😊

[@hypermatic_tutorials]

No worries!

[@ruxandapetco5522]

Do the buttons works?

[@hypermatic_tutorials]

Hey Ruxanda, the buttons that the plugin generate can be linked to any website URL, so the user will be taken there when they click on it after receiving the email

[@Harish-qt8nf]

how to add images to mail?

[@hypermatic_tutorials]

Hey Harish, you can add images by clicking on any of the image components in the plugin and then dragging in your own image fills in Figma to those "Image" layers. Alternatively, you can drag and drop images directly into any "Column" layer that the plugin creates, and those will be used as images inside the email, too. There are a few examples of this throughout the video if you have a skip through, too.

[@kennycreator4800]

Hey i tried this, but when i copy the code to mail it doesnt show the font type i used or any image

[@hypermatic_tutorials]

Hey there, thanks for reaching out! No worries, just double checking that you're not using Outlook/Gmail etc to send the email, as those won't work for sending HTML emails. You'll need to sign up for an email service provider or marketing platform like MailChimp or Klaviyo to send your HTML emails out - docs.hypermatic.com/emailify/usage.html#sending-your-html-emails

[@kennycreator4800]

@@hypermatic_tutorials Thanks, the images show but the fonttype i used isnt working.

[@hypermatic_tutorials]

@@kennycreator4800 All good, thanks for following up! In terms of fonts, this mainly depends on which fonts are being used and which email client is viewing the email. Any Google Fonts are included in Emailify exports, but any 3rd party/custom fonts can't be embedded; then on the email client side, it depends on the level of support for custom fonts, too: www.caniemail.com/features/css-at-font-face/

[@kennycreator4800]

@@hypermatic_tutorials Guess i might have to change my font because of mailchimp

[@kennycreator4800]

Can the fonts show in Klaviyo so that i wont make use of mailchimp

[@interact---5485]

Thanks a lot...

[@hypermatic_tutorials]

All good!

[@mildheadwound]

Good tutorial, 'but not sure why you skipped adding, 'links'.

[@hypermatic_tutorials]

Thanks! There's some extra documentation here about adding links: docs.hypermatic.com/emailify/usage.html#adding-links-and-alt-text

[@mildheadwound]

@@hypermatic_tutorials Thanks, that is amazing!

[@hypermatic_tutorials]

@@mildheadwound No worries! Glad it helped

[@kaedeharakazuha1081]

me waiting the editor to add it on a gmail HAHA should I just copy and paste it after exporting to HTML?

[@hypermatic_tutorials]

Hey, thanks for the comment! Feel free to check out some extra documentation here for help with sending out the HTML - docs.figmatic.com/emailify/usage.html#sending-your-html-emails

[@rachelchijindu8715]

Thank you

[@hypermatic_tutorials]

No worries!

[@sofiatoro4862]

Thanks!

[@JoyEnergiser]

when I export to html all im getting is an image, not real html code

[@hypermatic_tutorials]

Hey there, thanks for the comment! No worries, this usually happens if any layers in your Emailify frame were designed in Figma outside of the plugin. Unfortunately, Emailify can't convert email designs that weren't created using the plugin's design features (as shown in the video above). Please feel free to get in touch at hypermatic.com/contact if you need a hand with anything!

[@ThinkCMYK]

28 min. ant still no info how to put in the HTML code you got into email :)

[@hypermatic_tutorials]

Hey there, thanks for the question! For sure, there are a bunch of other individual video tutorials showing how to do this, depending on which Email Service Provider you're using (eg. MailChimp, Klaviyo etc), please find them here: docs.hypermatic.com/emailify/usage.html#sending-your-html-emails

[@RadCor]

Охуеть) Awerome!

[@user-hv4iu7rb3w]

Images arent showing up. do i need to put those images on cloud service.