Device-specific frames (mobile, desktop, tablet) in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a mobile frame with the correct preset size.

Figma

const mobileFrame = figma.createFrame();
mobileFrame.resize([1], 812);

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

A375

B1024

C1440

D1920

Attempts:

3 left

💡 Hint

Common Mistakes

Using desktop or tablet widths for mobile frames.

The width for a standard mobile frame is 375 pixels.

2fill in blank

medium

Complete the code to set the frame name to 'DESKTOP' for a desktop frame.

Figma

const desktopFrame = figma.createFrame();
desktopFrame.name = '[1]';

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

ADESKTOP

BMOBILE

CTABLET

DCANVAS

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'MOBILE' or 'TABLET' for desktop frames.

Setting the frame name to 'DESKTOP' identifies it as a desktop frame.

3fill in blank

hard

Fix the error in the code to create a tablet frame with correct width.

Figma

const tabletFrame = figma.createFrame();
tabletFrame.resize([1], 1024);

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

A375

B1920

C768

D1440

Attempts:

3 left

💡 Hint

Common Mistakes

Using mobile or desktop widths for tablet frames.

The standard width for a tablet frame is 768 pixels.

4fill in blank

hard

Fill both blanks to create a desktop frame with width 1440 and height 1024.

Figma

const desktopFrame = figma.createFrame();
desktopFrame.resize([1], [2]);

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

A1440

B1024

C768

D375

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping width and height values.

Desktop frames commonly use 1440 width and 1024 height.

5fill in blank

hard

Fill all three blanks to create a mobile frame, set its name, and resize it correctly.

Figma

const mobileFrame = figma.createFrame();
mobileFrame.name = '[1]';
mobileFrame.resize([2], [3]);

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

AMOBILE

B375

C812

DDESKTOP

Attempts:

3 left

💡 Hint

Common Mistakes

Using desktop name or wrong sizes for mobile frames.

Mobile frames have name 'MOBILE' and size 375x812 pixels.