Articles

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.”

This one is a more practical and hands-on guide to Figma variables, with detailed instructions on implementing, organizing, applying modes, publishing to the library, and transferring them to code.

Great article getting into the nitty gritty details of tokens — why the design community had to invent them, where the influence came from, what problem they solved, how they were adopted by the design tools, and why all of that is happening now. ​“Design tokens are the first time in a lot of years that designers get to step up in the abstraction tower, and think in terms of meaning and purpose rather than concrete hard-coded values. This is a big cultural shift — but an inevitable one.”

Raquel Piqueras and Christina Yang from Microsoft on organizing Figma files and making a few intentional changes which resulted in fewer meetings, higher quality work, a more agile environment, and a few praises from their partners along the way. (Thanks for sharing the friend’s link!)

New research from the Figma’s Insights team: ​“In a recent study we commissioned from Forrester Consulting, researchers found almost 9 out of 10 respondents experienced some type of barrier in the product development process, with 60% reporting either a lack of alignment across teams, difficulty making decisions, or lengthy development cycles. These barriers aren’t necessarily new, but have been amplified by three major forces at work: 1) More people involved, 2) More distributed work, and 3) More work in progress.”

On collaboration: ​“One striking finding from Forrester’s study was that the most successful teams collaborate more and also see improving this collaboration as critical. According to the study, successful teams want to improve feedback on work in progress, get more people involved earlier, and increase cross-team collaboration.” On that note, see upcoming events by Friends of Figma for anyone who regularly facilitates meetings and cross-functional collaborations.

Alright, as an author of this newsletter, I feel personally attacked! (Just kidding, I’m not.) In my opinion, it all comes down to the eternal debate about the role of ​“hard skills” vs. ​“soft skills”. You can’t get far without either. ​“Perfecting every Figma plugin” wouldn’t advance your career, but being efficient with time, solving problems that others couldn’t, or making something unique with these plugins might. On another hand, we’ve all seen portfolios with detailed case studies, processes, wireframes, and diagrams where the end result… is just meh.

All of the competencies in Artiom’s pyramid matter, but it’s noteworthy that tools, visual design, and UX design are at the foundation. Considering that this foundation is always in flux and evolving, it’s no surprise that the design community is paying so much attention.