NEW Figma 2024: Getting started the Beginner to Pro Class from Udemy

Getting Started with Figma (4h) + Course Project

A beginner's to pro course in UI design with Figma

NEW. Full Config 2024 Update Featuring the New Figma UI Design.

This course is a comprehensive introduction to Figma from absolute 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 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.

You'll learn how to establish styles and variables for consistency, create responsive designs with auto layout, and add basic prototyping to bring your designs to life—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 transitioning from other design software.

Setup

What Is Figma? Who does the coding?
Figma in the Browser vs. Figma App
The Figma file browser – Figma's home
Creating design files in Figma

Figma Basics

Adding frames to our file
A few handy shortcuts
Design file overview
Adding shapes and colour
Size menu – manipulating shapes and frames
Align, tidy up, and measure
Adding and working with text
Nesting frames – The Figma superpower
Frames vs Groups
Designing with nested frames
Re-usable grids with styles
Figma Community and Plugins
Adding images
Drawing in Figma
Scaling in Figma
Course Project: Creating a wireframe and first design

Introducing Components

Re-use elements with components and instances
Overriding instances
What to override and what not to
Reverting components and overrides
Nest components
Component sets with variants
Move components to their own page
Keeping components organised
Advanced component features introduction.
Course Project: Turning our design into components

Variables and Styles

Introduction to variables
Working with colour variables
Organising with variable collections and groups
Size and spacing variables
And what about styles?
Typography and styles
Documenting variables and styles
Course Project: Adding colour variables and text styles

Responsive Design

What is auto layout?
Adding auto layout
Auto layout components and variables
Resize settings
Auto or space between
Nesting auto layout with system
Absolute positioning
Auto layout pages
Constraints in Figma
Constraints and grids
Course Project: Testing our app on different phone sizes

Basic Prototyping

Prototyping in Figma
Setting scroll behaviour
Connecting screens
Dropdown menu with overlays
Animation types
Interactive components
Figma Mirror – Preview on your device
Course Project: Turning our app into a clickable prototype

Sharing with other designers and developers

Sharing and inviting others
Setting up a thumbnail
Shared team libraries in Figma
Setting up a shared team library
Connecting to a shared team library
Updating shared team libraries
Sharing design, components, styles, and variables
Dev mode: Sharing with development

This is a course idea and production by moonlearning

What's inside

Learning objectives

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
Show more
Show less

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
Show more
Show less

Syllabus

Welcome

Promo

What is Figma and who does the coding?

Get the Figma working file!!!

Download the Figma working file here!

Setup

Figma in the Browser vs. Figma App

The Figma file browser – Figma's home

Creating design files in Figma

Figma Basics

Make sure you have your file ready!

Please make sure you downloaded the working files to follow along!!! (see link and instructions in the last section)

A few handy shortcuts

Design file overview

Adding shapes and colour

Size menu – manipulating shapes and frames

Align, tidy up, and measure

Adding and working with text

Nesting frames – The Figma superpower

Frames vs Groups

Designing with nested frames

Re-usable grids with styles

Figma Community and Plugins

Adding images

A little favour

Duplicating

Drawing in Figma

Scaling in Figma

COURSE PROJECT Introduction

A word on the changing UI

COURSE PROJECT Part 1.1: making our wireframe

COURSE PROJECT Part 1.2: Wireframe to design

Introducing Components

Re-use elements with components and instances

Resize settings: Responsive Cards

Overriding instances

What to override and what not to

Reverting components and overrides

Nesting components

Component sets with variants

Move components to their own page

Keeping components organised

A word on the new UI

COURSE PROJECT Part 2: Turning our design into components

Variables and Styles

Introduction to variables

Working with color variables

Organising with variable collections and groups

Size and spacing variables

And what about styles?

Typography and styles

Documenting variables and styles

COURSE PROJECT Part 3.1: Adding colour variables

COURSE PROJECT Part 3.2: Adding Text Styles

Responsive Design

What is auto layout?

Setting up auto layout frames

Auto layout components and variables

Auto or space between

Nesting auto layout and understanding the parent-child relationship

Automating auto layout with suggest auto layout

Ignore auto layout

Auto layout pages

Constraints in Figma

Constraints and grids

Which frame size should I use?

COURSE PROJECT Part 4: Making our design responsive

Basic Prototyping

Prototyping in Figma

Setting scroll behaviour

Connecting screens

Dropdown menu with overlays

Animation types

Interactive components

Figma Mirror – Preview on your device

COURSE PROJECT Part 5: Turning our design into a prototype

Sharing with other designers and developers

Sharing and inviting others

Setting up a thumbnail

Shared team libraries intro

Figma team library set up

Moving components to libraries

Sharing design, components, styles, and variables

Dev mode: Sharing with development

Extra: Demystifying Resolution, Points & Pixels

Points Pixel and Screen Resolution

Why We Design at 1x

Getting Best Results on All Resolutions

Summary

Pick Mix and Match Colours Like a Pro

60 30 10 Rule of Colour Distribution

Archive old course

You might have started this course with the previous version, and I want to make sure that you can continue accessing it. However, I strongly recommend that you use the new and updated version above.

