devlayers

Or “Layers for Developers”

devlayers is a plugin that shows the current Adobe XD scenegraph selection as a dynamically updated, explorable set of nested objects, displaying the API-level properties belonging to the selected items (nodes). The name comes from an analogy to the XD Layers panel, which shows the scenegraph objects, including nesting, to a normal user.

It’s invaluable (at least in our experience) to be able to see what’s really going on with node internals, as you work with the scenegraph in a plugin.

This is a free plugin with no product support. Bug reports/suggestions are always welcome to Chris Ryland, cpr@emsoftware.com.

Hints

Note that, thanks to being built on React, you can leave sub-structures open, and flip back and forth between similar object types, to compare their values, without having to fiddle with re-opening those substructures.

Further, you can close the plugin panel in order to use the layers or assets panels, and, when you return, if the selection is still the same, you should see your previous inspection state unchanged.

Click anywhere on a disclosure triangle line to expand/collapse, not just the small disclosure triangle.

Issues

XD doesn’t seem to notify panels of updates while text is being edited, so you may have to click out of a text object, and then back in, to see the updates.

devlayers can’t display pluginData property contents, since that’s only available to each relevant plugin.

There are some minor display alignment issues with data that wraps (like text values or path values).

Disclosure triangles don’t turn down on activation. (This is due to limitations of the UXP HTML/CSS implementation.) The disclosure line turns entirely gray when open, though that’s a very subtle hint.

Large amounts of text (like text or path contents) are truncated at 500 characters, since these would otherwise turn into unmanageable amounts of panel text that will hang XD. (E.g., the path of a simple line of text can be 250Kb; it’ll eventually work, but might take minutes to display.)

A few potentially-verbose properties (namely, text, pathData, name, guid, and parent (a guid)) are artificially rendered as single-entry arrays, so their contents can be optionally displayed (default is closed), rather than vertically fill up the panel unconditionally. You can tell these apart by a “>” before their preview value. (Added in 0.2.0) You can ignore the “0” before the expanded string; it’s strictly true that it’s the first and only element of the array (which is only being used to hide the value display).

Screenshot

Below is a screenshot of devlayers in operation, though details will change over time.

Credits

devlayers is a mashup of two modules, react-json-tree and xd-json-wrapper, the latter fairly heavily hacked to have it accurately JSON-ize all parts of the scenegraph, the former just hacked to make it work better in the UXP environment. Kudos to the developers of both.

And tremendous kudos to the UXP team at Adobe for making a quite robust subset of HTML/CSS, enough to (mostly) run a complex set of React components out of the box.

WordPress.org

© 2010 Em Software - Business WordPress Theme by ThemeShift