Figma 2024 Monster Course: Mastering Design & Prototyping

Name: Figma 2024 Monster Course: Mastering Design & Prototyping
Rating: 4.2 (171 reviews)

Figma 2024 Monster Course: Mastering Design & Prototyping with Advanced Techniques and Real-World Projects

Created byThe Knowledge Hub

Last updated 8/2024

English

What you'll learn

You Will Learn How to Design UI & UX Mockups
You will Learn How to do Prototyping in Figma
You Will Learn how to create Web & Application interfaces From scratch
You will learn How to Create Different Different Ui&Web Designs in Figma

Course content

6 sections • 61 lectures • 7h 4m total length

1.Creating Account in Figma1:51
Log in to Figma with Google, create your first design file, and explore the interface as you start the course focused on basic tools and topics like interactions and animations.
2.Getting Started With Figma3:29
3.Learning About Custom Shapes8:35
4.Learning About Pen & Pencil Tools5:00
5.Learning About Masks In Figma3:10
6.Learning About Componenets6:47
8.Learning About AutoLayOut6:54
9.Learning About Masks2:20

1.Creating A Boutique Website Assets14:48
2.Creating ForwardButton RollOver Animation3:25
3.Finishing FirstWebPage6:35
4.Creating a Button For WebPage4:43
5 Designing Second Page18:57
6 .Prototyping Quantity Button in Figma11:17
7.Giving Interaction to Add To Cart Page19:47
8.Refining Transistion Animation6:12
9.Giving Functunality for Main Image4:59
10.Creating Prototyping for Forward and Backward buttons6:00
11.Finalsing Our Website9:51
Duplicate frames, move elements off-frame, and fade items to zero opacity; place the logo, enlarge images, and enable 300 ms page transitions with horizontal to vertical scrolling.

1.Preparing Wireframe For Website5:41
2.Starting OurWebsite6:19
3.Finishing Our First WebPage8:34
Design a landing page button by creating a small frame, adding a rectangle and all caps text, applying orange color, stroke, drop shadow, and turning it into autoload for prototyping.
4.Creating CheckOut Button8:39
5.Creating OtherButtons6:40
6.Adding Designs to WebPage4:45
Create a page cart animation by turning the cart image into a component, adjusting opacity and x direction, and applying prototype animations with smart animate and 100 ms ease in.
7.Adjusting Our WebPage6:39
8.Preparing Second Webpage8:59
9.Designing Additional Elements in Page5:18
10.Designing Third WebPage7:23
11.Giving Intercations For Our WebPages10:21
12.Continuing Prototyping in Figma3:59
13.Preparing Transistion for Webpages5:48
Design and implement a page transition for the shop button in a figma prototype, duplicating the main page, adjusting frames, color, and checkout content.
14.Creating BurgerRollOver Button6:05
15.Setting Webpage For ShopNow Page8:34
16.Giving Functionality For ShopNow Page5:51
17.Designing Learning WebPage8:38
Design a landing page in Figma with a 1920 by 1080 canvas, feature three chef instructors with dummy names and 20 years of experience, and add a checkout button.
18.Prototyping For Learning Page4:14

1.Creating a Logo For Our App5:11
2.Creating RollOver Button5:38
3.Preparing Additional Elements for App3:17
4.Prototyping For UISecondPage11:08
Create interactive user interface prototypes in Figma with rollover states, opacity and color changes, and grouped components; configure smart animate transitions and mobile tap interactions.
5.Creating Transistion Animation Between First & Second Pages7:31
6.Explaining ViewMeals page Design Process2:20
7.Giving Functunality For ViewMeals Button17:17
8.Designing a New Page8:49
9.Giving Functanulaity For Corn Page8:13
10.Creating Radial Buttons & Creating Payment Page15:23
11.Preparing PayPal Page For Connection3:45
12.Creating Your Order Is SucessFully Placed Page(TimeLapse)3:35
13.Finishing Our Prototyping2:22

1.Expaning The Breakdown of ImageScale Rollover Protype Animation5:09
2.Explaining The Breakdown of Circular Text Animation6:04
3.Explaining The Foward and Backward Button Breakdown3:54
4.Explaining The Breakdown of Photoslide Animation7:21
5.Continuning PhotoSilde Animation breakdown4:07
6.Finishing the PhotoslideAnimation Breakdown4:55
Master the finishing touches of the photoslide animation by duplicating frames, revealing masked text, and animating items with y and x translations using smart animate in a Figma prototyping workflow.
7.Explaining The Cancel button breakdown5:11

Requirements

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

Description

Unlock the full potential of your design skills with the "Figma 2024 Monster Course: Mastering Design & Prototyping with Advanced Techniques and Real-World Projects." This comprehensive 7 hour course, is designed for beginners and intermediate designers looking to elevate their craft.

Starting with the basics, you’ll learn to navigate the Figma interface, create and manage layers,and many more and master essential tools. As you progress, dive into advanced design techniques like creating and using components, applying auto layout, and building robust design systems. The course also covers the latest prototyping features, enabling you to create interactive and animated prototypes, conduct user tests, and gather valuable feedback.

Collaboration is key in modern design workflows, and you'll explore Figma's real-time collaboration features, version control, and integrations with other tools. Practical projects such as designing a landing page, mobile app, and user dashboard will solidify your learning. Additionally, dedicated modules on accessibility and design best practices ensure your work is both beautiful and inclusive.

Advanced topics like design tokens, responsive design, and the Figma API will prepare you for any design challenge. Finally, build and present a compelling portfolio to showcase your skills to potential clients or employers. Join us and transform your design journey with Figma!. Come on Enroll this Course Became Apart in This Creative Journey

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 2024 Monster Course: Mastering Design & Prototyping

What you'll learn

Explore related topics

Course content

Introduction8 lectures • 38min

Section24 lectures • 26min

Section311 lectures • 1hr 47min

Section418 lectures • 2hr 2min

Section513 lectures • 1hr 34min

Section67 lectures • 37min

Requirements

Description

Who this course is for: