I developed a design management system for a white label video service to handle multiple brand themes across all major streaming platforms: Android TV, Fire TV, Apple TV, Roku, iOS and Android mobile. The design tool is Sketch and the design handoff tool is Zeplin.
The brand themes include primary/secondary colors, company logo, font and spelling variations unique between the US and Canada.
Multiple organizational structures were required. It starts with reference design project files separated for TV platforms, mobile platforms and company branding. There is a shared library providing the standard branding elements, icons, and functional components. The screens within each reference project file are for a single branding variant and a custom Sketch plugin is used to switch the screens between brand schemes. The plugin changes screen names, primary/secondary colors, logos, design components, and fonts. When exported to Zeplin the screen name patterns allow for drag/drop creation of variant groups without requiring any renaming.
This process requires quite a few manual steps to switch the variants and export to Zeplin which results in a large amount of files. This is why I’m a Top 100 user of Zeplin and I push their caching systems to the limit with over 1200 screens per project.
The next generation of this design handoff procedure needs to be more dynamic and will require a system such as Figma or Penpot to remove the export requirement and allow easy live switching of brand themes with a plugin. Penpot is my target for this work as the open source and self-hosting fits well within my current company’s directives.
