30: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` ` }31:[] 2e:{"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"},{"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"},{"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"},{"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"},{"id":491,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":14,"value":"viewof file_key = text({value: \"KjLtQ0EsRt6FEXIuMEYaM8Yq\", description: \"paste file key here\", submit: \"Go\"})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":470,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"fileContent = getFigmaFile(access_token, file_key)","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"frames = getFrames(fileContent)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":514,"value":"html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"md`\n### utility\n`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":599,"value":"getFrames = (fileContent) => {\n const doc = fileContent.document;\n return traverseByType(doc, 'FRAME');\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":612,"value":"idByName = (name, frames) => _.find(frames, (frame) => frame.name === name)","pinned":false,"hidden":false,"mode":"ojs"},{"id":572,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":436,"value":"listStyles = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"md`### libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"import { text, slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}