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
Try yourself
The Idea (problem)
Based on my experience of learning Japanese, memorizing Hiragana and Katakana characters is so hard. Not to mention Kanji. So, I am trying a popular learning 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. I also got bored with it.
Sketching the idea
Then, I turned it into something familiar: Figma. I designed my own flashcard website as a way to memorize them and to do design exploration. One stone, two birds.
Image: My exploration of the practice hiragana site
Final Prototype
A year later, Figma 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 sorts the cards and user can practice their learning. Make it responsive on mobile phones too.
Image: Need 40+ prompting to finish the website
Takeaways
Figma Make is the best option for Designers to bring their creations to life. We don't need to rely on developers or the static prototype anymore.
Instead of jumbling all requirements into a single prompt, the best result is achieved when we ask the system one thing at a time. Create a prompt that focuses on only one section or feature.
AI Design tools really help designers to accelerate workflow and create prototypes in a short time, which can be used to communicate our ideas to stakeholders or clients.
TWO
Journaling App built with Figma Make
Try yourself
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: interactive stars that store submitted words, background music, and a feature requested by a friend that allows users to save the result as a photo for their phone wallpaper.
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.
Although I initially encountered an issue when embedding a YouTube link as background music, it was ultimately just a caching issue.
