Mock up AI agents in your product with the Liveblocks Collaboration Kit for Figma
The updated Liveblocks Collaboration Kit for Figma now includes new AI Copilots components helping you prototype complete AI and collaborative experiences.
At Liveblocks, we believe that great products start with great designs, which is why we created the Liveblocks Collaboration Kit for Figma, 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 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.
Get the Figma kit
Download the Liveblocks Collaboration Kit
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.
Each component underscores a different AI feature enabled by 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
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.
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. This enables engineers on your team to bring your design to production in a matter of hours.
| Figma | React |
|---|---|
| AiChat | <AiChat /> |
| Composer | <Composer /> |
| Comment | <Comment /> |
| InboxNotification | <InboxNotification /> |
| InboxNotificationList | <InboxNotificationList /> |
We can't wait for you to try the Liveblocks Collaboration Kit for Figma! And of course, please let us know if there is anything you'd like us to include in the future.
Ready to get started?
Join thousands of companies using Liveblocks ready‑made collaborative features to drive growth in their products.
