§ 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 (117)
- 01Guide 8m Jul 10
Designing team member roles and permissions UI in Figma: invites, RBAC, and admin settings
Design team member roles and permissions UI in Figma with invite flows, role pickers, permission matrices, seat management, and Dev Mode specs for B2B admin settings.
- 02Guide 8m Jul 10
Designing webhooks and event subscriptions UI in Figma: endpoints, secrets, retries, and delivery logs
Design webhooks and event subscription UI in Figma with endpoint setup, signing secrets, event pickers, delivery logs, retry states, and Dev Mode specs for developer integrations.
- 03Guide 7m Jul 09
Designing API keys and personal access tokens UI in Figma: scopes, rotation, and developer security settings
Design API keys and personal access tokens UI in Figma with create/revoke flows, scope pickers, one-time secret display, rotation, and Dev Mode specs for developer security settings.
- 04Guide 8m Jul 09
Designing suspicious login alerts and account recovery UI in Figma: fraud signals, lockouts, and secure reset flows
Design suspicious login alerts and account recovery UI in Figma with fraud banners, step-up verification, lockout screens, and Dev Mode specs for account takeover response flows.
- 05Guide 7m Jul 08
Designing active sessions and device management UI in Figma: trusted devices, sign out everywhere, and session lists
Design active sessions and device management UI in Figma with session lists, trusted devices, sign-out-everywhere actions, and Dev Mode specs for account security flows.
- 06Guide 7m Jul 08
Designing audit log and security activity UI in Figma: sign-in history, alerts, and account event feeds
Design audit log and security activity UI in Figma with sign-in history, password changes, export feeds, filters, and Dev Mode specs for account transparency flows.
- 07Guide 7m Jul 07
Designing session timeout and re-authentication UI in Figma: idle warnings, expired sessions, and step-up auth
Design session timeout UI in Figma with idle countdown modals, expired session screens, step-up re-auth for sensitive actions, and Dev Mode specs for account security flows.
- 08Guide 8m Jul 07
Designing SSO and enterprise login UI in Figma: domain discovery, IdP buttons, and admin setup
Design SSO and enterprise login UI in Figma with email domain discovery, SAML/OIDC sign-in, IdP selection, admin setup wizards, and Dev Mode specs for B2B auth flows.
- 09Guide 7m Jul 06
Designing connected accounts and OAuth linking UI in Figma: social sign-in, app permissions, and unlink flows
Design connected accounts UI in Figma with linked Google/Apple providers, third-party app permissions, OAuth consent screens, unlink confirmations, and Dev Mode handoff.
- 10Guide 8m Jul 06
Designing passkeys and passwordless login UI in Figma: WebAuthn setup, biometrics, and sign-in flows
Design passkey and passwordless login UI in Figma with WebAuthn enrollment, biometric prompts, device lists, fallback flows, and Dev Mode specs for modern auth.
- 11Guide 7m Jul 05
Designing privacy settings and data management UI in Figma: download data, delete account, and consent
Design privacy settings UI in Figma with data download, account deletion, cookie preferences, consent toggles, and Dev Mode specs for GDPR and account compliance flows.
- 12Guide 8m Jul 05
Designing two-factor authentication and security settings UI in Figma: MFA setup, backup codes, and trusted devices
Design 2FA and security settings UI in Figma with authenticator setup, SMS backup, recovery codes, trusted devices, password change, and Dev Mode specs for account security.
- 13Guide 7m Jul 04
Designing email verification and OTP UI in Figma: codes, links, states, and handoff
Design email verification and OTP UI in Figma with 6-digit codes, magic links, resend timers, expired states, and Dev Mode specs for signup and checkout flows.
- 14Guide 7m Jul 04
Designing notification preferences and communication settings UI in Figma: channels, toggles, and compliance
Design notification preferences UI in Figma with email, SMS, and push toggles, marketing vs transactional categories, unsubscribe flows, and Dev Mode specs for account settings.
- 15Guide 6m Jul 03
Designing guest checkout and account creation UI in Figma: friction, prompts, and post-purchase handoff
Design guest checkout and account creation UI in Figma with email-only guest paths, optional sign-up prompts, post-purchase account offers, and Dev Mode specs for conversion.
- 16Guide 7m Jul 03
Designing login, registration, and password recovery UI in Figma: auth flows, states, and handoff
Design login, sign-up, and password recovery UI in Figma with email/password forms, social auth buttons, MFA states, and Dev Mode specs for ecommerce account gates.
- 17Guide 7m Jul 02
Designing account dashboard and my account UI in Figma: navigation, orders, and settings handoff
Design my account dashboards in Figma with sidebar nav, order snapshots, profile settings, subscription links, and Dev Mode specs for logged-in ecommerce flows.
- 18Guide 7m Jul 02
Designing mini cart and cart drawer UI in Figma: slide-over patterns, line items, and handoff
Design mini cart and cart drawer UI in Figma with slide-over panels, line items, quantity controls, subtotals, and Dev Mode specs that pair with checkout and shipping bars.
- 19Guide 6m Jul 01
Designing product variant selectors and swatches UI in Figma: color, size, and handoff
Design color swatches, size pickers, dropdown variant selectors, and out-of-stock states in Figma with component variants and Dev Mode specs for ecommerce PDP teams.
- 20Guide 7m Jul 01
Designing subscription and recurring purchase UI in Figma: frequency, pricing, and handoff
Design subscribe-and-save toggles, delivery frequency selectors, subscription cart lines, and manage-subscription screens in Figma with variants and Dev Mode specs.
- 21Guide 6m Jun 30
Designing bundle deals and upsell UI in Figma: kits, frequently bought together, and handoff
Design product bundles, kit builders, frequently bought together rails, cart upsells, and bundle pricing UI in Figma with component variants and Dev Mode specs for ecommerce teams.
- 22Guide 6m Jun 30
Designing order confirmation and thank you page UI in Figma: receipts, next steps, and handoff
Design order confirmation pages, thank-you receipts, email capture, tracking CTAs, and post-purchase upsells in Figma with component variants and Dev Mode specs for ecommerce teams.
- 23Setup 7m Jun 29
Designing buy now, pay later and installment UI in Figma: checkout, PDP, and payment handoff
Design buy now pay later badges, installment breakdowns, checkout selectors, and payment handoff UI in Figma with component variants and Dev Mode specs for ecommerce teams.
- 24Guide 7m Jun 29
Designing product reviews and Q&A UI in Figma: ratings, filters, and submission flows
Design star ratings, review lists, photo uploads, Q&A threads, and verified-buyer submission flows in Figma with component variants and Dev Mode specs for ecommerce PDP teams.
- 25Guide 7m Jun 28
Designing loyalty programs and rewards UI in Figma: points, tiers, and checkout redemption
Design loyalty points, tier badges, earn-and-burn flows, and checkout redemption UI in Figma with component variants, balance states, and Dev Mode specs for ecommerce teams.
- 26Guide 8m Jun 28
Designing store locator and pickup UI in Figma: map, inventory, and checkout handoff
Design store locator maps, pickup-in-store selectors, BOPIS checkout steps, and inventory badges in Figma with component variants and Dev Mode specs for omnichannel retail.
- 27Guide 6m Jun 27
Designing category landing pages in Figma: hero, subcategories, and PLP handoff
Design ecommerce category landing pages in Figma with hero banners, subcategory grids, featured collections, and PLP transitions—plus responsive layouts and Dev Mode specs.
- 28Guide 6m Jun 27
Designing free shipping progress bar UI in Figma: thresholds, cart drawer, and handoff
Design free shipping progress bars for cart drawers and checkout in Figma with threshold math, milestone states, promo stacking, and Dev Mode specs engineers can ship.
- 29Guide 7m Jun 26
Designing product image gallery and zoom UI in Figma: thumbnails, lightbox, and handoff
Design PDP image galleries, thumbnail rails, pinch-zoom lightboxes, and 360° placeholders in Figma with variant sync, lazy load states, and Dev Mode specs.
- 30Guide 6m Jun 26
Designing recently viewed products UI in Figma: rails, persistence, and handoff
Design recently viewed product rails, homepage strips, and empty states in Figma with local vs server persistence, card reuse, and Dev Mode specs for PDP recirculation.
- 31Guide 6m Jun 25
Designing flash sale and countdown timer UI in Figma: urgency, badges, and handoff
Design flash sale banners, PDP countdown timers, and promo urgency UI in Figma with sale states, timezone rules, and Dev Mode specs for PLP and checkout.
- 32Guide 7m Jun 25
Designing product quick view UI in Figma: modal patterns, variants, and handoff
Design quick view modals, quick shop drawers, and PLP preview UI in Figma with variant pickers, ATC states, and Dev Mode specs that match full PDP behavior.
- 33Guide 6m Jun 24
Designing size guides and size selector UI in Figma: charts, fit hints, and handoff
Design size charts, fit recommendation copy, and size selector components in Figma with validation states, modal layouts, and Dev Mode specs for fashion and footwear PDP.
- 34Guide 6m Jun 24
Designing sticky add-to-cart bar UI in Figma: scroll behavior, variants, and handoff
Design sticky buy bars, mobile ATC footers, and scroll-triggered purchase UI in Figma with variant summary, price, and Dev Mode specs for long PDP layouts.
- 35Guide 7m Jun 23
Designing back-in-stock and notify me UI in Figma: alerts, email capture, and handoff
Design out-of-stock states, notify-me modals, waitlist email capture, and restock badges in Figma with validation, consent copy, and Dev Mode specs for ecommerce.
- 36Guide 7m Jun 23
Designing product recommendations UI in Figma: rails, bundles, and handoff
Design you-may-also-like carousels, frequently bought together bundles, and personalized recommendation rails in Figma with component variants and Dev Mode specs.
- 37Guide 7m Jun 22
Designing compare products UI in Figma: tables, sticky headers, and handoff
Design product comparison tables, sticky attribute columns, add-to-compare chips, and mobile compare drawers in Figma with variants and Dev Mode specs for ecommerce.
- 38Guide 8m Jun 22
Designing payment methods UI in Figma: cards, wallets, BNPL, and handoff
Design credit card forms, saved payment methods, digital wallets, and BNPL options in Figma with PCI-safe patterns, validation states, and Dev Mode specs for checkout.
- 39Guide 8m Jun 21
Designing saved addresses and address book UI in Figma: checkout, defaults, and handoff
Design address book, saved shipping addresses, and checkout address pickers in Figma with default badges, validation states, and Dev Mode specs for ecommerce delivery flows.
- 40Guide 8m Jun 20
Designing coupons and promo codes UI in Figma: discounts, validation, and handoff
Design promo code inputs, applied discounts, coupon cards, and cart totals in Figma with validation states, stacking rules, and Dev Mode specs for ecommerce checkout.
- 41Guide 8m Jun 20
Designing returns and refunds UI in Figma: wizard, labels, and handoff
Design return wizards, reason pickers, refund timelines, and label downloads in Figma with status badges, partial returns, and Dev Mode specs for post-purchase flows.
- 42Guide 7m Jun 19
Designing order history and order tracking UI in Figma: status, timeline, and handoff
Design order history lists, detail pages, shipment timelines, and reorder flows in Figma with status badges, tracking links, and Dev Mode specs for post-purchase UX.
- 43Guide 7m Jun 19
Designing wishlist and save-for-later UI in Figma: hearts, lists, and handoff
Design wishlist hearts, saved-item lists, move-to-cart actions, and empty states in Figma with component variants, guest vs signed-in flows, and Dev Mode specs.
- 44Guide 8m Jun 18
Designing product detail pages in Figma: gallery, variants, and handoff
Design PDP galleries, variant pickers, sticky buy boxes, and trust modules in Figma with component variants, responsive layouts, and Dev Mode specs for ecommerce.
- 45Guide 7m Jun 18
Designing product listing and grid UI in Figma: filters, sort, and handoff
Design PLP grids, list views, filters, sort controls, and skeleton loading in Figma with reusable components, responsive breakpoints, and Dev Mode specs for ecommerce.
- 46Guide 7m Jun 17
Designing price tags and pricing UI in Figma: sale, compare-at, and handoff
Design sale prices, compare-at strikethroughs, currency formatting, and tiered pricing in Figma with variants, tokens, and Dev Mode specs for ecommerce and SaaS.
- 47Guide 7m Jun 17
Designing shopping cart and checkout UI in Figma: line items, totals, and handoff
Design cart drawers, line items, quantity steppers, promo codes, and checkout steps in Figma with variants, empty states, and Dev Mode specs for ecommerce flows.
- 48Guide 6m Jun 16
Designing breadcrumbs in Figma: hierarchy, truncation, and handoff
Design breadcrumb navigation in Figma with separators, truncation, mobile collapse, current-page treatment, and Dev Mode specs engineers can implement without guessing.
- 49Guide 6m Jun 16
Designing rating stars and review UI in Figma: patterns, states, and handoff
Design star ratings, half-stars, review cards, and interactive score input in Figma with accessible states, variants, and Dev Mode specs for ecommerce and SaaS.
- 50Guide 7m Jun 15
Designing segmented controls and radio groups in Figma: patterns, states, and handoff
Design segmented controls and radio button groups in Figma with exclusive selection, responsive layouts, icon+label segments, and Dev Mode specs for settings and forms.
- 51Guide 7m Jun 15
Designing toggle switches and checkboxes in Figma: states, groups, and handoff
Design toggle switches and checkboxes in Figma with on/off states, indeterminate, grouped layouts, form validation, and Dev Mode specs engineers can ship without guessing.
- 52Guide 8m Jun 14
Designing combobox and autocomplete UI in Figma: patterns, states, and handoff
Design comboboxes, typeahead search, and multi-select autocomplete in Figma with list states, empty results, async loading, and Dev Mode specs for forms and filters.
- 53Guide 7m Jun 14
Designing sliders and range inputs in Figma: patterns, states, and handoff
Design single and dual-thumb sliders, stepped ranges, and value labels in Figma with track states, min/max bounds, and Dev Mode specs for forms and filters.
- 54Guide 9m Jun 13
Designing date pickers and calendar UI in Figma: patterns, states, and handoff
Design date pickers, range selectors, and calendar grids in Figma with input states, presets, timezone notes, and Dev Mode specs for forms and filters.
- 55Guide 8m Jun 13
Designing file upload and drag-drop UI in Figma: patterns, states, and handoff
Design file upload zones, drag-drop states, progress bars, and error handling in Figma with size limits, multi-file queues, and Dev Mode specs for forms.
- 56Guide 8m Jun 12
Designing avatars and user profile UI in Figma: sizes, states, and handoff
Design avatar components and user profile UI in Figma with size scales, status indicators, fallback initials, groups, and Dev Mode specs for nav and settings.
- 57Guide 8m Jun 12
Designing sidebars and navigation drawers in Figma: patterns, states, and handoff
Design persistent sidebars and off-canvas navigation drawers in Figma with collapsed states, nested nav, mobile breakpoints, and Dev Mode specs for engineers.
- 58Guide 7m Jun 11
Designing accordions and collapsible panels in Figma: patterns, states, and handoff
Design accordion and collapsible panel components in Figma with expand/collapse states, single vs multi-open rules, keyboard specs, and Dev Mode handoff for settings and FAQs.
- 59Guide 8m Jun 11
Designing search UI in Figma: bars, filters, and results
Design search bars, autocomplete, filters, and results layouts in Figma with component variants, empty and loading states, and Dev Mode specs for tables and global search.
- 60Guide 7m Jun 10
Designing pagination in Figma: patterns, states, and handoff
Design pagination components in Figma with page controls, rows-per-page selectors, compact vs full layouts, and Dev Mode specs for tables and search results.
- 61Guide 8m Jun 10
Designing progress indicators and steppers in Figma: patterns, states, and handoff
Design linear progress bars, circular spinners, and multi-step steppers in Figma with determinate vs indeterminate states, labels, and Dev Mode handoff specs.
- 62Guide 7m Jun 09
Designing loading states and skeleton screens in Figma: patterns, timing, and handoff
Design skeleton loaders and loading states in Figma with shimmer variants, content placeholders, spinners, and Dev Mode specs so engineers ship the right wait experience.
- 63Guide 7m Jun 08
Designing empty states in Figma: illustrations, copy, and handoff
Design empty state components in Figma with illustration slots, headline and body copy, primary CTAs, and layout variants for tables, search, and dashboards.
- 64Guide 7m Jun 08
Designing toasts and snackbars in Figma: patterns, timing, and handoff
Design toast and snackbar components in Figma with tone variants, auto-dismiss timing, action slots, stacking rules, and Dev Mode specs so notifications ship correctly.
- 65Guide 7m Jun 07
Designing badges and chips in Figma: status tags, filters, and handoff
Build badge and chip components in Figma with status colors, filter states, dismissible tags, and semantic tokens so tags and labels hand off cleanly to code.
- 66Guide 7m Jun 07
Designing tooltips and popovers in Figma: placement, triggers, and handoff
Design tooltip and popover components in Figma with placement rules, delay specs, focus traps for popovers, and Dev Mode notes so overlays ship correctly in code.
- 67Guide 6m Jun 05
Designing navigation and tabs in Figma: patterns, states, and handoff
Design nav bars, sidebars, and tab bars in Figma with correct states, auto layout, safe areas, and Dev Mode specs engineers can implement without guessing.
- 68Guide 6m Jun 05
Figma tables and data UI: rows, columns, sorting, and handoff
Build scalable tables in Figma with row components, column alignment, sticky headers, empty states, and Dev Mode specs so data-heavy screens hand off cleanly.
- 69Guide 6m Jun 04
Designing modals and dialogs in Figma: overlays, focus traps, and handoff
Build modal and dialog UI in Figma with scrims, size tokens, component variants, and prototype flows—plus specs engineers need for focus, dismiss, and stacking.
- 70Guide 6m Jun 04
Figma boolean operations: unite, subtract, intersect, and exclude for icons and UI
Master Figma boolean operations to build icons, badges, and custom shapes—when to flatten, how to keep vectors editable, and export rules for crisp SVG handoff.
- 71Guide 6m Jun 03
Figma Gradients and Fills for UI: Linear, Radial, and Token-Safe Patterns
Build linear, radial, and angular gradients in Figma, bind fills to variables, and hand off UI backgrounds engineers can implement without one-off hex chaos.
- 72Prototyping 5m Jun 03
Figma Sections: Organize Pages, Prototype Flows, and Hand Off Without Chaos
Use Figma sections to group screens on a page, label prototype flows, and keep multiplayer files readable—plus naming rules that scale with your team library.
- 73Guide 6m Jun 02
Figma Effects for UI: Shadows, Blur, and Elevation Without Handoff Surprises
Build a small elevation scale with drop shadows, layer blur, and background blur in Figma—plus tokens, dark mode, and Dev Mode notes engineers can implement.
- 74Guide 6m Jun 02
Figma Layout Grids: Columns, Baseline, and 8pt Spacing That Scale
Set column, row, and baseline grids in Figma, align to an 8pt spacing system, and hand off layouts engineers can map to CSS grid—without fighting Auto Layout.
- 75Guide 6m Jun 01
Figma Masks and Clipping: A Practical Guide for Images, Icons, and UI Shapes
Use Figma masks, clip content, and alpha masks correctly for avatars, hero images, and icons—plus export tips so crops do not break in dev handoff.
- 76Systems 6m Jun 01
How to Use Figma Team Libraries and Shared Components (Publish, Update, Consume)
Publish a Figma team library, enable it on projects, accept updates safely, and avoid broken instances—plus naming and permission patterns for design systems.
- 77Prototyping 6m May 31
Wireframing in Figma: Low-Fidelity Patterns and a Speed Workflow
Wireframe faster in Figma with grayscale kits, layout grids, component placeholders, and a clear handoff path to hi-fi UI—without polishing pixels too early.
- 78Systems 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.
- 79Setup 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.
- 80Systems 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.
- 81Systems 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.
- 82Guide 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.
- 83Systems 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.
- 84Guide 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.
- 85Guide 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.
- 86Guide 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.
- 87Prototyping 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.
- 88Guide 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.
- 89Guide 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.
- 90Guide 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.
- 91Guide 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.
- 92Guide 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.
- 93Prototyping 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.
- 94Career 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.
- 95Prototyping 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.
- 96Guide 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.
- 97Guide 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.
- 98Guide 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.
- 99Guide 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.
- 100Systems 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.
- 101Guide 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.
- 102Guide 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.
- 103Guide 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.
- 104Guide 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.
- 105Guide 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.
- 106Guide 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.
- 107Guide 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.
- 108Guide 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.
- 109Guide 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.
- 110Setup 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.
- 111Guide 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.
- 112Prototyping 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.
- 113Career 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.
- 114Logo 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.
- 115Prototyping 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.
- 116Setup 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.
- 117Setup 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.