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
how I laid out the feature sections in Sonora
numbered cards + full screen product shots
Numbered cards next to the full-screen product shot is a smart move. It breaks the info into digestible steps without losing the visual impact of the device.
These collapsible cards is smart idea! The robot as actually growing in my mind too!
thanks Amirul!
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
Summer inspired a small design experiment ☀️ We created two hero concepts for the same website. One follows a classic layout. The other takes a more editorial approach with oversized typography and a less conventional composition.
Which direction would you choose for a real project? 1 or 2?
72 voted
62%
45 voted
38%
117 votes
Closed
Most AI products show you results.
I wanted to show you the process.
So I built MIRROR — a cinematic AI surveillance interface designed entirely in Figma Make.
Instead of static sections and generic cards, every interaction reveals how the system thinks:
• Real-time identity analysis
• Object detection overlays
• Behavioral tracking
• Detection systems and capabilities
• Live subject profiling
• Technical specifications
• Interactive data visualizations
• Hover states, reveals, and system reactions
The goal wasn't to design another dashboard.
The goal was to create an experience that feels like you're inside a classified intelligence system.
Every screen was designed to feel alive.
Every section responds.
Every interaction reveals something new.
Built with Figma Make as part of the Config Makeathon.
Would love to hear what feature or interaction you'd add next.
The level of detail in this is insane. Every section feels like it belongs to the same universe.
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.
This is fire!
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?