At Liveblocks, we believe that great products start with great designs, which is
why we created the
[Liveblocks Collaboration Kit for Figma](https://www.figma.com/community/file/1387130796111847788),
a template containing interactive components and styles to design all kinds of
collaborative experiences.

We’ve just updated our Figma kit with new [AI Copilots](/ai-copilots)
components, meaning you can prototype advanced AI chats in your product. Each
component corresponds to a real component in our React package, so you can
easily turn your design into a production-ready application in a day.

<MarketingCallout
  title="Get the Figma kit"
  buttonText="Download kit"
  href="https://www.figma.com/community/file/1387130796111847788"
>
  Download the Liveblocks Collaboration Kit
</MarketingCallout>

## Prototyping advanced AI features

New customizable AI chat components allow you to prototype advanced features
such as AI taking actions in your product, human-in-the-loop confirmation
dialogs, loading states, and more.

<Figure>
  <video autoPlay loop muted playsInline width={672} height={504}>
    <source
      src="/images/blog/relaunching-liveblocks-collaboration-kit-for-figma-withai/figma-kit.mp4"
      type="video/mp4"
    />
  </video>
</Figure>

Each component underscores a different AI feature enabled by
[AI Copilots](/ai-copilots):

- **Asking contextual, user-specific questions**: Let users ask both general and
  personalized questions—Liveblocks makes it easy to pass application state as
  context.
- **Performing a task inside your product**: Let users ask AI to take action
  within your product. Trigger workflows, update content, or automate common
  tasks.
- **Creating or editing an artifact**: Enable AI to act as a creative
  collaborator—filling out forms, generating content, or editing documents with
  users in real time.

## Complete collaboration toolkit

The updated kit also includes previous Liveblocks ready-made features, so you
can prototype comprehensive collaborative experiences:

- **Comments**: Threaded discussions and feedback systems
- **Presence**: Real-time user awareness and cursors
- **Notifications**: User engagement and activity alerts
- **Multiplayer Editing**: Real-time collaborative editing experiences

<Slideshow
  slides={[
    {
      width: 656,
      height: 437,
      imageUrl:
        "/images/blog/liveblocks-collaboration-kit-for-figma/01-figma-kit-inbox-notifications.jpg",
    },
    {
      width: 656,
      height: 437,
      imageUrl:
        "/images/blog/liveblocks-collaboration-kit-for-figma/04-figma-kit-avatar-stack.jpg",
    },
    {
      width: 656,
      height: 437,
      imageUrl:
        "/images/blog/liveblocks-collaboration-kit-for-figma/02-figma-kit-comments-thread.jpg",
    },
    {
      width: 656,
      height: 437,
      imageUrl:
        "/images/blog/liveblocks-collaboration-kit-for-figma/03-figma-kit-composer.jpg",
    },
  ]}
/>

## Responsive, flexible, and interactive

Components are designed to be responsive and flexible, allowing you to customize
their look and feel to match your brand perfectly. They’re also interactive,
meaning you can share clickable prototypes with your team.

<Figure>
  <Image
    src="/images/blog/liveblocks-collaboration-kit-for-figma/figma-kit-theming.jpg"
    alt="Figma kit theming interface showing customizable components and styling options"
    width={672}
    height={448}
    quality={90}
  />
</Figure>

## Design to production in record time

The beauty of the Liveblocks approach is that your Figma prototypes aren't just
mockups—they're blueprints for real functionality.

Each UI element in the Figma kit perfectly matches a coded pre-built component
offered in the
[Liveblocks React UI library](/docs/api-reference/liveblocks-react-ui). This
enables engineers on your team to bring your design to production in a matter of
hours.

<Table>
  <TableHead>
    <TableRow>
      <TableCell header>Figma</TableCell> 
      <TableCell header>React</TableCell>
    </TableRow>
  </TableHead>

  <TableBody>
    <TableRow>
      <TableCell>AiChat</TableCell>
      <TableCell>
        <UniversalLink href="/docs/api-reference/liveblocks-react-ui#AiChat">
          <code>{`<AiChat />`}</code>
        </UniversalLink>
      </TableCell>
    </TableRow>
    <TableRow>
      <TableCell>Composer</TableCell>
      <TableCell>
        <UniversalLink href="/docs/api-reference/liveblocks-react-ui#Composer">
          <code>{`<Composer />`}</code>
        </UniversalLink>
      </TableCell>
    </TableRow>
    <TableRow>
      <TableCell>Comment</TableCell>
      <TableCell>
        <UniversalLink href="/docs/api-reference/liveblocks-react-ui#Comment">
          <code>{`<Comment />`}</code>
        </UniversalLink>
      </TableCell>
    </TableRow>
    <TableRow>
      <TableCell>InboxNotification</TableCell>
      <TableCell>
        <UniversalLink href="/docs/api-reference/liveblocks-react-ui#InboxNotification">
          <code>{`<InboxNotification />`}</code>
        </UniversalLink>
      </TableCell>
    </TableRow>
    <TableRow>
      <TableCell>InboxNotificationList</TableCell>
      <TableCell>
        <UniversalLink href="/docs/api-reference/liveblocks-react-ui#InboxNotificationList">
          <code>{`<InboxNotificationList />`}</code>
        </UniversalLink>
      </TableCell>
    </TableRow>
  </TableBody>
</Table>

We can't wait for you to try the
[Liveblocks Collaboration Kit for Figma](https://www.figma.com/community/file/1387130796111847788/liveblocks-collaboration-kit)!
And of course, please [let us know](https://x.com/liveblocks) if there is
anything you'd like us to include in the future.