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 createGroup which is not a node creation method
Confusing components with frames
✗ Incorrect
In Figma plugin API, createFrame() creates a new frame node.
2fill in blank
mediumComplete the code to set the fill color of a rectangle in Figma.
Figma
rect.fills = [{ type: 'SOLID', color: { r: 1, g: 0, [1]: 0 } }]; Drag options to blanks, or click blank then click option'
Attempts:
3 left
💡 Hint
Common Mistakes
Using full words like 'blue' instead of 'b'
Using incorrect property names like 'bColor'
✗ Incorrect
The color object uses r, g, and b for red, green, and blue values.
3fill in blank
hardFix the error in the code to load a Figma document by key.
Figma
const file = await figma.client.[1]('file_key');
Drag options to blanks, or click blank then click option'
Attempts:
3 left
💡 Hint
Common Mistakes
Using non-existent methods like loadFile or openFile
Confusing with fetchFile which is not part of Figma API
✗ Incorrect
The Figma API client uses getFile to retrieve a file by its key.
4fill in blank
hardFill both blanks to create a text node and set its font size.
Figma
const text = figma.create[1](); await figma.loadFontAsync({ family: 'Roboto', style: 'Regular' }); text.[2] = 24;
Drag options to blanks, or click blank then click option'
Attempts:
3 left
💡 Hint
Common Mistakes
Using createFrame instead of createText
Setting fontWeight instead of fontSize
✗ Incorrect
You create a text node with createText() and set its font size with fontSize.
5fill in blank
hardFill all three blanks to create a rectangle, set its size, and add it to the current page.
Figma
const rect = figma.create[1](); rect.[2] = 100; rect.[3] = 200; figma.currentPage.[4](rect);
Drag options to blanks, or click blank then click option'
Attempts:
3 left
💡 Hint
Common Mistakes
Using createFrame instead of createRectangle
Mixing up width and height properties
Using addChild instead of appendChild
✗ Incorrect
Create a rectangle with createRectangle(), set width and height, then add it to the page with appendChild().