Community resources and templates in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to insert a community template into your Figma project.

Figma

figma.import[1]('community-template-url')

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

Atemplate

Bfile

Cresource

Dcomponent

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'template' instead of 'file' causes an error.

Confusing 'component' with 'file'.

The importFile method is used to bring community templates into your Figma project.

2fill in blank

medium

Complete the code to list all community templates available in Figma.

Figma

const templates = figma.[1]Templates()

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

Aget

Bfetch

Clist

Dload

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'get' or 'fetch' which are not valid here.

Using 'load' which is incorrect for listing.

The listTemplates() function retrieves all available community templates.

3fill in blank

hard

Fix the error in the code to correctly apply a community template to the current page.

Figma

figma.applyTemplate([1])

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

AtemplateId

Btemplate_id

Cid

Dtemplate

Attempts:

3 left

💡 Hint

Common Mistakes

Using snake_case like 'template_id' causes errors.

Using just 'id' is ambiguous.

The correct parameter name is templateId to specify which template to apply.

4fill in blank

hard

Fill both blanks to correctly filter community templates by category and popularity.

Figma

const filtered = templates.filter(t => t.[1] === 'UI Kits' && t.[2] > 1000)

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

Acategory

Bpopularity

Ctype

Ddownloads

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'type' instead of 'category' for filtering.

Using 'downloads' instead of 'popularity' which may not exist.

Use category to filter by template type and popularity to filter by number of likes or downloads.

5fill in blank

hard

Fill all three blanks to create a new page, import a community template, and add it to the page.

Figma

const page = figma.create[1]('New Design Page');
const template = figma.import[2]('template-url');
page.[3](template);

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

APage

BTemplate

CappendChild

DaddChild

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'addChild' which is not a Figma method.

Confusing 'Template' with 'File' in import.

Using lowercase for 'Page' creation.

Create a new Page, import a Template, then appendChild adds the template to the page.