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.

Practice

1. What is the main purpose of plugins in Figma?

easy

A. To delete Figma files automatically

B. To change the Figma interface color

C. To create new Figma accounts

D. To add extra features and tools to Figma

Solution

1. Step 1: Understand what plugins do

   Plugins add new features or tools that Figma does not have by default.

2. Step 2: Compare options

   Only To add extra features and tools to Figma describes adding extra features; others are unrelated to plugins.

3. Final Answer:

   To add extra features and tools to Figma -> Option D

4. Quick Check:

   Plugins extend Figma's capabilities = D [OK]

Hint: Plugins add new tools to Figma [OK]

Common Mistakes:

• Thinking plugins change interface colors
• Confusing plugins with account management
• Assuming plugins delete files automatically

2. Which menu path do you use to install a plugin in Figma?

easy

A. Resources > Plugins

B. File > Export

C. Edit > Preferences

D. View > Layers

Solution

1. Step 1: Recall where plugins are installed

   Plugins are installed from the Resources menu under the Plugins tab.

2. Step 2: Eliminate incorrect options

   File > Export is for exporting files, Edit > Preferences is for settings, View > Layers shows layers.

3. Final Answer:

   Resources > Plugins -> Option A

4. Quick Check:

   Install plugins via Resources > Plugins = A [OK]

Hint: Find plugins under Resources > Plugins [OK]

Common Mistakes:

• Looking in File menu for plugins
• Confusing Preferences with plugin installation
• Searching in View menu instead of Resources

3. After installing a plugin, where can you manage it to update or remove it?

medium

A. In the File menu under Save As

B. In the Plugins section under Resources

C. In the Layers panel

D. In the Export settings

Solution

1. Step 1: Identify where plugins are managed

   Plugins are managed in the same place they are installed: Resources > Plugins.

2. Step 2: Check other options

   File > Save As is for saving files, Layers panel shows design layers, Export settings are for exporting files.

3. Final Answer:

   In the Plugins section under Resources -> Option B

4. Quick Check:

   Manage plugins in Resources > Plugins = B [OK]

Hint: Manage plugins where you install them: Resources > Plugins [OK]

Common Mistakes:

• Trying to manage plugins in Layers panel
• Looking for plugin options in Export settings
• Confusing file saving with plugin management

4. You tried to install a plugin but it does not appear in your plugin list. What is the most likely issue?

medium

A. The plugin is not compatible with your Figma version

B. You need to restart Figma to see new plugins

C. You installed it from the wrong menu

D. You must create a new file to see plugins

Solution

1. Step 1: Consider plugin compatibility

   If a plugin does not appear after installation, it may not be compatible with your Figma version.

2. Step 2: Evaluate other options

   Installing from the wrong menu usually prevents installation; restarting Figma is rarely needed; creating a new file does not affect plugin visibility.

3. Final Answer:

   The plugin is not compatible with your Figma version -> Option A

4. Quick Check:

   Plugin compatibility issue = A [OK]

Hint: Check plugin compatibility if it doesn't show up [OK]

Common Mistakes:

• Assuming restart is always needed
• Thinking new files show plugins
• Confusing installation menu errors with compatibility

5. You want to share a plugin you installed with your team. What is the best way to manage this in Figma?

hard

A. Create a shared Figma file and embed the plugin inside

B. Send the plugin file via email to your team

C. Ask each team member to install the plugin from Resources > Plugins

D. Use the Layers panel to copy the plugin to others

Solution

1. Step 1: Understand plugin sharing in Figma

   Plugins are installed individually by users from Resources > Plugins; they cannot be embedded or copied via files or layers.

2. Step 2: Evaluate options

   Sending plugin files by email or embedding in files is not supported; Layers panel manages design elements, not plugins.

3. Final Answer:

   Ask each team member to install the plugin from Resources > Plugins -> Option C

4. Quick Check:

   Each user installs plugins individually = C [OK]

Hint: Team members install plugins individually from Resources [OK]

Common Mistakes:

• Trying to share plugins via files or layers
• Sending plugin files by email
• Assuming plugins embed inside Figma files