Framer + Gemini
In this tutorial, I’ll show you how to use Gemini to generate animated UI graphics as actual code, and then integrate them directly inside Framer.
Animations are becoming a huge part of modern web design, especially on SaaS websites. But creating custom animated graphics usually takes a lot of time — designing the visuals, animating them, exporting files, optimizing performance, and integrating everything into your site.
Because of this, many designers simply avoid using animated graphics in their feature sections.
But what if you could generate clean, responsive animated graphics using just prompts?
These aren’t videos or GIFs — they are lightweight, responsive animations written in code, meaning they scale perfectly and stay crisp on any screen.
By the end of this video, you’ll learn how to:• Generate animated graphics with AI• Turn prompts into responsive UI animations• Use these graphics inside Framer feature sections• Level up your web design workflow
This is one of the easiest ways to make your websites feel more modern, interactive, and premium.
