exportAsync
Exports the node in the format given by settings. Image formats (PNG, JPG), PDF, and the video formats (MP4, GIF, WebM) return a Uint8Array of the encoded file; SVG_STRING returns a string and JSON_REST_V1 returns an object.
If the manifest contains "documentAccess": "dynamic-page", and the node is a PageNode, you must first call loadAsync to access this function.
Supported on:
- BooleanOperationNode
- CodeBlockNode
- ComponentNode
- ComponentSetNode
- ConnectorNode
- EllipseNode
- EmbedNode
- FrameNode
- GroupNode
- HighlightNode
- InstanceNode
- InteractiveSlideElementNode
- LineNode
- LinkUnfurlNode
- MediaNode
- PageNode
- PolygonNode
- RectangleNode
- SectionNode
- ShapeWithTextNode
- SliceNode
- SlideGridNode
- SlideNode
- SlideRowNode
- SlotNode
- StampNode
- StarNode
- StickyNode
- TableNode
- TextNode
- TextPathNode
- TransformGroupNode
- VectorNode
- WashiTapeNode
- WidgetNode
Signature
exportAsync(settings?: ExportSettings): Promise<Uint8Array>
exportAsync(settings: ExportSettingsSVGString): Promise<string>
exportAsync(settings: ExportSettingsREST): Promise<Object>
exportAsync(settings: ExportSettingsMP4 | ExportSettingsGIF | ExportSettingsWEBM): Promise<Uint8Array>
Parameters
settings
When this parameter is absent, this function defaults to exporting as a PNG at 1x resolution.
(async () => {
const polygon = figma.createPolygon()
polygon.pointCount = 6
polygon.fills = [{ type: 'SOLID', color: { r: 1, g: 0, b: 0 } }]
// Export a 2x resolution PNG of the node
const bytes = await polygon.exportAsync({
format: 'PNG',
constraint: { type: 'SCALE', value: 2 },
})
// Add the image onto the canvas as an image fill in a frame
const image = figma.createImage(bytes)
const frame = figma.createFrame()
frame.x = 200
frame.resize(200, 230)
frame.fills = [{
imageHash: image.hash,
scaleMode: "FILL",
scalingFactor: 1,
type: "IMAGE",
}]
})()
(async () => {
// Create a triangle using the VectorPath API
const vector = figma.createVector()
vector.vectorPaths = [{
windingRule: "EVENODD",
data: "M 0 100 L 100 100 L 50 0 Z",
}]
// Export the vector to SVG
const svg = await vector.exportAsync({ format: 'SVG_STRING' })
console.log(svg);
})()
(async () => {
const json = await figma.currentPage.selection[0].exportAsync({format: 'JSON_REST_V1'})
// Return a JSON object in the same format as the Figma REST API response
console.log(json.document)
})()
Passing an ExportSettingsMP4, ExportSettingsGIF, or ExportSettingsWEBM exports a video (returned as a Uint8Array). The exported node must be a top-level frame (a frame placed directly on a page) whose content is animated; the entire frame is encoded across the animation's duration. Calling video export on any other node — including a nested animated frame, or an individual layer that has keyframes but is not itself a top-level frame — rejects with an error. To export the animation a layer participates in, first resolve its enclosing top-level frame with getTopLevelFrame. Video export is only available when running in Figma.
(async () => {
const frame = figma.currentPage.selection[0]?.getTopLevelFrame()
if (!frame) {
figma.notify('Select a frame to export')
return
}
try {
const mp4 = await frame.exportAsync({ format: 'MP4', fps: 30, quality: 'HIGH' })
const gif = await frame.exportAsync({ format: 'GIF', fps: 15, loopCount: 0 })
} catch (e) {
// exportAsync rejects if the frame has no animated content to encode
figma.notify('This frame has no animation to export')
}
})()