Role-Based Programme
RB0655

Figma for Information Technology

Prototype Interfaces, Architect Systems & Accelerate Design-to-Development Workflows

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

Programme Objectives

  • Develop functional proficiency in using Figma across IT solution design, interface prototyping, architecture visualization, and technical collaboration.
  • Translate system requirements, workflows, and user needs into diagrams, wireframes, reusable components, and interactive prototypes.
  • Apply components, variables, Auto Layout, and design-system principles to create scalable digital interfaces.
  • Use Dev Mode, Code Connect, Figma MCP, and AI-assisted workflows to improve design-to-development handoff.
  • Establish controlled collaboration, validation, accessibility, documentation, and governance practices for production-oriented Figma workflows.

Tools covered

Figma DesignFigJamFigma MakeFigma AgentDev ModeFigma MCP ServerCode ConnectComponentsVariablesAuto LayoutPrototypingDesign SystemsVersion History

Who should attend

  • IT Managers
  • Application Development Professionals
  • Software Engineers
  • Frontend Developers
  • Full-Stack Developers
  • Solution Architects
  • Technical Architects
  • Business Systems Analysts
  • IT Business Analysts
  • Application Support Professionals
  • DevOps Professionals
  • UI Engineering Professionals
  • Technical Product Professionals
  • IT Transformation Professionals

Prerequisites & Participant Readiness

  • Basic understanding of software applications and IT systems
  • Familiarity with application requirements, workflows, or user interfaces
  • Basic knowledge of web or application-development concepts
  • Understanding of HTML, CSS, frontend development, or APIs is helpful
  • Familiarity with collaborative development environments is beneficial
  • No professional UI/UX design expertise required
  • No previous Figma course completion required

TOC Modules

Concepts
  • Understanding Figma Design, FigJam, Dev Mode, Make, and collaborative development workflows
  • Understanding frames, layers, pages, assets, components, and interface structures
  • Identifying applications across requirements, architecture, prototyping, and implementation
  • Understanding responsibilities across design, development, architecture, and product teams
Practical activities
  • Exploring a structured Figma project
  • Creating and organizing application screens
  • Inspecting layers, properties, and reusable assets
  • Building Requirement → Design → Review → Development workflow

Scenarios

Enterprise Application Requirement to Developer Handoff

Business Requirement → FigJam System Flow → Figma Wireframes → Components & Variables → Interactive Prototype → Dev Mode → Code Connect / MCP → Developer Review

Participants transform an application requirement into a structured technical design package containing workflows, reusable UI components, prototype behaviour, and development context.

Existing Application Modernization

Current Application → Architecture & User-Flow Mapping → UX Issues → Future-State Prototype → Design System → Figma Make Exploration → Technical Validation → Implementation Handoff

Participants map an existing application, identify interface and workflow improvements, develop a future-state prototype, and prepare structured information for engineering implementation.

## Current Capability Reference

Figma's **Dev Mode** provides developers with implementation-oriented design context including measurements, specifications, assets, variables, and code-related information. Figma's **MCP server** can also bring Figma design context directly into coding tools and AI agents.

Figma has expanded **Code Connect with MCP** so coding agents can receive context about production components rather than relying only on visual interpretation. Figma's August 2026 reporting specifically highlights improved design-system adherence when production component context is available to agents.

Current **Figma Make** capabilities support interactive prototyping with code and can use real components, data, files, and constraints through Make kits and attachments. In 2026, Figma also introduced workflows for connecting local production codebases to Figma Make for design, implementation, and review.

Figma's 2026 AI platform also includes a dedicated **Figma agent** that can work directly on the Figma canvas, while expanded MCP workflows can connect design context across Figma Design, FigJam, Figma Make, development tools, and coding agents.

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.