Figma→Video AI workflow
Light Mode Launch in the Jam Mobile App
Today we launched Light Mode 🔆 in the Jam mobile app! Was excited to launch it and wanted to make a nice graphic to show everyone using the app what's new. I made it with Figma + AI tools (Claude + Veo3 Flow):
Steps to Create Your Own App Screen Animations Using AI:
- Export a Figma Frame: Start by exporting a Figma frame of the app.
- Upload to Claude: Upload the Figma frame to Claude, provide a prompt for what you want to accomplish.
- Use Veo3 Flow: Upload that frame and prompt to Veo3 Flow's Frame to Video tool.
- Final Touch: Done! Light Mode, on! 🔆
This was the prompt used (thanks Claude):
Create a premium iOS app launch animation that transforms these product stills into a cinematic reveal. The animation should be elegant with sophisticated 3D camera work and lighting.
Visual Treatment:
- Phones float weightlessly in 3D space with gentle rotation and subtle parallax depth
- Dramatic lighting shifts from soft ambient to focused spotlighting on key moments
- Premium materials: subtle reflections on glass, soft drop shadows, elegant glows around active elements
- Smooth easing curves throughout (ease-in-out, no linear motion)
Camera & Movement:
- Graceful orbital camera movement around the interfaces
- Shallow depth of field that guides focus
- Cinematic framing with negative space
- Seamless transition between the two app states
Constraints:
- DO NOT add new UI elements - only animate existing interface components
- Maintain authentic app functionality and visual hierarchy
Tone:
- Sophisticated, premium, worthy of a keynote reveal.
Dealing with Bugs
Dealing with bugs is 💩, but not with Jam.
Capture bugs fast, in a format that thousands of developers love.