Hey there 👋Thanks for checking my first Hackernoon 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 😏). , , and -  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 and the ability to play with a tool for free. UI Design Tools to check Sketch Figma Adobe XD InVision Studio a rich feature set -  a browser-based graphic design app and a free Photoshop alternative: Photopea 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) y  -  Sketch-like design software for those who don't have a Mac: Lunac a native Windows app that works offline supports sketch files preserving the original structure- it's a beta, but probably it needs your attention. - a free & open-source graphics editor: GIMP available for Linux, macOS, and Windows. best used for image retouching and editing, free-form drawing, converting between different image formats - a graphic design tool built for creating social media posts, ads, banners or even websites. No design experience required: Pixelixe access to thousands of images, over 900 fonts and 700 icons export your graphics as jpeg, png (with transparent background) or HTML. -  create logos, icons, drawings, typography, and illustrations for print, web, video, and mobile. Made by Adobe. Other cool tools to take a look at: Illustrator - a nice tool that helps you to prototype, design and deploy voice applications for Amazon Alexa & Google Home. - a powerful web and desktop cross-platform tool to create vector graphics. Definitely worth a look! Voiceflow Vectr If you want to get the most of well-known UI tools, like Sketch, Figma, Adobe XD and InVision Studio here you go. collected dozens of learning sites around Sketch and design topics. are full of learning courses, guides, and assets. If you want to practice more with Adobe, check the . And a must-visit is , a collection of design books, podcasts, interviews, and reports. And if you want to learn vector graphics, take a look at these resources. contains tutorials and step-by-step user guides. You can lean Vector quick and easy with . Also, dive into GIMP tutorials for beginners, about photo editing, painting and more. Well, and here are general ebooks about UI Design by UXPin: , , and . Thanks for reading the article, I really hope you enjoy it! And what UI tools do you usually use in your team? One more thing… Sketch App Sources Figma Resources Adobe Blog DesignBetter by Invision Adobe Illustrator Learn & Support these tutorials The Psychology of Web UI Design E-book Bundle Tactical UI Design Patterns The Visual Storyteller's Guide to Web UI Design Lovely animation by drawkit.io, cover done by Valia Havryliuk

Adobe

Amazon

Fetch

A Frontend Developer's Perspective on UI Design Tools

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

How to Design Your App or Website for FREE

The 💩 Poop Emoji's 10th Anniversary

10 Year Challenge — How Popular Websites Have Changed In China.

10 ways how designing a chat bot is different from designing an app

10 Ways To Make Your Innovative, Game-Changing, Synergistic Website Stand Out In 2018

10 UX Tips To Create High-Performing Landing Pages

How to Design Your App or Website for FREE

The 💩 Poop Emoji's 10th Anniversary

10 Year Challenge — How Popular Websites Have Changed In China.

10 ways how designing a chat bot is different from designing an app

10 Ways To Make Your Innovative, Game-Changing, Synergistic Website Stand Out In 2018

10 UX Tips To Create High-Performing Landing Pages

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps