Raga

An interactive Carnatic music experience built with Figma Make to build a raga note by note, and discover which one you created.

project

Figma Makeathon

ROLE

Designer, Prototyper

Partners

Solo

timeline

March 2026 (3 days)

🌿In a nutshell…

Brief: Build the next great interaction design to shape culture as we know it, using Figma Make.

My Challenge: Carnatic music has a deeply complex raga system that most musicians learn from memorization or through dense references. There is no interactive way right now to build and hear a raga note by note and understand what you have created.

Project: I built Raga, an interactive web app where users construct a raga by selecting ascending notes, choose how to descend and hear the completed raga played back, discovering which raga they created in the process.

Built with: React + Typescript in Figma Make for Figma x Contra's Makeathon (both prompting and coding)

Try it here (audio on for the best experience):
https://carnatic-raga-builder.figma.site/

🌿In a nutshell…

Brief: Build the next great interaction design to shape culture as we know it, using Figma Make.

My Challenge: Carnatic music has a deeply complex raga system that most musicians learn from memorization or through dense references. There is no interactive way right now to build and hear a raga note by note and understand what you have created.

Project: I built Raga, an interactive web app where users construct a raga by selecting ascending notes, choose how to descend and hear the completed raga played back, discovering which raga they created in the process.

Built with: React + Typescript in Figma Make for Figma x Contra's Makeathon (both prompting and coding)

Try it here (audio on for the best experience):
https://carnatic-raga-builder.figma.site/

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.

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.

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.

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 significance 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.

Throughout the prompting and creation process, there were some key design decision I made.


🌿Emotional significance 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.

🌿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.

🌿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.

🌿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.

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: two descent options, note choices, and the specific logic for Mohanakalyani. The output was unusable. I rebuilt by pointing to what already worked in the ascent and asking it to mirror that logic backwards.

For visual or sensory, behavior over implementation

Describing what something should feel like worked better than specifying code changes. "The room should feel like it's changing" gave better color transition results than specifying exact values or timing. Given Figma Make is a design tool, this is probably why this approach works well

Simplify scope rather than fight a broken feature

Some bugs reappeared every time a new screen was added, especially smooth transitions. Rather than keep fighting it, I scoped down, limiting transitions to the intro → first note selection and descent → raga reveal only

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

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

Outcome

There are 12 raga paths and an unknown fallback for any combination that does not match with "Your unique melodic path" in the reveal. 3 ragas (Kalyani, Mohana, and Mohanakalyani) have my voice audio playback.

Ragas that are built in:
— Standard ragas (same ascent and descent): Kalyani, Mohana, Shankarabharanam, Hamsadhwani, Khambhoji, Kharaharapriya, Shuddha Saveri

— Variation ragas: Mohanakalyani, Abheri, Bilahari, Bhairavi

This interactive app works on both a laptop and mobile device.

After 3 days of building and recording a demo video for this project, I submitted to the Figma Makeathon competition. I published this prototype to the Figma Community. Here is the link to try it out: https://carnatic-raga-builder.figma.site/

This is the 2 minute demo video I submitted, which includes the backstory and exploration the user could take all in one.

There are 12 raga paths and an unknown fallback for any combination that does not match with "Your unique melodic path" in the reveal. 3 ragas (Kalyani, Mohana, and Mohanakalyani) have my voice audio playback.

Ragas that are built in:
— Standard ragas (same ascent and descent): Kalyani, Mohana, Shankarabharanam, Hamsadhwani, Khambhoji, Kharaharapriya, Shuddha Saveri

— Variation ragas: Mohanakalyani, Abheri, Bilahari, Bhairavi

This interactive app works on both a laptop and mobile device.

After 3 days of building and recording a demo video for this project, I submitted to the Figma Makeathon competition. I published this prototype to the Figma Community.

This is the 2 minute demo video I submitted, which includes the backstory and exploration the user could take all in one.

← Nike
Confluence →

Create a free website with Framer, the website builder loved by startups, designers and agencies.