Figma Tutorial for Beginners - Complete Course 2025

Tech concepts & product features covered (Figma beginner course, 2025)

Setup / Account & dashboard

• Figma standard workflow: Use Figma as the industry-standard design tool for UI/UX jobs.
• Accessing Figma: Go to figma.com, review pricing plans, and start with the free starter plan.
• Student benefit: Students can get a Pro plan for free.
• Web app vs desktop app:
  • Figma runs in the browser
  • It can also be downloaded for Windows/Mac (same core experience)
• Organization concepts:
  • Draft vs Projects (projects act like folders)
  • Teams (optional)
  • Infinite Canvas and core layout of the interface

Figma Community, plugins, and assets

• Figma Community is emphasized for:
  • design files/templates (free and paid),
  • assets (e.g., searching “food delivery”),
  • copying designs into your file via “Open in Figma”.
• Plugins to speed up work:
  • Remix icon plugin for email/password/social icons
  • Better Logos plugin for social brand icons
• Recommendation pattern: Use community/plugins to avoid manually creating icons.

Core UI design concepts in the interface

• Files, pages, layers
  • Pages for organization
    • Free plan example limit shown: up to 3 pages
  • Layers tab shows created elements (frames, shapes, text, etc.)
  • Assets tab includes libraries (Apple/Google/Figma libraries), but the tutorial removes them for simplicity.
• Properties / Inspect panel
  • Selecting elements reveals styling and layout properties (dimensions, fill, stroke, corner radius, opacity, etc.).
• Frames are fundamental
  • Frames act as containers for UI, not just rectangles.
  • Frame tool supports device presets (example mentioned: iPhone 16).
• Canvas navigation
  • Zoom (Command +/-)
  • Zoom to fit (Shift+1)
  • Pan using Hand tool or spacebar + drag
  • Trackpad/mouse wheel zoom behavior described for precision zoom around the cursor
• Example-based learning: building a login screen
  • Imports a reference Figma file (“Burger Licious”) using Import file
  • Rebuilds key screens (splash/login/home/category) from scratch, focusing on:
    • importing images (logo),
    • adding text (text tool shortcuts mentioned),
    • alignment using Figma alignment options and guides.

Local Styles & Text Styles (global consistency within a file)

• Introduces Local Styles / variables (described as lightweight in the free tier):
  • Reusable color styles (e.g., text primary, brand color, BG primary, border primary)
  • Reusable text styles (e.g., body MD, body LG, heading medium)
• Benefit demonstrated:
  • changing a style updates all linked instances across many frames
  • unlinking removes style control for one element

Layout grids (guideline snapping)

• Uses Layout Grid on frames:
  • grid type: columns/rows
  • adjusts gutter and margins
  • helps elements snap to consistent spacing
• Shows hiding/toggling grids (Shift+G)

Layout composition tools: Group vs Frame

• Groups: Move items together without layout behavior.
• Frames: Containers with layout properties (used heavily for UI structure).

---

Auto Layout (major focus) — responsive layout engine

• Explains Auto Layout as the mechanism that:
  • turns child elements into a stack with controlled gap/padding
• Key behaviors:
  • Direction: vertical vs horizontal
  • Gap between children
  • Horizontal/Vertical padding
  • Child sizing modes:
    • Fixed width
    • Fill container
    • Hug contents
  • Auto Gap to distribute elements
  • Nested Auto Layouts for complex responsive cards
• Tutorial recommendation:
  • use Auto Layout from the start, rather than converting later as a best-effort task
• Mentions “Suggest layout” as experimental/hit-or-miss

Responsiveness failures & fixes

• Demonstrates that without Auto Layout, resizing frames causes elements to not adapt.
• Fixes input/button behavior using:
  • fill container
  • appropriate hugging behavior

Constraints + “Ignore Auto layout”

• Shows a floating help button pinned to bottom-right using:
  • Ignore Auto layout for free positioning
  • constraints (pin left/right and top/bottom) so it stays in the corner even when resizing
• Notes constraints predate Auto Layout as the older responsive method.

---

Components & Instances — reuse at scale

Components vs instances

