Previously, a production artist or designer would have to find an email layout in a Figma file and reskin the brand theme manually if it was part of a multi-company campaign. I took all layouts and turned them into variants and applied Figma variables to map out the colors, fonts, logos and button radii to each brand's primitive tokens. Leveraging modes in Figma allowed a designer to instantly swap the brand without having to manually touch anything.
I also wrote documentation to explain Figma variables as well as how to swap out the brands. You can view the complete documentation here. Sample pages are included below.
I also wrote documentation to explain Figma variables as well as how to swap out the brands. You can view the complete documentation here. Sample pages are included below.
Earlier in 2026, the consumer direct team reached out create a modular email system based to help support the influx of email campaign requests. Working with a creative director specializing in UX, I established variables for the colors, spacing, radii and fonts that was consistent with Rate's web design system. Semantic names were given to each variable to describe their purpose.
Then, a component structure based on atomic design was established by first building out the atoms (buttons, cards, etc.) and eventually the modules (card layouts, content boxes, headers, etc.). This system allowed for quick updates on the atomic or component level if necessary.
Four base templates were created with instructions to swap out the modules. Sample documentation is below as well as the link to the full PDF here.
Then, a component structure based on atomic design was established by first building out the atoms (buttons, cards, etc.) and eventually the modules (card layouts, content boxes, headers, etc.). This system allowed for quick updates on the atomic or component level if necessary.
Four base templates were created with instructions to swap out the modules. Sample documentation is below as well as the link to the full PDF here.
