webstudio-is/webstudio

Access Eyedropper-Tool via Hotkey

Opened this issue · 0 comments

In the design-phase, I want to quickly match object properties without having to locate elements inside the Navigator or scrolling in the Style Panel. The following sample describes colour-matching.

Flow:

  • Select one or more canvas-elements
  • Press I key on the keyboard
  • Eyedropper lets you target any colour on your screen
  • Click transfers the just sampled colour to preselected objects

Tools like Figma, Penpot, Adobe XD and others offer similar functionality – the command is called with the hotkey "I". Their implementation is limited to changing fill-colours: That's straightforward and already quite useful.

Options to extend:
Match object “fill” colour with LMB, match border colour with RMB. Such is still simple and unobtrusive.

Image captions: Grey square was preselected. Pressing I lets me target the downmost colour tint of the gradient with pixel level accuracy. Clicking recolours the grey rectangle with just the right tone.

2024-09-23_13h07_19
2024-09-23_13h07_40