Hypermatic Docs

Home

Bannerify

Commentful

Convertify

CopyDoc

Crypto

Emailify

Favvy

HyperCrop

Pitchdeck

Pixelay

TinyImage

Weblify

Pro Bundle (Save 70%)

Contact

Inspect your Figma layers as either HTML, Tailwind, React or Vue code.

Code Output Formats

Selecting the code output format

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

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

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

After exporting text layers from your Figma frame(s), you can then update their content outside of Figma using any text/spreadsheet editing software, then instantly re-import the updated text back into your Figma designs again later.

Export Text Layers

Exporting Figma text layer content

After opening your exported `.zip` file, you can start editing text content in your `.csv`, `.xlsx`, `.md`, `.docx`, `.xliff`, or `.json` file in your software application of choice.

Edit Exported Text Files

Making text updates to exported files

The **Import Text Layers** feature in CopyDoc works by letting you add your updated `.csv`, `.json`, `.md`, `.docx` or `.xliff` file that was originally exported from the CopyDoc plugin, and manually approving any text differences compared to the text layers in your Figma file, then applying any selected updates with one click.

Re-Import Text Layers

Re-importing text updates to Figma

CopyDoc has a built-in localization feature to help you translate any frames on your Figma page into multiple languages or content variations.

Translate Figma Text Layers

Localize your Figma design text layers

In Figma, you'll rename your text layers to be the same as the header names that you already setup in your spreadsheet.

Naming Your Figma Layers

Naming your layers in Figma to match the spreadsheet

The **Sync Spreadsheet Content** feature in CopyDoc allows you to sync repeatable text and image content from multiple rows from any spreadsheet (which can be an `.xlsx`/`.csv` file or a public Google Sheet URL) to your selected Figma layers.

For Updating Figma Text

Structuring your spreadsheet to match your Figma layers

You can sync images from external URLs (or from a local `.zip` file) to image fills for your Figma layers using the same naming method as syncing text from a spreadsheet.

For Updating Figma Images

Including image URLs in your spreadsheet

Along with updating text content in your Figma layers, the **Sync Spreadsheet Content** feature also supports automatically applying CSS styles to your layers in the same way.

For Updating Layer Styles

Using CSS in your spreadsheet to update Figma layer styles

Along with updating text content in your Figma layers, the **Sync Spreadsheet Content** feature also supports automatically renaming non-text layers in the same way.

For Renaming 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.

For Importing Chart Data

Importing charts from spreadsheet data

As well as syncing spreadsheet rows with Figma layers from a spreadsheet, the **Sync Spreadsheet Content** feature in CopyDoc allows you to sync repeatable text and image content from multiple rows from any spreadsheet (which can be an `.xlsx`/`.csv` file or a public Google Sheet URL) to your selected Figma layers.

For Generating Figma Tables

Generating an auto-layout table in Figma from your spreadsheet

If you've created your spreadsheet as either a `.csv` or `.xlsx` file, you can sync it with your Figma design by clicking on the **Sync Spreadsheet** button in the main CopyDoc plugin screen, which will open up the settings panel for this feature.

Sync from Spreadsheet File

Syncing content to Figma from a CSV/XLSX file

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

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.

Sync from Airtable

Syncing content to Figma from a Airtable

The **Spell Check Layers** feature in CopyDoc works by checking every text layer on your page for spelling errors, and provides suggestions to correct any misspelled words.

Spell Check

Spell checking Figma text layers

The **Find & Replace** feature in CopyDoc works by letting you search all of the text layers on your current Figma page , and replacing any matching with different text. This is useful for a quick find and replace, instead of using a full CSV or JSON export/import.

Find & Replace

Finding and replacing text content

CopyDoc includes a built-in component library to help you create re-useable text content snippets in your Figma designs, you can access this feature by clicking the **Content Library** button in the main CopyDoc menu.

Overview

Code Inspection

Frequently Asked Questions

Video Tutorials