vladdg-dev / figma

Figma App | A collaborative interface design tool | Powered by Next.js, TypeScript, Liveblocks, Fabric.js, Shadcn, and Tailwind CSS

Figma Clone 🎨

Welcome to Figma Clone, a minimalistic yet powerful web application designed to showcase real-world features like live collaboration, comments, reactions, and drawing designs on the canvas using fabric.js. Dive into the world of collaborative design and unleash your creativity with our feature-rich platform.

Tech Stack ⚙️

• Next.js: Web application with the power of server-side rendering and efficient routing.
• TypeScript: Type safety and improved code quality.
• Liveblocks: Enable real-time collaboration features with Liveblocks, facilitating simultaneous editing and communication.
• Fabric.js: Utilizes the robust canvas library for creating and manipulating designs with ease.
• Shadcn: Visually stunning and responsive designs effortlessly with the power of Shadcn.
• Tailwind CSS: Beautiful, customizable designs quickly with the utility-first CSS framework.

Features 🔋

Explore the rich feature set that makes Figma Clone a must-have tool for designers and collaborators:

• Multi Cursors, Cursor Chat, and Reactions: Collaborate seamlessly with multiple users by displaying individual cursors, enabling real-time chat, and reactions for interactive communication.
• Active Users: Stay informed about currently engaged users with a list of active participants in the collaborative environment.
• Comment Bubbles: Provide feedback and communicate effectively by attaching comments to specific elements on the canvas.
• Creating Different Shapes: Generate a wide variety of shapes on the canvas to add diversity to your designs.
• Uploading Images: Import images onto the canvas to expand the range of visual content and enhance your designs.
• Customization: Customize the properties of design elements to fine-tune and personalize visual components.
• Freeform Drawing: Express your creativity with freeform drawing tools, allowing for artistic expression and innovative designs.
• Undo/Redo: Maintain control over your design decisions with the ability to reverse or restore previous actions effortlessly.
• Keyboard Actions: Increase efficiency and accessibility with keyboard shortcuts for various actions, enhancing productivity in design workflows.
• History: Review the chronological history of actions and changes made on the canvas to aid in project management and version control.
• Deleting, Scaling, Moving, Clearing, Exporting Canvas: Manage design elements efficiently with a range of functions, including deletion, scaling, moving, clearing the canvas, and exporting final designs for external use.

Explore the limitless possibilities of collaborative design with Figma Clone. Start creating and collaborating today! 🚀