Figma 2022: The Absolute Beginner to Pro Class in under 2h!

Everything you need to know about Figma as a UX/UI Designer.

Figma 2022: The Absolute Beginner to Pro Class in under 2h!

Instructors:

Chris @ moonlearning

Description:

In this class, I am going to teach you everything you need to know about Figma as a UX/UI Designer.

We will start from zero, setting up an account and getting to know the Figma structure.

I will then introduce you to the brief as throughout the course we will work on a real project to create a tracking app from the first stroke to finish design.

We will start with setting up a wireframe and flowchart using Figma whereby I will show you all the Figma basics such as

  • Setting up frames

  • Adding shapes, text, and color

  • Vector drawings in Figma

  • learn about the layers panel, grouping, and positioning

  • The magic of auto layout

  • Using pages in Figma for structure

  • Creating simple flow charts

We will then bring the wireframe alive and set up the UI Design, where we will get to know powerful features such as

  • Styles for your color and typography settings to create a hierarchy

  • Setting up Grids in Figma

  • Learn about components and variants, a must for any UX/UI Designer

  • Use constraints to test your design on different screen sizes

  • Learn how to use the Figma community section

  • Clipping and fixing elements for presentation mode

To finish off I will show you how to create a team library and share your files with your design and development team the right way.

In under two hours, you will find out everything about Figma that you need to tackle any project. Let's start!



