ආරම්භක දින 2ක් · පැය 12ක් Figma, current web release

Figma and UI/UX Essentials

For people new to product design. Leave with a clickable prototype and a design system

මෙම පාඨමාලාව ගැන

Most first Figma files look the same: forty loose layers named Rectangle 43, three shades of nearly the same blue, and a button that has to be redrawn on every screen. This course is about the other way of working, where a screen is assembled from components you built once, a colour change happens in one place, and the file can be handed to a developer without a translation call. Two days, beginner level, no prior Figma and no design school behind you.

You work on one project from the first hour to the last: a five-screen appointment booking flow for a small clinic, supplied as a written brief with real copy and photographs. You wireframe the flow, build a small design system of colour and text styles, make a button component with default, hover, pressed and disabled variants, then assemble the sign-in, list, detail, booking and confirmation screens from that library. By the end of day two the flow is wired into a prototype you open on your own phone, walk a classmate through, and change based on what they did rather than what you assumed.

Two things separate this from a tour of the toolbar. The first is auto layout, taught properly rather than as a menu item, because it is what makes a card grow with its content and a screen survive being resized. The second is the finishing work most beginner courses skip: checking contrast against the WCAG 2.2 AA ratios of 4.5:1 for body text and 3:1 for large text and interface components, sizing touch targets so a thumb can hit them, naming layers so Dev Mode is readable, and exporting assets at 1x, 2x and 3x. That is the difference between a pretty file and one a development team can build from.

The class is taught in short demonstrate-and-do cycles. The instructor builds a step, you build the same step on your own file, and nobody is left behind on a screen they cannot see. Sessions run live online in your own timezone or in the classroom in Colombo, and every booking includes the recording for twelve months so a step you half-followed on the day can be watched again. Everything in the class works on a free Figma account.

Pricing is shown in LKR for learners in Sri Lanka and in USD for everyone else. Organisations can be invoiced against a purchase order, and the same syllabus can be run privately for one team, using your own product and brand as the project.

ඔබට කළ හැකි වන දේ

  • Set up a Figma file that stays tidy: pages, named frames at standard device sizes, layout grids and an 8-point spacing scale.
  • Turn a written brief into a task flow and a set of low-fidelity wireframes for five screens.
  • Build a small design system: a colour palette and a type scale saved as styles and variables you can change in one place.
  • Build components with variants and properties, including a button with default, hover, pressed and disabled states.
  • Use auto layout and constraints so a card grows with its content and a screen resizes without breaking.
  • Assemble five high-fidelity screens from your own component library rather than redrawing elements on each one.
  • Adapt the same components into a desktop-width layout instead of starting a second design from scratch.
  • Wire the screens into a clickable prototype with triggers, overlays and smart animate, and open it on your own phone.
  • Run a structured walkthrough with a classmate using a supplied test script, and write down the changes their behaviour justifies.
  • Prepare the file for handoff: layer naming, Dev Mode inspection, asset export at 1x, 2x and 3x, and a share link with the correct permissions.

මෙය කා සඳහාද

  • Graphic designers moving from print and social work into apps and websites
  • Marketing and web staff who brief agencies and want to specify screens rather than describe them
  • Front-end developers who receive designs and want to read, inspect and amend a Figma file
  • Founders and product owners sketching a product before paying anyone to build it
  • Students and career changers building the first product piece in a portfolio

කලින් ඔබට අවශ්‍ය දේ

  • No prior experience with Figma or any design software is needed.
  • You should be comfortable with your own computer: browsers, saving files and switching between applications.
  • A free Figma account is enough for everything in the class, and a mouse is easier than a trackpad for a long day of drawing.

ඉදිරි දින

