Intention-based design
What does the future of UI Design tools hold for us?
UI Design tools have progressed a lot during the past few years. In the past, most of us used Adobe Photoshop for everything. Then Bohemian Coding released Sketch, which focused solely on UI Design. Since then, more tools tried to do the same, or focused on multiple other fields such as prototyping, version control, design-to-code and more.
But in the field of UI Design, not much have changed. Shared components such as symbols in Sketch or Components in Figma are probably the last thing to be a real innovation. Many companies are now using a design system built from consistent building blocks, and designers in these companies can reuse these elements over and over.
As the picture shows, I feel like this field has not reached its full potential yet. Companies like Google are showing awesome experiments that combine AI and design. AirBnb’s Design Team built a way to turn simple paper sketches to code using their design system. And still, no innovations of this sort are available for us in our design tools.
The birth of ‘Felipe’
During the last Design Tools Hackathon, I met two different people who suggested an idea to turn simple shapes / wireframes into a design. I liked the idea so much, that I immediately introduced them to each other and together we built a sketch plugin we called ‘Symbol Autocomplete’. In the past few weeks I continued to work on this plugin and released it to everyone as Felipe.
The idea was — you start to sketch something, and the plugin auto-completes it to what you wanted to draw. Today, I think a more appropriate term for this concept is ‘Intention-Based Design’.
The goal of intention-based design is to become a more intuitive alternative to the current way we add elements to our designs. Today,
The current idea is pretty simple. There is no AI involved in it. The plugin analyzes the selected layer, and tries to detect if it looks like a button, a header, a footer etc… According to its size, properties and positions.
The design tools of the future
The concept behind Felipe could be pretty useful, but the potential for it, I believe, is much bigger. For example, imagine a design tool that detects a few text inputs being drawn, and automatically suggests a form with all the possible states. Perhaps already using react components.
These kind of ‘shortcuts’ are already highly adopted in other fields. In most search boxes, autocomplete is pretty much a standard - the smarter, the better. Code editors are also doing a great job with suggesting variables or functions. Toolkits like Emmet are popular among front-end developers to create complicated HTML code in a simple way.
Now, It’s only a matter of time until these concepts are part of our design workflow as well.
Thanks for reading! If you want to save valuable time navigating through symbol libraries just to add simple elements, try Felipe for Sketch.
If you liked this story, follow me: Medium, Dribbble, Twitter.
