A presentation at Design System Hackathon 2022 by Mike Kamminga
My name is Mike, I’m a creative technologist and I have spent most of my career at the intersection of Design, Technology and Business while running a digital agency. But currently building a product in the DesignOps space. As the slide mentions, I’m going to talk a bit about AI and how it could potentially help us.
first I’ll start with a bit of context, then take you through a couple of examples of AI being used in other eld of design But I will primarily focus on one use case that I think we all recognise, along with some initial thoughts on how we could make Design System design and maintenance a lot easier.
• Today’s Hackathon is focused on Design Systems, so I’m going to make the assumption that the majority of you are Design System professionals, or at least aspiring ffi • fi • ff • fi • fl • to work on design systems. I have been working on ‘systemising design’ for many years now, but I think we can all agree that over the past 3-5 years, technological advancements have really changed the way we approach digital design, and speci cally how we design ‘design systems’ Apart from design Tools like Sketch or Figma, which have radically changed the way we structure design, one of the most exciting developments for me, has been the concept of Design Tokens. As Jan just brie y mentioned, we now have the ability to actually use design tokens in our design process, at least for designers who use Figma, using the Figma Tokens plugin. I have been an active user and contributor of Figma tokens for almost 2 years now and the possibilities are very exciting! This all said, building design systems and component libraries is still a laborious process with many manual & repetitive tasks. So quite often, the execution part of this work isn’t all that much fun. So coming to the goal - Can we take advantage of what AI has to o er and use some of that to improve the quality of life of a Design System Designer so that we can focus on the problem and spend less time in the execution. How do we do that? There really isn’t one answer, possibilities almost in nite, but I think a good place to start is to take a look at how we can make design more e cient.
fi ff Before I reference a few examples of AI used in di erent areas of design, I thought this was an interesting de nition of AI.
fi And some of the general characteristics of AI that I nd relevant are that it generally mimics humans, while saving us hopefully a lot of time, but taking otherwise manual tasks and executing them much quicker than humans could generally do.
fi One the rst design related industries where I have seen AI add huge value is the area of industrial design and manufacturing. With the help of generative design, designers have been able to focus on the problem, and have AI driven software generate hundreds or thousands of design solutions to a particular problem. This is generally done by providing the software with a set of rules or constraints, such as dimensions, required strength or materials after which an AI proposes many possible and often surprising solutions, that humans would have been unlikely to create.
fl A lot examples can be found in the areas of Architecture, Automotive, Aerospace and Industrial Machinery. I’m excited to think about how similar AI’s could eventually be applied to Digital Product Design. But since today’s focus is on Design systems, I want to brie y highlight a few examples that are more relevant to us Today.
fi One great example is how AI can now predict Visual Attention with extremely high accuracy. In this example, the AI analyses a design le and shows us an eye-track heat map which earlier was only possible through actual user testing, requiring advanced equipment while being extremely time consuming. Now we can iteratively evaluate and optimise our designs without needing either one of those.
Apart from heat maps, it can predict how likely a user is to look at a certain area of the page
ff Or in what sequence the user will scan the di erent areas of the page.
fi Another inspiring example is AirBNB’s Proof of concept to convert Wireframes to Code. The AI is trained to match low delity wireframes to available components and to assemble those in a logical way. Here you see a short video demonstration.
fi As you can see on the right, the wireframe is presented to the camera and on the left we can see the AI build components in real time. In the same way we could imagine an AI helping us convert wireframes to high delity mock-ups and prototypes in Figma using our Design System component library as the reference.
fi While I would love to show numerous examples of sophisticated AI applications in Design, I’d like to showcase one last example that isn’t design related, but which I think is very relevant for us. GitHub recently launched an AI called Copilot. Copilot uses context and comments to gure out what code you’re about to write, and comes up with amazingly accurate completions, but often it spits out entire functions which can save tons of time. It’s still in beta, but after using it over the last couple of months it sparked an idea that a very similar approach can be applied in the Design Process as well.
fi While I would love to show numerous examples of sophisticated AI applications in Design, I’d like to showcase one last example that isn’t design related, but which I think is very relevant for us. GitHub recently launched an AI called Copilot. Copilot uses context and comments to gure out what code you’re about to write, and comes up with amazingly accurate completions, but often it spits out entire functions which can save tons of time. It’s still in beta, but after using it over the last couple of months it sparked an idea that a very similar approach can be applied in the Design Process as well.
ffi This brings me to how part, where I want to give some thoughts on one of the many possible approach where automation and AI could assist is to make the design process a lot more e cient. I’m going to use a familiar component, the button.
Finally, we design the component API for out Figma component. We generally strive to have an API symmetric to the coded version of the component.
While this is great, making changes and adding new variants is still a huge job!
If you haven’t use Design Tokens or the Figma tokens plugin yet, this may look a bit confusing, but I’ll be happy to explain this in more detail during the Hackathon. For this example I have removed all tokens from the rst variant in this component and I will reapply them to brie y showcase how we could de ne and apply granular tokens. - I’m first applying a border color, radius and width from the button tokens - After this, I will apply the individual paddings - If we repeat this process for each variant, we can now update a component much like how we would update CSS.
To make this process a lot easier, I want to quickly move back to code and show how Copilot effortlessly suggest and implements new variant classes and dynamically generates token names. • On the left we have a button component, with its props • On the right we can see the styles, with props such as size and variant. I’m going to add a few new variants with the help of copilot.
So what if we would follow a similar process of how we code components, in design, and basically turn the process around.
I’m aware I have covered a large subject in very little time, but I hope this idea has inspired some of you. I would love to work on this idea over the next 24 hour, so do reach out if you’re interested.
The following resources were mentioned during the presentation or are useful additional information.
Here’s what was said about this presentation on social media.
for free. You
can too.