When I've previously worked on a design system, interaction design for individual components was often tricky. I’d either build complex behaviour directly into Figma using prototyping tools (which bloated the files) or rely on After Effects references. Neither approach worked especially well. Both added friction, led to back-and-forth with developers, and lacked accuracy.
Streamlining interaction design: With Figma Make (and Claude built in), I’ve been rethinking how motion fits into design systems. It’s made me realise how much easier things could have been using tools like this, especially when documenting interactive behaviour.
From flows to real transitions You can feed in basic prototype logic — hover states, modals, transitions — and see it play out in a more realistic way. It gets around Figma’s limitations and stays closer to how things behave in the browser.
Rethinking motion It’s pushed me to revisit old animations with fresh eyes. Figma Make gives more space to explore transitions and gestures, particularly across desktop and mobile.
The code’s surprisingly useful Figma Make doesn’t give you React components out of the box, but with Claude, you can prompt it to generate JSX with Tailwind classes, layout structure and — importantly — animation props. I’ve been pasting that into ChatGPT to tidy up the output, reframe it for React or Storybook, and prep it for handoff. It’s not perfect and I still check things with a developer, but having something structured with logic baked in is a major improvement over static mocks or motion references.
Fine-tuning with Dev Mode Alongside this, I’ve been using Figma’s Dev Mode to fine-tune tokens, spacing, and typography from the main file before handoff. It helps ensure alignment between design and code.
Conclusion: There’s still work for developers to do, but having a visual and functional reference — with actual motion logic — feels like real progress. And it’s a great way to explore and prompt your way to something closer to production.