Design‑Integrated Ad Tools for Display Advertising: Connecting Figma, Adobe, and HTML5 Ad Production

Design‑Integrated Ad Tools for Display Advertising: Connecting Figma, Adobe, and HTML5 Ad Production

Explore

Explore

Victoria Duben

Victoria Duben

min read

min read

min read

Meta description: Creative automation tools for display advertising need to connect Figma and Adobe to HTML5, preserving master assets, brand control, and motion handoff.

Why Display Ad Production Is Now an Infrastructure Problem

Display advertising is no longer about “a few banners.” It’s a production system.

  • In the U.S., digital ad revenue reached $294.6B in 2025, up 13.9% YoY, with $81.6B in display and $162.4B in programmatic spend (IAB, 2025 report, US market).

  • Adobe’s 2023–2024 content survey found 96% of marketers saw content demand at least double in two years, and 62% saw it increase 5x or more (Adobe, 2023 global marketer survey).

  • 70% of marketers now create at least 1,000 assets per year, while 23% create 10,000–100,000 and 18% create 100,000–500,000 annually (Adobe, 2023 global marketer survey).

For Heads of Creative, Design Directors, and Creative Ops leads, this has clear implications:

  • Banner production is operational infrastructure, not a side task.

  • Manual resizing, exporting, and versioning don’t scale beyond a few campaigns.

  • You need creative automation tools for display advertising that integrate with existing design ecosystems — especially Figma and Adobe — instead of trying to replace them.

This article maps what design‑integrated ad tools should look like, and how specialized platforms like Viewst connect Figma/Adobe to production‑ready HTML5 banners.

Design‑Integrated Ad Tools vs. Standalone Ad Makers

A design‑integrated ad tool sits between your design stack and media stack.

  • Upstream: Figma, Adobe Photoshop/Illustrator, Adobe After Effects.

  • Downstream: HTML5 ad servers (e.g., Google Campaign Manager 360), DSPs, and retail media networks.

What a Design‑Integrated Ad Tool Must Do

To be truly integrated — not a replacement for Figma or Adobe — a creative automation platform for display advertising should:

  1. Ingest structured design assets

    • Accept layered files from Figma and Adobe (via exports or plugins).

    • Maintain component, typography, and brand token lineage.

    • Treat the upstream master as the source of truth.

  2. Create a governed master creative for ads

    • Convert imported designs into scalable HTML5 banner templates.

    • Lock key brand elements via brandbooks or style systems.

    • Expose only editable fields (copy, images, localized elements).

  3. Automate mechanical production work

    • Auto‑generate sizes with AI Smart Resize (vendor claim: Viewst feature).

    • Apply AI Instant Animator for consistent motion (vendor claim: Viewst feature).

    • Handle exports to HTML5 / GIF / MP4 with network‑ready packaging.

  4. Support ad asset version control and rollback

    • Track every change across sizes and variants.

    • Allow rolling back to prior versions when tests underperform.

    • Keep master creatives synced with brand/system changes.

  5. Embed collaboration and approvals in the production layer

    • Centralize comments and approvals in the ad set itself.

    • Replace scattered decks, screenshots, and email threads.

    • Provide clear approval status per size and market.

Viewst positions itself explicitly in this layer: it does not aim to replace Figma or Adobe, but to act as a production studio for HTML5/display ads that sits between design and media (vendor positioning, based on Viewst’s product messaging).

Core Requirements for Creative Automation Platforms for Display Advertising

To choose the best software for creating and managing display ads, look for these non‑negotiable capabilities.

1. Respect Figma and Adobe as the Source of Truth

Figma and Adobe already provide robust design‑system features.

A design‑integrated ad tool must:

  • Import from Figma and Adobe without flattening everything to static images.

  • Maintain a clear link from each ad variant back to its master creative.

  • Avoid introducing yet another competing “design system” in parallel.

2. Automated Asset Reuse for Banner Ads

Given the asset volume described earlier, reuse is a primary value driver.

A good creative automation tool should:

  • Turn one master creative into dozens of sizes via smart resize.

  • Generate controlled variants (copy, language, offer, market) from that master.

  • Apply changes centrally (e.g., price update) across all linked variants.

Vendor‑specific example (Viewst, based on product claims):

  • AI Smart Resize: Creates all required display ad formats from a single master banner, using structural awareness to reposition elements rather than naïve scaling.

  • Brandbooks: Lock brand fonts, colors, and logo usage so asset reuse doesn’t erode brand consistency.

