github / github/annotation-toolkit

[Feature request] Stamp to indicate interactive space

Open
#44 0 comments 0 reactions 0 assignees View on GitHub
feature request planned
Dominant language
No language data
Stars
320
Forks
33
Avg merge
36m
Merged PRs (30d)
2

Description

### Short description of the feature

Trying to solve the problem of visually showing the interactive target area around a visually smaller element

### More details about the feature

Problem: My team needs a way to show the interactive space around an element or group of elements. Existing stamp components don't cleanly convey to "add some padding so that there's a 24x24 interactive target" and writing it out isn't always sufficient to get the idea across to dev teams.

Proposed solution: A new component that can be freely sized to indicate a precise or approximate interactive space visually. The stamp has a label and low opacity that can be overlaid on a design.

Screenshot showing a bank account listing; there is a light blue overlay that encompasses the account name, number, and available balance, indicating that the entire area should be clickable/tappable, even though only the account name is linked.

### Alt text

- [x] My images use descriptive alt text.

### Code of Conduct

- [x] I agree to follow this project's Code of Conduct

Contributor guide

Open the contributing guide

Research direction

Review the existing stamp components in the Figma library and compare how they communicate annotated areas. Create a freely sized, low-opacity component with a label that visually indicates a precise or approximate interactive target area; done means the component clearly conveys the clickable or tappable space around smaller elements.

Written by the indexing model from the issue text.

Assessment

Tech stack
figma
Domain
accessibility, design
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.