Top app design tools for 2021
Like any craft, the quality of app design is dependent upon the tools that designers wield. At ArcTouch, our app designers constantly evaluate the latest technology and tools to see which might fit into our app design stack.
Our go-to app design tools evolve, just as the entire app ecosystem continues to mature. When ArcTouch started building apps more than a decade ago, there was no Sketch or Figma. Designers mostly used Adobe’s Creative Suite (before Creative Cloud existed) combined with built-in user interface tools on iOS and Android. And there were very few truly collaborative design tools.
App design tools have come a long way since then. In the past year, we built a much more robust app design stack that allows us to build amazingly engaging experiences. And they allow us to do it collaboratively, even when working as a remote design team.
ArcTouch’s top app design tools for 2021
In the true spirit of collaboration, we want to share our top go-to app design tools, organized by categories that describe how we use them. This certainly isn’t an end-all list, rather more of a digest of our current favorites.
UI design and collaboration
Figma and Sketch — Until recently, Sketch was our top pick to organize design assets and ultimately create app screens. But Figma has changed the game for us by moving real-time design into the cloud — and enabling true collaboration. Figma has done for UX and UI design what Google Docs did for general business productivity. It has all the design tools we need — and offers great version control features. Best of all, our team can work on the same designs simultaneously. During COVID-19, that’s been especially important, as we are all working remotely.
While we use Figma for the vast majority of projects, some of our clients’ internal teams use Sketch — so we still use it regularly. We’ve been recently experimenting with Abstract — which helps bring Sketch into the cloud and provides Figma-like version control and change management features.
We’re working on a blog post that offers more details about how we use Figma, so make sure to follow us on LinkedIn, Twitter, and Facebook and watch for it.
Original asset creation
Adobe Creative Cloud — Adobe’s powerhouse design suite is still a staple for us when creating original assets for our apps. We frequently use Photoshop to work with images, Animate and AfterEffects for animation, and Illustrator for illustrations and icons. Many design and development tools plug into Adobe’s suite — which extends its overall utility. Just one example: We created subtle animations with Lottie and Illustrator in use in the Hawaiian Airlines app.
Cinema 4D — We’re big believers in augmented reality apps — and one of the 3D modeling tools we’re using is Cinema 4D from Maxon. It’s fairly easy to get started, and scales as your 3D modeling experience grows.
Icon libraries
Flaticon and Noun Project — Icons are not just pretty pictures; they are a language. A good consistent icon set is pretty much like a good font family. Though we often create original icons, there are times when it makes sense to use recognized icons to help the user experience. Our go-to libraries for this are Flaticon and Noun Project. For one-off icons, Noun Project is a good pick. But when you need multiple icons with the same style as part of a design system, Flaticon is the better choice.
Notes and documentation
Notion — Our app design team uses Notion as a wiki to store and share research, articles, and link related assets during development. We use it heavily early in a project as we research topics related to the user and business problem we’re addressing.
Google Docs — Just taking notes and writing down ideas is an important part of our design research and ideation. And nothing beats Google Docs for simplicity and collaboration with our cross-functional team members (product managers, engineers, quality analysts, etc.) participating in the process.
Style guide and hand-off to development
Zeplin — Every app project needs a single source of truth that dictates the design style (e.g., colors, sizes, fonts, layout position, etc.) and includes the more current design assets project. We use Zeplin as this source to make sure our design and engineering teams are completely aligned. Zeplin automatically creates the design specifications for our engineering teams, saving time and ensuring pixel-perfect accuracy during implementation.
User testing
Validately — One of the areas that have changed dramatically as mobile app development has matured is app usability testing. Validately is our go-to tool for user testing on everything from UX flow and color schemes to new features. It’s easy to create usability testing scripts and find target users within Validately’s online panel. You can perform both moderated and unmoderated testing. The reporting tool is excellent, too. It’s easy to create reports and include portions of a study within your own presentations. We’ve used other tools, like UserTesting, but our team prefers Validately.
Prototyping
Figma and Flinto — Mobile app prototyping is key to our design process. When we used Sketch as our primary UI design tool, we’d often use Flinto for prototyping. These days, we use Figma’s included prototyping features to help us capture high-level UX feedback early. We still use Flinto periodically to get feedback on more detailed interactions, particularly later in a project. We also have used InVision, but not as much recently as Figma.
#AppDesignStack
Now you know a bit about the design tools we use to create lovable apps and digital products. We also want to hear from you: What are your favorite tools in your app design stack? Tag us on LinkedIn and Facebook, and use #AppDesignStack on Twitter to let us know what you think.
Need help with app design?
If you need advice about your design tool stack or help with app UX/UI design, contact us. Our world-class app designers and developers have been delivering mobile experiences for some of the world’s most influential companies since the dawn of the app store.