## 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: | Model | Description | Ideal for | | ---------------- | ----------------------------------------------------------------------- | --------------------------------------------------------- | | Claude Sonnet 4 | The smart model for complex agents and coding | General coding tasks. | | Claude Haiku 3.5 | The fastest model with near-frontier intelligence | Quick iterations once app structure has solidified. | | Claude Opus 4.5 | Premium model combining maximum intelligence with practical performance | Complex tasks like initial builds or large-scale changes. | 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](/work/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: | Process | Description | What's needed | | ------------------------------- | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------ | | Fully custom design | Create a custom mini design system in Figma. Use the Figma MCP server to connect to your LLM. | Full end-to-end designs. Figma MCP server. | | Leverage existing design system | Use a public design system like Shadcn for building. | Recommended to still design in Figma and use the MCP server. | | Let the AI decide | Not recommended. If you dislike what AI outputs, you'll iterate on a codebase you didn't structure yourself. | Just prompt the AI and see what it outputs. | ### 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](https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Figma-MCP-server) - 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](/work/variable-atlas). [Check out this Figma file to see what I put together for Variable Atlas](https://www.figma.com/design/WJRrxz9LzPn31Z1xKV9iwE/Variable-Atlas-Demo?node-id=1-8332&p=f&t=Jk13sGi7BvnX0uzQ-11). ### 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](https://yuanqing.github.io/create-figma-plugin/), which I used for [Component Guardian](/work/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](https://help.figma.com/hc/en-us/articles/360042293394-Publish-plugins-to-the-Figma-Community). You'll need: - Plugin icon and hero image for Figma Community page. [I like using this template for that](https://www.figma.com/community/file/1313867892747798767/figma-plugin-creator-kit). - 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!

How I Vibe Code Figma Plugins

My Favorite Figma and FigJam Plugins