Getting Started with Figma (4h) + Course ProjectA beginner's to pro course in UI design with Figma
NEW! Full Config 2024 Update Featuring the New Figma UI Design!
The must have UX/UI Figma design course for every Interface designer! 
 
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
<ol>
<li>What Is Figma? Who does the coding?</li>
<li>Figma in the Browser vs. Figma App</li>
<li>The Figma file browser – Figma's home</li>
<li>Creating design files in Figma</li>
</ol>
 
Figma Basics
<ol>
<li>Adding frames to our file</li>
<li>A few handy shortcuts</li>
<li>Design file overview</li>
<li>Adding shapes and colour</li>
<li>Size menu – manipulating shapes and frames</li>
<li>Align, tidy up, and measure</li>
<li>Adding and working with text</li>
<li>Nesting frames – The Figma superpower</li>
<li>Frames vs Groups</li>
<li>Designing with nested frames</li>
<li>Re-usable grids with styles</li>
<li>Figma Community and Plugins</li>
<li>Adding images</li>
<li>Drawing in Figma</li>
<li>Scaling in Figma</li>
<li>Course Project: Creating a wireframe and first design</li>
</ol>
 
Introducing Components
<ol>
<li>Re-use elements with components and instances</li>
<li>Overriding instances</li>
<li>What to override and what not to</li>
<li>Reverting components and overrides</li>
<li>Nest components</li>
<li>Component sets with variants</li>
<li>Move components to their own page</li>
<li>Keeping components organised</li>
<li>Advanced component features introduction.</li>
<li>Course Project: Turning our design into components</li>
</ol>
 Variables and Styles
<ol>
<li>Introduction to variables</li>
<li>Working with colour variables</li>
<li>Organising with variable collections and groups</li>
<li>Size and spacing variables</li>
<li>And what about styles?</li>
<li>Typography and styles</li>
<li>Documenting variables and styles</li>
<li>Course Project: Adding colour variables and text styles</li>
</ol>
 
Responsive Design
<ol>
<li>What is auto layout?</li>
<li>Adding auto layout</li>
<li>Auto layout components and variables</li>
<li>Resize settings</li>
<li>Auto or space between</li>
<li>Nesting auto layout with system</li>
<li>Absolute positioning</li>
<li>Auto layout pages</li>
<li>Constraints in Figma</li>
<li>Constraints and grids</li>
<li>Course Project: Testing our app on different phone sizes</li>
</ol>
 
Basic Prototyping
<ol>
<li>Prototyping in Figma</li>
<li>Setting scroll behaviour</li>
<li>Connecting screens</li>
<li>Dropdown menu with overlays</li>
<li>Animation types</li>
<li>Interactive components</li>
<li>Figma Mirror – Preview on your device</li>
<li>Course Project: Turning our app into a clickable prototype </li>
</ol>
 
Sharing with other designers and developers
<ol>
<li>Sharing and inviting others</li>
<li>Setting up a thumbnail</li>
<li>Shared team libraries in Figma</li>
<li>Setting up a shared team library</li>
<li>Connecting to a shared team library</li>
<li>Updating shared team libraries</li>
<li>Sharing design, components, styles, and variables</li>
<li>Dev mode: Sharing with development Plus Figma working file A course by moonlearning.io moon learning moonlearning</li>
</ol>

00 Intro Beginner+Exercise

02 What Is Figma? Who does the coding?

SETUP: 01 Figma in the Browser vs

SETUP: 02 The Figma file browser – Figma's home

SETUP: 03 creating design files

BASICS: 01 Adding frames to our file

BASICS: 02 A few handy shortcuts

BASICS: 03 Design file overview

BASICS: 04 Adding shapes and colours

BASICS: 05 Manipulating elements

BASICS: 06 Align, tidy up, and measure

BASICS: 07 Adding and working with text

BASICS: 08 Nesting frames – The Figma superpower

BASICS: 09 Frames vs Groups

BASICS: 10 Designing with nested frames

BASICS: 11 Re usable grids with styles

BASICS: 12 Figma community and Plugins

BASICS: 13 Adding images to your designs

BASICS: 14 Duplicating methods

BASICS: 15 Drawing in Figma

BASICS: 16 Scaling in Figma

PROJECT: Introduction

PROJECT Part 1.1: Wireframe

PROJECT Part 1.2: Design Idea

COMPONENTS 01 Components and instances in Figma

COMPONENTS: 02 Overriding instances

COMPONENTS: 03 What to override and what not to

COMPONENTS: 04 Reverting components and overrides

COMPONENTS: 05 Nesting components

COMPONENTS: 06 Component sets with variants

COMPONENTS: 07 Move components to their own page 2

COMPONENTS: 08 Keeping components organised

PROJECT Part 2: Components

VARIABLES: 01 Introduction to variables

VARIABLES: 02 Working with colour variables

VARIABLES: 03 Organising with variable collections and groups

VARIABLES: 04 Size and spacing variables

STYLES: 05 And what about styles?

STYLES: 06 Typography and styles

VARIABLES & STYLES: 07 Documenting variables and styles

PROJECT Part 3.1: Colour Variables

PROJECT Part 3.2: Typography

AUTO LAYOUT: 01 What is auto layout?

AUTO LAYOUT: 02 The Figma layout menu

AUTO LAYOUT: 03 When to use what

AUTO LAYOUT: 04 Setting up one dimensional layouts

AUTO LAYOUT: 05 Resize settings

AUTO LAYOUT: 06 The auto setting

AUTO LAYOUT: 07 Auto layout components and variables

AUTO LAYOUT: 08 Nesting and the parent child relationship

AUTO LAYOUT: 09 Suggest auto layout

AUTO LAYOUT: 10 Ignore auto layout

AUTO LAYOUT: 11 Layout grids

AUTO LAYOUT: 12 Nesting and more

AUTO LAYOUT: 13 Auto layout pages

AUTO LAYOUT: 14 What are constraints in Figma?

AUTO LAYOUT: 15 Constraints and grids

PROJECT Part 4: Responsive

PROTOTYPE: 01 The Figma prototype workspace

PROTOTYPE: 02 Setting scroll behaviour

PROTOTYPE: 03 Connecting screens

PROTOTYPE:  04 Dropdown menu with overlays

PROTOTYPE: 05 Animation types

PROTOTYPE:  06 Interactive components

PROTOTYPE:  07 Figma Mirror – Preview on your device

PROJECT Part 5: Prototyping

COLLABORATING: 01 Sharing and inviting others

COLLABORATING: 02 Setting up a thumbnail

COLLABORATING: 03 Shared team libraries in Figma

COLLABORATING: 04 team libraries

COLLABORATING: 05 Moving components to external libraries

COLLABORATING: 07 Sharing design, components, styles, and variables

COLLABORATING: 08 Dev mode Sharing with development

Thank You

NEW Figma 2025: Getting started the Beginner to Pro Class

Christine Vallaure gave you 1 free month of Skillshare

Get 1 free month of Skillshare

NEW Figma 2025: Getting started the Beginner to Pro Class

Creative Learning Made Easy

Company

Work With Us

Teach with Us

Shop

Mobile