ඉදිරි දින, මිල සහ ඉතිරි ආසන සමඟ
කවදාද කෙසේද කොහේද ආසන මිල වෙන් කරන්න
22–23 Sep 2026 09:00–16:00 +0530 සජීවී ඔන්ලයින් ඔන්ලයින් ආසන තිබේ $695.00
6–7 Oct 2026 09:00–16:00 +0530 මුහුණට මුහුණ ආසන තිබේ $834.00
13–14 Oct 2026 09:00–16:00 +0530 සජීවී ඔන්ලයින් ඔන්ලයින් ආසන තිබේ $695.00
3–4 Nov 2026 09:00–16:00 +0530 සජීවී ඔන්ලයින් ඔන්ලයින් ආසන තිබේ $695.00
17–18 Nov 2026 09:00–16:00 +0530 මුහුණට මුහුණ ආසන තිබේ $834.00
24–25 Nov 2026 09:00–16:00 +0530 සජීවී ඔන්ලයින් ඔන්ලයින් ආසන තිබේ $695.00
ඕනෑම වේලාවක පටන් ගන්න ස්වයං වේගයෙන් ඔන්ලයින් නිතරම තිබේ $49.00

අප ආවරණය කරන දේ

ඉගැන්වෙන අන්තර්ගතය පැය 12ක් පමණ

Day 1, Morning — Getting around Figma and framing the problem

The file structure, the brief behind the screens, and low-fidelity wireframes for the whole flow.

  • Pages, frames, layers and how a design file becomes unusable 30 min
  • Reading the brief: user, task and what counts as done 35 min
  • Device frames, layout grids and an 8-point spacing scale 35 min
  • Shapes, text, images, boolean operations and the tools you use every day 40 min
  • Exercise: wireframe the five screens of the booking flow 40 min
Day 1, Afternoon — Building a small design system

Colour, type, components and auto layout, so the screens on day two assemble instead of being drawn.

  • Colour styles and variables, and a palette that still works on a dark background 35 min
  • A type scale: sizes, line height, weight and saving them as text styles 35 min
  • Components, instances and overrides: what changes locally and what changes everywhere 40 min
  • Variants and component properties: a button with default, hover, pressed and disabled states 40 min
  • Auto layout: padding, gap, resizing and a card that grows with its content 30 min
Day 2, Morning — High-fidelity screens

Assembling the five screens from your own library, then adapting the same parts to desktop width.

  • Building the sign-in and list screens from your component library 40 min
  • Detail and booking form screens: input states, validation and error text 40 min
  • Nested auto layout and constraints for a screen that resizes 35 min
  • Adapting the same components to a desktop-width layout 35 min
  • Icons, images, masks and preparing assets for export 30 min
Day 2, Afternoon — Prototype, test and hand off

Wiring the flow, testing it on a phone with a real person, then making the file safe to hand to a developer.

  • Prototyping: connections, triggers, overlays and smart animate 40 min
  • Testing on a real phone with the Figma mirror app, and fixing what breaks 25 min
  • A structured walkthrough with a classmate: script, tasks, notes and what to change 40 min
  • Accessibility check: contrast ratios, text size, touch targets and reading order 35 min
  • Handoff: layer naming, Dev Mode inspection and exporting assets at 1x, 2x and 3x 25 min
  • Sharing, permissions, version history and leaving comments on a file 15 min

උගන්වන්නේ කවුද

MyLearnPlus Design and Digital Faculty

Designers and digital practitioners teaching Figma, web, marketing and data visualisation

The design and digital track covers Figma and UI/UX, web design with WordPress, digital marketing analytics, and presentation and data visualisation. These are craft subjects with live consequences, so the standard for teaching them is current practice rather than a qualification. Whoever teaches the Figma course ships interface work that developers build from. Whoever teaches WordPress maintains sites that real visitors use and real clients complain about. Whoever teaches analytics reads the reports for a business that spends money on the basis of them, and whoever teaches data visualisation has had to defend a chart to someone who disagreed with it. Instructors bring their own worked examples into class alongside the standard exercise files, which is why two cohorts of the same course are never quite identical in the anecdotes, only in the syllabus.

Staffing works the same way across the whole school. One instructor is assigned per cohort and named in your joining instructions before the course starts. New instructors teach the MyLearnPlus syllabus under observation before running a cohort alone, so the exercise files, the workbook and the structure of a day do not depend on who turns up. Private and in-company groups can be staffed with a second assisting instructor, and any substitution is notified in advance and taught from the same materials.

ගුරු මණ්ඩලය ගැන තව කියවන්න

