Figma Schema is a design systems-focused annual conference held in London, Tokyo and New York. This year was the first time they had gathered in person since the start of the Covid pandemic. The event was hosted by Alva Coachworks in Islington, North London, who put on a fantastic show with delicious food, drinks and cocktails.
The proceedings consisted of a keynote and six talks. The topics were interesting and varied, but all focused on the delivery and evolution of design systems and how we can do our jobs with greater understanding and efficiency. Marion Echevard and Gabrielle Houiex from Qonto’s design system and brand teams presented some great insights into how they handled the company’s rebranding and the process of moving from a legacy to a new design system. Ahcène Amrouz and Antoine Puig from the Service d'Information du Gouvernement in France explained how they have developed and maintained their open-source design system, Système de Design de l'État, used by more than 600 designers and developers. And Patrycja Rozmus from Brainly gave an inspirational talk on how design systems are so much more than just styles and components - they should be a source of innovation and can include animations, videos, sounds and music.
In terms of my highlights, though, the following talks stood out for me the most.
An introduction to the design tokens file format
Speakers:
Louis Chenais, Co-Founder at Specify
James Nash, Design System Community & Support Manager at JP Morgan
As someone interested in design tokens and their potential, I was looking forward to this talk. At the moment, many people are talking about design tokens and starting to adopt their use. But still, there are currently no unified definitions or standards, meaning they don’t travel well from one tool to another (which defeats the purpose to a certain extent). The Design Tokens Community Group (DTCG) was created to help make sharing design tokens between tools a seamless experience. Louis and James went through an overview of the new file format, some of the features and challenges, best practices, and what it could mean for design systems in the future.
View the full talk on YouTube.
Research-driven design systems
Speakers:
Jack Roles, Principal Product Designer at Farfetch
Brice Fontaine, UX Research Manager at Farfetch
Jack and Brice recently led an internal research report at FarFetch to uncover their current workflow and processes' successes and failures. They used this data to help improve all aspects of their design system management and adoption.
They discovered many silos within the team, all working on and documenting similar things. Their web team had one way of documenting its component library; the iOS team had another way, and with the addition of a new Android team, it was clear that things needed to be tightened up.
They decided to work on a ‘single system’ approach in Figma, simultaneously consolidating and improving all their documentation. One of the main requests from their designers and engineers, so they didn’t have to keep jumping in and out of Figma, was that crucial information on components should be kept in the design libraries rather than as separate documentation. Their research also highlighted that designer and engineer onboarding was a very long process and could be improved by including this information directly in the Figma libraries as well.
View the full talk on YouTube.
Navigating complex system updates
Speakers:
Gonzalo Vasquez, Product Designer at Zalando
Leonie Proske, Product Designer at Zalando
Given that Zalando is a leading European e-commerce fashion and lifestyle platform, I was intrigued by what Gonzalo and Leonie had to say. A recent new EU regulation required them to make one of the most complex component updates they’ve had to do to date. The regulation requires online retailers to make changes around their discount communications - now sellers need to display the 30 days lowest price in the case of a price reduction announcement. However, in the words of Leonie, “touching just a small part of the system can be like pulling a thread”. It was a complex problem and not just a simple case of adding a new line of text.
No references were available from competitors as the regulation was not yet in force, they had a deadline of only a few weeks (or be faced with a substantial non-compliance fine), and it required them to update one of their most complex components in the system, the Product Card - They currently have ten different Product Card components, each containing multiple variations. Not only that, it’s one of their most inserted components - The Web Catalogue Product Card alone has over 40K instances and is used in over 400 files! Solving the problem required a cross-departmental effort between product, content and legal, with daily check-ins and critiques to identify the commercial risk of making changes to the component in Figma.
Localisation was particularly challenging, illustrating the importance of stress-testing designs in different languages with varying word lengths. Another challenge they faced was the conscious past decision to make all their Product Cards a fixed height to maintain consistency across rows, so space was at a premium and adding new content was not as straightforward as it might seem.
In the end, they engineered a solution where a row of product cards would take the height of the tallest element in that row, enabling card heights to grow where necessary. It was a fascinating glimpse at the inner workings of a complex design system and the challenges faced when making small changes at scale.
View the full talk on YouTube.
I had a great time at the conference, with its varied selection of topics and talks. My key takeaways were the importance of developing sound documentation and the need for alignment and collaboration across teams when working on any design system, no matter the scale. Thanks again to Figma and Alva Coachworks for putting on a great event, and I look forward to next year’s conference.
All the talks from the conference can be streamed via the Figma Schema site.
