К содержимому
learnspaceYOUR NEXT CHAPTER
ПРОСТРАНСТВО ОБУЧЕНИЯ
ГлавнаяКаталог курсовМоё обучениеCoursera

Знания без границ

Учитесь у лучших университетов и компаний мира.

Открыть Coursera
Интеграция
Пространство университета
Моё пространствоСтраница курса
↵
ЯЛичный кабинетСтудент
© 2026 LearnSpaceКаждый день — возможность узнать больше.Помощь
Figma Pro Pt. 4: Variables, Tokens & Dev Mode Mastery · LearnSpace
Назад в каталог
courseraПрограммирование

Figma Pro Pt. 4: Variables, Tokens & Dev Mode Mastery

Курс от Skillshare
Средний≈ 10.2 чАнглийский
О курсеНавыкиПрограммаПреподаватели

О курсе

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.

Навыки, которые вы освоите

Figma (Design Software)UI ComponentsPrototypingResponsive Web DesignWeb Content Accessibility GuidelinesAnimationsInteraction DesignUser Interface (UI) DesignCollaborative SoftwareSoftware DocumentationInteractive DesignUser Interface and User Experience (UI/UX) DesignUser Experience Design

Программа курса

6 модулей · 63 учебных материалов

01Mastering Auto Layout Shortcuts and Spacing11 материалов

What are the shortcuts for hug & fill in Figma

Intro Read for Figma Pro Part 4ЧтениеWhat are the shortcuts for hug & fill in FigmaВидеоProject InstructionsЧтениеNew Discussion PromptОбсуждение

Учитесь у экспертов

Skillshare

Преподаватель курса

Figma Pro Pt. 4: Variables, Tokens & Dev Mode Mastery
В каталоге вашей программы

Инвестируйте в себя

Новые знания — в удобное для вас время.

Начать на Coursera

Обучение откроется на Coursera
в новой вкладке

Обучение на Coursera

≈ 10.2 ч

6 модулей

Язык: Английский

Субтитры: Арабский, Французский, Итальянский, Бразильский португальский, Корейский, Немецкий, Индонезийский, Испанский, Японский, Казахский

Часть программы вашего университета

How to set absolute spacing so things ignore Autolayout in Figma

How to set absolute spacing so things ignore Autolayout in FigmaВидео

How to absolute position something that is responsive in Figma

How to absolute position something that is responsive in FigmaВидео

How stick things to the bottom right of an auto layout in Figma

How stick things to the bottom right of an auto layout in FigmaВидео

How to resize a box automatically in a Auto Layout to match text in Figma

How to resize a box automatically in a Auto Layout to match text in FigmaВидео

What are the autolayout padding and resizing shortcuts

What are the autolayout padding and resizing shortcutsВидеоModule 1 QuizЗаданиеCoursera CoachingDIALOGUE
02Buttons, Wrapping, and Layout Precision6 материалов

How to create a minimum width height button in Figma

How to create a minimum width height button in FigmaВидеоNew Discussion PromptОбсуждение

How to wrap auto layout objects in Figma

How to wrap auto layout objects in FigmaВидео

What does stroke included excluded mean in Figma auto layout

What does stroke included excluded mean in Figma auto layoutВидео

How to set custom spacing in auto layouts in Figma

How to set custom spacing in auto layouts in FigmaВидеоModule 2 QuizЗадание
03Components, Overlays, and Hover Effects12 материалов

How to organize Components into groups in Figma

How to organize Components into groups in FigmaВидеоNew Discussion PromptОбсуждение

How to create slot placehold components in Figma

How to create slot placehold components in FigmaВидео

How to convert an existing website into a Figma design

How to convert an existing website into a Figma designВидео

How to make a drop down using overlays in Figma

How to make a drop down using overlays in FigmaВидео

How to make a multi level drop down menu in Figma

How to make a multi level drop down menu in FigmaВидео

Class project 17 - Nested Dropdown Menu

Class project 17 - Nested Dropdown MenuВидео

How to create a hover grow effect for images in Figma

How to create a hover grow effect for images in FigmaВидео

Class project 18 - Hover Grow Effect

Class project 18 - Hover Grow EffectВидео

How to make an expanding Search Bar in Figma

How to make an expanding Search Bar in FigmaВидео

Class project 19 - Expanding Search Bar

Class project 19 - Expanding Search BarВидеоModule 3 QuizЗадание
04Intro to Variables and Dynamic Prototyping10 материалов

What are Variables in Figma

What are Variables in FigmaВидеоNew Discussion PromptОбсуждение

How to create cart total using number variables in Figma

How to create cart total using number variables in FigmaВидео

How to add add conditions to variables in Figma

How to add add conditions to variables in FigmaВидео

Variant change using Boolean variable - change cart color

Variant change using Boolean variable - change cart colorВидео

Turning our boolean variable to false in Figma

Turning our boolean variable to false in FigmaВидео

Making a Overlay Popup in the Variable action panel in Figma

Making a Overlay Popup in the Variable action panel in FigmaВидео

Light and Dark Modes using Collections & Color Variables in Figma

Light and Dark Modes using Collections & Color Variables in FigmaВидео

How to change spacing with number Variables in Figma

How to change spacing with number Variables in FigmaВидеоModule 4 QuizЗадание
05Design Tokens, Animation, and Accessibility10 материалов

What are Design Tokens in Figma

What are Design Tokens in FigmaВидеоNew Discussion PromptОбсуждение

How to create Design Tokens in Figma

How to create Design Tokens in FigmaВидео

Creating spacing & radius design tokens in Figma

Creating spacing & radius design tokens in FigmaВидео

When would you use design tokens in Figma

When would you use design tokens in FigmaВидео

How do you animate along a path in Figma

How do you animate along a path in FigmaВидео

How to add Lottie animation files in Figma

How to add Lottie animation files in FigmaВидео

Making Your Designs Accessible - A Guide to Accessibility plugin in Figma

Making Your Designs Accessible - A Guide to Accessibility plugin in FigmaВидео

What are some tips for working with colleagues in Figma

What are some tips for working with colleagues in FigmaВидеоModule 5 QuizЗадание
06Dev Mode, Exporting, and Project Handoff14 материалов

How view version history duplicate and restore in Figma

How view version history duplicate and restore in FigmaВидеоNew Discussion PromptОбсуждение

How to archive and restore previous versions of Figma files

How to archive and restore previous versions of Figma filesВидео

How to create & share a flows in Figma

How to create & share a flows in FigmaВидео

How to use the Slice Tool in Figma

How to use the Slice Tool in FigmaВидео

How export uncropped and unscaled images from Figma

How export uncropped and unscaled images from FigmaВидео

How to export webp images from Figma & Photoshop

How to export webp images from Figma & PhotoshopВидео

How to downsize reduce file size of all images in a Figma file

How to downsize reduce file size of all images in a Figma fileВидео

How to document a component in a design system in Figma

How to document a component in a design system in FigmaВидео

How to use DEV Mode in Figma

How to use DEV Mode in FigmaВидео

Class Project 20 - Finish your design

Class Project 20 - Finish your designВидео

What's Next - Figma Advanced

What's Next - Figma AdvancedВидеоModule 6 QuizЗаданиеCourse ProjectВзаимная проверка