NEW Figma 2024: Getting started the Beginner to Pro Class

The essentials you need to know to become a UI Designer with Figma. The only course recorded after the Figma23 features!

4.78 (885 reviews)
Udemy
platform
English
language
Design Tools
category
3,511
students
5 hours
content
Nov 2023
last update
$74.99
regular price

What you will learn

Setup your own free Figma account!

Setting up UI Designs with Figma

Setup a complete User Interface Design with Figma

Share your work with other Designers and Developers

Make your Designs Shine in Presentation Mode

Basic Prototyping with Figma

Creating reusable elements with components

Advanced component sets with variants

Understanding variables and styles

Keeping up to date with latest releases

Share and document your design with development

Create shared team libraries

Creating simple style guides for colour, typography and spacing

Creat simple micro interactions for buttons and hover

Work as a team

Freebees to be used right away in your designs

Figma exercise files so you can work alongside me

Description

Getting Started with Figma + Optional Course Project and Figma file

A beginner's course in UX/UI design with Figma 

This course is a comprehensive introduction to Figma from absolute Figma beginner to advanced features. Short and focused, providing you with all you need to know to tackle any design.

We'll start from scratch by setting up your Figma account and familiarising ourselves with its file structure. Then, we'll dive into the fundamentals of Figma, such as setting up frames and nesting them, adding shapes, text, colours, and grids, and creating solid UI designs. Once you're comfortable with the basics, we dive into more advanced subjects like creating solid UI designs and working with components for reusable elements.

We will add styles and variables for consistency, create responsive designs with auto layout, and add basic prototyping to bring our designs alive, always keeping collaboration with development in mind.

With step-by-step exercises and valuable tips and tricks, you'll become proficient in Figma in under 4 hours. It's perfect for beginners or those switching from other design software like Sketch or Adobe XD to Figma.


Getting Started

1. Getting Figma - Registration Process

2. Figma in the Browser vs. Figma App

3. The Figma file browser – Figma's home

4. Creating design files in Figma


Figma Basics

  1. Adding frames to our file

  2. A few handy shortcuts

  3. Design file overview

  4. Adding shapes and colour

  5. Size menu – manipulating shapes and frames

  6. Align, tidy up, and measure

  7. Adding and working with text

  8. Nesting frames – The Figma superpower

  9. Frames vs Groups

  10. Designing with nested frames

  11. Re-usable grids with styles

  12. Figma Community and Plugins

  13. Adding images

  14. Drawing in Figma

  15. Scaling in Figma

  16. Optional Course Project Part 1: Building a wireframe and design


Introducing Components

  1. Re-use elements with components and instances

  2. Overriding instances

  3. What to override and what not to

  4. Reverting components and overrides

  5. Nest components

  6. Component sets with variants

  7. Move components to their own page

  8. Keeping components organised

  9. Advanced component features introduction

  10. Optional Course Project Part 2: Turning our design into a component-based design


Variables and Styles

  1. Introduction to variables

  2. Working with colour variables

  3. Organising with variable collections and groups

  4. Size and spacing variables

  5. And what about styles?

  6. Typography and styles

  7. Documenting variables and styles

  8. Optional Course Project Part 3: Adding variables and styles to our app


Responsive Design

  1. What is auto layout?

  2. Adding auto layout

  3. Auto layout components and variables

  4. Resize settings

  5. Auto or space between

  6. Nesting auto layout with system

  7. Absolute positioning

  8. Auto layout pages

  9. Constraints in Figma

  10. Constraints and grids

  11. Which frame size should I use?

  12. Optional Course Project Part 4: Making our app responsive


Basic Prototyping

  1. Prototyping in Figma

  2. Setting scroll behaviour

  3. Connecting screens

  4. Dropdown menu with overlays

  5. Animation types

  6. Interactive components

  7. Figma Mirror – Preview on your device

  8. Optional Course Project Part 5: Bring our design alive with prototyping


Sharing with other designers and developers

  1. Sharing and inviting others

  2. Setting up a thumbnail

  3. Shared team libraries in Figma

  4. Setting up a shared team library

  5. Connecting to a shared team library

  6. Updating shared team libraries

  7. Sharing design, components, styles, and variables

  8. Dev mode: Sharing with development


Utilize Figma to enhance your prospects in UI Design, User Interface, User Experience Design, UX Design, and Web Design, facilitating your path to secure a job working with UX/UI Design in Figma

This is an original course by moonlearning

Content

Introduction, Project & Course Material

What Is Figma? Who Does the Coding?
Course Project – What We Will Build
Course Material

Setup

Getting Figma: The Registration Process
Understanding the Figma Working Structure
Figma in the Browser vs. Figma App

Learning the Figma Basics - Let's make a wireframe

Setting up First Frames
A little Favor
Useful Shortcuts - Pan Zoom and More
Adding Shapes to a Frame
Duplicating
Drawing in Figma
Creating Groups
Adding and Styling Text
Positioning Alignment and Nudging
Changing Colour Strokes and Fills
Creating Styles in Figma
Working with Components and Instances
Pages in Figma
Creating a Simple Flowchart With a Plugin
Figma Community Section
Auto Layout Introduction
Nested Auto Layout – Building a Nested Card
Finishing off Our Wireframe

Setting up the UI Design

Organising our File to Start the UI Design
What Frame Size Should I Be Using?
Setting up Grids in Figma
Colour Styles and Naming Conventions
Setting up a Typescale
Images in Figma
Responsive Layouts With Constraints
Boolean Operations in Figma
Nested Components and Variants
More About Variants - Creating the Calendar Bar
More Constraints- Creating a Responsive Calendar
Scaling in Figma - Building the Mood Pages
Clipping Content - Building the Magazine Pages

