Teaching Claude my workflow, and it's saving it as a memory as we go. I love this stuff for quality control when you try to build design/UI code parity. Next step would be telling an agent to check figma and build the components for me every night :)
@raphaelschaad I love it. It’s a huge advantage when building digital products. It makes you feel limitless, and if you know what you want, it’s your time to shine. Building and iterating ideas becomes effortless, and you’re no longer tied to others’ skills to bring them to life.
Figma Console MCP is magic.
3,900+ variables
15,000+ tokens
9 collections
1+ decade refining this grid system
So many responsive permutations I couldn't have ever done it until now.
@Figma I need that slot component access! lol
Once I pointed that out, it was almost a one shot fix. It was still slightly broken visually, but after a couple more prompts, it got to a place I am genuinely happy with.
Achieving this without writing a single line of code is kind of amazing.
This is where understanding how software actually works becomes critical. I asked the AI to walk me through the flip animation step by step. Eventually, I realized the backside of the cards needed to be passed as a prop to the function.
But when I asked Figma Make to implement it, it tried and the cards were flipping all over the place. The sequencing was off. They would start revealed, flip, then flip back again. Probably my prompting skills.
One of the most exciting parts of playing card games is seeing other players reveal their cards, because that’s when you start calculating in your head what you should play. I wanted to replicate that feeling by adding a flip animation.
@zoink Another super cool thing... before, the cards animated from the middle my deck to the middle of the play area. I asked AI to animate them from the cards original positions to the play area and also add scaling. Literally took 2 minutes.
@zoink Asked AI to fix it, but it wasn’t quite getting there. So I asked AI to log the timing in the console, spotted the issue, and after pointing it in the right direction, boom it worked.
From an idea to implementation took me about 15 mins, it is nuts.
Holy moly! I just created one of my favorite card games in a single day using Figma-Make, ChatGPT, and Claude. It doesn’t look very pretty yet, but it’s incredible what you can accomplish.