ඇතුළත් වන දේ

  • Class recording, available for 12 months
  • Project pack: the clinic brief, written copy, photographs and icons, yours to keep
  • Course workbook covering every step demonstrated in class
  • Usability walkthrough script and an accessibility checklist as reusable templates
  • MyLearnPlus certificate of completion
  • Instructor email support after the class for questions on the exercises
  • One free repeat of the same live class, terms shown on the booking page

ඉගෙනුම්කරුවන් කියන දේ

තවම සමාලෝචන නැත. මෙම පාඨමාලාව අලුතින් ප්‍රකාශයට පත් කළ එකකි, අප විසින්ම ලියූ දෙයක් ඔබට පෙන්වනවාට වඩා කිසිවක් නොපෙන්වීම අපි කැමැත්තෙමු. ඉගෙනුම්කරුවන් සමාලෝචන තබන විට ඒවා මෙහි පෙනෙනු ඇත.

මිනිසුන් අසන ප්‍රශ්න

Do I need my own laptop?
For live online classes, yes: you work on your own machine so the file, the component library and the prototype stay with you after the course. For classroom sessions in Colombo we also recommend bringing your own laptop for the same reason. Bring a mouse if you have one, since a full day of drawing on a trackpad is harder work than it needs to be. If you cannot bring a laptop, tell us when you book and we will confirm what is available for your date.
Is Figma included in the price, and do I need a paid plan?
The course fee covers the training, not a software subscription, but you do not need to pay for anything. Every exercise in the class is built to work on a free Figma account, in the browser or in the desktop app. If your employer already has a paid team plan, use that instead so the file lives where your colleagues can see it. We send account setup instructions when you book.
Do I need design experience, or to be able to draw?
No to both. This is a level 1 course written for people who have never opened a design tool. Nothing in the two days requires you to draw by hand: the screens are built from rectangles, text, components and supplied photographs. What the course does ask is that you can read a brief and make a decision, because that is the part software cannot do for you.
Does the course cover user research and usability testing?
In outline, honestly rather than fully. You work from a supplied brief rather than running your own research, and the testing on day two is a structured walkthrough with one classmate using a script we provide, not a formal usability study. That is enough to show you how differently someone else reads your screens. Full research methods, interviewing and recruitment are a separate subject and are not covered here.
What happens if I miss a day?
The recording of every session is available to you for twelve months, so you can catch up on the material you missed, and the project pack means you can rebuild the missed exercise from the same files the class used. If you would rather sit the day again live, every live booking includes one free repeat of the same class, with the terms and booking window shown on the booking page for each date.
Do you issue a certificate?
Yes. You receive a MyLearnPlus certificate of completion recording the course title, the hours and the date. It is a record of training. There is no Adobe or industry certification for Figma, and we do not claim to award one. What tends to matter more in an interview is the prototype you leave with, which is why the class is built around producing one.
Can my employer be invoiced?
Yes. We invoice organisations against a purchase order, in LKR for Sri Lankan companies and in USD internationally. Send the billing details and the names of the people attending and we will hold the seats while the invoice is processed. Groups of five or more are usually better served by a private class on the same syllabus, run against your own product and brand instead of the clinic project.

ආරම්භක දින 2ක්

Web Design with WordPress

Two days building a real five-page WordPress site: block themes, global styles, templates, a working contact form, SEO basics, backups and a launch checklist.

මධ්‍යම දින 2ක්

Generative AI for Designers

Two days on generative image tools for working designers: art direction through prompts, repair and finishing, brand consistency, licensing and provenance.

ආරම්භක දින 2ක්

Illustrator Level 1

A two-day introduction to Adobe Illustrator: draw with the Pen tool, build a logo and an icon set, and export artwork a printer will accept.

කණ්ඩායමකට මෙය අවශ්‍යද?

ඔබේ දිනවල, ඔබේ කාර්යාලයේ හෝ ඔන්ලයින්ව, ඔබේ කණ්ඩායම සැබවින්ම කරන වැඩට ගළපා අපි මෙම පාඨමාලාව පෞද්ගලිකව පවත්වන්නෙමු. ඔබට අවශ්‍ය දේ අපට කියන්න, අපි මිල ගණනක් එවන්නෙමු.

මිල ගණනක් ලබා ගන්න