WSQ-accredited courses are eligible for SkillsFuture subsidies.

Design Faster, Smarter, and Turn Ideas into Functional, User-Friendly UI Designs

Course Description

What The Figma? – An Introduction to Figma for Beginners is a fun, hands-on, two-day training designed to take beginners from “What does this button do?” to confidently creating, collaborating, and organising designs in Figma.

As the most used Prototyping platform in the UI Design industry, the applications and features of Figma are continually growing to keep up with the needs of users around the globe.

As you go through this course, you’ll acquire the skills wielded by UI Design professionals to create prototypes that will dazzle your users, whilst developing a profound understanding of the industry. From concept to a highly polished finish, you’ll confidently manage your own UX projects ideal for your portfolio.

Whether you’re a UX design enthusiast, budding designer or product manager looking to increase your capabilities, or simply curious about the design process, this course will provide you with practical skills and a solid understanding of how Figma can empower your work.

By the end, you’ll know how to turn your basic Figma projects into design masterpieces. Join us and discover how Figma can bring your design ideas to life – no previous experience required!

Prerequisite

You are required to have basic computer navigational skills such as opening and closing of files, dragging, and dropping of widgets, copying, and pasting of files.

To get the best-recommended learning outcome result of this course, it is strongly advised to have a working mouse to practice with, instead of relying solely on the trackpad of a laptop PC

Target Audience

This is course is suitable for anyone who wants to understand UX design. It is particularly valuable for:

  • Aspiring designers
  • Graphic designers and professionals working in other design sub-disciplines looking to transition into a career in UX Design.
  • Software engineers
  • Students
  • Business owners and entrepreneurs
  • Product managers
  • Marketers
  • Anyone curious about UX design and looking to apply the principles to various industries

Course Highlights

In this course, you will be working on various hands-on exercises that focus on building your skills and confidence in using Figma to create quality designs, collaborate effectively with teams, and stay ahead in the design industry. You will learn :

  • Workflow techniques, managing design assets, styles, components, grid and column layouts
  • Setting up your brand within your design
  • Crafting responsive elements that effortlessly adapt to any device, proving your design prowess knows no bounds.
  • Auto Layout Feature
  • Discovering the right accessibility tools & techniques, ensuring inclusivity and usability for all users.
  • Incorporating Animations into your elements
  • How to use Variables and put them to work creating even more complete prototypes
  • Use variables to make Light & Dark Modes + Compact & Comfortable spacing versions of your components.

We will equip you with the skills to build prototypes for various screen sizes. You will get to choose and create captivating screens and pages such as:

  • Event Sign-Up Flow
  • Service get-a-quote Lead-generation Flow
  • New User Sign-up Onboarding Flow

Course Objectives

By the end of the class, trainees will be able to:

  • Identify the primary components of the Figma interface, including layers, tools, and panels, and describe their functions.
  • Recognise and apply foundational UI design principles, such as alignment, spacing, and hierarchy, in simple design exercises.
  • Demonstrate the ability to create basic UI components like buttons, text fields, and icons, using Figma’s tools.
  • Construct low-fidelity wireframes that clearly map out the structure of a user interface.
  • Design a simple prototype in Figma by applying basic interactive elements like navigation links and transitions.
  • Organise and manage Figma files using layers, naming conventions, and pages for a clean and efficient workspace.
  • Collaborate effectively using Figma’s commenting and sharing features to engage with peers or stakeholders.
  • Evaluate and revise prototypes based on initial usability feedback, iterating for improved user experience.
  • Distinguish between different types of UI elements (e.g., interactive vs. non-interactive) and choose appropriate elements for a design.
  • Interpret and apply basic color theory to create visually balanced and accessible designs.
  • Demonstrate how to use Figma’s alignment and spacing tools to arrange components in a visually appealing layout.
  • Illustrate basic design flows by connecting wireframes and interactive elements to simulate user journeys in Figma.
  • Present wireframes and prototypes clearly to communicate design choices to team members or stakeholders.

Certification

A SkillsFuture WSQ Statement of Attainment (SOA) – User Interface Design under the Skills Framework TSC and Certification of Completion by Equinet Academy will be awarded to candidates who have demonstrated competency in the WSQ What The Figma (WTF) course assessment and achieved at least 75% attendance.

*This course is accredited by SkillsFuture Singapore under the WSQ Skills Framework User Interface Design

Course Code: TGS-2025055845
Course Support Period: 07 Jul 2025 – 06 Jul 2027

Course Outline

Instructor-Led | Lecture, Group Discussion

  • Quick Introduction to Figma (incl. features to be used in project)
  • In-class Project Brief – Creation of Single Page Website
  • Set up project canvas + Naming convention best practices

Design Process

  • Understanding design thinking
  • Applying design methodologies
  • Efficient workflow strategies

Instructor-led | Lecture, Demonstration and modelling, Individual Exercise

System Tokens

  • Concept: Auto Layout
  • Grid System
  • Breakpoints + Responsive Variables
  • Styles – Creating a colour palette system
  • Styles – Creating a font system (font pairing)
  • Styles – Effects System (Shadows)

Design System Components

  • Concept: Components & Instances (Incl. overrides)
  • Atoms – Logos + Icons + Image Placeholders
  • Molecules – Buttons + Input Fields + Dropdowns + Checkboxes
  • Organisms – Header Navigation + Footer Navigation + Cards + Accordions
  • Siteblocks

Instructor-led | Lecture, Demonstration and modelling

  • Adding & Formatting Images
  • Adding & Formatting Text
  • Hero Banner Segment
  • USPs Segment
  • Features Segment
  • Bento Segment
  • Team Members Segment
  • Pricing Segment
  • Testimonials Segment
  • CTA Segment
  • Social Proof Segment
  • Statistics Infographic Segment

