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
My submission for Config Makeathon!
Live code music tools like Strudel are powerful — but they assume you already know how to code. For anyone without that background, the barrier to play is real.
So I built Cymatics Resonance 🎉 — a node-based synthesizer that makes music creation accessible and fun to everyone. Connect nodes, dial in your sound, and experiment with presets. Watch how your music turns into patterns in the Music Visualizer. No code required — just play🔥
Figma Link: https://dirt-lend-67924993.figma.site
Workflow: Claude ↔ Figma Make → MCP → Figma Design & Agent
Tech stack:
1. Figma Design & Agent: Designed mockups, layouts, UI components, and tokens — all within the Figma stack.
2. Figma MCP: Connected my Figma file directly to AI agents for implementation and production handoff.
3. Figma Make: Validated product feasibility early, then used it to iterate and build toward the final product.
4. Claude: Owned the hard logic — audio engine, node-graph architecture, and visualizer. Also provided reference code, wrote step-by-step prompts for Make, and kept the debug loop tight.
this is so rad
Thank you @Dylan Siegel. I hope you have a lot of fun playing the product😊
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
Did you know a tornado formed the year you were born?
Not a real one. A data one.
Type your birth year. Watch the storm react - the speed, the color, the rage of it - all driven by the exact CO₂ levels recorded that year.
🌪️Live Site - https://thedatatornado.figma.site
💻GitHub Repo - https://github.com/isumenuka/Thedatatornado
🔬 The Problem
Climate change is the most documented crisis in human history. Scientists have been collecting data for over 65 years. But most people feel nothing when they see the numbers - because a wall of data doesn't make you care. That is a design problem. The Data Tornado is my answer.
⚙️ How It Was Built
I started in FigJam - mapping the full app structure, severity color system (Stable → Elevated → Critical → Extreme), and the 65-year climate timeline before touching any build tool.
In Figma Make, I loaded my complete design guidelines first - colors, fonts, spacing rules - so every generated output matched my vision from the first prompt. That one step eliminated hours of corrections.
The MCP connector was the most critical technical piece: a custom live pipeline to NOAA's servers, pulling real CO₂ and temperature readings automatically every time someone opens the app. No downloading. No pasting. Always live.
The hero background video was generated entirely in Figma Weave - I set a start frame and end frame, and Weave generated the full atmospheric storm footage between them. The Figma Agent handled precision edits throughout -clicking directly on individual elements, repositioning buttons, aligning sections, without touching anything else.
Supabase powers the share cards, news gallery, and live data caching. GitHub handles deployment.
🛠️ Tools Used
→ FigJam: full app structure, severity system & data flow diagrams
→ Figma Make: prompt-to-code app with custom NOAA MCP connector
→ Figma MCP: live pipeline direct to NOAA's climate API
→ Figma Weave: AI video generation for the hero storm background
→ Figma Agent: precision element-level UI edits throughout the build
→ Supabase: backend for share cards, news & data caching
→ GitHub: deployment and version control
✨ Key Feature - Birth Year Telemetry
Enter your birth year. The app instantly generates your personal climate log -the exact CO₂ concentration the year you arrived in the world, your temperature anomaly then vs. now, your severity level at birth vs. today. It stops being a global statistic. It becomes yours.
Most people go quiet when they see their own number.
What happened on the day you were born? Share your link in the comments!
THIS IS MINE - https://thedatatornado.figma.site/?share=d9844bb7-12d7-4c5a-94e8-ebd84ade9f8b
🔗 Try Live:
https://oculus-last-45120554.figma.site
🔗 Figma Community: https://www.figma.com/community/file/1646335128776764074
━━━━━━━━━━━━━━━━━━━━
Introducing Rangoli Studio 🌸
Every morning my mother draws Rangoli
on our doorstep in Bengaluru.
I always watched but could never
recreate her art.
So I built Rangoli Studio —
where anyone can create traditional
Indian Rangoli patterns dot by dot.
THE PROBLEM:
Traditional Rangoli art is disappearing
in the digital world. No tool existed
to experience this 5000 year old tradition.
Until now.
HOW IT WORKS:
✨ Choose your favorite festival
✨ Follow the dot guide
✨ Connect dots to build your pattern
✨ Pour the Powder to celebrate
✨ Download and share your creation
BUILT WITH:
🛠 Figma Make
🛠 Figma Weave
🛠 Prompt engineering — zero coding
#ConfigMakeathon #RangoliStudio @figma
I built a social network that tells you to touch grass. 🌱
It's called Touch Grass.
Try it yourself ↓
https://buffet-crayon-23938188.figma.site/
Technology keeps moving us forward, but it also keeps us glued to screens. So I wanted to build something that gently pushes in the opposite direction.
Every user gets their own planet.
Upload photos you've taken in nature and watch your world come back to life. Miss a few days and it slowly starts fading again.
Every planet belongs to a real person. Explore the galaxy and discover worlds that other people are growing through their own photos and memories.
Built the entire thing in @Figma Make.
Made for the @contra x @Figma #ConfigMakeathon
X Link: https://x.com/russ_seid/status/2064573470357500338?s=20
Linkedin Link: https://www.linkedin.com/posts/rustem-seidametov_configmakeathon-contra-makeathon-ugcPost-7470339571613040641-vVp0/?utm_source=share&utm_medium=member_desktop&rcm=ACoAADKBObkBHA2DOG2-JkJBzSGYJVlLfkAV4B4
Project Link: https://www.figma.com/make/0WW9byuQ0tDSPy4RY19p00/Touch-Grass?t=GS2PE7diSOrtYCW4-1
Niceeeee
Challenges
View all
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?