✨ 35 New Tools for UI Design
Toolbox #6: Adobe Fund for Design, React for Designers, Gradient Backgrounds, and more!
Welcome to Toolbox #6 — a carefully curated collection of the best design tools and updates from within the design community. You’ll find everything from updates on the most well-known brands (such as InVision, Figma, Sketch, and Adobe) to emerging tools made by individuals and smaller companies.
This issue we have 35 brand new resources for you to explore, including:
🎉3 new learning resources
🗺3 user flow tools
🎨4 new color tools
🎒3 design resources
🛠11 design tool updates
💎4 Sketch tools
🖌7 design utilities
📢Announcement from the editorsWe are also excited to announce that Adobe is now supporting us to build the Prototypr.io community platform through the Adobe Fund for Design.This not only enables us to continue to bring the same impartial coverage as ever, but also provides a means to give even more back to the design community.
We hope you enjoy the roundup! 👇
🎉 3 New Learning Resources
Let’s kick off with 3 different types of learning resources: a course for designers to learn React, and a hangout to learn animation, and a free ebook with freelancing tips:
1. React for Designers →
Design, code and collaborate using reusable components and design patterns in a structured and manageable way. This is quite similar to when we design in Figma. Components, Constraints and Data work the same way.
Don’t be afraid of React. You already have the same mindset as a developer.
2. Keyframes
Keyframes is the hangout spot for animators, made by Pasquale D’Silva. Talk about your projects, ask questions, and learn from each other.
Show fellow designers that you appreciate their work and their advice by awarding them stars and leaving comments. This living page is perfect for staying up to date on the latest trends, learning new things, and networking with like minded people.
3. Guide to freelancing — Free Ebook from InVision
This free ebook from InVision and Team Bonsai will guide you through the ins and outs of starting and growing a successful freelance career as a designer.
Get tips on how to establish your business, find clients, negotiate your prices, create contracts, manage your finances, get paid on time, and so much more. If you want to get into freelancing, this book is a great help.
🗺 🔍 3 User Flow Tools
User flow tools help us understand the path our users take through a website to achieve certain goals. Here are a 3 new tools/integrations that help with this:
1. Userflows — Made with the Marvel API 🎉
Userflows turns your Marvel prototypes into interactive user journeys that give you a birds-eye view of how users will move from screen to screen, helping you tell a better story to developers, stakeholders and clients.
Save time, make clients happier, and visually see each step in the creation process. And the best part? You don’t have to mess with creating huge Sketch or Illustrator files with crazy lines that are continually changing as your project evolves.
2. FlowMapp — UX planning tool
FlowMapp is an online planning tool for creating a visual sitemap that will help you effectively design and plan a better UX for your websites.
Collaborate with your team and clients so everyone can be involved with the development process. Leave comments, make edits, and use the intuitive drag & drop interface to create a plan that’s easy to follow.
3. Overflow: Figma Integration
Overflow was the world’s first user flow diagramming tool tailored for designers, and you can now start syncing your Figma designs with it to create user flows.
Simply link your Figma account (the place where you design, prototype, and gather feedback) directly to Overflow. And hang in there for other design tool integrations such as Adobe XD — they are in the works!
🎨 4 New Color Tools
3 gradient tools, and a handy Chrome extension to grab colors from Dribbble.
1. CoolHue 2.0 — Coolest Gradient Hues and Swatches
CoolHue brings you the coolest handpicked Gradient Hues and Swatches for your next super amazing stuff.
Choose from over 60 beautiful gradients and either copy them as CSS codes or export them as images. No matter what you do, know that your project will be perfectly colored and visually appealing. Made by Nitish Khagwal.
2. ColorGrab for Dribbble
ColorGrab is a small Chrome extension that lets you copy colors from Dribbble pretty easily. Check out some of the colors already “stolen”, and be on the lookout for Firefox and Safari support in the near future. Made by Tekeste Gebreanenia.
3. Gradient Hunt — Beautiful Color Gradients
Gradient Hunt is a free and open platform for color inspiration with thousands of trendy hand-made color gradients.
Try this free and open platform whenever you need some color inspiration. And don’t forget to share the love by adding your own color gradient to the mix for others to use. Made by Lucas Maldonado and Franco Maldonado.
4. Gradient Backgrounds 🌈
Discover the best gradient backgrounds from a curated collection of the ultimate list of gradient sites.
Some of the best color and gradient sites are included in this roundup: ColorHue, WebGradients, and Gradient Hunt. Experiment with different color palettes, make your choice, and trust that your designs will be beautiful. Made by Moe Amaya.
🎒 3 New Design Resources
1. Coverr
“Unsplash for videos” — Beautiful, free stock video footage for your homepage.
Whenever you need a stock video for your design project, just come to Coverr and see what you can find. Expect new videos to be added to the collection each Monday. And remember, all videos are free to use so even those on the smallest budgets can add high quality video content to their projects.
2. Streamline 3.0
Streamline 3.0 is out! 30,000 icons in three unique weights. 53 categories. 720 subcategories. The world’s largest icon library.
Applications, websites, iPhone and Android apps — they all need crisp, clear icons. Invest in some small icons packs, or get the entire set. No matter what you do, know that the icons are reusable, consistent, accessible, and easy to scale.
3. Dribbble for Android
Dribbble is now available on Google Play for Android 👽
Follow your favorite designers and make long lasting connections. Search for shots, access your profile and make changes, and even turn on the convenient dark theme so you can work long into the night without killing your eyes.
8 Design Tool Updates
The new Framer X beta, and 2 tools to help you design on the go, and also tools for collaboration!
1. Framer X Beta
Aaron Adler gives us a sneak peak into the flow and functionality of Framer X, reporting from a Framer X demo he attended in NYC.
If you’re curious about what is and what isn’t possible with Framer X, check this one out. Framer X gives designers the ability to work visually and generate React code without a developer…and also gives developers a way to manipulate React Components outside the text editor 🔥.
2. InVision’s new mobile app
Clark Valberg introduces the latest update to the InVision mobile app. It adds features like Studio mirroring for mobile design reviews and much more. Highlights include:
- Sharing ideas using Freehand on smartphones and tablet devices.
- Collaborating with your team and commenting on prototypes and boards.
- Access to your projects offline.
3. Affinity Designer for iPad
Affinity Designer for iPad is here- Professional graphic design on the move!
Whenever inspiration strikes, you can pick up and start creating. Take advantage of the built-in vector tools, export using any number of formats, and even add stunning typography to your project as a finishing touch.
4. Scribble by CanvasFlip
Copy and Design share a close relationship. CanvasFlip introduce their new tool for collaboration, Scribble.
Collaborate faster, replace dummy content with real copy, and sync with Sketch to make adding written text to your beautiful designs simpler.
5. PersP: Alpha — Design and Develop
persP is a new prototyping tool created by Alex Lareo that lets you start designing completely from scratch.
Collaborate with your team, save versions, present designs and prototypes to clients, gather feedback, share changes with your team, and make corrections on the same document all at the same time.
6. Asteroid
An augmented reality development tool for creating 3D apps that react to their environment — no scripting required.
Quickly create animated 3D scenes and import and use machine learning models. Download the app, install modules, and add reactions from the pre-made gallery.
7. Zeplin ↔ Adobe XD CC now on Windows!
You can now export your Adobe XD CC designs to Zeplin on Windows!
Built for UI designers and frontend developers, Zeplin aims to make collaboration between developers and designers easy. And now, making things even easier, you can export your designs right into Windows.
8. Phase: Digital Design {Now Truly Cross-Platform}
{ 🤩 } — Making Digital Design Accessible
Finally, you can create on multiple platforms, including Mac, Windows, Linux and ChromeOS using the exciting new design tool, Phase. Plus, if you lose internet connectivity, you can just keep working — offline. Jump in and get the cross-platform, web, and desktop workflow all designers need.
9. Sketch 51: Styles in Libraries and Fixed Elements
Sketch 51 brought Styles to Libraries, fixed elements to Prototyping, and more performance improvements.
Not to mention, you can also now add fixed elements like headers and footers to prototypes, experience performance improvements on large documents, and plenty more thanks to the helpful suggestions of Sketch users.
10. Flow is Here!
A new class of motion design for mobile. Integrate Sketch files, animate, and export movies or Swift code for iOS.
The goal of Flow is to get designers and developers working together…without the need for prototypes. Simply create a product and go straight to production. Animate, design, code, create. What more could you want?
11. Zeplin Emoji Autocomplete
Simply type “:”, followed by the first few letters to autocomplete emojis with Zeplin. 🍒
Who doesn’t love emojis? Well, throw out the cheat sheets and just start typing…Zeplin volunteers to take care of the rest 😄
💎 4 More Sketch Plugins/Resources
A new design system, a color extension, and a collection of plugins to explore.
1. Email Template Design System for Sketch
A Sketch file with templates and components for designing responsive email templates.
Forget inconsistencies in emails, effortlessly create Sketch symbols, modules, font styles, colors and layer styles, and stop worrying about sketchy email support (see what we did there? 😆). Instead, create professional and great looking emails that represent who you are as a designer.
2. ColorSpark for Sketch
A free and easy-to-use plugin to help designers discover unique colors and gradients directly in Sketch.
Adding color to your project doesn’t have to be tough anymore when you’re using Sketch. Just grab this cool extension to generate random colors and gradients you may not even know exist and add them directly to your project.
3. 11 Sketch Plugins to Improve Your Workflow
Here’s a collection of essential plugins to help smooth out your workflow in Sketch, compiled by Matt Pointon.
Find plugins that will help you with copywriting, identifying inconsistencies, designing for accessibility, faster sketching, and even making your projects more responsive.
4. Record Video Interactions in Sketch
As one of the most requested features to date, you can now record videos right inside Sketch with Timeline. Save videos locally and and don’t worry because it won’t upload to the web, even when being shared with other team members. But if you want to share it online, you can…just upload a link and let everyone see.
7 More Design Utilities
1. Fontface Ninja, Version 4
Use this browser extension to discover what fonts are being used on any website. Learn the name, size, line spacing, letter-spacing and color of ant font you’re interested in. Then try, bookmark, and even buy the ones you want.
👀Version 4 enables you to identify fonts on images as well as text!
2. CleanShot for macOS
An app that makes it easier to capture clean screenshots and screen recordings without Desktop icons.
Make grabbing shots and recording video easier with assigned hotkeys, set a custom wallpaper for all screenshots, and permanently toggle the Desktop icons — even when you’re not taking a screenshot.
3. CSS Scan
CSS Scan is an ‘Inspect Element’ on steroids: copy computed styles with no hassle. Forget dev tools — join the club that’s using CSS Scan to study how things are made on the web. From there, copy what you like and use it as your own.
4. Atomize Design System
Atomize Design System is a UI design framework that helps designers create beautiful and consistent user interfaces for the web.
Accelerate your workflow with ready to use interface elements and components. Take advantage of the pre-packaged type and icon systems, them setup, and styleguide, which include everything you need to get your next UI project up and running.
5. Siftery — Compare any 2 software products
Product Comparisons from Siftery let you see the difference between any two software products based on Customer Sentiment/Reviews, Customer Growth, Adoption by Company and more.
Access popular comparisons right away, or customize your comparisons and see which solution best suits your needs. Discover new products and services, make better buying decisions, and create better than you ever have in your life by choosing the right software from the start.
6. Flauntly | Landing Page Builder and Lead Capture Tool
Flauntly enables marketers to easily build custom landing pages that drive successful campaigns and boost conversions.
Give your customers an easy way to subscribe, encourage them to buy your products or services, promote upcoming webinars, and offer valuable content upgrades in an effort to grow your business.
7. Toybox | Design QA Without Code
Visually edit your site’s CSS without inspecting code — automatically annotated for developers.
Capture webpages — HTML and CSS included — and toss into your “toybox” so you can make changes. Share the tweaks you make with your team, leave feedback on others’ work, and integrate with other project management tools so everything is in one convenient place.
That’s all for this issue. Thanks for reading, and have a great day! If you wish to receive our weekly roundups, pop your email address in the box below 👇
