25:["$","title",null,{"children":"Figma API Starter | Kijk Wijzer | Observable"}] 49:[{"id":"8fc7e0cb5cf010affb31e84ccf54d80d3950639f7cf8eccbcf59699a81a8bc99d4b4ba659bfda2ebcf2965cb4d7f1016b1d51b6a4a2ccb175e9d9cc29e1d1b05","href":"https://static.observableusercontent.com/files/8fc7e0cb5cf010affb31e84ccf54d80d3950639f7cf8eccbcf59699a81a8bc99d4b4ba659bfda2ebcf2965cb4d7f1016b1d51b6a4a2ccb175e9d9cc29e1d1b05","name":"data@1.json","type":"application/json","lastModified":1690757504518.237,"size":24365},{"id":"33e708f48a393619c4de674f6ab6e56340a71aac894a584ab61ea748401386c843983626f7a4e51d16cf58badb63e6b0ee2c297995aff2a362495f965efaf385","href":"https://static.observableusercontent.com/files/33e708f48a393619c4de674f6ab6e56340a71aac894a584ab61ea748401386c843983626f7a4e51d16cf58badb63e6b0ee2c297995aff2a362495f965efaf385","name":"images@1.json","type":"application/json","lastModified":1690757504518.237,"size":3612}] 29:{"id":"7dadac41808707e9","slug":null,"title":"Figma API Starter","thumbnail":"d4db0e2633569a4a93c27be74fec84aef3fb32cdabd8ce6fedf47236c9e3f5b5","access_level":"public","create_time":"$D2023-07-30T22:51:44.518Z","update_time":"$D2023-07-30T22:51:44.518Z","view_time":null,"first_public_time":"$D2023-07-30T22:51:44.518Z","has_unpublished_edits":null,"fork":{"id":"68c17f880fc1f2de","slug":"figma-api-starter","title":"Figma API Starter","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"b2936b8ff0a99e6f","login":"4dff54d9582cda87","name":"Kijk Wijzer","avatar_url":"https://avatars-next.observableusercontent.com/520ff341f9a280bff8cb4c51ac8ed79461646db84a610aa61dd588acc4fbd2a2","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":737,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4dff54d9582cda87","login":"4dff54d9582cda87","name":"Kijk Wijzer","avatar_url":"https://avatars-next.observableusercontent.com/520ff341f9a280bff8cb4c51ac8ed79461646db84a610aa61dd588acc4fbd2a2","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"4dff54d9582cda87","login":"4dff54d9582cda87","name":"Kijk Wijzer","avatar_url":"https://avatars-next.observableusercontent.com/520ff341f9a280bff8cb4c51ac8ed79461646db84a610aa61dd588acc4fbd2a2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Figma API Starter","cells":[{"id":56,"value":"# Figma API Starter\n

[Docs](https://www.figma.com/developers/api)

\n\n1. Create a [Figma access token](https://www.figma.com/developers/api#access-tokens) \n2. Save it in a [Secret](https://observablehq.com/@observablehq/secrets?collection=@observablehq/getting-data-in-and-out) called `FIGMA_TOKEN`\n3. ${hasApiKey ? \"✅ Secret found\" : \"⚠️ Secret not found\"}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":705,"value":"To fetch information about a document:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":510,"value":"url = \"https://www.figma.com/file/A3XoZhmJtENSXdh7EnEHbw/2x2-demo\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"data = hasApiKey\n ? figma(`/v1/files/${parseFigmaURL(url).fileId}`)\n : FileAttachment(\"data@1.json\").json() // cached version for demo","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"To get all image assets for that document:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"scale = 1 // between 0.01 and 4","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"format = \"svg\" // or \"png\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":618,"value":"

\n ${objects.map(obj => htl.html`

\n ${obj.id}\n

${obj.name}

`)}\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":643,"value":"// Skip the first because the overall document doesn't return an image\nobjects = flattenChildren(data.document).slice(1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"images = hasApiKey\n ? (\n await figma(`/v1/images/${parseFigmaURL(url).fileId}`, {\n ids: objects.map((d) => d.id),\n scale,\n format\n })\n ).images\n : FileAttachment(\"images@1.json\").json() // cached version for demo","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"import {figma, hasApiKey, flattenChildren, parseFigmaURL} from \"@observablehq/figma-api-helpers\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":726,"value":"// 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.\nundefined && Secret(\"FIGMA_TOKEN\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 24:null