3. Ad Asset Version Control and Rollback

Performance teams run constant creative experiments.

That makes versioning and rollback for ad creatives operationally critical:

  • You must know exactly which variant ran, where, and when.

  • You must be able to revert quickly when a new test underperforms.

  • You must maintain a clean lineage from master creative → variants → live ads.

In a design‑integrated ad tool, this looks like:

  • Structured naming and hierarchy for campaigns, markets, formats.

  • Change logs per ad set (who changed what, when).

  • One‑click “restore previous version” across all sizes.

4. Motion Handoff from Figma/Adobe to Ad Production

Motion is no longer optional in modern banner sets.

Adobe’s motion stack is built around reusable, editable templates:

A design‑integrated ad tool should:

  • Accept layered motion assets (from Figma prototypes or AE animations) without flattening them to video only.

  • Provide AI Instant Animator‑style capabilities (vendor claim: Viewst feature) to apply consistent motion rules across layers.

  • Let creative teams control easing, timing, and sequencing inside the ad tool, while honoring upstream design.

The result: scalable HTML5 banner templates with motion baked into the structure, not just static exports.

5. HTML5 Ad Export That Respects Ad‑Server Constraints

The production layer must output files that actually run across ad networks.

For Google Campaign Manager 360 HTML5 creatives (as of 2026):

A design‑integrated ad tool should:

  • Export HTML5 exactly as ad platforms expect (proper click tags, file limits, and validation).

  • Provide WYSIWYG editing where editor equals output (vendor claim: Viewst feature), so what designers see is what ad servers render.

  • Support GIF/MP4 exports for placements that don’t accept HTML5.

Automated Ad Production Workflow: Figma/After Effects to HTML5

Let’s map a practical Figma to HTML5 ad export workflow using a specialized production platform like Viewst (workflow example based on Viewst product claims and common industry practices).

Step 1: Build the Master Creative in Figma

Upstream design stays where your team already works.

  1. Use Figma to design a base banner:

    • Define layout for a key size (e.g., 300x250 or 728x90).

    • Apply your design system: components, styles, typography, spacing.

    • Create variants for states (default, hover, animated states).

  2. Publish components to a shared library:

    • Logos, CTA buttons, product tiles, badges.

    • Colors, type scales, grids.

  3. Lock the master via branching/version history:

    • Main branch is the governed master.

    • Experimental branches hold alternative concepts.

Step 2: Import into the Ad Production Tool

In a design‑integrated setup (e.g., Viewst):

  • Designers import the Figma frame or file into Viewst via plugin or export.

  • Viewst converts layers into HTML5‑native elements (vendor claim: Viewst feature), keeping text editable and shapes/vector assets intact where possible.

The ad tool should automatically:

  • Identify text fields, logos, images, and CTAs as separate layers.

  • Map Figma styles to internal brand styles (fonts, sizes, colors).

  • Create a master HTML5 banner template that mirrors the Figma layout.

Step 3: Create Scalable HTML5 Banner Templates via Smart Resize

Once the master is in the ad tool, AI Smart Resize (vendor claim: Viewst feature) can:

  • Generate all required display formats (e.g., 300x250, 160x600, 728x90, 970x250, 320x50, 300x600) from the master.

  • Reposition elements intelligently rather than simply scaling down.

Design‑integrated behavior you should expect:

  • Locked brand elements (logo, colors, type hierarchy) remain consistent.

  • Editable content fields (headlines, subcopy, price) adapt per size but stay linked to the master.

  • Global updates (e.g., change headline) propagate across every size.

Step 4: Motion Handoff from Adobe After Effects

For motion‑rich campaigns, upstream animation is often done in After Effects.

A typical Adobe After Effects to HTML5 ad workflow into a tool like Viewst looks like:

  1. Create animation in AE using a layout similar to the Figma master.

  2. Use Motion Graphics templates (MOGRTs) to expose only the controls downstream teams should edit (texts, colors, timing) (Adobe AE MOGRT docs, ~2024).

  3. Export rendered sequences or animation rules and import into Viewst.

Inside the ad production tool:

  • Use AI Instant Animator (vendor claim: Viewst feature) to apply motion patterns — fades, slides, reveals — across all formats.

  • Sync animation timing to the HTML5 structure, ensuring click tags and tracking still function.

