Figma Comment
An animated comment bubble component inspired by Figma's comment system. Expands from a small avatar to show full comment details with smooth spring animations.
E
Edu Calvo
Just now
What happens if we adjust this to handle a light and dark mode? I'm not sure if we're ready to handle...
Installation
npx smoothui-cli add figma-commentFeatures
- Smooth spring animations for expand/collapse
- Click outside to close functionality
- Customizable width and content
- Notification indicator support
- Responsive height measurement
- Accessible with reduced motion support
Accessibility
Screen Reader
- The avatar uses an
AvatarImagewith analtattribute and anAvatarFallbackshowing the author's initial. - The click-outside handler allows dismissing the comment by interacting elsewhere.
Reduced Motion
This component respects the prefers-reduced-motion media query via useReducedMotion from Motion. When reduced motion is preferred, the expand/collapse spring animations and content blur transitions are disabled, and the container resizes instantly.