Figma Comment

A Figma comment component renders a clickable card with an avatar and message. It expands to show full content when clicked, animating size and position. Use it to display comments in a design interface, allowing users to interact with detailed messages.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/figma-comment

npx layro-cli add @educlopez/figma-comment

npx layro-cli add @educlopez/figma-comment

bunx layro-cli add @educlopez/figma-comment

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Dependencies

Demo

"use client";

import { Avatar } from "@/components/smoothui/avatar";
import { cn } from "@/lib/utils";
import { getImageKitUrl } from "@/lib/smoothui-data";
import { somePeople } from "@/lib/smoothui-data/people";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { useEffect, useRef, useState } from "react";
import { useClickOutside } from "./use-click-outside";

const [DEFAULT_AUTHOR] = somePeople(1, 11);

const CLOSED_SIZE = 32;
const AVATAR_CLOSED_LEFT = 4;