The Junior Designer Starter Pack
Danielle Johnson, Former Product Designer
Article Categories:
Posted on
10 Tools Every Designer Should Use
Starting a new job can be overwhelming, especially at the beginning of your career when imposter syndrome is high, terminology is new, and resources are flooding your way, left and right! During my time as a Junior Product Designer at Viget, I compiled a short guide of helpful resources for junior designers who need to refresh their workflow. *Disclaimer, these resources work for non-juniors as well ;)
Figma Plugins
While there are several Figma accessibility plugins for contrast, my favorite is Contrast. This plugin checks a design’s color contrast ratio for a set of passing guidelines. Contrast works on multiple elements, including text and backgrounds and updates their contrast ratio in real-time as changes are made.
When the design process is coming to an end, compiling necessary annotations for developers can take a long time. Redlines is a handy plugin that helps you prepare your work for the developer handoff. The plugin groups adds units of measurement to elements, creating an easy and streamlined workflow.
Making up fictitious, passable names for a high fidelity design sounds like a quick task, but surprisingly it can eat up quite a bit of time. With Random, you can now skip this step! This plugin generates random names based on a set of filters for gender and name length.
Free Illustration Resources
Mix and match illustrations and make more diverse people by changing the skin tone, clothes and hair of the vectors with Humaaans. This platform enables robust customization in order to make the illustrations work for your project. Not only can you change different elements to your liking, but you can rotate their body parts to make your people look more active and engaged.
Browse a large library of people, places and things to find what you need for your project. Undraw lets you search keywords and change the hex codes of the images to help you find what you need. You can download PNGs or copy the code!
Draw Kit features hand-drawn vector illustrations. This resource makes it easy to take a drawing and customize the colors and theme for your project. Draw Kit also comes in various packs such as “holiday” and “health,” which are useful for agency designers who work with a large breadth of clients.
Font Awesome is like a grown up version of The Noun Project. Font Awesome offers hundreds of simple SVGs and lines of code that are perfect for buttons. Their library features simple images like trees, but also more complex and branded images like the Amazon logo.
Mockups
This Figma plugin allows you to load phones, tablets and other 3D objects into Figma to easily export mockups of your screen in a device. With Vectary, you can move the device 360 degrees into any perspective. To my surprise, there are also several non-digital elements in their library such as soda cans and shirts!
Facebook leveraged their diverse employee group and created a thorough device library of downloadable images featuring people of all races holding phones. Unlike other mockup services that only show the device, seeing a hand interacting with your app or website makes it feel more real and actually lets you envision your creation in the physical world.
Angle allows you to alter your compositions angle in Sketch, XD and Figma. This site not only features the latest devices in dynamic positions but allows you to change their backgrounds and customize the setup as well! Some aspects of Angle need to be purchased, but you can also find free elements on the site.
With these tools in hand, all designers should be able to work efficiently!
