How would you build a Figma clone?
Hey everyone , i hope you are doing great.
i was looking for blogs on how to build a Figma clone (just for educational purposes), i couldn't find any. if you can recommend some tutorials , or the stack that you would use for such project.
Thanks
Hey Deviloper! I'm late to the party, sorry, but I'd like to know where you're at with your Figma clone? I noticed that you have considered Liveblocks, so you might have seen a few months after, but we released an open source example of an advanced collaborative whiteboard, which I believe would be the best first step to build your educational workshop (?)
You can check it here: https://liveblocks.io/examples/collaborative-whiteboard-advanced/nextjs
Please let me know what you thought, and if you think it's cool, but you'd like more, go check the other examples
With Next.js and Liveblocks, you can basically build any [Figma for X]. We have lots of customers building Figma for video, Figma for architecture, Figma for notes, Figma for civil engineering, and more.
It's pretty straightforward to get started: if you know how to use React useState, then you'll be able to build advanced multiplayer apps in the browser just like Figma.
I recommend checking out this step-by-step guide: https://liveblocks.io/docs/tutorials/collaborative-online-whiteboard/react
Hope this help, and can't wait to see what you all create with this :)
Are you interested in the whole stack or some specific bits? I think a project like this can grow quite big, so all shortcuts you can make is probably good. To begin with, I would use a well known frontend library like React, as they have good open source libraries for canvases. Drawing, zooming, pinching etc is harder than it looks :)
For the collaboration you probably want to communicate with websockets, so any backend that works well with this would work. Data in systems like figma probably use a CRDT representation to keep the state between users synchronized and conflict-free, so I recommend learning about these a bit.
I was gonna send you a private message, but couldn't figure out how. If you want to think as little as possible about the backend, syncing data and deploys - I would be down to help each other out. I am at the very early stages of developing a platform called Allotize for collaborative apps and am looking for feedback on the overall API design.
I would be able to guide you through setting up real-time collaboration in exchange for some feedback on this :)
What are your opinions on
https://github.com/yjs/yjs
https://liveblocks.io/
https://replicache.dev/
https://github.com/microsoft/FluidFramework
I'm looking at adding collab features so always interested in it.
For https://allotize.com/ how many MB can you store? (some seem to be limited to 1mb/10mb atm).
So many of the available solutions are just CRDTs and CRDTs aren't very hard on their own, so I don't see why you would pay a premium for it. Using yjs directly seems appropriate as it's open source and mature. Most of the solutions require you to deploy some servers anyway, so in my opinion the paid versions don't really add any more value. I guess liveblocks would be a good choice if you don't want to manage any servers however.
With Allotize we have a slightly different approach in that it's a complete client-side database solution. For the db to work well in a real-time environments we plan to have a limit of 400kb/item, but no limit in total size. This makes it more RAM and I/O friendly. I don't see why you would want bigger items as performance would really suffer. It's more appropriate with a blob storage and locks for synchronization in these cases.
Thanks for the answer it's really helpful, i was more interested in the frontend part of the stack, but the data structure seems interesting too. we can talk using twitter or discord if you use any of them.
Sure! What's your handle?
This comment was deleted 5 years ago
They have blog posts on their site.
i am gonna check that out , thanks.