Explore Figma AI: Create Engaging Animated Landing PagesExplore Figma AI: Create Engaging Animated Landing Pages
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
Surgawi is a motion-animated landing page built entirely with Figma. The idea behind this project is to showcase how Figma’s newest AI-powered features—Weave and Make—can be combined to create a visually engaging and interactive landing page experience.
Workflow
I started by brainstorming the concept and creating the initial design directly in Figma, collaborating with the built-in AI agent.
Next, I generated the image and video assets using Figma Weave, allowing me to quickly produce custom visuals that matched the project's style.
Once all the assets were ready, I moved to Figma Make to build the complete landing page.
Before generating the final build, I used the Plan Mode with the Claude Opus model. This was the most crucial step, as it allowed me to clearly define the concept, animation style, color palette, visual direction, and overall design language with the AI before implementation.
Finally, I connected Figma Make with Supabase to handle video uploads and asset hosting, ensuring the landing page remains stable and performs smoothly once deployed live.
This project explores how AI-assisted workflows can streamline the entire creative process—from ideation and asset generation to prototyping and full landing page development—all within the Figma ecosystem.
Post image
Post image
Dylan's avatar
Contra logo
The animations are cool
Back to feed
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