Figma vs Sketch vs Adobe XD - Interactive Practice

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'

ARectangle

BGroup

CComponent

DFrame

Attempts:

3 left

💡 Hint

Common Mistakes

Using createRectangle instead of createFrame

Using createGroup which is not a node creation method

Confusing components with frames

In Figma plugin API, createFrame() creates a new frame node.

2fill in blank

medium

Complete 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'

AbColor

Bblue

Cb

DblueValue

Attempts:

3 left

💡 Hint

Common Mistakes

Using full words like 'blue' instead of 'b'

Using incorrect property names like 'bColor'

The color object uses r, g, and b for red, green, and blue values.

3fill in blank

hard

Fix 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'

AgetFile

BloadFile

CfetchFile

DopenFile

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-existent methods like loadFile or openFile

Confusing with fetchFile which is not part of Figma API

The Figma API client uses getFile to retrieve a file by its key.

4fill in blank

hard

Fill 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'

AText

BfontSize

CfontWeight

DFrame

Attempts:

3 left

💡 Hint

Common Mistakes

Using createFrame instead of createText

Setting fontWeight instead of fontSize

You create a text node with createText() and set its font size with fontSize.

5fill in blank

hard

Fill 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'

ARectangle

Bwidth

Cheight

DappendChild

Attempts:

3 left

💡 Hint

Common Mistakes

Using createFrame instead of createRectangle

Mixing up width and height properties

Using addChild instead of appendChild

Create a rectangle with createRectangle(), set width and height, then add it to the page with appendChild().