# Deep Dive into Rippling’s Buzz File Source: https://www.youtube.com/watch?v=xSGYGDZXCW0 Recap page: https://rapidrecap.app/video/xSGYGDZXCW0 Generated: 2025-12-19T12:35:01.201+00:00 --- ## Quick Overview The video details Rippling's template-based design system for creating marketing ads, emphasizing how this system allows marketing teams to rapidly generate on-brand, multi-format assets like social media posts and webinars by leveraging customizable components and pre-approved assets, ultimately speeding up the creative workflow and ensuring brand consistency. **Key Points:** - The team developed a comprehensive ad template component system in Figma to streamline the creation of diverse ad formats, including social media posts, webinars, and downloadable content assets. - The system incorporates numerous customizable options for elements like layout alignment (left vs. center), toggling common elements (Logo, CTA, Subhead/Description, Image), and various background styles (solid color, gradient, 3D). - Specific ad content types were categorized, such as Type Only, High Impact, Statistic, Testimonial, Checklist, Social UI (X/LinkedIn), G2 Review, Webinar, Event, and Ebook templates. - The structure allows marketers, who may not be deep design experts, to self-serve and quickly produce on-brand creatives by selecting from predefined, pre-approved component combinations and styles. - The presenters reviewed past successful ('Rippling Winners') and poorly performing ('Rippling Losers') ads to inform the design and component choices for the new templates. - The component file is highly organized, with layers dedicated to different content types (e.g., Photo & Illustration, Statistics, Testimonial, Webinars & Events) to manage complexity. - The ultimate goal of this templating system is to reduce manual design work, speed up time-to-market for ad creatives, and maintain strict brand adherence across all campaign assets. ![Screenshot at 0:00: A split-screen view shows Dan Schwer \(left\) and Jay Dalal \(right\) introducing the topic while displaying an early stage of the ad template component library in Figma, featuring several purple-themed social media ad mockups.](https://ss.rapidrecap.app/screens/xSGYGDZXCW0/00-00-00.png) **Context:** The video features Dan Schwer, Senior Product Designer at Atlassian, and Jay Dalal, Host of Deep Dive, discussing the development and structure of Rippling's internal Figma file dedicated to creating marketing ad templates. This system was created to improve efficiency and maintain brand consistency when producing a high volume of diverse ad creatives for various platforms and content types. ## Detailed Analysis Dan and Jay walk through the structured ad template component library built in Figma, designed to empower marketing teams to quickly self-serve ad creation while adhering to brand guidelines. The system is built around component variants that control layout options (left vs. center alignment), element visibility (Logo, CTA, Text fields), and background styles (solid color, gradient, 3D). The template brief outlines specific ad types addressed, including those focused on simple text, statistics, testimonials, social media UI (like Twitter/LinkedIn posts), ebooks, and webinars, each with defined required elements. The presenters examine the component structure, showing how nested components allow for easy swapping of elements like illustrations or logos (e.g., switching between Rippling logos and partner logos) and background colors, ensuring consistency across different dimensions (like 1:1, 4:5, 9:16). They highlight that this system prevents marketing users from creating off-brand or overly complex designs, as the guardrails are built into the component structure, significantly speeding up the time from briefing to publishing new ad sets. ### Template Philosophy - For all types, consider options like Left vs. Center alignment, turning common elements (Logo, CTA, etc.) on/off, and supporting various background options (Solid, Gradient, 3D). - Each ad type gets its own file, and all digital templates must be responsive at different ratios. ### Performance Ad Types - Categorized templates include Type Only (with Headline, Subhead, CTA, Logo), High Impact (large headline), Statistic (Number, Headline, Citation), Testimonial (Quote, Attribution), Checklist, Incentive, Social UI (X/LinkedIn), G2 Review, Webinar, Event, and Downloadable Content (Ebook). ### Component Structure - The Figma file organizes components logically by type (e.g., Backgrounds, Button, various List styles) to manage complexity and ensure brand adherence, reducing reliance on designers for routine ad variations. ### Live Demo & Customization - Demonstrates using the 'Change Layout' panel to quickly swap layouts and utilizing instance properties (like changing the background color from 'Berry' to 'Green' or swapping logos) within a single component instance to generate numerous on-brand variants instantly. ### Workflow Improvement - This templated approach streamlines the workflow, allowing marketing to iterate faster and reducing the need for designers to handle repetitive adjustments, saving significant time and resources. ![Screenshot at 0:00: Demonstration of the 'Change Layout' panel in Figma, showing options to customize dimensions, background, logo type, and CTA color for a social media ad template.](https://ss.rapidrecap.app/screens/xSGYGDZXCW0/00-00-00.png) ![Screenshot at 0:57: A view of the main asset library page in Figma, displaying numerous organized ad template variants categorized by content type \(e.g., 3D Icon, Headline + Product Screenshot, Carousel\).](https://ss.rapidrecap.app/screens/xSGYGDZXCW0/00-00-57.png) ![Screenshot at 1:16: The speakers discuss the need for ad variations that are simple to update, showing a complex component structure in the Figma layers panel.](https://ss.rapidrecap.app/screens/xSGYGDZXCW0/00-01-16.png) ![Screenshot at 6:08: A Miro board displaying a design sprint analysis, categorized by concepts and brand research, used to inform the template design process.](https://ss.rapidrecap.app/screens/xSGYGDZXCW0/00-06-08.png) ![Screenshot at 12:27: The Figma interface showing a component set with multiple size variants \(1:1, 4:5, 9:16\) and the properties panel open, where a 'Background' property is being configured using library colors.](https://ss.rapidrecap.app/screens/xSGYGDZXCW0/00-12-27.png)