Figma Noob to Pro Information

Figma Noob to Pro by AM Design is a comprehensive course designed to transform you from a beginner into a proficient user of Figma.

This course is your one way ticket to becoming a pro at Figma! Master the skills to design stunning UX & UI experiences with Figma and take your design career to the next level!

Complete Mastery of Figma Tools

The course covers almost all aspects of Figma in depth, giving learners a holistic understanding of the platform and its capabilities, even the new ones coming up.

Practical, Real-World Application

The course focuses on the practical application of Figma, taking learners through a real-world project scenario, and talking about things that truly matter, rather than fluff!

In-Depth Understanding of Autolayout

The course provides a deep dive into autolayout, enabling learners to efficiently organize and scale designs. This knowledge can dramatically improve productivity and the quality of your designs.

Developer Handoff

The course includes guidance on how to effectively hand off designs both clients & developers, a critical skill in the design process, and includes core concepts like the 4px/8px grid.

Stay ahead with Figma updates!

The course stays up-to-date with all new features in Figma, ensuring learners have the most current knowledge and skills. Learning from an outdated course can even be more detrimental.

Solutions to your everyday problems

This course does not talk (for the most part) about things like responsive grids, or a lot of fancy things that are an eye candy to designers, but have little to no value in your day to day workflow.

What You’ll Learn In Figma Noob to Pro?

Introduction

• Why are you learning Figma?
• Creating a Figma account
• Important assets file

Figma File interface

• File interface overview
• How to move around (Zooming and Panning)
• Layer navigation
• Tools panel
• Frames (Artboards)
• Properties panel

Mastering the Basics

• Fill, strokes, images, and videos
• Modifying colors from the top down
• Image options and Cropping
• Nudging, moving and resizing
• Scale tool (K)
• Pen tool
• Combining shapes
• Effects (Shadows and Blurs)
• Constraints

Mastering Typography

• Text tool
• Auto width, auto height, fixed width and height, truncation
• Lists
• Advanced (Vertical trim, and hanging punctuations)

Mastering Styles

• Why and How?
• Color Styles
• Text styles

Mastering Autolayout

• Why to use autolayout?
• Adding autolayout (Direction, padding and Space between)
• Fixed width, Fill Container, and Hug contents
• Packed vs Space between
• Absolutely positioning elements
• Canvas Stacking, Align text baseline and Stroke inclusion
• Wrapping + Min and Max Width/Heights
• Autolayout Quiz
• Exercise: Create the structure of an app (DON’T SKIP!)

Community and Plugins

• Community and Plugins
• Popular plugins

Mastering Components

• What are components for, and when to use them.
• Basics (Creating a component, Detaching, Instances, Resetting specific properties)
• Creating multiple components instantly
• Component properties (Boolean, Instance swap, Text, Layer)
• Exposing nested instances
• Creating State Variant
• Interactive Components
• Creating Size Variant
• Create Disabled Toggle (Variant Toggle)
• Simplify all instances
• Documenting your components
• Exercise: Create a component yourself (Don’t Skip!)
• Before going forward!

Team Libraries

• Why use them?
• The Basics

Mastering Prototyping

• Basics (Device Type, Prototype color, Flows, Enabling Scroll)
• Types of triggers
• Types of actions (open overlay, swap overlay, scroll, back, links)
• Instant, Dissolve, and Smart Animate (Along with easing types)
• Move in, Move out, Push, Slide in, Slide out
• Sections
• Correct way to create sidebars, headers and other navigations
• Sticky and Fixed Items while scrolling
• Landing page animation on scroll
• State management for Prototypes (NEW RELEASE)

Mastering Variables & Variable Prototyping

• What are variables? When to use them? And Variables vs Styles
• Creating our variable + aliasing + groups
• Typography variable and gradient update (NEW)
• Modes, inheritance, Mode Problems
• Figma Tokens: Primitives, Semantic, and Component Tokens
• Scoping, publishing variables
• Advanced Prototyping with Variables
• Exercise: Variables and Prototyping

Designing a Landing Page

• The Project and File Template
• AI to help us get ed
• Rough structure of the page
• Including large images into Figma
• Creating basic wireframe
• Using font awesome in your designs
• Using Aspect Ratios
• The 4px 8px grid
• Creating local styles (typograhpy, colors)
• Wireframe to Design
• Making designs responsive
• Useless Responsive Video (Breakpoints Plugin)
• Adjusting mobile screens

Handoff

• Renaming layers and generating updated styleguide
• Sharing and getting feedback (make read-only)
• Importing and exporting assets (Original image links)
• DevMode
• Documentation
• Before going forward!

More courses from the same author: AM Design

Salepage: Figma Noob to Pro – AM Design