Finn/figma-clone

A browser design tool inspired by Figma/Canva

About

I built a web app inspired by Figma, using Next.js 15 and Konva.js for the canvas engine. Implemented a custom drawing and selection system that supports different shapes with transform handles for moving/resizing/rotating, and added a functioning properties bar that lets you edit the fill, stroke, corner radius and opacity. I included a simple layers panel with real time sync to the canvas. The backend was built with Postgresql, with a type safe api layer using tRPC.

TypeScriptReactTailwindKonva.JStRPC

Demo

Highlights

  • Infinite canvas built on Konva.JS with panning and zooming
  • Shape and drawing rendering with selecting and transform functions to resize, reshape and rotate
  • A functioning properties and layers sidebar
  • Save/load of the canvas state through a type safe tRPC layer backed
  • Fully authenticated pages using Clerk