Figma for Product Teams
A two-day hands-on programme on Figma, which has become the place product work happens rather than only where designers draw. Product managers comment in it, engineers inspect from it, and marketing exports from it. Working confidently in Figma is now a general product-team skill rather than a specialist one.
The two days move from the interface through to the things that separate a file someone else can work in from one only its author understands: components and variants, auto layout, a design system with real tokens, prototyping, and a handover engineers can build from without a meeting. Participants work on a real interface throughout.
HRD Corp SBL-Khas Claimable
Programme Agenda
Day 1, 9:00 AM - 9:15 AM
Welcome and Programme Overview
Introduction to the session, objectives, and housekeeping.
Day 1, 9:15 AM - 10:15 AM
The Figma Workspace
Files, pages, frames, and layers. Keyboard shortcuts and habits that save hours later.
Day 1, 10:15 AM - 10:30 AM
Break
Day 1, 10:30 AM - 11:30 AM
Layout and Constraints
Grids, alignment, and constraints so screens hold up when they are resized.
Day 1, 11:30 AM - 12:30 PM
Auto Layout
The single biggest time saver in Figma. Padding, spacing, direction, and nesting, applied to real components.
Day 1, 12:30 PM - 1:30 PM
Lunch
Day 1, 1:30 PM - 2:20 PM
Styles for Colour and Type
Set up text and colour styles once, then change them everywhere in a click.
Day 1, 2:20 PM - 3:15 PM
Components and Instances
Build once, reuse everywhere. What overrides do, and why instances detach when you least expect it.
Day 1, 3:15 PM - 3:30 PM
Break
Day 1, 3:30 PM - 4:10 PM
Variants and Properties
Collapse a dozen button states into one component with clean, readable properties.
Day 1, 4:10 PM - 4:45 PM
Variables
Modes for light and dark, spacing tokens, and swapping themes without redrawing anything.
Day 1, 4:45 PM - 5:00 PM
Day 1 Close
Recap and what to review before day two.
Day 2, 9:00 AM - 9:15 AM
Day 1 Review
Recap of day one and the questions it left open.
Day 2, 9:15 AM - 10:15 AM
Shared Libraries
Publish a library, consume it in another file, and handle updates without breaking your team's work.
Day 2, 10:15 AM - 10:30 AM
Break
Day 2, 10:30 AM - 11:30 AM
Interactive Prototyping
Links, overlays, and smart animate. Building a flow that behaves closely enough to test with a real person.
Day 2, 11:30 AM - 12:30 PM
Conditional Logic and Variables in Prototypes
Move past static click-throughs: counters, toggles, and state that persists across screens.
Day 2, 12:30 PM - 1:30 PM
Lunch
Day 2, 1:30 PM - 2:20 PM
Developer Handoff
Dev Mode, inspecting specs, annotations, and exporting assets so engineering is not left guessing.
Day 2, 2:20 PM - 3:15 PM
Working with Others
Comments, branching, version history, and file structure that survives more than one contributor.
Day 2, 3:15 PM - 3:30 PM
Break
Day 2, 3:30 PM - 4:45 PM
By the end of the day, participants will be able to:
Navigate Figma confidently and work at speed with shortcuts and sensible file structureBuild responsive layouts using Auto Layout, grids, and constraintsCreate reusable components with variants and propertiesUse styles and variables to manage colour, type, spacing, and themingPublish and consume a shared library across filesBuild an interactive prototype, including basic conditional logicPrepare files for developer handoff using Dev ModeCollaborate in a shared file without overwriting other people's work
Day 2, 4:45 PM - 5:00 PM
Wrap-Up and Q&A
Key takeaways, next steps, and close.
Key Outcomes
- Work confidently in the Figma interface, with frames, layers and pages organised
- Build components and variants so a change propagates instead of being repeated
- Use auto layout to create designs that respond rather than break
- Set up styles, tokens and a small design system a team can share
- Build an interactive prototype that can be tested with real users
- Prepare a handover engineers can build from, with specs and assets
- Collaborate in a shared file with comments, branches and version history
Training Mode Physical / Online / Hybrid / e-learning
HRD Corp SBL-Khas Claimable
Level Intermediate. Suitable for designers, product managers, marketers, engineers and founders. No prior Figma experience required, though general computer confidence is assumed.
Duration 2 Days (16 Hours) | 9:00 AM to 5:00 PM daily
Venue In-house at the client's premises, or delivered via the client's preferred platform (Microsoft Teams, Zoom, or equivalent)
Assessment A component-based, prototyped interface with a documented handover, reviewed against a file quality checklist
Certificate Certificate of Completion issued to all participants upon full attendance