Case Study · Ai Projects

Design Toolkit — a Figma plugin for my own workflow

I built one panel inside Figma for the connective work around enterprise B2B design — PRDs, edge cases, system consistency, copy, and comments — so I stop relying on memory and extra tabs.

De-Tool Figma plugin

PluginDe-Tool

RoleSole designer & builder

ScopePersonal Figma plugin from problem to working prototype

DomainB2B product design workflow

StackFigma Plugin API · Gemini · Figma REST

StatusOn Figma Community

The problem

The slow parts weren’t the design — they were everything around it, and each one pulled me out of Figma.

On detail-dense B2B work, the same five frictions kept showing up. They lived outside the canvas, or depended on me remembering to check. The opportunity was simple: move those checks to where the work already happens.

01

PRD → tasks

I read the whole PRD — and still miss tasks buried in the doc, including micro-tasks.

02

Edge cases

Like a lot of designers, I miss empty states, zero states, and error states.

03

Consistency

I break a component early while building a card, then forget to fix it later.

04

UI copy

In B2B SaaS I sometimes miss non-inclusive or unprofessional wording.

05

@-mentions

Mark a comment done in Figma and it disappears — hard to find or revisit later.

Approach

One panel inside Figma

I didn’t want five separate plugins. One panel, one setup, and I stay on the canvas. Where something is measurable (contrast, variables), I use code. Where it’s judgment (copy, usability), I use the model — and it only suggests, it doesn’t change my file for me.

The tools

What’s in it

01Task Generator

Problem

I miss tasks buried in the PRD.

I read the full doc, but tasks — and smaller micro-tasks — still sit inside the prose and I skip them.

Solution

Pulls requirements into a checklist on a new page in the file, so I can see what to design without re-reading the whole doc.

Also

A few extras I use less often

WCAG Annotator

Checks contrast and target size in code, and marks issues on a copy of the frame.

Usability Annotator

Quick critique notes on the frame — hierarchy, labels, grouping.

Cover Generator

Makes a simple editable cover from the PRD when I need one.

Status

Built for my own use — published so others can try it

I built this for my own files first. It’s on the Figma Community if you want to run it too — still a working tool, not a polished product. Things break; I’m fixing them as I hit them.

Try it

How to run it

De-Tool

I’m still building this for better outputs. The Figma Community link will go here when it’s ready.

More work View all work