Guides
Practical how-tos for UI/UX designers — from Figma fundamentals to career advice.
Accessibility Guide for UI Designers: WCAG, Contrast, and Practical Fixes
A practical accessibility guide for UI designers — WCAG 2.1 AA basics, contrast ratios, focus states, touch targets, screen readers, and using Stark in Figma to audit your designs.
Animation Resources for UI Design
Curated list of animation resources for UI designers: libraries, community files, tutorials, and inspiration sites for Lottie, Rive, GSAP, and CSS animations.
Color Resources for UI Designers
The best color tools for UI design — from generating accessible palettes to testing them on real interfaces, covering Tailwind, Radix, Coolors, Leonardo, and more.
Color Theory for UI Designers: What Actually Matters
Skip the art school theory. Learn the 60-30-10 rule, how to build a color scale, semantic color roles, WCAG contrast requirements, and accessible pairings for UI design.
Design Thinking Explained for Practitioners
What design thinking actually is, how to apply its five stages with real tools, when it's useful vs overkill, and the misconceptions that make teams do it badly.
Design Tokens Explained: What They Are and How to Use Them
Learn what design tokens are, the difference between primitive and semantic tokens, and how to set up a token chain from Figma Variables to code.
Essential UX Books Every Designer Should Read
Six essential UX books with honest takes on who they're for, what you'll actually take away, and when in your career each one will hit the hardest.
Figma Keyboard Shortcuts That Actually Speed Up Your Workflow
The Figma shortcuts worth memorizing — selection, editing, text, view, auto layout, and prototyping. Focused on speed, not an exhaustive list.
Figma vs Sketch for Beginners: Which Should You Learn?
If you're just starting out in UI design, here's the direct answer: learn Figma. Here's why — and what role Sketch might play later in your career.
Font Resources for UI Designers
Where to find fonts for UI design — covering Google Fonts, Inter, Geist, FontSource, font pairing guidance, and when to use system fonts instead of custom ones.
Grid Systems for UI Design
A practical guide to grid systems — covering the 8pt grid, 12-column web layouts, 4-column mobile, baseline grids, setting up grids in Figma, and reusable grid styles.
How to Add Animation to UI
A practical guide to adding animation to UI designs. Covers core principles like easing and timing, the best tools for the job, and when motion helps vs. hurts UX.
How to Annotate Designs for Developer Handoff
A practical guide to design annotations — what to document, how to set up an annotation layer convention in Figma, and what developers actually need from your specs.
How to Build a Component Library in Figma
Step-by-step guide to building a Figma component library — naming conventions, variants, component properties, nesting, and publishing to a team.
How to Build a Design Portfolio That Gets You Hired
Learn what hiring managers actually look for in design portfolios — case study structure, common mistakes to avoid, how many projects to show, and where to host your work.
How to Build a Research Repository
How to set up a centralized UX research repository for your team. Covers structure, tagging systems, templates, and tools like Dovetail, Notion, and Miro.
How to Build a SaaS Landing Page That Converts
A practical guide to designing high-converting SaaS landing pages — covering anatomy, hierarchy, CTAs, and the Figma-to-Webflow or Framer workflow.
How to Build a UI Kit in Figma
Step-by-step guide to building a custom Figma UI kit — covering color and text styles, component states, auto layout, file organization, and when to buy instead of build.
How to Build a Webflow Site
A designer's guide to building in Webflow. Covers the Figma-to-Webflow workflow, core Webflow concepts, CMS basics, responsive breakpoints, and using Relume for faster starts.
How to Build with v0
Practical guide to using v0 for UI generation. Covers writing effective prompts, iterating in the chat interface, copying to Next.js, and using v0 with Cursor.
How to Choose a Website Builder
A decision guide for picking between Webflow, Framer, Squarespace, and Wix Studio. Covers use cases, skill requirements, pricing, and scaling considerations.
How to Conduct User Interviews
A practical guide to planning and running user interviews that generate real insights. Covers discussion guides, active listening, note-taking, and synthesis.
How to Create a Design System: A Practical Guide
Step-by-step guide to building a design system from scratch — what to include, what to skip, and which tools to use.
How to Create a Style Guide for Your Product or Brand
Learn what a style guide should include, the difference between a style guide and a design system, how to build one in Figma and publish it with Zeroheight for team access.
How to Create User Personas
Practical persona creation guide — what to include, how to get real data, and how to make personas your team actually references.
How to Design a Mobile App: End-to-End Process
Design a mobile app from scratch — user flows, iOS and Android frame setup, platform components, gesture navigation, prototyping, and handoff.
How to Design Data Visualizations
Design clear, accessible data visualizations for UI. Covers chart type selection, data-ink ratio, accessible color palettes, data density, and dashboard layout principles.
How to Design Empty States
Design empty states that guide users instead of leaving them lost. Covers the three types, what each needs, common mistakes, and designing the full first-use flow.
How to Design for Accessibility
Accessibility design beyond color contrast — covering visual, motor, auditory, and cognitive disabilities, focus management, reading order, keyboard navigation, and testing with Stark.
How to Design for Dark Mode
Practical dark mode design guide — semantic color tokens, WCAG contrast, Figma Variables for mode switching, and the mistakes to avoid.
How to Design for Touch
Touch design guide covering minimum target sizes, gesture patterns, thumb zone design on large phones, haptic feedback, drag-to-dismiss, and prototyping interactions with ProtoPie.
How to Design Forms for UX
Form design best practices for UX designers. Covers label positioning, placeholder text, error messages, multi-step forms, accessibility, and practical Figma patterns.
How to Design Loading States
Loading state design guide — skeleton screens vs spinners vs progress bars, perceived performance techniques, optimistic UI, error states after timeout, and prototyping in ProtoPie.
How to Design Micro-Interactions
Design micro-interactions that communicate, not just decorate. Covers triggers, feedback loops, timing guidelines, and how to prototype with ProtoPie and Principle.
How to Design Navigation
Design navigation that users can actually use. Covers nav patterns, IA depth, mobile navigation decisions, naming items correctly, breadcrumbs, and progressive disclosure.
How to Design Onboarding Flows
Design app onboarding that actually works. Covers time-to-value, progressive disclosure, the three types of onboarding, testing with Maze, and common mistakes to avoid.
How to Design Responsive Layouts in Figma
Responsive design in Figma — setting up breakpoints, constraints vs auto layout, mobile-first design, and translating specs to Webflow.
How to Do a UX Audit: A Practical Step-by-Step Process
Learn how to run a UX audit using Nielsen's heuristics, document issues with severity ratings, and present findings to stakeholders using Hotjar, Figma, and Notion.
How to Do A/B Testing as a Designer
A designer's guide to A/B testing — forming hypotheses, designing clean variants, understanding statistical significance, interpreting results, and avoiding common testing mistakes.
How to Do Card Sorting
Learn how to run card sorting sessions to improve your site's IA and navigation. Covers open vs closed sorting, participant counts, and analyzing results.
How to Do Competitive Analysis for UX
A practical guide to UX competitive analysis — what to analyze, how to capture findings, the difference between feature comparison and experience analysis, and how to act on results.
How to Do Unmoderated Usability Testing
A practical guide to running unmoderated remote usability tests. Covers task design, participant recruiting, analyzing results, and picking the right tool.
How to Do Usability Testing
A practical usability testing guide — moderated vs unmoderated, writing task scenarios, recruiting participants, and using Maze and Hotjar.
How to Document Design Decisions
A practical guide to documenting design decisions — what to capture, where to store it, and the templates that actually get used across Notion, Figma, and Linear.
How to Document UI Components: A Practical Guide
Learn what good component documentation includes, when to use Storybook vs Zeroheight vs Figma annotations, how to write useful usage guidelines, and how to keep docs up to date.
How to Estimate Design Projects Without Getting Burned
Design project estimation guide covering task breakdown, the 3x complexity rule, how to communicate estimates to clients, and tracking actual vs estimated time in Notion and Linear.
How to Get a UX Design Job
Practical UX job-search guide — what hiring managers look for, portfolio structure, case study writing, interview prep, and what to do without experience.
How to Give Design Feedback That Actually Helps
Learn how to give design feedback that moves work forward — covering critique frameworks, question-first approaches, and async Figma comments that don't waste time.
How to Hand Off Designs to Developers
Developer handoff best practices — Figma Dev Mode, layer naming, specifying interactions and states, and when to use Zeplin vs Dev Mode.
How to Learn UI Design: A Realistic Learning Path
A practical UI design learning path for beginners — the fundamentals to learn first, how to practice, portfolio building, and a realistic timeline.
How to Manage Design Feedback Systematically
A systematic approach to managing design feedback — capturing it from multiple sources, triaging it by priority, communicating decisions back, and avoiding endless revision loops.
How to Map User Journeys
User journey mapping guide — the components, how to gather data, when to use journey maps vs service blueprints, and the right tools.
How to Present Designs to Stakeholders
How to present design work effectively — choosing fidelity, using Figma presentation mode, managing feedback, and running async reviews.
How to Price Design Work as a Freelancer
A practical guide to freelance design pricing — hourly vs project vs retainer, calculating your rate, value-based pricing, handling scope creep, and presenting prices to clients.
How to Run a Design Sprint
A practical 5-day design sprint guide — day-by-day breakdown, tool setup for Miro and Figma, participant roles, and remote sprint adjustments.
How to Run a Heuristic Evaluation
Run a heuristic evaluation using Nielsen's 10 principles. Covers each heuristic with UI examples, severity ratings, solo vs team approach, and how to document findings.
How to Run a UX Workshop That Actually Produces Results
Practical guide to facilitating UX workshops — covering workshop types, board setup in Miro or FigJam, time-boxing activities, and what to do with outputs afterward.
How to Run Design Reviews That Are Actually Useful
Learn how to run effective design reviews — purpose, attendees, async vs sync review in Figma, how to structure feedback, and tracking follow-up work in Linear.
How to Set Up a Design Team From Scratch
A practical guide to setting up a design team — tool stack decisions, file organization, design review rituals, onboarding processes, and the systems that keep teams aligned.
How to Set Up a Figma Design System: A Practical Guide
Step-by-step guide to setting up a Figma design system — file structure, foundations, component organization, team library publishing, version control, and governance.
How to Set Up Hotjar
Step-by-step guide to setting up Hotjar for heatmaps, session recordings, feedback surveys, and funnels. Covers installation, privacy controls, and what to look for.
How to Spec Interactions for Developers
Spec interactions that developers can actually implement. Covers what devs need, minimum viable specs, animation tokens, Figma's Prototype tab, and ProtoPie handoff.
How to Switch from Sketch to Figma
A practical migration guide — importing Sketch files, mapping Symbols to Components, moving team libraries, and comparing pricing.
How to Test Information Architecture
Guide to testing information architecture with card sorting and tree testing. Covers open vs. closed card sorts, analyzing dendrograms, and iterating on navigation.
How to Test Your Designs at Every Stage
A practical guide to design testing — from concept sketches to live A/B tests — covering fidelity-appropriate methods, minimum viable testing, and how to analyze results.
How to Transition into UX Design
A practical career transition guide for people moving into UX design. Covers what to learn first, building experience without a job, and the real job search timeline.
How to Use AI for UI Prototyping
How to use AI tools like v0, Lovable, Bolt, Galileo AI, and Figma AI to speed up UI prototyping. Covers what each tool does best and practical workflows.
How to Use AI in UI Design: What Actually Works
A practical guide to AI tools for UI designers — where AI genuinely helps, Figma AI, UX Pilot, v0 for React components, Cursor for building, and what AI still can't do.
How to Use AI Tools for UX Research
Where AI genuinely helps UX research — transcription, synthesis, affinity mapping — where it doesn't, and how to use AI features in Maze and Hotjar without replacing real user insight.
How to Use Auto Layout in Figma
Master Figma's Auto Layout feature — spacing modes, padding, fill vs hug, and real patterns like buttons, cards, and nav bars.
How to Use Cursor for UI Development
Use Cursor's AI features for faster UI development. Covers Autocomplete, Chat, and Composer, the v0-to-Cursor workflow, effective prompting, and common pitfalls.
How to Use Figma Branching
Figma branching explained — when to use it, how to create and merge branches, handle conflicts, and why it's only available on the Organization plan at $45/editor/month.
How to Use Figma Components: A Practical Deep Dive
Master Figma components — creating mains, using instances, nesting, component properties, variants, and organizing a library. Includes a button component walkthrough.
How to Use Figma Prototyping
Figma prototyping practical guide — smart animate, overlays, scroll, variable-driven logic, and when to move to ProtoPie for complex interactions.
How to Use Framer for Portfolios
Build a design portfolio in Framer. Covers templates vs starting from scratch, setting up case study CMS, animations, connecting your domain, and SEO settings.
How to Use Linear for Design Teams
Set up Linear for design work. Covers project setup, issue states for design workflow, linking Figma, using cycles as sprints, GitHub integration, and keyboard shortcuts.
How to Use Miro for Design Teams
Set up Miro for your design team. Covers workspace setup, the best built-in templates, async workshops, linking to Figma and Notion, and facilitator tips.
How to Use Notion for Design Teams
Set up Notion for your design team. Covers workspace structure, databases for project tracking, embedding Figma, syncing with Linear, and common setup mistakes.
How to Use Penpot: A Practical Guide
Practical Penpot guide covering cloud vs self-hosted setup, Figma import, components, auto layout, prototyping, dev mode, and how it compares to Figma for different use cases.
How to Use ProtoPie for Advanced Interactions
A practical guide to ProtoPie — importing from Figma, triggers and responses, variables for stateful prototypes, sensor triggers, and ProtoPie Connect for multi-device demos.
How to Use Rive
Getting started with Rive for interactive animations. Covers the state machine editor, timeline animation, and exporting runtimes for web, iOS, and Android.
How to Use Sketch in 2026
Practical Sketch guide for 2026 — covering Symbols vs Components, Shared Libraries, Sketch Cloud for collaboration, the web inspector for handoff, and who should still use Sketch.
How to Use Spline
Getting started with Spline for 3D web design. Covers the interface, building 3D scenes, materials, exporting for the web, and embedding in React projects.
How to Use Storybook as a Designer
Storybook explained for designers — how to read component stories, check states and props, use the Figma plugin to link stories, and why Storybook matters for design system work.
How to Use Variables in Figma
Learn Figma Variables — color, number, string, and boolean types — and set up a real semantic color system with light and dark mode.
How to Use Webflow as a Designer (No Coding Background Required)
Learn how Webflow's visual builder maps to real CSS, the difference between Designer and Editor, how to set up responsive layouts, and when to use the CMS for dynamic content.
How to Wireframe an App: A Practical Guide
Learn how to wireframe mobile and web apps effectively — when to use low, mid, or high fidelity, content-first approach, common patterns, and the right tools for each stage.
How to Write UX Case Studies
Write UX case studies that get you hired. Covers the right structure, writing a strong problem statement, showing process, and what to leave out.
Spacing Systems for UI Design
How to define and use a spacing scale — covering the 4pt vs 8pt debate, defining your scale, using spacing tokens in Figma variables, and applying consistent spacing to components.
Typography Guide for UI Design
UI typography fundamentals — type scales, line height rules, font pairing, responsive type, and common mistakes that make interfaces look amateur.
UX Portfolio Examples and What Makes Them Work
What great UX portfolios have in common, where to find examples worth studying, and the patterns that consistently show up in portfolios that get hired.
What Is a Design System? A Clear Explanation
Understand what a design system actually is — the difference from a component library, the layers (tokens, components, patterns, docs), when you need one, and how to start building.
What Is Information Architecture? A Guide for UI Designers
Learn IA fundamentals for UI designers — navigation, hierarchy, taxonomy, labeling, card sorting, site maps, and how IA decisions directly affect your UI design work.
What Is UI Design? A Plain-English Explanation
What UI design is, how it differs from UX design, what UI designers do day-to-day, the skills you need, tools used, and how the role has evolved.
What Is UX Design? A Plain-English Explanation
What UX design actually means, the UX process from research to testing, how UX relates to UI, what UX designers do day-to-day, and how to get started.
Where to Find UI Design Inspiration
The best sources for UI design inspiration — with honest notes on what each is actually good for and where each one can mislead you.