New ways to manipulate colors and glyphs in Figma, coming directly from the team. #18: Two new blend modes that are most applicable to designing for iOS, as explained by Rogie — plus darker (linear burn) and plus lighter (linear dodge). Now we can do a classic dodge and burn! #19: Scrubbable inputs in color pickers. Use your mouse to drag or ​“scrub” individual fields to get precise control over your colors. #20: Alpha values in color inputs will be applied to the color’s opacity. #21: When outlining a stroke within a text node, the text is now converted into a group of vector nodes, one per text glyph.

New in-product workflows for requesting and approving plugins and widgets within Figma on the Organization and Enterprise plans. 

New frame presets and device frames for iPhone 15, 15 Plus, 15 Pro, and 15 Pro Max. Moreover, Keeyen created vector iPhones for prototyping and shared them with the community.

A few small tweaks to the visual experience of designing in Figma. #14: Whoa, now you can see both horizontal and vertical offset when hovering over objects while holding Option! (Used to be only one or another.) #15: Click targets are no longer jumping around when removing effects. (This one was pretty hilarious, but not in a good way.) #16: New red indicator lines show when you’ve reached min and max widths — even when typing or resizing paddings. #17: Arrow ligatures now work in section and frame titles. (FWIW I have a better solution!)

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.”

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.”

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.

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

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.

Week 2 of the Little Big Updates is all about collaborating more creatively. #5: Embedding MP4 and MOV video files directly in FigJam. #6: A new look for the embedded content in FigJam. #7: Camera selection and better audio/​video effects in the Photo Booth widget. #8: 300+ new emojis in the emoji picker after upgrading to Unicode 14.0. #9: When you stop following a spotlight in a Figma or FigJam file, a new reminder will appear prompting you to rejoin your teammates while the spotlight is still active.

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 🤯

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.

A new take on Little Big Updates from Figma — every Thursday this fall they’re releasing some of the 30+ updates designed to make day-to-day life a little easier. This week it’s four improvements to the Assets panel. #1 is filtering assets by a specific library file, recently viewed, default libraries, and more. #2 is larger and more visible thumbnails. #3 is showing component names by default, with variant counts on hover. #4 is my favorite — clicking on an asset opens up a new component modal that displays a larger preview and a link to the main component file, plus a component playground on the paid plans where you can preview and interact with any variants, variable modes, or component properties.

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.

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.”

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.”

“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.”

“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.

Jambot is a free widget from Figma to interact with ChatGPT right in FigJam. Use it to create visual mindmaps, take a multi-threaded approach to brainstorming, or generate ideas with teammates and ChatGPT on the same canvas. Quite amazing that it was born during last month’s Maker Week and is already live!

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.”

Miggi causes the ​“figception” by using Jambot to come up with ideas for making Figma content. Quite amazing to see how it can be used as a tool for thought (or even programming, FWIW).

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.

“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.

Lottielab is a new tool for creating and managing Lottie animations that won Product of the Day at ProductHunt this week. Images can be imported from Figma, SVGs, or Lottie files, and exported as Lottie, GIF, or MP4 to any platform. From Drew, a co-founder of Lottielab: ​“We are streamlining this cluttered process into a simple, seamleass, all-in-one workflow, with all the benefits of modern design tooling fit for today’s product development teams — being web-based, collaborative and easy to use — no After Effects knowledge needed.”

Last week Figma had their version of a company hackathon, Maker Week. I love everything about this — from dope branding to the inclusion of all teams. In this thread, they go through some of the past projects, but for the last 3 years, I’ve been collecting a (much longer!) list of my own. (Two years later, I’m still jealous of this keyboard by Robert Bye.)

During Maker Week, Rogie built a handy plugin for attaching files to the Figma document for hand-off. Great tool for sharing fonts, high-resolution pictures, or other assets with developers.

Luis updated Figma’s public UI2 design system file with all the features and elements introduced since its last update in 2019. His process is fascinating to follow and shows how much work went into this little update! Also has some great tips on plugins and the organization of a large design system.

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.

“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.”

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).”