When you enroll in this course, you'll also be enrolled in this Specialization.
Learn new concepts from industry experts
Gain a foundational understanding of a subject or tool
Develop job-relevant skills with hands-on projects
Earn a shareable career certificate
There are 6 modules in this course
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.
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.
What's included
6 videos2 readings1 assignment1 discussion prompt
Show info about module content
6 videos•Total 20 minutes
What are the shortcuts for hug & fill in Figma•4 minutes
How to set absolute spacing so things ignore Autolayout in Figma•3 minutes
How to absolute position something that is responsive in Figma•2 minutes
How stick things to the bottom right of an auto layout in Figma•4 minutes
How to resize a box automatically in a Auto Layout to match text in Figma•5 minutes
What are the autolayout padding and resizing shortcuts•2 minutes
2 readings•Total 40 minutes
Intro Read for Figma Pro Part 4•10 minutes
Project Instructions•30 minutes
1 assignment•Total 30 minutes
Module 1 Quiz•30 minutes
1 discussion prompt•Total 10 minutes
New Discussion Prompt•10 minutes
Buttons, Wrapping, and Layout Precision
Module 2•1 hour to complete
Module details
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.
What's included
4 videos1 assignment1 discussion prompt
Show info about module content
4 videos•Total 11 minutes
How to create a minimum width height button in Figma•4 minutes
How to wrap auto layout objects in Figma•2 minutes
What does stroke included excluded mean in Figma auto layout•2 minutes
How to set custom spacing in auto layouts in Figma•4 minutes
1 assignment•Total 30 minutes
Module 2 Quiz•30 minutes
1 discussion prompt•Total 10 minutes
New Discussion Prompt•10 minutes
Components, Overlays, and Hover Effects
Module 3•2 hours to complete
Module details
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.
What's included
10 videos1 assignment1 discussion prompt
Show info about module content
10 videos•Total 79 minutes
How to organize Components into groups in Figma•6 minutes
How to create slot placehold components in Figma•7 minutes
How to convert an existing website into a Figma design•5 minutes
How to make a drop down using overlays in Figma•14 minutes
How to make a multi level drop down menu in Figma•14 minutes
Class project 17 - Nested Dropdown Menu•1 minute
How to create a hover grow effect for images in Figma•18 minutes
Class project 18 - Hover Grow Effect•2 minutes
How to make an expanding Search Bar in Figma•10 minutes
Class project 19 - Expanding Search Bar•1 minute
1 assignment•Total 30 minutes
Module 3 Quiz•30 minutes
1 discussion prompt•Total 10 minutes
New Discussion Prompt•10 minutes
Intro to Variables and Dynamic Prototyping
Module 4•1 hour to complete
Module details
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.
What's included
8 videos1 assignment1 discussion prompt
Show info about module content
8 videos•Total 34 minutes
What are Variables in Figma•3 minutes
How to create cart total using number variables in Figma•6 minutes
How to add add conditions to variables in Figma•2 minutes
Variant change using Boolean variable - change cart color•6 minutes
Turning our boolean variable to false in Figma•2 minutes
Making a Overlay Popup in the Variable action panel in Figma•3 minutes
Light and Dark Modes using Collections & Color Variables in Figma•7 minutes
How to change spacing with number Variables in Figma•5 minutes
1 assignment•Total 30 minutes
Module 4 Quiz•30 minutes
1 discussion prompt•Total 10 minutes
New Discussion Prompt•10 minutes
Design Tokens, Animation, and Accessibility
Module 5•2 hours to complete
Module details
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.
What's included
8 videos1 assignment1 discussion prompt
Show info about module content
8 videos•Total 64 minutes
What are Design Tokens in Figma•7 minutes
How to create Design Tokens in Figma•10 minutes
Creating spacing & radius design tokens in Figma•8 minutes
When would you use design tokens in Figma•5 minutes
How do you animate along a path in Figma•12 minutes
How to add Lottie animation files in Figma•5 minutes
Making Your Designs Accessible - A Guide to Accessibility plugin in Figma•11 minutes
What are some tips for working with colleagues in Figma•7 minutes
1 assignment•Total 30 minutes
Module 5 Quiz•30 minutes
1 discussion prompt•Total 10 minutes
New Discussion Prompt•10 minutes
Dev Mode, Exporting, and Project Handoff
Module 6•2 hours to complete
Module details
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.
Skillshare is an online learning community where you can take classes from real working creatives. Unlock personal and professional growth, build your skills, make connections, and find your happy place.
When will I have access to the lectures and assignments?
To access the course materials, assignments and to earn a Certificate, you will need to purchase the Certificate experience when you enroll in a course. You can try a Free Trial instead, or apply for Financial Aid. The course may offer 'Full Course, No Certificate' instead. This option lets you see all course materials, submit required assessments, and get a final grade. This also means that you will not be able to purchase a Certificate experience.
What will I get if I subscribe to this Specialization?
When you enroll in the course, you get access to all of the courses in the Specialization, and you earn a certificate when you complete the work. Your electronic Certificate will be added to your Accomplishments page - from there, you can print your Certificate or add it to your LinkedIn profile.
Is financial aid available?
Yes. In select learning programs, you can apply for financial aid or a scholarship if you can’t afford the enrollment fee. If fin aid or scholarship is available for your learning program selection, you’ll find a link to apply on the description page.