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

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

Plus Figma working file

A course by moonlearning.io moon learning moonlearning

Menna Elbastawesy

--

3