Where the design community meets.
Community Staff Founder at Bjango Joined over 6 years ago via an invitation from Christophe T. Marc has invited Matt Kelsh, Rene Ritchie, Dan V Peterson, Troy Mcilvena, Graham Clarke and 12 others, Jeremy Olson, Ramy M., Andrew Hart, Ricky Synnot, Aen Tan, Justin Velgos, Nik Fletcher, Rok Benedik, Nghia Nguyen, Jared Sinclair, Matt McDaniel, Elliot Jackson
Having said all that, I think there are good hybrid approaches to the problem. :D
First off let me say I always appreciate your replies since you actually know your shit on a conceptual and technical level, however I think you put too much weight behind certain issues that are simply not as big of a deal in my experience in practice.
Thank you for the kind words. I also appreciate pushback where needed, and I welcome learning new things.
In my defence, I did say “depending on the goals of the tool, those may or may not be dealbreakers”. I think there’s room for design tools built on web tech, especially when the desired result is a web-based tech stack. I do think that’s more of a niche than a generalised software design tool though.
I don't see how this will impact UI design, most of the time changes are not at the sub-pixel level and are manually input into property fields, and you can just zoom in to get more detail.
I wasn’t aware of the mouse coordinates issue until another designer was wondering why he couldn’t use the eyedropper to sample a 1px thick line — the cursor was jumping over the line. Yep, zooming in helps, but I think having half the mouse cursor accuracy is a negative for web tech based design tools.
There’s 100s of small things like that. Electron apps can not have custom keyboard shorcuts on macOS (the kind you define in System Preferences). Everything has to be contained within one window with no floating panels. They can’t use the built-in NSDocument tab and tab overview feature. Drag and drop is far worse. Clipboard support is far worse, and missing lots of features. There’s no access to document auto-save or versions. There’s no way to support wide gamut colours, or high bit colour depth. macOS provides good mechanisms to make undo support easier. Those are just things I can think of now. The list is astonishingly huge, and many more wouldn’t be apparent until the project is underway.
It’s definitely a trade-off.
None of the things you bring up here seem like insurmountable or significant impediments to an HTML/CSS based UI tool being much superior to any of the tools we have today for interface design.
I’m all for people trying! There’s some new tools you’re proabbly aware of that are giving it a shot. My issue has always been that for web projects, I’ve usually just written code. I think that means web tech based tooling is in a strange place — they often require a lot of knownledge of CSS to be useful and used the right way, but those who have a firm grasp of CSS can often be more comfortable directly writing CSS. I suspect there is value in web tech based design tooling, but it’ll be niche. It’ll only be for when the final product is web based, and for people who already have a pretty good understanding of HTML/CSS/JS.
Developer handoff from existing tools is a nightmare. Try explaining a responsive vw or % based grid with content-order rearrangement at different screen sizes using Sketch or Figma to a developer.
I agree. I currently just write the HTML/CSS in a text editor for those. I’d like visual tools to help, but I haven’t yet seen something I’d prefer over writing code.
I can't make a button component with a centered text and icon! I should not have to rely on freaking plugins for that.
Yeah, that’s a great example of something that is very difficult in current tools.
Some of these requested features just seem strange to me, and I would actually suggest that Adobe XD creators not even waste their time on them.
It’s their product, so I’m all for it being up to them. (They can choose to ignore me, if they’d like.)
Screens are limited by pixels, so why would you need to create something (especially for positioning or alignment, which is the purpose of guides) that lives in a magical realm of half a pixel? A pixel cannot light up "half-way".
Screen designers typically work in iOS points, or Android dp, or CSS px, and all the templates in XD are set up this way. Given high DPI displays, one unit in XD typically relates to 2 or 3 screen pixels when running on the device. Positioning something at 0.5 in XD would mean lighting up a full pixel when actually shown on a 2× device (iPhone XR etc).
For icon design, sub-pixel placement is valuable anyway, but it’s worth noting that one unit in XD typically doesn’t map directly to a single screen pixel — they’re often multiples.
I believe you can do this in Illustrator because this is a vector program, so it is not pixel-based, it is mathematical based and has infinite scalability.
In a general sense, vector shapes in Illustrator, Photoshop, XD, Sketch etc are all infinitely scalable. Of all those tools, XD is actually the only one that doesn’t have a canvas pixel preview. All the others do.
Why would you want guides in prototyping mode? This is the presentation mode, when you aren't aligning or moving anything around. Why would guides exist in this space?
You can move objects around in prototyping mode. When you move objects in prototyping mode, the other snapping positions work as they do in design mode — there’s center and canvas edge snapping. Given all that…
Other features you mentioned seemed very niche to me like copying guides between documents.
That’s possible now, via the guide copy and paste feature. My apologies for missing it in my initial post (I could see the feature, but it was disabled until I selected an artboard).
Copying guides between documents is pretty handy if you’ve split a project into separate documents, or have a design system, or for many other reasons.
Yes, multiple color guides would be cool, but then again Photoshop doesn't even have that and that program is 25+ years old.
You can set the guide colour under Preferences › Guides, Grid and Slices though. Double clicking a guide in Photoshop jumps to the preferences to change the colour. Please note that I just asked for a way to change guide colour, not for a way to have individual guide colours.
As someone who uses Adobe XD frequently, very few of these complaints felt justified.
My biggest complaint by far is the lack of colour management. Everything you draw in XD is objectively the wrong colour, and way too vibrant on wide gamut displays.
And since they all focus around guides, I think there is a lot more to unpack in this program than just the guides.
I chose to offer feedback only on guides. I find a lot of the choices made in XD’s other features equally frustrating.
We can talk about them, if you’d like.
Thanks for the reply, Andrei.
We don't want to keep this functionality unreleased for an extra 2-3 months while still working on those kinks when designers can derive sensible value from the feature today!
I understand. But, at the same time I feel like XD’s releases tend to always include features that don’t cover the required uses cases. It makes me question if those use cases were even known or understood. Symbols were released without support for resizing instances. That has been fixed with components, but I think it should have been clear from the outset that instance resizing was essential, even as part of an initial release of the feature. Customer feedback shouldn’t be required to know that.
From the point of view of a customer, these releases build excitement with the announcement, only to be let down when I realise I can’t actually use the feature as is.
With regards to copy pasting guides between artboards/documents and clear guides - that functionality does exist and is implemented (via the View>Guides Menu).
I was seeing disabled menu items, but now realise that the artboard needs to be selected for those items to work. My apologies.
We are actively working on addressing some of your feedback soon, namely guide creation when zoomed in and showing the guide position (without moving it).
I'm curious what are your use-cases for guides being positioned at fractional values (10.5px) - what are the scenarios where those would be helpful for you?
I think there’s many use cases. If you’re designing an iPhone app, using an iPhone X as the base size, the device width is 375pt. The center of that is 187.5pt. XD does have automatic center snapping, but because it’s rounded, that actually snaps to 188pt on the artboard. So, anything with an uneven width or height that requires center snapping needs fractional guide placement.
I understand why it may be desirable for the center snapping to round up, but without being able to place fractional guides and turn off center snapping, objects can not be correctly centered.
On a 29×29pt icon (spotlight and settings for iOS), a 0.5pt centering error is huge.
I actually believe that us not shying away to do things differently (guides without rulers, in this example) and then having this sort of constructive conversations will result in better tools for designers in the long term.
I agree. I don‘t think XD’s guides landed on the mark though.
not building design tools on HTML/CSS is the biggest mistake all the UI design tools have made
I see value in having tools that are HTML/CSS based for working on web projects, but I think the pushback you’ve been getting is valid. Not everything is a website or HTML/CSS based, and using web tech for a design tool has many drawbacks that are difficult or impossible to overcome.
Performance, colour management, rendering accuracy, rendering abilities, and many other things make building a design tool on web tech bad if you’re trying to create something that can be used on a wide range of projects. Depending on the goals of the tool, those may or may not be dealbreakers, but it’s important to understand that web tech has some very hard limits when it comes to handling large design projects.
Even seemingly small things like mouse cursor accuracy is worse in web based design tools — mouse coordinates are returned as whole numbers in points on a Retina Mac, so only every second pixel of the display can be known for interactions. Native apps don’t have that issue. It also means missing out on lots of important OS features that are free for native apps, like spell check, text transformations, and better clipboard support (allowing for copy and paste of vector and other data types between apps). The performance aspect really can not be overstated, too. I haven’t used an HTML/CSS based design tool with respectable performance yet.
Promising something that doesn’t exist, with the sole purpose of gauging interest is selfish and manipulative. As a community and industry, we need to all push back on dark patterns like this, and call them out when we see them.
There’s no quicker way to turn me off a product than finding out they pulled manipulative garbage like a fake door website.
My advice would be to do honest research. Be upfront about the fact it’s not a real product. Nobody enjoys being lied to.
Given the choice, and given there’s only one opportunity to make a first impression, I’m all for taking the time to get things right.
If you have any respect for your fellow humans, please don’t do this.
Thanks for passing on the feedback.
There’s no prizes given for shipping something inadequate.
Where the design community meets.
Designer News is a large, global community of people working or interested in design and technology.