Figma + Adobe XD Guide: Learn UI/UX Design With 12 Projects

Name: Figma + Adobe XD Guide: Learn UI/UX Design With 12 Projects
Rating: 4.0 (63 reviews)

Figma + Adobe XD Masterclass: UI/UX Design from Beginner to Pro – Design Websites, Apps & Prototypes with Confidence

Created byThe Knowledge Hub

Last updated 10/2025

English

What you'll learn

You Will Learn How to Design UI & UX Mockups
You Will Learn how to create Web & Application interfaces From scratch
You will learn How to Create Different Different Ui&Web Designs in Figma & Adobe XD
You will Learn Different Types of Prototyping Techniques in Both Adobe XD& Figma
You Will Learn From Basic to Advanced in all Topics

Course content

12 sections • 104 lectures • 14h 55m total length

1.Creating Account in Figma1:24
2.Knowing About FrameSizes in figma2:11
Explore how to use frames in Figma, adjust width and height to standard sizes like 1920 by 1080, and select presets for iPhone, Android, tablet, and desktop layouts.
3.Exploring More Tools in Figma3:44
4.Learning About Different Shapes & Their Uses in Figma11:52
5.Understanding About Autolayout& Masking7:17
6.Understanding About Components7:47
7.Brief Look on Prototyping4:29
8.Downloading Some Useful Plugins in Figma6:44
Download and manage plugins in Figma to speed up UI design, using Feather Icons and Pixels to import images, plus tips on masking and color adjustment.

1.Creating A RollOver For Website5:24
Create a website rollover button in Figma by building a gradient blue button, applying a drop shadow, and animating hover with smart animate and ease in/out.
2.Creating a LeftSlide10:23
3.Creating A Background For WebSite3:20
Create the website background by placing a rectangle, applying a blue to sky gradient, and importing a high quality airplane image; adjust size and corners for a clean look.
4.Creating a Buttons& Dummy Text7:15
5.Creating a Parallelex Effect in Figma11:44
Create a parallelex effect in Figma by building layered frames, masking content, and animating transitions between main frame one and main frame two with smart animate.

1.Creating Food Recipe Webpage15:14
Design a food recipe webpage in Figma by creating a 1280 by 720 frame, using AI-generated dish images, gradient backgrounds, drop shadows, and recipe names with feather icons.
2.Creating a Transistion Page6:30
3.Finishing Our transistion Page4:33
4.Finishing Our transition Page Animation8:37
Duplicate and refine elements to finish the transition page animation, dragging and rotating frames and rectangles, toggling opacity, and building a prototype with 700 ms click transitions and back navigation.

1.Creating a App Page in Application6:22
Design a shopping app page in Figma on an iPhone Pro frame, adjust corners, add fashion imagery, style text with Poppins semibold, and create reusable components for buttons and collections.
2.Creating Scrolling Effect12:00
3.Creating Additional Text & Some Icons for Relaxed T shirt Page10:57
Create a relaxed T-shirt page in Figma by adding text and icons, adjusting typography and color within iPhone Pro frame, and turning elements into components with hover effects for prototyping.
4. protyping Relaxed T shirt Page For App5:50
5.Creating & Prototyping Men UI Design Page5:46
6.Finishing All Interactive Animations in App8:41
Finish all interactive animations by linking frames in the prototype, using smart animate with ease in/out, and enabling back navigation between kids, woman, and man screens.

1.Creating a Main Shoe Webpage13:34
2.Creating Some Functionality for Main Page5:43
3.Creating a Text in Main Shoe Page6:40
4.Prototyping Text in MainShoe Page10:10
5.Finishing Our Prototyping For MainShoe Page9:01
6.Designing New Page10:11
7.Adjusting Interaction Settings in First Main Page5:31
Replace rollover with on click actions and disable rollover animations on the first main page. Add a backward button with feather icons, turn off content clipping, and preview interactions.
8.Connecting Main Text to Next Page in Figma Using Interaction6:11
9.Finishing Our Website Interction Animation4:59

1.FirstLook in XD4:32
2.Discussing About Artboards & Grids4:35
3.Learning About Text Tools in XD4:41
Explore text tools in XD, from adjusting font size and styles to applying fills, borders, opacity, and shadows, and master alignment, spacing, and auto width/height.
5.Learning About Blur Tools in XD5:13
6.Learning About Alignment Tools3:32
7.Discussing About Assets&Components5:37
Learn assets and components in UI design, including creating components, adding color and font assets, managing instances, and exploring rollover and click prototype states.
8.Learning About Repatitive Girds3:32
9..Learning About Responsiveness in XD7:02
Learn responsive design concepts in XD, including responsive resize, grouping, stacks, and artboard responsiveness, with comparisons to Figma’s auto layout and practical tips for building adaptive UI.
10.Exploring About Prototyping in Figma5:54

