---
type: tutorial
title: How to export HTML emails from Figma to Bento using Emailify
date: 2025-04-19T00:00:00.000Z
---

# How to export HTML emails from Figma to Bento using Emailify



#### Video Transcript

Today I'm going to be showing you a quick tutorial on how to export your HTML email designs from Figma to the Bento email marketing platform using the Emailify Figma plugin.

To get started, all we need to do is go to our Figma file, click on the little resources icon in the toolbar, and then search for "Emailify." Under the plugins tab, just click on the Emailify item. You can either run the Figma plugin by clicking on the little "Run" button, or I'd recommend clicking on the "Save" icon, which will allow you to save the plugin to your plugins list for easy access later.

I've already clicked on the save icon, so I'm just going to go to my Figma canvas, right-click anywhere, go down to "Plugins", then to "Saved Plugins", and click on Emailify. That’s going to run the plugin we saved a second ago.

If you're new to the plugin, the way that it works is it helps you to design HTML emails and then export those to production-ready code with one click. For example, we can just spin up a new frame by putting in a template name here, or you can browse the existing templates that come with the plugin and clone one of those into your Figma file.

We'll be having a look at one of those in a moment. But just as a really quick overview to get started, you can create a new Emailify frame, and that will allow you to start adding components and layers down here, which you can then customize to your own brand and drop in your own content and things like that.

It's a really quick way of building out an email. You can use these components and tools down here to design emails within a few minutes and get those spun up as reusable components. You can customize this however you like.

To do a nicer example today, I'm just going to grab one of the templates that we looked at and spin up the Figma plugin in this Figma file. Then we're going to preview that and upload it to Bento.

You can preview the emails in Figma by clicking on the little preview button in the Figma plugin. That’s going to spin up a real HTML preview inside Figma, so you can see what it’s going to look like on desktop and mobile. You can also view those at the same time. If you want to look at both of those next to each other, you can do that.

You can override the content. For example, if you wanted to add mobile overrides, you could do that for any of these layers. You can see here it’s updating the font size on mobile but leaving it on desktop.

I'm not going to go through all of the design features in detail today. If you're new to the plugin and want to learn more about how the design works and how the plugin works for designing emails, please check out some of the other YouTube tutorials on the channel.

For today, I'm going to assume that you've already got your design the way you want and now want to export it into the Bento email platform. We're going to do that now.

Before we do, the last thing we need to do is add a Bento footer. If you go to the Footers tab in the Figma plugin, you’ll see under the letter "B" there’s a Bento email footer. If we click on that, it adds a new component or row to our template. Of course, you can customize that design however you like, but the important thing is that the unsubscribe and view-in-browser links are pre-populated.

If we click on those link layers and check out the tag, we can see the clickable URL is set to the Bento unsubscribe link. This is a special Bento tag, and the same applies for the view-in-browser link. These are pre-populated, and you need that to be able to send out the email. If it doesn’t have an unsubscribe link like this, Bento will add its own, so you want to make sure to add your own. You can customize the design to your preference.

Now that we've got that set up and we've previewed the email and are happy with it, all we need to do is go to the Export HTML button in the plugin and click on that.

Change the option from "HTML Email" — which is the default export option that will download a zip to your computer — and go down to the Platform Integrations section to find Bento. Click on the Bento option.

You can enter your subject line and preheader text. The preheader text is what shows up after the subject line in your email client. Add that preheader text there. You can also toggle whitespace if you want to add extra space after the preview text so that the body content doesn’t show up. I always prefer to have that on, so I’ll leave it toggled.

Then click on "Export for Bento." This will automatically generate all the HTML code, upload all the images, and give us a nice zip file we can now download.

Once the export finishes, click on the "Download Your Zip File" button and then "Save." Once that’s saved to your desktop, open up the folder. You’ll see the Emailify template folder, which matches the Figma frame name.

Open that folder and find the index.html file. Drag that into your browser. You’ll see our HTML has been exported as expected.

Next, go to the Broadcasts page in the Bento platform. You can get there by going to the Emails section on the left, clicking on "Broadcasts," and then clicking "Create Broadcast" in the top right.

Click on "Create Broadcast." Once that loads up, give it a name. I’m just going to call this "Test Email." You can fill in all the recipient details and such. For today, I’ll leave that empty and click on "Save and Continue."

After clicking "Save and Continue," you’ll see a screen asking how you want to build your email. Go to the bottom right and click on "Code Mode." This allows us to paste our code into their code editor.

Click the Code Mode tile, which loads an empty code editor. Go back to your HTML file that we just opened from the zip folder — the index.html file. Open it in your browser, right-click anywhere, and choose "View Page Source." Select all of that and copy it to your clipboard.

Then go back to Bento. Delete anything in the HTML editor and paste in the code. You’ll see all of the code has been pasted in — this is the full HTML export from Emailify.

Click on "Save Changes." You can preview that by clicking on the "Preview" tab. This will load up the preview of the HTML we just pasted in. It’s looking really good.

Importantly, you can see that the unsubscribe and view-in-browser links are valid. In the bottom left of the browser window, you’ll see they are being pre-populated, and Bento recognizes them as valid tags. That’s all looking great.

You can send a preview to yourself if you want. Otherwise, you can click on "Leave Editor." That will show you what the email looks like and have it ready to send.

You’ll notice there’s no subject line in here. That’s because you need to add it manually again. You can see in the export settings, we added the subject line, and that populates the title tag. For example, if someone clicked on the view-in-browser link, the title tag you see at the top would be populated from the Emailify input.

You still need to copy that directly into the Bento platform manually. Just paste it in there. You don’t have to set the preview text again if you've already set it in Emailify. If not, feel free to paste it into Bento. But if you’ve already set it in Emailify, setting it in Bento will just duplicate it — use one or the other.

Anyway, that’s basically it. Once you’ve pasted everything in, the email is now ready to review and send as a custom HTML email — completely ready to be sent as a custom template from the Bento email marketing service.

If you're using Bento — bentonow.com is the domain — and you’ve been wondering how to get a custom HTML email designed with your brand and content into the platform to send out, this is a really easy way to do that. If you're already using Figma and want to spin up an email quickly, then export the code automatically to be uploaded into the Bento platform, this is the way to go.

I’ll leave it there for today. I just wanted to keep that really simple. Hopefully, that helps your workflow if you're a Figma and Bento user.

Thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export HTML emails from Figma to Mailmodo using Emailify
date: 2025-01-28T00:00:00.000Z
---

# How to export HTML emails from Figma to Mailmodo using Emailify



#### Video Transcript

Today, I'm going to show you a quick tutorial on how to export your HTML emails from Figma into the Mailmodo email marketing platform using the Emailify Figma plugin. 

To get started, all we need to do is go to our Figma file, click on the little resources icon up here, and search for "Emailify" under the plugins tab. If you click on the Emailify result, you can run that Figma plugin by either clicking on the "Run" button here or, as I'd recommend, clicking on the little save icon here. That will allow us to run the Figma plugin from our plugins list.

I've already clicked on the little save icon, so I'm just going to go to my canvas, right-click anywhere, go down to "Plugins," then to "Saved Plugins," and click on the Emailify item. That will run the Figma plugin we saved a moment ago. If you're new to the Figma plugin, the way it works is that it helps you design HTML emails that you can then automatically export to production-ready code directly from the Figma plugin when you're ready.

For example, if we create a new template, I'm just going to call this "Template Example," click on "Add New Emailify Container," and that will allow us to design our custom HTML email in Figma using the design tools provided in the plugin. I won't be going through all the different ways you can design the email in Figma. If you're new to the Figma plugin and interested in learning more about how to do that, there are a bunch of really good tutorials on the YouTube channel or in our documentation site. That will help you get started quickly with figuring out how to customize some of these details and designs to match your brand.

As a quick overview, you can customize the layers with things like mobile override. If you want to change the font size or padding on mobile for any of these components, you can go through those layers by clicking on them when you've got your settings panel open. That will allow you to customize the design. You can then click on the preview button in the Figma plugin to preview that on desktop and mobile. This is a real HTML preview of the email itself, so we can see here that this is real code, and this is what it's going to look like when we export it to production-ready HTML.

Once you're happy with your design, we can then go ahead and export it from the Figma plugin. It's also worth noting that if you're new to the Figma plugin, if you go back to the new email screen and click on "Browse Emailify Figma Templates," you can also clone a free Figma template directly from the Figma plugin. For example, we've got one over here from the Airbnb template, which is included in the Figma plugin up here. That will allow you to duplicate a production-ready Emailify-designed template that you can then use as a starting point or customize or grab some of the components as well. I just wanted to mention that in case you're new and wanted to get a sense of how the templates can be designed.

With that being said, if we close this off and then click on the "Export HTML" button in the Figma plugin up here, that will allow us to export the code to HTML. What we can do is change the default export option from HTML email, and if we go down to the platform integration section down here and scroll down to the letter "M," we want to click on the Mailmodo option. If you click on Mailmodo, we can then populate the subject line and the preview text. The preview text gets shown underneath or next to the subject line in your email client. If you're in Gmail or Outlook, you'll notice there's usually a bit of text underneath or next to the subject line itself. This is what that populates there. You can paste that in there with the subject line, and that will add it to your title tag in the HTML export. If you're viewing the email in your web browser, for example, that will also populate the title tag. Just a note: we will have to add this subject line manually in Mailmodo in a moment.

I'm just going to export that now. If I click on the "Export for Mailmodo" button, that will generate all the HTML code, automatically upload all the images, and give us this ZIP file to download. Now that that's ready to go, I'm just going to click on the "Download your .zip file" button and save that to my desktop. You can save it wherever you like. Then, if I open up my desktop and unzip that file by double-clicking on it, we can see once we expand the folder that it just unzipped. We've got this folder in here, which is named the same as our Figma frame, and this index.html file is the one we're going to be using in a moment.

What we now want to do is go back to our Mailmodo dashboard. If you log into your Mailmodo account and then go to the templates page, click on "Templates" in the left-hand side column, and under the "Your Templates" tab, go down here where it says "Create New Email Template." Click on the little arrow on the right here and then click on "Upload Template." I'm going to click on the "Upload Template" option, and you can see here it's going to allow us to drag and drop an HTML file. The one we want to be using is the one inside of that folder, not the previews.html file. We want the index.html file, and we're going to drag and drop that index.html file directly into this little drop zone area here in Mailmodo. That will allow us to upload the index.html file.

Once that's finished uploading, go ahead and click on "Add Name and Email Type." You can give this one a name. I'm just going to call this "Example Template," and under "Select Email Type," you can choose whatever you like. I'm just going to use "Promotional" in this case and then click on "Save and Upload." That will save the template and upload it into our Mailmodo account. You can see here on the preview page, this is looking really good. This is exactly what we saw in our Figma preview as well. This is the real HTML, so we can see this on mobile, very similar to what we just saw in the Figma plugin preview.

Once you're happy with that, you can go ahead and use that however you like. For example, you can click on the little more options icon here, click on "Use in a Campaign," and that will allow you to automatically spin up a new campaign with the template pre-selected. For example, I'm just going to click on "Use in Campaign," click on the "Bulk" option, and that will allow us to spin up a brand new campaign directly from the template we just uploaded. You can call this whatever you like. We can call this "Campaign Name." Again, you need to pre-populate the subject line one more time. If we paste that in the subject line here and again, preheader text, you can leave it empty if you've already pre-populated it in the export options. If you've already put in your preheader text in the plugin here, you don't need to populate it again here; otherwise, that will double it up. But again, if you've already populated the subject line in the Figma plugin, you do still need to duplicate that subject line here as well for the reasons I mentioned earlier.

What you can do is send a test yourself. If you want to click on the "From Name" and the "Reply To Address," you can populate those, and what we can then do is just go ahead and click on "Next," select your list, click on "Next," and then you can do things like send a test campaign. If you wanted to send a test to yourself before you actually send out the full campaign to your real list, that's probably a good idea. You can go ahead and click on this "Send Test Campaign" button, and that will allow you to review the email by sending a test email to your own email address first.

That's basically it. I just wanted to run through that really quickly to show you how you can upload a custom HTML email that was exported from Figma using the Emailify Figma plugin into your Mailmodo account using the HTML export option. Unfortunately, they don't have an API option at the moment to automatically upload it, so you do have to manually drag and drop that index.html file as per their documentation site here. You can see in their own documentation, they basically recommend uploading it manually via the HTML file.

The other really weird quirk that they mention is that if you're using a custom HTML template, you can't use a custom unsubscribe link. I thought that was quite strange; usually, you're allowed to use your own unsubscribe link. I actually tried using an unsubscribe link that they recommended, and it basically just gets stripped out. Essentially, at the moment, it seems like if you are using a custom HTML template with Mailmodo, they will automatically inject an unsubscribe link at the very bottom of the email. That's a bit of a shame because you normally would want to add your own unsubscribe link with your own design, but it seems like at the moment, they just strip that out. If you add that in as per their documentation here, the custom unsubscribe link I've tried adding into the custom HTML template links and design, it basically just gets stripped out and doesn't work. It seems to always add its own custom HTML unsubscribe link to the bottom of the email regardless.

I just wanted to flag that in case you're wondering why there's no custom unsubscribe link. It seems like this is just the way they do it at the moment. Hopefully, that'll change in the future, but I just wanted to quickly cover that now in case you're wondering about it. We'll leave it there for today. I just wanted to run through that really quickly, and hopefully, if you're a Mailmodo user, this is a helpful tutorial just to show you the end-to-end process of creating, exporting, and uploading your custom HTML templates from Figma to the Mailmodo platform using the Emailify Figma plugin. Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to use free Figma email templates to design HTML emails using Emailify
date: 2025-01-08T00:00:00.000Z
---

# How to use free Figma email templates to design HTML emails using Emailify



#### Video Transcript

Today I'm going to be showing you a quick tutorial on how to use the free included Figma email templates in the Emailify Figma plugin which you can then customize and use as a starting point for your own brand and content designs. To get started all we need to do is go to our Figma file, click on the little resources icon up here, and then you just want to search for Emailify. Under the plugins tab, if you click on the Emailify item you can run that Figma plugin by either clicking on this run button here or I'd recommend clicking on this little save icon to add it to your plugins list for easy access later.

I've already clicked on the save icon, I'm just going to go to my Figma canvas, right-click anywhere, go down to plugins, then go down to saved plugins, and click on Emailify. That's just going to run the Figma plugin that we saved a second ago. If you're new to the Figma plugin, the way that it works is it helps you to design HTML emails in Figma which you can then automatically export to production-ready responsive code from the Figma plugin directly. You'll notice that the first thing it shows is adding a new blank Emailify frame.

This is the default option where you can basically create a new template and then add it to your Figma page. We can click on this add new Emailify container, and that then will allow us to start adding components which we can then customize and spin up our own designs with our own content and brand pretty easily, and then preview that as real HTML and work on that responsive version as you'd expect. But if you don't want to start from scratch, or you haven't started building out a component library yet, or you just want some inspiration, or you just want to figure out a bit more detail about how the Figma plugin’s features can potentially create layouts, what we can do as an alternative to starting from scratch is go back to the new email page.

We can click on this little plus icon here, and instead of adding a new blank Emailify frame, what we can do is click on the browse Emailify Figma templates tab. This is going to load up over 100 Emailify-ready free Figma templates that we can duplicate and customize and grab components from to create our own email designs with our own brand as a bit of a head start. Instead of starting from scratch, you can basically just browse through here, find something that you like or would like to emulate, or something you just find interesting. You can click on any of those and duplicate it to your own Figma account for free and start using it straight away.

We can take a look at a couple of these now. For example, if we click on this Netflix template, that's just going to open up a brand new tab in the Figma community page, and we can go ahead and open that in Figma by clicking on this open in Figma button. Go ahead and click on this blue open in Figma button, and that's going to open up a brand new tab and automatically duplicate that Figma file to your drafts. You can see it's got the little Community word in brackets there, just letting you know it's been duplicated from the Figma community.

You'll notice that on the left-hand side here, we've got all of these layers that were originally created using the Emailify Figma plugin. That's the way that it works. The Emailify Figma plugin basically helps you to create these layout components. These have all been added initially either from the layouts tab over here or by using the quick add features down here, and then just customizing the design and content using Figma. We end up with something like this.

You can see here that the layout reflects the Emailify structure that you'd expect. We've got rows, we've got columns inside of those rows, and each of those columns can have a bunch of content stacked. You'll see here that we've got a really condensed layout. It's using components, we've got the same component up here that we've got reused down here. It's a very flexible sort of template in this case.

If we were to edit this font, you can see that that's updating for all of those instances. This is a really nicely designed Emailify-ready template. The good thing about that is if we click on the preview button, you will see the real HTML preview is looking really, really good out of the box. You can see here we've got all of our content. These are all individual images. This is all real HTML text, and these are real HTML buttons that you can then customize and use for your own designs.

What we could do is, if you wanted to reuse some of this content or customize it, we could either customize it in the template itself here and either hide certain sections like this, just removing them or deleting them, or you can actually reuse these components in a new email. For example, if we added a new Emailify frame, I'm just going to call this test template and add that to the page. We can actually move or duplicate those components into this new template as well. If we drag and drop, for example, this row here, we grab that and drag and drop it into the new template, you can see here that it's automatically adding that into the template there.

Same thing for these buttons. If you wanted to add those in there, you just copy and paste them. When you preview that, those will automatically be good to go. You can sort of mix and match as well. If you wanted to grab some components from another template, just spin up that new email panel again, click on browse Emailify Figma templates, and find a different email that you want to grab some components from.

For example, if we scroll down and see some other things that we might like, you could basically grab another template and duplicate those as well. We're just going to grab this one here, and again, that's going to open up the Figma community tab. All we need to do is click on the open in Figma button. I'm going to click that again. Once again, that's going to duplicate it into a brand new tab and add it to our drafts. Again, you can see here all of the layers are good to go. Then it's just a matter of copy-pasting these components into our other frame.

We can just jump back into our other tab here, paste those in, and rearrange them as we need to. You can just drag and drop those around, and if we want to grab the photo, for example, we can do that. We'll just grab this one, and of course, you can customize that. We can change that fill to be darker, or we can just make it black like the other ones, and then click on preview. You'll notice that all of the components that we just put together all kind of mix and match. You don't have to worry about any issues because these were all originally designed using the Emailify Figma plugin.

This can be a really easy way to get started if you're new to the Figma plugin, or even if you're experienced with it and you don't want to go to all the trouble of manually designing all of these components yourself. Using the built-in free Figma templates that the plugin offers is a really good way of automatically grabbing some of those components, which you can then build on and customize to your heart's content.

For example, you can obviously change the fonts, content, and logos. You just swap out these layers, get rid of that image, and drag a new one in there, which would automatically update that. We can basically change all of this to be whatever we want, and that's going to get reflected in the template as you'd expect with the Figma plugin. For example, we could change this, make that red as well, and make the text white to match the other button. When we refresh that, those changes will automatically get included as well.

I'm not going into all of the details about the mobile customizations and things like that, but there's a lot to explore there. If you click on any of these layers and then click on the settings button, either in the preview window or the main window, you can do things like override font sizes, padding, and visibility on mobile or desktop. You can then go through and add all of these mobile overrides. When you open that up on desktop and mobile, you'll be able to see those overrides taking place.

Once you're happy with the email design and you've checked it out in the preview, as we just had a look at a moment ago, you can then export that to production-ready HTML by clicking on the export HTML button in the top right. You can select the emails you want to export. You can do things like add your subject line and preview text as well. Then you can choose what platform, if any, you want to export it for. If you're using something like Klaviyo or MailChimp, you can automatically paste in your API key, and that will upload it to MailChimp or Klaviyo for you.

Today, we're just going to use the simple download-to-your-computer option and export it to an HTML file. I'm just going to click on export to HTML. That will go through and automatically export all of the images, generate all of the HTML code for me, and then allow me to download that as a zip file. It's just finished exporting. I'm going to click on download your zip file and save that to my desktop. If I unzip that file, I can double-click on my zip file and open that up. When I open up my finder and open that folder, I can see we've got our two emails that have been exported.

The index.html file inside of both of those folders is named the same as what we named our Figma frame. We've also got this previews file. We can drag and drop that preview file into our browser, and that's going to give us a nice preview page showing what the design will look like on mobile and desktop. We've got both emails on here, you can see this is real HTML code that we've just exported. You can see it on mobile as well. We can change the width of that mobile device just to make it easier to see what that looks like at different widths.

That's basically it. We've got our nice preview page, and you've got the real emails that these are being loaded from inside both those folders. We can drag and drop that into the browser, and then we've got our full email there. It's looking really good. Again, you can see all of that code just by going to the "View Page Source," and that's all of the HTML code that's automatically been generated by the Figma plugin, ready to go and use in your own email-sending platform of choice.

I just wanted to show you what that looked like as a final step when you're ready to export your HTML. Hopefully, that's been helpful. If you're interested in learning more about the Figma plugin, as I said, you've got a whole bunch of templates. We've got 102 templates in there at the moment, feel free to browse all of those, duplicate them again totally for free, and use them as inspiration or reference. They're also a really quick way of spinning up brand-new components without having to manually design them.

You can basically mix and match those, customize them with your own content, and hopefully, that's going to give you a really quick head start at creating your own email campaign designs for your brand with your own content. We'll leave it there for today. Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: article
title: From Four to Five
date: 2024-12-21T00:00:00.000Z
---

# From Four to Five



>“Keep your head down and work like I do, but understand everybody ain't gon' like you.” 

— [Kendrick Lamar](https://www.youtube.com/watch?v=YwUQ_5iV9pY), wacced out murals

It's been exactly one year since posting an update for Hypermatic's 4rd birthday ([From Three to Four](https://www.hypermatic.com/articles/from-three-to-four/)), so here's another annual recap to celebrate Hypermatic turning 5 years old today!

### Some numbers to celebrate from 2024

- **0** investors and **$0** funding (still happily bootstrapped/[default alive](http://www.paulgraham.com/aord.html))
- **72** new free Emailify-ready [Figma templates](https://www.hypermatic.com/templates/emails/) published
- **30** new YouTube [tutorials](https://www.youtube.com/@hypermatic_tutorials) recorded
- **639** new product updates and improvements shipped
- **1,450,000+** users (up from 1,029,000 a year ago)

### Some new feature highlights shipped in the last 6 months (since July 2024)

Besides the usual bug fixes, customer requests, and other smaller enhancements, these were some of the other new features that made their way into the [@hypermatic](https://x.com/hypermatic) feed on X (which is mainly used to keep a record of these changes) over the last 6 months:

- [New Email Templates](https://x.com/hypermatic/status/1873145961398333722) to Emailify
- [Popup Scrollable Text Overlays](https://x.com/hypermatic/status/1869894208464855488) to Bannerify
- [Expandable "Quick Add" Layers](https://x.com/hypermatic/status/1869576569414721830) to Emailify
- [Scrollable Anchor Links](https://x.com/hypermatic/status/1867714732561772957) to Emailify
- [New Google Fonts Support](https://x.com/hypermatic/status/1867365442119233675) to Emailify
- [Custom Crop/Bleed Units](https://x.com/hypermatic/status/1859828445175587306) to TinyImage
- [Sendwithus Integration](https://x.com/hypermatic/status/1859037409771745307) to Emailify
- [Markdown Support for Localizations](https://x.com/hypermatic/status/1846027704237543802) to CopyDoc
- [Resizable Mobile Preview Exports](https://x.com/hypermatic/status/1845643360864026958) to Emailify
- [Smart Localization Styles](https://x.com/hypermatic/status/1843487099099722096) to Emailify
- [PPTX Imports for Figma Slides](https://x.com/hypermatic/status/1843109347146223794) to Pitchdeck
- [Klaviyo Abandoned Cart Components](https://x.com/hypermatic/status/1841355105586819343) to Emailify
- [Auto-Repeat Sync Layer Naming Support](https://x.com/hypermatic/status/1840986309403271407) to CopyDoc
- [HTML Rich Text Support](https://x.com/hypermatic/status/1839189869266149562) to Bannerify
- [Google Slides Imports](https://x.com/hypermatic/status/1835891465849090377) to Pitchdeck
- [Text Outline and Text Opacity Support](https://x.com/hypermatic/status/1834437610351304919) to Pitchdeck
- [PDF Bleed & Crop Marks](https://x.com/hypermatic/status/1832256473474461958) to TinyImage
- [Crowdin Integration](https://x.com/hypermatic/status/1831570135544688866) to Emailify
- [Amazon SES Integration](https://x.com/hypermatic/status/1826128049613713831) to Emailify
- [Editable Text Feedback](https://x.com/hypermatic/status/1823608552726127103) to Commentful
- [Multiple URL Environments Support](https://x.com/hypermatic/status/1819920260369359153) to Pixelay
- [Marketo Integration](https://x.com/hypermatic/status/1818832489730949419) to Emailify
- [PPTX Text Links Support](https://x.com/hypermatic/status/1818065810751111630) to Pitchdeck
- [List Item Spacing Support](https://x.com/hypermatic/status/1816691096464031976) to Emailify

### Learnings from 5 years running a self-funded startup

Hypermatic is my first attempt at running a startup, so there are many things I had to learn along the way. It's easy to read many business books or hear common advice and think you know what to do or expect, but you don't really understand it until you've been through it; "beware of unearned wisdom" comes to mind. I think it's more important to use those resources for learning how to avoid the biggest common mistakes, but [all happy companies are different](https://www.amazon.com.au/Zero-One-Notes-Startups-Future/dp/0804139296), so it's not possible to just run a pre-defined playbook.

Before starting Hypermatic, I worked in digital agencies for a decade as both a designer and developer, so I was mostly shielded from the business side of things and realities of running a company. It's only after you make the jump to the other side that you appreciate that both sides need to work; you can't just focus on the most beautiful product design or cleanest code without at least equal focus on how you're going to distribute, market and iterate on it to find product/market fit and actually become sustainable as a business. From experience, the designers/developers on a team are living in a bit of a bubble, because they are so sheltered from customers, clients and the people who they are actually designing or developing things for.

After 5 years of doing this and learning new insights along the way, these are a few of the things that come to mind, split between maker mode (building products) and manager mode (running a business and working with companies):

#### Maker Mode

- The end user doesn't care what trendy technologies you're using behind the scenes, I think you just use whatever you personally enjoy working with and makes you the most productive and happy over the long term.
- Similarly, whatever the most simple, stable and reliable technology or infrastructure solution you can implement (eg. whatever makes it easiest to sleep well at night) is ideal, even if it's boring or isn't the hottest thing in the wider community.
- It's way easier to iterate and make changes in the very beginning of a product's life than it is once it has a larger base of customers who are already used to it, so it's good to make rapid changes early on when 99.99% of the people who are going to eventually use the product haven't even seen it yet.
- Focus is probably the single most important thing for product development; doing one thing at a time and saying "no" to everything else that's begging for your attention or doesn't align with the product vision.
- It's always a mistake to add a feature that only one or two users are asking for, and doesn't really fit into the vision of the overall product, so you need to push back on these requests even if it means losing a potential large customer (who are the most likely to ask for these bespoke features or updates).
- People are hiring your product to solve a real problem that they have, so it's best to make it exceptionally easy and obvious for them to see their problem solved with a minimal time investment using your product for the first time.
- If you're getting the same question/feedback about the interface or usability of a product over and over again, it's almost always worth just making an update inside the product itself (even if it's in your documentation) to address and resolve it.
- It's good to own as much of your infrastructure as you can, but there is basically always some layer of "platform risk" where you don't have total control; you need to minimize these while also realising there are some really positive trade-offs there between risk and upside.
- Going from working for someone else at an agency/company, where there are a myriad of overheads like recurring meetings, Slack channels, emails, Agile "rituals", Zoom calls, and general disruptions; it's amazing to go from that to removing all of these things and personally getting a 10x productivity boost, where you can literally get more than a normal week's worth of work done in a single undisrupted day of pure productivity. The numbers from [a study by Microsoft](https://www.the-future-of-commerce.com/2023/05/17/microsoft-study-meeting-overload/) seeems to back this up by showing that "57% of the average employee’s time is spent in meetings, email, and chat", "43% is spent creating documents, spreadsheets, and presentations", "The heaviest meeting users spend 7.5 hours a week in meetings" and "The heaviest email users spend 8.8 hours a week on email".

#### Manager Mode

- It can often take 6-18 months for some larger companies to get a new tool approved to trial internally, and then work through all the red tape to actually be able to purchase it. I had a vague sense of this before I started, but I still totally underestimated how hard it can be for some companies to actually trial and (maybe, eventually) purchase software.
- Most people and teams are doing their best to figure out how to get their work done in the best way possible, but there is usually an entrenched bureaucracy that breeds a sense of helplessness and conspires to prevent much from changing.
- Despite many companies claiming to be innovative and forward thinking (even if they truly desire to do things differently), the reality is that most companies still mainly run on an undercurrent of Excel spreadsheets, emails, PowerPoint presentations, PDF files and Word docs; especially because there is a weird lock-in "network effect" here, where each company has to keep using these things because every other company does.
- There isn't a single company that I'm aware of that has everything figured out (even the best ones that we may idolise from the outside), all of them have their own problems, and almost all of the real problems are people problems.
- There are a handful of companies or users who will _never_ be satisfied (and will demand a huge amount of your time), no matter how much you go above and beyond to help them; learning to detect this small group and politely saying "no" early on will save lots of future headaches.
- Many "requirements" that companies have (particularly bigger ones) are very often negotiable, especially when there is an additional cost associated to cover the costs of complying with them.
- It's good to think very carefully before implementing one-way door decisions, like making a non-standard contract with a customer that will require ongoing mind-share and effort.
- Customers have such an extremely low bar for customer service, and are delighted when they actually get timely assistance from a real person to resolve their issue, it's a relatively easy thing to do that makes a big difference (especially as a small startup competing with larger ones that have bad support).

### The UX Bubble Popped

After foreshadowing that [a "vibe shift" was coming](https://trends.uxdesign.cc/2023) at the end of 2023, fast-forwarding one year later to the end of 2024 and it's pretty clear that the bubble has popped. Looking at [the state of UX for 2025](https://trends.uxdesign.cc/2025), it's striking how filled it is with grievances, before throwing in the towel on the whole project, and ends with advocating that the article itself "is the nudge you need to jump ship entirely". In retrospect, the signs were obvious, and I think the bubble peaked somewhere around [the end of 2021](https://trends.uxdesign.cc/2021).

Similar to the [the MBA bubble](https://www.hottakes.space/p/mbas-and-the-death-of-credentialism), it's no secret that the "UX design" space became totally over-saturated, and attracted a flood of people driven by the crazy promises of UX bootcamps that the field was so highly specialised and had an infinite demand that it commanded high salaries, while at the same time claiming that anyone, coming from any background or field (design or otherwise) could also become "job ready" with a 6-week course. The field had the mania of a ponzi-scheme, coupled with a perpetual existential crisis that was more concerned with trying to define and justify itself, rather than a real focus on the underlying discipline.

In terms of what's next, I think that in the same way we saw people pivoting their entire careers into becoming UX Designers within a very short period of time (eg. a 6-week bootcamp) and re-branding themselves as "Senior UX Designers" (weirdly, there's not really such a thing as a "Junior UX Designer"), I think that we're going to start seeing lots of designers who didn't know what "A.I" stood for 2 minutes ago, now rebranding themselves as some kind of expert on the vague notions of "AI Design Ethics" and "Responsible AI", or some variation of this.

### The Post-AGI World

As I mentioned [2 years ago](/articles/from-two-to-three/), I do think AI is going to be a huge forcing function for us to rethink the "best practices" we have clung onto for so long, and I'm very optimistic about the benefits it's going to bring broadly (to research, science and biotech, etc) and to our design/development workflows, but as I also mentioned in my learnings above, I think the culture will always lag behind the technology by many years, so my position remains the same as it did back then; I just want to work on solving _real_ long-time problems that exist for designers, developers and marketers in this space (which I also understand the inefficiencies as deeply as they do) which very few other people or startups seem to be working on. If there are ways that AI can help do that, and it makes sense to add those because it's 5-10x better than without it, then I'll be happy to do that. I also think that it's very important to make sure the relationship between AI and designers/developers is one that's collaborative, where you get the AI to do all the things that it's better at doing (eg. generating code, handling vast amounts of data, etc), and still have the human handle the rest (eg. taste, strategy, specific brand knowledge, etc). 

As we reach AGI in a few thousand days, if [OpenAI's estimates](https://arstechnica.com/information-technology/2024/09/ai-superintelligence-looms-in-sam-altmans-new-essay-on-the-intelligence-age/) are accurate, that list of what humans are uniquely better at is going to shrink dramatically, so I think it's important to focus on what will still be true and valuable in a world where AGI is widely available and work towards creating tools and products that will only benefit even more if you keep adding extra intelligence to them, rather than become obsolete.

This is largely true of all the products that rushed to add AI features into their apps, like text summaries/drafts (via a ChatGPT API call), which is now just a default feature in the browser or easily available via one of the hundreds of tools and APIs that can help do this for you. To this day, I still haven't personally had a single customer say "we just wish there was _AI_ in your products"; they might request features that AI could help with, but they haven't mentioned AI itself and if anything, most companies are very suspicious if you _do_ have some kind of AI features, as they're worried about what data might be collected or if they're accidentally infringing on copyright with the outputs (eg. with image generators, etc).

### Looking ahead to 2025 for Hypermatic

In the last [2024 mid-year update](https://www.hypermatic.com/articles/the-low-end-theory/), I mentioned that I thought the priority should be to stabalise and improve without imposing unnecessary changes in the UI for the sake of adding more features that may or may not need to be there. This is mainly to over-correct for the fact that lots of [software tends to get worse over time](https://www.ft.com/content/6fb1602d-a08b-4a8c-bac0-047b7d64aba5) as the default.

If you look at the list of list of updates posted at the top of this article, you'll notice that many of them make improvements behind the scenes, without jamming a brand new set of UI elements into the user's existing interface that they're used to and trying to shift as much as possible to either the Figma UI itself or just handle behind the scenes with an additional dropdown option (eg. new email platform integrations).

I want to keep doing more of that where it's useful throughout 2025, and also start publishing more free design resources to help add more value to the plugin users as well (similar to shipping 100+ free email templates this year, which work with Emailify out of the box). This will also be coupled with more free video tutorials to try and help existing and new users get even more value from the plugin by doing things they may not have been aware of without diving deeper into the documentation or knowing was possible to achieve.

I'd also like to spend some time migrating this main marketing website to a new framework (as the current one is no longer supported, and may eventually run into deployment issues). Similar to completely re-doing [the docs site](https://docs.hypermatic.com/) in the first half of this year, it was a great chance to audit everything and remove anything that doesn't need to be there any more and add anything extra that should be there, too. There are also a few backend systems and tools behind the scenes that are due for some maintenance and improvements as well.

In terms of new products, the one that I keep coming back to (literally every year) and can't get out of my head is a simple, yet powerful and extensible tool to help designers, developers and marketers create beautiful and customizable marketing/landing pages, portfolios or small websites (and probably basic web apps in the future) that can automatically be exported to production ready code that they own and can deploy on their own platform of choice (which they also own, eg. AWS, Vercel, Netlify, GitHub etc), which the plugin would help them to do as well.

As mentioned above, regarding platform risk, there is always the chance that something native comes along in the future (eg. "Figma Sites") that would wipe out much of the value created by something like this, but I still think it's worth trying to build as something that _I wish that I could have had_ in my previous career, and just assume that there is at least one other team who will resonate with how I'd like to go about solving these problems. As with all the other Figma plugins, the aim is to make something that is _10x better_ than the current manual workflow most teams are dealing with.

I also want to get out of my own comfort zone and focus on using LinkedIn to help market the Figma plugins, as I think there are lots of people in my network who could benefit from them but literally haven't seen or heard of them; I was made acutely aware of this after talking to former co-workers at my previous company who were running into problems generating HTML emails and had never tried using Emailify before. Why LinkedIn? I think it's super underrated and less crowded, where very little people actually post on there, and I might as well take advantage of communicating with the thousands of connections in the design, development and marketing space that I've made over the last decade and see if it resonates with them at all.

That's it for another year! It feels like the last 5 years have been a total blur, I still remember sitting down at my kitchen table on December 21st 2019 as the first day I went all-in to start working on Hypermatic for the first time like it was yesterday. I thought that _maybe_ I would have a bunch of digital/advertising agencies that I talked to (just in Melbourne) be interested in using these Figma plugins, and totally underestimated that teams in almost every country all over the world also wanted these problems solved, and would choose Hypermatic Figma plugins as the way to help them do that. It's pretty unreal to have had over 1.4 million users across all of the 12 Figma plugins in the last 5 years, and I'm looking forward to seeing how that continues over the next 5 years, too.

Finally, I just want to say thank you to everyone who has tried out or purchased any of our Figma plugins. Having you put your trust in Hypermatic to become a part of your workflow is what allows us to be able to continue working on solving these real problems for you every single day here, it's awesome and much appreciated!

---

---
type: tutorial
title: How to add rich text popup overlays to HTML Figma banners using Bannerify
date: 2024-12-20T00:00:00.000Z
---

# How to add rich text popup overlays to HTML Figma banners using Bannerify



#### Video Transcript

Today I'm going to be showing you a quick tutorial on how to add interactive popup overlays to your HTML banner exports from Figma using the Bannerify Figma plugin.

To get started, we need to go to our Figma file. Go up to the "Resources" icon here and click on that, then search for "Bannerify." Under the "Plugins" tab, if you click on the Bannerify result, you can run that Figma plugin by either clicking on this "Run" button here, or I'd recommend clicking the "Save" icon to save it to your bookmark plugins for easy access later.

I've already clicked on that "Save" icon, so I'm just going to go to my canvas, right-click anywhere, go down to "Plugins," then go down to "Saved Plugins," and click on the "Bannerify" item. That's going to run the Figma plugin that we saved a second ago.

If you're new to the Figma plugin, the way that it works is it takes any Figma frames that you've got on your page and allows you to load those into the Figma plugin as banners. For example, I've got all of these predesigned Figma frames already added to my page. I'm just going to click on "Load Checked Banners," and this is going to import all of the content layers, the direct child layers of your banner, into this timeline that you can then animate using the Figma plugin animation settings.

I'm not going to be covering all of the animation features in this tutorial today. I'm just going to assume you've already checked that out and you've got your banners working the way that you want. What we're going to be focusing on today is adding a popup disclaimer to display some scrollable disclaimer text when we export the HTML.

I'm going to show you how to do that now. First of all, just have a layer in your frames that you want to assign that trigger to. For example, I'm going to use this "Book Now" button, we can use that as our trigger for these particular banners. I'm going to go to my "Quick Select Layers" option in the top left of the Figma plugin here and click on that, then find the buttons that are all named "CTA Button." If I click on that, that's going to automatically select all 11 layers across my banners that are named "CTA Button."

You can see here I've got 11 layers selected. We're not going to be applying any bulk animations or applying any other settings in bulk, we're going to go down to the bottom of the Figma plugin window here where it says "Generate Popup Overlay Disclaimers." You can see here we've got a few options. We can set the transition, by default it's just set to "Instant" but we could change that to "Dissolve" or "Fade" or "Move In," for example.

I'm going to click on "Move In," and then you can set the speed of that animation. This is in milliseconds, you can set that to whatever you like and you've got the easing, by default it's just set to "Ease In" but you can change that as well. Finally for this particular one, because we've got the "Move" animation selected, we can also choose which direction the popup overlay is going to be animated in from. For example, I can change that to "Top to Bottom" or "Bottom to Top," "Left to Right," "Right to Left," etc.

Once you've got all of those settings selected the way that you want, you can then go ahead and click on this "Create Popup Links" button. I'm going to click on that now and that's going to do a couple of things. You can see it's created popup links for 11 layers and what that looks like is you can see now we've got this new layer added to our Figma file. This is a Figma component and if I go to the "Prototype" tab in Figma on the right here, you'll notice that it's automatically linked all of the CTA layers that we just selected and it's automatically gone ahead and applied the Figma Prototype settings to those.

If you look at the interactions over here, you'll notice that it's set to "Open Overlay," it's pointing to this component that was just generated by the Figma plugin, it's setting it to "Move In" with the easing settings and timings as we specified in the Figma plugin. That's automatically all been created for us and we don't need to link up any of these manually.

The next thing we can do is customize this content. You'll notice that the content for this component is very simple, it's just one frame with some text and a "Close" button. We don't really have much flexibility to add or remove content or add or remove elements. This is a really basic component that allows you to display some text. For example, you could basically swap all of this out, add your own content. I'm just going to add some new content and then you can customize that to whatever you need to have in your disclaimers or policy or any kind of overlay content that you need to add into your banners.

Of course you can customize the color scheme. For example, if we go to the "Design" tab and click on our component, we can swap the background color. If we wanted to change this to be something else, we could match this up closer to our original banners. We could set a background color that looks more like this, more like a brown overlay, and then we can change the text and "Close" button to also be different as well. In this case, we can make those white and that's going to give us a bit more of a closer match to our banner design.

As mentioned, you can change this content, you can change the padding. If you want to adjust that padding around the edges or adjust the amount of space between the "Close" button you can do that, but everything else is pretty much as is. Once you've got that customized the way that you want, all we need to do now is click on "Export to HTML" and just select the format that you need. If you're exporting it for Google Ads or a different format you can select that option in here. Today I'm just going to leave it as a non-platform specific basic HTML CSS JavaScript export and I'm just going to leave all the other settings as default. Then what I can do is just go ahead and click on "Export 11 Banners" in this case.

That's going to automatically generate the code, export all the images and zip up all of our banners that we can download in a moment. That's just finished exporting all of our banners, you can see that our HTML Banners are ready to download. I'm just going to click on "Download Your Zip File," save that to my desktop, go to my desktop and just unzip that file. Just double click on that and unzip it, and you'll see here that we've got all of our banners exported. This is all the HTML, the image assets automatically exported as you'd expect, and we can also check all those out in one go by opening up this index.html preview page in the root of that unzip file.

I'm just going to drag and drop that into my browser and you'll notice that all of our banners are now loading up on one page. I'm just going to expand that a little bit so we can see them all a little bit easier. Now if we click on these buttons, we got those CTA links in there, you'll notice that we've now got our Rich Text overlay automatically getting included. This is getting added for all of those banners and this is scrollable, it's real text and you can close that, dismiss it as you need to, and that's automatically getting handled for you by the Figma plugin.

This can be really handy if you need to include popup overlays that include disclaimers or privacy text, things like that. There are certain industries where you need to include this stuff and it can be a bit of a pain to manually code them. This is an easy way to automatically create that in Figma, allow you to swap out your own content, customize the design and animation.

That's basically it, you can also redo the animations. If you wanted to change these prototype links to be something else, you can either do that manually by going to the "Prototype" tab in Figma and changing those on the buttons directly, or I'd recommend going back to the "Quick Select" menu as we did before, clicking on the "CTA Button" or whatever layer you've got as your trigger, and then you can basically change that again down here to whatever you like.

For example, I could change this to "Dissolve," I could change the easing to "Ease In and Out," and because the "Move In" isn't selected in this case that's going to be disabled. We can now click on "Create Prototype Links" again and that's going to relink all of the CTA layers to the same component. It's not going to wipe out the component, it's going to detect that you've still got your original popup overlay there, that's not going to get amended or changed. You can see all of our content and design is still in there, but if we now go to the "Prototype" tab and click on one of these layers and then click on the interaction, you'll notice that the effects have been updated. Instead of it being a "Move In," it's now set to "Dissolve" just as we set in the Figma plugin settings a moment ago, and the easing has been changed to "Ease In and Out" as well.

Now if we reexport that to HTML, I'm just going to go through the exact same process, click on "Export Banners," wait for that to finish exporting, and once that finishes again just download the zip file to your computer. Then you can save that anywhere you like, unzip the file again, we're just going to preview the index page again. I'm going to drag and drop that into my browser, open that up, and if I click on this now you'll see that we've got a nice fade overlay instead. Instead of the "Move In," we've now changed it to a fade and it's looking a little bit smoother for this particular design.

You can customize that in the Figma plugin, you can just change that popup overlay setting to do whatever you like, it's totally up to you. You can change it and update it if you don't like it the first time, feel free to mess around with that.

That's basically it, I just wanted to do a really quick tutorial to show you this brand new feature in the Figma plugin. This has been a really popular request, hopefully that helps alleviate some of the pressure on your design and dev team for creating these bespoke overlay components every time, and this is just a really simple automated way to add them to your exports from Figma using the Bannerify Figma plugin.

'll leave it there for today, thank you as always for watching and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export HTML emails from Figma to Sendwithus using Emailify
date: 2024-11-20T00:00:00.000Z
---

# How to export HTML emails from Figma to Sendwithus using Emailify



#### Video Transcript

Today, I'm going to be showing you a quick tutorial on how to export your HTML email designs from Figma to the Sendwithus email marketing platform using the Emailify Figma plugin.

To get started, all we need to do is go to our Figma file and click on the little "Resources" icon at the top here. If you search for "Emailify" under the Plugins tab, you can click on the Emailify result to run the Figma plugin by either clicking on this Run button here, or I’d recommend clicking on the Save icon to save it to your plugins list for easy access later.

I’ve already saved my Figma plugin here, so I’m just going to go to my Figma canvas, right-click anywhere, go down to Plugins, then go down to Saved Plugins, and click on the Emailify item. That’s just going to run the Figma plugin we saved a second ago.

If you’re new to the Figma plugin, the way it works is it helps you to design HTML emails, which you can then export to code with one click automatically. This helps you save time on development and eliminates the need to manually code those emails. Instead, you just design them and export them.

Today, I’m going to be creating a really simple template. I’ll just call this Example Template and click on Add New Emailify Container. This allows us to start adding components, designing our email, and customizing it as we like.

I’m not going to go through all the design features in this tutorial today—I’ll assume you’ve already checked out some of the other tutorials on the YouTube channel and in the documentation. But if you design and customize this to your liking, once you’re finished, you can upload it to the Sendwithus platform, which we’re going to do in a moment.

Once you’ve designed your email, the last thing you need to keep in mind is that the Sendwithus platform hooks into your existing email service provider's unsubscribe system. You need to double-check which service you’re integrating with in Sendwithus.

There are a few here, and today, I’m just going to use the SendGrid example. You’ll want to find the platform you’re using under the Footer Tab in Emailify, then scroll down until you find the platform you’re using. In this case, we’ll use SendGrid as an example. I’ll click on the SendGrid Footer, and that will automatically prepopulate this unsubscribe link in the navigation component with the correct SendGrid unsubscribe tag.

Once you’ve done that, you’re ready to upload your email. You can preview the HTML by clicking on the Preview button in the Figma plugin. This will load a real HTML preview you can check before uploading the email, ensuring everything looks good.

You can switch between mobile view and desktop view, and you can also add things like mobile overrides through the settings panel here. But again, I’m not going to cover all the design features today. Please feel free to check out the documentation site and the other YouTube tutorials if you’re new to the Figma plugin.

Now that I’m happy with my HTML template, all we need to do is close the preview and click on the Export HTML button in the Figma plugin. Next, change the HTML Email Option, scroll down under the Platforms group, and find the Sendwithus option.

I’m going to click on Sendwithus, and you can see it’s asking for a Sendwithus API key. If you’re logged into your Sendwithus account, you can click on that API Key link, which will automatically open the API settings page in your Sendwithus dashboard.

From there, all you need to do is click on the Create New API Key button, give it a name (in this case, I’ll call it Emailify), set the key type to Production, and then click on the Create API Key button. That will generate the API key, which you can copy to your clipboard. Make sure to store it somewhere safe, like a password manager, as it will only show you the key once.

Once you’ve copied the API key, go back to your Figma file and paste it into the field here. I’ll just paste that in now.

After pasting in the API key, you can optionally add a subject line. For example, you can add your Subject Line here. If you want, you can also add preheader text, which is the text that shows up next to or underneath the subject line. You can add your Preheader Text here.

Then, click on the Upload Export button in the top-right corner. Once you click on that, it will export the email, upload all the template details and images to the Sendwithus platform, and show you a confirmation message that says your Sendwithus templates have been uploaded.

You can view those templates by going to your account and clicking on the Templates page. You can also click the link in the Figma plugin, which will automatically open the Sendwithus templates page.

Here, you’ll see that our example template has just been uploaded. If we click on that template, it will load the editor, and you’ll see that all the HTML we just exported from Figma via the Emailify Figma plugin has automatically been uploaded into the platform.

You’ll see all the content, the unsubscribe link, and the images are there as expected, and everything looks great. It’s really up to you to decide how you want to use this going forward, but this is the easiest way to get the HTML template directly into the Sendwithus platform automatically via the HTML upload.

You’ll also notice that the subject line has been carried across. The subject line is prepopulated, and the preheader text is included in the HTML. If you inspect the content, you’ll notice the preheader text is already in a hidden div, so you don’t need to add it again in the Sendwithus platform—otherwise, it will double up in your HTML email sends.

That’s basically it. I just wanted to show you a quick tutorial on how to get your HTML email designs created using the Emailify Figma plugin from Figma into the Sendwithus platform using the built-in API integration.

Hopefully, this improves your workflow—rather than manually copying and pasting code every time, you can just click one button and automatically upload the code from Figma directly into your Sendwithus account templates.

So, we’ll leave it there for today. Thank you, as always, for watching, and we’ll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to create a Klaviyo abandoned cart flow custom HTML email template in Figma using Emailify
date: 2024-10-09T00:00:00.000Z
---

# How to create a Klaviyo abandoned cart flow custom HTML email template in Figma using Emailify



#### Video Transcript

Today, I'm going to be showing you a step-by-step tutorial on how to design and implement custom HTML abandoned cart emails in Klaviyo using the Emailify Figma plugin. 

To get started, all we need to do is go to a new Figma file and open up the resources panel at the top. If you click on the resources icon and search for Emailify, under the plugins tab, if you click on the Emailify item, you can run the Figma plugin by either clicking on this "Run" button here or I'd recommend clicking on the save icon to bookmark it to your plugins list for easy access later.

I've already clicked on the save icon, so I'm just going to go to my Figma canvas, right-click anywhere, go down to plugins, then go down to saved plugins, and click on Emailify. That's just going to run the Figma plugin we saved a second ago. If you're new to the Figma plugin, the way that it works is it helps you to design HTML emails in Figma, which you can then automatically export to production-ready code with one click from the Figma plugin.

To get started, I'm just going to give this email a name, and I'm going to call it "Klaviyo Abandoned Cart Email Template." Then, I'm just going to click on the "Add New Emailify Container" button. I'm not going to be going super deep on the design features in the Figma plugin today. If you're interested in designing and customizing HTML emails in Figma using Emailify, there are a couple of other tutorials on the YouTube channel that you can check out, and the documentation site is really good for that as well.

But for today, I'm just going to be creating a really basic email with a little bit of content and, most importantly, the abandoned cart template that we're going to be creating in a moment. What I'm going to do is go over to my "Ecom" tab in the Figma plugin. You can see under the first section here, under the Klaviyo section, we've got a few different templates we can use. These first ones are Klaviyo dynamic product feeds, so we're not going to be using those today. If you scroll down a little bit further, you'll notice that we get to these Klaviyo abandoned cart items templates.

You can see we've got a few in here. We've got one for Shopify, which is probably going to be the most popular one, and then we've got one for WooCommerce, Magento V1, V2, and BigCommerce. You can select which one is relevant to you. For today, I'm going to be using the Shopify one, so I'm just going to click on the Klaviyo Abandoned Cart Items Shopify template. That's just going to add all of these layers to our email automatically.

You can see here that we've got a bunch of code that's been added. This is basically going to check if your abandoned cart has items in it. If it has some items, it's going to show this heading here, and then it's going to try and loop through all those items and display the product information here. But if the cart is empty, you'll get this empty message here. This is all customizable; you can change this. If you want to update the text, you can obviously change that to say, "Did you leave something behind?" or something like that. This is totally up to you, so you can basically customize this content as you would the rest of the email, and that's all going to look just fine.

Again, if you don't even want an empty message, you can just get rid of that entirely, and that’s totally fine. You can basically just remove that, and it won't show up. I'm just going to leave that in there for now to keep things simple. You'll notice that there are a few different bits of copy here. We’ve got the product title, the price that's going to be displayed, the quantity, and also the image. The image is being loaded through the settings panel in the Figma plugin. If you click on that image layer and click on the settings panel, you'll notice that the information, link, and ALT text have been pre-populated with the dynamic tags for Klaviyo.

I'm just going to leave all of that as is. Again, you can customize this if you want to make the image a little bit bigger or a little bit smaller. If you want to customize this text, you can totally do that in Figma, but for today, I'm just going to be keeping it really simple, along with this button down here. I'm not going to customize that either, but if you check out the button settings, that's also going to take you to the checkout URL. Of course, you can customize this as well; you can change the copy on there and obviously change the styles as you like.

The last thing I'm going to do before we connect this to our Klaviyo account is just go to the footer tab and scroll down to the letter K. We're going to find the Klaviyo footer. Go ahead and click on the Klaviyo footer, and again, that's going to pre-populate these links for us. We’ve got our unsubscribe link; you can see here that's pre-populated: manage preferences, view in browser, and the address as well. Again, you can change this design to whatever you like. If you want to update that style or content, you can definitely do that, but again, I'm just going to keep it really simple for today.

You can also preview the HTML just by clicking on the preview button at the top here. You can see this is the mobile preview and the desktop preview. You'll notice that the image isn't being loaded because, again, this is loading in the dynamic image URL. This is going to get swapped out in Klaviyo once we hook this up to our abandoned cart or other type of cart email. Again, same with this product data here. I'm essentially going to leave all that as is, and what we're going to do now is export this HTML into Klaviyo.

I'm going to go ahead and click on the export HTML button. I'm going to change the default HTML email option and scroll down to the Klaviyo option. Just click on Klaviyo. What you want to do then is click on this API key link. If you click on that API key link, that's going to open up your Klaviyo account if you're logged in. What you want to do is click on the "Create Private API Key" button here. Just go ahead and click on that, and once your "Create Private API Key" loads up, you can just give it a name. I'm just going to call this "Emailify Klaviyo Key." You can name it whatever you like.

Then we're going to click on the "Custom Key" radio option down here and just scroll all the way down to "Templates." You want to change that one to have read-write access. All the other ones can have no access. All we want to do is change the read-write access column for templates to be selected at that radio button. Once you've selected templates to have read-write access, go ahead and click on the create button. That's going to automatically create your new Klaviyo private key. You only get one chance to copy this, so I'd save this in a password manager or somewhere secure for future reference as well.

Just go ahead and click on the little copy icon here, and then once it says it's copied to your clipboard, just go back into Figma. We now want to paste that key into this input field here. I'm just going to paste that in, and now you can see that the upload button is available to us. I'm also going to leave the editable content toggle turned off. There are a bunch of reasons for that. If you click on the content link here, you'll get a better understanding as to why you would want to turn that off in this particular case.

But basically, the long story short is the editor will add all this weird extra padding and things like that, so it's just a bit of a headache to tidy up. I would just leave that editable toggle off for our abandoned cart email. Then you can basically give this a subject line and preheader text. I'm just going to leave this blank for now just for simplicity, but you can populate those as you like. Once you've set all that up, just go ahead and click on the "Upload to Klaviyo" button. That's going to automatically generate the HTML, upload all the images, and automatically upload our template to our Klaviyo templates page in our templates account.

If you click on that Klaviyo templates link, you will see all of the templates there, including the one that we just uploaded. If I click on that link now, this is going to open up our Klaviyo templates list. You can see at the very top here we've got our Klaviyo Abandoned Cart Email Template. If we open that up and click on preview, you can see that our HTML has just been automatically uploaded from Figma into Klaviyo. That’s the first step. We've got our abandoned cart email template in the Klaviyo templates now.

The next thing we need to do is set up the flow itself. The abandoned cart flow can be set up under this flows panel on the left-hand side in Klaviyo. If you click on the flows menu item where my mouse is on the left right now, just click on flows. Once that loads up, you just want to go ahead and click on the "Create Flow" button in the top right-hand side. It's going to give you a bunch of presets. There might be a bunch of preset ones. You can see here there are a bunch of Shopify presets. You can search for different presets if you want to use one of those; that’s perfectly fine.

But to keep this really simple, to hopefully make it clear how it works, I'm just going to start from scratch and click on the "Build Your Own" button in the top right here. I'm just going to call this one "Emailify Abandoned Cart Flow," and I'm just going to leave that as the name. Again, I'm going to click on the "Create Manually" one. I'm not going to create it with AI; I'm just going to click "Create Manually" and go to the Builder.

Once the new flow loads up, you'll see something that looks like this, and you've got a bunch of different options. For this tutorial, it can also be used for other types of triggers. If you wanted to do a different one, like added to cart or something like that, you can use a different trigger. But for today, we're just going to be focusing on abandoned carts. With that being said, I'm going to click on the "Checkout Started" one. You can see under "Most Popular" here, we've got the "Checkout Started" trigger. I'm going to click on that, and this is basically going to fire whenever somebody starts a checkout process in Shopify, with some other metrics also included.

We can start stringing these together in a moment. I'm going to use that as the trigger. I’m going to create the trigger of "Checkout Started," and then I'm just going to go down to the bottom here and click on the "Save" button. I'm just going to click "Save," then confirm and save, and that's going to lock in that trigger as the trigger of when someone starts a checkout. That's kind of the beginning of our trigger.

What we want to do now is add a time delay item. If you go on the left-hand side here, go under "Timing," and drag and drop the time delay item underneath there. We're just going to drag and drop that onto the canvas, and then we want to click on that and add a time delay. Normally, what you want to do is either add like a day, so you could do one day or something like a few hours, so you could set a 4-hour delay. I'll put that in there and click on "Save." Once that finishes saving, you can see that it's telling us the changes have been saved.

We've now set up the trigger and set a timer delay for 4 hours. The final step we're going to add in this particular flow is then to trigger an email. We're going to drag and drop this email item in the top left into the bottom of our existing flow down here, underneath the delay, and that's going to add the email step to our flow. Basically, someone's going to start a checkout; if they leave the checkout or don't check out after 4 hours, it's going to send them this email.

We're now going to click on the email flow item, and what we're going to do is give this a name. You can call this "Abandoned Cart Email Number One." If you're going to have multiple triggers or multiple delays, you could name these with numbers at the end; that’s pretty common. Then you can give it a subject line. You might say something like, "Did you leave something behind?" That might be your subject line. You can call it whatever you like.

Then basically, you want to go down here where it says "Template" and click on "Select Template." Once that template page loads up, we want to go to the "Saved Templates" tab. Go ahead and click on "Saved Templates," and underneath this list, you’ll see our brand new one that we created called "Klaviyo Abandoned Cart Email Template" at the very top. We're just going to click on that one, and you can see we've got a preview of the template. This is the same template we just uploaded a moment ago.

I’m going to click on "Use Template," and this is going to load up a new page with the code on it. Once this template view loads up, you can see all of our HTML code that was exported from the Emailify Figma plugin is in here. What we can do is now preview this with real data by going to the "Preview Email" button on the right-hand side here and clicking on that. Then you'll notice at the top here we can select a recent event to preview with.

What that means is we can select a recent event from the real e-commerce site. In this case, this is me doing a checkout a few hours ago. I’ve got this checkout event where I started checking out and then closed the window and didn’t finish my checkout. I've got a couple of items in my cart, and we can use this real data to populate the dynamic content that we created in our template.

What you can do is just click on whichever event you want to preview it with. Then go down here and say how you would like to preview the email. Just click on "Show Directly in Klaviyo." You can also send it as a test email to yourself if you prefer to do that. But for today, I'm just going to click on "Show Directly in Klaviyo." Click on "Preview" now, and that's going to automatically pre-populate that content.

You can see here this is real HTML content, and it's being populated with the real data from that real checkout event. This is really cool because it means we can actually test out if these links are working. We can see that the product names and pricing and the quantity in the cart are correct. We've got our return to cart button, so if we click on that, that'll actually return us to the real cart for this real event. It’s just a really nice way of seeing what the email is going to look like when that abandoned cart trigger really gets fired and what a real customer is going to see.

This is exactly what you want to see and make sure that the data is coming through exactly how you'd expect. Again, this is working with a Shopify store, so if you're using a different platform like WooCommerce, you would use the WooCommerce template in Figma that we saw in our templates over here. You've got the Ecom tab, and down here, you've got the Shopify version, which we've used. But if you're using a different platform like WooCommerce and you're using that with Klaviyo, the variable names here are going to be a bit different. You just want to make sure you've got the correct one.

You can obviously modify these if you want to change it. If you don't have dollars, maybe you want to change this to a pound symbol or something like that, but you can basically change that as needed. That’s looking really good. This is basically the pre-populated real data content being injected into our layers here, which again were just preview placeholders at the time. These fields are now being swapped out with real content based on the real Klaviyo links and data from our checkout event.

I'm just going to close off that preview now that we know it’s looking good, and we're going to click on the save button. It's important to click on the save button again when you're done, so just go ahead and click on that X. Then we're going to click on the "Done" button in the top right-hand corner. That's going to take us back to our flow. You can see we've got the flow here, and essentially what you want to do is make sure that all the conditions are exactly what you want.

If you go back to the trigger up here, you can see that we don’t have any filters applied at the moment. You can add filters to this trigger to say, "Hey, we only want this to fire when a certain category, a certain collection, a certain discount code, or anything is used." You can basically dive really deep into the conditions of when this will fire, or you can just leave it as a very generic thing. When anyone checks out, it will trigger, but you probably want to enhance the trigger filters to make it only fire at certain points.

That's kind of outside of the scope of this tutorial. You should go through and consider what filters you want to be applying for your audience or your products. We just covered how to add a checkout event, how to add the delay, and how to add the email template. That’s the most important part that you need to know. Once you're ready to go, all you need to do to make it live is just click on the "Review" and "Turn On" button in the top right here. You want to change this flow status from draft to live, so just click on "Live."

Once you're happy with that, just go ahead and click on "Save." That’s going to make the flow status live. I'm just going to leave that as draft for now; I don’t want to make this live, so I'm just going to set it back to draft. But that’s basically it. I hope that's helpful. If you've been wondering how to create abandoned cart emails that are custom and design those in Figma to then export into Klaviyo and use in any kind of cart flow or abandoned cart trigger in Klaviyo, you can experiment with the kinds of flows that you want to design.

This is the most basic one you could possibly come up with, but again, I just wanted to simplify it to show you exactly how it works and then how to set that custom HTML template using the template that we just uploaded from Emailify in Figma. We'll leave it there for today. This has been a really highly requested video, so hopefully that's helpful. If you've been wondering how to create custom HTML templates for Klaviyo abandoned carts or other kinds of dynamic cart triggers in your Klaviyo emails, hopefully, this gives you a little bit of a head start.

If you do need more advanced help, I’d highly recommend either getting in touch with your Klaviyo support rep, or if you've got a dedicated developer on your team, hopefully, you can reach out to them if you want to tweak any of this content here to make it a bit more personalized. But this should at least give you the base or starter component for you to work from and customize to get a kind of minimum version working for your abandoned cart flow custom templates in Klaviyo.

We'll leave it there for today. Thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to import PowerPoint (.pptx) to Figma Slides using Pitchdeck
date: 2024-10-06T00:00:00.000Z
---

# How to import PowerPoint (.pptx) to Figma Slides using Pitchdeck



#### Video Transcript

Today I'm going to be showing you a quick tutorial on how to import your presentations from PowerPoint into Figma Slides using the Pitchdeck Figma plugin. 

To get started, all we're going to do is go to our Figma app, and then we're going to switch to a brand new Figma design file. We're going to come back to Figma Slides in a moment, and we're going to go to a regular Figma design file over here.

What you want to do is go to the "Resources" icon and search for Pitchcheck. Under the "Plugins" tab, if you find the Pitchcheck item, you can click on that and then run the Figma plugin by either clicking on this run button here or, I'd recommend clicking on this save icon here to save it to your plugins list for easy access later. I've already saved it to my plugins list, so I'm just going to go to my Figma design file canvas, right-click anywhere, go down to "Plugins," then go down to "Saved plugins," and click on the Pitchcheck item. That’s just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is it helps you to create presentations from Figma frames in your Figma file. Today, we're going to be using the import PowerPoint feature to automatically import .pptx files into Figma, which we can then import into our Figma Slides file in a moment. All you need to do is have an existing PowerPoint file. I've got a couple here that I'm going to show you as an example. I've got this basic one that just comes with PowerPoint, and then I've got a more visually interesting one over here. We're going to import both of these from PowerPoint into Figma Slides using the Figma plugin.

If you go back to your Figma file, you can see there's this "Import .pptx" button over here. You can either click on that and browse for your file, or if you've got it on your desktop or computer locally, you can just drag and drop that easily into this little drop zone area here. If you drop it into that area, you can see it's going to automatically import those slides from PowerPoint into our Figma file. It just imported those seven slides, and we can see that's all looking really good. These are all editable layers, so you can see if we zoom in here that these are real text layers that we can modify. You can see here that the elements are all individual and can be moved around as you'd expect.

Now that we've got the PowerPoint file imported into Figma, the only step we need to do now is select all those frames. I'm just going to do Command A or Control A if you're on Windows. Once you've selected all of your frames that we just imported from PowerPoint, go ahead and right-click those and then click on the copy button. Just click copy, and then we're going to switch back into the Figma Slides file. I've got a new Figma Slides file open over here, and we're going to click on the start from scratch button. We're not going to load any templates; we're just going to start from scratch and click on that.

Then, you just want to make sure that you're in the list view. There's a list view and a grid view. It should be in list view like this by default, but if it's not, just make sure that's selected. Underneath the first frame down here, we're going to click in the sidebar, right-click, and then click on paste. We're going to click paste, and you can see that's automatically imported our frames that we just imported from PowerPoint and then copied from Figma into the Figma Slides UI. You can see we've got all of the Figma Slides now loading up those frames. Again, these are all editable, so you can edit this content in Figma Slides. All of that is real text and real images. You can move these around; you can replace them. If you want to swap out the images, you can do that over here as you'd expect.

That’s all looking really good. It just means that we can now play around with these PowerPoint slides in the Figma Slides interface without having to worry about all of the annoyances that come with PowerPoint. You get all the benefits of using Figma Slides, all of the nice UI over here that we can play around with and update our slides and content with. Then, you can also present this with Figma Slides or do any other kind of presentation method that you want to use with the Figma Slides UI.

Now that we've got that first one imported, I'll show you one more example just to iterate the point home. You can again use this "Import .pptx" button down here and either click on that or just drag and drop your .pptx file down into that little drop zone area and let go. Once you do that, it's going to open up that PowerPoint file, import those PowerPoint slides into Figma, and let you automatically copy and paste those into a new Figma Slides file. We'll do that in a moment. Again, you can see here it just finished importing all of those new slides from the other PowerPoint file that we just imported into our Figma file.

You can see that these are all editable; we can modify these. This is all rich text and interactive with all of the individual elements. I'm just going to copy all of these, so just select all and then right-click copy. I'm going to create a brand new Figma Slides file. I'm just going to go to my Figma icon, go to file, then click on new slide deck. That's going to open up a brand new Figma Slides file. One more time, I'm just going to click on the start from scratch button to insert a blank slide. Again, just make sure that the list view is selected. Go down into the list on the sidebar here, right-click that, and click on paste. That's going to automatically paste in those slides that we just imported from PowerPoint into Figma, and these are now available in the Figma Slides file instantly.

Again, you can see that these are all editable. We can update this copy, we can move images around, we can replace images if we want to using the image replacement feature over here, and of course, you can rearrange slides as you'd expect. You can view those in the grid view if you want to see them all at one go. You're basically just taking an existing PowerPoint file, importing those slides from PowerPoint into Figma Slides over here, and then it's up to you how you use the Figma Slides UI to improve or keep working on that presentation.

Yeah, that's basically it. I just wanted to show you a really quick Figma tutorial on how to automatically import files from PowerPoint into Figma Slides. If you're using Figma Slides and enjoy the interface but don't like the idea of manually recreating your existing presentations from PowerPoint, which is sadly just a reality that PowerPoint is still a very popular presentation tool that a lot of companies need. If you're forced to work on presentations in PowerPoint, that can then be imported into Figma Slides using the Pitchcheck Figma plugin's PowerPoint import feature. This is going to be a really handy way of automating that process.

You can see it's still in BETA, so there might be some hiccups here and there with layer positioning and small things like that, but those will improve over time. Hopefully, the amount of time it saves already is going to be really big compared to manually importing those PowerPoint files into Figma Slides. We'll leave it there for today. Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to import Google Slides to Figma Slides using Pitchdeck
date: 2024-10-05T00:00:00.000Z
---

# How to import Google Slides to Figma Slides using Pitchdeck



#### Video Transcript

Today, I'm going to be showing you a quick tutorial on how to import your presentations from Google Slides to Figma Slides using the Pitchdeck Figma plugin. 

To get started, all we need to do is go to our Figma app, and we're just going to open up a brand new Figma design file. We're going to come back to the Figma Slides file in a moment, but first, we need to open a new Figma design file—just a regular Figma file.

What we want to do is go to the "Resources" icon and search for Pitchdeck. Under the "Plugins" tab, if you find the Pitchdeck item, just click on that. Then, you can run the Figma plugin by either clicking on this "Run" button here, or I'd recommend clicking on this little "Save" icon here. That will let you save the Figma plugin to your plugins list for easy access later.

I've already bookmarked or saved the Figma plugin, so I'm just going to go to my Figma design file canvas. Just right-click anywhere, then go down to "Plugins," then go down to "Saved plugins," and click on the Pitchdeck item. That’s going to run the Figma plugin that we saved a second ago. If you're new to the Figma plugin, the way that it works is it basically takes any Figma frames on your file and helps you turn those into presentations. For today, we're just going to be focusing on one feature of the Figma plugin, which is importing .pptx files—PowerPoint files that we're going to export from Google Slides and then import into our Figma Slides file. I'll show you how to do that now.

All you need to do is, with the Figma plugin open, go to Google Slides. First of all, export your slides as a .pptx file. You can do that by going to "File" in Google Slides, then going down to "Download," and clicking on the Microsoft PowerPoint .pptx option. Just go ahead and click on that option, and that's going to automatically download your Google Slides file to a .pptx file on your computer, which we can then import into Figma.

I've already downloaded the file to my computer, so all I'm going to do is drag and drop that file. Grab the .pptx file you just downloaded from Google Slides and drag and drop it into this little import .pptx drop zone in the Figma plugin. When you do that, it's going to automatically open up that .pptx file and import all of those slides automatically into our Figma file.

Once that finishes up, you can see here that our images, text, and slides have all been imported from Google Slides. These are all real layers that we can now interact with and edit inside of Figma. Now that we've got our Google Slides imported into Figma, what we want to do is just do one extra small step and highlight all of these frames in our Figma file. I'm just going to push Command A, or you can use Control A if you're on Windows. Once you've got all your Figma frames selected that we just imported from Google Slides, just right-click those frames and then click on the copy button.

Now, we can go back to our Figma Slides file. We're going to switch over to this Figma Slides tab and click on the "Start from scratch" option. Just go ahead and click on "Start from scratch" to add a blank slide. We're going to click on that option now, and you want to make sure that you're in list view. There’s list view and grid view in Figma Slides. To import these Google Slides into Figma Slides, we want to make sure we're on the list view panel here.

In the sidebar on the left-hand side, just right-click anywhere there, and we're going to click on paste. Click on paste, and that's going to automatically paste our Google Slide that we just imported into our Figma Slides file. You can see now that all of these slides that we just imported from Google Slides are now available inside of Figma Slides as editable layers. We can edit these text layers, move these images around, and edit them. On the right-hand side here, we can swap out images if we'd like. You can change things like overlay and things like that, and this is looking really good.

We can also see all those at once just by switching into grid view, which will automatically give you a grid view of the slides that we just imported from Google Slides into Figma Slides. You get the benefit of working in Figma Slides without having the design limitations that come with Google Slides. I’ll do a couple more examples just to show you what this looks like. We'll import two more decks. This one is a bigger slide deck in Google Slides. Again, we're just going to go to "File," then "Download," and select Microsoft PowerPoint. Once that downloads to your computer, just switch back into the Pitchdeck Figma plugin.

You can see down here in the bottom left, we have the import .pptx option that we had before, and we're just going to drag and drop that .pptx file we just saved into that little drop zone in the bottom left. That's going to automatically load up those frames again and import all of the slides from Google Slides into our Figma file. It's going to create a brand new page. You can see on the left-hand side here that each time you import a new .pptx file from Google Slides, it's going to create a new Figma page for that deck just to keep it nice and separated.

Once that finishes loading, we’ve just imported 21 slides. You can see all of those 21 slides have been imported from our Google Slides file over here into our Figma file. Once again, we're just going to select all of those frames. Go ahead and push Command A, or again, Control A if you're on Windows. We’re just going to copy those by right-clicking all those frames, clicking on copy, and we're going to open up a brand new Figma slide file just by going to the Figma menu, going to "File," and then going to "New slide deck." That’s going to open up a brand new Figma Slides file.

Once again, we're going to click on the "Start from scratch" button. Again, make sure that’s in list view. You can see the list on the side here. Just go ahead and click anywhere in that empty side panel and click on paste. Once again, that's going to import all of those Google Slides into our Figma Slides UI. Again, these are all editable layers. You can modify these in the Figma Slides UI. You can edit the copy and change the styling if you want.

So, that’s looking really good. Again, you can get an overview of all the slides we just imported from Google Slides in the Figma Slides grid view as well. That’s just a nice overview and makes it a bit easier to do things like rearrange slides or make any other additions or content changes that you want to make inside of the Figma Slides UI. I’ll do one more final example, and then we’ll finish up. Just to give you one more variant on the design, this one has some more interesting graphics and things like that, so we’ll import that one too.

Finally, we'll just do this last file from Google Slides. Again, go to "File," go down to "Download," and then select .pptx or Microsoft PowerPoint. Once that downloads to your computer, we can import that directly into our Figma plugin again. Just go down here on the left-hand side, drag and drop that exported .pptx file from Google Slides into our Figma plugin. Again, that’s going to load up all of those slides from the Google Slides export into Figma. Once that finishes loading, we’ll be able to copy those into Figma Slides.

You can see it’s just imported those 10 slides. It’s worth noting that this is currently in BETA, so you’ll notice there are very small things that might be off. You can see here in the headline on the first slide that, for some reason, it’s not getting that correct font sizing. For example, that’s one thing that you might just have to manually change in your Figma design before you copy that into Figma Slides. These should be very minor things that you may have to tweak, so just keep an eye out for that. Hopefully, it will import fairly accurately from your Google Slides designs.

Anyway, we'll just copy all of these one more time. Again, just select all of those frames, right-click, go to copy, and then again, we're going to spin up a brand new Figma Slides file. Just go to "File," then "New slide deck," and that’s going to open up a new Figma Slides file. Finally, just click on "Start from scratch" again, make sure you're in list view, and then on the side panel, just right-click anywhere, click on paste. That’s going to drop in all of those slides that we just imported from Google Slides into our Figma Slides file.

That’s basically what that looks like. You can see all of the graphics have been imported, and these are all editable layers. You can change these and move these, so you can change things like color, font styles, and content. This is all editable inside of Figma Slides. That’s basically it. I just wanted to show you a quick rundown of how to automatically import those Google Slides into Figma Slides if you don’t want to manually recreate them using the Figma Slides UI.

The Figma Slides UI is really nice to work with compared to Google Slides, but being mindful that sometimes you just have to work with designs that have already been created in Google Slides, and you want to import those into Figma Slides to have that interoperability where you can kind of go back and forth between them. That’s basically it; we’ll leave it there for today. I hope that’s helpful. If you’ve been wondering how to automatically import your Google Slides into Figma Slides, you can now do that using the Pitchdeck Figma plugin, as we’ve just seen in this video. Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export Figma Slides to PowerPoint (.pptx) using Pitchdeck
date: 2024-10-03T00:00:00.000Z
---

# How to export Figma Slides to PowerPoint (.pptx) using Pitchdeck



#### Video Transcript

Today I'm going to be showing you a quick tutorial on how to export your designs from Figma Slides to PowerPoint using the Pitchdeck Figma plugin. 

To get started, all we need to do is go to our Figma app. What you want to do is open up a brand new Figma design file. Instead of the Figma Slides file, which we're going to look at in a second, open up a normal Figma design file. Then, go to the "Resources" icon and search for Pitchdeck. Under the "Plugins" tab, click on the Pitchdeck item. You can run the Figma plugin by either clicking on this "Run" button here, or I'd recommend clicking on this little "Save" icon. This will allow us to run the Figma plugin from our saved Figma plugins list.

I've already clicked on the "Save" icon, so I'm just going to go to my Figma plugins list by right-clicking anywhere, going down to "Plugins," and then down to "Saved plugins." I'll click on Pitchdeck, and that will run the Figma plugin that we saved a second ago. If you're new to the Figma plugin, the way it works is it helps you turn Figma frames into presentations automatically, including exporting them to PowerPoint, which we're going to do today.

Now that we've got the plugin saved and running, we can go back to our Figma Slides file. We're just going to add a brand new slide deck because I don't have one designed already. You might already have your own, so you can use that one today. I'm just going to use this dark slides template, so I'll click on "View Template" and then "Add All Slides." This will automatically add all of the slides to my Figma Slides file.

By default, you might see the view looking like this, with all the slides listed on the left. For today's purposes, we want to go to the grid view. Go up to the top left and click on "Grid View." This will change the view to allow us to see all of our frames at once.

What you want to do is select all of the frames that you want to export from Figma Slides to PowerPoint, and we're going to copy those to our clipboard. In this case, I'll use the first row as an example; you would obviously use all of the slides you want. If you want all of the slides selected in one go, click on Command + A or highlight all of those slides. You can copy them to your clipboard by right-clicking and then clicking on "Copy." Again, I'm just looking at the first row to simplify it. I'm going to highlight those slides, click on "Copy," and then go back to my Figma design file. I'll paste those slides by right-clicking on my canvas and clicking "Paste" here.

Once you've done that, you can load up those frames by either refreshing the layers with this button here, the refresh layers button, or rerunning the Figma plugin if you've already run it and closed it. I'll click on the refresh layers button now, and that will load up all of my Figma frames from my page into the Pitchdeck Figma plugin. You can see here we've got all of our frames that we just pasted in from Figma Slides into our Figma design file, and those are all looking really good.

What we want to do now is export these to PowerPoint. We'll go to the export button in the top right of the Figma plugin. Go ahead and click on "Export," and then we'll change the presentation export format in this dropdown here to go down to the presentation apps group and just click on the PowerPoint option. You want to make sure that the PowerPoint (.pptx) file is selected, and then you can adjust the settings here as you like. By default, it's going to automatically compress the images, downsize any large image layers, and make the text editable. Those are the default options, but you can change these however you like.

I'll go ahead and click on "Export for PowerPoint." This will begin the export process of taking those slides from Figma Slides that we just imported into this Figma design file. It will automatically run through those and create a PowerPoint file. Once that finishes exporting, you'll get a message saying that your PowerPoint file is ready. When that shows up, you can go ahead and click on the "Download your .pptx file" button. I'm just going to click on that now, and you can save that directly to your computer. Just go ahead and save it anywhere. I'm putting it on my desktop for now.

Once you've saved that to your computer, just double-click on the file, and that will open up the file in PowerPoint. You can see here I've got my Figma Slides exported into a real editable PowerPoint file that I can edit. You can see here that the text looks really good. It's worth being mindful of the fonts. If you've got some Google Fonts that your Figma Slides design is using, in this case, we're using the font "Inter," you want to make sure that the Inter font is installed on your computer. Figma Slides is automatically using the Google Fonts version of Inter inside the app.

If you're sending this to a client or using it on your own computer, ensure that the exact same font name is installed on your computer. That will ensure that the correct font loads up in your PowerPoint file too. But that's looking really good. You can see that we can edit this content. It's a real PowerPoint file created from the design we had in our Figma Slides file.

We're basically exporting these designs from Figma Slides into this real PowerPoint file. This allows you to have a bit more flexibility with how you share your Figma Slides design. If you're working with clients or stakeholders who need it in PowerPoint for any reason, this will give you the flexibility of designing it with the benefits of the Figma Slides interface, and then automatically exporting that through Pitchdeck into an editable PowerPoint file.

You can see here all of the slides have been exported as expected, and you can modify and edit all of this content as needed. I'll show you one more example just to add a bit more flexibility to the designs. If you go back to Figma Slides and create a new file, in this case, I'll go to "File," then "New Slide Deck." This will load up a new Figma Slides file. Again, I'm not going to use a pre-designed template; I'm just going to use one of these built-in templates here. I'll click on "View Template." Once that loads, go ahead and click on "Add All Slides."

I'm clicking on that "Add All Slides" button now, and you can see that's just generated all of the slides from that template. Again, ensure that you're in the grid view so you can see all of the slides that you want to export from Figma Slides into another PowerPoint file. I've got the grid view already selected at the top here instead of the slide view.

You want to make sure you're in Grid View, and that will allow you to quickly select all of those slides. Again, I'm just going to select some of these on the top row to give a quick example. I’ll select the first 12 and click on the copy button by right-clicking and then going to "Copy." Again, we're going back to our Figma design file, jumping out of Figma Slides back into a normal Figma design file. In this case, I'm going to create a brand new page in the same file, and then I'll paste those in by right-clicking anywhere and clicking "Paste" here.

Once you've done that, you can either reload the layers by clicking on the refresh icon or refresh layers button here again, or if you've already closed the Figma plugin, you can simply rerun it. This will automatically load up those frames directly into the Figma plugin. You can see here that it's loaded up those 12 frames, so all of those slides we just copied from Figma Slides into our normal Figma design file are looking really good.

Now that we've got those imported into Figma, all we need to do again is click on the export button up here. You can play around with these settings. If you want things like retina images, you can enable those kinds of settings and play around with all of these options here. I'm going to leave most of these as standard and click on "Export for PowerPoint." One more time, this will run through all of the slides in our Figma design and export them all to a PowerPoint file.

You can see here our PowerPoint file is ready again, so we're going to download your .pptx file. I'm going to save that directly to my desktop and open that one up. I'm just going to double-click on that. The thing I wanted to point out here is that you'll notice that the font up here is a little bit out of alignment with our Figma design over here, and I'll show you why that is.

If we jump into the text area, double-click on that item, you can see that the height of that text area is actually extending outside of its bounds. The height of the layer is about 230, but the text area, or the text kind of highlighting where we've got the little cursor, is extending outside of that. This is pushing the font size down a little bit or the font position down a little bit.

There are a couple of options. You can modify things like the line height to adjust that manually, or you can just edit that in the PowerPoint file itself and shift those down. For example, we could highlight that, shift it into the correct position, and that solves the issue. Again, this is more of an edge case; you're not going to run into this with most fonts, but some typefaces do have that offset that might change some of the positioning.

You can see the other layers are looking quite good. The font is editable. You have to make sure that you've got the actual font installed. In this case, the "Dangrek" font is installed locally on my computer, which is why I'm able to edit this font visually. If you don't have the correct font installed, it will fall back to a different font. If you're wondering why the fonts aren't aligned, ensure you're installing the exact font used in the Figma file from our Figma Slides file, which are typically Google Fonts.

You're pretty much always using Google Fonts unless you've got your own custom font installed that you're using for your Figma Slides. Anyway, that's basically it. I wanted to run through a couple of quick examples of how you can automatically take your designs from a Figma Slides file and get those into a PowerPoint file just by exporting them via the Pitchdeck Figma plugin.

A last note: the reason the slides are imported into a normal design file is that currently, Figma Slides doesn't support Figma plugins. I suspect they might support Figma plugins in the future, but in the meantime, if you're really keen on using the Figma Slides app or the Figma Slides product and still need to get those designs into a PowerPoint file, jumping into a normal Figma file and exporting them via the Pitchdeck Figma plugin is a really simple way to go about it.

With only that minimal step of copying your slides out of Figma Slides and then exporting them to PowerPoint via the Pitchdeck Figma plugin, I’ll leave it there for today. Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export Figma Slides to Google Slides using Pitchdeck
date: 2024-10-02T00:00:00.000Z
---

# How to export Figma Slides to Google Slides using Pitchdeck



#### Video Transcript

Today, I'm going to be showing you a tutorial on how to export your designs from Figma Slides to Google Slides using the Pitchdeck Figma plugin. 

To get started, we're going to switch out from our Figma Slides file here into a regular Figma design file. I'm just going to go to my regular Figma design file over here.

What you want to do is go to the "Resources" icon and search for Pitchdeck. Under the "Plugins" tab, if you click on the Pitchdeck result, you can run that Figma plugin by either clicking on the "Run" button here, or I recommend clicking on this little "Save" icon here to save it to your plugins list for easy access later. I've already clicked on the save icon here, so I'm just going to go to my Figma design file canvas, right-click anywhere, go down to "Plugins," then go down to "Saved plugins," and click on the Pitchdeck item. That's just going to run the Figma plugin we saved a second ago.

If you're new to the plugin, the way that it works is it loads in Figma frames that you can then turn into presentations or export to PowerPoint, Keynote, or Google Slides. What we're going to do now is switch back into our Figma Slides file, and I'm just going to create a Figma Slides deck. I'm going to grab one of these templates, click on "View template," and I'm just going to click on the "Add all slides" button. That's just going to spin up a new Figma design in our Figma Slides file with all of these predefined slide templates.

We want to make sure first that we're on the grid view, which we are at the moment. By default, it'll probably be in this list view, which makes it a bit harder to see all your slides at once. Just make sure you click on this little grid view at the top left here and swap into your grid view like we have on our screen right now.

What you want to do now is select all the slides you want to export from Figma Slides to Google Slides. In this case, I'm just going to grab the first dozen slides as an example. You can select all of those slides if you want to export the entire deck, but for now, I'm just going to do this as a quick demo. I've just selected those dozen slides, and then I'm going to right-click on those slides, click on the copy button, and then swap back over to my Figma designs file.

Back to the normal Figma file over here, and what I'm going to do is just right-click on my Figma design canvas and then click "Paste" here. That's just going to copy and paste all of the slides from our Figma Slides file over here that we selected and paste them into a regular Figma design file. Once we've pasted in those frames, we want to go ahead and click on the refresh layers button in the Pitchdeck Figma plugin. Alternatively, you can just rerun the Figma plugin, and it will automatically detect all of the frames on the page. But that's another quick way you can go about it.

You can see here that we've got all of our slides now loaded into the Pitchdeck Figma plugin that we exported from Figma Slides over here. Now we can go ahead and export these into Google Slides. The way we do that is just by clicking on the export button in the top right of the plugin, and then we want to change the presentation export format option in this dropdown to Google Slides. Go ahead and click on the Google Slides option, and in brackets, it's got the pptx file because we're going to be exporting this to a pptx file and then importing it into Google Slides in a moment.

You can toggle some of these settings if you want to change things like making the retina images. If you want to have really crisp images, you can make those 2x retina. You can toggle the compression settings. You can make sure that the editable text toggle is enabled, which it is by default, if you want to ensure this text is editable in Google Slides. I'm happy with all of those options, so I'm going to click on the export for Google Slides button. This is going to run through all of our slides and create a pptx file that we can then import into Google Slides.

I'm going to click on the download your pptx file button, and that's going to save it directly to your computer. I'm just going to save that to my desktop and click on save. Now that we've saved that file, we can go to our browser and open up a brand new Google Slides presentation. I've just got a brand new Google Slides file, and what I'm going to do now is go to the file button in the top left here. I'm going to click on import slides, then I'm going to click upload.

Make sure the upload tab is selected, and then what we want to do is just drag and drop our pptx file that we just exported from Figma into the Google Slides upload window here. That's just going to upload the file that we exported from Figma Slides into a pptx file and import those slides into Google Slides. Once that loads up, just go ahead and click on select all slides. That will automatically select all the slides in your file, and you can uncheck the keep original theme; we don't really need that checked. Then click on the import slides button. That's basically going to run through all of the slides in the file we just exported from Figma and import those into Google Slides.

You can see here that it's gone through and imported all of those slides directly into Google Slides, and these are editable slides. You can see here that the text can be modified, and all of the font settings have been maintained. We have the Inter font selected, and that's at size 14, which is exactly the same as we had in our Figma Slides design over here. If we jump back into Figma Slides, you can see that if we inspect these elements, you'll notice that we're using the Inter font, and the sizing is exactly the same as what we can see over here in Google Slides.

That's looking really good, and that also means we can move these layers around as well. You can move those around if you need to, same with these image layers; you can move those around as needed and resize them or delete them. But that's basically what that looks like there. That's basically what it looks like to export your layers from Figma Slides into Google Slides.

I'll show you one more quick example just to give you a bit of variety. What we can do is go back to our Figma file, and I'm just going to create a brand new Figma Slides file. Just click on file, then new slide deck, and this is going to open a brand new Figma Slides file again. I'm just going to select another deck here. I'm just going to select this agency Pitchdeck, click on view template, and then I'm just going to click add all slides.

Now that we've added those slides, again we're just going to make sure we're in the grid view, and we're going to copy all of these. I'm just going to do Command A, or you can do Control A if you're on Windows, to select all. You can see all the slides in Figma Slides are selected. I'm just going to right-click those, click on copy, go back to my Figma file, and I'm going to create a brand new page. Just go ahead and click on the new page button.

Again, I'm just going to right-click on my Figma design canvas, click paste here, and that's pasted in all of the slides from our Figma Slides. Again, we're going to refresh those layers, load them up in the Pitchdeck Figma plugin, and now we're going to click on export again. We've already got our settings saved to Google Slides, so go ahead and click on export for Google Slides again. Once again, that's just going to run through all of the slides from your Figma Slides file, and then you can click on the download your pptx file again. Save it to your desktop or wherever you like, and then in Google Slides again, you can just create a new presentation and we're going to import those slides into this new presentation.

Once again, just go to file, import slides, click on the upload tab, then drag and drop the pptx file you just exported from Figma into Google Slides. Once that finishes uploading, you should be greeted with the slide selection frame again. You can see here under import slides, it's loading up previews of all those slides for us to import. One more time, I'm just going to click on select all slides, make sure those are all selected, then I'm just going to uncheck keep original theme and click on import slides.

Again, that's going to run through all of those slides and import them directly into my Google Slides file. You can see that all of the fonts have been taken care of automatically. Because we're using Google Slides in this case, the cool thing about it is that Figma Slides also often uses Google Fonts as its default fonts for a lot of these templates. Any Google Fonts that are being used in Figma Slides are automatically going to get included and loaded up in Google Slides because Google Slides also automatically loads in all of the Google Fonts in the same way that Figma Slides does.

You can see that's looking really good. The fonts have all been swapped in; we can edit that text as you'd expect and move that around if you need to. Again, we can run through all of these and see that all of the content has been imported as we would expect from our original Figma Slides file.

Yeah, that's looking really good. Again, mindful that sometimes designing in Figma Slides is going to be way better than designing it from scratch in Google Slides. But there's also the use case where you just do need the output to be in Google Slides sometimes. This is a really quick and efficient way of taking any slides that you've designed in the new Figma Slides format and dropping those into the Pitchdeck Figma plugin and exporting that out to Google Slides.

You can basically go from Figma Slides to Google Slides in a number of clicks, and hopefully that helps your workflow if you are a Figma Slides user who also likes exporting things to Google Slides for stakeholders or clients that just need it in that format. Hopefully, this removes a bit of that headache of manual work transferring those designs from Figma Slides into Google Slides each time layer by layer.

I'll keep it pretty simple and leave it there for today. I just wanted to show you a couple of examples of how to quickly get your Figma Slides out into Google Slides automatically. As always, thank you for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export Figma Slides to Keynote using Pitchdeck
date: 2024-10-01T00:00:00.000Z
---

# How to export Figma Slides to Keynote using Pitchdeck



#### Video Transcript

Today, I'm going to be showing you a quick tutorial on how to export your designs from Figma Slides to Keynote using the Pitchdeck Figma plugin. 

To get started, all we need to do is go to our Figma app and open up a brand new Figma design file. Instead of a Figma Slides file, which we'll come back to in a second, you want to open up a brand new normal Figma file. Then, go to the "Resources" icon and search for Pitchdeck. Under the "Plugins" tab, if you click on the Pitchdeck item, you can run the Figma plugin by either clicking on the "Run" button here or, I'd recommend clicking on the "Save" icon to add it to your bookmarks for easy access later.

I've already clicked on that little save icon, so I'm just going to go to my Figma design file canvas, right-click anywhere, go down to "Plugins," then to "Saved plugins," and click on the Pitchdeck item. That's just going to run the Figma plugin we saved a second ago. Now that we've got that loaded up, we can go back to our Figma Slides file. I have a brand new Figma Slides file open without any design in it already. What I'm going to do is spin up a brand new template by clicking on the View template button for this one here. Then, I'm just going to click on the add all slides button, and that's just going to add all of these slides to a brand new Figma Slides deck or template for me.

By default, it will display all the slides in this kind of list view. However, to make this a bit easier, we want to switch over to the grid view. In the top left of your Figma Slides panel, go ahead and click on the grid view icon. That'll give you a quick overview of all your Figma Slides in one go. In this example, I'm just going to export a handful of these slides to show you how to export them to Keynote. I'm going to grab the top row, but you're welcome to select your entire deck if you want to export all of your slides. I'm just going to select the first dozen or so, and with those highlighted, I'm going to right-click them and then click on the copy button. Just right-click and then click copy.

Now, we want to go back to our normal Figma design file. Just swap back over to the Figma file we created before, and we're going to paste those into the design by right-clicking on the Figma design file canvas and clicking paste here. You can see that's grabbed all of those slides from our Figma Slides file and pasted them into our regular Figma file here with all of those layers intact. Now that we've got those loaded up, you can refresh the frames in your Figma plugin. Just go ahead and click on that refresh frames button, or you can rerun the Figma plugin now that we have those frames in here.

The way that the Figma plugin works is it basically looks for any Figma frames on the current page and treats those as slides in the Figma plugin. Now that we've got all of those loaded up, we can export these Figma Slides to a Keynote file by going to the export button in the Pitchdeck Figma plugin. Click on this blue export button over here, and we want to change the export format drop-down to the presentation apps group. We want to select the Keynote option, so go ahead and click on Keynote, which has "pptx" file in brackets. That's correct.

You can change any of these options down here. If you want to tweak some of these things, like adding Retina images, or turning compression on or off, things like that, and adding editable texts, which is enabled by default, you can change those however you like. Now that I've got all my settings toggled, I can click on the export for Keynote button. I'm just going to click on that now, and that's going to automatically export all of my Figma Slides that we just imported into a Keynote "pptx" file.

Now that I've just finished exporting that, I'm going to click on download your "pptx" file and save that directly to my computer. That's just going to save it to my desktop. I'm going to click on Save, and then what you want to do is go to the file, right-click it, go down to open with, and click on the Keynote option. Just go ahead and click on Keynote, and that's going to open up the "pptx" file with the Keynote app if you're on Mac. You can see here it's just opened up the Keynote app, and we've got all of our slides looking really good.

All of the slides that we designed or had from the template in Figma Slides are visible. We can switch to the list view to make that look a little bit easier. If we go to Keynote, you can see those basically match up as you'd expect. These are basically one-for-one with the original Figma design, but we're now editing these natively in the Apple Keynote presentation app. This is really handy if you need to send a design created in Figma Slides to someone who's using Keynote. If they want to make copy changes or text changes in the Keynote app instead, they can definitely do that.

You can move elements around, so if you need to rearrange things, you can totally do that as you'd expect. This is basically giving you a really quick export from Figma Slides to a native Keynote file or Keynote presentation that you can tweak or present using the Apple Keynote app. That's it! I just wanted to give you a quick tutorial on how to export your designs from Figma Slides to Keynote. This deck here takes those Figma Slides and exports them through the Pitchdeck Figma plugin to be used natively in the Apple Keynote app.

We'll leave it there for today, keeping it really nice and simple. As always, thank you for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to import Google Slides to Figma with one click using Pitchdeck
date: 2024-09-17T00:00:00.000Z
---

# How to import Google Slides to Figma with one click using Pitchdeck



#### Video Transcript

Today, I'm going to be showing you a quick tutorial on how to import Google Slides into Figma automatically using the Pitchdeck Figma plugin. 

To get started, all we need to do is go to our Figma file, click on the little resources icon, and search for "Pitchdeck." Under the "Plugins" tab, click on the Pitchdeck item. You can run the Figma plugin by either clicking on the "Run" button or, as I recommend, clicking on the "Save" icon to save it to your Figma plugins list.

I've already clicked on the save icon, so I'm just going to go to my canvas, right-click anywhere, go down to "Plugins," then go down to "Saved plugins," and click on the Pitchdeck item. That will run the Figma plugin we saved a second ago. Once the Figma plugin loads up, you'll get this empty state of the Figma plugin because we don't have any slides in our current Figma file, which is fine. Normally, you would probably go ahead and start adding some slides or designing your own frames. Today, however, we're going to import slides we've already designed from Google Slides.

You can see here I have a few different slide decks in my Google Slides account. We’re going to import each of these into Figma automatically using the Figma plugin. The way to do that is by giving it a .pptx file from Google Slides. You can import a .pptx file directly into Figma from your computer. To do that from Google Slides, go to your Google Slides file, go to the "File" tab at the top, then go down to the "Download" menu, and click on the Microsoft PowerPoint (.pptx) link. Click on that, and it will automatically download your Google Slides as a .pptx file.

Now that I have that downloaded on my computer, I'm going to go to my desktop, find the "recipe book.pptx" file that we saved from Google Slides, and drag and drop it into the dropzone over here. I'm going to grab the .pptx file from my computer and drop it directly into the dropzone area here in Figma. It will read the file and start importing the slides into Figma.

As you can see, it's imported all eight slides. If we go to our canvas and zoom in a little, you'll notice it's imported each of those slides from our Google Slides file. You can see that these have been imported into individual layers as well. If we zoom in, you'll notice this is an image layer that we can move around. The same goes for the text layer—this is editable text. You can edit that content in Figma, move it around, or add extra content to it.

This process has taken all of our content from Google Slides, exported it to a PowerPoint file, and imported it into Figma. That's how it works. You'll notice that it's mostly looking really good, although there are a few small quirks. For example, when it comes to text layers with mixed lists, things might look a little wonky. This feature is still in beta, as you can see from the "BETA" label in the import PPTX dropzone, but most of these issues will get ironed out over time.

Now, let’s import another deck. We’ve got this "yearbook" Google Slides template that we can import. I’ve already saved that one to my desktop, so again, I'm going to drag and drop the .pptx file into the dropzone. It will load the file and import that one as well. You’ll see the slides are importing, and we get a little progress indicator. Once that finishes, it automatically switches to a brand new page in our Figma file.

Each time we import a .pptx file from Google Slides, we get a new page in our Figma file. You can see that this one has been imported as well. Again, all of these layers are editable. The text layers are editable, so we can change the content as needed, move the layers around, and adjust things as expected. The images are all individual image layers, and that’s looking great. This process saves a lot of time. Instead of manually recreating a file from Google Slides, we’re able to import it directly into the Figma plugin.

Let’s do one more to show you a larger deck. We have this deck here with a couple of dozen slides. I’m just going to click on the "Import .pptx" button—you can also browse your computer, but I'll drag and drop since I already have the desktop window open. I'm going to drag and drop this last .pptx file from Google Slides, and import that one as well. You’ll see it importing those 21 slides into Figma. Depending on how big your deck is, how many images and layers it has, that will determine how long it takes to import, but overall, it should only take about 30 seconds for most files.

There we go—it’s imported our 21 slides into Figma. Again, all of these are editable. You can edit the text, move the layers around, and everything is now editable Figma layers. This is still in beta, so there may be a few things that aren’t 100% right. However, it's a great head start, allowing you to get all that content and those layers in there. If you need to make any small tweaks, this process will still be much faster than manually recreating every single layer from scratch from your Google Slides in Figma.

This method gives you a lot more flexibility. If you want to re-export this into a PowerPoint file for PowerPoint, Keynote, or Google Slides, you can do that by clicking on the "Export" button, changing the export format to PowerPoint, Keynote, or Google Slides. That will give you a .pptx file from Figma that you can reuse in another application as well.

That's basically it! I just wanted to show you how to import your Google Slides into Figma as individual editable layers automatically. You can now experiment with the "Import .pptx" feature, which is still in beta but improving over time. If you're interested in importing your slides from Google Slides automatically and still need to use that software with your team but prefer editing the content in Figma, this process will hopefully improve your workflow speed by automating part of it.

Thank you, as always, for watching, and we'll be back soon with more Figma tutorials like this one.

---

---
type: tutorial
title: How to add bleed and crop marks to PDF exports from Figma using TinyImage
date: 2024-09-07T00:00:00.000Z
---

# How to add bleed and crop marks to PDF exports from Figma using TinyImage



#### Video Transcript

Today I'm going to be showing you a quick tutorial on how to automatically add bleed and crop marks to your PDF exports with one click from Figma using the TinyImage Figma plugin. 

If you're new to this concept, bleed and crop marks are basically used for printing documents. If you're sending a design to a printer, they always require this little bit of extra, a few millimeters on the edges here, and these trim marks to basically add a bit of buffer so that when they cut the design to the correct size, it doesn't leave white space at the edges.

We're basically going to be extending our original design by a few millimeters externally based on the original dimensions and automatically add these trim lines so that the printer knows where to cut it, and you won't end up with these white areas at the edges there. Now that we've finished that quick 20-second primer of what bleed and crop marks are, I'm going to show you a few examples of doing this automatically in Figma.

I've got this business card design here that I want to export to a PDF, and we're going to first open up the TinyImage Figma plugin. All you need to do is go to your Figma file, click on the little resources icon at the top here, and then if you search for TinyImage, under the "Plugins" tab, if you click on the TinyImage result, you can run that Figma plugin by clicking on this "Run" button here. Or you can click on this little bookmark icon to save it to your Figma plugins list for easy access.

I've already clicked on that save icon, so I'm just going to go to my canvas, right-click anywhere, go down to "Plugins," then go down to "Saved plugins," and click on the TinyImage Figma plugin, and that's just going to run the Figma plugin we saved a second ago.

To export these frames to a PDF, what we can do is click on this little "Create PDF" button in the top of the plugin header, and that's going to automatically fetch all of the frames on our current page. These are all the top-level Figma frames, and you can select which ones you want to include in the PDF. You can rearrange those based on different orders, so you can do it by column, you can do it by rows, you can do it by layer order, or manually rearrange them in the UI as well. But for today, I'm just going to keep it really simple and just do it by rows.

Once you've got that set up, all you need to then do is configure your options down here. You can select the DPI; if you're doing it for print, you probably want to go to 300 DPI, but you can change that to whatever you like and customize anything down here as well. If you like, you can change this to CMYK, for example, so we can do that. And then what you want to do is just enable this toggle down here that says "Add Bleed."

We're going to enable the "Add Bleed" toggle, and by default, that's going to add 3 millimeters of bleed, which we just looked at before. This is this red area here, and that's going to automatically add that 3-millimeter buffer or bleed to our design. You can customize this, so if you need it to be 5 millimeters or 2 millimeters, you can change that, but the typical use case is about 3 millimeters, so we're just going to leave that as three.

And then you've got the option, which is turned on by default, of including the crop marks. Those are these little lines here that kind of intersect at the top of each of the corners, and that will just give the printer the lines for it to use, essentially, a guillotine to slice that to the original document dimensions. That's going to crop off this bleed area and just leave you with this inner area here.

I'll show you what that looks like now. We're going to export that by clicking on the "Export PDF" button in the Figma plugin, and that's just going to go through and export those four Figma frames to a new PDF and automatically add that bleed and crop area to our PDF export. I'm just going to save that to my desktop, and you can open that in whatever PDF reader you like. I'm just going to open this up in the Mac Preview for now, and you can see it's automatically added our crop marks to each of those pages in the PDF.

What that's essentially done is it has stretched the PDF to the original dimensions, which are here, and it's added 3 millimeters around that edge, and it's extended the design outside of that as well by those 3 millimeters. Then, it's included those crop marks so that the printer knows where to crop it. Essentially, this area where these crop marks intersect is the original dimensions of your Figma frame here, and the frame has essentially got an extra 3 millimeters, as you can see in these corners here, added to the outside. So that when it gets cropped off, it will exclude any of that extra content and give you a nice, clean cut.

That's a really simple example. We've got a few other examples we can try as well. You can see here we've got another one, which is a poster. I'm just going to rerun the Figma plugin here, so we're going to open up TinyImage in this new Figma file, and we're going to do the exact same thing. We're going to go to "Create PDF." This time, we've only got one frame, so that's totally fine. It's just going to give us a PDF with one page on it.

Again, we're going to click on the "Add Bleed" toggle, we're going to keep the crop marks on, and then export that to PDF. Once this is done, I'm just going to save that to my desktop again. And one more time, I'm just going to preview that. You can see here we've got our crop marks, and because this is a much bigger frame—it's not a business card—we can zoom in and see those crop marks. That's still a 3-millimeter edge, but because the design is much bigger, obviously, that relative size appears much smaller when we look at it on the computer. But you can see that it's added those crop marks in.

You can also notice that on this particular design, because it's a different color design in each corner, the Figma plugin is automatically making sure that those crop marks are inverted, so they're always visible in the design. You can see here, because we've got a black background in this section and a white background in this other section, that's automatically being accounted for when it gets created, and it's giving those crop marks the correct contrast. That's what that looks like there.

Finally, I'll just show you one more example of those two things put together. If we click on this last Figma file example, again, I'm just going to rerun the TinyImage Figma plugin. This time we've got a few different files, so we've got a few different designs here, and each of them have a different color background, and they're about 1080 x 1080 pixels, which would translate to some size that's larger than these business cards but smaller than this poster.

I'm just going to export that as a last preview of what this can look like. I'm going to again click on the "Create PDF" button, and then I'm just going to make sure that all of my frames are selected. I've got those selected there. Again, you can rearrange these however you like. You can change the DPI as needed, and again we're just going to click on the "Add Bleed" option. We'll set it to CMYK just for print, and this time maybe we want to do a 5-millimeter bleed, so we can just change that to five.

Keep those crop marks on; if you don't need the crop marks and you just need that extra bleed area, you can obviously turn off the crop marks option, and that will exclude those corner crop marks while leaving that extra bleed around the edges. But we're going to leave the crop marks on and click on "Export PDF."

Once this finishes exporting, we should get a new PDF with five pages, all with the bleed of 5 millimeters included and those crop marks as well. This is just optimizing the pages; it's going to save that so we can add that to our desktop. And if we open up that file, we'll just open it up in Preview, and again, you can see here that the crop marks have been added. We've got a 5-millimeter bleed area, and the crop marks are being included.

That's looking really good. And as I said, the contrast will change based on the background color, so if you've got a darker background or a lighter background, the plugin will automatically make sure that those crop marks are visible, and that's going to make sure that you're not getting invisible crop marks. If you're using a dark background or a light background, it's always going to show up as you would expect. That's looking really good. That's basically giving us our extra bleed area with the background included, so we're going to get a nice clean crop once that gets sent off to the printer, and that's going to look really good with those crop marks included.

That's basically it. If you've been wondering how to automatically add bleed and crop marks to your Figma PDF exports, this is a really quick way of going about it, just with that one click of enabling the "Add Bleed" toggle in the TinyImage Figma plugin. You can customize those millimeters here—you can even go down to, you know, half a millimeter if you really wanted to. But again, 3 millimeters (mm) is pretty standard, so I would probably just leave it at that unless your printer specifies otherwise.

You can also add or remove those crop marks along with the bleed, and don't forget you can set the CMYK color profile if needed, which is super useful for print. This setup is going to get you most of the way there for print-ready PDFs. I hope this has been helpful if you've been wondering how to optimize your PDF exports from Figma for print with CMYK, bleed, and crop marks. Thank you, as always, for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to translate email designs in Figma with the Crowdin API using Emailify
date: 2024-09-05T00:00:00.000Z
---

# How to translate email designs in Figma with the Crowdin API using Emailify



#### Video Transcript

Today I'm going to be showing you a tutorial on how to localize your HTML email designs with the Crowdin platform using the Emailify Figma plugin. To get started, all we need to do is go to our Figma file. If you click on the little "Resources" icon up here and then search for Emailify, under the Figma plugins tab, if you click on the Emailify result, you can run the Figma plugin by either clicking on this "Run" button here, or I'd recommend clicking on the "Save" icon, which will save it to your Figma plugins list for easy access later.

I've already clicked on that save icon, so I'm just going to go to my canvas, right-click anywhere, go down to "Plugins," then go down to "Saved plugins," and click on the Emailify item. That's going to run the Figma plugin we saved a second ago. You can see here that the Figma plugin has just loaded up. If you're new to the Figma plugin, it helps you design HTML emails in Figma, which you can then export to production-ready HTML with one click.

In this case, I just grabbed a template. By default, if you're running an empty Figma file, it'll look like this and ask you to add a new blank Emailify frame. For today's tutorial, I've just gone to the browse Figma templates and grabbed this free Airbnb template, which is Emailify-ready, and duplicated that into my Figma account.

I'm not going to be showing you all of the design features in the Figma plugin today. If you're interested in that, you can check out the documentation site or some of the other YouTube tutorials on the channel. You can go through and add components, which you can totally customize in Figma as you would expect. I'm going to be showing you how to localize this design that already exists, rather than designing it from scratch.

We can see here that we've got our design basically ready to go. If we preview it, we can see the HTML content, and that's all looking really good. Now that we've finished the design, the last step is localizing or translating this text content, and we're going to do that by integrating it with the Crowdin platform.

Crowdin.com is the service we're going to use today. You just need to create an account there. Then, we want to click on the "Create Project" button. If you don't have any projects, just click on "Create Project," or if you want to create a new project, this will take you to the "Create Crowdin Project" screen. I'm going to call this "Airbnb Emailify" and put that in there. We want to make sure this is a private project, and importantly, we want to check the checkbox that says "String-based project." Click that so it's going to work with strings instead of files.

For the source language, our email design is in English, so we're just going to keep that as English. Then in this little list here, you can go through and check your target languages. These are the languages you want to translate your email into. I'm just going to select a couple here for today's example. I'll do Dutch and French. You can add as many as you need. Today, I'll keep it simple and just have these two.

Once you've got that set up, go ahead and click on "Create Project." That's going to create a brand-new Crowdin project under your account. You can see it's created the project successfully. Under the projects list on the left-hand side, you can see we've now got Airbnb Emailify created, and it's ready to go.

Now, we want to go back to the Figma plugin and click on this "Localize" button in the header. Click on "Localize," and we want to change this setting on the left from "Excel" to "Crowdin API." Under the platforms category, just click on the Crowdin API option, and it's going to ask you for your API token. If you click on that API token link, it will bring you to your API token settings page if you're logged into Crowdin.

Under the API heading in the account settings page, we want to go down under "Personal Access Tokens" and click on the "New Token" button. I'm going to call the token "Emailify" so we know what it is. Under Scopes, you basically want to add the permissions that the Figma plugin is going to need to translate and read the content.

We want to go down to the projects section and click on projects. We can just do "Read Only" for that one. Then, go down to translations and set that to "Read and Write," because we want to be able to read and write those from the plugin. For screenshots, set that to "Read and Write" as well, since we're going to upload some screenshots. We want to add the source files and strings with "Read and Write" as well, since these are the main elements we're going to be updating.

Once you've done that, click on the "Create" button. You can see it's generated our new personal access token. You want to save this somewhere safe because you won't be able to see it again under this particular token. Copy that to your clipboard, save it somewhere safe, and paste it into the Figma plugin. I'm just going to paste that into the API token field in the Figma plugin. That's going to automatically authenticate with Crowdin and load up my Crowdin projects.

In the top right of the Figma plugin, there's a select box that allows us to select our project name. If you've got multiple projects, those will all show up, but I've only got one project at the moment, so I'll keep that one selected. It's also worth noting that you should create a new Crowdin project for every new Figma file you create. The key is going to get saved to the current Figma page, so if you create a new page, you'll have to re-paste that key in.

Now that that's all set, we can upload our email. Go ahead and click on the email template. You might have multiple emails, but in this case, I've just got one. Select the emails you want to upload into the Crowdin platform and click on the "Upload" button. This will grab all of the text content from your email design and upload all of these text strings into the Crowdin platform as the source content.

We'll just wait for that to finish. It's also going to upload the screenshot of the email, and you can see it's uploaded text from our Figma email into Crowdin. Now that that's confirmed, go back to the project. The easiest way to do that is to click on the "View Project in Browser" link from the Figma plugin, and that will open up the project directly in your browser.

I've refreshed the strings page, and you can see on the right-hand side that all the strings from our content have been uploaded into the platform. You can see we've got "Level up your checkouts," which is the header, "Checkout instructions," and all the way down to the bottom where we've got our unsubscribe and view-in-browser text as well.

The next step is to translate some of these strings. Go back to the dashboard and click on the localization you want to start translating. I'm going to click on the Dutch one and translate a couple of strings to show you how it works. Find the string you want to translate, go into the translation box, and translate that. You can use Google Translate or a professional translator.

Once you've translated the string, save it. I'll save that one there. Now, I'll go back and do the exact same thing for the French one. I'll grab the "Level up your checkouts" string again, translate it into French, and paste it into Crowdin. I'll do the same for this intro paragraph as well.

Once you've translated the content, go back to the homepage, and now we're going to import that content into Figma. Make sure you're on the original page you exported the design from, and click on the "Import Translations" button.

Once that finishes, you'll see a brand-new page in your Figma file. You can see there's a new translations page with a timestamp, and it's taken a copy of our original frame in English and added two new frames with the French and Dutch translations. Now, you can see the translation of the heading has been imported, and this body copy has also been imported. The same thing has happened for the Dutch one.

If you want to make updates to this content, for example, if we go back to our original page and then jump in here and change this heading, I'm just going to change this content to say "New Heading" instead. Again, if we go back into the localized panel, we've already got our Crowdin details added. All we're going to do is click on the upload button, and this is going to load the text from Figma, upload that into Crowdin.

If the content has been changed, we can see it's just finished uploading that text. Now, if we go back to the strings page in our project, you can see the source string has been updated to "New Heading." That's been changed in here, and it's just updated the content for anyone using the platform. This isn't going to modify anything you've added in your translations. All translations are only ever done in Crowdin. The stuff that we went through in here will never be overridden or uploaded from the plugin itself. The Figma plugin will always just read the translation content that you've made from the platform, but it always goes from Figma into Crowdin and then Crowdin back into Figma. That's the cycle based on the locals that you've added.

That's basically it. I just wanted to run through this tutorial with you. If you're using the Crowdin platform, this is the quickest way you can go about importing the content and exporting the content to and from Figma with Crowdin, automatically automating some of that localization process for multiple emails.

Once you're happy with the emails, to export them, all you need to do is click on this "Export HTML" button. That's going to allow you to export all of your translated emails with one click to HTML. You can select the platform you want to export it for or just export it to an HTML zip package. Click on "Export to HTML," and that's going to automatically generate the code and export all the images for each of those translated emails from your translated email IFFI page that we just imported the content from via Crowdin.

That's basically it. You can see here it's just finishing up that last email, and then we'll get the option to download it. You can take that zip file, do whatever you want with it, or use one of the other platform integration options to upload your emails. We'll leave it there for today. Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export HTML emails from Figma to Amazon Simple Email Service (SES) using Emailify
date: 2024-08-21T00:00:00.000Z
---

# How to export HTML emails from Figma to Amazon Simple Email Service (SES) using Emailify



#### Video Transcript

Today, I'm going to be showing you a really quick tutorial on how to export your HTML email designs from Figma to the Amazon SES (Simple Email Service) platform. We're going to be doing that using the Emailify Figma plugin.

To get started, all we need to do is go to our Figma file, click on the "Resources" icon, and then search for Emailify. Under the "Plugins" tab, if you click on the Emailify item, you can run the Figma plugin by either clicking on this little "Run" button, or I'd recommend clicking on this "Save" icon. That will let you save the Figma plugin to your Figma plugins list. I've already clicked on the save icon, so I'm just going to go to my canvas, right-click anywhere, go down to "Plugins", and then click on the "Emailify" Figma plugin. That's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is it helps you to design HTML emails in Figma, which you can then customize using all of the normal Figma design tools and export to production-ready code automatically. I'm not going to be going through all of the design features today, but if you're interested in those, I'd highly recommend checking out some of the other tutorials on the YouTube channel.

For today, I'm just going to be using a template from one of the Figma templates in the Figma plugin that you can download. You can clone these Figma files, and that will give you these components automatically pre-designed using Emailify. Again, if you want to deep dive into how to design the emails, I'd recommend checking out some of those other tutorials where you can see how to add these components, customize them in Figma, and then also preview them and add mobile overrides and things like that.

Just to give you an example of what the HTML will look like, we can preview the HTML just by clicking on the preview button in the Figma plugin. This is going to load up a real HTML preview of our design. These are all the Emailify components getting loaded into HTML, and we can see exactly what that's going to look like on desktop and mobile. You can see the responsive options there. As I mentioned, you've got control over the mobile design as well. If you click on any of these layers, then click on the settings button, you can basically go through and customize these elements for mobile. You can do things like change the padding, change font sizes, and offsets for mobile.

Again, I'm not going to be going through all of those today, but I just wanted to give you a little preview of what that looks like in the Figma plugin. Once you're happy with your HTML email and it's looking really good in the preview, as I think we are here, you can close off that preview and then we can export this HTML by clicking on the export HTML button in the Figma plugin. I'm going to go ahead and click on that, and once that loads up, you'll see that by default it's going to export it to an HTML email zip package, which would just download the files to your computer. However, we're going to go to this platform integrations group down here, and we're going to scroll all the way down to the letter "S" to find SES (Simple Email Service). We want the SES (Simple Email Service), which is the simple email service option. In brackets, it says AWS, so we know it's the right one.

You want to click on that SES (Simple Email Service) option, and you can see that it will reveal these new fields. We've got a few things here: we need to get our access key, secret key, and also specify the region for our AWS SES instance. We can find that by going to our Amazon account. If you log into your AWS account, you'll notice in the top URL bar, you'll see your region showing up. In this case, mine is us-west-1. You want to find your own region and make sure you add that to the Figma plugin. As you can see, I've already got that selected. I've got us-west-1 selected, which is the right region for me, but yours might be one of these other regions, so just make sure you select the right region.

Next, you need to create an Amazon access key and secret key. You can do that through the IAM menu. Just go into your AWS account, go to the IAM settings, create a new user with a role that matches having permissions to create SES (Simple Email Service) templates, and then click on create new access key. I've already clicked on the create access key button, and I'm going to copy this access key by just clicking on this little copy icon. We'll drop that in the access key input here, which has the little key icon next to it. The secret access key can be revealed by clicking on show, and then click on the little copy icon again. This time, paste that secret access key into the secret key field here.

Once you've done that, you'll see that the upload to SES button becomes active. Before we upload, let's change a couple of other things. The first thing to note is that whatever the email name is in your Figma frame, your Emailify Figma frame, that's going to be used as the name of the template when it gets uploaded into SES (Simple Email Service) from the Figma plugin. For example, you can see here that I uploaded one before called "Emailify Template," and it put a little timestamp on there to avoid duplicating the name. In this case, it's going to create one called "Apple Email Template." That's just something to note if you're wondering where that name is being determined from.

The second thing is you want to set a subject line. When the template gets uploaded, it's automatically going to pass this subject line into the API request when creating the SES (Simple Email Service) template. In this case, I'm just going to use the headline from the email and paste that into my subject line. You can also create preheader text, which is what shows up underneath or next to the subject line when your email gets sent out. I'm just going to paste some text in there as well. I definitely recommend populating the subject line, tweaking the template name, and optionally adding preheader text as well.

Once you've done that and double-checked your region and added your access keys, go ahead and click on the upload to SES (Simple Email Service) button. I'm just going to do that now. This is going to automatically generate the HTML code, upload all of the images, and upload our template to SES (Simple Email Service) using the credentials we just added. You can see here it's just finished uploading those templates. It's saying our AWS templates have been uploaded, and we can view them by clicking on this link. Make sure you're logged into your AWS account, and you should be able to just click on this SES (Simple Email Service) templates link, and that should load up the correct templates page based on your region.

Based on the upload we just did, we can now see we've got three templates. Before, we had two, and now there's a brand new one added at the bottom here, which is our "Apple Email Template." You can see that the email template name has been taken from the Emailify frame in Figma—Apple Email Template—and it's been added here. You might be wondering why the text is being lowercased and the spaces are being replaced with underscores. SES (Simple Email Service) has a strict naming convention policy where you basically can't use any other characters except for alphanumeric and underscores or hyphens. If you've got any special characters or any non-alphanumeric characters, those are all going to get stripped out. This is to ensure that the upload has no issues when it's creating the email. Otherwise, if we left it without the hyphens instead of spaces, it would just error out and wouldn't create the template. That's the reason why that looks a little bit different from the uppercase version here.

That's basically it. You can see that it's now in our templates list. Because Amazon SES (Simple Email Service) is entirely API-driven, what you need to do to use these templates is go to the documentation site. You can see here that in the message, it's saying this page provides a list of all your existing templates. If you want to view the contents of a specific template, you'll need to use the get email template operation in the Amazon SES (Simple Email Service) API. You can see here it links out to the docs for that. Depending on what programming language you're using or what services you're using to consume these templates, you'll need to hit this API and send over the request including the template name, which you can see here. That's why the template name is unique, and you want to pass in that template name into this get templates API request. That will allow you to consume it using whatever APIs or services you're integrating with SES (Simple Email Service) to send out your emails.

That's basically it. This is probably more of a technically focused tutorial. If you're using Amazon SES (Simple Email Service), you're probably a developer or integrating APIs with your application or something like that. Hopefully, SES (Simple Email Service) is quite familiar to you. I just wanted to show you how to get your HTML template out of Figma using the Emailify Figma plugin into the Amazon SES (Simple Email Service) platform and into your templates list without having to manually fire off an API request to do that.

I'll leave it there for today. Thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to install and uninstall Figma plugins
date: 2024-08-03T00:00:00.000Z
---

# How to install and uninstall Figma plugins



#### Video Transcript

Hey everyone, this is Adam, and today I'm going to be showing you a really quick tutorial on how to install Figma plugins and uninstall Figma plugins in the new Figma UI ("UI3") update that just came out in 2024.

To get started, all we need to do is open up a Figma file. You can do that in the browser or in the Figma desktop app. Then, you want to go down to the bottom toolbar where it says "Actions" and click on that little icon. You might remember this icon used to be at the top in the header. There used to be a header bar up here where the "Actions" button, which looked like this, was called "Resources." Now, this has been renamed to "Actions," but it does the same thing. Click on this little "Actions" button down here, and then at the top, you'll notice that there's a "Plugins & widgets" tab. Click on that "Plugins & widgets" tab.

You can see here I'm starting from scratch, so I don't have any Figma plugins installed at the moment. It's going to give me some suggested Figma plugins instead of showing my Figma plugins list. What I want to do is search for the Figma plugin that I know I want to use. You can search for the Figma plugin name directly in here, and that's going to pop up any results in the Figma Community. Then, you can go ahead and click on the Figma plugin. Down the bottom here, underneath the description, you can see there's a button called "Save." Click on that "Save" button, and that's going to automatically add it to your Figma plugins list.

To run the Figma plugin, go back to your canvas, right-click anywhere, go down to "Plugins," and then under "Saved plugins," you'll see the Figma plugin that we just added. Click on that Figma plugin name to run it, and that's going to automatically fire up the Figma plugin that we just saved.

To remove the Figma plugin, that's really easy as well. Go back to that "Actions" menu, click on the little "Actions" button down there, then switch into the "Plugins & widgets" tab again. Click on the little three dots icon next to the Figma plugin name that you've already saved. Hover over the Figma plugin name, hover over the three dots, and click on that. Then, click on the little "Remove" item. Click on "Remove," and that's going to remove it from our Figma plugin list and our Figma account. You can see there it's been removed. If we go to our right-click menu now, go down to Figma plugins, you can see that the Figma plugin has been removed.

Again, you can click on this little "Manage Figma plugins" link to get that item menu back up. You can search for another Figma plugin and install that. We can go to a different Figma plugin, so let's go to the CopyDoc Figma plugin. Another way you can save this is also from the Figma Community. For example, if we click on this item, you'll notice there's a little icon up here with a little globe icon that says "Open in the Community." Click on that, and that's basically going to open up the Figma Community page for the Figma plugin. This is under the Figma Community URL, and this is where you can browse Figma plugins.

You can see at the top here, you can actually browse the Figma plugins through the Figma Community page. I can also save it directly from this page. For example, if I click on this "Save" icon on the Figma Community page, that's going to automatically install the Figma plugin to my Figma account. If I go back to my Figma file now and close this off, then right-click, go back down to Figma plugins, go down to saved Figma plugins, you can see that the CopyDoc Figma plugin that we just saved from the Community page has now been added to our Figma plugins list in our account.

You can also remove that from the Community page as well. Just click on this little bookmark icon where it says "Remove from saves," click on that, and again, that will remove the Figma plugin from your account. It does exactly the same behavior as we saw from the "Actions" panel, but in this case, you can do it directly from the Community. If you prefer to browse the Community, you can browse through the features up here or search directly through the Community. Just click onto any of these, save it, and then it'll be available in your Figma plugins list. You can see that over here. You can also do that from Community pages.

If we go to the Hypermatic account, you can see we can browse the Figma plugins through here. Click on any of those and install it. Just click on the little bookmark, and that's going to save it instantly to our Figma plugins list. You can see we've got those two there. If we go back into our "Actions" underneath Figma plugins, you'll see a list of all the Figma plugins that we've just saved to our account. You can remove those, view the details of those, and manage them through there.

That's basically it. I just wanted to run through that in case you're wondering where the Figma plugins functionality has gone. The entire UI has been redesigned recently, so a few things have been moved around. I just wanted to cover that really quickly in case you've been wondering how to get your Figma plugins back, remove them, or manage them. Those are the two ways you can go about it. They'll always show up underneath the Figma plugins tab down here, and you'll be able to manage them as expected.

That's basically it. I'll leave it there for today and keep it really simple. Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export emails from Figma to MJML code using Emailify
date: 2024-08-01T00:00:00.000Z
---

# How to export emails from Figma to MJML code using Emailify



#### Video Transcript

Today, I'm going to be showing you a quick tutorial on how to export your email designs from Figma to MJML code automatically using the Emailify Figma plugin. 

To get started, all we need to do is go to our Figma file, click on the resources icon at the top here, and search for Emailify. Under the "Plugins" tab, if you click on the Emailify result, you can run the Figma plugin by either clicking on this "Run" button here, or you can click on this little "Save" icon here to add it to your saved Figma plugins list. I've already clicked on that icon, so I'm just going to go to my canvas, right-click anywhere, go down to "Plugins," go down to "Saved plugins," and then click on Emailify. That's just going to run the Figma plugin we saved a second ago.

If you're brand new to the Figma plugin, the way that it works is it helps you to design emails in Figma, which you can then automatically export to code or various email marketing platforms automatically using the built-in Figma plugin export features. For today, I'm just going to be creating a really simple example, so I'm just going to call this example "Template Test" and click on "Add New Emailify Container." That's going to add a special frame to our Figma file that we can now add components to. You'll notice that there's a bunch of different starter components in the Figma plugin that you can automatically add. This just helps make it easy to create common blocks, but there are a variety of ways to create new content. You can use some of the other features down here to add rows and columns and things like that. There's also some templates. If you want to check out some of the pre-built templates, just click on the new button again, go to "Browse Figma Email Templates," and you can see there's a whole bunch here that you can duplicate for free from the Figma community. For example, this Airbnb template—we can open that up here and see what that looks like. I'll just bring that over to my Figma file here to show you what that looks like.

The important thing to notice, especially if you're focusing on MJML, is that these layers map one-to-one with the MJML structure. What I mean by that is if we go to the MJML site, go to mjml.io, and then go to the documentation part of the website, and go down to some of the components, you can see that the components in MJML are one-to-one with the components in your Emailify designs. What that means is you can see here we've got rows, we've got columns, we've got elements, we've got button elements. You can see down here we've got a button, we've got a spacer, we've got a divider, we've got a text layer, and all of these are mapping up to the MJML components in here. You can see we've got our columns, we've got our divider, we've got our spacer, we've got our text layer—all of these are basically mapped to MJML. This is really important because it's going to show what that's going to look like when it exports to code in a moment.

As I said, you can see here we've got the same structure. We've got a section, which is basically a row. We've got a column, and then inside that column are our content layers. Same in here; we've got our rows, we've got our columns, and we've got our content layers directly inside the columns. The same thing applies for multiple columns. We've got a row, column, column, and content inside of those columns. You can see here when I click on a column, this gives you the option to add these elements to any of those column layers. I can add these navigation links in here, and that's going to map to these navbar links over here. Again, this is a really direct mapping to MJML, and that's going to be important to know once we export this out.

Now that we've got our template, you can preview it by clicking on the preview button in the Figma plugin at any time. This is going to automatically render a real preview of the code in your plugin window before we export it. You can see what it looks like on desktop, and then we can go down to mobile and check that out as well. You can also override some of the styles on mobile too. If you click on any of your layers and click on the settings button, that's going to automatically give you a bunch of different options to apply mobile overrides. For example, text sizes, overriding image styles, padding, border radius—all these different overrides that you can do. I'd encourage you to check those out.

I'm not going to be going into all of the details about how to design the emails in this video, but if you're interested in that, I'd highly recommend checking out some of the other videos on the YouTube channel or going to our documentation site. If you click on the "Start Here" button, this will let you go through all of the documentation. You can see exactly how to create all of the elements and style them, add things like links, dynamic content—everything you'd basically want to know is all found in the documentation site. Again, I'd highly recommend checking that out and also checking out some of the other video tutorials for more of the design content.

Basically, once you've got your design ready to go in Figma and you're happy with how it looks in the Emailify preview, to export it to MJML, all we need to do is click on the "Export HTML" button in the Figma plugin. I'm going to click on that now. You can see by default it's set to export an HTML email, but we're going to change this to MJML source code. Just go ahead and click on the MJML source code under the "Download To Your Computer" subcategory. Click on that, and you can see the little logos change to be the MJML logo. That's looking really good. We only want to export this one template today, so I'm just going to click on this one here.

The last thing we're going to do is upload the image URLs as well. This means that it's going to automatically host the images, so we can just copy-paste the code, and those images are already going to be hosted for us. I'm going to check that. For this example, I'm just going to turn off the minification of the HTML just to make it a bit more readable. Normally, I would leave that on because I want the code to be as small as possible, but this is basically just going to nest the code in a nicer way, so we can read it more easily. I'm going to turn that off for now. Now, again, I'd normally leave that on, but just to show you what it looks like, I'm going to turn that off and then click on "Export to MJML." I've just clicked that button. That's going to now generate all of the MJML code for us. It's going to export all the images, upload those, and then give us a zip file we can download. The code's now ready. I'm going to click on the "Download your .zip file" button, save that to my computer, and if you unzip your zip file and then open up the folder, you'll see this content here.

You can see that we've got our Emailify template, and that's looking really good. We've got our MJML file, we've got our index.html file, which is the compiled version of that MJML file, and we've got our images folder if we need those later as well. Just to show you what this looks like, if we go to the MJML website and click on the "Try it live" link, that will open up this editor over here. This basically lets us paste in or write MJML code, and that will automatically compile it to HTML. That's what MJML does: it takes this source code, transforms it, and compiles it into this production-ready HTML. We're going to have a look at that now for our own code.

I'm just going to paste this in here. If we go back to our folder, find your MJML file, and just drag and drop that in here, we can copy all of that MJML source code, paste it into the MJML code editor, paste that in, and you can see here on the right we've got our email as we'd expect. That's looking really good. You can see all the codes being rendered as HTML, and you can see on the left-hand side here all of the MJML code has been exported. We've got our sections, we've got our columns, we've got our text, and these are all correlating to what we had a look at in the documentation a moment ago. You can see here we've got our section, column, text, and that's exactly what we can see in our code over here. We've got sections, columns, and text, and all of the properties are automatically being populated from our style that we set in Figma. This is all automatic. You don't need to code anything. It's automatically going to generate the MJML for you, and with that one click, you've basically got all of that code written for you. That's looking really good.

Again, we can check out the compiled HTML. MJML is going to compile all this for us, and again, this is basically just an example of what it looks like. You wouldn't necessarily use this email editor in the MJML website to compile your code. There are a bunch of different ways to do that. If you go to the usage panel in the documentation site, the quickest way is to use the online editor, which we were just in a moment ago over here, but what you really want to do is check out some of these other methods. You might use the Visual Studio Code Figma plugin, one of these other text editor Figma plugins, or using a command line tool like Node.js or just a command line prompt. You can basically create a command line interface that you can run commands in to compile the code.

But again, it's really up to you. There are also some other platforms like Loops. Loops.so uses MJML natively, so if you are creating your emails on Loops, you can just upload your MJML file, and that will automatically work. There are a bunch of other platforms that use MJML too. Really, the point of MJML is it's a developer-friendly markup or syntax that can then be edited really easily, and you can then make those changes without having to tweak all of the actual compiled HTML. For example, if we go into here and we wanted to change this heading up here, where we've got "Level up your checkout", we could easily change that text. We could call this, you know, "New heading here", and that's going to automatically update the compiled HTML.

Again, if you're using MJML, you probably know why you're using it, so I'm not going to go through all of the ins and outs of what MJML is and how to use it. But if you are needing the MJML format for your development team or the platform you're working with, this is a really easy way to export it from Figma if you've designed your emails using the Emailify Figma plugin. Again, this won't work if you've already pre-designed your emails before using the plugin. You will need to use the Figma plugin's design tools to help you create that layout again to match the expected MJML formatting. But once you've done that, you can see here there are a bunch of different options. The design flexibility is really high. You can basically create whatever you want. Whatever you could design with MJML itself, you can create using Emailify, and that's going to generate the production-ready MJML code for you to use however you like.

I hope that's helpful. If you're wanting to generate MJML code from Figma, this is going to be a really easy way to go about it with a one-click export. Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export HTML emails from Figma to Marketo using Emailify
date: 2024-07-31T00:00:00.000Z
---

# How to export HTML emails from Figma to Marketo using Emailify



#### Video Transcript

Today I'm going to be showing you a full tutorial on how to export your HTML emails from Figma to the Adobe Marketo platform using the Emailify Figma plugin. 

To get started, we need to go to our Figma file, click on the little "Resources" icon at the top here, and search for Emailify. Under the "Plugins" tab, if you click on the Emailify item, you can run that Figma plugin by either clicking on this run button here or clicking on this little save icon here. That's going to let you run the Figma plugin from your saved Figma plugins list.

I've already clicked on the little "Save" icon, I'm just going to go to my canvas, right-click anywhere, go down to "Plugins", then go down to "Saved plugins" and click on Emailify. That's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is it helps you to design HTML emails that you can then automatically export to code directly from Figma. I'm just going to be creating a really simple blank email template today, but you can also check out some of the templates which will let you clone a Figma file that's Emailify ready if you want to kind of reference the kind of designs you can create. I'd also recommend checking out the documentation site, and that'll have all the resources you need for designing the emails in more detail as well.

I'll let you check those out in your own time, but for today I'm just going to be creating a new Emailify frame. I'm just going to call this example Marketo template and I'm going to click on the add new Emailify container button. That's going to add a special frame to our Figma file which we can then start adding components to from the Emailify Figma plugin. For example, we can start adding some of these blocks in here. I can add some headers, I can add some content blocks. You can add hero blocks, all these kinds of different components are instantly added by the Figma plugin and then you can basically go through and customize those in Figma.

As I said, I'm not going to be going through all of the design features in the Figma plugin today. If you're new to the Figma plugin and you want to learn more about how to actually design the emails, we have a bunch of other tutorials on the YouTube channel that I'd recommend checking out along with the documentation site as I mentioned. This will help you do things like add elements and add links and basically go through all of the different features of the Figma plugin and how to design the emails.

For today, I'm going to be assuming that you've already designed your email and we're just focusing on exporting it to Marketo. Once you've designed your email and you're happy with it, you can basically go to the Footers Tab and the last step is just to make sure you've got a Marketo footer added. If you scroll all the way down under the Footers tab to the Marketo option and click on that, that's going to automatically pre-populate the unsubscribe link required for the Marketo email. You can see here if I click on the link layer and then click on the settings button in the Figma plugin, that's been prepopulated with the correct Marketo unsubscribe link.

Once that's all set up, you can preview your email in the Figma plugin by just clicking on this preview button here. That's going to let you load up a real HTML preview of what the email is going to look like. You can check it out on mobile, you can expand that out to desktop to see how the differences look there. As I mentioned, the design features in the Figma plugin help you to create mobile layouts, it automatically does most of the work for you, but if you want to adjust things like the font size or the padding on mobile, you can just go ahead and click on any of these layers in your email, click on the settings button in the Figma plugin, and that will allow you to do things like add font size overrides or padding overrides, all different kinds of overrides for mobile and HTML settings. Again, check all those out in detail in your own time, but for today I'm going to be assuming that you're happy with your design and now we want to get it into Marketo.

I'm just going to close off my preview. We're now just going to click on the export HTML button. I'm going to click on that now and this is going to open up the HTML export options in Emailify. By default, it's just going to export a zip file with your HTML, but we want to click on this drop down and change it from HTML email and go down to platform Integrations, scroll all the way down to the letter M and you're going to see two Marketo options.

I'm going to show you both of these options in the tutorial today. The first one I'm going to go through is just exporting the zip file locally and manually creating the template in Marketo, and then we're going to come back to the Figma plugin and I'm going to show you how to optionally do this via the Marketo API. We'll be able to automatically upload the templates directly from Figma.

The first one we're just going to go through is the Marketo zip option. Go ahead and click on the Marketo zip item there and what we can then do is also enable this add Marketo editable content tags. That's basically going to populate the template with an editable snippet to make your code editable in the Marketo code editor. I'm just going to click on the export for Marketo button in the Figma plugin and that's going to automatically generate the HTML for me, upload all of the images, and it's going to give me this message saying that my Marketo templates have been exported.

Now that we've got that message, we can go ahead and click on the download your zip file button and just save that to your computer. If you open up that zip file and unzip it, you'll get this folder that looks like this. You can see here we've got our folder which is called example Marketo template and that contains our index.html file. This is the content that we just exported. If we open that up in a web browser and drag that in there, you can see that the content we just exported to HTML from Figma is all in there as expected.

What we want to now do is log into Marketo. Go to your Marketo account and just log in. What you want to do is go to the design studio option. You can either click on the menu item up here or click on this little Design Studio tile in your home screen. Once the design studio page loads, what you want to do is go up to this little new icon up here and just click on that and then click on the new email option. Just click on new email and that's going to open up this new tab here. This is going to allow us to upload our custom HTML email that we just exported.

What you want to do is go to the my templates tab up here, click on that, and then click on the blank template. We're just going to create a blank template and we're going to give this the same name. I'm just going to call this example Marketo template and in the description I'll just say from the zip export option just we know which one it is. Then click on the create button in the top right up here.

Once that loads up, you'll see that we'll be able to open up the code editor. You can click on this edit code button up the top here. I'm going to click on that and then what we want to do is copy all of the HTML that we just exported. Just go to your HTML file and the easiest way to do this is just right click anywhere, go down to view page source and you want to select all of that HTML content, copy it to your clipboard. Just copy that with command C or control C and then jump back into Marketo, delete all of the existing HTML in the blank template code editor. Just clear all that out and then we're just going to paste in all of that code we just copied from our exported Emailify template.

Once you've pasted all that in, you can go ahead and click on the save option up the top here. Just click on Save in the top right and that's going to save our custom HTML template. Once this reloads, you can see that we've got our email in here as we expected. That's looking really good and you'll see up in the top right here there's a little snippet under content that says edit email. This means we can basically jump in and edit that content because we enabled that editable content toggle in Emailify.

If I basically just go ahead and click on this area here and just double click on that, you can see that when we load that up we've got this edit email option which actually allows us to edit the content if we want in Marketo. This can be handy if you want to make some small copy tweaks or swap out some links and things like that. You can basically do that through this editor here and you can see if I highlight my button link, this will basically let me add a new link. I can change that URL, click apply and basically just add that in there and that's going to automatically save that to my HTML. You can see that added in there now.

Once you're happy with that, just go ahead and click on Save if you wanted to make any edits and yeah, that's basically it. Now you can add things like your subject line, you can populate that here and you can obviously populate the rest as you normally would in Marketo, but that's the way you can export your HTML to a zip file and manually create a template.

That's basically method one. As I mentioned, I'm going to go through the API method in a moment, but if you just want to export your HTML from Emailify to a zip file locally and manually copy paste that into your Marketo instance as a new email template, that's a really good option just to do a quick import, copy paste it wherever you need, and that's the way you can do that using the zip export function.
Now I'm going to go back to the Figma plugin and we're going to try the API export method instead. What we can do is go back into our export HTML menu. Just click on export HTML again and this time we're going to change it from the Marketo zip option and we're going to use the other option which is the Marketo API option. Go ahead and click on the Marketo API option and this option you can see reveals a few extra Fields. We've got these three Fields: we've got a Marketo client ID, secret, and the rest API endpoint.

If you're wondering where to find these, I'm going to show you that in a moment, but what you want to do for some reference is click on this little find API Keys link and that's going to open up the documentation site with the Marketo instructions. You can see here it's got the step-by-step screenshots and instructions which we're going to go through in a moment showing you how to get those details and populate the Emailify Figma plugin with those credentials. We're basically just going to follow this now. I'm going to walk you through it step by step.

The first step is you want to go to Marketo and go to the admin page. I'm just going to go through these steps with you just we can follow along in the documentation and you can see what each step looks like in there. Okay, I've just gone back to my Marketo homepage and we're basically going to follow along with this documentation here.

What we're going to do is first click on the admin page. We're going to go up to the top here, click on admin, and then once that page loads, you basically want to go down to the web services navigation item. On the left here, if you scroll down you'll see that there's an option called web services. Go ahead and click on web services and once that loads, what we're looking for is the content underneath this rest API section down here.

You'll see that under the rest API it says the endpoint option. You can see here we've got this endpoint option that ends in SLR. Highlight all of that and copy it to clipboard and then go back to Emailify and we're going to paste that into this rest API endpoint section here. Just go ahead and paste that in there and once you've pasted that in there, we're going to go back to the Marketo instance and now we're going to go to the second section which is how to get our Marketo client ID and client secret details.

If you've already gone through these steps which I'll show you in a second, you might actually just be able to skip down to the section at the bottom. You can skip to step 6 if you've already set up these roles and accounts that I'm going to show you now, but if not I'll run through that with you now.

Okay, next I'm just going to go back to the admin page. I'm in the admin page now and this time we're going to click on the users and roles item. If we click on users and roles over here, you can see in the documentation we're going to go to the roles Tab and click on new role. If you go ahead and click on the new role option up here and what we can do is just call this Emailify role API permissions. You can call that whatever you like, I've just named it that for ease of use.

What we want to do is underneath the access API dropdown item which is this one here, you basically want to open that up and scroll all the way down until you see read write assets. Go ahead and click on read write assets then click on Create and that's going to create the new Role for us. You can see here that we've got this new role called Emailify role API permissions. That's the one we just created a moment ago.
Now that we've got that created, what we want to do is go down to the LaunchPoint nav item. If you go to the left hand side here, go down to LaunchPoint and I'm just going to click on that. Once that loads up, you can see in the documentation over here we want to create a new service underneath this new item under installed services.

Up at the top under installed Services, we want to click on new and then we want to click on new service. Underneath new service, you basically want to give this a name that's related to Emailify. In this case, I'm just going to call this Emailify API my service for Figma. What you want to do is change the service option to just be custom. Go ahead and click on custom and once you've done that, you can just give this a description. We can just say this is a service for Emailify.

What you want to then do is select the API only user. This is going to allow you to select a user in your Marketo instance and you need to make sure that their account is an API only user account. You'll know how to do that if you've got your user permissions set up. I've just selected my user which has API permissions and I'm just now going to click create. That's basically going to assign that user to this new service that we just created and that's going to allow us to get our secret and ID.

Now that we've got that new service set up, you can see in the documentation here under the installed Services we want to click on The View details link. You can see our new service here is the Emailify API service that we just created and you want to go ahead and click on this view details link. Go ahead and click on view details and you can see here that underneath the details tab we've got this client ID and client secret. That's exactly the information that we want.

What you want to do is highlight the client ID and copy that to your clipboard and then go back to Figma, paste that into the Marketo client ID field here and then go back to your Marketo page and do the same thing for the client secret. Just highlight that whole client secret, copy that to your clipboard and we're going to paste that into the Marketo client secret field here. Just hit paste and that's going to automatically authenticate with Marketo and you can see here that it's now connected.

You can see that it's found our upload folder. The templates folder for our emails has been found and this is basically going to automatically upload the HTML into that template folder. If you need to change this at all, if you wanted to switch accounts or you entered something in wrong, you can click on this little disconnect icon here and that'll let you change any of these details. If you want to swap out a different user, you can definitely do that, but for now I'm just going to leave that as is. I'm going to paste in that secret again, reconnect it to Marketo, and that's good to go.

Now that we've finished those steps, as you can see in the rest of the documentation which I'm going to walk through now, we're already at the step where we've added our keys and we've added our Authentication. All we need to do now is basically click on this upload to Marketo button. I'm going to click on upload to Marketo and that's going to automatically do the same thing as before. It's going to generate the HTML code, automatically upload all the images, and this time you can see it's giving us a link to our templates folder. Our templates have been uploaded into the Marketo platform.

Go ahead and click on this little templates folder link and that's going to automatically open up the templates folder where the HTML's just been uploaded to. You can see here at the top of the list of our email templates, the example Marketo template has just been uploaded which is the template we just uploaded from Figma. If you click into that, that should load up our template and you can preview it just by clicking on this little preview draft button here and that should load up the HTML that we just created.

There we go, you can see that all of the HTML has been automatically uploaded from Figma into our Marketo templates and that's basically ready to go. You can use that email template however you like. You've got your email actions up here if you need to approve it. I'm just going to click on this approved draft button and I'm going to approve that marketing template. That's just approved that now.

Now if we go into our emails and click on new email and then swap over to the my template section, you can see under here that we've now got our template added in. That's the template that we just uploaded via the Marketo API. We can basically click on that and we can call this new email test. Then with that selected, the template we just uploaded, you can now click on the create button and that's going to automatically create a new email using that template that we just uploaded through Marketo.

As you can see when we double click on this, same sort of thing, we can edit this content as you'd expect. I can save that content and that's looking really good. Because we've got our toggle enabled here where it's adding the Marketo editable content tags as before, this is an editable template.

You'll notice that this screen is exactly the same screen we've landed on using the previous manual upload option where we copy-pasted the zip file contents into Marketo into this little template area here. You'll remember we went into the edit code section up the top here and pasted that in, but this time it's automatically gone ahead and created all of that HTML based on the Marketo template that we just created. We didn't need to manually copy-paste that in and create a new template, we can just select it from the templates that have been uploaded via the API.

Those are basically the two methods I just wanted to run through both of them with you. Some people might find the API method a bit too cumbersome if you don't have those admin permissions to create those roles and accounts. Maybe the zip file option is going to be more seamless for you. But in this case, I just wanted to go through both options in case you do want to be using the API option to make that a little bit more seamless for subsequent uploads directly from the Figma plugin.

I'll leave it there for today. I hope that's been helpful if you're a user of the Adobe Marketo email marketing platform and you've been wondering how to get your HTML emails out of Figma into the Marketo platform, either through the zip method we went through or the API method. These are both different options you can use.

As I mentioned, if you're new to the Figma plugin, you'll need to design the emails in Emailify first. It won't work if you're already creating your emails outside of Emailify. You will need to design them using the tools in the Figma plugin, which again you can find more video tutorials and documentation for on our website. You can go to the start here page and just start really digging into all the documentation. There's also a few dozen full video walkthroughs like this one for doing all sorts of different design tasks and upload tasks and mobile optimizations and everything like that, please do check that out. I'll leave it there for today. Thank you as always for watching and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export HTML emails from Figma to Mailercloud using Emailify
date: 2024-07-13T00:00:00.000Z
---

# How to export HTML emails from Figma to Mailercloud using Emailify



#### Video Transcript

Today I'm going to be showing you a quick tutorial on how to export your HTML email designs from Figma to the Mailercloud platform using the Emailify Figma plugin. 

To get started, all we need to do is go to our Figma file, click on the "Resources" icon at the top, and search for "Emailify". Under the "Plugins" tab, click on the Emailify result. You can run that Figma plugin by either clicking on the run button here, or I'd recommend clicking on this little "Save" icon. This will let us run the Figma plugin from our saved Figma plugins list.

I've already clicked on that save icon, so I'm just going to go to my canvas, right-click anywhere, go down to "Plugins," then go down to "Saved plugins," and click on Emailify. That's just going to run the Figma plugin we saved a second ago. If you're new to the Figma plugin, it helps you design HTML emails in Figma, which you can then export to production-ready code automatically with one click.

Today I'm just going to be creating a really simple example. I'm going to call this an example template and click on the add new Emailify container button. This will add a special Emailify frame to your page that we can then start inserting components into. I'm not going to be going through all of the design features today in this tutorial. If you're interested in learning more about that, you can check out some of the other video tutorials on the YouTube channel or go to the documentation site, where there's heaps more information. Today I'm just going to be keeping this really simple and creating a template using some of the predefined components without customizing them. If you were adding your own, you would customize the content and design in Figma, but for today I'm keeping it simple.

Once you've got your main template and components set up, go over to the footer tab in the Figma plugin and scroll down to the letter M. Find the Mailercloud option and click on it. This will automatically add the footer component with prepopulated "unsubscribe" and "view in browser" links. We can inspect those by clicking on the link layer, then going to the settings button in the Figma plugin. You can see it's automatically pre-populating the URL to be the "unsubscribe" link for Mailercloud along with the "view in browser" link. These dynamic links will get swapped out automatically when you send this email via the Mailercloud platform.

Once you're happy with that, you can preview the email by clicking on the preview button in the Figma plugin. This loads up a real HTML preview of what the design will look like when exported to code. You can swap between mobile and desktop to see how it looks. That's looking pretty good. Again, I'm not going to go through all of the features today, but if you want to, you can add optional mobile overrides. For example, you could click on a component, click on the settings button, and specify padding, or if you're in a text layer, you can change the font size or line height for your mobile designs. But today I'm leaving this all as default and am happy with the preview.

Once you've finished previewing your email, close out of that, and now click on the export HTML button. Click on export HTML, change this HTML email option, click on that, go down to platform integrations, and scroll down to the letter M. Click on the Mailercloud option, and you can see Mailercloud is now selected. Add your subject line and the preheader text. The preheader shows up next to your subject line when viewing it in Outlook or Gmail. This will automatically get added to your HTML template. We need to read the subject line in Mailercloud in a moment, but also add it into the Emailify Figma plugin as it automatically populates the title tag, visible when someone uses the "view in browser" link. Add that here and into the Mailercloud platform.

Once we've finished with our subject line and preheader text, click on the export for Mailercloud button. This will automatically export all the HTML and images for us and give us the code to download. Click on this download your zip file button, save that anywhere to your computer, and unzip the file. You'll get a new folder, which will look something like this. Inside it, we've got our HTML, a previews page to preview the content, and you can drag and drop that into the browser to see how it looks on desktop and mobile easily. The code we're going to use is inside this nested folder. The example template is named the same as our Figma frame, matching whatever you've called your frame in Figma. When we open that file in our browser, it will open up the HTML design we'll use in the Mailercloud platform.

Down here, it's telling us we can now create a new campaign in Mailercloud and then copy and paste that HTML into the code input. Log into Mailercloud manually or click on this create a new campaign link, opening the correct page automatically. We’re now in the Mailercloud.com site. I'm already logged in, and it’s taken us to the create campaign page automatically. Call this test campaign, and take the subject from the other input. Call this one test subject, which we used in the Emailify Figma plugin. Select your sender ID. Assuming you've already set the sender ID up in Mailercloud before, you won't be able to create a campaign until you've created a sender, so make sure that's set up first.

Click on the choose email template button on the right-hand side, and select the HTML editor option. Avoid the other ones and jump right to this one where we can copy and paste our HTML code. Click on the HTML editor option, and you'll get this HTML code input here. The easiest way to get our HTML in there is to go to the folder we were just looking at, take the index.html file, and drag and drop that over here. This will automatically drop all of that HTML code into our Mailercloud editor. All the code that we exported is in here now. Click on continue, and you can see it’s loaded up our HTML as expected. This looks the same as it did in Figma, which is great. You can see it on mobile and desktop, preview that in here as well if you want, but once that’s set up, click on Save and continue, and that will save your template.

I'm not going through the whole campaign sending method, but you can send this to whatever lists you like. I wanted to take you through the initial step of uploading your HTML template. Now you can send out any custom HTML template designed in Figma with Emailify and quickly drop that into your Mailercloud platform. You'll be able to send that out as a custom designed HTML email to any lists in the Mailercloud platform. 

That's basically it. I hope that's helpful if you use the Mailercloud platform and have been wondering how to make it easier to design totally custom HTML designs. This is a great way to streamline your workflow from Figma directly into the Mailercloud platform. Thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: article
title: The Low End Theory
date: 2024-07-04T00:00:00.000Z
---

# The Low End Theory



As with the last mid-year update, this [Low End Theory](https://www.youtube.com/watch?v=ZWVoht3RZ68) update also falls on July 4th. Even though Hypermatic is based in Australia, and not the United States (or Japan, as some seem to think, based on the design of this website), I do like the idea of doing these mid-year updates on Independence Day, and re-focusing it on continuing to declare our independence from legacy design/development workflows.

### Plugin update highlights in 2024 (so far)

There are multiple updates and small fixes shipped to multiple Figma plugins on a daily basis, but here are some cool highlights from the first half of 2024:

- Added [Superscript & Subscript support](https://x.com/hypermatic/status/1803946175357424068) to Emailify
- Added [Lottie support for Google Ads](https://x.com/hypermatic/status/1803593059596112275) to Bannerify
- Added [Custom Image Hosting](https://x.com/hypermatic/status/1801819774621782238) to Emailify
- Added [Insider integration](https://x.com/hypermatic/status/1796380701425901577) to Emailify
- Added [Blend Modes support](https://x.com/hypermatic/status/1796000421292519466) to Bannerify
- Added [Image → Vector imports](https://x.com/hypermatic/status/1792430203559649358) to Convertify
- Added [Icon Buttons](https://x.com/hypermatic/status/1791674548334821649) to Emailify
- Added [PowerPoint File Importer](https://x.com/hypermatic/status/1791674548334821649) to Pitchdeck
- Added [Markdown support for Content Syncing](https://x.com/hypermatic/status/1784385014970691694) to CopyDoc
- Added [Scale Mode presets](https://x.com/hypermatic/status/1783709452308529609) to Commentful
- Added [Airtable Sync support](https://x.com/hypermatic/status/1781092848257150989) to CopyDoc
- Added [iOS Splash Screens](https://x.com/hypermatic/status/1780850225994928605) to Favvy
- Added [Auto-Repeat for Spreadsheet Syncing](https://x.com/hypermatic/status/1780786741185823177) to CopyDoc
- Added [Transparent GIF Detection](https://x.com/hypermatic/status/1775330871513645327) to Emailify
- Added [Toolbar Toggle](https://x.com/hypermatic/status/1774931764039106869) to Pitchdeck
- Added [GIF support](https://x.com/hypermatic/status/1774649559937065469) to Commentful
- Added [Larger Window Size option](https://x.com/hypermatic/status/1768513248570294550) to Commentful
- Added [improved Image Compression](https://x.com/hypermatic/status/1765933003845583297) to Bannerify
- Added [Outlook support for Gradient Buttons](https://x.com/hypermatic/status/1764493446533005719) to Emailify
- Added [Image Scale Overrides](https://x.com/hypermatic/status/1762344274514026943) to Bannerify
- Added [CSS Drop Shadow support for Buttons](https://x.com/hypermatic/status/1761153482978181429) to Emailify
- Added [CSS Gradient Buttons](https://x.com/hypermatic/status/1760842358617436162) to Emailify
- Added [copy/pasteable Email Signature exports](https://x.com/hypermatic/status/1759375912305561924) to Emailify
- Added [Approval Statuses](https://x.com/hypermatic/status/1758336067714044243) to Commentful
- Added [grouped text Localizations](https://x.com/hypermatic/status/1751079870283887016) to CopyDoc
- Added [HTML size optimizations](https://x.com/hypermatic/status/1750684745535770799) to Emailify
- Added [Auto-Layout linting](https://x.com/hypermatic/status/1748537106165543300) to Emailify
- Added [Plain Text exports](https://x.com/hypermatic/status/1747052614238531864) to Emailify

### Overhauling the Documentation Site

The biggest project for the first half of 2024 was completely updating the Hypermatic [documentation site](https://docs.hypermatic.com/), which had been gradually getting out of date, as it was being updated ad-hoc over time whenever a new feature was introduced into any of the plugins, which meant that all the videos had slightly (or largely) different looking UI in them.

It's always sad and disappointing to me whenever I come across documentation for software that's totally out of date or has been neglected to the point where the content in the documentation doesn't match up with the current reality of the product it's trying to provide context or help around.

To avoid falling into this trap, I decided it would be a good time to completely restructure, refactor and add to the documentation site for all of our products, including re-recording every single video screencap for each page and subheading throughout the docs site; this meant recording and editing hundreds of short forms videos across the 12 different Figma plugins.

The update started with migrating the underlying docs platform from VuePress to Mintlify, which offers a better way to organize content and make it easy to find, and was a great opportunity to re-think how the documentation for each plugin was structured.

The project started at the start of January 2024, and finished up with the last plugin's docs and video screencaps being completed at the end of June 2024. The end of the project was bitter-sweet, as 2 weeks after completing the overhaul and having all of the video screencaps up to date, Figma announced that the app's user interface had just been completely re-designed, and would be rolled out to all users over the coming months.

The good news is that _most_ of the content in the documentation videos are centered around the UI of the Figma plugins, rather than the Figma app UI itself; although, the Figma UI is prominent in all of the videos and does often get referenced as part of the instructions for completing a certain task or using a certain feature. At this point, I think we will leave the new videos "as-is", until the new UI is completely rolled out and finalized in the Figma app, and then we can re-assess and decide if it's worth re-recording some or all the video screencaps again to reflect those changes.

Either way, the documentation content itself and the way it's structured is way better than the previous version, so I think it was great to get it all updated in one big marathon to have a totally up to date and consistent place to find information about any feature in any plugin.

### Avoiding "Enshittification"

There's always a fine line between shipping new features or software updates that deliver real value to customers, and shipping updates that end up making the product overcomplicated or worse over time. One _trendy_ (the American Dialect Society selected "enshittification" as its 2023 Word of the Year) term for this that has been coming up lately is [Enshittification](https://en.wikipedia.org/wiki/Enshittification), and while a lot of the discussion is around products doing what's best for themselves at the expense of their customers, I think similar outcomes can happen just due to a lack of care or intentionality about keeping the software useful for the customers that use it regularly to solve some problem that they find your product useful for.

I've always tried to be vigilant with keeping our Figma plugins as simple as possible and keeping them focused on the core problems it was originally designed to help solve. This has meant saying "no" to a lot of good (and not so good) ideas or suggestions/wishes from customers. It's really easy to say "yes" to everything, but things ends up with software becoming "all things to all people", and loses some of what made it what it was originally.

There's a common saying that "software is never finished", which is true, because the dependencies of that software often have to be updated and maintained in order to continue functioning properly. However, lots of this work usually happens behind the scenes, so from that perspective I do think you can have something closer to "finished software" from a users perspective, in the sense that there aren't many big interface updates that would be noticeable for a regular user of it. 

Maybe these updates happen gradually, or are appended to existing parts of the user interface (for example, adding more "Export" options to an existing drop down selector menu), where the functionality is still being enhanced, but not at the cost of resetting the users muscle memory for using the product by redesigning or cluttering the interface with brand new elements.

There are some examples of software that I use, where I only use the core features that haven't really changed much over the last decade (from a user facing perspective), and I would be fine with them basically staying the same for the next decade, where the functionality remains mostly stable, with most of the work going into the performance behind the scenes:

- Google Docs/Sheets
- Gmail
- Slack
- Git
- Handbrake
- FileZilla

While the examples above can't be considered "done", and have lots of open and closed source designers and developers working on them, I think there is something to be said for products that try to do a couple of things really well, without splitting it off into a bunch of other directions, or adding in new features that maybe 1% of the customer base might find useful for the sake of it.

Another one I came across is [Wordstar](https://josem.co/the-beauty-of-finished-software/), a word processor from the 1980s that George R.R. Martin used to write “A Song of Ice and Fire”:

>It does everything I want a word processing program to do and it doesn't do anything else. I don't want any help. I hate some of these modern systems where you type up a lowercase letter and it becomes a capital. I don't want a capital, if I'd wanted a capital, I would have typed the capital.

_- George R.R. Martin_

The reason I've been thinking about this is partly related to the documentation overhaul I mentioned above, where there were so many interface updates for all of the products over the first 3-4 years (because there was so much to build) that the "real time" documentation led to most videos having a slightly different interface than the ones before it.

Now that I'm really happy with where the Figma plugins are in terms of functionality and usability, I think the instinct needs to shift from shipping new features like crazy (including any UI updates that brings), to trying to be more mindful about how to add value without degrading the consistency of the experience for the thousands of designers who are already used to them. 

To me, this feels like the right balance; for example, our Convertify Figma plugin already has a user interface that allows you to click on drop down selector, choose the import or export format you need, and then click one button to start the conversion process. This interface has already been designed to handle more formats and conversion options, without needing to altar the entire interface to add that value to the user; all of the extra functionality can be shipped behind the scenes, and the only additional visual "clutter" is one more dropdown option inside an interface that the user is already familiar with.

### Platform Risk

There are some great benefits that come with building on top of an existing platform, especially as a small team, but there are also inherent risks that come along for the ride.

Back in the early 2010s, Zynga was a social game developer that was highly dependent on Facebook for its user acquisition and revenue. In 2012, Facebook changed its platform policies, which reduced Zynga's visibility and access to user data. This led to a significant decline in Zynga's user base and revenue, where they lost nearly half of their daily active users in one year.

Another example was TweetDeck, which was a popular social media dashboard application that relied heavily on Twitter's API. When Twitter decided to change its API terms and conditions, limiting third-party clients' capabilities, TweetDeck's functionality was severely impacted (Twitter eventually acquired TweetDeck to control its development and integration).

Closer to home, we built a Figma plugin called Pitchdeck, which helps designers create, export and present slide decks from their Figma designs. Last week, at Config 2024, Figma announced a brand new product called "Figma Slides", which takes some of the additional features that Pitchdeck offered (eg. slide notes, animations, Figma Prototype embeds etc) and delivers them in a really nicely designed new product under the main Figma app (similar to the previous "FigJam" product released a couple of years ago).

While it doesn't mean that Pitchdeck is irrelevant now, there's surely a subset of current and potential Pitchdeck users who will find that Figma Slides has all of the features that they personally need, and will decide to use that instead.

The focus for Pitchdeck (and all of the other plugins), then, is to try and focus on the areas where it's differentiated and continue to deliver the most value to our customers there, as an alternative for anyone who is after features that the Figma plugin offers over the native experience.

### Antifragility

With the topic of platform risk fresh in mind, it has also made me think about Weblify, which is a Figma plugin currently in BETA that I've been working on to become more of a fully fledged website builder. Knowing that Figma's mission is "going from idea to design to production", it seems inevitable that (similar to "Figma Slides"), the future will contain something like "Figma Sites" where you can publish or deploy content designed for the web to a production server somewhere.

Similar to when Adobe XD went into maintenance mode, I don't really want to be caught out trying to develop something that is going to be superseded or made irrelevant on a long enough timeline. 

As I've written about multiple times in previous updates, this is also a key reason why I've actively avoided trying to cram AI features into any of our existing Figma plugins, because if you had worked on these features as part of a Figma plugin any time over the last 18 months, most of [that AI functionality is now going to be native](https://www.figma.com/ai/) in the main Figma app, essentially wiping out the need for those third party plugins.

I don't think it's wrong to add AI features where they make sense, but they should be antifragile, where improvements in intelligence or native AI features should make them even more valuable, rather than redundant.

I think the same is true for creating any of website builder product, where it needs to be designed in a way that's differentiated enough and solves real problems in a way that would still be useful even if Figma made a new baby that morphed it with Framer or Webflow in some way.

### Ensuring sustainability over the long term

Based on the thoughts above on platform risk, AI and the importance of antifragility, I want to take a bit of time to rethink the direction I've been working on for Weblify. If I'm going to be dedicating a large amount of time over the coming years on a new product, I think it's important to make sure the initial compass direction is pointing in the right way before charging full-steam ahead into building product again.

In a similar vein, after essentially working non-stop (not taking a full day off since December 2019) on Hypermatic for almost 5 years, and because I have a strong background in design/development, most of my work time has been super focused on building and shipping new product updates to keep up with the internal roadmap for all of the Figma plugins and solving real recurring problems that come up from talking to users every day.

Maybe it's partly related to the bitter-sweet result of finishing 6 months of documentation videos only to have the user interface in them completely change shortly after (and feeling a bit low about the prospect of re-recording/editing hundreds of video screencaps again), but for the first time, I'm feeling the need to pause and reflect a bit more to gain some perspective on where best to spend my time on the business to ensure we're delivering the most value to our customers over the long term.

Thankfully, I haven't really felt properly burnt-out before, but I've heard enough horror stories from other founders of it creeping up on them to know that working 7 days per week for 5 years straight may not be the best strategy for the next 5 years; so I'm going to experiment with trying to give myself more time away from the screen on weekends (instead of just working both days over the weekends) while our customers are also enjoying their weekends (and don't typically have as much need for support) and use that time to let my mind wander a bit more and provide some mental space for generating new ideas.

Along with this, I also think it's time to adjust the ratio of time spent on development and marketing; like any developer, marketing is often riding along in the backseat compared to writing code and shipping new things, but I'm after working on the plugins for 5 years, I'm really happy with where they're currently at, and I feel much more comfortable with marketing them more, especially talking to so many users who are finding value in for automating their real workflows them each day.

I'm looking forward to trying out some new ideas and marketing channels to see what works; but maybe more importantly, I'm excited to add more balance to my usual mode of being hyper product focused all of the time. Of course, I'll still be coding and shipping new features and improvements to the Figma plugins, but I really want to try at least making this a 50/50 split with marketing.

I'll report back with the results in my next update!

---

---
type: tutorial
title: How to export HTML emails from Figma to Ongage using Emailify
date: 2024-06-08T00:00:00.000Z
---

# How to export HTML emails from Figma to Ongage using Emailify



#### Video Transcript

Today I'm going to be showing you a quick tutorial on how to export your HTML email designs from Figma to the Ongage email marketing platform using the Emailify Figma plugin.

To get started, go to our Figma file, click on the resources icon at the top here, and search for Emailify. Under the Figma plugins tab, click on the Emailify result. You can run the Figma plugin by either clicking on this run button up here, or I'd recommend clicking on this little save icon here, which lets you run the plugin from your saved Figma plugins list. I've already clicked on that save icon, so I'll go to my canvas, right-click anywhere, go down to Figma plugins, then saved Figma plugins, and click on Emailify. This will run the Figma plugin we saved a second ago.

If you're new to the plugin, it helps you design HTML emails in Figma, which you can then export to production-ready code automatically. In this case, we're uploading it to the Ongage platform. I'm creating a new email and calling it "example template." Click on the "add new Emailify container" button to start adding components and design elements into the email frame.

I'm not going through all of the design features in the Figma plugin today. If you're new to the plugin and curious to know how to use all the features, I'd recommend checking out a couple of the other videos on the YouTube channel or going through the Emailify documentation site. For today, I'll keep it simple and add a few component blocks, which we can then upload to the Ongage platform.

I'm adding a few bits of content here without customizing any of it today. Once you're happy with your design and you've customized it with your content and branding, click on the footer option. You have this footer tab over here; click on that and scroll down until you reach the letter "O." You'll notice an option for the Ongage platform. Click on the Ongage footer component, which will automatically add a footer with the unsubscribe link and address tag automatically populated.

You can see the address tag here, which will get pre-populated later. Importantly, we also have the navigation unsubscribe link. Click on that link, then click on the settings button in the Figma plugin, and you'll see it's automatically pre-populated with the unsubscribe link for the Ongage platform. You can customize that footer however you like, but it's worth going through that footer option to quickly add those links without finding them each time.

Now that we've got our design in Figma, we need to preview it. Click the preview button in the Figma plugin, which loads a real HTML preview of what the email will look like on mobile and desktop. It's responsive, and if you want to add some overrides to any of these elements, click on the element, go to the settings panel, and you can change things like font size, padding, or other bits and pieces for your mobile style overrides.

I'm not going through all of these in detail today, but they're available for you to customize the design on mobile. Once you're happy with the preview and think it looks good, close that preview window, then click on the export HTML button. Click on export HTML, change the default HTML email option, scroll down to the platform integration section, and find the letter "O." Click on the Ongage option. Now that we've selected the Ongage option, add our subject line. I'm calling this subject "test," and also our preheader. The preheader text gets added after your subject line when your customer or user opens that email in their client, like Gmail or Outlook. Put in whatever preview or preheader text you want to include here, and it gets automatically included in the HTML.

Once you've added those, click on the export for Ongage button. This automatically generates the production-ready HTML, uploads those images, and gives us a zip file to download. Once the confirmation message pops up, click on the download your zip file button, then save it anywhere. I'm saving it to my desktop. If you unzip that file, you'll get a folder with a couple of different files. The preview file is just a preview HTML file that you can use to check out all of your emails in one place. For example, if we open that up, you can see what it looks like. Drag it in here, and you can see it's a nice little preview page showing the desktop and mobile version. This is really good for reviewing the emails.

For actually uploading them, the file we're interested in is inside of this example template folder. You'll notice that it's named the same as what the frame was called in Figma. The frame was called "example template," so your folder will be named whatever you've named the template. The file that contains our HTML template is this index.html file. We can have a look at that by dragging it into the browser. We're going to come back here in a second to copy-paste that HTML into Ongage.

The next step is to log in to your Ongage account. If you've logged into your dashboard, go to the campaigns section. Click on the campaigns menu item, then click on the new campaign button at the top right. Click on the email option. Once the new email screen loads up, give your message a name. I'm calling this one "test email message for today." Populate things like your sender name, addresses, and all that stuff. Fill that out as needed, then click on the next button down here. This brings us to our new email page, where we can add things like the subject line and our HTML.

Copy the subject that you added in the Figma plugin and paste it into Ongage. The reason for that is that it adds it into your title tag, but it's also needed to send that out through Ongage. Just make sure those are the same. If you've already added your preheader text in Emailify, you don't need to add it again in Ongage. If you do add it again, it gets doubled up. I recommend just doing it in the Emailify Figma plugin and not bothering about leaving this field populated.

Now that we've got those filled out, swap this over to HTML. It will be WYSIWYG by default; click on the HTML tab. Now we've got access to the raw HTML content. Going back to the file we opened a moment ago, which was the index.html file, take that index.html file, open it in a code editor or your browser, right-click in your browser, go down to view page source, and click on that. Copy and paste all of that HTML from this file. Select all of it, copy it to your clipboard, then go back into Ongage. Delete all of this HTML content, and paste in our own HTML instead.

I've pasted all of that in, and it looks really good. Importantly, uncheck this "Auto beautify HTML" option. You don't need to turn that on, just in case it messes up any of the HTML code, which we've already gone ahead and minified for file size optimization. Now that we've added our HTML, proceed by either clicking on save or clicking on next. I'm clicking on next, and this saves that template for us. You can see the email was successfully updated, and it also created a text version from the HTML automatically. This looks really good.

The last thing we need to do is give our campaign a name. Call this campaign name whatever you want. I'm calling it "campaign name test." Add all these other fields yourself, then start adding whatever lists you want to include for your campaign. If you're a user of the Ongage platform, you've probably gone through this step before, so I won't run through all of that today. You can also send a test to yourself. This is probably a good idea if you want to check out what the HTML looks like, or use a service like litmus.com, which lets you send a test to Litmus and see how it looks on all the different platforms.

This is basically all good to go. Once you've added your list, go down here and click on schedule. This takes you to the final step, allowing you to schedule the campaign. You can either send it out immediately or schedule it for a future date. That's basically it. I'm not going to send this out for now. I just wanted to run through the design part mostly, to show you how to import your custom HTML that we exported from Figma into the Ongage platform. This is the best way to go about it: copy and paste the source code from the index.html file into the HTML tab in Ongage. This allows you to have a custom HTML email.

You can also click on the WYSIWYG tab, which allows you to change the text. You can change this to something like that, and make small tweaks if needed. For big design changes, I would personally go back to the Figma file, change them there, re-export the HTML, and copy-paste that index.html file into the Ongage HTML tab. For quick text tweaks, you can use the WYSIWYG editor, which should be fine too.

I hope this has been helpful. If you're an Ongage user wanting to create custom HTML emails from Figma and export them for the Ongage platform, hopefully, this will be a workflow improvement. Thank you, as always, for watching. We'll be back soon with more Figma tutorials like this one shortly.

---

---
type: tutorial
title: How to export HTML emails from Figma to SendX using Emailify
date: 2024-06-07T00:00:00.000Z
---

# How to export HTML emails from Figma to SendX using Emailify



#### Video Transcript

Today, I'm going to be showing you a quick tutorial on how to export your HTML email designs from Figma to the SendX email marketing platform using the Emailify Figma plugin.

To get started, all we need to do is go to our Figma file, click on the "Resources" icon at the top here, and search for Emailify. Under the "Plugins" tab, if you click on the Emailify item, you can run the Figma plugin by either clicking on this "Run" button here or, I'd recommend, clicking on this little "Save" icon here. That's going to let you run the Figma plugin from your Figma plugins list. I've already clicked on the save icon, so I'm just going to go to my canvas, right-click anywhere, go down to "Plugins," then go down to "Saved Plugins," and click on the Emailify item. That's just going to run the Figma plugin that we saved a second ago.

If you're new to the Figma plugin, the way that it works is it helps you to design HTML emails that you can then automatically export from Figma to production-ready code. In this case, I'm just going to give this an example of a SendX template, and I'm just going to click the "Add New Emailify Container" button. This is going to allow us to start designing our email. I'm not going to go through all of the design features in the Figma plugin today. If you're new to the Figma plugin and you're interested in learning about those, I'd recommend checking out a couple of the YouTube tutorials on this channel or going to the documentation site. That has steps for all the ways you can customize your designs.

Today, I'm just going to be creating a really simple template without any content or design customization, just to run through what this would look like if you export your template to the SendX platform. I'm just going to add a few components, and once you're happy with your design, the last thing you want to do is make sure you go to the "Footer" tab. If you scroll all the way down to the letter "S," you'll see that there's a SendX option. We've got this SendX footer option here. Go ahead and click on that, and that's going to automatically add this footer component with the unsubscribe link and viewing browser link pre-populated. If I click on the link layer here and then click on the settings button in the Figma plugin, you can see that it's been pre-populated with the unsubscribe link tag and the viewing browser link tag. These are good to go. These are going to get swapped out by SendX once we upload the template in a moment.

You can obviously customize the design of this footer, but that's just a really easy way of getting those links automatically added without having to find them each time in the documentation. Now that we're happy with our design, you can preview the HTML just by clicking on the "Preview" button here. That's going to load up a real HTML preview of what the email is going to look like when it gets sent out. You can toggle between mobile and desktop, so you can see what it looks like on both. There are also some options to customize things like mobile design overrides. If you click on the settings button and then click on any of your layers, you'll get all these different options to override things like padding and font size and showing and hiding elements on mobile and desktop.

I'm not going to go through all of this today. Feel free to check out the documentation if you're interested in playing around with those. Now that we've got our template designed the way that we want, I'm just going to close off this preview and click on the "Export HTML" button in the top right of the Figma plugin. Go ahead and click on "Export HTML," and then what we want to do is change this default HTML option from this one here and scroll down to platform integrations. Again, scroll down to the letter "S" until you find the SendX option. Click on SendX, and once you've got that selected, you can then populate things like your subject line. We can just put in a subject line here and add preheader text. The preheader text is what shows up after the subject line in your email client. When you're opening up the email in Outlook or Gmail, this is the text that shows up underneath or next to the subject. Populate those two fields, and then when you're ready to go, just click on the "Export for SendX" button. When you click on that, it's going to automatically upload all the images, generate the HTML code, and you'll get this message when it's ready to go. It's telling us that the code is ready for SendX, so we can download that here.

Go ahead and click on the "Download Your Zip File" button, and what you want to do is save that to your computer. I'm just going to save it to my desktop, click on "Save," and then if you just unzip that file, you'll get this folder here. This is the inside of the zip file that we just downloaded. There are a couple of different files here. There's a previews page, so if you want to see a preview of all the emails you've exported in one place, you can open up that. But for today, what we're really interested in is the actual index.html file here, which contains the email that we just exported. You can see that it's in a folder with the same name as our Figma frame. Just find whatever the Figma frame you named in your Figma file and match that up with the folder in your zip file. Inside of that, you'll see the index.html file.

Now that we've got that file exported, we're going to go into our browser and load up the SendX dashboard. If you're a SendX user, you want to go to SendX.io and log into your account. You'll be greeted with the dashboard screen here. What we want to do now to upload the template is click on your username in the top right of the page and then go down to "Settings." You'll see this little settings icon, click on that. Once that loads up, you want to change this tab up the top here to "Templates." Click on the "Templates" tab up here, and you'll see a button called "New Email Template." Go ahead and click on that "New Email Template" button. Once that new email template page loads up, you can go ahead and give that a name. I'm just going to call this "SendX Custom Template." You can call it whatever you want, this is just an example. Down here in the email body, what we want to do is delete these predefined rows. Go ahead and click on each of these rows, then click on this delete icon and click on this one again until you can see this "Drop Content Blocks Here" section. That means that the template is now empty, and we can add our own content.

Before we do that, the first thing I want to show you is just how to extend the width of this email. You'll notice that it's actually quite narrow. The reason for that is if you go to this settings tab over here, you'll see that the content area width is set to 500 pixels by default. You'll notice that in our Figma file, our email is actually 600 pixels. What we need to do first before we add our HTML is just to go back into SendX again, click on this settings tab over here, and before we paste our content in, just change this from 500 and drag that all the way up to 600. This is now going to match our Figma design at 600 pixels wide, and in SendX, it's also now 600 pixels wide. That's all good. Now we can go back to the content tab, and under the content tab, if you just scroll down, you'll see this little HTML tile. What we want to do is drag and drop that HTML tile into this content blocks area. Just let go of the block when you're hovering over that, and that's going to add this little content block here.

We want to replace this HTML with the HTML code that we just exported from the plugin, located in this index.html file here. The quickest way to get the source code for that is just to open up a new browser window and drag and drop your HTML file in there. You can see that's loaded up our preview here. All you need to do is right-click anywhere in the body area here, click on "View Page Source," and then you can copy and paste all of this to the clipboard. I'm just going to select all of that and copy it to my clipboard. Then, if you go back to SendX, delete all of this predefined HTML content under the content properties window. Delete that, and you can see that's removed it from there. Now we're going to paste all of the HTML we just copied. Paste that into here, and you can see our HTML has now been added in. That's the way you can paste your HTML into SendX. Unfortunately, there's no easier way to do it. You do have to go through those couple of steps of setting the width and pasting in the HTML content into this block here. Once you've done that, it should basically be good to go.

Now we can go ahead and click on this "Submit Template" button down here, and that's going to save the template for us. Now that we've got that added in, you can see that the content has been added and is letting us preview it here. We can just go ahead and click on the exit button, and then now we can go back to our campaign section. If you go to "Campaign" in the top menu here and click on "Create Newsletter Campaign," you can give that a name. I'm just going to call this "Test Campaign" for today. Once you've added that, go ahead and click on "Next." You can see down here, if we go to the custom template option, you can see that we've got our SendX custom template which we just added a moment ago. To select that, just click on the "Apply Template" button and then click on "Apply Template" again. You'll notice down here that it's got this little check mark, so it's selected our custom template. Then we can go to next, and that's going to take us to the content screen. Again, this is going to load up that editor again, but this time it's going to give us the HTML that we added previously.

You can see we've got this custom HTML block in there, and that already contains our custom template. If we click on that, all of the HTML content is in here, and that's what that's looking like there. Because we've already added this template, we don't need to do anything in here again. If you'll notice, the settings panel is still set to 600 pixels, so just make sure that's still the case, it should be. For the email subject, you just want to add in whatever you added in the Figma plugin. We just added a thing called "Test Subject." You do want to copy-paste that subject line into here. If you've already added your email preview text in the plugin, so we already added preheader text here, you don't want to reuse that in SendX. If you've already added it in the plugin, that's going to add it to your HTML code, and it's already going to work as expected. If you add it again into here, that's going to double up the preview text that we've already added. If you've added it here, you don't have to add it into SendX.

I'm pretty happy with that. I'm just going to save that by clicking on "Next." Again, this is going to take you to all the normal steps you'd be used to if you're a SendX customer. In this case, I'm just going to send it to all email contacts and click on "Next." This would allow me to schedule the email for later or send it out now. Usually, you want to send a test to yourself as well, so go ahead and click on the "Send Test" button down here. I would send a test to myself. In this case, you could add your own email address and send a test. You always want to do that before sending out the full campaign. Again, if you're a SendX user, you're probably already familiar with your own workflow, and I'm not going to have to go through those extra steps today.

That's basically it. I just wanted to show you how to design and export HTML emails from Figma that you can then import as custom HTML templates to the SendX email platform. If you're using the SendX platform and you're interested in creating custom HTML emails from Figma, this is going to be a really easy way to go about doing that. Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export HTML emails from Figma to Moosend using Emailify
date: 2024-06-06T00:00:00.000Z
---

# How to export HTML emails from Figma to Moosend using Emailify



#### Video Transcript

Today, I'm going to be showing you a quick tutorial on how to export your HTML email designs from Figma to the Moosend email marketing platform using the Emailify Figma plugin.

To get started, all we need to do is go to our Figma file, click on the resources icon at the top here, and then if you search for Emailify under the "Plugins" tab, click on that and then click on the Emailify item. You can run the Figma plugin by either clicking on this "Run" button here, or I'd recommend clicking on this little save icon here. That's going to let you run the Figma plugin from your saved Figma plugins list. I've already clicked on the "Save" icon, so I'm just going to go to my canvas, right-click anywhere, go down to "Plugins," then go down to "Saved Plugins," and click on Emailify. That's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is it helps you design HTML emails in Figma, which you can then export to production-ready code from the Figma plugin. I'm just going to create a brand new email here called Moosend template example, and I'm just going to click on add new email if I container. I'm just going to create a really simple example. I'm not going to go through all of the design tools that the Figma plugin offers today. If you're new to the Figma plugin and you're interested in learning more about that, there's a bunch of other good tutorials on the YouTube channel and documentation that you should check out. For today, I'm just going to be creating a really simple example and not modify any of the design or content. I just want to basically show you how to export this to HTML and then get it into the Moosen platform.

Once you're happy with your design and components, go ahead and click on the footer tab in the Figma plugin, then scroll down to the letter M. Under the letter M, you'll see a Moosend option for a footer, so go ahead and click on that Moosend footer. That's going to automatically pre-populate these links here with the correct tags that Moosend is going to be looking for. For example, if we click on this unsubscribe link and then click on the link settings up in the Figma plugin header, we can see here that the unsubscribe link tag has been pre-populated along with the view and browser link as well. These are automatically going to work once we upload our HTML to Moosend in a minute.

Now that we've got our Moosend footer included in the design, and assuming you're happy with the layout, you can preview the HTML just by clicking on the preview button in the Figma plugin. That's just going to give you a real-time HTML preview of what that code is going to render like in your email client. You can see here that we can switch between mobile and desktop, allowing us to check out the design before we export it for Moosend. If you want to add things like mobile overrides, you can click on the settings button here and then click on any of these layers to add mobile overrides like font size and padding. I'm not going to go into detail on these today, but feel free to check out the documentation and other video tutorials for more on that.

I'm just going to close off the preview now. I'm happy with my HTML template, so I'm going to close that off and then click on the export HTML button in the top right of the Figma plugin here. If you go ahead and click on export HTML, you'll see that the default option selected is the HTML email option. This will let us download the HTML to our computer, but I want to go to the platform integration section here and scroll down to the letter M. You'll see Moosend as one of the options, so just click on that Moosend option. Once you've got that selected, we can now add things like our subject line. I'm just going to add a test subject line here. You can also add preheader text, which shows up next to the subject line. When you open up the email in your email client, you'll have the subject line, and the preheader text shows up underneath or next to that. I'm just going to add some copy here and then export this for Moosend.

I'm going to go ahead and click on this export for Moosend button now, and that's going to export the HTML and images for me. Once it's done, you're going to get this message here that says your email code is ready for importing into Moosend. Click on this download your zip file button, pick anywhere to save it, and I'm just going to save it to my desktop. Once you've saved that, unzip that file. I've just unzipped it on my desktop and opened it up here. Inside the zip file, we've got a previews page which lets us check out the email that we exported in our preview. For example, if we create a new tab in our browser and drag that in, you can load up that preview to see what it looks like in desktop and mobile. The file we are looking for today is inside the email template folder.

You can see we've got our folder name matching the frame. Moosend template email has a folder called Moosend template email, and what we want to get is this index.html file. If we get that index.html file and then go to Moosend, log into your Moosend account, go to campaigns up the top here, and click on regular. Once it loads up, click on this create new campaign button in Moosend, click on regular, and then the create button under that regular heading. Once that loads up, you can do things like give it a name. I'm just going to call this test campaign and subject line. We can use the same subject line that we used in our Figma file. For preheader or preview text, you can leave this blank if you've already added it in your Figma file. Remember, we just added it to this input field here. If you've already added your preheader text here, you don't need to add it again in Moosend or it will double up, but you can add the subject line here and also in Moosend as well. The subject line is going to get rendered in the title tag in the HTML, so if you're using things like viewing the browser links, this text here is going to show up as the name of that tab or browser window. Populate this to be the same as Moosend, but if you've populated the preheader text, just leave that blank and keep the subject line the same.

Now that we've got that populated, click on next. That will bring us to the list. Choose your email list, whichever list you want to send the email to. This will bring us to step three, which is the design step. This is where we can now import our custom HTML design into Moosend. Scroll down to the bottom of this page and go down to this imported campaign template section. Toggle that from off to on. Click on that toggle switch in the bottom right, and that's going to swap that custom design template out for this imported campaign template section. Now, you can see we've got these different fields here, and it's giving us a few ways to import the code.

The method we want to use is importing it via pasting in the HTML code. To import our HTML that we just exported from the Figma plugin, we need to open up that HTML file. I'm going to open up a new browser window, drag and drop that index.html file we exported into this folder here, and drag and drop that into your browser. The quickest way to get the code is by right-clicking anywhere, going down to view page source, and clicking on that. Here you'll see all of the HTML code that was exported for this file. Select all of that content by command A on Mac or control A on Windows, right-click that, and click copy. That's going to copy all of the HTML to your clipboard. Then, go back to Moosend. Where it says import via pasting your HTML code, click on that text area and paste in that code by pressing command V if you're on Mac or control V if you're on Windows. You can see it's pasted in all of that code.

The final thing we need to do is click on this import button. Click on import underneath that text area, and you can see on the right it's loading in that HTML. This is what the campaign is going to look like. This is the real HTML that we exported from Figma for Moosend, and it's being loaded up as we expect based on the preview we saw in Figma. You'll notice down here it's got the unsubscribe link. If you look in the bottom left of the browser window, you can see that it's being populated with a dynamic unsubscribe link and it's also populating the view in browser link. You can see it's adding the Moosend link to view this campaign in the browser once we send it out.

That's basically ready to go. The next thing we need to do is click on the next button again in the bottom right corner. For this step, you can skip it. It's just saying you can add things like dynamic content or unsubscribe links. As we've already added our unsubscribe link, you don't need to do this. Leave that blank and click on next. This will give you the final step to schedule the delivery. If you want to send the campaign now, you can send it right away or schedule it to be sent at a later time. If you're using the Moosend platform, you're probably already used to this step anyway. I'm not going to go through how to send out the campaign and schedule that. You can do that in your own time. Once you're happy with it, you'll get to this final preview step once you populate all this content. You can send out the campaign as you want, but the important thing is it's going to use that HTML code, that HTML template that we just loaded in, and it's going to send that out as a nice custom HTML email directly from the Moosend platform.

That's basically it. I just wanted to run through all of those steps with you, showing you how to create, export, and import the HTML code from Figma into the Moosend platform for custom HTML email sends in Moosend. I hope that's helpful if you're using the Moosend email platform. Thank you, as always, for watching. We'll be back soon with more Figma tutorials like this one shortly.

---

---
type: tutorial
title: How to export HTML emails from Figma to Insider using Emailify
date: 2024-05-31T00:00:00.000Z
---

# How to export HTML emails from Figma to Insider using Emailify



#### Video Transcript

Today, I'm going to be showing you a quick tutorial on how to export your HTML email designs from Figma to the Insider email marketing platform using the Emailify Figma plugin. 

To get started, all we need to do is go to our Figma file, click on the "Resources" icon at the top here, and search for Emailify. Under the Figma plugins tab, if you click on the Emailify item, you can then run the Figma plugin by either clicking on this "Run" button here or by clicking on this little "Save" icon here, which will let you run the Figma plugin from your saved Figma plugins list.

I've already clicked on the save icon, so I'm just going to go to my canvas, right-click anywhere, go down to "Plugins," then go down to "Saved plugins," and click on Emailify. That's going to run the Figma plugin that we just saved a second ago. If you're new to the Figma plugin, the way it works is it helps you design HTML emails, which you can then automatically export to HTML code using the Figma plugin itself.

Today, I'm just going to be creating a really simple email called "My New Template." I'm going to click on the "Add Emailify Container" button. I won't be going through all of the design features in the Figma plugin today. If you're interested in those and you're new to the Figma plugin, I'd recommend checking out some of the other videos on the YouTube channel or in the documentation. For today, I'm just going to create a really simple design without customizing any of the content, which you can do in Figma. I will leave everything default and just create a simple design.

Once you've created your email design, the last thing you're going to want to do for the Insider platform is to go to the footage tab over in the Figma plugin. Scroll down and find the letter I. You'll see an Insider footer option. Click on that Insider footer component, and it will automatically add this preset footer to your email, pre-populating the unsubscribe link. If you go into the link layer and click on the settings button in the Figma plugin, you can see that the Insider global unsubscribe link tag is automatically being applied to that navigation item. You can customize the look and feel of this as you like and add your own address and other elements if you want to, but adding that Insider footer will automatically populate that unsubscribe link for you.

Once you're happy with that, you can preview the email by clicking on the preview button in the Figma plugin. This will give you a real HTML preview of what the design looks like, showing it as it would appear on mobile and desktop. You can customize these as required by clicking on any of these layers and then clicking on the settings button, which will let you apply things like overrides and links. Again, I won't go into detail about all that; you can check out the documentation or other videos for the design side.

Now that we're happy with our email design, I'm going to close the preview and click the "Export HTML" button. By default, this will automatically select the HTML email option under "Download to your computer." This will download a zip file, but for today, we actually want to upload this automatically to the Insider platform. Scroll down a bit underneath "Platform Integrations," and scroll down to the letter I. You'll see the Insider option. Click on Insider, and it will then ask you for your Insider API key. I'm going to show you how to get that in a second.

Log into your Insider account. Go to the top right corner of the page, click on your username, go down to settings, then click on the "Inone Settings" button. This will load the settings page in Insider. Once it loads, you can see there's a tab called "Integration Settings." Click on "Integration Settings," scroll all the way down, and at the very bottom, you'll see the API key section. Click on the "Generate API Key" button and select the "Email Content" key type. You have a bunch of different options, but the one we want is the email content one. Do not select email template or transactional email. Ensure email content is selected as the API key type, which will highlight in blue. Click on next, and that will generate your API key.

It will say that the API key has been generated successfully. Copy this and store it somewhere because it only shows you this once. Click on the copy button to copy the key to your clipboard. Store it in a password manager or somewhere safe if you want to reuse it later because it will not show you this again. Once you've copied that to your clipboard, go back to the Figma page, go back to the API key input field, and paste it into the input field.

You can now click the "Upload to Insider" button. You can also optionally add a subject line and preheader text. The preheader text appears after the subject line when you're looking at your inbox. Add preview text here as well. This will include it in the HTML file itself. Even though there's a field in Insider to add your own preheader text, this won't populate that because if we populated that as well, it would duplicate the preheader text. Add it here, and it will automatically add it to a template.

Once you've filled out the subject line, click on the "Upload to Insider" button. This will export all of the HTML code, upload all of the images, and upload the template itself to the Insider platform. It will tell you that you've successfully uploaded the Insider template to the platform. Go to your Insider account by clicking on this link, and it will take you to your Insider account in the browser. To get to your emails, go into the menu, go down to the side menu where it says "Experience," and click on "Message." Underneath "Message," you'll see the email item. Click on email, and that will load your emails list.

Once this tab finishes loading, you can see here that it's just created a new template called "My New Template," which is taking the name from your Figma file where we've named the frame "My New Template." It has added a unique timestamp to the front because if you try to upload a template with the exact same name again, it will bounce and won't let you create it. Unfortunately, we have to put in this little random ID here, but you can see when it was created, it will order it based on when it was uploaded, so you know which one was which if you re-upload it. You can see here in the tag section that it's also tagging it with Emailify, so you can clearly see that this has come from the Figma plugin.

Once you've uploaded it, you can view the template by clicking on the template name. When it loads, you'll see the template listing page, which lets you include recipients and other details. You can also go to the design tab. Click on the next step, which is "Design," and it will load the design page. You can see here that it has pre-populated our subject. We put in "My Subject" in the Emailify Figma plugin, and it has automatically populated that here. It won't pre-populate the preheader field because it's automatically adding that preheader content into the HTML. I'll show you what I mean by that by clicking on this edit button. We can open the HTML and see that it's looking great, just as we previewed it in Figma.

Now, this is in the Insider platform, and this is their Insider preview window. We can see what it looks like there, and this lets us view the HTML that was uploaded from the Figma plugin. You can see that it uses the subject line in our title tag, so that will show up if you ever open the email in a web browser. Scroll down a bit, and you'll see that the preview text has automatically been added. This means you don't have to add that into the Insider field; it's automatically adding that tag and styling it to be hidden but visible in your email client.

That's looking really good. You don't need to add any HTML here. I just wanted to show you what that looks like. You can preview it here to get a sense of what it looks like. Once you're finished, you can either click on save or go back. I'm just going to go back, and that's basically it. We have our email design here. You can assign it to a list by adding your list in the recipients section. You can change the name of the template or the campaign. We can call this one "My New Campaign" and save that, which will allow you to save the email details as well.

That's basically it. Once you're ready to send out the template, you can do that as you normally would. I won't go through all those steps here, but importantly, this is a quick way of getting your custom HTML templates out of Figma, as long as they've been designed using the Emailify Figma plugin. The Figma plugin doesn't support templates that have been pre-designed outside of the Figma plugin. As long as you use the design features provided by the Figma plugin, which you can find in the documentation or YouTube tutorials, you'll be able to design anything you want and have it uploaded automatically as production-ready HTML code.

I hope that's helpful. If you are using the Insider platform for your email marketing, this is a quick way of using the API integration with Emailify to get your custom HTML templates out of Figma directly into the Insider platform with one click using that automated feature. We'll leave it there for today. Thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to convert an image to vector SVG in Figma with one click using Convertify
date: 2024-05-20T00:00:00.000Z
---

# How to convert an image to vector SVG in Figma with one click using Convertify



#### Video Transcript

Today, I'm going to be showing you a quick tutorial on how to convert images to vectors in Figma using the Convertify Figma plugin.

To get started, all we need to do is go to our Figma file, click on the "Resources" icon at the top here, and search for "Convertify" under the "Plugins" tab. If you click on the Convertify item, you can run the Figma plugin by either clicking on this "Run" button here, or I'd recommend clicking on this little "Save" icon here. That's going to let us run the Figma plugin from our saved Figma plugins list. I've already done that, so I'm going to right-click anywhere on my canvas, go down to "Plugins," go down to "Saved plugins," then click on Convertify. That's just going to run the Figma plugin we saved a second ago.

By default, you can see that it's currently set to export Figma to sketch files because the Figma plugin can export Figma to different formats but also import different file formats into Figma. Today, we're just going to be focusing on this import to Figma category down here. If you scroll down, the one we want to select is "Import image as traced SVG to Figma." Go ahead and click on that option, and that's going to change the little context window here to allow us to drag and drop a JPG, PNG, or WebP image file from our computer.

I'm just going to go to my desktop. I've got a few different bitmap images saved. You can see here I've got one that's an anime one, I've got a couple of vectors and some logos, and a couple of other icon layers too. I'm going to go through these really quickly and show you how these work. To do a really quick example, we're just going to import this Pikachu.JPG image. We're going to drag and drop that file directly from our desktop into this little drop zone area in the plugin here. If we let go of that file, you can see here that it's now tracing the JPG image and generating the SVG paths, which it's now done. Once that finishes, you can go ahead and click on the "Insert SVG to Figma" button here, and that's going to import your SVG into the Figma file.

You can see that these are editable layers. We can click on those, select them, and change the color if we wanted to. You can see here the color changer is going to allow us to do that. This is a vector file converted from the bitmap image. If we were to import this image normally, just dragging and dropping that JPG file into Figma, you can see here that when I zoom in, the pixels are going to be pretty obvious. You can see the pixelation occurring around the eyes and the cheeks here. If we scroll over to the version that we just imported, you can see that these are vector layers.

That's a really quick example of what the import function does. It allows you to convert bitmap images into vector layers and have those imported into Figma. You've also got the option to download the SVG file, so if you wanted to download that file to your computer instead of inserting it into Figma, you can do that as well. I'm just going to run through a few more examples of what this looks like.

Another one we've got here is an anime character. Again, this is a bitmap image. Just going to drag and drop that PNG file into the Figma plugin, and that's going to convert this image into an SVG as well. You can see it's generating the SVG path. You can see that happening in real-time over here. Once that's ready to insert, again, we just click on the "Insert SVG to Figma," and you can see that's also imported our vector. Again, these are editable vector layers, and that's going to be imported directly from the image and converted from that PNG into a vector layer.

A couple more that I wanted to show you. The next thing I want to show you is the difference between upscaling an image first. If I show you this original image here, we've got this kind of poster with a dog and some text on it. I'm just going to import that into the Figma plugin, drag and drop it, and you can see once it imports this path, we've got the SVG ready to go. We're just going to insert that. This is kind of the initial example. If you see here, the text is okay. It's kind of imported it fairly well, but there's still a little bit of jaggedness around the edges there. The image isn't too bad either, but we can actually improve this by upscaling the image first. If you go to a website like Upscale Media, there's some other ones like ILoveImage.com, and you can upscale it through there as well. What you want to do is actually upscale the image beforehand. In this case, I've upscaled at 4X using this AI upscale feature. You can see here the text is quite a lot sharper. The vector is quite a lot sharper as well. Now, I'm going to run a comparison by dragging and dropping that 4X upscaled image into the Figma plugin as well. I'm going to drag and drop that JPG, and that's going to convert this JPG image with the upscaling to a vector SVG that we can import as well.

You'll notice that the time it takes to convert larger images or more complex images takes a bit longer than the smaller images or simpler images. That's just something to call out if you notice a speed difference there. Now that it's converted the larger upscaled image, we can insert that one to compare it. I'm going to click on the "Insert SVG to Figma," and you can see here this is four times the size, but you'll notice that the text is sharper. The text is looking a little bit sharper than the original one. The image down here, you can see that there's a little bit more detail around the mouth as well. You can see here with the mouth, it's missing some of those smaller features down here. When we scroll over to the upscaled one, you can see that it's carried those over. You get a little more detail with that image because it's upscaled. That's just something I wanted to call out. If you've got a lower quality image, you can use a service like this to upscale it beforehand. If you do that before importing the image to convert to vector in Figma, that's going to allow you to get a sharper result.

I'll show you another example of that here. I've got the Nike logo that I'm just going to drop in. This is the original one. It's a bit more of a lower resolution one, so that won't take quite as long as the next one we're going to do, but you can see it's generating the paths for this logo. Once it's finished, I'm going to show you a comparison between this one and the larger one. I've got a four-scale, four times upscaled one over here, so we'll import that in a second. You can see this one is a little bit blurrier around the edges. I'm going to show you what that looks like. If we insert that SVG into Figma, you can see here, as I just mentioned, because the original image has a bit of blurriness and compression artifact around it, you can see here all these little artifacts around the logo. That's because of the JPG compression that's getting included, and that basically follows through in the converted vector as well. You can see those artifacts are getting translated into these little paths here. What we want to do is really clean up that original image, and one way of doing that is upscaling it. I did upscale this one as well, and you can see the lines are a little bit sharper there. We'll drag and drop that one in as well, and then we can compare the two in Figma and see what the conversion between the original JPG image was to the vector layer here with this upscaled one, which will also get converted to the vector layer in a minute.

As I said, this is going to take slightly longer because it is upscaled. The larger the image and the more complex the image is, the biggest thing those two factors are going to determine how long the generation of the SVG takes. We're almost done. We're just up to 95%, and once that adds the last bit, as it's just done, we can now insert that SVG to Figma to compare it. I'm just going to click "Insert to SVG," and you can see here this one's upscaled. This one's actually just a 2X upscale, so it's not like the 4X one we did before. Immediately, you can see that the paths are much sharper. We've got fewer artifacts around these letters. If we zoom in here, you can see that there are some of these artifacts showing up in the original one, but just doing a 2X upscale, you can see that it's actually much sharper, and there are many fewer artifacts than the other one had. That's just a quick example of what that looks like, and I would recommend using an upscale feature to do that. Ideally, you want to start off with the sharpest possible input image.

This works really well with things with clean lines or flat style colors. 2D colors work really well. I'll just do a couple more to show you that. We've got a JPG here of this little logo, so we can import that into Figma, just converting that JPG file. This is just a flat JPG of the Microsoft Word icon, but again, this is a very sharp-looking, upscaled original image, which is in bitmap, and that's really what you want to do as your input. You want to have the sharpest possible input. Even though it's not a vector, it's a very high-resolution, sharp, clear image that we can then import into Figma and convert to a vector.

That's ready to go, so I'm going to insert that SVG, and you can see here it's extremely sharp. The lines are extremely clean because the input was so good. We've now got this vector that we can use inside of Figma however we want, and that's going to stay very sharp. Of course, you can also edit the colors of this. I'll just do one more example, and then we'll finish up the tutorial.

I'm just going to import this puppy JPG as well. You can see this one's got quite a few different shades of colors in it. It's more of a detailed vector, whereas this one's much more of a flat vector. I'm just going to drag and drop that puppy JPG file into the Figma plugin and convert that into a vector as well. Once that's done, you can see here it's ready to go. I'm going to click on "Insert SVG to Figma," and that's going to allow us to import that.

The important thing I wanted to show there is that it will try and match up all of the input colors. You can see that the original one had quite a few bits of input of detailed colors, and this is carrying that over fairly well. I just wanted to show you an example of that. Again, it's not going to be 100% perfect. Vectors are much different and much more complicated to get right than the original bitmap because bitmaps are using pixels, whereas SVGs and vectors use paths. It's quite a different way of rendering imagery, but this plugin and this feature, where it allows you to import images as trace SVGs into Figma, will hopefully allow you to save some time instead of having to manually trace all of these things with the pen tool or converting them to vector using some other manual method.

I hope that's given you a good overview of what the plugin can do. This is a new feature that's just been added as an option. You want to go to the "Import to Figma" section, click on "Import images traced SVG", and that's going to allow you to convert images from your computer and convert them into vector layers that will be usable in your Figma file automatically. Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to import slides from PowerPoint to Figma in one click using Pitchdeck
date: 2024-05-13T00:00:00.000Z
---

# How to import slides from PowerPoint to Figma in one click using Pitchdeck



#### Video Transcript

Today I'm going to be showing you a quick tutorial on how to import slides from a PowerPoint presentation file into your Figma file using the Pitchdeck presentation Figma plugin.

To get started all we need to do is go to our Figma file, click on the little "Resources" icon at the top here, and if you search for Pitchdeck then under the Figma plugins tab, if you click on the Pitchdeck item, you can run the Figma plugin by either clicking on this "Run" button here, or I'd recommend clicking on this little "Save" icon here, and that will let you run the Figma plugin from your saved Figma plugins list. So I've already clicked on the save icon so I'm going to go to my canvas, just right-click anywhere, go down to "Plugins", then go down to "Saved plugins", and click on the Pitchdeck item, and that's just going to run the Figma plugin we saved a second ago. 

If you're new to the Figma plugin, the way that it works is it takes frames from your Figma page and allows you to turn those into a presentation that you can then export to various formats like a web presentation, PowerPoint file, keynote file, Google Slides, or PDF. However, today I'm not going to be focusing on those features, I'm going to be showing you how to take a PowerPoint file that you've already got and import the slides from that automatically into your Figma file that you can then edit and customize using the tools in Figma.

I'm going to use this example here, it's just a minimalist presentation that I've got set up, and what we're going to do is we're going to import this file into our Figma file. And the other thing I wanted to just add is you can also add slide notes, so I'm just going to add those in here. So add slide notes to the first slide. I just want to show you how those get imported as well. So I'll just save that and I'll add one more on here. So more slide notes on the third slide. And once we import this in a moment, you'll see these get carried over into our Figma file too. So I just wanted to make sure we included those.

Now that we've got our PowerPoint file saved, all we need to do is go to our Pitchdeck Figma plugin and you can click on this little "Import PPTX" drop zone down here or you can just drag and drop a file directly into that. So I'm going to go to my desktop, I'm going to take that PowerPoint file that we just saved which is a PPTX file and I'm just going to drag and drop that from my desktop directly into this little "Import PPTX" drop zone in the Figma plugin and let go. And once you let go of that, you can see that the file's being loaded and it's giving us a little status indicator of which slide it's currently importing into Figma. 

This process is going to depend on how many slides you've got in your file, how many images and layers are in each slide and it's going to give you an update based on that amount of content. So once it gets to the final slide, you'll see it kind of finalize here at 100%. And once it finishes that, you'll be able to see that it gives you a success message saying that we've just imported 21 slides from our PPTX file.

You can see in the Figma plugin it's automatically loaded those slides up. It actually creates a new page for that in our Figma file, just to separate it from any of the other content you've got set up. You can see here in the little brackets, it's telling us that it's been imported from that PowerPoint file. And if we zoom in, we can actually edit and inspect these layers as well. So, for example, we can edit this text. So we can edit that as we would normally in Figma. These are just regular image layers that we can now modify. If you want to shrink those or move those around, those are just editable layers in Figma that we had in PowerPoint before. Same with these ones.

You can see down here in our speaker notes section in the plugin, it's automatically imported those into our speaker note in the Figma plugin. And you'll see that on the first slide as well, just down here where we added those speaker notes a moment ago. So that's looking really good. It doesn't import things like animations. So if you do want to animate certain layers in your presentation for the web presentation format, you can manually go through and add those in. You can just select an animation and add those in yourself if you'd like to. Otherwise, you can just leave them as static as well. But that's just one example of a file that I wanted to show you.

We'll try one more just to give another example here. So we've got this portfolio PPTX file. So I'm going to drag and drop that one into the Figma plugin as well. And while that's loading, you can see it's just adding those slides in the same way. This one's only got 10 slides so it's going to be a little bit quicker. And you can see it's now imported those 10 slides into our Figma file as well. Again, it's creating a brand new page in Figma and automatically loading up those frames into our presentation Figma plugin as well. And of course, we can edit these. So we can zoom in and edit that content.

This is just regular text content automatically applied to the size and font that we had in PowerPoint. I'll show you what that looks like in PowerPoint as well to compare. So you can see here we've got our design and we've got our content that we just imported. So you can see all the different slides that we just imported into Figma. And if we scroll down here, you can see that these are all editable as you'd expect as well. It's worth noting that only certain types of layers or certain types of elements from the PowerPoint files are supported. If you go to "docs.hypermatic.com/pitchdeck" and check out the import PowerPoint file docs on the site here, you'll get a bit of an extra detail of what elements are actually supported.

It'll import slides, it'll import images, text, shapes, tables. Currently just supporting the text content and speaker notes, but it currently doesn't support things like charts or SmartArt, headers and footers, embedded videos. And I would also say layouts in general can be a little bit tricky as well. If you're using a preset layout from a template that PowerPoint creates, those can also have some issues as well. So the best thing to keep in mind is you probably just want to keep these really simple. You want to make them sort of like these ones where it's mostly just text layers and image layers or shape layers, and those are going to work quite well. But once you start getting into these more complex elements, you might run into some issues. So that's just something to call out as well. 

The final thing I wanted to go through is you might notice that some files just don't seem to load. So I've got this other PPTX file here which was downloaded from the internet. So I didn't create it from scratch in PowerPoint, and that may have something to do with it. It might have been created in a different version of PowerPoint or a different tool that exported it to a sort of strange version of PowerPoint.

If I try and drag and drop this file, you'll see here that it's going to tell me that it can't open the file and it's telling me to try resaving it from the PowerPoint app. So we can try that now. So if you open up this file, in this case, that doesn't want to open in the Figma plugin, just double click on that, open it up with the native PowerPoint desktop app. So just make sure you've got Microsoft PowerPoint installed on your computer. And all we're going to do is just save as. So you got to go to File, Save As, and we're just going to save this as a new version.

I'm just going to call this one new and save it to the desktop, same format, so PPTX format, but we're just going to resave this after opening it up in PowerPoint. So once you've saved that, just go ahead and click on Save. And you can see we've got a new PPTX file that we can try. So if we go back to our Figma file, drag and drop that new file that we just resaved from PowerPoint into the little drop zone area in the plugin, and you can see this time it's loading up the slides. So that's just something to call out if you do run into an issue where it's not wanting to open up the file.

This is usually if the file's been exported from a different program or if the file format's just a little bit weird. Opening that up in the most recent version of PowerPoint and resaving it as a new PPTX file, that usually resolves that issue. So you can see here that I've got my slides now imported from that PPTX file. So if we open up that file, you can see that the content is getting brought over. Also just mindful of fonts, so if you've got fonts installed, you want to make sure those are installed on your computer and matching up in Figma.

Sometimes the naming can be a little bit weird as well. So in this case, you can see that the fonts aren't getting applied correctly, but the font sizes and font styles and everything like that colors are all being applied. You may just need to go through and manually reset some of those fonts. So that's just another thing to call out. As you can see, it's not 100% perfect and it is still in BETA so this will improve over time but if you've got a simple enough presentation already designed in PowerPoint that you want to import into Figma to give yourself a little bit of a head start in case you need to redesign some of those slides in Figma from your PowerPoint file this is a really easy way of automatically importing those slides and automatically importing that text and image content from a PowerPoint file directly into your Figma file without having to manually go through and recreate every slide from scratch.

I hope that's helpful if this is one of the use cases you've run into where you do need to get slides from a PowerPoint file into Figma sometimes there's weird requirements at certain companies to do that so hopefully this is going to help your workflow if you are one of those people. So thank you as always for watching and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: Auto repeat and sync Figma layers from a spreadsheet using CopyDoc
date: 2024-04-17T00:00:00.000Z
---

# Auto repeat and sync Figma layers from a spreadsheet using CopyDoc



#### Video Transcript

Today, I'm going to be showing you a quick tutorial on how to automatically sync and repeat any Figma layer in your designs with rows from a spreadsheet using the CopyDoc Figma plugin. 

To get started, all we need to do is go to our Figma file, click on the resources icon at the top here. If you search for CopyDoc and then click on the "Plugins" tab, you can then see the copy do result popup. Just go ahead and click on that, and then you can run the Figma plugin by either clicking on this "Run" button here or I'd recommend clicking on this little "Save" icon here. That will let you run the Figma plugin from your Figma plugins list later. I've already clicked on the save icon so I'm going to go to my canvas, just right-click anywhere, go down to "Plugins," and then go down to "Saved plugins" and click on the CopyDoc result. That's just going to open the Figma plugin that we saved a second ago.

If you're new to the Figma plugin, it has a bunch of different features, but today I'm just going to be focusing on the sync content feature down here. What you want to do to get started is just click on this little sync content button. So, I'm going to click on that now and that's going to open up this little window here. It's going to give us the option to sync content from either a CSV or Excel file or we can open that up and select a Google sheet URL or an air table URL. To keep things simple, I'm just going to show you a CSV file for now. You can see on the side here that we've got a little link to download some sample data. So, I'm just going to go ahead and click on that content sample data link and that's going to allow me to save this to my desktop. I can save that to the computer and just replace the one I've already got there.

If we open that up, you can see that in the spreadsheet, we've got a few different columns. We've got a column called title genre minutes and poster. If you notice, I've got the layers set up in my Figma file to match those names. You can see here, I've got a couple of frames set up and you can see if I open up those layers you can see that the layer names correspond exactly to the header of the spreadsheet. So, you can see underneath title that's where I've got my title layer, genre is there, and then poster is the name of this blank rectangle layer. So, that's where our image is going to get synced. I'm going to show you a really quick example of what this looks like.

If we want to sync this up to some existing layers that we've already got selected, what we can do is drag and drop our CSV file directly from the computer into this little Drop Zone area in the Figma plugin here and just drop that in. That's going to load up a preview of the data that we just saw in our spreadsheet file. So, in Figma, you can see that it's loading in the header. It's loading in the data for all those rows and you can see image previews as well. By default, this is going to allow you to select multiple frames or multiple layers and it's going to automatically loop through those selected layers and sync the data.

When I click on this sync rows with layers button, that's going to automatically sync up the content with my selected layers. It's syncing those up now and you can see it's automatically replaced those content layers. This is really handy if you've already got your layers duplicated but for today I'm also going to be showing you how to automatically duplicate these if you've only got one layer created. I'm just going to delete those layers and I'm going to come down here and I'm going to show you what this looks like to auto repeat these layers.

I'm going to keep my same data selected here and this time I'm going to enable this auto repeat toggle. So, in the Figma plugin just enable this auto repeat toggle and you can see that the messaging has changed here to ask us to select a single layer that contains our named layers. In this case, I can use this wide card design that I've got. It's just a frame with the exact same layer structure that we saw before. So, we've got our title layer, genre, poster, etc. That means I can now select this single layer and what it's going to do is automatically loop through all of the rows in my spreadsheet and copy this layer and update the content for each row.

I'll show you what that looks like now. I'm just going to click on the sync and repeat selected layer button in the Figma plugin and that's going to automatically copy that layer and duplicate it the number of times that it appears in the spreadsheet. So, we can see we've got four rows in the spreadsheet so it's taken that single layer that we selected over here and it's automatically created an auto layout frame and it's duplicated it four times and swapped in the content each time. That's automatically doing that for us.

What we can also do is we can add these to an auto layout element first. For example, if we wanted to add this wide card into our vertical auto layout container here. What I can do is create this Frame and apply some auto layout to the parent frame. In this case, I'm just going to add some auto layout over here. I'm going to make that vertical. So, what that's going to allow us to do is automatically repeat this layer inside of an existing auto layout frame.

For example, if we now click on this white card layer inside of the vertical auto layout container, I'm just going to sync that up again. So, I'm going to click on the sync and repeat selected layer and that's going to automatically duplicate the layer and you can see here that it's kept it all within the existing auto layout parent container. So, it's kept the original layer intact but it's copied it four times inside of the exact same parent container that the original layer was already in. This is really handy if you've already got a design created and you've got a placeholder layer in there and all you want to do is sync up that data and repeat it the number of times that you've got it in a spreadsheet. That's really handy.

I'll show you what that looks like again just using a different layout. So, I've created this component here. You don't have to use components you can just use a frame if you like but in this case I'll just use a component example. So, what I'm going to do is I'm going to copy that component I'm just going to paste that into this Frame here so I've got this one called a horizontal auto layout container. I can actually make that auto layout container reel by clicking on this auto layout plus button over here. So, I'm just going to turn that into an auto layout container and I'm going to set this one from left to right. This is going to be a horizontal layout.

Now what I can do again is just click on the content layer that contains my content layers that are named. So, in this case, I've got my instance which contains the content layers. I'm going to click on that instance inside of the auto layout container and one more time I'm just going to click on the sync and repeat selected layer button and that's going to automatically again copy that layer and duplicate it those four times based on the rows that we've got in our spreadsheet. That's what that looks like there. Again, you can now either hide or remove that original layer if you want. You can take that out there. The cool thing about using this with components is you can then automatically change the master component and change the styles of that in one place and have those automatically update for all of your synced components or instances as well. That's really handy if you want to use the instances or use the component as the original layer and then copy the instances based on your spreadsheet data that can be really helpful for styling it later.

As I mentioned you can do this with a Google sheet as well. If you wanted to use a Google sheet all you need to do is click on the go back button, come back to this tab over here again make sure the content tab is selected there are some other options that you can sync up but today I'm just going to be showing you the content one. You can change this from CSV and Excel to Google Sheets for example. So, what we can do is change that copy our spreadsheet data from our Excel file and if we go into Google Sheets I'm just going to close this off for a second and go to Google Sheets I've just got a new Google sheet set up. I'm just going to paste my data into the Google sheet and then what you want to do is just go up to the share button in Google Sheets click on that and you want to make sure that the General access setting is changed from restricted to anyone with the link. Once you select anyone with the link you can then go ahead and click on copy link copy it to your clipboard and then go back to the CopyDoc Figma plugin and under the sync from Google Sheets URL option you can then paste in that link into the input here.

I'm going to paste that now that publicly sharable link and you can see it's loaded up our spreadsheet it's saved it in there as an option and if you have multiple tabs you'll see the multiple tabs pop up in here as options today I've only got the one sheet so I've got that selected so then you just have to click on the load content preview button and again this is going to load in the content exactly the same way as the Excel file but this is going to load it remotely from your Google sheet. If you want to keep it up to date somewhere in Google Sheets and then reuse that content over and over in the Figma plugin you can easily do that as well.

Again, we can see what that looks like just by clicking on any of these layers and this time I'm just going to duplicate the component itself. So, go ahead and click on the auto repeat toggle make sure that's turned on and then click on sync and repeat selected layer and again that's going to copy our component duplicate it four times and create those instances and again you'll notice because I didn't have the component inside of a container that already contains auto layout in that case it will always create a new frame which includes auto layout set on it vertically and then you can automatically add those copy layers in there. It'll automatically create those you can do whatever you want with them it's just a way to neatly organize them if you don't already have the element inside of an auto layout frame. So, if you want to do that just make sure it's in an auto layout frame first and that'll always use your own auto layout frame.

That's basically it; I just wanted to run through this new feature of being able to auto repeat layers again you've got the option to turn that off and manually select the layers you can see here when I select the number of layers it's only going to sync with those selected layers it's not going to automatically repeat anything it'll just select the layers that you've already got in Figma and map those to the first number of rows in the spreadsheet. So, you can see here I've got two layers selected so it's showing those two rows. Yeah, feel free to give this a try hopefully it saves you some time from having to manually copy paste a bunch of layers that you know you want to sync up and if you've just got one that you want to automatically repeat from however many rows in your spreadsheet you can now do that automatically just by checking the auto repeat toggle. Thank you as always for watching and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: Sync chart data to Figma from a spreadsheet using CopyDoc
date: 2024-04-16T00:00:00.000Z
---

# Sync chart data to Figma from a spreadsheet using CopyDoc



#### Video Transcript

Today, I'm going to be showing you a quick tutorial on how to automatically import charts into your Figma files using your own spreadsheet data with the CopyDoc Figma plugin. 

To get started, all we need to do is go to our Figma file, click on the little "Resources" icon at the top here, and then if you search for "CopyDoc" and under the "Plugins" tab, if you click on the CopyDoc item, you can run the Figma plugin by either clicking on this "Run" button here or I'd recommend clicking on this little "Save" icon here, and that'll let you run the Figma plugin from your Figma plugins list.

I've already clicked on the save icon, so I'm just going to go to my canvas, right-click anywhere, go down to "Plugins," and then go down to "Saved plugins" and click on the CopyDoc item, and that's just going to run the Figma plugin we saved a second ago. If you're new to the Figma plugin, it's got a bunch of different features in it, but today I'm just going to be focusing on this sync content feature which is what's going to help us import our chart data from a spreadsheet into our Figma design.

To get started, just go ahead and click on the sync content button down here, and that's going to bring up this little window here. What you want to do first is change the default "Content" tab and go over here to the "Chart" tab and just click on chart. Once you click on chart, you'll see that tab gets selected, and then we've got the option of selecting what kind of chart we want to import into our Figma file. So, by default, it's just a bar chart, but you can do a column chart, you can do an area chart, you can do donut charts, py graphs, all those sorts of things. So, I'm just going to keep it simple for the time being.

What you can do is select the chart that you want. So, in this case, just a bar chart, and then you can download a sample file with sample data for that chart. So, depending on what chart you've got selected, this will change. So, for example, if we click on bar chart and then click on that link, that's going to let us download a sample CSV file to our computer that we can then open up and edit with our own data.

You can see here I've got the bar chart sample data CSV. And if we open that up, it's a very simple CSV. You've got a header with the category and value which you can obviously rename, and then you've got the values for each of those columns next to each other. So, I've already edited a bar chart over here. So, if we go to our Excel file, you can see here I've got a bar chart that I've updated, and I've called it company and employees. So, the header is companies and employees, so these are going to be the labels for those sets of data. And then every other row underneath each of those columns is what we're going to be using for the data to get imported.

Now that we've got this set up, we've got our CSV file saved with this updated data, we can go back to our Figma plugin, and we can drag and drop that CSV file that we updated a second ago with the employee data into the Figma plugin. So, you can drag and drop that CSV file into this Drop Zone here with the bar chart option selected. And then once you let that go, you'll see a little preview load up in the Figma plugin. So, it's going to be a bit hard to see it at full scale in the Figma plugin because the window's quite small, but it just gives you an overall sense of what kind of data is going to be loaded in here.

Once you're happy with your preview, just go ahead and click on the insert chart to Figma button. And once you click that, it's going to instantly insert a chart based on the data that we just loaded in from our CSV file. So, you can see here that we've got an editable chart. These are all layers that we can open and interact with. You can see if I click on this rectangle vector layer, I can actually change the width and size of that. You can, of course, change things like colors. So, if we go to our Color Picker over here, we can change the color of that graph. We can do things like change the font sizes. So, if you wanted to call out this particular company, so if we wanted to change the Amazon font to bold, you can do that. You can increase the size of that and position it however you like.

You can change that around there. And yeah, this is basically an editable graph that we've imported from our CSV data. Let's try another one. So, if you click on the go-back button, the other one that we saved was this stock price one. So, if I open up that, you can see I've got a similar looking graph. So, I basically used the column chart sample. So, I downloaded the column chart sample data to the computer, and you can see what that looks like here. It's just got the category, another heading, the values, so value one and value two. So, this is going to let us have two sets of values per category. And you can see that I've edited that in my Excel file. So, instead of those default values from the column data, you can see here I've updated it. Instead of category, it's company. So, I've got a list of companies, and then I'm comparing two sets of values.

This is going to add these two sets of values as a column chart. So, I'll show you what that looks like when we import it. So, all you need to do is go back to your Figma file, click on the little chart tab, click on the column chart just to select the kind of chart that you want to create. And again, we've got that updated stock price data in a column chart format that we downloaded before and edited. So, I'm just going to drag and drop that into the Figma plugin with the chart tab selected and drop that in. And again, you can see we've got a nice little preview here of roughly what's going to be imported. So, you can see the company names at the bottom. We've got the stock price Legend up here. So, that's the color-coded legend and the different sets of data.

I'm going to again click on the insert chart to Figma button, and again, that's going to import this chart automatically into my page. So, I'm just going to move that up so we can see it a bit clearer. And if we zoom in again, you can see these are completely editable. We can jump in here and edit those. So, we can make these shorter or taller. And again, you can see all the data is being reflected based on the data that we had in our spreadsheet here. So, that's looking really good.

And as I said, you can use many different types of charts. So, all you need to do is select the chart that you want. You can hover over it for a second if you want to see what kind of chart it is. You'll get a little tooltip popup so you can do that if you're unsure what kind of chart it is. You can see this one's a donut chart. This one's a combo chart. This one is an area chart. And again, just click on that, click on the download sample data CSV link, save that to your computer, edit it in whatever software you prefer, and then drag and drop that back in, and it'll load it up.

The other thing I should mention is using CSVs and Excel files is just one option for data sources. If you want to load it from something like a Google sheet, you can just click on this little select box here and switch that out to Google Sheets. And that will let you paste in a Google Sheets URL. So, you can go in there and paste in your own Google sheet.

I've just opened up a blank Google sheet page in the browser. So, I'm just going to call this one data example, and I'm just going to hit enter on that. And what we can do is save some of this data or copy some of this data into our Google sheet. So, for example, if we were to open up this spreadsheet that we've got here, you can see that we've got the data that we can copy. So, I'm just going to highlight all of that data, bring it into my Google sheet here, and just paste that in. And we can edit this obviously as we like.

If we want to change Amazon to Nvidia or something like that, we'll change another one just to make it clear what's going on. So, we'll make that one Tesla. And then we can now share this spreadsheet URL by clicking on the share link up here. And you'll need to make sure that the general access setting is changed from restricted to anyone with the link. So, once it says anyone with the link, you can then copy that link by clicking the copy link button, going back to your Figma plugin, and making sure that you've got the sync from Google Sheets URL selected. And then you can paste in that URL that we just copied into here. So, paste that in. That's going to load up the tabs in your spreadsheet. So, you can see it's loaded up the name of the spreadsheet which is data example, and we've only got one tab in our spreadsheet, so we're just going to keep that selected at sheet one.

And because we're loading in a column chart in this case based on the original data that we edited, we can just go and click on the column chart tab up here. So, we've got that one selected. So, it knows which chart we want to import. And now that we've got the data example selected with our data for that chart, we can now go ahead and just click on the load chart preview button down here. And that's going to load the data directly from Google Sheets, give you a nice little preview here. So, that is dynamic data. So, for example, if we were to change this value down here, so we'll make this one much lower, we'll just make it basically non-existent and save that. And that's the stock price for the Nvidia one. So, you can see here it's very high at the moment.

If we go back and then we refresh that data, we can then go ahead and click on the load chart preview button again. That's going to get the data fresh. And you can see here that the Nvidia stock price has gone down from that massive line a second ago, as you can see here, down to this smaller line that we just edited.

Using a Google sheet is a very convenient way if you have data that changes a lot and you're going to be reusing the data in your Figma designs, and you want to keep resyncing data using Google Sheets as an interesting example for doing that. Again, same process, just click on insert chart to Figma. That's going to automatically insert the chart from the Figma plugin. And again, you can do with that whatever you like. You can change the colors, you can change the fonts, change the values even if you want to do that, and basically you can edit this as if you've created the layers yourself.

So, a quick way of editing the colors, just a quick tip, if you click on the chart frame itself and just go down to the selection colors section on the right-hand side here, that'll give you easy access to all of those colors that you can then just change in one go. So, for example, you can theme this really easily just by clicking on those selection colors and changing those in the sidebar here. And the same goes for text and backgrounds and all that sort of stuff.

That's pretty much it for today. I just wanted to give you a quick rundown of the fundamentals of using the chart sync feature in the CopyDoc Figma plugin to automatically import your data from a spreadsheet or Google sheet into the Figma plugin and then adding that into your Figma designs as editable layers. Hopefully that helps with your workflow if you're working with charts and spreadsheet data a lot. Hopefully, the CopyDoc Figma plugin can help your workflow and automate this a little bit more. So, thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: Sync Airtable spreadsheet content to Figma using CopyDoc
date: 2024-04-15T00:00:00.000Z
---

# Sync Airtable spreadsheet content to Figma using CopyDoc



#### Video Transcript

Today I'm going to be showing you a quick tutorial on how to sync your spreadsheet content from Airtable into your Figma layers using the CopyDoc Figma plugin. 

To get started, all we need to do is go to our Figma file, click on the "Resources" icon at the top, and if you search for CopyDoc under the "Plugins" tab, if you click on the CopyDoc result, you can run the Figma plugin by either clicking on this "Run" button here or I'd recommend clicking on this "Save" icon here. That's going to save it to your Figma plugins list for easy access.

I've already clicked on the save icon, I'm just going to go to my canvas, right click anywhere, go down to Figma plugins, then go down to "Saved plugins", and click on the CopyDoc item. That's just going to run the Figma plugin that we saved a second ago.

If you're new to the Figma plugin, it has a bunch of different features to help you update text in your Figma designs, but for today I'm just going to be focusing on this sync content feature that we can pull in spreadsheet data from the Airtable platform into your Figma designs and sync up those layers. What we're going to do is just click on the sync content button in the Figma plugin here, and then what we're going to do is make sure the content tab is selected underneath this little tab section here. We want to change the default sync option from CSV Excel file and click on that drop down and change that to sync from Airtable URL.

If you click on sync from Airtable URL, that's going to change the data source to Airtable and it's going to allow us to add a new Airtable into our Figma plugin. What we need to do for this is to get our Airtable URL. In this case, I've already created an Airtable in my browser. You can see here I've got my Airtable set up. All I'm going to do is copy that link. I'm just going to grab that link from the URL bar and paste it into the URL field here in the Figma plugin. I'm pasting that in. You can see it's saying that it's a valid Airtable URL. It's picking up on the URL that we've just pasted.

The next thing we need is the token. If you click on the token link, that's going to open up the browser to your developer Hub page. At the moment, I don't have any personal access tokens created, I'm just going to go ahead and click on the create token button in the Airtable developers page. Click on create token and give this a name. I'm just going to call this CopyDoc Figma plugin integration. For Scopes, you can see in the Figma plugin it's saying that we need to add the data.records.read scope. Make sure that you click on add a scope and select the data.records read scope. I've just selected that in there.

Importantly, you need to Grant the API token access to the base that your table is in in Airtable. Click on add a base. I'm just going to add the CopyDoc base that I've got set up here and just say all current and future bases in this workspace. That'll be different for your end, but just select the place where you know you're going to be reading the spreadsheet data from and add that in. Then you want to go ahead and click on the create token button in the bottom here. Click on create token and then you can copy this to your clipboard by clicking on this little copy icon here.

That's copied the token to our clipboard and it will only show it to you once, if you want to save that somewhere secure, now is your chance to do that. But I'm just going to copy it to my clipboard and paste it into the Figma plugin here where it says personal access token. I'm pasting that in. We've added in our Airtable personal access token, and then now we just want to give this Airtable a label. I'm just going to call this one movies or movie posters. I'm just to say movie poster details and I'm just going to click on save new Airtable.

I'm going to click save new Airtable now and that's going to load in the Airtable data for me. You can see here that it's loaded up the data. Going back to our spreadsheet here, you can see in Airtable it's currently set up with these four columns. We've got title, genre, minutes, and poster. If we go back to the Figma plugin here, you'll see that that content has all been pulled in to this preview down here.

What this is relating to is the Figma layers in our designs. You can see here we've got a few layers already set up with those named layers. If we open up this panel here, you'll see that the layers are named poster. #poster is this little rectangle layer. That's where our image is going to go. We've got #title, #genre, and #minutes. These layer names in Figma all match up to the header names in the spreadsheet. You just have to make sure that the names that you give to each column in your Airtable at the very top are named exactly the same as your Figma layers inside of each frame that you want to sync up.

To show you what this looks like when we now sync those layers, I'm just going to select a few different layers. You can see I'm selecting. The number of layers is getting reflected here. Every layer that you select is going to get looped through and the matching layers inside of each one is going to map to the content for each row.

To give you an example, I'm just going to do these three and I'm just going to click on sync rows with layers. You can see that that's downloaded the content from Airtable and synced it to our Figma layers here. It's basically swapped out the content for the #title, #poster, #genre, and #minutes. That's all been replaced with the real content that we pulled in from our Airtable here.

Now, if you're wondering how to quickly get started with this, you can click on this go back button here. If you want to get a sample CSV, a sample spreadsheet of this data structure to give you a bit of a quick head start, you can actually just click on this content sample data CSV link here and that's going to save it to your computer. You can just click on Save. I'm just going to replace the one I've already got there. If we open that up, you can see that we've got this content sample data CSV file. This is exactly the same data that I've got loaded into Airtable. This is just an example again of an easy way to get a quick overview of what that data structure looks like, the first row being your header.

You just want to give each column the name of the layer that you want to match in Figma. Make sure that's matched up and then you can proceed to add each row with the content for each of those different items per column. You can add as many rows as you want. Importantly, you can also sync these automatically. If you don't want to create all of the rows beforehand and copy paste those, I'm just going to delete those ones now, you can actually automatically sync those and repeat them as well.

Now that we've got our Airtable saved, we can easily go back to that just by selecting it from our list. If you've added more by clicking on this little plus icon, you can add more Airtables if you like, but for now we've just got this one. I'm just going to select that one again, click on the load content preview button here, and that's going to load up our Airtable data again. You can see here we've got this little switch that says auto repeat.

If you want to automatically repeat a single row, you can do that by enabling the auto repeat toggle up here. You can see that the messaging has changed to say select a single Figma layer that contains your named layers. Before it was saying select multiple layers, the example we just did a minute ago, but in this case we're just going to repeat one layer as many times as the rows appear inside of your spreadsheet.

In this case, it's going to loop through 1, 2, 3, 4. We can click on this single card layer here and again, we've got our named layers inside of that layer. Now that we've got the frame selected, we can click on the sync and repeat selected layer button here. That's going to pull in all of the content, but this time it's going to automatically copy that original layer and duplicate it as many times as the content appears in your spreadsheet.

You can see it's taken this original card here, it's copied that layer automatically, pasted it four times, and it's swapped out all of the data for each row from our Airtable. That's a really quick way of automatically looping through your Airtable spreadsheet rows if you don't want to manually copy paste, you know, 100 different layers.

I'll also show you how to add this to an auto layout frame that already exists. For example, if we take this component here and I'm just going to copy that and paste it into this horizontal auto layout container down here. This is a frame that has auto layout applied over here in Figma. You can see the auto layout toggle. That's got it applied and it's going from left to right. It's horizontal layout.

Because we've got this card inside of the layer, I'm just going to actually put in the instance instead of the component. I'll pull out the component. You can see we've got an instance of this original component inside of our auto layout frame. We've got this auto layout frame with horizontal layout applied. What we can do is we can select the card inside of that auto layout frame. Because the parent layer has auto layout already applied, this time when we click on the sync and repeat selected layer, which I'll do now, you'll see that it automatically copy and pastes those layers inside of the existing auto layout frame.

This can be really handy if you've already got a design that has auto layout applied to the parent of the layer that you want to repeat. You can just select that layer as long as it's inside of an existing auto layout frame and that way it will just automatically repeat those layers for you and leave the original one alone. You can either hide that or use it as you like.

These are instances as well. The cool thing about that is we can then edit the main component up here and that's going to automatically edit all of the duplicated instances that we just added via the CopyDoc Figma plugin. That's pretty cool as well. I definitely recommend using a component based original layer up here and then creating an instance of that component to use with the repeat feature. That's going to make it really scalable for you to apply changes in one place.

You can see here I can change text sizes and all different things like that to make it really easy for me to adjust that component with all the synced layers. Yeah, that's basically it. I just wanted to show you this in case you're a fan of the Airtable platform and you want to use this as an alternative to the other options available which are the CSV and Excel file imports or the Google Sheets URL imports. Now we've also got the sync from Airtable URL inputs where you can add your own Airtable spreadsheet data to use with the sync content feature.

You can also use the other tabs. You can use the Airtable URL as a source for your other data. If we switch from content to table, clicking on this tab here, you can see we can now click on the load table preview button. If we load that up, this is going to allow us to import a table directly into our page. If I click on the generate table from rows button, I can also make this zebra striped. I'll just do that for now and click on generate table from row. This is going to create a brand new table inside of your Figma file automatically with auto layout applied.

You can see here I can move that around, scale it up and down as needed. Again, because this is using components automatically, I can do things like scale the poster size. I can just increase that and that's going to look really good when I do change that. Yeah, that's basically it. As I said, feel free to play around with the other options. You can do charts, you can do styles, table, content, and the sample data for each of those is available here. Just click on that little link and click save.

If you need a bit more detail or help, you can click on the docs link for any of these options as well. Just go ahead and click on that docs link for any of these tabs and that'll give you a bit more detail about how to use them. Hopefully this has been a good tutorial if you're using Airtable and you can now use that as a data source for the CopyDoc sync feature. Thank you as always for watching and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export HTML emails from Figma to Benchmark Email using Emailify
date: 2024-03-21T00:00:00.000Z
---

# How to export HTML emails from Figma to Benchmark Email using Emailify



#### Video Transcript

Today, I'm going to be showing you a quick tutorial on how to export your HTML email designs from Figma to The Benchmark email platform using the Emailify Figma plugin.

To get started, all we need to do is go to our Figma file, click on the "Resources" icon at the top here. If you search for Emailify under the "Plugins" tab, if you click on the Emailify result, you'll be able to run the Figma plugin by either clicking on this "Run" button here or I'd recommend clicking on this "Save" icon here and that will let you run the Figma plugin from your Figma plugins list. So, I've already clicked on the save icon, so I'm just going to go to my canvas, right-click anywhere, go down to "Plugins", then go down to "Saved plugins" and click on Emailify, and that's just going to run the Figma plugin we saved a second ago. If you're new to the Figma plugin, the way that it works is it helps you to design HTML emails in Figma which you can then automatically export to production-ready responsive code with one click.

I'm just going to create a really simple template today. So, I'm just going to call this one template Benchmark example and just click on add new Emailify container and that's going to allow us to start adding some preset components that we can then customize with our own content and branding in Figma. So, I'm not going to be running through all of the design features in the tutorial today. If you're interested in that, I'd recommend checking out some of the other tutorials on the YouTube channel or going to the Emailify documentation site and you'll get heaps of resources there to customize the designs to your own brand and content.

Again, today I'm going to be leaving all of these as default just to show you a quick example of a template. And once you're happy with your template that you've designed with Emailify, the last step that you want to do is go to the footer tab in the Figma plugin. So, click on the "Footer" tab here and if you go down to B so the letter B, you'll be able to see there's a Benchmark email footer preset. So, if you click on the Benchmark email footer, that's going to automatically add this footer preset component to your design which pre-populates it with the unsubscribe link and viewing browser link for the Benchmark platform. So, we can double-check that by clicking on the link layer in our little nav component here and then clicking on the settings button in the Figma plugin up here and that will reveal the tag. So, we got our unsubscribe URL tag and also the viewing browser tag. So, these will automatically get populated by Benchmark later and those will work when you send out your email to your audience and they'll be able to click that and unsubscribe from the list or viewing the browser which will open up a web browser tab from the email client.

Now that we've got that set up, we can preview the email by clicking on the preview button in the Figma plugin and that's going to let us see a real-time HTML preview of what the content's going to look like after it gets exported from the Figma plugin. So, we've got the mobile view up at the moment. We can expand that out to desktop to see what it looks like on larger email clients. So, that's all looking really good and you can also customize the responsive design for mobile devices by clicking on the settings button up here and then just going through and clicking on any Emailify layer in your design. So, for example, you can do things like change the font size on mobile, you can change the padding for rows, you can change the visibility to hide things on mobile or hide things on desktop and kind of swap those things around.

I'll leave those for you to explore. Again, check out the documentation or some of the other video tutorials on the channel for some more context around those. But for today, I'm just going to be assuming that you're happy with your design. So, once you're happy, just close off the preview and then we're going to click on the export HTML button in the top right of the Figma plugin here and we're going to change this default HTML email option from HTML email and scroll down to the platforms list and just go ahead and find The Benchmark email item. So, you can see here there's Benchmark email as an option, go ahead and click on that. And then what you want to do is populate your subject line. So, just call this, I'm just going to call this sub subject line test and then you can also add preheader text.

Preheader text is what shows up after the subject line next to the subject line or under it in the email client when it opens up the email in your inbox. So, you can add that text in there and that will automatically show up as expected. The subject line, just be mindful that you will have to read this later when we export the email to Benchmark in a moment. So, it's still worth adding it here because it's going to include it in your title tag and that's going to show up if someone clicks on the viewing browser link and that's what the window or tab title is going to be taken from here. So, populate that and also be mindful that you have to copy-paste that again in a moment. So, once you've got those set up, just go ahead and click on the export for Benchmark email button and that's going to automatically generate all of the HTML and upload any image assets in your design. So, what you want to do is click on the download your zip file button and just save that anywhere on your computer, to your desktop is fine. And then once that saves, just double-click on the zip file and you should get a folder that looks like this. So, you can see here we've got a folder called template Benchmark example which is named the same as our Figma frame was. So, the file that we want is inside of this folder. So, if you open that up, you'll see an index.html file and that is our final HTML email that we're going to use in just a moment.

Once you've got that exported, you can then log into your Benchmark email account. So, I'm logged into the dashboard here and it's very important to note that this is a paid Benchmark email account. There's a free option, but the free tier of Benchmark doesn't allow you to import custom HTML emails. So, just make sure you're on the Pro Plan or you may be on an Enterprise plan but as long as you're not on a free plan, you'll be able to create custom HTML emails in The Benchmark email platform. So, once you've logged in, just go ahead and click on the emails item in the side menu here. And then once that opens up, just click on the other nested emails item. So, click on email emails again and that's going to load up the emails page inside of Benchmark and you'll see a button that says create new email. So, go ahead and click on that create new email button and then just select regular email. So, there's three options here, just select the first one which is regular email and then click next.

Then you want to change this option from the drag and drop editor over to the code editor. Again, this option here will only be available if you're a paid Benchmark email user. If you're on the free tier, it's going to prompt you over in this square to say that you need to upgrade if you want to use this option. Feel free to do that if you do want to use custom HTML inside of Benchmark. I've already done that, so I'm just going to click on the code editor option here and then click on the next button.

Give your email a name. I'm just going to leave that as default. You can call that whatever you want to call your campaign, and I'm just going to click next. This is now going to take us to the Benchmark email editor page. This is going to allow us to drop in custom HTML. You can see that there's a custom HTML source code viewer here and a preview of that email content here. It's just showing that email content.

What we want to do is actually get rid of all of this. We're going to highlight all of that content in the source code editor and just delete it. We want that to be completely empty. Then go back to your folder that we just exported the HTML file from via the Figma plugin. Again, find that index.html file inside of your email folder, and we're going to drag and drop that directly into this source code window here in The Benchmark email editor.

Drag and drop that in, and you can see that's automatically loaded all of the HTML file content into the editor directly, and it's also showing a live preview here, very similar to what we just saw in Figma. We can see that that's all being loaded in and it's all working, which is great.

The other thing that you'll need to do is customize the footer area. You can see here it's quite a mess with all this extra content here. By default, Benchmark will include all of that stuff in your footer. What you need to do is go to this settings button in the bottom left of your Benchmark page, click on that, and then you just need to go through and uncheck some of these things.

You can uncheck the permission reminder. You can uncheck the include web page web version link because we're already including that anyway in our design if you've added the Benchmark footer. So we can uncheck that and that will remove it from down there. Then go over to the footer tab in this same little popup here, and there's a few other things we can get rid of.

If you've already added your address in here, you can delete the address in here so it doesn't double it up. You can also then untick the sent to information, you can untick the verified unsubscribe logo, and you can untick the manage subscription link. For the address field, it's basically saying that it wants to have a valid physical address. I'm just going to add in a little dash because we've already got our address added here.

Alternatively, you could remove it from your design and just add it down here, but it seems silly to double it up. I'm just going to remove that and add a little dash there because it doesn't let me remove the full text. The other thing to note is that there's this massive badge from Benchmark that gets included by default.

If you check out the documentation, they basically say that you can remove this if you're a paid customer, but you have to email them at support@benchmarkemail.com and they will manually, I guess, turn off this feature to remove that branding from your emails. So it seems like that should be removed by default, but unfortunately, it's not, and so you will have to email them to ask them to get rid of that badge being included in your footer.

Same thing with the unsubscribe link. It seems like it just adds that in there even though we've added one here. I'm not sure why it doesn't allow you to remove that one, but worst-case scenario, you're going to have a double unsubscribe link in the footer there, and unfortunately, that seems to be just the way that the platform works.

Now that we've gone through those extra steps around the footer, what you can do is just click on the save and next button once you're happy with this and you don't want to make any more changes. Click on Save and next, and that is going to allow you to then schedule your email and decide which audience you want to send it to, who it's getting sent from, which address, and also adding your subject line.

As I mentioned before, you will have to add that subject line in again down here. Just go ahead and add that same subject line that you added in Emailify here, but you don't need to read the preview text. We've already added the preview text in the Figma plugin. So remember, we added that before. You don't need to add it again in Benchmark.

Otherwise, that's going to double up the previous text that we already added that gets included in the HTML. If you add it here again, it's going to inject the same content again, so it may double it up. Just leave the preview text one blank if you've already filled it out in Emailify, but do populate the subject line field in Benchmark.

That's basically it. You can save this and schedule it and send it whenever you're ready. But that's going to allow you to use a custom HTML email template that you've designed in Figma and have that sent out as your Benchmark email template. Again, feel free to reach out to The Benchmark support team just to ask about tidying up this footer here.

It seems a little bit silly that they add that by default, but it does seem like you can ask them to remove that. So again, email the support@benchmarkemail.com address, and hopefully, they can help you remove that from your designs. That's going to be it for today. I just wanted to show you how to get your HTML email designs out of Figma and into the Benchmark email platform if you happen to be using that for your email sends.

Thank you as always for watching. We'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export HTML emails from Figma to SugarCRM using Emailify
date: 2024-03-20T00:00:00.000Z
---

# How to export HTML emails from Figma to SugarCRM using Emailify



#### Video Transcript

Today, I'm going to be showing you a quick tutorial on how to export your HTML email designs from Figma to the SugarCRM platform using the Emailify Figma plugin. 

To get started, all we need to do is go to our Figma file, click on the "Resources" icon at the top, and if you search for Emailify under the "Plugins" tab, if you click on the Emailify result, you can then run the Figma plugin by clicking on this run button here or I'd recommend clicking on this "Save" icon here which will let you run the Figma plugin from your Figma plugins list. I've already clicked the save icons, I'm going to go to my canvas, just right click anywhere, go down to "Plugins", then go down to "Saved plugins" and click on Emailify, and that's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is it helps you to design HTML emails in Figma which you can then export to production-ready responsive code automatically. So, I'm just going to be creating a really simple email, just going to call it example SugarCRM template, and I'm going to add that as a new Emailify frame to my page, and that's going to allow us to start adding some Emailify components. These are preset components that you can customize with your own content and brand and styles using Figma, but for today, I'm just going to be keeping it really simple and just spinning up a few blocks. I'm not going to be going through all of the design features of the Figma plugin today. If you're new to the Figma plugin and you want to learn more about those, I'd highly recommend checking out some of the other tutorials on our YouTube channel which are longer ones that go into depth about how to design the emails and customize them for your own brand and styles.

Today I'm just going to be keeping it really simple with these few presets and not making any customizations, and assuming that you're happy with your Emailify layout as well. The last step you want to do is go to the footer tab in the Figma plugin and under the platforms category, just scroll down to the letter "S" and find the SugarCRM footer. So you want to click on this SugarCRM footer and that's going to automatically pre-populate this footer component with the correct unsubscribe link and viewing browser link for SugarCRM.

You can see here if I inspect the link layer here and then click on the settings panel in the Figma plugin, that's going to show me the pre-populated link for our unsubscribe link and our viewing browser link. So that's a really easy way to add those in there if you don't want to manually add them yourself. And of course, you can customize the footer colors and the fonts and everything like that as you'd expect as well. So now that we've got our SugarCRM footer added in, we can preview the HTML in the Figma plugin just by clicking on the preview button here, and that's going to load up a real-time HTML preview of what the content's going to look like when it gets exported to code. We're looking at the iPhone size at the moment, we can change that to desktop to see a larger view of what that's going to look like in bigger email clients. And of course, you can also add custom mobile-specific overrides. So if you click on any of your Emailify layers and click on the settings panel button here, that will let you inspect these layers and apply custom mobile responsive overrides to things like font sizes, paddings, spacing, showing and hiding elements, and everything else that you'd expect to be able to do for responsive design.

I'm not going to be applying any of those today. Again, I'm just going to leave this a really simple default design and assuming that I'm happy with my HTML, I'm just going to close off the preview and we're going to jump into the export HTML button up here. So if you click on export HTML and then you just want to go down here and change the default HTML email option, scroll down to the platform section and again, we're going to find the SugarCRM option. So go ahead and change that to SugarCRM and click that. And then you can add your subject line here. So I'm just going to add my subject line and preheader text. So the preheader text will show up after your subject line when your audience is viewing the email in their inbox. So the text that comes straight after or under the subject line in there, that's what this text box here will relate to. And for the subject line, you will have to add this again in SugarCRM in a moment, but it's worth adding it here as well because that will add it to your title tag in the HTML. So if someone does click on the viewing browser link from your email, this line of text here, whatever you add in this input box, is going to show up as their browser window title or their tab title. So just make sure you copy that to be the same thing in SugarCRM later which I'll show you.

Once you're happy with your email and your subject client preheader, just go ahead and click on the export for SugarCRM button, and that's going to generate the HTML automatically and upload any images. So what you want to do is click on the download your zip file and that's going to allow you to save the zip package to your desktop. So I'm just going to save that there, go ahead and double click on the zip file, and if you open up the folder that it unzips, you should see something that looks like this. So it will have your email name, so you've got the Figma frame name, email name, that's going to automatically get populated as the folder. So just go ahead and open up that folder, and the file that we're looking for is the HTML and the file that we're looking for is this index.html file, and that contains your final email code. So we'll be using that in a moment.

Now that we've got that exported, we can now log into our SugarCRM platform, and this is the Sugar Market product in the CRM Suite. So you'll be able to get access to the Sugar Market instance if you're a customer of SugarCRM and you're using that particular product. You'll know what your login is and you can get to this dashboard here. So what you want to do is once you're on the dashboard just go ahead and hover over this little plus icon where it says quick create, and if you click on that quick create icon then go ahead and click on the email option. So go ahead and click on email under quick create.

Once this page loads, you just want to go ahead and select your email type. I'm just going to leave this as regular email for now, give the campaign a name. So let's call this test campaign from Figma, and then you can also add your subject line. So the subject line that you added in the Figma plugin, just copy and paste that here. So we can just call that subject line test, even though we called it something else before, that's okay. And then folder-wise, you just want to select the default folder or whatever folder you want to create to store your campaign in for organizational reasons. And then just update your from name and your address, so those are all sitting under here. I'm just going to update those now.

And once you've populated all of those fields below, just go ahead and click on the next button, and that's going to bring up this page here which allows you to select the email design. And we want to change it from themes, it's currently selecting the themes tab, we want to change that to this code tab here. So go ahead and click on code, and then there's only one option which is the blank option. So go ahead and click on blank, and once you've selected blank, go ahead and click on the next button again. So in the bottom right there, click next, and if it says a warning about templating changes, just say yes, just confirm that, and then it's going to give you this editor view here.

You can see here it's giving us a blank HTML file or blank HTML editor with nothing really in it except this default tag here. So what you want to do is get rid of all that code, so just select that line and delete it, and then go to your folder, find that index.html file we're just looking at, and drag and drop that into this window here. So drag and drop that code file into your editor in SugarCRM, and that's going to automatically populate the code editor with the code that we just exported from Figma. So you can see here in the Sugar Market editor, it's automatically rendering the preview. So this is looking just like we saw in our Figma file a moment ago. So you can see all the contents here, all the images have been uploaded, and everything's looking really good.

Once you get to this view, you can preview that, you can send a test email to yourself just to make sure that you're happy with it. You might also want to do a send to something like Litmus or Email on Acid to test that email out. But this is basically adding in the custom template to SugarCRM which you can do whatever you like with sending it out. So I'm just going to click on save to save that template. So that's just saved the code for us, and then you just go through your regular steps in the SugarCRM email flow.

For example, if you click next that's going to take you to the recipients page, you can assign your audience and things like that from there. So you can assign your lists and then you can click next again and decide when you want to schedule the email. So you could either send the email immediately, schedule it for later or send it in different batches so that's entirely up to you. And I won't be going through how to schedule an email in this particular tutorial. I just really wanted to focus on how to get your custom HTML into this build step here using the custom code option in SugarCRM.

We'll leave it there for today. I hope that's been helpful if you're using the Sugar Market product in the SugarCRM platform and you're also wanting to get custom HTML email designs out of Figma into the SugarCRM platform this is going to be a really easy way to go about it if you just design your emails in the Emailify Figma plugin export those out to the SugarCRM option and then as we just saw download the zip file and drag and drop the index.html file directly into your SugarCRM code editor here. So thank you as always for watching and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export HTML emails from Figma to Aweber using Emailify
date: 2024-03-19T00:00:00.000Z
---

# How to export HTML emails from Figma to Aweber using Emailify



#### Video Transcript

Today I'm going to be showing you a quick tutorial on how to export your HTML emails from Figma to the Aweber email marketing platform using the Emailify Figma plugin. 

To get started, all we need to do is go to our Figma file, click on the "Resources" icon at the top here. If you search for Emailify and under the Plugins tab, if you click on the Emailify result, you can run the Figma plugin by either clicking on this "Run" button here, or I'd recommend clicking on this little "Save" icon here. It will allow you to run the Figma plugin from your saved Figma plugins list. So, I've already clicked that save icon, so I'm just going to go to my canvas, right-click anywhere, go down to "Plugins", then go down to "Saved plugins" and click on Emailify. That's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is it helps you to design HTML emails in Figma, which you can then export to production-ready responsive code automatically. So today, I'm going to be creating a really simple template. I'm just going to call this one Aweber template test, and I'm just going to click "Add new Emailify container." This is going to allow me to start adding some components to my email design and customize the content as I need to.

In this Figma tutorial, I'm not going to be going through all of the design features in the Figma plugin. If you're new to the Figma plugin and you're interested in learning more about that, I'd highly recommend checking out some of the other videos on the channel or going through the Emailify documentation site, and that will have heaps of resources and information about how you can customize your design.

As I said today, I'm just going to be keeping it really simple and not customizing things too much. So assuming that you've got your design set up the way that you want and you've customized the content and everything, the last thing you want to do is go to the footer tab in the Figma plugin. So go ahead and click on the footer tab there, and the second result you'll see is the Aweber footer. If you click on the Aweber footer, that will automatically add a footer preset to your design, which includes the unsubscribe link and the viewing browser link for the Aweber platform.

You can inspect that by just clicking on one of these little nav link layers here and clicking the settings button in the Figma plugin. You can see here it's got the unsubscribe link tag and the viewing browser tag already pre-populated for Aweber. So if you're using Aweber, it's probably a good idea to add that to your footer; otherwise, it will add one for you, and it doesn't look as good as the one that you could design in Figma.

Obviously you can customize this in Figma, change the text styles and background color and padding and things like that, but for today, I'm just going to keep it really simple. So once you finish your design, you can preview it in the Email Figma plugin by just clicking on the preview button. And that will give you a real-time HTML preview of what the content's going to look like when it gets exported to HTML. You can check that out on larger screens as well, and of course, you can also add responsive overrides if you want to customize what it looks like on mobile.

You can click on any of your Emailify layers, click on the settings panel in the Figma plugin, and that will allow you to do things like change font sizes, padding, spacing, all kinds of different things, show and hide elements on mobile, desktop, etc. As I said, I'm not going to go through all those today, but do feel free to play around with those and check out some of the other resources I mentioned earlier.

Now that I'm happy with my design, I'm just going to close off the preview here, and we're going to export this to get imported into Aweber now. So I'm going to click on the export HTML button in the Figma plugin, and then I'm just going to change the default export option from HTML email and scroll down to the platforms and find the Aweber option. So I'm going to click on Aweber, and now that I've got that selected, I can add my subject line. Just put your subject line in here, and you can also add preheader text.

The preheader text will automatically get added after your subject line in the email inbox. So sometimes when you see the subject line in your client and then you see some text underneath that or next to that, that's what the preheader text is. So you can add that in there. You will also have to add your subject line again later in Aweber as well, but it's still worth adding in here because that's going to include it in your HTML title tag.

If someone clicks on the viewing browser link in your email when they open up that tab or window in the browser, this line of text here that you add is going to get used for that title tag in the tab. So it's still worth adding there even though you have to add it later for the actual subject line. I'm going to export this to Aweber now just by clicking on the export for Aweber button. I'm going to click on that now, and that's going to automatically generate all of the HTML for my design and upload all the images and give me a zip file that I can download to my computer.

I'm going to do that now by clicking on the "Download your zip file" button. Just save that anywhere to your desktop is fine, then double click on the zip file that it just saved, and you should get a folder that looks like this. So inside the folder, you can see there's a folder inside of that with the same name as your Figma frame. So we've got Aweber template test, and you want to find that folder as well with the same name that you've given it in your own design. And the file that we're interested in is this index.html file.

This contains all of the code for our design that we just exported. So we want to have that one handy in a second when we import that into our Aweber platform. So go ahead and log into your Aweber platform. So it's just a Aweber.com login there, and this will be your home screen. The quickest way to import a custom HTML template to use in your messages is just to go to the messages tab on the left here and then click on the "Create a message" button in the top.

And when it drops down that list, just go ahead and click on the raw HTML editor option. So this is going to allow us to create a message using raw HTML. So that's the one that we want. We're going to click on that one, and this will load up the email editor screen inside of Aweber, but we have one more thing we need to change. There's a little button up here at the top left called "Source". So you want to go ahead and click on that source button to switch it into this code view here.

Clicking on that source button is going to give you access to this HTML editor. So we can now add our own HTML in place of this. So basically select all of that predefined content, just select all and delete it. So we want nothing in this Source window. And then what you can do is just drag and drop your index.html file into this window here, and that will automatically load up all of the content from the HTML that we just exported from Figma and insert that into your Aweber HTML email editor.

Now that we've got that added in there, you can go ahead and click on "Save". Just click on the save button, and that will save your email message. Just to make sure we've got it, and then you can also preview it by clicking on this "Preview and test" button at the top right. So that's just going to load up a very similar preview to the one that we saw in the Figma plugin. So you can see all the content been loaded in, all the images are there.

You'll notice that in my case, I've got the unsubscribed links being added by Aweber. That's just because this is on a free Aweber account. If you're a paid Aweber customer, which you likely are, and you've added your unsubscribe link up here, you won't get those added in automatically. Those should not show up if it detects the unsubscribe link in there. So that's just something I wanted to call out.

Once you're happy with your preview, just click on the "Back to editor" button, and then you can add your subject line in here. So as I said, you have to read add that in. So just add your subject line so you can add that in at the top, and then once you're happy with that, just click on "Save and exit". And that's going to save the message for you with your custom HTML template ready to send.

You can see up here we've got our subject line here, message which is the one that we just added as a custom template. So you can now go ahead and schedule that by either clicking on this little schedule button here or you can click on that to go into more detail. So I'm just going to click on "Schedule", and again, this is going to allow you to set your subject line, schedule it, select your list, do all that stuff that you would be used to if you're already using the Aweber platform.

That's basically it. You can also add them as email templates if you choose to. You can do that through this other option here called "Email template manager". It's basically the same process, but I'll just run you through that as well. You can click on the "Design my own template" button, and then you want to select the "Import a template" option. So click on "Import a template", and that's going to load up this screen here, and again, it's going to give you an option to paste in your HTML.

You can also give the template a name, so you can call this one "template from Figma" just for an example. And then you want to paste in your HTML into this box here. So again, you can drag and drop that index.html file, that will automatically drop in all of the code, you can see all of that in there. And then it's going to give you this button "Pick Drop Zones". So click on this "Pick Drop Zones" button, and you can basically just skip this.

Just go straight to "Template Builder". Just click on this button down here, "Template Builder", you don't need to worry about this "Drop Zone" stuff, just skip that and click "Template Builder". And that's going to save your changes and take you to this screen here. You'll notice that there's a space at the top here, this is just the editor adding some space in if you preview the email. So you click on the "Preview" button up here, you'll notice that the space from the editor disappears, and you can see your email content as you'd expect.

That's just something to call out in case you're wondering about that. And then you can just click on "Save and exit" once you're happy with that, and that should save it as a new template inside of your Aweber account. So you can reuse that template on an ongoing basis. So that's pretty much it. I'll leave it there for today. I just wanted to show you a couple of options of how you can create custom HTML emails in Aweber using the exported code from the Emailify Figma plugin in Figma.

Hopefully, this will give you a little bit more flexibility if you've been wondering how to design HTML emails in Figma that can then be exported automatically out to HTML that will work with your Aweber account. This is going to be a really simple way of going about it. So thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export HTML emails from Figma to Drip using Emailify
date: 2024-03-18T00:00:00.000Z
---

# How to export HTML emails from Figma to Drip using Emailify



#### Video Transcript

Today I'm going to be showing you a quick tutorial on how to upload your HTML email templates from Figma to the Drip email marketing platform using the Emailify Figma plugin. To get started, all we need to do is go to our Figma file, click on the "Resources" icon at the top, and then if you search for Emailify and under the Plugins tab, if you click on the Emailify item, you can run that by clicking on the "Run" button here, or I'd recommend clicking on this little "Save" icon here, and that will allow you to run the Figma plugin from your Figma plugins list later. I've already clicked on the save icon so I'm going to go to my canvas. I'm just going to right-click anywhere, go down to "Plugins", then go down to "Saved plugins" and click on Emailify, and that's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is it helps you to design HTML emails in Figma which you can then customize to your own brand and then export to production-ready responsive HTML code automatically. So today I'm just going to be a really simple template. I'm just going to call this one template Drip example, and once we add that to our page we will then be able to start adding some preset components.

I'm not going to be going through all of these design features today. If you want to check those out, please feel free to check out some of the other YouTube tutorials on the channel or go to the Emailify documentation site and there'll be heaps of resources there that will show you how to design your emails and customize them and basically do whatever you want to them for your own brand and content. So today I'm just going to be giving it really simple, spinning up a few components without customizing them at all.

Assuming that you've designed your HTML email in Figma using the Emailify Figma plugin, the last thing you want to do before we export this for the Drip platform is to go to the footer tab in the Figma plugin. Then, if you scroll down to the letter "D", you'll find a Drip footer preset. So you want to make sure that you click on the Drip footer there, and that's going to automatically add this footer preset to your Emailify template which automatically prepopulates the required tag.

You've got the unsubscribe link which you can check out by clicking on the settings button in the Figma plugin with that link layer selected. So that will pre-populate the unsubscribed URL. It's going to pre-populate the viewing browser URL, and it's also going to give you the HTML postal address tag, which again, these are required in order for the custom HTML template to be accepted into the Drip platform.

If you don't include this footer, you will get a message later saying that you basically need to have these tags. So it's just easiest to go into the footer tab, click on the Drip item, and then you can add that to your template and customize the colors and styles as you like with those links already added.

Now that we've got our footer added, we can preview the HTML in the Figma plugin just by clicking on the preview button. And that's going to allow us to see a live preview of what the HTML is going to look like when it gets exported. So we can check that out on mobile and desktop. So we can see what that looks like on larger screens. You can also override some of these styles for mobile.

For example, we've got our hero text here. If you click on the settings panel in the Figma plugin and then click on any of the Emailify layers, you can see here that you've got a bunch of options to override these styles for mobile-specific designs. And that's going to allow you to do things like shrink font sizes or change paddings, change spacings, and all different kinds of things show and hide on mobile, etc.

So I'll leave those to you to play around with. Today I'm just going to be leaving everything as default and I'm fairly happy with how it's looking already. Assuming that you're ready to go and you're happy with your HTML preview, you can close that off now.

To get this into the Drip platform, all we need to do is go to our Figma plugin then click on the export HTML button in the top of the Figma plugin window. And then what you want to do is change this HTML email option, which is the default option, and scroll down to the platforms list and then find the Drip item. So you want to go ahead and click on the Drip select item. And that's going to select the Drip platform for exporting.

And then you can go ahead and do things like add your subject line. So I'm just going to add my subject line here and preheader text. So the preheader text is what shows up after the subject line when someone's opening up your email they'll see it next to or under your subject line. So you can add that text in there, and just be mindful that you will need to read this subject line in Drip later.

The one that we're adding in here is going to get automatically added to your HTML template itself. So for example, if you click on the viewing browser Link in the email and that opens up a new browser tab showing the email, it will use this line here, which gets added to your title tag as the title of that tab or the title of that window. So you can mirror the subject line in here but then also be mindful that you'll have to upload that or read that subject line when we upload the template in a moment.

Now that we've got our subject line and preheader added, I'm just going to go ahead and click on the export for Drip button. So click on export for Drip, and this is going to automatically generate the HTML and upload all the images and get all that code packaged up for you in a zip file.

Now that we've finished the export, you can go ahead and click on the download your zip file button in the Figma plugin, and then just save that anywhere to your computer like your desktop. And then just double click on that zip file to unzip it, and then you'll get a folder that looks like this. This folder contains the production-ready HTML code and it's going to be inside of a folder that has the same name as your frame in Figma.

You can see we've called ours template Drip example and inside the zip file we just exported there's a folder called template Drip example. So the file that you want is this index.html file, and this contains all of the code for our email that we can now add to Drip.

What we need to do is log into our Drip account. So I'm logged in over here and depending on what workflow you're using, you can pick any of those today. I'm going to keep it simple and assume you're using a single email campaign. So I'm going to click on the single email campaign item or you can also get to that from the campaigns list over here and clicking on the single email item. So I'm just going to click on that now.

Then just go ahead and click on the create button at the top of the page. And you want to make sure that you select the new text/html campaign option. So we don't want the visual Builder we want the new text HTML Campaign which is going to allow us to add custom HTML. So I'm just going to click on the new text HTML campaign button and then give that a name.

We're just going to call this new campaign Figma upload test and I'm going to create campaign by clicking on the create campaign button. And that's going to spin up a new Drip campaign a blank Drip campaign and what we want to do is click on this switch to custom HTML button over here.

You can see on the right-hand side if I click that it's going to say you know a warning do we want to switch to using custom HTML and we want to say yes I understand so just go ahead and click on I understand and that's going to switch the editor from this wysiwyg style Editor to a proper code editor that we can actually drop proper HTML code into.

Now that we've got that set up, what you want to do is copy the code from this index.html file. In this case, the easiest way to do that would be to open up a new browser tab. Open up a new browser tab or a new window, drag and drop the index.html file in there, and you can see that it loads up the HTML. Then, just go ahead and right-click anywhere, go down to "View Page Source," and you want to copy and paste all of that code to your clipboard. Copy every single thing from that "View Page Source" window that we just got to in our index.html file.

Then, go back into Drip and you want to highlight all of the code that's already in the email editor and delete all of it. We're just going to delete everything, so it's completely blank, and then we're going to paste in our code that we just copied from the index.html file. I'm just copying that in now, and that's been copied in. You can see here that it's now adding all of our content in here. We can switch to the preview tab to verify it. You can see it's all in there now.

We can select all of that HTML. It's looking the same as it did in our Figma preview. Don't worry about this warning in my window over here; there's a thing saying that the link is invalid because I didn't add a link onto this button. I just left it as default. Yours won't have that if you've got the correct links added everywhere. That just currently has a placeholder link, so it's just giving a warning about that. But it recognizes the links down here. You can see that we've got our address, our unsubscribe link, our "viewing browser" link; those are all being recognized and populated by Drip, which is great. So, we've got those in there.

Again, you want to go ahead and change this email subject line to be whatever you want. For example, in our email, we had it as "subject test" or something like that. So, whatever you added in the Emailify subject line field, you basically want to do that in your email subject in Drip as well. You can customize that as you need to. But once you've added in your text, you can go ahead and click on the "save" button. That's just going to save the email template for you. And you'll notice there's also an option here to autogenerate the plain text version. That's on by default, and you're welcome to leave that on if you're happy with that. Alternatively, if you want to add your own, what you can do is go to the "pl text" tab over here. You can see here that we've got our plain text version .txt file over here. This is something that's generated by Emailify automatically, and you'll notice that it's also got the content from our email rendered as plain text. I think Drip does a really good job of adding this automatically, so you probably don't need to use the one exporter from the Figma plugin. But if you do want to customize that plain text, that tab is the way you can do it and feel free to play around with that as you like.

That's basically it. That's how you can get your custom HTML emails from Figma into the Drip email marketing platform and use those for your campaigns. And once you're happy with your campaign setup, you can just go ahead and click on the "done editing" button in the top right, and that will bring you back to the campaigns list where you can then again preview this or add an audience and schedule it, and do everything that you would expect to be able to do with that custom HTML email.

We'll leave it there for today. I hope that's been helpful. If you're a Drip user and you've been wanting to add custom HTML designs from Figma, in this case using the Emailify Figma plugin to design those, this is a really quick way of going about it, and hopefully, it improves your workflow if you are using the Drip campaign manager with Figma as well. Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export HTML emails from Figma to Constant Contact using Emailify
date: 2024-03-17T00:00:00.000Z
---

# How to export HTML emails from Figma to Constant Contact using Emailify



#### Video Transcript

Today, I'm going to be showing you a quick tutorial on how to export your HTML email designs from Figma to the Constant Contact email marketing platform, and we're going to be doing that using the Emailify Figma plugin. 

To get started, all we need to do is go to our Figma file, click on the "Resources" icon at the top, and then if you search for Emailify and under the plugins tab, if you click on the Emailify item, you can run the Figma plugin by clicking on this run button here. Or I'd recommend clicking on the little "Save" icon here, and that will let us run the Figma plugin from our saved Figma plugins list. So I've already clicked the save icon, so I'm going to go to my canvas, just right-click anywhere, go down to "Plugins," and then go down to "Saved plugins," and click on the Emailify item, and that's just going to run the Figma plugin that we saved a second ago.

If you're new to the Figma plugin, the way that it works is it helps you to design HTML emails in Figma, which you can then export automatically to production-ready responsive code automatically. Today, I'm just going to be creating a really simple template example. So, I'm just going to call this one a template example and create a new Emailify frame. And then I'm just going to start adding a few components from the Figma plugin. So, I'm not going to be going through all of the design features in detail today. If you want to check those out, feel free to check out some of the other YouTube Figma tutorials on the channel or check out the Emailify documentation site, which has a lot of information about how you can create and customize the HTML email designs in Figma for your own brand and styles.

Today, I'm just going to be creating a few components with no customizations or anything like that, just to show an example of how to export the HTML to Constant Contact. So once you're happy with your design, the last thing we need to do is click on the footer tab in the Figma plugin. And then you just want to scroll down to the Constant Contact footer option down here and click on that. So if you click on the Constant Contact footer, that's going to add this little footer component, which is prepopulated with an unsubscribed tag. So if you go down to your link layer, you can click on the settings button in the Figma plugin to check that out. And you can see here it's pre-populated with the correct Constant Contact unsubscribe tag. So this is automatically going to get swapped out to the correct link for your audience members when you send out your email via the Constant Contact platform.

Now that we've got that all set up, we can quickly preview the HTML by clicking on the preview button in the Figma plugin. And that's just going to load a real-time real HTML preview that we can inspect. And we can check that out on mobile as well to see how it looks. And you can also go through and apply mobile-specific overrides to any of these layers as well. So if you click on one of your Emailify layers and then click on the settings button, that will let you do things like override font sizes or padding or show and hide things on mobile, add links, all that sort of good stuff. So I'm going to leave this all as default today. I'm not going to customize it any further. I'm basically happy with this. So I'm going to close off my preview. And then we're going to click on the export HTML button in the Figma plugin up here. And I'm going to change this from the default export Port HTML option and scroll down to platforms, and I'm going to select the Constant Contact item instead.

If you click on Constant Contact, then we can do things like populate our subject line. So you can add a subject here and a preheader text. So preheader text will get added automatically after your subject line when someone's opening up your email in their email client. And it's also worth being mindful that you will have to copy this subject line manually into your Constant Contact campaign later as well. But adding it here will just ensure it also gets included in your title tag. So now that we're happy with our subject line and preheader, just go ahead and click on the export for Constant Contact button. And that will automatically generate all of the HTML and upload the images for you and package that up in a zip file. Go ahead and click on the download your zip file button in the Figma plugin and save that to your desktop. And then you can just double-click on that zip file, and that will open up this folder here, which contains your index.html file.

You can get to that by just expanding your template example folder or whatever you've called your Figma frame. So whatever you've named the frame, that's what the folder will be called in here. So just go ahead and open that up. You'll find the index.html file, which is the final HTML that we want. And you can load that up just by opening up a new browser tab and then dragging and dropping that index.html file into the browser. And you can see it all in here. So then you can just right-click anywhere, go down to view page source, and just copy all of that content to your clipboard. So all of the HTML content in the view Source tab, copy that to your clipboard.

And then what we can do is go to Constant Contact and go to the marketing Tab and click on the email item here. And that's going to load up the email campaigns page. Then what you want to do is click on the create an email button up here. And then once that loads up, you want to find the use your own HTML tile down here. So there's this use your own HTML tile. Go ahead and click on that and click on select. And once that loads up, you'll see this screen here. So the other way you can get to this screen directly is if you click on the little link down here where it says create a new email template in Constant Contact, this will actually link you directly to this page provided that you're logged into Constant Contact. But I just wanted to show you how to get to that manually in case you've already closed off that window.

Now that we've got all this placeholder content here, we want to select all of that and delete it. So I'm going to delete all of that content. And then I'm just going to paste in the HTML that we copied to our clipboard. So I've just pasted that in there. You can see that it's adding the pixel tracking code at the bottom automatically. So that's still being retained. And you can see here we've got our unsubscribe link also being added in at the bottom there. So to see a live preview of that, you can toggle on this live preview switch up here. And that will let you inspect the live HTML that's being rendered from the code that we just added. So that's basically looking the same as we just had it in Figma. So I think that's looking really good.

Then what you can do if you want to send this out is you can just go ahead and click on the save button first just so you save the template. And then you can go ahead and click on the continue button. And if you click continue, that will just take you to the campaign steps where you can apply your audience settings. So determine who you want to send it out to and again add things like your subject line and other details like that just for your Constant Contact send. So that's basically it for today. I just want to keep this super short to show you how to export your HTML email designs from Figma created with the Emailify Figma plugin and upload those to the Constant Contact platform if you're using that for your email marketing send. This is going to be a really quick way to go about it and also give you a lot more design flexibility compared to using some of the templated or preset templates in the Constant Contact platform, which are a little bit more limited in terms of having a full brand experience that you'd normally expect from your assets.

I hope that's been helpful if you're using the Constant Contact platform and using Figma, hopefully that helps your workflow a little bit. And thank you as always for watching. We'll be back soon with more Figma tutorials like this one.

---

---
type: tutorial
title: How to export HTML emails from Figma to ConvertKit using Emailify
date: 2024-03-16T00:00:00.000Z
---

# How to export HTML emails from Figma to ConvertKit using Emailify



#### Video Transcript

Today I'm going to be showing you a quick tutorial on how to export your HTML email templates from Figma to the ConvertKit email marketing platform. 

We're going to be doing that using the Emailify Figma plugin. To get started, all we need to do is go to our Figma file, click on the "Resources" icon up here, and if you search for Emailify under the Plugins tab, you can then click on the Emailify item. Then we can run the Figma plugin by either clicking on this "Run" button here or I recommend clicking on this little "Save" icon here. That will let us run the Figma plugin from our Figma plugins list. So I've already clicked on that icon, so I'm going to go to my canvas, just right-click anywhere, go down to "Plugins", and then go down to "Saved plugins" and click on Emailify. That's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is it helps you to design HTML emails in Figma which you can then automatically export to production-ready responsive code. So we're going to create a really simple template today. I'm just going to call this one template example for ConvertKit and just click on the add new Emailify container button.

I'm not going to be running through all of the design features in the Figma plugin today. There's a few other good tutorials on the YouTube channel and in the documentation site for Emailify if you want to really drill down into how to design and customize the emails for your own brand and add content and things like that. Today I'm just going to be using some of the preset components without customizing anything or creating any of my own personalized layouts using some of these quick ad features down here.

Once you've created your email using the Emailify Figma plugin and you've customized it the way you like, the crucial thing you'll need to make sure you add is the ConvertKit footer. So if you go to the footer tab in the Figma plugin and then just scroll down to the letter c down here, you'll see that there's a ConvertKit footer preset that we can click. So I'm just going to click on that ConvertKit footer, and that's going to automatically add this footer component with some prepopulated tags.

We've got our unsubscribe link here and our viewing browser link. And if we click on the little settings button in the Figma plugin to inspect that layer, we can see that it automatically applies the correct ConvertKit tags, which are required for the ConvertKit custom email templates. So you can see we've got our unsubscribe URL and our viewing browser URL. And then you also need to add this little address tag, so this will prepopulate the address based on your ConvertKit account. And this is another required tag that ConvertKit will ask for when you do create your email template in a minute. So make sure you've added the ConvertKit footer from the Footers Tab. And you can, of course, customize the color of these links and backgrounds and things like that, but for today I'm just going to leave that as is.

To preview the HTML, you can click on the preview button in the Figma plugin, and that will load a quick real HTML preview in the Figma plugin that you can inspect. We can see what it looks like on mobile and also change the device to desktop. So this will allow us to see what our design looks like on those different sizes. And you can also customize these layers for mobile by just clicking on any of your Emailify Figma layers, then clicking on the settings button in the Figma plugin. And you can do things like override font sizes or padding or spacing, all different sorts of things depending on which type of layer is selected. So again, feel free to check out the documentation and the other video tutorials that go through the design features of the Figma plugin, but for today I'm just going to be leaving this as is.

Now that I've got my HTML email looking really good in Figma and I'm happy with it, I want to get this into my ConvertKit account. So the way we can do that is just to close off the preview, then click on the export HTML button in the Figma plugin. And we want to change this default HTML email option and scroll down to platforms and click on the ConvertKit option. So click on ConvertKit under the platform options. And then you just want to add your subject line. So subject line can go here, and then you want to add your preheader text here. So the preheader text is what shows up after your subject line when the emails get sent out. But the thing to be mindful of with ConvertKit in particular is you'll need to copy this subject line again into ConvertKit when you do send out your email. So this field here in this case will just add the subject line to your title tag in the HTML, which means that if you click on the viewing browser link later and that opens up a browser tab with your email, it will automatically use whatever you put in this field as the title tag of that tab. So in your web browser when you click on that link, it will have the name of the tab set to whatever you put here. So set that to whatever you like. And then when you're ready, click on the export for ConvertKit button. And that's going to automatically generate the production-ready HTML and also upload all of the images and give you this .zip file that you can download.

Now that the export's complete, we're going to click on the download your .zip file button and just save that anywhere to your computer. I'm just going to save it to the desktop. And if you double click on that .zip file and unzip it, you can open up the folder that it exports which contains these few files here. So what we want to do in this case as you can see in the little description here, we want to find the index.html file which is inside of the folder that our email was named after. So you can see we've called our frame template example kit for ConvertKit and inside the .zip that we exported from the Figma plugin, there's a folder called template example for ConvertKit. So that's the correct one, and this index.html file is the final HTML code that we want to use. So what we're going to do is go into ConvertKit, you can either click on this link here which will take you to the create new email template page directly. So if you're logged into ConvertKit, feel free to just click that and that will open it up. Or you can just go to your ConvertKit dashboard, click on the send item at the top, go to email templates, and then once that loads, click on new email template up the top here. And when that page loads, this navigation on the left doesn't seem to be working for me, but if you click on import code here or just scroll down to the very bottom of the page which is the import code section, just click on the create HTML template button over here. And that's going to take you to the new email template page which is also linked in the Figma plugin from here.

Now that we're at the new email template page in ConvertKit, we want to give this a name. So I'm just going to call this Figma template one. And what you want to do is paste in the contents of the HTML file from that index.html file. So in order to copy the HTML from our file, all we need to do is open up a new browser tab or window, drag and drop or open your index.html file into there. And that will let you view the HTML file in your browser. And the quickest way to get the source code or the raw HTML is just by right-clicking anywhere, going down to view page source and clicking on that. And then just select all by either doing command a on Mac or control a on Windows to select all of the content and then just copy that to your clipboard by right-clicking anywhere and clicking copy. So now that we've copied our HTML that we exported to the clipboard, just go back to ConvertKit and paste that in there. So we're just going to paste that with command V or control V if you're on Windows. And you can see that all of the HTML has been pasted in. So that's looking really good. That's exactly what we want. We can see at the very bottom here that we've got our address tag and our unsubscribe links already included. And you'll also notice that there's a hidden message content tag down here. So this message content tag is also required for ConvertKit emails, but it doesn't really play very nicely with custom HTML emails. So it's added at the bottom automatically when you export the emails from Figma to ConvertKit, and it's going to be hidden in the same way that the preheader text up the top is also hidden. So it's there, but it's not going to be visible to any users. So that's just something to be mindful of as well. You don't have to worry about it; it's added in there automatically, but that's where it is if you're wondering where that message content tag is getting added.

Now that we've added that in, we just go ahead and click on Save, and this will automatically save our new custom HTML template in ConvertKit. So that's basically in there now. We can open that up and edit it later if we want to, but that's basically now ready to go.

Now that you've got your content added as a template, you can then send that out by basically creating a new broadcast. So if you click on the broadcasts tab under the send menu, you will then be able to create a new broadcast, and you'll be able to see that under your templates. So you can see you've got your templates up here as opposed to the starting templates. This is our custom ConvertKit template that we've just added. So you can go ahead and click on that template, and that will automatically now use that as your custom HTML template that you can send out as a ConvertKit broadcast.

That's basically it. I know there's a couple of extra steps there to get it into ConvertKit, but once it's in there, you should be good to go. And as I said, make sure you've got those tags in there from the ConvertKit footer under the Footers tab. You always want to make sure you add that in; otherwise, it's not going to accept your code as a custom template. And you can see here that it's working well. It's prepopulating the address, so we've got the address tag. You'll notice that it's swapped out the address tag down here with a real preview address, and these links will also be viewable as well. You can see in the bottom left of the window there; it's got the archive URL goes here as part of the link. And you can see here that the unsubscribe Link in the bottom left of my browser window is also showing a little preview. ConvertKit unsubscribe link so that means these are working as expected. So that's all really good.

As I said, we'll leave it there. I just wanted to keep that as simple as possible to get the email that you design in Figma with Emailify and Export that out to a .zip file to upload into ConvertKit, and that should hopefully allow you to create really nice and personalized custom HTML emails for your ConvertKit send. So thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export HTML emails from Figma to GetResponse using Emailify
date: 2024-03-15T00:00:00.000Z
---

# How to export HTML emails from Figma to GetResponse using Emailify



#### Video Transcript

Today, I'm going to be showing you a quick tutorial on how to get your HTML email designs from Figma into the GetResponse email marketing platform using the Emailify Figma plugin. 

To get started, all we need to do is go to our Figma file, click on the resources icon at the top, and if you search for Emailify under the "Plugins" tab, if you click on the Emailify result, you can run the Figma plugin by clicking on this "Run" button here. Or I'd recommend clicking on this little "Save" icon here, and that will let us run the Figma plugin from our Figma plugins list. I've already clicked on the save icon, so I'm going to go to my canvas, just right-click anywhere, go down to "Plugins", and then go down to "Saved plugins" and click on Emailify. And that's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is it helps you to design HTML emails in Figma that you can then automatically export to code from the Figma plugin. So, I'm just going to create a new email here and just call it template example for response, and I'm just going to add that to my page. And this allows me to then add these Emailify preset components and also create my own layouts using these quick options here. I'm not going to be going through all of the design features of the Figma plugin today. If you're interested in using those or learning more about them, there's a couple of really good Figma tutorials on the YouTube channel that you can check out. Or you can go to the documentation site, and that has a bunch of resources there to really understand all of the different features in the Figma plugin.

Today, I'm just going to keep it really simple and just add a few components, and I'm not going to be customizing any of the content or design. I just want to show you how to get this into your GetResponse email platform. So, the important thing is that you just need to add a GetResponse footer. So, if you go to the footer tab in the Figma plugin and just scroll down to the letter G, you'll see that there's a GetResponse footer preset. So, if you click on that GetResponse footer, that will automatically pre-populate the correct unsubscribe links and viewing browser links.

We can inspect that by clicking on the link layer here, opening up the settings panel in the Figma plugin, and you can see that the remove tag, which is the unsubscribed tag for GetResponse, is automatically getting included. Same thing with the viewing browser link; you've got that viewing browser link there as well. Now that we've finished creating this simple email, we can preview it in the Figma plugin just by clicking on the preview button, and that will allow us to view what the HTML is going to look like when it gets exported from the Figma plugin. We can check that out on mobile and desktop. You can apply mobile overrides as well if you want to. You can apply those through the settings panel. Again, I'm not going to be going through all these details or customizing them in this tutorial, but do feel free to play around with those and check out the documentation for more on that.

Once we're happy with the HTML, we can then close off the preview and click on the export HTML button in the Figma plugin. If you click on export HTML and then change the default HTML email option that's selected and scroll down to platforms, find the GetResponse option and click on that. Then what you want to do is either pre-populate the subject line and preheader text. So, we can call this test subject and we'll do a test preheader as well. And this will just prepopulate the preheader text that shows up after your subject line in the email clients.

Because we're going to be uploading this into GetResponse manually, this will add the subject line to your title tag. So, that will show up if someone clicks on the viewing browser link. That'll open up a new browser tab, and this subject line will get included in the title of the tab. But we will have to add this again manually in a moment. Now that we're happy with those details, we can keep the GetResponse item checked and click on the export for GetResponse button, and that will automatically generate all of the HTML for us and also download all the images into a zip file that we can then upload.

What you want to do is click on the download your zip file button and just save that anywhere on your computer. I'm just going to save it to my desktop. And you can see here that there's a couple of links, so we've got a link to the instructions to upload the folder or upload the zip file, and we've also got a link to the GetResponse templates page. So, if you click on that GetResponse templates page and you're logged into GetResponse, it should open up this page here, which is the my templates page in the GetResponse platform.

And what we want to do is double click on the zip file that we just exported, which will open up this folder here. So, you can see inside of the zip file that's exported from the Figma plugin, there's a few different files here. There's a previews page which just allows us to get a quick preview of the emails if you want to send that to clients or stakeholders. But importantly, what we want to upload is inside this Zips folder. So, there's a folder called Zips for upload to GetResponse, and you can see we've got our template that was exported in this ZIP file. So, this ZIP basically contains the HTML file and the images folder. It's basically these two files already prepped for you.

And we can now upload that into the platform by clicking on the create template button in GetResponse. Just give that a title, so I'm just going to call this test template from figma and just click on next. And then once that loads, you'll get another page in GetResponse that will ask you for what kind of template you want to create. So once that loads up, you can see there's obviously these predesigned ones which we don't want today. You can see your list of templates if you've already some at the moment. I don't have any in here, so what we really want to do to upload it is go to the HTML editor tab.

Under the designing content page, just go to the HTML editor tab and then click on this upload from zip option. It's important to click on this one. We don't want to paste in the code; we want to upload from zip. So, click on that. And then what you want to do is go back to the folder that you just unzipped from the Emailify export. Go into that zips folder where it says Zips for upload to GetResponse, click on that zip file, and then just drag and drop that zip file inside that zips folder into your GetResponse upload window here.

Once you drop that in, that will upload the zip file into GetResponse. And once it says it's ready for upload, just go ahead and click on the upload button. It's also worth being mindful that GetResponse does have a limit of 10 megabytes. So, if you've got some really large GIF files or image files in your email and that all exceeds 10 megabytes, it's unlikely that it's going to allow you to upload it. So just be mindful of that if you are uploading a very large email.

Once you've uploaded your zip, just click on the upload button, and that will upload your template and all of the images into GetResponse and it will create a brand new custom HTML template for you in your GetResponse account. You can see here that it's uploaded all of the HTML that we exported from the Emailify Figma plugin and you can see the preview on the right-hand side here, which is the same as the preview that we had in our Emailify plugin but this is now loaded into the GetResponse platform.

You can see our links are in there, we've got our unsubscribe tag viewing browser link, we've got this button here which we didn't actually link up but that's all looking really good. Once you're happy with it, you can either test and preview that or you can click on the save and exit button. So, I've just clicked on the save and exit button and you can see here that we've got our email template now under the my templates page. So, that's looking really good there.

Now that you've got that in there, you can basically use this template in your GetResponse emails and that's basically it. I just wanted to run through how to get the HTML email templates that you've designed in Figma using the Emailify plugin exported and uploaded as a zip file into your GetResponse account. So, hopefully, that's helpful if you're a GetResponse user and you're interested in creating some nice looking custom HTML emails. This is a really easy way to go about it if you're preferring to design them in Figma rather than using any of the pre-default kind of emails inside of the GetResponse template list. Thank you as always for watching and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export HTML emails from Figma to EmailOctopus using Emailify
date: 2024-03-09T00:00:00.000Z
---

# How to export HTML emails from Figma to EmailOctopus using Emailify



#### Video Transcript

Today, I'm going to be showing you a tutorial on how to export your HTML emails from Figma to the EmailOctopus marketing platform using the Emailify Figma plugin.

To get started, all we need to do is go to our Figma file, click on the "Resources" icon at the top, and if you search for Emailify and under the "Plugins" tab, if you click on the Emailify result, you can run the Figma plugin by either clicking on this "Run" button here, or I'd recommend clicking on this little "Save" icon here, and that will allow you to run the Figma plugin from your Figma plugins list. I've already clicked on the save icon, so I'm going to go to my canvas, just right-click anywhere, go down to "Plugins," and then go down to "Saved plugins" and click on Emailify, and that's going to allow us to run the Figma plugin that we just saved a second AG go.

If you're new to the Figma plugin, the way that it works is it helps you to design HTML emails in Figma, which you can then automatically export to production-ready responsive code, without needing to manually develop anything yourself. Today, I'm just going to keep it simple, and I'm going to create a template, just call it template example. You can also start with some preset templates if you want to get some inspiration on what can be designed with the Figma plugin, but for today, I'm just going to be creating a blank template, clicking on add new Emailify container. And as I mentioned, I'm not going to go through all of the design details today. If you want to check out how to design the emails, probably worth checking out some of the other video tutorials on the YouTube channel or going through the documentation.

Today, I'm just going to keep it really simple, adding a few different components without customizing them or changing any of the content. I just want to show you how to get this HTML template out of Figma and into the EmailOctopus marketing platform. So importantly, if you are designing your emails for EmailOctopus, you want to go down to the footer Tab and then click on the EmailOctopus footer option. So you've got this EmailOctopus footer that you can click, and that will automatically add a footer component to your design that pre-populates the correct unsubscribe links and viewing browser links. So you can see we've got our web version URL tag there, and we've got our unsubscribe URL tag there. There's also the address tag here, which will automatically populate the address details from your sender account. So that will automatically get added as well.

Once you're happy with your design, you can preview it in the Figma plugin by clicking on the preview button here, and that will automatically load up a real HTML preview of what the content's going to look like when it gets exported to production-ready HTML. I'm fairly happy with the design. You can check it out on mobile as well and apply any mobile overrides if you prefer. So you can override things like text sizes or you can override padding on rows and things like that. Again, today I'm just going to keep it really simple and leave everything as default.

Now we can export this by closing off the preview, clicking on the export HTML button in the Figma plugin, changing the default HTML email export option, scrolling down to platforms, and finding the EmailOctopus item. So go ahead and click on the EmailOctopus item, and then we can fill out our subject line. So you can put in your subject here and your preheader text. So the preheader text will come after your subject line when it's opened in Gmail or Outlook or anything like that. You will have to read the subject line in EmailOctopus, but the preheader text will automatically get included in the HTML. So it's still worth adding the subject line because it will add it to your title tag. So if someone opens up the email using the viewing browser link, the tab of the browser will contain whatever subject line you put in this input here in the Figma plugin.

Now that we've got those added, I'm just going to click on the export for EmailOctopus button, and that's going to automatically generate the HTML for us and export and upload all of the image assets. So once that's finished, just go ahead and click on the download your zip file button, save that to anywhere on your computer. I'm just going to save it to my desktop. I'm going to double click on that zip file and open up the folder, and you can see here that we've got a previews HTML file and also this folder here with our index.html file. So the index.html file is actually the one that we want to upload to EmailOctopus. So I'll show you how to do that now.

If you go to your EmailOctopus account, you want to go up to the templates option in the menu. So go to templates and click on that. And then to create a new template, we're going to click on the create button in the top right here. And I'm just going to say skip for now with this brand prompt. So I'm not going to set up my brand. I'm just going to skip because we've already got our brand in the HTML that we exported. And then what you want to do is go over to the left-hand side and click on the code your own option. So click on that code your own menu item on the left there. And then you want to go ahead and click on this little tile here that says code your own. So it's a little thumbnail. Just click on that, and that will open up a brand new fresh template that you can copy your own template code into.

I'm just going to call this custom HTML template from Figma. And then we want to basically go to this editor here, and we want to remove all of the default code that it adds. So we want to get rid of all of that. And we want to go back to our export. So if you open up your folder that you exported it from, go ahead and drag and drop the index.html file inside of your folder. So whatever you called the frame in Figma, that's what the folder will be named. Just go ahead and drag and drop that index.html file into this editor window here, and that will automatically include all of the HTML from the file that we exported from Figma into your EmailOctopus template.

You can see here we've got all of our code, and we've also got the preview, which is reflecting what we saw in our Figma plugin as well. So this is all of the HTML getting rendered. We've got our links here. We've got our CTAs, and everything's looking as we'd expect. So you can preview and test that. If you want to send a test to yourself, you can click on this send as a test, and that will let you send a test from EmailOctopus to your Gmail or your Outlook or whatever you prefer. And this is roughly what it's going to look like. So they're giving you this little preview, and you can check that out on mobile as well, just as we did in the Figma plugin too.

That's basically it; once you're happy, just click on the save button, and that will allow you to save the custom HTML template. It will take you back to your templates page, and you can see here we've got our custom HTML template that we just added ready to go. So you can now use that template in your sends from EmailOctopus, and that will be looking just as good as it did in the preview. 

I just wanted to show you how to export your HTML email designs from Figma created with the Emailify Figma plugin and get those into your EmailOctopus account, which you can then use to send custom HTML responsive emails with your campaigns or any other method that the platform supports. So thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export HTML emails from Figma to Loops using Emailify
date: 2024-03-09T00:00:00.000Z
---

# How to export HTML emails from Figma to Loops using Emailify



#### Video Transcript

Today, I'm going to be showing you a quick tutorial on how to export your HTML emails from Figma to the Loops email marketing and transactional email platform with the Emailify Figma plugin.

To get started, all we need to do is go to our Figma file, click on the little "Resources" icon up here, and if you search for Emailify and then click on the Emailify Figma plugin under the "Plugins" tab, you can run the Figma plugin by either clicking on this "Run" button here, or I'd recommend clicking on this little "Save" icon here, and that will let you run the Figma plugin from your Figma plugins list later. I've already clicked on the save icon, so I'm just going to go to my canvas, right-click anywhere, go down to "Plugins," and then go down to "Saved plugins," and click on Emailify, and that's just going to run the Figma plugin that we saved a second ago.

If you're new to the Figma plugin, the way that it works is it allows you to design HTML emails in Figma and then export those automatically to code without needing to manually develop anything. So I'm not going to be going through all of the design features today, but you can check out some of the other tutorials on our YouTube channel if you'd like to go through those, or you can start with a Figma template which is Emailify ready just to give you an example of the kinds of designs you can create using the Figma plugin.

I'm just going to keep it really simple today. I'm just going to call this example template and click add new Emailify container, and that will allow you to start adding components from the Figma plugin which you can then customize the content and design of for your own brand using the normal Figma tools that you're used to. So again I'm not going to be going through all of the design features today. There's a couple of other good tutorials on the channel or you can go to the documentation site to check those out.

If you are designing an email for the Loops platform, you definitely want to go to the "Footer" tab over here and just scroll down under the platform section to the letter "L" and find the Loops footer and click on that one. So clicking on that option will automatically pre-populate the unsubscribe link for the Loops platform. So this will add the unsubscribe link there, so you definitely want to add that in just as a required tag before uploading the email into Loops.

Now that we've got our email designed, we can preview that in the Figma plugin by clicking on the preview button here, which will automatically load up the real HTML that's going to get exported as a preview. You can test that out on mobile devices and desktop devices, and you can also apply any mobile overrides as well. So if you want to, for example, shrink some text or change the size of text or adjust padding on mobile and things like that, you can do that using the Figma plugin. But again, I'm not going to go into detail about that today. I'm just going to leave all those as the defaults.

Provided that you're happy with your preview and you're happy with your design, you can then click on the export HTML button in the Figma plugin and change this HTML email option and scroll down to platforms and again find the Loops platform. So you want to click on Loops, and you just want to make sure that you select the email you want to export. You can add your subject line here. Please be mindful that you'll also have to read the subject line in Loops later, but adding it here will also add it to your title tag in case anyone opens the email in their browser, and then the browser tab will also get this title tag populated with your subject. And then you can also add preheader text. So this is the text that comes after your subject line when someone's viewing it in Gmail or Outlook. So you can add all of your preheader text in here, and then you won't have to add it later because it will automatically get included in the template.

Now that we've got our subject line and preheader added, we can go ahead and click on the export for Loops button, and this is going to automatically generate the code for the Loops platform and allow us to save that to our computer. So now that it's finished exporting, we can click on the download your zip file button and just save that anywhere to your computer. I'm going to save it to my desktop.

And if you open up that zip file and then open up the folder that it creates, you can see here that we've got a folder called "_zips (For upload to Loops)." You'll notice that when we log into Loops as I'm already logged into, and then go to our templates page. So if you click on the templates page in the navigation and then scroll down to blank campaign. So if you click on blank campaign, create a new campaign from scratch, you can then go to this new campaign page. And what you want to do is click on this little upload a custom email button. So there's a little label that says upload a custom email with the icon with the up arrow. So click on that, and that will bring up this screen here which allows you to drag and drop a zip file, and you can see that it's asking for a zip file with an MJML file inside of it and the images also inside of the zip. So this is automatically being created by Emailify when you export the file. So you can see inside of this Zips folder it's already got the zip file that we're after, and we can just drag and drop that into the Loops upload field here.

We've just dragged our example template. zip into Loops. So now we can click on upload, and this will automatically upload the template along with all of the assets into your Loops campaign. So you can see here all of the HTML's being rendered as we'd expect. You can see all of the links so we got our unsubscribe link that we added for Loops and all of that's looking really good. As I said, you have to add your subject line again here so you've got subject subject line that you can populate which will get included in the send from Loops. And you can give your campaign a name so we can call that campaign name test.

That's basically it; I just wanted to show you how to upload your HTML emails from Figma into the Loops platform. This is going to be a really easy way to go about it just using that prepackaged zip file. For context, the contents of that zip file we can see just by opening up the zip here and what it contains is just a folder of images along with the index. MJML file so not an HTML file. Loops only accepts MJML which is a special type of email syntax that the Figma plugin generates for you automatically. So you don't have to worry about converting anything or doing anything special. You can just drag and drop the zip file inside of the Zips folder, and you'll be ready to go.

I hope that's been helpful if you've been using the Loops platform or you're just starting to use it with your team. It's a really great product, and I think this is a really easy way of getting custom designs in the platform if you want to design them in Figma first and then export them out to HTML for the Loops platform to send out in a campaign.

Thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export HTML emails from Figma to MailerLite using Emailify
date: 2024-03-08T00:00:00.000Z
---

# How to export HTML emails from Figma to MailerLite using Emailify



#### Video Transcript

Today, I'm going to be showing you a quick tutorial on how to export HTML emails from Figma to The MailerLite email marketing platform.

To get started, all we need to do is go to our Figma file. Click on the little "Resources" icon up the top here. And if you search for "Emailify," under the "Plugins" tab, if you click on the Emailify item you can run the Figma plugin by either clicking on this "Run" button here or I'd recommend clicking on this little "Save" icon here, and that'll allow us to run it from our Figma plugins list. I've already clicked on the little save icon so I'm going to go to my canvas, just right-click anywhere, go down to "Plugins," and then go down to "Saved plugins" and click on the Emailify item and that's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is it helps you to design HTML emails in Figma which you can then customize and export to production-ready responsive HTML automatically. So for this example, I'm just going to create a basic frame and I'm not going to go through all the design features in the Figma plugin today. If you're interested in those, there's a couple of other tutorials on the YouTube channel and in the documentation that I'd recommend checking out. But for today, I'm just going to be assuming that you've already added your Emailify components, designed out your emails and you just want to upload this to the MailerLite platform.

So you can see here, I'm just adding a few components. I'm not going to make this a very complicated email. The important thing to note is that you will need to add a MailerLite footer. So if you go to the footer tab in your Figma plugin and scroll down to the letter M, you'll see a MailerLite footer option. So just go ahead and click on that and that will automatically pre-populate these links down here with the MailerLite unsubscribe tag and the MailerLite View and browser tag so that will automatically render the correct links. You can style the footer as you like but those links will automatically be pre-populated. So just make sure you've got that footer added otherwise you may run into some issues later.

Now that we've got our email, we can preview that in the Figma plugin by clicking on the preview button here. So if you click on preview that will give you a quick HTML preview of what the code is going to look like when it's rendered as HTML and you can check that out on mobile and desktop. You can add mobile overrides if you want to add any of those styles. Again, I'm not going to go through all these features today but assuming you've got all these set up the way that you want and you're happy with the preview, you can go ahead and close that off and then click on the export HTML button in the Figma plugin.

And then just change this HTML export option and scroll down to MailerLite. So click on the MailerLite option and just select the email you want to export. You can optionally add a subject line and preheader text. I would add the preheader text here so add the preheader text in the Figma plugin. You can also add your subject line directly in this input here but just be mindful that you will have to add that subject line manually again once it's uploaded into MailerLite in a moment. So I'm going to add this in now just to add it into the plugin version which is still going to populate it in the title tag. So that will show up if you use the viewing browser link down here and you open up a new browser tab this subject line that you add in the plugin will get shown as the title in the tab of the browser tab. So you can still add it in here but you will have to add that subject line in a moment.

Now that we've got those added, we can just go ahead and click on the export for MailerLite button. This is going to automatically export and generate the HTML code automatically from Figma for MailerLite. Now that the export is completed, we can just go ahead and click on the download your zip file button, and we can save that anywhere on our computer. I'm just going to save that to the desktop.

I'm just going to double click on that zip file, open up the folder, and you can see here we've got our exported files. It comes with a previews page, so if you want to add a preview link to share with your stakeholders or clients, you can send them a copy of this and upload it somewhere, and they'll be able to preview that real HTML on mobile and desktop.

But the file that we're really looking for today to upload into MailerLite is this index.html file inside of the folder with whatever you've named your frame. So you'll see a folder in the zip file with an index.html file inside that. What you want to do is open up that HTML file either in a code editor or just in the browser. What you can do is you can copy that code by just right-clicking anywhere, going down to view page source, and then just select all and copy. So, copy all of the content of the HTML file into your clipboard.

Then what you want to do is log into your MailerLite account. So I've just logged into MailerLite.com, and I'm just on the dashboard. What we want to do is click on the campaigns menu item in the left-hand side here, and when that loads, we're going to select create new campaign. So go ahead and click on the create new campaign button there.

Click on the "Regular Campaign" option. Just click on that option there. Once that loads, you can then fill out your content for the campaign. So I'm just going to call this test campaign, and you can add in some subject line here, as I said. You can add in things like Dynamic content as well into the subject. I'm not going to go too crazy with that for now. I'm just going to be showing you what that looks like. The preheader, you can leave blank if you've already added in the Figma plugin. Otherwise, it may double up in the code. And then just select your recipients. So select the list you want to send it to and click on select. Once you've filled out all those details, just go ahead and click on this next button down here.

Then we want to click on the custom HTML editor option. So we don't want any of these first two. We want to go down to the bottom where it says custom HTML editor and click on continue. Once that loads, you will be able to import the HTML that we just copied from our index.html file. You can see down here there's a button that says import HTML. Go ahead and click on import HTML. Then click on the import code from file option. It says here you can import it from URL or paste your HTML. Just go ahead and click on the paste your HTML option. You can see it gives you this code window here that we can paste our code into. So I'm going to paste that in there now. You can see that immediately it loads up the preview based on the HTML that we copied from our index.html file. That's all looking really good. We can see that the HTML is all being loaded. The image content is also being loaded in. That's looking really good now.

You can then preview and test this if you want. You can either send yourself a test email or go into preview mode which will do something similar to the preview we were just looking at a minute ago where you can toggle it between desktop and mobile width to see what that looks like in here. You've got the option to do that as well. Once you're happy with that, you can just close it off and then click on done editing. Click on the done editing button and that will bring you back to your campaign. You can see here that the campaign is now ready to go. We've got our review and schedule page. We've got all our details that we added in the previous pages. All you would have to do now is select when you want to send that campaign based on the list that you selected and based on the other details that you added. That's basically it. If you want to, as a last step, you can also add a plain text version. So if you want to add a plain text version of the email, you've got the option by clicking on this little edit button here.

If you click on that Edit button, it tries to add a plain text version automatically. But if you want to use the one that's exported from the Figma plugin, you can do that by opening up this plain text version.txt file included in the zip file from Emailify. Open that up and just copy-paste all of the content from there into this window here. You can basically paste all that in there, and it will automatically include any links that you've added next to the copy that you've added the links to, and it will do a few more details like that just to make it a bit easier to read if you don't have the full version loaded up. This is the plain text version. If you're happy with that, just go ahead and click on save, and that will save the plain text version of the email as well. 

That's basically it. I just wanted to show you how to get your HTML emails exported from Figma and save those out to be imported into the MailerLite platform if you're using that for your HTML marketing. I'll leave it there for today. Thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export HTML emails from Figma to Stripo using Emailify
date: 2024-03-07T00:00:00.000Z
---

# How to export HTML emails from Figma to Stripo using Emailify



#### Video Transcript

Today, I'm going to be showing you a quick tutorial on how to export your HTML email templates from Figma into the Stripo email platform using the Emailify Figma plugin. 

To get started, all we need to do is go to our Figma file. If you click on the little "Resources" icon up here and search for Emailify under the "Plugins" tab, if you click on Emailify, you can run the Figma plugin by either clicking on this "Run" button here or I'd recommend clicking on this little "Save" icon here, and that'll allow you to run it from your Figma plugin list. I've already clicked on the save icon so I'm going to go to my canvas, just right-click anywhere, go down to "Plugins," then go down to "Saved plugins," and click on Emailify, and that's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is it helps you to design and export responsive HTML emails directly from Figma without needing to code anything or know anything about email development. So to get started, all we're going to do is just create a brand new email. So I'm just going to call this test template from Figma and click on add new Emailify container.

I'm not going to be going through all the design features of the Figma plugin today. If you are new to the Figma plugin and you want to learn more, there's a bunch of YouTube tutorials on the channel or in the Emailify documentation that you can look into, which will give you a deep dive into the design tools and how to customize emails for your own brand and design. But for today, I'm just going to be sticking with a really basic template that I'm just going to spin up right now. I'm not going to customize it. You can obviously customize this design and content for yourself, but for today, I'm just going to be keeping it really simple to show you how to upload this into the Stripo platform.

We've just got a few different components here, which we can then preview in our preview panel here by clicking on the preview button. And you can see here we've got our HTML as we'd expect, taking from the design. Again, I'm just going to keep this really simple and show you how to get this HTML into the Stripo platform. So all we need to do once you're happy with your email is click on the export HTML button in the Figma plugin.

Then just change this option up here from HTML email and go down to platforms and find Stripo. So click on Stripo. And then once you've added your subject line and preheader text if you'd like, then you can click on the export for Stripo button. I've just clicked on that, which is going to generate all of the HTML code export and upload all the images. And then we can just click on this download your zip file button here. And then we can save that anywhere on our computer. So I'm just going to save it to my desktop.

If you unzip that zip file and then open up the folder, you'll be able to see that we've got a previews page. And so this allows you to view a preview of the email. So you can see the desktop version, the mobile version, and you can send this to clients or stakeholders to approve the email. But for today, what we really want to do is get the index.html file inside of the folder here. So you want to expand your folder that you've named the same as your Figma template. So whatever your Figma template is called in the frame that's what the folder is going to be called here. And the file you want to get is the index.html file. So just go ahead and open up that file. You can open it up in a browser or a code editor. I'm just going to open it up in the browser.

To get the code, you just have to right-click anywhere on the page and click on view page source. And then you can grab the code by selecting all the content. So that's "Command + A" on Mac or "Control + A" on Windows. And then just copy that to your clipboard. So just either right-click and copy that or do a "Command + C" or "Control + C" to copy that to your clipboard.

Then you basically want to go to your Stripo account. So I'm already logged into Stripo. I currently don't have any emails added. So if you've got no emails on yours as well, the button you want to click on is this basic templates button. So in your Stripo doil account, click on basic templates under the email messages tab. So just go ahead and click on basic templates. And then you want to click on the my HTML option here. So you don't want the empty template. You definitely want this my HTML template. Otherwise, you're going to get a bunch of other stuff that we don't want. So go ahead and click on my HTML. And once that loads, you'll get the Stripo editor pop up here with a blank screen.

What we need to do now is click on this little code icon up here. So you can see where I've got my button hovered. So click on that little code button. And that's going to open up this code editor down here. So we don't want any of this code that is being included by default. So you're going to select all of that code, just select everything, and then we're going to paste from our clipboard. So "Command + V" or "Control + V".

Now that we've pasted in the HTML, you can see that it's instantly loaded up the template in our editor here. We can make small tweaks to this content. So if you wanted to remove certain bits of text or expand it, you can add in text there. Or if you want to change any of the images, you can click on an image that'll load it up in here. And you can see currently it's uploaded on the hyper Matic CDN. But you can change that out with your own image if you wanted to replace it. So you can click on replace image and then drag and drop an image from your computer or one that you've got saved in the Stripo platform. And you can automatically override those images if you like.

Alternatively, you can edit those in Figma and re-upload the content. It just depends on what you want your workflow to look like. So I'm going to upload one more Figma template just to show you how to do this if you've already got some messages or templates added to your email messages page here. And what you can do is click on this new message button. So go ahead and click on new message. And you want to click on my HTML again. And one more time, we're just going to click on the code button and select all and paste. And again, we've just added our template as well. So that was just exactly the same steps on that second part. The first part was just showing you the difference between loading the new message template or new template page with no templates added previously. So you get that little set of menu buttons here, which doesn't include this new message button. But once you've added at least one template, you can always add new ones using this new message button. So just make sure you click on that and that will always take you to the new message screen.

Then just click on my HTML. And once again, click on the code button to paste in your template. So whatever template you're exporting, I'll just export one more so you can see what it looks like. We're just going to export this GitHub template, which I've taken from the community. So if you browse some of the Figma templates that are included in the Figma plugin, that's the GitHub one there. So you can grab those for free of the Figma Community. There's an Emailify compatible out of the box, so you can grab that. 

I'm going to export that one, click on export HTML, change this to Stripo once again. So I'm going to click on the Stripo option, click on export for Stripo. And once that finishes exporting, I'm going to save that to my computer again. So this is just finishing uploading the images. I'm going to click download your zip file, save that to my desktop again, open up that new zip file, and open up the folder. And you can see here under the Emailify template, we've got our index.html file. So once more, I'm just going to drag and drop that into my browser. And you can see the content is all there. So we're going to right-click, go to view page source, so we'll copy all of the HTML go back to Stripo, and in our new template that we just selected a second ago, we're going to again paste all of that in over the top of the code there. So we're going to select all, paste. You can see we've got our content in here as we'd expect. So we've got our links. So if you wanted to add a link in here, you can add that in. So you could add that to github.com and that will automatically link that to github.com when it's clicked. So this is a really easy way to make content updates. Or you can just basically leave the content as it is from Figma and then send out the email from Stripo to whatever integration you're using with their platform.

That's pretty much it for today. I just wanted to show you a really quick tutorial on how to get your HTML emails out of Figma into the Stripo platform and into their editor using the Emailify Figma plugin. Thank you as always for watching and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to add Outlook-compatible gradient buttons to HTML emails with Figma using Emailify
date: 2024-03-06T00:00:00.000Z
---

# How to add Outlook-compatible gradient buttons to HTML emails with Figma using Emailify



#### Video Transcript

Today I'm going to be showing you a quick tutorial on how to create Outlook compatible gradient buttons for your HTML emails using the Emailify Figma plugin.

To get started, we just have to go to our Figma file, click on the little "Resources" icon up the top here. If you search for Emailify and under the "Plugins" tab, click on the Emailify item. You can run the Figma plugin by clicking on this "Run" button here or I'd recommend clicking on this little save icon here and that'll save it to your Figma plugins list for easy access. So, I've already clicked on the save icon. I'm going to go to my Figma canvas, just right click anywhere, go down to "Plugins", then go down to "Saved plugins", and click on the Emailify item. That's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is it helps you to design and Export HTML emails from Figma automatically. So, I've already got an email designed here that I've taken from the templates. So, there's some templates that you can duplicate for free from the Figma community that are Emailify compatible. So, these are sort of some pre-designed templates to give you some inspiration of what can be created with the Figma plugin. I'm not going to be diving into all of the design features today. I'm going to be assuming that you've already watched some of the other tutorials and read through the documentation to create your own Emailify design and I'm just going to be assuming you've already got that set up and you've got some buttons that are currently solid fills that you want to then convert into gradient buttons instead.

We're going to do that now. I'm just going to close off this little window and again just a really quick refresher if you need to add a button you can do that by clicking on the column layer in your designs then going to the button layer down here clicking on "Add" and that will add an Emailify button that you can then customize in Figma. You can also add a URL to that by clicking on the button layer then clicking on the little settings icon or settings button in the Figma plugin and you can paste in your clickable URL link there and that will automatically link the button to that URL later along with some other responsive features that you can customize to your own liking.

I'm just going to close that off and delete that new button and we're just going to focus on converting this one into a gradient button. So, all we need to do is click on our Emailify button layer, go over to the fills panel here and we're just going to click on that fill and we're going to change it from solid to gradient. So, just go ahead and click on this little gradient icon in the fills panel and automatically converts it into a linear gradient. So, all I'm going to do is change this second color to match this red from this logo here and you can see we've now got a darker red to a lighter red so we can change that however we like we can make that lighter or darker we can also adjust the gradient angle if you want to change that you can obviously change that to be vertical or you can flip it around today I'm just going to be keeping it really simple and making it a linear angle straight through the middle here.

Now that we've got that added in we can also adjust the Border radius I'm just going to make this 60 to make it a really big one you can actually turn that off or you can make it a small one it's totally up to you I just want to do this to show you how the radius is also going to work in Microsoft Outlook so these are Emailify buttons that are going to get exported with some special code to automatically work in Outlook which isn't usually the case so I'm going to show you what that looks like in a moment but first just to make sure we're happy with the design we're just going to click on the preview button in Emailify and this is going to show us what the HTML version looks like so you can see this is a real HTML button we can see what that looks like on desktop as well so that's looking really good.

I'm happy with that so now we can export this to HTML by closing off the preview clicking on the export HTML button in the Figma plugin and then you can export this to any platform you like if you're exporting it to a certain platform like MailChimp or Klaviyo go ahead and select that option option but for today I'm just going to be exporting it directly to my computer using the HTML email export option so I'm going to select that option I'm going to upload the images automatically so I've got that little toggle checked and I'm just going to leave the subject line in preheader blank for now so I'm going to click on the export to HTML button that's going to automatically convert the design into HTML code and upload all of the images and then we're going to be able to download the zip file to our computer once that finishes export in.

It's just finished exporting so I'm going to go ahead and click on the download your zip file button and I'm going to save that to my desktop I'm going to open that up by double clicking on the zip icon and then opening up the folder so you can see here we've got our export and you can see we've got a couple of files we've got the previews HTML file and we've got our index.html file so the previews HTML file is actually a preview file that you can send to clients or stakeholders so that just allow allows you to see what the design looks like on mobile and desktop at the same time on a really easy to browse page that you can share and then the actual HTML is inside of the Emailify template folder which is what we named our frame in Figma so if you open up that folder you've got the real index.html file here and you can see what that looks like by opening up in your browser and this is the HTML email code that we're then going to use for our send.

Just to show you what this looks like in Outlook as I said I've uploaded this HTML into Litmus which allows you to test your HTML emails across all different types of email clients and it's going to render the HTML in the real email client so these are real screenshots of real email clients so you can see here we've got Outlook 2010 running on Windows 10 so if we open up that preview you can see that the HTML that we sent to Litmus has been rendered in the real app so we can see what the HTML is going to look like when it's opened on Outlook 2010 in this case so the important thing to note is that we can see the gradient button is getting rendered as expected so this is a real HTML button this is real Rich text as we could see in the preview and you can see here that it's rendering the corner radius as well so we've got Corner radius and we've got gradients fully supported in the legacy Outlook apps which in notorious for being really bad for rendering things so we can see it's working as expected 2016 2019 20121 all of the clients there as you'd expect and of course the mobile clients as well so we've got outlook on iOS is also going to render that as we' expect so we've got our gradient buttons there and also we've got iPhone mail so Apple Mail as well also going to render that as expected this particular test I moved the button above the copy just to make it easier to see in some of those previews but it's the exact same design that we just created in Figma a moment ago.

I just wanted to show you what that looks like in these devices and as I said Gmail is also going to support these it's going to be pretty much supported across the board with the exception of Yahoo so Yahoo mail does not support this so what Yahoo will do is it will fall back to the solid color that you used in the first color in your gradient so so what I mean by that is you can see this dark red or purple sort of color here is being used in Outlook as a solid color you can see in Figma when we open that up it's actually taking the first color from our gradient so basically whatever we use is that first color in the gradient that will always be used as the fallback solid color if the gradient isn't supported in a certain email client which in this case is the Yahoo male client so that's what that looks like there.

That's basically it; I just want to keep this really short short to show you how to create these gradient buttons HTML gradient buttons that work in Outlook and all of the other modern email clients that you'd expect to support it but most importantly all of the legacy Outlook versions and Outlook apps on windows are going to render this as we expect directly from our Figma designs so I hope this gives you a little bit more flexibility when you're creating your email designs where you can now add gradient buttons and buttons with Corner radiuses which will now get supported automatically for these legacy Outlook clients when you export the HTML from Figma using the Emailify Figma plugin so that's what that looks like there.

I hope that's been helpful if you've been wondering how to create bulletproof gradient buttons that you can use in your HTML email designs and still have them look great in even the worst clients which are obviously the Outlook browsers and Outlook email clients that we've all grown to deal with the problems of so this should make that process a little bit smoother and remove some of the headaches when it comes to troubleshooting and figuring out how to code these buttons to work in Outlook so thank you as always for watching and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export HTML emails from Figma to Zoho Campaigns using Emailify
date: 2024-03-05T00:00:00.000Z
---

# How to export HTML emails from Figma to Zoho Campaigns using Emailify



#### Video Transcript

Today I'm going to be showing you a quick tutorial on how to export HTML email templates from Figma to the Zoho Campaigns platform using the Emailify Figma plugin.

To get started, all we need to do is go to our Figma file, click on the little "Resources" icon up the top here. If you search for Emailify and under the "Plugins" tab, click on the Emailify item. You can run the Figma plugin by either clicking on this "Run" button here or I'd recommend clicking on this little "Save" icon here. That will save it to your Figma plugins list for easy access. So, I've already clicked on the save icon. I'm going to go to my canvas, just right click anywhere, go down to "Plugins", then go down to "Saved plugins", and click on the Emailify item. That's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is it allows you to design and then export responsive HTML emails from Figma to code automatically. If you're new, you can either start with a blank frame or you can browse some of the templates. So, if you want to start with a template or just see what's possible with the Figma plugin, you can duplicate any of those. Today, I'm just going to keep it really simple and create a new template called Zoho Campaigns and click on add new Emailify container. Then you can basically go through and start designing your email.

I'm not going to be going into detail about how to design the templates themselves. I'm just going to run through that really quickly. I'm just going to assume you've already got that created if you haven't gone through those features before and you want to learn more, there's a few tutorials on our YouTube channel that you're welcome to check out and those will give you a comprehensive overview. Today, I'm just going to be going through some of the basic features of the Figma plugin to design it just to get a quick template spun up.

You can see here, I'm adding a bunch of components. You can obviously customize these content-wise and design-wise in the Figma plugin. But the last thing you just have to make sure of before you upload the template in a moment is go to the footer tab and then scroll all the way down in this platform section to the bottom. You want to find the Zoho Campaigns footer. So, click on Zoho Campaigns and that's automatically going to add a footer pre-populated with the correct unsubscribe and view in browser links. So, if we inspect those in the Figma plugin, just click on the little settings button up here and you can see that we've got our viewing browser tag and our unsubscribe tag added in automatically and also the company address merge tag at the bottom too. So, those are basically good to go.

Now, we can upload this to Zoho. So, what you want to do is go to the export HTML button in the Figma plugin and click on that. Then you want to click on this little HTML email option here and scroll down to the platform integration section. Go all the way down to the bottom to find Zoho Campaigns. Then just click on the export for Zoho Campaigns button. You can also add an optional preheader text. So, this is the text that appears before your subject line in the email client. You can add your preheader text and subject line. So, the subject line will get added to the title tag in your HTML file but you will still need to add it manually in Zoho Campaigns in a moment which I'll show you once we export it. So, go ahead and click on export for Zoho Campaigns and that's going to now export your HTML email from Figma and let you download it to your computer. We're going to click on download your zip file and then just save that anywhere on your computer to your desktop if you prefer and click on Save.

Then just double click on the zip file to unzip that and that's going to open up this folder here. You can see we've got a previews page. So, this is the page that'll let you preview your HTML file. So, if we open that up in the browser and just drag and drop that in, you can see we can get a preview page of what that's going to look like on desktop and mobile. So, you can scroll through that. These are good for sending to clients for approvals as well but the file that we want to use to upload into Zoho Campaigns is actually inside the named folder here. So, this is going to be named the same as whatever you've called it in Figma. So, we've called it Zoho Campaigns. So, you want to go into that folder, go to the index.html file. So, you can see we've got this index.html file and that's actually the one that includes our HTML that we're going to use in a moment.

Now that we've got that open, we want to go to Zoho Campaign. So, just log into your Zoho Campaign account, go to the campaigns tab on the left, click on that and then click on email campaigns. So, we want to go ahead and click on the create campaign button. So, I'm just going to click on that now and then what we want to do is just go to regular email. So, I'm going to click on create new under regular email, give it a name. So, we'll just call it "Test campaign from Emailify" and click save and proceed. This is going to give us a blank campaign that we can now import our content into.

As I said, we still need to populate the subject line manually. So, you can add a subject line here that's going to be used if you've already added the preheader in Emailify, you don't need to add it in here, otherwise, it's going to double up. So, just leave that blank and click save and then you'll need to add your sender details. So, go ahead and do that, add your list. So, go ahead and do that and once you've done that, you want to then go down to here where it says create content. So, click on the create content button and here we basically want to click on the import upload HTML option down here. So, go ahead and click on import upload HTML and then click on upload from computer and then you want to go over to this Le hand option here where it says upload or drag and drop your HTML file.

We're going to do that now by opening up that folder that we just had and you can see here the index.html file inside of our folder. We want to grab that file, drag and drop it into the little window here and that's going to drag and drop the index.html file in as you can see and once you've done that just go ahead and click on the upload button and this is going to upload the HTML file. The HTML file already has the image assets uploaded so you don't need to worry about that. You can just drag and drop that file directly from your folder into Zoho Campaigns. So, you can see now that I've uploaded it, we've got it imported into our campaign. So, if we click on this little magnifying glass you can see that the HTML has been imported that we exported from Figma that's now opening up in Zoho Campaigns as we'd expect.

That's looking really good. We can close that off now and again you can go through all these options yourself there's a few different options that Zoho Campaigns gives you. I wouldn't recommend manually editing the HTML because it's already been pre-optimized but you do have the option to do that if you want to. The other thing worth noting is if you want to add a plain text version. So, you can see here there's this little edit button for the plain text version. If you want to do that you can see here that it's tried to already do it itself. If you want to update that or create a more Advanced version the Emailify exports automatically include a plain text version that you can see here. So, we can actually just copy paste that and drop it into our plain text window here and that's going to automatically include things like links so this button doesn't have a link on it but if it did you would get the actual HTTP link inside of the plain text version as well. So, that's something that you can do if you'd like to. You can just add the plain text version in manually. So, go ahead and click on Save and that's basically it. We've just added our custom HTML template that we exported from Figma using Emailify and we've dragged and dropped that into our Zoho campaign and we can now send this out to any list that we like and that's going to look really good.

That's basically it, I just wanted to keep it really simple for today. If you are using Zoho Campaigns this is a really easy way of getting the HTML out of Figma and into Zoho Campaigns for your email sends. So, thank you as always for watching and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to design and export Email Signatures from Figma using Emailify
date: 2024-02-08T00:00:00.000Z
---

# How to design and export Email Signatures from Figma using Emailify



#### Video Transcript

Today, I'm going to be showing you how to design and export HTML email signatures from Figma using the Emailify Figma plugin. 

To get started, all we need to do is go to our Figma file, click on the little "Resources" icon up the top here. Then, if you search for "Emailify" and click on the "Plugins" tab, you can then click on the Emailify result and run the Figma plugin by either clicking on this "Run" button here or I'd recommend clicking on this little "Save" icon here. That's going to let us run the Figma plugin from our right-click menu in a moment. I've already clicked on that save icon, so I'm going to go to my canvas, just right-click anywhere, go down to "Plugins," and then go down to "Saved plugins" and click on the Emailify result. That's going to run the Figma plugin that we just saved a second ago.

If you're new to the Figma plugin, the way that it works is it helps you to design and export HTML emails from Figma. So, we can get started by just creating a new Emailify frame. We can give this a name of email signature template in this case. Then, I'm just going to click on the add new Emailify container button. That's going to create a new Emailify frame on our page that we can then use to insert components from the Figma plugin.

Today, I'm just going to be skipping over all of these other content components because we're going to be focusing on email signatures specifically. So, these are going to be used more for HTML email marketing templates as opposed to a small email signature. Instead, we're going to go over to the footage tab here and then click on the signatures subcategory. This is going to give us a few preset starter components for creating an HTML email signature really easily. I'm just going to use this simple one at the bottom down here, and I'll show you how we can customize that in Figma.

You can see after I click the layer, it's just basically adding all of the Figma layers and layout to my Emailify frame. We can customize this by using our own content as well. For example, if I want to swap out the logo, I can drag and drop my own logo from my computer into the Figma file and then just drag and drop that directly into the column. You can see here we've got a few different layers in there. I'm just going to get rid of the original image that was in there. So, I'm going to get rid of that one, and we can then obviously customize the text. So, I can put my name in there, I can add my role, customize the phone number, customize the website, all of that sort of stuff.

You can obviously style these as well. So, if we wanted to make these bold, you can do that for some stylistic reasons. You can change the color. So, if you wanted to change the color of that text, you can certainly do that. We could make it Pink in this case if we felt like that. And you've really got creative control over the typography and imagery and layout. So, you can adjust the item spacing, for example, if you wanted to make those narrower or larger, you can adjust the item spacing in the auto layout properties here. If you want to customize this further, you can certainly do that as well.

For example, if we were to click on the column layer inside of our signature row, you can see down here there's some options to add new elements. If you open up that dropdown list, you've got a bunch of options for different elements that we could add in. For example, we could add some social icons. So, if you click on the add social option and then click on the add button, that would automatically give us a social icon link here. So, we can add some spacing above that and customize those icons. So, for example, if we don't want the Facebook icon and we don't want the YouTube icon, you can delete those and then click on the social layer again and then go down here to choose more social icons that you can add in as well. So, we might want to add in a slack link so you could add a slack icon there, you could add a WeChat link, so all of these social icons can be added in there, and you can apply links to those just by clicking on any of those social icon link layers going to the icon layer settings button in the Figma plugin, and then you can just add a clickable URL in there. So, you could add a link to your website or link to your social media page, and that will automatically get included as a link.

The same thing goes for your image. So, if you want to link that image to your website, you can click on the image layer and again paste in your clickable link URL into that link field here. So, for example, we could add a link to the website there, and that would automatically make the link clickable. So, we've just added links to those. We can also preview the signature. So, if we click on the preview button in the Figma plugin, that will give us a little bit of a preview. So, you can see here this is the real HTML version of the content. You can see here it's got a link on the logo, it's got a link on the social icon as well, and you can see this is all rich text that's selectable. So, that's basically what the signature is going to look like. You can disregard this outer email body color that's not going to get included for the email signature export option which I'll show you in a moment. You can go ahead and close off the preview.

Once you're happy with your HTML email signature design in Figma, you can export that to an HTML signature by clicking on the export HTML button in the Figma plugin, and then you just want to change the HTML email option up here to be HTML email signature instead. So, click on the HTML email signature option, and once you've got that selected, you can then go ahead and click on the export to HTML signature button, and that's going to automatically generate the exported HTML and image assets that you can download as a zip file.

You can see here it's telling us that our email signature code is ready to download, so we can go ahead and click on the download your zip file button. If you click on that, you can then save the zip file to your computer. So, I'm just going to save it to my desktop, click on Save, and then if I double click on the zip file to unzip it, you can see the contents of that file is here. So, we've got our HTML email signature template; this includes our images which have automatically been uploaded during the export process. We've also got our index.html file inside of the folder, so that is actually our production-ready code. For example, if we go to our browser and open that up, we can drag and drop that in to have a look at it. So, if you open that up, you can see here that this is our email signature; all the code is there, and you can also see that we've got a preview page as well. So, we've got this that we can open, and that's just going to give us a little preview of what it's going to look like on small screens and and large screens, and importantly it's also got this really useful button that is called copy HTML signature. So, if you click on that button that's automatically going to copy the production-ready HTML from this index.html file to your clipboard. So, you can see if I paste here in this text field all of that HTML has been copied to my clipboard and I can now paste that.

The reason why that's so useful is that we'll see in a moment there's going to be a way to copy and paste that HTML into the email client that you're using. So, what you want to do is click on that copy HTML signature button in the previews HTML page that we just opened and then you want to go to the Emailify documentation page, there'll be a link to that in the video description below as well, and what you want to do is scroll down on the left side panel here all the way down here to the exporting email section and you want to go down to the email signatures option down here. So, you want to expand that out and what you want to do is find your HTML email client platform.

You can see we've got Apple Mail, we've got spark, we've got Gmail yahoo outlook.com, so you want to go through those and find the correct one for you. So, depending on what email client you're using this is going to be different depending on what email client that you need to insert the signature to so you can see here it's got the instructions for how to copy the HTML signature and then it gives you step-by-step instructions on how to get to the place where you need to paste that code in and then it'll give you some step-by-step instructions and tips if there's anything to be mindful of. So, you just want to find your client go through those steps in the documentation and again take that HTML that you've copied from the preview page and paste it in wherever it's required based on the steps here. So, you can see in the airmail example there's a place in the account settings under signature where you'll be able to paste in that HTML.

Again you just want to follow those steps to show the right place to paste in that HTML and then you'll get your email signature looking as expected. So, that's basically it for today. I just wanted to go through that experience of creating the HTML signature in Figma and then exporting it to HTML and pointing you to the documentation for how to actually then add this email signature into your email client to be sent out along with your messages.

So, I hope that's been helpful if you've been wondering how to create HTML email signatures without hand coding them this will hopefully save you a lot of time by being able to design them in Figma and then have the code automatically exported to an HTML email signature package that you can then download and use for you or your team with your custom email signatures. So, thank you as always for watching and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export Plain Text emails from Figma using Emailify
date: 2024-01-23T00:00:00.000Z
---

# How to export Plain Text emails from Figma using Emailify



#### Video Transcript

Today, I'm going to be showing you a really quick Figma tutorial on how to export your HTML email designs from Figma to also include plain text versions using the Emailify Figma plugin.

To get started, all we need to do is go to our Figma file, click on the little "Resources" icon up the top here. If you search for "Emailify" and click on the "Plugins" tab, you'll be able to run the Figma plugin by either clicking on this run button here or I'd recommend clicking on this little save icon here. That'll save it to your Figma plugins list for easy access later.

I've already clicked on the save icon, so I'm going to go to my canvas, just right-click anywhere, go down to "Plugins," then go down to "Saved plugins" and click on the "Emailify" item. That's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is it helps you to design HTML emails in Figma, which can then be automatically exported to code using the Emailify Figma plugin. I'm not going to be going through all of the design features in this tutorial. I'm going to assume you've already followed along with some of the other tutorials and documentation to get your Emailify template ready to go, and I'm going to assume you've already got it ready to export to HTML.

Today, I'm just using one of the templates that you can use from the template Gallery over here. I'm just using the GitHub template as a quick example, and I'm going to export this now to show you what it looks like as a plain text version of that email.

You can see here that I've got a few links in here. I've got a link in the paragraph, I've got a button link down here, which is being set through the settings panel up here, and I've also got my unsubscribe link down here. I'm going to show you what that looks like when we export it.

If you click on export HTML and then click on the HTML option or any other platform integration that you want to select and just click on export to HTML, that's going to export the email design from Figma automatically to a zip file. I'm just going to download the zip file, open that up from my desktop.

If we open up the folder and then open up the Emailify template, which is the frame that we called the design in Figma, you can see here there are two different files. There's an index.html file, so that one is the actual email template in HTML. If I open that up in my browser, you can see here that we've got the HTML version looking really good as we'd expect. So, that's your HTML version.

But now we've also got the option to have a plain text version as well. You can see we've got this plain text version.txt file. If I go ahead and open that up in a text editor, I'm just going to open it up in GitHub Code Studio for now and I'll just wrap the line so you can see that a little bit easier.

You can see here that the plain text version of the email has been automatically included as a text file. So, you can see our content from the HTML is all getting included. This is a plain text file; there's no HTML in here. You can see the headline's been included, but also the links have the HTML URL in brackets next to them. So, you can see next to the signup text, which is a button in our design, we've got the button here that links to github.com. In the plain text version, those links automatically get converted into just plain text with the actual link next to it in brackets.

Anyone who's reading the email in plain text, which some email clients do, then they'll be able to click on that link or view that link without having the HTML version accessible to them. So, I just wanted to show you that really quick tutorial. This is a new feature that's been included in the Figma plugin. This will automatically always get exported alongside your HTML file. So, whenever you export your emails from Emailify to a zip file, you'll always have the plain text version right next to the index file.

This won't affect anything in your index file; it's a completely separate file that you can use. Sometimes you have the option of including a plain text version; some email marketing platforms actually require a plain text version. So, this is a really easy way for you to copy and paste a plain text version of your HTML emails into those platforms.

And just finally touching on the other platforms, as I mentioned, if you do select one of the other platform options, for example, if you're selecting one of these integration options here like Salesforce or Pardot or Klaviyo or something like that, the HTML and the plain text version will automatically be uploaded if that's supported. If the API for the marketing integration supports uploading a plain text version, then the Figma plugin will automatically take the content that we just looked at in this file here, and it will automatically upload that to your email marketing platform.

Again, this is going to depend on which platform you're using, but if it's supported, the Figma plugin will automatically include that. So, you don't really have to worry about it when you're uploading your emails.

As I said, that was a really quick tutorial. I just wanted to show you that feature, which has just been included in the Figma plugin. Please feel free to try it out, and hopefully, that helps your workflow if you are needing to convert your HTML emails into a plain text version to use with your email marketing platform.

Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: article
title: From Three to Four
date: 2023-12-21T00:00:00.000Z
---

# From Three to Four



>“We run this spot like a Chinese sweatshop. Don't stop, work a worker 'til chest pop.” 

— [Run The Jewels](https://www.youtube.com/watch?v=G-S9mtYowPY), Oh My Darling (Don't Cry)

It's been exactly one year since posting an update for Hypermatic's 3rd birthday ([From Two to Three](https://www.hypermatic.com/articles/from-two-to-three/)), so here's another annual recap to celebrate Hypermatic turning 4 years old today!

### Some numbers to celebrate from 2023

- **0** investors and **$0** funding (still happily bootstrapped/[default alive](http://www.paulgraham.com/aord.html))
- **1** brand new product shipped ([Weblify](https://hypermatic.com/weblify))
- **30** free Emailify-ready [Figma templates](https://www.hypermatic.com/templates/emails/) published
- **97** new YouTube [tutorials](https://www.youtube.com/@hypermatic_tutorials) recorded
- **639** new product updates and improvements shipped
- **1,029,000** users (up from 570,000 a year ago)

### Some new feature highlights shipped in the last 6 months (since July 2023)

Besides the usual bug fixes, customer requests, and other smaller enhancements, these were some of the other new features that made their way into the [@hypermatic](https://x.com/hypermatic) feed on X (which is mainly used to keep a record of these changes) over the last 6 months:

- [Responsive borders](https://x.com/hypermatic/status/1738405967107404069) to Emailify
- [Custom Font settings](https://x.com/hypermatic/status/1733986176657399963?s=20) to Emailify
- [Chart Builder feature](https://x.com/hypermatic/status/1731138686178500899?s=20) to Pitchdeck
- [PDF Image Downscaling](https://x.com/hypermatic/status/1729342584500396303?s=20) to TinyImage
- [Image Fills Downsizer](https://x.com/hypermatic/status/1727158906412249297?s=20) to Pitchdeck
- [GIF Transition Effects](https://x.com/hypermatic/status/1726436972766613511?s=20) to TinyImage
- [Blueshift integration](https://x.com/hypermatic/status/1725631592629248332?s=20) to Emailify
- [Klaviyo Product Feeds](https://x.com/hypermatic/status/1725289149832544505?s=20) to Emailify
- [SVG support for Spreadsheet Syncing](https://x.com/hypermatic/status/1721014540304031968?s=20) to CopyDoc
- [Campaign Monitor integration](https://x.com/hypermatic/status/1720015810188681247?s=20) to Emailify
- [Automatic Slide Tidying](https://x.com/hypermatic/status/1718845872690299299?s=20) to Pitchdeck
- [Slide Layouts](https://x.com/hypermatic/status/1717407340528550398?s=20) to Pitchdeck
- [PowerPoint Master Slides](https://x.com/hypermatic/status/1714153625222864905?s=20) to Pitchdeck
- [Hover Fade Transitions](https://x.com/hypermatic/status/1711963830409216495?s=20) to Bannerify
- [XD Component States](https://x.com/hypermatic/status/1709334281099812970?s=20) to Convertify
- [Spreadsheet Row Sync Overrides](https://x.com/hypermatic/status/1706185566696710632?s=20) to CopyDoc
- [30+ Video Design Tutorials](https://x.com/hypermatic/status/1705061101019484319?s=20) for Emailify
- [Emailify Templates](https://x.com/hypermatic/status/1701415452042555799?s=20) to Emailify
- [Selzy integration](https://x.com/hypermatic/status/1697132693077827740?s=20) to Emailify
- [Wrap and Min/Max Width support](https://x.com/hypermatic/status/1696759403276644841?s=20) to Weblify
- [Localized Frame Layouts](https://x.com/hypermatic/status/1695970823293775908?s=20) to CopyDoc
- [Versioned Review Links](https://x.com/hypermatic/status/1695629937380851902?s=20) to Commentful
- [OneSignal integration](https://x.com/hypermatic/status/1695274773159506348?s=20) to Emailify
- [Feedback Activity Overview](https://x.com/hypermatic/status/1694233057669316985?s=20) to Commentful
- [Slack Integration](https://x.com/hypermatic/status/1691332435836076032?s=20) to Commentful
- [Masked Animations](https://x.com/hypermatic/status/1689881973563801600?s=20) to Bannerify
- [Figma Variables content library integration](https://x.com/hypermatic/status/1688444831067230208?s=20) to CopyDoc
- [Markdown support for Content Snippets](https://x.com/hypermatic/status/1687991011010854913?s=20) to CopyDoc
- [Review Thread Replies](https://x.com/hypermatic/status/1687271382185607168?s=20) to Commentful
- [Custom Downscale sizes](https://x.com/hypermatic/status/1686619309903400960?s=20) to TinyImage
- [Airtable Content Library integration](https://x.com/hypermatic/status/1686159605108523012?s=20) to CopyDoc
- [Google Sheets Content Library integration](https://x.com/hypermatic/status/1685813746093137920?s=20) to CopyDoc
- [CSV Imports/Exports for Content Snippets](https://x.com/hypermatic/status/1683718649851568128?s=20) to CopyDoc
- [Placeholder Content](https://x.com/hypermatic/status/1683292331209031681?s=20) to CopyDoc
- [Text Expander Snippets](https://x.com/hypermatic/status/1682999254963621888?s=20) to CopyDoc
- [SendPulse integration](https://x.com/hypermatic/status/1679268052469432320?s=20) to Emailify
- [Masonry Image Grids](https://x.com/hypermatic/status/1678648196036284417?s=20) to Emailify
- [Tailwind support](https://x.com/hypermatic/status/1678222861440544770?s=20) to Weblify
- [Dev Mode support](https://x.com/hypermatic/status/1676800083940249602?s=20) to Weblify

### New feature videos for all plugin pages

Earlier this month, I wanted to make an effort to replace all of the screenshots of the Figma plugins on this website with short video screencaps instead.

This was partly to do a complete overhaul of all these images, as many of them were visually outdated since the Figma plugins had been updated quite a lot since they were first taken, and also to provide a way to show off each feature with more detail by using video.

The product pages for [all our Figma plugins](https://www.hypermatic.com/#plugins) have been updated with new short feature videos as of today, along with a brand new 60-second overview video with all of our 12 plugins, which you can watch at the top of the home (or [Pro Bundle](https://www.hypermatic.com/bundle)) page of this website now.

### Security docs for all of our plugins

Our Figma plugins have always been designed to do as much as possible inside of the Figma file itself, without needing to upload, process or store anything outside of the plugin; ensuring that as much as possible stays inside your Figma page and any exports are downloaded directly to your local computer. 

To help make this more clear, there are a two additional resources that are now available to reference:

Every Figma plugin has its official [Figma Network Access permissions](https://www.figma.com/plugin-docs/making-network-requests/#specify-network-access) displayed in the [Figma Community](https://www.figma.com/@hypermatic), which shows what domains each plugin can access.

There is also a dedicated [security page](https://docs.hypermatic.com/security) for every Figma plugin, which goes into detail about exactly how they work, and what they can and can't do.

### DesignOps Melbourne talk

In August, I gave my first talk in 3 years at DesignOps Melbourne; the talk was called [Take the Pink Pill (why Best Practices™ are dead ends)](https://www.youtube.com/watch?v=4dXCy3XH6YM), where I was making the case that we've slid way too far into following "best practices" and accepting the dogma of how things have always been done, instead of thinking of more innovative ideas and trying new things. 

I gave some thoughts into why I think this happens, the challenges that make it hard to break out of, and also offer a way forward, where AI and automation will serve as an uncomfortable forcing function to help get us out of this stagnation over the coming years.

I think that many parts of the talk will become more obvious when we look backwards at this very early AI stage in the coming years, as we see more automation and AI become a normal part of our workflows, which is going to raise lots of questions as to what a designer (or developer) really is, if lots of the "pixel pushing" type work is no longer a large part of the role anymore.

### Optimistic (and mindful) about AI for design

The points that I wrote about on AI (for Hypermatic, specifically) in [the July 2023 update](https://www.hypermatic.com/articles/company-flow/#the-ai-elephant-in-the-room) have held up over the last 6 months.

While I remain even more optimistic and excited about the developments (I also think we should be [accelerating](https://www.nytimes.com/2023/12/10/technology/ai-acceleration.html), not [pre-regulating](https://www.wired.com/story/eu-ai-act/) or [stopping](https://futurism.com/ai-expert-bomb-datacenters) it) and future potential of AI for our workflows, based on the reasons I mentioned in that update, I still don't think it's the right time to be jumping head first into prioritizing adding AI into our Figma plugins.

The plan is to continue building all of the plugins in a way that will lend itself to adding AI as a compliment them where it actually makes sense in the future; as impressive as some of the AI services already are, I think the best results will still come from coupling AI to automate _parts_ of different workflows, rather than trying to replace them entirely (eg. just having a ChatGPT-like prompt to create an entire presentation or website design without any human input).

This is the space I have personally been tracking the most closely for the last few years, so I'll continue to watch all of these developments and identify ways that these could be used to add value (not just for the sake of it) in our Figma plugins and products.

In the meantime, with Figma [expanding their own AI team](https://www.figma.com/blog/ai-the-next-chapter-in-design/), I expect that many of the more obvious that ways AI can help with design will be shipped as native features to Figma over the next few years; so again, I don't think it's useful to double up the work on these features here, so I'm happy to wait and add Hypermatic specific AI enhancements when the time feels right.

### <s>Four</s> seven day work weeks

I personally haven't taken a single full day off for working on Hypermatic in the last 4 years, since founding the startup back in December 2019.

Since the lockdowns and surge in work from home (WFH) of 2020-2022, there has been lots of debate over the ideal number of days, hours and locations to work from for the optimal amount of productivity, freedom and happiness. 

I think these are interesting questions that we should be studying the effects of, with all different companies pursuing their own approaches of full time office work, full time remote work, or more commonly some kind of hybrid between the two.

Closer to home here in Melbourne, there are [active trials](https://www.medibank.com.au/livebetter/newsroom/post/four-day-work-week-gains-momentum-medibank-set-to-launch-trial) of 4 day work weeks at some companies, where: 

>Beginning this month, the experiment will be based on the 100:80:100 model, whereby employees maintain 100% of their pay, reduce their working hours to 80%, while maintaining 100% productivity.

I'm still not sure how that formula is supposed to work, and I think a better formula in almost all companies would be to _maintain 100%+ of their pay, reduce their **meeting** hours by 90%+, while boosting 200%+ productivity_, but I am interested to see how these experiments play out.

I can relate to John Carmack (lead programmer on the video game _DOOM_) [talking about work](https://www.youtube.com/watch?v=Cj1q7arJATM), where he mentions the obvious (but somehow controversial) statement that _"working longer gets more done"_, even discounting that you are less effective after working a certain number of hours straight in a day.

I still work on Hypermatic every day (including weekends) because there's nothing else I would rather be doing, and I think having an (admitedly, _extreme_) consistent habit of showing up every single morning (no matter what) helps maintain momentum and compounds into something much bigger after keeping it up for a long time. 

I think that as long as you are doing work that is interesting and enjoyable, while saying "no" to as many things that aren't enjoyable or interesting, you can get a really good days worth of work in and feel totally refreshed and excited each morning, as long as you can also get a solid ~8 hours of sleep each night and still make time for other important (non-work) aspects as life.

Momentum and drive are really hard to get back after you lose it, so I think one way of avoiding that is to default to applying much shorter time frames to tasks than might be estimated in a "normal" company. Not only does this help get things shipped to customers much faster, it also avoids projects or tasks dragging on _way_ longer than they need to, which is a total motivation and momentum killer.

I also think it's good to be overly optimistic and try to overshoot what you can get done in 6-12 months; it's easy to lose momentum and have things that used to take a few days early on in a startup end up taking a few weeks, due to just have less sense of urgency as things become less uncertain and stable over time.

### Looking ahead to 2024 for Hypermatic

The reason I mention the importance of keeping momentum and a strong sense of urgency is that in 2024, I really want to make a huge dent in my plans for developing [Weblify](https://hypermatic.com/weblify) into something really special and useful, while also exploring and developing brand new ideas that I haven't really seen tried or executed well before.

Doing that kind of work is both very exciting and challenging, because nothing is certain and things don't always work the way you think they will; which is to say that some days will feel like nothing is going to work, while other days will feel like you're on top of the world (as Marc Andreessen put perfectly in [Why not to do a startup](https://pmarchive.com/guide_to_startups_part1.html)).

Besides the top priority of delivering [extreme customer service](https://www.hypermatic.com/#testimonials), and improving/maintaining all of our existing Figma plugins, the next year (and beyond) will be very focused on experimenting, designing/building, and iterating with real customers on getting Weblify to become a really valueable product for helping Figma users to design and build useful things for the web, in a way that is at least 10x easier and more compelling than any "best practices" to do that today.

I'm really excited about getting a fresh start on this next month to kick-off 2024, and I'm sure that I'll have lots more to share in the next big mid-year update post in July 2024.

---

---
type: tutorial
title: How to embed custom web fonts in HTML email exports from Figma using Emailify
date: 2023-12-11T00:00:00.000Z
---

# How to embed custom web fonts in HTML email exports from Figma using Emailify



#### Video Transcript

Today I'm going to be showing you how to embed custom web fonts into your HTML emails with custom web-safe fallback fonts using the Emailify Figma plugin.

To get started, all we need to do is go to our Figma file. Click on the little "Resources" icon up here, and if you click on that and search for Emailify, then under the "Plugins" tab, click on the Emailify result. You can run the Figma plugin by either clicking on this "Run" button here, or I'd recommend clicking on this little "Save" icon here, which will save it to your Figma plugins list for later. I've already clicked on the save icon, so I'm just going to go to my canvas, right-click anywhere, go down to "Plugins," and then click on the "Emailify" item. That's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, it helps you design HTML emails in Figma, and then you can export those to production-ready HTML with one click later. I'm going to be showing you how to do that. I'm not going to be going through all of the features; there are more in-depth Emailify Figma tutorials on the YouTube channel if you want to get into detail about how to design the emails. Today, I'm really just going to be focusing much more on how to add custom web fonts and font fallbacks to your text layers inside of the email design.

To get started, I'm just going to add a new template. I'm going to call this template example and add that to my Figma file. This is a special type of frame that will allow you to add these Emailify components directly into your template. I'm just going to create a really, really simple template. I'm just going to add some of these predefined components. I'm not going to customize them too much. You can obviously go through and change these to your liking, so you can swap out content, images, colors, styles, everything like that. Today, I'm just going to be focusing mostly on the text and showing you how to embed custom fonts and web-safe fallback fonts as well.

I'm just going to add a few of these components here. I'll just add a couple more just to show you a few different font examples. So there we go. I'll just add those in for now, maybe add one more split block just so we got a bit of variation there, and we can apply some different fonts. Okay, cool. So that's what the template's currently looking like.

If we go to our preview tab, just click on the preview button. This will load up a live HTML preview of your email so you can see it directly in the Figma plugin. There, it's rendering as we'd expect. We've got the font set to the default Figma font, which is just "Inter." So we've got "Inter" set on all of these layers, but we want to add some different fonts.

If we go to our web browser here, I've got this website loaded up called CDNfonts.com, and this has a bunch of different fonts. I think there's like 20,000 fonts on this site. I've already downloaded and installed these two, so I've got this "Echelon" font and this "Spline Sans" font. I'm just going to apply those in Figma by going to my text layer, and if I search for that font, we've got this "Echelon" font there. I can select that one and adjust that size if I want to, so I can bump that up because the font's a little bit smaller. I've also got this other font, "Spline Sans Mono," so this is a monospaced font. I'm going to apply that to this layer here. So if we search for that one, we've got this new font, "Spline Sans Mono." So I'm going to select that and apply that to a couple of these other layers as well. We can apply it to our content layers too. So I'll just apply that one there and show you what that looks like.

The other thing I'm going to do is also apply a web-safe font to show you what that looks like. So, for example, a web-safe font would be something like "Arial." So we'll just select "Arial," and I'll show you why I'm selecting that in a second, just so we can compare these three different types of fonts.

Now that we've got those new fonts added, I'm just going to refresh my preview again, and you can see here, because I've got my custom fonts selected, those are now rendering in the email. So we've got these fonts here, and those are showing up because I've got them installed on my computer. Obviously, because we can select them in Figma, that means these are already installed at a system level. But when we send out the email, the users of our emails aren't going to have that font installed necessarily. It's a very low chance that they would. So what we want to do is embed the font links or custom font URLs into the email so that when we send out the email, the clients that support custom emails will be able to see those fonts.

I'm going to show you how to do that now. So if you go down to this little "Configure Fonts" button at the bottom of the preview window, I'm just going to click on that "Configure Fonts" button now. You can see here that we've got a few different options. We've got a list of our fonts. So you can see we've got our "Echelon" font, the "Inter" font, "Spline Sans Mono," and "Arial." These are all the fonts that are being used in our current email. So those are automatically going to get listed in this little window here.

We can do a couple of different things. The first thing we can do is specify a fallback font. A fallback font is going to appear if the email client that the user is reading your email with doesn't support custom fonts. This is a very important point. There's only a handful of clients that actually support custom web fonts in emails. If you click on this little link here, that will take you to the "Can I email" page here, which will show you the support level for custom fonts.

You can see here it's mostly Apple Mail, so Mac OS, iOS, the Apple Mail app. Gmail doesn't support them at all. Outlook really doesn't support them at all, unless you're on Mac OS, and then they do. But otherwise, it doesn't really support them. And again, other random clients like Samsung Email, Thunderbird, and a few other random email clients down here. But overall, the support is very low. So this is the reason why we want to add fallback fonts.

In this case, we've got this "Echelon" font, and it's kind of a bulky font. So what we want to do is select a web-safe font that is close to that. I know that we can change this to different sans-serif fonts here, but these are all fairly thin. So I'm going to select the "Impact" font, which you can see a preview of here, which is somewhat closer to the custom font that we're using here. So I'm going to leave that one as "Impact."

Then I'm going to go down here, and for our "Inter" font, which is a Google font, I'm just going to set the fallback for that one to "Helvetica." You could also use "Arial"; "Arial" will be the default. So I'm just going to use "Helvetica" in this case. You can see there's a little note here saying that Google font URLs are automatically embedded. So what that means is if you're using a font in Figma that's part of the Google Fonts range, so fonts.google.com are all the Google fonts, those will automatically be detected, and the embed URLs will be included automatically.

For our other custom font up here, we've got this "Echelon" font. What we need to do is actually populate this little input here with a link to the custom font file. As I mentioned before, because the users aren't going to have the font installed, we need to embed that web font directly into the HTML itself. The way we can do that is if we go back to our CDNfonts.com page, and you can see here, it's got some links to the font. So I'm just going to open up those links. You can see I've copied that URL here, and we're not going to be copying this content here.

What we want to do is open up the page that it's linking to, which is this one. And we want to grab a link to the WOFF file. So that's WOFF is the font file. So I'm going to highlight that link. I'm just going to copy it to my clipboard, and I'm going to go back to Figma and paste that in here. So where it's got the little link field, I'm going to paste that in, and you can see we've now pasted in a link directly to the WOFF font file. So this is the custom font file. So you want to make sure that's the correct font for the font that you're loading up here.

And you can see down here we've got another one for "Spline Sans Mono." First of all, I'm just going to set the fallback font to a monospaced fallback font. So we've got some monospaced fonts here. If I select that, you can see that it's changing to a monospaced type font, which is much more similar to the monospaced custom font we're using. You can pick whichever you feel suits best. I'm just going to use "Courier" for this one. And again, we've got two different variants for this font. So we've got "Spline Sans Mono Bold" and "Spline Sans Mono Regular."

If we go back to our link here, we've got our "Spline Sans" page. Just going to copy-paste that link again, open that up here, and what you want to do is copy-paste these fonts again. So I'm just going to copy-paste that into here, and I'm just going to make this one italic. So this one will be italic. And I'm just going to refresh that. So if we go back here and jump back in, I'm just going to refresh this little "Configure Fonts" thing, and that will load up the mono italic font, which is actually the one that I want to embed. So I've got the regular one, which is here, and then I've got the italic one here. So I'm going to copy-paste that into my italic field, and now we're good to go.

You can see here I've got my, again, just a recap, I've got my two custom fonts, which we have to specify the links to the file to. You might have this hosted on your own website. So if you've got a custom font that isn't on a CDN, most of them are, but if you're hosting your own, you'll paste your own WOFF link into here. It might be a WOFF2 file. And then you're obviously going to set those font fallbacks. So you want to do that for all of your custom fonts.

At the bottom here, you'll notice that the Arial font is already a web-safe font. So you'll remember that we set the Arial font on these layers, and because that's already a web-safe font, we don't need to specify a fallback font or a custom embed link for those ones. So those are the three types: web-safe fonts, totally custom fonts, and custom Google fonts.

Now that we've run through those, I'm going to go back to my preview and close that off. This is going to refresh the preview, and you can see here that we've got this other toggle called "Show Fallback Fonts." So I'm going to toggle that "Show Fallback Fonts" on, and what that does is it allows us to preview the email with the fallback fonts only. So you can see here that we've got our "Courier" font, our "Impact" font, and down here, we've also got the "Courier" font set. So what that's doing is essentially taking the fallback fonts that we specified under these dropdowns like these ones and it's previewing the email, showing you what the email is going to look like for an email client that doesn't support custom fonts.

As we showed before, there's only a handful of clients that do support custom fonts. So for the majority of users, people on Gmail, people on most Outlook versions, this "Show Fallback Fonts" toggle enabled is actually what they're going to end up seeing. You want to be really mindful about how the email is going to look to most of those users, most of your users, in fact, depending on what devices they're using, and you want to make sure those fallbacks are set to something that is going to still look nice. So if they don't support the custom monospace font here, it will automatically fall back to "Courier." So that's what that looks like there.

The other thing to note is that if you did want to make sure that the custom font is loaded, you would basically have to embed that into an image. So for example, if we took this text layer here and dropped it into an image layer, so if we drop that inside of an image itself, I'll just bump that down a little bit so we can actually see the content. If you embed text into an image, that will obviously get included inside the image as part of the image. So if we refresh the design here and have a look at that, you can see that the image itself has the custom font in it. So even with the fallback font toggle, obviously that's not going to affect it because it's just purely an image. So if you really do need a custom font guaranteed to render correctly or visually correctly, then you might want to consider using it as part of a design element inside of an image layer. So anyway, that's what that looks like there, and of course, you can configure these to be any kind of fallbacks you want.

If, for some reason, you wanted the monospace font custom font to actually just fall back to a very regular type of font, like a Sans serif font, you can set that to be Sans serif as well. And if we close that off and refresh that, you can see here we've just updated it. So, without the fallback font enabled, if the custom font can be supported, you'll get the custom monospace font. Or if you don't have the support for custom fonts, and we show those fallback fonts again, you can see that now it's reverting to aiel. So, it's totally up to you. I would keep it consistent and try to keep it in the same font family. So, in this case, I would set it to something like Courier, and you can load it up like that. And it'll be fairly close to the original font. So, that's what that looks like. So yeah, that's basically it. I just wanted to run you through the different options that you have for embedding custom fonts, setting fallback fonts, which again are very important, being very, very mindful of the support level being quite low for custom fonts. So, keeping them as more of a progressive enhancement.

And when you're finished with your email design, just as a last step, if you close out of the preview and you want to actually export the email, you can do that instantly by clicking on the export HTML button up here and selecting the platform. So, you can either just download it to your computer as an HTML .zip file, or if you're using a marketing platform, you can select one of those here. If you're using something like Klaviyo, you can drop your API key in there and upload it. In this case, I'm just going to do a really quick export to HTML. You can set your subject line and preator here if you want, and I'm just going to export it to HTML in this case, generate that HTML, export the images, and then download the zip file to your computer. So, if you click on that button and then just save that to your computer.

I'm just going to save it to my desktop, and if I unzip that file, open up the folder, you can see here that the HTML has been exported to this file here. So, we can see what that looks like if we open up the preview HTML file. This will just give us a nice little preview overview. This is good if you want to send it to clients. It'll give you a desktop version and mobile view that you can preview in the browser. And we can see here that our custom fonts are being loaded in as we'd expect. So that's looking really nice. And then the actual email template itself is in this other index file here. So, the real template export is this index.html file inside of the nested folder in your zip file. So, that's the raw HTML that's going to load up your content. So, that's what your exported HTML looks like there. Again, you can't preview the fallback fonts now because we've already got the custom fonts installed on our computer. But if you were to open this email in your email client like Outlook or Gmail, you would see the fallback fonts that we previewed in our HTML preview over here, just with that toggle turned on in Gmail or Outlook, you would see these fonts instead of the custom fonts. So always be sure to test out the emails in those clients before you send it out. But yeah, this is what the fonts are going to look like with the fallbacks enabled.

Thank you for walking through this Figma tutorial. I hope that's been helpful if you've been wondering how custom fonts work inside of HTML. It's a little bit more complicated than a website, for example, because of the support level being so varied as we looked at in the can I email list. But if you do want to use the custom fonts as more of a progressive enhancement for your email designs, then you can now do that using this configure fonts option in the Emailify Figma plugin and set those fallback fonts as well. 

That's going to give you a little bit more design flexibility if you need to use your own custom third-party web fonts for your own brand design guidelines. Just make sure that you have that hosted somewhere and be sure to drop in that link into this field here. Otherwise, the email obviously won't load up that font. Thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to automatically create Charts in Figma from CSV file data using Pitchdeck
date: 2023-12-04T00:00:00.000Z
---

# How to automatically create Charts in Figma from CSV file data using Pitchdeck



#### Video Transcript

Today, I'm going to be showing you a quick tutorial on how to automatically make charts in Figma from CSV files using the Pitchdeck Figma plugin. To get started, all we need to do is go to our Figma file, click on the little "Resources" icon up here. If you search for Pitchdeck and click on the "Plugins" tab, then on the Pitchdeck item, you can run the Figma plugin by either clicking on this run button here. Alternatively, I'd recommend clicking on this little save icon here, which will let you run the Figma plugin from your Figma plugins list.

I've already clicked on the save icon, so I'm just going to go to my canvas, right-click anywhere, go down to "Plugins," then go down to "Saved plugins," and click on Pitchdeck. That's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, it allows you to take any top-level frames on your Figma page and automatically load those into the Figma plugin to create presentations as slides. Today, I'm not going to be going through all of the features of the Figma plugin. If you're interested in all of the other features that I'm not going to be covering, you can check out the Pitchdeck playlist on the YouTube channel. Today, I'm just going to be focusing on how to add charts from your CSV files.

To get started, all we need to do is go down to our little button down here that says "Add Slides/Charts." If you click on that button, that's going to bring up this window here. By default, it's going to default to the slide layouts panel. We just need to go over and click on the chart Builder tab. If you click on chart Builder up there, you'll get presented with this view here.

You can see that there are basically three steps to automatically making a chart in Figma. First, select the chart type you want. We've got a few different options here. The default is bar chart; the other one is a column chart. We've also got a line chart, an area chart, a combo chart (which lets you do multiple line charts in one), a donut chart, a pie chart, a scatter chart, and a stepped area chart.

So depending on what kind of data you want to present, you can select whichever one of these suits you best. Once you've selected your chart type (for the moment, I'm just going to leave it as the default bar chart), then step two is we need to add some chart data. The way we do this is by loading in a CSV file with your own data. For an example of what the CSV file should look like, all of these different charts come included with a sample data CSV file. Whenever you change the chart type, you'll see that the link here changes as well. If you want a really easy way of knowing how to structure your data, just go ahead and click on that little link.

So if we click on that link now, we can then save that to our desktop. I'm just going to click on Save, and we can see if we open up this file. I'm just going to open that up now in Excel, open up the sample file we just saved, zoom in a little bit so you can see it, and here we go. It basically allows you to quickly download a sample CSV file containing the data structure for the different types of charts.

For example, we can see here we've got the header (values or labels), and then in each column, we've got our side labels and the values for each of those labels. These correlate to the items in here, so you can see that we've got a value label and then all of the side labels and the numbers that we've got added in here. What we want to do is instead of using this sample data, we want to update this to our own data.

I've prepared one earlier, so I'm just going to open that up here so you can see that one as well. You can see here I'm using the exact same format, and I've just changed the labels and some of the labels down here and the values here to reflect some stats for some of these Figma plugins and how many likes they've received. All I've done is just taken that sample data, updated it, and then re-saved that CSV file.

Now that I've got that saved, I'm just going to drag and drop that file into my Figma plugin in this little Drop Zone area here. I've just dragged that from my desktop; I'm going to let go in the drop zone area, and it will instantly load in all of that data from the CSV file. You can see here that the chart has changed; it's updated the chart with all of the labels. It's got the likes label that we added to the header, all of the values are down here, and you can see that the different chart bars have different values and lengths as well.

We can get an overview of what that looks like here, and we are actually able to customize these if you want to make small tweaks in the Figma plugin. For example, we can edit this to be larger or smaller, and that will reflect in the preview over here. You can also change things like the label; if we want to change this to something else, you can add that there, and you'll see it reflect over here in the preview.

But for today, I'm just going to leave that as likes. Once you're happy with the data, you've imported your CSV data, all you need to do is go to the third step, which is to add the chart slide to Figma. Go ahead and click on the add chart slide to Figma button, and that will instantly render your chart that we just designed in the Figma plugin in your Figma file.

You can see here if I drill down into these layers, this is all vector data. For example, we could actually edit this in Figma; we can arrange that line to be smaller or longer, we can edit these text layers (these are all real text layers in Figma), so we can change that to be whatever we want. And of course, the values are also editable as well. If you want to edit that manually in Figma, you can definitely do that.

You can also obviously change things like colors. If you wanted to change the colors, you could just click on that layer, go to your selection colors down here, and you can just change that instantly to any other color that you want. That's a really quick way of styling the graph once you've already added the chart into your Figma page. Of course, you can also do things like change the font sizes and things like that as well. These are just regular Figma text layers; you can bump those up to be really whatever you want, and those will automatically get changed.

It also adds a title onto your slide as well. We could call this Figma like stats, and that would update that there. You can, of course, get rid of that as well if you don't want a title; you can just hide that or delete the layer. And you can obviously move this around or scale it, really do whatever you want with it. So that's what that looks like there, and of course, you can apply this to any other chart type as well.

If we wanted to add a donut chart, you could just drag and drop your CSV file back into the Figma plugin, and that would automatically populate the donut chart as well. So we can again add slide to Figma, and that will add our donut chart as well. Again, these are all totally editable. If you wanted to change any of these colors, you can easily do that just by changing the colors in your Figma selection, and you can really just customize the look and feel to suit your own brand or your own presentation design. So that's what that looks like there.

That's a really quick overview of how you can use this chart Builder feature inside of the Pitchdeck Figma plugin to easily spin up charts in Figma. You can make these totally custom; the data is again all based on whatever you load into it from your CSV file. Just download the sample file, customize the CSV data using Excel or Google Sheets or even a code editor if you wanted to; it's just a plain text CSV file. You'll be able to generate these charts really quickly based on whatever chart type you prefer.

I hope that's helpful for making different types of charts in Figma automatically from your CSV data. Feel free to give it a go for yourself or with your team, and hopefully, it improves your workflow and speed of creating interesting graphs and charts in your Figma presentations. Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to reduce large file sizes for heavy PDF exports from Figma using TinyImage
date: 2023-11-28T00:00:00.000Z
---

# How to reduce large file sizes for heavy PDF exports from Figma using TinyImage



#### Video Transcript

Today, I'm going to be showing you a quick tutorial on how to reduce large file sizes for heavy PDF exports from Figma using the TinyImage Figma plugin.

To get started, all we need to do is go to our Figma file, click on the little "Resources" icon up here. If you search for TinyImage and then click on the "Plugins" tab, click on the TinyImage result, and then you can run the Figma plugin by either clicking on this run button here. I'd recommend clicking on this little save icon, and that's going to allow you to run the Figma plugin from your saved Figma plugins list later.

So, I've already clicked on the save icon. I'm just going to go to my canvas, right-click anywhere, go down to "Plugins," then go down to "Saved plugins," and click on TinyImage. That's just going to run the Figma plugin we saved a second ago.

The Figma plugin has a bunch of different features that allow you to export and compress images from Figma. But for today, I'm just going to be focusing on creating PDFs that have a much lighter file size than the native Figma exports.

To get started, the first thing I'm going to do is go to my create PDF button. In the Figma plugin, if you click on create PDF and then make sure you've got a couple of parent Figma frames, frames that are directly on your page rather than nested inside of other elements. As long as you've got a couple of those, those should come up here. If you have added them since opening the Figma plugin, just click on this little refresh icon. That's just going to refresh any parent frames that you've got on your page.

This is going to allow us to create a PDF with multiple frames in a single PDF file. You can customize which PDF frames go in there and the order of those layers and things like that. Make sure you have checked this "Downscale large Figma image fills" toggle. Click on that toggle, then change this option over here. What that's going to do is make sure that any image fills on your layers, for example, each of these layers has an image fill applied to them here. A lot of the time, you'll get these images from your computer. They'll be really large, high-resolution images. Those are going to get exported along with your PDF normally and really blow out the file size.

This toggle allows you to automatically downscale those fills in Figma. It'll make sure that they never exceed the multiple scales of whatever you selected for your layer size. For example, if this image fill is 4,000 pixels wide and 4,000 pixels tall, toggling this option on and doing it to 2x the layer size will automatically downscale that image fill to be a maximum of 800 to 900 pixels in width and size. This is really going to shrink down your image fills, as we'll see in a moment.

Now that I've got that "Downscale large Figma image fills" toggle enabled and I've got this set to 2x, which is going to give me a really good file size compression, then I'm just going to click on export PDF. You can see here that it's downsizing the PDF image fills, and you can actually see them getting swapped out in real-time. It's downscaling any images that require downscaling. You only really need to do this once the first time, and then any subsequent ones will be much faster because it's already downsized those images.

Once the PDF compression finishes, go ahead and save that to your computer. I'm just going to save it to my desktop, click on Save, and you can see here it's saved us a total of 22.5 MB. The original export of these two frames from Figma would have been almost 30 MB, and running it through the compressor with the downscale option enabled has saved us 79% of the file size that we would have had originally. Now it's just got it down to 6 MB, which is a great saving, and you can see on the desktop, we've got the PDF there. We can open that up and show you what that looks like, and you've got your two pages automatically exported.

If we go back, I'm also going to show you how to export these as individual PDFs as well. Maybe you don't want to always export your PDFs in one file; you might want to do it in multiple files. The first thing you need to make sure you've got set up is for these parent frames or really any frames you want to export to PDF from your page. Just make sure you've got the export setting applied down here. For example, if I remove that and then refresh the layers in here, it'll say that there are no layers on the page that have any export settings. If you see that, it just means you haven't applied export settings to your layers yet.

I'll just show you what that looks like now. If you click on the frames you want to export to individual PDFs, click on those frames, go down to export down here in the bottom right-hand corner of your column, click on this little export plus icon down in the bottom right, and then change the PNG default option to PDF instead. Once you've got PDF selected, just go back to TinyImage and click refresh exportable layers. That'll automatically pick up on those export settings, as you can see here. It's telling us that we've got our PDF setting applied to that one.

This will allow you to export these two different frames as individual PDF files. If you're coming from this upfront and you're not even going into the PDF menu over here, what you just want to do is go to the settings panel, click on the little settings icon in the left of the header in the Figma plugin, and you'll see the same options down here for the PDF. It'll say PDF image fill Auto downscaling. Just make sure that downscale large Figma image fills is enabled, and then again select this option to be whatever you like. I'm just going to leave that at 2x, close that settings panel off, and now that we've got our PDF export option selected, just go ahead and click on this blue export button in the top right of the Figma plugin.

Once you click that, you can see it's processing each of those PDFs individually. Because we've already downsized and downscaled our PDF fills, you can see it's going through those much quicker this time. It's essentially just checking that they have been downscaled and checking for any new layers that haven't been downscaled yet. The export process is much faster with subsequent runs. I'm just going to save that to my desktop, and because we've exported two, it's going to export them as a zip file. I'm just going to open up the zip file. If we open up that folder, you can see we've got our two individual PDF files exported there — the dark one and the light one. We can preview those as individual files, as you can see here.

The dark one, and you'll notice that the file sizes are also much smaller. You've got 3.3 MB per PDF. If we check out the stats in the compression output here, you can see that it's basically scaled each of them down from about 15 MB down to 3 MB. Very consistent 79% saving compared to the other one that we did as well. So there we go, we've saved about 24 MB there. The other thing that you can play around with is the DPI. You might notice that I've had the DPI set to 300. We've got 300 DPI set here, so we can change that to be 150. You can do that in the create PDF output as well, so you can see the DPI slider here. We can change that, so you can set that to 150, and that's going to basically, again, perform more performance on the compression side.

If you go all the way to 72, the images are going to look not that great. 300 DPI is like print quality, and then 150 DPI is actually more set for screens. You might want to play around with that one. I'll show you what that looks like now. If we re-export this PDF merged PDF at 150 DPI, you'll notice that the, again, the downsizing is much quicker because it's not actually downsizing anything again. Now it's optimizing the pages, and we can save that. If we click on Save and replace the one that we had there already, you can see that this time it's actually increased the file savings even more. It's gone down from 30 MB down to under 3 MB, and it saved us 90% compared to the original large Figma export.

We can open up that merged PDF, and you can see here it's looking really good. We've got a 90% file size saving without really any noticeable quality loss. That's a really good option. I actually do recommend exporting at 150 DPI if you're just using the PDF for screen purposes. If you are sending it to print or you're displaying it at really high resolutions, then 300's probably better. But 150 DPI is what I would typically recommend for the most optimal quality to file size saving ratio coupled with the downsizing toggle, downscaling toggle that we went through before. Those two things are going to make a huge difference to really large file sizes that are normally coming out of the Figma native PDF exports.

That's a fairly comprehensive way of showing you how to get your PDF file sizes down when you're exporting them from Figma. I know that sometimes the file sizes can be really large, way too big for emails and things like that. This is going to allow you to really easily and automatically optimize those PDF file sizes to suit your own needs, depending on if it's print or screen or anything like that.

It's also really handy just to finish up on if you're noticing that your Figma file is crashing when you're trying to export PDFs. Sometimes this happens if you've got PDFs or frames with really high-resolution images. Figma basically has a memory limit that's constricted to about 2 GB because it runs in the browser. If you are noticing that your file is literally crashing or freezing up as you're trying to export PDF files from Figma using this option, the downscale option is going to save you a lot of headaches by automatically doing that and really making the export process much smoother because those large high-res images are really going to be memory-intensive for Figma when you're exporting and can cause it to freeze or crash in some cases.

Hopefully, that's useful if you run into that problem too. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to compress large PDF presentation exports from Figma using Pitchdeck
date: 2023-11-23T00:00:00.000Z
---

# How to compress large PDF presentation exports from Figma using Pitchdeck



#### Video Transcript

Today, I'm going to be showing you a quick tutorial on how to compress and downsize large PDF presentation exports from Figma using the Pitchdeck Figma plugin.

To get started, if you just jump into your Figma file, click on the little "Resources" icon up here. If you search for Pitchdeck, you can run the Figma plugin by clicking on the Pitchdeck item under the "Plugins" tab. Then, just click on this "Run" button here, or you can click on this little "Save" icon, which I'd recommend. That will save it to your Figma plugin list for easy access later. I've already clicked on the save icon, so I'm just going to go to my canvas, right-click anywhere, go down to "Plugins", then go down to "Saved plugins", and click on the Pitchdeck item. That's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is it allows you to load in frames, components, and instances from your Figma page as slides. Then, you can export those slides to various formats like PowerPoint web presentations and PDF files. Today, I'm going to be focusing on PDF files, specifically for large presentations that contain very high-resolution image assets.

You can see here I've got a couple of assets that I've downloaded from Unsplash, and you can see the size of them max out at the 4,000-pixel size limit for Figma. What I'm going to do is show you what this looks like when I apply those kinds of high-resolution fills to our image frames. I'm going to drag and drop those images into here, swap out these image frames that I've already kind of got added in, and I'm going to do a really quick export without the downsizing feature. Then, I'm going to show you it with the downsizing feature to compare the difference.

If we were just to export this from Figma itself, go to file and then click on export frames to PDF. This will give you a PDF file native exported from Figma. If I click save on that one and then open up the file information on that one, I'm just going to click get info and see what that looks like. We can see that the exported PDF from Figma is about 20 megabytes. That's fairly large for a deck with nine slides in it. I'm just going to close that off.

Now that we've kind of got a baseline for exporting the PDF from Figma and seeing it's about 20 megabytes, what we can do is now go to the export feature in the Figma plugin by clicking on this export button in the top right-hand side. Clicking on that, and by default, it will select the Pitchdeck presentation upload option. So that's the default, but we're actually going to click on that option. We're going to skip the PowerPoint keynote and Google Slides option and just go all the way down to PDF.

For PDF quality, I'm just going to leave that at 300 DPI, which is the maximum best quality for now. You can reduce that if you want to get even further compression for DPI. So you can set it to 150 DPI for screens. 72 DPI is going to look a bit average, so I'd probably just leave it at 300, and you'll get the best quality. I'm just going to do another baseline test without the downsize option enabled. I'm going to go through that in a second.

But just exporting this to PDF with the regular export from the Pitchdeck Figma plugin, this is going to optimize the PDF, as you can see. If I save that to my desktop, I'm just going to click on the get info for that option as well. If we open that up, we can see here that the compressed version is about 5.6 megabytes. But we can actually get it even smaller than that. So, I'll show you how to do that now.

If you go back to your export settings, just click on the export button one more time, and this time, we're going to enable a new feature called downsize large Figma image fills. To explain what this option does, as you can see here, you've got these really big 4,000-pixel image fills or images that have been added to these layers over here. These layers are only 700x700 pixels, but the underlying image fill is much greater. So the underlying image fill is about 4,000 pixels. What that means is that the full-resolution image is still being loaded into the Figma frame here and still being exported to your PDF files. But because all of that extra size doesn't really matter for a smaller layer, what this little toggle here will do is it'll go through any image fills in your slides, and it will check if the image is greater than 2 times the size of the layer itself. Then, it will automatically downsize that to a 2X resolution. This is going to save us a lot of image data.

If we enable the Downsize large image fills option and then re-export that to PDF, I'm just going to click on export to PDF. Once that finishes up in a moment, you can see here it's downsizing the image fills, so it's checking them, and it found that these two are going to be much larger, so it just downsized those. You can't tell the difference in quality. It's still clear. Now, if we download our PDF file one last time, so I'm going to click on download your PDF file, save that to my desktop.

Now that we've saved that to our desktop once again, we can click on that file, get the info of that, and if we open that up, you can see that that's now been shrunk down to 1.8 megabytes. So, we've gone from 20 megabytes with the native Figma export to about 5 megabytes with the PDF export from Pitchdeck without the downsize feature enabled. Then, we've now shrunk that down more than half again to 1.8 megabytes with the downsize toggle enabled.

That downsize toggle really makes a difference if you've got a lot of slides or even just a few slides with really large high-resolution image fields that have been used originally. You don't need all of that image data behind the scenes when the layers are much smaller. So, this feature will automatically go through and do that. It's worth noting that this will only need to be done the first time around. If we were to rerun this now, it's not going to try and re-downsize those images because they've already been downsized. It'll skip over those, which means that the first export with this toggle enabled is always going to be a little bit slower. But every subsequent rerun, this is worth just keeping enabled. So, if you've added any new images that are larger, it'll just check those out before it exports the PDF. You're ensuring that you're always getting the lowest size possible with that toggle enabled.

That's basically it. I just wanted to show you this quick tutorial with that new downsize toggle, which is going to help you shrink or compress all of these really large Figma exports when you are exporting your slides to a PDF file using the Pitchdeck Figma plugin with this downsize feature. As I mentioned as well, you can play around with the DPI in combination with that. So if you were to set that to 150 DPI, that file size would shrink down even further. So, that's probably a pretty good compromise if you want to play around with those settings too.

Thank you as always for watching. I hope that's been helpful for compressing your PDF exports, and we'll be back soon with more Figma tutorials like this one in the weeks and months ahead.

---

---
type: tutorial
title: How to add transition effects to animated GIF exports in Figma using TinyImage
date: 2023-11-20T00:00:00.000Z
---

# How to add transition effects to animated GIF exports in Figma using TinyImage



#### Video Transcript

Today, I'm going to be showing you a quick Figma tutorial on how to add transition effects to your animated GIF exports from Figma using the TinyImage Figma plugin. 

To get started, all we need to do is go to our Figma file, click on the little resources icon up the top here, and then search for "TinyImage" under the "Plugins" tab. If you click on the TinyImage item, you can run the Figma plugin by just clicking on this run button here. Alternatively, I'd recommend clicking on this little save icon here, and that'll let you run it from your Figma plugins list later. I've already clicked on the save button, so I'm just going to go to my canvas and right-click anywhere. Then go down to "Plugins", go down to "Saved plugins", and then just click on TinyImage, and that'll run the Figma plugin that we just saved a second ago.

If you're new to the Figma plugin, it has a bunch of different features, and I'm not going to be going through all of those today. I'm just going to be focusing on the GIF feature and how to add transition effects to those exported GIFs. If you're interested in some of the other compression features and exporting and downsizing features, check out some of the other tutorials on the YouTube channel. But for today, we're just going to be going through how to add transitions to your animated GIF exports.

The way to get started is we just have to go ahead and click on this "Create GIF/MP4" button at the top of the Figma plugin. I'm just going to click on that now, and that's going to prompt you to select any Figma layers in your page or in your file. So, in this case, I've just created four different Figma frames, very simple, just 400 pixels by 400 pixels each, and I've just added some placeholder images from Unsplash there. What you want to do is you want to highlight all the frames you want to animate. So, I'm just going to highlight these four frames and then click on "use selected layers" in the Figma plugin here. If I click on that, that's going to load up a preview of the animation in the Figma plugin.

You can see here that by default, it's basically setting a 500 millisecond per frame time. Each frame is showing up for about half a second, and then it's also set to 400 pixels by 400 pixels. You can obviously scale that up or down if you wanted to double the size during the export or not, but that's pretty much all standard. The thing we're going to be looking at today is at the moment it's set to instant, so you can see the slides are just changing from one to the next without any transitions. So, if we want to change that, we just click on this instant drop-down list down here. This is the effect dropdown list, and we can actually change this to be something else. For example, if we wanted to have a fade effect, we can click on the fade button, and that's going to add a fade effect between each frame. So, you can see now it's not just jumping between one and the next; it's adding a little fade there. We can do the same thing if you want to add a slide animation. So, if you want to slide right, you can add a slide right, and you can see it's now sliding out to the right. We can change that to be sliding to the bottom, so you can do a slide to the bottom like that. We can also do wipe effects as well. So, if you want it to wipe instead of slide, one frame wiping over the next, you can do that as well. We can go wipe left to right or wipe top down.

You've also got full control over the transition speed. By default, it's going to add that transition at about 400 milliseconds, just under half a second. But if you wanted to slow that down, you can do that by just toggling this little slider here, and you can see that the swipe transition or wipe transition in this case is coming in a bit slower now. Same thing with the slide, so if you wanted to make that a 1-second slide, you can actually update that to 1 second, and it'll be much slower. The one thing to be mindful of is the longer the transition speed or the longer it takes for each slide to transition, the bigger the file size is going to be because it's going to require more frames to actually achieve that effect for longer. Whereas if it's a shorter effect, so if you made a really fast transition speed like 250 milliseconds, it only needs a couple of frames because it's only going to be showing for a fraction of a second. So, it's probably better to leave it somewhere in the middle if you do want to enable these effects. But you can totally play around with that and set it for yourself based on the animation style. In this case, I'm just going to set it to a fade.

To export it, all we need to do is click on this "export GIF" button up here, and that's going to allow us to export the GIF and render it out. Once it's finished rendering, it's going to ask you to save it. In this case, I'm just going to save it onto my desktop. Click save, and if I open that up in the preview, you can see here that the fade effect has been added. So, we've got our GIF; it's got an infinite loop on it, so it's fading into each other and just keeps going around and around. So, that's our fade effect, and the same thing will happen if we export that to a slide effect as well. So, if we just want to try a slide effect, we can do a slide-down effect, we can make that a little bit longer, and again, once we're happy with the preview, we just go ahead and click on "export GIF," and that'll do the same thing. Once that's finished rendering, we'll again save it to our desktop. I'm just going to call this one "slide" so it doesn't override the other one. And if we now preview that one, you can see here that it's adding the slide effect onto our slides. Each frame is sliding down and sliding out. So, that's what that looks like there.

You can also export this to MP4, so if you don't want a GIF and you want to actually use a video file itself, you can export it to either a webm video or an MP4 video. In this case, I'm just going to select MP4, and this time, let's do like a wipe effect and make that a little bit longer. So, we can add that in and then just click on "export MP4" instead. So, we're going to click "export MP4"; this is going to again render those frames with the transition effects applied, and it's going to give us an MP4 encoded video file. So, we can save that MP4 to our computer, click save, and now if we open up the MP4, you can see this is a video. We've got full control over the actual playback here, and you could use this on a website; you could use this in a social media campaign. That's what that's going to look like once it's exported to a video.

There we go, we got a couple of different options there depending on what kind of format you want to use, whether it's a GIF or a video, depending on what kind of application the animation is used for. It's totally up to you to pick that format. But yeah, hopefully, this gives you a little bit more flexibility with creativity if you're wanting to export your Figma frames to an animated GIF or an animated MP4 just using the export function in TinyImage. This will give you a little bit more flexibility than just the default instant switching, which was previously there. So, hopefully, that helps if you've been wondering how to add fade, slide, and wipe transitions, which are in there at the moment. There may be more added over time, and keep an eye out for those if they do get added. You can play around with those ones as well. So, thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export HTML emails from Figma to Omnisend using Emailify
date: 2023-11-17T00:00:00.000Z
---

# How to export HTML emails from Figma to Omnisend using Emailify



#### Video Transcript

Today, I'm going to be showing you how to automatically export your HTML emails from Figma and then upload them to the Omnisend email marketing platform. 

To get started, all we need to do is go to our Figma file, click on the little "Resources" icon up here. If you search for "Emailify" under the "Plugins" tab, if you just go ahead and click on the Emailify results, you can run the Figma plugin by either clicking on this run button here. Or I'd recommend clicking on this little "Save" icon here, which will save it to your Figma plugins list for easy access later. I've already clicked that icon, so I'm going to go to my canvas, just going to right-click anywhere and go down to "Plugins," then go down to "Saved plugins" and click on Emailify. That's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is it basically helps you to design and then export HTML emails from Figma. So, in this case, I'm just going to be creating a really simple template. I'm not going to be going through all of the design features in this tutorial. I'm just going to assume that you've already got your email designed using the Figma plugin. But if you are new to the Figma plugin, I'd recommend going through some of the other video tutorials on the channel just to get familiar with how the Figma plugin works for designing and customizing emails.

As I mentioned today, I'm just going to be keeping it really simple, spinning up a few of the components without any customizations from the Figma plugin. And then we're just going to export this to HTML. And then I'll show you how to import it to the Omnisend platform. So, importantly, before you export the email for Omnisend, you just need to make sure that you've got the unsubscribe link added. So, if you go to the footer tab in the Figma plugin, there's going to be a preset in there for that platform. So, if you scroll down to the letter O, you'll see the Omnisend footer preset. Just go ahead and click on that, and that will automatically add the unsubscribe link for you. And you can check that by clicking on the HTML and mobile settings button in the top of the Figma plugin here. And then if you drill down into your link layer in the navigation component, you can see that the unsubscribe tag for Omnisend has already been pre-populated. So, that's ready to go now. So, you just need to make sure that's in there as it is a required tag.

Of course, you can go ahead and customize this footer. You can customize the email. But again, I'm just going to assume that you've got your email ready to go that you've designed with Emailify, and now we're going to export it to HTML. So, all you need to do is click on the export HTML button in the top of the Figma plugin. Click on that, and you can either host the image assets yourself, or it's probably easier if you just turn on this upload hosted image URLs option and make sure that the HTML email option is selected. So, this is going to allow us to export the HTML email directly to our computer. Unfortunately, there's no API for Omnisend to create templates; otherwise, that would be added to the Figma plugin automatically. So, unfortunately, we do have to export it out to HTML manually. And then I'll show you how to import it into Omnisend in a minute.

I've got my HTML email selected. I've got the upload hosted HTML image URLs selected. So, this is automatically going to host and upload the images for us. And then you just have to click on "Export to HTML." And this is going to export the HTML to your computer. So, now the HTML code is ready. You just go ahead and click on "Download your zip file" and save it to your computer. So, just save it to your desktop. And then if you double-click on the exported zip file, you'll get a folder that looks like this.

Inside of this folder, you've got a previews page. So, this allows you to preview your emails in a nice way. So, if you have a look at that in the browser, you can see here that we've got our desktop preview and mobile preview. So, this is really good for sending to clients for approvals. But that is just a preview page. So, what you want to do is you actually want to open up the folder inside of that, which is named the same as our Figma frame template example. And the index.html file in there is the one that we're going to be using. And because we already selected the option to pre-upload all the images, those image URLs are automatically going to be added. So, you can see here the images have already been uploaded. So, those are ready to go.

Now in Omnisend, if you log into your Omnisend account, and you'll end up on the dashboard here. What you need to do is click on your username in the top right of the Omnisend menu. So, click on that, and then just go down to this option called "Store settings." So, click on the store settings menu item. And once that loads, just scroll down here, and on the left, you'll find an option called "Saved templates." So, go ahead and click on the saved templates item here. And that's going to bring you to this page called "saved templates" under the store settings section. So, this is where you can manage and upload and import your custom HTML email templates.

What you want to do is go down here to where it says "Import template." So, click on the import template button and give that a name. So, we can call that "Emailify template example." And what we want to do is import the HTML. So, you can either paste in the code, or you can just more easily click on the import HTML radio button and click on "Upload file." So, if you click on "Upload file," then go ahead and open up the folder that we just unzipped. Go into the email folder name, and you want to get the index.html file. So, don't upload the previews HTML file. You want to make sure that you're uploading a single index.html file inside of the folder name that matches up with the exported email that you created from Figma. So, click on the index.html file and then click on "Open," and that's going to allow you to upload that HTML file into Omnisend.

Now that we've got that selected, click on the "Import" button, and that's now imported the email template example that we just selected from our computer. So, you can see here now our saved templates have this example that we just uploaded, and we can go ahead and preview that. So, this is going to allow us to preview the HTML that we just imported, and it's all looking really good as we'd expect. We've got our unsubscribe link down here; you can see it's actually populating at the bottom of the window there in the browser. So, the unsubscribe tag is being swapped out with the preview link for unsubscribe, and this is all obviously selectable and ready to go. So, I'm just going to close out of that now.

And now that you've got this saved to your templates, you can then use that for a campaign. So, if you go to your campaign tab and spin that up, I've got a campaign in here already, but I'm just going to create a new one. So, I'm going to click on "New campaign," just going to go down to "Email," and click on "Create email." Then I'm just going to add a subject line. So, I'm just going to use this button here and generate that. So, I'm just going to say "free shipping," whatever. I'll use their AI-generated subject line in this case. So yeah, let's just go with that one. And then I can just add my sender name and email address; you can populate that with your own details. The preheader, I forgot to mention you can actually set this in the export settings in Emailify, so it's probably better to do it there. If you populate the subject line and preheader here, so you can add your preheader text here, and then you might want to also toggle this switch here which adds some preheader text with space. So, sometimes when you see your email inbox and you see the subject line of the pre-edit text, and then there's also some of the body content showing up after the preview text. This will add some padding there to make sure that the body copy doesn't show up right next to your preview text. So, yeah, go ahead and add the preview text or pre-edit text in Emailify before you export the email, and then you won't have to add it in the Omnisend preheader; otherwise, it'll just double it up for you.

Then campaign name, we can just call it "Emailify test" again, and now we're ready to go. So, the next step is to click on this button at the bottom right here called "Choose email template." So, you want to click on "Choose email template," and instead of looking at the templates section, which is all of the pre-populated templates from Omnisend, you want to switch that to "saved templates." So, click on this "saved templates" tab up here, and that will reveal any imported templates that you've created as custom HTML templates in the Omnisend platform. So, go ahead and click on "Use template." We've already previewed it before, so we know it's the one we want. Click on "Use template," and that will now allow you to use that template inside of the Omnisend platform.

That's what that looks like there. The final thing that you're probably going to want to do is for some reason Omnisend is adding this default padding around the content. So, it's setting this 24-pixel padding, which we obviously don't want. So, just go ahead and set those all to zero. You don't want any padding added by Omnisend. This is obviously not part of our original design. So, just reset all of those to zero, and that's going to look much closer to what we had in Figma originally. So, that's what that looks like there. And then this badge down here, I believe that's just because the account that I'm using at the moment is a free account. If you're using a premium account or a proper account, this should hopefully just go away. So, you can see there it says, "Remove the Omnisend badge by switching to a paid plan." So, that's why that's getting added automatically. Otherwise, our template is looking really good, as you can see there.

Then you can go ahead and send yourself a test email or you can preview it. So, we can just click on "Preview" again. And again, this is looking really good besides the footer that we just mentioned. So, that's looking nice. The padding that Omnisend normally adds by default has been removed, which is what we just did a second ago. And you can see it's looking really good on mobile as well. So, I think we're good to go. So, you can close that off now. I'm just going to close that off and click on "Save and choose recipients." And in your case, you would be sending this out to a real list. I'm not going to be sending this out to anyone today, but if you were going to, you can just go ahead and click on "Review campaign," and then you would obviously send that out to your entire list.

That's basically all the steps that you need to follow in order to export your HTML email from Figma for Omnisend and then import that as a custom template into your Omnisend platform and use it for your email campaigns however you need to. So, we'll leave it there for today. I hope that's been useful if you're using the Omnisend platform and were wondering how to export HTML emails from your Figma designs created with Emailify and upload those into the Omnisend platform. This hopefully will show you everything you need to know for that, and you can follow along and hopefully have some success with your own designs and campaigns. So, thank you, as always, for watching, and we'll be back soon with more Figma tutorials like this one in the coming weeks and months ahead.

---

---
type: tutorial
title: How to add dynamic Klaviyo product feeds to custom HTML email designs in Figma using Emailify
date: 2023-11-16T00:00:00.000Z
---

# How to add dynamic Klaviyo product feeds to custom HTML email designs in Figma using Emailify



#### Video Transcript

Today, I'm going to be showing you how to automatically add a dynamic product feed for your Klaviyo HTML email templates using the Emailify Figma plugin.

To get started, all we need to do is go to our Figma file, click on the little resources icon up here. If you search for "Emailify" and click on the "Plugins" tab, select the Emailify result. You can run the Figma plugin by either clicking on this "Run" button here, or I'd recommend clicking on this little "Save" icon here. That's going to allow you to run it from your Figma plugins list for easy access later. I've already clicked on the save icon, so I'm just going to go to my canvas, right-click anywhere, go down to "Plugins," then "Saved plugins," and click on Emailify. That's just going to run the Figma Plugin we saved a second ago.

I'm just going to create a brand new Emailify frame, so I'm just going to call this one "Klaviyo product feed example." So, I'll say Klaviyo product feed example and just click on "Add new Emailify container."

If you're new to the Figma plugin, it basically allows you to design emails in Figma that you can customize and then upload those to production-ready HTML, in this case, to the Klaviyo platform. I'm not going to be going through all of the design features today. I'm just going to be spinning up a quick email template to show you what it looks like. I'm going to add a few components here and make sure I've got my Klaviyo footer added as well. So, if you go to the "Footers" tab, scroll down to the Klaviyo option, click on that, and that will automatically prepopulate these links.

Now that we've got our Klaviyo footer added, I'm going to show you how to add the dynamic product grid that can be used with your Klaviyo templates. What you want to do is click on the "Ecom" tab in the Figma plugin, just click on "Ecom" up here. The first thing you'll see is this Klaviyo components list. We've got a couple of different options—three-column grid, two-column grid, and this one-column block. Today, I'm just going to keep it simple and go with this three-column block here. I'm just going to click on that, and you can see here it's automatically rendered the dynamic product feed to our page. I'm going to rearrange that in my email, just going to make that sit up here.

We've got a few different bits of code here. This has all been prepopulated, and the only thing you need to worry about is changing this feed name here. It says, "item equals feeds doyou Klaviyo product feed name here." What you need to do is basically go through these three things and swap out that name there. I'm going to show you how to do that now. If you go to your Klaviyo account and just go to your products, open up this content panel here, click on "Products," and you've hopefully already got a product source allocated. I've just got some demo products here at the moment. What you want to do once you've got your products linked up is just click on this "Manage product feeds" button up here. So, click on "Manage product feeds" in Klaviyo, and I don't have any available yet because I haven't created any. So, I'm going to create my first one by clicking on this "Create product feed" button up here. I'm just going to give it a name, so I'm going to call it "NEWEST_PRODUCTS." You have to use a combination of underscores, letters, and numbers. You can't use spaces, so just name it to whatever makes sense for you. I'm just going to call this one "new products." I'm going to click on this option down here where it says, what kind of product should the customers view, I'm just going to say "newest products." You can obviously change that to random products. I'm just going to make it newest products. This allows you to add filters if you want to add some filters where the category matches a certain category. I'm just going to leave that as default and click on the "Save product feed" button up here.

You can see here the product feed has been successfully saved in Klaviyo, and you can see my feed is now added over here. So, if I click on that feed, you can see here it's been saved. What we want to do is copy and paste the name that you just gave that product feed. I'm just going to highlight that "NEW_PRODUCTS" name and copy that to my clipboard, go back into Figma, and here, where I've got "item equals feeds.YOUR_KLAVIYO_PRODUCT_FEED_NAME_HERE", I'm just going to swap the "YOUR_KLAVIYO_PRODUCT_FEED_NAME_HERE" with my actual product name. I've got "NEW_PRODUCTS," which is my feed name. I'm just going to swap that in for all of these items down here. Each of these is now "feeds.NEW_PRODUCTS," which is what we just named the product feed in Klaviyo.

So, that's basically the main thing you need to do. To give you some context of what's happening here, it's saying we're going to look up this product feed, and where it says "index" and then a number, the index is basically the order or the product number in the feed that we're going to be loading up. So, "0" equals the first product, "1" is going to load up the second product, and "2" is going to load up the third product in the feed list of products. That's what that means.

Here we've got our image, so this is a placeholder image obviously. If we open up the HTML and mobile settings panel in Emailify, you can see that this has also been prepopulated. It's got the clickable link URL, which is going to the "item . URL" field. Then we've got the alt text set to the item's title, so that's also dynamic content. For the image source itself, we're overriding the image source. Instead of this placeholder that's going to get exported with the Emailify export, it's actually going to automatically add this "item.image_full_url" into the image source tag of your HTML. Those three things are prepopulated for all of the images here.

Obviously, we've got regular text layers here, which are just using the Figma text as you can see here, prepopulated with those variable names as well. That's going to load in your dynamic item title and your dynamic item price. Finally, we've got a button here, so this is just called "order now." You can obviously change that if you want to. But the important thing to know, again, if we click on the button layer and have a look in the HTML and mobile settings panel here, you can see that the clickable URL is also set to "item.url" It's the same link that we added to our image automatically by creating this component. So, of course, you can change this copy. If we just close off the settings panel here, we can call this something else. So, if you want to say "buy now" or "shop now," you can definitely do that as well. You just change that in your text area in Figma, and that'll automatically upload the button.

That's pretty much it. We're ready to go now. We can upload this to our Klaviyo account. What we need to do is basically go to our export HTML button in the Figma plugin. So, I'm going to click on "Export HTML," and I've already got the Klaviyo option selected. Yours might be automatically set to HTML email, so that's the default option. It's not platform-specific; it'll just download a zip file to your computer. But underneath the platform integrations category down here, we can basically scroll down to the Klaviyo option, click on that, and what you want to do is paste in your API key.

I've already got mine pasted in there; yours may not have an API key pasted in there yet. So, what you want to do is go to your API keys page; there's a link to it over here. Click on the API key link, and that will take you to this page here. If you haven't already done so, just click on the "Create private API key" button, and you want to make a new API key. You can call it "Emailify." Then what you want to do is copy that key to your clipboard. So, just click on this copy button and paste that into this field here. You just want to paste that in like that.

The next thing you want to do is make sure, for this case anyway when you're using the dynamic product grid, you'll need to make sure that the "editable content" toggle is enabled. I'm going to show you why that is in a moment. If you are using this dynamic product feed as of recording this video, it's essential that you've got this editable content field toggled because we need to do a couple more steps in Klaviyo to make this custom product grid actually work in the template itself.

So, go ahead and click on "editable content," and then you also probably want to turn on this "force the padding added by Klaviyo new Editor to be zero." I'll show you what that looks like in a second. Long story short is that the new Klaviyo editor automatically adds a bunch of weird default padding around blocks and text items. So, this kind of helps to mitigate it in any email clients that aren't Outlook, and I'll show you how to do that further in a second as well.

Now that we're all set to go, you can basically add a subject line. This is going to prepopulate the title tag in your HTML. It's not going to prepopulate this in Klaviyo, but it will add it to your title tag. You can also add a preheader text, so you can just call this "preheader text" here and populate that with whatever you want.

Now that we've gone through all those steps, just go ahead and finally click on the "upload to Klaviyo" button. That's going to automatically upload all of your images, generate the production-ready HTML, and upload all of that into Klaviyo.

The template has been uploaded; you can click on the Klaviyo templates link to view that. So, we're going to open that up now. Just click on the Klaviyo templates link, and that's going to open up the list of templates. You can see here that our Klaviyo product feed example, which is what we called our frame in Figma, has been uploaded to the templates list in Klaviyo. So, we can open that up, and you can see here it's added in the template. I'm just going to cancel out of that for a second.

The way we can use this template is just by going to campaigns. Once you've loaded the campaigns page, just go ahead and click on the "create campaign" button up in the top right here. You can call that whatever you like and make sure it's set to the type of email. Then click on "Save and continue." What you want to do is choose your recipients, so choose a segment that you've already got as a list and make sure that's turned on. I'm just going to turn off this option as well; if I want to send myself a test, I can do that in a second. Then just go ahead and click on "continue to content."

Once this page loads, you want to make sure that you add a subject line here because the subject line doesn't get carried in from the API. Once you've set your subject line, just go ahead and click on the drag and drop icon here. So, click on "drag and drop." Once that loads up, it'll show you a template library option. But you actually want to click on this "saved templates" tab. This is going to load up your custom templates, like the one we just uploaded. So, we've got our Klaviyo product feed example template that we just uploaded here. What you want to do is click on that one, and that's going to allow you to load that preview up again. These little lines here are just revealing editable content areas, so don't worry about those if you're wondering why it's looking that way. Just go ahead and click on the "use template" button down here. Once you've done that, you need to do one extra step, which is clicking on this "save" button here. So, before you go back to content, just go ahead and click on this "save" button in the top right, and that will just re-trigger the template to save in Klaviyo. That's actually what's going to make it editable. If you don't click on that "save" button for some reason, it doesn't trigger it as an editable email.

Once you've clicked save, go ahead and click on "back to content." That'll take you back to your campaign page. What you want to do is now click on the "edit email" button. Now you can click on "edit email," and this will load up this page. It always seems to say that something went wrong loading the template the first time. Just go ahead and click on the "reload" button on your browser, as it suggests. Once that loads up, you can see that we've got our template in here. We've got our editable regions; we've got our dynamic product grid down here, and we've got our footer that we added for Klaviyo before as well. If we click on the "preview and test" button up here, you can see that when this loads up, you'll notice that the content itself from the dynamic product feed isn't showing up. That's because Klaviyo requires doing this extra weird couple of steps that we're going to go through right now. I'll show you how to get this data actually rendering into our product grid here.

Just go ahead and click on "Done" for now, and then if you go back to your email editing area here, what you want to do is now go to this product icon down here. So underneath the block section where it says "product," you just want to drag and drop that block into any editable region in your template. So I'm just going to add it to this row here, just as a spot to add it in. And then it's going to load up this "configure product block" option. So what you want to do is make sure that you click on that. And then over here on the left, you want to make sure that the product feed is selected to be the same as what you specified in Figma. So you'll remember that we had our "new_products" product feed in Figma. So you can see here we've got "feeds.do.new_products" as the name. And so you want to make sure that yours is selected to match that in here. So just make sure that's all good to go. And then once you've done that, the next step you just have to do is go over to this "display options" tab. So we don't want this Klaviyo product block to show up, obviously. So what we need to do is go to the "display options" tab here, click on the "create logic" link next to this "show/hide logic" heading. And in the logic input field, you just want to type the word "false", then click on "Save changes" and this will ensure that the conditional logic will always be false, and it will never show this block in your HTML email sends.

The reason we had to do that is because for some reason, using the custom HTML template grid here for our Dynamic product grid, it doesn't allow us to actually access the dynamic data from the feed until we've actually added the Klaviyo version of the product block component first and point that to the product data source that we need to access here. So it's really weird. I wish it wasn't the case, but it seems that you do have to add this product block here first somewhere in your template, preferably above this product grid here, which seems to allow you to access the data in the template first that we can then call down here that we've already got set up in our custom HTML here with these little tags and dynamic content rendering snippets here.

Now that we've got that added in, and we've got the visibility set to have false logic, if we now click on the 'preview and test' button one more time, this time when the template loads up in our preview, you can see here that the dynamic content is actually being loaded in. So, instead of it just being blank as it was a minute ago before we added the Klaviyo block, you can see here that it's now pulling in the dynamic image thumbnails, it's pulling in the dynamic template names, and the products in the template data that I've got, or the product data rather that I've got, don't actually have any prices, so that's why it's rendering as 'none.' Your product data will obviously be much better, hopefully, than mine, which is just placeholder content that I loaded in using the Klaviyo developer tool to load in some placeholder content just to show you this tutorial.

But yours will obviously show up a price there, and the title and the real thumbnail image, and these are clickable because we had those links assigned. You can see that they're clickable, same with the 'shop now' buttons. Those will automatically open the real item URL, same with the images when they're actually loaded in with proper data. But you can see that the content is now being pulled in as we'd expect.

That's really good. So if we close that off and click 'Done,' you can see here that we've got our, obviously, the placeholder content here is different from the real content that's going to get loaded. But clicking on the 'preview' button will allow you to test that out, and you should probably send a test email to yourself to validate that as well.

That's basically it. I just wanted to run you through all of those steps. I'm mindful that it's a really arduous process to actually go through that and set it up just to be able to get this working, but it does seem to be the case that that's required.

The other thing that I mentioned before is that you also will probably need to go through these blocks here with the padding that I mentioned. So for some reason, the new Klaviyo editor automatically adds nine pixels of top and bottom padding and 18 pixels of left and right padding to any editable content blocks, text blocks in your email. So you probably need to go through those and just quickly click on those, set these to zero, so just reset them. I don't know why these are set to 9 and 18 pixels by default. This is just how the Klaviyo editor works when you load in a custom template with editable fields.

Just make sure you go through any of the editable content fields in your design and set those to zero, and that'll revert it back to what you'd expect them to look like from your original template in Figma.

Tthat's basically what it looks like. So I hope that's been helpful if you've been wondering how to add dynamic product feeds from Klaviyo into your custom HTML email templates. I've had a lot of questions about this for a while, so I really wanted to do a detailed tutorial just to show you how to do this and also show how you can get that basic structure set up in Emailify with one click, just rendering out those components. You can obviously customize the design of these. You can change the font size, you can change the colors, you can change the size of these image tags, image blocks, of course, to fit your own aspect ratio, things like that. And if you have additional content, so if you have discounted prices or things like that, you can, of course, add more content as long as you have access to that data. So you might have a different field called 'discount field' or 'discount price' or something like that. These aren't real fields, I'm just making them up, but your product feed may have additional data or different data that you want to display.

It's just a matter of tracking that down, finding it, and applying it to the appropriate layer or the appropriate field. So, of course, most of that can be accessed through the HTML and mobile settings panel. So if you're ever unsure of where some of this data lives, it's probably going to be in there. If you can't see it in your design, so again, just click on your layer, the button, you can add the clickable link there, images, same thing, clickable link URLs, alt text, overwriting the image source, so that's what the actual image is going to be loaded from with this dynamic content, as we can see in our preview a second ago. So that's what that's getting loaded in as, getting called in from this field here.

And the final thing that I'm just going to show you is if you do want to add multiple rows, you can just go ahead and copy and paste your original row and all you need to do is change this index here. So you've obviously got index 0, 1, and 2, so you would go ahead and change that to index 0, 3, 4, and 5. And that would basically load in the fourth, fifth, and sixth products in your product feed data. And that allows you to keep the original row as its own component, which means you can do cool stuff like make changes to multiple rows at once using that instance and having those load in the different product datas from your feed.

We'll leave it there, finally, and thank you as always for watching. We'll be back soon with more Figma tutorials like this one in the weeks and months ahead.

---

---
type: tutorial
title: How to sync SVG icons from a spreadsheet to your Figma layers using CopyDoc
date: 2023-11-08T00:00:00.000Z
---

# How to sync SVG icons from a spreadsheet to your Figma layers using CopyDoc



#### Video Transcript

Today, I'm going to be showing you how to automatically sync SVG icons or SVG images from a spreadsheet directly into your Figma layers automatically using the CopyDoc plugin.

So, to get started, all we need to do is go to your Figma file, click on the little "Resources" icon up here, and then just search for "CopyDoc". Under the "Plugins" tab, if you click on the CopyDoc result, you can run the plugin by either clicking on this "Run" button here, or I'd recommend clicking on this little "Save" icon here, and that will save it to your Figma plugins list for easy access later. I've already saved it to my Figma plugins list, so I'm just going to right-click on my canvas, go down to "Plugins," then go down to "Saved plugins," and click on CopyDoc. That's just going to run the plugin we saved a second ago.

If you're new to the plugin, it has a bunch of different features, and I'm not going to be going through all of them today. If you're interested in some of the other features, there are more YouTube Figma tutorials on the channel. Just find the CopyDoc playlist, and you can check out videos for those. But for today, I'm just going to be focusing on this sync spreadsheet function down here.

So, what this is going to allow us to do is swap out the content of our layers here automatically from a spreadsheet like this Google sheet here or an Excel file, which I'll show you later as well, and automatically import that content along with these Vector icons into our frames here.

All we need to do to get started is click on this little sync spreadsheet button down here. Then, what we can do is either upload an Excel file or a CSV file or paste in a public Google sheet link. I'll show you the Google sheet link first, and then I'll show you how to do the Excel file as well.

First of all, you just need to make sure that your spreadsheet or Google sheet is structured in this way. The first row is going to contain your header, and the thing you need to be mindful of is just the header names have to match up with the layer names in Figma that you want to sync. For example, we've got this header called "hash title," and you can see in my Figma file here, I've got these three text layers, and they're all named the same. It's got "hash title" as the layer name for all those. Likewise, with my icons, I've just got a few frame layers. These are just Figma frames. You could use rectangles or other shapes as well. I'm just using a frame to keep it simple, and I've named each of those "hash icon" as well, which you can see matches up with "hash icon" in the header over here too.

So, as long as those are matched up in Figma and your spreadsheet, you should be ready to go. The next thing you need to do is just click on the share button up here in Google Sheets and then just make sure the general access setting is set to "anyone with the link can be a viewer" and then just copy the copy link button. Click on "copy link," and that'll copy the link to your clipboard. Then, all you need to do is go back to CopyDoc, paste in the link you just copied to your Google sheet and paste that into this input field here. That will automatically load up your Google sheet tabs. If you've only got one tab, as I do in this case, it'll automatically just load in that first tab. Then, all you need to do is select the layers you want to sync.

I'm just going to select the parent layers, so I've got my top-level frame layers here. What this is going to do is it's going to loop through each of the selected frames, find any layers inside of that frame that match up those names with our header names in the spreadsheet, and automatically sync the content. I'll show you what that looks like here. You can change the order of the sync, so I'm just going to do sort the order vertically from top to bottom and then just click on the sync rows button. That's basically going to download our SVG icons and sync them into the content in our Figma file.

You can see here that the contents from the spreadsheet have automatically been synced. The other thing to note is that you might have noticed the second row here has an SVG tag. So you can either link to an SVG file, so you can see I've got a link to an SVG path here that's hosted on a website. And then the second option is just the pure SVG tag. So what that means is you could copy-paste the source code of an SVG file directly into the cell, and that's automatically going to get rendered as an image as well. So if you don't want to host the SVGs on an actual URL, you do have the option of just embedding the SVG code there as well. You've got the option to either provide a link or the SVG tag.

Our text content under the title heading has automatically been synced to all of our title layers that have been named with that same "hash title" layer naming convention. And then it's also gone ahead and synced our SVG icons directly into these frame layers here. It's important to note that those are getting synced as image fills. You can see here in the layer fill; it's just getting added as a fill in that layer. So it's not actually importing the vector data as a vector layer; it's just importing it as an image, but it's rendering it at obviously a very high resolution converted from that SVG, so they're going to be very sharp.

So, that's how you can do it from Google Sheets. And now that we've looked at that, if you're interested in sticking around to see how to do this from a local zip file so that means you don't have to upload the images if you just want to upload them directly from your computer. So if you don't want to upload the images anywhere, you don't want to use an embed tag, you just have a bunch of SVG files on your computer, you can add those directly into Figma through the Figma plugin as well.

The way we can do that is we basically just create a local Excel file or a CSV file, and you want to do the same naming convention. So we've got the title and the icon exactly the same as we had in our Google sheet, but you can see this time, instead of linking to the SVG files online or the embed tags, the file names themselves are just being included in these paths here.

So, the way this is going to work is we're basically going to zip up these three SVG files, so the files that we referenced in our spreadsheet, and then we're also just going to include the spreadsheet itself. So I've got the spreadsheet file, which we've got open here, and then the three files that we're referencing, and we're just going to select all of those and then right-click and click on compress. If you're on Windows, it might be a different option to add it to a zip file, but you basically just want to zip up those SVG files along with the Excel file, create a new zip file here, you can rename that if you want to. So, we can call it "import-svg-for-copydoc.zip," and that's going to allow us to drag and drop this into our plugin in a second.

I'm just going to close that off. I'm just going to undo those updates from Google Sheets to revert it to what we had before without the content populated. So we've got our layers back to what they were initially. Now I'm just going to go back into the sync spreadsheet function again, and this time instead of using a Google URL, I'm going to drag and drop this ZIP file that we just created into this Drop Zone area here. Drag and drop that, and you can see it's instantly loaded because it doesn't have to download anything from the internet. You can see here it's basically finding the spreadsheet data that we just uploaded from the zip.

Again, I'm going to select these three layers. I'm just going to click on "sync rows," and you can see it's automatically updated those layers from our spreadsheet, but this time it's done it from our local zip file here. So that's pretty cool if you don't want to upload all of your images online, you can just have a folder full of SVG images and zip those up with your Excel file as I just showed you a second ago, and that'll be good to go. You just drag and drop the zip file, and you can automatically upload that.

That's basically it for this Figma tutorial. I just wanted to show you those two different methods of importing the SVG files to your Figma file automatically, either from a Google sheet using hosted SVG links or embedded SVG tags or using your local SVG files and zipping those up into a zip file along with a local Excel file spreadsheet. And of course, if you did want to also save this Google sheet out to a spreadsheet, so you could basically just download that to an Excel file here, you could also just manually drag and drop that Excel file into your Figma plugin Drop Zone area here, and that would be exactly the same as importing the Google sheet as well. So if you want to import a local copy with the hosted links and the embed tag, you can obviously do that as well. All you need to do is create a local copy of that in Excel, and that'll be good to go as well.

I hope that's been helpful if you've been wondering how to sync up SVG icons or SVG Vector layers from a spreadsheet into Figma. This is a really good way of doing it at scale if you've got dozens of frames or dozens of layers that have Vector icons and text copy that you need to update in bulk. This is going to be a really handy way of automating that process and having all the content and SVG assets and SVG icons all kind of stored in the one place in a spreadsheet that you can re-update as needed.

Thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export HTML emails from Figma to Campaign Monitor using Emailify
date: 2023-11-02T00:00:00.000Z
---

# How to export HTML emails from Figma to Campaign Monitor using Emailify



#### Video Transcript

Today, I'm going to be showing you how to automatically upload your HTML email designs from Figma to the Campaign Monitor email marketing platform using the Emailify Figma plugin. 

To get started, all we need to do is go to our Figma file. Click on the little "Resources" icon up here. If you just search for Emailify, and under the "Plugins" tab, click on Emailify. You can run it by either clicking on this run button here, or I'd recommend clicking on this little save icon here. That'll save it to your Figma plugins list for easy access. I've already done that, so I'm going to go to my canvas. Just going to right-click anywhere, go down to "Plugins," then go down to "Saved plugins" and click on Emailify. That's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is it basically allows you to create HTML email designs in Figma and then export them to production-ready HTML with one click. I'm not going to be going through all of the design features today. I'm going to be assuming that you've already got your email designed and customized. If you're new to the Figma plugin, you can watch some of our tutorials on the YouTube channel. Just click on the Emailify playlist, and you can go through those. But for today, I'm just going to be doing a really, really simple template just to show you what this is going to look like once we upload it to the Campaign Monitor platform.

I'm just going to add a couple of components, and importantly, you just have to make sure under the "Footer" tab that you do add the Campaign Monitor footer. So this basically gives you a really easy way of adding a footer with the unsubscribed tag that's required. This will automatically add the unsubscribed tag into your footer, and that will be populated by Campaign Monitor automatically once the template gets uploaded.

Now that we're happy with our design, we can preview it in the Figma plugin just to see what that looks like on mobile and desktop. I'm fairly happy with this, so I'm just going to exit the preview and go to the "Export HTML" button in the top here. What we want to do is change the "HTML Email" option here to the "Campaign Monitor" option. I'm just going to scroll down under the Platform Integrations group and click on the Campaign Monitor option. That's going to ask us for our API key and client ID. You can click on that link to see the documentation for that, but I'm just going to show you now where to find those.

If you go to your Campaign Monitor account and log in, what you want to do is go over to the top right corner where your name and Avatar is. Just click on that dropdown and then click on Account Settings. Then you want to go down here to API keys. Click on API keys, and you can see here we've got our client ID. So you just copy that to your clipboard, paste that into the Campaign Monitor field. So the client ID is the second field, so paste that in there. Then you just want to click on the show API key link here, and that's going to ask you to put in your Campaign Monitor password. Once you've added your password and got that approved, all you need to do is copy-paste this enormous API key. Just grab the entire thing from left to right and copy that to your clipboard. Again, go back to Emailify, paste that into the first field here. It's API key and client ID, so we'll put the API key into the first field, paste that in.

Once that's added, all you need to do is optionally add a subject line. You can put in a subject line here. Importantly, whatever you call the email in your Figma file here is going to be the name of the template that gets uploaded. So we can call this one example CM template, and that's going to automatically use that name when we upload it to Campaign Monitor now. I'm just going to click on the upload to Campaign Monitor button now, and that should automatically export the HTML email from our design here, automatically upload the images, and then upload that as a template to Campaign Monitor.

It's telling us that it's been successful; the Campaign Monitor templates have been uploaded. It's just letting us know that we can find those templates again under that user icon and then clicking on the my templates link. Let's jump in there now. Click on the little user icon, go down to my templates, and once that page loads, we can see here that we've got our template in our preview. So I can basically open that up. I can see that our HTML has been uploaded to Campaign Monitor as we'd expect. Finally, you can see we've got our unsubscribed link down here in the footer that we just added in. So that will automatically get updated with the correct unsubscribe link whenever you send it out to a list. You can basically use this template directly in your campaigns.

You can spin up a new campaign in Campaign Monitor, and that will automatically allow you to use this campaign template. If we go to our campaigns page and click on create a campaign, we can just do my first campaign for now. This will load up the campaign options. We can click on design email, we can say use a template, and then you can see here in our templates, we've got that added in here. So we can just click on that, and that will automatically allow us to use it in our campaign. That's going to allow you to see the preview here and preview it. So you can preview what that looks like then click on Save and next. Now that's basically added it to our campaign. Then it's just a matter of adding your from and to and all that sort of detail which you're probably already aware of if you're using Campaign Monitor. So I won't be going through all of that. This is how you can apply your campaign template into the campaign itself in one click once you've already uploaded it from Figma.

I hope that's been helpful if you've been wondering how to automatically upload your HTML templates from Figma into Campaign Monitor. This should hopefully help speed up that process instead of doing it manually and adding all of the intricacies that come along with manually uploading the images and the unsubscribe tag and all that sort of stuff. Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to re-order and tidy Figma slides into a grid with one click using Pitchdeck
date: 2023-10-30T00:00:00.000Z
---

# How to re-order and tidy Figma slides into a grid with one click using Pitchdeck



#### Video Transcript

Today, I'm going to be showing you a quick tutorial on how to automatically arrange and tidy up your slides in Figma using the Pitchdeck Figma plugin. 

To get started, all you need to do is go to your Figma file, click on the little "Resources" icon at the top here, and then search for Pitchdeck. Under the "Plugins" tab, click on the Pitchdeck item. You can run the Figma plugin by clicking on this run button here, but I'd recommend clicking on this little save icon here. That'll save it to your Figma plugins list for easy access later. I've already done that, so I'm going to go to my canvas, right-click anywhere, go down to "Plugins," go down to "Saved plugins," and then click on "Pitchdeck." That's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, it basically allows you to add a bunch of frames or components as slides onto your Figma page and then load those up into the Figma plugin. You can add animations and links and then export them to various formats. I'm not going to be going into detail about that today; instead, I'm just going to be showing you how to use some of the new tidy features and sorting features to help organize your slides in the Figma file.

The first thing you'll notice is that if we move around our slides on the page, it's obviously going to get pretty messy pretty quickly. Having said that, we can use the order that's on the page to sort the slides in the Figma plugin. For example, if you wanted to sort these slides visually, we can do that in the Figma plugin. For example, if I go from right to left, you can see now it's basically taking the last slide in the columns and making that the first slide. The order in the Figma plugin is different to the order in the Figma file, so that's just the first thing to keep in mind.

The second thing is that we can also drag and drop these manually. So, if you wanted to change the order of these in the presentation Figma plugin, you can do that by dragging and dropping. You can also remove slides from the presentation just by unchecking them. These won't get exported in the exported formats like PDF, PowerPoint, or the web presentation. I'm just quickly running you through those basics to show you how this is now going to work with the Sorting feature.

Now, if I go ahead and click on this little page icon up here in the top left of the Figma plugin and open up this panel, you can see that I've got an option for automatically sorting and tidying our Figma slides. We can basically say how many slides we want per row. In this case, I'm just going to say 12. We've also got an option to add a fade effect for any unchecked slides. I'll show you what that looks like in a second. First, I'm just going to tidy these up by clicking on the reorder and tidy Figma slides button. Clicking on that now, you can see it instantly tidies up the slides based on the order that we already had set up in our presentation over here. Slide one and slide two have been added in that order, whereas the other slides at the bottom have been added down here. The same thing would be true if we rearrange these again. For example, if we swap these around and made this slide go down here, then jump back into our page icon, open up that panel, and again click on the reorder and tidy, that's going to automatically rearrange those slides once again.

Basically, the order in the Figma plugin is the source of truth for this new feature. Whatever you set the Figma plugin order to will automatically be tidied up in here. You can change this to be eight slides per row or make it a really long one at 20 slides per row. As I mentioned a second ago, you've also got this toggle over here to add a fade effect for any unchecked slides. If you toggle that on and then reclick on this button here, that's automatically going to fade any of the unchecked layers in your presentation plugin to an opacity of 33%. That kind of just visually knocks them back. So at a glance, you can get a sense of which slides are actually active and which slides aren't active. Of course, if you re-enable those in the Figma plugin, check a couple more back on, and then opened up the panel again, reorder them again with the toggle enabled, that will automatically re-enable the opacity on those. If you want to get rid of that effect entirely, just turn off the toggle and again click on the reorder and tidy button. That will just make sure the opacity gets reset back to 100%.

That's basically a quick overview of how you can use this new feature to really quickly automatically tidy up your slides. If you're moving things around in the plugin over here and rearranging slides, and you don't want to have to manually reorder them on the page, which can get a bit annoying, you can now just do that in one click. Again, you just go to the pages icon, click on the little reorder button, and that will automatically tidy up your slides.

I hope that's helpful if you've been wondering how to quickly tidy up your slides into a grid and reorder them based on your Pitchdeck slide order over here, this is a brand new feature that will help you do that really quickly and hopefully save a lot of manual time dragging and dropping slides around on your page. Thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to add slide layouts to Figma presentations with one click using Pitchdeck
date: 2023-10-26T00:00:00.000Z
---

# How to add slide layouts to Figma presentations with one click using Pitchdeck



#### Video Transcript

Today, I'm going to be showing you how to quickly add slide layouts to your Figma presentations with just one click, utilizing the Pitchdeck Figma plugin. 

To get started, go to your Figma file, click on the little "Resources" icon up here, and search for "Pitchdeck." You'll see the Pitchdeck item pop up. Click on that under the "Plugins" tab. You can run the Figma plugin by either clicking this run button here or clicking on this little save icon, which will save it to your Figma plugins list for easy access later. I've already done that, so I'm going to go to my Figma file, right-click anywhere, go down to "Plugins," then "Saved plugins," and click on the Pitchdeck item. This action will run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, it works by taking any slides that are frames, components, or instances on your Figma page and allowing you to load them in as slides to the plugin. For example, if we add a quick frame, go to the frame section, click on the presentation dropdown, and add a 16x9 frame, then click on refresh layers, you can see here that we've got a frame added to our page. You can add different layers inside of that frame, like headings, images, and all kinds of content to our slides, and that will get loaded into the Figma plugin. You can also add animations, links, and other elements to those layers.

There might be times where you don't want to manually do this yourself, and if you want to quickly spin up some slide layouts, the Figma plugin has a feature to help you do that. Access it by going down to the bottom of the slides list and clicking on this "Add slides" button. This action brings up a panel with a variety of preset layouts, common layouts you might want to use for your slides. You can go through, add the different types of slides that you want to include in your presentation, and you will see them added to your page just as you'd expect.

I'm going to get rid of the original slide that we had, go back to my Figma plugin, and refresh that. Now, we've got all these other slides added to our presentation. This is a really quick way of adding different slides to your presentation without needing to manually go through and create all these different layers. And these are all auto-layout as well.

For example, if we duplicate this text area, you can see that the layout automatically adapts. You have full control over the item spacing and things between those different layers. Additionally, we've got full control over the global text styles and global color styles. Over here, you can see different styles automatically added to the document that we can modify. You can change the font for our heading as well, and you'll notice the font in our design has completely changed across all the slides. You can do the same for colors; change the slide heading colors, the paragraph text, and even add an alternate theme.

If we toggle on the "use alt Figma color styles," any new slides added from the layout creator with that toggle enabled will automatically inherit those styles and colors. The same thing applies when the alt styles are turned off; new slides will inherit the normal colors and font settings.

If you want to use master slides, go to the "Master Slides" tab, refresh it, and you'll see any slide components added to your page loaded up under this panel. Clicking on any of these slides will add them as new slides but as instances of that component. If you change the master component, the instance will inherit those changes.

If you wanted to then export this to a different format, you can do that as well. Click on the export button in the Figma plugin, select your export format, and click on the export button. Wait for it to export those slides, and you'll get your presentation as a PowerPoint file, PDF, or any other format you're interested in. Once that finishes, click on the download button, save the file to your computer, and you can open it in PowerPoint. You'll see our slides exported from Figma, editable and ready to be modified as needed.

That's basically it for today. I just wanted to show you how to quickly use this new layout feature to add layouts, color styles, and text styles that can be easily managed from one place. You can update any of this content as you want, replace images and text, and it will all be ready for you to use. I hope this tutorial was helpful, especially if you've been wondering how to quickly add slide layouts without having to manually design these common layouts every time. I'm sure the options will expand over time with more layout choices. For now, you can jump in and give it a try with the ones that are available. Hopefully, this enhances the workflow for you and your team, making putting together presentations quicker and more efficient.

Thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to add Master Slides to PowerPoint exports from Figma using Pitchdeck
date: 2023-10-17T00:00:00.000Z
---

# How to add Master Slides to PowerPoint exports from Figma using Pitchdeck



#### Video Transcript

Today, I'm going to be showing you how to automatically include master slide layouts in your PowerPoint file exports from Figma using the Pitchdeck Figma plugin. 

To get started, all we need to do is go to our Figma file, click on the little "Resources" icon up the top here. If you search for "Pitchdeck" under the "Plugins" tab, then click on the Pitchdeck item. You can run the Figma plugin by either clicking on this "Run" button here, or I'd recommend clicking on this little "Save" icon here to save it to your Figma plugins list for easy access later.

I've already done that. So, I'm going to go to my canvas, just going to right-click anywhere, go down to "Plugins", then go down to "Saved plugins", and click on the Pitchdeck item. That's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is it allows you to take any of the frames, components, or instances directly on your Figma page and load those up into the plugin as slides for a presentation. You can export that presentation to multiple formats, but for today, I'm just going to be focusing on exporting it to PowerPoint and showing you how to create PowerPoint master slides using Figma components to help define those.

To get started, all I'm going to do is convert a couple of these frames that I've got on my page to Figma components. The way that I do that is basically just by clicking on any of those in Figma, right-clicking it, and going down to create component. You can see it changes it from a frame to this purple sort of color here. I can do the same thing for this intro slide as well. So, I can go down to create component, and now we've got two different components as part of our slides.

What we can now do is refresh our slides, and you can see here, while these ones are frames, if we go to our first two now, you can see those have been turned into components. So we can jump to those if we want to as well.

The reason why that's important is defining these slides as components is going to make sure that those get included as master slides when we export the presentation to PowerPoint. I'll show you what that looks like now.

If you go to the export panel just by clicking on the export button in the top right of the Figma plugin and just make sure that the PowerPoint format is selected, click on PowerPoint. Then you want to go down to the PowerPoint settings down here and enable this setting that says create PowerPoint master slides from components. I'm going to toggle that on, and then I'm just going to click on the export for PowerPoint button.

We don't need to compress the images for this Figma tutorial, but you can definitely do that as well. So I'm just going to click on export for PowerPoint, and this is going to export all of our slides to a PowerPoint file that we can download from Figma.

Once that's finished, you just have to go ahead and click on the download your pptx file button. So click on that and just save it to your desktop or wherever you prefer. If you open up that file just by double-clicking on it, you can see here that it opens it up in PowerPoint, and we've got our slides as you'd expect.

These are all editable slides that we can modify in PowerPoint, and it's been exported directly from Figma. So the cool thing is because we enabled the master slide option, if we go up to the new slide panel up here and click on the little arrow where it says insert new slide, if you click on that, you can see here we've got a couple of PowerPoint master slides. So we've got two master slides, which correspond to the two components that we just set up in Figma - the intro and the principal one slides.

You can see here when we go to add a new slide, we can add an intro master slide and also a principal one master slide. So what that allows us to do is it lets us edit that content. This is basically getting added as placeholder content, so these slides are actually empty, and these are just placeholders. So it's got the text style, so we've obviously got the text style that was defined in the actual Figma file, but these are empty placeholders with some example text taken from our Figma content here.

Here and so what that allows us to do is it allows anyone that we've shared the presentation with to add brand new slides based on the Styles and layouts that we've defined in Figma. For example, we can add an image to this placeholder here. So if we click on insert picture from file, that's going to allow us to browse our computer for an image. So, I'm just going to add this image here, and you can see that gets swapped into our PowerPoint master slide, and again, we can update this content here and adjust that as needed. If we want to add different content, we can adjust that width to make that fit, and then, obviously, you've got your body content here as well.

The body content can be added there, and that's basically what that looks like. You can obviously move this around, but what it's doing is it's providing you master frames with predefined content areas and styles for someone to easily add new slides to the presentation.

There are a couple of extra things you can do here. The main one is that you can include these images as static images if you want to do that as well. So, for example, if you wanted this master frame here to always have this image and not make it a placeholder image, what you can do is you can actually lock that layer in Figma. So, for example, if we lock that data photo layer and then we re-export the deck. So I'm just going to click on the export button again. I'm going to export it with the create master slides from components option still enabled, click on export for PowerPoint again. 

This time when we re-export it, this image that we've just locked will be added as a static image. So if we save that now and open up this brand new file and then we add a new PowerPoint master slide. So if we go back to the new slide options, insert a new slide, and click on the intro master slide, you can see here that it's added our text content as placeholders. We've got our placeholder heading area, but you can see that the difference between this one and the other deck that we exported is that the master slide doesn't have a placeholder for the image.

You can see here that the image is just static; it can't be moved, it can't be changed directly from here. You would have to go into the master slide edit area in PowerPoint and edit it from there. But by default, this image is going to be static, so it's not going to be a placeholder. All the text is, but the image won't be.

This can be handy if you've got things like logos or little images that you want to include in your PowerPoint master slides, and you don't want them to be editable. All you need to do if you want to keep those as static is just lock the layer in Figma, so lock that image layer, and that will automatically be flagged to not turn that into a placeholder.

That's basically it. I just wanted to show you the fundamentals of using the Pitchdeck Figma plugin and Figma to define these component slides, which will then be used as master slides for your PowerPoint exports, as long as you've got the create master slides from components toggle enabled. You can also include these in your keynote and Google slide exports, but the important thing to be mindful of is that unfortunately, those ones don't support the editable images at the moment. Hopefully, this will change in a future version, but for now, they seem to use the editable versions as text, even though they're meant to be images.

I would avoid using those ones for the master slides if you need editable image content, but it will definitely work for the text, and it will still include the images as static images. So that's just something to be mindful of, but for this tutorial, just stick with PowerPoint if that's what you're using, and it'll work as expected, just as we looked at in this tutorial together.

Let's leave it there for today. Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export HTML emails from Figma to Braze using Emailify
date: 2023-09-11T00:00:00.000Z
---

# How to export HTML emails from Figma to Braze using Emailify



#### Video Transcript

Today, I'm going to be showing you how to automatically upload your HTML email designs from Figma to the Braze email marketing platform using the Emailify Figma plugin.

To get started, all we need to do is go to our Figma file. Click on the "Resources" icon at the top here, and if you search for Emailify, and if you click on the Emailify results under the "Plugins" tab, you can run the Figma plugin by either clicking on this "Run" button here, or I'd recommend clicking on this little "Save" icon here, which will save it to your Figma plugins list for easy access.

I've already done that, so I'm going to go to my canvas. I'm just going to right-click anywhere, go down to "Plugins," go down to "Saved plugins," and then click on the "Emailify" item, and that's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is it basically helps you to design HTML emails directly in Figma, which you can then export to production-ready HTML code with one click when you're finished.

I'm not going to go through all of the design features of the Figma plugin today. I'm just going to be assuming that you've already familiarized yourself with that with some of the other Figma tutorials on the YouTube channel for Emailify, and I'm just going to assume you've got your template ready to go.

The last thing I'm going to add to mine here is just go to the footer tab. I'm just going to click on the Braze footer, and that's just going to make sure that the unsubscribe link is included automatically. So we've got our little navigation component, the link setting. If you click on the HTML and mobile settings, you can see that the clickable link is set to the Braze unsubscribe URL.

Now we're ready to go. Once we're ready to export it to HTML, you can just click on this little export HTML button up here, and we're going to change the platform from just HTML email, which just downloads it to your computer, to the "Platform Integrations" section.

And then we're just going to click on Braze. So click on the Braze item, and then it's going to ask for your Braze API key and your Braze endpoint. So you can click on this link to find out some more details about that. But basically, if you're already logged into Braze, the way you can find these is if you just go to your dashboard, you can see down here that you've got your API endpoint. So the endpoint region is what we're after. So you can see ours is fra-02.

In our Figma plugin, we're just going to change this little endpoint selector and go down to fra-02. And then we're going to go to our manage API Keys section. So if you click on manage API keys in Braze, that's going to take you to a new page to create a new API key. So we don't have any set up yet, so we're going to click on the create new API key button over here.

And then all you need to do is give it a name. So in the API key name field in Braze, just put in Emailify or whatever label you want to give it. And for the permissions or scopes, we're just going to scroll all the way down to templates and click on "templates.email.create". So this is going to allow the API key to create a new template on your Braze dashboard. So we're going to keep that one checked, and that's all we need to select for now. So we're going to go ahead and click on Save API key.

Once that creates your API key, you can see that it's given the new listing with the Emailify name, and we've got our API key here. So all you need to do is click on this little copy button. So I'm just going to click copy. That's going to copy it to my clipboard. And I'm also just going to preemptively go to our templates page. So if you go to templates, email templates, we're going to leave that page open for when we come back in a second to check on it.

You can see here at the moment, I don't have anything uploaded. So if I click on my HTML editor button up here, I've got no saved templates. So we'll refresh that in a second. So with our copied API key, we're just going to go to this little rest API key field in the Figma plugin, paste in your key there, and then you can either give the email a subject line. So we can give this a test subject. And then once you're happy with that, just click on the upload to Braze button.

Once you click upload to Braze, this is going to automatically generate all of the HTML. It's going to upload all of the images, and it's going to now tell us that our Braze templates have been uploaded. So we can access them by going to our Braze account, going to this template sidebar item, which we just did, and click on email templates. So this is the page we're on now, the email templates page, and then you just want to click on the HTML editor tab up here. So where it says select your editing experience, make sure you've got the HTML editor tab selected.

And you can see when we click that, it's refreshing our saved HTML templates, and you can see that our test template, which is what we called it in Figma, the frame over here, has been uploaded. So if we click on that, that will load up the template. So you can see we've got our test template up here, and we've got our test subject. So that's the subject line we added a minute ago in the Figma plugin. So it's included the subject line, and of course, it's also included the email body. So you can see here that it's uploaded the email. We've got a bit of a screenshot of it, and now you can go ahead if you wanted to. You can preview and test that. So if you click on preview and test, that'll let you preview it.

You can see this is all inline HTML, real HTML. It's been uploaded, and you're able to now test that to yourself or send a test to somebody else with pre-populated information from a certain user if you had any placeholder fields and stuff like that. So this is basically what it looks like. And yeah, if you click on the HTML mobile one, that'll show you what it looks like on HTML on the mobile version, which matches up with the Figma plugin preview as well.

We didn't go through that, but you can click on preview, and you can see here it's matching up with the Braze preview. So yeah, that's basically it for today. I just wanted to keep this really short. If you're using the Braze email marketing platform, this is a really quick way of getting your HTML email templates from Figma into Braze using the Emailify Figma plugin with one click. So thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export HTML emails from Figma to Selzy using Emailify
date: 2023-09-01T00:00:00.000Z
---

# How to export HTML emails from Figma to Selzy using Emailify



#### Video Transcript

Today, I'm going to be showing you how to automatically upload your HTML emails from Figma to the Selzy email marketing platform using the Emailify Figma plugin. 

To get started, all we need to do is go to our Figma file. Click on the little "Resources" icon up here. If you search for Emailify and under the "Plugins" tab, click on "Emailify". You can either run the Figma plugin by clicking on this run button here or, I'd recommend clicking on this "Save" icon here to access it from your Figma plugins list later.

I've already done that. I'm going to go to my canvas, just right-click anywhere, go down to "Plugins", click on "Emailify". And that's just going to run the Figma plugin we saved a second ago. If you're new to the Figma plugin, the way that it works is it provides you some tools to help you easily design emails in Figma, which can then be exported to production-ready HTML automatically.

Today, I'm not going to be going through all of the design features in the Figma plugin. There are a few other tutorials on the YouTube channel that you can look at if you are interested in that. Today, I'm just going to be assuming you've already got your email designed using Emailify and you're ready to export it to the Selzy platform automatically.

The last thing I'm going to do with this template is just go to the footer tab in the Figma plugin and make sure I've got the correct unsubscribe link. So I'm just going to scroll down to the "Selzy" item down here, the footer, and click on that. That's automatically going to make sure that you've got your unsubscribe link correct. If you look into the link layer and go to the HTML settings button up here, you can see that it's got the unsubscribe URL tag on there that will automatically get swapped out later.

Now that we've got our email ready to go, all we need to do is click on the export HTML button up here. By default, that's going to be set to HTML email. We're just going to change that from HTML email and scroll down to platform Integrations. Find the "Selzy" option, click on that, and then what you can do is click on this little link here. That's going to take you to your API key page if you're already logged into Selzy. It's going to open up the browser to this page over here and it's going to take you to the integration and API Tab.

What you want to do is click on this little show full icon here, and that's going to prompt you for your password. It's going to ask you to enter your password and then you'll be able to copy your API key from here and paste it directly into the Figma plugin here. Once you've pasted your API key in from Selzy, all you need to do is just add a subject line. You can add a subject line here. The name of the frame over here will be used as the template name in the platform.

You can change that if you want to rename it. I'm just going to leave it as this for now. Once you've done that, just click on the upload to Selzy button and that's going to automatically export the HTML, upload all the images, and upload our template. So, it's uploaded our template to the Selzy platform. If you click on the my templates link here, that will automatically open your browser to your my templates page which I've already got open.

I'm just going to refresh that and if we refresh that page you can see here that our Selzy template example which is what we named it in Figma has just been uploaded a second ago. So we can essentially jump into that and view it. If we open up that template, you can see that our subject line has been included, the name of the template's been included.

If we go back, we can also preview it. So if you click on this little preview link that will open up an HTML preview and you can see here that it's uploaded all the images uploaded all the content we've got our unsubscribe link down here and everything's basically ready to go. So, we're just going to close that off and now you can essentially use that to do whatever you want with.

You can create a campaign, you can create a copy of that template, you can share the template. You can really do whatever you want. This is just an automatic way of getting the HTML from Figma into the Selzy templates without you having to manually create the email template, manually uploaded images, paste in the images URLs, and yeah update all that HTML manually.

This is a really quick way of doing it if you want to automatically get it out of there from Figma. So, I think we'll leave it there today. I just wanted to keep this really quick. If you are a user of the Selzy platform and you're interested in automatically exporting your HTML from Figma using the Emailify integration, it's going to be a really quick way of doing that for you or your team.

Thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export HTML emails from Figma to OneSignal using Emailify
date: 2023-08-27T00:00:00.000Z
---

# How to export HTML emails from Figma to OneSignal using Emailify



#### Video Transcript

Today, I'm going to show you how to automatically upload your HTML email designs from Figma to the OneSignal email marketing platform using the Emailify Figma plugin. So, to get started, all we need to do is go to our Figma file, click on the little "Resources" icon up here.

If you search for "Emailify" and under the "Plugins" tab, if you just click on the Emailify result, you can run the Figma plugin by either clicking this "Run" button here. Alternatively, I'd recommend clicking on this "Save" icon here. That will save it to your Figma plugins list for easy access. I've already done that, so I'm going to my canvas. I'm just going to right-click anywhere, go down to "Plugins," and then click on the "Emailify" item. That's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, it helps you design HTML emails in Figma, which you can then export to production-ready HTML automatically. I'm not going to be going through all of the design details in this tutorial. If you're interested in that, there's a bunch of other tutorials on the YouTube channel. Just check out the Emailify playlist for those.

In this Figma tutorial, I'm going to assume you've already got your design looking the way you want, the HTML is rendering the way you want, and now you just want to upload it into the OneSignal email platform.

The way we do that is we basically go to our "Export HTML" button up here and click on that. Then we want to change the "HTML Email" option up here and scroll down to the "Platform Integrations" group. You just want to go down and scroll until you find OneSignal, and click on the "OneSignal" option.

Then, it's going to ask you for your app ID and API key from OneSignal. You can click on this link here to figure out where to find those. But I'll show you what that looks like in OneSignal.

If you're logged in and you go to your apps page, which is just the default dashboard page, find the app you're going to be sending the email from. Go to this little hamburger menu down here and click on "Open Dashboard." Then click on the settings icon over here in the menu. Go to the Keys and IDs submenu over here.

Once you've clicked on that, you'll see here it's got this OneSignal Keys section. What you want to do is copy the app ID. So, we're just going to click on this little copy icon. That's going to copy it to our clipboard. We just copied the app ID, so we're going to paste that into the ID input over here in Emailify.

Then go back to OneSignal. We're going to copy our REST API key. I'm going to copy that to our clipboard as well. I'm going to go back to Emailify and paste that into the key field here. You just want to make sure you've got a subject line set. You can optionally add some pre-header text as well.

But once you're ready to go, you can just click on the upload to OneSignal button here in Emailify. That's just going to automatically export our email to HTML. It's going to upload all of our images, and then it's going to upload it to OneSignal.

You can see here we've got a successful message telling us that our OneSignal templates have been uploaded. We can find it by going to our OneSignal dashboard and then going to our app, which we're in at the moment. Then you just want to click on the "Messages" tab up here in the menu.

Click on "Messages" and then click on the "Templates" submenu over here. You can see here that our email has been uploaded. The name of the email is matching the name that we set in Figma on our Emailify frame. If we click on that, it's going to load up the email template that we just uploaded.

So, if we just make this window a little bit bigger, you can see down here that all of our code has been uploaded automatically. Our subject line that we added in Emailify has been included. You can see we've got our HTML over here. This is all real HTML that was just uploaded from Figma, and it's been automatically added to our OneSignal templates.

That's basically ready to go. Now you can use that email template to send out emails. It was automatically uploaded to OneSignal from Figma, so you didn't have to manually copy and paste or make any manual updates to your images and things like that. It's all production-ready, and the emails are all ready to go with all of the images included.

So, yeah, that's basically it. I just wanted to keep this a really short tutorial. If you're using the OneSignal email marketing platform and you're interested in getting your emails from Figma into production-ready HTML in your email templates in OneSignal, this is going to be a quick way of doing it with essentially one click, and you're ready to go.

Thank you, as always, for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to add masked animations to Figma banners using Bannerify
date: 2023-08-12T00:00:00.000Z
---

# How to add masked animations to Figma banners using Bannerify



#### Video Transcript

Today I'm going to be showing you a quick tutorial on how to add mask animations to your Figma banner timelines using the Bannerify Figma plugin. So, to get started, all we need to do is go to the little "Resources" icon at the top of your Figma file. If you click on that and search for "Bannerify," and if you click on Bannerify, you can run the Figma plugin by either clicking on this "Run" button here. Or, I'd recommend clicking on this "Save" icon here, and that'll save it to your Figma plugins list for easy access later. I've already done that, so I'm going to go to my canvas. I'm just going to right-click anywhere, go down to "Plugins," and then click on the "Bannerify" item. That's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is it basically treats every parent frame or artboard on your Figma canvas as a potential banner. So, you can select which banners you want to load into the Figma plugin and click on load checked banners. Then, it's going to treat every layer inside of that frame as an element in your animation timeline to create and export that banner as an animated HTML banner or a GIF or a video.

I'm not going to go through all of the features in the Figma plugin today. There's a bunch of other tutorials on the YouTube channel if you want to go into detail. Today, I'm just going to be focusing on some new animation features which allow you to add mask animations that look like this. You can see on the right-hand side here in the little preview that we've got some masking effects going on, which are new to the Figma plugin.

I'm going to run through how those work now. So basically, what we can do is we can go to our exit and entry animations, these two here for each layer. And we've now got a new category called entrances that are masked. So, we've got mask entrances, and we've got masked exits. If we scroll down here, you can see we've got two different categories for those. I can basically go through and change those depending on what kind of effect I want.

So, if I wanted to do a square effect, if I change that to a square effect for the exit animation, you can see here that it's basically going square out to the top left. So when I play that through, that's how it kind of vanishes. We can slow that down, so if we wanted to make that more drawn out, we can do it like that. Or we can change it to a wipe animation. So if we want it to wipe out right, we can do that as well. So if I click play, that's going to wipe it out from the right. Same thing with the entrance. So, I can add y-pin effects, so I can do more of a wipe in from the top to the bottom. Or I can do wipe in left, and that'll apply a different position as well.

You can basically go through all of your layers now and apply these wipe animations to get that masking effect. So you can see on my text layers, I'm doing a little bit of a delayed effect here. So, I've got these three here, and I'm slightly delaying them, so that's 0.3, 0.4, 0.6. You can basically spread those out a bit if you want to get a bit more of a delayed effect, and we can see what that looks like here. So those are going to come in kind of one after the other, and we're also wiping those out at the end. That's basically how you can add the mask animations to your layers in Bannerify.

To export these out, you can either click on the "Export to HTML" button, which will allow you to export the code to just HTML and JavaScript. Alternatively, you can export it to GreenSock or GSAP. If you're using a specific ad platform, you can select that as well. So, for example, we could do Google ads. Click on that and click on "Export Banner." This will generate all of the code, all of the images that we need.

If we download that to our desktop, open up that zip file, you can then open up this preview in the browser. So, if we go to our browser and just drag that in, you can see here that we've got our animation exported as we'd expect. So, this is just pure HTML that you'd be able to upload to Google ads. We can also upload this or export this to a video. So, if you want to export it to a video, you can go to this button here, just click on "Export to GIF or video," click on the video or GIF format you want to export, and this will export it to a video for you. So, these can be useful for social media posts or for your website. 

We can do a GIF as well. So, I'll just export the GIF while we're opening up the video. And if we open up the video, we can see that dragging that into the browser as well, we'll play that back. And finally, we've got our GIF as well. So, if we save that to our desktop, open that one up, and again, drag that into the browser, we'll be able to preview that in here. And we can see this one is now a GIF. 

That's basically it. Those are the different formats you can export it to. So, yeah, I just want to keep this really short. This was a really frequently requested feature to have masking animations. So, this has just been added to the Figma plugin now. You can try this out in your own banners and hopefully, it adds some more creativity and flexibility to the types of animation styles you want to use in your Figma banners for HTML or video or GIFs. As always, thank you for watching and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to add realistic placeholder text content in Figma using CopyDoc
date: 2023-08-08T00:00:00.000Z
---

# How to add realistic placeholder text content in Figma using CopyDoc



#### Video Transcript

Today, I'm going to be showing you how to use realistic placeholder content in your Figma designs using the CopyDoc Figma plugin. 

To get started, all we need to do is go to our Figma file, click on the little resources icon up here, and search for CopyDoc. Under the "Plugins" tab, if you just go ahead and click on "CopyDoc," you can either run the Figma plugin by clicking this "Run" button here, or I'd recommend clicking on this "Save" button here. Then, go to your canvas, right-click anywhere, go down to "Plugins," and then click on the "CopyDoc" item. That's just going to run the Figma plugin that we saved a second ago.

If you're new to the Figma plugin, it has a bunch of different features to help you update, export, and import text content. But for today, I'm just going to be focusing on the Content Library feature. Feel free to check out the YouTube channel for other tutorials, but for today, we're just going to be focusing on the Content Library to add some placeholder content to our designs.

To get started, all we need to do is go ahead and click on the Content Library button, and then just go ahead and click on the placeholders tab. Click on placeholders, and you'll see here that immediately we've got a category selected called "person" with a bunch of different placeholder content. What we can do with this content is use it to populate layers in our design just by clicking on them. For example, if we go ahead and click on this text layer here and we wanted to add a name to that layer, what we can do is click on this full name button. That will automatically populate the layout with a fake but realistic-looking name. We can do first name, full name, last name, middle name, and go through all of these different items and apply them as needed.

Besides just people, we've also got a bunch of other categories. If you click on this category drop-down here, we've got a bunch of different ones for animals. So, if you wanted to add maybe a dog or a horse, you can add different types of these animals with just one click. You can also add a bunch of other categories. Our internet, for example, maybe you want to add an email address. You can add fake email addresses that look realistic but not quite realistic. You can do these email ones, which are more realistic with Hotmail, Yahoo, or Gmail addresses, and a bunch of other ones as well.

I'm not going to go through all of these categories. You can go through these yourself and figure out what kind of content you actually need. You can do fake words, you can do Lorem Ipsum if you want to. You can do paragraphs worth of Lorem Ipsum or just a sentence or just one line and all these different options.

Besides just using it like this, we can also use shortcuts or Snippets. For example, if we use this copy icon over here – I'm just going to click on that – this will allow us to copy this trigger to our clipboard. Then we can basically just paste it into a layer that already exists. For example, if I wanted to go into here and I paste in that trigger, that'll automatically fill out that trigger into the full text.

If you're new to the Figma plugin, it has a bunch of different features to help you update, export, and import text content. But for today, I'm just going to be focusing on the Content Library feature. Feel free to check out the YouTube channel for other tutorials, but for today, we're just going to be focusing on the Content Library to add some placeholder content to our designs.

To get started, all we need to do is go ahead and click on the Content Library button, and then just go ahead and click on the placeholders tab. Click on placeholders, and you'll see here that immediately we've got a category selected called "person" with a bunch of different placeholder content. What we can do with this content is use it to populate layers in our design just by clicking on them. For example, if we go ahead and click on this text layer here and we wanted to add a name to that layer, what we can do is click on this full name button. That will automatically populate the layout with a fake but realistic-looking name. We can do first name, full name, last name, middle name, and go through all of these different items and apply them as needed.

Besides just people, we've also got a bunch of other categories. If you click on this category drop-down here, we've got a bunch of different ones for animals. So, if you wanted to add maybe a dog or a horse, you can add different types of these animals with just one click. You can also add a bunch of other categories. Our internet, for example, maybe you want to add an email address. You can add fake email addresses that look realistic but not quite realistic. You can do these email ones, which are more realistic with Hotmail, Yahoo, or Gmail addresses, and a bunch of other ones as well.

I'm not going to go through all of these categories. You can go through these yourself and figure out what kind of content you actually need. You can do fake words, you can do Lorem Ipsum if you want to. You can do paragraphs worth of Lorem Ipsum or just a sentence or just one line and all these different options.

Besides just using it like this, we can also use shortcuts or Snippets. For example, if we use this copy icon over here – I'm just going to click on that – this will allow us to copy this trigger to our clipboard. Then we can basically just paste it into a layer that already exists. For example, if I wanted to go into here and I paste in that trigger, that'll automatically fill out that trigger into the full text.

If I manually type that out – if I do slash slash fake dot Lorem dot lines – that'll automatically expand that based on the content that it's using. There are a few different ways you can do that. The other thing we can do is also use placeholders as part of our custom content Snippets.

If we go to the collections tab over here and we create a new snippet by clicking on the "Add New Snippet" button over here, I'm just going to give this a name. I'm going to call this subheading. Then, I'm just going to select a collection. Let's call this one "titles," just make a collection for it. That's just basically a category. Down here, we can now start using placeholders mixed in with our custom text content.

If you toggle on this "Show Placeholder Shortcuts" button, that's going to allow you to use those same categories down here and splice them with custom text content. For example, you might do something like "Hello," and then select a name. If we go back to our people, our person, and then go back to our full name, click on full name or you can just do first name if that makes more sense, and then just click on the little plus icon down here. You can see here it's basically populating that with the shortcut that we saw before in double curly brackets. This is a special type of placeholder that's going to get automatically replaced later.

I'll show you a couple more examples of this. If we were to do again, go back to the animals. So, we go back to animals and then we can say, "In this picture, shows a," and then just add a placeholder and add that there. Then we can do "bear" at the end. We basically splice that in the middle of that sentence. Just for now, I'm going to save that. I'm going to click "Save New Snippet," and you can see here we've got our new snippet added in our collection. This is just a way where we can basically create custom text Snippets.

Again, we can apply this either by clicking on the text layer and clicking "Apply." If you click "Apply," that's going to automatically apply that randomly to the text layer. Or, again, we can use the shortcut. If you wanted to copy that to a clipboard and you wanted to add it somewhere in this layer, maybe we wanted to add it in the middle here, you can just paste that in, and that will automatically populate that. You can see here it's automatically populating it. It'll do the same thing if we type it. If I type that in manually, so slash slash subheading, that's automatically going to populate that with a text snippet.

The cool thing is you can see here it's basically replacing the placeholder each time the text snippet gets rendered. In this one, we've got "Hello, Logan," and in this one, we've got "Hello, Kobe." If we were to change that or add that again, we can actually expand this and just add the "Hello, first name" snippet. That's just going to keep randomizing every single time. You really get a nice way of adding these placeholders interspersed with your own custom content.

The cool thing is you can apply this to multiple layers at once. If you wanted to add this to multiple layers, let's say we've got these four layers selected, and then we wanted to add the "Hello" snippet to those, click on that now. Each time you click that again, it's going to randomize that placeholder snippet for each of the selected items. This can be a powerful way of generating fake placeholder content for multiple items using your own content mixed with fake content.

If you want to edit these as well, you can totally do that. Just click on the edit icon down here. In this case, we don't want to have "bear" at the end because it seems to be automatically adding the bear into the sentence. I'm just going to remove that, and we can add some other content in here as well. Let's say we want to do a location. You could create a location for a country. You could say, "I'm from country," and then plus, and then you could add another area down here. You could say, "country," and then you could do "building number," so we go "building number" and there. Then we'll do, "I live at building number," and then we can do maybe an address, so we'll do a street address, add that in, and then we can also do maybe a postcode at the end. Let's add a postcode or country code, one or the other, and then just add that in there. We'll update that snippet, and you can see here it's added that as a new snippet for us.

Now, if we were to apply that, you can see here it's going to populate that automatically. This is a really easy way of creating interspersed fake text content between custom text content that you can automatically apply with one click. Again, you can copy that as a trigger. You can add that to the end, so you could keep adding that trigger and just keep going to keep populating it. We can also do, as I mentioned before, just applying it directly. There we go. You can see we've removed "bear," so it's adding the bear automatically now. That's a cool way of adding the dynamic animal into your sentence.

Yeah, as I said, I'm not going to go through every single category. There are tons of different categories and placeholders in here. The last thing I want to go through is localization. Let's say you wanted to do a localized site or a localized bit of content and you wanted to use names or addresses from a different country. By default, it's just going to do English American, but if we open up this localization drop-down here, you can actually customize that to a different Locale. If we were to do Japanese and change that down here, you can see that the examples have basically been updated to use Japanese characters and Japanese names.

If we were to replace this text layer here with a full name, you can see that it's basically populating it with the Japanese characters now. The same sort of thing with Korean. We can do a Korean name, and that's automatically going to populate that. The same thing for Italian. We can do Italian, and that's basically going to populate it with Italian names.

The cool thing is when you've got this Locale selected, that's also going to get applied to your existing collections as well. If we were to reuse the first name, so we'll apply the first name, you can see here that it's using the Italian names in our first name here. If we change this back again, so we'll go back to Japanese just to make it obvious that it's changing, and go back to here, go back to our collections, and now if we replace that name, it's going to be in Japanese. That's a really easy way of localizing your placeholders as well if you do need to do a completely different language or a different set of locations or names. All the content that can be localized will be automatically localized when you apply the placeholders.

Yeah, I hope that's been helpful if you've been wondering how to use more realistic placeholder content. If you're kind of overusing Lorem Ipsum and you actually want to use something that's going to be much closer to the real content that you're going to be using but you're still waiting on the final copy to be approved, using some of these placeholders is going to be a really easy way to automatically populate your designs with realistic placeholder fake content.

We'll leave it there for today. I just wanted to show you some of the fundamentals of how you can use placeholder content in CopyDoc on its own and also splice in some of those placeholders dynamically into your custom content text Snippets using the Content Library feature in CopyDoc. Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to use Figma Variables as a re-useable text content library using CopyDoc
date: 2023-08-07T00:00:00.000Z
---

# How to use Figma Variables as a re-useable text content library using CopyDoc



#### Video Transcript

Today, I'm going to be showing you how to use your Figma variables as a text component library in Figma using the CopyDoc Figma plugin.

To get started, all we need to do is go to our Figma file, click on the little "Resources" icon up here. If you search for "CopyDoc" under the "Plugins" tab, click on the CopyDoc result. You can either run the Figma plugin by clicking the "Run" button here, or you can click on the "Save" icon for easy access later. I've already clicked the save icon, so I'm going to go to my canvas. Just right-click anywhere, go down to "Plugins," and then click on the "CopyDoc" item. That's just going to run the Figma plugin that we saved a second ago.

If you're new to the Figma plugin, the way it works is it provides you with a set of tools to update Figma copy and Export copy, and make all different changes to text in a variety of ways. Today, I'm just going to be focusing on the Content Library feature. If you want to know how the other ones work, check out the CopyDot playlist on the YouTube channel. But for today, I'm just going to be going through how to use Figma variables as a Content Library.

To get started, all we need to do is go to the Content Library button and click on that. If you go over to the Integrations tab—click on Integrations—then down here, you basically want to select the Figma option. By default, it'll select the Google Sheets integration, but for today, we're going to be focusing on the Figma variables integration. So just make sure you've got Figma string variables selected, and then we're ready to go.

The way this feature works is it allows you to take your Figma variables. So, if you go over to your Figma right-hand side column and click on the local variables option—this local variables option over here—click on that. This will allow you to create some variables in your Figma file that will be accessible inside of the Figma plugin in a moment. The way that it works is you click on the create variable button over here, and you want to click on the string option. Click on the string option with the little text icon. Then, what we can do is start creating some text variables that we'll be able to use in our Content Library.

For example, I'm just going to call one "headings." So, I'm going to create one called "headings," and I've already got some copy that I want to use. I'm just going to copy-paste that into the value field. I'm going to paste that into value. You can see now, if we go back to our Figma plugin and click on the little refresh icon in the bottom right here, you can see that it immediately loads up our Figma variable as a text component Library option. Basically, if we expand that, we can see that we've got all these different text options. We can now apply those to our Figma layers with one click.

For example, if I click on this text layer here, I can basically click on the supply button, and that will automatically apply a random bit of text from our little variable here into the text layer in Figma. We can also select individual strings. So, you can select which one you want to use there, and that will also apply it. You might also notice that there are multiple strings in this options area here, yet we only pasted one value into here.

The reason for that is the Figma plugin automatically determines if there are multiple strings by detecting the double pipe symbol. You can see here I've got the pipe symbol. You can add that on your keyboard if you just do shift forward slash. That'll add the pipe symbol. So, you can see here, I could basically add more pipe symbols, double pipe symbols, to split up these strings. Those will automatically get imported as different strings in here. We can also add individual ones.

For example, if you just wanted to create a string called "CTA" for a CTA button and we want that to be "learn more," you could add that as a single string. If we refresh the copy here, that's just going to add it as a single string. So, if you were to apply that, that would only ever apply that one string, and you just have that as a single item. Totally fine. You probably want that in a lot of cases, but I just wanted to show you how to add multiple strings.

In this example, we could do multiple CTAs. We could do "try it now" and add that with the double pipe symbol and refresh that. In here, we'll now get two of them. So, we've got our "learn more" CTA and our "try it now" CTA. This is a really easy way of splitting up the string into multiple variants in case you want to have multiple options for different bits of copy. We can also do that for our projects.

I've got a bunch of different projects in this string here. I'm just going to add a new variable called "projects." So, if I add "projects" as the name and paste in the value with those pipe symbols again, just to split up some of those project names, I can get rid of these text layers now. If we refresh the variables again, you can see we've now got a little "projects" item in here. The cool thing is we can also apply this to multiple layers at once.

For example, if I were to select all of these titles—so I'm just going to open up these groups—and if I go ahead and select the project name for all of these tiles, I can select all of those six layers. Then what I can do is I can open up this little panel here, and I can apply those in order. I can do an ordered version, which is going to go Nike, Adidas, Apple in order, the way that we added it in the Figma variables value. Or we can do random, so we can randomly roll out those copy updates to the selected layers. We can do it alphabetically, so that's just going to go from A to Z based on the variables that we added, or we can do Z to A. We can do reverse alphabetical as well.

Of course, we can just click on the supply button, and that will automatically do a random application. Or we can apply the same value to multiple selections. So, if you wanted to apply the same string to multiple text layers, you can definitely do that as well. But in this case, I'm just going to do an ordered version based on my original Figma variable order. So yeah, that's basically it. I just wanted to run through that really quickly in case you've been playing around with the new Figma variables feature. I wanted to know how to use this more seamlessly with your text layers.

It's worth mentioning that this is not going to apply the variables to the text layers themselves. So, you'll notice here if we go to this text layer, you've got the option in Figma to apply a variable to that text layer. You can basically apply one of these variables to the text layer, and if that gets updated in here, so if we were to add, you know, a "buy now" CTA onto that text, that would automatically update that variable in here. That's not what this feature is doing. This feature is basically just making it easier to consume these variables as an on-demand text Library. It's not going to sync up your variables over time.

That's just something to be mindful of if you are going to be using this feature. It's really just an on-demand apply-once and use-it-as-is sort of thing. But it's going to give you a really easy way to keep these bits of text in your official Figma variables panel and then just sync those up in here when you actually need them. So yeah, we'll leave it there for today. Hopefully, that's helpful if you've been wanting to use the Figma text variables in a different way, to use it as a bit more of a text Library, searchable text Library. You can do that here as well. You can search the copy, make it a bit easier. 

Hopefully, that's going to be handy for you if you're using the variables feature with your team. Feel free to give this new integration option a try in CopyDoc. Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to add text expander content snippet shortcuts in Figma using CopyDoc
date: 2023-08-06T00:00:00.000Z
---

# How to add text expander content snippet shortcuts in Figma using CopyDoc



#### Video Transcript

Today I'm going to be showing you a quick tutorial on how to use text expander shortcuts in Figma using the CopyDoc Figma plugin. 

To get started, all we need to do is go to your Figma file, click on the little "Resources" icon up here. If you search for "CopyDoc" under the "Plugins" tab, if you just click the CopyDoc result, you can run the Figma plugin by either clicking on this "Run" button here or I'd recommend clicking on this "Save" icon here. That'll let you run it from your saved Figma plugins list later.

I've already gone ahead and clicked the save icon. I'm just going to go to my canvas, right-click anywhere, go down to "Plugins," and then click on "CopyDoc." That's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, it's got a bunch of different features that help you to update, export, and import all of your text content. But for today, we're just going to be focusing on this Content Library feature to create reusable text expander snippets.

I'll show you what that looks like. Now, if you go ahead and click on the CopyDoc Content Library button in the Figma plugin, that's going to bring up this little panel here. Just to show you what I mean by text expander, what it actually means is we can basically take these trigger shortcut names. For example, button or CTA, and we can type those directly into a text layer and expand that shortcut into one of these text variants.

For example, if I do forward slash, forward slash, CTA, you can see that immediately after I finish typing in the trigger, it expands that trigger into the full text from our snippet. So, if I do the same thing over here, I'll do slash, slash, heading, and that automatically populates that heading with one of the text variants that I've added here.

I'll show you how to add those in your own Content Library. You can click on this "Add New Snippet" button over here, and you can create a text trigger. So, for example, we could do one called "nav." So, if we wanted to make some navigation items that we can reuse, we can call this one "nav." We can basically categorize this into a section. In this case, we might call this category "menus." We want to add the "nav" trigger to this menu. The "nav" trigger is going to be your shortcut, so it'll be slash, slash, "nav."

Under the text content snippet, you can start adding some text content variants here. You can just do one variant if you don't need multiple variants. But in this case, we might want to add a few different menu items. So, we might call this one "features." We might call this one "about us." We might do "story," "social media," and maybe we'll add one more for "FAQ."

We're going to create this as a text snippet. Click on "Save New Snippet," and you can see here it's added it right at the top. So, what we can do is we can basically now use this snippet in our content just by using that shortcut. If I go to slash, slash, "nav," that's automatically going to give me a menu item from my approved menu items trigger.

Again, I can do "nav" as a trigger. I can copy-paste that to my clipboard, paste that in. I can actually keep pasting it if I want to keep doing that. So, you can add multiple triggers into one text area. You could add that to in between this text here, and that will automatically expand it.

That's basically the fundamentals of using the text expander feature in CopyDoc. As I mentioned, you can go ahead and create as many of these triggers as you want, just to basically have an approved copy library that's going to be really handy for you to use to populate text content for pieces of your design that need approved snippets.

Instead of just using "Lorem Ipsum", instead of actually manually typing out if you're creating a new button, instead of thinking of a name or thinking of a, you know, Lorem Ipsum or something like that, if you've got the CopyDoc Figma plugin open and you've got your shortcuts on hand, you've either got it memorized or just using the copy icon over here, instead of typing out Lorem Ipsum or whatever, if you just know that it's going to be a button and you've got CTAs, you can just type in CTA and automatically expand that text out into an approved bit of copy.

That's basically what it looks like. As I mentioned, you can go ahead and create your own content snippets. There's also a feature to import and export CSVs. So, if you wanted to do this in bulk, you can actually just import and export these snippets in a bulk export and import.

Feel free to go ahead and try that out as well. But for today, I'm just going to leave it there and keep it really simple, just to show you how to use the text expander feature in the Content Library section of CopyDoc. Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to use Airtable as a Figma text content library using CopyDoc
date: 2023-08-06T00:00:00.000Z
---

# How to use Airtable as a Figma text content library using CopyDoc



#### Video Transcript

Today, I'm going to be showing you how to use an Airtable spreadsheet as a custom content library in Figma with the CopyDoc Figma plugin.

So, to get started, all we need to do is go to your Figma file, click on the little "Resources" icon up here, and if you search for "CopyDoc" under the "Plugins" tab, you'll see CopyDoc pop-up. You can run the Figma plugin by either just clicking on the "Run" button or you can click on this little "Save" icon to save it to your Figma plugins list for easy access later.

I've already gone ahead and saved mine, so I'm going to go to my canvas. I'm just going to right-click anywhere, go down to "Plugins", then find the "CopyDoc" item, and click on that. That's just going to run the Figma plugin that we saved a second ago.

If you're new to the Figma plugin, the way that it works is it has a few different features to help you update text content. Today, I'm just going to be focusing on the Content Library feature, which is going to allow us to sync up an Airtable spreadsheet and use the content from that spreadsheet in our Figma designs and apply those Snippets automatically.

To get started, all you need to do is go to your Content Library feature. Click on the Content Library button in CopyDoc, and you'll see here by default it's going to go to the "Collections" tab. There's another tutorial on the YouTube channel if you want to go through doing that, but for today, we're just going to be focusing on the "Integrations" tab.

I'm going to go ahead and click on Integrations, and by default, it's going to select the Google Sheets integration. Instead of using Google Sheets, I'm going to click on that option and change that to "Airtable". So, I'm going to click on Airtable, and you'll notice that we haven't set up any Airtable libraries yet or spreadsheets yet. All you need to do is fill out these details below.

You can see underneath "Add new Airtable", there's a prompt asking us to add our Airtable URL and also our personal access token from Airtable. You can click on this little Airtable details link to get some links where to find those, and I'll show you what that looks like in Airtable now as well.

If we go to our browser, first thing I'm going to do is just create a new personal access token in Airtable. If you go to Airtable.com/create/tokens, you'll get sent to this page here, and what you want to do is go ahead and click on "Create token". I'm going to click "Create token", and I'm just going to call this "CopyDoc Figma plugin" just so I know what the token is being used for.

The other important thing you want to do is add a scope. Scopes are going to tell the token what it has access to in your Airtable account. So, I'm going to click on "Add a scope", and I'm just going to select one scope, which is this "data records read" scope. This is going to allow us to read the content from our spreadsheet. You don't need to add any other ones, just that "data records read" scope.

Then, you also have to make sure to add your base. So, if you click on "Add a base", that's basically going to tell the token what kind of areas in your Airtable account this token will have access to. So, I've already created a separate Base called "CopyDoc" where I'm just going to keep my copy content libraries. You can choose another one, or you can choose all workspaces. I'm just going to scope it to this one, and then I'm going to hit go ahead and click on "Create token".

Once you've created the token, it's going to give you the token that you can copy to your clipboard. You want to make sure to keep this somewhere to reuse it later if you want to because they're only going to show it to you once. I'm just going to copy that to my clipboard, go back to Figma, and paste that into the personal access token input down here. So, I've pasted that in, and then the next thing we need to do is just grab our Airtable URL.

What that means is if we go to our Airtable account (this is just the home page once you log into Airtable), what you want to do is have a base created. So, go ahead and click on "Create a base", and you can save this to your workspace. I'm just going to use the "CopyDoc" workspace that I already set up. Click on "Create".

I've actually already created a spreadsheet in Excel, but I want to use this in Airtable. So what I've done is I've saved this spreadsheet here, and I've saved it as a CSV file that I'm now going to import into Airtable.

I'm going to click on this CSV "Other" button over here, and then that's going to allow me to basically import a CSV file. So, I'm just going to drag and drop that into here and click on "Upload", and that's just going to import the CSV.

Again, you can basically do this manually. You don't need to import a CSV; you can totally just enter this in directly to Airtable, and that will work as well. But in this case, it's just easier for me to do it that way.

I've got my spreadsheet set up now, and you can see here I've basically got my "Projects" and "Headings" columns. So, the projects tag and the headings tag is what's going to be used as our label for these content Snippets, and then each row of these columns is going to be used as a variant that we can use for Content.

If that's not making sense right now, I'll show you exactly what that looks like in a second. So again, I'm just going to copy the URL, so I'm going to paste that into my URL down here, and then I'm just going to click on "ADD". That's basically going to load up our Airtable sheet.

You can see here it's found the sheet, it's loaded that up, and now we've got our content loaded directly into Figma. So, you can see here I've got my projects and I've got my headings as we just saw in the Airtable data over here. These are basically being used as separate Snippets that we can now apply to our text layers.

For example, if I were to click on this text layer here, and I wanted to give it a project name, I can either click on the "Apply" button here, and that's going to randomly select one of the text Snippets from our content that we just loaded from Airtable, or I can open up this panel, and I can manually select a snippet as well.

I can pick exactly which text variant I want to use, and that will automatically apply it to our text layers here. The other cool thing you can do is apply multiple variants at once. So, for example, if I've got these project names, and I know that I want to basically populate them with some real content or content from my Airtable spreadsheet, what I can do is I can go in here and select all of these text layers at once. So if I just select all six of these, so I'll just do that now, I'll go through and select all the project name layers.

With those six layers selected, now I can basically go through and apply these variants in either alphabetical order like that, or I can do it randomly. So, this is going to randomize the order, as you can see here when I click on that, or we can do it in the original order as well.

The original order will take whatever order that we've added in our original Airtable spreadsheet. So, Adidas, Apple, Uber, Airbnb, Disney. If we want to apply those in order, we just have to click on this "Order" button, and that's automatically going to apply those in the original order that we had in our Airtable data.

The other thing we can do is we've got a headings item. So if you click on this headings item, you can see here that we can apply that in the exact same way. We can just use the "Apply" button to randomly do one, or we can select one individually instead.

And because this is now synced up to Airtable, we can also update this on the fly and refresh new content as it's available in the spreadsheet. So, for example, if we wanted to add a new field name called "subheading", so if we added a subheading field, I'm just going to add that in, and basically, we're just going to populate this with some test content.

I'm just going to do this as "testing subheading" and "another subheading", and that's just going to be a quick test to show you what I mean when we need to sync it back in.

If we go back to Airtable, you can load that back up by just clicking on this little refresh icon down here. So with the saved spreadsheet already selected from Airtable, just click on the refresh icon, and it'll load that right in. So, you can see we've got our new subheading trigger, and if we click on our subheading down here, we can apply this subheading snippet directly to that text area.

Same thing with here, so if you selected both of these layers, that would allow us to apply those in order. So, we could do it in order or alphabetical reversed just as we saw with the other options as well.

I just wanted to keep this really simple for today, just to show you how to link up your Airtable as a custom content library in Figma through the CopyDoc Figma plugin. And also to show you how to apply the variants, how to create those variants, and also how to resync the content from your Airtable spreadsheet once you've already got it loaded in.

We'll leave it there for today, and I hope that's been helpful. If you're an Airtable user or you want to collaborate with your copywriters who are using Airtable or your team and always have an up-to-date Content Library that's available to everyone in Figma, this is going to be a really easy way of keeping those updates in sync and also a really easy way to automatically apply those to any text layers in your Figma designs.

Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to use Google Sheets as a Figma text content library using CopyDoc
date: 2023-08-02T00:00:00.000Z
---

# How to use Google Sheets as a Figma text content library using CopyDoc



#### Video Transcript

Today, I'm going to be showing you how to link a Google sheet to Figma to use it as a Content Library using the CopyDoc Figma plugin. 

To get started, all we need to do is go to your Figma file, click on the little "Resources" icon up here. If you just search for "CopyDoc" and under the "Plugins" tab, if you click on CopyDoc, you can run the Figma plugin by either clicking on this "Run" button here. Alternatively, I'd recommend clicking on this more options icon here and clicking save. That's just going to save it to your Figma plugins list for easy access.

I've already done that, so I'm going to go to my Figma canvas, just right-click anywhere, go down to "Plugins," then go down to "Saved plugins," and click on CopyDoc. That's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, it has a bunch of different features to help you manipulate and export and import text. Today, we're just going to be focusing on this Content Library feature. So if you click on the "Content Library" button here, that's basically going to open up this Content Library panel. I've done another Figma tutorial showing you what this Collection tab does, but for today, we're going to be focusing on the Integrations tab.

If you go ahead and click on the Integrations tab, you'll basically see that it defaults to the Google Sheets option. If you've got Google Sheets selected, you're basically ready to go. What we can do now is we can actually link up a Google sheet.

I've got a Google sheet set up over here with a couple of bits of content, and I'm going to copy this URL into the CopyDoc Figma plugin by going to the share button over here in the top right, clicking on that, and just making sure that the general access setting is set to "Anyone with the link can be a viewer." You want that to be "Anyone with the link" is set to a viewer. Once you've set that, go ahead and click on the "Copy link" button to copy that to your clipboard. Then, if you go back to Figma, you can now paste that into this input field where it says "Add new Google sheet." I'm just going to paste that in there, and that's basically going to fetch the Google sheet URL.

Once it's found the tabs, it's going to load up the content and populate the Content Library here with your text. That should finish loading, and you'll see that we've got our Snippets in here that we imported from Google Sheets. This is getting imported directly from this URL, so this is basically live data that's getting pulled in from Google Sheets into your Figma Content Library panel.

What this allows us to do is use that content in our designs. So I'll show you what that means. We've got this headings snippet here with a bunch of different variants. If we go ahead and select a Figma text layer, we can apply any of these variants to that text layer. For example, I can apply a random one just by clicking on the apply button here, and if I keep clicking it, it'll just keep doing random text replacement. Alternatively, we can select one directly, so we can select one of these Snippets, and that will automatically replace the text here.

Likewise with these projects down here, so if we wanted to replace some of these projects with updated project names, all we can do is select all of those text layers, and then in our projects snippet over here, again, we can hit apply, and that's automatically going to apply those to our text layers. We can also have more control over the way those are ordered. If you're doing multiple applications of text, you can do it in order. So that'll basically follow the original order. Nike website added at Spanish ads Apple ad campaign, so those are in order.

Or you can do it randomly. That'll randomize the way that the text gets rolled out if you wanted to do a more random version. Or you can do alphabetical reverse or otherwise, so you can go A to Z or Z to A. That's just a really quick way of having a bit more control over applying those text layers. Likewise, we can apply these to single layers as well. Of course, we can click on this project name here and populate it with one of our campaigns or one of our titles. That's a really quick way of doing that.

And then, of course, if we wanted to update these in Google and reload them in the Figma plugin, we can definitely do that as well. Maybe we want to add a new item over here, so we could do you know Disney campaign and add that in there as another one. We could maybe delete some of this content. I'm just going to delete this cell here. We can add another variant, so we can call this one taglines. We can basically add more text in here, so I'm just going to do test content here and another tagline here. You can obviously populate these with much better content than that.

Now if we go back to our Figma plugin and click on the little refresh icon down here, that's just going to fetch the Google sheet again, reload the content, and you can see we've now got our new taglines item. So if we drop that into here, we can apply that as test content or this other tagline here. I'll randomize that, and again if we open up the headings, you can see one of them has been removed, and in projects, we've got our Disney campaign as well, so we could easily use that right there. That's a really quick way of syncing up data from a Google sheet.

This is a really cool way to keep your Content Library in sync. You can add as many of these columns as you like, you can just keep adding multiple columns, and those will automatically get added into the Google sheet sync feature over here. I'll basically leave it there for today. I just want to give you a really quick fundamental overview of how this feature works and how you can sync up your Google Sheets to use them as a library with multiple Snippets, multiple variants, as you saw. You can basically just add as many rows as you want, so you can just populate these and create as many text variants as you want for these different types of text Snippets.

That's going to give you a really easy way of loading in realistic content into your designs that's basically been approved or is ready to use instead of just using lorem ipsum or copying or anything like that. So I hope that's helpful if you've been wondering how to use your Google Sheets as a bit of a Content Library in Figma. The new Content Library feature in CopyDoc is going to be a really helpful way of doing that.

Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to create a re-useable text content library in Figma using CopyDoc
date: 2023-08-01T00:00:00.000Z
---

# How to create a re-useable text content library in Figma using CopyDoc



#### Video Transcript

Today, I'm going to be showing you how to create a reusable text content library in Figma using the CopyDoc Figma plugin.

To get started, all we need to do is go to our Figma file and click on the little "Resources" icon at the top here. If you search for CopyDoc and under the "Plugins" tab, click on the CopyDoc results. You can run the Figma plugin by either clicking on this run button here, or I'd recommend clicking on this more options icon here and clicking save. That's just going to save it to your Figma plugins list for easy access later. So, I've already done that, and I'm going to go to my canvas and right-click anywhere, go down to "plugins," go down to "saved plugins," and then click on "CopyDoc." That's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, it has a bunch of different features to help you with updating text and exporting text. Today, I'm just going to be focusing on the content library feature. If you're interested in the other features, feel free to check out those in the CopyDoc playlist on the YouTube channel. But for today, we're just going to be focusing on the content library.

To get started, all we need to do is go ahead and click on this content library button here. That's just going to bring up the content library feature that I can run you through right now. Basically, this allows you to create reusable text Snippets that can include variants. You've got a bunch of different variants here, and these ones that have already been added. It just allows you to create a reusable content library that you can share with your team. So everyone's basically on the same page with the type of content and copy that has been approved to use in your designs.

I'll show you what that looks like to add a new text snippet. So, if you go ahead and click on "add new snippet" up here, that's basically going to bring up this little creation panel, and I'll run you through how it works now. The first thing you need to do is add a trigger shortcut. This is basically going to be the shortcut that'll automatically trigger the text to expand if you type it into a text layer. So what I mean by that, for example, is if we go back here and check out this heading one, if I basically take that snippet, so if I were to type in slash slash heading, that's automatically going to expand into that snippet or one of those snippets. I can also copy it to my clipboard and just paste it. That's also going to do that. But the snippet is basically going to be the shortcut that comes after the slash slash that'll trigger that snippet.

Again, if we go back to our add new snippet panel and I wanted to call this one tagline, for example, I can call it tagline, and the snippet will be slash tagline. You can also add dot characters if you wanted to do something like marketing dot tagline, you could do that just to make it more namespaced. But today, I'm just going to keep it simple and call it tagline. Then what you can do is add it to a collection, so you can store your snippets in different collections to make them more easily identifiable. I've already got a couple of these set up, so I'm going to put this under the marketing copy category. But you can go ahead and click on "add new collection" if you want and create a brand new collection. I'm just going to use marketing copy for now.

The interesting part down here is that we can then add our text content snippet. So, if you just wanted to add one tagline, for example, we can grab this tagline here and drop that into here. So, you could basically just include that as the one approved bit of copy. If you just wanted to add that one line, you could definitely do that. So, we could hit "save new snippet." When we open up our collections tab here, you can see we've got a new item called tagline. What this does is it allows us to reuse that snippet. So, if we went down here and clicked on one of these categories, we can basically just click on this text layer, click on the button, and that will automatically apply the text.

This content here hasn't quite been styled very well, so we can do a fixed width and then bring that in. So if you wanted to apply that, you can apply that there. It looks a little bit better. So, this will basically allow you to apply that snippet. But you'll normally want to have more than one snippet for a certain type of content snippet. So what you can do is we can now edit that. I'm going to click on the little pencil icon. If you want to add multiple taglines, so for example, if we want to split this into two, you'd basically just add the double pipe symbol characters. So on the keyboard, just push on the pipe symbol, so hold down shift and push on the forward slash or pipe symbol button, and just do a double one. So you want to do two, and then you can add more categories of text in there.

We can create text variants. I'm going to call this text variant example. So, we can add another one and then we can do another one here and so on. So, you can basically create as many as you want for these little snippets. When we hit "update snippet," you can see here that the content has been updated for that tagline trigger. So what that means is if we were to basically now go into here and use that trigger, so if we did slash slash tagline, that's automatically going to expand into one of those random variants. So, we can add it again, do tagline, and again, it's going to be random, so it's going to change every time, or again, you can just use the direct snippets down here and pick which variant you want. Or again, we can do multiple selections. So if we wanted to select multiple layers, we can definitely do that. So we can do all three of these, and that'll allow us to create an ordered or random application of those snippets. So we could do ordered, we could do random, so those are just going to bounce around, or we can do alphabetical as well. So that's just a really quick way of applying multiple snippets to multiple text layers at once.

You've got the option of applying them with the buttons, or you've got the option of applying them with the expander. So that's all well and good, but maybe you're thinking, I've got a bunch of text that I want to add, and I don't want to go through and manually add them one by one. Well, the good news is you can also do a CSV import. So if you click on this import CSV button, that's going to bring up this little drag and drop area here, and what you can do is you can download an example CSV. I'm just going to download that to my computer. I'm going to click on the little link, save that to my desktop. So I'm just going to open that up now. I'm going to open that up with Microsoft Excel. You can use any spreadsheet software that you prefer, Google Sheets, or numbers, or anything like that. Today, I'm just going to be using Excel to keep it very generic.

You can see here that the example file basically contains the header row. The header row is where you're going to add your triggers or your shortcuts for the text expander. And then each row underneath that per column is going to be the text variants that you want to use. So these are basically just two different text variants that will get added. We can obviously add more. So, we could do content copy, and just add some random text. We could do "Random text," "Another bit of text." And if we were to basically now hit "Save," so I'm just going to save that CSV. And now what we can do is drag and drop that updated CSV file into our little drop zone area here. So, I'm just going to drag and drop that in.

You can see that it's loaded up our snippets. It's got three new snippets detected, and we can go ahead and select a new collection for those snippets. So, I'm just going to go ahead and create a new collection. So, I'm going to click "Add new collection." I'm going to call this one "CSV Imports", so you can call this whatever you want, and CSV imported snippets. Then just go ahead and click on "Import Snippets," and that's going to bulk import those new text snippets into your collections tab. You can see here, if we go down to our CSV imported snippets collection and filter those down, the three new text snippets that we just imported by CSV are now available. So, we can basically go ahead and use those. You can see here, if I apply those text snippets, or if I jump into this one, that's basically going to include the text that we just imported from our CSV file. So that's a really quick way of doing that.

The other thing that you can do is then re-export these to CSV if you wanted to. So, what we could do in this case is basically select the snippets that we want to export, just check those, click on "Export to CSV" up here, and then save that to your computer. It's basically going to save that into categories. So if you've got multiple collections selected, it's going to export each of those collections to a separate CSV. But in this case, I'm just going to be doing the one we just imported. You can see here that it's basically exported the two snippets that we selected to be exported from the Figma plugin. What we can do now is basically update these. So, instead of calling this one "Random text," we can call this one "Ordered text" and change "Text" to "Content." We can change these things here, so we can add some extra names, and maybe we want to delete some as well. So delete this row here, and again, hit "Save" on that CSV, jump back into our selection. I'm just going to uncheck those, click on "Import CSV," and drag and drop that new updated file that we just exported and re-saved. I'm going to drop that in there.

This time it's basically saying we've got some existing snippets that we want to update. It's detected two new updates. We've got this snippet updated, and it's showing you exactly what's going to change. Go ahead and click on "import snippets," and that's going to update those text snippets for us. You can see here that the names have been updated, and the copy here has also been updated. So that's just a really quick way of bulk importing or updating existing snippets if you want to export those to CSV, make some updates, and then re-import them. That's a really quick way of doing that.

The other thing you can do in bulk is move these into different categories. So let's say we wanted to move these into a couple of different categories. We can basically select the snippets that we want to move, go down here to "Select Snippet Collection," and we can basically rearrange those collections in bulk. So I might want to move those into the buttons category. I can just select "Buttons" and click "move," and that will automatically move those snippets into the collection that you specified. Likewise, you can also bulk delete things. So, if you wanted to bulk delete these two snippets, you can basically just select those two, go down here, and click on "delete," and that will instantly delete those text snippets. So, you've just removed those.

That's a really easy way of bulk managing or updating and exporting and importing snippets via CSVs or via the selection in the Figma plugin. So yeah, that's basically it. I just want to go through the basics of how you can use CopyDoc to create a reusable text content library. You can imagine using this for all sorts of different copy. If you've got different types of components or different kinds of content categories in your app or on your website that you need to reuse copy for, you can go ahead and do that. So for example, CTAs, we've got some calls to action buttons here, we've got some calls to action text, and basically, you can apply these automatically from our little copy library down here and drill down into those and have some copy available whenever you need to populate some of these different text snippets down here.

We'll leave it there for today. I just wanted to run through the basics of creating a reusable text content library using this new content library feature in CopyDoc. Hopefully, that's helpful if you've been wondering how to create a reusable set of text snippets that are really easy to roll out into parts of your designs. This is one option that's hopefully going to make that a bit more manageable and scalable for you and your team. Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export HTML emails from Figma to Brevo using Emailify
date: 2023-07-20T00:00:00.000Z
---

# How to export HTML emails from Figma to Brevo using Emailify



#### Video Transcript

Today, I'm going to be showing you how to automatically upload your HTML email designs from Figma to the Brevo email marketing platform using the Emailify Figma plugin. 

To get started, all we need to do is go to your Figma file and click on the little "Resources" icon up here. If you just search for "Emailify" and click on the "Plugins" tab, then click on the Emailify result that pops up, you'll be able to run the Figma plugin by either clicking on this run button here. Alternatively, I'd recommend clicking on this more options icon here and clicking on Save. That's just going to save it to your Figma plugins list for easy access later.

I've already gone ahead and done that. Now, I'm going to go to my canvas, right-click anywhere, go down to "Plugins", then go to saved plugins, and click on Emailify. That's just going to run the Figma plugin that we saved a second ago.

If you're new to the Figma plugin, it allows you to design HTML emails in Figma and then export those to production-ready code directly from the Figma plugin. You just add a new frame and start populating that frame with a bunch of preset components. You can then customize and tweak the content and styles according to your brand or the content you need to include.

I won't be going through a detailed tutorial on that today. If you're interested in how to design the emails, there are a bunch of other tutorials on the YouTube channel that you can check out. Today, I'm really just going to be focusing on uploading some HTML emails that you've already designed in Emailify and getting those into the Brevo platform using the Brevo API.

To do that, we can basically finalize our email. I'm going to add a little footer down here. Then, we can get started to upload this to Brevo using the Emailify option for that platform.

First, we click on the export HTML button in the Figma plugin. Instead of the HTML email option, which is the default, we're going to open the platform Integrations. Find the Brevo option (previously Sendinblue, recently rebranded). Click on the "Brevo" option, and then we've got a couple of new options down here. Now, we basically need to get our API key from Brevo and our sender email as well.

Clicking on these two links will open up some browser tabs with the account pages of where to find those details. As long as you're logged into your Brevo account, clicking on the API Keys link will take you to this page. Click on the generate a new API key button. In this case, I'm just going to give it a name like "Emailify Figma plugin" and hit generate. That's going to create a brand new Brevo API key for us. We only get to copy this once, so make sure you copy that to your clipboard by clicking on this little copy icon here and then pasting it in the Figma plugin API key field.

The other tab that opens is the senders tab. The senders tab is where you've got your approved email addresses to send emails from. In this case, I'm just going to use my sender that I've got in the account and paste that into the sender input field.

Now that we've got those two details in there, all we need to do is select the emails that we want. I've only got one in this case, so I'll give it a subject line like "test subject" and add some pre-headed text as well if I want to. Once I'm ready to go, I can click on the upload to Brevo button here.

That's basically going to start exporting the production-ready HTML, upload any images, and then upload that entire template to your Brevo templates automatically. In a second, once it finishes, we can see that it's saying that our Brevo templates have been uploaded. If we go to our program marketing templates page after logging in, we'll be able to see them.

If we click on that link, it's going to open up this templates page here. I'm just going to refresh that because I already had it open. Now that we're refreshing the Brevo templates list, we can see here that we've got our example template. "Example" is coming from the frame name; our Figma frame is called "example" that we named it before in Emailify, and so the email template itself is also getting the example name.

What we can do is click on that now and if we open up that template, we should see a little preview. You can see here that our HTML exported from Figma is showing up as we'd expect. All of this is Rich Text, which is exactly what we want. We can see the mobile view, so this is the responsive version. I didn't go through how to customize the mobile design in Emailify, but by default, it kind of works itself out anyway. You can add other overrides if you need to. Check out one of the other video tutorials for a good way of learning how to do that.

This is a really quick way of seeing what our template looks like in Brevo after we've uploaded it from Emailify. The other thing that we can do is now assign this to a marketing campaign. For example, if we go to the campaigns page in Brevo and open that up, I've got this draft campaign down here, which doesn't yet have a design associated with it. What I can do is click on that test campaign, jump into the edit page, go down to the design step, click on this little three dots icon, and go to reset design. Just going to click yes to confirm that I want to get rid of whatever design was there, then I'm going to click on start designing.

This is what will usually come up the first time you create the campaign. Just click on start designing, go to my templates, and then go down to the template that you want to use. In this case, I'm just going to click use template on the example template that we just uploaded. That's going to select that template as my campaign template.

The cool thing about that is we can then preview it. If you want to click on preview and test, you can send a test email to your own email address or a recipient on your mailing list. You'll have a mailing list that you've selected, and you can select a recipient and send them a test. That can be really helpful as well if you want to see what the dynamic content looks like, if you've added any Dynamic tags like a hello tag that populates someone's first name. You'll be able to see what that looks like when you send out a test as well.

That's basically what it looks like. That's the quickest way to get your email from Figma into the Brevo platform if you're using that to send out your HTML emails. This is going to be a really quick way of uploading your templates directly from Figma into Brevo. I'll leave it there for today. I just wanted to keep that really quick to show you what that new integration looks like if you're a Brevo user. Hopefully, that helps you and your team's workflow. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export HTML emails from Figma to SendPulse using Emailify
date: 2023-07-12T00:00:00.000Z
---

# How to export HTML emails from Figma to SendPulse using Emailify



#### Video Transcript

Today, I'm going to be showing you how to automatically upload your HTML email designs from Figma into the SendPulse platform using the Emailify Figma plugin. 

To get started, all we need to do is go to your Figma file. If you click on the little "Resources" icon and search for "Emailify" under the "Plugins" tab, if you just click on the Emailify item, you'll be able to run the Figma plugin by either clicking on this run button here. Or, I'd recommend clicking on this little more options icon here and clicking save. That's just going to save it to your Figma plugins list for easy access later. So, I've already done that.

Now, I'm going to go to my canvas, right-click anywhere, go down to "Plugins," then go down to "Saved plugins," and click on "Emailify." That's just going to run the Figma plugin we saved a second ago. If you're new to the Figma plugin, the way that it works is it basically helps you design emails in Figma that you can then export to HTML automatically without having to do any coding or anything like that.

I'm just going to create a really quick email container. I'm just going to add that to my page, and I'm just going to add a couple of components just to really quickly spin up a new email. I'm not going to be going through all of the design features and all of the ways you can customize the emails in this Figma tutorial. If you want to get a bit more of a deep dive into that, you can follow along with some other Figma tutorials on the YouTube channel. But for today, I'm just going to keep it really simple and assume you've already got your template designed for uploading into SendPulse.

The last thing I'm going to do with this really quick template is just go to the "Footage" tab, and I'm just going to find the SendPulse item. So, there's a "SendPulse" item down here. If you click on that, that will basically add a predefined footer that you can obviously customize, but it comes with the unsubscribe link already pre-filled. So, if we go to the link here, you can see that it's got the unsubscribe tag. This is going to automatically populate that unsubscribe link in your email, which you're going to want to have in there just to make it a valid email that can be sent out with the unsubscribe link.

Now that we've got our email designed, we can quickly preview that using the preview button here. That's just going to give us a real HTML preview of what that's going to look like. As I said, you can customize this further for mobile and desktop, but I won't be covering that in this Figma tutorial.

Now that we've got our email the way that we want in HTML, we can now upload this automatically into SendPulse by clicking on the "Export HTML" button here and then changing the option here from HTML email and scrolling down to the platform Integrations grouping and finding the SendPulse option. So, I can see I've got SendPulse here. When you click on that, it changes some of the options down here. It's basically asking for the API ID and secret from SendPulse.

If you just go ahead and click on that link there, if you're already logged into your account, which I am, it's going to open up this page here, which is the account settings page, and you'll automatically be directed to this API tab. So, what you want to do is you want to click on the little copy icon here for the ID first. We'll grab the ID from SendPulse and paste it into the ID field here in Emailify. Then, we're going to do the same thing for the secret. I'm going to grab the secret, just click on the copy button, and jump back into Emailify and paste that in there as well. Once you've got those two pasted in there, you'll see that the button becomes available to upload to SendPulse.

It's also worth adding a subject line. So, you might want to add a new subject here. I'll just do a new feature announcement as my subject. I'm just going to basically click on the "Upload to SendPulse" button now. If I go ahead and click on that, that's going to generate all the HTML automatically for me. It's going to upload the images, and then it's going to upload that template automatically into my SendPulse templates.

Once it finishes, you can see that it's saying that our SendPulse templates have been uploaded, and we can view them by going to this email templates page in our SendPulse account, provided that we're logged in under the personal tab. I've already got that link open here, so I'm just going to refresh that page, and hopefully, we'll see our template show up. So, there we go. We can see the template that we just uploaded. If we open that up a bit, you can see here the "Welcome to Jiro Hero" there, as we'd expect. That's just been uploaded a moment ago from Figma directly into SendPulse in our email templates.

Now that you've got that HTML template automatically uploaded into your SendPulse account, you can basically use that however you want. So, you can go down here, you can do things like create a campaign from that template. That's probably the most common thing you're going to do. If you need to, you can also edit the template, make a copy of it, put it into a different folder. So, if we click on "Edit Template," this should bring up an editor if you wanted to check out what the HTML actually looks like in here. So, you could do that. If you wanted to edit the content in line, you could obviously do that as well. You could change this to be "Welcome to our restaurant" instead or you could change any of this content here or any of these links and things like that. You can see here we've got our link unsubscribe URLs in there, as we'd expect. That's basically what all of that looks like there.

That's if you did want to make any changes in the template here. I'd recommend doing it in Figma ideally and then re-uploading the template if you need to make content or graphic changes, just so it's a bit more reliable in case the SendPulse editor does something weird with the HTML. But that option is there if you wanted to edit the template after it's sent to SendPulse.

That's basically it; I just want to keep this really simple. If you are using the SendPulse email marketing platform and wanted to automatically get your HTML emails out of Figma that you've designed with Emailify up into your templates list and SendPulse, this is going to be a really quick way of going about it, just using the SendPulse API and the Emailify-SendPulse integration.

Yeah, I think we'll leave it there for today and keep it a really short one. Hopefully, that helps you or your team. If you're SendPulse users, feel free to give this new Emailify upload option a try. And as always, thank you for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: article
title: Company Flow
date: 2023-07-04T00:00:00.000Z
---

# Company Flow



As with the last mid-year update, this [Company Flow](https://www.youtube.com/watch?v=53DcVyXe5lFKpc) update also falls on July 4th. Even though Hypermatic is based in Australia, and not the United States (or Japan, as some seem to think, based on the design of this website), I do like the idea of doing these mid-year updates on Independence Day, and re-focusing it on continuing to declare our independence from legacy design/development workflows.

### First half of 2023 — tl;dr

The start of the year was kicked off with soft-launching (this is the first time it has actually been posted about at all so far) a brand new Figma plugin called [Weblify](/weblify), which has been in development for quite a while, and it seemed like it would just be better to ship a very stripped down version of what the plugin will eventually become, and launch it with the most basic functionality of allowing anyone to inspect their Figma layers as code (HTML, React, Vue etc).

Compared with the more chaotic and uncertain [first half of 2022](/articles/strictly-business), the first 6 months of 2023 have been far more focused, with the main goal of just increasing the throughput of shipping as many useful product features, updates and fixes as possible; lots of customer requests or things that have been on the todo list for a while have now been shipped.

The momentum that gets generated by shipping lots of stuff tends to build on itself and lead to even more velocity. I think that momentum is one of the more underrated things when working on anything, and once you've lost it, it can be very difficult to get back; knowing that, I think being extra vigilant of ensuring momentum stays high should always be an important focus.

It's also important to balance high throughput of small to medium sized tasks with longer-term projects that can't be completed within a few days or a week, so the second half of 2023 will be less focused on raw throughput of shipping things, and more concentrated on tackling a smaller number of larger, significant features or updates that will create much higher value to every customer using them.

### Plugin update highlights in 2023 (so far)

There are multiple updates and small fixes shipped to multiple Figma plugins on a daily basis, but here are some cool highlights from the first half of 2023:

- Added [Word Doc support](https://x.com/hypermatic/status/1670239945146134528) to CopyDoc
- Added [layer Styles support](https://x.com/hypermatic/status/1667743541676867584) to CopyDoc
- Added [layer Renaming support](https://x.com/hypermatic/status/1666328486662000640) to CopyDoc 
- Added [markdown support](https://x.com/hypermatic/status/1665877105354342400) to CopyDoc
- Added [Jivox export option](https://x.com/hypermatic/status/1664071346475892736?s=20) to Bannerify
- Added [presentation analytics](https://x.com/hypermatic/status/1662985798646665218?s=20) to Pitchdeck
- Added [original image fill exports](https://x.com/hypermatic/status/1659398348460429314?s=20) to TinyImage
- Added [Pardot integration](https://x.com/hypermatic/status/1657910446777839618?s=20) to Emailify
- Added [dark mode previews](https://x.com/hypermatic/status/1657576673347518470?s=20) to Emailify
- Added [Salesforce Marketing Cloud integration](https://x.com/hypermatic/status/1656858913604767746?s=20) to Emailify
- Added [text link hovers](https://x.com/hypermatic/status/1656132235094016001?s=20) to Emailify
- Added [Canva embeds](https://x.com/hypermatic/status/1655716295235760130?s=20) to Pitchdeck
- Added [button hovers](https://x.com/hypermatic/status/1655344806875512832?s=20) to Emailify
- Added [iFrame website embeds](https://x.com/hypermatic/status/1655043724064464896?s=20) to Pitchdeck
- Added [custom component categories](https://x.com/hypermatic/status/1654701661900935170?s=20) to Emailify
- Added [2-way hover effect transitions](https://x.com/hypermatic/status/1653900828821032960?s=20) to Bannerify
- Added [custom component libraries](https://x.com/hypermatic/status/1651120706929983488?s=20) to Emailify
- Added [wireframe mode previews](https://x.com/hypermatic/status/1647795287552053248?s=20) to Emailify
- Added [cubic-bezier easing](https://x.com/hypermatic/status/1646378828158357504?s=20) to Bannerify
- Added [responsive display ad exports](https://x.com/hypermatic/status/1645201713715113984?s=20) to Bannerify
- Added [PDF preview exports](https://x.com/hypermatic/status/1644829932797988864?s=20) to Emailify
- Added [Netlify preview links](https://x.com/hypermatic/status/1644102084667777024?s=20) to Emailify
- Added [automatic page numbering](https://x.com/hypermatic/status/1643144168083161088?s=20) to Pitchdeck
- Added [Netlify preview links](https://x.com/hypermatic/status/1642039025996554241?s=20) to Bannerify
- Added [text bullet lists for PPTX exports](https://x.com/hypermatic/status/1640919022861701121?s=20) to Pitchdeck
- Added [custom code block injection](https://x.com/hypermatic/status/1640512181996511232?s=20) to Bannerify
- Added [Mailgun integration](https://x.com/hypermatic/status/1639798909932568577?s=20) to Emailify
- Added [optimized SVG imports](https://x.com/hypermatic/status/1638318891196891137?s=20) to Convertify
- Added [Adobe Illustrator to Figma imports](https://x.com/hypermatic/status/1636148924082950146?s=20) to Convertify
- Added [scrollable slides](https://x.com/hypermatic/status/1635859043318390785?s=20) to Pitchdeck
- Added [PDF to Figma imports](https://x.com/hypermatic/status/1635509998028722176?s=20) to Convertify
- Added [Figma prototype embeds](https://x.com/hypermatic/status/1632582192089157632?s=20) to Pitchdeck
- Added [mobile hamburger menus](https://x.com/hypermatic/status/1629954010680823809?s=20) to Emailify
- Added [video sync from spreadsheets](https://x.com/hypermatic/status/1628979004807204864?s=20) to CopyDoc
- Added [custom webhook exports](https://x.com/hypermatic/status/1626018328044277760?s=20) to Emailify
- Added [Figma prototype links in PDF exports](https://x.com/hypermatic/status/1623871454742982660?s=20) to Pitchdeck 
- Added [custom icon bullet lists](https://x.com/hypermatic/status/1623530710601695232?s=20) to Emailify
- Added [local image file sync from spreadsheet](https://x.com/hypermatic/status/1623131791027744769?s=20) to CopyDoc
- Added [link outlines toggle for PDF exports](https://x.com/hypermatic/status/1622381632866095104?s=20) to TinyImage
- Added [SVG favicons](https://x.com/hypermatic/status/1618483155060817920?s=20) to Favvy
- Added [custom color profiles](https://x.com/hypermatic/status/1616938031340216321?s=20) to TinyImage
- Added [dark mode support for Figma plugin UI](https://x.com/hypermatic/status/1615187068069777408?s=20) to All Plugins

### The (AI) elephant in the room

Since writing that "<s>software</s> AI is eating <s>the world</s> design" in [the last 2022 end of year update](/articles/from-two-to-three), seemingly every established company and startup are rushing to either pivot to AI or add-on AI in some form, often just as an API call to OpenAI to have ChatGPT sit behind their own product UI.

> “Whenever you find yourself on the side of the majority, it is time to pause and reflect.” - Mark Twain.

I'm a huge believer in this breakthrough technology, but at the same time, I don't think that it's the correct time for Hypermatic to drop everything to join the mad rush into mashing "AI" into every product; and there are a few reasons why:

First of all, Hypermatic is a private, self-funded startup, without any investors or other stakeholders; this means that's there is zero pressure or incentive to try and artificially (or actually) increase the valuation by mentioning "AI" as many times as possible in investor updates, pitches for new rounds of funding, or public product announcements.

Second, and more importantly, is that it's still _super_ early. If the strategy a year ago had been to drop everything and start training bespoke models for design, or content, or anything like that, it's likely that any innovation or moat would have already been wiped out 12 months later by what's available as open-source or consumable APIs (ChatGPT, etc).

Third, I believe that the cost and barrier to leveraging this technology is trending down to zero, and will also be broadly available in almost every application that we use today as native functionality (where "AI" is never mentioned or thought of when using it). If lots of this is going native, then doubling up on that work prematurely seems like it could come back to bite later down the track.

By designing certain features or products in a way that sees all of these benefits coming down the track, and lays the groundwork to benefit from them, without going all-in right away, I think that over the long-term, it will lead to better products that are more efficient to build out and operate in the medium-term just by stepping back and waiting for the dust to settle.

So much venture capital is being poured into any startup with "AI" in their deck, so with all these smart teams working in that space, I'm very optimistic that this technology is going to get way better, more accessible and more cost effective over time; and that seems like a better time to start thoughtfully adopting things that can solve real problems in a new way, rather than just bolting on a ChatGPT API because it's possible (but not super useful or the right solution).

### Looking ahead

As mentioned above, using the ([Rocks, Pebbles and Sand](https://longform.asmartbear.com/rocks-pebbles-sand/)) analogy for work, if the first half of 2023 was focused on "sand", then the second half of the year will be much more focused on "rocks" and "pebbles".

Half way through the 3rd year into this mission, it feels like a really good foundation is there across the board for all the products now, but it's always day zero and there's still so much more to be done; it's definitely still a marathon and the focus is firmly on the long term, while also keeping the momentum at a pace where it always feels like sprinting day-to-day.

After planning out the next 3-6 months recently, I'm excited for Hypermatic to drop some really cool and useful bigger updates for some of the most popular products between now and the end of the year, while also doubling down on the long road ahead of taking [Weblify](/weblify) to its final vision (as a worthy cousin to [Emailify](/emailify)) for easily designing and building things for the web.

Anyway... back to work! See you in 6 months (for the end of year update).

---

---
type: tutorial
title: How to send yourself tests of HTML emails from Figma with PutsMail using Emailify
date: 2023-07-04T00:00:00.000Z
---

# How to send yourself tests of HTML emails from Figma with PutsMail using Emailify



#### Video Transcript

Today, I'm going to be showing you how to send yourself HTML email tests to your own email address using the Emailify Figma plugin and the PutsMail.com service.

To get started, all we need to do is go to your Figma file. If you click on the little resources icon up here and search for "Emailify," and if you go to the "Plugins" tab and click on the Emailify item, you can run the Figma plugin by clicking on this "Run" button here.

Or, I'd recommend clicking on this little "More options" icon here and clicking save. That's just going to make it really easy to run the Figma plugin from your saved Figma plugins list later. I've already done that, so I'm going to go to my Figma campus and right-click anywhere, just go down to "Plugins," and then go down to "Saved plugins." If you click on the Emailify item, that's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is it basically helps you design HTML emails in Figma, which you can then customize and change the content styles of before exporting it to production-ready HTML automatically.

I'm not going to be going through all of the design features today. I'm going to be assuming that you've already gotten yourself familiar with those, and you've got the email design the way that you want.

If you're new to the Figma plugin, you can check out some other Figma tutorials on the YouTube channel, which will go into depth about how to use the design tools and create and customize your emails the way that you want to.

For today, let's just assume that you've already got your email designed, and now you want to send a test email to yourself of the exported HTML. So, let's go ahead and do that, and we'll start by exporting the email from Figma to HTML.

I've got my email here. I'm just going to click on the export HTML button in the Figma plugin. And once you've clicked on that, just make sure the upload hosted images URL option is selected, and then click on the export to HTML button here. And once that finishes generating, we can download that to our computer.

Once it finishes uploading the images, you'll get a little button down here that says download your zip file. So, I'm going to click on that now. And if you save that to your desktop and just unzip that file, and then if you open up that folder, you'll see that you've got a folder called the same name as your Figma frame here. And inside of that folder, there'll be an index.html file, which is your HTML email.

I'm going to open that up in my code editor. I'm just going to drag and drop that into here. And this is basically all the exported, automatically generated HTML from our email. And I'm going to copy that to my clipboard for now. So, I'm just going to select all of that and copy it.

And then what I'm going to do is go to my browser, and I'm just going to go to PutsMail.com. So that's p u t s m a i l.com. And this is a service that's free. It allows you to send tests of your HTML emails to yourself so you can see what they look like in your own email inbox or on your mobile or on your desktop email client.

To get started, you just have to create a new account. It's totally free. You can just sign up for a PutsMail account. And once you've done that and you've signed in, you can then click on this create a new test email button. So, I'm going to click on that now.

And then once that page loads, you're going to be able to drop in your HTML, add a subject line, and select the email addresses or input the email addresses that you want to send the HTML test to.

First of all, I'm just going to drop in my HTML. So, I've just pasted that into the body there. I'm just going to make that subject line be "test" for my email. I'm just going to paste in my own email. So in this case, I'm just going to do one address. You can actually add more addresses if you want to send it to multiple people or multiple inboxes of your own. You can totally do that by clicking on this button here. But for today, I'm just going to be sending one HTML email to myself, which is going to be going to a Gmail account.

And then when you scroll down here, you want to make sure to not check this checkbox that says "move my CSS inline." Emailify automatically inlines all of the content. And what that means is that you can see down here that the table cells and the HTML elements themselves already have inline styles applied to them. So, you don't need to check that box. In fact, it'll probably cause issues if you do. So just leave that as is. And what that means is it's going to take exactly what's in our email here and it's going to send that directly to our email address without modifying it at all.

This is really helpful for troubleshooting, especially if you're using another email platform like MailChimp or Klaviyo or something like that. And if you're seeing issues with that platform, it's always good to run it through PutsMail.com as more of a double-check, just to make sure that it's not the email platform itself messing about with your HTML. PutsMail is going to make sure that your HTML is unmodified, so you get a really accurate view of how it should look.

Once you've done all that, just go ahead and click on the "I'm not a robot" thing just to make sure that it sends. And then once that's selected, just click on "send email," and it's going to shoot off that email, that HTML, to the address that you specified or addresses that you specified. And once it finishes, it'll give you a little success message, and it's saying your test is on its way.

Now what you want to do is just go back to your inbox. So log into your email client and switch into that. So, I've just switched into my Gmail inbox, and I can see that the test that we just sent ourselves is right here. You can see there's a test from Litmus PutsMail. So, if I click on that result, we can see here that it's basically loaded up the HTML as we'd expect.

This is all of the real HTML that we exported from Figma, and we're able to test this directly in our Gmail inbox using the Gmail web app. You could obviously test this in the Gmail mobile app as well if you're using that. Or if you're sending this to a totally different email service, you would obviously log into that platform. Or if it's the Outlook client or something like that, you could see exactly what this looks like. You can click on any of the buttons, make sure everything's working as you'd expect. And that's going to be a really nice way of just testing the email to make sure that it's looking good on your own client before you start testing around other clients as well, maybe using the Litmus.com platform to do some more robust testing.

This is a really, really easy way that I always do personally when I'm trying to test an email from Figma. So, if I'm exporting my emails from Figma to HTML using Emailify, I will send a test to myself sometimes for troubleshooting reasons, just using PutsMail, just to rule out any issues with email clients that might be mangling the code. So just using that as a really reliable way of sending unmodified HTML, I think, is a really good practice to get into if you are troubleshooting some weird issues with email platforms, just to rule out that the email platform isn't the cause of the problem to begin with. This is a really good way of validating that.

We'll leave it there for today. I just wanted to keep this really short and simple. If you've been wondering how to send yourself HTML email tests, using PutsMail is a really good way of doing that, a really quick way of getting your emails out of Figma into HTML and doing a really quick test just as a double-check to see what it looks like right out of the gate.

Hopefully, that's going to be helpful for your own workflows and also if you're troubleshooting, as I mentioned before. So yeah, we'll leave it there for today. Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to test HTML emails in Outlook with exports from Figma using Emailify
date: 2023-07-03T00:00:00.000Z
---

# How to test HTML emails in Outlook with exports from Figma using Emailify



#### Video Transcript

Today, I'm going to be showing you how to automatically test your HTML email exports from Figma in different versions of Microsoft Outlook using the Emailify Figma plugin and the Litmus.com platform.

The first thing we have to do is just go to your Figma file and click on the little "Resources" icon at the top. If you search for "Emailify" and under the "Plugins" tab, click on the Emailify item. You can run the Figma plugin by either clicking on the "Run" button here, or I'd recommend clicking on this little "More options" icon here and clicking save. That'll save it to your Figma plugins list for easy access later.

I've already gone ahead and done that, so I'm going to go to my canvas, right-click anywhere, and go down to "Plugins". Then, I'm going to go down to "Saved plugins" and click on the Emailify item. That's just going to run the Figma plugin that we just saved a second ago.

If you're new to the Figma plugin, the way that it works is it basically helps you to design HTML emails in Figma that you can customize and then export to production-ready HTML directly from the Figma plugin.

I'm just going to assume you've already got your design set up as you want. I'm not going to be going through that in this tutorial. But if you're new to the Figma plugin, you might want to check out some other tutorials on the channel to go through all the design steps and customizations. I'm just going to assume you've already got the email ready to go and you just want to test the HTML in different versions of Microsoft Outlook.

Let's go ahead and do that now. I'm just going to click on the export HTML button in the Figma plugin. I'm going to click on the export HTML button again, making sure that I've got the upload host image URLs selected. That's just going to allow us to automatically have those images included in the HTML. So, I'm going to click on export to HTML.

Once this finishes exporting, I'm going to save this to my desktop. So, I'm going to click on the "Download your zip file" button, save it to my desktop. And if I now unzip that folder, we can see here that our email is inside this folder here with the same name as our frame.

Basically, I'm going to take this HTML file, which is our HTML email, and just drop it into a code editor. So, I'm just going to drop it into here. And that's going to allow us to copy-paste the HTML into Litmus.

I'm just going to copy all of the content from my HTML file. And then I'm going to go to my browser. And I'm already logged into Litmus.com. And I'm basically going to click on the "Create new" button up here under the test tab.

Under the test tab, I'm going to click on "Create new". And then, I'm just going to call this Outlook tests and click on the test selection here. Where it says "Build or test", we want to click on "Test". Then I'm going to click "Bring in your email".

There's a couple of ways to do this. Today, we're just going to be pasting in the HTML. But you can also send an email to this special address if you're sending it from an email service provider like MailChimp or something like that. If you want to send it from there, you definitely can. But for today, I'm just going to be doing a raw test just with the HTML that we exported from Figma by pasting it in.

I'm going to go down here and click on "View more ways to create an email". And if you click on that, it's going to give you this text area here that you can paste your code into. So, I'm going to paste that code that we copied from our clipboard. And here, I'm just going to call this test as the subject line. And then I'm going to click "Done".

Once you click "Done", it's going to upload this HTML into Litmus.com. And it's going to run your email through a bunch of different email clients to show you how it's actually going to render on those email clients once that gets sent out.

These aren't emulated previews. These are totally real previews that are being run on the Litmus.com servers behind the scenes. And they're going to give you screenshots of what that actually looks like on all these different operating systems and on all these different versions of Microsoft Outlook.

You can see here it's basically loading up a bunch of previews for different versions of Microsoft Outlook. We've got really old ones like 2007 and 2010, and also ones like 2016 on Mac and on Windows. And we're also getting the dark mode version on 2021 and Outlook 2019. So, you can see that we've got a whole bunch of different versions here, but we've also got access to view more as well.

If you want to test this on more specific Outlook versions, you can basically click on this "Choose email clients" button up here. And that will bring up a bunch of options that you can choose under the Outlook category. So, let's say we only want to test this on Outlook. We can basically clear all of the desktop clients. And just under the Outlook section here, we can either click this "Select all" button. And that'll select literally every version of Outlook that's available on Litmus. So, we can definitely do that. Or you can also go down here and select some web-based ones. So, if you want to test this on web-based versions of Outlook, you can do that as well. You can test it on Office 365. You can test it on Outlook.com. So, we can select those. And then, we can also test the mobile version. So, if you want to do mobile versions of Outlook, you can select those in here. You can do Outlook on iOS. We can unselect the Apple Mail ones in this case. And that'll basically give us a full suite of Outlook clients on desktop and mobile that we can check.

Now we can click on "Run previews". And this is going to take the HTML that we already uploaded a minute ago. And it's going to rerun that through the additional Outlook clients that we just selected in Litmus. This might take a little while just because there are quite a lot of clients, and the rendering process can take some time for all of these different clients on Outlook using Litmus. But you're basically going to get a full test suite of how your HTML that was exported from Figma is going to look across every version of Outlook that you can imagine or every version that's supported in the Litmus platform.

You can see here we've got the Outlook.com and Office 365 web-based previews. So, these are the web client ones we can see what they look like. You can see here that the preview is loaded up, and we've got all of our content in here. We've got rounded corners, which are going to be a bit different from the older versions of Outlook, as we'll see up here. You can see that these ones basically just have square corners because the Border radius property isn't supported in older versions of Outlook. So, if we load up this preview here, you can see that the corner radius is just square because that's what it falls back to. But the rest of the content is looking nice. So, you're going to get that a few times if you're wondering why the Border radius isn't supported in Outlook and maybe a few other small things. That's going to be why.

We can also see dark mode previews. We've got a bunch of different clients that do support dark mode on Outlook, so you can preview those as well. But yeah, this is basically the fundamental idea. You just take your HTML that was exported from Figma. You just open that up in either a code editor, or you can open it in the browser and just view source and copy that into the Litmus platform directly. And then, it's basically up to you to pick which email clients for Microsoft Outlook you're supporting or you're interested in seeing how they render. And Litmus will take care of all of the heavy lifting and let you preview that HTML in Outlook, any version that you want.

I'll leave it there for today. I hope that's been helpful if you've been wondering how to test your HTML emails in different versions of Microsoft Outlook. Litmus is a really, really robust way of doing that. So, I hope it helps with your testing workflow and QA workflow for your HTML emails. Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to test HTML emails in dark mode with exports from Figma using Emailify
date: 2023-07-02T00:00:00.000Z
---

# How to test HTML emails in dark mode with exports from Figma using Emailify



#### Video Transcript

Today, I'm going to be showing you how to automatically test your HTML emails exported from Figma in dark mode using the Emailify Figma plugin and the Litmus.com platform.

To get started, all we need to do is go to our Figma file. If you click on the little "Resources" icon up here, you can search for the word "Emailify". Under the "Plugins" tab, you'll see the Emailify item pop-up. All you need to do to run it is just click on that item and either click on this "run" button down here or you can click on this "more options" icon here, which I'd recommend. Just click on the save icon here, and that'll allow you to save it to your Figma plugins list for easy access later.

I've already done that. I'm going to go to my canvas and just right-click anywhere. Go down to plugins, then go down to saved plugins, and click on the Emailify item. That's just going to run the Figma plugin that we saved a second ago.

If you're new to the Figma plugin, the way that it works is it basically helps you to design HTML emails inside of Figma that you can then customize the content and design of in Figma using the normal Figma styling tools you're used to.

Once you've done that, you can then export that to production-ready HTML from the Figma plugin, which we'll do in a second. We'll be able to test what that looks like in dark mode on some different email clients.

I'm going to assume that you've already got your design set up as you want. I'm not going to go through all the design tools in this tutorial. If you want to go through those or if you're new to the Figma plugin, I'd recommend checking out some of the tutorials on the YouTube channel.

But for today, we're just going to be exporting this HTML email from Figma and testing it out in dark mode using Litmus. So, I'm going to do that now. I'm just going to click on this export HTML button up here. Then I'm just going to make sure the upload hosted image URLs toggle is enabled here, and then I'm going to click on export to HTML.

Once that finishes generating the HTML for us, we're going to be able to download that to our desktop. We can do that by clicking on the little "download your zip file" button. So, I'm going to click that now and I'm going to download that to my desktop.

I'm going to open up the zip file. If you open up that folder, you'll see you've got this little test email folder. That's just exported the email from here. So, we can see the test email frame that we've got in Figma. That's created this folder here.

What we want to do is take this index.html file inside that folder, and we basically want to open that up inside of a code editor. So, I'm just going to drag this into VS Code. You can also open that up in the browser and view source that way, but for today, I'm just going to be copying the code straight from this editor here.

I'm going to copy-paste all of that HTML code. Then I'm going to go to my browser and I'm going to go to Litmus.com. I'm going to use that service to test out this HTML in dark mode.

What I can do is I can go down here under the test tab. If you click on "test" in Litmus, and then click on the "create new" button down here. You basically just want to give this a name. So, I'm just going to call it "dark mode test". Make sure you've got the test option selected down here. Instead of build, you want to click on test. Then click on "bring in your email".

Once that loads up, there's a couple of different ways it's going to allow us to bring in our HTML. We can either send the HTML from a different platform to this special address here, and that will get loaded into Litmus. But for today, we're also just going to be focusing on pasting in the HTML instead.

What you need to do is go down here where it says "view more ways to create an email". You want to click on that little link. That's going to let us paste our email that we just copied from our code editor into this little box down here. Click on that input and click paste. That's going to paste in the HTML that we just copied. Then you can just put in whatever you want for the subject line and click on "done".

Once you click "done", it's going to take all of that HTML that we just pasted in. It's going to upload it to Litmus, and it's going to allow us to run that HTML email against different email clients to show how it's really going to render the HTML email once it lands in people's inboxes.

By default, it's going to pick a bunch of different email clients for you that it broadly selects. You're going to get a bunch of different Outlook clients. You're going to get some mobile clients and some web-based clients. But for today, we're mostly interested in dark mode.

What we can actually do is customize the clients by clicking on this little "choose email clients" button. If you click on that, you can now go in and manually select all of these different items. We can select Apple Mail on dark mode and light mode. We can go down to Outlook and we can select the document options there too. We can do Outlook 2021 or Office 365. We can do those in dark mode, and you can select that on Mac and Windows. You can pick a bunch of different options there.

We can also go down to our mobile and tablet options. So, we might want to do Gmail. We'll do the Gmail app on Android in light and dark mode just to compare them. Then we can also go down to our iOS options. We can do Gmail in dark mode and light mode, and also iOS mail. We can do iOS mail on iPhone 14. We'll do it in dark mode and light mode.

I think that's pretty good for now. It's a pretty broad selection. So, let's go ahead and run that. We can click on "run previews". That's basically going to take the HTML that we just uploaded and rerun those previews.

As I mentioned, these are real virtual machines or real computers that are being rendered. These aren't emulated. So, you're going to get a really accurate look at what these would look like if they're going to be sent to somebody's inbox that's running these particular clients.

In this case, it's going to be really handy for testing our HTML emails in dark mode. Dark mode is extremely difficult to design for based on the fact that these email clients all have their own way of handling it. They'll basically inject their own CSS styles on top of your HTML, overriding anything that you've designed. They basically go and apply whatever styles they think are the best for your design, even if that's often not necessarily the case.

Testing your HTML email in dark mode is really crucial if you want to understand how your HTML emails are going to get rendered in different email clients when they enable dark mode.

We can see here on the Gmail app, we'll just open up that one on iOS. And you can see here that it's looking good. They've changed the header, obviously, so it's a slightly darker header with lighter links. But the text is looking good. They've just swapped that out to be lighter text on a darker background. So overall, this isn't looking too bad.

If you have more complicated blocks with different color backgrounds and things like that, this can get really out there sometimes. These applications can really go to town on the styles that they inject. But because this is quite a simple design, it's actually looking really good.

And I think that's one of the key tips for designing with dark mode. You really want to kind of lean into the changes that these clients are going to make rather than trying to fight them. So, if you try to basically make it look exactly like this and keep those backgrounds and keep those text colors, it's going to be extremely difficult because so few email clients actually support doing dark mode overrides. You can do those using Emailify. So, for example, if you click on one of these elements and click on the HTML and mobile settings button up here, you can actually drop in background colors and text colors to override those.

But it's really important to know that only is supported in a handful of clients. So basically just Apple iOS mail on mobile and also the Mac OS mail app. They're really the two big ones that'll support these properties. But for the other clients, you're pretty much going to be stuck with whatever they decide to do.

As I said, it's really important to go through and see actually how these are going to get rendered. So, you can see down here we've got our Outlook one as well. So, we've got Outlook 2021 in dark mode, and that's basically going to render it on the desktop version. Again, we can see it's fairly similar to the Gmail version. It's kind of knocked out this color at the back. It's inverted this to a darker gray. So not as dark as the Gmail one, but it's inverted the text here as well. Very similar to what Gmail did overall. We can also see what that looks like across other versions as well.

But if we also then go into the Office 365 dark mode, you can see that that's also looking a little bit different too. If we load that up, you can see that the header is actually much darker. There's barely any background color difference there at all. The background of the overall email is essentially the same as the body. So before, in the other preview that we just looked at, it was actually quite different between the two. But in this case, Office 365 is just basically taking all of that color out and making it all the same. And it's changing this footer and header area down here to be a very, very slightly different color than the background.

Again, it can be very unpredictable to know what these clients are going to do. But again, all the more reason to test it in something like Litmus, as we're doing now, just to see how that is actually going to look once it gets into some of these clients and see how they handle them.

I'll leave it there for today. I just wanted to keep that really simple. You're welcome to go through each of these in more detail in your own tests. I don't think you'll be too interested in me going through every single client. But this is a really good way of testing your emails from Figma or testing any HTML emails in dark mode using the Litmus.com platform and getting a really accurate look at how this is going to render across different clients when they're in dark mode.

We'll leave it there for today. Thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to test HTML emails in different clients with exports from Figma using Emailify
date: 2023-07-02T00:00:00.000Z
---

# How to test HTML emails in different clients with exports from Figma using Emailify



#### Video Transcript

Today, I'm going to be showing you how to automatically test your HTML emails across different email clients using the Emailify Figma plugin and the Litmus platform.

To get started, all we need to do is go to your Figma file and click on the little "Resources" icon at the top here. If you click on that and search for "Emailify" under the "Plugins" tab, just click on the Emailify result. You can run the Figma plugin by either clicking this run button here, or I'd recommend clicking on this little more options icon here and clicking save. That's going to save it to your Figma plugins list for easy access later.

I've already gone ahead and done that, so I'm going to go to my canvas, right-click anywhere, go down to "Plugins", then go down to "Saved plugins", and click on the Emailify item. That's just going to run the Figma plugin that we saved a second ago.

If you're new to this Figma plugin, the way that it works is it basically helps you design HTML emails directly in Figma, which you can then export out to production-ready HTML automatically. That's what we're going to be focusing on today. I'm going to assume that you've already got your email designed using the Figma plugin and customized it in Figma. If you are new to the Figma plugin, you might want to check out a couple of other tutorials first. But for today, I'm just going to be assuming that you've already got your email set up the way that you want.

For example, you might have some more content, so I'm just going to throw this little image block in there. Now, we can basically export this to HTML to test in Litmus. I'm just going to click on the "Export HTML" button up in the Figma plugin. Then, I'm just going to make sure that "Upload hosted image URLs" is enabled. That's going to automatically upload the images for me. Then, I'm just going to click on "Export to HTML," and that's going to automatically generate the HTML from our design and export it into an HTML email that we're going to be able to test.

I'm just going to click on "Download your zip file." Then, I'm going to click on "Save" to save that to my desktop. If I open up that zip file, you can see here that I've got my HTML email in this folder here.

What I basically want to do is take that HTML, and I'm going to be pasting that into the Litmus platform. Litmus.com is a platform that allows you to automatically test your HTML emails across different email clients and see how they render in different clients like Outlook, Gmail, and other mobile devices.

All I need to do is basically go to my folder, take my HTML file, and get the HTML out of there. I'm just going to open up my code editor and drag and drop that HTML file in there. Then, I'm going to select all and copy that to my clipboard. In Litmus, I'm just going to click on this "Create New" button. I'm going to call this test email from Figma. Then, I'm going to select this "Tests" option up here and click on the "Bring in your email" button.

There are a couple of ways that you can bring in the email. As I mentioned, we're going to be doing it by pasting in the HTML. But the other way you can do it, if you're sending this test from an email service provider, is they give you an email address that you can send an email to with your HTML email in it, and this will automatically get captured here. But for today, we're just going to do it a simpler way and click on this "More ways to create an email" button.

At the very bottom, just click on that, and that will allow you to paste in your HTML. I'm just going to paste in my HTML to the code block here. I'm just going to paste that, and you can see all of our code that we just copied is now in here. Then, you can also just put in a subject line. We're just going to call this one "Test." Click on "Done."

After you click "Done," it's basically going to upload the HTML email that we just exported from Figma into Litmus as a brand new test. It's going to go to this "Previews and QA" tab, and this is going to allow you to view the HTML email in a bunch of different email clients and test how they render across all these different clients.

You can see here it's slowly loading in all the previews. These are real previews of the emails rendering in real email clients. So, it gives you an accurate view of what this is actually going to look like on certain applications that you might not have on your computer.

We've got things like Outlook 2016 on Mac, Outlook 2016 on Windows, Office 365, dark mode Outlook, and also some mobile clients as well. We've got Outlook on iOS, the iOS mail apps, and then also some web-based apps as well. If we click on any of these previews, we can get a larger version of that screenshot. Again, these are being rendered in the real email clients, so these aren't emulated. These are actually tests that Litmus does behind the scenes to a real machine or a real computer using some of these apps or web platforms. It basically gives you a really accurate way of seeing how the email is going to look in all of these platforms.

It does sometimes take a little while to load up because it is quite intensive. I think to run all these tests, but if we open up one of these tasks and load up the full version, we should be able to see what they look like. So, in this case, we're just looking at a full screenshot of Outlook 2016 on macOS. We can scroll down here, see the whole email, everything that we designed in Figma over here has now been rendered, and we can see that it looks the same as it did in Figma on macOS in Outlook 2016, which is really good.

If we go back, we might want to open up that same email on Outlook 2016 for Windows. So, we can do that if you just click on the result, it's going to load up the screenshot again. In this case, we're looking at the full screenshot of Outlook 2016 on Windows 10. You'll notice it still looks really good, but there are obviously a few small differences. For example, Outlook doesn't support border radius, so you can see that the border radius on the button, which was working on the Mac Outlook version, isn't going to be rendered on the Outlook version for Windows. That's just one thing to keep in mind. Of course, there'll be a few other minor things that Outlook doesn't support. Obviously, Outlook is notoriously bad for emails in general. But this is at least going to give you a bit of an idea of what it's going to look like, and you can make any enhancements or changes based on that.

Again, we can see Office 365 in Chrome. If we scroll down on this screenshot, we can see that Office 365 is rendering it a bit better. We've got our border radius included this time, I guess because this is a browser-based application rather than the older sort of desktop application from 2016. So, it's going to support a few more of those more modern things.

This is basically what you want to be doing. You just want to go through these and check out what's looking good, what's not looking good. By default, all of the components that are designed from Emailify, all of these components here that are available, have been tested in Outlook and the other email clients in Litmus already. So, those should all be looking really good anyway. But it's always worth testing it in Litmus or a platform like Litmus anyway just to be 100% sure of what it's going to look like when it does get delivered. I'd always recommend running through that as well.

You can also change the email clients that you use. So, if you wanted to choose different email clients, you can select different specific versions of Outlook. You can break this down into other categories and select very specific versions of these different clients as well. Then, you just select those and click "Run Previews" again, and that will automatically rerun the HTML previews for those clients that you've selected.

That's basically it. I'll leave it there for today. I just wanted to show you a quick tutorial of how to get your HTML from Figma into Litmus to test your HTML emails on a bunch of different email clients automatically in a way that's going to be very accurate to see how they're going to render. Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to test HTML emails in Gmail with exports from Figma using Emailify
date: 2023-07-02T00:00:00.000Z
---

# How to test HTML emails in Gmail with exports from Figma using Emailify



#### Video Transcript

Today, I'm going to be showing you how to automatically test your HTML emails exported from Figma in Gmail on desktop and mobile using the Emailify Figma plugin and the Litmus.com platform. 

All we need to do to get started is just go to your Figma file and click on the little "Resources" icon up here. If you search for "Emailify" under the "Plugins" tab, click on the Emailify item. You can run the Figma plugin by either clicking on this "run" button here, or I'd recommend clicking on this little "more options" icon here and clicking save. That's going to let you run the Figma plugin easily from your Figma plugins list later. I've already gone ahead and done that, so I'm going to go to my canvas and just right-click anywhere, go down to "Plugins", go down to "Saved plugins", and then just click on the Emailify item. That's just going to run the Figma plugin that we just saved a second ago.

If you're new to the Figma plugin, the way that it works is it basically helps you design HTML emails in Figma that you can customize and style however you like. It provides a bunch of different design tools and starter components that you can use to do that. I'm not going to be going through all of those things in this tutorial. If you're new to the Figma plugin and want to get familiar with all the design tools and things like that, I'd recommend checking out the other videos on the YouTube channel.

For today, I'm just going to be assuming you've already got your design ready to go the way that you want, and now you just want to test that HTML in Gmail. So, we're going to do that now, and I'm going to start by exporting this email I've got designed to HTML. I'm going to click on "Export HTML" in the Figma plugin, then I'm just going to make sure that the "upload hosted images" option is selected, and then I'm going to click on the "export HTML" button up here. That's just going to generate this design into HTML that we can download.

I'm just going to click on the "download JavaScript file" button down here and download that to my desktop. If you open up this file and open up the folder, you'll see here that we've got our test email folder, which is the same name as our frame in Figma, and we've got our HTML file here, which is the one we're going to be testing in Gmail.

To open that up, you can just go to your code editor or you can open up that file in a browser and view the source. But either way, you basically want to copy all of the HTML in that exported file, and you want to put it into Litmus.com.

Litmus.com is a platform that allows you to test your HTML emails in all different kinds of email clients, including Gmail, which is what we're going to be focusing on today. So, in Litmus.com, if you go to the "test" tab up here and then click on the "create new" button over here, you can click on "create new." I'm just going to call this one "test Gmail example," and make sure that you click on this "test" button here. So, you've got an option of either "build" or "test." We're going to click on "test," and then we're going to click on "bring in your email," and that's going to allow us to enter our HTML that we just copied from the code editor.

You can basically go down here and click on "view more ways to create an email," and that's going to give you this text box here to paste your HTML. So, paste your HTML in this bottom text box here, and then you can just give it a subject line. So, I'm just going to say "test" again.

You do also have the option of sending the HTML to Litmus. So, if you've already got your HTML template from Figma in MailChimp or a platform like that, you can actually copy this email address here and send a test email to Litmus from your platform. But for today, I'm just going to be keeping it really simple and assume that you're basically going to be testing the email directly from the Figma export.

Now I've got our HTML pasted in there, I'm just going to click on "done," and that's going to upload this HTML block into Litmus. It's going to allow us to view that HTML on all different email clients to see how it renders. In particular, I'm going to be focusing on Gmail for today.

You can see here it's starting to load up some of the previews. By default, Litmus pre-selects a bunch of different popular email clients or a broad range of email clients that it recommends testing on. So, you're basically going to get this set of default clients the first time you run the test.

But we can go ahead and actually customize that for our use case today, which is really doubling down on testing it in Gmail. If you go ahead and click on this "choose email clients" button up here, what we're going to do is basically clear all these. So, I'm just going to click "clear all." I'm going to collapse these and just click "clear all" on all of them. That's just going to reset all of the selected email clients.

Now we can go through and actually pick which ones we want to test it on. So, in this case, I'm really just interested in testing our HTML in Gmail. So, what we can do is just select the Gmail option. I can do the Gmail app. I can do Gmail with IMAP. I can do Gmail on Android 8. I can do Gmail on Android 10. I can also do dark mode. So, we can basically select all the Gmail options that we want to use. In this case, I'm just going to select those ones for Android on mobile.

Then you can also go down to the iOS options. So, iOS, you can also do Gmail. So, I'm just going to do Gmail app on light and dark. So, I've got those two selected. And then what you can do finally is go down to web-based clients. If you click on "web-based" and then scroll down to Gmail and G Suite, so we can select Gmail in Chrome. We can select it on Edge, Firefox. We can do the same thing for G Suite. So, we can select those.

Once you've got those selected, you can basically click on the "run previews" button down here. That's going to take the HTML that we already uploaded, and it's going to rerun that HTML through all of those Gmail options that we just selected. It's going to render the real Gmail apps and the real Gmail web clients as they are. So, these aren't emulations. These are real computers that are running these behind the scenes on the Litmus.com servers. And it's going to give us an accurate look at what our HTML that we exported from Figma is going to look like when it actually gets sent to a Gmail device or a Gmail application.

You can see it's basically loading up all of these now. It can take a little while just to load them all because it is quite an intensive process behind the scenes. But once it loads, it's going to give you the option of viewing these in a larger modal. So, if we click on one of these options, so I'm just going to click this IMAP option down here, or maybe we can go to dark mode one first. If we click on Gmail for dark mode, so this is just running on Android 10, and you can see now that the preview is loaded, we can basically go through and scroll through this.

This is running on, as I said, Android 10 in the Gmail app with the system in dark mode. This is going to give you an accurate preview of what the content is actually going to look like when it's rendered on dark mode. So, you can get a sense of what that looks like here. And then if we go back, we can also see what it looks like in the web clients. So, we can basically go down to Gmail for web. So, we can run it in Chrome, and we can see here what that now looks like. This is just running in Gmail on a Chrome device or a Chrome browser, rather. And you can see here it's rendering the content as we'd expect. So, we've got our nice border radii there, all the text is looking really good, images looking good. So, that's overall looking really good in Gmail.

Again, you can go through G Suite, you can go through all the different browsers, you can go through all the different mobile apps. So, we can see what it looks like on iOS, on Android, in light and dark mode, etc. So, yeah, we can just open up the iOS one, see how that looks. So, we can see on iOS, it's looking quite good as well. It's just stacking all the content as we'd expect. And you'll notice that the fonts are rendering on iOS Gmail. So, they're looking really good. I think we've got Inter selected in that case. Some clients won't support that. So, ironically, the Gmail web version doesn't actually support Google fonts, but the Gmail app on iOS does actually support Google fonts, custom Google fonts. So, make of that what you will. But the fonts are looking really nice on iOS.

That's basically it. I'm not going to go through every single Gmail app instance and Gmail web client in the Litmus results. You can feel free to do that yourself in your own time. But I really just wanted to give you an example of how you can customize the Litmus test to just focus on Gmail if you're testing for Gmail, which is obviously a very popular email client. So, you really want to know what your HTML emails are going to look like across all of the Gmail clients on desktop and mobile. Then this is going to be a really easy way of doing it, just narrowing down all the Litmus clients as we went through before. And you'll be able to see what your HTML emails that were exported from Figma are going to look like on all of those different Gmail clients when the HTML finally ends up in their inbox.

We'll leave it there for today. Thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to test HTML emails on mobile with exports from Figma using Emailify
date: 2023-07-02T00:00:00.000Z
---

# How to test HTML emails on mobile with exports from Figma using Emailify



#### Video Transcript

Today, I'm going to be showing you how to automatically test your HTML emails exported from Figma in different mobile devices on different mobile email clients using the Emailify Figma plugin and the Litmus.com platform. 

To get started, all we need to do is go to our Figma file. If you click on the little "Resources" icon up here and just search for "Emailify," and if you click on the "Plugins" tab, and then click on the Emailify item, you'll be able to run the Figma plugin by either clicking on this "run" button here. Or I'd recommend clicking on this little "more options" icon here and clicking save. And that's just going to save it to your Figma plugins list for easy access later.

I've already done that. So, I'm going to go to my Figma canvas and just right-click anywhere, go down to "Plugins," and then go down to "Saved plugins." And then, I'm just going to click on the Emailify item, and that's just going to run the Figma plugin that we saved a second ago.

If you're new to the Figma plugin, the way that it works is it basically allows you to design HTML emails in Figma and then customize the content and styles of those using the Figma app. And then, you're basically able to export that to production-ready HTML directly from the Figma plugin. So, I'm not going to go through how to design the emails in this tutorial. If you're interested in that or if you're new to the Figma plugin, you can basically find a bunch of tutorials on the YouTube channel.

For today, I'm just going to be focusing on testing these emails in HTML in different mobile clients. So, see how they render on different email clients. So, to do that, we just need to export the email from Figma to HTML. So, I'm going to do that by clicking on the export HTML button in the Figma plugin. Then, I'm just going to make sure that the upload hosted image URLs option is selected. And then, I'm going to click on the export to HTML button here. And that's going to generate the HTML from our design in a few seconds.

Once you've done that, you can just click on the download your zip file. And if you save that to your desktop, you can basically unzip that file, open up the folder, and inside the folder, you'll see we've got our test email, which is the frame that we exported from Figma. And we've got our index.html file inside that folder.

What you want to do is you want to open up that index.html file. And you want to basically open that up in either a code editor or you can open it up in the browser and view source and copy-paste the HTML that way. I'm just going to open it up in my code editor. I'm just going to select all and copy all of that HTML to my clipboard.

Then, what I want to do is I want to go to my browser and go to Litmus.com. So, I'm going to go to Litmus.com and basically create a new email under the test tab. So, if you've got tests selected up here, you can then go down to the create new button down here. And then, you just want to put in a title. So, I'm just going to call this one "mobile email tests." And then, I'm going to click on the test button down here.

Where it says, "Would you like to start with build or test?" Just click on test. And then, click bring in your email. So, there's a couple of ways of doing this. One way you can get the HTML into Litmus is by sending the HTML to Litmus. So, it gives you this special email address here that you can copy. So, if you're using MailChimp or something and you've already uploaded your template there, you can actually send it from MailChimp to Litmus. But for today, I'm just going to be using the raw HTML method.

I'm going to go down here and click on "view more ways to create an email". And then, that's going to allow us to paste in the HTML that we just copied a second ago from our code editor. So, I'm going to paste it in this bottom area here. And I'm just going to call this test. And then, I'm going to click done. And that's going to take this HTML, upload it into Litmus, and Litmus is then going to run that HTML email across a bunch of different email clients to show you how it's going to render when it actually lands in those inboxes.

These are real tests, these aren't emulations or anything like that. These are running on real devices or real virtual machines on the Litmus servers. And it will allow you to see what the email is going to look like on a bunch of different email clients and mobile devices.

By default, it's going to pick out a few that it thinks you're going to be interested in. But we really want to drill down on testing the HTML on mobile devices and mobile clients today. So, I'm actually going to go up to the top here and click on choose email clients. And I'm going to basically clear all of the desktop ones. So, we don't want any desktop ones. We don't want any web-based ones. And I'm going to expand out this mobile and tablet section. And that's going to allow us to break it down by different types of mobile devices and clients.

You can see we've got a category for Android phones. We've got a category for iOS devices that we can select. So, you can basically just go through and pick up the devices that are relevant to you. So, you can check it on iPads. You can check it on iPhones, different versions. You can do it in dark mode. You can do iPhone Pro or iPhone regular.

I'm basically just going to select all of the latest version of iPhone or iOS. So, iOS 16. And I'm going to preview that on regular iPhone 14s. And the iPhone 14 Pro Max. And I'm going to preview that in those different clients in a second.

Once you've selected all of the mobile clients that you want to preview it on, so we might add a couple of Android ones as well. So, let's just do the Gmail app as well for Android 11. And once you've selected all the mobile devices and mobile email clients you want to test on, just go ahead and click on this run previews button. And that's going to take the HTML that we just uploaded a second ago, and it's going to rerun those previews on those different mobile devices.

We're going to be able to see how our HTML that we exported from Figma is going to look on the different iOS and Android devices that we just selected a minute ago. You can see here that it's starting to render some of those previews. So, we've got our iPhone 14 preview. We've got the Outlook iOS version also on iOS 14.

We can go ahead and blow some of these up to a larger size. So, if you click on any of them, just click on that link. And this is basically going to load up a preview. So, you can see here, in this case, we're looking at the Outlook iOS app on iOS 14. And we can scroll through it, and we can see that it's looking really good. It's basically looking how we designed it in our Figma file. And we can jump back and see what it also looks like on Apple Mail.

We'll do Apple Mail on an iPhone 14 Pro Max. So, if we open that up, you can see here, this is also looking really good. We've also got our custom Google fonts rendering nicely. Some of the email clients actually don't support Google fonts, so it'll fall back to a different font. But in this case, it's supporting the Inter font that we're using. So, we're using Inter, which is a custom Google font. Ironically, the Gmail app actually doesn't support Google fonts, which is strange. But if you're running an iOS mail client, so iOS Apple Mail, it's going to look really nice. And you're going to get those custom Google fonts rendering as you'd expect.

That's basically what it looks like there. As I said, we can also open it on Gmail for Android. So, if we open up the Gmail Android mobile app, we can see here that it's going to load up that preview as well. Some of these previews can be a little bit slow to load in Litmus sometimes. I think that's just because it's quite intensive in the background to actually render these previews on a real device or a virtual machine. But that's basically what it's going to look like.

Aagain, we can see that our HTML that we exported from Figma is also looking quite good in the Gmail app on Android. So, this is Android 11. As I mentioned, it's going to fall back to a different font. You can see this is looking slightly different to the Inter font that we selected, the Google font in Figma. So, I think it's falling back to—I believe it's Roboto, or Roboto, however you pronounce it—on the Gmail app for Android. I think that's what it'll fall back to if it doesn't support the Google fonts that we're using. But it's still looking good overall, and the layout's looking nice, and everything is there that we'd expect.

That's basically an overview of how you can use Litmus.com to test out your HTML emails from Figma in all of these different mobile clients. So, you can do, as I said, Android, iOS, check it out on Outlook and Gmail. Those are going to be your main ones. And of course, Apple Mail, which is the default app for iOS as well. You can basically just go through and pick those out as you need.

As I mentioned, there's a bunch of other runs that we didn't look at, but you can go through those individually. There's 47 of them. So, if you're really diligent, you can inspect all of those manually. But I think if you select the more popular ones, you're going to cover most of your bases for testing how those HTML emails are going to render across all those different mobile devices and applications.

We'll leave it there for today. I just wanted to show you how to test your HTML emails on these mobile applications and mobile devices. So, hopefully, that's been helpful if you've been wanting to incorporate this kind of QA process into your workflow. So, feel free to give it a try, and I hope it helps you on your team. Thank you, as always, for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to update Figma text from Microsoft Word with DOCX files using CopyDoc
date: 2023-06-19T00:00:00.000Z
---

# How to update Figma text from Microsoft Word with DOCX files using CopyDoc



#### Video Transcript

Today, I'm going to be showing you how to automatically update your Figma text content from Microsoft Word using the CopyDoc Figma plugin. 

To get started, all we need to do is go up to your little "Resources" icon at the top of the Figma file here. If you click on that and search for "CopyDoc", and under the "Plugins" tab, if you just go ahead and click on the CopyDoc item, that'll allow you to run the Figma plugin by either clicking this "Run" button here or I'd recommend clicking on this little "More options" icon here and clicking save Figma plugin. That'll allow you to open it from your saved Figma plugins list later.

I've already gone ahead and done that. So, I'm going to go to my canvas and right-click anywhere, go down to "Plugins", and then click on "CopyDoc" under "Saved Plugins". So, I'm going to go to saved plugins, click on CopyDoc, and that's just going to run the Figma plugin we saved a second ago.

This Figma plugin has a bunch of different features, but for today, I'm just going to be focusing on these two, which are the export text layers feature and the import text layers feature. So, what we can do first is export our text layers to a Word document. We can do that by clicking on export text layers here, and then we can go ahead and change this export format up here. So, if you go ahead and click on DOCX, which is the Word document format that we're going to be using. I'm going to select that, and then you can basically just check whichever frames you want to include in the export. So, in this case, I've only got one, so I'm just going to leave that one checked. And then it's up to you to change any of these options down here as well. I'm just going to leave these as default for now. You can also do things like change the order that the text shows up, and you can group duplicate layers and things like that. But for today, I'm just going to leave it default and click on the export DOCX button. So, I'm going to do that now, and that's just going to export our content to a DOCX file, which is a Word document file. So, I'm going to click on download DOCX export, save that to my desktop, and then I'm just going to unzip that file and open that up.

If we have a look at the folder, you can see we've got a design reference here, just so you've got an external reference of what the copy looks like. And then we can go ahead and open up our DOCX file that we just exported from Figma. So, I'm going to double-click on that DOCX file. That's opened up Microsoft Word. So, we've got Microsoft Word running, and this will basically allow us to edit the content in Microsoft Word, and then in a minute, we'll re-import it back into Figma.

I'm just going to make a few different changes here. So, if we change the name, we can change the work title to be something like experience. Maybe we can change this to be my bio or something like that. And maybe we want to change some of these company names to some different ones. We could change some of these tags, so you've got these little tags down here that's being exported. So, maybe we could change that to development or we could do this as art direction or something like that. Just a few different examples to show you what this is going to look like. There are some other things we can do as well. So, you can see we've got some links in here that have been included. So, those are links that have been added in Figma. You can also change those as well. So, if you wanted to change the text or change the domain, we could definitely do that. So, you could do a link edit link and then change that in here. So, maybe we just want to change that to something else. So, in this case, I'll just make that hypermatic.com. And then we'll be able to see what that looks like in Figma in a second. So, I'm just going to change that now, save it, also make that the text up here. So, I'm just going to change that, get rid of the www, and just make that a bit simpler. And we can also do things like formatting. So, if you wanted to add bold or italics to some of the content, you could do that. So, you can just highlight the text, make it bold, make it italic, and that'll get imported in a second as well. So, I'm just going to bold and italicize those. And I think that's probably good enough for now just to show you what it looks like. So, I'm going to click save on my Word document in Microsoft Word. Then I'm just going to minimize that and go back into Figma.

Back in Figma, I'm just going to close off this little export confirmation. And this time, we're now going to click on the import text layers button. So, I'm going to click on import text layers, which is going to allow us to re-import text updates back into Figma. So, I'm going to click on that now, and you can see here it's got a little drop zone that we can either drag and drop or click on a file and upload that. So, we're going to upload this directly from our computer. This doesn't get uploaded anywhere. It just goes straight into the Figma plugin. So, I'm just going to drag and drop that DOCX file, drop that into here. And once that loads up, it's going to give us some previews of the content that's been changed. So, you can see here that it's basically showing us some of the changes we made. So, you'll remember we changed these different text items, and it's just giving us a bit of a visual confirmation of what's changed. If you want to exclude any of these, you can basically just uncheck those. And they won't get included. For today, I'm just going to leave them all checked. And now that we can see that we're basically happy with the updates that we've added, I'm just going to go ahead and click on the update Figma text layers button up here. So, I'm going to click that now. And that's basically going to apply those updates. So, we can see that nine Figma text layers have been updated. And we can see that the copy in the file has been updated as well. So, you can see here we change the name, we change the subheadings, we changed the company names, we added some extra tags or some different tags. So, you can see Art Direction's been updated. That was changed from concept art to Art Directions. All the tags have been updated. We added some formatting. So, we've got some formatting up here that we added. And we've also got, yeah, as I mentioned, the company name as well.

That's basically just a really quick example of how you can do that. As you can see down here, we've got our updated link. So, because the text is a bit longer than it was previously, that text may have to change position. So, maybe we have to move some of these text layers over. This is much easier if you're using Auto layout. So, if you're automatically setting your frames to position the contents, you're using Auto layout on your Figma frames. That's going to make this way more flexible. If you've got manually positioned texts like this case has, then if you're adjusting the lengths and size of those text layers, that's going to probably require some tweaks if the text layers are going to have longer content than what's currently there. But you can see that it's basically updating the content as we expected from the Word document.

Yeah, that's basically just a really quick overview of how you can use Microsoft Word and DOCX files to update your Figma content with the CopyDoc Figma plugin. This is pretty useful if you want to be making bulk updates to your artboards or to your designs outside of Figma. If you've got a copy team or a team of people who aren't in Figma and they need to make copy updates, this is a really quick way of allowing them to make updates in their preferred app like Microsoft Word in this case. And then you can then re-update your Figma file based on importing that updated file as well.

We'll leave it there for today. I just want to keep that really short, just to give you a quick overview of how you can use DOCX files to update your Figma content from Microsoft Word. I hope it helps you or your team if you've been wondering how to do this. So, thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to update Figma text from Google Docs with DOCX files using CopyDoc
date: 2023-06-18T00:00:00.000Z
---

# How to update Figma text from Google Docs with DOCX files using CopyDoc



#### Video Transcript

Today, I'm going to be showing you how to automatically update your Figma text layers from Google Docs using the CopyDoc Figma plugin. 

To get started, all we need to do is click on the little "Resources" icon here at the top of your Figma file. If you click on that and search for "CopyDoc" under the plugins tab, and click on the CopyDoc item. You can run the Figma plugin by either clicking this "Run" button here, or I'd recommend clicking on this little "More options" icon and clicking "Save Figma plugin." That's just going to allow you to run the Figma plugin from your Figma plugins list later.

I've already gone ahead and done that. Now I'm going to go to my canvas and just right-click anywhere, go down to "Plugins", then go down to "Saved Plugins," and click on CopyDoc. That's going to run the Figma plugin we saved a second ago. The Figma plugin has a bunch of different features, but for today, I'm just going to be going through two of them. I'll be going through the export text layers feature and the import text layers feature.

The first thing we're going to do is export our text layers out to a Google Doc. We can do that by clicking on "Export text layers" and then making sure that this little select box up here is set to a DOCX format. So, DOCX is a Word document format. We're going to click on DOCX and make sure that's selected. Then you can go through and select any frames you want to export or not export. In this case, I've just got one frame, so I'm going to keep that selected here. Feel free to play around with any of these extra settings down here or do things like change the order if you want to do that. Feel free to change that or group duplicate layers and things like that. Today, I'm just going to leave this pretty standard. Now I'm going to click on the "Export DOCX" file. So, I'm going to click on "Export.x," and that's just going to export all of our Figma text to a DOCX file. I'm going to click on the "Download DOCX" export and save that to my desktop.

If we open up that zip file and open up the folder, you'll see here that we've got a "designs" folder, which just contains a static design as a bit of a visual reference of the DOCX file. What we want to do is basically open up this file using Google Docs. So, I've already got Google Docs open in my browser. I'm going to go to my browser, I've just created a brand new blank Google Docs document. Then, what you want to do is go up to the "File" item up here and click on that, then click on the "Open" option. Click on "File" and "Open." Then, you want to make sure the "Upload" tab is selected. Just click on that "Upload" tab. Then, what you can do is basically just drag and drop the DOCX file that we just exported from Figma into your Google Docs window. So, I'm going to do that now. I'm just uploading that document into Google Docs, and that's going to open it up for me to start editing.

You can see here that I've got all my content from Figma. This is all in Google Docs. So, we can now start to edit this content in Google Docs directly. I'm going to do some things just to show you what it looks like. I'm going to change some of the names and roles and subheadings. So, I might call this "Experience." I might call this "Bio." Maybe we want to change some of these companies. So, I'm going to change some of these company names. I'm going to change some of these tags. Maybe we want to change "Visual Effects" to "Visual Design." Maybe we want to change "Design" to "Code". Maybe we want to just change this to be "Art Direction." Just a handful of different changes to show you what it looks like.

We can also do things like change links, change formatting. For example, if we wanted to change some of the formatting in this lime Epsom, we could do things like add some bold formatting or italics formatting just to show you what that looks like. So, that's a pretty good overview of a few different changes that we can make. Now, just to show you what it looks like to re-import that content, what I'm going to do is now download this file from Google Docs back into a Word document. So, I'm going to click on "File," go down to "Download," and then I'm going to click on "Microsoft Word" or DOCX in brackets. If you click on the Microsoft Word option, that's just going to download the file to your downloads folder or wherever you've got your default downloads saved to. So, basically just open that up. You can see here on my desktop, I've got the saved file from Google Docs that we just edited. If I preview that, you can see that the changes are in that file. We've got the changed names, changed subheadings, company name formatting. So, that's definitely the updated file from Google Docs.

Now, what we want to do is go back into Figma. I'm just going to minimize Google Docs. I'm going to go back into Figma, close off this little window, and jump into the "Import text layers" feature. If you click on the "Import text layers" button, this is going to allow us to re-import text updates to Figma. I'm going to click on "Import text layers." Then, I'm basically just going to drag and drop the file that we just saved from Google Docs, the updated file, just drag and drop that back into Figma, in this little drop zone here. What that's going to do is load up some previews of the content that was changed. So, you can see if we scroll through these, it's just showing some of the updates that are going to be made. These haven't been made in the file yet. It's just more of a review phase so you can see what's been updated in the file before you approve them or update them in Figma.

I'm pretty happy with these changes. If you didn't want to include any, you can basically just uncheck those, and those won't get included. But for today, I'm just going to accept everything and click on the "Update Figma text layers" button to update all of my Figma text layers in this preview. So, I'm going to click that now. I'm going to click "Update Figma text layers." That's just going to update all of the text layers that we changed in the Google Doc. You can see it's updated 10 Figma text layers. If we zoom in a bit, you'll see that all the changes we made in the document have been applied. The names have been changed, the subheadings have been changed, the experience has been changed from Google to Airbnb in this case, and also the tags that we changed have been made. You can see here it used to be called "Concept Art and Design," and that's been changed to "Art Direction and Code." So, those have been updated there. The formatting we added has been applied, so we've got the bold text and the italicized text here. It also changed some of these links. Because the link wasn't properly formatted before, it's just gone ahead and formatted that. You could basically just remove that if you didn't want to include that. So, I've just left that as is. But you could move that around.

The other thing to note is if you're changing some of the text content and the layers don't have Auto Layout, you might have to manually move some of those around if the content's been exaggerated or extended. Sometimes you're going to get longer content or shorter content, and that might require some layout changes. Again, if you don't have Auto Layout applied. So, it's always good to apply Auto Layout as much as possible beforehand. But if you don't, you may have to tweak some of those positions around. But the main thing is you can update that content directly from Google Docs. So, if you're working with someone who doesn't have Figma access or if you're working with copywriters who prefer to do their copywriting in Microsoft Word or in Google Docs or using a DOCX file, this is going to be a nice way for them to edit the content without having to deal with Figma or deal with any of the design challenges that might pop up when they're editing text.

We'll leave it there for today. I just wanted to keep this really short and simple, just to show you how you can use Google Docs as an option for updating content in Figma using the CopyDoc export and import features. It's going to be a really quick way of going about it. Feel free to give it a try with your team, and hopefully, that helps if you've got some people on the team who are into using Google Docs instead of Figma to make updates in the designs. We'll leave it there. Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to update Figma text from Office 365 with DOCX files using CopyDoc
date: 2023-06-17T00:00:00.000Z
---

# How to update Figma text from Office 365 with DOCX files using CopyDoc



#### Video Transcript

Today, I'm going to be showing you how to automatically update your Figma text content from Office 365 Word using the CopyDoc Figma plugin. 

To get started, all we need to do is go to the little "Resources" icon at the top of your file. If you click on that and search for "CopyDoc," click on "plugins," and then click on the CopyDoc item, it'll let you run the Figma plugin. You can either click on the little "Run" button here or click on the "More options" icon and click "Save Figma plugin." That will save it to your Figma plugins list for easy access later. I've already gone ahead and done that.

Now, I'm going to go to my Figma canvas, right-click anywhere, go down to "Plugins," and then go down to "Saved Plugins." I'll click on the CopyDoc item, and that's going to run the Figma plugin we saved a second ago. The Figma plugin has a bunch of different features, but for today, I'm just going to be focusing on the export text layer feature and import text layer feature.

The first thing we're going to do is export our content out to a Word document, which will let us open it up in Office 365 and make some changes. To do that, I need to click on the export text layers button and make sure that the export format up here is selected as DOCX. DOCX is the word document format we're going to be using. Then, I'll go ahead and make sure that the frames I want are selected. I've only got one in this case, but you might have some other ones in here as well. You can change the other options to your own liking, but I'm just going to leave all of these as default and then click on the export DOCX button.

That will export all of our Figma content to a Microsoft Word DOCX file that we can open up in Office 365. Now, I'll show you how to do that. If you click on the download DOCX export button and save that to your computer, then open up the zip file and open up the folder, you'll see that you've got a designs folder, which is just a static JPEG of the content that we just exported for reference. Then, you've got your DOCX file.

We're now going to open up this DOCX file in Office 365 using Word. So, I'm going to go back to my browser and just go to OneDrive in Office 365. You can upload your DOCX file to OneDrive by dragging and dropping the file into OneDrive. So, I'm just going to drag and drop that now, and that's going to upload it into OneDrive so we can then open it using Office 365 Word.

I've got that uploaded into OneDrive, and you can open that up in Word by clicking on the DOCX file here. So, I'm going to click on that, and that's going to open up Word in Office 365 in our browser. Now, we can basically edit the content in Word using Office 365 online. We have all of our content in here that we just exported from Figma. Now, you can go through and make any changes you want in Office 365.

I'm just going to change some of these items here to show you an example of how we can update this content in Office 365 and then re-import it back into Figma in a moment. I'll make a few basic changes just to demonstrate how it works. We can do things like simple formatting, text updates, and update some of these little tags here. For example, I'll change "visual effects" to "visual design," "design" to "development," and "ux" to "copywriting." I'll also make one more change here and change that to "Amazon." Additionally, I'll change one more company to "Microsoft" since we're using Microsoft right now. That's about it.

To get this content back into Figma, all we need to do now is export this as a Word document from Office 365. We can do that by clicking on "File," then "Save As," and then "Download a copy." So, I'll click on the download a copy button, and that will save the Word document to a local file on your computer.

Once it's finished saving, you'll get a prompt asking if you want to save it or download it. We want to download it directly to our computer, so we'll click on the download a copy button. That will download it to your computer.

Now, I'm going to open up my download folder and see that the updated DOCX file has been downloaded. I'll just minimize Office 365 for now and drag this folder over a bit so we can see our Figma plugin. Now, we want to go back to our CopyDoc Figma plugin in Figma, close off this confirmation screen, and re-import the text updates to Figma. This will allow us to update the text content from our updated Word doc file that we just saved.

I'll click on the import text layers button here, and then I'll go to the folder where I downloaded the updated DOCX file from Office 365. I'll drag and drop that DOCX file back into Figma, specifically into the CopyDoc Figma plugin's drop zone. Now, it's going to load up any content previews for the changes we made in the file. If we scroll down, we'll see a preview of what content has been changed. We can select which changes we want to make in the Figma file. If you want to uncheck any content, you can do that. For today, I'll leave most of these selected and click on the update Figma text layers button up here. This will apply all the changes we previewed. I'll click that now, and it will update all of our text layers.

As you can see, it has updated 11 Figma text layers in our designs. If we have a look, we can see that the content has been updated, including the company names and the little tags we changed to copywriting, visual design, and development. We also added some basic formatting and changed the heading and subheadings as expected.

That's it for the tutorial. I just wanted to show you a quick overview of how you can make content updates from Office 365 using a Word document and the CopyDoc Figma plugin. If you're using Office 365 to edit your Word documents, this is a quick way to update your Figma text content. Just be mindful that if you're updating content that is longer than the current text content and you're not using Auto Layout, you may have to manually adjust some layers in your design if they've been updated as well. If the imported content is longer, it may overlap with existing elements, so you'll need to reposition it manually. Auto Layout can make this process easier.

That's all for today. Thank you for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to style Figma layers from a spreadsheet with CSS style sync using CopyDoc
date: 2023-06-11T00:00:00.000Z
---

# How to style Figma layers from a spreadsheet with CSS style sync using CopyDoc



#### Video Transcript

Today, I'm going to be showing you how to automatically style your Figma layers from a spreadsheet using the CopyDoc Figma plugin.

To get started, all we need to do is go to the little "Resources" icon up here in your Figma file. If you click on that and search for "CopyDoc", you can run the Figma plugin by either clicking this "Run" button here, or I'd recommend clicking on this "More options" icon here and just clicking on the "Save" button. That'll save it to your Figma plugins list for easy access later.

I've already gone ahead and done that. Now, I'm going to go to my canvas and right-click anywhere. I'm just going to go down to "Plugins" and then go down to "Saved plugins". Then, I'm just going to click on the CopyDoc item to run the Figma plugin that we just saved a second ago.

If you're new to the Figma plugin, it has a bunch of different features that help you to update content in Figma. But for today, I'm just going to be focusing on the Sync Spreadsheet feature down here. If you're interested in the other ones, I'd recommend checking out the other videos in the CopyDoc playlist on the YouTube channel. But for today, I'm just going to be going through how to use CSS in a spreadsheet to automatically style your Figma layers in your design.

To get started, all we need to do is open up a new spreadsheet. You can use either Google Sheets or open up something like Excel. We're basically going to structure our spreadsheet to match the Figma layers in our design. For example, I've got this Frame here that I want to style. I want to change the background color of this Frame, and I want to change the font size of this heading here, and I want to do that from a spreadsheet.

What I need to do is basically name my Figma layers with a certain convention. In this case, I've chosen to use "heading," and I've chosen to use "home," and I put a little hash (#) in front of it just to make it really clear that that's what I'm using it for. Then, in my spreadsheet, I'm basically putting those layer names in the top row, which is the header row, and these are going to be the labels that will match up our Figma designs with our spreadsheet.

Once you've done that, then you can go ahead and start writing CSS inside of the content underneath those columns. So, what I mean by that is, for example, if you wanted to change the background color of this Frame, you can basically put in a CSS rule of "background-color" with a little colon, and then a hash (#) followed by the hex value. So, I'll show you what that actually looks like now.

If we import this into Figma, you can do that by clicking on the share button up here if you're using Google Sheets. Just make sure that the general access setting is set to "anyone with the link." Then, click on "copy link." Once you've copied that, go back into CopyDoc in the Figma plugin and click on the Sync Spreadsheet button down here. Then, you can paste in your Google Sheets link down here and wait for that to load up. That's going to let you select the tab in your spreadsheet that you want to use. In this case, I'm just going to be using the "home" screen tab. I'm going to click on "Use Selected Sheet," and then I'm going to click on the artboard over here, the "home" layer that we named. Then, I'm going to click on the "Sync Rows" button here.

You can see that it's updated our layers from the spreadsheet. It has gone ahead and changed that background color for us, and it's changed the font size over here based on the values that we had in our spreadsheet. So, you can see we had a background color of "#818af9," and that's now been added to the spreadsheet over here. So, that's the value we used. And over here, we set the font size using CSS to 28 pixels, and you can see here it's updated the font size to 28 pixels.

That's just a really quick example of what you can do with the Figma plugin. I'm going to show you a few more examples now if you want to have a look at those.

I'll go to my app screen now. I've got this app screen that I want to make a few changes on. I've set up another tab in my Google Sheet, and this one I've just called "app screen" so I know what it is. I've gone through and basically named the layers that I want to change. For example, I've got this hero block, so I've called that "#heroBlock" in my Figma design. That's just a Figma frame that's got a background color on it. In my spreadsheet, I've added "heroBlock" to the row up here, and I've just set a few properties that I want to change. I want to change the background color, so I want to change that to a different background color to match this one, and I want to change the text to be white.

You can do this two ways. You can either change the individual text layer names. So, for example, I've done that over here with the staff name. In this little card component, I've got a layer called "staff name," and I'm going to be changing that color to this other color over here. You can do it individually per text layer. But if you want to change all of the text layer styling in a single frame, you can actually just target the frame.

In this case, I've got the hero block, and all I'm doing in that hero block is I'm saying that I basically want the color to be white. So, "color" is going to apply to the text color. I could also do things like change the font size. I could actually change that font size to be something else, so I could make that 14 pixels, and that'll basically change it. Actually, it's already at 14, so I'll just change that to be 16 pixels, and that will change it in a second as well. That's basically how you can apply multiple text layer changes at once.

I've also done things like change the menu. I've got the menu down here, and I'm basically going to make that menu, which I've named "#menu," have an opacity of 0.3, and I'm going to change the background color. Same thing over here, so I'm basically going to change the font size of these card frames, and there are a couple of them in here. I've named both of them "card frame," so it's going to find both of those when we select the frame in a second, and it's going to change all the fonts in there to be 10 pixels. So, I'll show you what that's going to look like now.

Again, I'm going to grab the share link and just copy that, jump back into Figma. I'm going to close off this window and open it back up, and drop in my spreadsheet link. So, I can select a new tab. This time, I want to work with the "app screen" tab, so I'm going to click on that and use the selected sheet. Once again, you'll get a little preview of what the column names are just that it's going to load up. All you need to do again is just select the element or elements, as we'll go through in a minute, that you want to select. And again, click on "Sync Rows."

You can see here again, it's updated the layers from the spreadsheet. So, in this case, we can just briefly go through the changes that it made. As we saw before, we set the hero block to have a background color of purple, and we also set the color, which applies to text. So, that's not a background color. "Color" always means text color. So, we've got the color set to white, so it's changed that for us. We also increased the font size to 16. In retrospect, that was a bit too big. So, we could always just go back and change that again. And then we also set a border radius of 20. So, before, that didn't have a border radius at all, that frame. So, now we've got the border radius there. 

You can see up here, as I briefly went through, we've also changed the font size of the card frames to 10 pixels. So, those have been set to 10 pixels. But then we've also got a bigger size up here. And the reason for that is because after we set the card frame size of 10 pixels, after that, we've got a staff name attribute layer. And that one's being set to 22 pixels. So, the spreadsheet's basically looping through these columns, getting to this one, applying 10 pixels to all of the text inside that frame. And then it's getting to this one, and then it's overriding that again to be 22 pixels instead, with a font weight of bold. So, you can see here that it's set to bold at 22 pixels. That's basically what that looks like there, to apply a bunch of different changes with nested text changes as well. That's another cool example that is a nice way to change a bunch of different layers in a single frame.

But if you want to make this change to multiple frames and have different styles per frame, you can do that as well. So, I'll show you what I mean by that. I'm going to go back to my spreadsheet, jump over to this "card Styles" tab that I've got set up. And what I basically want to do here is apply a couple of different styles depending on what order the selected row is in my selection.

Here, I've got two card frames. I've got a card frame here, and I've got a card frame here. They're both called "#cardFrame," and they're basically the same component with the same type of content. But what I want to do is apply different styles to both of these in this little block here.

What I've done is, in my spreadsheet, you'll notice that I've got two rows set up underneath my headings. So, I've got the card frame here, I've got the staff name layer, which is just a text layer, I've got the staff role layer as well, which we're going to change some styles on, and then I've also got this star photo. So, this is an image layer just with a photo, and I've also called that "staffPhoto."

What I'm going to do is I'm basically going to apply a different color background to the first card and the second card, so they'll be different colors. And then I'm just going to basically go through and apply the same styles for everything else. So, I'll show you what that looks like now.

We can basically go through and apply this by doing the same process. I'm going to click on "share," I'm going to click on "copy link," and copy that one. And just to demonstrate this even further, I'm just going to change this one to be a bit different as well on the top. And same thing for the bottom here, I'm going to make this one a little bit smaller so just so we can really see what's going on here.

Now, if I again go back to my CopyDoc Figma plugin, click on "Sync Spreadsheet", drop in that sheet again, and this time I'm going to select the "Card Styles" tab, the one that we're just looking at. Click on "Use Selected Sheet." And this time, what we're going to do is we're not going to select the parent frame. We're going to actually select these nested frames. So, we're going to click on both of these. So, we've got two layers selected, as we can see down here. And because we've got two rows also in our sheet, what it's going to do is it's basically going to loop through the selection. It's going to go one, two, and it's going to map those up to row one and two in here. So, I'll show you what that looks like now.

We can go ahead and click on "Sync Rows." And you can see here again, it's updated the layers from the spreadsheet. But this time, it's used the different rows to apply different styling to our selection. So, we've only got two layers selected here, but you can imagine having a dozen layers or two dozen layers selected like that, with a dozen or two dozen variants in your spreadsheet rows down here. And you can basically just change those as you need to. So, you can have a different style per selection in those repeatable rows.

As we just looked at, you can basically see that the heading up here is set to be a little bit bigger, at 24 pixels. And the one down here, we set to 18 pixels. So, those two are getting mapped a little bit differently. And we also change the background color to be white on the top one and slightly off-white on the bottom one. So, you can see that's been applied here as well, with that hex value.

The other cool thing you can do is you can actually change the order. So, if you don't want to sync it from top to bottom, you can actually change the order that it gets synced at. So, we could change it so it sorts the Figma selection from bottom to top. That would basically reverse the application of these. So, if we selected those and clicked on "synced rows," that would basically reverse it.

I'll just do that again and undo the changes first, just so it's kind of back to what we originally had it. So again, I'm going to show you that. I'm going to select both of those layers. This time, I'm going to go from bottom to top instead of top to bottom. And that's basically going to apply the first row from the bottom up. So, if I select that, "bottom to top," click "Sync Rows," and this time, it's basically used the second row, which is the first row of changes, and it's applied that to the bottom. And then the next one is applying it to the one up here. That's just a really quick way of reversing the layer order. And you can also do that based on a bunch of other properties as well. So, I'll leave you to play around with that in your own time.

The last one I wanted to do is just show you how to use this in combination with content. So, if you wanted to change the content of these cards as well. So, what you need to do is basically just make another tab or another spreadsheet with those same names. And instead of using CSS rules this time, so these ones are all using CSS rules, this time you're just going to use plain text content. No CSS, nothing like that. It's just plain text content with either text or image links. So, if you use an image link on a layer that accepts images in Figma, it'll automatically download those images and swap them out.

I'll show you what that looks like now. So, I'm just going to go to my "share" button, grab that, and copy the link one more time. And if I just jump back into my Sync Spreadsheet item over here, paste that in. And for the final example, we're just going to select the "cards content" tab. And again, click on "Use Selected Sheet." And if we now again click on these two rows, so this is the same method that we just used in the "card Styles" one, but this time we're going to be using it for content. Just regular content, just to show you what that looks like.

I'm basically going to finalize that as my last example. So again, you can see we've got a bit of a preview. And this time, you'll notice that it's not showing the little "theme" icon. It's showing that this is actually being detected as normal text content and an image replacement here. So, these columns, it's understanding what kind of content that is, and it's telling us that it's going to map it to those layers that we've got selected.

Again, I'm just going to select both of those card frame layers as the parent layers and loop through those. This time, I'm just going to go top to bottom and click on "Sync Rows." And that's basically going to sync up the content.

You can see here, it's updated the layers from the spreadsheet. And this time, it hasn't done style updates because we didn't use any CSS. This is just a regular old content update, just the way that you would usually do this with the CopyDoc Figma plugin, the main kind of content sync feature. So, this is basically just showing you how to do content changes inside of the spreadsheet. And you can actually do a mixture. So, if you wanted to do style changes and content changes in the same tab, you can definitely do that. The only thing to be mindful of is you can't repeat the label. So, if you had two things of staff name and one was color and one was text, that's probably not going to work. That's just going to double up and get a bit confused. But if you wanted to basically do staff role style, so if you wanted to do staff role change that to black text or something like that, and then you didn't repeat that for content, you could basically have that like this. And that would automatically apply the styles for the staff role layer and it would apply content for these other layers here. You can kind of mix and match. You just can't do a style and content for the same layer at the same time. That's the only thing to be mindful of.

The easiest way to do it is just to try and keep your tabs or spreadsheets separate. It's probably a good idea just to do styles in one and then split out the content in another one, as we just did a second ago.

That's basically it. As I mentioned, you can do this with an Excel file as well. So, if you don't want to use the spreadsheet from Google Sheets, you can basically just do this with a regular Excel file as well. You can structure it in the exact same way. And I'll show you what that looks like.

If we open up the spreadsheet, you can basically just either download your sheet from Google Sheets, just download it as an Excel file, or you can just create a new Excel file in Excel and create tabs or create the same layout. And then you'll be able to drag and drop that into the Figma plugin. So, if you click on "Sync Spreadsheet" and then if you drag and drop your Excel file into this little drop zone, it's going to do the same thing. It's going to give you the options for your tabs. So, for example, we could do the app screen design again. I'm going to click on "app screen," Use Selected Sheet, and then click on "app" and click on "Sync Rows." So, I'm going to click "Sync Rows." And again, you can see we've done the exact same process as we just went through with the Google Sheets version, this time just using a regular Excel file instead.

That's just an alternative if you prefer to use a local file. You can basically go ahead and do that. And that's just going to import it much more quickly because it doesn't have to request the Google Sheets link every time. Using a local Microsoft Excel file is also a great alternative if you prefer to do it that way. It's going to work exactly the same. You just have to structure the spreadsheet the same way that we've just gone through. And you're welcome to use Microsoft Excel instead of Google Sheets if you prefer to do that.

The last thing that I just wanted to really briefly mention is you can find a reference of the supported CSS properties by clicking on the "Sync Spreadsheet" icon down here. And if you go ahead and click on the "CSS docs" link. So, there's a little link here that says "CSS docs." You can click on either of those, and that'll basically take you to the Hypermatic CopyDoc documentation site. That's just a quick overview there.

Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one.

---

---
type: tutorial
title: How to rename Figma layers in bulk from a spreadsheet using CopyDoc
date: 2023-06-08T00:00:00.000Z
---

# How to rename Figma layers in bulk from a spreadsheet using CopyDoc



#### Video Transcript

Today I'm going to be showing you how to automatically rename your Figma layers from a spreadsheet using the CopyDoc Figma plugin.

To get started, all we need to do is go to your Figma file, click on the little "Resources" icon here, and search for "CopyDoc", and Under the "Plugins" tab, you'll see the CopyDoc Figma plugin pop-up. All you need to do to run it is just click on this "Run" button here. Or, I'd recommend clicking on this more options icon here and clicking "Save Figma plugin." That's just going to save it to your Figma plugins list for later. I've already gone ahead and done that, so I'm just going to right-click anywhere, go down to plugins, then go down to saved plugins, and click on the CopyDoc Figma plugin. And that's just going to run the Figma plugin that we just saved a second ago.

We're going to be focusing on this sync spreadsheet content feature down here. There's a bunch of other options in the Figma plugin that I'm not going to go through. You can check out the playlist on YouTube for CopyDoc if you want to check out those other features. But today, I'm just going to be focusing on how to actually rename your Figma layers, like these, from a spreadsheet in Google Sheets or an Excel file using this sync content feature. So, I'll show you how to do that now.

Let's say we want to rename these three frames. So, we've got these three Figma frames that are all named "my frame." So, I want to change the names of those automatically. So, what I can do is I can go to my spreadsheet. So, I'm just going to open up a new Google Sheet, and you can see here I've basically added the name of those layers as the top item, so row number one, and that's going to be my column header. So, the column header name basically just has to match whatever the name of your Figma layer is in the file. And then, what you want to do is add the names that you want to rename the layers to underneath that column title. So, what you basically want to do is go through and add the names that you want the Figma layers to be called underneath that column. And then, that's going to automatically sync up in Figma. So, I'll show you what that looks like now.

If you set up your file like this and then click on the share button up here, so just click on "share," and then just make sure that this General access setting is set to "anyone with the link," and then just click on "copy link." And once you've copied it, you can go back to your Figma plugin, click on the sync content feature in the Figma plugin, and then what you want to do is just paste in your public Google sheet link here. So, paste that in, and that's going to load up the Google Sheets tabs. And I've got two tabs in my Google sheet, so it's going to give me two different options. I'm just going to select the Figma frame names tab that I've got set up, which is coming from down here, and I'm just going to go ahead and click on "use selected sheet." And that's going to load up the rows that we just added from the spreadsheet.

Once that finishes loading, it'll give you an option to sync those layers up with your Figma layers. So, what you basically want to do is select the three layers that we just wanted to sync up. So, I'm going to select those three frames that are all called "my frame," just to match up with the column name here. And then, what I'm going to do is just click on the "Sync Rows" button here. So, I'm going to click on "Sync Rows," and you can see that it's updated content for three layers. And we can see now that the layers that we just had in Figma have been renamed. So, we've basically renamed the three layers that we selected to be the same as what we had in our spreadsheet. So, you can see that those have been synced up nicely. So, that's basically what it looks like. We can also do that for inner content. So, we don't just have to do it for frames; we can do it for individual layers as well.

I've got a second tab set up on the spreadsheet here, and I basically want to rename these images. So, I've got these images in these frames, and at the moment, they're just all named "Avatar." So, I've got a little hash called "hash Avatar," and all of them are named the same. But I want them to be different based on the content of the photo. So, what I can do in this case is the same process. I can basically add "Avatar" as my column name, and then I can just add in the target Figma layer names that I want them to become when I import that into Figma. And at the same time, I'm also going to update some text layers. So, the text layers are all called "username," and I've also added the hash "username" as my second column here. And I've done the same thing. I've added the content that I want that text to be changed to. And the important thing to note here is basically, if you're naming the text layers the same as what you've got in your column, it's automatically going to update the text content. And if you're naming it the same as the layer in Figma, if it's not a text layer, so for example, the frame that we just did or the image layers that we're going to be doing in a minute, that's automatically going to rename the layer. So, the general rule is that if the layer is not a text layer and you've added it into your spreadsheet's link, it's just automatically going to change the name of that layer. Obviously, because it doesn't have any text content, it's not going to do that. But if it's a text layer, it will update the text content.

Now that we've got that set up, I'm going to do the exact same thing. I'm just going to go back to my Figma plugin, reopen the sync content feature, and drop in my spreadsheet URL. So, I'm just going to copy that again, copy the link, paste that in. And this time, I'm just going to select the "user card details" tab. So, I'm going to select that and use that as my selected sheet. Click on the "use selected sheet" button. And this time, I'm just going to highlight all of my frames. So, I'm just going to highlight all these frames. And what that's going to do is it's going to loop through each of those frames and match any layers that have the same name inside of them with the content that we just added in the spreadsheet. So, I'll show you what that looks like. If we now click on the "Sync Rows" button, we can do that now. So, click on "Sync Rows," and you can see here that it's gone through and updated six Figma layers. So, we've got our images. The layer names have all been updated. These are now saying "Avatar" with the person's name in them rather than just "hash Avatar." And it's also gone through and changed the text content for each of those layers. So, you can see what that looks like there.

The other thing that you can do that's probably worth mentioning, as I mentioned at the start of the Figma tutorial, is that you can also use an Excel spreadsheet, just a normal Excel spreadsheet file. So, if I undo those text updates and layer name updates that we just did from Google Sheets, I'm just going to undo those now. I'm going to open up the Excel file. So, if I basically save my Google Sheet to an Excel file, if I download that to Excel, and if I open up that file in Excel, so if I open up Excel now and just open up that spreadsheet, we can see here that the contents are formatted exactly the same. So, we've got the exact same content. It's just in an Excel spreadsheet file. And so, what we can do is we can actually go back into the sync content feature, and instead of pasting in the public Google sheet, we can actually just drag and drop that Excel file. So, we can drag and drop the Excel file directly from our computer into this little Drop Zone area. So, I'm going to do that now. And because it's local, it's very quick. It just loads it directly from your computer. It doesn't need to go to the internet to fetch that information. So, we can see here the tabs have loaded up really quickly. And again, we can just select our "user card details" tab, click on "use selected sheet," and then we can basically just highlight those layers again. And you can also select the order that you want to import the content. So, by default, it will just do it from top left to bottom right. So, for example, it'll just go one, two, three, four, five, six in rows. But you can also change that if you needed to, to be sorted visually in columns or by the layer order or by the Figma layer age or layer name. So, you've got a bunch of different options there with the sync order. So, I can just do this as an example to sync it by reverse. In this case, I'm just going to reverse the row order. And I'm just going to click on "Sync Rows" again. And you can see this time, it's again updated the six Figma layers from the spreadsheet, but this time it's done it from Excel, just an Excel file. And you can see, because I changed the order, the order is now reversed. So, you can see that at the bottom right, we've got Albert, and then Michael, then Adam. So, it's going in reverse order of the spreadsheet. And this is in contrast to what we did before, which was just going by order from top left to bottom right, which was going through all of these in order like that.

That's basically what it looks like. I just want to show you that you can use a Microsoft Excel file if you don't want to use Google Sheets. But you've got the option there regardless of which platform you prefer. So, that's basically it for today. I'll leave it there and keep it pretty simple. Feel free to experiment with this in your own workflow. I'm sure you can come up with some more complicated versions of this, where you can rename, you know, hundreds or thousands of layers in one go and hopefully save yourself a lot of time with your team. So, thank you as always for watching, and we'll be back soon with more Figma tutorials like this one soon.

---

---
type: tutorial
title: How to update Figma text layer content with Markdown files using CopyDoc
date: 2023-06-06T00:00:00.000Z
---

# How to update Figma text layer content with Markdown files using CopyDoc



#### Video Transcript

Today I'm going to be showing you how to easily make lots of text updates in your Figma designs with markdown files using the CopyDoc Figma plugin.

So, to get started, all we need to do is go to the little 
"Resources" icon at the top of your Figma file. If you click on that and search for "CopyDoc", under the Figma "Plugins" tab you'll see CopyDoc pop up. All you need to do to run it is just click on that item, and then you can click on the "Run" button down here, or I'd recommend clicking on this little "More options" icon and just clicking on the "Save Figma plugin" link down here. 

I've already gone ahead and done that. I'm going to go to my canvas and just right-click anywhere, go down to plugins, go down to saved plugins, and then click on the CopyDoc item. That's just going to run the Figma plugin we saved a second ago.

CopyDoc has a bunch of different features that you can explore. I'm not going to be going through all of them today. If you want to check out those ones, you can go on the YouTube channel and just check out the CopyDoc playlist. But today, I'm just going to be focusing on exporting and importing markdown files to make text updates in your designs.

To get started, all we need to do is click on this little export text layers button, and this is going to bring up any frames that are currently in your Figma file. So today, I've only got one, so I'm just going to keep that one selected and then click on the drop-down here and make sure that markdown is selected. You can export it to different formats, but for today, we're just going to be looking at markdown. So, I'm just going to click on "Markdown" and then export the markdown by clicking on the "Export Markdown" button.

If you click on that, that will basically export the text to a markdown file that you can download. So, I'm going to click on the download markdown export button, download that to my desktop, and then if you unzip the file, you'll open up the folder, and you'll be able to see that we've got a markdown file and also a designs file, just as a bit of a visual reference if you're translating this or updating the content in your text editor.

To open up the file, you can basically use a code editor or a markdown editor. Today, I'm just going to be using this markdown editor and opening that up. So, you can see here that I've basically got my Figma file exported, and it's including all of our different text layers with the content in between each of the IDs. So basically, you want to leave these ID layers or ID lines alone because they're going to map the text back into Figma later, but you can start making text content updates just by editing the content here.

So, for example, we could change "hello" to "welcome." We can change this body copy here, so we can say "this is portfolio," and you can make updates to longer bits of copy as well. So maybe we want to just change around this copy a little bit, add some line breaks in there. Maybe you want to add some formatting as well, so you can add formatting in markdown just by adding in these little star icons. So, that'll do bold. If you want to do italic, you can basically add a single star on each side, and that will make the text italic. And you can see here that any bold text is also automatically been included with the markdown formatting. So, that's bold text there. And you can see here, there are a few different other options we can have a look at. Today, I'm just going to be keeping it really simple.

Maybe we can unbold one of these items as well. So, I'll unbold the home link here, and maybe I want to bold the "about us" link instead. So, we'll just make those changes. For now, I'm just going to save the markdown file again, and if we now minimize that and go back to CopyDoc, if you now click on the import text layers button. So, we clicked export before, now we're going to click on import text layers, and what we're going to do is drag and drop our saved markdown file into the little drop zone here.

I'm going to open my folder again, just going to grab that markdown file we just saved, drag that into the little drop zone here, and you should see the updates that we just made show up. So, you can see we've got a list of all the changes that have been made. So, we can preview those. We can select or deselect changes that we want to apply or not apply, but you can basically see here that we've got our updates that we made in the markdown file applying in the Figma plugin now as a preview.

Now we want to actually update those text changes in the file. So, I'm going to click on the "update Figma text layers" button here, and that's basically going to go through and automatically update that content. So, you can see here the changes that we made are the heading, so we've got this "welcome" text instead of "hello." We've got our subtitle of the portfolio that we added, and we've got our home link, which is now not bold, and the "about us" link is bold instead. So, we've changed the formatting of that content there, and we've also just changed the line break of the main text here.

It's just a handful of changes but quite effective at making updates to the body copy with formatting changes just in one drag and drop. So, the other thing we can do is export this with grouped layers as well. So, for example, if we go to the export text layers button again and this time I'm just going to also change some of this copy to be the same, so I'm just going to make this one "welcome" as well, and I'm also just going to change these ones down here so that's the same, and if we make this one the same as the other one at the top. So, I'm just going to make these two the same, and that should be enough for now just to show you what this looks like.

If we re-export the text layers, so I'm just going to click on export text layers, and this time, if you click on the group duplicate text layers toggle. So, I'm just going to click on that now and then click on the export markdown button again, and that's going to allow us to download a new markdown export. So, I'm just going to save that, unzip it, and just rename that, so I'm just going to call it "new," and then go back to my editor. So, if I just close off that, go to my editor down here, and go back to desktop and go to my new folder, and you can see here that we've got a new export.

And you'll notice that this time, it's a little bit different. So, we've got some IDs getting extra IDs in here with one set of texts. So, you can see for this "welcome" text, for example, we can see that it's got two Figma layer IDs automatically added. And so, that means we can basically make this text update in one spot and anywhere that that text has been exported from originally. So, for example, "welcome" and "welcome" down here, if we were to change that in here, so I'm just going to change that back to "hello" again and save that.

And we can also change these menu items here, so we've got these ones. I'm just going to change that to "mobile design," and I'm also just going to change the company slogan to something new. So, that's a pretty good overview of changing these little details. So now, if we save that again, exact same process. I'm going to go back to Figma, click on the import text layers button again, and this time I'm just going to drag and drop my new markdown file, which I just updated, drag and drop that into the Figma plugin.

And this time, you'll see that we've got those changes, but it's also changing the multiple text layers. So, because we made a change for the "welcome" layer in our file, we've got two different "welcome" layers in the actual design. So, it's going to automatically pick up on that change and allow us to apply it to multiple layers at the same time, same with our company slogan. We can check out where these text layers are as well just by clicking on this little text icon.

If you want to figure out which layer relates to what, you can just go ahead and click on that, and that's just a really easy way of jumping to that layer that's going to get updated when you do click that button. So, this is just a nice little preview. If you don't want to update any of them, you just uncheck them. For now, I'm just going to update them all. So, I'm going to click on "update Figma text layers" again, and that's going to go through and update six layers.

We can see here that "mobile design" has been updated in both of our layers here because we updated it in our group export. And you can see up here we've now got "hello" again in both these fields down here, and the company slogan that's been updated here and also in the footer. So, that's just a really easy way if you've got a lot of duplicate texts. So, for example, a lot of times you'll have buttons with the same label. If you just want to update them in one spot using the grouped export feature that we just went through here, grouping duplicate text layers is going to be really seamless way of updating the text in one place in your markdown file and then re-importing it back into Figma.

That's basically it for the Figma tutorial today. The last thing that you can do if you want to, as well, if you don't want to export entire frames, is you can just use this little quick export option down here. So, if you click on the quick export button with some layers selected, that will automatically just export certain text layers. So, you can just get a much smaller export if you just want to export certain layers instead of the entire Figma frame. You can go ahead and do that, export to markdown, and then re-import that using the import text layers button again.

Thank you as always for watching. I hope that's been helpful if you've been wondering how to use markdown files to update your Figma content easily. This is going to be a really quick way of going about it using the CopyDoc export and import feature. And we'll see you in the next Figma tutorial video very soon.

---

---
type: tutorial
title: How to export HTML emails from Figma to Pardot (Marketing Cloud Account Engagement) using Emailify
date: 2023-05-31T00:00:00.000Z
---

# How to export HTML emails from Figma to Pardot (Marketing Cloud Account Engagement) using Emailify



#### Video Transcript

Today I'm going to be showing you how to automatically upload HTML email templates from Figma into the Salesforce Pardot platform using the Emailify Figma plugin.

To get started, all we need to do is go to your Figma file and click on the "Resources" icon at the top. If you search for "Emailify", under the "Plugins" tab click on the Emailify item, you'll see this little window pop up. To run the Figma plugin, all you need to do is click on the "Run" button here, or you can click on this "More options" icon and click "Save Figma plugin." That will save it to your Figma plugins list for easy access later. I've already done that, so I'm going to my canvas, right-click anywhere, go down to "Plugins", then go down to "Saved plugins", and click on Emailify. That's just going to run the Figma plugin that we just saved a second ago.

If you're new to the Figma plugin, the way it works is it basically helps you design emails in Figma that can then be exported automatically to production-ready HTML from the Figma plugin. Let me show you an example. I'm just going to create a new frame called "Test Pardot Template" and click on "Add new Emailify container." I'm not going to go through all the design features of the Figma plugin in this tutorial. I'll just create a really simple template just so we can get a sense of how it looks in Pardot. I'm going to add a Pardot footer as well. If you go to the Footers tab in the Figma plugin and scroll down, you'll see the Pardot icon. Just go ahead and click on that, and that will automatically populate things like the unsubscribe link and the view in browser link. So you can see here I've got my unsubscribe link and view in browser link pre-populated. You can obviously style all these components to be on brand. As I mentioned, there are some other tutorials on the channel that go into way more detail about how to do that. But for today, I'm just going to be assuming that you've already got your template designed and customized the way that you want in Figma, and you now just want to upload it to the Pardot platform automatically.

Before you upload it, you can preview it by clicking on this little preview icon here. That's just going to preview the email in Figma so you can see what it's going to look like. If you're happy with the design, you can basically start the process of uploading it into Pardot by clicking on this "Export HTML" button in the Figma plugin. So click on "Export HTML." By default, it will automatically export it to a zip file on your computer, but we can change that by clicking on this little drop-down here. If you scroll down the list to the platform integration section, you'll see the Pardot option pop up. You'll notice that there are two Pardot options. The first one is the API upload, which is the one we're going to be focusing on for now. But there's also an option with a local zip export. If you just wanted to download the template directly to your computer and manually upload it, you can definitely do that as well. Just select the local zip export option, and it will export the template for Pardot with all of the template tags and things like that included. But for today, we're going to be using the API upload. So I'm just going to click on "Pardot API upload." This is going to prompt us to put in a few details.

I'll walk you through where to find these details in Pardot and how we can then upload this automatically to our Pardot account. So the other thing I should just briefly mention is that Pardot was actually renamed, so Pardot is now technically called  "Marketing Cloud Account Engagement" in Salesforce. I think most people still just call it Pardot, so that's the reason why that's the label in the Figma plugin. But I just want to clarify in case you're wondering why "Pardot" and "Marketing Cloud Account Engagement" basically the same thing, they just got different names in Salesforce; I just wanted to really quickly touch on that before we moved on.

The first thing we need to get is our Business Unit ID. So let's go ahead and find that Business Unit ID by going into our Pardot account. If you log into Pardot and open that up in the browser, you can basically find this page called the business unit setup page by going into your settings icon. So in the top right of Pardot, click on this little settings icon, then click on "Marketing setup," and that should take you to this page here where you can then click on this "Business Unit Setup" item on the left-hand side. So I've just clicked on "Business Unit Setup," and it should let you find this Business Unit ID. So it should start with "0uv" and have a bunch of other letters and numbers there. So I'm just going to copy that Business Unit ID to the clipboard. I'm going to highlight it, copy it, and paste that into Emailify. I'm going to paste that into the Business Unit ID field.

The other thing we need is our email address and password that we use to actually log into Pardot. So I'm just going to paste those in now. I'm going to copy and paste the email address, paste that in there, and then I'm also going to paste the password. I'm just going to paste the password in the password field and drop those in there.

And then we just need two more bits of information. So we basically need a "Consumer Key" and a "Consumer Secret". So I'll show you where to find those now. And to get those, we just need to go to a different page in Pardot called the App Manager. So you can get to the App Manager by going to the setup page. So you can get to the setup page by clicking on the little settings icon here, clicking on "Setup," and that should bring you to this setup page here. And then what you need to do in the left-hand column is scroll down to the platform tools section, expand the apps accordion, and then click on the "App Manager" menu item. So on the left-hand side, click on "App Manager," and that should bring up this lightning experience App Manager page that you can see here.

Assuming that you've already got an app, a connected app created, it should show up in this list down here. If you don't, you can go ahead and click on the "New Connected app" button and just set up a new connected app that you want to use with Emailify and fill in all the details and make sure that it can generate a Consumer Key and secret. So I've already gone ahead and done that, so I'm going to go down to my Pardot tests integration down here, and I'm just going to click on this little arrow on the right-hand side. So click on that little arrow, and that should let you click on the "View" item. So click on "View." And once you click on "View," that should bring you to another page just showing you the connected app that you've just clicked on. So you can see here I've got my Pardot test connected app. And what you want to do is basically go down here where it says "API Enabled OAuth Settings," and you want to click on the "Manage Consumer Details" button. So this should reveal your Consumer Key and secret, and you'll be able to copy-paste those to the clipboard.

I've already got those saved in a separate file, so I'm just going to grab them now and copy and paste them into my Emailify plugin. So first of all, I'm going to grab the Consumer Key. So I'm going to copy and paste that into the Consumer Key field, paste that in. Then I'm going to grab the Consumer Secret and paste that into the Consumer Secret field. And once we paste that in, it should automatically load the Pardot API, and it'll tell you that it's connected with Pardot if you entered the details successfully. So that's how you can connect to Pardot. So those details are now added and saved, so they'll automatically connect to this screen that you can see.

You can see that now that we're authenticated, it's basically showing us some different fields that we can now select for uploading our HTML to Pardot. So I'm mindful that there are a few steps here just due to how complicated the Pardot API process is, but we've only got a few more things to get through, and then we'll be able to upload these to Pardot from Figma.

You can see here that we've basically got a few different fields. So we've got this dropdown over here, and this dropdown allows us to select the campaign that we want to add the email to. So you can basically scroll down and pick the campaign that you want to select. So I'm just going to select this "Email Figma Plugin" campaign that I've got in Pardot.

Then in the middle column here, this will allow you to select the folder name that you want to save the email into. So I'm just going to select the "Email Templates" folder.

Then you want to select the tracking ID. So you want to select the tracker domain. So you'll have a bunch of different options here. Just select the one that you want, and that'll be the tracking domain that any links and all that sort of stuff gets tracked against.

The last thing we need to populate is just the sender name and email. This isn't going to send out any emails at the moment, but it just needs to pre-populate those fields. So I'm just going to add my name and email into there. And then we should be ready to go.

Once you've populated those, the button should become available to upload this to Pardot. You also have the option of making the template editable. So if you want to add the Pardot editable region tags and things like that, you can select that option. Today, I'm just going to leave that turned off. And then I'm just going to click on the "Upload to Pardot" button.

We can also add the subject line. So I'm just going to do "Test Subject" and "Test Pre-header." And then I'm going to click on the "Upload to Pardot" button to upload the template. So I'm just going to click "Upload to Pardot." This will automatically generate the HTML, upload any images, and then upload the template to Pardot.

You can see that it's telling us that the Pardot templates have been uploaded, and we can view them in our email accounts under the Pardot account. So to view the Pardot template that's been uploaded, you can go back to your browser and find this page here, which is the email templates page. A quick way to get there that I've found is to go to the top left corner here and click on this little menu icon, and that'll allow you to search for things in Pardot. So if you search for "Engagement" and go down to the items down here and click on "In-account Engagement Email," and if you click on "Account Engagement Email," that'll bring up this email templates page.

Under your email templates list, under the published templates, you basically want to find the name of the email that you just uploaded. So in this case, I'm just going to click on the "Test Pardot Template," and that should load up the template that we just set up a second ago.

You can see here that we've got our content, we've got our HTML that we just uploaded from Figma, and we can see that it's added the tracker domain that we specified and the test subject that we specified, including the sender as well. So it's got our general sender that we added, which is currently just my email address, and it's been uploaded to the folder that we selected in the Figma plugin, the "Email Templates" folder, along with the name of the template, which is just being taken from the Figma frame name. So if you want to change the name of the template, you can basically just update the name of the frame here in Figma, and that will automatically change the name when it gets uploaded into Pardot, as we just saw.

That's basically it. As I mentioned, there are a few different steps involved in getting those initial details, but once you've got those added into the Figma plugin, you can basically just keep uploading templates from this Figma file. If you start up a new Figma file with new templates, you'll just have to drop in those credentials again. But that should hopefully be in there for this particular file. So you can continue uploading templates into your Pardot account from Figma.

Thanks for following along with this Figma tutorial, and I hope that's helpful if you've been wondering how to automate uploading HTML emails from Figma into your Pardot account. This should hopefully make that process a little less painful. So thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export HTML emails from Figma to Salesforce Marketing Cloud using Emailify
date: 2023-05-30T00:00:00.000Z
---

# How to export HTML emails from Figma to Salesforce Marketing Cloud using Emailify



#### Video Transcript

Today I'm going to be showing you how to automatically upload HTML emails from Figma to the Salesforce Marketing Cloud (SFMC) platform using the Emailify Figma plugin.

All we need to do to get started is go to the little "Resources" icon at the top of your Figma file. If you click on that and search for "Emailify", and under the "Plugins" tab, you'll see Emailify pop up. To run the Figma plugin, you can just click on the "Run" button here. Or, I'd recommend clicking on this "More options" icon and just clicking "Save Figma plugin". That's going to save it to your Figma plugins list for easy access later.

I've already gone ahead and done that. I'm going to go to my canvas, just right-click anywhere, go down to plugins, then go down to saved plugins, and click on Emailify. That's just going to run the Figma plugin that we saved a second ago.

If you're new to the Figma plugin, the way that it works is it basically helps you design emails in Figma that can then be exported to production-ready HTML automatically. So, just for example, I'm just going to create a new email here. I'm just going to call it "new MC email," with "MC" being Marketing Cloud. I'm just going to be populating a few different fields here just to make a really quick design.

I'm not going to be going through all of the design elements and how to actually customize the designs. There are some other videos on the YouTube channel if you want to go through those. Today, I'm just going to be focusing on how to get the email up into Salesforce Marketing Cloud (SFMC) from Figma automatically, assuming that you've already finished your design.

The one thing I will show you is under the "Footers" tab. It's easy to add a Salesforce Marketing Cloud (SFMC) footer just under the platform section here. If you click on the little "Salesforce Marketing Cloud" footer item, that's basically going to automatically populate the required fields needed for your Salesforce Marketing Cloud (SFMC) template.

If we have a look at the settings here, you can see the unsubscribe links already in there, and we've got the automated address and view email URL link. You can obviously customize the design of this, but for today, we're just going to be focusing on adding a really basic design to show you how the upload works. So, I'll just add one more image, and then we'll be ready to go.

I'm happy enough with that email for now. So, to export this to HTML and upload it to Salesforce Marketing Cloud (SFMC) automatically, all we need to do is click on the "Export HTML" button in the Figma plugin. Then, you can just change this HTML email option and scroll down to the platform integrations and just select the "Marketing Cloud" item. So, click on "Marketing Cloud," and you'll see the little Salesforce icon.

If you need help finding the keys, you click on this little link here, but I'll show you how to do that in Salesforce Marketing Cloud (SFMC) as well. So, we need three things. We need a base URL, a client ID, and a client secret. The way that we can get those details is if you go to your Salesforce Marketing Cloud (SFMC) instance and just log in. Then, if you go to the setup page, if you click on your account name and go to setup as a menu option, you'll see the setup page in your browser.

Then, what you want to do is go down to platform tools and expand the apps dropdown, and then just click on "Installed Packages." Then, you should see a menu item or a button rather called "New." So, if you click on the "New" button, it should give you this modal here which asks for your new package details. You can give that a name. So, in this case, I'm just going to give it a name of "Emailify" and pop in "Figma integration" into the description, just so we know what it is.

Then, you can go ahead and click on "Save," and you'll see that it'll create a new package called "Emailify." So, once it's done that, you basically want to go down to this "Components" section here, click on "Add Component." So, I'm going to click on the "Add Component" button. Then, we want to select the API integration option and click "Next."

Then, we want to change this one to "Server to Server." So, we're going to change it from web app to server to server. And once you've got that selected, go ahead and click on "Next" again. And then, finally, we want to set the permissions for the component. So, what we need to do here is basically add some permissions.

Under channels, under the email channel, you just want to select "Read" and "Write," so those two are selected. And then, the other ones you want to select are under this "Assets" heading here. So, we can just select "Read" and "Write" for the documents and images and saved content subsection. And that should be all that you need to give the API enough permission to add email templates automatically from Figma.

So, once you've got those permissions selected like this, go ahead and click on "Save." And that should add the component to your package. So, now that we've got that saved, we want to now copy these details down here. So, we're going to grab the "REST Base URL". So, I'm going to click on this little copy icon, go back to Figma, and paste that into the REST Base URL field here.

Then, I'm going to grab the "Client ID". So, I'm just going to copy the Client ID from Salesforce Marketing Cloud (SFMC), paste that into Figma, and do the same thing for the "Client Secret". So, I'm going to grab that, copy that Client Secret into here, and then we're basically ready to go.

You can add a subject line if you want. So, we can call this "test subject" and "test pre-header" to put something in there. And now, when you're ready, just go ahead and click on the "Upload to Marketing Cloud" button. And that's just going to export the HTML and images from Figma, and it's going to automatically upload them into your Salesforce Marketing Cloud (SFMC) templates.

So, you can see here that it's been successfully uploaded. So, we can view these by going to the Content Builder page once we've logged into the Salesforce Marketing Cloud (SFMC) account. So, I'm already logged into the Salesforce Marketing Cloud (SFMC) account. So, I'm just going to go ahead and click on this "Content Builder" page link. And that's going to open up the Salesforce Marketing Cloud (SFMC) Content Builder link.

So, this is going to give us access to view the email template that we just uploaded from Figma into the Salesforce Marketing Cloud (SFMC) account. Now, we can see we've got our new MC email here. That's the one we just uploaded from Figma. And you can see that if we click on it, we can now see exactly what was uploaded from Figma.

So, we've got our test subject and test pre-header, which we just added through the Figma plugin. And you can see that we've got our Emailify app user as the owner. So, it's been uploaded via the API using the package that we just created. And you can see here, this is real HTML. This is exactly what you expect from the template from the design in Figma. And this is now ready to use as an email template in Salesforce Marketing Cloud (SFMC).

So, we've got our footer links in there. We've got our text, and we've got our content as we'd expect. So, you can now basically use this however you want in Salesforce Marketing Cloud (SFMC), and that'll be your email template going forward for whatever you want to use it for.

So yeah, that's basically it. And there were a few steps to get through for the first time. But now that you've created that package in the setup area under "Installed Packages," you can basically now reuse these details in Emailify. So, if you spin up a new Figma file and you need to paste in credentials again, you can basically just copy and paste them again from this same page.

And you can reuse them as many times as you need from this API installed packages page in Salesforce. So yeah, I hope that's helpful. And if you're using Salesforce Marketing Cloud (SFMC), please feel free to give this integration a try from the Emailify Figma plugin. And hopefully, it'll make your life a little bit easier, not having to manually create the templates in Salesforce each time.

So, we'll leave it there for today. Thank you, as always, for watching. And we'll be back soon with more Figma tutorials like this one.

---

---
type: tutorial
title: How to use the analytics dashboard and link tracking for Figma presentations using Pitchdeck
date: 2023-05-29T00:00:00.000Z
---

# How to use the analytics dashboard and link tracking for Figma presentations using Pitchdeck



#### Video Transcript

Today I'm going to be showing you how to view analytics for your presentations created in Figma using the Pitchdeck Presentation Studio Figma plugin. 

To get started, all we need to do is go to your Figma file and click on the little "Resources" icon at the top. If you search for "Pitchdeck" and then click on the "Plugins" tab, you'll see the Pitchdeck Figma plugin pop up. All you need to do to run it is click on the result and then click on the "Run" button down here. Or, I'd recommend clicking on this more options icon here and clicking "Save Figma plugin." That's just going to save it to your Figma plugins list for easy access later.

So, I've already gone ahead and saved my Figma plugin to my list. I'm going to go to my canvas, right-click anywhere, go down to "Plugins", then go down to "Saved plugins", and click on the Pitchdeck item. That's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way it works is it basically allows you to take any of your frames that you've designed in Figma, and each of those frames gets treated as a slide in the Figma plugin. So, you can go ahead and create these slides in 16x9 ratios, typically 1920 by 1080, and you can start constructing your slide deck in the Figma plugin, which can then be exported to various formats.

Today, I'm not going to be going into details about how to design the slides or how to add animations and things like that. There are some other videos on the channel if you want to check those out. Today, I'm just going to be assuming you've already got your presentation ready to go, and you want to upload it to the Pitchdeck presentation web app and then look at some analytics based on who's viewing those slides.

So, let's get started by first uploading the presentation. You can see here, if we go to the analytics button, now it's going to tell us that we need to upload the presentation to the Pitchdeck web app first. So, we can do that through the export panel. If you close that off and just go straight to the export panel, you can click on this export button in the top menu here. Then, you just want to make sure that the Pitchdeck presentation option is selected as the format. There are some other options you can export to, like PowerPoint and PDF, but the analytics feature only works for the web presentation. So, I'm just going to make sure Pitchdeck presentation is selected as the format, and then I'm going to click on "Upload web presentation." This is just going to export the slides and create a link that you'll be able to use to view the presentation in the browser using the Pitchdeck presentation web app.

You can see here we've got our presentation uploaded. So, we can see what that looks like just by copying the link, clicking on the little copy icon, and then pasting that into the browser. I'm just going to paste that in there now, and this is going to load up the presentation that we just uploaded from Figma. You can see here we've got our slides, we've got our first slide, second slide, and all of the other slides as you'd expect. So, you can go through these and view the presentation directly in the browser. You can basically share this with someone, or you can present the deck yourself using the Pitchdeck web app.

Now that we've got this loaded and now that we've had a look at it in the browser, what we can do is actually now close off this presentation. If I go back into my Figma file, because I've now uploaded the presentation, if I go back into the Figma plugin main screen and just click on the analytics button, this time, because we've got a link created, you can now see that the analytics panel loads up with some statistics based on what kind of activity the link has had.

If we click on this activity tab up here, you can basically see the session that we just had in the browser. So, the one we just opened up a minute ago, this is a record of that session. If we expand this out, we can basically see all the slides that we looked at, what time the presentation was opened, when it was closed, and if we click on any of these slides, this will basically jump to those slides in the Figma file. So, you can see exactly which slide was which. We can also see a graph of views, showing which slides have actually been viewed and for how long each slide was viewed for. You can see here, this is a total duration of each slide. We can see here that the third slide was the one that had the most time spent on it, and the same with views. You can see these are basically all even because there was only one slide viewed.

Going back to the overview, the other cool thing we can do is create custom links. Instead of just having the default link which we got from the export panel over here, you can also create custom URLs. You can get to that either by clicking on this link here or just clicking on the analytics button. What that allows us to do is basically create custom URLs that we can attribute later. So, what I mean by that is if we create one for me, I'm just going to put my name in there and click on "Create new custom share URL." That's going to give us a brand new custom URL over here.

If we open up this settings panel, you can see here that we've got a brand new link that is specific to this link. If we click on the copy button down here and open that up in the browser, I'm just going to paste that in and load that up. You can see here the presentation is the same, so it looks exactly the same. The one thing you'll notice is that the controls at the bottom have been simplified. It only gives you access to the thumbnails for jumping around. If you did want to enable those controls and have more of those advanced features available for the person viewing, you can do that by toggling this "Enable all toolbar buttons" switch on. But by default, that's turned off. The other thing you can do is turn off activity tracking. So, for whatever reason, if you didn't want any activity to be logged on this particular URL, you can turn off activity tracking. By default, it's turned on. You can also disable the link entirely. If you wanted to decommission the link just for this person or just for this group, you can toggle that on, and that will disable the link. We can basically see what that looks like in a second if we just go through a few of these different slides, just to get some analytics data in there that we can look at in a second.

If we now go back into the Figma plugin and we decide to disable that link, we can check "Disable link", if we now try to visit that link again, I'm just going to reload the page, it's going to tell us that the presentation wasn't found. That just means that the person who has the link isn't going to be able to view the presentation with that setting turned off. So, if you basically want to archive a link for a certain person or a certain group that you've shared a custom URL with, you can do that just by disabling the link, and that will put it out of commission. You can re-enable that at any time as well, just uncheck that link, and then if you go back to your browser, paste that link in again and refresh, you can see that it's active once again. That's just a really quick way of decommissioning links if you wanted to archive them or turn them off for someone that you sent it to who you no longer want them to have access to.

That's basically what it looks like there. The cool thing is, because we've got this new custom link created, what we can do is basically filter by that person. If we close off our presentation here and go back to our Figma file, what we can do is refresh the data just by clicking on this little refresh icon up here. Click on refresh, and it's just going to refresh our analytics. We can see now that we've got three link opens, still one unique visitor because it's just me, and we've got a 48% completion right now and one minute 10 seconds of total time viewed, and all that sort of good stuff. But what we can do is, if we just want to narrow that down to that custom link, we can go up here to this dropdown box and instead of saying "Show all presentation data," we can say "Only show data for Adam." I'm going to click on that option now, and that's basically just going to filter it down to any activity that was specific to that custom link that we just created. It's going to exclude all the other activity. It's only going to include any activity that was created under that particular link. We can see here we can show all of the data, and then we can show just that link. You can see that it's quite different down here.

This also applies to all the other tabs. If you go to the activity tab, you can see here that if we only show data for me, it's going to show those two entries, or we can show all presentation data and get that third entry in there with the default link as well. You can also just filter by non-custom links. So, if you've got a bunch of custom links but you only want to see the data for the default link, which the Figma plugin creates automatically, you can filter down by that as well. So, you've got a few different options for filtering out the data, and you can see here that we've got our data basically tracking what kind of journey that user went on in the slide deck. You can see here they open the presentation at this time and then basically went through a bunch of these different slides, clicked around a little bit, viewed different slides for different durations, and then closed out the presentation. That's basically what it looks like there.

The other cool thing you can do is download this data to a CSV. You can click on this "Download CSV" button. I'm just going to do that now, save that to my desktop, and if I open up that CSV as a preview, you can see here that the CSV file we just saved to the desktop basically contains an export of all the data that's in the activity Figma plugin. You can see here we've got the open time, the location, how many interactions, total duration, and this is filtered by whatever options you put in the top here. So, we can export it with all of the data. We can do that again, download the CSV again, save that to the desktop. I'm just going to replace that and open that up again, and you can see this time it's included the default share link as well. So, we've got all the data in there.

The other thing you can do is filter by time. So, if you wanted to only show activity from the last 24 hours, you can do that, or the last week, the last two weeks, the last three months. You can basically specify time, but by default, it's going to do from all time, from whenever the presentation was first created or whenever the first person viewed it, which is in this case today. Finally, the other thing you can do is exclude yourself from the data. Basically, if you are creating these links or viewing the presentation on your own computer, in this case, we're doing all of this on the same computer, and we're basically including our own views by default. Even though I've created the share link here and maybe I want to send that to someone else, because I've already looked at that, this data is coming from me. If you want to exclude that, you can click on this "Exclude your views" toggle up here, and that will basically exclude any activity that has happened on your own machine, whatever you're currently using on your computer to use Figma. You can exclude your own views from the data, which might be helpful if you just want to tidy up the data by excluding your own views.

You can see here there's basically no data at the moment because we're the only one who's looked at it, but if we include our own views again, you can see it's going to give us all the data there as well.

That's basically what it looks like, and yeah, that's basically it. You can create as many of these share links as you want. So, if you want to share them around with different stakeholders, different investors, different clients, you can create an individual link for each of them, and that will be their own special link that you'll be able to see exactly what kind of activity that link is getting based on who you've shared it with. You'll get a nice breakdown in here over time when all of that data kind of starts to make more sense when you've had more than a couple of views on it. It'll start to be more meaningful over time.

We'll leave it there for today. I'm sure the feature is going to be improving over time, but this is kind of the first initial version of it just with some basic analytics at a high level, and then, of course, the detailed views that you can go into as well, as we just looked at.

So, yeah, we'll leave it there for today. I hope that's been helpful if you've been curious about how your presentations are performing once you do share them around. This is going to be a really easy way to get a quick overview of what slides are most popular, who's looking at what, and yeah, hopefully give you a bit more of an idea of what's working and what you might need to tweak.

Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to bulk export original image files from any Figma layer fills from Figma using TinyImage
date: 2023-05-19T00:00:00.000Z
---

# How to bulk export original image files from any Figma layer fills from Figma using TinyImage



#### Video Transcript

Today, I'm going to be showing you how to automatically download the original image files that are being used in your Figma image fills using the TinyImage Figma plugin. 

To get started, all we need to do is go to the little "Resources" icon at the top of your Figma file. If you click on that and search for "TinyImage", you'll see TinyImage pop up under the "Plugins" tab. 

If you go ahead and click on that, you can then run the Figma plugin by either clicking on this run button here, or, I'd recommend, clicking on this little more options icon here and just clicking "Save plugin". That's just going to save it to your Figma plugins list for easy access later. I've already gone ahead and done that. I'm just going to go to my canvas, I'm just going to right-click anywhere and go down to "Plugins", and then I'm going to go down to the "Saved Plugins" item. Then I'm just going to go down to the TinyImage option and that's just going to run the Figma plugin we saved a second ago.

For today's Figma tutorial, I really want to show you how to export the original images that are being used in your Figma file. I've just got this Figma file from the Figma Community which is a mock-up of the Spotify app, and you'll notice here that we've got an image fill on each of these layers. 

Unfortunately, we can't extract that original image easily from here. Sometimes there's a way to do it through the inspect panel, usually there'll be a little link down here where it says background and then the jpeg file, usually you can click on that and it'll let you download it individually, but it's quite time-consuming to go through all of the layers and do it manually. 

So, I'm going to be showing you how to extract all of the original image fields that are being used on your layers automatically in one go. The way we can do that is by going to the downsizer function in the TinyImage Figma plugin. If you click on this little "Downsizer" button here, that's basically going to open up a new panel which shows all of the image fills on your page. 

We can narrow this down by frame. If you just wanted to find them all for this Frame one, we can just click on that frame, click on the refresh icon, and that will just find all of the image fills in this particular frame. If we were to rename that, you can see we'll change that one to album cover and just refresh the selection. 

Now we've got those selected, and I want to export all these image fills. All I need to do is go down here to the bottom of the Figma plugin and click on this button that says "Export Figma Image Fills". I'm going to click on that now, and that's basically going to export all of the fills to a zip file. 

I'm going to save that zip file onto my desktop. I'm just going to open up the zip file now, and if I open up the folder you can see here that I've got all of my image fills exported. 

We can do the same thing over here. If we wanted to export this Frame, we can just jump back in to the downsizer feature, click on the "Export Figma Image Fills" button again, and that's just going to export that next batch of images. 

For example, this top image here, which is quite a large image. If we actually track that down in the design, you can see here that it's quite small, the image layer itself is actually very tiny. But because we're exporting the original image that was used, that was dragged into the design from somebody's computer, it's exporting that original image. The original image is much larger in this case and that's why it's getting exported. 

That's basically it. If you want to do it for the whole file, you can definitely do that as well. Just click on the "Downsizer" button again, and if you don't have any layers selected, click on the refresh icon, it'll say refresh all of the fills on the page. 

I'm just going to click that, and then you can either export everything or just check the ones you want to export. In this case, I can show you what it looks like to export them all. I'm just going to click on "Export Figma Image Fills" again, and this is basically going to go through and automatically export 76 images. 

These are all the image fills from the entire Figma file, and we can basically go through those and use them or reuse them. You can do whatever you want, but this is going to be the quickest way to get all of those original image fills out of the file if you do need to use them. 

Then, if you want to avoid doing it manually, or as I showed you before, sometimes it just doesn't show up in the inspect panel, that is another way you can do it, normally manually, but in this case, it doesn't seem to be wanting to give those up. 

Hopefully, this helps if you've been wondering how to export the original images or the original image files from your Figma file, they're definitely in there, it's just a bit tricky to get them out. Hopefully, this will help you get them out much easier with one click using the TinyImage Figma plugin. 

We'll leave it there for today, thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to embed Canva designs in Figma presentations using Pitchdeck
date: 2023-05-10T00:00:00.000Z
---

# How to embed Canva designs in Figma presentations using Pitchdeck



#### Video Transcript

Today, I'm going to be showing you how to embed designs from Canva directly into your Figma presentations using the Pitchdeck Figma plugin. 

To get started, all we need to do is go to your Figma file, click on the little "Resources" icon at the top, and if you search for "Pitchdeck" and click on the "Plugins" tab, you'll see Pitchdeck pop up. Just go ahead and click on that item, and you can then run the Figma plugin by either clicking this run button here or, I'd recommend, clicking on this more options icon over here and clicking "Save Figma Plugin." That's just going to save it to your Figma plugins list for easy access later. I've already gone ahead and done that.

I'm going to go back to my Figma canvas and right-click anywhere. I'm just going to go down to "Plugins" and go down to "Saved Plugins" and then click on the Pitchdeck item to run the Figma plugin that we just saved a second ago. If you're new to the Figma plugin, the way that it works is it basically treats any frames that are directly on your Figma page as slides. You can create these frames at 16x9 ratios normally – these ones are at 1920 by 1080 – and then you can just go ahead and put in any content layers that you want. I've got text layers in mind; I've got some images in mind, and then in the Figma plugin, it'll load those frames up as slides, as you can see here, and then you can do things like add animations and embeds and links and things like that onto the slide layers too.

For today, I'm just going to be focusing on how to embed a design from Canva. Canva.com is basically a popular design platform that allows you to design things like websites, documents, and graphics using their own platform interface. It's separate from Figma, but you might want to design some assets or websites in Canva and then embed those into your Figma presentation. That's what we're going to be doing today. I've basically got a design here, which is just a little portfolio site created in Canva. If we open that up, you'll obviously have a different type of design, but the interface should look very similar.

The way that we can embed this into our Figma presentation is we need to go up to the right-hand side here in the top and click on this share icon. If you click on share in Canva and then go down here, you'll see that there's this little "more" option at the bottom of the share pop-up. If you click on more, that will give you a range of extra options for publishing or sharing the embed, and the one we want to go to is this one down here called "Embed" with the little code icon. If you click on embed, it's going to ask you if you'd like to enable the embeds. This is a really important step; this is going to tell Canva that you want this design to be embeddable on other websites. We're going to go ahead and do that. I'm going to click on this embed button, and this is going to make the design public. You can read a bit more about that if you want, but we need to click on this embed button here. I've just clicked on that now, and it's telling us that our embed links have been created.

We basically created the embed; it's now live, and now what we need to do is go down to this second link here called "Smart Embed Link." That's the one that we want, and it's going to look like this, as you can see here. Just go ahead and click on the copy button. I'm going to click "copy"; that's just going to copy the Smart Embed Link from Canva to my clipboard. Now, I'm going to go back to Figma, and I've got a slide set up over here in my designs in Figma. I've got a placeholder, which is basically this gray rectangle frame here; it's just a normal rectangle frame, and that's just a placeholder frame that I'm going to add my embed into.

If you select that slide in Pitchdeck and then click on the Embeds tab (by default, it's on animations), find that slide, and I've just got the slide here, I'm going to click on that input and paste it. I'm just going to click "paste," and you can see here when I paste the Canva embed link that we copied into the input field for that embed layer, it's basically gone ahead and embedded that Canva design directly into my slides. That's pretty cool; that means we can now interact with this directly in the presentation. I can skip through these frames from Canva and have that show up in my presentation.

You might want to adjust the aspect ratio of that as well. If you've noticed that there are these lines on the side, that's because the aspect ratio is probably a little bit off. You could tweak that. If you just tweak the width of that and refresh, you'll be able to get that looking much better. It's really up to you what kind of size you create the embed; it's just going to be based on whatever the Figma layer size is, and you can basically just embed that as you like.

We've also got a little bit of a fade on there, so that's just going to fade in from the bottom when it gets introduced. We can extend that if we want to and see what that looks like. That's just going to add a little fade, and you've got all your Canva controls down here as well.

Now, if we actually want to present this to somebody, what we can do is go ahead and click on the Export button in the Figma plugin. If you click on Export in the top right corner of Pitchdeck and then want to make sure that the "Pitchdeck Presentation Web URL" option is selected. There are a few different options; you can export to PowerPoint or PDF, but the Canva embeds are only going to work in the Pitchdeck web presentation URL. I'm going to select that, and I'm just going to go down here, and I've already created one; it'll say "Upload Presentation" if you haven't created it already. I'm just going to click on "Update Web Presentation," and that's going to export all the slides for me and upload those to the Pitchdeck web presentation format.

This is going to give us a link, so it's going to give us either a URL with a separate password that you can send to the person you want to share the deck with, or you can click on this "Passwordless URL," which will automatically log them in without needing a password. I'm just going to use the passwordless URL option for today. You can just go ahead and click on this Passwordless URL link or copy it to your clipboard. I'm just going to click on the link for now and open that up in the browser, and you can see once it loads the presentation, you'll have all your slides in there, as you'd expect.

We've got a few different slides here with normal content, and then our fourth slide is our Canva slide. If we click on slide four, you can see that it's now loading up our Canva portfolio site that we included as an embed. This is inside of our presentation, and we can click through that now as if it was a native embed of that Canva presentation, which it is. We can basically treat this as if it was a normal Canva link that's been embedded in the presentation. You can do everything that you'd normally be able to do with the live embed link, but you can do that all inside of the presentation itself.

This is a really nice way of embedding things like portfolios, websites, documents, or anything that you've created in Canva. You can embed it into your Figma presentation that you give using the Pitchdeck Presentation Figma plugin and web app. That's basically what it looks like; you can apply this to any of your Canva designs, as I mentioned. You just have to go through the same process: click on the Share icon, go down to "More," then click on the "Embed" button, and just make sure the embeds are enabled. If you do want to unpublish that, you can click on "Unpublish this design," and that's basically going to unpublish the embeds. If we now refresh this presentation, that's not going to load up the embed that we created. You can see here it says it's forbidden because we basically disabled embeds.

You've got control over that; if you want it to show up, you obviously have to click "Embed" and publish that as a live embed, and then that will work when you copy that embed URL. You can see here it's back because we just enabled it again, and that's what that looks like there.

In summary, you just have to enable the embeds, copy the Smart Embed Link, and paste that into Figma into the Pitchdeck Presentation Studio Figma plugin, and you'll be good to go. We'll leave it there for today. I just wanted to give you a quick run-through of how Canva embeds can work in the Pitchdeck Figma plugin. If you've been wondering how to automatically embed live Canva designs into your Figma presentations, this is a really quick way of going about it.

I hope that helps if you've been wondering how to use Figma with Canva in your presentations. Feel free to give Pitchdeck a try, and I hope that it works well for you. We'll leave it there for today; thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to add hover colors to text links in HTML emails from Figma using Emailify
date: 2023-05-09T00:00:00.000Z
---

# How to add hover colors to text links in HTML emails from Figma using Emailify



#### Video Transcript

Today, I'm going to be showing you a Figma tutorial on how to add hover states to text links inside of your HTML email designs in Figma using the Emailify Figma plugin. 

To get started, go to your "Resources" icon at the top of your Figma file and click on that. Search for "Emailify," and under the "Plugins" tab, you'll see Emailify pop up. Click on the Emailify results and run the Figma plugin by clicking on the run button, or I'd recommend clicking on the small options icon and saving it to your Figma plugins list for later.

I've already done that, so I'll go to my canvas. Right-click anywhere, go down to "Plugins", then go down to saved plugins and click on Emailify. That's going to run the Figma plugin we saved a second ago. If you're new to the Figma plugin, it allows you to design HTML emails in Figma and then export them automatically to HTML. I won't be going through the design process or the other components in the Figma plugin today. You can find detailed tutorials on the channel if you check out the Emailify playlist. Today, I'm going to assume that you've already got your design ready, and you want to style inline links and their hover states. I'll show you how to change the color of the links on hover.

First, to add links to a text layer, select your Emailify text layer and highlight the part of the text you want to link. For example, if I wanted to link this highlighted text, I can highlight it and click on the create link icon in Figma. That will give me an input to paste or type in a URL. I'll type in google.com, and you can see it adds a link to your Figma layer. You can add links wherever you want, to different text layers or multiple links per text layer.

Now we've got two different links, and you can see when I preview the HTML in the Figma plugin by clicking on the preview icon, we've got our links in their default state. To add a hover state to those links, click on the text layer you want to add hover styles to, and in our Figma plugin, we've got this HTML and mobile settings button. Click on that, and at the bottom, there's a box called "Links Hover State" with an input field to paste in a text links hover color. Whatever we put in there will become the hover color when we hover over it in the HTML.

I want to make this orange, so I'll click on this layer with a saved color and copy the hex value to my clipboard. With the text layer selected, paste that into the input field and add a hash. Now preview that again, and you can see when we hover over it this time, we've got an orange hover color being applied. We can also add a slight fade transition. Check the "Fade Transition" checkbox in the settings panel, and refresh the preview. You'll notice the hover effect has a slight fade transition, which is optional.

The other type of layer we can apply these to is navigation layers. With Emailify, you can add navigation components, which are rows of link layers. You can add different links with URLs on them. If we open up the settings panel with one of these link layers selected, you can see we've got a clickable link URL property. We can paste in links into each of those layers to make them clickable links in a row navigation style.

If we want to do the same thing for these types of links, which are different from the Figma links, click on the navigation layer, the parent layer for these link components. With the navigation layer selected, click on the "Links Hover State" input again, paste in the hex value, and put that in there. Refresh the preview, and you'll see that all of these links now have that hover color. We've got them all changing color at once, even though we only applied it to one layer. This is a nice way of applying hover styles to the navigation component if you're using that in your email.

Again, you can use the same fade transition on that one too. You'll notice that with the other text layer, because we haven't added any hover styles, those are just defaults. It's clickable, but it doesn't include the hover style. One small caveat to understand is that there's a link that will take you to a webpage with a list of supported email clients. Click on that link, and it will open up a new page in your browser, giving you a breakdown of which email clients and devices support these hover styles.

You'll notice that some clients will support it, like Apple Mail and Gmail on desktop. However, mobile devices generally won't support it because there's no hover state on mobile. Also, with Outlook on desktop, you're going to get little to no support on Windows. You might get some support on macOS, but as far as Windows goes, you're probably going to have a rough time getting hover effects to work. It's worth being mindful of and thinking of it as a progressive enhancement rather than something that's being relied on. Include it as a nice-to-have feature if the email client supports it.

That's it for today. I covered button hover effects in a different tutorial, so if you're interested in applying similar hover effects on button components, you can check out the other tutorial. For now, I'll leave it there. If you wanted to know how to add hover states or change the color of your links and inline links on text layers, this is an easy way to do it using the Emailify Figma plugin. Feel free to try it with your team.

As always, thank you for watching. We'll be back soon with more Figma tutorials like this one.

---

---
type: tutorial
title: How to embed website iFrames in Figma presentations using Pitchdeck
date: 2023-05-08T00:00:00.000Z
---

# How to embed website iFrames in Figma presentations using Pitchdeck



#### Video Transcript

Today, I'm going to be showing you how to embed websites as iframes in your Figma presentations using the Pitchdeck Figma plugin. 

To get started, all you need to do is go to your Figma file and click on this little "Resources" icon at the top of the file. If you search for Pitchdeck under the "Plugins" tab, you'll see Pitchdeck pop up. If you just go ahead and click on that item, you can run the Figma plugin by either clicking on this run button here or, I'd recommend, clicking on this more options icon over here and clicking "Save Figma plugin." That's just going to save it to your Figma plugins list for easy access later. I've already gone ahead and done that.

I'm going to go to my canvas and right-click anywhere, just go down to "Plugins", then go down to "Plugins" and click on the Pitchdeck item. That's just going to run the Figma plugin that we saved a second ago. If you're new to the Figma plugin, the way that it works is it basically allows you to add different frames to your Figma file, and those get treated as slides. You can see here I've got a bunch of different frames; these have all got different content layers in them. Inside of the Figma plugin, you've basically got those slide layers show up on the right-hand side here, where you can add things like animations, embeds, links, and all those good things that we'd want to add into our presentations.

For today, I'm just going to be focusing on how to add websites as iframe embeds into any of your slides. We're going to do that by creating a slide with a couple of placeholder layers. You can see here I've got two placeholder layers; I've got a placeholder layout rectangle for a small screen and a large screen. I'm going to embed a website URL into both of them. The way we can do that is we just go to our embeds tab. With the slide selected, go to the embeds tab over here in the Figma plugin, and that's going to allow you to paste in a URL to embed into those different layers.

For today, I'm just going to be using Wikipedia as an example. If I wanted to add a Wikipedia article about data Rams, I can do that by copying the URL from my browser, and then in each of these placeholder frames, I'm just going to paste in that URL. That's basically going to embed the link as an iframe. Don't be too worried about the overflow that's happening here; the reason for that is because the Figma plugin window is quite small, and it's loading in this iframe in the small preview. It's going to look a bit funny, or it might load up the mobile version, but we can see what that looks like on the large screen if we now export this presentation and present it in the browser.

The way we can do that is just by going into the Figma plugin header and clicking on the export button. Then, if you just make sure that the Pitchdeck presentation web URL format is selected, there's a few formats you can select for exporting. The embeds are not going to work for things like PowerPoint files or PDFs, so if you want to use these website embeds, you've just got to make sure the Pitchdeck presentation option is selected. Then, you can click on the "Upload Web Presentation" or "Update Web Presentation" button here, and that's just going to export all of the slides in your presentation to the Pitchdeck web app. We're going to be opening up that URL in a second, and I'll show you what that looks like now.

We've got our presentation ready, and you can either copy the URL down here, so this one doesn't need a password, or you can share the password separately with the URL. Today, I'm just going to be clicking on the passwordless URL and opening that in the browser. Once that loads, you'll be able to see that we've got our presentation here, as we expect. We've got a few different slides, but we've got our fourth slide, which is the website embed slide. If I click on that now, you can see that we've got our Wikipedia article embedded directly into the page. We're able to basically interact with this website as if we were browsing through it on a different tab, but we've got it added directly into our Figma presentation. I've got two on mine; I've got a desktop and mobile version, so you can see here the mobile version of the site and the desktop version side by side.

This could be really handy if you're presenting a website that's in progress. Let's say you're an agency and you're presenting work in progress or final live versions of a website that you've developed for your clients; you could compare a website for mobile and desktop next to each other in a slide and go through different pages of that website dynamically in your presentation to them. The one caveat with this is that it will only work if the website doesn't have a cross-origin policy on it that blocks the website from being embedded in other URLs or other websites. For Wikipedia, it's fine; for some other websites, that'll be fine, probably for your own websites as well, it'll be fine. But if you try to embed sites like Google, for example, that's probably not going to work.

We can just try that now. If we try to add google.com, you can see here that it's basically just giving us a white frame, and the reason for that is that there's a cross-origin policy on a site like Google which basically tells other websites that if you try to load their website in through an iframe on a different domain other than Google, then it's going to not let you do that. It might be for security reasons or privacy reasons, but in this case, Google is not going to be embeddable into your presentation, and there's going to be quite a few websites that have that policy because they don't want their content or their service or site embedded on different domains, so they'll block it. If that's the case, there's nothing you can really do about it, unfortunately.

For your own websites or websites that you're developing or want to share with clients that you own, this is going to be pretty simple. You just make sure that there's no cross-origin policy that's blocking iframe embeds, and you'll be able to embed your links directly in there and view those websites directly in the file. As I mentioned, you can basically change this around as well. If we didn't want a mobile version, we just wanted a larger desktop one, you can just resize your Figma frame, and now you've got a full-width embed. The embed is basically just the same size as whatever you decide to include your Figma file or Figma layer as, and you can now update that.

If we want to update this in our presentation, you can basically just re-upload the presentation through the Figma plugin, and once that's done, we can just go back to our presentation and refresh it. If we jump back to our tab, refresh that, and once it loads, we can click back into our frame, and you can see down here that it's been updated, and now we've just got the larger width version of the website embed
. That's looking really good. If you wanted to just do a full screen one, you could even make it the entire size of the frame, so you could make it full screen, and that would also be totally fine. I'll just do that as a last example, and once that updates, I'll just refresh it again. We'll update that again, refresh it, and now we should have a full screen embed.

You can see here that the embed is totally full screen now, so that's basically just taking up the entire size of the slide, and you can navigate that however you want. You can obviously interact with this embed as well, so we could go to different pages in the embed and click around, and that's going to function the same way as a normal website.

So, yeah, that's basically it. I just wanted to show you a really quick example of how to use Pitchdeck for embedding website URLs. Ideally, website URLs that you own or presenting to clients is probably the best way to go. And there's also a whole bunch of other supported embed formats as well. There's a bunch of official embed formats that are supported, so if you click on this little "More embeds" link in the Figma plugin, it's going to open up the Pitchdeck documentation page, and you'll be able to see all these different platforms that are essentially supported. You can embed things like Figma designs, Canva designs, Loom, Lottie files, Google Docs – these are all official embeds that you can add as well. Feel free to go through that list as well if you want to embed other kinds of content besides websites, as we've just had a look at today.

As always, thank you for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to add hover effects to buttons in HTML emails from Figma using Emailify
date: 2023-05-07T00:00:00.000Z
---

# How to add hover effects to buttons in HTML emails from Figma using Emailify



#### Video Transcript

Today, I'm going to be showing you how to add interactive hover states to your HTML email designs in Figma using the Emailify Figma plugin.

To get started, all we need to do is go to the little "Resources" icon at the top of your Figma file. If you click on that and search for Emailify, under the "Plugins" tab, you'll see the Emailify Figma plugin pop-up. All you need to do to run the Figma plugin is either click on this "Run" button here, or you can click on this little "More options" icon here and click on the "Save Figma plugin" link, and that's just going to save it to your Figma plugins list for later. I'd recommend doing that, and I've already gone ahead and done that myself.

I'm going to go to the canvas, right-click anywhere, and go down to "Plugins", then go down to Saved Plugins and click on the Emailify item. That's just going to run the Figma plugin that we saved a second ago. If you're new to the Figma plugin, the way that it works is it basically allows you to design emails in Figma that can then be automatically exported to production-ready HTML. I'm just going to give you a really quick example of how to do that. We can just add an email here; I'm going to call it "My Email with Hovers" and add the new email iframe container. Then I'm just going to go through and add a handful of components to the email.

I'm going to click on this one, add in a logo component, then go to the CTAs and add a CTA component. We can update our buttons and maybe just add another button component as well. If we scroll down and add another component with a button down here and I'll just drop in a footer as well. We've got that in there.

Okay, that's basically the most simple example I can show you. If you want to go into detail of how to actually design the email components and design the emails, there's a couple of other really detailed tutorials on the YouTube channel. Just find the Emailify playlist and jump into those. But today, I'm just going to assume that you've already designed your email, and all we're going to be doing is adding some hover states to these button components here.

Let's go ahead and do that now. Basically, if we preview this at the moment and generate an HTML preview, you can see here that the buttons are clickable, we've got the little cursor there, but they're just static, they don't have any hover effects on them. To add some hover effects, what we can do is basically go to the HTML and mobile settings button. If you click on HTML and mobile settings in the header of the Figma plugin, that's going to open up this little panel here, and basically, that changes depending on what layer you've got selected. You can see here the context is changing based on the layer that we select.

In this case, we want to make sure that we've got a button component selected. This button component has to have been added through Emailify; it's not going to work if you've just manually created a button. You need to add this button through Emailify, so you can either do that, as I mentioned, by clicking on one of these components or you can use the quick add options at the bottom of the Figma plugin. If you've got a layer selected that lets you add some elements, you can add a button layer through that, so you could add a button like that and drop in a button and that will add an Emailify button component.

I'm just going to assume you've already got that figured out, and to add a hover state to that component, all you need to do, as I said, is click on the HTML and mobile settings, and you'll see down here we've got this button hover state section added. What that lets us do is change the background color and text color of the button in a hover state and also add an optional transition, so we can add transition animations as well. I'll show you what that looks like right now.

If we know we want to change the hover state of this button to be matching this little sushi icon here, what we could do is find out what color that is. I'm just going to quickly grab a color picker and find the hex value of that color. I'm just going to click on my icon, grab that hex color, and copy it to my clipboard. If I now click back into my button layer, what I can do is paste that directly into the hover input here. I'm going to paste that into the background hover and add a little hash in front of it, and then I'm going to add a hex value to the text color as well, so I'm just going to make that white, so that's hash FFF to make it white.

Now if we close off that settings panel and jump back into our preview and hover over that button, you can see here that we've now got a hover state added. When we hover over that button, it's using the hex value for the background and the text that we added into the Figma plugin settings, and it's using that for the hover state, so that's pretty cool.

The other thing we can do, as I briefly touched on, is go back into the settings panel. You can access it through this little settings icon if you've got the preview open. I'm going to click on it again, and this time I'm going to also add a transition. We can change it from none to fade, for example. If we click on fade and load that up, if we now hover over the layout, you can see here that it's doing a fade effect on the background color and the text color. Instead of just an instant jump, it's letting us fade between those colors.

We've got some other options as well. If we want to do some motion, we can add something like a grow animation. If we click on grow and refresh the preview and then hover over it, you can see that we've now got a grow effect along with the color effect that we added in those inputs. That's what that looks like, and you can go through these and experiment with them. There's a whole bunch of them, so there's a bounce one, so you could add a more of a bouncy effect if it's a really important CTA. You can make it a bit more impactful with an animation like that, but it's really up to you to go through those.

You can go through those individually. We've got another one down here, obviously, that's a little bit different. We've got our button with the black background and white text, so we could make that inverted, so we could make that go to white background with black text, for example, and add a fade onto that. If we now refresh the preview, you can see that when we hover over this, it's basically just going to change that to be inverted.

A cool thing that you can also do is add a stroke to that. If we wanted to make sure that the background automatically had a stroke around it when we invert it on hover, you can add a stroke to your button layer in Figma. If we add a stroke layer, I'm just going to make that two pixels and have it as black, and then now, if we refresh this preview and go down to our button, you can see here that when we hover over it, the stroke stays the same, and the background is getting knocked out to white. That's a nice way of adding a stroke into the mix if you wanted to make sure that it kind of knocks out the background but keeps an outline. You can just add a stroke there, and that's going to look pretty good as well. That's a nice little trick if you want to make it into more of a ghost button type style. You can play around with the stroke settings in Figma and see what that looks like when you swap out the hover backgrounds as well.

Yeah, that's basically it. I was just going to keep it really simple today just to show you the basics of how to add hover effects onto your buttons. This is a really easy way to go about it. You can play around with the effects, as I mentioned, there's a whole bunch of different ones that you can play with. This is more of a rotation one, but yeah, those are the three different options you've got. You've got the transition, text color, and background that you can play with, as I mentioned, just for the button components. This won't work for other components; you just have to make sure that you're using a button component for these options to show up.

The other important caveat is that the hover effects are only supported in certain email clients. So if you want to get a list of those, you can click on this "supported email clients" link here. If you click on that, that's just going to open up a link in your browser, and it's going to give you a detailed overview of where the hover effects are supported. For example, it's totally supported in Apple Mail on macOS and iOS; it's supported in Gmail on desktop, but it's not supported in Gmail on iOS or Android. You'd expect mobile devices not to support hover anyway, but yeah, there are a few little caveats down here that you can look at.

Outlook, obviously notoriously bad at supporting anything, so on Windows Outlook, it's not going to work, but on macOS, it will. You can just go through these and figure out where the hover effects are going to work and where they're not going to work. That's just a little caveat to show how you can use the hover effects as more of a progressive enhancement rather than a critical piece of the style. It's more of just a progressive enhancement where it's supported. If it's not supported, it's just going to work normally; anyway, you're not going to get any hover effects, but you can still click on the button as you'd expect.

We'll leave it there for today. I just wanted to run through that really quickly with you. If you've been wondering how to add hover effects onto your HTML emails from Figma, this is going to be a really easy way to go about it. And finally, just briefly, if you did want to export this to HTML from the Figma plugin, you just have to click on this "export HTML" button here. If you just click on the HTML email option or any of the platform integrations you want to use, you can basically just pick whichever one suits and click on "export to HTML." That's just going to generate the HTML for your email. You can download that to your computer as a zip file. I'm just going to click "download zip file," save that to my desktop, unzip that file, and now if we open up the folder, you can see here we've got our export here.

We've got a previous file and the HTML file. If we just drop that previous file into our browser, I'm just going to drop that into here and load that up, and you can see here that the hover states are showing up in the preview as well. We can open up the email itself just by going into the folder with the same name, dropping the index.html file in there. This is basically the final HTML with the hover effects that we added in the Figma plugin, and they're working really nicely as we'd expect. You could now go ahead and send out that email and have those show up in the clients that we looked at a minute ago over here.

So, we'll leave it there for today. I just wanted to run through how to add those hover effects to your HTML emails from Figma using Emailify. If you're using Emailify and have been wanting a bit more creative freedom on your CTAs or CTA buttons, you can now add these hover effects as we just went through in the Figma plugin. I hope that adds a little bit more flexibility and creativity to your HTML email designs. Thank you, as always, for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to add UTM tracking code to HTML email links from Figma using Emailify
date: 2023-05-06T00:00:00.000Z
---

# How to add UTM tracking code to HTML email links from Figma using Emailify



#### Video Transcript

Today, I'm going to be showing you how to add UTM codes to any links in your emails that are exported from Figma using the Emailify Figma plugin. 

To get started, all we need to do is click on this little "Resources" icon at the top of your Figma file. If you click on that and search for Emailify, and under the "Plugins" tab, you'll see Emailify pop up. If you just go ahead and click on that result, you can run the Figma plugin by either clicking on this "Run" button here, or I'd recommend clicking on this "More options" icon here and clicking "Save Figma Plugin." That's just going to save it to your Figma plugins list for easy access later.

I've already gone ahead and done that, so I'm going to go to my canvas, right-click anywhere, and go down to "Plugins", then I'm going to go down to "Saved Plugins" and click on the "Emailify" Figma plugin. That's just going to run the Figma plugin that we just saved a second ago.

If you're new to the Figma plugin, the way that it works is it basically allows you to design and customize emails in Figma that can then be exported out to HTML automatically. I'm not going to go through the whole process of how to design and customize the emails in this tutorial. If you want to jump into that, I'd recommend checking out a couple of other in-depth tutorials on the YouTube channel. If you just go to the Emailify playlist, you'll be able to find those pretty easily.

Today, I'm just going to be assuming that you've already got the email design the way that you want and you just want to add some UTM parameters to your links throughout the email. I'm just going to go through a handful of different scenarios that you might use to add some UTM parameters to your links in your email, and I'm just going to run through those with you now.

For example, if you know that you want to add a certain UTM code (a UTM code basically looks like this: it's a little question mark with a bunch of parameters that you can add to a link), let's take this one from this campaign monitor vehicle as an example and add that to one of our CTAs. Let's just click on this button layer here, and we can add a link to that by clicking on the HTML and mobile settings button in the Figma plugin. I'm going to click on that, and with my button layer selected, I'm just going to paste that into the clickable link URL field here. That's basically just going to automatically add the UTM parameters to my button.

So if I were to click on this here and click on my button URL, it's going to open up a link in the browser. You can see here that we've got this UTM parameter up in our link here. That's automatically added. That's the simplest way of adding UTM links into your links in your HTML emails from Figma. You can basically just include it in your link and paste it into the clickable URL field here, and that's going to be a really simple way of going about it.

But the trouble comes if you've got a dozen or more links that you want to add these parameters to, and you don't want to go through everyone separately and add those in. What you can do is also add this as a global tag. So, if we take out that UTM parameter here, I'm just going to remove that, leave the link in there, and close that for a second. I'm also just going to add a link to this other CTA here, so I'm just going to add another link here. We'll do another example link, so we'll just do example.com and drop that in there. In this case, I basically want to make sure that both of those links automatically contain a UTM query parameter string. In that case, what I can do is go back to my HTML and mobile settings. I'm just going to click on this little settings icon here and select my Emailify frame, which is the email frame layer at the very top of the file. That's where the Emailify components get added. If you click on that with the HTML and mobile settings panel open, you can see that we've got this option called "Append global URL query string." You can see here that it's got a little example showing a UTM parameter that looks very similar to the one that we just copied.

What we can do is paste in a global string or a global query string that we can paste in here, and that's basically going to automatically append this to any links that are detected in the email. We can have this in one place, so we can just add it to this global query string input here with our Emailify frame selected, and that's automatically going to add whatever's in this query string to every link.

Now, if we close off that settings panel and go back to our links, if we now click on the "learn more" link here, for example, you can see that it's automatically including that query string into that button, even though we didn't include it to the button itself. We can confirm that by just jumping back to this button layer, and you can see it's still set to example.com without a query string or the UTM parameters, but when we preview it and click on it, it's automatically getting that global UTM string added in.

That's pretty cool because it saves us a bit of work applying that to every single button in our design. We can set that from here. The other cool thing we can do is actually add overrides to each of those buttons. For example, if we want to get the item Source, or the UTM content, we can take out the UTM content from the global string. We'll remove that, take that out of the global setting, and instead, we're going to apply that to the other CTAs.

If we click on this button here, open up the settings panel, and add that back onto this clickable link URL, I'm just going to add a question mark, paste in my UTM parameter, and change the UTM content value to "hero" because it's in our hero block. I'm going to copy that again and add it to my other button down here. In this case, I'm going to paste that in there and change the UTM content value to "split" because it's in this split block component and close that off.

Now, if we go ahead and click on that button again and open it up in the browser, you can see that we've got all of the global UTM parameters, along with our UTM content override, which is this UTM content equals "split" and also the UTM content equals "hero" automatically getting added into the string along with all of the other ones.

That's a really nice way of pre-populating globally all of these UTM parameters, but then, if you know that you need to add a UTM content parameter per block, you can add that in there per link, and that's automatically going to get included along with the global one. You can have the overriding ones globally, which you can easily do over here, as we just saw, and then if you need to change those at any time, you can do so.

That's a really easy way of managing your UTM parameters in your email links. You can basically just go ahead and set that globally, override them locally if you need to, and that's going to be a really quick way of managing them for your different emails.

The other thing you can do is also just add normal links. If you wanted to add a link to some text, we can grab, for example, one of the links that we just added. I'm just going to grab this one here and add this to my link text. If we highlight some text layer content and then click on the little link icon in Figma and click "create link," we can then paste that in there and again change this to be "paragraph," for example. We'll just change the UTM content at the end of that to "paragraph," and now you can see here that we've got a link added to that text layer. If we refresh the preview, you can see that it's now converted into a link, and again, if we click on that now, it opens up with the parameters included.

This applies to any links that are inside your content; it's automatically going to append that into the URL. I just wanted to cover that use case as well in case you're wondering if it worked for normal Figma links – it'll do that as well.

So, we'll leave it there for today. I just wanted to go through that really quickly to show you how to add UTM parameters into links using Emailify. This is a really quick way of going about it, especially using that Global setting. That's going to be very helpful if you need to do that for different newsletters or different campaigns. You can basically just add that one time, and it's going to automatically populate those links in one go to all the links in your email.

And of course, if you need to then export that out to HTML when you're done, you can just click on this "export HTML" button here, export that out to HTML or whatever platform you need to integrate it with. You can jump into those options, export it to HTML, and then, in this case, I'm just exporting it to an HTML zip file. I'm going to download the zip file to my computer, save that to my desktop, and open up the zip file. If we open up that folder now, you can see that we've got our email with all of our images and HTML.

If we drop that into our browser, you can open up the preview, and that's what it's going to look like there, with our links included and our UTM tags working as expected. So that's basically just the final step if you do want to export it to HTML – you can do that really easily.

Let's leave it there for today, and I hope that helps if you've been wondering how to add UTM parameters or query strings into your HTML emails from Figma. This is a really nice way of going about it. Thank you, as always, for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to add custom categories for Figma email components using Emailify
date: 2023-05-05T00:00:00.000Z
---

# How to add custom categories for Figma email components using Emailify



#### Video Transcript

Today I'm going to be showing you a Figma tutorial on how to create custom categories to organize your email components in Figma using the Emailify Figma plugin.

To get started, if you just click on the little "Resources" icon at the top of your Figma file and search for Emailify, and under the "Plugins" tab, you'll see Emailify pop up. All you need to do to run it is click on the Emailify item, and you can either click on the "Run" button here, or I'd recommend clicking on this "More options" icon here and just clicking "Save Figma Plugin." That's just going to save it to your Figma plugins list for easy access later.

So, I've already gone ahead and saved that Figma plugin. I'm just going to go to my canvas, I'm going to right-click anywhere and go down to "Plugins," then I'm just going to go down to "Saved Plugins" and click on the Emailify item, and that's just going to run the Figma plugin that we saved a second ago.

If you're new to the Figma plugin, the way it basically works is it allows you to design emails in Figma and then export those out to HTML automatically. So, you can do this by using some of these starter components, or there are some other tools that you can use in the Figma plugin to help design. I'm not going to be going through all of those features today; there are a couple of other detailed tutorials on the YouTube channel if you want to check those out. Today, I'm just going to be assuming that you've already gone through those and understand how it works, and we're just going to be organizing some of these components into custom categories inside the Figma plugin today.

To get started, all we need to do is go over to the right-hand side here of the Figma plugin and click on this little Library icon. That's just going to load up the Emailify component Library tab, and what this tab does is it basically goes through your Figma file and looks for any Emailify components that already exist. So, in this case, I've already added a few components from the starter categories over here. So, for example, we can add any of these categories by just clicking on them. So, if you wanted to add a split block, for example, you could just add that, and that would add it to the page.

So, you can see here it's just added this little component here, and we can customize that and then drag it out of the email into its own little component library and start adding those to our page. To see those in the Figma plugin, you just again go to this little Library icon and click on the "Load all Emailify components" button, and that's just going to go through and load up any of the Emailify components that it finds in your current Figma file. So, if you want to use these, you can basically now add those to an Emailify frame. So, you can just click on your Emailify frame and add any of these components with one click just like that.

So, to categorize these to make it a little bit easier to sort them out in your interface, what we can do is click on this little edit icon. So, this little pencil icon here, I'm just going to click on that and I'm going to create a new category. In this case, I'm going to create a category called "Footers." So, we can add a "Footers" category, create that as a new category, and you can see when I add that new category, we've now got this interface popping up here where we can actually move some of our components into different categories. So, we can see we've got all of our components listed here, and we've got the categories that we can move them into. So, I can add a couple more. I'm just going to add a "Headers" category and another category for "Hero Blocks," so I'm going to call that one "Hero." Again, just click on "Create new category," and now we can start moving some of these components into our new custom categories.

For example, we want to move this footer component into the "Footers" category, so I'm just going to click on that category there and click on "Move components," and that's just going to move the component into that category. So, you can see here, the "Footers" category now has our component in there, and we can go ahead and do that for our other components too.

If we click on our "Uncategorized" tab just to see which ones don't have a category yet, we can now move some of these out as well. So, we can move our hero blocks into the "Heroes" category, so I'm just going to click on "Hero" and click "Move components," and you can see those have now been added into the "Hero" category, and the other uncategorized ones are in here. So, we could add the logo to our "Headers" category, going to click on that and click "Move components," and that's basically added that there.

Now, if we go back into our listing, I'm just going to close out of this little pop-up, and you can see here at the top, we've now got multiple category tabs that we can tab through. So, I can add the hero block, I can go to "Headers," I can go to "Footers," and this is basically now categorizing all of the components that we had listed here into subcategories to make it easier to find things. So, we can see we've still got one that's uncategorized, which is just this one here. So, we could go back into our categorization panel, click on the little pencil icon, and create a new category for that one. So, we could call that one "Content" and just add that as a new category, and then we can move that one into our new "Content" category like that. And that's basically going to remove the "Uncategorized" category because there are no other components that haven't been categorized, and now we can just see we've got our categories that we've added as custom categories here, and you can see all those in there.

So, that's a really quick way of sorting your components that you've created in Emailify into custom subcategories just to make it a bit easier to find things in the Figma plugin. And you can also delete these categories as well. So, let's say we wanted to delete a category. You can just go down here to "Remove category," select a category to remove. So, in this case, I'm just going to remove the "Hero" category and click that, and it's just letting us know that this isn't going to delete the components. It's just going to delete the category. So, if we now remove this "Hero" category, you can see here that our hero components are now uncategorized, and the "Hero" category has been removed. It hasn't removed our actual components; it's just moved them into the "Uncategorized" category again. And so now we can basically recategorize those if we wanted to. So, we can select those hero components and drop them in the "Content" category and click on "Move," and that'll pop those in there, and you can see they're now in the "Content" column or "Content" tab instead of the "Hero" tab. So, yeah, that's basically what that looks like.

You can customize these to be whatever you want. You can have as many tabs as you need and move all those around. So, it's really up to you how to organize that with you and your team. And the other cool thing you can do is also tag these with extra descriptions and documentation links. So, for example, if we wanted to add some documentation to this particular hero component, you can basically click on the component layer in Figma and then click over here on the right-hand side, click on this little component configuration icon. And when you click on that, it's basically going to open up this little pop-up here in Figma. And so, you can now write a description of how to use this component. So, you could say, "Use this component for any CTA blocks at the top of an email design." So, we can add that in there. And we can also add a link to any documentation. So, if we've got an external documentation site, we could add a link to that in here. So, we could do, you know, docs.emailify.com, which isn't a real domain, but we could add something like that. And then you could have a hero page or something like that.

Once you've added that in there, and then if you go back to the Figma plugin and click "Refresh" on this little icon here, what that's going to do is it's going to automatically take that link. So, we've got our documentation link that we added, and it's going to add that over here onto the label for the component. So, if you were to click that link, that'll open up the web browser to the documentation page that you've set up here. And if you hover over the thumbnail, you can also see the description. So, we've got the name of the component, and then it's also giving us the description of how to use that component in the tooltip that automatically pops up when you've got the hover state added on the thumbnail. So, this one here doesn't have one, so you can see it's just got the name. But over here, we've got our description. So, that's just a really easy way to add a bit of context to your components to help further organize them as well.

So, yeah, that's basically it for today. As I mentioned, this tutorial is just a really quick one to go through the categorization. If you want to go through how to actually set up this component library and design it, there's another very detailed tutorial on the website on the YouTube channel. So, you can go ahead and find that one in the Emailify playlist. But for today, we're just going to leave it there and keep it pretty simple. And as I mentioned, if you do want to export these, you can basically just click on the "Export HTML" button and export those to HTML. But again, if you want to check out what that looks like, I'd recommend going through the other component library tutorial, and that's going to give you a much better description of how to go through those steps. So, we'll leave it there for today. Thank you, as always, for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to design a Figma component library for HTML emails using Emailify
date: 2023-04-26T00:00:00.000Z
---

# How to design a Figma component library for HTML emails using Emailify



#### Video Transcript

Today, I'm going to be showing you how to create a reusable Figma component library for your HTML emails in Figma using the Emailify Figma plugin. To get started, all we need to do is go to your Figma file, click on the little resources icon at the top here, and then if you just search for Emailify, you can either run the Figma plugin by clicking on this run button here, or I'd recommend clicking on this more options icon here and clicking save Figma plugin. That's just going to save it to your Figma plugins list for easy access later.

I've already gone ahead and done that. I'm just going to go to my canvas, right click anywhere, go down to "Plugins", go down to Saved Plugins, and then I'm just going to click on the Emailify item. That's just going to run the Figma plugin that we just saved a second ago.

If you're new to the Figma plugin, the way that it works is it basically helps you to design emails that can be exported to production-ready HTML directly from Figma. So you don't need to do any coding. You can just design the email in Figma, and the Figma plugin will automatically take care of the code and export it to HTML for you.

The first thing that we'll need to do is just create a new Emailify frame. We can do that by clicking on this little input here and just giving it a name. So we can just call it "my email design" and click on the add new Emailify container button. That's just going to add a brand new Figma frame to your canvas.

It's worth noting that this is a special type of frame that will allow you to add different components and create custom components that you can then design out your email with. So, I just want to really stress that this Figma component library is only going to work if you design the components using the tools included in the Emailify Figma plugin. If you bring in components or designs or emails that you've designed separately, so if you've designed them prior or design them outside of the Figma plugin that you've just created in Figma, it's not really going to work. It's just going to get rendered as a flat image. It's not going to load in the rich content or the HTML that you'd expect. 

I just want to really stress that starting out, just in case you thought that you could bring in an email from the outside and render it as HTML. That's not really what this Figma plugin is designed for. But I'm going to go through how to design the components in here using the tool, so you can hopefully follow along and create your own Figma component library that's going to look really good when you export it to HTML. With that disclaimer out of the way, let's get started. We can get started by clicking on any of these tabs here. This is going to give us a bunch of different starter components, a lot of common layouts, and a lot of common components that we can use that will then be able to customize into our own library in a moment.

For example, you might want to add things like a logo and you might want to add things like a CTA. So we've got a little hero component here. Let's just keep it really simple for starting off with and customize these two components first.

To customize a component, we can just go in here and basically drop in our own content. So if we go to our images folder on our computer that we want to reference, we can do things like drag our own images into Figma and use those. For example, I might want to swap out this logo with my own. If I just scale down that image and drop it into my layer, I've basically got my component here.

It's really important to note the structure of these components. So, basically, you've got things like rows. Rows allow you to have multiple columns, and then each column can have its own stack of layout contents. For example, we've got an image here, so I'm just going to drag my image layer into the column, and that's going to allow us to remove the old image. Now, we've basically got our own image in here, and you can see when I preview the email in HTML, this is going to render this image here as a little image, and the rest of the content is in HTML as you'd expect. So, we can switch between phone view and desktop view, so we can get a sense of what that's going to look like. 

We continue customizing this now by doing things like swapping out images. So, we can swap out this hero background image with our own. We can jump in here, choose a new image, for example, so I might just want to drop in this background here. And of course, we can customize the content of this text layer, so we could remove what's already in there and just change it to something else. The same thing goes for this button, so we could say "try now". We can also, of course, change the font styles as well. You might want to change that to be medium, or you might want to change that to be medium italic or something like that.

It is worth noting that because these are HTML emails, the range of fonts that are supported on different email clients will vary. So it's best to try and stick to web-safe fonts where possible. But for today, I'm just going to be keeping it pretty simple and just keeping it as bold for now.

Now that we've got these two components set up, basically what we can do now is start expanding our Figma component library that can be used directly in the Figma plugin. What I mean by that is because we've got these two components in our design, we can basically now break these out into their own area. So, if we move these components up into here and just split those out from the actual Emailify frame, we can now basically load these in as a custom Figma component library in the Figma plugin.

To do this, click on the little component icon here, the little Figma component library icon on the right side of the Figma plugin. Click on that and then click on this "load all Emailify components" button. I'm just going to click on that now, and that's basically going to load up any Emailify components that are found in this Figma file directly into the Figma plugin. This allows us to use this as a custom Figma component library tab, similar to how we've got our different icons in here in these preset tabs.

We've now got a custom Figma component library icon over here that we can use to automatically load up any components that we've already added and customized in our Figma file. You can jump to the components by clicking on this little icon, and that'll let you easily see which component is where. But more importantly, we can now use these to populate any Emailify designs in our design.

If we go to our frame over here and click on this hero component, I'm going to click on that, and that's basically added it as a new instance of the component that we've got over here. For example, you can see that if we changed any of the styles in the original component, like changing the font size, that automatically gets inherited by the instance over here that we've used from the Figma component library.

The same thing goes for the logo. We can add our logo into the mix by clicking on the icon, and we can rearrange that. Because it's auto-layout, we can just drag and drop these around, and you can see how we can start building out our own totally custom Figma component library using the Emailify components.

Just to add a few more to help you see what kind of components you can add, we'll go to our images tab over here. Let's start adding a new component. I'm just going to add a new starter component here and drop that in. In this case, I might want to create a split image text block with my own content. So, I'm going to swap out this image over here. I'm going to go to the image, and I'm just going to go to my assets folder. I'm just going to drop in this character. I've got a character that I want to add; it's just a transparent PNG, so I can basically drop that into my Figma file. Again, I can drag and drop that layer directly into the column. We'll make sure that it's going directly into the column, and now we can basically resize that to be the size that we want.

I'm just going to put that in there. I'm going to change the alignment to center, and I'm just going to remove the other image layer that we had in there. Now, we can basically do things like adding a custom background image. So, if I don't want a solid fill, I can change that to be an image and drop that in there. And now, if we add another background, we could add this background image here, drop that in, and now you can see we're starting to get a bit of a background image with a foreground image layout happening. I can also rearrange this content, so I can drag and drop the columns around to swap those around if I want to. I can change the font style, so we can make that white, giving it a bit more contrast. And I can also do things like adding a transparent overlay onto the background. I can basically click on my row, go to the fills, add a new fill, and you can basically add a transparent overlay there to increase the contrast.

And now, if we load that up in our preview, you can see here, once it loads up, we've got our image text column, and if we look at that on desktop, that's what that looks like there as well. So, I'm pretty happy with that new component. We can go ahead and extract that component into our components over here. I've just broken out that component that we designed up here along with our other components. And again, if we go to the library tab and just hit refresh, so this little refresh icon here, that's going to load up the new component that we just designed and added to our components list as well.

I'm not going to build out dozens or hundreds of components with you today, but you can imagine what kind of other components you'd want to add. Maybe you want to add a footer component, a standardized footer component that you then customize. We could customize that to be the same color as our logo, so if we want to make that pink and then change some of the content colors down here, we could definitely do that and swap those in. So, we could make those darker, and that would be your custom footer component that you could then use for all your other emails as well. So again, I'll just break that down to here, and you can see we're starting to build out this Figma component library that can be reused across all of our emails.

For example, if we were to add a new email, just click on this little plus icon and create a new email. We'll call it "new email" and add that container. It's basically going to add a new Emailify container, and again, we can start adding our instances in here as well. We can add our logo, our content block, our footer, and another content block. I'll show you how to customize these as well. Now that we've got these added as instances, you can basically override the content of them in your different emails. For example, if I want to change out this character, I can just go into my image layer in the instance, click on the fill, and override that fill with a different image. I can just drag and drop a new image into here, and that's just going to swap out the image that we've got in our layer. I can change the fit of that, so if I want to make sure the image fits, I can just click on "fit," and that will scale it up.

I might want to add a bit more padding in my original design, so if we want to go back to our original component and click on the column, the best way to adjust spacing or heights or things like that is always to use the padding and item spacing. In the auto layout panel over here, you basically want to use the padding settings. We've got horizontal padding and vertical padding, so for example, if we want to add a bit of vertical padding to the top, we could add 20 pixels to the top of that column, and that will automatically add that spacing to any instances of that component as well. That's the way you really want to tweak it.

For example, over here, we've already got some vertical padding set on the logo component, so we could tweak that by just changing that in the settings in Auto layout. The same thing goes for item spacing. In our hero component, we've got some item spacing set, so we've got 16 pixels of vertical space between our items. We might want to increase that, which you can do by changing the value over here, and that's just going to increase or decrease the item spacing. You can also do this for columns as well. If you've got a column, you can change the item spacing between those elements and adjust it that way. You always want to rely on the auto layout settings as much as possible.

Doing things like setting heights, for example, won't work when it gets exported to HTML. It'll visually look like this in Figma, but if you preview that, you'll notice that the HTML content itself is what drives the height. So even though we've got this height set here, because the content of that column exceeds the height of that column, it's going to push that out anyway. What you want to do is always make sure that things like columns and rows are set to "hug contents" for their height. Click on "hug contents" and then use the padding to set the height of that element as you'd expect. Always rely on the padding and auto layout settings as much as possible. These auto layout properties are set by default when you create elements from the Figma plugin, but in case you've got some set heights as fixed accidentally, you can change those to "hug contents" and set them back to normal.

Now that we've got a few different components set up, I'm going to go through other ways that you can customize these. As I mentioned, you can do things like change the fills, swap backgrounds, and this is a quick way of customizing your instances that you've already got set up. The other thing you can do is add things like links. If we want to add links to buttons, you can do that by clicking on the HTML and mobile settings button, clicking on a button layer, and then you can paste in your clickable link URL here or adjust things like font size, alignments, padding, and other settings. You can hide things on mobile or show them on mobile, and these will depend on whatever context you've got selected.

In this case, I'm looking at a button layer. I might be clicking on a row layer, and that's going to give me a different set of options. I might be clicking on a text layer, which will give me another set of options again. So you really just want to go through and customize these layers one by one based on the HTML and mobile settings context.

So you can basically go through and customize these things on mobile. For example, you can add image alt text, so if you wanted to make this image have some different alt text, you can just paste that in there. Or you can do things like add a clickable URL to images as well. So I'd highly recommend exploring all of these different HTML and mobile settings properties just by clicking around on the different layer types that Emailify generates.

The other cool thing that we can do now that we've got our component libraries starting to be expanded a little bit is we can search. So if you wanted to just find all the Footers in your Figma component Library, you could search for a footer and it would bring up any results that match. Of course, you can also rename these layers, so if you wanted to rename a component, you can just go into your original component which you can easily jump to through the Figma plugin and rename it. So you could just do a rename to this layer, for example, and call it a standard primary footer. And if you now refresh your components, you'll notice that the result is updated to standard primary footer in here as well.

You can also sort your components. So by default, it's just sorted to the newest one added to Figma. So you can sort those from oldest to newest or newest to oldest. You can sort them by Figma layer name, so if you wanted to sort them alphabetically, you can do that. You can also sort them visually, so if you wanted to arrange the components on your page visually, you can do that. So we can just arrange these and then match that in the Figma plugin.

There's also a couple more ways of adding custom components to your Emailify designs. So the first one is to click on your Emailify layer, and you'll notice that there's a little pop-up called "quick add selected layer". You can just go ahead and click on this "choose element" option, and in this case, I'm just going to add a new content row. And then click on the "add" button, and that's going to add a brand new Figma component to my email. And you can customize the content of that by clicking on the column. So it's already pre-selected that for me, and then you can basically choose what kind of content elements you want to populate that with.

You can quickly add different content elements in there. So you can add things like buttons and images and all that sort of good stuff that you'd expect. You can also use this on any existing components that have been added through the Figma plugin too. So for example, if we want to add a button to our split component here, we could just jump out to our component, click on that column, and you'll notice that the same selection is available there. So we can actually add new elements to here. So we could add a social icons component, for example. Add that in, and that just needs to be changed color, so we can change the color of that. And you can see there that we've added a new social component just by using the quick add options there.

And the same sort of thing, it depends on the context. So now that we've got our social component that we've just added selected, we've got a brand new context of adding social elements. So we can actually add new social icons automatically. So if we click on the "add SoundCloud" option, add that in, again it's just going to add it as a black icon, so we'll just have to change that color in this case. And you can basically add that in like that. So that's a really quick way of adding new content into any existing components, giving you the flexibility to customize your designs as needed.

As I said, this is a really nice way of building out custom layouts. So you can add multiple columns. So you could add another column to this particular row, add that in, and now you can start building out a split column layout for this particular component. So you can just go through and basically add whatever you want there. And once you've got that sorted out, you can then rename it. So we can call this a different name. So we can call this one "split block". And we can just customize this a little bit more, so maybe we just want to have it as a two-column split component.

And then, again, we can just break that out into our components. So we'll just break that out up here. And of course, if we go to our Figma component Library, refresh that again, you can now see that we've got our split block component there, which we can obviously customize. So we could customize these starting contents. So we can go to our fills, we could swap out these images. So I'm just going to swap in some different images, drop those in, and populate that to be a little bit more on-brand for the starting component. So there we go, that's what that looks like there. And if we refresh, you can see that's been added here. And of course, we can now add that into any of our email designs by clicking on that icon, and there we go, you've got that customized block that we just added.

The other way that you can do that, if you want a more visual way of building out a custom component, is you can go over to the custom tab over here. So if you click on "custom", you'll notice that there's a button called "build new custom component". So we're going to click on that. That's going to pop out this little Builder interface, and it basically allows us to easily build out different content types. So we can build out double columns, single columns, we can do Heroes (background images), and start building this app visually.

If we know we want to add a title and body content on the left and an image on the right, along with maybe a button, we can basically visually build that out. Call this whatever we want, so again, I'm just going to call this "split CTA". "Create and insert new component", I'm going to click that button, and that's going to scaffold out a brand new component that we can again customize. So it's more of a visual way of building out what we just did with the quick add options. And of course, you can combine these two things as well.

Now that we've got our scaffold row column layout set up, you can again just use the quick add option, add some new content in there, and that's just going to automatically add those in as you'd expect. So the quick add selection is a really good way of quickly adding new content to a layer selection based on whatever that layer type automatically supports. It's just a really quick way of adding in new content layers like that.

The other cool thing about this custom builder is you've now got this saved as kind of a little template. So even though we've got it over here in our icons, you can go back to that custom tab and edit that layout. So you can go to the edit button, and if we wanted to make sure that this always had a social component, you can drop that in there and update the saved component. And that will allow you to update that component and add it as a new component to your page just like that. And it's going to allow you to leave the one that we've already got there as its own previous component. But because we've created a new version, this spins up a new component. So if we go to our Figma component Library, refresh that, you can see we've got now both of our components in there that we can customize however we like. So we could split those out and move them over here and start designing customizations.

You can also just delete components entirely. So, for example, if you're going to delete these two, I don't want them anymore, delete those components from my Figma file, refresh, and those will be gone from your Figma component Library as well. The other cool thing you can do, which might be handy if you're really building out dozens or hundreds of these components, is to basically just split them out into their own page. So you might want to split these out into a new page. So if we cut those out, create a new page in Figma. So I'm just going to name this page "Emailify components" and just paste those into here.

And now if we swap back to our designs page, so I'll just rearrange these pages and refresh that. So if we actually just close off the whole Figma plugin, rerun the Figma plugin, you'll be able to see that when we re-run the Figma plugin and refresh the Figma component Library again from our designs page, even though there's no components on this page whatsoever, we've got them all stored over here in our different Emailify components page. We can still access them from this other Page by clicking on the "load Emailify components" button again, and that's basically going to find those components that are on this page and automatically load them up in our designs page over here. And we can still jump to those components from this page. So you can click on the component icon, click on that, and that will jump you to the other page. The reason this is popping up is because it doesn't have an Emailify frame on this page yet, so you can either ignore that or just add a placeholder. So I'm just going to add a placeholder for now, just so it doesn't ask me to create one. Just put this over here; we don't really need to use it. But yeah, you can basically store all these components on a separate page and really build out its own Figma component library page separately from your campaigns.

You can imagine when you need to create a new campaign, you can just create a new page, call this, you know, "new campaign - campaign April 2023," and again, start adding a new component. So you can say "April email," add that as a new email frame, and again, because we've got our components in here, we can just start building out our new email based on these components that we've already designed and customize them as we need to. So we've got our new content for this campaign, we can override the images. So again, we've got our images folder, we can just drop in a new image and start customizing this content with our components that we've already got added from over here.

Finally, I'm just going to show you how to then export these emails to HTML. So, as we've been seeing, we've designed all these emails using the Figma plugin, so that means after we've previewed it, after we've tweaked any settings that we need to. As I mentioned, you can really drill down and explore the HTML and mobile settings, so if you want to change some of these font sizes on mobile, if you want to change the padding on mobile, you want to change the visibility of things, you can really dive deep and customize the mobile options and things like links, as I mentioned. So definitely explore that in your own time.

But for now, I'm happy with my emails that are showing up in the preview here. So, I might just want to add another footer, so I'm just going to do that. But otherwise, I'm happy, so I'm going to export these emails to production-ready HTML by clicking on this "export HTML" button in the Figma plugin. And I'm just going to select both of these emails, so you can select which emails you want to export. I'm going to export both of them. You can add subject lines here, so if you want to add subject lines and pre-header text, you can do that here. You just have to populate those, and then you can basically select the export option from this dropdown.

By default, it just exports to an HTML email package that'll get downloaded to your computer as a zip file. But if you're using a different platform, you might want to upload to that platform automatically. So if you're using MailChimp, you can just drop in your MailChimp API key, same with Klaviyo, drop in your API key for Klaviyo, and that will automatically upload these templates to your platform. But for today, I'm just going to be keeping it really simple and exporting the HTML to my computer. You also have the option of uploading the images to our CDN, so this will automatically upload the images online, and you don't have to manually upload them yourself. Today, I'm just going to be leaving that off, just so it's a quicker export. I'm going to click on "export to HTML," and this is now going to take our HTML email designs that we just created in Figma using our Figma component library, and it's going to export them and all of the images, all of the HTML code to HTML, and it's going to give us a zip file.

If we click on this "Download your zip file" button, I'm just going to click on that, save that to my desktop, and if I now unzip that zip file, so I'm just going to unzip that by double-clicking it, opening up my folder, and you can see here we've got our emails exported to HTML. So I can preview those in the browser by opening up this previews.html file. So I'm just going to drop that into my browser, and you can see here that we've got our HTML emails as we designed them in Figma. So this is our second email, we've got both of them on the same page as a preview. You can see the mobile version as you'd expect. So these are all HTML, you can see those are images, I've got the contents here, these are all links, so it's exporting exactly how we expected.

This is the preview page, and then we've also got our individual email exports here. So each of the folders is its own export, so you can just drop those into your browser, and you can basically use those however you want. This is production-ready code, so you can take these HTML emails and use them however you want to, and you've got your images here as well.

I just wanted to show you that final step in case you're wondering how to actually export the designs that we've just created in Figma to HTML. It's really easy, as we just saw; you just click on the HTML export button, and you're ready to go. I think we'll leave it there for today. I just wanted to go through some of the fundamentals of creating an Emailify-based Figma component library in your Figma file. This is going to be a reusable Figma component library that you can keep and maintain to then reuse across any new emails that you design and have them all in a centralized place in your Figma file. But more importantly, have them easily accessible through this Emailify Figma component Library tab that you can access via the Figma plugin and automatically insert these components that you've designed to your Emailify frames directly from the Figma plugin.

I hope that's been helpful if you've been wondering how to think about creating an email Figma component library in Figma. This is a really good way of doing it, especially because you get the added benefit of exporting the designs out to HTML through Emailify. So I'd highly recommend checking it out if you want to attempt creating your own email Figma component library in Figma. I hope that's been helpful for you to get started. So, thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export HTML emails from Figma to Customer.io using Emailify
date: 2023-04-20T00:00:00.000Z
---

# How to export HTML emails from Figma to Customer.io using Emailify



#### Video Transcript

Today I'm going to be showing you how to automatically export HTML emails from Figma and then take those HTML emails and upload them into the Customer.io marketing platform to use as custom email layouts.

To get started, all we need to do is go to Figma, and in your Figma file, if you click on the little "Resources" icon at the top here and just search for "Emailify", under the "Plugins" tab, you'll see "Emailify" pop up. If you just go ahead and click on that result, you can run the Figma plugin by either clicking on this "Run" button here, or I'd recommend clicking on this "More options" icon here and clicking "Save Plugin", and that's just going to save it to your Figma plugins list for easy access later. I've already gone ahead and done that; I'm just going to right-click on my Figma canvas, I'm just going to go down to "Plugins", I'm going to go down to "Saved Plugins", and then just click on the "Emailify" item, and that's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is you can basically use it to help you design HTML marketing emails in Figma. For example, if we create a new email called "My Email" and add a new Emailify frame, this will basically allow us to start designing an email using some of the tools in the Figma plugin. We can do things like add headers, we can add CTAs, we can add content, and all this is totally customizable in Figma as you'd expect. I won't go into detail about how to design the emails in this Figma tutorial. There's another Figma tutorial on our YouTube channel if you want to check that out. Today, I'm just going to be showing you how to export this to HTML for the Customer.io platform; we'll go ahead and do that now.

What I'm going to do first is just make sure I've got the Customer.io footer included. If you go to the "Footer" tab in the Figma plugin, you'll see there's a bunch of different platforms here, and these contain some of the required links and tags for the platform to use when it gets uploaded. For example, we've got Customer.io down here; I'm just going to click on that one, and that's automatically going to add this footer component to my email. 

If I drill down into this layer here and go into the "Navigation" component, you can see if I click on the "HTML and Mobile Settings" button in the Figma plugin, you can see that the "Unsubscribe" link is pre-populated in the URL field along with the "View in the web browser" link. This is going to allow you to view the email in the browser if you've received it as an email. That's going to get automatically populated by Customer.io; a Customer.io template does need to have an unsubscribe link, so you can add this on your own, but the easiest way to do it is just to click on the footer component, and you'll get that added automatically in there as you need.

Now that that's been added, the other thing that Customer.io templates require is a "Content" tag; anywhere in the email, you basically have to include a "Content" tag that looks like this. So, it's double curly bracket and then close double curly bracket with the word "content" in the middle. What this does is it basically creates a placeholder area for your content when you're uploading into Customer.io, and you'll be able to fill this out dynamically later if you want to do that. 

Basically, just go ahead and pick a place in your template that you want to create custom content in. As far as I know, you can only create one of these areas, so just pick whichever area you want, and that'll automatically get added into the HTML later. If the templates are missing this tag, just because it does require it, Emailify will automatically add this content tag just to the very bottom of the email, just so that it's in there so that the editor in Customer.io doesn't complain. We'll see what that looks like in a minute.

I'm just going to leave that off for now just so we can see what that does. I'm just going to remove the content tag and just undo some of that content that we just added; if we just create the default one and then export it, now that we've got our design, all we need to do is export it to HTML. If we click on the "Export HTML" button in the Figma plugin, and by default, it's just this default "HTML Export" which you can download to the computer. We're going to go down here to the platform integration section and just click on "Customer.io".

And once you've got Customer.io selected, you'll see that it's got a button that says "Export for Customer.io". You can add your subject line and pre-header, and this will get included in the HTML file. But for today, I'm just going to leave those blank and export it. I'm just going to click on "Export for Customer.io", and this is going to export our email to HTML. Once it's finished exporting, you just have to click on this "Download your zip file" button; I'm going to click on that now and just save it to my desktop. 

If we unzip that file, I'll open up the folder so you can see what it looks like. And we've just got a few different files here. We've got our "previews.html", so the previews.html is basically a file that allows you to preview the desktop and mobile version of the email, so it's good for sending to clients when they need to review them. And we've also got our email here, the email folder has got our HTML in it, which is just the pure email template. 

For today, we're just going to be looking at this index.html file, and you can see here that it's inserted the content area at the bottom here because we didn't include it in our template anywhere. I'm just going to go ahead and move that into my code editor; I've just got my code editor up in here, I'm going to open up the folder again and just drag and drop the index.html file in there, and I'm just going to select all of that code and copy it. So, you can just do "Command + C" or right-click and copy all of that.

If we go into Customer.io now, I'm just signed into my Customer.io account, and all you need to do is go into the left-hand side here, scroll down to "Content", and expand content, and then go to "Email Layouts". If you click on email layouts, and then in here, you just want to click on the "Create Layout" button; in the top right here, "Create Layout". Then you want to click on 
"Start from scratch"; we don't want to use any pre-existing templates, we want to create our own. We're going to click on start from scratch, and we can just call this whatever we want; we'll call it "Emailify Template", click "Create Layout", and you can see here we've got this code editor that we can now paste our custom HTML in.

If we now get rid of all of this pre-existing content and just select all; "Command + A", or "Control + A" if you're on Windows, and delete all that. We've still got our code copied from our code editor over here, which we grabbed. We've copied that, and in our Customer.io editor, we're going to paste that in, just "Command + V", or "Control + V" if you're on Windows, paste that in; and you can see all of the HTML is now pasted in there. What we can do now is click on "Save changes"; I'm going to click "Save changes", and there we go, it's basically saved our layout as we'd expect. 

We've got our HTML in there, we've got our unsubscribe link, view in the browser link, and we've also got our content variable that was added automatically down here. Ideally, you don't want to have that down there. Ideally, you would populate that, as I mentioned before, somewhere in the content area so you could swap that out with content and do that. For example, I'll just show you what that looks like. If you add content like that, and if we now re-export this template; I'm just going to click on "Export for Customer.io" again, re-export that, download the zip file again, unzip that new zip file, and if we open up that folder, we can see here that if we open up the index file, I'm just going to drag that into my code editor again, copy that; and if we go back to our browser, if we now go "Edit Layout", I'm just going to click "Edit Layout", and again, I'm going to remove the last template, paste that in, and click "Save changes", and I'm just going to say "Done Editing". 

There we go; we've got our content tag in there, and because we've included our own content tag, it's not going to automatically add it to the bottom of the email. It's just going to leave it where it is, because the Figma plugin detected that you've already added your content tag, so it's just going to keep it there and not add its own one. The reason it adds its own one is just to make sure that that tag is in there somewhere. Otherwise, the template basically just won't get saved; you can either remove that or do something with it, or ideally, just add it to your design beforehand.

That's basically it, we've got our email template in here now; that's what it looks like. It's looking really good, and if we go to our content section again and go back to email layouts, we can now see that we've got our "Emailify Template" in there, which is available to use in campaigns or sends later. We'll leave it there for today. I just wanted to keep this quite simple just to show you the basics of exporting HTML from Emailify for Customer.io and uploading that as a new email layout in the Customer.io platform when you're logged into your Customer.io account.

You might be wondering why this can't be done automatically; you might have noticed there's a few other platforms that are in here; there's MailChimp, Klaviyo, Mailgun, all these different platforms, which allow you to add an API key and automatically upload these things. Unfortunately, Customer.io, the platform, doesn't have an endpoint or an API that allows us to automatically upload the templates into the platform, which would be really handy, but unfortunately, it doesn't have that. We do have to do this extra step of manually copying and pasting it into your template section, but once it's in there, you've basically got it in there forever, and you can just create new campaigns from the template or reference that layout however you need to. 

I just wanted to add that context just in case you're wondering why it can't be done via an API; that's sadly the case at the moment, but hopefully, they'll have that in the future, and then the Figma plugin I'm sure will be updated to do that automatically as well. Thanks for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export emails from Figma to grayscale wireframe previews using Emailify
date: 2023-04-17T00:00:00.000Z
---

# How to export emails from Figma to grayscale wireframe previews using Emailify



#### Video Transcript

Today I'm going to be showing you how to automatically export grayscale wireframe previews of your HTML email designs from Figma using the Emailify Figma plugin.

To get started, all we need to do is go to the little "Resources" icon at the top of your Figma file, if you click on that and search for "Emailify", if you click on the Emailify result under the "Plugins" tab, you'll see Emailify pop up. All you need to do to run it is either click on this "Run" button here, or I'd recommend clicking on this "More options" icon here and just clicking "Save Figma plugin", and that's just going to save it to your plugins list for easy access later. I've already gone ahead and done that, so I'm going to go to my Figma canvas, I'm going to right click anywhere, I'm going to go down to "Plugins", then go down to "Saved plugins" and then just click on the "Emailify" Figma plugin we just saved a second ago, and that's just going to run the Figma plugin as we'd expect.

If you're new to the Figma plugin, the way that it works is it basically helps you design and export HTML emails from Figma, and the way it does that is using built-in tools to design components and layouts, and customize the content using the Figma plugin. If you're new to the Figma plugin, I'd recommend checking out another Figma tutorial on our YouTube channel to help with going into the details of actually designing the emails. In this Figma tutorial I'm just going to assume that you've already got your Emailify designs ready to export, and all we're going to be focusing on today is exporting those as wireframe style PDFs that you can then send to your clients for early previews.

To get started, all we need to do is click on the "Export HTML" button in the Figma plugin, and then we just want to change this export setting here from "HTML Email" and instead scroll down to "PDF Previews"; we're going to select "PDF Previews" and that's just going to change the export option to export PDF previews of our HTML instead of just the raw HTML files. Now that we've got that selected, we've got a new toggle here called "Enable Wireframe Mode", if you make sure that's turned on; it might be turned off by default, so if you do want to use wireframe mode, you'll just need to opt into that. If you click on "Enable Wireframe Mode", that's basically going to automatically take our designs here and export them as a grayscale wireframe PDF. 

I'll show you what that looks like now; if you click on the "Export to PDF" button, that's going to go through your emails, it's going to go through the selected emails that we've got here and it's going to automatically export them as grayscale PDFs. Once it's finished converting, we'll just click on the "Download your zip file" button and save that anywhere to computer, and if we now open up that zip file and then open up the folder, you'll see here that we've got a bunch of different files. The first one we can see is this PDF file with the same name as our Figma file; if we open up that in our preview, we can see when the PDF has been opened up we've got a grayscale version of the email that we designed here. It's also making all of the text "Lorem Ipsum", it's putting all dummy text in there. It's also swapping out any images; you can see here the background image the logo image the inline image here, those are all being swapped out with gray blanked out images, you can still see that they're images, but they're just grayscaled out. 

That's also going to be happening down here; if we've got our second email, you can see the second one, the text is matching up with the length; the length is automatically taking into account, how much length of the text there is and turning that into "Lorem Ipsum" automatically. Then any elements with color are just getting gray scaled out as well; you can see the button which was orange, it's still got that tint to it, but it's just in gray, it's been grayed out; again, the button text has been replaced as well.

That's basically what it looks like; this is an automated way to export your HTML email designs from Figma to a more grayscale, out blanked out version. This can be handy if you're in the early stages of a design process and you don't have all the final content or any real content yet, and you just want to give the clients or stakeholder a way to visualize what the layout or structure is going to look like without necessarily having the content ready to go yet; more of a stripped down version that you can send them in those early stages.

The other files that we have in here are basically just variants on that initial PDF; if you want to send a PDF just of each email, you can go into the email folder of each email and use this PDF instead, and that will just give you the desktop and mobile versions of each of those designs just in its own file. If you want to also have individual pages, you can get the mobile and desktop PDFs here as well. If you just want to send a PDF with the mobile design or the desktop design you can send those PDF files that are included as well. Finally, we've got some JPG folders; if you wanted to use the JPG images of these exports, you can open up these files here and these are actually just JPG image files that you can use however you want. For example, we could move those into Figma; if we drop those in you can see here these are just regular images, and we can now use them in our Figma file as well if we really wanted to. These are just images of the exported grayscale wireframes, so we could add a little nice mock-up around them, or we could export these to a different format, or really whatever you want to do you can do that with these JPGs as well. That's just another option you can use if you wanted to take those wireframe exports and do something else with them without them having to be sent in a PDF.

That's basically it; if you want to try out this feature, you can use it now in the Emailify Figma plugin. As I said, this is just for the PDF previews feature at the moment; if you want to include the wireframe mode toggle you can just turn that on and you'll automatically get these outputs. Of course, by default, that's just turned off; if you have that turned off and export the PDF it's just going to export the original designs as they were, it's not going to make any changes to the design at all, it's just going to export them as HTML and render the HTML in your PDF previews.

We'll leave it there for today; I just wanted to do a quick run through of this new feature to optionally export wireframe grayscale PDF previews from Emailify. Hopefully this is helpful if you've been wanting to create more stripped back wireframe style with grayscale images or grayscale previews of your email designs without necessarily having to send the final version to your clients straight away. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to add cubic bezier easing to banner animations in Figma using Bannerify
date: 2023-04-13T00:00:00.000Z
---

# How to add cubic bezier easing to banner animations in Figma using Bannerify



#### Video Transcript

Today I'm going to be showing you how to add custom cubic bezier easing curves to your custom animations for banner exports from Figma using the Bannerify Figma plugin.

To get started, all we need to do is go up to the "Resources" icon here, and if you click on that and search for "Bannerify", and if you click on the Bannerify result, you can run the Figma plugin by either clicking on this "Run" button here, or I'd recommend clicking on this "More options" icon and clicking "Save Figma plugin", and that's just going to save the Figma plugin to your list for easy access later. I've already gone ahead and done that, so I'm going to go to my Figma canvas, I'm just going to right click anywhere, I'm going to go down to "Plugins", then I'm going to go down to "Saved Plugins", and just click on the Bannerify item, and that's just going to run the Figma plugin that we just saved a second ago.

The way that Bannerify works is it basically treats any Figma frames that are on your current Figma page as banners. I've got a bunch of different Figma frames here, and each of those just have a few text and image layers, and then these basically get treated as banners in the Figma plugin. You can choose which banners to load up, I'm just going to load up a few of them; I'm just going to load up these three for today, and load those in. Once it loads, you can see that all of the layers from each of these Figma frames basically get inserted into your timeline in the Figma plugin, where you can then apply animations, and we'll be able to then export those to either HTML, or GIF, or video files.

For this particular Figma tutorial, I'm not going to be going through all the different details of the Figma plugin, but I am going to be going through how to add custom easing to your custom animations. To do that we just click on the "Custom Animations" button in the header, and that basically brings open this keyframe editor that we can use to build our own totally custom animations. For example, if I wanted to make my keyframe animation go from left to the center; in this case, I'm just going 100 pixels from the left to the center, that's basically how you do that. Then that's the first keyframe, the second keyframe we can make that go even further to the right; if we wanted to do something like that, we could do that we can also add new keyframes. We can insert another keyframe at 50% or anywhere, and then we can make that keyframe do something totally different in the middle as well; we could make it kind of bounce or do any kind of keyframe. I'm just going to remove that one from now and I'm just going to keep this really simple for today.

In this particular case, I'm just going to add an animation that rotates from the left over to the right. In our first keyframe, I'm just going to set a bit of a rotation value on the keyframe, the first keyframe, and then you can see here on the right hand side it's just getting basically back to normal rotation, it's just going from negative 185 degrees to zero. We can see here that we've got a normal easing applied to it, in the animation easing drop down here we've got "Ease" selected, which is just the default easing. We can also change that to things like "Linear" which doesn't add any sort of jump or kind of effect to it, it's just a very linear path to path animation. Then there's also some other presets like "Ease In", "Ease Out" and "Ease In Out". But for today, we really want to add a new custom easing; if we can click on this 
"Cubic Bezier" option, and what that does is it allows us to paste in a custom CSS bezier. 

If we click on this link here, it'll basically take us to this website where we can generate custom cubic bezier rules, and you can see here there's a few presets. If we click on these it'll show you what that transition is going to look like, what that easing looks like; we can change the category here, so if we want to do ease out, we can do ease out, we can do ease in, all different types of easings. In this particular case, I'm just going to stick with "Ease In Out", and I'm just going to set it to this easing over here, and we've got this easing that I kind of like. To copy it, we can just click on this little button down here and copy that, and if we go back to our animation, paste it into this input here, that will basically apply the cubic bezier curve that we've just added to the Figma plugin.

You can see here that the easing is much much different in the preview than it was with the typical default easing. If we switch that back to the normal easing, you can see here that it's basically very smooth, it's not 100 linear, but it's quite linear; not as linear as the normal 
"Linear" option, but if we then switch that back to our custom one to preview that, click on "Custom Bezier", and we've still got our rule in there. We've got our custom ease here, and you can see that it starts off very slow and then dashes much faster towards the end; this is how you can use custom cubic bezier easing curves to totally customize the easing in your animations.

To save the animation, all we need to do is give it a name; we can say "Cubic Ease", and we're just going to add that as a new animation by clicking "Add new animation". Now that we've got that added to our animations, we can now apply that to any of our layers just by changing the setting of that layer; for example, if we wanted to animate this button in like that, we could just go to the button, change the intro animation to "Cubic Ease" under the "Custom" group, click on "Cubic Ease", and now if we play that back again you can see here that it's basically doing the rotate animation that we added. If we play that in, that's just getting added in like a crazy animation now; probably not the best fit for this particular layer, but you can see what that looks like when we do add it in.

You can of course go back and edit that; if we decide it's a bit too crazy, we can go back in click on the "Saved animations" drop down, go back down to our "Cubic Ease" one that we saved, and then we can change this to be a little bit more reasonable. If we jumped back into the 100% frame and just made it end up at zero; instead of going to 100 we'll just go to zero, so it's just going to end up where it started. Then maybe we can add a bit of opacity change as well; on the first frame, I'm just going to make the opacity start at zero, and I'm going to make it fade up to one which is 100% on the second frame. To update the animation, we can save that update, so we can just click on "Update saved animation". If you wanted to save it as a new animation, you can do that as well, you could do "Cubic Ease New" and that would allow you to save it as a new one, if you click on "Add new animation", that'll basically create a fork or a copy as a new animation. In this case, I'm just going to click "Update saved animation" and update our existing one. 

I've just updated the "Cubic Ease" animation, and if I go back to my timeline, you can see here that the update has automatically been applied to the existing selected custom animation that we had. If I click on play, you can see here that this time it's fading in and rotating in into the spot that it's originally appearing in in Figma, because we changed the 100 keyframe to be zero as far as the X translation goes. You can see that the cubic bezier easing is being applied as we'd expect; that's just getting thrown out now. 

We can also export this as a GIF, or a video, or an HTML banner. I'm just going to copy this animation from my button; I'm just going to click on "Copy", and I'm going to apply that to all of the CTA buttons in my banner set. I'm just going to click on the quick select button, that's going to select all of the CTA buttons automatically, then I'm just going to click "Paste", and that's going to apply it, then I can just click "Apply" and that's going to apply my animation to all of the CTA buttons. If we now go to the top one, you'll see here that the rotation animations also now being applied to this button as well. Then we can export that out just by clicking on "Export to GIF/Video"; in this case, I'm just going to click "Export to GIF/Video", and today I'm just going to be rendering out to a WebM, just to do a quick video export. This will basically go through and export all of your banners in the timeline out to a video, and you can see here that it's rendering out all the frames from our timeline, including the cubic easing custom ease that we just added to the CTA button. 

I'm going to click on "Download your zip file", I'm going to save that to my desktop, I'm going to open up the zip file, and if we open up that folder you can see here that we've got our videos exported, and we've just got this index.html file that we can use as a bit of a preview. If we drop that into the browser, I'm just going to drop that file in, and you can see here that it's playing back our videos as we'd expect; that's just going to keep looping because it's a preview page, and you can see here that the "Book Now" button is flying in from the left with our custom animation and custom cubic bezier easing that we created in Bannerify.

That's a pretty basic run through of how cubic bezier easing works, how it can be used in the Bannerify Figma plugin using a site like this or generating your own custom cubic bezier CSS easing curve, and then just copying that CSS cubic bezier path from here or whatever other site you want to use to generate it, and just dropping it into your custom animations easing panel whenever; you've got the "Cubic Bezier" easing option selected, that will let you paste that right in.

We'll leave it there for today; I just wanted to go through this new feature in Bannerify, so you can add custom cubic bezier easing curves now. This should make it much more flexible to customize the type of animation style that you want to use when you're creating custom animations for your Figma banners in Bannerify; hopefully this will free up your creativity a bit more, and allow you to create some really neat custom animations to export from Figma. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export HTML emails from Figma to PDF previews using Emailify
date: 2023-04-10T00:00:00.000Z
---

# How to export HTML emails from Figma to PDF previews using Emailify



#### Video Transcript

Today I'm going to be showing you how to automatically export PDF previews of your HTML email designs from Figma using the Emailify Figma plugin.

To get started all, we need to do is go up to the "Resources" icon at the top of your Figma file, if you click on that and search for "Emailify", and under the "Plugins" tab you'll see Emailify pop up. If you go ahead and click on that, you can run the Figma plugin by clicking on this "Run" button here, or I'd recommend clicking on the "More options" icon, and then clicking on "Save Figma plugin", and that'll just save it to your Figma plugins list for later. I've already gone ahead and done that, so I'm going to right click on my Figma canvas, just going to go down to "Plugins", I'm going to go into "Saved Plugins", and then click on the "Emailify" item, and that's just going to run the Figma plugin we just saved a second ago.

If you're new to the Figma plugin, the way it works is it basically allows you to design emails in Figma with some help from some of the built-in components from Emailify, and also some of the quick add options, so you can build out your own layouts and contents here. I'm not going to be going into detail about that today; if you want to run down of that, there's a couple of really good Figma tutorials on the YouTube channel if you just search for the Emailify playlist, you'll be able to see those pop up and get those sorted out before you continue with this Figma tutorial

Today, I'm just going to assume that you've already got your designs set up the way that you want, and you've got them rendering the way you want, and all you want to do now is export them to a PDF that you can send to your clients or stakeholders, and send that around for approval, if you don't want to send an HTML version. What this is going to do is it's basically going to take the real HTML, we can see here in the preview we've got real HTML from our design that's automatically getting converted to HTML through the Figma plugin, and it's going to take the mobile and desktop designs from HTML, this real HTML render, and it's going to basically export those out to a PDF. 

We're going to do that now; if we close off the preview, and I'm just going to go to the "Export HTML" button, I'm going to click on "Export HTML" and by default it's going to be set to the "HTML Email" option, we're just going to click on that drop down now, and under the "Download To Ccmputer" group, we can see at the bottom here we've got a new option called "PDF Previews". I'm going to click on "PDF Previews", and that's all you need to do, you don't need to change anything else. All you need to do is select the emails on your page that you want to include in the export; I'm just going to export both of these emails today, and I'm just going to now click on the "Export to PDF" button. 

I'm going to click on "Export to PDF", and this is basically going to generate the HTML for our emails and then also generate the PDF previews based on that HTML. It's just going to give us some PDF files and also some JPEG files, some static image files that we're going to be able to use or look at in a moment; once it finishes generating the PDF previews, it's going to zip that up for us and it's going to allow us to download that zip file to our computer. in a moment we'll get a confirmation screen telling us that our PDF previews are ready to download. We can now download our zip file; I'm just going to click "Download .zip file" and save that to my desktop, and if I unzip that file I'll show you what's in that folder.

We've got the unzipped folder here, and you can see that there's a few different files in here. The first one is just the PDF file that contains all of our emails with the mobile and desktop view for each of them; I'm just going to open that up now to preview it, and we can see here that we've got our first email, this is our desktop view, and as we scroll down on the second page you'll see the mobile view. We've got our mobile view, and then the third page will be the desktop view for the second email, and then the final page is the mobile view for that second email as well. All of those mock-ups desktop and mobile HTML based, these are not being rendered from the Figma images, these are actually being rendered based on the real HTML that's getting generated. As you can see, we've got the way that the mobile version renders in HTML the way that the desktop version renders in HTML, and that's getting exported to a single PDF file.

That's probably the main PDF that you're going to be using if you just want to send around a PDF of all of the previews in one file, you can definitely do that, and there's also some other options. We can see here we've got our emails that we've exported in two separate folders as well; if we open up one of those folders, if we now open up the PDF in that folder, this particular PDF will just include the desktop view and mobile view of that one email, if you just wanted to send PDFs of each of those emails. If you you wanted to send those two separately, you could send these two files to your stakeholder or client to review, and those would be each design in separate PDFs with the mobile and desktop version in each of those. Even more granularly, if you wanted to just send a PDF of the mobile or desktop version on its own, you can do that as well. If you open up this PDFs folder inside of the email, you can basically get a one-page PDF for the mobile version; this is just a one-page document here it doesn't have any more pages, or, you've got the desktop one as well, this is just the desktop PDF if you just wanted to send one of them. 

Furthermore, you can also break it down into JPEG; if you wanted to use these JPEGs for any reason, you've got access to those as well. If you wanted to include them in your own personalized mock-up, or something like that for example, you could drop these into your Figma file. I can drop those JPEGs in there and that will basically allow me to use these exports as images. I can actually take those JPEGs include them into Figma, or drop them into a different application, or just send them as static images; if you didn't want to send a PDF, you could just send them as images or upload them to a different preview application, or just as an email or Slack attachment, or something like that. 

You've got a few options herem depending on what kind of preview workflow you have internally; if it's PDF based, if you want to include them all in the one document you've got that one up here, if you want to include them as separate documents with mobile and desktop you can do that here, and then finally if you wanted to really get granular you can send them as individual PDFs with a PDF per view of mobile and desktop in here as well. As we just went through, the JPEGs as well, we've got our JPEGs for each of these mock-ups; this is version two, you can see we've got our JPEGs there. 

That's a really easy way of exporting the HTML files to PDF if you want to use that as an alternative way to send preview links. The other option is just to export the HTML normally; if you export it to HTML normally, it will also include a preview link that you can use as well, or you can actually upload it to Netlify and get a hosted URL as well. I covered that in another YouTube Figma tutorial, but for today we're just going to leave it with the PDF previews to keep it simple.

That's basically it; I just wanted to run through this new feature with you because I know that some people still prefer to send PDF previews rather than live HTML previews. This is going to be a really good balance, where you can automatically export the PDF previews from Figma from Emailify based on the HTML, but still get the PDF document that you can just send as a document file via email or whatever platform you're using with your stakeholders and clients, and they can review that and mark it up, or do whatever you usually do with your PDF review processes.

We'll leave it there for today, and I hope that's been helpful if you've been wondering how to export your HTML emails from Emailify out to a PDF, you can easily do it now using this new "PDF Previews" option. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export responsive HTML banners from Figma using Bannerify
date: 2023-04-09T00:00:00.000Z
---

# How to export responsive HTML banners from Figma using Bannerify



#### Video Transcript

Today I'm going to be showing you how to automatically export responsive HTML banner ads from Figma using the Bannerify Figma plugin.

To get started, all we need to do is go up to the "Resources" icon at the top of your Figma file, click on that, then search for "Bannerify" and under the "Plugins" tab you'll see Bannerify pop up; if you go ahead and click on that icon, you'll get this result here. To run the Figma plugin, all you need to do is either click on the "Run" button here, or I'd recommend clicking on the "More options" icon here and clicking "Save Figma plugin" and that'll just save it to your Figma plugins list for easy access later. I've already gone ahead and done that, so I'm going to right click on my Figma canvas, I'm going to go down to "Plugins" I'm going to go down to "Saved plugins", then I'm just going to go to "Bannerify" and click on that, and that's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is it basically treats any frames on your current page as banners. I've got a bunch of different frames here at all different sizes, and in each of those frames I've just got some text layers and image layers that I'm using as the banner elements. I'm just going to go ahead and load all of those in; I'm just going to load all the banners, and that's just going to load them all into the timeline in the Bannerify Figma plugin. I've already got some animations applied to these, you can see here it's just some basic fade and slide animations. I'm not going to go into detail about how to animate the banners and design them, there's a couple of other Figma video tutorials on our YouTube channel if you want to check out the Bannerify playlist, that's a good place to start, but for today I'm just going to assume that you've already got your banners set up in Bannerify, and animated and designed the way that you want; and what you want to be doing is just exporting them out to a responsive HTML banner format.

We're going to do that now; I'm just going to start by clicking on the "Export to HTML" button in the Figma plugin, I'm going to click on "Export HTML" and then down here in the code output settings we just want to change this drop down here from "HTML/CSS", which is kind of the "Non-Platform Specific" options at the top here, and then if we go down to the "Platforms" category, if you scroll down and get to the letter "R", you'll see "Responsive Display Ad" pop up as the format. We want to click on this Responsive Display Ad format, I'm going to click on that, and that's just going to allow us to add a click tag if we want to do that; assuming we're going to be uploading this to Google Ads or Google Ad product, there's a few of them, you can add your own click tag. It'll add the "clickTag" variable with the URL that you want to add, or you can just leave that blank and you can set that after you've uploaded the responsive display ad as well. 

The other thing we can do is include a zip file inside of the zip, and this is going to allow us to have the files automatically zipped up when we export them; you can export that zip file straight up to your Google Ads platform. Then the other option we have here is just to either minify or unminify the code; minified will basically just put all of the HTML, CSS and JavaScript into one HTML file, and if you uncheck that it'll give you a separate CSS and JavaScript file to export into your package as well. I'm just going to leave that as minified, and I'm just going to leave all the other options as is; now I'm just going to go ahead and click on "Export Banners", this is going to generate all the HTML, CSS and JavaScript for our responsive banner automatically, and then it's just going to export all of the images as well.

Once it's done that, we'll get this confirmation screen which is going to tell us that our banners are ready to download. I'm going to click on "Download your .zip file", I'm just going to save that to my desktop and unzip the file, and I'll show you what's inside of that folder. Inside the unzipped folder, we've got a few different things; we've got our "backups" folder because we've got some backup jpegs, we've got all the backup jpegs in there, so you've got your backups files. Then you've got the "zip" folder which is the zip option that we selected; this is basically a zip file that automatically zips up the contents of this folder here, this zip file contains this index.html file and this images folder, and inside of those are your actual banners.

This other index file here that's actually just the preview file of your banners; if we drag that into the browser, you can see here that this is the preview that's loading up the banners, but the interesting thing is that all of these banners are the same file. If we jump into this folder here, we can see here that this index.html file is actually what's being linked to on this page; this HTML file is being linked to in all of these different iFrames on this page, so if we were to open up this file here you would basically see nothing because the media queries for that page are not actually visible. 

For example, if we were to open up this file in a code editor, if I just drag and drop the index file into here, you'll be able to see that there's a bunch of media queries; these media queries are essentially acting as the way to trigger the responsive banners. For example, certain banners will only show up if certain viewport sizes are being met; for example, 600 by 300, 280 by 336, these banners will only render those certain sizes when the viewport is the correct size. We can see here because all these viewports all these iFrames are being rendered at the exact size of the banner, that's what's allowing them to be swapped out in real time as a responsive Banner using one file. 

That's what that looks like when you actually open up the code and that's why the file here will appear to be empty, but actually, is not rendering because it's not at the right size. When you upload the banners and they get rendered in the correct size, the responsive code will kick in and automatically pick up on which banner to display based on the size of the viewport. 

That's basically what that looks like; this is the responsive banner, as I said, it's all coming from this one index file and all of our images are in here and it's just going to display whichever banner is the correct one based on the current viewport size. This is opposed to needing a bunch of different banners; for example, if we would export this normally, I'll just do one really quick example of this. If we export for "Google Ads" and export those banners, this is basically just going to export all of the same banners, but it's going to export them as separate HTML files. We'll see what that looks like in a second, I'll just quickly download this to my desktop and show you the difference. 

If we open up this folder, you can see here that this is our responsive one and then if we compare that to the other one that we just downloaded, I'll just compare those two; in in the responsive one we've just got one file, we've got one index file, one banner, and in the one we just exported through Google Ads, you can see that every banner has its own HTML file. It looks the same when you preview it, these are all going to look exactly the same, but they're all being pointed to individual banners they're being pointed to each of these individual banners; instead of uploading 12 banners, or 11 banners in this case, individually, you can basically just upload one and be done with it; that's the advantage of using responsive banners in certain cases. 

I hope that's been helpful if you've been wondering how to export responsive banners from Bannerify; this is going to be the easiest way to do it you just click on the code output settings, change it to "Responsive Display Ad" and you'll basically be good to go. Just click on the "Export Banners" button and you'll have those responsive HTML banners in a few seconds. We'll leave it there for today; I just wanted to go through this new option with you if you've been wondering how to export responsive HTML banners from Figma, this is going to be the quickest way to do it, using the Bannerify Figma plugin. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to upload preview links for HTML emails from Figma to Netlify using Emailify
date: 2023-04-07T00:00:00.000Z
---

# How to upload preview links for HTML emails from Figma to Netlify using Emailify



#### Video Transcript

Today I'm going to be showing you how to automatically create preview links for your HTML emails in Netlify using the Emailify Figma plugin; this is going to allow you to share preview Links of your email designs exported to HTML with stakeholders or clients or anyone on your team.

To get started, all we need to do is go to the "Resources" icon at the top of your Figma file, and if you click on that, and then search for "Emailify", under the "Plugins" tab you'll see Emailify pop up. If you just go ahead and click on that result, you can run the Figma plugin by either clicking on this "Run" button here, or I'd recommend clicking on the "More options" icon here and clicking "Save Figma plugin" and that's going to save it to your Figma plugins list for easy access later. I've already gone ahead and done that, so I'm going to right click on my Figma canvas, I'm going to go down to "Plugins", I'm going to go down to "Saved Plugins" and then I'm just going to click on "Emailify", and that's going to run the Figma plugin that we just saved a second ago.

In this Figma tutorial, I'm not going to be going through details of how to design the emails, there's some other Figma tutorials on our YouTube channel that you can find in the Emailify playlist if you want to jump into that, but for today I'm just going to be assuming that you've already got your emails designed using the Emailify components that you've customized, and basically the email is ready to go and you just want to now upload it to Netlify to create a preview link to share that design exported as HTML with stakeholders for approval. 

All we need to do is click on the "Export HTML" button and once we've done that we can see here that by default it's going to export the HTML email to download to the computer, but in this case we want to export it to Netlify. I'm going to scroll all the way down and find the "Upload Preview Link" group, and I'm going to click on the "Netlify" option. Netlify is a platform that hosts static websites or static HTML, so this is going to allow us to automatically upload our HTML email from Figma up to a Netlify preview link. All you need to do is click on this "Personal Access Token" link here, and if you're logged into Netlify, which I am; if you don't have a Netlify account you can create a free one, if you're a Netlify user, you can just sign in and if you click on that link you'll be taken to the applications page in your settings panel.

What you need to do is go down to "Personal access tokens" and click on "New access token", I'm going to click that, and then add a description; in this case, I'm just going to say "Emailify" and click on "Generate token" and that's just going to give me a new personal access token that I can copy. I can copy that to my clipboard by clicking on this little copy icon here, and it's worth storing that somewhere safe in a password manager or something like that to reuse again later, if you like, because once you leave this page it's not going to be able to show you that token again; just something to keep in mind.

After you copy it to your clipboard, go back to Figma, go back into the Emailify Figma plugin, and in this input field here with the key icon, just click on that, and then paste in that token that we just copied. I'm going to paste that in and that's just going to connect to Netlify and automatically generate a new Netlify site; what that does is it basically just creates a brand new site in your Netlify account and it gives it this random name that comes from Netlify. You can obviously go ahead and change that site name as well, if you click on the "Change site name" link; I'm going to click on that now and that's basically just going to take you directly to the new site that was just created by the Figma plugin using the API. You can see here it's currently called "Majestic Dolphin", and we probably aren't going to be sending a link called Majestic Dolphin to our clients. In order to change that, all we need to do is click on the "Change site name" button in Netlify and if we change that now to be something more relevant, we'll just say email "Jiro Sushi Preview" and I'm just going to call it that, and click "Save". Just something to keep in mind is that the site name does have to be unique; it can't be the same subdomain as any other subdomain on Netlify, so you just want to make it something unique. 

Once you've changed that in Netlify, you can just jump back into Figma, click on this little "refresh" icon, that's just going to reload the Netlify site, and you can see here that it's picked up on the fact that we've just changed the site name to "Email Jiro Sushi Preview", and this is now going to be our new domain. It's worth noting that the Site ID here stays the same, so we could basically change that once again; if I changed it to "preview link", for example, we could click click "Save", and if we jump back again refresh that, it's going to automatically change that again to the same Site ID; that's just a really easy way to rename the site.

All you need to do is just put in all your details as usual, subject line, pre-header text, all that sort of stuff; and now all we need to do is click on "Upload to Netlify"; I'm going to click on "Upload to Netlify", that's just going to generate the HTML and upload the images that it normally does, and then it's going to upload it to Netlify. It's pretty quick, we can see here that it's telling us that our Netlify preview link has been uploaded, and if we click on the "Netlify Preview URL", I'm going to click on that link, that's going to open up the URL that we just created.

You can see here that we've got our HTML preview ready to go, this is the HTML that was just exported from Figma, we can see that it's looking exactly the way we wanted based on the preview in Figma. We can now send this link around to team members, or stakeholders, or anyone who needs to approve the design, you can basically just share that link now without having to manually upload it yourself. 

You can also download the zip file, if you wanted to have a copy of the files that were uploaded to Netlify, all you need to do is click on "Download your zip file", click on "Save", and that's just going to create a zip file on your desktop or wherever you save it. If we open up that folder after unzipping it, we can see here that these are the files that were uploaded; the index.html file, which is the preview file that was what was uploaded to Netlify, which is pointing to our email here; this is the email contents and the images and everything like that.

That's basically what it looks like there. I hope that's helpful if you've been wondering how to generate preview links automatically, if you're sending around HTML email exports from Figma to clients or stakeholders, this is going to be a lot easier than manually downloading the preview files and uploading them to an S3 bucket or a Netlify site yourself. This is just a really quick way of automating that process to upload the preview links to Netlify, which is a really good platform for hosting static sites. That's going to be it for today, I just want to keep it really simple to show you this new export feature from Emailify; I hope you find it useful for you and your team, and I hope that improves your workflow for sharing around HTML email preview links with stakeholders. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to add page numbers to Figma slides automatically using Pitchdeck
date: 2023-04-04T00:00:00.000Z
---

# How to add page numbers to Figma slides automatically using Pitchdeck



#### Video Transcript

Today I'm going to be showing you how to automatically add page numbers to your slides in Figma using the Pitchdeck Figma plugin.

To get started. al, we need to do is go to the "Resources" icon at the top of your Figma file, click on that, and then search for "Pitchdeck"; under the "Plugins" tab you'll see Pitchdeck pop up. All you need to do is click on the "Run" button here, or I'd recommend clicking on the "More options" icon and then clicking "Save Figma plugin" and that will save it to your Figma plugins list for later.

I've already gone ahead and done that, so I'm going to go to my Figma canvas, just going to right click anywhere, go down to "Plugins", go down to "Saved Plugins" and then click on the "Pitchdeck" item that we just saved, and that'll run the Figma plugin that we just saved a second ago. 

To get started, all you need to know if you're new to the Figma plugin, is that the Figma plugin basically works by treating any frames on your current Figma page as slides. In this case, we've got a bunch of slides and each of them are just being set to 1920x1080, and then all we're doing is basically including text layers and image layers inside of each frame and those get treated as the contents of each slide in the Figma plugin, where you can add animations, and embeds, and things like that. For this Figma tutorial, I'm not going to go through all those things in detail; if you want to check that out there's some other Figma tutorials on the YouTube channel that you can look at. In this case, I'm just going to assume that you've already got your presentation and design set up the way you want and all you want to do now is add some page numbers automatically, which we can do using a new feature in the Figma plugin.

To open up that feature, you just click on the little "Page" icon in the top left of your Figma plugin; we can click on this icon here, and that's going to add a new modal or a new pop-up window with some options here for our page numbers. What this does is it essentially creates a slide number Figma component and then it automatically updates the slide numbers whenever those are rearranged or added or removed in the Figma plugin. I'll show you what that looks like now, if you go ahead and click on the "Enable Auto Slide Numbers" toggle, I'm going to click on that, and you can see here when I enable that it actually creates a brand new layer in our Figma file which we can jump to easily by clicking on this little component icon here.

When we click on that, it'll automatically jump to that component in our Figma file, and you can see here that it's got three text layers inside of it; it's got a dark text layer, a light text layer, and a custom text layer, and what those do is it basically allows you to style and customize the page numbers depending on what kind of style you want to use for them. For example, you can see in this case it's automatically gone through and created instances of each of those components; we can see here we've got automatic page numbers on the bottom right of our frames, and we can customize the position of that. For example, if we wanted to change that to be the top right, we can just change that, and it'll automatically move that. We can make it top left, we can do center, all different positions depending on where we want to style those. 

You can also do things like add leading zeros; if you want to add zero, for example, zero one, zero two, zero three; you can toggle that as well and that'll automatically do that for you. 

Then in terms of the colors, as I mentioned, by default it will set it to this "Auto Text Color" setting, which essentially takes the background color of the frame; in this case, we've got a black background color, which is just a solid fill, and then in this one we've got a solid white, and so what it's doing is it's calculating whether this text layer should be dark or light based on the solid background color of each frame, then what we can do is we can actually customize the light and dark colors.

If we go to our component and then we go to the "Dark Text Color", for example, you can see by default it's set to black with a 75 percent opacity, but of course we can change that if we wanted to make it a different color; we could make that a more purple color and we can change that, and that'll automatically change it for all of our instances here. The same thing goes for the "Light Text Color"; by default, that's just set to white with a 75 opacity, we can obviously go ahead and change that if we wanted to. In this case, we could make it green and change that there, and that will automatically update anywhere that the dark or light versions are being used in the instances. 

We can also change it from "Auto Text Color" to just using the "Dark Text Color" if you wanted to only make it use the dark text color for everything, you can do that; same thing with light, you can make it always use the "Light Text Color", or you can go with the third option and make it use a "Custom Text Color" if you want to just have a totally different color in its own kind of category, there's a third option which is the custom text color, and you can go ahead and just change that to whatever you want as well, and that will be applied to everything.

On top of just colors, you can of course style the text. For example, if we change this to top left, and then change the size, you can see when we increase that it's automatically anchored to the top left. The same thing would happen if we changed it to bottom right; if we go to the bottom right, and then we increase or decrease that font size, the instances are automatically constrained to the bottom right. That always allows you to scale the font up or down and keep the anchor position wherever the corner or the edges are in that instance, so that's really handy for doing that.

You can also change the font; we can change that to be bold, we can change it to be a totally different font if we wanted to, we can change that in here and you can basically just customize this however you want. Keeping in mind I'm doing all of this from the master component; we've got the component up here with our three text layers and these are always going to get injected into the instances automatically. You can basically style it in one place and have that style apply to every frame in your file automatically without having to go one by one, you can just style it centrally and that makes it really easy for doing that.

I'm just going to set that back to "Auto", and just use our other components that we had set up, and you can see if we change the ordering of these slides in our Figma plugin, for example, at the moment we've just got it set to sort visually, so we're doing it from top to bottom visually. If we were to reverse that, for example, and sort it from bottom to top, you can see here that the slide numbers changed automatically; we've now got 01, 02, 03, and we're ending at 09 up here because we reversed that order. You can also do this by manually dragging and dropping; if we made "Principle Six" slide one, you can see if we now go to Principle Six, it's made that as the first slide in the ordering of the numbers. Again, if we move that down, changed it to two, it automatically changes it to two. This is a really easy way of keeping all the slide numbers in sync depending on what they're set at in the Pitchdeck Figma plugin.

The same thing applies if you decide to remove some slides from the export; for example, if we didn't want slide six in there at all, we can just remove that and it removes the page number, and it will automatically recalculate all the other numbers based on that. You can see here, the last frame in this case is set to 08; if we start removing more, that'll just keep going down because the total number of slides is being decreased; those slide numbers take into account which slides and how many slides are active in the presentation itself through the Figma plugin. That's a really easy way to keep all of your page numbers in sync without having to manually recalibrate them or update them manually every single time you rearrange them.

That's essentially it; I just wanted to run through all the different ways that you can use this new feature to customize the slide numbers. You can see if the setting is active by seeing this little blue dot next the icon, next to that "Page" icon; that'll just let you know if the "Auto" slide setting is active. You can go in there, and if you want to turn it off, you can just go ahead and click on the "Enable Auto Slide Numbers" toggle again and disable it, and what that'll do is it'll just remove all of the instances that were being added automatically to all of your slides; those go away completely, but it will keep the component hidden, so it won't delete it entirely. The reason for that is just in case you've spent some time styling some of those page numbers, then when you re-enable it, it'll just resume those styles that you've already got set up in there, so you don't have to restyle them if you decide to temporarily disable the slide numbers from showing up. If you did want to remove it entirely from your file, all you need to do is disable this, and then you can go ahead and manually just delete the component; remove it entirely, and then if you then re-enable the "Enable Auto Slide Numbers" toggle, that'll just reset the component back to where we had it at the start, with the default styles and default values.

That's essentially what that looks like there, and of course these will get included with any exports. If you would now export this deck to any of the export options; if you click on the "Export" button, we can either export it to the Pitchdeck web application, which will let you present the slides in the browser and you can share that link with people, or you can export it to PowerPoint, or Google Slides, or Keynote, or we can also just export it to a PDF deck. If we export it to PDF, we can essentially just export that out as a static PDF file, and once that's done we can download it to our computer, and if I open that up now we can see the page numbers will be in there as expected; those are in there, each slide has its own page number just as we designed it in Figma, with the Figma plugin automatically adding those in to each of the slides.

That's what that looks like there; I think we'll leave it there for today I just wanted to run through this new feature with you in case you've been wondering how to automatically add slide numbers to your Figma pages or Figma slides this is a really easy way to go about doing it without having to manually manage a deck especially if you've got dozens of pages that are constantly getting added and removed and rearranged this is a really easy way of kind of putting that on autopilot and allowing you to style them centrally from this slide number component that the Figma plugin helps automatically generate um; yeah thank you as always for watching and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to upload preview links for HTML banners from Figma to Netlify using Bannerify
date: 2023-04-01T00:00:00.000Z
---

# How to upload preview links for HTML banners from Figma to Netlify using Bannerify



#### Video Transcript

Today I'm going to be showing you how to automatically create a preview link of your HTML banners exported from the Bannerify Figma plugin on the Netlify platform, which will let you host it as a URL that you can share around to clients or stakeholders or anyone that you want to share a preview link of your banners with.

To get started, all we need to do is click on the little "Resources" icon in your Figma file, and if you search for "Bannerify", under the "Plugins" tab you'll see Bannerify pop-up. If you go ahead and click on that result, you can run the Figma plugin by either clicking on this "Run" button here or you can click on this little "More options" icon, which I'd recommend, and click on "Save Figma plugin" and that will save it to your Figma plugins list for easy access.

If we go to the Figma page, right click anywhere, go down to "Plugins", then go down to "Saved plugins", you can then click on the "Bannerify" item and that'll run the Figma plugin that we just set up a second ago. With this Figma tutorial I'm not going to be going through the details of how to create the banners and design them and animate them, there's a separate YouTube Figma tutorial on the channel if you wanted to search for that one; today I'm just going to be assuming that you've already got some banners set up. 

I've already got a bunch of banners set up, each of them just have a few layers of content on them; I'm just going to load those into the Figma plugin by clicking on this button here and that's going to load in the banners that we've got from Figma. You can see here that I've already got some basic animations applied; you can see here there's some animations on each of the layers and these are all ready to go; I'm just going to assume that you've already got your banners ready to export from Figma into HTML. 

What we need to do now is follow the steps that you'd usually take; in this case, we'll click on the "Export to HTML" button and that's going to open up the normal export panel that you'd see. In this case, we've got our code export settings, so we can decide what platform to export it to; today, I'm just going to do HTML/CSS, you can choose different ad platforms like Google Ads, but that's up to you. I'm just going to make this retina images and leave everything else as is just to keep it really simple. 

The thing I'm going to be focusing on today is showing you how to upload the preview page, that always gets included in the Bannerify exports, up to Netlify. If we click on this little checkbox here, "Upload Preview Page URL to Netlify", if you click on that toggle, that's going to enable this new section that we can paste a Netlify personal access token into. What you need to do is. if you have an Netlify account, just sign into your Netlify account; if you go to netlify.com and sign into your Netlify account, or you can create a free account if you don't have one; in this case, I'm just going to use my own one. 

I've got my Netlify account logged in and if you click on this link here, the "personal access token" link, it'll take you to this page. What you need to do is create a new access token; I'm going to click on "New access token" and I'm just going to call it "Bannerify", I'm just going to add that in there so I know what this token's being used for. Then I'm going to click "Generate token" and that's going to generate this token here; you can copy that to your clipboard by clicking this icon, and you can also store it somewhere for later, you can store it in a password manager or something like that, somewhere safe to reuse later if you want, because you won't be able to see this code again after you close off this window.

I'm just going to click on "Copy" and then go back to my Bannerify Figma plugin. I'm back in my Figma plugin, and I'm just going to paste in that token that we just copied into this "personal access token" box here. I'm going to paste that in and that's going to load up the Netlify site; because it's the first time I pasted that in for this Figma page, it's created a Netlify domain for me which I can now change in Netlify if I want to; by default, this will be the domain name that will be used for your preview page, but if you don't want the one that's automatically generated by Netlify, you can just click on this "change site name" link here. If I click on that, that's just going to open up the Netlify tab for that site; you can see here this is the site that we just created via the Figma plugin, and now if we go to the "Domain settings", you can see down here that we've got our site information, and I can click on "Change site name". I can click on that and update this, so I'm going to call it "Bannerify Preview Page Demo" and click on "Save", and you can see here that's just changed the name of our site.

If we want to see that reflected in the Figma plugin, we can just go into the Figma plugin and click on this little "refresh" icon, and that's just going to refresh the Netlify site. You can see here that the page URL has been updated to the one we just changed; that's all we need to do to set that up. Now, because we've still got our "Upload Preview Page" toggle enabled, when I click on the "Export Banners" button, which I'll do now, this is going to export all of our banners to HTML, CSS, and JavaScript, export all the images automatically, everything like that; and once it's finished, it's also going to upload the preview to Netlify; that's what it's doing right now, and you can see here it's now completed. 

This is the normal option that we have whenever we export banners from Bannerify; we can either download our zip file, I can click on that, download that to my desktop for example, and if we open up that zip file you can see we've got this folder here and we've got this index.html page which is actually the preview page that we normally get. If I drop that index.html file into the browser, you can see here that this is the local copy of our preview page that we normally get, but because we enabled the preview toggle to also upload this to Netlify, you can see here that we've got our Netlify preview URL showing up as well. It's telling us that we can check out those on the Netlify preview URL, if we click on that link, this is going to automatically load up the URL that we just set up in Netlify. You can see here the custom page name that we gave it, and you can see here that all of our banners are being loaded in to the preview page. You could send this link to a client, or a stakeholder, someone inside your company, or outside, and they can view that link without having to manually open that zip file and load in the preview page by dragging the HTML file in, it'll just do it all on this page here as a hosted link. 

There's also a link here to manage the site settings, if you click on the "site settings" link, that will automatically open the Netlify panel for that site. You can see here we've got the deploy that was just made, that's all the details about the deployment that was deployed from the Figma upload, and then you can also do things like change the domain settings, you can change site settings and change a whole bunch of different things in here. You can get pretty advanced with it depending on what you want do, but for the most part you probably just want to change the site name, as we did before, and you can change that again if you need to, because the site ID itself will stay the same. Even if you change the name of this, it'll basically still link up with the site in Figma; you can change that name and that will get reflected in Figma, but the link itself will upload re-upload when you change it from Figma; that's just something to keep in mind.

That's basically it; I just wanted to run through that really quickly with you if you've been wondering how to automatically create these preview pages that are live rather than having to manually upload the exported HTML preview page somewhere, this is an easier way to go about it if you just want to automate it and use Netlify as the platform to host the preview pages on, which is a really good platform.

One thing to be really mindful of is, if you're not seeing some of the images show up, if you're not seeing any images or any elements aren't showing up in the banners on the preview link, it's potentially because you've got an ad blocker turned on. Sometimes with these banner ads when they're being viewed online, the ad blockers can block some of the images or block some of the scripts and cause it not to display. If you are running into any issues with banners not showing up completely, you might just have to disable the ad blocker that you've got turned on for this URL and then it should be all good to go if you just click "refresh" after that.

We'll leave it there for today; I hope that's been helpful if you've been wondering how to create preview pages for your Figma banners HTML banners that you can share around if you're using Netlify, or want to start using Netlify, it's free to sign up just for an account, and you can basically drop in that key or that token and start creating preview pages directly from Bannerify in Figma. Thank you as always for watching and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to add custom HTML, CSS and Javascript to Figma banner exports using Bannerify
date: 2023-03-28T00:00:00.000Z
---

# How to add custom HTML, CSS and Javascript to Figma banner exports using Bannerify



#### Video Transcript

Today I'm going to be showing you how to add custom HTML CSS and Javascript to your HTML banner exports from Figma using the Bannerify Figma plugin.

To get started, all we need to do is go to the "Resources" icon at the top of your Figma file, and if you click on that and search for the word "Bannerify", then under the "Plugins" tab you'll see Bannerify pop-up. If you just go ahead and click on that result, you'll be able to run the Figma plugin by either clicking on this "Run" button here, or I would suggest clicking on this little "More options" icon and clicking "Save Figma plugin", and that's going to save it to your Figma plugins list for easy access later.

I've already gone ahead and done that, so I'm going to go back to my canvas, I'm just going to right-click anywhere, I'm going to go down to "Plugins" then I'm going to go down to "Saved Plugins" and then click on the "Bannerify" item, and that's just going to run the Figma plugin we just saved a second ago.

If you're new to the Figma plugin, the way that it works is it basically looks at your Figma page and it treats any Figma frame as a banner. If you've got a bunch of frames added, you can use those as your banners to load up. I'm just going to load up a few now, and it will automatically take the contents of each of those frames and load them up into a timeline in the Figma plugin that you can then animate and create banners with. For today, I'm just going to be assuming that you've already got that sorted; if you want a Figma tutorial about that, you can get more detail from our YouTube channel, there's a Figma tutorial video for designing the banners and animating them, so I'll leave that out of this Figma tutorial for today and just assume that you've already got your banners ready to export.

Today, we're just going to be focusing on exporting HTML banners, we're not going to be looking at the GIF or video option, we're just going to be exporting to HTML. For example, if we click on this "Export to HTML" button, you can see here that we've got our standard export settings; this is basically a bunch of export settings that you can use to customize how you want the banners to be exported to HTML. There's a bunch of different platforms you can export it to; Google Ads and different platforms like that, or just plain HTML and CSS. You can also add a bunch of other toggles and configurations up here as well, and also customizing the preview page, but for today we're going to be looking at a new feature which is this toggle down here.

If you click on the "Inject Custom Code" toggle and turn that on; I've just turned on that option down here, and what this does is it basically gives you a whole new panel that you can use to add custom content or custom code into the banners that you're going to be exporting from the Figma plugin. For example, if we go through the list of options here, we can add custom HTML to the body tag; we'd use that if we want to add custom content inside of each banner. We can also add custom HTML to the head tag; if you need to inject some special meta tags or some special script tags into the head tag of your HTML, you can add that into here. If you need to add any custom CSS styles to style the elements that you've added in your HTML content, you can add them in here. Finally, if you want to add some functionality some interactivity using Javascript, you can write Javascript in here and that will also automatically get added in.

I'm going to go through an example of how this can be useful for you; of course, this is infinitely applicable to anything you really want to do, but for today I'm just going to be using a few of these different options to create something that looks like this. I've got another HTML file that I've already created, and it's just got this little toggle button at the bottom which basically shows and hides some text. It's a really simple little toggle, I've got the code for it over here which we'll go through in a second; this was actually mostly written by ChatGPT, so if you want to use something like ChatGTP to create some of this functionality it can be very helpful for helping with that, and then you can kind of just tweak it to what you need, or if you have a developer, or if you're a developer, you would obviously be okay with writing this on your own as well.

To get started, what we're going to do is start porting some of this functionality over. The first thing we'll do is we'll add the custom HTML to the body tag, which is going to be our content that's going to get added to all of our banners. For example, we can see in the file that we've got here, the HTML file, if we go to our body tag, we can see that the content we're going to need is this button and this div. We're going to grab both of those elements and we're just going to copy those to the clipboard, jump back into the Figma plugin, and just paste those in. We can see here that we've just pasted in the button and we've pasted in the div; you can format those whoever you want, I'm just going to leave them pretty simple in this case, and of course you can customize this text as well; you can edit that directly in this little editor here. 

We've copied our HTML in, and the next thing we're going to do is copy in some CSS styles. I'm going to go to my CSS styles option and just change that, and if we jump back to our HTML file, what we're going to do is we're going to pull out these CSS styles that we've got added to the style tag in our page here, and we're going to bring those over to the Figma plugin and paste those in the same way. We've just pasted in that CSS, and finally we need some Javascript; we're going to go to the Javascript code option and we're going to grab any Javascript that we need. In this case, I've just got a function that we're going to copy; we're going to get the "toggle diff" function, copy that out of the file, paste that into this Javascript code box, and there we go you can see that we've got our Javascript in there as well. It's got some indentation; you can obviously customize that if you wanted to, but I'm just going to leave that for now, as I'm not going to be too worried about how it's formatted, I'm just going to render that out however it comes out. 

That's it; we've got our Javascript, we've got our CSS, and we've got our HTML content that's now going to be included into our banner exports. To show you what that looks like if we now click on the "Export Banners" button down here. I'm going to click on "Export Banners", and that's going to generate all of the HTML CSS and Javascript, along with any images for our banners, as it normally does. If we now download the zip file, I'm just going to save that to my desktop I'm just going to unzip that and open up the folder. We can see here that we've got a little preview page; we can open up that preview page in the browser, if we just drop that into here, we can see here that we've now got some custom HTML. We've got our little arrow button, obviously it's not 100 styled as well as it could be, but if we click on that now we can see that the little text field that we included is popping up; if we expand that out, it shows, and if we collapse it, it goes away. This is selectable text you can highlight, and these are all toggleable per banner. As I said, the design is obviously not great, this is just a very simple example of one thing you could do; you would obviously customize the button to look much better and position the elements to obviously not be overlapping with the toggle, but of course this is just one example of what you could do.

You could also just add static text; you wouldn't have to make it toggleable if you didn't want to, this is just an example to show you how the Javascript could work, but if you needed to add some legal disclaimer text as rich text, for example, you could design these banners in a way where there's some space down the bottom or it has like a nice background fade off at the bottom, and then you could add this custom HTML and CSS for all of the rich text directly into the custom HTML field in the Figma plugin, as we just saw.

That can be really handy, and as I mentioned this is basically as customizable as you want it to be. You could pretty much do anything you want; it's a free form HTML, CSS and Javascript field, so you could load in different file types, you could load in videos, you could load in anything really, and position it and style it however you want based on the functionality that you need. That's just a really basic example of one thing you could do using this new feature, but as I mentioned the possibilities are fairly endless; you can work with a developer, or as I said, potentially work with ChatGTP to create some functionality that you're looking for and then add it into your Bannerify custom code injection setting that's just been added.

Of course, if you did not want to have this code included, you can simply just toggle that off again, and if we re-explored those banners as we'll do now, just to show you what this looks like. If we now re-save that zip file and open that up; I'm just going to go back to my desktop unzip this new file, and if we load up this HTML file, you can see that the custom code's been totally removed, so there's no custom code in that one because we went in here and we turned off the "Inject Custom Code" option. If you turn that back on, all of your code that was included in the last export, whatever that was, will automatically be saved and you can just retrieve that here and use it again; you can just turn that on and off, basically to use it when you need it, and turn it off if you don't need it, but always come back to edit it if you did need to make any changes and reuse it later.

The only one I didn't go into is the custom HTML to head tag; as I mentioned, this is a fairly generic option. All this does is it basically adds custom HTML before the closing head tag; to give you an example of that, if we were to go into one of these banners and load that up in our editor, basically the head tag ends here. We can see down here we've got the closing head tag, so we'll just add that to a new line to see what that looks like, and basically anything inside of this head tag here is usually related to stuff like title tags, we've got meta tags that are automatically adding the viewport, automatically adding the ad size meta property which is required for various bannerad platforms, and we've got our CSS style tag in there as well.

What that setting does is it basically injects, just as we saw with the other options, this HTML head tag setting will basically take whatever you put into this box here; for example, if we were to add, we wouldn't do another title tag, but you could addsomething like a title tag or a custom meta tag. For example, you can add that in there, script tags, sometimes different banner platforms will want you to add different script tags; you can add script tags in there. Anything like that; whatever you put in here will essentially just be rendered just before this closing head tag here, and that's where that's going to go. It's not going to appear as content, it's purely just for linking assets or adding meta tags and things like that, anything that normally goes into the head tag of an HTML document, you can add in there.

Okay, I hope that's been a helpful starter of how you can potentially use this new custom code injection feature; this is going to make it really easy to add extra functionality, and add extra totally custom HTML, CSS and Javascript content into every banner that you export from the Figma plugin, if you require it. As I said, it's a optional feature, it's off by default; but if you're more of a power user or advanced user and you want to play around with adding custom code into your banner exports from Bannerify, this is going to be a really nice way of going about it. We'll leave it there for today; thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export HTML emails from Figma to Mailgun using Emailify
date: 2023-03-27T00:00:00.000Z
---

# How to export HTML emails from Figma to Mailgun using Emailify



#### Video Transcript

Today I'm going to be showing you how to automatically upload HTML emails from Figma into your Mailgun account using the Emailify Figma plugin. 

To get started all you need to do is go up to the "Resources" icon at the top of your Figma file here, click on that, and then search for the word "Emailify", and under the "Plugins" tab you'll see Emailify pop up. If you just go ahead and click on that result, you can either run the Figma plugin by clicking on this "Run" button here or I'd recommend clicking on this "More options" icon here and clicking "Save to Figma plugins" and that will automatically save the Figma plugin to your list for later.

I've already gone ahead and done that, so I'm going to go back to my Figma canvas, I'm going to right click anywhere, I'm going to go down to "Plugins" I'm going to go down to "Saved plugins", and then I'm just going to click on the Emailify Figma plugin and that's just going to run the Figma plugin we just saved a second ago. 

If you're new to the Figma plugin, the way it works is that the Figma plugin helps you design emails in Figma that can then be exported out to HTML to various platforms. For example, I've just got this really simple email that I generated using some of the components in the Figma plugin, so you can go ahead and add those and customize them; we've got another tutorial on our YouTube channel that goes into depth on how to actually do that, so I'd recommend checking that out, but I'm going to assume that you've already got your email designed using the Emailify Figma plugin and now you just want to upload it to your Mailgun account.

To upload the HTML email from Figma to Mailgun, all you need to do is click on the "Export HTML" button in the Figma plugin and then you'll notice here that it's currently set to "HTML Email", which is the default export, this will export it to a zip file on your computer, but today we obviously want to export it to Mailgun. We're going to click on this little select box and we're going to change it from "HTML Email" and scroll down to this "Platform Integrations" group and we're just going to scroll down to the letter "M" and find "Mailgun". 

I'm going to go ahead and click on the Mailgun select item and that's going to change the context down here to ask for two bits of information; it's going to want our domain name and our private API key from Mailgun. There's two links here that you can click if you're already logged into Mailgun, as I am over here, you can go ahead and click on these two links. We can click on the domain link and this will load up the page in Mailgun with your domain names, at the moment I've just got this sandbox domain set up, but you might have a different one; I'm just going to click on that and highlight the domain and I'm just going to copy that to my clipboard and go back to Figma and paste that into the domain input field here.

I'm going to paste that in, and then I'm going to also click on this private API key link and click on that and that's going to open up the window for the private API key in Mailgun. All you need to do is click on this little "eye" icon here to reveal the key, so I'm going to click on that now and I'm just going to copy my private API key, I'm going to copy that to my clipboard as well, and I'm just going to paste that into the key field inside of Emailify as well.

I've pasted that in and now you can see here that we've got the "Upload to Mailgun" button ready to go; I'm going to click on that now, I'm going to click on "Upload to Mailgun" and that's basically going to generate the HTML automatically, it's going to upload any images that are in the email and it's going to send those templates to Mailgun; it's telling us that we've got our Mailgun templates uploaded, so you can click on the Mailgun account link and then it says to go to the "Sending" menu link followed by the "Templates" link. If we look for that now, we can find that in the left hand column, we can see here we've got the "Sending" link here; click "Sending" and then once that's expanded we can see the "Templates" link as well. We can now go ahead and click on "Templates".

We've got our domain selected, you might have more domains that you've selected to upload to, but in this case I've just got this one; you can change it in here, and we can see here that the email we just uploaded from Emailify is now in here and we've got a little description letting us know that it is from Emailify. If we click into that, we can see here that it's an HTML email, I've got the template name with a timestamp, this template name needs to be unique, so that's why it has a timestamp built into it.

We can see down here that we've got some code snippets; we can see we've got Python, Java, Ruby, PHP, C#, Node; depending on your environment that you're going to be sending the email from, you can basically go ahead and copy this code and that will be ready to go to send that email to whoever you're going to be sending it to. With Mailgun, you're obviously going to be integrating this into some sort of application, so you've obviously got some sort of custom application flow; maybe you're sending a "thank you" email or sending a "welcome" email or something like that, that you've designed, and this code is now going to help you send out that HTML to whoever you want to send it to. You can see here we've got two address, you can obviously swap that out in your code you can change the subject line, but the important thing here is that the template is what's going to be sent out. If you were to run this code, you would basically get the template that we just uploaded, the HTML template, sent to that address with whatever subject you want provided that the template is matching, the one that we just uploaded. 

That's basically it; that's a really easy way of getting HTML templates from Figma directly into your Mailgun account automatically using the Mailgun API via the Emailify plugin. That's basically the example, so I'll leave it there for today, I just wanted to run through that with you really quickly, as this is a new integration with Mailgun in Emailify. I thought it'd be worth just recording a short video demonstrating how you can actually integrate your Mailgun account with Figma in that way.

I hope that's been helpful if you're a Mailgun user and a Figma user; this is going to be a really easy way to get your HTML emails out of Figma and into your Mailgun account without doing any copy and pasting or anything like that. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to import optimized SVG files to Figma with one click using Convertify
date: 2023-03-22T00:00:00.000Z
---

# How to import optimized SVG files to Figma with one click using Convertify



#### Video Transcript

Today I'm going to be showing you how to import pre-optimized SVGs into your Figma files using the Convertify Figma plugin.

To get started, all we need to do is go up to the "Resources" tab in your Figma file and if you search for the word "Convertify", under the "Plugins" tab you'll see Convertify pop-up. If you click on that, you'll be able to run the Figma plugin by either clicking on this "Run" button here or you can go to the "More options" icon, which I'd recommend, and click on the "Save to Figma plugins" item and that will just save it to your Figma plugins list for easy access later.

I've already gone ahead and done that, so I'm going to go to my canvas I'm just going to right-click anywhere, I'm going to go down to "Plugins", and I'm going to click on the "Saved Plugins" item, then click on "Convertify", and that's going to run the Figma plugin that we just saved a second ago. You'll notice here that the Figma plugin by default automatically sets itself to export Figma of Sketch, but if we open up this drop down, we'll see some different options here, and today we're going to be going down to the "Import to Figma" section and we're going to click on the "Import Optimized SVG to Figma" option; this is going to change the Figma plugin's context to accept SVG files.

Just to show you the difference between importing them normally and importing them through the Figma plugin, I'm just going to drop a couple of SVGs onto the Figma canvas. I've just got these two SVG files that I'll drop into Figma, and if we zoom in here you can see that these two SVGs are basically vector based SVGs; one is this bear vector and one is just this sort of flat illustration; if we open up the layers you can see here that we've basically got a bunch of vector layers, a bunch of groups, you can expand these out, and that's what the vectors and SVGs are made of. It's the same thing for this bear SVG, if we open up the bear SVG, you can see that we've got a bunch of groups, we've got a bunch of vector layers, and inside of the groups are even more vector layers; quite a lot of layers in there, and you can just keep going and see what that looks like.

That's just kind of a base reference of what we're working with here, what we're going to be doing now is importing these SVGs to Figma again, but we're going to be doing it through the Convertify Figma plugin. All you need to do to import an optimized SVG via the Figma plugin is to drag and drop the SVG file into the Figma plugin here, and that will automatically add an optimized SVG to your Figma page and it's going to add this little optimized flag at the end just so you can easily see the difference on your canvas. If we compare these two, you can see that this SVG is much simpler than the one that we imported a second ago; the first thing you'll notice is there's basically no grouping, so the groups have been removed and there are far less vector layers as well. 

The vector layers have kind of been simplified to reduce the number of them and merge them together when they are appropriate to do that, and we can see this in an even more striking difference when we import the bear SVG. I'm just going to drag and drop that SVG into the Figma plugin and that's going to import the optimized bear SVG as well. Visually, you can see these are identical, they look exactly the same, but if we open up the group here you can see that there's quite a lot less vector layers than the previous version. If we open up the original one that we imported, there's many more vector layers in here than we've got in our imported one here, and the reason for that is the Figma plugin is basically tidying up all of these vector paths, it's merging them, so you can see this is all of the vector layers in this in this particular SVG, whereas if we go into the original one you can see that there's many, many more vector layers, many more groups nested groups, nested layers, and in our other one for comparison, much more simplified much more optimized for Figma.

You can actually just work with these paths much more easily rather than having them all kind of split up into many, many more layers and nested groups; this is just a really easy way to pre-optimize your SVGs before they get added to Figma, this is going to help simplify the paths, it's going to simplify the vector shapes, and again, it's going to look the same but much more easy to work with when you're actually drilling down into these vector layers and needing to modify things. I just want to keep that really quick for today, just to show you how to pre-optimize your SVGs easily if you want to be adding simplified SVGs into Figma; of course, you can do it natively, but now you also have the option of importing them via Convertify if you want to pre-optimize and simplify those SVG paths.

I'll leave it there for today, and I hope that this Figma plugin is useful if you've been wondering how to import simplified optimized SVGs, feel free to give this a try with your team and I hope it helps with your workflow. That's going to be all for today; thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to import Adobe Illustrator files to Figma with one click using Convertify
date: 2023-03-17T00:00:00.000Z
---

# How to import Adobe Illustrator files to Figma with one click using Convertify



#### Video Transcript

Today I'm going to be showing you how to automatically import Adobe Illustrator (.ai) files directly into Figma using the Convertify Figma plugin.

The first thing to do to get started is if you go to the "Resources" icon at the top of your Figma file, click on that, and then search for "Convertify", and under the Figma "Plugins" tab, you'll see Convertify pop-up. To run it, all you need to do is either click on this "Run" button here, or I'd recommend clicking on this little "More options" icon and clicking on the "Save Figma plugin" item to automatically save that to your Figma plugins list for later.

I've already gone ahead and done that, so I'm going to right click on my Figma canvas, I'm going to go down to "Plugins" then I'm going to go down to "Saved Plugins", I'm just going to click on the "Convertify" item and that's just going to run the Figma plugin that we just saved a second ago. Once the Figma plugin runs, you'll notice that there's a little drop down box here, and by default it's set to "Export Figma to Sketch", but we're going to change that today; if we click on that and then scroll down to the "Import to Figma" group and then go ahead and click on the "Import Adobe Illustrator to Figma" item and that's going to change the context to automatically import Adobe Illustrator (.ai) files into Figma by dropping an .ai file into this little drop zone.

The first thing I'm going to show you is just with this setting turned off, which is actually the default; this setting is to import Adobe Illustrator artboards as vector layers. I'll show you what this looks like in a moment, but to get started I just wanted to show you what it looks like first by importing them as JPG layers or bitmap layers. I'm going to go to my folder on my desktop over here, I've just got a handful of Adobe Illustrator designs, so we're going to try and import each of these into Figma automatically and see what it looks like using the Figma plugin. The first one we can try out is just this little bear illustration, if I drag and drop this Adobe Illustrator (.ai) file into the Figma plugin, I'm just going to drop it into this little drop zone and that's basically going to automatically import that in for me as an image.

Remember, because we've got this little toggle turned off at the moment, this is actually getting imported as a bitmap. You can see here if I zoom in, we've got a bunch of pixels here; it's importing the Adobe Illustrator (.ai) file and it's doing it as a bitmap, but as we know Adobe Illustrator (.ai) files are vector, we lose some of that sharpness by having it as a bitmap. That's okay, what we can do is we can enable this BETA option which, is currently in BETA, but we can turn it on anyway and use it; we're going to check the "Import artboards as vector layers" option and we're going to drop that .ai file in one more time. I'm going to drop in the bear.ai file again, and if we drop it into the Figma plugin, this time you can see it's done it a bit differently; we've got instead of an image, we've actually got this group here. If we open up that group, we can see that these are actually vectors, so if I zoom in now, you'll notice there's a very big difference between the JPG and the SVG version. 

If we go back to the other page and zoom in, you can see that the detail around the face is obviously much more pixelated, whereas the one that we just imported as a vector is much sharper. We've got vector layers, which means we can actually edit these, so that means we can do things like change colors; if we wanted to change the color of this particular bear to be purple for some reason, we can do that, so we can do change him to a different color and this is all editable. We can actually edit the content inside of Figma now, we can remove this background if we want, I'll just find where that layer is that's the frame; we'll just hide the frame background and you can see there that we've basically got our vector from Adobe Illustrator.

I'll show you a few more files, we've got a couple of other ones to go through; there's another one which is just this flyer, again, if we show what that looks like just as a bitmap, drop that .ai file in and that's going to add it as a bitmap, then we can do it again as a vector to see what the difference is. I'm just going to drop that .ai file in, and once this finishes importing the vector; import will take a little bit longer than the the other one, that's just something to be mindful of, but it should import as well. If we zoom in, you can see that this is quite sharp, the only downside to importing vectors that contain text is that the text actually gets imported as vector shapes as well. 

Unfortunately, these aren't actually editable text blocks, these are basically individual vector items. You can see here every letter is basically its own vector shape, so if you did want to make this editable, you'd probably have to just go in and remove these layers and then add your own text layer on top of it. That's just something to flag if you're wondering why the text isn't actually a Figma text layer, the whole thing's just basically individual vectors, and because this feature is still in BETA, this is a bit unoptimized at the moment. I think in a future version it'll have less of these groups and things like, that but for now that's what it looks like.

We'll keep going through, we've got another one which is just this travel template, which is a bunch of templates for some sort of travel campaign. We can drop that in see what that looks like, and you can see here this is the vector version; it's quite sharp, and again, we can see what that looks like just as a JPG as well, drop that .ai file in, and that's just the JPG version as well. 

Finally, we've got this other animals illustration, so we can see what that looks like by dropping that .ai file in; again, it's just a JPG and we'll enable the vector option, and drop that .ai file in one more time, and there we go; let's zoom in, and it's much sharper as you can see. These are obviously editable as well, so this is mostly going to be better for things that don't require text, just because text is going to be broken down into those individual vector layers, but for things like illustrations or things where you've got mostly just paths rather than text layers or things like that, this option is going to be a lot better to use the vector import for.

That's basically what it looks like; as I said, this feature to convert Illustrator files into vector layers is still in BETA, but that should improve over time. As you can see, the quality of the import is actually quite good, and you can edit these shapes, edit all of these vector layers as you would expect, as if you were editing them in Adobe Illustrator. I just wanted to keep this Figma tutorial really quick for today, we don't have to go into too much more detail, and I think those four examples are enough to give you the idea of what the Figma plugin can do for importing Adobe Illustrator (.ai) files into your Figma file.

We'll leave it there for today, and I hope that's been helpful if you've been wondering how to get your Adobe Illustrator (.ai) files or vectors from Adobe Illustrator into Figma automatically this is probably going to be the quickest way to do it I know that you can also copy paste layers from Adobe Illustrator into Figma but that may have different results; yeah feel free to give this a try and hopefully it works with your Adobe Illustrator to Figma workflow; thank you as always for watching and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to add scrollable slides to Figma presentations using Pitchdeck
date: 2023-03-16T00:00:00.000Z
---

# How to add scrollable slides to Figma presentations using Pitchdeck



#### Video Transcript

Today I'm going to be showing you how to easily add scrollable mockups to any presentation from Figma using the Pitchdeck Figma plugin.

This can be really handy for presenting website mockups or just longer pages that aren't going to fit into the normal size of a monitor or a TV or whatever you're presenting the presentation on. To get started, all we need to do is install the Pitchdeck Figma plugin by going to the "Resources" icon at the top of your Figma file, searching for the word "Pitchdeck", and and under the "Plugins" tab you'll see Pitchdeck pop up. To run the Figma plugin, all you need to do is either click on this "Run" button here, or I'd recommend clicking on the "More options" button here and clicking on the "Save Figma plugin" link, which will automatically save it to your Figma plugins list for easy access later. 

I've already gone ahead and saved it to my Figma plugins, so I'm just going to go to my canvas now, I'm going to right-click anywhere, I'm going to go down to "Plugins" and then I'm just going to go down to "Saved Plugins", click on "Pitchdeck", and that's just going to run the Figma plugin that we just installed a moment ago. As you can see here, what the Figma plugin basically does, if you're new to it, is it takes any Figma frames that are on your current page, and it basically treats them as slides. For example, we've got a bunch of simple slides here each of them have a few different elements; we've got some text layers and some images and things like that and those each get treated as a different layer inside of each slide, but for today we're just going to be mainly focusing on how to add scrollable slides into your presentations using the Pitchdeck Figma plugin.

For example, this is an example of a normal sized frame, this is just a 1920 by 1080 frame, and as you can see it fits nicely into what would normally be a regular screen size, but for this presentation we actually want to present a few website mockups and those are much much longer. These are like, you know, 5,000 pixels long; in this case, what we can do is we can add these longer frames to our page and Pitchdeck will now automatically detect if they're scrollable. If we go through these frames, you can see here that because these ones are longer, it will automatically make them scrollable inside of our presentation. We can go through them in more detail rather than having them squished all the way into fitting into this frame, making them really short and narrow, this allows us to automatically scroll through those longer frames inside of our presentations that are exported from the Figma plugin.

I'll show you what that looks like now; all we need to do is go to the export panel up here, so we're just going to click on the "Export" button and make sure that the "Pitchdeck Presentation" option is selected. Please keep in mind that this isn't going to work for any PowerPoint exports, for example; PowerPoint files need to have all of the frames be the same size, but for our Pitchdeck presentation, which is going to be available in the browser, we can upload that and have these scrollable. I've already created this URL before, but if you haven't, there'll be a button that says "Upload Presentation", I'm going to click on "Update Presentation", I'm just going to click on that now, and this is going to upload the slides that we've added to Figma from the design. You can see here it's basically going through each of the frames uploading any images for each slide, and it's creating those as a URL that will be able to view in the browser.

It's just finished uploading those images, so I've got a couple of options here; I can either send a URL with a separate password, or I can copy this passwordless URL to automatically log in in the browser. I'm just going to do that quickly now, I've just clicked on the little "Copy" icon, I'm going to go to my browser, I'm going to go to the address bar and just paste that in, and once that loads you'll see here that we've got our slide that we loaded in from the Figma plugin. We've got all of our usual slides here which are all animated and fixed size as you'd expect, but the ones that we uploaded that are scrollable we can also select and now scroll within the browser, and we get a little notification here as well. 

We can scroll through this and present it to clients, or for clients looking at this link on their own, they can go through and take their time and scroll through the whole slide, and you don't have to worry about the content being squashed down to fit into the height of the slide, you can just slide through those and scroll down the content. We can see that for the other ones as well, we've got this other one; again, it lets you know briefly that it's scrollable just to avoid any confusion. This one's just a Museum website design that I got off the Figma Community, and finally we've got a third one here which is another website mockup also scrollable that we can now scroll through and check out as well. 

That's basically it; this is a new addition to Pitchdeck, it just came out this week. If you've been wondering how to automatically add scrollable slides, this is now an automatic option that gets added into the web presentations that you upload from the Figma plugin, and the thing that triggers it is basically if any slide is longer than it is wide, it will automatically create a scrollable selection. For example, the cutoff would basically be a square frame, so if you had a frame that's exactly square, like 1920 by 1920, in that case it would still just be fit into the the presentation slide, and it wouldn't scroll at all. As soon as you get taller, if it's 1920 by 2000, it will automatically convert that into a scrollable one and allow you to scroll through any of those extra bits of pixels at the bottom of the frame.

I just wanted to keep it really quick for today, and show you this new feature in case you've been wondering how to add scrollable website mockups or scrollable pages into your Pitchdeck presentation, this is a really quick way of going about it, and hopefully it gives you a little bit more flexibility with the types of content that you can present when you're using the Figma plugin and the web app to present things to clients and stakeholders. We'll leave it there for today; thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to import PDF files to Figma with one click using Convertify
date: 2023-03-15T00:00:00.000Z
---

# How to import PDF files to Figma with one click using Convertify



#### Video Transcript

Today I'm going to be showing you how to automatically import PDF files directly into Figma using the Convertify Figma plugin.

To get started, we just need to go to the "Resources" icon at the top of your Figma file, and if you click on that and search for "Convertify", under the "Plugins" tab you'll see Convertify pop-up. If you just go ahead and click on that, you can run the Figma plugin by either clicking on this "Run" button here or I would suggest clicking on this little "More options" icon and adding it to your Saved Plugins. I've already clicked on that; I've got it in my Saved Plugins, which I can access by right clicking anywhere going down to "Plugins", going down to "Saved Plugins" and then clicking on the "Convertify" item, and that's just going to run the Figma plugin we just set up a second ago.

When we open up the Figma plugin, by default it will be set to "Export Figma to Sketch" but you want to change this in this case to import PDF files, so you can just click on that drop down, go down to the "Import to Figma" section and then just click on the "Import PDF to Figma" item and that'll just change the context of the Figma plugin to accept PDF files that you can drag and drop from your computer. By default, it's going to import these as bitmaps or JPG images, we also have the option to import the pages as vector layers, but this feature is currently in BETA; I'll show you what that looks like in a moment, and we can compare the two. I've just got a few different PDF files here, I've just got three that I'm going to try importing from PDF to Figma today. The first one I'm going to import is just this really simple portfolio PDF; I'm going to drag and drop that into the import PDF drop box in the Convertify Figma plugin, if I drag and drop that, that's basically going to import the pages from our PDF directly into Figma as images. We can see here that if I zoom in, we've got some pixelation because they're just normal images instead of vectors, but this is basically the most visually accurate way to import your PDF pages into Figma; they'll just get imported as images rather than vectors or editable layers.

The other alternative, as I mentioned, is we can check this toggle here to import the pages as vector layers; if I re-import the same file, so I'm just going to drag and drop that PDF into Figma, let go, and that's now going to import the PDF pages into Figma as vectors. When we zoom in this time we'll be able to see that the vector shapes are obviously much sharper, we don't have that same pixelation that we saw a second ago; we can basically zoom in and all this will be very sharp. The only downside to this is that the accuracy may not be as good, as I said, it's still in BETA, but the other thing is if you're using text layers in your design or in the PDF file these basically just get imported as vectors. As you can see here, this is a vector path of that text; unfortunately this isn't actually editable text; in terms of if you're in Figma and you create a text layer you can obviously edit this text in a text box but because we're importing these PDFs as vectors basically the text layers get imported as paths. You can edit these, you can move them around, you can change the colors, all that sort of stuff, but you just can't edit it. We can obviously layer in text layers into the design, so we could overlay text layers and remove text layers and things like that, but it's just worth noting that this is not going to be native Figma text, so that's just something to be mindful of.

The other thing we can do is we can import designs that maybe don't have any text at all; for example, we've got some illustrations here that are in PDF, so we can go ahead and import those into Figma just by dragging and dropping that PDF file into Figma as well. Again, I'm going to do the JPG version first just to show you what that looks like, this option is always a bit quicker, and as I mentioned, always gets a bit more visual accuracy because we are just importing them as JPG rather than vectors, but once again we can import these with the vector layers turned on. I'll re-import that file, drag and drop the PDF into Figma, and that will automatically import the PDF file as vector layers into your Figma canvas. As I mentioned, and as you can see here, it's always going to be a bit slower to import the vector option rather than the JPG one, but once that finishes we should see these in our Figma file. As you can see, as I mentioned, there's some cases where it's going to be a bit buggy and you're not going to be able to see some of the imported stuff, this might be just due to some clipping masks. We've got some clipping in here which is probably going to be hiding some of that content; you can probably edit this manually to get the actual content out; there's going to be some content in there, as you can see in this case, it was just an image that was being masked. You can usually get the content out, but sometimes the clipping's a bit off, but obviously this will be fixed up in future versions of Convertify as well. As I mentioned, it's currently just in BETA, but you can see here that we've got vector layers; these are looking much sharper than the JPG one that we had before. That's another option you can use if you wanted to import those PDFs into Figma.

The last file I'll import is just a portfolio PDF; again, I'm going to do this as JPG first just to show you what that looks like, so I'm going to drop that PDF into Figma, this is going to be importing five pages. You can see here it's imported those five pages from our PDF; we've got a few different portfolio pages, different lengths, and that just instantly imported them into Figma. These are again just images, so we can show and hide those, we can move them around as images, obviously. If we change the background, you can see where those are coming in, but as I mentioned these are just images; they're not editable as far as any content goes. Once again, we'll try it with the vector layers turned on, so I'm just going to drag and drop that PDF into Figma again, and this time it's going to import it with all of that content as vector instead of just a flat image based import. That's just inserting the PDF pages now, and we can see here again I'll just change the background; we can see what's actually being imported and if I zoom in we can see here that this is all vector based content. We've got our vector-based text layers here, so you can see here these are much sharper than before.

As I mentioned, the only downside is that you've basically got the text exported as paths. This is not editable text as far as text layers goes, these are just vector paths, so it's going to be visually accurate. The reason why this usually happens in PDFs is the text basically gets outlined as vectors, and that's to avoid any issues with fonts that may not be included on the computer of the user viewing the PDF, it's trying to increase the visual accuracy of the document without relying on fonts. That's usually why PDFs are more geared towards this kind of text content, but as I said, there's going to be a couple of issues with things like clipping occasionally, so you may have to jump in there and extract some of those layers. You can see here that the rectangle is basically being hidden, so we can bring that out and you might have to sort of manually clip that as well, which you can do by changing this to fill and then you can do things like resize that to clip it again. As I said, there might be a little bit of manual updates that will be required for some of these layers in the meantime, but this is going to get you a pretty good import of PDFs in both either bitmap or vector based quality. As I mentioned, you're probably not going to be wanting to use these if you need to edit the actual text, this is more so if you need to get some content from a PDF directly into Figma automatically, that you can then use for some purpose that may not require actually editing the text, but more so just getting a vector copy of the design from your PDFs into Figma, this is going to be a really quick way of going about it.

I'll leave it there for today, I just wanted to show you a few examples of how you can import PDF files into Figma either as flat images or vector-based layers, as we just saw in this example. I hope that's helpful if you've been wondering how to import content from PDF files into Figma without going through other kind of hacky workarounds like opening up in a different tool and copying pasting the layers out and things like that can only be a little bit tricky, but I hope this has been helpful if you've been wanting to automate this process, feel free to give Convertify a try and hopefully you can import your own PDFs into Figma in a way that's going to be helpful. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to embed Figma Prototypes in Figma presentations using Pitchdeck
date: 2023-03-06T00:00:00.000Z
---

# How to embed Figma Prototypes in Figma presentations using Pitchdeck



#### Video Transcript

Today I'm going to be showing you how to embed a live Figma prototype into any element of your slides in a Figma presentation using the Pitchdeck Figma plugin.

To get started all we need to do is open up a Figma file, click on the little "Resources" icon at the top here, and if you search for the word "Pitchdeck", you'll see Pitchdeck pop up. All you need to do is click on the Pitchdeck result, and then you can run the Figma plugin by either clicking on this "Run" button here or you can click on the little "More options" icon and click on "Save Figma plugin" and that'll just make it easier to access it later. I've already saved it to my Figma plugins list, so to run the Figma plugin I'm just going to go to my Figma canvas, right click, go down to "Plugins" go down to "Saved Plugins", click on the "Pitchdeck" item, and that's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is it basically treats any frames on your page as a slide. I've got a bunch of different slides here and in each of those frames I've just got a bunch of text layers and content layers, and those will get treated as individual layers in your slides that you can add things like animations and links and inputs to; for today's Figma tutorial, I'm going to be focusing on how to embed a live Figma prototype. To do that, all I've done is just set up a brand new frame called "prototype Embed" (you can call it whatever you want), and inside of that frame I've just got one layer, it's just a rectangle layer called "Embed", and this is basically just going to be a placeholder layer for where we want our Figma prototype embed to go.

In this case I'm going to be embedding a different Figma file; I've got this other landing page design that I grabbed from the Figma Community and I'm going to be embedding this as a live Figma prototype in our Pitchdeck presentation. The first thing I'm going to do is just change the Figma prototype background and I'm going to change it to the same color as my presentation slides. In this case it's going to have a white background, so what I want to do is in my design or the embed that I want to include I'm just going to click on the "Prototype" tab here, then I'm going to go down to the "Background" option and I'm going to change that to white. You can just change that to whatever background color you want; in this case I'm just going to leave it to white, which matches the slide background as you can see here, the outer background border that I've got set is white, so I'm going to set the prototype background to white as well.  

Then, to get the Figma prototype link all you need to do is click on the little play button here to go into present mode and this is going to load up the Figma prototype window; what we want to do is we want to click on the "Share Prototype" button, and then we want to make sure that the settings are set to "Anyone with the link", so "Anyone with the link" is selected instead of "Only people invited". I've got "Anyone with the link" and then "Can view"; I want to set that to "Can view" instead of "Can edit", as it doesn't need to have an edit permission, just "Can view". Once those two options are set, you can click on the "Copy link" icon here; click on "Copy link", that's going to copy it to our clipboard, and then we're basically ready to go.

Now I'm going to go back to my presentation design, I'm going to go to my "Prototype Embed" slide and instead of applying an animation, I'm going to go to the "Embeds" tab; I'm going to click on "Embeds" here, and that's going to give us a text area to paste an embed link. In this case I'm going to be pasting it onto this rectangle layer embed layer here that we set up, I'm going to click on the input field and paste that Figma prototype Link in that we just copied from the Figma file, and you can see here it instantly loads up the Figma prototype. We can scroll through this, we can interact with it if it has any interactivity, we can do that as we'd expect, but for today I'm just going to be mainly using it as a way to present a live Figma file inside of our presentation.

Now that we've got that set up, I'll just mention that you can use this on any layer; if you did want to apply it to a different slide you could apply it to, for example, this little rectangle layer. We've got our little image layer, you could paste it in there, and that would replace that layer with the Figma prototype as well. Obviously, that's going to be a bit smaller and it's got this overlay on it, so maybe this isn't the best slide for it, but I just wanted to show you that you can basically embed different things onto different layers in any slide, and that will work as expected; I'm just going to remove that.

Now that we've got our embed set up, all I'm going to do is now export this so we can actually present it in the browser. What we need to do is click on the "Export" button in the Figma plugin; I'm going to click "Export" make sure the format is set to "Pitchdeck Presentation (Web URL)"; I've got that selected, and then all I need to do is click on "Update Web Presentation" or "Upload Web Presentation" if you've not already uploaded one yet. I'm going to click on "Update Web Presentation", this is basically just going to quickly upload all of the images and slide data and we're going to get this message here that lets us know the presentation is ready to go. 

You can either send this to your end user or customer as a separate password and URL, but in this case I'm just going to make it quick and copy the "Passwordless URL", which will automatically log into the presentation for me. I've copied that to my clipboard just by clicking this little "Copy" icon, and if I go to my browser and paste that in; I'm just going to hit "Paste" and then "Enter", and this is going to load up the presentation that we just uploaded from Figma. We can jump around here, we can load up our different slides that we created, we've got all of our animations and things like that, but of course we want to actually check out slide two in this case. I'm going to click on slide two, and this is going to now load up the live Figma prototype that we just embedded using the Figma plugin.

You can see here this is the live Figma prototype added exactly where we wanted; you can see we've got our outer kind of padding that we kept on the slide to make sure that we've got a bit of a buffer, we've set the background to the prototype as white as well which means we can basically now scale this up and down, and we can scale it without having any issues with background colors or anything coming through from the Figma prototype. That's really nice if you want to make it bigger or smaller or go full screen, the prototype is going to scale up and down with that as well. 

That's basically what it looks like there, and I don't think this really has any interactivity, but this is a live Figma designl, so what we can do is if we go to our Figma landing page in the design, and we want it to change some of this content. For example, if we just jump in here and change this to; I'll just quickly change the font, so we'll just make this "Arial" for now and replace that; we can basically change this content here to be 
"Presentation Live Updates" here, and if we go back to our presentation you can see here that it's basically updating in real time. If I just move that over a little bit for you to see, we can see here that this is basically going to change in real time; this is 100 live from Figma embedded in your presentation. You can basically make changes to that presentation even after the link has been shared or while the presentation is happening; maybe you want to present something and make changes in Figma while you're presenting, that could be a interesting use case as well for showing off work to clients that's in progress.

That's basically it, I just wanted to show you the basics of how to embed a live Figma prototype into your presentations that are viewed in the Pitchdeck web application; this is a really easy way of going about it and it gives you a lot more flexibility to enhance what kind of content you can show in a presentation that you're sharing with clients or teammates or stakeholders as well. Let's leave it there for today, I hope that's been interesting for you if you've been wondering how to include live Figma prototypes inside your presentations this is a really, really easy way to go, especially if you're already using the Pitchdeck Figma plugin, this is just a new embed that's been added. 

If you want to see what other embeds are available, you can click on this little "Supported Embeds" link in the Figma plugin, and that's just going to open up a link to the documentation and give you a whole list of examples of other services that are supported to embed into your slides as well. As I said, you can kind of jump in here and this will load up a bunch of different examples; we can see we've got Figma designs, Figma prototypes, Loom, Lottie files, Google Docs, GIFs, MP4s, SoundCloud; all these different platforms you can embed directly into the Figma plugin for your presentations.

Let's leave it there; thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to sync a folder of images to Figma layers with a spreadsheet using CopyDoc
date: 2023-02-06T00:00:00.000Z
---

# How to sync a folder of images to Figma layers with a spreadsheet using CopyDoc



#### Video Transcript

Today I'm going to be showing you how to easily import a bunch of image files from your computer directly into your repeatable Figma layers in your design in Figma, along with any text content that you also want to add.

We're going to be able to do this without having to first upload those images to a server somewhere, and you'll be able to import those image files directly from your computer using the CopyDoc Figma plugin. To get started we just need to install the Figma plugin by going to the "Resources" icon at the top of your Figma file, if you click on that and then search for "CopyDoc", under the "Plugins" tab you'll see CopyDoc pop-up, and all you need to do to run it is either click on this "Run" button here or you can click on this little "More options" icon and just hit "Save plugin" and that will save it to your Figma plugins list for easy access later. I've already gone ahead and done that; I'm going to right click on my canvas, I'm just going to go down to "Plugins", then I'm going to go down to "Saved "Plugins", click on the "CopyDoc" option and that should just open up the Figma plugin we just saved a second ago.

To get started, all we need to do is first make sure that we've got our component or our rows in our Figma file that we want to sync content to. In this case, I've got this little movie card and this is going to correspond to a spreadsheet that I've got set up in Excel. You can see here I've got three columns, I've got an "#Image" column, I've got a "#Title" column and a "#Genre" column; and you can see on the first row of the file these are my headings or my row label for those different content pieces, and these correspond with my Figma file. If we go to our Figma file we've got this little simple component and you can see here that we've got three layers: we've got an "#Image", layer, a "#Title" layer and a "#Genre" layer; these two are text layers and this one is just a rectangle layer. You'll notice that the layer names are identical to the names of our header in the spreadsheet file, and this is important, because it's going to tell the Figma plugin which bits of content we want to sync to what layer. In this case you can see that the image layer is matching up with this column, our title layer is matching up with this text layer, and the genre column is matching up with this text layer here. 

In this case, I'm going to be syncing up these bits of content with these designs here, and let's just add one more so I can show you how I got that image Link in there as well. I'm just going to copy this layer here, and it's kept our name, so we've got the same layer names in our instance here, and what I'm going to do is add one more movie to sync up in this file. What I'm going to do is I'm going to go to Google, I'm going to go to Google Images, and I'm going to search for another movie; let's do "The Menu" movie and we'll just search for the poster. You can click on any of these results, and what you want to do is basically find the image that you want to use, and in this case we're going to save it to our computer; we're going to right click on the image, we're going to click on 
"Save image as" and then we're just going to save it to a folder that we've got our images in. You can name the image if that's easier, so we can do "the-menu-poster.jpg", and I've just saved that to my images folder that I've got set up on my desktop, and you can see here that we've just saved it as this image here. If we open that up, you can see that's now on our computer.

What we want to do is we want to take that image name and we want to copy it into our spreadsheet. I'm going to copy it under my "#Image" row and just paste it into the fifth row there, and then I'm going to give the title a name; I'm going to give it a name of "The Menu" and then I'm just going to categorize it as a "Comedy". That's basically now pointing to this image file that we've saved in our "images" folder here. You'll notice that the spreadsheet file is saved here, so we've got our "movies.xlsx" spreadsheet file and then I've created a second folder next to it called "images", and I've put all of the images that I'm referencing in my spreadsheet into that folder now. You don't have to put them into a subfolder, you can just have them sitting alongside the spreadsheet, but just to keep things easier and neater if you just organize them into a folder, that's going to be easier to manage.

Now that we've got our "images" folder and we've got our spreadsheet completed, what we're going to do is we're now going to create a zip file containing all of these files. What we need to do is select our "images" folder and our "movies.xlsx" spreadsheet file, and then you just want to right click on both of those files and click on "Compress"; that's going to create a new zip file, and inside of that zip file contains the spreadsheet and this folder full of images. You can call that zip file whatever you want, it's just called "Archive.zip" in this case, but it doesn't really matter what you call the zip file.

Now what we can do is we can go back into Figma, and we're going to click on this little button here called "Sync Content"; next to the sync spreadsheet content option, just click on "Sync Content" and that's going to bring up this little pop-up window in the Figma plugin here. It's going to tell you to either drag and drop an Excel (.xlsx) file or a CSV (.csv) file, or a zip file containing either a CSV (.csv) file or an Excel (.xlsx) file along with any images that you might reference in that spreadsheet. In this case we can drop in the zip file that we just created, so I'm going to drag and drop that "Archive.zip" file from our folder and I'm going to drag and drop that directly into this little drop zone in the CopyDoc Figma plugin. You can see here it's automatically opened up the zip file in our Figma plugin and it's got a preview of the spreadsheet columns that we've used. You can see that we've got our image, title, and genre; and you can see down here that if we select the Figma layers we want to sync, I'm just selecting the top level Figma layers here that we want to sync, and what that's going to do is it's going to repeat through those four different Figma layers. 

You can see here it's got four layers selected, and it's going to sync the content once we click this button. You can choose the order that you sync it, and this will change the order based on different properties in your Figma layer names or position; in this case, I'm just going to keep it really simple and go "Top to bottom" as far as the rows go, and then all you need to do is click on the "Sync Rows" button; I'm going to click on that now and you can see it's updated content for 12 different Figma layers. 

Just to go over what that's done, is has basically gone through each of these spreadsheet rows, it's gone through two, three, four and five, using the first row as the label. It's basically looking for any Figma layer names that match this spreadsheet heading label, and as we had a look at before this "#Title" layer has been replaced with the content from this cell here, and then we've got "Comedy" which is being swapped into the "#Genre" layer, and importantly we've got our image which we've labeled as "#Image" and that's now using the image name, and that image name matches the image file that we included in our zip file, and that's how it was able to read those images and automatically paste them or create them in these different Figma layers that we had.

That's what that looks like there; the other cool thing you can do if you don't want to sync a bunch of existing Figma layers is, the alternate thing you can do is also generate a table with the data that you've already uploaded. If you instead wanted to create a brand new table for example, you can do that by clicking on this "Generate Table" button and that will also just generate a Figma table for you as well. That's just a new separate Figma layer you can modify that however you want, and it basically just takes whatever layout you've got in your spreadsheet here and it automatically pops it into here in Figma. For example, you can see here we've got our image row, and if you need to change the dimensions of that you can just change the component level one up here; we've got our "Header" component, and then these are just rows which are instances as well. You can actually just go ahead and hide that row if you want as well.

That's basically it, I just wanted to give you a really stripped down simple example of how to sync image layers directly from your computer into Figma layers, and this is really handy if you don't want to go through the trouble of uploading your images somewhere first; if you've watched a previous Figma tutorial, you know that you can also include URL image links. If you wanted to paste in an image URL of an image that's already online somewhere, you can definitely do that; you can actually paste in that whole URL, so instead of saving the image, you could just copy the URL of that image, paste that in here and that would automatically download the image through the Figma plugin. In this case, we're just using local images that we've already got, so this is going to be much faster, as it doesn't have to download all the image content each time; you've already got it in your zip file, and it also just makes it easier taking out that middle middle step of uploading your images somewhere else first.

I think we'll leave it there for today; I hope that's been helpful if you've been wondering how to sync local images really easily with your content in Figma, then using this CopyDoc Figma plugin is going to be a really easy way to do it. Feel free to have a go yourself and I hope it works out for you or your team if you are automating your content process using local images like this. As always, thank you for watching and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to remove black borders from links in Figma PDF exports using TinyImage
date: 2023-01-30T00:00:00.000Z
---

# How to remove black borders from links in Figma PDF exports using TinyImage



#### Video Transcript

Today I'm going to be showing you a quick tutorial on how to get rid of these black border outlines around your links in PDF exports from Figma.

We're going to be doing this by using the TinyImage Figma plugin, and I'll show you how to do that now; if you go to your Figma file that you want to export the PDF from and go to the top icon bar here and just click on the "Resources" icon and then search for "TinyImage", and under the "Plugins" tab you'll see TinyImage pop up. Just go ahead and click on that result, and then you can run the Figma plugin by either clicking on the "Run" button here or you can save it to your Figma plugins list for later by clicking on the "More options" icon and then clicking on the "Save Figma plugin" icon here. I've already saved it to my list, so I'm going to go to my Figma canvas, I'm going to right click, I'm going to go down to "Plugins", then I'm going to go down to "Saved plugins" and click on "TinyImage"; and that's just going to load up the Figma plugin that we just saved a second ago.

In this example I've just got a few different frames here, and this frame in particular as we saw in the Figma PDF native export over here that I exported natively from Figma, it includes this black line around the links. I've got a link here, and I've got a link here on my text, and I basically want to get rid of that link border from my export. The way you can do that in the TinyImage Figma plugin is just by clicking on the "Create PDF" button in the top header. if you click on that it'll give you a list of all the frames in your current page, and you can deselect those or select them as you need to and sort them by whatever order you want; you can manually sort them or just sort them visually by where they appear on the canvas. 

I'm going to leave all that alone for today, and the setting that you want to make sure is turned off in this case is the "Outline Links" toggle. If you turn on that setting in the Figma plugin, it's going to automatically include those default black borders that Figma includes. By default, this setting is turned off, which means that it's not going to include those black border Lines around your links in the PDF exports, but if you do want to keep them on for whatever reason, you can do that by enabling the "Outline Links" option, but again for today I'm just going to be turning that setting off.

Now I'm just going to click on the "Export PDF" button to export a compressed PDF with those borders removed. I'm just going to save that to my desktop, and now if I open up the new PDF that we just exported and go to that slide, you can see here that the links are still intact, so it's going to Google for these two links, but as you can see the links are actually clean; they don't have that black border around them as you can see in the default Figma PDF export. I've just switched back to that one you can see here that the links automatically get that black one pixel black border outline box around the PDF links, and in the TinyImage export with the "Outline Link" setting turned off, you can see that the links are still there, but they're not getting that black border box outline added onto them. The design matches what you've actually got in Figma with the underline, but not with that border box outline that you didn't add in the Figma file. 

If you want to try that out, you can try it out now; I'm just going to show you another example if you're interested on how to export single frames into individual PDFs as well. If you want to know how to do that, I'll quickly go through that now, otherwise feel free to stop watching now; but I'm just going to go through that for you now so you can see what that looks like as well, and show you where the setting is for individual PDF exports, too. What I mean by that is the option we just used a second ago to create a single PDF basically merges a bunch of frames into one PDF file, but let's say you wanted to actually export these frames into individual PDF files, so you can do that as well. The way you do that is just by selecting the frames that you want to export into individual PDF files, I'm just going to select all of them in this case, and then in the right hand side column just click on the "plus" button next to the "Export" label; click on that, and then by default it's going to select "PNG", we're going to click on that "PNG" option and change it to "PDF". 

I'm going to click on "PDF" now and you can see when I click on any of these frames we've now got the PDF export setting added; now all we need to do is refresh the exportable layers in the TinyImage Figma plugin. You can do that by clicking this button down here, or clicking on this little "Refresh" icon here, and that's just going to load up the new export settings for each of those layers. Now we can see in our default TinyImage view that we've got all of these PDF settings and those are on each of our frames. We can select which frames we want to export, so I'm just going to export the first few, and what we need to do is again go to the general "Settings" icon; I'm just going to click on the settings icon up here in the Figma plugin, and again, we're just going to make sure that the "Outline Link" setting is turned off, which it is by default, but if you've turned that on before, just turn that off if you don't want to include those. That's all you need to do; we've got that turned off, I'm going to click out of that, and this time I'm not going to click on the "Create PDF" button, I'm just going to click on the regular "Export" button and what that's going to do is go through the four different PDF exports that we just specified, and instead of combining the frames into one PDF file, it's going to export that into a zip. 

You can unzip the file, open up the folder, go to your PDFs, and now you can see we've got four different PDF files here. I can now open up that individual file, and again, we can see that the link has got the border removed; it's just the plain link which still links out, but it doesn't have that one pixel solid black border outline around the links that Figma usually exports with default PDF exports natively. Of course, we can open up any of these frames as single PDF files and that's what that looks like there. You've really got two options there; you can export the frames as individual PDFs, or you can use the "Create PDF" button to merge a bunch of frames into one PDF file, but the common thread amongst all of these exports is just to make sure that the "Outline Links" toggle in the TinyImage settings for PDFs is turned off if you don't want to include that PDF border box link outline that Figma adds in automatically. 

As long as you've got "Outline Links" turned off, the one pixel black border box outline that normally gets included around your PDF links from Figma will be removed; and again, if you did want to include that for any reason at all, you can just enable that setting again and that will export it the same way that it normally does with the default Figma exports. That's going to be all for today, I really just wanted to cover that one thing because I know that some of you out there have been asking for a way to remove those default borders that come with the PDF exports from Figma natively; this is now going to do that for you automatically by default, as long as that toggle is off, which it is by default. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export PNGs with custom color space profiles from Figma using TinyImage
date: 2023-01-17T00:00:00.000Z
---

# How to export PNGs with custom color space profiles from Figma using TinyImage



#### Video Transcript

Today I'm going to be showing you how to export PNG images from Figma with an embedded custom ICC color space profile, which is going to allow you to export your images in a certain color space; for example, P3, CMYK or RGB.

We'll get started now, and all I'm going to do is go up to the "Resources" icon in the top of my Figma header, I'm going to click on that and search for the word "TinyImage", and under the "Plugins" tab you'll see the TinyImage Figma plugin pop up. All you need to do to run it is either click on this "Run" button here, or if you want to save it to your Figma plugins list for later, you can click on this little "More options" icon and click on "Save plugin", and that'll save it to your Figma plugins list for later.

I've already gone ahead and done that, so I'm going to right click on my Figma canvas, I'm going to go down to "Plugins", I'm just going to go down to "Saved Plugins" and under "Saved Plugins" you'll see the TinyImage menu item pop-up. I'm just going to click on that, and that's going to run the Figma plugin we just installed a second ago.

You'll notice here that we don't have any export settings on any of our Figma images at the moment, so the first thing you'll need to do is just make sure that the images you want to export to PNG with a custom color space profile already have the "PNG" settings you need on them in the Figma export settings. To do that, you just select the Figma layers you want to export, and then go over to the right hand side here, click on the little "Export" plus button and then you'll be able to change your options here. 

By default, it's already on PNG, and you can change the resolution of that, you can make it 2x, but I'm just going to leave it at 1x for now; and if you need to add more resolutions, you can also add them as extra layers or extra export settings as well. I'm just going to keep it really simple for today and leave it as "PNG" at "1x" just for these two images. Now that we've updated that, we just click on the "Refresh" button in TinyImage, and that's just going to load up the export settings that we just specified in Figma a second ago. 
 
 By default, this is going to export your PNGs in the normal Figma default color space, which is basically un-managed; you'll just get a regular export if you go ahead and export that now, but if you want to change the color space profile settings for your PNG exports, just click on the little "Settings" icon in TinyImage, and you'll notice down here there's an option called "PNG Color Profile". As I mentioned, it's set to Figma by default, but we can click on that select box and change it to any of these different options; we've got some different categories, we've got "Display P3", we've got "Adobe Compatible Color Spaces", "CMYK", "sRGB" and things like that. 
 
 If we wanted to change this to be "P3", we can do that just by clicking on any of these items here, you can either check the one with maximum compatibility or maximum correctness, I'm just going to go for compatibility at the moment and select that. Then you've also got a toggle over here; by default, this toggle is set to use ICC version 4, but if you uncheck that, it's going to use ICC version 2. Version 4 is mostly supported and probably best to use, but if you do need Version 2, you can just uncheck that and that will use Version 2 instead. I'm going to leave that on Version 4, and that's all you need to do; you just can close off this settings panel now, so I'm going to click "Close".
 
All we need to do now is click on "Export"; I'm going to click this "Export" button, and that is going to set our PNGs with that ICC profile included in the Figma PNG exports. If we save that now, I'm just going to close off the Figma plugin and also re-export these just as regular Figma layers just so we can compare them. I'm going to export those two layers to the desktop, and I'm just going to name these; we've got "Kyoto Figma" and "Shop Figma", and now if we open up our zip file, and I'm just going to drag those two files in there and open up the folder; we can now compare these two different color space profiles by opening up the preview.

I'm just going to open up the Figma one first, and I'll just move that over here, and then if we go down to the "Shop" one you can see, it depends on where you're looking, but for example, if you notice down here where we've got these crates in front of the doorway; if you keep an eye on that you can see here, this is the Figma version and now I'm going to go down to the color managed version. You can see that the red is quite different, the color space is quite different there, you can notice that also on this pole over here if you see this one's quite dull, and this one has a lot a lot of a different color space. The same thing up here, there's all different parts of the image that have basically been modified to that color space.

We can do the same thing if we open up the "Kyoto Figma" one, we've got this one which was exported from Figma normally, and then if we go down, you can see that there's quite a difference between the two color space profiles. We've got this one from Figma, that's the standard one, and then we've got the "P3" color space profile, which again you can tell the difference in all of these reds, it's quite striking when you compare them. That's Figma, that's the P3, and you can see this one's quite different in terms of color space.

That's a really quick example of how you can do this, as I mentioned, there's a bunch of different other color space options that you might want to explore; it all depends on what your use case is, where you're going to be actually using that PNG, and you'll know if you need a color space setting or an ICC profile based on your use case. You'll probably get that as a specification from whoever's requiring that file, and you can just find that ICC profile in your TinyImage settings and Export the PNG with that ICC color space profile embedded really easily, just as we've looked at today.

I'll leave it there, I just want to keep it really simple and show you how to customize your PNG ICC color space profiles in Figma; this is a really quick way of going about it. I hope you find it useful if you or your team has been wondering how to use color space profiles in your image exports from Figma, so thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to compare websites behind a login with Figma designs using Pixelay
date: 2023-01-04T00:00:00.000Z
---

# How to compare websites behind a login with Figma designs using Pixelay



#### Video Transcript

Today I'm going to be showing you how to really easily visually compare your designs that you've created in Figma against a real website that requires authentication or is sitting behind a login screen, you'll be able to visually compare the accuracy of your designs versus the implementation of that design in code.

To get started, all we need to do is click on the little "Resources" icon in the header of your Figma toolbar and just search for the word "Pixelay", and under the "Plugins" tab you'll see the Pixelay Figma plugin pop up. To run the Figma plugin, all you need to do is either click on this "Run" button here or you can click on this three dots "More options" icon, click on "Save" and that'll save it to your Figma plugins list to use it again later. I've already saved it to my Figma plugins list, so to run the Figma plugin, we can just go to our Figma canvas, right click anywhere, go down to "Plugins", go down to "Saved Plugins" and then click on the "Pixelay" item, and that's just going to run the Pixelay Figma plugin that we set up a moment ago.

Once you've got that set up, you'll see here that the first thing that loads is all of the artboards that you've got on your canvas. Artboards are really just the parent frames; any Figma frames that you've got directly on the page will be treated as screens or artboards in the Pixelay options here, and what you can do is basically go through and select the frames that you want to add to your comparison. In this case, I'm just going to add all of the frames, you might only want to add a couple depending on your use case, and once you've selected the frames that you want to compare what you need to do is put in the URLs or the website links for each of these comparisons depending on what website they're going to actually be sitting on in the browser. 

For example, we're going to be comparing these designs for Github with the real Github page when we're logged in; these are just the Figma designs and what I can do is I can grab that Github URL, I'm going to paste that in as my base you URL; this is the default or domain level URL, and by default you can see here that every page is just going to get marked with that default URL. That's fine in the case of the desktop and mobile designs for the home page of the logged in screen, but we can see here that these frames over here are for different pages. We've got one for code spaces, so if we click on code spaces, we can see here that this one is not just Github.com, it's got a forward slash, so what we can do is specifically paste in the URLs for those ones. In this case we've got "code spaces" and we've also got "issues"; we can paste in "forward slash issues" into these two, so the mobile and the desktop one for issues.

Now we've got everything set up, we've got our default domain, which is going to be used for these first two, and we've also got our other domains for those extra two pages. Once you've got those ready to go, all you need to do is click on the "Compare Designs" button, so I'm going to click on that now, and because this is the first time we're using the Figma plugin in this file what we're going to do is click on the "Upload Designs" button. I'm going to click on "Upload Designs" and what that's going to do is it's going to take these six frames from Figma and it's going to upload them online and give you a very special link that you can use in a moment, and we'll be able to compare these designs with the live website directly in the browser; I'll show you what that looks like in a minute.

Okay, it's finished uploading our frames, and the important thing to note is before you open up the URL that it gives you, you do have to make sure that you've got the Pixelay Chrome extension also installed. If you click on the link here, that'll take you to the Chrome extension page; you can see we've got it here, the Pixelay for Figma Chrome extension. All you need to do is click on "Add to Chrome" and that's going to add the extension, click on "Add Extension" and that'll install the extension. You don't have to do anything with the extension, it's just going to live in your extensions panel and what it's going to do is it's going to kick in whenever it detects a Pixelay URL which we've got down here. 

You can see here that it's generated of comparison URL and it's taking the base domain or the base URL that we gave the Figma plugin a minute ago and it's adding in this Pixelay ID query string, that's automatically getting added, and what you can do is you can copy that URL to your clipboard or you can click on this link here, and if you then go ahead and paste it into the browser; I'm I'm already logged into Github, so if you're using a site that needs authentication, just make sure that you're already logged in and that'll make sure that the cookies or the authentication is saved in the browser. Now when we open up our Pixelay link, if we paste that in and load that up, you can see here that the browser extension is now picking up on that link and loading up a brand new page. It's still on the Github domain but the Chrome extension is kicking in and loading up all of our frames in iFrames and then loading in the designs over the top, and I'll show you what that looks like.

By default, it's just set to 50% opacity, but if we change that you can see here that as we change the opacity we can see that the designs versus the build is all kicking in, and that's basically what it looks like there. You've got all your different frames that we uploaded from Figma, we can see here we've got all the different frames, and we've got our Figma designs, and our Figma builds overlaid on top of each other. We can really easily see where the differences are in this design and there's a few different ways to compare the designs; we can look at a split screen, so if you wanted to use a split screen comparison you can really easily kind of go over each part of your design and just see exactly what differences you can notice and here we can see that the fonts are a little bit different, that will be something that you'd want to correct. 

We've also got another way of doing it which is this diff checker; this basically picks up on any visual differences, and you can see the color kind of goes off if it's not matching up, for example, the logo is perfectly matched but as we can see hear some of this text is obviously not matched because we've got some differences in color that's highlighting those offsets in position, and you can basically just go through all of your different frames and navigate through them. You can switch between design and build, we've got our design and build if you just want to swap between them, the cool thing about switching between the build is you can also then interact with the with the website; you can actually interact with these pages here, and that's basically what it looks like.

The other thing you can do is you can pop out any of these pages, if you wanted to pop them out into their own window, you can do that; just click on these little pop-out icons and that's going to specifically load just the one frame in its own window. That just gives you a really easy way to view the design in one window if you wanted to do that, and this also gets around the issue of if you're using vertical height units or rem unitsm sometimes the relative nature of those units might get a bit weird if you've got a really long page for example, and because these are being loaded into longer iFrames, in some cases, some of that vertical height might be a little bit offset, and popping it out into its own window can sometimes help with that comparison as well.

That's basically what it looks like, we can see here that there's quite a few differences on this this Frame here, we can see that this whole block has basically not been included in the design; that's obviously a difference that you'd pick up on, but this is a really easy way of comparing sites if they require authentication. This obviously works for sites that don't require authentication as well, so if you've just got a regular website that you're building, or if you've got a site that's on a local development environment, you can use the Pixelay extension for that as well; but this is a really cool example of a site that does require a login portion of the the build.

If you wanted to re-upload those designs to look at them again, what you can do is you can go back to Figma, make the changes that you want to make; whether it's positioning or text or images or whatever. You can do a new headingm and we can move some of this around, not that it's going to be more accurate in this case, but we can change that, and if you just open up the Figma plugin again jump into the "Compare Designs" button, click on "Compare Designs" again, you can see here that this time it's showing our link immediately because we've already created the URL once. 

To update those designs, just click on the "Update Designs" button and that's going to upload the images once again, and whatever changes were made in those frames in the meantime are automatically going to get uploaded. You can also deselect frames, so if you wanted to create an updated link without as many frames or add new frames you can do that as well. We've got our link updated, that's been confirmed; if we jump back to the browser and refresh we should see our new heading. We've got our new heading here, if we have a look at that we can see the new heading and the positioning has been changed; obviously this is for the worse, the comparison is not looking as accurate as it should, but that's just an example of how you can update the design as well.

Of course, the cool thing is this is also going to stay in sync with the URL. Whatever URLs you're comparing, every time you reload the page you're going to get the latest version of the development URLs, or the website URLs, so those will always be up to date. It's pretty handy if you want to do a handoff process with your developer, you can basically create a Pixelay link for them and put their URLs that you know they're going to be using, whether there's a local, or production, or an internal Network URL, and you don't have to do anything after that; they can just keep making changes if they're using hot reload or live reload, the website portion of the comparison is going to keep updating on the fly, and the designs are just going to stay as is until you decide to update them Figma.

That's basically it for today, I'll leave it there and keep it pretty simple; I just wanted to run through how to do this if you've been wondering how to use Pixelay, or how to use a service to compare your designs in Figma with production builds or builds that require authentication or login screens, this is a really easy way that you can do that in your own workflow. As always, thank you for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to add dynamic personalized content to HTML emails in Figma using Emailify
date: 2023-01-03T00:00:00.000Z
---

# How to add dynamic personalized content to HTML emails in Figma using Emailify



#### Video Transcript

Today I'm going to be showing you how to add personalized content or dynamic content into your HTML emails using the Emailify Figma plugin.

To get started, all you need to do is click on the little "Resources" icon up here, click on that and search for "Emailify", and under the "Plugins" tab you'll see Emailify pop up. All you need to do to run it is either click on this "Run" button here, or you can click on the "More options" icon here and click on "Save to Figma plugins". I've already saved the Figma plugin to my list, so I'm just going to go to my Figma file, right-click anywhere, go down to "Plugins", then go down to "Figma Plugins" and click on the Emailify item and that's just going to run the Figma plugin we installed a second ago.

If you're new to the Figma plugin, all you need to do is basically create a new email. I'm just going to create a blank email, add that to the page, and then all you need to do is basically go through and add the content that you want. You can do this by either adding content via the components up here, so you can click on these and add them in, or you can actually just click on the email itself and start adding layers using this little quick add feature. You can add content rows, you can add elements to those rows; so you can add text layers, image layers, things like that. 

For today I'm just going to keep it really simple; if you want to deep dive into how to design and customize your designs in Figma using Emailify, there's a separate Figma tutorial on the YouTube channel, just go to the playlist for Emailify and you'll see a really detailed video about designing emails there. For today, I'm just going to keep it really simple because I want to show you how to make some of this text content dynamic depending on what email platform you're using; you might be using MailChimp, or Klaviyo, or a different provider. 

If you go to the documentation for Emailify, and if you go down to this section called "Adding Platform Specific Personalization Content", this is what we're going to be going through today. There's a list of different platforms in here with direct links to the cheat sheets or the documentation for each of the platforms in terms of what their own specific personalization tags or syntax looks like. For example, if we go to the MailChimp one that's going to open up the MailChimp documentation and it's going to give us a list of all the merge tags or personalization tags that you can add to your email. For example, first name, last name, things like that. 

The same goes for Klaviyo, so if you want to use Klaviyo, they've also got personalization variables that look a little bit different. For today, we're going to be focusing on Klaviyo just to keep it simple. We'll be using the variables for Klaviyo, but bear in mind the process is exactly the same for any of these other email marketing platforms or whatever email marketing platform you're using, as long as they support personalization tags. 

Let's get started, we're going to keep this really simple today; I'm just going to add a Klaviyo footer, just so we've got that in there. I'm also just going to include an image, just so we've got an image block in there as well. I'm just going to include that and I'm going to drag that up here. What we want to do is basically personalize this welcome message here, so instead of just saying "Welcome to Jiro", we want to actually change that to be personalized to the recipient of the email. As we saw if we go to the Klaviyo documentation, you can find that by Googling it or clicking on the link in the docs here, and if you go down to here, you can see that we've got a bunch of personalization variables. 

All these are really just platform specific template tags that you can use to personalize your content, so this can be pasted anywhere; I'm just going to copy paste this first name tag for Klaviyo, I'm going to jump back into my Figma file and it's basically as simple as pasting it into your text layer wherever you want to use it. I'm just going to add that here, and I'm going to add a little exclaimation mark, and basically what's going to happen is this tag here, the curly brackets and the variable inside of it, that's going to get replaced in Klaviyo with the first name of the person who's on that list.

We'll see what that looks like in a moment; I'm just going to keep it really simple for now and upload that to Klaviyo. To upload the email from Figma to Klaviyo or whatever email marketing platform you're using, just click on the "Export HTML" button, and I've already got Klaviyo selected, yours might be selected to "HTML Email", but you can just change the platform to whatever platform you're using. I've got Klaviyo in there, I've already got my API key in there; if you don't have it, you just click on this little link and copy your API key from Klaviyo. 

I'm going to upload that now, I'm going to click on "Upload to Klaviyo" and upload that, it's going to generate all the HTML for me, upload all the images for me and it's telling me that the template has been uploaded. If we open up the Klaviyo templates link, that will take us to our email templates list. You can see here we've got our sushi email uploaded that was created just now. 

To actually use that template, you can go to "Campaigns", then go to "Create Campaign", make it an "Email Campaign", and we're just going to leave that as "Default". You can change what list you want to send it to, I've just got a test list for today. I'm just going to check that, check the preview list that I've got set up and then go to "Continue to Content". I'm going to click on the 
"Drag and Drop" option here and go to my templates, and then click on the "Sushi Email" template. You can see here, this is our HTML that we just designed in Figma and uploaded to Klaviyo. What I'm going to do is I'm going to click on "Use Template", so I've just clicked that and that's going to use this template for our current campaign. 

You can see it's got all the HTML there, you don't need to worry about that; all you need to do is basically preview this email and we're going to do that by clicking on the "Preview Email" button, and and then we're going to click "Show directly in Klaviyo". We're going to preview the email in Klaviyo and click "Preview Now", and you can see that it's previewing the template as "Adam", which is me, that's taking it from my list or taking it from my account. I'm going to click on "Preview Now", and you can see here that when we preview the email using that feature and loading in the data, or the customer attributes, or user attributes from that list or that account, you can see that the template we added in Figma; so we've got this first name variable here, and all we did was add that as a bit of text to our Figma text layer. Because that's getting exported as HTML using the Emailify Figma plugin in Klaviyo, we can see here that it's being dynamically swapped out with the name of that person, which in this case, is me.

There we go, we've basically got our name swapped out dynamically, so it's loading in my name instead of the template tag that we added in Figma. That dynamic tag is being swapped out in Klaviyo. Again, you have to use whatever the variable or whatever the personalization tag is per platform; so if we wanted to do this for MailChimp, we would copy in this tag instead of the Klaviyo tag. It would look like that for MailChimp, but in this case for Klaviyo it looks like this. That's basically what it looks like. 

As I said, you've got the HTML exported as we'd expect from Figma, and you've got the template tag swapped out. And of course you can do more than just add names. If you wanted to add email address, phone number, organization; you can also add defaults, so if there's no name, you can actually just change this to have a fallback. For example, we could do this, we could add this tag and instead of saying the first name, we can basically say if we change that to hello and instead of the first name, if the first name doesn't exist, this default will basically change it to fallback to the word there. Instead of saying "Hello Adam", it would say "Hello There". So that's an option you can do, and It's probably a good idea to do that in case the customer or the user data isn't complete and doesn'thave their first name, you can add things like fallbacks. 

Again, you just need to go through the documentation and see what is supported, there's all different custom properties. You can add account variables, you've got event variables which can be really handy if you want to do things like dynamic shopping carts, for example, you can do that. You can create these events in Klaviyo specifically, and I believe this works with Shopify, so you can basically create things like abandoned carts. If there's an abandoned cart event, you can actually create these variables inside of your email to swap out with those abandoned cart items or product items. 

You can also use these variables in images as well, for example, if we swap in, let's go to the ecom one, and swap in an ecom example. We just added a really basic ecom example here, and if you wanted to make this image variable dynamic,you can click on the Figma image layer here, you can see we clicked on the image layer, go to "HTML & Mobile Settings" in the Figma plugin; click on that button, and what you cando is you can basically paste in your variable into this "Override Image Source" field. What this is going to do is instead of linking to the image in Figma, you can make it override that image source with a static URL, or you can use variables in that URL.

For example, it might be something like this, it's not going to be this but a Shopify assets URL and then you might have something like "Item.Image_Name" or something like that. Obviously this is a fake example, but the point is that we're mixing in a dynamic tag into the URL and it might actually even just be a variable on its own, the platform might just inject that variable. Again, you have to look up whatthese variables are, but that's the way that you can override the image source if you want to do dynamic images, you can do that.

The same thing goes for links, if you wanted to add a clickable link with some dynamic content, you can definitely do that as well. We might do an example URL and maybe you want to pass a variable to that. so you could do "name equals" and then add in something like "First Name" and this will allow you to have a clickable link where the variable also gets included into the link. If you were to click on that image, it would go to "example, query string, name equals Adam" in this case. That's a way that you can do dynamic link URLs and dynamic image sources. You could also do it for image alt text, if you wanted to put the product name in there; again, I don't know what the variable would be, but it would be something like "Item.Product_Name" and that would make a dynamic alt text as well. 

You can really use these dynamic tags anywhere that text is available, so you could do this on buttons, you could make a dynamic button again, you could add the name into there. We could do "First Name" and that would basically populate my name into the button, and that's roughly what it would look like. Again, we can get rid of these because they're not going to do anything, but if we re-upload this email, I'm just going to upload that to Klaviyo again. We'll jump back into Klaviyo knowing that it's going to be finished in a second and we'll go back to "Content" and we're going to do "Change Template", I'm just going to use the new template that we're uploading now. 

That's finished uploading and I'm going to go to "Drag and Drop", I'm going to go to "My Templates" and I'm going to click on this "New Template". As you can see, we've got our tags as we would expect, in the button and in the title. Now I'm going to click on "Use Template" and go to "Preview" and "Preview Email", then "Show in Klaviyo" and "Preview Now", and there we go; you can see now that the button also has a dynamic variable in it as well as in the title. 

As I said, basically anywhere where there's a text layer, or a link, or alt text, or a custom property, like on the images, you can use these variables based on the platform that you're using to populate this data. It can be really powerful if you really get fancy with it. You can do other things like include conditional statements, this allows you to do things like "if else" blocks. You can do some crazy stuff like copy these "if else" statements. If you click on your email, the Emailify frame, and then click on the "Quick add" option and click on "Custom Code", and add custom code.

That's going to add this special "Custom Code" layer here where you can actually drop in custom code. I'm going to paste in this conditional statement and I'm just going to drag that up to here and then I'm going to add another one; I'm just going to add another custom code layer and if we go back to here we can do an "end if". Again, this is going to vary depending on what platform you're using; the Templating language will be different, but if you dig into the documentation you'll be able to find out what this looks like per platform.

This is a custom code wrapper, and what this does is it injects raw template code or custom code in between the rows, so this allows you to basically create dynamic rows. In this case, this row will only show up if the person is interested in dogs and not interested in cats. This is a very specific example, obviously they're just giving you a potential use case, but you could change this logic to be whatever you want; you could change it to be location based, you could change it to be name based, organization based, or tier based depending on what kind of customer they are. 

You can basically use these tags to dynamically inject or swap out content, so you could do "end if", you could also do "else", so if we do "else" you could basically add that in there and we could create a different block. If we just duplicate this block and pop it between those tags, we could do "else", so it's a terrible name for a product but you can see what I mean. In this case if the person is interested in dogs, then this block would show up, else if they're not interested in dogs, then everyone else will get this block here, and then "end if" kind of closes off that wrapper. 

If we just close up these Figma layers on the left here it gives us a really quick look at what that looks like. You've got a custom code block here, that's the "if", so that's the condition, then you're going to inject this block if that condition matches, "else" if it doesn't match, show everyone else this block here and then end that condition; so this area now is now conditional. Again, you can explore this in detail, I'm not covering this in detail at all.It's basically up to you what you use those conditions for, and this is going to differ depending on what platform you're using. If you're using MailChimp, it's going to look quite different. You basically want to dig into the documentation based on the platform you're using. 

Okay, I think that's a pretty good overview of conditional tags, how they work and specifically how they work with emails that are designed in Figma using the Emailify Figma plugin again. It's really simple, all you have to do is find the conditional tags or the merge tags that you want to use, and if they're text based, like a name or something like that, you can just drop them into a text layer in your Emailify layers. Again, you can use them for button labels and you can use them for links, you can use them for dynamic image tags; anywhere where you can use text, you can use these dynamic tags. 

Then of course, as we just wentthrough, these special tags here, dynamic tags;you can use these tags for code blocks, but you can also use them for just regular text layers as well. You can actually just drop these in here if you don't want to do a section based or a block based approach, if you just actually want to do conditional text. If we do conditional text and then "end if", that's what it looks like. Again, this would be conditional inside of that text layer, so you could do if interested in dogs or cats and then you could do dogs and else cats; that would basically mean that inside of this text layer, if that condition is met, it will show the word "dogs", else it will show the word "cats". That's another way you can do it if you want to do it inside of a Figma text layer, that's possible as well. If you want to use it in a block layer context, swapping out entire rows, then using that code snippet or code block that we went through before is still going to be the way to go.

Okay, I think we'll leave it there, I don't want to go too deep into it. I just wanted to go over the general principles and general fundamentals of how dynamic text and content works in email marketing platforms, in this case, specifically for Klaviyo; but as I said, check out the documentation on the Emailify documnetation page and you'll get alist of all the different templating links per platform; whatever marketing platform you're using, you really just need to dive deep into those documentation pages and figure out how to use those to the best of your ability to customize the content in your own designs for whatever email marketing platform you're using.

I hope that's been helpful, I've had quite a lot of questions about dynamic personlized content tags and dynamic content in general as it pertains to email marketing platforms, so I hope this is a bit ofa good 101 introduction into customizable email content in email platforms using the Emailify Figma plugin. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: article
title: From Two to Three
date: 2022-12-21T00:00:00.000Z
---

# From Two to Three



>“The mic still smokin', I ain't once go hoarse” 

— [Nas](https://www.youtube.com/watch?v=oIYywqRwda4), WTF SMH

It's been exactly one year since posting an update for Hypermatic's 2nd birthday ([From One to Two](/articles/from-one-to-two/)), so here's another annual recap to celebrate Hypermatic turning 3 years old today!

### Some hits to celebrate from 2022 (tl;dr)

- **0** investors and **$0** funding (still happily bootstrapped/[default alive](http://www.paulgraham.com/aord.html))
- **1** brand new product shipped ([Commentful](https://hypermatic.com/commentful))
- **1** full [rebrand](/articles/the-startup-formerly-known-as-figmatic/) rolled out
- **39** new YouTube [tutorials](https://www.youtube.com/@hypermatic_tutorials) recorded
- **562** new product updates and improvements shipped
- **1,298** total followers on our Figma Community [profile](https://figma.com/@hypermatic) (up from 690 a year ago)
- **570,000+** users (up from 290,000 a year ago)

### Some new feature highlights shipped in the last 6 months (since July 2022)

Besides the usual bug fixes, customer requests, and other smaller enhancements, these were some of the other new features that made their way into the [Hypermatic Twitter feed](https://x.com/hypermatic?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor) (which is mainly used to keep a record of these changes) over the last 6 months:

- Layer selection-based filtering to Bannerify
- Image carousels to Emailify
- Spreadsheet → Table imports to CopyDoc
- Support for full-width sections to Emailify
- Layer selection exports to Convertify
- Lossless GIF compression to Bannerify!
- Auto-layout support to HyperCrop
- Spreadsheet → Table imports to Emailify
- Editable content areas for Mailchimp templates to Emailify
- Retina GIFs support to Emailify
- Editable content areas for Klaviyo templates to Emailify
- Conditional tags for Localization imports to Emailify
- Layout Validation to Emailify
- EPS (PostScript) exports to Convertify
- New accessibility updates to Emailify
- Lokalise API integration feature to Emailify
- Intercom support to Emailify
- HTML email signature support to Emailify
- 3 new Adobe XD/AE export options to Convertify
- Mailjet integration to Emailify
- Adobe XD → Figma importer to Convertify
- Animated WebP image support to TinyImage
- Social Cards to Emailify
- Suto-scaling for After Effects comps to Convertify
- Animated WebP image exports to Bannerify
- Sendinblue integration to Emailify
- Audio support for MP4 video exports to Bannerify
- Google Sheets → Figma importer to Convertify
- RTL (right-to-left) text support to Emailify
- Animated MP4 video exports to TinyImage
- Google Docs → Figma importer to Convertify
- Rich text support for Localizations to Emailify
- Support for Spreadsheet Tabs in content imports to CopyDoc
- Loom video embeds to Pitchdeck
- Lottie animation embeds to Pitchdeck
- Google Form embeds to Pitchdeck
- Support for Password-Protected Websites to Pixelay

### Some misses from 2022 (_The world ain't all sunshine and rainbows_)

While lots of great features and improvements were released this year, and the number of people using Hypermatic to automate their workflows has doubled in the last 12 months (which is awesome!), there were also a bunch of misses or unexpected events that threw off previous plans.

>“It ain't about how hard you hit, it's about how hard you can get hit and keep moving forward, how much can you take and keep moving forward.” 

— [Rocky Balboa](https://www.youtube.com/watch?v=_J0Ahh3UxbM)

As I covered in the [July 2022 update](/articles/strictly-business), the first half of was quite full on and delivered a bunch of curve balls: 

- Finally getting Commentful shipped
- Doing a rebrand for the business to avoid copyright issues
- Russia/Ukraine war causing the loss of many customers
- Figma bugs causing some issues in our products for 4-6 weeks
- Figma update causing a significant decrease in new installs

By the time July rolled around, it felt like a great time to pause and reset for the rest of the year to catch up on any time lost from the events above; however, as is the rule with business, there was another big surprise around the corner.

In September 2022, [Adobe aquired Figma](https://techcrunch.com/2022/09/15/adobe-is-buying-figma-for-20b-taking-out-one-of-its-biggest-rivals-in-digital-design/), which was the biggest news and gave rise to the most fervor I can recall seeing in the design community. In the context of Hypermatic, we had been working on an XD to Figma importer for Convertify for months prior to the acquisition, which we ended up releasing a week or so after the news. Based on some interviews and tweets I've seen with people from Adobe, the acquisition news means that Adobe XD is effectively dead and will likely be discontinued in the future.

Now that the acquisition has already happened, and that all development of XD itself has been stopped, that also means that any upcoming integrations Hypermatic was going to ship for XD have now met the same fate. Any time spent on these so far is a sunk-cost, and further time invested into them would become an opportunity cost; there's no reason to waste time building something for a platform that is destined to wither away.

On the topic of products, while we launched Commentful earlier this year, and I'm happy with how it turned out and how the feedback from customers, I do think that the initial version took too long to ship, and in hindsight I would have learned my own lesson from previous products and got it out there sooner, rather than working on it for a few more months behind the scenes to try and anticipate every possible customer request.

### 2x is the new 3x

While some VCs have called Hypermatic a "lifestyle business" (which is true, in the same way that [The Sopranos](https://www.rottentomatoes.com/tv/the_sopranos) is a "lifestyle series"), I have always prioritized making this startup profitable and sustainable over the long-term, without taking on any investment or having any outside influence that would compromise the future vision for it.

During 2020-2021, it felt like things were pretty crazy with the amount of capital being invested in all these different startups, at _way_ higher valuations their current earnings (if they had any at all). For some, it was probably a good idea to take advantage of this, but I think it also resulted in a huge excess in hiring and waste in terms of how that capital was spent based on overestimating some of the apparent trends we were seeing during that time of abundance.

Now that valuations have plummeted, and the environment for raising more capital is nothing like the previous couple of years, I think lots of companies (and especially startups) are going to have to pivot to a similar focus on becoming profitable and sustainable by delivering real value to their customers.

>“2x is the new 3x. Meaning that: Given economic headwinds, 2x YoY growth over the next year will be as impressive (or more) as growing 3x last year, assuming a reasonable burn multiple.” 

— [David Sacks](https://x.com/davidsacks/status/1598363968547876864), Craft Ventures

With this "new normal" hitting home, and 2023-2025 all but certain to be much harder to grow than 2020-2022, the priority should be to focus and double-down on delivering real value to customers, and cut burn-rate enough to stay alive and come out the other end even stronger.

As mentioned in the [previous mid-year update](/articles/strictly-business) from 2022, this was (and remains) the outlook for Hypermatic, too:

>“Hypermatic is proudly self-funded, default alive and default investible, with high enough free cash flow and a low enough burn-rate to allow the business to continue indefinitely creating value for all of our customers over the long term.”

There is no expectation or extra efforts being put towards trying to grow 3x, or even 2x; even a steady plateau for the next couple of years is totally fine. As long as we're still alive, it allows for more product development with a focus on the long term, and by creating more value now, we can offset and capture more of that value in the future.

### A <s>recession</s> “vibe shift” is coming

Not to pick on one publication, but to use as a consistent benchmark for the tone of the UX and design space over the last couple of years, it's interesting to look back and see how different the [The State of UX in 2021](https://trends.uxdesign.cc/2021) is compared to [The State of UX in 2023](https://trends.uxdesign.cc/2023).

By its own admission, the 2021 report had nothing to do with trends (or much about design) at all. When times were good, and companies were hiring like maniacs to fill design roles, it was easy to think things were on cruise-control, and designers could (and "should") expand their focus "beyond" their role:

>“Not trends, but lessons. Lessons on how to make an impact beyond our products, how to collaborate beyond Zoom calls, how to organize ourselves beyond our bubbles, and how to improve our craft beyond artboards. Lessons from voices we still don’t hear as often in the design mainstream — but we should.”

Compare this with the 2023 report, titled *A Vibe Shift Is Coming*, which seems to make a hairpin turn away from the dogmatic list of 100 lessons in 2021, which were sometimes related to design, such as "Empathy is not enough", "It’s ok to slow down." and "Wash your hands", to now touting the need for designers to focus on adding value, and to make the case for why companies should invest in design:

>“Companies cannot afford leaders who are only good at talking and not as good at delivering... when budgets are tight, the case for investing in design needs to be even tighter.”

In the same way that investors are shifting their portfolios to be more weighted towards value than growth stocks, what this "vibe shift" feeling that the UX report seems to reflect is the fact that the underlying excesses of the 0% interest-rate era is over. The party that culminated in the bubble during 2020-2021 (peaking in January 2022) has now come to an end.

The reality is that we will be in recession and an environment where rates and inflation will both remain higher for longer, which is why there have been ~[152,542 layoffs](https://layoffs.fyi/) at ~993 tech companies this year, because these companies know that things have changed and they need to prepare to stay alive through at least the next 2 years. 

### <s>Software</s> AI is eating <s>the world</s> design

Speaking of "vibe shifts" — back in 2018, I gave a talk at the DesignOps Melbourne meetup called _Insanely Inevitable_ where I was talking about how automating and AI is super underestimated in design:

>“I think that machine learning AI and automation are very underestimated in the design space. There's there's not really a whole bunch of chatter around it... but in general, I think that these are very, very underestimated for the future of design; and I'm not talking about the next decade I'm talking about the next few years.”

— Adam Brock, [Insanely Inevitable](https://youtu.be/pb1uvaYGx_k?t=1129)

I remember talking to some designers in the audience afterward, where this notion was largely seen as a joke, or at least too far into the future to be seriously thinking about at the time, yet here we are, _just 4 years later_, and we have seen amazing breakthroughs in the space (such as [ChatGPT](https://openai.com/blog/chatgpt/), [DALLE-2](https://openai.com/dall-e-2/) and [StableDiffusion](https://stability.ai/blog/stable-diffusion-public-release)).

As I (half) joked in the talk, where I showed [a tweet](https://x.com/jongold/status/694591217523363840) from Jon Gold asking "which one of the two possible websites are you currently designing?", accompanied by a image of two very common website landing page designs; which to me, just made it super obvious that it was inevitable that there would eventually be an AI model trained to understand UI design and be able to create mockups (or even better, code) that was comparable to what a designer would come up with.

As we intuitively know, and as ["science confirms"](https://www.fastcompany.com/90501691/science-confirms-it-web-sites-really-do-all-look-the-same), many websites do look the same, which seems like it will only increase how rapidly this AI revolution will start to touch of almost every aspect of how we currently go about designing and building things for the web. 

It will seem obvious when we look back that the processes we clung on to for so many years were inefficient and didn't make much sense, but rather than replacing designers or developers, I think that these new breakthroughs will compliment our workflows instead.

These breakthroughs and tools are also going to get commoditised pretty quickly and the cost will be driven down to zero, so I think this will help drive innovation around how to utilize it best to create value.

If [Github Copilot](https://github.com/features/copilot) makes someone 20% more efficient as a a developer, but everyone is using Copilot (or something similar), then the productivity gains are evenly distributed and normalized, so you'll need to provide specific value some other way.

Eventually, I think there will be "Copilot" for everything, and it will just become totally normal and invisible, and it's already harder to imagine areas of design and development that _won't_ be impacted or enhanced by these advancements in the AI space.

### Looking ahead to 2023 for Hypermatic

As I mentioned in the [July 2022 update](/articles/strictly-business), I really wanted to double down on all of our existing products and get them into a great spot by the end of the year, by focusing on a bunch of features and updates that have been on the todo list for a while and would deliver the most value to our customers. 

By making sure all the existing products are stable and have a straong foundation to build upon where needed, this will also free up more time in 2023 to start shifting more focus into a releasing brand new product (as well as shipping some cool new planned features across the board for the existing products). The "one thing" for the next year is to ship the first version of this brand new product that has been in development for a couple of years now. 

It's really easy to get swept up or distracted by these genuinely exciting advancements in AI, this new product _won't_ be "AI first". However, this is definitely something I'm very mindful of planning for in the future, and making sure the technical groundwork is built in a way that will lend itself to enhancing the value of the product using AI in the future. I think that the developments I wrote about in the section above are going to be extremely useful to augment many (if not all) of the Hypermatic products.

The big lesson for me from 2022 is that [Only The Paranoid Survive](https://www.amazon.com.au/Only-Paranoid-Survive-Strategic-Inflection/dp/0385483821), so as much as I'd like to think that nothing will come up to interfere with these goals for 2023, I'm sure there will be a bunch of unknown unknowns to deal with, and that's okay, too. I'm ready to take on whatever 2023 has to throw, and as always, firmly focused on the long-term; always moving step by step, focused on doing one thing at a time, on a path that's directionally correct.

---

---
type: tutorial
title: How to add a countdown timer to HTML emails in Figma using Emailify
date: 2022-12-07T00:00:00.000Z
---

# How to add a countdown timer to HTML emails in Figma using Emailify



#### Video Transcript

Today I'm going to be showing you how to add a countdown timer to your email designs that can then be exported to HTML directly from Figma.

To get started, all we need to do is open up a new Figma file, go to the "Resources" icon in the top header here, then if you search for "Emailify" under the "Plugins" tab you'll see the Emailify result pop up. If you click on that, you can run the Figma plugin by either clicking the "Run" button here or you can click on this little "More options" icon and save that to your Figma plugins list, and that's just going to let you access it again later really easily. I've already added it to my Figma plugins list, so I'm going to right click on my canvas, go down to "Plugins" go down to "Saved plugins", then just click on the Emailify menu item and that's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is you basically add a special email frame using the Figma plugin, so I'm just going to add a new frame, I'm just going to call it "Email Countdown", add that container, and then what you can do is you can basically go through and add customizable Figma content. If we go through and add some of these modules, it just instantly adds a whole bunch of content that you can customize in Figma, as you'd expect; changing the content, changing the styles, changing the colors, all of that sort of stuff to suit your needs. I'm going to keep the design really simple today, if you want to deep dive into how to actually design these using the Figma plugin for desktop and mobile, and do a whole bunch of fancy stuff, there's a whole bunch of other tutorials on the channel that you can check out if you find the Emailify playlist on our YouTube channel.

For today, as I said, I'm just going to be showing you how to add a countdown timer, one that looks like this, directly into your HTML emails in Figma. There's a few different services that offer this, I don't have a particular one that I recommend, there's a whole bunch, most of them have free options; there's mailtimers.com, motionmailapp.com, mailtimer.io, promofeatures.com, there's a whole bunch of them. Today I'm just going to be using this one called sendtric.com, and the reason I'm using this is just because it's a really simple generator, and you don't have to go through a lengthy sign up process to generate one of these countdown timers; you can basically just pop in the details. If you just search for your time zone, and pop in the time that you want to change the time to end, I'm just going to say end this on Saturday, and then you can customize the design of the timer. In this case I'm going to match the background color to the email background color, and then I'm just going to change the label colors a little bit as well, I'm just going to make these a bit darker, and then once I'm happy with that I'm just going to generate the countdown timer. I've just hit "Generate", and you can see here it's given me this countdown timer that I can now use inside of our email. 

Basically, if you look down here, you'll see this special image link that's in this source tag; don't worry about all of the other code, all we're going to be focusing on for today is this link in between the "src" attribute here. Where I'm highlighting that, if you just copy that to your clipboard and then open up a new tab; I've just opened that up in a new tab in the browser, and what we're going to do is we're going to drag and drop this image, we have to actually copy it, so if we do "Copy image", and then do paste with "Command + V", or "Control + V" if you're on Windows, and now we've got our image layer. This is a static image layer, this is not a GIF, but the way we're going to be using this is to swap out the image URL with the live one in a second. Keep this tab open, because we're going to be using it again in a second. I'm going to be taking this Figma image layer and I'm going to be moving it inside of my existing content layer, I want to include the countdown timer in this content here, so I'm actually going to drag and drop that image directly into that "Column" layer. That's in there now, and I can center that by going to the column layer, clicking on the center icon in the Figma auto-layout settings; that's now centered this image layer. Now what we want to do is we can either leave it at that size, so this is the 1x size, but I actually want to make this a little bit smaller. I'm going to go into my width properties and I'm just going to go divide by two; I've just divided that by two, and that's basically going to make it look a little bit sharper once we now export this into HTML. 

To make this dynamic, the way that we can do it is if you click on the image layer; once you've clicked on the image layer, you want to go into the Figma plugin and click on the "HTML & Mobile Settings" button. As you can see, once you click that, it loads up a whole bunch of options that you can apply to this image. The one that we're interested in today is the "Override image source" option; what this allows us to do is paste in a custom image URL and when this email gets exported to HTML in a moment, this value here is going to be automatically swapped in place of whatever image we've got in Figma. I'll show you what that looks like, if we go back to our browser tab and just copy that URL; copy that whole dynamic countdown timer link that we generated, go back to your Figma plugin, and paste it inside of that "Override image source" attribute, and close off the settings panel. Then we can now preview that by clicking on the "Preview" button up here, and this is going to generate a HTML preview; this is a real HTML preview of the HTML email. We can expand that out to go to a wider size, so we can see what it looks like on desktop, and you can see here this is a dynamic GIF; this is now pointing to the dynamic link that we got from our browser that we generated, this is now the exact same URL that is now being loaded in to this image tag here dynamically. It's overriding whatever image is in Figma, and it's swapping it out with that URL pointing directly to the countdown timer, and this is how we can include a dynamic countdown timer in our HTML email.

I'm now going to export that to HTML, and the way we do that is just by closing off the preview, and clicking on the "Export HTML" button. I'm going to do that, and then I'm going to hit the "HTML Email" option, there's a whole bunch of other platforms, if you're using a certain platform like MailChimp or Klaviyo you can upload this directly into your platform; today I'm going to keep it really simple and just download it to the computer. I'm just going to click "Export to HTML", and this is going to generate the HTML for us. I'm just going to save that, I'm going to download the zip file, I'm just going to pop it on my desktop and hit "Save", and then if I open up Finder and just go to the desktop, double-click on the zip file, open up the folder. Now if we open up the preview HTML, I'm just going to drag that into my browser, and you can see here that we've now got our exported HTML ready to go. It's got our countdown timer, we can see what it looks like on mobile, we can see what it looks like on desktop in this preview. If you want the actual HTML file that's exported, just go into the folder, name grab the "index.html" file and drop that in, and now you can see the full HTML. If we go to "View Source", you can see if we explore the image source and then we go to our image tag; I'm just going to search for the "img" tag, and you can see here that in the image tag, it's actually pulling in the same countdown image that we generated before. 

As I mentioned before, I went to the trouble of halving the size of that countdown; if you want to leave it at the regular size, you can totally do that. Just put it back up to the normal size, preview that again, and you'll see that it's now much bigger; you can you can make it whatever size you want, I just didn't want it to be too pixelated if it got too big, that's why I'm at it a little bit smaller before. Bear in mind, if you do make it bigger, it will automatically resize down on mobile as well. If you do have a smaller mobile screen, that'll responsively shrink the image width based on the width of the mobile width as well, so you don't need to worry too much about that.

I think we'll leave it there for today, I hope that's been helpful, as some of you have been asking for how to do this; how to insert a dynamic countdown timer into your HTML emails using the Emailify plugin in Figma, this is the best way to do it. As I mentioned, explore some of these options, we've only gone through one of these services today, and some of the other services are going to allow you to create more customizable countdown timers. Do check out a whole bunch of different options and find the right one for you, as you can see here, some of these are much more advanced, and you can customize the design a lot more. This one is always going to be a basic one if you just want a really easy option, but if you're wanting something that's more engaging, you might want to check out some of these other services, such as this one, mailtimer.io, or some of the other ones that are available.

We'll leave it there for today, I just wanted to focus on the countdown timer for this Figma tutorial and keep it fairly straightforward; I hope that's been helpful, as I said, and please feel free to give it a try in Figma with you or your team. Thank you as always for watching we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to embed Figma designs in Figma presentations using Pitchdeck
date: 2022-12-06T00:00:00.000Z
---

# How to embed Figma designs in Figma presentations using Pitchdeck



#### Video Transcript

Today I'm going to be showing you how to embed live Figma designs into your Figma presentations using the Pitchdeck Figma plugin.

All we need to do to get started is just open up your Figma file go to the "Resources" icon in the top here and then just search for the word "Pitchdeck" and click on the results, and you'll be able to run the Figma plugin by either clicking on this "Run" button here, or you can click on the "More options" icon and save that to your Figma plugins by clicking on the link down here.

I've already done that, so I'm just going to right click on my page, I'm going to go down to "Plugins", I'm going to go down to "Saved plugins" and then click on the Pitchdeck Figma plugin, and that's just going to load up the Figma plugin we just set up a second ago.

If you're new to the Figma plugin, the way it works is it basically treats each Figma frame on your page as an individual slide in your presentation, and each of the layers inside of those slides are basically treated as the individual layers for each slide as you can see here. These kind of map up one to one with your slide layers here, and that's basically the way to set up your slides. I've just set up an extra slide over here where I want to have my Figma file or Figma design embedded inside of my presentation; you can see this layer here I've got set up I basically want to insert a live Figma design that I can browse around and demonstrate inside of the deck using a live embed.

It's really easy to do this all we need to do is click on the "GIFs/Videos/Embeds" tab over here in the right hand side of the Figma plugin, and that's just going to switch the context from animations over to this input field here. If you click on the "Supported Embeds" link over in the side of the Figma plugin that's going to open up the documentation for the Figma plugin, and it's going to give you all the different examples of embed links that you can actually paste into that field. There's quite a few, but for today we're just going to be focusing on embedding Figma designs.

The way we do that is just by going over to our Figma file and we're going to get a bit meta today and embed the live Figma design link for the file that we're actually in, and the file that the presentation is being created from. All I'm going to do is I'm going to go ahead and click on the "Share" button in the top right hand corner of the Figma file, click on that, and then I'm going to click on the "Copy link" button here copy that to my clipboard. Just make sure that the "Anyone with the link" setting is set to "Can view"; make sure that's set, and then now that we've got our link copied by clicking on the "Copy link" button, we can go back to our Figma plugin, go to the embed input field here for the layer that we want to embed it to, and then just paste that in there.

If you paste in that link, you'll see that our Figma file or Figma embed has now been loaded up inside of the presentation; we can actually Zoom around and present the design from our Figma file inside of our presentation that we're creating from Figma. In this case we're getting a little bit meta because it's exactly the same file, but you can imagine that this Figma file is a totally different file that's related to the presentation that you're giving, and you might want to present that in a live way inside of your presentation without having to create multiple Figma files to then create separate presentation.

The way that we can now present this in the browser is we just click on the "Export Presentation" button in the top right hand side of the Figma plugin, and I've already created a link, so if you haven't done that it will say "Upload Presentation"; I'm just going to click on "Update Presentation"; I'm going to click on that and that's going to upload our slides from Figma up to the web presentation link, including our live Figma design embed that we just added to the presentation.This is going to give you two different options, you can either share the link with a separate password, or you can copy this passwordless URL which basically creates a URL that automatically logs in without a password.

I've already got that loaded up in my browser, so I'm going to go ahead and click on that and I'll just refresh the page. You can see here that we've got our normal slides; we've got our slides with the images from Figma, the content from Figma, all added in there, but if we go to our second slide the one we added the Figma live design embed to, you can see here that our whole Figma file Figma design is available to navigate the same way that we would do in Figma; you can zoom in, you can zoom out you can move around, you can even go full screen if you want to. If you want to go to the actual Figma file you can click on that link at the bottom and that will open up your Figma file in the browser as well.

This is just a really cool way of embedding a live Figma design, so if we make updates in Figma, for example, we might change this to "Nine"; we'll update that, and you can see here that it's actually automatically updating the content on the fly; this is a live embed of your design. Once again, we'll just change that back and that will automatically update it here. That's pretty cool if you want to include a live Figma design embed into your presentations; you can actually present work in progress or different Figma file content that's live inside the browser without having to create multiple Figma URLs, you can do it from the Pitchdeck presentation Figma plugin web app.

That's what it looks like there, and I hope that's been helpful if you've been wondering how to embed live Figma designs into your Figma presentations, as a bit of a meta presentation, this is going to be a really easy way to do it using the Pitchdeck Figma plugin. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to embed Google Docs in Figma presentations using Pitchdeck
date: 2022-12-06T00:00:00.000Z
---

# How to embed Google Docs in Figma presentations using Pitchdeck



#### Video Transcript

Today I'm going to be showing you how to embed a Google Doc directly into your Figma presentations using the Pitchdeck presentation Figma plugin.

To get started, if you just go to your Figma file, click on the little "Resources" icon at the top and search for "Pitchdeck", and if you click on the result you can run that Figma plugin by either clicking on the "Run" button or clicking on the "More options" icon over here and saving it to your Figma plugins list by clicking on the button below. I've already done that, so I'm going to go to my canvas, I'm going to right-click anywhere, go down to "Plugins" then go down to "Saved plugins", click on the Pitchdeck option, and that's just going to run the Figma plugin we just set up a second ago.

If you haven't used this Figma plugin before, the way it works is it basically takes any Figma frames that you've added to your page and it treats those as slides and loads them into a presentation that you can then export. I've got a bunch of slides, I've just got these set up as 1920x1080 Figma frames, and those are being used as my slides, then each of those basically have some content inside of them; just text layers, image layers, things like that. You can then add animations and links and embeds and things on them, as we'll see in a second.

In this Figma tutorial I'm just going to be focusing on how to embed a Google Doc into one of these Figma slides or more of the slides if you want to add more, and we can do that pretty easily just by going to the slide that we want to include the Google Doc on, and then if you just create a layer, if you create like a rectangle layer or an image layer, any of those kind of shape layers, you can then replace that with a embed using the option in the "GIFs/Videos/Embeds" tab over here. If you click on that tab and then you can see that we can highlight over our layers, so we can highlight over our image layer here, and if you click on the "Supported Embeds" link, that's going to open up the Pitchdeck documentation, and you'll get a list of all the different link types that you can embed into your slides. For today, I'm just going to be focusing on how to embed a Google Docs URL into your presentation in Figma using this embed function. 

I'm going to go over to Google Docs and I've just got a really basic template that I've pulled from the Google Docs template library, and I've just left that as all the blank content that it comes with, but I basically want to include this document inside of my Figma presentation that I'm designing. The way that we do that is by clicking on the little "Share" icon up here, and just making sure this is open to "Anyone with the link"; click on that and then what we need to do is go to the "File" option up in the top here, and then go down to "Share" and then if you click on the "Publish to Web" icon; click on "Publish to Web" and what this is going to allow you to do is basically publish this document to be public. That'll allow the document to be embedded outside of Google, so if you go to the publish to web option, and then click on the "Publish" button, it's going to ask you "Are you sure you want to publish?" it, just click "Ok".

I'm going to click "Ok" and it's going to give you an embed link that you can use here; this special embed link, you can click on that and then copy it with "Command + C" or "Control + C" if you're on Windows. Copy that embed link, then go back to Figma, and as we just saw a second ago, if you go under this "Embeds" tab, go to the layer you want to embed the Google Doc in; I'm just going to embed it on this image layer here. I'm going to paste that into this field, and you'll see here that we've basically got our Google Doc loaded up, and what we can do is we can now adjust this. Because we've got some extra content here, I'm just going to get rid of that, extend this out to be a little bit wider, and then I'm just going to reload that frame and you can see here that's just going to make it look a little bit nicer with the embed width that we're using with the document.

Now I've basically turned this entire Figma frame or this entire Figma slide inside of my presentation into a Google Doc. This is all the content from my Google Doc being loaded in, as you'd expect. To actually present this and share that Figma presentation or present that presentation with your Google Doc embed working, what you can do is you can click on the "Export Presentation" button in the top right hand side of the Figma plugin, and then you want to click on the "Upload Web Presentation" button or "Update Web Presentation" button if you've already created a link, as I have. I'm going to click on that now, and this is just going to upload all of the slides from Figma into the Pitchdeck web application that you can then present.

It's just finished; we can see we've got our link here, you can either share the link with a separate password or you can copy this link at the bottom which basically logs into the link automatically. I've just copied that, I'm going to go back to my browser, I'm going to paste that in and hit "Enter", and now the presentation is loaded. You can see that all of the content that we designed in Figma has been added, all the animations are in there as we'd expect, but if we go to our second slide which is where we added the embed, we should now see our Google Doc load up. You can see here that the Google Doc has been included, we can see all the text is selectable. 

This is just a really easy way of getting your Google Doc content directly inside of your presentation that we've exported from Figma, and having that as an embed that you can then share around without having to duplicate all that content back into your Figma file; you can just link directly to your Google Doc embed. I think we'll leave it there for today, I just wanted to give you a really quick Figma tutorial about how to do this if you've been wanting to embed content from a Google Doc into your Figma presentation using the Pitchdeck Figma plugin, this is going to be the easiest way to do it. 

The one thing you might notice as well is that the scaling of the Google Doc embed is going to be different compared to the Figma preview; in the Figma preview window here, as we saw before when we scaled that up, the preview of this content is a little bit different because the size of this window here is actually much smaller. The embed itself basically stays the same size, so it's basically much narrower in this little embed here than it would be if we're viewing it in the browser over here, so that's just something to keep in mind you can see here that the scale doesn't go down; it just kind of clips the side. If you are embedding this and you're viewing it in a larger screen, it's basically going to match the original size of your Google Doc, but because we're viewing it in our little preview window in the Figma plugin here and it's basically cutting down the width, this is giving you a accurate preview of the size of the content, but the width of the content is going to be a little bit look a little bit different when you get it into the browser later, as we just saw.

I hope that's been helpful again if you've been wanting to embed Google Docs content into a Figma presentation or a presentation that you've designed in Figma and then uploaded to the Pitchdeck app I hope this is helpful for you or your team thank you as always for watching and we'll be back soon with more Figma tutorials like this one very soon

---

---
type: tutorial
title: How to embed Google Forms in Figma presentations using Pitchdeck
date: 2022-12-06T00:00:00.000Z
---

# How to embed Google Forms in Figma presentations using Pitchdeck



#### Video Transcript

Today I'm going to be showing you how to embed a Google Form into your Figma presentations using the Pitchdeck presentation Figma plugin.

To get started, if you just go to your Figma file, click on the little "Resources" icon in the header, search for the word "Pitchdeck", and if you click on the results you'll be able to run that Figma plugin by either clicking on the "Run" button here or you can click on the "More options" icon and click on the "Save Figma plugin" option to save it to your plugins list for later. I've already saved mine to my plugins list,; I'm going to go to my canvas, I'm going to right click go down to "Plugins", go down to "Saved plugins" and then I'm going to click on the Pitchdeck option; and that's just going to run the Figma plugin that we just set up.

If you haven't used the Figma plugin before, what it allows you to do is take the Figma frames on your page and it basically loads those in as slides into the Figma plugin. It treats every Figma frame on your page as a slide and then you can basically put layers inside of those frames and those will get treated as the individual layers for each of those slides. You can add animations, links, videos and things like that, but today we're just going to be focusing on adding a Google Form. 

If you want to include a Google Form into your presentation that you can capture information from people either viewing the presentation, or if you send them the link that they look at it themselves, they'll be able to fill in that form and send you some responses from the presentation directly. The way that we can do this is pretty simple; if you just go to the frame or slide that you want to include the form on, you can add a layer. I've just got a simple rectangle layer here and I'm going to embed that by going to the "GIFs/Videos/Embeds" tab over on the right hand side here, and if you click on the "Supported Embeds" link, that's going to take you to the documentation page for the Pitchdeck Figma plugin. You can see all the different supported embed links, and we can see here that we've got one for Google Forms, and that's just an example of what the form link is going to look like. 

I've got a Google Form set up over here, I've just got a simple RSVP form set up in Google Forms, and I basically want to embed this form into my Figma presentation that I'm going to be presenting. The way that we do this is just by going to the "Settings" panel first in the Google Forms tabs, go down to "Responses" and just make sure that the required sign in options are turned off, we don't want it to be limited to our own organization, we want this to be accessible by anyone because we want to accept responses from people viewing the actual Google Form. I'm just going to turn those settings off and then what you can do is you can just go to your link and if you go to the "Send" option, click on "Send" and then click on the link over here, and if you click on the "Link" field and just copy that; just do a copy and then go back to Figma. 

Now you can paste that link from the Google Form into the actual embed field here. I'm going to paste that in, and there we go, you can see that we've got our form added to the layer, and we can actually click on these and input answers and do all that sort of stuff. If you wanted to, you could also make this flush with the frame itself; if we increase the size of this image we could basically just make it the same size as the slide and then that way it would just be purely flush with the actual image. I'm going to refresh and there we go, you can see that we've got the top and the bottom both flush with the Google Form, so the form just scrolls entirely inside of the actual Figma frame.

I'm just going to leave it there, and we're going to upload this to the presentation URL. We can do that by exporting the presentation using the "Export Presentation" button, so I'm going to click on that, and then I've already created the link. Normally this would say "Upload Web Presentation", but I'm just going to update mine, so I'm going to click on "Update Web Presentation", and this is going to automatically upload all of the Figma slides to the Pitchdeck web app. We're going to get a link in a second that we can copy, so I'm going to copy the passwordless version, but you can also copy one with a separate password if you want to keep the link more secure; I'm just going to copy this one for now and paste it into my browser, and just hit "Enter". 

Now you'll see that our presentation is going to load up; we can see all of the content that we brought in from our Figma design has been included, which is looking really good, and then we've basically got our embed slide over here. If we click on slide two, you can see here that we've basically got our Google Form embedded and we can go ahead and fill that out. I can just put my name in there, I can add these radio buttons, and then I can just hit 
"Submit" and that's going to automatically submit the response. That's pretty cool, because it means we can send around a presentation link and we can basically get people who are viewing the link to fill out a survey or fill out a form during their presentation, or at the end of the presentation. You can collect those responses, and you can see here that the response that I just sent directly from the presentation that we uploaded from Figma, that's gone straight from the Google Form directly into our backend. I can see the response from my presentation,so you can send this out and capture a whole bunch of data or responses from people that you want to send a presentation to, and it's just a really easy way to capture information directly from a Google Form that you've included in your presentation from Figma.

We'll leave it there for today, I just wanted to give you a really quick example of how you can embed a Google Form into your Figma presentations that are uploaded to the Pitchdeck web app. This is going to be a really easy way to do that and collect data or collect answers from the people you're sending your Figma presentations to. I hope if you've been wondering how to do this, if you've been wondering how to include forms, or Google Forms specifically, into your Figma presentations then I hope that you give this a try and I hope it's useful for you or your team. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to embed Google Sheets in Figma presentations using Pitchdeck
date: 2022-12-06T00:00:00.000Z
---

# How to embed Google Sheets in Figma presentations using Pitchdeck



#### Video Transcript

Today I'm going to be showing you how to embed a Google Sheet directly into your Figma presentations using the Pitchdeck presentation Figma plugin.

To get started. if you just open up your Figma file, go up to the little "Resources" icon up here and click on that, then search for the term "Pitchdeck" and under the "Plugins" tab, and you'll see Pitchdeck pop up. Just go ahead and click on that, and then to run the Figma plugin you can either just click on the "Run" button here or you can click on the little "More options" icon and click "Save Figma plugin" to save it to your Figma plugins list for later. I've already done that, so I'm going to go to my canvas, right-click anywhere, go down to "Plugins", go down to "Saved plugins" and then click on the Pitchdeck icon; that's just going to run the Figma plugin we set up a second ago.

If you're new to the Figma plugin, the way that it works is it basically takes all of the Figma frames on your page and loads them into the Figma plugin as slides, and then it uses the content layers inside of each frame as the content layers that you can add animations, links and GIFs/videos/embeds to; I'm going to show you what that looks like in a moment. I'm basically going to be adding a Google Sheet embed into this second Figma frame here, and the way I'm going to do that is pretty simple, I'm basically going to define where I want that Google Sheet embed to go. For example, in this case, I've got a little photo layer; you could use a rectangle layer, you could use a image layer, but we're basically going to be swapping out this Figma layer over here with a Google Sheets embed. 

I'll show you what that looks like; if you go to the "GIFs/Videos/Embeds" tab, you'll see this little input box here that we can paste an embed URL in. If you go click on the "Supported Embeds" link, that's basically going to open up the Pitchdeck documentation in your browser and you'll get a bit of a list of all the supported types of embed links you can add, but for today I'm just going to be focusing on embedding a Google Sheets URL into the Figma presentation.

I'm going to jump into Google Sheets, I've just got a really simple spreadsheet that I got from the template section in Google Sheets, and the way we can embed this is by basically going to "File", then going down to "Share", and then clicking on the "Publish to Web" option; I'm going to click on "Publish to Web", and then you basically want to click on this "Publish" button here, and it's going to prompt you to save or publish this selection. I'm going to click "Ok" and now it's published. What this does is it basically makes your Google Sheet visible to other people on the web if you share this link, but it also allows you to copy that Google Sheet link as an embed. Under the "Link" tab, if you just click on this little input field here, and then copy that link by doing a "Command + C", or "Control + C" if you're on Windows, and then jump back into Figma. 

Then all we're going to do is paste that link we just copied from Google Sheets into the Figma plugin, into this little input box here, paste that, and you can see here that it's automatically loaded in our Google Sheet that we just had in our Google Sheets browser over to the Figma plugin, and it's embedded it into our slide. Now we've basically got the whole slide as a Google Sheets embed and we can actually select this text, we can click on things, we can switch tabs and scroll around in the sheet as you'd expect. Now that we've got that embedded into our layer, to export the presentation so that we can actually present it in the browser, you just go ahead and click on the "Export Presentation" button in the top right hand side of the Figma plugin, and then click on the "Upload Web Presentation" or "Update Web Presentation" button at the bottom of the Figma plugin, click on that, and then that will upload the slides. All of the content from your Figma design is going to get uploaded, and you're going to get this link that you can use to present the presentation. 

I'm going to click on this link here, you can also click on this one which is a separate URL and password, if you want the password protected link; I'm just going to grab this bottom link now which will log in automatically. I'm going to grab that, I'm going to paste it into my browser, hit "Enter", and you can see here that the presentation is loaded up. We've got all of our Figma content as we'd expect, and then on the second slide we should have our Google Sheets embed. You can see here we've got our Google Sheets embed, it's all of the content from our Google Sheet, so we've got our "timesheet", all the spreadsheet details down here. We can also click on the tabs, so if we want to load up a different tab in the Google Sheet, we can click on that and scroll through this one. This one's got some charts, if we hover over the charts you can see that we've got all the data in there, just as you would expect. 

There we go; it's basically embedded the entire Google Sheet directly into our presentation that we've exported from Figma. We didn't need to import all this data into our Figma layers, we can just import the data directly from the Google Sheet link as we looked at a moment ago. That's basically it, I'll keep it pretty simple today; I just wanted to show you how to embed the Google Sheets data or Google Sheets file directly into your Figma presentations and then upload them to the Pitchdeck web app so that you can actually present them to anyone you want to show this data to. 

I hope that's helpful if you've been wondering how to import or embed Google Sheets content into your Pitchdeck presentations using the Figma plugin; this is going to be a really easy way to do it, just by pasting that link in. I hope it helps you and your team if you're using spreadsheets or wanting to use Google Sheets in your Figma presentations. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to embed Loom videos in Figma presentations using Pitchdeck
date: 2022-12-06T00:00:00.000Z
---

# How to embed Loom videos in Figma presentations using Pitchdeck



#### Video Transcript

Today I'm going to be showing you how to embed Loom videos into your Figma presentations using the Pitchdeck presentation Figma plugin.

The first thing to do to get started is just go up to the "Resources" icon in your Figma file, then click on that and search for the word "Pitchdeck", click on the Pitchdeck result, and to run the Figma plugin you can just click on the "Run" button here or you can click on this three dots "More options" icon and click "Save Figma plugin" and that will automatically add it to your Saved plugins list. I've already done that, so I'm just going to right-click anywhere on my page, go down to "Plugins", go down to "Saved plugins", and then just click on the "Pitchdeck Presentation Studio" Figma plugin link; that's just going to run the Figma plugin we just set up a second ago.

If you haven't used the Figma plugin before, the way it works is it basically looks at your Figma page and it treats every Figma frame as a different slide. I've got a bunch of different frames on the page all set to 1920 by 1080 pixels, and inside of those Figma frames I've got a few different Figma layers set up. We've basically got a few different layers; we've got text layers, image layers, all that sort of stuff, and then basically it treats each of those Figma layers as a layer in your in your slides; we can add animations to these slides, we can do all sorts of things in there. I'm just going to show you today how to add a Loom embed into any of these Figma slide layers, and it's really easy; we're just going to go to the Figma slide that we want to add the Loom embed to, and you basically want to have a layer that you want to insert that Loom video into, where you want to embed it.

I want to embed the Loom video into this Figma frame in this layer, and all we need to do is click on the "GIFs/Videos/Embeds" tab over on the right hand side of the Figma plugin, and you'll see that it will basically show you some input fields. You've got some input fields here that you can paste a link into, and if you click on this "Supported Embeds" link, it takes you to the Pitchdeck documentation page and just gives you a bit of an overview of some example embed links that it supports. Today we're going to be embedding a Loom video, and all we need to do is basically copy a Loom video link into the Figma plugin. I've got a Loom video over here that has a share link, someone has shared this; if you've got a Loom video that you've created or someone sent to you, you can grab that share link from Loom, copy that to your clipboard and then go back to Figma and paste that Loom embed link or Loom share link into the input field just like this.

We're just going to paste that in, and you can see that it automatically loads up the Loom embed player. If we were to click on that play button, that's going to play, and you can skip through that as you'd expect. That's basically a Loom embed that's live, and you can actually use that however you normally would use a Loom video in the browser. That's all you need to do you, just paste in the Loom link into your Figma embed input here, and then to export the presentation to actually present it, all you need to do is click on the "Export Presentation" button over here. I'm going to click on that and I've already set up the link previously, but if you're doing it for the first time, you'll see an "Upload" button. Now I'm just going to click on the "Update" button, so I'm going to click on that "Update" button and that's going to export the Figma slides to a special URL that I can use. It's password protected by default; you can either send a URL and a password separately, or if you just want it to load up straight away, you can copy this passwordless URL and that will automatically log in.

I'm going to copy that one, I'm going to go back to my browser, paste in that link and load it up. Once the presentation loadsm you'll see here that we've got our Figma slides, and if I go to the second slide you'll be able to see that we've got our Loom embed loading up. Again, I can click on that play button in the Loom embed, and you can see now I can skip through this Loom video as you'd expect. That's just a really simple way of embedding a Loom video or Loom embed into your Figma presentations that you can then present using the Pitchdeck presentation Figma plugin. You can add as many Loom videos as you want, if you want to have different ones on different slides, it's just a matter of copying and pasting your Loom share embeds or Loom share links into the Pitchdeck Figma plugin's input fields just over here, and that'll basically load up any Loom presentation or any Loom video that you want to include inside of your presentation Figma frames.

I'll leave it there for today, I just wanted to keep it really simple just to show you how to embed those Loom links into your Figma presentation layers using the Pitchdeck Figma plugin; that's going to be a really easy way to automatically include Loom videos into those Figma presentations. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to embed Google Slides in Figma presentations using Pitchdeck
date: 2022-12-06T00:00:00.000Z
---

# How to embed Google Slides in Figma presentations using Pitchdeck



#### Video Transcript

Today I'm going to be showing you how to embed Google Slides directly into your Figma presentations using the Pitchdeck Figma plugin.

To get started, if you just go to your Figma file, click on the little "Resources" icon at the top and just search for the word "Pitchdeck", and if you click on the Pitchdeck result you can run the Figma plugin by either clicking on this "Run" button, or you can click on this little three dots "More options" icon and click on "Save Figma plugin"; that will automatically save it to your Figma plugins list for later. I've already done that, so I'm going to go to my canvas, right-click anywhere, go down to "Plugins", go down to "Saved plugins", then click on the Pitchdeck icon, and that's going to run the Figma plugin we just set up a second ago.

If you're new to the Figma plugin, the way it works is you can basically add frames to your Figma page, and each of those frames will get treated as a slide in your slide deck using the Pitchdeck Figma plugin. I'm just setting these at 1920 by 1080 pixels, and that's going to give you a full HD slide when you go to use them. Inside each of these Figma frames is just basically a bunch of content layers; you can see here that I've got a bunch of content layers inside of this Figma frame, and those can be used for adding animations, links or embeds, as we'll see in a second.

To add a Google slide deck or Google Slides into your presentation, which is a little bit meta, a presentation within a presentation, which you may want to do. You can just basically create a Figma frame with a Figma layer, and in this case I've got a rectangle layer; and I want to replace or embed my Google Slides presentation into that rectangle layer. I'll show you what I mean by that; if we click on the "GIFs/Videos/Embeds" tab over here, you can see here that we've got a couple of options and this little input field. If you click on the "Supported Embeds" link, that'll basically take you to the Pitchdeck documentation, and you can see a list of all different embed URLs that are supported in the Figma plugin. Today we're just going to be focusing on adding a Google Slides URL to your Figma presentation, and the way that we do that is basically by going to a Google Slides document that you've created; in this case, I'm just using one of the templates.

The way that we can use it in our presentation in Figma is by going to "File" in your Google Sheets file, click on "File, then go down to "Share", and now you have to just click on this "Publish to Web" option. If you click "Publish to Web", then you've got a couple of different options here; you can tell it to start the slideshow as soon as the player loads, restart after the last slide, you can change how frequently the slide automatically transitions, you can change all these different settings. Then basically you just want to click on this "Publish" button, so I'm going to click "Publish" now, and it's going to ask you "Are you sure you want to publish this selection?", and I'm going to say "Ok". 

Now this is published to the web, what we can do is basically grab the publish to web link that it generates down here; this is a special link that allows you to embed Google presentations. I'm going to click on that, then I'm just going to copy it by doing a "Command + C", or "Control + C" on Windows, and then go back to my Figma file. Then in the little input field here under my "Embeds" tab, I'm just going to paste that in, and you can see here that it's automatically embedded my Google Slides presentation into my Figma presentation. It's a little bit meta, but you can see all the content is in here, you can see that we've got our little options; we can do things like turn on the laser pointer if we wanted to do that, all these kinds of neat features that are offered by Google Slides.

We want to present this to our audience, along with all of our other slides that we've designed in Figma. The way that we can do that is basically by clicking on the "Export Presentation" button; I'm going to click on that, and then what you can do is click on the "Update Web Presentation", yours might say "Upload Web Presentation" if it's the first time you're creating a presentation. I'm going to click that button now, and this is going to automatically upload all of the content from our slide deck that we've designed in Figma, including the embed of the Google Slides document that we've just added, and then it's going to give you a link that you can use.

I'm just going to copy and paste the passwordless URL; I'm going to grab that link, pop it into my browser, hit "Enter", and there we go; you can see that we've got our Figma slides added as we expect, and then we've also got our second slide here which contains our Google Slides embed, and this allows us to basically view a Google Slides document inside of our presentation that we've uploaded from Figma. We've got all of our Figma slides, but on this particular slide, we've also got our embedded Google Slides document. That allows us to go through the document inside of our presentation, so it's basically a Google Slides presentation within a Figam presentation that you can load up and automatically embed.

That's basically it, I'll leave it there. I hope this has been helpful if you've been wondering how to embed Google Slides into your Figma presentations that are exported to the Pitchdeck web application, this is a really simple way of doing it. You just follow the instructions that we just went through to make that Google Slides document public by publishing it to the web, and bringing in that Google Slides embed link directly into your Figma file; then you can upload it to the Pitchdeck web application. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to embed Lottie animations in Figma presentations using Pitchdeck
date: 2022-12-06T00:00:00.000Z
---

# How to embed Lottie animations in Figma presentations using Pitchdeck



#### Video Transcript

Today I'm going to be showing you how to embed Lottie animations into your presentations in Figma using the Pitchdeck presentation plugin.

The first thing we need to do is just go into your Figma file, go up to the top here where it says the "Resources" icon, then just search for the word "Pitchdeck", and you'll see Pitchdeck pop up; Just go ahead and click on that, and you'll be able to run the Figma plugin by either clicking on this "Run"
 button here, or you can click on these little three icons where it says "More options" and hit "Save to plugins". I've already saved it to my Figma plugins, so I'm just going to right-click on my canvas, go down to "Plugins", go down to "Saved plugins" and then I'm just going to click on the Pitchdeck Figma plugin that we just set up. This is going to run the Figma plugin that we just set up a second ago, and you can see here that I've already got a little simple design for my presentation setup.
 
 If you haven't used the Figma plugin before, the way it works is it treats every Figma frame on the page as a slide. If you create a new Figma file and then start adding these frames. I've just set them to 1920 by 1080 pixels, that's full HD resolution, and you can just populate those frames with Figma content layers. You can see here I've got some content layers, text layers, image layers, things like that; and these will all pop up in your presentation here. I'm just going to go through a few of these Figma layers and add Lottie file animations to them. The way we can do that is by clicking on this little tab up here which is says "GIFs/Videos/Embedds"; I'm going to click on that, and you can see here that the content changes from animations to adding some input fields that we can paste links into. You can see here that there's a couple built in; there's GIPHY and Pixabay integrations built in, but if you click on this little link here, it's going to take you to the docs page of the Figma plugin site, and you'll get a list of all the supported embeds that you can actually add into these input fields.
 
 Today we're going to be focusing on Lottie files; Lottie files, if you haven't used them before are a special type of animation format for the web. You can go to lottiefiles.com and you can browse a bunch of preset animations that you can use in your projects. For example, if we wanted to use this animation, all we need to do is click on the animation, and make sure you're signed into your LottieFiles account now, it's free to set up an account; and then what you're going to be looking for is this "Lottie animation URL", down here where it's got this little URL, you want to click on the little "Copy" icon and copy that to your clipboard.
 
 Then if you go back to your Figma file, and find the Figma layer that you want to add a Lottie animation to; in this case, I want to add it to my image here. I'm just going to paste in that Lottie animation link and that will automatically load in the Lottie animation to our Figma presentation. You can see here that we've pasted that Lottie link into the embed field and that's automatically loading up the Lottie animation into our Figma slides. We can do that again, we can add another one. If we want to add another Lottie animation, we can just click on any of these again, click on the "Copy" link where it says "Lottie animation URL" and copy that Lottie link back into Figma. If we want to add that to another Figma frame, just go to the other Figma frame and then click on the input that you want to add it to, paste that in there, and you'll see again this will automatically load up the Lottie animation.
 
 Now that we've got that in there, we want to export this to a presentable slide URL, and the way we do that is just by clicking on the "Export Presentation" button in the Figma plugin, click on that, and I've already created a presentation; if you haven't created one yet, it'll say "Upload Presentation". I'm just going to update my link, so I'm going to click on the "Update Web Presentation" button, and this is automatically going to export the slides to a special link that we can now use to present this presentation. What you can do is you can either get the link and password, or just get a passwordless link; I'm just going to click on that and copy it and in my browser, I'm just going to paste that link, hit "Enter", and this is going to load up the presentation that we just uploaded from Figma.
 
 You can see here we've got our first Figma slide with the normal image, but if we go to the next slide you can see here that the Lottie animation that we added to our Figma file has automatically been embedded into that Figma frame's image. Then if we go to the next one, you'll see again our other Lottie animation that we added to the presentation has also been added here; this this is a really nice way of adding more advanced animations into your presentations that have been exported from Figma. You can see here it's just those those two layers, the rest are all the same; they're just normal images from the Figma layers, but again if we go back to the other layers we can see here that our Lottie animations have been embedded; same with this one as well.
 
 That's basically it; you can also upload your own Lottie animations, so there's a way to drop your Lottie animations that you've exported from After Effects or created in a different tool, you can also just upload those JSON files. That's all the Lottie files are, they're just basically a JSON file, and if you upload the JSON file to either your own web hosting link, or own server, or Lottie files itself actually has a way where you can do this. If you sign into your Lottie files account and just look for a place to upload the Lottie file, the JSON file, you'll actually be able to get your own lottiefiles.com link, so you can actually upload your own Lottie animation files if you know how to do that. That's just one other thing I wanted to call out before we wrap up the Figma tutorial.
 
I'll leave it there for today, I just want to keep it really simple to show you how to embed Lottie animations into your Figma slides if you're designing your slide decks in Figma and using the Pitchdeck Figma plugin, this is going to be a really easy way to include those Lottie animations into your Figma presentations that you can present with the Pitchdeck presentation web app. Thank you as always for watching, and we'll be back with more Figma tutorials just like this one very soon.

---

---
type: tutorial
title: How to embed SoundCloud audio in Figma presentations using Pitchdeck
date: 2022-12-06T00:00:00.000Z
---

# How to embed SoundCloud audio in Figma presentations using Pitchdeck



#### Video Transcript

Today I'm going to be showing you how to embed audio or songs from SoundCloud directly into your presentations in Figma using the Pitchdeck presentation plugin.

To get started, if you just open up your Figma file, go up to the top here where it says "Resources", click on that icon, and if you search for "Pitchdeck", under the "Plugins" tab if you click on the Pitchdeck Figma plugin, you'll be able to run the Figma plugin by either clicking on this "Run" button here, or you can click on the "More options" icon here and click "Save to Figma plugins" and that's just going to add it to your Figma plugins list to use later. I've already added it to my Figma plugins list, so I'm just going to go to my canvas, I'm going to right-click anywhere, go down to "Plugins", go down to "Saved plugins", and then just click on the Pitchdeck icon that we just installed a second ago. Once the Figma plugin loads you'll see that we've got a bunch of slides here.

If you haven't used the Figma plugin before, the way it works is it basically loads in any Figma frames that are on your page and treats those as slides. I've just got a bunch of Figma frames set to 1920 by 1080 pixels, and each of those has some Figma content layers inside them. We've got images, we've got text, and we can then add animations to those, we can add links to those, video embeds, and other embeds like that. Today we're just going to be focusing on adding a SoundCloud embed. This is going to allow us to embed an audio player for any tracks or any audio that you've got on SoundCloud; I'm going to show you how to do that now.

I've got this "Embed" Figma slide that I've got set up, and basically the way it's going to work is we're going to embed the SoundCloud player directly into this Figma layer here. I'm going to replace this Figma image with a SoundCloud player embed; to do that, you just have to switch into the "GIFs/Videos/Embeds" tab on the right hand side here, and that's going to switch this context here to allow you to paste in an embed link. You can see what those look like by clicking on the "Supported Embeds" link here, and that's going to take you to the Pitchdeck documentation page, and you'll get some examples of the different kinds of embeds that you can add to your presentation slides, but as I said, today we're just going to be focusing on SoundCloud.

All you need to do is go to soundcloud.com, and you'll be able to search or browse for any music. If you want to search for music, or they have podcasts, they have all different kinds of audio; you can basically go there and find a track that you like, or some audio that you like that you want to then embed into your Figma presentation. I've just got a SoundCloud song that I'm going to embed into the Figma presentation, and once you've found the track that you like just make sure you're on the actual track page, not a playlist page; I'm on a single track page. I'm going to grab the SoundCloud URL, you can either grab that from the web browser header, or you can click on the "Copy link" icon down here; you can copy that to your clipboard, and then if you go back to Figma you can then paste that link into this input field on the Figma layer that you want to embed the SoundCloud player into.

I'm just going to go ahead and paste that now, and you can see here that it immediately loads up the SoundCloud embed into the Figma layer; you could just see that it started playing the track immediately, and that means that as soon as you go from one side to the next, it's going to start playing that audio as you'd expect. Now that we've got that embedded, what I want to do is basically export this Figma presentation to present it in the web browser; and we can do that by clicking on the "Export Presentation" button in the top right hand side of the Figma plugin. I'm going to click that, and then if you haven't uploaded a presentation yet you'll see a button that says "Upload Web Presentation", but I've already created a previous presentation link, so I'm going to update mine by clicking on the "Update Web Presentation" button. I'm going to click that now, and that's just going to export all of our slides that we've designed in Figma, including this new SoundCloud embed that we've just added to our second Figma slide here.

It's just finished updating that link, and you'll get two different options; you can either share a link with a separate password, or you can use this bottom link down here which is a passwordless URL, and that will automatically load up in the browser. I'm just going to grab that one, I'm going to copy it to my clipboard, I'm going to paste that into my web browser, hit "Enter" and this is going to load up the presentation that we just uploaded from Figma a second ago. You can see we've got our presentation slides, these are being loaded in as we'd expect from our Figma designs. Then if we go to slide two, we're going to get that auto playing SoundCloud embed pop-up. I'm just going to click on that now; you can see that our SoundCloud embed has been added to our Figma slides. We can present this in the browser, we can interact with the player, and we can even do things like open up the link in a new tab if we want to open that in the SoundCloud player, and do all that sort of stuff. 

That's basically what it looks like; you can obviously resize this depending on your screen size and the embed will automatically scale, that'll just keep getting resized as you scale the browser. This is going to work on different sized screens and it's still going to look really good. I've just got mine as a square, I think that's probably the best format for the embed player; you can make it a landscape or portrait, but you might get a little bit of cropping on the background image from SoundCloud. I'm going to leave it there for today, I just want to do a really simple overview of how to specifically add SoundCloud embeds. If you've got some SoundCloud hosted on the platform, some audio tracks, some podcasts, anything that you've got hosted on SoundCloud or if you want to embed another artist's SoundCloud player into your Figma presentation, you can definitely do that, as I said, by just grabbing that SoundCloud URL and simply pasting it into the Figma embed input in the Pitchdeck Figma plugin.

I think that's going to leave it there for today; I hope you found that useful if you're wondering how to embed SoundCloud audio into Figma presentations, this is a really quick way of doing it using the Pitchdeck Figma plugin. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to embed Vimeo videos in Figma presentations using Pitchdeck
date: 2022-12-06T00:00:00.000Z
---

# How to embed Vimeo videos in Figma presentations using Pitchdeck



#### Video Transcript

Today I'm going to be showing you how to embed Vimeo videos into your Figma presentations using the Pitchdeck Figma plugin.

To get started, if you just go to your Figma file, click on the little "Resources" icon at the top here, search for the word "Pitchdeck", and if you click on the "Plugins" tab, you'll see the Pitchdeck Figma plugin pop up. To run that Figma plugin, all you need to do is click on either the "Run" button here, or you can click on this little "More options" icon and then click on "Save Figma plugin" and that'll save it to your Figma plugins list for later. I've already done that second step, so I'm going to right-click on my canvas, go down to "Plugins", go down to "Saved plugins", and then click on the Pitchdeck option; that's just going to run the Figma plugin we set up a second ago.

If you're new to the Figma plugin, the way that it works is you can basically create multiple Figam frames on your Figma page and those will get treated as slides in your presentation over here. Then you can add Figma content layers such as text or images, and those will also get treated as individual layers in the Figma plugin that you can add animations, links and embeds to. I'm just using 1920 by 1080 pixel full HD slides, but you can use any size that you want. 

To get started all we need to do is find the Figma layer or find the Figma slide that we want to add our video to. In this case, I'm just going to add it to this first Figma slide here; it's the "10 Principles of Good Design" slide, and instead of having this static image over here, I basically want to use a video of the "Dieter Rams" documentary trailer. If you click on the little icon over here, or the little tab that says "GIFs/Videos/Embeds", if you click on that, that'll basically change the context to allow you to paste in embed links. To see a list of the supported embed links you can go to the "Supported Embeds" link here, and that will just take you to this page over here which is the Pitchdeck documentation, and it'll give you a bit of a list of some of the supported URLs you can use; but for today, as I mentioned, we're just going to be focusing on how to embed videos from the Vimeo platform, and embed those into your Figma slides that you can then present after you've uploaded them from Figma. 

I've got a little trailer here on Vimeo, and this is just the trailer for the "Dieter Rams" documentary. All you need to do is find the video on Vimeo that you want to embed into your Figma presentation, then copy the link from your browser and paste that into your Figma plugin. If we go to our Dieter Rams slide image here and just paste that into the embed field, we can see there that the video is being embedded, it's automatically playing, we've got the controls turned on as well, so we can actually flick through those if we want to, change where the video plays at. You can turn that off if you want to hide them, so you can see there that we hid those controls, you get really clean playback without the controls ever popping up, but in my case I'm just going to leave the controls on to make it a bit easier to control once we upload the presentation from Figma.

Now that we've got our Vimeo from video embedded to our Figma layer, all we need to do to actually present it in the browser is click on the "Export Presentation" button in the top right hand side of the Figma plugin, go down to "Upload Web Presentation", or "Update Web Presentation" in this case, because I've already created this link before. I'm just going to hit "Update Web Presentation" now, and this will basically automatically upload all of our slides and images from Figma, including the Vimeo embed, up to the Pitchdeck presentation web app. 

It's going to give you a link that you can use with a password, or if you don't want to use the password, you can just use this passwordless URL here. I'm going to copy that, I'm going to go back to my browser, I'm just going to paste that in, and if we hit "Enter", that will load up our presentation. There we go, that's what it looks like; it's looking really nice in our presentation, and we do have the overlapping text which works some of the time, in this case it's probably not a good idea because there's so much text inside of the trailer as well, but that's more of this design decision. All of the other slides are showing up as expected; these are just static slides, they just have Figma images and Figma text content that's being animated, but as we know our first slide has that Vimeo video embed. 

That's basically what it looks like; we can switch back into Figma now and close this off, and that's it. All you need to do is paste in your Vimeo video link into this little embed input field in the Figma plugin, and you'll automatically be able to include any Vimeo video that you want and have that automatically embedded into your Figma presentations that you upload to the Pitchdeck presentation app. I hope that's been helpful if you've been wondering how to embed your videos from Vimeo into your presentations from Figma, this is a really quick way of doing it. As always, thank you for watching and we'll be back soon with more Figma tutorials like this very soon.

---

---
type: tutorial
title: How to embed Spotify audio in Figma presentations using Pitchdeck
date: 2022-12-06T00:00:00.000Z
---

# How to embed Spotify audio in Figma presentations using Pitchdeck



#### Video Transcript

Today I'm going to be showing you how to embed audio from Spotify directly into your Figma presentations using the Pitchdeck presentation Figma plugin.

To get started, if you just go to your Figma file, click on the little "Resources" icon at the top here, search for "Pitchdeck", click on the "Plugins" tab, and you'll see the Pitchdeck Figma plugin pop up. If you click on that result, you can run the Figma plugin by either clicking on the "Run" button here, or you can click on the three dots "More options" icon, then click on the "Save Figma plugin" option to save it for later. I've already done that, so I'm going to go to my canvas, I'm going to right-click anywhere, go down to "Plugins", go down to "Saved plugins", then go down to the Pitchdeck option and click on that; and this is going to run the Figma plugin that we just set up a second ago.

If you're new to the Figma plugin, the way that it works is it basically takes all of the Figma frames that are on your current Figma page and it treats each of those Figma frames as a slide in your presentation, then you've got content layers inside; you've got text layers, image layers, and these basically make up the individual Figma layers that you can apply animations, links and embeds to. Today we're just going to be focusing on embedding Spotify content, embedding audio from Spotify; that includes playlists, podcasts, or audio tracks. The way we do this is just by basically adding a couple of placeholder layers in Figma. For this example, I've got a couple of rectangle layers; I've got a rectangle layer here, and also an image layer. If we click on the "GIFs/Videos/Embeds" tab in the Figma plugin over here, that basically changes these options to give us an input field that we can paste and embed link into; all we need to do is basically click on this "Supported Embeds" link and that's going to open up the Pitchdeck documentation and give you some examples of what those URLs can look like.

As I said, today we're just going to be focusing on the Spotify embeds, and as you can see you can embed tracks, playlists or podcast episodes. I've got a couple ready to go over here; we've got this one, and this one, and this is an example of a playlist. If you just copy the Spotify playlist link from your browser, or if you've copied it from the "Share" function, you can just copy that to your clipboard, go back to Figma, and then if you find the Figma layer that you want to paste that embed into, then just paste it into the embed field. I'm going to do that now, and you'll see here that the layer automatically gets swapped out to the Spotify embed; in this case we've pasted in a Spotify playlist, and that means we can basically have an interactive playlist with a bunch of different songs that you can change between. This is totally interactive, you can scroll around, you can change songs, and do everything you'd expect with the Spotify player, and if we again go back to our Spotify links, this time I'm just going to do a single song. I'm just going to copy another Spotify song URL from the browser, jump back into Figma, I'll get rid of the Spotify playlist for now, and instead I'm just going to add a single Spotify track onto this rectangle layer at the bottom. I'm going to paste my Spotify embed link into that Figma rectangle layer and that's just loaded in a Spotify player that we can now use interactively in Figma. 

I can click on the play button, and if we want to we can also resize that Spotify player a little bit; if we make this Figma rectangle layer a little bit larger, or if we want to move it around, we can definitely do that as well. We can extend that out a little bit, we can make that kind of go a bit more close to the edge, and then if you refresh the slides just by clicking on the little "Refresh" icon, you can see that kind of stretched out the player a little bit more as well. You could even make that go full width if you wanted to; we can make that full width in Figma, and that'll extend out. It just really depends on the design of your slides in Figma.

I'm going to leave that there, and then to actually export this Figma presentation to present in the browser, all we need to do is basically click on this "Export Presentation" button in the top right hand side. I'm going to click on that now, and if you're uploading it for the first time, you'll see a button that says "Upload Web Presentation", I've already created a link, so I'm just going to update mine by clicking on the "Update Web Presentation" button; I'm going to click that now, that's going to upload and export the slides that you've designed in Figma up to the Pitchdeck presentation web app, and it's going to give you a link to that app. You can either clicking on this "Copy" button here; this is going to copy a URL with a password that protects the link, or you can use this bottom link here, which just signs in automatically without you needing a password. 

Just to make it easy, I'm going to grab that one, I'm going to go back to my browser and I'm just going to paste that in, hit "Enter", and this is going to load up our presentation as we've designed it in Figma. You can actually present this in the browser using all of the content that you uploaded from Figma, and if we go to our second Figma frame we'll see our Spotify embed player automatically included. This has been brought in based on the link that we included in Figma; if you click on "Play", that's playing as we'd expect as well. If you have a Spotify account that's actually signed in and is a proper account paid account, you'll be able to listen to the full track; this is currently just a preview, that's why it's showing up that message but you can embed that full track if you've got your Spotify account signed in while you're presenting. That's basically what it looks like; as you'd expect, the player will automatically scale based on the size of the window. If the window resizes, the player is also going to resize; it's totally responsive to the presentation window that the Figma plugin web app is using.

That's pretty much it for today; I just wanted to cover this specific use case of embedding audio or songs from Spotify into your presentations that you create in Figma, and then upload to the Pitchdeck Presentation Studio web app that you can then present and play some of that audio in your presentation. If you're doing a presentation that involves some music or you just want to add a little bit of extra richness or audio into your Figma presentations, than embedding a Spotify song, or embedding a Spotify playlist, or even a Spotify podcast preview might be something that you'd be interested in adding. I hope that's been helpful if you've been wondering how to add audio from Spotify into your Figma presentations, this is a really quick way of doing it just using the embed function in the Pitchdeck Figma plugin and then presenting it with the web app. Thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to embed YouTube videos in Figma presentations using Pitchdeck
date: 2022-12-06T00:00:00.000Z
---

# How to embed YouTube videos in Figma presentations using Pitchdeck



#### Video Transcript

Today I'm going to be showing you how to embed YouTube videos into your Figma presentations using the Pitchdeck presentation Figma plugin.

To get started you just have to go to your Figma file, click on the "Resources" icon at the top here and then search for "Pitchdeck", and under the "Plugins" tab you'll see Pitchdeck pop up. Just go ahead and click on that, and then you can run the Figma plugin by either clicking on the "Run" button here or you can click on this little "More options" icon here and click on "Save Figma plugin" to keep it in your Saved plugins list for later.

I've already added it to my Figma plugins list, so I'm going to right-click on my canvas, I'm going to go down to "Plugins", I'm going to go down to "Saved plugins", then click on the "Pitchdeck" option, and that's just going to run the Figma plugin that we just saved a second ago.

If you haven't used the Figma plugin before, the way that it works is you basically create frames on your page and each of those Figma frames will get treated as a slide in your presentation. I'm just using 1920x1080 frames, and then I'm just adding some text layers and image layers directly inside those frames, and those get used for animations links and embeds.

Today I'm just going to be focusing on how to add YouTube embeds into your Figma presentations that you can then present using the Pitchdeck app, and I'll show you how to do that now. All you need to do is click on the "GIFs/Videos/Embeds" tab in the right hand side on the right hand of the Figma plugin, and you just need to find the layer that you want to replace the static image with your playable YouTube video embed. In this case I'm just going to use this layer here, and if you click on the "Supported Embeds" link, that'll just take you to the documentation page for Pitchdeck and you can see some examples of the different kinds of embed that it supports; but for today I'm just going to be focused on YouTube videos.

You can embed either YouTube shorts or just regular YouTube videos, today I'm just going to be doing a regular YouTube video, but if you want to embed a YouTube short you can do that as well. I'm just going to grab a trailer for the Dieter Rams documentary and I'm going to include that in my presentation by copying the URL, so I'm just going to grab the link straight from the browser, and I'm going to grab that and go back to Figma, and inside of this little input field I'm just going to paste that, and you'll see that it starts playing.

I've just toggled the controls on just so I can pause it for a moment, but you can basically leave this to auto play and loop, and if you don't want to have the controls, so you just want to have them fade away, you can turn that off as well. I'm just going to leave them on for the time being, and now that we've got our video set up all we need to do to actually present this in our presentation is to click on the "Export Presentation" button and then click on the "Upload Web Presentation", or in my case I'm going to click "Update Web Presentation" because I've already created this Pitchdeck URL. I'm going to click "Update Web Presentation", that's just going to upload all of the slides that I've designed in Figma up to the Pitchdeck application and it's going to include our YouTube embed as we'll see in a second.

You can either copy the URL with a password if you want to send those separately, or you can copy the passwordless URL, which just lets you load up the link without needing to enter a password; I'm going to grab that one, I'm going to go back to my browser, I'm going to paste in the URL and hit enter. You can see we've got our YouTube video playing in the presentation, as we expect; you can skip through this if you want, because I've got the controls turned on, you can just bounce around for the video. Because we've got our text overlaying on top of the video, that's also sitting on top; we've got two different text layers there, and obviously the YouTube video that just plays underneath it as you would expect.

Now we can switch back to Figma, and that's basically it. I just want to keep it really short today just to show you an example of embedding a YouTube video directly into your slides using the Pitchdeck Figma plugin and being able to present those slides with the playable YouTube video directly from your Figma export when you upload it to the Pitchdeck web application. I hope that's helpful if you've been wanting to know how to embed YouTube videos into your presentations using Figma, this is a really quick and easy way of doing that to present them. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to localize HTML email designs with Markdown text formatting in Figma using Emailify
date: 2022-11-22T00:00:00.000Z
---

# How to localize HTML email designs with Markdown text formatting in Figma using Emailify



#### Video Transcript

Today I'm going to be showing you how to easily translate your email designs using markdown formatting in an Excel spreadsheet via the Emailify Figma plugin.

To get started all we need to do is set up the Emailify Figma plugin by going to the "Resources" icon in your Figma toolbar and click on that, and if you search for the word "Emailify" and click on the "Plugins" tab and you should see Emailify pop up. If you click on that and then either click on the "Run" button here or you can click on this "More options" icon to save the plugin to your Figma plugins list for later, that will allow you to run it from your Figma file. I've already saved it to my Figma plugins list, so I'm going to click on the canvas, right click, go down to "Plugins", go down to "Saved plugins" and then I'm just going to click on the 
"Emailify" option, and that's going to run the Figma plugin that we just set up a second ago.

I've already got an email design set up, and I'm not going to be going through too much of the design process in this Figma tutorial; if you are new to the Figma plugin and are wondering how to design these emails using Emailify, there's a bunch of other YouTube tutorials on our channel, just search for the Emailify playlist and you'll be able to find a bunch of those. Basically, you can add these components via the tabs up here and customize the design and content here. I've just created a really simple one for today because we're going to localize this content into different languages with markdown formatting, so that we can actually format the text.

To get started, I'm just going to create a few pieces of formatting in this existing content, just so we can see what it looks like when we export it in a second. I'm just going to change a couple of things to bold, maybe we'll do some italics, and the other thing we can also do is links. If we want to add some links into here, if we wanted to highlight this content and create a link, you just highlight it, go up to the "link" icon in the top click on "Create Link" and then you can basically just add a link in there. I'm just going to add a link and that's going to create the link in here. Now that we've got a few different things set up in the content, all we need to do is go back to the Figma plugin, click on the "Localize" button and then we can select the "Excel" option which is selected by default, and select the email that you want to export. 

This is the default way of exporting it and you just have to include what locales you want to translate this into; for example, we could do French, we could do German, we could do Australian, not that it's really different, but we'll do that anyway. Then this time we're also going to toggle a brand new option called 
"Add Markdown", and what this option does if we enable it is if you click on that link, it'll take you to the documentation page for Emailify and just gives you a bit of an explanation about what this is going to do. I'll go through this with you once we've exported it, so let's go ahead and click on the "Export XLSX" button; I'm going to click on that here, and that's just going to go ahead and export all of our content from this email into a spreadsheet.

Once it saves, you just double click on the zip file and you'll get an Excel file; we can open this up in Excel just by double clicking it. You can use another tool if you want to use Google Docs or a different spreadsheet tool, you can definitely use that as well, but for today we're just going to be using Microsoft Excel. We can see here that we've got our content that's been exported; we've got our Figma text, which is all the text that's been exported from the content, and you'll notice that we've got some formatting included in the spreadsheet. What this means is it's basically using markdown, which is a certain type of text formatting syntax that allows you to have things like double asterisks or underscores to specify if a text is bold or if the text is italic, these are the different syntaxes you can use to specify that in markdown. 

Now that we've got the markdown option enabled, this is also getting exported into our content. For example we can see here that the link that we added in Figma is now being rendered as a markdown link in the spreadsheet. In between these square brackets you can see what the text for the link is, and immediately next to it in the regular brackets you can see what the URL is, or the website link is; that means we can basically now customize these things per locale. If we wanted to make a copy of these for the French one, let's say we wanted to actually change this in the French translation and we just open that up; we can make that link different, so we can do "/french" for the link, maybe we want to actually remove the bold formatting for this particular part, and we want to bold a different part. Maybe we want to bolt the word "Japan", so we can add the markdown syntax for the bold text around "Japan" instead.

We can do this for all of the different locales; for example, if we want to remove the bold heading for this translation, we can basically just change that, let's make it italics instead. We can also change just normal text as well, so if we wanted to remove the "Inc" from "Jiro Sushi", we can remove that, and let's do that for the Australian one. Any fields that you leave blank it will automatically just keep whatever's in the original design, they won't get overridden, but any that you populate per language will basically get overwritten from the other original text.

The other quick thing to note is as well, if you've already set up a preheader and subject line in your Emailify options, you can do that via the either the settings, if you click on the email you can put in some different settings, or if you go to the export, you can add a subject line and preheader in the export settings. If you were to click on "Export HTML" you can actually add this subject line and preheader here. I haven't done that yet, so that's why these fields are blank, but if you did that you would see the subject line and preheader here and you can actually create different languages for those subject lines and preheaders too. If we, for example, did a French subject line and a French preheader, we'll see in a second that this will also get imported into the Figma designs. I'm just going to keep it really simple for now, and I'm just going to save that.

I'm going to go back into my Figma design and click on the "Localize" button once again, and because I've now translated or added some translations to the Excel file I'm going to make sure that the "Import Markdown Formatting" toggle is set, because we exported the Excel spreadsheet using the markdown option, you definitely want to have the "Import Markdown Formatting" enabled as well, otherwise it's just going to import the text with the markdown formatting included, so it's going to include the asterisks and underlines and things like that instead of turning them into their markdown formatting visually. Let's do that now; all we need to do is drag in the Excel file into this little drop zone area with our "Import Markdown Formatting" toggling enabled, just let go of that, and you can see here that it's found three locales in the email that we want to import the content from.

I'm just going to click on the "Localize Selected Frames" button and we'll see that it's created a brand new page in our Figma file called "Email Translations" with a little time stamp. You can see here that we've got a copy of our original Figma frame, this is a copy of the frame that we originally exported, so that's just a reference left as is. Then it's created a locale for every translation that we added as well, we've got our Australian, German, French; and the cool thing is, as we saw before, we've actually changed some of this formatting. Instead of having this text here bold, we've moved that bold text and removed it from the "including" word and put it on "Japan". You'll remember that we also changed the hyperlink; you can see if I hover over this that the hyperlink has actually been modified to be "/french", so that's been changed. Then if we go over to this one, you'll remember that we changed the bold text to italics; that automatically made the text italic, and down here you'll remember that we removed the suffix from this little footer heading, so you can see over here it's got the "Inc" at the end, and this one has nothing at the end.

That's what that looks like there, and this is just a really easy way of using markdown to translate these emails with formatting. You can easily change the hyperlinks, you can easily change the formatting per translation, or you can just do it for the original translation as well. The other quick thing I'm just going to show you is how we also imported the subject line and preheader, so if you go to the "Export HTML" button and click on that, scroll down, and you can see here that even though we didn't have a subject line set originally, we did include it in our Excel spreadsheet just for the French translation. You can see here that the French subject line and French preheader text have also been imported; you can set that for all of your different emails if you want to translate the subject lines and preheader text as well, this can be a really easy way of doing it.

Once you're ready to go, you can export all of these emails at once from Figma to HTML. If we click on the "Export HTML" button, that's going to export our emails for us; give it one second, and now we can download as it file. I'm just going to save that to my desktop, double click on that, and if we open it up and drop the preview HTML into our browser, there we go; we've got our original email, we've got our French email, you can see here the different previews. We've got our link that we imported, you can see in the bottom left of the browser it's got the "/french" at the bottom, and then we've got our German version with the italic text, and finally this one with the text removed at the bottom. Of course, all of these are just inside of these folders, so these are all the actual individual emails. If you want to grab one to actually use, you can grab that file, the previous file is basically just loading in iFrames, or pointing to all these individual index files, but those are the ones you want to use when you go and send out the email.

I think we're going to leave it there for today; I hope this has been helpful if you've been wondering how to format your text using the Emailify localize feature. Now you can basically change your links per translation, translate your subject lines, preheaders, change any formatting that you need to change in a much more seamless way than having to manually do that when you re-import the content. Thank you for watching, I hope it improves your workflow if you're using the localization workflow in Emailify; thank you as always for watching, we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to add audio to Figma animated MP4 video exports using TinyImage
date: 2022-11-21T00:00:00.000Z
---

# How to add audio to Figma animated MP4 video exports using TinyImage



#### Video Transcript

Today I'm going to be showing you how to add audio to your MP4 video exports from any Figma layers using the TinyImage Figma plugin.

To get started we just need to go to the "Resources" icon in the top of your Figma file and search for the word "TinyImage", and under the "Plugins" tab you'll see the TinyImage Figma plugin pop up. To run it, all you need to do is either click on this "Run" button here or you can save the plugin to your Figma plugins list for later by clicking on the "More options" icon here and clicking on the "Save Figma plugin" icon that pops up. I've already got it saved to my Figma plugins list, so I'm going to go to my canvas, just right click anywhere, go down to "Plugins" go down to "Saved plugins", and then just click on the TinyImage link; that's going to run the Figma plugin that we just set up a second ago.

You can see here that we've got a really simple Figma file, I've got a bunch of images that I want to export into an MP4 video from Figma, and I want to add some audio sound to that video as well. I could use this for a social media post or share it around as a video on any kind of service that supports video, and to do that we just need to start by selecting the Figma layers that we want to include in this video. I'm just going to select all of these Figma layers, I've got seven layers selected, and then in the TinyImage Figma plugin you just want to click on the top button here that says "Create GIF/MP4", so we're going to click on that button now, and because we've got those layers selected when we click the button it's going to automatically load those seven layers into this little timeline.

By default, it's going to arrange the images just by the order that they're laid out on the canvas, but you can change that automatically by changing this option here. If you want to sort the images from right to left, for example, visually you can do that and it'll automatically rearrange it. If you've got the layers organized in a different way on the page you can sort them by rows, if you've named them in order you can sort them by their layer name, if you've numbered them it'll automatically sort them by layer name, or you can just use the layer order as well, or if you want to use the order that they appear on the layer sidebar, you can do that; for today, I'm just going to be using the left to right sorting.

It's also worth mentioning that you can also customize that manually, if you want to drag any of these frames into a custom order, just click on the little thumbnail and drag and drop those into a different order; but again, I'm just going to rearrange those to be left to right.

You can see here we've got a little preview of what the video is going to look like once we export it. You can change the delay per frame, this little slider will basically change the duration of how long each image shows up in your video. We can extend that out to seconds or we can make it really short so it goes much faster. I'm just going to leave it at the one second mark for now and you can also override the delay for any particular frame; if you wanted one to go faster or to go slower you can actually change that directly in these little inputs and that will automatically change the duration of the frame when it gets exported in the playback.

The next thing we need to do now that we've got our ordering set up and delay setup is just click on this little "Animated GIF" option and that's going to open up the select box that will let us change the format to MP4. I'm going to change the format to "MP4 Video" and select that, and you can see down here that after we've selected it, it's giving us a new option to add an MP3 audio track to the Figma MP4 video export. If you don't already have an MP3 audio sound track you can get this pretty much anywhere on the internet by going to a site like Pixabay, which gives you access to a bunch of royalty-free MP3s; you can use these songs in commercial or non-commercial applications.

You can basically just filter the kind of music that you want and preview it; if we were to preview some of these tracks, I'll just go through a couple really quickly for now. You can basically just go through them and preview them and if you want to download one to use as sound in this MP4 video export from Figma, you can just click that "Download" button and save it to your computer. I've already done that; I've got this "Jazzy Abstract Beat" saved to my desktop, you can see it up here. Now that I've got that saved to my computer, I'm basically going to go back into Figma and I'm going to take that sound file that we downloaded and I'm going to drag and drop that MP3 directly into this little footer area here, then I'm going to let go of that and you can see that it's changed to showing the little file name and a little tick to say that it's been dragged In successfully.

This audio is now going to be added to our video export when we export it from Figma, so let's do that right now. I'm going to click on the "Export MP4" button and that's going to take the Figma frames that we just set up, take all the timings we just set up, and it's going to include the MP3 audio sound that we just included by dragging and dropping it. I'm going to click on "Save" and save that video to my desktop, you can see here that it's saved a new MP4 file and I'm just going to open that right now.

I'm going to double click on that MP4 video with audio exported from Figma, and if we move that over here and click "Play" this should include the audio as sound that we just included in the Figma MP4 video export. I'm going to play that now, so that's basically what it looks like we've got our audio sound included over the top of the MP4 video that we exported from Figma using all the images that we already had in Figma. You can imagine this basically being a enhanced version of a GIF, and you can obviously export this to a GIF as well if you wanted to, but using the MP4 option does give you the option of having the MP3 included as sound for the MP4 video from Figma as well, which is pretty cool.

These can be really handy, as I said, for social media posts if you need to include a really simple social media post just going through a bunch of images. You can obviously add text to these frames, you can add anything you want that you can normally do in Figma to each of these frames; the way you would do that is just by adding these into frames themselves and then adding some text layers onto the top. You could just basically include all of the text that you need, if we were to put that text in there, let's make that a little bit bigger and then if you would now to select the frame layer as well. I'm just going to do a few layers, click on the little "Refresh" button and you'll see here that we've got our text inside of the image. That's just a really easy way of customizing your frames if you wanted to add different text or different things into those frames, you don't have to just use single images, you can also just create frame lockups as well.

That's basically it for today, I just wanted to show you a really quick tutorial of how to create and export MP4 videos from Figma with audio sound included; MP3 music, or you could do narration as well if you wanted to do voice-overs, or a combination of the two. As long as you've saved that MP3 file to your computer you can basically use whatever you want and drag that into the Figma plugin to include that audio in your MP4 video exports from Figma. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export HTML emails with RTL (right-to-left) text from Figma using Emailify
date: 2022-11-20T00:00:00.000Z
---

# How to export HTML emails with RTL (right-to-left) text from Figma using Emailify



#### Video Transcript

Today I'm going to be showing you how to export HTML emails from Figma with right to left RTL text formatting.

To get started we just need to install or run the Emailify Figma plugin, and you can do that by clicking on the "Resources" icon at the top of your Figma file searching for the word "Emailify" and if you click on the "Plugins" tab you'll see Emailify pop up. All you need to do is either click on the "Run" button here or you can save the plugin to your Figma plugins list for later by clicking on the "More options" icon here and then clicking on the "Save Figma plugin" link that pops up.

I've already done that, so I'm going to go to my Figma canvas I'm just going to right click anywhere, go down to "Plugins" go down to "Saved plugins" and then I'm just going to click on the Emailify Figma plugin that we just saved. Once that runs you'll see that we've got a bunch of different options here; I'm not going to be going through how to design emails in this Figma tutorial we've got some other Figma tutorials on the YouTube channel if you're new to the Figma plugin and want to know how to actually design the emails. I'm just going to assume that you've already got an email set up and you need to export that email with RTL text formatting right to left and I'm going to show you how to do that in a second.

Just to make sure you've got it set up in your Figma file first; the RTL formatting options are just under the "Figma" icon in the top left here and then if you go to the "Text" option and then down here there's an option called "Text Direction"; by default, this is always set to "Left to Right", if I click on "Left to Right", for example, you can see here that the text has been reversed. This is the default way that it's aligned, but for any text layers that need the RTL or right to left text formatting you can change that as I just showed you; just go to the Figma icon go down to the "Text" option and go to "Text Direction" and just change that to be "Right to Left" instead of "Left to Right". I'm going to switch that back and you can see here that the text has been reversed.

We've already got an email designed just using the components from the Figma plugin; as I said, I'm not going to go through that today but you can basically just click on any of these and automatically add these components and that will help you design the email. I'm going to be exporting this to HTML now, so if we preview this email just by clicking on the "Preview" button in the Figma plugin you'll see that by default the text is the wrong way around, it's actually exporting it with the default order, so the the order in the Figma file doesn't actually get applied automatically to the Figma plugin and we need to change an option to make that work. To make that work, we just go to the export HTML options, so if you click on the "Export HTML" button in the Figma plugin you'll notice that there's a setting down here called "RTL Text" and that's turned off by default, but you can turn that on just by clicking on this toggle switch here.

If we toggle that on and then go back to our preview options and click on the "Preview" button, you can see here that the text is now rendering the way that we expect. The reason for that is it's automatically injecting some RTL text formatting, so there's some special HTML that needs to be added to make sure that the text direction gets applied with RTL or right to left attributes and styles; that "RTL Text" option is going to enable that for you.

That's all you need to do; if you now want to export that RTL HTML email from Figma to your computer or export it from Figma to any of these platforms, for example: MailChimp, Klavio, or any of the email platforms that you might be using. Today, I'm just going to be exporting it from Figam to a simple HTML email that we can download to our computer. The way we do that is just by selecting the emails that we want to export, so I'm just going to select this one and then click on the "Export to HTML" button with my "RTL Text" option enabled. I'm going to click that now, and that's going to upload our images, upload our assets and automatically generate production-ready HTML from Figma for us. I'm going to click on the "Download your zip file" button and I'm going to save that to my desktop.

If you double click on the zip file and open up the folder, you'll see here that we've got a couple of files; our HTML has been exported from Figma into this folder here, so this is the actual HTML that we can view. If we drag that into the browser you can see that we've got our email here, or you can use the "preview" HTML file as well and that will just give you a nice preview page that you can use and see what it looks like on desktop and mobile. As I said before, if we inspect that email, if we go back to the email and click "View Source", we'll be able to see that the content basically has "direction" properties. If we look down here we can see that the text direction is set to "rtl"; that HTML attribute is basically getting automatically added, based on the "RTL Text" setting that we enabled in the Figma plugin.

I just want to keep that really short for today, as I said, if you want to get a more detailed idea of how to actually go about designing these emails in Figma there's plenty of other Figma tutorials on the YouTube channel; just check out the Emailify playlist and you'll be able to find quite a few in there. For today, I really just wanted to go through that really simple new RTL right to left text formatting option that you now have available if you need to export your emails from Figma to HTML in that kind of text formatting.

We'll leave it there for today and keep it a short one. I hope that helps you if you've been wondering how to export your HTML emails from Figma with RTL right to left text formatting, this is going to be the easiest way to go if you're designing your emails in Figma and need to export them out to HTML. Thank you as always for watching, and we'll be back soon with more Figma tutorials just like this one very soon.

---

---
type: tutorial
title: How to import Google Sheets to Figma with one click using Convertify
date: 2022-11-20T00:00:00.000Z
---

# How to import Google Sheets to Figma with one click using Convertify



#### Video Transcript

Today I'm going to be showing you how to automatically import a table from a Google Sheet directly into Figma using the Convertify Figma plugin.

The first thing we need to do to get started is just click on the little "Resources" icon in the top of your Figma file and in the search box just type the word "Convertify", and under the "Plugins" tab you'll see Convertify pop up. All you need to do is either click on this "Run" button or you can save the Figma plugin for using again later by clicking on the "More options" icon here and clicking on the "Save Figma plugin" menu item. You can either click the "Run" button, as I said, or if you've saved it to your list you can right click anywhere on your page, go down to "Plugins" and then click on the "Convertify" option, and that's going to run the Figma plugin that we just set up a second ago.

Instead of using the default option, which is exporting Figma to a Sketch file, which you can also do, you can open up that little options list and instead of exporting from Figma we're going to go down to the "Import to Figma" category and we're going to click on this bottom option here, which is "Import Google Sheet Table to Figma". I'm going to click on that, and that's just selected this import Google Sheet table to Figma option, and now you can see that it's bringing up a new input field here, and it's expecting a Google Sheets link. 

What we want to do is basically go to our browser and we want to find any Google Sheet that we've got a table set up for already. I've got a really simple movie app table, I've just got a list of rows and columns and these are just for different movies. You can see here this is my header, so I've got my header labels. This is the poster label and underneath that I've got got a bunch of image links, and these are all going to images; if I click on one of these you can see that it's loading up an image a poster. I've just got four different images under there, and then all the rest are just text.

I want to import this table from Google Sheets directly into Figma and I can do that by clicking on this little "Share" button up here; I'm going to click on "Share" and once that loads up I'm just going to make sure that this "General access" setting is set to "Anyone with the link". By default, it's set to "Restricted", but for now we want to actually change this to "Anyone with the link", and then on the right hand side you can leave this setting as "Viewer"' you don't need to change it to "Editor" or anything like that, 
"View" is perfectly fine.

Once you've set up those two options in the share modal, just click on the "Copy link" button underneath; click on that button, and it's going to copy the link to your clipboard. Then once you've done that, you can just go back into Figma and in our input field here where it's asking for the Google Sheets URL, I'm going to paste that link that we just copied, and I'm just going to click on the "Import Google Sheet" button. Once that's loading you'll notice that it's loading up the Google Sheets images; it's downloading any of those images, if you've got images in your spreadsheet, and then after that's finished you're going to see a new table created in your Figma file using all of the data or table items from your Google Sheet.

You can see here that we've got our header, we've got our rows, and because this is a component we can actually change the width of these columns as well; I can adjust this and it will adjust all of the child instances. We've got our header up here and these are all children of that header; any widths that are set in the table header component will be inherited by the instances as well. That also goes for the styling; if we wanted to change the styling of this text, for example, we can change that in here and that's going to update the styling of all of the children as well. Of course you can override those in the instances as well; you can re-set that, so we can set it to "Light" and that'll override it at the instance level, but you can do that if you want to.

The same thing goes for the images; because we've got this particular column set up for an image based column, you'll notice here that we've actually got our images, but they're just currently a square. Because our ratio of the images are different, what we can do is we can go up to the component level and in the table header cell, I'm just going to unhide the image. There's a hidden image shape layer there and that's just the component layer for our posters or for our images. What we can do if we want to change the image size for all of our rows is we can just adjust this layer in the component, so I can make that taller and just change the ratio of that. Now we can see it's looking much more like a movie poster, and once you're happy with that you can then just hide that image layer again because it's a component layer and we only want to use the header for the labels; we don't want to have the image layer in the actual heading, but you can obviously just turn that on and off when you need to adjust it.

That's what that looks like there and we can also adjust the width of the table itself. You can see here it's quite responsive as far as the widths go, and again, if you want to then re-adjust these you can just go into the header component and you can adjust each column's width as well. You've got the option of adjusting it at the column level and also adjusting the width at the parent level, and you can change that width yourself.

It also automatically includes strokes; because it's got a table row set up it automatically includes a stroke option turned on by default. You can change the color of that here if you want to make those lines darker or lighter, you can do that. If you want to hide them entirely, just click on the little "Hide" icon, and again, I'm just doing this this on the table header component. If you click on the table header component you'll see the stroke properties on the right hand side, you can just turn those on and off, or you can change the styling, and you can increase that or decrease it as well; for now I'm just going to leave it invisible.

That's basically it; you can use this to import any tables from your Google Sheets to Figma. It's always going to work much better if you're just using a simple table like this, if you start getting fancy with other kinds of layouts in your template, it's probably not going to work as well. I'd recommend just keeping it very simple, this is a standard spreadsheet table using the first row as your header, so you want to put all the all of your labels into there and then just using the other row elements as your content. If you do need images, as I said, just paste in an image URL or an image link and that will automatically be downloaded and imported into your Figma table as well from the Google Sheet.

I think we'll leave it there for today, I don't want to make it too complicated. It's a pretty simple Figma tutorial, I just wanted to show you how to automatically get any table content from a Google Sheet that you might have set up and automatically import that into a Figma file, which can be handy if you're working with large data tables and collaborating in Google Docs or Google Sheets, but you also need that content synced up with Figma as a responsive table, this is going to be the quickest way to go about it. We'll leave it there for today; thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to import Google Docs to Figma with one click using Convertify
date: 2022-11-20T00:00:00.000Z
---

# How to import Google Docs to Figma with one click using Convertify



#### Video Transcript

Today I'm going to be showing you how to automatically import any documents from Google Docs directly into your Figma files using the Convertify Figma plugin.

To get started, we're just going to go into Figma and open up a new Figma file and then go up to the top toolbar here and click on the "Resources" icon, and if you go to the "Plugins" tab and search for the word "Convertify", you'll see the Convertify Figma plugin pop-up. Just go ahead and click on that, and then you can run the Figma plugin by either clicking on this "Run" button here or you can install the Figma plugin or save it for later by clicking on this little "More options" icon and clicking on the "Save Figma plugin" button that shows up. If you've already installed it we can get to it by right clicking anywhere, going down to "Plugins", going to "Saved plugins" and then clicking on the "Convertify" Figma plugin that we just set up a second ago.

Once that loads you'll be able to see that we've got a little interface here that's quite simple. The main thing we're going to be doing is changing this default option which is to export Figma to Sketch, we don't want to do that today; today we're just going to be focusing on importing Google Docs into Figma. We're going to click on this options selector, click on that, and scroll down to the "Import to Figma" category and we're going to click on the "Import Google Docs to Figma" option; go ahead and click on that, and now you can see we've got the "Import Google Doc to Figma" option selected. We've got a few options that we can check here, we'll go through these in more detail in a second, but for now I'm just going to show you how to actually get your Google Docs link set up to be able to use with the Figma plugin.

I'm going to jump back into Google Docs in my browser and I've just got a really simple resume template that I grabbed from the Google templates that comes with Google Docs. To be able to use this Google Doc with the Figma plugin to s totally fine.

Once you've changed those options so it says "Anyone with the link", you can then click on the "Copy link" button directly under that. I'm going to click that now; you can see the link has been copied, and now I'm just going to go back into Figma, and inside of the Convertify Figma plugin I'm just going to click on this input field down here where, you can see it's expecting a Google Docs link. I'm going to paste in the link that we just copied from our Google Docs window, and you can see here it's saying that it's a valid Google Doc URL; and because we've made it public, that's going to allow us to load it from Google Docs into Figma in a second.

I'm just going to leave all the options as default, but the only one I'm going to change is to "Hide Table Borders" and what that means is by default it'll automatically include borders for any tables that get imported which is really handy if you're going to be importing data tables and things like that inside of a Google Doc, but at the same time in this particular document the table is being used to lay out the columns here. If we enable those borders I'll show you what that looks like; I'm just going to click on the "Import Google Doc" button and give you a quick example of what it looks like by default, and then we can go through some of those other options that I just mentioned.

Okay, it's finished importing our Google Doc into Figma, and as you can see here it's gone ahead and imported all of the content from the Google Doc. As I mentioned, the table that was imported is being used for layout and that's why it's got these borders automatically set. You can either hide those just by clicking on the "Hide" toggle in your Figma designs, that will just hide the borders, or if you know that you want to get rid of those in the first place, we can actually just re-import that document with the borders automatically hidden. I'm just going to check the "Hide Table Borders" option and click on the "Import Google Doc" again, and this time it's finished importing our Google Doc to Figma without any of those table borders added in, it's just left it just with the table layout and without those border strokes.

We can see here these are all the text layers, so we can actually edit this. I can put my name up here, I can change the details of this resume, as you'd expect. The size of the document matches the size of the document in Google Docs as well, it's a one for one match as far as size goes. You can see we've got all the formatting, fonts and everything like that set up as we expect from Google Docs in Figma. It also includes spaces, so between all of these paragraphs in Google Docs there's a certain space that's being used, and that space is also being carried over, so you get that really precise spacing. That's roughly what it looks like there.

I'm going to run through one other example just to show you what this will look like in a normal document, one that's not split up into these columns. I'm just going to go to another template from the Google Docs templates list, and I'm going to do the exact same thing; I'm going to click on the "Share" button, I'm going to make sure that the "General access" setting is set to "Anyone with the link", which it already is. Then I'm just going to click on the "Copy link" button and jump back into Figma, go back into my input here and get rid of the old URL, and I'm going to paste in that new Google Doc URL that we just copied. This time I'm just going to leave the table borders off, even though I don't think this document has any borders in it, and I'm just going to import that with the default settings again. I'm going to click on "Import Google Doc" and that's going to import the Google Doc from the new link directly into Figma automatically.

You can see here that it's gone ahead and imported that document. Just a bit of a side by side; you can see that we've got the content, we've got the background color, we've got the formatting of the fonts and everything else that you'd expect. Because this is a multi-page document it will automatically split up the content across multiple pages; we've got two pages in this case, and it's gone ahead and split up that content based on the size of that content per frame. Each Figma frame is basically a Google Doc page in Figma, so when it imports the Google Doc from or the document from Google Docs to Figma, each of those pages get imported as a different Figma frame. You can see here that we've got page one and page two on those two Figma frames, but if you wanted to merge those into a single Figma frame you can also do that as well,

There's an option here if you toggle the "Merge pages into single frame" option and you enable that, and then we re-import the document, click on the "Import Google Doc" button; that's just going to import the document from Google Docs into Figma, but this time it's going to only import it into one Figma frame. We can see here that instead of splitting up the pages it's actually just imported all of the content onto one Figma frame. That can actually be handy if you want to just drop all of the content into a single frame rather than a page based structure in Figma, if it's actually easier for you just have one massive frame where whether you're going to use it as a mock-up or that you're going to use it as more of just a content import rather than an exact design, as a page based design, then maybe this option is going to be more useful for you in that case.

On that topic, the other thing we can do is we can also click on this second option which is an option to remove styles and formatting. I'll show you what that looks like; if you if you enable the "Remove Styles and Formatting" option and again click on the "Import Google Doc" button that's going to re-import the document from Google Docs into Figma, but this time you'll notice that it looks quite different. The reason for that is this option to remove styles and formatting basically just standardizes the styles of the document rather than using the exact styles that you specified in Google Docs. For example, we've got the colors, the font sizes, the font settings, spacing all that sort of stuff that's been defined in this Google Doc, and it's basically being been ignored in favor of the formatting of the document. What I mean by that is you can see here when I highlight these bits of text, it's using formatting that's predefined into these categories of "title", "heading", different level headings, paragraphs; and you can see that the document structure is really based around these headings and formatting options.

What this option does in the Figma plugin is it removes all of the styling that's been applied to these, and it just uses those semantic headings to then pre-define its own styles; it really just simplifies the document if you've got a really crazy document, or it's just a very complicated with lots of styling, and you just want to simplify it and just really just import the content from Google Docs to Figma without worrying too much about the exact design, then this is going to be a good option for you to do that. The other cool thing is because there's no exact spaces and all that sort of stuff, you can then really easily also just format the document yourself. If you wanted to change the spacing between those paragraphs and headings, you can do that just by tweaking the item spacing in Figma, and that's going to give you a really easy way of changing the spacing and stuff like that.

You can also go ahead and of course format these text fields in another way if you don't like the color, or you don't like the styles, you can always just go ahead and change those yourself. You can obviously change the colors of things in Figma and style text in Figma as you'd expect; we can obviously change the fonts and and make that look a little bit different as well, that's all obviously doable. As I said, this might be an option if you just want to really get a simplified version of a document from Google Docs into Figma without worrying about the exact styling working.

The only downside to this approach is if you're using a file or Google Doc like this one, which does have a table layout, it will basically import all of that content as a table and it won't really work as well if it's more of a designed layout, so I wouldn't recommend using that option here. I'll show you what that looks like just as an example; it's not really going to be that good or that useful because these are really table cells, it's still importing all the content, but it's importing them into a table as if it was a data table inside of a page. As I said, I probably would avoid using that option if you're using a complex layout like this, but for a regular single column document, which most column documents are just really a single column with content in it, you can definitely use that "Remove Styles and Formatting" option.

Just one more thing before I finish up the Figma tutorial; if you're wondering where all those pages are getting created, if you expand your "Pages" option up in the top left here in Figma, you'll be able to see that we've got a history of all of the Google Docs that we imported to Figma. Every time you click the "Import Google Doc" button and import a document from Google Docs into your Figma file, it will automatically create a new page with a timestamp to let you know when that was imported. You can see here we've got the different time stamps, and it will automatically use the title of the Google Docs document, so we've got "Essay" and "Resume", and we'll automatically name the pages with the title of the Google Doc as well.

I'll leave this Figma tutorial there for today, I just wanted to run through the different options in the Figma plugin to go through what all of those do. There will be more options coming to the Figma plugin in the future, being able to support things like custom headers and Footers, all of that sort of good stuff will be included in a future version of the Figma plugin, but for now this is in BETA; there's going to be a couple things that you know may not look exactly right, but this will be improved over time and resolved over time, so just be bear with us on that one.

We'll leave the Figma tutorial there for today, and if you want to have a bit of a play around with this you can use the Figma plugin right now. As I said, this has been shipped to the Figma plugin you can just select that option to import Google Docs to Figma; give it a try while it's still in BETA, and as I said it'll be improving over time, but I hope that helps your workflow if you're using Google Docs at work or in your personal usage, and you want to get that content into Figma really easily, then using the import Google Docs to Figma feature in Convertify is going to be the fastest way to go about it, rather than re-importing all of that content manually yourself. As always, thank you for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export animated MP4 videos from Figma using TinyImage
date: 2022-11-19T00:00:00.000Z
---

# How to export animated MP4 videos from Figma using TinyImage



#### Video Transcript

Today I'm going to be showing you how to export animated MP4 videos from any Figma layers in your designs using the TinyImage Figma plugin.

To get started we just need to install the Figma plugin or run it by going to your header bar in Figma, then click on the little icon that says "Resources" and if you go to the "Plugins" tab and search for the word "TinyImage" and you'll see the TinyImage Figma plugin pop up. If you click on that you'll be able to run that Figma plugin by either clicking on the "Run" button here or you can save the Figma plugin for later by clicking on this "More options" icon and clicking on the "Save Figma plugin" button that's underneath that; once you've already installed the Figma plugin you can run it as I said by clicking on the "Run" button or you can just right click anywhere, go down to "Plugins" and then go to "Saved plugins" and click on the TinyImage Figma plugin, and that's just going to run the Figma plugin that we just set up a second ago.

You can see here in my design I've got a really simple design with a handful of different images in it, and I basically want to create a animated MP4 video from these images and export that from Figma. I'm going to do that by selecting all of the image layers that I want to include; I'm just going to select all of those, and you can see they've been selected on the canvas, and then in our Figma plugin we're going to click on the "Create GIF/MP4" button in the header here. I'm going to click on that button with these layers selected and that's just going to load up a little preview of what this animated export is going to look like.

You can see by default it's setting a 500 millisecond delay between each of these frames, and you can see we've got all the frames here each of them is going for half a second we can actually change that; if you wanted to make that a bit slower we can change it to be one second per frame or you can even override each frame with its own special override. If we wanted to just make a couple of them quicker we can easily just add those overrides in here and when it gets to those frames it'll skip over those quicker because we've specified that to be a bit shorter. I'm just going to leave a couple of those like that, and I'm going to leave the other ones at just one second because I think that's a pretty good speed for the animation we want to export today.

The other thing you can do is you can also set if you want the images to cover or contain the size of the image; for example, this is currently set to "Cover" if we change that to "Contain" it will automatically fit the entirety of the image into the frame and basically it uses the first frame in our selection here as the default width and height, but you can go ahead and change that if you wanted to, or you can scale that up or down proportionally. If you wanted to make that double the size you can see that it's going to export it at a much higher resolution, but for today I'm just going to leave it at "1x" and I'm going to set that to "Cover" because I want the images to fill up all the available space and not have any empty space or black lines or anything around the image.

Once you're happy with your animation, all you need to do is change it from the default export format of a "GIF" and you want to click on that little select icon and instead click on the "MP4 Video" option; I'm going to click on "MP4 Video" and we've got our animation set up the way we like it. If we wanted to we could also rearrange these frames; if you wanted to sort the frames in a different order you can sort them visually we could change it so the frames are automatically ordered from right to left, for example, that would reverse the order. You can also drag and drop these around if you want to manually change the order of some of these frames, you can totally do that as well, but for today I'm just going to leave it as sorting it by the default order of left to right, so it matches what's on our canvas already.

Okay, I'm all done and I'm ready to export the frames from Figma to MP4 video; now all I have to do is click on the "Export MP4" button and that's going to take those Figma frames and generate an MP4 video from Figma and allow me to save it anywhere on my computer. I'm just going to save it on my desktop, and you can see it's just saved, and now if I click on that video on my desktop and double click it, it's going to open up the MP4 video file. You can see we've got the ".mp4" extension and now I'm just going to hit "play" and you can see here it's exported our animated MP4 video from Figma the same way that we designed it in the Figma plugin.

If we replay that one more time you'll be able to see that most of these frames go for a second and then we've got those two frames that also go for half a second; this one and this one are a little bit quicker, but that's basically what it looks like. It's exactly what we exported, and exactly what we designed in Figma has now been exported as an animated MP4 video really quickly, so you don't have to use any other video editing tools or any complex software just to get these images from Figma into an animated MP4 video; you can just click one button once you've designed it in the TinyImage Figma plugin and export it instantly to a usable MP4 video. You can post it on social media or anything you want really, you can just share that video file around that's now on your computer.

That's basically it for today, I just want to keep it really simple to show you how to take any layers in your Figma file and turn those into an animated MP4 video from Figma; this is the way to do it, if you want to do it really quickly. Feel free to give the TinyImage Figma plugin a go and hopefully it improves your workflow. I'm going to leave it there for today; thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to add audio to Figma video banner exports using Bannerify
date: 2022-11-17T00:00:00.000Z
---

# How to add audio to Figma video banner exports using Bannerify



#### Video Transcript

Today I'm going to be showing you how to add audio or music to your animated banners that are exported from Figma as MP4 video files.

To get started all we need to do is install or run the Bannerify Figma plugin; and you can find that by going up to the top of your Figma file where it says "Resources", click on that little icon and then you just want to search for the word "Bannerify" and you'll see Bannerify pop up under the "Plugins", tab all you need to do is click on that result, and you'll see this little window pop up. If you haven't already done so, you can install or save the Figma plugin by clicking on this little three dots "options" icon then clicking on the "Save Figma plugin" menu item that you'll see. If you've already saved it, we can run the Figma plugin by either clicking on this "Run" button in the Figma plugin window, or you can just right click anywhere on your Figma page, go down to "Plugins", go to "Saved plugins" and then click on "Bannerify", and that's just going to run the Figma plugin that we just saved a moment ago.

I've already got a bunch of banners designed, and each banner is treated as a Figma frame; every Figma frame you can see on the left here is an individual banner and each of those banners have layers in them which make up the banner timeline. I'm just going to select a couple of these banners that I've already designed, I've got a half page skyscraper and I'm also just going to select the medium rectangle and load those two banners by clicking this button here. That's going to load up the timeline that I've already created and you can see here if I just click the "play" button, that gives you an example of what the animation looks like, it's just a really simple four second timeline and that's what it looks like.

In this video I'm not going to be going through how to actually design the banners and how to add the animations, if you're interested in that and you're new to the Figma plugin you can find some other Figma tutorials on the YouTube channel; just search for the "Bannerify" playlist and you'll be able to find a bunch of those; today I'm just going to be assuming that you've already designed your banners and you've already animated them in a way that you are happy with, and all you want to do is now export those to MP4 with an audio track included.

This is a new feature, and to use it all we need to do is click on the "Export to GIF/Video" button up here in the header of the Figma plugin; I'm going to click on that and you'll see down the bottom here we've got a bunch of export options. If you've used this Figma plugin before you can see that you can export it to a range of different formats and the one we're going to be looking at today is the MP4 export. If you just click on the "Export MP4" button that's going to render out the banners that you've animated in Figma to an MP4 video file, but it's not going to have any sound whatsoever; these are just muted or banners with no audio on them, which can be handy for different applications, but if you want to add some audio or some music this new feature is going to allow you to do that.

It's fairly straightforward, all you need to do is find an MP3 file that you want to use; I'd recommend just searching online, and there's a link in the Figma plugin to a website where you can find free audio files. If you click on that link it'll open up this website, the Pixabay website, where you can search for music and these are free to use for commercial use. You can find any of these songs or any of this audio and you can use this for commercial use for free, so we can browse the tracks and we can find one that we like; for example, I might click on the "Alternative Hip-Hop" filter and you can basically go down and preview different tracks. If you click on the play button that's just going to give you a little preview, and once you find one that you like; for example this "Chill Hip-Hop" one, we might want that; all you need to do is either click on the
"Download" button or just right click that link and click "Save link as", and you can save that to your computer.

If you save the MP3 file to your computer, now we can jump back into Figma and in our Bannerify Figma plugin you'll see down here that there's an export setting for MP4 to click or drag and drop an MP3 audio file. I'm going to grab the one that we just downloaded a moment ago, so I've got the "Chill Hip-Hop" one here; I'm going to grab that from my desktop where I saved it and just drag and drop that MP3 file into this little drop zone area in the Bannerify export options. I've just let go and you can see there that it's added the MP3 file from our computer into the Figma plugin, and that's basically ready to go.

Now all we need to do is click on the "Export MP4" button and that's going to render out our banners that we've already selected in the Figma plugin and it's going to encode them to MP4 video files. but this time it's going to be exporting them with that MP3 music track automatically inside of the MP4 videos, so these videos are going to have sound in them. Once the banners have finished exporting to MP4 all you need to do is click on the "Download your zip" file button and save that to your computer; then I'm just going to unzip the file by double clicking on it, and you can see here it's going to give us a folder, and we can see in the folder we've got our videos folder which contains the MP4 files.

I'm just going to load up that HTML file in the browser just to give us a really quick preview of what's actually in those video files. I've just dropped that into my browser and you can see here that the videos aren't auto-playing, and the reason for that is because they have audio on them; you can't force it to automatically play in the preview. All we need to do is click on the little "play" icon for the video and you can see there that we've got our video playing back with the audio track that we added to Figma automatically included in that MP4 video. The same goes for the other banner that we exported, it's just playing the small one but the audio track will automatically get added to every banner that you export. For example if we play this larger banner, I'll play that one now, and that has the exact same audio track, too.

You only need to drag in the file once and when you export the banners from Figma MP4 video, the audio is automatically again be included in all of them; you don't need to do it one by one, you can just apply it to all of them in one go, so hopefully that speeds up the process a little bit.

That's basically it; it's fairly straightforward, it's just a brand new field in the export settings that you're already used to if you've been using the Bannerify Figma plugin before, this just gives you a little bit of extra flexibility to include audio to your Figma banners that are exported to MP4 videos. This can be really handy if you want to create more engaging social posts, for example, if you're posting these on platforms like Instagram or other social platforms, adding a audio track whether that's some music or if you've created a narration track, or mixed some music with your voice and you want to create a bit of a narration for your video. this is a really easy way to now include audio to your animated banner video exports from Figma.

That's it; I'm going to leave it there for today, and I hope you have fun playing around with this new audio feature for your Figma exports to MP4 videos, and until the next time, thank you as always for watching, and we'll be back soon with more Figma tutorials just like this one very soon.

---

---
type: tutorial
title: How to export HTML emails from Figma to Sendinblue using Emailify
date: 2022-10-19T00:00:00.000Z
---

# How to export HTML emails from Figma to Sendinblue using Emailify



#### Video Transcript

Today I'm going to be showing you how to automatically upload your HTML email designs directly from Figma into the Sendinblue email platform. If you're a user of the Sendinblue platform and you'd like to design your emails in Figma and automatically upload them as HTML into the Sendinblue platform, this Figma tutorial is going to show you how.

The first thing we need to do is just go to Figma and open up a brand new Figma file, and if you go up to the "Resources" icon up in the top header here and just search for the word "Emailify", and you'll see the Emailify Figma plugin pop up. If you just click on that result you can then run the Figma plugin by either clicking on this "Run" button here or if you want to save it for later you can click on the "More options" icon here and click on "Save Figma plugin", and that will automatically save it into your Figma plugins list.

I've already done that, so I'm just going to right click anywhere, go down to "Plugins", go down to "Saved plugins" and then click on the Emailify Figma plugin that we just set up a second ago. I'm just going to create a brand new blank email; I'm going to call it "Template Sendinblue test" and I'm just going to add that to my page. Bear in mind, this Figma tutorial is not going to go into a lot of detail about actually designing the email; if you want to have a look at the details for that, there's a bunch of other videos on the YouTube channel just search for Emailify and you'll be able to find those. Today, I'm just going to be really quickly spinning up a really basic email just to show you roughly what this looks like as it gets uploaded from Figma to the Sendinblue email platform.

I'm just going to add a few little bits and pieces here, and I think that'll do it for today. I've got my email, you can preview the email by clicking on the "Preview" button; you can see here this is HTML. I can widen that out to the desktop size, so you can kind of preview what it's going to look like at those different sizes, and as I mentioned I'm not going to go into heaps of detail, but you can also customize things like mobile font sizes and mobile spacing and things like that as well.

I'm just going to assume that you've got an email design that you're happy with and all you want to do now is upload it from Figma to Sendinblue. I'm just going to click on the "Export HTML" button up here, and you can see that this opens up the export options panel. By default, it's going to export it to an HTML email that you can download to your computer, but in this case I'm going to actually change that option and go down to the "Platform Integration" section and select "Sendinblue"; that's just going to change the options that we've got down here.

There's two different links that we need to have a look at; the first one is the API key, so you need to paste in your Sendinblue API key. You can click on that link which will take you to your API keys page if you're logged in to your Sendinblue account, and all you need to do is either grab the API key that you've already got, or you just click on this "Create new API key" button, you can name the key "Emailify" and then just click "Generate", and then it'll give you this key that you can copy into your Figma account. I can just do that now, I can name it "Emailify", click "Generate", and then I'm just going to click the "Copy" button and jump back into Figma, and I'm going to paste that into my Sendinblue API key field.

Then the second thing we need to add is our sender email; the sender email is basically the email address that the email is going to be sent from. You need to make sure that you've got one set up in your Sendinblue account; the way you can do that is you can create a new sender, so in the Sendinblue platform, go to the "Senders" page; you can go there by either going to the menu, or click on that link, and this is the place where you'll be able to see which email addresses have been approved for sending emails from your Sendinblue account. In my case I'm just going to use my email address, so I'm going to copy that email which has been verified for this account, so I can send emails from Sendinblue using that account. It's very important that the email you grab is actually verified and under this list, otherwise it's going to return an error. I'm just going to grab that email, paste it into the email field, and now I've got my API key and my sender email, so I'm ready to go.

The last thing you can do is add a subject line; if you want to add "new feature update", this will just add the subject line as well, so that'll automatically get included. Now that's all done, all I need to do is click on the "Upload to Sendinblue" button, so I'm going to click that now. This is going to automatically generate the HTML for me, upload all my images, and it's going to upload that directly into my Sendinblue account automatically, so I don't actually have to manually copy paste HTML code.

You can see here it's been uploaded successfully; we can now go to the Sendinblue marketing templates page. If you click on that link, that's just going to take you to your Sendinblue templates page here. I'll just refresh that because I've already got it open, and you can see here the template that we just uploaded from Figma to Sendinblue has been created in the email templates list. We can jump in there and you can see that it's got our sender address that we added, it's got our subject line that we added, that's pre-populated, and the HTML that we included has also been added in there. You can see what that looks like there, and you can shrink that down as well if you want to look at the mobile view, but that's basically it. We can quit that now; you can use that template uploaded from Figma to Sendinblue in your campaigns, you can send that out from Sendinblue; and you can send a preview to
yourself if you want to do that as well.

That's basically it; I just wanted to keep this really short and concise for anyone who's wondering how to export HTML emails from Figma to Sendinblue, this is the fastest way to do it if you don't want to go about manually coding HTML, or manually uploading HTML into the Sendinblue platform. If you're already a Figma user and you want to design your emails in Figma, and you're also wanting to use them with Sendinblue, then the Emailify integration is going to be something that I think you'll be very interested in trying out. If you do try it, out I hope it all goes well; thank you as always for watching, and we'll be back soon with more Figma tutorials just like this one very soon.

---

---
type: tutorial
title: How to export banners from Figma to animated WebP images using Bannerify
date: 2022-10-06T00:00:00.000Z
---

# How to export banners from Figma to animated WebP images using Bannerify



#### Video Transcript

Today I'm going to be showing you how to export your animated banners that you've designed in Figma to animated WebP image files, directly from Figma, using the Bannerify Figma plugin.

To get started all you need to do is just jump into Figma and click on the "Resources" icon in your file up at the top here; click on "Resources" and then just search for the word "Bannerify", and if you click on the Bannerify result, you'll be able to then run the Figma plugin by either clicking this "Run" button here; if you click run that will open up the Figma Plugin, or I'd also recommend clicking on the "More options" button and then clicking on "Save Figma plugin" and that's just going to save the Bannerify Figma plugin to your plugins list so you can access it again easily later.

I've already added it to mine, so I'm just going to go to my Figma file and I'm going to right click, I'm going to go down to "Plugins" and then go to "Saved plugins" and then I'm just going to click on "Bannerify", and that's just going to run the Figma plugin that we just installed a minute ago.

To get started, all you need to do is click on any frames that you've got on your page; if you've got a bunch of frames in different sizes for different size banners and each of those banners will have layers in them, which are just the content layers of each banner, all you need to do is select the banners that you want to export or animate, and then in the Figma plugin just go down here and click on "Load checked banners". I'm just going to load up a few to get started, and that's just going to load in the banners that we just selected. 

If you're new to the Bannerify Figma plugin, I'm not going to be going through in detail how to actually use all the animation features and how to do all these other kind of fancy things. If you're interested in that, there's a whole bunch of other more detailed tutorials on that on the YouTube channel if you just go to the Bannerify playlist, you'll be able to find a whole bunch of those. Today I'm really just going to be assuming that you've already got the animations set up for your banners the way that you want, and we're just going to take those banners that you've already designed and export them out from Figma to animated WebP image format. 

In this example I've just got a few banners with some very simple animation on them; we can preview what that looks like here, and instead of exporting it to HTML or a GIF today I'm just going to be exporting it from Figma to animated WebP. If you go ahead and click on the "Export to GIF/Video" button up here in the Figma plugin header; I'm going to click on that, and then you'll see down here that there's a few different export options. There's a new one that's now called "Export WebP" and that's exporting it at 2x retina. The benefit of this is you can export this from Figma to an animated WebP image as opposed to a GIF file for example. With a GIF, you're going to be exporting it out at 1x, and with GIFs there's also the limitation of only being able to include 256 colors, so you always notice that the color palette of a GIF is a little bit washed out and lower kind of resolution or sharpness compared to let's say a PNG file. 

The benefit of animated WebP is it allows you to keep that quality keep that color range and also export it out in a file format that's much sharper. To show you what that looks like, all you need to do is click on this "Export WebP" button, so I'm going to click on that now, and this is going to go through and export the three banners that I've selected and it's basically going to convert each frame from Figma to a WebP file; and once it's done that for every frame, it's then going to take those WebP files and essentially merge them into one animated WebP image file from Figma. You can think of this as kind of like an alternate GIF format; a GIF is just a collection of frames rendered out into a single GIF file, and the same will happen with these animated WebP banners. It's going to basically create a single animated WebP image file but inside of that animated WebP file there will be many WebP image frames that work in a similar way to a GIF file. 

As I mentioned, it's going to allow us to export it from Figma to animated WebP with much better quality, and it's going to allow us to export it in a way that's still fairly optimized, but also at 2x resolution. If you want to use this for your website or if you want to use this for a banner campaign and you want to keep those images looking really sharp, as opposed to using a GIF, exporting your banners to animated WebP from Figma is definitely an alternate format that you can use to do that. We're just on the last one now, it'll take a little while to convert some of these if they're much bigger; I'm using a 24 frames a second animation as well, so it's going to include a few more frames, but we're on the last one now. 

Once this is done, you'll get a prompt to say that the banners are ready, and then all you need to do is click on the "Download your zip file" button and that's just going to bring up the save prompt. In this example, I'm just going to save it to my desktop, click "Save", and then you can see here I've got the zip file. I'm just going to double click that to unzip it, and then if we open up the zip file you can see here that we've got a new folder called "webp"; that's where our animated WebP image files have been exported, and we've also got this index file. The index file is just a preview page, so I can drag that into my browser and you can see here that I've got the preview page with all of my animated WebP images that we just exported from Figma showing up. As you can see, they look really sharp and if we open up that in a new tab, you can see here they've been exported at 2x resolution, that's retina resolution.

Just to give you a really quick comparison of what that looks like compared to a GIF, I'm just going to run this export function again, and this time I'm going to click on 
"Export GIF". While that's exporting, I'm just going to go through the support for the animated WebP image format as well. We're just on "Can I Use" here, we're looking at the "WebP" page, and this is just going to give us an overview of what kind of support the animated WebP image format does have; and as you can see it's actually got very good support, basically all the major browsers support this format, with the exception of IE, which is now basically dead and isn't supported anymore anyway. Apart from IE, you've got very good support across across the the board. WebP has actually been around for quite a while, it's still not used as often as, let's say, JPG, but WebP is actually a very good format for compressing images and having animated WebP images is even kind of a more new idea that hasn't really been done as much compared to GIFs.

This is a pretty good format if you're looking for an alternative to GIFs, and we'll show you what that looks like compared to those GIFs right now. I'm just going to download my zip file once again, and I'm going to put that on my desktop, double click the zip file to open it, and this time I'm going to load up the GIFs page. I'm just going to jump into here and drag that onto my browser, and you can see here it's exported the GIFs pretty much looking the same as what the WebP looks like, but if you actually compare these two; I don't know how obvious it'll be on the video, but if you compare these two, there's a noticeable difference in quality. The colors don't look as washed out, there's way more sharpness in some of the details of the image, and if we compare those two in the isolated view as well, you can see here this is just a 1x GIF, and there's a little bit of kind of washed out coloring that you can see compared to the animated WebP image, the animated WebP exported from Figma just looks a little bit more vibrant, and you've got that higher resolution as well. 

As I said this is a really good alternative if you are looking for a different option to GIFs, and if we look at the file sizes, you can see that they're actually quite comparable. This leaderboard is 2.1 megabytes for the GIF, and if we go to the animated WebP, that's 3.6 megabytes;you're getting double the resolution, you're getting a much sharper image, and the file size difference is actually pretty negligible. That's a really good option if you're looking for a GIF alternative.

That's basically it, I just wanted to run through a quick example of how to use this new export Figma to animated WebP feature in Bannerify. If you've been wanting to export your banners from Figma animated WebP images then this is the easiest way to do it in Bannerify, and if you are looking to do that, please feel free to try out the Bannerify Figma plugin. You can, as I said, go to the resources panel in Figma, or you can click on the link in the description below and that will allow you to get started and start designing banners to then export from Figma to animated WebP files. I hope that's been helpful, and thank you as always for watching; we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export animated WebP images from Figma using TinyImage
date: 2022-10-04T00:00:00.000Z
---

# How to export animated WebP images from Figma using TinyImage



#### Video Transcript

Today I'm going to be showing you how to export animated WebP images directly from Figma using the TinyImage Figma plugin.

The first thing we need to do to get started is just go up to the "Resources" icon in the Figma header toolbar up here and click on that, and if you search for the word "TinyImage" you'll see TinyImage compressor pop up and all you need to do is click on that result and then click on either the "Run" button here to run the Figma plugin, or you can go over to this "More options" icon and click on that, and you'll be able to add that to your Saved plugins to make it a bit easier to access again later.

Because I've already got the TinyImage Figma plugin saved, I'm just going to right click on my Figma canvas, I'm going to go down to "Plugins" and then just go down to "Saved plugins" and click on TinyImage and that's just going to open up the Figma plugin that we just saved a second ago; for today's example I'm just going to create a really simple WebP animation from Figma using these three images, and all I need to do to get started while the Figma plugin is open is just click on the images you want to include in your animation; I've just clicked on those three layers, and now I'm going to go ahead and click on this button in the TinyImage Figma plugin called "Create GIF".

If I click on that button, that's going to allow us to load up the three images that we just selected in Figma, and you can see here that we've got all these other options as well. This allows you to sort the frames by their order on the page; if you wanted to change the order based on how they're ordered on your page you can easily do that, but I'm just going to leave it as the default for now. You can also do things like change the duration, so the default duration between the frames you can change down here, or you can actually override these per frame.

For example, if you wanted this middle frame to only flash up for 200 milliseconds, you can override that in the Figma plugin settings per image or per frame as well; that's something you can do there. I'm just going to leave that at 500 and I'm just going to change the default delay to one second, and I've got that set to infinite and I've just got it set to the default size, but you can also scale that up or down based on these settings as well. If you wanted to do it at half size, you can scale that down, I'm just going to leave that at 1x for today. Then I'm just going to set the quality a bit higher; I'm just going to pop it at the default which is about 90, and that's pretty much it.

I'm fairly happy with how the playback's looking. You can pause this and jump between your frames if you wanted to get a bit of a more detail on how that animation is looking, but I'm pretty happy with that for now. To export this from Figma to animated WebP image, all we need to do is change the default export format from GIF; instead of doing "Animated GIF", I'm actually going to change that to the "Animated WebP" option and I'm going to click on that and then click on the "Export WebP" button. If I go ahead and click on "Export WebP" that's going to add my frames from Figma to the WebP image and render it out as a special animated WebP image file from Figma.

I've just got this prompt to save my file, I'm going to click on "Save" and just pop that on my desktop. Then to view the file, the easiest way to do it is just to open up your browser and drag the image file in to the browser, so I'm just going to do that now. You can see here that our WebP image is animated, so this is just one file containing our animated frames and it's allowing us to use this in the browser as a much more optimized file size compared to a GIF. If you're tossing up between GIFs or WebP, WebP may actually be better in some cases depending on what compatibility you're looking for.

If we jump over to the "Can I Use" website we can get a bit of a sense of what support the WebP image format does have. As you can see, it's fairly well supported across most browsers these days, which is great, and there's some partial support here for not supporting two animated WebP images. As you can see, those are actually pretty much just all the versions of Chrome and older versions of Opera, so if you don't need to support those older versions then WebP actually might be a really good option for you to be able to get that better image quality compared to GIFs. GIFs only have 256 colors in the image, so that's why they tend to look a bit washed out sometimes, whereas with WebP you get that PNG level looking image with all of the compression savings of WebP as well.

WebP is a very good format for compressing the file size down, so if you're comparing a WebP image versus a GIF image, just from the file size alone you're always going to get a better quality and better optimized file size from a WebP file. In terms of the use cases for WebP animated images this is perfect for adding to your website; if you wanted to share this on your website or add an animated image into your social media, then WebP is probably going to be a really good way of doing that. As I said, you just got to weigh up the pros and cons of WebP versus GIF, for example.

Anyway, that's a pretty quick Figma tutorial for today. As I mentioned, there's some extra settings you can play around with in the GIF creation settings, but I'm not going to go through all of those today, so you can have a play around with them yourself. For example, if you wanted to change the way that the image fit works, you could make a image fit instead of fill; containing the images, instead of automatically covering the entire size of the the GIF; you can totally do that. You can change the dimensions to be different from what the first image is, which is what the default image size is, and you can also obviously change the delay and all that sort of stuff down here; that's what that looks like in the Figma plugin.

I think we'll keep it there for today, and I hope if you've been wondering how to export animated WebP images from Figma, as far as I know this is the easiest way to do it. If you're interested in trying it, I hope that you give it a go and best of luck with creating your animated WebP images from Figma. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to convert and import Adobe XD to Figma in seconds using Convertify
date: 2022-10-02T00:00:00.000Z
---

# How to convert and import Adobe XD to Figma in seconds using Convertify



#### Video Transcript

Today I'm going to be showing you how to automatically import your designs from Adobe XD to Figma using the Convertify Figma plugin.

To get started, all we need to do is open up a brand new Figma file, go up to the top here and click on this "Resources" icon, then just search for the word "Convertify", and you'll see Convertify pop up. If you click on that Figma plugin you'll be able to click on this "Run" button here which will run the Figma plugin, or if you want to save it to your Figma plugins list for later, you can click on this little "More options" icon and click on the "Save Figma plugin" link and that'll automatically save it into your Figma plugins list for easy access later. I've already done that, so to actually run the Figma plugin you can just right click anywhere on your page, go down to "Plugins", go down to "Saved plugins" and then you can just click on the "Convertify" Figma plugin in your list and that's just going to open up the Figma plugin that we just installed a second ago.

I'm going to keep this Figma tutorial fairly short at first, so if you just want to know how to do this for your own Adobe XD files you can stay tuned for the next minute or so, and then I'm going to go into a bit more detail about some specifics. Just to give you a really quick example of how to do this for your Adobe XD files, now that we've got the Figma plugin loaded up you just have to make sure that you click on the select box here which will allow you to select what conversion you want to perform; and just go ahead and click on the "Import Adobe XD to Figma" option. Once you've selected that, you'll see this little dropzone area pop up down here; you can either click on that or you can just drag and drop an Adobe XD file there. I'm going to go ahead and do that now, and I've got a little design file that I've grabbed from the internet. I'll show you what that looks like, I'm just going to open that up in Adobe XD, and this is the design we're going to be importing from Adobe XD to Figma.

To import that design into Figma from Adobe XD, all we need to do is grab that file from wherever you've got it saved on your computer, drag and drop that Adobe XD file and drop it into this little dropzone area in the Convertify Figma plugin. I'm going to do that now, and just let go, and there we go; it has imported our Adobe XD file automatically into Figma. We can have a look at the layer breakdown here just to confirm that it's pulled in everything as we'd expect; you can see if we compare the original design in Adobe XD you can see here that these are the layers that it originally had, and if I jump over to my Figma file you can see that those same layers have been imported. These are all individual layers you can move them around as you would expect, the same way that you can in Adobe XD, and it's basically imported the entire design in a matter of seconds. As you as you could see, it only took about two seconds or three seconds to import hundreds or thousands of layers that are in this Adobe XD file, including all of the images, all of the text, all the styles and everything else that you'd expect.

That's basically the entire thing; if you want to stop watching now, please feel free to do that. you can click on the link in the description to quickly jump to the Figma plugin page or you can access it through the resources icon as I mentioned before. If you want to tune out now and not go into any of the details regarding styles and prototypes and all that sort of stuff, please feel free to stop here, otherwise stay tuned and we'll keep going through a few more of the features that you can use in the Figma plugin to import your designs from Adobe XD to Figma.

As I mentioned, that's just like the most basic example of what you can import; I'll give you another example just so we can see how it'll work across different designs. If I open up this other Adobe XD file you can see that we've got this landing page design, it's got a bunch of vector layers, a bunch of image layers, and a bunch of text layers. Just to show you what that looks like, we can do another example and drop that one in, so I'm going to again drag and drop that Adobe XD file from my desktop directly into the Convertify Figma plugin, and I'm going to let go on that dropzone, and once again it's going to create a new page in my Figma file. Every time you do this it'll create a brand new page under your Figma file that you're already in and just add a little time stamp there, so you can see when it was imported and it just gives you this little "XD Import" label as well, so you can know at a glance which of these pages have been imported from Adobe XD to Figma and which ones are just the ones you've created separately.

Again, as you can see, all of the layers have been imported from Adobe XD to Figma as you'd expect. We've got all of our content here, we've got all of our images, and again you can move all these around these are individual layers as you can see on the left here and all of the groups have been maintained. If we go to our layers panel here we can open that up and see that we've got our layers as we'd expect, and those are in the correct order and the correct nesting. It's really a one for one as far as the layer structure and file tree goes, so you don't have to worry about manually updating any of those layer structures or anything like that; that's all converted for you. If we zoom in here you can see that down to the layer it's being imported; we've got all of our vector fills over here which we've got from Adobe XD straight into Figma, so that's what that looks like there.

Just a couple things to be mindful of if you do have fonts that are being used in Adobe XD that aren't installed on your computer and you're importing your file from Adobe XD to Figma; you just want to make sure that you've got those fonts installed, otherwise it's going to fall back to the fallback font which is "Inter", the default Figma font is Inter, so if you're noticing some differences between those; for example, this original design has a font called "Gilroy Bold" and I don't actually have that installed on my computer, and in order for a font to be applied in Figma, via a Figma plugin or just using the tool, you do need to have that font installed on your computer. If you're noticing some differences between the fonts being imported, just double check that you do have that original font installed; in my case, I don't have that font installed and that's why it's looking the same, because it's basically loading a fallback font here as well, but if you are noticing that the fonts are a little bit off, it's likely that you need to install the original font first and then re-import the file from Adobe XD into Figma to get that looking a bit better.

The other thing around fonts and text to be mindful of is that the way Figma and the way that Adobe XD interpret fonts and font properties is a bit different; for example, if you're setting the font size or the text size using these options down here, so the "auto width", "auto height" and "fixed size" options, this can cause some issues. For example, if you've got like a massive text area in Adobe XD sometimes that gets carried over to Figma in a weird way, so there might be a bit of vertical offset; if you do notice that, the best thing to do is just to set the text as "auto height", if you notice any issues with the text importing just try and make as many of these text layers as set to "auto height" as possible in Adobe XD before converting that Adobe XD file into Figma; that's just a small tip there regarding text layers.

The other thing that I said I'd go through is prototypes and styles, so I'm just going to create a brand new Adobe XD file, and I'm just going to show you how a few of these things work. The conversion import process does support styles, so that's text styles and fill styles, and it also supports prototyping properties. If we go to Adobe XD here and just create a really simple frame; I'm just going to create an artboard with a rectangle on it, and I'm just going to fill that rectangle. I'm also going to create a text layer; I'm just going to create this text layer here, and I'm just going to call it "text layer" and just leave that as Helvetica. That's fine, but now if I select that and make it "bold" or "medium italic", and then if I basically set that as a text style; I go over here to my styles or library icon in Adobe XD, and then just click on the "plus" icon in the "Character Styles", I've just added this as a character style. Then I'm also going to add this blue color as a color style; again, I'm going to click on the rectangle with our blue fill and click on the "plus" icon here, and that's just going to add the colors to the library in Adobe XD. I can also do things like change just one word to be a specific fill; if I want to change this to match this libary color, I can do that as well, and that's what that looks like there. If I now save this file; I'm just going to save that to my desktop, I'm going to override the file that's already there.

Then now if we import that file into Figma using the Convertify Figma plugin, I'm just opening it up again, and I'm going to drag that design file from Adobe XD into Figma, drop that in, and you can see here it's converted our layers as we'd expect; but the difference this time is that we now have these styles in our Figma document, and because we've got this toggle selected here, which is the toggle to import color and text styles from Adobe XD into Figma, because I've got that checked and because my design file from Adobe XD has these color libraries and character style libraries included when it gets imported into Figma, that's automatically going to also import those text styles and color styles here. Now if we actually click on our rectangle, we can see that that's linked to acolor style in Figma; we can see what that color style looks like and we can change it, so we've also got the gray color style and we can switch between those as you normally would in Figma, but those have automatically been imported from Adobe XD to Figma. The same goes for our text Styles; if we highlight this layer style here we can see that that is actually linked up to our font style. We can see that the Helvetica style in "medium italic", size 50, which is exactly what we set in Adobe XD, and that's what's being imported as a style into Figma. It's just a quick demo to show you how the styles work if you've got them set up in Adobe XD.

The other thing I just wanted to show you was the prototyping. Let's say we've got two different artboards or frames in our Adobe XD file and we want to prototype these frames together somehow, all you need to do is if you've already got this set up, you don't need to do this; but if you're using Adobe XD to do prototyping, you just switch to the prototyping tab up the top and click on "Prototype", and then you click on the element you want to link to a specific frame or artboard, and you just drag that little arrow onto the artboard you want to link to. In this case, I'm just going to keep it really simple, I'm just going to do a tap and transition to this other artboard and then I'm just going to link this other rectangle back to the previous artboard, and just going to auto-animate that as well.

I'm just going to save that to my desktop and override the existing one I already had, I'm just going to replace that, and once again I'm just going to drag and drop that Adobe XD file into Figma, let go, and you can see it's imported the file as we'd expect, but now we'll do the same thing in Figma. If we click on the "Prototype" tab, you can see that the prototype links that we just set up in Adobe XD have also been carried over to our Figma file. Not only has it imported the layers, not only is it imported the colors and text styles, it's also imported the prototype links; and again, that's just because we've got this "Import prototype links" toggle turned on. If you turn that off, it won't import those prototype links, so if you just wanted to import the flat design without any prototypes, you can do that by just toggling off this thing before you import; but by default it will always import prototypes if they exist.

That's basically what it looks like, you can see here that we've got those two links set up, and it's carried over the animation styles as well. I'll just close off the Figma plugin for now, and you can see here if we actually go into the details, the "dissolve" transition has been preserved and the "auto-animate" transition has also been preserved using the smart animate feature. If I click on "Play", that's just going to open up the Figma prototype, and we should be able to click on this rectangle and dissolve it to there; that's now on our second artboard, and if we click on this rectangle it should jump back to the first one with the auto-animate property carried over.

That's what it looks like, and the only thing I haven't covered is components and instances, but if you do have components set up as well; for example, if we were to create a component in this file. Let's just go ahead and do that now really quickly; if I go back to my "Design" tab and just open up my layers and click on this rectangle, I'll make a terrible button component here. If I just create that rectangle and add some text, I'll just do that on top and I'm just going to really quickly set that to white, and as I said this is the worst button component you've ever seen, but if we select those two layers and create a component by clicking "Make component" and then we go to our library here, drag that component onto the page and just set that as "New", because we're going to override the text, and we're going to override the button color as well.

I'm going to save that one more time, and I'm going to put that on my desktop and replace it, and one more time, I'm just going to re-run the Convertify Figma plugin, and one last time, let's drag and drop that Adobe XD file into Figma and import it. There we go, you can see this time because I've made those components and instances, we've got our component on the left here; we've got "Component 1", which is our button component and we've also got our instance of the component. You can see here that the instance has been replaced with the new text that we set, and the different color that we set, but these are still components and instances; if we change the styles of that particular button, for example,if we just change the position, you can see here that the position of the button in the component and the position of the button in the instance are both still linked because they are instance and component. The same goes for the rectangle; we can change the size of the button and that will be rolled out to the instance as well, and of course you can access those from your "Assets" panel, if you go to your assets panel in Figma, you can see that the component has been imported just the way you'd expect, and you can drag that in and have another instance as well. Of course, you can override that too, and that's what that looks like there.

Okay, I think that basically covers everything I wanted to talk about regarding importing your designs from Adobe XD into Figma automatically. Obviously this is a massive pain if you need to do it manually, and a lot of people do unfortunately have to do it manually and use very strange workarounds involving SVGs and other things. Half of which I believe don't even work anymore for whatever reason; that might be a change from the Adobe side or Figma side, unintentionally or otherwise, but yes, this seems to be a pretty common request for converting files. If you do need to import your Adobe XD files or Adobe XD designs, including styles, including components, including prototyping, all that good stuff, then please feel free to give Convertify a try. This might be helpful for you if you want to automate that process, especially if you have much larger files than this; this is a fairly small example, but some of the other examples, the landing pages that we converted from Adobe XD to Figma earlier in the video, and files that are much bigger than those, this is really going to save you a lot of time if you can just automatically convert a lot of those layers.

As I mentioned before, this is currently a brand new feature; it is currently in BETA. As you can see it works very well, but as I mentioned, specifically around text, there will be some differences and this is something that will be improved over time. If you do notice a couple of issues with your text layers or other types of issues relating to vectors, these are already known and currently being worked on; hang in there. If you do notice any issues, feel free to get in touch or leave a question, and I'm sure that we can get the Figma plugin updated as quickly as possible for you to help mitigate some of those issues. If you've made it this far, thank you as always for watching, and we'll be back soon with more Figma tutorials just like this one very soon.

---

---
type: tutorial
title: How to translate email designs in Figma with the Lokalise API using Emailify
date: 2022-09-01T00:00:00.000Z
---

# How to translate email designs in Figma with the Lokalise API using Emailify



#### Video Transcript

Today I'm going to be showing you how to translate your email designs using the Lokalise platform in combination with Figma. I'm going to go through this step by step with you, and if you follow along we'll get there in the end, as there's a few things to go through, so let's get started.

The first thing we need to do is go to Figma and just open up a brand new Figma file and then go to the "Resources" icon up the top in the header here and just search for the word "Emailify", and you'll see the Emailify Figma plugin pop-up. All you need to do is either click on the "Run" button here or you can save the Figma plugin to your Figma plugins list by clicking on this little three dots "More options" icon and you can click on "Save Figma plugin" and that's just going to save the Figma plugin for easy access later. If you have already installed that or you just want to run it you can either click that "Run" button or if you've saved it, you can right click anywhere on the page go down to "Plugins" go to "Saved plugins" and then just click on the "Emailify" Figma plugin; and that's just going to start up the Figma plugin that we just saved a second ago.

If you haven't used this Figma plugin before, there's some other Figma tutorials on the YouTube channel with how to design the emails, but for today I'm just going to do a really simple example. I'm just going to call this one "Jiro eDM" and I'm going to call that just as a temporary name. I'm going to click on the 
"Add new Emailify container" button; this is basically just going to add a new Emailify frame and this just allows us to add content to the email. I can add things like these components and I can add pretty much anything I want from this list, or I can add custom elements down here. For today, we're just going to keep it really, really simple just to show you how to actually translate these designs in a moment. I'm just going to leave it there, I'm going to keep it really simple and what we want to do today is translate this design into a few different languages; and the way we can do that is by clicking on the "Localize" button in the Emailify Figma plugin header. 

If you go ahead and click on "Localize" now, the default option is to localize the file via an Excel spreadsheet; there's another video on the YouTube channel that goes through that process, but for today I'm actually going to be focusing on the Lokalise API; this is the API for this service that we're just looking at a moment ago, this Lokalise platform. Instead of using Excel I'm going to click on the "Lokalise API" option and that's going to bring up a couple of different fields for me; to get these fields we just need to have a Lokalise account. If you haven't already done so, you can click on this "Try it free" button on the Lokalise website and sign up for a free account; that's a 14 day trial. 

I've already signed up for Lokalise, so if you've signed up and you've logged in you should come to a screen that looks like this, and it'll ask you to create your first project. We can create our project by clicking on the get started link and you'll see this add project screen come up. What we want to do is just give it a name, so we can say "Email translations for Jiro eDM" and you can choose a base language; it just defaults to "English", so I'm just going to leave it as that, and then you can select the target languages that you want. For example, if you want to translate it into French, you want to translate it into Dutch, and let's say Korean; we can add those as our target languages, so these are languages we're going to translate the original language into. Whatever design you're using, whatever language you're using in your designs, select that as the base language and then any extra ones just put them in there and then we basically want to leave it as "Software Localization", and click "Proceed".

Once that loads up, you'll see this brand new screen which is now your project. You've got the project loaded up and what we can do now is it's giving us the option to add content via all these different methods, but we don't actually want to do any of these, we want Figma to create this content for us because we've already got it in our design, we've already got this text. What we're going to do is get this text into Lokalise automatically, and the way we do that is by using the Lokalise API. As you noticed in the Figma plugin there's two fields it's asking us for the "Project ID"; to get the Project ID, we actually just copy that from the URL; on our project page up here just grab that whole ID after the "/project/", you want to grab that ID, copy it and then paste that into the "Project ID" field in your Figma plugin.

I've just pasted that in there, and then we also need the "API Token"; you can click on that link and that'll bring you into the settings page for your profile, and you'll see this "API Tokens" option on the left, and all you need to do is go ahead and click on this "Generate a token" link; if you click on 
"Generate a token" and select the token type as "Read and write access to your projects" and then we're going to click on "Generate" and that's going to give us a brand new API key that we can also copy. I'm going to copy this token, I'm going to highlight that, I'm going to copy it, and I'm going to copy that token again into the "API Token" field in the Figma plugin Lokalise options; I'm going to paste that in and that should automatically load up our project.

You can see here it's loaded up the Lokalise project, we can see the project name over here; "Email translations for Jiro eDM", which is exactly what we called it in our project over here and so this by itself this doesn't do anything, it's just connected us to the project. We've got that loaded up now and you can see down here it's loaded in all of our languages that's associated with the project; what we want to do is we want to actually upload this email into Lokalise, and we do that by clicking on the email frame, so if you've got multiple emails you'll see multiple items here we've just got one for today. I've just checked that email, and then I'm going to go ahead and click on this "Upload" button; and it's got English as the base language because that's our base language that we set in the project. I'm just going to go ahead and click on "Upload" and that's basically going to upload all of the text content and screenshots of any emails that you've selected over on the left hand side here.

It's just telling us that it's uploaded the text from one email until into Lokalise; that should be done now. Now if we switch back into our browser, or you can click on this link here which will open up the project link in your browser. I've already got it open, so I'm just going to refresh that page now and you can see here after I've refreshed it, we've gone from having no content in Lokalise to having all of our text content from Figma now in Lokalise. Just to go through what happened there, we've uploaded the design from Figma; this is the design we had and so basically any text layers have been exported as individual text keys, as they call them in Lokalise, directly from the Figma plugin. We haven't had to manually add this, it has just synced it directly from Figma into Lokalise, and you can also see here we've got screenshots. If you click on the screenshots menu item, you'll actually be able to check out what the screenshot is. If you've got someone translating this on your behalf, it'll be a bit easier for them to actually see what each bit of text relates to; they can compare the screenshots with the actual text.

For now we're just going to stay on the "Editor" screen, and what we can do is now we can actually start translating this content in Lokalise. The way we do that is just by editing these fields; if you click on the "Dutch" field which is currently empty what we can do is we can take that initial bit of text, so I'm going to copy the English one and I'm going to put that into Google Translate. If we do Google Translate, I'll just do it to French first; if we copy that translation and click on the French field paste that in and do the same thing for Dutch; if we change this now to Dutch and copy that; we can copy that one and paste that in and finally we'll just do the Korean translation as well; if we do Korean, pop that in and copy that, and that'll be the last one that we'll add in. This is just one text layer in Figma, you can obviously go through and translate all of them; I'm not going to do them all today, I'm just going to show you an example of doing one.

Once we're happy with that, and we know that we actually want to now import that back into Figma, all we need to do is jump back into the Figma plugin; we've already got our page set up with the Lokalise API Token and the Lokalise Project ID. Instead of clicking "Upload", this time we're actually just going to click on the "Import Translations" button; I'm going to click on that button now and you'll see what happens. If I click "Import Translations", that's going to load up any translations that exist and import them into our Figma file. To go through again what just happened there, we were on page one; page one is where our original Emailify design is, and we clicked on "Import Translations", and now if we jump to this second page, the Figma plugin has basically gone ahead and created a brand new page with a little timestamp so you can see when it was imported. It's got a little "Translations" flag so you know that this page has been translated, and you can see here on the left we've got a copy of our original frame; this is the original frame in Figma just as a reference, and then we've basically got every locale or every language that we have in Lokalise over here is now also being imported as a frame itself. 

Each frame is its own frame per language and that's been pulled in; you can see the translations that we just added from Google Translate and added into the Lokalise platform are all being pulled in. Those are all being replaced in Figma automatically, so we didn't have to do any work there it just automatically imported them which is really cool, and of course now that we've actually got these in here you can see that if we go to the "Preview" button in the Figma plugin, these are now fully ready to go, HTML exportable emails. We can actually export all of these emails at once; if we wanted to export all of these languages in one go, you can easily do that just by using the "Export HTML" button and clicking on "Export", and that's basically what it looks like. You can see all the different languages looking really good and if we had actually translated all of the text, these would all be fully localized HTML emails that you'd now be able to send out. 

That's basically what that looks like there, and as I said, you can go through and update this. If you wanted to actually update these these bits of text again, just go back to your original design and if we wanted to change this "Book Now" label, so we can say "Contact Us" and you want to upload that again, you just click on the "Upload" button and wait for that to finish uploading. Once it says it's finished we can jump back into the browser in just a moment, it's just uploading the screenshot again as well, which we'll see in a second. If you refresh that page in a second, you should see this update; now you can see "Book Now" has been changed to "Contact Us" and that's just exactly what we wanted. If we go back to screenshots now, you can see that the screenshot has been updated, too. That's exactly as you'd expect, and if we jump back into the editor you can see what that looks like there.

If we now import that translation one more time; for example, if we decided we don't like that particular phrasing, we can change it to "Get In Touch" for example, this is the English variant, and you'll see here if we now import that translation again, it's going to import it to a brand new page once again, as you're basically versioning these as you go in Figma. If we just close off the Figma plugin for a moment and zoom in, you can see that over here where the original one had "Contact Us" because that's what we exported from Figma, the English one's actually been updated with "Get In Touch"; it's just kept the copy of the original one in Figma, but you can also see what the updated copy for the original language looks like next to it as well.

That's basically what it looks like; it's a very, very simple process. If you're already using Lokalise, this is a really handy integration that you can go ahead and use, or if you're interested in translating your email designs in Figma, perhaps this is another option if you don't want to use the Excel spreadsheet method, and you want to have a bit more of a web-based platform, this is definitely a cool option that a bunch of people have been requesting have been asking for an integration. This has just come out today, so it's very new; everything should be working as expected, but if you have any requests or any questions, please get in touch, and more than happy to help, as always. 

That's going to do it for today; I'll keep it pretty simple, as I said, if you want to get more detail about how to actually design these emails and customize them, there's a whole bunch of other videos on the YouTube channel if you just go to the "Emailify" playlist, there'll be a bunch of other Figma tutorials that you can look through on YouTube, but that's going to be it for today. Thank you as always for watching, and we'll be back soon with more Figma tutorials just like this one very soon.

---

---
type: tutorial
title: How to export Figma to EPS files in one click using Convertify
date: 2022-08-29T00:00:00.000Z
---

# How to export Figma to EPS files in one click using Convertify



#### Video Transcript

Today I'm going to be showing you how to export your designs from Figma to EPS, or Figma to PostScript with one click, using the Convertify Figma plugin.

To get started, if you just go to the file that you want to export from Figma to EPS and then click on this "Resources" icon up in the top header of the Figma toolbar, and then just search for the Figma plugin called "Convertify", you'll see Convertify pop-up. You can go ahead and click on either the "Run" button or click on these three dots on the side where it says "More options and click "Save plugin", and that'll save it to your Figma plugins list.

Once you've got it saved, you can either run the Figma plugin by just clicking the "Run" button here, or you can right click anywhere on your page, go down to "Plugins" and then under "Saved plugins" you'll see Convertify pop up. I've already got it in my recent Figma plugins list, I'm just going to click on the "Convertify" Figma plugin from there and that's going to run the Figma plugin that we just looked at a second ago. When the Figma plugin runs for the first time, all you need to do is make sure that you're on the right page; for this example I'm just going to convert this CV from Figma to an EPS file. All we need to do is make sure we're on this page and it's going to convert every single artboard or frame on the Figma page, and it's going to convert each of those into its own EPS file. All we need to do is click on "Convert to EPS" and that's going to start the conversion process of taking that frame and exporting it to an EPS file from Figma.

It was really quick, as this is a pretty small design. The EPS file is ready, so I'm just going to click on the "Download .eps", button save that to my desktop, and if I open up my finder you'll see that we've now got the EPS file there. I can preview that by just by double clicking on it, and I'm just on Mac, so it's going to actually convert that into a PDF so that you can preview it, but you can actually send that EPS file or open that EPS file with other programs as well. Typically, if you're going to be printing your designs or you're going to send your designs to a professional printer, usually they'll ask for an EPS PostScript file; this can be handy for that.

That was an example of how to convert one page or one frame to an EPS file, but if you've got multiple frames; for example this presentation here, I might want to export a bunch of these frames out from Figma to EPS. Again, I can just run the Figma plugin by right-clicking anywhere, going down to "Plugins" and clicking on the "Convertify" Figma plugin, and that's just going to open up the Figma plugin that we just looked at in the other file a second ago. I've got it saved to my Figma plugins list, so I can quickly access it again. To convert these frames from Figma to EPS, we have a couple of options; we can do the same option as before, so if we click on this "Convert to EPS" button again, it's going to take each of these frames, parent level frames or "artboards", it's going to take each of those, and export them out to an individual EPS file.

If we only want a few of these, what we can do is actually click on the artboards that we want to export from Figma to EPS, and you can see here at the bottom of the Figma plugin it comes up with this little pop-up menu, and it's going to say only "Convert the selected top level parent frames"; you can see if you open up this we've got our three frames or artboards selected here, and then all you need to do is click on this drop down list here and just change that to "EPS". I'm going to click on "EPS" and then I'm going to click on "Convert layers to EPS" and what that's going to do is it's going to take just those three artboards, the "Intro", "Principle 1" and "Principle 2"; it's going to take those three artboards only, and it's going to process each of those into their own EPS file and then zip them up for us so we can download them.

It's just finishing up frame number three now; in a second once that completes, we should get a button to download this EPS package; the converted files are ready all we need to do is click on the download EPS button again; I'm going to click on that button save this to my desktop and this time because we converted more than one it's gone ahead and zipped up those EPS files for us. I'm just going to unzip the zip file and double click on the folder, and you can see here we've got our three EPS files this time. That's just a really quick way of only exporting the artboards that you actually want from Figma out to an EPS file, instead of converting the entire page each time. If again if we did click on this "Convert to EPS" button, it would convert this entire page; each of these artboards on the page would get exported from Figma to their own EPS file, but if you only need a couple, then just select those ones that you need, and then you can click on this little drop down at the bottom to make sure "EPS" is selected; then click on "Convert layers to EPS" and that'll do it for you.

I hope that's helpful; that's a really quick Figma tutorial just to show you this new option in the Convertify Figma plugin, and that will allow you to convert any artboards that you need directly from Figma to EPS, or Figma to PostScript, if you happen to need that file format, this is a really quick way of doing it. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to export HTML emails from Figma to Mailjet using Emailify
date: 2022-07-30T00:00:00.000Z
---

# How to export HTML emails from Figma to Mailjet using Emailify



#### Video Transcript

Today I'm going to be showing you how to export your HTML email designs directly up into the Mailjet email platform. If you're a user of Mailjet and you want to automatically upload your HTML templates into Mailjet directly from Figma, this Figma tutorial is going to go through that right now.

The first thing we need to do to get started is if you go to the "Resources" icon in your Figma header toolbar and click on that, and if you search in the search bar for the word "Emailify", you'll see Emailify pop up. If you haven't already done so, you can install the Figma plugin by clicking on this little icon here with the three dots which says "More options", and if you click on that, and click on "Install", that's going to install the Figma plugin to make it easy to access again later.

If you've already installed the Figma plugin you can run the plugin by clicking on "Run", or if you've already run the Figma plugin once in the file, you'll see a little shortcut pop up on the right hand side here. I'm just going to run the Figma plugin by clicking on that, and that's just going to run the Emailify Figma plugin we just installed a second ago.

If you're new to the Figma plugin, we have some other Figma tutorials on the YouTube channel to show how to actually go about designing these emails. I've already got a really basic one designed just using some of the pre-built components in the Figma plugin, but you can customize these and build these out any way you want to get the design right before you export it; in this case we're just going to be focusing on exporting an existing Figma email design to Mailjet.

To export a Figma email design that you've already got created to Mailjet, you can first verify the HTML output by clicking on the "Preview" button; click on "Preview" and that's just going to load up a really quick HTML email preview that gives you a real sense of what the email is going to look like when it is uploaded into Mailjet from Figma. I'm quite happy with that the HTML looks good it's matching up with my Figma design.

I'm going to go ahead and export this to Mailjet now, and we do that by clicking on the "Export HTML" button; I'm going to click on that now, and by default it'll select the "HTML Email" export option, which basically just downloads the HTML email to a zip file, but for today we want to export this directly to our Mailjet account. I'm going to scroll down the export options and click on the "Mailjet" option and this is going to change these inputs below to input our API key. There's a link here in the description of the Figma plugin where it will ask you to import your key and secret from Mailjet, and that's just going to take you to a page in your Mailjet account where you can get these details. For example, in my version, I've got my "API Key Management" screen up which is from the link that was in the Figma plugin, and what you want to do is basically go down here to the "Primary API Key" and you want to click on this little toggle visibility icon to get your API key. You can copy that, and when you generate your API key originally it'll give you a secret key that you should have copied somewhere else; hopefully you've got that handy. If you've forgotten it, or if you need to reset it, you can do that by clicking on the little settings icon over here and resetting that secret key, but if you do have it stored somewhere just get that file out or get that document open, and we'll copy that secret key as well.

Once you've done that, you can paste the API key and the secret into these two text fields here, and once you've done that all you need to do is select the emails that you want to upload to Mailjet. In this case, I've just got one selected, and then click on the "Upload to Mailjet" button; this is now generating the production ready HTML from your Figma designs and uploading the template into Mailjet. It's quite quick, it's already been uploaded, and you can see here it's telling us that our Mailjet templates have been uploaded. We can view them in the Mailjet marketing templates page once we've logged into Mailjet. 

I'm already logged into my Mailjet account, so I'm going to go back to the browser and open up the link that was just in the confirmation message in the Figma plugin. This is going to basically take us to the template section and the marketing templates; you can see up here it's in the "Marketing" tab and you can see here that this was updated half a minute ago, so this is definitely the email that we just uploaded from Figma into Mailjet, and we can view it just by clicking on the "Preview" link on the thumbnail and that will take us to the preview page for the email.

You can see here that it has uploaded the HTML exactly the way that we saw it in our Figma preview, which is really good, but we can also go ahead and edit that as well if we need to. If you click on the little settings icon and click on "Edit", that's going to also take us into the Mailjet code editor as well. If you did need to make any code changes, ideally you would have done it beforehand in Figma because it's just much easier to do that without kind of rummaging through the code, but if you do need to do that, you can jump in here and actually edit the template in the Mailjet HTML editor as well. Once again, you can preview that or send a test email to yourself, too.

That's it, that's basically the whole process; as I said, this video is not going to cover the design process or how to use components, or customize those. If you're interested in that part of the Figma plugin, please feel free to check out some of the other videos on the YouTube channel, there's a few in the Emailify playlist that goes into quite a lot of detail about how to actually design these emails before you upload them or export them to HTML; those would be worth checking out, but if you're already using Emailify or you were just interested to see how to automate getting an HTML template out of Figma into your Mailjet account automatically, this is definitely going to be the quickest way to go about it.

I hope you found that useful if you are a Mailjet user and a Figma user; feel free to try it with your team, and hopefully it improves your workflow not having to manually upload these templates every single time, so it should be much quicker this way. Thank you as always for watching, and we'll be back soon with more Figma tutorials just like this one very soon.

---

---
type: tutorial
title: How to import spreadsheets to tables for HTML emails in Figma using Emailify
date: 2022-07-18T00:00:00.000Z
---

# How to import spreadsheets to tables for HTML emails in Figma using Emailify



#### Video Transcript

Today I'm going to be showing you how to automatically import a spreadsheet into a table component for your email designs which you can then export out to HTML.

To get started, we can just jump into a new Figma file and go to the "Resources" icon in the top header menu here. I'm just going to click on that, click on the "Plugins" tab and then we're just going to search for the word "Emailify", and you'll see Emailify pop up as a result. Just go ahead and click on that, and then to install the Figma plugin, we just click on this little three dots icon where it says "More options", click on that, then click on "Install" and that's just going to install the Emailify Figma plugin that we're going to use for this Figma tutorial.

To run the Figma plugin, we just right click anywhere on your Figma page, go down to "Plugins", go to "Installed Figma Plugins", click on "Emailify" and that will run the Figma plugin that we just installed a minute ago. The first time you run the Figma plugin it's going to ask you to create a new email frame, so I'm just going to call this one "Table Test" for today just to show you an example of the table component. Once you've done that, just click on the "Add new Emailify container" button and that's just going to add a blank email frame onto the page. This is going to allow us to do different things like add pre-built components from the components menu here, you can click on any of these, you can change the category and pick different ones, but for today we're actually going to be creating a custom table component from a spreadsheet automatically.

To do that we just need to use this little "Quick add element to selected layer" function at the bottom of the Figma plugin. The way this works is when you select a different type of element or a different type of layer in your email it's going to give you different options that you can add to that layer. For example, if we click on the email frame, you can see here we've got the email layer selected it's going to allow us to add a few different content types. I'm going to add the "Content row" and click on the "Add" button and that's just going to add a brand new content row that we can now use in our email to add more components. I'm just going to click on the "Column" element inside of the row and this is where our content layers are going to be added. For today, I'm going to be focusing on importing a spreadsheet to a table into this content component, but you can add a bunch of different elements as well; there's text layers, image layers, button layers, you can kind of build all of this out. 

Today we're just going to be adding a spreadsheet, so go ahead and click on the "Add spreadsheed" option in the select menu, and again, I've just got the "Column" layer selected and that's why I've been able to select this particular option. Once you've selected the "Add spreadsheet" option, it's going to reveal a couple of new fields that we can use; the first one is it's going to let us import a table from an Excel spreadsheet file or a CSV file, or alternatively we can import a table from a public Google Sheet. I'll show you what both of those look like. 

I'm just going to switch into my browser where I've got Google Sheets open, and I'm just going to go through a rough idea of what the table structure or the spreadsheet structure should look like. The first row is always the "header" and the header is basically just containing your labels that you want for each column. For example, this is a movie app, so I've got a poster, I've got a title, I've got reviews. Underneath the poster column I've also got a bunch of image links; if we open one of these up you'll see that this is actually an image, and if you add a link to an image in your spreadsheet columns that'll get automatically loaded as an image file into Figma as well; I'll show you what that looks like in a moment. The rest of these fields are just purely text, so we can just leave them as is and that's totally fine. You can customize the spreadsheet to have as many columns as you like and as many rows as you like and this will get imported in a moment.

The two ways to import this is you can either download the spreadsheet as a Excel spreadsheet or a CSV file. Excel is probably better, and you can also edit this spreadsheet in Microsoft Excel and save it as an Excel (XLSX) file. You don't have to use Google Sheets, but for today I'm just using Google Sheets, as I said you, can save that out as an Excel file such as the one I've got up here and that'll be usable so we can drag it into the Figma plugin. I'll show you what that looks like; we've got our Excel file, and I'm just going to drag and drop that Excel file into the Figma plugin, into this little drop zone here. It's loaded up four rows that it's going to import, so once it's ready you can go ahead and click on the "Add" button and it's going to go ahead and download those images that we included in our spreadsheet data, and then once that's done, it's going to automatically import all of that data from the spreadsheet into Figma as a table. 

You can see here it's added this table into Figma, we can see it's got all the layers in there and it's also gone ahead and created a brand new page with that table component. I'll show you what that looks like as well; if we switch onto the table component page which is just by clicking on this little left hand side, I'll just move the Figma plugin over for a second, and you can see here that we've got a couple of different components. We've got our table header row component, and what this does is it allows us to actually adjust the width of those columns if we wanted some to be narrower or some to be wider, we can quite easily do that. We can also change the image size, if we just unhide this poster layer, the image layer, and if we wanted to change that we can edit what that looks like. We're just going to change the aspect ratio of that and then hide that; if we go back into our email you'll basically see that we've now got the changes we've made to the width and the changes we made to the poster all coming through in the different sizes. I'm going to remove that for now, and I'm going to get rid of that page. 

Now I'm going to show you what it looks like to add that table, or add that spreadsheet, from a Google Sheets URL as well; all I'm going to do is click on my "Column" layer again, I'm going to click on the "Choose element to add" option menu, I'm going to click on "Add spreadsheet" again and this time instead of dropping in an Excel spreadsheet file, I'm going to go back to my Google Sheet link and I'm going to click on this little "Share" button in the top right hand corner. Once I click on that, what I want to do is I'm going to change this "General Access" setting from "Restricted" to "Anyone with the link"; when I click on "Anyone with the link" that basically means that anyone I share this link with will have public access to it, including the Figma plugin. 

I've just clicked on that "Copy link" button to copy the share link for the spreadsheet, I'm going to minimize my browser, jump back into the Emailify plugin and instead of dropping that file in, I'm going to go down here where it says "Import table from public Google Sheet", paste that in, that's going to load up the Google Sheet, and it's saying that it's ready to go. We can click on the "Add" button again; I'm going to click on that "Add" button up here again, that's going to download the images that we set for our poster column, and once it finishes doing that, it's going to import that data into Emailify. Again, you can see we've got the exact same data that we had from our Excel file, but this time we've loaded it in from the public Google Sheet URL. 

If we jump back again to our component, we can make those changes; I can go to my poster, I can change the width and height of that image to match the aspect ratio if I need to. I can also change some of these things up here, so if I wanted to hide certain columns, I can just click on the the header row component and I can just hide certain columns if I want to do that; I can hide the reviews column, and that's just a really easy way for me to customize the width and customize the display of a lot of these different things. We can really fine tune what that looks like and we can reduce that width as well. 

If we switch back into Emailify, you'll see here that we've now got a customized table that we can actually now render out to HTML, and the way we can do that as a preview is just by clicking on this little "Preview" button in the Figma plugin; I'm going to click on "Preview" it's going to generate an HTML preview. You can see here this is HTML, I can select and move around, I can see what it looks like on mobile; this is the mobile width, I can shrink that down and see what it looks like, and of course, you can customize all of this as well as you'd expect in Figma.

If you want to do things like adjust the vertical alignment, you can just change the auto layout properties either in the instances here or you can do that in the actual component page as well; if I go back to the component page and I go to the header component, I'm going to go there I'm going to change the vertical alignment to the top, and that will automatically update the vertical alignment to the top in my instances as well. Then if I click on the "refresh" icon button in the Figma plugin you can see here that that change has been reflected as well. Same thing with the border stroke; for example, I've got this border stroke set on the bottom of the row; if I change that color to black, that's going to change the color to black here. If I get rid of that entirely, I can just refresh that, and now I've got no dividers; it's just a nice way to customize it really easily. If you just jump back into the component page, go to the data table header row component and if you customize that, that's going to roll out all the changes to your instances as well. You can basically make the design change in one place and see those changes get rolled out across the board automatically, and that's just a really fast way of making changes to your table or changes to data; that's roughly what it looks like.

As I said, you can export this out to HTML as well. If you want to export the email from Figma to HTML, just click on the "Export HTML" button and select your platform; you can either export to an HTML package, or you can export it to a specific platform. If you're a MailChimp user, you can paste in your key, or if you're a Klaviyo user, you can paste in your key, or any of these other platforms, but for today I'm just going to be exporting to HTML. I'm going to click on the "HTML" option, click the "Export to HTML" button, and you can add a subject line if you need to; I'm not going to add one for today, I'm just going to export that. Once it's ready just click on the "Download your zip file" button, and that'll allow you to save it to wherever you want. I'm just going to save it to my desktop, I'm going to unzip that by double clicking the zip file, and then I'm going to open up the folder. There's a preview HTML file that we can use, so I'm just going to double click that and that's basically going to give us a preview of what it looks like on large screens and also on mobile as well. If you need the actual email files, they're just inside of this folder; you can see inside here we've got our HTML file and that's what it looks like. All the images are in there and this is all the HTML, that's production ready HTML, that's ready to go.

I think that's going to be it for today, I really just wanted to focus on the custom table or create Figma tables from spreadsheets or Google Sheets, or Excel (XLSX) files, or CSV files; whichever spreadsheet format you prefer, and just show you how easy it is to really quickly import those spreadsheets into a Figma table that will then be rendered out as HTML from your Figma email designs. I hope you found that helpful if you've been wondering how to automate your Figma table creation process, specifically for HTML emails in Figma; this is going to be the quickest way to do it, and allow you to customize it really quickly by using the component based structure that gets created on this other page over here. I'm going to leave it there for today; thank you as always for watching, and we'll be back soon with more Figma tutorials just like this one very soon.

---

---
type: article
title: Strictly Business
date: 2022-07-04T00:00:00.000Z
---

# Strictly Business



As with the last mid-year update, this [strictly business](https://www.youtube.com/watch?v=z26QCzYZH4w) update also falls on July 4th. Even though Hypermatic is based in Australia, and not the United States (or Japan, as some seem to think, based on the design of this website), I do like the idea of doing these mid-year updates on Independence Day, and re-focusing it on continuing to declare our independence from legacy design/development workflows.

### First half of 2022 — tl;dr

The first half of the year has been pretty full on, starting with the first couple of months being very focused on shipping our brand new [Commentful](/commentful) Figma plugin.

Just weeks later after the new plugin was released, we were taken by surprise and went through a very rapid and intensive [full rebrand](/articles/the-startup-formerly-known-as-figmatic/) across every aspect of the business and codebase from Figmatic to _Hypermatic_.

After that, we had to deal with the fallout of the sanctions put on Russia, which meant that all of our Russian customers were cut off from using our products overnight, due to their credit card payments being blocked and cancelled. It also meant that many of our customers from Ukraine were also wanting to pause their use of the products while things were so uncertain.

Shortly after taking care of those customers, we faced a new Figma bug related to image loading that caused some major speed issues for many of our plugins for over a month, and worked with customers to support them and help with workarounds, while manage expectations around when to expect a proper resolution for the core issue.

After these first 6 months of hard work shipping plugin updates and dealing with a the curveballs mentioned above, it feels like things are in a great place right now to get [back at it like a crack addict](https://www.youtube.com/watch?v=_DFypFVnSS0w) and really double down and focus on building and shipping all of the other exciting updates planned for our Figma plugins for the second half of 2022.

### Plugin update highlights in 2022 (so far)

There are multiple updates and small fixes shipped to multiple Figma plugins on a daily basis, but here are some cool highlights from the first half of 2022:

- Added new [e-commerce](https://x.com/hypermatic/status/1482116618415411201), [table](https://x.com/hypermatic/status/1481743788121157632) and [social](https://x.com/hypermatic/status/1483543333045940224) components for Emailify
- Shipped [localization](https://x.com/hypermatic/status/1508539037828927488) to Emailify and CopyDoc
- Rebuilt the Bannerify [animation timeline](https://x.com/hypermatic/status/1523557031680311296) to be scrubbable
- Shipped [LottieFile](https://x.com/hypermatic/status/1523832623428411392) animations support to Bannerify 
- Added [SendGrid](https://x.com/hypermatic/status/1524199850631626752) integration to Emailify
- Added support for [embedding videos](https://x.com/hypermatic/status/1526353953159774208) into Bannerify banners 
- Shipped [hover state](https://x.com/hypermatic/status/1531064573398482944) support for Bannerify animations
- Added [microphone](https://x.com/hypermatic/status/1531794938207547393) support to Crypto video recordings
- Added a way to [ignore Lorem Ipsum](https://x.com/hypermatic/status/1532208678405050368) from CopyDoc spellcheck
- Added support for [YouTube Shorts](https://x.com/hypermatic/status/1534783946613223424) to Pitchdeck presentations 
- Shipped a feature to add elements via [context selections](https://x.com/hypermatic/status/1535146201368383488) to Emailify 
- Added support for [background images/gradients](https://x.com/hypermatic/status/1540219612935372801) to Emailify
- Added custom [PDF metadata](https://x.com/hypermatic/status/1542397824671031296) to Pitchdeck exports 
- Added support for [individual borders](https://x.com/hypermatic/status/1540584084619272192) to Emailify elements
- Added [image carousel](https://x.com/hypermatic/status/1543427068951937024) components to Emailify

### Changes to how Figma plugins are installed

Over the last week, there has also been a new fundamental change to the way Figma plugins are installed, which has (so far) led to an 80-90% decrease in the number of installs for our plugins compared to pre-Figma update installations. These stats seem consistent with [global stats](https://figmastats.com/), which shows ~120,000 new plugin installs on June 25th, which dropped to ~6,700 new installs across all plugins on July 4th (today), almost a week after the new Figma Community update was launched.

Figma plugins can now be "Run" without being installed, so it's possible this will offset that net loss of "Installs", but it remains to be seen what positive or negative effects this update will have from here on in, once the initial confusion and muscle memory around how Figma users are used to working with plugins until now. Putting together a [video](https://www.youtube.com/watch?v=0bEnR3cpXI8) walkthrough on how to install plugins in 2022, and communicating directly with our own customers who have some confusion around this have been the main focus to help them adjust to this transition in the meantime.

### Removing live chat from the site

After having live chat as a support feature for the last 2.5 years, it has been removed from the Hypermatic site as of a few weeks ago, and has been replaced by email-only support instead.

The main reason for this is related to time zones; being based down here in Australia means that most of our customers are awake while we're asleep, which means that "live chat" messages aren't as live as they should be for much of the time. Live chat has been wonderful when it happens to sync up directly with other timezones, but other times these messages can be difficult to follow up the next day if the customer hasn't also left their email address in the prompt to receive any notifications.

Weirdly, switching to a purely asynchronous way of doing support (purely via email) has been working out well so far. The async nature of email itself sets an expectation that it won't be replied to right away, yet it is still treated as if it's live chat here either way, which leads to us having very fast response and resolution times compared with what would usually be anticipated for email support.

As with anything, there are always trade offs, but I believe that consolidating all support into one method is the right way to go ahead, and reduce any confusion and potential lost messages that can occur with the live chat approach.

Emails are all promptly replied to during the day, and processed first thing in the morning the following day, which means that the response/resolution time still ranges from a few minutes (during the day here) to a maximum of ~12-15 hours (if the email is processed in the morning here).

### Building a startup (in a recession)

In April 2020, 3 months after quitting my job and starting this company as a self-funded founder, I gave a talk called [Building a startup (in a pandemic)](https://www.youtube.com/watch?v=wOs8jgkzWQg). 

I gave the talk remotely via video during the second week of our "2 weeks to flatten the curve" [263 day](https://lockdownstats.melbourne/) Melbourne lockdown, and one of the main themes of the talk was my strategy for how to start a startup that would be profitable by relentlessly focusing on customers and building products to help them become more successful.

I think that many of things I talked about in that talk relating to running a startup during a downturn are also very relevant to the weakened economic climate we are in right now, which will be realised more broadly over the coming months. In that way, the approach of relentlessly focusing on delivering real value to customers and generating profit to have enough runway to continue the company over the long term has not changed.

To the surprise of everyone who seemed to love [MMT](https://www.businessinsider.com/personal-finance/modern-monetary-theory) (and total lack of surprise to everyone else), "2 weeks to flatten the curve" turned into "2 years to flatten the economy"; with <s>"transitory"</s> inflation caused by rates artificially kept at zero and inflating the [money supply](https://fred.stlouisfed.org/series/M2SL) by printing a tonne of it. 

Just like "transitory inflation" was always a lie, I think this is also true of "peak inflation" and any talk of a "soft landing". I believe that we are (officially) about to recognise that we've been in a recession since January 2022, so I thought it would be worth very briefly reflecting on the sustainability of Hypermatic and re-assure anyone who cares (probably nobody) that we are in an excellent position to weather any storm that lays ahead of us over the next 12-24 months, and beyond.

Hypermatic is proudly self-funded, [default alive](http://www.paulgraham.com/aord.html) and [default investible](https://x.com/davidsacks/status/1528102541723979776) (however, there are still no plans to take any funding), with high enough free cash flow and a low enough burn-rate to allow the business to continue indefinitely creating value for all of our customers over the long term.

We have never taken any funding, have never spent outside of our means, and as a result have often been dismissed by some VCs as being little more than a "lifestyle business". However, with the "everything bubble" and irrational inflated startup valuations of the last 2 years in the rear view mirror, the party is now coming to an end; and I am more confident than ever that the decision to remain self-funded and focus on creating real value for our customers and being profitable remains the correct one.

Some would say that this means that we've sacrificed speed, but I don't agree with that at all; having more funding or throwing more people at a business does not automatically guarantee velocity, and in many cases can lead to complacency, lack of focus or productive pursuits being traded for more bureaucratic things like meetings or slower decision making and action. 

### Looking ahead

I'm writing this update at the end of a dedicated 2 day business "retreat" to take a more focused pause from the day-to-day activities of running Hypermatic, which I personally still work on every single day as a "7 days per week" or "~70 hours per week" startup.

Amongst other things, one of the super helpful activities was going through and answering all of the excellent questions from Jason Cohen's excellent long form post about asking [extreme questions](https://longform.asmartbear.com/posts/extreme-questions/) to trigger new, better ideas, which really did clarify some of the shorter-term (next 6 months) and longer-term (next few years) decisions and product directions for Hypermatic. It was also very generative for other aspects of the business that aren't directly related to the products themselves, so I'm excited to experiment with some of those ideas in the future, too.

The next 6 months will be focused on shipping the most impactful updates/features to our existing Figma plugins, and get them all in an ever more solid spot than they are right now, while also continuing R&D work on the next brand new Figma plugin that will ship in 2023. The groundwork for other more future-focused ideas that will come later (post-2023) is also being laid down now to ensure that future vision for some of our products can be properly realised over time, too.

As I've said from day one, the focus always remains on creating value over the long-term, and that can only be done if we're able to survive and thrive during any downturns or uncertainty that comes along (as it is right now). and the long-term trajectory remains strong, hyper focused and most importantly, still around to see our mission through to the end (which we will be).

I'm still as excited about the business and future of it as I was on day one of starting it, back in 2019, and also having just as much fun working on it as ever. Momentum still feels super strong, which I think is really important, and I have a renewed sense of optimism about the months and years ahead, as we continue with the overarching mission of reducing the distance between design and production to zero.

---

---
type: tutorial
title: How to install Figma plugins in 2022
date: 2022-07-01T00:00:00.000Z
---

# How to install Figma plugins in 2022



#### Video Transcript

Today I'm going to be showing you the new way to install, and also uninstall, Figma plugins based on the latest Figma update that changes the way this works from the way that you're probably used to doing it.

To get started we just go to the Figma Community, and you can get there by just clicking on this little "Community" icon or text at the top, and that's going to bring you to the page that we're looking at now. Then, to find a Figma plugin you can either use the search box if you know what Figma plugin you want to install, or to browse Figma plugins, you can just go to the "Plugins" tab up the top here, click on that and that's going to bring up a list of all the available Figma plugins that you can install into Figma.

Today I'm just going to be using the Bannerify Figma plugin as an example to show you how to install a Figma plugin with this latest 2022 update. knowing that I want to install this Bannerify Figma plugin, all I need to do is click on the Figma plugin, go over to the detail page here and then you just need to click on this new "Try it out" button; this is where the "Install" button used to be, so you used to be able to just click on this button that said "Install" and that would just immediately install it to your Figma account and you could just start using it right away. They've just swapped this out for every Figma plugin, so every Figma plugin you want to install or use is now this "Try it out" button instead. 

It's a little bit of a funny wording, but I'll walk you through how it actually works. All you need to do is click on this new "Try it out" button; I'm going to click on that, and that's going to bring up a prompt for you to select the Figma account or the Figma team that you want to install the Figma plugin to. I'm just going to select my account that I'm already logged into, which is where I want it to be installed; I'm going to click on that, and what this does is it actually creates a brand new totally blank Figma file, and it names it what to be the same as whatever the Figma plugin you just clicked is. 

It'll create this brand new empty Figma file, so that'll be in your Figma drafts if you want to delete that later if you don't need it, and it automatically opens up this new "Resources" panel, which is located in the top of the Figma toolbar; this resource panel contains links to different Figma plugins and things like that. What you want to do is go down to this little three dot icon which says "More options", so if you hover over it, click on that, and to install the Figma plugin you just have to click on this little "Install" link here; and if we click on that, you'll see it's giving us a notification that it's installed the Bannerify Figma plugin.

Do make sure that you click on that little three dot icon if you want to install the Figma plugin properly. The alternative, as you can see here, is this new default action of "Run"; the "Run" button basically allows you to run the Figma plugin in your file without installing it, but that means it's not going to be there in your installed Figma plugins list the next time you want to use it again. You kind of have to go back and find it each time, which I think is a little bit more inconvenient than just having it installed if you know that you're going to be using on a regular basis.

Once you've already got a Figma plugin installed and you want to also uninstall that later down the track, or right away, you can uninstall it by doing the same thing. To uninstall a Figma plugin that you've already installed, you just need to find it under this "Resources" tab that we're already in, find the Figma plugin that you want to uninstall; it'll bring up this prompt when you click on it, and it'll look exactly the same, just click on that three dot icon again, and click on the "Uninstall" link this time. That's just now uninstalled the Figma plugin, but for now I'm just going to leave that Figma plugin installed. Again, I'm going to install the Figma plugin by clicking on the three dot icon, clicking on "Install", and that will install the Figma plugin for me.

As you can see here it's just a blank Figma file; for this particular Figma plugin it's probably not that useful to run it in a blank Figma file. If you do have another Figma file that you want to actually run the Figma plugin in, all you need to do is close off that new Figma file and delete it if you don't want it, jump back into a Figma file that you do want to run the Figma plugin in, and you'll be able to do that normally from then on. You can basically just right click anywhere, go down to "Plugins", then go down to "Installed Figma plugins", and then you can then go over to your Figma plugin that you just installed. Just click on the Figma plugin and that will load it up as you'd expect. 

That's what that looks like there; as I said, it's a little bit of a extra step in order to install the Figma plugin, but once you've got it installed it should be basically installed and accessible the way that you've already been used to running the Figma plugins. If the Figma plugin automatically adds itself to the column on the right hand side, you'll still be able to access it from there as well; that's just another way you can open up the Figma plugins if you do want to do that as well. 

As I mentioned, if you do want to access the Figma plugins from this new "Resources" menu, you can go ahead and click on that up here, and that's going to open up a list of all the recently installed or used Figma plugins. You can do that, and you can also change this "Recents" option to "Installed", so you can get a list of the installed Figma plugins that you've actually got installed on your Figma account, and that way it's going to be an easier overview of actually auditing what Figma plugins you've got installed, and giving you a much easier way to then jump into that Figma plugin and once again uninstall it if that's something you'd like to do. To uninstall the Figma plugin, you can just click on that "More options" icon, click on "Uninstall", or if you've already uninstalled it and you want to install it again, you can do the same thing; you just have to click on that icon, and then click on "Install". I'm just going to leave that installed, and we don't have to touch that again.
 
Okay, so that's basically the new process for how to install and uninstall Figma plugins based on this new mid-year 2022 update of the Figma app. This will work in the browser or in the Figma desktop app, which I'm using at the moment. It's really up to you, but once you do have the Figma plugin installed you'll be able to access that Figma plugin under your installed Figma plugins list regardless of where you login. That'll carry over wherever your Figma accounts being logged into and you don't have to worry about reinstalling the Figma plugins each time. Make sure you do install the Figma plugin if it's something you want to use, because just clicking on the "Run" button each time is going to kind of be a little bit annoying if you know that you actually want to keep that closely accessible in your installed Figma plugins list. That's how to install Figma plugins in 2022, if you're wondering what the new changes were and how to navigate them that's a basic overview of what it looks like.

I'll keep this Figma tutorial pretty short today. I hope that you've learned something if you're wondering how to install Figma plugins in 2022 with this new Figma update; this is currently how it works. It may change again in the future, and if it does I'm happy to record another video to go through it so you can see any other updates that are made at that point; but thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to easily add elements to HTML email designs in Figma using Emailify
date: 2022-06-10T00:00:00.000Z
---

# How to easily add elements to HTML email designs in Figma using Emailify



#### Video Transcript

Today I'm going to be showing you a brand new way to really easily build out your HTML email designs in Figma using the Emailify Figma plugin.

To do that, we just go to the Figma Community and if you haven't already done so, we're going to install the Emailify Figma plugin by searching for the word "Emailify", and under the "Plugins" tab you'll see Emailify pop up. If you haven't already installed it, just go ahead and click on the "Install" button on the right hand side and then you can switch back into your Figma file to get started.

Once you've gone back into your Figma file, just right click anywhere, go down to "Plugins" and then click on "Emailify", and that's just going to start up the Figma plugin we just installed a moment ago. You'll notice here that I've already got an email in my file, but if you're just getting started with the Figma plugin you can click on this little "plus" icon to create a new email. You can just create a new email frame here, and this is going to allow you to add either custom preset elements or preset modules from these menus, or for today we're actually going to be focusing on a brand new feature that doesn't rely on this either. Jjust for a quick refresher, you can add content components by clicking on any of these categories, clicking on any of these components and that will automatically add them into your Figma designs, just like that. 

For today, I'm going to be showing you a different way of going about this, and also a way to customize these that you've already added. For example, if we just add a few in here and let's say that we want to add some more columns into this particular component, we can now do that by just selecting our element; if we click on the row in Figma, I've got the row selected, and you'll notice down here there's a new option called "Quick add element to selected layer", and it's telling me that I've got a "row" selected. What that allows me to do is now add a new content column into that row just by clicking on this option, and then clicking on the "add" button. You can see here it's added a brand new content column, which we've now got selected as well, which gives us a whole set of different options. 

Now we can go into those options, and if we know that we need to add some text, we can add text to that column, we can add images, we can add a button, we can add all different things, spacers, data tables, social icons; all the stuff that you've come to expect from the other categories. Now you can basically add them yourself really easily without copying and pasting existing elements or trying to design your own, this is going to be a really quick and reliable way of doing that. As I mentioned you can also do this for existing components; let's say there's a common use case of wanting to add your own social icons or different social networks; if you double click on to the social layer that's already been created by a component, or created by yourself by adding a new social layer, you'll notice down here that once the social layer is selected we now have a whole bunch of different social networks that we can add in. If you just click on the one you want and then click on the "Add" button, that's going to automatically add that layer into your social component. We can go ahead and add a whole bunch in there, and again, you can add these yourself manually, but this is just a really quick way of adding some of the most popular social platforms into the component. 

If you need to link those up all you need to do is click on the "social icon" layer itself, then just click on the "HTML and Mobile Settings" button in the Figma plugin, and then you'll be able to go ahead and paste in your links to those particular social networks. If you have a Spotify account or a Spotify page, you could just paste that link into the clickable link URL field. This also applies to things like things like buttons, where you can paste in a clickable link and also images; if you need to link one of the images that you've just created, you can totally just paste in your clickball link URL. I won't be going through the entire design process for this particular Figma tutorial, I just wanted to go through some of these new context options; if you do need to get a more comprehensive overview, we have some other YouTube videos on the channel thatI'd recommend checking out; but for today if you're just checking out this new feature, this is basically how it works.

I'll show you a few more examples; if we click on the actual email frame itself, we can do a few new things like adding in a hero background area. If we click on "hero background" and add that in, we now have this brand new hero section which we can also add text to, we can add buttons to, we can totally customize that as you would expect. If we wanted to change the font, or change the alignment, or change the size, you can basically just customize this in Figma as if you were designing anything else, and you can just design it to the way that you want, essentially. We can increase the radius on these buttons, we can change those button colors if we need to, we can do all that kind of stuff. The same thing with the hero, you can change the background image if you want to drop a new image in there that's definitely something you should do, or if you want to change the overlay opacity, or add more overlays or less overlays you can do that, too.

You can also rearrange these components as you would expect; if we click on our new hero, and we actually want to bring it up to the top, we just drag that layer up to the top and that that's where it'll show up in our new ordering. You can also get rid of the columns if you don't want to keep some of those layers you've created, just go ahead and delete those, and that'll just remove them. Because all the elements are using auto layout by default, this is going to make it really easy to do that. If you decide that you actually don't want any of those old social icons, just delete them, or if you want to reorder some, you can do that too; just reorder it in Figma and that'll automatically reflect in there. 

Probably the most common one you're going to be using is if you click on the email frame itself and then click on the "Content Row", the content row is basically the most standard section in the email. If you click on that to add a content row, that's going to give you a new row with with a single column, and you can just go ahead and start adding your content into that column just as you'd expect; that's a really good one to add. 

The other thing that you can actually do is wrap multiple rows as well; if you know that you've got a couple of different rows and you want to actually group them together in a container, what you can do is you can click on the email, you can add a row wrapper. If we click on the add row wrapper option, click on "Add", and you'll see down here that it's added this brand new row, or brand new wrapper, I should say. If we know that we've got these two rows up here and we want to bring them into our wrapper, we just select those, drop them into the new wrapper frame, and I'm just going to get rid of the blank one, and what that allows us to do is actually wrap multiple rows and give those rows some padding and a background color around the rows itself. This is a very special layer that allows you to do that; normally you can't do that, but this allows you to do that, so that's what that looks like there. You can also add spacing between those if you need to as well by increasing the item spacing in Figma, that'll increase the space between the rows, but by default it'll just keep it flush just like that. That's basically it, you can have a bit of a play with all of these new elements, there's a whole bunch in there; there's navigation links that you can add, so you can basically create menus, and if you click on the navigation layer you can add more links, and again, you can customize those just by clicking on the layer just as we did with the social icons. If you double click on the link layer, click on the "HTML and Mobile Settings" button, and you just paste in your link into this box here, and that'll turn that into a link, and you can just customize the text as well like that. 

As I mentioned before, we can then export this out to HTML; and if you want to get a preview of what that's going to look like, just go ahead and click on the "Preview" button in the Figma plugin, and this is basically going to load up a real preview of the HTML inside the Figma plugin before you go ahead and export it. You can see here that it's looking really good, it's mirroring what we've designed in Figma. If we want to change it from the desktop view to a smaller device we can do that, we can bring it down to a really small one, and if we notice that something in here doesn't quite look good on mobile you can actually override those as well. If you click on the text layer, click on the settings icon, then you can actually override these settings just for mobile. If we say we want to make this a font size of 28 instead and then refresh it, that allows us to actually override that, and it will always keep the original design in Figma as the desktop one; you can just override them for mobile and it'll keep the desktop ones by default. 

Okay, that's basically it; I'm just going to export that out to HTML just so we complete the whole process. All you need to do is click on the "Export HTML" button, make sure you've got your email selected; I'm just going to export one today, so if I just export my new email, you can add a subject line and preview text as well, but for today I'm just going to leave those empty. There's an option to also upload the image URLs if you want to have them hosted by the Figma plugin, you can do that, but for today I'm just going to click on the "Export to HTML" button; that's going to render out all of the images and generate all of the HTML for us.

I'm going to click on "Download your .zip file", save that to my desktop, and if I double click on that zip file, it's going to open up the folder. I'm just going to open up that folder that it's unzipped, and if we open that up, you can see here that we've got our email inside. These are all the images as we'd expect, and also the HTML file here. It also generates a previews page, so you can use this to preview all the emails that you export at once; I'll show you what that looks like just by opening up in the browser, and there we go, this is the rendered HTML, the desktop version that we can see here. You can see all the links and those have got the links set to them we've got these different social icons that can be linked, and then you've got the mobile preview as well. You can get a really easy overview of your mobile and desktop designs, and this can be really handy for sending to clients or stakeholders, you can upload this file somewhere and send them a preview link, and that's going to be a really easy way for them to review the designs that you've done. Hopefully they'll look much better than these ones, these are not good designs, but in the interest of showing you how this feature worked, I just wanted to make it really simple and clear to just to show you the functionality of this new feature.

Okay, I think that's going to do it for today. I hope if you've been looking for an easier way of customizing your emails just by adding individual elements instead of having to use the preset components and customizing those to your heart's content, or using the custom HTML builder, which I haven't got into in this Figma tutorial, there's another YouTube tutorial about this custom component builder, you can use that as an alternative to what we've just gone through as well. For today, I really just wanted to hammer home how easy it is to now select these elements and contextually add brand new elements into them really quickly. I hope that helps increase your efficiency with designing HTML emails in Figma, and I hope you give it a go with you or your team and improve your email workflows in Figma. Thank you as always for watching and we'll be back soon with more Figma tutorials just like this one.

---

---
type: tutorial
title: How to add hover animations to HTML banners in Figma using Bannerify
date: 2022-05-30T00:00:00.000Z
---

# How to add hover animations to HTML banners in Figma using Bannerify



#### Video Transcript

Today I'm going to be showing you how to add animated hover states to your Figma banner designs, and then export those out to production ready HTML automatically.

To do this, we're just going to go to the Figma Community and search for the term "Bannerify" and under the plugins tab you'll see Bannerify pop up. All you need to do is click on the "Install" button on the right-hand side and then you'll be ready to go.

Once you've installed the Figma plugin, just jump back into your Figma file, and the Figma file should have a bunch of frames in it; and each frame should contain the layers that you want to include as the elements in your timeline. To start up the Figma plugin we just right click anywhere, go down to "Plugins" and then click on "Bannerify", and that's just going to open up the Figma plugin that we just installed a minute ago.

When the Figma plugin loads, it will ask you to select which frames in your file you want to load in to be banners. Today I'm just going to be using the "MREC" banner, and you can use as many as you want but I'm just going to use one for today, and then click on the "Load selected banners" button. You can see that's just loaded up my "MREC" sized banner and it's included all of the layers from our Figma designs. 

If we go through the timeline you can see I've already added some animations to it, and I'm not going to be showing you how to do that in this particular Figma tutorial, there's some other YouTube Figma tutorials on our channel if you want to go through those; today I'm just going to be focusing on how to add another state, which will be the hover state to any of our elements here. To do that, all we need to do is select the Figma layer that we want to add a hover state to; for example, if I want to add a hover animation to my button, my "CTA", I just click on the "Add Hover" toggle in my Figma layer, and that's just going to toggle on a brand new animation setting down here. You can see we've got our entry animation and our exit animation by default, but checking this "Add Hover" toggle now reveals a new animation selector for hover animations. 

By default it won't have any animation set on it, but we can open up this select box and start browsing some of the hover animations that are included; for example, if you wanted to add a simple "Grow" animation, if we click on "Grow" you can see here that it has revealed the timeline speed. We can change the speed of the hover effect; if I increase that to one second, for example, and then over in my preview I can actually now preview that hover animation in real time. If I hover over the "Apply" button you can see that it's actually applying that grow animation, and if I reduce the speed, we can speed up that hover animation considerably; that's now 0.3 seconds, but I can go through all of these and basically see what one is going to suit this creative. 

I can do a rotation which will rotate the CTA slightly, I can do a bunch of more fancy ones; we can do bounce-in. I can also set it to loop, if I want it to continue to play while I'm hovering over it, I can check this "Loop" toggle and now if I hover over it, you can see that it's going to continually play that animation, whereas if I turn the loop off the hover animation only goes in and it doesn't keep repeating, it'll just do a half a state and won't keep looping, but if I turn that on it'll keep looping. Again, I can change the speed of that one, too; if I want to slow it down just extend the timeline and now it's a one second play through, so that animation is going to take a second. That's basically what it looks like to add the hover effects.

Wwe can add this to as many layers as we like; if we wanted to add one to the logo we do the exact same thing, go to the "Logo" layer, click on the 
"Add Hover" toggle, and that's just going to reveal the hover animation selector, and again you can select any of these, there's a whole bunch in here; you can do a skew animation if you want to skew the logo, we can change it to be a wobble, we can wobble the animation and have that just a little one one time play through. Again, we can repeat that by clicking the "Loop" button and just having it continually wobble or we can slow that down, as we said before. 

I'm just going to leave it with those two for now, and then to get this out to HTML all we need to do is click on the "Export to HTML" button, go down to our code output settings; we can just select if we want to export it to HTML/CSS, GreenSock (GSAP) animation or most likely an ad platform; if you're exporting to Google Ads or DoubleClick, you'll likely want to click on one of these. For today I'm just going to be keeping it simple and exporting to HTML and CSS. You can add your CTA down here; if you do want to include a click tag you can pre-populate that down here, so I can add in the "Hypermatic" domain. I can pop that in there and then all I need to do is click on the "Export Banner" button; i'll click that now that's going to generate all of the HTML and CSS for us.

I'm going to click on the "Download your .zip file" button, save that to the desktop, double-click on the zip file that it's just saved to, unzip that, and then I'm going to open up the folder that it's unzipped and go to the index.html file. I'm going to drag that into my browser just so we can see what it looks like, and you can see here we've got our banner animating in as we expected, and then now because we've added our hover effects you can see here when I hover over the CTA, it's playing a looped animation that we set. I can also hover over the logo as well, so if I hover over the logo section, that will also animate in as we'd expect. 

This is the preview page, so if you've got a bunch of banners they'll all show up here. If you need the actual individual banner, it's just inside of this "banners" folder here, so if we drag that into the browser, there we go; that's the hover animation set on both those layers. Okay, that's going to do it for today, as I said this is a really short Figma tutorial just to specifically go through how to add the hover animation states onto any Figma layers into your banner timeline. 

The other thing I should have mentioned is you can do this in bulk as well. If you need to apply a hover animation to multiple layers, you can just click on multiple layers in the timeline, and then in the add in the "Add Hover" checkbox down here, just select that and that will reveal the hover animation in the bulk application panel as well. You just click on "Add Hover", click on the animation you want to apply to multiple layers, so in this case I'm going to use the "Grow" animation and loop it, and then just click on the "Apply animations to selected layers" button, and that will apply the animation that you want to set; and this will also apply the entry, exit and hover animations, so make sure you've got them all set up the way that you actually want, and then just click on the "Apply animations to selected layers"; once you do that you'll see that the animations get applied in the timeline in bulk. Both these layers are now the same and if we hover over these, you can see now this one's playing the grow animation and this one is also playing the grow animation in the exact same way.

The other way you can do this really quickly is you can just use the copy and paste setting as well; if you click on "Copy" and then you click on "Paste" in another Figma layer, that's going to copy and paste all of the animation attributes from the layer you copied it from over to the layer that you quickly pasted it to; this is just a really quick way if you just need to do a couple of layers and copy some animation settings that you've already created. Here was as well we can see that it's copy and pasted that hover effect, so now all three of our layers actually have that exact same hover effect on it. That's what that looks like there; thank you as always for watching, and we'll be back soon with more Figma tutorials just like this one very soon.

---

---
type: tutorial
title: How to add video embeds to Figma banner exports using Bannerify
date: 2022-05-17T00:00:00.000Z
---

# How to add video embeds to Figma banner exports using Bannerify



#### Video Transcript

Today I'm going to be showing you how to add videos to your Figma banner designs and then export those out to HTML, GIF, or MP4 videos.

To get started we're just going to go to the Figma Community and we're going to search for "Bannerify", and under the "Plugins" tab you'll see "Bannerify" pop up. Just go ahead and click on the "Install" button on the right hand side and then you'll be ready to go.

I'm just going to jump back into my Figma file now, and I've just got two frames set up and these just contain a bunch of layers that I want to use in my banners. To run the Figma plugin that we just installed I'm going to right click anywhere, go down to "Plugins" and then click on "Bannerify" and that's just going to run the Figma plugin we just installed a minute ago. As I mentioned it's going to pick up on those two frames because that's what it counts as banners; we've got a portrait and landscape, and I'm just going to load both of them in by clicking on the "Load Selected Banners" button. 

That's just loaded up our banners and you can see here that it's reflecting all the layers in our banner frames in Figma. This Figma tutorial won't be going through how to design and animate all these layers, this Figma tutorial is really just going to be focusing on how to then enhance those banners by embedding videos into any of the layers, then they can be included in the banner exports. As I mentioned, we've got a really simple animation which you can play through just by clicking on the play button, and I've got that mirrored in both of my banners. I've gone ahead and added these simple animations beforehand just to give us a starting point; now that we've got this static background I actually want to make that into a video background to make this banner a little bit more dynamic. 

To do that we can just go to our web browser, and for this example I'm just going to be using a video from this testvideos.co.uk website, but you can also go to other websites like pixabay.com, which have a whole bunch of free stock videos that you'll be able to use as well; I can show you what that looks like in a moment. For example, if we wanted to just drop in our first test video, all we need to do is go down to whichever resolution you're after, I've already picked one out, so I'm just going to use this one. You can see here this is what the video looks like in its full form; I'm just going to grab that URL and I'm going to copy and paste it into Figma. I've just highlighted that URL for the MP4, and it's important that the URL is actually an .mp4 video or a .webm video; make sure that it's an .mp4 and then jump back into Figma, having copied that link, and then just go to your video placeholder layer or any layer you want to add a video on, and click on the settings icon. Once you've clicked on the settings icon, just down here at the bottom you'll see a little embed icon, all you need to do is click on the text box and then just paste in the link that we just copied.

I've just pasted that in and now I'm just going to close off the settings panel and you'll see here that our placeholder image has now been swapped out with the video that we just copied. If I play through the timeline you can see that the video is actually syncing up with wherever I jump to; we can get a real-time preview of what that looks like alongside all of our other animations, and if I just hit play, you'll see that the animation, or the video rather, is playing back in our timeline along with our other animations. 

I can also apply this to my other banner just by doing the same thing. Another easy way to do this for multiple banners, for multiple layers in multiple banners, is just to click on the banners that you want to add the video to; for example, if I click on the placeholder one and then click on the other placeholder, and then all I need to do is go down to here in this little media embed column and just click on the input again and paste that in there and click on the "Apply Embed" button, and you can see that's applied the video to the two layers that we just selected. That's just a really quick way of doing it if you've got a bunch of layers you want to apply videos to. Another way that you can select those really quickly is just going to the "Quick Select" menu up here and just clicking on the layer that you want to add the video to; click on that, and that will automatically select those two layers for you. That can be really helpful if you've got a bunch of banners with the same name layer that you want to apply the video to. 

As I mentioned, you can use this with any video files, any .mp4 files; for example, if we go back to our stock video website, et's grab this one, just click on that and you want to click on "Free Download", just select a lower resolution and click on "View" and that's going to open up the .mp4 URL in our browser. I'm going to copy that link the same way I just did with our other one, jump back into Figma, and I'm just going to go down to my settings again; you can just click on the import logo or on this settings icon, either will work, and for this case I'm just going to replace it as a bit of a test. I'm just going to paste in our new stock video, close off the settings, and again you can see it's swapped in the Figma video background embed as we'd expect. That's what it looks like, I'm just going to swap back to our other video just for the purposes of this Figma tutorial and give you a little bit of a preview of how that looks when we export it; I'm just going to drop that back in there. 

Now we've got them both synced up and I'm actually going to get rid of the fade-in animation; I'm just going to remove the animation on those videos just so it doesn't have to fade in each time. That's what that looks like, and now if we want to export those out we can do it to multiple formats. The first format I'm going to do is just Figma to HTML; I'm going to click on "Export to HTML" and I'm just going to leave all these settings default, you can go ahead and change these if you need to, but I'm just going to leave them as defaults, and I'm going to click "Export Banners" and this is just going to export those banners out to HTML for me. I'm going to save them to my desktop, I'm going to open up the zip file by double double clicking on it, opening up the folder, and now if I go to my index.html page, which is just a preview page, I'm going to go ahead and open that up in my browser and you can see here that the videos are playing back as a video background as we'd expect. Those are looking pretty good. Again, I can just replay that and you can see the animations are coming in over the top; that's looking really nice. 

Then the other thing that we've got in our banner folder, if we just open it up is you'll see here that there's also a .jpg included, which is our fallback placeholder image; the placeholder image automatically gets exported. In the HTML, you'll see that if you open up that HTML file, you can just do that here, and then we can just view the source; we'll click "View Source" and if we search for our video, you'll see here that the "poster" attribute is actually being set to the .jpg; if for whatever reason the video doesn't load in the browser, it will fall back to whatever you set the poster as in Figma. That just relates to the video placeholder layers that we've got in here which are these ones; that's just worth noting in case you're wondering what that file's doing in there.

Now that we've exported HTML, I'm going to do one last export and to show you what it looks like to export this out from Figma to a video file. Again, I'm going to click on the "Export to GIF/Video" button instead, and this time I'm just going to click on "Export to WebM"; this is going to export our banners from Figma to video instead of Figma to HTML, and this is really handy for things like social media ads, or any format where an HTML banner just isn't going to work and you want to use a video, or if a certain platform requires video, this is probably the better way to export it. You can also export to GIF, and you can also export to MP4 video as well, but in this case I'm just going to show you what it looks like with a WebM video. 

It's just finished zipping up our banners; I'm going to click on that "Download" button again, I'm going to save that to my desktop, double click on the zip file, double click on the folder, and if I drag that index file into my browser this is just going to load up a preview page of my banners. You can see here that instead of them being exported as HTML banners, these are now video files; these are being played back just on the HTML page, they've been embedded as videos, so these are ready to go if you want to upload them to a social platform, or convert them to a different video format, you can do that as well; you just have to open up the videos folder. If we jump back to our desktop open up the videos folder you can see here that these two here are the actual video files; if we were to drop that into the browser, too, you can see that this is a proper video that we can skip through, and that's what it looks like. 

That's that's basically the whole Figma tutorial; these are the formats you can export to, and as I mentioned, you can also export these banners from Figma to GIF or Figma MP4, but for today I just wanted to keep it really simple and just show you the example of exporting from Figma to HTML, and Figma to video in WebM. I think that'll do it for today, I hope you found this useful if you've been wondering how to add video embeds into your Figma banners using the Bannerify Figma plugin; this has been requested for a little while, so I'm glad to finally be able to reveal this and show off how it works. I hope you can unlock some more creativity that you weren't able to access before with this new video feature, so I hope you and your team have fun playing around with it. Until next time, thank you as always for watching, and we'll be back soon with more Figma tutorials just like this one.

---

---
type: tutorial
title: How to export HTML emails from Figma to SendGrid using Emailify
date: 2022-05-14T00:00:00.000Z
---

# How to export HTML emails from Figma to SendGrid using Emailify



#### Video Transcript

Today I'm going to be showing you how to export your email designs from Figma out to HTML templates that will automatically be uploaded into your SendGrid account.

The first thing we need to do to get started is just go to the Figma Community and search for "Emailify", and under the "Plugins" tab you'll see Emailify pop up. All you need to do is click on the "Install" button on the right-hand side here and then you'll be ready to go.

Once you've installed the Figma plugin, just go back to your Figma file and right click anywhere, go down to "Plugins", click on "Emailify" and that's just going to run the Figma plugin that we just installed a moment ago. You'll notice that I've already got a design in my Figma file and that's because I've pre-designed it using some of the components from the Emailify Figma plugin categories; if you haven't already done that and you're new to the Figma plugin, we have another tutorial on the YouTube channel that goes into detail about how to actually design the emails and customize them, but in this Figma tutorial I'm just going to be focusing on how to actually upload it from Figma into our SendGrid account.

I'm going to do that now and I'm first just going to add a footer that's specific to SendGrid; if you go to the "Footer" category and click on this "SendGrid" option, that's just going to add in a SendGrid footer with a pre-filled unsubscribe link. You don't have to worry about finding the correct link for that unsubscribe link because it's already been pre-populated and that'll be exported with our HTML template. Now we've got that in there we can start exporting it by clicking the "Export HTML" button and then down here under the select box, we're going to change it from "HTML" and we're going to change that to "SendGrid" under the "Upload to Platform" category; we're going to click on "SendGrid" and now it's going to ask for our SendGrid API key.

You can get this API key by logging into your SendGrid account, going down to the "Settings" sidebar, expanding that, and then clicking on the "API Keys" page, and you'll land on this page here. All you need to do is click on the "Create API Key" button, and you want to give this a name; you can name it "Emailify", and make sure you click on the "Full Access" radio button, and then just click "Create and View" down here, this button; I've just clicked that, and it's generated a new API key that we can use/ All you need to do is click on the API key that it generated, which will copy it to your clipboard, and then go back to Figma. In the Figma plugin you just want to paste that API key into the input field here, and now that we've pasted that in, the "Upload to SendGrid" button is now enabled, and we've got our email selected, so we're ready to go. 

We can click on the "Upload to SendGrid" button and this is going to export the design to HTML and automatically upload it to our SendGrid design templates, because we put that API key in there. Now it's just finished, it's told us that our SendGrid template has been uploaded and we can view it by navigating to the design library page in our SendGrid account. You can also optionally download the zip file of the template that was uploaded if you just want a local reference for it as well, but that should be uploaded into our SendGrid email templates area now. 

If we jump back into SendGrid in our browser and we go on the left hand side here, down to "Design Library", this is going to open up our email template designs, and we should see the email that we just uploaded from Emailify. Here it is, we can see it here, it's just been uploaded. We can click on that, we can go to "Edit", and you can see here the email has been imported, and we can preview that to see what it looks like. This is all HTML, we've got our buttons, images, footer and everything in there as we'd expect. Here's the mobile view, and that's what it looks like. 

It's been successfully uploaded directly from Figma into our SendGrid account, and now we can go ahead and use this email or tweak it if need be in SendGrid, if you want to add some test data, you can do that and customize it a little bit more; but for now I'm just happy with the email being uploaded as it is. I'm just going to save that, and that's it; you've got your email design uploaded directly from Figma into your SendGrid account without having to go to the trouble of doing any weird image uploading or HTML editing or anything like that, it's just all taken care of automatically.

That's it, that's the whole process; if you do want to export multiple emails you can do that as well. If you've got multiple designs, just make sure you select multiple designs when you go to upload it, and it will upload all of those into SendGrid, it just depends on how many you have and which ones you want to upload.

That'll do it for today; I hope you found this Figma tutorial helpful if you haven't if you've been wondering how to get your email designs outside of Figma and upload it into SendGrid this is going to be the quickest way; thank you as always for watching and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to add Lottie animations to Figma banner exports using Bannerify
date: 2022-05-09T00:00:00.000Z
---

# How to add Lottie animations to Figma banner exports using Bannerify



#### Video Transcript

Today I'm going to be showing you how to add Lottie file animations into your Figma banner designs and then export those out to HTML, GIF and video banners, directly from Figma. 

To get started, we're just going to install a Figma plugin called Bannerify. If you search in the Figma Community for "Bannerify", and under the "Plugins" tab you'll see Bannerify pop up. All you need to do is click on the "Install" button on the right-hand side and then you'll be ready to go. 

I'm just going to jump back into my Figma file, and I've gone a bit meta today and I've designed a really simple "Lottie Files" banner; we're going to be adding Lottie file animations into this banner and we're going to be advertising the Lottie files brand or service in our banner design as well. This is really simple, I've just got two frames set up each with four different layers, I've got a logo layer, text layer, a placeholder layer, and a button layer. All we need to do is right-click anywhere, go down to "Plugins", and click on "Bannerify" and that's going to load up the Figma plugin that we just installed a moment ago. Once it loads up, you just select which frames you want to load in; I've only got two parent level frames, those are the ones that are coming up, and I'm just going to go ahead and load both of those in. I'm going to click on "Load Selected Banners" and that's just going to load up all the layers that we can see on the left hand side here.

If you go through the animation you can see that I've already got a few really simple fade in animations set on those four layers, and they're just slightly staggered, and they've got a speed of one second each. You can see them coming in pretty smoothly just like that; we can play through that and you can see how that works. If you're new to the Bannerify Figma plugin, there's a separate YouTube tutorial on how to animate and design your banners, but today I'm really just going to be focusing on adding the new Lottie file integration into your banners as well; with that said, let's get started.

To add a Lottie file animation to any of your Figma layers all you need to do is basically add a placeholder layer where you want a lot of animation to go; in my case I've just added these two rectangle layers, that's why they're gray and boring, and I've just labeled each as "Lottie Animation Placeholder" so I know what they are. Then all we need to do is just go to the settings icon; you can see there's a settings cog icon on that layer, so I'm going to click on the "Lottie Animation Placeholder" layer settings icon. I'm going to click on that, and you can see down here at the bottom we've got a little embed logo or import logo and a text area; this text area is where we're going to paste our Lottie file animation link; this is going to be a link to a Lottie JSON file. This can either be on your own server or your own location, but more commonly you're probably going to be uploading it to the Lottie Files website, or getting a pre-existing animation from there. 

To do that we just need to go to lottiefiles.com, and if you just make a free account, you can do that really quickly, that will allow you to browse their animations. If we just go to "Discover" and go to "Free Animations" and you can search by different categories and things like that, or just search for a specific animation. This is just the list of featured animations that you'll see; we've got all these available to us, and to insert one of these into Bannerify in Figma, we just click on the animation that we want to add, and then you'll see there's a little box down here called "Lottie Animation URL"; we want to grab that by clicking on this little copy icon. That's going to copy the URL, and then I'm going to jump back into Figma and in our text box here, I'm now just going to paste that URL that we copied from the Lottie Files website. I'm going to paste that in, you can see there it's got a JSON file at the end, you definitely want to make sure it's got that, and then I'm going to set it to loop. By default it just will loop the animation, you can turn that off if you want, but I'm just going to loop it for now. 

I'm just going to click back into my timeline, and you can see here we've now got a Lottie animation in our layers. If we play that, we'll play that from the start, and you can see there it's playing the Lottie file animation the same way that we had seen it on the website from Lottie Files as well. That's what that looks like, as I said, you can scroll through that and see what the animation is going to look like, but you can notice as well it's also applying the Bannerify animation to that layer. For example, if we were to change the "fade in" animation to a "scale in" animation, and we changed that and then we scaled that down, you can see here that it's not only playing the Lottie animation as an embed, but it's also applying our Bannerify transitions. We can transition in and transition out different Lottie files, and that'll apply the animation to the actual layer as well; that's scaling it in. We can also apply an exit animation, if we want to scale it out we can do that too; we can just drag that up there and this will scale it out as well. If we now play that, it's going to go away. 

We can also add more Lottie animations as well; if we wanted to have multiple steps in this banner all we need to do is just create a new placeholder frame. For example, I'm just going to add another one I'll pop that into our original banner, the one that we're just working on. I'm just going to drop that in there; we can call this one "Lottie Animation Placeholder 2" and I'm just going to drop that into my banner there and then we can just now grab another random Lottie animation to show off. We can do a silly one; we've got this bodybuilding dancer, so we'll grab that, copy the URL again, and I'm just going to refresh my layers just by clicking on this little "refresh" button in the timeline. Under my "Lottie Animation Placeholder 2" layer I'm going to click on the settings icon for that, and I'm just going to paste that Lottie file JSON in there and load that up, and I'm just going to make this come in after our other animations already gone out. If I just position that over here, and we'll scale that in, we may as well do the same animation; we'll scale that one in, and if we play that now, we'll play it through you can see the first slide animation scales in and out and they are the second one's in there as well. That's looking really good, I think that would make for a very nice animation advertising the Lottie files service, using Lottie file animations, I think that's cool. 

That's basically what it looks like, and then if we want to go ahead and export that, we just do it the same way that you always do in the Bannerify Figma plugin, and that's by going to the "Export to HTML" button. I'm not going to export the second one because I haven't really done much work on that, that's just a smaller version that I had set up, but I'm just going to export this one for now. I'm going to click on "Export to HTML", I'm going to infinitely loop all the banners, and I'm just going to save it as "HTML/CSS", you can obviously save it to other platforms; you've got "DoubleClick Studio", "Google Ads" and all that good stuff if you're using a certain platform, but today I'm just going to be doing HTML/CSS, very standard. I'm just going to click that "Export Banner" button and that's just exported our banner to HTML. I'm going to click "Download the .zip file", I'm just going to save that to my desktop, and if I go ahead and unzip that. I'm just going to double click on the zip file, double click on the exported folder, and then if I grab this index file and drop it into my browser, this is the HTML export. This is basically the production ready code that you want to add to your website or up upload to a different platform like a Google Ads if you exported it for that, but that's what it looks like. It's really nice, really smooth as you'd expect, and that's what that looks like there.

The other thing we can do is also export it out to other formats, too. If we wanted to export it from Figma to a GIF, WebM or MP4 video file we can do that as well. We just click on the "Export to GIF/Video" button, then we can click on the format that we want, and again this will export it out to that format, too. We're exporting the banner with our Lottie animations out from Figma to a video now, and I'm just going to do the same thing, I'm going to click on "Download your .zip file", save it to the desktop, I'm going to unzip that file, and then if we open that back up; I'm just going to click on the HTML file, and there we go. we've got our video. You can see if I show the controls, that's just a video playing now; we can go through that as you expect, and these can be really handy if you're creating ads for social media. If you're creating Facebook ads or Instagram ads, these video exports can be really handy as well. The Lottie files are supported in that; the only thing to note is that in the video exports at the moment, some of the different masking effects that some of the more advanced Lottie files use have some problems in the video side of things, so hopefully that gets resolved in a future version of the Lottie player, but at the moment sometimes you will get some issues if it's a really complex masking situation or things like that can sometimes be a bit strange in the video exports; just something to keep in mind for now, but the HTML exports will always look really nice just like this.

That's basically it, the other thing you can do if you want to apply a lot of Lottie animations to multiple layers; if you've got multiple Lottie animations that you want to add to different banners, you can do that in one go just by clicking on the layers that you want to apply the Lottie animation to. If we click on "Lottie Animation Placeholder 2" and the other "Lottie Animation Placeholder 2" layer, if you want to apply the same Lottie animation to those two in one go, all you need to do is go down to the "Media Embed" section down here, paste in a Lottie file URL. I'm just going to grab the one that we had up here and I'm going to apply that by pasting it down here, and you can select again if you want it to loop or not; I'm just going to leave it to loop, and then I'm just going to click on the "Apply Embed" button and that's basically going to apply that Lottie animation into the layers that you've selected. For example, this one here doesn't actually have one yet on the Lottie animation placeholder layer, so I can grab the other one from there that I had before; I'm going to copy that one and paste that onto the layer, and then I can basically copy and paste the animations as well. 

If I want to copy and paste my animation from the first Lottie file down to here I can do that just by clicking "copy" and "paste" and same thing for this layer, too. I'm going to copy that one and I'm going to paste it on the "Lottie Animation Placeholder" layer, too. Now if I play that back, you can see that we've got our animations the same from the first banner with the exact same timings, and that's just taken away a whole bunch of effort to duplicate those animations. Again, you can just go through if you've got a bunch of banners and you want to do this really quickly, you can actually just go up to here to the "Quick Select Layer" selection, click on the layer name that you want; as long as the layer names are named the same you can quickly do it from here, just click on the layer that you want, and it will select that layer across all of your banners, and then you can again apply that Lottie animation or animations in bulk or batches in one go.

That's basically it, as I said, it's very simple, you just jump into your settings panel, paste in the Lottie animation URL, as long as it's a valid Lottie animation. Again, you can upload these yourself if you create your own animation with After Effects for example, you can just go to the lottiefiles.com preview URL, which gets linked to from the banner Bannerify Figma plugin, and if you've got a local Lottie file that you already want to use, you can just browse for that upload it to here and then you'll get the URL that you can copy directly into the Bannerify Figma plugin and use your own Lottie animations as well. 

That'll do it for today; I hope you've enjoyed this Figma tutorial, if you've been wondering how to add Lottie animations into Figma or into your Figma banners and then export those out to production ready HTML or production ready MP4 videos and GIFs, this is probably the quickest way to do it, using the Bannerify Figma plugin. I hope that you have a good time with it if you want to do a bit of an experimentation with your team or with your own banner sets, now you've got this added flexibility for more complex animations, hopefully it's going to unlock a lot of creativity for you and your team going forward. As always, thank you for watching, and we'll be back soon with more Figma tutorials just like this one very soon.

---

---
type: article
title: The Startup Formerly Known as Figmatic
date: 2022-03-27T00:00:00.000Z
---

# The Startup Formerly Known as Figmatic



>“Yo, last year was 'bout brandin', this one about <s>expandin'</s> re-brandin'” 

— <s>[Benny The Butcher](https://www.youtube.com/watch?v=ucMkV5ndFek), Burden of Proof</s>
— **Me**, for the last week

### tl;dr

After over 2 years of being known as “Figmatic”, we've just finished rebranding to <i>“Hypermatic”</i> (a caffeinated form of “automatic”) in 5 days.

It's a pretty boring story... we were nicely asked by Figma (the design tool that our plugins can be used with) to change our name to avoid any branding conflicts; which is all good, and makes sense to avoid any potential confusion.

<b>Nothing else has changed on our end</b> besides our name, domain, logo and a bit of an aesthetic website refresh. The sole mission to reduce the distance between design and production closer to zero remains unchanged.

If you'd like to torture yourself and learn more about how the rebrand actually came about from zero to finished in 5 days, feel free to read on below.

### Figmatic origin story

"Figmatic" was born as a play on words with the 1994 Nas album "[Illmatic](https://www.youtube.com/watch?v=oqVD2yQqH7M)", which my friends Scott and Marty came up with for their article "[Figmatic: Why Figma will be remembered as a genre-defining classic](https://medium.com/mass-thinks/figmatic-why-figma-will-be-remembered-as-a-genre-defining-classic-c6763cae7888)", which was based on an [underrated talk](https://www.youtube.com/watch?v=rokAQA5Takg) with the same name that they both gave at the DesignOps Melbourne meetup back in 2018.

When I decided to quit my full-time job back in 2019 and take the chance of going all-in on building Figma plugins, "Figmatic" was the obvious choice to me to describe what I wanted to work on, making certain workflows more automatic.

### Being kindly asked to rebrand

I was made aware via email that our "Figmatic" name and domain was in breach of Figma's own [brand guidelines](https://www.figma.com/using-the-figma-brand/), and we were kindly asked to change the business name and domain.

My initial reaction was surprise, as we've been publishing Figma plugins as "Figmatic" for over 2 years without any issues, and of course, didn't intend to cause any conflicts; but I very quickly realised that the only option was to change the name and domain of the business as soon as possible.

To give me some context, my friend Scott recommended season 2 of the [What Had Happened Was](https://podcasts.apple.com/au/podcast/what-had-happened-was/id1520209791) podcast, which covers the story of [El-P](https://www.youtube.com/watch?v=2Zn5o-gxtFA) (one half of the [Run The Jewels](https://www.youtube.com/watch?v=G-S9mtYowPY) hip-hop duo, along with [Killer Mike](https://www.youtube.com/watch?v=lNsAfGDkUtk)), where El-P also had some issues with his music label name.

This podcast was kind of a consistent backdrop during the course of the week whenever working on the rebrand (which I instantly became obsessed with taking care of as quickly as possible) took a backseat to minor inconveniences (eg. eating dinner) between work hours.

### Rebranding in 5 days

Knowing that I needed to act fairly quickly on this, I read a couple of books about coming up with new brand names, and they basically said that if you have a _really_ good team, the renaming process could even be as quick as 5 weeks. 

5 _weeks_ clearly wasn't an option. I'm a big fan of the book [Zero to One](https://www.amazon.com/Zero-One-Notes-Startups-Future/dp/0804139296) by Peter Thiel, and one of the many great questions asked in that book is:

>If you have a 10-year plan and know how to get there, you have to ask why can't you do this in 6 months?

I thought that if it was supposed to take 5 weeks just to come up with a new business name, why couldn't you not only pick a new name, but _also_ rebrand the visuals and update everything everything else that comes along with it in 5 _days_ (instead of 5 _weeks_)?

So that's how long it ended up taking, and it looked something like this:

#### Day 1

- Have a brief existential crisis, then decide to take action.
- Read a couple of books about coming up with new brand names
- Create a creative brief (taken from [Hello, My Name Is Awesome](https://www.amazon.com.au/Hello-My-Name-Awesome-Create/dp/1523099984/)). 
- Stay up until midnight coming up with some initial ideas.

#### Day 2

- Continue coming up with more more ideas for the new name based on the creative brief.
- Write a few Node scripts to mash a bunch of words together into a massive list with different combinations.
- Run that massive list through a bulk domain lookup tool to figure out which .com domains on the list other people had listed for sale. 
- Narrow the list down to "Hypermatic" as the new business name later that night.
- Purchase the .com domain from someone who already owned it.
- Reserve some social/website "@" handles were available for the new name.

#### Day 3

- Start designing a new logo, aesthetics, copy, colours, assets etc.
- Work until later that night, lots of creative exploration while playing random mix of Japanese [City Pop](https://www.youtube.com/watch?v=7aoCRCr7q3M) songs, [BABYMETAL](https://www.youtube.com/watch?v=cK3NMZAUKGw) albums, and some other old school [90s hip-hop](https://www.youtube.com/watch?v=q_cJ43-StJ0) sets in the background. 

#### Day 4

- Finalize the new logo and visual branding.
- Start refactoring code.

#### Day 5

- Redesign/refresh the website in the browser using HTML/CSS.
- Swap in any updated brand, colours, logos, type, copy changes.
- Prepare as much as technically possible for the migration.

### Flicking the (many) switches today

After everything above had been prepared, the bottleneck was waiting for the new domain to be transferred over, and then propagated to the new DNS.

Once everything had been propegated and was ready to roll, all of Sunday March 27th, 2022 was spent flicking many switches that needed to be pulled to migrate over this website, the documentation site, email accounts, Figma account, Twitter account (etc) to the new name.

### Figmatic is dead, long live Hypermatic

Now that Figmatic is ether and the rebrand to Hypermatic is finished, it's time to get back to work on getting back to future.

>“Ayo, the brother's Stillmatic. I crawled up out of that grave, wiping the dirt, cleaning my shirt. They thought I'll make another Illmatic, but it's always forward I'm moving never backwards stupid, here's another classic.”

— [Stillmatic (The Intro)](https://www.youtube.com/watch?v=oeQzYpxcrR4), Nas

Please feel free to send an email to my new address at [adam@hypermatic.com](mailto:adam@hypermatic.com) if you have any questions about the rebrand.

---

---
type: tutorial
title: How to easily localize and translate any Figma designs using CopyDoc
date: 2022-03-26T00:00:00.000Z
---

# How to easily localize and translate any Figma designs using CopyDoc



#### Video Transcript

Today I'm going to be showing you how to easily localize your Figma designs and translate them into multiple languages just using a simple spreadsheet.

To get started we're just going to jump into the Figma Community and search for a Figma plugin called CopyDoc and if you go to the "Plugins" tab you'll see "CopyDoc" pop up; just go ahead and click on the "Install" button on the right hand side, and then you'll be ready to go.

I'm just jumping back into my Figma file now, and today I'm just going to be translating a single Figma frame. I just want to translate this screen of my "Movies" app design. To run the Figma plugin, we just right click anywhere, go down to "Plugins" and then click on the "CopyDoc" Figma plugin, and that's just going to fire up the Figma plugin that we just installed a moment ago. Once that runs, all we need to do is head down to this option called "Localize Figma Frames", and this is going to allow us to export and import translations from an Excel spreadsheet file.

To get started, all we have to do is click on this "Localize Frames" button, and that's going to load up all of the frames on your current Figma page. As I said, I only have one frame on this page, if you had more you would see more pop-up; and you could select which frames you want to export for localization, but today I'm just going to be exporting one. Now that we've opened up this feature, all we need to do is select the frame we want and add some locales to. I'm just going to add a few, you can just start typing the locale into the search field here, so I might do French, Japanese and German, for example; and then all you need to do is click on the "Export to Excel Spreadsheet" button. I'm going to click on that, and that's going to export my frame with placeholders for these locales. I'm just going to save that to my desktop, click "Save" and then what I can do is just jump back to my desktop, open up the zip file and then open up the exported Excel spreadsheet file in Excel or another spreadsheet tool that you prefer. 

Today I'm just going to be using Microsoft Excel. I'll just zoom in a little bit so you can see what that looks like, and you can see here that the Excel file that's been exported from Figma contains all of the text that's in our Figma design. It's being sorted visually by where it appears in the design; if we jump back into our Figma file and then compare it to the spreadsheet, you can see "Melbourne, Australia" is at the top, then "Coming Soon", then "13", "14", "Action", "Sci-Fi Action", these are the labels, here the reviews; it's basically going from top left to bottom right, so that's how the text is being ordered. 

In order to translate this into multiple languages, you can see that we've got our placeholder translations here; we've got French, Japanese and German. These are the placeholder locales that we included in the Figma plugin earlier, and all you need to do now is basically go through those rows and those columns and add the translations for each of those languages. I've prepared a spreadsheet earlier just to speed up the process for this video; you can see here in the exact same spreadsheet that I exported earlier with those same locales I've gone through and I've translated all of the text from the original design into these three different locales. You'll notice that some of these are missing, so I've got a few different fields in different languages that haven't been translated; the reason for that is that the translation version and the original version are basically the same, so that's just something worth worth noting if you do leave any of the column items blank those will essentially just be unchanged in the design. We'll see what that looks like in just a moment.

Now that I've got my finalized translation file; once you've gone through yours and translated all these different columns, to then import that back into Figma, all we need to do is jump back into our Figma plugin, and if you if you've already closed it just jump back into the "Localize Frames" option and down here you'll see a little drag and drop area for your Excel file. All I'm going to do is I'm going to jump back to my desktop, I'm going to grab the pre-translated file that I completed earlier, and I'm going to drag and drop that Excel file directly into the Figma plugin down here; I'm going to let go of that now, and that's going to load in the spreadsheet. You can see here that it's found three different locales for this "Movies" frame; if you had more frames, again, you could select which ones you want to import, but today I've only got one. I'm going to leave that checked, and I'm just going to click on the "Localize Selected Frames" button; I'm going to click that now, and what this is going to do is it's actually going to load in those translations from the spreadsheet directly into Figma. 

It's telling me that it has just imported one translation, so I'm going to go ahead and close off the Figma plugin now because we don't really need it, and I'm just going to show you what that's actually gone ahead and done. The easiest overview here is you can see that it's imported or created four different Figma frames, and these frames have been created on a totally new page. What it's done is it's found the translated frame which was called "Movies", it's created a brand new Figma page for that frame, and you can see here it's called the "Translations" frame and got a timestamp of when that was created. What it's done is it's copied or cloned this original frame into a brand new page; you can see here this is the copy of the original frame, so that's our original language and then next to that we've got all of the locales that we imported from the spreadsheet. You can see we've got our French one, we've got our Japanese one, and we've got our German one. If I zoom in a bit more, you can see that these have all been translated based on what we imported in the spreadsheet; you can see down here the menu items have been renamed, you can see that we've got different titles with different names, and that's basically all been translated as you'd expect. That's what it looks like, it's essentially a one-click process to import those translations and localizations in Figma. 

It's worth noting sometimes with the Japanese characters the font for some reason doesn't load straight away in Figma; if you double click on the layers where it's not showing up, that will fix it. Usually it doesn't happen, but that's just something to keep in mind with that specific language, it seems to be an issue with Figma. That's fine, but you can see here that the German translation and French translation are all looking really good. That's a really quick way of translating your FIgma app design or your Figma website designs or any Figma designs really; any copy that you have in Figma into multiple localizations and language translations. That way you don't have to go through and manually copy/paste all these frames, copy/paste all the text into the frames and worry about all the positioning and things like that, you can just import it into Figma directly from the spreadsheet. 

You can use this for anything really, as I mentioned, you could use it for a banner campaign, social media campaigns, emails, websites; anything really that requires localization, which is many things when it comes to design. The CopyDoc plugin is very agnostic to the type of design. you can essentially just export any Figma frames that you like to the spreadsheet, translate them, import them back into Figma and keep going like that.

The other thing I should mention is if we just re-run the Figma plugin again and jump back to our app, if you did want to make changes to that spreadsheet and re-import it, you can totally do that. You just click on the "Localize Frames" option again, if we pretend that this Excel sheet has been updated since with new translations, and we drag that into the Figma plugin once more; again, what it's going to do is load that up, just click on "Localize Selected Frames", and you'll see here on the left hand side that it's created a brand new page. Again, it hasn't messed around with your existing page that it created earlier, it creates a brand new one, and that way it doesn't overwrite any work that you might have done in the translation before. If this one is more up to date, you can just get rid of the old one if you want, or keep it there as an archive; it's totally up to you.

That's it, that's the whole process; you can apply this localization process to your own Figma designs and translations, or anything that you've been wanting to localize in Figma. This Figma plugin is going to hopefully make that a whole bunch easier for you and save a heap of time and effort. Thank you as always for watching, and we'll be back soon with more Figma tutorials just like this one very soon.

---

---
type: tutorial
title: How to export and re-import selected text layers in Figma using CopyDoc
date: 2022-03-25T00:00:00.000Z
---

# How to export and re-import selected text layers in Figma using CopyDoc



#### Video Transcript

Today I'm going to be showing you how to easily export any selected text layers from Figma out to a spreadsheet file, which we can then edit and re-import back into Figma to make a whole bunch of text changes really easily and automatically.

To get started we're just going to jump into the Figma Community and search for the word "CopyDoc" and under the "Plugins" tab you'll see CopyDoc come up, and all you need to do is click on the "Install" button on the right-hand side and we'll be ready to go.

You can swap back into your Figma file at this point, and it can be any Figma file with any content in it. I'm just going to go ahead and run the Figma plugin that we just installed by right clicking anywhere, going down to "Plugins, clicking on "CopyDoc", and that's just going to fire up the Figma plugin we just installed a moment ago.

For today's Figma tutorial I'm only going to be focusing on this bottom feature called "Quick Export Selected Text Layers", and this feature differs from another feature that I've covered in other Figma tutorials which is this feature up here called "Export Figma Text Layers", and this feature is different because it centers around entire Figma frames; if you want to export a whole bunch of Figma frames out to a file and make changes to them and re-import them in bulk, that's a really good option, but if you only need to export certain parts of a design or certain parts of a single frame, then this option that we're covering today is going to be an option that's much more suited to what you're after.

To get started, all we need to do is find the part of the design that we want to export, so in this case I'm going to export this "Cast" frame. This frame contains, as we can see on the left here a bunch of text layers, I've got a heading layer, this other layer here, and then a bunch of nested text layers, too. By clicking on the frame that wraps around all those FIgma layers, what the Figma plugin is doing is it's showing us that we've got six text layers found, so we can see one, two, three, four, five, six. 

What we can do is export those specific text layers quite easily just by clicking on this "Quick Export" button. I'm going to do that now, and you can see here it's given us a list of the text phrase text layers that have been selected, and the only thing you need to do is select what format you want to export it to. We've got CSV, JSON, XLIFF, and you can go into some more advanced options here too, but I'm just going to keep it simple with CSV today. Then I'm just going to select the ordering option; this is the order of the text that gets exported to the CSV. At the moment, I'm just keeping it as sorting the text visually based on where it is in the design. For example, it'll sort it from top left to bottom right; we should see "Cast", "See all", "Robert Downey Jr." and so on. I'm just going to leave it as that, and then I'm going to click on the "Quick Export CSV" button.

Okay, it's generated the CSV. I'm just going to click on "Download CSV Export", it's very quick, as you can see. I'm just going to save it to my desktop and then I'm going to jump into my desktop and open up this file. I'm just going to use the default "Numbers" app that comes with Mac. You can use Excel, you can use Google Sheets, anything that you like you can use, but I'm just going to keep it really simple today just so you can see what I'm doing here. As we saw in the design, it's exported it in the order that we expected; that's exactly how we expected the order to come out. You can see we've got a few different columns here; the "id" column you don't want to touch, that's what's going to map these layers back into Figma in a moment when we re-import it. The "frame" is just telling us which Figma frame that it's been exported from; in this case it's the "Movie Details" frame. The "layer_name" is the layer name of the text layer, you can change that layer name if you like, and that will get updated also in the Figma text layers or Figma layers panel. Finally, we have the "figma_text" column; this is the actual text content in each of these layers, so that's the one we're going to be focusing on today. All I'm going to do is I'm going to update this; I'm going to say "Actors Featured", so I'm going to change that "Cast" one to "Actors Featured". I can change "See all" to "See more", and I think all of these names are correct, so I'm going to leave those as is. Then all I'm going to do is I'm going to click on file export to CSV I'm going to select CSV select unicode utf-8 and go next and then I'm just going to save it as updated on my desktop.

I'm going to close that "Numbers" app off now. I'm going to jump back into my CopyDoc Figma plugin, I'm going to close off that download panel, and this time I'm going to click on the "Import Text Layers" option; I'm going to click on that little button here and this is giving us the chance to drag in a file that we've updated that was originally exported from the CopyDoc Figma plugin. What I'm going to do is I'm going to grab that updated CSV that we just changed, I'm going to drag that in to the Figma plugin into this little drag and drop window, and you can see here that it's loaded up the CSV file and it's telling us that it's detected two text changes since we exported the file. You can see that it's detected we've changed "Cast" to "Actors Featured" and "See all" to "See more". I'm happy with both of those, but if you only want to import certain ones you just uncheck any of the ones you don't want to update. If you're unsure of where the text is being changed, all you need to do is click on this little text icon, and that will immediately select it and zoom into it on the Figma canvas; if you're a bit unsure, that's just a really good way to double check.

In my case, I'm happy with these changes, so I'm just going to go ahead and click on this "Update Figma Text Layers" button here. I'm going to click that now, and you can see here that it says it's updated two Figma text layers, and as we'd expect, it's made those two changes that we made in our spreadsheet just a minute ago. As you can see, none of the other text has been updated, that's all been left alone; just these two changes have been made. That's a really nice way of updating certain components or certain layers within a larger frame or within a larger context, and this can be really useful for things like microcopy or for example these buttons, you could export those or if there's just a list within a frame like these cinemas for example, exporting that selection is a really quick way to send that to your copywriter, or update it yourself, or update or send it to someone who doesn't have a Figma account, and then they can basically send it back to you once they're happy with the text changes while you continue working on the design, and then you can just re-import that spreadsheet file directly into Figma via the CopyDoc Figma plugin.

That's basically it for today; you can you can use this example in your own designs, you can select multiple layers, so if you wanted to select both of these layers we can we can easily do that. I'll just quickly show you what that looks like; you can see here that we've got both of these selected, and now "Storyline" is also showing up. I forgot to mention that this preview here will also reflect your option, so if you change the ordering option of the text, for example, if we changed it to "Alphabetical", so we'll go from "A to Z", and you can see here as a preview it's showing you what that's going to look like in the spreadsheet. I forgot to mention that before, but that's a bit of a preview of how it's going to look when it actually gets exported. If we quickly export that CSV again, download the export to our desktop, save that, and once again open that with the "Numbers" app, or whatever spreadsheet software you want to use, you can see here this time it's exported those two extra layers; the "Storyline" layer and the "Description", and because we selected the "Alphabetical" option, it's now sorting the Figma text content from "A to Z" in alphabetical order. That's just an example of how you can easily change that text order when you do export the spreadsheet.

Alright, I think we'll leave it there for today; I just wanted to give you a really quick example of this new quick export option. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to translate HTML email designs with localization in Figma using Emailify
date: 2022-03-14T00:00:00.000Z
---

# How to translate HTML email designs with localization in Figma using Emailify



#### Video Transcript

Today I'm going to be showing you how to translate and localize your email designs from Figma into HTML emails using the Emailify Figma plugin.

The first thing we need to do is just go to the Figma Community and search for the term "Emailify", and under the "Plugins" tab you'll see Emailify pop up; just go ahead and click on the "Install" button and then you'll be ready to go. I'm just going to jump back into my Figma file, I'm going to right click anywhere, go down to "Plugins" and click on "Emailify", and that's just going to run the Figma plugin that we just installed. 

I've already got an email designed using Emailify; I've used all these components here just to create this simple email design. I'm not going to be going through how to design the emails in this Figma tutorial, if you're interested in that we have another Figma tutorial on our YouTube channel that I'd recommend checking out first, but otherwise I'm just going to assume that you've already got an email design ready to go. 

In my case, this is my original email that I designed using the components from the Emailify Figma plugin, and what I've done is I've just copied this entire frame onto a brand new page just called "Copied". You can see here that it's pasted the frame and all of the children are now instances; these are instances of the original Figma components, and that's going to come in handy later, because it means if we translate this frame here, which we're going to do in a moment, it means we can go back to our original frame with these components and we can actually change the styles of all these different components and have those changes roll out across all of our translated emails as well. 

To get started with the translation and localization process of the email designs, all we need to do is click on this "Localize" button in the Figma plugin header; I've just clicked on that, and you can see here I've got a few locales that I've already saved from the last time that I ran the Figma plugin. You can go ahead and add your own, so you can autocomplete this list if you wanted to add a "English (Australia)" version for some slang translations you could do that, you can add basically any translation that you want that comes in this pre pre-filled list. You can also add your own custom ones, so you can say "Custom Locale", or if you have like a specific variant, you can say "Variant 2", or something like that; and these will all get included in an Excel spreadsheet that we're going to export in a moment. 

Today, I'm just going to leave it as those original 4, and I'm going to make sure that my email is selected; if you have multiple emails on your page you can export multiple into multiple locales, but for today I'm just going to be exporting this one to these four locales. All you need to do is click on the "Export to Excel Spreadsheet" button, so I'm going to do that now and this is going to export all of the text content from our design in Figma out to an Excel spreadsheet file. I've just exported that to my desktop, and I'm going to click on that zip file and unzip it, and you can see here it's exported a Excel spreadsheet with the name of my frame. 

I'm just going to go ahead and open that up with Excel; you could open this up in Google Sheets or a different program if you wanted to as well, but for today I'm just going to be using Excel, and that's just opening up now. I also have a pre-translated file, so we can compare the two and if we have a look here at the pre-translated one, basically what I've done is I've gone through and I've translated all of these locales. When the locals get exported, you can basically check what those look like here, so if we go back to our original one this is what the original export looks like; the original export contains all of the text layers from our email and that's under the "figma_text" column, and then it also exports blank columns for any locales that you've selected; in this case it's "French", "German", "Japanese" and "Spanish". These are all empty, so it's up to you to basically go through and translate those into these different columns. You can just leave those first two columns alone, don't change anything in there, don't delete them, as we'll need these in there when we re-import these translations back into Figma in a moment.

I'm just going to close off the original one and open up my pre-translated one; this is the Excel file that I went through earlier, exactly the same export process, except I've now gone ahead and translated all of these columns into the different languages. They're all pre-populated now based on some work I've done earlier, you'll notice I've also left the bottom two rows empty, and that's because I don't want this address to be translated, I just want to leave it as it is. Basically, any rows that you leave empty in any of these locale translation columns, those will just automatically be left alone as the original Figma text here, so you can just fall back to those if you don't want to translate any layers. 

Okay, now that I've translated my email text in the Excel spreadsheet here, what I'm going to do is I'm going to jump back into Figma and you'll notice down here in the bottom section of the "Localize" feature, there's a "click or drag and drop" box; you can go ahead and drop in your updated Excel spreadsheet file. I'm just going to grab that file, drag and drop it from my desktop into the Figma plugin, that's going to load up the spreadsheet and it's going to let if it finds any emails that have been translated, and how many locales have been found. In our case, we only we only exported one email; it's found one email in the spreadsheet with four different translations, and so what we can do is we can just confirm we want to import that by keeping it checked, and then all you need to do is click on this "Localize Selected Frames" button. I'm going to do that now, and that's just loaded up all of the translations from our Excel spreadsheet back into Figma. 

Let's run through what that's just done together; if you remember, we had our instance that we exported to the spreadsheet, we opened that spreadsheet, we edited it and added some translations in there. What the Figma plugin has done is it's read that Excel spreadsheet, and it's automatically duplicated those frames into translated versions localized versions with the text layers that we specified in that spreadsheet. You can see here what it's done is it's created a brand new page, it hasn't modified the original design, it's just created a copy of the frame and then created another copy of each frame with those translations that you specified in the spreadsheet. It's got this little translations box in the page name, and then it's adding in a timestamp to tell you when that page was imported. 

Then we've got our designs right here; those are automatically added for us, and you can see that all of the text has been translated directly as we specified in the Excel spreadsheet. Because we're using auto layout on basically all these design elements, the button widths and the text widths and heights and things like that automatically fit to re-adjust with that updated copy. The other neat thing is that you'll notice inside of this layer here, which is actually an image layer, because we originally added a text layer inside of the image; if we jump back to our original component you can see in here we've got a text layer that's just kind of floating around inside of that frame. We can move that around, and that will update in the components over here as well because they're instances, but those also get updated because they're just text layers, so that even though they get exported as images, the text inside of the images also get updated, which is really cool. 

As I mentioned, because these are instances of that original component, so if we go back to our original design with the component layers; if I wanted to change these buttons, for example, I can do that. I can just select that fill, select a new fill, I can change the text color, and if I now swap back into my translations, you'll see here that all of the translations have also been reflected with that design update, because these are instances of that component. It's a really cool way to roll out not only translation changes, but design changes to a bunch of translations after you've already imported the localizations into Figma. 

If you decide you want to update those translations again, you can go ahead and export that page again or you can just update the file you originally exported and just drag that back in. If we drag it back in, I'm just going to drag the same file back in, and basically that's found the same frame. I'm just going to click "Localize" again, and you can see here what it's done is it hasn't modified our original translation page, it's just created a brand new page with a new timestamp with brand new instances, too. You could either delete that page if you don't need it anymore or you can just keep them both, and keep them as versioned translations if you prefer to do that as well. The cool thing about doing it this way is you can actually then tweak the design if you need to in Figma; so we can basically override these per translation if we wanted to. You could have different color buttons for different translations or different things like that, you could totally do as instance overrides. 

The best part of this process really, at the end of the day, is now that we've translated these into multiple localized Emailify frames, these are basically production ready because they're based off of our original Emailify design. What we can do is we can now export these localized Figma designs into real HTML, production ready HTML, and all we need to do to make that happen is just click on the "Export HTML" button in the Emailify header, and then just select all of the emails that you want to export. I'm just going to export all of them, and then what I'm going to do is just select the "HTML" option. If you're using Klaviyo or MailChimp, you can select a different platform, but I'm just going to keep it simple today and keep it on "HTML". Then I'm going to click on the "Export to HTML" button; I've just clicked that and this is now going to go through and export those five emails. There are four translated emails and the copy of the original language email that was also automatically copied into the new page when we imported that spreadsheet.

That's just finished up, I'm just going to click on the "Download your .zip file" button and save that to my desktop, jump back to my desktop and unzip that exported file, and inside of this folder you'll see that we've got our translated emails along with all of their images. We can see these all at once just by opening up a browser and dropping in the "previews.html" file, and that basically lets us scroll through all of the emails that we just exported. You can see we've got all of our locales, we've got our specific colors for those different instance overrides that we added. You can see that the images also have the translated text baked into them, even though this is still real text, and again different variant, different translation; that's the German localization with the different color button, and then the rest are just the original style, but still in rich text, and the image baked in as well. 

Finally, you'll notice that because we left the bottom two rows out of the spreadsheet and didn't update those in any of the locale columns, that's just left it as the original text. We just got our address left in there as per the original version, so that's just worth noting as well if you want to exclude any text content, just leave it blank and that will automatically fall back when it translates the text layers. That's basically it, you could now take these emails, these are production ready translations, ready to go. You can individually see them all here and do whatever you need to with them, basically these are all ready to go.

Now we're done with the HTML previews I'll just close that off, jump back into Figma, and the last thing I was just going to mention is if you need to re-export them just click on this "Go back" button and that will bring up the email frames option again, where you can select different frames and export those into different locales as many times as you want. That's basically it; I just wanted to run through the whole process end to end, so there wasn't any confusion with how it works and just give you a real good demo of how you can use this in combination with the instances and the original component to create a really nice localization process directly in Figma, or translation process, if you're exporting HTML emails and need to do so in multiple languages, multiple translations; the "Localize" feature that's just dropped in the Emailify Figma plugin is probably going to be your best bet for a really seamless localization process inside of Figma before you export your emails from Figma to HTML.
 
Once again, thank you as always for watching, and I hope if you've been trying to streamline your localization process with your email designs, as I know a lot of you have, I hope that this new feature really helps out with your localization/translation workflow in Figma, and removes some of those barriers that I know a lot of people have been running into with trying to manage those different localized versions of the emails. Until next time, thank you once again for watching, and we'll be back soon with more Figma tutorials just like this one very soon.

---

---
type: tutorial
title: How to get comments and feedback without a Figma account using Commentful
date: 2022-03-08T00:00:00.000Z
---

# How to get comments and feedback without a Figma account using Commentful



#### Video Transcript

Today I'm going to be showing you how to gather external comments and feedback from clients and stakeholders without them needing a Figma account, directly into your Figma designs.

We're going to be doing this by using a new Figma plugin called Commentful. To get started, we'll just go to the Figma Community, search for the word "Commentful" and then under the "Plugins" tab you'll see Commentful pop-up. Just go ahead and click on the "Install" button and then you'll be ready to go.

I'm just jumping back into my designs now and to run the Figma plugin we just right click anywhere, go down to "Plugins", click on "Commentful" and that'll fire up the Figma plugin that we just installed a moment ago. 

If it's the first time you're running the Figma plugin in the file you'll just need to click on this "Connect To Figma File" button and jump into there; you'll get a couple of instructions on how to get your Figma API token. Just go to your settings page in Figma, go down to the API tokens, paste that in there and click on "Save Token". Then in your current file you just want to go up to the "Share" button in the header, click on that, then click on "Copy link" and paste that into the text box and click "Save URL" and that's just going to connect up your Figma file to the Commentful Figma plugin. 

I've got another Figma tutorial on our YouTube channel which goes through all of the ways that you can organize your native Figma comments, this is more for internal Figma feedback with you and your team, but for today we're going to be looking at a different feature, which is under the "Reviews" tab. If you click on the "Reviews" tab in the Commentful Figma plugin; you basically want to jump into that and under the "Reviews" tab, this is where you're going to be able to create review links that you can send to your customers or stakeholders and they'll be able to leave you Figma comments, text feedback, and image feedback without them needing to have a Figma account. Then you can basically see all the feedback coming straight through into the Figma plugin and action that automatically in Figma.

To get started, all we need to do is click on the "Create New Review" button and that's just going to open up this little panel which will reveal all of the frames that are on your current Figma page. You can order these by either dragging and dropping them in the list or you can just quickly order them by column or row or layer name; in this case I'm going to sort by left to right in columns, so that's just going to sort it by the way we see it on the Figma page. Then you just select the frames that you want to include in the review, so I'm just going to include these three to start with, and I'm going to say let's review the "App Profile Screens", I'm going to call it that and click the "Create New Review URL" button and this is going to go ahead and up upload the three frames that we just selected in the order that we selected them, and then it's going to give us a link that we can share with our clients and stakeholders to review.

That's finished now, and we can optionally personalize the URL if we know the name of the person that we want to be reviewing the link. In this case I'll just put my name in there, and I'm going to click on the "Passwordless URL", so this link doesn't need a password but you can also send a URL with a password if you want to do that instead. I've just copied that URL and I'm going to paste it into my browser and you'll see it load up with the designs that we just selected in Figma. I've got my three frames here and they're basically just a snapshot of the Figma frames from that moment in time. If you were to update your Figma file at the moment, like if you just change some of these text layers or images or moved anything around, that would not affect the uploaded images on this link. The review is looking at the link at the time that you uploaded it rather than a live Figma version that's a work in progress.

There's a few ways that a stakeholder can leave feedback; the first is just generic feedback, exactly the same as you would see in the native Figma comments. If they click anywhere, they can click on this logo and say they want to "make that bigger", they can do that, they can add formatting, they can add emojis, they can add links all that good stuff, and then they can just submit those comments. You can see here that's been left by me and it's been created at this time, and that's what the comment looks like. 

More importantly, we can actually now jump back into our Figma file and you'll see the new review pop up there. If we click on the review, I can see that the comment that I just left has automatically come through to the Commentful Figma plugin itself, and I can jump to that comment location just by clicking on the pin here, and you can see it's referring to this logo on the "Detail Current Bid" frame. That's just a really easy way to jump to it, so I could action that feedback in the file and then I could check it off in the feedback reviews page, and then I would know that's basically done, so you can close that off and you can see what the progress is for any given review.

We're going to go ahead and leave some more review feedback, and this time instead of leaving comments, we're going to click on this "Request Text Updates" button in the top of the page in the review link. What this does is it switches it into a mode where the reviewer can actually leave specific text feedback on real Figma text layers that correspond to your Figma file. For example, I could give some feedback on this follow count, so I could change that from "150" to "2000" or something like that, change that, I can change this one to "9000", and you can just leave any feedback that you want. If this needs to have an "http" prefix, I can do that, I can add some exclamation points, I can remove text if I need to and submit that as a change request. I can see what that looks like in here, so I get a clear difference of what the original content was and what the requested change looks like, so I can check all those out inside of the app.

More importantly, I get all of that content fed directly back into my Figma file instantly; I don't need to wait for them to finish all their feedback to be able to see it, I get all of this coming into my Figma file in real-time, and I can jump around and see exactly where that content has been left, where the feedback's been left. The coolest part is I don't even need to manually update this, I can just click on this button that says "Update in Figma"; if I click on that, that will automatically make the text changes that have been requested for me. You can see here I'm just clicking on these buttons and it's automatically checking off the task for me at the same time. I'm just going to do the last one now, so I'm going to click "Update in Figma" and you can see here it's made that change. You can see before it used to have that suffix on the end, it didn't used to have the "https", that's now been added in, so all of this feedback's just been actioned within a few seconds basically without me having to manually figure out where the text changes were and manually update them on my Figma layers, so you can see all the feedback's been completed there. 

Along with text changes your reviewers can also leave image update feedback. If you click on the "Request Image Updates" tab at the top this will also highlight any layers that contain images, so that's bitmap images in your Figma fills, Figma image fills and that means that they can actually leave specific image feedback on certain Figma layers. If I knew that this image here needed to be updated, I can just click on that, and from my computer I can just drag and drop an image. I'm just going to drag this image, because I want to update the avatar, and that's just going to upload the image to the review link. It's telling me that it's been uploaded, and once again I can see here if I click on this feedback pin that the new feedback or the image requested change has been set to this.

Again, in my Figma file I can see that pop up instantly as well. I can jump to that see exactly where the image change was and once again, more importantly, I can just update that instantly in Figma. If I click on "Update in Figma", that's going to download the image and automatically swap it out for me, I didn't need to save it to my desktop, I didn't need to do anything like that; I didn't need to manually drag it into my Figma image layers, I just automatically click "Update in Figma" and that feedback will come through into the design. It adds the image as an extra layer fill, so if you were worried that it was replacing the original image, don't worry it's still there; if you wanted to see that you can just hide that top image and the original layer is still underneath, and it just adds it at the top.

You can basically do whatever you want with that image now, so if you do need to move it around or change the way that it feels you can do that. You could change it if you need to. That's what that looks like there, and again, you can just you can just go through and do this for for any image you need to; you can add more feedback. I can drop some more images in there for this other little avatar here, and once again, we see it instantly come through into Figma. If I know that I want to update that, I can check out where that's been left, and I can decide if I want to accept it. In this case I'm just going to update in Figma againm and there we go, we've got our brand new image that's been requested.

That's what that looks like, and that's basically it. You can send these around as many times as you want; you can also hide the completed feedback, so if you've already checked off these and you want to tidy up this list, you can check the "Hide Completed Feedback" toggle and that will basically just hide all of the client feedback that's already been done, and if any new Figma comments or feedback comes through, so if we get some button feedback that's not been completed yet, all of our hidden feedback is hidden, but all of the new feedback will still show up. It just tidies up that list a little bit more in a way that you don't have to sort through it visually.

The other thing that you can do is export the Figma comments and Figma feedback to a CSV file. If you want to export this to a different program, or just look at it all in a spreadsheet, or print it out even for some reason, you can do that. You just click on the "Export Feedback" button and that will automatically generate a CSV for you, so if we save that to our desktop and open that up that, we'll automatically have basically all the feedback that we've just been collecting from our stakeholder or from our client that we could see in here. I'll just open that CSV, and I'll just show all the completed ones again, just so we can compare, and you can see here it's basically got all of our feedback the same as what we can see in the Figma plugin, but it's just in a spreadsheet. We can see what the feedback type is, if it's a comment, an image change or a text change, what the pin number was, what the comment was, what that feedback was, what the requested image looks like, and what the text changes look like.

It's got the previous text and what that text was requested to be updated to, and then you can see the completed status. when it was created. when it was last updated. and also a link to the pin itself in the web app, so you can you can jump in there as well. That's what the CSV export looks like with your feedback comments from stakeholders, so that might be useful if you're wanting it in that format as well.

In terms of the web link you can delete feedback, too, if you accidentally made a mistake or the feedback no longer applies. You can remove that just by clicking on the "Delete Feedback" button and then clicking "Ok" to confirm, and that will basically remove that feedback from not only the web link, but also from your plugin Figma comment list as well; that's just if you need to delete any feedback. Alright, so that's currently all the ways you can leave client feedback and Figma comments without a Figma account using the "Reviews" web link for Commentful. You've got the native Figma-like comments, text update change requests and image update requests. there will probably be more added over time, but at the moment that's what it looks like.

Hopefully that's a really good start if you've been wanting to gather client feedback or Figma comments without inviting them into the Figma file or making them sign up for a Figma account, or using a completely different third-party service that you need to manually export your Figma designs from and into, and manage those links and then somehow get that feedback back into Figma; this is just a much tighter feedback loop that integrates directly with the Figma layers themselves and directly with your Figma file itself, which is where all the feedback is going to be actioned. To me, it makes sense that you would try and get that as close as possible to the layers.

If you've been wanting to streamline your feedback process, your external feedback process or internal feedback process, feel free to give the Commentful Figma plugin a try and hopefully it improves your workflow and just really streamlines things with you and your customers, or clients, or internal stakeholders and gives them an easy way to leave feedback or Figma comments in your Figma designs without a Figma account, or without them having to see your real-time Figma designs if you don't want them to. That's going to be all for today; I hope you enjoyed the tutorial, and we'll be back soon with more Figma tutorials just like this one very soon.

---

---
type: tutorial
title: How to supercharge and organize your Figma comments using Commentful
date: 2022-03-06T00:00:00.000Z
---

# How to supercharge and organize your Figma comments using Commentful



#### Video Transcript

Today I'm going to be showing you how to level up your Figma comments by organizing them and being able to filter them add todo items add tags a whole bunch of stuff. We're going to be doing this using a brand new Figma plugin called Commentful.

Let's get started by going to the Figma Community and searching for the term "Commentful", and under the "Plugins" tab you'll see Commentful pop-up. Just go ahead and click on the "Install" button on the right hand side, and then you can switch back into your Figma file. 

You can see here I've already got a few Figma comments in here, just native Figma comments, nothing nothing too crazy. We're basically going to organize these Figma comments in a way that's a bit easier to look through rather than just using the native Figma comments panel, which can be a bit tricky if you've got a bunch of Figma comments and you're trying to keep track of them. 

To get started we're just going to right click anywhere, go down to "Plugins" click on "Commentful" and that's just going to load up the Figma plugin we just installed a moment ago. The first time you run the Figma plugin you'll just need to connect it to your Figma file. You can do that by clicking "Connect This Figma File" and it's going to give you some steps just to get your Figma API token; if you go to your settings page in your Figma profile and go down to personal access tokens, just name it "Commentful" or something like that and hit enter, and you'll receive a token that you can copy and you want to go ahead and paste that in this input field here. I've already got one saved in here, so I'm just going to use that one and click "Save Token". 

Then what you want todo is grab your current Figma filem, click on the "Share" button in the toolbar click on "Copy link" and you can close that off and then just go ahead and paste that Figma file link into the input here and click on "Save URL". This is now going to connect the Figma plugin to your Figma file and sync up all of your Figma comments into the Figma plugin so we can actually see them and start organizing them. 

By default, all the Figma comments that you've got already in your file or any new Figma comments that you add to the file will get automatically put into the "Backlog"; these are all the Figma comments that haven't been assigned a different category yet and they're basically just where all of the new Figma comments go. 

To create a category, we just go over to the right hand side here click on any of these status icons, click on a color, and then give it a label; I'm going to call this one "Completed", then I'm going to click on "Add New Custom Status", and you can see here it's added a brand new column to our board here. What we can do is we can actually filter these by resolved status; I'm just going to click on the filters button, and go down to "Show resolved and unresolved Figma comments", and then in here if I go to my comment and resolve that in Figma. 

I'll resolve a couple of those ones, and we can actually jump to these Figma comments easily just by clicking on these pins here. If I click on any of the pins it'll automatically jump to that comment on the page, so I'm just going to mark a couple of these as resolved; and it's worth noting that the Figma plugin refreshes your Figma comments about every 20 seconds, so you might notice that it took took a little bit to update the statuses here, but every 20 seconds or so it'll refresh these based on any Figma comments or updates that have been made in your Figma file using the native Figma comments feature.

Now we can see here we've got our two resolved Figma comments that we just added and what I'm going todo is I'm going to move these into our new category; I'm just going to click on both of those, go down to here in the footer, click on the "Completed" category and then click the "Move" button. You can see here we've just moved those two Figma comments into our "Completed" category, so those are out of the way now and you don't have to worry about those, we know where they're at status-wise, and we can go ahead and create more statuses for more use cases as well. 

I'm going to create one called "In Progress", then "Create a new custom status" and we've just added "In Progress". I do want this to be in the middle, I don't want it to be at the end, so I'm going to click and drag that title and just drop that over to the left here; now we've got our column in the middle so we can actually start moving these into that category now, and those are more organized as well. These are two that I've got "In Progress", we can edit these labels as well; if I wanted to call this doing I just change the label and update that and that's been saved there, we can also jump into any of these cards. These are just comment threads from Figma I can click on those get a really nice overview of when it was created, what frame it's attached, to how many Figma comments exist, and things like that. 

The cool thing is I can also give these custom titles; for example this one's telling me that the social stats are up outdated, so I might call this one "Social Stats Updates" and that's just going to get pulled through into our cards here. That gives me a way to give it a custom title without just relying on the comment itself, so it's a nice way of keeping the titles organized as well. 

The other cool thing we can do is set a due date, so if I know this needs to be done by the middle of the week, I can set a due date for Wednesday and that's going to tell me that it's now due in three days. In our overview I can also get a really clear sense that this card needs to be done in three days, I can set that so if that was already set to last week, it'll tell me that it was due five days ago, and again you get a really clear indication that this comment needs to be taken care of and and put to the completed column; that's what that looks like there. \

The other neat thing that we can do is actually tag these Figma comments as well. For example, this one's telling us in the Figma comment that we need the thumbnails to be bigger; that's probably a design task, so I'm going to tag that as "Design" and I'm going to tag this one also as "Design" and you can see here now it's got these tags in our cards that we can actually see as an overview level, but the other cool thing is we can actually now filter by those tags, too. If we decide we only want to see Figma comment threads that are tagged as "Design" we just jump back into our Figma filters, jump into the "Filter threads by tags" input, and if you just start typing the tag it'll autocomplete it, so we can select "Design" and now. If we close that off, you can see here that those other threads have disappeared and we're only seeing any Figma comments that have been tagged with the tag "Design".

I'm just going to clear those again, and we can do the exact same thing with users. If you want to filter by user you can do that, so if I type in one of the usernames, it's going to autocomplete and I'll just click on that one, and this is only going to show me threads that were created by "Figmatic". I can also "Show resolved and unresolved" so we get a few more results in there; you can see these ones have been created by "Figmatic", but I can change that to "Adam" so I can see all of Adam's Figma comments, and you can see those are in there as well. We can clear those just by clicking on that, but that's a really nice way of actually seeing which which tags are attached to which comment and you can just narrow that down really quickly.

The other neat thing you can do is filter by date, so if that you only want to see Figma comments that have been added today, or yesterday, or in the last week, you just click on one of these presets and that'll automatically select "today", so these Figma comments were all created today, but we could also say we want todo the last seven days, or we want to just do yesterday, or you can just pick your own date range. You can just jump through these if you want to see everything from January, just jump to there, select all of January, and that would show you everything that's been in January. I don't have any in January, so you can see here it's just showing nothing, but I'll just clear that.

The other cool thing we can do is filter by comment location, so if you've got a bunch of Figma comments in your file and you only want to see Figma comments on a certain frame or a certain place, for example, on the "Notification" frame here, I can see that we've got one comment on there; I'm just going to unselect all of the other locations and only show any Figma comments that are attached to the "Notification" frame here. I'm going to close off my filters and you can see here it's just showing this one comment which is attached to the "Notification" frame on page one; that's what that looks like there. That gives you a bit of an overview of what the filtering system looks like.

The other neat thing that we can do is automatically search all of our Figma comments instantly. If I start typing a keyword, you can see here it's going to pre-fill those results and show me where the highlight is in the in the keyword. This is just a really quick way of searching all of your Figma comments for a specific keyword instantly and you don't have to filter around if that you've got a keyword you want to look for, you can just do that and then all you need todo is click on one of these results, or use the keyboard, and that will jump you straight to the comment and open up the thread overview as well. That's a really quick way of finding Figma comments if what you want to look for in the actual message content or in the title field here.

We can also reply to Figma comments. You can see here it's just loaded up this comment here, that's on Figma Comment Thread #1, and I've decided I want to reply to that comment, so I'm just going to have a quick look at what that actually looks like. If I find my #1 comment, which I think is actually resolved; that one's already been resolved, so let's leave a comment on #2; we've got our number two comment here. I'm just going to open up the card and this is talking about "notification thumbnails", so we'll just say "No worries, I'll update this straight away"; and the cool thing is we can actually use markdown formatting to make these Figma comments a little bit more clear and concise. I can add bold, italic, strikethroughs, ordered lists, unordered bullet lists; I could write a list of file names or something just by clicking on that unordered list, and then I could say "image.jpg", "image2.jpg", and just add a little label I'm "uploading to". 

Okay, that's what that looks like and you can also add emojis of course, so we can just drop in a emoji and links as well. We can actually insert links if we wanted todo that, so we could add a link to "uploading" and put that as "figma.com" or something like that, and that's what it looks like in the preview here. If we want to reply to that thread just hit "Reply To The Figma Thread" button, and that's going to post the reply and refresh our Figma comments. You can see there it is right in our thread that we already had open. 

The neat thing is if we actually go to Figma now, and jump to that comment you can see here we've got one reply; and there we go, that's the reply that we just added through the Figma plugin and it's posting it to Figma because we're connected to Figma using the Figma comments API; all of the Figma comments that you leave through the Figma plugin will automatically get fed into Figma as well. 

Even if you're not using the Commentful Figma plugin, that content is still available to anyone looking at the native Figma comments as well; the only difference is in here we've got the markdown formatting, it's raw text; it's still readable, it's still meaningful, but when you do read that in the Commentful Figma plugin, that's when you're really going to get the benefit of having the actual formatted lists, having the actual formatted markdown, and things like that, so that's what that looks like. 

The other cool thing we can do is create todo lists. We can create todo lists in two different ways; we can either assign todos to a certain Figma comment, in this case I'm going todo that; I'm going to say jump to the "My Todos" tab, and I'm just going to insert a todo here. I'm going to say "Upload image.jpg from Dropbox", or something like that, and I'm just going to click "Add Todo" and you can see here it's added todo to our items for that Figma comment. I can add another one, so I'll say "Upload second image from Dropbox", add that as a todo as well and then we can actually start checking these off. We can check those off and see what the completed checklist looks like, we can also hide those, but the neat thing is we can actually see an overview of that from our Figma comment thread cards as well. We can see here that we've got 50 todos completed on this specific Figma comment card. 

Even more useful is jumping to our "My Todos" tab; up in the header here if you click on the "My Todos" tab and then go to the selector up here, and we're going to change this from "Private Todos" to "Assigned Todos". Basically, what this tab allows you to do is see an overview of every todo item that's been assigned to you on different Figma comments. We can see for example the ones we just added to this Figma comments thread, here those two we just added in those have automatically fed through to our personal todo list, so if someone else is assigned these to us, or if we assign them to ourselves through the Figma comments, we get that all in the one place and we don't have to go looking around for what we're meant to be working on, it's all in a single place where you can just go through and check these off. 

I can just go ahead and check those off like any normal todo list, and I can hide the completed lists if I don't want to see them anymore, and I can also leave them on unhidden or just hide the todo items as well. The other cool thing is I don't need to go back to the thread every time if I know I want to add another item here, I can just do that, I can say "Another todo here" and add that todo as well, and that's automatically going to add it to our own list but also add it back to the todos list on the Figma comment thread; everyone's going to be able to see that at the same time, and you don't have to go digging around for those those Figma comments there. 

The other way we can add todos is by going back to the Private Todos; if we just change this filter up here to say "Private Todos", what we can do is create our own private todo lists. If I say "My Design Tasks" and create that as a new list, this is going to add a list that only we can see, no one else can see this list, this is just for us, just looking at this page. We can create a "My Design Tasks" list and start adding our own todos, so we can say "Update the the assets" and add that as a todo, we can say "Do a copy review before sending out", add that as a todo; so this really becomes your own private todo list. If you have multiple categories of lists, you can just create new lists as well, so we can say "Design Review Feedback", add that as a new list, and now you can add new items under that list as well. You can say "Fix typos in text layers", and anything like that, you can just add your own todos in there and that'll just give you your own private todo list that sits separate from any other todos that are shared on those Figma comment threads. 

That's what that looks like there, and as I said you can see these on the actual Figma comment thread cards, just to get a really clear overview of what's been completed what hasn't; you'll be able to see those get completed and that's just an easy trigger to say "Okay, this is probably finished, so we can move that to a different category that resolves the thread". These are multiple ways of keeping track of tasks, keeping track of Figma comments, organizing them by statuses, tags users, adding todos, all those sorts of neat things; you're really supercharging your Figma comments, your native Figma comments abilities to organize them in a much more straightforward way that you can't do normally.

That's that's basically what it looks like, that's all the filtering, that's all the searching, you've also got an alerts panel; if you click on this little "alerts" icon, that's basically just going to show you a stream of all of the Figma comments in this file in reverse chronological order, so everything that's at the top is is the newest. If you open that up and you just want to see a really quick overview of what's been happening in the file in the Figma comments, you just click on that little icon and you'll get an instant readout of all the Figma comments that have been left, and you can jump into those really easily. That can be really handy, too. 

The other cool thing you can do if you want is export these Figma comments to a CSV spreadsheet. Let's say you've got all these Figma comments and someone else wants to have a look at them, or you will need to send them to a stakeholder, or you just want to export them for your own purpose, you can do that in one click just by clicking on the "Export Figma Comments button. If you click on that that's now exported the Figma comments, so I'm just going to click "Save", that's going to save it to my desktop, and if I now open that with my spreadsheet app; in this case I'm just going to use the "Numbers" app that comes with the Mac. If I open up that one this is going to open up the CSV file, so this gets saved out as a CSV, just a standard CSV spreadsheet, and we can see here that all of the Figma comments from our Figma file have been exported into a nice looking CSV file. 

This includes pretty much everything you'd want to know; you've got your pin number, that's where the the number of the pin what page it's on what frame it's attached to, who posted the comment, what the comment message was, and then you've also got your custom statuses; these are the statuses that we added through the Figma plugin; we've got our "Doing" status our "Completed" status, that's what comes up therem we've also got tags, so if we've added any tags to a comment we can see those in here as well, if we've set a due date that'll pop up in there, created at, resolved at; that's if it's been resolved in Figma you can you can get that date in there, and then also we've got our link which is basically a direct link to the Figma comment pin itself; if you click on that that would open up your browser, and if you've got permission to look at the Figma file that would just jump you straight to the Figma pin and the location of the comment as well; that can be handy if you're fumbling around in the dark in the spreadsheet and you want to know where the actual comment was on the file, you can just click on that and jump straight to it.

That's basically a good overview of of what this Figma plugin can do, and I think if you're interested in filtering your Figma comments in a better way, searching your Figma comments in a better way, or just having a way more organized Figma feedback and approval workflow to be able to track your Figma comments, where they're at, and who's who's meant to be doing what, and what you're meant to be doingm then I think the Commentful Figma plugin is a really nice way of doing that in a way that really augments the native Figma comments, and keeps them super useful, but just basically augments them with all this extra detail and extra ways of filtering things down. I think that's really neat, especially with bigger Figma teams where you've got a lot of different Figma comments that you need to filter and sort through, this basically allows you to turn your native Figma comments into essentially a Trello style board that's just way easier to keep track of visually and keep everyone on the same page.

The one last thing I'll say is if you do need to duplicate your Figma file, it will automatically save your Figma file ID that you set originally to the Figma file in the Figma plugin, so if you duplicate it you'll just need to re-import or re-link the Figma file. If you were to duplicate this file, for example, you'd want to re-run the Figma plugin click on the "Settings" icon and just click on "Re-link Your Figma File" and that will allow you to re-link the Figma URL with the new Figma file URL, because it's going to be a different URL, and if you don't do that it's just going to keep looking at your old Figma file and using the Figma comments from there. You definitely don't want that, so just in case you get caught out that's all you need to do, just click on the "Re-link Your Figma File" button and you'll be good to go. 

You might have noticed there's another "Reviews" tab up here; I'm going to go through that in a separate Figma tutorial because I think it warrants its own video, but this is basically a way to gather external stakeholder feedback. By using this feature, you can create a review link which lets you basically upload these these frames to a URL and you can send this to any stakeholder or client and get Figma comments, text feedback and image feedback on the frames that you select without them needing to have a Figma account. They can just jump into that URL and open their browser, leave all that feedback for you and that's all going to get fed back into your Commentful Figma plugin and you'll be able to go through that check it off; and also automatically make any image and text changes from the customer or from the client or stakeholder. As I said, I'll go through that in in proper detail in another Figma tutorial because it is its own thing, but I just wanted to briefly touch on that in case you were wondering what that "Reviews" panel was for.

That's that's going to be it for today; I hope you've enjoyed watching this tutorial if you've been wondering how to organize your Figma comments in a more seamless way. This is going to be a really big improvement on the native Figma comments flow if you've been dealing with the carnage and chaos of keeping track of them using the native feature over here.

One other thing I should probably mention is you can also create new Figma comments through the Figma plugin. If you go to any of your statuses, you just click on the little "plus" icon and put in a comment title; I'll say "Make the logo bigger", and then you just basically want to click on a layer to tag it to, and click on what status you want, in this case it's already pre-filled to "Doing", and then you can assign it some tasks. You could say "Review design", and then you just want to leave a comment, which will be the initial message, so "Please action this as soon as possible", and we can just bold that to make it a little bit more a little bit more aggressive, because we really want it done immediately. 

I'm just going to click on "Post New Figma Comment" and that's basically created a brand new thread. Before, we did a reply to an existing thread, for example, under the "Figma Comments" tab, in any thread you can reply to Figma comments and keep that thread going, but what we've just done is we've created a brand new Figma comment thread. If we click on the little pin here, you can see that it's just dropped it on our frame, and we can see the comment that we just left has been added as well. That's just a really easy way of adding a brand new Figma thread or brand new Figma comment thread to Figma through the Commentful Figma plugin, pre-filling it to a specific category with a comment title and tags already added right out of the gate. That can be a way to streamline that process instead of leaving the comment directly in Figma, dropping a new comment in there and then basically waiting for it to load up into the Commentful Figma plugin; this basically just gets around that, so you can just add it directly through the Figma plugin, but that choice is totally up to you, so see how you go there.

Thank you as always for watching and we'll be back soon with more Figma tutorials just like this one, so please stay tuned.

---

---
type: article
title: From One to Two
date: 2021-12-21T00:00:00.000Z
---

# From One to Two



>“Yo, last year was 'bout brandin', this one about expandin'” 

— [Benny The Butcher](https://www.youtube.com/watch?v=ucMkV5ndFek), Burden of Proof

It's been exactly one year since posting the [From Zero to One](/from-zero-to-one/) post on Figmatic's 1st birthday, so I'd like to continue these annual posts to do the same again today, to celebrate Figmatic turning 2 years old!

I thought it would be interesting to condense many of the awesome stats and achievements to look back on and celebrate for 2021 into a bullet list, and then jump into writing an incoherent essay about missing some other goals further down below, and then finally look ahead to 2022 at the end.

### Things to celebrate from 2021 (tl;dr)

- **0** investors and **$0** funding (still happily bootstrapped/[default alive](http://www.paulgraham.com/aord.html))
- **1** brand new Figma plugin shipped ([Emailify](https://www.figma.com/community/plugin/910671699871076601/Emailify-HTML-Email-Builder))
- **2** other new Figma plugins (still) under development
- **6** hours spent in meetings for the year
- **12** free Figma [templates](https://www.hypermatic.com/templates/) released
- **24** new YouTube [tutorials](https://www.youtube.com/c/Figmatic) recorded
- **36** styles of danger
- **66** new [tweets](https://x.com/hypermatic) on our Twitter
- **402** new plugin updates and improvements shipped
- **690** total followers on our Figma Community [profile](https://figma.com/@figmatic)
- **~1,000** new customer conversations via chat/email
- **290,000+** active plugin installs (up from 61,000 a year ago)
- Launched our [Pro Bundle](https://www.hypermatic.com/bundle/) plans
- Added anime characters to our plugins for fun
- Shipped our [Pixelay](https://www.figma.com/community/plugin/816424186244407164/Pixelay-Compare-Design-to-Web) Chrome plugin
- Released our Enterprise admin dashboard

### The latter half of 2021

While I am happy with the amount of updates and important improvements that were made across the board for our customers this year (above), the latter half of this year didn't quite go according to plan (and that's okay, for the most part).

It's been about 6 months since the last [Long mission, short hype](https://www.hypermatic.com/articles/long-mission-short-hype/) update, and in the last section talking about "the next 6 months", I mentioned that we would hopefully have another brand new Figma out by the end of the year; but this didn't happen for a few reasons:

- Underestimating the scope of the new Figma plugin
- Prioritizing improving our existing plugins
- Hitting breaking point during our sixth lockdown
- Working on developing a second new Figma plugin

I'll go more into detail for these below:

#### Underestimating the scope of the new Figma plugin

I knew from the outset that the path for starting Figmatic and developing plugins was going to lead to building solutions to more complex problems. This was pretty clear from building our Emailify plugin, which was re-built from scratch 3 different times before it finally shipped earlier this year. Like with that plugin and also our Convertify plugin, I underestimated the scope of the project before starting it. 

One would assume that I would have deeply interalised this lesson by now, but when you're building products, the endpoint usually isn't totally clear from the outset. You can see a general shape of what you think it's going to be, but it's only by showing up each day and doing the work that you actually figure out all of this along the way. The magic of discovering what a product is going to become is all in the process of creating it. However, this also leads to "unknown unknowns", where there are certain things you don't even know that you don't know until you discover them along the way.

Normally, I like to ship the first version of things as quickly as possible, then talk with real users and customers to continually iterate on it from there based on their own problems that need to be solved. This approach has worked well, but depending on the plugin, there's varying degrees of what can pass for an initial version. For example, shipping a Figma to Sketch plugin that converts 50% of the layers in your design is more useful that nothing, but not useful enough to really solve the problem.

This is also true for the Emailify plugin; the first version of the plugin was missing a bunch of things that it now has today: a live preview, dark mode styles, animated GIF support, Google font support, automatic platform integrations etc. These are fine to leave out, because the problem of exporting HTML emails can still be solved without them, but the first version also had to do what it said on the box: _export HTML emails from Figma_. Shipping an initial version that didn't support text, or didn't support images wouldn't have worked, because you can't solve the core problem without those.

I suppose this is what's truly meant when people talk about MVP (minimum viable product), the minimum that you can ship to your users and still offer value for solving their problem.

Similar to Convertify and Emailify, the "minimum" bar is much higher for it to be valuable. Even with removing a bunch of "wishlist" items that are on the future roadmap, solving the core problem is important to get right, and shipping a half-baked version (which is neither "minimum" or "viable") seems like it would just be more annoying than if it didn't exist at all.

#### Prioritizing improving our existing plugins

On top of underestimating the scope of the new plugin above, I also underestimated how passionate our customers are with helping us make our Figma plugins as good as they can be. Looking back, this ended up being the major theme of 2021; taking all of the work that was done to ship these 10 Figma plugins and work with our users and customers to _really_ refine and improve them this year. It feels like they're all in such a better spot than they were at the beginning of the year.

This is an incredible position to be in, where it truly feels like our customers are super invested in us and the success of our products; because they _actually are_, especially when they adopt them in their company as the way to solve a certain problem (like HTML banners or emails) across all of their teams. Having customers who want to use our products because they love what we're building is awesome, and it allows us to continue building them.

Whether they're super small quality of life improvements, or larger features and updates, this forces you on an almost daily basis to assess these requests against any previous or current priorities and weigh them up against each other to determine which is the most important for that day, week or month; and more crucially, which are compatible or incompatible with the overall vision for the product.

I think it's important to keep our Figma plugins super simple and easy to use, only shipping things that align with the clearly defined limits of what each plugin should be (and do) and what it should not. That means they're not going to be for everybody, and that's okay. I'd rather have a smaller number of customers who absolutely love one of our plugins and really resonate with our approach to solving these problems, than having a tonne of customers who "sort of like" the plugins if we tried to make them all things to all people.

#### Hitting breaking point during our sixth lockdown

It's probably no secret that we've had the [longest](https://lockdownstats.melbourne/) COVID-19 lockdown down here in Melbourne, clocking in at 263 days in total; and since our last mid-year update, we entered our sixth (78 day long) COVID-19 lockdown here in Melbourne at the start of August.

These lockdown measures here in the state of Victoria mean you can't leave your home or see friends, family, workmates. You're allowed to leave your home once per day a total of 1 hour within a 5 kilometer radius to either get essential groceries and/or go for a walk, but otherwise you're just isolating home alone, along with 6.5 million other people in our state. The kicker is that you have no idea when it's going to end, as they're always advertised as a "short sharp 2 week circuit breaker", but are then extended at random intervals for months at a time.

I very purposefully developed a set of daily routines and habits at the start of 2020, to essentially make each day seem as close to Groundhog Day as possible. This worked incredibly well to maintain a sense or normalcy and allow me to focus 100% on building Figmatic as a bootstrapped company, and served as a much needed distraction from the pandemic at large. This consistent routine and hyper-focus is what helped to ship 9 Figma plugins in 2020.

I think most people you'll talk to in Melbourne had their own personal breaking point in terms of lockdowns, and for me personally, that was about a month or so into our sixth lockdown. Along with my mental state, those routines and habits also began to fall apart. I started to feel anxious and depressed, I wasn't sleeping properly, I was waking up with recurring nightmares, I didn't feel like eating as much, and was generally just having a hard time dealing with things that were going on with all this stuff at the time.

Unsurprisingly, this did carry over to my work. Even though things were still getting done, I felt my own productivity really slow down and wasn't able to do things at the pace that I had become so accustom to, which also added to my own frustrations (as I am totally my own worst critic) and led to me beating myself up a bit. I was also knocked about for about 8-10 days after receiving each dose of the Pfizer vaccine; I felt super fatigued and was only doing a couple of hours per day of decent work during those blocks of time.

Since our lockdown restrictions were eased recently and don't appear to be returning again, I've been making an effort to return to the routine and habits that I started in 2020 and hopefully put this all behind me.

#### Working on developing a second new Figma plugin

In parallel to the development of the new plugin I wrote about above, I saw a bunch of people (including our own customers) facing a set of recurring problems that I had also experienced in my previous life working in digital agencies. This became more evident when I started talking to customers about it and they were following up with me to know when we might have a product published that could help with it.

It's always hard to know if you're making the right call on prioritizing these things, but I do think certain products are more time sensitive than others, so I was comfortable with starting to design and develop another new plugin with a much shorter time horizon that could be released sooner, and solve these problems for our customers before shipping our other new plugin, which was always going to have a longer time horizon, either way.

By choosing to spend more time on this new (new) plugin, it means spending less time on other things. So much of this is just trying to use your best judgement make sure you're working on the most important thing at the right time, with all of the trade-offs and opportunity costs of all the other things you're saying "no" to taken into account.

After releasing 10 Figma plugins so far with Figmatic, I've learned that it's difficult to know beforehand which products are going to be received well, relative to the others. I've been really surprised with a few, and less surprised with others. This will be another one of those bets, which will be released into the wild fairly soon, and (as always) iterated on with real users and customers until we have a product that solves these problems for them.

### 2022

>“Today’s "best practices" lead to dead ends; the best paths are new and untried.”

— Peter Thiel, Zero to One

As I wrote 2 years ago when we first started, I want Figmatic to be focused on building Figma plugins that solve important problems that very few other people seem to be interested in working on. I believe that we've made some great progress in doing this so far.

The feedback we receive on a daily basis from our users and customers makes this more concrete. Whenever I hear that a company is changing their design/development/copy/marketing process to be centered around our one or more of our Figma plugins because it allows them to 10x, 100x or 1000x their workflows, it lets me know that our mission of reducing the distance between design and production to zero is still on track.

It's obvious from the entire section above that there's still lots of work to be done, but Figmatic is in such a great place right now, and I couldn't be happier with how the company and our super cool users and customers have grown over the last 2 years.

As I mentioned above, the focus will be to double down on getting these 2 new Figma plugins that are currently in development out into the wild for everyone to try. I think there's so much potential for both of them to really help with automating and improving some of our existing workflows, and I'm really looking forward to finally sharing them with the Figma Community in 2022.

---

---
type: tutorial
title: How to export HTML emails from Figma to ActiveCampaign using Emailify
date: 2021-11-23T00:00:00.000Z
---

# How to export HTML emails from Figma to ActiveCampaign using Emailify



#### Video Transcript

Today I'm going to be showing you how to upload your HTML emails out of Figma into your ActiveCampaign account.

The first thing we need to do to get started is jump into Figma and go to the Figma Community, search for the word "Emailify", and under the "Plugins" tab you'll see "Emailify" pop-up. All you need to do is click on this "Install" button on the right-hand side, and you'll be ready to go. Now we can jump back into our Figma file, right click anywhere, go down to "Plugins" and then click on the Emailify Figma plugin, and that's just going to run the Figma plugin that we just installed in this tutorial. 

I've already created an email design using the Emailify Figma plugin; if you haven't already done that you might want to check out one of our other YouTube videos which goes through this in detail, but for today's Figma tutorial I'm just going to assume you've already got your email designed using the Emailify Figma plugin, and we're just going to be exporting that out into our ActiveCampaign account.

To get started doing that, we just click on the "Export" button in the Figma plugin header. and by default it's going to download a package of HTML files to your computer, but for today we want to upload this to ActiveCampaign, which is an email service provider. Instead of doing HTML, I'm going to click on the drop down, scroll down to the "Upload To Platform" group, and today I'm going to click on the "ActiveCampaign" option. I've just clicked on "ActiveCampaign" and you can see down here it's just changed to show these two input fields. There's a little link over here that takes you to the page on how to get your ActiveCampaign URL and API key, but I'll show you how to do that in this video now as well. 

All I've done is I've gone to my browser and logged into my ActiveCampaign account; you can log into your account and once you are logged in all you need to do is click on the "Settings" button down here, and then after you've clicked settings, you want to scroll down to this "Developer" menu item on the left hand side here and click on that. When that page loads you'll see this "Developer" page with a box called "API Access". These are the two fields that we need to copy; I'm going to grab my URL, so I'm going to highlight that ActiveCampaign URL which has my account name, and I'm copying that going back to my Figma plugin and pasting that on the left hand side here in the URL input. 

Jump back into ActiveCampaign, and I'm also going to grab my API key. I'm going to highlight that entire API key, copy that, jump back into Figma, and I'm going to paste that one into the right hand side, which is the API key input. I'm going to paste that, and now we're good to go. We've got our ActiveCampaign URL and we've got our ActiveCampaign API key, and these are going to be unique to your account, so just make sure you grab them from your "Developer" page under the "Settings" menu item.

Okay, we've got those two things in there now, and all we need to do is make sure we're happy with our email. I've just got the one email for today I'm happy with my subject line and the design, so I'm ready to go; all I need to do is click on this "Upload to ActiveCampaign" button. I'm going to click that now; this is now exporting the HTML, it's generating all the HTML automatically, it's exporting all of the images from the email, it's going to upload all of those, and then when it's done it's going to send that email up to our ActiveCampaign account.

It's done now, it's telling us that our ActiveCampaign templates have been uploaded and we can look at them by logging into our ActiveCampaign account, clicking on "Campaigns" and then clicking on "Manage Templates". Let's do that now; I'm just going to swap back into my ActiveCampaign account, on the left hand side here I'm going to go all the way down to "Campaigns", this little menu icon with the envelope on it. I've clicked on "Campaigns" and now I'm going to go to the left hand side and click on "Manage Templates", and I'm just waiting for the page to refresh again; there we go. 

I'm under "Campaigns" now; and now I just want to click on the "Manage Templates" menu item on the left hand side here. I'm going to click on that, and once that loads we should see our email. There we go, this is the email that we just uploaded a moment ago from Figma. I can actually go ahead and click on that, I just click on this little "Edit" button, and that should take me to my email that's just been uploaded. 

We should have a look at it in the preview; it's just loading up, and there we go, we can see on the left hand side, here is all of our HTML. This is what was generated and then uploaded via the Emailify Figma plugin; we sent it directly from Figma over to ActiveCampaign and this is all the code on the left here. Then on the right hand side, we've also got our preview; this is all the rendered HTML from the left hand side getting rendered. It's looking great, it's looking as we'd expect, and all of our images are there, all of our links, all of our rich text and everything's looking really good. You can make changes to that if you wanted to on the left hand side here, but for today I'm just going to leave it because it's looking exactly how I wanted it from my original Figma design over here.

That's basically it; you can you can either save that if you've made changes or just jump back to the the the "Campaign" panel. I'm just going to click on "Previous" there, and that's just one template; if you have more in your design or in your Figma file, you can select multiple designs and upload them, and that will actually upload multiple custom templates as well. It gives them a little time stamp, just so you can see which which email template was uploaded when. If you want to create multiple versions, or if you want to update them, this will just let you know which one was uploaded at what time and what date. 

You can get rid of those by clicking on the little "Settings" icon here and clicking on the "Delete" button if you want to remove one. You can just delete that template if you want to, and there we go; but as I said, you can basically keep exporting these emails as many times as you want with the Figma plugin, and it'll just upload them one after the other, as you'd expect.

That's it for today; that's the entire Figma tutorial of how to get your HTML emails out of Figma to ActiveCampaign directly, if you're using ActiveCampaign as your email service provider. This should just make it a lot easier to streamline  that template creation process rather than having to manually copy and paste things, upload images, swap out image URLs, and import the template manually; you can do it all with one click directly from Figma to ActiveCampaign. Thank you as always for watching. and we'll be back very soon with more Figma tutorials just like this one.

---

---
type: tutorial
title: How to export HTML emails from Figma to HubSpot using Emailify
date: 2021-11-16T00:00:00.000Z
---

# How to export HTML emails from Figma to HubSpot using Emailify



#### Video Transcript

Today I'm going to be showing you how to export your HTML emails directly from Figma into your HubSpot account and we're going to be doing this by installing a Figma plugin called Emailify.

If you haven't already done so, you can go to the Figma Community, search for the word "Emailify"; and under the "Plugins" tab you'll see "Emailify" pop-up. You just need to click on the "Install" button on the right-hand side, and then we can jump back into our Figma file. 

To run the Figma plugin you just right-click anywhere, go down to "Plugins" and then click on "Emailify", and that'll run the Figma plugin that we just installed. I've already got a design that I came up with using the Emailify Figma plugin, so if you haven't already done that we have another Figma tutorial on our YouTube channel that will show you how to design the email using the Emailify Figma plugin, but for this Figma tutorial I'm just going to assume that you've already designed your email and just want to go ahead and export it from Figma to HubSpot.

I'm going to do that now by starting to click on the "Export" button; I'm just going to click on the "Export" button in the Figma plugin header, and by default it's going to try to export the emails as an HTML package that are going to get downloaded to your computer; that's normally fine, but today we want to get them into HubSpot automatically. What we have to do is click on this select box, and instead of downloading to our computer, we want to upload it to a platform; and for today's Figma tutorial we're going to use HubSpot. I'm just going to click on the "HubSpot Marketing Hub" option, and you can see here it's just changed this little drop down here to say that it needs the HubSpot API key. 

If you click on that link it'll show you how to get that key, but I'm already logged into HubSpot, so I'll show you how to get to it from HubSpot in the browser. If you login to HubSpot and go to your settings page just by clicking the little "Settings" icon up here, and you want to go down to "Integrations"; this little drop down you want to expand "Integrations", and click on "API Key" and that will load up the HubSpot API key page. I've already got a API key active, so if you can see that in yours you just want to click on the "Show" link here, and then prove that you're not a robot, which I'm not, not as far as I know. 

That will show the API key for HubSpot, and now that that's revealed, you just want to go ahead and click on the "Copy" link which will copy it to our clipboard. Okay, that's just copied our HubSpot API key to the clipboard; now we can jump back into Figma and in the API key input we're just going to paste that by pushing Command + V on the keyboard (or Control + V if you're using windows). I've just pasted in my HubSpot API key down there.

The other important thing to know is that for the footer we basically need to include a HubSpot footer for this to be considered a valid email. If you haven't already done so, I'll just close this off for one second, and under the "Footer" category for the components, you'll see that we've got a HubSpot specific footer template. If you don't already have one of those, and you want to make sure that you've got all the right links and all the right tags in there that HubSpot wants, just go ahead and select your email, go to the "Footer" tab and then click on the HubSpot platform specific footer. That's just going to add that in there; if we just really quickly open that up we can see here if we open up the Figma plugin settings, it's automatically added the HubSpot unsubscribe and web links, and it's got our company tags which HubSpot also wants when you create emails in HubSpot.  That's just a really quick but important note just to make sure you do have those tags in there, otherwise HubSpot may not show your template when you go to upload it.
 
Okay, now that we've got our HubSpot footer in there we just want to go back to the export panel by clicking on export again and it's kept my API key in there that we just pasted in we've got HubSpot marketing hub selected; everything's perfect ready to go, so all we need to do now is click on the "Upload to HubSpot" button. I'm going to click that now, this is going to generate all of the HTML for my email automatically, it's going to export all of the image content, it's going to upload those, and then once that's done it's going to send that template automatically into HubSpot. 

It's confirming that our HubSpot template's been uploaded and to view it we just need to log into our HubSpot account and then it's telling us to click on the "Marketing" menu item and we'll do that now; we'll click on "Marketing", go down to "Email", and then it's saying to go to the "Create email" button and then click on the "Regular" email type; I'm just going to do that now, and then if we click on the "Custom" tab up here you'll see that our email that we just uploaded is now in HubSpot. We can preview that by clicking on the "Preview" button, and this is just loading up a HTML preview of the email that we just uploaded; all the image contents in there, all of the images that we added and that's looking good, we can see our view view in the browser links in there, we've got everything that we wanted set up. 

That's in there now, and that's pretty much good to go. You can now use that as a email, so if I want to call this "Sushi Email" for the "Jiro Sushi Restaurant" that we've made up, and now there we go, you can see that we've got our brand new email campaign with the custom template that we just uploaded from Figma into HubSpot, and that's looking really good. You can send yourself a test email, you can schedule that send, assign it to a list, and things like that, but basically that's gonna take the template that we just uploaded from Figma and send that out when you're ready to save it. I'm just going to save that; I'm not going to send it out for now, I just wanted to show you how to upload it.

Just as a further step to see where that's actually coming from, what you can do is go down to the "Marketing" menu again, go down to "Files and templates", and then click on the "Design Tools" link; I'm going to do that now, and you can see here on the left hand side, this is our files and folders for the design tools files and folders. You can see that there's a new folder in here called "emailify", that automatically gets created when you upload the template from Figma into HubSpot, and we can see here that there's an HTML file in there; that's actually the HTML file that was just uploaded from Figma into HubSpot just a few moments ago; that's actually where the file's coming from. 

You can see in here it's got a template type of "email"; because it's got that tag in the HTML, which the Emailify Figma plugin automatically adds in, that's why it's showing up in your email templates; because it's got that little tag in there and it's sitting in this files panel, the emails page basically just automatically picks that up as a custom template and that's how it's getting added. 

You can actually go ahead and make changes to this file if you wanted to if you really wanted to do it in HubSpot, you can edit the HTML in here after it's been uploaded, and that's totally fine if you want to do that. I just thought I'd mention where those files are actually getting sent to in case you wanted to either remove them, or clone them, or rename them, or do anything; create a new email from them, all that sort of good stuff. 

That's that's really it; that's the whole process of exporting the email templates from your Figma designs into HubSpot. It's much quicker than manually uploading all the images, manually modifying all the HTML to make sure it's compliant with HubSpot's templating language; they have some strict requirements with the way the template needs to be structured and all that sort of stuff, so the Figma plugin the Emailify Figma plugin basically injects a bunch of those required tags in automatically. 

Then as I said, you basically want to go ahead and add the HubSpot template, the HubSpot footer template that's underneath the "Footer" category in the email components, and that's going to automatically inject those links that we really want. If those aren't in there, HubSpot will get a bit angry, and it won't actually let you view or send the template; it definitely needs the "unsubscribe" link and it needs these "company" details as well; like your company address and all that sort of stuff. These will actually get dynamically swapped out in HubSpot based on the information that you've got in your HubSpot accounts profile, so that's just something to be mindful of. 

If you are seeing a blank template page, where there's nothing on the template, it's possible that you haven't included the HubSpot footer. Just go ahead and click on that and that will just add that in there; but other than that, that's pretty much all you need to know. You've got that integration built in now, so as long as you've got your HubSpot API key, that's all you need; you just paste the API key in, select the "HubSpot" item and then click "Upload To HubSpot", and you can upload as many templates as you need to. If you have multiple frames, this will automatically upload multiple frames as well, so it just speeds up the whole workflow if you are a HubSpot user and want to be integrating this with Figma.

We'll leave it there for today, it's a fairly brief Figma tutorial just so you can go through those steps visually, as I know it's a bit tricky to figure out where the API keys are and where the files are getting sent to. I just wanted to cover that in detail, and that's all there is to know. Thank you as always for watching, and we'll be back soon with more Figma tutorials just like this one very soon.

---

---
type: tutorial
title: How to export HTML email tests from Figma to Email on Acid using Emailify
date: 2021-11-15T00:00:00.000Z
---

# How to export HTML email tests from Figma to Email on Acid using Emailify



#### Video Transcript

Today I'm going to be showing you how to upload your HTML emails from Figma into the Email on Acid platform, and this is going to allow you to test out your HTML emails on a bunch of different devices and email clients to see how they look across all those mobile and desktop clients.

The first thing we need to do is just install the Emailify Figma plugin by going to the Figma Community, searching for the word "Emailify", and under the "Plugins" tab you'll see "Emailify" pop-up, and all you need to do is click on the "Install" button and you'll be ready to go.

If you jump back into your Figma canvas and just right-click anywhere, go down to "Plugins" and then go to Emailify that's just going to open up the Figma plugin that we just installed a moment ago. You'll notice that I've already got an email that I've designed using the Emailify Figma plugin, so if you haven't already done that, we have another Figma tutorial on our YouTube channel that goes through that in detail; it might be worth checking that out first. For this Figma tutorial I'm going to assume that you've already designed an email using the Figma plugin and we just want to export it into our Email on Acid account to do some testing.

To do that, we just click on the "Export" button in the Figma plugin, and by default it's going to come up with the "HTML" option, which is going to download the HTML to our computer, but for today we want to actually change that. I'm going to click on that select box, scroll down to the bottom where it says 
"Upload For Testing", and just click on the "Email on Acid" option, and you can see here that it's just changed so these two input boxes to come up. 

That's asking for our API key and our password. The "password" is actually the password that you use to log in to your Email on Acid account, and I've already got that copied, so I'm gonna paste that in there, but that's the password you basically log into your Email on Acid account in the browser with. Then for the API key, if you click on this link here it will take you to your account page, which is this one, as long as you're logged in and if you're logged in and you click on that link you'll see a label called API key; next to that label we've got our API key. I'm going to highlight that, I'm going to copy it to my clipboard by doing Command + C (or that's Control + C if you're on windows).

Once you've copied that API key from Email on Acid, just jump back into the Figma plugin and paste that key into the API key field. I've just pasted that in there and I've done that using Command + V (or you can use Control + V if you're on windows), but that's all good to go now. I've got my Email on Acid API key and my Email on Acid password; that's all set up. I've got one email that I'm going to send, I'm happy with it, so all I need to do now is just click on the "Send To Email on Acid" button; I've clicked that, now it's exporting and generating all the HTML for my email, it's exporting all the images, and it's going to upload them; then once that's all done, it's going to send it into our Email on Acid account. 

It's just finished, it's telling us that our Email on Acid tests have been uploaded and we can view the tests by clicking on this link, as long as we're logged into our account. If we jump back to that link, that's going to take us to our "Projects" page. I'm just going to refresh that, and we can see now that it's just popped up with our test. We can see that we've got our "Welcome to Jiro Sushi" email which we just sent from our Figma design, and I can click on that and get a bit of a sense of what it looks like in all different devices and email clients. 

We've got our mobile devices here; we've got iPad Pro, iPhone, iPhone SE, iPhone 11; all these different devices, we've got our Gmail on mobile, and then we've got a whole bunch of desktop clients as well. We can just see a bunch of different Outlook clients which are usually notoriously strange, you can see there's the the border radius doesn't show up on Outlook; that's one little thing we've seen, unfortunately that's just the way it is; that's fine. Then a bunch of web clients as well; we've got a bunch of web clients like Gmail, and you can see that on Chrome, on Edge, on Firefox etc. If you're already using Email on Acid you probably already know all this, but for anyone who's new to testing emails, this is what it looks like. 

The cool part is we didn't have to go through any extra steps in the web interface to get this test in there, this was sent directly from our Figma designs with one click straight into our Email on Acid account. As long as you've got your API key in there and as long as you've got your password in there, you can just keep sending tests over and over into Email on Acid from Figma; that's just going to cut down the time to get your tests into Email on Acid rather than having to do it manually each time. It should be a fairly big boost to your workflow, it should help speed that up a little bit more and take a lot of that manual work out each time. 

Then the neat thing is you can then re-export the email if you're happy with your tests; it's just as easy as changing the export platform from Email on Acid to your ideal email platform; if you're uploading it to Klaviyo or MailChimp Postmark or HubSpot etc, you can just instantly change that, and then just straightaway upload it into MailChimp, or download it to your computer, or do whatever you want with it. It's super easy just to switch between testing and rendering out the the version that you actually want to send.That should be that should be much easier, and take a lot of the manual effort out. 

Okay, that's the whole Figma tutorial; it's not too complicated once you've got your keys sorted out. That's that's pretty much it, so thank you as always for watching, and I hope it's helpful if you're an Email on Acid user and you've been wanting to have an integration with Figma set up through the Emailify plugin. I'm been happy to let you know that that's all shipped and available today, so I hope you enjoy using it, and as always, we'll be back soon with more Figma tutorials just like this one very soon.

---

---
type: tutorial
title: How to export HTML emails from Figma to Postmark using Emailify
date: 2021-11-15T00:00:00.000Z
---

# How to export HTML emails from Figma to Postmark using Emailify



#### Video Transcript

Today I'm going to be showing you how to upload your HTML emails out of Figma into Postmark automatically using the Emailify Figma plugin.

To get started, we can just jump into Figma, and we'll just need to install the Emailify Figma plugin by going to the Figma Community, searching for the word "Emailify", and if you click on the "Plugins" tab you'll see Emailify pop up; and all you need to do is click on the "Install" button on the right hand side here and then you'll be ready to go. 

To run the Figma plugin we just right-click anywhere on our Figma file, go down to "Plugins", click on "Emailify", and that will run the Figma plugin we just installed. I've already designed an email using the Emailify Figma plugin; if you haven't already done that you might want to check out one of our other YouTube videos which covers this in detail, and it'll show you how to design your own emails using the Emailify Figma plugin. For today, I'm just going to be assuming that you've already designed your email and you just want to get it out of Figma and into Postmark. 

To do that we just go ahead and click on the "Export" button in the header of the Figma plugin, and by default you'll notice that it's set to "HTML" as an export option. We basically want to change that option by clicking on the drop down and instead of downloading it to our computer as an HTML package, we actually want to click on one of these "Upload to platform" options, and for today's Figma tutorial we're just going to be uploading into Postmark. If you go ahead and click on the "Postmark" option and you'll notice that reveals a new input field down here, and that's basically asking for your Postmark API key. 

If you click on that link, that will show you how to get to that page, but I've already logged in to Postmark. In the browser, after you log into Postmark and just click on your "Servers" tab, and you've probably got a few servers or maybe just one; I'll just click on mine which is just one. I'll click on my server and then that's going to bring me to my Postmark server page, the individual server, and all you need to do is click on the "API Tokens" tab up here; click on that, and you should already have an API token in there. You can just click on that token and that will copy it to your clipboard. You can also generate a new one if you need to, but today I'm just going to be using the one that's already there and copying that. 

I've definitely copied that, and now I'm jumping back into my Figma file, going back to the Emailify Figma plugin clicking on this input field, and just pasting that in there using Command + V (but you can use Control + V if you're on windows). I've just pasted in my Postmark API key into the API key field in the Figma plugin and that's ready to go now. That's all you need to do to authenticate it. 

Now I've got my emails ready to go, I'm happy with my subject line and all that sort of stuff, so I'm just going to be uploading one and now that I've got my API key in there, all I need to do is click on this "Upload to Postmark" button. I'll go ahead and click on that now, and this is going to generate all of the HTML for me automatically, it's going to export the image assets and upload them, and then it's going to automatically send that HTML directly to my Postmark account. 

It's just finished, it's telling us that our Postmark template has been uploaded and we can view that by logging into our Postmark account, clicking on "Server" then clicking on the "Templates" tab. I'm already logged in, soI'm just going to jump back into my browser, go back to my Postmark account, it told us we have to click on our "Server" tab, click on the server that we got the API key from, and then it said to click on the "Templates" tab; I'm going to go ahead and do that, and there we go. You can see that's our template; that's just been uploaded from the Figma plugin, it's just been uploaded into our Postmark templates list. 

If I go ahead and click on that template, you can see here that it's got our subject line that we included, it's got all of our HTML; this is all been inlined you don't need to worry about running it through any extra CSS processor or inliner or anything like that, all the code is there, ready to go. Then we can click on the "Preview" tab to get an actual HTML preview up, and we can see here it's exported everything the way that we designed it in Figma; this is all real HTML text and the images which have been uploaded and all of that sort of stuff.

That's basically it; that's how you can really easily upload your HTML email templates from Figma into Postmark using the Emailify plugin, and if you have multiple emails in your design, it'll upload any of the emails that you check; you can you can upload a few at a time if you've got some different email designs that you want to get into Postmark, they'll just show up in your templates list.

The other thing worth noting is that if I do upload the email again, it's just going to create a new version of it. You'll see a new version pop-up and it'll probably have a "dash 1" at the end of this little url name down here; and the reason for that is it doesn't actually override the template each time because you can actually make changes if you wanted to make some manual edits in the HTML here and save that. We don't want to override that by accident by re-uploading the the template, so basically it will create a new version. If you've got multiple versions in there, you can remove them just by clicking on the "Delete" button if you don't want to keep them all in there, or you can just leave them, but you can go ahead and delete those as well if you just want to tidy it up.

That's basically it; it's very simple, much easier than manually going through that process of uploading your HTML emails from Figma to Postmark after they've been exported. If you're a Postmark user, definitely check out this Figma integration, it should hopefully save you a bunch of time if you're in the habit of uploading emails regularly; I hope you get some benefit from it with you or your team using Figma and Postmark. Thank you as always for watching, and we'll be back soon with more Figma tutorials just like this one very soon.

---

---
type: tutorial
title: How to export HTML emails from Figma to Klaviyo using Emailify
date: 2021-11-14T00:00:00.000Z
---

# How to export HTML emails from Figma to Klaviyo using Emailify



#### Video Transcript

Today I'm going to be showing you how to export your HTML emails directly from Figma into your Klaviyo email templates directory.

We're going to be doing this by using a Figma plugin called Emailify. You can install that by just going to the Figma Community, searching for the word "Emailify" and under the "Plugins" tab you'll see "Emailify" pop-up; all you need to do is click on the "Install" button on the right-hand side, and then you can jump back into your Figma file.

To run the Figma plugin, you can just right-click anywhere, go down to "Plugins", then click on "Emailify", and that will run the Figma plugin that we just installed. This Figma tutorial assumes that you've already designed an email using the Emailify Figma plugin; if you haven't done that before, we have another tutorial on that on our YouTube channel that's worth checking out, so if you want to do that first and then come back, that's one option, but this video just assumes you've already got one ready to go that we can export.

To export this email we're just going to go ahead and click on the "Export" button in the Figma plugin's header, so go ahead and click on "Export" and that's just going to bring up the list of our emails and the Figma plugin's export options. By default, it'll set it to HTML; this will basically download a package of HTML files and assets directly to your computer, but for today we want to actually export it out to Klaviyo automatically.

To do that, we just click on this little drop down, and instead of downloading to our computer, we want to actually go to the upload to a platform grouping down here. Today we're going to be using Klaviyo, so I'm just going to click on the "Klaviyo" option, and you'll notice that's just changed the options down here; it's giving us a little link to get our Klaviyo private API key. If we go ahead and click on that link it'll open up our API key page in the browser. If you're not already logged into your Klaviyo account you'll have to do that, but once you're logged in and you go to this page you'll be able to generate your API key that we're going to be using. 

Once you're on this page, on your Klaviyo API key page, all you need to do is go ahead and click on the "Create private API key" button down here in the bottom right, so I'm going to click on that, and that's just created a brand new private key for me. I can label that, so I'm just going to say "Emailify Figma Plugin" just so we can reference what it is at a later date. Save that label, and then the private API key is just sitting behind this little icon here; if you click on that icon it'll reveal your private key. All you need to do go is go ahead and copy that, so just highlight the private key and copy it with Command + C (or Control + C if you're on windows) and then now that you've got the key copied, you can jump back into Figma, and click on this private key API input box here in the Figma plugin. I've clicked on that, and now I'm just going to paste it with Command + V (or Control + V if you're on windows), and you can see here it's just pasted in our brand new Klaviyo API key. 

That's perfect, that's exactly what we we need to authenticate the the upload, and then you just want to make sure you've got your subject line filled out and your pre-header text if you want to include that as well. In my case, I'm happy with all this, my email is ready to go; now all we need to do is click on the "Upload to Klaviyo" button; I'm going to go ahead and do that now, and this is just going to generate all the HTML automatically for us, it's going to export all of our image assets, upload them online so they're all hosted, and then it's going to send that template directly into Klaviyo.

It's just told us that our Klaviyo template has been uploaded, so we can jump into this Klaviyo templates page. If we click on that and open up another browser window that's going to link us to this page here which is the Klaviyo email templates list. I'm just going to refresh that page, and you can see here it's just now created a brand new template with the email that we just uploaded. You can see here we've got our preview, I can jump into that by clicking on the title and that's going to load up our template. You can see here it's automatically uploaded all of the HTML, this is production ready HTML that's been uploaded and generated from the Emailify Figma plugin that we just uploaded a moment ago. That's all in there, it's all been inlined so you don't have to worry about running it through any CSS pre-processors or anything like that to get your CSS in there, it takes care of all of that for you. 

You can preview it visually just by clicking on the "Preview" tab up here and that's going to let you actually scroll through the email visually and see what it looks like when it when it's rendered. You can see here this is all HTML, this is all of our content as we'd expect, and that's everything we we designed and uploaded in Figma all looking really nice. You can go ahead and preview that email, so if you wanted to send a test email to yourself you can go ahead and do that, and that'll work just fine. If you've already used Klaviyo before you're probably aware of all the other things you can do now that you do have the email template set up.

This this is really taking care of that extra step that you normally have to go through, which is manually creating templates, which can be a little bit annoying. For example, you'd normally click on the "Create Template" button here, go through this kind of process and then you have to manually zip up your images, and make sure they're all zipped up, then you have to manually upload your HTML file and make sure that's kind of pointing to all the right places, and it's just a bit of a headache. This Figma plugin integration will make it much easier if you're a regular Klaviyo user and you want to get those emails out of Figma out of the Emailify plugin as quickly as possible directly into your Klaviyo templates list. This integration lets you do that really easily, and I know we only did one email in this case, but if you have multiple emails you can use the same feature and it will loop through those and upload them one by one and you can you can upload a bunch of them at the same time if you need to do that as well. That should save even more time if you've got a bunch more HTML emails that you need to upload from Figma to Klaviyo. 

The other thing worth being mindful of is each time you do this, it will create a new email template; it won't override the existing templates in your Klaviyo templates page, and that's just because you can actually edit the templates inside of Klaviyo. If someone has gone ahead and edited that template and then you've re-exported it or re-uploaded it from the Figma plugin, that's going to wipe out all of your edits and override it. By default, the Figma plugin just creates a new version in your email templates each time, so you can kind of keep track of those versions and delete these ones if you don't need them anymore or whatever. 

That's just something to be mindful of, but hopefully if you're a Klaviyo user and you've been wanting to make this process uploading your HTML emails from Figma into Klaviyo email templates a bit more seamless, as I know a lot of you have been requesting and asking for in the comments on the previous video, then this is probably the easiest way to do it. This is pretty much as direct as you can get directly from the plugin Figma plugin straight into Klaviyo, so that should help speed up your workflow a little bit.

That's the whole Figma tutorial; it's fairly straightforward, all you really need is your private key from your Klaviyo account and you're ready to go. Just make sure you've got that Klaviyo option selected, and you can just upload as many emails as you want. That's pretty much it, that's the whole Figma tutorial; and thank you as always for watching. We'll be back soon with some more Figma tutorials just like this one, and we'll catch you then; stay tuned.

---

---
type: tutorial
title: How to export HTML emails from Figma to MailChimp using Emailify
date: 2021-11-13T00:00:00.000Z
---

# How to export HTML emails from Figma to MailChimp using Emailify



#### Video Transcript

Today I'm going to be showing you how to export your HTML emails directly from Figma into your MailChimp email templates page under your MailChimp account.

The way we're going to be doing this is using the Emailify Figma plugin, and to install that you can just go to the Figma Community, search for the word "Emailify" and under the "Plugins" tab you'll see Emailify pop-up. If you just click on the "Install" button then you'll be ready to go.

I'm just going to jump into my Figma file and run the Figma plugin by right-clicking anywhere, going down to "Plugins", clicking on "Emailify" and that's just going to open the Figma plugin we just installed.

It's worth noting that I've already designed my email using the Emailify Figma plugin, so if you haven't done this before and you're interested to know how to do that, there's another video on our YouTube channel that will help you do that; it's a really in-depth tutorial, so check that one out first if you haven't. If you've already got a design and you just want to export it, that's what this tutorial is going to be going through today. 

To export our email from Figma into MailChimp, we just get started by clicking on the "Export" button in the Figma plugin, and that's just going to bring up the export options. By default, it will export an HTML package, or HTML packages to your desktop or your download folder, and instead of downloading it to our computer today, we actually want to be uploading it to a platform; and in this case we want to be doing it to MailChimp. We just click on the export options drop down, go down to "MailChimp" and select that, and that's just going to change the options down here to ask for your MailChimp API key. You can get the API key by clicking on the "MailChimp API Key" link, and then going into your browser which will open up. 

As long as you're already logged in you'll see your API keys page load up; once the page loads up you just have to go down to the bottom and click on the "Create a key" button. I'm going to click on that now, that's just going to refresh the page and tell me that I've got a new API key that I can use. If I scroll down you can see down here that it's just created a brand new one; I'm just going to label that "Emailify" just so I know what it is in the future. Over in the "API key" column you're just going to click on that input box which will select the text from the API key that it's just generated, and you just want to copy that; either Command + C (or Control + C if you're on a Windows machine). 

Once you've copied the MailChimp API key, jump back into Figma, jump back into the Figma plugin, and in the input field next to the "MailChimp API key" label you just want to go ahead and paste that key in, and that's just going to paste that straight into there. You can see that's that's worked really well, and once that's done just make sure that you've selected the emails you want to upload and make sure they've got a subject line and pre-header, because that will also get included. You can change that, so I can just remove that and just change that subject line and then once that's ready to go all you need to do now is click on the "Upload to MailChimp" button, click on that now, and now that's going to actually generate our HTML automatically, it's going to export all the images, upload all of those images, and then upload the template itself into MailChimp.

That's all done now; you can see we've got a confirmation saying that our MailChimp template has been uploaded, and if we go ahead and click on the "MailChimp templates" link, so I'm going to do that now which is going to open up that page again, you can see here it's changed from being a blank screen with no templates to this template that's just been uploaded directly from the Figma plugin. We can open that up just by clicking on the title, and I'll just move this over so we can see what's going on here, and there's our email. That's all HTML you can see, the actual code has been uploaded directly into MailChimp here, so that's all of the HTML and CSS, and it's all inlined; you don't have to do any crazy inlining with the CSS or anything like that, it's automatically taken care of. 

This is our preview over here, and you can see it's looking really nice; the images are all loaded, all the contents are loaded, and we can actually preview that in different devices. We can change it from desktop to mobile and see what it looks like, it's looking pretty good on there as well. That's our email, all uploaded into MailChimp, we didn't have to go through the somewhat painful process of uploading the template manually by zipping up the images folder, zipping up the HTML, dragging that in, creating the new template; especially if you've got multiple ones, that can take a little while. The good thing about this is if you have multiple emails, it'll also export those multiple emails all at the same time as new templates in your MailChimp templates from the Figma plugin.

One thing to be mindful of is if you're re-uploading this template and you've made some changes and you want to re-upload it; by default, it will just create a new template in your MailChimp templates page, so it's not going to override the template that's already been uploaded. The reason for that is because you can actually go ahead and make manual changes in MailChimp; you can actually edit the HTML in MailChimp, so if you've made a bunch of changes manually and we're happy with those in MailChimp, we don't want to go ahead and override those automatically and assume that we want to override that. It'll just create a brand new version and that way you can get rid of any other versions or go back to other versions in your templates list if you want to do that. Otherwise you can just manually update it and don't worry about re-uploading from Figma if that's the last version you're going to use. That's what that looks like there.

That's basically it; this is just a much more streamlined way of getting your HTML out of Figma into MailChimp automatically without having to manually copy and paste that HTML and zip up images and things like that. Hopefully that's helpful if you're a MailChimp user and you're an Emailify user; I know a lot of you have been wondering when these integrations might be shipping, so we're just starting to ship them out now and there will be some more platforms coming soon. Thank you as always for watching, and as I said, we'll be back very soon with some more Figma tutorials just like this one in the near future, so stay tuned.

---

---
type: tutorial
title: How to count words and characters in Figma text layers using CopyDoc
date: 2021-11-10T00:00:00.000Z
---

# How to count words and characters in Figma text layers using CopyDoc



#### Video Transcript

Today I'm going to be doing a really quick Figma tutorial to show you how to count the number of words, characters, sentences and paragraphs in any of your Figma text layers inside of your designs.

The first thing we need to do is just jump into the Figma Community search for the word "CopyDoc", and under the "Plugins" tab you'll see a result called CopyDoc pop up; all you need to do is click on the "Install" button on the right hand side and you'll be good to go.

Now we've done that, we can jump back into our designs and just run the Figma plugin by right clicking anywhere, going down to "Plugins" and clicking on the "CopyDoc" Figma plugin, and that's just going to open up the Figma plugin we just installed a minute ago. 

So, this is really simple, I'm not going to be covering any of the other features of the Figma plugin today, I'm just going to be showing you how to count your Figma text layers. It's really simple, all you have to do is while the Figma plugin is open, just go ahead and click on any of your Figma text layers; for example, I've clicked on this one, and you can see down here at the bottom of the Figma plugin, it's automatically giving us a count of that Figma layer. We can see this layer that we selected, the "Avengers: Endgame" layer has 19 characters, three words, 1 sentence and 1 paragraph. 

We can choose a different one, so if we go to a bigger paragraph or a bigger set of text, we can see this one's a little bit longer; it's telling us we've got the 2 paragraphs, there's 10 different sentences in that block of text, 125 words and 741. 

We can also do multiple layers; if you wanted to check it out with the title or the subtitle here, you can select both layers and you can see here the count automatically updates. 

We could add this other layer as well; I've got the 3 layers as you can see here in the brackets, so that's just a really simple way of counting up all those bits of text by selecting multiple layers, and you can select as many Figma text layers as you want. If you want to do it in the Figma layers panel on the left hand side here, that's another way you can go about it, if you want to select those different layers, otherwise feel free to just double click on your layers in your design, and that's just going to swap that out there.

As I said, this is a really, really quick Figma tutorial; I just wanted to show you this new feature of the CopyDoc Figma plugin, and if you've been wanting to count the number of words, characters, sentences or paragraphs in your Figma text layers, single Figma text layers or multiple Figma text layers, this is a really, really quick way of doing it. You don't have to go into any of these features, you can just immediately see it here anytime that you've got the Figma plugin open, and just click on those FIgma text layers to get that information out really quickly.

I hope that helps you if you've been wanting to do this, and as always, thank you for watching. We'll be back soon with more Figma tutorials just like this one very soon.

---

---
type: tutorial
title: Sync Google Sheets spreadsheet content to Figma using CopyDoc
date: 2021-10-08T00:00:00.000Z
---

# Sync Google Sheets spreadsheet content to Figma using CopyDoc



#### Video Transcript

Today I'm going to be showing you how to sync content from a Google Sheet directly into your Figma designs using the CopyDoc Figma plugin.

The first thing we need to do just to get started is jump into the Figma Community and search for the term "CopyDoc" and under the "Plugins" tab you'll see the result "CopyDoc" pop up; all you need to do is click on the "Install" button on the right hand side and then you'll be ready to go.

I'm just going to be using a really simple example of a movie app, and I'm going to be syncing up some content from a Google Sheet that I've prepared, so I'm going to show you how this works and how to structure the file for your own content. The first thing to note is that in your Google Sheets, if you've got a new Google Sheet set up, a new spreadsheet, the first row of that spreadsheet is basically your header row. The header row contains all of the labels for each of your columns, and each of the rows and the columns are going to be used to populate our Figma layers in just a minute. 

The reason these are important because they basically link up the content of your spreadsheet with the content of your Figma file; what I mean by that is you can see here we've got one column called "#Title", we've got "#Title" and if we look in our Figma file and look at our little movie poster here you can see that this layer name is also named "#Title". Same thing here, we've got "#Min" for the minutes, and we've also got an image layer of a poster and that's been named "#Poster". If we jump back into our spreadsheet in Google Sheets you can see here we've got a poster column, and each of those rows in the poster column are linking to an image online; what this means is it's going to basically map those layers together once we sync up the content in just a minute. 

If you do want to know how I got those images in there as well, you'll basically need to get your own images online or you can do something like a simple Google search; for example, if I wanted to add a new record or new row for the "Suicide Squad" movie, I would just Google that poster, right click on the image, go down to "Copy image address" in my right click menu, click on that, and back in your spreadsheet you basically want to paste that in there, and that's going to paste the image URL. As long as it's a image URL, and as long as the layer in Figma is also an image layer, or a frame layer, or anything that can have an image fill, the Figma plugin in a minute will automatically sync that together, which we'll go through shortly. 

Then you can just fill out the rest of your row as you as you normally would. We can just populate these other ones really quickly as well; we can do a review layer, just put the genre in there, and then we'll do a rating as well, okay; this spreadsheet is perfect now, it's ready to go. This is the exact same structure you'll need to use for yours. 

Now what we need to do is basically get this data into Figma, and the way we do that is just by clicking on the "Share" button in Google Sheets, and at the moment it's set to "Restricted", but for this to work we basically need to change this permission under the "Get link" heading; just click on that, and that's going to bring up this little drop down here. You want to change the "Restricted" option to "Anyone with the link", so click on "Anyone with the link"; that's just going to update the permissions, and now you can go ahead and click on the "Copy link" button. I'm going to click on that now, it's copied this share link for me, so I can close that off, and now we can go back into Figma plugin and finally run the Figma plugin.

If we just right click anywhere on the Figma canvas, go down to "Plugins", click on "CopyDoc", that's going to run the Figma plugin that we just installed a minute ago. In this tutorial I'm not going to be covering any of the other features of the Figma plugin, I'm just going to be looking at this new "Sync Spreadsheet Content" feature; we can open that up by clicking on the "Sync Content" button here. I'm going to do that now, and we're not going to be looking at the CSV or XLSX file upload today, we're just going to be looking at the "Sync Public Google Sheet" feature. Down here we've just copied our Google Sheets link; in our Figma plugin I'm just going to click on this input, paste the Google Sheet URL that I just shared or copied, and you can see here it's loaded in our spreadsheet columns from the Google Sheet. That's pasted it in, it's saying that it's a valid Google Sheet URL; that's all good to go, and we can see a preview right here. 

The next thing we need to do is just make sure that we've created enough of these posters that we want to actually populate. I've got my component here, again, you don't have to use a component, you can use a Figma frame or a Figma group or any any kind of layer like that; in my case, I'm just going to create three instances of the component, and I'm going to copy and paste those on my canvas and just move them around. Because they're instances, the layer names in those instances are also matching the headers from the Google Sheet as well. That's perfect, that's exactly what we want it to do. Now all we need to do is click on those four layers; I've got the component selected, and the three instances, and now that I've got those selected I can go back to my Figma plugin and I can click on this button called "Sync Spreadsheet Rows with Figma Layers", and it's telling me I've got four layers selected, so I'm going to click on that now. 

This is basically going to start mapping our content together; it's downloading the images that we specified in our Google Sheet, it's going through and downloading each of those in high resolution, and now it's going to sync up the content text-wise and image-wise with those Figma layers. You can see it's finished, it's updated 24 layers automatically, and that's pulled in all of the content from our Google Sheet directly into our Figma layers. We didn't have to do any manual copy pasting, we didn't have to do any manual dragging and dropping of images, it automatically populated that for us based on whatever we had put in our Google Sheet. 

Just to double check that, we can go back into our Google Sheet and you can see here it's gone row by row; we've got two, three, four, five and basically for each of the layers that we had selected, it'll loop through those selected layers and and just swap out any layers that it finds with those matching Figma layer names. That's exactly what it's done, you can see it swapped out the tags, it swapped out the titles, it swapped out the reviews and we've got all of our posters downloaded looking extremely sharp and swapped out without us having to do anything. 

That's how it works; that's the basic concept, so you could use this to populate lists to populate grids, you can use it for small screens, large screens, or you could run it on a whole file if you felt like it. It's a really powerful tool for automatically populating Figma content directly from a Google Sheet, or Google spreadsheet; and you can just basically use this format to populate any kind of content that you want, depending on what your use case is, for many rows as you want to put in, and as many rows as you want to copy and paste in your Figma file. It's really up to you to decide how you go about using it, so that's pretty much it for today. This is a brand new feature, something that we've been wanting to ship for a little while; very happy to get it out there and available for you to use in your own projects.

That's pretty much it, if you've been wondering how to sync up content from a Google Sheet, this is this is a really easy way to go about it. Feel free to give it a go with your own team or in your own projects, and thank you as always for watching; we'll be back soon with more Figma tutorials just like this one very shortly.

---

---
type: tutorial
title: Sync CSV spreadsheet content to Figma using CopyDoc
date: 2021-10-07T00:00:00.000Z
---

# Sync CSV spreadsheet content to Figma using CopyDoc



#### Video Transcript

Today I'm going to be showing you how to populate your Figma designs from content in a CSV spreadsheet file using the CopyDoc Figma plugin.

The first thing we need to do is just jump into the Figma Community and search for "CopyDoc", and when the first result pops up under the "Plugins" tab you can just go ahead and click on the "Install" button on the right hand side and that will install the Figma plugin and you'll be ready to go.

I'm just going to jump back into my Figma design and today I'm going to be using a movie application just to demonstrate how we can dynamically populate this movie poster block using content that we've populated in a CSV spreadsheet file. Before we open up the Figma plugin that we just installed, I'm going to jump into my Microsoft Excel spreadsheet; you can use other applications for this, if you want to use Google Sheets and save that as a CSV you could totally do that, or using the Mac "Numbers" app as another spreadsheet app and save it as a CSV, that's fine as well; for today I'm just going to be showing you how to do it in Excel, but the format will be the same regardless. 

The format we do need to use is fairly simple and it's going to be the same for your own content as well; the main thing to know is that the first row of your spreadsheet is effectively your header, and the header is going to be used to name your columns, and that's going to be used to map that content back into your Figma file; what I mean by that is you can see here for example this column header is named "#Title" and in my Figma design if I switch back into that, you can see here in my little movie poster component I also have a text layer with the same name. I've got "#Title" in my Figma layout, so that's the Figma text layer and I've also got my column name the same, so it's "#Title". 

The same thing is true for the reviews; in here I can see I've got a text layer with "#Reviews" and also in this image layer. I've got a poster, this movie poster layer which is an image in Figma and I've named that image layer also "#Poster" which matches up with the "#Poster" column in my CSV spreadsheet. What that means is we're going to actually automatically swap out that image dynamically in a minute when we run the Figma plugin, and it's going to automatically swap in this image content into our Figma design. 

To show you what that looks like if you do want to add your own images, it's fairly straightforward, you can either upload the images somewhere online on your own website and get your own link for your own images, or if you just want to grab something like a movie poster for example, you can just go to Google images, search for the image you want, open it up, and then in the image preview, just go ahead and right click on that, and then click on "Copy image address" and then back in your spreadsheet under your image column, whatever that happens to be, you can just paste that in there and that will paste in a URL to the JPEG image. The Figma plugin will automatically pick up on the link and if it's an image layer, it'll automatically swap that into Figma later. You can go ahead and just populate the rest of these; for example, I'm going to use the "Suicide Squad" movie for this latest row and I can just populate that the same way and now we're ready to go; our spreadsheet is all done now, this is the format that you can use for your own content. 

I've got four different movies that I want to add into my app, so now that we've got our CSV spreadsheet structured correctly, just make sure that you are saving it as a CSV, if you go to "File", "Save as", and then under the "File Format", you just want to make sure in whatever app you're using that ".csv" is selected; and you can just go ahead and save that to your desktop or wherever else is easiest. If it gives you this little warning, that's fine, it's just trying to get you to save it as a Microsoft Excel file; I do have another YouTube tutorial using that file format, but for now we're just going to ignore that and use the CSV file. 

I'm going to jump back into Figma now and I'm going to run the Figma plugin that we just installed a minute ago by right clicking anywhere on the page, going down to "Plugins" and then clicking on "CopyDoc", and that's going to fire up the Figma plugin that we just installed. I'm not going to be going through any of the other features in this Figma plugin today, you can check out our other YouTube tutorials for those; today I'm just going to be focusing on this brand new feature called "Sync Spreadsheet Content".

You can open that up by clicking on the "Sync Content" button in the Figma plugin, so I'm going to click on that now, and you can see here it's got an option to sync a CSV file. What we're going to do is we're going to grab the CSV file that we just saved to our desktop over here, and I'm just going to drag and drop that file directly into this little drop zone in the CopyDoc Figma plugin. I'm going to let go of the mouse now, drop that in, and you can see it's instantly loaded up my spreadsheet columns from the CSV file, and it's giving me a preview of the headers; the headers of these little bold tags that it's pulling in the first row from our spreadsheet, and then it's also pulling in the second row from the spreadsheet content to give you a little preview of what each content might look like just to sort of show you what each of these relates to. 

Okay, now that we've done that, the last thing we need to do is just duplicate our original Figma layer. I'm using a component but you can use other groups as well; you could use a frame or a Figma group today I'm just going to be copy pasting this component into three new instances of the component; I'm just copy pasting those normally and moving them around and because these are copied instances, just to confirm you can see here the naming of those text layers and image layers are importantly still named the same as our spreadsheet headers over here. 

Now that we've copied those, that was kind of the last step, and all you need to do is now select those Figma layers; you can see in my left hand side here I've got all four of those layers selected and now in our Figma plugin you can see it's telling us we've got the four selected layers. What I'm going to do now is just click on the "Sync Spreadsheet Rows with Figma Layers" button; I'm going to click that, and what that's going to do is it's going to go through and download all of those high resolution movie posters, it's going to swap that in to all of our Figma layers and also update all the text. That's done now, you can see it's told us that it's updated the content for 24 different layers in Figma, and it's looking really good. We've got our dynamic posters, so instead of just having it all the same, it swapped it out without content from the CSV spreadsheet. 

We can verify that just by having a quick look, and basically the way it works is it loops through each of those selected Figma layers and then also loops through at the same time each of these rows; for each selected layer, it will use the data from one row and it will automatically swap out any matching layers it finds with these header labels, and that's exactly what it's done. You can see we've got the "No Time To Die", "Dune", "Black Widow" and "Suicide Squad" all swapped out, all the minutes are swapped out, all the reviews are swapped out, the tags are all swapped out, and of course the images have all been replaced.

That's basically it; it's fairly simple once you figure out the structure, once you get an idea of how the spreadsheet's meant to be set up just like this. You can use this format in your own CSV spreadsheets to sync with Figma as well, but once you've once you've mastered that, it's a really simple process. You can use this feature as much as you want to update any kind of grids, lists or any sort of repeatable content; it's very, very useful for that. 

If you've been wondering how to sync repeatable content from a CSV spreadsheet into your Figma design designs this is a really, really simple way of going about it; and unlike another tutorial with the Google Sheets, this is all local to your computer as well. If you work at a company that doesn't let you use Google Sheets or something like that, which is this other feature down here, then maybe the CSV option is going to be more to your liking.

That's it for today; I just wanted to keep it simple as possible and as short as possible. Feel free to use this CSV spreadsheet sync feature in your own Figma workflow, or with your own team, if you've got a bunch of copywriters on your team and and need to do some efficient content updates, then this might be an option for you to try out. Thank you as always for watching, and we'll be back back soon with more Figma tutorials just like this one very soon.

---

---
type: tutorial
title: Sync XLSX Excel spreadsheet content to Figma using CopyDoc
date: 2021-10-06T00:00:00.000Z
---

# Sync XLSX Excel spreadsheet content to Figma using CopyDoc



#### Video Transcript

Today I'm going to be showing you how to sync content from an Excel spreadsheet dynamically into your Figma designs to populate multiple blocks of content.

The first thing we need to do is just install a Figma plugin called CopyDoc; if you go to the Figma Community and search for the word "CopyDoc", and with the first result that pops up just go ahead and click on the "Install" button on the right-hand side, and once you've done that you'll be ready to go.

Today I'm just going to be using a really simple example of a movie app, and what I'm going to be doing is syncing up our content from an Excel spreadsheet and dynamically populating these movie posters inside the app. The first thing we need to do is open up Microsoft Excel, or you could use a different spreadsheet software like Google sheets or something like that, but today I'm just going to be using Excel. 

It's important to understand how the spreadsheet needs to be formatted in order for this feature to work; it's pretty straightforward, the first row of the spreadsheet is basically the headers that are going to be used to label the different bits of content in your design. For example, in my case with the movie app, we've got things like a "tag", we've got "reviews", we've got a "title", we've got "minutes", we've got a "poster". Basically what I'm doing here is I'm labeling these headers with the name that I'm going to be naming my Figma layers. 

If we jump back into Figma and jump into our design over here, you can see that I've already named these layers to match the headers from the spreadsheet. For example, with the "comedy" tag I've named that "#Tag" and you can see in my spreadsheet I've also got that named as "#Tag" as well; I know that's a bit confusing hashtag and #Tag, but for example, we've got title as well. We can go down to here and you can see under the title; the title text layer has been named "#Title" with a hash in front of it and it's exactly the same in my spreadsheet; that's kind of cool because it means we can map these bits of content from our spreadsheet directly into our layers in Figma just by naming them the same, and then anything underneath that first row in your spreadsheet is going to be used as a content row that's going to be populated into Figma. 

If that doesn't make sense, I'll show you exactly what that means in just a moment. What I'm going to do is I'm actually going to duplicate this block or this component now that the layers have actually been named to match the spreadsheet, and I've also done that for the image; because I want this image to also be be dynamic I've named the image layer "#Poster", and I've done the same thing in my spreadsheet as well; that's going to allow us to not only do text layers but also do images. 

I'm going to duplicate this component; I'm just going to copy that normally, paste it, and I'm just going to do a little grid layout here. I'm just going to do four blocks for now; all I've done is just copy that original component, and it doesn't have to be a component, but in this case it's just a component, and I've created three more instances and they also have those same named layers. You can see here they're all named. Okay, that's all set up now, and we have our content in here and I just want to really quickly show you how to get these images in there as well.

If we do another example I'm just going to do another movie; let's do let's do "Suicide Squad". I'm going to put "Suicide Squad" in there and I'm just going to grab the image online and then I'm going to show you how to paste it in there. If we want a poster for our "Suicide Squad" movie, all you need to do is go to something like Google images, or you can go to another website, click on any of the image results and when you right click on the image after you've expanded it, just right click on that image and "click on the "copy image address" item in the in the right click menu. I'm going to click on that and then in your spreadsheet just hit paste, and that's going to paste in the actual image URL. You basically want to add a direct link to the image and that's going to get downloaded into Figma in a moment.

I'm just going to save that Excel file now, close off the browser, close off Excel, and now what we want to do now that we've got our spreadsheet set up and our Figma file set up is we want to right click anywhere on the page, go down to "Plugins" and click on "CopyDoc", and that's going to open the Figma plugin that we just installed at the start of the Figma tutorial. I'm not going to be going through any of these other features, I'm just going to be focusing on the "Sync Spreadsheet Content" feature for today; you can open that up by clicking on the "Sync Content Button"; it's been opened up now and you can see here we've got an option to click or drag and drop an Excel file. I'm going to do that now, I've got my Excel file just sitting on my desktop that we just saved; what I'm going to do is I'm going to drag and drop that straight from my desktop directly into the Figma plugin in this little drop zone area, and I'm going to click on that or let go of the mouse and that's just dropped the file in there. 

You can see it's giving us a little preview of what spreadsheet columns it's detected in the spreadsheet; you can see all of our headers have popped up, and then it's also showing the first row of content as a bit of a preview of what each of those looks like. That's working perfectly, that's exactly what we want to see, and then all we need to do is just click on the component and the instances of the component that we copied and pasted earlier. We've got all four layers selected here, and again, those don't have to be components, they can just be groups or frames, but in this case we're going to do components and instances. 

I've got those four layers selected, and you can see in the plugin it actually doesn't let you click the button unless you have at least one selected. I'm just going to click on all those four, and all I'm going to do is click on the "Sync Spreadsheet Rows with Figma Layers" button; I'm going to click on that now, and what this is going to do is it's going to load in those images, it's downloading those images that we specified in the spreadsheet, it's going to render those into the file, and it's going to update all the text. There we go, it's just updated 24 Figma layers because we had four different blocks selected there. We had a few different things updating, and you can see here it's swapped out all of our static "Avengers" blocks of content and it's populated it exactly with what we'd expect to see from our spreadsheet. 

You can see here row by row, it's looping through the selected layers and it's saying: "okay, for each layer that you've selected, I'm going to use one row from the spreadsheet, and I'm going to swap out anything you've named with the same layer name in Figma with these tags in the spreadsheet". We can see that exactly happened here; we've got "No Time To Die", "Dune", "Black Widow", "Suicide Squad"; it's just going through each of those and swapping out those layers. For example, in our minutes layer you can see here it's swapped out the minutes because our layout was named "#Min", and same thing for the reviews and the posters.

It's as simple as that; you can use this for populating lists, grids or any repeatable content it's perfect for. It just saves you having to manually go through each layer time after time to copy and paste content over and over again. If you can get away with filling out a spreadsheet first, this tends to be much easier to maintain for large sets of content or repeatable content. That's basically what it looks like to swap out the dynamic content from an Excel spreadsheet into Figma.

If you've been wondering how to do this, or been struggling with handling large sets of repeatable content, this might be one option for you. If you've been interested in something like this, I hope the Figma plugin can help. Thank you as always for watching, and we'll be back soon with more Figma tutorials just like this one very soon.

---

---
type: tutorial
title: How to convert Figma Components to Sketch Symbols using Convertify
date: 2021-09-14T00:00:00.000Z
---

# How to convert Figma Components to Sketch Symbols using Convertify



#### Video Transcript

Today I'm going to be showing you how to export your designs from Figma to Sketch, including all of your Figma components, which will be converted to Sketch symbols.

To get started, we just have to go to the Figma Community and install a Figma plugin called Convertify. If you just search for the word "Convertify", and under the "Plugins" tab you'll see Convertify pop-up; if you just click on the "Install" button on the right-hand side, you'll be ready to go. 

I'm just using a simple design that I've duplicated from the Figma Community; it's got a bunch of components in it, a bunch of text styles, a bunch of color styles, and we're going to see what this looks like when we convert it from Figma to Sketch with those components. To run the Figma plugin you just right-click anywhere, go down to "Plugins" and click on "Convertify". That's just going to open up the Figma plugin we just installed.

By default, the design won't get converted with all of the pigment components as Sketch symbols, it will convert them as regular groups and frames. To enable this feature you just have to click on the little settings icon next to the Sketch button and open that up; and you'll see at the top there's a toggle called "Convert Figma components to Sketch symbols", and it's currently in BETA. If you enable that toggle, that's going to make sure that your Figma components actually get converted into Sketch symbols rather than just plain grouped layers and things like that. It's worth noting that while this is still a BETA feature some of the instance overrides might actually mean it's less visually accurate, but for almost all cases it's going to work really well. 

I'm just going to close that off now that I've enabled that setting. I'm going to close it, then all we need to do is click on the button that says "Convert to Sketch"; I've just clicked on that and it's running through all of my pages now and converting all of those pages from Figma into a Sketch file, it's going through layer by layer and doing that. This of course depends on how many layers your Figma file has or each page has; for example, this one's taking a bit longer than the first two because it's got almost 3,000 layers. You can see here it's processing each layer fairly quickly, and once that finishes up we'll be able to download this file to our computer open it up in Sketch, and then we can take a look at what it looks like with all those components converted. It's just finishing up the final page now, and the final thing it's going to do, considering we toggled the option, is now it's just going through and converting all of the Figma components to Sketch symbols; those Figma components, that's the last step that it does. 

Now it's just packaging up the Sketch file with all of our assets, and it's ready to download. All we need to do is click on the "Download Sketch File" button and save that to your computer. I'm just going to save it to my desktop and click "Save", and if I double click on that Sketch file on my desktop, that's going to open up Sketch and hopefully load up our file that we just converted. There we go, I'll just resize the Sketch window so we can see what's going on. This is our converted Sketch file that we just exported from Figma, and you can see all of our layers are here, all of our pages are here, we've got our assets page, UI design page, all looking really good.

Because we enabled the "Covert Figma components to Sketch symbols" option, we also have a brand new page which wasn't in the Figma file called "Symbols". If you go on the symbols page, you'll see here that it's actually exported every single Figma component from the Figma file into the Sketch symbols page, and each of those are there. If we zoom out, we'll be able to see quite a lot of symbols on the page. That's quite a lot there, so that's all the components and their variants. The cool thing about this is we can now use these, or they are already being used in our designs. If we jump into one of these frames; for example, if we check out some of these buttons, I'm just going to open up this frame, and you can see on the left here this is actually a symbol. These buttons are symbols that are being used, as opposed to regular groups; the cool thing about that is we can actually change these styles globally and actually update them across the board. 

We can go to our symbols panel here, and you can see all the symbols that are looking good; we can also go to things like colors and text styles. For example, I could change something like this default green and I could make it pink, for example. I'm going to change a few of these so it'll be a lighter one. I'll just change that; I've just changed those primary colors, and if we jump back to our design you can see here that the colors that were being used on those components have now all been updated across the board. We're able to update that in one spot and because these are all components using the global colors, we're able to change those very easily. 

The other thing that we could do is we can actually change the button designs themselves. If we go to these buttons; we've got a few different styles here, but what I can do is I can actually open up these and I can do something like remove that border radius. We can open up these, remove the border radius again, and I'm just going to do this is an example so you can see what it looks like. There we go, you can see here the buttons now don't have a border radius because we just changed the border radius in the Sketch symbols page. That's just an example of one way you can actually edit the symbols now that they've been exported from Figma components into Sketch symbols, and you can update your design in one go. 

That should make it a lot easier for maintaining a larger design or just more design system based design; if you do need to do, that feel free to use that feature that we just went through in the Figma plugin and this should make it a little bit easier, as I said, for those much bigger files. Please know, this is a BETA feature, so if you are experiencing some issues, feel free to get in touch. The Figma plugin is being updated to to iron out some of those issues, but if you are noticing that it's just for whatever reason not looking as accurate as it needs to be, feel free to either manually update the those discrepancies in Sketch, or you can actually just uncheck the "Convert Figma components to Sketch symbols" toggle, and that will export the file in the default way, without actually including the native components.

That's the whole Figma tutorial for today, I just wanted to run through this brand new feature with you and show you how to convert those Figma components into Sketch files when you export your designs. Thank you for watching, and we'll be back very soon with more Figma tutorials just like this one.

---

---
type: tutorial
title: How to compare live website builds with Figma designs using Pixelay
date: 2021-09-13T00:00:00.000Z
---

# How to compare live website builds with Figma designs using Pixelay



#### Video Transcript

Today I'm going to be showing you how to compare your Figma designs with live website URLs using the Pixelay Figma plugin.

The first thing we need to do, if you just jump into the Figma Community search for the word "Pixelay", and under the "Plugins" tab, you'll see Pixelay pop up. If you just click on the "Install" button, you'll be ready to go.

I'm just going to jump back into my file, and I'm just using a portfolio website today to compare. I'm just going to right click anywhere, go down to "Plugins", click on "Pixelay" and that's just going to open up the Figma plugin we just installed a moment ago. It's a fairly simple interface, all we need to do is put in our website that we want to compare our designs with. In this case, I'm going to be comparing this portfolio site, so I'm just going to copy the URL from the website and paste it into the top bar over here, and what that's going to do is it's going to set that as the base default URL to compare. In my case, I actually don't want to compare the homepage, I want to compare the about page and the projects page. What I can do is I can actually override these URLs per page or per frame, and I can just do that by going to the URL clicking on that, copy/pasting it, pasting it into the input fields here in the Figma plugin and if I grab the projects page, I'm going to copy/paste that URL into the input as well. Now you can see it's going to compare the about page for these two, because you've got the mobile and the desktop, and then the projects page just on the desktop for this one. 

That's the way that you put in the URLs, and all you have to do is just select the ones that you want, I'm just going to leave all of them checked, as I've only got a few. After you've selected them, just click on the "Compare Designs" button in the Figma plugin; if you click on that, it's going to prompt you to create a new URL, which will be a Pixelay URL. You just have to click on the "Upload Designs" button, this will just show it the first time it loads the Figma plugin, once you've uploaded it as we'll see in a minute you can actually re-upload them, so if you make changes to your Figma designs and you want to re-upload them or you want to change the URLs or add more or remove frames, you can actually do that and re-upload these designs to the same URL and you'll be able to refresh that. We'll have a look at what that looks like in a second, but for now it's just going to be doing the initial upload of the designs and also create your own Pixelay URL, which is going to open up a web app in a minute once the upload finishes. In a second, once it finishes we're going to see a couple of different things; this is different to the last Figma tutorial which is mostly just comparing local development website builds, this one's going to be for production builds. 

As you can see here, it's now ready, it's created the URL that we can use. We've got two options here; we can either compare local development URLs, so that's things like localhost or local web development on your machine, or you can compare live URLs, which is what we we want to do today. These are two different web app URLs that you can use, and because we're going to be comparing live website URLs, we also need to make sure that we've installed the Pixelay browser extension. You can do that just by clicking on the link here, and that will take you to the Chrome store; I'm using the Brave browser which is very similar to the Chrome browser, and so your button might say "Install in Chrome" or "Instal in Brave", and if you just click on that button up here, it should look like mine where, it then says "Remove", because it's now been installed. I've already installed it, but if you haven't, just click on that link in the Figma plugin, open up the extensions page, and click on "Install", and then you'll be ready to go.

Once you've installed the Chrome extension or the browser extension, you can now go to the Pixelay web app URL, and you can do that by just copy pasting the link. You can click on the little copy icon here, copy it to your clipboard, and then we can open up that URL in our browser and that's just going to load up the Pixelay web app to your unique URL that you've just created from the Figma plugin. You can see here, it's loaded up our designs, and we can actually scroll across left to right. You'll notice here that our Figma designs have been uploaded, but there's also some other other designs going on which are actually from the live website. The easiest way to see this is we can either change the opacity, so this changes the opacity of the overlay, or we can actually switch directly into the Figma design or the live website itself. That is the live website there, you can see if I hover over these items that's all live, this is all HTML, and the Figma version is just the design, there's nothing going on here, it's just the design. 

The comparison modes actually let you compare the two, so we can see here we can actually compare the design and the build by changing the opacity; we can look at the split version, we can actually use a split screen to compare them, so that's another way we can do it; we can also use the diff mode which can be helpful for finding really subtle differences, this helps you sort of find those; if we need to we can actually move the overlays around to change the offset just in case the offset in the website has some weird stuff going on, you can change that a little bit there too; and of course we can also do measurement, so if you're in development mode and you want to figure out how how off these these things are, you can click anywhere and measure them to get the difference in pixels. 

That's that's the way you can do that, you can also jump to frames; this is handy if you've got a bunch of different frames, we've only got three, but you can actually skip directly to those frames as well and just use that menu there and that will jump straight to them, so you don't have to scroll a whole bunch to get there. You can see here it's the entire page; we're comparing multiple viewports at the exact same time, we don't need to switch between pages, we can just scroll left and right very easily, up and down, you'll get the entire viewport and these viewports are being matched to your Figma designs. The size of the viewports, the width and the height, are exactly whatever your frames are in Figma. You're really getting a truly responsive comparison, because it's changing the viewport to match the width of the Figma frame; you can really see what the responsive version actually looks like compared to the original Figma design. 

That's that's what that looks like there. It's really simple, you can just keep comparing these as much as you want. The idea here would be if you've got a live website you can do QA on it, quality assurance, and check that everything's actually looking the way that it should. These designs are a bit outdated, that's why the the copy looks different but you can see already like you could tweak the the menu margins just to make sure those are all lining up exactly if you wanted to really tweak them, same with the columns, the columns are a little bit too wide, or not wide enough in this case. The idea here is you would go back to your website development, update these visual changes in your code and push it up to the live site, and then hopefully you'd have something that's much much closer to the original Figma designs. 

That's how you can compare those, and as I mentioned you can also re-upload these. If you wanted to re-upload these, for example, in the case of the projects page; if I just jump back into the development mode, I'm just going to copy that new text and I'm going to put that into the projects area, whoops; actually, I don't have that font. I can't do that, but if I could do that, I would; in this case, I'm just going to move these around a little bit just to show you that it is going to get updated. What I can do is I can actually rerun the Figma plugin; I'm just going to click on the Pixelay Figma plugin again, and I'm just going to re-upload just the one page this time. This time I'm just going to do the projects page, and you can see here this time when I click on the "Compare Designs" button it's already showing me the link. I can get that back again, I don't have to re-upload it to get that link again, I can just jump in here, copy that link again if I needed it for quick reference. 

I can also click the "Update Designs" button, which I'll do now. This is going to update the existing link with your Figma designs re-uploaded to the same link. If you just wanted to narrow it down, or add more frames, or change the URLs, you can use the re-upload function to update the link without having to create a whole new link and share it around, and do all that sort of thing; you can just re-upload them and do that really quickly. It's just confirmed it, so it's re-uploaded now, and if I just jump back to my existing URL, I'm just going to hit refresh. This time we should only see the one frame because we've just re-uploaded it; we can see here it's only got one frame now, we've just updated the link that we were already using, and this time you can see the design's been updated; you can see the the columns are even more out of whack now because I just wanted to show you what that looks like when you do update it.It's the development mode and then the comparison mode, so you can just keep doing that, you can just keep changing either your Figma designs or the build, and hopefully you'll be able to do much more accurate QA on your websites rather than having to manually figure out where all the differences are; this is a much quicker way of figuring out how accurate the build is compared to your original Figma designs.

Okay, that's pretty much it for today; I just wanted to show you how to compare your Figma designs with the live website URLs instead of the local development URLs which were covered in a different YouTube Figma tutorial. If you've been looking for an easier way to do QA or quality assurance on your Figma designs compared to the website build, then consider using the Pixelay Figma plugin as a part of your toolkit for for doing that. As always, thank you for watching, and we'll be back soon with more Figma tutorials just like this one.

---

---
type: tutorial
title: How to export Figma to Microsoft Excel .xlsx files using CopyDoc
date: 2021-09-09T00:00:00.000Z
---

# How to export Figma to Microsoft Excel .xlsx files using CopyDoc



#### Video Transcript

Today I'm going to be showing you how to export your text content from Figma into a Microsoft Excel document; we're going to be doing this by using a Figma plugin called CopyDoc. 

If you haven't already done so, if you just jump into the Figma Community and search for the word "CopyDoc", and under the "Plugins" tab you'll see a result called "CopyDoc" pop-up. If you go ahead and click on the "Install" button on the right-hand side, you'll be ready to go.

You can use any Figma file that you like; at the moment, I'm just using this movie app. The only thing to bear in mind is you will need at least one frame, one Figma frame, with some text content in it for this to work. The first thing we need to do is just right-click anywhere, go down to "Plugins" and click on "CopyDoc"; that's just going to fire up the Figma plugin we just installed a second ago. I'm not going to go through any of these other features, there's other tutorials on our channel for all of these; today we're just going to be looking at exporting this Figma content into an Excel file. 

To do that, we just have to click on the "Export Frames" button under the "Export Figma Frames" menu item; that's a menu item to export your Figma designs to popular document formats, including Microsoft Excel. I'm just going to click on "Export Frames", and under the drop down you can see we've got a whole bunch of different options here, and if you just click on the "Microsoft Excel (.xlxs)" option and select that, that's going to select the Microsoft Excel format for you. 

There's really only a couple of options here; one option is just to include design references, that basically means that all of these frames that you select to export will also just get a little JPG file exported, just as a bit of a design reference so you can see what relates to what in the Excel file. The other option we have is to export a single Excel spreadsheet file per frame; if we leave this option unchecked, which which it is by default, this is basically going to export your Microsoft Excel file with each frame from Figma in a separate tab at the bottom of the file, and I'll show you what that looks like in just a second. 

The other thing we can do is just select what frames we actually want to include in the Excel file. You can do that by either clicking on the frames in Figma and sort of filtering down that list, or you can just uncheck and check these layers manually as well. We'll just check a few in here, you can sort the frames if you wanted to sort them into a different order, you can definitely do that, you can do custom sorting, so you can actually drag drag these frames manually, but for now I'm just going to kind of leave them in a default order and do it visually by columns. 

Once you've selected your frames and the ordering all you need to do is click on the "Export XLSX" button, and that's going to go ahead and export the selected frames to an Excel file. It's very quick, the export is already finished, so now we just have to click on the "Download XLSX Export" button, and I'm just going to save that to my desktop. If I now go to my desktop, you can see the zip file has popped up; I'm just going to double click on the zip file to unzip it, and we've got two different files in here; we've got a designs folder, so that was the folder I mentioned with all of our designs. These are really just JPG references that you can open up, and this is really just purely for if you're looking at the Excel file and you're not in Figma, this is just a quick way to see roughly which text relates to what frame and where it might be located on the frame; that's your design references folder. 

Now we have our XLSX file as well, so I'm just going to double-click on that and that's going to open up Microsoft Excel. Just click on "Yes" for this if it pops up with this alert, it does that sometimes; you can just click "Yes" and that will open it. Just click on "View"; it does this sometimes if your Figma file has weird line breaks and different characters in it that Excel usually doesn't like, but you can just click on "View" and it'll be totally fine. 

I'm just going to resize the file window so you can actually see what's going on here. You can see at the bottom here we've got all these different tabs; these are the tabs that relate to your Figma frames. The frames that we selected in the menu have all been exported and you can see here I can switch between all of them and look through all the content. These are in alphabetical order as well, so the numbers will be at the top, and it'll sort it by alphabetical order. You can very easily kind of audit the text in your frames, and if there's any duplicate text layers, if there's any text layers in your Figma file that are identical, it will automatically group those into a single layer. If your Figma frame had 20 different layers that all said "Movies", it's going to merge those into a single layer in your Excel spreadsheet, and that's just so you don't have 50 layers of the same text in there, which is which is kind of not that useful. 

That's what that looks like, and I'll just show you what it looks like if we just rerun that as well in the Figma plugin. I'm just going to click on "Export Frames", and I'm just going to re-run it with the "Excel File Per Frame" option set, and just re-run the export by clicking on "Export XLSX", and that's just going to export the frame again. This time instead of exporting it to a single Excel file, if we jump back onto our desktop and open up the new zip file, you can see this time we actually have a whole bunch of different Excel files. It has split out each frame from Figma into its own Microsoft Excel file instead of merging them all into the single Excel file using the tabs at the bottom to navigate them. 
 
Now we can open up these individually by just double clicking on them, and I'll just resize the window again, I'm not sure why it keeps going full screen, and you can see here this time we only have one tab which is just called "Figma Text", and we've got all the same text layers that we saw in our tabbed version, the original version, but this is in a single Microsoft Excel file instead. That's just an alternative option if you did need to actually split the frames out into multiple Excel files instead of just having it in the one file with the tab navigation at the bottom; there's some use cases where you would you'd probably prefer it like this, but for most of the time I'd imagine you'd probably want them all easily navigatable and searchable in a single Excel file. 
 
Those are basically the two options that you have for exporting your text from Figma to Microsoft Excel. That's that's pretty much it; it's a very quick tutorial today just covering this one feature in the CopyDoc Figma plugin. There's obviously other formats you can export, too, which will be covered in other Figma tutorials, but today I just wanted to really quickly run through the process of exporting your content from Figma to Microsoft Excel or XLSX documents. 
 
It's just worth being mindful of the fact that this is just using the "Export Frames" feature, and it's not actually using the "Export Text Layers" feature. Just really briefly, the difference between those two is if you do export your frames using the "Export Frames" feature to this Microsoft Excel file from Figma, you won't be able to re-import the Excel export from Figma back into Figma using the CopyDoc import feature. That's just a really important distinction between these two features; the "Export Figma Text Layers" feature, which I've covered in other tutorials on our channel, does allow you to export your text layers to CSV, JSON pr XLIFF files, and then you can actually edit those files outside of Figma and re-import them, and it will update the Figma text layers automatically. That totally works for CSV, JSON and XLIFF files, but it does not work for Excel files.
 
The Figma to Microsoft Excel feature is really just for using for other purposes that don't involve re-importing the text later back into Figma from Microsoft Excel. I just wanted to flag that in case you're wondering why it's not allowing you to drag and drop your Excel file back into Figma; that's the reason. If you do need to do that, I'd recommend using the other "Export Figma Text Layers" feature, and then re-importing the CSV file, for example, back in if you do need to update it. Otherwise, feel free to use the export Microsoft Excel feature if you do just need to get all of your Figma text out into a massive Excel file, and you just want to audit it, or you want to send it around for approval or something like that, then the Figma to XLSX option might actually be the one that you're looking for.

I hope that's clear; if you have any questions, please let me know in the comments and I can get back to you, but thank you for watching and I hope you enjoyed this Figma tutorial if you've been wondering how to export your designs from Figma to Excel, this is a really quick way to go about it, and hopefully you can get some benefit from it in your own workflows and projects. As always, thank you for watching, and we'll be back very soon with more Figma tutorials just like this one.

---

---
type: tutorial
title: How to export Figma to After Effects in one click using Convertify
date: 2021-09-07T00:00:00.000Z
---

# How to export Figma to After Effects in one click using Convertify



#### Video Transcript

Today I'm going to be showing you how to export your Figma designs to Adobe After Effects using the Convertify Figma plugin.

The first thing we need to do really quickly is just jump into the Figma Community, search for the word "Convertify", and you'll see Convertify pop-up under the "Plugins" tab. If you go ahead and click on the "Install" button on the right-hand side, that'll be installed, and then we can get started.

I'm just going to jump into my Figma file which I've grabbed from the Figma Community, it's just a handful of vector character illustrations and what I want to do is basically get these out of Figma and I want to get them into Adobe After Effects, so that I can animate them or do some motion design with them. I want to do that without having to manually recreate these elements or copy/paste them and kind of nudge them around, I want this all to be automatic. We're going to do that today, and if you follow along, I'll show you how it's done. 

If you just right-click anywhere and go down to "Plugins", click on the "Convertify" Figma plugin, which is the one we just installed, that's just going to open up the Figma plugin. The first thing to note is that the Adobe export options in the Convertify Figma plugin only support single pages; unlike the Sketch exports which I've covered in other tutorials, Adobe only supports one page, so you can change the page that you're converting by just switching in the pages panel on the left, and you can see here it's going to change in brackets the page that it's going to export. 

The way that this is going to work is we're going to actually export this Figma design to first an XD file, we're going to open up that XD file, and then we're going to convert that from XD into After Effects; this is a really simple process, and I'm just going to walk you through step by step right now. The first thing to do is just click on the "Convert to After Effects" button in the Convertify Figma plugin, so I'm going to click on that now and that's going to convert all the layers on our Figma page. It has just finished, this is a really simple Figma file, so it only takes a couple of seconds. 

As I mentioned, we're just going to download the file now open it up in XD, export an artboard to After Effects, and I'm going to show you how that works. If you go ahead and click on the "Download XD file (for exporting to After Effects)" button, so click on that button, and I'm just going to save it to my desktop by clicking "Save"; and on my desktop I'm just going to double click on that file, which is going to open it first in Adobe XD. You can see here Adobe XD has just fired up and loaded in our exported file that we just exported from Figma, and you can see here it's carried over all of our vector layers, all of our Figma layers have been exported over, but of course we don't want to use it in XD; in this case, we do want to get all of these layers into an After Effects file so that we can actually animate them. 

The way that we can do that, is just by clicking on the artboard that you want to export into After Effects, so you could either click on this one which would export all of these layers, but for today I'm just going to do a single character. I'm going to click on the character frame or artboard, and I'm going to click on the "File" menu in the top menu up here in XD, and I'm going to go all the way down to "Export", and under the "Export" menu, you'll see this item at the bottom that just says "After Effects"; go ahead and click on "After Effects", and this is going to instantly export your artboard into After Effects. 

It's just automatically opened up After Effects for us and we can see here that the artboard that we just exported from XD has been carried over to our Adobe After Effects file. All of our Figma layers are here, you can see them in the timeline, we've got all of our vector layers our groups, and of course these can be moved, and you can transform them. I'm not going to embarrass myself by trying to animate these layers, as I'm not not an After Effects expert, but of course if you are, this would be super handy, as you don't have to recreate all those layers from Figma. Effectively, all of your Figma layers have been converted from Figma to Adobe After Effects using the native XD export feature. That's what it looks like, it's a really simple process as I said, and this is this is everything you basically want. Of course, this was a really simple file, so if you do have a much larger file or have a lot of bitmap images or lots of different layers on your artboard, this might take a little bit longer, especially if you're using a an older computer; but if you're already doing motion design, you've probably got a pretty specced out computer or PC anyway, and if you're going to the trouble of exporting your Figma files to use in After Effects, then I'm sure you probably won't run into too many performance issues based on that.

That's the whole process, you can you can do this for as many artboards as you want, we could do it for this one as well if we wanted to try that out; just again click on the artboard, go down to "File", then "Export", click on "After Effects", and once again this will open up the file in After Effects. There we go, we've got the other layers imported into Adobe XD, and then exported from XD to After Effects. Again, this was much quicker because it's just a bunch of vector layers, but as I mentioned, if you do have larger files it might take a little bit longer, but this should be essentially everything you need to animate those vector layers, those individual layers from Figma in After Effects, as I said, without having to manually recreate them, which is a big pain, if you've ever tried doing it before.

That's basically it; you can apply this process to any of your Figma files that you want to use in Adobe After Effects, it works perfectly for vector files, as I mentioned, and it'll work just as well with with other types of files, too. Vectors are always really nice for exporting from Figma to Adobe After Effects, especially if you're going to be using them to then export to something like a Lottie file or a Lottie format ,then this is usually the style that you would do that in After Effects for. 

That's it, that's the whole tutorial, it's a reasonably short one today; just wanted to run through this new feature that we've shipped into the Convertify Figma plugin and walk through the steps on how to do it. If you've been wanting to export your Figma designs from Figma to After Effects, this is as far as I know the easiest way to do it without having to manually recreate all those layers, especially for complex designs. To the the people out there have requested this, I'm glad to say that it's all working now, and you can go ahead and try this in your own projects and workflows. As always, thank you for tuning in and watching this video, and we'll be back very soon with more Figma tutorials like this one very soon.

---

---
type: tutorial
title: How to find and replace Figma text content using CopyDoc
date: 2021-09-06T00:00:00.000Z
---

# How to find and replace Figma text content using CopyDoc



#### Video Transcript

Today I'm going to be showing you how to find and replace text content in your Figma designs using the CopyDoc Figma plugin.

The first thing we need to do just really quickly if you haven't already done so, is go to the Figma Community search for the term "CopyDoc", and you should see the result pop-up under the "Plugins" tab. If you click on the "Install" button on the right hand side you should be good to go.

Now we can jump back into our Figma file, and to run the Figma plugin we can just right-click anywhere, go down to "Plugins" and click on "CopyDoc" and that's just going to load up the Figma plugin we just installed. This is going to be a pretty short Figma tutorial, it's just going to be covering the find and replace text feature in this Figma plugin. If you go ahead and click on the "Find and Replace" button, that's just going to bring up a modal with a familiar looking interface where you've got your "find" input and you've got your "replace" input.

The "find" input is where you put in your search term with the text you want to replace; for example, if I put in "avengers", which is the name of the movie in a couple of these screens, and if I just change that to be all caps, I can find those matches and preview the updates. If I click on that "Find Matches and Preview Updates" button, that's actually going to load up all of the instances where it's found the word "avengers" in my current file on my current page, and it's just going to preview what it looks like with the text that I've put in in the "replacement" input as well. 

You can see it's found a few different instances of this, and we can get a sense of exactly where it's appearing in the file, and what it's going to look like when it gets changed. If you're unsure where these are being changed or where they're going to be changed, you can just click on the little text icon button in any of these results; if I click on this one, that immediately jumps to the layer that it has found and instantly selects it. You get a really clear idea of where all these results are showing up, and the cool thing about that is you can actually uncheck those from being included; let's say I didn't want to include this particular change, I can just uncheck that input and this won't be included in rolling out those Figma text updates. 

If I'm happy with all the other ones, all I need to do to find and replace those in my Figma file is click on the "Uupdate Figma Text Layers" button; I'm going to click that now, and that's just gone ahead and updated seven text layers. We can see it's got a check mark against all the layers that it's updated, and we can see the preview of what it's updated, and now that it has been carried out, we can actually check that out. You can see here it's changed all of those lines of text to all caps as we put in, but it's also excluded the layer that we unselected here. 

If you do want to undo that you can just either "Command + Z" on Mac or "Control + Z" on Windows to just use the normal Figma "Undo" feature, and that's just instantly undone all of those text changes. If you did make a mistake you can quite easily undo those text changes in Figma from your "find and replace" replacements. 

We can do this as many times as we want; I'm just going to close the window again and load up another find and replace, but you can actually just keep finding and replacing as well. For example, I could search for "action" and find all those matches; you can see here we've got a bunch of those matches. I could search for "adventure", I could find those, and you can just keep searching in the same modal over and over again if you want to keep looking for different layers. Of course, you can make these changes; I can change "adventure" to "comedy" for example, and find and replace those changes in my Figma text. That has just found all the matches for "adventure" and is showing me what it's going to look like when it gets changed to "comedy". Again, I'm just going to quickly update all of those text layers to show you how that looks; I'll update those, so it's just updated all those four layers, and you can see it's changed over here all of them have been changed to "comedy" from "adventure". 

The other thing that's probably just worth touching on as well is the "Match Case" feature. We'll use "avengers" for example again, so let's say I search for "avengers" in lowercase; I'm just going to do "avengers", so if we search for that, it's going to come up, and it's going to get shown in our search results. We can see here it's included "avengers" because we searched for "avengers", but you'll notice in the design that "avengers" is actually capitalized in all the places where it's got the "Avengers: Endgame" title. If we wanted to actually specifically match that case to make sure that it's only matching the exact uppercase and lowercase in our search term, we can click on the "Match Case" toggle. If I toggle that on, and now I'll try and find those matches again, you can see this time it's actually returned no results; and the reason for that is because all of these are capitalized. This basically makes it case sensitive, so this can actually be helpful if you're replacing things like names or things of parts of words that might actually not be capitalized that you don't want to replace. 

This is just a nice way of doing that, and to show you how that does work with the capitalization; if I put "Avengers" into the search input again now I've capitalized the "A", and I'm going to leave the "Match Case" setting on, and if I find those matches again, this time it has included the capital "A" because we did we did add the capital "A" into our search term. That's just a really quick note there as well. 

That's essentially it; it's a really quick Figma tutorial, I just wanted to go through it and show you how it actually works, and show you how to find and replace Figma text really easily and preview the final replacements before you update them in Figma. If you've been looking for a feature like this, this is a fairly new feature in the CopyDoc Figma plugin; it's designed to be very similar to a typical find and replace feature in something like a code editor, and now you have the added benefit of really easily being able to preview those changes beforehand. There's just no way you're ever going to accidentally find and replace a whole bunch of text without knowing what it's going to look like first. 

As always with this Figma plugin and with updating any kind of text using Figma plugins, please just be sure that you do have the fonts installed; if you don't have the font installed, the Figma plugin will let you know that it won't be able to replace the Figma text without the font installed. If you are going to be doing some find and replace in Figma and you're wondering why it's not actually letting you do it, it's almost definitely because the font needs to be installed, and if it's not installed you won't be able to update it; that's just the way that that Figma handles fonts.

That's basically it, I'll leave it there, and I hope if you've been wanting some find and replace functionality in your Figma file, then this Figma plugin should hopefully help you out. Thank you as always for watching, and we'll be back very soon with more Figma tutorials just like this one.

---

---
type: tutorial
title: How to compress Figma images to file size targets using TinyImage
date: 2021-09-03T00:00:00.000Z
---

# How to compress Figma images to file size targets using TinyImage



#### Video Transcript

Today I'm going to be showing you how to compress your images to a certain file size target using the TinyImage Figma plugin.

The first thing we need to do, if you haven't already done so, is just go to the Figma Community and search for the word "TinyImage" and you'll see the result "TinyImage Compressor" pop up, then if you just click on the "Install" button on the right-hand side you'll be ready to go. Once we've done that we can jump back into our Figma file.

I've just got a handful of images in here that I'm going to show you what this looks like; if you just right-click anywhere, go down to "Plugins" and click on "TinyImage", that's just going to fire up the Figma plugin we just installed a minute ago. Okay, I'm not going to go through all the other features of this Figma plugin, I've got a few other video tutorials on our channel if you want to go through some other features. Today, we're just going to be focusing on file size targets. By default, the compression is based on percentages or a percentage based quality, but there's going to be times where you actually want to reach a certain file size target, a maximum file size for your image compressions. We can enable this feature by just clicking on the toggle called "Size target", so I've enabled that, and you can see here that it's changed the settings; instead of the quality based percentage slider, we now have an input field for a kilobyte value. You can toggle between these two, but for today we're going to be actually turning that on and seeing what that looks like.

The way it works is you essentially put in the file size target that you want the compression to reach, so if we just export these and get a bit of a baseline, I'm just going to actually turn that off for a second and I'm just going to export a few images and compress them to see what that file size looks like normally. We're going to compress these at 90% quality and see what that comes out as. The first one we've got us 700 kilobytes, 270 kilobtes, these will probably be similar; these are at 2x and this is at 1x. I'm just going to save those, and now we've got the baseline of our compression we might realize that we actually want these to be much lower or under a certain threshold that this quality isn't going to get us. 

If we just re-run the Figma plugin, we can either do that from the sidebar over here or by right-clicking as we did before, and this time I'm going to change the quality slider back to the size targets, and I'm just going to compare what these image file image file sizes are now. For example we've got the cherry blossom, and cherry blossom at 2x; that's 277 kilobytes, 745 kilobytes, 693 kilobytes and 2 megabytes; what I might do is I'm actually going to set a global size target for all these, I'm going to make it 500 kilobytes. This is going to set the default maximum file size target to 500 kilobytes, but what I can also do is I might want one of these images to actually be smaller than that, so I can say for this cherry blossom regular version; it's currently at 277 kilobytes, but I actually want that to go down to 200 kilobytes. I'm going to override the default and make that one 200 kilobytes, and the rest I'm going to max out at 500 kilboytes, roughly.

Now that we've set our default file size at 500 kilobytes and we've overridden this one image at 200 kilobytes, we can now click the "Export" button once again, and this time it's going to compress the images not using the quality, now you can see they're trying to hit these file size targets. This one's 500 kilobytes, which is the maximum target, and then the next one's 200 kilobytes. You might have noticed in the label in brackets it did say that this method is actually a bit slower than the regular quality method, and the reason for that is it has to do multiple passes of the compression in order to get the file size down to the optimal size. You'll notice this more with larger images; 2x retina ones with large dimensions, and these are fairly large, so that's 1700 pixels by 1100 pixels, and the version at 1x should be a little bit faster, but it's going to it's going to do multiple passes to get the exact optimal compression level in order for you to reach the maximum quality, but also get just under the ideal target. You're really getting pretty much the exact maximum you can get without losing quality, but still getting as close as possible to that target.

We'll just wait for these two to finish up and then we can have a look what they look like once we actually export the zip file and have a look at that. Again, the 2x ones are taking a little bit longer just because they are a bit larger, but the 1x one should be much better, and bearing in mind these are also taking longer because we're setting a much lower threshold as well. These are originally three megabytes and we're getting them down to 493 kilobytes in this case. Just a little bit longer there; I've just saved that zip file, so I'm going to open that one up, and if we jump into the folder you can see here if we actually compare the two exports. This was our previous export that we did a minute ago; those are the bigger ones bigger file sizes, but in here you can see it's actually hit that threshold of exactly 500 kilobytes for these ones, bearing in mind this this file size is slightly different to the one we we put in there, but it's trying to get there as as close as possible. These kilobytes here is actually slightly different from the kilobytes that are in the Figma plugin; we've got 201 kilobytes, there's a 500 kilobytes, and then we've got the bottom random one as well which has come out at 489 kilobytes. That's what that looks like there, so I'm just going to close those ones off. 

I just want to also note that the kilobyte compression only works for any image formats that are not PDFs; if you're trying to compress PDFs and wondering why you can't compress the PDFs to a kilobyte size, that's the reason. The kilobyte size is only for JPG, PNG, SVG, AVIF, WebP and that sort of thing; the PDFs unfortunately are only based on DPI, so if you do have a PDF export such as this one, you'll be able to choose between 72 DPI, 150 DPI and 300 DPI, and that will change the the quality as well, but you can use the size targets for any of the other file formats.

That's pretty much it. It's pretty simple, it's just a single toggle, the 
"Size Target" toggle, and again, you you might not need to use this all the time; this is really if you have a very specific use case where there's certain requirements for a project or file type that really do need to get under an exact kilobyte number, then you can use this feature, but otherwise feel free to continue using the quality slider, which is more just based on a quality ratio. You'll still get really good compression, you just won't get the exact numbers that you would with this brand new feature. 

I hope that's helpful, I know a few of you have been requesting this feature for a little while, so thankfully it's shipped now and you can use it as of today. I hope that it helps with some of your projects and some of your exports that you've needed this feature for, and until next time, thank you as always for watching, and we'll be back soon with more Figma tutorials just like this one.

---

---
type: tutorial
title: How to add dark mode styles to HTML email designs using Emailify
date: 2021-09-02T00:00:00.000Z
---

# How to add dark mode styles to HTML email designs using Emailify



#### Video Transcript

Today I'm going to be showing you how to add dark mode style overrides to your HTML email designs in Figma using the Emailify Figma plugin. 

The first thing we need to do if you haven't already done so, is go to the Figma Community and search for the word "Emailify", and if you hit enter that will pop right up. If you click on the "Install" button on the right-hand side, once it says "Installed", you'll be ready to go.

I'm just going to jump back into my Figma file, and if you haven't already looked at the other Emailify Figma tutorials that we have on YouTube, we've got another tutorial that shows you how to actually design these HTML emails in Figma and export them. This Figma tutorial won't be going over all those details again, and I'm assuming that you've already figured out how to design and export these HTML emails from Figma. This Figma tutorial is just going to be showing you how to add additional dark mode specific style overrides to that email design. 

To get started, we just have to right-click anywhere, go down to "Plugins" and click on "Emailify", and this is going to open up the Figma plugin that we just installed. As I said, I've already designed this email in Figma, but if you do want to add more components, or different components, or build your own; again, we do have other tutorials which go through that process. Okay, today we're just going to be looking at dark mode overrides; and what that means is we can actually specifically or choose different colors and overrides or settings for each of these layers and design elements, which will only kick in if the user is using a device to read their emails that's in dark mode. 

For example, if I wanted to ensure that this block here didn't come up as this color on dark mode, what I can do is just click on that layer, open up my "Settings" panel and down here at the bottom you'll notice a new section called "Dark Mode Overrides", and this is available on a bunch of different layer types you can apply this to: sections, columns, text layers, button layers, image layers; and you'll see they all have different types of overrides on them. For example, I'll show you what this looks like if we go to this block here and go to this column, we can actually apply a text color override to that column. Instead of being this sort of dark text, I can make it white text. I can put in the hashed HEX value for white text, and to give some contrast I'm going to also override the background color of the row by clicking on the row layer, and putting in a darker background color here; that's in the "Override Background Color" input. 

If I close that off and open up the preview by clicking the "Preview" button in the header, that's loaded up an HTML preview of our email, and you can see here that nothing has changed yet; the reason for that is we've got this new toggle up here which is called "Show Dark Mode Overrides", and if I click on that, you can see here it's now triggered that dark mode preview to kick in. Instead of the white background with dark text we've now got a dark background with white text. 

What we can do if we want to really tweak this is we can get down into the individual text layers as well, and we can actually override those individual layers on top of the block layer level. If I click on the "Settings" panel while I click on this description text, you can see here I can override that text color even further at that granular level. I'll click on the input and I might make this text just a little bit darker, so I'll make it it's a light gray, and it's going to reload the preview, and now you can see here instead of being white, which is a little bit too much contrast, I've just knocked that back a little bit to make it more of a light gray. 

We can go ahead and do this to all of our different elements here, and you'll notice that the image here isn't set up; the reason why that's not showing up is because I'm actually going to show you how to also swap out images. What we can do is if we click on any of our image layers, we can actually hide and show those image layers depending on if they're in dark mode. For example, I've got these two images here that I've created and they're versions of the same image, but one's knocked back a little bit in how bright it is, and the other one's just the regular brightness. What I'm going to do is I'm going to click on the regular brightness image layer, and I've got the toggle set to only hide this layer when dark mode is enabled, so the "Only Hide on Dark Mode" toggle is enabled on the regular brightness layer, and on the paired back brightness layer I've checked the "Only Show in Dark Mode" checkbox.

By default, both of these are turned off, but if I wanted to show both of these at different times, I can do that by toggling these. I'll show you what it looks like without the toggles first, and you can see what it looks like when we turn them back on. I've just turned off those "show" and "hide" toggles, and you can see here it's rendering both the images in dark mode and in non-dark mode, but if I click on the "Settings" panel and only hide the brighter one on dark mode, and only show the darker one on dark mode, if I refresh that preview you'll be able to see that in the regular email mode the brighter version of the image is showing, but if I toggle on dark mode it's overriding that image, so it's swapping out those images. This can be really handy if you're using images, or transparent images which blend into the background. For example, a logo; you could swap out a logo for a dark version or a light version on the different dark and light modes, and that's something that can be really helpful with your designs when you are thinking about dark mode in mind. 

Of course, we can go through all of these and change the background colors for all of them; I won't go through every single one, but just to give you a bit more of a feel of what this can look like, I've just swapped out the background color and text color for that section there. Of course, again, we can go down to a granular level and apply those at a per text layer basis, so I might make that description text a little bit duller, and that's going to kick in and just be a little bit less contrast. That's roughly what it looks like to enable the email dark mode style overrides in Figma, and you can apply this to all your different layers, and you can see what that looks like just by toggling it on and off and then tweaking it a little bit more as you go along.

The other thing that's worth noting is that these dark mode overrides will only apply to email clients that support it, so if we look at the caninemail.com website, which is a really good one to check out for what features are supported on different email clients, we can see here at the moment it's supported in across about 25% of all email clients. It's a relatively new feature, and at the moment you've got full support on MacOS and iOS in Apple Mail, you've got some support in different versions of Outlook on MacOS, Outlook.com, and iOS it's all supported. You've got some support with "Hey", the email client from Basecamp, and a couple of other random browsers as well. Be mindful that this is not supported across things like Gmail at the moment; hopefully that gets supported in the future, but for now I would really consider this to be more of a progressive enhancement. I would still try and design the emails to work well under normal dark mode circumstances but this just gives you a little bit of extra design control for those email clients that do support these dark mode specific theme overrides. 

That's what that looks like there; you can go through and change every element really if you wanted to in your Figma email design to optimize it for dark mode. It's worth being mindful of the fact that the dark mode preview is only showing you your dark mode overrides that you've added personally via the Figma plugin as well. What that means is this is not an accurate representation of the automatic dark mode styles that different email clients will include; email clients like Apple Mail or Outlook will actually automatically inject their own dark dark mode style sheet. That will automatically do things like invert the colors of the background and text, and try and do its job automatically to some extent, but these additional overrides that you add in the Figma plugin will basically override their dark mode overrides where it's supported. That's just something to be really mindful of in case you're wondering why the preview here is looking one way, but when you actually go to preview it in something like Apple Mail or iOS it's looking a bit different, so I hope that makes sense.

If you've been wanting to optimize your designs a little bit further, I know a lot of you have been wondering how to do this by adding dark mode to your HTML emails from Figma. Currently, this is the best option that we have to do those specific dark mode overrides, and as the support increases over time this will hopefully become more and more useful in the future to really making sure our email designs come out exactly the way that we want under dark mode and regular mode in all these different email clients in the future. 

Thank you for watching, I hope it's been helpful, and if you've been wondering about dark mode with your email designs and if you've been following along with the other Emailify Figma tutorials, I hope that if you've been wanting this dark mode feature you can now go ahead and try it. I'm really looking forward to seeing what everyone comes up with, and we'll be back very soon with more of these Figma tutorials. As always, thank you for watching, and we'll catch you in the next one.

---

---
type: tutorial
title: How to downsize Figma image fills to their layer size using TinyImage
date: 2021-08-22T00:00:00.000Z
---

# How to downsize Figma image fills to their layer size using TinyImage



#### Video Transcript

Today I'm going to be showing you how to downsize your Figma image fills in order to fit the content layer that they're actually being used on. This is going to optimize your image sizes, it's going to speed up your Figma file performance, and it's just going to save you a whole bunch of extra megabytes and image size that would otherwise be taken up unnecessarily.

The first thing we need to do to get started is just go to the Figma Community and search for the word "TinyImage", as we're going to be installing a Figma plugin to do this. If you type "TinyImage" into the Figma Community search, go to the "Plugins" tab and you'll see "TinyImage Compressor" pop-up. All you need to do is click on the "Install" button on the right-hand side over here and then you're good to go. 

I'm going to jump back into my Figma file here, I've just taken a handful of images using the Unplash Figma plugin; that's just a Figma plugin that allows you to grab stock images directly into Figma, you can just add them like this, and these are typically very high resolution images. You can see this one's 1280 by 1920 which is great if you actually want those images to be at that size, but very often you'll drag these images into your design and you'll actually end up rescaling them to be much smaller. 

For example, if we scale all of these down instead of being at 1200 or 1900 pixels, if we scale them all down a little bit to a smaller size, let's say in our design we actually only need them to be three or four hundred pixels wide because we're designing a mobile screen or something like that, the problem is it looks really good, it visually looks correct; we've got these 400 pixel width images, but behind the scenes the Figma image fill that we got from Unplash, the super large high res one, which is four or five times the resolution of this, is still actually being stored and loaded every single time in Figma. 

If you've got a lot of these, it can tend to slow the file down and you're just using up a whole bunch of space that you don't actually need. The way we can solve this is just by right-clicking anywhere, going down to "Plugins" and clicking on "TinyImage Compressor", the Figma plugin that we just installed, and to solve this problem we're going to be using a brand new feature called "Downsizer". I've got another tutorial on all the other features in this Figma plugin, but for today I'm just going to be focusing on the new feature of the Figma image downsizer. To get started, we just click on the "Downsizer" button in the header of the Figma plugin, and this is going to load up all of the Figma image fills in your Figma page. You can see in mine I've only got a few layers, and each of those layers only has one Figma image fill; if you have multiple Figma image fills it'll load those in, too. We can select them by either just un-checking the ones we don't want, or you can actually filter this really quickly just by clicking on multiple layers, and if they contain Figma image fills they'll get filtered down here, and that's just an easy way of filtering a couple of images if you don't want to do the whole batch. 

For today, I'm just going to make it really simple and do them all at once. Just to explain what's going on here, this interface basically just gives us one option; we can downsize Figma images to match two times the layer size; what that means is if our layer is 427 by 640, but the original image is five or six times that. What it's going to do is it's going to scale down the original Figma image fill to be two times the size of this content layer and it's going to proportionately shrink that down to make sure it's only a maximum of two times this size. It's going to keep that retina 2x sharpness, but it's not going to be the original image which is just way, way too big.

For this case I'm just going to leave it at that, you can actually uncheck that and that will downsize Figma images to 1x of the layer size, so it would downsize Figma images to exactly match the 427 by 640 proportionally, but it's not going to look as sharp. For now, I'm just going to leave it checked at 2x, and I'm going to click on the "Downsize Figma Fills" button; I'm just going to do all the images and click on "Downsize Figma Fills @2x", so you can see here it's now going through and downsizing all of these six images, and we can see here, what's going on is we've got the original file size, so that's the original file size from Unplash, and then we've got the a list of optimized file sizes. You can see that it's gone ahead and it's downscaled all of those images; it's replaced the Figma image fills, so these are brand new downsized Figma image fills that have been replaced behind the scenes. 

You probably didn't notice them briefly flashing, but they were flashing and getting replaced; and if we zoom in, so if we zoom to 100 percent, they're still retina sharp; they're still very, very sharp. The reason for that is it's scaled proportionally to be exactly two times the size of the content layer. Even if we zoom in to 200 percent, it's still extremely sharp at 200 percent as well because of that 2x retina scaling. There's also a little bit of compression going on as well behind the scenes, so not only does it downscale the Figma image, it also does compress the Figma images very slightly; just enough to save a bit of image data without being a noticeable quality difference. You're really getting two sides of optimization there; the Figma downsize itself of the image dimensions, and also a bit of image compression going on behind the scenes, too. We can see here just from running that on these six images that we've saved a total of four megabytes. You can see all the originals here; for example, this one was one and a half megabytes, now down to 433 kilobytes, this one we saved 80 percent; so at least 70 percent saved for all six of these Figma images. You can imagine what kind of savings you get at a much bigger scale.

If I jump into a different Figma file, I'm just going to use this other design that I duplicated from the Figma Community. I'm just going to run the TinyImage Figma plugin on here as well, and I'm going to do exactly the same thing; I'm going to click on that "Downsizer" button once again, and that's going to load up all of the Figma image fills that are found on the page. Some of these might actually have multiple Figma image fills behind the scenes, too. If you're struggling to see what image actually relates to, or what part of the design, you can really quickly jump to any of them as a preview just by clicking on the little image icon here. You can see here that this image relates to that Figma fill, and I can keep jumping around if I want to preview what all these different fills relate to; that's just a quick way of doing that.

I'm just going to leave it at 2x, and I'm going to click on "Downsize Figma Fills" at 2x, and once again it's going to go one by one through every single one of our Figma image fills because I've left them all selected, and you're going to see all of the savings for all of these images. In particular you can see that these layers here are actually very small; the size of these layers compared to the original image is quite different; this is 164 pixels by 164 pixels, but the original image behind the scenes there is much, much larger, as we can see by looking at the statistics over here; this Figma image has been downsized to be 200 kilobytes, but that's from an original file size of three megabytes, so that's a 93 percent saving just from that one layer alone. 

Again, the more of these larger scale images you've got in your design, and the more that they're actually being shrunk down, the more you're going to save; as a concrete example of that, you can see just from this one page alone, which actually isn't a super large page, that's actually relatively small, there's only a handful of frames here; but just from optimizing and downsizing this one page alone, we've saved 44 megabytes in total. There's not even that many Figma images on here, it's barely even scrolling further down the list, but again we can see that we've saved a minimum of 90 percent on all of these images, because they're more vector based, and they're much more optimizable. 

Just as another example, I'm just going to do one more landing page and I'm going to re-run the Figma plugin by right-clicking, going down to "TinyImage Compressor" again, and this time I'm just going to show you what it looks like with the 1x option. If I click on "Downsizer" and load up all the Figma image fills, this time you can see that we've got some very large target sizes, and I'm assuming the images behind the scenes are actually even bigger, but this time instead of doing 2x, I'm going to do 1x just show you what that looks like, too. I'm going to un-check that click on "Downsize Figma Fills" at 1x, and this is going to downsize all the Figma image fills on the page to be 1x of their of their size. You can see here it's just going through and doing all those, and because these are already quite large already, these are fairly large frames, the 1x option in this case is probably going to be fine because the images are so big. Usually, if you've got smaller images you want to keep the 2x option turned on for sure, but sometimes if you've got a really big image and the image is slightly bigger than this one, but it's not 2x bigger the original image, then maybe the 1x option is actually going to be better for those sorts of scenarios. You can see here they're still looking quite good even with the 1x option, but typically you'd basically want to keep the 2x option turned on anyway, but again, this is just showing you that you do have that option if you did want to use it. 

That's essentially the overview of how to downsize and optimize images in Figma on your canvas. You can use the TinyImage Figma plugin's downsizer function to do this, it's brand new plugin featur,  and I think it's going to make a huge difference to performance, and a huge difference to file sizes in your Figma files. If you're using a whole bunch of images, it's going to mean your Figma files are going to open up faster, they're going to be smoother to zoom around in, and also when you're doing exports sometimes, if you've got really big images, the exports take a while to load; and if they haven't loaded completely when you do go to export a PDF or export certain images, sometimes you can actually catch them still trying to load in the background, and you'll get a low resolution image. I'm not sure if you've ever come across that, but it actually happens more often than you would imagine, especially in files with lots and lots of Figma images, hundreds of megabytes worth of images trying to load up in the background; this can unfortunately happen more than you would want in bigger Figma files.

As always, thank you for watching, and I hope it's been helpful if you've been trying to optimize your Figma files for speed or performance, or downsize your Figma images in the way that we've seen in this Figma tutorial today. We'll be back soon with more Figma tutorials just like this one, and thank you again for watching.

---

---
type: tutorial
title: How to add animated GIFs from Figma to HTML email exports using Emailify
date: 2021-07-12T00:00:00.000Z
---

# How to add animated GIFs from Figma to HTML email exports using Emailify



#### Video Transcript

Today I'm going to be showing you how to include animated GIFs into your HTML emails from your Figma designs using the Emailify Figma plugin.

The first thing you need to do is just go to the Figma Community, search for "Emailify", and if you click on the "Install" button next to the result under the "Plugins" tab that'll install the Emailify Figma plugin, and then we can get started.

I'm just opening up a new Figma file, and I can run the Figma plugin just by right-clicking anywhere, going down to "Plugins" and clicking on the "Emailify" item, and that's just going to run the Figma plugin that we just installed. The first thing we need to do is just create a new frame, so I'm just going to call this one "GIF Email "Test" so we can do a test, and I'm going to click on "Add New Emailify Container"; this is going to add a new frame to your Figma canvas and that's going to allow us to include these content modules which I've covered in some other tutorials, if you want a deep dive on those, and you can also include custom modules as well. 

What we can do to add GIFs is, I'm going to run through the few different ways that you can include GIFs in your Figma email design. The first one I'm going to do is the hero background; you can use a GIF as a hero background, so if you find one of the content modules which are a "Hero Background" type; for example, this "Full Width Background Image" is one, there's also other ones like the "Hero CTAs", these will also work. What you can do to include GIFs on those is just click on the frame; it'll add this brand new component, and you just want to click on that component, and where you've got the "fills" on the right hand side, you want to click on the image fill, and you can see here it's got the default one, but we want to actually put our own one in there. 

I'm just going to grab a GIF that I downloaded from the internet and drag that into the Figma fill, and that's going to include that as the background fill. That allows us to keep all of the text as rich text, and it allows us to have the GIF as an actual background image. This background is a little bit lighter, so what we can do is we've already got a fill on there, a transparent fill that we can increase that value. It's a bit darker if you want the contrast to be a bit better, so you can include that just make it however you want, and that's going to include the fill on top of the GIF when it gets exported. That's the first way you can use GIFs. 

The second way is just by using them as inline images. For example, if you get any of these image components; I might just add this one, and what you can do is the exact same thing. You want to drill down into the Figma image layer inside of the column, you've got the image frame, and again we've already got an image fill set, but we obviously want to replace that and add our own one. I'm going to do that, and I'm going to add this other GIF; I can add that GIF in there and I can do another one. I'll just add another frame, do the exact same thing; I'm going to click on the image fill, and I'm going to drag a GIF in there, and that's adding another GIF. 

The third thing I can do is I can actually create content modules or inline content images, which allow us to just drag and drop the image onto the content as well. Let's say I've already got a text component for example, so I can click on that, and while this doesn't have any any images yet, what I can do is actually drop an image on there. If I want to make this a little bit narrower and drop a brand new GIF in there, I can just drag that GIF straight into the frame, and if you have a look on the left hand side you'll see that inside of the content column the GIF has been added as just an inline GIF. It's not set as a frame background, it's not set as a component background, it's just a layer in and of itself. That's the other way that you can add GIFs in there, and we can move that around.

There's there's benefits to doing each of these, so I'll run through those really quickly. The first thing to know is that you can apply any additional fills on top of any of these; for example, if I wanted to add an overlay to this GIF image, I can click on the "plus" icon next to the Figma fills click on that. I can do things like add opacity color with some opacity, I can create a gradient, I could do a colored gradient, so we could do something like that and that would allow a static gradient on top; you can do that, and when the GIF gets exported the gradient will actually be included in the GIF. That's one thing that you can do with any of these GIF images. 

The advantage to having a frame, so for example, these ones are actually frames rather than an image layer, and the advantage to having a frame is you can do things like add other layers inside of the frame. I'll show you what I mean by that; if I click on this image layer I'm going to add a fill just to make it a little bit more contrast. I'm going to add a fill on top of that, but then now that this is a frame I can actually add layers within that frame. That allows me to add things like text, so I can add text, I can say "Sushi Sleeping"; I can put a little text overlay on there. You could include other static images on top of that, and that'll all get included in the export. 

The other thing that you can do with something like the hero; we've got this hero background, the other thing that we can do there is also add static images to that, too. What I can do is I can maybe copy this as a PNG, so I'm just going to copy that layer and I'm going to jump into my hero, and I'm going to paste that. I'm just going to scale that down and move that to the top, and maybe I'll put some border radius on there. What that's going to do is, it's going to include this as an image layer inside of the hero background; what that means is it's going to leave the background image as an animated GIF, but you can also include this image as its own image element. The difference between this method and the frame method is that it will still get exported as a single image, whereas these two will get exported as two different images; the background image on the hero will be exported as a GIF, and the image here will be exported as its own image on top of that. 

If that doesn't make any sense, I'll do an export now just to show you what I mean by that, and you'll actually get a sense of what this all looks like when it gets exported. The other thing to quickly note is that this will not show up in the preview; if you click on the "Preview" button in the header, you'll notice that the GIFs don't actually get rendered. We've got all of our images as we expected, but they're all static and that's expected; you basically have to render out the GIFs from Figma, and this takes a little bit of time. The preview at the moment doesn't actually do this automatically, but the way that we can see it in the export is just by clicking on the "Export" button, and I'm just going to click on the "Export to Code" button and that's going to now export our email from Figma to HTML and it's also going to go through and export any GIFs that it picks up on that we just added. We've added four separate GIFs, so it's going to go through detect all those GIFs render them out. 

That's just finished, so what we need to do is just click on "Download your .zip file"; if we click on that, I'm just going to save it to my desktop, and once that saves,we can actually go ahead and open that in our browser. I'm just going to double click on the zip file, open up the folder, and I'm just going to drag the preview onto my browser. There we go now, you can see the GIFs actually being rendered out from Figma to HTML. 

We've got our background GIF with the opacity layer included on the top, and we've got our rich text over the top, which is real selectable text; it hasn't been included in the GIF. We also have our image; this image is its own image that's been exported to sit on the top of the hero, and the hero is a very special kind of element because it does allow that real background image; most of the other normal rows don't allow that, but the heroes do. Then we've got our other GIF here; this is the GIF that we included the overlay fill on, and the embedded text; this text is embedded in the GIF, it's not sitting on top, it's not like this rich text that's all embedded in that GIF image. This is the GIF that we left as is, so this was just completely untouched, we didn't add any fills, we didn't have any text layers, anything like that. Finally, we have our inline image; this was the image that we dragged and dropped directly onto the folder onto the Figma file, and that's included the gradient on top as well; we've got the gradient, we've got the normal one, we've got the opacity and we've got the hero. 

We can also do things like scale this image down; by default, it will just go to 100% width. I've covered this in some other Figma tutorials, but just really quickly, what you can do is you can click on that image, click on the "settings" icon and you can actually override those widths and heights. That's what that looks like there; you could put in something like 44 by 44 pixels maybe, and that would export it as 44 by 44; or if you want to do 103 by 103, as it is now, you can do that; you can also just uncheck the "100% Fluid Width" toggle and that will work as well. 

That's basically what it looks like. The GIFs all get included, and these are directly from Figma. You don't have to do any extra work to upload them anywhere else to get them exported from Figma to HTML emails, but of course, you will have to upload these as images online somewhere if you're sending them via an email; you'll want to use something like a MailChimp, Klaviyo or Campaign Monitor email service provider. However, this tutorial is just basically just going through including the GIF from Figma to HTML, how they work, what the different types of GIFs are, and just running through that specifically. This has been a highly requested feature, and we just shipped this recently, so I hope that you enjoy it. If you've been wanting to include Figma GIFs into your HTML emails and not need to manually replace it in the HTML, as I know has previously been the only way to do it, then this should save you a lot of time including those Figma GIFs. As always, thank you for watching, and we'll be back soon with more Figma tutorials just like this one.

---

---
type: tutorial
title: How to create custom components for HTML email exports in Figma using Emailify
date: 2021-07-11T00:00:00.000Z
---

# How to create custom components for HTML email exports in Figma using Emailify



#### Video Transcript

Today I'm going to be showing you how to create custom HTML email components in Figma using the Emailify Figma plugin.

The first thing we need to do if you haven't already done so, is just go to the Figma Community and search for the word "Emailify", and if you pop that in and click on the "Plugins" tab you'll see this result pop-up. All you need to do is click on the "Install" button on the right-hand side, and once it says "Installed", we're ready to get started.

What you can do is just open up a brand new Figma file, and to run the Figma plugin you just right-click anywhere, go down to "Plugins" and click on "Emailify HTML Builder", and this is going to open up the Figma plugin that we just installed. 

The first thing we need to do is just give the email a name; I'm just going to call it "C"omponent Test", just for this tutorial, and I'm going to click on "Add new Emailify Container", and that's just going to add a brand new empty frame to our page. It's a special kind of frame that allows us to add these components from the Figma plugin, and then we're also going to be able to add our own custom Figma components which I'll show you in a moment. 

If you've already seen this tutorial in another video, you'll know that you can basically just click on any of these components, you can go to different categories and immediately create those components; these are totally customizable these are native Figma components. You can customize them, and then you can reuse them as instances, which means that you can change anything in there; if you wanted to change the font size of the body, you could do that, and it would update across all of your instances. That's how you can do it, but if any of these components that you've got in the pre-built component section aren't what you're looking for, we can actually create a custom one by clicking on the "Custom" tab in the menu up here.

If you click on "Custom", you'll see it comes up with this little call out saying that we don't have any custom components yet, but what we can do is click on this "Create New Component" button, so I'm going to do that now and that's going to bring up the custom component builder. This is a brand new feature in the Emailify Figma plugin, and what it allows us to do is customize our custom Figma components using this interface. What I can do is essentially grab any of these elements; if I wanted to grab a title tag element, I can drop that in there, I can drop in some body copy, I can add a button. You can see up here we've got some layout options; at the moment it's just defaulting just a single column, but if I want to make that into a double column I can just click on double column, and that will add a brand new column here. I can do things like add an image to that second column, and you'll get a sense of what this looks like if I just create this component now. I'm just going to call this one "Split Image Component", and I'm going to click "Create & Insert New Component", and you can see there it just created a brand new Figma component under the custom components category, and it's also automatically added into our Figma design. 

This is completely customizable, as the other ones were; it's a native Figma component, so you can modify that content, you can go ahead and still change things around in here, you can add images, and update padding, all that sort of stuff. We can update that, and that will be reflected in there, and again, you can duplicate that and create an instance and that will allow you to easily keep those changes in sync across your design or in other emails as well. 

There's a few other things we can do here, we can edit the component; we can click on this little "settings" button and that's just going to bring up the component that we just added. What I can do is I can move that around a little bit, add new things to it, so I could add some social icons down here and then if I go ahead and update that by clicking on "Update Saved Component", you can see here that it's updated the component. It's worth noting that that will not impact anything you've already added to the Figma page, it's just going to update the saved custom Figma component for you to add in the future again. If you click on that image that little icon, you'll see that it's added our brand new updated component.

The alternative way of doing this if you don't want to override the original component, but you want to use it as a base for a new component, is you can click on that "settings" button again, and in this case I'm going to do a triple layout just to show you a bit of a different example. In this one, we'll do a triple layout; I'm going to move this over there, I'm going to do it kind of like a right aligned one and basically just flip a few things around. In this case, I'm just going to add another bit of content in the middle, and to the left, and I'm just going to make that centered and that right aligned, so you can change the alignment of each column down here as well, and the vertical alignment of the row up here you can change. In this case, instead of clicking on "Update Saved Component", what I'm going to do is instead create a new name; I'm going to call this "Triple Component", and I'm going to click on "Create & Insert New Component" (instead of "Update Saved Component"). If I click on that, you'll see here that it's created a brand new component; it hasn't updated our original one, it's left that intact, but we were able to use that as a base to create a brand new "forked" Figma component, I guess. 

That's added it to the page down here as a brand new Figma component, and it's left the other ones untouched. Again, you can go in there and edit that one, too. For example, if I wanted to make that, let's say, bottom aligned (as far as the row goes), I can do that. If I click on "Update Saved Component", you can see here it's updated the saved component, it hasn't modified the one we've already added to Figma, but I can now add that as a brand new Figma component by clicking on it. Now it's bottom aligned, and of course, you can update these things inside the component itself. If you wanted to do a different alignment, you can change it in here just by clicking on the column; you can see you've got the columns here and I can change that in my Figma settings, and update that manually, too. That's all all possible in there, and these are totally customizable; it's just to serve as a bit of a base for brand new Figma content components.

If we add another one, I'll just show you a few different alternatives. We can do things like add a "hero" component; this allows you to have a real background image with rich text content, or rich text elements over the top of it. If we click on that one for example, and then we add a title, and a body, and maybe a button, just to keep it simple; I'm going to center align that, I'm going to call it "Custom Hero", and I'm going to click on "Create & Insert New Component", and you can see here it's created a special "hero" Figma component; you can see a little hero emoji, and what that means is it's effectively going to let you add a real background image. If we open up that fill, you can see here that is an image fill, so you could drag a brand new image onto that fill and that would allow you to have a different background image, and of course you can customize this text, and the colors, and spacing, and fonts and everything that you need to in there. 

We can actually see what this looks like just by opening up the preview feature of the Figma plugin. I'm just going to move this up to the top just to give a bit more of a preview. What we can do is click on the "Preview" button in the email if I header, so if I click on "Preview", that's going to generate a real HTML preview in real time inside the Figma plugin. This is just before we export the final HTML, so you can get a sense of what it's actually going to look like. I can update that to desktop sizing, and you can see what that's going to kind of look like. You can see there it's basically matching up as you'd expect, but this is the real HTML that's going to get exported, these are real buttons, real icons, and you can customize these on the page and then refresh the design by clicking the "refresh" icon. You can go ahead and also add mobile updates, so if you click on the little "settings" icon after clicking on any layer, you get a whole bunch of different options. If I wanted to optimize this for "iPhone 12" and I noticed that something needed to be adjusted, I can open up the settings, I can click on either a row, or I can click on a column, I can click on a text layer; and that allows me to do things like override the font size on a mobile device, update the line height, override the letter spacing, update the alignment; I can do all these things. I can hide it just on mobile or desktop; so you can basically click on any of these elements, and depending on what the element type is, it'll automatically bring up these options for you. You can add things like the link, so this Facebook icon you would want to paste in your Facebook url there and that would automatically include it in the HTML export. Those are just normal features, they apply to the regular content components as well, so you can click on those and you get the same options, but you'll also get them with your custom Figma components that you've added in, too. That's what that looks like there, just in the live HTML preview. 

The other thing you can do is, there's another special type of component we can create; there's two ways of doing this, but you can basically add custom HTML or custom code into your components as well. I'll show you the first version of that just up front; the first way we can do that for example is if we open up, let's say, our existing Figma component and we want to add some code into that component, what we can do is we can drag this code element, drop it into here and I'm just going to click on "Update Saved Component", and if I click on that component to load it in what you'll notice here is you've got a new special text field with a little programmer emoji, and this is actually going to allow us to create custom HTML. What I can do is I can either paste or type custom HTML, and for example I'm just going to add the most basic example of this just to show you how it works. I've just put in a really basic table, so I'm going to click on "Preview", and what this is going to do is it's going to render that HTML for me in here. That is custom HTML being rendered from the Figma text layer; that's pretty cool, because it means you can completely customize the HTML that gets injected into any content block or any column. Of course, this is a very lame example, it's just a "hello" but you could add effectively anything you wanted onto there.

What you can also do, if you click on the email frame itself; if you click on click on that top level frame and click on the "settings" icon, what you can do is you can actually inject CSS rules in here as well. I'll just make that a little bit bigger so we can we can see what that looks like. Let's say I wanted to add some CSS to any element that has a class name of "blue"; let's say I've got "blue" and I wanted that to be have a color of blue; I can do that quite easily, and this is just a very basic example. I also might want the font size to be a bit bigger, and I might want to also set the font family; I could set that to "Arial" and have a fallback of "sans-serif"; this is just a very basic example, but what this is going to do is it's going to inject these CSS rules onto any element, inline element, that you've added in an HTML tag. I'm going to grab that class, and I'm going to get the "blue" class and down here. I'm just going to clean up these other Figma components for a second so we can clearly see what's going on, and I'm just going to jump into my code block again, and this time I'm going to add a class name to my "td" tag and it's going to be a class of "blue", and I'm just going to refresh that, and you can see there it's actually injected that class onto the element; it's rendered the class name, and it's injected the styles that we added in our settings panel on here. That's that's pretty neat; what we can also do is inject mobile CSS rules as well. This might seem counter-intuitive, but if you wanted to do the "blue" class and actually override that to be "red" on mobile you can do that; these mobile rules will only be applied on mobile, you just have to remember to add the "!important" flag to mobile because it needs to be overridden. Now I've added, that I'm just going to refresh, and you can see it's now red, but it's only going to be red on mobile; on desktop it's still blue, sp you can add different rules for your CSS classes using that settings panel, you can also just directly inline those class those styles onto the element, too. 

If you wanted to just jump in here and do some inline styles, you can totally do that as well; you could put those styles on there and that would also work. You could do something like letter spacing, and you could set that to 10 pixels or something like that, and if you refresh that, you'll see the letter spacing pop up. You can actually include those styles directly on that component, so that's quite handy; you can also do things like if you're using MailChimp, or Campaign Monitor, or an email service provider (ESP), what you can do is you can add merge tags. You could do custom text or custom messaging, which means you could do things like placeholder tags. I can't remember the exact syntax, but it's something like "FNAME" or something like that in MailChimp, it looks something like that. What that will do when you send the email is it will swap out that "FNAME" with any placeholder; having said that, you could also use that on your normal text layers. You can do something like that and MailChimp will also swap out that for the real first name in your list. The other thing you can do is templating tags; if you're using a templating language in your email system you could do things like "if" statements. If "something" equals to "something", that would also let you let you do something render some different content in there depending on those conditions. This is totally fake syntax, but this is just an example of what you could do. 

The other neat thing at a much larger scale that you can do with this code feature, which I'll show you now, is let's say you've got a few different components; let's say we've got a hero, and let's say we've got two different heroes, and maybe some extra content. What I can do is I can actually have two different heroes, I could have first hero which, is the primary one, and then I would override maybe the second one the instance, but what I can actually do is create custom code wrappers as well. If I jump back in to my new component builder, and this time I'm going to select a brand new layout that we haven't seen yet; that's the custom HTML block. This is different from the HTML element; the HTML element will allow you to add code inside of a content column; the one we're going to add now is actually adding a content code block in between rows. This will allow you to do things like wrap rows with code, or actually write complete blocks of code that kind of sit in between rows that aren't contained within the structure of the content. I'll show you what I mean by that.

Again, I'm just going to do some fake syntax, but it would be something like if let's say "points"; let's say you have a points system or something for your e-commerce store. Points is greater than 30; let's say that's a tag, so I'm going to do points open; I'll do points open, it's created that as a custom Figma component, and you can see down here it's added as a custom HTML component. What I can do is I can wrap that here; I can do if points equals to 30, I can add a new one; I can do, let's say, an end statement. I'll do "end if" or something like that, and "end points". I'm going to put that at the bottom, and then maybe I'd my syntax language also has like an "else"; I might do "else" here and I could drop that in between those two, and what that would do is it would render these little things of code as raw text or raw code. If we open up our preview, you can see here that we've got raw text. We've got "if points is greater than that 30", load this one, "else" load that one; then "end" the conditional down here. Again, these are totally fake conditionals but your email service provider would have conditional logic that you can paste in as HTML, and you could create these kind of dynamic blocks using that method.

Finally, the other thing you could do, as I mentioned a minute ago, is you could have something like this inside of the rows, in between the rows. If we do a brand new component, and we'll say "Custom Table Block" or something like that; paste that in there, you can see the code getting highlighted in there as well. You could basically paste an entire table layout, and that would get injected in between any of these rows. You would have to probably also add a wrapper just to constrain the width of that table, because by default it'll basically just be sitting full width, so you could add some widths and stuff like that but if you really wanted to add a full block of HTML anywhere in your email, you could totally do that. That's kind of the different options you've got with the custom code block. Of course, these are reusable, so I could just click on "else end if", and easily get those code blocks added back in as reusable pieces of code. That's really easy if you need to create a bit of a library of templating language blocks, you can certainly do that and have them saved in here. You can edit them as well, just like the other ones, too. 

That's basically a rundown of this brand new feature, the custom component builder feature, which allows you to create custom email components in Figma, which will then be rendered out in HTML email format. Of course, when you do want to export this to a real HTML email, all you have to do is click on the "Export" button, you can change this just to "HTML" if you don't need "MJML", that's a different kind of templating language, and you can put in your subject line, you can put in some custom pre-header text, and all you have to do is click on "Export to Code". I'm just going to click on "Export to Code", and this is going to export my email design from Figma to production ready HTML. All I need to do is click on "Download your zip file", and I'm going to save that to my desktop, unzip the zip file, and in my folder you can see here we've got a preview, and inside the "component test" folder, which is the name of our email we've got our images and we've got our HTML. I can basically just open up the preview page first, and that's going to give us a preview of both sides at the same time; that's just a really nice way of getting an overview. We've got our terrible looking code custom code, styled code, down here; but you can see everything's been rendered from Figma to HTML as you'd expect. We've got the HTML, all of our buttons, everything like that, and the mobile view is looking pretty good as well.

I think that's basically all you need to know to get started with this. Feel free to run wild with this custom Figma component builder; I just showed you a really basic example, but you can basically go as far as you want with it. You can you can add as much or as little to each of these code blocks as you want, you could create a huge massive long single column, or double columns, or you could just create multiple columns that you use kind of in between other predefined columns or components. I think this is going to be a really nice feature to build out custom Figma component libraries that you can use ongoing. If you design these custom components, you can kind of store them in your Figma component library, and they'll also appear appear as assets over here. You can actually drag those from the Figma assets panel directly into your Figma email designs as well, so that's just another way of accessing those if you're using them in new Figma files.

I hope that's been helpful. This was a big feature request from a lot of you, and we're more than happy to ship it, because I think it's going to be really useful. I hope you enjoyed this Figma tutorial, and I'm really looking forward to seeing what you build and design with this new feature. Until next time, thank you as always for watching, and we'll be back soon with more Figma tutorials just like this one.

---

---
type: article
title: Long mission, short hype
date: 2021-07-04T00:00:00.000Z
---

# Long mission, short hype



>“Y'all know me, still the same ol' G<br/> But I been low key.” 

— [Dr. Dre](https://www.youtube.com/watch?v=QFcv5Ma8u8k), Forgot About Dre

Besides posting new feature updates on our <a href="https://x.com/hypermatic" target="_blank">Twitter profile</a>, announcing brand new plugins via our email newsletter, and writing articles on this website, we haven't really posted much about what's been going on here at Figmatic since our <g-link to="/articles/from-zero-to-one/">2020 end of year update</g-link> back in December.

 Now that we've just hit the half way point of 2021, today seems like a good time to write a bit of an update here.

### 3 years ago (July 4th, 2018)

Before talking about 2021, I thought it was worth taking a pause and looking back to keep things in perspective. Exactly 3 years ago, the DesignOps Melbourne meetup that I used to co-run with my homie Ch'an Armstrong hosted a  [design-ops-melbourne-v0.0.5_figma](https://www.meetup.com/en-AU/DesignOps/events/251847136/) July 4th Independence Day themed event, with special guests: cardboard cutouts of Will Smith and Jeff Goldblum. 

We had many of the 100 attendees at the meetup bring their laptops and do a live "swarm" in Figma as part of the main talk called [Why Figma will be remembered as a genre defining classic](https://www.youtube.com/watch?v=rokAQA5Takg) given by my friends Scott Moselen and Marty Coghlan. 

I also gave a lightning talk called [Life After Sketch – Featuring The Notorious F.I.G.](https://www.youtube.com/watch?v=7s5ZRYfI2X0). In the talk, I touched on a few trends that I saw continuing into the future, and why adopting Figma was the best bet for that future, and how you could make this happen at your company.

It's easy to forget, but back in 2018, using or advocating for adopting Figma was still somewhat of a fringe view in most companies; at least down here in Melbourne. It was a time when many companies had only just finally made the switch from Photoshop to Sketch, and the idea of doing that all again to another relatively new/"unproven" design tool was not something that was welcomed with arms wide open.

One only needs talk to any designer today in 2021, or keep track of the annual [Design Tools Survey](https://uxtools.co/survey-2020/) to see how radical and enthusiastic the shift to Figma has been in the years since then; especially with COVID-19 accelerating the trend of remote work and collaboration inside teams.

### The last 6 months

The reason for looking back to 2018 is because it's always important to ask yourself if you're correct and just too early, or if you're actually just wrong. 

When Figmatic was founded in 2019, the idea of building a startup based around Figma plugins had not been tried or validated yet. It was a pretty slow start, but after the first year, we had 60,000+ active plugin installs; today, we have 160,000+ active plugin installs. Even though this total number of installs is spread over 10 different Figma plugins, it has been very encouraging to see that people seem to be into the products that we're building.

We are a 100% self-funded company, which I still believe is an approach that will be sustainable for the long term in our case. I understand that this isn't a super popular decision in the startup space, where raising venture capital is almost a "todo" item on the founder's checklist, where it's not an "if", but "how much and how often?" to raise capital. I'm certainly not against venture capital, and I think it does make sense for many companies; especially where scaling fast or having network effects is critical to the make the business work.

While it might not sound as as cool as saying you've just raised $X million from firms "A, B and C", this was a very deliberate and important decision for me personally, because it means there are zero external pressures from investors or third parties. Essentially, it allows us to take risks and make decisions that are all about creating value over the long term. We never want to be in a position where we have to compromise on our integrity in order to pursue short-term growth for investors, at the expense of the things that matter most: our customers, products and mission.

This is partly why you don't hear much from us very often. We are not "out there" constantly demanding valueable time and attention from you by hosting webinars, having endless meetings, attending conferences, releasing free e-books, chasing "growth hacks", being on Twitter 24/7 or doing anything else to try and hype up what we're building. First of all, we're too busy actually working for any of that, but more importantly; none of that has anything to do with our mission, which is to reduce the distance between design and production closer to zero. 

I believe that focusing on building great products that save hours or days worth of time for our customers, coupled with making it really easy for anyone to discover and use them, is the best shot we have at making a real change in some of these legacy workflows. So, it's no surprise that the last 6 months here have been laser-focused on building the best Figma plugins, and consistently shipping things that add _real_ value to our amazing customers. While it sounds boring, I believe this is the best way for us to generate long term growth and value, both for Figmatic and our customers.

Since the last update in December 2020, we've released a brand new Figma plugin called <g-link to="/emailify/">Emailify</g-link>, launched our <g-link to="/bundle/">Pro Bundle</g-link>, published a collection of free <g-link to="/templates/">Figma templates</g-link>, had hundreds of conversations with our customers, and shipped dozens of new features and updates  across all of our Figma plugins.

Figmatic is still a 7 day a week, ~12 hour per day startup. As I mentioned in the previous update, I personally don't subscribe to the idea that you can get away with working for a few hours per day if you just really only focus on the important things. Instead, I believe by having hyper-focus on the important things _and_ spending more hours on it, you get a way better outcome than the approach with less absolute hours.

Working harder and/or longer hours has got a bad wrap in recent times. While it's certainly important to stay healthy, get good sleep and spend time with people you care about or with your hobbies, there is certainly something to be said for working hard on something that you truly enjoy. 

>“But you see," said Roark quietly, "I have, let’s say, sixty years to live. Most of that time will be spent working. I’ve chosen the work I want to do. If I find no joy in it, then I’m only condemning myself to sixty years of torture. And I can find the joy only if I do my work in the best way possible to me. But the best is a matter of standards — and I set my own standards.”

When you have a clear view of the future and what you know needs to be built, then the most important thing is getting there as quickly as possible. By removing everything that's unnecessary (meetings, distractions, focusing on vanity metrics etc) to stay focused and work more hours than you would in a "normal" workday (provided you're still actually productive), theoretically, one can move twice as fast towards that future.

### The next 6 months

The list of upcoming features and updates for all of our Figma plugins is exciting. Every single day here is spent focused on building more of what both we and our customers believe are the highest priority on any given week for our plugins. Just in this last week alone, we've built a browser extension for our Pixelay plugin, shipped a couple of dozen features to our Bannerify plugin, and published a bunch of updates to a few of our other plugins.

In addition to these daily and weekly updates to our existing plugins, we're also focused on developing brand new products in parallel, which will be released in the future and improved over the long term. 

So, looking towards the future, I'm happy to confirm that we've had another brand new Figma plugin under development since last year, and it's shaping up to be one of the coolest we've released so far. As with our other plugins, it fits firmly with our sole mission of bringing the distance between design and production closer to zero.

Lots of the learnings that have come from building all of our other plugins have helped direct this new plugin. There was also a bunch of time dedicated early on (before writing code) to think deeply through the philosophy behind how this new plugin will go about tackling some of these problems that it's being designed to solve.

Outside of continuing to update our existing Figma plugins and help our customers improve their effectiveness every day, the big focus for the rest of this year will be this brand new plugin. If it's half as good as I think it can be, then you're really going enjoy using it as part of your workflow.

So just chill, 'til the next episode.

---

---
type: tutorial
title: How to export clickable interactive PDFs from Figma using Pitchdeck
date: 2021-05-09T00:00:00.000Z
---

# How to export clickable interactive PDFs from Figma using Pitchdeck



#### Video Transcript

Today, I'm going to be showing you how to export a clickable interactive PDF directly from Figma using the Pitchdeck Figma plugin. 

The first thing we need to do, if you haven't already done so, is jump into the Figma Community, search for "pitchdeck", and you'll see a result called "Pitchdeck Presentation Studio" pop-up. If you haven't already installed it, on the right hand side over here, there'll be a button that says "Install"; if you click on that, you'll see it change to say "Installed", and once you see that you can jump back into your project and we can get started. 

I'm just using a simple presentation deck design I've taken this from the Figmatic templates website, if you go [https://www.hypermatic.com/templates/](https://www.hypermatic.com/templates/) you'll be able to grab some free Figma presentation templates from there. I'm just using the "Wellness" template, which you can duplicate from the website if you want to follow along with this tutorial, or you can use your own deck and do it that way, of course.

The first thing we're going to do is just right-click anywhere, go down to "Plugins" and click on "Pitchdeck Presentation Studio"; that's just going to open up the Figma plugin that we just installed a moment ago. Now, if you if you're new to the Pitchdeck Figma plugin, there's some other tutorials on our YouTube channel that you can follow along with, but today we're just going to be focusing on the URL and slide links tab in the right hand column of the Figma plugin.

The first thing to note is you can apply a link a slide link or URL link to any child of a layer of your frames. If you open up your frames panel, you can see here we've got all these different frames and they have different children; for example if we go down to frame six or slide six, you can see we've got two different elements in here; we've got an image and we've got a text panel, so what we can do if we wanted to is add a link to any of these elements through the Figma plugin. For example, if I wanted to link this image to a different slide, I can click on this drop-down list I can see a list of all of my slides in my presentation or my Figma file, and I can click on any of those to link to it. If I wanted to link to slide 13, I would just click on this option, and now that image has a link to slide 13 on it. Likewise, if I wanted to link this other panel to a website for example, I could grab the templates page that we just grabbed this file from, so I could copy that URL and I could paste it onto this frame and that would now add a link onto that frame which links off to the website we were just looking at. 

You can go ahead and do this to any elements any child element of any frame that you've got in your file or your presentation. For example, you could link the welcome message to a different frame; we could just link that directly to the next slide, so we're on slide two currently, which is why we can't link to it, and we can just link that over to slide three. This would be an easy way to add calls to action or links inside of a presentation deck or an interactive PDF deck that you want to link to other frames from. For example, this little app mock up here which has got the "start" button on it, perhaps you'd like to link that to a different frame that actually has the next part of that design that you could look at. That might be on slide 14, for example, so I'm just going to click on that and I think that's enough links to get started. 

We can see what that actually looks like in a clickable interactive PDF export now. Once you've set up all of the links that you want to add onto your frames for your interactive PDF, you can go ahead and export it by clicking on the "Export Presentation" button in the top right hand corner of the Figma plugin, and we want to change the presentation export format by clicking on this drop-down list here and going all the way down to the bottom to the "PDF deck" option here. I'm just going to leave it as "150 dpi" quality; you can go up to "300 dpi" if you want a print resolution deck, but "150 dpi" is really good for screen. I'm just going to leave that there, you can add a password to the deck if you wanted to, but I'm just going to leave it as is for now. This vector path option you can just leave disabled for now, too. I'm going to click on "Export to PDF" and this is going to go through all the frames in my Figma slide deck and it's going to generate a compressed clickable interactive PDF file for me, and once it's done it's going to ask me to download it to my computer.

It has just finished exporting the interactive PDF from Figma for me, so I can now download it by clicking on the "Download your .pdf file" button, and that's just going to let me download it to my desktop. I'm going to click "Save", and you can see up here we've actually got the file on our desktop now. I'm just going to just going to double click on that to open it up in the regular "Preview" app on Mac. I'll just scale that down a bit so we can get a good look at it; okay, we can see here it's exported our entire deck from Figma as a clickable interactive PDF. If I scroll down, you'll notice that if I hover over this area here you'll see there's a little tool tip that says "Go to page 3"; if I click on that link, it immediately jumps me over to page three. We haven't added any links to page three, so we can select the text and and that's all fine, but there's no link on this page. If you remember, we did add a couple more links; down on this frame here we added two links, so if we again hover over them you can see on the right here we've got a tooltip that says "Go to page 13"; I can click on that, and that immediately jumps me down to the page 13 that we linked to. 

We also added another link to a website as well, so I'm just going to scroll back up to there, and if I hover over the left hand side you can see that the tooltip is different it's saying that it's going to link me "hypermatic.com/templates", so I'm going to click on that and you can see there it's opened up my browser for me from the PDF, and it's gone to the URL that I added in the Figma plugin. I'm going to scroll down again, and I think we added one more link to the app home screen. Again, you can see here it doesn't link outside of the app home screen design, it only links on that square or that rectangle area that we specified in the Figma plugin. If I click on the "start" button or just this entire anywhere in this image, click on that, and again it links me to that same slide in the deck with the the next screen of the app. This is a fully clickable interactive PDF; you can send this to anyone, it doesn't really matter what software they're opening it with, these links will be contained and they'll be they'll be clickable. This can be really handy if you're putting together a presentation deck in Figma that contains a mock-up or it contains some sort of flow that people can actually click through, it can be really handy or if you just want to include links to URLs or external URLs if you've got some references or something in there that people can look at, that can be really handy as well. 

I'm just going to close that off now, and go back to the Figma plugin. Of course, you can you can edit these links; if you reopen the Pitchdeck Figma plugin and you want to export another clickable interactive PDF from Figma, you can do that as many times as you want. All of your links will be saved, so if you click back on any of those frames, jump back to the "URL/Slide Links" tab, and you can see here those links have been carried over from the last export. We can go ahead and change those if we want, and it's worth noting if you do want to remove any of those you can just click on the top option, which is "Link to an external URL", and then just just make sure the the input is actually clear. If I wanted to remove the link there, I'm just going to select that text and remove it, and now that will have no link on either of those parts of the frame when you go to export your next clickable interactive PDF from Figma again. That's just the way you can clear those links if you decide you don't need one, or you just want to get rid of it, that's all good as well. 

The other thing I wanted to just quickly note, too, is if you do link to another slide; for example, here we've linked to slide 13, which is the next slide. If I go ahead and remove that slide from the deck; for example, if I uncheck that, you can see here it's automatically removed that link from from the actual element. However, if I enable that again, it has saved it behind the scenes, but it just won't be included. If I do strip that out now, so I'm just going to uncheck that from the entire deck, I'm going to leave that as is, and then I'm going to export another clickable interactive PDF from Figma by again clicking on the "Export Presentation" button, going down to "PDF deck", exporting the interactive PDF, and this time it should export the PDF without that frame, and it should also not include the link on that element. 

I'm just going to reopen the new clickable interactive PDF that we just exported from Figma, scroll down, and you can see down here this element which we did have a link on before is now completely static; it doesn't have any interactivity or any links, and you can see here it has skipped over the frame that we excluded. This time it didn't include the app mock-up that we saw last time because we unchecked it in the Pitchdeck Figma plugin; it has completely removed that from the exported interactive PDF deck, and therefore removed the link from this element because there's nothing to link to. That's just something worth keeping in mind if you are doing that, and just the very last thing I'll show you, somewhat related to that as well, is the way that the the links work, too.

If you if you go back to the "URL/Slide Links" tab, and in this last example I'll just show you show you what I mean here. For example, if you link to let's say slide 7, so we've linked to slide 7 which we can see is the number there, and we've also got the frame title, which is important to note, in brackets. If I go ahead and now change the order of this slide, so if I make slide 7 into slide 9, for example, you can see here that it actually changes it changes the number of the slide that it's linked to, but the name of the slide is actually kept the same. It's just a little bit of a note in case you are moving those things around, it's totally fine, it'll keep those those links, but it'll keep the link to the frame itself that you originally linked, to not the number. It's just a small thing to note, it's a good thing; it means it's going to always keep those links to the actual content that you linked to, even if you go ahead and change the order of them; the content that you originally wanted to link to itself will be maintained. If you are including those frames in your into your interactive PDF export from Figma, those will be kept even if you move around the order or remove those references, they'll all be worked out by the Pitchdeck Figma plugin.

I just wanted to do a quick Figma tutorial on this, as it's a brand new feature that was highly requested. This has just been added to the Pitchdeck Figma plugin just this week, so I hope if you've been wanting to export clickable interactive PDFs from Figma or add links between slides to your to your decks and export them as clickable interactive PDFs, then you can now do it using the the Pitchdeck Figma plugin. I hope if you've been wanting to do this, or if you've been waiting for this feature to drop in the Pitchdeck Figma plugin, I'm happy to say that it's finally here. If you do use it, I hope you have some success with it, and please stay tuned for more, because we'll have more tutorials just like this one coming very soon. As always, thank you for watching and we'll see you in the next one.

---

---
type: tutorial
title: How to translate Figma text layers with XLIFF files using CopyDoc
date: 2021-04-28T00:00:00.000Z
---

# How to translate Figma text layers with XLIFF files using CopyDoc



#### Video Transcript

Today I'm going to be showing you how to localize or translate your Figma designs with XLIFF files using the CopyDoc Figma plugin.

The first thing we need to do, if you haven't already done so, is just jump into the Figma community and search for the word "CopyDoc" and you'll see the CopyDoc Figma plugin pop up. If you haven't already installed it, you can just click on the "Install" button on the right hand side here, and once it says "Installed", you're ready to go and we can jump back into our Figma file.

I'm just using a really simple banners template in Figma, and I basically want to translate this into a different language. The way I'm going to do that is just by firing up the Figma plugin by right clicking anywhere going down to "Plugins" and clicking on "CopyDoc Text Kit", and this is going to open up the Figma plugin that we just installed a minute ago.

I'm going to be ignoring these first options; I've got other videos that cover those features, but today we're just going to be looking at a brand new feature called "Localize Figma Text", and this is going to allow us to export and import XLIFF translation files to and from Figma. I'm just going to click on the "Export/Import XLIFF" button over here, and it's going to give me an option to select the source language; this is the language that's already inside of our Figma file. I'm just going to select "English" and I'm going to do the "Australia" variant, and for the target language, you can select the language that you want to translate the design to. In my case, I'm just going to select... let's go with Dutch. I'm going to do Dutch "NL" version and I'm going to translate the "English Australia" version currently to a new version in a moment for the "Dutch" language.

I'm going to keep the design references, this little check box just flags if you want to export images of all the frames just as a reference for your translator to see actually what they're translating alongside the file, and the second option we have is just choosing what XLIFF format you want. XLIFF is a standardized file format for specifically translating strings or translating words from a Figma design or a application to a different language. There's different variants of it; 2.0 is more modern, but not as supported in a lot of different translation tools. At the moment, I'm just going to stick with XLIFF 1.2, and once you've selected that you can go ahead and click on "Export XLIFF", and that's just going to export every single text layer in our file to an XLIFF file.

I'm going to click on "Download XLIFF Text", export and save that to my desktop, and I've just got a little zip file now that it's exported. I'm going to double click on the zip file, and I'm going to open that up just so we can see what's inside. You can see here we've got two different files, or two; one directory and one file. The first file is just the XLIFF file; that's the translation file with all of our text in it. Then we also have this "\_frames" folder, which contains PNG images of all of our frames from the design, as a reference for the translator.

There's different software you can use to translate XLIFF files, but the simplest way would just be to open it up in a text editor or a code editor. I'm going to open it up in Visual Studio Code, just to show you what it looks like, and edit the translations in here. This is how we're going to localize and translate our Figma text to a different language using the XLIFF file in this case. You can see here, just to go through what's happening, each of these little `<file>` sections represent a different frame in your Figma design. You can see here each of them has an id; we've got 1:2, 1:6, 1:10, and these correlate directly with these frame ids here; they're in order of the frames, so you can basically match those up if you needed to see, for example, "1:14", you can go into your frames reference, go to 1:14, and that's visually representing all of the content inside of that frame.

Inside of each frame, or `<file>`, as it's called in an XLIFF file, you've got a translation unit for every bit of text; for example, in this particular use case we only have two bits of text per banner; we can see here we've got "Lotus Yoga Pants" and "Shop now", and we've got the same text here. In each translation unit there's two tags; there's a `<source>` tag and a `<target>` tag; the source tag has already been populated by the text from Figma that's automatically been populated. What you need to do in your translation from Figma is copy this text, or get your translator to translate that text into this `<target>` field, and again you can do this using different software, but for today I'm just going to use Visual Studio Code along with Google Translate. I'm just going to translate that from English to Dutch, so I'm going to jump back into my code and I'm just going to really quickly select all of those, and pop that into the `<target>` field, and then I'm also just going to translate the second bit of text we've got here; that's "Shop now"; I'm going to copy that, I'm going to highlight all of my "Shop now" text and just pop that into the translation `<target>` and hit save.

I've just saved that, I've translated all of the Figma frames, all of the Figma text inside of each frame to Dutch, and now I'm going to actually re-import that back into Figma. We can do that really quickly by jumping back into our Figma file and closing off this little pop-up clicking on the "Localize Figma Text" option again, and just clicking on the "Export/Import XLIFF" button, and this time instead of exporting the translation, we're going to import a translation. Underneath the text heading "Import translated text from XLIFF to Figma", I'm just going to click on my folder, jump down to the file I just saved, and I'm going to drag and drop that from finder on my desktop into this little box here, the drag and drop box. That's just loaded the XLIFF translation file into Figma, and Figma has read the file, and it's picked up on what translations are in there. You can see here, it's defaulted to the translated language of "Dutch", but we've also got access to our "Australian English" source translation there, too. If I want to translate this instantly, all I need to do is just confirm that all of the text layers are in there; it has picked up on 22 different text layers, and now I've got this button that I can click. I'm just going to click on the "Update Figma text layers translation" button; I'm going to click on that, and that has gone ahead and imported all of the text.

You can see here in our Figma design that all of those text layers have been updated with the translation, and it looks like it's translated all the Figma text layers you can see here. Obviously the text length wasn't quite right in this one, so I've just had to adjust that, but the rest are looking good; and if you've got the text set to auto height or auto width, that should translate a lot better; if you've got fixed width or fixed height Figma text layers, you're probably going to run into some issues with sizing, because different languages will be different lengths; but in this case it's not looking too bad.

We've just gone ahead and translated the text in this entire Figma design with one click, but the other thing I can do is just translate that straight back into English. I can click on the drop down again, and instead of loading in the "Dutch" text, I can load in the "English" text, and then I can click on the "Update Figma text layers to English translation" button and click on that, and you can see here it's just updated those 22 text layers back into English. It's it's really quick, it's very very efficient.

You can do this with as many files as you want, you could save out multiple translation files or localization XLIFF files from Figma; I could export another one another brand new one to "Danish" for example, I can click on that and just re-export it from Figma, and that will re-export all the text I can translate. I can save that into my desktop, and then I would go ahead and translate that Figma text into "Danish" and then I could again re-import that into the Figma file here using this little and drop area.

That's the the basic tutorial for how you can actually go ahead and localize and translate your text layers in Figma really easily using the CopyDoc Figma plugin, with this standardized XLIFF localization format or translation format. There's just a few caveats; as with any text layers in Figma, if you're using text layers that have a font that isn't installed on the user's machine, those text layers won't be able to be updated using the Figma plugin. For example, if this "Shop now" button or any of these text layers were in a font that wasn't installed, just like when you've got that font missing normally when you go to edit the text layer, you'll you'll get that little exclamation mark with a warning saying that the font needs to be installed or substituted, and you won't be able to edit it. Figma plugins also can't edit that font magically either, so the font does need to be installed. If you are importing translated text back into Figma and you're wondering why some of the layers aren't updating, there's a very good chance that the the text layer has a font that isn't installed on that machine; you can either send it to somebody who has the font installed and get them to run the Figma plugin, or you can get the font and install it and then re-run the Figma plugin yourself, and that will also finish the translation for you. That's just a really small gotcha that you might come across if you're using the plugin to translate your Figma text layers.

Aas I said, this is a standardized translation format, so you don't have to use something like a Visual Studio Code, or a code editor, or a text editor, in fact this is probably one of the slowest methods that you could do; but this is the method that I was just using just to show you actually what's inside of the XLIFF translation file, and just breaking down how it actually all works.

That's a rough tutorial of how you can go ahead and translate text in Figma, or localize your text in Figma in one click, essentially, once you've got the the text from Figma translated. If you want to localize or translate your website Figma designs, translate your application Figma designs, just localize or translate a banner set in Figma, or something really simple like this, and you have a team of translators, or you just want to translate it yourself like I was doing using Google Translate and then re-importing that into Figma, this is probably the most efficient way that you can go about it. You don't need a any web application, you don't need to integrate it with any other software, it's really as simple as importing and exporting XLIFF files via the Figma plugin. For those of you who prefer a simpler approach, rather than syncing up things and having API keys to deal with, this is an alternative method that might fit your workflow a bit better for localizing Figma text, or translating Figma text.

I hope you have some success with it, if you've been looking to translate your FIgma designs or work with translation software and have that play nicely with your Figma designs; then give this a go, give the CopyDoc Figma plugin a go, and I hope you and your team have some success with it. That's all from me today, and I'll be back very soon with more Figma tutorials just like this one; stay tuned for those, and thanks again for watching.

---

---
type: article
title: Professionally designed free Figma templates
date: 2021-04-02T00:00:00.000Z
---

# Professionally designed free Figma templates



Today, we're launching our <g-link to="/templates/">free Figma templates</g-link> to help kick-start your own projects without needing to design everything from scratch; they've been professionally designed to look amazing and automatically work well with our Figma plugins.

All of our professionally designed Figma templates are 100% free for personal and commercial use, so you can customise them to your hearts content for client work or your own projects.

To start with, we've created free Figma templates for you to use across three different categories: presentations, emails and banners:

### Free Figma Presentation Templates

The first category is our <g-link to="/templates/presentations">free Figma presentation templates</g-link>, which contains pre-designed slide decks that you can use for your own pitch decks or presentations.

These free Figma presentation templates are designed to work with our <g-link to="/pitchdeck">Pitchdeck Figma plugin</g-link>, allowing you to export your slide deck design from Figma to either a web-based presentable deck, a PDF file, or .pptx file that you can present in Microsoft PowerPoint, Apple Keynote or Google Slides.

### Free Figma Email Templates

The second category is our <g-link to="/templates/emails">free Figma email templates</g-link>, which contains pre-designed emails (eDMs) that you can use for your own email marketing sends.

These free Figma email templates are designed to work with our <g-link to="/emailify">Emailify Figma plugin</g-link>, allowing you to export your email design from Figma to a production ready HTML email that you can send using your preferred email service provider (ESP), or to the developer-friendly MJML format.

### Free Figma Banner Templates

The third category is our <g-link to="/templates/banners">free Figma banner templates</g-link>, which contains pre-designed banner sets that you can use for your own banner ad campaigns.

These free Figma templates are designed to work with our <g-link to="/bannerify">Bannerify Figma plugin</g-link>, allowing you to export your banners to production ready HTML for multiple ad platforms, or to a GIF, WebM or MP4 video file.

### Upcoming Free Figma Templates in 2021

We've launched with 16 free Figma templates across these 3 categories for now; however, we'll be expanding these categories in the future, as well as continuing to add more professionally designed templates to each of these categories over time.

As always, stay tuned for more!

---

---
type: article
title: No code Figma plugins
date: 2021-03-17T00:00:00.000Z
---

# No code Figma plugins



No code tools have grown in popularity over the last few years. These tools are perfect for anyone who doesn't know how to code and doesn't really want to know how things work under the hood, and prefer to focus on the design, content and interactions themselves.

For Figma users, this no code concept is also carried over to the Figma plugins space, where common design tasks can be augmented with computer automation to take care of the code, and allow the design process to take priority.

Some of the best no code plugins for Figma help automate the most common, frustrating and manual development tasks; from emails to banners, and favicons to content. Here are a few no code Figma plugins that you can get started with today:

### Emailify for Figma

>Easily design and export responsive, production ready HTML emails (eDMs) using Figma.

One of the more painful experiences for developers is building HTML emails with  messy tables and code and that looks like it has travelled through time from 1997. 

The [Emailify](https://www.figma.com/community/plugin/910671699871076601/Emailify-HTML-Email-Builder) Figma plugin lets you design and export responsive, production ready HTML emails automatically from Figma.

#### Dozens of modules with one click

[Emailify](https://www.figma.com/community/plugin/910671699871076601/Emailify-HTML-Email-Builder) lets you quickly build out a design by instantly adding modules to your email with one click, then add your own styles and content using Figma.

#### Override responsive design styles for mobile

Easily add mobile overrides and HTML properties (links, alt text etc) to a selected layer to avoid manually adding CSS and HTML in code.

#### Automatically export responsive HTML emails from Figma

No coding required. Export your email designs from Figma to production ready, responsive HTML email code in seconds using [Emailify](https://www.figma.com/community/plugin/910671699871076601/Emailify-HTML-Email-Builder), with one click.

#### Includes developer friendly MJML source code files

If your developers easily want to make their own updates to the exported code, the [Emailify](https://www.figma.com/community/plugin/910671699871076601/Emailify-HTML-Email-Builder) plugin also exports MJML files for total code customisation.

### Bannerify for Figma

>Animate and export production ready banners from Figma to HTML, GIFs and Videos, in seconds.

One of the most dreaded tasks for any developer is taking a Figma file containing dozens of banner designs and having to painstakingly build HTML banners from them. If you hate manually creating banners and want to feel like Keanu Reeves in The Matrix; this Figma plugin is for you.

The [Bannerify](https://www.figma.com/community/plugin/796124491692147799/Bannerify-Banner-Studio) Figma plugin automatically exports animated banners from Figma to production ready HTML, GIFs or MP4/WebM video files from Figma designs with one click. The real-time preview in the Figma plugin allows you to instantly 

#### Easily add animations to Figma layers

[Bannerify](https://www.figma.com/community/plugin/796124491692147799/Bannerify-Banner-Studio) comes with a bunch of animation presets for the most common enter/exit keyframe transitions that you can apply to the layers in your banner designs. Everything from fades, slides, rotations, transforms and more advanced animations are included to use without any manual keyframe creation required.

#### Export Figma designs to production ready HTML

Once you've animated all of your banners, you can easily export them to HTML with one click. [Bannerify](https://www.figma.com/community/plugin/796124491692147799/Bannerify-Banner-Studio) supports exporting to HTML/CSS, GSAP, HTML Canvas, DoubleClick, Google Ads and many other ad servers. All of the clicktags and scripts are automatically included, so you don't need to write any code at all.

#### Export Figma designs to production ready GIF or MP4/WebM video

If you're going to be using your banners on a social platform or somewhere else that doesn't require HTML banners, you can also export your animated banners from Figma to GIF or MP4/WebM video with one click using the [Bannerify](https://www.figma.com/community/plugin/796124491692147799/Bannerify-Banner-Studio) Figma plugin.

#### Automatic preview pages with all of your exported banners

If you want to review all of your exported banners at once, [Bannerify](https://www.figma.com/community/plugin/796124491692147799/Bannerify-Banner-Studio) automatically includes a preview HTML page that you can open or share with your clients/stakeholders. You can also optionally add your own HTML/CSS to inject your own branding or colour scheme, directly from the plugin.

### Favvy for Figma

>Export production ready favicons (with code) for your website or PWA from Figma in seconds.

Usually forgotten about until the last minute before going live, creating favicons has always been a really weird and annoying process for developers.

The [Favvy](https://www.figma.com/community/plugin/789010114208495133/Favvy-Favicon-Exporter) Figma plugin automatically exports production ready favicons from Figma for your website or PWA (progressive web app) in seconds, with one click.

#### Preview your favicons in Figma

Favvy works by using any square "frame" layer that you select in Figma and turning it into a production ready favicon package. You can easily preview what the favicon will look like in multiple sizes by clicking on the layer in Figma, and seeing the preview instantly update in the [Favvy](https://www.figma.com/community/plugin/789010114208495133/Favvy-Favicon-Exporter) Figma plugin.

#### Automatically generate production ready favicons

[Favvy](https://www.figma.com/community/plugin/789010114208495133/Favvy-Favicon-Exporter) gives you all of the files that you need to deploy your favicon to a production website, including all of the `.png` and `.ico` image files, plus a `.browserconfig` and `site.webmanifest` for progressive web apps (PWA).

#### Exports HTML snippets for the head tag

[Favvy](https://www.figma.com/community/plugin/789010114208495133/Favvy-Favicon-Exporter) also generates all of the HTML code for your `<head>` tag, which is automatically pre-populated to link to all of the other files in your favicon package.

### CopyDoc for Figma

>Update Figma text via CSV/JSON, download Figma comments, and export Microsoft Word docs.

The [CopyDoc](https://www.figma.com/community/plugin/900893606648879767/CopyDoc-Text-Kit) Figma plugin allows you to import and export text content from your Figma designs. If you're a developer who needs to extract text content or comments to JSON files; this Figma plugin is for you.

#### Export your Figma text layers to JSON

As a developer, manually extracting text content from a Figma design can be pretty painful.

[CopyDoc](https://www.figma.com/community/plugin/900893606648879767/CopyDoc-Text-Kit) allows you to export every text layer in your frames to a JSON file, which gives you a complete overview of your content, and allows you to write scripts that can make use of the JSON data for your websites or other applications.

#### Re-import Figma text updates from JSON

You can also re-import the JSON file back into Figma if needed. This means you can run a script or manually update the text in your JSON file, and re-import and update those text layers back into your Figma design using the [CopyDoc](https://www.figma.com/community/plugin/900893606648879767/CopyDoc-Text-Kit) plugin.

CopyDoc will find any text updates by comparing your JSON file and the text layers in the Figma design, then show you all of the differences for review and approval before any text updates are made. Once you've selected the updates you want to import, you can update the selected text layers in Figma with a single click.

#### Export Figma comments to JSON

If you're collaborating with a design team, and comments are being left inside the Figma file, sometimes it can be difficult to keep track of all the feedback being left on each frame.

[CopyDoc](https://www.figma.com/community/plugin/900893606648879767/CopyDoc-Text-Kit) has a feature that lets you to quickly export every comment from your Figma file into a JSON with one click; this lets you easily use that JSON data containing all the comments for your own applications or scripts.

---

---
type: tutorial
title: How to design and export Emails from Figma to HTML using Emailify
date: 2021-02-02T00:00:00.000Z
---

# How to design and export Emails from Figma to HTML using Emailify



#### Video Transcript

Today I'm going to be showing you how to create and export HTML emails directly from Figma, using a Figma plugin called Emailify.

This tutorial is going to be split up into three different parts: the first part is just going to be installing the Figma plugin, the second part will be designing our email and the third part will be exporting the email from Figma to HTML. If you want to skip through anything at any point, please feel free to do so; and with that we'll get started.

The first thing we need to do is just install the Emailify Figma plugin. If you haven't already done that, you can go to the Figma Community and search for the term "Emailify", and you'll see a result called "Emailify HTML Email builder" pop up, and all you want to do is just click on the "Install" button on the right hand side until it says "Installed", and then you can switch back into your Figma file.

I'm just starting with a completely blank Figma file in this case, and because I've just installed the Figma plugin, I'm going to run it by right clicking anywhere, going down to "Plugins", and clicking on "Emailify HTML Email Builder", and that's just going to run the Figma plugin that we just installed a moment ago. You can see here because I've run the Figma plugin for the very first time in my page, it's prompting me to add an Emailify container; an Emailify container will allow me to start adding some modules to it. All you need to do is give it a name; in this case I'm just going to call it "Marketing Email" and I'm going to click on the "Add New Email Container" button.

Okay, so it's just added a brand new blank Emailify email frame to our Figma file, and you can see here now that I've actually added that frame, we've got all of these modules available to us in the Emailify plugin; you've got categories up the top that you can click through, so for example we've just gone from "Header" to "Images" to "Content", "CTAs" (or "calls to action") and "Footer". These are all the different categories you can browse through; there's many many different content modules and these are all available to you to add to your design with one click.

Just to give you a demo of how this works, we can go to any module in the list that we like, and just give it a click and that will instantly add it to our Emailify frame in Figma. We can add as many of these as we want, in this case I might just add a few different types just so we can get a good mix of components going, and you can see here it's just instantly adding those components with one click. I'm just going to go through and add a few more, I'll add these cards, I'll add some content, we can add maybe a testimonial, we might want to add some stats, we can do that and maybe just a footer as well.

That's roughly what it looks like to design an email; you can you can spin one up really, really quickly using these modules, and these are totally customizable. All it's doing is adding, you can see on the left here, it's adding real Figma layers to your Figma canvas and you can open those up and explore them, but they work just like any other component that you designed yourself. Because they're all using Figma auto-layout, you can actually re-arrange these just by dragging and dropping the components or the modules up and down on the page; you can just do that as much as you want, and rearrange those. You can also do that within components, so if you wanted to rearrange the text, you can just drag those up and down and that will automatically rearrange the elements inside of a module.

The other cool thing you can do is change the content, so we've obviously got this dummy content that's coming straight from the modules in the Figma plugin, but we can change this to whatever we want. I might change that to "Premium Sushi" as a heading, and I can customize that in the Figma styles over here on the right hand side. If I want to reduce some of that character spacing I can do that, I can make the font size bigger or smaller, just as you would normally in Figma. I can change the button, so if I wanted to change this button to more of a "stroke" button, I might knock out the fill, and I'll change the stroke and just add that onto there. Then I'll just also change the text color, so I'm just going to change that to white; you can get a sense of how easily you can start customizing these components. You might also want to change the background; for in this case you've got a call to action hero, and it's actually got a background image, so we can actually change that background image just by opening up the image fill Figma layer and either choosing an image by clicking on that image, or I can just drag and drop one from my desktop, and that will replace it over here.

It's really easy to change the content and the imagery in the backgrounds, but you can also change the layouts or order layout properties. In this case we've got some padding and we've got some item spacing in our hero component here. If I wanted to change that, I can just drag this little slider up and down and that will change the spacing between the elements inside of this module; I can change that as much as I want to get it looking exactly the way that I like. I might just change that to "8" and I can also change the padding; if I wanted to change the padding, I can just open up the padding block, and I might change that to "32" just to add a little bit of padding on there, and that's what that looks like.

You can go ahead and do that to all of your elements, you can change the logo you can change the text, and the links up here, you can change the avatar and the quote. We can drag a new avatar in if we want to do that, and that changes it there; we can change the role of the person, so we can say just "Critic", and this is all easily changeable. Inside of components, we can we can swap these around, too. We might want to change the column order, so I'm just going to grab the column and you can see there you can just switch it around like that. That's a rough idea of how it looks to create re-ordered customized components; you can basically just go go nuts and change all of the content and the styles, you can add backgrounds, you can add different background colors and things like that; so, you get a bit of a sense of what that looks like.

The next step we can do to customize our HTML emails from Figma even further is we can actually start adding responsive overrides. The way we can do that is just by clicking on the little "Settings" icon in the top left corner of the Figma plugin; this icon that I'm clicking on now, and when you open that you can see here that whatever selected layer we've got in our Figma canvas, it's going to give us some settings that we can customize inside of the Figma plugin itself.

For this example, you can see here I've got the "Call To Action Hero" that we were just working on already selected, and over here it's got some mobile hero overrides for us. If we wanted to, we can actually tell the Emailify Figma plugin what overrides we want specifically on mobile, and that could be item spacing; so, if we wanted the item spacing to be different on mobile than it is on desktop after we export it to responsive HTML, which we're looking at now, we can just check that little toggle and put in a brand new value over here. I could put in "12" for example, I can also customize the padding; by default it automatically adds some responsive padding, but I could change that, so I could make the top and bottom padding even higher.

I can also click into the module itself and start editing the responsive properties for things like text. In this case, I'm just clicking on the title that we just changed a minute ago, and it's got some mobile text overrides here too; it's automatically overriding the font size and the line height to "32" and "37". I can obviously customize that, and I can change that to be higher; I can change that to be "40". I can even change the letter spacing, so if I think that the negative three letter spacing on desktop is actually too big, I can change that to be slightly less intense; I could make that negative one on mobile, and you can see here we've also got the option to add padding; we could change the padding specifically on mobile, and that would be applied only on mobile. We can also change the alignment of the text, so if we wanted it to not be centered on mobile, we could click on "Override Alignment" and just click on the option here to change it, and we could align it "Left" or "Right" or just leave it as "Center"; in this case I'll just leave it as "Center".

The other neat thing we can do is actually just hide elements entirely. Let's say, for some reason, I actually didn't want this description to show up on mobile, I just click on the text layer and right down the bottom you'll see a check called "Hide On Mobile", and if you were to click on that, that would actually remove this text from showing up specifically on mobile; that's something you can apply to any element, if you click on any of these layers, you'll see that option show up right there. I'll do one example of the alignment just so you can see what that looks like, too.

The other neat thing we can do for rows in particular; you can see here it's got in brackets what layer type it is, so in this case we've got a "Row", this "Image Text Split" row, and a neat thing we can do in rows is we can actually reverse the column display order. I'm just going to copy this module, so I'm going to make three of these and I'm going to make it so these have a couple of different images just so we can tell the difference. I'll just drag drag these images in here, and you'll be able to see in a second that we can actually change the order of this on desktop. If we wanted to have this column sitting on the left, but on the middle one we actually want the image to go to the right on desktop, we can do that by clicking on the row, and then clicking on this check box that says "Reverse column display order (on desktop)"; I'm just going to click on that, and it's worth noting that isn't going to change it visually in your Figma design, this is only going to get applied in the responsive HTML code that we'll export shortly. Again, I'll just quickly update this image as well just so you can see the difference when we do export it. That's all good to go; you can see here we've got the bottom and the top both don't have that checked, but the middle one we've just checked.

That's all looking really good; I'm fairly happy with the email at the moment and I think it's about time we added a couple of links. If I wanted to add a link to a button or a link element, you can do it the exact same way; you just drill down into it in your layers, and you can see down here if I expand the layers, we've got this navigation module in our header, and we've got a link layer here. The link layer is sitting inside of the navigation, and you can see here it's got a placeholder for us which is just telling us to insert a URL link and so I'm just going to insert my own. I'm going to do just a link to a fake sushi restaurant, and I've just added that in there; that means that whenever someone clicks on this link up the top, that's actually going to take us to this URL that we've just specified here.

It works the exact same way for buttons; if you are using a button element inside one of your inside one of your modules, you just click on the button and same thing; you've got a clickable link URL, you just put in the URL and that will automatically take you to wherever you put put the link in. I can just do a "book now" link and that will become a clickable link.

We can also do the same thing for images; if you wanted to link an image, you can easily do that just by again clicking down to the image layer and adding your clickable URL there; I'm just going to click that, and I might add a link to a menu. The other cool thing for images is you can add alt text. Alt text is what shows up in your email client when the image hasn't quite loaded yet, so you can add a description of the image just in case it doesn't load for some reason. In this case, you can just add a photo of some sushi, and that's what that looks like.

The other neat thing we can do for images is we can actually override the width and height. Let's say for example you didn't want this image to actually be full width when it goes down to mobile, but for some reason you wanted it to be a very specific set of dimensions; you might want to do 150 by 100 or something like that. You could set that there and that will automatically override the width when it comes down to mobile. I might just leave that there and you'll be able to see what that looks like and if we actually uncheck the fluid with option, we can override the alignment of the image, too. If I click on the override alignment, and I change that to be let's say on the right that's just going to override the alignment of the image over to the right once it gets down to mobile width, but for the other ones we're just going to leave them as 100% fluid width, and what that means is it's going to actually stretch out the image width to 100 of the screen width and automatically figure out its height; that's usually what you would want to do.

The other option that you can do for the columns is you can actually make them not stack if you don't want them to stack. By default, you would pretty much want to always stack your columns on mobile, so for example having the text over here or the column over here sit underneath the image there might be some cases where you actually don't want to do that. In the case of the header for example; in our header, you can see if we click on this the option to stack the columns in this section is actually disabled, and what that means is it's not going to try and put the view in the browser link underneath the logo, it's actually going to keep those in the same row and just shrink the width of those, so they're always left and right of each other; that's what that looks like there.

The other thing we can do, if we really wanted to, is render content as an image. If you want to render a certain block as an image instead of HTML, you can do that just by clicking on this little toggle here, and that will automatically make sure that this row here that we've just selected gets exported as an image block a 100% width image block, and that will just get scaled down on mobile. The reason you might want to do that is if you've got a whole bunch of sort of weird fonts, or weird things going on in the image that aren't really going to translate well to responsive HTML, and you just want to bake all of that into an image, you can do that.

The alternative way of doing that is if you go to your images tab, and you just add a regular full width image to your email; we'll just add that at the bottom here. The other thing you can do is literally just add content into that layer, so if we expand out our image layer here, it's just a frame, and what we can do is just start adding content to that image. If we wanted to add a caption; if we added "Sushi Chef" as a caption or an overlay to the image, I'll just make that a little bit bigger make that white and bold, let's say you wanted to place this somewhere in the the corner or something like that, something that just wouldn't really lend itself to responsive HTML, you might want to just place that somewhere like this and in the corner. Maybe you want to add some shapes or something for some reason, so we might add some shapes to our lockup; I'll just make that a different color, and let's just give him a few stars, I think he's worth about four stars. Let's go do a four-star review of the sushi chef; you can see here on the left inside of my image frame I've got my four star layers and a text layer, and what that means is all of that content is going to get baked into the image, it won't be exported as responsive HTML and that's just a really nice way of being able to create custom lockups inside of your images without having to rely on annoying HTML layouts that just really aren't going to work for this scenario. You'll be able to see what that looks like in a second.

Now that we've designed our email in Figma, it's about time that we exported it from Figma to HTML, because that's really what we want to be doing. The very last thing I'll show you just before we move on is the "Favorites" category; I haven't shown you that one yet, but the favorites category is a special category that automatically keeps track of all of the modules you've already used, and it's just a really easy way to going back to finding modules that you've used often, or modules that you really like, and you don't have to filter through categories every time just to get back at to. If we wanted this full image one to be used a bunch of different times, I wouldn't have to keep going back to images, I could just check in on my favorites and just reuse that; it works the exact same way, you just click on one of the modules in the favorites category and it will automatically add it to your Figma canvas as well. I'll just add that one onto here and I might keep this one as a responsive HTML block, just because we made the other one as an image; you can see the difference. If you want to tidy this category up at any time, you can just remove some of those by clicking on the little "Trash" icon, and that will remove them from the favorites, but it will keep them in the original category.

Okay, I'm fairly happy with my email we've just designed, and I think we're going to export it from Figma to HTML now; the way we can do that is just by clicking on the "Export" button in the top right hand side of the Figma plugin, and this is just going to bring up the "Export to Code" option. By default, it will automatically select the "HTML" option but you've also got a second option which is "HTML and MJML"; I'm going to select that one, and I'll show you what that does shortly, but in summary MJML is the source code for the compiled, production ready HTML; if you have a team of developers or if you're a developer yourself and you really want to customize the email even further once it gets exported from Figma into code, the MJML option is going to make that really easy for you.

The second thing we've got is just to tell it which emails we want to actually export, and the reason that's there is because you can have multiple emails in a page. If we created a bunch of different emails on our page; for example, if I created a new one just by clicking on the little "Plus" icon and did a new email container, that's just going to add a new email container over here, which I can also add modules to. I can just start building out a whole new email over here, and you can see here that we've got a new option in our list; to change those I can just click on the little select box, and that will change which email I'm editing. The other way you can do that is just by clicking on the email itself, and you can see up here it's changing which email is actually active.

I'm just going to add a couple more modules, just to give you a sense of some of the different ones that you can actually add, and we're actually going to export both of these emails from Figma to HTML at the same time, just to show you what that looks like. I'll add a couple more, just to make it a bit more interesting, and I think that's probably enough for now. I might just add a little footer as well, maybe some navigation, okay; I'm pretty happy with that, so I'm just going to leave that as it is.

Now I'm going to show you how to export both of these emails from Figma to HTML; once again, we're just going to open up our "Export To Code" panel, so we'll click on the "Export" button, and we're going to put in a subject line; we can do "New marketing announcements", not that this would be your subject, but just as a bit of a test; and this one's just an "experimental email". You can also add preheader text, too. If you wanted to add some preheader text, I'm just going to grab this text for now and drop that in there. By default, it will automatically check both of the emails, or any emails that you've added to make sure both of those emails get exported from Figma to HTML. If you did only want to export one, you can check the one that you want and leave the other one unchecked, or if you've got many emails you can obviously uncheck and check which ones you want, but in this case I'm going to export both.

Now we've selected those, the very last step is just to click on the "Export To Code" button; I'm going to click on that now, and what this is doing right now is it's taking all of our Figma design that we've just done for both of the emails, and it's automatically generating responsive, production-ready HTML emails from Figma with all of the image assets. That's all finished now, and it's just telling us that our HTML code is ready to download and it's going to give us a zip file; if we click on the
"Download your zip file" button, I've just clicked on that now, and I'm just going to save this to my desktop. I'll click on "Save", and you can see up here it's just saved it to my desktop.

I'm going to double click on the zip icon, and that's just unzipped it to a folder for me. I'll open up the folder, and you can see here we've got a few different files. We've got two folders; the two folders are named after our email frames from Figma, and if I open those up you can see inside of those two folders we've got an image folder for each; we've got images that I can have a look at, and you can see over here that these are all the Figma image assets from our actual HTML email all saved, and those are all in retina resolution. Then we've got an index.html file and an index.mjml file; I'll go through those in a second, but the first thing I want to show you is the index.html file that gets exported in the root of the directory; if I click on that and open it up in my browser, you can see here that this is just loading up a preview page. This preview page gets automatically generated by the Emailify Figma plugin; you don't have to do any work to set this up. What it does is it just gives you a really nice quick overview of the HTML emails that it's exported from Figma; we'll go through this now.

You can see here this is real HTML; you've got all of the text, you've got your buttons, you can see the link for the button in the bottom corner. You can see on the right hand side we've got a small preview as well; the small preview is just a 320 pixel width preview, just to give you a sense of what this is going to look like on a mobile device.

I'll take you through some of these things now, because I just want to remind you of what we did in our design to make some of these things happen. The first thing is we've got our responsive text; if you'll recall we actually added a different type of letter spacing on mobile and a different font size; you can see here that that's taken effect and it's slightly smaller, and the letter spacing is not as big. We also decided to left align this bit of text just because we wanted to; that's kicked in, we didn't touch anything on there.

For our image, remember when we changed it; it was going to be the smaller version, we've changed that there and you can see over here the section alignment that we did has kicked in, too. You've got the image over to the right, but the text over to the left on desktop, but on mobile it's kept the same ordering; you've got the image on the top and the text on the bottom still; that's that's exactly what we wanted. We also created this image; this single image that was all baked in to that image. The one underneath it we also decided to create an image just from that layer; that doesn't have any text in it compared to the one up here, which is completely editable. You can see over here the difference you've got; the stacked HTML version versus the one we converted to an image down here, and that's just kept it as a full width image.

That's a bit of a rough look at what that looks like; we've also got our second email down here. I didn't really do too much extra work to this onem so it looks pretty standard to what you would expect, and that's what that's currently looking like in there.

Now that we've had a look at our email preview, we can open up our folders and just have a look at what's actually in here as well. If I just grab my code editor and I drag in one of these files, I'm just going to drag in the MJML file, and you can see here that this is the source code for the email that we just exported; this is really good for a developer if they want to make some changes to the code, this is the best place to do it because the compiled HTML code, or the production ready HTML code looks something more like this, and you can see that it's a lot more complicated to work with, just because it's been rendered out to a whole bunch of tables and table cells and and things like that; it's not very pleasant to work with and that's why we have included the MJML source file which makes it much easier to work with, which you can then recompile back into HTML, something that looks like this, when you're ready and happy with it.

That's a rough idea of what it looks like to design emails and export them from Figma to HTML; as you can see it's relatively painless compared to the regular process of building and designing HTML emails, and being able to use Figma as the design tool is really nice compared to using an online tool that's slightly more restrictive. Being able to use the design tool that you already know and love to design the actual content and template, then automatically export that from Figma to HTML, I think that's that's the the main benefit over doing it manually, or using a different tool that doesn't involve Figma.

I hope you've enjoyed this Figma tutorial and if you've been looking for a way to design and export HTML emails from Figma with a lot less pain, then I hope this tutorial has been helpful for you. Best of luck if you decide to give it a go, and I hope it helps you and your team with designing and exporting HTML emails from Figma. Until next time, thank you as always for watching, and we'll be back soon with more Figma tutorials just like this one.

---

---
type: article
title: Building HTML emails 1000x faster with Figma
date: 2021-01-31T00:00:00.000Z
---

# Building HTML emails 1000x faster with Figma



Ever since Dr. Dre dropped "2001" in 1999, designing and building HTML emails (or "eDMs") has been a reliably painful recurring task for both designers and developers.

Spending days writing HTML that's straight outta 1995 and fighting with Outlook bugs, all while the original "approved" design simultaneously going through countless rounds of reviews and visual/content changes that then need to be manually updated again in the HTML — it's enough to make any designer or developer slowly lose their mind.

That's why today, after over a year under development and throwing out our first two approaches to solving the problem, we're excited to release our brand new Figma plugin — [Emailify](/emailify) — which helps you design and automatically export responsive, production-ready HTML emails (in seconds) without leaving Figma.

To accompany the release, I'd like to go through some observations, thoughts and insights into some (personal) history of "the email problem" and how we went about building a Figma plugin to help solve it for both designers and developers.

### Designers use Figma, not MailChimp

Working in digital agencies for a decade, and being involved in (literally) hundreds of email marketing projects, and without exception, designers used their usual software of choice (Photoshop, Sketch, Figma etc) to design the email; which means they were not using the "email designer" tools provided by email service providers like MailChimp, Campaign Monitor etc. 

This observation is not a slant against those great companies or the tool they provide, but an underlying truth about how designers actually design marketing  emails for their brand (or their client's brand) in reality.

Despite the reality of designers using Figma to design their emails, and developers working outside Figma to build them, little progress has been made to connect popular design tools and production-ready HTML.

If designers are using the design tools that they use for designing everything else (websites, banners, apps, presentations etc) to design emails, then it's worth thinking about how these designs are then make the leap from screen design tool (pixels) to code (HTML). 

Considering how regularly these kinds of projects are being done by design and development teams, it's surprising that these two halves of designing and building HTML emails couldn't be more disconnected.

### Removing the designer/developer "hand-off" feedback loop

One of the key problems to solve with the HTML email problem is the completely disconnected nature of designing and building emails, where the pain is felt more intensely with increasing rounds of changes after the development has already been given the go ahead to start. 

Trying to keep the development side in sync with design (even while working in an awesome collaborative tool like Figma) is extremely difficult, as it's not only hard enough to keep track of what changes have actually happened, but actioning those changes can totally change how you originally structured the original code. 

Co-ordination problems aside, once a developer knows what parts of the design need to be updated in code, it still involves them manually re-exporting images, extracting HEX codes for colour updates, copying and formatting text and content; this is all the easy stuff, that doesn't involve changing the actual layout itself. 

Once you understand that each round of changes not only takes a bunch of time doing very manually copy/pasting type work, it also increases the chance of re-introding brand new visual bugs (in email clients) that may have just been resolved after the last round of updates.

Emailify solves this problem by adhering to one of our core principles:

>The distance between design and production should be zero.

The shortest distance between design and production is not "bridging the gap"; the gap has already been "bridged" to some extent, but it still largely involves all of the overhead and headaches described above. By allowing _anybody_ (designers, developers, copywriters, project managers etc) to export an Emailify email design in Figma to HTML with one click, all of the concerns above disappear.

### Attempting to build an HTML email Figma plugin (3 different times...)

It was almost 18 months between starting to work on the idea of building a Figma plugin to help with HTML emails and actually shipping the first release. It's not that the actual build took over a year, but the direction and core approach of the plugin changed a bunch over the course of that time; resulting in 2 totally scrapped plugins, and eventually leading to the 3rd attempt that was published as the first public version.  

#### Attempt #1: Computer Driven

Back in September 2019, the very first version (of what would eventually become Emailify) was a somewhat naive attempt at creating a totally magical plugin where you could literally click a single "Export HTML email from Figma design" button, and the plugin would somehow take care of the rest. Believing this was very possible, I spent a couple of months working on a plugin that would do this. The plugin kind of worked, and included on early (and obvious in retrospect) learnings like correctly ordering the elements in the design by their position instead of relying purely on layer order, but working out basic things like this was only the tip of the iceberg.

As soon as basic layout is working fairly well, you quickly run into questions of "intent" on the part of the designer. When you're working in code for a Figma plugin, knowing about a series of rectangles places in different positions on a page doesn't really provide you with much information about what the designer intends those rectangles to be. For example, is a rectangle with some text on top of it intended to be the visual representation of a row, a column, a hero banner, a lockup that should be "merged" into a single image or something entirely different?

This gets way more complicated when it comes to responsive design. Typically (partly because there's no really good alternative) to do this, designers tend to design a "desktop" and "mobile" version of an email by creating two totally different frames which share the same (hopefully) content, just resized to fit the narrower frame size. From the perspective of a plugin, now looking at 2 totally seperate frames with somewhat similar content, which may or may not be in a similar order or contain similar layer names, it becomes even harder to reconcile these two things.

Do you reference one as the source of truth, and try to match up layers to parse the "responsive intent" of a designer? Do you force the designer to name layers exactly the same thing to make it more reliable? These are all really bad options, and the benefits of what the plugin was meant to offer start breaking down really quickly.

This attempt was essentially scrapped, as attempt #2 would soon take its place.

#### Attempt #2: Human Driven

With attempt #1 hitting a dead end, a few months later led to attempt #2. Based on some of the learnings from the first attempt, I went the other extreme and decided to try and approach where the plugin would actually come with "intent" out of the box.

Not wanting to leave anything in the hands of the computer, this approach was very much a human-driven plugin. Designers would have to select from a handful of super primitive layout and content objects (rows, columns, text, image, button) and then put all of these pieces together in their own fashion to try creating something that then looked like an email.

While it probably would have "worked", it felt way too restrictive, abstract, unnatural, and maybe most importantly _not_ fun or very enjoyable to use. Once again, this attempt was scrapped; until attempt #3 would see Emailify actually see the light of day...

#### Attempt #3: Human-Computer Hybrid

With these first 2 approaches, I had tried 2 different extremes: total computer automation and total human creation. Neither of these approaches make sense. 

For attempt #3, I went back to our own vision of what we're trying to do:

> Our premium Figma plugins **complement** your human creativity with computer automation to 1000x your workflows

We want to empower designers and developers to be creative in ways that are best done by humans (design), and then complement that with automation with the parts that make more sense to be handled by a computer (generating code). This hybrid model drives most of our other Figma plugins, and I believe it's the key to furthering real productivity gains for designers and developers.

Learning from the first 2 attempts, it seemed like the best way to divide the tasks between humans and computers would be to give the computer the parts that could be totally automated: creating the basic structure, layout and content modules on the Figma canvas, and exporting a design to HTML. The human side would involve things that humans are better than computers at: making design decisions and crafting an email that meets their creative brief. 

These two skill-sets are almost perfectly complementary: it allows a designer to maximise their creative time without having to manually draw and configure  basic modules before they can actually bring them to life with content, and it allows anybody to export that design to HTML with one-click; completely saving a developer's time (who really does _not_ want to be writing HTML tables from 1995 and wrestling with Outlook bugs) and allowing them to also have their own time given back to them for working on more interesting pursuits.

Of course, this is just one approach to solving the problem, but after exploring these different ideas, the human-computer hybrid approach is the one we believe to be the best for this type of work.

### What's next from here?

Now that the third approach to building the plugin has been shipped, it serves as a great foundation to be able to continue adding more value and efficiency benefits to designers and developers using it to design and build HTML emails with Figma.

The way the plugin works and how it was built means that we can continue adding more common modules to help speed up the initial layout design process, and reduce the amount of guessing work for constructing common email components. 

At a layer above the modules, this means that fully Emailify compatible templates can be designed and shared at companies internally, but also shared with the Figma Community at large. This would be a massive timer saver in both cases, and it's easy to imagine how these templates would play nicely with other Figma plugins that could provide a way to easily roll out multiple variations of a single email template within seconds - then exported from Figma to HTML within seconds after that.

It's still super early, but we're really excited to continue improving Emailify and the ecosystem around it, with the mission of evaporating the familiar pains of designing and building HTML emails into a distant memory.

---

---
type: tutorial
title: How to add custom animations to your Figma presentations using Pitchdeck
date: 2021-01-12T00:00:00.000Z
---

# How to add custom animations to your Figma presentations using Pitchdeck



#### Video Transcript

Today, I'm going to be showing you how to add custom animations to your presentations in Figma using the Pitchdeck Figma plugin.

The first thing we need to do is quickly install the Figma plugin by going up to the top left, going to the Figma Community, searching for the term "Pitchdeck", and you'll see a result called "Pitchdeck Presentation Studio" pop-up. All you need to do is click on the "Install" button on the right hand side, and once it says "Installed", and looks like this one, you can jump back into your project and we can get started.

To run the Figma plugin, you just right click anywhere, go down to "Plugins", and then click on "Pitchdeck Presentation Studio", and that's just going to open up the Figma plugin that we just installed a minute ago. In this tutorial, I'm not going to be running through all of the features of this Figma plugin, we do have some other tutorials which go into depth on how to use it; today I'm just going to be showing you a brand new feature called "Custom Animations" that lets you add custom animations to your slide elements Previously, you've been able to add lots of different preset animations; different fade-ins different scale-ins, all that sort of stuff, all preset; but today we're going to be creating our own animations that you can then add as custom animations.

To get started, we're just going to click on the "Custom Animations" button in the header of the Figma plugin. You can see here this has opened up a new interface that allows us to create custom keyframe animations using this little Figma plugin interface. The first thing we need to see is the animation timeline; the animation timeline works the same way as a regular CSS animation timeline; you've got zero percent and a hundred percent of the starting and end points of the timeline, and you can switch between those just by clicking on the timeline elements.

You can also add new keyframe to your timeline; if you want to add a keyframe at half, at 50, you put in "50" and click on "Insert New Keyframe", and that will insert a brand new keyframe into the middle.

To edit the properties of any keyframe, you just select the keyframe that you want to edit and then you go down here to the edit keyframe properties section and start changing some values. You can see here if I start changing the values the autoplay is actually going to update over here and give me a live preview. I'll just delete the "50" keyframe for the time being, and you can delete keyframes just by clicking on the keyframe and then clicking "Delete Keyframe" down here, and that will remove it from the animation.

We can see here that on the zero percent we're currently starting the animation at 170 pixels below; we've got a Y value of 170 pixels, and I'm just going to change the opacity down to zero; so what that's going to do is it's going to fade in from below, and it's just going to come up to the 100 keyframe which is where the Y position is at just a zero and the opacity is at 100. We're basically going from zero percent with an opacity of zero and a Y position of 170 pixels, and then we're ending on opacity at 100 and the Y position at 0, which is just the exact spot where it is in your Figma canvas; that's just a really simple fade in up animation.

The other thing we can do before we save this is just change the easing; if you do want to change the easing to something like "linear", to not have any easing, you can do that or you can use the other options like "ease in", "ease out", or "ease in and out"; these are just different options you have for adjusting the easing, and you can see what that looks like in real time at different speeds just by adjusting the live preview speed slider down here. This is a seven second version of the animation, or we can see what it looks like really fast and do half a second; that's just a really quick preview of what it's going to look like at that speed in your animation layers.

At the moment, I'm just going to save this as it is because I'm happy with the fade in up animation. I can also add stuff like scale and rotation, so if you wanted to add scale you can do that, you can make it scale in. You can add some rotation; it also rotates in as well; you've got these five properties to play with. I'm just going to name this "Fade Rotate In", and that's just underneath the "New Custom Animation Name"; I've called it "Fade Rotate In", and now I'm just going to add that new animation to my options by going down here in the bottom right and clicking "Add New Animation"; you can see here it's just telling us that we've added the fade rotate in to our animations.

Now if we go to our layers and open up the animation select box again, we can see down here underneath custom animations that we have our fade rotating option that we just added. To select that, we just click on "Fade Rotate In", and you can see there it's adding the animation that we've just created in our custom animations panel. As I've shown you before with the speed, we can actually slow this right down; if we want to do a super slow in animation in, I can actually add a delay on that so it comes in after a second, and that's what it looks like.

We can also update this animation if we decide that actually we want to change it a little bit. We can go back into "Custom Animations", open it back up, and to load an animation that you've already saved. You can just go up here to the "Saved Animations" drop down, click on that, and then go down to the animation you want to update; click on "Fade Rotate In", and you can see here it's just loaded up our saved properties once again. In this case, I might want to add a new keyframe in the middle of the animation where I add it at 50 percent. I've just clicked it at "50", and what I can actually do is I can copy/paste properties from different keyframes as well. If I want the properties from my "100" keyframe to be copied over to "50", I just click on the 100 keyframe then click on "Copy Properties", that's now copied it to the clipboard. If I click back on to "50", and then click on "Paste Properties", you can see here it's actually pasted those properties from 100 onto the 50.

What that means is I can now modify this to be different to 100 and have it as a middle frame in my animation. For example, I could do something a bit weird, like make it scale up really big and then come back in; this is adding a middle step at the 50 mark of the timeline, so I can make that I can make that go up to 2x or 2.5x, really whatever I want to do; in this case, I'm just going to add that scale keyframe and I'm going to click "Update Saved Animation". It has updated the animation for us, and because we've already got this applied, all we need to do to preview it is just click on the "Play" button up here. We can see here the updated scale keyframe has been added in and that's been added into our animation that we can see; I've just sped that up a bit, so you can see it again, and that's how you can go about updating the animations.

You can also fork the animation if you want to create a new animation but also keep the original one. You can go back into "Custom Animations", load up your animation again, and in this case maybe you want to add some more crazy rotation for some reason; you could then re-save that up here in the "New Custom Animation Name" box, so we're going to do "Fade Rotate In Big"; I'm going to enter that name in there, and instead of clicking "Update Saved Animation", I'm actually going to click on "Add New Animation" again. That's added "Fade Rotate In Big" to our animations, and now you can see here I've still got my "Fade Rotate In", but I've also now got another option "Fade Rotate In Big", which has our variant that we just added a minute ago. That's a way that you can really easily fork or change animations based off an existing animation, and also update existing animations, too.

If you do want to delete an animation, you can do that as well. Just click back into "Custom Animations", select the animation that we just added, and down here we're going to click on "Delete Saved Animation", and deleting that saved animation removes it and automatically sets the animation back to nothing. This is now not animated, because the animation has been deleted; but of course, we can go back in and re-add another animation and that will add it back onto the element.

That's that's a rough overview of what it looks like to create custom animations in the Figma plugin for your presentation. You can create as many animations as you like, you can update them, save them, delete them; really do anything you want, the creativity is really up to you. You can add as many keyframes as you like, make the animation as complex or as basic as you want; I created another one earlier which is just a basic scale up and right one; I'll give you a preview of that, and that's just a really subtle animation to add in that little photo. If we wanted to see how that looks, I can open up my animations panel, click on "Scale Up Right", and you can see here it's a really simple animation. All I'm doing is I'm starting it off at 200 pixels down, the Y position is 200 pixels, starting at with an opacity zero, adding a little bit of negative rotation on there, I'm starting the scale at about half, and then I'm scaling it up to 1.3x, reducing the amount of the rotation to zero so it just rotates back to its original rotation, scaling up the opacity, and then I'm making it the X value go a bit to the left; and finally it just goes back to its initial position at the 100 mark. You end up where it actually is in the Figma canvas; that's what it looks like, that's how you can go about adding completely custom animation timelines to your Figma presentations.

It's worth noting that these animations will only be visible when you use the "Pitchdeck Web URL" export setting. I've got another tutorial on all the export settings, but just briefly, if you click on "Export Presentation", all of the animations that you've just added will be usable in the web Pitchdeck Web Presentation, but they won't get carried over to any of the other export options; for example, a PDF deck won't have any animations, neither will any PowerPoint or Keynote or Google Slides files that you export from the Figma plugin. The animations are just for the presentation that you run in the Pitchdeck Web App, but the other ones won't have any animations at all; it's just worth keeping that in mind if you are using the animation feature in the Figma plugin.

I think that's a good overview of creating the custom animations in Figma; really, it's up to you to go ahead and unleash your own creativity and build out your animation timelines as you see fit for your own decks. I hope you have fun with it, and until next time, thank you again for watching; we'll be back soon with more Figma tutorials just like this one.

---

---
type: tutorial
title: How to export GIFs from Figma layers using TinyImage
date: 2020-12-31T00:00:00.000Z
---

# How to export GIFs from Figma layers using TinyImage



#### Video Transcript

Today I'm going to be showing you how to export animated GIFs from Figma using the TinyImage Figma plugin.

The first thing we need to do is go to the Figma Community and install the TinyImage Figma plugin, if you haven't already. You can do that by searching for the term "TinyImage" in the search bar and under the "Plugins" tab you'll see a result pop up called "TinyImage Compressor", and if you haven't already done so, there'll be an "Install" button on the right hand side; just click on that, and once it says "Installed" you'll be ready to go.

Now that we've got that installed, we can go back to our project and run the Figma plugin just by right-clicking anywhere, going down to "Plugins" and then clicking on "TinyImage Compressor"; and that's just going to fire up the Figma plugin that we just installed.

To create a GIF, we need to click on this button in the top of the Figma plugin that says "Create a GIF"; just click on that once, and it will prompt you to select some layers on your page that you want to use as the frames for your GIF. You can actually select those frames before you click the button and that will automatically load them in, or you can just click the button first like we've just done, and we can select them now. I'll show you what that looks like; just go to your Figma canvas and select as many layers as you want, and these will make up the frames for your GIF and they'll be the ones that we're going to be animating in a second. In my case, I'm just going to be selecting all of the six frames or photos that I've got in my Figma file. You can see down here the button has changed to say "Use Selected Layers" and it's got "6" in the the brackets to tell us how many we've selected. Now I've selected those, I'm just going to click on the "Use Selected Layers" button here and that's just loaded up a preview with all of our layers that we've selected.

I've already used this before, so there's a couple of preset values in here, but I'll go through all of these with you now so you can understand what's going on. The first thing to see is we've just got our little preview up here; this is just playing back what the GIF is going to look like, and what the speed looks like, and the ordering looks like in real time. You can change the order of these by changing the drag and drop feature here; you just click on any of the frame thumbnails and drag them along and you'll be able to manually reorder those frames in the order that they get played back here. The other way you can order your frames is by clicking on this little drop down box here, and you'll see some preset options to do ordering; we can order by the frame layer order and that will order them the way that they're ordered in your layers panel, you can order them visually, so if you want to sort the frames from left to right we can just click on that and you can see here it's going from top to bottom and then left to right; we can do that in columns, as this one is, or we can do it by row, so if we do the row version it's going to sort it from the top all the way across and then go to the next row and then sort all the way across to the bottom. That's the way we can visually order it.

The other thing we can do is change the pause and play state of the preview. I can click "Pause" and that just stops it wherever it is, and then I can manually navigate using these arrows; that's just a really nice way of double checking all the ordering or just pausing the animation to see what's going on. You can also restart the animation to the front just by clicking this reset button, and you can also do that while the animation is playing; if you want to reset it during the animation back to the start to see what it looks like back at the start, that's the quickest way to do that.

The other option we have is changing the speed; if we click the "play" button again, we can actually change the speed in real time. If I change this from one second per frame down to 500 milliseconds per frame, you can see here that it's going much faster than it was before. I can even speed that up again, so I can do it to 100 milliseconds and that's much, much faster again, or I can do the other extreme and slow it right down; if I want to each frame at two seconds each, that's the way I can do it there, I just set the timer to 200 milliseconds, which is two seconds, and you'll get a two second delay per frame now.

The other thing that we can do is individually override those timings as well; if I want frame two and frame four to both be 500 milliseconds, I can do that, and that will override those two frames. You can see here it's jumping over those in half a second, those two specific frames, but all of the other frames are still inheriting the two second delay that we've set down here. That's just a really nice way of overriding those frames if you do want to have a certain frame go quicker or stay on longer than any of the other frames; you can do that manually using those controls there.

The other option that we have is to loop or playback the GIF. By default, it's just set to "infinite", so it will just loop forever, but you can uncheck that option and overwrite it. If we want the GIF to play back only four times and then stop, we can uncheck "infinite" and change that playback value to "4" or I can make it go twice, or I can make it go 10 times, it's really up to you. In my case, I'm just going to leave it on
"infinite" and just have the GIF loop over and over.

The next section we have is the sizing. By default, it will pre-populate the size with whatever the first Figma frame that you've selected is. In our case, we've got the frames here; you can see it's "1711" by "1142", and that's been pre-populated down here, so you don't need to worry about pre-filling that. Of course, you can change those sizes as well, so if we wanted to change that to "500" let's say, you can change that, and we can see the preview instantly update there, or we can actually set that to something different where we've got "500" by "1711", or "500" by "500", and that's just going to change that to a square ratio instead of the more landscape version that we had a second ago. I'm just going to undo that now and put that back to where we had it.

The other thing I did want to show you was the scaling; we've got scaling, and currently it's set to half. By default, it gets set to "@1x" and you can see over here it's giving us a preview of what the actual pixel size is going to be exported as when we save our GIF. At "@1x" it's always going to replicate whatever we've got here, but we can easily halve that or double that or quarter it just by clicking on these presets. If we check "@0.5x", that's going to halve it, if we check "@2x", that's going to double it, and it gives us a preview in pixels of what that's actually going to get saved out as. In my case, I'm just going to leave it as half, I'm going to do "@0.5x".

The other option that we have is to do a background color. Currently we can't see a background because we've got our image filling up the entire frame, but if we change this "cover" option to "contain", and then we change our sizing down to "500", let's say. You can see here, by using the "contain" image option, it's actually making sure that all of the image content always remains in the frame, and it does that by adding in some blank space at the top and the bottom, or the left and the right, depending on the ratio that you've selected. If we change "contain" back to "cover", you can see the cover option will always make sure that the entire frame is covered by the image content, and in that case it will crop off wherever it needs to crop off to make sure that it all fits; but if we do use "contain", that's the option where the background color comes into play.

If we wanted to change this from the default black background to a white background, we can add a hex code for white, so we can do "#fff"; that will change it to the white hex code, and we can see in the preview it's just updating to show us what that would look like if we would export it. You can put any hex code you want in there, and if you are using the "contain" option and you are getting these bars on the left and the right of the top and the bottom, you can change the background color manually just by changing that field there.

The other option we can we can do is transparency; you can make the background transparent if you've got those gaps in there, or more importantly if you're using transparent SVGs, or transparent PNGs, as part of your layers. If you're doing a sprite animation or something along those lines, then the transparent background option can be really handy for exporting a GIF with transparent edges. If you're using character animations, or using transparent GIFs, SVGs or PNGs as your source material; in my case I'm going to leave that off and I'm just going to revert that back, so I'm going to make this just a completely square image and I'm going to set that to "cover".

In this case I'm going to select the image quality to be pretty high, so I'm just going to leave it at 90. It's pretty safe to leave it up there, it's not going to blow out the file size too much compared to something really low with the GIF files in particular; you can leave that somewhere around 80 to 90 and you'll be you'll be pretty safe.

The very last option is dithering; by default no dithering is added. If you are familiar with some of these dithering options and presets, and you know what is going on there, feel free to play around with those; but for almost all cases you can just leave it on "No Dithering", and that's just going to leave the image looking how it's pretty much meant to look.

Okay, now that we've got all of our settings configured the way that we want, and we've got our GIF playing back the way that we like it, all we need to do now is finally click on the button that says "Export GIF" that's just in the top little header up here. I'm going to click on that now and this is going to add all of the frames and render a GIF from Figma for us. It's just finished; I'm just going to click on "Save", as we're prompted to save it to our computer. I'm just going to save it to the desktop, click on "Save", and if I preview that now you can see here it's giving us our GIF file just the way that we saw it in the Figma plugin. We can go ahead and upload this on our website, or we can send it to our team via Slack, or really use it for whatever you want; this is your your exported GIF from Figma. You can basically send it around or share it or upload it anywhere you want, and that will work as expected.

There we go, that's the process of exporting animated GIFs from Figma. This is an updated tutorial of one that we had out a while ago, just because the interface and the features have been updated in the TinyImage Figma plugin quite a lot since that first tutorial, so if you've come from that tutorial, this is a more updated one which will reflect much closer to what you'll see in the the Figma plugin if you download it today. I hope you've enjoyed watching this Figma tutorial, and I hope if you're creating GIFs with Figma then this has been helpful for you. Please let me know if you have any feedback or questions, always happy to help; and until next time, thank you again for watching.

---

---
type: tutorial
title: How to export WebM videos from your Figma layers using TinyImage
date: 2020-12-30T00:00:00.000Z
---

# How to export WebM videos from your Figma layers using TinyImage



#### Video Transcript

Today, I'm going to be showing you how to create and export animated WebM videos from Figma using the TinyImage Figma plugin.

The first thing you'll need to do is install the Figma plugin by going to the Figma Community, searching for the word "TinyImage", and under the "Plugins" tab you'll see a result called "TinyImage Compressor" come up. If you haven't already installed it, there'll be an "Install" button on the right hand side, just click on that and you'll be ready to go.

I'm just going to switch back into my project and run the Figma plugin we just installed by right-clicking anywhere on the page, going to "Plugins", and then going down to "TinyImage Compressor" and clicking on that; that's just going to open up the Figma plugin that we just installed.

The first thing we need to do is click on this "Create a GIF" button; this is going to open up a little dialog down here, and it's going to prompt us to select some layers that we'd like to use as the frames for our GIF. Obviously we're clicking the GIF button, but we are going to be exporting a WebM video file, so just keep that in mind.

Okay, all we need to do is select the layers that we want to use for our animation, and I'm just going to select all of mine. You can see down here that it's changing how many layers it's picking up on; you can pick less or morem it's really up to you, but you can use any Figma layer in your designs for this process. I'm just going to use those six and then click on "Use Selected Layers" and you can see here it's loaded up all of those frames we've just selected from Figma into the TinyImage Figma plugin.

It's giving us a little playback preview directly in the plugin window. You can see here I've got all of my frames, all six, and there's a few things I can do here. I can re-arrange them either by manually dragging the frames around, so I can click and drag those frames to drop them into different spots; I can do that manually or I can actually go up to this little drop down here and I can click on that to get some pre-defined sorting options. What I can do is I can actually sort those visually, so if I want to sort them by left to right visually, that's going to correlate to what we see over here on the Figma canvas. I can also sort them from bottom to top, so if I want to do bottom right to the top left I can do that, or I can just sort them by their layer name; so if I've named them in a certain way in my Figma layers panel and I want to arrange them in that way, I can just use the sorting option there to arrange them as well. I'm just going to use the visual option for now.

Now we've got our layers visually ordered the way that we want, we can we can play back the frames a little bit differently if we want to. If you want to actually go through them manually, I've just clicked on the "Pause" button, and now I can actually go through them one by one and just make sure that they're in the order that I wanted, and click this button here just to go right back to the start, and that's just going to do that. I can also click that button while it's playing, so I can click on the "Replay" button, and that's just going to keep taking me back to the start every time; that's the way you can control the preview there.

The other thing that we have access to is changing the delay between the frames. At the moment, it's half a second between each frame, I can decrease that to make it faster, so I can change that to be 200 milliseconds or 150 milliseconds, and you can see it's going much faster now. I can also slow that down, if I wanted to bring that all the way down to a one second or two seconds, that's something that I can do as well; it really just depends on what you want to be doing in your GIF. The other option you do have as well is changing it manually per frame, so if I want this second frame to go by really quickly and this fourth frame to go really quickly, I can do that, I can make it even quicker if I want; and now that's basically going to change those two specific frames to be played back a bit quicker. You can see there, it's just jumping past the second and fourth frame much faster than every other frame, which is inheriting the one second delay that we've got over here. These are in milliseconds as well, so that's 200 milliseconds, and that's 1000 milliseconds, which equals to one second.

Then we can see here we've got a couple of other options; we can we can replay the animation infinitely, so that's just going to infinitely loop it and or we can actually uncheck that and say exactly how many times we want the animation to loop; we can do loop three times, or loop twice in this case, and I'm just going to set it to "Infinite".

Down here we've got the size of the exported image, or exported video; this just takes on the first frame that you've included in your frame selection, so if we have a look over here you can see that it's 1711 pixels by 1142 pixels, and that's just getting automatically pre-filled there; a really quick way to scale that if you want to export the frames at a different size is you can either manually change it there, or I like to use the scale option. You can actually just say I want that at half the scale, or twice the scale, and that's just going to show you what size is actually going to get exported at. In this case, I might just do it at half the scale.

The last options down here that we have are the background options. If we wanted to change the background color, this is only useful if we're using an option where the images are different sizes, and we're using the "Contain" option, and that's going to make sure that any different sized or ratio sized images are going to get "contained"; which means that you'll end up with some different solid colors on either the left and the right, or the top and the bottom, depending on how it's going to fit that frame size. If you do want to change that, you can change it down here, so if you wanted to do a a white background you could put in the hex code for white, but in this case we don't have any of that that background color, so this is not going to make any difference in our case.

Same thing goes for transparent background; if you're using frames that have transparency or PNG icons, or PNG icons, or something like that, you probably want to enable the "Transparent Background" option, but if you're just using photos or using images that take up the entire frame, you can leave that transparent background option completely turned off.

As I mentioned before, this option here will determine whether the images cover the frame, so whatever size frame you're sitting here if you check the "Cover" option, the images in your frames will always be made to cover or fill that frame, and you won't have any blank spots in the in the sides or the tops on the bottom. If you decide to go with "Contain", contain is going to make sure that it always contains all of the image content even if that means squishing it down a little bit and then adding in those solid colors that I mentioned a minute ago; those are the options that you have there for fitting the images.

Finally, we've just got the image quality; you can change this up or down, you can tend to leave it up pretty high unless you really need to squash the image size down, or the compression down, but typically it's fine to leave it around 80 or 90. Finally, we have dithering; by default there's no dithering included, but if you know what these options do, then feel free to have a play around with them, otherwise it's pretty safe just to leave it with "No Dithering".

As I mentioned, we're going to be exporting to WebM today; this is a brand new feature in the TinyImage Figma plugin, and instead of exporting to GIF, which we could also do, I'm going to show you what it looks like to export a WebM video. I'm going to click on "Export WebM" now, and this is just generating a WebM video with all of those frames. You can see here it's finished and prompting me to save the file, so I'm just going to save that to my desktop; I'm going to click on "Save".

Probably the easiest way to open it is just open up in your web browser; I'm just going to open up this file in the browser now, and you can see here that we've got our WebM video playing back nicely. This is just in the browser, and WebM is a is a web video format, so you can include this on your web pages, you can send it around, and it's typically a really good way to share video via the web. That's what it looks like, you can see there, it's skipping over those frames much quicker the two frames that we added the higher speeds on; they're getting skipped over a bit quicker, but the rest are getting played back at the speed that we expected.

Cool, so that's what it looks like to export the WebM file directly from Figma, and you can play around with this yourself. There's many use cases for it, of course, but it all depends on what you want to be doing with it, and what kind of content you want to include in your WebM video export from Figma. I hope that's been helpful for you if you've been wondering how to export WebM files from Figma, you can do it using the TinyImage Figma plugin. If you give it a go, I hope you have good results; thank you as always for watching, and we'll be back very soon with more Figma tutorials just like this one.

---

---
type: tutorial
title: How to add custom animations to your Figma banner designs using Bannerify
date: 2020-12-28T00:00:00.000Z
---

# How to add custom animations to your Figma banner designs using Bannerify



#### Video Transcript

Today, I'm going to be showing you how to add custom keyframe animations to your HTML and GIF/MP4 banners.

The first thing we need to do is just go to the Figma Community and install the Bannerify Figma plugin. If you haven't already done so, we can go to the top left corner, go to the search bar under Figma Community and just search for "Bannerify". You'll see a result called "Bannerify Banner Studio"
pop-up, and if you haven't already installed it, you'll see an "Install" button on the right-hand side; you can go ahead and click on that, and once it's installed we can jump back into our project.

Now we're back in our project, we can right click anywhere, go down to "Plugins" and just click on "Bannerify Banner Studio", and that's going to open up the Figma plugin that we just installed. What it's doing is it's actually loading in all of our frames as banners; each of these frames is treated as a banner in Bannerify, and each child layer in those frames is treated as an element inside of the banner. If you've seen tutorials on this before, or even if you're just new to the Figma plugin, you see pretty quickly that we've got a whole bunch of different animation options here. These presets come shipped with Bannerify; we've got a bunch of entrances and exits you can change these to do different animations really quickly they're just really common presets, so you can use those as much as you want.

However, we've just shipped a brand new feature which allows you to create your own completely custom CSS based timeline animations. The way you can do that is just by clicking on this button called "Animations" in the header, and clicking on that will give you this brand new interface which allows you to create custom animations, and I'll just take you through that now.

The first thing you can see is we've got a place to give our animation a name; this is a required field, but you can leave that to last if you don't know what kind of animation you're actually going to create yet. We've got our saved animations over here, so if you haven't saved any animations at the moment this will be blank but I've already saved one, so that's just sitting under there as a saved animation. I can actually load that in if I want to click on that, and that will automatically load in an animation that I've created before. However, I don't want to use that one just now, so I'm just going to actually get out of that and jump back in and that's just going to start a brand new animation timeline for me.

Speaking of the animation timeline, we've got that just sitting right here. By default, it will always create two frames, the first frame at 0 percent and the last frame of the animation at 100 percent, and you can click through those animations just by clicking on either of those. You can also add new keyframes as well; you can see this little "Insert New Kyframe" button over here, and that will let you insert a keyframe at any point in the timeline; we'll have a look at that in a second.

Then the most interesting part is the keyframe properties settings; these five properties are what you can actually change to get the keyframe animations looking like they're moving, so we've got our X-axis; it's left to right, I can move that from left to right, or right to left. We've got our Y-axis; that'll go up and down. We've got our opacity; I can fade the element. Then rotation; if I want to rotate the element. Then finally, scale; if I want to scale that element up or down, I can do that by dragging on these.

You can see here that it's updating the live preview in real time, so whatever animation properties you change on any keyframe that will automatically get reflected over in the live preview over here. You can see exactly what the animation is going to look like.

Finally we've got our little animation easing options here; you can go through and change it, so if you need to be a linear animation you can select that option, that will remove any easing, or you can add easing in and out, or just in or out; and that's just going to change the way that the animation comes in and out of the of the frame. I'm just going to leave it on ease for now.

What we can do is we can create a simple animation just by changing these properties. What I can do is just put these at the defaults for now and then we'll go through and change it based on what we actually want the animation to do. In my case I'm just going to have it roll in from the right hand side, so what I want to do is I want to start the animation from the right. For example, I might do 100 pixels from the center, and then I want the animation to also fade in when it rolls in. I'm just going to change the opacity down to zero for the first frame, and the rotation I'm just going to change it now to be let's say 200 degrees. It's going to roll in 200 degrees from the right hand side, and I also want it to scale in; I'm just going to remove the scale or make that about half; that's going to scale in from half size and rotate in from the right and the 100 keyframe is still set on all the defaults; what that means is at a hundred percent it's going to end up exactly where it where it's positioned in your Figma design. It's going to be exactly from the left and the top, it's going to be a 100 opacity, no rotation and just the regular size.

That's actually what I do want, but I might also want to add more keyframes in between; maybe I want to do something once it gets to the middle of the timeline, so what I can do in that case is just change the the keyframe. I can change it to let's say "60" and click on "Insert New Keyframe", and what that does is it copies whatever frame I was already selected, it'll copy all those properties into a brand new keyframe and it will adjust it to wherever you've set it to at the percentage; in this case it's at 60 percent. What that means is it's actually not even starting the animation really until it gets to 60 percent of the way in. We don't actually want that to be the case, we want to actually change this so it's a little bit different; what I'm going to do is I'm going to copy the properties from 100 percent; copy that, and that will copy all of these properties, and now I can paste that onto my new timeline keyframe that I've just added. I'm going to click "Paste", and you can see there it has actually changed it; now 60 has inherited the properties from 100.

What I can do now is I can actually change that to be a different animation once it gets to 60 percent. I can have it go down; I can animate it in, so it ends up 100 and something pixels down. It's actually bouncing in from the right, but also bouncing down and then it's bouncing up once it gets to 100 percent. I can even change that a little bit; I could make it go scale up once it gets to 100 as well; if I wanted to scale that to 1.5x, I could do that, and now you can see we've just created this little timeline where it's going from the right hand side with rotation, half scale, opacity zero, and it's fading all the way in to the default but we've just set the Y position to be down; it's coming in from the right, and then on the final frame that's where all the defaults come back and the scale gets put up to 1.5x.

That's a nice little timeline, it's a interesting keyframe animation that you wouldn't be able to get from the presets. I'm just going to change that to a custom animation that we can use in our banners now. All we need to do is actually name this animation, so I'm going to call it "Bounce In Right", so that's the name that's going to come up in our options in a moment. All I'm going to do is click on "Add New Animation", so it's telling us that we've added "Bounce In Right" to our animations. What I can do now is I can actually use that by just clicking on any of the animation select boxes, and you'll see under a brand new heading called "Custom Animations", you can see that where we've just added our "Bounce In Right" animation; I'm going to click on that now and you can see it's loaded that in.

You can play that replay that here just by clicking on the "play" button, and you can see it's bouncing in from the right and bouncing up; I can actually change the speed of that just by moving this timeline over here and now it's actually slowed it right down. I can add a delay, so it only comes in after one second, and that comes in like that. I can shorten that, or make it coming straight away; but let's say that I'm not happy with that scale because it's just too big; I can actually still change that by just going back into the "Animations" panel. As I showed you before, we can go to the "Saved Animations" drop down, so I'm just going to click on that, and if we select the animation we've just added; the "Bounce In Right" animation, that's just going to immediately load that animation back up once again.

Okay, we've decided that we don't like that ending scale, so I'm just going to remove that and get it back to 1x, just at the default size, and we can see here that it's now not scaling up at the end. We're just going to get it looking exactly like it does in the Figma design, and we can actually preview the speed in here as well. If you want to slow that animation down just to see exactly what it's doing or preview it at the speed that you think you're going to use it at, you can use this little speed slider down here where you can change the speed from less than a second to make it really quick, or all the way up to 15 seconds to make it really slow. I'm just going to leave it at two seconds for now, and now that we've just changed the ending option we have two different ways to go about this now.

The first way we can go about it is by updating the saved animation, so clicking "Update Saved Animation" will override the animation that we've just added and that will update any layers that you've already applied the animation to in your timeline over in the the other window we're just looking at; that will override it the other option you do have is to create a new animation based on that edit; what we can do is we could do "Bounce Right", let's say v2; we can call it "v2" and we can click on "Add New Animation" and now it's added a v2 to our animation. You can see here this one is still the "Bounce Right" animation; we've still got that applied, but now we've got this brand new one which is basically forked from the "Bounce In Right" one, so if I click on that, you can see there it's ending on the the new scale that we set up.

We can do that, but I'll just show you what it looks like to override that as well. If we re-click on the "Animations" button, load up the saved new animation, the "Bounce Right v2"; okay, we've got that one there and what we can do is we can change this, so maybe we want the rotation to be like that; maybe it rotates up as well; I've just changed that on the 60 frame and instead of creating a new animation. I'm just going to click on "Update Saved animation", so now that's updated our "Bounce Right" animation, and because we've already got that applied, I don't need to reset it. If I just click on "play", you can see now it's loading in that brand new rotation part of the animation, so I didn't need to update it. That's that's pretty neat, because if you've already gone through and applied that animation to all of your banners or different places in the banners it will automatically update all of those for you.

There's a couple more little things that we can do if we re-click on "Animations", and load up the one that we just created. The other thing that you might have noticed is we can delete keyframes. Let's say we actually don't want this 60 percent keyframe anymore, we can go ahead and delete that just by clicking on the "Delete Keyframe" button here; you can see that's just removed the 60 percent keyframe entirely and left us with just the 0 and 100 again. In this case, it's really not adding that middle step of bouncing all the way down when it comes in, it's just going completely from the right straight over to the center or the original position; that's the the way you can go about deleting keyframes. It's worth noting that you can't delete the 100 or the 0 percent keyframes; those are those are blocked out purely because an animation just has to have at least a starting point and an ending point, and then it's up to you if you want to add any in between points or not.

We can do the same thing for animations. If we want to delete an animation; first of all I'm just going to update this saved animation, so that one's now updated, and we can see here that's just coming in from the right now. Let's say I want to delete one of my other animations, so I can delete an animation just by selecting it clicking on "Delete Saved Animation" down here, and now that's deleted the "Bounce In Right" animation. If I click on this, you can see here under "Custom animations", "Bounce In Right" is now deleted. If we were to delete the "Bounce In Right v2" when it's already selected, I can show you what that looks like deleting; that will remove it from the list, but also revert the animation to be "No Animation". That will just remove any animation on that layer, so that's worth being mindful of in case you've set that animation and now you need to add a new one, you can just go down and just change it to a preset or a different custom animation.

That's basically what it looks like to create custom animations for your banners in Figma using the Bannerify Figma plugin. Of course, these animations will get included with any export that you do, so if you're exporting this to a GIF or an MP4 video using the "Export to GIF/Video" feature here, those animations will get included; or you can export those to HTML, so you can you can export that to an HTML banner set, or a set of banners for different advertising platforms that you can select down here. Either way, you get all of those custom animations that you create using the Bannerify animation tool that we've just been looking at; those will automatically get included, so you don't need to code them, you don't need to use any video software or anything like that, all of those custom animations will automatically get included in your renders.

That's basically it; I hope it's been helpful if you've been wondering how to break out of the animation presets in Bannerify and create your own, now you can you can go crazy and go about creating whatever interesting keyframe animations that you want and use them in your own banners. I hope it's a useful feature for you, and best of luck if you do try it out; and if you have any feedback or questions, please let us know. Thanks again for watching.

---

---
type: tutorial
title: How to spell check Figma presentation slides using Pitchdeck
date: 2020-12-28T00:00:00.000Z
---

# How to spell check Figma presentation slides using Pitchdeck



#### Video Transcript

Today I'm going to be showing you how to spell check your slides in a Figma presentation using the Pitchdeck Figma plugin.

The first thing we need to do, if you haven't already done so, is just go to the Figma Community by going to the top left, and searching for the word "Pitchdeck"; and under the "Plugins" tab you'll see a result called "Pitchdeck Presentation Studio" pop-up. If you haven't already installed it, you'll see an "Install" button on the right hand side; you can go ahead and click that, and then we can jump back into our project.

Now that we're back, I'm just going to launch the Figma plugin by right-clicking anywhere, going down to "Plugins" and clicking on the "Pitchdeck Presentation Studio" item. That's going to load up the Figma plugin that we just installed, and you can see here we've got all of our slides. I'm not going to cover all of this detail, as I've covered a lot of this stuff in other YouTube videos; if you want to have a look at how to animate things or actually export these presentations, I do have a number of other videos on the YouTube channel for that, but today we're just going to be looking at spell checking our slides.

This is a new feature in the Figma plugin, and we can access it by clicking on this little "check" icon in the top header here; if I click on that, you'll see a little panel slide out and this is going to let us spell check our Figma slides for spelling errors. By default, it selects "English (United States)" as the language, but if we click on that select box, you can see we've got a whole bunch of different language options here that we can choose from. You might have your designs in a completely different language, and if that's the case, you can just click on any of those and that would select that language. Today, I'm just going to be using the "English (Australia)" version, so I'm going to click on that, and then once you've selected your language all you need to do is click on the "Find Spelling Mistakes" button and that's just going to spell check our Figma design.

It's just checked it and found six different spelling errors in our Figma slides. We can take a look at those now, so we've got "design" which is spelled incorrectly with two e's, we've got "good" with too many o's, "innovative" is spelled incorrectly, "principles" is spelt incorrectly, we've got this spelling mistake here and this one here. We can go through these pretty quickly and individually, so the first thing we can do is just we can see here that the spelling error is showing up here. I'm just going to correct that by clicking on the correct option, so in this case I'm going to click on "design", and you can see there it's just instantly corrected the word "design" to the correct spelling.

I can also undo that if I made a mistake; if I picked the wrong one I can click on the "Undo" button that just undoes the spelling error correction; then you can pick a brand new one if you want, and you can undo that; it's really quick just to change it and then undo it. This one underneath is a little bit different, because it has three different places in the design where the spelling is different; what I can do is I can actually inspect where all those are located. I can open this up and if I click on the little "search" icon, that's just going to instantly jump to the place where the spelling errors occurred. You can see here we've got one here, we've got another one down here, and we've got another one down here in slide 10.

The cool thing is I can correct all of these at the same time by just doing the same thing as before and clicking on the correct spelling. I'm just going to click on "good" and you can see here it's changed it, but it's actually changed all three. If we go back to the other two, you can see those have been changed as well and just like before we can undo those, and that will undo all of them. Then we can change it back to the correct one if we want as well, and then it's really easy just go through all of them just click on the right spelling. I'll just change this one, I'll just change this one and "useful".

Then again for this one, this is a little bit ambiguous, we don't know what the context is. I'm just going to open up the spelling flag again and click on this little "search" icon and jump to that. In the context of this sentence, it's actually meant to be "thorough", so "good design is thorough down to the last detail". The first suggestion is "throughout", but that's actually wrong, so you want to always check the context and make sure that it's the right spelling. I'm just going to change that to "thorough" and click on that, and that will correct the spelling in Figma.

That's really all there is to it; it's a brand new feature in the Pitchdeck presentation Figma plugin which lets you design and animate and export presentations from Figma to a web-based presentation tool, or you can export it to PowerPoint files, Keynote files Google Slides, or just a PDF file. This is a brand new feature that lets you just double check all of your spelling before you actually export the frames from Figma to a slide deck, and I hope you find it useful in your own workflow. Until next time, we'll see you then.

---

---
type: article
title: From Zero to One
date: 2020-12-21T00:00:00.000Z
---

# From Zero to One



One year ago today, Figmatic launched with little more than an article announcing that [it's time to get back to the future](/articles/it-s-time-to-get-back-to-the-future/). The general theme of the article is that our workflows in general, and design/development in particular, are broken. Not only that, they have remained largely stagnant for the better part of two decades.

Since we launched 12 months ago (with zero Figma plugins, zero users and zero revenue), we have built and released 9 premium Figma plugins; which as of posting this article, have 61,000+ active installs.

### Starting a startup in a pandemic

Within a couple of months of starting Figmatic, like many places in the world, we entered a strict lockdown here in Melbourne, and were unable to leave our homes much for the next 7 months. I mentioned [at the time](/articles/building-a-startup-in-a-pandemic/) that I had tried to ask myself if there were any _benefits_ to starting a startup under those circumstances, and I came up with a few:

1. There would likely be less competition, as fewer people will be interested in starting companies at the beginning of a pandemic.
2. The shift to remote work would potentially lead to more adoption of Figma inside companies as a design tool.
3. Less tolerance for wasted time/resources inside companies, where hopefully more design automation would be welcomed.
4. Forcing function to focus solely on Figmatic while locked inside for 23 hours per day. 

I was also struck by a Tweet from Paul Graham, which I really resonated with:

>Any startup that gets started during the next few months is disproportionately likely to succeed. Success depends most of all on determination, and imagine how determined you have to be to start a startup in the middle of a global pandemic.

— Paul Graham, _Y Combinator_

I knew that if we could build a startup during a pandmic while remaining determined and focused on doing the right things, then we could not only manage to avoid death, but emerge stronger on the other side. 

### Hyperbolic Time Chamber (work every waking hour)

In the anime series, Dragonball Z, there's a structure you can enter called the "Hyperbolic Time Chamber", where one year inside the chamber is the equivalent to one day on the outside. 

From March onwards, this is how I personally visualised and thought about building Figmatic during the pandemic lockdown. I knew that it would be this weird period, where days often felt like weeks, and if that could be leveraged to actually 10x the amount of work that would normally get done in a typical office environment, then it could end up being a positive for us.

Many people will argue that it's not healthy or beneficial to be working crazy 80+ hour weeks, as it destroys any sense of "work/life balance" or is just plain ineffective, and they will say that perhaps a better approach is to work many fewer hours per week, and just focus on the things that actually matter instead.

However, to my way of thinking, the best approach would be to do _both_. If you can remain hyper focused, continually choosing the single most important thing to focus your attention on _and_ work like crazy at it, it seems like that has to be better than only doing one or the other.

Either way, this is how I personally spent almost all of my time during 2020. I worked ~12 hour days, every day, for the entire year; choosing the single most important thing to focus on each day and just working super intensely on it. I've found that this combination of focus and working hard has been a massive part of building/shipping/updating 9 Figma plugins in the first year of Figmatic.

### Figma Plugins we shipped in 2020

Our plugins are always designed and built to solve important problems that very few people seem to be working on. Here are the Figma plugins we built and published this year (in order of date published).

#### Favvy

Favvy automates creating production ready favicon packages for your website or progressive web app with one-click.

#### TinyImage

TinyImage automates image compression directly in Figma, allowing you to save up to 95% on your image sizes, as well as create custom PDFs, custom GIF animations and convert images to newer formats unsupported natively in Figma (like WebP and AVIF).

#### Bannerify

Bannerify automates exporting dozens of banners from Figma to production ready HTML, GIFs or videos in seconds; completely eliminating the "handoff" process and reducing the distance from design to development to zero.

#### Crypto

Crypto allows you to add password protection to your Figma designs and prototypes, creating a unique URL that you can share with clients/stakeholders without them requiring a Figma account.

#### Pixelay

Pixelay syncs Figma designs and overlays them with your web development build, providing multiple ways to easily compare the design and build by using a real local development environment to easily spot the differences.

#### Pitchdeck

Pitchdeck helps you turn your Figma designs into a real, professional grade presentation, complete with animations, videos/GIFs, URL links and speaker notes. You can present the deck via the Pitchdeck web app, or export it to PDF or a PPTX file to use in PowerPoint, Keynote or Google Slides.

#### Convertify

Convertify automatically exports Figma files to Sketch and Adobe XD files with one click, converting your entire design layer-by-layer into real Sketch/XD files; saving days of manually recreating Figma designs in other design tools.

#### HyperCrop

HyperCrop brings batch cropping/resizing to Figma, allowing you to automatically crop/resize multiple images into multiple sizes; complete with smart cropping, dozens of common size presets for popular platforms and a high precision manually cropping tool.

#### CopyDoc

CopyDoc lets you import and export text content from your Figma designs to CSV, JSON and Microsoft Word. Copywriters and UX writers can easily make their edits externally, then seamlessly re-import the text updates into Figma; export frames to DOCX files for Microsoft Word; export all of the comments in a Figma file; spell check Figma designs (in dozens of languages).

### Building the future

While I'm super proud of what Figmatic has accomplished so far, there's still so much more to be done. 

Our accepted/existing workflows are still largely broken, but I know that they can be fixed by continuing to augment human creativity with software that can help automate the less creative parts, which computers are far better and faster at handling for us. 

I really believe that this hybrid approach is the key to bringing the distance between design and production closer to zero.

All of the Figma plugins that we've released so far tend to contain this approach to varying extents at their core — allow human creativity flourish, then use computer automation to take that work and export/convert/generate it into something that a human either simply couldn't do themselves, or would need to waste hours/days/weeks of time doing it manually.

### Adam Shrugged

As we leave 2020 behind and remain hyper focused on building our definite optimistic view of the future in 2021 (and beyond), I know that the problems we're interested in trying to solve are only going to become more challenging over time.

We have always been explicitly focused on choosing important problems to solve that very few other people are working on. If we do this correctly, then by definition, we must forge our own path and figure out things our own way. While this is exciting, there will inevitably be many more moments where the technical path ahead is covered in fog and it seems like there's no end in sight. This was certainly the case with our "Convertify" plugin, which as I wrote after it launched, felt like "a thousand mini mountains that you need to climb and then go back to basecamp and do it again". 

However, giving up was never an option, and we were able to figure out each problem we faced along the way; continuing showing up day after day, no matter what.

Knowing this, I'm reminded of a quote from Atlas Shrugged, which I think is a perfect one to always keep firmly in mind as we enter the second year of working on Figmatic and remain focused on our mission.

> “Do not let your fire go out, spark by irreplaceable spark in the hopeless swamps of the not-quite, the not-yet, and the not-at-all. Do not let the hero in your soul perish in lonely frustration for the life you deserved and have never been able to reach. The world you desire can be won. It exists... it is real... it is possible... it's yours.”

— Ayn Rand, _Atlas Shrugged_

We won't be saving anything for [the swim back](https://www.youtube.com/watch?v=GM-znjDGubE).

---

---
type: article
title: Figma plugins for developers
date: 2020-12-08T00:00:00.000Z
---

# Figma plugins for developers



Always the last in line on projects, developers are often given extra short amounts of time to get their work complete, due to those common crazy deadlines that don't leave much time or breathing room when it comes to implementation of a design.

Fortunately, Figma plugins have opened the door to more design automation, and can help reduce the distance between design and development much closer to zero. Here are some Figma plugins that help automate common tasks and help any developer ship production ready code and assets from Figma with a few clicks.

### Bannerify for Figma

>Animate and export production ready banners from Figma to HTML, GIFs and Videos, in seconds.

One of the most dreaded tasks for any developer is taking a Figma file containing dozens of banner designs and having to painstakingly build HTML banners from them. If you hate manually creating banners and want to feel like Keanu Reeves in The Matrix; this Figma plugin is for you.

The [Bannerify](https://www.figma.com/community/plugin/796124491692147799/Bannerify-Banner-Studio) Figma plugin automatically exports animated banners from Figma to production ready HTML, GIFs or MP4/WebM video files from Figma designs with one click. The real-time preview in the Figma plugin allows you to instantly 

#### Easily add animations to Figma layers

[Bannerify](https://www.figma.com/community/plugin/796124491692147799/Bannerify-Banner-Studio) comes with a bunch of animation presets for the most common enter/exit keyframe transitions that you can apply to the layers in your banner designs. Everything from fades, slides, rotations, transforms and more advanced animations are included to use without any manual keyframe creation required.

#### Export Figma designs to production ready HTML

Once you've animated all of your banners, you can easily export them to HTML with one click. [Bannerify](https://www.figma.com/community/plugin/796124491692147799/Bannerify-Banner-Studio) supports exporting to HTML/CSS, GSAP, HTML Canvas, DoubleClick, Google Ads and many other ad servers. All of the clicktags and scripts are automatically included, so you don't need to write any code at all.

#### Export Figma designs to production ready GIF or MP4/WebM video

If you're going to be using your banners on a social platform or somewhere else that doesn't require HTML banners, you can also export your animated banners from Figma to GIF or MP4/WebM video with one click using the [Bannerify](https://www.figma.com/community/plugin/796124491692147799/Bannerify-Banner-Studio) Figma plugin.

#### Automatic preview pages with all of your exported banners

If you want to review all of your exported banners at once, [Bannerify](https://www.figma.com/community/plugin/796124491692147799/Bannerify-Banner-Studio) automatically includes a preview HTML page that you can open or share with your clients/stakeholders. You can also optionally add your own HTML/CSS to inject your own branding or colour scheme, directly from the plugin.

### Emailify for Figma

>Easily design and export responsive, production ready HTML emails (eDMs) using Figma.

One of the more painful experiences for developers is building HTML emails with  messy tables and code and that looks like it has travelled through time from 1997. 

The [Emailify](https://www.figma.com/community/plugin/910671699871076601/Emailify-HTML-Email-Builder) Figma plugin lets you design and export responsive, production ready HTML emails automatically from Figma.

#### Dozens of modules with one click

[Emailify](https://www.figma.com/community/plugin/910671699871076601/Emailify-HTML-Email-Builder) lets you quickly build out a design by instantly adding modules to your email with one click, then add your own styles and content using Figma.

#### Override responsive design styles for mobile

Easily add mobile overrides and HTML properties (links, alt text etc) to a selected layer to avoid manually adding CSS and HTML in code.

#### Automatically export responsive HTML emails from Figma

No coding required. Export your email designs from Figma to production ready, responsive HTML email code in seconds using [Emailify](https://www.figma.com/community/plugin/910671699871076601/Emailify-HTML-Email-Builder), with one click.

#### Includes developer friendly MJML source code files

If your developers easily want to make their own updates to the exported code, the [Emailify](https://www.figma.com/community/plugin/910671699871076601/Emailify-HTML-Email-Builder) plugin also exports MJML files for total code customisation.

### Favvy for Figma

>Export production ready favicons (with code) for your website or PWA from Figma in seconds.

Usually forgotten about until the last minute before going live, creating favicons has always been a really weird and annoying process for developers.

The [Favvy](https://www.figma.com/community/plugin/789010114208495133/Favvy-Favicon-Exporter) Figma plugin automatically exports production ready favicons from Figma for your website or PWA (progressive web app) in seconds, with one click.

#### Preview your favicons in Figma

Favvy works by using any square "frame" layer that you select in Figma and turning it into a production ready favicon package. You can easily preview what the favicon will look like in multiple sizes by clicking on the layer in Figma, and seeing the preview instantly update in the [Favvy](https://www.figma.com/community/plugin/789010114208495133/Favvy-Favicon-Exporter) Figma plugin.

#### Automatically generate production ready favicons

[Favvy](https://www.figma.com/community/plugin/789010114208495133/Favvy-Favicon-Exporter) gives you all of the files that you need to deploy your favicon to a production website, including all of the `.png` and `.ico` image files, plus a `.browserconfig` and `site.webmanifest` for progressive web apps (PWA).

#### Exports HTML snippets for the head tag

[Favvy](https://www.figma.com/community/plugin/789010114208495133/Favvy-Favicon-Exporter) also generates all of the HTML code for your `<head>` tag, which is automatically pre-populated to link to all of the other files in your favicon package.

### TinyImage for Figma

>Export compressed JPG, PNG, SVG, WebP, AVIF, GIF and PDF files from Figma, reducing sizes by up to 95%.

As a developer, you're responsible for the speed and performance of your websites and web applications; unfortunately, exporting large images directly from Figma while you're implementing a design can have a massive hit to your load times. 

The [TinyImage](https://www.figma.com/community/plugin/789009980664807964/TinyImage-Compressor) Figma plugin helps by sitting in the middle and compressing all of the Figma layers you want to export for your website or web application. 

#### Export images up to 95% smaller than Figma

[TinyImage](https://www.figma.com/community/plugin/789009980664807964/TinyImage-Compressor) supports exporting compressed files in JPG, PNG, SVG, PDF, GIF, AVIF and WebP formats; everything you need to deliver great looking images at super small file sizes. Even with non-aggressive compression levels, you can save up to 95% of the original image sizes exported from Figma.

#### Advanced settings for total customisation

Using the [TinyImage](https://www.figma.com/community/plugin/789009980664807964/TinyImage-Compressor) settings panel, you can convert your images into different formats, add password protection to your PDF files, and specify custom/dynamic file/folder path naming conventions to suit your own project folder structure or naming conventions.

#### Create and export animated GIFs

If you need to create an animated GIF in Figma, [TinyImage](https://www.figma.com/community/plugin/789009980664807964/TinyImage-Compressor) allows you to create GIFs directly from any layers in your design. You can control every aspect of the GIF, from its speed, to the frame ordering, and easy scaling. The real-time preview in the Figma plugin lets you see your GIF update while you're tweaking any of the options on the fly.

#### Create custom, compressed PDF files from your frames

[TinyImage](https://www.figma.com/community/plugin/789009980664807964/TinyImage-Compressor) allows you to compress your PDF exports, often with up to 95% savings from the original exported Figma file size. You can eiter export individual frames as PDFs or you can merge them into a single PDF, with options to select and re-order your frames. For advanced options, you can also export your PDF in RGB, CMYK or greyscale, and even protect the PDF files with custom passwords directly from the Figma plugin.

### CopyDoc for Figma

>Update Figma text via CSV/JSON, download Figma comments, and export Microsoft Word docs.

The [CopyDoc](https://www.figma.com/community/plugin/900893606648879767/CopyDoc-Text-Kit) Figma plugin allows you to import and export text content from your Figma designs. If you're a developer who needs to extract text content or comments to JSON files; this Figma plugin is for you.

#### Export your Figma text layers to JSON

As a developer, manually extracting text content from a Figma design can be pretty painful.

[CopyDoc](https://www.figma.com/community/plugin/900893606648879767/CopyDoc-Text-Kit) allows you to export every text layer in your frames to a JSON file, which gives you a complete overview of your content, and allows you to write scripts that can make use of the JSON data for your websites or other applications.

#### Re-import Figma text updates from JSON

You can also re-import the JSON file back into Figma if needed. This means you can run a script or manually update the text in your JSON file, and re-import and update those text layers back into your Figma design using the [CopyDoc](https://www.figma.com/community/plugin/900893606648879767/CopyDoc-Text-Kit) plugin.

CopyDoc will find any text updates by comparing your JSON file and the text layers in the Figma design, then show you all of the differences for review and approval before any text updates are made. Once you've selected the updates you want to import, you can update the selected text layers in Figma with a single click.

#### Export Figma comments to JSON

If you're collaborating with a design team, and comments are being left inside the Figma file, sometimes it can be difficult to keep track of all the feedback being left on each frame.

[CopyDoc](https://www.figma.com/community/plugin/900893606648879767/CopyDoc-Text-Kit) has a feature that lets you to quickly export every comment from your Figma file into a JSON with one click; this lets you easily use that JSON data containing all the comments for your own applications or scripts.

### Pixelay for Figma

>Compare Figma designs with your local website development builds using smart browser overlays.

If you've been given the task of implementing a design, you'll know how "the last 10%" can be really painful, especially when you need to have your creative director sitting next to you showing all the visual differences between your build and the original Figma design.

The [Pixelay](https://www.figma.com/community/plugin/816424186244407164/Pixelay-Development-Comparison) Figma plugin allows you to easily compare all of your designs (for any size frame) from Figma with your development build, so you can see exactly what's visually different between the two and make fixes in real-time. 

#### Sync your local development build and designs from Figma

[Pixelay](https://www.figma.com/community/plugin/816424186244407164/Pixelay-Development-Comparison) grabs the designs from Figma and generates a URL that you can view in the browser; the designs are automatically placed over your real local development URLs, letting you truly compare your designs with the real build.

#### Easily compare multiple pages and screen sizes

You probably want to be able compare multiple pages (and devices/screen sizes for each of those) at the same time, rather than manually flicking through them one-by-one, right? [Pixelay](https://www.figma.com/community/plugin/816424186244407164/Pixelay-Development-Comparison) has you covered. Compare as many designs and website URLs as you want at the same time.

#### Change comparison modes on the fly

[Pixelay](https://www.figma.com/community/plugin/816424186244407164/Pixelay-Development-Comparison) gives you a bunch of modes to help you compare Figma designs with your website. One-click toggle between: the original Figma design, your website build, transparent overlay, split screen overlay, blended diffing, draggable transparent overlay and pixel guides/rulers.

#### Measure pixels between elements

You can't be expected to make something pixel-perfect if you can't tell how many pixels you need to change. [Pixelay](https://www.figma.com/community/plugin/816424186244407164/Pixelay-Development-Comparison) has a built-in measurement mode, where you can just drag anywhere on the screen to use the pixel ruler.

---

---
type: article
title: Figma plugins for copywriters
date: 2020-11-20T00:00:00.000Z
---

# Figma plugins for copywriters



It's time to give some love to our copywriters and UX writers. Unfortunately, they're often left out of the design process, and are expected to magically replace all the 'Lorem Ipsum' with real content approximately 4 minutes before the project deadline.

While Figma is an amazing collaboration design tool on its own, copywriters or  and UX writers using Figma can benefit from using plugins to help with the copywriting process during the design process, and export their work to other formats.

### CopyDoc for Figma

>Update Figma text via CSV/JSON, download Figma comments, and export Microsoft Word docs.

The [CopyDoc](https://www.figma.com/community/plugin/900893606648879767/CopyDoc-Text-Kit) Figma plugin allows you to import and export text content from your Figma designs. If you're a copywriter or UX writer who needs to manage text via CSV/JSON, download comments, spell check your text layers or export Microsoft Word (.docx) documents; this Figma plugin is for you.

#### Spell check your text layers

Without a native spell check feature, it can be difficult to keep track of hundreds (or thousands) of text layers.

[CopyDoc](https://www.figma.com/community/plugin/900893606648879767/CopyDoc-Text-Kit) contains a spell check feature that checks every text layers in your page for spelling mistakes in dozens of languages. It provides multiple suggestions for each word, with single click corrections, and an "undo" feature in case you made a mistake and need to revert the spelling again.

#### Export your Figma frames to Microsoft Word (.docx) documents

If you're designing and doing copywriting for any kind of documents in Figma, sometimes exporting to a static JPG, PNG or PDF file isn't going to be the right solution for the deliverable.

[CopyDoc](https://www.figma.com/community/plugin/900893606648879767/CopyDoc-Text-Kit) contains a feature that allows you to export your Figma frames to a Microsoft Word (.docx) document. This allows anyone without a Figma account to open the document in Microsoft Word, with all of the text remaining selectable and editable.

#### Export your Figma text layers to CSV

As a copywriter or UX writer, it can be difficult to edit copy in Figma by manually scanning dozens of frames for text content and individually editing each one in isolation from the rest of the content available at a glance.

[CopyDoc](https://www.figma.com/community/plugin/900893606648879767/CopyDoc-Text-Kit) allows you to export every text layer in your frames to a CSV file, which gives you a complete overview of your content, and allows you to make updates to each layer by editing the CSV in one place using your spreadsheet app of choice (eg. Microsoft Excel, Google Sheets or Apple Numbers).

This also opens the door to using tools like "find and replace" to easily roll out text updates across your entire design in the CSV file.

#### Re-import Figma text updates from CSV

After you've edited the exported CSV file from Figma, you can re-import and update those text layers back into your Figma design using the [CopyDoc](https://www.figma.com/community/plugin/900893606648879767/CopyDoc-Text-Kit) plugin.

CopyDoc will find any text updates by comparing your CSV file and the text layers in the Figma design, then show you all of the differences for review and approval before any text updates are made. Once you've selected the updates you want to import, you can update the selected text layers in Figma with a single click.

#### Export Figma comments to CSV

If you're collaborating with a design team, and comments are being left inside the Figma file, sometimes it can be difficult to keep track of all the feedback being left on each frame.

[CopyDoc](https://www.figma.com/community/plugin/900893606648879767/CopyDoc-Text-Kit) has a feature that lets you to quickly export every comment from your Figma file into a CSV with one click; this allows you to easily review every frame and comment thread in one place, and mark off any rows in your spreadsheet app of choice (eg. Microsoft Excel, Google Sheets or Apple Numbers).

### Pitchdeck for Figma

>Magically turn your Figma designs into animated presentable slide decks, or export them to PowerPoint.

The [Pitchdeck](https://www.figma.com/community/plugin/838925615018625519/Pitchdeck-Presentation-Studio) Figma plugin allows you to magically create and present stunning slide decks from your Figma designs. If you're a copywriter or UX writer, and you want to turn your designs into a presentable slide deck, or export them to PowerPoint; this Figma plugin is for you.

#### Export your speaker notes from Figma to text (.txt)

While the visible content in a presentation is very important, the invisible content (the presenter's speaker notes) are equally vital to get right.

[Pitchdeck](https://www.figma.com/community/plugin/838925615018625519/Pitchdeck-Presentation-Studio) allows you to include speaker notes for every slide by using the Figma plugin, and also includes an "export speaker notes" feature that will instantly export all of your speaker notes to a plain text (.txt) file that you can review and edit outside of Figma. This can be handy for writing speaker notes for each slide in one place, then copy/pasting the speaker note updates back into the Figma plugin when they're ready.

#### Export your slides from Figma to PDF

If you need to quickly send a presentation deck around for internal review, or to someone who doesn't have access to Figma, [Pitchdeck](https://www.figma.com/community/plugin/838925615018625519/Pitchdeck-Presentation-Studio) lets you easily export your presentation to a PDF file; perfect for sending via email or Slack.

#### Export your slides from Figma to PowerPoint

While it's not everyone's favourite app, Microsoft PowerPoint is likely here to stay for a while longer. Thankfully, [Pitchdeck](https://www.figma.com/community/plugin/838925615018625519/Pitchdeck-Presentation-Studio) gives you the option to export your Figma design to a .pptx file that can be opened with the Microsoft PowerPoint desktop app, complete with editable text and image layers that can be moved around if needed.

#### Export your slides from Figma to Google Slides

While it's awesome to collaborate on slides in Figma, sometimes other people on your team aren't Figma users, but prefer to work collaboratively in Google Slides together. If your presentation needs to be done in Google Slides, [Pitchdeck](https://www.figma.com/community/plugin/838925615018625519/Pitchdeck-Presentation-Studio) gives you the option to export your Figma design to a .pptx file that can be opened and edited with Google Slides, allowing your team to collaboratively edit text and move images around.

#### Export your slides from Figma to Keynote

The go-to presentation app for Mac users is the preferred PowerPoint alternative in many digital agencies and design shops. If your presentation needs to be done in Apple Keynote, [Pitchdeck](https://www.figma.com/community/plugin/838925615018625519/Pitchdeck-Presentation-Studio) gives you the option to export your Figma design to a .pptx file that can be opened and edited with the Keynote desktop app.

---

---
type: article
title: Figma plugins for beginners
date: 2020-11-17T00:00:00.000Z
---

# Figma plugins for beginners



Figma plugins were officially launched in August 2019, going public with 40 plugins available to the Figma community. Since then, hundreds of Figma plugins have been published to help automate and streamline your workflows. Here are a few useful things to know about Figma plugins if you're coming in as a beginner, or if you just want to refresh your memory.

### How Figma plugins work

Before we get into how to install Figma plugins and use them in your designs, there are a few basic (but often missed) principles about how Figma plugins work. It's worth covering those first, in case you have any of these questions while you're getting started.

#### Who can use Figma plugins?

If you already have a Figma account, you can install Figma plugins via the browser or the Figma desktop app. If you don't already have a Figma account, you can sign up for free via the [Figma website](https://figma.com/).

#### Edit access is required to run Figma plugins

While anyone can _install_ a Figma plugin, it's worth noting that you can only _run_ Figma plugins in a file that you have **Edit** access to. If you're inside a Figma file that you only have **View** access to, you won't be able to run any plugins inside that file. The reason for this is that using Figma plugins very often leads to modifying the contents inside of the design, so it makes sense that you can't do this until you've been given **Edit** access.

#### "Why can't I install this Figma plugin?"

Sometimes we'll get asked a variation on the question: "Why can't I install Figma plugins?" The most common reason for not being able to install a Figma plugin is due to being a member of a Figma Organization; sometimes there are restrictions setup by the organization that may only allow you install Figma plugins from an approved list. If this is the case, and you really want to try out a restricted Figma plugin, you should reach out to the person in your company that manages the Figma Organization permissions.

#### You can only run one Figma plugin at a time inside a document

Unlike some other software you may be used to, plugins in Figma are not designed to run in the background, or be used over long lengths of time. Typically, a Figma plugin will be built around an idea of automating, enhancing or augmenting a single task or series of tasks that either would simply not be possible without a Figma plugin (eg. the [Bannerify](https://www.figma.com/community/plugin/796124491692147799/Bannerify-Banner-Studio) Figma plugin), or would usually be done manually through a series of painful, manual extra steps (eg. the [HyperCrop](https://www.figma.com/community/plugin/818960915730257192/HyperCrop-Batch-Image-Resizer) Figma plugin).

As mentioned previously, Figma plugins can be run in any Figma document that you have **Edit** access to; with a key point being that you must be inside the editor itself to run a Figma plugin. For example, you can't run a Figma plugin from your Figma drafts page, or search page.

### How Figma plugins are built

The great thing about Figma plugins is that everyone has access to build and publish their own plugins in the vibrant Figma Community ecosystem.

#### What are Figma plugins written in?

As Figma itself is built on web technologies (which is awesome), the plugin ecosystem for Figma is also run entirely on web technologies. This means that under the hood, every Figma plugin is comprised of HTML, CSS and Javascript.

As the plugins announcement post from Figma put perfectly:

>We wanted our plugins to be secure, stable, and performant, of course. But we also wanted Figma plugin programming to feel like web programming. Our internal motto is: “If you can code a webpage with basic HTML and JavaScript, you can build a Figma plugin.”

This is a really neat innovation in the world of design tools, as it lowers the barrier of entry for aspiring Figma plugin developers who are already familiar with writing HTML, CSS and Javascript.

Of course, while there are varying levels of plugin scope and complexity, every Figma plugin developer has access to the same APIs and technologies at their disposal to turn their Figma plugins ideas into reality.

#### Using private Figma plugins internally at your company

If you have a very specific automation task at your company that you could solve by building a Figma plugin, but you don't necessarily want to make it public, or know that it wouldn't be useful in a broad context, you can use Figma plugins privately amongst your own team without needing to publish it in public to the rest of the world.

This can be done even without having a Figma Organization plan, simply by zipping up your plugin development build folder and sharing it with members on your team. They can manually install your plugin by navigating to their Figma user page, clicking the **Plugins** tab, and then clicking the **Create new plugin** button. After the **Create a plugin** modal loads, you can click the **Click to choose a manifest.json file** box to browse for the "manifest.json" file that was included in the Figma plugin zip file to install it locally.

### How to find Figma plugins in Figma Community

The Figma Community is a place where Figma users can publish their Figma files and Figma plugins for other Figma users to duplicate and install. Once you're in the Figma community, you'll be able to browse, search and filter all of the available Figma plugins to install.

#### Navigating to the Figma Community

If you navigate to your Figma file browser page, then click on the **Community** page in the left sidebar, you'll be taken to the Community section of Figma. If you click on the **Plugins** tab (the tab defaults to **Files**), you'll be able to see a list of all the Figma plugins available to install. 

#### Find Figma plugins using a search keyword

If you know the name of the plugin you're looking for (eg. "pitchdeck" would find the [Pitchdeck](https://www.figma.com/community/plugin/838925615018625519/Pitchdeck-Presentation-Studio) Figma plugin), or just want to search for a keyword (eg. "sketch" would find the [Convertify](https://www.figma.com/community/plugin/849159306117999028/Convertify-Figma-to-Sketch%2FXD)  Figma plugin), you can use the search field at the top of the Community page to search for a keyword. After the results are shown, you'll need to click on the **Plugins** tab to only show the Figma plugin results (by default it will show Figma files).

#### Finding top Figma plugins by install count

On the Figma community page, you can click the **Explore** button near the top of the page, and then click on the **Plugins** tab, which will display a list of all the Figma plugins available to install. 

If you click on the **Installs** text at the top of the list, this will sort the Figma plugins by the highest number of installs to the lowest number of installs per Figma plugin. Clicking on **Installs** again will flip the order to the least amount of installs to greatest amount of installs per plugin.

#### Following plugin creators to discover Figma plugins

You can also discover Figma plugins by following creators in the Figma Community that you think is cool. You can click on the **Explore Creators** button on the Figma Community home page to show a list of trending creators. 

You can also visit a creators page directly if they share their Figma handle anywhere online; for example, you can follow Hyperamtic by checking out [@hypermatic](https://figma.com/@hypermatic) on the Figma Community and keep an eye on all of the new Figma plugins that we publish.

#### Finding recently updated Figma plugins

On the Figma community page, you can click the **Explore** button near the top of the page, and then click on the **Plugins** tab, which will display a list of all the Figma plugins available to install.

If you click on the **Last Updated** text at the top of the list, this will sort the Figma plugins by how recently the plugin creator has updated them. Clicking on **Last Updated** again will flip the order to show the plugins that have not been updated recently.

#### Finding Figma plugins from website links

Because the Figma and the Figma Community is built on the web, you can find URLs pointing to many Figma plugins in blog posts, lists, YouTube videos or online discussion forums. For example, linking to the [CopyDoc](https://www.figma.com/community/plugin/900893606648879767/CopyDoc-Text-Kit) Figma plugin here will allow you to land directly on the plugin installation page in Figma by clicking on it.

### How to install Figma plugins

Once you've found the that you want to install, you can either install it from the Figma plugins list, by clicking the **Install** button on the right hand side.

You can also do this directly from a Figma plugin detail page (eg. the [Favvy](https://www.figma.com/community/plugin/789010114208495133/Favvy-Favicon-Exporter) Figma plugin detail page) and clicking on the **Install** button in the top right. 
 
Once the button text changes to say **Installed**, you'll be able to switch back into your designs and use the Figma plugin straight away.

#### How to uninstall Figma plugins

If you decide to uninstall a Figma plugin, The other method to uninstall a Figma plugin involves returning to the plugin page (or the Figma plugins list) and clicking on the **Uninstall** button there. Once the button text reverts back to **Install**, your Figma plugin has been successfully uninstalled.

### How to run Figma plugins

After you've installed your Figma plugin, you can switch back to a Figma file that you have _edit_ access to. If you right-click anywhere in your Figma design editor canvas, hover your mouse over **Plugins**, then find the name of the Figma you just installed and left-click on that once, this will run Figma plugin.

#### How to easily re-run Figma plugins

To re-run the last Figma plugin you ran, you can use the keyboard combo of "Option + Command + P" on Mac, or "Ctrl + Alt + P on Windows. This will automatically run the last Figma plugin without needing to use your mouse to navigate through the plugin menu again.

Some plugins also contain a feature which allows them to be re-run directly from the right hand side column in Figma. This functionality depends entirely on if a plugin creator has decided to include it, and how to include it. 

For example, in the [TinyImage](https://www.figma.com/community/plugin/789009980664807964/TinyImage-Compressor), if you use the Figma plugin to export compressed images for a certain Figma layer, after you close the plugin, you'll be able to click on that layer and see a new clickable "TinyImage" menu item under the **Plugins** subheading in the right hand side column in Figma, which will re-run the plugin and allow you to easily re-compress that image again.

Some plugins will also allow you to re-run the plugin from the right-hand Figam column button without having any layers selected at all. For example, the [Crypto](https://www.figma.com/community/plugin/819688895973707151/Crypto-Password-Protection) and [Pixelay](https://www.figma.com/community/plugin/816424186244407164/Pixelay-Development-Comparison) Figma plugins will show up as a button after the plugin has been run at least once on the current Figma page, allowing you to quickly re-run the Figma plugin at any time on that page.

### Start using Figma plugins to automate your design workflows today!

Those are most of the useful basics to help with understanding Figma plugins for beginners, and hopefully it shows that anyone can create, install and use Figma plugins to help automate workflows for themselves, their team or their company. Once you've discovered the power of using Figma plugins, you'll leap from beginner to superhuman in no time at all.

---

---
type: tutorial
title: How to import/export Figma text layers with CSV files using CopyDoc
date: 2020-11-17T00:00:00.000Z
---

# How to import/export Figma text layers with CSV files using CopyDoc



#### Video Transcript

Today, I'm going to be showing you how to import and export text content from your Figma designs using CSV files.

We're going to do this by installing a Figma plugin called CopyDoc. If you haven't already installed it, you can jump into the Figma Community and search for the term "CopyDoc", and under the "Plugins" tab, you'll see a result come up called "CopyDoc", and if you go over to the right-hand side you'll be able to click on the "Install" button, and once it says "Installed", then you're ready to go and we can jump back into our Figma design.

I'm just going to be using this Figma file to give you an example of what it looks like to import and export text content from Figma using CSV files. The first thing we need to do is just right click anywhere, go down to "Plugins" and then click on "CopyDoc", and that's just going to fire up the Figma plugin that we just installed a moment ago. You'll notice that there's a few different settings here, but for today we're just going to be focusing on importing and exporting CSV, just using these two options.

The first thing we need to do in order to edit the content is to export all of our Figma text layers to CSV; and the way we can do that is just by clicking on this button over here which says "Export CSV". Once that loads, it's going to load in all of the different Figma frames that you've got at a parent level; all of your top level frames on the current page will get loaded into this window, and this essentially just allows you to select which frames you want to export the Figma text layers from.

By default, it will select every single frame in your Figma document, but if you want to narrow that down, there's a couple of different ways to do it. The first way is just to uncheck all the layers, or check and uncheck individual layers, and you'll see that you'll be selecting a subset of those layers; for example, if I only wanted these seven, I could do that another easier way if you know which frames you want to export is you can just click on those frames in your design, and you can select multiple ones and that will automatically filter down those those frames in the Figma plugin itself. If we only wanted to export these three we could quite easily just click on those and you'd see those three filter. You can unselect all the frames just to get the whole list back, and for the purposes of this tutorial I'm just going to export all of these frames in one go from Figma to CSV.

Let's go ahead and do that now. We can just click on this "Export CSV" button up here; I'll click on that, and this is going through and exporting every single Figam text layer in our frames to a zip file. It's telling us that the Figma text layers are ready to download, so I'm going to click on the "Download Text" button and just save that to my desktop, and if I double click on that zip file you'll see we get a folder which contains my CSV file, and it contains a folder called "frames"; and that "frames" folder is there because I selected the "Include Designs Option", and what that means is it's going to include references to all of your frames in the zip file. You can see here if I navigate through those, it's including a file for every single frame that I chose to export, and that's just a nice touch to be able to reference the designs from the CSV even if you're not accessing the Figma file directly.

To give you an example of what the CSV looks like, I'm just going to double click on the CSV file and this is going to open up Apple Numbers, that's my default app on this computer, yours might be Microsoft Excel, or you could open it in Google Sheets, and that would be another option, but for today I'm just going to be showing you the Apple Numbers app.

We can see here it's loaded up the CSV file that we exported from Figma, and if you have a look closely you can see that we've got a few columns here; we've got the "id" column, this is a column that you don't want to be editing, this is what's going to map the text layers back into Figma when we re-import them; you can just not worry about that "id" column. The "frame" column is a reference to what frame the text is being included on; for example we've got the "Intro" frame here, and you can see that on the "Intro" frame we've got three layers of text; we've got "Dieter Rams ten principles of good design" and then this little snapshot here as well; we've got those three little lines and the same thing goes for all of the other frames. You can see all the frame references, and that just makes it really easy to visually verify what's going on.

The other thing to note is that it will essentially go from top to bottom, so the text layers will be ordered from top to bottom, and you can see here in this intro frame we've got "Dieter Rams ten principles for good design", and then this little tag line at the bottom, and that's because the order of those top to bottom in the design itself, it also takes into account left to right as well; for example we've got "good design is innovative", "the possibilities for innovation" is the second one, and then we've got this little footer down here as well; those are a little bit of an example of what they look like. You can see over here we've actually got these numbers which are getting aligned to the right, I believe that's just because they're being recognized as numbers by the program, but if you're wondering where those were they're just sitting over the right hand side; that's probably more of an Apple Numbers specific thing.

Now that we've got our CSV file with all of the text from Figma, we can actually go and edit that text content right now. For example, if we wanted to change this this title frame here; instead of "Ten principles", maybe you want to say "Two principles" for some reason; and instead of "Dieter Rams", I'm just going to put my own name there, and I'll put my last name in there as well.

The other cool thing we can do is actually just find and replace, so you can do this in any spreadsheet software, but if you actually just do a find, so if you wanted to do "good design", if you wanted to find that sentence and for some reason you wanted to replace that with "bad design", you can do that and you can click "Replace All", and you can see here it's changed all of those references in our document. If that was the change I wanted to make and I wanted to re-import these text changes back into Figma from the CSV, what I can do is I can save the file as a CSV. I'm just going to "Export to CSV", I'm going to click "Next" and I'm just going to save that onto my desktop. I'm just going to say "Updated", so I know which one.

I've just updated the CSV with all of my Figma text, and now we're going to actually re-import that text back into Figma. All we need to do is close off this little success message here in the Figma plugin, and this time instead of clicking on "Export", we're going to look at the "Import Text Updates from Figma" feature, so this is going to update the Figma text layers from the CSV. If you go ahead and click on the "Import CSV" button, you'll see this little prompt to either click or drag and drop a CSV file, and it's just letting us know that we should ensure that the CSV was originally exported from the CopyDoc Figma plugin, otherwise it's probably not going to work.

If I go back to my desktop, we can see here we've got the new updated CSV file that we just edited. All I'm going to do is I'm going to click and drag that into the Figma plugin, and I'm going to drop it into that little drop zone. It has just loaded in the CSV file, so it has read through all of our rows in the updated CSV that we exported from Figma and it's actually giving us a list of all the differences it has detected. It's gone ahead and verified every single row in the CSV file, and it's comparing those rows with the text that's currently in Figma based on the IDs that we exported from in the first place and it's actually giving us diffs, visual diffs, of what's going to change were we to update these layers. It doesn't update them immediately, it'll always let you verify the updates that you want to make from the file just so you know exactly what's going to be changed, and you can opt-out of any changes that you actually don't want to approve.

In this case, it has detected 13 changes that we made, so you'll recall that we changed "Dieter Rams" to my name, and then we also did a big find and replace where we changed every reference of "good design" to "bad design", and so you can see here all of the diffs are showing that difference; it's keeping the "d" at the end of "good", but it's changing the first letters to now be "bad", so you can visually see in the red on the left of the original text and what it's going to look like when that text gets updated. In this case, I want to keep all of the changes except for the "Ten principles of good design" getting changed to "Two principles", I'm going to leave that one out.

To verify where these text layers are in the design, you can easily do that by clicking on the little magnifying glass icon or the search icon next to any of these layers. As you can see here, it actually zooms in automatically to where that change is going to be made, were you to accept it. You can go through all of the layers to verify where all these changes are actually happening, and that's just a really quick and easy way to verify any text changes that are going to be made without you realizing where they might be. That's just a really neat feature that you can use before you actually go ahead and click the "update" button.

Having said that, I'm pretty happy with all of these updates that we're going to be making. As I said, I'm selecting 12 out of the 13 layers, so now that I'm happy with all of those, I'm going to go ahead and click on "Update Figma Text Layers"; this is now updating, or has already just updated 12 Figma text layers. It's told us that 12 figure layers have just been updated, and if we actually go through we can see in the list here that all of them except for this bottom layer, which we didn't want to update, has been updated. You've got this little confirmation icon, the little check mark, and in brackets at the end of each string it's got "Updated" in brackets. It has confirmed that it has updated all the layers, and again, you can still use these magnifying glasses and we can actually cruise around the file and see exactly what was changed; it's just a really easy way to verify what actually happened, and you can see here we've changed every single layer within a matter of a couple of seconds, so that's pretty neat.

If we wanted to undo that, the quickest way to do that would just be to do a "CMD + Z" or a "CTRL + Z" on Windows. For example, I can do "CMD + Z", and it immediately undoes all of those text changes, which is great if you if you accidentally did the update and you didn't really mean to, then a "CTRL + Z" or a "CMD + Z" will get get you back there pretty easily.

Again, now that we've reversed those, we can easily re-import them just as easily as we did. I'm just going to drag that back in, and this time I'll accept all the changes, including the bottom one, and once again I'll just click "Update Figma Text Layers". It's going to replace all of the text layers from the CSV file that we modified into Figma. I'll show you that one more time, and click on "Update Figma Text Layers", and there we go; two seconds later, we've got 13 text layers updated super easily.

This is a really nice way of bulk updating content in a design just by editing a CSV file that you've exported from Figma, so if you have a copywriting team or if you have some external stakeholders that need to review copy, exporting the content or the text from Figma to CSV can be a really convenient way to get a quick overview of every single bit of text that's being used in your Figma design, or just on specific frames that you need to run past your legal department or run past a client for approval.

If you're a copywriter, oftentimes it's a lot easier to actually edit that copy in an isolated fashion in a spreadsheet or a Google Sheet and being able to export all of your text from Figma to that CSV file that they can edit on their own without disrupting the design process, that's actually a preferable way to go a lot of the time. As a designer or as a copywriter, you can quite easily just jump back here as we've just seen and re-import all those copy updates from CSV to Figma and review them before they actually go into the design, just in case there's any crazy huge amounts of text that are going to break the design; you'll be able to verify that before you actually go ahead and re-import it.

That's basically everything you need to know about exporting and importing CSV text content in Figma using the CopyDoc Figma plugin. If you've got a copywriting team, or if you're having issues with managing your text in Figma, then exporting and importing text with CSV files in Figma might be something that you can try. If you do, I hope you have some success with it, and we'll be back soon with more Figma tutorials just like this one. Thank you again for watching, and we'll see you soon.

---

---
type: tutorial
title: How to import/export Figma text layers with JSON files using CopyDoc
date: 2020-11-17T00:00:00.000Z
---

# How to import/export Figma text layers with JSON files using CopyDoc



#### Video Transcript

Today I'm going to be showing you how to import and export text content from Figma using JSON files, and we're going to do this by installing a Figma plugin called "CopyDoc".

If you haven't already done so, you can go to the Figma Community and search for the term "CopyDoc", and you'll see a result called "CopyDoc" come up under the "Plugins" tab and if you go to the right hand side, you'll be able to click on the "Install" button, and once it says "Installed", you can jump back into your Figma file and we can get started.

The first thing we need to do is just right click anywhere, go down to "Plugins", and then click on "CopyDoc", and that's just going to open the Figma plugin that we just installed. You'll notice that there's a few different options here, but today we're just going to be looking at the options which export Figma text layers to JSON and then import the text updates to Figma from that modified JSON file. In order to edit the content, we first need to export the JSON file from Figma, and we can do that by clicking on the "Export JSON" button on the right hand side here. Once that loads up, you'll see that all of our parent frames, all of the frames at the top level of the page will be loaded into the Figma plugin as an option to choose which frames you actually want to export the Figma text content from.

By default, it will automatically pre-select all of the frames, but you can easily change that by either deselecting the frames that you don't want, or deselecting all the frames and checking a couple. The other way that you can do it really easily is just by selecting all the frames, and then clicking on the frames individually; by highlighting those frames, the Figma plugin will automatically filter down just the frames that you've selected on the Figma canvas, so that's just another really quick way if you know which frames you want to export and not have to go through the list and find the check boxes.

For today's example, I'm just going to export every single frame and this is just to show you what it looks like with a medium sized JSON file from Figma. To export our Figma text content to JSON, we can just click on this top right button over here, which is "Export JSON"; I'm going to click that now and this is going to export all of the text content currently on our page to a JSON file. Now that the Figma text layers are ready to download, I'm going to click on the "Download Text" button, and I'm going to save the zip file to my desktop.

If I double click on the zip file and open up the folder, you'll see that we've got our JSON file that's been saved out, and we also have a folder called "frames", and that "frames" folder has been included because I opted-in to the
"Include Design References" checkbox that was in the Figma plugin a moment ago. If I look at those images, the Figma plugin is basically saved out PNG files of every single frame that I decided to export, and this is just a really nice way to have a visual reference of the text content in the JSON file that we've just exported, even if you don't directly have access to the Figma file at the time. These are just a really nice little bundle of exports that you can reference while you're making copy updates.

Now that we've got our JSON file, let's go ahead and open it up in our code editor. I'm going to use Visual Studio Code and open that up now; I'm just going to drag the JSON file into the Visual Studio Code editor, and you can see here we've just loaded in our JSON file. This is the Dieter Rams presentation page JSON file; this is all of the text content that's currently in our Figma file that we've exported to JSON using the Figma plugin. You can see here we've got an array of JSON objects, and each object has an "id", the "frame" name, and also the "text" string.

The "id" is a field that you definitely don't want to touch, that's what helps map the content back into Figma when we re-import the JSON file in a moment; I'll show you what that looks like very shortly. The "frame" is just a reference to the frame that's being included for each of those different text layers; that's essentially the parent frame for all of these little text strings, you can see here it changes as we go along, and the frame can also be used as the reference as I showed you a minute ago in the frames folder. If you really wanted to visually reference what was in "Frame 4" or "Principle 3", you could just go into the "frames" folder, find number "4" and open that up, and we can see here that the text content will match up with that, so that's what that looks like there.

Okay, so now that we've got our JSON file with all of our Figma text content, I'm just going to make a few updates to show you what it looks like to then re-import the JSON file to Figma. For example, if I were to change "Dieter Rams" to my own name in this instance, and then I changed "Ten principles" to "Two principles" for some reason, and then if I decided to do a bit of a bulk replace as well I could do that, too. If I did a search for "good design", and I did a find and replace, I can replace "good design" with "bad design". That's just a bit of an update across the board, so if I click on "Replace All", that has now changed every reference of "good design" to now be "bad design".

That's all I'm going to do for now, and I'm just going to save that JSON file again. Now that I've saved the JSON file, we can go ahead and re-import that text content back into Figma from JSON. I'm just going to minimize the file, and in my Figma plugin, I'm just going to close off the success message; and this time instead of clicking on the "Export Figma text layers to JSON" I'm going to use the "Import text updates to Figma from JSON" option.

If you go ahead and click on the "Import JSON", button that's going to bring up this little prompt with a box that you can either click or drag and drop a JSON file inside. In my case, I'm just going to drag and drop the updated JSON file that we just edited directly into that little box, and drop it; and there we go, it has just read all of the text content from that JSON file, and you can see here it's detected 13 Figma text layers that contain text updates. On the left hand side, we've got all of the current Figma text that's in the document, so you can see here "Dieter Rams" crossed out and then it's going to replace it with my name, and it's worth noting that none of these text updates have been applied yet; the Figma plugin will always allow you to review and approve any of the text changes that are going to be included and, so you can actually opt-out of any that you don't like. For example, if I uncheck the bottom layer and I don't include that one, it's only going to actually include 12 out of those 13 changes.

If you want to verify where those are actually coming from, you can easily click on this little magnifying glass icon and that will instantly zoom in to exactly where that text located on your Figma page. That's just a really easy way to validate where the text is going to be updated before you decide to approve it, and you'll see here as well there's a visual diff checker at every stage. For each row that's been detected in the JSON file, you can see here exactly what's going to change, so instead of the word "good", the "d" is being kept, but the first letters are being replaced with "b" and "a" to make it into "bad design". That's a really easy visual cue to get a sense of exactly what's going to change again before you decide to override those text layers in your Figma document.

Now that I'm happy with all those, I'm going to click on the "Update Figma Text Layers" button, and I'm just going to zoom out so you can see it happen in in one go. If I zoom out, and I tell CopyDoc that I want to update those layers, all I need to do now is click on the "Update Figma Text Layers" button. I'm going to do that now, and you'll see here that it's just updated 12 Figma text layers with the content from our JSON file. If you have a look on the actual Figma canvas itself, you can see that we've got "good design" being replaced with "bad design" all over the place. Even though we've updated the content as you can see here, it's changed the icons to show little check marks, and it's got a little
"Updated" in brackets on the side here. You'll notice that the one that we didn't select is now disabled, and it hasn't been updated; this is just confirming that those layers have been updated, and you can still click on these icons if you want to manually verify what has been changed and what it looks like.

It's very simple, and if you accidentally made a mistake, you don't have to worry; you can just use the shortcut for the undo button, so if you're on Mac you can use "CMD + Z" or Windows you can use "CTRL + Z", and if I do that now you can see that all of those text changes have just been undone. That's just a really quick way of undoing all the changes if you accidentally approve something by mistake.

If you want to re-import it, you can just click on the "Import JSON" button one more time, and I'm just going to drag that JSON file right back in and load those Figma text layers up again, and you can see this time again it's just coming up with 13 out of 13. I'm just going to approve all of them this time, and I'm going to click on the "Update Figma Text Layers" button one more time. You can see what it looks like, so if I click that, it's just updated 13 Figma text layers in about one second. You can see all of the changes have been made as we'd expect, so that's just an example of how you can really quickly export all of your Figma text content to a JSON file, edit it using a text editor or a code editor, and then re-import all of that updated text content back into your Figma designs in a matter of seconds.

It's a very quick way of updating content in bulk, and if you're if you're working with a team of developers who prefer to use a JSON format, there's some really neat things that they can do with JSON data. If you are working with the development team just get in touch with them and see what they might be able to do with making really quick edits to those JSON files; they may be able to pull content down from an API or do something really interesting to update that content, or even just use the JSON content for a completely different purpose; they may be able to integrate that content with a Content Management System (CMS), they may be able to integrate that Figma text into a third-party API or something like that; there's a whole bunch of neat things that you could do with a JSON file after you've exported it from Figma.

For the purposes of managing copy or managing text from Figma using a JSON file, you've just seen the simplest version of it; you can simply just open up the JSON file that the Figma plugin exports, update all the text layers that you need using your code editor or text editor, and save that for re-importing into Figma from that updated JSON file. If you've been wondering how to use JSON files to manage your Figma text content, then I hope this Figma tutorial has been helpful for you. Thank you as always for watching, and we'll be back soon with more Figma tutorials just like this one very soon.

---

---
type: tutorial
title: How to export Figma to Microsoft Word .docx files using CopyDoc
date: 2020-11-16T00:00:00.000Z
---

# How to export Figma to Microsoft Word .docx files using CopyDoc



#### Video Transcript

Today I'm going to be showing you how to export your Figma designs to Microsoft Word .docx files.

To do this, we're going to be using a Figma plugin called CopyDoc. If you haven't already installed it you can do so by going up to the Figma icon in the top left of the app, going down to "Community", and then searching for "CopyDoc",and you'll see "CopyDoc" come up in the Figma plugins list under the "Plugins" tab. If you haven't already done so, you can click on the "Install" button on the right hand side, and that will install the Figma plugin. Once you've done that, you can switch back into your Figma file and we'll be ready to go.

I'm going to be showing you how to export this Resume or CV from Figma to a Microsoft Word document, and to do that I'm just going to open up the Figma plugin we just installed. I'm going to right click, go down to "Plugins", then go down to "CopyDoc", and I'm going to click on that, and that's just going to open up the Figma plugin that we just installed a moment ago. Once it loads you'll see that we've got a few different options, but today we're just going to be focusing on the top option, which is to "Export frames to Microsoft Word". This is going to export your Figma frames to a .docx file, and considering we've only got one frame, I just thought this would be a simple tutorial to show you just to get started.

I've got my frame, it's a A4 size frame, so this has been resized in Figma when the frame was created using "Paper" and then A4. You can set this to whatever size you want, but at the moment this is for the purposes of having a resume document, it's just an A4 paper size. To load up the frame we can just click on "Export Frames" and this is just going to load all of the frames inside of your Figma design. In this case, I've only got one frame, so you can see it's got one out of one frame selected, and just to give you a simple example of how this works, we'll just keep that frame selected, and click "Export to DOCX".

That's just generated a .docx file for us and it's telling us our Microsoft Word document is ready to download. We can click on the download button below to save the exported file, so I'm going to do that now and just click on the "Download Word Doc" button, and I'm just going to save that to my desktop. If I open up that file now, I'll just double click on the .docx file that is exported; you can see there it's got the page name with the file name in it, and then today's date and you can see there it's a .docx file.

I'm just going to double click on the .docx file, and that's just opened it up for me in Microsoft Word. We can see here, all of the text that we had in Figma has been carried across, the image that we've got there has been carried across. and it's it's carried everything over as we'd expect. The neat thing is this is editable as well, so if we wanted to change this we could quite easily update that; if we wanted to change that text we can do that, all of the styles have been carried across; this has been carried over with all the caps and the spacing, and we've got the colors the slightly off of black color here and you can see everything that was in Figma has been carried across as we'd expect. That's really neat, that's exactly what we wanted and you can update that text in Microsoft Word, or you can update it in Figma again and just rerun the Figma plugin to export those frames to Microsoft Word one more time.

To show you another example, I'm just going to open up a separate document and I'll show you what it looks like to export a multi-page document as well, and we can run through that in just a second. I've just switched into a new Figma file and this one has a bunch of different frames, so I'm going to show you an example of what it looks like to export a page or a set of frames that isn't just one frame, and I'm going to show you how to export that in custom order and show you what that looks like. Once again, we can open up the CopyDoc extension by right clicking anywhere, going down to "Plugins", clicking on "CopyDoc", and that will just re-run the Figma plugin. Once again, we're just going to click on the "Export Frames to Microsoft Word" option or "Export Figma frames to .docx" is the subtitle. If you just click on the button "Export Frames", you can see here it's loaded up all of the frames in our page.

We've got all of the frames in the order that they are loaded up in in the left-hand side Figma panel, however, in our case we actually want to change that order because we can see here that "Principle 10" which is down here is actually the last frame in our in our design. We have a few options here, we can use the quick ordering, so if you click on this drop down here, you will be able to sort the frames by layer order, you can sort them visually in their columns, or their rows, or by layer name, so in this case I might just use the "rows" option, and you can see when I clicked on that it's actually loading in the rows one by one; it's going from top left, all the way across and then go into the next one going to the next one. I could also use the column option, which would look like that, and in that case you can see it's going from top to bottom left to right. In my case, I just want to keep it as rows.

The other thing you can do if you wanted to manually override the order is just click on one of these little handles over here, click and drag, and if you drag and drop those you can actually customize the order that way, too; it's just a little bit more customization. Of course, if you do need to change which frames are included, you can use the check boxes on the left hand side and that will only include the frames into the Microsoft Word document that you actually want. In this case, I just want to keep all of them there, and now that I'm happy with all the frames and the ordering I can just click on the "Export to .DOCX" button one more time, and that's going to convert my Figma document over to a Microsoft Word doc. This one has a few more images in it, so it's going to take slightly longer, but it should only still take a few seconds to export that .docx file for us.

The Microsoft Word document is ready to download, and just like before we're going to click on "Download Word Doc", and save it to the desktop. If I open up that, you can see here the .docx file has been saved, and if I double click on the .docx file you can see here that it's created another Microsoft Word document for us with all of our frames from Figma. Those are looking really good as well, and once again I can change that text, so if I wanted to update this text I can do that, and I can move it around. If I need to move that up, that's totally fine, and that's exactly as we expected. We've got all of our frames from the design in Figma exported to Microsoft Word, so this can be really handy if you need to put together a portfolio resume, or if you need to put together a deck, or a set of documents for a client or internally and you want to be able to share that in a document form or a Microsoft Word document, then exporting it from Figma to Microsoft Word doc or a .docx file is sometimes a really good way to go if somebody doesn't have access to Figma, or you need to send this via an email or via Slack or something like that.

That's what that looks like there, and as I said a minute ago if we only wanted to export a subset of those frames I can just re-run the Figma plugin again by going over to the right hand side and clicking on the CopyDoc icon, and if we only want to export some of the Figma frames to Microsoft Word, we can go in here on the left hand side and just select which of those frames we actually want. In this case, we might just want the "Intro", we might want "Principle 5" and "Principle 7"; and I might want "Principle 7" to come before "Principle 5" for some reason, so this is just an example of what that can look like. Finally, I'm just going to click "Export to DOCX" one more time, and it's going to convert our Figma design to Microsoft Word again. It's telling us the Microsoft Word documents ready, and I'm just going to click "Download Word Doc" and save it to the desktop. One more time, I'll open up this one and you can see here it's only exported the three frames that we that we specified in the Figma plugin, and it's adhering to the order that we just selected using the drag and drop ordering, too. We've got number five at the end, and then number seven, just like we did in the Figma plugin.

You can use this Figma plugin on any of your Figma designs, it doesn't really matter what the size of the frames are, you can have mixed size frames and it will still be able to export that to a single document if you wanted to do that. It does tend to work better if if all of the frames you're exporting to a Microsoft Word document are all fairly uniform, so whatever you want the design to be in Figma you can just design it the way that you want, all you need to know is that each frame is going to be treated as a page in the Microsoft Word document, so whatever Figma frames you design, those will what will be available to you when you want to export them to a word doc. As long as you do that, you can basically design anything you want inside of the Figma file.

The last thing I would note is just to say that if you're using a font in Figma that you don't have installed on your system, then it's going to look a little bit different because the font really needs to be installed for the visual side of it to look perfect. The text will still be there, it'll still be editable but it'll look a little bit different to how it does in the Figma design, so just make sure that whatever fonts you're using in your Figma file, be sure to install those before you open up the document in Microsoft Word after you've exported it from Figma to the .docx file.

Thank you for watching, and I hope if you've been trying to export Figma files to Microsoft Word documents or .docx files, hopefully this tutorial has been helpful for you. I hope that if you give it a go with your own designs you have some success, and we'll see you very soon with more Figma tutorials just like this one. Thanks again for watching.

---

---
type: tutorial
title: How to spell check Figma text layers in your designs using CopyDoc
date: 2020-11-16T00:00:00.000Z
---

# How to spell check Figma text layers in your designs using CopyDoc



#### Video Transcript

Today I'm going to be showing you how to spell check your text layers in Figma using a Figma plugin called CopyDoc.

The first thing you'll need to do if you haven't already installed it, is jump to the Figma Community and search for the term "CopyDoc"; and if you hit enter you'll see a result pop-up called "CopyDoc", and you'll see the "Install" button on the right-hand side. If you haven't clicked "Install", just go ahead and click "Install" and you'll see it change to say "Installed", and once it looks like that, you'll be able to jump back into your project and we can get started.

The first thing we need to do is just right-click anywhere, go down to "Plugins" and click on "CopyDoc", and that will fire up the Figma plugin that we just installed a moment ago. You'll notice there's a bunch of different options here, but today we're just going to be focused on the option which is about spell checking Figma text. This is going to allow us to find and correct spelling mistakes across our entire page in Figma, and we can get started by just clicking on "Spell Check Layers"; that's the button next to this item.

After clicking on the button, you'll get an option to say which language you want to spell check your Figma page in; by default, it just changes to "English (United States), but if you click on the drop down, you'll be able to see dozens of different languages; you've got "German", you've got "English", different variations of "English" for Australia, Canada, United Kingdom, you've got "French" you've got all these different languages; depending on where in the world you're designing the page, you'll want to change this to match whatever language the text in your file is. In my case, I'm in Australia, so I'm just going to use "English (Australia)" option.

Once you've selected the language, all you need to do is click on the button that says "Find Spelling Mistakes", so I'm going to click on that, and this is now going through my entire Figma page and searching every single layer for spelling mistakes. You can see this is a fairly small file, so it only took a couple of seconds; if you've got a really massive Figma file that you're spell checking, it might take a little bit longer, but it should be pretty quick.

Okay, you can see that the spell checking feature has found a whole bunch of spelling errors in our Figma text. It has found 21 spelling mistakes all up, and some of these are going to be actionable and some of them are not going to be actionable, as there'll be a few that potentially are in a different language or potentially abbreviations which we actually don't want to correct. For example, "Braun" is a brand which isn't in the dictionary, so even though it says it's a spelling mistake, we know that that's actually not a spelling mistake; in that instance I'm just going to leave that one. But we can see here that there's another error which is should be actually "designed" but it's been picked up because it's missing the "e", and in brackets you can see the number of times that it's been found in your Figma file.

Any errors that the spell checker has found it will automatically group them, so if you click on one of these little titles, what that does is it reveals all the places that the spelling error has been found inside of your Figma file, and what you can do if you want to actually inspect them is just click on any of these little "search" icons next to the frame name. In this case I'm going to click on "Principle 3" and I can see there it's immediately zoomed in to where the actual error is happening, and I can change that to go to the top one. I'll go to the "Intro", and that's going to jump to the text layer on the "Intro" frame and again you can see here it's zoomed right into where the spelling mistake has been found in Figma.

What we can do now because we know we've got these five different spelling errors for the word "design", and we know we want to correct it you can see all of the suggestions underneath; we've got four different suggestions we know that we actually want it to be "designed" not "sign". I'm going to go ahead and click on the "design" button and you can see after I click that it immediately updated those five different text layers all in one go. I didn't need to do them individually, it just does them all in one go, and it's telling me that it's corrected "dsign" to "design"; you can see the the option that we picked has been displayed just in case you forgot what you clicked. If you still want to zoom into those layers to confirm that it's all good you can still open up that little icon and jump around to your different frames and just verify that the changes as you'd expect.

The other thing you can do if you did it by mistake or if you actually just wanted to see what the options were again while you've still got this window open you can click on the "Undo" button, next to the correction you can click on "Undo" and it's got a little five in there to indicate that it's going to undo five layers. If we click "Undo", that will revert it back to the original spelling and we could go ahead and change that to a different suggestion if we wanted. I can click on "sign" instead you can see it's updated in those places and then I can undo that again and then put it back to the correct one which I know is "design".

We've got that there, and for the other ones you can see here this one has only found one mistake which we can zoom in here. In this case, it's the word "life cycle" and it's suggesting that it should be two words or hyphenated, so if I want to hyphenate it I can just click that middle option there we go; it's been updated. Same with "multi press"; I can check out where that is, in this case, I might want to hyphenate that as well. "Product" has two d's in this case, so I'm going to change that, and let's just change it up here. "Thorough" has also been detected, so if I change that I can check out where that was, so that's updated there. We can see that I can change it to a different option, and again it's really about whatever suggestion you want to put in there is really up to you based on the context of the the copy.

That's basically how it works, it'll search all of your your Figma design for text layers with spelling errors and offer you spell checking suggestions. Just keep in mind that this is just a spell checker, and it doesn't take into account grammar or sentences or context or anything like that. It really is just a spell check feature for correcting individual words in your Figma text, so that's just something to be mindful of in case it doesn't pick up something which in the context of the sentence is wrong but in terms of the spelling it might still be right. Just be mindful of that, and other than that you can basically use it to correct a lot of spelling mistakes in Figma at scale, and you can see how quick it can be and how quick it works and because we've corrected these ones.

Now if I was to jump out of that and then spell check my Figma text layers again by clicking on the "Spell Check Layers", if I re-run that search, so I'm just going to click "Find Spelling Mistakes" one more time; this is going to spell check all the layers in Figma again, and you can see this time it's only found 16 mistakes, and that and that's because we already changed the errors in the previous round. Once you do that, as soon as you leave this modal, or as soon as you close the Figma plugin after you've made those corrections, the very next time you run the Figma plugin to spell check your Figma text, it will it will not take those into account anymore.

You'll lose the ability to undo those through the Figma plugin, but if you do want to undo them regardless you can just use the native undo functionality. If you do "CMD + Z" on the keyboard, or "CTRL + Z" if you're using Windows, you can still just undo those changes as you'd expect. For example, if I use the "Undo" button now, I'm just going to hit that a few times, and you can see there it has already updated all of our copy back to the incorrect spelling. Again, if I rerun the spell checker for the Figma text again, I'll spell check those layers now that I've undone the action, and click "Find Spelling Mistakes", you can see just like before it's found 21 mistakes again, and the previous correction that I just undid using the the native undo functionality is now back. We've got design back as an incorrect spelling, and once again I can just jump in and correct that to the other thing.

It's worth noting is I'm able to do this because I have the fonts installed. If you're a user of Figma, you'll know that the way that fonts work, if you don't have the fonts installed on your machine and you try to edit a text layer that's already been created, Figma won't let you do it; it'll tell you that you need to install the font. The same thing is true of the spell check feature in CopyDoc as well; if it does find a spelling error and you can see it show up on the list, if you don't have the font installed, CopyDoc will automatically flag that in the Figma plugin. You'll see a little message saying that the font isn't installed and it's going to prompt you to install that font, and the suggestion buttons will be disabled until you've actually installed that font. If you do run into that, it's completely normal, and that's that's how it's supposed to work. The Figma plugin will absolutely let you know if there's any text that is missing the font, so that's just something to be mindful of, too.

That's basically it; it's very simple, it's an extremely quick way of scanning your spelling errors in Figma and offering you suggestions for all those different words and bulk updating all those spelling errors across all of your Figma layers in one go. I hope that's been helpful for you if you've been wondering how to do spell checking in Figma, or if you've tried other spell check plugins and and they haven't quite been what you're looking for, then this is just a another option that you can try for for doing spell checking in Figma. Thank you as always for watching, and we'll be back soon with more Figma tutorials just like this one.

---

---
type: tutorial
title: How to export comments from Figma files using CopyDoc
date: 2020-11-15T00:00:00.000Z
---

# How to export comments from Figma files using CopyDoc



#### Video Transcript

Today I'm going to be showing you how to export your Figma comments to CSV and JSON files with image references that you can share with your team.

The first thing we need to do is go to the Figma Community, and if you just search for the word "CopyDoc", and under the "Plugins" tab you'll see a result called "CopyDoc" pop-up. If you haven't already installed it, you can click on the "Install" button on the right-hand side, and that will install it in Figma for you. Once it says "Installed", you can jump back into your project and we can get started.

Now that we've installed the Figma plugin, if you just right click anywhere on your page go down to "Plugins" and then click on "CopyDoc", that's just going to open the Figma plugin that we just installed. You can see there's a number of options here, but today in this tutorial we're just going to be focusing on the "Export Figma Comments" option, and as the subtitle says this is going to export all of your comments to CSV and JSON.

I've already got some comments set up in this file, I've just added a few as a bit of an example. You can see I've got one thread on the first frame and then I've got a second thread on one of the other frames here. On this frame there's a second thread which I've marked as resolved, so we're going to be exporting these comments out of Figma. Anyone else who doesn't have Figma is still able to look at them, or you can mark them off in a spreadsheet, or really do whatever you want with them outside of Figma.

To export these comments from Figma, all we need to do is jump back to that "Export Figma Comments" option and click on the button just next to it that says "Export Comments"; this will open up the "Export Figma Comments" panel, and there's a couple of fields in here that we'll have to fill out.

The very first one is just filling out the Figma page URL; this is a required field, but it's really easy to get. All you need to do is go up to the top toolbar in Figma where it's got the blue "Share" button and click on that, and you'll see here there's a shortcut that says "Copy link"; click on that "Copy link" shortcut, and it's telling us that the link's been copied to the clipboard. You can close off that settings panel now, and in the "Export Figma Comment" settings under "Figma Page URL" we're just going to paste that in, and you can see there it's copy pasted the file URL for this Figma project from the clipboard, and it's been put into the settings there. That's just going to tell the Figma plugin that this is the file that we want to use to export the comments from.

The second thing we'll need is your Figma personal access token. This is another required field, but again, it's very easy to generate. There's some instructions here but I'll show you how to do it just so you can visually see it. What we need to do, is go to our Figma profile "Settings" page, so I'll go to that now. I've just clicked on my Figma username, and then I've gone to the "Settings" tab, and underneath the "Settings" tab, if you scroll down you'll see a section called "Personal Access Tokens". What you want to do, is click on this link here that says "Create a new personal access token", so just click on that once and you'll be asked to enter a description; in this case, you can just put in the Figma plugin name, but you can make this whatever you want as long as you know what it's referencing, and just hit enter. Once you do that, you'll be shown this little notification which is telling us that we need to copy this token because the only chance we're going to be able to do that. If you just highlight that text, that whole token, and copy that to your clipboard; now if we go back to our page and in the "Figma Personal Access Token" field, I'm just going to click on that, and paste in that token. You can see there it has validated the button now, because the token has been pasted in.

The last option we have here is, it's automatically set to true, which is "Include Design References"; having this option selected will automatically generate references of the frames that contain comments, and it's going to include little pin markers that you can reference with your spreadsheet file; I'll show you what that looks like in just a second.

Now that we've got everything set up, all we need to do is finally click on the "Export Comments to CSV/JSON" button, so I'm going to do that now, and this is going to search our whole page for any comments and generate a CSV file and JSON file from those Figma comments. You can see here, it was very quick and it's telling us that our Figma comments are ready to download, so we can now click on the "Download Comments" button here I'm just going to save that to my desktop. You can see up here I've got a zip file which I can open up by double clicking, and if I open up the folder that's just been unzipped you can see here that we've got a few different files; we've got our CSV file, we've got our JSON file, and we've also got a folder called "frames".

If I open up the "frames" folder, and if I close off the Figma plugin, now you can see here that if I open up one of those images we've got one of our frames that has been exported with comments. That would be "Principle One" the "Principle One" frame, and you can see here there's a little pin that is showing up with the number two on it, and in our export here, we've also got a little number two pin on our export. If I go up to the other design, you can see we've got another pin with the number one which correlates to the pin in Figma also with a number one. This is exactly marking where those threads are showing up in Figma, just so you can actually have a visual reference of the comments in the CSV and JSON files without needing to be in the Figma file. This can be really handy for sending to clients or just referencing feedback without being in the Figma file.

To give you an idea of what these two files look like, I'm just going to double click on the CSV file, and in my case it's just going to open up the "Apple Numbers" program, it might open up "Microsoft Excel", or you could drag this into Google Sheets; it's really up to you. You can see here it's displaying all of my comments that we just saw from Figma. If I open up the Figma comments again you can see in our CSV file that we've got a few things. I might just zoom in, so you can see it a bit more clearly. It's telling us what frame the comment is on; for example we've got the "Intro" frame over here, so we've got "Intro" frame and then it's telling us what number the comment thread is. We've got comment thread number one, and then we've got the different comments and when they were created, so you can see here this one was created at 47 seconds after that time, and then we've got 54 seconds, this one was created just after. It's in the order of of those comments, and the other thread that we've got is the number two thread.

If I jump back to that one over here as I said this one's actually been marked as resolved and you can see here that it's telling me what time that thread was actually marked resolved. You can see not only was it resolved, but you can tell what time it was actually resolved, and on what day. Once again, we've got our messages from the thread and the comment thread pointing to number two, so for example, if I opened up the image that we had from the frames; we've got the frames here, so I could open up the corresponding frame. For example, "Principle One", I can open that up and I can see here comment thread number two is here; I know exactly what part of the files being referenced from the CSV just by correlating the comment thread number with the frame and the comment thread number and the frame. These these two things will always match up, so that's just a really nice visual reference for showing you your Figma comments that were exported to the CSV.

The other file that we have is the JSON file. I'll just open that one up, too; this is our JSON file, and it has the exact same data as the CSV file except we're using an array of JSON objects. This can be helpful if you're a developer, if you're working with developers it's most likely that they'll prefer to have data exported in a JSON format because it's much easier for them to work with as opposed to a CSV. CSV files can be really good for sending around to internal stakeholders, or sending to clients, or just exporting it for yourself to sort of check off to-do lists; that can be really handy, but for developers and people who want something a little bit more technical, a JSON file might be exactly what you're looking for. Once again, this is going to export all of the comments all of the dates, the messages, the usernames, the comment threads, the frame, all of that data is being exported from Figma into the JSON file.

Those are the two files that you're going to get along with the images. That's basically it; it will automatically export every single frame, so you don't have to worry about checking which frames and and which pieces of the design need to be exported, it will just grab every single comment whether it's resolved or not, and you can basically just filter down that information however you choose in the CSV itself. You'll basically be able to export all the comments in bulk and and that should be way easier than having to sort of manage each individual comment or each individual frame.

I hope that's been helpful if you've been looking for a way to export Figma comments to CSV or export Figma comments to JSON, this is the the easiest way and the quickest way to do it. I hope you have some success in your team if you decide to give it a go, and we'll be back very soon with more Figma tutorials just like this one. Thanks again for watching.

---

---
type: tutorial
title: How to password protect Figma prototypes using Crypto
date: 2020-11-13T00:00:00.000Z
---

# How to password protect Figma prototypes using Crypto



#### Video Transcript

Today, I'm going to be showing you how to generate password protected embeds for your Figma prototypes using the Crypto Figma plugin.

To do that, we first need to install the Figma plugin by going up to the top left hand corner, clicking on the Figma icon, and heading over to the Community. In the search bar, if you type the keyword "Crypto", and under the "Plugins" tab you'll see "Crypto Password Protection" come up; and all you need to do is click on the "Install" button on the right hand side and you'll be ready to go.

Once you've done that, you can jump back into your Figma project. Mine already has some prototyping links; if yours doesn't have prototyping links, you might want to go ahead and do that first and create some prototyping in your design.

Then we can go ahead and open up the Crypto Figma plugin we just installed; if you right-click anywhere, go down to "Plugins" and then go down to "Crypto Password Protection", if you click on that it will load up the Figma plugin that we just installed a moment ago. You can see up here we've got a little drop down box which is currently set to "Figma Prototype"; if you open up this Figma plugin for the very first time it might default to "Figma Designs" as the option; this option allows you to upload static frames or static designs to the Crypto web app (which I covered in another Figma tutorial), but today I'm going to be focusing on the other option, which is for password protecting Figma prototype embeds.

If you click on the select box and click on "Figma Prototype (Live Embed)", that option will switch the Figma plugin to show you all of the frames that have prototype interactions on them and gives you a bit of an idea of what's going to be uploaded to the password protected URL. The first thing we need to do is click on the "Share Prototype URL" button, and that's going to bring up some settings down here.

The first thing you'll need to do here is get this URL for your project and by default this URL is empty, so there's there's nothing in there when you open up this file for the first time. You can see here it's got some instructions on how to get that URL, so all we need to do is click on the "Share" button in the Figma toolbar up on the right hand side here, this little blue "Share" button; if you click on that, that will bring up this little pop-up modal. What you need to do is change this little setting where it says "Only people invited to this file" to "Anyone with the link"; if you click on "Anyone with the link", that will change it to show that anyone with the link to the Figma file can view it.

Then we want to click on "Copy link"; there's this little icon down here, "Copy link" and that will copy the link to the clipboard, which we can then paste into our Crypto Figma plugin. I've just clicked that, copied the link, and now I'm going back into the Figma plugin settings and pasting it; you can see here I've just pasted the Figma file URL. This file URL links to the project that we're currently in and the page that we're currently on, I've just pasted that in there and now we've got a couple of options down here.

These settings will set the Figma prototype options, so we can change the scaling of the prototype; we can do "100% Full Size", "Fit", "Fill" and "Scale Down". I'm just going to use "Scale Down", and you'll see we'll be able to change this in the prototype later anyway, but this is just setting the default. The other option that we have is to "Show the hotspot hints on click"; if you turn this off or disable it, it won't show any of the hints if a user clicks their mouse on any of the screens in your Figma prototype, so I'm just going to leave that turned on, because I do want to show hotspot hints when someone clicks on the designs.

The last thing we need to do is click on this button, but it's just giving us a little warning letting us know that clicking the button is going to embed our live Figma prototype on a password protected URL, however the embed behind this link is technically still viewable by anyone who happens to have that link, so if you've shared that link with someone and you've set it to "Anyone can view", they will be able to view that link. but if you're sharing the Crypto URL that's going to be generated, then they'll require a password to view that URL. It's just a bit of a flag, and if you need more help with this we have a documentation link here which will go into a bit more detail about what this means.

Now that we're done we can click on the "Create Prototype URL" button; I'm just going to click on that, and this is now generating a secure prototype URL for us which we're going to get now. We've got this confirmation screen telling us that the secure link is ready, and we can copy this secure prototype URL and the password that it generated for us. I'm just going to copy the password first; so if I copy that, that will copy the password to my clipboard and then I can go ahead and click on the secure URL and open up my browser.

Now that the page is loaded, I can go down to the password field and paste in the password that I just copied from the Figma plugin and click "Login". Once this loads, we'll see our Figma prototype embed show up behind this password protected link. You can see here I've got my Figma prototype, and because we enabled the hotspots option, if I click somewhere I can actually see that show up and navigate through my design. We've got all our interactions showing up as you'd expect and it's looking really good.

As I mentioned before, there's a way to change the zoom setting, so if you hover up on this little keyboard icon up here it will reveal the Figma embed shortcuts for viewing the Figma prototype. We've got "change size", so you can use the "Z" key on your keyboard to change the scale, so if I click on the "Z" key you can see that the zoom is going to change based on whatever I set that to. That's that's how that works, and the other shortcuts we have are resetting the Figma prototype, so I can push the "R" key to reset the Figma prototype if I want to bring that back to the start, and then I can navigate between screens by using the "Left" and "Right" keys as well. If I just want to use keyboard navigation to jump through screens I can do that, too.

That's how that works there, and the last thing we can do is toggle full screen, so if we push the "F" key, that's going to bring us into full screen and we can use the Figma prototype in full screen mode; and then clicking the "Esc" key on your keyboard, we'll scale that back down to the windowed view.

Finally, if you want to get rid of this little toolbar, you can click on the little "hide" icon in the top right, and that will remove that toolbar entirely. You can get that back just by going back up to the right hand corner and clicking on that little "Eye" button just like that, so that's how that works.

We've got our Figma prototype in this little embed window and that's all well and good, but if we want to delete that URL now there's a couple of ways we can do that. If we jump back into Figma and exit the Crypto Figma plugin, and then let's just re-run the Crypto Figma plugin; I can just go to "Plugins", go back down to "Crypto" and open that back up if we re-run the Figma plugin, and then click on the "Share Prototype URL" button again, you can see here that it has now remembered our URL and our password that we just uploaded; if you want to grab those details again without re-uploading the whole Figma prototype link, you can just jump back in here and copy those to clipboard and share them with anyone who you want to be using that URL.

If you no longer want that URL, you can click on this little toggle here and that just is going to tell the Figma plugin that you'd like to go about deleting that prototype URL, and again it's just flagging this little message to let you know that while it will delete the product the prototype password protected URL on the Crypto domain, it's not going to affect the Figma file itself; because we already clicked "Share" and changed this setting over here to say that "anyone with the Figma link" can use the file, if we want to remove that functionality in Figma itself we can actually change that to "only people invited to this file", and if I click on that and then jump back to my web page, you can see here that it's telling us that the Figma prototype is not found; it's saying that if the file doesn't exist or we don't have permission to view it, and that's because we just changed this little setting in Figma back to saying that only people invited to this file can view it. Again, that's just a reminder to say that this this URL here is password protected, but it's password protecting the embed that's sitting behind it from Figma; as long as this is not set to "anyone with the link" and it's set to "only people invited to the file", then you know no one's going to be able to actually look at that link. That's one way of removing access, but we can also just completely remove that link entirely, and I can do that by clicking on the "Delete Prototype URL" in the Figma plugin, so I'll do that now, it's deleting the URL and now the URL has been successfully deleted.

If I jump back into the browser, I'm just going to refresh the page, and you can see here it's telling us that that design actually wasn't found, and the URL might be wrong or it's been deleted by the owner; we know that we've just deleted it, which means that anyone who had that URL and password before will no longer be able to look at that link and will no longer be able to look at your Figma prototype.

That's really all you need to know for creating and deleting a password protected URL for Figma prototype embeds; and again I would urge you to read through the documentation if you're unsure of anything; you'll be able to get to it just by clicking on the link in the upload screen over here, and that should clarify any questions you might have around Figma permissions, and it's just a bit of an overview of how that actually works behind the scenes.

I hope that's been helpful if you've been wondering how to password protect your Figma prototype URLs, and you can do it using the Crypto Password Protection Figma plugin right now; so feel free to install it in Figma to give it a try and see if it works for your workflow and your team. Until next time, thank you as always for watching, and we'll be back very soon with more Figma tutorials just like this one.

---

---
type: tutorial
title: How to record your Figma prototype to a video file using Crypto
date: 2020-11-12T00:00:00.000Z
---

# How to record your Figma prototype to a video file using Crypto



#### Video Transcript

Today, I'm going to be showing you how to record video files of your Figma prototype interactions using the Crypto Figma plugin.

The first thing you need to do is jump into the Figma "Community" page by going to the top left corner of Figma, clicking on the Figma icon, and just searching for the word "crypto" under the community "Plugins" search and you'll see "Crypto Password Protection" pop up as a result. If you haven't already done so, you can just click on the "Install" button on the right hand side, and then you'll be ready to go. Once you've done that you can jump back into your project.

If you if you haven't already used the Crypto Figma plugin before, you can use it by right-clicking anywhere, going down to "Plugins", and then clicking on "Crypto Password Protection", and that will open up the Figma plugin that we just installed. I've made a separate Figma tutorial video showing you how to upload, manage and delete your prototyping URL, so I'm not going to cover that in this Figma tutorial, I'm just going to be showing you how to record a video of the Figma prototype itself. Because I've already used the Crypto Figma plugin before in this file, I've already got the "Figma Prototype (Live Embed)" option selected I can click on "Share Prototype URL", and I've already got a URL set up.

As I said, if you need to figure out how to do this, we do have another Figma tutorial on this exact step which will show you how to get that URL and create this secure password for your Figma prototype, but because I've already generated this I'm just going to click on the "copy password" button; this will copy the password for my URL to the clipboard and then I can just click on the secure URL to open that up in a web browser, so I'll do that now.

I'm just going to paste my password into the password text field and then click on "Login", and this is going to load up the Figma prototype embed that I've already set up using the Crypto Figma plugin. Now our Figma prototype is loaded up in the browser under the Figmatic domain, and we can see here that the Figma prototype is working as we'd expect; we can interact with it and do everything that we had linked up in our Figma design.

To take a recording of this for playing back later, we can just go up to the right hand side and you'll see up in the toolbar there's a little video camera icon; if you click on that video camera icon you'll get a prompt from your web browser to give permission to capture the contents of your screen. Typically what you would do is go over to the "Tab" option, you could technically record the whole screen, but in this case we just want to record the Figma prototype itself, so I'm going to go over to the Chrome tab, click on "Design Prototype", which is the Crypto URL and I'm just going to click "Share" and that has now given permission for the browser to record this this window. You can see up here it's got a little red recording icon that's telling you that it has permission to record the screen, and it is currently recording the screen now.

We've got a little "Stop" button here, which we can click when we want to stop it, but as of now it's recording the screen; everything that I'm doing right now and interacting with, including the audio, it's capturing the audio as well, in case I'm narrating what I'm doing, or if I'm a confused during a user testing session or something like that, the audio can be handy. It's basically recording all my interactions right now, and whenever I'm finished I can just go ahead and click on the "Stop" button up here. If I click "Stop", you can see here it has automatically downloaded a video file in my browser and that video file contains all the interactions we were just doing on the page.]

I can go ahead and open that up. The quickest way to preview that video file is just to drag and drop the file into the browser window itself, so I'm just going to do that now; I'm going to drag it into the toolbar or the URL bar in Chrome and I'm just going to hit "Enter". That has loaded up the Figma prototype video file, and if I just click on the "Play" button, you can see here my mouse is independent of the mouse in the video; we've got this mouse this cursor kind of rolling around in the video there, that was me interacting with the screen while I was recording, and you can see now it's playing back the recording of me running through my Figma prototype on the web page. You can see my mouse here, and you can see the mouse in the video, so that's just playing back the video recording that we just took a moment ago; and you can re-watch that based on a user testing session or if you just want to record a Figma prototype to share with your team or share a video file over Slack, this is the way that you can do it.

You can see there, it has just finished the playback; it was just a 45 second recording and that's that's all yours now. You've got the video file that's automatically downloaded, and you can go ahead and convert that to a different format if you want.

At the moment, it's saved as a WebM file, and WebM is a video format that allows you to view video files on the web; it's a web specific format but if you needed to convert it to a different file type you can use some software video conversion software; if you just google "WebM to MP4" or "WebM to" whatever other video format you need, you'll be able to find that pretty easily; so that that's something that you can do if you do need a different format.

The other thing to note is that while you're recording the page; if we go back to our Figma prototype embed, if you are recording the video and you forget to click the "Stop" button or you accidentally close the tab, it will automatically save the video file for you; it's just a little bit of a check, so if I click on the video share my tab and click "Share", if I actually forget to click "Stop" and accidentally close that page, it will still download the video file for me, so you don't have to worry about losing that; it will automatically save it for you in case you forgot to stop the video for whatever reason.

That's all I have for you today; it's a pretty quick tutorial just to show you how to record your Figma prototypes to a video file using the Crypto Figma plugin. You could do this with screen capture software, but if you're already using the Crypto Figma plugin or if you just want a a really seamless way that doesn't require any additional software, this is a really simple way to go about recording your Figma prototype interactions to a video file that you can share.

I hope you've learned something from this Figma tutorial, and you can give it a go in your own workflow with your own user testing sessions and all that sort of thing. I hope you've enjoyed watching, and best of luck using the Figma plugin; stay tuned for more Figma tutorials just like this one, as we'll be dropping a few more very shortly. Stay tuned, and thanks again.

---

---
type: tutorial
title: How to export AVIF images from Figma using TinyImage
date: 2020-09-06T00:00:00.000Z
---

# How to export AVIF images from Figma using TinyImage



#### Video Transcript

Today I'm going to be showing you how to export AVIF images from Figma using the TinyImage Figma plugin.

The first thing we need to do, if you haven't already done so, is just go up to the top left corner of your Figma application and click on the little Figma icon; and if you go down to "Community" and just type in the search word "tinyimage", you'll see a Figma plugin called "TinyImage Compressor" pop right up. If you haven't already clicked it, there'll be an "Install" button over here on the right hand side, just click on that and it'll change to look like mine with a little checkbox; once you see that you're ready to go.

Now we can jump back into our Figma file; I'm just using a few images that I took from Unsplash, but you can use any layers in your file for this Figma to AVIF example. If you right click anywhere, go down to "Plugins", and then just click on "TinyImage Compressor", that will fire up the Figma plugin that we just installed a moment ago. The first thing to note is this Figma plugin will basically look for any images or layers in your Figma file with export settings, and what I mean by that is if you click on a layer and go over to the right hand side of the Figma layout, you'll see a little column called "Export", and you can see on mine I've got a couple of export settings already set on this image. If you don't have an export setting set on your layer, the TinyImage Figma plugin won't pick it up, so just be sure to add any export settings to your layers and that's what TinyImage is going to use to determine what formats and what sizes you want to export per image. If I just deselect that image, you can see all of these other layers in my file have export settings on them. I've already gone through and added those but you can do that yourself depending on what images you want to export.

Now that I've got that set up, I'm just going to deselect all of my images because I don't want to export any SVGs today, I just want to export my photos in Figma from JPG to AVIF. To do that, we just have to click on this little settings icon, you'll see it in the little toolbar here, if you click on that, there's an option at the top called "Image Conversion". At the moment we don't have any image conversion selected, but if you click on that drop down you'll see a few options: we've got "Convert JPG and PNG to WebP", "Convert JPG to AVIF" and "Cconvert JPG to Progressive JPEG". Today we're just going to be looking at this middle option, which is "Convert JPG to AVIF". I'm going to click on that, and now that has selected the image conversion option to "Convert JPG to AVIF" from Figma.

If I just close off the settings panel now, you can see here if I enable a couple of images that I want to compress you can see that the JPG setting has now changed, and it has brackets next to it saying "AVIF", so that's just going to indicate to me that I've selected the AVIF conversion option and any JPG layers or any layers that you've got export settings with the JPG format set are now going to be converted from JPG to the AVIF image format. I'm just going to show you what that looks like by converting the three images I've got set up here. Of course, you can change the quality, so you can change the quality slider to be whatever you want, and you can also of course add in overrides here, so if you wanted this to have much more compression; if we wanted this one to be at "30" quality and leave the other ones at "75", then we can just put that in there and that will override that particular image.

Now that I've got everything set up to export AVIF from Figma, I'm just going to click on the "Compress Selected" button in the top toolbar of TinyImage, and this is going to go through my three images that I've selected and convert or compress our images from Figma to AVIF. The AVIF image format is a very new format, it's actually only supported by Chrome and Firefox I believe at the moment, but this is a format that is really, really good as far as image compression goes, and really good at maintaining quality for lower file sizes; I believe it's about 50% smaller than JPG, and roughly 20% smaller than WebP.

Okay, it has finished converting all of our images in Figma from JPG to AVIF for us and compressing them. I'm just going to save it to my desktop as a zip file, and just briefly I'll go over the savings that we've got here; you can see that the two images that we set at "75" quality, we've saved 39% on those and the one that we put down all the way down to "30", we've actually saved 96% file size savings on that one, so that's a total of 54% savings across the board.

Now I'm just going to go to my desktop, I'm going to unzip the file that we just exported, and you can see here we've got our AVIF files. Now, Mac doesn't have a in-built AVIF viewer, so if you do want to see what this looks like, the quickest way is probably just to drag it into your web browser, or if you're building a website or using this in production, you could just drop this into your code base and hook them up to an image tag, but in my case I'm just going to preview it in Chrome; I'll do that now. I've just dragged that image into Chrome, so that's the first image that we exported, that's the "Kyoto" AVIF image from Figma, I've also got the "Matcha" AVIF image from Figma, which has also been exported, and then we've got the "Mount Fuji" AVIF image as well; that was the one that we exported at quality "30".

So, you can see there it's just reduced that file size like crazy; that's a 69 kilobyte file, and as you can see here the image quality is actually still relatively good; you can't really tell any pixelation or blurriness, just at a glance anyway. That is a really good looking image for something that is 69 kilobytes; the same with these ones, these look really good considering that they've been compressed down to 1.4 megabytes. Okay, so that's what they all look like, and if we go back to Figma, we can just close our Figma plugin now, and that's all there is to it; you just have to run the TinyImage Figma plugin, make sure you've got that conversion setting selected in the Figma plugin settings to "Convert JPG to AVIF" image files from Figma, and you'll be ready to go.

You can use these AVIF images exported from Figma on your website, you can use them for your web applications, or anything like that. I hope this has been a helpful tutorial if you've been wondering how to export your images from Figma to AVIF, or if you've only just discovered the AVIF image format in this Figma tutorial, then I hope you can go ahead and try it out in your own projects and on your own production sites. Hopefully it all works out for you, and thank you again as always for watching. We'll be back very soon with more Figma tutorials just like this one.

---

---
type: tutorial
title: How to export animated banners from Figma to MP4 Videos using Bannerify
date: 2020-08-29T00:00:00.000Z
---

# How to export animated banners from Figma to MP4 Videos using Bannerify



#### Video Transcript

Today I'm going to be showing you how to export animated banners from Figma to MP4 video files automatically with one click.

We're going to be doing that by using a Figma plugin called Bannerify. If you haven't already done so, you can install this Figma plugin by going to the top left hand side of the app, clicking on the little Figma icon, and if you go down to "Community" and search for "Bannerify"; if you click on the "Plugins" tab you'll see a result called "Bannerify Banner Ad Studio" pop-up; then you just want to go over to the right hand side click on the little "Install" button, and once it looks like mine, with the little check mark, then you're ready to go, and we can jump back into our Figma file.

I'm just going to be using this banner set as an example to show you what it looks like. The first step is just to right click anywhere on the page, go down to "Plugins" and click on "Bannerify Banner Ad Studio", and that's just going to fire up the Figma plugin we just installed. What this does is it processes every parent level frame as a banner and it interprets those into the user interface, so every layer inside of the frame becomes an element in the banner and those can be animated individually, and looped, and have timings put on them. Today I'm not going to be showing you how to go into the animation settings and apply animations and things like that. I do have another tutorial that covers that in depth; if you check out that video on our YouTube channel you'll be able to find it, and it goes into depth about how to apply animations and do all that sort of stuff, but today I'm just going to assume that you've already got your animations set up the way you want, as I do in my file here; and all I'm going to be doing today is showing you how to export these animated banners from Figma to MP4 video files from our designs.

This is a brand new feature and this is the first tutorial that I've made about it, and I just want to show you how to use it. If you've got your animation set up the way you want, all you need to do is click on "Export to GIF/Video" up in the top header panel of the Bannerify Figma plugin here. If you click on that, you'll get a little panel pop out with a few options; and the first one we can ignore because it's related to GIFs, I have a separate tutorial on GIFs if you're interested in seeing what that looks like to export, but then these two sections down here are what we're interested in; the first option is the "Frames Per Second", so we can actually control how many frames per second our MP4 video exports are going to be exported at. By default, that's just set to 24 frames a second, that's like a fairly smooth animation. but if you really want an ultra smooth animation you can go up to 30, or if you want to have less frames and have a less smooth animations, you can do 18, 12, or 6 as well; the higher the frame rate the smoother the animation will be, but it will also take longer to export, and the file sizes will be higher with more frames per second. Having said that, I'm still going to use 24 frames per second, which is a fairly smooth option and it's just letting us know that our timeline is 5 seconds long, so exporting it at 24 frames a second will render it out at 120 frames per banner in this case; it's just a heads up of how many frames you're going to be exporting per banner.

Then finally, we've got an image compression setting; if we do want to change the quality of the images or the the MP4 videos that are being exported from Figma, we can just drag that up and down; and the higher the number the better the quality will be, but also the larger the file size will be. The very last option we have is just to enable a "Dark Mode" option for the HTML preview page that gets exported; when you do export your MP4 video files from Figma, this automatically generates a preview page which which contains all the videos on a preview page that you can send to clients, and we'll see what that looks like in a second. In this case I'm just going to leave the dark mode option turned off, but you can use that if you if you want to.

At the bottom here we've just got three options; we've got "Export to WebM", which is another video format, we've got "Export to GIF", and finally we've got "Export to MP4", which is the one we want to look at today. All I need to do is click on the "Export to MP4" button, and what this is going to do is it's going to go through every single banner in our banner set, and it's going to essentially render those images or those frames for each animation into video files, and then it's going to encode them on the fly to MP4 videos, and in this case the MP4 video files that are going to be generated from Figma are encoded with the h.264 codec; if that's of interest to you that is the codec that's being used, and that's a really good compression algorithm; the MP4 files that you're going to get from Bannerify are going to be really size efficient, they're going to be a really good file size, certainly compared to GIFs, which can be huge, because GIFs just don't compress very well, and even compared to WebM videos which Bannerify also supports; WebM videos tend to be much larger in file size, too. So, MP4 videos can be a really good option if you do want really good compression but also while maintaining really good video quality.

I'm just going to let this continue to export all of our banners and I might just fast forward this bit, so you don't have to watch it all; but we're just going to let it go through all of the 11 banners, and once we're done it's going to give us a zip file with all our videos.

Okay, it's just finished exporting all of our MP4 video files from Figma and it has given us a little download prompt, and I'm just going to save this to my desktop with the default file name and click "Save". If I jump to my desktop I can now unzip this file, it's a 1.3 megabyte file, I'll unzip that, and we can see here it's exported all of our MP4 video files; we've got all the MP4 files, we can we can preview those individually, so that's looking really good, but rather than doing it one at a time I can actually just open this up in Chrome using this "index.html" file and look at them all at once. I'll just do that now; okay, so that's all of our banners playing at the exact same time, it's just going to keep looping those, they're just videos, so if I enable the controls here you can see that it's playing back in the browser and the preview page has a loop setting on the video tag. You can you can use these videos on your own website, or upload them to Instagram, or upload them to whatever you need to upload them for in your particular case; but these are just plain MP4 video files using a video tag on this particular page. This is a page that you could send to your clients or sent to your team members to give them a really quick and easy overview of all of your different banner sizes at the exact same time, previewing those MP4 video files that we've just exported from our Figma banner designs.

That's what it looks like. It's really simple, it's a completely automated process; you don't need to do any manual video editing, any manual video encoding, Bannerify will take care of all of that for you, and export those MP4 files from Figma really quickly and easily just as we've had a look at now in this Figma tutorial. I'm just going to close that off, and close off the Figma plugin.That's all I wanted to show you today; it's a brand new feature in Bannerify that has been highly requested, so I'm really glad that it could be added to the Figma plugin, and if you've had a look at our other tutorials, you know that you can export to HTML as well; there's a whole bunch of formats that Bannerify supports, whether that be banner ad networks, or HTML/CSS or Bannerify to HTML Canvas or Bannerify to GSAP; it supports a whole bunch of different formats. You can dig into our other Figma tutorials, or better yet just download the Bannerify Figma plugin and install it, and you can have a go yourself; whether you want to export your banners to MP4, GIF or WebM; whatever you need to export, Bannerify will have you covered.

I hope you enjoyed that Figma tutorial, and if you've been looking for a way to export Figma to MP4 videos from your banner designs, or banner animations that you've got setup in Figma using Bannerify, you can now export those to MP4 videos directly from Figma with one click. Until next time, thank you as always for watching, and we'll be back very soon with more Figma tutorials just like this one.

---

---
type: tutorial
title: How to batch crop and resize images from Figma using HyperCrop
date: 2020-08-28T00:00:00.000Z
---

# How to batch crop and resize images from Figma using HyperCrop



#### Video Transcript

Today I'm going to be showing you how to batch crop and resize your images from Figma out to multiple different sizes, based on whatever dimensions you need.

To do this, we're going to install a Figma plugin called "HyperCrop". If you haven't already done that, you can go to the top left corner of the Figma app, click on the little Figma icon, and just in the search bar, if you go down to "Community", type in the word "HyperCrop", and if you put that in the search bar you'll see a result pop-up called "HyperCrop Batch Image Resizer", and if you haven't already installed it there'll be a little "Install" button on the right-hand side over here you just click on "Install", and it'll change to look like mine with the little check mark, and once it looks like that, then you're ready to go.

Now I'm just going to jump back into my project, I've just got a bunch of different images here, and I'm going to be using these as an example to show you what HyperCrop can do. If you just right click anywhere on your page, go down to "Plugins", and then go down to "HyperCrop Batch Image Resizer" and click on that, this is going to load up the Figma plugin that we just installed. The first thing to know is just to go over the interface. What we can see on the right hand side here is a list of all of the images in our Figma file that have export settings, and what I mean by that is if I click on any of these images, you can see over in the right hand side under the "Export" column heading, you can see that I've got a JPG export setting applied to this image, and all of my other images also have at least one export setting on them too, and if I were to remove that, so if I remove that export setting and then refresh my layers, you'll see here that I'll get a message saying that I don't have any selected layers which contain export settings; and it's just telling me if I want this image to be exported, I have to add at least one export setting. You can see here now I've only got nine images selected because I've just removed that export setting, but if I just add that back again; just click on the "Plus" icon, and this can be set to anything, it's just to tell HyperCrop that the images that you want to export have some sort of export setting on them, because if you didn't have that, it would basically try and export every single image in your document and that would just be kind of crazy, so that's the way that you can tell HyperCrop which images you want to actually be cropping, it's just by clicking on them and clicking on the little export setting "Plus" button; and if you click refresh in the Figma plugin, that'll make all of the images you've selected pop right up.

Now we've got all of our images in here, you can see that I can select these based on the check boxes. If I want to just target a few of them I can uncheck them, I can use this little title up here to bulk select and unselect them, if you've got a lot of images that can be really helpful, but essentially the whole right hand side here of the HyperCrop Figma plugin is really just an overview of all the images that you're going to be cropping. We'll get into these settings in a moment, but I'm just going to go through the left hand side as well. On the left hand side, that is just dedicated to sizes; if you think of the right hand side as being the images that you're going to crop, the left hand side is dedicated to all of the sizes that you want to crop each of those images to. You can see over here on the left we've got this little "Presets" panel, and if I scroll down you can see that there's quite a lot of presets in here, we've got a lot of popular social networks like: YouTube, Twitter, Twitch, we've got Tablets, we've got Snapchat, Screens, Pinterest, Phones, Paper, LinkedIn, Instagram, Google Ads and Facebook; these are all baked into the Figma plugin to give you really quick presets for very popular sizes and very popular platforms. For example, if I wanted to add this little Facebook "Carousel Ad" size and the Facebook "Profile" size, I can just click on those check boxes and you can see here it's actually just populated those into this column; this column in the middle of the two left and right sides, this column here is going to show you all of the sizes that HyperCrop is going to batch export your images to.

If I just uncheck those again, you can see here when it's empty it's telling us that we need to add our first crop size either from the presets on the left as we just did, or we also have the option to create a new custom size using the inputs above; if you see in the top left header of the HyperCrop Figma plugin, here we've got two text fields; we've got a "Crop Width" and a "Crop Height" text field. If I wanted to add a custom size that doesn't fit into any of these presets, I can do that easily just by typing in values up here, so if I type in "400" and then I can do "400" again, and then click on "Add Custom Crop Size", that now adds a custom crop size to my presets panel and also automatically adds it to my output sizes. If I uncheck that, that'll remove it, if I check it that'll leave it in there, and I can also remove it from my list entirely if I don't want it anymore; I can just click on the little "Trashcan" icon and that will remove it.

The other thing I can do is add auto sizes. If I wanted to have "400" as the crop width, if I don't populate the crop height, you can see here it says "Auto", if I click on that, it's saying it's going to do "400" width by "Automatic" height, so whatever the size of the images are, it's going to automatically determine what the height should be, but it's always going to crop the width to be "400", so I can do that in reverse too; if I just fill out the height; if I do "460" height and then click on "Add Custom Crop Size" without any width, the same thing happens; it's going to give me the automatic value to the opposite one that I that I put in there. I can also add just both of the sizes of course, as I did before, and that will that will work as well. Now we've got a few different custom sizes, so you can uncheck all of these and check them and combine them and do whatever you want; you can add as many sizes as you like. I'm just going to leave a couple of those checked for now, I might also add something from Facebook; if I add a "Carousel Ad" and then if I scroll down a bit, maybe I also want something from Twitter; maybe I want to have a Twitter "Profile Picture", and maybe I also want to have a "Website Card" from Twitter. Now I've just checked a few different options, so these are the sizes that are going to be output in this little column here, and if I go back to my right hand side, as I said before, this is going to select all of the images that we now want to resize to those sizes, so it's going to crop and resize multiple images to multiple sizes at once. This isn't kind of like Photoshop where you set up batch actions to do a whole bunch of images to one size, this does multiples, so it does multiple images to multiple sizes at the same time.

To just give you an idea of what that looks like, I'll just uncheck all of the images and if I select a few; if I select the little ice cream image, I'll select the the guy with sunglasses, and maybe just this kind of backdrop scenic sort of looking photo. Now you can see up here as I check those, the number in the top right is incrementing; it's multiplying the number of images by the number of sizes, and just to give you a sense of what that looks like I'm just going to do an example with these. You can see here the images have these little options on them, so I can determine where the crop anchor is going to happen, I can do a top left anchor so it'll crop it and make sure it's keeping the top left in check; I can also just center crop that; you can play around with those. The other cool thing is we have these other options down here, so for each image there's also a checkbox called "Content Aware", and content aware will essentially use a smart cropping algorithm to determine where the most interesting parts of the images are and it'll crop it to that area. Once you've enabled content aware, there's also a secondary option to detect faces; in this instance I do have a face in my photo, so I'm going to check that option, and again, that's going to add a secondary algorithm to determine where the faces are in that photo, and it's going to do some smart cropping to make sure the face is always prioritized. For this particular image I'm not going to turn any content aware on because it's a very simple center sort of crop, one but this one I'll add content aware to as well, just so it has a nice little cropping background and I don't need faces, because it doesn't have any people in it.

Now that we've set all that up, all we need to do is click on this little "Batch Crop" button in the top right hand corner. When I open that up there's only a few options to choose from; we can either export JPGs, or PNGs if you need transparency; I'm just going to use JPGs. We can choose what the image quality is going to be like; by default it's just set to 80. I can obviously drag that up and down; in this case I might do it to 90. Then there's one last option for image fills, which means if you select "Contain", it's going to not cut off any of the image, it'll just put a black background basically wherever the crop doesn't fit; but in my case I'm going to use "Cover", which just makes sure the image always fills up the the size.

Then down here, we've got the "File Name Format", and by default this will automatically export into folders, and it's going to do the folder name, so it might be "Facebook" or "Custom" or "Instagram"; whatever the collection is, it'll do that as the parent folder, and then it will put the file name as well as the width and height of the image into the file name. You can see an example of what that looks like down here, but you can completely customize that, too. If you wanted to add a folder, let's say "collection" and then you add a slash to make a subfolder, you could then do the "name"; then you could have the name and then do another slash and then that would make another subfolder, and then you could do the "width" and "height". You could do "width" and then "x" and then "height", and that would basically give you that custom folder structure, but you can you can name that however you want; you can put normal text in there, so you could do "crop" as a prefix, and you can really customize that to whatever you need. For today, I'm just going to leave it as the default, so we'll see what that looks like in a second, but just be mindful that you can customize that as you need to.

At last, we can click on the button "Crop and Export Images", so I'm going to click on that now, and this is basically going to go through all of the images that we selected. We selected three images, and we've selected five different sizes, so it's going to resize each of those images into five different sizes, and you can see it down here that it's processing them, going through each of those images, cropping them, resizing them and you can see here it's detecting faces for the last image that we selected, and it's telling us that it's smart cropping and resizing that one as well. We're almost done, it's just doing the last couple of images now, and once it's finished it's going to give us a prompt to save our zip file, so I'm just going to save that to my desktop, click "Save", and if we unzip that, you can see here we've got a folder structure that we expected, and if I open that up you can see that I've got my cropped images resized. Those are the those are the ones we did for Facebook, we only selected one size from Facebook, the "Carousel Ad", if we go to Twitter, we selected two different sizes, we did "Profile" and "Website Card" for each, so that's the profile and website card, and then if we go back to "Custom", these are the ones that I set up myself; it was "400" by "auto", that was "auto" by "460", and then we've got "400" by "auto", "auto" by "460"; so, those have been cropped based on my custom sizes, too. That's an example of what a batch crop process looks like. I'm just going to restart the Figma plugin, so if you close off the Figma plugin and on the right hand side under the "Plugin" heading, if you just click on the "HyperCrop" icon, that will reopen the Figma plugin really quickly, so you don't have to right click and go into all that stuff.

I just want to show you a few other things that we can do as well. You'll notice over here we've got this secondary button called "Crop Manually", and I didn't go into that before, but I can show you what that looks like now. If I just click on "Crop Manually" to any of my images, what this does is it brings up a manual cropping interface, and you can see here that it's got all of the controls that you'd expect. I can move that around, I can change the aspect ratio really easily, I can change it to a portrait aspect ratio, I can change it to landscape, I can change it to square, or I can just make it freeform. I can also zoom in and out with my mouse my scroll wheel, that will zoom in and out really easily down here. I can rotate the image, if I need to rotate it, I can do that, I can also reset the rotation just by clicking on this little icon here that rotates it. I can flip it, if I need to flip the image vertically, I can also rotate it if I needed to do that, and I can reset the whole process just by clicking on this little "Undo" button up here; that just brings it all back to the start. That's kind of what that looks like, and this is really handy if you just need to crop something really quickly, or if you need to have complete control over what the crop looks like, you can use this manual cropping tool really easily and get the exact crop to the exact dimensions that you want; you can see the dimensions down here, and the second thing you can do is also set up a resize; if you do need to resize this, you can just do that by typing in a number, so I can do "800" wide and it will automatically fill in the height for me, or I can also unconstrain that; if I just click on the little "Padlock", I can change this to be whatever I want, and that will also update it to be a forced crop size, but in this case I'll just leave it to "800" by "1200" and click the check mark, and that basically resizes it for me. You can see here it's now at 63 percent of what it originally was, and now the crop has been set to that that bounds, so that's what that looks like, and once you're happy with the crop you can save it just by clicking on the "Crop and Download" button in the top right here. If I click on that, that will save the image for me, and I can just save that to my desktop, it's just a JPG file because it's just one file, and if I open that up, that's the crop that we just saved out from the Figma plugin. So, that's just a really nice way of getting a high precision manual crop if you really need to just do one-off sizes, or if you just really need to have full control over what that crop looks like.

That's essentially what we can do with the HyperCrop Figma plugin, and as you'd expect, we can roll this out to multiple images; if we wanted to have many more sizes to to all these images, we can totally do that; you can just keep adding as many as you want and and pile them up. Of course, it's going to take longer the more images you add and the more sizes you add, but if you just leave it, it will compress them all and resize them all for you. I can show you what that looks like now; if I go through these and just update the positioning a little bit and make sure that set to to what we need; I'm just going to turn on facial detection for the ones that need it, all the ones with people in them, and for the other ones I can just just leave them. We can set these to be different crops, I'll do that to the left this one, I'll just turn "content aware" off for now. This is basically going to crop and resize our images from Figma to 180 different images, so I'm just going to click that "Batch Crop" button now, and we'll wait for it to go through them all and finish, and then I can open it up for you and show you what that looks like as an output. I might just fast forward this for you at home watching this, so you don't have to go through the whole process, but once it's done I'll open up the folder and we can go through all the images together. Okay, it's just finished zipping up all of our files that it's just finished cropping; I'm just going to click "Save" to my desktop again, and it's just worth noting that these are really high resolution images as well, these are 4000 by 2500 pixels, so these are huge; the images that you're working with may not be as big, but just be mindful that the bigger the images are and the bigger the crops are, that's going to take a lot longer than smaller ones; just something to be mindful of.

I'm just going to unzip this now. You can see here that we've got a 32 megabyte zip file; I'm going to unzip it and here's all of our folders. If you remember, these are all the crops that we had, so I can go through and I can open those up, and you can see all of the images that we added have been exported, and they're looking really good; all the custom sizes we added, we did some Twitter ones, these are our Twitter images also looking really cool, and if we go back, we had a whole bunch of Facebook ones, too; you can see here this is a huge folder of images, and all of our Facebook crops have been included. You can see here with the facial detection, it's picking up the faces, making sure those faces get included in all the crops. Just a whole bunch of crops into different sizes, but those were all automatic and we didn't have to do anything, we just hit the "Batch Crop" button and it just ripped through all of them for us. I won't go through all of the folders, but you can see here they've just been exported to all of the different sizes that we we asked for, so all the files are there and it's just super easy, super automatic, and you're basically putting your cropping and resizing on autopilot.

That's that's all I'm going to show you today; I just wanted to run through a few different use cases, show you all the features, explain how the HyperCrop Figma plugin works, and just go through each detail to make sure that you're across what you can do, how it works, and what it looks like when you export your images. Thank you for tuning in, and I hope it's been a useful tutorial for you if you've been wondering how to batch crop and resize your images from Figma; this is the the fastest way to do it if you don't want to manually crop and resize them individually, or use some third-party tool like Photoshop and do it one by one, then this is the quickest way to do it from Figma. I hope you enjoyed this video, and we'll be back soon with more Figma tutorials just like this one.

---

---
type: tutorial
title: How to convert Figma to Adobe XD files in one click using Convertify
date: 2020-08-16T00:00:00.000Z
---

# How to convert Figma to Adobe XD files in one click using Convertify



#### Video Transcript

Today I'm going to be showing you how to convert and export your designs from Figma to Adobe XD automatically using a Figma plugin called Convertify.

The first thing we need to do if you haven't already done so, is just go to the top left corner of your Figma app and click on the little Figma button, and if you go down to "Community" or "Plugins" and search for the word "Convertify", you'll see a result called "Convertify" pop right up. The first thing you need to do is just jump over to the right hand side, and if yours says "Install", you just need to click that "Install" button and it'll change to look like mine where it says "Installed" and has a sort of check mark, and once you see it looking like that then you're ready to go and we can jump back into our project.

I'm just going to be running through a few different designs to show you what it looks like to convert these from Figma to Adobe XD, so the first thing we need to do is just right click anywhere, go down to "Plugins", and then click on "Convertify", and that's just going to run the Figma plugin that we've just installed. It'll pop right up just in this little window and you can see here that it's pretty simple, there's only a couple of options that we can actually look at. You can see a couple of things: the first thing is just letting us know what page it's going to convert, in this case I've only actually got one page, so it's letting me know it's going to convert "Page One", it's giving me a little time estimate down here; it's telling me it's going to take roughly two seconds to convert the 65 layers that I've got in my file in my Figma design. Then here you can see there's only two options at the moment; there's "Convert to Sketch" and then there's "Convert to XD", which is the feature I'm going to be showing you today. It's worth noting that at this stage the Figma to Adobe XD feature is currently in BETA, which means that there's a couple of things that aren't going to be 100 percent right, but for simple designs like this one, you're going to find that it's going to do a really good job. I'll show you what that looks like now; I'm not going to cover the "Convert to Sketch" option at all in this video, but if you're interested in seeing what that looks like, we do have another video tutorial that goes into detail and covers a whole bunch of use cases with the convert Figma to Sketch option, but for today I'm just going to be showing you the convert Figma to Adobe XD option.

With that said, I'm going to go ahead and click on this "Convert to XD" button now and that's just going to convert our page. It took took about two seconds to convert from Figma to Adobe XD, and now it's letting us save it to our desktop; I just need to pick the file name that I want. In this case I'm just going to leave it the default and click "Save", and that's saved to my desktop. You can see here the message just lets us know that the converted XD file is ready and we can go ahead and open it right now. I'm going to do that by just going back to my desktop and you can see here, it has generated the Adobe XD file for me and just to confirm this is a Adobe XD document; it's a real XD file that the Figma plugin has just generated from my Figma design for me. I'm just going to go ahead and double click that file to launch Adobe XD and see what our converted Figma design looks like. That should only take a second, Adobe XD can take a couple of seconds to load up on my side, but there we go; we've got our file.

I'm just going to put these next to each other; we can actually see what the differences are and what that looks like. You can see here that it has carried over all of our Figma artboards or all of our frames, and if we look at the layers on the left hand side in Figma and then we look at the layers on the left hand side in Adobe XD, you can see that they've all been carried over, and not only that all of the layers inside of each one have also been carried over. We can see here that these are matching up one for one with the layers panel; that's really cool, as it's actually carrying over all of the layers, and as you can see over here in XD, I can edit this text. This is "real text from Figma that's editable", I'm just narrating what I'm typing right now, and that's that's pretty neat, that's exactly what we want. All of the font sizes, all of the typography settings have been carried over, all of the sizes of the bounding boxes have been carried over. If I zoom in on the Figma design you can see that the size is exactly the same, it's 630 by 183, which we've got here, and then 175 is the position, the x offset is 175 in both cases, that's really cool. Then we've got all of our images; these are all carried over one-for-one, the quality is exactly the same, there's no quality loss involved, you retain all of your image settings if you've got export settings on them, it'll mark them as "marked for export" over here in XD. This is really a one-to-one conversion from Figma to Adobe XD with that one-click process that we just saw.

I just wanted to start off with a really simple file and show you what the conversion process looks like, to show you it carrying over all of those different layers from Figma to Adobe XD and giving you an idea of what that looks like. To just ramp things up a little bit, I'm going to export a more detailed file, so this time I'm just going to open this "Apple Widgets UI Kit" page and I'm going to re-run the Figma plugin just by going to the right-hand side and clicking on the "Convertify" icon, and that will just fire up the Figma plugin again for me without having to open up the right click menu. Once again, I can see here that it's going to convert the "Cover Page", as I mentioned before if you have more than one page you can click through your pages and the Convertify Figma plugin will automatically update the page name, but also update the time estimate for how long it's going to take to export or convert that design from Figma to Adobe XD. You can see it changing here, in this case, this particular page will take about 50 seconds to convert over 2,000 layers; whereas the one down here will take one second to convert zero layers, and in that case it won't even let you convert, it as you can see here; or in this case one layer will take about one second. The page we're going to look at exporting is going to take 14 seconds because it's got about 500 layers.

Once again, I'm just going to click on the "Convert to XD" button, and you can see here it's just letting us know that Figma is going to freeze while this happens; don't be alarmed about that, it just needs to do that to divert all resources to exporting all those layers and doing quite a lot of hard work behind the scenes to make this this export conversion process happen from Figma to Adobe XD, but once that's done, as you can see here, now it's at the stage where it's just bundling up our XD file and then the Figma plugin UI is usable again.

Okay, it's finished bundling our XD file from the Figma design, once again I'm just going to click "Save" and send that to my desktop. I'll close out the Figma plugin just so we've got a good view of the design to compare, and this time I'm just going to open up my new XD file. Now that Adobe XD already is running, it opens up a little bit quicker. I'll put that side by side once again just to compare what we're going to be looking at from Figma. Just as a brief overview you can see that it's generally looking really good; we've got our artboards saved over; we can see here that we've got this little widgets group and that has a whole bunch of layers in it; we can open these up and see that the layers have actually been carried over; if I open those up you can see the layers compare directly with what we can see over here in Figma. When we open it up in XD and just to zoom in a little bit more so we can have a look at the details. Once again, this text is editable; we can jump in there and edit that text without any issues, and of course we could change all these properties now that they're in there. If I wanted to make that font size smaller I can certainly do that, and that would be just fine. Everything's positioned as we'd expect, everything's been saved out, all of the images have been saved out I can move all these around these are groups; I can move those I can dive into the group and move things like this image, I can scale that up or down of course. That's that's all looking really nice.

There are a couple of things that didn't quite get converted the way that we want; the first obvious one is this little widget down here. The reason why Figma has these little arc circles working and XD doesn't, is because the feature that has been used in this particular case to generate those which is the "arc" feature does not have any support in Adobe XD. Unfortunately that particular feature doesn't get carried across, and it kind of falls back to this progressively enhanced, well the Figma version you can consider a progressively enhanced version of what we're looking at here. That's one thing, the other thing that didn't quite get carried over would be this nested mask; I don't know why this particular file has it, but in this particular file there's a nested mask layer and for some reason that is rendered out like this in Figma. We've got this little union boolean operation with another mask on top of it; XD does not support nested masks, so if that mask was just removed which it actually just could be in Figma anyway, I'm not too sure why this particular community file has two masks on it, but that could be resolved just by removing the mask to look like what it looks like in Figma that we'd expect; but besides that, it's done a really good job of exporting the the file over. All of our little vectors and all of our little icons have all been converted, the typography has all been converted, the images have all been converted; overall it's looking quite good.

Now, the third example I'm just going to run through is a much larger file and a much larger set of components. Once again, I'm just going to rerun the Convertify Figma plugin and just click on the the Figma plugin icon down here, and you can see that we're on the "Mobile UI Kit" page, which is what we're after. I'll just click on the "Convert to XD" button again, and this one's going to take about 54 seconds, as this particular file has over 2,000 layers; it's a little bit of a bigger file than we've been used to in the last couple of exports, but as long as you just let it finish it'll do its thing in the background. As I did mention, it will freeze during this particular phase of the conversion from Figma to XD, but once it's finished actually converting the layers, as it's done now, then the bundling process actually takes very few seconds to complete, as long as you don't have tons of huge images, that's what takes the longest for the the bundling part.

Okay, I've just saved that to my desktop, and if I open that up in XD, we can go through and have a look at this file as well. It's just opened up our file once again in Adobe XD, and just as a general overview it looks like it's done a really decent job of converting everything over. I'll just zoom in; we can take a better look at some of the quirks that might be expected; the first thing to call out again like the previous example the first thing you might notice in this example is the stars in the Figma design did not match up with the stars in Adobe XD. The reason for that is simply again that Adobe XD just doesn't have a star shape; you can see on the left hand side here there's a bunch of shape options, and a star is not one of them. It has a polygon option, which is what it's being converted to, so if we drill down into this little layer, you can see that the polygon has been used with five sides, which is what the star shape has, but the star shape is fundamentally different in Figma, where where it sort of inverts the the points; it makes a star shape whereas the polygon is facing outwards and makes it look like a polygon which is what you'd expect. Figma has a polygon option as we can see up here, but it also has a star option, which in this case has been used to create this little star chart and that's perfectly fine, but it's just worth knowing that Adobe XD will not be able to interpret it. The best work workaround I would suggest for that is just to use a vector star, or convert this into a vector layer and then it'll be able to get converted over from Figma to Adobe XD as a star; that would be my first caveat. It's just to say as a global rule: anything that Adobe XD doesn't have as a feature which which Figma does have, broadly, that's not going to get converted over; purely because the feature just doesn't exist in Adobe XD; just be mindful of that if you're wondering why some of the features aren't quite looking the same.

To that point, the other obvious thing that you might have noticed is this little notch the notch for the iPhone that's been put into these mock-ups; this notch that's being used that's actually a vector layer; it's a vector shape, but the vector shape itself has got corner radiuses applied to each of the points in the bottom left and right hand corner; once again Adobe XD just doesn't have this feature. You can't drill into a into a vector layer and apply a corner radius to each point, it just does not support it. If you look in the Figma interface, you'll see a corner radius option, but again the things up here, the little settings up here, they just don't support it and that's why it's being exported as a shape a vector shape that's exactly the same dimensions but unfortunately it does not have those curves. That would just be one caveat; again, to work around that I would just have that as an actual path not as a point with a border radius on it, and just actually draw a curved path and that would once again solve the issue. Exactly the same thing here, you can see that we've got curved buttons in this instance, but square buttons in this instance. Once again for this this sort of simple use case I would suggest not using those curved vector shapes in Figma and I would just use a normal rectangle shape and I would apply corner radius to that instead of using a vector shape and applying corner radius to the vector shape, because Adobe XD does support rectangles with corner radiuses; that would work perfectly fine, but I just want to be really comprehensive and go through all of the things that are currently not going to get 100 percent carried over because of that missing feature set in Adobe XD compared to Figma.

Outside of that, it's done a really good job. As I mentioned, the glyphs or the vector icons all get carried over really nicely. You can see here that all of the icons themselves are intact; those are real boolean operation layers or union layers in Adobe XD's language, and those have all been carried over. You've got your vector paths; if I just zoom in here for a moment you can see that the vector paths have all been carried over which is really nice, and if I open that up, those layers are working really well. All your vectors are going to look really nice.

Typography looks really nice, but the one thing that I would caveat with typography is that, you're probably noticing a theme here, but the theme is that Adobe XD just does not support vertical text alignment. This is a real pain; it's a real pain to convert and it's a real pain to try and visually emulate when possible. You can see here in Figma that it's vertically aligned, but in Adobe XD the vertical alignment option just doesn't exist. For example if I create a text layer in Figma and I want to call it "vertical text layer", if I put that into my box and then I click on this little vertically aligned or "align middle" option, it immediately just vertically aligns the text and that's a pretty common use case in a Figma design that you'll use, whether it's in a button or some other shape that you want vertical alignment; but if we jump over to our XD file, and I zoom in on this text, if I highlight this text which is also in a taller bounding box; if you go over to the right hand side there's just no vertical alignment options whatsoever. There's this horizontal alignment, you can align it left right and center, but unlike Figma which does have this secondary box of options, I just can't vertically align it without positioning it manually; I have to go in and actually manually position the text that I've already got.

That's just one thing worth noting if you are converting your Figma files to XD, and I'm hoping I'm really hoping that Adobe XD ships this feature because then then I could immediately use the the vertical alignment setting in Adobe XD and just mirror that from Figma for the conversion process, but I just wanted to bring that up because it's worth touching on. In some cases where that just isn't an issue; in this case you can see the text in Figma is is a fixed size it's got a fixed bounding box and it's just being positioned wherever that text needs to be; in those cases, the conversion process is is totally fine, you can see here if I zoom in the the button has been rendered as you'd expect and you've got the little text in there and it's been positioned correctly, but of course, that's just not going to work if you're using the vertical alignment option.

Okay, those are the examples I just wanted to run through just to give you a varying degree of what a smaller file looks like what a more complex file looks like in terms of the output but also in terms of the speed that it takes to convert your Figma design to Adobe XD files. I'm fairly happy with those three; again, with those caveats that you can either manually tweak the design in Figma or manually tweak it in Adobe XD; I would be more inclined to try and tweak them in Figma if you are going to be re-exporting this file regularly to an XD file, I would try and solve the issue in Figma. That way if you do need to keep re-exporting it from Figma to Adobe XD, then every time you rerun the Convertify Figma plugin those changes are going to get solidified in the export, rather than manually editing the exporter file and then needing to re-export it later and manually updating that in your Adobe XD design; that's the way I would approach it. Again, this this should improve with time, as long as the Adobe XD team starts shipping some more features that Figma has. As soon as they do that, the Convertify Figma plugin will be updated to try and squash some of these little annoying bugs; but until then that's unfortunately just the case.

I hope that that's been interesting for you if you've been looking for a way to try and streamline the conversion process, or the recreation process from a design in Figma to Adobe XD; this is the the quicker way of doing it instead of actually manually recreating the file. Even if it only gets you to 90 to 95 percent of what you need, as it does in this case, it's still going to be much more effective and much more efficient than having a designer spend the better part of a week manually recreating a design like this, or an even bigger design like this from Figma to an XD file.

That's all I have for you today; it's not a super long tutorial just because it's such a simple user interface and this is such a simple process to convert those designs from Figma to Adobe XD with that one click process using Convertify. I hope that you've walked away with something you can use and potentially try out with your team if this is a use case that you you have internally, or if you're working with a third party, or another agency, or another company that does need need files in Adobe XD but you're all in on Figma; then this might be helpful for you. I hope that you found it valuable, and I just want to say thank you as always for watching; and we're going to be back very soon with more Figma tutorials just like this one, so stay tuned for those.

---

---
type: tutorial
title: How to export animated banners from Figma to GIFs using Bannerify
date: 2020-08-16T00:00:00.000Z
---

# How to export animated banners from Figma to GIFs using Bannerify



#### Video Transcript

Today I'm going to be showing you how to export your animated banner designs from Figma to GIF files that you can use online for any ad network, or if you just want to use them on your website, or anything like that.

The first thing we need to do is install a Figma plugin called "Bannerify", and if you haven't already done so, you can jump into the Figma menu in the top left hand corner, if you click on the little Figma icon, and if you just go down to "Community" or "Plugins", and in the search bar just type in the keyword "Bannerify"; if you click on the "Plugins" tab you'll see a result called "Bannerify" pop right up. The next thing you want to do is go over to the right hand side and you'll see an "Install" button; if you click on that "Install" button it'll change to look like mine where it says "Installed" and has a little check mark. Once you see that check mark it means that you're ready to go and you can jump back into your Figma project.

I'm just going to be using a banner set that I designed as a bit of an example; we're going to export all of these banners into a GIF file which is animated, based on the animations that are being set up in the Bannerify Figma plugin. The first thing we need to do now that we've installed the Figma plugin is right click anywhere on the page go down to "Plugins", and then the top result in my menu is "Bannerify"; you just want to click on that Bannerify plugin and this will load up the Figma plugin that we've just installed.

What it's going to do is just load up all of our parent frames in the left hand side here and it's going to parse those as banners; each of those frames is one banner, and then each of those sub-layers inside of each frame becomes a layer inside of the banner for each one. Those can have animations applied to them, as you can see here I've already got some animations set up, I can preview that in the window here. It has just got some very simple animations set up on all of these, and I'm not going to be showing you how to use all the animation features in this tutorial, but I do have another tutorial on the YouTube channel that you can find which goes in depth into how to use all of the animation tools, how to set up easy delays and bulk apply animations to different layers, but in this tutorial I'm just going to assume that you've already set up your animations the way you want, and you just want to export these banners from Figma to GIF files.

I'm happy with my animations, I'm pretty pleased with the way that they look, and all I want to do is just export them. All we need to do is click on this button in the top menu bar, which is called "Export to GIF/Video"; if I click on that button that brings up the settings panel for this feature; it's telling us that this is going to let us export our banners to either a GIF or a WebM video and it's just letting us know that the banners are going to be played through in real time and rendered out, and we're going to get a zip file when it's complete. We've got a couple of options here; the first one is in regards to looping the GIF, if we want our GIFs that are exported to infinitely loop then we can check this box, which is enabled by default. If you don't want your GIFs to loop and you just want them to play through once and then stop at its final frame, you can uncheck that option and that will remove that ability from the exported GIFs from Figma; in this case I'm going to leave mine to loop. Then the other option we've got is output quality; this slider here you can slide up and down and that will change the compression or the file size and quality that the GIF is going to be exported at from Figma. You can you can slide that up and down, I'm just going to leave it at let's say 65 in this case. The final export option we've got here is the preview page option; this little checkbox is just letting you set dark mode for the HTML preview page that it's going to generate. Once the GIFs are all exported you will get a little "index.html" file which you'll be able to open in your browser, as we'll see in a minute, and that will serve as a way to preview all of the GIFs at once; and it's just a really nice thing that you can upload onto a server somewhere and send it around to your clients or send it around to your team for an approval stage. This little check box just turns on dark mode for that page, if you turn it off it's just going to render it out with a light gray background the same as the Figma background; I'll just leave that off for now.

So, now that we've set those settings up the way that we want, we simply just click on the "Export to GIF" button, and that will start the process. I've got 11 banners in this design and what the Figma plugin is doing right now is, it's first of all playing through the banner; you saw a second ago, it's just playing through all of the keyframes and that's essentially capturing the animation in real time, and then once it's finished capturing it the second phase of the export process per banner is to then render those frames into a GIF; that's what you can see it doing right now, and you've got a little progress indicator per GIF whenever that happens. Depending on how many banners you have and depending on how long each banner plays for, that will roughly determine how long the export process will take; effectively you'll need to let it play through all of your banners, and as I said in this case I've got 11; you might have less or you might have more, but if you just let it keep going it will eventually export all of these into a zip file and you'll be able to open them up. We're going to have a look at that in just a second; I'm just going to speed this video up in a moment just so it finishes up at the 11 mark, and just so you don't have to sit and watch the whole thing, but this is the process that you will you'll go through.

Okay; that's just finished up and now it's at the final stage of just zipping the GIF files into a zip file; this typically doesn't take too long, as it's basically just going through all of the GIFs that just generated and it's zipping them up into a single file; you'll be able to save this and then double click to open it in just a moment. We'll see that show up in just a second; okay, that's just finished and once it completes you'll get a prompt to download this to your desktop or download it to your computer. By default, it will just use the the date and the time, and you can obviously change that file name if you'd like, but I'm just going to leave it as the default and click "Save" to send it to my desktop. So, that's the process; the banners are now ready, it's telling us that we can unzip the contents of the file to the computer. I'll open up my desktop and I can see here I've got my zip file which I can now open, and there we go, we've got our entire folder of GIF files from Figma. I can either open these up with preview, or I can preview them on my file system just using Mac finder, and that will just play through; or, as I mentioned before it comes with this little "index.html" file, and I can actually open that up just by double clicking it, and that will open it up in Chrome.

That's what our preview page looks like; you can see now, it's just generated all of the banners that we exported in one place, and it's just going to play through them on a loop because we set that infinite loop option in our Figma plugin settings earlier. It's worth noting this page is also fluid and responsive, so if you do want to view this on different monitors or you're sending it to a client, it will automatically rearrange the banners so it fits to their screen. You can you can resize that as as much as you want and it will always look nice with a grid of different export banners; that's what it looks like, that's all of our GIFs from Figma playing at the same time. If we just want an overview of of all of them you can see here they're looking really nice, they're looking very smooth, the frame rate should be about 30 frames a second and you're really getting very, very smooth animations. There'll probably be an export option in the future where you'll be able to specify the frame rate, which I think will be useful, but at the moment it'll just export it by with this default option set.

That's our whole folder you can see here, all of them are individual files, too. These are all being loaded into that "index.html" file as a preview, but of course these are the real files that you can actually use and and send around or upload onto your website, or upload to your banner network or your ad platform, and you'll be able to use that to advertise your products or services for you or your clients or whatever use case that you have.

So there we go; it's really simple, as you saw, just a one-click process once you've set up all your animations in the Bannerify Figma plugin. As I said, if you're interested in seeing what that looks like, we do have another video on that which goes really in depth into how to structure the animations and set those up really easily, but this was a highly requested feature for the Bannerify Figma plugin; being able to export animated GIFs from Figma from your animated banner designs that you were already exporting to HTML in most cases.

I just wanted to give this quick tutorial today to show you what that new feature looks like and what the output looks like. Hopefully you'll find it useful in your own process with your own team, or your own agency, and if you have any feedback please let us know, as we're always trying to make this Figma plugin as good as it can be. That's all I have for you today, and I'm sure there'll be more improvements in the future that I can go through in another video, but thank you as always for watching, and we'll be back very soon with more Figma tutorials just like this one.

---

---
type: tutorial
title: How to export animated banners from Figma to WebM Videos using Bannerify
date: 2020-08-16T00:00:00.000Z
---

# How to export animated banners from Figma to WebM Videos using Bannerify



#### Video Transcript

Today I'm going to be showing you how to export animated banners from Figma to WebM video files in one click using the Bannerify Figma plugin.

If you haven't already done so, you'll need to install the Bannerify Figma plugin by going up to the top left hand corner of the Figma app and clicking on the little Figma icon, and if you go down to "Community" or "Plugins" and then if you search for the keyword "Bannerify", then just click on the "Plugins" tab and you'll see a result called "Bannerify" pop right up, and if you haven't already done so, you can go over to the right hand side here and there'll be an "Install" button, if you just click on that "Install" button, it'll change it to look like mine where it says "Installed" and has a little check mark on it and when you see it change to look like mine, that means you're ready to go and you can jump back into your Figma project.

I'm just going to be using a banner set that I designed as a bit of an example to use with this Figma plugin, and the first thing we need to do is just right click anywhere, go down to "Plugins" and click on "Bannerify" in your plugin list and that will start up the Bannerify Figma plugin that we just installed. What this is going to do is it's going to look through all of our layers on the left hand side here, and it's going to treat every parent frame as its own banner. Each each of these frames is treated as its own banner and then if you open up the layers list you'll see that those correlate to the layers in all of our banners inside of the Figma plugin; each of those layers can be animated and as you can see here, I've already got some animations set up. If I just click on the little preview you can see it animating over here. I've set these up before, but you can set up the animations any way you want, I'm not going to go into detail about setting up animations in this video, but I do have another in-depth video on it on the YouTube channel; if you just browse for the animation video on Bannerify, you'll be able to get a full deep dive into how to set up the animations and the most efficient way to do that, but today I'm just going to be assuming that you've already set up the animations in Bannerify the way that you want, and now you just want to export them to some WebM video files from Figma.

We can do that really easily just by clicking on this button up here in the top header called "Export to GIF/Video"; if you click on that button you'll see this little module pop out, this little feature which is letting us export our banners to a GIF or WebM video from Figma using the Bannerify plugin. It's just letting us know that these banners are going to be played through in real time and rendered out, so you're going to get a zip file once it's complete. There's a couple of options here that we can set up: the first one is related to GIFs only; I'm not going to be covering GIFs in this video, but I do have another video showing examples of that if you do want to see that on the YouTube channel, so I'm going to leave that option off for now because it won't impact what we're doing today. The next option is just output quality; this little slider will change the quality and the file size of your export, if you set it to a lower number a lower setting it's going to mean that the quality is lower, but it's also going to mean that the file size is lower, and conversely if you set it up higher it's going to mean that the quality of the video is better, but again the file size is just going to be a bit larger. I'm just going to leave it around 90 which is the default, and just set it to that and then the final option is just around the preview page; basically when you export from Bannerify you always get a little preview page which is just an "index.html" file containing all of the exported banners, and it's just a really easy way to upload that to a server or send that to a team member or a client and they can approve your banners based on this little overview of all the exports. This setting basically just turns on dark mode for that export, so if you have a set of banners that are going to look better with a dark background or a dark theme you can enable that otherwise it's going to look like basically what it looks like in the Figma file, the background color is the same as whatever it is in in Figma right now which is this sort of light gray. I'm just going to leave that setting turned off in this instance, but you can experiment with that if you'd like to.

Okay, now that we've set up our settings the way that we want, all we need to do is click on this button called "Export to WebM", so I'm going to click on that now, and what this is doing is it's actually going through and playing each banner. It's playing all of the animations for every banner; I've got 11 banners in my case and it's playing through them in order to capture frame-by-frame the animations and the playback for all of them, and once it finishes capturing the frames for each banner it's actually then using those frames to create a video file for each one. When it finishes up in a moment it's going to render these out into video files and it's going to package them up into a single zip file that you're going to get as a download in just a moment, and then we can open that up and have a look at what's actually exported for us. It's fairly quick, it just depends on how many banners you do have and how long the timeline for each of those banners is, and that's a rough indication of how long this export process will take. Now it's zipping up our WebM files as we can see down here, and very shortly it's just going to pop up and tell us it's done which it has just done now; and you'll get a little download prompt which will let you rename the file if you want to, I'm just going to leave it with the default, which is just today's date the export format and just letting us know it's come from Bannerify. I'm going to click on "Save" and send that to my desktop, and that's the whole process. It's let us know that the banners are ready and we can unzip those banners and basically use them however we want.

If I go down to my desktop now, you can see that I've got this zip file that has just saved out for me; all I need to do is double click on that and you'll get a little folder. If you open up the folder you can see here it's got all of our layers, or all of our banners, that we that we set up and export from Figma to videos. If I open up the "index.html" file; that just opens up the preview page in Chrome; that's essentially playing all of our banners in the browser in this little neat grid, and these are all videos. You can see here if I actually enable the controls, these are these are videos that I can actually control the playback for, and it's worth noting that this preview page I mentioned is fluid and responsive; if you do change the screen size or if somebody's viewing it on a different screen size, it will automatically adjust the layout of the banners in order to be optimal for that screen size, so that's really neat. We can see all of our banners basically exported as we wanted, and if you do want to look at them individually you can simply just drag any of those into the browser and that will actually load up the video itself that you can just have a look at; and obviously you can playback that video however you like, there's a little control bar here that pops up because I'm just viewing the video itself now. The videos files we exported from Figma are looking really smooth; this is a 30 frames per second video, so you should notice it's very smooth, very seamless and it has exported it just as you would expect.

We can have a look at any of those it'll it'll play through all of those. Depending on your implementation of it when you upload this to your website or when you upload this to your advertising network/platform, if you're using it on a website you'll be able to loop that playback just by adding some inline playback settings. If you use an HTML video tag and you put the "autoplay" attribute or if you put the the "loop" attributes in there; you can you can look up what those are like. I actually do have them in the preview file, so if you open up that "index.html" file in a code editor or a text editor you can actually see the HTML video tags in there, and you can just copy paste those, and it'll be really simple. I can actually show you what that looks like now; if we drag that index file into the code editor, I'm just using VSCode at the moment; you can see here that it's injected all the video tags for us and I've got the "autoplay" and "loop" properties set on that; that actually just causes the video to loop over and over on an infinite timeline for as long as we need it to and that's why it's looping on that preview page which we just looked at a moment ago. It's really up to you what you do with the video, it's totally your implementation of it, there's no loop settings on the video themselves, so you can basically do whatever you want with it.

You'll notice that these files are in WebM; WebM is a video format for the web, but if you do need this video in a different format, you could use another tool like an exporter tool or a converter tool that does convert video formats into different formats. If you need this as an MP4, or if you need this as a different different file type for some reason, there are third-party tools that you'll be able to drag these files into and convert those into other formats, but these are WebM files and they'll work on the web. If you do need it just for your website or if you do need it just for advertising banners, then WebM should be fine, but if you want to use it for something that's not on the web or something that just needs a different file type, you'll be able to find a converter to convert these WebM files, just Google "WebM to" whatever format that you need, and I'm sure something will pop right up.

Okay, that's the entire tutorial; as I mentioned, it's really simple, it's just a one-click process from Bannerify to export these video files from Figma, and again, assuming that you've already got those animations set up, you can just keep exporting these as much as you want. If you need to do some animation changes and you want to export it again, or if you need to make some design updates or positioning updates in the banner, you can just simply rerun the Figma plugin, click that "Export to GIF/Video" button again, and the process that we just watched will get executed again. You can just keep doing that as many times as you want without needing any video software or exporting those frames manually, and then somehow exporting into a video, Bannerify will do all of that for you.

If you've been looking for a way to export banners for your website or banners for your advertising platforms from Figma to video, or to WebM in this case, then Bannerify now supports this along with lots of other HTML export format options, and also now it supports exporting banners from Figma to GIFs; which as I mentioned is in another tutorial, and we also have a bunch of other tutorials on every other export setting that it supports: HTML, GSAP, HTML Canvas, DoubleClick, Adwords; all of these different platforms and more; you'll be able to find each of those tutorials on our YouTube channel if you'd like to view those as well.

That's all I have for you today; I hope that you've enjoyed this Figma tutorial and I hope you've got something out of it, if you want to take this back to your team or to your agency and give it a trym you can install the Bannerify Figma plugin and run it the way that we just looked at, and hopefully you have some success with it. Thank you as always for watching, and we'll be back soon with more Figma tutorials just like this one very soon.

---

---
type: tutorial
title: How to export a PowerPoint file with editable text from Figma using Pitchdeck
date: 2020-08-12T00:00:00.000Z
---

# How to export a PowerPoint file with editable text from Figma using Pitchdeck



#### Video Transcript

Today I'm going to be showing you how to export your slide deck presentation designs from Figma to PowerPoint files, containing editable text layers. This will also work for Keynote and Google Slides as well; but I am going to be showing you how to make it editable, so you've got text that comes from Figma and gets carried over to PowerPoint, and you'll be able to hand that file over to somebody and allow them to edit the content in their tool of choice.

To get started, the first thing we need to do, if you haven't already done so, is install a Figma plugin called "Pitchdeck". The way you can do that is just by going up to the top left hand corner of your Figma app, clicking on the little Figma icon, and if you go down to "Community" or "Plugins", and you go to the search bar and type in the term "pitchdeck" then if you go to the "Plugins" tab, you'll see a result pop up called "Pitchdeck Presentation Studio", and on the right hand side you'll see a button that says "Install", if you click on that "Install" button, it should change to look like mine, where it's got a little check mark and says the word "Installed" next to it. Once it looks like that and it's been installed, you're ready to go, and you can jump back into your Figma project.

I'm just using a fairly simple deck design with 11 slides, and it's just based on Dieter Ram's 10 Principles for Good Design. This is just an example of what a slide deck could look like, and I'm going to use this as an example to show you how to export this from Figma over to PowerPoint with editable text. The first thing we need to do is just right click anywhere on the page, go down to "Plugins" and if you click on the plugin called "Pitchdeck Presentation Studio", you'll see the Figma plugin load up. This is currently loading up all of our frames from the left hand side here and it's turning those into slides; we can see all of the slides I've correlated to all the layers in the Figma layers panel. In this Figma tutorial, I'm not going to be going into detail about animations, I'm not going to be going into detail about speaker notes and how to present a web presentation and things like that; today, I'm just going to be focused on showing you how to export this Figma slide deck design to PowerPoint or Keynote or Google Slides and keep all of the text editable; that's really what I want to show you today. If you do want to see a video tutorial about how to add these animations, how to add slides slide notes, how to actually present the presentation, you can go to our other YouTube Figma tutorials, and we've got a couple on there that'll go into way more detail about all those bits and pieces.

Okay, I've basically got my slides the way that I want them, so I'm ready to export this slide deck design to PowerPoint from Figma. All I need to do now is just go to the top right of the Figma plugin and click on "Export Presentation", and you can see here it's just pulling out a little export settings panel and there's a few little sections in here; the first one would be the "Select Presentation Format" option; this is just a drop down that you can click on and it reveals a few different export formats; the first one is the "Pitchdeck Presentation URL"; this will actually create a web based presentation, and then we've got at the bottom a "Static Deck" option, this will export your deck to a PDF, but the ones we're interested in today are the "Presentation App" options; that's "PowerPoint", "Keynote" and "Google Slides"; today, I'm just going to be looking at how to export to these particular formats and how to make the text editable once you do export it.

In this case, I'm just going to use Keynote as an example and I'm going to show you what it looks like normally to export this for Keynote or for PowerPoint from Figma, so I'm just going to select that "Keynote" format, I'm going to click on "Export for Keynote" and click that, and what this is doing is it's just exporting these slides into a Keynote file that we can open in a moment. This isn't going to be an editable, it'll be editable as far as the images and layers go, but the text layers in this example will not be editable they'll be rendered as images; we can just open that up now that we've exported it to our desktop from Figma, and once it loads we'll be able to see what's going on here. As you can see all of the layers have been kept intact, we've got all of the layers as we'd expect, which is great, the only thing is these layers have all been exported as images; even the text layers are images, I can't edit them, I can't double click on them because they are in fact images. That's great in some cases when you don't need to have editable text, when you just want to export this from Figma to PowerPoint and be able to present it in PowerPoint, then that's perfectly fine and rendering it as images is going to make sure that it's you know pixel perfect to the original typography that you get.

The next thing I'm going to show you is how to actually export this with a different option, and that's going to allow us to edit this text once we do export it from either Figma to PowerPoint, Figma to Keynote or Figma to Google Slides. I'm just going to close that off I'm going to restart the Figma plugin, you can do that by just going over to the right hand side, clicking on the little "Pitchdeck" icon and that will just loaded up the Figma plugin. Once again, it's just loading up the slides there we go it's been been loaded up. Again, I'm not going to change anything here, I'm just going to re-export this presentation; I'm going to go back to the top right hand side and click on the "Export Presentation" button and it has recalled our presentation format from the last export; it's still set to "Keynote", I could obviously change that to PowerPoint, or I could change it to Google Slides, but i'll just stick with Keynote for now. The option that we're interested in is this new option that's been shipped in the Pitchdeck Figma plugin; at the bottom here you can see a label called "Editable Text in Keynote", and it's currently in "BETA" status. What we can do is we can actually enable this checkbox or this little toggle; this says "Use Editable Text (instead of images)", and what this is going to do is contrary to the last file that we just exported with this setting disabled, enabling the setting is now going to export it using this editable text feature, and it's going to allow us to edit that text in our presentation app; be that Keynote, PowerPoint or Google Slides; it's going to keep all of that text from Figma and bring it all over. I've enabled that feature and I'm just going to click "Export for Keynote" once again, and this time it's going to use a slightly different export method, it's going to retain all of that text so that we can actually edit it.

Okay, it's finished exporting. I'm just going to click "Save", and put that on my desktop, and you can see here that we've got our new file once again. I'm just going to open that up with Keynote, and at first glance it looks the same but if I click on these layers, you can see that it's a little bit different this time these are not images these are actually text layers; instead of rendering out an image it's actually rendered out text from Figma; this "text is from Figma" sentence obviously makes no sense, but I'm just editing editing the text. You could give this file to somebody else who's not a designer who doesn't use Figma and is much more comfortable in PowerPoint, Keynote or even Google Slides, and they can edit this; this this text is all editable, you can change the text style if you wanted to for some reason, that would be that would be fine, and then you've got all of your settings here; you can change the font size if you wanted to do that; I can make that smaller and that changes the font size I can change the color; if I wanted to change the text color just for this word I could definitely do that and just a bunch of different options; I can change the alignments; all of the options you'd be used to if you were just creating this from scratch in PowerPoint or Keynote, but obviously the benefit here is that we were able to design it in Figma and then bring it over to PowerPoint or Keynote and either continue editing it there, or you know letting somebody else take over and maybe just update the copy or something like that if they really wanted to do that.

Those are the two different options; there's different use cases for both, where clearly sometimes you you may not actually need to have the text editable and sometimes you might just want to retain the sort of pixel perfect nature of some of the typography; Figma does have more fine grained control over typography, even with the spacing here, there's only limited options for line spacing and things like that, with Figma you obviously have much tighter control over a lot of the typography; you're going to lose out on a little bit of that by exporting it to text from Figma to Keynote or PowerPoint, there's definitely going to be use cases where you've got somebody on the team who just prefers to work in PowerPoint, Keynote or Google Slides instead of Figma, or maybe they just aren't invited to Figma for some reason, then this is the way that you can go about doing it if you need to get them involved and export the presentation for them to be able to edit.

That's all I have to show you today; it's just this new feature in the Pitchdeck Figma plugin that I wanted to to reveal and and give a bit of a sense of what it looks like and how it works, because in the previous Figma tutorials you could only export these slides to images; all the text was just images, and at the time there was no option to be able to export it with editable text. That feature has just just come out recently, and that's why I wanted to make this tutorial to show you how you can use it in your own projects. Thank you as always for watching, and we'll be back very soon with more Figma tutorials.

---

---
type: tutorial
title: How to merge frames to a compressed PDF from Figma using TinyImage
date: 2020-08-12T00:00:00.000Z
---

# How to merge frames to a compressed PDF from Figma using TinyImage



#### Video Transcript

Today I'm going to be showing you how to export merged PDF files with compression from Figma using a Figma plugin called TinyImage.

If you haven't already done so, the first thing we need to do is install the TinyImage Figma plugin from the Figma plugins directory. The quickest way to do that is just by going up to the top left of your Figma application, clicking on the little Figma icon, and if you go down to "Community" and click on "Plugins" you'll be able to search for a Figma plugin called "TinyImage", and you can just put in the keyword "TinyImage" and if you click on the "Plugins" tab you'll see a result pop-up called "TinyImage Compressor", and over on the right hand side over here you'll see the "Install" button. If you haven't installed it you'll see a button that just says "Install" and once you click on "Install", it'll take a couple of seconds and then it should change to look like mine where it says "Installed" and it has a little checkbox next to it. Once it does say "Installed", then you can jump back into your project and we can get started.

The first file I'm going to look at is just this design with a bunch of frames; it's a presentation for Dieter Rams "10 Principles for Good Design", and today I want to export this as a PDF file from Figma, but I want it to be a compressed PDF file and I don't want it to be the regular PDF that Figma exports natively, because it's really large, and it's just way too big for sending people over email or Slack and things like that. I want to be able to compress this file into a single PDF and have a couple of options around that.

The first thing we need to do is just right click anywhere, go to "Plugins" and then go down to "TinyImage Compressor" and click on that; that's going to launch the Figma plugin we just installed. You can see here that the first thing we can see is this little empty state, this little warning message just letting us know that none of the layers in our file have any export settings on them; that would normally mean if I click on this image for example, an export setting is something that you can add in Figma in the right hand column; you can see over here on the right hand side I've got this little export section, if you click on that it'll allow you to add export settings for each layer or each image in your Figma file. Normally this would be the way that we would compress images with TinyImage; for example if I just refresh this you can see that it's picked up on the three export settings that I've just added to that image, but for today, because we're actually going to be using a different feature in the Figma plugin, I don't actually need to have these image settings added at all; I'm just going to remove those three refresh the Figma plugin and so this message is actually fine for our use case, because the second part of the message lets us know that if we just want to export all of the visible frames on this page to a single compressed PDF then we can use the the button above.

I'm going to do that now, I'm going to click on this "Create a PDF" button up here; you can see once I've clicked that it's brought up a little panel for me, this little export panel, and this is allowing us to create a PDF from frames inside of our Figma file; when I say frames I mean top level frames. You can see in the left hand side of our Figma design over here we've got all of these frames at the top level of the page and these are all being picked up on by the Figma plugin; we can see here it's picking up on each of those layers if I bring this over here you can compare it directly; starting from "Principle 10" all the way down to "Intro", it's bringing all of those layers in in or in the order that they appear in the layers panel in Figma. In our case, the order of the Figma layer panel is actually the exact opposite of what we want; by default it will load them in that order, but we obviously want them to be in a different order. There's a few ways to approach this: the default option is to sort these frames by drag and drop; you can see over here we've got this little grab icon, when you hover over this little icon over here, and if you click and hold that and drag it you are actually able just to reorder those frames in any order you like by clicking and dragging them and you can put them into any custom order that you want and when you've when you've finished with that it will render out that PDF file in this particular order; but clearly if you've got a dozen, or more than a dozen in other cases, frames just like this one manually going through and rearranging every single frame back to front, it's actually kind of time consuming.

That's why I wanted to make this tutorial about a brand new feature that's just been shipped in the TinyImage Figma plugin, and that is the quick sort option. As I just showed you, the default is actually set to sort by drag and drop, and by default that will load in the the normal ordering, but if we click on this little drop down here where it says "Sort by Drag & Drop", if I open up that select box you can see there's actually a bunch of options in here, and of course the default one is just custom ordering via drag and drop, but there are some other options, too. I've got "Figma layer ordering", so if I click on "Sort by layer order", that's just reverted it back to the layer order that we saw in here, but if I go one more down, we've also got "Sort by layer order in reverse", so if I click on that one, that's actually exactly what we want; we want it to be the the reverse of what it is in the Figma layers panel. So, just with one click I'm able to change it from the default ordering to reversing that layer order. Now we've got "Intro" at the top and "Principle 10" at the bottom, it's literally reversed that order that we can see in the Figma layers panel here, and it's done so without interfering with our Figma design or Figma file at all; all of these layers are still in the same order, it's not altering those, it's just scoping that to the Figma plugin options themselves.

There's a few other options we've got in here as well; let's say you wanted to export this, and for some reason the design has been a bit frantic and they weren't able to keep all the layers in the same order as the designers appeared visually; in that case we could do another option which is visual position ordering, so instead of sorting by the layer order in Figma or reversing the layer order in Figma or using drag and drop, we can also arrange these frames by where they're positioned visually on the canvas. For example, if I click on "Sort by left to right", you can see here that it's actually sorting from the top left to the bottom right, and what that means is it's actually going through and it's going from "Intro" to "Principle Three" to "six" to "nine", then it's going all the way back up to one to "four" to "seven"; you can see that ordering popping up there in the Figma plugin and that's really neat, if you have ordered it in more of a column setting where you need to order it by columns, basically from column one all the rows in column 1 to column 2 to column 3, that ordering would be perfect for that setting.

There is also a second setting if you need to go from top to bottom, or top left to bottom, you can also use "Sort by top to bottom", if you click on "Sort by top to bottom", that will actually then do the opposite basically, or it will do an alternative of that where you go row by row; you're going row by row from the top, starting at "Intro", it's going to go from "Intro" to "Principle One" to "Principle Two", and then it's going to go to the next row "Principle Three", "Principle Four", "Principle Five", and that's going to keep going on until it gets to the end. In that sense, you're going from the top over here to the bottom, row by row, instead of column by column; that's the difference between left and right, left to right, and top to bottom and then there's the opposite of both of those options, too. You can also go from bottom to top, which would exactly reverse that ordering; you're getting 10 to 9, and then it's going up another row to 8, 7 and 6 and the same thing if I go from right to left; in this case it's actually going from the the opposite way that we that we saw before; it's actually starting at "Principal 8" this time, so it's starting at the last column. It's important to know this particular option is column, and the other one is row, from left to right; this is actually going from 8 to 5 to 2 and then it's going back down to the bottom to 10, to 7, to 4, to 1, and so on; these are the different options that you have; they can be handy depending on how your design's been organized, how it's visually organized, how it's organized by layer, and of course if worse comes to worse, you can always pick one of them so if you do "left to right" and let's say you still need to fine tune it, you can still go ahead and just override that ordering with drag and drop. Even if you get 90-95 percent of the way with your visual sorting, maybe there's something that's a couple of pixels off, you know up or down, or left or right, than the other frames for some reason, you can still go in there and manually tweak that if you really wanted to. Those are the sorting options that we can use for all of our layers.

We can also select layers that we want or we don't want; for example if I actually just want to get rid of the "Intro" frame, I can just click on that, and now you can see that 10 of the 11 frames have been selected. I've got rid of the "Intro" frame, of course I can get rid of any of these frames, I can get rid of them all, and then obviously I can't export it until I select one. You can just toggle those to create the PDF that you really want, it's not just going to go ahead and export all of those frames if you don't want them to; you have full control over which frames and what order they're in to be exported from Figma. There's a couple of other options as well; I've covered these in other tutorials, so I won't go into full detail of them, but you can also select the color profile and if you need to, and you can also add an optional password to protect the PDF file.

Having said that, I'm just going to export this. Let's just go with the default layer order for now; it's backwards, just to show you what it looks like normally. If I click on this "Export Frames to Merged PDF" button, that will start the merge process of going through each of these 11 frames and compressing them to a PDF. That's going to go through all of them, and once it finishes we should see some really good file size savings and expect the PDF exactly as we ordered it. That's finished converting, and you can see here the original PDF size was 6 megabytes, so we've had that taken down now to 1.3 megabytes; that's a 77 percent saving from the original PDF file size, and it's worth noting that was a 300 dpi PDF, which is the highest quality dpi for exporting compressed PDFs from Figma. If I go to my desktop now and just open up this PDF file we just exported, you can see here it's exported the PDF in the reverse order that we just set up in the Figma plugin, just to show you what that looks like. It has exported perfectly, and it looks great; I can't tell that the compression has been applied at all, it looks just super, sharp and exactly what we expected.

If we run that again; we can do that just by closing the Figma plugin and going over to the right hand side column, and if you click on the "TinyImage" icon, it'll reload the Figma plugin for you really quickly. Now that we've exported a PDF file just to experiment with, the second thing I wanted to show you is just changing the quality on that as well. We had that set to the best quality, and you can see up here the button changes its context based on what quality you're setting it at; there's three levels of quality for PDF exports: there's 300 dpi which is basically print quality, if you slide it down you can get to 150 dpi, which is more like a screen based quality (high quality for screens), and then you've got 72 dpi, which is the lowest quality, but it's going to give you the highest file size savings. Let's just try exporting it at 72 dpi, and I'm just going to leave that slider set to 72 dpi, and if I click on the button again, the "Create a PDF" button, this time I'm going to export it in the correct order. I'm just going to click on "Order by layer order (reversed)", and that's just going to take the Figma layer order and reverse it for me. Now I've got it in the order that I actually want it, and I'm going to go ahead and unselect the second half of this presentation, because for some reason in this case I'm just going to export the first four principles; let's let's see what that looks like. Once again I'm just going to click on "Export Frames to Merged PDF", and actually that's not going to work... I'm going to reselect all of those, because I do want to compare the file size and if I remove those frames, it's going to make the file size smaller, of course; but I want it to be accurate to what we just exported. So, I am going to leave all 11 frames selected, and all I'm going to do is just reverse the order, that's it; that won't change the file size at all. We're just going to see what it looks like with 72 dpi.

Again, I'm going to click on "Export Frames to Merged PDF", and once again, this is just going to merge those 11 frames to the PDF. It has converted it really quickly from Figma to a compressed PDF, and this time we've saved 86 percent. We've actually got it down underneath a megabyte now; it's come down from the original six megabytes that would have been exported from Figma, and it's brought it down to 873 kilobytes; that's just a perfect size if you need to send it to somebody on your team or a client via email, or an attachment on Slack, or something like that; under a megabyte is is ideal. Now if we open up that new PDF, let's do that; this time you'll notice immediately that the order has been reversed, the order's now much better, we can see that we've got our "Intro" frame, and then going from 1 to 2 to 3 and so on, and even though we used 72 dpi, it's really difficult to tell how much compression has been applied to these images. At a glance, you just really can't even notice I'd say if you zoomed in or if you were really having a look at it on a on a really good screen and looking at it up close you'd be able to tell that there's some compression applied to these images, but again, it's very hard to tell and we've got a really good file size for very little image quality loss.

Okay, the last thing I'm going to do is just show you an example where I take some frames out. I'm going to relaunch the Figma plugin just by clicking on the right hand side once again, and this time I'm just going to change it to 150 dpi, just to just to get all three in the tutorial. Once again, I just want to create a compressed PDF, but this time I only want a few frames just to show you what that's going to look like. If I actually deselect all of them to start with, and let's say I just want the "Intro" and I want "Principle 8" and I want "Principle 10", but I actually want "Principle 10" to go before "Principle 8", and I'm also going to throw "Principle 4" in there, but I want that to go at the very end; now I've got this really weird ordering for some reason, and I've unselected or deselected a whole bunch of frames. Now I've only got 4 out of my 11 frames selected because in this particular case I don't want any of those other frames and I just want to tailor this PDF for this use case where I only want the four frames in this custom order. Now I've got custom ordering going, I've got the frame selected that I want and I've got it set to 150 dpi, and once again, I'm going to compress this PDF from Figma by clicking on the "Export Frames to Merged PDF" button, and once again, this should be pretty quick. There we go, so let's just save that out for us, and this time you can see that it's actually saved us 85 percent because we took out some of those frames; the original size has also come down, it would have been exported at about 2 megabytes, but because we've saved it out at 150 dpi, which is sort of the middle setting, we've actually got it down to 295 kilobytes; we've almost saved 90 percent, and that's a total absolute saving of 1.7 megabytes, which is really good. If I go back to my desktop and one last time, I'm just going to open up my PDF, and you can see here immediately we've got only four frames this time as we expect. It's just those four, and as we saw from the custom ordering in Figma before we exported the compressed PDF, you've got the frames in a really strange order; we've got frame 10 and then number 8, and then number 4 and none of the other frames have been included; we didn't bloat it up with unnecessary frames and we've got custom ordering at our custom compression level.

Okay, so that is three different examples of how you can go about exporting those those compressed PDFs from Figma. Finally, I'm going to run this on one more file just to show you what it looks like. I've got this second file here which I used in a previous tutorial where we were covering the initial PDF compression functionality, that didn't have the sorting function. I'm just going to relaunch the TinyImage Figma plugin once again, and you can see here we've got some selection settings already saved for exporting these as individual PDFs; these frames have PDF settings already on them, but again, I'm not too concerned about that today, I just want to click on the "Create a PDF" option. I'm going to click on "Create a PDF" once again, and as we saw in the last example it's exactly the same setup; in this case we've already got custom ordering saved from previous export. The red frame has been brought into the middle, whereas normally it would be brought down to the end. If we wanted in the correct order, once again, we can we can order this visually; if we throw these completely out of order just to set it up that way, those are completely out of order now, and again, if I wanted to arrange this visually from left to right, I can just click on my order options as we did before, click on that, and I know that I want to click "Order from left to right", so I'm going to click that now, and you can see here it's ordered it visually from left to right. Yellow is now first, gray is second, and red is third. That that's really handy, because as I mentioned before, sometimes the layers just don't correlate to the ordering of the visual design, so you can see here that our first layer in Figma is actually the "Approachable" layer, then it's the "Thoughtful" layer, then it's the "Professional" layer; that ordering is just totally out of whack and this is just a small file as well. It's not too bad if you did have to manually order it but again it's just; much easier; that the default layer order would look like this but it's just; much easier to sort it visually. Now we can do that with this new feature; "Order by left to right", I could also "Order by right to left", so we get the backwards, the red one first and then yellow at the end, but in this case I'll just do the correct order and go left to right.

One last time, I'll export the frames to a merged compressed PDF from Figma, and it's going to merge those three frames for us, and this is set to 150 dpi as well, so this should be some decent compression. In this case, we've actually got a really, really good result; it's gone down from 12.6 megabytes to 500 kilobytes, that's a massive 96 percent saving, or a 12.19 megabyte saving on our PDF, and that wasn't even at the lowest setting. If we tried it at 72 dpi, it'd actually probably go even lower; well, it definitely would go lower, but in this case, I'm very pleased with with the 96 percent saving, and finally I'll just open up the merged PDF we exported from from Figma so you can see what it looks like. There we go, we've got all of our frames as we'd expect in the correct order that we that we set before in the Figma plugin; it's yellow, gray and red. Okay, that's looking really good, and we've saved quite a lot of megabytes and kilobytes from all of our exports combined there. So, I think that's been a really good run through of what the differences can look like, and also tailoring the ordering based on visual order, or reverse layer order, depending on your use case. I just wanted to show you all of those different cases so you could get a get a good idea of what that would all look like, and really understand how it's working in the Figma plugin.

I think that's all for today. I just wanted to run you through that brand new feature in TinyImage; it's something that a lot of you have been requesting and it's something that I've actually wanted in my own use cases as well. I'm glad that we were able to ship that for you this week and I hope that it comes in handy when you are exporting compressed PDF files from Figma on a daily basis, or a weekly basis, or however often you need to do it; I hope this just helps out with your workflow a little bit more and saves you some time instead of you manually reordering those frames as you had to do before.

Thank you as always for watching, and I hope this comes in handy for you or your team if you do need to export compressed PDF files from Figma, specifically merged PDF files and being able to have all that control over the ordering and the export settings. Until next time, thank you, and we'll be back very soon with more Figma tutorials just like this.

---

---
type: tutorial
title: How to export a compressed PowerPoint file from Figma using Pitchdeck
date: 2020-08-11T00:00:00.000Z
---

# How to export a compressed PowerPoint file from Figma using Pitchdeck



#### Video Transcript

Today I'm going to be showing you how to export compressed PowerPoint files from Figma using a Figma plugin called Pitchdeck.

The first thing to do if you haven't already done so, is go to the Figma plugins directory in Figma; you can do that by going to the top left corner clicking on the little Figma icon going down to "Community", and then in the search bar if you type in the word "Pitchdeck" and click on the "Plugins" tab you'll see a result pop up called "Pitchdeck Presentation Studio", and on the right hand side you'll see a button that says either "Install" or "Installed"; I've already clicked in the install button, that's why mine says "Installed" with a little checkbox, but if yours just says "Install", if you click on that button it'll change to look like mine and once it says "Installed" with a little check mark on it then you're ready to go.

Once you've installed the Pitchdeck Figma plugin, you can jump back into your project. In my case, I'm just using a very simple presentation deck design based on Dieter Rams 10 Principles for Good Design. The first thing we need to do is just right click anywhere on the page, go down to "Plugins", and then go down to "Pitchdeck Presentation Studio" and click on that; and once you click on that you'll see the Pitchdeck Figma plugin loading up your slides. What this is doing is it's just going through all the slides on the left hand side that we can see all of our top level parent frames, and it's treating each of those parent frames as a slide.

Now that it's loaded, we can see if we go down the list, all of these slides here are matching up with the frames that we've got on the left side here; you can see "Principle 7", "Principle 6", "Intro", those are all correlating to our layers on the left hand side here; in this video I'm not going to be showing you how to animate the slides or add speaker notes or do anything of that nature, I have some other videos on this YouTube channel if you'd like to see an in-depth Figma tutorial on how to do that, but for this Figma tutorial I'm just going to show you a new feature which is compression, and specifically image compression for exporting these slides as a PowerPoint file that's going to be slightly smaller (or a lot smaller, hopefully) than what we'd usually see without any compression.

To export this presentation that we've already got set up, I'm already happy with all the layers, I'm happy with all of the ordering, I'm happy with the speaker notes that I've already got in place; all I want to do is just export this presentation to a file that I can use in PowerPoint Keynote or Google Slides, and the way I can do that is just by going up to the top right hand corner of the Figma plugin here and you can see a button called "Export Presentation", I'm just going to click on that and what that does is it just brings out a little export panel that will let us export this presentation from Figma to a variety of formats. In the top of the presentation Figma plugin settings panel you can see that we've got this little option called "Select Presentation Format", and if I click on that, you can see that there's a few formats that I can choose from; the first one is the "Animated Web Presentation", if you click on that, you'll see that it's the "Pitchdeck Presentation URL" format; this option will essentially upload this presentation to a web application, the Pitchdeck web application, and you'll be able to present this presentation from your browser. Then we've got some "Presentation Apps" options; we've got PowerPoint, Keynote and Google Slides. Then there's also a final one at the bottom just for a static export to a PDF file, but today we're not going to be focusing on that one, we're just going to be having a look at these middle ones here.

To export this presentation to PowerPoint, we just click on the "PowerPoint" option in the drop down, and you can see that changes here' of course we could change that to "Keynote" or "Google Slides", but in this case I'm just going to set it to "PowerPoint". Okay, there's a few options once we've selected "PowerPoint"; you can see here that we've got an "Image Quality" section; that's the one we're going to be focused on now and there's a couple of settings here: the first one is an option to use the retina images; checking this option will export all of the images in your presentation at 2x, they'll effectively be double the size but they'll remain the same dimensions; you'll get really sharp, really crisp images at the expense of the speed of the export, this does take a little bit longer to export because there's twice as much image data that needs to be exported from Figma and included into PowerPoint, but you are going to get much sharper images at that slower speed. The other thing is the file size will be larger as well; because we're exporting that at double the size the file size will be roughly double the size two, so for now I'm just going to turn that off.

The one I'm interested in for today is the second option which has just been added to the Figma plugin; this is a brand new feature which allows you to compress the images before you package up the PowerPoint file. If I click on that option, the "Compress Images" option, you can see here again it's just indicating that this is going to be slightly slower to export, because normally with you with you exporting uncompressed images that's just going straight from Figma into the PowerPoint file, this will add a middle step where it'll export the image data from Figma but it'll put it through a compression algorithm before it actually packages up your PowerPoint file; that's why it's going to be a little bit slower. Now that we've enabled that, it has enabled this slider as well; you can basically grab this little slider notch and drag that up and down, and you can see here it's changing the quality number at the end of the little label there and it's telling us that the highest setting is "Best Quality" and then it goes down all the way down to "Low Quality", and then there's sort of a middle ground here, too. What I'm just going to do is show you the difference between compression and and no compression with this export.

If I turn off the compression, I'm going to uncheck "Compress Images", I'm going to click on "Export for PowerPoint", and this is going to export my slides my presentation to PowerPoint without any image compression. You'll get a sense of what that file size is going to be initially and then we'll get a sense of how much we'll save via image compression. That's generated the PowerPoint file for me, so I can go ahead and click "Save", and that's just saved it to my desktop. I can close off the Figma plugin and jump to my desktop and you can see here it's saved the file the PowerPoint file, and it's 3.8 megabytes. I can open that up just to make sure that it's that it's all working well; that's going to be opened up in Keynote now just to preview it, and you can see here it's exported it as we'd expect we've got our images which have been exported to; that was saved at 3.8 megabytes.

Now let's re-run the Figma plugin, and this time I'm going to enable image compression and we can see what kind of file size we get once we compress those images; again I'm going to click on "Export Presentation", it's remembered my settings from before; I've still got my PowerPoint option selected; I'll leave that and this time I'm going to enable the "Image Compression" setting, and I can drag that up and down, of course, but in this case I'm just going to set it to about 70, which is sort of a middle ground for quality, and I'm going to click "Export to PowerPoint". Once again, it's doing the same thing, however this time as I mentioned before, we're going to see it compress those images instead of just saving them directly to PowerPoint. That's doing it right now, it's compressing all the images... and now it's finished. It doesn't take too much longer, it really does depend on how many images you have, it also depends on if you've got a lot of transparent images, a lot of PNGs to compress, as that does take longer than JPGs as well, these are mostly JPG, so that's why it's quite quick, and there weren't as many images as you might have in your presentation as well.

Now that we've we've exported that, you can see here that immediately there's a file size difference; we've gone from 3.8 megabytes down to 2.4 megabytes, and again I can just open that up; I'll open it up in Keynote just to preview it, and you can see here that the images are all there as would expect, and if you look really closely you can tell that there has been some compression applied, but again, it's very difficult to tell. If you were viewing this on a projector or a huge screen for presenting this to people, you would not be able to tell the difference in quality.

I'm just going to do one more export and just reduce the quality again, and let's have a look at what kind of file size we can get if we bring that quality slider down even further. So, one last time I'm just going to click the "Export" button, and I'm just going to drag this down to about 40, which is low but it's not as low as it could be; maybe I'll just go to 35 just to make it even lower, and once again I'm just going to click "Export for PowerPoint" to export our Figma slides into PowerPoint, and once again you'll see it start to compress these images in a moment, and it shouldn't take too much longer, it may actually even be quicker than last time. There we go, it's just finished saving it; I'm going to save that to my desktop once again, and if I inspect that this time we've made it down to 2.3mb; it's kind of a bit of diminishing returns with the lower quality, and that may be based on the kinds of images that I'm using as well, they're fairly simple. I can tell a little bit more that these have been compressed, but they're actually not too bad considering how low the compression quality was set.

That's a rough idea of what the compression settings can do for your PowerPoint files; again, this is a very simple file and there's really not heaps going on as far as images go, the images aren't all that large, they're not all that detailed, so if you're using photos more similar to this one then you're probably going to notice even more savings. This can be really handy if you need to send your PowerPoint files or your Keynote files via Slack or via email or something with sensitive file size limits, so adding compression can be a nice way of getting those file sizes down if you are dealing with larger decks or if you're dealing with using the retina image option and enabling that.

That was just a quick Figma tutorial on how to add image compression to your PowerPoint files, or Keynote files, or Google Slides files from your Figma slides and that's all I wanted to show you today; it's just a quick one, but I hope that you get some benefit from it in your own workflow; give it a go and see what it's like. Thank you, as always, for watching and we'll be back soon with more Figma tutorials just like this.

---

---
type: article
title: Building a Figma converter plugin
date: 2020-08-10T00:00:00.000Z
---

# Building a Figma converter plugin



Like most of the world, we've been trapped inside our homes for the better part of 6 months now. Early on during the lockdown, I asked "how could this time be used effectively so we build something that we're proud of by the time we're nearing the tail end?"

Building a "Figma to (insert design tool here)" converter had been on my mind for a little while, but I left it to one side, as I knew it would be a tremendous amount of work, and I wanted to give priority to working on our existing Figma plugins before considering embarking on a new mission.

The idea was very stubborn in my mind and was the one that kept coming back to me by the time it was time to start working on a new plugin. In the same way that Figma natively imports Sketch files, I really like the idea of being able to export Figma designs to other tools, and building a plugin seemed like a great way to build "the missing export options" for Figma.

Shortly after releasing our <g-link to="/pitchdeck">Pitchdeck</g-link> plugin and publishing some early customer feedback requests back in May, work began on a brand new Figma plugin (called "Magic" at the time), which would go on to become <g-link to="/convertify">Convertify</g-link>, released a few days ago.

### Crossing the Chasm ("why build this?")

The first question you might ask is "why build this?", it's is a reasonable question to ask - you probably love Figma, we certainly love Figma - why would anyone want something that converts designs from Figma to Sketch, or another design tool? While it's easy to be in the Figma bubble, the truth is that not _everyone_ is on board the Figma train just yet. When you're working at a company that does use Figma, often you'll also be working with _other_ companies who do not use Figma. Different companies move at very different speeds; for example, when I helped move my last agency to Figma from Sketch in early 2018, other agencies I talked to were in the final stages of moving away from Photoshop to Sketch.

Due to this inconsistency between companies (and even teams within the same company), there often is a real need to send designs between collaborating teams or companies in the format that _they_ use internally. It's not enough to say "we use Figma and everything's in Figma, so you'll just have to use Figma, too"; unfortunately, it's not so simple. Some companies have really strict policies in place about what software they're allowed to use and what software isn't allowed. Especially with Figma being cloud based (which is obviously a huge plus!), some companies are really conservative about switching to new software like this.

That's all cool... as per Geoffrey Moore's book "Crossing the Chasm", the adoption curve doesn't consists entirely of "early adopters", it's expected to see a whole bunch of companies take years longer than the "innovators" (like you early Figma users).

### Flying Blind

The first thing you quickly realise when starting a project like this is that you're essentially working with nothing. There isn't really a handbook or a "how-to" guide for building a Figma converter plugin; what this means is that you basically have to "reverse engineer" (to make it sound cool) these files for yourself, and work backwards.

Unfortunately, there's no single "magic" moment or discovery that made this an easy undertaking, by any stretch. The way I would describe it as something like a thousand mini mountains that you need to climb and then go back to basecamp and do it again.

To give one concrete example, I believe it took 3-4 days straight just to convert an image crop from Figma over to Sketch, which evidently does not actually support non-destructive image crops, so it had to be "visually emulated" by creating a mask layer and retaining the original Figma image inside of it with the correct crop offset.

If you take the crop example and apply it to every "minor" detail of a design, you start to have some picture of what it's like to work through hundreds of these seemingly trivial things.

### The Road Ahead

We deliberately only launched with Sketch support, as it seemed like the obvious choice to get into the hands of designers first, being the most widespread tool besides Figma. We wanted to get this into the hands of designers as soon as possible and learn about what new features would be most important and valuable to those facing this problem on a regular basis.

Having said that, work is also currently underway for supporting other popular design tools, so please stay tuned for more updates soon!

---

---
type: tutorial
title: How to convert Figma to Sketch files in one click using Convertify
date: 2020-08-08T00:00:00.000Z
---

# How to convert Figma to Sketch files in one click using Convertify



#### Video Transcript

Today I'm going to be showing you how to convert your designs from Figma to Sketch files using a Figma plugin called Convertify.

To use Convertify, we just need to install it from the Figma plugin directory. If you haven't already done so, to do that we can just go up to our little Figma icon in the top left of the app and click on that, and then if you go down to "Community" or "Plugins", it's probably just easiest to search for the word "Convertify". If you search for that you'll see a result pop-up called "Convertify Figma to Sketch". I've already got it installed, that's why I've got a little checkbox here with the word "installed" next to it, but yours might just say "install" and in that case you want to go ahead and click on the button on the right hand side and wait for it to say "installed", then you'll be ready to go. Now that we've got the Convertify Figma plugin installed, I can switch back into my Figma project.

I've got a few projects that I'm going to go through just to show you what it looks like to convert different types of files; for now I'm just going to use this "Apple UI Kit" design; and the first thing we need to do is just right click anywhere go down to "Plugins" and then click on "Convertify Figma to Sketch", and that's going to fire up the Figma plugin we just installed a moment ago. Once it loads you'll see that the interface is very simple, there's only a few things going on here, the first one is the page name; you can see at the top it's got the word
"Cover Page" which correlates to the page that I'm currently on, if I were to change the page that I'm on, you'll notice that the page name changes in the Figma plugin as well; it responds to whatever the page is currently being selected. The second thing you'll notice is that we've got a little time estimate here; it's estimating that on this page it's going to take roughly 14 seconds to convert 557 layers, and that estimate will change again dynamically based on what page you select; if there's more layers typically it'll take longer to convert and if there's less it'll be much quicker; in this case I'm just going to use the cover page and it's telling us it should take roughly 14 seconds.

The only thing to do here is click on the button that says "Convert to Sketch", and as you can see with the icon it's telling us that it's going to convert our design from Figma to a Sketch file for us. I'm going to go ahead and click on that "Convert to Sketch" button now, and you can see here it's telling us that it's converting, we can see the little animation happening implying that the layers are currently being processed, and now it's bundling our Sketch file, packaging that up for us, and there we go. It's giving us a little download prompt, and by default it will name it whatever your Figma file is called and then in brackets it will add the page name that you've selected and today's date as well; you can of course rename this if you want to, but in my case I'm just going to leave it as the default and save it to my desktop. Just click "Save", and once again we can see the confirmation message is just telling us that the Sketch file is ready and telling us that we can download it. Now that I've downloaded it, I'm just going to go to my desktop and I can see here that it has indeed saved it to my desktop with the file name. We can also see here that there's a file type of a "Sketch drawing"; which is a dot Sketch file.

Now that I've got that saved, I can just double click on that and that will open it up for me in Sketch. Here we go, I've got Sketch open, and you can see it's converted our design from Figma as we'd expect. If I put those side by side just to make it a little bit easier for you to see, I'll close off the Figma plugin and you can see if we line these up, it has converted them just as we'd expect from Figma. This is all editable text, so if we wanted to edit this layer, you can edit that text and that is all as you'd expect. It's now saying "Sketch from Figma", and I'm just going to update that.

You can see down here we've got these these little groups, these are being saved as Sketch groups, so I can drag those around and that'll all move together. If I expand my layers you can see if we compare it to Figma, all the layers have been carried over; we can see "22nd of June" and "22nd of June", and all the layers are in order and all as you'd expect. Same thing with images, layers have all been exported with images; we've got images, we've got an image fill over here, we've got shadows, we can turn those on and off just as you'd expect, and it's really carrying over every layer one for one from Figma itself. That's really cool! That was a one-click process; very, very quick, as you saw. This file only has about 500 layers, so that's why it was it was fairly quick, but now I'm just going to go through a couple of other file types to show you what they look like as well. I'll close off this file for the time being and just make Figma a little bit bigger once again, and I'm going to switch over to a much simpler file; this one is just a three frame file, it's three very simple frames and I just want to show you the speed of of it converting a very simple file.

I'm just going to click on the "Convertify" icon, now that we've already run it once in this file, you'll see it pop up on the right hand side in Figma; you can just click on the little "Convertify" icon and you'll see the little subtitle that says "Convert page to Sketch", just telling you what it's going to be doing. That's just a really quick way of firing up the Figma plugin again. Once again, it's just giving us the page name; we can confirm that it's going to convert the "Master Page" and because this file only has 57 layers, it's telling us it's going to take about one second. We can try that out once again just by clicking on the "Convert to Sketch" button, and it's fairly accurate, as it took literally one second to convert that Figma design. That's just an idea of how fast it can actually export files if you if you have a really small file; it's very quick.

I can open that one up just to see what it looks like, and that's opened it up for us in Sketch. The thing I wanted to call out in this file is that because I didn't have the font installed on my computer, Sketch is telling me up in the top right hand corner here that it's got missing fonts; if I click on that little "Missing Fonts" button, it's just going to come up with a little drop down saying these three fonts couldn't be found on the system. We can manually replace them, I can do that now, and I think that the ones used in the design were slightly different versions from the one that I had on my computer; if that happens to you, this is all you have to do, you just have to go through the missing fonts by clicking on that button in the top right and then once you've selected the replacements, just click on the "Confirm" button in the Sketch dialog, and you can see here it's swapped those fonts out and now we're looking very similar (or exactly the same, rather) to what we can see in our Figma file and once again these are now editable; I can update that textto say "Figma to Sketch" and that will update for me; I'll just bring that out a little bit more, there we go. As before, all of the layers have been carried over, we've got our vector layers; these are these are fully carried over from Figma and I can move those around, obviously. I just wanted to show you what the font the missing fonts prompt would look like and show you how to replace those fonts if you do run into that issue, and also just show you the speed at which it can convert files with less layers.

Okay, now that we've done Figma file number two, I just wanted to show you another file; this is a little bit of a different type of file, this is one with multiple frames, multiple layers, multiple components being used and I just wanted to show you what it looks like to convert a file like this. Once again, we can go to the right hand column click on Convertify; I'll fire that up once again and the thing that I wanted to demo in this file is if you are working in a much larger file with heaps of screens and heaps of things going on and you want to send this to somebody; it's got an exact replica of what they would normally see when they open it up in Figma. I've just purposefully zoomed in on this exact spot here, I can even zoom in a little bit more if I wanted to or I could just zoom to fit and I just wanted to show you what it looks like when it replicates the zoom level over.

If we click on "Convert to Sketch", I'll just leave this running in the background, this one has over 2,000 layers; it's going to take more like 54 seconds and the little note here just says it may actually be faster or slower depending on the number of nested layers or large images that the file has. You can see here it's actually taken less than 54 seconds in this case but if you do have really big images that can slow down the conversion a little bit; I'm just going to save that and I'm not going to move the zoom level or the the bounds scroll level in Figma, and I'm just going to show you what that looks like when I open up the Sketch file for the very first time. If I double click on this and open it up you can see here that it's exactly mirrored the zoom level and it's exactly mirrored the positioning of where I had the the Figma view when I when I converted it; you can see here if we compare them we've got 22 zoom in Sketch and we've got a 22 zoom in Figma. Converting it from Figma to Sketch with that zoom level and with that positioning; in my my case I clicked on the "zoom to fit" function which centered everything; that means that when I send this file to another designer they're going to have exactly the same overview exactly the same positioning and zoom that I wanted to have in Figma. Obviously because Figma is a multiplayer app where you can have different designers at the same time this this isn't an issue in Figma, but I just wanted to show you how it does actually carry over that zoom. I if I were to do another example, and if I was working on this particular part of the the app or the design if I run the Convertify Figma plugin once more, and now I've got it zoomed in at 100, and I've got it focused on this little profile mockup with this little modal that should open it up in Sketch zoomed in at 100 and focus on this exact same artboard.

The other thing to note is it tells you down here that Figma will freeze up during this phase of the conversion where it's going through all of the layers; I just want to point that out as well in case you're wondering why the UI is unresponsive while the the Figma plugin is converting; that's totally normal. I've just re-exported this one, and again if I double click on this and open it in Sketch, we should see a different zoom level and a different scroll level; we can see here if I put those side by side it has replicated that zoom level and it's replicated the exact point where I scrolled to in the Figma design. That's just a neat feature that the Figma plugin offers and it's just a nice way of being able to zoom to fit everything or zoom in on a particular part in your Figma design before you actually package it up for another designer. In my case, I really like using the "zoom to fit" function and just making it show everything, just so whoever's receiving that Sketch file will get a clear overview of what the file contains, but again, that choice is is totally up to you.

The next thing I want to show is a much larger file; this is a design system and this is one of the biggest ones that I'm aware of. This is the "Ant Design System", it's an open source design system and I'm just going to show you what it looks like to convert a file of this this size, because there's quite a lot going on here; there's quite a lot of components, there's quite a lot of layers and I just wanted to show you what that looks like in terms of speed, but also what that looked like in terms of detail. I'm just going to convert it now because it's going to take about three to four minutes, but this one has almost 10,000 layers, so this is a fairly large file. I'm just going to start converting this from Figma to Sketch now by clicking on the "Convert to Sketch" button, and once again you'll see down here it's telling us that it's being converted, it's converting the page. I just touched on this a moment ago, but it does let you know that Figma will freeze and that's totally normal; for example if I try and click on anything Figma, is completely unresponsive and just while this is converting, I'll touch on why that is happening. The reason why I can't move the Figma plugin around and I can't keep working while the Figma plugin is running is because the functions that the plugin is doing behind the scenes, using the Figma Plugin API, by necessity calling these Figma Plugin APIs basically hijacks the main thread of Figma; while the Figma plugin is doing intensive querying and intensive work behind the scenes, querying your Figma design data, Figma basically diverts all of the processing power to that that plugin process; that's the reason why the UI completely locks up; it basically doesn't do both things at the same time. Normally, this would be fine because a lot of Figma plugin functions are very quick or don't do very much, but because this Figma plugin literally trawls through every single layer, in this case almost 10,000 layers, and is querying image data it's manipulating data behind the scenes, it's doing a lot of intensive work in order to generate these Sketch files from Figma and translate all those Figma layers into Sketch layers, converting all those layers, so that's why it freezes the IU, basically. That's a long a long way to say: it's totally normal and you don't have to panic or wonder if it's broken; that's also the reason why it's giving you a time estimate there, because if you're just seeing that kind of spinning around in circles you're wondering "it is it actually going to finish or not?", and as we saw in the last two, this isn't really an issue when you have smaller files, but again that's why I wanted to show you in real time what it looks like to convert a file with 10,000 layers.

Okay, now that the conversion process is done, you can see that it's now up to the step of bundling the Sketch file, which means that the UI is responsive once again because the processing part is finished. It's literally now just packaging up a Sketch file with all of the image assets, all of the layer assets, and all of the files for us. It's just finished that, and you can see here it's giving us the choice to save it with the project name and the page name; again I'm just going to opt-in for the default file name and save that to my desktop. I'll close off the Figma plugin, and I'll just make the window a little bit smaller so we can compare that. If I jump back to my desktop, you can see here it's converted the Ant Design System; I'm going to double click on that file let Sketch open it up for us, and there we go. If I put those side by side once again, you can see that the positioning has stayed the same as we saw in the last segment and it's basically converted all of our artboards with all the names that we'd expect, "Navigation", "Data Entry" and I'll give you a quick overview of the full file, because it's quite large; but you can see that it has basically gone through and converted all of those. If I just zoom in a little bit, you can see what that looks like; if we jump to same one in Figma and try to compare those a little bit, now we're basically looking at the same sections and you can see that it's gone ahead and converted all those layers. Once again, I can jump in here and edit these files, edit these layers, that's my Figma to Sketch text layer; I can edit that of course and these groups I can move them around as you'd expect. So, that's what it looks like to convert a Figma file with 10,000 layers over to Sketch in a few minutes. Once again, doing this manually would be a project that would take days of time ,if not longer in this case, to convert all of these files and designs from Figma to Sketch manually. I've seen it happen before with designers I used to work with, where they had to do this for certain clients and it took days, if not weeks of time to get it done if you do it manually. So, that's what it looks like to convert a really big file from Figma to Sketch..

The final one I want to show you is just another sort of wireframing kit, or design system kit; the reason I want to show this one is because there's quite a lot of vectors in there, and I just wanted to emphasize what that looks like when they get carried over, too. If I just click on the "Convertify" icon again, I'll close off my Sketch file and make Figma a little bit bigger. Okay, again,this one has about 7,000 layers, so I'm just going to convert that from Figma to Sketch now, as it's going to take roughly three minutes. Again, it depends on how many nested layers there are and how many large images there are, I don't think this one has heaps of large images, so the bundling time should be a little bit faster, but the number of layers and the number of nested layers is really what determines this particular phase of the conversion from Figma to Sketch, when it's going through all of the Figma layers and extracting the data from them translating that into the Sketch format; that's really where the intensive stuff happens and that's where it's trawling through all of those layers and sub layers in order to to get all those Sketch layers the way that they should be. Once again, this is just going to freeze up the UI for a little bit, it's nothing to to worry about or panic about, it will eventually finish, so you can just leave it for for a couple of minutes and that'll work. Once this converts, I'm going to show you a couple of things; the one thing that Sketch doesn't support is colored backgrounds, so in our case here we've got a green background on the the canvas, but unfortunately Sketch does not support that. We'll see in a minute that it looks a little bit different just because of that, but besides that it should convert everything else. There's also a few other things that Sketch doesn't support which Convertify kind of emulates and makes up for; things like frames, where you can clip frame content, that's not actually supported in Sketch groups, so Convertify does some things behind the scenes to emulate that visually and make sure that it still looks the same.

Okay, we've just finished converting this wireframe kit, so if I close off my Figma plugin again, jump to my desktop and open up the wireframe kit file we just exported from Figma to Sketch, we can see that the Sketch file as I mentioned does not have a green canvas background because that's not a supported feature in Sketch, but everything else has been carried over. Again, just before I converted, I just wanted to call out the vectors; all of the vector all of the vector assets or parts of the design have been carried over; things like these characters over here, we can see that they're quite trendy at the moment, you've probably seen them in a bunch of places; if we just zoom in on those you can see here once again I've got missing fonts, and I'm not I'm not going to replace those this time, but if you do need to you can just click on the top right hand corner, and these particular fonts that were installed by the designer who did this design, I don't have this font on my computer, that's why it's asking me to to replace them now that I actually want to be able to edit them, but I just did want to call out the the vectors mainly, rather than the typography anyway. You can see here that it's converted those vectors, and they're looking as we'd expect from Figma, they've all been carried over to Sketch, and that's really nice. That was the the example for showing off some of the vector conversion; you can see here, it's quite a big file as well, if we zoom out. All of the artboards have been converted from Figma to Sketch, and once again we haven't had to recreate all of these layers' you can see just how many layers there are by going through the number of artboards and the number of layers; it's just crazy. Basically, we've just saved potentially days or weeks worth of work if we did need to convert this Figma design over to Sketch manually.

Okay, we've converted a number of files now, and I think that's a really good glimpse at what the Figma plugin does, what it looks like to convert your designs from Figma to Sketch files, and also to show you the the variance in speed, the variance in performance and show you what those different types of layers look like; text layers, group layers, vector layers all those sorts of things getting carried over from your designs from Figma to Sketch. I hope that that's been a valuable Figma tutorial for anyone who's been trying to convert their files from Figma to Sketch without using those weird workarounds where you have to "copy as SVG" over to Sketch and end up with this really awkward, non-editable, version of your design in Sketch. Well, you don't have to do any of that here; as we've just seen we can get all of that benefit with real layers from Figma to Sketch automatically, so you don't have to manually get your designers to do this, you can just run the Convertify Figma plugin let it do all of the work for you to get those real Sketch files that don't have any weird SVG hacks or anything like that, and just get those real layers converted from Figma to Sketch.

Thank you as always for tuning in! I hope you found this Figma tutorial valuable and I hope that it's something you'll be able to take back to your team or try in your workplace if you're needing to convert your designs from Figma to Sketch for some reason; Covertify is the only Figma coverter plugin that you can currently get to convert your designs from Figma to Sketch. Feel free to give it a try! You can install it today and give it a go on your own designs and see how it goes. Thank you as always for watching, and we'll be back very soon with more Figma tutorials just like this one.

---

---
type: article
title: Figma vs Adobe XD
date: 2020-07-15T00:00:00.000Z
---

# Figma vs Adobe XD



After a few years under development (as a response to Sketch quickly leaving Photoshop in the dust as the UI design tool of choice in the early 2010s'), Adobe XD was first released (out of BETA) in October 2017.

I've kept an eye on Adobe XD since it was released; in its earlier stages, I felt like it really couldn't compete with Sketch, and felt it was kind of "too little, too late" from Adobe. However, since then, XD has shipped a bunch of new features that have helped bring it into the "top 3" UI design apps, alongside Figma and Sketch to be a real competitor.

At this stage, I think the gap has narrowed, and might still make sense if you're trapped in the Adobe Creative Cloud. As we'll see later in the article, there are places where XD has an advantage over Sketch or Figma.

### How designers work with developers in Figma vs Adobe XD

Adobe XD has a feature that lets you "publish design specs" and share a link that you can give to developers. This URL essentially loads up the designs in a web browser, and shows you a summary of all the colours and fonts used in the design, as well as letting you click on individual elements and seeing some of the sizing values associated with them.

In this scenario, I think Figma is still ahead. In Figma, you'll be able to invite developers directly into the Figma file, so they can view it in real-time and jump straight into the "code" panel, where they can view any element's properties broken down into "CSS", "iOS" and "Android" options.

These are awesome, as you can literally copy/paste _real_ code directly from Figma into your codebase, without having to translate all the random properties into their respective styles (depending on your codebase).

This is such a crucial feature that Figma offers, as it means you really don't need to leave the one app and use other 3rd party services.

If you are using XD, then 3rd party "handoff" services like Zeplin, Avocode or Sympli are likely going to be required, as I don't think the Adobe XD feature is quite streamlined or detailed enough for a developer's normal workflow.

However, this does come with a downside, as you'll need to continue making sure the designs are in sync with those 3rd party services, so you add the risk of a developer working off old designs. Again, with Figma, this is not an issue, and the developers are always going to be on the same page (literally) as the designers.

### Performance of Figma vs Adobe XD

While Figma can be run in either the desktop or in the browser, Adobe still requires you to have Adobe Creative Cloud installed and also a Adobe XD desktop app in order to use the software. This might not be an issue if you're already using the Creative Cloud suite, but it does feel less "portable" than Figma, which can be spun up on any computer in the web browser (with no other dependencies).

In terms of actual performance, Figma uses WebGL under the hood and can handle very large design files without seeing much slowdown at all; it's notably extremely smooth.

Adobe XD generally performs fairly well, but there are lots of reports from people online who are experiencing slowdowns with larger files or working from the "cloud" (instead of local files).

I still believe being built on web technologies is a very underrated aspect of Figma, and I would speculate that they will be in a much better spot in the future when rolling out bigger product updates.

### Figma plugins vs Adobe XD plugins

There was a time when Adobe XD users might have shunned Figma for not having plugins, but that ended in August 2019, when Figma opened its own plugin directory. Just like Figma (but unlike Sketch), Adobe XD has a plugin directly built into their app, which is great.

At the time of writing Adobe has _256 plugins_ in its directory available to install. Despite being around for longer than Figma's plugins, Figma has more than _triple_ that amount currently live in its native plugin directory.

There is some cross-over between the plugins that Figma has and the plugins that Adobe XD has; but it does seem that Figma has the upper hand on plugins, if not for sheer amount of choice and variety.

### Collaborating with the rest of your team in Figma vs Adobe XD

While Figma has had collaboration (or "multiplayer mode") since its inception, which was a core difference to any other design tool at the time, Adobe XD did not launch with real-time collaboration.

It was until November 2019, when Adobe XD introduced a BETA with support for the same feature that Figma had become so loved for. This has helped bridge the fundamental divide between Adobe XD and Figma.

This is now an advantage that Figma and Adobe XD both have over Sketch, which announced real-time collaboration about a year ago, but hasn't started shipping it yet. In this respect, Adobe XD and Figma are relatively similar (and ahead of Sketch) as of 2020.

### Learning Figma if you're coming from Adobe XD

If you've been an Adobe XD user, but you're thinking of making the switch to Figma, the good news is that the learning curve will be very low.

Figma has all of the features you've come to expect in Adobe XD, with a bunch more that will serve as nice little surprises as you explore the feature set over time.

Unfortunately, Figma doesn't support importing your Adobe XD files (as it does with the native Sketch file importer, which works well), so you'll likely need to move any legacy designs over manually or use a third party service to help with this.

### Some advantages that using Adobe XD might have over using Figma

#### Adobe XD plays nice with other Adobe software

If you or your company are already signed up to Adobe Create Cloud and use their suite of other products, then Adobe XD might make sense to adopt as your primary UI design tool, especially if you need some level of interplay with Photoshop, Illustrator or After Effects.

Figma (and Sketch) have not taken to supporting the Adobe ecosystem, opening their files or exporting files out to those formats so far. This may change in the future (it seems unlikely), but for now, if you do need to work with those other Adobe products, then XD might be a good choice for now.

#### Adobe XD supports prototyping voice interactions

The one area I have to give Adobe credit for is their initiative to focus on an area of design that seems fairly neglected industry-wide, so I would say that it's fairly underrated at this stage.

With Adobe XD, you can use your voice as a "trigger" to initiate an interaction in your design prototype.

While this is a nice bonus that you get in Adobe XD, I can't imagine that it would be a huge undertaking for Figma to expand its own prototyping feature set and include "voice" at some stage in the future; once again reducing the distance between Adobe XD and Figma's differences.

### Figma is the future; but if you can't escape the the Adobe ecosytem, XD might still be your best bet

While I believe Figma is still the best overall UI design tool, Adobe XD is a decent alternative if you can't leave the Adobe Creative Cloud in your own company. They are comparable enough that you're not going to be suffering as you might if you were still forced to used Photoshop for some reason.

It's my hope that Figma and Adobe XD could continue to innovate in parallel, and cross-pollinate the best of each other; for example, Adobe XD adding "multiplayer", in the same way that Figma could add "voice" into their prototyping features. Having the two exist is a net positive, so I don't think we need to say one is "bad" and another is "good"; they can both co-exist just fine.

---

---
type: tutorial
title: How to export compressed PDFs in CMYK from Figma
date: 2020-07-08T00:00:00.000Z
---

# How to export compressed PDFs in CMYK from Figma



#### Video Transcript

Today, I'm going to be showing you how to export PDF files from Figma with CMYK export settings, which you would typically use if you wanted to use the PDF for print purposes. At the moment Figma does not let you export PDF files with any sort of color profile settings, so that's what we're going to be looking at today.

The first step is installing a Figma plugin called TinyImage. If you haven't already done that, you can go to the top left corner up here with a little Figma icon and if you click on that you'll see a little search bar up here, you may have to click on "Community" or "Plugins" first, but once you do type in the search bar the word "TinyImage", underneath "plugins" you'll see a result called "TinyImage Compressor" pop-up. If you haven't already installed it, you'll see a button on the right hand side that says "install"; and if you click on that it'll change to say "installed" with this little check mark, and once you've got that checkmark, you're ready to ready to roll and you can jump back into your Figma design project.

I'm just going to be using this simple three frame design, which are Figma's design principles as a bit of an example. The first thing we need to do is just right click anywhere on the page, go down to plugins, and then go down to "TinyImage Compressor" and click on that. That's just going to run the Figma plugin we just installed a moment ago, and you can see here that I've got my three frames listed, and the reason that they're being listed is because I've already listed all of them as PDFs; and what I mean by that is if you click on any of your frames, and in the right-hand side you'll see a little title called }"Export"; if you click on the plus symbol it'll let you add export settings.

At the moment I've got a PDF setting, and I just added a PNG setting; if I refresh my TinyImage interface you can see that PNG has just been picked up, but for this case I just want PDF; I'm going to remove that and refresh, and you can see PDFs back again. If I just select my frames once again, it's just going to list all of the detected export settings in my file; all I've done is just applied a PDF export to all three frames. By default, Figma when it exports PDF files it will always export them in RGB, which is basically the color profile that you would typically want to use if you are viewing PDF files on a computer screen or on a TV or on a monitor, it's typically not the format that you would choose if you were going to be using a PDF file for print; when you're using a PDF file for print ideally you're probably going to be asked to provide something that's been exported in CMYK; this is a different color profile to RGB, but as I said the default and the only option for exporting PDFs natively from Figma is an RGB export. I'm just going to be showing you how to use TinyImage to export these PDF files in the CMYK format that we want to use.

What we need to do, is click on the little "settings" icon that you can see my mouse over now just on the right hand side here, if you click on that icon it's going to bring up a whole list of settings for us. You can see here it's got JPEG settings, PDF color profile settings, PDF password projection settings, custom image file name format settings, all that good stuff; for today I'm not going to be requiring the password protection, I've got another Figma tutorial on that if you're interested in password protecting your PDF files, you can check that out on the YouTube channel.

Today, I'm only going to be focusing on the second setting here, which is the "PDF color profile" setting; you can see here that if you hover over the the drop-down, the default is being set to "RGB", which is the color profile that Figma normally exports as; that's the default, and then the second option we've got here is "CMYK" and in brackets "for print", and there's also a third option which is the "Grayscale" option. The RGB option, I'm just going to select that for now, and show you what that looks like just; you've got an idea as a baseline. I might just uncheck those I'll just do one for now if you want to change the DPI; you can see over here it's got the DPI it's going to get saved at, and all you need to do is change this slider up here and that's going to change the dpi; the lowest quality correlates to 72 dpi, the good quality on medium is 150 dpi, and 300 dpi is the maximum setting; this will give you the best quality but also at the highest file size and at the opposite end you get the best possible file size savings but the quality won't be as good; I tend to just keep it around the middle and go with 150 dpi. Now that I've got my frame selected all I'm going to do is export the RGB version first and just click "Compress Selected" to show you what that looks like; it'll be very quick.

It's already done, and I'm just going to save that as my first one, and I'm just going to put "RGB" in the file name and click "Save" and save that to my desktop; and there we go we've got our PDF file as we'd expect, and you can see here due to the nature of the Figma plugin being a compression plugin, the original file size that Figma saves PDFs out that would have resulted in a 6 megabyte file and because we're running it through TinyImage that's come out at 166 kilobytes giving us a saving of 97%, which is which is really good.

So, that's the RGB one, and I'm just going to restart the Figma plugin; you can click close, and if you want to restart it really quickly, all you need to do is go over to the right-hand side here once you've run the Figma plugin once in a page you'll see this little option on the right-hand side under the title "Plugin", and you'll see the little milk bottle icon with TinyImage there if you click on that that will save you from having to right-click on the page go down to plugins go down to the Figma plugin name this is just a one-click way of relaunching.

Now that we've just given the RGB version a go, I'm just going to go back into the settings option; if I click on that "settings" icon once again and underneath "PDF color profile", this time I'm going to click on that again, and this time I'm going to select "CMYK "(For Print)". I've selected that now; I don't have to click save, I can just get out of that and this is now going to export it to CMYK. Once again I'm going to click "Compress Selected", and in a moment we should get the CMYK version. Now I'm just going to tag that "CMYK"; there we go, I've got my CMYK one and you can see here it's exported it just as it would expect as well.

At first glance while they look exactly the same; this is the RGB one and then if I open up the CMYK one right alongside it, it might not be super obvious to tell from where you're looking, but on my screen I can clearly see a difference between the left and the right; on the right hand side we've got our CMYK; that's the one we just exported and then on the left hand side we've got our original one which was the RGB and if you if you can tell just by looking at your screen right now as I can on the left the red is much more vibrant it's much more illuminated and on the right hand side it's much more muted and it just has a very different sort of tone to it. That's the result that we actually want, we want them to be different, they're two different color profiles; the one on the right we would be using in a print scenario most likely and the one on the left the RGB one this is what we would be using whenever we want to send a PDF that's intended to be viewed on a computer screen and intended to be viewed on an ipad something like; that anything that's not print you would want to use RGB. That's great; that's working just as would expect the CMYK is turned out well.

There's one more color profile we can use which is grayscale. To show you what that looks like to just out of interest; this time I'm just going to use this exact same PDF file and I'm going to go to my settings and once again you can see it's previously been set to "CMYK" but once again I'm going to change that to a new setting; the last setting is "Grayscale", and if I click on that and just select it again and once again, just click on "Compress Selected", this time instead of getting a CMYK PDF from Figma we're going to get a grayscale PDF. This is something that I personally don't don't use, I haven't had to use grayscalel but it could be handy in in some scenarios. The grayscale one if I open that up you can see here it's it does what it says on the box, it will give you a grayscale PDF. Everything's grayscale, everything's black and white and that's in stark contrast to the RGB and the CMYK one.

Those are basically the three color profiles that TinyImage gives you as options for exporting; that's all three of them now you can see there's a little bit of a file difference between them, nothing too crazy the RGB one is 171 kilobytes, the CMYK PDF that we exported from Figma is 202 kilobytes, and finally the one we just exported is 167 kilobytes. The grayscale one is marginally smaller, CMYK is marginally larger, but overall it's still a 97 to 98 percent saving from whatever you would get originally from native Figma PDF exports.

The last thing I'm going to show you is slightly unrelated to the color profile itself, but if you wanted to export a merged copy of these PDFs, you can do that by clicking on the button I just clicked on; if you didn't catch that that was me clicking on this button up the top here; in the top left I've got this button called "Create a PDF". If I click on that, this setting is different from the default one; this setting essentially looks at all of the top-level frames inside of your Figma file; if we look at the left hand side right now underneath the layers you can see I've got three parent frames: "approachable", "thoughtful" and "professional"; those are being loaded in over here; it's not relying on the export settings as our main panel was when we just want to export different formats to individual files; the purpose of this function is to merge multiple parent level frames sort of larger frames into a single PDF file; instead of doing three different ones with the regular exports, this is going to actually merge the three into one.

You can see here we've got the exact same options as we did before; I've got "RGB", "CMYK" and "Grayscale", as I said before "password projection", I've got another video on that if you're interested in that but you can you can enable that down here too and these are actually rearranged; you can rearrange the order of those frames and you don't have to touch your frame order in your Figma layers; these are independent they'll be saved in the plugin between uses; you can go back and re-export files in the order that you set them set them in here and of course you can you can deselect or select whichever ones you you like; in this case I'm just going to do "RGB"... actually, I'll do "CMYK".

The last little edge case that I'll touch on is: you might have noticed there's a little toggle underneath the color profile options; I've got the CMYK PDF, RGB PDF and grayscale PDF; those are all fine, but there is an edge case if you're exporting vector paths. If you're drawing a blob or something with the pen tool and you give it a vector background or a vector fill, the RGB compression by default will ignore the gradient fill on that particular vector path, that vector style, and it'll use just a solid color. If you do come across that, it's not all that common, but if you do come across it there's an additional option here which is "enable gradient fills for vector paths"; it will take slightly longer, but that just resolves that little that little issue with the exports of vector paths that have gradients; in my case I don't have any gradients, I don't have any any blobs or any paths like that really, so I don't need that option; but if you do encounter that, that's the option you can use and it'll fix it right up.

Okay, I'm going to select CMYK once again; this is going to give me a merged CMYK color profile for my pdfs from my figured in Figma designs; I'm just going to select all three I'm going to arrange it; yellow's first, red is second, and the gray is last; and all I need to do is click on "Export to Merged PDF", and once again it's just going to compress those three files. As I mentioned, this time around because we're using the create a PDF button, it's going to give us a single PDF file, whereas before it would have given us multiple if we exported them all at the same time. I'm just going to save that as the default filename, savings wise, as you can see once again we're up at the 96% mark, and it's down from what would have been 12 megabytes to 500 kilobytes, which is a very good saving.

I just opened that file, and you can see here, we've got yellow, red and gray; just as we'd expect. Once again, we might be able to tell just by comparing it with the Figma design, because we are exporting it as CMYK, the color difference is fairly noticeable; you can see on the right here again we've got the very vibrant red, the RGB sort of red, same with the yellow, you can see on the left or right here the yellow on the left in our Figma file is very different from the CMYK PDF that we just exported from Figma. That's worked; that's good news, and that's exactly what we want. So, that's the merged version; those are the two options: you can either export a merged version, which is a single PDF made up of your Figma parent frames, or of course you can export all three of these as individual PDF files based on the export settings in the bottom right column over here.

That's everything you need to know about exporting PDF files in CMYK from Figma. As I mentioned before, this isn't something that Figma currently offers natively. If you do want to do this, I think TinyImage is the only way to do it right now; I'm sure that there's a way to export your PDF files from Figma natively and somehow load them up into a separate tool or other software and convert it to CMYK, but if you if you want the CMYK PDF directly from Figma and you also want the benefit of compression at the same time, then TinyImage is a really good option for doing that.

I hope if you've been looking for a way to export CMYK PDFs from Figma that this video has been really helpful and I hope that you've learned something that you can take away back to your team or back to your own projects and get some benefit from it. Thank you as always for watching, and we'll be back very soon with even more Figma tutorials just like this one.

---

---
type: tutorial
title: How to password protect PDF exports from Figma
date: 2020-07-08T00:00:00.000Z
---

# How to password protect PDF exports from Figma



#### Video Transcript

Today, I'm going to be showing you how to export PDFs with password protection directly from a Figma.

So, I've got this three frame design, which are the principles of design that Figma adheres to, and this is just an example file that I'm going to use to show you how we can export it as a PDF and add password protection on it; in order; anybody I send that PDF to will only be able to open it if they've input the right password that I've set before exporting.

The first step is installing a Figma plugin called TinyImage. If you haven't already done that, you can go to the top left corner up here with a little Figma icon and if you click on that you'll see a little search bar up here, you may have to click on "Community" or "Plugins" first, but once you do type in the search bar the word "TinyImage", underneath "plugins" you'll see a result called "TinyImage Compressor" pop-up. If you haven't already installed it, you'll see a button on the right hand side that says "install"; and if you click on that it'll change to say "installed" with this little check mark, and once you see that checkmark that means the Figma plugin is installed and you can switch back into your Figma project or Figma file and we can get started.

To run the Figma plugin, you can just right click anywhere and go down to "plugins", and then go down to "TinyImage Compressor" and click on that, and that's just going to load up the plugin that we just installed, and the default view is going to show you a list of all of the elements in your design that contain export settings that you've added in Figma; for example if I click on this frame over here you can see in the right-hand column that we've got one export setting of "PDF", of course I can add more if I wanted to, and if I refreshed the TinyImage layers you'll see that PNG with a 2x retina setting will pop up in the list; that's what it does, it just looks through any layer in your file that contains the export settings on a layer it's set in Figma over here and it will list out those as some of the images that you can compress that you select; for today we're just going to be looking at PDFs.

I'm just going to leave the PDF settings on there as is, and up here we've got our quality slider; you can see it's changing 150 dpi up to 300 dpi, and then at the lowest you've got 72 dpi, but 150 dpi is a good mix between compression size and quality, so I tend to leave it at 150; but you can change it depending on new use case. Today I'm just going to show you what it looks like to export a PDF without a password first, and then I'm going to show you how to add a password on to your PDF exports too. If I just click "Compress Selected", I'll just do one; it's just an example I'm going to click "Compress Selected", and this is just going to do a regular TinyImage PDF compression without any password protection.

If I save that and open it up, you can see here that it's exported it as we'd expect, and we've saved 98% of the original file size that would have been exported from Figma normally. It's taken it down from 5.83 megabytes down to 144 kilobytes; we've saved quite a lot there. That's just the regular PDF export from TinyImage compression, but if we rerun the Figma plugin, which you can do easily by going over to the right hand side and clicking on the little TinyImage icon; if you click on that it means you won't have to right-click go down to "plugins" and find the Figma plugin every time; it's a quick way of doing it.

Now that we've had a look at what it looks like without the password, I actually want to export this PDF from Figma with a password. I'm going to do all three this time, and I'm going to go to the "settings" icon up here, in the top right you'll see this little "settings" icon, and if you click on that that will load up all of the TinyImage Figma plugin settings. There's one about halfway down which is called "PDF password protection", and you'll see here that we've got a little checkbox which says "Require a password to open exported PDF files", and if I just click on that, that will toggle it on, and you can see here the text box underneath has been made available to us. If I turn that off, this is disabled, if I turn it on, it's now editable; that text field is going to allow me to specify a password. There's an example of what that could look like here, but of course you can use whatever you want; in this case I'm just going to use the password "figmatic" and that's going to become the password that is required whenever one of these PDF files is opened.

Now that I've set that, that'll save automatically as soon as you click out of it; if you go back into settings you can see it's still got "figmatic" set there, and now what I'm going to do is I'm just going to export or compress these three frames again... actually, I'll just do one just; it's the same example and I'm just going to click "Compress Selected", exactly the same as before, but this time of course we've just got our password protection setting enabled. In this case I'm just going to rename this one to say "password" so I can tell the difference, then save that to my desktop, and you'll notice the file size is exactly the same; the PDF password protection doesn't impact the file size at all.

If I go back to my finder, you can see here the one we just exported was down here which I could open freely, however, when I go to "approachable password", which is the one I just exported with the password on it; if I try and preview that one, you can see here that it's telling me this document is password protected and it wants me to enter a password to view it. If I type in that password which was "figmatic", and hit enter, that's now let me view the PDF. You can see here at the top it's got "approachable password.pdf"; that was the password protected one.

If I close that off again and then try and reopen it, you can see once again it's asking me for the password; the same thing will happen if I double-click it and try and open it with the preview app, exactly the same thing; it's going to ask me for that password which I just copy/pasted. If I enter that once again, it's allowing me access to that, and if I use the wrong password, if I just put in a couple of letters; it'll tell me that it's an invalid password. That's what it looks like to export the PDF files from Figma with a password.

There's another way with that we can do this as well; if I just close this and restart it from the right-hand side; I'm just going to load up the Figma plugin once more and this time instead of exporting; obviously you could select as many PDF files as you want and these will all get exported as individual PDF files each of which will have the password protection on them; you'll get three files all password-protected separately, but of course there's going to be some cases where you want to export these files as a single PDF and password protect that. TinyImage lets you do this as well by clicking on the top left button called "Create a PDF".

If you click on "Create a PDF", that's going to bring up this interface here, and you can see down here it's inherited the setting from the settings icon that we clicked before, it's inheriting that setting because it's assuming that the password protection that we wanted for the single exports we also want for the merged ones. Of course, we can toggle that on and off as we could before; it's remembered the password that I want to use, and now that I've got it checked, it's going to make sure that this export is also password protected. Now I've got two out of my three frames selected, I actually want all three selected in this case and I can rearrange these if I need to change the order of them; I don't have to go over into the Figma side panel over here; and this is a new feature, you can rearrange the frames independently of the main Figma design; you don't have to reorder those you can just do it interface.

Let's say I want the red one to go first, and then the yellow one, then the gray one, that's all good; then I'm just going to make sure the color profile is "RGB", which is the default, and now that I've got those three selected and ordered, and I've got my password protection setting for the PDF Figma export enabled, all I need to do is click on "Export to Merged PDF"; and after you click on that, it's basically going to merge those three frames into a single PDF. It's just finished, and I'm going to save that to my desktop. So, if I open that up, once again, if I preview that; as expected, it's got a password prompt. I'm going to put in my password again and hit enter, and there we go, we've got our merged PDF. We've got the three frames in the one PDF now, we don't have three separate PDF files, they've all been merged into a single password protected compressed PDF directly from Figma. That's roughly what it looks like.

The compression ratio is very similar, we've got a 97% saving; however, because we've tripled the amount of frames, it's gone down from 12.5 megabytes to 436 kilobytes; as an absolute saving, that's that's quite high, and as you can tell the quality of the file is still very good; it's very sharp and the images look great. That saving is super nice, and the cool thing is I can now send this PDF file securely via email or via Slack as a password protected PDF, and anybody on the other end of that message is going to have to know what the password is before they can look at the contents of that PDF. This is now a secure password protected PDF from your Figma design, and you can feel safe sending that to anyone, as long as you also kind of securely send them the password somehow, ideally not in the same message as the the PDF, but either way it's up to you.

That's roughly it; password protection as you probably know, isn't something that's native to Figma for PDFs. As far as I know, TinyImage is the only way to add password protection to your PDF exports directly from Figma. I'm sure that there's some sort of tooling in the open, maybe that's Adobe Acrobat professional or something like that, where you could theoretically export a PDF from Figma and somehow add a password to it, I'm not too sure how to do that; but if you do want to do it directly from Figma, this is the way that I would add a password to my PDF exports.

I hope if you've been looking for a way to add password protection to your Figma PDF exports, or if you were just curious of what it looks like in the TinyImage Figma plugin, I hope that you've learned something from this video; and I would encourage you to try it out, and use it for yourself to see how it goes. Thank you as always for watching, and we'll be back very soon with more Figma tutorials just like this.

---

---
type: article
title: The best Figma plugins for high performing design teams
date: 2020-06-20T00:00:00.000Z
---

# The best Figma plugins for high performing design teams



"Do things that don't scale" is great (even if seemingly counterintuitive) advice often given by Paul Graham/Y Combinator. This is something that I have taken on board here as the founder; one of those being the number of products we release. As of today, we've just turned 6 months old, which means we've released one Figma plugin per month on average since we began.

While this may not be something that's scalable, it was very important to solve some of the most urgent and solvable problems that I personally faced on a weekly or daily basis over the last 10 years working in digital agencies.

There is a list of about a dozen problems we need to solve (and _will_ solve with enough time) first before we start focusing on much bigger and fundamental problems to the way we think about design and development. Our end game from day one has always been that the distance between design and production should be _zero_; so every decision we make is designed to take a step closer to that reality, never further away.

With that being said, I thought it would be nice moment to take a snapshot of the best Figma plugins we've released so far. While the title of the article may be slightly delusional, I'm really proud of what has been accomplished so far, and we're really only just getting warmed up.

### TinyImage

#### Export compressed JPG, PNG, SVG, WebP, GIF and PDF files from Figma, reducing files sizes by up to 95%.

Every day in my previous agency, me and my fellow designers/developers would need to export images from Figma and then figure out the least painful way to compress them afterwards. This could involve opening Photoshop, going onto a shady looking website or trying a command line tool. Regardless of which method we used, the fundamental problem remained the same: assets change all the time (due to design revisions or other creative/content reasons) and we would inevitably need to re-export _and_ re-commpress dozens of assets per day.

<g-link to="/tinyimage/">TinyImage</g-link> was designed to remove this middle step entirely and shift all of the compression into middle of Figma's own export functions. What started out as simple JPG/PNG compression back in January has evolved to include support for: JPG, PNG, WebP, SVG, PDF and GIFs - each format with their own unique settings and features in the Figma plugin.

Thanks partly to the awesome feedback and support from early adopters, I've been able to prioritize and ship the features that were clearly going to solve the biggest pain points in there workflows. This conversation does not stop, and it's been great to continually optimise and find ways to improve the Figma plugin to solve these daily problems for some of the top design teams in the world, and there's still more to be done to make this the best Figma plugin it can be.

### Bannerify

#### Animate and export production ready banners from Figma to HTML for different platforms in seconds.

I would say this is the most personal Figma plugin so far; I used to dread getting caught up in the banner feedback loop for large campaigns. Don't get me wrong, designing and working with banners in Figma as a developer was a big step up from the Photoshop days (_shudder_), but once again, the only thing you can count on is a dozen revisions of the banners. Just when you thought you were done (and free), there would always be yet another round of client or internal feedback that meant re-exporting hundreds of assets and updating all of the HTML and CSS for dozens of banners to "roll out" the brand new design updates.

This was soul crushing; and eventually all you can do is laugh, if only to stop yourself from crying in the corner instead.

I had been working on the <g-link to="/bannerify/">Bannerify</g-link> Figma plugin since I was invited into the Figma Plugins BETA program back in August 2019. It was an extension of another tool I had built previously (weirdly enough, called "Figmatic") that used the Figma API to convert a Figma of banner designs file into HTML/CSS. It was very crude, but it proved to me that the idea worked. Once Figma plugins came along, I realised that all the questions I wanted to answer around "how do we add animations" could be solved by building out a real animation timeline interface within Figma itself.

Releasing it earlier this year was a great feeling; and I've had awesome feedback from many teams who suffered the same problems I did in my previous banner projects. Now, the entire process of exporting banners from Figma to production ready HTML/CSS has been automated, and building another "revision" is literally a one-click process. To me, purely in terms of the amount of pain and time that this Bannerify removes, this is still the best Figma plugin we've released for heavy automation so far.

### Favvy

#### Export production ready favicons (with code) for your website or PWA from Figma in seconds.

Creating favicons for websites has always been a bit of a dark art, as the "documentation" on the subject is thin (at best). Over the years, there's been a bunch of different requirements for different devices, but along the way, few people have dropped the excesses of favicon images and files in favor of a more optimal set of icons needed for a website in 2020.

<g-link to="/favvy/">Favvy</g-link> is a Figma plugin that automates this entire process with one-click, by using a single square Figma frame as the source of truth. It generates all of the images, code and files required that you can just "drop in" straight to your website or PWA (progressive web app), with no other configuration or manual work required to make your favicons work as expected.

You won't have to manually look up the latest articles on favicons or create them with a combination of design tools or web apps, now you can keep a single version/size of it in Figma as your source of truth, and update/re-export it as needed for the lifetime of your project or website/PWA.

The simplicity and speed of favvy makes it the best Figma plugin for exporting production ready favicon packages directly from Figma.

### Pitchdeck

#### Create and present slide decks with animations, videos and links from your Figma designs.

Starting back in 2018 when I was co-running the DesignOps Melbourne meetup down here, we were already seeing some of the presentations being done entirely in Figma.

More designers are using Figma to collaboratively create presentations, which is awesome. However, using Figma for presentations still lacks some of the familiar interface and features expected from Keynote, PowerPoint or Google Slides. More importantly, none of those other apps allow you to use Nicolas Cage as your laser pointer cursor; the <g-link to="/pitchdeck/">Pitchdeck</g-link> Figma plugin was built to start solving these problems and more.

Pitchdeck comes with have all the familiar tools you need to make a great from a web-based presentation out of the box — speaker notes, timer, laser pointer, and slide navigation (which can be controlled from your phone).

I'm very mindful that working inside of teams means that sometimes other team members or stakeholders will prefer to have a presentation in a format that is more at home in their daily workflow. That's why Pitchdeck also includes the option to export your presentation from Figma to a file that can be opened in Keynote, PowerPoint or Google Slides (or just trusty PDF deck).

The feedback from our customers has been incredibly helpful and encouraging; the problem of slide decks is well and truly alive, and I think there's much more that can be done to rethink how we go about designing and presenting them. This is the best Figma plugin for magically turning your Figma designs into stunning presentations.

### Pixelay

#### Compare Figma designs with your local website development builds using smart browser overlays.

One of the most common sources of disappointment in the design and development process, is the _result_ of the design and development process. Almost every time a design goes through the "handoff" process (which I argued in another article is fundamentally broken), there will be a disparity between the intended design and the development implementation. This generally isn't the fault of either party, but a large chasm that exists by nature of adopting this "throw over the fence" approach to having designers and developers working together.

While the fundamental problem is sadly going to take much longer (technically and culturally) to become mainstream, our <g-link to="/pixelay/">Pixelay</g-link> Figma plugin meets each party where they're currently most comfortable, and help push the process in the direction of "code" as the end game, rather than simply looking towards some static frames of designs instead.

This is a problem that takes up hours of both designers and developers time, with designers knowing that there are issues with the build, and often needing to sit down and visually point out every single difference one by one. Pixelay takes the approach of overlaying any frames from Figma where the original designs live with the developer's local environment, automatically loading the frames to the same widths as the original designs to ensure the correct CSS has been written for the series of "breakpoints" that were initially designed.

This is the best Figma plugin to take a step in the right direction, where we treat code and design as the same thing; when code is the "source of truth" for design in your production environment, it's really important to ensure that as much attention is given to that instead of only focusing 100% on the static designs in Figma.

### Crypto

#### Securely share static Figma designs with stakeholders as password protected links.

The noticeable theme with all of our Figma plugins is "recurring"; these are problems (at least in an design team or agency environment) that are constant and painful. When my previous agency switched from Sketch to Figma, we were able to give up everything in our old workflow... well, _except_ for "InVision". As much as "open design" is core to Figma's mission and belief that helps drive the direction of the product, old habits die hard and there was an uneasy feeling about inviting clients or other teams into Figma files where they could see _everything_ (even the stuff that "wasn't ready" or "in progress").

To "solve" this issue, we continued to use InVision, which all the designers hated using, due to it being a slow and clunky process to constantly upload and update designs from Figma every day. When I asked one of the designers how much time this was wasting for them, replacing the time they should otherwise be spending _designing_ instead; they estimated that it was at least a few hours each week. This might not sound like much, but when you consider the countless other meetings, distractions and commitments that distract designers away from actually doing their work, those few hours per week of lost time are precious.

To start solving this problem, the <g-link to="/crypto/">Crypto</g-link> Figma plugin was designed to remove the need for those extra steps in order to simply get a selection of "final" frames onto a password protected preview link, where a client/reviewer wouldn't need a Figma account and could feel safe knowing that their work (which may be under NDA, as it often is) would be shielded from prying eyes.

The obvious question would be "but does it support Figma prototypes?", to which the simple answer is: "not yet, but it's something we're working on adding support for, and has been on the roadmap since day one". It seemed more important to build a working version that solves the core problem first, get a sense of if that's actually solving the problem, and then work on the much bigger project of replicating Figma prototype support into Crypto.

As of today, if all you want is a way to share password protected designs of the frames you've selected from your Figma project, then Crypto is the best Figma plugin as an alternative to InVision as your only option.

---

---
type: article
title: Nobody knows what DesignOps is
date: 2020-05-27T00:00:00.000Z
---

# Nobody knows what DesignOps is



When I co-founded the DesignOps meetup here in Melbourne, back in 2017, the term "DesignOps" was brand new to us. However, for 2-3 years prior, we would meet for dinner (always Korean food at the same place) every month or so to talk about our ideas on design and development, which would later become the basis for the DesignOps meetup.

Once we heard the term "DesignOps", we knew that the culmination of everything we had been talking about for the last few years together was on the tip of our tongues - we just gave it name.

Back then, at the end of 2017, I vividly recall trying to find other people we could talk about these ideas with, trying to find people who had already discovered "DesignOps" or at least had heard of it. To my surprise, I did a search on LinkedIn, and I'll never forget seeing that there were ~15 people on _all of LinkedIn_ that had any mention of "DesignOps" in their profile or content; 2 of them were my co-founder (Ch'an) and myself.

The public ongoing joke with our meetup was that "We don't know what DesignOps is", and it was true, because nobody did. Our idea was to take this fresh term, and merge the ideas we had been talking about for the last few years into it, in order to propagate these ideas out to design/development teams everywhere by giving them a name.

### The sad hijacking of “DesignOps”

**DesignOps was supposed to be about design and code being the same thing.**

In our vision, DesignOps was destined to become _the_ way to describe design and development becoming the same thing. Frankly, the term itself sounded pretty cool to us, and some of the early descriptions from other companies like Airbnb aligned closely enough with this for us to jump on it and create a meetup around it.

After DesignOps started getting a bit more buzz online, we started to see some (very vague) articles come out about it, not really demonstrating much idea about what it means. In hindsight, that was fairly harmless, because the wave that came afterwards was somehow much worse.

Suddenly, a bunch of content started flooding the internet about how DesignOps and ResearchOps are essentially go hand-in-hand (what the heck is ResearchOps, we first thought), and then gradually started nudging DesignOps into a role that _barely_ focused on technology or code at all, and started becoming _way_ more focused on essentially being a glorified manager for design teams.

This was incredibly disappointing to see, partly because (ironically) **the role that other people were talking about should not even need to _exist_ if our original vision of DesignOps was being successfully achieved**.

When design and code become interoperable, you no longer _need_ a "manager" to oversee design and development teams; this crazy "gap" that everyone wants to bridge disappears, so it's no longer a problem to solve with someone like the alternative DesignOps role describes.

### It's a red flag when even people _in_ DesignOps roles are confused

There is _so_ much misinformation and confusion out there about DesignOps that the term has essentially become meaningless; it means nothing and everything at the same time.

One way we could measure this confusion is by looking at people employed to be DesignOps Managers.

In an article called [Defining DesignOps — my first 6 months as a DesignOps Manager](https://uxdesign.cc/defining-designops-my-first-6-months-as-a-designops-manager-921285cc75c9), recalling the week before starting his new role as a DesignOps Manager, the author writes:

> A week before my new venture into the mysterious new world of DesignOps. I sat Googling “What is DesignOps?”.

First of all, the point out the first red flag; If you replaced "DesignOps Manager" in this case with an role like "Chief Medical Officer" in the paragraphs above, it would seem crazy. For example, where it turns into:

> "A week before my new venture into the mysterious new world of medical advisory. I sat Googling “What is a Chief Medical Officer?”.

The author then continues with an honest reflection of his confusion around the term:

> The more I read (and I read a lot), the **increasingly confused I became**. Is DesignOps a design managers role? The efficiency of design? Perhaps evangelising design? Or recruitment and teams skills? Career progression? On boarding and people stuff? Software and tools? Or was it all of these things or something else?

Pointing this out is in _no way_ a dig at the author; on the contrary, clearly the fault does not lie with him. When you've got experienced designers like this feeling lost about a term that describes the job they've just accepted, it's another a red flag that something has broken down elsewhere. Such confusion should be cause to take a step back and look at why this is the case.

### The goal was never “bridging the gap”, it was about removing it entirely

As Sam Neil says in the 1997 major motion picture "Event Horizon" describing a wormhole in space:

> “The shortest distance between two points is _zero_, and that's what the gateway does, it folds space so that point “A” and point “B” coexist in the same space and time. When the spacecraft passes through the gateway, space returns to normal.”

This is exactly the image that comes to mind when I talk about DesignOps, and indeed, our tagline ("the distance between design and development should be _zero_") for the meetup itself was inspired by this visual.

### The future of design is based in code

I am more alarmed that other people are not more alarmed, but I do think that's partly due to telling ourselves two different stories:

The first is a story of pessimism, where there are just way too many problems, but we've clearly reached the limit of of how we can solve these problems, so we might as well just accept it and add more "layers" to try and manage it best we can (eg. DesignOps Managers).

The second is a story of optimism, where things are better than ever, and are getting better all the time. We have more tools than ever, the biggest companies in the world have massive design teams all approaching things in roughly the same way, so we've probably reach "absolute truths" with how to solve these problems, and everything is going to be fine if we just follow along and adopt "best practices".

Both of these stories that you could tell are dangerous in the same, because if believe nothing more can (or should) be done, the result is that they both lead to the same outcome: _doing nothing_.

As you might be able to sense; from my perspective, seeing the world this way is pretty lonely, and causes constant cognitive dissonance. I am so convinced that the future of design is based in code, that seeing the current state of things feels like I'm constantly looking back on the past every day.

I find it odd that most of my peers do not see the problem the same way that I do, and I often wonder if it's simply due to not following the current mainstream path for a long enough period to see all the inevitable problems in their future; or i they can see these problems, but choose to ignore them; or maybe they see them, but have no idea what to do about it and are waiting for "the industry" to also sound the alarm and tell them what to do next.

### DesignOps Managers are currently modern day Switchboard Operators

One reason I am less worried about the corruption of the term "DesignOps" (than maybe I should be after it being so personal to me for years) is that I believe we are living through a very awkward transition period between the source of truth for design being "pixels" to the source of truth for design becoming "code".

I have believed this for the better part of a decade, and continue to hold this view, because I still believe that I'm right, but probably still just a bit too early. That's why I am so insistent that we need to move faster, because even when we get the technology right to start solving this, the culture is going to take even longer to "cross the chasm" of how we're going to design and build things in the future.

When you remove the layer of abstraction (hand drawing pixels to "emulate" a foreign production environment) when designing digital products, apps and websites, you remove the cause for so many other unnecessary problems and roles/processes that are thrown on top of these problems to try and "manage" them, instead of making them obsolete.

Once that _does_ eventually happen, we won't be talking about "DesignOps" or "bridging the gap" anymore; and that's as it should be.

---

---
type: tutorial
title: How to add clickable URL links to Figma presentations using Pitchdeck
date: 2020-05-24T00:00:00.000Z
---

# How to add clickable URL links to Figma presentations using Pitchdeck



#### Video Transcript

Today, I'm going to be showing you how to add clickable links to your collaborative presentations that you've designed in Figma. These will be links that you can click while you're presenting, which will take you to external web pages, or any URLs (or links) that you want to include in your presentation.

Tto do that, we need to install a Figma plugin called "Pitchdeck". If you haven't already done that, you can go to the top left of the Figma toolbar and click on the little Figma icon, and if you go to "community" and then go to search; the search term that you want to use is "Pitchdeck", and under the plugins tab you will see a result called "Pitchdeck Presentation Studio", and if you haven't already installed it you'll see an "install" button on the right hand side that you can click, and when you click on that it'll change to look like mine, where it says "installed", and it's got a little checkmark on it; once it says "installed" you can jump back into your Figma file with a collaborative presentation slide deck design, and we can get started.

I'm just using a design that I came up with based on Dieter Rams "10 Principles for Good Design", and this is just a slide deck that I came up with and designed in Figma. The idea is that I want to take this slide deck, turn it into a real presentation and include some links in the presentation that I can click out to while I'm presenting. The first thing we need to do is start the Figma plugin that we just installed, and we can do that by right-clicking anywhere, going down to "Plugins", and then finding the "Pitchdeck Presentation Studio" name and clicking on that, and that's just going to fire up the Figma plugin that we just installed, the Pitchdeck Figma plugin. What it's going to do is, it's going to check all of our frames in the top level of our page and it's going to treat every single frame as an individual slide as part of this presentation, and it's also going to load in all of the elements from each frame and those are going to make up all the bits and pieces in each slide.

Now that that's loaded, you can see here that we've got all of our slides coming from Figma, the presentation designs look exactly the same as you would expect from the the original, and you'll also notice that these elements are coming in one after the other, and that's because Pitchdeck has loaded them up as individual parts of each slide. if you go through and and click through them, you'll see on my screen that I've got some animations applied to these elements, too. I'm not going to cover that in this Figma tutorial, but if you're interested in seeing how all the animations work that are sitting on the right hand side here, you can find another Figma tutorial on our YouTube channel, which goes for about 30 minutes and does a really deep dive on adding animations and presenting this, and showing you how it all works in depth; but for today I'm just going to be showing you how to add clickable links to your collaborative presentations in Figma, and then we can have a look at what that looks like in a browser.

To start with, I guess the first thing we need to do is get the the slide ready that we want to add a link to. Once we've done that, I'm just going to use the "intro" slide for now and the first thing you want to do is go up here on the top right hand side of the Figma plugin where it says "animations", and that's actually a select box; you can click on that, and when you click on it you'll see a few different options here; it's currently under "animations", but we want to go down to the option that says "Clickable URL links", and if you click on thatl you'll see here that the context changes from some animations and a timeline, over to some inputs. These inputs just text fields; you can you can paste text in there, and as you can see from the placeholder it's saying that it wants a URL or a website link inside of those text fields. Each of these text fields is attached to an element inside of the frame; you can see when we hover over it, this one's hovering over the photo, this one's hovering over the subtitle, and; we can attach different links to different parts of our frames. The first thing I'm going to do is just grab a link to try it out with.

If I go to Chrome, I've already actually got a link saved; this is the "10 Principles of Good Design" link where I got the images from, and I'm just going to go to my URL bar in Chrome and copy/paste this little URL; and now that I've copied that what I want to do is, I want to attach it to the photo of Dieter Rams in my presentation; now that I've got the layer selected or hovered in my Pitchdeck Figma plugin I'm just going to click on the text input, and now that's active I can paste it by using Command + V (or Control + V if you're on Windows); I'll just paste it in, and you can see there, it's pasted in the link as you'd expect. If I hover over it now, the cursor has changed to a pointer which indicates that there's a link on there; that's now on there, you don't have to click a "save" button or anything, it just attaches itself to that element.

We could also apply it to another element if we wanted to; if we wanted to add the same link to the "subtitle" or the "caption", I can paste that on there as well, and now that also is a link. If I grab another link just to add to another frame, if I switch to my next tab, I've just got a link to the Dieter Rams documentary website; this is the "Rams" documentary. Again, I'll copy that URL and jump back into Figma, and maybe this time I want to add it to my next frame; in this case I'm going to add it to the image of the radio here; again, I'm going to click on the element that I want to add a link to, click on the text input, paste it, and now that's pasted in, you can see that we've got a link there that will actually open if I click on that, but I've already got it open in my browser; I know where it goes, but if you click on that, it'll open if you just want to confirm; but it will definitely open this link here.

Now that we've got that added again, we can add this to our little caption down here as well; I'll paste that in, and now that's on the caption, we can see right there and that's really all I want to do at the moment. I mean, you could add URLs to any of these elements on any of the frames, but for now, just to show you how it works, I'm just going to leave it fairly simple with the first two, and and we can have a look at what that looks like.

To actually make this work, what we need to do is in the top right here, you'll see we've got this little select box that says "Pitchdeck URL" and that's selected by default. There's some other export formats here which are under the "static" label, such as "PDF", "PowerPoint", "Keynote" and Google Slides; this will export our collaborative presentation from Figma to those to static formats, and will not include any clickable links at the moment (in this version of the Pitchdeck Figma plugin, at least).

What you want to do is, select the top option of "Pitchdeck URL" and make sure that's selected, and then if you haven't uploaded a presentation yet, this button will say "Upload Presentation"; but because I've already done it before, it's telling me that I can update this presentation, and that will update the link for me. If I click on "Update Presentation" now, what this is going to do is, it's going to generate all of these frames for me and turn them into a slide deck and then upload all of the images all of the thumbnails, and all of the assets that I need to create a presentation for me. Once that finishes it's going to give me a URL that I can use, and then it's also going to generate a password for me to protect that URL, so it's only me who can who can access it.

We'll just wait for that to finish now. It's just going to upload all those images. I'm on Australian internet, which is slightly slower than you should expect in pretty much any other country, but it won't be won't be too much longer, and then we can jump into the browser and I'll show you exactly what it looks like once we get those animations in there; but more importantly, in this Figma tutorial you're going to see exactly what it looks like with the links functioning as well; those will work as you'd expect very shortly.

It's almost finished now, and once it wraps up you'll get a confirmation message which looks like this. It will tell you that you're secure presentation link is ready and it'll give you a link to that presentation here; you can click on that blue link or alternatively you can copy/paste the URL by clicking on this little "copy" icon. Then the password down here; I've just copied the URL, I've already got my browser open; I'm just going to jump back in there and in a new tab I'll just paste the URL and hit enter. Then in Figma, again, I'm just going to copy the password; now the password is copied to my clipboard and now I can jump back in to our collaborative presentation where it's asking for my password; I'll paste the password in that is copied from Figma from the Pitchdeck Figma plugin, and now I can click login. I'll do that now, and once you've been authenticated, it will now load in the presentation with all of the images and the animations and everything else.

There we go, we've got our presentation. If I just briefly click through it, you can see here that it's looking really good; all of the animations, all of the elements are there as expected, and it's looking really nice. We can jump around to those frames, but more importantly what we have now is, you can see when I hover over these elements where we put our links, the cursor changes to the little hand, which indicates that there's a link there. I can see in the bottom left of the window, the URL that we added into our Pitchdeck Figma plugin; if I click on that, you'll see that it opens up the link that we added; this is the link that we attached.

If I go to my second frame; again, it switches the cursor to the pointer, and now I can see in the bottom left it's going to open up the Rams documentary link. I'll click on this link now, and there we go, we've got our Rams documentary website. That's super cool, that means we can now embed clickable links on literally any element that we like inside of our collaborative presentation designed in Figma; and as long as we point it to the right place, then we can basically go to any URL that we need to from within our presentation; that's pretty cool.

There's a whole bunch of other little features down here that you've probably noticed; and I'm not going to go through them in this particular Figma tutorial, as I covered that in the other Figma tutorial I mentioned before; if you go to our YouTube channel, you'll be able to find a 30 minute Figma tutorial about creating and presenting animated pitch decks using the Pitchdeck Figma plugin, and that will go through the remote control, it will go through the cursor, it will go through fullscreen mode, and all that cool stuff. There's a new feature with numbers; which I can just show you now just toggles indicator down here in the bottom right, you can toggle that on and off and that will give you a number notification while you're actually presenting as well; that's really neat. If I leave my mouse a little bit above, you can see that the toolbar vanishes, so that's worth noting, too.

That's pretty much it; it's really simple to get these links into our collaborative presentation, all from the Figma plugin. Now that I'm pretty much done with my presentation, I'm going to exit the Pitchdeck Figma plugin. If you want to update the links, or if you want to add new links to different elements, you can simply rerun the Figma plugin by going to the right hand side of your Figma page, and in the right hand column here, underneath "Plugin" you'll see a little pancake icon with the word Pitchdeck next to it; if you click on that, that will relaunch the Pitchdeck Figma plugin without you having to go through the right-click menu, and going into "Plugins" and then finding the Pitchdeck Figma plugin, which can be annoying if you've got heaps of plugins installed; this is just a really quick way of reopening it.

I'll leave it there for today; I hope that you've been informed on how to do this now, as I know it has been a common request about how to attach links to your Figma designs for collaborative presentations; this is a feature that I think is really cool in the Pitchdeck Figma plugin. Give it a try if you've been trying to do this, and I hope it works out for you or your team. Stay tuned for our next videos, as we'll be producing many more of these Figma tutorials with tips and tricks on how to do different things in Figma. Until then; thank you, as always, for watching.

---

---
type: tutorial
title: How to embed videos and GIFs in Figma presentations using Pitchdeck
date: 2020-05-24T00:00:00.000Z
---

# How to embed videos and GIFs in Figma presentations using Pitchdeck



#### Video Transcript

Today, I'm going to be showing you how to embed videos and animated GIFs inside of your collaborative presentation slide deck designs in Figma, and then use those as a real presentation that you can take straight out of Figma and actually present to people with those GIFs and videos in your presentation.

To see how to do this, we need to install a Figma plugin called "Pitchdeck". If you haven't already done that, you can do it by clicking on the Figma icon in the top left, and then going to "community" or "plugins" and in search bar if you type in the term "Pitchdeck"; underneath the plugins tab, you'll see a result called "Pitchdeck Presentation Studio", and if you haven't already installed it, you'll see a button on the right hand side that says "install" and after you've clicked that, it'll look similar to mine where it's got this little check mark, and it'll say the word installed" next to it. Once it looks like that, you're ready to go and you can switch back to your Figma project file.

I'm going to be using a pitch deck (or a slide deck) that I designed in Figma based on Dieter Rams' "Ten Principles for Good Design", and the goal for today is to turn this collaborative presentation slide deck design from Figma into a real presentation; and not only a real presentation, but a real presentation that contains GIFs (embedded GIFs) and embedded videos from YouTube and Vimeo.

To get started, we need to run the Figma plugin we just installed; if you right-click anywhere and go down to "plugins", and then just go down to "Pitchdeck Presentation Studio" and click on that; that is going to fire up the Figma plugin that we just installed, the Pitchdeck Figma plugin. What it's doing right now is, it's looking through all of our frames in the left-hand side here and it's treating each frame as an individual slide; every parent level frame will be loaded into Pitchdeck as a slide and then all of the elements inside of each frame at the top level inside of each frame will be treated as the elements inside of each slide as well.

Now that it's loaded, you can you can see what I mean. You can notice that we've got our slides all loaded in as expected, they're identical to what we have in our Figma design. You've probably noticed that there's a couple of things that are different; the first thing that is different is the order of these frames; in Figma the order of these frames go from intro at the bottom to principle 10 at the top; it's fundamentally in reverse to what we're seeing in Pitchdeck. The reason for that is Pitchdeck automatically reverses the order of the frames because when you're designing things in Figma typically, if you're copy-pasting the frames, Figma will will put it next to the frame that you just copied, but in the slide order (or the frame order), it will actually insert the layer above the frame every single time. You end up with something like this where the latest frame or the last frame as at the top and the first frame is at the bottom; Pitchdeck automatically reverses it by default, just to save you the trouble of reordering the frames in Figma

Having said that, if you do need to change the order of the frames, you can do that very easily in the Pitchdeck Figma plugin just by clicking into any frame, or you don't even have to click you can just hover over any of the drag handles to the left of any slide, click and hold that with your mous, and then just drag it up and down; and you can see there that it just reorders it. Now we can move three after four I can move that back you can move any slide around in any order and it's worth noting that this will not affect the ordering of your Figma file, it's just telling Pitchdeck what order you want these slides to be in when it exports a presentation deck from the Figma plugin.

Now that we've got that sorted out, we've got our order that we're all happy with from 1 to 10 and the intro frame; you probably also notice that there's some animations going on and these aren't coming from your Figma design, again, these are coming from the Pitchdeck Figma plugin. The Pitchdeck Figma plugin allows you to apply animations to any of your layers on any frame, and because I've already designed this and I've run this Figma plugin before, I've already gone through and added all my animations to each of these elements. By default, they'll be turned off when you first open the Figma plugin in a project, for the first time everything will be set to "no animation"; that just looks like that, nothing moves, but you can of course change that and add your own timings and your own speeds.

You can also copy paste those animations really easily just by clicking on the "copy" button and then pasting it on any of the other layers on any other frame or any other slide. The other thing that you might notice is the speaker notes section down here; I've covered this in another video which goes over how to do all the animations how to set up the speaker notes, but this is just a free text field and you can write anything you want here; I can write "intro to the presentation" and there may be a note to myself to "talk about Dieter Rams history" or something like that; that's that's really all that does, it's just a way for you to add notes that can be used later, which aren't audience facing, these will be used when you go to present; you'll be able to see them as the presenter but the audience won't. That's available on every frame every slide, you can customize those per slide and get them later when you go to present it.

Now that we've covered the slide order the speaker notes, and briefly touched on the animations, what I want to talk about today is showing you how to embed GIFs and also embed videos from YouTube and Vimeo into your collaborative presentation design in Figma, that we can actually present with to an audience. To do this, we need to take our mouse over to this heading here where it says "animations", and you can see this is actually not a heading, it's a select box. With this select box, we can put our cursor over and this is now clickable; if I click on "animations", we get a few more options; the default is "animations", which is showing us all these animation settings, but the next the next option is to "Embed GIFs and YouTube or Vimeo URLs"; if I click on that one, you can see the the options here have changed; the layers are all still the same, we can still see all of our layers that we had in the animations, but the timings and animation names have been replaced with an input box for each each element. This box here as you can see by the placeholder indicating it, these are for pasting in links, and as the title says, we can paste in URLs for Vimeo, YouTube or just a GIF. I'm going to show you all three of those just to show you what they look like and how they work.

I'm just going to open up the browser and load up a few pages that I've already set up beforehand. These are three links that I've set up related to my presentation; I've got a YouTube video from the Dieter Rams documentary, I've got a Vimeo video showing the "Ten principles of good design" clip, and then I've also gone to Giphy and I have loaded up a a looping GIF of Dieter Rams getting angry at his engineering team. I'm going to show you how to use all of these in your presentation.

The first thing we need to do, is pick which element we want these these videos of GIFs to show up. For now, I'm just going to load it onto the Dieter Rams photo on the intro slide; if I jump to my website again; the first thing I'll do is just copy the GIF and show you what that looks like. If I copy the GIF, you can see here this is just a link to the GIF file; that's one we want, you want to link that links to a "dot GIF" file in the URL. If I go back to my file I've just copied that that URL, and if I hover over my layer which has Dieter Rams photo, click on the input and then press Command + V (or Control + V, if you're on Windows) and if you paste that in there, you'll see immediately the GIF has appeared; it's embedded that GIF in place of whatever image was there before. The image from our slide up here will not be rendered, it's just going to show this GIF; you could put a placeholder image there if you want; if you want to swap out a video or swap out a GIF later, that might be a good way to do it; you can easily easily swap that out. So, that's the GIF, and now we can try out the other ones as well.

If I jump back to my browser, this time I'm going to use Vimeo. If I just copy this URL, and notice that I've just copied the URL itself, I haven't had to go down to "share" and then go to this embed code and figure out what's going on there; I don't need to touch any of that, I can simply just go up here to the main URL of the video, copy that, jump back into Figma; and this time I'm going to delete the GIF. You can see when I remove it, it goes back to the usual image; I'm just going to paste in the Vimeo link that we just copied using Command + V, and you can see here I've got my Vimeo embed ready to go. It's worth noting that this will play on its own once it gets into the presentation that we upload in a minute, but in the preview it's set to just set to to do nothing, essentially, to not start. It doesn't keep loading in and over and over and over again because every time you make a change it'll keep trying to load it in.

The next thing we can try is the the YouTube video. After we do that, I'll show you what it looks like once we actually export this thing. I've just copied again the the YouTube URL from up here, and I haven't gone to "share" and clicked on the the embed or gone to any of this iFrame code; I don't need that, all I need to do is simply copy this link up at the top, and I can get rid of the Vimeo link, delete that; and this time I'm going to paste in the YouTube link. Now I have the YouTube embed there, you can see that it's loaded in and it's matching up with the video that we expected. The other thing you can do is, it also supports short links; if you did want to grab the short link like this, you can grab that and then I'll load that one in; that will that will work as well, if you want to use a short link or if somebody sent it to you you can paste it in. Really, whatever link from YouTube or Vimeo you find, you'll be able to just paste that raw one in there and Pitchdeck will figure out the rest, it'll embed it for you.

Now that we've got that set up, what I can do is, I can actually now export this to a presentation. I might do a couple more, just so we can see what they all look like. I'm just going to grab that GIF, and I'm just going to swap out this image with the GIF of Dieter Rams, and you can see that it's kept the aspect ratio, it hasn't stretched it, it's just vertically centered it; and of course the way you could go about making sure that's positioned the way you want it would be to create a proper placeholder. For example, I'm using square images here, and obviously this GIF is not square; what you would do if you wanted to position this more accurately is you would get the dimensions or the size roughly of this embed here, and create a placeholder frame or a placeholder rectangle in your designs, and then all you'd have to do is find that placeholder in your list of layers paste in your GIF or paste in your YouTube video or Vimeo video, and that will just work as you'd expect.

I'll add one more; we've got our Vimeo link as well, so we can try all three. Again, I'm just going to copy the the Vimeo link from the URL, and I'm going to swap out this image and again you can see here that it's just taking over. Let me just see if I might try it on this one; as you can see, you can't actually click on it in Figma to start playing it, but once you'll see in a second when we export it which I'll do in a moment, you'll be able to actually play this and it will play automatically in your presentation and then you'll be able to control it with your mouse if you really want to.

Okay, I'm fairly happy with those three for now; what we can do is export this to a real presentation, and I'll show you what that looks like. To do that, you just need to make sure that your export setting is set to "Pitchdeck URL"; that's sitting underneath the "animated" group, and there's some "static" options as well, which I won't cover in this Figma tutorial, but if you're interested in these these ones, I've created some other YouTube Figma tutorials on our YouTube channel. and if you just go to the channel you'll be able to easily find how to export your collaborative presentations from Figma to PDF, Figma to PowerPoint, Figma to Keynote, and there's also a Figma to Google Slides one in there as well.

For today, we're just going to be looking at the Pitchdeck URL; so, I've just selected that, and because I've already uploaded this before, mine says "Update Presentation", but if you haven't uploaded one before, it'll say "Upload Presentation". I'm just going to click "Update Presentation" and that will update the presentation for me; what it's doing now is it's going through each of these frames that we've set up as slides, and then it's also going through every single layer of the of the the children of those slides and it's creating the slides for us and generating the images, generating the SVGs, creating these slide thumbnails, and then it's basically going to upload it for us. Then it will give us a link a URL with a password that we can then use to view and present this this deck.

Now that that's done, we can see that it's telling us that our secure presentation link is ready, which means that we can copy or click on this secure link and also copy the password down here to get access to present the deck. I'm just going to copy the URL and take it into my Chrome window that I've already got open and just paste that in there, and if we jump back and grab the password I can just click on this little icon to copy the password and jump back, and then if we paste that in there the login button will become available, so I'll click on that to login and once this loads you will see our deck as we expected it.

We've got the nice YouTube video that we just added into our Figma file, that's in there now; I've just left the mouse untouched for a little bit and that's why the toolbar is disappeared now, but the video is really clear, it's I think it's in HD video and it autoplayed straight away which is really neat. I don't have sound on, but if you turn your volume up or if you're using speakers for your presentation you'll be able to hear all the audio as well, I've just got my computer muted at the moment. If you really need to, you can also access the timeline; you can click around and jump through the video while you're presenting, you can pause it, you can play it, you can mute it and do all that cool stuff.

Then if I jump to my next frame; I can either do that by clicking on the little next button in my my slide controls down here, or I can simply just press the right arrow key; I'm going to do that now and it's still focused on my on my video. If I jump back down here and click next, now we're on slide 2, and we've got our GIF this is the GIF that we found on Giphy of Dieter Rams going crazy at his engineering team, and that's just autoplaying obviously and repeating an infinite amount of times, depending on what give you're using if your GIF is set not to repeat it won't repeat, but obviously most GIFs tend to repeat; so, that will just keep going for as long as as long as the GIFs there.

The other thing to know is if I go backwards any video that I have embedded, it will get restarted whenever the frame changes or whenever the slide changes; if you go forward and then if you go back, that will restart the video; it won't pause at all and just loudly start in the middle again, it'll do that if you did need to go backwards. That's the GIF loading in nicely, and as I was saying before the animations still gets applied to the video and the GIF, which is really nice; it's a smooth transition in for those embedded GIFs and YouTube or Vimeo videos. The next one we just left blank, this was the the second principle of design, and we've just left it with the Braun juicer there, but if we go to the next frame, that's where we've added our Vimeo embed.

I'm just going to go to the next frame, and there we go, it's auto-playing our Vimeo embed; it's really, really sharp I think this is another full HD video, and again, I'm not using my speakers; you can't hear the audio, but this is just an embedded video with audio if you have speakers on. If you need the audio, just unmute your your television screen, or your computer, or whatever you're presenting on, and you've got to hear that, but that just that just plays automatically; you don't have to interact with it again, if you wanted to, the controls are there; if you want to engage with the mouse you can do that of course, but in this case I just want to let it run and just play in the background.

Then after that, we've just got our regular slides; these are all just as we expected. I'm just going through those pretty easily. I won't deep dive into the other features of the controls down, here I've done a separate video on that that you can find on our YouTube channel, on our YouTube channel; if you go there and look for a 30 minute video which goes into depth about how to apply animations, and how to use the remote control, and the pointer and all that sort of stuff. That's just a quick demo of the pointer, which does a few different little things that you can do for fun.

That's roughly it; it's really easy, you don't have to do any crazy uploads with your videos, you don't have to scour your local hard drive or anything and drag and drop images in to Figma, you can purely just link to them online and Pitchdeck will take care of the rest and embed those YouTube videos, Vimeo videos and GIFs into your presentations. I hope that's been helpful. I don't think that Figma natively has support for video yet; they do support GIFs, I believe, in the prototypes; but for me personally and for a lot of people I know, video is super important for doing presentations; so that's why I wanted to add support for some video formats. There will probably be more video formats supported by the Pitchdeck Figma plugin in the future, so stay tuned to these Figma tutorials and our website for more updates. For now, these are the these are the three embeds that you can add into your Pitchdecks or your presentations that you've designed in Figma. I'll close that off now and jump back into Figma.

So that's it; that's all you need to do. You can you can play around with this yourself, as I said before, if you want to add in some placeholders; rectangle placeholders or whatever shape you want those embeds, that's just a really easy way of positioning and resizing them over your frame. If you want to put them in the corner or if you want to do a fullscreen one, you can just make the whole screen a rectangle inside of your slide and then when you rerun the Pitchdeck Figma plugin again, which you can do just by clicking on the right-hand side here this little pancake icon and relaunch it; you could turn that whole rectangle into a fullscreen video embed, and that would totally be cool as well.

I'll leave you there, and until the next time, thank you as always for watching; we'll be back very soon with more Figma tutorials just like this one.

---

---
type: tutorial
title: How to create and present animated presentations from Figma using Pitchdeck
date: 2020-05-23T00:00:00.000Z
---

# How to create and present animated presentations from Figma using Pitchdeck



#### Video Transcript

Today, I'm going to be showing you how to export your collaborative presentation slide deck designs from Figma into a real animated presentation that you can actually present.

To do that, we just need to install a Figma plugin called "Pitchdeck" and if you haven't already done that, you can go to the top left of your Figma app and click on the little Figma icon, and if you go to "Community" or "plugins and search for the term "Pitchdeck"; underneath the plugins tab you'll see a result pop-up that is called "Pitchdeck Presentation Studio". If you haven't already installed it, you can go over to the right hand side where you'll see an "install" button, and if you click on that install button it'll change to look something like mine, where it's got a little checkmark and says "installed" next to it; once it looks like that, then we're ready to go back to our project and export these collaborative presentation designs from Figma to an animated presentation.

Now that we've got that installed, we can jump back into our Figma design file, and in this case I'm just going to use this Dieter Rams "Ten Principles for Good Design" collaborative presentation pitch deck that I designed in Figma; and this is just a really nice demo to see how it all works because it's quite simple and we'll be able to clearly have a look at how to present this directly from Figma. So, the first thing we need to do is open up the plugin by right-clicking anywhere, going down to plugins and then clicking on "Pitchdeck Presentation Studio"; this is just going to run the plugin that we just installed the Pitchdeck plugin and what it's doing right now is it's looking through all of these frames on the left hand side, and it's interpreting each frame at the parent level of the the root level of the page as an individual slide; each each frame is treated as a slide and then it's going through all of the layers in each of those frames and it's interpreting them as individual layers that can be used as elements inside each slide for animations and things like that.

Now that the Pitchdeck Figma plugin has finished loading, you can see here that it's interpreted all of our frames. If we have a look behind here you can see that all these frames have been added into the plugin and each frame is being treated as a slide; you can see up here we've got 11 slides.

The first thing to note is that while it is mirroring the frames from the side here, you might notice that the ordering is a little bit different; in fact, it's exactly reversed. The reason for that is because typically when you're designing in Figma, you'll tend to design one frame and then reuse that frame for the next frame and just change the content; when you copy/paste things in Figma it will copy paste it next to the the frame right next to it, but in the layers panel here it'll actually add it above the current frame; you end up with this strange sort of reversed layer order and that's the reason why the Pitchdeck Figma plugin automatically reverses the slide order by default, because it assumes that you've been copy pasting this whole time and your first frame is at the bottom and your latest frame (or last frame) is at the top.

What it does is it just completely reverses that; straight away you get the correct order that you'd expect for your slides, but having said that if you've done it a different way or you just want to update the order, you don't have to touch any of the frames in Figma, you can leave those as they are; you'll see over here in the Figma plugin when we hover over this little "drag" icon in our layers, if you click and hold that and then drag it you can actually move these layers around freely in the Figma plugin itself, and these are independent of the layers over here; if you update the layer order in here your original Figma file as will not be modified it just is kept in the Figma plugin itself; if you want to move those around you can just drag them and drop them and that will reorder these frames super easily; now this one's frame one and this one's frame for but we do want the "intro" at the top; I'll just put that back up, but you can see there how quickly you can reorder all those frames or create a custom order or just mess about with them just by dragging and dropping them there.

The other thing to note is that if you delete some frames in Figma or if you change something around, you can just click on this little refresh icon here and what that will do is it will just load in a fresh set of frames from Figma; these are kind of already loaded in now, so if you make any changes they won't show up straight away in the Figma plugin but if you do need to make some changes or add new slides or delete slides, the way you can do that is just by changing them in your Figma design clicking on the "Refresh" icon and that will once again load all of those frames and and reinterpret them as fresh slides; but for now we're we're happy with our design we just want to animate it and export it as a presentation we can actually use.

Okay, so the first thing to note is that obviously this is our preview area; whenever we change a slide here, this will change the title and the preview of the slide; this is exactly what's going to show up in our presentation once we export it shortly. There's another section underneath that preview which you can see here; the label says "Speaker Notes" and speaker notes is just a text area where you can add any text that you like; you could put bullet points in here, you can add a paragraph, you can add a few words; anything that you like really. The purpose of the speaker notes is (later on we'll see it shortly), but when we export this collaborative presentation, these speaker notes will get carried over; so if you're presenting this to an audience you can basically leave these notes here and get them later when you're presenting and they'll be stored against these frames. That's just a really nice way of adding some extra context that you don't want the audience to see, and it's just for your personal use down here; you simply just type in some text, you don't have to hit save or anything, it'll just be stored there and that's pretty neat.

The other thing you've probably already noticed is that these layers are not static. Obviously in Figma they're just static, they're just some pixels on a frame, but Pitchdeck allows you to animate these frames. By default, they don't have any animations applied to them, but I've already animated these frames and those animations get saved when you close and reopen the plugin, and that's why you can see that these frames I've already got some nice animations on them.

If you do want to animate some of your slides, for all of the elements of your slides you can choose which ones you do (and don't) want animations on. You can see here when I hover over these layers in the right-hand side, this is basically representing the layers from our Figma file; you can see here it's a it's a one-to-one match with all these layer names; at the top here we've got this this image, we've got text, all these layers of text, and there's a drop-down box here (a select box) where we can click on that, and you'll get a whole suite of animations that you can apply. These are predefined animations, you can just pick one and they will they'll work; what we can do is change that to "scale", you can "rotate" it if you wanted to for some reason; it's a bit extreme, but why not do something crazy like "jello" or something like that where it just kind of comes out; these are a little bit attention-grabbing. The more conservative ones would be at the top where just a very smooth sort of "fade in" and "fade out" and you can change the timing as well; if you want that to come in last you simply drag the timeline over to the right here, and that'll come in after two seconds; you can change that to be however you want, you can also make that go for three seconds and have a really smooth and slow.

The other neat thing you can do is if you've already setup your animations on one frame or you've set up a certain animation let's say on this image that you really like, you don't have to manually recreate that on every single other layer if you don't want to; a quick way of copying those layer styles over to other layers it's just by highlighting the layer that you want the animation for and you'll see this button pop up, if you hover over it only, you'll see a pop-up that says "Copy"; if you click on that copy button it says "the animations have been copied", and what you can do is go to any other frame or any other slide and any other layer and you just hover over that and you'll see that the "Paste" button is now enabled. All you have to do is click on paste, and that will get carried over from whatever you just copied; you can see here now the image animation is exactly the same as the one we just copied, and you can do that from any layer to any other layer and it's just a really nice way of being able to store an animation and distribute it across other layers without having to go into the select box and manually select that animation every time and then drag the timeline if you already know what animation you want; that's just a really simple way of doing that, if you want to go about doing it that way.

Of course, the animation styles are completely up to you; there's there's a lot of options, and if you don't want an animation you can simply set it back to the default and just click on "no animation", that will just disable it; you can see here that just never animates at all, and that's kind of neat. I'll just copy that back again; if I copy that from a different slide I can re-enable that back on here just by copy pasting it, or I can just go to "no animation" and then change it back and it will keep the timeline; it won't remove that if I decide to just turn off the animation to see what it looks like, you can do it that way.

I didn't already say; obviously it changes the preview on the fly, so whenever you change an animation like this as we were just doing, it changes it on the fly but if you've already changed it and you just want to kind of keep looking at it or playing it, this little "Play" icon on the right-hand side of the animations toolbar, if you click on that that will just keep replaying it and you can do that as many times as you want just to see that animation continue. That's roughly it; the animations are designed to be very, very, simple; very straightforward and very easy to replicate across different frames, and that's what they look like. You can have fun with that you can make it adapt to any certain design aesthetic or branding that you that you have, if you have sort of an animation guideline or if you want something a bit more crazy or a bit more fun compared to the more sort of smooth and conservative animations at the top, that's completely up to you.

Now that we've set up our frames, we've ordered them the way we want, we've added our speaker notes, we've added all of animations that we want, we're happy with it; what we can do next is we can export or update this this presentation. I've already created a link before, but if you haven't this will say "Upload Presentation" and if we click on this little select box here you can see that if there's a few formats, and there's two groups as "animated" exports and "static" exports; static exports are things like PDF files PowerPoint files Keynote files; these are things that can get saved onto your computer, and I'll go over them in a separate Figma tutorial, but for today we're going to be looking at the animated one, because we want all these animations to actually do something.

What we can do is, we can (we've already got it selected), but if you select the "Pitchdeck URL" export format and yours might say "Upload Presentation" if you haven't done it before, but mine says "Update Presentation" because I've already created one. I'm just going to click on "Update Presentation" and what this is going to do is, it's going to generate frames or slides from all of this data that we've just put in, all of our image data, all of our speaker notes, all of our animations, all of our layers and it's going to create a presentation URL that we can use and present from anywhere; we'll see what that looks like in a second, at the moment it's just uploading all of the image assets, all of the animation data online, and in a minute you'll get a URL a password-protected URL; you'll only be able to use it if you have the password, and we'll see what that looks like in a second. It'll depend on how many images you have and how fast your internet connection is; I'm in Australia, so my internet connection is horrible (amongst many of the worst ones probably in the world), but we'll wait for this to finish uploading and then I'll show you what it looks like; hopefully it won't take too much longer.

The other thing to know is that if you've already uploaded this and you just want to get the details out (I'll show you in a second), but this little "padlock" icon up here, if you click on that, which you can (I'll show you in a minute), you'll be able to get this URL and password that you're going to see in a second straight away; you don't have to re-upload it every single time to get this link that we're about to see, you can simply get it just by clicking on that icon.

Alright, we're finally done! The Australian internet has worked, and we've got our link. You can see here that it says are a secure presentation link is ready we can copy the secure link below which is this one and the password and this is going to let us present our deck; what I'm going to do is I'm going to copy this password and then I'm going to open up this secure link and you can either do that by copy pasting this link by copy that copying that button, clicking that copy button, or you can click on this secure link icon; that's what I'm going to do.

Okay; I've got my URL here and this has just opened up the URL that we've just clicked on, and you can see that we've got a prompt to login to this deck, and because I've already copied the password, all I need to do is paste that here; I'm going to just paste it and you can see the "Login" button is now available; if I click on that (I'm just going to minimize my Figma window for the time being), I'm just in Chrome at the moment, and you can see here that it's loaded up our presentation after it's authenticated with our password. This is neat, this is exactly what we just exported from Figma; and you can see that we've got this little control panel down here in the bottom left, and there's a few things to go through; I'm going to go through all these with you just so you can see how it all works.

The first thing to know we've got simple controls; if you click on next that brings in our our next slide with all the animations that we set in Figma there's also a slide selector; if you do want to jump to a certain slide straight away you can see all of our frame names have been turned into slide selections; if I want to jump to number six or number nine, I can quite easily do that using this selector and I can use previous and next buttons as you would expect, you might not be able to see this but if I also use my keyboard; if I go "left arrow" on the keyboard and "right arrow" on the keyboard, I can navigate through those frames; if I push the "spacebar", that will also advance the frames as you would expect from something like Keynote or another presentation platform; that's a really easy way to present as well.

The other thing you may have noticed is that our toolbar just disappeared, and the reason for that is it's set to automatically disappear once it's inactive for a few seconds; if you just don't move your mouse, the mouse cursor disappears and the controls disappear; but to get them back, all you have to do is just move the mouse again and they'll pop right up. It will also not hide it while you're using the toolbar, so if you've got your mouse over the toolbar section and you're actually doing stuff, it knows not to to get rid of that; if you've got your mouse down here and you're wondering why it's not going away, you just have to move your mouse away from that toolbar and then it'll disappear and get out of your way; once you've done that, you can navigate with the keyboard once you've actually closed that off and don't want to show it to anyone, that's a really nice way of doing that.

We can also go into full-screen mode; if you click on this little full screen icon on the top the bottom right where it says "fullscreen", if you click on that that will actually take us into the proper "HTML fullscreen" mode; I have no browser window now; end-to-end the screen is just purely my presentation right now. This is perfect if you're presenting on a TV, or presenting on a projector to an audience, you want to go into full-screen mode and make it really seamless. Again, I'm just controlling this right now with my keyboard, using the "left and right arrows" and the "spacebar" if I want to just jump to the next frame. If you're in full-screen mode and you push the "Esc" key you can close it, which I've just done, or you can also click on (you can't see it in this recording maybe), but at the bottom it says "windowed", and if you click on the "windowed" button, which is exactly where the full-screen button was, it just changes to say windowed; if you click on that that'll bring it back to this windowed sort of version; that's really neat. The full-screen mode is awesome for presenting to an audience if you don't have all this desktop stuff or or Chrome window anywhere, that's really nice.

The other thing that we can do is enable the pointer; if you've if you've used laser pointers in real life you will have an idea of what this is; if you click on pointer you can see here that we now have this this red laser beam virtual laser beam that I can use to to point at things; that's really nice, I'm just using my mouse right now to move that around it just follows your mouse and if I again go back down here down to the bottom toolbar you'll see that it's selected the red laser pointer by default but you can scroll left and right with this using your mouse and you'll notice that there's a bunch of different options If we want to use, let's say the "nyan cat", we can select "nyan cat" and that will let me use nyan cat as my cursor. This is kind of just for fun; obviously, if you want to be super professional you can use the the red laser pointer, but if you're like me and you want to use Nicolas Cage's face to sort of highlight things, that option is available.

There's there's a whole bunch of them; we've got Xzibit, Fry from Futurama, there's this funny dog/curious dog, we've got Carlton from The Fresh Prince, you can make him dance on things; there's this there's quite a lot of them; Dodge, Keanu Reeves; just many, many. This one is very funny, I don't know what you would ever use this for, but it made me laugh and I thought it would be quite funny; so that's in there as well. You can play around with those if you want to just have fun with the pointers, that's how you do it. If you want to turn the pointer off you simply just click on pointer again, and that will be toggled off, and once again you've got no pointer.

The next thing I want to cover is the notes section; if you click on "notes", this will open up another window; you can see here I'm just dragging this over here, and you can see on the right-hand side now we've got this this whole new panel that we didn't have before. If I go down here, you can see that at the bottom of my controls it's telling me that we're now "connected to the remote control" and on the remote control it's telling me that we're "connected to the presentation"; these two things are now linked they can talk to each other, so if we click on next in the controls, it will change the slide in the main window. These are two totally separate windows, but they can interact with each other; I can jump around here, I can go to different frames, and the cool thing is you can see up here it's telling me what slide I'm currently on, what slide I just came from, and what the next slide is going to be.

This little navigation bar up here will tell me that above that I've got a slide timer; this is just keeping track of the entire presentation I can pause that and reset it I can start it again pause it and start it this allows me to keep track of how long I've been speaking and it's just a really nice way of keeping track that you're not going over time if your presentation has a time limit and of course you'll notice the speaker notes the speaking it's that we added in Figma and now showing up per frame or per slide whenever we select a new one; you can see here that the notes just keep changing and those are specific to each each frame these never get shown to the audience these are only shown to wherever you've got this; the cool thing you could do is you could have this presentation window over here on one monitor and then you could put your control panel or speaking that's frame on another monitor and control that from a laptop or control that from a secondary screen and that way you can just have all these displayed to yourself including the timer; that's really neat.

The other cool thing which ties into what we were just looking at is the pointer; if you click on this pointer icon in the remote control you can see it brings up this little interface and it's enabled the the remote control on the right hand side and if we drag this little icon around just by using the mouse; if you click and drag on that icon again you can completely remote control that that laser pointer from a separate screen and again you can obviously change those cursors, and this is two way binded as well; for some reason you changed in the presentation mode you can see in the other window it's getting changed and the same thing obviously happens the other way; you can see here and same if we enable and disable the pointer you can see if I enable it from one it also enables it in the other and disables it from the other as well; that's pretty neat that you can do that.

You can change that as much as you want control it from the secondary window and that just completely correlates to the main presentation; you've got a you've got an idea of where that's going to be if you're not actually looking at it the whole time; I can just turn that off again and if we close this off now if we happen to close that window you can see down here it immediately tells us that we're now not connected to the remote control if you want to recon you simply just click on the notes button again and wait for that to open and you can see it's now changed to connect it again and now we're connected; if you do accidentally close it or it drops out you can you can totally just just close it reopen it from here and it'll reconnect itself automatically and now you can see that we've gotten control over it again just by reopening it.

The other thing that you can do which I think I'll have to cover in a separate video (because I don't have a video set up at the moment), but what you can actually do is instead of just using this notes window on your computer and control it from a different screen, the alternative thing you can actually do is control it from your phone. You'll notice next to the "notes" button there's another button called "remote"; if you click on "remote", this will bring up a QR code, and if you've got your iPhone or your Android phone or your smart phone with you, what you can do is open up the camera, hover it over or point it at this QR code that we're looking at now, and if you open up the link that it prompts you with, that'll take you to the browser and on your phone what you're actually going to get is exactly the same interfaces we just looked at in this window here.

This interface is going to load up on your phone, and you're going to be able to do everything that you just did in this remote control from your phone, including the laser pointer you can touch on the touch screen and drag that laser pointer around you; can touch these buttons and and change the slides; you can make these selections; you can do your timer you can read your speaker notes, all from your phone; that's a really cool feature if you prefer to walk around while you're talking or you're not close to the laptop that you're actually presenting from you can do it all remotely just by opening up that opening up that QR code on your phone.

I'd recommend testing that out I can't show you that on my phone right now because I'm not recording my video on the phone but that's how you do it you just open up the remote button scan this QR code and you'll be ready to go exactly the same thing you'll see once you connect to it on your phone this will change to say you're connected to the remote and your phone will also tell you you're connected to the presentation; it works exactly the same way as the notes window but the remote just lets you go mobile and actually take it with you on your phone via the internet; that's super fun.

That's essentially what it looks like; you can obviously customize this presentation back in Figma or if you want to change it, but once it's on this link, you're you're pretty much good to go you can present this from anywhere you as long as you have a browser; that's all you need, it's just a cloud-based presentation and you just take that URL and password that we looked at before with you. As I said before, we'll go back into Figma and I'll show you how to re-access that password if you do need it.

So, I'll jump back into Figma; you can see here this is what we got once we uploaded or updated the presentation to the link we're just looking at. If I close off that Figma plugin and reopen it; and the way you can reopen it quite easily if you've already run the Figma plugin once is, you can go over to the right-hand side here and under "Plugin", you'll see the little pancake icon with "Pitchdeck" next to it; if you click on that icon, what that's going to do is it's just going to relaunch the Figma plugin without you having a right-click, go down to plugins and go down to the "Pitchdeck Presentation Studio" Figma plugin again; that's just a really nice way of launching it back up; once again it's just loading up the frames from our Figma file.

The neat thing about this is it's all collaborative; the the cool thing is because everything is in Figma, and you're already using Figma for all your designs and component libraries and brand and all that sort of stuff, and you've probably got multiple designers or content authors, or production people, all using Figma to generate a presentation like this; whether it's to present to a client or present to another stakeholder or somebody internally because you're using Figma, you get the collaborative design features for free Basically any presentation becomes a collaborative presentation; you're just making these collaborative presentations, and then get all the benefits of being able to export it directly from Figma using this plugin.

Again to get that URL and password back you don't have to re-upload the presentation again if you haven't stored it somewhere if you didn't email it to somebody and just want to really quickly access it; all you need to do is click on this little "padlock" and that'll bring up this little panel here and give you the same URL and password that you you got when you confirm the upload; again you can copy/paste those the password and the URL if you want to send it to somebody, or if you just want to open it really quick, you can just click on that link again where it says "secure link", you just click on that and that'll open up your browser and just use the password again to to get back into it and you can close that off just by clicking on this or clicking anywhere else.

That's pretty much it you can see how everything kind of came together at the end there all of our speaker notes which we saw all of our animations that ended up being in the presentation the order of the slides all worked out the way that we expected it all kind of comes come straight from Figma and I think that's really cool because again if you're doing everything in Figma already and you're already kind of collaboratively creating presentations in Figma you don't need to use a tool like PowerPoint or use a tool like Keynote where everything is disconnected from Figma and you kind of just want to use Figma as your source of truth for creating pictures or presentations and this lets you do that just by translating all that that good Figma design work into of course animations and things that are more specifically designed for a presentation like speaking notes and remote controls and things like that.

Okay, I'll leave it there; I think that was a fairly comprehensive overview of what you can do with the Pitchdeck Figma plugin in terms of generating presentations. In another Figma tutorial, I'll go over these other export functions that I mentioned, which would be exporting your collaborative presentations from Figma to PDFs, exporting presentations from Figma to PowerPoint files, exporting presentations from Figma to Keynote files and exporting presentations from Figma to Google Slides. We can do all of that as well, but for day today I just really wanted to go over the fundamental concepts of Pitchdeck and explain how it works demonstrate all of the the features that are currently offers, and show you how to take your collaborative presentations from Figma into a real platform that you can present with, and get all those cool things like animations for free.

Thank you as always for watching, and I hope that you've learned something from this Figma tutorial that's relevant to what you want to be using Figma for. Of course, if you have any feedback, please let me know, as I'm always trying to make these plugins the best that they can be. Thank you again, and we'll speak to you again very soon.

---

---
type: tutorial
title: How to export presentations from Figma to Google Slides using Pitchdeck
date: 2020-05-21T00:00:00.000Z
---

# How to export presentations from Figma to Google Slides using Pitchdeck



#### Video Transcript

Today, I'm going to be showing you how to export your collaborative presentation designs from Figma into Google Slides.

To do that, we need to install a Figma plugin called "Pitchdeck". If you haven't already done that, you can do it by clicking on the top left Figma icon in the toolbar up here, and if you go to community or plugins and search for the term "pitchdeck", you'll see a result called "Pitchdeck Presentation Studio" pop-up. I've already got it installed and that's why I've got this little check mark here and it says "installed", but if you don't, this button on the right hand side will say "install", and if you click on that it'll change to look like mine, and once it does you'll be ready to go.

Now, I'm just using a Figma file that I that I designed myself, which covers Dieter Rams "10 principles for good design", and this is just a simple deck design that I came up with in order to show you roughly what it looks like to export it and; to export this to Google Slides all we need to do is right click, go to "plugins", and click on "Pitchdeck Presentation Studio". This is going to fire up the Figma plugin that we just installed a moment ago, the Pitchdeck Figma plugin, and once that loads, it's basically just going through all of our frames here on the left hand side in our Figma design, and it's treating all of the top level frames as as slides; each frame is considered a slide to the Pitchdeck Figma plugin; that's what it's doing now, it's just going through all those slides, loading in all the layers and rendering all the images.

Now that that's loaded up, we can see here that all of our slides have been added from our design, and as you can see here, we've got all of our layers from Figma loaded up into Pitchdeck. The thing you might notice is that the layer order is the opposite of what you see in Figma; in Figma we've got "intro" at the bottom and "principle 10" at the top, but in our Pitchdeck Figma plugin we can see "intro" at the top and the last slide is at the bottom. The reason for that is when you copy paste frames in Figma, as I was doing when I was making this collaborative presentation slide deck design, every time you copy one, it will add it next to the original frame which is good, but weirdly it kind of adds each layer on top of each other in this layer panel here; it's basically getting loaded in reverse in some sense; Pitchdeck automatically flips that order in the Figma plugin because it assumes that you've been designing it that way, and it will automatically reverse that order; the top one becomes your first frame, hopefully.

If that's not the case, what you can do is reorder these yourself and it's it's really easy; all you need to do (if you do need to change the order of these slides for any reason) is, if you hover over the little hover "drag" icon you'll see a grabbing cursor appear, and if you click and hold your mouse and drag that slide up or down, you'll be able to very easily reorder it in the list of slides; I've just re-ordered this one to number five, I can reorder it back to the top, and that's just a really easy way to reorder your slides without having to touch Figma the design file in Figma. You can see here when I move these, it doesn't impact my ordering or anything to do with the slides or the frames in Figma; the ordering is just meant for Pitchdeck to know what order you want the slides to be in. That's just a really, really quick and simple way to to reorder your frames.

The other thing that you'll notice underneath the slide preview is that we've got some "speaker notes"; speaker notes are added to every single slide as a text box or a textarea, and it's just a free text space for you to type whatever you want, or paste whatever you want, and these won't be shown to the audience or anyone that you're presenting to, these are purely used for adding some little notes or talking points to each of your slides; you can put different notes in each slide, and we'll be able to see those later when we export this collaborative presentation from Figma into Google Slides.

The other thing that you've probably noticed is that these slides are being animated, and that's being done over here on the right hand side using these animation tools. Something worth noting is that because we're going to be exporting our collaborative presentation from Figma to Google Slides, these animations unfortunately won't be carried across to the Google Slides. These animations are just designed to be used for the "Pitchdeck URL", which is the default export format, and we won't go into that format in this particular Figma tutorial.

I do have another Figma tutorial on that on our YouTube channel; if you're interested in how that works, you can check out that video, it goes for about 30 minutes and it'll give you a complete overview of how all the animations work and what it looks like to present an animated version of your Pitchdeck using things like a remote control, controlling the deck from your phone, having laser pointers and all this kind of cool stuff; but today we're just going to be looking at how to export our collaborative presentation slide deck design from Figma to Google Slides; which again, won't carry over these animations, so please don't spend too much time on the animations if you're only going to be exporting to Google Slides from Figma, because they unfortunately won't get carried across; but you will be able to add animations if you want to in Google Slides itself, once we make that jump from Figma to Google Slides, which I'll show you in just a moment.

Now that we've got all that covered, I'm happy with the ordering, I'm happy with my speaker notes, I'm happy with the slide deck presentation designs; they're all completely matching up with with the designs that I've got in Figma, and now I want to export the presentation from Figma to use it in Google Slides. What we need to do is click on the export format drop down here, and we're just going to go down to the "PowerPoint file" option; if you click on "PowerPoint file" and then you'll see the button has changed to say "Export PowerPoint", and that's what we want to do (this will make sense in a moment).

If you click on "Export PowerPoint", what that's going to do is, it's going to go through all of our frames and convert them into slides, and more specifically convert them into a PowerPoint file with all of our slides from our collaborative presentation design. Now the PowerPoint file is ready, and it's going to give us the option to save it to our desktop; I'm just going to do that now, and you can rename this if you like; I'm just going to rename it to "Dieter Rams Slide Example" and save it to my desktop.

Now that's on my desktop, what I'm going to do is I'm going to minimize Figma and I've actually already got a blank Google Slides document ready in the browser; all I did was, I'm signed into my Google account, I've got Google Slides open. If you just search for "Google Slides" or however you usually get to Google Slides and open up a blank template; once you've done that, you can go to "File", and then go to "Open", and then under "Upload", what you want to do is you want to grab your file that we just exported; in my case I've already got this file on my desktop now called "Dieter Rams Slide Example", I'm going to drag and drop that into this little window here; you can see I've got it ready to drop I'm just going to let go and that's going to upload the PowerPoint file that we just exported from Figma, and it's going to upload it into google Google Slides.

It's just finishing uploading now, and once that finishes processing you'll see here that it's actually opened it up already for us, and there we go. You can see that we've got all the slides that we just had from Figma; everything from Figma is now in Google Slides and it's looking really, really nice.

You'll notice a few things here, I'll just run through a few things that I think is pretty neat; if we go from go from the start we've got each element is individual; I can actually move these around if I want to, which is really cool, and I change those. The other thing you'll notice is down at the bottom here, I've got all my speaker notes; the speaker notes that we just had a look at in Figma, they've all been pulled across into Google Slides, and I can make that bigger if I want, I can edit these and add more notes, or get rid of some notes if there's if there's too many (or if I don't want them anymore). I can just get rid of those; that's all completely editable, it's been carried over, and that's pretty cool.

The other thing that we can do is, as I mentioned, none of the animations that we set in Figma get pulled through into this this Google Slides document, but we can animate these elements now that they're in Google Slides. If you click on anything you want to animate, in this case I'm just going to use this image of the radio, and if you click on the "animate" button up here, that's just going to reveal the animations settings for your Google Slides. I've got the image selected and now I can basically just click on any of these animations and play them; and you'll see here if I advance the slide that that comes in as you'd expect, I can stop that, I can change it, I can make that fly in from the right, and then play that again. That's pretty fast, but you can see we can essentially animate it the way that we'd like in Google Slides; all these elements are individual, they can be manipulated on their own, and you can pretty much go to town on your animations however you like in Google Slides; and that's pretty cool, that means we can we can pretty much move all this stuff around and add animations where needed.

The one thing to know is that the text layers are not editable; and the reason for that is they're being exported as SVG images, and that just means that you don't need to install fonts; fonts that are missing your slides are not going to look really wonky and totally swap to "Times New Roman" or whatever the fallback font might be, the the idea is to make them as close as possible to the original collaborative presentation designs from Figma; and of course that's just not going to work in some cases when you don't have certain fonts installed. If you're loading this up on a different computer, it's just not going to really work; for now, at least in this version of Pitchdeck, it will export these as images which are totally independent of each other, but unfortunately they can't be edited in Google Slides if you do need to change the text, but having said that if you do need to change the text, all you need to do is go back to Figma and re-run the Pitchdeck Figma plugin; re-export the PowerPoint file and and open it in Google Slides and you'll you'll have a brand new file with with all your updated text.

While it's unfortunate it's not able to be edit it in Google Slides at the moment, it's currently that way because the design is kind of taking precedence; making sure it renders exactly the same way as you intended from your Figma design once it gets into Google Slides is the top priority at the moment. That's basically what you can do there, everything else is as usual, you can basically use Google Slides as you already know how to or if you've used it before, all this is doing is essentially giving you the starting point of whatever you designed in Figma with your speaker notes is now in Google Slides automatically; you don't have to create all this or copy paste it from Figma or if you can or whatever, export your images and import them; none of that crazy stuff. You could have a few dozen slides and it'll import them all straight away, and and that's going to be really a huge time saver if you do want to use Google Slides to present something you've designed in Figma.

That's pretty much it; I'm going to jump out of Google Slides now. I think we've covered all the basics of what you can do in there, and you can obviously look up Google Slides tutorials if you want to get more into the animation side of things, but I won't be covering that in this Figma tutorial.

Back in Figma; as you can see here, it's just notifying us that the PowerPoint file was exported correctly. I can basically close out of that now, as I don't need to to run it again at the moment, but if I do need to reopen it later and export another PowerPoint file to open in Google Slides, all I need to do is go back over here on the right hand side column in Figma and you'll see a little pancake icon with the word "Pitchdeck" next to it; if you click on that, it will relaunch the Pitchdeck Figma plugin for you, and that just means you don't have to go to the right right click menu go to "plugins", go to "Pitchdeck Presentation Studio" and find it; you can just quickly relaunch it from the sidebar.

That's everything for today I hope this has been a valuable Figma tutorial if you've been wondering how to get your Figma collaborative presentation slide deck designs exported from Figma to Google Slides; this is the easiest way to do it, using the Pitchdeck Figma plugin. There'll be more Figma tutorials if you're interested in other Pitchdeck formats; if you go to our YouTube channel, you'll be able to follow along with other Figma tutorials, but for now this one is a complete guide to exporting your collaborative presentation slide deck designs from Figma to Google Slides with just a few clicks, as we just saw. Thank you as always for watching, and I'll be back very soon with even more Figma tutorials just like this one.

---

---
type: tutorial
title: How to export presentations from Figma to Keynote using Pitchdeck
date: 2020-05-21T00:00:00.000Z
---

# How to export presentations from Figma to Keynote using Pitchdeck



#### Video Transcript

Today, I'm going to be showing you how to export your collaborative presentation designs from Figma to Keynote (or Keynote file), that you'll be able to open on your computer and present as a real presentation outside of Figma based on your own slide deck designs.

To do that, we need to install a Figma plugin called "Pitchdeck". If you haven't already done that, you can do it by clicking on the top left Figma icon in the toolbar up here, and if you go to community or plugins and search for the term "pitchdeck", you'll see a result called "Pitchdeck Presentation Studio" pop-up. I've already got it installed and that's why I've got this little check mark here and it says "installed", but if you don't, this button on the right hand side will say "install", and if you click on that it'll change to look like mine, and once it does you'll be ready to go.

I've just jumped back into my Figma design, and this is just a collaborative presentation slide deck that I designed in Figma based on Dieter Rams' "10 principles for good design"; it's just 11 slides, and what I want to do today is take get slides outside of Figma to Keynote and make this into a real presentation that I can use. To do that we need to run the Figma plugin we just installed by right clicking anywhere, going to "plugins", and then clicking on "Pitchdeck Presentation Studio", and once you do that it's going to fire up the Figma plugin that we just installed, and it's going to look through all of your frames on the left hand side here, and it's going to treat each of those frames as an individual slide in your slide deck.

Make sure you're running this in a file that just contains the slides or the frames that you want in your deck; if you do have other frames in there, it's going to treat them as slides, too. Okay, it's gone through and it's looked at all of our frames, and you can see here that we've got a list of 11 frames from our collaborative presentation slide deck design, and they all look as you'd expect them to look.

The one thing to note is that the ordering is exactly reversed from the ordering that we see over here in the left-hand side in Figma; we can see at the bottom of this list we've got "intro" and then gradually working its way up from "principle one" to "ten", but in Figma, in the Pitchdeck Figma plugin here, you can see "intro" is actually coming first, and then it goes from "one" to "ten" after that; and the reason it does that is because typically when you're designing something like a pitch deck or a slide deck as a collaborative presentation in Figma, usually you'll create a slide and you'll be happy with that layout, and you might want to copy paste it and when you copy paste it, Figma will paste it next to the slide that you already had (which is great), but it also adds the new layer on top of any of the old layers that you already had; it effectively keeps layering upwards instead of in in the reverse.

So, Pitchdeck kind of accounts for this by default and assumes that you've done your design that way, and it'll order it in reverse to correct the order from start to finish; but having said that, if if you do need to re-order the slides or if you've done it a different way, you can very easily re-order them just by hovering on any of these "drag" icons in the slide panel on the left here in the Figma plugin, and if you click and drag you can simply just re-order those frames or those slides; you can see here we've just moved number one down to number four, I can move that back; you can move any of these around in any order and these are completely disconnected from your Figma design order. If you do want to re-order these slides just for your presentation export from Figma, you can feel free to do that and it won't mess around with your actual layer order in your original presentation design, that'll all be left alone, but the Pitchdeck Figma plugin will look at this order as the source of truth.

Now that we've got our slides, as I said, you've got a preview here with with all of the content of each of them. The thing that you want to have a look at underneath that preview is this little section called "speaker notes"; speaker notes is just a little area with a text box or a text area where you can actually write notes per slide which can be used when you're actually giving your presentation and these won't be shown to the audience at all; these are just used for your own use, if you're presenting on a second screen or you're using Keynote to present and you want to use the slides speaker notes feature, this will automatically be put into the speaker notes that you'll be able to see once you export our collaborative presentation from Figma to Keynote.

The other thing that you've probably noticed is that we have some animations on all of our layers here, and these are being controlled by this panel over here; however, it is worth noting that because we're exporting from Figma to Keynote in this Figma tutorial those animations won't be won't be seen in the in the Keynote presentation; if we open up our export formats here you can see that we've got two groups, we've got an "animated" group which just has the "Pitchdeck URL" export format, and we've got a "static" group which has things like "PDF", "PowerPoint" and "Keynote"; the animations will only be applied to this first format, which is the "Pitchdeck URL"; that is the default format for creating presentations, if you upload a presentation to that, it will give you a URL where you can actually present this deck, and you'll get all the animations, you'll get the slide notes, you'll get a remote control to control the slides from your phone if you want to; there's all these different features it offers. If you do want to know how that works, there's a separate Figma tutorial on our YouTube channel; you can check that out, it goes for about half an hour and it'll give you a deep dive and a full demo of how that works and what you can do with it.

For today, because we're going to be exporting our presentation design from Figma to Keynote, just be mindful that any animations you do apply here will not get carried across, and the reason for that is these are very specific web-based animations that don't have any relationship to Keynote; Keynote has very different animation styles that that don't map to these animations; they're just static when you export it, but you can apply animations once the deck is in Keynote if you'd like to, and I can show you how to do that in a second after we export this collaborative presentation design from Figma to Keynote; let's go ahead and do that now.

I'm happy with the ordering, I'm happy with the design, I've got all my speaker notes set; so, to export this presentation from Figma to Keynote, all we need to do is click on this little drop down up here; this is our export format selection, and if you go down to the bottom of the list where it says "Keynote file", click on that, and you'll see here that it's just changed the button to "Export Keynote". All we need to do is click on that button now, so I'll click on that, and what this is doing is it's generating an actual file that can be opened in Keynote natively outside of Figma. It's taking all your presentation designs and turning them into slides.

Okay, it's telling us our presentation Keynote is ready, it's letting us save it, and by default it just uses the the document title from your Figma file; I'm just going to leave that as is and click "Save" to my desktop. It's telling me that I can save the the Keynote file to a computer and open it in Keynote or I can share it via email or Slack or anything else I prefer; in this case I am going to open it on my on my computer. To do this, you can just double click on the file that you just exported, or you could open up Keynote and open it manually if you wanted to, just by going to "File", "Open", and then double clicking on the file we just exported.

Now I'm in Keynote after double clicking on the file that we just exported from Figma; this is a slide deck presentation that we just we just designed in Figma, and as you can see, all of the slides are there, the order is the same as we expected, and all of these elements are real elements that we can click on and move around, they all change, the background property has already been set to white, but we can change that if we wanted to, and that will show through with all of the the other layers that we've got.

As I mentioned before with the with the speaker notes, if you go to "view" and then click on "show presenter notes", you can see here, it's just revealedthe presenter notes or speaker notes that we added in Figma, and those have been carried across to our Keynote presentation; whenever I change a slide you can see down here that those are being pulled in, and I can edit those of course, or change them, now that we're in Keynote; and that's what it looks like.

If you do need to apply animations; as I said, they don't get carried across from Figma into Keynote, they only get carried across into the Pitchdeck web URL format in the other tutorial; but if you do want to add animations to these slides, now that you've got them in Keynote, you can totally do that as well. The way you can do that is by going to "animate", just in the top right here, clicking on a layer that you want to apply an animation to, clicking on "add an effect" and then you get this drop down here where you can add different effects. If I do a blur effect that's going to blur that in for me; I can choose this other one; that's that's quite a crazy animation but you can totally do that as well, and you can keep changing those of course. I don't know what that one does; oh yeah, it's a lens flare; you can play around with these of course, but the neat thing is that all of your assets from Figma have now been migrated into Keynote, and you can play around with these, you can move them, you can scale them of course, and pretty much do whatever you want. Of course, you can present that as well by clicking on the "play" icon and doing it that way.

That's essentially it; it's really simple and really quick to do this, and I think the cool thing is if you're designing these presentations collaboratively in Figma, you get all the benefits of being able to design collaborative presentations in a tool that you really like, without having to just jump straight into Keynote in an isolated way; you can keep Figma as your source of truth for your collaborative presentation slide deck designs and whenever you do need to export your presentation from Figma to Keynote, you can simply re-run the Pitchdeck plugin as many times as you want, keep Figma as a source of truth; and keep re-exporting to Keynote whenever you need to.

You can relaunch the Pitchdeck Figma plugin really quickly by just going over to the right hand side, and you'll see the little pancake icon with "Pitchdeck" next to it; if you click on that, that will relaunch the Figma plugin straight away; and that way you don't have to go to right click, go to "plugins", and find it in there, you can just do it with one click on the right hand side there.

I hope that's been helpful for anybody who's been wondering if they can export their collaborative presentation designs from Figma to Keynote; and the answer is you can, but at the moment the only way you can do it is by using the Pitchdeck Figma plugin that we just went through. I hope that helps you or your team with anything you're working on, or if you're just trying to solve the Figma to Keynote problem that you've been having, this is definitely the way to go about it. Thank you again for watching, as always, and I'll be back very soon with more Figma tutorials just like this one.

---

---
type: tutorial
title: How to export presentations from Figma to PDF using Pitchdeck
date: 2020-05-21T00:00:00.000Z
---

# How to export presentations from Figma to PDF using Pitchdeck



#### Video Transcript

Today, I'm going to be showing you how to export your collaborative presentation slide designs from Figma into a PDF pitch deck or slide deck.

To do that, we just need to install a Figma plugin called "Pitchdeck" and if you haven't already done that, you can go to the top left of your Figma app and click on the little Figma icon, and if you go to "Community" or "plugins and search for the term "Pitchdeck"; underneath the plugins tab you'll see a result pop-up that is called "Pitchdeck Presentation Studio". If you haven't already installed it, you can go over to the right hand side where you'll see an "install" button, and if you click on that install button it'll change to look something like mine, where it's got a little checkmark and says "installed" next to it; once it looks like that, then we're ready to go back to our project and export these collaborative presentation designs from Figma to PDF.

Okay, I'm just using a design that I made up for Dieter Rams' "Ten principles for good design". All I've done here is create a whole bunch of frames, currently at 1920 by 1080 resolution, but you can make those whatever you want; and what I'm just going to do is run the Figma plugin that we just installed. If you go to right click and then go to "plugins" and then just go down to "Pitchdeck Presentation Studio" and click on that, that's just going to fire up the Figma plugin that we just installed a moment ago, and what it's doing now is; it's looking through all of our frames and it's essentially converting those into our slides; Pitchdeck is going to interpret each frame as a single slide; whatever you've got at your top level of the page in terms of frames, that is what Pitchdeck is going to be looking for and treating each of those frames as a single slide.

Now that we've got it loaded up, you can see on the left here that we've got 11 slides loaded in that matches up exactly with what we would expect to see in our design; we've got the "ten principles" plus the intro, and the first thing you might notice is these frames are actually in a different order; the ones that we can see in the plugin and the reason for that is when you copy and paste frames in Figma when you're designing something, like when I was designing this deck, whenever I was happy with the first frame what I would do is I get the layout right, and then I would copy and paste the frame, and it would put it next to the existing frame (which is what I wanted), but what it also does is every time I paste a frame in, it incrementally adds a new frame above the one that I just created; and instead of going from top to bottom, Figma orders the frames from bottom to top.

Knowing that's probably going to be the case for you as well, I made sure that the Pitchdeck plugin by default will simply reverse the frame order as the initial load order, hopefully just to make it a bit easier for you designing your deck. However, if you haven't done it that way or if you just simply want to reorder the deck, you can do that by clicking and dragging on any of these little handles on the left here next to any of these slides, and you can see there I've just dragged that up to the top and then I let go, and that'll reorder the frame for me.

I'll give you an example of exporting from Figma to PDF and then I'll reorder the frames and show you what that looks like if I want to save it out again. Just so you can get a bit of an idea of what that looks like; to export this slide deck from Figma to a PDF file, all we need to do is go over to the top here where we've got our formats and where it says "Pitchdeck URL", I'm just going to click on that and you can see we've got a few different formats here we've got a "Pitchdeck URL", which is the default format, and then underneath the static group we've got "PDF file", "PowerPoint file", "Keynote file", and of course for this presentation of this tutorial we just want to select "PDF file".

I think it's just worth touching on, you've probably noticed that these slides are animating, and the reason for that is over here in the right-hand side we do have access to all the elements inside of our frames inside of our slides and we can actually apply animations to each of those; I've already done that and Pitchdeck has saved those animation settings for me. However, because we're exporting to a PDF file, PDF does not support any sort of animation; it's totally flat. Exporting this deck to a PDF just means we probably want to send it to either a stakeholder or email it to somebody, or maybe get somebody to review the deck content itself.

There's a variety of reasons why you might want a PDF deck, or just ease of use, but it's worth noting that these animations only get applied to the "Pitchdeck URL" export format; and I won't be covering that in this Figma tutorial, but if you are interested in that, I've got another Figma tutorial up on our YouTube channel which goes for about half an hour and it does a really deep dive into exactly how those all this animation stuff works; and then it shows you how to export that to a presentation URL and then it gives you a complete demo of what that actually looks like when you export it; you can do all sorts of cool things, like use your phone as a remote control, you can use laser pointers, you get your your slide notes in there, it's pretty neat; but for this tutorial I'm just going to show you how to export your slide deck from Figma to PDF; so let's do that now.

I've selected the "PDF file" format and the buttons change to say "Export PDF"; I'm going to click on that. Now, what that is going to do is it's going to take all these frames, it's going to look at the order that we put them in, and it's going to convert all of those into a single merged PDF deck with all of these frames in it, and this deck is going to be compressed as well; whereas a typical PDF from Figma can be quite large, we're going to be exporting it through Pitchdeck which actually shrinks the size and keeps the quality.

We've we've got it ready now, it's telling us that our PDF file is ready, we can save the generated PDF to the computer now; we've got a save dialog that's just popped up, and by default it uses the document name; whatever you've called your Figma project, that will get auto populated in the save field with today's date as well (date and time), just in case you're exporting a bunch of these and need to timestamp them, of course you can remove that; if you wanted to remove that you can simply do that there. I'm just going to export that and I'll just do "original" at the end just add a little bit of a version to it and then when you're ready with that you can click on "Save". I'm just going to save it to my desktop, if I go to my desktop now in the finder window, you can see here that it's saved to my desktop as "Dieter Rams Slides Example Original dot PDF" and in this case I'm just going to use the spacebar to open that up, and that will open up the Mac preview for this PDF.

You can see here, it's rendered it out beautifully, this is all vector text, we've got our image looking very nice, and I can click through that or slide through it and all of our slides are here as you'd expect. It's looking really, really nice; we can of course also open that up in "preview" the full one, but for now I'm just going to use the kind of miniature iOS preview to navigate through; you can go up and down on that but of course you could also open this up full screen and use it as an actual presentation, too, which would be pretty neat.

I'm just going to minimize that again, and as mentioned, I'm going to relaunch the Pitchdeck Figma plugin and reorder those frames to see what that looks like. To relaunch the plugin you don't need to right-click and go to "plugins" again; once you've run it once in a project, if you go to the right-hand side of the Figma window you'll see a little column with a title called "Plugin", and if you look for the little pancake icon with the word "Pitchdeck" next to it, and click on that; clicking on that will immediately re-run the Figma plugin without you having to go into the right-click menu again and browsing for that plugin, especially if you have a lot of Figma plugins that can take some time; that's the easiest way to relaunch it is just on the side there.

Okay, it's opened it back up. It's currently reloading the frames, and it's doing this because you may have made some changes to to your frames. If you have made changes to the frames while the plugin is already open, this little "refresh" icon here will actually also refresh these these frames and refresh the slides, and get a fresh copy of all the positioning, and all the images and text, but while it's running, it'll keep a sort of a cached version of it; so you don't have to keep going back and forth and refreshing it every time just to make usual changes.

Now that we've tried exporting the deck with the default ordering, I'm just going to quickly show you how to change that ordering and get a different export order for your PDF deck in Figma. I'm going to leave the intro the same, this is a bit of a weird deck to reorder because the slides already have numbers on them, but let's just say for argument's sake that number two should actually be much further down and actually number nine or principle 9, you want to actually bring up to the top for some reason. We also want to bring principle 10 up to the top and and maybe even move the intro underneath that; now we've got some very strange ordering where seemingly the last slide is the first one followed by the intro and then kind of just goes a bit all over the place, but that's the ordering that we want, maybe we've got a crazy art director who wants to go a bit a bit Pulp Fiction with it and rearrange all the slides. We can do that and you can see there it's just really, really smooth and easy to reorder those frames, and as I said before that will not impact the ordering of your Figma file; that will remain intact, this is purely just to tell Pitchdeck what ordering you want these slides to be in, and that will get saved between the plugin running as well; if you set this order now and close the Figma plugin when you reopen it this order will stay the same; you don't have to keep reordering it, it will remember that for you.

As before, to export this collaborative presentation from Figma to PDF we just need to go to the export format go down to "PDF file" click on that and "Export PDF" has been updated in the button; if we click on that button now, exactly the same as last time it's going to go through those frames, convert them into slides merge them into a PDF, compress the PDF, and give you a really nice output file. Once it's exports we can also have a look at that file size to compare that as well; I'm just going to leave the file name default this time to show you what that looks like; I'm just going to click "Save", go back to finder and now you can see here we've got our new PDF file; where slide 10 for some reason is the first one because that's the way we wanted it, followed by the intro and followed by 9, followed by 1, 3, 4, 5, 6, 7, 8 and then the very last one is 2 as we specified before.

That's looking really good. As I mentioned briefly, the file size is 876 kilobytes; it's less than less than a megabyte, and that is perfect for sending via an email or sending over Slack; it's just a really lightweight PDF. As I mentioned, if you export that directly from Figma as a single PDF the file size will be much, much, much bigger; it's just the way that Figma saves PDFs by default but they've been optimized in Pitchdeck to make it optimized for portability. Essentially, being able to send it using a very small file size of email or yes Slack or whatever you want to use, cloud storage to transfer that PDF. That's our two PDFs, look at the original one with the original order and the modified order to show you how that works; but both looking really, really crisp and and really nice each time. I think if you need PDFs of your collaborative presentation deck then you'd be very happy with those.

This is just confirming that the PDF was saved we don't need that anymore; so, we can close the plugin and that's all there is to it; we we don't need to do anything else, those PDFs are ready to go, and as seen before, the original Figma file is completely unchanged, it's still the source of truth; the ordering is still the same, but we can of course rerun that plugin and see that ordering that we just saved. I'll just do that now is kind of a last example and then we can we can part ways; you can try this yourself, once again it's just loading those frames and turning them into slides inside of Pitchdeck, and once that loads we should see all of the layers that we just had in the ordering that we just specified before closing the Figma plugin. You can see here now, it's defaulted to 10 being the first slide followed by 2 and 9; it's kept our ordering from before, and again if we wanted to rearrange that, it's very simple; just slide click and drag and slide and those will be rearranged for you; and there we go, that's back to the original order. You could obviously export that again, but I've already got two copies of the PDF and and I'm very happy with them.

That's it for today; if you are interested in exporting to these other formats that I mentioned before, or interested in the animations and how to create a an animated collaborative presentation from your deck, maybe after you've done the PDF version and you want to do a bit of a fancier one. please check out the other Figma tutorials that are on our YouTube channel and you'll be able to find very in-depth Pitchdeck Figma plugin tutorials on how to do any of these other formats as well.

Thank you as always for watching, and we'll be back soon with more Figma tutorials just like this one. I hope this has helped you with any problems that you've been having in your team, or if you've just been wondering how to export your slide decks from Figma to PDF; then I hope this has helped and and as always, working with Figma and being able to use it as a tool where everyone can use it, as opposed to other tools where it's very siloed; it's just awesome that you can create these collaborative presentations in Figma and export them to all these different presentation formats; you basically get that collaboration baked in by defaults and then the Pitchdeck Figma plugin will really help augment that collaborative presentation design work, and and serve as a way to get it out into multiple formats, like the PDF file we just we just had a look at.

I'll leave you with that; until the next, time thank you again for watching, and we'll speak to you again soon.

---

---
type: tutorial
title: How to export presentations from Figma to PowerPoint using Pitchdeck
date: 2020-05-21T00:00:00.000Z
---

# How to export presentations from Figma to PowerPoint using Pitchdeck



#### Video Transcript

Today, I'm going to be showing you how to export your collaborative presentation slide designs from Figma to PowerPoint; or to a PowerPoint file, I should say.

To do that, we need to install a Figma plugin called Pitchdeck. If you haven't already done that, you can do it by clicking on the top left Figma icon in the toolbar up here, and if you go to community or plugins and search for the term "pitchdeck", you'll see a result called "Pitchdeck Presentation Studio" pop-up. I've already got it installed and that's why I've got this little check mark here and it says "installed", but if you don't, this button on the right hand side will say "install", and if you click on that it'll change to look like mine, and once it does you'll be ready to go.

Now we can switch back into our Figma project today I'm just using Figma file that I designed as a slide deck for Dieter Rams "Ten principles for good design" to a deck with eleven designs, and essentially I want to take these slides out of Figma and I want to create a PowerPoint presentation that I can use in Microsoft PowerPoint.

To do that, we can run the Figma plugin we just installed. If you right-click anywhere and go to "plugins" and then go down to "Pitchdeck Presentation Studio" and click on that, that is just going to fire up the Figma plugin we just installed the, Pitchdeck Figma plugin; and once it loads, you'll be able to see all of the frames from your Figma file. All of these frames on the left here will get translated into slides inside of the Pitchdeck Figma plugin; it's currently looking through all the frames, looking through all the layers, the text layers, and image layers, and it's constructing them into slides that we'll be able to use in just a moment.

Now that it's loaded all of our slides, you can see here that the slides have been mirrored to our designs. If we click through here, you can see we've got all of our slides as we would expect from our designs above. In the left hand side, you can see that we've got a list of all of our layers and those are being mirrored from the Figma layers in the Figma layers panel on the left here; you can see here we've got "intro", "principle one", "principle two", and that's "intro", "principle one", principle two; but you'll notice that the layer order has been exactly reversed, and the reason for that is (maybe this is just me), but when I'm designing things in Figma and when I was designing this collaborative presentation, I would design this slide for example, and when I was happy with that, I would copy/paste that slide or that frame, and Figma would put it right next to it and then I could just edit the content and keep the the layer pretty much as it is; but in Figma, when you paste, essentially the layers each layer on top of each other in a reverse order; whenever you paste something, the layer will be moved to the top of the layer's order in the left-hand side here.

What Pitchdeck does is, it automatically reverses those layers by default and assumes that you've been copy pasting your frames; that means that the order is actually going from bottom to top in terms of this layer order here, and that's why we've got the correct order that would expect here, however if that doesn't suit you, what you can do is you can reorder these frames by clicking and dragging on the little "drag" icons next to any of the slides in the Pitchdeck Figma plugin. All I did there was just hover over the icon and then I'll get a little grabbing icon, if I click that, holding the mouse, and then move it up or down I can rearrange these frames super easily and that does not impact anything that's going on in the Figma file; this is just related to the plugin. Editing this layer order here won't mess up your designs or change anything in the original design, it'll just tell Pitchdeck that this is the order that you want these frames in; for now I'm just going to leave it as is, and keep the intro where it should be.

The other thing you'll notice is this little preview section here; this is an exact one-for-one with our slides, and what it's going to look like when it gets exported. The titles are up here; and the other thing to note is underneath the preview we've got this "speaker notes" section and this is just a text field, a text area and you can type in any content that you want there; you can put bullet points in there, you can put a little paragraph like this one, you can just put a little sentence, or just a note for yourself; and these are the notes that will not be shown to the audience and won't be shown inside of the presentation content, these are just for you as a speaker or whoever is presenting this presentation; if you need to add them you can add different notes to every slide and those will be available to you once we export our collaborative presentation very shortly.

Now that I'm pretty happy with the speaker notes, I'm happy with the ordering, you'll notice here that we've got these animations set on all of the layers; by default those set to "no animation"; you can see here we've got this "no animation" setting, those are all defaulted to no animation, but I've already applied some animations which get saved between opening the plugin; however for this particular Figma tutorial, because we're going to be exporting to a PowerPoint file, these animations unfortunately don't get brought across into PowerPoint. These are primarily used for if you're uploading the presentation to the Pitchdeck URL; we can see here if we open up the export formats just in the top menu bar here by clicking on the select box we've got two groups we've got "animated" and underneath that is the Pitchdeck URL option, which we've got selected by default, and then we've got "static" format, we've got "PDF file", "PowerPoint file" and "Keynote file"; that means that because it's static, all of these animation settings do not get carried over to any of these static formats, they'll only be carried over to the Pitchdeck URL format.

That's just worth keeping in mind in case you're wondering why you've animated these things but you're not getting animations in your PDF file, PowerPoint or Keynote; these are just not supported in those formats because we're using very specific and custom animations that will only work in a web-based environment, like the Pitchdeck one.

If you do want to see how that works, I've got another Figma tutorial up on our YouTube channel, and you can get a really deep dive; it goes for about 30 minutes and goes through all of the details you need to know about animations and takes you through the upload process and shows you what a presentation actually looks like when you do that option, but for today we just want to go from Figma to PowerPoint.

In this case, I'm just going to open up that options panel go down to the "PowerPoint file" option and click on that, and when I select that you'll see that it's changed up here, and it's also changed my button to say "Export PowerPoint"; because I'm ready to go and the design from Figma is looking really good, I want to get it out of Figma to PowerPoint; I'm just going to go ahead and click on "Export PowerPoint", and what this is going to do is it's going to generate slides for a PowerPoint file; that's a native PowerPoint file that's going to come out of Figma in just a moment. It's going to take all of our Figma designs and put them into a PowerPoint presentation.

You can see here it's just prompted me to save a file; so I'm just going to save that to the desktop. By default it just names it whatever your Figma file Figma document is called, but you can obviously change that if you want to; I can just rename that and you can see here it's just changed it for me to look like the way I want. I'm just going to click "Save", and as you can see here it's just confirming that our PowerPoint file is ready and we're able to open this in either PowerPoint and Google Slides or Apple Keynote, or just share it with somebody.

Now that that's been saved I can open up finder and go to my desktop and you can see right here I've got my PowerPoint file which I can double click; I don't have Microsoft PowerPoint on my computer but I do have Apple Keynote and this PowerPoint file will open up in that just fine as well. There we go; that's Apple Keynote running now, and you can see here we've got all of our slides directly from Figma, and that's all of them as would expect; we've got background colors set to white, we could obviously change that in here if we want to, and you can see all of the other elements still say the same; I'll set that back to white now. We can move around our layers if we'd like to, and the other neat thing is if we go to open up our presentation notes, if you just go to "view" and then go to "show presenter notes" (this might be different in PowerPoint), but if I click on that, you can see here that the text that we added in Figma has been carried over into our speaker notes, and I can edit those if I want to, or I can get rid of some of them and remove those, but that's all been loaded in; that's really neat.

The other thing we can do is, because these are just images, we can add effects to them if we like, we can change opacities, and do all the normal stuff you'd want, like add animations. We could add a "blur" effect there and that would work; all of the layers from Figma have essentially been imported one-for-one into a PowerPoint file; you could open this up in Microsoft PowerPoint (as I said I'm just using Apple Keynote at the moment to give you an idea of it), but this is a PowerPoint file that will open in PowerPoint, Keynote or Google Slides, if you prefer.

That's that's all there is to. It's very straightforward as you saw; it only took you know maybe five to ten seconds to export our collaborative presentation from Figma to PowerPoint; it's very very quick.

I'm just going to close it off now, but if you need to make changes to it, you can you can either make those changes in PowerPoint, or if you prefer to leave Figma as your source of truth, you can just make your updates in the Figma project file and rerun the Pitchdeck Figma plugin, which you can do just by going over to the right hand side here, under "plugin", and clicking on the "Pitchdeck" little pancake icon, and that will rerun the Figma plugin. You can just keep exporting your collaborative presentation designs from Figma to PowerPoint from as many times as you want, and it's just going to keep doing it as many times as you need to; that way you can keep your collaborative presentation design in Figma as your source of truth for your slides, along with your design elements and your components, and just keep exporting it from Figma to PowerPoint as needed.

I hope that's been helpful, if you've been wondering how to get your slides out of Figma into PowerPoint, this is the way that you can you can go about doing that. I hope that it helps you or your team with something that you're working on or if you've been trying to solve this problem for yourself. Thank you as always for watching, and we'll be back very soon with more Figma tutorials for you to check out.

---

---
type: article
title: Agile is for losers
date: 2020-05-07T00:00:00.000Z
---

# Agile is for losers



### On (Agency) Agile™

In the same way that smashed avocado on toast is Australia's biggest innovation in the last decade, the biggest "innovation" in digital agencies in that the same time period has been stealing and bastardizing Agile, mashing it's incompatible principles into the old school agency model. Like the quote from Tyler Durden in Fight Club, "Sticking feathers up your butt, does not make you a chicken." or, in other words, "Running waterfall projects with standups does not make you _Agile_".

While Agile itself isn't new, the way agencies typically discover and implement it is analogous to other industries attempting decade long "digital transformation" projects without really knowing what they're talking about or why they're doing it.

### First contact (2011)

My very first exposure to the existence of Agile was back in 2011, when I started receiving spam emails at work, which offered 3 day courses to learn about something called "Scrum", that would apparently solve every problem known to man. I recall this because my co-workers received the same emails, and we would joke about who would fall for this nonsense.

Fast forward about a year, and one of those co-workers who was formerly a backend developer, who literally transitioned overnight to be a project manager. Their first order of business as the newly appointed project manager was to implement Agile/Scrum into the agency (the entire company consisted of less than 6 people at the time, including the owner and myself).

I thought it was a joke, so I asked:

> "Is this a joke?"

To which they replied:

> "No, it's not a joke. I read some articles online about it last night and this is what we're going to be doing now."

I've since come to learn that it still doesn't take much more than this level of research or training to proclaim that you're some kind of Scrum master, or project manager who knows "Agile".

This began to plant the seeds of what I would personally see to evolve into one of the most destructive and misguided trends that the agency landscape has adopted since it tried (and failed, miserably) to "do SEO".

### The messy middle (2014)

After the somewhat harmless attempts I saw at my first agency, I finally joined my first real Agile project team in 2014, while working as a frontend developer on the rebuild of a large website for a well known brand. Unlike my previous exposure to Agile, this was a sizeable team of supposed expert consultants who would work on-site with us every day for 4 months. We had: 1 project manager, 2 scrum masters, 2 full-time producers, 3 account mangers and half a dozen backend developers (also consultants).

On the flip side, to handle the entire design and front end: it was just 2 frontend developers (including myself), 1 tech lead and _1_ designer!

This project was a fixed cost, fixed scope with a fixed deadline - and not one of those "fake deadlines" - if we didn't launch this new site in 4 months, the current live site was going to be taken offline by the previous agency, due to their contract and hosting ending.

We worked in 2 week sprints, did all the typical "ceremonies", and had 360 degrees of our project room covered in a post-it note kanban matrix, which for some reason needed to physically mirror what we already had in 2 different web based project management tools (JIRA _and_ Asana). I guess that's why we needed 2 scrum masters, one to continually keep the physical post-it notes in sync with digital ones in JIRA and Asana.

However, it wasn't long before I started to see some major red flags; namely, that any failure in meeting the amount of work the developers on the project were meant to finish was received with positivity and an "Okay, no worries, we'll just push that over into the next sprint".

When it came time for the retrospective at the end of every fortnight, we brought up all the issues we faced. Ever time it was the same issues, with zero change observed or implemented by anyone leading the team. It got to the point when we started filling the "What worked?" column of the retro whiteboard with post-it notes simply saying: "Literally nothing." and under the "What didn't work?" column saying: "Literally everything." The entire thing really felt like a twisted inside joke, except for the fact that clearly nobody running the show was actually in on it.

This trend continued for months into the project, until it got to the point where we had pushed so much out into future sprints and had been _so_ forgivingly slow, that the (fixed) deadline of getting the site live was now a couple of weeks away and the entire project was _nowhere near_ being completed.

The project manager's answer to this, in the few remaining weeks of the project was getting all the developers to just work late every night, typically until around midnight, but sometimes until 5:00am. I personally slept at the office a few times in this period. We were brought energy drinks, candy and other trash to fuel us through this trek into the the failed Agile abyss. When this still wasn't getting us far enough, all of us coming in and working on the remaining weekends was when we _really_ hit rock bottom.

At this point, anything related to "Agile" had long since deserted us and now we were truly in the thick of it. When the scrum masters and project managers finally just got out of the way, and literally stopped coming in (allowing the people actually _doing_ the work to figure it out), we were able to do more work in the final 3 weeks than we did in the first 3 months.

We ended up getting the site live by the skin of our teeth, but the development team or the site was certainly not in the best shape after that final ordeal, and because it had to be rushed, the next _3 years_ were spent cleaning up the mess that was caused in that initial 3 months of carnage.

In Scrum, no one can hear you scream...

### Today (2020)

Since then, I have been involved in many, many other Agile projects/teams and talked to countless developer/designer friends and acquaintances at other agencies and companies that also try to use "Agile" as the magic bullet for their projects.

Without fail, every _single_ story I have seen and heard about these projects has resulted in a disaster; to the point where I will accurately guess exactly how a new story ends before they've even finished telling it.

In agencies specifically, it's often a predictable and totally preventable recipe for disaster.

The _reality_ is that agency projects tend to have 3 immutable properties:

1. A fixed deadline
2. (which results in) a fixed scope
3. (which results in) a fixed budget

Yet, in _practice_, because they decide to subscribe to Agile propaganda without giving it more than 3 seconds of critical thought, they end up running the project in a way that is totally incompatible with the 3 truths above.

There seems to be a conscious delusion to ignore some things, and still adopt Agile principles. For example, "welcome changing requirements, even late in development" is incompatible with every single one of the truths above. If you were to do this, it means that the original fixed deadline now needs to be flexible and extended, the fixed scope now needs to change and increase, and the fixed budget will not magically cover the additional time required to implement and test all these changes.

This seems so obvious at face value, yet the narrative I see and hear over and over again says otherwise. Typically, changing requirements (even late in development) _will_ be welcomed, but none of the truths above are changed. This results in that perfect storm, where before you know it, the project has either reached its deadline, budget (or both) and the scope, which has gradually become much bigger in that fantastic place known as the "backlog" can not be fulfilled.

### The people who came up with it don't like it

In his 2014 article, [Agile is Dead (Long Live Agility)](https://pragdave.me/blog/2014/03/04/time-to-kill-agile.html), Dave Thomas wrote an article about how off-track the initial idea had become.

> The word “agile” has been subverted to the point where it is effectively meaningless, and what passes for an agile community seems to be largely an arena for consultants and vendors to hawk services and products.

He gave basic instructions to do something in an "agile fashion":

1. Find out where you are
2. Take a small step towards your goal
3. Adjust your understanding based on what you learned
4. Repeat

Also including a single line on "how to do it":

"When faced with two or more alternatives that deliver roughly the same value, take the path that makes future change easier."

> And that’s it. Those four lines and one practice encompass everything there is to know about effective software development.

Likewise, Martin Fowler wrote an article called [The State of Agile Software in 2018](https://martinfowler.com/articles/agile-aus-2018.html), where he also called out the sad truth that while people think they're "Agile", it's actually a cartoon version of it that actually goes _against_ the original values and principles.

> On the surface, the world of agile software development is bright, since it is now mainstream. But the reality is troubling, because much of what is done is faux-agile, disregarding agile's values and principles.

Others involved in coming up with "The Manifesto for Agile Software Development" (the original title, which was subverted to "The Agile Manifesto" and shoehorned this approach for developing software into doing _everything_) have also come out to disapprove of what it has become.

### The people doing the work don't like it

There are some principles of Agile that I think do make sense; one of them being "Build projects around motivated individuals. Give them the environment and support they need, and trust them to get the job done.". Ironically, this is the first principle to get thrown out the window when an agency Agile project begins, when the project managers dictate exactly how things are going to go down, and do not trust anyone to do anything without them setting up how it's to be done.

For some reason "Agile" automatically invokes "Scrum"; in other words, if you're going to be "Agile", your team is definitely going to adopt "Scrum" as the way to implement the principles of Agile - this happens so reliably that I truly believe most people (those running the projects _and_ those actually doing the work) don't even understand the difference between these two terms, because they have become one and the same, when in reality, they are mutually exclusive.

There is simply no quicker way to de-motivate and kill the soul of an already great project team (ie. designers, developers, creatives) than trying and impose top-down micromanagement garbage like "one-size-fits-all" approaches to implementing Agile principles with a pre-defined framework like Scrum.

The best people are self-managing, they don't need or want their tasks broken down into epics, stories, tasks, sub-tasks. That's not how the creative process operates, and by thinking it is, you're removing the magic of actually doing the work.

When I observe that my co-workers are spending more than 50% of their time in meetings or Agile ceremonies instead of actually doing their work, that's a huge red flag.

### The "Spotify Model" trap

After the initial Agile fever dream started to wear off, it was interesting to see a bunch of agencies start talking about adopting "The Spotify Model", which is essentially an overly complex approach of structuring team that was tried at Spotify. The ironic part is that it _didn't work_ at Spotify; something they've tried to tell the world multiple times since then, but it was too late. Everyone hears about "The Spotify Model" and probably know it's something vaguely related to "tribes", and if Spotify is doing it, then it _must_ be the answer to all their problems, too.

Unfortunately, this doesn't work. Even if the "The Spotify Model" worked amazingly for Spotify (which it did not in reality), the chances of being able to copy that 1:1 into an agency environment (which is fundamentally different from a company like Spotify in terms of size, function and customer base) are so low, that it's not worth upending everything to do so.

### What's "the answer", then?

"The answer" implies that there's a single way of structuring teams or working together that will fix all your problems overnight; that is the promise of these crazy Agile/Scrum bootcamps that will make you an "expert" on this over a weekend retreat, and be able to force a foreign predefined set of rules into a local team, and just assume the patient won't reject the transplant.

Yes, I've been railing on Agile like there's no tomorrow, so what's the alternative? I would say it's probably thinking for yourself instead of looking around at what everyone else is doing is the "boring" but more true approach to answering this question.

Companies like Basecamp have come up with their own ways of working internally (which they released as the free book called [Shape Up](https://basecamp.com/shapeup)). They reject things like the 2 week sprint in favour of a 6 week development cycle, punctuated with a 2 week period at the end of that cycle to do whatever you want. Again, this is not going to work 100% for a digital agency, for example; but you could cherry pick one or more of the ideas they have that _would_ make sense to try out.

### The "South Park model" works, but you shouldn't copy it

On the other end of the scale; if you look at the production process that goes into creating an episode of South Park; where they go from having a blank piece of paper, to _airing_ an episode in 6 days... do you think they're using "Agile" or "Scrum"? 2 week sprints? No, of course not. They don't even have enough time for a _single_ 2 week sprint when the entire episode needs to be written, animated, voiced and shipped in 6 days straight.

Just because it works for Matt and Trey and their small-ish team, does not mean that this will automatically translate over to software development. Again, there are _lessons_ you could cherry pick from their approach (eg. "done is better than perfect"), but adopting a "6 days to production" for your web projects is going to have some fairly predictable downsides.

### Death to Agile™

Every developer (and now that they've been roped in; designer) I know is waiting patiently for everyone else to realise that trying to blindly force Agile™ into an agency environment doesn't work, and how much they hate it.

I believe that on a long enough timeline, the wake of destruction that has come out the other end of large Agile projects will eventually render blindly subscribing to the cult of Agile unsustainable; in terms of financial losses, trust from clients, morale or teams and the predictable track record of failed projects.

Most of these failures never see the light of day in the public eye, usually restricted to private conversations with fellow designers/developers in the agency world where "war stories" are shared; however, I'll leave you with a recent public failure, where an Agile website project that cost _tens of millions_ of dollars went so sideways that the agency responsible for delivering the site [is now being sued](https://www.henricodolfing.com/2019/10/case-study-hertz-accenture-website.html) by their client. These stories happen all the time, but don't get made public, for obvious reasons.

So, before adopting "Agile" or predefined methodoligies like Scrum or the "The [insert X company here] method", it's worth being a bit more introspective and actually look at your own team/company and figure out what will work best for _you_ (not another company you're trying to emulate).

---

---
type: tutorial
title: How to compare Webflow builds with Figma designs using Pixelay
date: 2020-05-05T00:00:00.000Z
---

# How to compare Webflow builds with Figma designs using Pixelay



#### Video Transcript

Today, I'm going to be showing you how to compare your designs in Figma with a web build implementation that you've created in the Webflow service.

The first thing we need to do is install a Figma plugin called Pixelay. If you haven't already done so, you can go to the top toolbar and click on the little Figma icon, go down to "Community", then click on the search bar and type in the word "pixelay"; and you'll see a result come up saying "Pixelay Development Comparison", and what you want to do is click on the "install" button on the right hand side and then just click "install plugin", and that will change it to say "installed" with a little check box. Once you've done that, you're ready to go. You can swap back into your Figma file with your own designs in it, and we can get started.

In this case I'm just using an existing design from the Webflow website, and to compare this with the development build inside of Webflow we need to run the Pixelay Figma plugin first; what we can do is we can right click anywhere go down to plugins and then go down to Pixelay development comparison and click on that and that's just going to fire up the Figma plugin we just installed.

Once that loads you'll see that we've got a few things; a text input up the top, these two frames here, which are mirroring the two frames that I've got in my Figma design; I've got the "small" frame and the "large" frame; and you can also see that the button is grayed out, and it's grayed out because we need to put in a URL for this to point to; and the URL that we put in here will be the the URL that the designs get compared to, where we can check if the original designs are matching up with the development implementation. Typically, that would be a "localhost" URL, Pixelay is designed to b really good with local hosts or local development environments, but if we do try and do Webflow URL for now; I've just put in a demo Webflow URL in there, and then I'm just selecting both of my frames to be compared and then I click on "Compare to designs". What this is doing is it's just taking these two frames, uploading them, and it's going to give me a URL in a moment that I can use.

The Pixelay comparison page is ready; and to compare these designs we need to open this link in our browser; I can either click on this to copy the URL, or I can just click on the open a link. This is loading up the Pixelay web app, and you can see here immediately that something has gone wrong; you can see that we've got our Figma design, we can see the Figma design just just fine, but we can't see our web build that we were after. If I just move these controls up a little bit; if I click on the Figma mode which reveals the original Figma files that we're comparing, then if I click on the development mode, you can see we've got this very unhappy face here; the reason for that is we're basically loading these URLs in iFrames, and because we're trying to load it in from a the Webflow domain, Webflow has a security policy set which does not allow you to embed their iFrames on external websites. They have a number of reasons for doing this, I believe one of them is they just don't want people to embed iFrames on a custom domain without paying for a plan, that's potentially one, and there might be some other reasons as well. The bottom line is, we unfortunately can't load in URLs directly from Webflow, but there is a workaround that I'm going to show you right now.

I'm just going to close out of this, and close out of Pixelay. I'm going to go to the the Webflow site; underneath Webflow, in the Webflow University section, which is like their tutorials; there's a tutorial called "Code export"; if you search for that, it's going to take you to a page which will explain how you can export the HTML, CSS, images and JavaScript from your Webflow project. Just be mindful that this is only available as a feature on paid Webflow plans, so if you don't have a paid web the Webflow plan and want to do this you, will have to upgrade before you can do it.

What this is going to do is, it's going to let you export your code from Webflow and it's going to let you download it all to your computer. The steps for that are that you basically just open up your Webflow project, there's an export button in the top right corner and; in this little video here it's got the the export button; you click on "Export Code" and then in the bottom right there's a button that says "Prepare Zip", and if you click on that, it will download a zip file to your computer with all of the code up for your Webflow website. I've got one on my desktop that I've downloaded from Webflow as a sample; it'll look something like this; it'll just be a zip file, and I'm going to double click on the zip file, and that's going to give me this file here. I can see I've got my CSS, I've got my images, I've got my HTML and I've got my JavaScript. That's great, that's exactly what we want.

What we're going to do now is, if you open up a code editor, I'm just opening Visual Studio Code, and I'm going to drag the folder that we just unzipped into Visual Studio and that's going to give me a list of all the files that we've got here; the CSS, images, JavaScript and index file. What we want to do is, we want to start a BrowserSync server; and BrowserSync is a tool that allows you to synchronize your browser across multiple pages from some source code that you've got; in this case if we run BrowserSync, we'll be able to run a little local server, and any changes that we make to our CSS, our HTML, or our images, they will all be reflected in the browser across multiple pages at the same time.

To do this, we can just click on the "Get started" button on the BrowserSync home page. If you click on "get started", it'll just give you the three points that you need; it's a very simple installation. The first thing you'll need is to have Node.js installed, which you may or may not already have, they've got a link here for the installers if you do need to install Node first.

After you've done that you can copy the command from the second point, which is to install BrowserSync; if you copy that command and go back to your your Visual Studio Code editor, if you haven't already got a terminal open, you can open it by going to the top toolbar and clicking on "Terminal", and then clicking on "New Terminal". In our terminal we just want to paste in the command we copied, and this is going to install BrowserSync globally; it means we can run it on any of our projects now and in the future. We'll just wait for that to finish up; and BrowserSync is finished installing now.

To start BrowserSync, we can use the command from point 3, which is the final point. This command here is going to start a mini server and provide a local URL to view our website. I'm just going to paste that in to my terminal here and hit enter, and you can see it has really quickly spun up a server for us. In the terminal it's telling us what the URL is; we can access that here, but it has also just spun it up and opened it up in the browser for me immediately anyway. We can definitely see that it's working, and this is all the content or HTML that we'd expect.

Now, you can see in the URL bar we've got this little URL called "localhost" running on port "3000", and that means that it's running on our machine; it's running on our computer, and it's completely outside of Webflow, but we have access to this. The other cool thing is now that we've got this running, we can actually go into our CSS, and we can start changing things if we need to in here; we can change the font size, and immediately you can see that bump up. If I make something ridiculous that will bump up there, I'm not having to refresh the browser, it's just instantly doing that for me, and that's that's really neat. That's cool, and I'll show you what that means in a moment, because we're going to go back into Figma now.

What you want to do is, you want to get this URL here; just select that or copy it and paste it from your terminal. If we jump back into Figma we'll close off Pixelay and give it a restart. The easiest way to restart it once you've already run it once in your page is just to go to the right hand column here, click on the "Pixelay" icon, and that will fire up the Figma plugin again without having to open up the menu.

Once this loads up we're just going to change the URL that it saved in there for us; I'm going to get rid of that and instead I'm going to paste in the URL that I just copied from the terminal. These two have already inherited it, so you don't have to override it. If you have multiple pages, in this case I'm just doing the one page, but if you do have an "about" page and a "projects" page and a "contact" page, what you can do is you can paste in the the main URL, and then add in your extra details at the end; if this is a "contact" page I could do "/contact.html", if this one was "about", I could do "about.html"; you can you can figure out what those URLs are if you do have more URLs; but in this case I'm just going to leave it as the default and inherit the global URL, because we're just comparing the one page for now.

Now that I've got that in there, I can click on my "Compare Designs" button once again. This is just going to quickly upload those images and generate a URL for us, which is actually the same URL as before, but it's just been updated with those new URLs. I'm just going to click and open the link again, and this time it's loading up the web app, it's going to be looking for different URLs; you can see here it's pointing to localhost port 3000 instead of pointing to the the other URL that we had before from Webflow. You can see here, if I change the opacity, you can see that the the heading size is different from the one in the design.We've got the Figma design and then we've got the build; and you can see some differences there and in terms of the the dev build and the design for the smaller screen; the heading is quite different.

What we can do is now that we've got localhost running, we can jump into Visual Studio Code, and we can start playing around with with some of these things. As we had in here before, this font size issue, we can tweak that and you'll see it immediately change on the left here. We can play around with that until it's closer to what we actually expected it to be, and that's going to let us do it really quickly; that's that's exactly the the font size; we can see that it's matching up now, there's no difference at all there, and it's fixed it on the mobile one too; that's pretty cool. If we made that huge again, you can see it updates straight away, and we can see there's something clearly off there.

Of course, you can use different methods to compare these two as well; this is the split screen method; we've got the contrast diff method, which can be good for really small differences as well; then we've also got the overlay mode; if that there's something off, you can line up the designs to line up the parts that work, and then that'll help you get an idea of where things are getting messed up; in this case it's obviously that heading again that we want to we want to fix, and you can just move that around; you can also use the pixel measuring tool, which will give you an idea of if you've got spacing differences; you can get an idea of how big those differences are, which can be really handy, especially for things with crazy margins or really specific sizing, and all that sort of stuff; and then the opacity one is probably the most common, where you can just go back and forth on the opacity and play around with that; I'm just going to reset that back, and that's the perfect version that we're after, at size "58";

So, that's the way that you can get your Webflow builds inside of Pixelay. I know it's a little bit of a workaround, unfortunately there's just there's just no way to get around the iFrame content blocking issue, and the ideal scenario is really to somehow get your your web builds into a local environment, because it just makes the iteration speed so much quicker, as you can see here. I hope that that's been helpful for anyone who's wondering how to compare their Figma designs with a Webflow implementation. I know that it can be tricky to do it across multiple pages; so I hope that this minor inconvenience of needing to export the site locally can help you at least get to the point where you can start making these changes like this, and then once you've made those changes, you should be able to then put those back into Webflow as well, if you need to deploy it there, or if you're deploying this code to a separate service like Netlify or S3, then you can just deploy this folder straight to those, and that'll work just fine.

That's it. If you need to revisit this link, you can keep going back to it once you've uploaded the designs once, and point to the right URLs, link is reusable. You can just go back into the browser and use that again if you need to, but feel free to experiment with it, and I hope that it works out for you.

Until the next time with some more Figma tutorials, that's going to be it for today. I hope you've learnt something that you can take away for your team, or to help out with your own workflows with comparing your Figma designs to Webflow builds. Thank you as always for watching, and we'll speak to you soon.

---

---
type: tutorial
title: How to export Figma to HTML Canvas using Bannerify
date: 2020-05-04T00:00:00.000Z
---

# How to export Figma to HTML Canvas using Bannerify



#### Video Transcript

Today, I'm going be showing you how to export banners that you've animated in Figma to the HTML Canvas format.

To do that, we need to install a Figma plugin called Bannerify. If you haven't already done so; you can go to the top left corner of the Figma toolbar and click on the Figma icon, and then if you go to "Search" or "Community", whichever one you prefer and go to the search bar and type in the word "Bannerify"; if you go to the "plugins" tab you'll see a Figma plugin called "Bannerify HTML Exporter". If you haven't installed it, you want to go over to the right and click on the "install" button; I've already got it installed, that's why mine has the little check, but if your says "install", you can click on that and that'll change it to say "installed".

Once you've done that, you can jump back over to your Figma file. I'm currently using the example that is available through the Bannerify description; if you go to the Bannerify plugin and click on it to see the descriptionm there is a link in the description under "additional notes" which will give you access to the file that we're going to be using in this Figma tutorial; if you do need to use that just jump into the description and and paste that link into your browser and you'll have access to to duplicate this file that we're using in the Figma tutorial.

To start up Bannerify, just right click anywhere in the project, go down to "plugins", and then go to "Bannerify HTML Exporter" and click on that; and this will load up the Figma plugin that we've just installed. Because we're using a design that already exists, this particular design has already been configured to have some animations preset, if you're doing this on your own banners, you'll have to just select all these animations yourself; we've got another Figma tutorial, a very in-depth tutorial about how to actually configure animations and all the neat things you can do to make it really easy; you can check out our YouTube channel that you're looking at this video on for that extended Figma tutorial; but in this case I'm going to assume that you've already setup your animations or you're using this example file.

You can see here we've already got some animations set, you can you can change those of course to be whatever you want. We've got a bunch of banners in here they've all got the same animation settings and what we want to do is export this to HTML Canvas. Where we can do that is by clicking on the "Export Banners to HTML" button up in the top right, and this reveals the export settings panel; there's a number of options that we can configure in here, we won't go through all of them today because they're not all relevant to what we're trying to do, but the one that we do want to have a look at is down here underneath "Code output settings", and then under "Export format/platform", it's currently set to "Vanilla HTML/CSS"; that will export HTML from Figma with CSS animations, that's typically the the most common format that you'll export, but there are going to be some circumstances where you need to export to HTML Canvas.

I've just clicked on the drop-down and instead of selecting "Vanilla HTML/CSS", which is the default, we're just going to go down to "Vanilla HTML/JS", "JS" which is "JavaScript", and then in brackets it says "HTML Canvas", and then canvas has got the little HTML tag around it. If we click that, what this is going to do is instead of generating HTML and CSS, it's going to convert or export all of your banners to HTML and JavaScript, and instead of using image tags, it's just going to use a single canvas tag.

Let's just have a look at what that looks like by exporting it; if we click on "Export Banners" at the bottom, this little button; I'm clicking on that, this is generating HTML for me and then it will start going through all the images and and saving those; and we're done; it's extremely quick. You'll get a little save dialog prompt up here; by default, the file name will just be matching with your document title; in this case it's "Bannerify Sado Banners Demo", and then use get a little suffix with the date and the platform that we're exporting to (HTML Canvas) up here. Of course, you can change that, but for now I'm just going to click "Save".

That's saved to our desktop, so all you have to do is double click on the zip file, and that will give us a look at all of the code and images is just exported for us. You can see here it's a "one for one" with all the banners in our project. It's just got all the dimensions as the prefix and then the name of the frames that comes after that, and what we can do to have a look at them all at the same time is just double click on this "index.html" file and open that up in Chrome. That's opened it up in Chrome for us, and if I just click on the play button again in the top right, you can see that they're all basically in sync and and all animating in.

To get an idea of what code that's generating, I'm just going to open up my code editor and I'll just drag in the medium rectangle and open that up. This is the code that Bannerify has generated for us, this is the banner that I'm looking at here in the in the left hand side and then I've got my code on the right. You can see that we've got an HTML Canvas tag; it's just a single "canvas" tag with the dimensions that you'd expect from our banner; it's got a JavaScript file that's being included; a CSS file is being included; a couple of bits of metadata up here; the GSAP animation library; and then we've got our images folder; this is all of the images that our banner is comprised of, and the SVG's for the text layers.

Then in the JavaScript file this, is basically our timeline; we've got our timeline for all of the animations that are happening here, and and instead of using CSS it's using JavaScript to dictate those timelines. This is all being generated automatically, you don't have to know code or write any code, Bannerify will generate all of this for you, and you get that animation that you can see here on the left hand side.

That's essentially how you go about exporting banners from Figma to HTML Canvas and JavaScript based animations. It really is just just a one-click process of selecting the format in the in the export settings and clicking "export", and you'll basically be able to go straight from Figma to HTML without having t to worry about coding up anything, the Bannerify Figma plugin will just handle it all for you.

That's basically it; if you need anything else, you can check out one of our other Figma tutorials that cover other formats that can be exported, but if you're looking for a way to convert your Figma designs into HTML, or "HTML Canvas" specifically, then this is the best way to go about it. We're always trying to improve this Figma plugin; if you have any questions or suggestions, we always love to hear anything that you might want or find valuable in Bannerify, so please let me know. Until next time, thank you as always for watching.

---

---
type: tutorial
title: How to export Figma to HTML for DoubleClick Studio using Bannerify
date: 2020-05-04T00:00:00.000Z
---

# How to export Figma to HTML for DoubleClick Studio using Bannerify



#### Video Transcript

Today, I'm going to be showing you how to export animated banners from Figma to HTML for DoubleClick Studio.

To do this we just need to install a Figma plugin called Bannerify. You can do that by going up to the top toolbar and clicking on the little Figma icon, once you've done that you, you'll be able to go to the "Community" tab and go to the search bar and if you search for the term "bannerify" and then click on the "plugins" tab you'll see "Bannerify HTML Exporter" pop up. If you haven't got it installed, you'll be able to go to the right-hand side here and click on the "install" button and that'll make it appear the way that mine does with the little check box.

If you're using this for the first time or if you just want to follow along, if you click into the plugin and go down in the Figma plugin description to the "additional notes" section, the first bullet point contains a URL which is this one; if you copy paste that into your browser, you'll be able to open up the Figma file that we're going to be using in this tutorial which has a pre-designed set of banners and some preset animations that we're going to use, just to show you how to export these banners from Figma to HTML for to DoubleClick Studio.

Once you've done that, you can open up the Figma file that you've just duplicated. To open up the Bannerify Figma plugin, we can just right click anywhere, go down to "plugins" and then click on "Bannerify HTML Exporter" and that's going to fire up the Figma plugin that we just installed. Once that opens up, we get a full list of all the frames from our designs, and you can see here these are all coming in from the left hand side here; they've already got animations on them because we've opened up the file that has been pre-designed.

I'm not going to be showing you how to do any animation or any timeline settings or anything like that in this tutorial; if you are interested in that, there's another video on our YouTube channel which goes for about 40 minutes, and it's a real in-depth deep dive into how to structure your animations and adjust the timelines; it has a whole bunch of neat tricks that lets you apply these animations really quickly in your own designs; you can check that out on our YouTube channel if you like, but for now we're happy with these designs and all we want to do is export them from Figma to HTML for DoubleClick Studio.

The way we export our banners is just by clicking on this button in the top right here, which is called "Export banners to HTML"; if we click on that, we'll get a whole bunch of options here, and the one we're focusing on today is just going to be the "code output settings"; at the moment it's set to "Vanilla HTML/JavaScript", but if we click on that drop down you can see that that's categorized in this top area here called "standard" (which means that these are all vanilla exports they don't have any third-party code for any other third party platforms or any third party advertising networks); if we go down to the second category called "advertising platforms", you can see there's a bunch more options down here, and today the only one we're looking at is the "DoubleClick Studio" option which is the one down in the list.

If you click on "DoubleClick Studio" and select that, you'll notice that the URL bar has disappeared from the option that we had selected before; when we were selecting the "vanilla" option, there was a banner link URL field here and that will let you put in your website or your landing page that you want the banner to click through to; now we're using DoubleClick Studio, we don't have to include that URL here, because when we upload the banners into DoubleClick Studio, it will provide the option in the DoubleClick Studio UI to add a URL or exit event that will point to a URL or a campaign page that you're after for your particular ad campaign; so that's why that's left off there.

Now that we've got DoubleClick Studio selected, all we need to do is click on the "Export banners" button in the bottom right; this will generate all of the code for us, it'll also export all the images for us, and give us a little zip file. It's just finished doing that, it only takes a couple of seconds; and if I click "save" and jump to our desktop; if we double click on the zip file, that will open up the banners that we've just exported. You can see we've got all the folders here that represent all the frames that are coming in from our Figma design. To get a sense of what they all look likem the easiest way to do that is just to double click on this "index.html", file which will open it up in the browser; I'll just do that now. You can see here we've got our banners exported from Figma to HTML, this is in the browser now; we can play back that animation by using this little play icon in the corner we don't have it set to loop; that's why I'm doing it manually, and you can see here it's coming in exactly the way that we would expect all the animations have been automatically generated for us. This preview page will adapt; it can be really nice if you're presenting to clients or sharing it around internally.

To get a bit of a look at what's going on under the hood, we can open up our code editor and actually see what's going on. I'm just going to open up my my files that were just exported from Figma; if we open up the "MREC", the medium rectangle, that will give us a little bit of a look into what's going on. I'm just going to open up this individual banner by going into the folder and opening the index file; and you can see it over here, if I open up the index file, you'll notice a couple of things in here. We've got all of our HTML images, all of our elements to make up the banner, we've also got our JavaScript, and we've got our CSS.

The JavaScript contains some code that automatically makes this compatible with DoubleClick Studio. It's got a few event listeners going on and what we can actually do to test that in the browser is, if we go to dev tools "inspect", and then switch into "console", and I'm just going to refresh the page. You can see here in the console that there's a few things going on; "Studio SDK", that's the DoubleClick Studio library which is being loaded from the index file, it's including this script here which is the "Enabler.js" file, and that's specifically being loaded in for DoubleClick Studio. You can see that script being initialized here, it knows that we're in a test environment while running it locally; that's why it's saying it's "simulating local events".

If we go ahead and click on this little banner anywhere, you can see it's firing off the "background exit" event which is being invoked; that's how we can tell that it's registering the click event, and that it's a successful click event. Once that goes into DoubleClick Studio, and once you've associated a background exit event with a URL or an action clicking on the banner to fire that event successfully; that's how we can tell that it's working. Everything's looking really good there. We've also got our CSS, which is handling all the animation and positioning for us; this is all getting generated automatically, as are the images. We've got SVGs for all the text, to keep them really crisp and small; and then we've got some PNGs and JPGs for some of the other assets in there.

That's that's a rough look at what the Bannerify Figma plugin is exporting for all of the banners, and these are designed to be production ready; you don't need to know any code, you don't need to have any developers on standby to manually convert them from Figma to HTML; Bannerify will automatically generate all the necessary code from Figma to HTML for DoubleClick Studio,.

If you zip up each of those banners now, or just drag the folders into DoubleClick Studio, you should be good to go for your campaign, and all you'll have to do is associate those exit URLs with the URLs for your campaign or your landing page. That's pretty much it. As I said, this is just a tutorial on exporting to the DoubleClick Studio format, just the process of going from Figma to HTML; so if you do want to have a look at our other Figma tutorials we have, as I mentioned before, we have a really in-depth one on actually adding the animations and messing around with the timelines and doing all sorts of neat tricks with delays and speeds and selections and all that sort of stuff; and you can find that video on our YouTube channel.

Until the next time, I hope this has been a valuable Figma tutorial for you if you were trying to figure out how to export your banner designs from Figma to HTML for DoubleClick Studio; now you know the Bannerify Figma plugin will do it really quickly and automatically for you. Thank you as always for watching, and we'll be releasing more Figma tutorials very soon.

---

---
type: tutorial
title: How to export Figma to HTML/GreenSock (GSAP) using Bannerify
date: 2020-05-04T00:00:00.000Z
---

# How to export Figma to HTML/GreenSock (GSAP) using Bannerify



#### Video Transcript

Today, I'm going to be showing you how to export animated banners from Figma directly to HTML and JavaScript, specifically the GreenSock or GSAP animation timeline format.

To do this, we need to install a Figma plugin called "Bannerify". If you haven't done; already, you can do that by clicking on the top left icon in the header with the little Figma symbol, and going to either search or community and go into the search box there and typing in the keyword Bannerify and then clicking on the plugins tab and you'll see this little bear icon with the plugin title "Bannerify HTML Exporter"; if you've not installed it yet, you'll see a little install button on the right hand side over here. I've already got it installed and that's why I've got that little checkbox; if you haven't got that and it just says install you can just click on install and it'll instantly change it to say installed and then you're ready to go; once you've done that, we can click back into our project which I just had open.

If you don't have a set of banners yet and just want to follow along; if you go into the the plugin description by clicking on the plugin; underneath the "additional notes" section, under the first point, there is a link here which will take you to the file that we're actually working with at the moment. You'll be able to open that up in Figmam, duplicate it to your own Figma account, and you'll be able to follow along with the exact same example that I'm showing you in this video.

I'll switch into that now, and it'll look something like this. To run the Figma plugin, we just right click anywhere on the page go to "Plugins", then click on "Bannerify HTML Exporter" and that's just going to fire up the Figma plugin that we just installed. This is going to give us a representation of all the banners that we have in our Figma file; because we're using a pre-designed file you'll see a list of all of them in here, and they've already got preset animations on them.

If you haven't done this before there's actually another Figma tutorial on this same YouTube channel which goes for about 40-45 minutes, it's very in-depth, and it covers exactly how to go about adding animations and designing banners and really easily creating animations within Bannerify; I'd recommend that if you haven't looked at that one already or are just just getting started with the Bannerify Figma plugin; but in this case we're more focused on exporting some banners that we've already animated to the GreenSock or GSAP format; basically going outside of this file here in Figma to HTML and GreenSock (GSAP) or JavaScript.

We're already happy with all of our animations, as I said, we've already designed the file, we just want to export it for production now. To do that, we just click on the "Export Banners to HTML" button in the top right of the Bannerify Figma plugin, and click on that, and this will open up the export settings from Bannerify. There's a number of different settings in here which we won't go through today, because all we're really focused on is getting Figma to HTML GSAP (or GreenSock) format, the area we're focused on is "Code output settings" down here. You'll see we've got a little label that says "Export format/platform", we've currently got it set to HTML Canvas, it defaults to HTML and CSS, but in our case we're going to go ahead and click on this one. If you've already clicked on the drop down, this will show you all the options and then underneath the "standard" group we want to go to "Vanilla HTML/JS", "JS" meaning "JavaScript", and then in brackets the option we want is "GreenSock (GSAP)"; that's the GreenSock animation library that will get exported in JavaScript; let's click on that option.

Now we've got "Vanilla HTML/JavaScript GreenSock (GSAP)" selected, all we have to do is click on the "Export banners" button in the bottom right. I'm just going to click on that, and this will this will generate all the HTML and JavaScript for us, export all of the images; it's already done, it only takes a few seconds, and then we'll get the file save dialog up here. By default that file name will match whatever your Figma project name is, but you can change that if you'd like, I'm just going to leave it like that for now and click on "Save" and then I'm going to go to my desktop. If you double click on the zip file that it generated, that will unzip the folder and we'll be able to get a list of all the different banners that we've just exported, all of the code, all of the files are there.

The easiest way to preview them all is just by clicking on this "index.HTML" file; that will open up the browser and let you view all of the banners at once. You can make that a bit wider if you need to, and we can we can replay that just by clicking on the button in the top right. You can see here that all of our animations have been perfectly replicated from what we expected from the Bannerify Figma plugin; they're they're super smooth, super seamless and we don't have it set to loop, that's why it's going back to the start.

If we want to have a look at the code, we can do that by opening up a code editor; in this case I'll just use Visual Studio. Let's just use the medium rectangle example; I'll drag that in we can see we've got our HTML, and the HTML is generating all of the images; we've got all the image tags that we'd expect, and they're pointing to the images inside of our "images" folder, which are getting automatically exported from Figma, including all the SVGs for text layers, just to keep them really crisp. In our index file, we've also got the GSAP animation library included automatically, and then we've got the JavaScript file down here; if we open up the JavaScript file you can see in here that it's has automatically generated the entire GSAP or GreenSock timeline in JavaScript. This will get kicked off when all of the images have loaded; it will automatically detect that, and then play through all the the GSAP timelines automatically, and that's how we get our animation over here in the in the browser.

You don't need to know any code to be able to do this, Bannerify will automatically export all of your animations and all of your images into HTML and JavaScript; it's currently GreenSock (GSAP) format, but as you saw before there's a number of other formats that are available, but in this case we just wanted to have a look at the the GreenSock or GSAP format.

That's essentially it; that's all you need to know to be able to export banners from Figma to HTML and JavaScript/GreenSock (GSAP). If you need to, have a look at other formats, you can either play around with them yourself or you can find more Figma tutorials on this YouTube channel and and get stuck into those.

If you need any other formats that aren't currently supported please just let us know and we can add them in to Bannerify,; you don't have to worry about hacking them together yourself; we can we can easily just add them in for you. We always love to hear feedback and feature requests for Bannerify,; if you do have any please let us know and we'd be happy to to add them in. I hope you've learned something here, and we will be back with more Figma tutorials very soon. Until then, thank you for watching as always.

---

---
type: tutorial
title: How to export Figma to HTML for AdForm using Bannerify
date: 2020-05-03T00:00:00.000Z
---

# How to export Figma to HTML for AdForm using Bannerify



#### Video Transcript

Today, I'm going to be showing you how to export animated banners from Figma to HTML for the AdForm platform.

The first thing we need to do is goto the Figma icon in the top left, because we want to install a Figma plugin called Bannerify; if we click on this little Figma icon, and if you go to "Community" and then click on the search field and type in the term "bannerify"; then click on the "plugins" tab and you'll see a result come up that says "Bannerify HTML Exporter" and on the right-hand side you'll see a button that says "install" or it will say "installed" if you've already got it installed like mine does; but if you just see a button that says "install" over here you can click on that, and then it'll look like mine with the little checkmark on it.

Once that's ready to go, if you click into the plugin name just to jump into the description, we can see down here in the "additional notes" section once we scroll down, that we've got this little URL here; and if you copy paste that URL into your web browser you'll be able to duplicate the file that we're going to be using for this Figma tutorial; and that's just going to make it a bit easier to follow along if you don't already have a set of banners designed, but feel free to use your own if you do.

Now that we've installed the Figma plugin we can go back to our project and we're just going to run the plugin by right-clicking anywhere going down to "Plugins" and then clicking on "Bannerify HTML Exporter", and this is just going to open up the Figma plugin that we just installed. You can see that it's loaded in all of our banners from the Figma file and you'll notice that they've also got these little animations applied to them already when I click this little play button; this Figma tutorial is not going to cover how to add these animations or how to control the timelines, if you're interested in that we do have another Figma tutorial on our YouTube channel that you can check out, it goes for about 40 minutes and it covers all of those things in depth; but for today we're just going to be looking at how to export banners that you've already got designed and already got animated; we're just going to see how to export those from Figma to HTML for AdForm.

To start off with, we just need to click on the "Export banners to HTML" button in the top right; I'm just going to click on that now and you can see we've got a few different export options, but for today I'm just going to be focused on the "code output settings"; underneath where it says "export format/platform" you can click on that drop-down, and that's going to open up a list of options for us. In the second section down here that's called "advertising platforms", we can see there's a whole bunch of options, but the one that we want to select is closer to the bottom and it's the "AdForm" option; if we click on "AdForm" that's now selected the platform for us, which means that we're ready to go with exporting. To export these banners from Figma to HTML for AdForm, all you need to do is click on the "Export banners" button in the bottom right down here; I'm just going to do that now, and this is going to generate all of the code that we need, and all of the images that we need in to a zip file with all of our banners.

I'm just going to use the default naming convention in our save dialog here and click on "save", then I'm going to go to my desktop and double click on the zip file; once that unzips, we can click on the folder and you'll see here that it's exported all of our banners from Figma to HTML, and to get a sense of what that looks like all in one snapshot, we can double-click on the index.html file that comes with the folder in the root here; I'm just going to double click on that to open up in the browser. I've just loaded that up in the browser and you can see here that all of the banners have been exported as would expect they've all got the animations on them, I can replay those animations with this little play button if I want to do that, but everything's looking really good and as I would expect.

To get an idea of what was actually exported by Bannerify from Figma to HTML for AdForm, we can open up one of these banners in our code editor; I'm going to do that now, I'm just going to drag the medium rectangle into Visual Studio Code (you can use whatever code editor you like; in this case, I'm just going to use Visual Studio) and I'm also going to open up the "MREC" medium rectangle banner in the browser so we can have a look at which one we're looking at; you can see here these are all the files that can exported from Bannerify when we export from Figma to HTML, and in this case we're doing it for AdForm.

You can see right up the top its including the script file from the AdForm domain; we've got a script file from "adform.net" and it's the "AdFormDHTML.js" file, and that's a required file that any banners being uploaded for AdForm needs, that gets included automatically; we've also got our metadata up here, that gets automatically included; these are all of the images that we need to render out the HTML for our banner; and we've also got a little JavaScript file down here and we can open these up.

We've got the JavaScript file, you can see down here that there's some specific code for AdForm; we've got this little "clicktag" variable, it's the "htmlGetVar" function; that's coming coming from the AdForm library, and don't worry too much about this "example" URL, when you upload these banners to AdForm it's going to give you the option to specify where you want the click tag to go; this is purely just a placeholder that'll get swapped out in real time when you do upload these banners into AdForm. Then we've just got a little click tag event that that's gonna open up the the the click tag when you click on the banner inside of the browser for AdForm; all of the JavaScript is written for you, so you don't have to worry about any of that, that's all taken care of.

We've also got this little file that AdForm requires as well, which is the "manifest.json"; Bannerify is automatically exporting this from Figma into the AdForm banners; we've got this "manifest.json" and when you upload this banner into AdForm, it's going to read the contents of this file, and that's going to give it some information that it requires; things like the width and the height, the title and where the entry point for the banner is, and all that sort of stuff; that all gets included for you, so you don't have to worry about that.

Then of course we've got the "images" folder as well; this includes SVGs for the text layers to keep them nice and sharp; the PNG for the button; and the JPG for the background; that's all of the files you need, you get you get all those files for each of your banners, all the HTML is generated from the Figma plugin, and you don't need to be a developer or even jump into the code editor; I just wanted to show you what Bannerify was generating in case that was of interest.

If we jump back into Figma, as you can see the message is telling us it's all done it's ready to be uploaded; there's there's no more steps. That's all you have to do, as you can see it only took a few seconds to export from Figma to HTML for AdForm; it's extremely quick, and that just means you can keep re-exporting these banners if you have changes, or if you want to try out different versions, or have different campaigns; you can just export it really quickly from Bannerify and it'll be ready to export from Figma to HTML in a few seconds.

I hope this has been helpful for anyone wondering how to export banners from Figma for AdForm; this is the way you can do it, using the Bannerify Figma plugin. As always, thank you for watching, and we'll be back with more Figma tutorials just like this very soon.

---

---
type: tutorial
title: How to export Figma to HTML for AppNexus using Bannerify
date: 2020-05-03T00:00:00.000Z
---

# How to export Figma to HTML for AppNexus using Bannerify



#### Video Transcript

Today, I'm going to be showing you how to export banners from Figma to HTML for the AppNexus platform.

To do this, we're going to install a Figma plugin called Bannerify. If you haven't already done that, you can go to the Figma icon in the top left, click on that, and then go to "Community", and then in the search bar if you type "bannerify", and then click on the "plugins" tab, you'll see the result "Bannerify HTML Exporter" pop-up. I've already got mine installed, that's why it's got the little checkmark next to it, but if you don't have it installed, you can click on the "install" button that will be on the right-hand side, and then it will change to look like this.

If you're following along or if you don't have a set of banners to work with already, you can go into the plugin description just by clicking on the Bannerify Figma plugin, going down to "additional notes" and the first bullet point contains a URL; if you copy that URL into your browser, you'll be able to duplicate a copy of the animation template that were going to be using for these banners in this Figma tutorial over to your own Figma account.

I'm just going to switch into that file now, and what we need to do is just right click anywhere, go down to "plugins" and click on "Bannerify HTML Exporter", and that's just going to fire up the Figma plugin that we just installed. We can see here that it's loaded up all of the banners that we've got designed in our Figma file and you can see that if I click on play, they've already got some animations attributed to them. This Figma tutorial won't be covering how to set up those animations or how to do your timelines and all that sort of thing; if you do need to figure out how to do that and want to watch a tutorial on that, we do have another Figma tutorial on our YouTube channel that will go into a really comprehensive breakdown of how you can apply these animations and set up all the timings really easily, but for this tutorial we're just going to be showing you how to export these animated banners from Figma to HTML for AppNexus.

To do that, we just need to click on the "Export banners to HTML" button in the top right hand side, and you can see we've got quite a few options here but for this Figma tutorial we're just going to be focusing on the "code output settings" in the bottom right side down here; currently it's set to at the export platform of Vanilla HTML and JavaScript, but if we click into that select box, underneath "standard" (that's the the vanilla options that don't contain any third-party code for different platforms), but because we want to export this to a AppNexus, we can go down to the "advertising platforms" group and the fourth result down is AppNexus; if you click on "AppNexus", that will select it. You might notice that it's removed the the need for the the URL bar that was there a moment ago when we were selecting the the vanilla one; and the reason for that is with the vanilla ones, there's no third party platform involved; you have to add that URL in there which will get added to the code when it exports. Because we're using AppNexus, you can assign the clicktag URL inside of the AppNexus UI once you upload these banners; so that's why that doesn't show up.

Now that we've got AppNexus selected as our export format, we can click on this button in the bottom right which is "Export banners"; click on that, and this is going to generate all the code for us, export all the images for us, and give us a zip file. It has just finished, it only takes a few seconds; and I'm just going to click "Save" and then I'm going to go to my desktop and double click on the zip file, and inside of this folder you'll be able to see all of the banners that we've just exported from Figma to HTML; all of these match up with the file names and the folder names that we've got in here.

The easiest way to get a sense of what's been exported is just to double click on the "index.html" file; I'm just going to do that now. It's just loaded up our banners, and you can see here all of them have been exported as you'd expect; all the animations are included and everything is looking looking really good. To get a bit of a sense of what's being exported in these banners, now let's open up one of these folders in our code editor and have a look what's going on in there.

I've just opened up Visual Studio Code and I'm going to drag in the medium rectangle panel, and we can see here it's got a bit of a breakdown of the files inside of this folder. If we open that up in here, that's just matching these files; we've got our HTML and this contains all of the elements that we need for our banner; all of the images they're automatically included; the JavaScript and the CSS; and you'll notice up here as well as an extra bit of JavaScript that is including the AppNexus HTML5 library; this is what's required for banners that are being uploaded to a AppNexus, that gets included automatically because we've selected the AppNexus platform.

In our CSS we've got all the positioning all the animations automatically generated. In the JavaScript, you can see here that we've got a special click handler which fires off an AppNexus click tag function, and this is going to hook into your AppNexus UI in the web browser, and that's going to pull in that URL and make sure it gets directed to the right place. Of course, we've got all of our images SVG's and JPGs for for all the images that we need for these banners; they get exported automatically; so that's roughly what gets exported, all of the banners are there as you'd expect and that's really all there is to export your banners from Figma to HTML for the AppNexus platform.

If you've been looking for a way to do this, or we're just wondering if you could even get your banner designs from Figma to HTML for platforms like AppNexus, then I hope this has been an interesting Figma tutorial for you. If you need more platforms or more Figma tutorials on this, there's a bunch more on our YouTube channel, so you can check them out on there. Until next time, I hope you've learned something that you can use in your own projects or share with your own team, and I'm looking forward to coming back shortly with even more Figma tutorials for you; thanks again for watching.

---

---
type: tutorial
title: How to export Figma to HTML for Flashtalking using Bannerify
date: 2020-05-03T00:00:00.000Z
---

# How to export Figma to HTML for Flashtalking using Bannerify



#### Video Transcript

Today, I'm going to be showing you how to export animated banners from Figma to HTML for the Flashtalking ad platform.

To do that, we can install a Figma plugin called Bannerify. If you haven't already installed it, you can go to the top left corner of the Figma toolbar and click on the Figma icon, and then if you go down to "Community" and click on the search bar, you can type in the keyword "bannerify"; then if you click on the "plugins" tab, you'll see a result that says "Bannerify HTML Exporter". If you haven't already installed it, you can click on the little "install" button on the right hand side and then once you've clicked it, it will change to look like mine to say "installed" with a little checkmark, and that's how you know it's ready.

The second thing we'll do, just to get started, is to click into the "Bannerify" plugin title, and when we do that it'll open up the Figma plugin description. If you scroll down a little bit to the section that's called "additional notes", the first bullet point in there contains a URL, and if you copy that URL on the second line and paste it into your web browser, that's going to let you duplicate a copy of the project that we're going to be using in this tutorial; that's just going to give you a really easy way to have a pre-designed set of banners with some animations on it to try this out, but of course if you have your own design, feel free to use that one instead.

Now that we've cloned that project and installed the Bannerify Figma plugin, once you've opened the file, just right click anywhere on the page and go down to "plugins", and then go to "Bannerify HTML Exporter" and click on that. That's just going to fire up the Bannerify Figma plugin that we just installed, and once that loads you be able to see that it's loaded in all of the banners from our Figma file into the Figma plugin. If we click on this little play icon you can see that we've already got some preset animations that have come with the file.

This Figma tutorial will not be covering how to add those animations in or go through all the timeline sort of tutorial, but if you do need to watch a video on that and get up to speed for your own banners or just to understand how it works, we do have another Figma tutorial on our YouTube channel, and you can watch that one; it goes through our 40 minutes and it's a really comprehensive guide to creating and animating these banners using the Bannerify Figma plugin; but today because we've already got this set up and we're happy with all of our animations, all we want to do is export them from Figma to HTML for Flashtalking.

The first thing we need to do is just click on the top right corner of the Figma plugin, there's a button called "Export banners to HTML"; I'm going to click on that, and you'll see we've got a few different settings here, but the one that we're interested in today it's just in the bottom right called "code output settings". Underneath the "export format" label you'll see a drop-down list, and if you click on that drop-down, it's going to reveal a whole bunch of different platforms. Today, the one that we're interested in is the "Flashtalking" platform; that's the one near the bottom, I'm just highlighting that now; if you click on "Flashtalking", that will change the export format option to be Flashtalking and that's going to tell Bannerify that's the format that we want to export to.

To export our banners from Figma to HTML for Flashtalking, all we need to do now is click on the "Export banners" button in the bottom right; I'm just going to click on that now, and this is going to generate all of the code that we need, and all of the images that we need from Figma into a little zip file for us that we can use. I'm just going to save that, and if I go to my desktop and open up the zip file, you'll see that we get a folder full of all of the banners that we just exported from Figma. You can see the names are all matching up with the frames and it's got all the dimensions in here as well.

The easiest way to see what that's just output for us is by clicking on the "index.html" file; if you double click on that, that's just loaded up the banners index file, and you can see all of the banners in here loading up is expected with all the animations; and we can play them again just by clicking on this little play button in the top right and make sure everything's looking good, which it is; everything's coming in as we expect.

To get an idea of what has actually been exported by Bannerify, what we can do is open up our code editor; in this case I'm just using Visual Studio Code, but you can use anything you like. I'm just going to drag in the medium rectangle folder as an example, and also just to open up the index file in the browser so we can see what banner we're looking at. In Visual Studio Code you can see on the left hand side here we've got all of our files and folders, and just clicking on the "index.html" file we can see that we've got all of our image elements here, we've got a CSS file, a JavaScript file, which is all looking good.

The CSS contains all the positioning and all of the animations that we need; that all gets generated for us automatically, and then the JavaScript file contains some code that's specific to the Flashtalking the ad platform. This is including some code that's going to fire and apply a click tag to our banner; this has already been generated, you don't have to modify it; this is just to show you what's being included, and just to make sure that we have selected the right platform, which we have.

The last file that it includes for us is specific to the Flashtalking platform; it's this "manifest.js" file; When we upload this banner into Flashtalking, it's going to get picked up by the platform and it's going to understand some of these things that we're telling it here. It's telling us it's going to tell Flashtalking where to look for the banner file (in the index.html), what the width and height is, how many click tags that contains, and things like that; so that all gets generated for you, you don't have to worry about that at all; you don't need to modify this, but of course you can if you wanted to, but this is just an example of what is getting exported by the Bannerify Figma plugin.

That's everything that you need to do to export animated banners from Figma to HTML for Flashtalking. You don't need to have any developers to do this, you don't need to know code to do this, you can just use the Bannerify Figma plugin and that's going to give you everything that you need to export those banners from Figma to HTML in just a few seconds, like we just saw.

I hope that's been helpful if you've been looking for a way to do this directly from Figma to HTML for Flashtalking. This is one of many formats that Bannerify supports; so if you do need to use it for another platform, we have some other Figma tutorials on our Figmatic YouTube channel that you can check out and see how they work as well. Until next time, thank you as always for watching, and we'll be back soon with more Figma tutorials just like this one.

---

---
type: tutorial
title: How to export Figma to HTML for Google Ads using Bannerify
date: 2020-05-03T00:00:00.000Z
---

# How to export Figma to HTML for Google Ads using Bannerify



#### Video Transcript

Today, I'm going to be showing you how to export animated HTML banners from Figma to Google Ads.

The way we're going to do this is by installing a Figma plugin called Bannerify. If you haven't already got it installed, we can go to the top toolbar and click on the Figma icon, and if you go to the "community" area and use the search bar to type in "bannerify", and then click on the "plugins" tab, you'll see this result an "Bannerify HTML Exporter" pop right up. If you haven't already installed it, you can click on the "install" button; mine is already installed and that's why it's got this little checkmark, but if yours just says "install", you'll be able to click on "install" and that will change it to look like mine.

Once you've installed it, you can jump back into your project in my case I'm using the sample file that can be found in the additional notes section down here; if you go to the Bannerify plugin details area, and go to "additional notes", there's a link here that you can use; if you put this into your web browser it will open up the Figma file that I'm going to be using in the Figma tutorial and you can duplicate that file to your own Figma account, and you can use that to follow along.

Back in our project, what we want to do is right click anywhere on the page go down to "plugins" and then click on "Bannerify HTML Exporter", and that's going to fire up the Figma plugin that we just installed. You can see here that it's loaded up some banners that we've already got in our project here, and because we're using the project that's already been set up, we've already got some animations attributed to each of the layers on each frame. I'm not going to show you how to do all that in this Figma tutorial; I've got another Figma tutorial on our YouTube channel which goes for about 40 minutes; you can check that out if you want to have a in-depth breakdown of how to go through and apply all these animations really easily; I'm not going to cover that here, but you can see here we've got some animations set up and all we want to do is export them. We can get them into a format that we need, which in this case is going to be Google Ads.

To export these banners, we can click on the "Export banners to HTML" button in the top right hand side of the Figma plugin; I'll click on that, and you can see we've got a bunch of options here. We can do a whole bunch of things, but as with the other point on the animations, I'm just going to focus on this area down here which is "code output settings". At the moment, we've got it set to "Vanilla HTML and JavaScript", however because we want to export this from Figma to HTML for Google Ads, we're going to click on the drop down here and instead of selecting one from the "standard" group at the top (which are all the vanilla options that don't come with any additional code), we're going to scroll down and there's a second section called "advertising platforms", and you've got a list of a whole bunch of platforms here but the one we're after is right up on top which is "Google Ads"; if we click on "Google Ads", you can see here that it's selected that for us.

You might have noticed that one of the other fields is disappeared; if we click on the selection we had a second ago, you can see we've got the banner link URL here; if you put a link in there that'll that'll open up the the link whenever you click on the banner, but you might notice that when we click on "Google Ads", that option disappears; and the reason for that is you actually associate the URL for the Google Ad inside the Google Ads interface, you don't have to preset it in the code itself, but it's going to include some click tags that are going to allow the Google Ads UI to actually hook into that, which we'll see in a second.

Now that we've selected "Google Ads" from the advertising platforms this is going to export from Figma to HTML for Google Ads the way we we need; all we need to do is click on "Export banners" in the bottom right here; I'm going to click on that and it's generating all the code for us, exporting all the images for us automatically, and and that's all done; it's very quick, it only takes a couple of seconds. If I open up the zip file just by double clicking on it, that's going to reveal all of the banners that we've got here; you can see that these all match up with the banners that we've got on the left hand side in Figma, and it automatically prepends the dimensions and then it uses the frame name to also give a bit of a label to each folder.

The easiest way to see an overview of all of our banners to make sure that they're all looking the way we want is just by clicking on the "index.html" file; that's loaded up the index.html file, and you can see here we've got all of our banners from Figma; you can click this little play button in the top right to replay them if you want to keep having a look at them and this is also responsive; if you need to use this on different screen sizes the banners will automatically readjust, if you're sending this to a client or just reviewing it internally.

Now that we've got all of our banners that the way that we want them, let's just take a look at the code that is generated for us as well. I'm just going to open up my code editor, in this case which is Visual Studio Code, but you can use whatever you like. I'm just going to open up the "MREC" medium rectangle, and I'll open that up in the browser as well, and you can see here it's opened up the single banner. If I inspect the code in my code editor, you can see here that it's automatically generated all the code for me. It's got the the metadata for the banner, it's got all of the HTML for the banner, all the images with the alt text, and the CSS which handles all of the animation and positioning; it's automatically been generated for us. The other neat thing is that we've got a JavaScript file which automatically includes all of the stuff to detect when the images are loaded; it will only show them when they're actually loaded in.

That includes everything that we need to upload this banner to Google Ads. We can actually validate that by going to the Google Ads validator, so I'll go to that now. I'm in the HTML5 validator, which is a tool that Google offers which allows you to validate your ads or your creatives before they actually go into production, just to make sure the code and the structure is all valid. What I need to do to zip that up is just highlight all of the files, click on "Compress", and after I've done that I can click on "Upload", click on the zip file that we just made, and this is going to upload all the files to this validation service. It does tend to be a little bit slow I've noticed; so we'll just wait for that to finish. If you do need to get to this page by the way you can just search for "HTML5 validator for Google Ads" and then that will show up.

It's finished uploading, and you can see here, it's provided this long checklist of all the different things that it's checking for. It looks really nice, because we've got green check boxes from from zero to the end, which is really cool. Then here we can just click on this little icon, which will load in a preview if we want to have a look at that as well; that shows us the preview which will load in a second. If we click on that, you can see here that it says "your click was successful and should track correctly"; all you need to do is include a click tag or a click URL on that once you've uploaded it, and that should should work just fine. That's all validated and all working as expected; and we've got all of our banner sets, so we don't have to test all of them; all of the code gets exported in the exact same way; if one works, they all work. This is all built into Bannerify; you don't actually have to worry about this, but I just wanted to show you that it is actually all validated for Google Ads.

That's essentially it; you don't need to do anything else, those are production-ready. Of course, you've got all the code there if you do want to make any changes or manually tweak anything yourself in code, but the idea is that you can export production-ready banners from Figma to HTML for Google Ads and that'll just work straight away. You don't have to do any extra steps, you don't even need to know how to code, you don't need any developers on the team, you can just do it all directly from Figma to HTML and Google Ads will pick up on all of that, with everything all be valid.

I hope that's been a helpful Figma tutorial for anyone who's searching for how to do this, and was wondering if you could do this from Figma; the answer is "yes", but you just need to install the Bannerify Figma plugin to make it happen. That'll get your banners from Figma to HTML for Google Ads with no issues. Thank you as always for watching, and until the next one, I hope you can use this in your own projects or share it with your team; we'll be back very soon with more Figma tutorials just like this one.

---

---
type: tutorial
title: How to export Figma to HTML for IAB using Bannerify
date: 2020-05-03T00:00:00.000Z
---

# How to export Figma to HTML for IAB using Bannerify



#### Video Transcript

Today, I'm going to be showing you how to export animated banners from Figma to HTML for IAB (or the Interactive Advertising Bureau).

To do this, we need to install a Figma plugin called Bannerify; to do that, we can go to the top toolbar in Figma and click on the little Figma icon and if you go to "Community" and then click on the search bar at the top you can type in the term "Bannerify", and then click on the "plugins" tab and you'll see a result come up called "Bannerify HTML Exporter". If you don't already have it installed you'll see an "install" button on the right-hand side, once you click "install" you get this little checkmark like mine has; it'll say "installed".

Once you've installed it, the next thing we're going to do is just click on the description or the title of the Figma plugin, and this is going to load up the description of the plugin. If you scroll down to the "additional notes" section, the first bullet point contains a URL, and that URL will take you to the Figma design that we're going to be using for this Figma tutorial; that's just an easy way to follow along if you want to use a pre-designed set of animations on some banners, or feel free to use your own if you have your own banner design that you want to use.

Let's jump back into our project and we can just right click anywhere and go down to "plugins" then click on "Bannerify HTML Exporter" and this is just going to fire up the Figma plugin that we just installed. Once it loads, you'll be able to see that we've got all of our banners from Figma represented in the Bannerify Figma plugin, and if we click on the little play icon you can see that they've already got an animation timeline applied. This Figma tutorial isn't going to show you how to apply animations or update timelines or do anything like that; there's a separate tutorial on our YouTube channel if you do want to go through the 40 minute Figma tutorial, it's very in-depth and it'll take you through everything you need to know to set all this up for yourself; it's very comprehensive, but in this tutorial we're just going to be covering exporting an already animated banner set to HTML, going from Figma to HTML for IAB, in this case.

The first thing we need to do is just click on the "Export banners to HTML" button in the top right hand side of the Figma plugin, and once we do that we'll get a variety of different settings; the one we're going to focus on today is just in the bottom right here called "code output settings" and under the "export format" label, we've got a little select drop-down box; if we click on that and scroll down a little bit, you'll see there's a group called "advertising platforms" and all the way down the bottom we've got one that is called "IAB", and that is the one that we want to select for today's Figma tutorial. If you click on "IAB", it'll show you that that's selected underneath the export format and that's going to let Figma and Bannerify know that this is the format we want to export to.

To export these banners from Figma to HTML for IAB, all we need to do is click on the "Export banners" button in the bottom right here; I'm just going to click on that, and this is going to generate all of the code that we need for these banners, and all of the images and zip them up for us. Now that we've got the save prompt, I'm just going to use the default file name and click on "save". If I go to my desktop I can double click on the zip file that I just saved, and inside of that folder you'll see that Bannerify has exported all of our banners into separate folders with the names from the Figma frames and prefixed them with the image dimensions or the banner dimensions.

The quickest way and easiest way to get a look at what we've just exported is to open up the "index.html" file that comes with the banner folder; I'm just going to do that now. That has opened up the browser and it's showing us all of the banners that have just been exported. These are all being previewed at the same time, we can make that a bit bigger if we want to see them all, and to replay the animations you can just click on this little play button. This is just loading in all of the banners at the same time to let you easily see what's been exported, but if we want to drill down into some of the other code that's being generated behind the scenes, what we can do is just go back to our folder.

I'm just going to open up Visual Studio Code, and I'm going to drag in the medium rectangle folder, and also just drag this medium rectangle index file into the browser, just to see what we're looking at. We've got our medium rectangle banner here in the browser and in Visual Studio, we've got our folder loaded in to have a look at what's being generated. You can see here it's generating all of the HTML that we need, with all of the images which are being pulled in from the "images" folder; you can see we've got SVG's for the text layers, PNG for the button and this JPG file for the background; and then we got our CSS file which is going to generate all of the positioning and all of the animations that we specified in Bannerify while we're in Figma.

Finally, we've got our JavaScript file; and this essentially just includes some code that IAB is going to be lookiung for. It's doing some some fancy things here to get the query string in order to obtain the click tag that it's going to want, and then that's being assigned to the banner itself; whenever someone clicks on your banner, it's going to trigger the window to open up the click tag, and the click tag is going to be included once you get these banners into IAB and the click tags going to be pulled in from from that parameter. That's everything that we need. Bannerify generated it all for us, so you don't need any developers, you don't need to know any code. That's pretty much all you need to know to get get these banners out of Figma to HTML, in this case for "IAB".

If we jump back into Figma, that's all done now, it's telling us that we can upload these to either our own server, if you want to put them somewhere to preview for your clients or stakeholders, or of course you can just individually upload those banners to your advertising platform. I hope that's been helpful if you were looking for a way to export banners from Figma to HTML for IAB. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this for other Figmatic Figma plugins, or more ways to use Bannerify in the future.

---

---
type: tutorial
title: How to export Figma to HTML for Sizmek using Bannerify
date: 2020-05-03T00:00:00.000Z
---

# How to export Figma to HTML for Sizmek using Bannerify



#### Video Transcript

Today, I'm going to be showing you how to export animated banners from Figma to HTML for the Sizmek ad platform.

To do this, we need to install a Figma plugin called Bannerify. If you haven't done that already, you can go to the top toolbar and click on the Figma icon and then you want to go to "Community" and in the search box type in the word "Bannerify", then click on the "Plugins" tab and you'll see a result that says "Bannerify HTML Exporter"; I've already got this installed, but if you don't you'll see a button on the right-hand side that says "install", and if you click on that, yours will change to look like mine does with this little checkmark on it.

The next thing we're going to do, so you can follow on with the Figma tutorial is click on the plugin description by clicking on the plugin, and once that loads you'll see in the second section under "additional notes". If you scroll down and go to the additional notes section, the first bullet point has a URL in it, and this URL here on the second line if you copy and paste that into your web browser, that will load up a copy of the pre-designed banners that we're going to be using in this tutorial. That's just going to be a much easier way for you to follow along, otherwise you can use your own banners as well.

Let's jump back into our project and you can see we've got these banners designed already; I'm just going to right click, go down to "plugin" and then go to "Bannerify HTML Exporter", then click on that. This is going to start up the Figma plugin that we just installed and once that loads you'll see that we've got all of our all of our banners loaded in from the designs, and you'll notice that they've already got some animations on them; we can click on the little play button to preview them. This Figma tutorial won't be covering how to add animations or how to configure your timeline, if you do want to get a sense of how to do that, we have another Figma tutorial on our YouTube channel which goes into depth on all of those things regarding animation selections and timelines. That tutorial goes for about 40 minutes and it's very comprehensive; I'd recommend checking that one out if you do need a bit of background on how to set up the animations, but in this case we're just going to export the current animations and designs that have been set up to HTML for the Sizmek platform.

Now we're going to export Figma to HTML for Sizmek, and to do that we just have to click on the top right button in the Figma plugin, which is "Export banners to HTML; I'll click on that, and there's a number of options here, but the one that we're focused on today is under the "code output settings" area here in this bottom right corner and underneath the "export format" we just want to click on that drop-down and underneath the "advertising platforms" group, you'll see about fifth down we've got the "Sizmek" platform. There's a number of them, but in this case we just want to export to Sizmek; I'm going to click on that, and now it's indicating that Sizmek been selected. All we need to do now to export this to HTML is to click on the "export banners" button in the bottom right; I'm just going to click on that now, and this is going to generate all of the code and all of the image files that we need for our HTML banners.

It's going to pop up the save dialog; I'm just going to keep the default file name and click on "save" then I'm going to go to my desktop and double click on that zip file that Bannerify just created once that unzips, you can go into the folder and you'll see that it's exported all of the frames from Figma to HTML. The easiest way to get a look at what's been exported is just to double click on the "index.html" file that comes in the the root of the folder; I'm just going to click on that now. That has loaded up our banners now and we can see that all of the banners that we exported are available; we can click on this little play icon to repeat the animations if we want to, there's some more down here as well; all of them have been exported as we expected.

To get a sense of what has been exported, I'm just going to open up my code editor and show you what's inside one of these folders; if I open up Visual Studio Code and drag in this folder, just the medium rectangle, I'll open up that that file as well in my browser. Inside a Visual Studio we can see that we've got an HTML file and all of the images that we need have been included automatically, we've got our JavaScript, we've got our CSS.

You'll also notice we've got an extra script tag which is pointing to this file called "EBLoader.js" and it's getting served from a content delivery network URL; this is the file that's required to to use the Sizmek ad platform. That gets included automatically, and inside of the JavaScript file that gets included, we've also got these little functions down here which is a click through; this is getting called on the click handler for the banner; whenever you click on this banner you'll be able to fire off that that call and that's going to trigger the URL to open in Sizmek once it gets loaded in. That's all good, we don't need to do any extra work to make that work it's just going to get triggered whenever these banners get uploaded into Sizmek, and you'll be able to add the URL once you're in the Sizmek UI in the browser; we don't need to do any extra work there.

We also have a images folder; this is just where all the images are stored; all the SVG's, all the PNGs and JPGs. The PNGs and JPGs for the the images, and then we've got SVGs that are being rendered out for the text to keep them nice and smooth and crisp. That's essentially all the files that we have.

If we jump back into Figma, we can we can pretty much just close this off now; if we just click on the "X". That's actually all you need to do to get these banners out of Figma to HTML for Sizmek. I hope if you've been searching for a solution to this, then this Figma tutorial has been helpful for you. If you and your team are using Sizmek and also using Figma, and just want a really easy way to get your designs out of Figma into HTML for Sizmek then this is definitely the easiest way to do that, using the Bannerify Figma plugin. Thank you as always for watching, and we'll be back soon with more Figma tutorials just like this one for Bannerify and some of the other Figma  plugins as well.

---

---
type: tutorial
title: How to export Figma to HTML for DoubleClick Campaign Manager (DCM) using Bannerify
date: 2020-05-03T00:00:00.000Z
---

# How to export Figma to HTML for DoubleClick Campaign Manager (DCM) using Bannerify



#### Video Transcript

Today, I'm going to be showing you how to export animated banners from Figma to HTML for DoubleClick Campaign Manager (or "DCM").

To do that, we need to install a Figma plugin called "Bannerify". If you haven't already done so, you can go to the top toolbar and click on the little Figma icon and then go down to "Community" and search for "bannerify", click on the "plugins" tab and you'll see "Bannerify HTML Exporter" pop right up. Because I've already got it installed mine has this little check mark and tells me that it's installed, but if you don't have it installed, you'll see a button here that will say "install", and if you click on "install", that'll change it just to look just like mine and you'll be ready to go.

For this example I'm going to be using the file that you can clone or duplicate to your own Figma project; to do that, you just click on the Figma plugin itself, and underneath the "additional notes", section the first bullet point contains a URL, and if you go to that URL, it'll load up the Figma project that we're going to be looking at in a second which has pre-designed banners with some animations set on them; you can just get started really quickly or follow along with this Figma tutorial.

I'm going to go back to that file right now, and to start up the Figma plugin, we can just click right click anywhere on the page, go down to "plugins", click on "Bannerify HTML Exporter", and that's going to open up the Figma plugin that we just installed. Once that loads, you can see that we've got all of the banners that are in the Figma file are being represented in the Bannerify Figma plugin, and I'm not going to be showing you how to apply all these animations or kind of adjust the timings or anything like that; if you're interested in that and this is your first time using it, I've got another Figma tutorial on our YouTube channel which goes into a lot of detail about how to do this, and it goes for about 40 minutes; it's very detailed and it shows you all the different ways you can apply animations and do all kind of neat things, but today we're just going to be playing with the pre-designed banners that already have these animations set, and all we want to do is just export them from Figma to HTML for DoubleClick Campaign Manager.

To do that, we can simply click on the "Export banners to HTML" button in the top right of the Figma plugin, and when we click on that we'll see a whole range of different options, but for now all I'm really focused on is this bottom right section called "code output settings"; at the moment I've got it set to "Vanilla HTML/JavaScript" (that's categorized under the standard category, and these formats don't include any additional third-party code or any platform specific code); but because we want to export these banners from Figma to HTML for DoubleClick Campaign Manager, we can go to the second grouping called "advertising platforms" and there's a whole bunch of options in here, but for this platform we just want to click on this second option called "DoubleClick Campaign Manager (DCM)", and if we click on that, that will select the platform for us.

You might notice that the option that we had a second ago has disappeared; if I quickly switch back, you can see when we use the "vanilla" options there's an input box here for the URL where the banners link to; putting a URL in there will link the banner to that particular URL, but because we're using DoubleClick Campaign Manager, DoubleClick works a little bit differently; we don't need to manually specify any URL here, but what it's going to do is it's going to add a click tag or some code that's going to be recognized by DoubleClick Campaign Manager (DCM); and when you upload these banners into DoubleClick Campaign Manager (DCM) you'll have the opportunity to associate a URL in the DoubleClick Campaign Manager (DCM) user interface; we don't need to worry about that.

Now that we've got "DoubleClick Campaign Manager (DCM)" selected, we can go ahead and click on the "Export banners" button in the bottom right, and this is going to generate all the code for us. It's also going to export all the images that we need for our banners; it's already finished, it does it in only a couple of seconds, it's very quick. All I'm going to do now is just save it with the default file name that matches my Figma project, I'm going to save that to my desktop just by clicking "save" and then if I jump to my desktop, all I need to do is double click on the file zip file that was exported. If I open up that folder, you can see that we've got all of our all of our banners that match up with the files or the frames that we have in our Figma file.

To get a quick look at what that's done, the easiest way is just to open up the "index.html" file that comes inside the folder, I'll open that up now; you can see here it's exported our banners from Figma to HTML, we can view it in the browser; if we click on this little play button again, you can see it play the animation one more time; it's all looking really good. To have a look at what's going on behind the scenes here, I'm just going to open up my code editor and if we drag the "MREC", or medium rectangle, into the Visual Studio Code editor (you can use any code editor for this), we've got a few files here; we've got our HTML file and you can see in here that there's a few things going on; one is that its output all of the images and the HTML that we need for our banner; it's also included our CSS file which contains all the positioning of the animations, all of the the nice things that we need for these banners to to be animated.

Then in the JavaScript file we've got a few things going on, and the one that's key to the DoubleClick Campaign Manager (DCM) format is this little snippet down here; this is basically adding a click handler on the banner, which means that when you click on it, it's going to fire off this little window, that open function, and it's going to use the click tag variable that the Bannerify Figma plugin is automatically adding in. If you look up here, you'll see this little script that says the click tag equals to "Google", and you don't have to worry about that being being put in, as Google; it's purely just a placeholder and this will be swapped out when the banner gets uploaded to to DoubleClick Campaign Manager.

Jjust to show you what I mean by that, we can verify this code by going to a service called "HTML5 Validator". You can get to this by just Googling "HTML5 Validator DCM"; and if we want to test out one of our banners, all we need to do is go into one of them, highlight all the files, right click, then click on "Compress", and that'll give us a little .zip file. Now that we've got a zip file, all we need to do is click on this "Upload" button and upload it into the HTML5 validator. I'm just going to double click on my zip file. For some reason, this service can be a little bit slow; so if it's taking a little while just be patient, it'll work.

There we go, it has picked up on our banner, and as you can see here we've got all of our items checked off and everything is in place. The way we can test if the click event is working is just by clicking anywhere on the banner, and you can see here we've got a "click was successful and it will track correctly" message, and as I said before, with the the Google domain, you don't have to worry about that; that will get replaced once it gets put into DoubleClick Campaign Manager, and you'll be able to point that to a landing page that you own, or the campaign page that you want to point everyone to for the ad.

That's all accounted for; you don't need to do this test for all of the other banners; all of the code gets exported to be identical, as far as the click tag code goes, and everything that comes out of Bannerify has has already been run through this validator previously.

Whatever you getting from Bannerify will be production ready, and of course you can make manual code changes if you wanted to do that; you can edit the HTML or the CSS or add some custom JavaScript, or whatever you need to do; but the main thing is you've got all the images, you've got all the assets, all the code for this to be production ready if you don't have any in-house developers, or if you don't know code; that's that's totally fine, the Bannerify Figma plugin this will automatically do it for you.

That's essentially how you can export animated banners from Figma to HTML for DoubleClick Campaign Manager (or "DCM") and I hope that's been helpful for you if you've been wondering how to do this; you can you can quite easily do it with the Bannerify Figma plugin. There's a bunch of other formats supported as well, which we'll cover in future Figma tutorials that you'll be able to find on our YouTube channel, if you're interested in those. Thank you as always for watching, and we'll be back with more Figma tutorials very shortly.

---

---
type: article
title: The need for “state driven design”
date: 2020-05-01T00:00:00.000Z
---

# The need for “state driven design”



After many years mostly on the fringes, "design systems" (which were more commonly known as "living style guides" for a while, until "design systems" made them sound much cooler and legit) started really gaining more mainstream popularity and traction over the last 24 months. Many companies have made public announcements and displays of their internal design systems; sometimes based in code, sometimes not.

However, while there are elements of this that are really positive (encouraging re-useability and modularity for design), in some ways, the "design systems" marching band has been something of a big distraction. With the conversation so narrowly focused on climbing the mountain of creating a design system as a goal in and of itself, far less thought has been given to the endgame.

### Your design file is not a design system.

First - for some much needed context to what I'm going to talk about next - just to address the elephant in the room, there still seems to be a wide misconception that a design file that contains some hand drawn (literally) pieces of a website or application - no matter _how_ neatly or _organised_ they might be - constitutes a design system. I don't agree with this idea, because at _best_, it's still just an emulation of the real medium (code running in a browser or native app) that your customers and users are actually looking at and using.

It's disheartening to see companies spending many months or even _years_ all working towards meticulously creating really big component libraries in screen design tools, only to realise later that this big design system project becomes very unstable alongside a "mirrored" development environment which will always be ahead of it. It is difficult to maintain at a small scale with few people, and near impossible to maintain at scale with many people. Indeed, if your company has multiple brands or products that all branch off the same underlying design system, this problem continues to compound with every additional property.

I personally know companies and teams who tried doing this approach back in 2013-2014, and less than a year after "completing" the design system creation (in design tools), the problems of how that relationship with front-end development (and the production environment) might work together begins to rapidly break down.

If you haven't seen this happen before, it's understandable for it to be a blind spot - especially as many design/development teams are disturbingly disconnected from each other - but on a long enough timeline, anyone who embarks on this approach to the "design system project" will ultimately realise that we can (and must) do better.

### Design has not reacted to "React"

As I've written and talked about a number of times before: after 20 years, the way we design things still has much more in common with front end development in 1999 than it does with the front end development in 2020.

Despite being more than half a decade old and forcing us to completely re-think and change the way we think about front end development, designers and design tools have yet to catch up with the ideas that "React" (the JavaScript library for building user interfaces) and those like it (Vue, Svelte etc) have brought to the table.

Before we had the "React" way of thinking about working with "state" and events in development for the front end, we were living in a much different "jQuery" reality that makes little sense with the benefit of hindsight (which is likely how we will view design today when we look back on it with similar hindsight in the future).

The three key concepts featured on React's website are:

#### Declarative

React makes it painless to create interactive UIs. Design simple views for each state in your application, and **React will efficiently update and render just the right components _when your data changes_**. Declarative views make your code more predictable, simpler to understand, and easier to debug.

#### Component-Based

Build encapsulated **components that manage their own state**, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily **pass rich data through your app and keep state out of the DOM**.

#### Learn Once, Write Anywhere

We **don't make assumptions about the rest of your technology stack**, so you can develop new features in React without rewriting existing code. React can also render on the server using Node and power mobile apps using React Native.

### All we have are static components with no ~~souls~~ states.

If we use the React concepts and try to pair them up with the way we currently approach design, we would (in the best case) score ~0.5/3 - we have something resembling components, but they don't really _do_ anything. Our front end environments are operating on a totally different paradigm to the way that design is still generally being approached; the two are completely incompatible. There is no sane way to approach state driven design in our current design tools.

Having personally worked on projects that have hundreds of possible "states" within a single view - it doesn't matter how good or well organized/named your components are inside of a design tool - you cannot possibly create robust designs that account for the interplay of all these possible combinations of future states by approaching it the way we have for the last 20 years.

This is a _huge_ deal, because (again, as I've experienced on many, many projects), if you are not considering the "states" of an application, you're going to have blind spots as a designer, which might not be front of mind while trying to design a handful of "pages" that give an example of some states which might be encountered.

When you compound this problem with the fact that many designers are not even using real data or content from the production environment (often favouring "fake real content" or just using lorem ipsum for imaginary content), you end up in a weird place where you are literally designing based on delusion rather than data or anything based on reality.

If you're designing fake static "pages", with fake content, using fake components and creating fake "states" by stringing a dozen static "pages" (modified versions of the same view) together in order to emulate something comparable to the production environment, you're flirting with a time bomb that will eventually explode once this design makes its way to development and nothing makes sense.

### Extrapolating the “hover states on buttons” problem

It's very telling when a common request for prototypes is being able to show "hover states" on buttons. This might sound funny, especially since the joke that "all conversations about design systems eventually just lead to talking about buttons" (somewhat true, as this paragraph confirms), but this concern is basically "patient zero" for the massive amounts of headaches it will cause going beyond just wondering about the state of a single button.

The "button component" is often used because it's an example of one of the most atomic things you could design - you can't break a button up into anything smaller than itself. If that's true for the component itself, then the same is true for the "states" of the button - a button can have visual interaction states (hover, focus, active, disabled, loading etc) and it can have different text, but it doesn't really many other properties that change.

If we can't even do something like change the "state" of a button under certain conditions without duplicating that button 5 times for the interaction states, then duplicating all those 3 more times for "primary/secondary/tertiary" variants, then duplicating those 3 more times for "dark mode versions", to give us 45 instances of a button, then I don't even want to imagine what designing anything even slightly more complicated would be like.

The question remains, even after you've got these 45 button instances in a design tool, what can you _do_ with them? You cannot make the text on any button(s) "react" to use someone's name when the state of the application changes to "logged in", this needs to be compounded by designing that possible state of those buttons, with the 5 other possible states of that view - because there are dozens of other components that might also do something different when somebody is logged in, or if that customer has new "notifications", or dozens of other combinations that come along for the ride... who knows what might be happening in the state of your application at any given time.

### Design in the “Abstract”

If we are to look at Silicon Valley as the epicenter of the bleeding edge, as many designers tend to (eg. blindly adopting "underlined text inputs" from "Material Design", only to find out 2 years later from the Material Design team's data that they aren't actually very good), then one could imagine that the problems I'm describing would be coming ever closer to being solved in these bigger tech companies with huge design teams.

However, in season 2 of the Netflix design series, “Abstract”, there is an episode that looks at a design team inside of the company "Instagram". There is one short part of the episode where one of the designers is showing off a prototype on the screen which looks like the visual source code for The Matrix or something - it seemed crazy to me, but then I realized that this is "the best of the best", and I felt very sad and confused.

On a more personal version of this: one of the lead design system designers/developers that I know (who works at a well known startup here in Melbourne), recently went to Silicon Valley and had a tour of some very well known tech companies to see how their design teams were doing things. After they returned back home to Melbourne, I somewhat excitedly asked: “So, tell me... what are they doing that we don't know about?” and the answer was disturbingly: “Well... nothing. They're not really doing anything different than most of the bigger design teams at the design-driven companies around here.”

It became clear that nobody has figured it out; and while everyone claims they have _some_ answers (or even _the_ answer), we are still all essentially operating within a very similar set of mostly accepted parameters, mainstream tooling and narrow ranges of thinking about these problems related to problems such as (but certainly not limited to) the need for state driven design.

### “You must study the endgame before everything else”

With such a heavy and narrow focus on just _creating_ design systems, it seems like many have lost sight of _why_ they are doing so in the first place. The moment you have completed your design system project (knowing it is never "done" in some sense, let's define "completed" as something that can be 10x more materially useful to the way you design products), the question becomes something like: "what can we do now that we couldn't before?", with all eyes on your brand new design system, the promised savior to all your problems.

If we take a quote from world chess champion José Raúl Capablanca:

> “In order to improve your game, you must study the endgame before everything else, for whereas the endings can be studied and mastered by themselves, the middle game and the opening must be studied in relation to the endgame.”

To me, it seems like we are spending more time distracted by studying everyone's "opening move" (of creating a design system), that we haven't given enough thought to the rest of the game.

Weirdly, I do get the sense that everyone is almost kind of "happy" being distracted with the project of "creating design systems" as the goal itself, because it means we don't have to think about what comes next; and maybe if nobody talks about it too much, then nobody will get in too much trouble because "we were just copying each other, after all".

If the poorly defined endgame on our current trajectory is simply having a neatly organized and shared set of hand drawn pictures that look like components (from a real website or app) in a design file that makes it _easier_ (but not fundamentally _different_) to continue designing very complicated things that aren't interoperable with front end development and the production environment; I would be very pessimistic about that future.

However, to me, it seems that we both acknowledge _and_ ignore our "secret" endgame; the way we are acting indicates that we _are_ trying to emulate the front-end environment in design tools on some level (albeit one very slow and incremental step at a time), but seemingly without ever considering that we could just going "all-in" on actually _using_ the front-end code itself to accomplish the same outcome instead.

I sort of understand why this isn't a very popular idea (even today, after talking about it for half a decade, most people I talk to _still_ disagree with me on it), especially since the tooling has not caught up to this idea, but if we really don't want to use code, then we _still_ need to come up with a sane way to design things without pixel pushing 100+ possible "fraudulent states" (using fake data) of an application manually across artboards (just the name "artboard" is a tell that something has gone a bit wrong) and dragging arrows between them to create some crazy prototype that has no value beyond an artifact sitting somewhere in the cloud (once it has served its limited purpose).

On a long enough timeline (which is still _far too long_) of trying to trudge our way through this current paradigm (which has _already_ run out of track), I'm still optimistic that enough people will start recognizing the way we're thinking about design systems, prototyping and the _far_ bigger fundamental problem of design and development not being interoperable are things that we really need to think about seriously and solve with greater urgency.

The future is not set - new ideas ("state driven design" is only one of _many_ that we need now and in the future), positive progress and innovation are not automatic - it's up to us to change it; no one is going to save you.

---

---
type: tutorial
title: How to compress SVG images in Figma using TinyImage
date: 2020-04-30T00:00:00.000Z
---

# How to compress SVG images in Figma using TinyImage



#### Video Transcript

Today, I'm going to be showing you how to export compressed SVG files directly from Figma.

We're going to do this by installing a Figma plugin called TinyImage; if you haven't already installed it, you can go to the top left, click on the Figma icon in the toolbar and you just want to search for the term "TinyImage" in the search bar. You'll see "TinyImage Compressor" pop right up. If you haven't actually installed it, you'll see a button that says "install" over here; I've already installed it and that's why mine says "installed", but if you haven't installed it you can just click "install" and when it says "installed" and you're ready to go. Once you've installed TinyImage, click back into your project.

These are the three images that we want to export to SVG. Now, the normal way we would do this is by clicking on the export settings in Figma down here, if I don't have any on that, I would click on the image or the frame, go over to the right hand side, and click on "export" and then I would change the export format to "SVG"; then if I click on "export" that'll export it straight to my desktop, or wherever I want it, as an SVG. If I save that and then open it, you can see there that Figma exported it; that's the original one that we were exporting, I'll just name that this "original".

We want to export a smaller version of that; the way you can do that is by running TinyImage. If you right-click, go down to plugins go down to "TinyImage Compressor" and click on that; that's going to run the Figma plugin that we just installed, and once that loads you'll see that it will load in all of the images that contain export settings already. If the images don't contain export settings, for example if I remove this export setting of SVG and then refresh in TinyImage, you can see that it's saying we don't have any export settings on this particular frame. If I click off that frame and go back to the full list, you'll see that this particular frame has been removed from the list and that's because it doesn't have export settings, whereas these two still have SVG as export settings.

So, we want to re-add the export setting of SVG; that TinyImage can pick it up. I'll click on "export", change that to SVG, click "refresh" and we can see it's popped back up into the list. To export a compressed version, what we have to do is select the layers that we want to export from TinyImage; in this case I'm just going to export the one layer that we just exported using Figma's native export settings and I'm going to use this quality slider to determine how much compression or what quality I want the image to be saved at us. Lower quality will result in smaller file sizes but potentially lower image quality and all the way up the other end you have larger file sizes but better image quality; it's up to you to figure out what that balance should be.

In this case, I'm going to make it fairly low quality because these are SVG images and the quality differences compared to something like a JPEG or a PNG is very different and usually you can get away with pretty aggressive compression in SVG images and not really have any detrimental effects on the quality. I'm going to actually put it down to "20" and click on "Compress".

It's it's extremely quick; in this case it's just done it instantly, and it's saving it out as this file name here, and that's because I've configured it to use the image dimensions in the file name which I can show you in a second. I'll click on "Save", that's just saved it to my desktop, and you can see there it's just exactly as you'd expect. The difference between the two is very slight, but the file size as you can see here in the summary the file size has been reduced by 74%. I know that we're dealing with very tiny file sizes, we started off with 5.6 kilobytes and we've reduced it down to one point four nine kilobytes 74%, it's understandable why that doesn't seem like much, but these are very small simple icons. If you're dealing with SVG images that are much bigger and the original file sizes are much bigger, that seventy four percent increase is going to mean much bigger absolute file size savings for your SVG files from Figma.

I'm just going to re-run TinyImage, and the way we can do that more easily, because we've already run it through right clicking, once we've run it once in a page it'll show up in the right-hand side under the Figma plugin column, and you can see here I've got the little TinyImage icon with the milk bottle icon; I'll click on that and that will relaunch the plugin for me immediately. I don't have to kind of go through the few steps of right clicking this will just do it really quickly from the sidebar.

This time I'm just going to show you why the file name came out the way that it did. The reason is, if I click on this little "Settings" icon you can see here that I've got a custom image file name format setup to follow the convention of the layer name and the width and the height; you can see here when I update that it gives you an example of what that file names going to look like. I could remove all these things here and and and just update that, I'll do that now I'll just leave it as the name; I can actually just remove that and it'll it'll default to that if I remove it, click out of that.

This time I want to export all three of my icons. The way I do that is just by selecting them in the list here, I'm just clicking on them to make sure they're all checked and when they're all checked, you can again pick the quality; I could do something like leave the default quality at 20 but maybe for this third icon I want the quality to be like really low; I'm just going to make that one 5 and then a sushi one for some reason I want it to be 35; you can actually override the quality settings, and any that you don't override with these text boxes will inherit the global compression quality up here; because we've only got one with no value over here you can see on the right the placeholder is defaulting to whatever the global compression value is for those for those SVG images.

I'll leave that as 20 and then I can click on "Compress" again. It's extremely quick with SVG images in particularm it's just basically instant. I'll click on "Save" and this time you'll see that we've saved 64 percent in total, which is almost 14 kilobytes, and it's showing us here that we've been using different qualities per frame or per SVG, because we added an overwrite to this one and this one; that one was at 35, this one was at 5 and that one was at 20; you can see that the percentages are a little bit off; because this one was set to 35, the quality might be better but the file size reduction is also less, but that's okay, we still saved 64 percent which is great.

You'll get a zip file if you compress multiple images at the same time, and it just names that by defaults as whatever the project name is in your Figma; we've got "TinyImage Compression" and that's reflected in the the project title and then today's date. If I double click on the zip file, it'll give me this folder containing all three SVG images and because I updated the file naming convention, we no longer have the "512 by 512" suffix, it's just the layer name as you'd expect from the native Figma exports for SVGs.

They all look really, really good; the quality is great, you can't tell that that we've used more aggressive compression on this one. This one was set to quality 5 out of 100, and you wouldn't be able to tell that there's any loss; the paths are potentially slightly different, but at a glance it's it's very difficult to tell and it looks really good.

That's a fairly good summary of how you can compress SVG files directly from Figma using TinyImage; as I said this is this is a really basic example of just using small icons, which is really handy, but you're going to see huge savings if you're exporting much more complex SVG images like illustrations, much bigger sorts of images or more detailed paths; TinyImage is really good at doing that. If you do need to export SVGs from Figma and you don't want to manually re-run them through some third-party service or command-line tool or website, you can just use the TinyImage Figma plugin, and as you've seen here it just immediately does it directly from a Figma and gives you those nice compressed SVG images.

We'll leave it there; I think this is a really short and sharp use case for using TinyImage, and I just wanted to give you all the different ways you could actually use it for compressing SVG images in Figma.I hope it's been really helpful if you've come here looking for a Figma tutorial for this, an I hope that you get some benefit from it and can use it in your own projects. Thank you, as always, for watching and we'll see you soon for more Figma tutorials just like this one.

---

---
type: tutorial
title: How to export WebP images from Figma using TinyImage
date: 2020-04-30T00:00:00.000Z
---

# How to export WebP images from Figma using TinyImage



#### Video Transcript

Today, I'm going to be showing you how to export Google's WebP image format directly from Figma.

We're going to be taking these images here and exporting them; instead of exporting them to JPG and PNG, we're going to export them to Google's WebP image format, which Figma doesn't natively support, but we're going to use a Figma plugin to help us out with that.

The first thing you want to do is go up to the main menu and click on the Figma icon in the top left here, and you want to go to a search or community, either one, and in the search bar we just want to type in the word "TinyImage", that's just one word; and when you do that and go to the plugins tab, you'll see this Figma plugin called TinyImage Compressor" pop right up. Because I've already got it installed, my button on the right here looks like this, and it's got this little check mark with "installed" on it, but yours might just say "install" if you haven't already installed it; if you click on "install" it'll install it straight away, and you'll see it changed to say "installed" like mine does.

Once you've installed it, you can jump back to your project in Figma, then to run the Figma plugin that we've just installed, you can just right click anywhere, go down to "plugins", and then go down to "TinyImage Compressor"; that will run the Figma plugin that we've just installed.

The first thing to know, is that TinyImage bases the images that it exports from the native Figma export settings on any of your frames or any of your layers. What I mean by that, is if we click on - let's just click on this this matcha photo here - you'll see in the right hand side, we've got this this little section called export, and at the moment I've got two export settings, I've got two different JPG exports. If I remove those, and then click on the "refresh" icon in TinyImage, you can see that it'll warn us, saying that we don't have any export settings on this layer. If you're running the Figma plugin and you're not seeing any images pop up, it's because you need to apply export settings from this little sidebar in Figma, and that way TinyImage will understand what exports you want to be making for all of these different images.

To do that, you can just click on an image layer, go to the "export" tab over here in the right hand Figma colum, click on that and then it's really up to you to set the formats. By default, it's PNG, but I want to use JPG because these are more photo based, there's no transparency, there's really no need for me to use PNG for these ones. On the other hand, these little icons here do contain transparency; I do want to export those as PNGs; at the moment they're set to SVG, what I can do is I can just go down here to my export setting, click on where it says SVG and change that to PNG in my case. I can do that to multiple images at the same time just by holding down shift and clicking on more than one, and then changing that down here to add to PNG; now if I refresh you can see there it's changed to PNG. That's just a brief intro to how these little images pop up in the TinyImage plugin, they're directly correlated to the export settings that you put in to the Figma column.

Now that we've got those set up, we've got JPGs and we've got PNG setup, if we do this normally what's going to happen is it's going to export them just as those formats, it's going to export PNG's and export JPGs. Just to show you what that looks like, I will click on the "Compress" button up here and TinyImage is going to run through all the selected images that we just told to compress, and it's going to compress all of them to JPG and PNG, depending on which layer had which setting attributed.

If I'll double click on that and then open it up, you can see that it's exported exactly what we've asked for, it has given us PNGs and has given us JPGs, and because we've got the quality moderately aggressively set to 50, we've saved 93 percent, but in my case that's too low quality; I want higher quality images, but I also want really small file sizes. If we just keep in mind what the total output is at the moment; we've got 7.6 megabytes for these images and quality 50, but to get better file size savings but also better quality at the same time, what we can do is export these images to a totally different format called WebP.

I'm just going to click out of the plugin and rerun it; I can rerun the TinyImage Figma plugin from the sidebar now that I've already run it once. If you go over to the right hand side and click on the TinyImage icon, that will fire up the plugin again without you needing to right-click anything.

To enable WebP - Figma does not support Google's WebP image format natively - so what we need to do is enable it via the TinyImage plugin. To do that, we can click on the little "Settings" icon up in the the Figma plugin toolbar up here, when you click on that, you'll notice this option here that says "Convert all JPG and PNG images to WebP"; by default that is turned off, but in our case. because we want the WebP image format, Google's WebP image format, to be exported from Figma, we can click on this little toggle and that will enable it.

If we just click out of the settings again, you can see here that it's actually flagged a little update in our list that says in brackets: "WebP". So, WebP is in brackets next to it, we can still see the original format, we've got PNG exports here, but in brackets it's telling us that the WebP setting has been enabled in our settings here; that's why why that looks like that, if we turn that off you can see that that removes it, but when it's on it's telling us that the export setting is for PNG, but that's going to get converted into WebP.

To see what that looks like, we can for example, bump up this this quality slider; let's make it 75 and we're just going to leave all the checked images to the ones that we just did a moment ago. We can compare the outputs, now we've got all these selected to export WebP from Figma instead of JPG and PNG, and I've got the quality selected as 75, we could override these but for now let's just make them all 75. Then we jt simply click on "Compress" once again with that WebP setting checked, and this time it's not going to give us JPG and PNG, it's going to give us WebP.

Now, I'm going to save this zip file and you can see here that even though we increased the quality to 75, from 50 to 75, the savings are still in a really high range. We've just saved 90 percent, 7.43 megabytes in total have been saved from the exact same image set.

If we go to our desktop where the images was saved and then open that up, we can see here that if I just open up that in a new tab compare that, we've got our new exports here which are all the WebP image files; you can see here it's got "Google's WebP" as the format compared to the export that we just did a moment ago, which just exported the original PNG and JPGs.

If we compare the sizes, even though we've increased the quality to 75 from 50, the image sizes are still quite good even though we've bumped up that quality. If we open those up here you can see that we've got these reasonably good looking images, but the file sizes are still really really low, and that's the whole idea behind Google's WebP image format; it's a brand new format and there's not a lot of people using it yet, but I know that if you're a website that gets heaps of traffic and you want to really save on the amount of data that people are consuming, and the amount of traffic that's going through your server, but still have really good quality images, WebP is just a really good alternative to the original PNG and JPG.

The thing you'll notice as well is that TinyImage supports transparency. We've got these little icons here that have transparency, and you don't have to worry about whether you you can't do it, because you need a PNG or an SVG because you have transparency; this exports transparency just fine, as long as you've set the original format for those images as as PNG. For example, we've got this one set to PNG because it has transparency, as long as you've got that selected as PNG. the transparency is going to get picked up in the WebP compression and the WebP file is going to automatically get that transparency. That won't happen for a JPG; JPGs will never have that transparency, but JPG is perfect for photos just like this.

That's how you can export WebP image files directly from Figma. As I said, WebP from Figma is not supported natively, but using the TinyImage Figma plugin and enabling this option that we enabled before to convert all PNG and PNG images to WebP from the Figma exports that will enable you to do it, even though it's not natively supported. And finally; to turn it off, you just simply click on the "Convert all JPG and PNG images to WebP" toggle in the TinyImage Figma plugin settings once again.

I hope that has been interesting for anyone who's trying to figure out how to get this WebP image format out of Figma directly, without having to export JPG and PNG files first, then find an online converter or find some command line tool to do this for you every time. If you do need to export a bunch of WebP image files directly from your Figma project, then at the moment TinyImage is the the only way to do it; but as you can see, it does it really quickly and efficiently, and you don't need to worry about any other terminals or scripts that need to be run after exporting other files from Figma. I hope that you have some success with it, and as always, thank you for watching the Figma tutorial; I hope you learned something from it, and thank you again for watching!

---

---
type: tutorial
title: How to export Progressive JPEG images from Figma using TinyImage
date: 2020-04-29T00:00:00.000Z
---

# How to export Progressive JPEG images from Figma using TinyImage



#### Video Transcript

Today, I'm going to be showing you how to export progressive JPEGs directly from Figma.

To do this, we need to install a Figma plugin called TinyImage if you go to the toolbar in Figma and click on the Figma icon in the top left and then go to your search and search for the word TinyImage which is just one word you'll see a plugin called "TinyImage Compressor" popup on to the "Plugins" tab you'll see this little icon here that'll be quite recognizable instantly, and then if you haven't already installed it you'll see a button over here that says "install", I've already got it installed and that's why mine says "installed" with the little check box, but if yours just says "install", click on that button and then it will change to say "installed" like mine does.

Once you've installed it you can jump back into your project and to open the Figma plugin just right click anywhere go down to plugins then go down to "TinyImage compressor" and click on that and that will run the Figma plugin that we just installed. Because we want to export progressive JPEGs, we're not going to probably do that for these these icons, these are probably more suited to PNG because they've got transparency. You could export them as JPG, but in this case I'm much more interested in these photos that are that are going to be much better for our progressive JPEG output.

The first thing you need to do is make sure that you have export settings on your layers. I've already got them set up but if you don't, I'll just show you what that looks like. I've just removed the export settings on this image over here; if I click on "refresh" in the TinyImage Figma plugin, you can see I got this little warning just letting me know that none of the selected layers, in this case the one I'm selecting now, none of those layers have any export settings on them.

We need to add one at least one to let TinyImage know what image we want to export. In this case I'm just going to click on my image over here and go over to the right-hand column, click on "export", and then that will give me the default option of PNG; but in this case because I want to export progressive JPEGs from Figma, I need to click on this SVG drop-down and change that to JPG; now that's set to JPG I can also add another one; I can add another export setting at 2x and change that also to be JPG.

If I click on this little "refresh" button in TinyImage, that's detected these new export settings that I've added to my image. If your images aren't showing up, it just means that you need to to add those export settings in Figma and tell TinyImage what you intend to export from Figma.

Now that we've got our JPG export settings set up on all of our images here, we've got 1x and 2x JPG on all of them. we can start to export them and see what that looks like. Because we want to export progressive JPEGs. which is a specific format that allows you to load in the images a little bit differently than they usually get loaded in; normal JPGs when you put them on a website and look at them in a browser, they'll be loaded from top to bottom; you'll notice when you see images loading sometimes it starts loading at the top; the strips of the image the top come in from top to bottom, but progressive JPEGs are exported in a slightly different way. Instead of getting loaded in from top to bottom, it loads in progressively sharper versions of the the entire image itself; the first pass will be you'll see all of the image but it'll be not quite super clear what what it is and then it progressively loads in the image detail, but loads it all in one go. Rather than top to bottom line by line it'll load in the full image, but just a lower quality version of it first and then progressively load in a sharper version. It's it's just a different way of using JPGs on a website that might be more suited for your particular use case.

Describing progressive JPEGs aside, now we want to actually create them; in this case I'm going to use the image that we've got over here as a test case. In TinyImage, to enable progressive JPEG exports from Figma, we need to click on this little "Settings" button here in this TinyImage toolbar. If I click on that icon you'll see a couple of options pop up; we're not interested in the bottom options at the moment, but we are interested in this little toggle switch that says "Use Progressive JPEG Compression"; by default that's turned off, but I'm going to click on that toggle and enable it.

Now that we've got "Use Progressive JPEG Compression" enabled; we can close that off and get out of the settings. Now, that's enabled progressive JPEGs; you can see here the format's still set to JPG, but because we've got our compression setting turned to progressive JPEG, that's going to use the progressive JPEG option when we export. Let's click on "Compress" and let TinyImage do its thing, by compressing just the two images to start with.

Once that's done, it's going to save them as a zip file for us. We can just go ahead and click on "Save", and before we open that up, you can see here I had the quality set very aggressively at 20; the quality savings are ludicrous, we've got 96 percent savings on both of those JPGs. The images aren't going to look amazing, but that's just an idea of how far you can actually push it; it's not the full extent, but "20" quality out of 100 is pretty low. You can see here we've dropped from a 5 megabytes to 220 kilobytes and 1.74 megabytes down to 78 kilobytes; we've just saved a total of 6.4 3 megabytes just on those two images alone.

If I double click on the zip file that it has exported for me, I'll open up that folder and you'll see here we've got our two images that we just expected to see. That's the 2x version that we can see here, and it's not horrible; it's certainly got some artifacts here if you look at the these banners in the photo, but if that was half size down to 1x, that actually looks really good you would not be able to tell at a glance that we've compressed it down so far. Comparing that to something that's the original size, where we haven't saved the 96%, I think that 96% saving is a really good trade-off for that.

How do we actually tell that this is a progressive JPEG? I'm going to show you how to do that now. If I close this off, I'm just going to open up my web browser and point you to a page that we can actually have a look at. You can see I'm just using this basic website that I found on Google by searching for "progressive JPEG test". What this lets us do is we can upload an image, if I click on "choose file", open "TinyImage Compression", the one we just did, I'm just going to upload one of those images, and you can see here it's flagged it as "progressive".

It's giving us an example of what a progressive JPEG might look like as well; I'll click into that and just show you; you can see here, I don't know if you could you could see that very clearly, if I refresh that that's probably cached, but it it loaded it in at a slightly lower quality and then and blurred it up. That's roughly what what the idea is behind it. That's cool, that means we've confirmed that the the export worked and we now have progressive JPEGs, which is which is awesome.

If we want to do that again, we can just rerun TinyImage from the Figma plugins sidebar; because we've already launched it, you can just click on this little icon in the sidebar under "plugin" and click on TinyImage, you'll see the little milk bottle icon, and that'll rerun it for you without having to open up your right-click menu. I'm going to re-run this experiment and do all of these images, now I'm going to set it to 50 instead of 20, just to get a slightly more a reasonable output. If I compress that again, this is going to go through eight different images, because we've got retina and non-retina export settings on on all of them, and I just want to give you an idea of roughly what quality you can expect to get across the board if we if we export them all at 50 percent quality.

That's all done now; we can save that, and if we look at the numbers again, it's just super good compression. We've got 92% saved from 8 images, we've just saved an absolute number of 29.5 megabytes. which is which is massive. If you're putting these up on a website and exporting these progressive JPEGs from Figma just to put on your website, then 29 megabytes is massive for your users. You can see the numbers speak for themselves.

We can go ahead and unzip that and jump in there. As you would expect, you've got all the images that we that we wanted, 1x and 2x for all of them, obviously the 2x ones turned out a bit better, but the idea would be just to play around the quality slider and keep doing that until you're satisfied with the output quality versus size, and just keep doing that.

That's the entire process of exporting progressive JPEG files directly from Figma; as always, thank you for tuning in and watching, I hope you've learned something and I hope that it helps you out with your own projects or websites that you've got going on at the moment. Until next time, thanks again!

---

---
type: article
title: Password protection for Figma designs under NDA
date: 2020-04-19T00:00:00.000Z
---

# Password protection for Figma designs under NDA



Working in agencies for the last decade, I've had lots of exposure to the dynamics of agency/client relationships, processes and workflows.

This very often includes working on confidential projects which sometimes require all the team members on the agency side to sign a NDA (non disclosure agreement) that prevents them from talking about or sharing any details of the project to anybody outside of the project, including friends, family or even other people within the agency.

Roughly 30% of all the work I've ever done inside of an agency has been done under an NDA, which means I wasn't able to add any of that work to my portfolio or talk about it with anybody else.

### Working on designs and digital products with Nike under NDA

At my last agency, I spent the majority of my time working on the Nike account; who I would personally consider in the top 5 brands in the world. As I mentioned already, this work was essentially always completed by my team under one massive NDA, because we were working on digital products and experiences that would often accompany a brand new top secret product launch only hitting stores up to 6 months in the future.

In order to work on these projects and collaborate with the digital team at Nike, we had to ensure that we adhered to a number of really strict security protocols. I won't go into all those here, because most aren't relevant, but needless to say that security and privacy are big concerns when dealing with any account that has private or confidential projects.

### Sharing designs under NDA

The human aspect of this is fairly straight forward; simply don't mention what you're working on to anybody not involved in the project. However, we would often be collaborating with not only Nike but a number of other agencies or teams in order to execute an overarching campaign.

In order to share design concepts with Nike, we would _always_ have to send some form of password protected link. Back in 2015 when we were still using Photoshop, this meant getting designs uploaded to InVision and using their password protection feature to send this link around. After switching to Sketch in 2016, this... still meant getting those designs uploaded to InVision and using their password protection feature. _Then_, after finally switching to Figma in early 2018, this now meant that... we were _still_ uploading our designs to InVision and using their password protection feature.

You're probably thinking (or shouting, as I basically was): "We're using Figma now, and they have an awesome 'share' feature built in! Why can't we just send clients an invite to make a Figma account and view the design directly in there?"

Right; so, why can't we?

### Why agencies (unfortunately) aren't ready to adopt Figma's share feature

The main problem for our agency/client relationship and adopting the built-in Figma sharing method was that sharing a Figma design meant sharing the _entire_ design with client, not just the "latest" or not just "frame 1 and 2". Inviting them to the Figma meant that they could see all the previous versions, all the work in progress, all the (for lack of a better term), _mess_.

To be clear, I was and _am_ all for this level of transparency with clients. This is probably crossing into another topic, but do I think the agency model of working away in the dark for weeks on end and doing a "grand reveal" only when everything is _perfect_ has proven to fail 100% of time. However, this is still the way that both agencies and clients still seem to prefer working, a strange, ironic mutual agreement not to collaborate on anything until everything is "done".

The joke I usually make with designers is when I'll ask how a design is going and they say it's 90% done, I'll usually reply by saying "Cool, that's good; so we're half way there".

Acknowledging this is important, because it explains a big part of why InVision seems to be so ingrained in the design workflow in agencies. It offers a really simple way for clients to review designs: "Click this link and enter a password".

### Don't make me (the client) think

In my experience, clients love having password protection over any other method of sharing digital work securely. Asking them to sign up for something like a Figma account just to look at the designs (while it seems like a relatively simple ask) is not something they will often feel comfortable with or happy about.

Working with clients who are digitally drowning in emails, meetings, chats and deadlines makes you realise that they truly don't have the head space to be worrying about "yet another" account or program they need to use.

Very often a client just needs to ensure that a design is on-brand and there aren't any words or images used that fall outside of the campaign. Getting "sign-off" is the common term for it. When you're working to _extremely_ tight deadlines, speed and time saving is everything, clients and agencies do not have the luxury of time to leisurely be manually creating preview links (on the agency side) or creating accounts (client side) just to look at some images and give a thumbs up or down.

If you can save your design team (and clients) these wasted hours every week, you're really at an advantage to give your own design team more breathing room to actually focus on actually _designing_ (not worrying about the additional burdensome process of uploading the designs to a preview link) and speed up approvals with clients.

### The elephant in the room: Designers do _not_ enjoy using InVision with Figma

Because we as an agency had become so reliant on InVision for sharing designs while we were still using Photoshop and Sketch, when we finally switched to Figma in early 2018, InVision naturally came along for the ride.

While clients and management might think InVision is okay, the designers were already wasting _hours_ of time getting designs from Sketch into InVision, because the official "Craft" plugin seemed to be broken half the time.

After switching to Figma, it seemed like the promise of all its amazing collaboration features would save their souls from this crazy InVision process, but unfortunately it was still considered the "best" option of the few InVision alternatives for Figma.

While we InVision accounts for our entire team, literally all we used InVision for was uploading these JPG images to a password protected preview page; and even _that_ only feature being used was wasting hours of time every week for our design team.

### Introducing an alternative to InVision for password protection in Figma

I hated seeing my design team getting frustrated with this process, and it had always been in the back of my mind that we could do better.

After leaving my agency at the end of 2019 to start Figmatic; a couple of months ago, I decided to started working on a brand new plugin called <g-link to="/crypto">Crypto</g-link> to start solving these problems and provide an InVision alternative.

Crypto allows you to share password protected Figma designs directly from your design without manually exporting frames and uploading them to other platforms like InVision. The first version has just been released, which solves a few of the issues I've just described, namely:

1. Remove the need for clients to create any accounts
2. Share simple URLs with password protection
3. Choose which specific frames to share (and not share)
4. Integrate _directly_ and seamlessly into Figma as a plugin
5. Designer curated versioning to document progress

With Crypto, you can click the frames you want to share, hit "Securely Share Designs" and moments later you'll have a unique and securely preview URL with an automatically generated password. The designs are stored as encrypted images on Google Cloud, and are automatically deleted after 30 days of not being accessed.

### There's more to be done

The first version of Crypto solves these initial problems that I was personally seeing daily at my previous agency, but there's still lots more to be done. For starters, static designs aren't the only thing being shared from Figma, there's also interactive prototypes. The next step will be adding support for Figma prototypes and running them entirely in the browser behind the same password protection and encryption the current version has already provided.

In the meantime, if any of these problems resonate with your own team, I would love to hear your feedback on the <g-link to="/crypto">Crypto</g-link> Figma plugin, so I help make your own workflows less painful.

---

---
type: tutorial
title: How to compare local website builds with Figma designs using Pixelay
date: 2020-04-17T00:00:00.000Z
---

# How to compare local website builds with Figma designs using Pixelay



#### Video Transcript

Today, I'm going to be showing you how to compare your designs from Figma with a real website implementation that's based on those designs.

To do this we're going to be using a Figma plugin called Pixelay, and if you haven't already installed it, I'll show you how to do it. You can go to the top left and click on the Figma icon in the toolbar go down to community click on "plugins" and then in the search bar at the top if you just type in the word "pixelay", hit enter, and you'll see it pop right up as the the only result; as you can see here I've already got it installed, but if you haven't installed it yet, you can click on the "install" button on the right hand side and it'll change to look like mine where it says "installed".

Once you've gone ahead and done that, you can jump back to your Figma file. In this case, I'm using my friend's website design, which is in development, and we can actually compare what's in the Figma file with the development build. The development build is currently running locally in my browser, this is the development version that's in progress and I can click through it this is the real website. I basically want to compare this website build with the original Figma designs and see how how close they are.

Now that we've got Pixelay installed in the right-hand side of the menu, if you just right click anywhere on the screen, go to "plugins" and then go down to "Pixelay Development Comparison" and click on that. You'll see this is the initial screen that comes up; because I've used the Figma plugin before, I have a few things already selected, but if you're running it for the first time none of the frames will be selected.

To run you through what's happening, essentially all of the frames that you're seeing in the listing inside of the Pixelay Figma plugin is mirroring all the frames that we can see on the left hand side here. I'm in a page called "New Designs", and this "New Designs" page has all these frames in it; you can see that there's quite a few and they're all being mirrored in the Pixelay app plugin screen.

I've already put in my URL, but you can see here, if I actually remove the URL from the text box, we've got some text here that is asking for a development URL; then it's got an example of a URL that we could use, which is localhost port 8080. The way you can get that URL is by going to your web development build and clicking in the URL bar and seeing what that URL is; in my case it's actually localhost on port 3000. I'm going to copy that URL and I'm going to paste it into Pixelay, and you can see here it's populated it, and all of the frames down here have also been pre-populated with localhost 3000.

You'll also notice there's a few frames here that have been overridden with different URLs, and the reason is because Pixelay supports comparing multiple designs against multiple URLs at the exact same time. If you're only comparing one page and you just want to compare the home page or just one sub page against a couple of frames or a couple of sizes, a larger width and a shorter width for example, you can just put in this top one here, and by default everything you select will inherit that 3000 port.

In my case, I want to compare a couple at the same time, so what I can do is I can check and uncheck what I do and don't want; in this case I can uncheck the "writing" pages and I can just select the "home" page and the "home" page for mobile; those correlate to this page here, this frame here, and then we've got some mobile designs over here. In this case, I've got the mobile "about" page and the "home" page on mobile as well; I've got those four frames selected and I've got my URL for the local development environment put in there and then the overriding pages here, "/about" which correlates to this "about" page here; that's where I got that URL from.

Now that we've got all those ready, I can click on this "Compare Designs" button; it's going to compare those 4 frames we just selected; if I click on that, what that's doing now is it's actually going through those frames in Figma, getting all the image data and it's uploading it to a private storage bucket and creating a unique URL which is actually going load in these designs over the top of your development builds in the browser. We'll see what that looks like in just a moment once it's finished uploading.

Okay, it's telling us that the comparison page is now ready, and in order to compare our designs we can open the link in our browser. There's two ways of doing that; one would be to click on this little "copy" icon and that will copy the URL to my clipboard and then I can just paste it, but the easier way is to just click on this "open link" link here and that will open up a browser tab with the URL that's just been generated.

you can see here we're running on Pixelay on the Figmatic app domain, it's just loading in our designs now and this is essentially going to sync up the designs that we just had in Figma and our development build. The images are loaded and you can you can get a sense of what's happening already. We're currently in the Chrome web browser at the URL that was just generated, and if I scroll across you'll see here that the 4 frames we selected have all been loaded into the browser.

If you've already spotted it, you can see that there's these overlays that are that are visible; what's going on there is we've got this little toolbox in the bottom right hand corner and we've got this whole suite of overlays available to us, and tools available to us. By default Pixelay uses a mode called "transparent overlay", and what that does is it overlays the Figma designs that we just selected onto your live development build and lets you use this little slider here to actually move that up and down; you can change the opacity from 0 to 100. If it's at a hundred percent that means that we're looking at the Figma design and all the way down to zero percent reveals the live development build, and anything in the middle gets you some level between that lets you compare them.

That's one way of doing it; there's a few other modes as well. If you just want to do a really quick toggle between Figma and the development build, these two first options switch between those; this is the original Figma design mode this is the web development build mode. If you just want to toggle completely between those two we can do that and that all that will come through. That's roughly what those look like. The third mode is the one we just looked at, that's the opacity opacity mode.

The fourth mode is one that's called split screen; split screen will let you have the Figma design and the build up at the exact same time at at full opacity, but you can actually swipe between the two and that's a really cool way just to get a quick sense of what's different or what's the same. We can see here for example, this is obviously looking a bit off. There'll be some that are less off and some that are more off. This text look like it looks like it's completely wrong and this one's not looking too great either.

The other option we have is the fifth one; that's blended diff overlays, and this one essentially does a diff on the foreground and background overlay; you can see up here there's a really clear sense that things aren't aligned. If everything is looking perfect and aligned, you won't see any overlap and any of this jagged or offset text, it should just line up exactly if it's correct, but we can see here there's clearly some things that are going wrong. You can slide that up and down as well if you want to get a bit more of a sense of what's happening underneath the scenes, you can change that opacity in this mode as well.

The other mode that we have available to us is mode six, which is the draggable overlay. You can see here in these particular mockups, because we're using this pseudo mobile Chrome browser or Safari browser at the top, that's automatically going to throw our designs off as well. What we can do is we can reduce the overlay a little bit; we can see what's going on and if we need to we can re-adjust our designs just by clicking and dragging them and that'll let us move that that Chrome window up and out of the way, and give us a more accurate picture of what's going on. This can be really handy if that it's looking good but there's something that's pushing the the site down artificially, or you just want to line up the main thing and see what else is out of whack. The draggable overlay is a really good way to correct any mishaps in the browser that might be throwing off the original design positioning. That's a really cool way of doing that, and this will this will move them all at the same time, that's really handy if they've all got the same error if they've all got this bar at the top or something like that, you don't have to manually drag each single frame exactly, you can get it right once and then they'll all inherit it as well. That's a really cool way of just realigning it.

The last tool that we have in the toolbox is this pixel measurement device. We can see here that there's a few things that have gone wrong. For example, this text here is clearly sitting way too low; what we can do is, you can just click and drag and this will automatically give you on-screen pixel measurements. You can measure the distance between certain discrepancies, so we can see here that if we measure between these two elements that we've got roughly 70 pixels of extra margin that shouldn't be there that we can bring up. That's just a really quick way of getting the distance between two elementsl left or right, up or down, you can go either way and that's a really nice way of getting measurements to actually put back into your codebase.

You can see on the corners here as well we've got a ruler; that ruler is accurate to pixels. For example, if I measure between this and this, it's exactly 100 pixels. If you just need a really quick way of lining up measurements, you just overlay these two corners here and get a rough sense of how wide that is, or how tall something is if we're using the side one. That's pretty quick.

Tto show you practically how you can make changes on the fly, what I'm going to do is I'm going to split the screen up and open up my development build at the same time. If I just bring this down a bit and put them side by side. I'm only using one monitor, and this would be much easier with having two monitors set up, but that's okay. As I mentioned before, this copy here is clearly incorrect but because we're running a development build at port 3000, it's actually showing us what page each one is getting pulled in from up here; you can you can click on those links and that'll open it up in a new tab and show you exactly what URL is being used per preview.

In this case, we can see here the home preview is just purely on the home page. I have access to that in my code, this is my code over here, which is being run in the browser. I can see that the copy isn't right, it just says "designer in London", but it's really meant to say "experience and interaction designer in London". We've also got some italics here which aren't showing up in the design. To fix that, I can change it in my code base here. If I change that to "experience and interaction designer" and just save that, because we have live reload going in the background, you can see here it's immediately updated my build in the preview; I didn't even have to refresh the page, as soon as I hit "save", it's pushing that update into the to the browser window and I can immediately see the change here.

The other thing is that we don't want are these italics, so I'm going to remove those hit "save" again and you'll see here, it's reloaded the page. The reason it's taking a second to come in is because there's some entry animations going on, which is cool that you can see all those anyway. Here we can see that the line break should actually be after the word designer, so I'm adding that in. Okay, and I've capitalized "designer" even though it's not meant to be capitalized, so I'm just going to remove that capitalization, re-save that, and there we go. That's looking a little bit better, if we toggle between the two now we can see that the copy is correct. That's really cool that we can see all that being updated. The other thing is we've got this menu overlap here, that's another thing that we could tweak if we if we wanted to do that as well.

That's a super easy and fast way of doing this if you've got a development version running. I should point out that you could run this against live URLs too, and I can give you a really quick example of that if we jump back into Figma now. I'm just going to close the Pixelay plugin and restart it. Because we've already run the Figma plugin once, if you go over to the right-hand side you'll see this little "plugin" section in the column, and you'll see a little icon with the Pixelay icon; if you click on that, it'll re-run the Figma plugin without you having to right-click and find the plugin in the in the context menu.

Okay, this is refreshing the page, and just to give you a quick demo of how this can work against live pages as well, I'm just going to use the Figmatic website. If I do "hypermatic.com", and it doesn't have a port. Obviously this is a completely different website to the one that we have in the design, but this is more of just an example to show you how it can work on a live website as well. I've just replaced the "about" page with the "Figmatic about" page and the desktop version as well, and then for the home screen I've just left a blank because it's inheriting the Figmatic URL from up here. If I click on "Compare Designs" again, it's going to re-run what we just saw the very first time.

Just while this is loading, I wanted to mention one important caveat to to using live URLs as opposed to development/localhost URLs, which is really what Pixelay is built for. It's built for being able to make quick changes in development before the site's gone live, before you've sent it out to everybody on your team and telling them it's perfect, when there might be some things that are wrong with it; that's that's really what it was purpose-built for. However, if you have already pushed something live, this is a way that you can validate what you've actually put live to the designs as well.

Okay, the comparison page is ready, we can click on the link once again. I'll actually just show you how to copy paste it; if you want to do the copy/paste method, you just click on this little "copy" icon here, that'll copy it to my clipboard, then I just go back to Chrome, paste it in and hit "enter".

That's going to load my images now, it's just downloading those and syncing them up against the web URLs. This is going to look pretty funny, but it's just more of an example to show you what it does look like against a live site. Okay, we've got our "about" page on the Figmatic web site, and it's being overlaid against our Figma designs that we just just had a look at. You can see here clearly, they're two completely different designs, but the main thing to note is that up here we can click on that URL preview and it is in fact loading it from the live domain.

You can use this to compare live websites (obviously they would need to be relevant URLs for it to be useful), but you can use this as a method to compare with a live site as well. You're not going to be able to make those quick development changes the same way that you you can with a live development version running, but again,it can just be a nice way to revalidate a design that's already been shipped or published to your live web site, that can be quite quite handy.

I do have to say the important caveat is, the reason this is working against something like "hypermatic.com" is that "hypermatic.com" doesn't have any any code that's blocking it from being used in an external service. If I rerun this example for you to show it show you what I mean. I'll just rerun Pixelay now, and I'm just going to give you a really quick example of the edge case where this this isn't going to quite work. If I just do one page this time, and this time I'm not going to use my own website, I'm going to use "google.com", and I'm just going to compare one, just so you can see how it doesn't actually work.

The reason it's not going to work is because for security reasons and other reasons in general, a lot of websites will add protection on it to make sure that they can't be loaded into other web pages, and and that's not every web site, but certainly a lot of the bigger ones who have a lot more issues with people trying to pretend to be them or things like that. They'll tend to have some code on the server that'll block you from using a service like this against their website.

You can see here that the design has loaded in perfectly, but if we go to the development build, you can see that it's blank and we've got this little sad face here, and that means that the page couldn't be loaded because there's there's an error going on behind the scenes. If I "inspect" the page and go to "console", you'll see here that it refused to display Google because "The X-Frame option is set to same-origin"; if you if you see that error come up when you go to "inspect" or go to your dev tools. you'll know that you can't be loading it in from something like Google.

Having said that, this isn't an issue for any website that you own and and have control over. If you are doing this against a a development build locally, a "localhost" build like the one we were just doing here on our own local development environment, that works perfectly. and in fact that's really the way you you should be doing it most of the time. However, if you're uploading your builds to a staging URL or an internal preview URL, as long as you're not actively putting that code to block frames being loaded on cross-origin domains on to your own servers, then Pixelay is going to work perfectly fine for those development preview URLs, too.

Anyway, I just wanted to give you a little bit of a heads up on that in case you run into that error, but as long as you're sticking to local development and sticking to websites that you're building, you really shouldn't run into any issues at all.

I hope that's been a valuable Figma tutorial for you, if you've been wondering how you can get your developers to be more aligned with with the original design, or if you're a creative director or a lead designer who really doesn't want to spend all of their time figuring out what's what's not right in the design what's clearly not working and then drawing lines on a piece of paper to tell the development team what they need to fix; this is a really good way of getting the distance between design and development down to pretty much zero. You want the design from Figma and the development environment to be one and the same; you should be able to see them in tandem, and that's exactly the problem that Pixelay has been built to solve.

I think that's a great place to end. It if you have any questions, as always please just let me know; or any suggestions that you think that the plugin would be better with, I'm always happy to to listen to those suggestions and and get them added into the plugin. Thank you very much for watching, as always, and stay tuned for more Figma tutorials very soon.

---

---
type: tutorial
title: How to password protect Figma designs using Crypto
date: 2020-04-13T00:00:00.000Z
---

# How to password protect Figma designs using Crypto



#### Video Transcript

Today, I'm going to be showing you how to password protect your designs in Figma using a Figma plugin called Crypto.

The first thing we want to do is install the Crypto Figma plugin. To install it, go to the Figma icon in the top toolbar, click on that, and then go down to "community", clicking on "plugins", go to the search bar and type the word "Crypto", and you'll see it pop right up. I've already got it installed on my computer, so if you haven't installed it yet, you'll be able to click on that little button there and it'll change the state to say "installed".

Now that we've got the Crypto Figma plugin installed, we can jump back to our Figma file. I'm using a freelance website design from one of my friends, and I basically want to share this design with other stakeholders securely; and I want to be able to do that by adding a password. The people I want to share it with might not actually have a Figma account and they might just want to look at it really quickly using a link and not have to sign up to Figma and create a whole account.

If you just right-click and go to "plugins" and go down to "Crypto Password Protection" and click on that, this will fire up the Figma plugin that we just installed. The first thing to note is that we haven't run this plugin before, so the first thing that's going to show up is a representation of all of our frames in our design. They all pop up to mirror the layers that you already have in your Figma design and so what this lets us do is we can select all the designs that we want to put into our password protected Figma preview link. In this case we can select as many as we want, but to give you a bit of a demo I'm just going to select the first frame which is the "projects" frame and I'm just going to click the "Securely Share Designs" button.

What this is doing is it's basically creating retina images of all of your designs that you've selected and it's creating an encrypted password protected link and securely uploading these images to very secure Google Cloud Storage.

Once it's finished uploading we're going to see a link and we're going to see a password pop up. Let's just give it a second, this will vary depending on how big your designs are but it's finished uploading now, so you can see that the secure link is now ready. What we can do is we can either copy this link here or click on it, so if we click on that link it'll open up in the browser or we can go down here and click on this little icon to copy the secure link and that will copy it to my clipboard. We can also do the same thing for the password field, so this is really handy for easily getting these details to share over email or Slack or any other method that you want to use to share these details with stakeholders. We can copy the password here, I usually click on that icon just to get the password and then I just jump up there and click on this link here, which will open it up in the browser immediately.

This is what the login screen looks like, this is the screen that you'll be presented with when you share this link or if you open that link yourself. We're just going to paste our password in that we just copied using CMD+V (or CTRL+V if you're using Windows) and now that we pasted that in we can click on the "login" button. If we click that, that's going to authenticate us... and we're logged in. You can see that the design we were just looking at in Figma has been securely uploaded to this password protected link. We can scroll up and down the entire page, and a couple things to note is we've got a timestamp, so that's going to show us how long ago the design was uploaded, this title here is getting pulled in from Figma, so that's the actual page name or the project title or document title. This little text down here where it says "projects", that's just getting pulled in from the name of your frame, so whatever you name the frame in Figma, that text is going to show up as down there.

This is the most basic example of using Crypto but if we jump back to Figma let's just close Crypto and we can rerun it. We can relaunch it from the sidebar over here because we've actually already opened it using the right-click menu before, so you can use this little shortcut over here to open it directly.

Okay, so this is the second time that we've run Crypto. You'll notice things look a little bit different; first of all it has remembered our selection from the last time and the buttons have changed or have been added, so instead of just saying "Securely Share Designs" we now have "Upload New Version" and "Update Last Uploaded Version". The primary button is to upload a new version and the secondary action is to update the last uploaded version. The last updated version will essentially update what we just uploaded the previous time we ran Crypto, so you can essentially override your design that you just uploaded whatever you just uploaded to that first version this will override that; the link will stay the same but the design contents will get updated. I'm actually going to do that now, just so you can see what it looks like. I've just added the "about" page and clicked the "Update Last Uploaded Version". So, what this is going to do is create retina images from the two frames that we just selected, securely upload them and encrypt them, but that link is not going to change; the link will stay the same and the designs will be updated. This process is very similar to what you might have used with a tool like InVision or something like that, but this is a really good InVision alternative because it works directly with Figma and it's a much lighter way of password protecting Figma designs; you don't have to opt-in to the whole InVision ecosystem just to use it with Figma; Crypto has been built from the ground up just to securely share password protected designs directly from Figma.

Almost there, it's just uploading the retina version of the about page. Once this is done the link will look exactly the same as the one that we just had before. You can copy the password again if you need to but we've got our link here and you'll be able to see in a second that we can compare this link and it'll look exactly the same as the one we've got before. I'm just going to jump back into the browser because we already have the page open where it's still authenticated; I can just refresh it and because we've updated that design refreshing it reloads that URL and you can see here that even though the URL is is the same the designs have been updated; it remains unchanged compared to before but there's a few things that are different since the last time we looked at it one is that the timestamp has been updated saying that we uploaded it two minutes ago and down here we have this brand new navigation bar which we didn't have before and it's got one out of two; it shows us that we've got projects and the about page now and we can click on those thumbnails as I've just done to navigate through the two pages that we've uploaded; that was a really easy way just to quickly update the last uploaded version of the design you might have already shared it with somebody and just wanted to quickly update it; yeah clicking on these arrows will also switch between the frames if you don't want to use the the little nav bar at the bottom and the keyboard left and right keys will also do that or you can click and drag as I've just done; as you can see we can just jump between those really really easily using the navigation bar will give you a really nice overview of all the frames you've added; if you've got a lot more you can get a really quick sense of every that's in the project and quickly jump between them without clicking left and right a hundred times.

Back in Figma, I just want to show you a couple more things. Let's relaunch Crypto from the sidebar, and now that we've done that experiment, I just want to explain a couple more things. The first one is this little icon up here; this little padlock which wasn't there the first time but it's there now, if we click on it we're going to get a little pop-up that looks similar to the confirmation message that you had after uploading. It just gives you an easy way to copy the password and copy the link without having to get to the end of the process every time. If you've forgotten the link or you just want to quickly copy it to send to a co-worker or a stakeholder, jump in here and click that button for password or the URL, and that's just a really quick way of jumping back to your preview.

Now that we've got those details we can jump back in to our main window here and these little icons that I'm looking at now they haven't been used before but they essentially allow you to drag and drop the reordering of the frames; if you want to have the the about mobile page added in; we've got three now but let's say that this new mobile design is much more important than the project's page for this new version we want to upload what I can do is drag that projects file down and this is going to actually push the projects page down to the bottom and we can elevate the mobile about page to the very top because that's what we want to highlight in the new version that we're gonna add; it's really easy to reorder these layers they're super easy and smooth just to reorder and you just click and drag click and hold the mouse to her and set that order; now we've set this order we're not going to click the "Update Last Uploaded Version", this time we're actually going to click this other button which is "Upload New version"; clicking on that now.

Just to explain what this does, it's essentially going to create a brand new version, as Crypto supports versioning instead of just having one link that gets over in every single time, which we can do (as we just saw) but I know from experience, working yet certain companies and design teams that you want to have multiple versions of the same file. The reason for that is if you make substantial changes you want to go back and easily swap between them to compare the differences, Crypto will actually create a brand new secondary URL which means that people who already had the last URL that we just generated they'll still be able to see that design without without any problems. We'll also be able to send this new link around which will link to the new version directly but both of those links will let you switch between the versions on the fly; you're essentially getting versioned links that are super helpful to deal with multiple stakeholders, that that comes in really handy.

I'm going to show you what that looks like in a second, the designs have finished uploading and you can see here that the URL is slightly different the the characters in the last URL extension was slightly different, this one has generated a brand new subpath in the URL. If I just copy that URL and jump back to our browser, and because I'm still authenticated, I can actually just paste that in over the top of our old URL here. I'll paste that in, jump to that; we're still authenticated and we can we can still see it. If we were to close that tab and reopen it in a new tab, we'd have to login again; and that's just a way to force security, so it doesn't make people logout manually, it'll just keep the authenticated session isolated to each tab which is really neat.

As you can see, it's slightly different with our new link in here. First of all, you can see that we've got version 2 added into our little heading bar and the timestamps have been updated as well. You can see this is a new version and the title is now a clickable title, because we've got this little arrow and little hand cursor; we can click on it switch between versions. Version 2 is the current one we're looking at, but we can go back to version 1 and that's going to load up the version that we were looking at a few minutes back; it's telling us that it was uploaded 9 minutes ago, which was the one that we just uploaded a minute ago, and we can immediately just switch back to version 2 with one click; you can see the mobile feature that we've got at the first frame, flick through the other reordered pages and we can see our entire mobile design as you'd expect, the larger design works perfectly, and down here now we can we can see we've got 3 items instead of the 2 from before, and and they've been reordered to the order that we set back in our Figma plugin in the Crypto plugin.

If you wanted to you could re update the order again. If we wanted to update that version that we just uploaded once again, because we made a mistake or something, and "projects" was actually meant to be at the top and we didn't realize, then you don't have to create a new link every time if you've already just shared that link before you realize you made a mistake, then you want to make a design update you don't have to give them a whole new link. You can just let them keep that link and click this "Update Last Uploaded Version" button and then that will basically update version 2 to reflect all those changes, but you can obviously use the "Upload New Version" button as well. That will give you a new version which will have version 3 in there, but for now we've just got the two versions.

That's essentially what using Crypto is like in Figma at the moment. I've shown you how to use it for creating static designs or static previews of frames but this interface will evolve in the next version of Crypto to support prototypes as well. Instead of swiping from left to right between frames, it's actually going to support clickable hotspots and transitions from Figma and create secure password-protected Figma prototypes that you'll be able to interact with directly in the web browser and share that around securely as a password protected link. For now, we're just supporting the static designs, very similar to what you would see in a standard InVision share link, but I think this is just a really lightweight great integrated alternative to using InVision with Figma. Figma doesn't really play nicely with InVision, so Crypto is a great option if you're looking for an InVision alternative or just want some simple password protection in Figma, because that just doesn't come with the native Figma experience.

I hope this has been a helpful tutorial for you if you've been trying to figure out how to password protect your Figma designs and get away from the InVision workflow or the standard Figma sharing workflow. I'm looking forward to doing the next tutorial with prototyping once that's ready to go, but until then, as always, thank you for watching.

---

---
type: tutorial
title: How to compress PDF files in Figma using TinyImage
date: 2020-04-12T00:00:00.000Z
---

# How to compress PDF files in Figma using TinyImage



#### Video Transcript

Today, I'm going to be showing you how to export compressed PDF files directly from Figma.

To do this, we're going to be using the TinyImage plugin, so if you haven't already done so, you can go to the Figma icon up the top here; click on "Community"; click on "Plugins"; and then up the top here, if you just search for "TinyImage" and hit enter, you can see here I've already got it installed on my computer. If you don't have it installed, you'll be able to click on the "Install" button over here and then you'll be able to use the Figma plugin in your designs.

Now that we've got that installed, you can jump back over to your project. In my case, I'm going to be using this "Figma Design Principles" file to demonstrate how to export to PDF. The first thing to do is open up the Figma plugin that you've installed. If you right click anywhere, go to "Plugins" and then just jump down to "TinyImage Compressor" and click on that; that's going to run the TinyImage plugin.

The first thing that you'll notice is it's giving us this little message saying that none of the selected or visible layers contain any export settings. Export settings are something that is native to Figma, so if you click on any of your layers you'll see down here there's this little export block in the right hand side column. If you click on that "plus" symbol, you can see it's giving you the option to add these export settings, so you can choose from PNG, JPG, SVG and PDF. In this case, we're going to select PDF and we're going to do that on this layer. You'll notice that nothing has changed up here, so what we need to do is click this little "Refresh" icon in the TinyImage toolbar. If we click on that, you can see now it's just detected our new export setting on the layer, so we can see here this frame, the "Approachable" frame, it's got an export setting of PDF and the other two still don't; so I'm going to add PDF export settings to the other ones as well just so they're all consistent. Again, I'm just clicking on the frame, going over to export, adding a PDF setting. I'll go to this one I'll do the exact same thing, go down to export down here and change that to PDF, and then again I'm going to click on the "Refresh" button. It's only popping up with that one now because I've got that layer selected, if I deselect all of the layers and just click anywhere you'll see all three pop right up.

So, now we've got all three of our frames with PDF settings and so I guess the key thing is we want our PDFs to be much smaller than the the exports coming out of Figma. To do a little bit of a baseline, what I'm going to do is export these frames normally from Figma and then we can compare what the file size differences are. So, if you go up the top to file and then click on export you'll see the little Figma export module come up here, and I'm just going to export all three of these, so I'm just going to click export it's going to tell me to save it; so I'm just going to save it in a folder I've created called "Figma", and if I open that up you'll see here that I've got the three files that we just exported. So, I can see see those three and you'll notice the file sizes 6.1 megabtes, 6.3 megabytes and 876 kilobytes, so those are slightly too big for what we want.

So, because we're using TinyImage, what we can do is we can actually tell TinyImage what quality we want these PDFs to be saved at. There's three different settings for PDFs, there's the lower setting which is 72dpi, 150dpi is the sort of middle ground and then the maximum setting is 300dpi, which is kind of print quality dpi; so just as a bit of a test we'll keep it at 300dpi, which is the highest. We've got all three frames selected and we can actually change that if we want to but in this case I want all three so once you've selected all three pick two the quality you can just click on this "Compress" button up here, and what that's doing now is it's analyzing those 3 PDF files, applying some compression and then it'll let us save them save them out.

You can see here it's just automatically given us a save prompt, it's named the zip file that it's going to save with the current document title plus the date and time so I'm just going to leave that for now and click Save you can change that if you want and just before I open that you can see here it's actually told us how much it's saved PDF export so this one's gone down from 6 kilobytes down to 421 kilobytes or 6 megabytes sound 421 kilobytes this one's gone from 846 kilobytes to 176 kilobytes and this one's down from 5.83 megabytes to 356 megabytes so overall we've actually saved 93% compared to the original file sizes which is roughly 12 megabytes and saved and that's that's on the highest setting so to take a look at our exports from TinyImage the folder that I just saved them out at is here so all I have to do is double click on the zip file and that's just going to unzip them into a folder for me and you can see here the file names are exactly as you'd expect and I can open those up no problem and we've got our PDF files compressed so yeah the file size difference is is massive even at the highest quality as we saw a second ago you know six megabytes for the other ones and those have come down to 365 kilobytes 400-year so we've saved literally 90% with with no quality difference at all, which is great.

You might even think that these these sizes are too big, so what we can do is we can rerun TinyImage and because we've already opened it using the context menu the right-click menu, TinyImage automatically adds itself as a shortcut into the Figma plugin sidebar here, so what you'll have to do is just click on the TinyImage logo. You'll notice I've got two because one is a development version and one is the production version that you'll be looking at so just click on the little milk bottle icon and click on TinyImage and that will rerun the plugin for you without having to go into the plugins menu.

This time around, let's try lowering the quality down to 150 dpi and let's see what that comes out at, actually, let's just go down all the way down to 72dpi and click
"Compress". So, you can see it's set to 72dpi I'm going to click "Compress", so once again it's just compressing those PDFs, and you can see here once I save it, I'll just save that again, we can see here at this time at 72dpi it's actually saved us 98% on these to an overall saving of 97%, which is which is massive.

If I open that up, we can see the the only difference that I can see is a slightly lower image quality, but all of the vectors, all of the text is looking super sharp as you'd expect. That's a larger view and if I zoom in, that's totally sharp. If I like those results, then I'll probably keep this lower sized version, it's really good for if you have to email something the lower file size can often be really ideal and if you're doing something more that's more detailed that you need higher quality images for then you know 150dpi or 300dpi is probably the way to go.

This is the way to actually export individual PDFs, but there's definitely going to be a time when you want to export all three of these in one PDF, so Figma does offer this feature; again, if you go to the top menu and click on file you'll see down here there's a there's a feature that they offer called export frames to PDF so if I click on that it'll give me the option to save this so I'm just gonna save that into the the folder so Figma has created this PDF file for me which has the 3 frames however it's 13 megabytes which 13 megabytes is way too big for my use cases where I probably want to send this over email or send it and in a much smaller file size.

TinyImage supports this as well, so if we re-run the Figma plugin just by clicking on the sidebar over here so you'll notice that we actually have three buttons up here and the one on the left is titled all frames to single PDF which does exactly what you'd expect it replicates the same native functionalities Figma but it adds a layer of compression into the mix so we can actually export immerged single PDF from these frames but we can control the size of it a little bit more so in this case I'm going to try the the middle option which is 150 dpi, and what that's going to do is going to export all of the frames in your sidebar, not necessarily what's down here, it's going to just look at the sidebar on the left here and every top-level frame it's going to use that as a page so each frame becomes a page in the PDF file that we're going to save.

As you can see, I've changed the quality to the middle over here so now it's set to 150 dpi, so if I just click on this this all frames to single PDF file so it's analyzing those frames it's merging them into a single PDF, and it's already done. It's just asked me to save the file so just going to hit save and already from the the notification we can see that it's taken that 12.68 megabyte file and it's actually brought it down to 436 kilobytes. so we've saved 97% compared to what we just exported directly from Figma natively.

If I open that up, this is our compressed file, as before, there's no discernible difference in quality, so for 97% savings that's a really that's a really huge difference compared to what we can see right here. I'll just get rid of these ones so we can you can see it a little bit better. So, our original one from Figma was 13.3 megabytes and a new one is 447 kilobytes, so that's a huge saving and if we wanted that even lower, I could bring that down to 72 dpi but I personally use 150 dpi for most of my exports because it serves as a really good balance between quality and file size optimisation.

That's roughly what it looks like to merge those those files and if you want to re-order them, the way you can go about doing that is just by reordering the layers in the left sidebar here. Essentially whatever's at the top, so in this case we had "professional", "approachable" and "thoughtful" if I want approachable to actually be the first one all I have to do is drag click and drag this frame up to the very top to be there and then if I want approachable to be last I'll just click and drag that down to the very bottom and then if I rerun TinyImage, TinyImage is going to look at this order of the frames on the left here and it'll take that into account. So, let's actually just make this 72 dpi to see what that comes out as as well, so it's merging these three frames in the order that we just were just specified. So, if I click "save" and open that up, you can see before that 150 dpi version was 447 kilobytes and the 72 dpi is brought down to 390 kilobytes. This doesn't have too many photos in it so the differences in size aren't going to be as noticeable, but we'll cover that in a second. If I double click that you can see here it's it's exported the file as you'd expect and you can see the difference here is the order so "professional" is now last as we specified in the frames "thoughtful" is in the middle and "approachable" is last. That's compared to our original order which was "professional", "approachable" and "thoughtful" so that's how you reorder the frames or the pages in a PDF, you just change it in the layers panel on the frames panel on the left and TinyImage will do the rest for you, you don't have to manually do any weird stuff after you've exported the file at all, I'll do it by itself.

That's a an example of what it looks like, however I thought it'd be worth showing you what it can do for photos or images as well. So, if we click out of this I'm just going to jump over to my other project I've got open which is some some photos of Japan from Unsplash so again we can see here I've already run the plugin before, so I'm going to click on the TinyImage plugin in the right-hand side and open that back up okay so you can see here we've got quite a lot of export settings already in the mix so some of the export settings are JPEGs so we could actually export those JPEGs and then all of the frames also have a PDF export on them so the PDF here PDF here PDF here PDF here so that is worth noting you can export multiple formats in one go it doesn't always have to be just one file format so I can show you what that looks like if you like.

In this case, I'm just going to set the the quality down, so let's do 70 maybe, as I said I've already got PDF settings on on all these frames which you can see over here. I've got PDF set on there, so what I'm going to do is, I'm just going to export the PDF and JPEG version of each of these photos so I've set the quality to 70 and I'm just going to click "Compress". This is analyzing all the photos, compressing them, the JPEGs and the PDFs kind of in the same batch, you can interchange these formats however you like for the individual kind of exports and already we can see that the savings are really good. Overall, we've just saved 94% or 40 megabytes, so 40 megabytes is is massive regardless of if you're using this on a website or if you're emailing something, having that that amount of image data saved is is really cool.

I'm just going to open up this zip file that we saved and you can see here we've got the two formats all saved out so we've got the frames exported to PDFs, so we can see those and then we've also got our JPEGs that we exported to so that's all there as you'd expect. We can do exactly the same thing if we want to export these PDFs as a single PDF compressed PDF and we can do that by maybe it's maybe it's worth also doing the experiment with exporting the Figma ones natively.

If I export the frames to PDF from Figma natively so file export frames to PDF I'm just going to click that and we'll just get a bit of a baseline of what the original file size was compared to our compressed one so from Figma just these four images has created a merged PDF of 36 megabytes so that's that's without any compression it's just coming directly from Figma so I think TinyImage will be able to do much better than that so if we rerun the TinyImage Figma plugin as we did before and in this case we're not going to click the compress button as we did in the last project we're going to use this all frames to single PDF setting up here and again I think 150 dpi is always a nice medium setting so I'm just going to click on that and again that's going to take this order from the left hand side all the frames in that order so we've got frame to frame for frame 3 and frame run so that'll be the March it'll be Mount Fuji it'll be the Kyoto photo and this shopfront photo that'll be the order so if we click on all frames to single PDF that's going to look at our frames and merge them into a single file for us.

So, we'll just save that, and it's given us the report that we've saved 94%. The original PDF merge PDF file size was 34.34 megabytes and TinyImage has brought that down to under 2 megabytes (1.95 megabytes) so we've actually saved 94% there. If we jump back into our PDF file, this is the one that we just exported so that's the order that we expected the images look great so that's at 150 dpi they're still looking very crisp and you know we that really says it all right there we can see we've got 36 megabytes with the with the original PDF export from Figma and then the TinyImage compressed PDF version from Figma has come all the way down to 2 megabytes so again you know there's just no comparison between these these two exports.

That's what it looks like; and that's everything you need to know about exporting compressed PDFs directly from Figma. This was a hugely requested feature, so I'm really glad that it was able to be supported in the TinyImage plugin, adding PDF compression for Figma is something that's that's come up quite a lot in the community and and also from previous users of TinyImage; they were they were wondering if PDF compression in Figma was ever going to be supported and and now it's finally here. As you can see it's it's working really well, and I think whether you're actually exporting documents for presentations client presentations internal documentation maybe or even just kind of stitching together some some renders or some mock-ups into a single PDF or individual PDFs, TinyImage is a much better alternative to the native Figma exports; those file sizes are just way too big to kind of be shareable and practical so that was really the problem that that I wanted to solve with with TinyImage.

If you find it useful, let me know! If you have any other requests for image compression in Figma or different features, definitely let me know, because I'm constantly making updates and improvements to the Figma plugin to make it even better for everyone.

As always, thank you for watching; and I hope that I can do more of these in the short term, and keep getting these Figma tutorials out for anyone who's interested in this kind of more advanced usage of Figma when it comes to image compression and other kinds of design automation. Until the next time, thank you for watching and we'll see you soon!

---

---
type: tutorial
title: How to create animated GIF files in Figma using TinyImage
date: 2020-04-12T00:00:00.000Z
---

# How to create animated GIF files in Figma using TinyImage



#### Video Transcript

Today, we're going to be looking at how to create and export animated GIFs from Figma using the TinyImage Figma plugin. This functionality is not built into Figma, so we're going to use a plugin called TinyImage to make this happen for us.

If you haven't already installed it, you can go to the Figma icon in the top menu bar and go down to "community"; then click on "plugins"; then what you want to do is search for "tinyimage" up in the search bar up hereand just hit the "enter" key and you'll see it pop right up. This is the TinyImage compressor plugin, I already have it installed but if you don't have it installed, you'll be able to click the "install" button over here on the right, and once you've clicked "install: it'll look like that, and it'll say that it's installed and then you're good to go back to your Figma file.

Back in our Figma file, we've just got a few very simple layers here so we've got four image layers and three frames and three SVG frames. The first thing we're going to do is run the Figma plugin, so you can right-click anywhere, go down to "plugins" and then go to "TinyImage Compressor" and left click on that. As soon as it loads, you should see some images. If you don't see any images, it means that you haven't added any image exports onto your layers. If I click on any of my layers here and then go over to the right hand side, you'll see under the "export settings" that I've added a few export settings already, so if you haven't done that, you can click on your layers that you want to include into this animated GIF that we're going to make, and just make sure they've got at least one export setting on those layers; JPG is fine, PNG is fine, or SVG - anything you want to add really, just to make them show up in this list here.

I've already done this, and you can see here I've got a bunch of exports that I can that I can see and use. What I'm going to do, is I'm going to select a few of these photos; I'm going to select four, and it doesn't really matter which export setting you select, all that matters is these are the frames that we're going to add into our animated GIF. Once you've selected the images that you want to create an animated GIF from, you can go up here, and instead of clicking the normal "Compress" button that you might use quite a lot for other formats, we're going to use this middle button called "Create GIF". You can you can set the quality beforehand if you want to do that, so I'm just going to bump this up to 95. Once you're happy with that you can click on this "Create GIF" button and what that's going to do is it's going to take the selected images that you've just specified in the select panel before we clicked the button, and it's going to add those into this little preview here. This preview is just looking through the four frames that we've already selected before clicking the button and it's giving us a real-time preview of that what that will look like if we were to export this to an animated GIF.

Let's dive into a few of the settings that we have some control over. The first one would be the "time per frame"; this is a slider that we can move up and down at the moment it's set on 0.5 seconds, which means that each of your four frames are going to show for half a second before it moves on to the next one. If we want to increase that and slow it down a little bit, we can set the time per frame to be something more like 1 second. If you want to see that change reflected you can click on this "Update Preview" button down here, and what that's going to do is just refresh that preview with our settings that we've just changed. Now you can see it has slowed down the animation instead of going and from 0.5 seconds per frame, we're now doing 1 second per frame; so every 1 second it's going to switch through these four, and you can see here it's set to playback as "infinite" which means that that will just keep going on forever, it's never going to stop. If we did want to change that, we can uncheck this "infinite" check box and we now have access to this input number here. We can actually change this to say loop it one time, if I set it to "1" and then click "Update Preview", let's just let it play through. That's done one play through, and you can see it stopped on our last frame here; so it's gone through these stops. We can change that we can make it make it play through 3 times, so that's basically going through these four frames, it's going to do that, and it's going to repeat it 3 times, so we can change that.

The other thing that we can do is (we'll get to this in a second), but at the moment it's being set to have a transparent background, so that's why we can see this little gap at the top and the bottom here, because we've got the size set to be square; it's set to 512x512, and that means that we've got this little bit of space up here, and that's why the transparency is showing through. There's a couple of things we can do here, we can either change the image fit. At the moment, it's set to "contain", which means that it's actually not going to crop any of the image data at all, it's just going to center position the image and shrink it down far enough so that none of the image gets cut, and anything that it doesn't fill up it's just going to be left kind of blank. We can actually change that, and make it go to "cover"; and if we change it to "cover", you'll see that it'll still be square, but the images will be automatically made to fit. That's that's how it works, and you can see some artifacts popping up here; the reason for that is, we do not need transparency for this particular GIF, so I'm going to turn transparency off and update that; now you can see those artifacts have disappeared, so it's just left with the images without any transparency.

If we do switch it back to contain for a moment, I'm just going to show you one more thing you can do. Because we've turned the transparency off, you can see that the the gaps here which are showing because we've changed it back to "contain", they're set to white, and that's because down here we're setting the background color to be white for anything that shows through. If we wanted to change that, we can actually do that by just changing the HEX value down here ,so if I change it to black and update the preview, those gaps there are now going to be black. You can change that to any HEX value that you like, and anything that's showing through because you've set it to contain will automatically be made to be the same color as the the preference you've set down here.

We can also change the image size as well, so if we did want to kind of shrink down that height a little bit, we can change that from 500 down to 400, and you'll see it's shrunk that down here. If we go down further and make it 300, you can see what's happened here is now that the width is actually greater than the the height, you've got bars on the side now, so that's what it does, because we've got it set to "contain", it's just going to keep containing the image based on whatever dimensions you specifified. If we want to change that again to "cover", we can do that, and this time it fills up those gaps.

The other thing that we haven't looked at yet is image dithering; "dithering" is essentially a way to smooth out the colors inside of a GIF. By default, it's set to "None", but we have a bunch of options here which we can change to make the dithering a bit different. This is going to be a little bit of trial and error, as certain dithering works better for different types of images. You can really just play around with it and see which one makes the most sense for the images that you're using; in this case I'm going to use the "Atkinson" dithering and just save that.

When you're happy with this preview, you can go ahead and click on this "Export to GIF" button in the bottom right down here. If I click on that, it's going to grab those frames and turn them into an animated GIF. If I save this and open it, you can see here that it's exported it exactly the way that we we saw it in the preview; so we've got these four frames looping at one frame per second, the dimensions are 512 by 300, and because it's being set to "cover", there's no gaps whatsoever and and the dithering option that we selected looks really nice, it's very smooth, we can't see any artifacts, can't see any nasty pixel blurring, and overall it's just looking really good. Even at quality 95, it's actually saved out at a reasonable file size, we've got 488 kilobytes for this animated GIF, and I'd say it's it's actually turned out quite well.

If we want to create another one, I'm going to open up TinyImage once more; and because we've already run the Figma plugin, if you want to access it really quickly, you can get to it from this shortcut in the right-hand column. Underneath the "plugin" heading, you'll see "TinyImage" pop-up and it's a little milk bottle icon. The reason I have two is because one of them is my development version, but your one will look like this. Okay, in this case I'm going to do something a little bit different, and instead of selecting these photos, I'm going to select these little SVGs, all these transparent ones. If I select these, I'll just do three of them, I'll just bump the quality up for the sake of it, and I'm going click on "Create GIF" one more time. This is loading up a new preview, and again it's inheriting the settings that we saved before; so you can see here we've got the "cover" setting selected, the image dithering from before is selected, the background color we selected and the timings that we selected are all in there, and the playback count. The size is updated every time, as it basically takes the dimensions of the first layer that you've selected and it'll pre-populate those inputs down here, and that's just to make it easier to have a bit of a baseline size so you don't have to click back and forth and figure out roughly what those image dimensions are going to be. That's how it sets it up.

There's a few things we can do here, because we're using layers that have no background or have transparent backgrounds, it's immediately filling in that transparency area with our background color down here. Again, we can change that if we wanted to, make it a white background; we just changed the HEX value and now it's a white background; so that would be perfect if you're using this GIF on a website or something that already has a white background and you do will get a great result there. I'm actually going to going to do that now, if I just update this a little bit, I'll set it to playback "infinite" and if I "Export to GIF"; we've got that setup now. If I open that up, you can see there it's just it's really crisp, there's no artifacts, no blurring, no anything at all; and that one's come out at 89 kilobytes. Bear in mind, this is at 100 percent quality, so even at 100 percent, the file sizes are very reasonable.

I'm going to get out of that and relaunch TinyImage again, because I'm going to show you how to do a transparent export. Once again, we'll keep our 3 layers selected and click "Create GIF". This time, instead of having the white background, let's say for some reason the background on my website might need transparency, so I'm going to make the image transparent. I'm going to update the preview, and what you'll notice is the background is gone, but there's these weird artifacts around the image; the reason for that is because we still have the image dithering set to this "Atkinson" setting. That setting is really good for if we were using photos like in the last example, they looked really smooth with that particular setting, but in this case we don't want to be doing that, as there's nothing really to blend into. In this case, I'm actually going to turn dithering off and I'm going to refresh the preview and you'll see now that blac outline and artifact has completely disappeared, and we're left with just the smooth image outlines in the transparent GIF, and I'm fairly happy with that. We can actually change the size down here if we'd like, so we can make this 1000x1000 and I can set that to "contain". I think they're all square anyway, but that's all good; in this case, I'm going to make this one a little bit faster and see what that looks like. Okay, I'm quite happy with this, so we've got a fairly fast animation happening, it's going on forever (set to "infinite"), I've got a transparent background set at 1000x1000 pixels with no image dithering because that's working really well for the transparency; and we've set it to "contain", so we know that all the pixels are going to be added to the square no matter what.

Once again, I'm just going to click "Export to GIF", and it's going to merge those for me into an animated GIF. It may take a little bit longer because it's a bit bigger 1000x1000 pixels, but still pretty quick. I'm just going to save that and open that up; and there we go so, you can see it saved it out at 1000x1000. Because these are vector layers the quality is really sharp, really nice and if we would just do this in a retina fashion on our website, we could actually shrink that down to 500x500, so that would that would basically make it an @2x kind of animated GIF and that just looks incredibly sharp when you when you kind of have the dimensions as well. That's a really good trick if you want extra sharp animated GIFs, you can export them at double the size that you actually want to use them at, and then have that size on your website using CSS and you'll get really crisp GIFs and GIF animations. That's actually come out really small, too. The last one that we did we had the white background and saved out at 500x500, but the transparent version at 1000x1000 has actually come out much smaller, so it's quite interesting to note as well if you are wondering why those two have come out differently, it's because of the transparency.

So, that's that's a pretty good overview of how to export compressed animated GIFs from Figma using TinyImage. You can actually play around with this slider a little bit more; you're not going to see huge amounts of differences between these different qualities for GIFs in particular, but you will get a little bit of difference. If you do want to play around with file sizes, I would encourage you just to mess about with some of these maybe at the extremes to get a bit of an idea of what those size difference is going to be, but for the most part you can you can still get away with fairly high settings and and have fairly small file sizes as well.

That's a fairly comprehensive overview of all the different settings you can use, and the different ways you can go about creating GIFs directly from Figma or compressing GIFs using TinyImage. Thank you again for watching; if you've been following along with these Figma tutorials, I hope they've been helpful. If you have any requests or questions please just reach out to me directly, I'm always trying to make these plugins (like this GIF Figma plugin) better, and feedback from people like you definitely makes it improve a lot faster when I know what kind of things and workflow issues that people are having. Until next time, I hope that you've enjoyed the video and we'll see you soon!

---

---
type: article
title: Building a startup (in a pandemic)
date: 2020-04-04T00:00:00.000Z
---

# Building a startup (in a pandemic)



This article is titled "building a startup", but I've added "in a pandemic" in brackets based on the few weeks with COVID-19.

For the last decade, I worked in digital agencies as both a designer and a developer. I started out as a designer/developer and then I doubled down on development once I realized I was actually spending more time designing things in code and inside the browser; so that that's what led to that change. However, for the last three months I've been building a startup called Figmatic full time, which builds premium Figma plugins that are designed to turn designers into superhumans.

### First things's first.

The first things to note from these first few months are all the cool things that come along with that:

1. No managers
2. No meetings
3. No "Agile"

Somewhat magically, just _removing_ these three things has made work fun and productive once again, which has been really neat.

### Let's rewind 12 months.

Before I get too ahead of myself, I'm going to rewind by 12 months really briefly. Twelve months ago, I discovered "life after the red pill". I co-founded and co-ran the DesignOps Melbourne meetup for the first year of its existence, after which I decided to leave and focus on other things; but there was certainly a void left there after I after I walked away. This opened me up to a 4-6 week period of shutting myself off from everybody, being very introspective and just thinking about what I wanted to do next. The question that I have come back to very often over the last 5-6 years is from a book called "Zero to One", and the question is:

> "What important truth do very few people agree with you on?"

I have a few answers to this question, but the one I'm going to touch on at the moment is that

> "I believe that we've been living through design and development workflow stagnation for roughly the last 20 years"

### The great (20+ year) stagnation.

I'll give a little bit of context around my thinking on this and hopefully not go too deep with it, but I think you'll start to see where I'm coming from at least, and by definition, you should probably disagree with me on this important truth that I believe.

First of all, it wouldn't be a real article unless I quoted something from "The Fountainhead":

> "The the hardest thing to explain is the glaringly evident which everybody has decided not to see"

This is exactly the way my mind feels when I'm talking about this topic because it just seems like everyone's got blinders on, and no one really wants to think about the hard questions, or really look at where we are now compared to where we've come from.

To start off from 20 years ago, this is a quote taken from an article written by John Allsop (the founder of Web Directions) called the "The Dao of Web Design"; which was published almost exactly 20 years ago to the day. John writes:

> "... It is time to move on, to embrace the web as its own medium. It’s time to throw out the rituals of the printed page, and to engage the medium of the web and its own nature."

John wrote this _20 years ago_, and if you told me it was written last week, I would I would believe you and think that it's a brand new article; and that just signals that we really haven't got past this "print" idea.

Yet 10 years later (and 10 years ago; almost 10 years ago to the day), the famous "Responsive Web Design" article came out, where Ethan Marcotte wrote:

> "This is our way forward. Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience."

That was from 10 years ago.

### “Tells” that things have gone wrong.

So, we had these quotes from twenty years ago and ten years ago, but _today_, 10 years since the "Responsive Web Design" article, we still use the term "responsive web design", instead of it just becoming absorbed into the the term "web design". To me, this makes it seem like we still talk about it as if it were both _new_ and _optional_; neither of which are true.

Also, somewhat hypocritically, at the exact same time, we use these other terms for arbitrary _fixed_ sizes (which aren't responsive) like "desktop", "tablet" and "mobile". If you've looked in a design file within the last year, you've probably seen layers and frames named with these terms.

The language that we use around design and development is also very telling - we've got term like "handing off" designs, "slicing up" designs, "inspecting" designs and "bridging the gap" between design and development - and these are all kind of tells that that something is a little bit off.

If we keep going down the rabbit hole a little bit, you've got terms like "Design Thinking", which in and of itself is fine, but these terms kind of distract us from the need to actually think about design at all.

Then you've got the sheer speed of new articles and tweets that we see published each day, which also fool us into believing the propaganda that things are "just moving so quickly that we can't really even keep up with all the radical progress" or "it's so hard to even keep up to date" and the idea that things are just progressing at this rapid rate that our heads can barely stay on straight.

Not having a go at this specific trend, but new UI trends like "Neomorphism" give the _illusion_ that there is a new future on the horizon, simply by covering our dated present with a fresh coat of paint.

At this stage, many people still believe that a "design system" essentially just means a well organised Sketch file (which is by definition always outdated) containing pictures that attempts to emulate pieces of a website.

The reality is that our designs are made with tools that have no relationship at all to the medium that they're actually being used in by real people.

With all that aside, perhaps the _most_ telling fact demonstrating the complete breakdown of our design and development workflow is that every design portfolio that I looked at while I was at my last agency never included the links of the websites that they actually designed, and that means that something has _really_ gone wrong. If nobody wants to show the URL of the the thing that they've actually designed then something has really gone wrong along the way. That's sort of like a "tell" that we've _really_ messed up.

### The hijacking of the term “DesignOps”.

If you've ever attended a DesignOps Melbourne meetup before, you'll know that the tagline and the mission of it is that "We believe that the distance between design and development should be zero". With Figmatic, I take a slightly different direction on this, which I sum up by saying:

> “I believe that anything that exists inside of a screen design tool is always more valuable outside of it.”

You could take the next step and and then say:

> “Production code and data are actually the source of truth for your designs”

Never in history will a user of your website be looking inside of your Sketch file or your your Photoshop document; there's just no relationship between the customer.

This is really what DesignOps was meant to be. The the term kind of got hijacked along the way, if you if you search for "what is DesignOps?" there's a lot of propaganda out there how it's more about "management" and overseeing design and development teams to make sure that the information flow and the "handoff" processes are all going according to plan. However, in the DesignOps future that that Ch'an and I originally defined this role as, that role description is irrelevant because that job is actually removed completely when the distance between design and development is zero; there is no longer anything _to_ manage. So, that role would become non-existent in a true DesignOps future, and in fact, the commonly accepted definition is actually the opposite of what we defined it to be originally.

### The tipping point.

I'm going to briefly touch on the tipping point for me personally. So, a few months after I finished co-running DesignOps, at work in my agency, I was working on a design system for the better part of a year for a big e-commerce website, and I had done the entire thing in code. I had built everything in code: all the low-level stuff, right up to the full views and states and everything.

I held on to this approach for that whole time, I pushed back against any attempts to derail it for many months. People were trying to start hijacking the ideas and all that sort of stuff, and I got to about a month before the project ended and for some reason we had to send the client static JPGs, and I said: "That's ridiculous we've got this live link here, where they can look at it on any device and see the real thing."

The response was "no... we just _have to_ do it this way..." So, long story shor, one afternoon I spent four hours screenshotting every page in every state in Chrome and and put these JPGs into an InVision link to share with the client.

We went in there the next week to meet with them and present these designs, and they said: "Alright, these are looking really good, but we would love to get the Sketch files so we can 'hand-off' the designs to our developers in the Philippines and get them to build it".

I said: "Oh, no, you don't understand; yes, these are _these are_ JPGs, but I actually took them as screenshots from the HTML that I've already built". And the client just brushes it off and says "Yeah... it's just that we need the Sketch files..."

So, at this point, I was like: "Oh my god.", and it just turned into a big mess. Again, long story short: tragically, none of the HTML or code I spent the better part of a year working on was used. Thankfully, as part of my design system setup, I had already set up a script to generate Sketch files directly from the real codebase (HTML/CSS), so I rendered all the components out to sketch files and we ended up just sending them that.

This was really the tipping point for me, where I realized I had lost the DesignOps war in my own workplace.

### Taking the leap.

You can probably tell by now that I believe it's time to really start getting back to the future so the question that I asked myself was again from the book “Zero to One”:

> “How can you achieve your 10 you plan in the next six months?”

I like these kinds of questions because they force you to reframe it in a completely different way than you would usually answer it.

What do I want to be doing? I want to be building design automation tools full-time, and be profitable doing it.

My answer to that question was: I really needed to put some skin in the game; quit my job and self on my own company. This was the only answer I could I could come up with to at least have a shot of getting to where I wanted to be.

In reality, that looks like going from a lead developer salary back down to zero.

I did a few things to kind of counterbalance this after I decided to do this:

- I gave four months notice at work, because I wanted to have a really smooth transition between me and my replacement and sort of leave the agency in a better place than I found it, but also to build up some more savings, so I saved up for those four months.

- I moved apartment to a less expensive one.

- I sold my car, because I realized I wouldn't be leaving the house for the foreseeable future. Anyone who has been quarantined for COVID-19 for the last two weeks, I've been self quarantined for the last three months (of my own choice).

- I also sold my a lot of my childhood Nintendo 64 and Super Nintendo games, and my Nikes.

- Finally, just cut down expenses everywhere else.

### Having a plan is better than no plan at all.

I've never started a company before, but I do know that having any plan is probably better than having no plan at all. Here's a rough outline of what I kind of planned out, the five things I thought I was going to do:

1. Do not compete.
2. Charge from day one.
3. Ship fast and often.
4. Talk to customers.
5. Do things that don't scale.

All this this advice is probably common, but I decided to _actually_ do them.

### Going from zero to one

Going from zero to one really just means that I'm not going to be building the tenth "Lorem ipsum generator" plugin or the fifth "Spellchecker" plugin; I only want to build things that currently don't exist that would be valuable to exist in the future. I've built 5 plugins so far:

1. Favvy; which exports production-ready favicon packages for progressive web apps and websites from Figma.
2. TinyImage; which handles image compression for JPG, PNG, SVG, WebP, PDF and GIFs.
3. Bannerify; enables you to animate and export production-ready banners directly from Figma to HTML.
4. Pixelay; this lets you overlay your Figma designs on top of your real development build.
5. Crypto; provides secure password protection for sharing designs from Figma

### Plans to make C.R.E.A.M

You can validate _real_ value quickly by charging for products. It's common advice to say "release everything for free" to build up "recognition" and you can always charge later, but I decided to do the opposite and charge from day one. Because I'm 100% bootstrapped and not venture backed, I _don't_ have really long periods to remain unprofitable an focus purely on "growth". I've found that charging from the start is actually a great way of figuring out how valuable something I'm building _really_ is.

### Move fast ~~and break things~~ with stable infrastructure

The other thing I really wanted to do was not fall into the trap of just building things for months on end, hiding away in the corner not showing anybody anything, not knowing if anyone _actually_ wants the thing I think is going solve a problem; I just get it out there while I'm still embarrassed with the product.

I've been building very, very quickly. The way I've been able to do that it's by using components. I use them on a product level when I design my plugins and at a website level; it's all component based. I ship code probably at least a couple times a day either to my website or to my plugins.

The somewhat weird thing is that despite building plugins for Figma, I actually don't _use_ Figma for _designing_ my websites or plugins at all. I've never designed anything in Figma; I design everything in code. Everything design related that's in my plugins or website is all based in code, it's all with components, and it's extremely quick. I've actually redesigned this website three times since December, and it took me a couple of hours each time to completely redesign it, because it's fundamentally built to be very very adaptable.

That's a "PROTIP" for anyone else: designing with code _works_, and not only does it work, but it's actually faster than drawing pictures of websites inside different design tools. You also get the benefit of having _real content_ build-in to the design process, which is such a big advantage over other methods.

### Talking to customers

I've been talking to customers (existing and potential customers), and that's been really great, because I get super good feedback, and and they actually help me develop new ideas, I can build relationships with them and I can go back to them to check in and and get a better idea of what's broken at their company.

### Do things that don't scale.

I've just got five things in here that I'm doing which (most likely) don't scale.

#### 1. Extreme customer service and feature request turnarounds.

If someone messages me on chat or email, I'll reply to them within a minute and they'll usually have a feature request or a question. My reply to their feature request will be: "the feature request has been deployed". Then I'll get feedback like: "Whoa! Your team is so amazing!", and then I'll go back and forth on the answer of either telling them it's just me in my kitchen, or leaving them to think that we have some sort of massive enterprise running down here.

#### 2. Cold emailing and offering to pay people to talk with me.

The second thing would be manually cold emailing over a hundred agencies and offering them to pay them to talk with me. This doesn't really scale over time, but upfront, it's a good way to to actually talk to people who might want your product. I've actually met and talked to a bunch of people so far, and none of them have actually wanted me to them, because they usually learn a bunch just from chatting with me, too. It's a win-win, and we're respectful of each other's time.

#### 3. Manually posting everywhere.

Number three would be just manually posting, linking, and commenting everywhere that's relevant online to blitzscale these initial product launches. and kind of get a little bit of a growth curve starting at the beginning and then and then building that up over time the other thing that doesn't probably doesn't scale is at the moment

#### 4. Building 1-2 new plugins per month.

I've been averaging about one to two new plugins per month. Developing new plugins over time willprobably slow down because I'm going to be working on more complex products over time.

#### 5. Working 10-12 hours per day (every day).

The last one would be working 10 to 12 hours a day every day on this business. That may or may not scale; we'll see how the the mental breakdown situation goes later, but for now it's going well.

### Are there any advantages to building a startup right now?

To make this somewhat relevant to the title, I should answer the question: "are there actually any advantages to building a start-up during a pandemic and impending recession?"

I came up with a few:

1.  There's definitely less competition. Less people will be inclined to start new companies and old companies will not survive, so overall there is actually less competition.
2.  In the case of COVID-19, there'll be more remote work happening, which means an uptick in Figma usage, considering the options for collaborative design tools are very very slim (and Figma is by far the best one). This may or may not lead to more Figmatic plugin use.

3.  In these times, less "waste" inside of companies will be tolerated, so businesses will be looking for ways to save time save, money and improve efficiencies inside the workplace. That's what Figmatic plugins are all about.

4.  On more of a personal note, an advantage would be that having a startup is just a great outlet for me to focus my attention. It's been great to not get distracted by all the the news over the last few weeks. I just keep my daily work routine going and keep the blindness on with working on building Figma plugins.

To sum up, if you're thinking "well you're talking about all these futuristic things but at the moment you're you're not doing anything too crazy"; the reason for that is I have a list of things that I want to automate from my time working in digital agencies, so I have a list of those things which I'm about halfway through. I want to automate all those things first then focus on some other new tools that we need today.

_(This article was adapted from a talk I gave at DesignOps Melbourne back on April 1st 2020 called [Building a startup (in a pandemic)](https://www.youtube.com/watch?v=wOs8jgkzWQg))_

---

---
type: article
title: Crossing the design “handoff” chasm
date: 2020-03-21T00:00:00.000Z
---

# Crossing the design “handoff” chasm



If you've seen me give a talk or ever worked in a design/development team alongside me, you'll know that I really don't subscribe to the “handoff” when it comes to designing and building things for the web.

Using a term like “handoff” implies that one person or team is throwing something over a fence to another person or team. This image is sadly not too far from the truth in the majority of teams like this.

Typically, a designer or team of designers will work away in isolating, using their design tool of choice for days, weeks or months at a time. Once they're _done_ (what they believe to be done, not actually done), they will “handoff” these designs to a developer and move on.

It's actually far worse than that, and the tooling that we believe is helping us is actually leading to worse results.

### Where we are today

It's now the year 2020, and I personally know web designers and developers who still refer to the process of design to development as doing a "cut up", stemming from the "slice tool" that was bundled with Photoshop as a way for designers to draw rectangles around areas of their image that would be automatically exported out as lots of image "slices" for a developer to use in their HTML and CSS build.

While my friend's company is (hopefully) an outlier, and the idea of using the slice tool in the current day as a means of development handoff from a designer probably makes you say "Oh man, I remember when we used to that, back in the day... thankfully we're past those dark times now" — I would argue that the reality is we haven't had much tremendous amounts of innovation on this process.

Taking a look at the current crop of design handoff tools, the fundamental thing they all share is translating layers from a design tool into rectangles that you can click on, which can then either be exported as assets (“slices”?), or inspected to get some idea of what the CSS would look like to create this layer in a web browser.

Thankfully, Figma has all of this functionality built in and doesn't require another handoff tool to be able to see these CSS properties or save out assets, which is great; but it's not enough.

### Designer's gone wild (No restraints + “handoff” = chaos)

One of the reasons that this process is fundamentally broken is that our design tools — as good as they are in what they do — are still essentially open canvases that have little relationship to a production codebase (or code at all, for that matter).

No matter what tool you are using to design, you can grab any element and do almost anything to it:

- Change the colour
- Change the font size or line height
- Change the position or alignment
- Change the context where it's being used

There are dozens more, but the point is that there are truly no restrictions.

That can be seen as either a bug or a feature. It's a feature when you're designing something that sits outside of an established design system or codebase that ships the a product to lots of people, and in the same way, it's a bug when you're designing something that sits _within_ an established design system or codebase.

Once you have a designer moving things around, changing sizes of things, colours, alignments, grids, layouts, components etc, working on this for days or weeks at a time, getting everything ready for that perfectly crafted final version to “handoff” to a developer (using whatever tool that involves), you end up with chaos.

If the developer takes the design at face value, starts copying CSS code from the handover tools and blindly implementing whatever they see in the design, there's a good chance that things are going to go haywire pretty fast.

Sadly, these handoff tools have really become an excuse for not needing to talk to each other at all. Instead of fostering designer/developer collaboration, they serve as a wall (or chasm) between them.

When a developer receives a design that contains a form with labels aligned to the right (instead of the left, as it is in their design system), without proper context, the developer might go ahead and do one of three things:

1. Assume that the designer must want to change this core component, make a global change to the form/label component, so every label in the codebase is now aligned to the right (instead of the left).
2. Hack together a very special bit of HTML and CSS that becomes super `!important` to the codebase, just for this _once off_ thing.
3. Build it as a brand new component or variant, and publish it to the codebase for other developers to use in the future.

You're probably thinking "well, obviously none of this would happen, because the developer would have _asked_ the designer anyway once they knew it was a new design...".

Sadly not. This is a real example that happened at a real (very large) company, and they decided to choose what was behind "Door #1" and roll out this change to the global codebase, until someone discovered what had happened and reverted it.

### Where we need to go

To briefly jump back to the DesignOps meetup that I used to co-run; our singular focus, believe and mission was that:

> “The distance between design and development should be zero.”

This can never be true when there is a wall between the design teams and the development teams who have no real relationship together, beyond the fact that they may (or may not) sit in proximity to each other.

As I mentioned, there are companies who still literally "slice" up web designs from static Photoshop or InDesign files and use this as a way of handing over something to a developer to build.

This is a process that most companies have become comfortable with, despite the downsides of widening the distance between designers and developers instead of the intended goal of reducing it.

As I've written and spoken about before, I absolutely believe that the future of the design and development will look very different from this process (and the other things that come along for the ride with it).

At the time of writing this, Figmatic is still a company of one. I am founder, designer, developer, marketer, copywriter etc. All I have are ideas and time, which are both somewhat constrained by each other. Even with spending almost every waking hour working each day, there are still only a finite number of things that I can work on and accomplish on my own right now.

There are much bigger, venture backed teams already working on solutions to much bigger tooling problem of making the codebase the source of truth of design, and I know they will be able to solve this problem based on their visions are trajectory. There is really nothing substantial for me to bring to that party right on my own right now.

So, as a bootstrapped solo founder, I decided to focus on what I can do right now, while still pushing things ahead in the right direction (_reducing the distance between design and production to zero_).

### What we can do right now

With all that in mind, I recently built a Figma plugin called <g-link to="/pixelay">Pixelay</g-link>, which takes your designs from Figma and streams them into the browser, overlaying them on top of your _real_ website.

The reason I built it is because I've seen people go to great lengths to provide feedback on developer implementations _after_ this (clearly, truly, wonderfully effective) “handoff” process we've just been discussing, including:

- Designers printing out screenshots of the build and writing pixel measurements on them with red sharpie.
- Creative director's sitting with a developer for _hours_, pointing out pixel by pixel what is different from the original design.
- Having a meeting with 5-10 people to all review the design and build together, pointing out the differences for the developer's benefit.

This is madness _and_ this is normal at the same time. I think it's killing the souls of both designers and developers, and it has to end.

<g-link to="/pixelay">Pixelay</g-link> helps avoid these maniacal measures and literally brings the design and development environments together, where any differences between the design and build are immediately visible.

This is not intended to turn developers into mindless code puppets, where they blindly just make the design and build match no matter what. That _may_ be the right answer sometimes, but other times, the developer might be using a pre-existing component that is out of sync with the one the designer has used from their Figma components.

The distance between design and production will eventually be reduced to zero, but until then, this feels like a step in the right direction to get away from thinking of design and development as two sides of a chasm that requires one to “handoff” something to another, instead of treating them as the same thing.

---

---
type: article
title: Figma vs Sketch (2020)
date: 2020-03-20T00:00:00.000Z
---

# Figma vs Sketch (2020)



Back in 2013, the agency I was working for at the time was still using Adobe Photoshop to design all our websites and UI. It wasn't until about a year later that rumblings of Sketch started to become popular amongst the designers I knew. One of the main draws seemed to be that big companies in Silicon Valley were using it for _their_ UI design, so therefore, if it's good enough for Facebook, it must be good enough for everyone else.

Around 2015-2016, I saw lots of my designer friends starting to make the jump to Sketch. It was the cool thing to do, and you were seen as falling behind if you didn't get on the Sketch train. My last agency made the jump from Photoshop to Sketch in 2016. Ironically, I have seen almost the same shift (down here in Melbourne, at least), since mid-2018, gathering with more steam each month since then.

After being on Sketch for 2 years, we decided to make the full switch from Sketch to Figma in early 2018, and we never looked back. Going from using multiple tools like Sketch, Zeplin, InVision and others, we were able to have everything in Figma instead, leading to happier designers, developers and far more efficiency.

As someone who experienced the transition from (many years of) Photoshop to Sketch (for 2 years), then Sketch to Figma (for another 2 years), I'd like to share some of the observations I've personally made on the topic of Figma vs Sketch, which are up to date (as of March 2020). I've broken them down into categories that made sense to me, and contrasted Figma with Sketch at each step. I hope this is a useful summary of why Figma is the best choice as an alternative to Sketch.

### How designers work with developers in Figma compared to Sketch

One of the annoying parts of using Sketch was the limitations of designers being able to work with developers. Designers would typically create pixel perfect artboards in Sketch, but when it came time for a developer to actually build it, no one really knew the best way to go about it.

This led to us reaching for 3rd party tools such as Zeplin, which allowed designers to upload their designs and have it translated into a web app that developers could login to and click on elements from the original design. While this was a step up from getting developers to install Sketch on their machine (provided they weren't using Windows or Linux), it still felt really hacky and totally disconnected from the original designs.

Every time the design was updated, they would need to be re-uploaded to Zeplin, where the developer may have already built all the screens from the previous design (while the designer was busy crafting the new version inside Sketch).

You can see how this would get frustrating, with designers and developers never truly on the same page.

However, when using Figma, These problems are mostly eliminated using Figma. First of all, because Figma is built with web technologies, it's platform agnostic, so developers using OS X, Windows or Linux can all access the designs. Because it's real-time, the issue of being "out of sync" with designers also disappears.

### Performance of the Figma web app to the Sketch native app

Some of the early propaganda around switching from Sketch to Figma was around Sketch being a native app exclusive to OS X, where as Figma is written in web technologies that can be run inside a web browser on any operating system. Early skeptics didn't see how Figma could possibly outperform something written as a native app.

Figma uses a 2D WebGL rendering engine that can handle large design files. They've written extensively about how they've gone about getting amazing performance inside a web app, leveraging the magic of WebAssembly, which allows you to run binary code (similar to a native app has) directly inside the browser. This is something that wasn't possible even a few years ago.

Being built in web technologies is the most underrated "feature" of Figma, by a long shot. Not only does it allow real-time collaboration, cloud based storage and more transparency, but it also allows developers to actually read and the underlying design data inside a Figma file and use it for their own automation or development build steps.

Which naturally brings us to plugins...

### Figma plugins vs Sketch Plugins

The last big battle cry from die-hard Sketch users was that Figma didn't have plugins. I personally talked to people who literally weren't switching purely because they needed (or wanted) to keep using the "Craft" plugin for Sketch, which allowed them to load in fake data to populate their designs. That's all they wanted... even in the face of all the other benefits that Figma offered, this was a big enough deal for them not to switch.

That all changed on August 1st 2019, when Figma announced it was officially opening its own native plugin ecosystem and directly, built directly into Figma itself.

On launch day, there were multiple plugins for Figma that not only replicated what was available in the dynamic content plugin for Sketch, but far exceeded it.

At the time of writing Figma has almost _500 plugins_ live in its native plugin directory. For something that has only been live for 6 months, that is a crazy amount of development work by the dedicated community of Figma plugin developers.

Unlike Figma, Sketch does not have a plugin directly built directly into their app. These mostly need to be downloaded as zip files from GitHub repos and installed manually. For some designers this might be intimidating.

Worse still, if Sketch releases an update, it's very common for plugins to break completely or have negative effects inside of Sketch. With Figma, this isn't a problem as plugins are versioned to a certain version of the plugin API, so even if Figma releases updates, plugins will not break.

With Figma, plugins automatically update for everyone instantly when a plugin developer publishes an update. This all happens behind the scenes and doesn't require any interaction from designers. Uninstalling a plugin is also a 1-click, 1 second process of clicking a button.

### Collaborating with the rest of your team in Figma vs Sketch

When Figma was first announced on DesignerNews back in 2016, the top rated comment mentions:

> "Design needs to be presented and sold and having stakeholders and even other designers poking around work at various stages of completion feels like a recipe for creative stifling."

Fast forward to today, and every design tool (including Sketch) is racing to add the same live-collaboration features that Figma launched with in version 1.0.

Another more optimistic version of this comes in a quote from the creative director at Unfold:

> "Comparing Sketch and Figma is like comparing Notepad and Google Docs."

I think this is probably more accurate, as Google Docs was such a game changer for how we think about collaborating on writing and editing word documents, spreadsheets and presentations; Figma has owned this paradigm shift and run with it for the digital design industry when everyone else was betting on things staying the same in the future.

There is a reason why the road map of competing design tools all essentially describe achieving the functionality of Figma 1.0. I've publicly said before that I believe Figma is 2-3 years ahead of any other tool, and I think they continue to prove that this is true.

### Learning Figma if you're coming from Sketch

Figma was really thoughtful on behalf of anyone thinking about switching from Figma to Sketch for a few reasons.

The first reason is that they designed the UI and shortcuts to be very similar to Sketch, so designers can retain their muscle memory and not get too confused with learning new commands or shortcuts. This is comparable to a developer switching their code editor; if the shortcuts are totally different, they feel lost and end up switching back to the old editor they were comfortable with - even if the new one might be "better" in other ways.

The second reason is that Figma built functionality that allows you to import .sketch files directly into Figma, complete with all their layers as you would expect to see (not just a flat image). This is such a huge feature for anyone hesitant about losing their previous work that was done in Sketch, because it means they don't need to spend time re-creating designs again in Figma.

### Design Systems in Figma vs Sketch

This is an topic that most people don't agree with me on (yet), but I believe that design systems should exist in the codebase as the source of truth for design. This means that tools like Figma or Sketch should serve as a UI to consume and manipulate design elements that are rendered from the codebase being used in a customer/user facing app or website.

While Sketch does have symbols and Figma does have components to make it easier for designers to create organised UI inside of the design tools, I believe that this is a spectre of what design systems will really look like in the future.

Once again, because Figma is built using web technologies, I believe they are positioned far better than Sketch to leverage this future (which is not a mainstream idea yet).

Even today, there are plugins like "Interplay" for Figma which allows you to link your Figma file with a production codebase of components, and render them inside your project for designing with.

### An unfair fight

I'm not going to pretend that this is a fair fight, and that there was any chance I would recommend Sketch over Figma, because the truth is Figma is a clear winner in essentially every category when analyzing the "Figma vs Sketch" question objectively.

As I said, I used Sketch for over 2 years and then Figma for over 2 years, and the difference was like night and day (for me and our agency). If Sketch served our needs, we wouldn't have even considered Figma, but the pain points were far too many and far too limiting for the ways that we knew we needed to work - at that time, and (more importantly) in the future.

I believe in Figma so much that I quit my job to start Figmatic and build premium Figma plugins. To me, this is my way of putting "skin in the game", and showing that I'm not just casually saying Figma is "kind of better" than Sketch; I fundamentally believe it is more prepared for the future of working as designers and developers than Sketch is.

If you've already switched to Figma, welcome aboard. If you're still considering it, now is a good a time as any to give it a shot. Based on my experience and every designer I've talked to, within 5 days, they won't want to go back to Sketch.

---

---
type: article
title: The great stagnation of design and development workflows
date: 2020-03-01T00:00:00.000Z
---

# The great stagnation of design and development workflows



_(This article was adapted from a talk I gave at DesignOps Melbourne back in 2018 called [Insanely Inevitable](https://www.youtube.com/watch?v=pb1uvaYGx_k))_

### Digital Agencies

I'm primarily going to be focusing on digital agencies because that's where I've been born and bred. However, I've heard enough stories from my friends who don't work at agencies (and those who do work at agencies) to know that there will be enough overlap for the two, but anything I'm writing about here will mostly be specific to agencies. I'm going to address the typical agency model that still is very much rooted in this "Mad Men"/1950s idea; it's very much still stuck in that way, and even though we don't dress as cool anymore and we don't smoke and drink whiskey in the morning (well, some agencies still do).

### Avocado and Agile

Before I can continue, I need to mention avocado and Agile. These two things may have no overlap whatsoever in your head (rightly so), but in fact, they do have a bit of overlap, and they're also the exact opposite of each other in other ways. Effectively, the way I see it, the biggest widespread innovation in Australia in the last decade has basically been smashed avocado; and the biggest widespread innovation in digital agencies in the same period has been stealing Agile from "product" in a very ill-conceived manner. I actually really like smashed avocado, but on the other hand, I do _not_ care for "Agile" at all. The form it has taken in agencies (sometimes called "Agency Agile") is obscene.

The recipe that agencies follow to delude themselves into thinking they are "Agile" can be summed up as: Fixed budget, fixed timeline, flexible scope.

### Inverse Innovation

What I'm getting at can be summed up in this quote from Peter Thiel:

> "We were promised flying cars, and instead we got 140 characters."

There seems to be this "inverse innovation" that's happening; certainly in agencies and perhaps even in other companies as well. I really just want to address this up front before I continue.

These are just a couple of examples that have I've seen myself from other companies when I say about "inverse innovation":

One company (who will remain nameless) will talk very confidently about design systems and all this trendy new stuff, but in reality, all the designers working there still need to tether their own mobile phones in order to upload their static mockups to InVision (to get around the draconian I.T department).

Another company (who will also remain nameless) will talk about "innovating" with AR/VR, chatbots, but in reality, ths company's file hosting service has a file size limit of 10mb (the same as email it's meant to replace).

It's very much this weird internal vs external thing. Externally, everything is great, there's so many innovations going on, but internally, people can barely understand how to do their regular day job, so in reality there's actually not much innovation happening at all.

As a side note: if your marketing team is talking about things that are "innovative", they are almost definitely not innovative, and you should run away from anything they try to drag you into "exploring" (copying examples of other companies they've already seen do something) for them.

There are a whole bunch reasons for this kind of odd behavior, and this isn't an exhaustive list here, but these are just some sort of top-level points that I'll go through:

#### Everyone is too focused on "busy work"

Everyone is too focused on "busy work". This is a trend you'll just see basically everywhere you look, where you can observe people running very fast, but staying in the exact same place, towards no particular direction and mistaking it for work. Unfortunately for these people, the truth is that doing unimportant things very efficiently doesn't actually make them any more important.

#### Decisions are made by comittee/groupthink

Decisions are often a made by committee or groupthink and there's usually a lot of really good ideas from people at companies and they present them to the higher-ups or the group and then they basically get watered down and you they become the average opinion of the average person and end up being average (at best).

#### Assumption that hard problems will get solved automatically.

There's an assumption that the hard problems will just automatically get solved this is something we're used to so we don't actually spend a lot of time thinking about the hard problems just assuming they'll get solved

#### Fear of being wrong, held accountable or having risk aversion.

There's a fear of being wrong or having a risk aversion this is very common people try to like spread the blame and don't to be responsible for anything going wrong (or right). No skin in the game.

#### Short sighted vanity metrics instead of long term thinking.

It's a trend of short-sighted vanity metrics over the long term so focusing on things that day to day might seem very important but really have no effect in the long term .

#### Incompetence overrides reason.

Incompetence that overrides reason; people who are very reasonable actually doing the work they'll often get overridden by incompetent people above them who have no idea about what they're actually facing or what decisions are right.

#### Process trumps substance.

Process seems to trump substance so kind of just falling back to the process and not focusing on producing anything who value. This quote, also from Peter Thiel in "Zero To One", sums it up best:

> "In the most dysfunctional organizations, signaling that work is being done becomes a better strategy for career advancement than actually doing work (if this describes your company, you should quit)"

#### No definite optimistic view of the future.

This last one sums up the whole thing; there's really just no definite optimistic view of the future; It's very much an undefined optimistic version of the future, where things are _probably_ going to get a better, but we don't actually know how or or why, they're just somehow going to get better.

### Everyone ends up copying each other.

That's why we're in the state that we're in now: everybody is sort of doing the same thing, working with the same tooling, using the same processes and they're doing it because they're simply looking at other agencies and how they're doing it. This can become really dangerous, and can lead to some very weird behavior, like companies rushing to become "Agile", but they're not really sure why or what it really means.

So, there's just this really incremental back-and-forth of copying between companies, or copying things they read on the blog of a big unrelated company like Spotify, and (at best) they're incrementally improving things. Maybe it's not even improving anything at all, maybe it's actually getting worse, but the commonality is that everyone's just copying each other there's not really much original thought going on at these companies.

### The distance between between design and production should be zero

Seeing all these companies mindlessly copying each other, mindlessly adopting new trends or not thinking for themselves makes me very concerned for the people working in them.

This is a quote from Dagny Taggart in Atlas Shrugged, she said:

> "The hardest thing to explain is the glaringly evident which everybody had decided not to see."

This is basically how I feel most of the time when I talk about new ideas related to design and development. As I mentioned earlier, I think the distance between between design and production should actually be zero.

This is not a popular view in agencies and perhaps in other companies as well. When you start talking about this stuff to people and they only take what you're saying at face value (not spending the time to understand why this is important), you basically just get a bit ridiculed and not taken very seriously. Everyone is happy to go back to their _comfortable_ (and horribly time-wasting) workflows that are 20+ years old.

I think we really need to be focusing on what will have value in the future, and this is opposite to the trend that we currently see, which is trying to retro-fit today's ever-changing problems into these traditions of the past.

As I said before, the "Mad Man" model is how agencies looked 70 years ago, but we we haven't really stopped blindly chasing that. We try to cling on to all these existing ways of doing things. Instead of inventing new ways to solve _new_ problems, we just kind of kind of mash them into the old ways we've already been doing things, and it _barely_ works.

Woody Allen kind of sums it up much better with:

> "Tradition is the illusion of permanence"

We can't just cling on to tradition and expect that to remain true for decades, because it's absolutely not true.

### Some more concrete examples of stagnation in agencies (taken from a single month)

Just to really make this concrete, these are some examples of things that I personally saw in a single month (October 2018) in agency/client work. I assure you, these are all from 2018, not from 2008 (as you might think) - which is over a decade ago, and all these examples could easily have been from a decade ago, but they weren't, sadly.

- Static web designs that were created in InDesign, this was the the "handover" format that was provided from the design team for development.

- To receive feedback from a client on a staging site URL, they printed off screenshots of the website, wrote over it in red sharpie, scanned it back in, and then put into a PDF file as an email attachment for us to review and action in design/code.

- A leading agency who gets their designers to take Photoshop (yes, still on Photoshop) files of their designs and export every screen to a JPG file, and then work with the team to put these JPG files into a PowerPoint presentation, which can then be used to present designs to the client.

- Clients "signing off" (to start web development) on a very large website design that had no genuine content in it _at all_, so it's just "designing delusion" (as I like to call it).

- Designs for a web app development handover which was provided in something that looked like it was designed for a print magazine, supplied in low resolution JPG files. There were text inputs _all over the place_, this was very much at the extreme degree of an "unconstrained design". This was just inputs literally put in different areas all over the screen in absolute position... how does the tab index even work on this matrix of inputs? It was outrageous.

- Multiple times in the same month, I had to defend "components" against this idea of "unique pages". I was more than happy to do this, but just the level push back I was getting on just this idea of even _considering_ component based design was nuts.

- No design thought given to any sized screens below 27 inches - this is almost a constant theme.

- Mobile mockups with _totally_ different content to the "desktop" version of the exact same pages. I received two completely different sets of content, or at least the contents were in like a totally different order on both mockups. This is a decade since "responsive web design" became a term, and we still seem to have no idea what it means.

- Finally, some app designs for a very large company that I received for "handover" weren't even using their design system (which they do have). They were literally doing stuff like changing the global font weights and just designing completely new inputs... it's out of control.

### Existing tooling has run out of track.

Traditional design tools and workflows have basically run out of track. There's almost nowhere else we can go with with these current workflows and tooling; instead, we need to jump the curve and actually think about approaching this in totally different ways.

This isn't just my opinion, it's slightly re-assuring to know that other people in the community have a similar view to me on this.

John Gold from Airbnb said:

> "Looking at the current crop of design tools after taking a glimpse of the future is frustrating."

Daniel Eden from Facebook said:

> "Even the most advanced design tools are based on workflows for drawing mere pictures of interfaces"

These quotes are both very relatable to my mind, and I think they're both correct. Once you've crossed the event horizon and truly seen that the way we're doing things now is extremely stagnant and doesn't have much track left in its path; you can see how one might become obsessed with the idea that a future exists where things _can_ actually be better and get us past what we've been doing so far.

### A New Hope?

I believe that design and development type work should actually get way faster and cheaper over time, _especially_ the "simple" tasks that we still seem to struggle so much with. However, I've noticed the exact opposite trend in our industry, where we're actually getting slow and more expensive over time. Even things like websites (we should be _really_ good designing/building at websites by now!), they tend to get much _more_ expensive over time and take much longer to complete, rather than the opposite that one would expect to see.

I really like this quote from Ricardo Semler, taken from his book “Maverick”, he said:

> “We've all learned how to go on a Sunday night to our email and work from home, yet very few of us have learned how to go to the movies on a Monday afternoon.”

This was one of my goals for the team I used to work in. I wanted us to be so good, that we would literally be able to go to the movies during the week if we felt like it, because so many of our the tasks we used to do so poorly would be automated if we worked hard enough to make that happen.

I'm still very optimistic these (already dated) tools and workflows will become a distant memory, once everyone realizes how poor they truly are (after the things that will replace them become widely adopted enough).

Identifying these problems is a positive first step, but after that, the thing that really matters is working very hard towards a definite optimistic future where things look very different from the way they do today. I will personally be working towards bringing about this future, and I won't be giving up until we get there.

I will leave you with this one last quote (also from Atlas Shrugged):

> “Do not let your fire go out, spark by irreplaceable spark in the hopeless swamps of the not-quite, the not-yet, and the not-at-all. Do not let the hero in your soul perish in lonely frustration for the life you deserved and have never been able to reach. The world you desire can be won. It exists... it is real... it is possible... it's yours.”

---

---
type: article
title: How and why our team switched from Sketch to Figma
date: 2020-02-27T00:00:00.000Z
---

# How and why our team switched from Sketch to Figma



This is not a tutorial on Figma, it's not a "Figma 101" listing out its features or anything like that; it's a story about my previous digital agency, Tundra, and how I came to introduce Figma as a tool that we could use at our agency. This article also has a "Notorious B.I.G" themed structure, so each section will just riff off a Biggie Smalls track title.

For those who don't know me, I was "officially" the Lead Front End Developer at Tundra, but I changed my title all the time on Slack. At one point I was "Editor In Chimp", so you can see we didn't take job titles too seriously. Even our Technical Director of the agency had his client-facing role as "Junior Front End Developer". We really didn't take them too seriously and I think that just made it easier for us to be more adaptive to work on things outside of our disciplines and actually take on parts of the job that may not be in the official job description.

### Kick in the door

> My workplace is shit... how do I change things?

This is the question that I received quite a lot at the DesignOps Melbourne meetup I used to co-run. I was getting people from big companies, big agencies, product companies and so on; and it was effectively a version of this: "Things aren't that great in my workplace, but I don't even know where to _start_ to change them".

This is seems to be a _really_ common problem, and I want to try and hopefully address that a little. I don't have all the answers, but I'm going to be talking about a period of a few months (back in early 2018) from my perspective, where I made it my mission to introduce Figma into our agency.

### Everyday struggle

The design workflow is broken in most workplaces, almost in every workplace actually, it's broken in one way or another. Even in workplaces that seem to have a pretty good workflow, there are probably one or two areas it's not totally perfect and it will probably never be perfect; but there's degrees of that, and a lot of companies are more perfect than others, and some are just on the other extreme and are truly awful, too.

I think we do have this everyday struggle as designers and developers, and it's when both are combined or overlap where it's the most obvious that it's totally broken, but it's not as obvious how we get past those things that are broken. The most common outcome is that people get complacent and start learning to live with those imperfections, like the "20 folder deep" manual versioning of project folders and files on a crappy server. There does seem to be more of a tendency to get comfortable with these problems rather than putting things in place to try and leap over them, and I think that's a huge problem.

### Things done changed

We are in a spot now where things have slowly started changing for designers and developers. There are a few trends that have been happening for a little while, and they will continue to happen. Some of these are pretty obvious to me; the first one is quite a big one: collaboration. If you look at the tooling that is coming out, they're building in collaboration to many of our tools, so this is something that is being more widely used and more widely requested for on projects. This is getting built in now across the board, everything from other tools like Google Docs to Slack is very collaborative, and Figma is clearly very collaborative, too.

There is a trend where things are getting more collaborative rather than this "siloed" workflow that a lot of people are used to, so decentralization is another important trend. Lots of us don't work next to the developers or designers on our projects, so we have to be able to work in decentralized way, whether developer is in Canada or Australia, and still be able to have a really good workflow. So, decentralization is another really important one.

The third one would be: iteration. We _need_ to be able to make iterations quickly that don't go through this crazy process of generating those designs with 40 pages, getting those to "95% done" and then presenting it to the client as a finished product, then being so _shocked_ when they don't like some of it. You thought you've perfected this design, but you're actually back to square one now. I had this joke where I would ask a designer how the design was going, and they would say "it's 90 percent done", to which I would say "cool, so about halfway then?" - because you know like it's going to come back - it's not done. Whether it's from client feedback or internal feedback, it just doesn't really work that way, so the fundamental way of how we need to work needs to change. It has already been changing and it will continue to change. This is not something that's just a little "blip" and we kind of like this idea of collaborating and being able to make fast iterations, this is something that will only increase with time, so I think acknowledging that is quite important.

### Somebody's got to die

With that being said - somebody's got to die. In our case, we were big fans of Sketch, we had been using it for a couple years full time after we got off Photoshop quite a while ago (back in 2016).

Ironically, that the switch from Photoshop to Sketch was fairly similar to what I'm going to be writing about now, so I could basically take this process and apply it to how we did it back then.

I vividly remember a walk like back from a local cafe with one of our designers back in 2016, and he said "Man, I can't wait until we can use Sketch...", and I stopped him and said "What are you waiting for? You're probably the most senior designer here". Even these designers who are very senior and very knowledgeable still feel like they're being held back or they don't feel like _they're_ the ones who can make that decision, and I just think that's _so_ sad, because it's holding back very smart people who have really good ideas or want to change things.

### Going back to Cali

So, I looked into a new tool called "Figma" that could clearly resolve a lot of these problems that I think everyone's familiar with. I'm not going to go down the laundry list of all the problems that we had with something like Sketch or Adobe products, but Figma immediately just jumped out to me.

At first glance, it's effectively a "Google Docs" version of a design tool. It's really based on this collaborative idea that's that's built-in to the product, it it's not like an "add-on" you need to install; they've built it from the ground up that way.

For me, the most important feature of Figma is that it is built using web technologies. Unlike Sketch or Adobe products, it's not a native Mac or Windows app. With Sketch, you can't install it on Windows or Linux, so the fact that they've built Figma from the ground up in the web,using web technologies, it seems like not many people acknowledge that as being such a huge deal. I believe Figma is two to three years ahead of any other design tool just based on that fact alone. It's such a big deal.

At the DesignOps Melbourne meetup, our mission was to "reduce the distance between design and development to zero", and I truly believe Figma (and how it's built) will be pivotal in helping us do that.

### Ready to die

You have to be ready to die for this stuff.

If you truly believe in something, let's say you're still on Photoshop and if you know that Figma is better alternative to Photoshop, it may or may not be an "easy sell", but if you _really_ believe that it is the better alternative, and you _know_ you're ready to die for that idea, I think that's a really good place to start.

You have to be willing to stand up for what you think.

> "To sell your soul is the easiest thing in the world. That's what everybody does every hour of his life. If I asked you to keep your soul - would you understand why that's much harder?"

I really like this quote from a book called "The Fountainhead". This is said by the main character, Howard Roark. He maintains this extreme level of integrity, because he knows that on a long enough timeline you're going regret it if you if you just sell out every single time and don't stand up for what you think is the right thing to do.

### Notorious thugs

You can get some help so you don't have to do this on your own. There are other smart people in your company or your agency who probably has similar thoughts. They might not be obvious at first, but you can find them just by talking to them.

You want to find a few smart "mavericks" who are willing to put themselves out there a little bit and help you with this mission of implementing change. I had this at my agency, where I reached out to a few designers who I knew would be interested in making a change to our design tooling. They were really supportive of helping me try out Figma as a design tool.

I wasn't a designer at work anymore (I used to be a designer), I was not on the design tools, but these guys were, and I really valued their opinion of Figma as a design tool; so I wanted to work with them as a developer to see how that integrated into my workflow as well.

It was really a bit of a back-and-forth to see how we both could work together with this new software.

### Just playing

To get this to work out, you really have to build in a "20% expected failure rate" from the start, and by "failure", I don't mean this in a bad sense at all.

I think there's a level of fear, where designer will say (or think to themselves) "if I do this, am I going to lose my job? Am I going to get in trouble?", so I think you need to build that expected failure rate in from the very start, because switching to _any_ new tool is going have some speed bumps, whether it's from the software itself or the onboarding process, or maybe you're not as fast with it straight away; and that's okay.

So, I think building in that failure right from the start and letting people know that it's truly safe to try these things, and re-assure them that they're not going to get in "trouble" for it; and in fact maybe a better company-wide message is that they're more likely to get in trouble for _not_ trying new things.

### Hypnotize

I can't emphasize this enough: talk with your team.

I think a lot of people just internalize this stuff, and have self-talk where it's like: "oh boy, I _wish_ I could use Figma... when will _someone_ change things here so we can use it?" They start getting really worked up internally, but it helps to just talk to your team about and see if they've been thinking about the same things; there's a good chance that they probably have. Not even just the designers or the "discipline specific" person, talk to the producers, the copywriters, the account managers, leadership etc.

Every _single_ day I was posting something about Figma in our agency Slack channel. I was doing this for about two months so they were consistently aware of it and thinking about it, and we had really good discussions about it. I think it's often about educating people in your team/company as often as possible and really just keeping that communication going every single day. When I was in the kitchen downstairs making breakfast at work, I would talk to the designers and we would have like a ten minute chat right there, and I think that was really critical.

### Big Poppa

When it comes to management, leaders or "senior" people in the team or agency, this of course becomes a very easy excuse to make: "oh, you know, _my boss won't let me_...", but it's really self-defeating and again, you're internalizing all this and chances are you probably haven't even _talked to them_ about it (if you're being honest with yourself).

My approach to this (affecting change or bringing in things that you believe into a team), which doesn't have a hundred percent success rate, but it has proven to be the most effective way I've found to convey value is something like this: you really want to make whatever you're doing or whatever you're proposing **ten times better** ( not _ten percent_ better, ten times better), and a 10x improvement of _anything_, any metric, is very, very hard to argue with, or ignore completely.

You might get some push back, which is great, that means you're having a conversation about it, but if you can put that initial work in yourself, and you've shown that you've taken the initiative to go above and beyond in your own time or at work, or researching at home and actually demonstrated it to someone, and showed that it is ten times better (in whatever metric you're measuring), I think that's going to give you a really really good shot at at least getting approval for that initial trial with the "built-in failure rate" from your design manager or your your "higher-ups" as well, so I really recommend this approach.

### Suicidal thoughts

This has come out of my own discussions with designers from lots of different companies and agencies that I've talked to. It's a really common theme where there's a very self-defeating attitude, that feeling like "nothing is ever going to change" or you're _waiting_ for **something** to happen or you're waiting for someone else to make that change. I just never really understood that, because no one else is going to do it.

_No one is going to save you_, and as soon as you realize that, and you realize it's actually up to _you_, then that's probably a good frame of mind to have. And to anyone who's "stopping" these things from happening, or stopping all these discussions from happening; that the sad truth is the best people in your company or agency will quit. The best people won't put it up with it for too long, they'll quit and they'll find somewhere else that that _will_ offer what they're after. I know a bunch of people who have literally quit their job in the last six months because their company was a still on Photoshop, or maybe it was just something that they couldn't see changing in the near future. So, the best will quit, but what's even worse is that the rest will stay and they'll be _dead inside_.

The people who _really_ don't feel like they have any power to change anything will be the ones who stay at the agency, and they'll be learning to live with those subpar processes or subpar tools, and they'll just be dead inside and won't actually say anything. Because of that, all of their work is going to suffer, their creative souls are going to suffer and their integrity goes at the window. The real-life implications of not being able to have these discussions, or not being able to try new tools actually has way bigger impact than just "this little tool is something one of our designers wants to try but we're not gonna let them and they'll get over it" - it's mostly fatal in the long term.

**tl;dr - Try Figma and save your designers souls.**

(_This article was adapted from a talk I gave at DesignOps Melbourne back in 2018 called [Life After Sketch – Featuring The Notorious F.I.G.](https://www.youtube.com/watch?v=7s5ZRYfI2X0)._)

---

---
type: tutorial
title: How to export animated banners from Figma to HTML using Bannerify
date: 2020-02-17T00:00:00.000Z
---

# How to export animated banners from Figma to HTML using Bannerify



#### Video Transcript

Today we're going to be looking at how to design, animate and finally export banner designs from Figma directly to HTML (including a number of advertising platforms).

The first thing we're going to do if you haven't already done so, is install a Figma plugin called Bannerify. You can do that by going to the Figma icon up in the top left, clicking on "Community" and searching for "Bannerify". You can see it's popped up with two different results, so we've got our "Plugins" tab, which is the Figma plugin itself; so I've already got this installed but if you don't have it installed, you can just click on the "Install" button and that will install it for you.

The other result which we'll come back to in a second is under the "Files" tab. This is a example design that I've published on the Figma Community files area, and what you can do is you can actually click on this and duplicate it to your own Figma files, and what that's going to do is give you a really easy quick start just to play around with the Figma plugin and see how it works without actually spending some time designing some banners for yourselves. I've got that duplicated over here and you can see we've got a bunch of banners already set up. So, if I right-click and go to "Plugins" you'll see I've got "Bannerify" just here. I'm going to click on that and once that loads you're going to see a few different things on your screen; so I'll just go through each part of the UI one by one.

The first thing you'll probably notice is if you scroll through, you can see previews on the right-hand side of all of the banners that we can actually see in a Figma file, so what Bannerify is doing is it's actually going through every frame in your project or in your page and it's treating every top-level frame as a new banner design. So, on the left here you can see if I expand out a couple of these frames I've named them to represent some of the commonly used sizes for banner ads and you can see each one's just a regular frame in Figma, and inside of that frame you've got just regular layers as well; so we've got some text layers, we've got an image layer and we've got a another frame which has auto-layout on it to do our buttons. So that's just a frame with some text in it and then it's got auto-layout applied onto it. You can see that here it's got auto-layout on there so if you want to remove that you could, but for now I've just left that on to make it easier to update.

You can see here in every group or in every frame this is a list of all the layers inside of each frame so these are these are representing exactly what we can see over here in our Figma layers so anything that's added inside these frames will show up in the timeline here and you can see the layer names over here. The large rectangle layer over here that represents this layer in our file over here this slide rectangle so that's that's kind of a visual breakdown of of how all the layers look when they get loaded into Bannerify automatically. The second thing you'll notice is the animation timeline here, so because I've duplicated this from another project I've already set some animation styles on it so Bannerify will remember animations that you've applied to your layers in Figma; so when you relaunch it, all of these animation styles will actually be saved and you can you can rerun it again.

These timelines actually affect how fast and how long the animations will wait to actually start playing, and you can preview what they look like by just clicking on the "play" button over here so if you click on the play button for any of the banners, you'll get a real-time preview of what that animation actually looks like when it gets played back. The other cool thing is it'll automatically update the animation on the fly as you change certain timings, so if I increase this you can see it's reflecting the change immediately in the preview and likewise if I click on this "loop" toggle; enabling that will ensure that the animation just keeps going over and over and over again even after the timeline's finished.

The other thing you'll notice is on the left-hand side just next to the layer name is a drop down for animation styles. At the moment this one has a fade-in-left on it, but I can quite easily change that to coming from the bottom; so if I click on that you can see here it's coming up from the bottom instead. I can move that back here so I can make both those things happen at the same time I can fade-in from the right I can do a rotation if I wanted to; that's out of control, but you might want something like that. There are many, many animations that are already configured for you and they categorized by the type of animation; these are all "entrances" so these are all animations that will help an element to enter into the frame, and if you wanted to do an exit you can also do that too. I can apply an exit onto this onto this element here and that will actually take it out of the frame in an animated way and then there are a few other ones as well. We can do a scale-up, so this will kind of scale-up an element, and then we've got another category for attention-seekers; so you might want to draw some attention to one of your elements in the in the creative. For example, this heartbeat animation I can kind of click that on and now that element is just going to do a little bit of a pulsing animation on a loop because I've just set it to "loop"; but there are many many different animations that you can try out. This one's kind of a jello sort of one, I can increase the speed to make it a little bit more impactful, slow it down a bit; so there's many different animations and it really just depends on your creative and and what kind of feel you're going for with the animation style.

You might be thinking it's pretty annoying to go through and and change a select box every single time when you want to change an animation, and I completely agree, so there's a few things that we can do to make the the selection and updating process of animations much easier so the first one would be just by simply doing a multi-select. I can actually click on any layers from any of the frames and you can see down here it's it's selecting all those layers for me and I can do a bulk animation and apply to all the layers I've just selected. For example, I can also de-select them, so I'm just going to get rid of some of these layers now. For example, if I wanted to change the first two layers of this frame to have a certain animation or the first three I can just select those three layers and then down here I've got the same animation options; in this case I'm just going to do this flip-in animation and I'm just going to change that actually to be a rotation so you get a little bit of a preview down here of that, and you can adjust the speed beforehand and when you're happy with it you can just click on "apply animation" to (in this case) three layers.

So, I'm going to click that button and what that's doing is: it's applying our animation that we just set to those three layers, so you can see here it has applied the rotation animation to those three layers, but also the timings that we set for those animations as well. So now all these are the same timing and the same animation, and if we play that back you can see they're all coming in at the same time another way we can go about doing this which can be helpful if you want to do it for an entire banner would be just to click on the select box at the top of the banner and that will select the layers that are inside of that particular banner so you could do this for multiple and and do that quite easily and just apply one style to every single thing every single banner if you wanted to; but in this case I don't want to do that, but that is an option.

Another way that you can target layers is by using this drop-down in the top. This "quick select layer names" drop-down if you open that up we can see that we can actually select layers based on their type and name so it categorizes a by the type so got frames rectangles and text and then each layer name will be grouped based on that naming being similar. In this case, if I wanted to select all of the background images, I can simply click on this match a background rectangle, click on that and you can see here it's pre-selected all of those layers based on that name. What that now means is I can apply an animation specifically just to that type of layer or that layer name, so in this case I might change it to a fade-in and you can see down here I've just kind of configured that and get a bit of a preview of what it's going to look like, and when I'm happy with that I'm just going to click "Apply to 11 layers". I'm going to do that now and you'll see it update in real-time, so it's just shifted it to be a delay of 0.6 seconds as a fade-in and you can see all of the layers have just been updated. If we replay that now, I've got our animations and now we've got to fade-in instead of the scale-up animation that we had previously, so that's a really easy way to target specific layers as long as you've named them to be the same and as long as they're the right group that you want you can very easily switch between those and target them so it's a really quick way of making updates and a really nice way to apply a bunch of animations after you've sort of played around with it in the preview window in real time, so I really like doing it that way.

There's also another feature that we haven't covered yet, which is these two magic settings: so we've got "magic delay" and we've got "magic speed". The other way you could think about this is by calling it something like "lazy mode", so if you're if you've been handed a design or you've been tasked with doing a design of a bunch of banners and you're on a crazy deadline and you don't have time to really finesse all the animations the way that you would usually really like to, this is a nice way to create some animation offset without having to manually go through and do it yourself. What I mean by that; it's probably easier if I just show you; so if you click on the "magic delay" select box, you'll get a bunch of options for offsets so in this case I'm going to click on 0.4 seconds magic delay and you'll see what happens when I click that now. I'm just going to click that and you can see the whole timeline has just completely shifted as far as the delays go, so we selected 0.4 seconds and so what that's done is it's actually added 0.4 seconds to every layer in a cascading manner, so you can see on the right-hand side all those animations are now cascading in terms of when they start the playback and this gets applied to every single banner in your creative.

That's a really easy way to make updates to all of your banners at the same time without having to manually add all those different offsets if all you really want is a simple cascade so that's back down to a little bit less and we can just keep changing and do a happy with it so this is a slightly quicker one okay we can even quicker so we might be happy with that and then the other side is kind of what you would expect as well. In this case the magic speed will change all of the layers to have exactly the same speed, so what I'm going to do is I want to change it to make everything have 0.7 second speed, so I'm going to click that and you can see all the layers are now have exactly the same speed so that's that's a pretty nice way of easily creating cascading animations without very much effort at all. These kind of work independently of each other, so if you did want to have different delays over here, just some sort of crazy delays with different speeds, so if I wanted to set this if I want to set the same speed on all of these layers but keep all the offsets that I've already manually set I can still change the speed and the offsets won't be affected. So, if I change that to 0.5 you can see it's pulled back to where all my offsets already were so it's not going to mess those up unless I specifically override the delay, so it can be pretty nice if you just want to play around with speeds or play around with delays, but you've already kind of got your speeds or delays sorted and you just want to kind of automate the other one so that's a really nice way of doing that.

What I'm going to do is I'm just going to change all of these to be similar, so I'm going to quickly go through and show you how I can just quickly make all these banners look good with that much effort. In this case, I'm going to use a fade-in-bottom for all of my brand names and I really want that to come in first, so I'm just going to change that and apply it so all my brand names are now fade in bottom I can see that over here that's pretty nice and then if I go to the brand characters that's going to let me pick another animation so in this case I'm going to do the same thing and do a fade-in-bottom, and I'm not going to be too worried about the delay because I think I'm going to cascade those up myself in a second using the magic delays, then I'll do the tagline and again we'll do a fade-in-bottom. What I'm going to do, is I'm going to set all of these to a 0.4 second delay let's see how that looks; so, it's probably slightly too slow, so I'm just going to speed it up a little bit. I'm fairly happy with that, but the one thing I'm not happy with is the background, so I'm going to just change the background to take much longer to fade-in completely. I'm just going do a fade-in and I'll see what that looks like. Okay, so that's just been applied you can just see it applying the timeline and I think that's better now that we've slowed down the fade-in a little bit.

So, now that I've shown you how to do the animation there's probably one more thing I'll show you before we export the banners. You can see over here; I'll use a bigger one actually so you can see; over here we've got all of our layout from Figma and so this one is for the square layer, so if I jump to that here and you'll notice if I make a change in my Figma frame you're probably wondering why is it still looking like that in the preview, and that's a good question to ask; and the answer is you have to refresh the data if you want to get that position updated in here; or add any layers or change any layers in Figma after you've opened Bannerify. So it's very simple, you just click on this little "refresh" button up here and you'll see in a second the new preview is loaded with the text in the brand new spot that's coming from over here, and we can see it here just in the corner where it should be. So that's perfectly perfectly normal to do that if you do need to make a bunch of changes and see those reflected in the Bannerify preview you can simply click on that "refresh" icon and you will see those pop right up.

I'm actually just going to leave that there for now just to kind of demo of what that's going to look like in a second, so once you're happy with your banners and the animations in them you can click on this big blue button up here which says "Export Banners to HTML"; so I'm just going to click on that and you'll see this panel pop out up the top here. We've got a little bit of a pseudo preview of roughly how the banners going to be exported or the preview page. Bannerify creates a custom preview page which basically loads in all of the exported banners to a single page that you can review and play all the animations on at once. This is really helpful if you're sharing a link around internally or sharing a link with one of your clients or you just want to get someone else's eyes over it for approval and so Bannerify will generate this automatically.

We get a few options here: one of the options is to use "dark mode", so this will change the background of the page to be in a dark mode setting, by default it's just the same gray as the Figma background. The other option we have which is sometimes the requirement for banners is just adding a black border to all of the banners so this is something that you can do if the creative or the brief requires you to add a black border, which is sometimes does. The other thing you can do is add a little preloader animation, so you can see these little animating spinners here, this is an optional setting which will show that spinner in place of just a blank square if you want to have a little pre-loading state while all the images are loading.

Finally, there's a setting for compressing your images, so depending on the use case for your banners, sometimes certain advertising providers have a certain limit that they impose on file sizes so if you do need to get your image sizes down to get under that limit you can play around with the image compression, which is built into Bannerify, and this will really help to reduce the image sizes that you would usually get directly from Figma. It will take slightly longer not much longer but it will take a little bit longer if you do decide to compress them so I'm just going to leave that off for now and I'm just going to leave all the other settings as default.

The second thing that you probably noticed is this export format select box. By defaultd this is set to "Vanilla HTML/CSS" and what that means is it's not loading in any code for a third-party advertising platform like these options here, so this can be really useful if you just want to put a banner up on your your own website or one of your clients websites but not necessarily link them to an advertising campaign or advertising platform it can also just be useful if you want to prototype an animation or interaction and display it as a banner and sort of send that around up with that in one of your prototypes or something like that; so the Vanilla HTML/CSS option is really good if you just want to get a bunch of code and use it however you want without any extra code specifically for advertising platforms. In this case, I'm just going to use HTML. The other option that you get with that is to put a URL in there; so if you don't put your role in there the banner won't have any links, it won't have any redirect on it, it'll just be a plain "div
and if you do put a link in there, that div will be rendered as an "anchor" tag with an "href" in it, so if someone clicks on it, it'll take them to whatever website or URL you wanted to put in here. In this case, I'm just gonna leave that off as well.

When you've configured all these settings, the final step is just to click on this blue button down here, which says "Export 11 banners". So I'm going to click that now; so now it's doing its thing behind the scenes, and in about one second you'll see a .zip file pop-up which you can save. So that's up here, and by default it's just the the format that you've exported and then today's date with the timestamp, and you can change that name if you want, to but for now I'm just going to leave that as as is. I'll just hit "Save", and if I jump to my desktop you can see this is a .zip file it has just generated for me. I'm going to double click on that, open up that folder and the first thing you'll notice is there's all these different folders which have the same layer names as we can see over here in Figma in the left hand side. The other thing it has done is prefix all of those layer names with the dimensions from each of those frames, so if we jump into one of these you can see there's a few files in here they all look like that so all the structures are exactly the same.

If we just go through these files really quickly: so it automatically generates a backup JPG for all of your banners, so this can be very handy especially for the advertising platforms, but you may just want that JPG export as well for other reasons. Then the "images" folder; this is providing us with all of the individual layers and images that we'll need. Text is rendered as SVG, so that's to keep the file size down to a really low number, so it's like two kilobytes for this one, and also have super super sharp quality regardless of what kind of screen you're rendering it on compared to PNG, but the PNG looks looks pretty good as well and the file size is pretty low if you're just using it for things like buttons.

But the key thing that we want to look at at the moment is just a quick snapshot of how everything kind of turned out in the render so I'm just going to click on this "index.html" file that was in the root of the folder we just unzipped. If I click on that you can see here this is all of the banners that we just exported from Figma, so if I resize, you'll see that this page is completely responsive; it will automatically figure out the best place to put the banners, so you have a really nice preview page and I can keep keep dragging that out. The other neat thing is this little "play" button up here, so if you wanted to replay those animations over and over again you can just keep clicking that button and you'll see those all play in sync, which can be really nice if you just want to get a overall view of how everything looks and interacts together this can also be handy if you know that there are certain banners that are going to sort of interact with each other in some way from an animation standpoint, sometimes you might have multiple placements on the same page and they kind of play off each other or something like that depending on your creative.

So you can just keep replaying it, and of course if you're not happy with any of the animations you can just jump back into Figma update the animations or the positioning and re-export it just as we did a second ago. You can see here in this square frame up here (the 250x250), it has reflected the change that we just made while Bannerify was running, so that's this change down here that you can see just in that top right position. So that's the other really neat thing, is that typically if you're not doing this automatically when there are these positioning or sizing or animation changes usually you know a developer or somebody building the banners will have to re-save all of these assets from Figma and re-calculate all the positioning by going to the code tab over here and kind of figuring out all the different offsets manually and then updating the code once again, with Bannerify, that's no longer an issue. It's really nice to just be able to reduce that feedback loop to zero and just keep iterating on creative and iterating on animation really easily.

There are a few small things I just wanted to point out as well before I move on to a fresh canvas to show you what that looks like. So, if we rerun Bannerify for a second, there's a couple of things to note. The first thing is that all of the export settings are kind of preset if you don't certain the export settings on your layers so what I mean by that is if I click on the "Book Now" button or any of the the "Book Now" buttons, you can see down here I've got a an export setting of "PNG" at "2x". Because this frame has a transparent background on it, I really do want that as a PNG, but by default the Bannerify is set to basically fall back to saving things out as a 2x JPG if any layer doesn't have an export setting on it, and that's more just to be on the safe side if if everything was made to be a 2x PNG or a PNG, the image sizes would get very big very quickly and oftentimes there's no transparency or there's no reason to need that PNG; so that's the reason why it defaults to a JPG. It is worth noting if you do have any transparency on any of your layers image layers, you just want to go ahead and set the export setting to PNG at whatever resolution you require and then you text layers as I mentioned before will automatically get saved out as SVGs, so you don't have to worry too much about that.

So I'll quickly re-export these in dark mode with image compression as well just to show you a little bit of a different setting. What I might do is just set that to like 75 or 85 and I'm actually just going to leave the rest the same just so we can compare sizes. I'm just going to export that again and we should be able to save this zip in a second; as I mentioned before the compression setting will take slightly longer because it has to go through every single image and compress them, but you can see it's already finished and the image savings that you get is definitely worth the extra time. I'm just going to open up the brand new .zip, and before I do that, the thing you'll notice here is how the .zip archive size has gone down from 3.2 megabytes to 831 kilobytes and that's completely due to the fact that we just enabled image compression and set it at level 85 in this case. If you need to get that down even more you could add even more aggressive compression, but even compression at a higher level like an 85 to 95 will really get that image size down for all of your banners, so I think it's definitely worthwhile.

If you open this up, I'm just going to re-open the "index.html" preview page and now you can see we've got dark mode enabled as well, and because we're running this locally you might not be able to see the image loader for very long, but you sort of get a glimpse of it in the background there as well. Once again the play button can just be clicked infinitely, and you can just keep watching those animations. So that's what dark mode looks like, I think it looks pretty cool depending on your creative, and also helps to simulate if your target website is darker or lighter, but also depending on what kind of creative you're using the dark mode can look kind of nice as well; compared to the the light one this kind of looks much nicer I would say, so that's that's what dark mode looks like that's what the loading looks like. That's just the infinite kind of refreshing that you can see, and the positioning update I made on the square has been rendered now, so in the first one we moved the text up here but in the second one I reverted the text to be back down here and you can see straight away it's it's moved without me having to rewrite any code which is super nice and that'll of course apply to animations as well it'll just keep updating it depending on whatever you've updated into Figma.

That's that's roughly what that looks like, so I'll just close that off so this was obviously using the the file that I already designed as an example which you're more than welcome to use and grab from the Figma Community files if you just want to have a bit of a play around with it as I have just been doing, but the most likely outcome is you're going to want to do this from scratch so I'm just going to give you a quick demo of what that looks like if you're running the Figma plugin from scratch. This is a completely blank Figma page and I'm just going to re-run Bannerify here, and you can see this is a completely different state to what we're used to seeing from the last couple of times we run it. The reason this is showing up is that document is completely blank, we have no frames so far, so it gives us a couple of options: one is to look at the example file that we were just looking at, so if you click on that it'll link you straight to opening that Figma file that we were just working in.

The other option is it'll quickly scaffold out a bunch of the most popular sort of sizes for banner ads and you can pick and choose which of these you actually would like to use, so you can turn them on and off. In this case I might just get rid of the smaller ones in my case so now I'm left with nine, so you can see here it's kind of telling you how many it's going to create and when you're happy with that you can just click on "Create nine empty frames" and it's immediately added those to our Figma file. You can see down here it just created all these brand new fresh frames for us to design things in and it's named them set all the correct dimensions and they're ready to go, and the Figma UI the Bannerify UI has changed to reflect that as well, so it's loaded in all of the blank previews these are all have nothing in them at the moment and the kind of prompt here as well is now asking you to add some layers to to these different frames, so we can we can totally do that and now.

You can basically just design it as if you were designing anything, so you design your normal layers; we'll do a text layer and I'll just put put a little bit of a "hello world" in there (way too big), so we can throw them in there, I might design an image, so just using the Unsplash plugin; I don't know what this is, but I'll just use it anyway. I'll just drop that in there; okay, so this is a very meaningless banner, but I'm just going to re-run Bannerify with that and you can see it in here; it has picked up on my brand new creative (which I'm very proud of) and what it's done is by default it applies a simple fade-in animation and cascades that to 0.3 seconds with the speed of 0.5, so that's basically mimicking what we were looking at before with the magic speeds. It essentially defaults to a few magic speeds for any new creative that you want to roll out, so that's just a really nice way to have some animation to serve as a starting point, but of course that can be that can be changed, so we might want to do something a little bit different. We could do a puff-in, so we might want to make that a little bit longer, and this is working exactly the same way as we were just playing around with the other other banner campaign.

You can just keep messing about with these and it really just depends on the creative and the brand or the style that you're trying to go for, so we could do something a bit wacky here; maybe the jello one again; well this one that's a bit crazy; you can loop that; we probably don't want to do that version, but that's a rough idea of how it could look. Same thing if I need to update the layer position, I can just update it here, "refresh", and you can see that come in there now. In this case, I'm actually just gonna get rid of all the other frames; oops, wrong way; so, I've just got rid of all the other frames and I'm going to refresh this one. I've decided all I want is the medium rectangle, so I'm just going to hit "Export" and it's exactly the same process; I'm going to compress the image, Vanilla HTML/CSS and actually I'm going to make this one a DoubleClick one I'm going to save that.

So, it's very quick, with just one banner, it takes less than a second. Once again, I can click on that to see my preview pop right up. It's probably worth noting as well you can of course open up the "index.html" file for each banner, so if I open up that one, you can see that come in quite nicely just on its own.

You might also notice this tab that we've just opened with the preview page, you'll notice it says "Page 1" compared to our other one, which had this other title much more relevant to our campaign. If you do want to change that title, all you need to do is go to your page up here in Figma, double click on that and change the page name. I've just re-run that for you to show you what that's going to look like, so I'm just going to export that, save it and there we go; you can see it's got "Hello World" there instead of "Page 1", so that's what that looks like.

The other thing you can do to relaunch Bannerify if you don't want to continually go to "Plugins" is this new feature that Figma has just released, which Bannerify has included. So, it's clicking on this little bear icon over here (the Bannerify icon); just click on that and it will relaunch Bannerify for you, so you don't have to keep opening the Figma plugin. That will only show up after you've already manually run the Figma plugin once, but once you've already used it in your file or in your Figma page, this will be available to you to keep re-running the Bannerify Figma plugin very easily.

So, that's an overview of pretty much everything you need to know to animate and export production ready HTML banners directly from Figma. If this is something that you do very often, I hope that having the ability to re-generate HTML and CSS within a couple of seconds is going to be really helpful to your workflow; that's the reason that it exists, to solve that problem, so I hope that you enjoy using it and I look forward to doing another Figma tutorial once I have more to share about Bannerify and other Figma plugins.

---

---
type: tutorial
title: How to compresss images in Figma using TinyImage
date: 2020-01-23T00:00:00.000Z
---

# How to compresss images in Figma using TinyImage



#### Video Transcript

Today we're going to see how to export compressed images directly in Figma using a Figma plugin called TinyImage. To get started, if you haven't already downloaded it, you want to go to the Figma plugin directory; just click on the Figma icon in the header, then click on "Plugins" in the left, then click on "Browse all plugins". Then in the search bar, if you just type in "TinyImage" (one word) you'll see it pop right up. I've already got it installed, so that's why mine has an "installed" status, but if you haven't installed it, just click on the "Install" button there and you'll be able to use it straight away.

Once you've installed it, you can jump back to your project and you should see it in the Figma plugins panel. To access the Figma plugin panel, you can right-click anywhere on your page and go to "Plugins" and then "TinyImage JPG/PNG Compressor". I'll click on that and that's loaded the Figma plugin for us, and it's automatically retrieved all of the layers that have any export settings on the images; what I mean by that, is if we click into any of the images here you'll see on the right-hand side (outside of the plugin area) that we've got some export settings attributed to all of these images.

All of these have different export settings and you will notice that the PNGs just have one and the JPG photos all have two, so that's being reflected in the list of images in the plugin. We can see the description of the settings on the right hand side, so we've got 1x JPG, 2x JPG, 1x JPG 2x JPG for all of the photos and then for all of the PNGs we can see they're all 1x PNG, so what that means is we get a complete overview of all of the exportable images in the file, so only images that have export settings will be included in the options a list of images for exporting from TinyImage.

We can see that by jumping into all of these images here, so if you don't necessarily want all of them you can go through and uncheck any that you don't actually want to compress or export. You can either do that one-by-one just by flicking through them or you can unselect all of them; so you can click on this top checkbox right at the top of the list, if you click on that it'll unselect all of them. The same thing happens if you've already selected some of them; to select them all you can click on the top checkbox again and it will reselect all of them. You might also want to unselect by image, so if you click on any of the images, you'll see that it'll only select the exports for that particular image.

So that's a really quick way of either unselecting images. If you just wanted to quickly unselect these three images you could click on each of them, or click on the top checkbox and unselect them, and then when we unselect our images you'll see they've been unselected from the whole list; that can be a nice way of doing it. The other thing you might want to do is just include one image or one frame, or two frames. For example, I might just want the Mt. Fuji photo and the matcha photo, so I can multiple select those and in the Figma plugin it will just pick up on those four, and only those will be selected (provided that I've kept these checkboxes checked). So that's how you can go about selecting the images.

Let's just do a test so we can actually see it in action, so I'm going to convert compress a few images here. I've got two icons, so I'm just going to do the 1x, and we've also got this photo up here which I'll do as 2x. The default compression level is 85, but you can move this up and down to your liking; it goes all the way down to "ludicrous mode", which I don't recommend for most images, but it can be handy if you really need to get crazy image savings. However, the default is is 85, so we might just try that for now and see how that goes. So just click "Compress", and then now it's compressing the four images that we selected for exporting. You can see it has already finished the PNG and the JPG and now it's doing the 2x photo of the shop that we also exported.

You'll see up here it's actually popped down a little window for me to save it. The default file name is just "tinyimage" with the date and time, so it doesn't conflict with anything else you've saved, but I'm going to just rename it to "saved-compressed-1" so we can find it easily. If we go back to my desktop, you can see it has saved our image as a zip, and this zip contains all of the image files we've just compressed. If I open up that file, you can see we've got our four images in here, so there's all the four we just exported they're looking pretty good.

If we go back to Figma it's nice to see this breakdown of all of the compression that was done, so we can go through each line and actually check how much was saved per image. In the case of the 2x JPG of that shop photo, it's gone down from 6 megabytes to 1 megabyte so it's an 83 percent saving. The icons or the PNGs have gone down; this one has gone down from 16 kilobytes to 4 kilobytes, so it's a 75% saving. The next one is 75% and the matcha image has gone down from 3.2 megabytes to roughly 500 KB, which is 84%. Then the notification bar will also tell you a total of how much was saved overall; so overall, between these four we've saved 83%, which is roughly 7.5 megabytes, which is quite good. Those savings obviously compound the more images that you you actually compress, so that's pretty neat.

Once it's done you can just go ahead and click the close button in the plugin, that'll just get rid of the plugin. If you do want to export other sizes, you can do that as well. As I showed you before, if you need to change these around, so let's just say with these icons we actually want multiple resolutions. I might want a 2x and a 3x PNG, so if I add a couple more layers to those, I can do that with these ones. I might just want to get rid of some of the export settings or I might want to include extra settings, but I'll show you what that actually does. If I add another one back onto here; so I've just added another export setting; a 2x JPEG setting, just on the Mt. Fuji photo. I've removed them all from the other ones, and all of these also have 2x now, so what I'm going to do is rerun the Figma plugin, which you can do by the right-clicking and going back to "Plugins" and then clicking "TinyImage JPG/PNG Compressor" or you can just click
Run last plugin" (and there's a keyboard shortcut there as well), so I'm just going to click "Run last plugin", so you can see this time our list is looking slightly different, and that's because I just changed those export settings before I ran TinyImage again. If I click on the sushi icon, you can see over here in the official Figma interface (outside of the Figma plugin) all of the export settings that we just updated have been reflected in the plugin. So, we've got 1x, 2x and 3x for this particular PNG, and again, I can choose which ones I actually want to compress. From there I can do none, or I can do just one or two; and if I click out of that again, you'll see down here that some of the 2x ones have been removed and a couple that we just wanted back in there have been added. So it's just the Mt. Fuji one now that's got 2x and the other ones don't have 2x anymore.

All of the settings and images in TinyImage come from the Figma settings, and and that's the same way that the the native image exporting works as well. If I open up that so you can see on the right here I've just opened up the official native Figma export feature so this works the same way, so if I don't select anything and then open it, you can see it's doing a very similar listing of the images, and again, you can you can re-select them, change the selection, click on the selection (actually it does close it whenever I change the selection so I have to keep reopening it), but fundamentally it's very similar and and that's to remove the learning curve being totally different from the native export. It's kind of just the Figma exports with "ludicrous mode" built-in (quite literally).

So what we might do is run it again with these new exports. In this case I'm just going to do it for the sushi; and I'm going to select all of them; and I'm going to put this quality down quite a bit. I'm going to put it into "aggressive mode"... actually, I'm going to put it in "ludicrous mode" just for fun. I'm going to set it to "ludicrous mode" and I'm going to click "Compress". So I've just got these three selected, now I'm going to click "Compress" and it's going to compress those icons for me using different settings. So now we're in the "ludicrous mode" setting and if I save that; I go back to my desktop; you can see I didn't rename it this time, so it's just saved as "tinyimage" and I'll open up that. You can see it has saved out my three three images, so that's in 1x, 2x and 3x. If we jump back here, you'll see the savings on those images have gone to 79%, 81%, and 79%, so a total of 80 percent saved. All those are PNGs, and because the PNG icon is quite smooth and the lines are quite quite simple, the compression isn't as noticeable (even at that extreme), so it's a good way to save file size without actually losing much quality. you probably wouldn't want to do ludicrous mode for high quality image or images like, this I can show you what that looks like, but you're probably not going to want to do that. What I'm going to do is I'll I'll export this one and a re-run TinyImage, and and you'll notice that if I open TinyImage with a layer selected it'll automatically just load up that layer, where as if I load it up without any layers selected, it'll just default to showing all of the layers with export settings on them in Figma. If you do really want to do a quick export of an image, the way I usually do it is just right-click it and click on "Run last plugin" or "TinyImage JPG/PNG Compressor" (or use that shortcut for running the last plugin) and just open it up with the layer selected and you'll see it pre-selects that particular image with those export settings. So that's a really quick way of doing it if you just want to export one or two layers, you can do that really easily and pre-select them. So I'll export these ones at a lower quality, so I'm just gonna move this down, so I might do like "55" or something and see what that looks like. I'm going to compress this at "55" and see what happens; I'll actually get rid of the matcha and I'll just do the Mt. Fuji. So at "55" and click "Compress"; it's compressing those two now, it has finished the 2x, and finished the 1x.

I'm just going to save that and rename it. I'm going to save that to my desktop I'm gonna check that out. I'll just unzip that .zip file, and I can see it's got my two images; Mt. Fuji at 1x and 2x. That was set at "55" quality, and it's actually pretty good; you can notice a little bit of artifacts around the mountain in the 1x, but the 2x one is actually quite good, I'm not noticing many artifacts at, all which is cool. Then if we go back to the the output, so at quality "55" you can see we've saved 93% exactly on both sizes. This was just for 2 images, so we've gone down from 2 megabytes to 138 kilobytes, and we've gone from 5.5 megabytes or 5.6 megabytes down to 383 kilobytes; so in total just off those two sizes of that image we've saved 7 megabytes. So, that's 7 megabytes that won't have to go down the wire to any anyone using our website or on our on our blog, or loading it on an email or banner, or whatever it's being used for, on an e-commerce page.

So that's just an example of how you can save quite a bit of data for users using TinyImage, and and you can experiment with this, as I'm just showing you with the slider. You can experiment with this so if you if you find that "55" is too aggressive in that case, you know you could try "65" or you could just kind of bump it up in increments of 10 and and compare the outputs to see which one suits the kinds of images that you're using. It all depends on how detailed the images are how big they are in terms of resolution or dimensions, and same for PNG's; PNGs work really well for transparency, so these icons for example are perfect for PNG, however, if you were going to set these kinds of photos as PNG, it'll still compress them, but you won't get nearly as good as saving as you would if you are setting them to JPG; and the PNG compression is just going to take a bit longer as well with the the photos. So, typically I would use JPG for the photo style ones, and use PNGs for anything that you need transparency for.

So, I hope this has been a helpful intro to compressing images in Figma, and if you have any questions please reach out, but until then I hope you've enjoyed it and I look forward to giving more Figma tutorials like this in the future!

---

---
type: tutorial
title: How to export favicons from Figma using Favvy
date: 2020-01-22T00:00:00.000Z
---

# How to export favicons from Figma using Favvy



#### Video Transcript

Today I'm going to show you how to create favicons for your website directly from a figma project. The first step if you haven't already installed it, we're going to download a Figma plugin called "Favvy".

If you click on the Figma logo up the top here, and then click on "Plugins" and then go to "Browse all plugins", you'll see the search bar up the top. Search for "Favvy", and if you haven't installed it, you'll see a button that says "Install". I've already installed it, so that's why mine looks like that, but once you've clicked "Install", you can jump back to your project and you'll immediately have access to Favvy in your Figma plugins panel. To access that, you just right-click anywhere on the page, go to "Plugins", hover over that, and then you'll see "Favvy Favicon Exporter", so that's what we're going to click on.

You can see here that there's only a few things we need to pay attention to; there's the empty placeholder state, which is telling us to select a single square layer, and it's recommending that that should be at least 512 by 512 pixels in dimension, and then there's a couple of fields over here; one is for website name and the other one is for theme color. Perhaps if we just select one of the frames that we've got set up here, so for example we can select this the Favvy icon, and by clicking that you can see it's immediately giving us a bit of a preview of how that icon might look at different icon sizes (different favicon sizes) that different websites and different apps will actually use. For example, this one at the top is the 16 by 16, so that's one that you might see in a Chrome tab or Chrome toolbar; this is the 32 by 32, this one 64 by 64, and 150 by 150, which is used for things like iOS devices and things like that.

So it just gives a little bit of a snapshot upfront of how that might actually look and scale across different sizes. If we change the layer, you can see here, it immediately reflects that change in the preview panel in Favvy. We can we can switch between these and it will just keep switching the preview as well.

Let's try exporting this one just as a test. So the website name field is actually where you can put the name of your site; this will show up in certain certain applications, for example if you're building a progressive web app and somebody saves the the website or they app to their desktop, sometimes this is used as a name reference, so I'd keep this pretty short and I would just give it the name of the website without any extra title or anything like that.

Then the theme color; this is also something that's used by certain browsers, so if you've noticed if you use Chrome for example on your mobile device, on Android, you'll notice that sometimes the chrome area of where the URL bar is and where all the controls are at the top of the the browser, sometimes when you visit certain websites you'll notice that that color changes; so setting this HEX value here is going to influence what that looks like. By default, we can just leave it as "white", so if we pop in the white HEX value (#ffffff), which it will default to anyway if you actually don't include a value, so you can leave that out; likewise with the website name, these are both optional, but for now I'm just going to export them with the two fields filled out.

Using the Doge icon, I'm just going to click "Export Favicons"; and you can see it's already finished! It's ultra quick, it takes less than a second to do all of the work. Up here you can see we're being prompted to save a zip file, so by default this is named as "favvy" with today's date and the time, just so it doesn't conflict if you're exporting a few different ones to try a different designs out. You can rename that, so I might actually just rename that one, and I'll just call it "Doge". I'll save that to the desktop.

Then the other thing that we've got is a little snippet of HTML, which we can use in our own website. There's a little button here to "Copy HTML" if we like, so I'm going to copy that HTML by clicking the button. Now it's telling us that the HTML has been copied to the clipboard, so what we can do is to now have a look at what that actually generated.

You can see here we've got a zip file that we just saved, so I'm just going to double click on that and I'm just going to open this folder and you can see here we've got a whole bunch of files. I'm just going to go through them. So we've got the Android Chrome 192 by 192, Android Chrome 512, the Apple touch icon, we've got a browser config file (which is used for Microsoft), and this is the 16 by 16 PNG, 32 by 32 PNG, this is the sort of old school (but still necessary) favicon.ico; so this is kind of the default favicon that a web server will look for, and there's multiple image sizes embedded in this .ico file actually, so that's a really good one to have. The ms-tile is again used for certain Microsoft applications, and finally we've got the site.webmanifest file which is used for progressive web apps or "PWA"s, as I mentioned before.

So what we can do is we can actually take these files and we can use them in a website that I've kind of just thrown together; it's just a very simple HTML file. What I'm going to do is, I'm going to go into my website folder, so this is the example I've created and I've already got an index.html file in there. I'll open up my editor as well just so you can see that so what I'm going to do. I've just copied all those files and now I'm going to paste them into this folder, so all of them go into the root of the project folder. So what I can do is, I've already copied this HTML to my clipboard (if you haven't, that's totally fine, as the zip also includes a file called head.html, which has exactly the same content but sometimes it's easier just to click that button to copy it straight away which I've just done), so I'm going to drop that in there. I've just pasted all of the stuff that I got from the clipboard in Figma, I've just dropped that directly in my head tag in my sample index.html file, and what I'm gonna do is open up this file locally just to show you what it looks like.

You can see here I've got my favicon example page which I've just loaded up, which is the one we're looking at in the editor window here, and you can notice up the top there's a favicon and it's our little Doge that we exported a second ago. That's all working as expected, and so we can see in here it's linking to all of our all of our icons. Our webmanifest here; and to see what's inside of that, I'll open it up in in my code editor so this is the site.webmanifest file, you can see here it has taken what we put in from the Figma input in Favvy and our color scheme. So we just put the HEX code for white, so let's put that in as the theme color and the other file is generated is the browser config file which is pointing to the ms-tile file, which we've also generated here and it's also taken that color value and set it as the tile color.

The plugin has done all this work for us, we didn't have to generate any image sizes, we didn't have to export any images manually, and all of the code has been generated for us, all of the files have been generated for us; so it really is as simple as dropping off the generated files into the root of your project directory.

You can actually delete this head.html file if you're finished with it, that's more of just a thing in case you forgot to copy it from Figma when it generated, so you can you can actually delete that if you like; it doesn't really matter if it's there but I'll just delete that.

That's as simple as it is to generate these files. There's a couple of other things we can do, so if we close this off again. This one that we've just done is a a transparent frame, so this is just an SVG file that I've dropped in, but sometimes you might want to have a background and you might want to have something that's not totally transparent. So what I'm going to do is I've just grabbed a frame, just a regular frame in Figma, and I'm just going to draw that out. I might as well just set it as 512 by 512, so this is my new icon, and what I can do is I'll grab this other icon and I'll pop it in there. If we want to have a background on this icon or even have some padding on this icon, what we can do is we can select the icon inside of the frame, so that's nested inside of the parent frame, now I'm just going to give it 24 pixels of padding around the edges, just so it's not completely flush with the sides because I'm going to add a background color and it might look a little bit weird if it has no space around it.

What I can do is I can click on the frame I can go to the fill over here, so I've got the fill property currently it's just set to white ,I'm gonna grab the color picker and I'm actually going to grab this pink color and I'm just going to shift that a little bit to be a slightly different shade. If I set it like that, so now the frame that the icon is sitting in has a background color and now what we can do instead of clicking on the the SVG of the icon itself, I'm just going to click on the frame and re-run the Figma plugin, so "Plugins", then "Favvy Favicon Exporter" and you can see here, it has taken our selection of the parent frame, and now it's showing us a preview of what it's going to look like with that background color. I'm actually going to grab this background color, so I'm going to grab the fill, get a copy of that HEX value, and I'm going to drop it into here; nd so now this is going to be used as our theme color in the progressive web app (PWA) file and that other file that it's generating.

I'm just going to re-export that now; click the "Export Favicons" button. This is a new one, this is the "favvy" icon so I'll export him to desktop and once again it gives us the option to copy the HTML, however, because I've already got the HTML in here I don't need to re-copy and paste that; all the filenames are exactly the same, so it makes it really easy just to find and replace those files every time. What I can do is check out my new zip file that I just saved, so this is the favicon, I can grab all of these files. I'm not going to include the head file this time because I don't really need it, I've already got that content. I'll copy these files, go back to my web site, paste, and then I'm just going to replace all of those. So, they've all just been replaced, now if I go back to my browser, I'm just gonna hit refresh and you can see it has immediately updated my favicon to use the new one that we've just exported.

This is just a really easy way to create and export favicons directly from Figma. As you saw, it takes less than a second every time, so the cost of re-trying is very low, and hopefully seeing that preview in Favvy (in the Figma plugin itself) is a really good way to save time without needing to re-export and constantly check what it's going to look like at different sizes.

So that's that's roughly the Figma tutorial for Favvy. Of course, this is going to differ depending on what kind of website you're using, in terms of what templating language you might be using, so you might want to create a different file just for your favicon code, but really, it's pretty much the same for any website as long as this code here is getting rendered in your head tag, and as long as these paths are referencing the files that you've generated, then that's all you really need to worry about; and you should be good to go.

I hope this has been a valuable Figma tutorial for anyone who is wondering how you can design an export favicons from Figma. I guess the answer is you haven't been able to (without using this Figma plugin), so if this is something that you need to do at your agency or need to do just for your own side projects, I would say this is (by far) the quickest and easiest way to get favicons exported directly from Figma.

If you have any questions please reach out to me, but until then I hope you enjoy the Favvy Figma plugin and I'm looking forward to giving more of these Figma tutorials in the future. Thanks for watching!

---

---
type: article
title: It’s time to get back to the future
date: 2019-12-21T00:00:00.000Z
---

# It’s time to get back to the future



After working as both a designer and developer in digital agencies
over the last 10 years for world class brands like Nike and Honda,
I've seen the massive amounts of wasted time and inefficiencies caused
by doing things a certain way, just because that’s the way we did them
yesterday.

If the endless meetings, stand-ups, retros, Slack channels, emails and
everything else in between that distract us from doing what we were
hired for wasn't enough; our workflows in general, and how we think
about design and development specifically, are not working properly.
Even if you can't really explain why, just like being in The Matrix or
The Truman Show, you've probably felt that something isn't quite
right, just as I have.

We are constantly bombarded with the propaganda that “things are
moving so fast” and “we can't even keep up with all the rapid
technological progress”, but this is actually a lie that we tell
ourselves, because it’s simply not true. Certainly, when it comes to
the design and development process, things have actually not changed
very much at all. Stemming from using photo editing software to design
things for the web, the “handover” process between designers and
developers has remained largely unchanged for over 20 years. We
desperately need to get back to the future, but I think things are
moving way too slowly. Worse still, very few people seem to mind or
even be thinking about it.

When I co-founded the <a href="https://designops.lol" target="_blank">DesignOps Melbourne meetup</a> in 2018, I wanted
to find more people who shared my belief that we are not at the end of
history, despite evidence to the contrary, demonstrated by how
comfortable most people have become with the way we do things today.
The widely accepted way of designing and building things still
revolves around nudging static pixels and fake content around an
arbitrarily fixed size “art board” to try and emulate a totally
different medium/production environment that is dynamic and fluid by
its very nature.

Because of this status quo, where the source of truth for designers is
pixels and the source of truth for developers is code, most people
believe that we need to “bridge the gap” between design and
development; but I believe that the distance between design and
development should be zero.

Adding to that, there’s also a strange paradox where the people who
can help solve these problems (developers/engineers) are almost always
not interested in the problems to be solved, and if they are, they
usually don't have any free time to work on them; this is certainly
the case in a normal (chaotic) agency environment. The truth is that
many designers don't want to think about code, and many developers
don't want to think about design; so you end up with a Reservoir Dogs
type stand-off where nobody does anything and not much actually gets
solved.

Almost 2 years ago, I found out about a design tool called “Figma”.
While its multiplayer mode and everything else about it was very
impressive and clearly ahead of the competition, the thing that really
stood out to me was the fact that it had been built with web
technologies; unlike Photoshop, Sketch or any other desktop software
common in teams for doing design work. This is (by far) the most underrated
“feature” of Figma.

My interest was elevated when I tried the Figma API in 2018. It was
the first time I was able to read all of the design data from a
project immediately, just by using code to request it. I started to
build some software on my weekends at home to start automating common
tasks in my agency, like building production ready eDMs and HTML
banners from Figma designs with a single click. What used to take
hours, now took seconds. It literally made our old workflow 1000x
faster, and it instantly became unimaginable to go back to how we
thought about doing things before.

When I was invited to the Figma Plugins BETA in 2019, it planted the
seed in my thoughts of going “all-in” on Figma as the platform I
wanted to built on, in order to start solving some of the perennial
issues faced in all other design teams. I started to port what I
built with the Figma API over to native Figma Plugins, which could be
run inside any Figma design project. Being able to distribute these
outside of my own agency for the first time, I saw the potential to
bring my own 1000x workflow gains to other people working in design teams
suffering from the same problems &mdash; at scale.

Based on everything they have consistently promised (and delivered on)
so far, I believe that Figma is committed to building a new future
where the design and development process will look radically different
than it has for the last 20 years; combined with my belief that we are
not at the end of history and that there’s far more we could be doing
to start doing things better, I want to be a part of building that
future.

On December 20th, 2019, I ended my decade long career in digital
agencies and left my day job as a lead front end developer behind to
focus all of my time on solving these problems. With that, “Figmatic”
was born as a bootstrapped startup focused on building premium
plugins exclusively for Figma.

As Peter Thiel wrote in his brilliant
book, “Zero To One” &mdash; “Positively defined, a startup is the
largest group of people you can convince of a plan to build a
different future.” &mdash; Currently, that group consists of one
person (myself), but I'm optimistic that over time, I will be able to
convince more people of my plan to build a different future for doing
things in design teams (and beyond).

Figmatic will start off by releasing automation plugins which solve
some common time wasting tasks faced inside any design team,
followed by solving much bigger and more complex problems beyond
those. I am very optimistic that a much needed new future can be
achieved, and I'm excited about the years ahead as we work towards the
mission of getting the distance between design and production to
zero.

In the end, I hope we can help to free up more of people’s time for
much greater achievements, instead of it being wasted on doing the
tasks in a way that we assume are “necessary” today, only because
that may (or may not) have been true yesterday.

I won't be saving anything for <a href="https://www.youtube.com/watch?v=GM-znjDGubE" target="_blank">the swim back</a>.

---