Animated Banners Design System

Working with the Demand Generation team at Square, we build out many display banners a week. When I started there we were using an online platform to create all of our banners. Soon realizing it wasn’t the most efficient way to build banners. Usually taking hours to build. So there had to be a more efficient way to build out a set of banners, so after doing some exploring and research, I found Figma and a plug-in for Figma was our best option moving forward. Making this move I was able to save the company $239,000 annually.

Making the move I was able to build out a design system with Figma and a plug-in to build out animated HTML5 banners. No coding is needed. Animations are saved within the design system so designers don’t have to worry about any animation or coding.

All banners are built out as templates. Just place your text, images, and videos then export and ship your banners.

From partnering with the maker of the plug-in for so long, we got a few key features added to the plug-in to make life easier. One of them is just pasting a video or Lottie animation link into a text field to easily embed a video or Lottie animation in the banner ad. Getting this feature added was big, by doing this we are now able to embed videos into our display banners and run them as normal banner ads and not rich media, doing this saves money. Since the videos being used are being hosted on our side of the ad platform where the ad file is being uploaded to.

Below are some samples of the design system being used. Building out a set of banners, making a new variant with an image swamp, and then making some quick variants. (This was built out before Figma variables.)