Free Design learning guide
Mastering UI/UX Design with Figma: A Professional Guide
Mastering UI/UX Design with Figma: A Professional Guide — a free intermediate-level guide covering learn ui/ux design from scratch with figma. Learn...
What you will learn
1. The UX Research Framework
The Gap Between "Good Ideas" and "Solved Problems" Imagine you are tasked with designing a new fitness app. You have a great idea: an AI-powered coach that adjusts workouts in real-time. You spend three weeks polishing the UI in Figma, creating a sleek, dark-mode interface with neon accents. You launch it, only to find that users are abandoning the app after two days. Why? Because while your idea was innovative, you didn't discover that your target users aren't struggling with "workout plans"—they are struggling with the psychological friction of starting a workout when they are tired after work. Your solution was a technical feat, but a strategic failure. The difference between a professional product designer and a hobbyist is the ability to move from assumptions to evidence. The UX Research Framework is not about gathering a mountain of data; it is about strategic synthesis. It is the process of narrowing the field of vision from "everything the user might want" to "the specific problem that, if solved, creates the most value." --- Competitive Audits: Identifying Market Gaps Most designers make the mistake of looking at competitors for visual inspiration. A strategic competitive audit, however, looks for functional voids. You aren't looking for what the competitors are doing right; you are looking for what they are ignoring. The Audit Matrix Instead of writing a narrative report, use a Competitive Audit Matrix. Create a spreadsheet where the Y-axis lists your top 3–5 competitors and the X-axis lists specific features, user goals, or pain points. How to execute a strategic audit: 1. Direct Competitors: Who solves the same problem in the same way? (e.g., Uber vs. Lyft). 2. Indirect Competitors: Who solves the same problem in a different way? (e.g., Uber vs. Public Transit). 3. Analogous Competitors: Who solves a similar problem in a different industry? (e.g., How does Airbnb handle "trust" between strangers? Can that be applied to a peer-to-peer tool rental app?). Finding the "White Space" Once your matrix is filled, look for the White Space. This is where multiple competitors fail to address a specific user need. If every fitness app offers "calorie tracking" but none offer "mental energy mapping," you have found a market gap. This gap becomes the foundation of your product's unique value. --- Synthesizing Interviews into Actionable Personas User interviews provide raw, qualitative data. The danger here is "anecdotal bias"—designing for the one user who shouted the loudest during the interview. To avoid this, you must synthesize raw data into Actionable Personas. From Raw Notes to Affinity Mapping Before building a persona, use Affinity Mapping. 1. Take every observation, quote, and pain point from your interviews. 2. Place them on individual digital sticky notes (Figma/FigJam is …
2. Information Architecture and User Flows
The Blueprint Before the Bricks Imagine you’ve been hired to design a massive digital library. You have your Actionable Personas and you know their primary triggers. You know exactly what the users want to achieve. But if you start designing the "Search" page or the "Book Details" page immediately, you are building rooms without a floor plan. Without a structural map, you will inevitably encounter "orphaned pages" (screens that lead nowhere), "dead ends" (where a user completes a task but has no clear next step), and "navigation bloat" (where the menu becomes a dumping ground for everything you forgot to categorize). Information Architecture (IA) and User Flows are the bridge between the strategy of the UX Research Framework and the visuals of wireframing. While research tells us why and who, IA and User Flows tell us where and how. --- Scalable Sitemaps for Multi-Page Applications A sitemap is not just a list of pages; it is a hierarchical diagram showing the relationship between different content clusters. For a small project, a linear list suffices. For scalable, multi-page applications, you need a system that can grow without requiring a total redesign of the navigation. The Hierarchy of Content To build a scalable sitemap, organize your content into three distinct levels: 1. Global Navigation (L1): The highest level of the hierarchy. These are the primary pillars of your application (e.g., Dashboard, Projects, Team, Settings). 2. Secondary Navigation (L2): Sub-categories that live under the pillars. If "Projects" is L1, then "Active Projects," "Archived Projects," and "Templates" are L2. 3. Tertiary/Detail Pages (L3+): The specific destination pages. This is where the actual task is performed, such as the "Project Edit Screen" or "Invoice Detail View." Designing for Scalability The most common mistake in IA is creating a "flat" structure where every page is treated with equal importance. To ensure scalability: Use Modular Grouping: Group related functions into "buckets." Instead of having "Profile," "Password Reset," and "Notification Settings" all in the main menu, group them under a single "Account Settings" pillar. The Rule of Seven: Cognitive load increases as options grow. Aim for no more than 5–7 top-level categories. If you exceed this, your IA is likely too shallow; look for opportunities to nest pages deeper into the hierarchy. Cross-Linking Logic: A sitemap is a tree, but a user’s journey is a web. Identify "shortcuts" where a user might need to jump from an L3 page (e.g., a specific Invoice) back to an L1 page (e.g., the Dashboard) without clicking "Back" five times. --- Card Sorting for Intuitive Navigation You cannot guess how a user categorizes information; you must observe it. Card sorting is the primary technique used to validate your sitemap by letting users …
3. Advanced Figma Fundamentals
The "Broken Layout" Trap Imagine you’ve spent six hours meticulously designing a high-fidelity dashboard. It looks perfect on your MacBook Pro screen. You send the link to your lead developer, only for them to message you ten minutes later: "The sidebar overlaps the content on smaller laptops, the buttons are stretching weirdly on ultrawide monitors, and I can't tell where the padding ends and the margin begins." This is the "Broken Layout" trap. It happens when a designer treats Figma like a digital canvas for drawing shapes rather than a tool for building structural systems. To move from a beginner to a professional, you must stop thinking about where an element sits and start thinking about how an element behaves. Professional-grade UI is not about static placement; it is about defining a set of rules that allow the interface to adapt to any screen size while maintaining the integrity of your Information Architecture. --- Mastering Complex Auto Layout 5.0 Auto Layout is the engine of modern UI design. While basic Auto Layout allows you to stack buttons or list items, "Complex" Auto Layout involves nesting multiple frames to create layouts that mirror how CSS (the language of the web) actually works. The Logic of Nesting The secret to complex layouts is Nesting. You rarely use a single Auto Layout frame; instead, you wrap Auto Layout frames inside other Auto Layout frames. Scenario: Building a Professional Product Card Consider a card containing an image, a category tag, a title, a description, and a footer with a price and a "Buy" button. 1. The Content Stack: Place the Category, Title, and Description in a vertical Auto Layout frame. Set the spacing to 8px. 2. The Footer Row: Place the Price and the Button in a horizontal Auto Layout frame. Set the distribution to "Space Between" so the price stays left and the button stays right. 3. The Master Card: Wrap the Image, the Content Stack, and the Footer Row into one final vertical Auto Layout frame. By nesting these, you can change the padding of the entire card without affecting the spacing between the title and description. Advanced Resizing Behaviors Understanding the difference between Fixed, Hug, and Fill is what separates a polished layout from a broken one. Fixed: The element stays exactly the size you set. Use this for icons or specific brand elements that must not scale. Hug Contents: The frame shrinks to be as small as possible around its children. Use this for buttons (so the button grows as the text inside it changes). Fill Container: The element expands to take up all available space within its parent. This is the most critical setting for responsiveness. If you have …
4. Wireframing and Low-Fidelity Prototyping
The Danger of the "Pretty" Prototype Imagine you spend three days meticulously crafting a high-fidelity dashboard. You’ve picked the perfect shade of midnight blue, refined the border radii to a crisp 8px, and sourced high-resolution imagery. You present it to your stakeholders. The feedback starts: "I don't really like this blue," "Could we try a different font?" "The images feel a bit too corporate." You’ve just fallen into the Visual Bias Trap. By introducing aesthetics too early, you have shifted the conversation from functionality (Does this solve the user's pain point?) to cosmetics (Do I like this color?). Wireframing is the strategic act of stripping away the "skin" of a product to expose the skeleton. It is the bridge between the Information Architecture and User Flows you’ve already built and the final visual interface. The goal is not to make it look good; the goal is to ensure it works. Translating Flows into Blueprints A user flow tells you where the user goes; a wireframe tells you what they see and how they interact with it when they get there. To translate your flows into structural blueprints, you must move from the abstract (arrows and boxes) to the concrete (layouts and elements). The Hierarchy of Fidelity While we are focusing on low-fidelity (lo-fi), it is important to understand where this sits in the production pipeline: 1. Sketch/Paper Wireframes: Rapid, disposable, and ideal for brainstorming. 2. Low-Fidelity (Lo-Fi) Digital Wireframes: Grayscale, using placeholders, focused on layout and information architecture. 3. Mid-Fidelity: More precise spacing, actual copy (no Lorem Ipsum), and defined UI patterns. 4. High-Fidelity (Hi-Fi): Full color, typography, and imagery (covered in later modules). Mapping Content to Components When moving from your User Flows to a wireframe, ask yourself: What is the single most important action the user needs to take on this screen to move to the next stage of their emotional blueprint? If the goal is "Convert Guest to Member," the primary call-to-action (CTA) should dominate the visual hierarchy. Don't worry about the button's color; worry about its size, placement, and the proximity of the value proposition text. The Lo-Fi Toolkit: To avoid visual bias, restrict your Figma palette to: Greyscale: White, light grey, dark grey, and black. Placeholders: An 'X' inside a box for images; horizontal lines for text. Generic Typography: Use a standard sans-serif (like Inter or Roboto) in only two weights (Regular and Bold). The 8pt Grid System: Structural Consistency Intermediate designers often struggle with "gut-feeling spacing," where one margin is 15px and another is 20px. This creates a subtle visual tension that makes an interface feel "off," even in grayscale. The 8pt Grid System eliminates this guesswork. Why 8px? Most screen resolutions are divisible …
5. Visual Design Systems
The Cost of "One-Off" Design Imagine you’ve just finished the high-fidelity version of a 50-screen application. Your client looks at the primary action button—a specific shade of royal blue—and decides it needs to be a deep indigo to better align with their updated branding. If you designed those screens as a series of static pages, you are now facing a manual nightmare: clicking through every single frame, selecting every button, and changing the fill color one by one. If you missed three buttons on screen 42, your product looks amateur. This is the difference between Designing Pages and Building a System. A Visual Design System is a single source of truth. When you change a token in the system, that change ripples across every single instance in your project instantaneously. It transforms design from a craft of manual repetition into a process of scalable engineering. Design Tokens: The DNA of Your Interface Before you draw a single component, you must define your Design Tokens. Tokens are the smallest building blocks of your design system—essentially variables that store visual attributes like colors, spacing, and typography. Instead of remembering that your primary brand color is 3B82F6, you name that value color-primary-main. If the brand changes, you change the value of the token, not every instance of the color. Building a Semantic Color Palette A common mistake is naming colors based on their appearance (e.g., Blue-500). While this is useful for a "Primitive" palette, it fails in a production environment because it doesn't describe the intent of the color. To build a scalable system, you need Semantic Naming. Semantic naming describes what the color does, not what it looks like. 1. Primitive Palette (The "What"): These are your raw colors. Blue-100, Blue-200 ... Blue-900 Grey-100, Grey-200 ... Grey-900 2. Semantic Palette (The "Why"): These tokens map to the primitives and describe their function. bg-primary $\rightarrow$ maps to Blue-600 text-muted $\rightarrow$ maps to Grey-500 border-error $\rightarrow$ maps to Red-500 action-hover $\rightarrow$ maps to Blue-700 By using semantic names, you create a layer of abstraction. When you implement a Dark Mode, you don't rename Blue-600 to Dark-Blue; you simply tell Figma that in "Dark Mode," the token bg-primary now maps to Blue-900. Establishing a Typographic Scale Typography is not about picking a font you like; it is about creating a mathematical hierarchy that ensures accessibility and readability across different screen sizes. To avoid "font-size creep" (where you end up with 13px, 14px, 15px, and 16px text all in one view), implement a Typographic Scale. The Major Second Scale (1.125 ratio) is a gold standard for UI design. It provides enough contrast to distinguish headers from body text without creating massive, ungainly gaps. Implementation Strategy: Base …
6. Advanced Component Logic
The "Component Explosion" Problem Imagine you are designing a professional dashboard. You have a primary button. Now, you need that button to have an icon on the left. Then, an icon on the right. Then, a loading spinner. Then, a "disabled" state. Then, a "hover" state. If you follow a basic component workflow, you end up with 12, 24, or even 48 different variants of a single button. Your assets panel becomes a graveyard of "Button/Primary/Left-Icon/Hover/Disabled." This is the Component Explosion. It makes your design system brittle, slows down your Figma performance, and creates a nightmare for the developer who has to implement it. Advanced component logic is about moving away from creating every possible version of a component and moving toward creating a system of rules that allow a single component to adapt. Mastering Component Variants While you are likely familiar with basic components, Variants allow you to group similar components into a single container. The goal here is not just organization, but the creation of a logical matrix. The Properties Matrix When creating variants, avoid naming your layers "Button 1" and "Button 2." Instead, use Properties. A property is a characteristic (e.g., Size, State, Type) and a value is the specific version of that characteristic (e.g., Small, Hover, Primary). To implement this effectively: 1. Select your component set. 2. In the Properties panel, define your axes. For a button, these might be: Hierarchy: Primary, Secondary, Ghost State: Default, Hover, Pressed, Disabled Size: Small, Medium, Large By structuring your variants this way, you can switch between a "Small Primary Default" button and a "Large Ghost Hover" button using a simple dropdown menu in the right-hand sidebar, rather than hunting through a list of 30 separate components. When to Use Variants vs. Properties A common mistake is making every single change a variant. Variants are for visual changes that require different layouts or styles. If you are only changing a piece of text or toggling an icon on/off, a variant is overkill. That is where Component Properties come in. Dynamic Component Properties Component properties are the "secret sauce" that kills the Component Explosion. They allow you to manipulate a component instance without having to dive deep into the layer hierarchy (the "deep clicking" problem). Boolean Properties (The Toggle) A Boolean property is a true/false switch. Use this for elements that are either there or they aren't. Scenario: Your button needs an optional leading icon. Instead of creating one variant for "Button with Icon" and one for "Button without Icon," you create one component with an icon inside it. You then assign a Boolean property to that icon layer called Show Icon. Now, in the instance menu, you have a simple …
7. High-Fidelity Prototyping and Interaction
The "Uncanny Valley" of Prototyping Imagine presenting a prototype to a stakeholder. You click a button, and the next screen simply "pops" into existence. The stakeholder asks, "How does the user know the item was added to the cart?" You explain that a confirmation message appears. Then they ask, "But how does it slide in? Does it push the content down or float on top?" Suddenly, you are no longer discussing the user experience; you are spending fifteen minutes explaining how a transition should work. This is the gap between a functional prototype and a high-fidelity simulation. When a prototype lacks realistic motion and logic, it creates cognitive friction for the viewer, forcing them to use their imagination to fill in the gaps. High-fidelity prototyping isn't about making things "look pretty"—it's about removing ambiguity. By the time you reach this stage, you have already established your Visual Design System and built Advanced Component Logic. Now, we breathe life into those static elements to simulate the actual feel of the final product. Mastering Smart Animate for Seamless Transitions While standard transitions (Instant, Dissolve, Slide) move a user from Point A to Point B, Smart Animate looks at the layers in two different frames and interpolates the difference. If a layer has the same name in both frames but different properties (position, size, rotation, or opacity), Figma automatically animates the change. The Golden Rule: Layer Naming Consistency Smart Animate fails the moment a layer is renamed. If your button is named BtnSubmit on Frame 1 and SubmitButton on Frame 2, Figma treats them as two unrelated objects. It will simply fade one out and fade the other in. To achieve seamless motion, ensure your layer hierarchy and naming are identical across all frames involved in the transition. Implementing Spatial Continuity Spatial continuity allows users to maintain their mental map of the interface. Instead of jumping to a new screen, you move elements within the space. Expansion Patterns: Instead of navigating to a "Detail" page, animate a card growing to fill the screen. State Shifts: Transitioning a "Play" icon into a "Pause" icon by animating the paths (provided they share the same vector structure). Shared Element Transitions: Moving a profile image from a small circle in a header to a larger circle in a profile view. Pro Tip: Use Ease-In and Ease-Out curves to avoid "robotic" movement. Real-world objects don't start and stop instantaneously; they accelerate and decelerate. For a modern, snappy feel, try a "Custom Bezier" curve to create a slight overshoot (spring effect). Advanced Prototyping Logic: Variables and Expressions Until recently, Figma prototypes were linear: If user clicks X, go to Frame Y. This required "spaghetti prototyping"—creating dozens of near-identical frames …
8. Usability Testing and Iteration
The "Perfect" Prototype Fallacy You’ve spent weeks building a high-fidelity prototype. Your Visual Design System is pixel-perfect, your Advanced Component Logic handles every edge case, and your interactions are fluid. You present it to a stakeholder, and they love it. You feel confident. Then you put it in front of a real user. Within thirty seconds, the user clicks a button you thought was obvious, but they’re confused by the label. They miss a primary call-to-action because it blends into the background. They get stuck in a loop you didn't anticipate in your User Flows. This is the gap between designing for a user and designing with a user. Up until now, your project has been built on assumptions—informed ones, based on your UX Research Framework, but assumptions nonetheless. This chapter is about converting those assumptions into evidence. Architecting the Usability Test Usability testing is not about "proving" your design works; it is about trying to "break" your design to find where it fails. If a user struggles, it is a failure of the interface, not the user. Moderated vs. Unmoderated Testing Depending on your goals and timeline, you will choose one of two primary testing methodologies. 1. Moderated Testing (The "Why") In a moderated session, you (the moderator) guide the participant through the prototype in real-time. Best for: Complex workflows, early-stage validation, and uncovering deep emotional triggers. The Edge: You can ask follow-up questions ("I noticed you hesitated there; what were you expecting to see?") to uncover the why behind a behavior. The Risk: Moderator Bias. If you lead the user ("Now, click the 'Save' button to finish"), you are no longer testing the UI; you are testing the user's ability to follow instructions. 2. Unmoderated Testing (The "What") Participants complete predefined tasks independently using tools like Maze, UserTesting, or Lookback. Best for: Validating specific interactions, gathering quantitative data (success rates, time-on-task), and testing with a larger sample size. The Edge: Speed and scale. You can get 20 responses in 24 hours without scheduling a single Zoom call. The Risk: Lack of context. If a user drops off, you know where they left, but you don't know why. Defining the Test Script and Tasks Avoid giving users "instructions." Instead, give them scenarios. Bad Task: "Click on the profile icon and change your password." (This is a tutorial, not a test). Good Scenario: "You've realized your account security might be compromised. Show me how you would update your password to secure your account." A strong scenario provides a goal and a motivation, forcing the user to rely on the Information Architecture you've built rather than your prompts. Accessibility Audits and WCAG 2.1 Compliance A design that is "usable" for a …
9. Developer Handoff and Documentation
The "It Looks Different" Dilemma You’ve spent weeks refining your Visual Design System, perfecting Advanced Component Logic, and validating every flow through Usability Testing and Iteration. You hand over the Figma link with a sense of pride, only to receive a Slack message three days later: "Hey, we couldn't figure out the hover state for the primary button, and the spacing on the dashboard looks off. We just guessed." This is the "Design-to-Development Gap." It happens when a designer treats a Figma file as a final deliverable rather than a communication tool. A high-fidelity prototype is a vision; a handoff is a blueprint. If the blueprint is ambiguous, the engineer will fill the gaps with their own assumptions, and your polished UX will erode during the build. Structuring Files for Engineering Clarity Developers do not browse your Figma files the way you do. While you might see a canvas as a playground for exploration, a developer sees it as a source of truth. If they have to hunt through "Frame 452" and "Copy of Finalv2" to find the production screen, friction increases. The Page Hierarchy Organize your pages to separate the "work-in-progress" from the "source of truth." A professional handoff structure typically follows this pattern: 🚀 Ready for Dev: Only finalized, approved screens. If it’s on this page, it’s ready to be coded. 🛠️ In Progress: Where you are currently iterating. Developers can peek here for context, but they shouldn't build from it. 🧪 Prototypes/User Testing: Links to the flows used during Usability Testing and Iteration. 🎨 Local Components/Styles: A reference area for the Visual Design System specific to this project. 📦 Archive: Old versions. Never delete your history, but move it out of sight. Sections and Naming Conventions Within the "Ready for Dev" page, use Sections (Shift + S) to group related screens (e.g., "Onboarding Flow," "Settings Profile," "Checkout Process"). Naming is documentation. Avoid generic names. Instead of "Screen 1," use "Auth / Login / Error State." This creates a shared vocabulary between you and the engineer, making it easier to discuss specific bugs in Jira or GitHub. Mastering Figma Dev Mode Figma’s Dev Mode shifts the interface from a design tool to an inspection tool. It removes the "creative" clutter and surfaces the technical specifications required for CSS and asset extraction. CSS and Property Inspection When a developer selects an element in Dev Mode, Figma translates your design properties into code snippets. However, these are only as good as your organization: Auto Layout is Non-Negotiable: If you used the Advanced Figma Fundamentals of Auto Layout, the developer sees "Gap," "Padding," and "Fill Container." If you used manual grouping, they see absolute pixel coordinates (e.g., left: 432px), which are …
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...