Figma Tutorial: Design and export Emails from Figma to HTML

แชร์
ฝัง
  • เผยแพร่เมื่อ 21 ส.ค. 2024
  • This video tutorial is a complete step-by-step guide showing you how to design and export production ready, responsive HTML email from Figma using the Emailify plugin - www.figma.com/...

ความคิดเห็น • 237

  • @zelimirfedoran9720
    @zelimirfedoran9720 3 ปีที่แล้ว +5

    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
      @hypermatic_tutorials  3 ปีที่แล้ว +1

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

  • @yuliyahhh
    @yuliyahhh 3 ปีที่แล้ว +3

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

  • @kristalspringer5651
    @kristalspringer5651 3 ปีที่แล้ว +8

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

  • @elvish248
    @elvish248 3 ปีที่แล้ว +4

    I've just found your TH-cam 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
      @mpho8018 3 ปีที่แล้ว +1

      I couldn't agree more!

    • @hypermatic_tutorials
      @hypermatic_tutorials  3 ปีที่แล้ว

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

    • @hypermatic_tutorials
      @hypermatic_tutorials  3 ปีที่แล้ว

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

  • @veronicapaul2996
    @veronicapaul2996 2 ปีที่แล้ว +10

    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
      @hypermatic_tutorials  2 ปีที่แล้ว +1

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

  • @juststeve1288
    @juststeve1288 ปีที่แล้ว +2

    This channel is so underrated you deserve a subscribe

  • @ithunder24
    @ithunder24 ปีที่แล้ว +1

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

  • @abobus_artem
    @abobus_artem 3 ปีที่แล้ว +1

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

  • @BelalAhmed-mp9gf
    @BelalAhmed-mp9gf 2 ปีที่แล้ว +1

    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.

  • @JETSLER
    @JETSLER 2 ปีที่แล้ว +2

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

  • @seyedfayaz
    @seyedfayaz 3 ปีที่แล้ว +4

    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.

  • @_parkphoto
    @_parkphoto 3 ปีที่แล้ว +7

    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
      @hypermatic_tutorials  2 ปีที่แล้ว +2

      Hey there, there's a new export option for Klaviyo now that will automatically help you do this; please find the TH-cam tutorial for this here - th-cam.com/video/7OCqmOsrAYk/w-d-xo.html

    • @_parkphoto
      @_parkphoto 2 ปีที่แล้ว +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
      @hypermatic_tutorials  2 ปีที่แล้ว +1

      @@_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: th-cam.com/video/7OCqmOsrAYk/w-d-xo.html

  • @dianetbethencourt1858
    @dianetbethencourt1858 3 ปีที่แล้ว +2

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

    • @hypermatic_tutorials
      @hypermatic_tutorials  3 ปีที่แล้ว

      Glad it was useful!

    • @dianetbethencourt1858
      @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
      @hypermatic_tutorials  3 ปีที่แล้ว +1

      @@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
      @dianetbethencourt1858 3 ปีที่แล้ว

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

  • @Neo--X
    @Neo--X 2 ปีที่แล้ว +2

    Insanely brilliant! Thanks for this wonderful tutorial 👏😎

  • @bettiannucci
    @bettiannucci 2 หลายเดือนก่อน +1

    thank you! well done and clear.

  • @amilcarlevicupulcortes9645
    @amilcarlevicupulcortes9645 ปีที่แล้ว +1

    Lovely, very nice explained, thank you so much!

  • @TuFacez
    @TuFacez 9 หลายเดือนก่อน +1

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

    • @hypermatic_tutorials
      @hypermatic_tutorials  9 หลายเดือนก่อน

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

  • @urdesign6990
    @urdesign6990 ปีที่แล้ว +1

    Detailed video. like the way you explain.

  • @yourDesire1107
    @yourDesire1107 2 ปีที่แล้ว +1

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

    • @hypermatic_tutorials
      @hypermatic_tutorials  2 ปีที่แล้ว

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

  • @argeelearner3978
    @argeelearner3978 3 ปีที่แล้ว +1

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

  • @studio.biankicks
    @studio.biankicks 3 ปีที่แล้ว +4

    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
      @hypermatic_tutorials  3 ปีที่แล้ว +4

      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
      @studio.biankicks 3 ปีที่แล้ว +3

      @@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
      @hypermatic_tutorials  3 ปีที่แล้ว

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

    • @_parkphoto
      @_parkphoto 3 ปีที่แล้ว +1

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

    • @hypermatic_tutorials
      @hypermatic_tutorials  3 ปีที่แล้ว

      @@_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
    @mohamedalrifai4207 3 ปีที่แล้ว +2

    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
      @hypermatic_tutorials  3 ปีที่แล้ว +2

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

  • @sehreshtariq3266
    @sehreshtariq3266 2 ปีที่แล้ว +1

    Love this tutorial !

  • @adammarciniak3663
    @adammarciniak3663 ปีที่แล้ว +1

    Amazing video I got so much from this

  • @souravisuncool
    @souravisuncool 2 ปีที่แล้ว +1

    Really helpful, thanks for the tutorial!!

  • @romanromanov2306
    @romanromanov2306 3 ปีที่แล้ว +1

    Thank you! Save my time

  • @sherrili1071
    @sherrili1071 3 ปีที่แล้ว +4

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

    • @hypermatic_tutorials
      @hypermatic_tutorials  3 ปีที่แล้ว +5

      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!

  • @arminealeksanyan2778
    @arminealeksanyan2778 3 หลายเดือนก่อน +1

    Super helful

  • @Monkey85ft
    @Monkey85ft ปีที่แล้ว +1

    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
      @hypermatic_tutorials  ปีที่แล้ว

      Hey there, thanks for the great feedback! The plugin does have some dark mode overrides (please see this tutorial: th-cam.com/video/uAxQ5Psi1m4/w-d-xo.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/

  • @emailinsights
    @emailinsights 2 ปีที่แล้ว +1

    You are awesome, man

  • @DanielaLopez-ok2xb
    @DanielaLopez-ok2xb ปีที่แล้ว +1

    Que buen video! Te ganaste una suscriptora.

  • @TomNess
    @TomNess ปีที่แล้ว +1

    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
      @hypermatic_tutorials  ปีที่แล้ว +2

      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

  • @rishisk8
    @rishisk8 2 ปีที่แล้ว +1

    BRILLIANT

  • @chtdkmn
    @chtdkmn 2 ปีที่แล้ว +1

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

  • @kendrafree7337
    @kendrafree7337 6 หลายเดือนก่อน +1

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

    • @hypermatic_tutorials
      @hypermatic_tutorials  6 หลายเดือนก่อน +1

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

  • @FoulOleRonThe3rd
    @FoulOleRonThe3rd 3 ปีที่แล้ว +2

    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
      @hypermatic_tutorials  3 ปีที่แล้ว +4

      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
      @Rodrigodemetrio 3 ปีที่แล้ว

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

  • @nicolaslemonier
    @nicolaslemonier ปีที่แล้ว +1

    Thank you that's amazing

  • @emailinsights
    @emailinsights 2 ปีที่แล้ว +1

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

  • @interestingvideosmail5033
    @interestingvideosmail5033 ปีที่แล้ว +1

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

  • @revin9680
    @revin9680 3 ปีที่แล้ว +2

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

  • @alizeamani3105
    @alizeamani3105 ปีที่แล้ว +1

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

  • @obasiemmanuel2340
    @obasiemmanuel2340 ปีที่แล้ว +1

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

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

  • @awaisrashid7450
    @awaisrashid7450 3 ปีที่แล้ว +1

    Really helpful

  • @k3nphr3n12
    @k3nphr3n12 2 หลายเดือนก่อน +1

    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
      @hypermatic_tutorials  2 หลายเดือนก่อน

      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!

  • @rachelchijindu8715
    @rachelchijindu8715 2 ปีที่แล้ว +1

    Thank you

  • @interact---5485
    @interact---5485 2 ปีที่แล้ว +1

    Thanks a lot...

  • @chandinicreates
    @chandinicreates 3 ปีที่แล้ว +1

    Thank you 😊

  • @vanessageammal367
    @vanessageammal367 2 ปีที่แล้ว +2

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

    • @hypermatic_tutorials
      @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
      @chari---zard ปีที่แล้ว +1

      @@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
      @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
      @chari---zard ปีที่แล้ว +1

      @@hypermatic_tutorials that was my bad 😅 kinda blind

    • @hypermatic_tutorials
      @hypermatic_tutorials  ปีที่แล้ว

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

  • @pravinhublikar5505
    @pravinhublikar5505 2 ปีที่แล้ว +1

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

    • @hypermatic_tutorials
      @hypermatic_tutorials  2 ปีที่แล้ว +1

      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!

  • @Layla-dq5rg
    @Layla-dq5rg 3 ปีที่แล้ว +1

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

  • @gracemaina6593
    @gracemaina6593 ปีที่แล้ว +1

    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
      @hypermatic_tutorials  ปีที่แล้ว +1

      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
      @gracemaina6593 ปีที่แล้ว +1

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

  • @jedidiahescuzar8459
    @jedidiahescuzar8459 3 ปีที่แล้ว +1

    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
      @hypermatic_tutorials  3 ปีที่แล้ว +1

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

  • @jayidkhalifa014
    @jayidkhalifa014 3 ปีที่แล้ว +1

    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
      @hypermatic_tutorials  3 ปีที่แล้ว +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.

  • @adityagangannavar3945
    @adityagangannavar3945 3 หลายเดือนก่อน +1

    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
      @hypermatic_tutorials  3 หลายเดือนก่อน

      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

  • @MyDigitalHub
    @MyDigitalHub 2 ปีที่แล้ว +1

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

    • @hypermatic_tutorials
      @hypermatic_tutorials  2 ปีที่แล้ว

      Hey, for sure! There's another video on custom components here: th-cam.com/video/vczegDic1Do/w-d-xo.html

  • @addisonmaly2081
    @addisonmaly2081 2 ปีที่แล้ว +1

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

  • @normanvalenzuela3055
    @normanvalenzuela3055 2 ปีที่แล้ว +1

    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
      @normanvalenzuela3055 2 ปีที่แล้ว +1

      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
      @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: th-cam.com/video/un_EgOdAdUQ/w-d-xo.html. The documentation has also just been updated with more details about this, too: docs.hypermatic.com/emailify/usage.html#understanding-the-design-elements

  • @ciak51
    @ciak51 3 ปีที่แล้ว +1

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

    • @hypermatic_tutorials
      @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.

  • @sofiatoro4862
    @sofiatoro4862 2 ปีที่แล้ว

    Thanks!

  • @PacNapster
    @PacNapster 10 หลายเดือนก่อน

    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
      @hypermatic_tutorials  9 หลายเดือนก่อน +1

      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!

  • @brunosoares9021
    @brunosoares9021 ปีที่แล้ว +1

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

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

  • @zenskywalker9767
    @zenskywalker9767 3 ปีที่แล้ว +1

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

  • @ei256
    @ei256 ปีที่แล้ว +1

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

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

  • @TheDirtyPhil
    @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
      @hypermatic_tutorials  ปีที่แล้ว +1

      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
      @TheDirtyPhil ปีที่แล้ว +1

      @@hypermatic_tutorials Thanks, didn't know that!

  • @mattybAllDay
    @mattybAllDay 2 ปีที่แล้ว +1

    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
      @hypermatic_tutorials  2 ปีที่แล้ว +1

      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: th-cam.com/video/7OCqmOsrAYk/w-d-xo.html

    • @mattybAllDay
      @mattybAllDay 2 ปีที่แล้ว +1

      @@hypermatic_tutorials Thank you so much!

    • @hypermatic_tutorials
      @hypermatic_tutorials  2 ปีที่แล้ว

      @@mattybAllDay No worries!

  • @user-um1cc6cx5j
    @user-um1cc6cx5j ปีที่แล้ว +1

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

    • @hypermatic_tutorials
      @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: th-cam.com/video/Jmy2Tuzzwjg/w-d-xo.html

  • @ziweizhang811
    @ziweizhang811 ปีที่แล้ว +1

    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
      @hypermatic_tutorials  ปีที่แล้ว

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

  • @vitalgym2909
    @vitalgym2909 3 ปีที่แล้ว +1

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

  • @deanresil519
    @deanresil519 ปีที่แล้ว +1

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

    • @hypermatic_tutorials
      @hypermatic_tutorials  ปีที่แล้ว +1

      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
      @deanresil519 ปีที่แล้ว +1

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

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

  • @bragglights
    @bragglights 2 ปีที่แล้ว +1

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

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

  • @statelycompany
    @statelycompany 5 หลายเดือนก่อน +1

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

    • @hypermatic_tutorials
      @hypermatic_tutorials  5 หลายเดือนก่อน +1

      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
      @statelycompany 5 หลายเดือนก่อน

      im dumb. thanks so much that worked@@hypermatic_tutorials

  • @Alite-ai
    @Alite-ai ปีที่แล้ว +2

    How do we optimize for mobile within Figma?

    • @hypermatic_tutorials
      @hypermatic_tutorials  ปีที่แล้ว +1

      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
      @Alite-ai ปีที่แล้ว

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

    • @hypermatic_tutorials
      @hypermatic_tutorials  ปีที่แล้ว +1

      ​@@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
      @Alite-ai ปีที่แล้ว +1

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

    • @hypermatic_tutorials
      @hypermatic_tutorials  ปีที่แล้ว +1

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

  • @AmarjeetSingh-jv6df
    @AmarjeetSingh-jv6df ปีที่แล้ว +1

    Does this email template work in all email clients?

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

  • @deezehh7355
    @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
      @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: th-cam.com/video/un_EgOdAdUQ/w-d-xo.html&feature=emb_title

  • @thewildpansy4005
    @thewildpansy4005 3 ปีที่แล้ว +1

    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
      @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
      @thewildpansy4005 3 ปีที่แล้ว +1

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

    • @hypermatic_tutorials
      @hypermatic_tutorials  3 ปีที่แล้ว

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

    • @thewildpansy4005
      @thewildpansy4005 3 ปีที่แล้ว +1

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

  • @user-hv4iu7rb3w
    @user-hv4iu7rb3w 2 ปีที่แล้ว

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

  • @nadia5792
    @nadia5792 ปีที่แล้ว +1

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

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

  • @sammi1981
    @sammi1981 3 ปีที่แล้ว

    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
      @hypermatic_tutorials  3 ปีที่แล้ว +1

      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
      @sammi1981 3 ปีที่แล้ว +1

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

    • @hypermatic_tutorials
      @hypermatic_tutorials  3 ปีที่แล้ว

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

  • @MrMyers1489
    @MrMyers1489 9 หลายเดือนก่อน

    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
      @hypermatic_tutorials  9 หลายเดือนก่อน +1

      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
      @MrMyers1489 9 หลายเดือนก่อน

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

    • @hypermatic_tutorials
      @hypermatic_tutorials  9 หลายเดือนก่อน +1

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

  • @alexanderkrasnovsky
    @alexanderkrasnovsky ปีที่แล้ว

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

  • @mildheadwound
    @mildheadwound 2 ปีที่แล้ว +1

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

    • @hypermatic_tutorials
      @hypermatic_tutorials  2 ปีที่แล้ว +1

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

    • @mildheadwound
      @mildheadwound 2 ปีที่แล้ว +1

      @@hypermatic_tutorials Thanks, that is amazing!

    • @hypermatic_tutorials
      @hypermatic_tutorials  2 ปีที่แล้ว

      @@mildheadwound No worries! Glad it helped

  • @alexanderkrasnovsky
    @alexanderkrasnovsky 2 ปีที่แล้ว

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

    • @hypermatic_tutorials
      @hypermatic_tutorials  2 ปีที่แล้ว +1

      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

  • @Lady-Artblock
    @Lady-Artblock 3 ปีที่แล้ว

    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
      @hypermatic_tutorials  3 ปีที่แล้ว

      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
      @Lady-Artblock 3 ปีที่แล้ว +1

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

    • @hypermatic_tutorials
      @hypermatic_tutorials  3 ปีที่แล้ว

      @@Lady-Artblock Awesome, no worries!

  • @Harish-qt8nf
    @Harish-qt8nf 2 ปีที่แล้ว +1

    how to add images to mail?

    • @hypermatic_tutorials
      @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.

  • @ruxandapetco5522
    @ruxandapetco5522 2 ปีที่แล้ว +1

    Do the buttons works?

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

  • @jenniferwassel6427
    @jenniferwassel6427 11 หลายเดือนก่อน

    Can you use the HTML to create modules in Hubspot?

    • @hypermatic_tutorials
      @hypermatic_tutorials  11 หลายเดือนก่อน

      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!

  • @deanresil519
    @deanresil519 ปีที่แล้ว +1

    Can I change the font style?

    • @hypermatic_tutorials
      @hypermatic_tutorials  ปีที่แล้ว +1

      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
      @deanresil519 ปีที่แล้ว +1

      @@hypermatic_tutorials thank you so much

  • @MichKY15
    @MichKY15 ปีที่แล้ว

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

    • @hypermatic_tutorials
      @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
      @MichKY15 ปีที่แล้ว +1

      @@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
      @MichKY15 ปีที่แล้ว +1

      @@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
      @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
      @MichKY15 ปีที่แล้ว

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

  • @danybontecou
    @danybontecou 2 ปีที่แล้ว

    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
      @hypermatic_tutorials  2 ปีที่แล้ว

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

  • @kennycreator4800
    @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
      @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
      @kennycreator4800 ปีที่แล้ว +1

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

    • @hypermatic_tutorials
      @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
      @kennycreator4800 ปีที่แล้ว

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

    • @kennycreator4800
      @kennycreator4800 ปีที่แล้ว

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

  • @JoyEnergiser
    @JoyEnergiser 7 หลายเดือนก่อน

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

    • @hypermatic_tutorials
      @hypermatic_tutorials  7 หลายเดือนก่อน

      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!

  • @kaedeharakazuha1081
    @kaedeharakazuha1081 2 ปีที่แล้ว

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

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

  • @RadCor
    @RadCor 2 ปีที่แล้ว

    Охуеть) Awerome!

  • @ThinkCMYK
    @ThinkCMYK ปีที่แล้ว

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

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

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