NEW Figma 2023: Getting started the Beginner to Pro Class
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)
Instructor
Hi, I'm Christine Vallaure, founder of moonlearning, a UX/UI design + Figma learning hub.
moonlearning is my pet project that has turned into a full-time job, and I couldn't be happier about it. I love talking, teaching, and writing about UX/UI design and Figma, always encouraging UI designers and developers to be curious about each other's work.
Besides video tutorials, I also offer live and online workshops and speak at conferences and meetups. Connect with me on Twitter, LinkedIn, YouTube and via my newsletter, so I can keep you updated on future moonlearning adventures.
You will find a small selection of some of my original moonlearning courses here on Udemy. Content is shortened and adjusted to the Udemy format. Enjoy!