• DocsDocs
  • PricingPricing
Book a demo
Sign in
Sign in
Book a demo
    • Ready-made features
      • AI Copilots
        AI Copilots

        In-app AI agents that feel human

      • Comments
        Comments

        Contextual commenting

      • Multiplayer Editing
        Multiplayer Editing

        Realtime collaboration

      • Notifications
        Notifications

        Smart alerts for your app

      • Presence
        Presence

        Realtime presence indicators

    • Platform
      • Monitoring Dashboard
        Monitoring Dashboard

        Monitor your product

      • Realtime Infrastructure
        Realtime Infrastructure

        Hosted WebSocket infrastructure

    • Tools
      • Examples

        Gallery of open source examples

      • Next.js Starter Kit

        Kickstart your Next.js collaborative app

      • DevTools

        Browser extension for debugging

      • Tutorial

        Step-by-step interactive tutorial

      • Guides

        How-to guides and tutorial

    • Company
      • Blog

        The latest from Liveblocks

      • Customers

        The teams Liveblocks empowers

      • Changelog

        Weekly product updates

      • Security

        Our approach to security

      • About

        The story and team behind Liveblocks

  • Docs
  • Pricing
  • Ready-made features
    • AI Copilots
    • Comments
    • Multiplayer Editing
    • Notifications
    • Presence
    Platform
    • Monitoring Dashboard
    • Realtime Infrastructure
    Solutions
    • People platforms
    • Sales tools
    • Startups
    Use cases
    • Multiplayer forms
    • Multiplayer text editor
    • Multiplayer creative tools
    • Multiplayer whiteboard
    • Comments
    • Sharing and permissions
    • Document browsing
  • Resources
    • Documentation
    • Examples
    • React components
    • DevTools
    • Next.js Starter Kit
    • Tutorial
    • Guides
    • Release notes
    Technologies
    • Next.js
    • React
    • JavaScript
    • Redux
    • Zustand
    • Yjs
    • Tiptap
    • BlockNote
    • Slate
    • Lexical
    • Quill
    • Monaco
    • CodeMirror
  • Company
    • Pricing
    • Blog
    • Customers
    • Changelog
    • About
    • Contact us
    • Careers
    • Terms of service
    • Privacy policy
    • DPA
    • Security
    • Trust center
    • Subprocessors
  • HomepageSystem status
    • Github
    • Discord
    • X
    • LinkedIn
    • YouTube
    © 2025 Liveblocks Inc.
Blog/Product & Design

Mock up collaborative experiences with the Liveblocks kit for Figma

The Liveblocks Collaboration Kit for Figma provides a set of UI elements to help you visualize what a collaborative version of your product would look and feel like.

, on June 25th, 2024
Mock up collaborative experiences with the Liveblocks kit for Figma
June 25th, 2024·3 min read
Share article

Great products start with great designs, that's why we've created the Liveblocks Collaboration Kit for Figma today. It includes interactive components and styles to design and prototype all kinds of collaborative experiences such as comments, mentions, in-app notifications, multiplayer editing, and more! The components are:

  • Responsive by design
  • Flexible and customizable
  • Optimized for interactivity
  • Production-ready

Responsive by design

It's important that all UI elements work across a variety of devices. That's why we crafted this design kit to leverage Figma advanced layout features so that you can apply this to any part of your product, whether that is a mobile application, a desktop dashboard, or something in between.

Flexible and customizable

The Liveblocks Collaboration Kit for Figma is designed to be fully customizable so that you can craft collaborative experiences that fit your needs and brand perfectly. To customize the components, you can either modify the pre-defined properties in the inspector panel, or manipulate elements directly for full customization.

This enables you to design truly unique interfaces that can work on both light and dark themes, on any kind of product or brand.

Optimized for interactivity

As designers ourselves, we know how important it can be to turn static designs into interactive prototypes so that you can start testing things out with real users before committing any engineering time to specific feature. That's why we made our components interactive with all the different states you'd typically find in a production application.

Production-ready

Using Figma is a great way to envision and explore a collaborative version of your product. What makes Liveblocks special though is that you can easily take what you put together in Figma and turn it into a real production-ready application with a tenth of effort it would normally take.

The UI elements available in the Figma design kit perfectly match the coded pre-built components offered in the Liveblocks React UI library. This enables engineers on your team to bring your design to production in a matter of hours.

FigmaReact
Thread<Thread />
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.

CollaborationCommentsNotificationsText editing

Ready to get started?

Join thousands of companies using Liveblocks ready‑made collaborative features to drive growth in their products.

Book a demo

Related blog posts

  • Mock up AI agents in your product with the Liveblocks Collaboration Kit for Figma

    Mock up AI agents in your product with the Liveblocks Collaboration Kit for Figma

    Picture of Chris Nicholas
    Picture of Pierre Le Vaillant
    August 28th
    Product & Design
  • Rethinking product strategy in the age of AI with Melissa Perri

    Rethinking product strategy in the age of AI with Melissa Perri

    Picture of Steven Fabre
    April 22nd
    Product & Design
  • How to build notifications that encourage collaboration

    How to build notifications that encourage collaboration

    Picture of Marc Bouchenoire
    Picture of Chris Nicholas
    March 11th
    Product & Design