UI and Web Design with Figma | Free Graphic Design Course: From Beginner to Advanced

What you'll learn

Understand the difference between UX and UI, and the process for designing a screen.
Use Figma: frames, components, variants, auto layout and prototypes.
Design clear interfaces: states, touch targets, forms and responsive layouts.
Prepare your design so a developer can build it.
Improve a real checkout form with a five-person usability test.

Apps and websites are among the most in-demand areas for designers today. Interface design uses everything you've learned (hierarchy, color, typography, grids) but adds something new: people don't just look, they interact. A button has to look tappable, a form has to be easy to finish without errors, and everything has to work on a phone and on a big monitor.

44–48points or dp: the minimum touch target Apple and Google recommend

4–5people per round of testing are enough to uncover the main problems

2 layoutsat minimum, mobile and desktop, with the same hierarchy

UX and UI

UXUser experience

Question: What does the person need, and what's the simplest path to get it?
Deliverables: Research, user flows, information architecture, wireframes, testing.
Analogy: The floor plan of a house.

The path

UIUser interface

Question: How does each screen and element look and feel?
Deliverables: High-fidelity screens, components, a design system.
Analogy: The materials, colors and finishes.

The form

On small teams, the same person usually does both. And because interface design is judged by results (sign-ups, purchases, completed forms), it pairs naturally with conversion work; our digital marketing course covers that side in its lesson on landing pages and conversion rate optimization.

The process for designing a screen

Goal and user: who uses this screen and what do they need to accomplish? ("Order a bag of coffee from a phone in under a minute.")
Flow: the steps and screens: catalog → product → cart → shipping details → payment → confirmation.
Wireframes: low-fidelity sketches (grays, boxes, no color) to decide structure and content.
Visual design: apply the identity, typography, color and components.
Prototype: connect the screens to simulate real use.
Usability testing: ask 4 or 5 people to complete the task while thinking out loud. Even a handful of tests surfaces most of the important problems.
Iterate and hand off to development.

Figma in 10 concepts

Concept	What it is
Frame	A container; screens are frames sized to a device
Layers and groups	Your elements and how they're organized (name them well)
Layout grid	The frame's columns and margins (lesson 5)
Styles and variables	Colors, text styles and values saved with names so you can reuse them across the file
Components	Reusable elements (button, input, card). Edit the main component and every copy (instance) updates
Variants	Grouped versions of a component: primary/secondary button, default/disabled
Auto layout	Makes a frame adapt to its content with fixed spacing, like on the web: the button grows when its label gets longer
Constraints	How an element behaves when the frame is resized
Prototype	Connections between screens with interactions (click, drag) and animations
Libraries	Components and styles shared across files and team members

1. The same button appears on 30 screens and the client wants a new color and corner radius. What saves you the work in Figma?

Making the button a component: change the main component and every instance updates.
Copying and pasting the new button onto each screen.
Exporting the screens as images.

Components are the foundation of scalable interface design.

Interface principles

Make it look like what it is

A button should look tappable (shape, color, an action label); a link should stand out from regular text; an input field should invite typing. If people hesitate over whether something can be tapped, the design is failing.

States

Every interactive element needs several states, and you have to design all of them:

State	When
Default	At rest
Hover	On a computer, when the cursor is over it
Pressed	At the moment of the click or tap
Focus	When reached with the keyboard (essential for accessibility)
Disabled	When it can't be used yet
Loading, success, error	The system's response to the action

Design every state as a variant of the same component. The focus ring isn't decoration: it's what makes the interface usable with a keyboard.

Touch targets

Fingers aren't cursors. Platform guidelines recommend minimum touch targets of about 44 × 44 points (Apple) or 48 × 48 dp (Google's Material Design), with space between elements so people don't tap the wrong one.

Forms

Visible labels above each field (placeholder text inside the field disappears as you type and is no substitute for a label).
Ask only for the information you actually need.
Trigger the right keyboard on phones (numeric for phone numbers and ZIP codes, email keyboard for email).
Clear error messages next to the field that explain how to fix the problem: "Phone number must be 10 digits," not "Error."

2. Which error message is best on a form?

"Error 422."
"Invalid input."
"Email must include @ (for example, maya@example.com)," shown next to the field.

A good message says what happened, where, and how to fix it.

Responsive design

The same website will be viewed on screens from 360 px to well over 1,920 px wide. Design at least two layouts: mobile (for example, 390 px wide with a 4-column grid) and desktop (for example, 1,440 px with a 1,200 px container and 12 columns, lesson 5). Many teams design mobile first: it forces you to prioritize what matters. On mobile, columns stack, menus collapse and text adapts, but the hierarchy and order of the content should stay the same.

