Figjam Inspired Toolbar
I love the fun toolbars that we see in Figjam, apple notes, and other apps. So I wanted to study and build one of my own, especially the washi tape tool!
Updated 7 months ago
Vibe CodedInteraction Design
For the entirety of this note, when I say I "added to my code" it means I asked cursor to do it. FYI, my code literacy is still developing. I completed the CS50: Introduction to Computer Science course in 2024 which was quite challenging for me but I learned to read code enough that not ALL of it looks like gibberish to me now. I am trying to go deeper and become more code literate everyday by asking questions when I vibe code, looking for solutions when LLMs can't debug something in cursor, taking courses and by reading books/blogs.
Toolbar Component
Inspired by Figjam's toolbar, I started by designing my own version in Figma. Once I was satisfied with the design, I set up my Cursor environment and shared the designs with it. Through this process, I learned that I needed to export each tool icon as a separate SVG file to enable color selection and smooth animations between different tool states.Creating SVGs for each tool and their variants
• Marker tips: I have two types of tips for the marker tool. To switch between these variants, I created separate SVGs for each tip type, added them to my code, and defined the transition animation for switching between them.• Image Frames: I applied the same process to create different frame variants for the image tool. Each frame style (rounded, square, polaroid) has its own SVG with customizable stroke widths and colors to match the selected tool state.• Washi Tape: This is my favorite tool, it's so fun! I exported a plain SVG base for the tape tool and used Hero Patterns for the washi tape design options. I provided Cursor with links to my selected patterns and had it generate the washi tape variants. I then fine-tuned the pattern mapping for any that appeared too large or small.Implementing tools on canvas
Building on the toolbar component, I made all the tools functional on a canvas using Cursor. While these tools don't work too smoothly yet and still have bugs to resolve, I'm amazed at how far this prototype has come through AI-assisted development.The initial implementation was straightforward, but I quickly encountered complex issues, as often happens with vibe coding. I'm sure an experienced developer would find fundamental issues with my codebase. Moving forward, I need to develop a deeper understanding of the underlying code to tackle these challenges and implement more robust solutions. Try it yourself in the prototype below.