Transition animations in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set a simple fade transition between frames.

Figma

figma.currentPage.selection[0].prototype = { transition: { type: '[1]' } }

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

Apush

Bfade

Cslide

DsmartAnimate

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'slide' instead of 'fade' causes a sliding effect, not fading.

The 'fade' transition smoothly changes the opacity between frames.

2fill in blank

medium

Complete the code to set the duration of a transition to 300 milliseconds.

Figma

figma.currentPage.selection[0].prototype.transition.duration = [1]

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

A0.3

B300

C'300ms'

D3

Attempts:

3 left

💡 Hint

Common Mistakes

Using 300 directly causes an error because duration expects seconds.

Duration is set in seconds as a decimal, so 0.3 means 300 milliseconds.

3fill in blank

hard

Fix the error in the code to apply a 'smart animate' transition correctly.

Figma

figma.currentPage.selection[0].prototype.transition.type = '[1]'

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

AsmartAnimate

Bfade

Cslide

Dinstant

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'smartanimate' (lowercase 'a') causes the transition to fail.

'smartAnimate' enables smooth animation between similar layers in frames.

4fill in blank

hard

Fill both blanks to create a transition with easing 'easeInOut' and duration 0.5 seconds.

Figma

figma.currentPage.selection[0].prototype.transition = { easing: '[1]', duration: [2] }

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

AeaseInOut

BeaseOut

C0.5

D1

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up easing types or using duration in milliseconds.

'easeInOut' creates a smooth start and end easing, and duration 0.5 means half a second.

5fill in blank

hard

Fill all three blanks to set a transition with type 'push', easing 'easeIn', and duration 0.4 seconds.

Figma

figma.currentPage.selection[0].prototype.transition = { type: '[1]', easing: '[2]', duration: [3] }

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

Apush

BeaseIn

C0.4

Dfade

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing 'push' with 'fade' or wrong easing names.

This sets a 'push' transition that moves frames, with easing 'easeIn' for a smooth start, lasting 0.4 seconds.