29:null 2a:["$","title",null,{"children":"Figma API Starter | Michele Mauri | Observable"}] 2f:[{"id":"8fc7e0cb5cf010affb31e84ccf54d80d3950639f7cf8eccbcf59699a81a8bc99d4b4ba659bfda2ebcf2965cb4d7f1016b1d51b6a4a2ccb175e9d9cc29e1d1b05","href":"https://static.observableusercontent.com/files/8fc7e0cb5cf010affb31e84ccf54d80d3950639f7cf8eccbcf59699a81a8bc99d4b4ba659bfda2ebcf2965cb4d7f1016b1d51b6a4a2ccb175e9d9cc29e1d1b05","name":"data@1.json","type":"application/json","lastModified":1693922558972.324,"size":24365},{"id":"5458d876ccecd02d22b5e87f054c5978e071699070f2af9c0bb44d27e298c3f4d4604781a06d76a45dad45437586dbb641c510f5bb83a7c7197988c15adb7f63","href":"https://static.observableusercontent.com/files/5458d876ccecd02d22b5e87f054c5978e071699070f2af9c0bb44d27e298c3f4d4604781a06d76a45dad45437586dbb641c510f5bb83a7c7197988c15adb7f63","name":"images2 (1).json","type":"application/json","lastModified":1693922558972.324,"size":20646}] 2d:{"id":"308a5ea782dddcbc","slug":null,"title":"Figma API Starter","thumbnail":"d4db0e2633569a4a93c27be74fec84aef3fb32cdabd8ce6fedf47236c9e3f5b5","access_level":"public","create_time":"$D2023-09-05T14:02:38.972Z","update_time":"$D2023-09-05T14:02:38.972Z","view_time":null,"first_public_time":"$D2023-09-05T14:02:38.972Z","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":"4be3d1d68b4eab5a","login":"mikima","name":"Michele Mauri","avatar_url":"https://avatars-next.observableusercontent.com/d76c5aa791b94671438fe822f26d224a383c16411fbbd792799179b3c3912918","tier":"starter_2024"},"version":739,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"88179e875414a070","login":"mikima","name":"Michele Mauri","avatar_url":"https://avatars-next.observableusercontent.com/d76c5aa791b94671438fe822f26d224a383c16411fbbd792799179b3c3912918","tier":null}],"members":[{"type":"individual","id":"88179e875414a070","login":"mikima","name":"Michele Mauri","avatar_url":"https://avatars-next.observableusercontent.com/d76c5aa791b94671438fe822f26d224a383c16411fbbd792799179b3c3912918","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"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","output":"$undefined","database":"$undefined"},{"id":705,"value":"To fetch information about a document:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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","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","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","output":"$undefined","database":"$undefined"},{"id":461,"value":"scale = 1 // between 0.01 and 4","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"format = \"svg\" // or \"png\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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(\"images2 (1).json\").json() // cached version for demo","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2e:"$2d:body"