[Feature] Refer to component by ID instead whole file by ID

It should become possible to refer to a Figma component with the <Figma></Figma> Vue.js component. For instance we have these three Figma components:

On each I should be able to use the component name (or a custom id via the figma-low-code plugin). I should then be able to refere to this component like this for example:

Example:

    <Figma :figma="figmaConfig" component="Btn-Single-Sign-On-Google"></Figma>

At the moment I can only refer to the WHOLE file. That is not sufficient since I want to reuse single components. One could now say that Figma components already handles the “reusability” and there is no need to bring this into Vue.js component.

However the idea is to work with that like this: Creating a component only refering to the Figma component not the whole Figma file…

ui/buttons/single-sign-on.vue

<template>
  <div>
    <Figma :figma="figmaConfig" component="Btn-Single-Sign-On-Google" v-model="viewModel"></Figma>
  </div>
</template>

<script>
export default {
  name: 'SingleSignOn',
  data: function () {
    return {
      figmaConfig: {
        figmaFile: '<file-id>',
        figmaAccessKey: '<access-key>'
      },
      viewModel: {
      }
    }
  }
}
</script>

… and the using the Custom component feature of the figma-low-code plugin to refer to this inside another component.

And this Button 1 Figma component I can then refer again in a Vue.js component like this:

ui/groups/login.vue

<template>
  <div>
    <Figma :figma="figmaConfig" component="Group-1" v-model="viewModel"></Figma>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data: function () {
    return {
      figmaConfig: {
         figmaFile: '<file-id>',
         figmaAccessKey: '<access-key>'
      },
      viewModel: {
      }
    }
  }
}
</script>

[KlausSchaefersAtWork]

Hi, the first version of the design system is ready to try:

https://github.com/KlausSchaefers/vue-low-code#Designlet-Mode

The documentation is for Quant-UX but for Figma it works basically the same. Please note that I only import elements (components or not) that are direct children of a root artboard.

1. First you have to register your deisgn

import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import * as VueLowCode from 'vue-low-code'
import figmaDesign from './views/figma-design-system.json'
import quxDesign from './views/qux-design-system.json'

Vue.config.productionTip = false

/*
 * Make sure the design is registered before the App is mounted
 */
async function init () {
    // for live debuging use Figma.createFigmaDesignlets(<FileID>, <AccessKey>)
  await VueLowCode.createFigmaDesignlets(figmaDesign)
  // for live debuging use Figma.createFigmaDesignlets(<sharekey>)
  await VueLowCode.createQUXDesignlets(quxDesign)

  new Vue({
    router,
    render: h => h(App)
  }).$mount('#app')
}

init()

1. Now you can use them as Tags <MyButton /> <MyButton>Hello World</MyButton>

Thanks again for the idea! All feedback is welcome!

[xetra11]

oh exciting! Will take a look in a few! Can you link the commits here so I might take a look how you managed to do it?