Design-to-code workflow in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to export a frame as a PNG file in Figma.

Figma

figma.currentPage.findOne(node => node.name === 'Frame1').exportAsync({ format: '[1]' })

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

APNG

BSVG

CJPG

DPDF

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing 'jpg' which does not support transparency

Using 'svg' which exports vector files

To export an image as a PNG, the format must be set to 'PNG'.

2fill in blank

medium

Complete the code to select all components in the current page.

Figma

const components = figma.currentPage.findAll(node => node.type === '[1]')

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

ACOMPONENT

BGROUP

CFRAME

DINSTANCE

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'FRAME' which selects frames, not components

Using 'INSTANCE' which selects component instances

The node type for components is 'COMPONENT'.

3fill in blank

hard

Fix the error in the code to create a rectangle and set its fill color to red.

Figma

const rect = figma.createRectangle()
rect.fills = [{ type: 'SOLID', color: [1] }]
figma.currentPage.appendChild(rect)

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

A{ r: 255, g: 0, b: 0 }

B{ r: 1, g: 0, b: 0 }

C{ r: 0, g: 0, b: 255 }

D{ r: 0, g: 1, b: 0 }

Attempts:

3 left

💡 Hint

Common Mistakes

Using 255 instead of 1 for color values

Mixing up color channels

Figma color values are decimals between 0 and 1, so red is { r: 1, g: 0, b: 0 }.

4fill in blank

hard

Fill both blanks to create a text node with content and set its font size.

Figma

const text = figma.createText()
await figma.loadFontAsync({ family: '[1]', style: 'Regular' })
text.characters = '[2]'
text.fontSize = 24
figma.currentPage.appendChild(text)

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

ARoboto

BHello World

CArial

DSample Text

Attempts:

3 left

💡 Hint

Common Mistakes

Using font names not loaded

Leaving text empty

Roboto is a common font family and 'Hello World' is the text content.

5fill in blank

hard

Fill all three blanks to create a component from a frame and rename it.

Figma

const frame = figma.createFrame()
frame.resize(200, 100)
const component = figma.[1]()
component.name = '[2]'
figma.currentPage.appendChild(component)
console.log(component.[3])

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

AcreateComponent

BButton

Cname

Dclone

Attempts:

3 left

💡 Hint

Common Mistakes

Using clone() instead of createComponent()

Logging a method instead of a property

Use createComponent() to make a component, set its name to 'Button', and log its name property.