Installing and managing plugins in Figma - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to open the Figma plugin menu.

Figma

figma.showUI(__html__, { width: 240, height: 320 });
figma.ui.postMessage({ type: '[1]' });

Drag options to blanks, or click blank then click option'

Aopen-plugin-menu

Bopen-file-menu

Cclose-plugin-menu

Drefresh-plugin

Attempts:

3 left

💡 Hint

Common Mistakes

Using message types unrelated to plugins like 'open-file-menu'.

Using 'close-plugin-menu' instead of opening.

The message type open-plugin-menu triggers the plugin menu to open in Figma.

2fill in blank

medium

Complete the code to install a plugin by its ID.

Figma

await figma.clientStorage.setAsync('pluginId', '[1]');

Drag options to blanks, or click blank then click option'

Ainstall_plugin

B12345

Cplugin_install

Dcom.figma.plugin.example

Attempts:

3 left

💡 Hint

Common Mistakes

Using numeric IDs instead of string IDs.

Using command names instead of plugin IDs.

The plugin ID is usually a string like com.figma.plugin.example that uniquely identifies the plugin.

3fill in blank

hard

Fix the error in the code to uninstall a plugin.

Figma

await figma.clientStorage.[1]('pluginId');

Drag options to blanks, or click blank then click option'

AdeleteAsync

BremoveAsync

CunsetAsync

DclearAsync

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'deleteAsync' which does not exist.

Using 'clearAsync' which clears all storage.

The correct method to remove a stored item is removeAsync.

4fill in blank

hard

Fill both blanks to load and run a plugin by its ID.

Figma

const pluginId = '[1]';
figma.[2](pluginId);

Drag options to blanks, or click blank then click option'

Acom.figma.plugin.example

BrunPluginById

CloadPlugin

DstartPlugin

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect method names like 'loadPlugin' or 'startPlugin'.

Using numeric IDs instead of string IDs.

You need the plugin ID string and the method runPluginById to run the plugin.

5fill in blank

hard

Fill all three blanks to check if a plugin is installed, install it if not, and then run it.

Figma

const pluginId = '[1]';
const installed = await figma.clientStorage.getAsync(pluginId);
if (!installed) {
  await figma.clientStorage.setAsync(pluginId, true);
}
figma.[2](pluginId);
figma.ui.postMessage({ type: '[3]' });

Drag options to blanks, or click blank then click option'

Acom.figma.plugin.example

BrunPluginById

Cplugin-installed

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong message types in the postMessage call.

Using incorrect method names for running plugins.

The plugin ID is needed first, then runPluginById runs it, and the message type plugin-installed confirms installation.