CSS properties export in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to export CSS properties for a selected element in Figma.

Figma

const cssProperties = figma.[1][0].exportCSS();

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

AselectedElement

BcurrentSelection

Cselection

DselectedNode

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name that does not exist in the Figma API.

Trying to call exportCSS() on the entire selection array instead of a single node.

In Figma plugin API, figma.selection returns the currently selected nodes. To export CSS properties, you use the selected node from figma.selection.

2fill in blank

medium

Complete the code to get the CSS string from the exported properties.

Figma

const cssString = cssProperties.[1];

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

AcssText

BtoString

Cstring

Dcss

Attempts:

3 left

💡 Hint

Common Mistakes

Using toString which is a method, not a property.

Using string or css which do not exist.

The exportCSS() method returns an object with a cssText property containing the CSS string.

3fill in blank

hard

Fix the error in the code to correctly export CSS properties from the first selected node.

Figma

const cssProperties = figma.selection[1].exportCSS();

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

A.first()

B[0]

C(0)

D{0}

Attempts:

3 left

💡 Hint

Common Mistakes

Using parentheses or curly braces which are invalid for array access.

Using a method like first() which does not exist.

figma.selection is an array. To access the first node, use bracket notation [0].

4fill in blank

hard

Fill both blanks to export CSS properties and log the CSS text to the console.

Figma

const cssProps = figma.selection[1].[2]();
console.log(cssProps.cssText);

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

A[0]

BexportCSS

CgetCSS

DtoCSS

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect method names like getCSS or toCSS.

Not using array indexing to select the node.

You must access the first selected node with [0] and call exportCSS() to get the CSS properties.

5fill in blank

hard

Fill all three blanks to export CSS properties, get the CSS text, and assign it to a variable.

Figma

const cssProps = figma.selection[1].[2]();
const cssText = cssProps.[3];

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

A[0]

BexportCSS

CcssText

DtoString

Attempts:

3 left

💡 Hint

Common Mistakes

Using toString instead of cssText.

Not indexing the selection array before calling the method.

Access the first selected node with [0], call exportCSS() to get CSS properties, then get the CSS string from cssText.