Free Design learning guide
Mastering UI/UX Design with Figma: A Professional Roadmap
Mastering UI/UX Design with Figma: A Professional Roadmap — a free intermediate-level guide covering learn ui/ux design from scratch with figma. Learn...
What you will learn
1. Advanced UX Research & Strategy
The Gap Between "Good Ideas" and "Product Market Fit" Imagine you are tasked with redesigning a fintech app for freelance designers. You conduct a few interviews, notice that users struggle with invoicing, and decide to build a "Smart Invoice Generator." You spend three weeks designing a beautiful, high-fidelity interface. Upon launch, you realize that while the generator is sleek, users are abandoning it because it doesn't integrate with the tax software they already use—a feature every single one of your competitors offers. You didn't fail at UI design; you failed at Strategic Research. Most beginner designers treat research as a "checkbox" activity: do a few interviews, make a persona, start drawing. Advanced UX research is different. It is an investigative process designed to eliminate assumptions and identify the precise "gap" in the market where your product can win. This chapter focuses on moving from surface-level observations to a prioritized, data-driven product requirement document (PRD). --- Competitive Audits & Feature Gap Analysis A competitive audit is not a visual mood board. It is a systematic teardown of your competitors' functional capabilities to determine where the industry standard ends and where the opportunity for innovation begins. Direct vs. Indirect Competition To conduct a thorough audit, you must look beyond the obvious: Direct Competitors: Solve the same problem, for the same audience, in the same way (e.g., Uber vs. Lyft). Indirect Competitors: Solve the same problem, but in a different way or for a different audience (e.g., Uber vs. Public Transit or a bicycle rental app). The Feature Inventory Matrix The most effective way to visualize a gap analysis is through a Feature Inventory Matrix. Create a spreadsheet where the Y-axis lists every possible feature (e.g., "Biometric Login," "Export to PDF," "Real-time Chat") and the X-axis lists your competitors. How to score the matrix: 1. Presence (Yes/No): Does the feature exist? 2. Execution Quality (1-5): How well is it implemented? A feature that exists but is buried in a submenu is a "low-quality" implementation. 3. Value Proposition: Is this feature a "Table Stake" (expected by all users) or a "Differentiator" (something that provides a unique advantage)? Identifying the "Gap" Once the matrix is populated, look for the White Space. The Table Stake Gap: If all competitors have a feature and you don't, you are at a disadvantage. This is a high-priority requirement. The Quality Gap: If all competitors have a feature, but all of them execute it poorly (low score), this is your primary opportunity to win users through superior UX. The Innovation Gap: A feature that no one is offering, but your user research suggests is deeply desired. This is your "North Star" feature. --- Data-Driven Personas and Empathy Maps Generic personas—like …
2. Information Architecture & User Flows
The Blueprint Before the Build Imagine you’ve been hired to design a massive e-commerce platform for a global electronics retailer. You have your Data-driven personas and a comprehensive Feature Inventory Matrix that tells you exactly what the app needs to do. You know the Value Proposition and where the Innovation Gaps lie. Now, you open a blank canvas. Where does the "Order History" go? Does "Technical Support" live under "Account Settings" or its own top-level menu? If a user is halfway through a checkout and their credit card is declined, where exactly do they land? If you start pushing pixels in Figma now, you aren't designing; you're guessing. Information Architecture (IA) and User Flows are the structural engineering of UX. IA defines the skeleton (how content is organized), and User Flows define the circulatory system (how users move through that skeleton to achieve a goal). Without these, your UI will feel like a house with doors that lead to nowhere and closets in the middle of the kitchen. Architecting Content Hierarchy Information Architecture is the practice of deciding how to arrange the parts of something to be understandable. For an intermediate designer, the goal isn't just "making a list of pages," but creating a scalable hierarchy that can grow as the product adds features. Scalable Sitemaps A sitemap is a visual representation of your application's structure. To make it scalable, move away from linear lists and toward a hierarchical tree. The Three Levels of Hierarchy: 1. Global Navigation (Level 1): The primary anchors of the app (e.g., Home, Shop, Profile, Settings). These should represent the highest-level goals identified in your User Journey Map. 2. Category/Section Pages (Level 2): The organizational hubs. Instead of linking every single product page to the home screen, you group them (e.g., Shop $\rightarrow$ Laptops, Tablets, Accessories). 3. Detail/Utility Pages (Level 3): The final destination where the specific task is completed (e.g., Shop $\rightarrow$ Laptops $\rightarrow$ MacBook Pro 14" Product Page). Pro Tip for Scalability: Use "Bucket Categories." Instead of creating a navigation item for every single feature, group related features into a logical bucket. If you have "Change Password," "Update Email," and "Two-Factor Auth," don't list them all in the sitemap; create an "Account Security" bucket. This prevents your navigation from becoming bloated as the product evolves. Applying Card Sorting You cannot rely solely on your own intuition to organize content. Your mental model of the product is that of a creator; the user's mental model is that of a consumer. Use Card Sorting to bridge this gap. Open Card Sorting (Discovery): Give users a list of all the features from your Feature Inventory Matrix on individual cards. Ask them to group these cards into …
3. Figma Fundamentals for Power Users
The "Pixel-Pushing" Trap Imagine you’ve just finished your User Journey Map and finalized your Information Architecture. You have a clear vision of the user's path. You start designing a complex dashboard in Figma, meticulously placing every button, text field, and icon. Then, the inevitable happens: the stakeholder asks to see how it looks on a tablet. Or, you realize the "User Name" field needs to accommodate a much longer string of text than you anticipated. Suddenly, you spend the next three hours manually dragging boxes, resizing groups, and fixing overlapping elements. This is the "Pixel-Pushing Trap." Most beginners design static snapshots; power users design dynamic systems. The difference lies in moving away from absolute positioning and embracing the logic of responsive behavior. By the end of this chapter, you will stop drawing boxes and start building intelligent layouts that adapt to content and screen size automatically. --- Mastering Auto Layout: The Engine of Responsive Design Auto Layout is not just a "grouping tool"—it is a flexbox-style engine that allows elements to grow, shrink, and shift based on the content they hold. The Core Logic: Direction and Padding When you apply Auto Layout (Shift + A), you transform a frame from a static canvas into a container with a defined Direction (Vertical or Horizontal). Gap between items: This replaces the need to manually space elements. Instead of guessing if your buttons are 16px or 20px apart, you set a global gap value for the container. Padding: This defines the internal breathing room. Horizontal padding handles the left/right margins, while vertical padding handles the top/bottom. The Power of Resizing (The "Secret Sauce") The true power of Auto Layout is unlocked in the Resizing menu. Understanding these three settings is the divide between an intermediate and a power user: 1. Fixed: The element stays exactly the size you set, regardless of the parent container. Use this for icons or specific brand assets. 2. Hug Contents: The parent frame shrinks to fit the size of the elements inside it. If you type more text into a button, the button grows. This is the default for most buttons and tags. 3. Fill Container: The element expands to take up all available space within its parent. This is critical for responsive inputs, headers, and card bodies. Pro Tip: The Nesting Strategy Complex UI is simply a series of nested Auto Layouts. For example, a "User Profile Card" would be: Parent Frame (Vertical Auto Layout): Hugs content vertically; fills container horizontally. Header Row (Horizontal Auto Layout): Contains an avatar (Fixed) and a name/handle stack (Vertical Auto Layout, Fill Container). Body Text (Fill Container): Hugs content vertically; fills container horizontally. Footer Actions (Horizontal Auto Layout): Gap of 12px; …
4. Professional Design Systems
The Cost of Inconsistency Imagine you are designing a complex SaaS platform. You’ve spent weeks refining the User Journey Map and Information Architecture. You have 150 screens. Suddenly, the stakeholders decide that the "Primary Brand Blue" is too aggressive and needs to be shifted to a softer Indigo. If you built your project as a collection of individual screens, you are now facing a manual nightmare: clicking through 150 frames, selecting every single button, link, and icon, and changing the hex code one by one. Worse, you’ll inevitably miss three screens, creating a fragmented experience that looks amateur. This is the difference between UI Design and Systems Design. A design system is not a UI kit or a library of pretty buttons; it is a single source of truth that allows you to make a global change in one place and have it propagate instantly across your entire product. Architecting Color Scales Most beginners pick a primary color and a few neutrals. Professionals build a Color System. A professional scale is designed for functional utility, ensuring accessibility and visual hierarchy across different screen densities. The Anatomy of a Professional Scale Instead of naming colors "Light Blue" or "Dark Blue," use a numeric scale (e.g., Blue 50 to Blue 900). This allows you to add shades in between without renaming your entire library. 1. Brand/Primary Palette: The core identity colors. 2. Neutral Palette: Grays, slates, or zinks used for backgrounds, borders, and text. A robust system usually has 9–11 shades of gray. 3. Semantic Palette: Colors that communicate meaning regardless of brand. Success: Greens Warning: Yellows/Ambers Error: Reds Info: Blues/Cyans Implementing Color Variables Move beyond basic "Styles" and utilize Figma Variables. Variables allow you to decouple the value of a color from its usage. The Alias Method (Tokenization): Do not apply "Blue 600" directly to a button. Instead, create a layer of abstraction: Primitive Value: Blue 600 $\rightarrow$ 2563EB Semantic Token: color-text-primary $\rightarrow$ references Blue 600 Component Token: button-bg-primary $\rightarrow$ references color-text-primary By doing this, if you change the brand color, you only update the Primitive Value. If you want to change how all primary buttons look without affecting other primary text, you update the Component Token. Typography Systems for Scalability Typography in a design system is about creating a predictable rhythm. Rather than picking font sizes arbitrarily, you must establish a Type Scale. Establishing the Scale Use a ratio (like the Major Third or Perfect Fourth) to ensure the jump between a Body size and a Heading size feels mathematically harmonious. A standard professional scale often looks like this: Display: Large, high-impact headings for landing pages. Heading (H1-H6): Hierarchical markers for page structure. Body (Large, Medium, Small): The workhorse of …
5. Visual Design Principles & UI Execution
The "Uncanny Valley" of UI Design You’ve spent hours on your Information Architecture & User Flows. Your Professional Design System is set up with a clean color palette and a robust typography scale. But when you move from wireframes to high-fidelity mocks, something feels "off." The spacing looks haphazard, the buttons don't feel "clickable," and the interface lacks a certain professional polish. This is the gap between functional design and executed design. In the industry, this is often where junior designers struggle; they have the components, but they lack the spatial discipline and visual logic to make the interface feel cohesive. High-fidelity UI is not about adding "decoration"—it is about using mathematical precision and psychological triggers to guide the user's eye. The 8pt Grid System: Engineering Spatial Consistency Randomly choosing "20px" or "35px" for padding is the fastest way to create a cluttered interface. Professional UI relies on a Hard Grid, most commonly the 8pt system. This system dictates that every measurement—margins, padding, and line heights—be a multiple of 8 (8, 16, 24, 32, 40, 48, etc.). Why 8px? Most screen resolutions are divisible by 8. By sticking to this increment, you eliminate "half-pixels" (sub-pixel rendering), which causes blurry edges on low-resolution screens. Furthermore, it removes the "decision fatigue" of choosing spacing; you are no longer asking "Should this be 15 or 20 pixels?" but rather "Is this a 16px or 24px gap?" Implementing the Grid in Figma To execute this effectively, move beyond the basic Layout Grid tool and configure your Big Nudge settings: 1. Go to Preferences Nudge Amount. 2. Change the Big Nudge from 10px to 8px. 3. Now, when you hold Shift + Arrow Key, your elements jump exactly 8px. The 4pt Exception While 8pt is the standard for structural spacing, it is often too chunky for tight UI elements. Use a 4pt baseline for: The gap between an icon and its label. Internal padding for small tags or badges. Fine-tuning the distance between a headline and a sub-headline. Scenario: The Card Component Imagine you are designing a product card for an e-commerce app. Using the 8pt system: Outer Padding: 24px (Consistent breathable border). Image to Title Gap: 16px (Clear separation of media and text). Title to Price Gap: 8px (Tight grouping, as they are related data). Price to CTA Button Gap: 24px (Strong separation to highlight the action). Advanced Visual Hierarchy: Contrast, Scale, and Signal If everything is bold, nothing is bold. Visual hierarchy is the process of directing the user's attention to the most important element first. While your Professional Design System provides the tools (the styles), execution is how you deploy them. The Power of Scale Scale isn't just about making a header …
6. Interactive Prototyping
From Static Frames to Living Products Imagine presenting a new feature to a stakeholder. You show them a screen of a shopping cart. You click a "Checkout" button, and the screen instantly jumps to a "Payment" page. It works, but it feels like a slideshow. Now, imagine that same interaction: the user clicks "Checkout," the button subtly shrinks under their thumb, the cart items slide upward and fade, and the payment sheet glides in from the bottom of the screen with a natural, springy momentum. The difference isn't just "polish"—it's the difference between a user guessing how an app works and feeling how it works. High-fidelity prototyping is about reducing the cognitive gap between your design and the final coded product. By utilizing the advanced logic and motion tools in Figma, you can move beyond simple "A-to-B" linking and create simulations that behave like real software. Mastering Motion with Smart Animate While basic transitions (Instant, Dissolve, Slide) handle simple navigation, Smart Animate is the engine that creates professional-grade motion. It doesn't just move an object from point A to point B; it looks for matching layers across frames and interpolates the difference in position, size, rotation, and opacity. The Golden Rule of Naming Smart Animate relies entirely on layer names. If a layer is named Card01 on Frame A and Card1 on Frame B, Figma will treat them as two different objects and simply fade them in and out. To trigger a smooth transition, the layer names must be identical across all frames in the sequence. Implementing Complex Transitions To build a high-fidelity transition, follow this workflow: 1. Set the Initial State: Design your starting frame (e.g., a collapsed search bar). 2. Duplicate and Modify: Duplicate the frame. In the second frame, change the properties of the element (e.g., expand the search bar, move the cursor, change the opacity of the background). 3. Connect the Trigger: In Prototype mode, drag a connection from the trigger element to the destination frame. 4. Select Smart Animate: In the interaction panel, change the animation from "Instant" to Smart Animate. 5. Fine-tune the Easing: Ease In: Starts slow, ends fast. Ease Out: Starts fast, ends slow (best for elements entering the screen). Ease In and Out: Slow start and end (best for looping or subtle movements). Custom Bezier: Allows you to create "spring" or "bounce" effects by manipulating the curve. Scenario: The Expanding Product Card Applying the Visual Design Principles & UI Execution you've already mastered, consider a product gallery. Instead of navigating to a new page for product details, use Smart Animate to expand a card. Frame 1: A grid of product thumbnails. Frame 2: The selected thumbnail has expanded to fill 80% …
7. Usability Testing & Iteration
The "Perfect" Prototype Fallacy You’ve spent weeks on your project. Your Information Architecture & User Flows are logically sound, your Professional Design System is pixel-perfect, and your Interactive Prototyping is seamless. You feel confident. Then, you put the prototype in front of a real user, and within thirty seconds, they click a button that doesn't work, get stuck in a loop, and tell you they have no idea what the primary CTA actually does. This is the "Perfect Prototype Fallacy": the belief that a logically sound design is a usable one. Design is a hypothesis; usability testing is the experiment. If you aren't breaking your designs in front of users, you aren't designing—you're guessing. This stage of the process is where you pivot from creating to validating, transforming qualitative frustration into quantitative improvement. --- Architecting the Usability Test Before opening Figma or recruiting users, you must define what "success" looks like. Testing without a goal is just a demonstration. Defining the Test Plan A professional test plan strips away ambiguity. For every session, define: The Objective: What specific part of the flow are you validating? (e.g., "Can users complete the checkout process without assistance?") The Key Performance Indicators (KPIs): How will you measure failure? Common metrics include Task Success Rate (Did they finish?), Time on Task (How long did it take?), and Error Rate (How many wrong turns did they take?). The Scenario: Instead of telling a user "Click the filter button," give them a goal: "You are looking for a waterproof hiking boot under $150. Find one and add it to your cart." Moderated vs. Unmoderated Testing The choice depends on whether you need to know what is happening or why it is happening. Moderated Testing (The "Deep Dive") In moderated sessions, you are present (physically or via video call). Best for: Complex workflows, early-stage prototypes, and uncovering "The Why." The Technique: Use the Think-Aloud Protocol. Encourage users to narrate their internal monologue. If they pause, don't lead them. Ask, "I noticed you hesitated there; what were you expecting to see?" The Risk: The "Observer Effect." Users may try to please you by being overly positive or following your subtle cues. Unmoderated Testing (The "Scale") Users complete tasks independently using tools like Maze or UserTesting.com. Best for: Validating specific UI patterns, testing with a larger sample size, and gathering quantitative data (heatmaps, misclick rates). The Technique: Set clear, written instructions and a strict sequence of tasks. The Risk: You cannot ask follow-up questions. If a user fails a task, you know that they failed, but not necessarily why. --- Synthesizing Qualitative Feedback Raw data—recordings, notes, and heatmaps—is noise. Synthesis is the process of turning that noise into a roadmap …
8. Developer Handoff & Documentation
The "Gap" Between Design and Code Imagine this: You’ve spent weeks refining a complex dashboard. You’ve applied every principle from Visual Design Principles & UI Execution, built a robust library using your Professional Design Systems, and validated the flow through Usability Testing & Iteration. You hand the Figma link to your lead developer, confident that the visuals speak for themselves. Two weeks later, you see the staging build. The spacing is inconsistent, the "hover" states are missing, the animations feel clunky, and the edge cases—like what happens when a user has a name that is 50 characters long—have been handled with a generic "..." that breaks the layout. The developer isn't incompetent; they simply guessed. When a designer provides a canvas without a manual, developers are forced to make executive decisions about the UX. This is the "Design-to-Dev Gap." Handoff is not the act of sending a link; it is the process of translating a visual vision into a set of technical instructions. Writing Functional Specifications While a high-fidelity prototype (as built in Interactive Prototyping) shows what happens, functional specifications explain why and how it happens. Specifications are the "source of truth" that prevent guesswork. The Anatomy of a Spec A comprehensive functional spec should accompany your Figma frames. Instead of cluttering the canvas with endless sticky notes, use a dedicated "Documentation Page" or a side-car section next to your frames. 1. Behavioral Logic Describe the "if/then" scenarios. Example: "If the user is not logged in, the 'Save' button should trigger the Auth Modal instead of saving the draft." Example: "If the search query returns zero results, display the 'Empty State' illustration and a 'Clear Filters' button." 2. Data Constraints Developers need to know the limits of the content. Character Limits: What happens to a headline when it exceeds one line? Does it truncate with an ellipsis or wrap to a second line? Input Validation: For a form field, specify exactly when the error state triggers (e.g., "On blur" or "Real-time as the user types"). Dynamic Content: Specify if a list is sorted alphabetically, by date, or by a custom priority algorithm. 3. Edge Cases The difference between a junior and senior designer is the ability to design for the "unhappy path." Document the following: Empty States: What does the screen look like the very first time a user opens it? Loading States: Do you use a skeleton screen, a spinner, or a progress bar? Error States: How does the system communicate a 404 error versus a 500 server error? Mastering Figma Dev Mode Figma’s Dev Mode transforms the design canvas from a drawing tool into a technical inspection tool. For the intermediate designer, the goal is to curate the …
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...
- 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...