Figma Introduction Masterclass 2 Day - Online
Key Course Details:
Level:
Introduction to Intermediate
Duration:
2
Days - 10am to 5pm
Price:
£395 + vat
Learn Figma in depth with this two-day course designed to give you complete confidence in using the industry-leading interface and prototyping tool. Building on the essentials you’ll explore advanced design features, Auto Layout, components, variables and the latest Figma modules including FigJam, Slides, Buzz and Make. This course is ideal for those looking to go beyond the basics to master modern UX and UI workflows for websites, apps and interactive prototypes.
You will move from understanding the Figma environment to creating responsive layouts, component libraries, interactive prototypes, and dynamic presentations. Also discover how to collaborate in real time, hand off projects to developers and enhance your workflow with plug-ins and integrations. By the end you’ll be ready to create polished, professional designs and prototypes that are production-ready and easy to share.
Learn Figma in depth with this two-day course designed to give you complete confidence in using the industry-leading interface and prototyping tool. Building on the essentials you’ll explore advanced design features, Auto Layout, components, variables and the latest Figma modules including FigJam, Slides, Buzz and Make. This course is ideal for those looking to go beyond the basics to master modern UX and UI workflows for websites, apps and interactive prototypes.
You will move from understanding the Figma environment to creating responsive layouts, component libraries, interactive prototypes, and dynamic presentations. Also discover how to collaborate in real time, hand off projects to developers and enhance your workflow with plug-ins and integrations. By the end you’ll be ready to create polished, professional designs and prototypes that are production-ready and easy to share.
-
Figma Masterclass 2 Day
Course Details
This 2-day Introduction course offers a deeper exploration of Figma, the industry-leading interface design and prototyping tool. You’ll learn how to design, prototype and collaborate with confidence while working across Figma’s full suite of tools, including Design, FigJam, Slides, Buzz and Make. Through hands-on exercises you’ll build responsive layouts, create reusable components, work with variables and Auto Layout and explore advanced techniques for interactivity, animation, and developer handoff.
Upon successful completion of this course, you will be able to:
- Understand Figma’s complete design ecosystem and workflow
- Create complex, responsive layouts using Auto Layout and grids
- Design and manage component libraries and style systems
- Prototype with advanced interactivity, animation, and conditional logic
- Collaborate in real-time and manage design sharing and feedback
- Use plugins, FigJam, and Slides for extended design workflows
- Prepare and hand off professional design assets for development
By the end of the course, you’ll have the skills to confidently create, animate, and share production-ready designs and prototypes using the full power of Figma’s modern collaborative environment.
Course Target Audience and delegate prerequisites:
This course is intended for designers and developers who are new to Figma and who want to learn the interface, commonly used features and master more advanced techniques.
You will need basic PC or Mac skills, including a solid understanding of a computer's operating system (Windows or Mac OS). You will also need to know how to launch a program, create and save files, and copy files.
-
Full Course Outline
The following is a general outline. The range of topics covered during your training is dependent upon student level, time available and preferences of your course booking.
Day 1 Introducing Figma- Understanding what Figma is and how it fits into UX and UI design
- Exploring Figma’s ecosystem: Design, FigJam, Slides, Buzz, and Make
- Differences between Figma and other design tools like Sketch and Adobe XD
- Using Figma in browser vs. desktop app
- Managing accounts, teams, and users
- Educational and team licensing options
- Overview of the Figma interface: Panels, tools, and navigation modes
- Understanding files, drafts, and projects in Figma
- Creating and managing projects and pages
- Working with sections and frames to structure designs
- Navigating the canvas, zooming, and using the quick menu
- Understanding the difference between assets and layers
- Managing preferences and workspace setup
- Creating and nesting frames: Building screen structures
- Setting up layout grids for responsive design
- Configuring columns, gutters, and margins for precision
- Using Auto Layout for flexible and adaptive layouts
- Applying alignment and spacing for consistency
- Understanding pixel density and frame constraints
- Creating and editing basic shapes and vectors
- Using the Pen, Pencil, and Boolean tools for custom graphics
- Combining, subtracting, and intersecting shapes
- Flattening complex shapes into single vectors
- Working with fills, strokes, and blending modes
- Applying spacing, distribution, and shape transformations
- Creating and styling text frames
- Adjusting text properties, auto-sizing, and scaling
- Creating reusable text styles for consistency
- Defining and managing colour styles
- Using hex and decimal colour values
- Applying colour variables across your design
- Importing and placing images in frames
- Using images as fills and properties
- Understanding supported image formats
- Creating and editing masks for layered effects
- Applying image effects, transparency, and blending
- Exploring Figma’s visual effects, including glassmorphism
- Creating reusable components and understanding instances
- Overriding properties and managing component states
- Using variants for multi-state components
- Creating shared asset libraries for teams
- Accessing and managing team and community libraries
- Copying, pasting, and exporting assets effectively
Day 2 Prototyping and Animation- Entering prototype mode and linking screens
- Understanding triggers, actions, and flows
- Adding transitions, overlays, and motion effects
- Using smart animate and easing for smooth animations
- Testing prototypes across devices and viewports
- Working with hover and tap events for interactivity
- Understanding variables and their types (boolean, numeric, text)
- Using the Variables panel to create dynamic properties
- Changing variables with user interactions and events
- Creating conditional logic in prototypes using variables
- Integrating variables with components and states
- Real-time collaboration: Co-editing and commenting
- Managing sharing permissions and feedback
- Sharing prototypes, presentations, and comments with stakeholders
- Exploring Developer Mode for design handoff
- Viewing HTML, CSS, and code snippets for components
- Understanding Figma’s limits in code export and integration
- Finding, installing, and managing plugins
- Using productivity and design enhancement plugins
- Examples: Google Material Symbols, iOS icons, accessibility checkers
- Integrating plugins into team workflows
- Creating and collaborating in FigJam boards
- Using templates, sticky notes, and connectors for ideation
- Organising FigJam content for workshops and brainstorming
- Creating presentation projects in Figma Slides
- Adding and animating slide elements and transitions
- Presenting and sharing slides effectively
- When and why to use Figma Draw
- Freehand drawing with Pen, Brush, and Pencil tools
- Adjusting brush styles, vector paths, and variable widths
- Creating custom Bézier curves and artistic effects
- Introducing Figma Sites for web-based presentation
- Using templates and design elements in Sites
- Adding and organising content and components
- Integrating design files into Sites for live previews
- Understanding Buzz for interactive design boards
- Managing boards, viewing modes, and exports
- Introducing Make and Vibe coding within Figma
- Exploring existing Make projects and creating your own
- Integrating Make content into Figma designs
- Exporting assets in different formats (PNG, SVG, PDF, etc.)
- Understanding vector vs. bitmap exports
- Exporting multiple sizes and previews
- Preparing presentations and exports for stakeholders
- Best practices for presenting and sharing design projects
-
Location Details
This course is provided as a remote online course with live training provided by our Certified Trainer.
Accessing the live online course anywhere is easy and all you will need is:
- Computer with the trial or full version of the software
- Separate screen or device for the shared video display
- Sound output via computer or headset
- Ideally a camera and microphone on the computer for remote contact
Our goal is for you to be able to create simple but professional documents that are ready to use for the web and for print.
It is important to note this is not a classroom based training.
-
Figma Masterclass 2 Day - Upcoming Online Course Dates
23 Mar - 24 Mar Special Offer! £349 + vat 07 Apr - 08 Apr £395 + vat 03 Jun - 04 Jun £395 + vat 15 Jun - 16 Jun £395 + vat 17 Aug - 18 Aug £395 + vat 14 Oct - 15 Oct £395 + vat 07 Dec - 08 Dec £395 + vat -
Client Reviews
"The overall training experience was excellent. A small group enabled the attention to be given to all of the candidates in a direct and effective way. The tutor was very good at teaching us and helping us to understand all of the content. I certainly would not hesitate in using XChange Training again."
Matthew Clarke, Edenred, Dreamweaver ACA - 5 Day Masterclass
"The instructor was excellent and very patient!"
Sharon Clarken, Newsquest Magazines Ltd, Photoshop - 2 Day Advanced
"The trainer was very informative and helpful, and approach the course in a relaxed manner at a good pace. Many thanks"
Sarah Hatherall-Good, Woolmer Hill School, HTML & CSS Introduction - 2 Days
"I found the training went at a great pace and the instructor was extremely helpful and answered all the questions that were thrown at him, plus a good few tips and pointers. Very Pleased."
Antony Frangos, Pentland Brands, Cinema 4D - 2 Day Introduction
"Can I just say what a fantastic trainer he was! The course was just brilliant and I can't wait to start using InDesign. Thanks so much."
Deborah Lennard, Merrill Lynch, InDesign - 2 Day Introduction
"It was an informative two days I now feel confident enough to design and create my own brochures and have picked up some handy short cuts."
Lauren Partakis, Fairhome Group, Adobe InDesign - Two Day Introduction
"Excellent course which was easy to follow."
Carlo Gonzalez, Ldo Creative, Adobe DPS - 2 Day Introduction
"An excellent and thorough introduction to OS X."
Steve Fairchild, Park Communications Ltd, Mac OS X - 1 Day Introduction
"Good very clear instructing, especially given that this was the first time I used the software. Excellent."
Sarah Tennant, Christies, Bespoke Apple Keynote 1 Day Introduction
"Very Good, All my questions were answered and I had a comprehensive introduction to Cinema4D. I will be coming back for the intermediate and advanced course along with an After Effects course."
Fraser Crick, Estee Lauder, Cinema 4D - 2 Day Introduction