Documentation Index

For the complete documentation index, see llms.txt. Markdown versions of docs pages are available through the page's alternate Markdown link.

Current page: Export animated HTML banners from Figma to Google Drive with Zapier - This tutorial shows how to export animated HTML banners from Figma with the Bannerify Figma plugin and send the exported zip file to Google Drive through a Zapier webhook. It walks through creating a Zapier Zap with a Webhooks by Zapier catch hook trigger and a Google Drive upload file action, then mapping the Bannerify file and file name before testing and publishing the automation.. Machine-readable page: /bannerify/tutorials/export-animated-html-banners-from-figma-to-google-drive-with-zapier.md.

Export animated HTML banners from Figma to Google Drive with Zapier

This tutorial shows how to export animated HTML banners from Figma with the Bannerify Figma plugin and send the exported zip file to Google Drive through a Zapier webhook. It walks through creating a Zapier Zap with a Webhooks by Zapier catch hook trigger and a Google Drive upload file action, then mapping the Bannerify file and file name before testing and publishing the automation.

← Back to Bannerify Video Tutorials

What this video covers

This tutorial shows how to export animated HTML banners from Figma with the Bannerify Figma plugin and send the exported zip file to Google Drive through a Zapier webhook. It walks through creating a Zapier Zap with a Webhooks by Zapier catch hook trigger and a Google Drive upload file action, then mapping the Bannerify file and file name before testing and publishing the automation.

Things you'll need

  • A Figma file with frames to use as banners
  • A Zapier account
  • A Google Drive account

Steps

  1. Open your Figma file, run the Bannerify Figma plugin from Figma plugins, and load the banners from your Figma frames.
  2. In Bannerify, finish your banner animations, click Export to HTML, enable upload preview page, and change the upload platform from Netlify to Zapier.
  3. In Zapier, create a new Zap, add Webhooks by Zapier as the trigger, and set the trigger event to catch hook to get a webhook URL.
  4. Paste the Zapier webhook URL into Bannerify, then send a test export from Bannerify so Zapier can capture the uploaded zip file data.
  5. In Zapier, add Google Drive as the action, choose upload file, connect your Google account, and select the destination folder in Google Drive.
  6. Map the incoming file and file name fields from the webhook data to the Google Drive upload step, then test the step and publish the Zap.
  7. After publishing, future Bannerify HTML exports sent through the webhook will be uploaded automatically to the selected Google Drive folder.

Useful links