15

AMA: All About Prototyping in Adobe XD

over 5 years ago from , Design Marketing, UI/UX @ Adobe

Note: For those of you adding questions or comments after 5pm PDT on 2/21, we will respond during the following workday, 2/22 (most of our team is based in San Francisco). Thanks and have a good day or night!

Hey everyone,

We’re back for another AMA. Last week we released an update for Adobe XD that includes support for bringing in vector graphics from Creative Cloud Libraries, basic pen and touch support on Windows 10, and preserve scroll position for prototypes. You can see an example of what you can achieve using preserve scroll position here . We will continue to release updates just about every month.

Today we’re excited to talk with you about the future of prototyping in XD. High on the list is to deliver overlays (transitioning elements on top of an existing artboard) and pinned elements during scrolling and transitions. Following that, the next area is to enable higher fidelity micro-interactions and support more gestures and interaction types. As the team makes progress towards these, we want to hear from you.

He’re a few of the top requests that we have heard from the community:

Are these the most important areas around prototyping for you? Is there anything missing, or what else do you want to see related to prototyping? Are there other prototyping solutions you would like to see XD integrate with? Our team is here from now to 2pm PDT to chat and answer your questions. Let us know what you think!

Our goal is to build the best solution for UX design with your feedback. Stay in touch with us on Twitter, Facebook, or UserVoice, and check out what other designers have created with XD.

Cheers, Kyle

