Practical Tools For Designers

There are so many wonderful and famous tools for designers like Sketch, Photoshop, Adobe After Effects or Figma. Our design team wants to share with you some lesser-known tools that will help you become more productive and lucrative.

Design Systems Management

Brand.ai is a fantastic tool that makes it easy to export, easy to share, and easy for the designer to put together. The tool helps to automate the workflow and bridge the gap between design and development.

Zeplin is the ultimate collaboration tool between designers and developers, which lets export your file in one click using our Sketch, Adobe XD CC, Figma, Adobe Photoshop CC plugins.

Lingo is a modern digital asset manager for your brand and product. You can create a shared asset library, empower your team, ensure consistency and increase productivity with its help.

Lucid is a tool for creating, managing and sharing design systems. From a simple component library through to detailed descriptions of your styles. Lucid gives you all the design styles in one place. So you don’t need to go hunting through layers in a file, or risk coding a component from the wrong design.

With Zeroheight you can create style guides using Sketch components, and keep them in sync with the Sketch plugin. Developers can contribute using interactive HTML previews and integrated Storybook components. Style guides are as simple and flexible as online documents, so your whole team can get involved.

Version Control

Abstract is a safe home for your Sketch design and library files, a single source of truth for your design team’s work. You can work on the same set of Sketch files without losing anyone’s work. Abstract allows multiple designers to work on the same file without fearing overwritten changes.

With Plant app you can invite designers to your project, sync changes between each other, and see the project grow. Plant keeps all versions you sync to it, and makes version details available to all members. Send the whole file or only the artboards you want to share. All information transferred encrypted and stored safely.

Kactus is a version control system built on top of the giant called git. Kactus transforms your Sketch files into separate text files. One for each layer. This allows git to track them, merge them, compare them. You can do a lot of things with Kactus: create branches, collaborate with other designers or developers, and commit changes without touching the command line.

Versions provides immediate access to the latest version of the design as well as all previous versions. You can work on the same design mockup at the same time without risk of overwriting or losing changes. See all the recent project updates and changes in your dashboard’s activity feed. Inspect when, why and who made a change through the changeset history log and visual difference browser. Versions currently supports Sketch files with more formats coming soon.

Folio is a simple version control for design teams based on Git. Its beautiful visual waterfall display makes great use of your screen real estate. It shows all files in the project (including subdirectories) in one overview. Now you can clone existing projects from anywhere, including Gitlab, Github, Bitbucket or your own Git server. Folio will automatically stay in sync. Folio detects when more than one person changed a file and prompts you to resolve the conflict while saving everybody’s work.

Mockups and 3D Mockups

Rotato is an app for your Mac that lets you create, capture, and animate 3D mockups for your digital designs in a matter of seconds. No 3d experience required. No need for Photoshop, After Effects or Sketch.

Samsung Galaxy Fold Mockup — free to download and use mockup of the newest foldable phone will make your product presentations look astonishing. It’s thoughtfully animated with Cinema 4D and designed to save your time and help you produce sleek, eye-grabbing and memorable presentations.

Vector Mockups Library is a huge collection of presentations mockups. This library consists of popular devices. With this set, you will be able to make your presentation more luscious and amazing. Download and share with your friends.

Clean Mockups helps you create designs simply and beautifully. Create stunning mockups using the latest device frames like iPhone X and custom backgrounds that make your mobile or website design standout, right from your browser quickly and for free.

Vectary helps to create beautiful 3D models with the drag and drop 3D modeling tool. You also can collaborate with your friends and colleagues online.

Typeface Tools

Fontface Ninja is a free browser extension that let you inspect, try, buy and bookmark any fonts on any website. You also get size, letter spacing, line height and color of the hovered font.

FontSpark is a simple tool to help designers quickly find the best fonts for their projects. By randomly generating fonts from a curated list of popular web fonts, designers are sure to break out of the habit of using the same 3 or 4 fonts in nearly every project and discover the perfect fit for their next website or design.

Sans Forgetica is a downloadable font that is scientifically designed to help you remember your study notes. It was created by a multidisciplinary team of designers and behavioral scientists from RMIT University. Sans Forgetica is compatible with both PC and Mac operating systems.

Webfont — is a tool that helps you to create a project and add your vector icons. You can even import your existing font, customize each icon and give your font a name. The tool lets to export your font, copy and paste generated CSS and use it on your website.

Google-Webfonts-Helper is a hassle-free way to self-host Google Fonts.

Flow Diagram Software

Miro Realtimeboard empowers your cross-functional discovery and brainstorming through an infinite canvas, robust set of widgets, pre-built templates, and powerful platform capabilities. Miro presents an entire toolkit for user story or customer journey maps, wireframing, roadmap or sprint planning, retros, and more.

Draw.io is the most tightly Google Drive integrated diagramming application available. It is a completely free online diagram editor built around Google Drive, that enables you to create flowcharts, UML, entity relation, network diagrams, mockups and more.

Prototyping Tools

Draftium is a free turbo prototyping tool for websites. Pick a template and customize it with the powerful editor by adding or removing pages, blocks, and elements. Get real-time feedback right on your prototype online. Make changes on the fly and get approval without delay.

Colour Schemes and Palettes

Sip is a tool to pick colors and convert in any color format required quickly. It gives you the ability to share colors with everyone and link them between the other tools in your workflow. Smart formats detects which software you are using and changes the Color Format accordingly.

