Turn Static Screens into Beautiful Animations with Runway AI
9.5K views · 2025-03-24
UI Design
In this video, we’ll design an engaging onboarding page for a hiking app by generating visuals with AI tools like Ideogram and turning static screens into animations using Runway AI to create smooth motion and a more engaging user experience. Full Course: https://designcode.io/design-multiple-apps-with-figma-and-ai
The onboarding page in a mobile app is the first interaction point that guides new users in understanding and using the app. It sets the tone for the user experience and can greatly influence whether a user continues to engage with the app. In Episode 3, we’re going to design an onboarding page for a hiking app and learn how to transform an image into an animation using Runway AI, as well as prototype with video in Figma.
What We’ll Cover in This Episode
1. Generating Images with AI: We'll start by using AI tools like Ideogram or Midjourney to generate stunning visuals for our hiking app. These tools allow us to create high-quality landscapes, hiking gear images, and adventure-themed assets, making our design more immersive and visually appealing.
2. Designing the UI in Figma: Once we have our AI-generated images, we’ll build the onboarding app’s interface in Figma.
3. Transforming Images into Video with Runway AI: Static images are great, but what if we could bring them to life? We’ll use Runway AI to turn our AI-generated visuals into smooth, cinematic videos. These videos will help add motion and depth to our design, making our prototype feel more realistic.
4. Creating an Interactive Video Prototype in Figma: Finally, we’ll bring everything together by creating a video-based prototype in Figma. This means adding transitions, interactive elements, and a polished user flow to showcase how the hiking app would function in real life. The result? A professional, high-fidelity prototype that looks and feels like a real app.
My Figma File
➡https://www.figma.com/community/file/1476063516353777550/hiking-app-onboarding-design-community
Timestamps:
0:00 – Introduction
0:14 – Welcome and Overview
0:46 – Figma File and Prompt Setup
1:07 – Image Generation with Ideogram AI
2:46 – Designing the Onboarding Screen in Figma
4:32 – Progress Indicators and Navigation Design
6:14 – Creating a Component Set for Progress Indicators
6:29 – Button Design and Styling
7:29 – Assembling Elements with Auto Layout
9:18 – Visual Motion with Dreamcut AI
11:04 – Bringing Screens to Life with Runway AI
15:35 – Experimenting with Keyframes
17:10 – Runway AI Resources and Documentation
17:56 – Exporting and Using Videos in Figma
Follow me
➡https://www.instagram.com/sourasith.design/
➡https://twitter.com/titepommee
➡www.linkedin.com/in/sourasith-phomhome
We’re so glad you’ve chosen to learn with us. We’re here to support you every step of the way, so don’t hesitate to reach out if you need anything. We can’t wait to see what you’ll create!
🪄 Join this channel to watch the entire course on YouTube
➡ https://www.youtube.com/channel/UCTIhfOopxukTIRkbXJ3kN-g/join
🚀 Follow this course on Design+Code's website
➡ https://designcode.io/ios18
#figma #uidesign #figmadesign
The onboarding page in a mobile app is the first interaction point that guides new users in understanding and using the app. It sets the tone for the user experience and can greatly influence whether a user continues to engage with the app. In Episode 3, we’re going to design an onboarding page for a hiking app and learn how to transform an image into an animation using Runway AI, as well as prototype with video in Figma.
What We’ll Cover in This Episode
1. Generating Images with AI: We'll start by using AI tools like Ideogram or Midjourney to generate stunning visuals for our hiking app. These tools allow us to create high-quality landscapes, hiking gear images, and adventure-themed assets, making our design more immersive and visually appealing.
2. Designing the UI in Figma: Once we have our AI-generated images, we’ll build the onboarding app’s interface in Figma.
3. Transforming Images into Video with Runway AI: Static images are great, but what if we could bring them to life? We’ll use Runway AI to turn our AI-generated visuals into smooth, cinematic videos. These videos will help add motion and depth to our design, making our prototype feel more realistic.
4. Creating an Interactive Video Prototype in Figma: Finally, we’ll bring everything together by creating a video-based prototype in Figma. This means adding transitions, interactive elements, and a polished user flow to showcase how the hiking app would function in real life. The result? A professional, high-fidelity prototype that looks and feels like a real app.
My Figma File
➡https://www.figma.com/community/file/1476063516353777550/hiking-app-onboarding-design-community
Timestamps:
0:00 – Introduction
0:14 – Welcome and Overview
0:46 – Figma File and Prompt Setup
1:07 – Image Generation with Ideogram AI
2:46 – Designing the Onboarding Screen in Figma
4:32 – Progress Indicators and Navigation Design
6:14 – Creating a Component Set for Progress Indicators
6:29 – Button Design and Styling
7:29 – Assembling Elements with Auto Layout
9:18 – Visual Motion with Dreamcut AI
11:04 – Bringing Screens to Life with Runway AI
15:35 – Experimenting with Keyframes
17:10 – Runway AI Resources and Documentation
17:56 – Exporting and Using Videos in Figma
Follow me
➡https://www.instagram.com/sourasith.design/
➡https://twitter.com/titepommee
➡www.linkedin.com/in/sourasith-phomhome
We’re so glad you’ve chosen to learn with us. We’re here to support you every step of the way, so don’t hesitate to reach out if you need anything. We can’t wait to see what you’ll create!
🪄 Join this channel to watch the entire course on YouTube
➡ https://www.youtube.com/channel/UCTIhfOopxukTIRkbXJ3kN-g/join
🚀 Follow this course on Design+Code's website
➡ https://designcode.io/ios18
#figma #uidesign #figmadesign