Articles

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.

You can now collaborate on Figma and FigJam files directly in Google Meet.

A cool bunch of improvements to Figma this week! #10: Select and copy items on the canvas while viewing version history. #11: Copy the URL of a file via Quick Actions. #12: When pasting links over existing selected text, you can now paste and match style so the text you’ve selected will be replaced by the URL or email address you want to paste in, rather than auto-link-ifying the selected text. #13: Exporting objects with a multiplier applied no longer occasionally adds an extra pixel to width and/​or height.

The second guide introduces the concept of ​“container queries”, which are slowly gaining adoption in CSS and will fundamentally change the way we approach responsive design. Christine compares the current approach of using media query breakpoints with container queries and investigates how to imitate them with the current Figma features.

Two new articles in the UX Collective from Christine Vallaure, who graciously shared free ​“friend links” with Figmalion readers. The first one explores a new approach to creating responsive designs with variables and modes, whereby components automatically adapt to the screen size they are placed on and only resize within the provided breakpoints. In this case, variables automate which component gets displayed and set stops at certain minimum and maximum points to stay inside your breakpoint range. I had no idea that string variables can be used to select a variant of the component 🤯

Somehow I missed that deep dive into color theory, perception of contrast, and human physiology by Andrew Somers, author of APCA and a co-author of the future WCAG 3 accessibility guidelines. ​“This new method directly considers perceptual lightness/​darkness differences of text against a background, and generates a ​“lightness contrast” value, noted as Lc. From here, we can determine the minimum size and weight of a font that is going to be fluently readable, and together these calculated predictions can guide our design choices.” He provides some practical guidelines for the transitional period, where we know that existing guidelines are expected to be revised or replaced. (Worth mentioning that my tool Accessible Palette supports both WCAG 2 and APCA contrast algorithms. Also, see the new Polychrom plugin below.)

Bjango, the maker of the popular apps iStat Menus and Snowflake, tests how various design tools utilize memory, what’s their baseline usage with no documents open, and how memory grows with lots of large documents open. Not surprisingly, Figma has the highest memory usage as an Electron app. ​“I believe Figma loads a full copy of the application per tab, which may be part of the cause for its high memory usage. Each tab is also limited to 2GB of RAM, leaving around 1.75 GB for the largest possible document. Put another way, if you purchased a Mac Studio with 192 GB of RAM, you could only open documents that use less than 1% of it. This is different from the other applications tested, which have access to the Mac Studio’s full 192 GB, minus whatever the system is using. Figma simultaneously uses the most overall memory of all the tools tested, while also being the most constrained.”

In Recovery Mode, you temporarily regain access to the file and can take limited actions to reduce content and restore edit access. Once you have reduced file memory below 90%, you can exit recovery mode and regain full edit access to your file.

Allie Paschal writes about her process of migrating the Native Mobile Design System from using color styles to variables. Pretty cool to see that she already adopted a newly released scoping for color variables. I didn’t realize that some companies may not allow external plugins in Figma, so it’s nice to see that this process is completely manual and self-sufficient.

“The problem with Figma plugins is that the market is really not that big. If you look closely on the Figma marketplace, you can probably tell pretty fast there are relatively few plugins making money. There are some UI kits listed where, if you divide the views/​uses between 100 to get a sense of the revenue, you end up with something like €20-€400 which is frankly not worth the effort.”

I don’t think that’s necessarily true, and know that some creators make significantly more. That said, I wish it was easier to guesstimate the market size for the idea on the Figma marketplace. I love how Etsy shows the number of sales in every shop, and in combination with the number of ratings, it can give a rough estimate of the item’s success.