Animation And Design Training | Figma Course in Bangkok

Figma Course Outline

Module 1: Introduction to Figma

• Get Started with Figma and Explore Figma Design
• Create Shapes & Layer Properties
• Copy and Duplicate Layers
• Groups and Frames
• Create a Menu Page
• Exploring Iterations
• Share Designs for Feedback

Module 2: Create Designs

• Use Pages, Grids and Margins
• Place Image and Image Fills, Corner Radius
• Text, Styles, Color Styles and Accessibility
• Use Auto Layout
• Explore, Create and Use Components
• Create Icons with Vector Networks

Module 3: Design Systems

• Styles in Figma, Manage and Share Styles
• Create Color, Text, Effect and Layout Grid Styles
• Create Components to Reuse in Designs
• Prepare, Create and Use Variants
• Create Interactive Components with Variants
• Explore Component Properties
• Name and Organise Components
• Create and Manage Component Properties
• Overview of Variables, Collections, and Modes
• Create and Manage Variables
• Modes for Variables
• Apply Variables to Designs

Module 4: Build Prototypes

• Create Prototypes
• Create Connections
• Set Interaction
• Share Prototypes
• Comment on Prototypes

Module 5: Prepare for Handoff

• Custom File Thumbnails
• Invites and Sharing Permissions
• View Only Editor
• Inspect Tab, Documentation, and Code
• Set Up Exports and Exporting

Module 6: Dev Mode

• Enter Dev Mode
• Navigate Designs
• Inspect Designs
• Use Dev Mode Extensions

Module 7: Figma for VS Code

• Open Figma Designs in VS Code
• Inspect Figma Designs in VS Code
• Auto-Complete Code Suggestions
• View Comment Notifications
• Log Out of Figma for VS Code

Who Should Attend this Figma Course?

The Figma Course is designed for individuals who want to develop practical skills in interface design, User Experience (UX) design, prototyping, and collaborative design using Figma. This course will benefit the following professionals:

• UI/UX Designers
• Web Designers and Developers
• Graphic Designers
• Product Designers
• Visual Designers
• Front-end Developers
• User Experience Professionals

Prerequisites of the Figma Course

There are no formal prerequisites for this Figma Training Course. However, a basic understanding of design principles or digital interfaces may be beneficial.

Figma Course Overview

Figma Training introduces delegates to one of the leading UI and UX design platforms. It covers interface design, collaborative workflows, prototyping, and design systems. Delegates learn to create modern digital experiences efficiently.

Delegates develop skills in Auto Layout, components, variables, Dev Mode, and developer handoff. They also build interactive prototypes and reusable design systems. These capabilities improve design quality and team collaboration.

This 1-Day Figma Course offered by The Knowledge Academy enables delegates to design, prototype, and share digital products with confidence. It develops practical skills for modern UI and UX design workflows. Delegates can apply these techniques to real-world design projects.

Figma Course Objectives

• To understand Figma's interface and core design tools
• To create responsive layouts using Auto Layout and components
• To build reusable design systems and variables
• To develop interactive prototypes for user testing
• To prepare designs for developer handoff using Dev Mode
• To collaborate effectively using Figma's cloud-based workflow

Upon completing this Figma Training in Bangkok, delegates will be able to create user interfaces, build interactive prototypes, and develop reusable design systems using Figma. They will also understand collaborative workflows and developer handoff through Dev Mode.

Roadmap of Learning Figma

This Figma Course follows a structured learning path, guiding delegates from the fundamentals of interface design to collaborative design workflows and developer handoff. Each stage reinforces practical skills, helping delegates apply their knowledge confidently to real-world UI and UX design projects.

• Get Started with Figma: Jump into the Figma interface, make shapes, craft layouts, sort layers, and share your designs for feedback with a collaboration rhythm.
• Create User Interface Designs: Build responsive screens with grids, Auto Layout, typography, images, colour styles, accessibility features, and vector editing tools.
• Develop Design Systems: Set up a design system with reusable components, variants, styles, and variables. This keeps things consistent, and it boosts overall design efficiency across multiple projects, not just one.
• Build Interactive Prototypes: Map out interactive user journeys. You’ll create prototypes, set up interactions, and share clickable experiences so people can review, test, and iterate.
• Prepare for Developer Handoff: Get your design files in order, manage sharing permissions, inspect the design specs, and export assets so development teams can implement everything smoothly.
• Explore Dev Mode and VS Code: Use Dev Mode to inspect what you designed, check code-ready assets, and link Figma with Visual Studio Code. This support helps keep the designer-developer flow efficient and a bit calmer.

What’s Included in this Figma Course?

• World-Class Training Sessions from Experienced Instructors
• Figma Training Certificate
• Digital Delegate Pack