Hypermatic Docs

Home

Bannerify

Commentful

Convertify

CopyDoc

Crypto

Emailify

Favvy

HyperCrop

Pitchdeck

Pixelay

TinyImage

Weblify

Pro Bundle (Save 70%)

Contact

TinyImage has a settings panel that allows you to further customise your compressed image exports from the plugin.

Open Settings Panel

Configuring TinyImage advanced settings

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

You can remove any Figma users from your license key to free up some seats, or optionally upgrade your license to add extra seats to your key instead.

Managing License Seats

Managing seats on your Pro license key

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

Start Here

Get Started with Bannerify

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

If you've duplicated a Figma file from another Figma file that was already linked to the Commentful plugin, you'll need to re-link it to your new Figma file URL to fetch the correct comments.

Re-Linking a Figma File

You can expand and contract the size of the Commentful Figma plugin window depending on how much Figma canvas or plugin window space you need.

Toggle Plugin Window Size

You can easily view all of the Figma comments in your file from the _Figma Comments_ tab in the Commentful plugin.

View Figma Comments

Viewing native Figma comments left by any Figma users in your current file

You can quickly post new Figma comments and replies from the Commentful plugin

Post Figma Comments

Posting new Figma comments from the plugin

You can organize your Figma comments into a Trello-style kanban board with your own custom statuses

Custom Comment Statuses

Organise Figma comments into custom statuses

You can add metadata (eg. a title, tags, categories, due dates, assignees, etc) to any Figma comment in your kanban board to help provide more useful context.

Tags, Assignees & Due Dates

Adding custom metadata to your Figma comments

You can quickly find the Figma comments you're looking for by either searching via keywords, applying narrowing filters, or sorting your comments by different properties.

Search, Filter & Sort

Searching, filtering and sorting your Figma comments

You can export and download your Figma comments to a CSV spreadsheet file at any time from the Commentful plugin.

Export Figma Comments

Exporting Figma comments to a CSV file

You can assign todo items to yourself (or other Figma users who are also using the Commentful plugin) on any Figma comment to help make them more actionable.

Figma Comment Todo Lists

Assign todo items to Figma comments

You can have your own private lists of todo items that are only visible to you in the Commentful plugin.

Private Todo Lists

Create private todo lists

You can export and download your Todos to a CSV spreadsheet file at any time from the Commentful plugin.

Export Todos

Export todo lists to a CSV file

You can delete individual todo items or an entire todo list under your _My Todos_ panel at any time.

Delete Todos

Deleting todo items and lists

You can upload any Figma frames from your page to create a review link, which can be viewed in the browser (without needing a Figma account) to allow anyone to leave feedback on your static designs without being in your Figma file.

Create a Review Link

Create a shareable review link to gather external feedback on your designs

Review links that you've created with the Commentful plugin can be viewed in the browser via the Commentful web app (without needing a Figma account) to allow anyone to leave feedback on your static designs without being in your Figma file.

Gather Client Feedback

Gathering design feedback and approval statuses from clients using the Commentful web app

After you've created your initial review URL, you can optionally upload additional _versions_ of the link for stakeholders to review as the iterations of the design progress.

Upload New Version Link

Upload a new version to your existing shareable review link

If you've uploaded multiple versions for any of your review links, you can switch between them in the Commentful Figma plugin and in the Commentful web app.

Switch Review Link Versions

Switching between review link versions in the Figma plugin and web app

After you've gathered some text content and/or image content feedback via a review link, you can automatically apply the content updates in Figma with one click.

Apply Feedback in Figma

Automatically applying text and image feedback from a shared review link in your Figma file

You can export and download your review link feedback to a CSV spreadsheet file at any time from the Commentful plugin or the Commentful web app.

Export Review Feedback

Export review link feedback to a CSV file

You can permanently delete any review link (including any 'versions' created for it) from the Commentful plugin.

Delete Review Link

Delete a review link URL, along with any feedback left on it

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

Image to Vector

Convert and import a JPG, PNG or WebP image to Vector SVG in Figma

Google Sheets

Importing Google Sheets to Figma

Google Docs

Importing Google Docs to Figma

Optimized SVG

Importing Optimized SVG 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).

Overview

Optimize Images

Advanced Settings

Frequently Asked Questions

Video Tutorials

Configuring TinyImage advanced settings