create-figma-plugin - GitLite

KO | EN

gitlite — search

#python #react #ai #golang #deep-learning #docker #java #nodejs #windows #awesome #cli #awesome-list #mcp #open-source

create-figma-plugin

(★ 1,115)

:battery: The comprehensive toolkit for developing plugins and widgets for Figma

File Explorer

Download Latest Version (.zip)

- - build.yml
- - package.json
  - tsconfig.json
- - package.json
  - tsconfig.json
- - package.json
  - README.md
  - tsconfig.json
- - package.json
  - tsconfig.json
- - package.json
  - tsconfig.json
- - package.json
  - tsconfig.json
- - build-website.config.js
  - eslint.config.js
  - package.json
  - tsconfig.json
- bump-dependencies.ts
- generate-index.ts
- patch-figma-plugin-typings.ts
- release.sh
- symlink.sh
.gitignore
CHANGELOG.md
eslint.config.js
lerna.json
LICENSE.md
package-lock.json
package.json
README.md
tsconfig.json
turbo.json

# Installation Guide

1. Get the code

git clone https://github.com/yuanqing/create-figma-plugin

Downloads the entire project code from GitHub to your computer.

cd create-figma-plugin

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

$ npm install

Downloads and installs the libraries listed in package.json.

$ npm run build

Builds optimized production files.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

*This page is for contributors. If you’re looking to use Create Figma Plugin, [go to the documentation website](https://yuanqing.github.io/create-figma-plugin/).*

---

# [Create Figma Plugin](https://yuanqing.github.io/create-figma-plugin/) [![npm Version](https://img.shields.io/npm/v/create-figma-plugin?cacheSeconds=1800)](https://npmjs.com/package/create-figma-plugin) [![build](https://img.shields.io/github/actions/workflow/status/yuanqing/create-figma-plugin/build.yml?branch=main&cacheSeconds=1800)](https://github.com/yuanqing/create-figma-plugin/actions?query=workflow%3Abuild)

> The comprehensive toolkit for developing plugins and widgets for Figma

- [Introduction](https://yuanqing.github.io/create-figma-plugin/)
- [Quick start](https://yuanqing.github.io/create-figma-plugin/quick-start/)
- [Configuration](https://yuanqing.github.io/create-figma-plugin/configuration/)
- [UI](https://yuanqing.github.io/create-figma-plugin/ui/)
- [Utilities](https://yuanqing.github.io/create-figma-plugin/utilities/)
- [Recipes](https://yuanqing.github.io/create-figma-plugin/recipes/)
- [Reference plugins/widgets](https://yuanqing.github.io/create-figma-plugin/reference-plugins-and-widgets/)
- [Storybook](https://yuanqing.github.io/create-figma-plugin/storybook/)
- [Changelog](/CHANGELOG.md#readme)

## Contributing

### Pre-requisites

- [Node.js](https://nodejs.org) – v22
- [npm](https://docs.npmjs.com/cli/) – v11

### Building the project locally

```
$ git clone https://github.com/yuanqing/create-figma-plugin
$ cd create-figma-plugin
$ git checkout --track origin/next
$ npm install
```

Active development on the next release occurs on the [`next`](https://github.com/yuanqing/create-figma-plugin/tree/next) branch. Pull requests should be made into `next`.

### Testing changes on an existing plugin/widget

First, build the entire Create Figma Plugin project:

```
$ npm run build
```

Then, create symlinks to the local copy of the project in your existing plugin/widget (eg. `my-project`):

```
$ ls -a
create-figma-plugin  my-project
$ sh create-figma-plugin/scripts/symlink.sh create-figma-plugin my-project
```

Finally, build your plugin/widget:

```
$ cd my-project
$ npm run build
```