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
I made a shipment tracking simulator in Figma with their Make tool for #configmakeathon called "Where's my shipment?" (revolutionary name)
It tracks marine container shipments for businesses using a bill of lading number. The demo is just a simulation since adding real use would be less visually interesting and would require dev API keys for individual shipping companies.
It was interesting to balance the AI credits given to me, Sonnet ended up carrying most of the work.
Check it out for yourself: https://quota-odd-38237987.figma.site/
This is awesome
Where in the Sea is my package? 😁
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
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
Built with Figma · Figma Make · MCP
#ConfigMakeathon #Figma #UXDesign #ProductDesign #DesignForGood #ButterflyConservation @Figma @Contra @Contra HQ
Pretty Good!
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.
What is Freegma?
Freegma is a local AI generation studio that runs entirely on your own GPU — no subscriptions, no cloud costs, no limits. Users can generate images, 3D models, videos, lip-sync avatars, and full ad creatives, all powered by open-source AI models running on their own machine and exposed securely through a Cloudflare tunnel.
UI/UX — Built with Figma Make
The entire interface was designed and generated using Figma Make, Figma's AI-powered code generation tool. Starting from a design prompt describing a holographic, cyberpunk aesthetic, Figma Make produced the component structure, layout system, and visual language that became Freegma's UI.
The design language is built around a "Holographic AI Studio" concept:
Deep black backgrounds (#0a0a0f) with a subtle cyan grid overlay
Neon gradient accents in cyan (#00f5ff) and purple (#7000ff) — reflecting the duality of neural generation
Corner bracket decorations on cards, glitch text animations, and a GPU status badge that pulses live
Typography: Orbitron for headings (geometric, futuristic), Share Tech Mono for labels and data (terminal aesthetic), Rajdhani for body text
Every page is a full-screen "portal" — Text→Image, Image→3D, Image→Video, Lip Sync, Ads Studio — with a persistent holographic navbar and animated transitions via Framer Motion
The landing page features a large hero section with a "CREATE WITH HOLOGRAPHIC AI" headline, live GPU status, and animated tool cards built with Figma Make's component generation. The auth page follows the same visual system with glowing input fields and corner accent decorations.
Technical Stack
Layer Technology Frontend React 19 + TypeScript + Vite 6 Styling Tailwind CSS v4 + Framer Motion (motion/react) UI Generation Figma Make Routing React Router v7 Auth Supabase (email/password + Figma OAuth) Backend FastAPI (Python) on local GPU machine Tunnel Cloudflare Tunnel (fixed domain: api.freegma.win) Deploy Vercel (frontend) — auto-deploy on git push AI Runtime ComfyUI (local)
AI Models Integrated
Text → Image: SDXL 1.0 via ComfyUI
Image → 3D: TripoSR, SF3D, InstantMesh (isolated Python venvs)
Image → Video: WAN 2.2 via ComfyUI
Social post: X= https://x.com/IDoiciu1863/status/2066761804730999111
Figma comunity= https://www.figma.com/community/file/1648074023441664027
Live project= https://www.freegma.win/
The overall craft and attention to user experience are impressive. Great job!
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?