Figma Library

The Coca-Cola Freestyle machine encompasses numerous beverages (Coke, Sprite, Fanta, Powerade...) and each beverages has multiple flavors. The machine can dispense over 200 combinations by mixing flavors and beverages together, allowing customers to create unique, custom flavor profiles. This is a fantastic product, but a pain for designers to update each button when the Coca-Cola beverage logos or flavors gets rebranded or slightly updated. Human mistakes are also more likely to happen and inconsistencies can show up across product machines.

Problem:
1. The Freestyle brand has hundreds of buttons. To update the logo of a beverage or the flavor of a beverage each button with the same logo or color has to be updated individually. Designers had to locate and update each button design file, one at a time.
2. When advertisements were designed to promote specific beverages or combination, designers had to locate each specific button and import that button into the design file.

Solution:
The solution was to create a Figma component library with all the buttons and flavors so that when a designer update the master logo for one of the brands it automatically updates all the buttons. When a designer updates the master colors for a flavor profile it updates all the buttons containing that flavor. When a designer wants to interchange buttons within a advertisement they can easily do so by selecting a different variable. It also allowed the team to create templated advertisements where the artwork and buttons could be easily interchanged. This was a huge time saver by streamlining the workflow and also ensured brand consistency. The designer could spend more time creating engaging advertisements and less time updating brand assets.