Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

Build and Deploy a Figma Clone with Real-Time Collaboration

JavaScript Mastery via YouTube

Overview

Google, IBM & Meta Certificates — All 10,000+ Courses at 40% Off
One annual plan covers every course and certificate on Coursera. 40% off for a limited time.
Get Full Access
Learn to build a Figma clone with advanced features including real-time collaboration, cursor chat, comments, reactions, and design creation using Fabric.js and Liveblocks. Master the implementation of live cursors, reactions, active user tracking, and canvas manipulation. Explore the development of toolbars, shape menus, and real-time features. Dive into history management, undo/redo functionality, image handling, and customizable sidebars. Implement dimension and text settings, color customization, PDF export capabilities, and a comment system. Enhance the user experience with a custom context menu and address free drawing and TypeScript type issues. Conclude by setting up developer tools and deploying the finished project.

Syllabus

- Intro
- Setup
- Liveblocks
- File Structure & Shadcn
- Live Cursors
- Reactions
- Active Users
- Sidebars
- Canvas
- Toolbar & Shapes Menu
- Real-Time Feature
- History Feature
- Undo & Redo
- Images
- Right Sidebar
- Dimensions Settings
- Text Settings
- Color Settings
- Export to PDF
- Comments Bubble
- Custom Context Menu
- Free Drawing Fix
- TypeScript Types Fix
- Dev Tool
- Deployment

Taught by

JavaScript Mastery

Reviews

Start your review of Build and Deploy a Figma Clone with Real-Time Collaboration

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.