Adobe XD CC 2021 New Features & Updates!

[Music] hi everyone it is that time of year again adobe xd has just released all its new features my name is daniel walter scott and i am a designer and adobe certified instructor and we're going to cover all the new features for 2021. if you want to jump to any specific feature i'll put a time code below that you can jump along to that uh also note that i record these intros after i record the middle bits and be prepared because i'm pretty excited when we get started i was excited it was the beginning of the day i calm down eventually you'll see what i mean let's get into it all right the first new feature in xd that i'm going to show you is this look 3d watch this something special about moving it around okay so you got an x you've got y rotation you've got front and back z it is very cool let me show you how to make some all right the 3d transform tool super easy i'm going to do it to this card this card is grouped and this little icon here turns on all the extra depth okay and the easiest way to control it is using this gizmo here i've got like x control that's why click on the right one okay so i can spin it up and down and left and right oh how cool is that okay i can also grab the center one so there's three controls x rotation y rotation and i've got the center one which kind of moves in the z back and forth okay i can kind of move it up and forward ah even just doing that is exciting you can control that up here with a bit more kind of grace okay by using the numbers let's use it a bit and it does definitely look better like at the beginning there when there's a group of them so i'm going to undo that okay set everything back to zero and make sure the z is back to zero as well z is kind of forward and backwards it works with the repeat grid and although you don't need this on and off this is more like just kind of like hiding some controls it's not like turning it into a 3d object okay so it doesn't really matter if that's on or off i'm going to use my repeat grid i'm going to quickly make something let's do that let's go like that let's dump some images in got some here i'll use these three actually i don't need the first one it's already up up at the top there okay i can do this and do 3d so i'm going to click out click on the whole object and you can see with those 3d controls on i can move the whole thing as a giant group is it still editable totally is i can go through in here and double click a couple of times and i'm going to call this one the memory were special okay you can work on them individually you can click on these groups and just kind of work on them separately so what i might do is get it back to where it was and at the moment if i click inside this group i can work on this one it kind of clips it because of the group uh probably just a bug for my version so what i'm going to do is select it i'm going to ungroup my grid and then work on them watch this i can select them all okay and because they're all kind of separated now i can do some cool stuff all right actually i want it to go this way again still editable text can be changed images can be switched out if i can select them right come on look smooth then smooth an image went in there and kind of resized to fit in the 3d space it's very nicely implemented now you can like this gizmo here is really good i guess and for me like using this kind of forward and back one the center dot you can kind of start moving them back and you're like oh look at that okay start stacking them up okay but then we start working in the z-axis and let's say that doing it by hand is probably not how i'm going to do it um you can obviously do it by hand and adjust them okay but i'm going to actually do a couple of things one is i'm going to duplicate a couple more to kind of fill this space here select them all and they kind of operate now just like regular objects which i love um i'm going to distribute the centers and in terms of the z okay so they're all at different z axis and the forward and back okay because i was messing around with these kind of manually so that it's hard to get the layer order right so what i want to do is i'm going to just make sure that they're all set to zero so the z for this one the kind of front and back is set to zero same with this one same with this one okay and once they're all at zero zero zero zero okay i can just play with the layer order so u i should have named my layers bad dan he should be at the top because i want him to be kind of at the top of everything then u they're all called groups don't put them inside of each other okay and slowly but surely i'll get this right using the right one who's next you and you nice grab you move you down throw on some images and then totally it's time for drop shadow time what else we got got another chair that chair there we've already got that one let's put that one in there i swore i had enough chairs here we go okay uh drop shadows are definitely 3d is nothing without a drop shadow so with this one here i am going to not apply it to the examiner outside a transform okay i'm going to double click to go inside and i'm actually going to do it to this gray box that i put in the background this kind of like solid box back here wasn't it was part of that original kind of card design i'm going to turn the shadow on here and i want kind of i've already messed around with this found something that i kind of liked okay 2010 20. kind of cast a shadow and i should have totally left them as a repeat grid i'm forever like taking out a pig repeat grid i'm like i'll never want to change these again that's the first thing i go and do okay so i can select this gray box and go to copy another nice trick is you can copy appearance i can click on this one and painfully go through and paste the appearance of them all leave things in uh in repeat grids as long as you can people or learn the shortcuts dan come on command option v oh my goodness it's 3d inside xd a couple of things that i've learned while using it uh shortcut is command t so command t just toggles that on and off one of the limitations for this first release of it is that i can't animate through like auto animations kind of like making micro interactions yet but i'm looking forward to that update and one of the other things to watch out for and it's kind of more just a generic 3d thing is let's say that i've got this and i rotate them a bit okay just kind of oh a little subtle thing and say i'm moving forward or backwards a little bit okay now i might go off grab my rectangle tool and start drawing something and go okay i'm going to draw this something in the top right corner so i can put in something you're like where is it i'm going to make it red still can't see it okay because of the z index this one's set to zero okay the thing i just drew everything is drawn at zero but this one here if i select on it you can see it's at 14 so it's a bit further forward so i need to do a couple of things either set that back to zero it's probably the best way okay and then they're both at the same plane and then it comes down to the layer order so the rectangle is above him or if you do want to start stacking things up in 3d i'm going to undo that so it goes behind is i want to select it cool little shortcut hold down the command key on a mac control key on a pc and i can click once click twice and click three times i'm trying to find the edge of it you can click things underneath you can actually just bring the z above like 20 okay brings it above you can start you know every object can be just a little bit just as long as there's one more okay then the thing underneath it okay if i want to draw something on top of that okay in 3d it needs to be 21. the next thing 22 it could be 90 because you want it to be all big in 3d anyway that might catch you out just keep an eye on the z and one other warning for 3d and this is probably just a warning for myself it is making everything 3d for the next six months is probably what i'm gonna do whether it's helping the user flow or the customer journey i'm just gonna make things 3d because it looks good and we'll probably all need to get it out of our systems but i guess we just need to be careful of things it's kind of like the lens flare syndrome when you figure out lens flare in photoshop and then every single thing needs a lens flare at least that's what happened to me so make sure it's purposeful and the other thing is you might be giving your developer an aneurysm when he sees all this 3d throughout your site you've got to check that a it's possible and possible within the time frame you depending on where you're going to okay what platform it might be that it's fine in a web app but it's not going to work on mobile or you're supporting kind of an older browser that won't allow it so just check with them before you sell it into the client and then have to somehow backtrack to kind of regular old boring squares anyway i feel like you're mum let's go on to the next feature and i'll stop the lecturing and the next feature i want to show you is small but super powerful it is auto height text boxes today's new version of xd allows us to do auto height so instead of boxes that kind of get overset like this watch what happens when i switch it to auto height look at that it expands but also the best bit is work when i type it keeps on going how could it get any better you ask actually you might not be asking that you might be thinking that's not that exciting but look it gets really exciting when you combine it with stacks this has been grouped combined into a stack now i'm going to grab this bullet point here copy it ready paste oh return it and paste look what happens everything moves down hooray i got a slightly more complicated setup over here okay i've got a stack within a stack and it means that i can add text in here or delete text okay and all my other elements underneath are gonna come up as well why am i so excited by this new feature i i don't know it's really useful and i've had a good coffee let's have a look at it together and we'll figure out how much of its coffee and how much of it is exciting auto height text box stuff right auto height um we saw it there before it's kind of two parts well the first part is let's get down to basics click once and i can type forever okay so clicking once gives you that we know from before as well that if i click and drag i get a fixed width box and what happened until the version today is that there was only this option this uh text area fixed size that's what it's called and it meant that once you got past the edge of your box okay and you clicked out you ended up with this like little red dot this kind of overset text and you can fix it by double clicking it okay or just dragging it out okay one or the other and what's now the default for xd so you might not even notice this too much okay but is when i click and drag out a box by default it's fixed width oh sorry uh auto height can you see it goes on forever so that's really cool existing boxes aren't so you can find boxes like this one here it's got some oversight text you can either select on it and go over here and say actually i don't want you to be fixed tight i want you to be auto height or probably easily just double click the bottom and you can see it not only expands it out but actually converts it to this auto height you can force it back by clicking the button or dragging it it's probably the way we're going to do it right so existing boxes won't be automatically auto height now where this gets really exciting like you saw in the kind of intro bit there is that it's when we combine it with something called stacks stacks came out last year and when you combine it with order height life is good how does this work so make sure this box here that we're working with is set to order height okay and i'm going to select everything that i want to be part of this group okay i hit command g or ctrl g on a pc to group it or you can right click it and over here this is the stack i want to make it a stack i want it to be running up and down okay and what this means now is they're all kind of united and they're stacked together when i change this auto hype box remember make sure it's auto height when i add a few more of these come on dan you can type copy and paste look at that oh look it goes down look how nice that is that's the kind of power of auto heights combined with some of the earlier features from last year called stacks stacks are pretty awesome if you haven't used them before okay i'm back to my black arrow here you can play with the spacing between all of these okay you can reorder them let's say you want color to be on the top i can click on this color one so i mean kind of inside of the group right click it once click it again double click it even okay and then i can drag these around and can you see they're not only i'm not just moving it around within the group it's remembering the spacing between all the elements and dropping everything down real nice i can adjust the spacing okay once it's set okay like that i can click on an object like this and say over here let's say that i want it to be you know i've decided it's 20 and 30. okay for the top and the bottom and that's my consistent kind of like paragraph spacing or in this case kind of like furniture spacing i can do the more than one big go i can click off click back on once and actually just make them all a certain height i can say you're all 25 so they all fit nicely or i can hold down shift and so click in once double click sorry to get inside of the group hold down shift and you can kind of just do them more visually all right let's see a different use case so this one here i wanted well i did and i kind of had one little thing that might catch you out so i want to share that with you so same like before i want these kind of this little group to be repeatable so first of all i want to turn it into a stack so i'm going to group it command g control g on a pc i want to make a stack it's going to be running the same it's kind of going down i want the spacing to be even i'm using 25 pixels now i want to start using a repeat grid this is where it gets slightly different actually first of all i want to make sure this box okay and here is actually set to the order height cool so now i want to use my repeat grid i'm going to zoom out i'm going to do repeat grid stuff okay i will switch out the images play with the spacing okay now what i assumed would happen was i could go into here and go oh look just add more text and it would push everything down but that's not the case because this is a stack but these aren't stacked together so what i need to do is ungroup it from a grid now you might find a workaround to make this happen with the repeat grid i haven't found that yet so let me know in the comments if you can i don't think you can um so i'm going to undo the repeat grid i'm going to make sure all of these fellows are connected okay or grouped command g again then make it a stack and that's what kind of does our magic where we go because now there's nested stacks within stacks we're getting complicated don't think about it it's like inception just follow those steps so now i can go in here and say add more okay and you can see they all move along you get what i mean i'm going to explain it make it worse but this was a stack so they all operate together and kind of adjust then i wanted all of these guys to be stacked together so i grouped them and made them a stack now they all kind of interconnect and we've got some complex stuff set up pretty quickly and with the power of the new auto height text box we can save a lot of time with our layouts who'd have thought just automatic height boxes would be so beneficial for xd all right one little side note before we go just because not everyone knows auto hype boxes are everywhere let's say illustrator if you are an illustrator user they have them in here as well you've drawn titles before and it's in a fixed width box and you're like okay i can just drag this out or i can click it and start flowing actually let's just go object no let's go to type and let's go to area type options and look there's that option came out a couple of versions ago but not many people know it exists look at that now i can keep typing keep typing it'll go on forever the same thing in indesign let's say here we've got our box okay and you're like great but i'm going to increase the font size i'm holding down command shift and using the period key on my keyboard it's a shortcut for making font size bigger so you get it to kind of size you want it but you're like oh it's all over set okay and i could drag boxes around and it's not a big deal but it's pretty easy to go command b control b on a pc or go to here object text frame options and there's this handy feature that not everyone knows about you can auto size any which way you like i only ever do height okay and i want to push from the top not the center which is weird okay click ok look at that i can adjust the font size again and look it's kind of going up and down as it needs to be anyway we've got totally sidetracked from xd to indesign all right let's get on to the next feature actually before we get on to the next feature i just wanted to quickly play this video and just check in and see did you enjoy the video so far if you did like the video and subscribe to my channel if you subscribe i've got lots of other xd videos here check them out i've also got updates for all the other adobe products uh on the channel there so there's ones for photoshop illustrator indesign after effects uh what else xd you're watching okay so check those out on the channel what you're seeing in front of you here are the things that we create together in my xd course so if you do want to take your xd skills further okay uh check out the link in the description there will be a link to my xd course at that same place i've got courses for photoshop illustrator indesign after effects premiere pro vs code dreamweaver i've got them all there check them out on the website anyway surprise sales pitch over let's get back into the xd updates all right the next feature is something called co-editing it has been around in the beta product for a little while but it is now part of everybody's version of xd as of today what is co-editing it means two people can work on the same document at the exact same time live and kind of see what each other's doing there's a couple of use cases one it might be that you and another colleague are working on you know ones working on mobile one's working on the desktop or web app you can work on the same document what i find it most useful for is when you're having a meeting with your colleague and you're actually you know you're in a zoom call and you have the document open together and you can kind of show what you mean rather than talking about it you can actually you know smash away at kind of a design and kind of explain what you're doing by moving things around and adjusting them it's just easier to show than it is often to tell so how to enable it first of all it needs to be a cloud dock this one happens to be but let's say it's not let's say i've got this other document or another version that's on my local drive okay you'll know it's different because can you see this one here doesn't have a cloud so that's a cloud dock if you have one that's locally it needs to be a cloud dock so just go to file save as and it will try and be a cloud dock without you asking xd really wants things to be cloud docs more and more now and if you're fighting that i'll show you some of the perks for cloud docs uh throughout this course and kind of cloud libraries really shared libraries but um yeah save it to the cloud document okay and you'll end up with it getting a little cloud next to it so you're working on a kind of a local version of it so it runs fast but actually the main version is stored in the cloud and that means i can do some fun things with it like sharing it with my buddy so i click on this little man at the top here and what we need to do is click on enable co editing give it a sec then i'm going to invite my colleague i'm going to invite them to edit let's have a little look at what happens on this other screen alright so you saw the notification there so let's pretend i'm bob and i'm working on this computer on the right hand side here okay so i'm a colleague of dan's and what i can do now is i can go to my shared with the documents in xd that have been shared with me okay and i can open this one up you can tell i'm bob because i'm on this other laptop's bad microphone but uh we'll leave that here so it kind of helps with the illusion so let's say i'm bob talking with daniel and we're on a zoom call as well okay or something else hangouts whatever it is okay so i can click on this and you'll notice on the left hand side there can you see it's gone red okay so that when i'm talking and i'm talking about this 3d group here okay i can be selecting on it i can start moving things around and can you see like that's no magic that's kind of real time i don't know how it's doing it but it's pretty fast anyway uh so yeah we can start working on a document either together on different artboards or in this case maybe it's just a review session and we're explaining things so on this side here on the right hand side okay you can see i'm i appear blue on my side and it's red on the other side let's pretend to be dan and click on this first one you can kind of see i can see where he's clicking as well in a future update it might already be out um i know they're going to use like curses you can see the person's name and like little um a little profile picture of them as well so potentially we could have the two ux designers we could have our ux researcher we could have i don't know some of the stakeholders all involved in this kind of like live chat co-editing experience let's do one thing i want to show you some of the one of the perks of kind of using this say cloud doc slash let's say let's say that uh bob decides he's talking to the stakeholder and they're going to move away from like really nice chairs and they're going to move into a different kind of space they're going to move into uh smelly old used furniture okay and that's what he's come back to me and um he's done it without me knowing okay i haven't been watching the sofa change okay so the thing is with cloud docs as well you don't really need to save them they seem to kind of just keep updating and keep connecting which is lovely but let's go back to the uh let's go back to being daniel with the better microphone because this one's terrible and let's forget about bob all right so bob's gone that bub we are going to now look at just discovered you're like what the heck is this and you find out about some changes that you were not expecting and want to roll back to uh one of the perks it's not essentially co-editing that does this it's more the saving on the cloud okay so you don't have to be co-editing for this to be a perk but you can see why it is perk when you are using co-editing because look it's got lots of different save histories okay of different times so i can go back to say something like this check what it looks like i can go back to this and i can say let's open up this one in a new new window and just kind of see what was at that stage there's probably um before it got changed look before i got changed to the weird thing okay can i can either now just save this okay so if i open another window i can save it as a new version maybe it's option a and option bob okay i might want to close the original one and save this over the top i know in other adobe programs that are using cloud docs there's a few extra options like rolling back one of the options in here is like to roll back to this version so i imagine that will happen with xd as well other interesting things are you can start bookmarking let's say that it's less of a you know so all these revisions uh stay around it's like a history panel except this history panel because it's a cloud dock doesn't go away when you close anybody closed photoshop praying hoping if you open it up quick enough that you could go back to like your history panel but it not be there so all the cloud docs in xd and illustrator and photoshop they all can roll back using this exact same option it's in a slightly different place i think in illustrator there's a panel called version history photoshop i can't remember if it's not made but it's got it as well what you can do is i can go through and say actually this change here let's say it was a you know you get to a fork in the road and you're like actually i don't want to like lose this version that i'm up to but i want to try something else you can go through and bookmark it give it a name and let's say this dirty old sofa option okay there's a direction we went but i can roll back to it okay so you can save as many as you like what will happen is these ones here that don't have a name or a bookmark next to them they'll expire after i think it's 30 days on a regular account um i've got an enterprise kind of version of it so i get 60 days so after 60 days all these ones that i haven't marked will disappear off my little versioning list it's pretty special it's pretty awesome that's one of the perks for cloud docs and i guess a connection to code editing as well and actually before i go the way that i use it is that i can save the version in the cloud i'm not working out at the same time as my other stuff but like we've got a team in new zealand i'm in ireland other sides of the planet so when i'm sleeping they're working i can share documents with them by the cloud and they can be doing changes i can roll back in the morning to see what they've done differently okay or try and roll back to things that i wanted to keep okay but it means that that cloud document is always up to date this is kind of like one source of truth in the cloud even though we can work kind of together on the document from opposite sides of the planet all right next feature all right the next feature is more like an enhancement okay so when i nest components i've got one component two of them i stick them together make them a group of components okay so two components nested inside of it what happens now is xd changes the way it works so i have duplicated that newly made group okay this is that button this is the exact same button okay these are all connected except now because they're in this nested group if i change this one here i go inside this internal component i change it what will happen is it'll only change the ones inside of this parent container it won't go out and adjust them all which it did in the previous version it's a simple change but it'll be a workflow that you'll find more natural let's jump in and kind of unpick it a little bit because it gets a bit inception there with nested components outside of components hopefully i'll make it clear in a sec all right let me show you how those component groups act differently now so what we're going to do is we are going to create two components and then group them together as a kind of a parent component so this one here is nothing it's just a circle in across okay so i'm going to combine them together command k on a mac control k on a pc or you can use the plus button there or there's lots of ways plus button over there when it's there you go okay so make it a component give it a name this is going to be my button for add okay this one here again not a component yet selected all command k on a mac control key and a pc and this one's going to be my card so if you haven't used components before or they used to be called symbols the perk is you know i can create a few of these ones so this is the master it's got the little dark green dot in it these ones here have a white kind of dot or square in the corner so these are instances of it so if i change this master if i go in here and like change the fill color to something uh you see they all adjust so that's the perk of components right we can change the master and they all come along for the right all right where it gets the new upgrades is if i combine two of these i'm going to grab the master stick it in so that's the master of the car that's the master of the button if i stick them together do command k again kind of making a second component that has two components inside of it okay this new one is going to be my card i don't know group and the change happens now if i make a couple of versions of this okay and i decide that i want to go inside of this and go inside and change the button okay let's say i go inside and change the color okay let's pick another color you'll notice that all of the instances of these cards changes but these don't that's what used to happen this used to change and these will used to change this it's just a nicer way of working and it's the way that you expect it to work rather than having to kind of create two different ones and do overrides is a change that you probably won't notice but you won't have any frustration as well and i guess the thing to note as well that if you are interested why it's happening basically all they're doing is whereas if i undo okay before there were say the two separate ones this is the master that's the master what used to happen is i used to combine these into another component and they were still masters if i went inside that would still be the master that's why everything changed what they're doing now is in the new version is when you convert it to that kind of like group of components it's converting the internal ones not from masters now to instances that's what gives us its kind of power of what we're doing you can go back to the master still it still exists but it's over here in the library only so you got to right click it and say edit my main uh edit main component it'll open up just off the artboard and there's my main so it's a great little workflow update for xd one other little thing that just happened i'm not even sure if it's this version just noticed it started happening is let's say that i go to this master okay and i open it up and i want to add ah actually i don't open it up i want to click on it and i want to have two different states i want a hover state so when it rolls over it does something let's say it gets bigger and let's say that that go in and change the color just a darker version of it set it back to its default state okay what happens now with these uh new version is that hovers never used to work when you combine them okay when you put two components together to make a new one the the the um what these are called the uh states didn't work but now if i preview it okay that's command to return on my keyboard or control return on a keyboard from a pc you can see down here the hovers actually work okay within these nested component groups awesome all right on to the next feature all right the next update or enhancement is now component states can go through the design specs for your developer okay so let's say that we have created this rollover effect okay so there's a default state in a hover state hit command return okay so there's kind of like two different ways it can look different sizes now mine's not working because i've got a pre-release version so there's a little bit of like waving my hands kind of showing you where it is but it's worth noting even though it's not going to work until after the release or at least i'm not doing it right i haven't worked out what it is yet so what we can do is i'm going to show you some other shortcuts okay that came out two months ago hold down the option key and type two on your keyboard so it's alt on a pc and two you can go one two three and it cycles through uh those are shortcuts which is handy and new we're gonna be on share we're gonna say i wanna export it for development i'm gonna click the button that says create a link i've already clicked it now i'm not sure if you have to mark this for export first so just double check that when you are working with it and so this one here you might have to go to this and say mark for export i'm not sure yet okay so open the link and here my developer can be sent this link and they can go into the kind of code options and they should be able to go down here click on the option and see both states appearing in the css mine's not appearing because i'm in the kind of pre-release early version yours should be working by now so if you do work it out and it's different from what i've explained just drop it down in the comments below so we can all figure it out so we can all know how it works anyway handy feature that i'm just a little bit early to demo for you all right so multiple flows and lots of good reasons to use them you might have noticed already once you've started wiring up one of your prototypes and flow one has appeared and you might be ignoring it but even if you're not there's a couple little tips for it so let's say that i want to have a couple of different flows i want this one to be my kind of onboarding okay so i want to have this and i need to make sure all of these artboards are connected up so i'm going to go to prototype mode using our sweet new shortcut remember option two on a mac and alt two on a pc okay and you can see i've already rigged these up to kind of connect to each other they've already got connections okay to make another one what we need to do is create little see that this is our sign up process okay so let's click on this one it's called flow one but i slave my onboarding okay and this one's going to be my say sign up flow and let's create another one let's go i've got like the desktop version of it so over here another home page let's call this one web app you might have like the marketing side of the website or the internal administrative side or a cms or there's lots of good reasons to have different flows the way to get them out is we're going to go to share using our suite shortcut okay so option three or alt three okay and over here you can actually do them for any of these okay we'll do two for design and one for development i want this flow to go to this one you've got to zoom out and decide on which one you want it to be can you see i can click it and it changes so let's say the first one is a web app i'm going to create a link that goes to anybody and okay it's kind of like maybe design review this is going out too okay so i've got my regular old link i am going to copy it and i'll just show you that that's the one for the web flow going out to design but i actually could decide that say onboarding is going to design review but maybe it's going out for actually uh user testing okay i can decide and create a different link for user testing you might have an a and b onboarding or an amb sign up okay that you're testing and they're actually separate links that's the key so i'm going to copy that one and you'll notice i'm not sure why i needed to prove it to you but look the numbers are different okay so just a different you know there's lots of different use cases for the different flows a b testing different ones you might have like you might be using this i have a presentation version that has a lot of kind of like markup on it to kind of help explain it during a presentation one that's like really tight that's going out for the developers to pull kind of assets and stuff from it may be that like down here you might have two different mobile versions one is like has all the android kind of uh system icons along the top and one that has apple for some reason it also has another perk if we switch back to design option one you can actually kind of use them to do some things like i can click on this and let's say click on onboarding can you see i can move it around and it grabs everything i've actually connected these two wireframes up so they're connected which i didn't mean to do go back to prototype and it's because they are connecting off into this one but there was by design kind of the sign up one doesn't connect back to this so i can kind of use it to kind of stack these just a nice way of moving things around is a big chunk or at least just selecting them all sometimes you want to select everything in a thing and do something to them delete them but anyway that is multiple flow it's been out a teeny tiny while but you probably have missed it well you might not have but it's new enough to throw into this kind of 2021 update all right let's get on to the next feature actually no i'm gonna go make a coffee you wait there and i will see you in a sec all right i am back i am caffeinated the next section we're going to cover is actually kind of three parts that make it up all around something called design systems the first part is how adobe xd you now uses libraries for its role in the kind of design systems creation after that we're going to look at something called a design system package and then thirdly we'll look at how those packages are implemented using adobe xd's new plugin for vs code so creative cloud libraries nxt then a dps and then into vs code if any of those things sound foreign to you don't worry a lot of it is either brand new okay from today or at least terms that not everyone has come across in a kind of regular day-to-day workings i know i was the same about some of them so i'm going to kind of try and break it down as best as i can that helped me understand what i'll also do is i'll add links uh to below this video for the things that i found useful to help explain some of the i don't know the terms and the philosophies and the frameworks but let me go through them now we'll start with uh xd's creative cloud libraries so this is more of a change of the way that i would control the assets for my company let's say that i've got my kind of style guides and i've got my brand colors i've got different components and this is the master document it's a cloud document i can share with people we did that before okay but what they're doing now is actually this cloud document can generate a library so libraries become a lot more prevalent in xd and that is the way that i kind of share the document with other people rather than this kind of like sharing the actual xd document that people connect to and pull the elements from for consistency we're doing it through a library you'll still have your master document like you might have like a sticker sheet like this with all the different layouts so you're controlling them in this document you as the owner but when i share it with people i'll be sharing not the document but the library all right let's do it with this document now minute furniture now i've created just a few basic things like character styles and colors uh components some icons in truth i just borrowed them from that materials document just to cut it down to make it a little bit clearer okay and so to share it you don't use the share option you might be able to go in there in the future that's where i looked first it's this option here okay so my assets document i want to say share this thing i want to publish it as a library my document has to be a cloud document first for this to work okay so make sure you're saving to the cloud then i go and share i'm gonna go share with bob again okay but bob after his misadventures with the sofa we are going to decide he is only view only he can't mess around with this shared library so i'm going to invite him let's check out what bob sees okay so i didn't see the notification because i didn't get it started quick enough but in here i can go to my notifications and i can say i'll accept your invite uh to join the library you can see it loading down here where did it load furniture mf uh let's go into xd i can go from my assets i can back out to libraries now my libraries have been implemented a little different in this version as well okay you kind of toggle forward and back between assets and libraries and where is my mf here are all the elements so it means now me as bob i can go through and make sure i'm consistent with our work okay okay i can select the text and make sure i'm following all the brand guidelines i can make sure it's the right colors i can be using the correct components okay here's my arrow tool and yeah it's a way of being consistent across a lot of different documents now this is very similar to how it worked before with creative cloud documents but it's via libraries now let's have a look at updating one so let's go and look at let's say this heart here okay so i'm going to add this one i'll make a duplicate of this one i'm going to right click this one and go unlink components so one's connected to our library and the other one isn't i just want to show you the difference in the updates so let's jump back to the big boss man dan all right so we've kind of got our brand going but there's always going to be changes right especially at the beginning and let's say that we do need to make these changes so i'm going to let's say the heart icon needs to change i'm going to edit the main component where is it let's end it up over here okay so let's have a look i'm going to go into it and fix it we're not going to fix i'm going to break it so let's destroy it just so we can really see what's going on you'll notice as soon as i do it i'm not sure what that is in the comments let me know squished batman i think pac-man space invaders anyway so we've updated it now and you saw the little thing that i ignored for a second it said update you've you know you've made changes to the library okay that's going to affect other people so you can get to it without clicking it if you're not fast enough by clicking this little option at the top see the blue dot there that indicates that there's something changed click on it i click update and let me show you the other computer all right and you can see over here that the one that's connected it's got a little uh it was green okay a little linking icon but now it's blue it means it's up needs to be updated okay i can go into my assets okay my document assets and it says look there it is it needs changing and if i hover above it can you see just gives me like a little preview of what what actually is going to change and do i want to accept it or not i'm going to click it so it updates and we are all consistent again it's green we are good to go let me jump back to the good microphone all right so hopefully you can see the way the new way that xd controls uh consistency via libraries now the cool thing about using libraries instead of the cloud documents is that it kind of spans other touch points as well so let's say that i'm doing a logo design in illustrator because it's a library it doesn't matter that i made it in xd i can go and find my library or is it there mf master okay i can go through and let's say that i'm working on this thing and i want to make a different color version okay the colors are going to be consistent let's have a look g for my gradient tool okay i can start you know moving around changing colors it's going to get awful all right you get what i mean look at that terrible colors actually how terrible i don't know i'll let you decide uh so also like i guess the the round tripping as well is really nice so it means that let's say that i'm doing let's grab some text okay let's use i don't know heading four okay click on the words there and let's say i want uh change it okay i want to go oh how you want to change this if i double click on anything but the heading waiting for it'll open up and it's kind of like where it got created there it is there it's even highlighted i can say actually it's edit you and let's go and pick i don't know let's go pick a different font okay and let's pick a different color to make it obvious okay there we go great so it's updated there it's updated over here in my document you'll notice there it updated uh gave me a little update i caught it this time and over in illustrator okay the it's updated here as well okay so i can go through and change it so you can see the consistency especially with uh you know xd style stuff xd hasn't been used in libraries to its full potential until now and there's lots more to come with libraries as well i know they're working hard on other parts to it but it means i'm creating kind of master documents in xd that can be used in print okay or social media maybe photoshop illustrator indesign libraries go through all of the programs all the after effects and premiere pro and not only is it for me and like my different applications but remember bob he gets the updates as well and it might not just be bob you might be working with a hundred other designers and that's a way of keeping consistent styles within your design system all right so that's the updates for cc libraries and xd so it doesn't use the cloud document anymore it shares by the library i've said that a million times let's look at the next part of this design system look at the design system package all right the next part we're going to talk about is something called a dsp or a design system package to understand or at least how i had to understand it is first you need to understand what a design system is so design system let me show you a couple of examples the easiest way now design the word design system is a kind of like an umbrella term think design spec style guide but in a grander sort of sense rather than just looking at things like this is shopify's one they call their design system uh polaris okay and you can go in and check things like fonts and colors okay this is pretty amazingly documented design system so it means i can share this design system with somebody else and we can have consistency across lots of different people and teams and countries okay so here's a bunch of different ones there's adobe's one okay and not only is it things like colors and fonts it's also things like the philosophy the language principles that they use okay airbnb has one often you can find a lot of these ones publicly okay atlassian has one google's material which we looked at before okay this is a pretty complex design system but its goal is to provide like consistent robust reusable design elements that designers can use as much as a developer can use now don't be scared off by design systems they don't have to be this big or this complex but they are probably most useful for a large company but your design system can be very small for your company more down in the kind of like design spec kind of space so that's what a design system is what is this dsp design system package first up let's look at what one actually is it's actually a group of folders okay with code in it so basically this is my dsp for my company i'm playing around with streamlines dsp for icons i don't have many others to show you because this is new it's kind of being released at the moment right as this video comes out so there will be a ton more dsps you can go and check out and i'll show you where to look for them in a second but yeah basically a dsp is this folder that gets zipped up and sent to somebody so for me as a small business i'd be using a dsp basically to it's it's an interchangeable file that i can give to people and it would contain things like my brand colors my fonts my headings everything that i had in my xd that's why we kind of looked at sharing this library first so i can include my components all my web and app components along with my character styles and colors so that's what i'd be using it for for somebody for the size of say google or atlassian or let's say adobe spectrum okay what they call their design system they can include a lot more okay because they need to look after a lot more functions and different departments so what they will be doing they'll be including not only kind of the colors and fonts but also in their dps you can add a lot of documentation like this website here so instead of this separate website documenting everything and including all their components and it includes like how their navigation works let's have a look at like tabs so the design ops team has spent a lot of time describing what tabs are what they do where they get used along with the css that actually use to create it so developers will want this so what they'll do instead of or as well as they'll create a dps that can be sent out a good way to think of dsp okay this new format is like a pdf was back in the day so if you are an older designer okay like me uh you first started your career with no no such things as pdfs or at least pdfs were one of the many options okay and it meant that when you sent stuff to the printer oh my goodness uh prepress was a whole separate industry where we were kind of messing around with postscript and fonts was a problem and trying to make sure images were working they weren't all bound together in this lovely pdf now i can send a pdf off to print and the printer can extract all the data they need from it's got all the fonts in there it's got all the images all the vector all the bitmaps dsp is kind of a way to try and make that connection from designer to developer anyway that's what made sense to me anyway let's just see in practice there's a lot of me i'm waving you can't see my arm waving but it's taken me a little while to get my head around it and i don't know i hope that helps get us started so that when we dive in and actually make one it makes a little bit more sense right i realize now i should have just probably shown you this at the beginning so we're in vs code it's a code editor the most popular at the moment it's what i use to build websites i'm definitely not a developer so take that in mind but let's look at this new plugin here okay so it's a new plugin for vs code you can find it in the extensions download it install it it's free and this thing here is what interprets those dsps okay so i can load that dsp package okay i can go find one i've made one just a real quick one to get us started today okay so i'm going to load that package and all i did was create some basic documentation included my fonts the typography you can notice these are all the things from xd and i'll show you how to make a dsp in a second using a mixture of xd and this plugin let's say the documentation that adobe does okay with all of this stuff it can be done through markdown here inside of the vs code plugin okay so they can have it in here along with a lot of the design systems all the code snippets and the difference for a developer okay or a designer is that they don't have to leave vs code uh for me like i use bootstrap a lot okay arguably a design system so i'm forever doing this kind of jumping out going to bootstrap going to the documentation trying to find the components and then searching through finding the thing that i need out of here and copying pacing back in so what this allows us to do is uh stay in bs code okay using a dsp now i know i think foxbox is making a bootstrap dsp okay it's not out yet uh it'll come out with this video so go check out foxbox but i can see lots of these dsps being made for different uh companies and different kind of frameworks so let's look at my one a little bit more so i've got my components from xd okay so there's my addition button uh buttons i got that card the nice thing about it is in the documentation here in a dsp i can actually add things like uh triggers and snippets you can decide what language the snippet's in okay you can pick from anything okay well there's a there's a bunch to pick from but let's say that i'm just using html uh over here i can start typing in like my i've started my snippets using the byol and i've only got one okay but it'll dump all the snippets in i can search this actually let's look at one other let's load another one so i'm going to click on the little square up here i'm going to load another package there's only one other one i have in the world at the moment and it is and open another one okay i've got this one called streamline okay streamline make icons and they are releasing at the time of this video you'll be able to go to streamline i think it's streamline hq and download their icons okay streamline hq dot dsp they're creating a free set of icons so instead of like a full design package or design system with lots in it a dsp can be used for something simple like this okay so i'm going to load the package and the cool thing about it there's some documentation there's no colors in typography but there's lots of components in this case lots of svgs okay so over here let's decide on one i don't know let's just say we put in actually let's find one the search in the plugin is really good you can type in arrow i'm going to put right you can just use bits of text okay and i don't know let's use this one or that one yeah that'll do and i can just copy it out of here or um i can start typing in you know streamline have got there kind of like emit trigger for stream it's going to paste it in okay so that's how i cannot leave vs code using the streamline plugin and let's have a little look let's go with just make it a little bit smaller for this let's have a little look you can see i've got my arrow in here so it just means that i don't have to be searching documentation and again it means that their documentation can be updated and i can be using the right snippet in the right language when the design tokens get updated let's get rid of that all the design tokens get updated i can get updated and in my preferred language let's look at creating one and show you how you can create from these initial kind of design tokens that xd creates through to all the different languages uh javascript objective c whatever it ends up being that you need it for your team okay i'm going to start creating one from xd you don't have to this dsp is meant to be a universal uh way of kind of sharing between design and developers there's going to be different ways because adobe have kind of spearheaded the creation of this they've given us tools to do it but let's say that i want to go from xd through to that dsp okay so inside of xd we're going to use this library that's why they've kind of shifted to using this okay so i go to this i share it make sure it's shared okay it needs to be a cloud dock needs to be shared and what we're looking for is i need to then go and find my library click browse you'll find it in your cc libraries mine is doing some weird stuff because i got a pre-release version but i should be able to find it in here where is my one it's called mf design okay hopefully there's a better way of grabbing this from within xd soon but that's how we do it at the moment okay i grab it i copy my link and then i shift into vs code so you need some basic understanding of vs code to make a dsp this way but the nice thing about it is that it's a very visual way you can programmatically make it there's a bunch of people doing that as well so have a little look at dsp i'll add some links remember down below for all the things that i've found but i'm a visual person so i want to create a dsp visually so i'm going to click on this little box here this is how it opens if you can't get to this okay there's this little button down the bottom here click it open and initially it'll just start here so here would be a great place uh go to publicly available packages okay that's where hopefully going to find bootstrap in a day or so actually two days from now when i'm recording okay documentation with dsps how to use there's lots of great and videos man you want to follow there is uh demand bourbon he's from the xd team and he's kind of he showed me how this works and he's got lots of good videos coming out after max as well so go check that out uh we are going to create a package let's do it okay we're going to name our package okay this is our mf um dsp i keep saying and writing dps that's a digital publishing suite indesign okay let's click folder that's going to go to i'm going to stick mine in my current folder you can actually use a git location okay if you want to do versioning that way okay i'm going to click next and this is where the magic happens so i've created that thing through xd as a real visual designer okay not much of a coder and when it comes to css i can decide on actually my team's using javascript it's using sas okay and they are using say i don't know flutter as well let's do them all so it's going to convert all my design tokens okay and the design token names come from all the names here in xd okay so i've called it heading 1 i've called that primary color i really should rename that from being that color number to something just more descriptive same with my components that are actually pretty good okay so do make sure that when you are naming your components and stuff in your assets panel give them names that aren't like the actual value it'll work but it means later on when i change that value it'll still be called if or fe599e even though it's a different color so it's going to take the things that i named as a designer and convert it to the languages that my developer needs okay authenticate just means my library that i made is public okay doesn't need the adobe id to get into it you might have to do that if you want to keep it private okay and then i just paste in my link here i'm going to click import and kick back relax and it's going to do a couple of things you might find down here it wants to install a style dictionary okay it needs to use that's what it uses to compile okay so you need to install that and then look at that it's kind of created me like the starting point okay for my dsp okay introduction obviously it's all very generic at the moment i can go down here look there's even a little tooltip i can start editing i can go into here and i can use markdown to kind of make it look very good okay in terms of html you can insert anything look at markdown references to see what you can put in here but you can link to images you can link to iframes you can style it and get it looking great for your dsp and you can add pages okay you know it's uh it's only kind of just getting started here this plug-in and dsps but it's pretty amazing what we can do again i got my tokens and let's say i forgot to do it i can go through and edit that now okay and give it a bit of name like a secondary color okay let's take that let's add a bit of let's say my card here okay let's add a snippet okay and i can go through and decide my trigger for it k is going to be cardo 1 okay and the language here all the different languages i used html and here is the way i want that card implemented i totally just stole the bootstrap one okay so it means now it's using xd by default i can go in here and say actually well dps settings can you see in here i can decide instead of xd it's byol so that it's kind of that's the trigger to get the emit going now the big thing that got me for a little while is that you need to finish editing for it to recompile all the different languages it did it at the beginning okay when i created it but now i've made some changes things won't update in like the say the javascript file or the you know the flutter file okay i've got to hit finish editing it says actually it needs to install the style dictionary locally there you go you get to see that part of it as well i can export the tokens and the exporting part is where it's compiled all the different parts let's have a little look at what got made so inside of here look this is my mf dsp that i created again all the heavy lifting happens in this dist file and style dictionary and here it is okay here's my css variables here's what it looks like as um what is this ios okay so it took my generic style tokens and converted it into the format required for the developers using these different languages all right do you feel like you understand dsps any more than when you started i hope you do uh these are brand new to me so i've spent the last two days just trying to figure out what they are okay and this plug-in is brand new everything's very new so i made this video even though it's like probably not my smoothest delivery of uh content it's more that i wish i had this video a couple of days ago to help explain it but i figured it out and i figured i would share what i know so to recap xd will make design tokens you can take those tokens okay through a library and put them into this plugin here and it will create a dsp for you you can edit your dsp from inside of this plugin to wrap up let's talk about some of the frequently asked questions about this process at least the ones i had and some of the answers that i've found out if i update my cc library assets will my dsp automatically update no every time that you import the assets from the library it's kind of a one-time pull into the dsp if i update my dsp within vs code plugin will it update my library no it is not a direct connection between the two can the dsp include all of the different component states no it can't you can edit using markdown through the documentation like i showed you but it doesn't automatically bring those through at the moment can you take dsps and open them within xd not as of this recording but i think the there is an idea for plugins to make that happen so you can take dsps and kind of plug it into xd and when you are new to the plugin you will find you get stuck by not hitting the finishing you start and you finish and only then will it start generating all of the extra code that you need all right that is it let's jump out to the camera all right hi hi bye this is the end i hope you enjoyed all the different updates uh i would like to know which one you enjoy the most for you personally it thinks going to make most of the difference to your life i'd like you to leave a comment below and let me know i'm really interested to see what you find the best um also if you like the video like it okay and also consider subscribing to the channel because i've got lots of other xd stuff here as well plus i've got all the updates for all the other adobe packages so uh there'll be updates for 2021 for photoshop illustrator indesign after effects you can there'll be links to those in the description as well go check them out uh these are all my social details if you want to see me there what i'd like to do is see what you make with a 3d i've only really just got it just started playing with it i'd like to see screenshots of what you've done with the product so send me them there join the group these are the social media places all right that is it my friends that is it for another update yeah i will see you around the place on different videos bye now you

Channel: Bring Your Own Laptop

Views: 37,661

Rating: 4.9630771 out of 5

Keywords: xd 2021, adobe xd 2021, adobe xd cc 2021, xd 2021 updates, adobe xd 2021 updates, adobe xd cc 2021 updates, xd 2021 new features, adobe xd 2021 new features, adobe xd cc 2021 new features, new features in xd 2021, new features in adobe xd 2021, new features in adobe xd cc 2021, xd 2021 tutorial, adobe xd 2021 tutorials, adobe xd cc 2021 tutorials, Adobe XD CC 2021 New Features & Updates, XD CC 2021 New Features & Updates, adobe xd cc 2021 new features updates, byol

Id: sB9i-w8SG3g

Length: 62min 56sec (3776 seconds)

Published: Tue Oct 20 2020