Course content:

  • Get Bonus Downloads Here.url (0.2 KB)
  • ~Get Your Files Here !1. Introduction, Project & Course Material
    • 1. What Is Figma Who Does the Coding.mp4 (15.3 MB)
    • 1. What Is Figma Who Does the Coding.srt (2.5 KB)
    • 2. Course Project ? What We Will Build.mp4 (22.0 MB)
    • 2. Course Project ? What We Will Build.srt (3.0 KB)
    • 3. Course Material.mp4 (10.2 MB)
    • 3. Course Material.srt (2.2 KB)
    2. Setup
    • 1. Getting Figma The Registration Process.mp4 (9.6 MB)
    • 1. Getting Figma The Registration Process.srt (2.2 KB)
    • 2. Understanding the Figma Working Structure.mp4 (17.9 MB)
    • 2. Understanding the Figma Working Structure.srt (4.2 KB)
    • 3. Figma in the Browser vs. Figma App.mp4 (5.8 MB)
    • 3. Figma in the Browser vs. Figma App.srt (1.9 KB)
    3. Learning the Figma Basics - Let's make a wireframe
    • 1. Setting up First Frames.mp4 (6.5 MB)
    • 1. Setting up First Frames.srt (2.6 KB)
    • 10. Changing Colour Strokes and Fills.mp4 (5.5 MB)
    • 10. Changing Colour Strokes and Fills.srt (1.7 KB)
    • 11. Creating Styles in Figma.mp4 (11.1 MB)
    • 11. Creating Styles in Figma.srt (3.3 KB)
    • 12. Working with Components and Instances.mp4 (34.7 MB)
    • 12. Working with Components and Instances.srt (5.1 KB)
    • 13. Pages in Figma.mp4 (14.9 MB)
    • 13. Pages in Figma.srt (3.7 KB)
    • 14. Creating a Simple Flowchart With a Plugin.mp4 (25.4 MB)
    • 14. Creating a Simple Flowchart With a Plugin.srt (3.7 KB)
    • 15. Figma Community Section.mp4 (20.7 MB)
    • 15. Figma Community Section.srt (3.2 KB)
    • 16. Auto Layout Introduction.mp4 (12.0 MB)
    • 16. Auto Layout Introduction.srt (2.9 KB)
    • 17. Nested Auto Layout ? Building a Nested Card.mp4 (23.4 MB)
    • 17. Nested Auto Layout ? Building a Nested Card.srt (4.1 KB)
    • 18. Finishing off Our Wireframe.mp4 (14.5 MB)
    • 18. Finishing off Our Wireframe.srt (2.8 KB)
    • 2. A little Favor.mp4 (2.5 MB)
    • 2. A little Favor.srt (1.0 KB)
    • 3. Useful Shortcuts - Pan Zoom and More.mp4 (10.4 MB)
    • 3. Useful Shortcuts - Pan Zoom and More.srt (1.9 KB)
    • 4. Adding Shapes to a Frame.mp4 (4.8 MB)
    • 4. Adding Shapes to a Frame.srt (2.1 KB)
    • 5. Duplicating.mp4 (5.1 MB)
    • 5. Duplicating.srt (1.6 KB)
    • 6. Drawing in Figma.mp4 (6.3 MB)
    • 6. Drawing in Figma.srt (1.9 KB)
    • 7. Creating Groups.mp4 (7.2 MB)
    • 7. Creating Groups.srt (2.0 KB)
    • 8. Adding and Styling Text.mp4 (11.3 MB)
    • 8. Adding and Styling Text.srt (3.3 KB)
    • 9. Positioning Alignment and Nudging.mp4 (4.7 MB)
    • 9. Positioning Alignment and Nudging.srt (1.7 KB)
    4. Setting up the UI Design
    • 1. Organising our File to Start the UI Design.mp4 (8.8 MB)
    • 1. Organising our File to Start the UI Design.srt (2.1 KB)
    • 10. More About Variants - Creating the Calendar Bar.mp4 (25.9 MB)
    • 10. More About Variants - Creating the Calendar Bar.srt (4.5 KB)
    • 11. More Constraints- Creating a Responsive Calendar.mp4 (23.3 MB)
    • 11. More Constraints- Creating a Responsive Calendar.srt (3.3 KB)
    • 12. Scaling in Figma - Building the Mood Pages.mp4 (14.4 MB)
    • 12. Scaling in Figma - Building the Mood Pages.srt (2.2 KB)
    • 13. Clipping Content - Building the Magazine Pages.mp4 (31.2 MB)
    • 13. Clipping Content - Building the Magazine Pages.srt (4.3 KB)
    • 2. What Frame Size Should I Be Using.mp4 (24.6 MB)
    • 2. What Frame Size Should I Be Using.srt (3.4 KB)
    • 3. Setting up Grids in Figma.mp4 (9.8 MB)
    • 3. Setting up Grids in Figma.srt (2.7 KB)
    • 4. Colour Styles and Naming Conventions.mp4 (11.6 MB)
    • 4. Colour Styles and Naming Conventions.srt (3.1 KB)
    • 5. Setting up a Typescale.mp4 (16.6 MB)
    • 5. Setting up a Typescale.srt (3.6 KB)
    • 6. Images in Figma.mp4 (12.9 MB)
    • 6. Images in Figma.srt (2.8 KB)
    • 7. Responsive Layouts With Constraints.mp4 (18.8 MB)
    • 7. Responsive Layouts With Constraints.srt (4.3 KB)
    • 8. Boolean Operations in Figma.mp4 (25.1 MB)
    • 8. Boolean Operations in Figma.srt (3.4 KB)
    • 9. Nested Components and Variants.mp4 (27.5 MB)
    • 9. Nested Components and Variants.srt (4.9 KB)
    5. Presenting your Work
    • 1. Presentation Mode with Scrollable and Fixed Elements.mp4 (14.5 MB)
    • 1. Presentation Mode with Scrollable and Fixed Elements.srt (2.1 KB)
    • 2. Figma Mirror ? Preview on Your Device.mp4 (10.3 MB)
    • 2. Figma Mirror ? Preview on Your Device.srt (1.3 KB)
    6. Sharing Files With Designers and Developers
    • 1. Sharing Files With Designers and Developers.mp4 (18.1 MB)
    • 1. Sharing Files With Designers and Developers.srt (2.8 KB)
    • 2. Figma Inspect Panel.mp4 (9.7 MB)
    • 2. Figma Inspect Panel.srt (1.2 KB)
    • 3. Exporting Assets.mp4 (13.4 MB)
    • 3. Exporting Assets.srt (2.9 KB)
    • 4. Figma Team Library.mp4 (11.3 MB)
    • 4. Figma Team Library.srt (3.7 KB)
    • 5. Setting up a Thumbnail.mp4 (12.1 MB)
    • 5. Setting up a Thumbnail.srt (2.1 KB)
    7. Extra Demystifying Resolution, Points & Pixels
    • 1. Points Pixel and Screen Resolution.mp4 (2.8 MB)
    • 1. Points Pixel and Screen Resolution.srt (1.9 KB)
    • 2. Why We Design at 1x.mp4 (8.0 MB)
    • 2. Why We Design at 1x.srt (2.7 KB)
    • 3. Getting Best Results on All Resolutions.mp4 (12.1 MB)
    • 3. Getting Best Results on All Resolutions.srt (4.3 KB)
    • 4. Summary.mp4 (1.4 MB)
    • 4. Summary.srt (0.6 KB)
    8. Extra Colours
    • 1. Pick Mix and Match Colours Like a Pro.mp4 (20.0 MB)
    • 1. Pick Mix and Match Colours Like a Pro.srt (5.6 KB)
    • 2. Colour Inspiration.mp4 (29.7 MB)
    • 2. Colour Inspiration.srt (3.3 KB)
    • 3. Naming Colours.mp4 (4.8 MB)

