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

@hypermatic_tutorials

2 жыл бұрын

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

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

2 жыл бұрын

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

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

2 жыл бұрын

That's awesome! Thanks for the feedback!

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

@hypermatic_tutorials

2 жыл бұрын

Pleasure, glad you found it useful!

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

3 жыл бұрын

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 :/

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

2 жыл бұрын

Awesome, no worries!

Insanely brilliant! Thanks for this wonderful tutorial 👏😎

@hypermatic_tutorials

2 жыл бұрын

Pleasure! Glad you found it helpful

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

@hypermatic_tutorials

3 жыл бұрын

Thanks!

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

@hypermatic_tutorials

3 жыл бұрын

Awesome, no worries!

This channel is so underrated you deserve a subscribe

@hypermatic_tutorials

Жыл бұрын

Hey Steve, thanks for the great feedback!

I've just found your KZread 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

2 жыл бұрын

I couldn't agree more!

@hypermatic_tutorials

2 жыл бұрын

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

@hypermatic_tutorials

2 жыл бұрын

@@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

Love this tutorial !

@hypermatic_tutorials

Жыл бұрын

Glad you liked it!

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

@hypermatic_tutorials

Жыл бұрын

Thanks for the feedback! No problem at all

Really helpful, thanks for the tutorial!!

@hypermatic_tutorials

2 жыл бұрын

No worries!

thank you! well done and clear.

@hypermatic_tutorials

Ай бұрын

Glad it helped!

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

@hypermatic_tutorials

3 жыл бұрын

Glad it was useful!

@dianetbethencourt1858

3 жыл бұрын

@@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

3 жыл бұрын

@@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

3 жыл бұрын

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

Lovely, very nice explained, thank you so much!

@hypermatic_tutorials

Жыл бұрын

No problem, glad you found it useful!

Thank you! Save my time

@hypermatic_tutorials

3 жыл бұрын

Awesome!

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

@hypermatic_tutorials

8 ай бұрын

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

Que buen video! Te ganaste una suscriptora.

@hypermatic_tutorials

Жыл бұрын

Thank you!

Detailed video. like the way you explain.

@hypermatic_tutorials

Жыл бұрын

Thank you!

You are awesome, man

@hypermatic_tutorials

2 жыл бұрын

Thanks! Glad you found it helpful

Amazing video I got so much from this

@hypermatic_tutorials

Жыл бұрын

Awesome, glad it helped!

Thank you that's amazing

@hypermatic_tutorials

Жыл бұрын

Glad it helped!

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

3 жыл бұрын

Thanks, Seyed! Playlists are a great idea

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!

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

2 жыл бұрын

Hey there, there's a new export option for Klaviyo now that will automatically help you do this; please find the KZread tutorial for this here - kzread.info/dash/bejne/aYN308-Io9Wnic4.html

@_parkphoto

2 жыл бұрын

@@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

2 жыл бұрын

@@_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: kzread.info/dash/bejne/aYN308-Io9Wnic4.html

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

@hypermatic_tutorials

3 жыл бұрын

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!

Really helpful

@hypermatic_tutorials

3 жыл бұрын

Glad it helped!

BRILLIANT

@hypermatic_tutorials

Жыл бұрын

Thanks for the feedback!

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

3 жыл бұрын

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

Thanks!

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

2 жыл бұрын

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

2 жыл бұрын

@@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

2 жыл бұрын

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

@_parkphoto

2 жыл бұрын

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

@hypermatic_tutorials

2 жыл бұрын

@@_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!

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

Thank you 😊

@hypermatic_tutorials

2 жыл бұрын

No worries!

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

3 жыл бұрын

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

2 жыл бұрын

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

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

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

@hypermatic_tutorials

4 ай бұрын

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

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: kzread.info/dash/bejne/p3Wss5eJo8yXnZc.html), 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/

Super helful

@hypermatic_tutorials

Ай бұрын

Glad it helped!

Thanks a lot...

