DOCSEARCHbyAlgolia
Submit Docs

Bannerify Documentation

website·Indexed 34 days ago

https://docs.hypermatic.com

Guides for animating and exporting Figma banners to HTML, MP4, or GIF. Includes instructions on creating custom keyframe animations, using AI agents for timeline generation, managing animation easing and origin points, applying bulk animations, and implementing split text or hover states.

Tokens
276.8K
Snippets
476
Records
2.3K
Agent score
66%

What's inside Bannerify

  1. Overview of Hypermatic license seat management

    Hypermatic Pro licenses are seat-based, where one seat corresponds to one Figma user. Management is split between two different tools depending on the desired action:

    • To replace or reassign a linked Figma user: Use the Hypermatic License Manager.
    • To increase or decrease the total number of paid seats: Use the Manage membership link found in the Gumroad receipt.

  2. Overview of Bannerify features

    Bannerify is a Figma plugin used to animate designs and export production-ready banners in various formats including HTML, GIF, and video. It supports Figma Design, Figma Buzz, and Figma Motion. Key capabilities include:

    • Timeline animations with professional presets or AI-generated entry/exit/hover animations.
    • Automatic generation of images, HTML, CSS, and JavaScript.
    • Asset optimization based on a user-defined maximum file size (kb).
    • Generation of responsive HTML preview pages with upload workflows for Netlify, Cloudflare Pages, Vercel, Zapier, or Make.
    • Export of all banners and preview pages as a single .zip file.
    • Support for static fallback JPG backups.

  3. Overview of Commentful Figma plugin features

    Commentful is a Figma plugin designed to organize design feedback and track tasks. Key capabilities include:

    • Comment Management: Organize Figma comments using custom statuses on a kanban board, add tags, due dates, and todos, and search comments with autocomplete.
    • Task Tracking: View all assigned todos (including private ones) in a centralized location.
    • Filtering & Formatting: Filter comments by frame, date, status, user, or tag, and use markdown formatting, links, and lists within comments.
    • External Feedback: Collect design feedback from stakeholders outside of Figma and apply text/image feedback directly into Figma with one click.
    • Integrations & Export: Integrate with Slack, Zapier, and Make for review link notifications. Export comments, todos, and external feedback to CSV and JSON files.

  4. Overview of CopyDoc features for Figma

    CopyDoc is a privacy-focused Figma plugin where data and content remain within the Figma file. Key capabilities include:

    • Text Management: Export Figma text layers to XLSX, DOCX, CSV, Markdown, JSON, or XLIFF. Bulk update text layers using these formats or Airtable.
    • Content Libraries: Create custom content libraries within Figma using Text Expander shortcuts, with optional Google Sheets and Airtable integration.
    • Synchronization: Sync repeating text, image content, or CSS styles from Google Sheets, Airtable, or XLSX/CSV files.
    • Localization: Localize designs using OpenAI, Claude, Gemini, or via XLSX export/import.
    • Data Generation: Automatically generate Figma data tables and Charts from spreadsheet data.
    • Exporting: Export frames to DOCX, XLSX, TXT, EPUB, HTML, or PDF. Export Figma comments to CSV and JSON files.
    • Utilities: Find & Replace text, spell check in multiple languages, and include design references in text/comment exports.

  5. Overview of Figma Motion integration in Bannerify

    Bannerify can detect supported animations created with Figma Motion and make them available as 'Figma Motion' entry animations. This allows developers to opt-in to detected keyframes and control how properties, timing, and easing are reproduced in the final export. Note that Figma Motion is currently a Beta API and its data model may change.

  6. Overview of Emailify AI Designer workflows

    The AI Designer (BETA) allows developers and designers to create branded Emailify templates by connecting a component library to AI tools. Emailify handles the validation of the AI's output and the final creation of the Figma template. There are three primary workflows:

    1. Agent (Skill): Recommended for repeat use and large branded libraries. It uses a downloadable 'Skill' package containing the component catalog, brand profile, and response schema. It is the most token-efficient method.
    2. Copy & Paste Prompt: A manual workflow where Emailify generates a prompt for the user to paste into an external LLM (ChatGPT, Claude, Gemini), and the resulting JSON is pasted back into Emailify.
    3. LLM Provider API: A direct integration where Emailify sends the prompt to a selected AI provider using the user's API key and automatically handles the JSON response and potential repairs.

  7. Overview of HyperCrop features

    HyperCrop is a Figma plugin designed for batch cropping and resizing multiple images into various sizes. Key capabilities include:

    • Smart Cropping: Automatic content-aware and face detection cropping.
    • Precision Control: High-precision manual crop tools and per-image anchor focal point specification (e.g., "Bottom/Center").
    • Presets: Built-in size presets for social networks, platforms, and devices, with the ability to add custom crop sizes per Figma page.
    • Export Options: Export to JPG/PNG with optional image compression.
    • Organization: Support for custom dynamic filenames and subfolders using tokens (e.g., #name/#width_x_#height).
    • Persistence: Crop sizes, selections, and options are automatically saved between uses.

  8. Overview of Crypto Figma plugin features

    Crypto is a Figma plugin that allows designers to share designs and prototypes through password-protected URLs or PDF files. Key features include:

    • Generation of password-protected URLs with strong, random passwords.
    • AES-256 encryption for image uploads.
    • Browser-based preview pages for uploaded designs.
    • Ability to record designs and prototypes as WebM videos in the browser.
    • Support for multiple design versions on a single preview URL.
    • Password-protected URLs for Figma prototype embeds.
    • Customization of frame display order via dragging.
    • Automatic deletion of URLs and uploads if they remain unaccessed for 30 days.
    • Session security: authenticated sessions end automatically when the browser tab is closed.

  9. Overview of TinyImage capabilities

    TinyImage is a Figma plugin that reduces image export sizes by up to 95%. It is privacy-focused, ensuring no image data leaves the Figma file. Key capabilities include:

    • Image Compression: Convert JPG and PNG to WebP, AVIF, Progressive JPEG, or SVG (Tiny 1.2 format) using percentage-based compression or maximum KB targets.
    • Animations: Create and export animated GIF, APNG, animated WebP, WebM, or MP4 from layers, including native Figma Motion animations. Supports editing existing GIFs/MP4s (resize, crop, trim, reverse) and adding .mp3 audio to MP4s.
    • PDF Export: Merge frames into a single compressed PDF with options for password protection and color space selection (RGB, CMYK, or Greyscale) with optional Bleed and Crop Marks.
    • Asset Management: Generate organized logo package ZIPs with custom schemes and manifests, and automatically save multiple images as a .zip file.
    • Figma Workflow: Downsize image fills to layer size, use ICC color profiles for PNGs, and organize layers by aligning canvas positions and sequential naming.

  10. Overview of Pixelay visual QA capabilities

    Pixelay allows developers and designers to compare Figma designs against real website URLs using smart overlays. Key capabilities include:

    • Comparing multiple Figma designs and URLs simultaneously.
    • Support for both Figma Design Mode and Dev Mode (including Dev-seat QA workflows).
    • Responsive design testing across multiple screen sizes (desktop, mobile, tablet).
    • Ability to switch between development, test, and production URLs, including localhost support via BrowserSync or hot module reloading.
    • Visual comparison tools: transparency, split-screen, toggle, drag, and diff overlays.
    • A built-in pixel ruler for measuring spatial differences between the design and the implementation.
    • Option to specify unique website URLs for individual Figma frames.

  11. Overview of Emailify for Figma

    Emailify is a Figma plugin used to design and export responsive, production-ready HTML emails. It allows users to create emails from blank templates, layouts, or pre-designed Figma templates, and export them as HTML, MJML, or AMP Email HTML.

    Critical Constraint: Emailify does not support Figma email designs that were created outside of the plugin.

  12. Overview of Weblify core workflows

    Weblify provides a set of tools to build, import, inspect, preview, and export websites. The primary workflows include:

    • Building websites directly within Figma.
    • Importing existing websites using the Chrome extension.
    • Inspecting the generated HTML and CSS for the project.
    • Previewing the final site and exporting it for deployment.