Contra - A professional network for the jobs and skills of the futureDiscover

Standout projects

Standout projects

More projects we love that are making waves across the web
Cover image for Found Type - A living
Found Type - A living alphabet, found in the wild Found Type is a collaborative web app where people photograph letters of the alphabet found in the real world - on walls, signs, buildings, packaging, pavements - and together build a living typeface made entirely by the world. The premise is simple: letters are everywhere. Every one of them is a design decision made by someone, somewhere. Found Type turns that into a collective archive. Try it here: https://slogan-noise-47844386.figma.site/ ✨ The experience - A pannable, zoomable canvas of every submitted letter - alive and growing in real time - Browse the full alphabet: each letter a mosaic of real-world finds from around the world - Type any word and see it spelled out in found letters - Submit your own: photograph, crop, tag, and your letter is live in seconds ⭐ What makes it different: No accounts. No friction. One flow, one purpose. The more people contribute, the more beautiful it becomes. 📍 How it was built: - The entire front-end was built in Figma Make, prompt by prompt, iterated screen by screen. - The submission flow uses the Anthropic Vision API to validate every photo: confirming it shows a real letter, checking the tag matches, and generating a plain-English description stored in Supabase for moderation - meaning the collection stays clean without user accounts or manual review of every submission. - Image processing happens entirely client-side via the Browser Canvas API: crop, resize to 800×800, compress - before anything reaches Supabase storage. 🛠️ Tools used - Figma Make - full front-end - Anthropic Vision API - AI validation + moderation - Supabase - real-time database and image storage - Browser Canvas API - client-side image processing 🔮 What's next - A downloadable font made entirely from submitted photos. - Filters by country, colour, style. - A printed poster of the full collection. - Contributor profiles.
5
32
692
Cover image for I watched Apple's 108-second event
I watched Apple's 108-second event (https://www.youtube.com/watch?v=mO8zBQqpTmY)recap and couldn't stop thinking about one thing. No voiceover. No presenter. Just words, motion, and rhythm. Short sentences. Each one a beat. The entire year of Apple products - described in 108 seconds through kinetic typography alone. That moment became TypeDeck. The idea: What if After Effects had a baby with PowerPoint - and it was actually simple enough for anyone to use in minutes? No timeline. No keyframes. No layers. Just write your script and watch it become a film. I Built the entire app UI and animation engine from prompt to code. The behavior-based animation architecture, the script editor, the rhythm strip, all of it with use of Figma Make. What TypeDeck does: → Paste your script — every sentence auto-converts into an animated scene. → Copy a style with Ctrl+C, paste it across every slide with Ctrl+V. → Hook accent words with asterisks — they get a color treatment automatically. → Apply flat color, gradients, or drop in images and video as backgrounds. → Export and import projects. Built-in music. Everything in one place. The problem it solves: After Effects has a learning curve measured in months. Canva has templates but no motion depth. There's nothing in between that gives a founder, marketer, or creator the ability to make a genuinely beautiful motion video in under 20 minutes - until now. TypeDeck is free to use. Start to create your stunning videos today. https://www.figma.com/make/oK7XsVbAKpa4LulmGxJ5Py/TypeDeck?t=sKtdidrjE34hmLjQ-20&fullscreen=1 Video Demo: https://www.loom.com/share/6d621cc245094653baef910544523072
4
9
258
Cover image for I built Interactive Earth History
I built Interactive Earth History Explorer for the Config Makeathon. Interactive Earth History Explorer The web app allows users to travel through Earth's history by scrolling through a timeline and interacting with a 3D globe. Users can explore: Geological eras and major Earth events The evolution of life on Earth Ancient civilizations and historical milestones Important locations associated with historical events Multimedia content such as images, animations, and descriptions ————————— Target Users Students and educators History enthusiasts Parents looking for interactive learning tools ————————— Traditional methods of learning history and geology are often: Text-heavy and difficult to visualize Presented as static timelines that lack interactivity Disconnected from geographical context —————————— Solution The web application provides an immersive and interactive learning experience by combining: 🌍 Interactive 3D Globe, 📅 Scrollable Timeline, 🖼 Rich Content Cards, ✨ Immersive Storytelling ———————— 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 Figma server → Deployed live site : https://lnkd.in/g7RFUR5t linkedIn: https://www.linkedin.com/feed/update/urn:li:activity:7472165990609395712/ instgram: https://www.instagram.com/p/DZmUh02B00jNwRs_o52NLXGX_0Ctl0j5MCfbkU0/ #ConfigMakeathon (https://www.linkedin.com/search/results/all/?keywords=%23configmakeathon&origin=HASH_TAG_FROM_FEED) #contra (https://www.linkedin.com/search/results/all/?keywords=%23contra&origin=HASH_TAG_FROM_FEED) #figma (https://www.linkedin.com/search/results/all/?keywords=%23figma&origin=HASH_TAG_FROM_FEED) #ux (https://www.linkedin.com/search/results/all/?keywords=%23ux&origin=HASH_TAG_FROM_FEED) #AI (https://www.linkedin.com/search/results/all/?keywords=%23ai&origin=HASH_TAG_FROM_FEED) #figmakethon (https://www.linkedin.com/search/results/all/?keywords=%23figmakethon&origin=HASH_TAG_FROM_FEED)
19
19
764
Cover image for For the #ConfigMakeathon, I created
For the #ConfigMakeathon, I created Book Trace. It is a reading journal app that helps you capture thoughts while you read, and leave a personal trace when you finish. [Concept] Book Trace turns the experience of reading into something you can hold onto. Instead of forgetting what a book meant to you, you leave a Trace — one sentence, one emotion, one word. The app also reads what you wrote and tells you what kind of reader you are, with book recommendations matched to your type and genre. [Project Overview] For this submission, I designed: - Onboarding flow; - Still Reading experience with in-the-moment note capture; - Finished flow with the full Trace journey; - Reader Identity system with personalized recommendations; - Library with saved traces; - UI Kit and design system. [Workflow] I built the full product from concept to prototype in Figma. UI Kit, component library, and interactive flows all in one file. [My Experience] What I loved most about this challenge was how it pushed me to think about the full user journey, not just screens, but emotions. Book Trace started as a simple idea and grew into something that feels genuinely personal. Figma made it possible to move from rough concept to polished prototype without ever leaving the workspace. Thank you to the Figma team for a challenge that made me build something I actually want to use! Live project (https://www.figma.com/make/23Yu62OGQJ8EGDXGLiN0Pz/Book-Trace-app?p=f&t=BpeTyIoaziCOLDGL-0)LinkedIn post (https://www.linkedin.com/feed/update/urn:li:activity:7472198836690673665/)Community link (https://www.figma.com/community/file/1648254666469280809) If this resonates with you, a like, comment goes a long way. Thank you 🙌
19
42
1.8K
Cover image for FrameOrbit — Config Makeathon Submission
FrameOrbit — Config Makeathon Submission 📸🌀 Sharing second project for the Config Makeathon: FrameOrbit. https://cedar-thaw-04755246.figma.site/ Project published to the community. FrameOrbit is a playful camera canvas experience where taking photos feels more spatial, visual, and alive. The idea started from a simple question: What if captured photos didn’t disappear into a hidden gallery, but stayed around your camera as part of the experience? In FrameOrbit, the camera view sits in the center of a soft canvas. Every time the user captures a photo, it instantly appears as a framed image around the camera. As more photos are taken, the canvas starts to build a visual orbit of moments around the live camera view. Users can: Capture photos directly from the center camera frame See each image appear instantly around the canvas Apply different photo styles like Normal, Noir, Warm, Cool, Vivid, Fade, Retro, and Neon Drag photos around the canvas Tap any photo to open it in a cinematic full-screen viewer Move between images using previous/next navigation Save all captured images or reset the canvas The goal was to make photo capturing feel less like a utility and more like a small creative ritual, a live memory board that grows with every shot. Built with Figma Make, I focused on creating a polished interactive prototype with a soft visual system, floating photo cards, smooth viewer experience, and a simple flow that can be understood in seconds: Capture → frame appears → build your orbit → explore your moments. FrameOrbit turns the camera into a canvas. ✨ #ConfigMakeathon #FigmaMake #FrameOrbit #ProductDesign #UXDesign #UIDesign #CreativeTools #CameraApp #Prototype #Makeathon
12
11
476
Cover image for Pip (https://blue-yard-23228182.figma.site) is a zero-friction
Pip (https://blue-yard-23228182.figma.site) 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. Live Project Link (https://blue-yard-23228182.figma.site/)Figma File Link (https://www.figma.com/make/cpBfeDwPVxmdSpfVzjfT5f/Fix-image-upload-issue?p=f&t=fX52CG0vAogdHtJ6-0) COMMUNITY LINK (https://www.figma.com/community/file/1647708710094001297)
38
43
2.4K
Cover image for Presenting - Silver Line 🌥️
Presenting - Silver Line 🌥️ https://silverlinespace.figma.site My Config Makeathon Submission! A helpline for hearts that can't quite see the bright side today. 🌥️ The Problem We all carry small struggles around with us. A rejection email, a plan that fell through, a rough day at work, a friend who didn't text back. None of them are the end of the world, but they pile up. And on the wrong day, even the little things feel heavy. Most of us weather them alone and in silence, scrolling past everyone else's highlight reel while quietly having a hard time. There are apps for big crises and apps for vanity metrics, but very little for the everyday, low-grade cloud that just needs a kind word from a stranger. ☀️ The Solution Silver Line is a communal sky where strangers help strangers spot their silver lining. Share your cloud. Sign in, step into the sky, and post the little problem weighing you down. Set how heavy it feels, then send it up. Be someone's silver line. Open any cloud and leave a message of encouragement, a kind word, or a bit of perspective. Loved someone's comment? Send a ray of sun to show you appreciate it. Watch clouds turn happy. When you can finally see the bright side, tap "I see the silver lining" and watch your cloud become a happy cloud. The goal is simple: make every cloud in the sky a happy one! Because no one should face their problems alone. Safety rails (community flagging + admin moderation) keep the sky a kind place. 🛠️ The Process & Figma Tools Used The whole thing was built predominantly in Figma, powered by Figma Make. Planning: Mapped the idea and concept with an AI agent before touching design. Figma MCP: Built the entire design system and variables directly in Figma, fast and clean. Figma Design Agent: Spun up the major screens in minutes. Figma Weave + Figma Draw: Generated the cloud assets and visuals; Draw was a joy for the finishing touches. Figma Make: The heart of it. Prompted my vision and watched it come to life, iterating across versions. Used Figma Make's Select Edits for precise manual tweaks (images, text, padding) to save AI credits. Supabase:Connected for persistence, so clouds, messages, and rays of sun are saved between visits. A real end-to-end Figma workflow, from design system to a live, interactive product. 🔗 Link - Try it out yourself! 🚀 Live Working Prototype: https://silverlinespace.figma.site *** Cannot provide figma community link as this project is connected to Supabase! *** 👤 Built by Arjun Haridas, Product Designer, Bangalore, India. Originally designed and built during the Config Makeathon period. Huge thanks to Figma for the makeathon and to Contra for hosting. And to everyone who's ever been the silver line to someone else's cloud you're the reason this exists. 😊🌤️ #FigmaMakeathon #ConfigMakeathon
44
46
2.4K
Cover image for 🛰️ I just shipped Remora
🛰️ I just shipped Remora for the Figma Config Makeathon "a space debris cleanup game", built entirely in Figma and Figma Make with help of Sites. PLAY NOW 💯 Remora - Let's Clean our Space (https://remora.figma.site/) 🚀 Right now, more than 27,000 pieces of debris are orbiting Earth. Broken satellites, lost bolts, leftover rocket stages and nobody's cleaning it up. It sounds distant, but it isn't: this debris threatens the satellites our GPS, communications, and weather systems depend on, and could eventually block our access to space entirely. I named the project Remora; a small fish that swims alongside sharks, cleaning their surroundings. We're the remoras. Space is our ocean. The Makeathon brief was "design something that improves the world," and I wanted my answer to be playable, not just a poster. Some of what's under the hood: 🎮 Two game modes: a free-flying drone collector with zero-G physics and a station-based sorting game where you triage incoming debris into recycling shipments 🤖 Three AI-controlled drones compete alongside you on a live leaderboard, each with its own personality and skill level ✨ Particle bursts, thruster trails, and docking animations — built frame-by-frame on canvas, no game engine 🌍 An animated Earth companion that reacts with rotating messages as you play 📡 Satellites cross your flight path on real trajectories — hit one and you lose cargo and hull integrity 🔼 A milestone-based upgrade system (Speed Boost, Cargo+, Magnet Field, Shield) that triggers mid-flight without pausing the game It won't clean the orbit. But if it makes one more person think about the mess we're leaving up there — it did its job. 🔗 Try it live: Remora - Let's Clean our Space (https://remora.figma.site/) 🎨 Figma file: Project File (https://www.figma.com/site/p5bu8PTmoytjpTY9YL3qwY/Remora---Space-Cleaner?node-id=0-1&t=H5KqKrCraHyBCseN-1&view=code&code-node-id=1-5)
27
28
1.3K
Cover image for Threadline — an interactive visual
Threadline — an interactive visual journaling experience, with walkthrough video project live demo link: https://change-height-01239730.figma.site/ Link of figma project: https://www.figma.com/make/g3yDxPG9HUqPes1raVNhUs/Threadline-interactive-experience?t=GSEKSXhZOoIR3MJR-1 Figma X Contra challenge Most journaling tools flatten memory into text boxes. Threadline turns memory into something you can see and touch. You enter a few real moments from your life, choose a thread color for each, and weave them into a canvas. The heavy ones show up as knots. You can open a knot, sit with what it carried, and reframe it in your own words. Not to erase it.. just to hold it differently. When the thread softens, the memory stays. It just doesn't pull the same way. At the end you're left with a woven cloth made from your own story. I built this for people who carry things they don't always know how to say out loud. Grief, change, loss, starting over.. those don't fit neatly into a journal entry. Sometimes it's tangled. Sometimes you don't know where to start. Threadline gives that a form: memories become threads, weight becomes tension, unresolved moments become knots, and reframed meaning becomes a gold stitch. The flow: add your moments → choose thread colors → generate your Threadline → open a knot → reframe it → keep or share the cloth. It's quiet on purpose. No streaks, no metrics, no gamification. Just a place to put what you've been carrying. And honestly, if you're carrying something right now: you don't have to carry it perfectly. That's the whole point of this thing.
18
15
987