Forbes’ Cloud 100 is a list of the world’s top private cloud companies. Figma keeps climbing higher and higher in this rating — this year it’s #5 on the list, after being #7 last year and #29 in 2020.
Microsoft Design refreshed their entire library of Fluent Emojis last year, and now they’re open-sourcing them on Figma Community (see also parts 2 and 3) and GitHub. A staggering amount of work went into this set of 1,538 emojis and it’s definitely worth exploring. Every icon is available in multiple variants — 3D, flat, and high contrast. Beautiful work!
Figma opened up the prototype screen reader beta to everyone. The feature was announced earlier in May. “The beta includes screen reader support for text nodes, alt text for images, and the ability to interact with prototypes with buttons and keyboard actions like tabbing.” Here is a quick preview using a macOS VoiceOver.
As you may have noticed, I have a soft spot for color tools supporting perception-based color spaces. Taras Brizitsky writes about the plugin Generator that he built with Alex Bourt. It’s a really cool idea and implementation — start with a color, apply a set of visual modifications and conversions, and generate an entire palette from it. Change the starting color or modifiers to update all generated colors. Awesome!
Figma shipped a batch of lovely small improvements. See demo videos in their blog post, or read a full list with a few behind-the-scene links below.
Ryan Reid, UX Writer at Figma, created a guide and a community file to help other UX writers learn how to use Figma.
Figma is a natural place for the design team to get together, play, interact, and bond. Love this story about building a culture at Meesho Design: “While we brainstormed multiple ways and ideas to resolve this, we noticed that it was collaboration over Figma and struggles with Auto-Layouts that would create immediate bonds between us designers.”
Joey Banks is back with five advanced Figma tips — renaming layers in bulk, selecting all objects based on a specific property, Spacebar’s superpower, private components, and using descriptions to improve search.
Fantastic article by Shirley Miao about the complexities and hidden challenges of building Figma’s dark mode: “We wanted to build a solution that wouldn’t just solve the existing need for a new feature, but would be flexible enough to scale with us as the product evolved. Doing so would make it easier to onboard new engineers, tackle unforeseen challenges, and introduce new themes down the road. The trick was developing an approach that would be easy to implement and maintain, while also ensuring that it was regression proof.”
Nice overview of five high-quality UI kits.
An interesting application of smart Auto Layout hacks to create fully responsive chart components.
The team at Figma talked to 50+ designers, PMs, engineers, researchers, and writers about collaborating with other members of their team, and discovered five specific behaviors that can make or break your team’s vibes.
Chuck Rice explains his Flexbox imitation technique combining the approach from the Breakpoints plugin with the updated Auto Layout. Pretty cool if you need to imitate the flex-wrap
CSS property.
Edward Chechique wrote a detailed and well-illustrated guide to component properties.
I’m not a fan of the clickbaity title and tone of this post, but something needs to be done about the unexpected charges. Just last week I got charged for an extra seat after moving a file from Drafts to a project (or at least that’s what I think happened). My work account also accumulated several unintended editors over the last year. Sharing an editable link is an easy mistake to make and leads to completely unexpected charges.
The U.S. Bureau of Labor Statistics added “web and digital interface designer” to their annual report. Why it’s important: “The addition of web and digital interface designers as a category is a signal that BLS thinks the demand for this type of job has increased significantly, and that it will likely continue to do so. The agency has also revised projections for its old web developers and digital designers category; it now projects the category will grow almost 40% between 2020 and 2030, validating the demand that so many people working across the tech and design industries have been feeling for years.”
“In this tutorial, we redesigned SVBs banking dashboard using Anima’s open source Component Library for Figma, then connected our data using Strapi’s headless CMS. Now you can launch fullstack React apps at lightning speed using the same approach.”
A couple of weeks ago, Figma experienced its worst service disruption to date. This postmortem by their engineering leaders is a very transparent look at what happened and the steps they are taking to prevent it in the future: “The incident was caused by a bug in AWS’s ElastiCache service with Cluster Mode enabled. The bug is such that high Publish / Subscribe workloads can trigger a sudden and sustained spike in Engine CPU utilization. Due to the complex nature of this bug, we did not hit it for weeks despite having moved our Publish / Subscribe workloads to a Clustered-Mode Enabled Redis instance much earlier.”
This deep dive into the making of the feature is my favorite kind of a blog post on Figma’s blog: “Building spring animations took our engineering team back to the classroom — to make animations that are both natural and accurate, we borrowed principles from physics. We’re excited to share the mechanics behind the movement, and the story of how spring animations bounced their way into Figma.”
Figma launched a partnership with Google for Education to bring Figma and FigJam directly to Chromebooks, the most popular personal computing device for students. This is a huge opportunity for students to learn the same app used by professional designers. (That said, I still warmly remember days of using keygens with Photoshop 4.)