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
Here's every tool I used to build a full AI interface from scratch in Figma.
No fluff. Just the actual stack I used on a recent AI platform project from the very first blank frame to the final handoff file.
Figma for everything visual. Components, auto layout, variables, prototypes. If you're not using variables for dark and light mode yet, start today.
FigJam for early thinking. User flows, feature mapping, client alignment. Getting the logic right before designing a single screen saves hours later.
Mobbin for reference. Real product patterns from real AI products. Better than searching Dribbble when you need interfaces that actually work.
Fontjoy for typography pairing. AI interfaces need clean, modern type. This tool makes finding the right combination fast.
Coolors for color system building. I lock the primary brand color and build the full palette around it including semantic colors for states and feedback.
Phosphor Icons for the icon set. Consistent weight, clean strokes, and they work perfectly at small sizes inside dense AI dashboards.
Notion for documentation. Every design decision, component note, and client feedback lives here so nothing gets lost between calls.
The tools are not the skill. But the right tools make the skill faster and cleaner.
What's one tool in your design stack you can't work without?
#figma #uiux #aidesign #productdesign #uxdesign #designtools #saasdesign #uidesigner #designprocess #figmatips
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
Just got access to the @figma AI Agent.
I’ll be using it to accelerate the creation of @framer templates, but these won’t be generic AI-generated layouts.
Every design decision will have a purpose. Every section will be intentional. And everything will be built to align with Framer best practices and standards.
Excited to see how far this can push the design process.
Not every idea needs to start as a perfect case study.
So I’m using Figma’s first ever Config Makeathon, powered by Contra, as an excuse to open Figma, think bigger, and make something before I overthink it.
It’s happening NOW, from June 4 to June 18 and it’s open to designers, creatives, builders, and anyone curious about creating in Figma.
Also, there’s $100k worth of prizes, so yes, I am suddenly taking my “little idea” very seriously.
Join the Makeathon: https://c87.to/jun26-figma-karen
Incredible!
Challenges
View all
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.
creativeaiflow
Creative AI workflows are evolving. What tools do you use, and what are their strengths and weaknesses?
portfolioreview
The best portfolios tell a story, not just show a grid. Share yours for feedback.
freelancerlife
Freelancer life is wins, pivots, and everything in between. What’s yours right now?
