Figma CLI

A command-line interface for creating and managing Figma plugins and widgets.

Installation

npm install -g @2fold/figma-cli

Usage

Create a New Plugin or Widget

figma create

This will start an interactive prompt that will guide you through:

• Choosing between a plugin or widget
• Setting the name and description
• Selecting a template (TypeScript or JavaScript)
• Choosing a UI framework (React with Vite or Next.js)
• Optionally adding Tailwind CSS for styling

Build Your Plugin

figma build

Builds the current plugin in the directory. Make sure you're in the plugin's root directory.

Run Development Server

figma dev

Starts the development server for the current plugin. Make sure you're in the plugin's root directory.

Send Messages Between UI and Figma Scene

figma message

Starts an interactive prompt to send messages between the iframe and Figma scene. The available message types are automatically detected from your ui/src/messages.ts file.

Project Structure

When you create a new plugin, it will have the following structure:

my-plugin/
├── ui/                 # UI code (React/Next.js)
│   ├── src/
│   │   ├── messages.ts # Message types and handlers
│   │   └── ...        # UI components
│   └── package.json
├── src/               # Plugin code
│   ├── code.ts       # Main plugin code
│   └── ...           # Plugin components
├── manifest.json     # Plugin configuration
└── package.json      # Project configuration

Development

To contribute to this project:

1. Clone the repository
2. Install dependencies:

   npm install

3. Build the project:

   npm run build

4. Run in development mode:

   npm run dev

License

MIT