Table of contents
  1. Figma Resources
    1. Install NodeJS
    2. Install a previous or customized versions
      1. Create new resource IDs
      2. Build the resources
      3. Upload the resources

Figma Resources

The Figma plugin enables various features that enhance the tools that Figma provides. The Auto Content Preview widget adds even more ways to see how your lists render with various parameters. The latest releases are available in the Figma Community and on our Figma Community profile.

If you’re using an older version of the Automotive Design for Compose SDK then it might be necessary to install a previous or customized version of the plugin or widget. If so, follow the instructions on this page.

Install NodeJS

NodeJS is required to compile the Figma resources. On Linux it can be installed by running apt-get install nodejs npm.

Install a previous or customized versions

Note: The plugin and widget need to be installed only once per Figma organization. If your account is part of an organization, then you can check to see whether they’re already installed in the Resources tab of the editor. If so, skip this section.

Important: Plugins and widgets must be installed with the Figma desktop app, which only runs on macOS and Windows.

The plugin is located in the support-figma/extended-layout-plugin/ directory of the DesignCompose source. The widget is located in the support-figma/auto-content-preview-widget/ directory.

Create new resource IDs

Figma uses unique IDs for each plugin and widget. Before uploading your own version of a resource you need to create a new ID for it.

  1. Follow Create a plugin for development to create a new empty plugin template.

  2. Open the template’s manifest.json file and copy the id instance.

  3. Open the manifest.json file for the DesignCompose widget or plugin and replace the existing id instance with the one from the template.

Build the resources

Build each by running the following:

npm install

npm run build

This produces a code.js file. That file, the manifest.json file, and the ui.html file are needed to install the plugin.

Upload the resources

You can install the DesignCompose Figma plugin and widget in the Figma desktop app on macOS and Windows. Download the Figma app from Figma downloads.

Install the Figma resources by following these steps:

  1. Open the Figma app and open any Figma document or create a new one.

  2. Open the Menu (the Figma logo in the upper left) and select Plugins > Development > Import plugin From manifest.

  3. Click Find manifest.json, go to the build output of the support-figma/extended-layout-plugin/ directory, and select the manifest.json file.

  4. Go to Menu > Widgets > Development > Import widget from manifest.

  5. Click Find manifest.json, go to the build output of the support-figma/auto-content-preview-widget/ directory, and select the manifest.json file.

When installed, the Figma plugin is listed in the Figma context menu under Plugins > Development whenever a document is open.

To keep everyone in an organization on the same version of the plugin, we recommend your Figma administrator publish the plugin to your Figma organization. Doing so means only one person needs to extract the plugin when an update is released.

To learn of new and updated plugins, see the Figma Community plugins website.