Figma x Turn x Codepen

listen.js

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)
  }
})