UX Design Tools 2020 (the only software you really need)

[Music] hi everybody this is Christine and today's video we are going to talk about design tools that I use every single day as a full-time UX designer this is one of the most commonly asked questions that I get and reasonably so because there are so many different tools out there nowadays you sort of get into this decision fatigue and especially if you're starting out you might feel like you need to learn how to use everything which is not true by the way and so in today's video I'm only gonna be covering tools that are most essential efficient and also affordable because a lot of these tools are very expensive you don't want to waste money on tools that you're not going to use that much so I'll be covering tools that are industry standard that big companies like Facebook Airbnb Google are using just a copy of that if you are a freelancer or you want to become a designer at an ad agency you might be using other tools but the ones I'll be covering our industry standard for Silicon Valley and tech startups before I get into each tool I want to say a special thank you to HP for partnering with me for this video I intentionally chose to feature this HP Pavilion 15 laptop for this video to demonstrate that you can do everything that a UX designer does without investing in a super expensive laptop especially if your end goal is to be hired as a full-time designer at a company is most likely that your company will give you the latest and greatest laptop that's over $2,000 this one gets the job done it's efficient it's powerful and I will do a full review on this laptop at the end of this video so watch till the end if you want to see my personal review so let's get into the tools there's only really two tools that you need to learn how to use and those are figma and sketch surprise surprise you might have already heard about those tools I used to use sketch for the longest time until more recently our team of transition over to thigma and this is happening all across the board at different companies instacart we used abstract and sketch for the longest time and then we moved over to Sigma for several reasons and I'm going to cover them so figma is the most important tool that I use every single day I live and breathe and Sigma basically I create high fidelity mock-ups prototypes and also my presentation decks on figma so the good thing here is that once you learn one tool it's so much easier to learn the other tools so once you learn Sigma and you end up at a company that's still using sketch it's going to be really easy for you to pick up on sketch so the learning curve is not that steep for these two tools so the price you cannot be figma for its price because it's free and you have up to three projects which are basically three folders so within those folders you can create as many files as you want which is amazing because sketch is $99 for a one-time fee and there's a catch you have to update the app every year which is an additional $79 I didn't know about this until my friend told me and when I wanted to access my files in my personal laptop and I have an outdated version of sketch I realized I had to pay an additional $79 and I was like nope I don't need to access that design file so I ended up moving everything over to thigma anyway because sketch is such a hassle file management big mug wins this big time so when our team used to use sketch and abstract abstract is another program that you have to use for sketch if you want to properly manage your files it's very cumbersome and it's nearly impossible for two desires to be working under the same file because basically you have to create a master file first and then each designer who wants to work on that project needs to create a separate branch cuz after you're working file and then you have to merge that branch file to the master file and you end up creating duplicates and you don't know which is the latest version it was all sorts of chaos so once he moved to big Maha life was good again collaboration oh my goodness I love this feature it is so easy do real-time collaboration on Sigma so anyone with your figma file link because you can paste or copy and paste the big my URL and just send it to your product manager engineer or your mentor that you want feedback from and anyone without a figma account can access your file but if they want to directly comment on it they would need to get an account but it's free so it's super easy for them to get an account whereas on sketch you need to actually pay $99 for anyone to access your file two designers can be working on the same file it's really cool when several people are on your figma file because you can see where they're looking at and if they're commenting I kind of like to stock my engineers when they're viewing cuz I can see their viewport and see like oh cool they're looking at these designs maybe that's just me Sigma is browser based which means that you can access your file anytime you want if you have that segment URL link some people don't like that is browser based because they used to not have the desktop app but now they happen desktop app so if you want to work offline you can do so by working with the desktop app but I personally like to use their web browser just because I don't like to shift between two softwares I'm on the web browser anyway checking my email when it comes to clickable prototyping Sigma definitely beats and vision so before I started prototyping on thigma what I used to do was I would save my artboards on sketch export them to envision create hot spots for those screens so that people can click through the different buttons and what thought really cumbersome was whenever I was doing that for user testing and I made small design changes I would have to export the artboards change the hot spots and just go back and forth which took up a lot of time now with figma you can make changes on your artboards directly you don't need to keep updating your designs every time you make changes because your design file is basically your prototype but when it comes to advanced prototyping tools like principle framer fitme is definitely not there yet most tech companies can't afford to have their designer work on small minut interactions and cool animations so it's most likely that you won't be using principal or framer anyway there's also the inspect feature on figma where developers can access the CSS codes hex codes and all these different attributes by going directly to your figma file versus sketch doesn't allow you to do that you have to use Upland or some other tool to upload your artboard so that's the engineers can pull the codes needed to build your designs so all in all Vic mutt is the best and hottest tool out there right now now I'm going to walk you through how I use Fang mud this is not gonna be an in-depth tutorial but I just wanted to show you how I set things up and how I use figma to create high fidelity mock-ups prototypes and presentation decks so when you go to fig mine you sign up this is what you're going to see and on your left you have your projects you can see that I've only created two projects and you can have up to three but underneath each project I can create as many files as I want which means unlimited data hallelujah so I'm going to go into UX design tools the file I created for this video and you can see my high fidelity mock-ups and also I've created this slide just to show you how cool your presentation next could look like if you use figma if you click on each element you can see the attributes on your rights and your layers panel is on your left and then this is the tools panel and also prototype with these same screens so you have the design panel here but you can click the prototype now I've already created this prototype just for times sake and I've connected the screens to do what I want them to do so you can see the play button here I'm going to play my prototype and show you what I've done and this took me maybe 15 minutes I'm going to choose the roll agree to these terms this is a project I've done cart I'm going to click the cup foods and a button showed up now you can't do a lot of these animations on sketch like for example when I click on cup foods the button pops up from the bottom look at like you can't do those things on envision maybe they've changed some of their stuff now but back then which was a year ago I couldn't do those things and if you want me to do a more in-depth tutorial on how I use big Mattila straight things how I set up my prototypes feel free to let me know in the comments below there are a lot of tutorials out there figma figma the company has created a bunch of videos for you to learn they're very short five to ten minute videos so figma is such an easy tool to learn if you don't know how to use it and you can also see my slides here so i'm gonna show you some of the slides that you can potentially create play this prototype let's say I was presenting this to a stake holder then I'm gonna show them how it looks on web desktop web and then I'm gonna show them how it looks on mobile web and you can scroll this is how it's gonna look I really like this feature on figma because you can't do this with keynotes I use keynote a lot for presentation decks especially when I'm interviewing I still create slides on keno just because it's faster for me to do but I think I'm gonna start using thick mo more because I'm getting used to the tool and you can just do so many cool stuff with Sigma I know that a lot of you will be asking me do you need to know how to use illustrator or Photoshop InDesign do you need to know all these Adobe suite products the answer is no if you are applying to be a UX designer or a product designer no company will reject you for not knowing use that vector tool on illustrator because you won't be using Adobe suite products in your day to day job if anything I use it for my own hobbies when I want to create stickers or I want to learn graphic design on the side but I don't use it for my day job at all some of you have asked me about Adobe XD and I personally don't know any designer or company that uses Adobe XD so maybe freelancers use Adobe XD but it's not industry standard principle in framer our advanced prototyping tools and the learning curves for these tools are very steep they are very difficult to learn the good thing is that you probably won't be using them in your day to day job I personally use two principle maybe once or twice a year when I'm interviewing and asked to create slides and I want to add some magic in my presentation and add some cool animation so other tools that I use are not design related or quip and Europe the quip is like Google Docs but it's easier to collaborate with people so my product managers would use quip to write out their roadmaps I like use quip to document my designs JIRA is mainly used by product managers and engineers to break down their projects and tasks because you can create multiple tasks and just manage all the things that have to be done together in a more structured way I rarely go in there unless I have to file a UI bug so those are all the tools I use and now I'm going to review this HP 15 Bok top of the designer is really important to our laptop that is powerful so that you can simultaneously run design software's that take up a lot of power this laptop has a 1.3 gigahertz 10th generation intel core i7 processor with up to 3.9 gigahertz with turbo boost technology with a 16 gigabyte RAM now having a powerful processor is really important because this will help your laptop withstand all the programs you'll be running as a designer while saving your battery when you are doing a basic tasks like responding to emails so the battery on this laptop lasts up to 10 hours and charges really fast the battery can go from zero to 50 percent in approximately 45 minutes to give you a better comparison the MacBook Pro 13-inch has a 1.4 gigahertz eighth generation Intel Core i5 processor with a turbo boost up to 3.9 gigahertz and Apple retails a base-model MacBook Pro for $12.99 while this HP sells for $8.99 so in other words for $400 less you get the 10th generation Intel i7 processor twice the amount of memory and twice the amount of storage with two inches of extra screen this laptop also has a memory card slot which is crucial if you regularly import photos or videos to your laptop as I do the MacBook Pro unfortunately doesn't have a memory card slot so you'd have to purchase a converter separately so this is a 15.6 inch full HD display with a bright view panel and iris plus graphics that makes everything super clear and bright the audio is also pretty nice due to the dual speakers and audio boost a fine tuning sounds so if you are considering getting an affordable laptop without costing you a leg definitely consider this and I hope you found this video helpful if you have any other suggestions for future videos please write in the comments below and subscribe to this channel for more videos like this and I will see you next time bye [Music]

Channel: chunbuns

Views: 123,519

Rating: 4.9608727 out of 5

Keywords: ux design, ux tools, ux design tools, ui design, product design, user experience, user experience design, ux designer, chunbuns, christine chun, chunbuns ux, ux design portfolio, ux design software, software, figma, figma tutorial, ux ui designer, ux designer career, ux designer day in the life, ux research, design software, design tools, design tools 2020, learn ux design, ux design process

Id: s3QGrWOHqDc

Length: 14min 28sec (868 seconds)

Published: Thu Jul 09 2020