What front-end developers need to know about UI Design Tools

Vladimir Berezovsky — Tue, 24 Dec 2019 13:29:58 +0000

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:

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, Figma, Adobe XD and InVision Studio - 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 and the ability to play with a tool for free.

Photopea - 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 -
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.

GIMP - 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 - 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 - create logos, icons, drawings, typography, and illustrations for print, web, video, and mobile. Made by Adobe.

Voiceflow - a nice tool that helps you to prototype, design and deploy voice applications for Amazon Alexa & Google Home.

Vectr - a powerful web and desktop cross-platform tool to create vector graphics. Definitely worth a look!

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 collected dozens of learning sites around Sketch and design topics. Figma Resources are full of learning courses, guides, and assets. If you want to practice more with Adobe, check the Adobe Blog. And a must-visit is DesignBetter by Invision, 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 contains tutorials and step-by-step user guides. You can lean Vector quick and easy with these tutorials. 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, Tactical UI Design Patterns, and The Visual Storyteller's Guide to Web UI Design.

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

DEV Community: Vladimir Berezovsky

What front-end developers need to know about UI Design Tools

UI Design Tools to check

Other cool tools to take a look at:

One more thing…