klausschaefers / figma-low-code Goto Github PK

Hi! :)
I really interesting about figma low code. and I read this article (https://uxdesign.cc/figma-low-code-a-new-way-to-tackle-design-hand-offs-a72cb109a455?gi=e452f9c367d8). I was very agree that code generation fail in agile project if code generation couldn't keep the business code written before auto generated to solve this problem you guys proposed data-biding, method-binding in your figma-low-code plugin. so You said that this solution keep the pre-written business logic before generating.
But in this point, I feel little bit confused how to deal with interactive things. for example, lets have suppose we got the generated code from some button in figma. If I edit the button to react such an interactive animation when I push the button and again re-generates the button's code, could I still keep my interactive animation code?
I already saw the youtube 'Figma Low Code - Step by Step Tutorial' (https://www.youtube.com/watch?v=n8YvL_YvXRA). But I couldn't find how to deal with interactive animation stuff in this video.
thanks!

------- Clearing and silencing console.log from Figma -------
figma_app.5354c0d9ddbd1e2c47e72e6f99a2619f.min.js.br:489 TypeError: cannot read property 'a' of undefined
at colorToString (PLUGIN_13_SOURCE:282)
at (PLUGIN_13_SOURCE:256)
at forEach (native)
at getColorFromNode (PLUGIN_13_SOURCE:257)
at getColorFromNode (PLUGIN_13_SOURCE:273)
at getColorFromNode (PLUGIN_13_SOURCE:273)
at getColorFromNode (PLUGIN_13_SOURCE:273)
at getColorFromNode (PLUGIN_13_SOURCE:273)
at getColorFromNode (PLUGIN_13_SOURCE:273)
at getAllColors (PLUGIN_13_SOURCE:239)
at getStyles (PLUGIN_13_SOURCE:226)
at ./src/code.ts (PLUGIN_13_SOURCE:160)
at call (native)
at webpack_require (PLUGIN_13_SOURCE:20)
at (PLUGIN_13_SOURCE:84)
at (PLUGIN_13_SOURCE:304)
at call (native)
at (PLUGIN_13_SOURCE:307)

evalCodeInternal @ figma_app.5354c0d9ddbd1e2c47e72e6f99a2619f.min.js.br:489
evalTopLevelCode @ figma_app.5354c0d9ddbd1e2c47e72e6f99a2619f.min.js.br:489
(anonymous) @ figma_app.5354c0d9ddbd1e2c47e72e6f99a2619f.min.js.br:1021
setTimeout (async)
runResult @ figma_app.5354c0d9ddbd1e2c47e72e6f99a2619f.min.js.br:1021
n.runPluginCodeInRuntime @ figma_app.5354c0d9ddbd1e2c47e72e6f99a2619f.min.js.br:1021
async function (async)
n.runPluginCodeInRuntime @ figma_app.5354c0d9ddbd1e2c47e72e6f99a2619f.min.js.br:1021
runPluginCodeInternal @ figma_app.5354c0d9ddbd1e2c47e72e6f99a2619f.min.js.br:1022
(anonymous) @ figma_app.5354c0d9ddbd1e2c47e72e6f99a2619f.min.js.br:1022
async function (async)
(anonymous) @ figma_app.5354c0d9ddbd1e2c47e72e6f99a2619f.min.js.br:1022
runPluginCode @ figma_app.5354c0d9ddbd1e2c47e72e6f99a2619f.min.js.br:1022
runInstalledPlugin @ figma_app.5354c0d9ddbd1e2c47e72e6f99a2619f.min.js.br:1022
async function (async)
runInstalledPlugin @ figma_app.5354c0d9ddbd1e2c47e72e6f99a2619f.min.js.br:1022
runPlugin @ figma_app.5354c0d9ddbd1e2c47e72e6f99a2619f.min.js.br:1022
E @ figma_app.5354c0d9ddbd1e2c47e72e6f99a2619f.min.js.br:1032
(anonymous) @ figma_app.5354c0d9ddbd1e2c47e72e6f99a2619f.min.js.br:1032
B.onSelectItem @ figma_app.5354c0d9ddbd1e2c47e72e6f99a2619f.min.js.br:4239
(anonymous) @ figma_app.5354c0d9ddbd1e2c47e72e6f99a2619f.min.js.br:577
(anonymous) @ figma_app.5354c0d9ddbd1e2c47e72e6f99a2619f.min.js.br:574
(anonymous) @ vendor.8b173c656b125e1a481e433adeccb433.min.js.br:40
w @ vendor.8b173c656b125e1a481e433adeccb433.min.js.br:40
(anonymous) @ vendor.8b173c656b125e1a481e433adeccb433.min.js.br:40
T @ vendor.8b173c656b125e1a481e433adeccb433.min.js.br:40
P @ vendor.8b173c656b125e1a481e433adeccb433.min.js.br:40
S @ vendor.8b173c656b125e1a481e433adeccb433.min.js.br:40
N @ vendor.8b173c656b125e1a481e433adeccb433.min.js.br:40
Un @ vendor.8b173c656b125e1a481e433adeccb433.min.js.br:40
Dn @ vendor.8b173c656b125e1a481e433adeccb433.min.js.br:40
n.unstable_runWithPriority @ vendor.8b173c656b125e1a481e433adeccb433.min.js.br:29
sl @ vendor.8b173c656b125e1a481e433adeccb433.min.js.br:40
Do @ vendor.8b173c656b125e1a481e433adeccb433.min.js.br:40
(anonymous) @ vendor.8b173c656b125e1a481e433adeccb433.min.js.br:40
figma_app.5354c0d9ddbd1e2c47e72e6f99a2619f.min.js.br:1022 ------- Restoring console.log functionality in Figma --------

Hi, I am facing an issue while selecting the page from the Figma file.
Do let me know If there is any documentation around it.

Hey there!
I am super excited to use this plugin. However I am struggling a bit how to install the vue-low-code library right now. In the tutorial video you show us how to use it in a single vue component file. The problem is that I don't wanna do a Vue.use(Figma) in every component, right?

So can you describe how I can make the Figma object available throughout the whole Vue project the same as plugins like Vuetify work? I kinda expected to see the guide how to add it in the main.ts/js file of my Vue project but could not find any documentation explaining that.

If this is actually a trivial question please excuse me. I am using Vue.js for a couple of month now and still not have the full grasp of the ecosystem and configuration yet.

Hi there, I was testing the components that we need in our project!
But elements are not displaying properly.
All of the elements whose position is absolute in Figma are not able to show up properly in localhost

From Figma

/* Auto layout */

display: flex;
flex-direction: row;
align-items: flex-start;
padding: 0px 4px;
gap: 10px;

position: absolute;
width: 58px;
height: 12px;
left: 44px;
top: 638px;

/* Light/Background/Paper

Reflects the background.paper variable from the theme object
*/
background: #FFFFFF;

/* Inside auto layout */

flex: none;
order: 8;
flex-grow: 0;
z-index: 8;

From Localhost

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>

When I create a text element and have only numbers in it, it will be rendered in the top left corner. As soon as there is a character in the text it is rendered as expected.

String/Character

Figma

Vue.js Rendering

Number Only

Figma

Vue.js Rendering

Code:

<template>
  <Figma :figma="figmaConfig"></Figma>
</template>

<script>
export default {
  name: 'FigmaLowCodeTest',
  data: function () {
    return {
      figmaConfig: {
        figmaFile: '<fileId>',
        figmaAccessKey: '<key>'
      }
    }
  }
}
</script>

I created a fresh new figma project with a fresh user. I installed Figma plugin and it worked like a charm.

However when installing the low code plugin on a already existing Figma project (just a month old) the plugin does not work.
I clicked on every element I could find to see if it only works for certain types. Unfortunately the popup never opened. I clicked Plugins > Figma-Low-Code. Nothing happens.

Any idea why this is happening?

Hello! I am currently using the Figma Low Code plugin but I have encountered some blocking issues. I have read all the documentation and examples, but I can't find any work around.

• Select or dropdown elements cannot be built, dropdown options are not saved, once I click outside the plugin box, each one of the options fields are reset (even the options field in Data Binding section)

• Is there any chance to show content due to a conditional statement? For example: I want to show a table if there is content but if not, I must not show it. The smart container (toggle children) does not fit in this case, because it should not work as a clickable element.

• Is it possible to associate pages to the Luisa component? The page property is not working

• Borders cannot be specified, even if in Figma we put a border-right, the border will always be represented on all 4 sides

• Is there a way to assign classes to an element, for example a selected element class?

• For popups it is necessary to use the Figma Prototype, however it does not allow any action other than Navigate to. It would be nice if it allowed the open or close overlay action

• Where do the colors that can be selected for the hover effect come from? Is there any way to change them?

Would be great to have it as an NPM package

Hey there!
I am super excited to use this plugin. However I am struggling a bit how to install the vue-low-code library right now. In the tutorial video you show us how to use it in a single vue component file. The problem is that I don't wanna do a Vue.use(Figma) in every component, right?

So can you describe how I can make the Figma object available throughout the whole Vue project the same as plugins like Vuetify work? I kinda expected to see the guide how to add it in the main.ts/js file of my Vue project but could not find any documentation explaining that.

If this is actually a trivial question please excuse me. I am using Vue.js for a couple of month now and still not have the full grasp of the ecosystem and configuration yet.

Hello,

Ive created a simple figma file to test the responsivness from figma-low-code: https://www.figma.com/file/owrluppOzpQweDmLkkml8M/Responsive-Test

1. created a page called: Desktop, as in your example video: https://www.youtube.com/watch?v=VIJiMAXUB-g
2. added my access and file id to the Home.vue
3. setup your plugin and checked Desktop and entered 1000 as minWidth
4. downloaded the figma stuff
5. open up local host and get the error in my console:

`vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'min')"

found in

---> Luisa`

What did I miss here?

Thanks!

First ,really thank you build this tool, it's really fit my workflow.
More focusing design first , when I'm coding, coding faster.

And Hope support Tailwind CSS.

I've seen support custom css, but I don't know how to add tailwind css into "figma-low-code".

Thanks.

When an element is styled with auto-layout in Figma, it’s width and height is not displayed correctly. That’s because the padding of the element will be added to the outer box.

To fix this, simply define the box-model correctly in the boilerplate’s app template /src/App.vue:

*, *::after, *::before {
    box-sizing: border-box;
}

Currently the letter case text style setting has no effect in the Full Mode app. See following image where it is located:

The downloaded JSON does not contain anything similar as well.

"s10000": { "id": "s10000", "figmaId": "1:2", "pageName": "Page 1", "name": "H2 Text", "type": "Screen", "x": -264, "y": -228, "w": 37, "h": 14, "props": {}, "children": [], "style": { "fontFamily": "Roboto", "borderBottomWidth": 0, "borderTopWidth": 0, "borderLeftWidth": 0, "borderRightWidth": 0, "backgroundColor": "rgba(0, 0, 0, 1)", "fontSize": 12, "fontWeight": 400, "lineHeight": 1, "letterSpacing": 0, "textAlign": "left", "verticalAlign": "top" } }

Would it be possible to support these settings?

Hi,
I'm trying to use a custom component inside my design called "imagecustom", which will render a img tag with dynamic src.
I followed all the steps to accomplish this task:

However, I must be missing something, as the plugin is not able to register and render the component. I'm getting this error:

Finally the component itself:

Can you give me any advice to fix this?

Kind regards,
Javier.

It looks like the master component is not generated as real html element but as a screenshot.

Component Instance HTML

<div class="qux-label qux-element qux-valign-top Ingumon_son_of_Albin_of_the_Boar_Warriors"><span class="qux-common-label">
    Ingumon son of Albin of the Boar Warriors 
  </span></div>

Master Component HTML

<div class="qux-vector qux-element settler-component"></div>

Master Component CSS

.Desktop_-_1 .settler-component {
    grid-column-start: 12;
    grid-column-end: 15;
    grid-row-start: 9;
    grid-row-end: 12;
    z-index: 19;
    height: 53px;
    width: 520px;
    background-image: url(https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/dde2/eb04/ff998c0…);
}

Hi there,

after following the install steps and running the server I get a blank screen in the browser. In the network traffic i see a lot of requests to api.figma.com with the result status=429 err="rate limit exceeded".

Is there something wrong with my installation?

Thanks and best Nils

when i use custom Element type in Figma desian use custom Element type in Figma desian，the brower give me a warning, Not supported widget type: Custom

Hi Klaus,

I'm trying out the plugin which seems to be the most awesome thing ever.
Input fields and buttons work as expected, but the Scene is fixed size and shows up as fixed width / height and doesn't stretch the full browser viewport.
Is there any special setting in figma for this or anything i can do to make a screen show up as full width/height in browser and not the fixed scene size as set in figma ?
Are there any limitation of the plugin that we have to be aware of so that we can build the design accordingly ?

Thank you

Hello, thanks for a great tool.
I am trying to use history mode of vue-router, but figma-low-code doesn't update accordingly, it still uses hash mode routing despite the change I made.

I was wondering if history mode is supported in figma-low-code? If so, how can I use it?

If not, this could be a possible feature request.

Thanks a lot.

It would be great if the Figma plugin was also open-sourced:
https://www.figma.com/community/plugin/858477504263032980/Figma-Low-Code