UIGuides
figma

Articles tagged “figma

50 articles about figma.

Best Of

Best Figma Plugins in 2026

The best Figma plugins in 2026 — covering image sourcing, accessibility, design tokens, icons, realistic content, layer management, and code export.

Best Of

Best Free Resources for Learning Figma

The best free resources for learning Figma from scratch — covering official resources, YouTube channels, community practice files, and what skill each one actually builds.

Best Of

Best Free Figma Templates

A curated list of the best free Figma templates by category — UI kits, wireframe kits, icon sets, mockups, and design system starters available in the Figma Community.

Review

Figma Review 2026: Still the Best UI Design Tool?

An honest Figma review covering features, pricing, performance, and whether it's worth the subscription in 2026.

Review

Untitled UI Review 2026: The Most Comprehensive UI Kit for Figma

Untitled UI is a massive Figma UI kit with 5,000+ components built on a complete design system. One-time purchase from $149. Best for designers who want a professional starting point rather than building from scratch.

Guide

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.

Guide

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.

Guide

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.

Guide

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.

Guide

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.

Guide

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.

Guide

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.

Guide

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.

Guide

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.

Guide

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.

Guide

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.

Guide

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.

Guide

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.

Guide

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.

Guide

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.

Guide

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.

Guide

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.

Guide

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.

Guide

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.

Guide

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.

Guide

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.

Guide

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.

Guide

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.

Guide

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.

Guide

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.

Guide

How to Present Designs to Stakeholders

How to present design work effectively — choosing fidelity, using Figma presentation mode, managing feedback, and running async reviews.

Guide

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.

Guide

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.

Guide

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.

Guide

How to Switch from Sketch to Figma

A practical migration guide — importing Sketch files, mapping Symbols to Components, moving team libraries, and comparing pricing.

Guide

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.

Guide

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.

Guide

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.

Guide

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.

Guide

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.

Guide

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.

Guide

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.

Guide

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.

Guide

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.

Guide

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.

Guide

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.

Guide

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.

Guide

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.

Guide

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.

Guide

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.