Design System Library
At Wunderkind, I developed a comprehensive design system management file in Figma that transformed our entire design workflow. This system featured a preset Variables Library, customizable templates for onsite experiences including top bars and pop-ups, and templates for five distinct email campaign types with dozens of modular components designed for seamless mixing and matching. The system empowered designers to efficiently populate client experiences with unique branding while ensuring visual consistency across all touchpoints. As a result, we reduced our new client onboarding timeline by a full day, while simultaneously creating more opportunities for designers to explore creative and experimental approaches in their work.
I collaborated closely on this project with Amy Boys, a talented Visual Designer from our London office. Amy and I connected weekly via Zoom to brainstorm concepts, discuss project progress, troubleshoot challenges, and share insights. The core development phase spanned three months, with additional enhancements implemented after our peers completed the corresponding client-facing Figma file. You can learn more about Amy and explore her portfolio by following this link.
April - June 2024
Project Overview
Variables Library
We developed a comprehensive Variables Library template encompassing all design elements that Wunderkind Visual Designers utilize when adapting client branding guidelines for performance marketing campaigns. The template systematically organizes client-specific assets including color palettes, typography specifications, CTA button interactions, and input field parameters. To address GDPR compliance requirements, we incorporated Boolean variables that enable designers to ensure all creative outputs meet applicable legal standards. By establishing a template library pre-configured with essential variable types, we significantly streamlined the client onboarding process and reduced setup time for new campaigns.
As the Variables Library is filled out with the Client’s branding Style Guidelines, the colors, dimensions, and styles are auto populated onto the elements within the components frame. From here the designer can make needed changes such as updating the color variable assigned to the heading text from primary text color to accent text color to correlate with the client’s branding.
A Text Styles Library has also been preset for designers to complete the Client’s brand fonts and type styles. The designer completes the different typographies with the correct font, case style, and weight--size, line-height, and letter spacing are set in the Variables Library. The text styles flow down to the elements on the components frame as well as to the experience layout frames.
The pre-set campaign types include, overlay pop-ups, bottom bars, top bars, corner tabs, and toast buttons. The components and elements within each frame are pre-linked to the Variables Library and the Text Styles. Because the designer has completed both of these things in advance, the onsite campaign frames will have been auto populated with the Client’s unique branding styles. From here the designer can make small changes such as rounding the edges and adding lifestyle imagery, or large changes such as changing the rectangular shape of the popup to brand specific shape such as a apple for Apple Vacations, or the shape of a diffuser for Vitruvi.
The Variables Library incorporates two distinct modes—light and dark—to optimize visual hierarchy and contrast across different campaign elements. For clients with light-themed websites, designers leverage the dark mode to create high-contrast pop-ups, bottom bars, and top bars that utilize darker tones from the client's brand palette. This strategic contrast approach ensures these key conversion touchpoints stand out prominently from the primary website background, enhancing visibility and user engagement. The dual-mode structure allows designers to maintain brand consistency while maximizing the visual impact of critical customer capture experiences.
By configuring these dual modes within the Variables Library and populating them with client-specific values, designers gain access to Figma's native mode-switching functionality through the Appearances dropdown menu. This setup enables real-time toggling between dark and light style variations, allowing designers to instantly preview and compare both aesthetic approaches within the same design frame. The immediate visual comparison empowers designers to make data-informed decisions about which styling approach will most effectively support each client's unique marketing objectives and conversion goals.
Email Campaign Styles and Components
This variables-based approach extends seamlessly to email campaign designs, where all core components, including logos, copy, icons, and buttons, are linked to the same dual-mode variable system. Designers can instantly toggle between light and dark styling variations across entire email templates, maintaining visual consistency with other campaign touchpoints while evaluating which aesthetic approach optimizes engagement for each client's audience. This integrated workflow ensures cohesive brand execution across all marketing channels while providing the flexibility to adapt email designs based on performance considerations and client-specific strategic requirements.
I took the pre-existing email block templates and broke the blocks down to individual components, applied the variables styles to the components, then built the modular blocks back up using the components. I also created new blocks such as product cards with review content and additional top categories layouts. Each block is a variant of a component group. This allows the designer to paste a component type into an email campaign layout and then toggle through the variants to find the right style for that client. As the designer updates the Variables Library and Email Text Styles, colors, shapes, and styles are automatically changed within each modular block.
The email layout templates are engineered for seamless integration with the corresponding client-facing Figma file. Designers are guided to convert email layouts into components and subsequently publish these components to the client-facing design document. The designer then accesses the client-facing Figma file and imports the published components directly into their send flow. When revision requests are received from the client's team, designers can implement modifications within the main components of the Design System Management file and publish these updates directly to the client-facing file. This workflow enables rapid revision turnaround times and maintains comprehensive version control management throughout the design process.