29 comments

  • Jernej Horvat, over 5 years ago

    When do you plan to release a feature set that would enable us to create custom animations a la After Effects? By that, I don't mean to use the same UI as in AE.

    And if the answer to the question is sometime later this year is there a plan to at least have the ability to import XD files into After Effects?

    3 points
    • Kyle Galle, over 5 years ago

      Hi Jernej, yes, integrating with other Creative Cloud apps like After Effects is on the roadmap. I don't have a timeline I can share at this point but I would add your vote this feature request. Also, with last month's release, XD now integrates with advanced animation tools like ProtoPie and Kite App. If you don't mind sharing, what types of custom animations do you use the most in your projects?

      0 points
  • Simon Deighton, over 5 years ago

    Im really loving XD after using countless wireframe/prototyping tools in the past. With some of the wireframes I've done recently, I've been using font awesome for icons I needed (by just using a text object and pasting in the glyph), are there any plans to integrate with icon providers?

    1 point
    • Kyle Galle, over 5 years ago

      Hi Simon, glad to hear that XD is making wireframe/prototyping simple for you. In terms of icons, this is something we're looking into. You mentioned font awesome but are there are other providers you would want to see? Also, would you expect the icons to be available in an XD file or through a Creative Cloud library?

      0 points
  • Armando Scuro, over 5 years ago

    Hi, I'm a huge fan of Adobe XD and I use it everyday, It truly makes designing feel like a breeze.

    My question is, any ETA on timed transitions, and swiping gestures for prototyping. additionally regarding responsive design (on symbols mostly), cause right now I have to break a button symbol to resize it and then create a new button size symbol, or redesign two cell symbols for different number of paragraph lines.

    Also if you don't mind. but when can we expect a Dark UI? It would be super amazing as my eyes have not been the same since using Adobe XD. (seems easy since Adobe Dimensions has it and it shares the same aesthetic as Adobe XD)

    thats all, love ya all and all your hardwork. can't wait to see what you guys have for us. cheers

    1 point
    • Kyle Galle, over 5 years ago

      Hi Armando, glad to hear working in XD is fast and easy for you! I don't have any ETA for these features, the team is working hard to deliver more capabilities with each release.

      Symbol resizing is on the roadmap. If you haven't already, I would add your vote here.

      Thrilled to hear that you're enjoying using Adobe Dimension! In terms of dark UI for XD, I would upvote the request here.

      1 point
      • Armando Scuro, over 5 years ago

        Hi Kyle, thanks for the reply. I already did upvote those. At any rate, can't wait for what is ahead for Adobe XD

        1 point
  • Stephen Leung, over 5 years ago

    Fixed elements are important. I had multiple people ask me if they have to scroll all the way down to see the freakin tab bar.

    I also want responsive artboards, so I could show developers and other people how the screen would look for different screen sizes.

    I think Animation, Artboard Overlays, Video and Gifs are great. But I wouldn't make them the biggest priority. Most of the time we don't even have the videos made yet. Animation is only done after the clickable prototype is confirmed. And Artboard overlays, I could just make another artboard and have another artboard link to that screen.

    1 point
    • Kyle Galle, over 5 years ago

      Hi Stephen, thank you for the feedback. The team is working on bringing fixed elements and overlays to XD soon.

      For responsive artboards, are you wanting to change the size of the artboard and have the elements adapt to that new size? If you have not already, I would up vote the request here.

      Also, speaking of sharing with developers, have you tried out Design Specs (Beta)? Any feedback on it would be greatly appreciated.

      1 point
      • Stephen Leung, over 5 years ago

        Hi Kyle, I've been very active on Adobe Uservoice and have upvoted on that feature already.

        I need to show developers how the app will look like on different screen sizes. And I always design for the smallest screen possible which is the iphone5. But since I need to create website landing pages promoting the app, I have to put the design into a newer device mockup like the iPhone8. Which means that I need to duplicate the artboard and manually change the size. Which is inconvenient.

        Also, responsive artboards would be clear to developers to see how the logic of the layout is gonna behave. Like this website here, the developer decided to turn the background as one image and have it scaled. But in my head, I wanted the shape elements to be pinned to the sides. If responsive artboards were here, I could have communicated better with the developer on how exactly I want the website to behave.

        Yes I've shared with developers the design spec - this is my feedback here

        But I never got a response.

        1 point
        • Kyle Galle, over 5 years ago

          Hi Stephen, thank you for the note and your feedback on uservoice. I also appreciate you sharing a detailed example of how you want responsive artboards for communicating your design intent to others. I like the website's use of the colors/illustrations! I see how the background image resizing does not match your initial idea of pinned shapes. I have asked another team member to respond to this post with more details about the latest thinking regarding responsive design.

          In terms of the Design Specs request, the team is considering how to simplify the viewing process easier. As your note mentions, the sign-in screen can be a small hurdle that complicates the step. I have asked another team member to chime in about this request.

          1 point
          • Harish Narayan, over 5 years ago

            Hey Stephen,

            As Kyle mentioned , we are looking into making the experience of viewing a Design Specs more frictionless. Do keep following us on UV to stay updates on the latest regarding the same

            1 point
          • Stephen Leung, over 5 years ago

            Thanks Kyle! this was all made in Adobe XD. And Photoshop. Really like the ability to use Creative Cloud Library with Photoshop and now illustrator.

            Another feedback I would give about Design Spec is because I am designing for responsive website pages, I often have to link the desktop to tablet and mobile, so that it'll be shown in spec mode. It would be great if there was a checkbox button where it includes all artboards.

            And for Clickable Prototype, it's a hassle to find missing linkages when you have over 500 artboards. And when you create the link, you find that only 160 screens are there. I upvoted this idea on uservoice where it highlights the artboard's border red if it has not be linked.

            Right now I use design spec to cross check which screens have not been linked.

            I think I already shared with Harish before, that developers also requested to splice the assets themselves on the spec mode. Sometimes developers chase me and inform me that I forgot to splice certain assets.

            1 point
            • Kyle Galle, over 5 years ago

              Hi Stephen, thank you for the detailed feedback. I am glad to hear that Creative Cloud libraries in XD is accelerating and simplifying your workflow!

              For the option to show all artboards in Design Specs, I would add your vote here

              In regards to the highlighting the missing links, I can see how that type of functionality would be very helpful, especially for files with a large number of artboards. If you don't mind sharing, what type of project required 500 artboards?

              On splicing assets, the team is working on asset extraction as part of Design Specs. If you have not already, I would upvote this request here.

              1 point
              • Stephen Leung, over 5 years ago

                Hi Kyle,

                Just added my vote.

                I included an app that I designed that has 460 screens here.

                This is the spec link here

                A large chunk of the app is the lessons.

                1 point
                • Kyle Galle, over 5 years ago

                  Hi Stephen, thank your for the vote and sharing your app. 460 screens is no small project! Love the use of illustrations!

                  1 point
  • Jonathan NemargutJonathan Nemargut, over 5 years ago

    Any plans to make any interactive form elements available in XD? Would love to mock up an input field that allows keyboard input.

    1 point
    • Kyle Galle, over 5 years ago

      Hi Jonathan, the team is looking into this. I would add your vote here. If you don't mind sharing, are there specific types of projects where you use input forms the most?

      0 points
      • adrian ioadrian io, over 5 years ago

        Form elements are one of the most important things (for me) when it comes to prototyping. I'm surprised that it's not higher on your priority list and that you need to ask the question what it's being used for (sorry, don't mean to be negative, just surprised).

        Whether it's for business app or consumer apps, form elements are used every where and I'd like to test out input placeholder text, seeing the keyboard pop up on mobile devices etc.

        2 points
        • Kyle Galle, over 5 years ago

          Hi Adrian, thank you for feedback. The team is looking into form elements. I have asked another member of the team to reply to your comment to provide additional detail.

          You're right that there are a multitude of use cases for form elements. My question about how its being used is to make sure we're understanding the requirements and to be aware of any unique cases that haven't been considered. From your examples, is validation of the data entered a critical part of your prototyping process or just the ability to input?

          0 points
        • Jonathan Pimento, over 5 years ago

          Hi Adrian,

          I completely understand the importance of being able to prototype form elements in XD. Its lower in priority only because we have a couple key foundational pieces we would like to deliver first.

          As we make progress on the foundational features, we will continue to work on adding support for form elements, gestures and more advanced prototyping capabilities.

          Thank you,

          Jonathan Pimento Product Manger - Adobe XD

          1 point
          • adrian ioadrian io, over 5 years ago

            Hi Jonathan,

            Thanks for clarifying.

            I love the early Adobe / Macromedia products. It’s a shame you didn’t use Flash as the basis for XD - it had everything you needed to create simple and sophisticated prototypes. Good design tools, symbols to create components and styles, behaviours for non-technical designers to add interactivity or Actionscript for designers who can code. It was also easy to share specific motion settings with developers. All that was missing was output to HTML (rather than SWF) and the ability to make adaptive layouts.I appreciate it probably wouldn’t have been that easy though to add those extra bits on top of an old codebase…

            Anyway, my prototyping tools of choice are Framer and Axure - which allow you to create very basic lo-fi prototypes or sophisticated hi-fi prototypes.

            I appreciate it can’t be easy prioritising features, as everyone has different prototyping needs - from simple to more sophisticated. I’d argue though that basic form elements and interactivity should be part of the foundation - this will make you stand out a bit more from your competition, who are all still focusing on the basics and features that are not so important for enterprise customers / apps. For example Invision recently gave a presentation of their new Studio app and its prototyping capability to a Fortune100 company. When the question about input fields popped up the response was ‘Planned for a future phase'.

            In summary - I believe input fields are more important than the ability to create custom animations or transitions for example. I understand animations etc add the wow factor and it's exciting, but form elements have more utility when it comes to prototyping business apps.

            @Kyle Must have: basic HTML form elements and interactivity. Having custom validation is a nice to have, but not something I’d consider for v1.

            1 point
            • Kyle Galle, over 5 years ago

              Hi Adrian, thank you for the follow up about the input versus validation. Makes sense, especially in the context of building business apps. We're working towards richer fidelity in prototyping. I appreciate you letting us know what you'd like to see from us.

              0 points
      • Jonathan NemargutJonathan Nemargut, over 5 years ago

        I work on UX for an enterprise product. I don't expect form logic to cause changes on the screen similar to Axure. I only want to make my mockups feel more high fidelity for usability tests and allow simple actions (like pressing enter) to be able to change to a new screen.

        1 point
        • Kyle Galle, over 5 years ago

          Thank you Jonathan for the additional detail; makes sense. The team is working to add features that will help you achieve richer fidelity in your prototypes. I will also pass your feedback along to the team.

          0 points
  • Andrew Hersh, over 5 years ago

    ETA on any of the upcoming features? Specifically fixed/pinned elements.

    1 point
    • Kyle Galle, over 5 years ago

      Hi Andrew, yes, the team is working hard on fixed elements. We hope to have it available in early summer but this is an estimate and is subject to change.

      1 point
  • Karan Panchal, over 5 years ago

    Need more update on the clipping masks in xd.

    0 points