Member-only story
Sketch and Figma have been doing symbols wrong — Proposing a new way
Digital product design is the profession of designing digital websites, apps and other experiences used by billions of customers around the world every day. Figma and Sketch are the primary tools used by product designers across major technology companies these days. These tools have revolutionized UI design the same way Photoshop made it very easy to create content back in the 90s.
A major advantage of these tools has been very advanced collaboration capabilities. A core part of that collaboration is maintaining a source of truth for all the UI elements on a website or a mobile app. That is where Figma and Sketch’s symbol capabilities really shine.
Build once and use infinite times. Symbols allow design teams with tens to hundreds of designers to scale very quickly. A few designers can focus on creating the symbols that are common to all different features and products of the company. This way the rest of the design team can use these symbols to create designs and be consistent across different features and products.
Current paradigm — Create Before You Use
Current design tools assume future knowledge. It expects the designer to know all the UI elements that they are going to use on the website or the mobile app. This is only true at companies with mature products, where the pace of creating new UI is very slow. Most of the UI elements needed to ship new features already exist, so it makes sense to have those UI elements as symbols.
But this doesn’t work well for small design teams. Designers in small teams have to constantly create new UI elements with every new feature release. The product is still very young and the team is constantly doing new kinds of experiments to figure out product-market fit. The UI element keeps evolving as it is used on different screens, sometimes very drastically over the course of designing that feature. It is not possible for a designer to do a wide exploration of the UI element if it has already been made into a symbol.
At the end of the project, the designer is left with a design file with no symbols in it. At this point, the designer has to create symbols for the UI elements and…
