Figma Plugin Samples

Some plugins are designed specifically for FigJam and utilize FigJam-specific node types. To work correctly, these plugins should have an editorType of 'figjam' in their manifest.json file.

Supported FigJam node types include:

• StickyNode (stickies)
• ShapeWithTextNode (shapes with text)
• ConnectorNode (connectors)
• StampNode (stamps)

A typical plugin sample in this repository is organized into a subdirectory containing:

• code.ts: The main logic that interacts with the Figma/FigJam API.
• ui.html: The HTML file used if the plugin displays a user interface.
• tsconfig.json: Configuration for the TypeScript compiler, often referencing shared typings.
• manifest.json: The plugin manifest (required for Figma to recognize the plugin).

To use this sample, your tokens must be defined in JSON following the W3C Design Tokens specification. The structure requires a $value and a $type for primitive tokens, and uses curly brace syntax for aliases.

Example structure:

• Groups/Tokens: Nested objects representing the token hierarchy.
• Values: The $value key holds the token value.
• Types: The $type key defines the token type (e.g., number).
• Aliases: Use the format "{group name.token name}" to reference other tokens.

{
  "group name": {
    "token name": {
      "$value": 1234,
      "$type": "number"
    }
  },
  "alias name": {
    "$value": "{group name.token name}"
  }
}

To make your plugin look and feel like the native Figma interface, you can use the following resources:

1. UI2 Design System: Figma's official design system (available via Figma design files).
2. Tom's Figma Plugin DS: A community-provided set of CSS and JavaScript files specifically for plugin UI.

The Annotations Sample is a Dev Mode plugin that does not include a plugin UI. You can execute it using one of the following methods:

1. Plugin Tab: Open the Plugins tab within Dev Mode.
2. Quick Actions Menu: Use the keyboard shortcut CMD+/ (on macOS) or CTRL+/ (on Windows) to trigger the Quick Actions menu and run the plugin.

To develop this sample plugin, you must serve the plugin's UI (index.html) from a local web server and compile the TypeScript source files.

1. Serve the UI: Run a local server on port 4004 to host the index.html file. This is required because the plugin uses a hosted UI.
2. Compile the code: Use the TypeScript compiler to build the project files.

For plugins with a UI, it is recommended to match the style and behavior of Figma to ensure a consistent user experience. Two recommended approaches are:

• Figma Plugin DS: A lightweight UI library for styling Figma plugins.
• Create Figma Plugin UI: A library of production-grade Preact components that replicate the Figma editor's UI design.

These samples use TypeScript to leverage the Figma typed plugin API. To use them, you must install TypeScript and compile the code before importing them into the Figma desktop app.

1. Install TypeScript globally: npm install -g typescript

2. Install dependencies: Run this in the root directory to install the latest Figma typings. npm install

3. Compile a specific plugin: Navigate to the plugin's directory and run the TypeScript compiler. cd <plugin-directory> tsc

4. Import into Figma: In the Figma desktop app, go to Plugins > Development > Import plugin from manifest....

$ npm install -g typescript
$ npm install
$ cd barchart
$ tsc

In Figma plugins using a UI (iframe), you communicate with the plugin logic (the code.ts sandbox) by sending messages through parent.postMessage. The message must follow the structure { pluginMessage: { type: string, ...payload } }.

In this esbuild-react sample, the App component demonstrates two message types:

1. create-rectangles: Sends a count number to the plugin.
2. cancel: Signals the plugin to stop or cancel the current operation.

// Example: Sending a command to the plugin
const onCreate = () => {
  const count = Number(inputRef.current?.value || 0);
  parent.postMessage(
    { pluginMessage: { type: "create-rectangles", count } },
    "*"
  );
};

// Example: Sending a cancel command
const onCancel = () => {
  parent.postMessage({ pluginMessage: { type: "cancel" } }, "*");
};