I am Facing issues while exporting files from Adobe xd. Please check the Attached image.
We have designed the border radius to have rounder corners on the top left and right but bottom left and right to have sharp edges. When we started exporting files, as you can see both top and bottom edges of the header have rounded corners. Is there any setting or something we missed?
And also tried changing it through CSS and it’s not working. The rectangle is in SVG.
Welcome to the forums. There are a few reasons for this.
To most closely match the look of a rectangle in Adobe XD we must export as a SVG rectangle. This is to match dash and gap features. However SVG rect doesn’t support a custom border radius for individual corners. The rx and ty attributes.
There are a few workarounds I’ll list below:
Go to the menu and select Object > Path > Convert to path. It will be exported as a path. The disadvantage of this is if you set the width to 100% and it’s wider than the original size it will center. Keeping it as a rect you can use width 100%.
Use Export as image option. The disadvantage is it same as above. If you set the width to 100% and it’s wider than the original size it will look stretched.
Change the tag name to div and enable set as background option. This will stretch and maintain the corner radius aspect ratios. But it will also fill the height of the container. The disadvantage is you need to add another rectangle to overlap the header rectangle. Or you might be able to size the height of the header rectangle using CSS background properties
Set the html template to a html div tag and id with the value of {SELECTOR_NAME} like so <div id=“{SELECTOR_NAME}”></div>. In the styles property add background-color: {FILL_COLOR};border-radius:12px 12px 0 0. In the next version you could set that to border-radius:{BORDER_RADIUS}. This will stretch and maintain the corner radius aspect ratios. The disadvantage is you add these custom options and manually enter the radius.
Create a group of three objects. Paths on the end and rectangle group in the middle. Set the middle rectangle as the background. This is a bit more complicated.
I might try and make a macro for some of these in the next update if there’s interest.
Normally there is a warning if the export cannot be an exact match. There isn’t one yet for this case. I’ll add this as a feature request.
