gui Adobe XD to Arma 3 - Convert your Adobe XD GUIs to Arma 3 (sort of)

[Heyoxe 26]

Adobe XD to Arma 3 - Convert your Adobe XD GUIs to Arma 3 (sort of)
Create your GUIs in Adobe XD, export them as SVGs, use them in Arma 3

 

Website: http://xd2a3.heyoxe.ch/

GitHub Repo: https://github.com/Heyoxe/Adobe-SVG-to-Arma-Config

Discord: https://discord.gg/QDGatN2

Licence (CC/BY-NC-SA 4.0): https://creativecommons.org/licenses/by-nc-sa/4.0/legalcode

What is Adobe XD to Arma 3 (XD2A3)?
XD2A3 is a small web application written in Javascript/NodeJS that let you transform your Adobe XD GUI (exported in SVG format) to an almost ready to use .hpp file.

For who?
The app is directed to people that have some basic knowledge of GUIs and have all their common controls with styles defined. It will not export colors/text/..., just the basic forms.

 

Why would I use that?

While some tools to make GUI more easily exist, most of them lack some basic things like alignment and grouping. When you make GUI you will generally use a base class for controls that you defined in your addon and will not redefine that for each new control. You may have do small modifications but overall, you don't change a lot of style.
By using Adobe XD for you GUIs, things are more easy and until now, the only issue was converting those prototypes into usable in game GUIs. Once you have your base classes (here is an example of what I mean: https://github.com/CoopR-Mod/CoopR-Mod/blob/development/addons/core/coopr_gui_base.hpp) the only thing you will have to do is adding onLoads/onUnloads and change the Text. Positioning and class defining is all handled by XD2A3.

 

Adobe XD Exportation Options:

• Format: SVG
• Styling: Presentation Attributes
• Save images: Link
• File size: Normal (do not check)

Licence:

CC/BY-NC-SA 4.0: https://creativecommons.org/licenses/by-nc-sa/4.0/legalcode

 

How to use?

https://github.com/Heyoxe/Adobe-SVG-to-Arma-Config#how-to-use-it

What are the limitations of XD2A3?

First and foremost, it only works with Adobe XD (hence the name).
It cannot export GUIs that are not in the 1920x1080 format. Why? Because the macro used to convert from XYWH pixel positions to Arma is based around that format.
It will not export elements other than Rectangles, Texts, Images or Groups for a very simple reason: those other forms don't exist in Arma 3.
That's also why it's Open Source. While my knowledges are limited, I hope to extend the App to take in charge other GUIs designing tools

 

Note:

While the app works, I'm still a beginner in JS/Node so the code may not be high quality but feel free to contribute on GitHub

 

Additional Credits:

- A26Mike: Web Design and Testing

 

Example:
Please keep in mind that colors are not exported, those are just predefined
Download Example: https://github.com/Heyoxe/Adobe-SVG-to-Arma-Config/raw/master/example.rar
In Adobe XD:

 

In Game:

Adobe XD vs Config:

 

Edited September 13, 2019 by Heyoxe
Updated export settings

[Dedmen 2588]

Oh gosh, this sounds too good to be true.

This is great!

[Adam Kadmon 1]

[x3kj 1247]

Looks cool, would it work with images?  (i assume the paths would have to be edited to be addon-conform, but apart from that?)

[Heyoxe 26]

5 hours ago, x3kj said:

Looks cool, would it work with images?  (i assume the paths would have to be edited to be addon-conform, but apart from that?)

No it sadly doesn't work with images yet but I'll take a look at it!

[Heyoxe 26]

@x3kj
NEW UPDATE
- Add: Images Export (EXPERIMENTAL)

- Add: Text Export (EXPERIMENTAL) (Convert to Static Text, not Structured)

- Add: "Font Size" to Arma sizeEx (EXPERIMENTAL)

- Planned: Adding text to existing Element by naming your text element TEXT&ElementName: Optional
 

Available on: http://xda3.heyoxe.ch
GitHub: https://github.com/Heyoxe/Adobe-SVG-to-Arma-Config
Limitations update:
Old: XD2A3 will not export elements other than Rectangles or Groups
New: XD2A3 will not export elements other than Rectangles, Texts, Images or Groups




 

[Heyoxe 26]

http://xd2a3.heyoxe.ch has been updated

Add missing Export Options in Adobe XD.

 

Adobe XD Exportation Options:

• Format: SVG
• Styling: Presentation Attributes
• Save images: Link
• File size: Normal (do not check)

 

GitHub: https://github.com/Heyoxe/Adobe-SVG-to-Arma-Config

[Heyoxe 26]

http://xd2a3.heyoxe.ch has been updated

- Add: Color Export (https://github.com/Heyoxe/Adobe-SVG-to-Arma-Config/pull/8)
- Fix: Y-coordinate can be NaN  (https://github.com/Heyoxe/Adobe-SVG-to-Arma-Config/pull/10)

Those improvement and fixes were proposed by @blackfisch#1467 , thank you for your contribution!

 

GitHub: https://github.com/Heyoxe/Adobe-SVG-to-Arma-Config