Design Tool Battle Royale
Tuesday, July 30, 2019
I put Sketch, Figma, and Adobe XD in a 3-way battle to crown which I think is worth learning and why.
The Big 3
Sketch, Figma, and Adobe XD - in my head these are the “Big 3,” so to speak.
What do all of these applications have in common?
They are design tools that can create prototypes and design boards for websites and applications.
What makes them different?
In my mind, the differences aren’t great. Before anyone starts ranting please read the disclaimer below.
Please note this is from the perspective of a beginner Front-End Developer and not a designer. I have no formal training and came to these conclusions from identifying what will work best for me and my needs.
That being said I see Adobe XD as a good starting place, a solid standard before Figma existed. I believe that Figma working in the browser is what truly sets it apart from Adobe XD.
Sketch, on the other hand, has been revered for years as the no-brainer choice, however, it is only for macOS. This is quite a barrier to entry for people that don’t already have a job in the industry, don’t have a Macintosh Computer, or just can’t afford one.
Figma has one leg up on the other 2 options that I haven’t seen them offer - it works exclusively in the cloud and the browser. You could download a desktop version if you’d rather not be in the browser all the time and it’ll still automatically store your files on Figma’s servers in the cloud.
For me, it’s just the ease of use with Figma and its seamless cloud integration. Also, it runs on my Chromebook that I cannot wait to get rid of, however, it’s my only laptop currently. When I don’t want to work on my desktop PC I have a way of getting out.
I’m sure that if I had a Mac I’d mess with Sketch but, for now, I’ve chosen Figma!
If I’m focused on coding, why do I want to learn to use a design tool?
I want to blur the lines between being a Front-End developer versus Web Designer. While I believe that Web Designers are crucial and need to stick around, I think that as someone that is going to be coding and creating what users will see and use, I should have some decent design knowledge.
I also have a goal to be a Full Stack Developer in the future, and with that, I want to be able to deliver stunning websites to my clients - in my opinion, you can’t do that without having a good eye for design otherwise they may look elsewhere.
Lastly, this is for me in two ways:
While I am still learning and training for my first job, I want to practice building a website from something a Web Designer would give me. This can give me a leg up when I eventually get my first job.
This is a great way for me to exercise my creative side. Being a musician formerly, although not as active these days, I need a creative outlet. Why not use something that will help me with my future career?
Focusing on Figma
In the past when I was learning something new, I’d usually just try, try, and try again until I got fed up that I didn’t know how to use the program yet. Not the smartest way to do things.
So I turned to YouTube! There are plenty of videos up on “How to Use Figma,” “Basics of Figma,” “Intro to Figma” - you get the idea. Figma themselves have a YouTube channel with how-to videos so there are plenty of free resources. Egghead.io also just released their Figma course, and naturally, Udemy has a plethora of courses for it as well.
I am looking forward to using Figma when I start designing a website for my Father’s business, my Girlfriend’s business, and more! While I have plenty of ideas in my head, it helps my productivity to write things down or at the very weakest decide upon color palettes, fonts, and a general website/page layout before getting to work.