Download this course:

file type : Torrent
Files :
  • Torrent 1731.3 MB
*select one of the torrent file above to download the course
source: https://www.udemy.com/course/figma-beginner/

Top reviews:

GB
Guy Briggs

This was the perfect course both in content and in length for ramping up quickly on Figma, especially if you're coming from another tool such as Sketch and you're already comfortable with its feature set.

TS
Tina S.

Toller Einstiegskurs, dem Inhalt konnte ich gut folgen, gut strukturiert und professionell umgesetzt, angenehme Sprecherin. Leider wurde das Thema "Prototyping" nur sehr, sehr kurz angeschnitten.

MK
Michele Kong

There is some great content here. However, this is not a follow along course -- it moves way too fast. You can see where the video has been sped up, trimmed and faded together. The instruction is then voiced over. -- There is no way anyone is moving a mouse that fast. This is probably a great refresher for someone who has worked in Figma before, but it is not for new users seeking to learn the software for the first time.

CS
Chikondi Sinalo

I have had such a great learning experience doing this course. So much content packed in under 2hours of video. The instructor explains the concepts so well and it is very easy to follow. I will definitely recommend this tutorial to anyone starting with figma, especially if they are tight with time.

VM
Victoria Maxfield

I like the voice of the teacher and the slow pace, however somethings she's saying are confusing because it is different than what is reflected in the actual Figma app.

MT
Madi Tirrell

Great course! Before this, I had only used Adobe XD for building app designs and wasn't very familiar with app design in general, so this course was super helpful. Lots of great tips + best practices for using Figma. Thanks!

RDL
Robecca De Leon

This is a great course for beginners; covers all the topics or information you should know to get started with Figma and create your portfolio.

EP
Elisa Pires

Amazing course! I was searching for a course to get started with Figma and I'm glad I opted for this one! It covers all major topics in a simple and well explained way. Good explanation of Auto Layout and files organisation! I would recommend you to apply the exercises while watching the videos to practice everything you're learning.

LS
Lilach Senesh

i had stuck on understanding the creating team sice i had allready had afile open... didnt understand auto layout at all....

TM
Thomas Maus

The course helped me a lot to understand Fifma and to manage my projects on Figma. I found it very good that everything was explained at a comfortable speed, since as a German I don't speak perfect English :) Great course!

SC
Summer Carstens

This was exactly what I was looking for in a course - it goes over the basics to get started without getting bogged down in too many details.

HS
Harjeet Singh

I expect professional info about figma ux design


Similar courses: