Skip to main content

Figma 201: Efficient Design & Interactive Prototyping

Deepen your Figma skills in this intensive course for advanced workflows. Master Auto Layout, interactive prototypes, and design systems to create more efficiently, systematically, and professionally. A certificate of attendance is included.
Figma logo over wireframe layouts of mobile app interfaces - digital UI/UX design in the conception phase.
  • Certificate
  • Improved accessibility
  • Socially equitable
  • Small groups
  • People of all neurotypes
  • Inclusive
  • 9 training hours
  • modular
  • Interactive
  • 449,- € incl. VAT
  • remote
  • Environmentally friendly

Figma 201 - Course Contents

Ready to level up your Figma game? Our hands-on Figma 201 live online course is for anyone who knows the basics and is ready to start designing faster, smarter, and more systematically.

Across nine hours of intensive live sessions, you'll dive deep into advanced Figma skills. You'll become a pro at Auto Layout for responsive interfaces, leverage Components and Variants to build scalable UIs, and create interactive, high-fidelity prototypes using Smart Animate. Plus, you'll learn how to efficiently build Design Systems and seriously speed up your workflow with Design Tokens and plugins.

You'll get a certificate of attendance for each module you finish, or for the entire course. Everything is live online, practical, and interactive.

You'll also get a full year of access to all learning materials and session recordings on our campus! And if you want to keep the learning going, you can book a discounted one-on-one mentoring session with your instructor at any time after the course.

1. Revisiting Frames and Auto-Layout
  • Auto Layout Deep Dive 
  • Fixed vs. Hug Contents vs. Fill Container
  • Negative Spacing and Absolute Positioning in Auto Layout
  • Complex nested Auto Layouts
2. Components and Variants
  • What are Components?
  • Creating and managing Components
  • Variants: States and properties of Components
  • Creating interactive Components
  • Best practices for naming the components
Exercise: 
Create a button in small, large, x-large size, and default, hover, and disabled states. 
 
3. Smart Animate
  • Creating smooth transitions with Smart Animate
  • Overlays und Scrolling Effects
  • Conditional Logic und Variables
  • Multiple Flows in a single Prototype
  • User Testing and Gathering Feedback
Exercise: 
Create your own animation, such as for a cart item being added, a form being submitted, or a screen animation relevant to your project.
4. Design Systems
  • Design System vs. Style Guide - What's the difference? 
  • The basic structure of a simple Design System in Figma
  • Structuring and organizing design libraries
  • Publishing and activating libraries
5. Design Tokens
  • What are Design Tokens?
  • Organizing Tokens:
    • Primitive Tokens
    • Semantic Tokens
    • Component specific Tokens
  • Connecting Styles and Variables with Tokens
Exercise: 
Create primitive and semantic tokens and apply them to existing button components and variables.
6. Hands-on Apllication

This module is all about putting your new skills directly into practice. Under the personal guidance of your instructor, you will build a foundational design system complete with reusable components, variants, and tokens.

  • Building a foundational design system
  • Creating reusable components using tokens
  • Organizing your own design system

We encourage you to bring your own use cases. In dedicated breakout sessions, you'll receive personalized, solution-focused support to tackle your specific challenges and master them with confidence.

Figma 201 - FAQ Frequently Asked Questions

How is this live online course different from free tutorials or recorded courses?

This live online course offers a unique, premium learning experience that goes beyond simple tutorials. You'll get direct, personal support from experienced instructors who can answer your questions in real time and give you individual feedback on your practical exercises. This immediate feedback clarifies uncertainties and significantly speeds up your learning progress. Plus, you’ll learn in an inclusive and interactive safe space, fostering exchange with other learners, and you'll have one year of access to all current recordings and accessible materials.

Do I need prior knowledge to attend the courses?

Our courses are structured to build on each other. You don't need any prior knowledge for the 101 foundational courses. For the 201 courses and all subsequent courses, we assume you have the knowledge and skills from the foundational courses.

What software or technical equipment do I need, and are there any costs?

You only need a computer (Windows, macOS, or Linux) with a stable internet connection and an up-to-date web browser (e.g., Chrome, Firefox, or Edge). Figma itself is a browser-based tool, and we will be using the free version, so there are no additional software costs for you. For optimal interaction, we recommend a stable internet connection and, if possible, a headset for the live sessions.


©2025 Summer Sunrise Holding Ltd. All rights reserved