Skip to main content

useSnapshot

useSnapshot is a React hook that lets you control when Figma captures a visual snapshot of your code component for display in the editor. By default, Figma snapshots your component after the initial render, but you can delay or manually trigger the snapshot for cases like:

  • Loading data asynchronously
  • Waiting for animations or transitions to finish
  • Capturing a specific interactive state
  • When the initial render doesn't represent the intended appearance

Options​

OptionTypeDefaultDescription
autobooleanfalseIf true, Figma snapshots automatically after the first render.

Usage​

Call useSnapshot inside your component. If you set auto: false, call the returned snapshot function when you want Figma to capture the component's current state.

Example​

import { useSnapshot } from "figma:react";
import { motion } from "motion/react";

export default function AnimatedRectangle() {
  const { snapshot } = useSnapshot({ auto: false });

  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{
        duration: 4,
        ease: "easeInOut",
      }}
      className="w-full h-full bg-black"
      onAnimationComplete={snapshot}
    />
  );
}