top of page

Blog

Build Your Own Figma Plugin Without Code!

Build Your Own Figma Plugin Without Code!
t2lCPq3PcIDifth3czwWsCcvLlk.jpeg

Start your UX/UI design career today

Learn from our expert mentors and help get jobs and internships in our upcoming bootcamp

Request Callback

Did you know you can build your own Figma plugins without any code? These tools help you create your own Figma plugin from simple prompts.


I’ll walk you through two super easy methods to do just that. Whether you're a beginner or a pro, both methods are powerful and open up a world of possibilities. Let’s jump right in!


Method 1 - Artifig AI


Artifig AI

This method happens entirely within Figma—no downloads, no complicated setups. Just Figma and a browser.


Step-by-Step:


  1. Open Figma and launch the Artific AI plugin.If you don’t have it yet, search for it in the Figma Community and install it.

  2. Sign in with Google to start using Artific.

  3. Write a prompt to describe what kind of plugin you want to create.Example:“Create a gradient generator plugin that picks a color from a selected element and applies a gradient based on that.”

  4. Click Generate, and boom—Artific does its magic!

  5. It generates a project page with the full structure, code, and an option to run it directly.

  6. If there are any issues (like missing features or bugs), you can simply type new instructions like:“Add a live color picker at the top”or“Fix the error: tinyColor is not defined”—and hit generate again.


Artific updates the plugin for you instantly. You can tweak the UI, add dark mode, or even define your own styles.


Method 2 - Cursor AI


Cursor AI | Designwings UX/UI School

Cursor is a tool for those who want more control. Think of it like ChatGPT but inside a coding workspace—it turns your prompts into real code automatically.


How it works:


  1. Open Cursor, and create a new folder for your plugin (e.g., gradient-plugin).

  2. On the right side of Cursor, start a new chat and say:“I want to create a Figma plugin. Please help.”

  3. Cursor begins generating all necessary files (like manifest.json, TypeScript files, etc.)—you don’t have to touch the code unless you want to!

  4. Go back to Figma → Plugins → Development → Import Plugin from ManifestThen choose the manifest.json file in your new folder.

  5. Once imported, you can run your new plugin inside Figma and see it in action. Want to add more features?

  6. Head back to Cursor and type detailed instructions like:“Add a reset button to return to a solid color, a live gradient preview, a gradient angle slider, and enable dark mode.”

  7. Hit send. Cursor handles everything, updates the code, and your plugin evolves in real time.


Here is a detailed tutorial on how to publish your plugin on the Figma community for free.


Get these design tools in your email, for free!

bottom of page