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
š Introducing EmoLingo ā the world's first emotionally intelligent language translator.
Built for the @Figma x Config Makeathon in 8 days.
The problem:
Every translation app gives you the words. None of them give you the feeling.
"I'm fine." said with love sounds nothing like "I'm fine." said with anger. Text loses that completely.
The solution:
EmoLingo detects the emotion behind your words ā from text OR voice ā and translates with that emotional energy preserved. The entire UI transforms to match the detected emotion.
7 emotion states. 7 visual worlds:
š Joy ā electric yellow, bouncy animations, warm rounded cards
š” Anger ā deep red, screen shake, sharp edges, heavy type
š¢ Sadness ā pale blue, slow drip fade, light font weights
š Love ā blush pink, heartbeat pulse, maximum roundness
šØ Fear ā dark purple, glitch effect, everything trembles
š¤© Excitement ā pure black + neon cyan, electric flash
š Sarcasm ā acid green, full italic, slow eye-roll tilt
The workflow:
Designed entirely in Figma ā screens built with Figma Make and background with Weave ā AI agent used to generate emotion states ā voice input captures tone, speed, pitch and energy to detect real emotion
Honest note:
The full API integration is still in progress so real time translation and voice detection is added but won't translate ā but the design system, concept, emotional logic, and all 7 UI states are fully realized and demonstrated with example translations.
Design is the product here.
The idea solves a real problem for travelers, immigrants, long-distance relationships, business ideas (who want to serve in different languages keeping the translation and design alive) and global teams who lose emotional nuance every time they translate.
This is what it looks like when design carries feeling across languages. ^^
@figma @contraHQ
#ConfigMakeathon #FigmaMake #EmoLingo #UIDesign #EmotionalIntelligence #DesignThinking #Figma:
LINK TO THE DEMO : https://emolingo-app.figma.site/
ā¢ 13h
So cool
Thankss !!
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
Skip the Story, Find the Step (Recipe scrubber)
Recipe videos bury the recipe. So I rebuilt the scrubber: drag, and the frames magnify like piano keys and snap to each cooking step. Built entirely in Figma. Frames in Weave, designed in Figma Design, made real in Figma Make.
https://staff-dish-43356149.figma.site
this just made me hungry
ā¢ Jun 10
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
šØFigma Make - https://www.figma.com/make/onDJsdMQ3PQV2B8xkSzHKn/TheDataTornado
šFigJam Board - https://www.figma.com/board/2P5FGzsc6faOl2a2JK2GDo/TheDataTornado
š»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.
ā¢ Jun 10
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
šŖ Mirror Museum #ConfigMakeathon
Remember that mirror room at every mela and amusement park growing up?
The one where you were impossibly tall, then squished flat, then four of you
staring back. You laughed until it hurt.
Those rooms quietly disappeared. Mirror Museum brings them back. Free. In your browser. Right now.
6 mirrors to try:
āØ Wave ā you are liquid now
āØ Melt ā gravity found your face
āØ Glitch ā you are a broken signal
āØ Inception ā mirrors within mirrors
āØ Multiplied ā the more the merrier
āØ Mandala ā you are the art
Pick one. Snap a photo. Send it to a friend from school. Watch them remember.
Built with @FigmaMake one idea, one day, zero code.
š Try it: Mirror Museum
šØ Figma file: Community
this is so fun!
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?