§ Hub
Figma guides — setup, workflows & tutorials
Evergreen how-tos: installing Figma, fonts, prototyping, logos, and everyday workflows. Start here when you need steps that match the current product.
Other hubs
Essential reads
In this hub (40)
- 01Systems 5m May 30
Figma Components and Variants: A Practical Guide for Real Product Files
Learn Figma components, instances, variants, and component properties with naming, nesting, and publishing patterns that scale to dev handoff.
- 02Setup 5m May 30
How to Install Figma on Linux (Desktop App, Browser, and Fonts)
Install Figma on Linux with the official desktop app, browser workflow, font helpers, and troubleshooting for Ubuntu, Fedora, and other distros.
- 03Systems 5m May 29
Figma Color System: Semantic Tokens, Palettes, and Modes That Do Not Break
Build a Figma color system with base palettes, semantic tokens, light/dark modes, and contrast checks—so components stay themeable and handoff stays consistent.
- 04Systems 5m May 29
Figma Dev Mode for Designers: A Handoff Checklist That Engineers Actually Use
Prepare Figma files for Dev Mode: component hygiene, descriptions, variables, export marks, and review rituals so inspect data matches what engineering ships.
- 05Guide 6m May 28
Designing forms in Figma: inputs, validation states, and handoff that engineers trust
Design accessible form UI in Figma: field anatomy, error/focus/disabled states, component variants, auto layout, and spec tables so devs ship the right behavior.
- 06Systems 6m May 28
Figma typography: type scales, text styles, and variables that stay in sync
Build a typography system in Figma: modular scales, text styles, line height rules, variable modes, and handoff notes so type does not drift across files.
- 07Guide 6m May 27
How to import Sketch files into Figma without breaking your design system
Migrate from Sketch to Figma the right way: .sketch import, symbol mapping, font swaps, plugin gaps, and a cleanup checklist before you merge files into your team library.
- 08Guide 6m May 27
Responsive design in Figma: constraints, breakpoints, and frames that resize honestly
Design layouts that survive real breakpoints: constraints vs auto layout, min/max widths, breakpoint frames, and handoff notes so engineers do not guess your intent.
- 09Guide 7m May 26
The JustFigma toolkit (2026): curated guides, plugins, and comparisons
One bookmark for the best JustFigma guides: setup, plugins, handoff, design systems, comparisons, and exports—organized by job-to-be-done with quick picks for beginners and teams.
- 10Prototyping 7m May 25
Animation in Figma prototypes: limits, patterns, and when to stop animating
Learn what Figma prototypes can animate well (Smart Animate, easing, overlays) and where they break down—plus patterns for micro-interactions, page transitions, and handoff.
- 11Guide 5m May 25
Mid-quarter Figma ecosystem digest (May 2026): what shipped and what to do next
A mid-quarter roundup of Figma platform shifts, plugin trends, and team workflows—what changed since March, who it affects, and which JustFigma guides to read next.
- 12Guide 6m May 24
Figma multiplayer etiquette: branching, comments, and library updates without chaos
Keep Figma multiplayer civil: when to branch, how to write anchored comments, library publish rituals, and team rules that stop silent overwrites and duplicate components.
- 13Guide 6m May 24
Importing from Illustrator to Figma: SVG cleanup that survives dev handoff
Bring Illustrator art into Figma without broken paths: export settings, paste vs SVG import, boolean cleanup, stroke expansion, and a checklist before you hand assets to engineering.
- 14Guide 7m May 23
Dark Mode Design in Figma: Tokens & Preview Tricks
Ship dark mode in Figma without guesswork: semantic color tokens, mode switching, contrast checks, preview tricks, and a migration checklist designers can run today.
- 15Guide 7m May 22
Best Notion × Figma Workflow Stack for Designers (2026)
Connect Notion and Figma without chaos: briefs, specs, research repos, dev handoff, and plugin picks—plus when to keep work in Figma only and how we evaluate tools.
- 16Prototyping 6m May 22
Password-Protected Prototypes & Share Links: Security Basics in Figma
Share Figma prototypes safely: password gates, view vs edit links, org policies, expiring access, and team norms that stop accidental leaks of unreleased UI.
- 17Career 7m May 20
Best Figma Courses for UI/UX (2026): How We Evaluate Them
Compare the best Figma courses for UI/UX in 2026—mentorship vs self-paced, cost, portfolio outcomes, and when free practice is enough before you pay.
- 18Prototyping 5m May 20
Interactive components in Figma: hover, pressed, and disabled states that survive handoff
Model hover, pressed, focus, and disabled UI in Figma using variants, component properties, and prototype triggers—without breaking dev handoff or prototype previews.
- 19Guide 7m May 20
Working With Figma in the Browser: Limitations & Performance (2026)
Use Figma in Chrome, Safari, or Edge without surprises: font limits, plugin policy, large-file performance, offline behavior, and when to switch to the desktop app.
- 20Guide 6m May 19
Biggest Figma Mistakes Beginners Make (and How to Fix Them)
The Figma habits that waste the most time for new designers—detached copies, mystery frames, plugin overload, and handoff surprises—with fixes you can apply in your next file.
- 21Guide 7m May 19
Print Design Checklist in Figma: Bleed, Margins, and Export
Print-ready Figma files: bleed, safe margins, DPI, color, trim marks, and PDF export settings—plus a checklist vendors and print shops actually expect.
- 22Guide 7m May 19
Social Media Image Sizes Cheat Sheet (with Figma Frame Presets)
2026 social image dimensions for Instagram, LinkedIn, X, YouTube, and Facebook—plus how to set up reusable Figma frames, safe zones, and export settings so posts stay sharp.
- 23Systems 7m May 18
Best Figma UI kits & design systems to start fast (2026): picks by stack
Skip kit roulette: compare Untitled UI, Material 3, Flowbite, Frames, and Polaris-style starters with honest best-for tables, pricing reality checks, and when to build your own tokens first.
- 24Guide 6m May 17
How to organize a Figma file so it scales (pages, covers, naming)
Stop chaotic Figma files: a practical system for page order, cover frames, component prefixes, archives, and handoff hygiene that survives multiplayer, new hires, and shipping pressure.
- 25Guide 5m May 16
Fix Blurry Exports and Wrong Dimensions in Figma
Stop soft PNGs, mis-sized frames, and surprise crops: diagnose export scale, constraints, pixel preview, and handoff checks so assets match engineering and print specs.
- 26Guide 5m May 16
Slide Decks in Figma: Layout, Grids, and Presenting Modes
Build keynote-ready decks in Figma: slide masters, 16:9 frames, type scales, grid systems, speaker notes patterns, and prototype present mode—without fighting the canvas.
- 27Guide 6m May 14
Mobile App UI in Figma: Frame Presets, Safe Areas, and a Practical Layout Workflow
Set up iPhone and Android frames, status bars, notches, and safe areas in Figma—plus grids, auto layout patterns, and export checks so mobile screens stay consistent from design to build.
- 28Guide 4m May 13
Figma quarterly check-in: what changed + what to update in your files
A practical quarterly routine for Figma teams: which release notes matter, what to audit in libraries and variables, and how to keep files aligned with 2026 product changes.
- 29Guide 7m May 12
How to Export Production-Ready Assets from Figma (PNG, SVG, PDF)
Export crisp PNG and JPEG, clean SVG icons, and print-ready PDFs from Figma: scale modes, slice settings, SVG options, and handoff checks that prevent blurry or oversized files.
- 30Guide 6m May 11
Figma Auto Layout in Practice: Real Patterns, Not Theory
Use Auto Layout like a senior designer: card stacks, toolbars, responsive rows, hug vs fill, gaps, and the mistakes that make files fragile.
- 31Guide 5m May 11
Variables & Modes in Figma: A Designer-First Explainer
Learn Figma Variables without the jargon storm: collections, modes, aliases, binding to components, and when Variables beat classic styles.
- 32Guide 6m May 10
Figma Keyboard Shortcuts: 25 That Save Hours
The Figma shortcuts worth memorizing in 2026: selection, frames, Auto Layout, text, components, and prototyping—Mac and Windows, plus how to practice them.
- 33Setup 6m May 09
How to Install Figma on Mac (Desktop App & Browser) 2026
Install Figma on macOS with the desktop app or browser: download steps, Gatekeeper fixes, fonts, Apple Silicon notes, and troubleshooting.
- 34Guide 7m May 06
Figma May 2026 Updates: AI Agents, Custom Skills, Mobile Make & More
A practical breakdown of Figma’s May 2026 updates: MCP AI agents, Custom Skills in Make, mobile Make previewing, ChatGPT Images 2.0, Draw improvements, and performance gains.
- 35Prototyping 6m Jan 04
Creating Interactive Carousels in Figma: A Step-by-Step Guide (2026)
Build an interactive carousel in Figma with frames, dot indicators, prototype links, swipe behavior, and component-based handoff tips.
- 36Career 10m Oct 15
UI/UX Design Figma Crash Course Syllabus by Designlab (2026 Review)
Review Designlab’s Figma-focused UI/UX course in 2026, including syllabus, time commitment, cost considerations, alternatives, and who it fits.
- 37Logo 8m Sep 20
How to Design a Modern Logo Using Figma (Step-by-Step Guide)
Design a modern logo in Figma with vector tools, grids, wordmarks, icon marks, color rules, and export settings for real brand use.
- 38Prototyping 8m Aug 01
How to Use Figma to Create a Prototype (Step-by-Step)
Learn how to create clickable Figma prototypes with flows, transitions, overlays, gestures, and handoff tips for realistic testing.
- 39Setup 6m Jul 31
How to Install Figma on Windows (Desktop App & Browser) 2026
Install Figma on Windows 10 or 11 with desktop and browser options, font setup notes, troubleshooting, and next steps for beginners.
- 40Setup 6m Jul 15
How to Install Figma Fonts in Your Figma File (2026 Guide)
Install and troubleshoot custom fonts in Figma on Windows and Mac with Font Installer steps, browser notes, and common missing-font fixes.