Figma for Beginners is a course in UX/UI basics and screen design for websites and mobile apps in Figma, from wireframes, styles, Auto Layout, components and variables through to clickable prototypes. It suits complete beginners, new UX/UI designers, developers and students, and you leave able to design a mobile app with a working prototype in Figma.
Figma has become the main tool for teams that design websites and apps. It runs straight away in a browser or the desktop app, several people can edit the same file at once, and work is handed to developers from a single file. Yet many beginners use Figma like a general drawing program, placing objects one by one without Auto Layout, components or styles, so every change or new screen means editing item by item and the result is inconsistent.
This course lays the foundations of UX/UI and shows how to use Figma Design methodically, from wireframes, frames, shapes and the Pen tool to Thai and English text, colour and images managed with styles, layout grids and constraints, and Auto Layout including wrap and grid. Learners then build components with variants and component properties, use variables for light and dark modes, create prototypes that click through like a real app, and use plug-ins and Figma AI with an understanding of their limits. The course closes with a workshop that designs a mobile app from wireframe to prototype and shares it for others to test. (2 days, 6 hours per day, 12 hours in total, Beginner level.)
Course Details
This is the 2026 edition of the Figma for Beginners course. It runs for 2 days, 6 hours per day (12 hours in total, 09:00-16:00), as lectures with a lab in every section, at Beginner level. The content has been rewritten for the current Figma Design interface and adds Auto Layout wrap and grid, component properties, variables with light and dark modes, overlay and Smart Animate prototyping, and Figma AI tools. Learners use their own Figma account; the free Starter plan covers most labs, while Dev Mode, team libraries and some AI features need a paid plan and are demonstrated as an overview. Learners take home the course handbook, sample files, a UI kit and the mobile app file built in the workshop.
Section 1: UX/UI Basics and the Design Process
Section 2: Lab: Getting Started with Figma Design
Section 3: Lab: Shapes, the Pen Tool, Boolean Operations and Masks
Section 4: Lab: Text, Colour, Images and Styles
Section 5: Lab: Layout Grids and Constraints
Section 6: Lab: Auto Layout from Basics to Grid
Section 7: Lab: Components and Variants
Section 8: Lab: Variables and Light/Dark Modes
Section 9: Lab: Prototyping and Interaction
Section 10: Plug-ins, Community and Figma AI
Section 11: Lab: Collaboration and Handoff
Section 12: Workshop: Designing a Mobile App from Wireframe to Prototype
No public rounds are open right now. Join the waiting list and we will contact you first when the next round opens, or ask us on LINE. Or call 02-570-8449 or 088-807-9770
UX (user experience) is the design of the user's overall experience, from understanding their problems and goals to planning the flow of tasks and testing whether it is genuinely easy to use. UI (user interface) is the design of what users see and interact with, such as layout, colour, type, buttons and icons. The two must work together, so this course starts with user flows and wireframes before designing real screens in Figma.
Auto Layout makes a frame arrange its contents automatically using the direction, spacing and padding you set, so sizes and positions adjust when you edit text or add items. Select the objects and press Shift+A, then set direction, spacing, alignment and Hug, Fill or Fixed resizing. As well as horizontal and vertical, you can choose Wrap so items flow onto new lines, and Grid for two-dimensional layouts.
Design each screen as a frame, then open the Prototype tab, select a button or object and drag a connection to the destination frame. Set a trigger such as On click and an action such as Navigate to or Open overlay, and choose a transition such as Smart Animate. Then click Present to try it, share the link for others to test, or view it on a phone in the Figma app.
Components are reusable pieces of a screen such as buttons, cards or input fields: edit the main component and every instance updates, and variants keep different states together in one set. Variables are stored values such as colours, spacing or text, and modes let you switch between sets of values, for example light and dark themes. Both keep a file consistent and editable in one place.
It suits beginners who want to design website or mobile app screens, new UX/UI designers, developers, product owners, marketers and students. No design background is needed; you only need to be comfortable with a computer and a web browser and have a Figma account, which can be the free Starter plan.
You will be able to map user flows and wireframes, organise files with styles, Auto Layout, components and variables, build screens that adapt to their content and switch between light and dark modes, and create clickable prototypes to share for testing. You also leave with your own mobile app file, designed from wireframe to prototype in the workshop.
Articles are published in Thai.
Many PHP websites start as procedural code that is quick to write and easy to follow. As the system grows, functions end up scattered across every file, SQL is mixed with HTML, and a change in one place breaks several others until nobody dares to touch it.…
Many developers build web pages that work perfectly well yet still look cluttered, hard to read or untrustworthy, and they are not sure what to fix. The Refactoring UI approach closes this gap with practical techniques from a developer's point of view, such…
Many people who can already write Java still put everything into a few large classes. As the system grows it becomes hard to change, hard to test and impossible to reuse. Thinking in objects properly gives each piece of code a clear responsibility, and modern…
