🚗 Cars Animated UI/UX Prototype

📌 Overview

This project is an animated car UI/UX prototype designed in Figma.

The main purpose of this project was to practice creating an interactive and dynamic interface instead of a static design.

The prototype contains four different car frames, each with its own matching color theme and animated transitions.

✨ Features

• Four different car designs
• Red, yellow, blue, and white car themes
• Color-matched backgrounds for each car
• Animated car transitions
• Interactive prototype animations
• Smooth visual transitions between frames
• Dynamic presentation instead of a static UI

🎨 Design Concept

Each car is presented with a background that matches its color theme.

For example:

• 🔴 Red car → Red-themed background
• 🟡 Yellow car → Yellow-themed background
• 🔵 Blue car → Blue-themed background
• ⚪ White car → White-themed background

Animations are used to transition between the different car designs and their corresponding themes.

🛠️ Tool Used

• Figma

🎯 What I Learned

Through this project, I practiced:

• Creating animated prototypes in Figma
• Using transitions between different frames
• Creating movement animations
• Combining UI design with animation
• Creating a more dynamic experience instead of a static design
• Improving visual consistency through color themes

🎬 Prototype Preview

A video demonstration of the animated prototype is included in this repository.

💡 Project Goal

The main goal of this project was to learn how animation and transitions can make a UI more interactive, engaging, and visually appealing.

---

Designed & Created by Ayesha Batool

UI/UX Design Practice Project | Figma