Jumping to coding at this moment can be unnerving, as you can learn hard things that might make you revisit the whole idea. But we hoped the velocity of building would force us to come up with answers quicker.
-
-
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
Show this thread -
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
Show this thread -
-
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.
Show this thread -
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.
Show this thread -
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
Show this thread -
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
Show this thread -
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/mKXdhiYXzIShow this thread -
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
Show this thread -
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
Show this thread -
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
Show this thread -
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?
Show this thread -
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
Show this thread -
Then we brought the prototype back to crit, and we learned a lot once again.
Show this thread -
Mostly, our decision to decouple gradient colours was wrong – that’s just not how others thought about gradients.pic.twitter.com/JZ2hRp9XIq
Show this thread -
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
Show this thread -
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
Show this thread -
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.
Show this thread -
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.Show this thread -
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
Show this thread -
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
Show this thread -
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
Show this thread -
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.
Show this thread -
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?
Show this thread -
This was the most “traditional” UI work I did on the project. I collaborated with
@thejoannachen and@nikolasklein and@rsms to figure that one out. Here are some explorations.pic.twitter.com/7a0zol4e0c
Show this thread -
(The winning main flow came from
@rsms and is beautiful in its simplicity.)pic.twitter.com/Gs5r00dKVk
Show this thread -
We also made a hard decision not to ship this part – and a few other things – in time for Config where SC v1 premiered, giving us a bit of time to get them right.
Show this thread -
But as of last week, Selection Colors v2 is now true to its original vision, meticulously crafted to perfection, flawless in every regard!
Show this thread -
Just kidding. Of course it’s not. There are a few things I don’t like about it, and I won’t even share them all because it’s too painful.
Show this thread -
1. I never figured out how to solve the “go back to master selection” problem. On top of that, the icon is not great – I don’t like anything reminding people of firearms – but we couldn’t think of anything else.pic.twitter.com/foyFSJem1p
Show this thread - Show replies
New conversation -
Loading seems to be taking a while.
Twitter may be over capacity or experiencing a momentary hiccup. Try again or visit Twitter Status for more information.
, but eventually we got it running.