Go Back
Adobe XD is a powerful tool used for creating digital prototypes across UX/UI. Whether you’re just beginning your design career or you’re a seasoned professional, there are always more tricks you can learn to expand capabilities or speed up your workflow. Here are 5 Adobe XD features that you might be missing out on:
Feature #1: Cloud Document History
This may appear to be a pretty basic feature, but it can be extremely useful when dealing with multiple rounds of revisions as well as help you stay organized with iterative changes across the lifetime of a project. When working with a cloud document in Adobe XD, you are able to mark a timestamped version of that document to be saved for later and include a descriptive sentence to give context around which version you’re saving. Common uses can be anything from project milestones such as “Round 1 Client Review” to blue sky designs that are about to be scaled back, i.e.: “Full filter bar before reducing for Phase 1”. Cloud documents delete unmarked versions of the project after 30 days, so make sure you’re marking any iterations you may want to return to at some point!
Feature #2: Plugins for Common Tools
One of the biggest complaints about Adobe XD is the lack of basic design tools and features that can be commonly found in other Adobe products (or competitor software like Figma or Sketch). One way to get around this is through the use of XD Plugins. For example, XD may not have a native way to create bulleted lists, but alas, designers are in luck: there is a plugin simply entitled “Lists Plugin”. Utilizing the magic of scripts and other sorcery, it enables you, the user, to generate ordered (and unordered!) lists. We know it’s not the most ideal solution, but it is a great middle-ground between native functionality and fully custom pixel pushing. Next time you run into a missing feature, try blasting a few keywords related to that feature within the Plugin Browsing window.
Feature #3: Staggered Loading Animation
This feature is a dynamic way to bring your prototypes to life by introducing motion to separate elements, rather than one consolidated transition. By using the “Time” transition setting, you can create a series of staggered loading states which give your prototype a much more realistic look and feel. Let’s break this down, shall we? Say you’re working with a landing page design to create a staggered loading animation, you’ll want to duplicate your artboard two (or more) times, link them together sequentially using the Time transition property, and set the transition delay to 0 seconds. Now, they’ll simply fire off one after the other. Your setup may look a little like this:
Artboard 1: All elements on the page set to 0% opacity and all text blocks have been moved 100px down the page.
Artboard 2: All elements aside from text blocks are set to 100% opacity.
Artboard 3: All elements (including text blocks) are set to 100% opacity and textblocks have been moved back up 100px.
When previewing your prototype using the sequence outlined above, you will see the hero image fade in first, followed by the text blocks fading in as they rise into position. This effect creates a subtle difference but can significantly aid in communicating a premium quality to your design.
Feature #4: Step out of the box and into Auto-Animate transitions
Auto-Animate is far from being a hidden feature, but a lot of the magic of this transition comes from some out-of-the-box thinking. For example, incorporating exponential distance between elements can turn a simple hover “fade & rise” effect into a much more elegant solution. For this feature, let’s pretend that you are working on a meganav with multiple product cards that appear in a subnav on hover. With a traditional fade & rise, you may set the entirety of the group to use the same distance (i.e. 100px down the page). However, by increasing the distance for each additional element, you’re essentially forcing the group to load sequentially since the latter elements will need to travel a further distance before reaching their destination. Sounds boring, looks amazing.
Feature #5: Using Math (we know) within Input Fields
Another simple feature that’s commonly overlooked is the built-in mathematical functionality within input fields. You can amend the end of your input value by using standard math symbols (+, -, /, *) followed by your numerical modifier for a quick and easy way to skip the mental math. For example, if you want to double the width of a rectangle you’ve selected, include “*2” [asterisk + 2] at the end of the value in your width input field and hit enter! It even supports the classic order of operations (remember PEMDAS?), so you can set up more complex expressions to get different results such as “100 + 10 * 4” = 140 versus “(100 + 10) * 4” = 440.
Bonus Feature: A lovely hidden surprise (you made it this far!)
This feature is just barely useful, but it’s a fun little easter egg (watch out, Marvel) to be aware of… and hey, you never know when it may come in handy. Whenever you find yourself creating a triangle, within the corner count input field enter “<3” (you know, like an old school ‘heart’ emoji) and watch as your triangle is converted into a heart! We love love, so this one just might be our favorite.
Well, folks, thanks for coming to our Ted Talk (maybe one day!). Be sure to try out some of these features and tag us in your Before & After’s, @roboboogiepdx! It’s time to boogie down with Adobe XD – if you want to boogie with us (the experts in boogying), shoot us an email at hello@teamroboboogie.com!
