# Figma in UIBuilder with this github project?

**URL:** <https://discourse.nodered.org/t/figma-in-uibuilder-with-this-github-project/39668>\
**Category:** Dashboard\
**Created:** [24 January 2021 18:39 UTC](https://discourse.nodered.org/t/figma-in-uibuilder-with-this-github-project/39668 "2021-01-24T18:39:06Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![j2l](https://avatars.discourse-cdn.com/v4/letter/j/ee59a6/32.png) [@j2l](https://discourse.nodered.org/u/j2l)\
**Post date:** [24 January 2021 18:39 UTC](https://discourse.nodered.org/t/figma-in-uibuilder-with-this-github-project/39668/1 "2021-01-24T18:39:07Z")

</div>

I stumbled on this Vue - Figma bridge:

> **[GitHub - KlausSchaefers/figma-low-code: A repository to bootstrap Figma low...](https://github.com/KlausSchaefers/figma-low-code#Design-System-Mode)**
>
> A repository to bootstrap Figma low code projects. Contribute to KlausSchaefers/figma-low-code development by creating an account on GitHub.

[![](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/3/334b110f1e7f31c3d383a568309cd5dd227733dd.jpeg "How to convert a Figma Design System into Vue components with a single line of code") ](https://www.youtube.com/watch?v=xh95ile-QqY)

And wondered if/how it could be implemented into UIBuilder.

Something like this could help, what do you think @TotallyInformation ?

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [24 January 2021 20:36 UTC](https://discourse.nodered.org/t/figma-in-uibuilder-with-this-github-project/39668/2 "2021-01-24T20:36:01Z")

</div>

At first sight, it looks as though it should be possible. Initial setup might be a bit fiddly but once you have the hang of it, it should be easy enough.

You will need to install figma-low-code into your uibuilder instance root folder I think. You will want a package.json file in that root folder.

I think though that you will probably need to also set up webpack or some other build process. You should arrange to have your source files in root/src and the built files in root/dist. Make sure you end up with an index.html in the dist folder otherwise uibuilder will continue to serve the one in the src folder.

---

<div class="post-metadata">

**Author:** ![j2l](https://avatars.discourse-cdn.com/v4/letter/j/ee59a6/32.png) [@j2l](https://discourse.nodered.org/u/j2l)\
**Post date:** [28 January 2021 11:39 UTC](https://discourse.nodered.org/t/figma-in-uibuilder-with-this-github-project/39668/3 "2021-01-28T11:39:35Z")

</div>

Thank you very much.  
I may try but my time and knowldege here is limited.  
I'll accept it as solution.  
If someone implement it, would you be kind to drop a line here?

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [11 February 2021 11:40 UTC](https://discourse.nodered.org/t/figma-in-uibuilder-with-this-github-project/39668/4 "2021-02-11T11:40:17Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.