Adobe XD Masterclass - Fitness App Design and Animation Techniques - Episode 38

Dive into a comprehensive 57-minute video tutorial led by Adobe XD Evangelist Howard Pinsky, focusing on enhancing your design skills and workflow efficiency in Adobe XD. Learn to create a fitness app interface with a dark-themed artboard, implement custom headers, and utilize the Toy Faces plug-in for profile pictures. Master techniques for crafting containers, adding borders, and designing call-to-action buttons with hover states. Explore the creation of animated progress bar circles, apply auto-animate features, and discover workarounds for adding gradients. Gain insights on pixel-perfect enlargement, percentage text layers, and conclude with instructions on creating animated reels for social media promotion.

Syllabus

start
Going Over XD Update and Intro to Today's Project
Creating New Artboard with Dark Background
Creating a Header
Using Toy Faces Plug-In
Adding a Border to a Profile Picture
Creating a Container for Fitness App Info
Adding a Border to Main Container
Adding in Text Layers
Creating a Call to Action Button
How to Find a Main Component
How go Create a Hover State
Adding More Text Info
Creating a Progress Bar Circle for Fitness App
Using Auto Animate on Progress Bars to Animate
Creating a Progress Bar Overlap
How to Enlarge Something by One Pixel at a Time
Finding a Work-Around to Add a Gradient to Progress Bar
Percentage Text Layer for Progress Bar
How to Create Animated Reel for Social Media