Mobile-first design workflow in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the frame size for a mobile-first design in Figma.

Figma

frame.resize([1], 812)  // Set width for iPhone X height fixed

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

A375

B1024

C1440

D1920

Attempts:

3 left

💡 Hint

Common Mistakes

Using desktop widths like 1024 or 1440 instead of mobile width.

The width 375 pixels is the standard width for iPhone X, a common mobile-first design target.

2fill in blank

medium

Complete the code to add a vertical layout grid suitable for mobile screens in Figma.

Figma

frame.layoutGrids = [{ type: '[1]', sectionSize: 8, visible: true }]

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

Arows

Bcolumns

Cgrid

Dnone

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing 'columns' which is more common for desktop layouts.

Vertical layout grids use rows to help align content vertically on mobile screens.

3fill in blank

hard

Fix the error in the code to set constraints for a mobile-first button component in Figma.

Figma

button.constraints = { horizontal: '[1]', vertical: 'TOP' }

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

ACENTER

BSCALE

CLEFT_RIGHT

DRIGHT

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'CENTER' which fixes the center but not width.

For responsive width on mobile, 'LEFT_RIGHT' constraint makes the button stretch horizontally.

4fill in blank

hard

Fill both blanks to create a responsive mobile-first text style with proper font size and line height in Figma.

Figma

textStyle = { fontSize: [1], lineHeight: [2] }

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

A16

B24

C20

D28

Attempts:

3 left

💡 Hint

Common Mistakes

Using desktop font sizes like 20 or 28 which are too large for mobile body text.

Common mobile text uses 16px font size with 24px line height for readability.

5fill in blank

hard

Fill all three blanks to define a mobile-first color style with primary color, opacity, and blend mode in Figma.

Figma

colorStyle = { color: '[1]', opacity: [2], blendMode: '[3]' }

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

A#007AFF

B0.8

CNORMAL

D#FF9500

Attempts:

3 left

💡 Hint

Common Mistakes

Using blend modes other than 'NORMAL' which can cause unexpected color effects.

#007AFF is a common blue primary color for mobile apps, opacity 0.8 for slight transparency, and blend mode 'NORMAL' for default blending.