I moved the old version to a separate archive course, and you will have lifelong access:

Access link: https://www.udemy.com/course/figma-archive-beginner/?referralCode=E9410AC40B9A78BF4E09

Password: Figma

Before you go

Thank you!

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Covers variables and styles, which are essential for maintaining consistency and efficiency in UI/UX design projects, especially when working in teams

Explores component sets with variants, which allows designers to create flexible and reusable UI elements, streamlining the design process and ensuring consistency across projects

Includes a section on sharing designs with developers using Dev Mode, which facilitates better collaboration and ensures accurate implementation of designs

Teaches basic prototyping, which allows designers to create interactive mockups and test user flows, improving the overall user experience

Requires downloading working files to follow along, which may pose a challenge for learners with limited internet access or storage space

Features a section on responsive design using auto layout, enabling designers to create interfaces that adapt seamlessly to different screen sizes and devices

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in NEW Figma 2024: Getting started the Beginner to Pro Class with these activities:

Review Basic Design Principles

Show steps

Reinforce fundamental design principles to create more effective and visually appealing Figma designs.

Show steps

Study the principles of visual hierarchy and apply them to existing designs.
Explore color theory and experiment with different color palettes.
Practice typography pairing and readability.

Read 'Don't Make Me Think, Revisited'

Show steps

Understand usability principles to create more intuitive and user-friendly Figma designs.

View Don't Make Me Think, Revisited: A Common Sense... on Amazon

Show steps

Read a chapter of 'Don't Make Me Think' and identify key usability principles.
Analyze a Figma design for usability issues.
Apply usability principles to improve the design.

Read 'Refactoring UI'

Show steps

Learn practical UI refactoring techniques to improve the visual quality and usability of Figma designs.

View Melania on Amazon

Show steps

Read a chapter of 'Refactoring UI' and identify key takeaways.
Apply one refactoring technique to a Figma project.
Document the changes and the rationale behind them.

Four other activities

Expand to see all activities and additional details

Show all seven activities

Component Creation Challenge

Show steps

Improve component creation skills through repetitive exercises focused on variants and properties.

Show steps

Create a component with multiple variants.
Add properties to control the component's appearance.
Test the component in different contexts.

Design a Mobile App Interface

Show steps

Apply Figma skills to create a complete mobile app interface, reinforcing knowledge of components, auto layout, and prototyping.

Show steps

Define the app's purpose and target audience.
Create wireframes for key screens.
Design the UI using Figma components and styles.
Prototype the user flow and interactions.

Create a Figma Tutorial

Show steps

Solidify understanding by creating a tutorial on a specific Figma feature or technique.

Show steps

Choose a Figma feature or technique to explain.
Create a short video or written tutorial.
Share the tutorial with the online community.

Contribute to a Figma Plugin

Show steps

Enhance Figma skills by contributing to an open-source plugin project, gaining experience with collaboration and advanced features.

Show steps

Find an open-source Figma plugin project on GitHub.
Identify a bug or feature to work on.
Submit a pull request with the changes.

Career center

Learners who complete NEW Figma 2024: Getting started the Beginner to Pro Class will develop knowledge and skills that may be useful to these careers:

User Interface Designer

A User Interface Designer crafts the visual elements people interact with in software, websites, and apps. This role involves creating designs that are both aesthetically pleasing and easy to use. This course focusing on Figma, a leading UI design tool, helps build the foundation for a career as a user interface designer by teaching skills from setting up frames and creating reusable components to handling responsive designs and basic prototyping. The course emphasizes a full workflow from start to finish, which is typical in the software industry. It also teaches styles, variables and team libraries which are crucial to professional interface design.

See salaries and explore the career path for User Interface Designer

Mobile App Designer

Mobile app designers focus on the user interface and experience of mobile applications, and this course will help in this field. The course provides a complete introduction to Figma, a tool commonly used in mobile app design. It covers aspects crucial for mobile design such as setting up frames, components, responsive layouts, and basic prototyping. The course includes a course project, which allows learners to practice skills relevant to mobile app design. The course's content on sharing design with developers makes it especially applicable in a mobile app designer's workflow.

See salaries and explore the career path for Mobile App Designer

Interaction Designer

Interaction designers focus on how users interact with a product, often creating prototypes to test these interactions. This course explores Figma, where designers can create these prototypes. The course provides instruction in creating interactive components and setting up basic prototyping, which directly relates to how interaction designers test and refine their designs. A key aspect of interaction design is user experience, which is influenced by the visual interface; this course covers the creation of that visual interface. Because this course teaches the full range of features in Figma, it is a good starting point for anyone looking to become an interaction designer.

See salaries and explore the career path for Interaction Designer

Digital Designer

Digital designers create visual assets for digital platforms, and this course using Figma as a design tool helps build a foundation for a career in this field. The course covers the complete range of Figma’s capabilities, from adding shapes, text and colors to working with components, variables, styles, and auto layout. This is a practical skillset with application to many types of digital assets and products. Digital designers will find the course helpful as it teaches how to design and prototype in a team environment. This course may assist someone wishing to become a digital designer.

