NEW Figma 2024: Getting started the Beginner to Pro Class

Module 1: Figma Fundamentals & Interface

⏳ 45 minutes

• Topics: Frames vs. groups, layers panel, properties inspector, community resources

• Hands-on: Set up your first file, import assets, and organize pages

Module 2: Shapes, Text & Styles

⏳ 1 hour

• Topics: Vector tools (pen, shape), text formatting, color & effect styles

• Hands-on: Create a simple UI card with consistent typography and color styles

Module 3: Components & Variants

⏳ 1 hour

• Topics: Creating components, toggles, buttons; managing variants for states

• Hands-on: Build a button component with hover, pressed, and disabled variants

Module 4: Auto Layout & Responsive Design

⏳ 1.5 hours

• Topics: Stacks, padding, alignment, constraints, resizing behaviors

• Hands-on: Design a responsive navbar and card grid that adapt to different frame sizes

Module 5: Prototyping & Interactions

⏳ 1 hour

• Topics: Prototype links, overlays, smart animate, device frames

• Hands-on: Create a clickable flow between onboarding screens with animated transitions

Module 6: Collaboration & Handoff

⏳ 45 minutes

• Topics: Comments, multiplayer editing, version history, Inspect panel for devs

• Hands-on: Share a prototype link, leave comments, and export specs for a developer handoff

Module 7: Design System Essentials

⏳ 1 hour

• Topics: Publishing libraries, global styles, documentation best practices

• Hands-on: Publish your styles and components to a team library and update instances

Module 8: Final Project – Mini App UI

⏳ 2 hours

• Topics: End-to-end UI design, component reuse, responsive prototype

• Hands-on: Design and prototype a small “to-do” app with list views, detail screens, and interactive flows

Get certificate