Why frames are the foundation of design in Figma - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a new frame in Figma.

Figma

const frame = figma.create[1]();

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

AFrame

BRectangle

CText

DComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Using createRectangle() instead of createFrame()

Confusing frames with components

In Figma, createFrame() is used to create a new frame, which is the foundation for organizing design elements.

2fill in blank

medium

Complete the code to set the frame's layout mode to vertical.

Figma

frame.layoutMode = '[1]';

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

Agrid

BHORIZONTAL

CVERTICAL

DNONE

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'HORIZONTAL' when vertical stacking is needed

Using 'grid' which is not a valid layoutMode value

Setting layoutMode to VERTICAL arranges child elements stacked top to bottom inside the frame.

3fill in blank

hard

Fix the error in the code to add a child rectangle to the frame.

Figma

const rect = figma.createRectangle();
frame.[1](rect);

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

AappendChild

BaddChild

Cappend

DappendChildNode

Attempts:

3 left

💡 Hint

Common Mistakes

Using addChild which does not exist

Using append which is not a method on frames

The correct method to add a child node to a frame in Figma plugin API is appendChild().

4fill in blank

hard

Fill both blanks to set the frame's padding and spacing between items.

Figma

frame.padding[1] = 16;
frame.item[2] = 8;

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

ATop

BBottom

CSpacing

DPadding

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing padding with spacing properties

Using incorrect property names like paddingBottom for top padding

Use paddingTop to set the top padding and itemSpacing to set space between child items in a frame.

5fill in blank

hard

Fill all three blanks to create a frame, set its layout, and add a text child.

Figma

const frame = figma.create[1]();
frame.layoutMode = '[2]';
const text = figma.create[3]();
frame.appendChild(text);

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

AFrame

BVERTICAL

CText

DRectangle

Attempts:

3 left

💡 Hint

Common Mistakes

Using Rectangle instead of Text for the child node

Setting layoutMode to an invalid value

This code creates a frame, sets its layout to VERTICAL, creates a text node, and adds it as a child to the frame.

Practice

1. Why are frames considered the foundation of design in Figma?

easy

A. Because they group elements to keep designs organized

B. Because they add colors automatically

C. Because they create animations by default

D. Because they replace text layers

Solution

1. Step 1: Understand the role of frames

   Frames group multiple design elements together, which helps keep the design organized and manageable.

2. Step 2: Recognize the importance of organization

   Organized designs are easier to edit, move, and resize, making frames foundational.

3. Final Answer:

   Because they group elements to keep designs organized -> Option A

4. Quick Check:

   Frames group elements = A [OK]

Hint: Frames group elements for easy organization [OK]

Common Mistakes:

• Thinking frames add colors automatically
• Confusing frames with animation tools
• Believing frames replace text layers

2. Which of the following is the correct way to create a frame in Figma?

easy

A. Select elements and press Ctrl + G

B. Select elements and press Ctrl + Shift + G

C. Select elements and press Ctrl + Alt + F

D. Select elements and press Ctrl + Alt + G

Solution

1. Step 1: Recall Figma shortcut for frames

   In Figma, pressing Ctrl + Alt + G creates a frame from selected elements.

2. Step 2: Differentiate from grouping shortcuts

   Ctrl + G groups elements but does not create frames; frames have more layout control.

3. Final Answer:

   Select elements and press Ctrl + Alt + G -> Option D

4. Quick Check:

   Frame shortcut = Ctrl + Alt + G [OK]

Hint: Use Ctrl + Alt + G to frame selected elements [OK]

Common Mistakes:

• Using Ctrl + G which only groups, not frames
• Confusing frame shortcut with group ungroup
• Trying Ctrl + Shift + G which ungroups

3. What happens when you resize a frame containing multiple elements in Figma?

medium

A. All elements inside resize proportionally if constraints are set

B. Elements inside stay fixed and do not move or resize

C. Elements get deleted automatically

D. Only text elements resize, others stay fixed

Solution

1. Step 1: Understand frame resizing behavior

   Frames control layout. If constraints are set on elements inside, resizing the frame resizes or moves elements proportionally.

2. Step 2: Recognize constraints effect

   Constraints define how elements behave when their frame changes size, enabling responsive design.

3. Final Answer:

   All elements inside resize proportionally if constraints are set -> Option A

4. Quick Check:

   Constraints + frame resize = proportional element resize [OK]

Hint: Set constraints to resize elements with frames [OK]

Common Mistakes:

• Assuming elements never resize inside frames
• Thinking elements get deleted on resize
• Believing only text resizes automatically

4. You created a frame but when you resize it, the elements inside do not move or resize. What is the likely issue?

medium

A. The frame is locked and cannot be resized

B. Constraints on elements are not set properly

C. You grouped elements instead of framing them

D. The elements are outside the frame boundaries

Solution

1. Step 1: Check constraints on elements inside the frame

   If constraints are not set, elements will not move or resize with the frame.

2. Step 2: Differentiate from other issues

   Locking the frame prevents resizing, but question says frame resizes. Grouping affects grouping behavior but not frame resizing. Elements outside frame won't be affected by resizing frame.

3. Final Answer:

   Constraints on elements are not set properly -> Option B

4. Quick Check:

   Missing constraints cause no resize [OK]

Hint: Check element constraints if resizing fails [OK]

Common Mistakes:

• Assuming frame is locked without checking
• Confusing grouping with framing
• Ignoring element position relative to frame

5. You want to create a responsive design where buttons inside a frame stay centered when the frame resizes. Which steps should you take?

hard

A. Lock the frame size to prevent resizing

B. Group buttons and resize the group manually each time

C. Set button constraints to center horizontally and vertically inside the frame

D. Place buttons outside the frame and move them manually

Solution

1. Step 1: Use constraints to control button position

   Setting constraints to center horizontally and vertically ensures buttons stay centered when the frame resizes.

2. Step 2: Avoid manual resizing or locking

   Grouping or manual moves do not automate responsiveness. Locking frame prevents resizing, defeating responsive design.

3. Final Answer:

   Set button constraints to center horizontally and vertically inside the frame -> Option C

4. Quick Check:

   Constraints center buttons for responsiveness [OK]

Hint: Use center constraints for responsive button placement [OK]

Common Mistakes:

• Relying on manual resizing instead of constraints
• Placing elements outside frames for responsiveness
• Locking frames which stops resizing