A big update to FigJam — custom templates for your team, stamp your teammates’ faces to files and tag them with @mentions, emoji picker opens by typing a colon (“:”), custom color palettes (coming soon), UserTesting and Great Question integrations, Productboard widget, and new tunes! Also, explore new world-class teams’ templates and see a thread by Cai on the Figma design team’s rituals and templates they use in daily work.

In addition to a bigger release, there are a bunch of good quality-of-life improvements: toggling between thin and thick markers with Command–B (lovely animation!), an addition of Paste to replace (Command–Shift–V) command to FigJam, and connecting two objects by simply clicking on one object followed by clicking on another.

You know I love color tooling! GitHub has been doing some excellent work on its color system, which is the foundation of the Primer design system. Last year they wrote about building internal color tooling for theme building, and in the new post, they share their process for making contrast changes in both default light and dark modes as part of GitHub’s larger accessibility strategy.

Engineering Manager Alice Ching discusses how Figma draws inspiration from the gaming world in its development process. There are similarities between video game engines and Figma’s tech stack, with collaboration and creating delightful user experiences being the key aspects.

Ridd just launched Deep Dives, ​“a new interview series full of stories and advice to help you take a huge leap forward in your career”. In the first episode, Joey Banks gives an in-depth look at what it’s like to lead design systems at Twitter and Webflow, shares his strategies for structuring component libraries, working efficiently in Figma, and even keeping up with all of the latest plugins and tooling.

Cool technique from Nitish Khagwal for creating animated liquid mesh gradients.

Figma announced a list of speakers at this year’s Config, and the lineup is absolutely incredible! It’s a healthy mix of design leaders, makers, and folks behind the product. The agenda is coming soon, but you can get an idea of what might be coming from these answers. It’s not too late to register for an in-person or online event!

Regardless of going to the in-person Config this summer, this is a great intro of the international designer advocate team. Here is the full list for you to follow — Lauren Andres, Hugo Raymond, Hiroki Tani, Julia Kestner, Mallory Dean, Corey Lee, Alexia Danton, and Sebastian Metel.

Joe Bernstein on confronting the conflict between what’s possible in Figma and what’s practical: ​“Ultimately, my point here is that I over-engineered this component. Figma has the capacity to be much more than a design tool, and sometimes I use it to engineer a UI. Clearly I enjoy doing that, and I even get lost in the weeds to achieve a deeply technical solution. But design systems and asset libraries are just as much a user-centered design problem as any other publicly facing product.”

“Navigate FigJam files without taking your hands off your keyboard by using the Tab key to jump between objects on the FigJam canvas, like sections, shapes, and stickies. You can also tab between text nodes while editing text to rapidly make edits across your file. Hold Shift + Tab to tab back in the reverse direction.”

Admins now can select all users in the Members table in the admin console. New customers in Japan, Europe, UK, and Canada who require invoicing can now purchase an Organization or Enterprise plan in the local currency or USD.

The recording of Miggi’s workshop livestream on using vector tools in Figma.

Danny Sapio with a few tips on working with paths, anchors, and fills to speed up your drawing workflow in Figma. This article is also available in a video format on YouTube.

I mentioned the FigGPT plugin in the last issue, and now Edward Chechique wrote a detailed walkthrough of using this plugin. It requires an OpenAI API key but then provides direct access to ChatGPT prompts and tools for UX writing directly from the Figma document.

The team at Anima asks a controversial question, and makes a strong case for Storybook being the single source of truth: ​“Even though products begin with the components in the design, the end-users of those products will actually experience the components from the code. The single source of truth, then, is what users will actually see in the end.”

The community file is my favorite way to learn about and see demos of all 32 Little Big Updates.

If you missed the livestream (or had trouble joining the Zoom webinar), check out this recording of the event. Lively and exciting presentation by the Designer Advocates team!

I love reading about how design decisions are being made! This story shares a few anecdotes from the designers and engineers behind the current shipment of Little Big Updates, including multi-select search, background blur in prototypes, on-canvas previews, and hanging punctuation.

On Tuesday, March 28th, 2023 at 9:00 AM PT, Figma will livestream the launch of 30+ little updates ​“that will be BIG improvements to your workflow”. The video teaser mentions the preview of blend modes and on-hover previews 👀 Sign up for a free webinar by their team of designer advocates and product managers.

Figma published their internal design team career levels and accompanying Skills Chart widget to the Figma Community! Last year they refreshed the leveling framework and Design Manager Sara Culver wrote a detailed post documenting this work. For additional context, I highly recommend Noah Levin’s thread on this project. Also, don’t miss their templates for performance reviews and calibration.

FTE is an open-source tool for creating an automatic communication channel between design decisions (represented as design tokens) and code. The main objective of the tool is to simplify the standardization and update of these decisions throughout all the digital products sharing a Design System. Its creator Daniel Casado shows how to install, configure, and use the FTE to transform design tokens (either as Figma styles or from Token Studio) into CSS styles.

“Now you can create tables in FigJam right from the bottom tool bar. Organize information and ideas in custom-sized tables to build project plans, decision matrices, pro/​con lists, and more.” Check out a quick demo video and read the blog post on how the product team arrived at the approach, tackled multiplayer bugs, and finessed design details.

Such a fun thread by designer Jakub Świadek on how the FigJam team redesigned the sticky note curl. See also another thread by Noah Finer on how it was implemented with CSS and SVG animations.

“You can now seamlessly copy-and-paste between your iPad and desktop. Just open a FigJam file on your iPad, and another FigJam or Figma file on your desktop at the same time. Copy something on iPad and an in-app notification on desktop will ask you if you want to paste the selection from the other device. You can copy-and-paste from desktop to iPad, too.”

Paid resources are finally available on Community! The days of dealing with license keys, paying through 3rd-party websites, and importing downloaded files are over. As a customer, you can try most resources before buying, and if something went wrong easily apply for a refund.

While this release makes the whole experience much smoother for end users, it’s a huge change for Community creators — ​“there’s no dealing with payment integrations, license keys, emailing files, or even managing refunds — just set your price, publish, and start earning”. A few years ago, I was delighted to learn that some creators earn a living from selling Figma plugins and resources. This will become much more common now because of additional exposure and a lower barrier to entry. There has never been a better time to start contributing to the design community.

The Figma Store is now available in the EU, and to celebrate the occasion they’ve dropped a new swag collection. My favorite additions are the new washi tape, Dress Code hat, and Toolkit mug!

Figma always supported #RGB and #RRGGBB CSS syntaxes in color fills, but now you can also use rgb(), rgba(), hsl(), and hsla(). Pretty neat!