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
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
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?
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
(The winning main flow came from @rsms and is beautiful in its simplicity.)pic.twitter.com/Gs5r00dKVk
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.
But as of last week, Selection Colors v2 is now true to its original vision, meticulously crafted to perfection, flawless in every regard!
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. 
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
2. I introduced a deliberate inconsistency. In normal use of styles, the pop-up shows on top of selection (nicer for your fingers). But here, we decided to move it aside to be consistent between colours and styles, and to not cover the list you care about.pic.twitter.com/QDUBOVgD4K
3. We still have this weird problem illustrated in the screenshots. It turns out, our colour precision is higher than a hex string can afford – these two colours are slightly different, so in a way SC isn’t doing anything wrong… but this can be confusing.pic.twitter.com/bKMbcg0qDC
But that’s part of the deal, I guess. No, you don’t have to get everything right, but you have to know exactly what you chose not to get right. Here’s what I *do* like about Selection Colors, though:
1. It’s a flexible little beast. You can use it as color find and replace, you can use it to manage styles, you can use it to clean up your design – or to revel in its messiness (like I often do). It helps dealing with text, where selection can be particularly tricky.
It hopefully sits somewhere perfectly right on the curve of complexity/flexibility. Too little flexibility, and it wouldn’t be powerful. Too much complexity, and it’d be overwhelming.
(I’ve been there before with OpenType, which had some similar challenges. I’m still pretty happy with how that turned out: https://www.figma.com/blog/opentype-font-features/ …)
2. It provides a nice onramp to travel between the worlds of colours and styles. This felt very important to me. Design can be messy and organized, often within the same day. Design systems can be accelerants, but they can also suffocate.
I was hoping for SC to give a set of tools to navigate those two extremes, at least when it comes to colours – and also force us to answer questions that will help in even more projects of this nature.
3. I thought this was a great collaboration between design and engineering; something I also care a lot about, and something I see a lot inside Figma.
We do not only have great engineers, and not only try to cultivate a great respect for either profession (and encourage thoughtful cross-pollination), but we understand that designers alone could not create a useful design tool.
(As an example, with Auto Layout, our engineers – @kenrickrilee and @willyvvu and @jessieteaa – all made design decisions, and some of them I only became aware of after launch. It was great.)
Twitter may be over capacity or experiencing a momentary hiccup. Try again or visit Twitter Status for more information.