Figma Advanced Prototyping
Course Facts
- 1 day course
- Our Trainers are Authorised Professionals
- Live Online or Classroom-based
- Certificate of completion
- Maximum class size of 6 for scheduled courses
- Unlimited support after your course
- Courses at all levels: Introduction, Intermediate, Advanced and Masterclasses
Course Outline
- Recap of Prototyping basics
- Working with Interactions
- Creating Overlays in Prototypes
- Using Smart Animate
- Prototyping scrolling and overflow behaviour
Course Dates
We are currently updating our schedule for this course. Please enquire for the next available dates.
Private One-to-One Training
One-to-one tuition tailored to your exact requirements. Your choice of duration, dates and content.
Enquire NowTeam Training for Companies
Group bookings provide you with the most cost-effective way to train your team.
Enquire NowTeam Training and Bespoke Sessions
Booking a private training session allows you to focus on your exact needs on dates that work best for you or your team.
- Sessions can be run online or in person, on your site or at our London training centre.
- We manage training for many of the UK’s largest companies, taking care of all the admin, working with you to ensure the perfect course.
- Our expert trainers will first understand your requirements and then tailor each session to your exact specification.
- We offer a free consultation service to work out every detail of your course.
Prices for bespoke sessions with our expert trainers start at £525 + VAT.
Overview
Course Outline
Recap of Prototyping basics
- Setting multiple flow starting points for your prototype
- Customising your prototype device
- Using the Responsive scaling option
- Prototype actions, triggers and animations
Working with Interactions
- Creating interactions in bulk
- Adjusting animation: Type of Animation, Direction, Animate Matching Layers, Easing and Spring Animation, Duration
- Selecting and editing interactions
- Selecting matching interactions
- Updating connection destinations in bulk
- Copying interaction details
Creating Overlays in Prototypes
- Overlay actions
- Creating an overlay
- Swapping between overlays
- Editing or deleting overlays
Using Smart Animate
- Smart animate layers between frames
- Animating properties: Scale, Position, Opacity, Rotation, Fill
- Applying smart animate
- Smart animate matching layers
- The importance of Layer names in Smart animate
- Viewing matching layers
- Layer order and hierarchy
- Grouping layers
- Smart animate with Slide in and Move in
Prototyping scrolling and overflow behaviour
- Preparing frames for scrolling
- Extending content beyond frame dimensions
- Clipping content
- Applying scroll overflow to frames: Vertical, Horizontal, No scrolling, Both directions
- Applying scroll position to objects within a frame: Scroll with parent, Fixed, Sticky
- Preserve and reset scroll position
Using videos and animated GIFs in prototypes
- Adding video to files
- Adding animated GIFs to files
- Editing video
- Prototyping with video
- Video properties
- Video interactions
- Video interactions within the same frame
- Video and smart animate
- Video and interactive components
Using variables in prototypes
- Introduction to variables
- Typical use cases for variables
- Creating variables
- Setting variable values
- Prototyping with variables
- Using variables with component variants
- Using variables with interactive components
Using expressions in prototypes
- Where to use expressions
- Writing expressions
- Types of expressions: Numerical, String and Boolean expressions
Multiple actions and conditionals
- Reordering actions
- Setting Animation order
- Understanding Conditional statements
- Evaluating conditional statements
Using Variable Modes in prototypes
- Setting mode values based on context
- Using mode values in expressions
- Selecting mode definitions in prototype actions
- Building expressions with mode values
- Changing variable mode with an interaction
Our Clients
Our Recent Success Stories
Photoshop
Kiren's Story
Marketing Manager at Dataminer
InDesign
Cassie's Story
Designer at Dixon Interiors
Animate
Stuart's Story
Graphic Designer at S4C
600+ Reviews
Why Transmedia?
Unlimited Training Support
We offer unlimited training support after your course.
Bespoke Training Solutions
Customised training and software solutions based on your exact specification.
Worldwide Creative Skills Training
Join our authorised training courses live online from anywhere in the world.
Authorised Training Professionals
Our experts are accredited by Adobe, Apple and Claris and bring years of experience and real-world expertise.
Courses Live Online
Join our virtual classrooms to learn from the comfort of your own space in real time from our accredited training experts.
SEE COURSES
Classroom Training
Join us at one of our Authorised Training Centres for a traditional classroom-based experience.
We have everything ready for you to have the best training experience.
SEE COURSES
Private Courses
One-to-one tuition or a private group training with just you or your colleagues.
We can train you live online, at one of our centres or onsite, wherever you are located.
SEE COURSESUseful Links
- Figma home page – Official site from the Figma organisation
- Figma Community – Discover community-made libraries, plugins, icon sets and more
- Figma resource library – Figma official site with recommended best practices and how-to content to improve your product development journey
- Figma downloads and installers – All the downloads in one place
- Figma compared to other UX design tools – Great comparison site, from UX Tools
- Figma's Official YouTube Channel – Watch all the latest Figma videos online
Prototyping interactive designs in Figma
Boosting Productivity in Figma: 8 Tips for Better Figma Collaboration
Organising and managing components in Figma