Equinet Academy
Design Faster, Smarter, and Turn Ideas into Functional, User-Friendly UI Designs
Course Description
What is This Course About?
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!
Tools Covered
Inside your toolbox
Work with the same powerful tools the pros trust, practical, proven, and built to help you succeed from day one.
Target Audience
Made for the BOLD!
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
Prerequisites
What You’ll Need to Get Started
You are required to have basic computer navigational skills such as opening and closing of files, dragging and dropping widgets, copying, and pasting 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
Course Highlights
What You’ll Learn
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
What You’ll Achieve
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 colour 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.
Skills Gained:
Figma Interface Mastery
Learn the core panels, tools, layers, and workspace structure needed to navigate and operate Figma confidently.
Foundational UI Design Principles
Apply alignment, spacing, hierarchy, and visual balance to create clean and intuitive interface layouts.
Component Creation Skills
Create basic UI components like buttons, fields, and icons using Figma’s shapes, text tools, and styling features.
Wireframing & Layout Planning
Build low-fidelity wireframes that outline page structure and map out clear user interface flows.
Basic Prototype Building
Connect frames with interactions, transitions, and navigation links to form functional beginner-level prototypes.
File Organisation & Workflow
Manage pages, layers, and naming conventions to maintain an efficient, professional workspace.
Figma Collaboration Techniques
Use comments, sharing, and real-time collaboration tools to work smoothly with peers and stakeholders.
Usability Feedback & Iteration
Evaluate prototypes, gather initial usability inputs, and iterate designs for improved UX.
Accessibility Design Basics
Incorporate accessibility tools, colour contrast principles, and UI adjustments for inclusive design.
Auto Layout Implementation
Use Figma’s Auto Layout to build responsive, scalable components that adapt to different screen sizes.
Certification Track
Level up!
Get certified. Get noticed. Get ahead.
This course is part of the Certified UX Designer (CUXD) Programme.
Module 1: User Experience & User Interface (UX/UI) Design Essentials
Module 2: User Interface (UI) Design
Module 3: What The Figma (WTF)
Module 4: Advanced UX/UI Design
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.
Course Code: TGS-2025055845
Course Support Period: 07 Jul 2025 – 06 Jul 2027
Course Outline
Inside the course
This WSQ Figma course covers UI design fundamentals, Figma workflows, design systems, Auto Layout, responsive design, accessibility, prototyping, and collaboration. Learn to create wireframes, high-fidelity interfaces, and interactive prototypes using industry-standard Figma tools.
Introduction to Figma and the UI Design Process
- 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
Building a Design System
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
Building an accessible Landing Page (High-Fidelity)
- 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
Prototyping & Animation
- Concept: Prototype Mode (incl. Auto Animate)
- MicroAnimations – Default State > OnHover > OnPress > Inactive
- Sticky Scroll
- Animating the high-resolution landing page
Collaborating in Figma
- Sharing files and projects (Presentation -or- Handover to devs)
- Real-time collaboration features
- Using comments and feedback tools
- Version control and history
Working better with Figma
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
Assessment Component
- Written Exam
- Project
Trainers
Meet Your Educators
Trainer Bio
Marc Chitran
Marc Chitran is a seasoned designer, skilled in both traditional and modern design disciplines. His experience encompasses interior, industrial, and furniture design, as well as UX/UI, interaction, and graphic design, including branding and illustration. This unique blend of physical and digital design allows him to approach creative challenges with innovation, critical thinking, and effective problem-solving. Marc’s work is characterised by user interfaces that seamlessly merge aesthetics and functionality, providing end-users with meaningful experiences throughout their user journeys.
Trainer Bio
Louis Puah
Louis is a user experience designer with over 8 years of experience across public and private sectors. He has served as a UX designer, developer, and consultant in places like Govtech, Hatch, several startups in Silicon Valley, and as a freelancer with varied clients like Reste Group, Katapult, and SIM. He is passionate about education and designing better experiences around schooling.
Course Fee & Funding
Fund Your Brain Gain
Access funding opportunities and resources designed to fuel your learning goals.
Course Fee After Eligible SSG Subsidies:
From S$297.00 after SSG Subsidies
Full Course Fee (without funding)
S$990.00
Course Schedule
Mark Your Calendar!
Discover course schedules crafted with you in mind, structured for balance, driven by your goals, ready for action.
| Learning Mode | Course Dates | Duration | Trainer |
|---|---|---|---|
| In-Person | 28, 29 May 2026 (Thu, Fri) | 9.00am - 6.00pm | |
| In-Person | 13, 14 Jul 2026 (Mon, Tue) | 9.00am - 6.00pm | |
| In-Person | 22, 23 Aug 2026 (Sat, Sun) | 9.00am - 6.00pm | |
| In-Person | 29, 30 Sep 2026 (Tue, Wed) | 9.00am - 6.00pm | |
| In-Person | 24, 25 Nov 2026 (Tue, Wed) | 9.00am - 6.00pm |
Click on the course dates above to register online.
Featured Work
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.
Frequently Asked Questions (FAQs)
The Need-to-Know Stuff, Fast
Everything you need to know about the course. Can’t find the answer you’re looking for? Please contact our friendly team.
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.
Brochure Download
See What’s Inside: Get the Brochure
Explore the course outline, key topics, and learning outcomes you will gain from this training.
Related Courses
More to explore!
Take your learning further, discover handpicked courses designed to expand your skills and spark new ideas.
Design Better Digital Experiences, Even Without a Design Background
Design Faster, Smarter, and Turn Ideas into Functional, User-Friendly UI Designs
Apply Real-World UX/UI Design Skills With Hands-On Guidance From Industry Practitioners