Figma Plugin Not Loading or Causing Errors Fix

In this tutorial, you'll learn about Figma Plugin Not Loading or Causing Errors Fix. We cover key concepts, practical examples, and best practices.

The Problem

A Figma plugin fails to load, displays a blank UI, crashes the editor, or shows an 'Unable to connect' error. The plugin works for others but not for you.

Quick Fix

Step 1: Check plugin permissions

Plugins need explicit permissions.

Wrong — plugin uses hidden permissions:

manifest.json missing required permissions
Plugin crashes when accessing document

Right — declare all permissions:

{
  "name": "My Plugin",
  "id": "1234567890",
  "api": "1.0.0",
  "main": "code.js",
  "capabilities": [],
  "enableProposedApi": false,
  "editorType": ["figma", "figjam"],
  "permissions": ["currentuser", "fileusage"]
}

Expected output: Plugin loads without capability errors.

Step 2: Clear plugin cache and reload

Figma caches plugins aggressively.

Wrong — keep trying the same broken cache:

Plugins → Run → My Plugin → blank screen, retry

Right — clear and reload:

Figma → Settings → Plugins → Clear plugin cache
Restart Figma
Developer → Plugins → Reload plugins

Expected output: Plugin loads fresh from source.

Step 3: Debug with console logs

Use figma.ui.postMessage to debug errors.

// Wrong — no error handling
figma.closePlugin()

// Right — log errors before closing
figma.ui.onmessage = (msg) => {
  if (msg.type === 'error') {
    console.log('Plugin error:', msg.error)
    figma.notify('Error: ' + msg.error, { error: true })
  }
}

Expected output: Error messages appear in the Figma plugin console.

Step 4: Verify plugin manifest

A malformed manifest prevents loading.

Wrong — incomplete manifest:

{'name': 'Plugin', 'id': 'test'}

Right — complete manifest:

{
  "name": "My Plugin",
  "id": "1234567890",
  "api": "1.0.0",
  "main": "code.js",
  "ui": "ui.html",
  "editorType": ["figma"]
}

Expected output: Plugin deploys without validation errors.

Prevention

• Always declare all required capabilities in manifest.json
• Test plugins in a dev copy before publishing to the community
• Clear plugin cache after updating plugin code
• Use figma.notify() for user-facing error messages instead of silent failures

Common Mistakes with plugin error

1. Misunderstanding that String is [Char] with poor performance for large text operations
2. Using foldl instead of foldl' causing stack overflow on large lists
3. Forgetting deriving (Show, Eq) on custom data types needed for debugging

These mistakes appear frequently in real-world FIGMA code. DodaTech's contributors have identified these patterns through analysis of open-source projects and production systems.

Practice Exercise

Write a pure function that safely divides two integers using Maybe, then test it with edge cases like division by zero and negative numbers.

This exercise reinforces the concepts covered in this guide. Try implementing it before checking online solutions.

FAQ