Design systems

As a product grows, teams build a design system: a collection of tokens (colors, type, spacing, radii, shadows), components with their variants and usage rules, shared by design and development. It's the digital, living version of brand guidelines (lesson 9). To get started, don't reinvent the wheel: study public systems like Google's Material Design or Apple's Human Interface Guidelines, and community UI kits in Figma.

Handing off to development

Name layers, components and screens clearly.
Use styles and variables for every color, text style and spacing value (no one-off values).
Include every state, both mobile and desktop layouts, and edge cases: long text, empty lists, errors.
Export icons as SVG and mark which elements are exportable.
Review with the developer before you wrap up: what's easy or hard to build can change decisions.

Figma offers a developer mode that shows measurements, styles and reference code (availability depends on the plan).

Which Figma plan do you need?

For learning and building a portfolio, Figma's free plan is enough: frames, components, variants, auto layout and prototyping all work on it, with some limits. Paid plans mostly add features for teams and developer collaboration, such as Dev Mode. If you prefer an open-source alternative, Penpot is free and works with very similar concepts. Check the current terms on each tool's website: they change often.

3. As a starting point, how many people do you need for a usability test that reveals the main problems in a flow?

At least 500.
About 4 or 5 per round, repeating the test after each fix.
None: the client's opinion is enough.

A few qualitative tests uncover most serious problems; several small rounds beat one big one.

Case study: a coffee roaster's checkout form

Online coffee shop (illustrative case)Seattle, Washington · most orders placed from phones

The store got plenty of visits, but few orders were completed. The designer ran a test with 5 people: he asked them to buy a bag of coffee on their phones while thinking out loud. Only 2 managed it without help. The same problems kept coming up: 11 fields (including "date of birth"), placeholder labels that vanished while typing, a letter keyboard for the phone field and a general red error banner at the top of the page that nobody noticed. He redesigned the form with 6 fields, visible labels, a numeric keypad for phone and ZIP code and errors next to each field, then tested again with 5 new people:

Before

Bought without help2 of 5

After

Bought without help5 of 5

From 40% to 100% in testing, with the same products and prices: only the interface changed.

Five people can't give you statistically precise percentages, but that's not what this kind of test is for: it's for finding problems. When four out of five people get stuck on the same field, you don't need a survey of a thousand people to know it has to change.

4. In a 1,200 px container with 12 columns of 78 px and 24 px gutters, how wide is a card that spans 3 columns?

234 px
282 px
300 px

3 columns plus the 2 gutters between them: 3 × 78 + 2 × 24 = 234 + 48 = 282 px. Four such cards, with the 3 gutters between them, take up 4 × 282 + 3 × 24 = 1,200 px.

Common interface mistakes

Designing only the default state of buttons and fields.

Design every state as a variant of the component.

Using placeholder text inside the field as the label.

A visible label above the field.

24 px tap icons crammed together.

44–48 px touch targets with space between them.

Colors and spacing typed by hand on every screen.

Named styles and variables for everything.

Designing only for desktop and "adapting" at the end.

Start with mobile and prioritize what matters.

Practice exercise: ordering coffee on a phone

Sketch the ordering flow in 5 screens.
Build grayscale wireframes in Figma.
Create the components: button (primary, secondary; default, pressed, disabled), product card, form field (default, focus, error) and navigation bar.
Design the high-fidelity screens with auto layout and the coffee shop's identity.
Connect a prototype and test it with 3 people: can they finish the order without help?

See solution: the flow and what to watch for

1. Catalog: filters by brew method (chips), cards with photo, name,
   tasting notes and price; "Add" button.
2. Product: grind selector (variants), quantity, sticky button at the
   bottom: "Add to cart · $18".
3. Cart: editable list, calculated shipping and sales tax, visible
   total, "Continue" button.
4. Shipping and payment: few fields, numeric keypad for phone and ZIP,
   popular payment methods, errors next to each field.
5. Confirmation: order number, estimated delivery date and a
   "Keep shopping" button.

Watch for: touch targets of at least 44 px, the main button within
thumb reach, sufficient contrast and a loading state on "Pay".

Summary

UX defines the path; UI defines how each screen looks and feels.
Process: goal, flow, wireframes, visual design, prototype, usability testing.
In Figma, components, variants, styles and auto layout let you design scalable systems.
Design every state, generous touch targets, clear forms, and both mobile and desktop layouts.
A design system and a clean handoff make working with developers much smoother.

Next lesson: Design Portfolio, Pricing and Freelancing for Graphic Designers. You'll turn what you've learned into a professional practice: a portfolio, rates, client agreements and the role of AI.