Export and handoff plugins in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to export selected layers as PNG in Figma plugin.

Figma

figma.currentPage.selection.forEach(node => node.exportAsync({ format: '[1]' }))

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

APNG

BPDF

CJPG

DSVG

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing a format that does not support transparency like JPG.

PNG is a common format for exporting images with transparency, suitable for handoff.

2fill in blank

medium

Complete the code to generate a JSON with node names and their widths for handoff.

Figma

const sizes = figma.currentPage.selection.map(node => ({ name: node.name, width: node.[1] }))

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

Awidth

By

Cx

Dheight

Attempts:

3 left

💡 Hint

Common Mistakes

Using height instead of width.

Width property gives the horizontal size of the node, useful for layout handoff.

3fill in blank

hard

Fix the error in the code to export all selected nodes as SVG files.

Figma

for (const node of figma.currentPage.selection) {
  const svg = await node.exportAsync({ format: '[1]' })
  figma.ui.postMessage({ svg })
}

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

AJPG

BPNG

CSVG

DPDF

Attempts:

3 left

💡 Hint

Common Mistakes

Using raster formats like PNG or JPG for vector export.

SVG is the correct format for vector graphics export.

4fill in blank

hard

Fill both blanks to create a plugin that exports selected nodes as PNG and sends their names to UI.

Figma

const exports = [];
for (const node of figma.currentPage.selection) {
  const image = await node.exportAsync({ format: '[1]' });
  exports.push({ name: node.[2], image });
}
figma.ui.postMessage(exports);

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

APNG

BSVG

Cname

Did

Attempts:

3 left

💡 Hint

Common Mistakes

Using SVG instead of PNG for export.

Using 'id' instead of 'name' for UI display.

We export as PNG and send the node's name for identification in the UI.

5fill in blank

hard

Fill all three blanks to create a plugin snippet that exports selected nodes as JPG, collects their heights, and sends data to UI.

Figma

const data = await Promise.all(figma.currentPage.selection.map(async node => ({
  image: await node.exportAsync({ format: '[1]' }),
  height: node.[2],
  label: node.[3]
})));
figma.ui.postMessage(data);

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

APNG

Bheight

Cname

DJPG

Attempts:

3 left

💡 Hint

Common Mistakes

Using PNG instead of JPG for export.

Using width instead of height.

Using id instead of name for label.

JPG is used for export, height property for vertical size, and name for labeling nodes.