✍️ Mapping Designer Tools
Hi, it’s Alexandre from Idinvest. Overlooked is a weekly newsletter about underrated trends in the European tech industry. With Clément and Nicolas, we have spent the last couple of months digging into the design market. Today, we are sharing our learnings on the space.
I found a new passion. Discover a new job category. Break down how people are spending their days at work within this job. Identify productivity gaps. Find the tools that empower the people in this job category to solve these productivity issues. Repeat on another job category.
You can consider Roam as a verticalized productivity tool for knowledge workers i.e. people who are spending their time analysing and summarizing ideas as well as to generate innovative ideas based on other people ideas. For instance, journalists, writers and researchers are knowledge workers.
I believe that verticalized productivity tools share common patterns across job categories. In this paper, I will explore design tooling and try to identify some of these patterns.
I worked with Clément Vouillon and Nicolas Debock on this deep dive. Clément published a first version of our landscape on design tools as well as short videos covering key trends on the design market. You can look at his work here.
In this newsletter, you will learn more about:
Two opposite points of view on the future of design,
The recent history of design tooling from Photoshop to Figma,
The design value chain,
A tentative to map design tools,
Platforms (AdobeXD, Figma and Sketch) as the obvious winners in the design category,
The rise of tools to reduce the friction between design and code,
The democratization of design for other functions,
The necessity to have a single source of truth when it comes to design.
Ubiquity of Design... But to What Extent?
When I think about design for the next decade, I end up with two extreme views for the evolution of the category.
On the one hand, design could become one of the few key differentiators in product building and every team with more than 10 employees will have in-house designers.
When you dig into Invision Design Hiring Report, you understand that design importance is growing within organizations (70% of surveyed teams have increased the size of their design team) and that designers are starting to become a scarce resource (81% of designers surveyed are contacted on a monthly basis and 34% on a weekly basis).
On the other hand, design could also become a commodity. Designers will tend to disappear or remain a high end job that you will find only in large organisations or in certain categories where design matters. Anyone will be able to design powered by prosumer tools and automation.
A Quick History of Design Tooling and the Figma Revolution
Before 2010, designers were hacking Photoshop to use it as design tool because they did not have any other options. Photoshop had powerful capabilities but was built as a photo-editing software.
A decade ago, it was a pain to be a designer. You spent your time doing tedious tasks (talking with product managers, developers etc., managing versioning, importing and exporting elements, etc.) across several tools that were poorly connected between each other instead of designing. At this point, new players started to emerge with a clear focus (i) on targeting only designers, (ii) on rebundling the different steps of the design value chain into a single platform.
In 2010, Sketch was released as the first alternative fully targeting designers with a focused on user interface and user experience design.
In 2011, InVision was launched with a different vision: easing the collaboration around design within an organization with a focus on prototype as key workflow.
In 2016, Figma was officially released to the world after several years of product development (the company was created in 2012) and beta testing. Figma was a revolution in the landscape of design tooling for two main reasons: (i) it had a browser first approach removing the need to download a software on your computer, (ii) it had the best in-built collaboration features (for designers but also for anyone in an organization working with designers). The company is now worth over $2bn and raised multiple rounds of financing with investors like Index, Greylock, Sequoia, Founders Fund and a16z.
Figma seems to be the hottest player in the field and all the main competitors have taken actions to catch-up:
In 2016, Adobe decided to release AdobeXD - a design platform specifically made for designers with collaboration features.
In 2018, InVision released a full design platform called InVision Studio.
In 2018, Sketch which was breakeven and growing nicely decided to raise capital from Chetan Puttagunta at Benchmark to expand its product and grow more aggressively.
Understanding the Design Value Chain
I like to break down the design value chain by following the main steps between ideation and production:
Ideation: the designer is starting with a brainstorming session to generate ideas about a brief he has been given. He may look for inspiration from other existing design. He may write down ideas in long form text. He may also take a whiteboard or a paper to jet down first ideas and sketches. He may work on his own but also with peers.
Wireframing: the designer will start by working on a preliminary design that gives the high overview of his ideas without fixing all the details. Wireframing tools are all about speed between idea generation and a first preliminary design to make sure that all the stakeholders are aligned on a design project.
Core design: the designer will spend most of his time working on building the perfect and final design for the project. Figma, AdobeXD and Sketch are ruling unchecked in this category.
Prototyping and user testing: the designer will brimg his design to life by transforming them into live experiences that can be showcased and tested both internally and externally.
Handoff: developers and designers are looking for tools to facilitate the handover between design and code. Some functionalities that facilitate the handover are integrated into the core design platforms and some connectors are built on top of the design platforms with a key focus on this pain point.
Design system and file management: people collaborating on building a digital product are using a backbone to store the files they work on but also to have clear guidelines on how they should operate.
In reality, those steps are interwined and the frontier between two steps can be blurry. Some steps can be skipped while designing a digital product.
A designer is able to perform most of the tasks in this value chain without leaving a design platform like Figma, Sketch or AdobeXD. You should also understand that certain tools are focused on enhancing the experience of a specific task in the value chain and that designers are also using more horizontal tools in their workflow (Slack, Drive, a pen and a paper etc.)
Along the way, it's key to understand that several stakeholders will have to collaborate: not only designers but also product managers and developers. When you are building a design tool, you need to think about designers as core users but also about other functions that will also need to have access to the design to make comments or use it as basis for other tasks.
Introducing our Mapping for Designer Tools
I believe that you can breakdown the design stack into three main layers:
Protocols: it's an infrastructure layer powering platform to maintain consistency between digital products of an organisation, to facilitate the handover to the development team or to go directly into production without having a developer in the loop.
Platforms: a designer will spend most of his time on a single platform that has the ambition to cover most of his tasks from ideation to prototyping and handover to the development team.
Applications: applications are complementary tools that are used mainly by designers to be more efficient or to go deeper in a task in his workflow. Most applications are connected to the main platforms.
We divide applications into the different blocks that are in the design value chain described in the previous section: ideation, wireframing, prototyping, testing and file management.
We divide protocols into tools that help you to move faster into production (no code tools, IDE and VDE) and tools to manage your design assets (design systems, quick asset edition).
Obviously, the mapping is a constant work in progress. We are open to your feedbacks and suggestions. If we missed a player, you can filled this Airtable’s form and we will add it to an updated version.
Design Platforms are the Obvious Winners
AdobeXD, Figma, InVision and Sketch are now the three main platforms in the design category. The four players are all going in the same direction: (i) more collaboration between designers and with other functions in the company, (ii) easing the handover between designers and developers, (iii) building an open ecosystem of plugins to augment the experience of the platform.
I'm convinced that the category is broad enough to have these three players cohabitating successfully. Then, the key question for venture investors becomes: is there space to build other billion dollar companies in the design space or is it only a space for bootstrapped and small businesses?
Another way to frame it would be to say: is there a possibility to unbundle these three design platforms either by targeting a specific type of designers or by going after a specific task in the design value chain? If the answer is yes, could it become a billion dollar business?
Design to Code
The handover between the designer and the developer is the biggest pain point that we have identified. We have identified three main approaches that are addressing this issue:
Rebuilding a design platform from scratch that is natively compatible with code meaning that you can switch from design to code and code to design with absolutely no friction. It's a bullish positioning as you have to spend years in product development before going into the market because your product will not be considered if you are too far away in terms of features compared to existing platforms.
Using plugins that are compatible with the main design platforms and that are translating your design into usable code for your developers.
Bypassing the developer with no-code tooling custom built for designers which take the design from a design platform and transform it into a ready made no code product.
Democratizing Design for Other Functions
A designer is a scarce and expensive ressource for many organizations. As a result, many tools have emerged to empower non-designers to build on their own products or sales/marketing assets with great design standards.
On the shelf design libraries, artificial intelligence and easy to use products are democratizing access to design for other functions within an organization.
Canva pioneered this trend. The company was founded in 2012 in Australia on the premise that anyone needs at one point or another to design something for his daily job. Canva is giving non-designers the tools to create great design assets without the complexity behind the dominant design platforms.
Most tools democratizing designs are built on templates that you can start from to build your end product. As a consequence, marketplaces like Creativemarket are on the rise to let people buy design assets at a relatively low cost. For designer, it’s a great way to design once and sell several times the same asset. You don’t have to restart from scratch like when you work for a customer on a freelancing platform like Fiverr, Upwork or Malt.
Today, the best illustration of this trend is marketing with so many tools available to easily promote a product with landing pages, social media posts, semi-custom illustrations etc.
Having a Unique Source of Truth when it Comes to Design Within an Organization
In the past few years, we have noticed the rise of design systems within large organisations to accelerate their product development and enhance consistency between digital products.
A design system is a collection of components and guidelines to use these components that must be used to build any new digital product within an organization. It's not just a library of assets. It's also a set of standards that must be followed to build a product.
I believe that design systems should be put at the core of any organization. Anytime a new digital product is built, it should be built in accordance with the design system and every change in the design system should easily be spread into all your digital products.
Thanks to Julia (🦒), Nicolas, Clément, Thibault and Maxime for the feedback! Thanks for reading! See you next week for another issue! 👋 If you want to talk about this topic or want more resources, don’t hesitate to send me an email at ade@idinvest.com.
Great article, thanks Alexandre !