As with any design process there were lots of failed, but interesting explorations that helped us get to the end result of Flagsmith. This first solution served as proof of concept, just to see if the idea was worth exploring further. While it was successful in that regard, it ended up being super lengthy in the separation state. It’s also very difficult to figure out which layers go with each, especially with the stripes in the fold.
This second idea tried to address the length by abstracting the more complicated shapes. The unfortunate thing is that in the abstraction, you lose the connection to the stripes. However, we got around that by adding a live preview. The pieces in the preview are actually part of their corresponding bar, so the color gets changed in preview as you change the bar.
Although the preview is super cool, we felt it wasn’t necessary if we just simplified things a bit. I do think there may be some use for this in another context though. Ultimately we ended up at a solution more in line with the first. The key differences were that we grouped related shapes better, tightened spacing around them, and tightened up the syntax system a bit. To help with some of the more complicated shapes like stripes, we added a ‘base’ component, which just acts as the structure and underlying color (or second stripe) for the flag.