Camilo: our tool and technique for one-click brand change in Sketch 52
A solution to common Design Ops problem
The problem
A white label global product, with multi-brand support, is a challenge to design. The design process have to consider the problematic of one-size-fits-all for every asset, from typography and iconography, to images and color palette.
Here at Tuenti, we have long been ahead of such situations.
We defined in the past how design and engineering teams should work with regards to visual brand elements: we concluded that we should create specific themes for each brand. We identified the following parts, that need to be defined for each brand:
- Colors: fill colors, border colors, text colors and gradients.
- Brand assets: such as logos, images, videos or icons.
Designers need to keep in mind how the design they are working on will be affected by each brand. There are also different stakeholders that require this type of design materials: marketing, communication, product or business units. And this is precisely where the problem lies: anytime designers have to do a brand swap in their designs, they spend their valuable time changing them manually.
We wanted to obtain a tool that would execute the brand replacement, in the shortest possible time: the only decision a designer should have to make, is which brand to apply to their design file.
The research
Sketch 52 opened up a new possibility: symbols from an external library now had a layer style override, for both shapes and texts. We hypothesized that with the new Sketch feature it would be possible to make a change of brand with a click, through the replacement of the layer styles of the document.
However, there is one thing Sketch has never allowed the application to do: import, export or replace local layer styles from an external file.
So we started searching for plugins that have this kind of functionality available:
- Replacing color styles is possible through a plugin called Library Styles Sync by Zero Height.
- Regarding the assets, Symbol Swapper by Jason Burns, allows us to change all the selected symbols for others of the same name in another document.
Our initial hypothesis was validated: it was possible to execute theme change through different plugins with a few clicks. But this set of functionalities that we needed were scattered throughout different plugins. and those same plugins also offered many other features that we did not need.
The time had come to sit down and develop a plugin with only the required options to achieve our desired “one-click brand swap.”
Making Camilo
The idea was to have a single global component library that would serve the main file used by designers: the UI kit.
On the other hand, we would have a theme library with all the particularities for each brand. So, the UI kit would have a set of specific layer styles overrides, text styles override and symbols that would be replaced by the plugin with the selected brand.
The experience of building a plugin was quite enjoyable. The most important thing for me was to interpret the code of the plugins we had found during the research stage and try to understand how they had been programmed. Several of the sources of sketch wisdom available online were also helpful:
The result
We ended up with a mix of the plugins mentioned above, plus a bunch of further modifications here and there, and after a few days of testing… it worked 🤘 🎈 🎉!
At the same time, we discovered use cases that we had not contemplated at the beginning, as this same technique would also serve to change from light to dark mode.
We decided to give the tool itself a personality, and Camilo name came out because of its proximity to the chameleon and its ability to adapt its color to its surroundings. One of the designers of our team, Héctor Sancho designed a beautiful logo with references to Sketch app icon 💎.
Conclusions
The system requires spending time in preparing the overrides of the symbols and layer styles. But when the system is ready, it is really quick to make a brand or theme swap in the designs. In addition, designers should not worry about choosing any color in a long list of overrides, simply select the brand and magic happens. This means a big improvement in their workflow.
On the other hand, system designers, still have control over the centralized library system and can work the brand specifics in a separate library.
This is an approach, but it isn’t perfect. Layer Styles remain in the UI kit doc, meaning that designers must sync the brand library with the plugin to update the changes made in the brand libraries.
Also, we use Zeplin as the main tool for our engineers to see the specifications of the designs. But it doesn’t recognize layer Styles, so it’s hard to tell them what color is assigned to each component. What we want to tell to developers is that a component has a primaryColor, not a blue. And the same blue can be both primaryColor and buttonPrimaryColor.
Try it yourself
Go to Camilo in GitHub and follow the instructions to install it. We included example files to test it and discover how everything works 🙌 🙌.
