Dev Mode in Design — for Figma

A Figma plugin that brings real Dev Mode-style inspection — a11y annotations, live HTML previews, typography breakdown, color tokens, code generation — straight into the design editor, no Dev Mode seat required.

Works on Figma Desktop (Mac and Windows). Free to install.

Quick install (one command)

Once your computer has Node.js (see the Before you start section if you've never installed it), this single command installs the plugin:

npx @neilsarjal09/dev-mode-in-design

That's it. The command will:

1. Download the plugin
2. Save it to your Documents folder under dev-mode-in-design/
3. Print the exact next steps for opening it inside Figma

You then import it into Figma (a one-time, two-click step).

Before you start

You need two things on your computer. Most people already have at least one.

1. Figma Desktop App

The plugin works only inside the desktop app, not the browser version. If you don't have it yet:

• Mac & Windows → https://www.figma.com/downloads
• Download, install, sign in with your usual Figma account.

2. Node.js (this is what gives you the npx command)

Node.js is the engine that runs the install command. It's a free, one-time install.

• Go to https://nodejs.org
• Click the big green button labeled LTS (it'll say something like "20.x.x LTS — Recommended for Most Users")
• Download → open the installer → click Next / Continue through every screen → Install.
• That's all. You will not need to open Node.js itself.

✅ How do I know Node.js is installed? Open Terminal (Mac) or Command Prompt (Windows) and type:

node --version

If you see a number like v20.11.0, you're set.

Step-by-step install

Step 1 — Open your terminal

• Mac: Press Cmd + Space, type Terminal, press Enter.
• Windows: Press the Windows key, type Command Prompt, press Enter.

A black or white window with text will open. This is where you'll type one command.

Step 2 — Paste this command and press Enter

npx @neilsarjal09/dev-mode-in-design

The first time, it'll ask you to confirm by pressing y (or just Enter). After a few seconds you'll see a message like:

Dev Mode in Design — installed
version 0.1.0

Files: /Users/your-name/Documents/dev-mode-in-design

Open in Figma:
  1. Figma desktop → top menu → Plugins → Development → Import plugin from manifest…
  2. Pick this file:
     /Users/your-name/Documents/dev-mode-in-design/manifest.json

Copy that file path (the long one ending in manifest.json). You'll need it in the next step.

Step 3 — Import into Figma

1. Open the Figma Desktop app.
2. Open any Figma file (or create a new one).
3. In the top menu bar, click Plugins → Development → Import plugin from manifest…
4. A file picker will open. Paste or navigate to the path from Step 2.
5. Select manifest.json and click Open.

Done. The plugin is now installed.

Step 4 — Run the plugin

Inside any Figma file:

• Top menu → Plugins → Development → Dev Mode in Design

A panel will open on the right side of your Figma window. Select any layer to start inspecting it.

Updating to a new version

Whenever a new version is released, just run the same command again:

npx @neilsarjal09/dev-mode-in-design

It downloads the latest version and overwrites the files in your Documents folder. Figma will pick up the new version the next time you run the plugin — no need to re-import.

Troubleshooting

"command not found: npx"

Node.js isn't installed yet, or the terminal hasn't refreshed since you installed it.

• Close the terminal window completely
• Re-open it
• Try the command again

If it still doesn't work, re-install Node.js from nodejs.org.

"I ran the command but nothing happened in Figma"

The install command only copies files to your Documents folder. You still have to do Step 3 — Import into Figma the very first time. After that, the plugin lives under Plugins → Development.

"I can't see Plugins → Development in the Figma menu"

That menu only appears in the Desktop app, not the browser. Open Figma from your Applications folder (Mac) or Start menu (Windows), not from a browser tab.

"I get an error about permissions"

On Mac, you may need to allow Terminal to write to Documents the first time. macOS will pop up a permissions dialog — click Allow or OK.

"Where exactly are the files saved?"

• Mac: /Users/<your-name>/Documents/dev-mode-in-design/
• Windows: C:\Users\<your-name>\Documents\dev-mode-in-design\

You can delete that whole folder any time to uninstall.

Uninstalling

1. In Figma: Plugins → Manage plugins → Development → right-click Dev Mode in Design → Remove.
2. Delete the Documents/dev-mode-in-design/ folder from your computer.

That's it — fully removed.

Need help?

Reach out to the author with the version number you see when you run the install command, plus a screenshot of any error message. Most issues are fixed in seconds with that info.