Context:
While working on a design system in Figma, I’ve created a set of color tokens using the new Variables feature. These tokens are organized and published via a shared Library for consistent use across projects.
Issue:
When selecting a color from the Variables panel (especially from Libraries), the color swatches are visible, but no color values or token names are displayed on hover. This makes it difficult to quickly identify or differentiate between similar shades—especially in large systems with many tokens.
Why This Matters:
- Designers often rely on visual cues and quick access to token names or values.
- Without hover details, we’re forced to memorize or constantly reference documentation.
- It slows down the workflow and increases the chance of using incorrect tokens.
Proposed Solution:
Please consider adding a tooltip or hover state that displays:
- The token name
- The color value (e.g., HEX, RGB, or HSL)
This small UX improvement would significantly enhance usability and efficiency when working with shared design tokens.
