Best UX TOOLS 2020? – Sketch vs Adobe XD vs Figma

Best UX TOOLS 2020? – Sketch vs Adobe XD vs Figma

February 26, 2020 7 By Peter Engel


What’s up guys today, we’re gonna take a look at some UX tools. What’s the best on the market? Is that Adobe XD is a figma is a sketch all the stuff that you need to know coming up right next. Let’s go Guys for those of you new to the channel I’m Anthony combo and it’s my mission to make you a better designer over the last 10 years I’ve wrecked some of the world’s biggest companies getting some inside experience and my Mission now is to bring that to you if you haven’t already check out school that Anthony combo calm I’ve got a free hours course it teaches you all the fundamentals of our UX UI design everything you need to know to get started We’ve all that out the way let’s get going guys We’re going to jump straight in with the hottest design tool at the moment the hottest UX tool which is figma So for the last couple of years people have been using sketchy in the industry Adobe XD We’ll talk about those both in a second They both have to still have a valid place in industry But the hottest one at the moment by far is figma one of the reasons it’s so hot is that it’s free So people always ask me. What’s the best design tool I can start with I don’t want to invest a lot of money Into a design tool. What’s the best free one that’s been really hard to answer to be honest in the last couple of years Sketch was cheaper $99 but figmas free and figure was got so many advantages on sketch Also what one of the best things about figma is figma is a tool that works It’s browser-based so it doesn’t work. So you can download an app. You can download a Mac or PC version But all that does is that launches the browser version of figma in there? Everything is saved to the cloud and you can go anywhere you want launch you free figma account have access to all your files on the go make changes and then It updates it on the fly. I mean what more could you ask for? I’m professional user and I don’t even have a free account. So I think it’s an Unbelievable design tool it’s going to change the industry. It was really hot in 2090 and anything in 2020 It’s going to be the hottest design tool so head on over to figma comm. I’ve just launched this page I’m just going to talk quickly about what figma is and show you design and show you how to get started But definitely check this out before you check anything else out? so One of the things that figma is based around it’s all based around vectors so years ago, we used to make websites and Photoshop But as you know fur choppers basically for editing photos photos are all pixel based So when you do min on your design, you’d see jaggedy edges pixels Things wouldn’t be very smooth but Modern design tools are all based around vectors. You can draw things with a pen you can put shapes in there It looks great on screen and its really good for handing over to developers So that’s one of the things that figmas based around as we scroll down Figma keeps on adding new features all the time. Just recently the other two Auto layout So look at this on the left hand side Say your design in a chat app and you wanted to rearrange some elements on the page Before you’d have to move it out the way move the other one up move it back in it was a bit of a pain, but now big things are getting more like code actually but a lot easier for Designers to use so you can move things around the page things Auto layout and it’s such a cool thing It saves you so much time going forward. I’ve got a video are not allowed check it out I’ll leave it in the YouTube your card if you haven’t seen it already just go and favour them and one of the things that Really great design software is house. They leave it open for plugins for developers to write plugins. It helps the Program grow a lot faster and that’s something that figmas got built from the ground up in so quickly I’m just going to launch my own figma account. I’m just going to show you a design I put together This is just a really quick app for the moon But let me just show you a couple of things that figments got built in So I’ll do a future video on how to design this but this is our design here We’ve got free iphone screens now in the top right hand corner you can see design Prototype and code, so I’ll show you the code thing fair So if I click on the button and I click on code you can see it actually spits out the CSS So working in design teams. This is what developers want back in the day We used after go in Photoshop draw red lines on everything say how much space arm is involved? Say the actual hex code the colors, but now everything is built in there You can see it’s got the hex code for the button It’s got that it’ll of the font details if I go on it, you can share your figma file before for people There’s a share button up here If you click share You can then drop people the link you can drop developers the link they can go in they can they won’t have access to Right over your files but they all have access to check out all the all the code in everything you need and especially Sharing it with other people in your team two designers coming back on the same file, which is an unbelievable Advantage when you’re working a big team and then prototyping so simple, so if I click on prototype you can see here I’ll delete one of them so far so you can click on a button then all you do is click and drag and you say on top navigate to this page and we’ll click on this button and we’ll say navigate we’ll go we’ll go back to that page and Then what you do is you select your page You hit play in the top right-hand corner and what you’ll see is this’ll actually spit out a working prototype So it takes a few seconds to load so there’s my app within a phone I click login, there you go It launches the page and I click the button back and it goes back to the other page so There’s so much more detail. That’s gonna go into figma. I’m gonna do a full course about it So check out school that Anthony come boy. Calm up by the card up there it’s gonna have Lots of free tutorials you will have to go on there check it out Check out figma i’m gonna talk about the other design tools next but there’s some cool things that you’ll learn in there So, let’s see. What else is on the market guys. The next platform. I’m gonna talk about is Adobe XD So this you’ll probably see on YouTube is the hottest design tool It’s probably the most popular at the moment and I’ve said figma is gaining in popularity So figmas probably the best for individuals looking to guarantee UX and UI Adobe XD seems to be much more professional teams Use earn I’ve recently checked out Adobe XD. I think it’s very unpowered Figment to be honest But Adobe XD obviously has the money of Adobe behind there They keep on adding new things and I’m going to show you a couple of features in Adobe XD which probably stand it I’ll from figma at the moment in terms of a Few key features especially plugins and UI kit, so I’ll just quickly show you the hump. So head on over to adobe.com Check out Adobe XD at the time of publishing. This is free You might need a CC license in the future though We keep changing on the pricing platform, but I envision in the future to compete with figma It’s gonna have to be really cheap or free But Adobe XD again what it’s got its got code built into it. It’s got co-editing So other people on your design team within the building can log in they can leave comments It seems to be really built for design teams Not so much individuals at home, but more for like professional industry teams It’s got em, it’s got Auto animate, which is a really unique feature within Adobe XD so before when we were moving from one page to another What it will do is if it recognizes an element with the same name on each screen it will then rearrange that element which is really really cool and It seems to be built for us as it’s a set. It’s built by designers So they have by far the biggest butchers They all go into some of the world’s biggest companies and work of the designers and help improve the product So I say figma being a really big competitor for this but you know Adobe’s been around the longest put the most resources into it and although we all probably have the better program at the end of it but again probably More for professional use at the moment. So let me show you one of the really cool features about Adobe XD so Adobe XD has something called UI kits so this is within the resources section of the Adobe XD website so if you go up you can see there’s plugins again what we spoke about before with figma where you can Get things built into the platform to make it better, but UI kits is really cool So every large company at the moment has a design language for their company It helps people save time when developing and designing things. I’ve built a couple of that one for Barclays But what comes free with Adobe XD is their free design languages one for each one of the big boys So you’ve got the Apple design language the Google material design language and the Microsoft uwp design language so I’ve just downloaded the Material design language just to show you what type of you go so again it’s a very very simple layout of a program all the Things you can do around the left hand side It looks very simple, but it’s actually quite complex a few of the things you can get into when you get into Adobe XD So if I zoom in again, these are rock boards, but you can see there’s a free file I’ve downloaded and all the elements that you need to design a website are in here So I’ve seen people send me some designs for review of apps They might design an Android app but a lot of the time Guys, you don’t need to spend or waste a lot of time Design and stuff that’s native within the program. So things like these chips. These are cards You’ve got you know, you’ve got your top bar your bottom bar with your slide-out menus This is all built in to this UI kit. You might be able to find my fake movie dig around on the internet But this is one that comes with Adobe XD To to design an app. All you’d need to do is make a new artboard Drag and drop the elements that you want and spend your time really thinking and crafting about the experience It’s got prototype and share and built into it again which is simple but maybe draw the design our first then find the elements which Native on the platform drag them in don’t spend too much time creating unique components But think more about the experience and the flow of the actual App or website that you do in things like UI kits and integrations already help speed this along I hope you enjoyed the dhobi XD. I’m gonna be doing more things on Adobe XD So let’s take a look at the next design competitor, which is sketch. This has been the big boy in the industry You don’t want to miss out tonight. You’ll want to know how to use it And you want to know why these two are taken over So the last design tool I want to show you guys is sketch Helen over to sketch calm take a look So sketch has been something that I’ve been using for at least five years I used it to build the whole of the award-winning Barclays website I built the whole design language in sketch and I’ve been using it in some Cisco work. I’ve been putting together But I have changed I’m gonna be honest. I’ve moved over the fake yesterday in the last couple of months I’m gonna show you the sketch website. I think it’s good for you to You know, you can go on to sketch you can try for free. I think I think the price in estill $99 on sketch Really cheaper compared to some of the old design software that we used to go But I think sketch has probably got a lot of catching up to do For some of the things that have been released recently So sketch very similar to the other programs. It’s all vector based you can see that sketch has got lots of cool things So the buttons resize you can drag and drop things move about these have all been new features Which have been pushed by figma and some of the stuff at Dobby XD he’s been doing Sketches got components built into it so if your design and a website Like I showed you of UI kids before you might design your own UI kit for a website So you’ll have your own headers and buttons this can all be done in sketch Sketch is completely you know that they’ve been the big boys. So they’ve been investing a lot in the platform again It’s built by designers. It’s got very similar things to the other two programs. You can view it on your phone you can view Other things one of the big things that sketch doesn’t have built into it like diverters prototype in So I’m going to show you a website which I use in conjunction with sketch which is envision app. Comm again This is a free website And you’ll be able to get a plugin for sketch But what you’ll need to do is whenever you make a page or design a page in sketch you’ll click on it You’ll upload it to your rim vision profile you’ll then go on envision to then do all your you know, your links to your buttons and stuff and Envisions a great program. I’ve used it for some of the world’s biggest companies. You can see here Airbnb Amazon HBO, they all use envision But this is probably a little negative towards sketch so the other two have prototype and built into the platform It’s not built into it’s not built into sketch and It does slow down your work. So it takes a it takes a few more minutes to do different things That you’ll be able to do in seconds in the other programs and overtime It doesn’t sound like much but it does add up on your program again One of the hot things in the industry is adding code So there’s a plug-in called Zeppelin Which is free you add that into sketch so you can make a sketch or a bust but you’ve got to add all these different Programs and you’ve got to stay in touch keep them all Keep them all up to date There’s probably more plugin so sketch than there is video programs just because it’s been around for so long So you can make sketch robust. But again, there’s that barrier to entry which is the $99 fee and Just the fact that the industry seems to be moving the ward away from it But don’t let me hold you back go and take a look check in Zeppelin is a plug-in which exports the code to developers again Like I said before developers don’t want a PNG or JPEG. They do kind of one interactive prototype but what they want is the code that’s what they’re gonna have to go in they’re gonna have to Put the buttons and they’re gonna have to put the colors in they don’t want to keep coming back to asking you What the hex code that that color is All of that stuff. So if you want to check our sketch get the free trial get Zeppelin get Envision and Check it out Guys, I hope you enjoyed that lesson today. Let me know in the comments below what you for What’s your favorite design tool if you haven’t already check out school that Anthony convoy calm I’ve got a free hours course and there’s lots more tutorials coming on there. So you’ll learn everything You need to know about UX and UI design and get started if you haven’t already subscribed to the YouTube channel I’m gonna be making plenty more videos this year. It’s my new year’s resolution. So until I see you guys soon. Take care