See salaries and explore the career path for Digital Designer

Web Designer

Web Designers create the look and feel of websites, and this course provides a strong start with Figma, a tool often used in the field. Web designers must understand the fundamentals of visual design and how elements work together on a webpage. This course explores UI design with Figma, from basic functionalities like adding shapes and text to more complex skills such as building components and responsive design. The course covers basic prototyping, which is also valuable in web design, enabling a web designer to create interactive demos of their designs. Web design typically requires knowledge of HTML, CSS and Javascript, but this course might be useful for the visual design aspects.

See salaries and explore the career path for Web Designer

Visual Designer

Visual designers focus on the aesthetic aspects of a product or brand. This course teaches design principles, and how to use Figma to implement them. The course covers the basics of using Figma, such as adding shapes, text, colors, and grids, and it proceeds into more advanced topics like reusable components, styles, and variables. The course also demonstrates how to create responsive designs, which is essential in visual design. This course may be useful for those wishing to become visual designers.

See salaries and explore the career path for Visual Designer

UX Designer

A UX designer improves the usability and overall experience of a product, and familiarity with design tools such as Figma is essential. This course introduces Figma and teaches skills in interface design, from simple elements to complex components. While UX design goes beyond just visual interface, a crucial element of UX is indeed the user interface, and this course provides knowledge in this area, including responsive design, basic prototyping, and style guides. This course may be useful for someone wishing to become a UX designer.

See salaries and explore the career path for UX Designer

Product Designer

Product designers are involved in the entire design process, from user research to creating the visual interface. This course in Figma will help someone looking to enter the product design field. The curriculum covers the fundamentals of setting up designs, creating components, establishing styles, and utilizing prototyping. A product designer will find these essential tools extremely useful. Additionally, this course's emphasis on working with variables, styles, and team libraries will help promote collaboration on a team, typical of product design environments. The course may help one wishing to become a product designer.

See salaries and explore the career path for Product Designer

Marketing Designer

Marketing designers create visual assets for marketing campaigns, and proficiency in a tool like Figma can be valuable for creating digital marketing materials. This course provides a comprehensive introduction to Figma capabilities, such as designing with frames, components and working with text, color and shapes, and these are all skills useful to a marketing designer. The course focuses on sharing and collaboration, which is also beneficial for marketing design teams. This course may be helpful for someone wishing to become a marketing designer.

See salaries and explore the career path for Marketing Designer

UI Developer

UI developers translate designs into code, and this course in Figma may be helpful by granting an understanding of the process. This course on Figma covers working with components, variables, styles and auto layout, which are useful to UI developers as they work with design assets. Furthermore, this course includes information about sharing designs with development which could be beneficial for developers learning the design-to-developer workflow. UI developers collaborate closely with designers, so understanding tools like Figma can aid communication and streamline the development process. This course may be useful for aspiring UI developers.

See salaries and explore the career path for UI Developer

Graphic designer

Graphic designers create visual content using various tools; this course teaches Figma, which is becoming more common in the field. This course provides a holistic introduction to Figma, which covers design fundamentals. While classic graphic design skills are often implemented in software like Adobe Photoshop and Illustrator, tools like Figma are increasingly used by graphic designers, which includes the collaboration aspects. This course may be helpful for those wishing to become graphic designers.

See salaries and explore the career path for Graphic designer

Design Consultant

Design consultants advise clients on design strategy, and an understanding of design tools like Figma is helpful. While the course focuses on the practical skills of Figma, design consultants may leverage their expertise in this tool to understand their client's design process and workflow. This course, being a comprehensive introduction to Figma, may grant design consultants an understanding of design implementation. This course may be useful to someone wishing to become a design consultant.

See salaries and explore the career path for Design Consultant

Frontend Developer

Frontend developers build the user-facing parts of websites and applications, and a design tool like Figma may be helpful for them. While this course focuses on the design side, frontend developers often need to understand design specifications and work closely with designers. This course will help a frontend developer understand the design process and how designs are structured with Figma, covering reusable components and responsive design. The course also includes sharing designs with development, which is a useful topic for frontend developers. The course may be helpful for those wishing to enter the field of frontend development.

See salaries and explore the career path for Frontend Developer

Creative Director

Creative directors oversee the creative output of a team or project. This course, while focusing on a design tool, may provide a creative director with a better understanding of their team's design workflow. The course provides a full introduction to Figma, and this knowledge may help them understand the technical challenges of delivering quality designs. The course may be useful for a creative director looking to deepen their knowledge of the design process.

See salaries and explore the career path for Creative Director

Instructional Designer

Instructional designers create educational materials, and the skills taught in this course may be of use. While this course does not directly teach instructional design, the skill of creating visual and interactive elements in Figma can be used in the design of online learning modules or presentations. Instructional designers may find it useful to understand design tools like Figma, and the course covers the full range of features of the software. This course may be helpful for an instructional designer.

See salaries and explore the career path for Instructional Designer

NEW Figma 2024

Getting started the Beginner to Pro Class

What's inside

Learning objectives

Syllabus

Good to know

Save this course

Activities

Career center

Reading list

Share

Similar courses