Flow Card Figma Widget

As designers, we often find ourselves adapting existing tools to fit our specific workflows. Sometimes we bend them so much that we end up using features for completely different purposes than intended.

That’s exactly what happened to me with a Figma plugin I was using for my larger projects, which led me to building my first Figma widget with AI.

When Tools Don’t Fit Your Workflow

I had been using this card style widget for my larger projects where users could enter screen names, assign responsibility, and add comments. The plugin itself worked fine, no complaints there. But here’s the thing, I was using it in a completely different way than it was designed for, and it felt wrong every single time.

Instead of using it for general screen documentation like everyone else, I was placing these cards at the beginning of every flow that went through features based on tickets.

This meant I was entering flow names instead of screen names, pasting story links instead of comments. But the labels were all wrong for what I was actually doing.

That’s when I decided to build my own Figma widget.

Research and Setup

The process began with researching Figma’s widget documentation. I needed to understand the technical requirements and how the development workflow actually worked.

Figma’s documentation covered the basics, but as someone without advanced programming experience, some concepts felt abstract until I could see them in action.

I spent time going through their setup guide and then shared it with Claude.

After showing Claude both the current widget I was using and explaining what I wanted to change, Claude walked me through the setup process in Visual Studio Code.

After the setup, I could see Figma’s demo widget, a simple counter.

That was my first real sign that everything was working correctly. First part done, phew.

The next step was replacing that demo code with my custom widget code. Claude generated the new code based on our earlier conversation, I pasted it into VS Code, saved the file, and suddenly I could see a draft version of my actual widget appearing in Figma.

Seeing my own design come to life in real time was genuinely exciting.

ITERATION PROCESS

What followed was an iterative design and development process that honestly felt like playing with very digital Legos. Initially, I got a bit carried away and considered letting users add infinite modules and rename everything themselves. But I quickly realised I was overcomplicating things.

Instead, I stepped back and created a widget with specific modules that matched my actual workflow. No more, no less. I ended up with flow/screen name for the main identifier, story links for ticket references, responsible person fields for project ownership, and a few custom modules for specific project needs. Much more manageable and actually useful.

The widget needed to handle different interaction states, placeholder content, and menu interactions. Claude helped implement features like click to edit functionality, which sounds simple but involves more state management.

Since this widget would eventually be public, I knew I needed a way for users to tell me what they actually wanted. I added a feedback system where users can request new modules or report bugs. They simply click a feedback button, choose whether they want to suggest a new module or report an issue, enter their text, and send it straight to my email.

I didn’t want to go too broad initially, keeping things focused and learning from actual user needs felt like the smarter approach rather than trying to build everything at once and pleasing no one.

The Bigger Picture

The entire process took just 2 days, which still surprises me when I think about it.

Day 1: Research, setup, implementation, and getting the basic widget working

Day 2: Fine-tuning the interactions, polishing the design, and creating the widget’s visual identity

This whole experience got me thinking about how Figma could make widget and plugin development even more accessible to designers. Right now, the process requires setting up a development environment, understanding TypeScript, and managing code compilation, all barriers that prevent many designers from even trying.

The potential is huge, every designer has workflow pain points that could be solved with custom tools, but most of us never attempt it because the technical barrier feels too high. Lower that barrier, and suddenly you have thousands of designers solving their own problems and sharing solutions with the community.

Widget

If you’re curious to see how it turned out or want to give it a try in your own workflow, you can find the Flow Card widget in Figma’s widget library. I’d genuinely love to hear how other designers use it or if it doesn’t quite fit your needs, what would make it better.