Add API for responsive resize values

Adobe XD UXP Plugin API
,
1

Unless I’m missing something, there’s no way to read or write to the “Responsive Resize” properties/values on a scenenode.

This would be an incredibly helpful feature, since it could allow for a more direct understanding of a user’s intent for an object or group.

Just a simple use-case: If you were exporting CSS from a group, you could determine flexbox (or grid) values in fairly one-to-one fashion just by knowing the constraints of the object or group.

1 Like
2

@cleecanth Do you think this existing feature request captures your request correctly? Disabling Responsive Resize by code If so, could you add your vote and use case in that post? thank you!

3

@cleecanth First of all: welcome to the forums :wave:. I’ve moved this into the feature requests category so it can get voted on (since no, there unfortunately currently isn’t a way to access these features through the APIs).

@stevekwak I don’t think that it should get seen as a duplicate, since the linked request only refers to enabling or disabling responsive resize, while this request – at least as I understand it (and why I gave my vote for this request) – asks for the ability to manipulate all the responsive resize settings (also the manual ones) programmatically…

1 Like
4

@pklaschka — Thank you for the warm welcome and thank you for explaining the request further.
You are correct. This would probably be considered a superset of the other request, since it’d be for all responsive resize properties.

That said, I’d be perfectly happy to just have the ability to read the values. A bonus would be programmatically writing to them.

3 Likes
5

That makes sense - thanks for clarifying everyone!

6

We’d love to have this feature work with our Quest AI webpage feature. We currently let users upload different artboards and combine them into one HTML webpage, serving the correct one based on device and page width.
Users would be blown away to be able to setup responsive resizing in XD and publish an HTML page that worked exactly that way. Please expose this so we can start using it!

Thank you in advance!

1 Like
7

Here’s a workaround I came up with to get an object’s responsive resize values. It’s in TypeScript, but should be easy to convert to JavaScript:

  private getResponsiveResize(sceneNode: SceneNode): IResponsiveResize {
    const delta = 50; // Could be any positive integer

    let horizontalAnchor = HorizontalAnchor.center;
    let verticalAnchor = VerticalAnchor.center;

    const parent = sceneNode.parent;

    if (parent != null) {
      const previousBounds = sceneNode.boundsInParent;

      parent.resize(parent.boundsInParent.width + delta, parent.boundsInParent.height + delta);

      const newBounds = sceneNode.boundsInParent;

      parent.resize(parent.boundsInParent.width - delta, parent.boundsInParent.height - delta);

      if (previousBounds.x === newBounds.x) {
        horizontalAnchor = HorizontalAnchor.left;
      } else if (previousBounds.x === newBounds.x - delta) {
        horizontalAnchor = HorizontalAnchor.right;
      }

      if (previousBounds.y === newBounds.y) {
        verticalAnchor = VerticalAnchor.top;
      } else if (previousBounds.y === newBounds.y - delta) {
        verticalAnchor = VerticalAnchor.bottom;
      }
    }

    return {
      horizontal: horizontalAnchor,
      vertical: verticalAnchor
    };
  }

Type definitions:

export enum HorizontalAnchor {
  left = "left",
  center = "center",
  right = "right"
}

export enum VerticalAnchor {
  top = "top",
  center = "center",
  bottom = "bottom"
}

export interface IResponsiveResize {
  horizontal: HorizontalAnchor;
  vertical: VerticalAnchor;
}
2 Likes
8

Starting in XD 29, you can now read and modify these Responsive Resize constraints settings. See this announcement post for details: XD 29 new plugin APIs.

2 Likes