Inspect mode in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to select an element in Inspect mode.

Figma

element = document.querySelector('[1]')

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

A#button

Binspect

Cdiv

D.frame

Attempts:

3 left

💡 Hint

Common Mistakes

Using class selector '.' instead of ID selector '#'.

Using tag name without prefix.

In Inspect mode, selecting an element by its ID uses the '#' prefix. '#button' selects the element with ID 'button'.

2fill in blank

medium

Complete the code to get the width of the selected element in Inspect mode.

Figma

width = element.getBoundingClientRect().[1]

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

Aheight

Btop

Cwidth

Dleft

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'height' instead of 'width'.

Using 'top' or 'left' which are position properties.

The getBoundingClientRect() method returns the size of an element and its position. To get the width, use the width property.

3fill in blank

hard

Fix the error in the code to get the background color of the element in Inspect mode.

Figma

bgColor = window.getComputedStyle(element).[1]('background-color')

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

AgetPropertyValue

BgetStyle

CgetBackground

DgetColor

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-existent methods like 'getStyle' or 'getBackground'.

Trying to access CSS properties directly without using the method.

The correct method to get a CSS property value is getPropertyValue. Other options are invalid and cause errors.

4fill in blank

hard

Fill both blanks to create a function that returns the height and width of an element in Inspect mode.

Figma

function getSize(element) {
  return { height: element.getBoundingClientRect().[1], width: element.getBoundingClientRect().[2] };
}

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

Aheight

Bwidth

Ctop

Dleft

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'top' or 'left' instead of 'height' or 'width'.

Mixing up the order of height and width.

The getBoundingClientRect() method returns an object with properties including height and width. These are used to get the element's size.

5fill in blank

hard

Fill all three blanks to write code that gets the font size, font weight, and color of an element in Inspect mode.

Figma

const style = window.getComputedStyle(element);
const fontSize = style.[1]('font-size');
const fontWeight = style.[2]('font-weight');
const color = style.[3]('color');

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

AgetPropertyValue

BgetStyle

DgetColor

Attempts:

3 left

💡 Hint

Common Mistakes

Using different or invalid methods for each property.

Trying to access properties directly without a method.

The method getPropertyValue is used to get any CSS property value. It works for 'font-size', 'font-weight', and 'color'.