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
-
-
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 -
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
Show this thread -
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
Show this thread -
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:
Show this thread -
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.
Show this thread -
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.
Show this thread -
(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/ …)
Show this thread -
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.
Show this thread -
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.
Show this thread -
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.
Show this thread -
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.
Show this thread -
(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.)Show this thread -
And now, two codas: One is that I got to use Selection Colors to work for some visuals on my personal book project.pic.twitter.com/RHaU5dkXh1
Show this thread -
This wasn’t the most important part of this effort, but I’m not going to lie – it’s pretty awesome to use the tools you helped create. It’s like creating on two different levels at the same time.
Show this thread -
Two: Just last week,
@nlevin reminded me that what I always thought was the beginning of the project, actually wasn’t.Show this thread -
I forgot that long before I joined Figma, I actually pitched Selection Colors as an external fan/observer. This completely slipped my mind. Here is that Medium (of course) post: https://medium.com/@mwichary/quick-ui-idea-selection-colours-aeedc00d7d70 …pic.twitter.com/FbruxAOnrk
Show this thread -
This was the past – what’s the future? I am not sure. Some of you requested Selection Text, and I’m onboard with that, but also I realize it requires quite a bit more thinking.https://twitter.com/andreinegrau/status/1248183000451383296 …
Show this thread -
Over time, my guess would be the crosshairs icons are likely to make an appearance in others parts of Figma UI where that feature would be useful. (Which was yet another part of building SC: sketching the future where SC already exists.)
Show this thread -
But nothing is set in stone is yet, and none of these are promises in any way. Let’s just use it for a while and see what we learn. And that includes you. Please send
@figmadesign your feedback or use the ? menu to file a support ticket. (We read all of them!)Show this thread -
BTW this wasn’t a complete walkthrough of the process, but parts that stood out to me most. Any thoughts or questions? Let me know!
Show this thread -
In the meantime, I’ll look at some other ideas put aside long time ago, and see if any of them deserve more attention. :·)
Show this thread -
(Credit should also go to
@eymlin and@skuwamoto who PM’ed this project, the entire design team at@figmadesign, and many other people helping with bits and pieces!!!)Show this thread
End of conversation
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.