How I Vibe Code Figma Plugins

Introduction

AI tools have become accessible enough that designers can prompt their way to a working application. This guide walks through my approach to building Figma plugins with agentic AI.

---

Setting up the stack

You'll need access to the following tools:

• An agentic AI tool like Claude Code, Cursor, or GitHub Copilot. I use Claude Code.
• A code editor like VSCode or Cursor.
• A GitHub account for storing and versioning code.
• Figma to design the UX.

---

Not all models are equal

Most AI tools offer different models. Before diving in, familiarize yourself with your tool and use the appropriate model to avoid burning credits. Claude offers these models:

Match the model to the task. Simple CSS tweaks? Haiku. Restructuring your entire plugin architecture? Opus.

---

Deciding what to build

If you already have an idea, skip ahead. If not, start by prompting AI. When I built Component Guardian, I started with a brainstorming session. Here's what I asked:

I work in design systems and want to explore building a Figma plugin. Can you help me brainstorm and give me 20 ideas for a plugin I could pursue.

I chose Component Guardian because it solves a problem I face constantly as a design systems maintainer. I know the problem deeply, which made building, testing, and iterating much smoother. I even used Claude Code to help name the plugin.

Things to consider

• Do you want your plugin to support dark mode?
• Should the plugin window be resizable? If so, what are the min and max dimensions?

---

Prompting to create a prompt

Once you have an idea, work with your AI tool to generate a comprehensive prompt for the agentic AI. Here's what I used:

Write me a prompt for Claude Code to build a Figma plugin called Component Guardian. Please generate a list of user stories, outline the tech stack and approach, outline how data is stored, outline key UI features and requirements, and document which portions of the Figma API we'll make use of.

Review the output and refine it until the prompt accurately reflects what you want to build.

---

Use Git to version control

As you move through this process, it's highly advised that you use Git and commit each change as it's made. AI tools are not good at rolling back changes, especially if you are using multiple conversations. Additionally, your code can be stashed in GitHub for safe storage.

---

Decide how to design the plugin

You have options depending on how much control you want:

Figma MCP

To pipe designs into your prompts, you'll need to set up an MCP server. MCP (Model Context Protocol) is an open standard that connects LLMs to external data and tools. Figma has an MCP server that lets you reference designs directly in prompts. If you're new to MCPs:

• Familiarize yourself with Figma's MCP
• Check your AI tool's documentation for MCP setup instructions.

---

Fully custom design

This option gives you complete control over the plugin experience. I used this approach for Variable Atlas.

Check out this Figma file to see what I put together for Variable Atlas.

Building a theme and components

1. Create your design system in Figma.
   Build individual components using Figma components and variables. Start with basics like form inputs, buttons, and icons. You may need to design the experience in tandem or wireframe it first to inventory what components you need.
2. Set up Storybook for local component development.
   Massaging components inside an app is tricky. Storybook isolates components and exposes their full functionality. Prompt: Implement Storybook in this project for local component development.
3. Create specs in Figma.
   Build frames that expose your typography, variables, border radii, and components with their expected API and functionality.
4. Create a theme file.
   Document your typography, variables, border radii, and spacing. Prompt: Create a theme file that houses these colors [Figma link], typestyles [Figma link], border radius [Figma link], and spacing [Figma link].
5. Create icon components.
   Export all SVG icons into a folder called svgs-to-import. Then prompt: Create icon components for each of the icons in /svgs-to-import. Once complete, delete the svgs.
6. Build each component.
   Prompt: Create a component called [component_name] that is accessible and follows this design: [Figma link]. Always reference the theme file we created earlier when building this component. Add stories for this component in Storybook.
   1. Check each component's Storybook page. Verify it matches your design and expected functionality. Prompt AI to iterate, or manually adjust if you know JavaScript and CSS.
   2. Review the code to confirm your theme file is being referenced.
7. Once components match expectations, implement the full designs.

Prompting to build the full experience

With components and theme in place, build the full experience.

1. Place all plugin screens in one frame.
   This lets you provide a single link to the agent.
2. Update your prompt.
   Add: Build this experience using the available components and theme file. at the end of the prompt AI helped you write to pass to the Agent.
3. Input your updated prompt.
   Include the URL for the app screens so the AI has full context.

---

Leverage existing design system

If using a public design system with documentation, the process is similar but shorter. A good resource is Create Figma Plugin, which I used for Component Guardian.

Set up the public design system

1. (Optional) Design your plugin using the design system.
   If the system has a Figma library, design the full experience using it. Premium AI models can build without designs, but having them helps. If there is no Figma library for the system, you may need to wireframe if you want more control.
2. Give AI access to the design system.
   Prompt: Setup this design system in this repo [link to public design system documentation]. This configures your plugin to pull in the appropriate packages.

Prompting to build the full experience

1. If you designed your plugin, place all screens in one frame.
   This lets you provide a single link to the agent.
2. Update your prompt.
   Add: Build this experience [link to frame of full designs] using [design system name]'s components and tokens.
3. Input your updated prompt.
   Include the URL for the app screens so the AI has full context.

---

Let the AI decide

The last route is letting AI decide everything. Not recommended since you lose control of the experience. For simple plugins, this might be fine. It can also help you inventory what UI elements you need.

---

Loading the local plugin in Figma

Once you have an initial build, bring the plugin into Figma to test.

1. In Figma, open: Plugins > Development > Import plugin from manifest.
2. Navigate to your code and select manifest.json.
3. Your plugin loads. Find it in the bottom center toolbar under the Actions menu. Note the Development badge.
4. Click your plugin to run and test the experience.
5. Prompt AI to refine as you use the plugin. Use cheaper models for simple fixes like design tweaks. Use premium models for complex code changes.

Ship

Once your plugin works as expected and you've tested it, ship it. Follow these instructions to publish your plugin. You'll need:

• Plugin icon and hero image for Figma Community page. I like using this template for that.
• Category
• Description
• Add the ID provided in the publish flow to your manifest.json.
• Follow any other instructions in the publish flow. Sometimes Figma requests certain methods be used, which may require you to prompt AI to adjust the approach and re-test.

After publishing, your plugin requires review from the Figma team. Once approved, you'll receive an email and your plugin goes live.

---

Closing thoughts

Building Figma plugins has been a blast. It's a powerful way for designers to solve their own problems and share solutions with the community. I hope this guide helps you build something useful!