What front-end developers need to know about UI Design Tools
Tags: frontend, ux, design
Published: 2019-12-24 13:29:58

![Collaboration GIF](https://thepracticaldev.s3.amazonaws.com/i/lvc486l49pfverx94go3.gif)

Hey there 👋
Thanks for checking my first dev.to article. My name is Vova and I'm a self-taught front-end engineer. I started learning front-end two years ago and was lucky to land my first job in a tech startup. Getting the first job is (very) challenging but the startup I applied to wanted to give equal chances to the professionals of all levels.

So the last 1.5 years I was playing with React, Redux, Webpack, fetch, Node.js, Express.js Backend, Webhooks.…You know, in a startup you are wearing different hats. I was making 20+ landing pages, setting up A/B tests, helping the marketing team to make automation and eventually doing some design tasks.

That's fun and I always enjoyed design tasks, even if they were small. So it became asking myself, what other people are using for making design tasks?

Here is what I got from a small Twitter research:

![Screenshot of twitter poll](https://cdn-images-1.medium.com/max/1600/1*Va2hMy4_bF6HrMAXGslC1w.png)

I kept investigating, and found that there are dozens of design tools out there! And some of design tools can help you do wireframing, prototyping, animations, logo, design-to-code handoff and much more, all in one.
Here is my take away on great UI tools you need to know about, especially if you are a developer (all in my humble engineering opinion 😏).

###UI Design Tools to check

[Sketch](https://medium.com/r/?url=https%3A%2F%2Fwww.sketchapp.com%2F%3Fref%3Ddesigntoolsweekly), [Figma](https://medium.com/r/?url=https%3A%2F%2Fwww.figma.com%2F%3Fref%3Ddesigntoolsweekly), [Adobe XD](https://medium.com/r/?url=https%3A%2F%2Fwww.adobe.com%2Fproducts%2Fxd.html%3Fref%3Ddesigntoolsweekly) and [InVision Studio](https://medium.com/r/?url=https%3A%2F%2Fwww.invisionapp.com%2Fstudio%3Fref%3Ddesigntoolsweekly) - are the most powerful and well-known UI design tools nowadays. 
You probably used one of those already. They allow you to create, prototype and collaborate on a design. Adobe XD and InVision Studio can be used on macOS and Windows. Sketch is Mac-only and Figma is web-based with real-time collaboration. All those tools have [a rich feature set](https://medium.com/r/?url=https%3A%2F%2Fwww.kooslooijesteijn.net%2Fblog%2FSketch-Figma-Adobe-XD-UXPin-InVision-Studio) and the ability to play with a tool for free.

![Screenshot of Design Tool in Dark Mode](https://cdn-images-1.medium.com/max/1600/0*x36GMJbh6zJLWbyK)

[Photopea](https://medium.com/r/?url=https%3A%2F%2Fwww.photopea.com%2F%3Fref%3Ddesigntoolsweekly) - a browser-based graphic design app and a free Photoshop alternative:
- supports many formats like psd, svg and pdf
- works with both raster and vector graphics
- allows you to add gifs to your static images (we use it a lot in Flawless iOS blog)

[Lunacy](https://medium.com/r/?url=https%3A%2F%2Ficons8.com%2Flunacy%3Fref%3Ddesigntoolsweekly) -  
Sketch-like design software for those who don't have a Mac:
- a native Windows app that works offline
- supports sketch files preserving the original structure
- it's a beta, but probably it needs your attention.

![Screenshot of Lunacy design tool](https://cdn-images-1.medium.com/max/1600/0*pxftq-IJGUIjyi5n)

[GIMP](https://medium.com/r/?url=https%3A%2F%2Fwww.gimp.org%2F%3Fref%3Ddesigntoolsweekly) - a free & open-source graphics editor:
- available for Linux, macOS, and Windows
- best used for image retouching and editing, free-form drawing, converting between different image formats



[Pixelixe](https://medium.com/r/?url=https%3A%2F%2Fstudio.pixelixe.com%2F%3Fref%3Ddesigntoolsweekly) - a graphic design tool built for creating social media posts, ads, banners or even websites. No design experience required:
- access to thousands of images, over 900 fonts and 700 icons
- export your graphics as jpeg, png (with transparent background) or HTML.

###Other cool tools to take a look at:

[Illustrator](https://medium.com/r/?url=https%3A%2F%2Fwww.adobe.com%2Fproducts%2Fillustrator.html%3Fref%3Ddesigntoolsweekly) - create logos, icons, drawings, typography, and illustrations for print, web, video, and mobile. Made by Adobe.

![Adobe Illustrator Screenshot](https://cdn-images-1.medium.com/max/1600/0*wl-hkrrupOUwkpMf)

[Voiceflow](https://medium.com/r/?url=https%3A%2F%2Fwww.voiceflow.com%2F%3Fref%3Ddesigntoolsweekly) - a nice tool that helps you to prototype, design and deploy voice applications for Amazon Alexa & Google Home.

[Vectr](https://medium.com/r/?url=https%3A%2F%2Fvectr.com%2F%3Fref%3Ddesigntoolsweekly) - a powerful web and desktop cross-platform tool to create vector graphics. Definitely worth a look!

![Screenshot of Vectr](https://cdn-images-1.medium.com/max/1600/0*rljqLlbXHf3a-OkQ)

###One more thing…

If you want to get the most of well-known UI tools, like Sketch, Figma, Adobe XD and InVision Studio here you go. [Sketch App Sources](https://medium.com/r/?url=https%3A%2F%2Fwww.sketchappsources.com%2Fcommunity.html) collected dozens of learning sites around Sketch and design topics. [Figma Resources](https://medium.com/r/?url=https%3A%2F%2Fwww.figma.com%2Fresources%2F) are full of learning courses, guides, and assets. If you want to practice more with Adobe, check the [Adobe Blog](https://medium.com/r/?url=https%3A%2F%2Ftheblog.adobe.com%2F). And a must-visit is [DesignBetter by Invision](https://medium.com/r/?url=https%3A%2F%2Fwww.designbetter.co%2F), a collection of design books, podcasts, interviews, and reports.

And if you want to learn vector graphics, take a look at these resources. [Adobe Illustrator Learn & Support](https://medium.com/r/?url=https%3A%2F%2Fhelpx.adobe.com%2Fsupport%2Fillustrator.html) contains tutorials and step-by-step user guides. You can lean Vector quick and easy with [these tutorials](https://medium.com/r/?url=https%3A%2F%2Fvectr.com%2Ftutorials%2F). Also, dive into GIMP tutorials for beginners, about photo editing, painting and more.

Well, and here are general ebooks about UI Design by UXPin: [The Psychology of Web UI Design E-book Bundle](https://medium.com/r/?url=https%3A%2F%2Fwww.uxpin.com%2Fstudio%2Febooks%2Fweb-ui-design-principles-psychology-ebook-bundle%2F), [Tactical UI Design Patterns](https://medium.com/r/?url=https%3A%2F%2Fwww.uxpin.com%2Fstudio%2Febooks%2Fultimate-web-ui-design-pattern-workbook%2F), and [The Visual Storyteller's Guide to Web UI Design](https://medium.com/r/?url=https%3A%2F%2Fwww.uxpin.com%2Fstudio%2Febooks%2Fvisual-storytelling-web-ui-design%2F).

Thanks for reading the article, I really hope you enjoy it!
And what UI tools do you usually use in your team?