NEW Figma 2023: Getting started the Beginner to Pro Class

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