Figma - Error States
We analyzed 8 examples of how Figma handles error states across their product, spanning 4 different approaches: inline validation, toast notification, modal dialog, full-page error.
Full-Page Errors
Figma — File viewer (direct link to a missing or deleted file)
Full-page error shown when navigating to a design file that no longer exists or is inaccessible. Centered card with question-mark icon, explanation, CTA, and list of logged-in accounts.
Toast Notifications
Figma — Design editor canvas (top banner area)
Red toast notification at the top of the design editor canvas indicating a team-data fetch failure. Editor remains functional underneath.
Figma — Recents dashboard (top banner area)
Red toast notification at the top of the Recents dashboard indicating a file-processing failure. The affected file card is visible below.
Figma — Recents dashboard (bottom toast area)
Red toast notification at the bottom of the Recents dashboard indicating a failure to fetch notifications. Includes a dismiss X button.
Inline Validation
Figma — Share this file modal (email invite input)
Inline validation error in the Share dialog when an invalid email address is entered in the invite field. Red error text appears below the input.
Figma — Publish your file to Community modal (step 1)
Inline validation error in the Publish to Community modal (step 1 - Describe your resource) when the Name field value is too short. Red error text appears below the input.
Modal Dialogs
Figma — Publish your file to Community modal (step 3)
Publish to Community modal (step 3 - Add the final details) showing two simultaneous error states: a red inline error message at the bottom of the modal and a separate toast at the bottom of the screen for a field-validation failure.
Figma — Recents dashboard (Imported to Drafts modal)
Import results modal on the Recents dashboard showing a failed file import. The file 'Notion-6.0.0-arm64.csv' failed with 'Unsupported file format', and a summary line warns that 0 of 1 files were imported.