NEW Figma 2023: 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!


What you'll 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



Requirements
PC or Laptop

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
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
Optional Course Project Part 1: Building a wireframe and 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
Optional Course Project Part 2: Turning our design into a component-based design
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
Optional Course Project Part 3: Adding variables and styles to our app
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
Which frame size should I use?
Optional Course Project Part 4: Making our app 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
Optional Course Project Part 5: Bring our design alive with prototyping
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
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
Who this course is for:
Total Beginners!
Switching over from another Design Software to Figma (e.g Sketch or Adobe XD)

More Info