It's complicated to give a non-responsive prototype to dev... Many people talk about me to change Adobe XD by Figma for that...

It's complicated to give a non-responsive prototype to dev... Many people talk about me to change Adobe XD by Figma for that...

Hi, recently I have encountered the same problem when designing with adobexd, and since I have not seen any solution, I have created this small pluggin that helps me transform PX to REM and also gives me the conversion that tailwind uses to save in its configuration.

If it works for anyone, please give me your opinion, it is likely that I will update it

https://chrome.google.com/webstore/detail/adobe-xd-rem-fix/dppocgklbdkbfneadpfbodohoopacpdf?hl=es

Right now in XD, we are using pixesl but because my developer's base theme uses rem as their unit, it will be good in the XD development mode, it can provide them rem instead of px as their unit for better collaboration effort.

XD provides CSS for everything in the layout which saves developers a lot of time, so by not supporting relative units, a lot of tedious unit conversions still have to be done manually. In this respect using XD is no better than still using Photoshop for web design.

So why aren't relative unis supported in XD in the first place? Yes, I know that by definition the word "relative" means they don't have absolute values, but in practice every browser's default font size is 16px, and many websites have reset stylesheets that override this to set 1rem = 10px.

In my opinion XD should at a minimum
* allow designers to use rem in their designs
* use 16px as the base value for 1rem
* convert values between px and rem using that base value
* allow designers to set a different base value
* allow developers to view and export values in rem units

And it would be even better if XD could
* handle unitless decimal numbers for line height values, e.g. "1.33"
* handle ex and ch values which are computed from the font metrics
* handle em and % units using 16px as the base value, just like rem
* cascade em and % unit values correctly through the design, which I grant is probably a non-trivial task in a design program that has no concept of a DOM

First I would like to thank you for the great work that all of you are doing.
As designer and developer I would like when I share the design for development:
1. During the design process, if I set padding to see values of the padding in the code section.
2. For me, personally, the position of the element as top and left is no use because elements are not absolutely positioned on the page.
3. If I make a component with hover state that hover state should be shown in code section (UI Properties)
4. Can we have one more unit to work with like EM
That would all for now.
Have a great day and keep doing an amazing job

Using percentages (such as 150%) or unitless line heights (such as 1.5) as we do when coding line-height in CSS would be so much nicer than pixels which don't adjust when you change the font size.

In general, the closer XD can get to the way people actually code the better. Anything that can be done in CSS should be available in XD, and it should be as close to webkit as possible.

Yep, another standard feature that is not standard in an Adobe product. Please add.

Line spacing is mostly defined in percentage or em values on the web. It would be nice to have same values to define line spacing when we design.

Font size can be defined only in px, but it should be clear.

Yeah, I am shocked that the standard ways of specifying line-heights are not available!

Some additional notes for the XD Dev team ---

When considering how to integrate VW, VH, % and EM values into XD, With the new Web Development CSS Snippets within the Design Specs Output, if XD allowed the designer to set the CSS Base Font Size in PX (to compute the appropriate EM conversion, - and - allow a checkbox to output thee CSS current PX value as EM or % (Possibly even by object, component or group may be more effective - as some values are set as a percent and some as an EM or PX in the same web project)

This would make the Copy and Paste snippet much more valuable for developers as there would be less need to hand-modify, once it has been copied from XD.

If I could, I would upvote @Adam m Babkes' comment.

All of this. Also percentage-based line-height would be incredible to go with this.

Have a different sizing types rather than just pixels.
On web - VW, %, VH, EM REM, PT.

It would be also great to reflect that in design specs - this way by setting a rem base you could have all other values calculated automaically and the developers could see the exact rem value to put into CSS.

It is crucial in responsive design to be able to use ems and percentage to identify size and line height. Potentially VW and VH as well. Ideally, it'd be nice to create designs with viewport change in mind so as not to leave it solely to the developer to decide how they are executed.

Using Rem and Em units.