Learn Figma in under 7h! - Start from scratch

Focused View

Telos Agency

6:17:03

184 View

1. Introduction to Figma

1. Introduction to the course.mp4

01:41

2. Introduction to Figma.mp4

02:22

3. Install Figma.mp4

03:13

4. Figma Main Interface.mp4

04:13

5. Properties Sections.mp4

15:22

6. Figma's Most Basic Tools.mp4

14:30

7. Drawing Vectors in Figma.mp4

10:58

8. Summary and Exercises.mp4

06:36

2. Frame

1. Introduction of Frame.mp4

02:58

2. Creating and Working with Frame.mp4

02:48

3. Comparison Between Frame & Group.mp4

05:09

4. Frames Constraints - a Super Tool for Responsive.mp4

10:43

5. Chapter summary and exercises.mp4

04:41

3. Auto Layout

1. Introduction of Auto layout.mp4

03:55

2. Auto layout and text.mp4

02:34

3. How to create an Autolayout.mp4

04:06

4. Main Properties of Auto Layout.mp4

06:15

5. Resizing in Auto layout.mp4

11:12

6. Complex Integration in Auto Layout.mp4

15:40

7. Demos and Usability.mp4

10:06

8. Auto Layout Exercises Designing chat box.mp4

04:47

4. ComponentInstanceVariants

1. Introduction to Component and Instance.mp4

07:12

2. Rules of component.mp4

14:30

3. How to Use Component and Instances.mp4

11:09

4. Variants - Quality upgrade.mp4

05:08

5. Properties of Variants.mp4

09:33

6. Examples of Variants.mp4

04:32

7. Component Exercises Creating a Calendar with Component.mp4

03:09

8. Create Responsive Table.mp4

01:38

5. System

1. What is style.mp4

03:04

2. Working With Color Style.mp4

06:12

3. Work on Text Style.mp4

05:08

4. Application in Practice.mp4

05:28

5. Other Styles.mp4

03:23

6. Grid in Figma.mp4

10:28

7. Icon System.mp4

03:24

6. Practice

1. WebApp Design Process.mp4

09:34

2. Draw sitemap with FigJam.mp4

04:15

3. Use Figma to Draw Wireframe.mp4

20:16

4. Styling for UI Design.mp4

10:13

5. Turning a wireframe to a UIUX design.mp4

14:19

7. Prototype

1. Introduction to Prototype In Figma.mp4

02:10

2. Creating Interaction.mp4

04:02

3. Setup Prototype.mp4

05:07

4. Interaction Attributes.mp4

02:58

5. Overlay and Overlay properties.mp4

07:17

6. Animation In Figma Prototype.mp4

06:43

7. Smart Animate.mp4

04:14

8. Smart Animate Characteristics.mp4

05:14

9. Scrolling in Prototype.mp4

13:02

10. Interactive component.mp4

06:00

11. Smart Animate Exercise Loading Screen.mp4

04:59

12. One-Page Menu.mp4

01:53

13. Header scroll-down menu.mp4

02:19

8. Summary

1. Summary.mp4

07:56

2. Goodbye.mp4

06:45

Description

Learn Figma from the basics to working professionally!

What You'll Learn?

How to use Figma proficiently.
How to make fully interactive prototypes.
Introduction to Figma interface, tools and tips to improve your design workflow.
Wireframe and Design your own App idea using Figma.
Learn about grids and breakpoints for multiple screen sizes.
Learn about auto-layout, components, and variants with practical examples.
Export and share Figma prototype with other stakeholders.

Who is this for?

Anyone who wants to switch over from another design software to Figma.

Newbies, beginners and amateurs in the field of UI/UX design.

More details

Description
What does this course have?
In this course, youâ€™re going to learn everything about user interface design with Figma.

Firstly, youâ€™ll learn all of the tools, as well as how and when to use them. Then weâ€™ll move to Auto Layout, Responsive design and a few advanced things. During the course, you will learn about the principles of User Interface Design in order to design with purpose. Finally, youâ€™ll know how to create a team library and share your files with your design and development team the right way.

After taking this course, you will be able to:
Achieve an understanding of the process, purpose, and tools of prototype design.
Use constraints to test your design on different screen sizes.
Create your own icons, buttons & other UI components.
Work with fonts & colors.
Have a knowledge of the principles of User Interface Design in order to design with purpose.
How to create interactive calendars.
How to create simple wireframes.
Build a simple Style Guide ready for client handoff.
How to animate in Figma.
Learn to use Smart Animate in Figma.
Get the gift of Figma Design Notebook Ebook that is compiled with additional knowledge, systematized and updated in batches, ensuring never to be out of step with the times.
Who this course is for:
Anyone who wants to switch over from another design software to Figma.
Newbies, beginners and amateurs in the field of UI/UX design.

User Reviews

Rating

average 0

Total votes0

Focused display

A branding/web design Agency based in Saigon, Vietnam. We have a team of experienced designer, creative leader, web developer, and we are here to provide knowledge about Figma, Front-end, Web/UI/UX Design.--------Meet our Instructors:Nhân Lưu - TELOS Creative Leader - Figma Instructor. With more than 3 years using and teaching Figma for 150+ students all over Việt Nam.Toàn Bùi - TELOS CTO - Front-end Instructor. With more than 10 years experiences of a Developer/ Tech leader.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.