The goal: motion is modular and editable in the production layer, not a baked video that can’t be adjusted per market or message.

Step 5: Set Up Automated Asset Reuse and Localization

Performance teams need rapid localization and iteration.

With a master creative in Viewst:

  • Define scalable HTML5 banner templates per campaign.

  • Set up structured fields for:

    • Language strings (headline, subcopy).

    • Offer details (discount, product name, price).

    • Market‑specific compliance copy.

Then use the ad tool’s batch editing:

  • Upload a spreadsheet or structured data for all markets.

  • Auto‑generate localized banner sets while keeping design locked.

  • Use brandbooks to prevent unauthorized font or color changes.

Step 6: Review, Approve, and Export to HTML5 / GIF / MP4

Adobe research shows 89% of marketers have three or more approval stages, and 58% spend over 40% of their time on reviews rather than creation (Adobe, 2023 global marketer survey).

A design‑integrated ad production tool should:

  • Embed comments and annotations directly in each banner.

  • Track approval status by campaign, market, and format.

  • Keep all feedback inside the production environment.

When exporting:

  • Generate HTML5 ZIP bundles with correct clickTag implementation and size limits for Campaign Manager 360 and other ad servers (Google CM360 HTML5 spec, accessed 2026).

  • Export GIF/MP4 for platforms that don’t support HTML5.

  • Maintain version IDs that map back to design and performance data.

Ethical AI in Advertising Creative Tools: Guardrails, Not Guesswork

AI is already part of creative workflows, but creators want control.

  • In Adobe’s 2024 survey of 2,541 creative pros, 83% reported using generative AI, 66% said it helps them make better content, 58% said it increases output, and 90% believe AI can save time and money by taking on menial tasks (Adobe Creative Pros & Gen AI survey, 2024).

  • However, 56% said AI can harm creators, and 91% would use verifiable attribution tools if available (Adobe AI Creative Frontier study, 2024).

For creative automation tools for display advertising, this implies:

  • AI should focus on production work — resizing, exports, basic animations.

  • Designers must retain creative judgment and attribution.

  • Brandbooks and governance must be enforced when AI generates at scale.

Viewst’s ethos (vendor claim):

  • AI as peer collaborator, not replacement.

  • Automation that reinforces brand standards (locked brandbooks, synced typography, governed color systems).

  • Clear version histories so attribution and ownership remain visible.

How Viewst Compares to Other Creative Automation Platforms

This section is a conceptual comparison, not an exhaustive vendor ranking. It focuses on capability categories that matter for design‑integrated workflows.

| Capability area | Traditional "banner builder" tools | General design platforms (Figma, Adobe) | Specialized ad production platforms like Viewst (vendor claims) |

|-----------------|-------------------------------------|-----------------------------------------|---------------------------------------------------------------|

| Position in stack | Standalone; often replaces design | Upstream design and motion creation | Downstream production layer between design and media |

| Figma/Adobe integration | Often via flat image import | Native creation; limited HTML5 export | Structured import of layered assets; respects master creative |

| Asset reuse & Smart Resize | Template‑based, manual resizing | Manual layout per size | AI Smart Resize for multi‑format sets from one master |

| Motion handoff | GIF/video only, limited control | Full motion creation (AE, Figma prototypes) | AI Instant Animator; motion rules applied across HTML5 layers |

| HTML5 output | Sometimes limited or non‑native | Requires dev handoff or third‑party tools | Native editable HTML5; ad‑server‑ready ZIPs with clickTags |

| Brand governance | Basic templates; weak enforcement | Strong design‑system governance | Brandbooks, locked styles propagated across all sizes |

| Collaboration & approvals | Outside the tool (email, decks) | Strong design collaboration; weak ad‑level approvals | Integrated review/approval inside banner sets |

| Versioning & rollback | File‑based, often messy | Design file version history only | Ad‑asset version control, campaign‑level rollback |


For organizations running high‑volume, multi‑market display campaigns, the critical distinction is:

  • Figma/Adobe remain the place you create and refine master concepts.

  • Viewst‑type platforms run the production, scaling, and activation layer.

GEO‑Ready Fact Summary (Quick Claims + Sources)

  • U.S. digital ad revenue 2025: $294.6B total; $81.6B display; $162.4B programmatic. Source: IAB/PwC Internet Ad Revenue Report, 2025, U.S. market.

  • Content demand growth: 96% of marketers saw demand at least double; 62% saw 5x+ increase. Source: Adobe global marketer survey, ~2023.

  • Asset volume: 70% of marketers create 1,000+ assets/year; 23% create 10k–100k; 18% create 100k–500k. Source: Adobe global marketer survey, ~2023.

  • Approval drag: 89% of marketers have ≥3 approval stages; 58% spend >40% of time on reviews/approvals. Source: Adobe global marketer survey, ~2023.

  • Creative spend concentration: 2% of creative variations consume 68% of ad spend across 220k variations, 2k apps. Source: AppsFlyer Creative Optimization Report, 2024.

  • AI adoption in creative work: 83% of creative pros use gen AI; 66% say it improves content; 58% say it increases output. Source: Adobe Creative Pros & Gen AI survey, 2024.

  • AI guardrail preference: 56% say AI can harm creators; 91% would use verifiable attribution tools. Source: Adobe AI Creative Frontier study, 2024.

  • Google CM360 HTML5 constraints: ZIP/ADZ bundles; up to 100 files; max size 9.5 MB; clickTag required. Source: Google Campaign Manager 360 HTML5 creative spec, accessed 2026.

FAQ: Design‑Integrated Ad Tools, Figma to HTML5, and Creative Automation

1. How do I export Figma designs to HTML5 ads efficiently?

To export Figma to HTML5 ads without custom coding:

  • Design your master banner in Figma using components and styles.

  • Import that frame into a specialized ad production tool like Viewst (via plugin or export).

  • Use the tool to convert layers into HTML5‑native elements, apply AI Smart Resize to generate all required sizes, and then export ZIP bundles that comply with ad‑server specs (e.g., CM360’s file count and size limits).

This preserves your Figma design system and speeds up multi‑format production.

2. What is the best ad design software for creative agencies running display campaigns?

For creative agencies, the “best” setup is usually a combination:

  • Figma or Adobe for upstream design and motion (system governance, brand control).

  • A specialized creative automation platform for display advertising (e.g., Viewst) for downstream production — resizing, localization, motion handoff, approvals, and HTML5/GIF/MP4 export.

Standalone banner builders that try to replace Figma/Adobe rarely meet enterprise needs for brand consistency and design‑system alignment.

3. How does versioning and rollback work for ad creatives in modern tools?

In design‑integrated ad tools:

  • Each banner set is tied to a master creative and version ID.

  • Every change (copy, image, layout, market adaptation) is logged.

  • You can restore previous versions at the campaign or ad‑set level if performance declines.

This complements Figma/Adobe version history by adding ad‑specific lineage from creative concept to live HTML5 assets.

4. How can I manage display ad formats at scale without burning out designers?

To manage formats at scale:

  • Use Figma/Adobe for a single master concept.

  • Move to a production platform that offers smart resize, batch variant creation, and brandbooks.

  • Automate mechanical work (resizing, exports, basic motion) and centralize approvals.

This lets senior designers focus on concept and craft while the production stack handles repetitive tasks.

5. How does motion handoff from Figma or Adobe After Effects to ad production actually work?

Motion handoff typically follows this pattern:

  • Use Figma for interaction prototypes or After Effects for full animation.

  • In AE, define Motion Graphics templates (MOGRTs) with Essential Properties for editable fields.

  • Import those layouts and motion structures into a specialized ad tool.

  • Use features like AI Instant Animator to apply consistent motion across all HTML5 sizes, keeping timing and brand feel aligned.

The result: editable, performant HTML5 animations that respect upstream motion design.

By treating banner production as infrastructure — not a design side‑task — and connecting Figma and Adobe into a specialized HTML5 production layer, teams can scale output without sacrificing creative quality or burning out their designers.

Author

Founder, CEO at Viewst

Victoria is the CEO at Viewst. She is a serial entrepreneur and startup founder. She worked in Investment Banking for 9 years as international funds sales, trader, and portfolio manager. Then she decided to switch to her own startup. In 2017 Victoria founded Profit Button (a new kind of rich media banners), the project has grown to 8 countries on 3 continents in 2 years. In 2021 she founded Viewst startup. The company now has clients from 43 countries, including the USA, Canada, England, France, Brazil, Kenya, Indonesia, etc.

In this article