Articles

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.

Webflow hosted Webflow Conf 2023 last week, where they announced new product features for building ​“unmistakably professional websites”. More powerful native integration with Spline, new localization capabilities, modern and scalable design systems, Webflow Apps, and dedicated workflows for commenting, editing, and publishing. Even a new look and a brand new logo!

The next version of the Figma plugin (coming in the next few months) will automatically import your components and their associated variables into Webflow.

Dan Mall is a designer, author, speaker, entrepreneur, and one of the most prolific educators in the design systems space. In this Shortcut profile, he distills his experience into ten pieces of advice for tackling complex tasks, preventing burnout, and fostering continuous learning.

You can now opt out of beta AI features, so your data will not be sent to Figma’s third-party AI vendor. ​“Figma’s agreement with OpenAI provides that data is not to be used for model training. Data inputted into AI features is sent to OpenAI for processing and generating AI output. Data is temporarily retained in OpenAI’s environment to provide the services, however it is not used for model training.”

Who would have thought a decade ago that this might happen? ​“Today we are releasing Photoshop on the web as part of all Photoshop plans, complete with newly released Adobe Firefly generative AI features including Generative Fill and Generative Expand.”

Jake Albaugh and Emil Sjölander discuss using AI-based code generation (codegen) tools for augmenting your design to development process, not automating it. ​“Codegen isn’t just an automated, hands-off replacement for translating design to code; it’s best as an augmentation for you to more quickly understand design changes, and to keep your team in sync.”

Dylan Field, founder and CEO of Figma, looks at the relationship between designers, developers, and AI, in conversation with a16z’s David George. In the process, he also demoes Jambot, their new AI widget for FigJam. Love this quote from Dylan: ​“It [AI] will lower the floor for who’s able to participate in the design process, but also raise the ceiling of what you can actually do.”