Public
Edited
Aug 3, 2023
32 forks
11 stars
Insert cell
Insert cell
Insert cell
url = "https://www.figma.com/file/A3XoZhmJtENSXdh7EnEHbw/2x2-demo"
Insert cell
data = hasApiKey
? figma(`/v1/files/${parseFigmaURL(url).fileId}`)
: FileAttachment("data@1.json").json() // cached version for demo
Insert cell
Insert cell
scale = 1 // between 0.01 and 4
Insert cell
format = "svg" // or "png"
Insert cell
Insert cell
// Skip the first because the overall document doesn't return an image
objects = flattenChildren(data.document).slice(1)
Insert cell
images = hasApiKey
? (
await figma(`/v1/images/${parseFigmaURL(url).fileId}`, {
ids: objects.map((d) => d.id),
scale,
format
})
).images
: FileAttachment("images2 (1).json").json() // cached version for demo
Insert cell
import {figma, hasApiKey, flattenChildren, parseFigmaURL} from "@observablehq/figma-api-helpers"
Insert cell
// For a notebook to access Secrets, it must statically reference one; this cell grants Secret access to the notebook from which we import the Figma API helpers. `undefined &&` prevents the Secret from appearing in plaintext in the Inspector.
undefined && Secret("FIGMA_TOKEN")
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more