The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Doodle & Beats - Where Every Child's Drawing Becomes a Song
Not an app to learn from. An app to have fun with.
Kids always want fun and joy in everything they do.
But today — they're addicted to phones. Watching
unwanted stuff. Scrolling endlessly. And parents
can't do anything about it.
That broke my heart.
So one idea came to my mind -
Why can't doodle and music come together?
That's why I made Doodle & Beats.
──────────────────────────────
THE IDEA
──────────────────────────────
There's nothing to learn here.
No lessons. No rules. No tutorials.
Kids just draw - any color, any shape,
anything they imagine.
And that drawing becomes their own beat.
Their own song. Unique only to them.
Red is drums.
Blue is guitar.
Yellow is piano.
Green is violin.
Pure joy. Pure creativity. Zero pressure.
──────────────────────────────
THE MAGIC MOMENT
──────────────────────────────
Here's the best part,
Kids draw on REAL paper first.
Crayons, markers, pencils - anything.
Zero screen time while creating.
The screen is only for the magic moment,
when their drawing comes alive as music.
That's the whole experience.
Draw it. Scan it. Hear it.
──────────────────────────────
WHAT PARENTS GET
──────────────────────────────
✅ Screen time limits - set daily drawing time
✅ Kids get a friendly nudge - not a hard stop
──────────────────────────────
WHAT KIDS GET
──────────────────────────────
🎨 Draw on paper and scan it → instant music
🖍️ Draw live on screen → hear beats in real time
🎬 Download both together as an MP4 - their drawing animated with their music
──────────────────────────────
HOW I BUILT IT
──────────────────────────────
100% built in Figma Make.
No code written by hand.
Pure design to build - idea to live product
entirely inside Figma.
Every section is interactive and functional -
the scan flow, the live canvas, the music player,
the download options, the parent screen time
controls, the community gallery.
From zero to live product in one day.
──────────────────────────────
WHY THIS MATTERS
──────────────────────────────
Every child deserves to feel like an artist
AND a musician.
Not by learning scales.
Not by following tutorials.
Just by picking up a crayon
and drawing whatever they feel.
Doodle & Beats turns that simple act
into something magical.
That's the problem I wanted to solve.
That's why I built this.
──────────────────────────────
TRY IT
──────────────────────────────
Live Link: doodle-&-beats
Social Post: doodle-&-beats
Built with Figma Make for #ConfigMakeathon
By Nivetha M S — UX Designer, Tamil Nadu, India
This is so fun!
Glad you're enjoying it!
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
So I'm dropping my submission: Caelumi :)
Every scroll reveals a moment in time. A story we almost forgot.
It's a scroll-driven exploration of culture, where the interaction
is the narrative.
What I love: building something that feels right, not just works.
That's vibe coding to me.
Let's inspire each other. What are you building?
This is lovely. Did you use figma weave to create the submission video?
I wanted to build a Sci-fi HUD creation tool with plenty of customization options.
So I built the SINGULARITY HUD CREATION TOOL
Live site: https://singularityhud.figma.site/
GitHub Repository: https://github.com/nytrite/SingularityHudCreationTool
SINGULARITY is a notch web-based studio for making cool animated graphics, technical drawings, and futuristic interfaces.
It works in your browser and uses special technology to make smooth animations.
The studio has a professional look, with a dark theme, orange accents, and a clean, simple design.
This makes it easy for designers to create and animate graphics and export them in a ready-to-use format, such as MP4.
The tool is great for making all sorts of graphics from animated user interfaces to schematics and cinematic sci-fi interfaces.
It uses an animation engine that makes everything look smooth and realistic.
With SINGULARITY, designers can make high-quality motion graphics and HUDs quickly and easily.
My process:
Pen and paper → Figma make → Using Figma make to generate ideas → Prompting it out as perfectly as I can get it to work → Connected to Supabase → Deployed
Thank you!
Pip is a zero-friction health companion built to turn tracking your health (SYMPTOMS, DIET AND MORE) into clinical clarity. It abandons rigid 0–10 numeric scales and replaces them with a compassionate, glanceable interface.
❤ Why It Was Built
Pip was born out of pure personal necessity. I built it because it was something I desperately needed, and something a few close friends and someone incredibly close to my heart needed too. I wanted to strip away the clinical coldness of modern software and create something beautifully simple that could be truly, deeply helpful on someone's hardest days
⚠️ The Problem
Traditional health apps suffer from "Data Collection Theater." They force users suffering from chronic illness or fatigue to rate dozens of variables daily, causing severe decision fatigue.
Worse, they act as data sinks, dumping raw, chaotic charts onto doctors. In a high-stakes, 15-minute medical consultation, physicians don't have the time to audit raw logs. They need high-yield, synthesized clinical signals, not noise. Pip bridges this gap by assuming "bad days are the default," capturing symptoms effortlessly, and compiling them into a clean, one-page summary sheet.
🛠 The Figma Workflow Pipeline
To bring Pip to life, I leveraged the Figma ecosystem:
Figma Weave: Used to iterate and generate the visual asset layers for Pip’s mascot.
Figma Agent: Brainstormed layouts directly on the canvas, instantly pairing elegant fonts and organizing simple, stress-free forms.
Figma Make: Instantly turned those canvas designs and components into a live, fully working, and responsive web application while allowing rapid iteration.
Trending
Claude
Claude has entered the design space. How are you using Claude Design?
Contra University
Learn from expert creatives how to earn more using next-gen AI tools.
MagicPath
The canvas is infinite, and exploration is becoming the workflow. How are you using MagicPath?
creativeaiflow
Creative AI workflows are evolving. What tools do you use, and what are their strengths and weaknesses?
freelancerlife
Freelancer life is wins, pivots, and everything in between. What’s yours right now?