Accessibility

  • Designing inclusive interfaces
  • Using Figma’s accessibility features

Instructor-led | Lecture, Demonstration and modelling, Practice and feedback

  • Concept: Prototype Mode (incl. Auto Animate)
  • MicroAnimations – Default State > OnHover > OnPress > Inactive
  • Sticky Scroll
  • Animating the high-resolution landing page

Instructor-led | Lecture, Demonstration and modelling, Individual Exercise

  • Sharing files and projects (Presentation -or- Handover to devs)
  • Real-time collaboration features
  • Using comments and feedback tools
  • Version control and history

Instructor-led | Lecture, Demonstration and modelling, Individual Exercise

Plugins and Integrations

  • Exploring available plugins
  • Integrating with other design tools (optional)
  • Customising Figma with plugins
  • New Figma Features From CONFIG 2024

File Organization and Naming Conventions

  • Best practices for file structure
  • Consistent naming conventions
  • Design system organisation

Performance Optimization

  • Improving file performance
  • Optimising images and assets
  • Best practices for large files

Trainer

Marc Chitran
  • Experienced Product Designer
  • 10+ Years of Cross-Disciplinary Design Expertise
  • Key Product Designer Behind Award-Winning Software & eCommerce Launches

Course Fees

Course Fee:
S$990.00 (inclusive of 9% GST)

Course Fee After Eligible SSG Subsidies:
From S$297.00 (inclusive of 9% GST) after SSG Subsidies

SkillsFuture Mid-Career Enhanced Subsidy (MCES)

Eligible for Singapore Citizens, aged 40 years old and above

Nett course fee payable (including 9% GST): S$297.00

Course fees after subsidies can be further offset by SkillsFuture Credit.


SkillsFuture Baseline Funding

Eligible for 21 years old and above, and a

  • Singaporean Citizen; or
  • Permanent Resident; or
  • Long Term Visitor Pass Plus (LTVP+) Holder

Nett course fee payable (including 9% GST): S$495.00

Course fees can be further offset by SkillsFuture Credit for Singapore Citizens aged 25 and above. Singapore Citizens aged 21 to 31 may also offset fees with the Post Secondary Education Account Funds.

SkillsFuture Enhanced Training Support for SMEs (ETSS)

Eligible for SME Company-Sponsored, 21 years old and above, and a

  • Singapore Citizen; or
  • Permanent Resident; or
  • Long-Term Visitor Pass Plus (LTVP+) Holder

Nett course fee payable (including 9% GST): S$297.00

Course fees after subsidies can be further offset by Skillsfuture Enterprise Credit (SFEC)

SkillsFuture Baseline Funding

Eligible Non-SME Company-Sponsored, 21 years old and above, and a

  • Singaporean Citizen; or
  • Permanent Resident; or
  • Long Term Visitor Pass Plus (LTVP+) Holder

Nett course fee payable (including 9% GST): S$495.00

Course fees after subsidies can be further offset by Skillsfuture Enterprise Credit (SFEC)


SkillsFuture Mid-Career Enhanced Subsidy (MCES)

Eligible for Non-SME Company-Sponsored, Singapore Citizens, aged 40 years old and above

Nett course fee payable (including 9% GST): S$297.00

Course fees after subsidies can be further offset by Skillsfuture Enterprise Credit (SFEC)

Check your eligible grant amount and nett payable course fees when you sign up now.

Trainee’s Portfolio

Below are some examples of Figma website and landing page designs created by our trainees and designs that you will be able to create by the end of the course.

View All Trainee Portfolio

Frequently Asked Questions (FAQs)

This course is perfect for beginners who want to learn Figma from the ground up, as well as professionals in related fields like product management, development, or marketing who want to better understand design processes.

No prior experience is required! This course starts with the basics, so whether you’re completely new to design or Figma, you’ll be able to follow along.

All you need is a laptop, a stable internet connection, and a free Figma account. A secondary monitor can enhance your experience but isn’t required.

You’ll learn how to navigate Figma’s interface, create basic UI elements, build wireframes, make interactive prototypes, and use Figma’s collaboration features to work effectively with others.

Yes, upon completing the two-day course, you’ll receive a certificate of completion, which can be used to showcase your Figma skills.

Absolutely! Figma is free to use, and all files created during the course are yours to keep. We’ll also share additional resources to help you keep building your skills.

This course is specifically for beginners, focusing on Figma basics, UI fundamentals, and simple prototyping. It’s a practical introduction, while advanced courses dive deeper into design systems, high-fidelity prototypes, and more complex workflows.

Yes, there may be opportunities to use personal projects for exercises like prototyping and presentation activities. This can make the learning even more relevant to your work or interests.

A significant portion of each day is devoted to practical exercises and projects. We believe hands-on practice is the best way to learn Figma, so expect to be working directly in the tool for the majority of the course.

Yes, we provide a set of resources at the end of the course, including tutorials, reading materials, and design templates to support your continued learning.

You’ll learn how to invite collaborators, leave comments, and use Figma’s versioning and sharing features. We’ll also cover best practices for working in a team environment.

We’ll touch on basic responsive design principles and show you how to use Auto Layout to create elements that adapt to different screen sizes. For deeper responsive design, consider advanced courses after this one.

Still have unanswered questions? Check out the FAQs page or submit an enquiry.

Related Courses

1 Day

User Experience & User Interface (UX UI) Design Essentials

Design Better Digital Experiences — Even Without a Design Background

Course BG Elements - TopCourse BG Elements - Top
16 Hours (2 days)

WordPress Website & Landing Page Creation Course

Create Stunning WordPress Websites Without Touching Code

Course BG Elements - TopCourse BG Elements - Top