Articles

Great observation and essay from Niki, with a beautiful roundup of historical examples.

An inspiring story from Corey Lee on becoming a Figma Designer Advocate in Japan through community work and advocacy. ​“I’d never heard of a Designer Advocate but after reading the role description I realized all the things I had been doing up until that point all related to the role: advocating for design, enabling designers, creating content, and building community. I already was a designer advocate.”

After being introduced at Config 2023 last June, Dev Mode will move out of free beta on Wednesday, January 31. Last week, Figma showed improvements and features they’ve been wrapping up before the release. Annotations are a big one — ​“designers can share additional context, specs, and measurements that are connected directly to designs, and developers can easily see designers’ notes as they work, ensuring that they don’t miss any crucial callouts during handoff.” Teams that did this manually will save a ton of time and effort. (As the top comment on Reddit suggests, flow arrows are a missing piece for annotations and something I’d love to see brought from FigJam.)

The compare changes modal was redesigned to show diffs both visually and in code. This is one of my favorite features, and I wish it wasn’t limited to the Dev Mode. I duplicate frames to riff on ideas all the time, and the compare view is an incredible tool for reconciling the differences between the two versions.

Enterprise customers can set plugins to run by default in Dev Mode for all files in their organization — ​“for example, you may want to check that you’re using a design system correctly, show links to design systems documentation, include information about internal APIs to use, or confirm whether a design uses components that already exist in your codebase.” Finally, the Figma for VS Code extension was redesigned to run plugins and improve the navigation and discoverability of design files. Instead of having to pan around a large canvas, you can easily select from a grid of frames and see frames individually with a focused view.

Common keyboard shortcuts for developers to perform actions like zooming, dragging the canvas around, copying the link to a specific screen, selecting the parent of your selection, exporting selection, and toggling a layout grid.

Short but awesome tips from multiple creators to work faster in Figma.

Luis wonders whether variables scoping provides enough semantic modification to justify removing explicit ​“background”, ​“border”, and ​“text” color variables. ​“What’s stopping us from maintaining a single, primitive set of variables, named as such (e.g. red-300) to match your developer’s framework, relying on scoping alone to bridge this gap?” (See the discussion in this thread on X.)

I also like this take from Nate Baldwin — primitive color palettes are inherently semantic because every lightness stop is knowingly created to be used for specific use cases. He supports this idea with examples from his work on Adobe’s Spectrum color palette.

Figma sent a sample of its Creator Micro keypad to an Ars Technica reporter: ​“OK, it’s fun, I’m saying. It’s fun to have a little box for little computer tasks, rather than efficiently doing them all through one slab you must memorize under pain of being considered unoptimized. Sometimes I just twirl the volume knob up and down, with nothing playing, because it’s fun to twirl a knob.”

You can now select incompatible modes on layers, to make it easier to diagnose layers that aren’t able to use the mode (via Jacob Miller).

Speaking of books, I’m in the middle of a work project involving data visualization and felt like I needed a refresher and a solid reference. I’m reviewing Edward Tufte​’s books (how are they not on the above list?!), but also landed at ​“Fundamentals of Data Visualization” by Claus Wilke while looking for an answer to a specific question. Seems like a highly practical book with clear guidelines. An entire book is available online for free and seems to be out of print, but after skimming through a few chapters I ended up ordering a copy from AbeBooks.

Some of the industry’s best designers answer the question ​“What book should designers read and why?” I only managed to read six of these so far, but a bunch of them have been sitting in my queue for a while. Great project by Vincent van der Meulen.

Rafal Tomal wrote a simple guide for non-designers like content creators, copywriters, marketers, and others who want to be able to create quick graphics on their own without learning all the advanced Figma features: ​“At the end of this guide, you’ll know how to create your own file in Figma, set up the frame (the artboard for your image) at the size you need, add some text and images, and export it to PNG or JPG.”

A large profile of FigJam AI in Fast Company. ​“Figma’s AI ambitions are clear. Singer noted that ​‘we really do think of AI as playing a central role across the entirety of the platform.’ In theory, that could mean not just better meetings, but more capable coworkers. ​‘In a collaborative environment where you’re working with many people on a project,’ Singer says, ​‘AI really up-levels everyone.’”

In the second part of his monumental article, Luis covers ​“how to build adaptable, indexable, logical, and specific components as part of the FRAILS framework.” (The two-part series was strategically published before the Christmas break, giving you some extra time to read it.)

The Verge with some context on what exactly happened: ​“Last month, the Competition and Markets Authority (CMA) provisionally determined that the deal would harm the product design software market should it go ahead — effectively blocking the acquisition until Adobe addressed the regulator’s concerns, which involves the divestiture of ​‘overlapping operations’ like Figma Design and the company’s competing Adobe XD app. A response to the CMA’s request for remediations, dated December 14th, was published on the Authority’s website on Monday. In short, Adobe is refusing to make any of the suggested compromises to ease the CMA’s concerns, saying a divestment is ​‘wholly disproportionate.’ Adobe said in the statement that it disagrees with the CMA’s findings, and that ​‘no remedy package that preserves the benefits of the transaction will be sufficient to resolve the competition concerns.’”

The ​“compromise” suggested by CMA is pretty wild: ​“The CMA’s recommendations don’t leave Adobe much wriggle room: either Adobe has to sell off Figma Design — Figma’s main product offering and, likely, the biggest motivation behind Adobe’s merger bid — or the deal is blocked entirely.”

Dylan Field: ​“Figma and Adobe have reached a joint decision to end our pending acquisition. It’s not the outcome we had hoped for, but despite thousands of hours spent with regulators around the world detailing differences between our businesses, our products, and the markets we serve, we no longer see a path toward regulatory approval of the deal.”

A new long-read from Luis Ouriach published in the Smashing Magazine: ​“Design systems can be of immense help, but failure to adopt them invalidates the hard work that goes into building the thing in the first place! In this two-part series of articles, Luis shares his experience with design systems and how you can overcome the potential pitfalls, starting from how to make designers on your team adopt the complex and well-built system that you created to what are the best naming conventions and how to handle the auto-layout of components, indexing/​search, and more.”

In a follow-up to the above interview, Niko and Garrett share what it means to establish a ​“prototyping culture” in your company and why it matters. ​“Prototyping creates an interactive experience that brings the product to life, revealing interactions that might be overlooked in static designs. When integrated into the product development process early, it saves engineering time and streamlines workflows. Adopting a prototyping culture fosters innovation.”

The design systems app Supernova analyzed the responses from 100+ respondents to pull out trends and key takeaways about how designers and developers are using components. Some of the interesting takeaways — the majority of the respondents use the design tool (Figma!) as their source of truth instead of the documentation, test and validate design patterns by getting feedback from designers and developers on their team, and maintain their component library by documenting changes and version updates for all components.

As always, a fantastic annual report on the state of UX and our industry by the UX Collective: ​“Much like late-stage capitalism, late-stage UX is characterized by its market saturation, heavy focus on financial growth, commoditization, automation, and increased financialization. Corporations exert significant influence over the economy and society, and designers can only push so far when advocating for user needs. How can we navigate this landscape as designers in 2024?” 

Figma presents a 2023 Handoff, ​“a year-end celebration of the big plays and deep learnings we plan to carry into next season.” A beautiful collection of articles on diverse topics summing up this year — top 10 things the team shipped this year, what it takes to bring AI features to market, 36 questions to fall (back) in love with tech, a multiplayer guide to great meetings, a definition of what work looks and feels like right now, professional pivots, and the joy of mechanical keyboards.