Raga
An interactive Carnatic music experience built with Figma Make to build a raga note by note, and discover which one you created.
The Inspiration
Carnatic classical music originated from South India and is something I spent 8 years learning and practicing. I quit in high school, but I loved practicing, because not only did I love singing, I also found Carnatic music to have unique traits that I loved exploring.
One of these concepts that I took into inspiration for this project are ragas. Building this project helped me reconnect back to part of my culture that was untouched for a while.
What are ragas?
Ragas are melodic frameworks, or scales, of notes (swaras). The combination of different notes that are ascending (aarohana) and descending (avarohana) make up a unique raga.
I found ragas fascinating when I was learning Carnatic music, because it felt like a playground discovering which notes make up which ragas, and what songs and compositions come out of those ragas. Each song is derived from a raga that can only be composed with those specific raga's notes in its ascending and descending order.
The Concept
The core interaction is simple: two note choices at each step, building upward. When starting on the downward descent, they can choose to mirror the ascent or create an entire new variation down the line.
At the end of selecting the notes, there would be a reveal screen that reveals the raga name, the notes the user chose both in ascending and descending, and the meaning of the raga. The reveal screen also has an associated color that best evokes the raga's emotion.
Throughout the interaction, the user would be able to hear the notes, such as when they are choosing or listening to the notes (ascending and descending) and in the final raga reveal, where it either plays tones or for 3 of them, my voice.
Design Decisions
Throughout the prompting and creation process, there were some key design decision I made.
🌿Emotional arc as color
The background color was an important way to convey the mood or emotion of a particular raga. The app opens with a dark background before anything has been chosen.
When the user chooses the notes, the background gradually warms from black → deep blue → amber → gold.
The first raga I built was Kalyani, a raga that is usually suitable for the evening that signifies happiness and longing. The raga reveal background is a dark brownish red to match that mood.
The first prompt for the background color was first written as making the background "subtly warm" over time. But the color changes were not as dramatic and significant as I wanted, so I prompted later down the line with "deeply warm and golden, almost fully transformed from the opening cool blue."
In future iterations, I would like it so that the background would smooth towards the raga reveal color, rather than keeping the same trajectory for every raga creation.
🌿Variation of descent
Halfway through creating, the user reaches the descent. At first, I made this automatic by playing the notes in reverse (mirror the descent). But, I realized so many ragas had their own variation in the descent that was different from the ascent.
Giving the user the option to either mirror the ascent or vary it for the descent changes the entire nature of the experience. It unlocked many new ragas, such as Mohanakalyani (a variation of Kalyani), to be explored. Not all ragas can be reached by mirroring, so this gives the option to be creative with descent.
🌿Audio
The app uses audio in two distinct ways. During note selection, each swara plays a synthesized tone, which is a clean generated pitch that lets you hear the note in isolation without distraction.
For 3 of the ragas, instead of the synthesized tones, the notes play alongside my voice recordings. I intentionally switch from the synthesized notes to a human voice because I wanted to showcase how ragas are beyond scales of frequencies and generated. If I had time, I would have included my own voice for all the ragas I put in.
🌿Surprise Me button
This feature was a late prompt addition to the project. As I was testing this with a few family members and friends, I realize that because I only have 12 ragas (out of thousands), so it was possible that hitting random notes will lead them to an "unknown raga" which consists of their own melodic path. But there would be a point where the user would actually want to create an actual raga from the 12 I encoded in.
The "Surprise Me" button is an option alongside "Start building" and would autoselect the ascending notes. As of right now, this option also chooses to mirror the notes in its descent too to reach 8 of the 12 ragas built in. This was due to limited amount of Figma Make credits. In future iterations, I would add in the other ragas with variation descents to be inclusive of all the ragas.
Below is a recording of the "Surprise Me" button in action.
Prompt Learnings
This was my first time building with Figma Make and solely through prompting (with a little bit of code tinkering). I also used Claude to help out with creating prompts to put into Make. These are some of the learnings I had while prompting the Make tool.
When scope got too wide, things broke
When I first built the descent system, I asked for too many things at once: providing two options for descent, the two choices of notes, and the specific descent (and ascent) needed for Mohanakalyani. The output was unusable, so I had to rebuild much of it from scratch. I pointed to something it already implemented with the ascent and asked it to repeat the same logic, but backwards (mirror the ascent)
For visual or sensory, behavior over implementation
For visual and sensory prompts, describing what something should feel like worked better than specifying code changes or how to achieve it logically. For example, with the background color changes, prompting "The room should feel like it's changing" gave better results than trying to specify exact color values or timing of the transitions. Given Figma Make is used for design, this is possibly the case why it works so well
Simplify scope rather than fight a broken feature
Some bugs reappeared every time a new screen was added, especially with the smooth transitions. I wanted each of the screens to transition nicely from the intro to each particular note selection all the way to the raga reveal, but more times the transition feature was broken. So I instead limited to transitioning from the intro to the first note selection and then the last note selection of the descent to the raga reveal screen.
Knowing the domain helps
The D2/N2 frequency bug was something manual I went and fixed in the code. I knew it was off when listening to this particular pitch and changed the values myself, and I knew where in the code that I had to change it. This helped me save some credits but also it was a lot faster than configuring a prompt at that exact particular moment of the prototype to change its frequency.
What I would build next
Due to the constrained competition time and limited Figma Make credits, there are some features I did not have time to iterate and design, but would in the future
More ragas via a database
I would connect my tool to possibly a Carnatic raga database so that the tool has access to thousands of ragas, rather than the limited 12 ones it holds right now.
Surprise Me works with variation descents
Right now, the Surprise Me button only leads the user to ragas that have the same notes in its ascent and descent. For future iterations, I would also code in ragas that have the variation descents to be part of the surprise pool as well.
Added note logic
Right now this tool supports ragas that have individual unique notes in its ascent and descent. But there are many ragas that might oscillate between two notes (ex: M2 D2 M2 N2 S). Adding this logic would help unlock even more ragas and note choice options for the user to have
Voice recording playback for more ragas
I have my own voice play for 3 of the ragas, but I would love to add to it for as many more as possible, especially ragas I practiced on for a long time. Carnatic music is music meant to be listened through human voice, and this adds a touch of my personality in this project