Overview

In Part 2 of the Figma UI UX Design Essentials series, you’ll take your design skills to the next level by learning how to build clean, flexible layouts and reusable components. With Dan Scott as your instructor, you’ll move beyond the basics and explore powerful features like Auto Layout, Constraints, and Component Variants—tools essential for designing responsive, scalable UI. You’ll also dive deeper into visual design, learning how to use color styles, text styles, grids, and effects to bring consistency and polish to your work. Along the way, you’ll complete hands-on class projects that mimic real design challenges, giving you practical experience you can use in client work or your portfolio. This course is ideal for learners who already understand Figma’s interface and want to start designing like a professional. What sets it apart is its step-by-step approach to demystifying more advanced tools—so even intimidating concepts like nested components and naming conventions feel approachable and manageable. 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

Responsive Design with Auto Layout

Discover how to build flexible, adaptive UI layouts using Figma’s Auto Layout and constraints. This module introduces tools and techniques for designing interfaces that respond smoothly to screen size changes. You’ll create expanding buttons, combine nested frames, and apply auto-height text—ultimately crafting responsive components that behave predictably across devices.

Visual Effects & Styling

In this module, you'll add visual flair and polish to your UI designs. Learn how to apply shadows, blurs, and neumorphic styling to elevate the depth and realism of your mockups. Through guided examples, you’ll explore how layered effects can help create a more immersive and visually engaging interface, and complete a small project to practice applying these effects consistently.

Working with Components

Master the building blocks of scalable design systems. This module focuses on creating reusable components, understanding the relationship between main and instance components, and organizing your design system using consistent naming conventions. You’ll also learn best practices for maintaining component libraries across projects and setting up a clean, version-safe workflow.

Component Variants & Forms

Take your design system skills further by creating component variants that support interactive states and form elements. You'll explore both single- and multi-dimensional variants and apply them in real interface components like buttons and forms. By the end of this module, you’ll be able to design flexible, scalable elements ready for real-world application.

Final Prototyping Techniques

Bring your designs to life with interactive prototypes. This final module teaches you how to build realistic user experiences using Figma’s prototyping tools. You'll work with Flows, overlays, modals, tooltips, and slide-in menus, combining everything you've learned to complete a polished, navigable prototype suitable for user testing or presentation.