An insightful look into cleaning up and shipping a new version of a large design system. The team struggled with slow performance, unused properties, lack of official nomenclature of properties, and “ghost components” without sources. It took the design system team three full months to address these problems, but they’re in a much better place.
Figma published a report from the survey of 470 design professionals in Europe and APAC exploring whether changes in working patterns, collaboration, and relationships with other departments have left designers in a good place in 2023. “A key finding of this report is the rising importance of collaborative product design. Despite the challenges of remote work, a new era of product design is emerging, one that thrives on collaboration.” See also a shorter recap of the study at It’s Nice That.
Vice President of Product, Sho Kuwamoto, explains why quality-of-life improvements are at the core of Figma: “I don’t want to be at a company that only invests in things that will make headlines. I want to make a product that I feel proud of. The truth is, people do resonate with little changes, and we know that because we pay attention to our users’ individual stories. Plus, when you celebrate the small things and give each one their moment, it gives people a chance to recognize how important each one is.”
Pretty incredible in this economy: “Design startup Figma Inc.’s headcount has grown roughly 60% since it announced merger plans with Adobe Inc. in September 2022, a sign the company hasn’t been standing still while it waits for the deal to close.” On the acquisition: “The Adobe acquisition is scheduled to be completed by the end of March, though it may be hard to conclude the purchase in that time frame with at least one of the regulatory agencies likely to challenge the deal, Bloomberg Intelligence antitrust analyst Jennifer Rie wrote in September. Adobe may owe the design startup a $1 billion breakup fee if the transaction takes longer than that and the deal collapses, according to the merger documents.” (See the archive link.)
A solid roundup of the design systems resources from one of the most respected conferences.
A new series from Patrick Morgan focused on UI design execution and strategy. The first video is a step-by-step walkthrough reverse-engineering YouTube’s video grid UI, with the Figma community file of the output of the work session.
Peter Yang interviewed Yuhki Yamashita about building FigJam AI, creating a culture where PMs and designers love their craft, making design accessible to everyone, and balancing new and power user needs. Most of Yuhki’s advice in this interview is for PMs, but it still applies to any product designer. (The interview is paywalled, but there is a lot of good stuff in the preview.)
Love this story about FigJam’s early days: “We had a meeting with our board two months before we were going to launch FigJam. The board asked us what our differentiator was since there were many other whiteboard tools. And Dylan said, “Well, it’s fun!” But then we realized that the product wasn’t fun enough. So the FigJam team ran a sprint called “FunJam” to come up with all the playful features that you see today like cursor chat, emotes, and more. So you’re absolutely right – fun was a core principle. Most workplace tools are a little boring and confine you in a box. We want to give you an inviting canvas with many lightweight ways to express yourself.”
The AI is now integrated into FigJam to “help you instantly visualize ideas and plans, suggest best practices, and, of course, automate tedious tasks, so you can focus on the bigger picture.” What started as an experimental widget Jambot is now a first-class part of the product using GPT‑4. I used it this week to create a structure for a presentation which was a useful 0 to 0.1 progression. You can give it a try at the playground or check out how Zander Whitehurst uses it to create crazy flow charts.
Baseline grids are hard to implement and their value is debatable, but I still irrationally love them. This article outlines a smart approach to using Figma’s vertical trim and Auto Layout to create reusable blocks for a baseline grid.
The new page from Figma nicely explains different ways to build a color scheme (see also the book “Interaction of Color” by Josef Albers) but falls flat when it comes to color models and contrast — I wish this discussion didn’t stop at physics and involved human perception and modern tools. The generator also exists as a plugin, and that’s where it comes handy.
Harry McCracken published a big story about Figma and Dylan Field at Fast Company. It talks about Adobe’s acquisition and what it could mean for both companies, the future of design in the era of AI, the origin story of Figma, and their big ambition to “make creativity the new productivity”.
Figma Data Scientist and Researcher paired quantitative and qualitative learnings to reveal a complete picture of how notifications work, and how users interact with them. “At the end of the process, they found where the biggest opportunity lay for improvement: Most users weren’t receiving notifications at all. To improve communication and collaboration, it would be a matter of creating new alert types and rethinking who received notifications (and when).”
A great practical guide showcases the principles of transition animation with examples that are basic, compact, and can be used immediately by anyone in their design process. These insights are not rules set in stone, but rather guiding considerations for new product creation.
A fascinating look into thinking behind API design from CSS Working Group, and a reminder that some things we accepted and got used to do not in fact make much sense.
Nate Baldwin works on design systems at Intuit and writes about his experience of using Figma’s REST API to tie design tokens directly to design resources and integrate Figma as part of a CI/CD pipeline for their multi-product setup. The article is quite technical, but he explains every step of the process.
I shared the teaser in issue #132, but last week Builder.io introduced Visual Copilot, “a completely reimagined version of the Builder Figma-to-code plugin that will save developers 50–80% of the time they spend turning Figma designs into clean code.” The major difference between Visual Copilot and previous design-to-code tools is a specialized AI model that was trained to solve this problem. The features include one-click conversion, automatic responsiveness, extensive framework and library support, customizable code structures, and easy integration with the existing codebase.
One of the most exciting parts of this announcement is still in private beta and targeted at teams with well-maintained design systems. This feature in Visual Copilot uses AI to map reusable components in your Figma file to those in your code repository and generates code using your existing components when you have them. This could be genuinely useful to get the first rough version ready in no time.
In addition to setting the default role, admins can get email notifications to keep track of who has upgraded and what action led to their upgrade.
A new setting for more control over billing in Figma — admins can set the default role for anyone joining their Figma account to be editor, viewer, or viewer-restricted.
“Demystify the synergy between Figma Variables, Figma Styles, and Tokens Studio — a trio of ways composed to develop your design token workflow.”
Last week at Zoomtopia 2023, Figma announced its Figma for Zoom app, enabling teams to collaborate on Figma design files or use a FigJam whiteboard via Zoom. Users will no longer need to share their screens or switch tabs, instead gaining increased interactions and face-to-face collaboration. Zoom users will be able to install the new Figma for Zoom app from the Zoom marketplace on October 16, 2023.