Vibe Coding Projects
These are projects that I built for fun and to answer my curiosity of what all of these AI Design tools could do and how the best way for designers to use it.
ONE
Interactive Learning Japanese Characters built with Figma Make
The Idea (problem)
Based on my experience of learning Japanese, memorize Hiragana and Katakana characters is so hard. Not to mention Kanji. So, I am trying a popular memorization technique, flashcards. I cut an A5 paper into 8 pieces, then wrote the letters on both sides.
They are so fragile and easily lost. It also requires manual sorting.
Sketching the idea
I turned to something familiar: Figma. I designed my own flashcard website as a way to memorize them and to do design exploration.
Image: My exploration of the practice hiragana site
Final Prototype
Figma just launched Figma Make. It sparked an idea to transform my design into a live prototype. I attached the Figma design and asked Figma Make to do its magic.
I also added the practice feature, where system randomly sorting the card and user can practice their learnings. Make it responsive on mobile phone too.
Image: Need 40+ prompting to finish the website
TWO
Journaling App built with Figma Make
The Idea
The idea comes from the activity that I always do, sitting in quiet reflection on nature while looking up at the sky. In Islam, that's also called Tafakkur. At one point, I just whispered my hope to the sky. Some words are never meant to be spoken.
This project is my submission for #FigmaMakeAThon 2025. I intended to build a website without creating the design in Figma beforehand.
Work with 2 AI Design Tools
I got the idea, it must have a nature vibe, which is the sky. It's like we share our thoughts with it. I asked ChatGPT to generate the background for me.
Image: Ask ChatGPT to create the background image
Then, I started turning my ideas into prompts in Figma Make. During the process, I added a few new features: users can revisit their submitted words, add background music, and a special request from my friend to save it as a photo to set as their phone background.
Image: Make sure it is mobile web responsive as well
While working on this project, Figma provided Pro access during the event, which was incredibly helpful. I didn’t have to worry about running out of AI credits, and it made the whole process much faster.
