Every app and website you use was designed by someone. UI/UX designers decide how screens look and how easy they are to use. Companies, startups and small businesses hire freelancers for this work all over the world.
UI and UX: what is the difference?
| UX (user experience) | UI (user interface) | |
|---|---|---|
| Question | Is it easy and useful? | Does it look clear and attractive? |
| Work | Research, user flows, structure, wireframes, testing | Colours, type, icons, buttons, layouts, visual polish |
| Result | Users reach their goal without confusion | Screens look professional and consistent |
The two always work together. A beautiful app that confuses users fails; a useful app that looks careless loses trust. Most freelance jobs ask for both, often called UI/UX or product design.
What Figma is
Figma is a design tool that runs in the browser and as a desktop app. Designers use it to create screens for apps and websites, build reusable components, make clickable prototypes and share work with clients and developers. Several people can work in the same file at once, and clients can comment directly on the design.
The free plan is enough to learn
Figma has a free plan and paid plans. The free plan has limits (for example, on the number of team projects and some advanced features), but it is enough for this whole course and for your first portfolio projects. Students and teachers can apply for Figma's free education plan. Check the current pricing page before paying for anything.
The main parts of a Figma file
- Files and pages: a file holds a project; pages organise it (for example "Wireframes", "Final screens", "Components").
- Frames: the screens or artboards you design on, such as a phone screen or a desktop page.
- Layers panel (left): every element in order. Good layer names keep files tidy.
- Properties panel (right): size, position, colour, text and effects of the selected element.
- Toolbar: frame, shape, pen, text and comment tools.
What clients hire UI/UX designers for
- Designing a new mobile app or website from scratch.
- Redesigning an outdated app or site.
- Landing pages for products and campaigns.
- Dashboards and admin panels for software.
- Design systems and component libraries.
- Clickable prototypes to test an idea or show investors.
In this course you will learn the thinking behind good product design and the Figma skills to deliver it.
Practice task (15 min)
- Create a free Figma account and a new design file.
- Add three pages: "Wireframes", "Final screens" and "Components".
- Open two apps on your phone and write one UX problem and one UI problem you notice in each.
Sign in or create a free account to save your progress and take the tests. Sign in