This is my original (simple) pitch for Selection Colors. I talked to the design team, received some encouragement, and filed it away in a stash of ideas whose time is possibly to come.pic.twitter.com/EIhVYTht01
You can add location information to your Tweets, such as your city or precise location, from the web and via third-party applications. You always have the option to delete your Tweet location history. Learn more
(You might also notice the code name Spartacus, which is my stupid inside joke – I try to have a project codenamed Spartacus at every place I work. I think this is the fourth one?)pic.twitter.com/Po5mC7EQWU
Anyway! As we dove deeper, we started peeling off more interesting challenges. Here are some decisions we discovered we needed to make.
Should we fuse or keep separate the same colour with different transparencies? (We went with keeping them separate.)pic.twitter.com/vdNPMInk3K
What do we do with gradients? (We decided to grab the individual colours from gradients and treat them as if they were independent.)pic.twitter.com/cXuGlp9SKd
How do we sort styles and colours? I knew sorting colours in one axis is its own area of science (there is a different story here how I learned it the hard way) – but fortunately, we already had that solved in Document Colors.
We also decided to hide colours from hidden layers, masks (but not masked objects), layout grids, and effects like shadows. They all seemed to exist in unrelated – or inconsequential – universes and would just pollute this space.pic.twitter.com/LJqNg4rnI5
Of course, we also had to decide on where to put SC itself, how often it should trigger (too often = overwhelming, not often enough = undiscoverable), and what was our overflow strategy.pic.twitter.com/KgCIXJyrfF
But those were the easier questions. Here’s one that was hard.
Let’s say you change this colour to an already existing colour, #FFC700. What should happen?pic.twitter.com/b0kLFmfqbM
In other words: Should a duplicate colour be immediately fused with an existing colour, or should it stay separate (but identical)? You can make arguments for both: first when you’re cleaning up, but second when you want for two colours to trade positions.
This wasn’t just a hard design decision. The engineering consequences of this were even more daunting; just like Auto Layout, this pushed on the very fabric of Figma, which by its nature wants to reflect things immediately, and to everyone via multiplayer.
We really wanted to make it possible to trade two colours directly, because otherwise you would have to go through this unnatural and error-prone sequence: c = a a = b b = c
The solution was to “freeze” the list when the colour picker was open. Only the moment you closed it, the list would get cleaned up again. (We hoped that people would figure it out.)pic.twitter.com/xndqZWMni2
I’m vastly oversimplifying what “freezing” was (and honestly, not sure I fully understand it myself). But @SickingJ got it to work, and this enabled trading/swapping colours.pic.twitter.com/mKXdhiYXzI
It required quite a bit of thinking and experimenting, though – see a bit of a doc that I wrote out just for the two of us to process this.pic.twitter.com/42r7SfjEa8
We also had to solve a problem of stopping aggressive sorting. Left to its own devices, it was unnerving when your color moved up and down as you were changing it. (This is an earlier exploration where this exact thing happened.)pic.twitter.com/IJz283unJp
We also had to solve a problem of you dragging a colour through existing colours – by default, they would automatically get fused together *as you were dragging*, which was logical… but confusing and destructive!pic.twitter.com/0ON4SOGWwW
At the same time, we had to think about multiplayer. What if someone else changed the colour during any of the above – even in the middle of your drag? Or deleted the objects? Or edited the text you were changing?
We continued cobbling together the prototype with code we were increasingly sure wouldn’t ever make it to production. If you‘re curious, here are all our commits. (I actually became a better engineer thanks to this process – thanks, @SickingJ!)pic.twitter.com/rezIbdjGpB
Then we brought the prototype back to crit, and we learned a lot once again.
Mostly, our decision to decouple gradient colours was wrong – that’s just not how others thought about gradients.pic.twitter.com/JZ2hRp9XIq
Second of all, it was annoying that you could select and go deeper into a stack of colours, but not have a way to easily get back.pic.twitter.com/u8VJHehono
There were also smaller things. My overflow icons were confusing (one looked like a checkbox), and our triggering was off. (That was a tricky one, too. Imagine you have just one object with the same Fill and Stroke – should SC show up, or would it be too much?)pic.twitter.com/mRMRF4O87l
We decided to build Selection Colors for real a few months later, motivated partly by… Auto Layout. We were planning to change the frames to have fills, and that ruined an existing feature where you could easily colorize an icon just by selecting a parent frame.
I had nothing to do with code any more, save for an occasional UI fix or an icon swap. The real work was done by engineers on our team – @jessieteaa, @thejoannachen, @kenrickrilee.
Immediately, they found some more real-life problems, one of them being performance. (Long story short: If you make a really large selection, we don’t show SC by default, because the list can get overwhelming, and the interactions quite slow.)pic.twitter.com/gV3GR4vz4K
BTW here is a random fun screenshot from one of the few bug bashes. (I have tons of temporary Figma files like this. The style names here are particularly hilarious.)pic.twitter.com/zsYp8uNGfh
But the biggest challenge was promoting to styles. In our maker-week version, we built this “one-click style creation” – a fun experiment.pic.twitter.com/atsTrqjvnE
In real life, we already had an existing UI for that… but we also had a problem. In Figma, an object can have multiple fills. And a style can have multiple fills. But an object cannot have multiple styles.
If you choose a colour to promote to a style, that colour could also be shared with other colours in some layers. What should we do when that happens?
Twitter may be over capacity or experiencing a momentary hiccup. Try again or visit Twitter Status for more information.