Articles

“Design Manager Juli Sombat sheds light on how a need for more cohesion led Spotify’s design systems team to take a cross-platform approach to components.”

Behind-the-scenes story on how Figma scaled their performance testing system from a single laptop running in the office to a dream setup built for scale: ​“After considering a few different approaches, we ultimately decided to ship two systems: A cloud-based system would handle mass testing, covering our bases for the majority of situations, and a hardware system would be highly targeted, tackling situations that required more precision. They would be connected by the same CI system, and engineers across product teams would run the same suite of performance test scenarios across them.”

Richard Ekwonye made an interactive guide on how Bézier curves work in CSS animations and SVG paths of illustrations and icons. Such a beautiful and hands-down way to learn!

An in-depth walkthrough of how to use Figma’s Auto Layout to quickly add padding and alignment rules to standardize your design elements from the Noun Project.

Evil Martians is a product development consultancy behind some well-known services and open-source projects. In this post, they talk about the process of building a full-featured frontend application-style Figma plugin — with storage, auth, routing, and more. A fascinating deep dive for any curious developers!

Figma is the General Excellence winner of the 2023 Innovation by Design Awards by Fast Company. Collins’s bold campaign for Figma titled ​“Nothing Great is Made Alone” had also won the Branding award.

“Our new Community Libraries Beta offers the building blocks you need to start designing, right at your fingertips. As part of the Beta, users on free plans will have access to a special selection of community wireframing, UI, and icon kits. Just click into the Assets panel and Library modal to browse through the featured libraries and design faster than ever.”

In the last 2 months Figma quietly shipped more than 200 updates to the Dev Mode workspace 🤯 This article goes through the most important 35 changes and improvements.

A few improvements to variables: 1) in addition to scoping number variables, you can now also scope color variables, 2) select multiple variables with Shift or Cmd for the bulk edit, 3) code syntax for defining different names for multiple platforms, and 4) modes for instance sublayers. Variables are still in beta and it’s great to see how fast the team iterates on them.

Amber Bravo sat down with Jambot engineers and a designer to learn what inspired them to make the widget, and why they’re so excited to see ChatGPT go multiplayer. As a power user of Logseq, I loved this bit from Daniel Mejia on where the inspiration came from: ​“I’ve been a heavy user of these tools called Networked Thought — especially Roam Research and Logseq — which basically allow you to create pages that link between each other, so you can connect, organize, and trace ideas. More recently, I also found this tool called Albus, which adds a visual feel to interacting with AI, and so I thought there should be a way to connect these concepts to create a potentially useful alternative to ChatGPT.”

“Good typography is good design. This collection of plugins for Figma will help you to improve the typography in your design.” Font Fascia and Fonts Changer are two of my favorites on this list!

“Adobe Inc.’s $20 billion takeover of Figma Inc. is set for an in-depth European Union investigation over concerns the deal could harm global competition for software used by designers.” The EU’s in-depth probe is set to run until December 14th, so the future of the deal will stay unclear until then.

Five industry leaders discuss leading products through design and ​“getting rid of the classic product management function”, as told by Brian Chesky during his fireside chat with Dylan Field at Config. A very impressive lineup of contributors to this piece — Lenny Rachitsky, Julie Zhuo (Facebook), Steve Johnson (Netflix), Sho Kuwamoto and Yuhki Yamashita from Figma.

John Maeda shares takeaways from his Design in Tech Report, thoughts on designing with artificial intelligence, and why we should embrace uphill thinking in a world optimized for shortcuts. See also the livestream ​“Diving deeper: Designing with AI in the future”.

“Saving” and ​“liking” resources are now combined to make Community simpler to use. Your saved resources are available from your Community profile or the Resources dropdown in a Figma file.

The number of installs or downloads used to be the only metric in the Community, but over time it was replaced with how many times a resource was used. Now you can also rate and review Community resources. It’ll be interesting to see which of the most used resources are also the most loved ones.

You can now embed videos in FigJam. MP4 and MOV files are both supported.

That’s pretty cool, especially if your team has multiple products with distinct color palettes! ​“Introducing custom color palettes in FigJam: you can now create custom color palettes for your team, so your files can match your team’s own aesthetic or company branding (Organization and Enterprise plans only).”

“On the Enterprise plan, workspace admins can now brand the workspaces they manage to reflect their group by adding custom icons to workspaces. Organization admins can do this for any workspace in the organization as well.”

So excited about this release! I spent a good chunk of my Config talk discussing workarounds for using wide gamut colors in Figma, and this update addresses them all. See this thread by Qi Linzhi on the engineering challenges of implementing support for Display P3.

The next thing I hope for is a more precise way to select colors. Figma relies on hex values in the UI, but they’re supposed to be limited to sRGB and aren’t representative of what you’ll see in the browser. The Dev Mode uses the correct color(display-p3 R G B) syntax as an output, but that doesn’t help much with input. Besides that, I’d like to see when the color is outside of the sRGB range and what is its closest fallback. OkLCH isn’t the easiest color space to use, but OkLCH picker gets that part right.