A tiny nimble team: 1 Designer (me), 1 Product Manager, 1 Engineer
Adobe XD wanted to integrate a ‘Constraints’ feature to have parity with Sketch and Swift UI. Leadership asked us to copy what was in market.
However, resizing this way is time consuming and clunky. A designer must:
XD’s product ethos was geared towards intuitive, fast tooling. We decided it would be truer to our mission to build a drawing tool for every day use, rather than something that was beloved only by a few very detail-oriented designers.
We turned the constraints process on its head and focusing on the problem. What’s the designer really trying to do?
Constraints are either a delivery tool, or a way for designers to resize groups of elements predictably.
Through designing itself, a user already inputs how they want a group of objects to behave, or how elements should be pinned. If a logo is perfectly centered, it’s not a far leap to imagine someone wants it to remain that way!
Why not use the designer’s choices as primary input? Instead of demanding the designer define margins, pinning, and alignments for every element, we ask the user to define nothing extra.
We initially thought we’d have to integrate some machine learning or create a huge table of rules, but with under 10 rules based on alignments within the group, we could cover roughly ~80% of the cases we tested. If the resize didn’t work correctly, a user could quickly undo and move each element individually, or fix the end result.
We validated this with users, both internally and outside Adobe walls, and it performed very well. Since they hadn’t spent the time agonizing over little text boxes, if it didn’t work perfectly they were appreciative for the resizing help.
We quickly delivered this in a following release, with plans to build in ways to allow a user to correct a system, or add other rules.
Responsive resize in XD=gamechanger.
— Christine Reynolds Karr (@Karrtist) December 6, 2018
Oh I am 100% going to be using this responsive resize feature in adobe xd. This is cool!
— Darian Rosebrook 👋🏼 (@darianrosebrook) September 24, 2018
Responsive resize in xd, 👌🏾 clutch.
— Gabrielle (@hi_ghinks) April 27, 2022
Instead of replicating and delivering a significant chunk of UI (that few folks would bother using daily!), in the same amount of time, we quickly delivered a largely invisible feature that vastly improves quality of life.
As a fun bonus, we were awarded a patent for this!