2 Plugin Setup

This topic provides information on Plugin Setup.

  1. Install the latest version of Node.js supported for your device specifications, before downloading the plugin zip file.

    Note:

    This is a one-time step, need not to be repeated.
  2. Download the zip file and extract it in the desired destination folder.
  3. Upon extraction, there will be two folders:
    1. Backend:
      1. Open the command terminal and navigate to the Backend Folder.
      2. In the terminal, enter the following command:
        npm install

        (For Mac Users, append ‘sudo’ before the command)

      3. Now, enter the following command in the same terminal:
        npm run build
    2. UI:
      1. Open the command terminal and navigate to the UI Folder.
      2. In the terminal, enter the following command:
        npm install

        (For Mac Users, append ‘sudo’ before the command)

      3. Now, enter the following command in the same terminal:
        npm link ‘../Backend/’

        Note:

        The ‘../Backend/’ is the path to the Backend folder.
      4. Enter the following command to build the UI of the plugin:
        ojet build
  4. Move to Figma, right click on any page, Click Plugin, then click Development , and then click Import plugin from manifest.

    Figure 2-1 Import plugin from manifest



  5. Navigate to the UI folder, and click on the manifest.json file inside the UI folder, that needs to be imported.

    The plugin is successfully imported inside Figma and is ready to use.