Content generation plugins (Lorem ipsum, icons) in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to generate placeholder text using a Lorem Ipsum plugin.

Figma

const placeholderText = figma.plugins.[1]('paragraph');

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

AgenerateLorem

BloremIpsum

CinsertLorem

DcreateLorem

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect function names like generateLorem or createLorem.

The loremIpsum function is the correct method to generate placeholder text in Figma plugins.

2fill in blank

medium

Complete the code to insert an icon from the icon plugin into the current Figma document.

Figma

figma.currentPage.appendChild(figma.plugins.[1]('iconName'));

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

AaddIcon

BinsertIcon

CgetIcon

DcreateIcon

Attempts:

3 left

💡 Hint

Common Mistakes

Using methods that do not exist like getIcon or addIcon.

The createIcon method is used to create and insert an icon node in Figma plugins.

3fill in blank

hard

Fix the error in the code to correctly generate 3 paragraphs of Lorem Ipsum text.

Figma

const text = figma.plugins.loremIpsum({ count: [1] });

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

Athree

B'3'

C3

Dcount

Attempts:

3 left

💡 Hint

Common Mistakes

Passing '3' as a string instead of a number.

The count property expects a number, so 3 without quotes is correct.

4fill in blank

hard

Fill both blanks to create a dictionary mapping icon names to their SVG data using the icon plugin.

Figma

const icons = { [1]: figma.plugins.createIcon([2]) };

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

A'home'

B'user'

Chome

Duser

Attempts:

3 left

💡 Hint

Common Mistakes

Using unquoted keys or mismatched icon names.

Both blanks require the string 'home' to map the icon name to the created icon.

5fill in blank

hard

Fill all three blanks to generate 5 icons named 'star' and add them to the current page.

Figma

for(let i = 0; i < [1]; i++) { const icon = figma.plugins.[2]('[3]'); figma.currentPage.appendChild(icon); }

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

A5

BcreateIcon

Cstar

DinsertIcon

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong method names or unquoted icon names.

We loop 5 times, use createIcon to generate the icon, and specify 'star' as the icon name.