The final week of LBU includes a number of quality-of-life updates.

The design editor. #22: On-canvas previews for the font picker (yay!) #23: Press Tab on a misspelled word to autocorrect the typo. #24: SF Symbols icons now render correctly. #25 and #26: Text boxes and containers (like frames and sections) can be used as snap targets. #27: Select text from the canvas in View-only mode. #28: A bug fix for the text shifts caused by changes in colors or text properties. #29: Nested component properties are visible in the playground and Dev Mode.

Collaboration tools. #30: Media in comments (yay!) #31: The full gamut of emoji reactions in comments. #32: Nominate someone to spotlight. #33: Mind maps in FigJam (whoa!) #34: Mobile app makes browsing files easier. #35 and #36: Importing Asana and Jira projects.

Prototyping experience. #37: A fix to ​“mouse enter” and ​“mouse leave” interactions. #38: The prototyping modal now pops up right when you need it. #39: Temporarily hide the edit modal by holding Shift. #40: Making it clear when you have multiple actions tucked into an interaction. #41: The inline preview can follow the current frame. #42: Sticky scrolling improvements (see more on this below).

Vice President of Product, Sho Kuwamoto, explains why quality-of-life improvements are at the core of Figma: ​“I don’t want to be at a company that only invests in things that will make headlines. I want to make a product that I feel proud of. The truth is, people do resonate with little changes, and we know that because we pay attention to our users’ individual stories. Plus, when you celebrate the small things and give each one their moment, it gives people a chance to recognize how important each one is.”

Config is back in Moscone Center, San Francisco on June 26–27, 2024 — save the date! Earliest bird tickets cost $175 (75% off!) and save you a guaranteed seat. Config 2023 was an incredible event, so I’ve already got my ticket and hope to make it back next year. The call for speakers is open until the end of this year and the next event will be focused on the five themes — building products, design craft, design systems, development and code, and innovation.

The AI is now integrated into FigJam to ​“help you instantly visualize ideas and plans, suggest best practices, and, of course, automate tedious tasks, so you can focus on the bigger picture.” What started as an experimental widget Jambot is now a first-class part of the product using GPT‑4. I used it this week to create a structure for a presentation which was a useful 0 to 0.1 progression. You can give it a try at the playground or check out how Zander Whitehurst uses it to create crazy flow charts.

Peter Yang interviewed Yuhki Yamashita about building FigJam AI, creating a culture where PMs and designers love their craft, making design accessible to everyone, and balancing new and power user needs. Most of Yuhki’s advice in this interview is for PMs, but it still applies to any product designer. (The interview is paywalled, but there is a lot of good stuff in the preview.)

Love this story about FigJam’s early days: ​“We had a meeting with our board two months before we were going to launch FigJam. The board asked us what our differentiator was since there were many other whiteboard tools. And Dylan said, ​“Well, it’s fun!” But then we realized that the product wasn’t fun enough. So the FigJam team ran a sprint called ​“FunJam” to come up with all the playful features that you see today like cursor chat, emotes, and more. So you’re absolutely right – fun was a core principle. Most workplace tools are a little boring and confine you in a box. We want to give you an inviting canvas with many lightweight ways to express yourself.”

Finally a solid improvement to detaching instances.

On Enterprise plans, workspace and team admins now can set default modes for a variable collection. This allows new files to open with the default variables modes set by the admin.

Harry McCracken published a big story about Figma and Dylan Field at Fast Company. It talks about Adobe’s acquisition and what it could mean for both companies, the future of design in the era of AI, the origin story of Figma, and their big ambition to ​“make creativity the new productivity”. 

The new page from Figma nicely explains different ways to build a color scheme (see also the book ​“Interaction of Color” by Josef Albers) but falls flat when it comes to color models and contrast — I wish this discussion didn’t stop at physics and involved human perception and modern tools. The generator also exists as a plugin, and that’s where it comes handy.

Updated corner radius UI makes it easier to bind a variable to each individual corner.

“Org Admins on the Enterprise plan can set a public link sharing policy for Design and FigJam files at the workspace level. This allows customers to have different policies for different workspaces, thereby unlocking user testing and external collaboration in some areas of the business without sacrificing security in other areas.”

Figma collaborated with Adobe on a video exploring some of the ideas for the post-acquisition future — Firefly in FigJam and Figma, linked assets between Figma and Creative Suit, multiplayer in Adobe apps, Figma prototypes + After Effects, shared design systems, and more. For more ideas, see threads from Noah Levin, Tom Lowry, Sho Kuwamoto, and Luis.

I’m a generalist and occasionally do different kinds of design work, so having a tighter integration between Figma and Adobe apps would be pretty neat. Adobe Fonts would be my #1, but I wish I could reuse a color palette and assets from Figma while working on my book layout in InDesign. While designing a photo-heavy website, I went back and forth between Figma and Lightroom experimenting with post-processing. The new Photoshop on the web also makes so much sense as a native integration. Count me in as a Figma × Adobe optimist.

Admins in Enterprise organizations can now make workspaces feel distinct with customized icons, header colors, and descriptions.

Karri Saarinen shares how their team is building one of the best-designed products out there: ​“The main point is that the design is only a reference, never any kind of deliverable itself, so the way it’s constructed doesn’t really matter.“ Don’t miss a follow-up on this approach and tech debt, as well as an older thread on their simple design system. Last but not least, his recent interview with Lenny Rachitsky on how Linear builds product was just fantastic (a good chunk is behind a paywall, but a podcast version is free.)

Great thread explaining the ​“weirdness” of OkLCH by one of the authors of the new Harmony color palette. Here is something I never thought about: ​“In electronic displays, yellow, cyan, and magenta are products of shining two lamps – subpixels. The more light is emitted, the brighter we perceive the color. It means the max lightness of the yellow is much higher than the blue’s.”

In August, Figma rolled out the ability for users to rate and review community resources. Social features are tricky, and many plugin developers (including myself) felt discouraged by the unexpected side effect of receiving one-star ratings without any comments or feedback. Figma is listening and iterating, and this week will be rolling out more changes — ratings are gone and ​“likes” are being brought back as a way for users to tell that they’re enjoying a resource. Users will still be able to leave comments to share their feedback and authors could directly reply to them. Great to see this level of care and involvement with the community!

A new setting for more control over billing in Figma — admins can set the default role for anyone joining their Figma account to be editor, viewer, or viewer-restricted.

In addition to setting the default role, admins can get email notifications to keep track of who has upgraded and what action led to their upgrade.

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.