Design
UI/UX Design with Figma
Screens, components, and a simple user flow designed in Figma.
UI/UX Design with Figma connects a person’s task to the screens that support it. You will sketch a flow, build frames in Figma, and reuse components so the interface stays consistent. The lectures are for beginners who want a portfolio piece that is more than a single pretty screen.
Course syllabus
01. The task
- From a user goal to a flow
The steps a person takes, and the screens those steps need.
- Write the goal in one sentence
Who is trying to do what, and how they know they finished.
- List the steps, not the screens
A step can be a thought. A screen comes after the step is clear.
- Where people get stuck
The moment they hesitate, and the question they are asking then.
- One path you will design
The main way through. Side paths can wait.
- What this course will not decorate
Colour and type come after the path is honest.
- A flow you can tell out loud
Start, middle, and the screen where the task is done.
- Name the person
A short description of who this is for, so later choices have a reason.
02. Wireframes
- Wireframes before colour
Structure first, so decoration does not hide a missing step.
- Boxes for the real content
A headline, a field, and a button, in the order of the task.
- One screen, one job
If the screen is doing two jobs, split it or cut one.
- The empty state
What the screen says before there is anything to show.
- The error on the same screen
Where a mistake appears, next to the thing that caused it.
- A paper sketch is enough
Grey boxes. The point is the order, not the finish.
- Check the sketch against the steps
Every step has a place. Every box has a step.
- Cut a box that does not help
If you cannot say why it is there, take it out.
03. Frames and type
- A frame at phone size
Start with the width people will actually use.
- Frames, type, and layout
Auto layout can wait one lecture. First, put the content in.
- A type scale of three sizes
Title, body, and a small label. More sizes make the screen noisy.
- Line length you can read
A paragraph that does not run edge to edge.
- Labels that say the action
A button named for the verb, not for 'submit'.
- Contrast you can check
Text that stays readable on the background you chose.
- Align to a simple column
Left edges that match, so the eye can travel down.
- A screen that matches the wireframe
The same order, now with real words.
04. Layout
- Spacing as a system
A small set of gaps you reuse, instead of nudging by eye.
- Auto layout for a stack
A column that stays even when the text gets longer.
- Padding inside a card
The content should not touch the edge of the box.
- A row that wraps on a phone
Two items side by side only when the width allows it.
- Resize the text and watch the frame
The layout should hold when a label grows.
- Group what belongs together
The field and its error sit closer than the next section.
- A second screen with the same spacing
The system only counts if the next screen uses it.
05. Components
- Components and variants
A button used twice should be the same button.
- A button with default and disabled
Two states, named, so you do not redraw them.
- A text field
Label, input, and the hint under it, as one component.
- Swap the text, keep the component
The words change. The padding does not.
- A card you can repeat
Image, title, and one line, built once.
- When not to make a component
A shape that appears once does not need a system yet.
- Name the layers
A name another person can scan, not 'Frame 48'.
- Replace a copied button with the real one
Find the places you duplicated and point them at the component.
06. Prototype
- A clickable prototype
Link the screens and walk through the flow once.
- The first tap
Where the flow starts, and what that control is called.
- Back is a real link
The person can return without you resetting the file.
- Show the error path once
A wrong entry goes to the message, then back to the field.
- A flow that ends
The last screen says the task is done.
- Present without explaining every pixel
Click through as the person would, then stop talking.
- Note one broken step
Write it down. Do not hide it with a nicer colour.
- A file someone else can open
Pages named, and the prototype starting on the first screen.
07. Review
- Walk the goal again
Does the prototype still do the sentence you wrote at the start?
- Read only the words
Cover the colour. Do the labels still make sense?
- A fix you will actually make
One change to the flow, then update the frames.
- What you would test with a person
One task you would ask them to try.
- How to talk about this piece
Goal, flow, and the one decision you are proud of.
- Export a still of the main screen
A picture for a portfolio page, with the sentence beside it.
- Leave the file tidy
Unused frames off the main page, names you would not be shy about.
Lecture videos stay with the course. Playback for enrolled students will open once payments are available. Video links are not published on this page.