@hypermatic_tutorials

2 жыл бұрын

All good!

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

3 жыл бұрын

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

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

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

8 ай бұрын

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!

Thank you

@hypermatic_tutorials

2 жыл бұрын

No worries!

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

3 жыл бұрын

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.

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

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

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!

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

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

@hypermatic_tutorials

2 жыл бұрын

Hey, for sure! There's another video on custom components here: kzread.info/dash/bejne/qJeux8l9mcaXdNI.html

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

I am facing a problem while testing responsiveness like when it comes from 600px to 599px it behaves abnormally but from 598 it again becomes responsive.I would love to request you to built some templates using this plugin so that we all can have specific clarification. Thanks for your hardship and concern.

@hypermatic_tutorials

2 жыл бұрын

Hey, thanks for the great question! Apologies for any confusion with how that works; the plugin uses the width of the design in Figma to determine the "desktop" design, and then any width under that becomes "mobile", so that's why it switches when you go down below 599px.

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

3 жыл бұрын

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

3 жыл бұрын

​@@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?

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

@hypermatic_tutorials

2 жыл бұрын

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

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

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: kzread.info/dash/bejne/p6KTp8mIlKTKhbQ.html&feature=emb_title

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

@hypermatic_tutorials

2 жыл бұрын

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!

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

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: kzread.info/dash/bejne/fKGtlLauqt3dmso.html

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!

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

2 жыл бұрын

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

2 жыл бұрын

​@@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: kzread.info/dash/bejne/p6KTp8mIlKTKhbQ.html. The documentation has also just been updated with more details about this, too: docs.hypermatic.com/emailify/usage.html#understanding-the-design-elements

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

3 жыл бұрын

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!

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.

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

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

3 жыл бұрын

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!

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

2 жыл бұрын

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.

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

@hypermatic_tutorials

2 жыл бұрын

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

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

2 жыл бұрын

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

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

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

@hypermatic_tutorials

3 жыл бұрын

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.

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

Can you use the HTML to create modules in Hubspot?

@hypermatic_tutorials

9 ай бұрын

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!

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

@hypermatic_tutorials

2 жыл бұрын

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

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

2 жыл бұрын

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

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

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

2 жыл бұрын

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

2 жыл бұрын

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

@hypermatic_tutorials

2 жыл бұрын

@@Lady-Artblock Awesome, no worries!

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

2 жыл бұрын

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

2 жыл бұрын

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

@hypermatic_tutorials

2 жыл бұрын

@@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

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

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

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

2 жыл бұрын

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: kzread.info/dash/bejne/aYN308-Io9Wnic4.html

@mattybAllDay

2 жыл бұрын

@@hypermatic_tutorials Thank you so much!

@hypermatic_tutorials

2 жыл бұрын

@@mattybAllDay No worries!

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?

Do the buttons works?

@hypermatic_tutorials

2 жыл бұрын

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

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

@hypermatic_tutorials

4 ай бұрын

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!

@stately7839

4 ай бұрын

im dumb. thanks so much that worked@@hypermatic_tutorials

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

8 ай бұрын

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

8 ай бұрын

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

@hypermatic_tutorials

8 ай бұрын

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

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

3 жыл бұрын

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

3 жыл бұрын

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

@hypermatic_tutorials

3 жыл бұрын

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

@thewildpansy4005

3 жыл бұрын

@@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

3 жыл бұрын

@@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)

how to add images to mail?

@hypermatic_tutorials

2 жыл бұрын

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.

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

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!

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

@hypermatic_tutorials

2 жыл бұрын

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

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

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

@hypermatic_tutorials

5 ай бұрын

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!

Охуеть) Awerome!

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

@hypermatic_tutorials

2 жыл бұрын

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

@mildheadwound

2 жыл бұрын

@@hypermatic_tutorials Thanks, that is amazing!

@hypermatic_tutorials

2 жыл бұрын

@@mildheadwound No worries! Glad it helped

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

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