Fireblade
Search…
Responsive Alignment

The current state

The Artboard on Adobe XD

The layer structure has two main groups: left and right.
Artboard layers structure.
Check artboard background color (#A3A0FB).
Artboard background color.
Check form background color (#F0F0F7).
Form background color.
Note that the left and right group areas are covering the entire surface of the artboard. If we perform the plugin preview action, the result in the Fireblade live preview tool will not show the artboard background color.
Artboard elements in perspective.

The result on Fireblade live preview tool

Note that, in their original state, the artboard and login form are not aligned to fit browser dimensions. White color on the left and bottom margins means there is a lack of content or style to be shown, that is to say the artboard margins have not reached the browser margins.
Artboard preview result limits.
This is because the left (0px) and top (0px) anchors are active in the Fireblade plugin, along with width (1440px) and height (864px), but right (0px) and bottom (0px) anchors are not active. The Fireblade plugin only considers active elements at export time.
The Fireblade live preview tool uses an internal browser to display the preview result.

About responsive dimensions

Explaining the Fireblade anchors

The illustration below demonstrates that the left (120px) and top (80px) anchors are active and fixed. The right (300px) and bottom (50px) anchors are not active and are not fixed. If the browser dimensions are changed, the values of the right and bottom anchors will receive other values, that is, the right and bottom edges of the design will not follow the new browser dimensions.
Changes you make to any alignment panel anchors have no effect on the design in Adobe XD, they only have an effect on exported content.
The illustration below demonstrates that the width (1440px) and height (864px) dimensions are active and fixed. If the browser dimensions are changed, the width and height values will remain the same.
Changes made to any dimensions of the alignment panel did not affect the design in Adobe XD, they only have an effect on exported content.

Applying responsive alignment

The artboard align panel

Select the artboard in Adobe XD and change the alignment preset to use right and bottom anchors as well.
Selecting alignment preset.
Now perform the preview action and check the result.
Artboard alignment preview result limits.
Note that after using the alignment preset
selected in the Fireblade plugin, in the preview result, the borders of the artboard element (DIV) are adjusted to match the browser dimensions. Thus, the width and height of the artboard element (DIV) are no longer fixed, and they adjust the width and height of the browser.
Using the
preset in the Fireblade plugin enables the left, top, right and bottom anchors, but disables the width and height of the element in the preview or export action.

The Right group element alignment

Select the Right group element and change the alignment preset to use top, right and bottom anchors.
Selecting alignment preset for right group element.
Now perform the preview action and check the result.
Right group alignment result.
Using the
preset in the Fireblade plugin enables the top, right and bottom anchors, width remains enabled, but disables the height of the element in the preview or export action.

Clarifying what happened in the previous step

By specifying that the bottom anchor would be enabled and it has a value of 0px, one would visually expect the Right element to fill to the bottom, but the artboard background color remained visible.
The Right element has filled in the bottom space, but it is a group and does not have a background color, so the Rectangle 163 element needs to fill all the available space in the Right element.
Clarifying what happened in the previous step.

The Rectangle 163 element alignment

Select the Rectangle 163 group element and change the alignment preset to use left, top, right and bottom anchors. This will disabling the width and height.
Rectangle 163 alignment result.
Now perform the preview action and check the result.
Rectangle 163 alignment result.

The Left group element alignment

Select the Right group element and change the alignment preset to use top, right and bottom anchors.
Selecting alignment preset for left group element.
Now perform the preview action and check the result.
Left group alignment result.

Clarifying what happened in the previous step

By specifying that the bottom and right anchors would be enabled and both have a value of 0px, one would visually expect the Left element to fill the bottom and right, but the background color of the artboard remained visible.
The Left element filled in the bottom and right spaces, but it is a group and does not have a background color, so Rectangle 176 and Group 4 elements need to fill all the available space in the Right element.
Clarifying what happened in the previous step.

The Rectangle 176 element alignment

Select the Rectangle 176 group element and change the alignment preset to use left, top, right and bottom anchors. This will disabling the width and height.
Selecting alignment preset for Rectangle 176 element.
Now perform the preview action and check the result.
Rectangle 176 alignment result.

The Group 4 element alignment

Select the Group 4 element and change the alignment preset to use left, top, right and bottom anchors. This will disabling the width and height.
Selecting alignment preset for Group 4 element.
Now perform the preview action and check the result.
Group 4 alignment result.

Checking responsive alignment result

Now the artboard element will follow the browser dimensions.
The top, right and bottom anchors of the Right Group will follow the same edges as the artboard, while the width will remain fixed at 800px.
In the Left Group element, the right anchor will stay at 800px relative to the right edge of the artboard element, while the other anchors will follow the edges of the artboard.
In this way, whenever the browser changes dimensions, the design will follow without leaving any spaces.
We are working on this right now.
Responsive alignment result.
We are working on this now...
Last modified 1yr ago