How to use Adobe XD with Articulate Storyline

[@carbonoriginals]

That Repeat Grid trick is INSANE!! Thanks so much for your amazing videos. Greetings from Eugene!

[@DevlinPeckYT]

For sure!! And you’re welcome ☺️

[@SarahMaier]

I just learned that we have access to Adobe XD at work, this was very helpful. Thank you!

[@DevlinPeckYT]

Yay! Glad to hear it, Sarah :)

[@yogeswarans.p.muniandi]

Thanks a lot with your insight with Adobe XD. I'm a ardent illustrator user and often make my mockups with illustrator then transfer them to articulate. I was thinking that I literally thinking I wasting time rebuilding the design in articulate again and thanks to your video proved I'm not wasting my time at all.

[@DevlinPeckYT]

You're welcome! Yes, mocking up some layouts and iterating on them before moving into Storyline is a good use of time :D

[@debbieshelden530]

You were right. Mind blown on the repeat grid! Thanks for this video--I'm feeling less intimidated. Going to open XD on my computer for the first time next week!

[@DevlinPeckYT]

You've got this! Thanks for checking out the recording :)

[@saraafa8340]

I learned so much from this. I feel more confident to proceed with the mock up. Really appreciate this! Thank you!

[@DevlinPeckYT]

Yay! I'm glad that this helped, Sara. Looking forward to it :D

[@sneharecites]

Thank you Devlin. This inspired to play around more with it.

[@DevlinPeckYT]

You're welcome :) Thanks for watching, as always.

[@kaoutherakid4433]

Great video, Devlin. Visual experimentation is an important step in any design process. 😊 But, based on what I've seen in this video, I feel Adobe Illustrator will be an even better tool to use. One of the reasons is that if you need to, you can directly apply changes to vector images (exp: change the color of the shirt). And if interactivity is what you want you can actually import Illustrator files into XD and add interactivity there and it will work just fine.

[@DevlinPeckYT]

You can definitely use Illustrator if you prefer that 😃. Good comparison & breakdown!

[@sarahberger8576]

Thank you!

[@DevlinPeckYT]

You’re welcome Sarah!

[@MisterMessinger]

Super helpful-I am familiar with Figma so it was helpful to see the differences with XD. Do you suggest adding the XD file to the portfolio so the recruiter can see the “behind the scenes” process?

[@DevlinPeckYT]

Glad to hear this was helpful, and good question! And yes, I always recommend including a screenshot of the XD file and discussing that part of the process in the write-up.

[@Frommountaintops]

Hi, Devlin! Thank you for the informative tutorial. Just wondering: What are some of the benefits of using Adobe XD versus PowerPoint for visual prototypes? This is my first introduction to XD, so I'm sure there are certain features I am not considering in my comparison.

[@Kumar-rq9ro]

Thanks very helpful. Just a thought - even in Canva I guess one can do all that you showed above in Adobe XD. Possibly will take some more time, but the designing part can be done there as well for those who don't have access to Adobe XD.

[@DevlinPeckYT]

Thank you for sharing, Kumar! I’m not experienced with Canva, but if it works, it works 😃

[@Kumar-rq9ro]

Thanks. Had a request - if you can create a video showing the number of slides to be designed for a 5 questions / situation scenario based learning - and how it would look for example. It will help a lot. Thanks.

[@DevlinPeckYT]

Thanks for the suggestion! We do have a Storyline workshop about how to develop scenario-based eLearning, so that may help 😃

[@Kumar-rq9ro]

@@DevlinPeckYT Thanks. Will check.

[@sarayari3495]

Hi Devlin, what does the meaning of "good design is all about iteration" , when you talked about XD? and what do you mean when you say" we don't need to make XD for each slide, but we should make for each layout? thank a lot!

[@DevlinPeckYT]

Good questions! When I say iteration, I mean we work on a draft, get feedback, then revise it, then get more feedback, then revise it again. And we keep going until we make it as good as we can. And for the layouts, we may have 10 questions in our learning experience, but we only need to iterate on one question slide to get the visual design right 😃

[@sarayari3495]

@@DevlinPeckYT thanks a lot Devlin! and when you talk about job aid you mean" we can make something like list or brief or whatever we want... is it right?

[@DevlinPeckYT]

@@sarayari3495 Generally a job aid helps someone do the job in their moment of need...something that they can reference as needed to follow a specific process or perform specific tasks. So yes, a checklist may help with that :D

[@sarayari3495]

@@DevlinPeckYT thanks! and how we can make that? - I mean which software and tools is useful and you recommend for making job aid??

[@DhananjaySati]

Hi Devlin ! Liked your video . I have a question . Is there a way where I can create an animation in Adobe XD and export it to Articulate Storyline & make it work . Is there a solution , workaround or product limitation ?

[@EduardoRodriguez-du4qq]

Thank you Devlin. I'll make a mobile app simulator with animation from XD. Can I export entire project to web in XD and embed as a web object in Storyline?

[@DevlinPeckYT]

That sounds like an interesting project, Eduardo! And that may be possible re: XD and Storyline, but I it may cause difficulties when you're adding interactivity. For example, it would be difficult to communicate between XD and SL, and then it may defeat the purpose of embedding it in SL in the first place. Sounds like something interesting to experiment with though!

[@pd3018]

Hi Dev, will Canva do a similar job to CS to create a visual prototype for learning?

[@DevlinPeckYT]

You could try using Figma for prototyping. Sabrina has some great Figma tutorials on the channel, if you want to check it out. Although, I'm sure you could find some creative ways to use Canva as well :D

[@aarushipunia6876]

Hi! I understood the Adobe XD part-- but I'm stuck on Articulate Storyline. I'm using a mac and cant seem to find the opening slide you're working with.

[@DevlinPeckYT]

Did you get Storyline up and running with Parallels on your computer?

[@aarushipunia6876]

@@DevlinPeckYT Yes, finally! Running your video in the background--but can't figure out how to generate multiple choice options on Articulate Storyline like we did in adobe xd using the 'repeat grid'

[@aarushipunia6876]

Also-- could you explain how we build interaction through tags/linking on articulate storyline?

[@DevlinPeckYT]

@@aarushipunia6876 you can create a rectangle for each answer choice or use the built-in MC question functionality 😃

[@DevlinPeckYT]

@@aarushipunia6876 check out the “getting started with Articulate Storyline” video 😃

[@jeevanreddy4690]

Hey Devlin, is it good to learn Adobe XD as an ID?

[@DevlinPeckYT]

Hi Jeevan! Yes, XD is a good tool for prototyping visual designs, which is good for any type of eLearning project 😊

[@jessmariah14]

Can i just cop and paste my vectors to storyline?

[@DevlinPeckYT]

If you export them you’ll have much more control over their size (and you can make sure they’re big enough so no pixelation).

[@jessmariah14]

Could i just build everything in adobe first if i wanted to?

[@DevlinPeckYT]

You sure could!

[@jessmariah14]

@@DevlinPeckYT Thank you! Love your videos!

[@priyankadey82]

Is XD free ?

[@DevlinPeckYT]

Yes, I believe the personal use version is free 😃