Tool or Technology
TT0094

Figma Foundations

Design, Prototype & Collaborate Smarter

Figma
Duration
8 Hours
Level
Basic
Delivery
Instructor-Led
Format
Workshop

Programme Objectives

  • Build foundational proficiency in using Figma to design professional web and mobile user interfaces.
  • Apply layout, typography, spacing, components, and responsive-design principles to create consistent interface designs.
  • Build reusable components and interactive prototypes for realistic product and business requirements.
  • Use Figma AI and Figma Make to accelerate ideation, interface generation, visual creation, and functional prototyping.
  • Collaborate effectively with designers, product teams, and developers through shared files, feedback, and Dev Mode.

Technology covered

Figma DesignAuto LayoutComponents & VariantsVariablesPrototypingFigma AIFigma MakeFigJamDev Mode

Who should attend

  • UI/UX Designers
  • Product Designers
  • Web Designers
  • Graphic & Visual Designers
  • Product Managers & Product Owners
  • Frontend Developers
  • Business Analysts & Functional Consultants
  • Design & Innovation Teams
  • Digital Product Teams
  • Marketing & Creative Professionals

Prerequisites & Participant Readiness

  • Basic computer and internet proficiency
  • Basic understanding of websites, mobile applications, or digital interfaces is helpful
  • No professional design experience required
  • No coding knowledge required
  • No previous Figma experience required
  • Availability of some AI and Dev Mode capabilities may depend on the organisation's Figma plan and seat type

TOC Modules

Concepts
  • Understanding Figma and its role in modern product and interface design
  • Understanding UI, UX, wireframes, mock-ups, prototypes, and design systems
  • Understanding visual hierarchy, alignment, spacing, contrast, and consistency
  • Exploring files, pages, frames, layers, properties, and design assets
Practical activities
  • Navigating the Figma Design workspace
  • Creating frames for web and mobile interfaces
  • Adding and organising text, shapes, images, icons, and interface elements
  • Recreating a simple digital interface from a reference

Scenarios

Business Requirement to Interactive Product Prototype

Business Requirement → User Flow → Wireframe → UI Design → Components → Interactive Prototype → Stakeholder Review

Participants convert a business or product requirement into a structured user experience and interactive Figma prototype that can be presented to stakeholders before development begins.

Design to Developer-Ready Handoff

Approved Interface → Auto Layout & Components → Variables → Design Review → Dev Mode → Development Handoff

Participants organise an approved interface using reusable design structures and prepare it for efficient developer implementation, improving consistency and reducing design-to-development gaps.

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.