Getting to Know Figma – Part 1: The Basics

Learn Figma from scratch in this complete beginner to advanced tutorial! (This is the first in the series)
In this course, I’ll walk you through everything you need to know to start designing in Figma — from the interface and panels, to the toolbar tools, frames, variables, styles, prototyping, and advanced Auto Layout techniques.

Whether you’re a complete beginner, switching from Adobe XD/Illustrator, or a developer learning how designers structure their work, this course will get you up to speed fast.

Topics at a glance:

Navigate Figma’s interface and panels

Use the toolbar (frames, shapes, text, pen, collaboration tools)

Create frames and apply Auto Layout

Style frames with fills, strokes, effects, and export assets

Master advanced Auto Layout features (hug, fill, padding, responsive layouts, nesting, and more)

0:00 Intro & Background
0:28 What Makes Figma Unique
1:06 File Types in Figma
1:21 Panels Overview (Layers, Assets, Canvas)
3:12 Properties Panel
4:09 Variables & Why They’re Awesome
5:05 Creating & Using Variables
6:32 Text Styles vs CSS Rules
8:17 Export Options
9:00 Prototype Tab Basics

9:53 Toolbar Overview & Move/Hand/Scale Tools
10:19 Frames vs Artboards (Core Concept)
11:16 Sections, Slices & Shapes
12:00 Media in Figma (Images + Video)
12:11 Pen & Pencil Tools (Vector Drawing)
12:43 Text Tool Basics
13:24 Comments & Feedback
14:14 Live Collaboration (Google Docs Style Editing)
15:51 Annotations & AI Actions

17:31 Creating Your First Frame/Artboard
18:59 Frame Properties & Options
20:02 Intro to Auto Layout
20:35 Why Auto Layout Matters
21:08 Frame Styling: Borders, Fill, Stroke
24:46 Effects & Drop Shadows
26:15 Adding Frames Inside Artboards
28:03 Duplicating & Arranging Elements

26:15 Auto Layout in Action
30:03 Hug vs Fill vs Fixed
33:18 Gap & Padding Controls
35:01 Variables in Layouts (CSS-Like Power)
37:31 Vertical vs Horizontal Auto Layout
39:34 Equal Distribution & Resizing
44:19 Nested Frames & Clip Content
47:05 Complex Layouts: Rows within Columns

Visit our site to schedule a private session today or to help us keep making videos free to the public please help & donate at:
http://thedigitalcraft.com