Adobe XD Scenegraph Parser

[scoiatael]

In GitLab by @nikitamironov on Jan 10, 2020, 11:13

Problem

Untill now we used octopus-xd dependency to parse XD files. It is based on reading JSON files inside of .xd (zip) file. After few months Adobe will change the workflow and users will work with cloud only (files will still exist, but for premium users or something like that). So, we need to read XD data from cloud somehow.

Solution

Adobe XD provide API for reading file structure. We need to create a tool which read as many as possible data about file and writes it down to JSON files.

Requirements

• Parse as many data as possible (research what is possible to obtain and then discuss with @nikitamironov)
• Preferred structure of outputs
  • artboards data should be splitted to different JSON files (1 JSON file per 1 artboard)
  • manifest file (common file with global meta information)
• Output files are not Octopuses, output files are only dumps of all the information we can drain from XD. Parsing these JSONs to Octopuses is the next step, not related to this issue.

Steps

• [ ] Research how to read file data through UXP API (links are provided)
• [ ] Research how and what do other dependendencies do
• [ ] Create the prototype of reader

Links

• https://forums.adobexdplatform.com/t/serialize-scenegraph-data-to-json/478/17
• https://adobexdplatform.com/plugin-docs/reference/uxp/

[scoiatael]

In GitLab by @evzen on Jan 23, 2020, 11:51

mentioned in merge request avocode/xd-scenegraph-parser!1

[scoiatael]

In GitLab by @evzen on Feb 3, 2020, 17:56

I've created an Adobe XD plugin for parsing an XD file using its API https://gitlab.avcd.cz/avocode/xd-scenegraph-parser.

Adobe provides TS typings https://github.com/AdobeXD/typings/tree/master/types which you can use to get some idea of the document structure.

The plugin's output is:

• manifest (version, artboard IDs, etc.)
• artboards (each one in separate JSON).
• interactions between trigger nodes and artboards. (One single JSON, but it's possible to embed them into artboards JSONs, though not quite trivial).
• images (PNG & JPG). SVG files are embedded into artboard JSONs as so-called pathData.
• all of it in the form of a ZIP archive with the help of JSZip, which is the only non-dev dependency (so far!).

Future work:

1. Converter from XD API to Octopus.
2. UI/UX for convenient exporting.
3. Error handling when export failed (for example, it might be acceptable to go on with exporting when only 1 image out of 1000 failed to save, but it's rather critical when there are only 2 images).

Technical notes:

• Plugin is implemented in typescript, which is then transpiled via Webpack.
• Unit and some integration tests (jest) are also there.
• XD API is mocked for the tests.

[scoiatael]

In GitLab by @evzen on Feb 3, 2020, 17:58

Example artboard JSON:

artboard-d6a2e12b-c16b-42a7-8d57-1e54a199e07f.json

[scoiatael]

In GitLab by @evzen on Apr 6, 2020, 09:48

closed via merge request avocode/xd-scenegraph-parser!1

[scoiatael]

In GitLab by @evzen on Apr 6, 2020, 09:48

mentioned in commit avocode/xd-scenegraph-parser@946c9f54dda2dbe934ea06870c74ec43279e63ce