Extended collections work very well in simple scenarios like having multiple brands with light an dark mode. But there is more than brand specific colors.
Requirement:
We want to be able to define brand specific font sizes for desktop and mobile devices. In order to do so we have to introduce an additional “device” collection with a “desktop” and “mobile” mode. Then we connect the extended collection (aka the brand collection) with the device collection.
Now we can easily switch between brands + devices and the font size changes accordingly.
Problem:
But when the brand specific font sizes are changed in the variable view, the designs do not automatically update. You have to select the layers, switch modes manually back and forth and only then the variable changes are visible. This means everything is connected correctly, but the automatic update of the layers does not work properly, which makes extended collections unusable in case you want to have more than brand colors with light and dark mode.
PS: This is NOT the same issue like the one related to font styles. In this simplified example we do not use font styles to show the problem. It also happens with colors or any other variable. Its related to the fact that there are additional collections and modes connected to the brand / extended collection.
You find the according Figma file and screen recording in the attached ZIP file.
