Designer-led intros and walkthroughs for more complex components, patterns, and processes.
Tutorial videos
Updated May 12, 2026
Overview
- This is a collection of short videos that explain how to deal with specific issues.
- We'd love to get your feedback on the videos. Select a thumbs up or thumbs down after watching.
Using the Fusion libraries in Figma
In this tutorial you'll learn how to:
- Activate Fusion DS libraries in Figma
- Design faster with ready-made components and patterns
- Style layouts with Fusion variables, for design-dev alignment
- Prepare for theme switching with mode-ready variables
- Align with development for faster handoff
- Design for everyone with accessibility-audited UI elements
Light and dark modes in the new Figma libraries
The Fusion DS Figma libraries are designed to work in both light and dark modes. They come with 'Product-Light' context variables already applied to all the components and patterns. To customize your designs for dark mode, simply apply 'Mode - Dark' variables. While it is possible to apply different modes to specific areas within your design, product designers typically apply a mode to the entire page design.
Why is this beneficial?
- It allows product designers to quickly change designs between light and dark modes.
- The variable collections used in Figma are synced with the design tokens used by developers, removing the need to provide detailed color mark-ups.
- Product teams can be confident that accessible contrast requirements are still met.
Accept updates from a Figma library *
How to reduce the risk of breaking your designs.
https://www.loom.com/embed/25cea2ba166a4e89a0384eff9565b543?sid=e2bee998-1229-4a0b-8b9a-0e489a2b4ba3
Working with tables
Overview
Sticky columns and Horizontal scrollbar
Child cells and Cell dividers
Date range input (advanced variant) *
How to use the advanced variant.
Link: Figma prototype
https://www.loom.com/embed/614b81b810354c3c8202aa285cfe00b4?sid=fa20c434-39b6-4c35-82cb-e6fa25e8feb4
Figma introduction for developers
A Rapid Tour for Developers: Exploring Figma Component Props, Variants, and Library Updates
This video is for developers who are actually building the components, not waiting on specs or pixel‑perfect markups. It shows how to use Figma component properties as the source of truth to explore every variant, state, and behaviour, so you can understand what a component really supports before you code it. By playing with props and nested instances yourself, you’ll implement faster, avoid guesswork, and make smarter calls about if and when to accept library updates. Less handoff friction, fewer surprises, better components.
Designing with layout spacing tokens
How to correctly apply layout spacing tokens when designing with Fusion DS components.
Install Tokens Studio for Figma.
Inspect tokens using read access URL sync.
| Date | Changes |
|---|---|
| February 2026 | Added Designing with layout spacing tokens video |
| October 2025 | Archived some outdated videos.Changed page title to Tutorial videos. |
| 28 February 2024 | Added Brand customization variables video.Reordered videos |
| 31 January 2025 | Added orange callout stating some videos using the frozen Figma libraries.Added links for Figma prototypes and demos.Removed outdated Figma variables video, though it's still available in Loom.Updated Light and dark modes introduction.Added Frozen product variables video. |
| January 2025 | Added new videos:Large and small screens variables in FigmaLight and dark modes in Figma. |
| December 2024 | Updated ‘Please contact us’ link.Added links for Tokens Studio plugin installation. |
| September 2024 | Copied information from Product design system. |
Frozen-product variables in the new Figma libraries
If your product was built using the old “frozen” components and patterns (using ❄Frozen❄ libraries and V4 tokens), you may be reluctant to use this new Sage Design System portal and new DS Figma libraries. The good news is that you can start using them right away and still achieve the desired “frozen” look and feel, so that you don’t get a clash of styles when you mix frozen and new components in the same design. These new libraries include the option to choose between themes (or variable modes). This means you can use the new libraries, and select the ‘Frozen product’ variable mode to instantly style your components and patterns to look like those in the old frozen Figma libraries. Then, when your product is ready to make the full switch to the new DS styling, change the variable mode to ‘Product-Large’ or ’Product-Small’, and your designs will update to reflect the new DS styling.
Why is this beneficial?
- It allows product designers to utilize the new DS Figma components and variable collections whilst maintaining the existing 'frozen' look and feel.
- Developers can gradually update components to use the new design tokens, whilst referencing the ‘Frozen product’ variables (or theme).
- Using ‘Frozen product’ variables ensures that designers and developers stay in sync as they work towards updating all components. Once everything is updated, both designers and developers can switch to the new DS styling simultaneously by changing from ‘Frozen product’ to ‘Product-Large’ (or ‘Product-Small’).
Find out more in the following video (duration 2:36 min). Link: Figma demo file.
Brand customization in the new Figma libraries
The new design system libraries provide accessible contrast with carefully calculated tones. By replacing a single color, product designers can integrate their chosen brand color for white label customers and third-party vendors. Colors can be adapted for both light and dark modes.
Why is this beneficial?
- Designers and developers start with the same custom brand color and follow unified rules for light and dark modes.
- Figma variable collections and design tokens adjust the brand color and apply it consistently across all components and states.
- Product teams can trust that accessibility contrast requirements are met.
- Customers and vendors see their brand color featured, while all other colors remain neutral, ensuring a harmonious and professional look.
Find out more in the following video (duration 5:40 min). Link: Figma demo file.
https://www.loom.com/embed/d89340724197409fa9d9de3cc39c1960?sid=58f3b4b4-c31c-44d8-9aac-91c5c5a74a44
Large and small screen variables in the new Figma libraries
The new DS Figma libraries are designed to work seamlessly with both large and small screen layouts. The libraries have the 'Product-Large' variable mode already applied.
To tailor your designs for small screens, the 'Product-Small' variables should be applied. This will help optimize your designs for smaller screens. Although some manual adjustments may be required, such as resizing the overall page or selecting different breakpoint variants for specific components, you won't need to adjust font sizes, spacing between elements, or dimensions. The variables will take care of these aspects for you.
Why is this beneficial?
- It enables product designers to quickly adapt designs to various screen sizes.
- The variable collections used in Figma are directly linked to the design tokens used by developers, eliminating the need to provide detailed layout markups to your developers.
In this video you will see examples of a page design, using ‘Product-Large’ and ‘Product-Small’ variables to adjust font sizes, spacing, and dimensions. Link: Figma demo file.
https://www.loom.com/embed/4e5bf53567fc4da69f46d09e2f100621?sid=346304f1-381a-47d9-80ac-1e6ade65ae65
QA process for developed components *
How to quality assure a developed component. Learn the steps to understand the nuances of a component, its variants, and behaviors. Explore the key focal points of the QA process, and discover how to meticulously review your code against Figma styles and tokens.
https://www.loom.com/embed/cce3a1d9906a4ea4b9515b16922a453b?sid=c5575d4e-82e8-483f-b75f-f51388d9ee49
Exploring Figma component tokens and properties *
How to inspect components, explore applied tokens, and discover available component props to learn more about component behavior.