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

Question

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

xetra11 opened this issue 5 years ago · 15 comments

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>

Answer 1 · 2020-10-06T21:58:58.000Z

This is an interesting idea. I have to think about this in a little bit more details.

BTW: Custom components allow you to hook in you own VUE widgets, so basically the other direction

Answer 2 · 2020-10-06T22:24:43.000Z

@KlausSchaefers
Yeah I realized that I can refer to a Vue Component via a Custom Component definition in the Figma Plugin. However I was missing that this "hooked" Vue Component is being generated by Figma as well - that is somewhat the missing link for me in the whole concept.

I hope you can get it working. Unfortunately I have no spare time to help out :(

Answer 3 · 2020-10-14T07:41:57.000Z

@KlausSchaefers any updates for this?
I wonder if you might can write down a developer documentation for contributors. I'd love to help out here but need a bit of a guided insight to the codebase to understand the Figma context etc.

Answer 4 · 2020-10-14T07:57:06.000Z

Good idea. There are some messy parts of the code that I should clean up before. I will start with this during the next week. If you want to take a look before, the main entry point is

https://github.com/KlausSchaefers/vue-low-code/blob/master/src/qux/QUX.vue

The Figma component is just a thin wrapper around QUX. In here the Quant-UX 'flat' design model is turned into a properly nested tree model (see ModelTransformer). Also the CSS is generated and added to the DOM as a singleton.

Most of the magic happens are:

https://github.com/KlausSchaefers/vue-low-code/tree/master/src/qux/core

To allow the rendering of dedicated components, one has to touch the ModelTransformer (change CSS prefixes), the QUX main component. Most importantly one has to change the loading strategy to not load several times the tree model and to avoid issues with the CSS.

I will try to structure the code better in the next weeks.

Cheers,

Klaus

Answer 5 · 2020-10-18T19:16:57.000Z

Hi,

I think a found a smart way to solve the issue. I will still have to play a little. Most likely there will be a first solution end of week.

Answer 6 · 2020-10-19T09:42:56.000Z

@KlausSchaefers ok am curious how it works out!

Answer 7 · 2020-10-21T20:47:48.000Z

Hi,

can you update the due-low-code?

nom update vue-low-code

The version should be 4.0.33

You can new 'select' parts by name:

    <Figma :figma="figma"
      v-model="viewModel" ref="figma"
      selected="FigmaBox"
      :config="config"/>

Answer 8 · 2020-10-22T05:15:39.000Z

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?

Answer 9 · 2020-10-23T08:47:53.000Z

Hi,

take a look at the transformer package. There is a Class Tree2Component.

Also, I was thinking about mixing Code with designs even easier. What about something like

<FigmaDesignSystem :figma="app">

<div>Bla</div>
...<RedBox :value="viewMode.name"> ...

</FigmaDesignSystem>

The idea is that RedBox would be replaced automatically with the figma component with this name... So one could use FigmaComponents as Tags...

Cheers,

Klaus

Answer 10 · 2020-10-23T20:05:56.000Z

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?

https://github.com/KlausSchaefers/vue-low-code/blob/master/src/qux/transformer/Tree2Component.js

Answer 11 · 2020-11-06T21:17:12.000Z

Hi,

take a look at the transformer package. There is a Class Tree2Component.

Also, I was thinking about mixing Code with designs even easier. What about something like
<FigmaDesignSystem :figma="app">

<div>Bla</div>
...<RedBox :value="viewMode.name"> ...

</FigmaDesignSystem>
The idea is that RedBox would be replaced automatically with the figma component with this name... So one could use FigmaComponents as Tags...

Cheers,

Klaus

As Tags and therefore as own "custom" components one would create with Vue.js. I like that. But What about having at least some hint that it's being created by Figma. Like <f-redbox> like a the F is indicator for that. Just like Vuetify has v-button. I kinda like that approach to distinguish own custom components and components coming or being generated by frameworks/libs

Answer 12 · 2020-11-09T23:29:09.000Z

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.

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

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

Thanks again for the idea! All feedback is welcome!

Answer 13 · 2020-11-11T17:33:35.000Z

Take a look at this example: https://github.com/KlausSchaefers/figma-design-system-example.

Answer 14 · 2020-11-11T17:33:54.000Z

https://klausschaefers.github.io/figma-design-system-example/#/

Answer 15 · 2020-11-20T15:14:47.000Z

Very awesome - that's how I imagined it to work! Great work!