Contra - A professional network for the jobs and skills of the futureDiscover
Projects
People
Web developers
Content creators
Graphic designers
Product designers
AI developers
Motion designers
Social media marketers
Animators
Video editors
      

Projects we love

Projects we love

Standout projects making waves around the web
View more
Cover image for Lyft Pink
Lyft Pink
23
473

Web design projects using Framer

Framer

The best modern websites built on the leading web design tool, Framer
View more

Framer is the leading tool for building websites, fast

FramerHire experts

AI projects

AI

New projects from the best AI creators
View more

Brand design projects

Brand design

Bold visual identities and branding systems created by top independent designers
View more

Video editor projects

Video editing

Creative video edits made using today’s best editing tools
View more

Standout projects

Standout projects

More projects we love that are making waves across the web
Cover image for Proud to share my submission
Proud to share my submission for the #configMakeathon 🦋 Design has one job — make people feel something before they think something. For the #ConfigMakeathon, I built a complete digital campaign experience for Butterfly Conservation's "Britain's Favourite Butterfly" — taking a public vote and transforming it into something people actually want to be part of. The challenge wasn't technical. It was human. How do you make someone genuinely care about a species they've never noticed? How do you turn conservation data into something personal? How do you design an experience that moves people from passive viewers to active participants? The answer was architecture — three distinct experiences working as one: 🗳️ Results Explorer — A fully filterable species discovery system built around personality vibes, wing colours, and rarity. Not a leaderboard. A world worth exploring. 🧬 Personality Quiz — A matching experience that gives every user a butterfly identity rooted in real behavioural traits. Flashy. Feisty. Adventurous. Rare. When someone sees themselves in a species, the relationship changes entirely. 🌿 Conservation Narrative — A story-first approach to ecological data that earns its urgency rather than demanding it. The stakes land harder when you already have a favourite. This is the kind of work I find most meaningful — where design isn't decoration, it's the strategy itself. 🔗 Prototype:Prototype (https://www.figma.com/proto/QYomw4hbRvnUu9D4gWN1hu/Untitled?node-id=1-668&t=7Qi822ZqT2xffB6I-0&scaling=min-zoom&content-scaling=fixed&page-id=0%3A1&starting-point-node-id=1%3A668) Built with Figma · Figma Make · MCP #ConfigMakeathon #Figma #UXDesign #ProductDesign #DesignForGood #ButterflyConservation @Figma @Contra @Contra HQ
94
141
5.4K
Cover image for Hi creatives! 👋 For #ConfigMakeathon, I
Hi creatives! 👋 For #ConfigMakeathon, I created SLAMBOOK for Designers ✨ https://slambook.figma.site It's inspired by the slambooks many of us had as kids, but reimagined for the internet. Designers from all over the world can create their own page by adding photos, favorite music, creative advice, inspirations, and a few fun facts about themselves. It's a playful way to discover people behind the portfolios and build new connections within the design community. The best part? It lives online and can always be in your pocket, just add it to your home screen like an app. This concept could work for any community. Imagine a special Config edition where attendees share their photos, inspirations, favorite talks, creative superpowers, or memorable moments from the event. A little internet corner where creativity, personality, and community come together 💛 If it resonates, pass it on and start your own page 💛 If you really love it, I’d be sooo grateful for your support. Every goat, like, comment, share, means so much for me. Thank you! Project Link: https://slambook.figma.site Video Instagram: https://www.instagram.com/reel/DZpeUvBo4bs/?igsh=bDhhMnc1aXlzODls (https://www.instagram.com/reel/DZpeUvBo4bs/?igsh=bDhhMnc1aXlzODls)
109
119
3.1K
Cover image for I’ve created a Local Secret
I’ve created a Local Secret project to share local places with everybody else, hidden jams that you can find only in there. I used Claude to brainstorm ideas, prompts, tools to use before jumping into Figma. And I used free plan for it. After above, I’ve prepared 9 prompts that should give me the final result in #Figmamake but in reality it took me 72 prompts and almost 13,000 tokens for AI. I’ve also connected Supabase for backend memory and Github for saving the code. It’s incredible what you can do! With next iteration, I’ll fix the uploading of photos, however your secrets can be already shared with everybody. Link is here https://fresh-indigo-22631205.figma.site/ for limited time while this competition is on 🫶 #ConfigMakeathon and @figma also you can check the file how it was created 😜 https://www.figma.com/make/31kRzc6pePdxdoTaRi0OdS/Local-Secret?t=X8Zuoi6Gh7Pvn8t4-1 I wanted to share in community but because it’s connected to Supabase, it’s not possible, so just a link for you to the file. you can also find my app for freelancers on App Store called stePlan 🤘 Thank you for being an awesome community!
13
37
1.4K
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.
10
45
1.4K
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
10
369
Cover image for i realized that most grief
i realized that most grief apps are clinical or religious, then i designed a grief platform that's neither of this. Lumina (video 1 is Lumina web app, and video 2 is build process) a calm, beautifully-designed daily companion for anyone navigating loss, either it's a person, a relationship, a job, or a home. Lumina meets people exactly where they are, no pressure to heal, no toxic positivity, but a gentle space to feel, remember, and slowly find footing again. - Lumina app live link: https://pants-stir-69223014.figma.site/ - Lumina in Community: https://www.figma.com/community/file/1648042340955637578 i started by prompting Figma Make to generate my entire design system colors, typography, and components in one shot. Then I built each screen sequentially in the same session so Make retained design context. For illustrations I used Figma Weave, prompting each asset with specific color hex codes to match the design tokens. Finally I used Figma MCP connected to my code editor to export clean, live React code from the design. Grief is the most universal human experience, yet almost no digital tool treats it with the care and design quality it deserves. Most people grieve alone, silently, without structure. and for this reason i designed Lumina, a daily ritual app, gentle check-ins, guided journaling prompts, a memory keeper, and a visual grief timeline that shows how far you've come.
7
11
467
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)
32
39
1.5K
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 🙌
24
64
2.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
13
12
530
Cover image for I wanted to build a
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!
19
31
1.8K