Skip to content

Instantly share code, notes, and snippets.

@leemartin leemartin/listen.js
Created Sep 7, 2018

Embed
What would you like to do?
Figma x Turn x Codepen
const app = new Vue({
el: '#app',
data() {
return {
figmaToken: '',
baseUrl: 'https://api.figma.com/v1',
fileId: '',
nodeId: '',
images: null,
nodes: null
}
},
computed: {
background() {
var fill = this.nodes[0].fills.find(fill => {
return fill.visible != false
})
if (fill) {
if (fill.type == "SOLID") {
return {
'background-color': tinycolor.fromRatio(fill.color)
}
}
if (fill.type == "IMAGE") {
return {
'background-image': `url(${this.images[fill.imageRef]})`
}
}
if (fill.type == "GRADIENT_LINEAR") {
var colors = fill.gradientStops.map(stop => {
return tinycolor.fromRatio(stop.color)
})
return {
'background-image': `linear-gradient(${colors})`
}
}
} else {
return {
'background': 'transparent'
}
}
},
artwork() {
var fill = this.nodes[1].fills.find(fill => {
return fill.visible != false
})
return fill ? this.images[fill.imageRef] : ""
},
watermark() {
return this.images[this.nodes[2].fills[0].imageRef]
}
},
methods: {
updateFile() {
const urls = [
`${this.baseUrl}/files/${this.fileId}/images`,
`${this.baseUrl}/files/${this.fileId}/nodes?ids=${this.nodeId}`
]
Promise.all(
urls.map(url =>
fetch(url, {
headers: {
'X-FIGMA-TOKEN': this.figmaToken
}
})
.then((response) => {
return Promise.resolve(response.json())
})
)
).then(data => {
this.images = data[0].meta.images
this.nodes = data[1].nodes[this.nodeId].document.children
})
}
},
mounted() {
this.updateFile()
// setInterval(() => {
// this.updateFile()
// }, 5000)
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.