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
Figma Make isn't just a prototyping tool. I used it to ship a Claude-powered design system generator.
Most designers treat Figma Make as a quick vibe-coding sketchpad. I wanted to show it's something deeper ā a full vibe-coding platform that integrates with external APIs.
The connection nobody writes about
There are three ways Claude connects to Figma today. Figma MCP ā Claude reads and writes Figma files via MCP server. Figma's built-in AI ā Figma calls its own models internally. And mine ā a React app inside Figma Make that calls Claude API directly from the browser. Claude responds to the code, not to Figma. Figma Make is the hosting.
The new pipeline
Old approach: get brandbook and references from client ā generate moodboard ā align ā write prompts for UI Kit. Separate steps, human in the center every time.
My approach: collapse all of that into one step. Run an AI analysis and output structured data ā input for machines, not a result for humans.
We don't ask AI how the brand looks. We run an MRI on it and get structured data that machines use to build code.
What gets generated
11 files, all consistent with each other because they share one analysis. For Figma specifically:
tokens.json ā W3C DTCG 3-tier format (primitive ā semantic ā component), imports directly into Figma Variables via Tokens Studio or Figma Make prompt
design-system.css ā all tokens as CSS custom properties, ready to import
starter.tsx ā paste into Figma Make, full design system renders instantly
figma-make.md ā session context, paste once and the AI knows the entire design system
Add a content plan on top ā generate a full design in one run with minimal token spend.
The entire tool was built and shipped inside Figma Make. No external hosting. No separate codebase.
#ConfigMakeathon #FigmaMake #DesignSystem #VibeCoding #ClaudeAPI #BuildInPublic
ā¢ 5h
tNot gonna lie, I opened this out of curiosity and left with more questions than answers š
But that's usually a good sign. Really interesting exploration of what design workflows might look like in the AI era. And by the way, this link doesn't work figma-make.md
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
built an interactive gameāforage, where you can search for crystals in the forest with figma make!
check out the link below to try it for yourself!
https://trance-fresh-36192795.figma.site
this is so peaceful - nice work!
ā¢ Jun 16
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.
Behind every visual identity is an emotion trying to be expressed.
Every brand, product, and creative idea carries a feeling behind it. Yet translating emotion into visual expression remains one of the most intuitive and subjective parts of the creative process.
Emotion Lab is an interactive creative playground that explores how emotions can become visual systems for creation.
Built around six emotional states, each experience unlocks its own curated visual language, featuring color palettes, gradient behaviors, and emotion-driven creative mechanics. Users can experiment, remix, and generate unique visual outcomes while staying true to the emotional character of the selected state.
Emotion Lab explores emotion not as inspiration, but as a creative framework.
Project Link:
https://untie-unit-65592182.figma.site
Community Link:
https://www.figma.com/community/file/1648425635877147408
WOW!
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?