§ Index
Every tutorial,
in one place.
Filter by topic or level, search by keyword. 217 guides total — sorted newest first.
This index lists the tutorials we recommend, with no paywall or course funnel. For topic hubs that group related articles for crawling and reading paths, use the pillars below — each maps to a focused slice of the catalog (guides, plugins, layout projects, comparisons, and more).
Hubs: Guides Plugins Templates Alternatives Comparisons /figma-tutorials/ → index
- 01Guide Intermediate 6m Oct 01
Figma Sites: Publish a Marketing Page
Publish a marketing page in Figma Sites when Figma can host it. Finish the page first. Use Framer or your own code when the site must leave Figma.
- 02Guide Intermediate 5m Sep 30
Designing a command palette in Figma
Design a command palette in Figma: the trigger, grouped results, keyboard behavior, and the empty state when nothing matches.
- 03Guide Intermediate 4m Sep 30
Designing a notification inbox in Figma
Design a notification inbox in Figma: unread, time groups, mark as read, and how an inbox differs from a toast.
- 04Guide Intermediate 4m Sep 30
Designing comments and mentions in Figma
Design comment threads and @mentions in Figma: composer, replies, resolved state, and what engineering needs in the handoff.
- 05Guide Intermediate 4m Sep 30
Designing product onboarding in Figma
Design first-run onboarding in Figma: checklist, stepper, or empty state, and when to skip the tour.
- 06Guide Intermediate 3m Sep 30
Figma to Code: Dev Mode, Plugins, and Site Builders
Compare Figma Dev Mode, code-export plugins, Framer, and Webflow. Use each one for a different job, and do not ship generated components as the product.
- 07Guide Intermediate 4m Sep 30
Figma to Framer: How to Ship a Marketing Page
Move a marketing page from Figma to Framer without treating paste as the site. What to prepare, what to rebuild, and when to stay in Figma.
- 08Guide Intermediate 4m Sep 30
Figma to Webflow: When to Rebuild a Marketing Site There
Use Figma as the spec and Webflow as the site. When Webflow fits better than Framer, what you rebuild as classes, and what to leave for engineering.
- 09Guide Beginner 4m Sep 30
Figma version history: name a version and restore one
Name a Figma version before a risky edit, restore an earlier one without losing the timeline, and tell that apart from a branch.
- 10Guide Intermediate 5m Sep 30
Figma vs Canva (2026): Product UI or Marketing Graphics
Figma vs Canva in 2026: use Figma for product UI and handoff, Canva for social and decks. What overlaps, what does not transfer, and when to keep both.
- 11Guide Intermediate 3m Sep 30
What to finish in Figma before Dev Mode
Finish scope, copy, names, and the states Inspect cannot see before engineering opens Dev Mode. Then use the handoff checklist.
- 12Guide Beginner 3m Sep 30
When to use FigJam instead of a design file
Use FigJam for the workshop. Use a design file for the screens, components, and handoff. Move a decision across when it becomes UI.
- 13Guide Intermediate 8m Aug 17
Designing privacy incident severity classification and triage UI in Figma: scoring rubrics, queues, and escalation paths
Design privacy incident severity classification UI in Figma with scoring rubrics, triage queues, auto-escalation rules, and handoff for privacy and security teams.
- 14Guide Intermediate 7m Aug 16
Designing privacy impact remediation tracking and action plan UI in Figma: DPIA findings, owners, and launch gates
Design privacy impact remediation tracking UI in Figma with DPIA finding tickets, action owners, due dates, launch gate blocks, and handoff for privacy-by-design teams.
- 15Guide Intermediate 7m Aug 15
Designing privacy request queue and case management UI in Figma: DSAR, erasure, objection, and SLA tracking
Design privacy request queue and case management UI in Figma with unified DSAR, erasure, and objection tickets, SLA timers, identity verification, and handoff for privacy ops teams.
- 16Guide Intermediate 7m Aug 15
Designing proof of deletion and audit trail UI in Figma: receipts, downstream jobs, and regulator-ready logs
Design proof of deletion and audit trail UI in Figma with completion receipts, downstream job tracking, immutable audit entries, and handoff for GDPR erasure verification.
- 17Guide Intermediate 8m Aug 14
Designing objection and restrict processing UI in Figma: pause use, legal bases, and feature limits
Design objection and restrict processing UI in Figma with purpose-level controls, legitimate-interest objections, processing freeze banners, and handoff for GDPR Art. 18 and Art. 21 rights.
- 18Guide Intermediate 8m Aug 14
Designing right to erasure and deletion request UI in Figma: scope, exceptions, and proof of deletion
Design right to erasure and deletion request UI in Figma with scoped deletion, legal-hold exceptions, downstream job tracking, and proof-of-deletion receipts for GDPR and global privacy laws.
- 19Guide Intermediate 8m Aug 13
Designing data accuracy and rectification rights UI in Figma: correction flows, source of truth, and dispute resolution
Design data accuracy and rectification rights UI in Figma with self-service correction flows, source-of-truth badges, verification gates, and admin dispute queues that satisfy GDPR Article 16.
- 20Guide Intermediate 7m Aug 13
Designing special category and sensitive personal data consent UI in Figma: explicit consent, layered notices, and withdrawal
Design special category and sensitive personal data consent UI in Figma with explicit opt-in, purpose-specific notices, granular toggles, and withdrawal flows for health, biometric, and similar data.
- 21Guide Intermediate 7m Aug 12
Designing anonymization and pseudonymization controls UI in Figma: keys, rotation, and re-identification risk
Design anonymization and pseudonymization controls UI in Figma with key vaults, rotation schedules, re-identification risk dashboards, and admin policies that separate identifiers from analytics.
- 22Guide Intermediate 7m Aug 12
Designing data minimization and purpose limitation UI in Figma: collection gates, field budgets, and drift alerts
Design data minimization and purpose limitation UI in Figma with collection gates, per-feature field budgets, purpose tags, and drift alerts that stop teams from collecting more than they need.
- 23Guide Intermediate 7m Aug 11
Designing data portability and machine-readable export UI in Figma: formats, scopes, and delivery
Design GDPR and CPRA data portability export UI in Figma with format pickers, scope selection, machine-readable JSON bundles, and secure delivery flows for DSAR and self-service.
- 24Guide Intermediate 6m Aug 11
Designing privacy-preserving analytics and aggregation controls UI in Figma: k-anonymity, noise, and consent gates
Design privacy-preserving analytics UI in Figma with aggregation thresholds, differential privacy toggles, consent gates, and admin dashboards that prevent re-identification in product metrics.
- 25Layout Intermediate 7m Aug 10
Designing AI model cards and system documentation UI in Figma: capabilities, limits, and compliance
Design AI model cards and system documentation UI in Figma with capability limits, training data summaries, risk tiers, and EU AI Act-ready transparency panels for product and trust teams.
- 26Guide Intermediate 7m Aug 10
Designing consent withdrawal and downstream deletion UI in Figma: cascades, confirmations, and audit trails
Design consent withdrawal and downstream deletion UI in Figma with cascade previews, grace periods, marketing vs analytics scopes, and audit-ready confirmation flows for GDPR and CCPA.
- 27Guide Intermediate 8m Aug 09
Designing AI training opt-out and model data usage transparency UI in Figma: controls, notices, and enterprise policies
Design AI training opt-out UI in Figma with model data usage notices, workspace-level policies, content exclusion controls, and transparency panels for generative AI and ML products.
- 28Guide Intermediate 8m Aug 09
Designing biometric data collection consent and processing transparency UI in Figma: liveness, templates, and lawful basis
Design biometric data consent UI in Figma with liveness checks, template storage disclosure, purpose limits, retention timers, and GDPR/BIPA-style transparency for face, voice, and fingerprint flows.
- 29Guide Intermediate 9m Aug 08
Designing children's privacy, age verification, and parental consent UI in Figma: gates, guardians, and COPPA/GDPR flows
Design children's privacy UI in Figma with age gates, parental consent flows, guardian dashboards, data minimization for minors, and COPPA/GDPR-K compliance handoff patterns.
- 30Guide Intermediate 8m Aug 08
Designing privacy by design launch gates and feature privacy review UI in Figma: checklists, blockers, and sign-off
Design privacy by design launch gates in Figma with feature privacy review checklists, DPIA triggers, ROPA linkage, blocker states, and sign-off workflows for Privacy and Product teams.
- 31Guide Intermediate 9m Aug 05
Designing automated decision-making and profiling transparency UI in Figma: logic, appeals, and human review
Design automated decision-making and profiling transparency UI in Figma with logic summaries, Article 22 appeals, human review queues, and DSAR export for GDPR-compliant SaaS products.
- 32Guide Intermediate 9m Aug 05
Designing privacy notice version management and policy changelog UI in Figma: versions, diffs, and consent linkage
Design privacy notice version management UI in Figma with policy diffs, jurisdiction routing, consent linkage, re-consent triggers, and audit exports for Privacy and Legal teams.
- 33Guide Intermediate 9m Aug 04
Designing consent records and preference management admin UI in Figma: proof, purposes, and audit trails
Design consent records and preference management admin UI in Figma with purpose-level proof, CMP sync, withdrawal logs, lawful basis linkage, and DSAR evidence for Privacy teams.
- 34Guide Intermediate 8m Aug 04
Designing legitimate interest assessment (LIA) workflow UI in Figma: balancing tests, records, and objections
Design legitimate interest assessment workflow UI in Figma with three-part balancing tests, purpose linkage, objection handling, review cadence, and ROPA integration for Privacy teams.
- 35Guide Intermediate 9m Aug 03
Designing cross-border data transfer and SCC management UI in Figma: TIA records, vendor flows, and transfer registers
Design cross-border data transfer admin UI in Figma with SCC libraries, transfer impact assessments, vendor flow maps, adequacy flags, and DPA linkage for global Privacy teams.
- 36Guide Intermediate 8m Aug 03
Designing records of processing activities (ROPA) and data mapping UI in Figma: inventory, lawful basis, and retention
Design ROPA and data mapping admin UI in Figma with processing activity records, data flow diagrams, lawful basis tags, retention schedules, and DSAR linkage for Privacy teams.
- 37Guide Intermediate 8m Aug 02
Designing cookie consent and tracking preference UI in Figma: banners, preference centers, and CMP handoff
Design cookie consent banners, preference centers, and CMP flows in Figma with category toggles, geo rules, consent receipts, and Dev Mode specs for GDPR and ePrivacy compliance.
- 38Guide Intermediate 9m Aug 02
Designing data subject access request (DSAR) and GDPR portal UI in Figma: intake, identity verification, and fulfillment
Design DSAR and GDPR rights portals in Figma with request intake forms, identity verification, SLA tracking, fulfillment packages, and admin queues for Privacy teams.
- 39Guide Intermediate 9m Jul 31
Designing data processing agreements and subprocessor management UI in Figma: DPA workflows, change notices, and customer approvals
Design DPA and subprocessor management UI in Figma with agreement templates, customer acceptance flows, subprocessor registries, change notifications, and Legal review queues.
- 40Guide Intermediate 9m Jul 31
Designing privacy impact assessment and DPIA workflow UI in Figma: scoping, risk scoring, and approval gates
Design PIA and DPIA workflow UI in Figma with intake forms, risk scoring matrices, stakeholder review gates, mitigation tracking, and regulatory documentation exports.
- 41Guide Intermediate 10m Jul 30
Designing bug bounty and vulnerability disclosure program UI in Figma: scope, submissions, and researcher workflows
Design bug bounty and vulnerability disclosure program UI in Figma with scope rules, safe harbor, submission forms, triage queues, reward tiers, and researcher dashboards.
- 42Guide Intermediate 11m Jul 30
Designing compliance audit evidence and certification renewal UI in Figma: controls, requests, and renewal timelines
Design compliance audit evidence and certification renewal UI in Figma with control libraries, evidence requests, auditor portals, renewal countdowns, and gap remediation workflows.
- 43Guide Intermediate 9m Jul 28
Designing SLA dashboard and uptime reporting UI in Figma: targets, credits, and customer-facing reports
Design SLA dashboard and uptime reporting UI in Figma with SLO targets, error budgets, service credits, monthly reports, and customer portal exports for B2B SaaS teams.
- 44Guide Intermediate 10m Jul 28
Designing trust center and security documentation UI in Figma: certifications, policies, and request workflows
Design trust center and security documentation UI in Figma with certification badges, policy libraries, NDA-gated downloads, security questionnaire responses, and subprocessors lists.
- 45Guide Intermediate 9m Jul 27
Designing business continuity and disaster recovery planning UI in Figma: RTO/RPO, runbooks, and failover drills
Design business continuity and disaster recovery planning UI in Figma with RTO/RPO targets, dependency maps, failover runbooks, and drill tracking for enterprise resilience.
- 46Guide Intermediate 9m Jul 27
Designing customer incident status page and communication UI in Figma: components, subscriptions, and updates
Design customer-facing incident status page UI in Figma with component health, incident timelines, email/SMS templates, subscriptions, and postmortem publishing for SaaS teams.
- 47Guide Intermediate 9m Jul 26
Designing post-incident review and root cause analysis UI in Figma: timelines, five whys, and action tracking
Design post-incident review and root cause analysis UI in Figma with blameless timelines, five-whys boards, corrective actions, and executive summaries for enterprise IR.
- 48Guide Intermediate 8m Jul 25
Designing forensic evidence management and chain of custody UI in Figma: artifacts, custody, and legal hold
Design forensic evidence and chain of custody UI in Figma with artifact intake, hash verification, custody transfers, legal hold flags, and Dev Mode specs for enterprise IR.
- 49Guide Intermediate 8m Jul 25
Designing security operations shift handover and war room UI in Figma: queues, briefings, and handoff
Design SOC shift handover and war room UI in Figma with open incident queues, briefing templates, analyst assignments, and Dev Mode specs for 24/7 security operations.
- 50Guide Intermediate 8m Jul 24
Designing threat hunting queries and investigation workspace UI in Figma: pivots, timelines, and handoff
Design threat hunting query and investigation workspace UI in Figma with query builder, pivot tables, entity timelines, case notes, and Dev Mode specs for enterprise SOC admin.
- 51Guide Intermediate 8m Jul 24
Designing threat intelligence feeds and IOC management UI in Figma: feeds, blocklists, and handoff
Design threat intelligence feed and IOC management UI in Figma with feed connectors, indicator tables, blocklist sync, expiry rules, and Dev Mode specs for enterprise Security admin.
- 52Guide Intermediate 7m Jul 23
Designing security automation and response workflows UI in Figma: triggers, actions, and handoff
Design security automation and response workflow UI in Figma with trigger builders, action steps, approval gates, run history, and Dev Mode specs for enterprise Security SOAR admin.
- 53Guide Intermediate 8m Jul 23
Designing SIEM log ingestion and data source connectors UI in Figma: pipelines, parsers, and handoff
Design SIEM log ingestion and data source connector UI in Figma with source catalog, pipeline health, parser mapping, retention tiers, and Dev Mode specs for enterprise Security admin.
- 54Guide Intermediate 7m Jul 22
Designing secrets rotation and credential vault UI in Figma: storage, rotation, and handoff
Design secrets rotation and credential vault UI in Figma with encrypted storage, rotation schedules, break-glass access, audit trails, and Dev Mode specs for enterprise Security and Platform admin.
- 55Guide Intermediate 8m Jul 22
Designing security alerting rules and notification routing UI in Figma: triggers, channels, and handoff
Design security alerting rules and notification routing UI in Figma with trigger builders, severity tiers, on-call routing, suppression windows, and Dev Mode specs for enterprise Security admin.
- 56Guide Intermediate 7m Jul 21
Designing privileged access management and JIT access UI in Figma: requests, approvals, and handoff
Design privileged access management and just-in-time access UI in Figma with elevation requests, time-bound grants, approval chains, session recording, and Dev Mode specs for enterprise Security admin.
- 57Guide Intermediate 8m Jul 21
Designing security questionnaires and vendor onboarding UI in Figma: intake, scoring, and handoff
Design security questionnaire and vendor onboarding UI in Figma with intake forms, SIG/CAIQ templates, reviewer scoring, approval gates, and Dev Mode specs for enterprise Security and Procurement admin.
- 58Guide Intermediate 7m Jul 20
Designing access review and certification campaigns UI in Figma: reviewers, decisions, and handoff
Design access review and certification campaign UI in Figma with reviewer queues, entitlement lists, approve/revoke flows, campaign deadlines, and Dev Mode specs for enterprise IAM admin.
- 59Guide Intermediate 7m Jul 20
Designing security awareness training and phishing simulation UI in Figma: campaigns, reporting, and handoff
Design security awareness training and phishing simulation UI in Figma with campaign builder, simulated phish templates, completion tracking, and Dev Mode specs for enterprise Security admin.
- 60Guide Intermediate 7m Jul 19
Designing security policy management and acceptance UI in Figma: versions, attestation, and handoff
Design security policy management and member acceptance UI in Figma with policy library, version history, attestation tracking, re-acceptance flows, and Dev Mode specs for enterprise admin.
- 61Guide Intermediate 7m Jul 19
Designing vulnerability management and penetration test findings UI in Figma: severity, remediation, and handoff
Design vulnerability management and pentest findings UI in Figma with finding queues, severity tiers, remediation SLAs, owner assignment, and Dev Mode specs for enterprise Security admin.
- 62Guide Intermediate 7m Jul 18
Designing incident response runbooks and security playbooks UI in Figma: steps, roles, and handoff
Design incident response runbooks and security playbooks in Figma with step checklists, role assignments, break-glass links, audit hooks, and Dev Mode specs for enterprise Security admin.
- 63Guide Intermediate 7m Jul 18
Designing vendor risk assessment and third-party security reviews UI in Figma: questionnaires, scores, and handoff
Design vendor risk assessment and third-party security review UI in Figma with intake forms, questionnaire status, risk scores, app linkage, and Dev Mode specs for enterprise Security admin.
- 64Guide Intermediate 7m Jul 17
Designing break-glass emergency access and account recovery UI in Figma: bypass flows, audit, and handoff
Design break-glass emergency access and account recovery UI in Figma with SSO bypass, IP allowlist override, time-boxed elevation, dual approval, and Dev Mode specs for enterprise security admin.
- 65Guide Intermediate 7m Jul 17
Designing security posture dashboard and compliance checklist UI in Figma: scores, gaps, and handoff
Design security posture dashboard and compliance checklist UI in Figma with health score, control gaps, remediation links, framework mapping, and Dev Mode specs for enterprise Security admin.
- 66Guide Intermediate 8m Jul 16
Designing content classification and sensitivity labels UI in Figma: tagging, inheritance, and handoff
Design content classification and sensitivity label UI in Figma with label taxonomy, auto-tag rules, inheritance, DLP triggers, and Dev Mode specs for enterprise data governance.
- 67Guide Intermediate 8m Jul 16
Designing third-party app approvals and marketplace UI in Figma: OAuth consent, allowlists, and handoff
Design third-party app approval and marketplace UI in Figma with app catalog, OAuth consent, org allowlists, scope review, and Dev Mode specs for enterprise integration admin.
- 68Guide Intermediate 7m Jul 15
Designing data retention policies and auto-deletion UI in Figma: lifecycle rules and handoff
Design data retention and auto-deletion UI in Figma with policy rules, grace periods, legal hold overrides, audit trails, and Dev Mode specs for enterprise compliance admin.
- 69Guide Intermediate 7m Jul 15
Designing DLP and external sharing restrictions UI in Figma: policy controls and handoff
Design DLP and external sharing restriction UI in Figma with policy rules, share dialogs, blocked states, watermarking, and Dev Mode specs for enterprise security admin.
- 70Guide Intermediate 7m Jul 14
Designing compliance exports and legal hold UI in Figma: GDPR, eDiscovery, and handoff
Design compliance export and legal hold UI in Figma with GDPR data requests, admin export jobs, hold placement, retention blocks, and Dev Mode specs for enterprise admin.
- 71Guide Intermediate 7m Jul 14
Designing IP allowlist and network restrictions UI in Figma: access control and handoff
Design IP allowlist and network restriction UI in Figma with CIDR rules, enforcement modes, bypass flows, geo blocks, and Dev Mode specs for enterprise security admin.
- 72Guide Intermediate 7m Jul 13
Designing member invitations and pending invites UI in Figma: bulk invite, resend, and handoff
Design member invitation and pending invites UI in Figma with bulk email invite, role assignment, resend/revoke flows, seat limits, and Dev Mode specs for B2B onboarding.
- 73Guide Intermediate 7m Jul 13
Designing member offboarding and deprovisioning UI in Figma: removal, transfer, and handoff
Design member offboarding and deprovisioning UI in Figma with remove member flows, content transfer, SCIM deprovision, seat reclaim, and Dev Mode specs for enterprise admin.
- 74Guide Intermediate 7m Jul 12
Designing custom roles and permission templates UI in Figma: RBAC builder, presets, and handoff
Design custom roles and permission templates in Figma with role builder, permission matrices, preset templates, inheritance rules, and Dev Mode specs for enterprise RBAC.
- 75Guide Intermediate 7m Jul 12
Designing domain verification and SSO domain management UI in Figma: DNS, claimed domains, and handoff
Design domain verification and SSO domain management UI in Figma with DNS TXT records, claimed domain lists, SSO enforcement, and Dev Mode specs for enterprise identity.
- 76Guide Intermediate 6m Jul 11
Designing organization billing and seat management UI in Figma: plans, invoices, and usage
Design organization billing and seat management UI in Figma with plan comparison, seat usage meters, invoice history, payment methods, and Dev Mode specs for B2B admin.
- 77Guide Intermediate 6m Jul 11
Designing SCIM and directory sync UI in Figma: provisioning, groups, and IdP handoff
Design SCIM and directory sync UI in Figma with provisioning setup, group mapping, sync status, deprovisioning rules, and Dev Mode specs for enterprise identity management.
- 78Guide Intermediate 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.
- 79Guide Intermediate 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.
- 80Guide Intermediate 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.
- 81Guide Beginner 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.
- 82Guide Beginner 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.
- 83Guide Beginner 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.
- 84Guide Beginner 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.
- 85Guide Beginner 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.
- 86Guide Beginner 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.
- 87Guide Beginner 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.
- 88Guide Beginner 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.
- 89Guide Beginner 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.
- 90Guide Beginner 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.
- 91Guide Beginner 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.
- 92Guide Beginner 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.
- 93Guide Beginner 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.
- 94Guide Beginner 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.
- 95Guide Beginner 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.
- 96Guide Beginner 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.
- 97Guide Beginner 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.
- 98Guide Beginner 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.
- 99Guide Beginner 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.
- 100Setup Beginner 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.
- 101Guide Beginner 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.
- 102Guide Beginner 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.
- 103Guide Beginner 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.
- 104Guide Beginner 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.
- 105Guide Beginner 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.
- 106Guide Beginner 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.
- 107Guide Beginner 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.
- 108Guide Beginner 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.
- 109Guide Beginner 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.
- 110Guide Beginner 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.
- 111Guide Beginner 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.
- 112Guide Beginner 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.
- 113Guide Beginner 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.
- 114Guide Beginner 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.
- 115Guide Beginner 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.
- 116Layout Beginner 8m Jun 21
Designing gift cards and vouchers UI in Figma: balance, redemption, and handoff
Design gift card purchase, redemption, balance display, and wallet UI in Figma with payment-method states, partial apply rules, and Dev Mode specs for ecommerce checkout.
- 117Guide Beginner 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.
- 118Guide Beginner 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.
- 119Guide Beginner 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.
- 120Guide Beginner 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.
- 121Guide Beginner 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.
- 122Guide Beginner 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.
- 123Guide Beginner 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.
- 124Guide Beginner 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.
- 125Guide Beginner 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.
- 126Guide Beginner 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.
- 127Guide Beginner 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.
- 128Guide Beginner 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.
- 129Guide Beginner 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.
- 130Guide Beginner 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.
- 131Guide Beginner 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.
- 132Guide Beginner 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.
- 133Guide Beginner 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.
- 134Guide Beginner 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.
- 135Guide Beginner 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.
- 136Guide Beginner 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.
- 137Guide Beginner 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.
- 138Guide Beginner 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.
- 139Guide Beginner 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.
- 140Layout Beginner 8m Jun 09
Designing inline alerts and banners in Figma: patterns, tone, and handoff
Design persistent inline alerts and page banners in Figma with tone variants, action slots, dismiss rules, and Dev Mode specs—separate from toasts and modals.
- 141Guide Beginner 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.
- 142Guide Beginner 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.
- 143Guide Intermediate 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.
- 144Guide Intermediate 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.
- 145Guide Intermediate 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.
- 146Layout Intermediate 6m Jun 06
Designing cards in Figma: layouts, variants, and handoff
Build reusable card components in Figma with media slots, action areas, elevation tokens, and state variants so product and marketing cards hand off cleanly.
- 147Layout Intermediate 6m Jun 06
Figma dropdown menus and context menus: patterns, states, and handoff
Design dropdown, select, and context menus in Figma with menu item variants, keyboard focus specs, positioning rules, and Dev Mode notes engineers can implement.
- 148Guide Intermediate 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.
- 149Guide Intermediate 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.
- 150Guide Intermediate 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.
- 151Guide Beginner 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.
- 152Guide Intermediate 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.
- 153Prototyping Intermediate 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.
- 154Guide Intermediate 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.
- 155Guide Beginner 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.
- 156Guide Beginner 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.
- 157Systems Intermediate 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.
- 158Plugins Intermediate 7m May 31
Best Figma Plugins for Prototyping (2026): Motion, Data, and Realistic Demos
Compare the best Figma plugins for prototyping in 2026—Smart Animate helpers, mock data, screen recordings, and advanced interactions—plus a minimal native stack.
- 159Prototyping Beginner 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.
- 160Systems Beginner 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.
- 161Setup Beginner 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.
- 162Systems Intermediate 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.
- 163Systems Intermediate 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.
- 164Guide Intermediate 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.
- 165Systems Intermediate 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.
- 166Guide Intermediate 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.
- 167Guide Intermediate 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.
- 168Guide Intermediate 6m May 26
Figma vs Sketch (2026): collaboration default vs mac-native craft
Compare Figma vs Sketch for real product UI in 2026: multiplayer, plugins, components, macOS lock-in, and handoff—with criteria tables and clear verdicts by team type.
- 169Guide Beginner 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.
- 170Prototyping Intermediate 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.
- 171Guide Intermediate 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.
- 172Guide Intermediate 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.
- 173Guide Intermediate 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.
- 174Plugins Intermediate 9m May 23
Best Icon Sets & Illustration Plugins for Figma (2026)
Compare Figma icon sets and illustration plugins in 2026: Phosphor, Iconify, Material, Blush, unDraw, and how to keep one family per project.
- 175Guide Intermediate 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.
- 176Guide Intermediate 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.
- 177Prototyping Intermediate 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.
- 178Guide Intermediate 8m May 21
Figma vs Framer for Marketing Sites (Who Should Pick Which)
Figma vs Framer for marketing sites: design systems, CMS, publish workflow, SEO, and team roles—with criteria tables and clear verdicts by team type.
- 179Career Beginner 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.
- 180Prototyping Intermediate 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.
- 181Guide Beginner 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.
- 182Guide Beginner 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.
- 183Guide Intermediate 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.
- 184Guide Beginner 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.
- 185Systems Intermediate 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.
- 186Guide Intermediate 9m May 17
Alternatives to Figma for UI design teams: an honest 2026 shortlist
Pick a Figma alternative without regret: who should stay on Figma, who should pilot Sketch, Penpot, or Framer, and the procurement mistakes that waste quarters—criteria, tradeoffs, and a verdict table.
- 187Guide Intermediate 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.
- 188Guide Intermediate 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.
- 189Guide Intermediate 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.
- 190Plugins Intermediate 8m May 14
Best Figma → Dev Handoff Plugins (2026): Inspect, Tokens, Specs, and Code
Pick Figma plugins that complement Dev Mode: design tokens, redlines, code export, and documentation workflows—plus when native Inspect is enough and how to avoid spec drift.
- 191Guide Intermediate 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.
- 192Guide Intermediate 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.
- 193Guide Intermediate 9m May 13
Figma vs Penpot (2026): when open source wins, when it doesn’t
Compare Figma vs Penpot for real UI work in 2026: collaboration, hosting, components, plugins, and compliance—with clear criteria for teams and a verdict by scenario.
- 194Plugins Intermediate 7m May 12
Best Figma Plugins for Accessibility (Contrast, A11y Linting) — 2026
Compare the best Figma plugins for WCAG contrast checks, focus order, color-vision simulation, and design linting—plus when native Inspect is enough and how to pick a stack.
- 195Guide Intermediate 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.
- 196Guide Intermediate 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.
- 197Guide Intermediate 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.
- 198Guide Beginner 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.
- 199Setup Beginner 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.
- 200Guide Beginner 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.
- 201Prototyping Beginner 7m 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.
- 202Career Beginner 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.
- 203Logo Beginner 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.
- 204Layout Beginner 7m Sep 10
How to Design Google Ad Banners in Figma (All Sizes + Export Guide)
Design Google Display ad banners in Figma with standard sizes, responsive variants, hierarchy tips, export settings, and testing notes.
- 205Career Intermediate 10m Sep 05
Figma vs Adobe XD 2026: Which Is Better for UI/UX Design?
Compare Figma vs Adobe XD in 2026 with a practical verdict on collaboration, prototyping, ecosystem, pricing, and whether XD still makes sense.
- 206Layout Beginner 11m Sep 01
How to Design a Food Menu with Figma (Restaurant Menu Design Guide)
Design restaurant menus in Figma with correct sizes, sections, typography, pricing hierarchy, print export settings, and digital PDF tips.
- 207Plugins Beginner 11m Aug 10
Best Figma Plugins for Design Systems (2026): What to Use, Skip, and Combine
Compare the best Figma design system plugins for tokens, linting, style cleanup, typography, docs, and developer handoff in 2026.
- 208Layout Beginner 7m Aug 10
How to Design Flyers Using Figma (Step-by-Step + Free Template)
Design print-ready flyers in Figma with correct sizes, layout hierarchy, typography, bleed, export settings, and practical template advice.
- 209Plugins Intermediate 10m Aug 08
Best Figma Plugins for Developers You Must Have (2026)
Compare the best Figma plugins for developers and handoff workflows, including code export, design tokens, specs, assets, and Dev Mode support.
- 210Plugins Beginner 9m Aug 08
Best Figma Plugins for Web Design to Get an Attractive Look (2026)
Compare the best Figma plugins for web design in 2026, including icons, images, accessibility, content, handoff, and layout workflow tools.
- 211Layout Beginner 7m Aug 05
How to Design a Banner in Figma: Step-by-Step Guide (2026)
Design banners in Figma for websites, social media, and ads with correct sizes, layout hierarchy, typography, image treatment, and export settings.
- 212Layout Beginner 7m Aug 01
How to Make a Feature Image in Figma (Blog & Social Media)
Create blog and social feature images in Figma with correct sizes, layout rules, reusable templates, export settings, and brand consistency tips.
- 213Prototyping Beginner 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.
- 214Setup Beginner 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.
- 215Plugins Beginner 8m Jul 31
Learn How to Install Figma Plugins (Complete Guide 2026)
Learn how to find, install, run, manage, and troubleshoot Figma plugins in 2026, plus which plugin guides to read next.
- 216Layout Beginner 6m Jul 20
How to Make a Business Card Using Figma (Free Template + Correct Size)
Design a print-ready business card in Figma with correct size, bleed, safe margins, typography, front/back layout, and export settings.
- 217Setup Beginner 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.
No matches. Try clearing a filter.