Design tools

The evolution of design tools has been fascinating to track over the past decade. Since the early days of using Photoshop to cobble together interfaces, we’ve come a long way to having built robust software purpose built for speedy creation of rectangles and hooking them up to each other in the most seamless way possible. The competition has paved the way for the future of design tools to be an exciting one.

Photoshop was the most interesting start. It was a tool built for photo editing, and it slowly crept into the realm of extreme photo-manipulation to the extent that designers were creating surrealist art in the software. Graphic designers embraced it and leveraged its text properties heavily to create stunning posters, banners, and incredible typographic wonders. Masking, layering, and blending were just the tip of the iceberg. Bringing the Pen Tool in was the real game changer. It allowed you to draw literally any shape you could imagine, and in the right hands, this was a deadly tool. You could trace selections and create renders, make complex vector shapes in seconds, and easily change specific points or curves on those shapes. This ushered in an entirely new realm of design tools — the vector tools.

Now, there were other alternatives to Photoshop. GIMP was especially popular for being free and others like CorelDraw were heavily used amongst a niche audience. But interface designers needed something simpler and faster. Mobile design was starting to really take center stage in the early parts of the 2010’s as companies started realizing that simply being on mobile wasn’t good enough. It suddenly didn’t make sense to just port over the mobile web version of your product to a native app. The entire experience needed to be re-thought on a mobile-first format. What are the user goals? How do we get them into the product and let them perform their tasks as quickly as possible without shoving giant menus in front of their face?

And as the demand for mobile designers took over, so did the demand for tools they’d want to use. Sketch launched in 2010 and quickly became a design darling amongst the community. It was speedy, reliable, and was custom built for interface design. It lacked the feature set of Photoshop and had absolutely no raster graphic editing whatsoever, but designers didn’t need it. They’d do all their raster work in Photoshop and moved over to Sketch for the interface design. Even the small band of designers working in Illustrator for interface design embraced Sketch with open arms. Over time, it got tons of updates and was eventually loved enough by the community to soon become the industry standard.

And then things started heating up. Zeplin came out for better designer-dev collaboration and integrated really well with Sketch. Every design studio was using some combination of Sketch and Zeplin by 2015. It wasn’t long until Adobe realized that they needed to keep up and launched Adobe XD in 2016. They were definitely losing tons of market share to Sketch, and were quick enough to launch XD, a vector based design tool that had an extremely minimal feature set which combined the best features of Photoshop and Illustrator into an offering custom built for interface design.

The best part about XD was that it imported and exported from existing Adobe tools. This meant that the large enterprise companies who had come to rely on Adobe’s legacy products found it easier to adopt Adobe XD into their business. There was a lot of friction in adopting Sketch as a large company, and XD offered them exactly what they wanted: a way to use their existing designs and simply integrate XD into their workflows. But Adobe struggled to sell to smaller companies that didn’t already use their legacy products. They simply stuck with Sketch and Zeplin.

Around this time, there was a slew of design tools coming out focused on prototyping. While Sketch and Zeplin were great for creating the interfaces, an entirely new market was budding for creating interactive prototypes out of them. InVision, Framer, Pixate, Principle, Flinto, and so many more seemed to be coming out every other week. Design teams around this time needed Sketch for creating their designs, Zeplin to hand them off to their developers, and one of these prototyping tools to either animate their work or hook them up with hotspots to simulate flows for user testing.

Slowly, things started to get more complicated. Teams needed design systems to manage their component libraries. InVision’s DSM was ahead of the game here, even offering a Sketch plugin called Craft Manager that managed the design assets for the team and made them easily accessible within Sketch. Abstract came out soon after that made version control easier. Designers’ Sketch files were getting large and clunky with tons of pages spanning hundreds of artboards, and the were creating multiple versions of their Sketch files to deal with the slowness. Abstract helped manage master versions of the files so that the old designs weren’t lost and that teams could easily find and share the latest versions of their designs. So on top of the three tools they were already using, the teams now needed a design system manager (typically InVision’s DSM) and Abstract for version control.

Things stayed like that for a while until the end of the decade. Enter Figma. The killer all in one tool. Figma didn’t make too much of a splash when it first came out. The designers’ reactions was very much “Oh great, yet another design tool trying to be Sketch.” It promised built-in version control, built-in prototyping, collaborative real-time design, and a web version with sharable links that didn’t need a desktop app to use or view it. It all…worked, but with a very limited feature set. It’s offerings didn’t quite match up to what Photoshop and Sketch offered out of the box, and it took a while for it to get going. But when it going, boy did it shake things up.

In late 2018 and early 2019, Figma really found its groove. It offered libraries, projects, speedy previewing, team licenses, permission & sharing options, and a fully redesigned interface that matched and sometimes outperformed Sketch. One of the best things Figma did is copy all the existing keyboard shortcuts that Sketch had into it. Designers very easily adopted to Figma because every keyboard shortcut that worked in Sketch also worked seamlessly in Figma. It didn’t even matter if you didn’t know where the Rectangle Tool was. You just had to hit “R” and start drawing rectangles.

Sketch import was also an excellent feature that Figma got. Without it, designers would have to re-create entire designs in Figma, and this was a great way of ensuring that adoption was easy. More importantly, the Sketch import worked really well. It brought over the right layers in the right order with the right groups. Masks worked, layers were named, and locking and visibility worked as expected. This was huge in gaining the trust of designers and ensuring that they’re able to seamlessly switch over to Figma.

Figma does so much more and so so well. The version history works flawlessly with auto-saving. Prototyping is a breeze right in the tool, with a lot of the basics built into it. The Code panel allows engineers to see the native code directly in the panel itself. The shareable link allows anyone to view your updates and work as you do it. Other designers are able to leave comments in the file and work in your same file as you’re making the updates. All of these things working in tandem completely eliminate the need for four or five different tools and makes Figma an extremely attractive option for any design team of any size.

So at the end of 2019, that’s where we’re at. We started this decade with Sketch launching and taking the design world by storm, and ended it with Figma being praised and adopted by nearly every modern design team. While Sketch was great, it specialized itself too heavily into solely interface design without realizing that designers needed ways to do many other things with their designs. They intentionally made this choice and occasionally expanded beyond their core offering, releasing the ability to prototype and create shared libraries for teams.

Figma might end up being spread too thin across its feature set and still get outdone by smaller players who offer the same thing but in a simpler package as Figma gets bloated with features and slows down to a crawl. Or the team is able to adapt and keep up with the intense consumer demands and scale with the market appropriately. Either way, it’s been an exciting decade for design tools and it remains to be seen where things will go from here. The advent of automation also promises to be a key player here, as we go from a world of manually hitting keystrokes and mouse movements to an artificial intelligence making decisions for the user and streamlining the key aspects of the workflow.

The designer’s job isn’t really threatened by the rise of powerful design tools. If anything, the role of the designer becomes more strategic and thoughtful and less involved with the creation of the interface. Design tools will come and go. They’ll get more powerful and robust. Figma will one day become obsolete and something newer will take its place. And as we barrel towards that world in the next decade, the role of the designer will have to scale appropriately, so it’s going to be exciting to see where we are in 2029 with design tools.