Interface overview (toolbar, layers, properties) in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to select the tool for drawing rectangles in Figma's toolbar.

Figma

toolbar.selectTool('[1]')

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

Atext

Bmove

Cpen

Drectangle

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing 'text' or 'pen' instead of 'rectangle'.

In Figma, the rectangle tool is selected by using 'rectangle' as the tool name.

2fill in blank

medium

Complete the code to get the name of the top layer in the layers panel.

Figma

topLayerName = layersPanel.layers[[1]].name

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

A-1

B1

C0

Dlength

Attempts:

3 left

💡 Hint

Common Mistakes

Using 1 or -1 which refer to other layers.

The top layer is at index 0 in the layers array.

3fill in blank

hard

Fix the error in the code to change the opacity property of the selected layer.

Figma

selectedLayer.properties.opacity = [1]

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

A0.5

B50

C'0.5'

D'50%'

Attempts:

3 left

💡 Hint

Common Mistakes

Using strings like '50%' or '0.5' instead of numeric 0.5.

Opacity values are decimals between 0 and 1, so 0.5 means 50% opacity.

4fill in blank

hard

Fill both blanks to add a new layer named 'Button' and set its visible property to true.

Figma

newLayer = layersPanel.addLayer(name=[1], visible=[2])

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

A'Button'

Btrue

Cfalse

D'Layer1'

Attempts:

3 left

💡 Hint

Common Mistakes

Using false for visibility or wrong layer names.

The new layer's name should be 'Button' and visibility set to true to show it.

5fill in blank

hard

Fill all three blanks to filter layers by type 'frame', sort them by name, and get the first layer's id.

Figma

frameLayers = layersPanel.layers.filter(layer => layer.type === [1]).sort((a, b) => a.name.[2](b.name)); firstLayerId = frameLayers[[3]].id

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

A'frame'

BlocaleCompare

C0

D'group'

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong type strings or incorrect sort method or index.

Filter by 'frame' type, sort by name using localeCompare, and get the first layer at index 0.