# No code Figma plugins

> Spend more time focusing on your designs, and automate exporting code using these no code Figma plugins.

- Canonical page: https://www.hypermatic.com/articles/no-code-figma-plugins/
- Published: 2021-03-17T00:00:00.000Z
- Updated: 2021-03-17T00:00:00.000Z

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.
