FIGMA-CLONE

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

(★ 32)

Introducing a real-time Figma Clone project crafted with Next.js, TypeScript, Liveblocks, Fabric.js, Shadcn, and Tailwind CSS. This collaborative design platform empowers users with multi-cursor functionality, real-time chat, reaction expressions, active user monitoring, comment annotations, shape creation, image integration, and more...

FIGMA-CLONE Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Real-time Figma Clone 🎨

Welcome to the real-time Figma Clone project! This project aims to replicate the functionality of Figma with real-time collaboration features using a stack of popular technologies including Next.js, TypeScript, Liveblocks, Fabric.js, Shadcn, and Tailwind CSS. 🚀

## Features ✨

- **Multi Cursors**: See where other users are editing in real-time.
- **Cursor Chat**: Communicate with collaborators through cursor chat.
- **Reactions**: React to changes and collaborate with expressive reactions.
- **Active Users**: See who else is currently editing the canvas.
- **Comment Bubbles**: Leave comments and annotations directly on the canvas.
- **Creating Different Shapes**: Draw and create various shapes on the canvas.
- **Uploading Images**: Easily upload images to the canvas for reference or design elements.
- **Customization**: Customize elements and shapes according to your design needs.
- **Freeform Drawing**: Sketch and draw freely on the canvas.
- **Undo/Redo**: Easily undo or redo actions to fine-tune your designs.
- **Keyboard Actions**: Perform actions quickly using keyboard shortcuts.
- **History**: View the history of changes made on the canvas.
- **Deleting**: Remove unwanted elements from the canvas.
- **Scaling**: Scale elements for precise adjustments.
- **Moving**: Easily move elements around the canvas.
- **Clearing**: Clear the canvas to start fresh.
- **Exporting Canvas**: Export your designs for further use or sharing.

## Hotkeys 🎹

- **/**: Open live cursor chat
- **e**: Open reactions
- **esc**: Close
- **ctrl+z**: Undo
- **ctrl+y**: Redo
- **ctrl+c**: Copy
- **ctrl+v**: Paste

## Quick Start 🚀

To get started with the real-time Figma Clone project, follow these steps:

1. Clone the repository to your local machine:

```bash
    git clone https://github.com/your-username/figma-clone.git
    ```

2. Navigate to the project directory:

```bash
    cd figma-clone
    ```

3. Install dependencies using npm:

```bash
    npm install
    ```

4. Set up environment variables:

```bash
    NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY=your-liveblocks-public-key
    ```

5. Run the development server:

```bash
    npm run dev
    ```

6. Access the application by visiting [http://localhost:3000](http://localhost:3000) in your web browser.

**Note:** Ensure you have obtained a Liveblocks public key from the Liveblocks dashboard and replace `your-liveblocks-public-key` with your actual key.

## Project Structure 📂

- `pages/`: Contains Next.js pages.
- `components/`: Reusable React components.
- `styles/`: Styling files using Tailwind CSS.
- `public/`: Static assets.
- `utils/`: Utility functions and configuration files.
- `lib/`: Library files and integrations (e.g., Liveblocks).

## Credits 🙌

A heartfelt thank you to [Adrian Hajdin](https://github.com/adrianhajdin) for inspiring and guiding us in the creation of this fantastic and fun project!

## Contributions 🌟

Contributions to the real-time Figma Clone project are welcome! If you find any issues or have suggestions for improvements, please open an issue or submit a pull request on GitHub.

Thank you for using and contributing to the project! Happy designing! 🎉

FIGMA-CLONE

FIGMA-CLONE Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

FIGMA-CLONE

FIGMA-CLONE Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README