Tool or Technology
TT0095

Figma in Action

Design, Prototype & Scale Digital Experiences

Figma
Duration
16 Hours
Level
Intermediate
Delivery
Instructor-Led
Format
Capability Training

Programme Objectives

  • Develop functional proficiency in designing responsive, reusable, and user-focused digital interfaces using Figma.
  • Apply Auto Layout, components, variants, variables, and design-system principles to create scalable interface systems.
  • Build interactive prototypes that simulate realistic user journeys, states, conditions, and responsive experiences.
  • Use Figma AI and the Design Agent to accelerate ideation, layout creation, repetitive design work, and design-system adoption.
  • Prepare implementation-ready designs using Dev Mode, variables, Code Connect, and structured designer-to-developer handoff practices.

Technology covered

Figma DesignAuto LayoutComponentsVariantsVariablesPrototypingFigma AI / Design AgentDesign SystemsDev ModeCode ConnectFigma MCP Server

Who should attend

  • UI Designers
  • UX Designers
  • Product Designers
  • Web & Digital Designers
  • Interaction Designers
  • Design System Designers
  • UX Engineers
  • Frontend Developers
  • Product Managers & Product Owners
  • Digital Product Teams
  • Creative & Experience Design Professionals
  • Design Leads

Prerequisites & Participant Readiness

  • Basic understanding of UI/UX or digital-product design concepts is beneficial
  • Familiarity with frames, layers, typography, colour, and basic interface-design principles is helpful
  • Basic experience with Figma or another visual-design tool is recommended
  • Familiarity with web or mobile application interfaces is beneficial
  • No programming knowledge required for the core design modules
  • Basic awareness of HTML/CSS is useful for Dev Mode and developer-handoff activities
  • No completion of shorter Figma programmes is required

TOC Modules

Concepts
  • Understanding Figma within the digital product design lifecycle
  • Understanding frames, layers, pages, sections, constraints, and reusable design structures
  • Reviewing visual hierarchy, spacing, alignment, typography, colour, and consistency
  • Understanding responsive interface requirements across devices
Practical activities
  • Organising a professional Figma design file
  • Creating structured desktop and mobile interface frames
  • Applying grids, typography, spacing, and colour consistently
  • Recreating a selected interface using structured design practices

Scenarios

Product Requirement to Interactive Application Prototype

Product Requirement → User Flow → Wireframe → Responsive UI → Components & Variables → Interactive Prototype → Stakeholder Review → Refined Design

Participants convert a realistic digital-product requirement into a responsive, reusable, and interactive web or mobile prototype, improving design consistency and reducing repeated design effort.

Design System to Developer-Ready Experience

Brand & Product Standards → Design Tokens → Components & Variants → Shared Design System → Product Screens → Dev Mode → Code Connect / Development Context → Developer Handoff

Participants build a scalable interface system and use Figma's developer-facing capabilities to improve consistency between design intent and production implementation.

Related programmes

Continue with programmes from the same capability area.

Take the next step

Ready to make this programme work for your team?

Customise modules, duration and business scenarios for your team.

Instructor-ledVirtualHybrid

Designed around your roles, tools and real workflows.