# Digital Out-of-Home Campaign Workflow from Figma > Adapt campaign motion from Figma for digital-out-of-home screens with safer composition, legible timing, controlled variants, and production-ready video handoff. - Canonical page: https://www.hypermatic.com/articles/bannerify-digital-out-of-home-campaign-workflow-from-figma/ - Published: 2026-07-31T00:00:00.000Z - Updated: 2026-07-31T00:00:00.000Z Moving a display campaign onto a station screen, retail panel, or roadside digital board is not a resize exercise. The viewer may be walking, the screen may be far away, and the placement may allow only a few seconds of attention. Tiny offer text that works in a browser banner becomes invisible; a clever five-scene animation may be over before anyone finds the headline. [Bannerify](/bannerify/) can animate Figma designs and export video formats such as MP4 and WebM, but the media owner’s specification remains the contract. This workflow helps creative teams turn an approved campaign into digital-out-of-home deliverables without confusing export capability with placement approval. ## Collect a spec sheet for every placement Before creating frames, request the current production specification from the media owner or network. Record: - Pixel dimensions and orientation - Accepted file formats and codecs - Maximum duration - Frame rate - Maximum file size - Looping rules - Audio policy - Safe areas and physical obstructions - Delivery naming convention - Deadline and approval contact Do not rely on a generic “1080p video” assumption. A portrait retail screen, station ribbon, and roadside board can all require different compositions even when their pixel counts sound familiar. If a network supplies a template, place it on a locked reference layer in Figma. Mark bezels, seams, rounded corners, or zones hidden by architecture. ## Reduce the message before adapting sizes Digital out-of-home rewards ruthless hierarchy. Decide what a person should remember after one glance: 1. Brand 2. One message or offer 3. One supporting detail, only if readable 4. A simple next action A browser display ad can invite a click. A public screen usually cannot. Replace tiny button UI with an action that suits the context, such as a short URL, location cue, or memorable phrase. Use a QR code only when the placement, viewing distance, dwell time, and network policy make scanning realistic. Create a message matrix before layout: | Audience/context | Main message | Proof | Action | | --- | --- | --- | --- | | Commuter station | Finish reports before the train arrives | Automated export | Search brand name | | Retail entrance | Weekend offer ends Sunday | 20% selected items | Visit level 2 | This keeps variants intentional rather than multiplying files with minor wording changes. ## Design at actual composition ratios Create a Figma frame for each required canvas. Avoid scaling a landscape master into portrait and calling it finished. For every size: - Keep the logo clear of screen edges and obstructions. - Make the primary line readable from the expected distance. - Preserve subject cropping across motion. - Avoid thin strokes and low-contrast detail. - Check that legal copy meets the placement’s requirements. - Use the safe area supplied by the network. Review at a reduced on-screen scale to simulate distance. If the message works only while zoomed into Figma, it will not become clearer on site. ## Storyboard for a passing viewer Treat each animation as a sequence of message states, not decorative movement. A simple structure is: ```text Recognition → Main claim → Brand/action hold ``` The first readable frame should appear quickly. Give important text enough hold time. Avoid making the viewer wait through an abstract reveal before learning what the ad is about. Use motion to establish hierarchy: bring in the product, emphasize the offer, or transition between two meaningful states. Do not animate every layer simply because it can move. The [animated banner storyboard workflow in Figma](/articles/bannerify-animated-banner-storyboard-workflow-in-figma/) gives a useful planning foundation, but out-of-home needs more aggressive simplification and distance testing than browser display. ## Build motion once, then adapt deliberately Animate the approved source frames with Bannerify or supported Figma motion. Establish a timing vocabulary for entrances, holds, and exits so placements feel related. When adapting: - Preserve the message order. - Re-time motion when line wrapping changes. - Re-crop imagery for the new orientation. - Reposition movement paths rather than scaling coordinates blindly. - Remove secondary scenes from shorter placements. If a spreadsheet-driven workflow is appropriate, Bannerify can generate variants using CSV or XLSX data for copy, imagery, styles, and visibility. Use it only after the base placements are approved. Automation can produce many consistent wrong files quickly if the source matrix is not controlled. ## Export to the network’s requirement Choose the exact required video or image output. Bannerify supports MP4, WebM, GIF, APNG, WebP, images, PDFs, and HTML banner workflows, but a DOOH network may accept only a narrow subset. For video, confirm: - Canvas dimensions - Duration down to the frame - Frame rate - Codec and container - Whether the final frame holds - Loop transition behavior - Audio removal - File weight Open the exported file in a separate media player and inspect its properties. Do not validate only in the Figma or plugin preview. HTML5 display requirements such as click tags belong to a different delivery path. Do not add browser-ad conventions to a video placement unless the media owner specifically requests an interactive format. ## Review in conditions that resemble the placement Run three reviews: ### Silent desk review Confirm wording, brand accuracy, legal text, dimensions, and timing. ### Distance review Play the asset on the largest available screen and stand back. Ask a reviewer who has not seen the design to state the brand, message, and action. ### Context review Place the creative in a photograph or mockup of the screen environment. Check daylight, neighboring content, viewing angle, and obstructions. A subtle gray-on-black design may disappear on a bright station concourse. If the network offers a proofing portal, upload early enough to respond to encoding or safe-area feedback. ## Package files for trafficking Use the network’s naming system when supplied. Otherwise choose a deterministic pattern: ```text campaign-market-placement-dimensions-duration-version.ext ``` For example: ```text winter-au-station-portrait-1080x1920-10s-v04.mp4 ``` Include a manifest listing filename, placement, dimensions, duration, format, language, approval status, and checksum if the workflow requires one. Keep preview files out of the final delivery folder. The [display ad asset naming convention for agencies](/articles/bannerify-display-ad-asset-naming-convention-for-agencies/) offers a broader naming model that can be adapted to media-owner requirements. ## DOOH preflight Before handoff, verify: - Every file maps to a current placement spec. - Message hierarchy works at distance. - Safe areas and physical obstructions are respected. - Animation is understandable from any likely entry point. - Duration, frame rate, codec, and size are correct. - The export contains no audio unless explicitly permitted. - Legal and brand approval covers each variant. - Filenames and manifest match the delivered files. - A separate player and network proof have been checked. Bannerify can collapse much of the animation and export work into the Figma production flow. It cannot tell you whether a commuter has time to read six lines or whether a particular screen network accepts your encoding. Let the placement dictate the creative, and use the plugin to produce controlled adaptations rather than generic resizes.