Free Design learning guide
Learn UI/UX Design from Scratch with Figma
Learn UI/UX Design from Scratch with Figma — a free intermediate-level guide covering learn ui/ux design from scratch with figma. Learn with clear...
What you will learn
- Foundations of UI/UX Design
- User Research & Personas
- Information Architecture & Wireframing
- Getting Started with Figma: Interface & Core Tools
- High‑Fidelity UI Design in Figma
- Prototyping Interactions & Microinteractions
- Design Systems & Component Libraries
- Usability Testing & Iterative Refinement
- Preparing Deliverables & Handoff to Development
1. Foundations of UI/UX Design
A Real‑World Wake‑Up Call Emma clicks “Buy Now” on a popular fashion site, only to stare at a cluttered checkout page that asks for the same address twice, hides the total cost behind a tiny “View Summary” link, and offers a vague “Processing…” spinner with no indication of progress. She abandons the cart, opens a new tab, and completes the purchase on a competitor’s site that presents a clean, step‑by‑step flow. Within minutes, the original retailer loses a sale and, more importantly, a customer’s confidence. This tiny interaction illustrates the razor‑thin line between User Interface (UI) and User Experience (UX). A sleek visual layout (UI) cannot rescue a confusing workflow (UX), and a well‑structured process (UX) can be derailed by poor visual cues. Understanding how these two disciplines intertwine—and how to apply a disciplined design‑thinking process—forms the foundation of every successful product you’ll create in Figma. --- UI vs. UX: Definitions and Interdependence | User Interface (UI) | User Experience (UX) | |--------------------------|--------------------------| | The visual surface—buttons, colors, typography, icons, spacing. | The overall journey—how the product feels, how tasks are accomplished, and how users’ needs are met. | | Focuses on what the user sees and interacts with. | Focuses on what the user does, why they do it, and how they feel before, during, and after. | | Concerned with consistency, aesthetics, and responsiveness. | Concerned with research, flow, usability, and emotional resonance. | | Delivered through high‑fidelity mockups, style guides, and UI kits. | Delivered through personas, journey maps, wireframes, and prototypes. | Why They Depend on Each Other 1. Visual cues drive behavior – A well‑placed “Next” button (UI) signals the next step in a checkout flow (UX). If the button is hidden or ambiguous, the UX breaks. 2. Interaction logic shapes perception – A smooth animation that confirms a successful form submission (UI) reinforces the feeling of reliability (UX). 3. Brand identity ties both together – Consistent colors and typography (UI) convey trust, which is a core component of the user’s overall experience (UX). Think of UI as the skin and UX as the skeleton. The skin can be beautiful, but without a solid skeleton, the body cannot move. Conversely, a perfect skeleton with no skin feels cold and uninviting. In practice, UI designers must understand the underlying UX goals, and UX designers must respect the visual language that makes those goals tangible. --- The Five Stages of Design Thinking Design thinking provides a repeatable, human‑centered framework that turns vague problems into concrete, testable solutions. The stages are iterative; you may loop back at any point when new insights emerge. 1. Empathize – Immerse yourself in users’ worlds. Conduct interviews, observe behavior, and collect pain …
2. User Research & Personas
A Real‑World Kick‑off: The “CampusCash” Dilemma Imagine you’ve just been hired by a startup that wants to launch CampusCash, an app that lets college students split bills, track expenses, and earn rewards for smart spending. The product owner is convinced the idea will “sell itself” because everyone loves free money. Your first task? Validate that assumption before any screens are drawn in Figma. This is where user research and personas become the compass that guides every pixel you’ll later place. --- Qualitative & Quantitative Research: The Two‑Pronged Approach A robust research plan blends qualitative depth with quantitative breadth. Together they answer the why and the how many. 1. Qualitative Techniques – Getting Into the Headspace | Method | When to Use | Quick Execution Steps | |--------|-------------|-----------------------| | In‑depth Interviews | Early concept validation, uncovering motivations | 1. Draft a semi‑structured guide (5‑7 open‑ended questions). <br2. Recruit 5‑8 participants representing your target segment. <br3. Conduct 30‑45 min sessions (in‑person or video). <br4. Record, transcribe, and tag emergent themes. | | Contextual Inquiry | Observing real‑world behavior, spotting hidden pain points | 1. Identify a natural setting (e.g., a dorm common room). <br2. Shadow a participant while they manage a shared expense. <br3. Ask “why” as they act, but keep disruption minimal. | | Diary Studies | Tracking longitudinal habits, especially for recurring tasks like budgeting | 1. Provide participants with a simple template (paper or digital). <br2. Ask them to log expense‑related activities for 7‑10 days. <br3. Review entries for patterns and spikes of frustration. | Tip: Keep the interview guide focused on goals, frustrations, and current workarounds. Avoid product‑specific language that can bias responses. 2. Quantitative Techniques – Scaling the Insights | Method | When to Use | Quick Execution Steps | |--------|-------------|-----------------------| | Online Surveys | Validating hypotheses across a larger sample (100‑300 respondents) | 1. Convert themes from qualitative work into closed‑ended items (Likert scales, multiple choice). <br2. Deploy via campus email lists or social media groups. <br3. Clean data (remove incomplete responses). | | Analytics Review | Understanding existing behavior on related platforms (e.g., existing student finance apps) | 1. Access public usage stats or request anonymized dashboards. <br2. Identify top‑performed features and churn points. | | A/B Test (Mini‑Prototype) | Early validation of UI concepts before full‑fidelity design | 1. Build two low‑fidelity screens in Figma (e.g., list vs. card view). <br2. Use a simple survey to measure preference, or a tool like UsabilityHub for click‑through rates. | Combining the Two: 1. Start with qualitative to surface unknown problems. 2. Translate findings into quantitative questions to confirm prevalence. 3. Iterate—if the survey reveals unexpected trends, return to interviews for deeper probing. --- Mapping the User …
3. Information Architecture & Wireframing
The Power of a Clear Skeleton: A Real‑World Scenario Imagine you’re hired to redesign the onboarding flow for FitPulse, a health‑tracking app that has grown from a simple step counter to a full‑featured wellness platform. The product team has a laundry list of new features—nutrition logs, guided meditations, community challenges—but the existing screens are a tangled mess. Users complain they can’t find the “Log Meal” screen without digging through three unrelated menus. Your first task isn’t to pick colors or craft micro‑interactions. It’s to re‑architect the information so every feature lives in a logical place and the user’s mental model matches the app’s structure. Only after the skeleton is solid do you begin sketching low‑fidelity wireframes that will later be turned into high‑fidelity designs. This chapter walks you through exactly that process: building a sitemap, visualizing hierarchy, validating decisions with card‑sorting, and turning the blueprint into actionable wireframes that survive stakeholder critique. --- Mapping the Information Landscape A well‑structured information architecture (IA) is the backbone of any usable interface. It determines what the user sees, where they find it, and how they move between pieces of content. Below we break down two core IA artifacts—sitemaps and hierarchy diagrams—and show how to create them efficiently. Sitemaps: From Brainstorm to Blueprint 1. Gather the inventory – List every distinct piece of content, feature, or screen the product currently offers. Pull this list from existing design specs, product backlogs, and stakeholder interviews. 2. Group by function – Cluster items into logical buckets (e.g., “Tracking,” “Coaching,” “Community”). 3. Define top‑level categories – Decide on 3‑5 primary navigation tabs that will appear in the global menu. 4. Sketch the tree – Use a simple box‑and‑line diagram to show parent–child relationships. 5. Label clearly – Use user‑friendly terminology (e.g., “Log Activity” instead of “ActivityInputForm”). Pro tip: Keep the sitemap flat wherever possible. Deep hierarchies (more than three clicks from the home screen) often increase cognitive load and raise abandonment rates. Tool tip: While we’ll dive into Figma later, you can create a quick sitemap in any vector‑drawing program or even on paper. The important part is the thought process, not the medium. Hierarchy Diagrams: Visualizing Relationships A hierarchy diagram (sometimes called a site map hierarchy or tree diagram) adds a visual layer to the sitemap by emphasizing the relative importance of each node. - Node size – Larger nodes represent higher‑level concepts. - Edge thickness – Thicker lines can indicate more frequent navigation paths. - Color coding – Use a subtle palette to differentiate functional groups (e.g., blue for tracking, green for community). Why it matters: Hierarchy diagrams make it easier to spot orphaned pages, redundant pathways, or overly complex branches—issues that often surface only when …
4. Getting Started with Figma: Interface & Core Tools
A Sprint‑Ready Scenario: Turning a Wireframe into a Team Review Imagine you’ve just finished a low‑fidelity wireframe for a new mobile banking app in the Information Architecture & Wireframing stage. Your product manager wants to see a quick visual mock‑up before the next stakeholder meeting, and the UI designer on your team will need to add branding touches later. You have 30 minutes, a shared Figma file, and a remote team ready to comment. In this sprint‑style walk‑through you’ll: 1. Open the file and locate the key panels you’ll need. 2. Create frames, shapes, and vector icons that translate the wireframe into a basic layout. 3. Apply constraints, grids, and layout systems so the design adapts to different screen sizes. 4. Invite teammates, leave comments, and explore version history to keep the collaboration tight. By the end of the exercise you’ll have a clean, responsive canvas that anyone can review, critique, or hand off to the next design phase. --- 1. Navigating the Figma Workspace 1.1 The Main Canvas and Layers Panel - Canvas – The infinite white space where you place frames, components, and vectors. Think of it as the visual surface you already know from the User Interface (UI) fundamentals. - Layers panel (left sidebar) – Mirrors the hierarchy of your design. Frames appear as top‑level groups; inside them you’ll find shapes, text, and components. Use the eye icon to toggle visibility and the lock icon to prevent accidental moves. Tip: Press ⌘ + \ (Mac) or Ctrl + \ (Windows) to toggle the left sidebar, giving you more canvas real‑estate when you need it. 1.2 The Right‑Hand Property Inspector When an object is selected, the Properties panel shows context‑sensitive controls: - Position & size – Numeric fields, snapping toggles, and the Resize to fit button. - Fill, Stroke, Effects – Quick access to colors, gradients, shadows, and blur. - Layout – Constraints, grid overlays, and auto‑layout settings. Hover over any icon for a tooltip that displays the associated shortcut; learning these shortcuts early slashes navigation time dramatically. 1.3 Top Bar: File, Edit, View, and More - File menu – New file, duplicate, export, and the Version History entry. - View menu – Show/hide UI, pixel grid, and Zoom to selection (⌘ + 1). - Share button – Generates a share link with view/edit/comment permissions; you can also invite collaborators by email directly from here. 1.4 Quick‑Access Panels - Assets – Stores components, icons, and color styles. In later chapters you’ll build a design system here, but for now you can drag a pre‑made icon from the community or the built‑in library. - Pages – Organize work into logical sections (e.g., Wireframes, Mock‑ups, Prototype). Use ⌥ + ← …
5. High‑Fidelity UI Design in Figma
From Wireframe to Wow: A Real‑World Sprint Imagine you’ve just finished a low‑fidelity wireframe for a mobile banking app’s “Transfer Money” screen. The flow has been validated with personas and journey maps, and the skeleton of the interface is ready. Your next challenge: turn that skeletal outline into a polished, pixel‑perfect UI that feels trustworthy, modern, and ready for handoff. In the next sections you’ll learn how to apply color, typography, and effects consistently, craft reusable components from scratch, leverage auto‑layout for flawless spacing, and integrate imagery and SVG assets—all within a single Figma file. By the end of the chapter you’ll have a complete high‑fidelity mockup of the transfer screen that you can reuse across the whole app. --- 1. Establishing a Visual Language in Figma Before you start placing rectangles on the canvas, set up a visual foundation that will enforce consistency throughout the design. This foundation lives in the Assets panel as styles and will be the source of truth for every element you later create. 1.1. Defining a Color Palette 1. Create a new “Color Styles” section in the Assets → Styles pane. 2. Add primary, secondary, and accent colors that reflect the brand’s identity (e.g., 0066FF for primary, 00C853 for success). 3. Include neutrals for backgrounds, borders, and text (FFFFFF, F5F5F5, 212121). 4. For each color, create light and dark mode variants if you plan to support them later. Tip: Use the Color Picker to sample the brand’s logo, then generate a tint/shade scale (10 % steps) to give yourself a flexible range for hover states, disabled states, and subtle backgrounds. 1.2. Setting Up Typography 1. Open the Text tool and type a sample heading. 2. In the right sidebar, set the font family, weight, size, line height, and letter spacing that match your design system. 3. Click the Style icon (four dots) and choose Create Text Style. Name it descriptively (Heading / H1 / Bold). 4. Repeat for subheadings, body, caption, and overline styles. Why it matters: Consistent typographic hierarchy reinforces the visual hierarchy you introduced in the Foundations chapter, guiding users’ attention without extra cues. 1.3. Adding Global Effects Shadows, blurs, and inner glows give depth and focus. - Drop Shadow: - Select a shape, go to Effects → + → Drop Shadow. - Set a subtle offset (e.g., x: 0, y: 2, blur: 4, spread: 0, opacity: 10%). - Save as a Effect Style (Shadow / Light). - Inner Shadow & Blur: - Useful for input fields or card backgrounds that need a “pressed” feel. - Create a style (Inner Shadow / Soft) and reuse it across components. All styles are now available for quick application—no need to manually adjust values each …
6. Prototyping Interactions & Microinteractions
A Click‑Through Story: From Landing Page to Checkout Imagine a user named Maya who lands on a new e‑commerce app. She scrolls, taps a product card, watches a quick animation that expands the card into a detail view, hovers over color swatches that pulse, and finally sees a loading spinner as the “Add to Cart” button processes her request. All of those moments—navigation, overlay, subtle motion—are microinteractions that turn a static mockup into a believable experience. In Figma, you can recreate Maya’s entire journey without writing a line of code. This chapter walks you through the practical steps to link screens, configure realistic animations, craft micro‑interactions, and test on real devices using Figma Mirror. By the end, you’ll have a prototype that feels as polished as a production‑ready app and that you can hand off to developers with confidence. --- 1. Preparing Your High‑Fidelity Screens for Interaction Before you start prototyping, make sure your visual layers are organized the way you need them for interaction: | Checklist | Why It Matters | |-----------|----------------| | Naming conventions (e.g., Btn/Primary/Default) | Enables quick selection of triggers and keeps the prototype tidy. | | Component usage | Allows you to edit a button once and have the change propagate across all instances. | | Layer grouping (e.g., Card/Product) | Simplifies the creation of overlay frames that contain multiple elements. | | Auto‑layout for dynamic content | Ensures that expanding or collapsing elements respect spacing without manual adjustments. | If you followed the High‑Fidelity UI Design in Figma chapter, most of these steps are already in place. The key difference now is that you’ll be adding interaction metadata on top of your visual design. --- 2. Linking Screens with Navigation Triggers 2.1. The Basics of Prototyping Mode 1. Switch to Prototype tab in the right‑hand panel. 2. Click any interactive element (button, card, icon). 3. Drag the blue node that appears to the destination frame. Figma automatically creates a link and adds a default “Navigate To” interaction with a Instant transition. 2.2. Common Navigation Patterns | Pattern | Trigger | Destination | Typical Use | |---------|---------|-------------|-------------| | Push navigation | Tap / Click | New screen | Page‑to‑page flow (e.g., Home → Product Detail). | | Back navigation | Tap on back icon | Previous screen | Return to prior context. | | Overlay | Tap on avatar | Modal frame | Settings, dialogs, pop‑ups. | | Swap | Click a tab | Same screen, different content | Tab bars, segmented controls. | | External link | Click a URL | Browser | “Learn more” footers. | 2.3. Step‑by‑Step Example: Product Card → Detail View 1. Select the card (or a transparent hotspot over …
7. Design Systems & Component Libraries
A Real‑World Wake‑Up Call Imagine you’re midway through redesigning a popular health‑tracking app. The visual mockups look stunning, but when the development team starts building screens, they discover three different button styles, six font families, and a rainbow of blue shades scattered across the prototype. Every new screen requires a fresh set of “local” styles, and the handoff documentation explodes into a maze of screenshots and notes. The project stalls, the brand feels fragmented, and the team spends weeks reconciling inconsistencies. This is the exact scenario a design system solves. By codifying colors, typography, spacing, and reusable UI blocks in a single, shared source, you give designers, developers, and product managers a common language that scales from a single screen to an entire product family. In this chapter you’ll learn how to structure a design system file in Figma, set up shared styles, build component variants with auto‑layout, and keep everything version‑controlled across multiple files. --- 1. Mapping the Design System Architecture A design system is more than a collection of symbols; it’s a hierarchy of tokens, components, and documentation that together form a living, reusable toolkit. 1.1 Tokens: The Atomic Building Blocks Tokens are the raw values that define the visual language—think of them as the DNA of your UI. | Token Type | Typical Contents | Figma Representation | |------------|------------------|----------------------| | Color | Primary, secondary, neutrals, semantic (error, success) | Color Styles | | Typography | Font families, weights, line heights, letter spacing | Text Styles | | Spacing | Grid, gutters, padding, margins | Layout Grids & custom “Spacing” frames | | Elevation | Shadow presets, surface blur | Effect Styles | | Border | Radius, width, style | Effect Styles (or component properties) | Why keep them atomic? - Consistency: Any change to a token instantly ripples through all components that reference it. - Scalability: New products can adopt the same token set without redesign. - Collaboration: Developers receive a single source of truth for CSS variables or design tokens. 1.2 Components: The Structured UI Pieces Components are the molecules and organisms built on top of tokens. They can be simple (a button) or complex (a card with image, title, and actions). In Figma, a component is a master that spawns instances; variants let you capture state, size, and theme within a single component. 1.3 Documentation: The Narrative Layer Even the most elegant system fails without clear guidance. Documentation lives inside the Figma file (using description fields, notes, and dedicated pages) and outside (in tools like Notion or Storybook). It should answer: - When to use each component or token. - How to customize a component without breaking the system. - What the accessibility expectations are …
8. Usability Testing & Iterative Refinement
The Moment the Clock Ticks Imagine you’ve just delivered a polished, high‑fidelity prototype of a new mobile banking app to your stakeholder board. The screens look immaculate, the micro‑interactions flow, and the design system you built in Chapter 7 feels cohesive. The board nods approvingly—until a senior manager asks, “What happens when a real user tries to transfer $500?” In that instant the prototype stops being a static showcase and becomes a living product that must survive real‑world tasks. The only way to answer that question is to watch actual users interact with your design, capture where they stumble, and iterate based on concrete evidence. This chapter walks you through turning that “what if” moment into a structured usability testing process, from planning the session to iterating the prototype and documenting every decision along the way. --- 1. Designing the Test Plan A test plan is the blueprint that keeps your usability study focused, reproducible, and aligned with the goals you set in User Research & Personas. 1.1 Define Clear Objectives Start with a short, measurable statement such as: - Validate that first‑time users can complete a funds transfer within 2 minutes without assistance. - Identify any points of confusion in the onboarding flow for users aged 55+. Link the objectives directly to the pain points uncovered in your personas and journey maps. This ensures the test targets the high‑impact areas you already know matter. 1.2 Choose the Test Modality | Modality | When to Use | Pros | Cons | |----------|-------------|------|------| | Moderated (in‑person or video‑call) | Complex tasks, need probing questions | Real‑time clarification, higher engagement | Higher logistical overhead, potential moderator bias | | Remote unmoderated | Large sample size, budget constraints | Scalable, natural environment | No control over distractions, limited follow‑up | A hybrid approach works well for many projects: run a few moderated sessions to uncover deep insights, then validate findings with a larger remote sample. 1.3 Recruit Participants Aligned with Personas Use the personas you crafted in Chapter 2 as recruitment filters. A concise recruitment brief might read: “We need 5 participants who match Persona A – “Busy Professional”: ages 28‑38, daily mobile banking users, tech‑savvy but time‑pressed.” If you lack direct access to your target users, consider: - Screening surveys (Google Forms, Typeform) to filter respondents. - User‑testing platforms (UserTesting, Lookback) that let you specify demographic criteria. 1.4 Determine Sample Size and Success Criteria For moderate‑fidelity usability studies, 5‑7 participants per major user segment often surface 80‑90 % of usability problems (Jakob Nielsen’s classic finding). Define success thresholds, for example: - Task success rate ≥ 85 % - Mean time on task ≤ 2 minutes - No critical errors (errors that prevent …
9. Preparing Deliverables & Handoff to Development
A Real‑World Hand‑off: From Designer’s Canvas to Developer’s IDE Imagine you’ve just finished the high‑fidelity redesign of a mobile banking app. The UI looks pixel‑perfect, the micro‑interactions have been prototyped, and the design system library is tidy. Your product manager schedules a sprint review, and the development team is ready to start coding. Within minutes, a junior developer opens the Figma file, scrolls through layers, and asks: “Where are the 2× icons for retina screens? Which color token should I use for the error toast? And how exactly should the swipe‑to‑delete animation behave?” If you can answer those questions instantly, the hand‑off will be smooth. If not, the team will spend valuable hours reverse‑engineering your design, introducing bugs, and possibly re‑working UI elements later. This chapter equips you with the exact steps, tools, and documentation practices to turn your Figma file into a developer‑ready package that eliminates guesswork and accelerates implementation. --- 1. Organizing the Figma File for Handoff A clean file structure is the foundation of an efficient hand‑off. Even though you’ve already built a design system (Chapter 7), the way you expose that system to developers matters. 1.1 Create a Dedicated “Developer Handoff” Page 1. Duplicate the final screens you intend to ship. 2. Rename the page to something explicit, e.g., 🛠️ Dev Handoff – v1.3. 3. Lock the page (right‑click → Lock) to prevent accidental edits during the sprint. 1.2 Layer Naming Conventions - Use semantic names rather than generic ones (Button/Primary/Enabled instead of Rectangle 12). - Include state identifiers (/Hover, /Active, /Disabled). - Keep naming consistent with your design system tokens (Color/Brand/Primary, Icon/Close/24). 1.3 Grouping and Frames - Group related elements (e.g., a card component) inside a single frame that matches the component’s root in the design system. - Avoid deep nesting; a maximum of three hierarchy levels keeps the Inspect panel readable. 1.4 Version Control - Create a version tag before hand‑off (File → Show Version History → “Create version”). - Name the version with the release identifier (v1.3 – Mobile Checkout). - This gives developers a stable reference point even if you continue iterating later. --- 2. Exporting Assets: Resolutions, Formats, and Naming Developers need assets that are optimally sized, correctly formatted, and clearly named. Figma can automate most of this, but you must set it up deliberately. 2.1 Choosing the Right Format | Asset Type | Recommended Format | Reason | |------------|--------------------|--------| | Icons & UI symbols | SVG (vector) | Scales without loss, small file size, CSS‑editable | | Raster images (photos, illustrations) | PNG or JPEG | PNG for transparency; JPEG for photographic content | | Complex vectors with gradients | PDF (if supported) | Preserves vector data and gradients | …
Continue learning
- Learn UI/UX Design with Figma: From Basics to Pro ProjectsLearn 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...
- 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...