Direct Access to Eyedropper-Tool
Why is there a need for a shortcut for eyedropper? Doesn't sound like a frequently used feature
Wow, this functionality is so obviously useful to me, I wasn't expecting it to be questioned. I'd most often use it to pick colours from an image, to tint adjacent text or graphic elements. That's so much quicker that having to mouse and scroll inside the Style Panel.
The functionality to call the Eyedropper standalone, via hotkey exists in any graphics app I ever used (earliest implementation was likely holding Alt with the brush tool active in Photoshop). Adobe XD also uses I for the picker, Penpot and Pixso as well. That hotkey seems to be pretty popular, actually.
After picking the color, what do you do with it? There are several properties that take color, you still have to use style panel to choose the right one
I don't understand how just picking a color via shortcut accelerates the process
This typically is a one-shot action. There's no need to enter the style panel. You have an element, such as a box or text preselected. Then you press I to pick a colour from an image that you use nearby. Action completed.
I guess you refer to targeting fills and borders. I know apps that offer solutions to this as well (pick colour with LMB sets fill, pick with RMB sets border). Yet, even if only fills were supported, this would already be super useful in design ideation.
There are backgrounds, text, borders and what nnot
hwo do you use that color you picked?
I simply don't understand how you could use that color without going to the style panel and clicking on the right property
and if you click on the right property whats the point in the shortcut, since you wanted to avoid scrolling and finding the right property
I already wrote all of this, Oleg. You have the element(s) preselected that you want to recolour. Upon pick their fill colour changes instantly. Command exits.
Best you quickly try this out in Figma. Load an Image and some text that you place above the image. Now press I to give the text a tint that appears in the image.
You stated that the command may not know which property (e.g. fill or border) should change their colour. That's true. All mentioned prototyping tools afaik only support fill colours. Yet, as mentioned in my last post, there are also solutions for that most typical case: fill and border, via LMB and RMB (found already twenty years ago in Xara).
This is design-ideation functionality. I understand that you want people to start designing with Webstudio. In this phase there is nothing at all set, no tokens, nothing smart at all. You play around and the software should support this playfulness.
What fill colour? we don't have that
if you have selected the element and selected the property/focused the property input for the color, I dont understand why you would still need a shortcut to open the picker, because you already have scrolled there.
What fill colour? we don't have that
I meant the element colour (background).
What you describe is not the flow I mean. Forget the Navigator. Forget the style panel. They don't exist. You have two objects on the canvas. One has a great colour, one is ugly. You click
ugly and hit I. Then you pick
great colour and the colour got matched.
so you expect background color to be set automatically when you pick the color via shortcut?
your assumption is that background color is supposed to be the default
We are still not on the same page. Could you please quickly do the two rectangles example in Figma? Takes 30 seconds.
so you expect background color to be set automatically when you pick the color via shortcut?
No. The picker grabs the colour from the post-picked item (
great colour)
I can see it sets the fill
actually it seems to set both fill and stroke
no, it uses the last focused color input
and if there was no last selected input and I just selected the element, then it takes the first available color input
actually no, now I can't force it to set color into anything else but the first available fill input
Some apps have advanced eyedropper-implementions that let you sample and transfer tons of object properties – including what would be tokens in WS. Indesign's eyedropper behaves differently, if you hold down modifiers, and you can configure the default behaviour too
https://www.youtube.com/watch?v=dAKyfF_NS6s.
with settings it makes sense so you preconfigure where the eyedropper goes and then its deterministic
without these settings it sounds useless
figma is behaving extremely indeterministic there
if you have one fill and one stroke, you can focus stroke then select element then use shortcut and it will set in there
but if you ahve multiple fills and multiple strokes, then it always goes into the first fill
it sounds like an ureliable crap
its really useful when you do something like this all the time and when you can configure this behavior
Feel free to create an issue if you feel so strongly about this feature, I personally think this not high prio.
I cannot confirm unreliable behaviour – this sort of simple matching exists in countless applications.
Realistically, when one cannot convince you – how good are the chances for implementation?
doesn't matter, if enough users say this is high prio, its high prio
if you want to increase visibility, better create an issue
