Smart animate in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the animation type to smart animate in Figma.

Figma

figma.currentPage.selection[0].animationType = '[1]'

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

AsmartAnimate

Bsmart-animate

Csmart_animate

Dsmart animate

Attempts:

3 left

💡 Hint

Common Mistakes

Using spaces or hyphens in the animation type string.

Using incorrect casing like all lowercase.

In Figma plugin API, the correct property value for smart animate is smartAnimate without spaces or hyphens.

2fill in blank

medium

Complete the code to create a transition with smart animate easing in Figma.

Figma

const transition = { type: '[1]', easing: 'ease-in-out', duration: 300 }

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

AsmartAnimate

Binstant

Csmart-animate

Ddissolve

Attempts:

3 left

💡 Hint

Common Mistakes

Using hyphens or spaces in the type string.

Confusing with other transition types.

The transition type for smart animate must be smartAnimate exactly as per Figma API.

3fill in blank

hard

Fix the error in the code to correctly assign smart animate to a prototype node.

Figma

node.prototype = { transition: { type: '[1]' } }

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

Asmart_animate

Bsmart-animate

Csmart animate

DsmartAnimate

Attempts:

3 left

💡 Hint

Common Mistakes

Using hyphens or spaces in the type string.

Using underscores instead of camelCase.

The correct transition type string is smartAnimate without spaces or special characters.

4fill in blank

hard

Fill both blanks to create a smart animate transition with 500ms duration.

Figma

const transition = { type: '[1]', duration: [2] }

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

AsmartAnimate

Binstant

C500

D300

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong type strings.

Using duration as a string instead of a number.

The transition type must be smartAnimate and the duration is set to 500 milliseconds.

5fill in blank

hard

Fill all three blanks to define a smart animate transition with ease-in easing and 400ms duration.

Figma

const transition = { type: '[1]', easing: '[2]', duration: [3] }

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

Adissolve

Bease-in

C400

DsmartAnimate

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong easing values.

Using duration as a string instead of a number.

The transition type is smartAnimate, easing is ease-in, and duration is 400 milliseconds.