Figma Schema 2021 – best bits and footnotes

How to create trust around the UI kit 

As I am involved in developing and maintaining Figma Design Systems and ways of working, the most useful presentation for me turned out to be "Mastering the art of code-aligned UI kits". It was given by Jan Toman, Design System Lead at Productboard.

One of his key messages was something that usually is not said out loud: as time passes even the person who once created the system will find that the knowledge about its structure, components and visual language has faded. This means that if the creator cannot for sure say how things were done in the first place, how can someone who has not contributed to the designs and creation, do any better? And this goes for anyone who is new to the design system.

Jan also mentioned that the biggest reason why people are not updating their libraries inside their own files is that they are afraid that something breaks. To counter this he went through a list of actions on how to create trust around the UI kit, to make people update without fear of breaking designs. He also showed a good way to test your changes before pushing a new library version out in the wild. He focused on two things: Avoiding resetting overrides and visual breaking changes.

More emojis, fewer base components

Another big thing Jan Toman demonstrated was related to maintaining and deprecating the components. He gave good hints on how to utilise emojis and background colours to help users to avoid deprecated components while keeping them around for easy swapping without breaking anything. He also uses emojis to communicate which of the Figma component variant properties are aligned with code, and which are not. 

And bad news for those of you who know what base components are. He didn’t recommend using them. You can check the reasoning from the video [22:35], and if you have no idea what a base component is, that will be explained in the video as well.

Best take on design tokens 

Design tokens were either mentioned, shown or demonstrated in multiple talks, but I think Asana’s presentation Design tokens on Asana’s Design Systems team, was the most thorough one with great examples of how it works in real life. They also went the extra mile to explain how the naming conventions work and why you might want to use semantics as part of the design token name. The end result is really comprehensive and concise, which helps not only the designer but also the developer to understand what is going on.

To elaborate on the semantics part, they are using four semantics at Asana:

• Sentiment (default, success, warning, danger, upsell, selected, beta)

• Usage (background, text, icon, border)

• Prominence (default, weak, medium, strong)

• Interaction (default, hover, active, disabled)

These are all present in the token name, for example, the picture below showcases Asana’s example for Warning Banner Background. As you can see, there will be quite a few tokens to cover all the possible use cases. But once the initial work is done, that is when the magic happens. To make token generation less painful, they are using Style Dictionary to do the heavy lifting.

A normal use case for design tokens is to allow for both light and dark themes in the same UI. But Asana is also using tokens for building a special accessibility mode for their UI. This helps to boost contrasts and support people who are colourblind. So it is not only about light and dark mode, it can do so much more.

Further highlights

The three talks above were the most interesting ones for me, as all of them had something that I can actually take into use and integrate into my workflow. That does not mean that I did not consider other talks useful. Here are some quick highlights from other presentations that I found interesting:

Conference kickoff

Usually, the kickoffs are boring, but this one gave a nice peek at Figma’s history and what was and still is the motivation behind Figma and their product. Watch this if you are interested in the company history and motivation.

Guidance over governance by Netflix

Netflix had a good presentation about how they have structured their Design System. They highlighted the fact that the Design System is a contribution project, so always remember to give credit where it is due. Design System is also never just design, it always has infra and support functions that need to be in place. Netflix doesn't have hard guidelines for component use, but they rather trust people to make changes when needed. The priorities are discussed in quarterly feedback sessions.

Netflix has one of the coolest Figma plugins for sure. It's called Moria and worth checking out from the talk. They also have launched Figmagic for helping their designers to learn how to use Figma through their design system.

Reimagining Atlassian design system

Atlassian reminded that Design System is not just the frontend, it is the organization’s way of working and should present and support that. They talked about the fact that Design System should not include components that are related to one specific business as they cannot take accountability of such components. As a summary from the talk, I would like to raise these three bullets:

• Accessible Design System does not ensure that products are accessible

• Consistent Design System does not ensure that the experience is consistent

• High quality Design System does not ensure that the experience will be high quality

It all comes down to the designers and developers making great products and experiences.

User-centred design system resources by Lyft

Lyft talks a lot about onboarding people into their design system, and how to make documentation work part of the daily workflow. This seems to be especially crucial for them, as they have a lot of designers and developers working together. Clear instructions and documentation can boost their workflow a lot. For me, this was not a home run, as in my daily work I usually work within one or two teams, and usually f2f so I can just wave at the developer or designer colleague to start the discussion process.

Improving the workflow with well designed Figma plugins

Microsoft demonstrated three plugins: Focus Orderer, Content Reel and Icon Scaling Tool. From these three the Icon Scaling tool can help when building a Design System as it makes generating different size icons super easy and fast. Content Reel helps in generating for example picture content for your designs. But the best one was the Focus Orderer, a tool for mapping the focus order in your design screens as annotations and helping in communicating that to the developers. For accessibility work, this is invaluable.

Material You and Figma by Google

The work that Google has been doing in evolving its material design to Material You is quite insane. It is worth watching this talk as it will give a mind blowing demo about their upcoming Figma plugin Material Theme builder. In short, the plugin takes in a random image, and generates a full set of Design Tokens for Light & Dark themes. It also takes into account the accessibility requirements. After that you can instantly apply that theme to your designs, making it super fast and fun to try out different styles. You can also modify the styles or use the tool to make it follow your Company’s styles, and then use the built-in accessibility checker to confirm the contrast ratios. Really nice work Google!

If you want to watch the recordings you need to register to the Figma Schema 2021 website where you can find all the recordings as unlisted Youtube videos.

That was my recap of the conference and I hope you got something valuable out of this! 

Header image: Figma