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.

Practice

1. What is the main purpose of using content generation plugins like Lorem Ipsum and icon plugins in Figma when designing dashboards?

easy

A. To automatically generate final reports from data

B. To connect live data sources to the dashboard

C. To quickly add sample text and icons for layout visualization

D. To create complex data models within Figma

Solution

1. Step 1: Understand the role of content generation plugins

   These plugins add placeholder text and icons to help visualize design before real data is available.

2. Step 2: Identify the main benefit in dashboard design

   They speed up the design process by showing how the layout will look with content.

3. Final Answer:

   To quickly add sample text and icons for layout visualization -> Option C

4. Quick Check:

   Content generation = sample text + icons [OK]

Hint: Think: placeholder content for design speed [OK]

Common Mistakes:

• Confusing content plugins with data connection tools
• Assuming plugins generate real data
• Thinking plugins create final reports

2. Which of the following is the correct way to insert Lorem Ipsum text using a Figma content generation plugin?

easy

A. Right-click on an icon and select 'Add Lorem Ipsum'

B. Draw a shape and the plugin automatically fills it with Lorem Ipsum

C. Paste Lorem Ipsum text manually without using any plugin

D. Select a text box, then choose the Lorem Ipsum plugin and click 'Insert Text'

Solution

1. Step 1: Identify the plugin usage process

   Typically, you select a text box and then use the plugin to insert placeholder text.

2. Step 2: Eliminate incorrect options

   Shapes don't get text automatically; right-clicking icons doesn't add text; manual pasting is not plugin use.

3. Final Answer:

   Select a text box, then choose the Lorem Ipsum plugin and click 'Insert Text' -> Option D

4. Quick Check:

   Insert Lorem Ipsum = select text box + plugin [OK]

Hint: Select text box first, then insert text via plugin [OK]

Common Mistakes:

• Trying to insert text into shapes automatically
• Using icon context menu for text insertion
• Ignoring the need to select a text box first

3. Given a Figma frame with empty text boxes and icon placeholders, what will happen after applying a Lorem Ipsum plugin and an icon plugin respectively?

medium

A. Text boxes fill with sample text; icon placeholders fill with relevant icons

B. Text boxes remain empty; icon placeholders fill with random colors

C. Text boxes fill with real data; icon placeholders remain unchanged

D. Both text boxes and icons are deleted automatically

Solution

1. Step 1: Understand plugin effects on placeholders

   Lorem Ipsum plugin fills text boxes with sample text; icon plugin replaces placeholders with icons.

2. Step 2: Check other options for correctness

   Text boxes do not stay empty or get real data; icons do not get random colors or get deleted.

3. Final Answer:

   Text boxes fill with sample text; icon placeholders fill with relevant icons -> Option A

4. Quick Check:

   Plugins fill placeholders correctly [OK]

Hint: Plugins fill placeholders, not delete or leave empty [OK]

Common Mistakes:

• Expecting real data instead of sample text
• Thinking icons get random colors instead of icons
• Assuming placeholders get deleted

4. You tried to use an icon plugin in Figma but the icons did not appear after clicking 'Insert'. What is the most likely cause?

medium

A. The plugin only works with text boxes, not icons

B. No icon placeholder or frame was selected before running the plugin

C. Figma does not support icon plugins

D. The plugin requires internet connection but you are offline

Solution

1. Step 1: Check plugin usage requirements

   Icon plugins need a selected placeholder or frame to know where to insert icons.

2. Step 2: Evaluate other options

   Plugins do support icons; Figma supports icon plugins; internet may be needed but selection is more common cause.

3. Final Answer:

   No icon placeholder or frame was selected before running the plugin -> Option B

4. Quick Check:

   Selection required before plugin use [OK]

Hint: Always select target area before plugin insertion [OK]

Common Mistakes:

• Assuming plugin works without selection
• Believing Figma lacks icon plugin support
• Ignoring internet connection issues

5. You want to create a professional dashboard mockup quickly using Figma. Which combination of content generation plugins should you use to best simulate real data and visuals?

hard

A. Lorem Ipsum plugin for sample text and an icon plugin for relevant icons

B. Only an icon plugin, ignoring text content

C. A plugin that generates random colors for shapes only

D. Manual typing of text and searching icons online

Solution

1. Step 1: Identify plugins that simulate text and visuals

   Lorem Ipsum provides sample text; icon plugins add meaningful icons to enhance visuals.

2. Step 2: Compare with other options

   Ignoring text or using only colors misses key content; manual typing is slow and inefficient.

3. Final Answer:

   Lorem Ipsum plugin for sample text and an icon plugin for relevant icons -> Option A

4. Quick Check:

   Best mockup = sample text + icons [OK]

Hint: Combine text and icons plugins for full mockup [OK]

Common Mistakes:

• Using only icons without text
• Relying on color plugins alone
• Typing content manually wasting time