2c:null 2d:["$","title",null,{"children":"Figma API | Steffen Hänsch | Observable"}] 32:T41c,isoStyles = { const rotation = 'rotateX(20deg) rotateY(0deg) rotateZ(-30deg)' const transforms = [ { index: 1, translate: [420, 100, 0], scale: 0.7, }, { index: 2, translate: [200, -380, 0], scale: 0.6, }, { index: 3, translate: [200, 380, 0], scale: 0.6, }, { index: 4, translate: [700, 680, 0], scale: 0.6, }, { index: 5, translate: [700, -100, 0], scale: 0.6, }, ]; const isoTransforms = transforms.reduce((acc, transform) => { const t = transform.translate; return `${acc} .iso-${transform.index} { transform: ${rotation} scale(${transform.scale}) translateX(${t[0]}px) translateY(${t[1]}px) translateZ(${t[2]}px); }` }, '') return html` ` }33:[] 30:{"id":"699434b39823d8b2","slug":"figma-api","title":"Figma API","thumbnail":"991f6a92d4f133a40780e9f7b6c21bc453b6e900db44fc75259a9071b15522e3","access_level":"public","create_time":"$D2018-06-01T11:53:55.588Z","update_time":"$D2018-06-06T20:18:35.793Z","view_time":null,"first_public_time":"$D2018-06-06T20:18:44.054Z","has_unpublished_edits":null,"fork":false,"stars":8,"starred":false,"owner":{"type":"team","id":"9f0a5778a9e93283","login":"s-haensch","name":"Steffen Hänsch","avatar_url":"https://avatars-next.observableusercontent.com/f8ae573e8ef3303795b5c307e85b49753b498e72abbb8e91b0f4ba73e7327515","tier":"starter_2024"},"version":634,"publish_version":634,"role":null,"authored":false,"authors":[{"type":"individual","id":"54a3b46988329fc4","login":"s-haensch","name":"Steffen Hänsch","avatar_url":"https://avatars-next.observableusercontent.com/f8ae573e8ef3303795b5c307e85b49753b498e72abbb8e91b0f4ba73e7327515","tier":null}],"members":[{"type":"individual","id":"54a3b46988329fc4","login":"s-haensch","name":"Steffen Hänsch","avatar_url":"https://avatars-next.observableusercontent.com/f8ae573e8ef3303795b5c307e85b49753b498e72abbb8e91b0f4ba73e7327515","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":11,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Figma API","cells":[{"id":519,"value":"md`\n# Figma API\nYou can use the [Figma Web API](https://www.figma.com/developers) to get realtime urls of the image assets found in a figma file. This example creates a realtime collage of all artboards found in a music player mockup. Here is the link to the [source file](https://www.figma.com/file/KjLtQ0EsRt6FEXIuMEYaM8Yq/Figma-%C3%97-Observable).\n\nChange the access token and file key to display your own artboards. \n_(See the instructions below)_\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"{\n const urls = file_key === 'KjLtQ0EsRt6FEXIuMEYaM8Yq'\n // is music player mock\n ? [\n imageUrls[idByName('Playing', frames).id],\n imageUrls[idByName('Playlists', frames).id],\n imageUrls[idByName('User', frames).id],\n imageUrls[idByName('Artist', frames).id],\n imageUrls[idByName('Playlist', frames).id]\n ]\n // is any other figma file\n : Object.keys(imageUrls).map((key) => imageUrls[key]);\n \n return html`\n

= 1 ? urls[1] : null});\">

= 1 ? urls[2] : null});\">

= 1 ? urls[3] : null});\">

= 1 ? urls[4] : null});\">

= 1 ? urls[0] : null});\">

'\n`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"md`### Step 1\ncreate an access token _(you need to be logged in to your account)_ for your figma files and paste it into the text field below: \nhttps://www.figma.com/developers/explorer#personal-access-token\n\n_You should not publish your access token like I did here. For this example I am using a disposable figma account, not my actual account._\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"viewof access_token = text({value: \"1509-6b95d05f-8b9b-4346-9887-366e12a34981\", description: \"paste your access token here\", submit: \"Go\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"md`\n### Step 2\n\ncopy the file key (24-digit hash) from the **share link** and paste it here: \n

-https://www.figma.com/file/KjLtQ0EsRt6FEXIuMEYaM8Yq/file-name

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"viewof file_key = text({value: \"KjLtQ0EsRt6FEXIuMEYaM8Yq\", description: \"paste file key here\", submit: \"Go\"})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"fileContent = getFigmaFile(access_token, file_key)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"frames = getFrames(fileContent)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"imageUrls = {\n const imageIds = frames.map(o => o.id).join(',');\n return fetch(`https://api.figma.com/v1/images/${file_key}?ids=${imageIds}`, {\n method: 'GET',\n headers: { \"x-figma-token\": access_token }\n }).then(function(response) {\n return response.json()\n .then((jsonContent) => jsonContent['images'])\n .catch((jsonParseErr) => jsonParseErr);\n }).catch((error) => error)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":514,"value":"html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"md`\n### utility\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"traverseByType = (ob, type) => {\n const frames = [];\n\n function traverse(o, arr) {\n if (typeof o == \"object\") {\n for (let key in o) {\n // append to results\n if (key === 'type' && o.type === type) {\n arr.push({\n id: o.id,\n type: o.type,\n name: o.name,\n });\n }\n\n // traverse children\n if (key === 'children') {\n for (let i = 0; i < o.children.length; i += 1) {\n traverse(o.children[i], frames);\n }\n }\n }\n }\n\n return arr;\n }\n \n return traverse(ob, frames);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"getFigmaFile = (token, fileKey) => {\n return fetch('https://api.figma.com/v1/files/' + fileKey, {\n method: 'GET',\n headers: { \"x-figma-token\": token }\n })\n .then((response) => response.json())\n .catch((error) => error);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":599,"value":"getFrames = (fileContent) => {\n const doc = fileContent.document;\n return traverseByType(doc, 'FRAME');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":612,"value":"idByName = (name, frames) => _.find(frames, (frame) => frame.name === name)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":572,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"listStyles = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"md`### libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"import { text, slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"