Presenting your Work

Presentation Mode with Scrollable and Fixed Elements
Figma Mirror – Preview on Your Device

Sharing Files With Designers and Developers

Sharing Files With Designers and Developers
Figma Inspect Panel
Exporting Assets
Figma Team Library
Setting up a Thumbnail

Extra: Demystifying Resolution, Points & Pixels

Points Pixel and Screen Resolution
Why We Design at 1x
Getting Best Results on All Resolutions
Summary

Extra: Colours

Pick Mix and Match Colours Like a Pro
Colour Inspiration
Naming Colours
60 30 10 Rule of Colour Distribution

Before you go

Thank you!

Screenshots

NEW Figma 2024: Getting started the Beginner to Pro Class - Screenshot_01NEW Figma 2024: Getting started the Beginner to Pro Class - Screenshot_02NEW Figma 2024: Getting started the Beginner to Pro Class - Screenshot_03NEW Figma 2024: Getting started the Beginner to Pro Class - Screenshot_04

Reviews

Deren
June 13, 2023
Course is overall amazing. Just a little too quick on some sections but perfectly understandable when repeated.
Steven
June 12, 2023
I found myself pausing often to catch some of the details when the video speed up. Also i was working on the updated figma which threw me off a bit on the most complex parts - auto animations.
Rachel
June 1, 2023
Too fast. Also, not explaining everything. Eg How will I know if fonts are missing and I need to upload them? Where would I look to see that notification?
Lorena
May 28, 2023
I just watched the whole thing as fast as possible, and now will go an repeat lesson by lesson—it's a lot to take in! But a great introduction to this software, because I had not been able to find something to start really from scratch. The color section was fascinating, but I would have loved to get a little bit more insight about how to experience the interactions in the prototypes. What kinds of simple functions can a user experience with the prototype? Is it only scrolling and then moving from one page to another, or is there something else, like micro animations or other functions that I am missing here?—and if this course could not cover them (which I suppose is the case)—what would be the next step, either resources or even the next course of this series?
Sajit
May 26, 2023
I'm experienced in Axure/Sketch and have been in UX design for the last 9 years. I've searched and watched multiple tutorials by great YouTubers but I just could not fully grasp how to properly use Figma. I then did more searching and found this course and it has given me a clear understanding of how to use Figma. Christine is a great communicator and her teaching method is easy to digest. I feel a lot more confident in using Figma now, thanks, Christine!
Giasemi
May 23, 2023
As a newbie in Figma I found this an all around helpful intro to it. I loved that it was an on point summary of the app without trying to do too much at once and that it instead focused on providing basic understanding of all aspects of Figma and UI design.
Chirag
May 7, 2023
Once more, thank you for a wonderful and engaging descriptive course. I appreciated how well organized and precise you were in your explanations. I anticipate receiving more courses from you. Thanks!
Erin
May 5, 2023
I had a later version of Figma and it was difficult to follow some of the steps since things have changed since the earlier version that was used in this video. I really liked it though. Some areas went way to fast for me and I had to replay multiple times to get it.
Martynas
April 15, 2023
It really gives you some great concepts about Figma. Also, quite a bit of extra information about the design process and certain rules. The only negative point would be that it was difficult to follow the examples in the course - one has to pause & play many times to catch up. All in all, the course is still amazing & I definitely recommend it to a Figma beginner.
Sara
March 20, 2023
The course is set to fast-forward when showing how a particular style is adjusted in Figma, and it is really frustrating. We all know how to change the playback speed, and we do not need 2 hours of course where we will need to stop and pause every two minutes when you decide to change the playback speed and skip the important parts. The course itself would be really good, but this just ruins it for me.
J
March 18, 2023
Good Vocal Presentation - But I do agree with a lot of the comments that the Screen recordings are too quick. The instructor clearly knows what they are doing - I think sometimes that's the problem. When you know a piece of software so well, you kind of forget to slow down to ensure that those who are much less familiar with the software pick up the basics. I would recommend this course, but if you are just starting out maybe check out Daniel Walter Scott's Figma course too.
Olivier
March 16, 2023
Excellent intro to figma (and design) for a complete novice. Very clear. Very short. And a very good voice. My only comment is that it is maybe too short. I build everything along with you in figma and this enormously improved my knowledge. But for that I needed to scroll back quite often as the nitty gritty is not the goal of the course. So maybe take a bit more time and add a bit more detail so that novice people can really build it. Thanks again!!
Rachael
March 15, 2023
Excellent course delivered by moon learning. As a digital designer using Adobe XD, this course was a great stepping stone into Figma, covering a lot of the basic topics in an easy to understand way. Could do with a few more demonstrations to learn the more complex elements of frames vs groups, auto layout etc.
Dirk
March 13, 2023
I'm liking it. Still very much an overview, and how to perform things are not given enough instruction, or a reference to learn otherwise (i.e., using cure drawing).
Dana
March 10, 2023
Really clear instructions and explanations on how to complete the project from wireframe to finished design. Enjoyed learning lots of cool tips and tricks too!

Charts

Price

NEW Figma 2024: Getting started the Beginner to Pro Class - Price chart

Rating

NEW Figma 2024: Getting started the Beginner to Pro Class - Ratings chart

Enrollment distribution

NEW Figma 2024: Getting started the Beginner to Pro Class - Distribution chart
4587612
udemy ID
3/9/2022
course created date
3/18/2022
course indexed date
Bot
course submited by