Overview

This is it—the final stretch of your journey to becoming a Figma UX superhero with Daniel Scott. In Figma Pro Pt. 4, we explore the bleeding edge of design workflows using variables, design tokens, advanced prototyping, and Dev Mode. If you’ve ever wanted to build responsive, interactive components that adapt like magic and hand off perfectly to developers, this course is your golden ticket. By the end of this course, you'll be able to: * Use variables to create dynamic UIs, light/dark modes, and conditional logic. * Build and manage design tokens for scalable, reusable design systems. * Prepare production-ready assets and collaborate smoothly using Dev Mode and documentation tools. This course is ideal for advanced learners who have already completed Figma Pro Pt. 3 or equivalent experience. You should be comfortable with Auto Layouts, Components, and Prototyping basics. With over 40 in-depth lessons and class projects, you'll leave this course with portfolio-ready work and the confidence to lead UX/UI projects from concept to developer handoff. Instructor Bio: Daniel Walter Scott is a digital designer, Adobe Certified Instructor, and founder of Bring Your Own Laptop (BYOL). With over 14 years of teaching experience, he has helped thousands of learners worldwide master design and creative software across print, web, video, and now 3D. Daniel is an Adobe Certified Expert and Adobe Certified Instructor who combines industry expertise with a teaching style that’s practical, engaging, and memorable. Originally from New Zealand, Daniel has lived and taught across Australia, Ireland, and beyond—sharing his skills with a truly global creative community. He’s passionate about helping students build real-world skills they can carry into their careers and creative projects. When he’s not teaching, Daniel enjoys life with his Irish wife and kids. He brings this personal, down-to-earth perspective into his courses, making complex tools feel approachable and fun to learn.

Syllabus

Mastering Auto Layout Shortcuts and Spacing

In this module, you'll dive into Figma’s powerful Auto Layout system and learn the shortcuts that help you work smarter. You’ll practice using hug and fill, set absolute spacing, stick elements to responsive positions, and get full control over how your designs adapt and align.

Buttons, Wrapping, and Layout Precision

Build upon your Auto Layout skills by creating versatile, scalable elements like buttons and wrapped containers. This module also demystifies the difference between stroke inclusion/exclusion and teaches you how to fully customize spacing to fine-tune your UI design system.

Components, Overlays, and Hover Effects

This module focuses on intermediate component design and interactivity. You'll explore grouping strategies, placeholders, and converting real websites into Figma projects. Plus, you'll build dropdowns, hover effects, and interactive search bars to enrich your prototyping skills.

Intro to Variables and Dynamic Prototyping

Step into the future of design with Figma variables. You’ll learn to build responsive elements that react to user input using number, boolean, and color variables. This module will empower you to construct smart prototypes with dynamic behaviors and themes.

Design Tokens, Animation, and Accessibility

Design systems come to life with tokens and animation. This module walks you through using design tokens to create consistent UIs, then takes a creative turn into animations and accessibility. You'll also gain insight into best practices for team collaboration.

Dev Mode, Exporting, and Project Handoff

Wrap up your Figma Pro journey with the tools you need for professional project delivery. You’ll explore version control, exporting strategies, component documentation, and Dev Mode to ensure your designs are both polished and dev-ready.