ColorHexa is a free color tool providing information about any color and generating matching color palettes for your designs (such as complementary, analogous, triadic, tetradic or monochromatic colors schemes). Just type any color value in the search field and ColorHexa will offer a detailed description and automatically convert it to its equivalent in Hexadecimal, RGB, CMYK, HSL, HSV, CIE-LAB / LUV / LCH, Hunter-Lab, XYZ, xyY and Binary.

Adobe Color CC — “is an internet application that lets individuals try out, create and save various colour schemes, each of which consists of a set of five colours.” Adobe Color CC is a simple way to capture inspiring color combinations. You can export a color scheme straight into Adobe Photoshop, Adobe Illustrator and Adobe InDesign and Sync to Adobe Color service. You can also share themes with friends through Facebook, Twitter or email.

Chroma — is a simple free web app which allows you to easily identify your ideal color and get its corresponding values (in HSL, RGB or HEX format) ready to be copied and pasted in your favorite design app.

Colourco is a color palette that lets you pick colors based on hsl. Scheme-mode with monochromatic, analogic, complement, triad and quad colors.

Khroma is an AI color tool for designers, which has learned from thousands of the most popular human-made palettes across the internet to produce great combos. Browse as typography, swatch, gradient, palette, or image. Discover, search, and save color combinations you’ll love.

Coolors is a fast and easy tool that lets you generate beautiful color palettes. Just press the spacebar to get a new 5-colors palette. Click on the lock icon to keep the colors you like and repeat the process until you have the perfect colors combination that match your needs. You can work with your own colors. Just type in your colors in the format you prefer (HEX, RGB, HSB, CMYK, etc.), lock them and press the spacebar to get the remaining matching ones!

Skala Color is a compact and feature-rich macOS color picker that works with a huge variety of formats, covering everything you’re likely to need for web, iOS, Android, and macOS development — Hex, CSS RGBA, CSS HSLA, UIColor, NSColor and more. Skala Color automatically recognizes colors copied to the clipboard, presenting them as a swatch that can be applied with a single click.

Swatches is a fun and accurate color picker for the real world. Collect, inspect and share the colors that inspire you in your daily life. If you’ve ever wanted to paint a wall a true sky blue or color a logo with your favorite flower, Swatches is for you.

Animation and Motion

Kite is full of amazing tools and features to help you bring user interfaces to life quickly. Present your design in full screen in presentation playback mode or choose your own presentation window size while iterating. Customize the background color and transparency of the playback window for a custom look.

With Lightbox you can create the illusion of life. It’s an easy, enjoyable animation tool with which you don’t have to be able to draw to develop a great sense of animation timing. Here’s a dead easy way to experiment with animation timing and spacing in LightBox.

Lottie is a library for Android, iOS, Web, and Windows that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile and on the web! Designers can create and ship beautiful animations without an engineer painstakingly recreating it by hand.

Spirit is the animation tool for the web which makes designers life easier. No more switching between apps. You can save your time by live editing directly in the browser. Spirit Studio is currently available as a desktop app for Mac. A distributed version for Windows and Linux will be available in the near future.

UX Monitoring

FullStory replays your customer’s journey — like a DVR for your website — so you can search, see, and understand your user experience. It captures more data than any other digital intelligence platform and makes it easy to solve problems, find answers, and optimize your customer’s experience.

Hotjar is a fast and visual way to understand your users. Eliminate guesswork by watching session recordings and see how people are really using your product. Empathize with your users and see where they get stuck. Look at user behavior and ask the right questions at the right time.

Analyze user behavior across your sites and apps. Then send messages and run experiments from what you learned — all in Mixpanel.

Pendo lets you capture all user activity in your product without coding. With the service, you can analyze the specific page and feature usage, and slice and dice data across accounts, users, and custom segments.

Heap automatically captures every web, mobile, and cloud interaction: clicks, submits, transactions, emails, and more. Retroactively analyze your customer dataset without writing code and lets you flexibly model it with Virtual Events.

Fathom Analytics provides simple, useful websites stats without tracking or storing personal data of your users. Fathom gives you top pages, top referrers, bounce rate and average time people spend on your site. That’s it, all on a single screen.

Inclusive Friendly Tools

ColorBox is a web tool which shares learnings about working with color via an open-source color algorithm.

Contraste is a simple app for checking the accessibility of text against the Web Content Accessibility Guidelines (WCAG). Contraste allows you to quickly know if a combination of colors, for a text and a background, passes accessibility thresholds defined by the W3C, and thus is accessible to users with visual impairments.

Contrast is a MacOS app for quick access to WCAG color contrast ratios. The Web Content and Accessibility Guidelines are provided as a means to create more accessible interfaces for all, especially those with visual impairment. The entire app UI updates instantly when picking colors, making it easy to get the color contrast information you need to make informed decisions about the color of your text.

Icon Libraries

Feather is a collection of simply beautiful open source icons. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency, and usability.

Evericons is a collection of 460+ well-crafted icons for your next project. It’s free for personal and commercial usage.

Icondrop is a plugin for most of the popular editors which provides access to millions of design resources inside your favorite tool. Search and insert the desired item with just one click.

Cadabra Studio Favourites

With Svgsus you find the icons you’re looking for. Search and drag or paste the icons to whatever software you prefer. Use the bundled (material design) icons or your own libraries — just add a new set.

Snazzy Maps is a repository of different styles for Google Maps aimed towards web designers and developers. All styles are licensed under creative commons and are completely free to use.

Humaaans is a design library of the mix-and-match illustrations of people. Create your own remix: change the hairdos, tops, and pants. Rotate and position the elements in your humaaans however you like. Free for commercial or personal use.

Originally written for Cadabra Studio blog.