Figma Comment

Figma Comment renders a small floating comment marker that expands into a card when opened. It measures its content height after mount (and on message/width changes) to animate smoothly between collapsed (32x32) and expanded states. The avatar slides from the corner into the padded content area, and the body fades in with a subtle blur. Supports controlled/uncontrolled open state, emits openChange/update:open, and respects prefers-reduced-motion.

Usage

Place the component near a canvas element and pass author/message details. Click the marker to toggle; clicking outside closes it when open. If you want to control state externally, bind v-model:open.

Arjun Mehta

2 min ago

What happens if we adjust this to handle light and dark mode?

<template>
  <div class="flex h-40 w-full items-center justify-center">
    <MFigmaComment
      author-name="Arjun Mehta"
      avatar-url="https://randomuser.me/api/portraits/men/11.jpg"
      message="What happens if we adjust this to handle light and dark mode?"
      timestamp="2 min ago"
    />
  </div>
</template>

Customize

Arjun Mehta

2 min ago

What happens if we adjust this to handle light and dark mode?

Customize

Reset

Author NameArjun Mehta

Avatar Alt

Avatar Iconi-lucide-user-round

Avatar Urlhttps://randomuser.me/api/portraits/men/11.jpg

MessageWhat happens if we adjust this to handle light and dark mode?

Open

Default Open

Timestamp2 min ago

Width180

Props

Events

Slots

UI

This component's theme exposes the slots below. Override any of them per instance with the ui prop, or app-wide under ui.figmaComment in app.config.ts.

Accessibility

The animated card container is rendered as a role="button" with tabindex="0", :aria-expanded="isOpen", and :aria-label="toggleLabel" (e.g. "Show/Hide comment from ..."). Keyboard toggles on Enter and Space (with preventDefault). A click-outside handler closes when open. Avatar has alt text or is replaced by a decorative initial span (aria-hidden="true"). The measurement element is aria-hidden="true". Focus is not programmatically moved on open/close. No prefers-reduced-motion removes focus ring semantics; reduced motion replaces animations with static positions/sizes.

Performance

• Measures content height via a hidden measureEl (first child scrollHeight) on mount with two timeouts (100ms, 500ms) and also on message/width changes (nextTick then measure) to ensure layout is stable.
• Animations driven by motion-v: card size animates between {height,width} (closed 32×32, open contentHeight×width), avatar offset animates left/top, content animates opacity + filter: blur(...) with delayed blur/opacity on enter.
• Spring transitions: card uses stiffness:550,damping:45,mass:0.7, avatar uses stiffness:300,damping:25, content uses custom ease: [0.22,1,0.36,1] for blur/opacity.
• useClickOutside attached to root wrapper; click handler lives on wrapper (not directly on motion node) to ensure reliable event binding.
• Avatar fallback: avatarFailed ref set on image error; also checks img.complete && naturalWidth===0 on mount/URL change. No timers beyond measurement timeouts.
• shouldReduceMotion replaces all animations with static styles/zero-duration transitions and simplifies content enter to plain opacity.