Using Figma to Create User Interfaces for Archicad GDL Objects

[Jarrod Phillips]

I have recently been experimenting with Figma to quickly create User Interfaces for Archicad GDL Objects with some success. I am interested to know what workflows others have been using to create user interfaces for Archicad objects?

 

[Jochen Suehlo]

I am often using a combination of gdlnucleus (automated XML Converter functions) and Rukovoditel (Project Management Tool). The procedure is described here in German. Pleas use a Translator.
https://gdlschmiede.de/KB/ui-erzeugung/

Jarrod, please tell us: how does Figma create the UI-Script? What is the workflow?  And are you using the free version?

[Jarrod Phillips]

Hi Joachim,

I have created a library of ‘components’ in Figma which I can drag and drop into place to quickly visualise an objects user interface. Currently, there is no way (that I know of) to export code which would be useable by archicad to automatically generate the UI script. This does, however, assist me with scripting the objects UI as I can directly refer to the elements I have dragged and dropped into Figma to extract the exact X and Y coordinates of the outfields and infields. Hopefully this might spark an idea for others (much smarter than I) to work out a way to potentially export code which might be converted to GDL. I believe Figma is one of the more popular tools used in UX design. I figured I would give it a go to see how useful it could be for designing user interfaces for archicad objects!

Cheers!

Jarrod

P.S. I am using the free version of Figma.

[Jochen Suehlo]

Thank you Jarrod for the explanation.
I will take a look at Figma as well.

Another way would be the following (which is gone by another German GDL Developer):
- Writing 2D-Objects for every UI-Command and place them on a floor plan in Scale 1:1

- Then those objects are giving out the belonging GDL Script via the Interactive Schedule. For this you have to write the scripts into different Parameters by using the PARAMETERS command.
- The coordinates are read from Global Parameters

[runxel]

Yeah nice, Jarrod. I do that, too!  👏🏻

My pipeline is from brain to sketch to Figma (when it's more "complex") to GDL.

Figma allows add-ons to be run (not sure if I can do that as a free user too), and in theory it should be very easy to write one add-on, that just outputs a nearly done UI script.

My structure of the UI however is in a way, where it's mostly build with variables, not with coordinates as plain numbers. In the end the overall layout is divided in columns and rows, and I can easily refer to them, so I never handle discrete values. For non-uniform, special UI layouts however Figma is a vital part where I can just use the provided values.

[Jarrod Phillips]

Hi Joachim,

I had initially started by using Archicad and drawings everything at 1:1 e.g. 480 pixels x 265 pixels is equal to 480mm x 265mm. This seems to work quite well, however I do like the drag and drop nature of Figma. Like the method you have described above, it takes some time initially to set up the 'components' in Figma, but this probably only takes a day or so and at this stage doesn't produce any script to be used directly in Archicad, although after speaking with Bernd Schwarzenbacher on LinkedIn, this seems like it actually might be possible. Thanks for your input, it's always interesting to hear what others are doing quietly in the background!

Regards,

Jarrod

[Jarrod Phillips]

Hi Runxel,

I didn't think I would be the first! 😛

I also use variables for easier editing of the UI script and similarly to what you have described, I am currently just using Figma to quickly visualize a user interface (I was previously drawing this in Archicad). I can then quickly copy and paste code I have already written to achieve the desired design. Seems to be working well so far!

I am yet to dive into the world of addons for Figma, but as mentioned above, it seems like it might be possible to export usable GDL code directly from Figma.

Thanks for the input!

Regards,

Jarrod