First of all: Let’s look at how it would be possible to translate the “raw” elements. For that, you’d create a function that “translates” an arbitrary SceneNode
into your language of choice and calls itself (recursively) for all of its child nodes:
const scenegraph = require('scenegraph');
function translate(node) {
let translation = '';
if (node instanceof scenegraph.Artboard)
translation += 'Artboard (' + node.fillEnabled + ',' // append any properties you need
else if (node instanceof scenegraph.Text)
translation += [...]
[...]
if (node.children) {
translation += ' children:{'
for (let childNode of node.children.items) {
translation += translate(childNode);
}
translation += '}';
}
translation+=');'
}
const myResult = translate(scenegraph.root);
(the translation this would generate wouldn’t be very useful, but it demonstrates how it could work in theory )
Regarding your goal:
I would argue that this is (at some level) achievable, but provides a few challenges that won’t be easy to overcome:
- you have to detect – how should I put it – what is what in your XD document and detect it. For example, you’d have to detect a button by “it’s a group with a rectangle that’s filled with this tone of gray and also contains a text node with this font family and font size” (similar things, yet it only gets more complicated, with the sliders and checkboxes. Every text that doesn’t belong to something like this is considered to be a label, like “Smooth”
- you have to somehow detect things like the sliders range. Again: it’s possible. You have its current value, the width of the slider and the current position of the handle, meaning it is feasible to calculate it, but let me just say it’s (excuse the language) darn hard
All in all, I’d say creating something like this would be possible, but I doubt the resulting quality would be worth the effort. Except if you have far too much money to pay a not too small team of developers to do it, all you (or me) might be able to achieve would be a rudimentary “design to code” system the quality of which wouldn’t be worth the effort.
You might be able to adjust he project so that your plugin knows beforehand which element is which and you can only move and resize elements created by your plugin (which “remembers”, through sceneNode.pluginData
, that that’s a [slider/checkbox/whatever], but that still would be a big effort (and one where I’m not sure it would be worth it).
It is, as stated, possible to do all of this (in one way or another), but the further you go away from a structure that’s unlike the one in XD, the more complex it becomes. For something like your case, you have to extract, in a sense, implementation logic like checked:true
, range:[0.05,1,0.5]
and so on. All in all, it is therefore possible to achieve this, but if you want to put that much effort into something like this where, probably 50% of the time, the outputted code won’t be what you’re looking for, is up to you to decide
I hope this helps,
Best,
Pablo