Skip to content

Instantly share code, notes, and snippets.

@lzell

lzell/figma_plugin_setup_esbuild.md

Last active May 18, 2023 17:11
Download ZIP

Revisions

  1. lzell revised this gist May 18, 2023. 1 changed file with 16 additions and 0 deletions.
    16 changes: 16 additions & 0 deletions figma_plugin_setup_esbuild.md
    View file
    Original file line number Diff line number Diff line change
    @@ -71,3 +71,19 @@
    ```
    - Run the plugin in Figma and verify that three orange rectangles appear (instead of five).
    - Make `npm run watch` run the bundler and the typechecker on every file system change, and multiplex the output:
    - Install the unix `parallel` program with `brew install parallel`
    - Modify `package.json` to contain:
    ```
    "scripts": {
    "typecheck": "tsc --project tsconfig.json",
    "bundle": "./node_modules/.bin/esbuild code.ts --bundle --outfile=code.js",
    "watch_typecheck": "npm run typecheck -- --watch --preserveWatchOutput",
    "watch_bundle": "npm run bundle -- --watch=forever",
    "watch": "parallel --ungroup 'npm run' ::: watch_typecheck watch_bundle"
    },
    ```
    - Run `npm run watch` and make a source change. Verify both the typechecker and bundler emit output.
  2. lzell revised this gist May 18, 2023. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion figma_plugin_setup_esbuild.md
    View file
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,7 @@
    ### (figma plugin, getting started)

    - Open the Figma desktop app
    - Go to Plugins > Development > New Plugin > Figma Design > Run Once
    - Go to Plugins > Development > New Plugin > Figma Design > Run Once
    This creates a plugin with starter source code to drop five orange rectangles on the canvas
    - Setup the plugin:

  3. lzell renamed this gist May 18, 2023. 1 changed file with 0 additions and 0 deletions.
    0 gistfile1.md → figma_plugin_setup_esbuild.md
    View file
    File renamed without changes.
  4. lzell renamed this gist May 18, 2023. 1 changed file with 0 additions and 0 deletions.
    0 gistfile1.txt → gistfile1.md
    View file
    File renamed without changes.
  5. lzell created this gist May 18, 2023.
    73 changes: 73 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,73 @@
    ## 2023-05-17
    ### (figma plugin, getting started)

    - Open the Figma desktop app
    - Go to Plugins > Development > New Plugin > Figma Design > Run Once
    This creates a plugin with starter source code to drop five orange rectangles on the canvas
    - Setup the plugin:

    ```
    cd <project-dir>
    npm install -g typescript
    npm install --save-dev @figma/plugin-typings
    ```

    - Browse type definitions at `<project-dir>/node_modules/@figma/plugin-typings/plugin-api.d.ts`

    - Build the plugin once with `npm run build`.
    Or watch the filestystem and rebuild on source changes with `npm run watch`.

    - Run the plugin in Figma at `Plugins > Development > <project-name>`

    - Once the plugin is run once, run again with `cmd+opt+p`

    ### (figma plugin, bundle multiple source files, esbuild, plugin setup)
    - Install esbuild:

    ```
    npm install --save-dev --save-exact esbuild
    ```

    - Add the following compiler options to `tsconfig.json`:

    ```
    "compilerOptions": {
    ...
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "noEmit": true,
    }
    ```

    - Split the template project into a couple source files to ensure that imports work as expected.
    - Add `lib.ts` with contents:

    ```
    export function getNumberOfRectangles(): number {
    return 3;
    }
    ```

    - Modify `code.ts` to contain:

    ```
    import { getNumberOfRectangles } from './lib.ts'
    ...
    for (let i = 0; i < getNumberOfRectangles(); i++) {
    ...
    }
    ```

    - Ensure the type checker is happy:

    ```
    tsc -p tsconfig.json
    ```

    - Ensure the bundler is happy:

    ```
    ./node_modules/.bin/esbuild code.ts --bundle --outfile=code.js
    ```

    - Run the plugin in Figma and verify that three orange rectangles appear (instead of five).