Wanted to share a bit of the process of building Selection Colors, a little @figmadesign feature I feel rather (maybe strangely) proud of.
(This was originally meant to be a blog post, but the Covid-19 situation is sapping my energy…)pic.twitter.com/qD7Us8dq2V
-
-
I honestly didn’t think a lot more about it at that point. It was one of the many explorations that designers throw around. But in the weeks and months after, I kept thinking about how nice it’d be to have something like it.
Show this thread -
Some months later,
@SickingJ (an engineer on the editor team) approached me, proposing working on something together during Figma’s maker week. We both realized we wanted to build something more real rather than exploratory, and chose SC from a bunch of ideas.pic.twitter.com/Sthi8dqvWW
Show this thread -
For a few days, we plopped both of our computers and monitors at the same desk, and worked on this together. Jonas did more back-end work, and me front-end UI wiring, with a big overlap in the middle – and a lot of conversations.
Show this thread -
We didn’t have all of it figured out; we approached this by trying to build a prototype and answer all the design questions as we went along. SC felt like the kind of project where you don’t learn that much by thinking ahead, but you can get very far by thinking *while making*.
Show this thread -
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.
Show this thread -
There was another hope: Figma is complicated on the inside, and thinking of every edge case and contingency ahead of time can be suffocating.
Show this thread -
But as you start building, the system itself can help you out, and make design decisions *for you* – the engineering wiring and the way UI was originally put together can offer solutions, too. (Some of the scary edge and corner cases will Just Work.)
Show this thread -
As Jonas was teaching the front-end and back-end to talk to each other, I explored the design in more details.pic.twitter.com/8lLEfrtldF
Show this thread -
The initial attempts to wire things together didn’t go well
, but eventually we got it running.pic.twitter.com/hUWLUlkhXt
Show this thread -
(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
Show this thread -
Anyway! As we dove deeper, we started peeling off more interesting challenges. Here are some decisions we discovered we needed to make.
Show this thread -
Should we fuse or keep separate the same colour with different transparencies? (We went with keeping them separate.)pic.twitter.com/vdNPMInk3K
Show this thread -
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
Show this thread -
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.
Show this thread -
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
Show this thread -
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 - 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.