Free Design learning guide
Learn UI/UX Design with Figma: From Basics to Pro Projects
Learn UI/UX Design with Figma: From Basics to Pro Projects — a free intermediate-level guide covering learn ui/ux design from scratch with figma. Learn...
What you will learn
1. Foundations of UI/UX Design
UI vs UX: Distinguishing the Disciplines Imagine you open a sleek‑looking mobile banking app. The colors are on‑brand, the typography feels modern, and the animation when you tap a button is buttery smooth. Yet, after a few minutes you’re stuck in a loop trying to locate the “Transfer Funds” feature, the error messages are vague, and the app crashes when you attempt a large transaction. What just happened? The User Interface (UI) succeeded in making the product look attractive and pleasant to interact with, but the User Experience (UX) failed to guide you efficiently toward your goal. | Aspect | UI (User Interface) | UX (User Experience) | |--------|--------------------|----------------------| | Focus | Visual layout, typography, color, spacing, interactive elements | Overall journey, usability, accessibility, satisfaction | | Questions | How does it look? Is the button size appropriate? | What does the user need? How easy is it to accomplish the task? | | Deliverables | High‑fidelity mockups, style guides, component libraries | User flows, journey maps, information architecture, research reports | | Typical Metrics | Aesthetic appeal, brand consistency, visual hierarchy | Task success rate, time on task, error frequency, Net Promoter Score | Both UI and UX are interdependent. A beautiful UI can’t compensate for a broken UX, and a flawless UX can feel unpolished without thoughtful UI. In practice, designers often wear both hats, iterating visual details while constantly checking whether the underlying experience still meets user needs. Pro tip: When evaluating a design, ask yourself two questions in sequence – “Does it look right?” followed by “Does it feel right for the user?” --- Design Thinking: The Five Stages Design thinking is a human‑centered problem‑solving framework that aligns perfectly with UI/UX work. The five stages are not strictly linear; you’ll loop back as insights surface. 1. Empathize – Gather deep insights about users. - Conduct interviews, observe real‑world usage, collect pain points. - Capture emotions, motivations, and contextual constraints. 2. Define – Synthesize research into a clear problem statement. - Create point‑of‑view (POV) statements: “[User] needs a way to [action] because [insight].” - Prioritize constraints (business goals, technical limits). 3. Ideate – Generate a breadth of solutions without judgment. - Use sketching, Crazy‑8s, or mind‑maps to explore alternatives. - Encourage divergent thinking before converging on the most viable concepts. 4. Prototype – Build low‑ or high‑fidelity representations to test ideas quickly. - Start with paper sketches or wireframes; move to interactive mockups in Figma when concepts stabilize. - Keep prototypes just realistic enough to elicit meaningful feedback. 5. Test – Validate assumptions with real users. - Observe users interacting with the prototype, note where they stumble. - Capture quantitative data (task success, time) and qualitative feedback …
2. Getting Started with Figma Interface
A Real‑World Prompt: Designing a Mobile Banking Login Imagine you’ve just been hired to design the login experience for a new mobile‑first banking app. The product manager hands you a brief: “Create a clean, trustworthy screen that works on iOS and Android. We’ll need the logo, input fields, a primary CTA button, and a “Forgot password?” link. Deliver the design in Figma so the dev team can pull assets directly.” Your task is to jump from a blank Figma file to a fully organized, component‑driven screen ready for hand‑off—all in under an hour. The steps you’ll take—setting up the file, navigating the interface, wielding basic shape and text tools, and building reusable components—are exactly what this chapter covers. By the end, you’ll have a repeatable workflow you can apply to any UI project. --- The Figma Workspace at a Glance Figma’s UI is deliberately minimal, yet packed with panels that become your design cockpit once you know where to look. | Area | What It Holds | Quick‑Access Tips | |------|---------------|-------------------| | Canvas | The infinite drawing surface where frames, shapes, and components live. | Space to pan, Mouse wheel to zoom, Shift + Space for hand‑tool. | | Layers Panel (Left) | Hierarchical view of all objects on the current page. | Alt/Option + Click a layer to isolate it. | | Toolbar (Top) | Core tools: Move, Frame, Shape, Pen, Text, Slice, Comment, and more. | V (Move), F (Frame), R (Rectangle), T (Text). | | Properties Panel (Right) | Context‑sensitive controls for the selected object—size, fills, effects, constraints. | Ctrl/Cmd + Shift + R to reset properties. | | Bottom Bar | Page navigation, zoom level, and quick actions (e.g., / for command palette). | / opens the command palette anywhere on the canvas. | Pro tip: Keep the toolbar visible but collapse the Layers panel when you’re deep‑diving into a single component. You can always reopen it with Alt + 1. Navigating the Canvas Efficiently 1. Zoom & Pan – Scroll to zoom; hold Space + drag to pan. 2. Fit to Screen – Press Shift + 1 to fit the entire canvas in view. 3. Outline View – Toggle with Ctrl/Cmd + Y to see a wireframe preview, handy for checking layout without visual noise. Mastering these shortcuts reduces friction and lets you keep your focus on design decisions rather than UI gymnastics. --- Creating, Organizing, and Managing Files & Pages 1. Starting a New File - Click New File from the Figma dashboard or use Ctrl/Cmd + N. - Immediately rename the file (double‑click the title at the top) to something descriptive, e.g., Mobile‑Bank‑Login – v01. Good naming saves hours when you have dozens …
3. User Research & Personas in Practice
A Real‑World Sprint: From a Coffee‑Shop Idea to a Persona‑Driven Design Imagine you’ve just overheard a group of students in a campus coffee shop complaining about how hard it is to keep track of their weekly expenses. One of them pulls out a phone, scrolls through a generic budgeting app, and sighs, “I wish there was something that actually understood my life.” You sketch a quick idea for a mobile budgeting app that syncs with student bank accounts, shows weekly spend limits, and nudges users with friendly reminders. You have a concept, a problem statement, and a tight deadline—the next two weeks before the university’s hackathon. The question now is: Who exactly are you designing for, and what do they truly need? The answer lies in rapid user research and the creation of focused personas that will steer every design decision you make in Figma. Below is a step‑by‑step playbook that shows how to move from that initial spark to a set of actionable personas you can plug straight into your Figma workflow. The methods are lean enough for a two‑week sprint yet robust enough to produce insights that won’t evaporate after the first prototype. --- 1. Define Research Goals and Scope Before you schedule interviews or launch a survey, clarify what you need to learn. This keeps the effort focused and prevents “analysis paralysis.” | Typical Research Goal | When It’s Useful | |-----------------------|------------------| | Validate the problem statement | Early in the project, before any design work | | Discover hidden user motivations | When the problem feels obvious but solutions feel stuck | | Identify high‑priority features | Prior to building a feature backlog | | Understand context of use | When planning interactions and flows | Action: Write a one‑sentence goal for the budgeting app scenario. Goal: “Understand how college students currently track weekly expenses, what pain points they encounter, and what triggers would motivate them to adopt a new budgeting tool.” Scope tip: Limit your scope to one user segment (e.g., undergrad students living on campus) and one primary task (tracking weekly spend). This prevents the research from ballooning into a full‑scale market study. --- 2. Pinpoint Your Target Audience Even within a seemingly homogeneous group like “college students,” there are distinct sub‑groups that behave differently. Use a quick segmentation matrix to narrow down the audience you’ll actually interview. | Dimension | Example Values | |-----------|----------------| | Academic level | Freshman, Sophomore, Junior, Senior | | Living situation | Dorm, Off‑campus apartment, With parents | | Financial habits | Cash‑only, Debit‑centric, Credit‑savvy | | Tech comfort | Low (rarely use apps), Medium, High (early adopters) | Scenario Application: For the budgeting app, you decide to …
4. Wireframing Fundamentals
Low‑Fidelity Wireframes: The Fast‑Track Blueprint Imagine you’re in a two‑week sprint. The product owner just delivered a new set of personas (see User Research & Personas in Practice) and the team needs a concrete visual reference by tomorrow to keep the conversation moving. Sketching on napkins works, but the developers ask, “How wide is that sidebar? What spacing does the button use?” A low‑fidelity wireframe in Figma gives everyone a shared, editable canvas that is just realistic enough to fuel discussion without getting lost in pixel‑perfect details. --- Sketch Layout Grids and Structure A solid grid is the invisible skeleton that keeps your wireframes tidy and scalable. 1. Add a Frame as Your Canvas 1. Press F or click the Frame tool. 2. Choose a preset device (e.g., Desktop – 1440 × 1024) or define a custom size that matches the primary user flow. Pro tip: Naming the frame after the screen (e.g., Dashboard – Desktop) helps keep the file searchable, a habit you cultivated in Getting Started with Figma Interface. 2. Apply a Layout Grid 1. With the frame selected, go to the right‑hand Layout grid panel. 2. Click + → Columns. 3. Set Count (e.g., 12), Gutter (24 px), and Margin (96 px) based on your design system’s spacing scale. 3. Use the Grid as a Guideline - Columns → Place primary navigation, content areas, and sidebars. - Rows (optional) → Align vertical rhythm for headings, cards, and footers. Scenario: Redesigning an Analytics Dashboard | Element | Grid Placement | Reason | |--------|----------------|--------| | Sidebar | Columns 1‑3 | Keeps navigation narrow and consistent. | | Main Chart | Columns 4‑12 | Utilizes the remaining width for data visualisation. | | Header | Row 1 (full‑width) | Guarantees a stable top‑of‑screen bar. | By anchoring each region to the grid, you create a scalable skeleton that can be resized later without breaking the layout. --- Build Reusable Wireframe Components Component‑based design accelerates iteration and ensures consistency across screens. 1. Identify Repeating Patterns Typical low‑fidelity UI blocks include: - Header (logo, primary nav, user avatar) - Card (image placeholder, title, description) - Button (primary, secondary) - Form field (label, input box, error placeholder) 2. Create a Component 1. Draw the shapes (rectangles, lines, placeholder text). 2. Select them → Ctrl+Alt+K (or right‑click → Create component). 3. Leverage Variants for States - Button → Variant for default, hover, disabled (even if just a line‑weight change). - Form field → Variant for error (red outline) and success (green outline). 4. Populate a Wireframe Library - Store components in a dedicated Wireframe Kit page. - Use Team library settings so any collaborator can drag instances into their frames. Component Best Practices - …
5. Visual Design Basics & Design Systems
A Real‑World Prompt: Redesigning the “Pulse” Dashboard Imagine you’ve been hired to refresh the visual language of Pulse, a SaaS product that tracks real‑time metrics for small businesses. The product team has already defined the user flows (see Wireframing Fundamentals) and gathered personas (refer to User Research & Personas in Practice). Their biggest request? A fresh look that meets WCAG AA contrast standards, feels cohesive across the app, and can be handed off to developers without re‑creating styles every time a new button or card appears. Your task is to turn that brief into a living design system inside Figma—one that contains an accessible color palette, a clear typographic hierarchy, and reusable components with variants. The steps you’ll follow in the sections below will answer exactly that. --- Color Foundations for UI 1. Start with Accessibility, Not Aesthetics A beautiful palette loses its purpose if users can’t read the text. The Visibility of System Status heuristic reminds us that contrast is a form of visual feedback. Begin by selecting a base hue that reflects the brand’s personality, then generate accessible tints and shades. Quick contrast check 1. Choose a primary hue (e.g., a mid‑blue 0066FF). 2. Create 5–7 tonal variations (lighter → darker). 3. Use Figma’s built‑in Contrast Checker (right‑click → Inspect → Contrast). 4. Verify that every text‑on‑background pair meets WCAG AA (≥ 4.5:1 for normal text, ≥ 3:1 for large text). If a pair fails, adjust the hue, saturation, or lightness until it passes—don’t settle for “close enough.” 2. Building a Palette in Figma 1. Create a new page called Color System. 2. Add a frame named Palette. Inside, draw a row of rectangles (one per tone). 3. Apply fills using the colors you generated. 4. Label each swatch with a clear token, e.g., --color-primary-500. Pro tip: Prefix tokens with their purpose (--color-bg-, --color-text-) to avoid confusion later when the system grows. 3. Organizing Semantic Colors | Token | Usage | Example | |-------|-------|---------| | --color-primary-500 | Main brand actions (buttons, links) | 0066FF | | --color-primary-700 | Hover/active states | 0052CC | | --color-bg-100 | Page background | F9FAFB | | --color-text-900 | Primary text | 212529 | | --color-success-500 | Success messages | 28A745 | | --color-error-500 | Error alerts | DC3545 | Having a semantic layer (purpose‑based names) decouples the visual identity from the raw hex values, making future brand updates painless. 4. Contrast‑Driven Color Pairing When you need a secondary accent (e.g., for highlights), test it against the most common backgrounds (--color-bg-100 and --color-bg-200). The Contrast Checker can be run in batch by selecting multiple layers and checking the contrast panel. --- Typography: Scale & Hierarchy 1. Choose Type Families That Complement the Brand …
6. Prototyping Interactions & Animations
A Real‑World Prompt: Turning a Static Checkout Page into a Live Experience Imagine you’ve just finished the visual design of an e‑commerce checkout flow in Figma. The screens look polished, the design system is applied, and the copy follows the voice you defined in the User Research & Personas chapter. Yet when you hand the file to developers, they ask, “How does the ‘Apply Coupon’ button behave? Does the ‘Next’ button animate to the confirmation screen?” The missing piece is an interactive prototype that shows, not tells, how users move through the flow, where feedback appears, and how subtle animations guide attention. In this chapter you’ll learn to build that prototype—linking screens, adding hover, click, and drag interactions, leveraging Smart Animate for fluid transitions, testing on both desktop and mobile, and sharing the result for stakeholder review. --- 1. Mapping the Navigation Flow Before you start adding interactions, sketch a quick flow diagram (you can use Figma’s built‑in FigJam or a simple frame with arrows). This step mirrors the Ideate → Prototype transition discussed earlier and ensures you respect User Control & Freedom by defining clear entry and exit points. 1. Identify key states – e.g., Cart → Shipping → Payment → Confirmation. 2. Pinpoint decision nodes – “Apply Coupon?”, “Edit Address?”, “Choose Payment Method”. 3. Mark optional paths – such as “Guest Checkout” versus “Sign‑in”. Create a dedicated Flow page in your file and label each frame. This visual map will become the backbone for linking screens later. --- 2. Linking Screens: The Core of Navigation 2.1 Adding Simple Click Links 1. Select the component that should trigger navigation (button, tab, list item). 2. Switch to the Prototype tab in the right panel. 3. Drag the blue node to the destination frame. 4. In the interaction dialog, set: - Trigger: On Click - Action: Navigate To - Destination: [Target Frame] - Animation: Instant (or choose a transition—see Section 3). Repeat for every navigation point. Use the Pro tip: “Name your frames logically (e.g., Shipping‑Step1) to keep links tidy,” a habit introduced in the Getting Started with Figma Interface chapter. 2.2 Managing Back Navigation For back buttons, link to the previous frame. If you anticipate multiple entry points (e.g., a user could reach the payment screen from either “Saved Card” or “Add New Card”), use Conditional Navigation: - Add a Prototype Interaction with Trigger: On Click → Action: Navigate To → Destination: [Target] → Preserve Scroll Position (if relevant). This keeps the prototype realistic enough to match real‑world expectations. 2.3 Using Overlays for Modals When a user taps “Apply Coupon,” you likely want a modal overlay rather than a full‑screen navigation. 1. Create the modal as a separate frame. 2. …
7. Usability Testing & Iteration
1. Planning the Remote Test 1.1 What you’re trying to prove Before you click “Share” on a prototype, write a single sentence that captures the test’s purpose. “Validate that first‑time users can complete the onboarding flow in under two minutes without confusion.” Link this purpose back to the success metrics introduced in the Foundations chapter (task completion rate, time‑on‑task, error frequency). Having a concise goal keeps the scenarios focused and makes post‑test analysis faster. 1.2 Crafting realistic scenarios & tasks | Step | Action | |------|--------| | 1. Identify the core user journey | Pull the most critical flow from your wireframes (e.g., “Create a new budget” from Chapter 4). | | 2. Write a scenario | Phrase it as a story: “You’ve just downloaded the BudgetBuddy app and want to set up your first monthly budget.” | | 3. Derive tasks | Break the scenario into 3‑5 concrete actions: <br1. Open the app and tap Get Started.<br2. Choose a budgeting template.<br3. Enter your income and expenses.<br4. Save the budget and view the summary. | | 4. Add success criteria | For each task, note what counts as “success” (e.g., “Budget saved without error messages.”) and what counts as a “pain point” (e.g., “User hesitates 5 s on the template picker.”) | Pro tip: Keep the number of tasks per participant to no more than five. Overloading users dilutes the quality of feedback and inflates the time‑on‑task metric. 1.3 Recruiting the right participants - Leverage your persona library (Chapter 3) to match test participants with the primary persona(s). - Screening questionnaire (3–5 questions) should confirm: <br• Familiarity with budgeting apps <br• Device type (mobile vs. desktop) <br• Availability for a 30‑minute session. If you lack a participant pool, consider free channels: university UX labs, LinkedIn groups, or a small incentive (e‑gift card) to attract a diverse sample. --- 2. Setting Up the Figma Prototype for Remote Testing 2.1 Preparing the prototype 1. Create a dedicated “Test” page in your Figma file. 2. Duplicate the final flow from the “Design” page so you can iterate without overwriting the master version. 3. Turn off UI chrome (Prototype Settings Hide UI) to mimic a real app environment. 4. Enable commenting (Share Allow comments). This activates the built‑in feedback channel that most remote participants will use. 2.2 Using Figma’s built‑in recording & comment tools - Live comment thread: Participants can drop a sticky‑style comment directly on the screen element they are discussing. - Screen recording (Figma Mirror + Loom): Ask participants to start a Loom recording before they begin the test. The video is automatically saved to a shared folder, and the Loom link can be pasted into the Figma comment thread for quick …
8. Responsive & Adaptive Design
A Real‑World Prompt Imagine you’ve been hired to redesign the homepage of Pulse, a news platform that must look flawless on a commuter’s phone, a tablet in a coffee shop, and a large desktop monitor in a newsroom. The client insists on a single Figma file that powers every device, yet each screen size demands a distinct layout, navigation pattern, and image resolution. How do you keep the design consistent, maintainable, and truly responsive without duplicating work for every breakpoint? The answer lies in mastering layout grids, constraints, Auto Layout, and adaptive components—the core tools that let Figma behave like a responsive front‑end framework while you stay inside the design environment. This chapter walks you through configuring grids for mobile, tablet, and desktop, wiring up responsive behavior, building adaptive components, testing in real time, and finally exporting assets that are perfectly sized for each breakpoint. --- Understanding Breakpoints and the Need for Responsiveness When you studied Foundations of UI/UX Design, you learned that users interact with products across a spectrum of devices. In practice, those devices translate into breakpoints: specific viewport widths where the layout should shift to accommodate the available space. - Mobile – typically up to ~ 480 px (portrait) - Tablet – roughly ~ 768 px (portrait) to ~ 1024 px (landscape) - Desktop – 1280 px and above A responsive design doesn’t merely shrink a desktop layout; it re‑thinks the information hierarchy for each context. Figma gives you a visual playground to prototype those shifts before any code is written, keeping the look and feel consistent with the design system you built in Visual Design Basics & Design Systems. --- Setting Up Layout Grids for Multiple Devices Defining Breakpoints Before you drop any frames onto the canvas, decide the exact pixel widths you’ll support. A common approach is to align breakpoints with popular device dimensions: | Device | Width (px) | Typical Use | |--------|------------|--------------| | Mobile (iPhone 13) | 390 | | Tablet (iPad) | 768 | | Desktop (MacBook Pro 16”) | 1440 | Feel free to add custom breakpoints for niche devices, but keep the number manageable—each extra breakpoint adds maintenance overhead. Configuring Grids in Figma 1. Create a Frame for each breakpoint (⇧ A → Frame). Name them Mobile, Tablet, Desktop. 2. With a frame selected, open the Layout grid panel (right sidebar). 3. Click the plus (+) icon and set the grid type to Columns. 4. Enter the column count, gutter, and margin values that match your design system: Mobile – 4 columns, 16 px gutter, 24 px margins Tablet – 8 columns, 24 px gutter, 32 px margins Desktop – 12 columns, 32 px gutter, 48 px margins 5. Duplicate …
9. Final Capstone Project
From Idea to Portfolio‑Ready Case Study: A Step‑by‑Step Walkthrough Imagine you’ve just joined a small tech startup, BiteBuddy, that wants to revamp its mobile ordering experience. The founder tells you, “We need a design that drives repeat orders and reduces checkout abandonment—but we have no design assets, no research, and a tight deadline.” In the next few weeks you’ll turn that vague request into a polished UI/UX case study you can showcase to future employers. The process you’ll follow mirrors the full design pipeline covered in the previous eight chapters—only now you’ll apply every tool, method, and mindset in one integrated workflow. Below is a practical, repeatable framework you can use for any capstone project. Treat it as a checklist and a narrative guide; adapt the details to fit the problem you choose. --- 1. Nail the Problem Statement & Success Metrics A crisp problem statement keeps the team focused and gives stakeholders something concrete to rally around. 1. Gather Context – Pull together any existing data (analytics, support tickets, stakeholder interviews). 2. Identify the Core Pain – Ask “What is the most critical barrier to the user’s goal?” 3. Write the Statement – Use the “[User] needs to [Goal] because [Pain]” template. Example: “Busy urban commuters need to place a food order in under 60 seconds because they often abandon the checkout when it feels too slow.” Defining Success Metrics Metrics should be SMART (Specific, Measurable, Attainable, Relevant, Time‑bound) and tied directly to the problem statement. | Metric | Why It Matters | Target (example) | |--------|----------------|------------------| | Conversion Rate (order‑to‑checkout) | Directly reflects checkout friction | ↑ 12 % within 30 days | | Time‑to‑Complete (order flow) | Measures efficiency of the UI | ≤ 45 seconds on average | | Net Promoter Score (NPS) | Captures overall satisfaction | ≥ 45 after launch | | Task Success Rate (usability test) | Validates design usability | ≥ 90 % on high‑fidelity prototype | Pro tip: Align each metric with a specific design decision (e.g., “Time‑to‑Complete” will drive the low‑fi wireframe layout). --- 2. Produce Research Artifacts & Personas 2.1. Rapid Research Sprint Leverage the methods from User Research & Personas in Practice: | Activity | Goal | Quick‑turn Deliverable | |----------|------|------------------------| | Stakeholder Interviews (30 min each) | Clarify business constraints | Summary notes + “Must‑have” list | | Contextual Inquiry (2 × 30 min) | Observe real‑world ordering | Photo‑journal + pain‑point log | | Online Survey (n ≈ 150) | Quantify behavior patterns | CSV data + top‑3 insights chart | Because the capstone timeline is limited, aim for minimum viable research—enough to justify design decisions without exhaustive studies. 2.2. Crafting Personas From the collected data, …
Continue learning
- Mastering UI/UX Design with Figma: A Complete GuideMastering UI/UX Design with Figma: A Complete Guide — a free intermediate-level guide covering learn ui/ux design from scratch with figma. Learn with...
- Mastering UI/UX Design with Figma: A Comprehensive GuideMastering UI/UX Design with Figma: A Comprehensive Guide — a free intermediate-level guide covering learn ui/ux design from scratch with figma. Learn...
- Mastering UI/UX Design with Figma: A Professional RoadmapMastering UI/UX Design with Figma: A Professional Roadmap — a free intermediate-level guide covering learn ui/ux design from scratch with figma. Learn...
- Learn UI/UX Design from Scratch with FigmaLearn UI/UX Design from Scratch with Figma — a free intermediate-level guide covering learn ui/ux design from scratch with figma. Learn with clear...