Practice - 5 Tasks
Answer the questions below
1fill in blank
easyComplete 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'
Attempts:
3 left
💡 Hint
Common Mistakes
Using createRectangle instead of createFrame
Using createText when a frame is needed
✗ Incorrect
In Figma's plugin API, createFrame() creates a new frame object.
2fill in blank
mediumComplete the code to set the frame's background color to white.
Figma
frame.fills = [{ type: 'SOLID', color: [1] }]; Drag options to blanks, or click blank then click option'
Attempts:
3 left
💡 Hint
Common Mistakes
Using black color { r: 0, g: 0, b: 0 }
Using red color instead of white
✗ Incorrect
White color in RGB is represented by r=1, g=1, b=1 in Figma's color system.
3fill in blank
hardFix the error in the code to add the frame to the current page.
Figma
figma.currentPage.[1](frame); Drag options to blanks, or click blank then click option'
Attempts:
3 left
💡 Hint
Common Mistakes
Using addChild which does not exist
Using append which is not a method here
✗ Incorrect
The correct method to add a node to the page is appendChild().
4fill in blank
hardFill both blanks to create a text node and set its content.
Figma
const text = figma.create[1](); text.[2] = 'Design Sprint';
Drag options to blanks, or click blank then click option'
Attempts:
3 left
💡 Hint
Common Mistakes
Using 'name' property instead of 'characters' to set text
Creating a Frame instead of Text node
✗ Incorrect
Use createText() to create a text node and set its characters property to change the text content.
5fill in blank
hardFill all three blanks to group the frame and text into a component.
Figma
const component = figma.create[1](); component.appendChild([2]); component.appendChild([3]);
Drag options to blanks, or click blank then click option'
Attempts:
3 left
💡 Hint
Common Mistakes
Using createGroup instead of createComponent
Appending wrong variables or in wrong order
✗ Incorrect
Create a component with createComponent() and add the frame and text nodes as children.