1.Creating First UI App Page in XD17:44
Create a first user interface page for a food delivery app in Adobe XD, configuring frames, icons, typography, colors, images, pricing emphasis, and delivery address section to prototype the layout.
2.Creaing Dragging Prototype for Our App14:46
Create a gallery-like prototype by aligning transparent images, duplicating and grouping frames, adding text and price labels, and linking iPhone Pro Max screens with tap-triggered auto-animate transitions.
3.Creating Main Food App Item Page9:19
Prototype a main food app item page with backward navigation, fade-out menus, and rollover and order now buttons. Utilize groups, states, and auto animate transitions (ease in/out, 3s).
4.Creating Payment Method Page13:02
Design a payment method page with credit card, PayPal, and Google Pay options, using logo imports, component states, and interactive prototypes to showcase selection and transitions.
5.Finishing Our Payment Method Page Prototyping14:55
6.Creating A Paypal Login Page5:11
7.Creating a Type Text Interaction Animation For Login Page14:08
8..Finishing Type Text Interactive Animation8:21
9.Creating a Requestpayment Page& Transaction Details Page10:48
Design a PayPal-like login flow and a request payment button, then create a transaction details page showing transaction ID, date, amount, and tax.
10.Finishing Our App Completely8:00

1.Creating a First page for Mens Botquie Wear6:33
2.Creating Buttons & RollOvers in Main Page9:25
3.Finishing MainPage Design12:16
Finish the main page by adding social media icons (Instagram, Facebook, LinkedIn) with PNG logos, configure the menu and search, and create a reusable quick view button with hover states.
4.Preparing Prototype For Main WebPage7:21
Learn to prepare a main web page prototype by organizing images into groups, replacing visuals with button interactions, duplicating assets, and masking content to create a polished product showcase.
5.Finishing Prototype For Main Page7:12
Finish the main page prototype by applying drop shadows and organizing content with groups and masks. Link screens with auto-animate transitions to create looping navigation across the first three views.
6.Creating Additional Interaction Prototyping for Main Page7:43
Duplicate and ungroup elements to form new components, organize groups, and set hover and default states, then prototype main-page interactions like buy now linking to payment details with auto-animate.
7.Finished First Input name9:19
Design and prototype a finished name input card in Figma or XD by masking text, linking the input to the prototype, and noting limits of random text.
8.Creating Interactive Animation for Credit Card input Field16:40
10.Finishing all the Input Fields19:20
11.Finishing Entire WebSite8:38

1.Creating a Header Part for WebPage8:22
2.Creating A Footer Part6:17
3.Finishing First Webpage For Commercial WebSite5:18
4.Finishing Our Second WebPage7:12
Duplicate the second webpage, replace images, adjust text colors and layout to show connecting a local bank account; create a component with state and slide transitions to navigate between states.
5.Finishing Connect Now Page13:50
6.Designing Start Now Page6:49
7.Finishing Interactive Animation For Start Page5:03
8.Finishing Interactive animation for Connect Button6:36
9.Creating and ProtoTyping Sign up Page6:10
10.Finishing Our FullWebSite14:00
Finish connecting the home, about, and pricing pages, set hover and default states, and ensure seamless navigation for a professional website.

Requirements

You Need Internet Connection
You Need Laptop or PC
No design experience is required. You will learn everything from scratch.

Description

Welcome to the Figma + Adobe XD Master Course – your all-in-one learning path to becoming a professional UI/UX designer. This course is carefully designed for beginners, intermediate learners, and even advanced users who want to master two of the most powerful design tools in the industry.

With over 12 structured sections, this course takes you on a step-by-step journey from the fundamentals of user interface and user experience design to creating advanced, interactive prototypes and responsive layouts. Whether you want to build modern web interfaces, mobile app designs, or design systems, this course has got you covered.

You’ll begin with the Basics of design . Then, you’ll dive deep into Figma and Adobe XD – learning how to use tools, shortcuts, and features like Auto Layout, Components, Grids, Prototyping, Team Libraries (in Figma), and Repeat Grids, States, and Animations (in XD).

As the course progresses, you'll work on real-world design projects that simulate actual client work, helping you build an impressive portfolio. You'll also learn how to collaborate with developers, export assets, and prepare your files for handoff using both tools efficiently.

In the final sections, we cover advanced techniques, such as responsive design, building full design systems, using design plugins, and optimizing workflows for speed and creativity. You’ll also receive tips on how to land freelance gigs or UI/UX jobs with your new skillset.

By the end of this course, you will not only be proficient in Figma and Adobe XD, but also have a strong understanding of modern design workflows and practices. This is the ultimate masterclass for anyone serious about starting or advancing their career in design.

Enroll now and begin your journey to becoming a skilled, confident, and job-ready UI/UX designer!

Who this course is for:

UI/UX Designers
UI/UX Developers
Graphic Designers
People who are transitioning to Figma from other design software or careers.

Figma + Adobe XD Guide: Learn UI/UX Design With 12 Projects

What you'll learn

Explore related topics

Course content

Introduction to Figma8 lectures • 45min

2.Making Simple Parallelox Slide Effect in Figma5 lectures • 38min

3.Making A CarRental Website8 lectures • 1hr 20min

4.Creating a Food Recepie Webslide Animation4 lectures • 35min

6.Making a Small ShoppingApp for Mens& Women Wear6 lectures • 50min

6.Creating a Shoe Webpage9 lectures • 1hr 12min

7.Introduction to Adobe Xd9 lectures • 45min

8.Creating A Food App10 lectures • 1hr 56min

9.Making a MensWear Website10 lectures • 1hr 44min

10.Making a Digital Money Transfer Website10 lectures • 1hr 20min

Requirements

Description

Who this course is for: