Hypermatic Docs

Home

Bannerify

Commentful

Convertify

CopyDoc

Crypto

Emailify

Favvy

HyperCrop

Pitchdeck

Pixelay

TinyImage

Weblify

Pro Bundle (Save 70%)

Contact

Animate and export production ready banners from Figma to HTML, GIFs and Videos, in seconds.

Start Here

Get Started with Bannerify

Detailed documentation and step by step video tutorials to help you 1000x your Figma workflows with our premium Figma plugins.

Figma Plugins

Receipts

Find Your Receipt

Billing

Get all the details and answers you need about security, privacy, and how each one of our Figma plugins work.

Security

Security Details

To get unlimited usage of all of the _Pro_ features, you will need to purchase a license from the [Hypermatic website](https://hypermatic.com/).

Free vs Pro

Ensure you're logged into your Figma account, then follow the steps below to install and run the [Bannerify Figma plugin](https://www.figma.com/community/plugin/796124491692147799/bannerify-banner-studio).

Install & Run Bannerify

Install and run the Bannerify Figma Plugin

After trying out all the Pro features of Bannerify **10 times**, you can optionally upgrade to continue using all the extra features that are only available in the Pro version; or if you're a casual user, you can continue using the Free version forever.

Activate Bannerify Pro

Activating Bannerify Pro

Bannerify works by looking through all of your **top level frames and instances** in the active Figma page and using each one as its own **banner**. Bannerify will also load top level elements inside of a Figma component set (or 'variants) layer as banners.

Create Figma Frames

Designing your banners in Figma

There are two ways to add URL links to your HTML banner exports in Bannerify; one is to include an `<a>` link tag around the entire banner, and the other is to add clickable links to individual layers in your timeline. 

Add Clickable Links

Adding clickable URL links to your banners

You can embed video files to any Figma layer in your Bannerify timeline by clicking on the **Settings** icon button for that layer, and then pasting in a URL pointing to a valid video file (`.mp4` or `.webm`) into the video embed input field.

Embed Videos

Including Video file embeds in your banners

There are two different options for using GIFs in your banner designs, each one works a bit differently, depending on how you'd like to incorporate the GIF into your design. 

Embed GIFs

Including animated GIFs in your HTML banners

You can embed Lottie file animations to any Figma layer in your Bannerify timeline by clicking on the **Settings** icon button for that layer, and then pasting in a URL pointing to a valid Lottie file (`.json`) into the Lottie embed input field.

Embed Lottie Files

Including Lottie file animations in your banners

After you've loaded your Figma frames into Bannerify, you can apply animations to any layer in your banners by using the timeline features inside the plugin.

Apply Layer Animations

Animating your banners

If you need a specific animation that isn't available in the animation presets included in Bannerify, you can create your own custom timeline animation by adding custom keyframes with your own X, Y, Scale, Rotation and Opacity properties.

Create Custom Keyframes

Creating custom keyframe animations

By default, Bannerify will only load the direct child layers from your Figma frames into the timeline, but you can optionally include nested child layers if neeed, too.

Expanding Nested Layers

Animating nested layers in your banner frames

You can add animated hover states to any layer in your Bannerify timeline, which will be included in any HTML exports from the plugin.

Hover States

Adding hover animation states to layers

This feature works by automatically preventing your “exit” animation from playing, and keeping your layer in the final state of its “entry” animation for the rest of the time that your banner is visible after it finishes all its playback iterations.

Static End Frames

Keeping layers as a static end frame in HTML exports

By default, Bannerify only exports the visible image areas inside of your banner, which helps to save on un-needed image data being included in your HTML exports, but you can optionally override this behavior.

Unclip Frame Content

Including a layer's unclipped image content

Once you've finished animating your layers in the timeline, you can export your banners to animated HTML banners

Export to HTML

Exporting your banners to HTML

Once you've finished animating your layers in the timeline, you can export your banners to MP4 or WebM videos.

Export to Video

Exporting your banners to MP4 or WebM videos

Once you've finished animating your layers in the timeline, you can export your banners to animated GIF or animated WebP files.

Export to GIF

Exporting your banners to animated GIF or animated WebP

If you would like to host the preview page of all your banners online (rather than just included locally in the exported `.zip` file), you can use the built-in Netlify upload integration in the Bannerify HTML export settings.

Upload Netlify Preview Link

Automatically upload preview page to a Netlify URL

Troubleshooting

Troubleshooting Bannerify

Bannerify runs as an official plugin inside of Figma's own app, which are reviewed and approved by the Figma team.

Bannerify Security

To get unlimited usage of all of the Bannerify Pro features, you will need to purchase a license from the [Hypermatic website](https://hypermatic.com/bannerify#pro).

Bannerify Free vs Bannerify Pro

The best free Figma tutorial videos for beginners (or power users) to level up.

Bannerify Video Tutorials

Supercharge your Figma comments and gather external feedback from stakeholders.

Get Started with Commentful

Ensure you're logged into your Figma account, then follow the steps below to install and run the [Commentful Figma plugin](https://www.figma.com/community/plugin/1030968261424288884/commentful-feedback-workflow).

Install & Run Commentful

Install and run the Commentful Figma Plugin

After trying out all the Pro features of Commentful **10 times**, you can optionally upgrade to continue using all the extra features that are only available in the Pro version; or if you're a casual user, you can continue using the Free version forever.

Activate Commentful Pro

Activating Commentful Pro

The first time you run Commentful, you'll need to link it to your Figma file by generating a Figma personal access token and adding your Figma file URL.

Connect Plugin to Figma

Connect your Figma file to the Commentful plugin

You can optionally have notifications sent to a Slack channel every time a new comment is left on a Commentful review link you've shared with a client.

Setup Slack Notifications

Setup Slack notification for review link comments

Troubleshooting Commentful

Commentful runs as an official plugin inside of Figma's own app, which are reviewed and approved by the Figma team.

Commentful Security

To get unlimited usage of all of the Commentful Pro features, you will need to purchase a license from the [Hypermatic website](https://hypermatic.com/commentful#pro).

Commentful Free vs Commentful Pro

Commentful Video Tutorials

Export Figma to Sketch, XD, After Effects or Import XD, Illustrator, Google Docs, PDF to Figma — with one click.

Get Started with Convertify

Ensure you're logged into your Figma account, then follow the steps below to install and run the [Convertify Figma Plugin](https://www.figma.com/community/plugin/849159306117999028/convertify-sketch-adobe-google).

Install & Run Convertify

Install and run the Convertify Figma Plugin

After trying out all the Pro features of Convertify **10 times**, you can optionally upgrade to continue using all the extra features that are only available in the Pro version; or if you're a casual user, you can continue using the Free version forever.

Activate Convertify Pro

Activating Convertify Pro

Adobe XD

Exporting Figma to Adobe XD

Adobe After Effects

Exporting Figma to Adobe After Effects

Sketch

Exporting Figma to Sketch

EPS (For Print)

Exporting Figma to EPS (PostScript)

Importing Adobe XD to Figma

Adobe Illustrator

Importing Adobe Illustrator to Figma

Importing PDF to Figma

Importing SVG to Figma

Google Sheets

Importing Google Sheets to Figma

Google Docs

Importing Google Docs to Figma

Troubleshooting Convertify

Convertify runs as an official plugin inside of Figma's own app, which are reviewed and approved by the Figma team.

Convertify Security

To get unlimited usage of all of the Convertify Pro features, you will need to purchase a license from the [Hypermatic website](https://hypermatic.com/convertify#pro).

Convertify Free vs Convertify Pro

Convertify Video Tutorials

Everything you need to easily export, import, localize and update text in your Figma designs.

Get Started with CopyDoc

Ensure you're logged into your Figma account, then follow the steps below to install and run the [CopyDoc Figma Plugin](https://www.figma.com/community/plugin/900893606648879767/copydoc-text-kit).

Install & Run CopyDoc

Install and run the CopyDoc Figma Plugin

After trying out all the Pro features of CopyDoc **10 times**, you can optionally upgrade to continue using all the extra features that are only available in the Pro version; or if you're a casual user, you can continue using the Free version forever.

Activate CopyDoc Pro

Activating CopyDoc Pro

Export Text Layers

Exporting Figma text layer content

Edit Exported Text Files

Making text updates to exported files

Re-Import Text Layers

Re-importing text updates to Figma

Spell Check

Spell checking Figma text layers

Find & Replace

Finding and replacing text content

Update Figma Text Content

Structuring your spreadsheet to match your Figma layers

Update Figma Image Fills

Including image URLs in your spreadsheet

Update Figma Layer Styles

Using CSS in your spreadsheet to update Figma layer styles

Rename Figma Layers

Renaming Figma layers from the spreadsheet

If you'd like to automatically generate visual Figma charts using data from spreadsheets, you can click the **Charts** tab in the CopyDoc Sync feature, then follow the steps below.

Import Chart Data

Importing charts from spreadsheet data

Generate Figma Table

Generating an auto-layout table in Figma from your spreadsheet

Prepare Figma Layers

Naming your layers in Figma to match the spreadsheet

Sync from Spreadsheet File

Syncing content to Figma from a CSV/XLSX file

Sync from Google Sheet

Syncing content to Figma from a Google Sheet

If you've created your spreadsheet as an Airtable, you can sync it with your Figma design.

Overview

Designing Banners

Animating Layers

Exporting Banners

Frequently Asked Questions

Video Tutorials

Get Started with Bannerify

Install & Activate Bannerify

Install & Run the Figma plugin

Activate Bannerify Pro

Using Bannerify

Bannerify Documentation

Bannerify Video Tutorials

Frequently Asked Questions

Troubleshooting Bannerify

Bannerify Security

Receipts

Billing

Bannerify Features

Bannerify Free vs Pro

Overview

Designing Banners

Animating Layers

Exporting Banners

Frequently Asked Questions

Video Tutorials

​Install & Activate Bannerify

Install & Run the Figma plugin

Activate Bannerify Pro

​Using Bannerify

Bannerify Documentation

Bannerify Video Tutorials

​Frequently Asked Questions

Troubleshooting Bannerify

Bannerify Security

Receipts

Billing

​Bannerify Features

Bannerify Free vs Pro

Install & Activate Bannerify

Using Bannerify

Frequently Asked Questions

Bannerify Features