25:["$","title",null,{"children":"Figma API Starter | Sabina Vakhitova | Observable"}] 49:[{"id":"8fc7e0cb5cf010affb31e84ccf54d80d3950639f7cf8eccbcf59699a81a8bc99d4b4ba659bfda2ebcf2965cb4d7f1016b1d51b6a4a2ccb175e9d9cc29e1d1b05","href":"https://static.observableusercontent.com/files/8fc7e0cb5cf010affb31e84ccf54d80d3950639f7cf8eccbcf59699a81a8bc99d4b4ba659bfda2ebcf2965cb4d7f1016b1d51b6a4a2ccb175e9d9cc29e1d1b05","name":"data@1.json","type":"application/json","lastModified":1693333111919.959,"size":24365},{"id":"5458d876ccecd02d22b5e87f054c5978e071699070f2af9c0bb44d27e298c3f4d4604781a06d76a45dad45437586dbb641c510f5bb83a7c7197988c15adb7f63","href":"https://static.observableusercontent.com/files/5458d876ccecd02d22b5e87f054c5978e071699070f2af9c0bb44d27e298c3f4d4604781a06d76a45dad45437586dbb641c510f5bb83a7c7197988c15adb7f63","name":"images2 (1).json","type":"application/json","lastModified":1693333111919.959,"size":20646}] 29:{"id":"5ae95410defd1251","slug":null,"title":"Figma API Starter","thumbnail":"d4db0e2633569a4a93c27be74fec84aef3fb32cdabd8ce6fedf47236c9e3f5b5","access_level":"public","create_time":"$D2023-08-29T18:18:31.919Z","update_time":"$D2023-08-29T18:18:31.919Z","view_time":null,"first_public_time":"$D2023-08-29T18:18:31.919Z","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":"0957255aec3944a8","login":"vahisa","name":"Sabina Vakhitova","avatar_url":"https://avatars-next.observableusercontent.com/2d9e91f69922db160ddb68f88221e1d15bbc3f44cca71f28365639c2629bc233","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":739,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9c578f014b5dcb93","login":"vahisa","name":"Sabina Vakhitova","avatar_url":"https://avatars-next.observableusercontent.com/2d9e91f69922db160ddb68f88221e1d15bbc3f44cca71f28365639c2629bc233","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"9c578f014b5dcb93","login":"vahisa","name":"Sabina Vakhitova","avatar_url":"https://avatars-next.observableusercontent.com/2d9e91f69922db160ddb68f88221e1d15bbc3f44cca71f28365639c2629bc233","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(\"images2 (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":true,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 24:null