• Introduces the repetition problem (many frames using the same input/button).
• Solution: convert designs into components:
  • Main component = source (edit once)
  • Instances = copies that update automatically when the component changes
• Demonstrates:
  • changing component padding/corner radius updates all instances
  • instance overrides can temporarily diverge

Making a component from scratch

• Example: create a button component:
  • wrap button in Auto Layout
  • style with fill/corner radius/padding
  • use Create component
• Shows how to restore a deleted component source from an instance (via restore option)

---

Variants & component properties (state + style system)

Status variants

• Adds variants for states:
  • default, hover, pressed
• Variant selection is controlled via an instance property dropdown.

Variant properties (multi-dimensional variants)

• Adds a second property like button style (e.g., default/orange vs secondary/outline).
• Instances can combine:
  • button style + status
  • (forward/hover/pressed in the example)

Text property mapping

• Adds a text property (e.g., label) and maps it to button text layers.
• Changing the instance property updates all linked text automatically.

Instance swap property (swap content inside a component)

• Creates an icon area in the button and uses instance swap so the icon can be replaced with other icon components (leading/trailing).
• Uses plugin/community icons:
  • brings icon components into a “components page”
  • then swaps via instance swap property

Boolean properties (show/hide elements)

• Boolean toggles:
  • show/hide leading icon
  • show/hide trailing icon
  • show/hide label text (enables icon-only button while preserving alignment)
• Demonstrates solving layout issues by toggling visibility rather than manual deletion.

---

Example UI screens built in the tutorial

Login screen (iPhone frame)

• Built using components for:
  • logo + tagline
  • primary button (sign in)
  • outline button (sign in with social)
  • inputs (email/password)
  • checkbox (“remember me”)
  • text/divider
• Made responsive using Auto Layout and component structure.

Home screen

• Builds:
  • top navigation bar (componentized with active/inactive variants)
  • category cards with masked circular images
  • drop shadows and local shadow styles
  • Auto Layout wrapping for a grid-like categories layout
• Adds scrolling in Prototype mode:
  • vertical overflow scroll
  • frame must have fixed height and enough content to scroll

Category / item cards

• Builds an item list card design:
  • image fill
  • multi-line ingredients text
  • price label
• Improves responsiveness by ensuring correct Auto Layout direction and wrapping strategy.

---

Boolean operations (shape creation)

• Explains shape boolean operations:
  • Union
  • Subtract
  • Intersect
  • Exclude
  • Flatten
• Real example:
  • creating a transparent “hole” effect using Subtract so the background shows through

---

Prototyping (interactions & navigation flows)

Interaction setup

• Uses prototype starting point:
  • set splash screen as the flow start
• Adds interactions with triggers and actions:
  • drag/click
  • actions like:
    • navigate to (screen navigation)
    • change to variants (switch component state)
• Animation options referenced:
  • dissolve, smart animate, slide in, ease curve
  • starts with instant, later uses smart animate with timing (example mentions ~300ms)

Interactions between variants

• Demonstrates:
  • hover: connect variant to variant with “change to”
  • pressed: chain hovers + pressed states
  • click: navigate to next frame
• Notes limitation:
  • inputs can’t be made typable natively in prototyping (explicitly stated)

Preview & collaboration options

• Prototype preview features include:
  • share prototype link
  • invite via email
  • control access
  • flow selection
  • viewing options (100% width/actual size/fullscreen)
  • comments for design review

---

Export & sharing

Export

• Export formats: PNG/JPG/SVG/PDF
• Adjust scale (e.g., 1x)
• Export per selected layer/frame/image

Share

• Share options:
  • copy link, invite, control access (view/edit)
  • share prototype-only link
  • publish to Community
  • “Copy Dev mode link” (not available on free; developer workflow)
• Mentions:
  • autosave
  • save local copy for offline import

---

Main speakers / sources (end)

• Speaker: The unnamed tutorial creator/host of the YouTube video (no other named person appears in the subtitles).
• Primary source:
  • Figma (official product/site)
  • Figma Community / plugins used in the tutorial (e.g., Remix, Better Logos, Apple/Figma example files from Community).